/* ============================================================================
   medialens · שכבת העיצוב
   נטען אחרי mediaroom.css:
     <link rel="stylesheet" href="/assets/mediaroom.css">
     <link rel="stylesheet" href="/assets/medialens-design.css">
   להסרה: מוחקים את השורה. אפס שינוי בקבצים אחרים.
   מקף רגיל בלבד. לוגיקה ב-station-shell.js - כאן רק מראה.
   ============================================================================ */

/* ---------------------------------------------------------------- 1 · צבע */
:root{
  --ink:#16181c;  --ink-2:#4c5157;  --gray:#82878e;
  --muted-2:#a9aeb4;  --muted-3:#c3c7cc;

  --panel:#ffffff;  --white:#ffffff;
  --chip:#f7f6f4;   --wash:#e9e7e2;
  --hairline:rgba(22,24,28,.13);  --hairline-2:rgba(22,24,28,.07);
  --line:rgba(22,24,28,.07);      --glass-hair:rgba(22,24,28,.11);

  /* --accent: הכחול שלי. אם המותג גובר - זו השורה היחידה להחזיר ל-#2F5AF0. */
  --accent:oklch(0.50 0.11 240);
  --accent-press:oklch(0.42 0.11 240);
  --accent-ink:oklch(0.42 0.11 240);
  --accent-tint:oklch(0.50 0.11 240 / .08);
  --accent-tint-2:oklch(0.50 0.11 240 / .16);

  --pos:oklch(0.56 0.11 152);
  --pos-ink:oklch(0.44 0.09 152);
  --pos-tint:oklch(0.56 0.11 152 / .10);
  --pos-tint-2:oklch(0.56 0.11 152 / .28);

  --neg:oklch(0.58 0.13 40);
  --neg-ink:oklch(0.46 0.13 40);
  --neg-tint:oklch(0.58 0.13 40 / .08);
  --neg-tint-2:oklch(0.58 0.13 40 / .22);

  --amber:oklch(0.68 0.13 70);
  --amber-ink:oklch(0.50 0.11 70);
  --amber-tint:oklch(0.68 0.13 70 / .11);
  --amber-tint-2:oklch(0.68 0.13 70 / .30);

  --r:12px; --r-2:9px; --r-3:8px;
  --shadow:0 1px 2px rgba(22,24,28,.04), 0 8px 24px -16px rgba(22,24,28,.12);
  --shadow-lg:0 4px 20px rgba(22,24,28,.12);

  /* ------------------------------------------------------------ 2 · סקאלה */
  /* רצועת טקסט 10-15. כל טקסט, תווית, ומספר שהוא חלק ממשפט או משורה. */
  --fs-micro:10px; --fs-chip:10.5px; --fs-label:11px; --fs-cap:11.5px;
  --fs-small:12px; --fs-body:12.5px; --fs-lead:13.5px; --fs-h3:15px;
  /* רצועת מספרים 17-23. רק מספר שהוא הנקודה של הבלוק שלו, עם תווית מעליו. */
  --fs-fig-s:17px; --fs-fig:19px; --fs-fig-l:21px; --fs-fig-xl:23px;
  /* החריג היחיד: כותרת תחנה. */
  --fs-title:19px;
}

:root[data-theme="dark"]{
  --ink:#eaebef;  --ink-2:#c2c6cf;  --gray:#8a909c;
  --muted-2:#6f7683;  --muted-3:#575d68;
  --panel:#14161b;  --white:#14161b;  --chip:#1b1e25;  --wash:#0d0f13;
  --hairline:rgba(234,235,239,.15);  --hairline-2:rgba(234,235,239,.08);
  --line:rgba(234,235,239,.08);      --glass-hair:rgba(234,235,239,.12);

  --accent:oklch(0.68 0.12 240);  --accent-press:oklch(0.60 0.12 240);
  --accent-ink:oklch(0.78 0.09 240);
  --accent-tint:oklch(0.68 0.12 240 / .14); --accent-tint-2:oklch(0.68 0.12 240 / .24);

  --pos:oklch(0.70 0.13 152); --pos-ink:oklch(0.82 0.11 152);
  --pos-tint:oklch(0.70 0.13 152 / .14); --pos-tint-2:oklch(0.70 0.13 152 / .30);

  --neg:oklch(0.68 0.15 40); --neg-ink:oklch(0.80 0.11 40);
  --neg-tint:oklch(0.68 0.15 40 / .14); --neg-tint-2:oklch(0.68 0.15 40 / .28);

  --amber:oklch(0.76 0.13 70); --amber-ink:oklch(0.86 0.10 70);
  --amber-tint:oklch(0.76 0.13 70 / .14); --amber-tint-2:oklch(0.76 0.13 70 / .32);
}
:root[data-theme="dark"] body{background:var(--wash)}

/* --------------------------------------------------- 3 · המסגרת, שש שכבות */
/* מקטע רציף אחד. ההפרדה היא קו שערה, לא אוויר. הגוף הוא הדבר היחיד שנגלל. */
.zone-shell{display:flex; flex-direction:column; height:100%; min-height:0;
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden}

.zone-head{flex:none; display:flex; align-items:center; gap:12px;
  padding:0 20px; height:56px; border-bottom:1px solid var(--hairline)}
.zone-head .wm{font-size:var(--fs-h3); font-weight:700}
.zone-head .sep{width:1px; height:18px; background:var(--hairline); flex:none}
.zone-head .zn{font-size:var(--fs-lead); font-weight:600}
.zone-head .tag{font-size:var(--fs-label); font-weight:600; color:var(--gray);
  background:var(--chip); border-radius:999px; padding:4px 10px}
/* כפתורי ההרצה - בית אחד, בקצה. לא שלוש עומקים בגוף. */
.zone-head .runs{margin-inline-start:auto; display:flex; align-items:center; gap:8px}

/* גולש בקבוצות, לא נחתך. רוחב טבעי מלא: ~1129px; העמודה באפליקציה עם סרגל הצד: ~1100px.
   לכן wrap - הקבוצות נשארות שלמות וההערה יורדת לשורה משלה. אסור overflow עם פס גלילה מוסתר -
   תוכן שנחתך בלי שום סימן שהוא קיים מפר את הדוקטרינה. */
#periodBar{flex:none; margin:0; border:none; border-radius:0; box-shadow:none;
  padding:10px 20px; background:var(--panel); border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap}
/* הקבוצה היא היחידה שלא נשברת. הגלולות בתוכה נשארות עם התווית שלהן. */
.pb-grp{flex:none; display:flex; align-items:center; gap:7px}
/* התווית היא ההסבר. אם צריך פסקה כדי להסביר איזה פקד מזין איזה מספר - הפקד במקום הלא נכון. */
.pb-label{flex:none; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.04em; color:var(--gray); white-space:nowrap}
.pb-sep{flex:none; width:1px; height:22px; background:var(--hairline)}
.pb-note{flex:none; margin-inline-start:auto; padding-inline-start:14px;
  font-size:var(--fs-cap); color:var(--gray); white-space:nowrap}

/* תקציב הגובה, נמדד: chrome = 280px (כותרת 56 + פקדים 52 + באנר 38 + מסילה 61 + סרגל 71).
   גוף ב-1080p: ~780px. בלפטופ 768: ~470px. תחנה שלא נכנסת מתפצלת - לא נדחסת ולא נגללת.
   בשער הזה: החסמים (.gate-tail) מוצגים רק אחרי בחירת מסלול התיקון,
   ומשפט הסתירה יושב ב-.gate-foot ולא בתיבה לבנה נפרדת. */

.stn-banner{flex:none; margin:0; border-radius:0; border-width:0 0 1px 0;
  border-style:solid; padding:9px 20px; display:flex; align-items:baseline;
  gap:9px; flex-wrap:wrap}
.stn-banner .dot{flex:none; align-self:center; width:6px; height:6px;
  border-radius:50%; background:currentColor}
/* \u05d4\u05db\u05d5\u05ea\u05e8\u05ea \u05dc\u05d0 \u05e0\u05e9\u05d1\u05e8\u05ea \u05d1\u05d0\u05de\u05e6\u05e2 \u05de\u05e9\u05e4\u05d8. \u05db\u05e9\u05d0\u05d9\u05df \u05de\u05e7\u05d5\u05dd - \u05d4\u05de\u05e9\u05e4\u05d8 \u05d4\u05de\u05e9\u05dc\u05d9\u05dd \u05d9\u05d5\u05e8\u05d3 \u05dc\u05e9\u05d5\u05e8\u05d4 \u05e9\u05e0\u05d9\u05d9\u05d4. */
.stn-banner b{flex:0 1 auto; min-width:0; font-weight:600;
  font-size:var(--fs-body); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.stn-banner span:not(.dot){flex:1 1 240px; min-width:0; font-weight:400;
  font-size:var(--fs-body); opacity:.82}

.stn-rail{flex:none; margin:0; padding:11px 20px 12px; gap:0;
  background:var(--chip); border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; flex-wrap:nowrap; overflow-x:auto}
/* פס הגלילה מוסתר במסילה בלבד, ורק כי הצ'יפ הנוכחי תמיד נראה - יש סימן למה שמחוץ למסך. */
.stn-rail{scrollbar-width:none; -ms-overflow-style:none}
.stn-rail::-webkit-scrollbar{display:none}

.zone-body{flex:1; min-height:0; overflow-y:auto; padding:20px}

.stn-bar{flex:none; margin:0; padding:13px 20px; padding-inline-end:20px;
  border-top:1px solid var(--hairline); border-bottom:none; background:var(--panel);
  display:flex; align-items:center; gap:16px}
/* ה-FAB עולה מעל הסרגל. הסרגל לא זז מהקצה בשביל כפתור צף. */
.askw-fab{inset-block-end:calc(env(safe-area-inset-bottom,0px) + 88px)}

/* ----------------------------------------------- 4 · מסילה ומיספור תחנות */
.stn-chip{flex:none; display:flex; align-items:center; gap:8px; padding:8px 13px;
  border-radius:999px; white-space:nowrap; font-family:var(--f);
  font-size:var(--fs-body); font-weight:600; transition:.15s;
  background:var(--panel); border:1px dashed var(--hairline); color:var(--gray)}
/* הספרה: מונו, לא Heebo. שתי משפחות ספרות בצ׳יפ אחד היו הפגם. */
.stn-chip .n{flex:none; width:20px; height:20px; line-height:17px; text-align:center;
  border-radius:50%; border:1.5px solid currentColor; font-family:var(--fm);
  font-size:var(--fs-chip); font-weight:600; font-variant-numeric:tabular-nums;
  unicode-bidi:isolate}
/* ארבעה מצבים, מובחנים בלי להסתמך על גוון: מלא / רציף / מקווקו / מקווקו דהוי. */
.stn-chip.current{background:var(--ink); border:1px solid var(--ink);
  color:var(--panel); font-weight:700; box-shadow:0 2px 10px rgba(22,24,28,.16)}
.stn-chip.done{background:var(--panel); border:1px solid var(--pos-tint-2); color:var(--pos-ink)}
.stn-chip.available{background:var(--panel); border:1px dashed var(--hairline); color:var(--gray)}
.stn-chip.locked{background:transparent; border:1px dashed var(--hairline-2);
  color:var(--muted-3); opacity:1; cursor:not-allowed}
.stn-chip:not(.locked):not(.current):hover{background:var(--chip);
  color:var(--ink); border-color:var(--gray)}
.stn-chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.stn-badge{flex:none; font-family:var(--fm); font-size:var(--fs-chip); font-weight:700;
  line-height:1; padding:3px 6px; border-radius:5px; background:var(--chip);
  color:var(--gray); font-variant-numeric:tabular-nums; unicode-bidi:isolate}
.stn-chip.current .stn-badge{background:var(--panel); color:var(--ink)}
/* מונה שהוא ממצא, לא מלאי. */
.stn-badge.flag{background:var(--amber); color:#fff}
.stn-badge.clear{background:var(--pos); color:#fff}

.stn-conn{flex:none; width:18px; height:1px; background:var(--hairline)}
.stn-rail-note{flex:none; margin-inline-start:auto; padding-inline-start:14px;
  font-size:var(--fs-label); color:var(--gray); white-space:nowrap}

/* ------------------------------------------------------ 5 · גוף התחנה */
/* eyebrow מעל כותרת מעל פסקה. שלוש שורות מדורגות, אותו קצה, רוחב מוגבל. */
.stn-eyebrow{font-size:var(--fs-label); font-weight:500; color:var(--gray); letter-spacing:.02em}
.stn-h{font-size:var(--fs-title); font-weight:700; color:var(--ink); line-height:1.25; margin:6px 0 0}
.stn-lead{font-size:var(--fs-lead); font-weight:400; color:var(--ink-2);
  line-height:1.7; margin:10px 0 0; max-width:72ch}
.stn-period{display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:6px 0 10px;
  font-size:var(--fs-small); color:var(--ink-2); line-height:1.5}
.stn-period b{font-size:var(--fs-label); font-weight:700; color:var(--gray)}

/* --------------------------------------------------- 6 · כרטיס השער */
.gate-card{margin-top:16px; padding:18px 20px; border-radius:var(--r-2);
  background:var(--neg-tint); border:1px solid var(--neg-tint-2); max-width:900px}
.gate-hd{display:flex; align-items:center; gap:8px;
  font-size:var(--fs-h3); font-weight:700; color:var(--neg-ink)}
.gate-dot{flex:none; width:7px; height:7px; border-radius:50%; background:var(--neg)}
.gate-figs{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin:13px 0 0; padding:13px 0 0; border-top:1px solid var(--neg-tint-2)}
/* קצה משותף לסריקה. מספרים ממורכזים בארבע עמודות אין להם קו לרוץ לאורכו. */
.gf{text-align:start; min-width:0}
.gf-n{font-family:var(--fm); font-size:var(--fs-fig-l); font-weight:700;
  color:var(--ink); line-height:1.2; font-variant-numeric:tabular-nums}
.gf-n span{unicode-bidi:isolate}
.gf.miss .gf-n{color:var(--gray); font-weight:400}
.gf-c{font-size:var(--fs-cap); color:var(--ink-2); line-height:1.45; margin-top:4px}
.gate-inset{margin:15px 0 0; padding:11px 14px; border-radius:var(--r-3);
  background:var(--panel); border:1px solid var(--glass-hair);
  font-size:var(--fs-body); color:var(--ink-2); line-height:1.6}
.gate-ask{margin:15px 0 0; font-size:var(--fs-body); font-weight:600; color:var(--ink)}
.gate-choices{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px}
.gate-foot{margin:12px 0 0; font-size:var(--fs-cap); color:var(--gray);
  line-height:1.65; max-width:78ch}

/* תיבת הסימון. ✓ בפנים, ירוק = נבחר, ומסגרת שנראית לפני הלחיצה. */
.gc{display:flex; align-items:flex-start; gap:10px; text-align:start; padding:12px 14px;
  border-radius:var(--r-3); background:var(--panel); border:1px solid var(--glass-hair);
  transition:.15s; cursor:pointer}
.gc-box{flex:none; width:17px; height:17px; margin-top:1px; border-radius:5px;
  border:1.5px solid var(--gray); background:var(--panel)}
.gc-t{flex:1; min-width:0}
.gc-t b{display:block; font-size:var(--fs-body); font-weight:700; color:var(--ink)}
.gc-t span{display:block; font-size:var(--fs-cap); color:var(--ink-2);
  margin-top:3px; line-height:1.5}
.gc.on{background:var(--pos-tint); border-color:var(--pos)}
.gc.on .gc-box{background:var(--pos); border-color:var(--pos)}
.gc.on .gc-box::after{content:'✓'; display:block; text-align:center;
  font:700 11px/14px var(--f); color:#fff}
/* היפוך מלא נשמר לצ׳יפים. כרטיס בן שתי שורות מקבל הכהיית רקע. */
.gc:hover{background:var(--chip); border-color:var(--gray)}
.gc:hover .gc-box{border-color:var(--ink)}
.gc:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* חסמים: בשליטתכם מול מגבלת מערכת. */
.gate-tail{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.gate-block{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 13px; border-radius:var(--r-3);
  background:var(--panel); border:1px solid var(--glass-hair)}
.gb-kind{flex:none; font-size:var(--fs-chip); font-weight:700;
  padding:3px 9px; border-radius:999px}
.gb-kind.yours{background:var(--amber); color:#fff}
.gb-kind.sys{background:var(--chip); color:var(--gray)}
.gb-t{flex:1; font-size:var(--fs-body); font-weight:600; color:var(--ink)}
.gb-tr{font-size:var(--fs-cap); color:var(--gray)}

/* ------------------------------------- 7 · סרגל ההחלטה ומיקום הכפתורים */
.stn-bar .z1{flex:none}
.stn-bar .z2{flex:1; min-width:0}
.stn-bar .zsep{flex:none; width:1px; height:34px; background:var(--hairline)}
/* הפעולה בקצה, וחזרה לפניה. הראשי הוא האלמנט הכהה-מלא היחיד בגוף. */
.stn-bar .z3{flex:none; display:flex; align-items:center; gap:9px}
.stn-bar .lbl{display:block; font-size:var(--fs-label); font-weight:400; color:var(--gray)}
.stn-bar .val{display:block; font-size:var(--fs-lead); font-weight:700; color:var(--ink)}
/* המשפט שכל המבנה קיים בשבילו. לא האפור הבהיר ביותר בפלטה. */
.stn-bar .say{display:block; font-size:var(--fs-body); font-weight:400; color:var(--ink-2)}

.stn-next{font-family:var(--f); font-size:var(--fs-body); font-weight:600;
  color:#fff; background:var(--ink); border:1px solid var(--ink);
  border-radius:7px; padding:10px 17px; cursor:pointer; white-space:nowrap;
  box-shadow:0 2px 8px rgba(22,24,28,.16); transition:.15s; min-height:44px}
.stn-next:hover{background:var(--ink-2); border-color:var(--ink-2)}
/* מושבת עם סיבה, לא מוסתר. הסיבה על הכפתור עצמו. */
.stn-next:disabled{background:var(--chip); border-color:transparent;
  color:var(--muted-2); box-shadow:none; cursor:not-allowed}
.stn-back{font-family:var(--f); font-size:var(--fs-body); font-weight:600;
  color:var(--ink-2); background:var(--panel); border:1px solid var(--hairline);
  border-radius:7px; padding:9px 14px; cursor:pointer; white-space:nowrap;
  transition:.15s; min-height:44px}
.stn-back:hover{background:var(--chip); border-color:var(--gray)}

/* ------------------------------------------ 8 · גלולות עם מדרג גלוי */
/* inline-flex ולא inline-block: המדרג הוא פריט flex ולכן לא נחתך ולא נשבר לשורה. */
.seg-b{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--f); font-size:var(--fs-label); font-weight:600;
  border-radius:6px; padding:6px 10px; color:var(--ink-2);
  background:var(--panel); border:1px dashed var(--hairline); transition:.15s; min-height:32px}
.seg-b:hover{background:var(--chip); border-color:var(--gray); color:var(--ink)}
.seg-b.on{background:var(--ink); border:1px solid var(--ink); color:#fff}
/* חלון אזהרה נבחר בכתום, לא בכהה. הבחירה לא מוחקת את האזהרה. */
.seg-b.on[data-rank="warning"]{background:var(--amber); border-color:var(--amber)}
.seg-b[data-rank]::after{content:attr(data-rank-he); flex:none;
  font-size:var(--fs-micro); font-weight:700; line-height:1.4;
  padding:1px 6px; border-radius:999px}
.seg-b[data-rank="recommended"]::after{background:var(--pos-tint); color:var(--pos-ink)}
.seg-b[data-rank="reasonable"]::after{background:var(--chip); color:var(--gray)}
.seg-b[data-rank="warning"]::after{background:var(--amber-tint); color:var(--amber-ink)}
.seg-b.on::after{background:rgba(255,255,255,.22); color:#fff}

/* ------------------------------------------------ 9 · צ׳יפי ורדיקט */
.verdict,.vch{display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f); font-size:var(--fs-micro); font-weight:600;
  padding:2px 6px; border-radius:4px}
.vch.pass{background:var(--pos); border:1px solid var(--pos); color:#fff}
.vch.fail{background:var(--neg-tint); border:1px solid var(--neg-tint-2); color:var(--neg-ink)}
.vch.none{background:transparent; border:1px dashed var(--hairline); color:var(--gray)}
.vch.hold{background:var(--amber-tint); border:1px solid var(--amber-tint-2); color:var(--amber-ink)}

/* ---------------------------------- 10 · מונים, ממצאים, מספרים */
.cnt-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; max-width:900px}
.cnt{padding:13px 15px; border-radius:var(--r-2);
  background:var(--panel); border:1px solid var(--hairline)}
.cnt.pos{background:var(--pos-tint); border-color:var(--pos-tint-2)}
.cnt.neg{background:var(--neg-tint); border-color:var(--neg-tint-2)}
.cnt .n{font-family:var(--fm); font-size:var(--fs-fig-l); font-weight:700;
  line-height:1.15; font-variant-numeric:tabular-nums; unicode-bidi:isolate}
.cnt .c{font-size:var(--fs-cap); color:var(--ink-2); line-height:1.45; margin-top:4px}

.fnd{display:flex; align-items:center; gap:12px; padding:12px 15px;
  border-radius:var(--r-3); background:var(--panel);
  border:1px solid var(--hairline); cursor:pointer; transition:.15s}
.fnd:hover{background:var(--chip); border-color:var(--gray)}
.fnd .ix{flex:none; font-family:var(--fm); font-size:var(--fs-label);
  font-weight:600; color:var(--muted-2); unicode-bidi:isolate}
.fnd .ti{flex:1; min-width:0; font-size:var(--fs-body); font-weight:700}
.fnd .mo{flex:none; font-family:var(--fm); font-size:var(--fs-body);
  font-weight:600; unicode-bidi:isolate}
.fnd .me{flex:none; width:96px; text-align:end; font-size:var(--fs-cap); color:var(--gray)}

/* מונו לכל מספר. LTR מבודד בתוך טקסט עברי. */
.tnum,.num{font-family:var(--fm); font-variant-numeric:tabular-nums;
  unicode-bidi:isolate; direction:ltr; display:inline-block}
/* ליטרל הפונט האחרון בקוד. */
.histread .hr-k .v{font-family:var(--fm); font-size:var(--fs-fig-s)}

/* --------------------------------------- 11 · מצב ריק ממוזג */
/* אף פעם לא יותר מפאנל ריק אחד ברצף. */
.empty-mech{background:var(--chip); border:1px solid var(--hairline);
  border-radius:var(--r-2); padding:18px 20px; max-width:900px}
.empty-mech h4{font-size:var(--fs-h3); font-weight:700; margin:0 0 8px}
.empty-mech p{font-size:var(--fs-body); color:var(--ink-2); line-height:1.7; max-width:74ch}
.empty-mech .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.empty-mech .cards>div{background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--r-3); padding:12px 14px}
.empty-mech .cards .n{font-family:var(--fm); font-size:var(--fs-fig);
  font-weight:700; unicode-bidi:isolate}
.empty-mech .cards .l{font-size:var(--fs-label); color:var(--gray); margin-top:3px}
.empty-mech .unlock{margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline)}
.empty-mech .unlock b{display:block; font-size:var(--fs-label); font-weight:600;
  letter-spacing:.06em; color:var(--gray); margin-bottom:5px}

/* ------------------------------------- 12 · היעדר, ארבעה טיפולים */
/* לא נשאל: כרטיס נפרד מעל הרשימה. בתוך הרשימה זה נקרא כמשיב חלש. */
.absent{background:var(--amber-tint); border:1px solid var(--amber-tint-2);
  border-radius:var(--r-3); padding:11px 14px; margin:0 0 12px}
.absent-names{font-size:var(--fs-lead); font-weight:700; color:var(--ink)}
/* לא הוצהר: קבוצה נפרדת, ראשונה. */
.undecl{background:oklch(0.68 0.13 70 / .06); border:1px solid var(--amber-tint-2);
  border-radius:var(--r-3); padding:10px 14px}
/* לא נמדד: בר יחסי אחד, לא שורות זהות. */
.split-bar{display:flex; height:34px; border-radius:6px; overflow:hidden;
  border:1px solid var(--hairline)}
.split-bar>div{display:grid; place-items:center; font-size:var(--fs-label);
  font-weight:600; white-space:nowrap}
.split-bar .has{background:var(--pos); color:#fff}
.split-bar .thin{background:var(--amber-tint-2); color:var(--amber-ink)}
/* לא ניתן לקרוא: רשת צפופה. הצפיפות היא המסר. */
.unread-grid{display:flex; gap:10px; flex-wrap:wrap}
.unread-grid .it{width:96px}
.unread-grid .ph{width:96px; height:96px; border-radius:6px;
  background:var(--chip); border:1px dashed var(--hairline)}
.unread-grid .lb{font-size:var(--fs-micro); font-weight:500; color:var(--muted-2);
  margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.unread-grid .cf{font-family:var(--fm); font-size:var(--fs-micro);
  font-weight:600; color:var(--neg-ink); unicode-bidi:isolate}

/* ------------------------------------------------- 13 · RTL וגלישה */
/* קדימה ←, חזרה →. flex כבר מתהפך: row-reverse היה מחזיר ל-LTR. */
[dir="rtl"] .stn-rail,[dir="rtl"] .stn-bar,[dir="rtl"] #periodBar{flex-direction:row}
@media (max-width:1200px){
  .gate-figs{grid-template-columns:repeat(2,1fr)}
  .gate-choices{grid-template-columns:1fr}
  .cnt-grid{grid-template-columns:repeat(2,1fr)}
  .empty-mech .cards{grid-template-columns:1fr}
}
/* לפטופ נמוך: תוכן השער 605px מול גוף ~430px. החלוקה במקום גלילה שקטה -
   הרשת ל-2\u00d72 והריווח מתהדק. אם גם זה לא מספיק, ההכרעה המוצהרת ב-PROMPT.md \u00a7אחרי-כל-שלב. */
@media (max-height:800px){
  .gate-figs{grid-template-columns:repeat(2,1fr); gap:10px; margin-top:11px; padding-top:11px}
  .gate-card{padding:14px 16px}
  .zone-body{padding:16px 20px}
  .stn-lead{margin-top:8px}
}