/* screens.css: עיצוב מסכים ספציפיים */

/* ===== מסך פתיחה =====
   בלי גרדיאנט ובלי מרכוז: פאנל דיו שטוח, כותרת מיושרת לימין, וקו דק
   שמפריד בין ההצהרה לנתונים. הנתונים עצמם הם המידע, לא קישוט. */
.hero{
  padding:40px 28px 30px;border-radius:var(--radius);margin-bottom:26px;
  background:var(--ink);color:var(--paper);position:relative;
  border:1px solid var(--ink);
}
[data-theme="dark"] .hero{background:var(--surface-2);border-color:var(--rule);color:var(--text)}
.hero .eyebrow{color:rgba(242,241,237,.55)}
[data-theme="dark"] .hero .eyebrow{color:var(--text-3)}
.hero h1{font-size:2.05rem;margin-bottom:10px;max-width:22ch}
.hero p{color:rgba(242,241,237,.78);max-width:62ch;margin:0 0 22px;font-size:1.02rem}
[data-theme="dark"] .hero p{color:var(--text-2)}
.hero .btn-primary{background:var(--paper);color:var(--ink)}
.hero .btn-primary:hover{background:#fff}
[data-theme="dark"] .hero .btn-primary{background:var(--primary);color:#0d1114}
.hero-stats{
  display:flex;gap:0;margin-top:26px;flex-wrap:wrap;
  border-top:1px solid rgba(242,241,237,.18);padding-top:18px;
}
[data-theme="dark"] .hero-stats{border-top-color:var(--rule)}
.hero-stats div{text-align:start;padding-inline-end:34px}
.hero-stats b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.hero-stats span{font-size:.76rem;opacity:.62;letter-spacing:.03em}

.track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.track-card{padding:14px 14px;text-align:start;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s;font-weight:600;display:flex;align-items:center;gap:10px}
.track-card:hover{border-color:var(--primary)}
.track-card.selected{border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 2px 0 0 var(--primary)}
.track-card .track-icon{font-size:1.15rem;line-height:1;opacity:.75}
/* המסלול הוא ההחלטה הראשונה באתר, ולכן שם התפקיד לבדו אינו מספיק: מתחתיו
   כתוב אילו פרקים יקבלו את המשקל הגבוה ביותר אם בוחרים בו. */
.track-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.track-card{align-items:flex-start}
.track-card .track-icon{padding-top:2px}
.track-card .track-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.track-card .track-desc{font-size:.82rem;font-weight:500;color:var(--text-2);line-height:1.5}
.track-card .track-check{color:var(--primary);font-weight:800;visibility:hidden;flex:none}
.track-card.selected .track-check{visibility:visible}

/* ===== מסמכים משפטיים =====
   שורה צרה וריווח נדיב. מסמך שנקרא ברוחב מלא של מסך אינו נקרא. */
.legal{max-width:680px;padding-top:24px;padding-bottom:48px}
.legal h1{font-size:1.8rem;margin-bottom:4px}
.legal-updated{color:var(--text-3);font-size:.85rem;margin-bottom:20px}
.legal-intro{font-size:1.02rem;color:var(--text-2);margin-bottom:12px;padding-bottom:20px;
  border-bottom:1px solid var(--border)}
.legal-h2{font-size:1.15rem;margin:28px 0 10px}
.legal p{margin-bottom:12px;line-height:1.85}
.legal-list{padding-inline-start:22px;margin:0 0 14px;line-height:1.85;color:var(--text-2)}
.legal-list li{margin-bottom:5px}
.legal a{color:var(--primary);text-decoration:underline}
.legal-foot{display:flex;gap:20px;flex-wrap:wrap;margin-top:36px;padding-top:20px;
  border-top:1px solid var(--border);font-size:.9rem}

/* ===== מסך פתיחה =====
   מרוכז, בלי כותרת עליונה ובלי ניווט. החלטה אחת על המסך. */
.welcome{max-width:720px;padding-top:44px;padding-bottom:40px;text-align:center}
.welcome-brand{display:inline-flex;align-items:center;gap:12px;font-size:1.7rem;font-weight:800;
  letter-spacing:-.02em;margin-bottom:26px}
.welcome-title{font-size:2rem;line-height:1.25;margin:0 auto 12px;max-width:19ch;letter-spacing:-.02em}
.welcome-sub{color:var(--text-2);max-width:46ch;margin:0 auto 30px;font-size:1.02rem}
.welcome-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 22px;text-align:start;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.welcome-card h2{font-size:1.2rem;margin-bottom:4px}
.welcome-hint{color:var(--text-2);font-size:.9rem;margin-bottom:18px}
.welcome-go{width:100%;margin-top:20px}
.welcome-foot{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:24px;
  color:var(--text-3);font-size:.84rem}
.welcome-note{margin-top:14px;color:var(--text-3);font-size:.82rem}
.welcome-note a{color:var(--text-2)}
@media (max-width:560px){
  .welcome{padding-top:30px}
  .welcome-title{font-size:1.6rem}
  .welcome-foot{gap:14px;font-size:.78rem}
}

/* ===== Dashboard ===== */
.dash-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.continue-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--primary-soft);
  border:1px solid var(--primary);border-radius:var(--radius);padding:13px 18px;margin-bottom:20px;
}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.cat-card{position:relative;overflow:hidden}
.cat-card .cat-icon{width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:9px}
.cat-card h3{margin-bottom:2px}
.cat-card .cat-en{font-size:.72rem;color:var(--text-3);letter-spacing:.4px}
.cat-card .cat-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:.8rem;color:var(--text-2)}
.reco-card{box-shadow:inset 0 2px 0 var(--signal)}

/* ===== Test screen ===== */
.test-shell{max-width:860px;margin:0 auto}
.test-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.timer{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;padding:8px 16px;border-radius:11px;background:var(--surface);border:1px solid var(--border)}
.timer.low{color:var(--danger);border-color:var(--danger);animation:pulse 1s infinite}
.q-progress{display:flex;align-items:center;gap:10px;flex:1;min-width:170px}
.q-progress .progress-track{flex:1}
.q-counter{font-weight:700;font-size:.9rem;color:var(--text-2);white-space:nowrap}

.question-card{padding:28px}
.q-topic{margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap}
.q-text{font-size:1.18rem;font-weight:600;line-height:1.7;white-space:pre-line;margin-bottom:16px}
.q-html{margin:14px 0;overflow-x:auto}
.q-html table{margin:0 auto}
.q-figure{margin:16px auto;max-width:480px}
.q-figure svg{width:100%;height:auto;display:block}
.memorize-box{padding:22px;text-align:center;border:2px dashed var(--primary);border-radius:var(--radius);background:var(--primary-soft)}
.memorize-timer{font-size:2rem;font-weight:800;color:var(--primary);margin-top:10px}

.options{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.option{
  display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);cursor:pointer;text-align:start;
  font-size:1rem;transition:border-color .13s,background .13s;width:100%;
}
.option:hover{border-color:var(--primary)}
.option .opt-letter{width:28px;height:28px;min-width:28px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.option.selected{border-color:var(--primary);background:var(--primary-soft)}
.option.correct{border-color:var(--good);background:rgba(31,107,61,.10)}
.option.correct .opt-letter{background:var(--good);color:#fff;border-color:var(--good)}
.option.wrong{border-color:var(--bad);background:rgba(155,44,44,.09)}
.option.wrong .opt-letter{background:var(--bad);color:#fff;border-color:var(--bad)}
.option[disabled]{cursor:default}
.option .opt-body{flex:1;min-width:0}
/* ל-SVG של אפשרות יש viewBox בלבד, בלי width/height. בלי מידה מפורשת הוא
   מתכווץ לאפס בתוך פריט גריד, והאפשרות נראית ריקה. */
.option .opt-body svg{display:block;width:100%;max-width:104px;height:auto;aspect-ratio:1/1;margin-inline:auto}
.options.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.options.options-grid .option{flex-direction:column;align-items:center;gap:10px;padding:14px 10px}
.options.options-grid .opt-body{width:100%;display:flex;justify-content:center;align-items:center}

.explain-box{margin-top:18px;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;animation:slideUp .3s}
.explain-head{padding:12px 18px;font-weight:800;display:flex;align-items:center;gap:8px}
.explain-head.ok{background:rgba(22,163,74,.12);color:var(--good)}
.explain-head.err{background:rgba(220,38,38,.1);color:var(--bad)}
.explain-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.explain-sec b{display:block;margin-bottom:3px}
.explain-sec{font-size:.95rem;color:var(--text-2)}
.explain-sec.tip{background:var(--primary-soft);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text)}
.explain-sec.mistake{background:rgba(245,158,11,.1);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text)}
.why-wrong-list{margin:4px 0 0;padding-inline-start:18px}
.why-wrong-list li{margin-bottom:3px}

.test-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}

.section-intro{max-width:640px;margin:40px auto;text-align:center;padding:40px 30px}
.section-intro .big-icon{font-size:3.4rem;margin-bottom:12px}
.section-intro ul{text-align:start;margin:18px auto;max-width:420px;color:var(--text-2);padding-inline-start:20px}

/* ===== Results ===== */
.result-hero{text-align:center;padding:34px 20px}
.result-score{font-size:3.6rem;font-weight:900;line-height:1}
.result-grade{font-size:1.1rem;font-weight:700;margin-top:6px}
.review-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.review-item summary{padding:13px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:600;list-style:none}
.review-item summary::-webkit-details-marker{display:none}
.review-item .review-body{padding:16px;border-top:1px solid var(--border);background:var(--surface-2)}
.review-mark{width:26px;height:26px;min-width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:800}
.review-mark.ok{background:var(--good)} .review-mark.err{background:var(--bad)} .review-mark.skip{background:var(--text-3)}

/* ===== Analytics ===== */
.chart-card canvas{width:100%;height:auto;display:block}
.topic-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.topic-row:last-child{border-bottom:none}
.topic-row .topic-name{flex:1;font-weight:600;font-size:.93rem}
.topic-row .progress-track{width:130px}
.topic-row .topic-pct{width:44px;text-align:end;font-weight:700;font-size:.88rem}

/* ===== Interview ===== */
.interview-card .iv-q{font-size:1.15rem;font-weight:700;margin-bottom:14px}
.iv-answer{background:var(--surface-2);border-radius:var(--radius-sm);padding:16px;margin-top:12px;animation:slideUp .25s}
.iv-answer h4{margin-bottom:8px;display:flex;align-items:center;gap:7px}
.iv-answer ul{padding-inline-start:20px;color:var(--text-2)}
.iv-answer + .iv-answer{margin-top:10px}

/* ===== Personality report ===== */
.dim-row{margin-bottom:14px}
.dim-row .dim-head{display:flex;justify-content:space-between;font-weight:600;font-size:.93rem;margin-bottom:4px}

/* Simulation plan */
.sim-plan{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.sim-sec-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.sim-sec-row .sim-idx{width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.sim-sec-row.done{opacity:.55}
.sim-sec-row.current{border-color:var(--primary);background:var(--primary-soft)}

/* Writing practice */
.writing-workspace{padding:22px}
.writing-prompt,.writing-context{border-radius:var(--radius-sm);padding:13px 15px;margin-top:14px}
.writing-prompt{background:var(--primary-soft);border-inline-start:4px solid var(--primary)}
.writing-context{background:var(--surface-2);border:1px solid var(--border)}
.writing-prompt p,.writing-context p{margin-top:5px;white-space:pre-line}
.writing-textarea{width:100%;min-height:260px;resize:vertical;padding:14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit;line-height:1.7}
.writing-textarea:focus{border-color:var(--primary);outline:3px solid var(--primary-soft)}
.writing-checklist{margin-top:18px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2)}
.writing-checklist summary{cursor:pointer;font-weight:700}
.writing-checklist ul{padding-inline-start:20px;margin-top:10px;color:var(--text-2)}
.writing-checklist p{font-size:.88rem;margin-top:10px}

@media(max-width:640px){
  .hero h1{font-size:1.7rem}
  .question-card{padding:18px}
  .q-text{font-size:1.05rem}
  .result-score{font-size:2.7rem}
  .test-actions{align-items:stretch;flex-direction:column}
  .test-actions .btn{width:100%}
  .sim-sec-row{flex-wrap:wrap;gap:8px}
  .sim-sec-row>span:nth-child(2){min-width:calc(100% - 38px)}
}
@media print{
  .app-header,.test-actions,.toast-wrap,.print-results{display:none!important}
}

/* תדריך פרק בתוך הסימולציה */
.section-guide{
  text-align:start;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 16px;margin:0 auto 16px;max-width:520px;
}
.section-guide .guide-list{margin-top:6px}

/* דף עזר מרוכז */
.cheat-sheet .data-table th{text-align:start;font-size:.85rem;background:var(--surface-2)}
.cheat-sheet .data-table td{font-size:.88rem;line-height:1.6}
@media print{
  body.printing-cheat .app-header,
  body.printing-cheat main > .container > *:not(.cheat-sheet){display:none!important}
  body.printing-cheat .cheat-sheet{border:none;box-shadow:none;page-break-inside:avoid}
  body.printing-cheat #print-cheat{display:none!important}
}

/* מד מוכנות */
.readiness-top{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.readiness-hero{border:2px solid var(--primary)}
.readiness-banner{border-inline-start:4px solid var(--primary)}
@media(max-width:560px){
  .readiness-top{gap:12px;justify-content:center;text-align:center}
  .readiness-top .ring-wrap{margin:0}
}

/* מסך "עוד": ניווט מלא בנייד */
.more-grid{display:flex;flex-direction:column;gap:10px}
.more-item{display:flex;align-items:center;gap:14px;padding:15px 16px;margin:0;text-decoration:none;color:inherit}
.more-item .more-icon{font-size:1.5rem;line-height:1}
.more-item .more-text{display:flex;flex-direction:column;gap:2px}
.more-item .more-desc{font-size:.85rem;color:var(--text-2)}

/* דוח תוצאות שנשמר כ-PDF: סקירת השאלות חייבת להיות פתוחה וקריאה */
@media print{
  details{page-break-inside:avoid}
  details > summary{list-style:none}
  .review-item{border:1px solid #ccc;break-inside:avoid}
  .explain-sec,.explain-box{background:none!important;border-color:#ccc!important}
}