/* ===== אמירנט — סגנון האפליקציה =====
   צורך את tokens.css. אין כאן צבע קשיח: הכל דרך המשתנים, כך ששתי ערכות
   הנושא עובדות בלי לכתוב שום דבר פעמיים.

   האנגלית היא מושא הלימוד ולכן מקבלת סריף אמיתי בגודל גדול; העברית היא
   ממשק ולכן Assistant; מספרים וטיימרים במונוספייס עם ספרות טבלאיות. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.en   { font-family: var(--font-en); direction: ltr; unicode-bidi: isolate;
        font-size: var(--fs-en); line-height: var(--lh-en); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.tiny  { font-size: var(--fs-sm); }
.hidden { display: none !important; }

.wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 14px 16px calc(84px + env(safe-area-inset-bottom));
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-in {
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
}
.spacer { flex: 1; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700;
  min-height: 44px; }   /* יעד מגע — הסמל הוא גם קישור הביתה */
.brand-mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
}
.brand-txt { font-size: var(--fs-md); letter-spacing: -.01em; }
.acct {
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
.acct.in { color: var(--text); }
.sync { font-size: var(--fs-xs); color: var(--dim); }

/* ---------- ספינת הימים ----------
   טיק אחד לכל יום עד המבחן. שבתות וחגים בצבע נפרד — הימים שבהם לא לומדים
   הם מידע, לא קישוט: הם מסבירים למה הקצב היומי גבוה ממה שנראה. */
.spine { max-width: 620px; margin: 0 auto; padding: 0 16px 9px; }
.spine-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.spine-left { font-size: var(--fs-sm); color: var(--muted); }
.spine-left b { font-size: var(--fs-lg); color: var(--text); font-weight: 700; }
.spine-date { font-size: var(--fs-xs); color: var(--dim); letter-spacing: .04em; }
.ruler { display: flex; gap: 2px; align-items: flex-end; height: 15px; }
.tick { flex: 1 1 0; height: 6px; border-radius: 1px; background: var(--line); }
.tick.off   { background: var(--warn); opacity: .45; }
.tick.past  { background: var(--dim); opacity: .45; height: 4px; }
.tick.today { background: var(--accent); height: 15px; }

/* ---------- מספרי היום ---------- */
.figs {
  display: flex; background: var(--surface-solid);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden;
}
.fig { flex: 1 1 0; padding: 11px 6px; text-align: center; border-inline-start: 1px solid var(--line); }
.fig:first-child { border-inline-start: 0; }
.fig .n {
  display: block; line-height: 1.15; font-size: var(--fs-xl); font-weight: 500;
  font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums;
}
.fig .k { font-size: var(--fs-xs); color: var(--dim); }
.fig.due .n { color: var(--warn); }
.fig.new .n { color: var(--accent); }

/* ---------- כפתורים ---------- */
.btn {
  display: block; width: 100%; text-align: center;
  background: var(--accent); color: #fff;
  padding: 15px; border-radius: var(--radius-sm);
  font-size: var(--fs-md); font-weight: 700;
  margin-top: 10px;
}
.btn:disabled { background: var(--surface-2); color: var(--dim); cursor: default; }
.btn.ghost { background: none; color: var(--accent); border: 1px solid var(--line); font-size: var(--fs-base); padding: 12px; }
.btn.sm { padding: 10px; font-size: var(--fs-base); }

.sec { margin-top: 24px; }
.eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 9px;
}
h2 { font-size: var(--fs-lg); margin: 0 0 4px; font-weight: 700; text-wrap: balance; }
.note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: 8px; }
.note b { color: var(--text); }

/* ---------- משטח הלימוד ---------- */
.study {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.sbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.sbar .x { font-size: 24px; line-height: 1; color: var(--dim); padding: 0 6px; }
.sbar .prog { flex: 1; height: 4px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.sbar .prog i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.sbar .cnt { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-xs); color: var(--dim); }
.sbar .clock { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-base); font-weight: 500; }
.sbar .clock.low { color: var(--bad); }

.card { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 18px 18px 10px; }
.mid  { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-align: center; gap: 10px; padding: 6px 0; }
.acts { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }

.head-en {
  font-family: var(--font-en); direction: ltr;
  font-size: clamp(34px, 11vw, 46px); line-height: 1.08; font-weight: 600;
  letter-spacing: -.015em; text-wrap: balance;
}
.pos { font-family: var(--font-en); font-style: italic; direction: ltr; color: var(--dim); font-size: var(--fs-en-sm); }
.def { font-family: var(--font-en); direction: ltr; font-size: var(--fs-en-lg); line-height: 1.4;
       max-width: 34ch; text-wrap: balance; }
.syn { font-family: "IBM Plex Mono", monospace; direction: ltr; font-size: var(--fs-sm); color: var(--dim); }
.he  { font-size: var(--fs-md); font-weight: 600; color: var(--accent); }
.ex {
  font-family: var(--font-en); direction: ltr; text-align: left;
  font-size: var(--fs-en); line-height: var(--lh-en-loose); color: var(--text);
  background: var(--surface-solid); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px; max-width: 52ch; width: 100%;
}
.ex b { color: var(--text); font-weight: 500; background: var(--accent-sl); padding: 0 3px; border-radius: 3px; }
.ex-lab {
  display: block; direction: ltr; text-align: left;
  font-family: var(--font); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 4px;
}
.assoc {
  background: var(--warn-bg); border: 1px solid var(--warn-ln);
  border-radius: var(--radius-sm); padding: 10px 13px; width: 100%; max-width: 46ch;
  text-align: right; font-size: var(--fs-base);
}
.assoc .eyebrow { margin-bottom: 2px; }

/* ---------- שיפוט ---------- */
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.grades.g3 { grid-template-columns: repeat(3, 1fr); }
.grade {
  padding: 14px 4px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-solid);
  font-weight: 600; font-size: var(--fs-sm); min-height: 56px;
}
.grade small { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 400;
               font-size: 11px; color: var(--dim); margin-top: 2px; }
.grade.g1 { border-color: var(--bad-ln);  color: var(--bad); }
.grade.g3 { border-color: var(--accent);  color: var(--accent); }

.hints { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hint { font-size: var(--fs-sm); padding: 8px 13px; border-radius: 999px;
        border: 1px solid var(--line); color: var(--muted); min-height: 38px; }
.hint:disabled { opacity: .35; cursor: default; }

/* ---------- אפשרויות אמריקאיות ---------- */
.opts { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 52ch; }
.opt {
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-solid); text-align: left; direction: ltr;
  font-size: var(--fs-en); font-family: var(--font-en); line-height: var(--lh-en);
  min-height: 48px;
}
.opt.pick  { border-color: var(--accent); background: var(--accent-sl); }
.opt.right { border-color: var(--good); background: var(--good-bg); font-weight: 500; }
.opt.wrong { border-color: var(--bad);  background: var(--bad-bg); }
.opt .num { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-sm); color: var(--dim); margin-inline-end: 10px; }

/* ---------- טפסים ---------- */
label.f { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-bottom: 5px; }
.t {
  width: 100%; background: var(--surface-solid); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: var(--fs-base);
}
textarea.t { min-height: 84px; resize: vertical; line-height: 1.5; }
.sug { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sugbtn { text-align: right; border: 1px dashed var(--line); border-radius: var(--radius-sm);
          padding: 9px 12px; font-size: var(--fs-base); color: var(--muted); }
.sugbtn:hover { border-style: solid; color: var(--text); }

/* ---------- רשימות ---------- */
.item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item .w { font-family: var(--font-en); direction: ltr; font-size: var(--fs-en);
           min-width: 108px; flex: none; }
.item .b { flex: 1; font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  font-size: var(--fs-xs); padding: 4px 9px; border-radius: 999px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; }
.pill.bad  { background: var(--bad-bg);  color: var(--bad); }
.pill.good { background: var(--good-bg); color: var(--good); }

.bar { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.legend { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.empty { text-align: center; color: var(--dim); padding: 28px 10px; font-size: var(--fs-sm); }

/* ---------- ניווט תחתון ----------
   בהישג אגודל. ארבע כניסות בלבד — כל כניסה חמישית הייתה אומרת שיש באפליקציה
   משהו שלא מרוויח את מקומו. */
.nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--surface-solid); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav button { flex: 1 1 0; padding: 8px 2px 10px; font-size: 11.5px; font-weight: 600; color: var(--dim); }
.nav button.on { color: var(--accent); }
.nav .ic { display: block; font-size: 18px; line-height: 1.3; }

/* ---------- toast ---------- */
.toast {
  position: fixed; z-index: 90; inset-inline: 0; bottom: calc(78px + env(safe-area-inset-bottom));
  margin: 0 auto; width: max-content; max-width: 86%;
  background: var(--text); color: var(--bg);
  padding: 9px 16px; border-radius: 999px; font-size: var(--fs-sm);
  box-shadow: var(--shadow);
}

/* ---------- הדפסה ----------
   דף לשבת. שחור על לבן, בלי רקעים ובלי צללים — דיו עולה כסף והרקעים
   של המסך הופכים לאפור מלוכלך. */
/* ================= הדפסה =================
   הפריסות נבנות כרצף עמודים ולא כזרם אחד. על המסך העמוד הוא דף לבן עם
   צל, וגם במצב כהה — נייר הוא נייר. בהדפסה אותו מבנה בדיוק, ולכן
   התצוגה המקדימה היא ספירה ולא הערכה. */

/* --- בוררים --- */
.pick {
  display: block; width: 100%; text-align: right; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 6px; font: inherit;
}
.pick.on { border-color: var(--accent); background: var(--accent-sl); }
.pick.off { opacity: .5; }
.pick .pt { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: var(--fs-md); }
.pick .pt .cnt { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-sm);
  font-weight: 600; color: var(--accent); margin-inline-start: auto; }
.pick .pd { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.pick.multi .pt::before {
  content: "\2610"; font-family: "IBM Plex Mono", monospace; color: var(--dim);
}
.pick.multi.on .pt::before { content: "\2611"; color: var(--accent); }

.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tally > div { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; text-align: center; }
.tally b { display: block; font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-lg); font-weight: 600; }
.tally span { font-size: var(--fs-xs); color: var(--muted); }

.picklist { display: flex; flex-direction: column; gap: 5px; width: 100%;
  max-width: 46ch; max-height: 48vh; overflow-y: auto; margin-top: 8px; }

/* --- העמוד --- */
/* העמוד תמיד 210×297 מ"מ, גם על המסך. הקנה מידה נעשה ב-transform ולא
   בהקטנת התיבה — אחרת הגופנים, שנקובים במילימטרים, היו נשארים בגודלם
   בתוך תיבה קטנה יותר, ומדידת מספר השורות לעמוד הייתה משקרת. כך
   התצוגה המקדימה היא מודל נאמן של הדף שייצא. */
.sheet { display: flex; flex-direction: column; gap: 18px; align-items: center; --k: 1; }
.pageframe {
  width: 100%; max-width: 210mm; aspect-ratio: 210 / 297; overflow: hidden;
  border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.16), 0 12px 32px -20px rgba(0,0,0,.5);
  background: #fff;
}
.page {
  background: #fff; color: #14161a;
  width: 210mm; height: 297mm; padding: 14mm 13mm;
  overflow: hidden; font-size: 3.1mm; line-height: 1.45;
  transform: scale(var(--k)); transform-origin: top right;
}
.page .phead {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: .6pt solid #14161a; padding-bottom: 2mm; margin-bottom: 3.5mm;
  font-weight: 700; font-size: 3.6mm;
}
.page .phead .ps { font-weight: 400; font-size: 2.7mm; color: #5b616a; }

.page .prow {
  display: grid; grid-template-columns: 6mm 32mm 1fr; gap: 3mm;
  padding: 1.9mm 0; border-bottom: .3pt solid #c9ccd1; break-inside: avoid;
}
.page .prow .box { width: 4mm; height: 4mm; border: .6pt solid #14161a; margin-top: .8mm; }
.page .prow .w { font-family: var(--font-en); direction: ltr;
  font-size: 3.6mm; font-weight: 500; }
.page .prow .m { font-size: 3mm; }
.page .prow .a { font-size: 2.8mm; color: #4a5058; margin-top: .4mm; }

/* כרטיסיות: החצי התחתון מסובב, כדי שאחרי קיפול לאחור הוא ייקרא נכון */
.page .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 100%; }
/* מסגרת מלאה = קו גזירה, מקווקו = קו קיפול. ההוראה בראש העמוד מסתמכת
   על ההבחנה הזאת. */
.page .fcard { border: .5pt solid #14161a; display: grid;
  grid-template-rows: 1fr 0 1fr; break-inside: avoid; }
.page .fcard .face { display: grid; place-items: center; padding: 2mm; text-align: center; }
.page .fcard .fold { border-top: .5pt dashed #14161a; }
.page .fcard .back { transform: rotate(180deg); }
.page .fcard .fw { font-family: var(--font-en); direction: ltr;
  font-size: 5.2mm; font-weight: 500; }
.page .fcard .fm { font-size: 3mm; line-height: 1.35; }

/* דף תרגול */
.page .q { break-inside: avoid; padding: 2mm 0 2.4mm; border-bottom: .3pt solid #d6d9de; }
.page .q .qs { font-family: var(--font-en); direction: ltr;
  font-size: 3.4mm; line-height: 1.5; }
.page .q .qs b { font-family: "IBM Plex Mono", monospace; font-size: 2.9mm; }
.page .q .blank { display: inline-block; width: 22mm; border-bottom: .6pt solid #14161a; }
.page .q .qo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm;
  direction: ltr; font-family: var(--font-en); font-size: 3.1mm; margin-top: 1.4mm; }
.page .q .qo i { font-style: normal; font-family: "IBM Plex Mono", monospace;
  font-size: 2.6mm; color: #5b616a; }
.page .keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6mm 5mm;
  direction: ltr; font-family: var(--font-en); font-size: 3.2mm; }
.page .keys b { font-family: "IBM Plex Mono", monospace; font-size: 2.9mm; }

@media print {
  .topbar, .nav, .toast, .btn, .hints, .sec, #layer, #spine { display: none !important; }
  body { background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; }
  /* השוליים שייכים לעמוד עצמו ולא ל-@page, ולכן המסך וההדפסה מודדים
     בדיוק את אותה תיבה. */
  @page { margin: 0; size: A4; }
  .sheet { display: block; gap: 0; --k: 1; }
  .pageframe { max-width: none; width: auto; aspect-ratio: auto;
    overflow: visible; box-shadow: none; border-radius: 0; break-after: page; }
  .pageframe:last-child { break-after: auto; }
  .page { transform: none; }
}

/* ===== זהות צבע לפי מצב =====
   משטח הלימוד רגוע בכוונה — שם צריך ריכוז. המשחקים מקבלים צבע, כי משחק
   שנראה כמו מבחן לא ירגיש כמו משחק. כל מצב מקבל --mode משלו והמשטח
   מושך ממנו. */
.study { --mode: var(--accent); --mode-bg: var(--accent-sl); }
.study.m-exam  { --mode:#3d6bb3; --mode-bg:#e6edf9; }
.study.m-frame { --mode:#b07d1a; --mode-bg:#fbf1dc; }
.study.m-trap  { --mode:#b8452f; --mode-bg:#fbe8e3; }
.study.m-read  { --mode:#6a4b9c; --mode-bg:#efeafa; }
.study.m-quad  { --mode:#0d8b84; --mode-bg:#dff2f0; }
.study.m-tower { --mode:#c2185b; --mode-bg:#fce4ec; }
.study.m-pair  { --mode:#1a7f6b; --mode-bg:#ddf2ec; }
:root[data-theme="dark"] .study.m-exam  { --mode-bg:#131f33; }
:root[data-theme="dark"] .study.m-frame { --mode-bg:#2b2312; }
:root[data-theme="dark"] .study.m-trap  { --mode-bg:#2e1712; }
:root[data-theme="dark"] .study.m-read  { --mode-bg:#221a33; }
:root[data-theme="dark"] .study.m-quad  { --mode-bg:#0f2b28; }
:root[data-theme="dark"] .study.m-tower { --mode-bg:#2e1220; }
:root[data-theme="dark"] .study.m-pair  { --mode-bg:#0d2a24; }

.study .sbar { background: var(--mode-bg); border-bottom-color: transparent; }
.study .sbar .prog i { background: var(--mode); }
.study .eyebrow { color: var(--mode); }
.study .opt.pick { border-color: var(--mode); background: var(--mode-bg); }
.study .grade.on { border-color: var(--mode); background: var(--mode-bg); color: var(--mode); }
.study .btn { background: var(--mode); }
.study .btn.ghost { background: none; color: var(--mode); border-color: var(--mode); }

/* כותרת מצב — נותנת לכל מסך זהות במקום עוד רשימה */
.hero { background: var(--mode-bg); border-radius: var(--radius); padding: 16px; width: 100%;
        max-width: 46ch; text-align: center; }
.hero .big { font-family:"IBM Plex Mono",monospace; font-size: var(--fs-2xl); font-weight:500;
             color: var(--mode); line-height:1.05; font-variant-numeric: tabular-nums; }
.hero .cap { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

/* ===== ההסבר — הדבר שבאמת מלמד ===== */
.why { width:100%; max-width:52ch; text-align:right; margin-top:4px; }
.why h4 { margin:0 0 6px; font-size:var(--fs-sm); font-weight:700; color:var(--mode);
          letter-spacing:.04em; }
.opt-row { display:grid; grid-template-columns:22px 1fr; gap:8px; padding:8px 0;
           border-top:1px solid var(--line); align-items:start; }
.opt-row:first-of-type { border-top:0; }
.opt-row .mk { font-family:"IBM Plex Mono",monospace; font-size:var(--fs-sm); color:var(--dim); }
.opt-row.ok  .mk { color:var(--good); }
.opt-row.no  .mk { color:var(--bad); }
.opt-row .en { font-family:var(--font-en); direction:ltr; font-size:var(--fs-en); line-height:var(--lh-en); }
.opt-row.ok .en { font-weight:500; }
.opt-row .gl { font-size:var(--fs-sm); color:var(--muted); }
.opt-row .gl b { color:var(--text); font-weight:600; }
.opt-row.dim { opacity:.62; }

/* הבדל מילולי בין המקור למסיח — "למה זה שגוי" בלי לכתוב 232 הסברים ביד */
.diff ins { text-decoration:none; background:var(--good-bg); color:var(--good);
            border-radius:3px; padding:0 2px; font-weight:600; }
.diff del { text-decoration:line-through; background:var(--bad-bg); color:var(--bad);
            border-radius:3px; padding:0 2px; }

/* הקטע נשאר על המסך לאורך כל השאלות */
.passage { width:100%; max-width:56ch; max-height:40vh; overflow:auto;
           background:var(--surface-solid); border:1px solid var(--line);
           border-radius:var(--radius-sm); padding:12px 14px; direction:ltr; text-align:left;
           font-family:var(--font-en); font-size:var(--fs-en); line-height:var(--lh-en-loose); }
.passage .pn { color:var(--dim); font-size:var(--fs-xs); }
.passage.folded { max-height:84px; }
.fold { font-size:var(--fs-sm); color:var(--mode); padding:6px 2px; }

/* קומבו במשחקי קצב */
.combo { font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--mode); }
.pop { animation: pop .28s ease-out; }
@keyframes pop { 0%{transform:scale(.82);opacity:.4} 100%{transform:scale(1);opacity:1} }

/* פסקאות אמיתיות בקטע הקריאה */
.passage p { margin: 0 0 .85em; }
.passage p:last-child { margin-bottom: 0; }

/* ================= אסטרטגיה =================
   הפסילה היא הרעיון המרכזי של השכבה הזו, ולכן היא מקבלת שפה משלה:
   אפשרות פסולה נשארת על המסך מחוקה ולא נעלמת — לראות מה פסלת הוא חצי
   מהאימון. */

.study.m-elim { --mode: var(--accent); --mode-bg: var(--accent-sl); }

.opt.struck {
  opacity: .5; text-decoration: line-through;
  text-decoration-color: var(--bad); text-decoration-thickness: 2px;
  border-style: dashed;
}
.opt.struck .num { text-decoration: none; }
.opt:disabled { cursor: default; }

/* מד הסיכוי */
.oddsbar { width: 100%; max-width: 52ch; margin-top: 12px; text-align: center; }
.oddsbar .lab { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; }
.oddsbar .val { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-xl);
  font-weight: 600; color: var(--mode, var(--accent)); line-height: 1.1; }
.oddsbar .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.oddsbar .steps i { font-style: normal; font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-xs); padding: 3px 0; border-radius: 6px;
  background: var(--surface-2); color: var(--dim); }
.oddsbar .steps i.on { background: var(--mode-bg, var(--accent-sl)); color: var(--mode, var(--accent)); font-weight: 600; }

/* סולם הפסילה במסך האסטרטגיה */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.rung { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 4px; text-align: center; }
.rung b { display: block; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-md);
  color: var(--accent); }
.rung span { font-size: var(--fs-xs); color: var(--muted); }

/* לוח המדדים */
.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.stat .v { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-lg); font-weight: 600; }
.stat .l { font-size: var(--fs-sm); font-weight: 600; margin-top: 2px; }
.stat .s { font-size: var(--fs-xs); color: var(--muted); }

/* הממצאים */
.finding { border-top: 1px solid var(--line); }
.finding:first-of-type { border-top: 0; }
.finding > summary { display: grid; grid-template-columns: 4.4em 1fr auto; gap: 8px;
  align-items: baseline; padding: 10px 0; cursor: pointer; list-style: none; }
.finding > summary::-webkit-details-marker { display: none; }
.finding .fv { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: var(--fs-sm); }
.finding.works .fv { color: var(--good); }
.finding.dead  .fv { color: var(--bad); }
.finding .fn { font-size: var(--fs-sm); font-weight: 600; }
.finding .fp { font-size: var(--fs-xs); color: var(--dim); white-space: nowrap; }
.finding p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
  margin: 0 0 12px; padding-inline-start: calc(4.4em + 8px); }
.finding p b { color: var(--text); }
.finding[open] > summary { padding-bottom: 4px; }

/* קריאה ממוקדת */
.passage.focus { border-color: var(--mode, var(--accent)); }
.passage .plab { font-size: var(--fs-xs); color: var(--mode, var(--accent));
  font-weight: 600; margin-bottom: 6px; }
.passage .plab.dim { color: var(--dim); font-weight: 400; }
.mid .big { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-2xl);
  font-weight: 500; line-height: 1; margin: 6px 0; }

/* ================= משימת היום ================= */
.mission {
  display: block; width: 100%; text-align: right; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--mode, var(--accent));
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  font: inherit; color: var(--text);
}
.mission:active { transform: scale(.995); }
.mission.m-exam { --mode: var(--accent); }
.mission.m-trap { --mode: var(--bad); }
.mission.m-read { --mode: var(--warn); }
.mission.m-elim { --mode: var(--good); }
.mission .mh { display: flex; align-items: baseline; gap: 8px; }
.mission .mt { font-weight: 700; font-size: var(--fs-md); flex: 1; }
.mission .mm { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-xs);
  color: var(--mode, var(--accent)); white-space: nowrap; }
.mission .mw { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin-top: 3px; }
.mission .mw b { color: var(--text); font-weight: 600; }
.mission .mdone { font-size: var(--fs-xs); color: var(--good); margin-top: 5px; }

.opt.oldpick { border-style: dashed; }

/* ---- גרף המגמה ---- */
.trend svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.trend .gr  { stroke: var(--line); stroke-width: 1; }
.trend .tgt { stroke: var(--good); stroke-width: 1; stroke-dasharray: 3 3; }
.trend .ln  { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.trend .pt  { fill: var(--accent); }
.trend .axl { fill: var(--dim); font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.trend .tlab { display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--fs-xs); color: var(--dim); margin-top: 2px; }
.trend .tlab span:nth-child(2) { color: var(--good); }

/* ---- שורת הפרק: שם הפרק והשעון ---- */
.secbar { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; width: 100%; max-width: 52ch; }
.secbar .clock { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-md);
  font-weight: 600; color: var(--mode, var(--accent)); font-variant-numeric: tabular-nums; }
.secbar .clock.low { color: var(--bad); }

/* ---- כניסה ראשונה ---- */
.obt { font-size: var(--fs-xl); font-weight: 700; line-height: 1.25;
  text-align: center; max-width: 20ch; margin: 6px 0 2px; }

/* ---- באנר אופליין ---- */
.netbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--warn-bg, var(--surface-2)); color: var(--text);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); text-align: center; padding: 7px 12px;
  padding-bottom: calc(7px + env(safe-area-inset-bottom));
}

/* ================= מסך המילים ================= */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; min-height: 34px;
}
.chip.on { background: var(--accent-sl); border-color: var(--accent);
  color: var(--accent); font-weight: 600; }

.wrow {
  display: grid; grid-template-columns: 1fr auto 8px; gap: 10px; align-items: baseline;
  width: 100%; text-align: right; font: inherit; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 11px 2px; min-height: 44px; color: var(--text);
}
.wrow:hover { background: var(--surface-2); }
.wrow .ww { font-family: var(--font-en); direction: ltr;
  font-size: var(--fs-md); text-align: left; }
.wrow .wm { font-size: var(--fs-sm); color: var(--muted); }
.wrow .wb { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.wrow .b-new    { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.wrow .b-young  { background: var(--warn); opacity: .7; }
.wrow .b-solid  { background: var(--accent); opacity: .8; }
.wrow .b-strong { background: var(--good); }

.occ { display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  padding: 9px 0; border-top: 1px solid var(--line); }
.occ:first-of-type { border-top: 0; }
.occ .mk { font-family: "IBM Plex Mono", monospace; color: var(--dim); font-size: var(--fs-sm); }
.occ.ok .mk { color: var(--good); }
.occ .en { font-family: var(--font-en); direction: ltr;
  font-size: var(--fs-sm); line-height: 1.5; }
.occ.ok .en b { color: var(--good); }

/* ================= ליטוש אחרון =================

   ניסוח מחדש הוא הפרק עם המשפטים הארוכים ביותר — פריט שלם הוא 74
   מילים בחציון, וארבע אפשרויות באורך של שורה וחצי כל אחת. ברירת
   המחדל של .opt נכתבה למילים בודדות ודחסה אותן. כאן הן מקבלות את
   הרווח שהמבחן נותן להן. */
.study.m-trap .opts, .study.m-elim .opts { max-width: 58ch; }
.study.m-trap .opt, .study.m-elim .opt {
  line-height: 1.55; padding: 12px 14px;
  display: grid; grid-template-columns: 2.1em 1fr; gap: 2px 6px; align-items: start;
}
.study.m-trap .opt .num, .study.m-elim .opt .num { margin: 0; padding-top: .1em; }
.study.m-trap .ex, .study.m-elim .ex { line-height: 1.6; }

/* יעדי מגע — 44 פיקסלים הוא המינימום שאפשר לפגוע בו בביטחון בטלפון. */
.chip, .hint, .grade, .btn, .opt, .pick, .mission, .wrow, .acct { min-height: 44px; }
.sbar .x { min-width: 44px; min-height: 44px; }

/* מעברים קצרים, ובכיבוד מלא של prefers-reduced-motion שכבר מוגדר למעלה. */
.study { animation: rise .16s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.opt, .chip, .pick, .mission { transition: background .12s ease, border-color .12s ease; }

/* מצבי ריק ושגיאה */
.state {
  text-align: center; padding: 28px 18px; max-width: 40ch; margin: 0 auto;
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.6;
}
.state .sh { display: block; font-size: var(--fs-md); font-weight: 700;
  color: var(--text); margin-bottom: 6px; }
.state .btn { margin-top: 14px; }
.skel { background: var(--surface-2); border-radius: var(--radius-sm);
  height: 46px; margin-bottom: 7px; opacity: .6; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .45; } 50% { opacity: .75; } }

/* קישור מהאפשרות לדף המילה */
.opt-row .en.lnk { cursor: pointer; text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 3px;
  text-decoration-color: var(--dim); }
.opt-row .en.lnk:hover { text-decoration-color: var(--accent); }

/* טווח מספרי בתוך טקסט עברי. בלי בידוד מפורש אלגוריתם הכיוון דוחף את
   המספר הימני לשמאל — "50–150" נצבע על המסך כ-"150–50", ו-"114–128"
   כ-"128–114". זה לא עיצוב, זה מידע הפוך. */
.rng { unicode-bidi: isolate; direction: ltr; display: inline-block;
  font-variant-numeric: tabular-nums; }

/* שכבת האסוציאציה גוללת, כדי שהשדה יוכל לעלות מעל מקלדת הטלפון */
.study { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.study > .card { min-height: 0; }

.lead { font-size: var(--fs-md); line-height: 1.6; color: var(--text); margin-top: 8px; }
.lead b { font-weight: 700; }

/* ================= קריאוּת האנגלית =================

   כל תוכן המבחן הוא אנגלית, ורובו נקרא על רקע כהה. שלושה כיוונים
   שנעשו יחד, כי כל אחד לבדו לא הספיק: משפחה עם x-height גבוה
   וגזרה עבה יותר, סולם גדלים נפרד לאנגלית, וגובה שורה נדיב.

   ובנוסף — ורק כאן — ביטול ההחלקה של macOS. antialiased מדלל את
   הקווים, וסריף דק על רקע כהה מאבד מהם חלק. הטקסט העברי נשאר כפי
   שהוא; רק האנגלית מקבלת את המשקל המלא שלה בחזרה. */
.en, .ex, .opt, .def, .passage, .head-en, .opt-row .en, .item .w,
.wrow .ww, .occ .en, .pos {
  -webkit-font-smoothing: auto;
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures;
}

/* המילה הנכונה בתוך המשפט השלם צריכה להיקרא בבירור, לא רק להיות מסומנת */
.ex b { font-weight: 600; }

/* אפשרויות של משפט שלם: המספר בעמודה משלו, כך שהשורה השנייה לא
   נכנסת מתחתיו ומאבדת את היישור. העמודה צרה בכוונה — בטלפון כל
   פיקסל שלה נגרע מרוחב השורה, וזה בדיוק מה שהופך קריאה למעיקה. */
.study.m-trap .opt, .study.m-elim .opt,
.study.m-read .opt, .study.m-exam .opt {
  display: grid; grid-template-columns: 1.65em 1fr; gap: 0 3px; align-items: start;
  padding: 12px 13px;
}
.study .opt .num { margin: 0; padding-top: .2em; font-size: var(--fs-xs); }

/* בטלפון רוחב השורה הוא המשאב הנדיר. שלושים ושתיים תווים לשורה הם
   קריאה מעיקה; כל מילימטר שנחסך מהריפוד חוזר כטקסט. */
@media (max-width: 480px) {
  .study > .card { padding: 14px 12px 10px; }
  .wrap { padding-inline: 12px; }
  .ex { padding: 12px 13px; }
  .passage { padding: 12px 12px; }
}

/* קטע קריאה: פסקה ראשונה בלי הזחה, השאר עם רווח נשימה */
.passage p { text-wrap: pretty; }

@media (min-width: 560px) {
  :root { --fs-en: 19.5px; --fs-en-md: 21px; --fs-en-lg: 25px; }
}

/* סימוני השורות של מאל"ו בתוך הקטע — מספר שורה, לא חלק מהמשפט */
.passage .pn { color: var(--dim); font-size: .78em; font-family: "IBM Plex Mono", monospace;
  vertical-align: .12em; padding: 0 .15em; }

/* ================= שליטה בטיפוגרפיה האנגלית =================

   נקבע בתגיות על <html> ולא ב-style inline, כדי שהכל יישאר בקובץ
   אחד ויעבוד גם על מה שייכתב בעתיד. הבוררים ב-index.html מציבים את
   התגיות לפני הציור הראשון, אחרת המסך היה קופץ בכל טעינה. */

:root[data-en-size="s"]  { --fs-en-sm: 15px;   --fs-en: 17px;   --fs-en-md: 18.5px; --fs-en-lg: 21px; }
:root[data-en-size="l"]  { --fs-en-sm: 17.5px; --fs-en: 20.5px; --fs-en-md: 22px;   --fs-en-lg: 25px; }
:root[data-en-size="xl"] { --fs-en-sm: 19px;   --fs-en: 22.5px; --fs-en-md: 24px;   --fs-en-lg: 27px; }

/* סאנס: גופן המערכת. על אייפון זה SF Pro, ואין מה להוריד. */
:root[data-en-face="sans"] {
  --font-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* "כמו במבחן": חוברות מאל"ו מודפסות בסריף בסגנון Times. */
:root[data-en-face="exam"] {
  --font-en: "Times New Roman", Times, Georgia, "Liberation Serif", serif;
}

:root[data-en-lead="loose"] { --lh-en: 1.82; --lh-en-loose: 1.95; }
:root[data-en-lead="tight"] { --lh-en: 1.45; --lh-en-loose: 1.5; }

/* דוגמית חיה בתוך הבורר */
.sample {
  font-family: var(--font-en); direction: ltr; text-align: left;
  font-size: var(--fs-en); line-height: var(--lh-en);
  background: var(--surface-solid); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 13px; margin-top: 10px;
}
.sample b { font-weight: 600; }
.ctl { margin-top: 14px; }
.ctl > .f { display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted); margin-bottom: 6px; }