/* styles.css — כל כללי-ה-CSS; צבעים אך ורק דרך var() (spec-design §ב). RTL, דסקטופ-בלבד ≥1280px. */

/* א9 · `font-display: block` ולא `swap` — הפונט יושב **על הדיסק** (אפס רשת),
   ולכן ה-swap מגן מפני סיכון שאינו קיים כאן ורק קונה הבהוב פונט-מערכת→Assistant
   בפתיחה. `block` מצייר פעם אחת בפונט הנכון; חלון-ההשהיה שלו זניח מקובץ מקומי.
   ⚠️ זו החלטת-איכות-פתיחה בלבד — **לא** תיקון-CLS: נמדד שגלילת-טאב-המקורי
   נותנת אפס-הזזה בשני המצבים (הקופסאות שמורות ב-aspect-ratio). */
@font-face {
  font-family: "Assistant";
  src: url("assets/fonts/assistant-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Assistant";
  src: url("assets/fonts/assistant-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Assistant";
  src: url("assets/fonts/assistant-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

* { box-sizing: border-box; }

html {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  font-weight: 400;
}

/* עברית תחילה — RTL לוגי מקצה-לקצה, אין CAPS */
[dir="rtl"] body { text-align: right; }

/* בידוד-כיוון — טלפון/מייל/ח.פ/נתיבים (spec-design §ג) */
bdi, .ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* מספרים — יישור-ספרות אנכי בטבלאות ומונים */
.tabular, table, .counter {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--lh-head); }

/* סולם-טיפוגרפיה (spec-design §ג) */
.text-area-title  { font-size: var(--fs-24); font-weight: 600; }   /* כותרת-אזור */
.text-card-title   { font-size: var(--fs-20); font-weight: 600; }  /* כותרת-כרטיס */
.text-section-title{ font-size: var(--fs-17); font-weight: 600; }  /* כותרת-סעיף */
.text-body         { font-size: var(--fs-15); font-weight: 400; }  /* גוף */
.text-table        { font-size: var(--fs-14); line-height: var(--lh-table); } /* טבלאות/צ'יפים */
.text-caption      { font-size: var(--fs-13); color: var(--text-2); } /* עזר/כיתוב */
.text-micro        { font-size: var(--fs-12); color: var(--text-2); } /* מיקרו — חותמות-יומן */
.text-strong       { font-weight: 700; } /* רק מספרי-רמה וסכומים-ראשיים */

a { color: var(--primary); }

/* פוקוס-מקלדת נראה בכל קליקבילי (spec-design §ד/§ח) */
button, a, [tabindex], input, select, summary {
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.topbar-nav-item:focus,
.data-table tbody tr:focus,
[data-table-scroll]:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ring);
}
input, select { cursor: auto; }

/* ===== אייקונים ===== */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  flex-shrink: 0;
}
.icon-sm { width: 16px; height: 16px; }
.icon-filled { fill: currentColor; }

/* היפוך-כיוון לחיצים ב-RTL (chevron-left/right מתהפכים) */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ===== רכיבי-בסיס (spec-design §ד) ===== */

/* כפתור ראשי */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 36px;
  padding: 0 var(--s4);
  border-radius: var(--r-ctrl);
  font-family: var(--font);
  font-size: var(--fs-14);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}

/* כפתור משני / ghost */
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-2); }

/* כפתור הרסני */
.btn-danger-ghost {
  background: transparent;
  color: var(--danger);
  border-color: transparent;
}
.btn-danger-ghost:hover { background: var(--danger-bg); }
.btn-danger-solid {
  background: var(--danger);
  color: var(--on-primary);
}

/* כפתור-אייקון בלבד */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-ctrl);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  transition: background var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* קלט/בורר */
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field-label {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-2);
}
.field input[type="text"],
.field input[type="search"],
.field input[type="number"],
.field select,
.field textarea {
  height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-14);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--ring);
  outline-offset: -1px;
  border-color: var(--primary);
}
.field-error input, .field-error select {
  border-color: var(--danger);
}
.field-error-msg {
  color: var(--danger);
  font-size: var(--fs-13);
}

/* צ'יפ-תג */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  height: 24px;
  padding: 0 var(--s3);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: 400;
}
.chip-filter {
  background: var(--primary-bg);
  color: var(--primary);
}
.chip-filter .icon-btn { width: 18px; height: 18px; }
.chip-clickable { cursor: pointer; }
.chip-clickable:hover { filter: brightness(0.97); }

/* תג-רמזור — נקודה + מילה */
.traffic {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-14);
  font-weight: 600;
}
.traffic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25);
  flex-shrink: 0;
}
.traffic-green .traffic-dot { background: var(--green-dot); }
.traffic-green { color: var(--green-text); }
.traffic-yellow .traffic-dot { background: var(--yellow-dot); }
.traffic-yellow { color: var(--yellow-text); }
.traffic-red .traffic-dot { background: var(--red-dot); }
.traffic-red { color: var(--red-text); }
.traffic-badge {
  padding: var(--s1) var(--s2);
  border-radius: var(--r-ctrl);
}
.traffic-badge.traffic-green { background: var(--green-bg); }
.traffic-badge.traffic-yellow { background: var(--yellow-bg); }
.traffic-badge.traffic-red { background: var(--red-bg); }

/* תג-דגל (ענבר) */
.flag-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-ctrl);
  background: var(--flag-bg);
  color: var(--flag-text);
  font-size: var(--fs-13);
  font-weight: 600;
}

/* תג-רמה — ניטרלי, בלי צבע-רמה */
.level-tag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s1);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-ctrl);
  background: var(--surface-2);
  color: var(--text);
}
.level-tag .level-num { font-weight: 700; }
.level-tag .level-name { font-weight: 400; color: var(--text-2); }

/* טאבים */
.tabs {
  display: flex;
  gap: var(--s5);
  border-bottom: 1px solid var(--border);
}
.tab {
  position: relative;
  padding: var(--s3) 0;
  background: none;
  border: none;
  color: var(--text-2);
  font-family: var(--font);
  font-size: var(--fs-14);
  font-weight: 400;
  transition: color var(--dur) var(--ease);
}
.tab-active {
  color: var(--text);
  font-weight: 600;
}
.tab-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--primary);
}
.tab-badge {
  display: inline-block;
  margin-inline-start: var(--s1);
  padding: 0 var(--s2);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
.tab-active .tab-badge { background: var(--primary-bg); color: var(--primary); }

/* טבלה */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  line-height: var(--lh-table);
}
[data-table-scroll] {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
[data-table-scroll]:focus { outline-offset: -2px; box-shadow: inset 0 0 0 2px var(--ring); }
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-2);
  font-weight: 600;
  text-align: right;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table th[aria-sort] { cursor: pointer; }
.data-table tbody tr { height: 40px; }
.data-table tbody td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary-bg) 40%, transparent); }
.data-table tbody tr.row-selected {
  background: var(--primary-bg);
  border-inline-start: 3px solid var(--primary);
}

/* Toast */
.toast {
  position: fixed;
  bottom: var(--s5);
  inset-inline-end: var(--s5);
  background: var(--text);
  color: var(--on-primary);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-ctrl);
  box-shadow: var(--shadow-toast);
  font-size: var(--fs-14);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s2);
  animation: toast-in var(--dur) var(--ease);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* דיאלוג / Overlay */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay-panel {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-overlay);
  animation: overlay-in var(--dur) var(--ease);
}
@keyframes overlay-in {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Tooltip */
.tooltip {
  position: absolute;
  background: var(--text);
  color: var(--on-primary);
  font-size: var(--fs-13);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-ctrl);
  z-index: var(--z-dropdown);
  white-space: nowrap;
  pointer-events: none;
}

/* ===== shell (spec §1.0) ===== */
#app-shell {
  min-height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.skip-link {
  position: fixed;
  inset-block-start: var(--s2);
  inset-inline-start: var(--s2);
  z-index: var(--z-toast);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-ctrl);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  transform: translateY(calc(-100% - var(--s4)));
}
.skip-link:focus { transform: translateY(0); }
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 56px;
  padding: 0 var(--s5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: calc(var(--z-sticky) + 1);
}
.topbar-brand {
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
/* א9 · הלוגו מוצג בגובה-קבוע והרוחב נגזר מיחס-התמונה (2552×1338 ≈ 1.91:1).
   `height:auto` **אסור** כאן — הוא היה משאיר את הקופסה תלויה בטעינה. */
.topbar-logo {
  height: 38px;          /* מתוך פס-כותרת של 56px — מנוצל, עם אוויר סביב */
  width: auto;
  display: block;
  flex: none;
}
/* קו-הפרדה עדין בין הלוגו לשם-הכלי: שני מותגים נפרדים (הקרן / הכלי), ובלי
   ההפרדה הם נקראים כמחרוזת אחת. */
.topbar-brand-text {
  padding-inline-start: var(--s3);
  border-inline-start: 1px solid var(--border);
}
.topbar-nav {
  display: flex;
  gap: var(--s3);
}
.topbar-nav-item {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-ctrl);
  background: none;
  border: none;
  color: var(--text-2);
  font-family: var(--font);
  font-size: var(--fs-14);
  font-weight: 600;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.topbar-nav-item:focus {
  outline-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
}
.topbar-nav-item.active {
  color: var(--primary);
  background: var(--primary-bg);
}
.topbar-spacer { flex: 1; }

.save-widget {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-13);
  color: var(--text-2);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-ctrl);
  background: var(--surface-2);
}
.save-widget.unsaved { color: var(--danger); background: var(--danger-bg); font-weight: 600; }

/* א8 · וידג'ט-השמירה = מחוון + פעולות (§1.0). קבוצה אחת בסרגל, כדי שהמצב
   והפעולה שמטפלת בו לא יתפצלו על המסך. */
.save-widget-wrap {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.save-widget-wrap .btn-sm {
  height: 28px;
  padding: 0 var(--s3);
  font-size: var(--fs-12);
}

/* א8 · באנרי-ההתמדה (§5.4/§5.5/§3). פס מלא-רוחב מתחת לפס-מצב-הדאטה —
   לא toast: הודעות-שמירה חייבות להישאר עד שהמצב משתנה. */
.persist-banner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s5);
  font-size: var(--fs-13);
  font-weight: 600;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.persist-banner .btn-sm {
  height: 26px;
  padding: 0 var(--s3);
  font-size: var(--fs-12);
  margin-inline-start: var(--s2);
}
.persist-banner.banner-danger { background: var(--danger-bg); color: var(--danger); }
.persist-banner.banner-warn   { background: var(--flag-bg);   color: var(--flag-text); }
.persist-banner.banner-info   { background: var(--primary-bg); color: var(--primary); }
.persist-banner.banner-ok     { background: var(--green-bg);  color: var(--green-text); }

/* R6 · ניתוק-שרת: הפקדים מושבתים בפועל (disabled), והחיווי הוויזואלי חייב
   להיות חד — עמעום-קל בלבד נקרא כ"נטען" ולא כ"חסום" (נתפס בצילום).
   הקריאה נשארת מלאה — רק ההזנה חסומה. */
#app-shell.input-locked #area-workspace,
#app-shell.input-locked #card-host { opacity: .55; }
#app-shell.input-locked #area-workspace input,
#app-shell.input-locked #area-workspace select,
#app-shell.input-locked #area-workspace button,
#app-shell.input-locked #card-host input,
#app-shell.input-locked #card-host select,
#app-shell.input-locked #card-host button {
  cursor: not-allowed;
  background: var(--surface-2);
}

.user-picker select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  font-family: var(--font);
  font-size: var(--fs-13);
  padding: 0 var(--s2);
}

/* פס-מצב-דאטה */
.data-stage-banner {
  padding: var(--s2) var(--s5);
  font-size: var(--fs-13);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}
.data-stage-banner.stage-dummy { background: var(--danger-bg); color: var(--danger); }
.data-stage-banner.stage-identity_only { background: var(--primary-bg); color: var(--primary); }

.app-main {
  flex: 1;
  min-width: 0;
  padding: var(--s5);
  overflow-x: clip;
}

/* מונה-כותרת */
.header-counter {
  font-size: var(--fs-24);
  font-weight: 600;
  margin-bottom: var(--s4);
  color: var(--text);
}

/* מסך-שגיאה (data.js חסר/פגום) */
.fatal-error-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s6);
  text-align: center;
}
.fatal-error-screen .icon { width: 40px; height: 40px; color: var(--danger); }
.fatal-error-screen h1 { font-size: var(--fs-20); }
.fatal-error-screen p { color: var(--text-2); max-width: 480px; }
.auth-shell form {
  width: min(100%, 360px);
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-toast);
  text-align: start;
}
.auth-shell {
  background: linear-gradient(180deg, var(--surface) 0, var(--bg) 46%);
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 600;
}
.auth-brand img { width: 58px; height: auto; display: block; }
.auth-supporting { margin: calc(var(--s3) * -1) 0 0; font-size: var(--fs-14); }
.auth-shell form input {
  height: 40px;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-15);
}
.auth-shell form input:focus {
  outline: 2px solid var(--ring);
  outline-offset: -1px;
  border-color: var(--primary);
}
.auth-shell form .btn { height: 40px; justify-content: center; }
.auth-progress {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-shell form .field { display: grid; gap: var(--s2); }
.auth-shell form input { width: 100%; }
.auth-shell [data-login-error] { min-height: 1.5em; margin: 0; color: var(--danger); }
.auth-shell form[aria-busy="true"] { opacity: .8; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

/* empty-state כללי */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s6);
  color: var(--text-2);
  text-align: center;
}
.empty-state .icon { width: 32px; height: 32px; color: var(--text-3); }

/* ===== כותרת מסך-העבודה: חיפוש · פילטרים · מתגים · מונה (spec §1.1.ב–ג) — א3ג ===== */
.workspace-header {
  display: flex;
  align-items: flex-end;
  gap: var(--s4);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}
.ws-search { min-width: 280px; }
.ws-header-spacer { flex: 1; }
.ws-count {
  font-size: var(--fs-14);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-bottom: var(--s2);
}

/* מתג-מצב (הצג פערים / הצג גם תואמים) — צ'קבוקס עם תווית גלויה */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-14);
  color: var(--text);
  cursor: pointer;
  padding-bottom: var(--s2);
  white-space: nowrap;
}
.toggle input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* פאנל-הפילטרים — גובה חסום וגלילה פנימית: 14 קבוצות-סינון גבוהות מהמסך, ובלי
   התקרה הזאת פתיחת-הפאנל דוחפת את הטבלה עצמה אל מתחת לקפל (נמצא בבדיקה-חזותית). */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--s4) var(--s5);
  padding: var(--s4);
  margin-bottom: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  max-height: 40vh;
  overflow-y: auto;
}
.filter-group { border: none; margin: 0; padding: 0; min-width: 160px; }
.filter-group legend {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-2);
  padding: 0 0 var(--s2);
}
.filter-opt {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-14);
  padding: 2px 0;
  cursor: pointer;
}
.filter-opt input { accent-color: var(--primary); cursor: pointer; }

/* פס-צ'יפי-הפילטר (ביקורת-נוחות #2) */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0;
}
.filter-chips:empty { margin: 0; }
.chip-remove {
  width: 18px;
  height: 18px;
  margin-inline-start: var(--s1);
  color: inherit;
}

/* כותרת-עמודה ממוינת */
.data-table th.th-sortable { cursor: pointer; user-select: none; }
.data-table th.th-sortable:hover { color: var(--primary); }
.data-table th[aria-sort="ascending"],
.data-table th[aria-sort="descending"] { color: var(--primary); }

/* עמודת-Δ במצב-פערים (§1.1.ג) — חץ + מספר + מילה; הצבע לעולם לא לבד */
.gap-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-13);
  font-weight: 600;
  white-space: nowrap;
}
.gap-delta-up { color: var(--green-text); }
.gap-delta-down { color: var(--red-text); }
.gap-delta-zero { color: var(--text-2); font-weight: 400; }

/* ‼️ `display:flex/grid` על אלמנט גובר על תכונת-`hidden` של HTML, והאלמנט מצויר
   למרות ש-JS "הסתיר" אותו. נתפס חזותית: פאנל-הפילטרים הסגור הופיע ככרטיס-לבן ריק.
   הכלל הזה מחזיר ל-`hidden` את משמעותו — לכל הרכיבים, בכל האבנים. */
[hidden] { display: none !important; }

/* ===== א3ד · מצב-דיון · העברות · בורר-משתמש · הגדרות (spec §1.0 · §1.1.ד–ה) ===== */

/* מד-העוגה — קומפקטי תמיד, מתרחב במצב-דיון (§1.1.ד) */
.budget-meter {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-13);
  color: var(--text-2);
  white-space: nowrap;
  padding-bottom: var(--s2);
  font-variant-numeric: tabular-nums;
}
.budget-meter-wide { flex-wrap: wrap; white-space: normal; max-width: 520px; }
/* א9 · "עוגת-התקציב טרם הוגדרה" הוא **מצב-מידע**, לא אזהרה: C11 הוא ערך-קונפיג
   שההנהלה טרם קבעה, ואין כאן שום דבר שהמשתמשת עשתה או צריכה לתקן. ב-`--flag-text`
   (כתום-אזהרה) הוא נקרא כתקלה ומשך את העין חזק יותר מהמונים שלידו. */
.budget-undefined { display: inline-flex; align-items: center; gap: var(--s1); color: var(--text-2); }
.budget-sub { color: var(--text-2); }
.budget-detail { color: var(--text-2); font-size: var(--fs-12); width: 100%; }
/* העוגה (donut) — החליפה את פס-ההתקדמות: הפס לא הראה "מתוך כמה" ובגדלים
   קטנים נראה ריק. הטבעת נושאת את האחוז במרכזה, ולצדה הסכומים. */
.budget-donut { display: inline-flex; flex: none; line-height: 0; }
.donut-track { stroke: var(--surface-2); }
.donut-fill { stroke: var(--primary); transition: stroke-dasharray 240ms ease; }
.donut-pct {
  font-size: 15px;
  font-weight: 600;
  fill: var(--text-1);
  font-variant-numeric: tabular-nums;
}
/* חריגה מעל 100%: הטבעת מלאה ואין לה לאן לגדול, ולכן הצבע לבדו לא יבחין בין
   100% מדויק ל-150%. הצבע הוא חיזוק — הנשיאה האמיתית היא ב-.budget-over
   הטקסטואלי לצדו (spec-design §ח: לא-צבע-בלבד). */
.budget-donut-over .donut-fill { stroke: var(--danger); }
.budget-donut-over .donut-pct { fill: var(--danger); }
/* שתי שורות לצד העוגה: הסכום הגדול, והיתרה שהוועדה מחליטה לפיה. */
.budget-figures { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.budget-line-main { color: var(--text-1); font-weight: 600; }
.budget-line-sub { color: var(--text-2); font-size: var(--fs-12); }
.budget-over {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--danger);
  font-weight: 600;
}

/* פס-פעולות של מצב-הדיון */
.discussion-bar {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

/* עמודת-סטטוס: שלושה כפתורים על השורה (§1.1.ד) */
.status-picker { display: inline-flex; gap: 2px; }
.status-btn {
  height: 26px;
  padding: 0 var(--s2);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: var(--fs-12);
  border-radius: var(--r-ctrl);
  cursor: pointer;
  white-space: nowrap;
}
.status-btn:hover { background: var(--surface-2); color: var(--text); }
.status-btn.status-on { font-weight: 700; }
.status-btn.status-approved.status-on { background: var(--green-bg); color: var(--green-text); border-color: var(--green-dot); }
.status-btn.status-reserve.status-on  { background: var(--flag-bg);  color: var(--flag-text);  border-color: var(--flag-text); }
.status-btn.status-rejected.status-on { background: var(--red-bg);   color: var(--red-text);   border-color: var(--red-dot); }

/* עמודת-סכום-מאושר: שדה-inline + הודעה צמודה (spec-design §ד) */
.amount-input-wrap { display: inline-flex; flex-direction: column; gap: 2px; }
.amount-input {
  width: 110px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  font-family: var(--font);
  font-size: var(--fs-13);
  padding: 0 var(--s2);
  color: var(--text);
  text-align: start;
  font-variant-numeric: tabular-nums;
}
.amount-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-bg); }
.amount-input-wrap.field-error .amount-input { border-color: var(--danger); }
.amount-msg { font-size: var(--fs-12); line-height: 1.2; }
.amount-msg-error { color: var(--danger); }
.amount-msg-warn { color: var(--flag-text); }

.stage-move-btn { height: 28px; font-size: var(--fs-12); padding: 0 var(--s2); }
.chip-noted { cursor: help; }

/* מצב-דיון מוסיף 3 עמודות (וביחד עם מצב-פערים — 15 סה"כ). ב-1280px זה חורג:
   נמדד שהטבלה הגיעה ל-1314px בתוך מארח 1232px, והעמודה האחרונה נחתכה בקצה
   (overflow-x:hidden *הסתיר* את החריגה במקום למנוע אותה). לכן במצב-דיון הטבלה
   מתהדקת: ריפוד קטן יותר, כותרות שנשברות-שורה (spec §0: "נשברות-שורה, לא
   נחתכות"), ופקדים צרים יותר. מדד-הקבלה נמדד על **רוחב-הטבלה בפועל**. */
.data-table.discussion-mode { font-size: var(--fs-13); }
.data-table.discussion-mode thead th,
.data-table.discussion-mode tbody td { padding: var(--s2) var(--s2); }
.data-table.discussion-mode thead th { white-space: normal; }
.data-table.discussion-mode .status-btn { padding: 0 6px; }
.data-table.discussion-mode .amount-input { width: 92px; }
.data-table.discussion-mode .chip { max-width: 100%; }

/* דיאלוג-אישור (#7 · §1.1.ה) */
.dialog-panel {
  min-width: 380px;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.dialog-body { color: var(--text-2); font-size: var(--fs-14); }
.dialog-actions { display: flex; gap: var(--s3); justify-content: flex-start; }
.stage-options { display: flex; flex-direction: column; gap: var(--s2); }
.radio-opt { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-14); cursor: pointer; }
.radio-opt input { accent-color: var(--primary); cursor: pointer; }
.bulk-controls { display: flex; gap: var(--s4); align-items: flex-end; }
.bulk-preview { border-top: 1px solid var(--border); padding-top: var(--s3); }
.bulk-rule { font-size: var(--fs-14); margin-bottom: var(--s2); }
.bulk-count { font-size: var(--fs-13); color: var(--text-2); margin-bottom: var(--s2); }
.bulk-list { margin: 0; padding-inline-start: var(--s5); font-size: var(--fs-13); max-height: 200px; overflow-y: auto; }
.bulk-empty { font-size: var(--fs-13); color: var(--text-2); }

/* בורר-משתמש + הגדרות ב-shell (§1.0) */
.user-picker { display: flex; align-items: center; gap: var(--s2); color: var(--text-2); }
.user-picker select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  font-family: var(--font);
  font-size: var(--fs-13);
  padding: 0 var(--s2);
  color: var(--text);
}
.user-picker select.user-unset { color: var(--text-2); border-style: dashed; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.settings-wrap { position: relative; }
.settings-popover {
  position: absolute;
  top: calc(100% + var(--s2));
  inset-inline-end: 0;
  width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-overlay);
  padding: var(--s4);
  /* מעל כותרת-הטבלה הדביקה: --z-dropdown(100) < --z-sticky(200), ולכן ה-popover
     נצבע *מתחת* לכותרת ונראה חתוך (נתפס בצילום-מסך, לא בטסט). ה-popover יוצא
     מהסרגל-העליון ולכן שייך לשכבת-ה-overlay מבחינת ערימה. */
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.settings-section { display: flex; flex-direction: column; gap: var(--s2); }
.settings-section h3 { font-size: var(--fs-15); font-weight: 600; }
.budget-row { display: flex; gap: var(--s3); align-items: flex-end; }
.budget-row .field input { width: 160px; }
/* הודעת-הוולידציה ריקה ברוב הזמן. בלי הכיווץ הזה ה-<p> הריק שומר מקום ופותח
   מרווח בולט בין השדה לשורת-ברירת-המחדל — נתפס בצילום-מסך, לא בטסט. */
#budget-msg { margin: var(--s1) 0 0; }
#budget-msg:empty { display: none; }
.c9-row { display: flex; gap: var(--s3); align-items: flex-end; }
.c9-row .field input { width: 80px; }
.evaluator-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.evaluator-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--fs-14);
  padding: var(--s1) var(--s2);
  background: var(--surface-2);
  border-radius: var(--r-ctrl);
}
.evaluator-add { display: flex; gap: var(--s3); align-items: flex-end; }

/* פרוטוקול — תצוגת-הדפסה (§1.1.ד) */
#protocol-host {
  position: fixed;
  inset: 0;
  background: var(--surface);
  overflow-y: auto;
  z-index: var(--z-overlay);
  padding: var(--s6);
}
.protocol-actions { display: flex; gap: var(--s3); margin-bottom: var(--s5); }
.protocol { max-width: 900px; margin: 0 auto; color: var(--text); }
.protocol-title { font-size: var(--fs-24); font-weight: 700; margin-bottom: var(--s4); }
.protocol-meta {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  font-size: var(--fs-14);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.protocol-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); margin-bottom: var(--s5); }
.protocol-table th, .protocol-table td {
  border: 1px solid var(--border);
  padding: var(--s2) var(--s3);
  text-align: start;
}
.protocol-table th { background: var(--surface-2); font-weight: 600; }
.protocol-empty { color: var(--text-2); margin-bottom: var(--s5); }
.protocol-budget { margin-bottom: var(--s6); font-size: var(--fs-14); display: flex; flex-direction: column; gap: var(--s1); }
.protocol-budget h2 { font-size: var(--fs-17); font-weight: 600; margin-bottom: var(--s2); }
.protocol-signatures { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s6); }
.sig-line { font-size: var(--fs-14); }

/* placeholder למקומות שטרם נבנו (א1 בלבד — מוסר באבנים הבאות) */
.placeholder-block {
  border: 1px dashed var(--border);
  border-radius: var(--r-card);
  padding: var(--s5);
  color: var(--text-3);
  font-size: var(--fs-13);
  text-align: center;
}

/* ===== א7 · דשבורד (spec §1.2 · spec-design §ה) ===== */
.dummy-chart-banner {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--flag-bg); color: var(--flag-text);
  border-radius: var(--r-card); padding: var(--s3) var(--s4);
  font-size: var(--fs-13); margin-bottom: var(--s4);
}
.chart-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4);
}
.chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s4);
  min-width: 0;
}
.chart-title {
  font-size: var(--fs-14); font-weight: 600; margin: 0 0 var(--s3);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
}
.chart-total { font-size: var(--fs-12); font-weight: 400; color: var(--text-2); }
.chart-body { display: flex; flex-direction: column; gap: var(--s2); }
.chart-row {
  display: grid; grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center; gap: var(--s2); font-size: var(--fs-13);
}
.chart-vertical .chart-row {
  grid-template-columns: 1fr; grid-template-rows: auto var(--s6) auto;
  justify-items: center; text-align: center; gap: var(--s1);
}
.chart-vertical .chart-body { flex-direction: row; align-items: flex-end; gap: var(--s3); }
.chart-vertical .chart-track { width: 100%; height: var(--s6); }
.chart-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch; }
.chart-vertical .chart-label { max-width: 8ch; white-space: normal; }
.chart-track {
  background: var(--surface-2); border-radius: var(--r-ctrl); overflow: hidden;
  position: relative; height: var(--s4); width: 100%;
}
.chart-vertical .chart-track { display: flex; align-items: flex-end; background: var(--surface-2); }
.chart-fill { display: block; height: 100%; border-radius: var(--r-ctrl); transition: background var(--dur) var(--ease); }
.chart-vertical .chart-fill { width: 100%; border-radius: var(--r-ctrl) var(--r-ctrl) 0 0; }
.chart-value { font-weight: 600; min-width: 2ch; text-align: end; }
.chart-row-clickable { cursor: pointer; border-radius: var(--r-ctrl); padding: var(--s1); margin: calc(var(--s1) * -1); }
.chart-row-clickable:hover .chart-fill { filter: brightness(0.85); }
.chart-row-clickable:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.chart-row-active { background: var(--primary-bg); }
.chart-row-active .chart-label { color: var(--primary); font-weight: 600; }
.empty-note { color: var(--text-3); font-size: var(--fs-13); }

/* ===== א7 · יומן (spec §1.3) ===== */
.journal-toolbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.journal-toolbar .input-sm {
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.journal-count { color: var(--text-2); margin-inline-start: auto; }
.journal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.journal-row {
  content-visibility: auto; contain-intrinsic-size: 0 60px;
  display: grid; grid-template-columns: 7ch 10ch 1fr; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-ctrl); border: 1px solid var(--border);
  background: var(--surface); font-size: var(--fs-13);
}
.journal-row-clickable { cursor: pointer; }
.journal-row-clickable:hover { background: var(--primary-bg); }
.journal-row-clickable:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.journal-when { color: var(--text-2); }
.journal-user { color: var(--text-2); font-weight: 600; }
.journal-body { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.journal-action { font-weight: 600; }
.journal-sub { color: var(--text-2); }
.journal-change { color: var(--text-2); }
.journal-note { color: var(--text-3); }

/* אפס גלילה-אופקית ב-1280px (מדד-קבלה) */
.no-overflow-x { max-width: 100%; min-width: 0; }

/* Task 10A — desktop responsive polish. The data table retains all columns in
   one named, keyboard-focusable region; only that region may scroll inline. */
@media (max-width: 1180px) {
  .topbar {
    height: auto;
    min-height: 56px;
    padding: var(--s2) var(--s4);
    gap: var(--s2) var(--s4);
    flex-wrap: wrap;
  }
  .topbar::after { content: ""; flex-basis: 100%; height: 0; order: 1; }
  .topbar-brand, .topbar-nav, .topbar-spacer { order: 0; }
  .save-widget-wrap, .user-picker, .topbar > [data-auth-logout], .settings-wrap { order: 2; }
  .save-widget-wrap { margin-inline-start: auto; }
  .topbar-nav { gap: var(--s1); }
  .topbar-nav-item { padding-inline: var(--s2); }
  .app-main { padding: var(--s4); }
  .workspace-header { gap: var(--s3); }
  .ws-search { flex: 1 1 280px; min-width: 240px; }
  .ws-header-spacer { display: none; }
  .tabs { gap: var(--s4); overflow-x: auto; scrollbar-gutter: stable; }
  .tab { flex: 0 0 auto; }
  [data-table-scroll] .data-table { min-width: 1120px; }
  .chart-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); }
  .overlay-panel.card-panel { width: min(880px, calc(100vw - 32px)); }
}

@media (max-width: 1040px) {
  .topbar-brand-text { font-size: var(--fs-15); }
  .topbar-logo { height: 34px; }
  .save-widget { padding-inline: var(--s2); }
  .header-counter { margin-bottom: var(--s3); }
  .chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journal-row { grid-template-columns: 9ch 1fr; }
  .journal-body { grid-column: 1 / -1; }
}

/* content-visibility לגלילה ארוכה (spec-design §י) */
.cv-auto { content-visibility: auto; }

/* prefers-reduced-motion (spec-design §ח) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   הכרטיס-הצף (spec §2.1–§2.3) — א4א
   שני מצבי-הצגה לאותו רכיב: עגון-צד (≥1440px, במסך-העבודה) / overlay.
   ההבדל הוא **מיקום בלבד** — גוף-הכרטיס זהה בשניהם (מסלול-קוד יחיד).
   ═════════════════════════════════════════════════════════════════════════ */

.card-panel {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}
/* overlay — מדשבורד/יומן, ומתחת ל-1440 גם ממסך-העבודה (החלטה 10) */
.overlay-panel.card-panel {
  width: min(880px, 94vw);
  border-radius: var(--r-card);
}
/* עגון-צד — לוח-הצד של ה-split-view במסך-העבודה */
.card-anchor {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(560px, 42vw);
  z-index: var(--z-overlay);
  box-shadow: var(--shadow-overlay);
}
.card-panel-anchored {
  height: 100%;
  max-height: none;
  border-inline-end: 1px solid var(--border);
}
/* כשהכרטיס עגון — התוכן מתכווץ ולא נחתך מתחתיו (אפס גלילה-אופקית) */
body.card-anchored-open .app-main { margin-inline-start: min(560px, 42vw); }

.card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* כותרת-כרטיס — דביקה בגלילה (#12) */
.card-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--s4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2) var(--s3);
  align-items: start;
}
.card-org { font-size: var(--fs-20); line-height: var(--lh-head); margin: 0; }
.card-org:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.card-project { font-size: var(--fs-14); color: var(--text-2); }
.card-badges {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
/* הפעולות יושבות בשורת-הכותרת עצמה — אחרת נותר חלל ריק גדול בראש הכרטיס
   (נתפס בבדיקה חזותית; הטסטים בדקו קיום-כפתורים, לא ניצולת-שטח). */
.card-actions { display: flex; align-items: center; gap: var(--s2); grid-row: 1; grid-column: 2; }
.icon-btn.is-on { color: var(--flag-text); background: var(--flag-bg); }
.chip-stage { background: var(--primary-bg); color: var(--primary); }
/* מעריך-מוקצה (א11) — נייטרלי במכוון: הוא מידע-שיוך, לא סטטוס, ואסור שיתחרה
   חזותית ברמזור ובשלב-המשפך שלצידו. */
.chip-assignee { background: var(--surface-2); color: var(--text-2); }
.chip-assignee svg { vertical-align: -2px; }
.stage-note-text { font-size: var(--fs-12); color: var(--text-2); }
.card-nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.card-nav-count { font-size: var(--fs-13); color: var(--text-2); }

.card-banner {
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-14);
}
.card-banner-warn { background: var(--yellow-bg); color: var(--yellow-text); }

/* טאבי-הכרטיס + מיני-ניווט — דביקים מתחת לכותרת (#5 · #12) */
.card-tabs {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 1);
  display: flex;
  gap: var(--s4);
  padding: 0 var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.card-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--s3) 0;
  font: inherit;
  font-size: var(--fs-14);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.card-tab.is-active { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }
.card-mininav {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.chip-nav { cursor: pointer; border: none; font: inherit; font-size: var(--fs-12); }
.chip-nav:hover { background: var(--primary-bg); color: var(--primary); }
.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
  margin-inline-start: auto;
  text-decoration: underline;
}

/* א9: גוף-הכרטיס הוא **הקנבס** שהבלוקים יושבים עליו — בלי הגוון הזה
   הבלוק (--surface) והפאנל (--surface) זהים, והגבול לבדו חלש מכדי לקבץ. */
.card-body { overflow-y: auto; padding: var(--s4); flex: 1; min-height: 0; background: var(--bg); }

/* בלוקי-הסקירה
   א9 · ליטוש-היררכיה (ליטוש-בלבד, הכרעה ידנית 16.8): הבלוק מקבל **גבול-קבוצה**
   במקום קו-תחתון-לכותרת בלבד. לפני-כן 11 הבלוקים נשפכו לגלילה אחת בלי קיבוץ,
   וכל השורות נקראו באותו משקל. אפס שינוי-מבנה — רק ריווח/גבול/משקל מעל טוקנים
   קיימים. */
.card-block {
  margin-bottom: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--s3) var(--s4) var(--s4);
}
.card-block-plain { margin-bottom: 0; border: none; background: none; padding: 0; }
.block-title {
  font-size: var(--fs-15);
  font-weight: 600;
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  letter-spacing: -0.01em;
}
.block-body { display: flex; flex-direction: column; gap: var(--s2); }
.block-note { font-size: var(--fs-13); color: var(--text-2); }
.block-flag {
  background: var(--flag-bg);
  color: var(--flag-text);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-ctrl);
  font-size: var(--fs-13);
}
.block-flag-danger { background: var(--danger-bg); color: var(--danger); }
.card-chips { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }

/* אובייקט-ראיה: ערך + ציטוט שנפתח בלחיצה */
/* א9 · ליטוש-היררכיה: התווית צרה ומיושרת-לסוף, הערך פותח **טור** קבוע.
   לפני-כן שתי העמודות היו 160px+1fr עם הערך צף בתחילת ה-1fr, ולכן כל
   הערכים התחילו במקום אחר והעין לא קיבלה קו-אנכי להיאחז בו. */
.ev-row {
  display: grid;
  /* עמודת-הערך **אינה** 1fr: על פאנל של 880px ערך בן 4 תווים היה מתרווח על
     ~700px ומתנתק מהתווית שלו. `max-content` מצמיד את הערך לתווית, והשארית
     נשארת ריקה — מה שגם נותן לציטוט-הפתוח מקום להישפך בלי לדחוף. */
  grid-template-columns: 132px minmax(0, max-content) minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  font-size: var(--fs-14);
  padding-block: 3px;
}
/* ה-<details> חייב להשתרע על שתי העמודות האחרונות: ה-summary צמוד לתווית,
   אבל ה-blockquote שנפתח מתחתיו זקוק לרוחב המלא. */
.ev-row > .ev-details { grid-column: 2 / -1; }
.ev-label {
  color: var(--text-2);
  font-size: var(--fs-13);
  text-align: end;      /* התווית נצמדת לגבול-הטור ⇒ מרחק-קבוע מהערך */
  line-height: 1.5;
}
.ev-value { color: var(--text); }
.ev-missing { color: var(--text-3); }
.ev-hint { display: block; font-size: var(--fs-12); color: var(--text-2); }
.ev-clickable { cursor: pointer; list-style: none; }
.ev-clickable::-webkit-details-marker { display: none; }
.ev-clickable:hover { color: var(--primary); }
.ev-details[open] .ev-clickable { color: var(--primary); font-weight: 600; }

/* סמן-הראיה (§4 ברשימת-א9): נושא מידע ⇒ **נשאר** בעץ-הנגישות ובר-מיקוד,
   אבל מוחלש ויזואלית ומוצמד לקצה-הטור במקום לצוף אחרי הערך — כדי שלא
   ייקרא כתו-פיסוק תקוע ולא ייצור טור-סימנים מרצד. */
.ev-clickable { display: inline-flex; align-items: baseline; gap: var(--s2); }
.ev-clickable > .icon {
  flex: none;
  color: var(--text-3);
  opacity: .5;
  transform: scale(.75);
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ev-clickable:hover > .icon,
.ev-clickable:focus-visible > .icon,
.ev-details[open] .ev-clickable > .icon { opacity: 1; color: var(--primary); }
.ev-quote {
  margin: var(--s2) 0 var(--s1);
  padding-inline-start: var(--s3);
  border-inline-start: 3px solid var(--border);
  color: var(--text);
  font-size: var(--fs-13);
}
.ev-meta { font-size: var(--fs-12); color: var(--text-2); display: flex; gap: var(--s2); flex-wrap: wrap; }
.ev-verified { color: var(--green-text); display: inline-flex; align-items: center; gap: 2px; }
.ev-unverified { color: var(--text-2); }
.chip-ev { display: inline-block; }
.chip-ev-summary { cursor: pointer; list-style: none; }
.chip-ev-summary::-webkit-details-marker { display: none; }
.chip-ev-body {
  background: var(--surface-2);
  border-radius: var(--r-ctrl);
  padding: var(--s2) var(--s3);
  margin-top: var(--s1);
}
.copyable {
  background: none;
  border: none;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  text-align: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}
.copyable:hover { text-decoration: underline; }
.chip-link { cursor: pointer; border: none; font: inherit; color: var(--primary); background: var(--primary-bg); }

/* כיווץ-חכם: פסק מכווץ לשורה, ה-checks נפתחים פר-תנאי (#5) */
.collapsible { border: 1px solid var(--border); border-radius: var(--r-ctrl); }
.collapsible + .collapsible { margin-top: var(--s2); }
.collapsible-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  font-size: var(--fs-14);
  list-style: none;
}
.collapsible-head::-webkit-details-marker { display: none; }
.collapsible-head:hover { background: var(--primary-bg); }
.collapsible[open] .collapsible-head { border-bottom: 1px solid var(--border); }
.collapsible-body { padding: var(--s3); }
/* סעיף מכווץ אינו מרונדר עד שנפתח (spec-design §י) */
.collapsible:not([open]) .collapsible-body { content-visibility: auto; }
.cond-title { flex: 1; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.check-id {
  font-family: inherit;
  font-size: var(--fs-12);
  background: var(--surface-2);
  border-radius: var(--r-ctrl);
  padding: 0 var(--s1);
  color: var(--text-2);
}
.verdict-chip {
  font-size: var(--fs-12);
  border-radius: var(--r-full);
  padding: 2px var(--s2);
  white-space: nowrap;
}
.verdict-green { background: var(--green-bg); color: var(--green-text); }
.verdict-yellow { background: var(--yellow-bg); color: var(--yellow-text); }
.verdict-red { background: var(--red-bg); color: var(--red-text); }
.verdict-flag { background: var(--flag-bg); color: var(--flag-text); }
.verdict-pair { display: inline-flex; gap: var(--s1); align-items: center; font-size: var(--fs-12); color: var(--text-2); }

.checks { display: flex; flex-direction: column; gap: var(--s3); }
.check { border-inline-start: 2px solid var(--border); padding-inline-start: var(--s3); }
.check-unclear { border-inline-start-color: var(--flag-text); }
.check-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.check-question {
  flex: 1 1 360px;
  color: var(--text-1);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: 1.55;
}
.check-result {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s2);
  margin-block: var(--s1) var(--s2);
}
.check-answer { font-size: var(--fs-13); font-weight: 600; }
.answer-yes { color: var(--green-text); }
.answer-no { color: var(--red-text); }
.answer-no_info, .answer-partial { color: var(--text-2); }
.check-reasoning, .check-note { font-size: var(--fs-13); color: var(--text-2); }
.check-derived {
  font-size: var(--fs-13);
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.chip-flag { background: var(--flag-bg); color: var(--flag-text); }
.summary-reasoning {
  font-size: var(--fs-13);
  background: var(--surface-2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-ctrl);
  margin-top: var(--s2);
}

.score-vector {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s3);
  background: var(--surface-2);
  border-radius: var(--r-ctrl);
}
.vector-value { font-weight: 700; font-size: var(--fs-17); }
.crit-level { margin-inline-start: auto; }
.deep-view { margin-top: var(--s3); font-size: var(--fs-13); }
.deep-view > summary { cursor: pointer; color: var(--primary); }
.deep-body { padding-top: var(--s2); }

.traffic-block { padding: var(--s3); border-radius: var(--r-ctrl); }
.traffic-bg-green { background: var(--green-bg); }
.traffic-bg-yellow { background: var(--yellow-bg); }
.traffic-bg-red { background: var(--red-bg); }
.reasons { margin: var(--s2) 0 0; padding-inline-start: var(--s4); font-size: var(--fs-13); }
.summary-text { margin: 0; font-size: var(--fs-14); line-height: var(--lh-body); }
.anchor-row { margin-top: var(--s2); }

.flag-item {
  display: flex;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-ctrl);
  font-size: var(--fs-13);
}
.flag-item-flag { background: var(--flag-bg); color: var(--flag-text); }
.flag-item-info { background: var(--surface-2); color: var(--text); }
.flag-group-title {
  margin: var(--s2) 0 0;
  color: var(--text-2);
  font-size: var(--fs-14);
  font-weight: 700;
}
.flag-group-title:first-child { margin-top: 0; }
.gap-line { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-14); }
.gap-note { font-size: var(--fs-13); color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   א4ב · טאב ההגשה המקורית + Lightbox (spec §2.4 · ממצא-נוחות #4)
   ═══════════════════════════════════════════════════════════════════════════ */

.doc-view { display: flex; flex-direction: column; gap: var(--s5); }
.doc-body { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--text); }
.doc-h { margin: var(--s4) 0 var(--s2); font-weight: 600; line-height: var(--lh-head); }
.doc-h2 { font-size: var(--fs-17); }
.doc-h3 { font-size: var(--fs-15); }
.doc-h4, .doc-h5 { font-size: var(--fs-14); }
.doc-p { margin: 0 0 var(--s3); }
.doc-li { margin: 0 0 var(--s1); padding-inline-start: var(--s4); position: relative; }
.doc-li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--s2);
  top: 0.6em;
  width: 4px; height: 4px;
  border-radius: var(--r-full);
  background: var(--text-3);
}
.doc-quote {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border-inline-start: 3px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-13);
}
/* תגית-מקור עדינה — נוכחת אך לא מתחרה בטקסט-ההגשה */
.doc-anchor {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-12);
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--r-full);
  padding: 0 var(--s2);
  white-space: nowrap;
}
.doc-table-wrap { overflow-x: auto; margin: 0 0 var(--s3); }
.doc-table { border-collapse: collapse; font-size: var(--fs-13); width: 100%; }
.doc-table th, .doc-table td {
  border: 1px solid var(--border);
  padding: var(--s1) var(--s2);
  text-align: start;
}
.doc-table th { background: var(--surface-2); font-weight: 600; }

.att-kind {
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--r-full);
  padding: 0 var(--s2);
}
.att-source, .att-note {
  font-size: var(--fs-13);
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-bottom: var(--s2);
}
/* קישור לקובץ-המקור (א4ג). היציאה-לרשת היחידה בכלי, ורק בלחיצה יזומה —
   ולכן הוא מסומן כקישור-יוצא ולא נבלע בתוך הטקסט. */
.att-link { margin-bottom: var(--s2); }
.att-link-a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-13);
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  padding: var(--s1) var(--s2);
}
.att-link-a:hover { background: var(--surface-2); text-decoration: underline; }
.att-link-a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.att-link-meta { color: var(--text-2); }

/* העמודים מתחילים מקצה-הקריאה (ימין ב-RTL) ולא נתלים בשמאל המסך —
   `justify-content:flex-start` בתוך `dir=rtl` נותן בדיוק את זה. */
.att-pages { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: flex-start; }

/* קופסה שמורה — ה-aspect-ratio מגיע inline מהסכמה; זה מה שמונע CLS (§י).
   הרוחב גדל ככל שיש מקום (הרנדר הוא תוכן-ההגשה, לא תמונת-קישוט): שתיים
   בשורה בכרטיס-הרגיל, ועדיין קריאות בעגון-הצד הצר. */
.page-box {
  margin: 0;
  flex: 1 1 280px;
  max-width: 360px;
  min-width: 200px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.page-box-target { outline: 2px solid var(--ring); outline-offset: 2px; }
.page-open {
  flex: 1;
  min-height: 0;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
}
.page-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.page-zoom {
  position: absolute;
  inset-block-end: var(--s2);
  inset-inline-end: var(--s2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  padding: 2px;
  color: var(--text-2);
  display: flex;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.page-open:hover .page-zoom, .page-open:focus-visible .page-zoom { opacity: 1; }
.page-cap {
  font-size: var(--fs-12);
  color: var(--text-2);
  text-align: center;
  padding: var(--s1);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.page-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 100%;
  padding: var(--s3);
  color: var(--text-2);
  text-align: center;
}
.page-missing .icon { width: 28px; height: 28px; color: var(--text-3); }
.page-missing-text { font-size: var(--fs-12); }

/* Lightbox — קריאה אמיתית בחדות-מלאה (#4) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: var(--lightbox-backdrop);
  display: flex;
  flex-direction: column;
}
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.lb-title { font-weight: 600; font-size: var(--fs-14); color: var(--text); }
.lb-tools { display: flex; align-items: center; gap: var(--s2); }
.lb-zoom, .lb-count { font-size: var(--fs-13); color: var(--text-2); min-width: 56px; text-align: center; }
.lb-stage { flex: 1; min-height: 0; overflow: auto; padding: var(--s4); text-align: center; }
.lb-img { display: inline-block; height: auto; background: var(--surface); }

/* ═══════════════════════════════════════════════════════════════════════════
   א4ב · טאב ניקוד-אנושי (spec §2.5)
   ═══════════════════════════════════════════════════════════════════════════ */

.human-tab { display: flex; flex-direction: column; gap: var(--s5); }
.human-evaluator { font-size: var(--fs-13); color: var(--text-2); display: flex; align-items: center; gap: var(--s1); }
.human-modes { display: flex; gap: var(--s2); flex-wrap: wrap; }
.mode-opt, .level-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  padding: var(--s1) var(--s3);
  font-size: var(--fs-13);
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
}
.mode-opt:hover, .level-opt:hover { background: var(--surface-2); }
.mode-opt.is-on, .level-opt.is-on {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
}
.mode-opt input, .level-opt input {
  /* הרדיו נשאר במקום ונגיש למקלדת — רק לא נראה (הכפתור הוא התווית) */
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.mode-opt:focus-within, .level-opt:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.human-criteria { display: flex; flex-direction: column; gap: var(--s3); }
.human-crit-head { font-size: var(--fs-13); font-weight: 600; margin-bottom: var(--s1); }

/* ⓘ · הסבר-הקריטריון (C19). סגור כברירת-מחדל: המעריך שמכיר לא רואה רעש,
   ומי שצריך פותח. `display:inline` על ה-details כדי שה-ⓘ יישב על שורת-הכותרת. */
.crit-guide { display: inline; }
.crit-guide-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-3);
  margin-inline-start: var(--s1);
  list-style: none;
}
.crit-guide-toggle::-webkit-details-marker { display: none; }
.crit-guide-toggle:hover { color: var(--primary); }
.crit-guide[open] .crit-guide-toggle { color: var(--primary); }
.crit-guide-body {
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: 1.55;
  margin: var(--s2) 0;
  padding: var(--s3);
  border-inline-start: 3px solid var(--primary);
  background: var(--surface-2);
  border-radius: var(--r-ctrl);
}
.crit-guide-body p { margin: 0 0 var(--s2); }
.crit-guide-body p:last-child { margin-bottom: 0; }
.crit-guide-lead { font-weight: 600; }
.crit-guide-label { font-weight: 600; margin-bottom: var(--s1) !important; }
.crit-guide-list { margin: 0 0 var(--s2); padding-inline-start: var(--s4); }
.crit-guide-list li { margin-bottom: var(--s1); }
.crit-guide-domains { color: var(--text-2); }
.crit-guide-caution {
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
  color: var(--text-2);
}
.level-picker { display: flex; gap: var(--s1); flex-wrap: wrap; }
.level-opt-num { font-weight: 600; }
.level-opt-name { color: inherit; font-size: var(--fs-12); }
.human-weighted {
  font-size: var(--fs-14);
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border-radius: var(--r-ctrl);
}
.human-note { display: flex; flex-direction: column; gap: var(--s1); }
.human-note textarea {
  width: 100%;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-14);
  resize: vertical;
}
.human-note textarea:focus { outline: 2px solid var(--ring); outline-offset: -1px; border-color: var(--primary); }
/* הודעת-שדה צמודה לשדה (spec-design §ד) */
.field-msg { font-size: var(--fs-13); display: flex; align-items: center; gap: var(--s1); }
.field-msg-error { color: var(--danger); }
.field-msg-warn { color: var(--flag-text); }
.field-msg-ok { color: var(--green-text); }
.human-actions { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; }
.human-entry {
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  padding: var(--s2) var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.human-entry-current { border-color: var(--primary); background: var(--primary-bg); }
.human-entry-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-14); }
.human-entry-level { font-size: var(--fs-14); }
.human-entry-note { font-size: var(--fs-13); color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   Visual Design Pass — quiet institutional palette and Hebrew typography.
   Flat surfaces, decisive table hierarchy, restrained brand accents.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --vp-accent: color-mix(in srgb, var(--primary-hover) 48%, var(--text));
  --vp-accent-soft: color-mix(in srgb, var(--vp-accent) 82%, var(--primary));
  --vp-brand-green: color-mix(in srgb, var(--green-text) 78%, var(--text));
  --vp-accent-wash: color-mix(in srgb, var(--primary-bg) 68%, var(--surface));
  --vp-canvas: color-mix(in srgb, var(--bg) 94%, var(--surface));
  --vp-paper: color-mix(in srgb, var(--surface) 97%, var(--yellow-bg));
  --vp-line: color-mix(in srgb, var(--border) 82%, var(--text-2));
  --vp-row-hover: color-mix(in srgb, var(--primary-bg) 52%, var(--surface));
}

body {
  background: var(--vp-canvas);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1, h2, h3, h4 { letter-spacing: -0.012em; }
.text-area-title, .header-counter, .card-org { letter-spacing: -0.018em; }

.topbar {
  height: 58px;
  padding-inline: var(--s5);
  gap: var(--s5);
  background: var(--surface);
  border-bottom: 2px solid var(--vp-line);
  box-shadow: none;
}
.topbar-brand { color: var(--text); }
.topbar-brand-text {
  font-size: var(--fs-17);
  border-inline-start-color: var(--vp-line);
}
.topbar-nav { align-self: stretch; align-items: center; }
.topbar-nav-item {
  height: 100%;
  padding-inline: var(--s3);
  border-radius: 0;
  color: var(--text-2);
}
.topbar-nav-item:hover { background: var(--vp-accent-wash); color: var(--vp-accent); }
.topbar-nav-item.active {
  color: var(--vp-accent);
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--vp-accent-soft);
}
.save-widget {
  border: 1px solid color-mix(in srgb, var(--green-dot) 24%, var(--border));
  background: color-mix(in srgb, var(--green-bg) 54%, var(--surface));
  color: var(--vp-brand-green);
}
.user-picker[data-current-user] { color: var(--text-2); }
.data-stage-banner {
  color: var(--vp-accent);
  background: var(--vp-accent-wash);
  border-bottom: 1px solid color-mix(in srgb, var(--vp-accent-soft) 22%, var(--border));
}

.app-main {
  padding-block: var(--s4) var(--s5);
  padding-inline: var(--s5);
}
.header-counter {
  color: var(--text);
  font-size: calc(var(--fs-24) + 2px);
  font-weight: 700;
  margin-bottom: var(--s3);
}
.workspace-header {
  align-items: center;
  padding-block: var(--s1) var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--vp-line);
}
.workspace-header .field-label { color: var(--text); }
.workspace-header .field input,
.workspace-header .btn-secondary {
  height: 38px;
  border-color: var(--vp-line);
}
.workspace-header .field input:hover,
.workspace-header .btn-secondary:hover { border-color: var(--vp-accent-soft); }
.ws-count, .budget-meter, .toggle { padding-bottom: 0; }
.filters-panel {
  border-color: var(--vp-line);
  border-top: 3px solid var(--vp-accent-soft);
  box-shadow: none;
}
.filter-group legend { color: var(--text); font-weight: 600; }

.tabs {
  gap: var(--s5);
  border-bottom-color: var(--vp-line);
}
.tab { color: var(--text-2); font-weight: 600; }
.tab-active { color: var(--vp-accent); }
.tab-active::after { height: 3px; background: var(--vp-accent-soft); }
.tab-active .tab-badge { background: var(--vp-accent-wash); color: var(--vp-accent); }

[data-table-scroll] {
  border-color: var(--vp-line);
  border-radius: var(--r-ctrl);
  box-shadow: none;
}
.data-table thead th {
  padding-block: 10px;
  background: color-mix(in srgb, var(--vp-accent) 92%, var(--surface));
  color: var(--surface);
  font-weight: 600;
  border-bottom-color: var(--vp-accent-soft);
}
.data-table th.th-sortable:hover,
.data-table th[aria-sort="ascending"],
.data-table th[aria-sort="descending"] { color: var(--surface); }
.data-table tbody tr { height: 42px; }
.data-table tbody td {
  border-bottom-color: color-mix(in srgb, var(--border) 82%, var(--surface));
}
.data-table tbody td:first-child { color: var(--text); font-weight: 600; }
.data-table tbody tr:hover { background: var(--vp-row-hover); }
.data-table tbody tr.row-selected {
  background: var(--vp-accent-wash);
  border-inline-start-color: var(--vp-accent-soft);
}

.chart-grid {
  --primary: var(--vp-accent-soft);
  --primary-bg: var(--vp-accent-wash);
}
.chart-card {
  background: var(--vp-paper);
  border-color: var(--vp-line);
  border-top: 3px solid var(--vp-accent-soft);
  box-shadow: none;
}
.chart-title {
  color: var(--text);
  font-weight: 600;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}
.chart-total { color: var(--text-2); }
.chart-track { background: color-mix(in srgb, var(--surface-2) 76%, var(--surface)); }
.chart-fill { filter: saturate(.72) brightness(.92); }
.chart-row-active { background: var(--vp-accent-wash); }
.chart-row-active .chart-label { color: var(--vp-accent); }

.card-panel-anchored { border-inline-end-color: var(--vp-line); }
.card-header {
  background: var(--vp-paper);
  border-inline-start: 4px solid var(--vp-accent-soft);
  border-bottom-color: var(--vp-line);
  box-shadow: none;
}
.card-org {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  color: var(--text);
  font-weight: 700;
}
.card-project { color: var(--text-2); font-weight: 600; }
.card-tabs { background: var(--surface); border-bottom-color: var(--vp-line); }
.card-tab.is-active { color: var(--vp-accent); border-bottom-color: var(--vp-accent-soft); font-weight: 700; }
.card-mininav { background: var(--vp-accent-wash); border-bottom-color: var(--vp-line); }
.card-body { background: var(--vp-canvas); }
.card-block {
  border-color: var(--vp-line);
  border-radius: var(--r-ctrl);
  box-shadow: none;
}
.block-title {
  color: var(--text);
  font-size: var(--fs-17);
  font-weight: 600;
  padding-inline-start: var(--s2);
  border-inline-start: 2px solid var(--vp-accent-soft);
  border-bottom-color: var(--vp-line);
}
.human-weighted, .summary-reasoning, .score-vector {
  background: var(--vp-accent-wash);
  border: 1px solid color-mix(in srgb, var(--vp-accent-soft) 22%, var(--border));
}

.journal-toolbar {
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--vp-line);
}
.journal-list { gap: var(--s2); }
.journal-row {
  background: var(--surface);
  border-color: var(--vp-line);
  border-inline-start: 3px solid color-mix(in srgb, var(--vp-accent-soft) 58%, var(--border));
}
.journal-row-clickable:hover { background: var(--vp-row-hover); }

.auth-shell {
  background: linear-gradient(145deg, var(--surface) 0%, var(--vp-canvas) 68%, var(--vp-accent-wash) 145%);
}
.auth-brand {
  color: var(--text);
  font-size: var(--fs-15);
  font-weight: 700;
}
.auth-brand img { width: 62px; }
.auth-shell h1 {
  color: var(--text);
  font-size: calc(var(--fs-24) + 2px);
  font-weight: 700;
}
.auth-shell form {
  width: min(100%, 372px);
  padding: calc(var(--s5) + var(--s1));
  border-color: var(--vp-line);
  border-top: 4px solid var(--vp-accent-soft);
  box-shadow: var(--shadow-toast);
}
.auth-shell form input {
  height: 42px;
  border-color: var(--vp-line);
}
.auth-shell form .btn {
  height: 42px;
  background: var(--vp-accent);
}
.auth-shell form .btn:hover { background: color-mix(in srgb, var(--vp-accent) 84%, var(--text)); }

@media (max-width: 1180px) {
  .topbar {
    height: auto;
    min-height: 58px;
    padding: var(--s2) var(--s4);
    gap: var(--s2) var(--s4);
  }
  .topbar-nav-item { height: 40px; }
  .app-main { padding: var(--s4); }
}

@media (max-width: 1040px) {
  .topbar { padding-inline: var(--s3); }
  .topbar-nav-item { padding-inline: var(--s2); }
  .header-counter { font-size: var(--fs-24); }
}

/* print — פרוטוקול (spec-design §י): שחור-לבן, בלי צללים/רקעים, שוליים 2ס"מ */
@page { margin: 2cm; }
@media print {
  .topbar, .data-stage-banner, .no-print { display: none !important; }
  /* הצבעים עצמם מגיעים מ-print-tokens ב-tokens.css (--surface/--text/--border
     כבר שחור-לבן תחת @media print) — כאן רק פריסה וקטיעת-עמודים. */
  body { background: var(--surface); color: var(--text); }
  .overlay-backdrop { position: static; background: none; }
  .overlay-panel { box-shadow: none; }

  /* כשהפרוטוקול פתוח — רק הוא מודפס; שאר האזורים אינם חלק מהמסמך. */
  .protocol-open .app-main,
  .protocol-open #card-host,
  .protocol-open #dialog-host,
  .protocol-open #toast-host { display: none !important; }
  #protocol-host {
    position: static;
    padding: 0;
    overflow: visible;
    background: var(--surface);
  }
  .protocol { max-width: none; color: var(--text); }
  .protocol-table { page-break-inside: auto; }
  .protocol-table tr { page-break-inside: avoid; }
  .protocol-table th { background: none; border-bottom: 2px solid var(--border); }
  .protocol-table th, .protocol-table td { border-color: var(--border); }
  .protocol-budget, .protocol-signatures { page-break-inside: avoid; }
  .protocol-title { border-bottom: 2px solid var(--border); padding-bottom: 4px; }
}