/* ===== אני מול עצמי · טופס הצטרפות =====
   צבעי המותג זהים לאתר ולפלטפורמה. אווירה: זהב חם של הכיתה הפרטית + ירוק המותג לפעולות. */
:root{
  --cream:#FFFFFF; --cream-2:#F2F1ED; --ink:#26241E; --ink-soft:#4F4E4A;
  --forest:#289A02; --gold:#CFB176; --gold-light:#DDC89F; --gold-deep:#289A02; /* היה #9A7430 ונקרא "זהב כהה", אבל על המסך הוא חום. דגן ביקש שלא יהיה חום */
  --sage:#CFE9C4; --line:#E2E0D9; --white:#FFFDF8;
  --s1:#FF0000; --s1-bg:#FFEAEA; --s2:#D4A017; --s2-bg:#FBF2DC; --s3:#289A02; --s3-bg:#E5F3E1;
  --brand-green:#289A02; --brand-green-dark:#289A02; --brand-green-deep:#289A02;
  --green-text:#289A02; /* טקסט ירוק קטן על רקע בהיר */
  --paper:#F7F4EC; --card:#FFFDF8;
  --radius:24px; --shadow:0 10px 34px rgba(38,36,30,.10);
  --hd-p:#26241E; --hd-d:#D23B2F;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:130px;}
body{font-family:'Assistant', system-ui, sans-serif; color:var(--ink); line-height:1.6; min-height:100svh; overflow-x:hidden;
  background:radial-gradient(80% 50% at 100% 0%, #FDF6E7 0%, transparent 65%), radial-gradient(70% 45% at 0% 100%, #EEF7EA 0%, transparent 65%), #FBF9F4; background-attachment:fixed;}
button, input, textarea, select{font:inherit; color:inherit;}
button{cursor:pointer; background:none; border:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
[hidden]{display:none !important;}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:10px;}
.muted{color:var(--ink-soft);}
.eyebrow{display:block; font-size:.8rem; font-weight:800; color:var(--gold-deep); letter-spacing:.03em;}

/* ===== כפתורים ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; font-size:1rem; padding:13px 26px; border-radius:999px; transition:transform .15s, box-shadow .15s, background .15s; text-align:center; white-space:nowrap;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--brand-green); color:#fff; box-shadow:0 6px 18px rgba(40,154,2,.25);}
.btn-primary:hover{background:var(--brand-green); box-shadow:0 8px 22px rgba(40,154,2,.35); transform:translateY(-1px);}
.btn-gold{background:linear-gradient(135deg, #DDC89F, #CFB176); color:#1A1A1A; box-shadow:0 6px 18px rgba(38,36,30,.3);}
.btn-ghost{color:var(--green-text); border:1.5px solid rgba(40,154,2,.35); background:rgba(255,255,255,.6);}
.btn-ghost:hover{border-color:var(--brand-green); background:#fff;}
.btn-lg{padding:16px 34px; font-size:1.08rem;}
.link{color:var(--green-text); font-weight:700; text-decoration:underline; text-underline-offset:3px;}

/* ===== כותרת עליונה ===== */
.top{position:sticky; top:0; z-index:40; background:rgba(247,244,236,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(226,224,217,.7);}
.top-in{max-width:880px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:14px;}
.top-logo img{height:46px; width:auto;}
.top-side{width:58px; flex-shrink:0;}
.top-back{width:auto; min-width:58px; font-size:.86rem; font-weight:800; color:var(--green-text); white-space:nowrap; padding:6px 12px; border-radius:999px; border:1.5px solid rgba(40,154,2,.25); background:rgba(255,255,255,.6);}
.top-back:hover{border-color:var(--brand-green); background:#fff;}
.top-mid{flex:1; display:flex; flex-direction:column; align-items:center; line-height:1.2;}
.top-chapter{font-weight:800; font-size:.95rem;}
.top-count{font-size:.78rem; color:var(--ink-soft);}
.progress{height:4px; background:rgba(226,224,217,.6);}
.progress span{display:block; height:100%; background:linear-gradient(90deg, var(--brand-green), var(--gold)); border-radius:0 4px 4px 0; transition:width .5s cubic-bezier(.2,.8,.2,1); margin-inline-start:0;}
.chapters{list-style:none; max-width:880px; margin:0 auto; padding:10px 24px 14px; display:flex; gap:6px; justify-content:space-between;}
.chapters li{flex:1; font-size:.76rem; font-weight:700; color:#A3A19B; text-align:center; position:relative; padding-top:10px;}
.chapters li::before{content:''; position:absolute; top:0; right:0; left:0; height:3px; border-radius:3px; background:rgba(226,224,217,.8);}
.chapters li.done{color:var(--green-text);}
.chapters li.done::before{background:var(--brand-green);}
.chapters li.now{color:var(--ink);}
.chapters li.now::before{background:var(--gold);}

/* ===== מעטפת ===== */
.shell{max-width:780px; margin:0 auto; padding:44px 24px 160px;}
.shell.is-welcome{max-width:840px; padding-bottom:56px;}
.shell.is-done{max-width:920px; padding-bottom:64px;}

/* ===== פתיחה ===== */
.welcome{display:flex; flex-direction:column; gap:26px; animation:rise .5s ease;}
.welcome-card{position:relative; overflow:hidden; border-radius:30px; padding:60px 60px 52px; text-align:center;
  background:linear-gradient(180deg, #FFFFFF 0%, #FFFDF7 100%);
  border:1.5px solid var(--gold-light); box-shadow:0 18px 50px rgba(38,36,30,.13);}
.welcome-card::before{content:''; position:absolute; inset:0; height:5px; background:linear-gradient(90deg, var(--gold), var(--brand-green)); pointer-events:none;}
.welcome-dagan{width:104px; height:auto; margin:6px auto 14px;}
.welcome-card h1{font-size:clamp(2.1rem, 5vw, 3rem); font-weight:800; line-height:1.1; margin:8px 0 16px; letter-spacing:-.01em;}
/* פתיחה בשפה של האתר: כותרת אדום-ירוק, שורת זהב, קו מפריד, ופסקה אחת */
.w-opener{font-size:clamp(2.3rem, 7.5vw, 3.4rem); font-weight:900; line-height:1.12; margin:10px 0 14px; letter-spacing:-.015em; text-wrap:balance;}
.w-red{color:var(--s1);}
.w-green{color:var(--brand-green); position:relative; display:inline-block;}
.w-underline{position:absolute; inset-inline:0; bottom:-.18em; width:100%; height:.26em; min-height:11px; color:var(--brand-green); opacity:.9;}
.welcome-card > p.w-gold{color:var(--ink); font-weight:800; font-size:clamp(1rem, 3.4vw, 1.18rem); line-height:1.55; max-width:30ch; margin:18px auto 0; text-wrap:balance;}
.w-rule{width:110px; height:2px; margin:20px auto; border-radius:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent);}
.w-lead{font-size:1rem; line-height:1.85; color:var(--ink-soft); max-width:50ch; margin:0 auto; text-wrap:pretty;}
.welcome-card > p.w-method{margin-top:18px; font-size:.86rem; color:var(--ink-soft);}
.welcome-lead{font-size:1.18rem; font-weight:700; color:var(--brand-green-deep); max-width:34ch; margin:0 auto 20px; line-height:1.5;}
.welcome-card > p:not(.welcome-lead):not(.w-gold):not(.w-method){color:var(--ink-soft); max-width:56ch; margin:0 auto;}
.facts{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:36px 0 26px;}
.facts li{display:flex; align-items:center; gap:10px; text-align:right; background:#FBF9F4; border:1px solid var(--line); border-radius:18px; padding:16px 18px;}
.facts li > span{font-size:1.4rem;}
.facts b{display:block; font-size:.95rem; line-height:1.2;}
.facts small{color:var(--ink-soft); font-size:.8rem;}
/* "זה לא אבחון": בלי מסגרת ובלי רקע (החלטת דגן 5.10.2026, בלשונו: "להוריד את המסגרת והצבע בכניסה לשאלון - זה לא אבחון"). המילים של דן, לא נוגעים בהן */
.welcome-note{font-size:.9rem; color:var(--ink-soft); background:none; border:0; padding:0 16px; display:inline-block;}
.welcome-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px;}
.welcome-school{display:flex; align-items:center; gap:14px; justify-content:center; padding:10px 16px; border-radius:18px; color:var(--ink-soft); font-size:.9rem; transition:background .2s;}
.welcome-school:hover{background:rgba(255,255,255,.6);}
.welcome-school img{height:44px; width:auto;}

/* ===== שלב ===== */
.step{animation:rise .45s cubic-bezier(.2,.8,.2,1); display:flex; flex-wrap:wrap; gap:0 22px;}
@keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.step-head{width:100%; margin:0 0 34px;}
.step-head h1{font-size:clamp(1.65rem, 4.2vw, 2.15rem); font-weight:800; line-height:1.2; margin:8px 0 12px;}
.step-head p{color:var(--ink-soft); font-size:1.04rem; max-width:60ch; line-height:1.7;}
.field{width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px 34px; margin-bottom:22px; box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s;}
.field.half{width:calc(50% - 11px);}
.field.f-note{background:transparent; border:0; box-shadow:none; padding:0 4px;}
.field.f-care{background:transparent; border:0; box-shadow:none; padding:0 4px; margin-top:-4px;}
.field.f-consent{background:#FFFBF0; border-color:var(--gold-light);}
.f-head{margin-bottom:16px;}
.f-label{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:800; font-size:1.06rem;}
.f-help{color:var(--ink-soft); font-size:.94rem; margin-top:4px; line-height:1.6;}
.badge{font-size:.72rem; font-weight:700; color:#1A1A1A; background:#F6EDD8; padding:2px 10px; border-radius:999px;}
.opt{font-size:.72rem; font-weight:700; color:#7F7E78; background:var(--cream-2); padding:2px 10px; border-radius:999px;}
.note{font-size:.9rem; color:#1A1A1A; background:#FBF4E4; border-radius:14px; padding:10px 14px;}

input[type=text], input[type=email], input[type=tel], input[type=date], input[type=time], textarea, select{
  width:100%; border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:13px 16px; font-size:1.02rem; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none;}
input[dir=ltr]{text-align:right;}
input[type=date], input[type=time]{min-height:52px;}
textarea{resize:vertical; line-height:1.55; min-height:92px;}
input::placeholder, textarea::placeholder{color:#AFADA7;}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(207,177,118,.22);}
.select{position:relative;}
.select::after{content:''; position:absolute; left:18px; top:50%; width:8px; height:8px; border-left:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:translateY(-70%) rotate(-45deg); pointer-events:none;}
select{padding-left:40px; cursor:pointer;}
.time-in{margin-top:10px; max-width:200px;}

/* כפתורי בחירה קטנים */
.pills{display:flex; gap:8px; flex-wrap:wrap;}
.pill{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:10px 20px; font-weight:700; transition:all .15s;}
.pill:hover{border-color:var(--gold);}
.pill[aria-checked=true], .pill[aria-pressed=true]{border-color:var(--brand-green); background:var(--s3-bg); color:var(--brand-green-deep); box-shadow:inset 0 0 0 1px var(--brand-green);}

/* כרטיסי בחירה */
.cards{display:grid; gap:14px;}
.cards.cols-2{grid-template-columns:repeat(2,1fr);}
.cards.cols-3{grid-template-columns:repeat(3,1fr);}
.opt-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:right; border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:20px 20px 18px; transition:all .18s;}
.cols-2 .opt-card{flex-direction:row; align-items:flex-start; gap:12px;}
.opt-card:hover{border-color:var(--gold); transform:translateY(-1px); box-shadow:0 6px 16px rgba(38,36,30,.1);}
.oc-icon{font-size:1.7rem; line-height:1; width:46px; height:46px; display:grid; place-items:center; background:var(--cream-2); border-radius:14px; flex-shrink:0;}
.oc-body{display:flex; flex-direction:column; gap:3px; padding-left:22px;}
.oc-body b{font-size:1.02rem;}
.oc-body > span{font-size:.9rem; color:var(--ink-soft); line-height:1.45;}
.oc-body q{font-size:.86rem; font-weight:700; color:var(--gold-deep); quotes:'״' '״';}
.oc-check{position:absolute; left:12px; top:12px; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); background:#fff; transition:all .15s;}
.opt-card[aria-checked=true]{border-color:var(--brand-green); background:linear-gradient(180deg, #E5F3E1, #fff); box-shadow:0 0 0 1px var(--brand-green), 0 8px 20px rgba(40,154,2,.1);}
.opt-card[aria-checked=true] .oc-icon{background:var(--s3-bg);}
.opt-card[aria-checked=true] .oc-check{background:var(--brand-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; border-color:var(--brand-green);}

/* סרגל 1-10 */
.scale-box blockquote{font-size:.95rem; font-style:normal; color:var(--gold-deep); font-weight:600; border-right:3px solid var(--gold); padding:2px 16px 2px 0; margin-bottom:22px; line-height:1.5;}
.scale-box blockquote::before{content:'״';} .scale-box blockquote::after{content:'״';}
.scale{position:relative; padding-top:50px; --pos:.44;}
.scale-val{position:absolute; top:0; right:calc(var(--pos) * (100% - 34px)); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--brand-green); box-shadow:0 4px 12px rgba(40,154,2,.3); transition:right .12s; font-size:1rem;}
.scale.untouched .scale-val{background:#C7C4BB; box-shadow:none;}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:12px; border-radius:999px; background:linear-gradient(to left, #F0564A, #F2C230 50%, #289A02); outline:none; cursor:pointer; direction:rtl;}
.scale.untouched input[type=range]{filter:saturate(.35) opacity(.7);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:#fff; border:3px solid var(--brand-green); box-shadow:0 3px 10px rgba(0,0,0,.18); transition:transform .15s;}
input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid var(--brand-green); box-shadow:0 3px 10px rgba(0,0,0,.18);}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);}
.scale.untouched input[type=range]::-webkit-slider-thumb{border-color:#C7C4BB;}
.scale-ticks{display:flex; justify-content:space-between; padding:6px 9px 0; font-size:.72rem; color:#A3A19B; font-weight:700;}
.scale-ticks span{width:12px; text-align:center;}
.scale-ends{display:flex; justify-content:space-between; gap:10px; font-size:.82rem; font-weight:700; color:var(--ink-soft); margin-top:8px;}
.scale-ends span:last-child{text-align:left;}
.scale-hint{font-size:.82rem; color:#A3A19B; margin-top:8px; text-align:center;}

/* רמזור: מנותק / מתחבר / מדויק */
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.82rem; color:var(--ink-soft); margin-bottom:20px; padding:12px 16px; background:var(--cream-2); border-radius:14px;}
.lg{display:inline-flex; align-items:center; gap:6px;}
.lg i, .seg-b i, .m-dot i{width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0;}
.l1 i{background:#F0564A;} .l2 i{background:#F2C230;} .l3 i{background:#289A02;}
.levels, .sum-list{display:flex; flex-direction:column; gap:12px;}
.lv-row{display:grid; grid-template-columns:1fr auto; gap:14px 20px; align-items:center; padding:16px 18px; border:1.5px solid var(--line); border-radius:18px; background:#fff; transition:border-color .2s, background .2s;}
.lv-row.answered{background:#FDFCF8; border-color:var(--line);}
.lv-info{display:flex; gap:12px; align-items:flex-start;}
.lv-info b{display:block; font-size:1rem; line-height:1.3;}
.lv-sub{display:block; font-size:.84rem; font-weight:700; color:var(--gold-deep);}
.lv-desc{display:block; font-size:.84rem; color:var(--ink-soft); line-height:1.4; margin-top:2px;}
.lv-quote{display:block; font-size:.95rem; line-height:1.5; font-weight:600;}
.lv-icon{font-size:1.4rem; width:40px; height:40px; display:grid; place-items:center; background:var(--cream-2); border-radius:12px; flex-shrink:0;}
.chakra-dot{width:40px; height:40px; border-radius:50%; flex-shrink:0; background:radial-gradient(circle at 35% 35%, #fff 0 12%, var(--c) 55%); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 4px 10px color-mix(in srgb, var(--c) 35%, transparent);}
.seg{display:inline-flex; background:var(--cream-2); border-radius:14px; padding:4px; gap:4px;}
.seg-b{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:11px; font-weight:700; font-size:.9rem; color:var(--ink-soft); transition:all .15s; white-space:nowrap;}
.seg-b:hover{background:#fff;}
.seg-b.l1[aria-checked=true]{background:var(--s1-bg); color:#B3261E; box-shadow:inset 0 0 0 1.5px #F0564A;}
.seg-b.l2[aria-checked=true]{background:var(--s2-bg); color:#1A1A1A; box-shadow:inset 0 0 0 1.5px var(--s2);}
.seg-b.l3[aria-checked=true]{background:var(--s3-bg); color:var(--green-text); box-shadow:inset 0 0 0 1.5px var(--s3);}
.seg-sm .seg-b{padding:7px 11px; font-size:.84rem;}
.sum-row{display:flex; align-items:center; justify-content:space-between; gap:10px 16px; padding:14px 18px; border-radius:16px; border:1px solid var(--line); background:#fff;}
.sum-name{font-weight:700; font-size:.95rem; line-height:1.3;}
.sum-name small{display:block; font-size:.74rem; font-weight:700; color:var(--green-text);}
.sum-name small::before{content:'✓ ';}

/* חסר */
.is-missing{border-color:#E9897F !important; box-shadow:0 0 0 4px rgba(240,86,74,.12) !important;}
.missing-msg{width:100%; color:#B3261E; font-weight:700; background:#FFF0EC; border-radius:14px; padding:12px 16px; margin-top:4px;}

/* מפת הדרכים */
.roadmap{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.rm-col{--c:#F0564A; --bg:#FFF3F1; border:1.5px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; transition:all .2s;}
.rm-2{--c:#E0A800; --bg:#FFF8E3;} .rm-3{--c:#289A02; --bg:#E5F3E1;}
.rm-head{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:right; padding:18px 16px 16px; background:var(--bg); border-bottom:1px solid var(--line);}
.rm-num{font-size:.8rem; font-weight:800; color:var(--c);}
.rm-head b{font-size:1.08rem;}
.rm-tag{font-size:.8rem; color:var(--ink-soft); font-weight:600;}
.rm-head q{font-size:.84rem; font-weight:700; color:var(--c); quotes:'״' '״'; margin-top:4px;}
.rm-2 .rm-num, .rm-2 .rm-head q{color:#1A1A1A;} /* על רקע צהוב בהיר הטקסט שחור: צהוב כהה נראה חום */
.rm-col.on{border-color:var(--c); box-shadow:0 0 0 1.5px var(--c), 0 10px 24px rgba(0,0,0,.07);}
.rm-stations{list-style:none; padding:10px 8px;}
.rm-stations button{display:flex; gap:8px; align-items:center; width:100%; text-align:right; padding:8px 8px; border-radius:10px; font-size:.84rem; color:var(--ink-soft); line-height:1.3;}
.rm-stations button span{width:26px; height:26px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:.94rem; font-weight:800; border:1.5px solid var(--line); color:var(--ink-soft); background:#fff;}
.rm-stations button:hover{background:var(--bg); color:var(--ink);}
.rm-stations button[aria-pressed=true]{background:var(--bg); color:var(--ink); font-weight:700;}
.rm-stations button[aria-pressed=true] span{background:var(--c); border-color:var(--c); color:#fff;}
.rm-help{margin-top:16px;}

/* עיצוב אנושי */
.hd-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:24px;}
.f-hd .f-head{margin-top:4px;}
.f-hd .pills{margin-bottom:2px;}
.f-hd > .f-head:not(:first-child), .f-hd .select + .f-head{margin-top:28px;}
.hd-result{margin-top:30px;}
.hd-empty{display:flex; align-items:center; gap:14px; padding:18px; border-radius:18px; border:1.5px dashed var(--gold-light); background:#FFFBF0; color:var(--gold-deep); font-weight:600;}
.hd-empty span{font-size:1.8rem;}
.hd-card{display:grid; grid-template-columns:230px 1fr; gap:32px; align-items:start; padding:30px; border-radius:22px; animation:rise .5s ease;
  background:radial-gradient(80% 70% at 100% 0%, rgba(255,255,255,.8), transparent 60%), linear-gradient(140deg, #FFFBF0, #F4E8CB); border:1.5px solid var(--gold-light);}
.hd-svg{width:100%; height:auto; display:block;}
.hd-ch{fill:none; stroke:#E6E3DA; stroke-width:3.6; stroke-linecap:round;}
.hd-on{fill:none; stroke-width:3.6; stroke-linecap:round;}
.hd-center{fill:#fff; stroke:#C7C4BB; stroke-width:1.4; stroke-linejoin:round; filter:drop-shadow(0 1px 1.5px rgba(38,36,30,.18));}
.hd-center.on{fill:var(--gold); stroke:var(--gold);}
.hd-legend{display:flex; justify-content:center; gap:12px; font-size:.74rem; color:var(--ink-soft); margin-top:6px;}
.hd-legend i{display:inline-block; width:14px; height:4px; border-radius:2px; vertical-align:middle; margin-left:4px;}
.hd-legend i.p{background:var(--hd-p);} .hd-legend i.d{background:var(--hd-d);}
.hd-info h3{font-size:1.7rem; font-weight:800; line-height:1.15; margin:2px 0 6px;}
.hd-desc{color:var(--ink-soft); font-size:.95rem; margin-bottom:18px;}
.hd-info dl{display:grid; gap:10px;}
.hd-info dl > div{display:grid; grid-template-columns:110px 1fr; gap:12px; padding-top:10px; border-top:1px solid rgba(207,177,118,.4);}
.hd-info dt{font-size:.82rem; font-weight:800; color:var(--gold-deep);}
.hd-info dd{font-size:.94rem; font-weight:700;}
.hd-info dd small{display:block; font-weight:500; color:var(--ink-soft); font-size:.84rem; line-height:1.45;}
.hd-warn{display:block; font-size:.78rem !important; font-weight:700 !important; color:var(--gold-deep) !important;}
.hd-note{font-size:.84rem; background:rgba(255,255,255,.7); border-radius:12px; padding:8px 12px; margin-top:12px; color:var(--gold-deep);}

/* רעיונות לכתיבה */
.ideas{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px;}
.ideas-t{font-size:.8rem; font-weight:700; color:#A3A19B; margin-left:4px;}
.idea{font-size:.82rem; padding:5px 12px; border-radius:999px; background:var(--cream-2); color:var(--ink-soft); font-weight:600; transition:all .15s;}
.idea:hover{background:#F6EDD8; color:#1A1A1A;}
.ideas .f-help{width:100%; font-size:.84rem;}

/* אישור */
.consent{display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:.95rem; line-height:1.5;}
.consent input{position:absolute; opacity:0; pointer-events:none;}
.consent .box{width:24px; height:24px; flex-shrink:0; border-radius:8px; border:1.5px solid var(--gold); background:#fff; margin-top:1px; transition:all .15s;}
.consent input:checked + .box{background:var(--brand-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; border-color:var(--brand-green);}
.consent input:focus-visible + .box{outline:3px solid var(--gold); outline-offset:2px;}

/* ניווט תחתון */
.step-nav{position:fixed; bottom:0; right:0; left:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px max(24px, calc((100vw - 780px) / 2 + 24px)) calc(12px + env(safe-area-inset-bottom));
  background:rgba(247,244,236,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(226,224,217,.7);}
.step-nav .btn-primary{min-width:170px;}
.autosave{font-size:.8rem; color:var(--green-text); font-weight:700; opacity:0; transition:opacity .3s;}
.autosave.show{opacity:1;}

/* הכישרון */
.talent-pills .pill{padding:10px 16px;}
.talent-other{margin-top:14px; max-width:420px;}
.talent-sub{margin-top:30px; padding-top:24px; border-top:1px dashed var(--line);}
.lvl5{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.lvl5-b{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:14px 8px; border:1.5px solid var(--line); border-radius:16px; background:#fff; transition:all .15s;}
.lvl5-b b{font-size:1.4rem; line-height:1; color:var(--ink);}
.lvl5-b span{font-size:.82rem; color:var(--ink-soft); line-height:1.35; font-weight:600;}
.lvl5-b:hover{border-color:var(--gold);}
.lvl5-b[aria-checked=true]{border-color:var(--brand-green); background:var(--s3-bg); box-shadow:inset 0 0 0 1px var(--brand-green);}
.lvl5-b[aria-checked=true] b{color:var(--brand-green);}
.small-note{font-size:.9rem; margin-top:10px; line-height:1.55;}

/* הערה עדינה לרגעים קשים */
.care-note{display:flex; gap:12px; align-items:flex-start; width:100%; font-size:.9rem; color:var(--ink-soft); line-height:1.6; padding:4px 6px 0;}
.care-note span{font-size:1.1rem;}
.care-note a{color:var(--green-text); font-weight:700; white-space:nowrap;}

/* ===== סיום · המפה שלי ===== */
.done{animation:rise .5s ease;}
.done-hero{text-align:center; padding:12px 10px 40px;}
.done-logo{width:92px; height:auto; margin:0 auto 14px;}
.done-hero h1{font-size:clamp(2rem, 5vw, 2.7rem); font-weight:800; line-height:1.15; margin:8px 0 14px;}
.done-hero p{color:var(--ink-soft); max-width:52ch; margin:0 auto; font-size:1.05rem;}
.map{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.m-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px; box-shadow:var(--shadow);}
.m-card h2{font-size:1.4rem; font-weight:800; line-height:1.2; margin:2px 0 6px;}
.m-hd{grid-column:1 / -1; display:grid; grid-template-columns:210px 1fr; gap:36px; align-items:center; background:linear-gradient(140deg, #FFFBF0, #F4E8CB); border-color:var(--gold-light);}
.m-facts{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-top:18px;}
.m-facts li{font-weight:700; font-size:.94rem;}
.m-facts b{display:block; font-size:.78rem; color:var(--gold-deep);}
.m-road h2{color:var(--c);}
.m-path{display:flex; gap:4px; margin-top:14px;}
.m-path span{flex:1; height:8px; border-radius:4px; background:var(--line);}
.m-path span.on.lv1{background:#F0564A;} .m-path span.on.lv2{background:#F2C230;} .m-path span.on.lv3{background:#289A02;}
.m-bar{display:grid; grid-template-columns:100px 1fr 24px 30px; gap:10px; align-items:center; margin-top:16px; font-size:.9rem; font-weight:700;}
.m-track{height:10px; border-radius:999px; background:var(--line); overflow:hidden;}
.m-track i{display:block; height:100%; border-radius:999px; background:linear-gradient(to left, #F0564A, #F2C230 55%, #289A02); background-position:right center;}
.m-bar em{font-style:normal; font-size:.78rem; font-weight:800;}
.m-bar em.up{color:var(--s3);} .m-bar em.down{color:#B3261E;}
.m-pair{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; text-align:center;}
.m-pair > div{background:var(--cream-2); border-radius:16px; padding:16px 8px;}
.m-pair .big{font-size:1.8rem; display:block; line-height:1.2;}
.m-pair b{display:block; font-size:.9rem; line-height:1.25;}
.m-pair small{color:var(--ink-soft); font-size:.76rem;}
.m-dots{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px;}
.m-dot{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--cream-2);}
.m-dot.l1{background:var(--s1-bg);} .m-dot.l2{background:var(--s2-bg);} .m-dot.l3{background:var(--s3-bg);}
.next{margin-top:22px; background:linear-gradient(135deg, #289A02, #289A02); color:#fff; border:0;}
.next .eyebrow{color:var(--gold-light);}
.next-steps{list-style:none; counter-reset:n; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 26px;}
.next-steps li{counter-increment:n; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:18px;}
.next-steps li::before{content:counter(n); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--gold); color:#fff; font-weight:800; font-size:.85rem; margin-bottom:8px;}
.next-steps b{display:block;} .next-steps span{font-size:.94rem; font-weight:700;}
.done-actions{display:flex; flex-wrap:wrap; gap:10px;}
.next .btn-primary{background:#fff; color:var(--brand-green-deep); box-shadow:none;}
.next .btn-ghost{color:#fff; border-color:rgba(255,255,255,.45); background:transparent;}
.done-foot{text-align:center; margin-top:28px; font-size:.9rem;}

/* ===== מובייל ===== */
@media (max-width:720px){
  .top-in{padding:8px 14px; gap:10px;}
  .top-logo img{height:38px;}
  .top-side{width:48px;}
  .top-back{width:auto; font-size:.78rem; padding:5px 10px;}
  .chapters{padding:8px 14px 8px;}
  .chapters li:not(.now){font-size:0; color:transparent;}
  .chapters li.now{flex:2.2;}
  .shell{padding:28px 16px 140px;}
  .field{padding:24px 20px; border-radius:22px; margin-bottom:18px;}
  .step-head{margin-bottom:26px;}
  .field.half{width:100%;}
  .welcome-card{padding:40px 22px 34px; border-radius:26px;}
  .facts{grid-template-columns:1fr; gap:10px;}
  .cards.cols-2, .cards.cols-3{grid-template-columns:1fr;}
  .cols-3 .opt-card{flex-direction:row; gap:12px;}
  .roadmap{grid-template-columns:1fr;}
  .rm-col:not(.on) .rm-stations{display:none;}
  .lv-row{grid-template-columns:1fr; padding:16px;}
  .seg{display:grid; grid-template-columns:repeat(3,1fr); width:100%;}
  .seg-b{justify-content:center; padding:10px 6px;}
  .sum-row{flex-direction:column; align-items:stretch;}
  .hd-grid{grid-template-columns:1fr;}
  .hd-card{grid-template-columns:1fr; padding:22px 18px; gap:22px;}
  .hd-graph{max-width:210px; margin:0 auto;}
  .hd-info dl > div{grid-template-columns:1fr; gap:0;}
  .step-nav{padding-inline:16px;}
  .step-nav .btn{padding:12px 18px;}
  .step-nav .btn-primary{min-width:0; flex:1;}
  .autosave{display:none;}
  .map{grid-template-columns:1fr;}
  .m-hd{grid-template-columns:1fr; gap:20px;}
  .map{gap:16px;}
  .m-card{padding:24px 20px;}
  .m-hd-graph{max-width:190px; margin:0 auto;}
  .next-steps{grid-template-columns:1fr;}
  .lvl5{grid-template-columns:1fr;}
  .lvl5-b{flex-direction:row; justify-content:flex-start; gap:14px; text-align:right; padding:12px 16px;}
  .done-actions .btn{flex:1 1 100%;}
}

.welcome-quiz{background:var(--s3-bg); border-radius:14px; padding:8px 14px;  /* 12→8 (7.10, גלילה עם טיוטה) */ font-size:.93rem; color:var(--ink); margin-top:10px; display:flex; align-items:center; gap:12px; text-align:right;}
.welcome-quiz img{width:46px; height:auto; flex:none;}  /* נשמה טובה ליד השורה עליו (החלטת דגן 5.10.2026) */
.welcome-quiz span{flex:1;}

/* ===== זה מה שכבר סיפרת (מהשאלון של בית הספר) ===== */
.qr-lead{display:flex; gap:14px; align-items:flex-start; background:var(--s3-bg); border-radius:18px; padding:16px 18px; margin-bottom:18px;}
.qr-lead img{width:54px; height:auto; flex:none;}
.qr-lead p{font-size:.95rem; line-height:1.55; color:var(--ink);}
/* 🔴 "זה מה שכבר סיפרת" ככרטיסים צפופים: אייקון | כותרת ומתחתיה התוכן | "לעדכן" (החלטת דגן 5.10.2026 בערב, "לכווץ: שורה לכל פריט",
   אחרי שהמסך נמדד 3035 פיקסל עם 12 כרטיסים). המבנה ב-form.js לא השתנה, רק הפריסה. */
.qr-list{display:grid; gap:8px;}
.qr-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:9px 12px; box-shadow:none; display:grid; grid-template-columns:auto 1fr auto; column-gap:10px; row-gap:1px; align-items:center;}
.qr-head{display:contents;}
.qr-head b{grid-column:2; grid-row:1; font-size:.92rem; font-weight:900; line-height:1.3;}
.qr-ico{grid-column:1; grid-row:1 / span 3; font-size:1.15rem;}
.qr-edit{grid-column:3; grid-row:1 / span 3; font-size:.78rem; font-weight:700; color:var(--green-text); border:1px solid var(--sage); border-radius:999px; padding:4px 10px; white-space:nowrap;}
.qr-edit:hover{background:var(--s3-bg);}
.qr-edited{border-color:#CFB176; box-shadow:0 0 0 2px #F7EFD9;}  /* כרטיס שעודכן ידנית (8.10.2026): מסגרת זהב, כדי שיראו שהוא שונה מהשאלון */
/* 10.10.2026 (דגן: "יהיה אפשרי לערוך"): הנקודה היא כפתור. לחיצה מחליפה מצב (🔴→🟡→🟢→🔴). */
button.qr-dot{font:inherit; cursor:pointer; border:1px solid transparent; color:inherit;}  button.qr-dot:hover{border-color:var(--sage);}
.qr-edit-hint{font-size:.78rem; color:var(--ink-soft); margin:4px 0 0;}
.quizcard{margin-bottom:4px;}  .quizcard .qr-card{background:#FBF9F4;}
.qr-edited-note{color:var(--ink-soft);}
.w-debug{font-size:.8rem; color:var(--ink-soft); background:#FBF9F4; border:1px dashed var(--line); border-radius:10px; padding:6px 10px; margin:0 0 8px; text-align:right; direction:rtl;}
.qr-card > :not(.qr-head){grid-column:2; margin:0;}
.qr-line{font-size:.9rem; line-height:1.4;}
.qr-sub{font-size:.82rem; color:var(--ink-soft); margin-top:0; line-height:1.4;}
.qr-dots{display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:3px;}
.qr-dot{display:inline-flex; align-items:center; gap:4px; font-size:.8rem; background:var(--paper); border-radius:999px; padding:3px 8px;}
.qr-dot i{font-style:normal; font-size:.72rem;}
.qr-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:3px;}
.qr-tag{background:var(--s3-bg); border-radius:999px; padding:3px 9px; font-size:.82rem; font-weight:700;}
/* נשמה טובה בכל שלב (דגן 5.10 בערב). המידות כמו q-soul/q-bubble בשאלון של חיה: תמונה 56, בועה לבנה עם מסגרת sage ופינה "מדברת" */
.soul-line{display:flex; align-items:flex-end; gap:10px; margin:0 0 18px;}
.soul-line > img{width:46px; height:auto; flex:none;}
.soul-bubble{background:#fff; border:1.5px solid var(--sage); border-radius:18px 18px 18px 4px; padding:10px 14px; font-size:.95rem; line-height:1.5; box-shadow:0 4px 14px rgba(38,36,30,.06); display:flex; align-items:center; gap:10px;}
.soul-bubble p{margin:0; flex:1;}
.soul-type{width:44px; height:44px; flex:none;}
.qr-type{width:30px; height:30px; display:block;}
.qr-more{font-size:.82rem; font-weight:700; color:var(--green-text); text-decoration:underline; padding:0; background:none; border:0;}
.qr-count{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center;}
.qr-dots + .qr-more{margin-top:6px; justify-self:start;}
.qr-note{margin-top:18px; font-size:.92rem; color:var(--ink-soft); text-align:center;}

/* ===== הדפסה / PDF ===== */
@media print{
  body{background:#fff;}
  .top, .step-nav, .done-actions, .done-foot{display:none !important;}
  .shell{padding:0; max-width:none;}
  .m-card, .next{box-shadow:none; break-inside:avoid;}
  .next{background:#fff; color:var(--ink); border:1px solid var(--line);}
  .next .eyebrow{color:var(--gold-deep);}
  .next-steps li{border-color:var(--line);}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }

/* רצועת ער״ן קבועה בכל שלב: בוטלה בהכרעת דגן, 29.9.2026, והעיצוב שלה הוסר. במקומה שורה אחת
   בסוף שלב 6 (השדה `care` ב-questions.js, המחלקה .care-note). לא להחזיר .care-strip. */

/* שורה רכה כשמזוהות מילות מצוקה בשדה טקסט (הכרעת דן, 29.9.2026). לא חוסמת, לא מעבירה מסך, ופעם אחת בכל מילוי */
.care-hint{margin:2px 0 0; padding:10px 14px; border-radius:14px; background:rgba(40,154,2,.06);
  border:1px solid rgba(40,154,2,.18); font-size:.84rem; line-height:1.5; color:var(--ink);}
.care-hint a{color:var(--green-text); font-weight:800; text-decoration:none; border-bottom:1px solid rgba(40,154,2,.35); white-space:nowrap;}

/* שורת המכשיר המשותף, כפתור המחיקה והשאלה על טיוטה בלי בעלים (הכרעת דן, 29.9.2026) */
.w-device{margin:14px 0 0; font-size:.84rem; line-height:1.5; color:var(--ink-soft); text-align:center;}  /* .8 ← .84: הכתב הקטן ביותר בפתיחה קובע כמה מותר להקטין (רצפה 11.5), ו-.8 חסם את המחשב ב-4 פיקסל גלילה (5.10 בערב) */

.w-wipe{margin:8px 0 0; text-align:center;}
.w-wipe .btn-sm{font-size:.84rem; padding:6px 14px; min-height:0;}  /* .8 ← .84 (5.10 בערב): הכתב הקטן ביותר בפתיחה קובע את רצפת ההקטנה */
.w-wipe .wiped{font-size:.85rem; color:var(--green-text); font-weight:800;}
/* שורת המצב מעל כפתור ההמשך (6.10.2026): שורה קטנה ולא קופסה. .8rem = 12.8 פיקסל, מעל רצפת 11.5 (כלל 5יד) */
.w-resume{font-size:.8rem; color:var(--ink-soft); margin:0 0 6px; text-align:center;}
/* 7.10.2026 (דגן: "כשכתוב להמשיך... יש גלילה לתקן"): 4 מרווחים נדחסו בפתיחה בטלפון. אף מילה לא ירדה. */
@media (max-width:700px){
  .welcome-card{padding-top:8px; padding-bottom:8px;}
  .facts{padding:6px 12px;}
  .welcome-note{margin-bottom:6px;}
  /* ⛔ .w-logo{margin:2px auto 6px} מעולם לא חל (10.10: נדרס על ידי .welcome-card h1). עכשיו: .welcome-card h1.w-logo למטה */
  .w-title{margin:0 auto 2px;}  /* 10.10: גם מלמעלה 0, הרווח מהלוגו הוא ה-gap של הכרטיס בלבד */
  .welcome-quiz{padding:6px 12px;}
  .welcome-note{margin-bottom:8px;}
}  /* 8.10: עוד 18 פיקסל אחרי משפט ההיוקה בפתיחה */
.w-orphan{margin:0 0 12px; padding:12px 16px; border-radius:14px; background:rgba(40,154,2,.06);
  border:1px solid rgba(40,154,2,.18); font-size:.9rem; line-height:1.5; color:var(--ink); text-align:center;}

/* ===== דף הפתיחה בעיצוב של דף הפתיחה של נשמה טובה (החלטת דגן 5.10.2026) =====
   "אני רוצה שזה יהיה בעיצוב של דף הפתיחה של נשמה טובה", אחרי "יש יותר מדי צפיפות כרגע".
   🔴 כל המספרים כאן נמדדו מהמסך של נשמה טובה בפלטפורמה (`viewOnboard`) ולא נבחרו בעין:
   כרטיס 440 מקסימום · ריפוד 28/22/24 · פינות 26 · רקע #FFFDF8 · מסגרת 1px #DCD3BE · gap 18 ·
   ממורכז · הדמות 110x150 בעמודה · ההסבר 16 · הכפתור רוחב מלא, גובה 58, פינות 999 · העמוד ממורכז לגובה.
   🔑 ומה שמונע את הצפיפות שם אינו המרווחים אלא היחס: הכרטיס הוא 624 בתוך מסך 844, כלומר 220 פיקסל אוויר.
   מי שמוסיף כאן בלוק מבטל בדיוק את זה.

   ⛔ בוטלו 5.10 ואינם חוזרים: בלוקי ההידוק מ-4.10 (clamp על כל מרווח, 3 מדרגות max-height),
   שנבנו כדי להכניס הכל בכוח ויצרו את הצפיפות שדגן העיר עליה. */

/* הלוגו של בית הספר רחב (יחס 1.47), ולכן נמדד ברוחב ולא בגובה */
.top-logo img{height:auto; width:88px;}
body:has(.shell.is-welcome) .top{background:transparent; border-bottom:0; position:static;}
body:has(.shell.is-welcome) .top-in{padding:6px 20px 0;}

/* העמוד ממורכז לגובה, כמו .gate-fit */
/* 🔴 בלי לחשב את גובה הפס העליון: #app הוא עמודה בגובה המסך, והכרטיס לוקח את מה שנשאר.
   חישוב ידני נשבר ברגע שהפס משתנה (וזה בדיוק מה שקרה: חושב 56 והוא 66, והתוצאה הייתה 10 פיקסל גלילה בכל גובה). */
body:has(.shell.is-welcome) #app{min-height:100svh; display:flex; flex-direction:column;}
.shell.is-welcome{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center;
  padding:2px 16px 6px; max-width:480px; width:100%; margin-inline:auto;}
.welcome{gap:8px;}

/* הכרטיס, במידות של נשמה טובה */
.welcome-card{max-width:440px; margin:0 auto; padding:14px 12px 14px; border-radius:26px;  /* 16/20 ← 14/12 (10.10, דגן: "למתוח קצת את התיאור") */  /* ריפוד 24/22 ← 16/16 (דגן 5.10 בערב: "להוריד את הרווח מלמעלה ולמטה של הלוגו") */
  background:#FFFDF8; border:1px solid #DCD3BE; box-shadow:0 6px 22px rgba(38,36,30,.07);
  display:flex; flex-direction:column; gap:11px; text-align:center;}  /* gap 15 ← 11 (10.10, דגן: "עדיין יש גלילה") */
.welcome-card::before{display:none;}

/* הלוגו במקום הדמות: אותו מקום, אותו גובה */
.w-logo{margin:0; line-height:0;}
/* 🔴 10.10.2026 (דגן: "יש יותר מדי רווח מתחת ללוגו"): נמדד 32 פיקסל בין הלוגו לכותרת. הסיבה: הכלל הכללי
   `.welcome-card h1{margin:8px 0 16px}` (למעלה בקובץ) חזק יותר מ-`.w-logo{margin:0}`, ולכן ה-0 מעולם לא חל,
   וגם ה-2/6 בטלפון לא. הכלל כאן חזק יותר משניהם, והלוגו יושב בלי שוליים. */
.welcome-card h1.w-logo{margin:0 auto;}
.w-logo img{width:auto; height:104px; display:block; margin:0 auto;}  /* 124 ← 104 (דגן 5.10 בערב) */
.welcome-card .eyebrow{margin:0;}

/* ההסבר, בגודל ובצבע של נשמה טובה */
/* הכותרת השחורה בפתיחה (החלטת דגן 5.10.2026): כמו כותרות הסקשנים בדף הבית של לאון (שחור, כבד, ממורכז), בגודל של כרטיס. 900 = מה שכותבים, 800 = מה שמוצג (כלל 5ט) */
.w-title{font-size:1.35rem; font-weight:900; color:#000; line-height:1.25; margin:6px auto 6px; max-width:30ch; text-shadow:0 1px 3px rgba(0,0,0,.12);}  /* הצל: כמו כותרות הפלטפורמה (styles.css של ירדן, .page-head h1) */
.w-title em{font-style:normal; color:#8E5BC9;}  /* "לחיות באמת" בסגול הרגיל: הסגול של הלב 💜 בפלטפורמה (החלטת דגן 5.10.2026: "לכתוב את לחיות באמת בסגול הרגיל") */
.w-lead{font-size:1rem; line-height:1.45; color:#514E44; max-width:none; margin:0 auto;}  /* 1.55→1.45 בטלפון (6.10, גלילה) · 34ch → ברוחב הכרטיס (10.10, דגן: "למתוח קצת את התיאור") */

/* 3 העובדות כשורות בקופסה אחת. אף מילה לא ירדה, והן מקופלות במקום פרושות.
   "התשובות לא יוצאות החוצה" הוא ניסוח פרטיות מאושר (דן, 26.9) ואינו יורד בשום מצב. */
/* 6.10.2026 (דגן: "בנייד... מסך פתיחה לשנות בלי גלילה"): מרווחים נדחסו (gap 7→4, padding 12→8, קו 7→4). אף מילה לא ירדה. */
.facts{display:flex; flex-direction:column; grid-template-columns:none; gap:4px; margin:0;
  background:#FBF9F4; border:1px solid var(--line); border-radius:16px; padding:8px 12px;}
.facts li{background:none; border:0; border-radius:0; padding:0; gap:9px; align-items:baseline; text-align:right;}
.facts li + li{border-top:1px solid rgba(226,224,217,.6); padding-top:4px;}
.facts li > span{font-size:1rem; line-height:1;}
.facts li > div{display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 7px;}
.facts b{display:inline; font-size:.88rem;}
.facts small{font-size:.82rem; line-height:1.3;}

.welcome-note{font-size:.88rem; padding:0 15px; margin:0 auto;}
.welcome-actions{margin:0; gap:8px; flex-wrap:nowrap;}
.welcome-actions .btn-lg{flex:1 1 auto; width:auto; min-width:0; padding:15px; border-radius:999px; font-size:1.02rem;}
.welcome-actions .btn-ghost{flex:0 0 auto;}  /* "להתחיל מחדש" ליד "להמשיך" ולא מתחתיו (5.10 בערב: בלי גלילה גם למי שחוזר לטיוטה) */
.w-device{margin:0; font-size:.84rem;}
.welcome-card > p.w-method{margin:0; font-size:.84rem;}
/* 🔴 10.10.2026 (דגן: "את המשפט מבוסס לקלוט באמת ליישר לאמצע"): השורה יצאה מהכרטיס אל .w-fine ב-5.10, ומאז הכלל שמעל
   (.welcome-card > p.w-method) לא תפס אותה בכלל - היא קיבלה ברירת מחדל: ימין. הכלל כאן הוא זה שחל. */
.w-fine p.w-method{margin:0; font-size:.84rem; color:var(--ink-soft); text-align:center;}
.welcome-school{padding:2px 14px; gap:9px; font-size:.84rem;}
.welcome-school img{height:28px;}

/* טלפון נמוך: אותם רכיבים, קטנים יותר. בלי להוריד אף מילה. */
/* 🔴 המידות כאן קבועות ונוחות, והן נמדדו מהמסך של נשמה טובה. ההתאמה לגובה המסך נעשית ב-`fitWelcome()`
   שב-form.js, באותו מנגנון של `fitGate` בשער הכניסה של הפלטפורמה: מודדים אחרי הציור, ואם צריך מקטינים
   את כל הבלוק ב-zoom. 🔑 וזה מה שמחזיק את העיצוב: כיווץ של מרווחים לבד משנה את היחסים ויוצר צפיפות
   (וזה בדיוק מה שקרה ב-4.10), וכיווץ של הכל יחד שומר על אותו מראה בדיוק, רק קטן יותר. */

/* ===================================================================
   עיצוב מלכותי, במבנה של שאלון הכניסה (החלטת דגן 5.10.2026)
   "לעשות את כל השאלון בעיצוב מלכותי אבל בדומה לשאלון כניסה לבית הספר"

   🔴 המבנה נמדד מ-`אתר/sensitivity` ולא נבחר בעין:
   רקע מדורג על הגוף · כרטיס לבן אחד לכל מסך · פינות 18 · מסגרת 1px #DCD3BE ·
   ריפוד 22/16/16 · כותרת 30 במשקל 900 · תשובה בגובה 52 ופינות 16 · כפתור בפינות 999.

   🔑 וההבדל המבני שהיה בין השניים, והוא מה שפירק את התחושה בטופס:
   בשאלון יש כרטיס אחד לכל מסך, ובטופס היה כרטיס נפרד לכל שדה. כאן זה מתאחד.

   🔴 ו"מלכותי" הוא הזהב של המותג (#CFB176) ובמסגרות ובקווים בלבד.
   טקסט בזהב על רקע בהיר אינו קריא (נמדד 2.06, ונקבע בפרויקט 30.9), ולכן הכותרות נשארות שחורות.
   =================================================================== */

/* הרקע המדורג. בשאלון הוא ירוק בהיר; כאן זהב, כי זו התכנית היוקרתית */
body{background:linear-gradient(#F3EADA 0%, #FBF9F4 300px, #FBF9F4 100%) no-repeat; background-attachment:fixed;}

/* הפס העליון שקוף, כדי שהמדרג יימשך מתחתיו */
.top{background:rgba(251,249,244,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(207,177,118,.28);}
.progress{background:rgba(207,177,118,.22);}
.chapters li.now::before{background:var(--gold);}
.chapters li.now{color:var(--ink); font-weight:800;}

/* 🔑 כרטיס אחד לכל שלב, במקום כרטיס לכל שדה */
.step{display:block; background:#FFFDF8; border:1px solid #E3D5B8; border-radius:18px;
  padding:24px 18px 20px; box-shadow:0 6px 22px rgba(38,36,30,.07); position:relative; overflow:hidden;}
/* קו הזהב בראש הכרטיס, כמו בכרטיס הפתיחה */
.step::before{content:''; position:absolute; inset-inline:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--gold), var(--brand-green)); pointer-events:none;}

.step-head{width:100%; margin:4px 0 22px; text-align:center;}
.step-head h1{font-size:clamp(1.55rem, 6.4vw, 1.9rem); font-weight:900; line-height:1.18; margin:6px 0 10px; letter-spacing:-.01em;}
.step-head p{font-size:.98rem; line-height:1.6; max-width:40ch; margin-inline:auto;}
/* קו זהב קצר מתחת לכותרת */
.step-head h1::after{content:''; display:block; width:46px; height:2px; margin:12px auto 0; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);}

/* השדות בתוך הכרטיס: בלי רקע ובלי מסגרת, מופרדים בקו דק */
.step .field{background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:18px 2px; margin:0;}
.step .field + .field{border-top:1px solid rgba(207,177,118,.3);}
.step .field.half{width:100%;}
.step .field.f-note{padding:12px 2px;}

/* שורות הבחירה, במידות של השאלון */
.step .opt-card, .step .pill, .step .lv-row{border-radius:16px;}
.step .opt-card{min-height:52px;}

/* הכפתורים, עגולים כמו בשאלון */
.step-nav .btn{border-radius:999px;}
.step-nav .btn-primary{padding:13px 26px; font-size:1.02rem;}

/* שדות הכתיבה: מסגרת רכה יותר, וזהב בפוקוס */
.step textarea, .step input, .step select{border-radius:14px;}
.step textarea:focus, .step input:focus, .step select:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(207,177,118,.18);}

@media (max-width:700px){
  .step{padding:20px 15px 18px; border-radius:18px;}
  .step .field{padding:16px 0;}
}

/* אחידות בין הפתיחה לשלבים: אותה מסגרת זהב ואותו קו בראש */
.welcome-card{border-color:#E3D5B8;}
.welcome-card::before{display:block; content:''; position:absolute; inset-inline:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--gold), var(--brand-green)); pointer-events:none;}

/* שורת הכפתורים: לא צפה על הרקע אלא נראית כהמשך של הכרטיס */
.step-nav{background:rgba(251,249,244,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(207,177,118,.3);}

/* ===================================================================
   מחשב: אותו עיצוב, פרוס לרוחב (החלטת דגן 5.10.2026: "במחשב לעצב גם מתאים, ולשים לב שאין גלילה")
   🔴 נמדד לפני: במחשב היו 380 עד 630 פיקסל גלילה בכל שלב, ו-708 פיקסל ריקים בצדדים ב-1440.
   🔑 והפתרון הוא לא להקטין אלא לנצל את הרוחב: שדות ב-2 עמודות חותכים את הגובה בערך בחצי,
   וזה בדיוק מה שנעשה בשאלון של חיה ב-2.10. שדה שהוא רשימה ארוכה נשאר ברוחב מלא.
   =================================================================== */
@media (min-width:1000px){
  .shell{max-width:1040px;}
  .shell.is-welcome{max-width:1040px;}

  /* שלב: כותרת ברוחב מלא, ואחריה השדות ב-2 עמודות */
  .step{display:grid; grid-template-columns:1fr 1fr; gap:0 26px; padding:30px 30px 26px; align-items:start;}
  .step-head{grid-column:1 / -1; margin-bottom:24px;}
  .step-head h1{font-size:2.15rem;}
  .step-head p{font-size:1.05rem; max-width:52ch;}

  .step .field{padding:18px 4px;}
  /* הקו המפריד בין שדות הוא אופקי בטור, ולכן בשתי עמודות הוא נקבע לפי השורה ולא לפי הסדר */
  .step .field + .field{border-top:0;}
  .step .field{border-top:1px solid rgba(207,177,118,.3);}
  .step .field:nth-child(2), .step .field:nth-child(3){border-top:0;}

  /* שדות שהם רשימה ארוכה או תצוגה: רוחב מלא */
  .step .field.f-levels, .step .field.f-roadmap, .step .field.f-summary, .step .field.f-hd,
  .step .field.f-quizrecap, .step .field.f-talents, .step .field.f-note, .step .field.f-care,
  .step .field.f-consent, .step .field.f-cards, .step .field.f-gamemap{grid-column:1 / -1;}  /* המפה ברוחב מלא במחשב (10.10: הייתה בעמודה אחת, והשנייה ריקה) */
  .gm-pic{max-width:600px; margin-inline:auto;}  /* והציור עצמו לא נמתח ל-1000 פיקסל: 600 ממורכז */
  .step .field.half{width:auto;}

  /* הודעת החסרים תמיד בשורה משלה, בסוף */
  .step .missing-msg{grid-column:1 / -1;}
  .step .care-line{grid-column:1 / -1;}

  /* ⛔ בוטל 5.10.2026 בערב (החלטת דגן, בלשונו: "במחשב ליישר את הדברים לאמצע כמו בנייד"): הפריסה לרוחב
     (לוגו משמאל, טקסט מימין, רשת של 2 עמודות) שנבנתה ב-5.10 בבוקר. במקומה: אותו סדר ואותו מרכוז כמו בטלפון,
     רק בכרטיס רחב יותר. המידה (620) נבחרה כדי שהפסקה תישאר עד ~46 תווים בשורה, כמו קודם, ולא תימרח. */
  .welcome-card{max-width:620px; padding:16px 38px 16px; text-align:center;}
  .w-logo img{height:108px;}
  .w-title{max-width:30ch; margin:8px auto 6px;}
  .w-lead{font-size:1rem; line-height:1.55; max-width:46ch; margin:0 auto;}
  .welcome-note{margin:0 auto;}
  .facts{flex-direction:row; gap:0;}
  .facts li{flex:1; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:4px 10px;}
  .facts li + li{border-top:0; border-inline-start:1px solid rgba(226,224,217,.7); padding-top:4px;}
  .facts li > div{flex-direction:column; align-items:center; gap:2px;}
  .welcome-actions .btn-lg{width:auto; min-width:240px; margin-inline:auto;}

  /* 🔴 הרשימות הארוכות נשארות בעמודה אחת ברוחב מלא, ולא ב-2 עמודות.
     נמדד: ב-2 עמודות כל שורה נשברת ל-145 פיקסל (האייקון, השם וההסבר זה מתחת לזה) והשדה יוצא 876;
     ברוחב מלא עם שורה שטוחה היא 48 והשדה יוצא כ-460. כלומר 2 עמודות הזיקו דווקא כאן.
     🔑 וזה בדיוק הכלל של שקד: "להגדיל יכול להקטין" - גם "לפצל לעמודות" יכול להגביה. */
  .step .levels, .step .sum-list{display:flex; flex-direction:column; gap:7px;}
  .step .lv-row{padding:9px 16px; grid-template-columns:1fr auto; align-items:center; gap:8px 18px;}
  .step .lv-info{display:flex; align-items:baseline; flex-wrap:nowrap; gap:3px 10px; line-height:1.3;}
  .step .lv-info > *{margin:0;}
  .step .lv-info b, .step .lv-info strong{white-space:nowrap;}
  .step .lv-info small{font-size:.82rem;}

  /* כרטיסי בחירה ברוחב מלא: 2 בשורה במקום אחד */
  .step .f-cards .opt-cards, .step .cards{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

  /* הפס העליון קטן יותר במחשב: הוא לקח 130 פיקסל מתוך 719 */
  .top-in{padding:9px 24px;}
  .chapters{padding:7px 24px 9px;}
  .step-head{margin-bottom:18px;}
  .step-head h1{font-size:1.95rem; margin:4px 0 8px;}
  .step-head h1::after{margin-top:9px;}

  /* שורת הכפתורים: ממורכזת ברוחב התוכן */
  .step-nav{padding-inline:30px;}
}

/* ===== "איפה אני סופג/ת הכי הרבה" (8.10.2026): כרטיס לכל מרכז פתוח, עם הציור ואותו מרכז מואר ===== */
.hdopen{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.hdopen-card{display:flex; align-items:center; gap:12px; text-align:right; border:1.5px solid var(--line); background:#fff; border-radius:16px; padding:10px 12px; cursor:pointer; font:inherit; color:inherit; width:100%;}
.hdopen-card:hover{border-color:var(--sage);}
.hdopen-card.on{border-color:var(--green); background:var(--s3-bg);}
.hdopen-svg{flex:none; width:64px;}  .hdopen-svg svg{width:64px; height:auto; display:block;}
.hdopen-body{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.hdopen-body b{font-size:.95rem;}  .hdopen-body > span{font-size:.86rem; line-height:1.45; color:var(--ink-soft);}
.hdopen-body em{font-style:normal; font-size:.8rem; font-weight:700; color:var(--green-text);}
/* המרכז המואר בציור: זהב המותג, קו ירוק. הצבעים זמניים עד הוראת שקד (עיצוב) */
.hd-center.hl{fill:#CFB176 !important; stroke:var(--green) !important; stroke-width:3 !important;}
@media (max-width:700px){ .w-lead{line-height:1.4;} }  /* 8.10: עוד 4 פיקסל בפתיחה */

.qr-missing{border-style:dashed; opacity:.85;}  /* נתון שלא נמצא בשאלון (9.10.2026) */

/* ===== "המפה שלי במשחק" (9.10.2026): מסך הסיום. הצבעים זמניים עד הוראת שקד ===== */
.gamemap{display:flex; flex-direction:column; gap:18px; margin-top:4px;}
.gm-sec{border:1.5px solid var(--line); border-radius:16px; padding:12px 14px; background:#fff;}
.gm-sec h3{margin:0 0 10px; font-size:1rem; font-weight:900;}
.gm-type{display:flex; gap:12px; align-items:flex-start;}  .gm-type img{width:56px; height:56px; flex:none;}
.gm-type b{display:block; font-size:1.05rem;}  .gm-type small{display:block; color:var(--ink-soft); font-size:.8rem; margin-bottom:6px;}  .gm-type p{margin:0; font-size:.9rem; line-height:1.5;}
.gm-body{display:flex; gap:12px; align-items:flex-start;}  .gm-body-svg{width:96px; flex:none; height:auto;}
.gm-skin{fill:#F1EADB; stroke:#CFB176; stroke-width:1.5;}
.gm-ch{stroke:#999; stroke-width:2; opacity:.35;}  .gm-ch.l1{stroke:#E0312B; opacity:.55;}  .gm-ch.l2{stroke:#E8B90F; opacity:.8;}  .gm-ch.l3{stroke:#289A02; opacity:1;}
.gm-list{list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column; gap:6px; min-width:0;}
.gm-list li{display:flex; align-items:center; gap:8px; font-size:.84rem; line-height:1.35;}
.gm-list li i{width:11px; height:11px; border-radius:50%; flex:none;}  .gm-list li div{flex:1; min-width:0;}  .gm-list li b{display:block; font-size:.86rem;}
.gm-list li span{color:var(--ink-soft); font-size:.78rem;}  .gm-list li em{font-style:normal; font-size:.76rem; font-weight:700; white-space:nowrap;}
.gm-list li em.l1{color:#C0392B;}  .gm-list li em.l2{color:#B8860B;}  .gm-list li em.l3{color:var(--green-text);}  .gm-list li em.l0{color:#999;}
.gm-list li.on b{color:var(--green-text);}
.gm-hd{display:flex; gap:12px; align-items:flex-start;}  .gm-hd svg{width:96px; flex:none; height:auto;}
.gm-road{display:flex; flex-direction:column; gap:8px;}
.gm-stage{border-radius:12px; padding:10px 12px; border:1.5px solid var(--line);}  .gm-stage b{display:block; font-size:.92rem;}
.gm-stage q{display:block; quotes:none; font-size:.82rem; color:var(--ink-soft); margin:2px 0 6px;}
.gm-stage.l1{border-color:#E0312B55; background:#FFF4F3;}  .gm-stage.l2{border-color:#E8B90F66; background:#FFFBEA;}  .gm-stage.l3{border-color:#289A0255; background:var(--s3-bg);}
.gm-chips{display:flex; flex-wrap:wrap; gap:6px;}  .gm-chips span{font-size:.8rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 9px;}
.qr-road{font-size:.78rem; color:var(--ink-soft); line-height:1.5; margin:0 0 6px;}

/* תמונה אחת (9.10.2026) */
.gm-one{width:calc(100% + 24px); max-width:none; height:auto; display:block; margin:4px -12px 10px;}  /* 10.10: הציור יוצא מריפוד הכרטיס (12 מכל צד), כדי שהכתב בתוכו יהיה גדול יותר */
.gm-advice{font-size:.9rem; line-height:1.5; margin:0 0 10px; padding:10px 12px; border-radius:12px; background:#FBF9F4; border:1px solid var(--line);}
.gm-details > summary{cursor:pointer; list-style:none; display:inline-block;}  .gm-details > summary::-webkit-details-marker{display:none;}
.gm-details[open] > summary{margin-bottom:10px;}  .gm-details .gm-sec{margin-top:10px;}
.gm-key{font-size:.84rem; line-height:1.5; color:var(--ink-soft); margin:0 0 10px;}  .gm-key b{color:var(--ink);}
.gm-how{margin:0 0 10px;}  .gm-how[open] > summary{margin-bottom:6px;}  .gm-how .gm-key{margin:0;}  /* ההסבר מקופל (דגן 10.10: "לצמצם ללחיצה") */
.gm-pic .gm-details + .gm-details{margin-top:8px;}
.qr-folded{margin-top:8px;}

/* ציור הלופ (9.10.2026) */
.loopviz{margin-top:4px;}  .lp-svg{width:calc(100% + 24px); max-width:none; margin:0 -12px; height:auto; display:block;}  /* 10.10: כמו המפה, יוצא מריפוד הכרטיס */

/* ?view=loop&embed=1 (בקשת ירדן 10.10.2026): רק הציור וההמלצה, ברקע שקוף, בלי גלישה אופקית ב-360.
   🔴 הציור יוצא בדרך כלל מריפוד הכרטיס (width:calc(100% + 24px), margin:0 -12px): ב-embed אין כרטיס ואין ריפוד, ולכן בלי היציאה הזאת,
   אחרת הוא גולש 12 פיקסל מכל צד. */
html.embed, body.embed{background:transparent !important;}
body.embed .shell.is-embed{max-width:none; width:100%; margin:0; padding:0; background:transparent; display:block;}
.embed-loop{padding:0; margin:0; background:transparent; border:0; box-shadow:none;}
.embed-loop .loopviz{margin:0;}
.embed-loop .lp-svg{width:100%; max-width:100%; margin:0;}
/* ההמלצה של דגן אחרי הלופ (10.10.2026): אותו עיצוב כמו "מה נעשה איתך", רקע קרם */
.dr{background:#FBF9F4; margin:14px 0 0;}  .dr h3{color:var(--green-text);}
/* "מה נעשה איתך" (9.10.2026) */
.nextsteps{display:flex; flex-direction:column; gap:12px; margin-top:4px;}
.ns-sec{border:1.5px solid var(--line); border-radius:16px; padding:12px 14px; background:#fff;}  .ns-sec h3{margin:0 0 8px; font-size:1rem; font-weight:900;}
.ns-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.ns-list li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem;}  .ns-list li > span{flex:none; width:22px; text-align:center;}
.ns-list li div{display:flex; flex-direction:column; gap:1px;}  .ns-list li div span{color:var(--ink-soft); font-size:.86rem; line-height:1.4;}
.ns-next{background:#FBF9F4;}  .ns-next p{margin:0 0 8px; font-size:.9rem; line-height:1.5;}
.ns-steps{margin:0 0 8px; padding-right:20px; font-size:.88rem; line-height:1.6;}  .ns-steps li{margin-bottom:2px;}
.ns-next b.l1{color:#C0392B;}  .ns-next b.l2{color:#B8860B;}  .ns-next b.l3{color:var(--green-text);}
.ns-to{background:var(--s3-bg); border-color:var(--sage); text-align:center;}  .ns-msg{margin:0; font-size:1.05rem; line-height:1.5;}  .ns-msg b{color:var(--green-text); font-weight:900;}  .ns-msg small{color:var(--ink-soft); font-size:.82rem;}

/* הכיתוב ליד המד (9.10.2026). 12.2px מעל רצפת 11.5 */
.progress-txt{max-width:880px; margin:0 auto; padding:4px 24px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.76rem; color:var(--green-text); font-weight:700; line-height:1.3;}
.progress-txt b{color:var(--ink-soft); font-weight:700; flex:none;}

/* מצב אדמין (11.10.2026): שורה קטנה בראש הדף כשהטופס עובד על נתוני דמה. 12.2px, מעל רצפת 11.5 */
.admin-preview{margin:0; padding:5px 12px; font-size:.76rem; line-height:1.4; text-align:center; background:#FFF8E1; color:#514E44; border-bottom:1px solid #CFB176;}
.admin-preview a{color:var(--green-text); font-weight:700; text-decoration:underline;}