/* ═══════════════════════════════════════════════════════════════════════════
   ATLAS · restructure.css — שכבת-עיצוב פאזה-1 (מאוחדת מ-restructure-v1..v4)
   ─────────────────────────────────────────────────────────────────────────
   • נטענת אחרי css/styles.css → גוברת בספציפיות-שווה בלי !important
     (החריג היחיד: .miniseg — דורס base-!important, מסומן במקום).
   • משתמשת בטוקני-פאזה-0 (styles.css :root + [data-theme="light"]) בלבד —
     ללא ליטרלים קשיחים, פרט למידות שאין להן טוקן-תואם (מסומנות בהערה).
   • משכתבת DOM-קיים של הפרודקשן בלבד. לא מוסיפה מרקאפ.
   מקורות מוקאפ: atlas-ui-mockups/accent-preview/css/restructure-v1..v4.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ===== 1 · רקע · אווירת-visionOS (.bg) — כהה+בהיר ===== */
/* v4:79-84 (כהה) + v4:141-145 (בהיר) — הוסר prefix [data-scheme="ysnp-indigo"],
   מוחל ישירות. v1:17-22 וינייטה נשמרת. אינדיגו+טורקיז, אאורה דרך --aura. */
.bg {
  opacity: var(--aura); /* 0.6 כהה / 0.4 בהיר */
}
:root:not([data-theme="light"]) .bg {
  background:
    radial-gradient(820px 560px at 80% -8%, rgba(124, 140, 255, 0.2), transparent 60%),
    radial-gradient(700px 540px at 6% 108%, rgba(52, 224, 200, 0.09), transparent 62%),
    radial-gradient(560px 460px at 46% 44%, rgba(124, 140, 255, 0.07), transparent 66%);
}
[data-theme="light"] .bg {
  background:
    radial-gradient(820px 560px at 80% -8%, rgba(91, 108, 240, 0.12), transparent 60%),
    radial-gradient(700px 540px at 6% 108%, rgba(15, 165, 147, 0.07), transparent 62%);
}
.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 66% at 50% 42%, transparent 36%, var(--vignette) 100%);
}
/* פאריטי G1+G11+G15 (18.7): סכמת ysnp-indigo של הסנדבוקס (v3:6-14 + v4:113-121) —
   רקע-הלוגו #121212 + טוקני-משטח כהים + זכוכית-אמת בבהיר. --green בהיר לא נדרס
   (נשאר #047857 — הכרעת-AA, עידן אישר 18.7). aura: 1/0.55 (הסנדבוקס). */
:root:not([data-theme="light"]) {
  --bg: #121212;
  --glass: rgba(255, 255, 255, 0.06);
  --glass2: rgba(255, 255, 255, 0.035);
  --stroke: rgba(255, 255, 255, 0.13);
  --stroke2: rgba(255, 255, 255, 0.07);
  --green: #22c55e;
  --aura: 1;
}
[data-theme="light"] {
  --aura: 0.55;
  --glass: rgba(255, 255, 255, 0.82);
  --glass2: rgba(255, 255, 255, 0.6);
  --stroke: rgba(25, 29, 43, 0.13);
  --stroke2: rgba(25, 29, 43, 0.07);
}

/* ===== 2 · זכוכית-מט (.glass) ===== */
/* מתכון-מט: blur(--glass-blur) saturate(--glass-sat) + צל-טוקן. שני המצבים.
   כהה מקבל ברק-עליון visionOS דרך ::before; בהיר שומר את ברק-הבסיס הפנימי
   (styles.css:2529 inset 0 1px 0) — לכן לא-שטוח, ולא מקבל ::before (תיקון-באג #5). */
.glass {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--shadow-3);
}
/* פאריטי G3 (18.7): מתכון-visionOS של הסנדבוקס (v4:85-92) — משטחים גדולים בלבד:
   מאט-כהה 0.045 + blur(28) saturate(1.7) בכהה; blur(16) saturate(1.2) בבהיר (v4:135-140).
   [data-transparency="off"] ממשיך לגבור (!important בסקשן 10ה). */
:root:not([data-theme="light"]) .panel.glass,
:root:not([data-theme="light"]) .kpi.glass,
:root:not([data-theme="light"]) .controlbar.glass {
  background-color: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
}
[data-theme="light"] .panel.glass,
[data-theme="light"] .kpi.glass,
[data-theme="light"] .controlbar.glass {
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
/* פאריטי G30 (18.7): הפרדת-משטחים בבהיר (v4:463-467) */
[data-theme="light"] .kpi,
[data-theme="light"] .panel,
[data-theme="light"] .controlbar {
  border-color: rgba(15, 23, 42, 0.08);
}
:root:not([data-theme="light"]) .panel.glass,
:root:not([data-theme="light"]) .kpi.glass {
  position: relative;
}
:root:not([data-theme="light"]) .panel.glass::before,
:root:not([data-theme="light"]) .kpi.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, 0.09), transparent 55%);
}

/* ===== 3 · אריחי-KPI (.grid.kpis · .kpi) ===== */
/* מועצת-פאזה-1 תיקון C נשמר ברוחו: מסונקצן ל-#console — profile.js:242 מרנדר
   .grid.kpis גם ב-drawer-הפרופיל (section#profile, מחוץ ל-#console), ומראה-הקונסולה לא שייך לשם.
   פאריטי G2 (18.7): השורה יצאה מ-.console-grid לראש-#console → scoping הוסב ל-#console,
   והרשת = שורה אחת × 7 כמו הסנדבוקס (v1:30-34), כולל מובייל (C3 — אין media override). */
#console .grid.kpis {
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4); /* v4:14-15 */
  /* מועצת-הפאריטי (18.7): ב-390px השורה גולשת 711px (טבעת-98px היא רצפת-min-content)
     ואף מפילה paint ב-Chromium — גלילה-פנימית מכילה אותה; דסקטופ לא מושפע. */
  overflow-x: auto;
}
/* גאומטריה: v3:25-30 (מרכוז) + v4:50-54 (ריפוד, בלי רקע-רשת) */
#console .kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 168px; /* אין טוקן — גובה-אריח מהמוקאפ */
  padding: var(--sp-4h); /* 18/22 → tier --sp-4h(20) לפי הערת-פאזה-0 */
  background-image: none;
  box-shadow: var(--shadow-3);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
/* תווית: מרכוז + מידות-הסנדבוקס (v4:36-42).
   פאריטי G8 — הכרעת-עידן 18.7: 10.5px כמו המוקאפ (דרס את כלל-ה-P0 של 16px). */
#console .kpi .lab {
  justify-content: center;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
/* מספרים גדולים (v1:48-66) — גיבור ל-#kMain/#kPend, רגיל לשאר.
   פאריטי G33/C2 + מועצת-הפאריטי (18.7): "ביטול דמוקרטיית-הצבעים" תוקן במקור —
   ה-inline teal/violet הוסרו מ-index.html (נספחים/רזרבה→ink, בקשות→--ac inline),
   ולכן אין צורך ב-!important. קריטי: kMain/kOther נשארים inline כי renderKPIs
   מחליף אותם חי במתג נוכחים/חסרים, ואנימציית-ה-pulse (flashKPIs) חיה רק כשאין
   דריסת-!important. */
#console .kpi .num {
  font-size: var(--t-num);
  color: var(--ink); /* kTotal/kPct/kAppendix/kRotation; הסמנטיים גוברים ב-inline */
}
#kMain {
  font-size: var(--t-num-hero);
}
/* מועצת-פאזה-1 תיקון A: --amber על אריח-לבן = 3.14:1 (נכשל AA) → --on-amber (4.97:1).
   הצבע נשלט ע"י inline style (index.html:219 + attendance.js:152 בכל render) —
   כלל color רגיל לא יגבר עליו. לכן מכוונים-מחדש את המשתנה שה-inline קורא:
   var(--amber) נפתר על האלמנט עצמו. מכסה גם את #kMain במצב-מתג "חסרים"
   (attendance.js:150 — אותו באג-ניגודיות במצב ההפוך). ירוק/מצב-כהה לא מושפעים. */
[data-theme="light"] #kOther,
[data-theme="light"] #kMain {
  --amber: var(--on-amber);
}
#kPend {
  font-size: var(--t-num-hero);
  text-shadow: 0 0 22px var(--ac2); /* 22px זוהר — אין טוקן-רדיוס-זוהר; הצבע עבר ל-#console #kPend */
}
/* הרמת-hover (צל-טוקן דו-מצבי) */
#console .kpi:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
/* אריח-לחיץ: מבטא-גבול בלבד (משוב-לחיצה scale ב-base:583).
   פאריטי G23 (18.7): הגרדיאנט הוסר — הסנדבוקס הורג כל background-image על .kpi
   (v4:51 !important); ההדגשה נשארת דרך הגבול. */
#console .kpi.click {
  border-color: color-mix(in srgb, var(--ac) 40%, transparent);
}
/* כניסה מדורגת (v4:206-217) — --i מוזרק ע"י JS; בהיעדרו כולם יחד */
@media (prefers-reduced-motion: no-preference) {
  /* PLAN v2 24.7: html:not(.settled) — אנימציית-הכניסה רצה רק ב-boot (עד שה-JS מציב settled).
     בלי השער, כל renderAll (save/רענון-שקט/מעבר-לשונית) בנה את האריחים מחדש והתנגנה replay. */
  html:not(.settled) #console .grid.kpis .kpi {
    animation: tileIn var(--dur-4) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms); /* 45ms דיליי — אין טוקן */
  }
  @keyframes tileIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

/* ===== 3b · פופאובר-שמות (T54, וריאנט ג', תיקון-עידן 18.7 ערב) =====
   רק אריחים עם data-kpi-pop (main/other/reserve/appendix — לא kTotal/kPct/kPend).
   מיקום/blur/border כמו .kpi.glass עצמו (var(--stroke)/--glass-blur/--glass-sat) —
   "זכוכית תואמת-ATLAS" מהבריף. אנימציית-פתיחה: תואמת ל-tileIn (fade+translateY),
   בתוספת scale עדין, מאחורי אותו gate של prefers-reduced-motion. */
#console .kpi[data-kpi-pop] {
  cursor: pointer;
}
/* אלמנט-משותף יחיד (#kpiPop, נוצר-עצל ב-wireKpiPopovers, appendChild ל-body) —
   לא ילד-של-האריח: .kpi.glass נושא backdrop-filter, וכל filter/backdrop-filter
   על-אב יוצר containing-block ל-position:fixed → "fixed" היה מתנהג כמו absolute
   ונחתך ע"י overflow-x:auto של #console .grid.kpis. ילד-ישיר-של-body נמלט מזה. */
.kpi-pop {
  display: none;
  position: fixed; /* top/left מוזרקים ב-JS (toggleKpiPopover) לפי מיקום-האריח */
  transform: translateX(-50%);
  z-index: 45;
  width: 220px;
  max-height: 260px;
  overflow-y: auto;
  text-align: right;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r-3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--shadow-3);
  padding: var(--sp-3);
  font-size: 13px;
}
.kpi-pop.open {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .kpi-pop.open {
    animation: kpiPopIn var(--dur-2) var(--ease-out) both;
  }
  @keyframes kpiPopIn {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(6px) scale(0.96);
    }
  }
}
.kpi-pop b {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  letter-spacing: 0.3px;
}
.kpi-pop ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kpi-pop li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--stroke2);
}
.kpi-pop li:last-child {
  border-bottom: none;
}
.kpi-pop .st {
  color: var(--ink3);
  white-space: nowrap;
}

/* ===== 4 · פאנלים (.panel) — מדרג-עומק L1/L2/L3 ===== */
/* L2 · ברירת-מחדל: ריפוד (v3:34) + עומק (v4→--shadow-3) */
.panel {
  padding: var(--sp-4h) var(--sp-5); /* 22/24 → sp-4h/sp-5 */
  box-shadow: var(--shadow-3);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
/* כותרת-פאנל (v4:406-414) + תיקון-באג #1: justify-content:space-between
   שהמוקאפ השמיט → כותרת ו-<span class="sub"> נצמדו. משיב את הפיזור. */
.panel > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-family: var(--f-head);
  font-size: var(--t-title);
  font-weight: 700;
}
/* L3 · Hero — תור-הבקשות (:has(#qCount)) — טבעת+זוהר-אקסנט + פס-כותרת (v1:73-99) */
.panel.glass:has(#qCount) {
  padding: var(--sp-5);
  border-color: color-mix(in srgb, var(--ac) 45%, transparent);
  box-shadow:
    var(--shadow-3),
    0 0 0 1px var(--ac2),
    0 0 26px -6px var(--acGlow);
}
.panel.glass:has(#qCount) h3 {
  flex-wrap: wrap;
  font-size: var(--t-title-hero);
  font-weight: 700;
}
.panel.glass:has(#qCount) h3::after {
  content: "";
  order: 99;
  flex-basis: 100%;
  height: 3px;
  margin-top: var(--sp-1);
  border-radius: var(--r-pill);
  background: linear-gradient(to left, var(--ac) 44px, transparent 44px); /* 44px = אורך-מבטא */
}
/* L1 · Ambient — אירועים + נספחים: שקטים, שטוחים (v1:115-135) */
#eventsScheduleHost,
#appendixPanel {
  background: var(--glass2);
  border-color: var(--stroke2);
  box-shadow: none;
  padding: var(--sp-2) var(--sp-4);
}
#eventsScheduleHost h3,
#appendixPanel h3 {
  margin: 0;
  font-size: var(--t-title-amb);
  font-weight: 500;
  color: var(--ink2);
}
#eventsScheduleHost .panel,
#eventsScheduleHost > div {
  background: transparent;
  border: none;
  box-shadow: none;
}
/* איזון-שורות: פאזה-5 איחדה את שורות-ה-.grid.two ל-.grid.mgr4 — כללי-ה-two
   הוסרו (מתים); איזון-הגבהים מגיע מ-stretch ברירת-המחדל של grid. */

/* ===== 5 · לשוניות (.seg · .miniseg) + כפתור-primary ===== */
/* גדולות ומודגשות (v2:36-51). כלל-P0 (:root .seg button min-height:44) נשמר. */
.seg {
  padding: var(--sp-1);
  border-radius: var(--r-3);
}
.seg button {
  font-size: 15px; /* "לשונית-גדולה" מוקאפ — אין טוקן ל-15 */
  font-weight: 600;
  padding: 10px 22px; /* מידות-מוקאפ — אין טוקן מדויק ל-10/22 */
  border-radius: var(--r-2);
}
/* מצב-פעיל אינדיגו + זוהר (v1:158-164 + v2:47-51) — כהה */
.seg button.active {
  background: var(--ac2);
  color: var(--ac);
  box-shadow:
    inset 0 0 0 1px var(--ac),
    0 0 18px -4px var(--acGlow);
}
/* תיקון-באג #3: זוהר-אינדיגו למצב-פעיל בבהיר — גובר על styles.css:2540
   (ספציפיות-שווה, נטען אחרי) ומשתמש ב---acGlow הבהיר. */
[data-theme="light"] .seg button.active,
[data-theme="light"] .miniseg button.on {
  box-shadow:
    inset 0 0 0 1px var(--ac),
    0 0 18px -4px var(--acGlow);
}
/* miniseg — v4:448-454. !important מכוון: דורס את base-!important/הספציפיות-הגבוהה
   של .miniseg.metric button.on כדי לאחד את כל הטוגלים לאינדיגו (DNA חוק-5).
   זה ה-!important היחיד בקובץ, החריג המאושר. */
.miniseg button.on {
  background: var(--ac2) !important;
  background-image: none !important;
  color: var(--ac) !important;
  border-color: color-mix(in srgb, var(--ac) 45%, transparent) !important;
}
/* מועצת-פאזה-1 תיקון B: טוגל-הקבוצה (attendance.js:273 .chip.on) פוספס
   באיחוד-האינדיגו. #console .chip.on (1,2,0) גובר גם על .chip.on הבסיסי
   וגם על override-הבהיר (0,3,0) — בשני המצבים, בלי !important. */
#console .chip.on {
  background: var(--ac2);
  color: var(--ac);
  border-color: color-mix(in srgb, var(--ac) 45%, transparent);
}
/* כפתור-primary אקסנט (v1:165-169) — בכהה; בבהיר גובר גרדיאנט-הבסיס הספציפי */
.btn.primary {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--acInk);
}

/* ===== 6 · לוח-מיני (.cal-cell) ===== */
/* תא-יום = ניווט (v2:104-116) */
#miniCalHost .cal-cell[data-calday] {
  cursor: pointer;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
#miniCalHost .cal-cell[data-calday]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--ac),
    0 6px 14px -6px var(--acGlow);
}
/* מילוי-רגוע (v4:468-479). תיקון-באג #4: theme-qualified —
   כהה תחת :root:not([data-theme="light"]) (ספציפיות מספיקה, בלי !important);
   בהיר תחת [data-theme="light"] בשימוש חוזר ב---tint-green/red (מכוונן-AA). */
:root:not([data-theme="light"]) .cal-cell.cal-green {
  background: rgba(52, 211, 153, 0.09);
  border: 1px solid rgba(52, 211, 153, 0.22);
}
:root:not([data-theme="light"]) .cal-cell.cal-red {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.28);
}
[data-theme="light"] .cal-cell.cal-green {
  background: var(--tint-green);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}
[data-theme="light"] .cal-cell.cal-red {
  background: var(--tint-red);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
}
/* היום → מבטא-אקסנט (גם border וגם outline-הבסיס:1888 מוחלפים ל---ac) */
.cal-cell.cal-today {
  border-color: var(--ac);
  outline-color: var(--ac);
}

/* ===== 7 · מרווחים · ייצוא · footer · פס-גלילה · גרפים ===== */
/* ריתמוס אנכי (v4:4-24) */
.export-bar {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
/* תיקון-עידן 18.7 (#2): display:flex דרס את [hidden] — סרגל-הדיאגרמה (לילך/שבוע/PDF/Excel)
   דלף לכל הלשוניות ונראה כ"כפילות-ייצוא" מתחת לקונסולה. */
.export-bar[hidden] {
  display: none;
}
/* T57: אותו דפוס — .ctl-group{display:flex} דורס [hidden] (קבוצת ניווט-החודשים/היום בתורנויות) */
.ctl-group[hidden] {
  display: none;
}
:not(.grid, .console-grid, .col) > .panel + .panel {
  margin-top: var(--sp-5);
}
.util-footer {
  margin-top: var(--sp-5);
}
.wrap {
  padding-bottom: var(--sp-6);
}
.panel > :last-child {
  margin-bottom: 0;
}
/* פאריטי G12 (18.7): רווחי-18 של הסנדבוקס (v3:16-24 "רווחים — הפעם באמת"; ליטרל, אין טוקן-18) */
.console-grid,
.col,
.grid.mgr4,
#console .grid.kpis {
  gap: 18px;
}
/* פאריטי G13 (18.7): עמודת-הצד דביקה — בלי בור-מתים בגלילה (v1:150-156) */
.console-grid {
  align-items: start;
}
.col-sec {
  position: sticky;
  top: var(--sp-3);
}
/* תקרית אדם לוסטיג (19.8): ב-≤980px הרשת קורסת לעמודה-אחת (styles.css) — עמודה
   דביקה ננעצת לראש-המסך ופאנלי-המנהל (מאוחרים ב-DOM, stacking-context מ-backdrop-filter)
   נגללים מעליה ומכסים את תור-הבקשות. הדביקות היא דפוס-דו-טור בלבד. */
@media (max-width: 980px) {
  .col-sec {
    position: static;
  }
}
/* פס-גלילה דק-אינדיגו (v4:218-231) */
.panel ::-webkit-scrollbar {
  width: 8px; /* רוחב-פס — ליטרל */
}
.panel ::-webkit-scrollbar-track {
  background: transparent;
}
/* תיקון-עידן 18.7 (#1ב): הפס מופיע רק באינטראקציה (hover/focus על אזור-הגלילה) —
   קירוב-CSS ל"רק בזמן גלילה"; מיישר את חוסר-העקביות מול פסי-macOS הנעלמים. */
.panel ::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--r-1);
}
.panel :is(:hover, :focus-within)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ac) 28%, transparent);
}
.panel * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ac) 30%, transparent) transparent;
}
/* גרפים מונוכרום-אינדיגו (v4:443-447) — :root מעלה ספציפיות מעל .fill.g/.fill.v
   (styles.css:668-672), במקום !important */
:root .track > .fill {
  background: var(--ac);
}

/* ===== 8 · תנועה-מופחתת ===== */
@media (prefers-reduced-motion: reduce) {
  /* .kpi מסונקצן בעקבות תיקון C — אחרת (0,1,0) מפסיד ל-(0,2,0) והביטול לא חל */
  #console .kpi,
  .panel {
    transition: none;
  }
  #console .kpi:hover {
    transform: none;
  }
  #miniCalHost .cal-cell[data-calday]:hover {
    transform: none;
  }
}

/* ===== 9 · פאזה-2: מיתוג ATLAS + טופס-נספחים ===== */
/* מקור: sandbox v2:54-102 (מבנה) + v4:150-192 (מתכת-כסופה 31px + זוהר-אדום,
   הכרעת-עידן v6). בסיס .brand (styles.css:296) נשאר — flex/gap:11px. */
.brand-atlas .atlas-mark {
  width: 46px;
  height: 46px;
  flex: none;
  filter: drop-shadow(0 0 12px var(--ac2));
}
.atlas-mark line {
  stroke: var(--stroke);
  stroke-width: 1;
}
.atlas-mark .n1 {
  fill: var(--teal);
}
.atlas-mark .n2 {
  fill: var(--amber);
}
.atlas-mark .n3 {
  fill: var(--pink);
}
.atlas-mark .hub {
  fill: var(--ac);
}
.brand-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 9px; /* מידת-מוקאפ — אין טוקן */
}
/* ATLAS — מתכת-כסופה + זוהר-ליבה אדום (v4). ליטרלים = מתכון-הגרדיאנט המאושר. */
.brand-row b {
  font-family: var(--f-mono);
  font-size: 31px;
  font-weight: 800;
  letter-spacing: 0.3em;
  margin-inline-end: -0.3em; /* מועצת-P2: מבטל את רווח-האות-הנגרר אחרי ה-S — ‏ATLAS מיושר לקצה */
  background: linear-gradient(180deg, #dfe3ea 8%, #aab1bf 45%, #7d8494 78%, #99a0ae);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 66, 48, 0.28));
}
[data-theme="light"] .brand-row b {
  background: linear-gradient(180deg, #6a7180 5%, #3c4250 55%, #575e6d);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(200, 44, 32, 0.22));
}
.brand-dept {
  font-size: 15.5px;
  font-weight: 400;
  color: var(--ink2);
}
.brand-sub {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink3);
  margin-top: 1px;
}
/* קרדיט-יוצר (25.7 v2, משוב-עידן: הבלוק-מותג נהיה צפוף) — פינה שמאלית-תחתונה של הכותרת.
   מוסתר במסכים צרים (הכותרת מתקפלת ומתנגשת; הקרדיט קיים ממילא במסך-ההתחברות). */
header {
  position: relative;
}
/* א-7 (אישור-עידן 31.8): הסרגל-העליון דביק בדסקטופ — TV/מסכים גדולים לא מאבדים אותו
   בגלילה. נייד (≤640px) נשאר זורם: הסרגל שם נערם לגובה ~רבע-מסך, והצמדתו גוזלת את
   שטח-העבודה; חילוץ-הגלילה בנייד מכוסה ע"י א-6 (scrollRestoration).
   א-8 (משוב-עידן 31.8, הידוק): כרטיס צף מעוגל בשפת-הזכוכית הקיימת — var(--glass),
   רדיוס-16 (משפחת-הכרטיסים 12-18), מסגרת var(--stroke), צל-העומק של פס-הרענון.
   שורה אחת נמוכה: הסמל+הכיתוב inline (brand-row נשאר); כותרת-המשנה, הציטוט והקרדיט
   התלוי-מתחת יורדים בדסקטופ — הם שברו את גובה-השורה ואת קו-הכרטיס.
   z-index:30 — מעל התוכן, מתחת לכל המודאלים (z≥55) ולפס-הרענון (9200). */
@media (min-width: 641px) {
  header {
    position: sticky;
    top: 8px; /* כרטיס צף — נושם מהקצה גם כשדבוק */
    z-index: 30;
    gap: 14px;
    margin: 0 0 16px;
    padding: 6px 16px; /* רצפת-הגובה: min-height:44px של יעדי-מגע (a11y) — לא יורדים מתחתיה */
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: var(--glass);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  }
  /* הסמל בשתי צורותיו — ה-PNG המוזרק (emblem-mark, brand.js) וה-SVG-fallback (atlas-mark) */
  header .brand-atlas .atlas-mark,
  header .brand-atlas .emblem-mark {
    width: 30px;
    height: 30px;
  }
  /* הלשוניות הן רצפת-הגובה של השורה — הידוק קל בתוך הסרגל בלבד (א-8) */
  header .seg button {
    padding: 7px 13px;
    font-size: 13px;
  }
  header .brand-sub,
  header .brand-quote,
  header .brand-credit {
    display: none;
  }
  /* פס-הרענון הדביק (23.8) גלוי ⇒ הסרגל חוזר לזרימה — שני דביקים ב-top היו חופפים */
  body:has(#nf-banner:not([hidden])) header {
    position: static;
  }
}
.brand-credit {
  position: absolute;
  left: 2px;
  bottom: -8px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink3);
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .brand-credit {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .brand-atlas {
    animation: brandIn 0.6s var(--ease-out) both; /* 0.6s — אין טוקן תואם (--dur-slow=1200) */
  }
  @keyframes brandIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}
/* ===== 10 · פאזה-3: טבעות-KPI · שעון · אייקונים · ציטוט · שקיפות · סמל ===== */

/* --- 10א · טבעות-ספידומטר 270° (sandbox v3:73 + v4:27) --- */
/* נבנות בזנב renderKPIs באותו render (H2 — אפס קפיצה) ומתעדכנות בכל render (M6). */
#console .kgauge {
  position: relative;
  width: 98px;
  height: 98px;
  margin: 0 auto;
}
#console .kgauge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#console .kg-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 7;
}
[data-theme="light"] #console .kg-track {
  stroke: rgba(25, 29, 43, 0.12);
}
#console .kg-arc {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--ease-out);
  filter: drop-shadow(0 0 2.5px color-mix(in srgb, currentColor 50%, transparent));
}
[data-theme="light"] #console .kg-arc {
  filter: drop-shadow(0 0 2px color-mix(in srgb, currentColor 35%, transparent));
}
/* המספר נכנס למרכז-הטבעת. :is(רשימת-IDs) = ספציפיות (1,1,0) שגוברת על
   #kMain/#kPend (1,0,0) של סקשן-3 — בלי !important. */
#console .kgauge .num,
.kgauge :is(#kMain, #kOther, #kTotal, #kAppendix, #kRotation, #kPct, #kPend) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 22px; /* מידת-סנדבוקס בתוך טבעת-98px */
}
/* התווית יורדת מתחת לטבעת. font-size לא-נגוע — כלל-P0 (16px קריאוּת) גובר על 10.5 של הסנדבוקס. */
#console .kpi .kgauge ~ .lab {
  margin: var(--sp-2) 0 0;
}
@media (prefers-reduced-motion: reduce) {
  #console .kg-arc {
    transition: none;
  }
}

/* --- 10ב · שעון-שניות (M7) — אח של .date, פיל-מונו --- */
header .date {
  display: flex;
  align-items: center;
  gap: 10px; /* מידת-סנדבוקס */
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
}
#liveClock {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--stroke);
  border-radius: 9px; /* מידת-סנדבוקס — בין r-1 ל-r-2 */
  direction: ltr;
}
/* מועצת-P3: בבסיס ≤640px התאריך מוסתר במכוון (styles.css:1334, (0,1,0)) —
   הכלל החדש header .date (0,1,1) דרס אותו. משחזרים, כולל השעון-האח. */
@media (max-width: 640px) {
  header .date,
  #liveClock {
    display: none;
  }
}

/* --- 10ג · אייקוני-כותרת דרך data-icon (mask — שורד innerHTML-rewrites) --- */
/* flex-start + auto-margin על .sub: אייקון+כותרת צמודים בקצה-ההתחלה, ה-sub נשאר בקצה-הסוף
   (space-between עם 3 פריטים היה מפזר את הכותרת לאמצע). */
.panel > h3[data-icon] {
  justify-content: flex-start;
}
.panel > h3[data-icon] .sub {
  margin-inline-start: auto;
}
.panel > h3[data-icon]::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--ac);
  -webkit-mask: var(--icn) center / contain no-repeat;
  mask: var(--icn) center / contain no-repeat;
}
/* צורות (Lucide-style, stroke 1.7 — מקור: sandbox extras2:124) */
h3[data-icon="queue"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}
h3[data-icon="edit"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}
h3[data-icon="reasons"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
}
h3[data-icon="groups"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
h3[data-icon="absent"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='17' y1='8' x2='22' y2='13'/%3E%3Cline x1='22' y1='8' x2='17' y2='13'/%3E%3C/svg%3E");
}
h3[data-icon="appendix"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='16' y1='11' x2='22' y2='11'/%3E%3C/svg%3E");
}
h3[data-icon="table"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3C/svg%3E");
}
h3[data-icon="calendar"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
h3[data-icon="events"] {
  --icn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E");
}
/* אייקון-SVG במצבי-ריק (תיקון דליפת-🔍 + עידן #6 הגדלה) */
.empty .empty-ico {
  width: 22px;
  height: 22px;
  stroke: var(--ac);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -6px;
}

/* --- 10ד · ציטוט-מותג (עידן #5: אנגלית, מוגדל 11→12.5, שתי-שורות) --- */
.brand-quote {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0.62;
  max-width: 470px;
  overflow: hidden;
  margin-top: 2px;
}

/* --- 10ה · נגישות: ביטול-שקיפות (sandbox v4 §14). ה-!important מכוון:
   העדפת-נגישות חייבת לגבור על כל שכבות-הזכוכית.
   דה-קלטרינג 21.8 (הכרעת-עידן 6ב): כפתור-השקיפות הוסר; הכללים נשארים
   לתמיכת-OS ‏(prefers-reduced-transparency, למטה). --- */
/* מועצת-P3: הרג-blur גלובלי — משטחי-זכוכית מוזרקי-JS (Ask-Atlas, מודאל-דיאגרמה,
   notify, help, auth) מגדירים backdrop-filter משלהם; ההבטחה "ביטול טשטוש" חייבת
   לכסות גם אותם. (הרקעים שלהם נשארים שקופים-חלקית — פער מתועד.) */
[data-transparency="off"] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
[data-transparency="off"] .glass,
[data-transparency="off"] .panel.glass,
[data-transparency="off"] .kpi.glass {
  background-color: #1e1e22 !important;
}
[data-transparency="off"] .panel.glass::before,
[data-transparency="off"] .kpi.glass::before {
  display: none;
}
[data-transparency="off"] .emblem-bg {
  display: none;
}
[data-transparency="off"][data-theme="light"] .glass,
[data-transparency="off"][data-theme="light"] .panel.glass,
[data-transparency="off"][data-theme="light"] .kpi.glass {
  background-color: #ffffff !important;
}
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .panel.glass,
  .kpi.glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(30, 30, 34, 0.96);
  }
}

/* --- 10ו · סמל (עידן #7): ווטרמרק + סמל-כותרת + FAB (sandbox v4:233-312) --- */
.emblem-bg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}
.emblem-bg::before {
  content: "";
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 66, 48, 0.05), rgba(120, 20, 16, 0.03) 45%, transparent 70%);
}
.emblem-bg img,
.emblem-bg svg {
  width: 56vmin;
  height: 56vmin;
  opacity: 0.03;
}
.emblem-bg img {
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 48%, transparent 72%);
  mask-image: radial-gradient(circle, #000 48%, transparent 72%);
  filter: saturate(1.15);
}
.emblem-bg svg line {
  stroke: var(--ac);
  stroke-width: 1.2;
}
.emblem-bg svg circle {
  fill: var(--ac);
  stroke: none;
}
/* התאמת-בהיר (עידן #7): 3% → 4.5% + זוהר חום-עמום */
[data-theme="light"] .emblem-bg img,
[data-theme="light"] .emblem-bg svg {
  opacity: 0.045;
}
[data-theme="light"] .emblem-bg::before {
  background: radial-gradient(circle, rgba(180, 40, 30, 0.04), transparent 65%);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .emblem-bg img,
    .emblem-bg svg {
      animation: embDrift linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes embDrift {
  to {
    transform: translateY(-90px) rotate(5deg);
  }
}
.emblem-mark {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  filter: drop-shadow(0 0 12px var(--ac2));
  flex: none;
}
.fab-emblem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ===== 11 · פאזה-4: הרחבת-חדר בתוך-הרשת (sandbox v4 §15, מומש native) ===== */
/* הכרטיס-הנבחר במצב-inline: תופס 3 עמודות-רשת (2 בצר), טבעת-אקסנט, תוכן-הכרטיס
   המקורי מוסתר והפאנל-המוטמע (.dg-modal) מוצג static — בלי backdrop, בלי נעילת-גלילה. */
/* מועצת-P4 (HIGH): span-3 הקשיח יצר עמודת-רפאים 17px ברשתות צרות (repro אמפירי
   ב-375px) — 1/-1 תופס שורה-מלאה ונכון בכל רוחב-מכל, בלי media queries. */
#diagram .dg-card.dg-wide {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ac) 35%, transparent),
    0 14px 40px rgba(0, 0, 0, 0.4);
}
#diagram .dg-card.dg-wide > :not(.dg-modal) {
  display: none;
}
#diagram .dg-card.dg-wide .dg-modal {
  position: static;
  inset: auto;
  z-index: auto;
  /* תיקון-עידן 18.7 (#1): בלי תקרה ובלי גלילה-פנימית במצב-inline — הכרטיס גדל,
     הגלגל גולל את המסך-הראשי (מחסל את מלכודת-הגלילה). מסך-מלא לא מושפע. */
  max-height: none;
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#diagram .dg-card.dg-wide .dg-modal .dg-pane-body {
  overflow: visible;
}
/* תיקון-עידן 18.7 (#4): במצב-inline רשימות-הצד של הפאנל (לא-משובצים/משובצים/רזרבה)
   כפולות לפאנל-הצד של הלוח שנשאר גלוי — מסתירים אותן; במסך-מלא הן נשארות. */
#diagram .dg-card.dg-wide .dg-modal .dg-pane-side {
  display: none;
}
#diagram .dg-card.dg-wide .dg-modal .dg-pane-cols {
  grid-template-columns: 1fr;
}
.dg-fullbtn {
  margin-inline-end: 6px; /* מרווח-מוקאפ */
}
/* תזמון-מעבר אחיד — גלובלי, אבל vtRender של הדיאגרמה הוא צרכן-ה-VT היחיד
   (אומת). מודול עתידי שיאמץ VT יירש את התזמון.
   מועצת-P4: בזמן-האנימציה כרומיום מדכא hit-testing על ה-DOM החי (נבדק אמפירית —
   גם עם pointer-events:none) → קלט-עכבר מת לאורך האנימציה. לכן: 0.3s במקום
   0.45s של הסנדבוקס (מצמצם את החלון; מקלדת לא נחסמת). קריטי: רק פתיחה/סגירה/⛶
   עוברות ב-VT — שיבוץ/גרירה/מוטציות רצות render רגיל ולא מושפעות. */
::view-transition-group(*) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0.1, 1);
}
/* לא מזיק היום; אם כרומיום יתקן את ה-hit-testing — הקלט יחזור מיידית */
::view-transition {
  pointer-events: none;
}
/* מועצת-P4 (NIT): חיווי-גרירה על הפאנל-המוטמע — היעד-הפנימי הוא .dg-modal
   שאין לו כלל .over משלו */
#diagram .dg-card.dg-wide .dg-modal.over {
  box-shadow: inset 0 0 0 2px var(--ac);
  border-radius: var(--r-2);
}

/* ===== 12 · פאזה-5: רשת-מנהל + מצב-פוקוס (sandbox v2:112-163) ===== */
/* פאריטי G4 (18.7): grid-template-areas של הסנדבוקס (v1:194-218) — סיבות+קבוצה
   נערמים מימין, "חסרים" עמודה גבוהה על שתי שורות עם גלילה פנימית, והלוח-החודשי
   רוחב-מלא בשורה התחתונה (7 עמודות-ימים נושמות). */
.grid.mgr4 {
  /* minmax(0,·): מאפשר לעמודות לרדת מתחת ל-min-content — בלי זה הדו-טור גולש ב-390px */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas:
    "reasons abs"
    "groups abs"
    "cal cal";
  align-items: stretch;
}
.grid.mgr4 > .panel:has(#reasons) {
  grid-area: reasons;
}
.grid.mgr4 > .panel:has(#cutBars) {
  grid-area: groups;
}
.grid.mgr4 > #miniCalHost {
  grid-area: cal;
}
.grid.mgr4 > .panel:has(#absTable) {
  grid-area: abs;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#absTable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-inline-end: 4px;
}
/* מועצת-הפאריטי (18.7): איפוס-המובייל הוסר — הסנדבוקס שומר על הדו-טור (חסרים ‖ סיבות)
   והלוח-הרחב גם ב-390px; מצב-הפוקוס נשאר עם איפוס משלו למטה. */
/* כותרת-לחיצה (המיני-לוח מוחרג — הקליק שלו פותח את המודאל-החודשי הקיים) */
.grid.mgr4 > .panel:not(#miniCalHost) > h3 {
  cursor: pointer;
  user-select: none;
}
/* חץ-פוקוס ⤢/⤡ ב-::after — ::before תפוס ע"י אייקוני-data-icon (סקשן 10ג) */
.grid.mgr4 > .panel:not(#miniCalHost) > h3::after {
  content: "⤢";
  flex: none;
  font-size: 13px;
  color: var(--ink3);
  transition: color var(--dur-1) var(--ease-out);
}
.grid.mgr4 > .panel:not(#miniCalHost) > h3:hover::after {
  color: var(--ac);
}
.grid.mgr4 > .panel.expanded > h3::after {
  content: "⤡";
  color: var(--ac);
}
/* מצב-פוקוס: הפאנל-המורחב עולה לראש בשורה-מלאה, השאר נדחקים מתחת.
   פאריטי G4: מנטרלים גם את ה-areas — אחרת המיקומים-בשם גוברים על העמודה-האחת. */
.grid.mgr4:has(> .panel.expanded) {
  grid-template-columns: 1fr;
  grid-template-areas: none;
}
/* !important מוצדק: שיוכי-ה-areas הם (1,3,0) בגלל :has(#id) — איפוס-מצב-הפוקוס חייב לגבור */
.grid.mgr4:has(> .panel.expanded) > * {
  grid-area: auto !important;
}
.grid.mgr4 > .panel.expanded {
  order: -1;
  box-shadow:
    var(--shadow-3),
    0 0 0 1px var(--ac2);
}
/* תוכן ארוך בפאנל-מורחב נגלל פנימית (sandbox: 58vh) */
.grid.mgr4 > .panel.expanded :is(#reasons, #absTable, #cutBars) {
  max-height: 58vh;
  overflow: auto;
}
/* מועצת-P5 (MEDIUM): הגלילה-הפנימית של "חסרים" מוגבלת inline ל-400px
   (attendance.js:447) — בלי השחרור הזה ההרחבה לא מוסיפה שום גובה.
   !important מוצדק: נלחם ב-inline style. */
.grid.mgr4 > .panel.expanded #absTable .abs-scroll {
  max-height: none !important;
}
/* מועצת-P5 (NIT): חץ-הפוקוס של כותרת בלי .sub (נוכחות-לפי-קבוצה) נצמד לטקסט —
   auto-margin דוחף אותו לקצה כמו אצל האחיות (רק כשאין .sub, אחרת שני autos ימרכזו) */
.grid.mgr4 > .panel:not(#miniCalHost) > h3:not(:has(.sub))::after {
  margin-inline-start: auto;
}

/* נספחים: הטופס עבר מ-inline-style ל-CSS כדי ש-[hidden] יעבוד (inline גובר על UA).
   #apxForm[hidden] (1,1,0) גובר על #apxForm (1,0,0). */
#apxForm {
  display: flex;
  gap: 6px; /* ערכי-ה-inline המקוריים — אין טוקן */
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#apxForm[hidden] {
  display: none;
}
/* כפתור-האמת בכותרת-האמביינט — קטן ושקט (מראה-ה-::after מהמוקאפ v1:140).
   min-height מבטל את ה-42px של .btn הבסיסי (מועצת-P2). */
#apxToggle {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ac);
  padding: 4px 10px;
  min-height: 0;
}
/* מועצת-P2: h3 עם 3 פריטי-flex פיזר את ה-sub לאמצע — auto-margin מקבץ
   כותרת+sub בקצה-ההתחלה ודוחק את הכפתור לקצה-הסוף (כמו שאר הפאנלים).
   margin-inline-start:0 מנטרל את ה-auto הגנרי של h3[data-icon] (סקשן 10ג) —
   אחרת שני auto-margins היו ממרכזים את ה-sub. */
#appendixPanel h3 .sub {
  margin-inline-end: auto;
  margin-inline-start: 0;
}

/* ===== 13 · איחוד-הרוסטר (עידן 18.7-ב): מצבת-T46 = הטבלה-התחתונה, בעיצוב-הסנדבוקס ===== */
/* rosterHost-התצוגתי בוטל; .rbar/.rpct/.rchip (sandbox v2) משמשים את עמודות-roster.js. */
#rosterSection .tbl th {
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ink3);
  border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
}
#rosterSection .tbl td {
  border-bottom: 1px solid var(--stroke2);
  padding: 10px 14px;
}
#rosterSection .tbl tbody tr {
  transition: background var(--dur-1) var(--ease-out);
}
#rosterSection .tbl tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] #rosterSection .tbl tbody tr:hover {
  background: rgba(25, 29, 43, 0.04);
}
#rosterSection summary h3[data-icon]::before {
  content: "";
  flex: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--ac);
  -webkit-mask: var(--icn) center / contain no-repeat;
  mask: var(--icn) center / contain no-repeat;
}

/* פאריטי G32: הכותרת-הסטטית של המצבת inline בתוך summary — יישור אנכי במקום flex */
#rosterSection summary h3[data-icon]::before {
  vertical-align: -3px;
  margin-inline-end: 6px;
}
.rbar {
  display: inline-block;
  width: 120px;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  vertical-align: middle;
  overflow: hidden;
}
[data-theme="light"] .rbar {
  background: rgba(25, 29, 43, 0.1);
}
.rbar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--ac), color-mix(in oklab, var(--ac), white 22%));
  transform-origin: 100% 50%;
}
/* PLAN v2 24.7: ה-animation הועבר לבלוק motion-gated + שער-boot (html:not(.settled)) —
   בלי העטיפה, הסלקטור החדש (0,2,2) היה גובר על ה-override של reduce (0,1,1) ומחזיר
   אנימציה למשתמשי הפחתת-תנועה. ה-replay שנעצר: roster.render על כל עריכת-רוסטר. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.settled) .rbar i {
    animation: barIn 0.9s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 55ms + 150ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rbar i {
    animation: none;
  }
}
@keyframes barIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.rpct {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  margin-inline-start: 8px;
}
.rtrend {
  font-size: 14px;
}
.rtrend.up {
  color: var(--green);
}
.rtrend.dn {
  color: var(--red, #f87171);
}
.rtrend.fl {
  color: var(--ink3);
}
.rchip {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
}
.rchip.ok {
  color: var(--on-green, #86e9c4);
  background: var(--tint-green, rgba(52, 211, 153, 0.16));
}
.rchip.away {
  color: var(--on-amber, #fcd577);
  background: var(--tint-amber, rgba(251, 191, 36, 0.16));
}
.rchip.res {
  color: var(--on-violet, #c7b6fb);
  background: var(--tint-violet, rgba(167, 139, 250, 0.16));
}

/* ===== 12 · T56: מצב-מסך-גדול (69″) — כפתור-כותרת ב-theme.js (bigscreenToggle).
   zoom ולא font-size-שורש: כל הפונטים px (133 הגדרות) — שורש לא משפיע; zoom מגדיל
   הכל פרופורציונלית, וכבוי = זהות-פיקסל מלאה להיום (אפס-סיכון-פאריטי).
   ה-zoom על .wrap ולא על html (מועצת-התוכנית #1, אומת אמפירית): פופאוברים ממוקמי-rect
   (nf-panel/docPickerPanel/hp-pop/fb-popover) נטועים ב-body מחוץ לעטיפה — zoom-שורש
   הכפיל להם את הקואורדינטות (היסט 78px+); מחוץ לעטיפה הם ממוקמים 1:1 נכון.
   מודאלים (.overlay>.modal) ממורכזי-flex ⇒ zoom עצמי בטוח ושומר פרופורציה. ===== */
/* באג לילך/עידן 3.9: zoom מכפיל גם יחידות-viewport — 92vh×1.25 = 115vh ⇒ המודאל גבוה/רחב
   מהמסך, ממורכז-flex ⇒ הקצה-העליון (שורת-השליטה + החיפוש של הלוח-החודשי) נחתך מעל המסך.
   הפקטור חשוף כ---bigzoom (מקור-אחד) וכל מידת-viewport של מודאל מחולקת בו:
   calc(92vh / var(--bigzoom, 1)) — מצב-רגיל: לא מוגדר ⇒ /1 ⇒ זהות-פיקסל. */
html[data-bigscreen="on"] {
  --bigzoom: 1.25;
}
html[data-bigscreen="on"] .wrap {
  zoom: var(--bigzoom);
}
html[data-bigscreen="on"] .overlay > .modal {
  zoom: var(--bigzoom);
}
/* הכפתור שייך למסכים גדולים (69″/1920+); מתחת ל-1500px כפתור-רביעי מגלה יתום-גלישה
   בכותרת (נמדד: חסר 40px ב-1440) — מוסתר שם, והכותרת נשארת זהת-בסיס.
   מועצה-A2: מוסתר רק כשהמצב כבוי — כשה-zoom דלוק הכפתור נשאר, שלא יינעל בלי כיבוי. */
@media (max-width: 1499px) {
  html:not([data-bigscreen="on"]) #bigscreenToggle {
    display: none;
  }
}

/* ===== 13 · T53: שורת-מדדים-משנית (הכרעת-עידן ש6א: אריחי-glass מוקטנים, בלי
   טבעות, תצוגה-בלבד). נצמדת מעט לשורת-ה-KPI שמעליה; אותה שפה, מידות מוקטנות. ===== */
#console .grid.kpis.kpis-sub {
  grid-template-columns: repeat(5, 1fr);
  margin-top: -8px;
}
#console .kpis-sub .kpi {
  min-height: 0;
  padding: 10px 12px;
}
#console .kpis-sub .kpi .num {
  font-size: 22px;
}

/* ===== 14 · תוספת-עידן (18.7): הדגשת סופ"ש בלוח-התורנויות — שישי≠שבת, שני גוונים.
   הסימון: דקורטור app.js (markScheduleWeekends); המודול הקפוא לא נגוע.
   עמודת-התאריך = גוון-מלא; שאר-התאים = שכבת-tint דרך background-image, כדי לא
   לדרוס צבעי-מצב של משבצות (פנוי/מאויש). ===== */
/* מועצה-B1: daycol היא sticky עם רקע כמעט-אטום — שכבת-image ולא החלפת-background,
   שהאטימות תישרד גלילה-אופקית. מועצה-B4: color-mix עם הטוקנים — מתחלף נכון ב-light. */
#schedule tr.sched-fri > td.sched-daycol,
#schedule .sched-day.sched-fri {
  background-image: linear-gradient(
    var(--tint-blue, rgba(96, 165, 250, 0.14)),
    var(--tint-blue, rgba(96, 165, 250, 0.14))
  );
}
#schedule tr.sched-sat > td.sched-daycol,
#schedule .sched-day.sched-sat {
  background-image: linear-gradient(
    var(--tint-violet, rgba(167, 139, 250, 0.16)),
    var(--tint-violet, rgba(167, 139, 250, 0.16))
  );
}
#schedule tr.sched-fri > td:not(.sched-daycol) {
  background-image: linear-gradient(
    color-mix(in srgb, var(--tint-blue, rgba(96, 165, 250, 0.14)) 50%, transparent),
    color-mix(in srgb, var(--tint-blue, rgba(96, 165, 250, 0.14)) 50%, transparent)
  );
}
#schedule tr.sched-sat > td:not(.sched-daycol) {
  background-image: linear-gradient(
    color-mix(in srgb, var(--tint-violet, rgba(167, 139, 250, 0.16)) 50%, transparent),
    color-mix(in srgb, var(--tint-violet, rgba(167, 139, 250, 0.16)) 50%, transparent)
  );
}

/* ===== 13 · דיון-UI-נייד (הכרעת-עידן 19.8): פאנלי-קונסולה משניים מקופלים ===== */
/* בנייד (≤640, שבירת-הטלפונים של גל-1) שבעת פריטי-הקונסולה המשניים מקופלים
   לכותרת והקשה פותחת — app.js מסנכרן m-fold/m-closed בכניסה למסך-צר. מעל 640
   ה-media כבוי ו-app.js מנקה classes/ARIA ניידים (כולל אחרי סיבוב-מכשיר). */
@media (max-width: 640px) {
  .m-fold > h3,
  .m-fold > .dg-sumh,
  .m-fold > .dg-daynotes-h {
    cursor: pointer;
    user-select: none;
  }
  .m-fold.m-closed > :not(h3):not(.dg-sumh):not(.dg-daynotes-h) {
    display: none;
  }
  /* דליפת-ספציפיות (נתפס ב-e2e-mobile 21.8): הכללים המוזרקים של הדיאגרמה נושאים
     ID ‏(#diagram .dg-sumlist{display:flex}, ‏1-1-0) וגברו על כלל-ההסתרה הכיתתי —
     מקטע-צד "סגור" הציג את תוכנו מתחת לכותרת המקופלת. תאום-ID מיישר. */
  #diagram .m-fold.m-closed > :not(h3):not(.dg-sumh):not(.dg-daynotes-h) {
    display: none;
  }
  /* כפתור-ההוספה של הנספחים חי בתוך ה-h3 — בקיפול הטופס מוסתר, אז גם הוא */
  .m-fold.m-closed #apxToggle {
    display: none;
  }
  /* שברון במקום חץ-הפוקוס ⤢ — מצב-הפוקוס הוא מחוות-דסקטופ (app.js מגדר אותו בנייד);
     כפל-הסלקטור נדרש כדי לגבור על (1,2,1) של כלל-ה-⤢ הבסיסי (סקשן 12) */
  .m-fold > h3::after,
  .m-fold > .dg-sumh::after,
  .m-fold > .dg-daynotes-h::after,
  .grid.mgr4 > .panel:not(#miniCalHost) > h3::after {
    content: "▾";
    flex: none;
    margin-inline-start: auto;
    color: var(--ink3);
  }
  .m-fold.m-closed > h3::after,
  .m-fold.m-closed > .dg-sumh::after,
  .m-fold.m-closed > .dg-daynotes-h::after,
  .grid.mgr4 > .panel.m-closed:not(#miniCalHost) > h3::after {
    content: "▸";
  }
}

/* ===== 14 · דה-קלטרינג-נייד (הכרעות-עידן 21.8) — נייד בלבד (≤640), אפס-נגיעה בדסקטופ.
   עיקרון: כלום לא נמחק — רק מכווץ/מוסתר עם דרך-גישה (גילוי-ייצוא, פופאובר-KPI). ===== */
/* (3) כפתור-הגילוי של סרגל-הייצוא — קיים ב-markup, מוסתר בדסקטופ (הסרגל נשאר inline) */
.export-toggle {
  display: none;
}
@media (max-width: 640px) {
  /* (1) בלוק-מותג → שורה קומפקטית אחת: לוגו מוקטן + ATLAS בלבד */
  .brand-dept,
  .brand-sub,
  .brand-quote,
  .brand-credit {
    display: none;
  }
  .brand-atlas .atlas-mark,
  .brand-atlas .emblem-mark {
    width: 28px;
    height: 28px;
  }
  .brand-row b {
    font-size: 20px;
  }
  /* (4) מתג-התמה מצטרף לשורת-האייקונים: פריסת-השורות בכותרת נקבעת לפי flex-basis
     (לפני כיווץ) — שם-המחובר עם basis-תוכן דחף את המתג לשורה משלו. ‏basis-אפס
     מכניס את כולם לשורה אחת; השם גדל אח"כ לרוחב-הפנוי בלבד (ellipsis שלו נשמר). */
  #atlasWho {
    flex: 1 1 0;
    min-width: 0;
  }
  /* (5) חמש הלשוניות בשורה אחת — היפוך גלישת-גל-1 ע"י הקטנה במקום שבירה;
     overflow-x כרשת-ביטחון למסכים צרים מ-360 (בעברית RTL הקצה הנגלל נגיש). */
  .seg {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .seg button {
    padding: 10px 4px;
    font-size: 12px;
    gap: 4px;
    white-space: nowrap;
  }
  .seg .dot {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
  }
  /* (2) אריחי-KPI → צ'יפים קומפקטיים: 3 בשורה, מספר+תווית בלבד. טבעות-הספידומטר
     (renderKPIGauges, restructure §10א) מוסתרות — המספר חוזר לזרימה רגילה.
     ה-IDs והפופאוברים (data-kpi-pop) לא נגועים — kpiPop ממוקם לפי rect ההקשה. */
  /* ליטוש 21.8 (עידן 14:43): 4-בשורה לראשית (7 = ‏4+3, בלי שורת-יתום) ·
     3-בשורה למשנית (5 = ‏3+2) · צ'יפים קטנים יותר.
     סבב-סופי (עידן 14:56): grid-auto-rows:1fr = כל השורות בגובה-השורה-הגבוהה —
     צ'יפים אחידים; תת-פירוט-הרזרבה מוסתר (נשאר נגיש בפופאובר-ההקשה). */
  /* מיני-סבב (עידן): בדיוק שתי שורות — ראשית (7) ומשנית (5), כל אחת נגללת-אופקית
     בתוך עצמה (הגלילה מוכלת בשורה; הדף לא נגלל לרוחב). scroll-snap עדין.
     ‏scrollbar-width נתמך רק מ-Chrome 121 — באנדרואיד ישן ::-webkit-scrollbar
     (כל כרומיום) מסתיר; דעיכה: פס דק, שמיש. גבהים אחידים: flex-stretch. */
  #console .grid.kpis {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    margin-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #console .grid.kpis::-webkit-scrollbar {
    display: none;
  }
  #console .grid.kpis.kpis-sub {
    margin-top: 0;
  }
  #console .kpi .lab {
    white-space: nowrap; /* תווית בשורה-אחת ⇒ צ'יפים שווי-גובה; רוחב-הצ'יפ גדל לפי התווית */
  }
  #console #kRotationSub {
    display: none;
  }
  #console .kpi {
    flex: 0 0 auto;
    min-width: 78px;
    min-height: 0;
    padding: 6px 8px;
    scroll-snap-align: start;
  }
  #console .kpi .lab {
    font-size: 9.5px;
    margin-bottom: 2px;
  }
  #console .kpi .num {
    font-size: 15px;
  }
  #console .kgauge {
    width: auto;
    height: auto;
    margin: 0;
  }
  #console .kgauge svg {
    display: none;
  }
  #console .kgauge .num,
  .kgauge :is(#kMain, #kOther, #kTotal, #kAppendix, #kRotation, #kPct, #kPend) {
    position: static;
    display: block;
    font-size: 15px;
  }
  #console .kpi .kgauge ~ .lab {
    margin: 0;
  }
  /* ליטוש 21.8 (עידן 14:43): טיפוגרפיית-קונסולה כללית קומפקטית — כותרות-פאנל,
     תוויות ופדינג מכווצים ליחס-מסך-נייד. דסקטופ לא נגוע (בתוך ה-media). */
  .panel {
    padding: 12px;
  }
  .panel h3 {
    font-size: 13.5px;
    margin-bottom: 10px;
  }
  .panel h3 .sub {
    font-size: 11px;
  }
  .ctl-lab {
    font-size: 11px;
  }
  /* רצפות-P0 של טקסט-נתונים (16px "בוס קורא") — מכווצות בנייד בלבד */
  :root .tag {
    font-size: 12px;
    padding: 4px 9px;
  }
  :root .stchip {
    font-size: 12px;
  }
  :root .empty {
    font-size: 12.5px;
    padding: 10px 0; /* סבב-סופי: מצב-ריק רזה (היה 26px) */
  }
  /* תור-הבקשות (נפתח מהקשת "בקשות ממתינות" / #queue) + אריחי-עריכת-סטטוס
     (.req.edit-tile) — כרטיסים קומפקטיים. קידומת :root נדרשת: רצפות-P0 של
     הדסקטופ (styles.css §P0, ‏16px/44px "בוס קורא") נושאות :root וגוברות אחרת;
     כאן, בתוך ה-media, מתאימים ספציפיות והמאוחר גובר — הדסקטופ לא נגוע. */
  .req {
    gap: 8px;
    padding: 9px 2px;
  }
  .av {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  :root .req .info .l1 {
    font-size: 12.5px;
  }
  :root .req .info .l2 {
    font-size: 11px;
  }
  :root .datechip {
    font-size: 10.5px;
    padding: 3px 7px;
    min-height: 30px;
  }
  /* הפאנל-ההירו של התור — פדינג וכותרת קומפקטיים. תאימות-אנדרואיד (21.8):
     ‏:has() נכשל שקט לפני Chrome 105 — app.js מתייג .queue-panel ב-boot במקומו.
     קידומת #console: (1,3,x) גובר על כלל-ההירו הבסיסי :has(#qCount) = (1,2,x). */
  #console .panel.glass.queue-panel {
    padding: 12px;
  }
  #console .panel.glass.queue-panel h3 {
    font-size: 13.5px;
  }
  /* כפתורי אשר/דחה בכרטיס-בקשה: 36px — קומפקטי אך עדיין יעד-הקשה סביר */
  #queue .btn {
    font-size: 12px;
    min-height: 36px;
    padding: 6px 10px;
  }
  /* (3) סרגל-הייצוא מאחורי גילוי-יחיד: מוסתר עד הקשה על הכפתור (app.js מטגל .open) */
  .export-toggle {
    display: inline-flex;
    margin-inline-start: auto;
    font-size: 12px;
    padding: 6px 10px;
  }
  .controlbar .export-bar {
    display: none;
  }
  .controlbar .export-bar.open {
    display: flex;
    flex: 1 1 100%;
  }
  /* ===== סבב-סופי (עידן 14:56) ===== */
  /* מתג "מציג" (נוכחים/חסרים) מוסתר בנייד בלבד — הפיצ'ר לא נמחק (דסקטופ מציג;
     פופאוברי-ה-KPI עונים בנייד על "מי חסר"). */
  /* תאימות-אנדרואיד (21.8): בלי :has() — app.js מתייג .has-metric-toggle ב-boot */
  #console .ctl-group.has-metric-toggle {
    display: none;
  }
  /* סרגל-הבקרה = שורה אחת: תאריך + כפתור-הייצוא. קבוצת-התאריך מוותרת על
     רוחב-מלא; תווית "תאריך" מוסתרת (התאריך עצמו מדבר); סרגל-הייצוא הפתוח
     גולש לשורה משלו (flex-basis:100% למעלה — ה-wrap של הסרגל נשאר). */
  #console .controlbar .ctl-group {
    width: auto;
    flex: 0 1 auto;
  }
  #console .controlbar .ctl-lab {
    display: none;
  }
  .period .lab {
    min-width: 70px;
    font-size: 12.5px;
  }
  /* "עריכת סטטוס" רזה: שורת-חיפוש ומצב-ריק מכווצים (דריסת רצפות-P0 בנייד בלבד) */
  :root #editSearch.people-search {
    font-size: 13px;
    min-height: 38px;
    padding: 8px 10px;
  }
  .empty .empty-ico {
    width: 16px;
    height: 16px;
  }
  /* שטח-מת: ריווחי-שלד מכווצים — ריפוד-עטיפה, כותרת, מרווחי-רשתות ופוטר */
  .wrap {
    padding: max(12px, env(safe-area-inset-top)) 12px 40px;
  }
  header {
    gap: 8px;
    margin-bottom: 10px;
  }
  .controlbar {
    margin-bottom: 10px;
  }
  .console-grid,
  .col,
  .grid.mgr4 {
    gap: 10px;
  }
  .util-footer {
    margin-top: 12px;
  }
}