/* ════════════════════════════════════════════════════════════════════════
   ישראל 2030 · Fiscal Simulator — Visual System (Clal)
   Luxe blue financial redesign. Structure & logic untouched; visuals only.
   Chart colours are driven by the --bar-* / accent vars below (read via clr()).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand & neutrals ───────────────────────────────────────────── */
  --ink:          #0c1b34;   /* deepest navy text            */
  --text:         #15294a;   /* primary text                 */
  --muted:        #6c7a96;   /* secondary text               */
  --faint:        #9aa6bd;   /* tertiary / captions          */

  --bg:           #eaeef5;   /* page base                    */
  --panel:        #ffffff;   /* card surface                 */
  --panel-2:      #f6f8fc;   /* inset surface                */
  --border:       #e3e8f1;   /* hairline                     */
  --border-strong:#d2dae8;

  --primary:      #1657d0;   /* Clal cobalt                  */
  --primary-dark: #0c3a96;   /* deep brand                   */
  --primary-soft: #eaf1ff;   /* tinted hover                 */
  --accent:       #2f7bf0;   /* bright azure                 */

  /* ── Data accents (shared with charts) ──────────────────────────── */
  --pink:         #d63d6e;   /* signal rose (simulation/highlight) */
  --pink-light:   #f0b6c9;
  --amber:        #d8972b;   /* refined gold                 */
  --amber-light:  #f1cd82;
  --green:        #149e74;   /* emerald                      */
  --teal:         #149a93;

  /* chart bar/line palette */
  --bar-defense:    #0f2b5c;
  --bar-defense2:   #3f7fd6;   /* ביטחון פנים ואחר (internal security & other) */
  --bar-revenue:    #1657d0;
  --bar-other:      #c4d6f5;
  --bar-social:     #4d6ba5;   /* שירותים חברתיים — dark enough that the thin line shows on white (dark mode overrides to a light tone) */
  --bar-purple:     #149a93;
  --bar-violet:     #3a49c0;
  --bar-pink:       #d63d6e;
  --bar-pink-light: #f0b6c9;
  --bar-blue-light: #7ea7ec;
  --bar-blue:       #2f7bf0;
  --def-growth:     #d9600a;   /* defense-growth line + labels (orange) */

  /* ── Harmonized breakdown ramp (navy → blue → teal → green) ─────────
     One cool family shared by פירוט הוצאות (8 steps), הרכב הכנסות
     (steps 1/3/5/7) AND both growth charts, so every detail view reads
     as a single system. Dark-mode lightens the darkest steps below. */
  --ramp-1: #0f2b5c;
  --ramp-2: #1e498f;
  --ramp-3: #2f6fbf;
  --ramp-4: #3f97c9;
  --ramp-5: #37b0a8;
  --ramp-6: #46b98a;
  --ramp-7: #74c88f;
  --ramp-8: #a9d9a0;

  /* ── Expense palette (user-specified) ────────────────────────────────
     spendingCats() (פירוט הוצאות / צמיחת הוצאות), in category order. A muted
     navy / steel / metallic-gray family with a carmine + coral accent in the
     middle. ביטחון פנים ואחר (step 2) has no user color — a mid-navy bridges
     ביטחון (deep navy) → שירותים חברתיים. Dark-mode lightens the dark
     blue-grays below so they don't vanish on the dark canvas. */
  --ramp-warm-1: #1B2A4A;   /* ביטחון            — deep navy      */
  --ramp-warm-2: #3D5A80;   /* ביטחון פנים ואחר  — mid navy (bridge) */
  --ramp-warm-3: #4A6572;   /* שירותים חברתיים   — steel blue-gray */
  --ramp-warm-4: #34495E;   /* תשתיות            — metallic gray  */
  --ramp-warm-5: #A93226;   /* משרדי מטה         — deep carmine   */
  --ramp-warm-6: #E67E22;   /* החזרי חוב         — coral orange   */
  --ramp-warm-7: #95A5A6;   /* ענפי משק          — concrete gray  */
  --ramp-warm-8: #BDC3C7;   /* הוצאות אחרות      — light gray     */

  /* ── Elevation ──────────────────────────────────────────────────── */
  --sh-sm: 0 1px 2px rgba(12,27,52,.05), 0 1px 1px rgba(12,27,52,.04);
  --sh-md: 0 6px 18px -6px rgba(12,27,52,.12), 0 2px 6px -2px rgba(12,27,52,.07);
  --sh-lg: 0 26px 50px -18px rgba(12,27,52,.30), 0 10px 22px -12px rgba(12,27,52,.16);
  --sh-brand: 0 10px 26px -10px rgba(22,87,208,.45);

  /* ── Geometry ───────────────────────────────────────────────────── */
  --r-card: 16px;
  --r-ctrl: 11px;
  --r-pill: 999px;

  --grad-brand: linear-gradient(120deg, #1657d0 0%, #2f7bf0 55%, #4aa0ff 100%);
  --grad-ink:   linear-gradient(135deg, #0c1b34 0%, #16345f 100%);

  --chart-bg:   #f8fafe;   /* inset plot panel (light in both themes) */
}

* { box-sizing: border-box; }

/* HE⇆EN language switch — a gentle crossfade between the old and new layout
   (see toggleLang in i18n.js). Slightly slower + eased so the rtl⇆ltr flip
   reads as a smooth dissolve rather than a snap. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease-in-out; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  direction: rtl;
  font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
}

/* Layered, premium page backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 560px at 92% -8%, rgba(47,123,240,.16), transparent 60%),
    radial-gradient(900px 520px at 4% 4%, rgba(22,87,208,.08), transparent 55%),
    linear-gradient(180deg, #eef2f8 0%, #e6ebf3 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(12,27,52,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,27,52,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 50% 0%, #000, transparent 75%);
}

.chart-wrap canvas,
.comp-chart-wrap canvas,
#chart-modal-canvas { direction: ltr; }

/* ───────────────────────────── TOP BAR ─────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -18px rgba(12,27,52,.5);
  padding: 12px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.topbar-left  { display: flex; align-items: center; gap: 10px; }
/* Center the export group in the gap between the scenario tabs and the reset button */
.export-group { margin-inline-start: -6px; margin-inline-end: 12px; }
/* signature brand hairline */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--grad-brand);
  opacity: .9;
}

.topbar-right { display: flex; align-items: center; gap: 14px; }

/* Ghost-comparison toggle — lit when active */
.icon-btn.gh-on {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.tower-img { height: 50px; width: auto; display: block; }

.brand-logo { height: 34px; width: auto; display: block; margin-inline-start: auto; }

.title-block { display: flex; flex-direction: column; }
.title-block h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.4px;
  line-height: 1.05;
  color: var(--primary-dark);
  background: var(--grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-block .sub {
  font-size: 10.5px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 4px;
}

/* Scenario tabs (segmented) */
.scenario-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm) inset;
}
.scenario-tabs button {
  padding: 9px 22px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .2s, background .25s, box-shadow .25s, transform .15s;
}
.scenario-tabs button.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.scenario-tabs button:hover:not(.active) { color: var(--primary-dark); transform: translateY(-1px); }

.icon-actions { display: flex; gap: 9px; align-items: center; }

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--primary);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-sm);
  transition: all .2s;
}
.icon-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--sh-brand);
}

/* ──────────────────────────── CONTROLS BAR ─────────────────────────── */
.controls-bar {
  position: sticky;
  /* Stick BELOW the topbar (whose height is measured into --topbar-h by main.js)
     so the scenario-tabs row stays visible on scroll instead of being covered. */
  top: var(--topbar-h, 58px);
  z-index: 90;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: clamp(8px, 1vw, 16px) clamp(12px, 1.5vw, 30px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 32px);
  /* Wrap instead of overflowing past the (left, in RTL) edge when the viewport is
     too narrow to hold all three groups on one row — e.g. a laptop at 100% zoom.
     Wide screens still fit everything on a single row, so nothing changes there. */
  flex-wrap: wrap;
  row-gap: 10px;
  font-size: clamp(10px, 0.82vw, 13px);
}

/* Laptop widths (roughly a 14–15" screen at 100% zoom): tighten spacing and the
   slider track so the three groups keep fitting on one row a bit longer before
   the wrap above kicks in. Large external monitors (≥1600px) are untouched. */
@media (max-width: 1600px) {
  .controls-bar { gap: clamp(8px, 1vw, 20px); padding-inline: clamp(10px, 1vw, 20px); }
  .controls-bar .ctrl-range { width: clamp(70px, 8vw, 160px); }
  .controls-bar .label { font-size: 0.94em; }
}

.ctrl-group { display: flex; align-items: center; gap: clamp(5px, 0.5vw, 10px); white-space: nowrap; }
.ctrl-year-select { flex-shrink: 0; }

/* ── Active adjustments summary strip (below the controls bar) ─────────────── */
.adj-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 26px 9px;
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
html[data-theme="dark"] .adj-strip { background: rgba(13,24,44,.45); }
.adj-strip .adj-title {
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .2px;
  margin-inline-end: 2px;
}
.adj-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.adj-chip .adj-year {
  font-weight: 800;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
}
.adj-chip.adj-global .adj-year { background: #d8972b; }
.adj-chip .adj-sep { color: var(--faint); }
.adj-chip .up   { color: var(--green); font-weight: 700; }
.adj-chip .down { color: var(--pink);  font-weight: 700; }
.adj-chip .adj-orig {
  color: var(--faint);
  font-weight: 500;
  font-size: 10px;
  margin-inline-start: 3px;
}
/* Per-adjustment reset X — clears a single slider (year+dimension) on click */
.adj-chip .adj-part { display: inline-flex; align-items: center; gap: 4px; }
.adj-chip .adj-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin-inline-start: 1px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--border-strong); color: var(--ink);
  font-size: 12px; line-height: 1; font-weight: 800;
  transition: background .15s, color .15s, transform .15s;
}
.adj-chip .adj-x:hover { background: var(--pink); color: #fff; transform: scale(1.12); }
.ctrl-group .label { color: var(--text); font-weight: 600; }
.ctrl-group .year-tag { color: var(--primary); font-weight: 800; }

.ctrl-select,
.ctrl-year-select {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: clamp(4px, 0.4vw, 7px) clamp(6px, 0.6vw, 12px);
  border-radius: var(--r-ctrl);
  font-family: inherit;
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 700;
  cursor: pointer;
  min-width: clamp(50px, 4vw, 70px);
  box-shadow: var(--sh-sm);
  transition: border-color .2s, box-shadow .2s;
}
.ctrl-select:hover, .ctrl-year-select:hover { border-color: var(--primary); }
.ctrl-select:focus, .ctrl-year-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Premium range sliders */
.ctrl-range {
  -webkit-appearance: none;
  appearance: none;
  /* Force LTR so dragging RIGHT increases and LEFT decreases, in both HE and EN
     (a native range in an RTL page is otherwise mirrored). */
  direction: ltr;
  width: clamp(80px, 10vw, 220px);
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--primary) 0 50%, #d9e2f2 50% 100%);
  accent-color: var(--primary);
  cursor: pointer;
  outline: none;
  transition: background .05s;
}
.ctrl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 2px 8px rgba(22,87,208,.45);
  transition: transform .15s, box-shadow .15s;
}
.ctrl-range::-webkit-slider-thumb:hover { transform: scale(1.18); box-shadow: 0 4px 14px rgba(22,87,208,.55); }
.ctrl-range::-webkit-slider-thumb:active { transform: scale(1.05); }
.ctrl-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--primary);
  box-shadow: 0 2px 8px rgba(22,87,208,.45); cursor: pointer;
}

.ctrl-val {
  min-width: 62px;
  display: inline-block;
  text-align: center;
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  font-family: 'Heebo', ui-monospace, monospace;
  background: var(--primary-soft);
  border-radius: 8px;
  padding: 3px 8px;
}

/* ────────────────────────────── LAYOUT ─────────────────────────────── */
.main {
  display: grid;
  grid-template-columns: clamp(80px, 7.5vw, 140px) 1fr;
  gap: 0;
  min-height: calc(100vh - 120px);
}

.year-rail {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  border-left: 1px solid var(--border);
  padding: clamp(6px, 1vh, 18px) clamp(5px, 0.7vw, 14px);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vh, 8px);
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 96px);
}

.year-type-tabs {
  display: flex;
  flex-direction: column;
  gap: clamp(1px, 0.2vh, 4px);
  padding: clamp(2px, 0.3vh, 5px);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--sh-sm) inset;
  margin-bottom: clamp(2px, 0.4vh, 8px);
}
.legend-item {
  font-size: clamp(8px, 0.65vw, 11px);
  font-weight: 700;
  color: var(--muted);
  display: flex; align-items: center; gap: clamp(3px, 0.3vw, 7px);
  padding: clamp(2px, 0.3vh, 6px) clamp(4px, 0.4vw, 10px);
  border-radius: 6px;
  background: transparent;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.legend-stripe { width: clamp(5px, 0.5vw, 8px); height: clamp(5px, 0.5vw, 8px); border-radius: 50%; flex-shrink: 0; }
.legend-actual   { background: var(--amber); }
.legend-current  { background: var(--primary-dark); }
.legend-forecast { background: var(--green); }

.year-rail .select-toggle {
  font-size: clamp(9px, 0.7vw, 12px);
  color: var(--primary);
  border: 1px solid var(--border-strong);
  padding: clamp(3px, 0.4vh, 7px) clamp(5px, 0.5vw, 10px);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  font-weight: 700;
  margin-bottom: clamp(2px, 0.3vh, 6px);
  box-shadow: var(--sh-sm);
  transition: all .18s;
}
.year-rail .select-toggle:hover { border-color: var(--primary); color: var(--primary-dark); }

/* Scrollable year list: legend + "select all" stay fixed, years scroll when many.
   min-height:0 lets this flex child shrink below its content so overflow kicks in. */
#year-rail-btns {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.4vh, 7px);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
#year-rail-btns::-webkit-scrollbar { width: 7px; }
#year-rail-btns::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
}
#year-rail-btns::-webkit-scrollbar-track { background: transparent; }

.year-rail .yr-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: clamp(4px, 0.55vh, 10px) clamp(6px, 0.6vw, 14px) clamp(4px, 0.55vh, 10px) 0;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(10px, 0.8vw, 13px);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  position: relative;
  text-align: right;
  direction: rtl;
  box-shadow: var(--sh-sm);
  transition: transform .16s, box-shadow .2s, background .2s, color .2s;
}
.year-rail .yr-btn::before {
  content: "";
  position: absolute;
  right: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: var(--r-pill);
}
.year-rail .yr-btn.actual::before   { background: var(--amber); }
.year-rail .yr-btn.current::before  { background: var(--primary-dark); }
.year-rail .yr-btn.forecast::before { background: var(--green); }
.year-rail .yr-btn.active {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sh-brand);
}
/* Keep the type colour (amber/blue/green) on the stripe even when a year is
   selected, so it still matches the legend; a thin white ring keeps it legible
   on the active blue background. */
.year-rail .yr-btn.active::before { box-shadow: 0 0 0 1px rgba(255,255,255,.65); }
.year-rail .yr-btn:hover:not(.active) { transform: translateX(3px); border-color: var(--primary); }

/* Rating multi-select dropdown (checkbox list) */
.ms-dropdown { position: relative; }
.ms-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--r-ctrl);
  background: var(--panel); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--sh-sm); transition: border-color .18s;
}
.ms-toggle:hover { border-color: var(--primary); }
.ms-toggle .ms-caret { color: var(--muted); transition: transform .2s; font-size: 11px; }
.ms-toggle.open .ms-caret { transform: rotate(180deg); }
.ms-panel {
  position: absolute; z-index: 60; top: calc(100% + 4px);
  inset-inline-start: 0; inset-inline-end: auto; min-width: 210px; width: max-content; max-width: 320px;
  max-height: 240px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--r-ctrl); box-shadow: var(--sh-md); padding: 4px;
}
.ms-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 8px; cursor: pointer; color: var(--text); font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ms-item:hover { background: var(--primary-soft); }
.ms-item input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; flex: 0 0 auto; }

.content {
  padding: 12px 22px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  align-items: stretch;
  /* Don't distribute the leftover vertical slack (content is stretched to fill
     .main) across rows — that inflated the header row and pushed charts down
     on views with fewer cards (breakdown/scenarios). Pin rows to the top so the
     KPI→charts gap is identical across every view. */
  align-content: start;
  gap: 16px;
}

/* Grid children default to min-width:auto, which blocks them from shrinking below
   the Chart.js canvas's already-rendered pixel width. Without this, dragging the
   window from large to small leaves the whole layout stuck oversized until a view
   switch forces a re-render. min-width:0 lets tracks shrink → the chart-wrap
   narrows → the ResizeObserver fires → charts redraw at the new size. */
.content > * { min-width: 0; }
.kpi-strip > .kpi-tile { min-width: 0; }
.chart-wrap { min-width: 0; }
.chart-wrap canvas { max-width: 100%; }

/* ────────────────────────────── CARDS ──────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px 18px 14px;
  box-shadow: var(--sh-md);
  position: relative;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
  min-height: 42px;
}
.card-title h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.2px;
  color: var(--ink);
  position: relative;
  padding-right: 13px;
}
.card-title h3::before {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 17px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
}

/* toggle pill row */
.toggle-row {
  display: flex;
  gap: 3px;
  background: var(--panel-2);
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.toggle-row button {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 5px 15px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.toggle-row button.active { background: var(--primary); color: #fff; box-shadow: var(--sh-brand); }
.toggle-row button:hover:not(.active) { color: var(--primary-dark); }

.chart-wrap { height: 200px; position: relative; margin-top: 6px; }
.chart-wrap.tall { height: 240px; }

/* Breakdown view: the two cards in a row can have legends of different heights
   (e.g. פירוט הוצאות wraps its 8 category chips to two rows, while הרכב ההכנסות
   fits on one). With block flow that pushed one chart lower than the other, so
   their x-axis (year) lines didn't align. Make the card a flex column and pin the
   chart to the bottom — the grid stretches both cards to equal height, so the
   fixed-height chart-wraps bottom-align and the year lines match. */
.card.view-breakdown { display: flex; flex-direction: column; }
.card.view-breakdown .chart-wrap { margin-top: auto; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.chart-legend .li { display: flex; align-items: center; gap: 6px; }
.chart-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }

/* Interactive legend — each chip toggles its category on/off inside the chart.
   Used by צמיחת הוצאות + צמיחת הכנסות (the breakdown charts above them always
   show every category and render plain, non-clickable chips instead — item 14). */
.chart-legend .li.toggle {
  border: 1px solid var(--border-strong);
  background: var(--panel, #fff);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font: inherit;
  color: var(--text, #1e293b);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease, box-shadow .14s ease;
  -webkit-user-select: none; user-select: none;
}
.chart-legend .li.toggle:hover  { border-color: var(--chip, var(--primary)); box-shadow: var(--sh-sm); }
.chart-legend .li.toggle:focus-visible { outline: 2px solid var(--chip, var(--primary)); outline-offset: 1px; }
.chart-legend .li.toggle.off {
  opacity: .5;
  background: transparent;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.chart-legend .li.toggle.off .dot { box-shadow: inset 0 0 0 2px currentColor; background: transparent !important; }

/* "You can select up to N at once" hint under a growth chart's legend (items 12/13) —
   var(--faint) was too subtle to read in either theme; bumped to --muted + weight. */
.chart-max-note { font-size: 11px; font-weight: 600; color: var(--muted); margin: -2px 0 6px; }

/* ─────────────────────────── VIEW TABS ─────────────────────────────── */
.view-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  padding: 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  width: fit-content;
}
.view-tabs button {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 8px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  transition: all .22s;
}
.view-tabs button.active { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }
.view-tabs button:hover:not(.active) { color: var(--primary-dark); background: var(--primary-soft); }

/* ──────────────────────────── KPI STRIP ────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 4px;
}

.kpi-tile {
  --kc: var(--primary);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 15px 17px 13px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-md);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.kpi-tile::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: var(--kc);
}
.kpi-tile::after {
  content: "";
  position: absolute;
  top: -40px; left: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--kc);
  opacity: .06;
}
.kpi-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.kpi-tile:nth-child(1) { --kc: var(--pink); }
.kpi-tile:nth-child(2) { --kc: var(--amber); }
.kpi-tile:nth-child(3) { --kc: var(--primary); }
.kpi-tile:nth-child(4) { --kc: var(--green); }

.kpi-tile .lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  line-height: 1.35;
}
.kpi-tile .val {
  font-size: 33px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
  margin-top: 3px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kpi-tile .delta {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: 'Heebo', monospace;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.kpi-tile .delta.up   { color: #b42334; background: rgba(214,61,110,.12); }
.kpi-tile .delta.down { color: #0a7c57; background: rgba(20,158,116,.13); }

/* ──────────────────────── CHART EXPAND / MODAL ─────────────────────── */
.expand-btn {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--primary);
  padding: 3px 7px;
  z-index: 10;
  opacity: 0;
  box-shadow: var(--sh-sm);
  transition: opacity .2s, transform .2s, background .2s;
}
.chart-wrap:hover .expand-btn { opacity: 1; }
.expand-btn:hover { background: var(--primary); color: #fff; transform: scale(1.08); }

#chart-modal {
  position: fixed;
  inset: 0;
  background: rgba(8,16,32,.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFade .2s ease;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal-inner {
  background: rgba(var(--panel-rgb, 240,244,251), 0.55);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  padding: 56px 28px 26px;
  width: 85vw; height: 80vh;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-lg);
  animation: modalRise .28s cubic-bezier(.2,.7,.3,1);
}
html[data-theme="dark"] .modal-inner {
  background: rgba(14,27,49, 0.52);
  border-color: rgba(100,150,255,0.14);
}
@keyframes modalRise { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-close {
  position: absolute;
  top: 12px; left: 16px;
  width: 32px; height: 32px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--muted);
  transition: all .2s;
}
.modal-close:hover { background: var(--pink); color: #fff; border-color: var(--pink); }

#chart-modal-canvas { flex: 1; width: 100% !important; height: 100% !important; }

/* ───────────────────────── MICRO-INTERACTIONS ────────────────────── */

/* count-up flash */
@keyframes valPop { 0% { transform: scale(1); } 35% { transform: scale(1.04); } 100% { transform: scale(1); } }
.kpi-tile .val.pop { animation: valPop .5s ease; }

/* nicer scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c3ccdc; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #a7b3c8; background-clip: padding-box; }

/* ───────────────────────────── RESPONSIVE ──────────────────────────── */

/* Laptop: clamp() handles most scaling; breakpoints for layout shifts only */
@media (max-width: 1380px) {
  .content { padding: 10px 14px 30px; gap: 10px; }
  .chart-wrap { height: 175px; }
}

@media (max-width: 1200px) {
  .content { padding: 8px 10px 24px; gap: 8px; }
  .chart-wrap { height: 158px; }
  .kpi-strip { gap: 8px; }
  .kpi-tile { padding: 14px 14px 12px; }
}

@media (max-width: 1050px) {
  .year-rail .select-toggle { display: none; }
  .content { grid-template-columns: 1fr 1fr; padding: 6px 8px 20px; gap: 7px; }
  .chart-wrap { height: 145px; }
}

@media (max-width: 820px) {
  .main { grid-template-columns: 1fr; }
  .year-rail { display: none; }
  .content { grid-template-columns: 1fr; }
}

/* ════════════════════════ CHART INSET PANELS ═══════════════════════════ */
.chart-wrap,
.comp-chart-wrap {
  border-radius: 12px;
}
#chart-modal-canvas { border-radius: 10px; }

/* ════════════════════════ ICONOGRAPHY ══════════════════════════════════ */
.kpi-ic {
  position: absolute;
  top: 13px; left: 15px;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--kc) 13%, transparent);
  color: var(--kc);
}
.kpi-ic svg { width: 17px; height: 17px; stroke-width: 2; }

.ct-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  margin-left: 9px;
  vertical-align: middle;
  background: var(--primary-soft);
  color: var(--primary);
}
.ct-icon svg { width: 15px; height: 15px; stroke-width: 2; }
.card-title h3.has-icon { padding-right: 0; }
.card-title h3.has-icon::before { display: none; }

/* ════════════════════════ VIEW TRANSITION ══════════════════════════════ */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.view-anim { animation: viewIn .45s cubic-bezier(.2,.7,.3,1); }

/* ════════════════════════ PRESENTATION MODAL NAV ═══════════════════════ */
.modal-title {
  position: absolute;
  top: 15px; right: 22px;
  z-index: 6;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--primary-dark);
  letter-spacing: -.2px;
  background: var(--primary-soft);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm), inset 0 0 0 1px rgba(22,87,208,.12);
}
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--primary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-md);
  transition: all .2s;
  z-index: 5;
}
.modal-nav:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-50%) scale(1.08); box-shadow: var(--sh-brand); }
.modal-nav.prev { left: 18px; }
.modal-nav.next { right: 18px; }

/* ════════════════════════ THEME TOGGLE BUTTON ══════════════════════════ */
.theme-btn { font-size: 15px; }
html[data-theme="dark"] .theme-btn {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--sh-brand);
}

/* ════════════════════════════════════════════════════════════════════════
   DARK · "TERMINAL" THEME
   ════════════════════════════════════════════════════════════════════════ */
html { background: var(--bg); transition: background .35s ease; }
body, .topbar, .controls-bar, .year-rail, .card, .kpi-tile,
.view-tabs, .scenario-tabs button, .icon-btn, .ctrl-select {
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

html[data-theme="dark"] {
  --ink:           #eaf1fc;
  --text:          #cdd9ee;
  --muted:         #93a4c4;
  --faint:         #6f82a4;
  --bg:            #0a1322;
  --panel:         #111f38;
  --panel-2:       #0e1a30;
  --border:        #233450;
  --border-strong: #2e4164;
  --primary:       #2f7bf0;
  --primary-dark:  #1f63d6;
  --primary-soft:  rgba(47,123,240,.18);
  --accent:        #4a9bff;
  --chart-bg:      #0d1b33;
  --pink-light:    #b9879a;
  --amber-light:   #b59459;
  --def-growth:    #f59e0b;
  /* Navy (#0f2b5c) is nearly invisible on the dark canvas — brighten ביטחון for
     dark mode. Shared by פירוט הוצאות + צמיחת הוצאות, so both stay consistent. */
  --bar-defense:   #6ea8ff;
  /* שירותים חברתיים: the light tone reads fine on the dark canvas — keep it here
     (the light-mode base is darker so its line shows on white). */
  --bar-social:    #c4d6f5;
  /* Breakdown ramp: the two darkest navy steps vanish on the dark canvas —
     brighten just those; steps 3–8 already read fine, so leave them. */
  --ramp-1: #5a8ad6;
  --ramp-2: #3f82d0;
  /* Expense palette: lighten the dark navy / steel / metallic steps so they
     don't vanish against the dark canvas; carmine is brightened a touch. The
     coral, concrete-gray and light-gray steps already read fine on dark. */
  --ramp-warm-1: #5A7CAD;   /* ביטחון           — lighter navy   */
  --ramp-warm-2: #7E9AC0;   /* ביטחון פנים ואחר — lighter mid-navy */
  --ramp-warm-3: #8299A8;   /* שירותים חברתיים  — lighter steel  */
  --ramp-warm-4: #6E8598;   /* תשתיות           — lighter metallic */
  --ramp-warm-5: #C0392B;   /* משרדי מטה        — brighter carmine */
  /* יחס גירעון לתוצר (חוב ציבורי וגרעון) + צמיחה הוצאות כוללת both label
     themselves in this blue against a translucent dark chip — too dim to read
     on the dark canvas, so brighten it here. */
  --bar-blue: #6da3f4;
  --sh-sm: 0 1px 2px rgba(0,0,0,.45);
  --sh-md: 0 8px 22px -8px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  --sh-lg: 0 30px 60px -20px rgba(0,0,0,.78), 0 12px 24px -12px rgba(0,0,0,.5);
  --sh-brand: 0 10px 26px -10px rgba(47,123,240,.6);
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(1100px 560px at 92% -8%, rgba(47,123,240,.22), transparent 60%),
    radial-gradient(900px 520px at 4% 4%, rgba(22,87,208,.16), transparent 55%),
    linear-gradient(180deg, #0a1322 0%, #060c18 100%);
}
html[data-theme="dark"] body::after {
  opacity: .4;
  background-image:
    linear-gradient(to right, rgba(140,170,230,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,170,230,.05) 1px, transparent 1px);
}
html[data-theme="dark"] .topbar { background: rgba(13,24,44,.82); box-shadow: 0 1px 0 rgba(120,160,230,.08) inset, 0 10px 30px -18px #000; }
html[data-theme="dark"] .controls-bar { background: rgba(13,24,44,.66); }
html[data-theme="dark"] .year-rail { background: rgba(13,24,44,.45); }
html[data-theme="dark"] .title-block h1 {
  background: linear-gradient(135deg, #d4e3fb 0%, #84acef 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .kpi-tile {
  background: linear-gradient(162deg, #14243f 0%, #0e1b31 100%);
}
html[data-theme="dark"] .kpi-tile .val {
  text-shadow: 0 0 26px color-mix(in srgb, var(--kc) 55%, transparent);
}
html[data-theme="dark"] .ctrl-range {
  background: linear-gradient(90deg, var(--primary) 0 50%, #28395a 50% 100%);
}
html[data-theme="dark"] .ctrl-val { color: #c4dbff; }
html[data-theme="dark"] .expand-btn { background: rgba(17,31,56,.92); color: #9fc0ff; border-color: var(--border-strong); }
html[data-theme="dark"] .year-type-tabs {
  background: var(--panel-2);
  border-color: var(--border);
}
html[data-theme="dark"] .legend-item:hover { color: var(--text); background: rgba(47,123,240,.1); }
html[data-theme="dark"] .view-tabs {
  background: var(--panel-2);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm) inset;
}
html[data-theme="dark"] .view-tabs button { color: var(--muted); }
html[data-theme="dark"] .view-tabs button.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
html[data-theme="dark"] .view-tabs button:hover:not(.active) { color: var(--accent); }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #2a3c5b; background-clip: padding-box; }
/* Brand logo — light mode uses the original; dark mode swaps to a bright variant */
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo:not(.brand-logo-dark) { display: none; }
html[data-theme="dark"] .brand-logo-dark {
  display: block;
  margin-inline-start: auto;
  filter: drop-shadow(0 0 11px rgba(130,170,250,.40));
}

/* ── Card tinted backgrounds (dark mode only) ────────────────────────────── */
html[data-theme="dark"] .card:has(canvas) {
  background: linear-gradient(160deg, rgba(22,87,208,.40) 0%, rgba(22,87,208,.08) 45%, var(--panel) 75%);
}

/* ── Scenarios — dark mode gradients ────────────────────────────────────── */
html[data-theme="dark"] .sc-kpi-tile {
  background: linear-gradient(162deg, #14243f 0%, #0e1b31 100%);
}
html[data-theme="dark"] .sc-header-card {
  background: linear-gradient(160deg, rgba(22,87,208,.35) 0%, rgba(22,87,208,.08) 45%, var(--panel) 75%);
}
html[data-theme="dark"] .sc-side.base { background: rgba(47,123,240,.16); border-color: rgba(47,123,240,.30); }
html[data-theme="dark"] .sc-side.rec  { background: rgba(214,61,110,.16); border-color: rgba(214,61,110,.32); }
html[data-theme="dark"] .sc-side.base .sc-side-val { color: #9fc0ff; }
html[data-theme="dark"] .sc-side.rec  .sc-side-val { color: #f7a8c2; }
html[data-theme="dark"] .sc-side.rec  .sc-side-tag { color: #f0a0bd; }
html[data-theme="dark"] .sc-kpi-ic { color: #b9d0ff; background: linear-gradient(135deg, rgba(47,123,240,.28), rgba(214,61,110,.24)); }
html[data-theme="dark"] .sc-delta.bad  { background: rgba(214,61,110,.20); color: #f7a8c2; }
html[data-theme="dark"] .sc-delta.good { background: rgba(20,158,116,.22); color: #6fe0b6; }
html[data-theme="dark"] .sc-leg-item:first-child { background: rgba(47,123,240,.18); color: #bcd4ff; border-color: rgba(47,123,240,.3); }
html[data-theme="dark"] .sc-leg-item:last-child  { background: rgba(214,61,110,.18); color: #f3aec8; border-color: rgba(214,61,110,.32); }
/* sc-charts already covered by .card:has(canvas) rule above */

/* ── Modal controls — dark mode ─────────────────────────────────────────── */
html[data-theme="dark"] .modal-title {
  background: rgba(47,123,240,.22);
  color: #e0eaff;
  box-shadow: var(--sh-sm), inset 0 0 0 1px rgba(100,160,255,.25);
}
html[data-theme="dark"] .modal-close {
  background: rgba(30,50,90,.85);
  border-color: rgba(100,150,255,.35);
  color: #c8daff;
  font-size: 18px;
  font-weight: 700;
}
html[data-theme="dark"] .modal-close:hover { background: var(--pink); color: #fff; border-color: var(--pink); }
html[data-theme="dark"] .modal-nav {
  background: rgba(30,50,90,.85);
  border-color: rgba(100,150,255,.35);
  color: #7db8ff;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
html[data-theme="dark"] .modal-nav:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Modal tinted backgrounds (dark mode only) ───────────────────────────── */
html[data-theme="dark"] .modal-inner {
  background: linear-gradient(160deg, rgba(22,87,208,.42) 0%, rgba(22,87,208,.10) 40%, rgba(14,27,49,.55) 70%);
}

/* ════════════════════════ PULSE ANIMATION (Feature 3) ══════════════════════ */
@keyframes cardPulse {
  0%   { box-shadow: var(--sh-md); }
  25%  { box-shadow: 0 0 0 3px rgba(47,123,240,.5), var(--sh-lg); }
  100% { box-shadow: var(--sh-md); }
}
.card-pulse { animation: cardPulse 1.5s ease-out forwards; }

/* ════════════════════════ SCENARIO COMPARISON VIEW ════════════════════════ */
.view-scenarios {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header card */
.sc-header-card { padding: 18px 22px !important; }
.sc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* Header card — gradient accent + richer title */
.sc-header-card {
  padding: 16px 22px !important;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(22,87,208,.05), rgba(214,61,110,.05)) ,
    var(--panel) !important;
}
.sc-header-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, #8a6fd0 50%, var(--pink) 100%);
}
.sc-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.sc-subtitle { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.sc-legend { display: flex; gap: 10px; flex-shrink: 0; }
.sc-leg-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.sc-leg-item:first-child { background: rgba(22,87,208,.08); color: var(--primary-dark); border-color: rgba(22,87,208,.18); }
.sc-leg-item:last-child  { background: rgba(214,61,110,.08); color: #b42a57;        border-color: rgba(214,61,110,.18); }

/* Legend dots */
.sc-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.sc-dot.base { background: var(--primary); }
.sc-dot.rec  { background: var(--pink); }

/* KPI strip */
.sc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sc-kpi-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 15px 15px 14px;
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.sc-kpi-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.sc-kpi-tile::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--pink));
}

/* Tile head: icon badge + label */
.sc-kpi-head { display: flex; align-items: center; gap: 10px; }
.sc-kpi-ic {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(22,87,208,.12), rgba(214,61,110,.12));
  color: var(--primary-dark);
}
.sc-kpi-ic svg { width: 16px; height: 16px; stroke-width: 2; }
.sc-kpi-lbl {
  font-size: 13px; font-weight: 800;
  color: var(--ink); line-height: 1.2;
}
.sc-kpi-lbl small { font-size: 10px; font-weight: 600; display: block; margin-top: 2px; color: var(--faint); }

/* Head-to-head lanes */
.sc-kpi-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-side {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid transparent;
}
.sc-side.base { background: rgba(22,87,208,.07); border-color: rgba(22,87,208,.16); }
.sc-side.rec  { background: rgba(214,61,110,.07); border-color: rgba(214,61,110,.16); }
.sc-side-tag {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  text-transform: none;
  color: var(--muted);
}
.sc-side.base .sc-side-tag { color: var(--primary); }
.sc-side.rec  .sc-side-tag { color: #c23362; }
.sc-side-val {
  font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.6px;
  line-height: 1.05;
}
.sc-side.base .sc-side-val { color: var(--primary-dark); }
.sc-side.rec  .sc-side-val { color: #b42a57; }

/* Delta chip with caption */
.sc-delta {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800;
  padding: 7px 12px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.sc-delta-cap { font-size: 10.5px; font-weight: 700; opacity: .8; }
.sc-delta-val { font-size: 14px; letter-spacing: -.4px; }
.sc-delta.bad  { background: rgba(214,61,110,.11); color: #b42a57; }
.sc-delta.good { background: rgba(20,158,116,.13); color: #0a7c57; }

/* Charts grid — reuse .card + standard .chart-wrap */
.sc-charts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.sc-charts-grid .card { min-width: 0; }
.sc-charts-grid .card .chart-wrap { height: 220px; }

@media (max-width: 1380px) {
  .sc-charts-grid .card .chart-wrap { height: 185px; }
  .sc-kpi-tile { padding: 12px 13px 10px; }
  .sc-kpi-strip { gap: 10px; }
}

@media (max-width: 1200px) {
  .sc-charts-grid .card .chart-wrap { height: 165px; }
  .sc-kpi-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sc-kpi-tile { padding: 11px 12px 10px; }
  .sc-kpi-lbl { font-size: 11px; }
}

@media (max-width: 1050px) {
  .sc-charts-grid .card .chart-wrap { height: 150px; }
  .sc-kpi-strip { grid-template-columns: 1fr 1fr; gap: 7px; }
}

/* Keep TWO charts per row at all widths — they shrink instead of stacking. */
@media (max-width: 760px) {
  .sc-charts-grid .card { padding: 12px 12px 11px; }
  .sc-charts-grid .card .chart-wrap { height: 140px; }
}

/* ════════════════════════ EXPORT MODAL ════════════════════════════════════ */
#export-modal {
  position: fixed; inset: 0; z-index: 9500;
  display: none; align-items: center; justify-content: center;
}
.exp-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
}
.exp-box {
  position: relative; z-index: 1;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--sh-lg);
  padding: 28px 32px; min-width: 320px; direction: rtl;
  animation: modalRise .22s ease;
}
.exp-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.exp-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
.exp-checks { display: flex; flex-direction: column; gap: 11px; margin-bottom: 22px; }
.exp-check-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.exp-check-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
/* Export button group (XLSX / PDF / PPTX) */
.export-group {
  display: flex;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.exp-grp-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: var(--panel);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
  white-space: nowrap;
}
.exp-grp-btn:first-child { border-right: none; }
.exp-grp-btn:hover { background: var(--primary-soft); color: var(--primary); }
html[data-theme="dark"] .exp-grp-btn { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .exp-grp-btn:hover { background: rgba(47,123,240,.18); color: #84acef; }
.exp-note { font-size: 11px; color: var(--muted); min-height: 16px; margin-bottom: 10px; text-align: center; }
.exp-actions { display: flex; gap: 10px; justify-content: flex-end; }
.exp-cancel {
  padding: 8px 18px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.exp-cancel:hover { background: var(--bg); }
.exp-submit {
  padding: 8px 20px; border-radius: 8px; border: none;
  background: var(--grad-brand); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: var(--sh-brand); transition: opacity .15s;
}
.exp-submit:hover { opacity: .88; }
.exp-submit:disabled { opacity: .5; cursor: wait; }

/* ════════════════════════ PDF / PRINT ══════════════════════════════════════ */
.print-header { display: none; }

@media print {
  .print-header {
    display: block !important;
    text-align: center;
    padding: 0 0 16px;
    border-bottom: 2px solid #1657d0;
    margin-bottom: 20px;
  }
  .print-header-title {
    font-size: 18px;
    font-weight: 800;
    color: #0c1b34;
  }
  .print-header-sub { font-size: 11px; color: #666; margin-top: 3px; }

  /* Hide non-essential UI */
  .topbar, .controls-bar, .year-rail, .year-type-tabs,
  .view-tabs, .expand-btn, .modal, .comp-filters,
  .kpi-tile .delta, .kpi-tile svg,
  .sc-header .sc-subtitle { display: none !important; }

  /* Page setup */
  @page { size: A4 landscape; margin: 1.2cm; }
  body { background: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { font-size: 11px !important; }

  /* Layout */
  .main { display: block !important; }
  .content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  /* Cards */
  .card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
  .card[style*="1 / -1"] { grid-column: 1 / -1 !important; }
  .chart-wrap, .comp-chart-wrap { height: 190px !important; }

  /* KPI strip */
  .kpi-strip { break-inside: avoid; }
  .kpi-tile { box-shadow: none !important; border: 1px solid #eee !important; }

  /* Scenarios view in print */
  .sc-chart-wrap { height: 180px !important; }
}

/* ── Sensitivity mode selector ─────────────────────────────────────────────── */
.sens-mode-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sens-mode-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border-strong);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
}
.sens-mode-btn:hover { border-color: var(--primary); color: var(--primary); }
.sens-mode-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ════════════════════════ LANGUAGE (EN / HE) ═══════════════════════════ */
/* The EN⇄HE button: same round chrome as the other icon buttons, but the
   label is a 2-letter word, so it needs a slightly smaller, wider type. */
.icon-btn.lang-btn {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* ── English (LTR) overrides ─────────────────────────────────────────────
   The whole app is authored RTL-first; `dir="ltr"` on <html> (set by
   i18n.js) flips the flow, and these rules mirror the handful of places
   that hard-code a physical side. Everything else is already logical or
   symmetric. Keep this block as the ONLY place that mirrors for English. */
html[dir="ltr"] body { direction: ltr; }
html[dir="ltr"] .exp-box,
html[dir="ltr"] #country-search,
html[dir="ltr"] .year-rail .yr-btn { direction: ltr; text-align: left; }

/* ── Year rail in English ───────────────────────────────────────────────
   The rail is authored RTL-first: the year buttons carry their padding on
   the right (where the colour stripe sits) and the legend labels are short
   Hebrew words. In English the stripe moves to the left edge, so the
   padding has to move with it — otherwise the number sits flush against
   the stripe — and the rail needs a little more width because the legend
   labels ("Historical year") are longer than their Hebrew counterparts. */
html[dir="ltr"] .year-rail { border-left: none; border-right: 1px solid var(--border); }
html[dir="ltr"] .year-rail .yr-btn::before { right: auto; left: 0; }
html[dir="ltr"] .year-rail .yr-btn { padding: clamp(4px, 0.55vh, 10px) 0 clamp(4px, 0.55vh, 10px) clamp(6px, 0.6vw, 14px); }
html[dir="ltr"] .main { grid-template-columns: clamp(90px, 8.5vw, 150px) 1fr; }
html[dir="ltr"] #year-rail-btns { padding: 2px 2px 2px 4px; }

html[dir="ltr"] .legend-item { line-height: 1.2; }

/* Card titles: accent bar and icon swap sides */
html[dir="ltr"] .card-title h3 { padding-right: 0; padding-left: 13px; }
html[dir="ltr"] .card-title h3::before { right: auto; left: 0; }
html[dir="ltr"] .card-title h3.has-icon { padding-left: 0; }
html[dir="ltr"] .ct-icon { margin-left: 0; margin-right: 9px; }

/* Floating chrome pinned to a corner */
html[dir="ltr"] .kpi-ic { left: auto; right: 15px; }
html[dir="ltr"] .modal-close { left: auto; right: 16px; }
html[dir="ltr"] .modal-title { right: auto; left: 22px; }
html[dir="ltr"] .comp-search-wrap::before { right: auto; left: 10px; }
html[dir="ltr"] #country-search { padding: 7px 10px 7px 32px; }

/* Export button group divider + sensitivity legend swatch */
html[dir="ltr"] .exp-grp-btn { border-right: none; border-left: 1px solid var(--border); }
html[dir="ltr"] .exp-grp-btn:first-child { border-left: none; }
html[dir="ltr"] .sens-legend .swatch { margin-left: 0; margin-right: 10px; }

/* Sliders fill from the left in LTR (updateSliderFill paints a gradient) */
html[dir="ltr"] .ctrl-range { direction: ltr; }

/* Item 16: legends read WITH the bars. Chart.js keeps bar x-positions fixed
   regardless of language (verified), so only the legend's reading direction
   flips. The DOM order is authored for Hebrew (RTL → first child = rightmost);
   in English (LTR) these two mixed charts need an explicit left-to-right order
   that follows the bars (left→right, bottom→top), with the overlay LINE last.
   All other charts mirror cleanly and need no override. */
/* חוב ציבורי וגרעון: bars Deficit(left) → Public debt(right), ratio line last */
html[dir="ltr"] #leg-dd-deficit { order: 1; }
html[dir="ltr"] #leg-dd-debt    { order: 2; }
html[dir="ltr"] #leg-dd-ratio   { order: 3; }
/* הכנסות והוצאות הממשלה: Revenue(left) → Other, Defense(right stack), lines last */
html[dir="ltr"] #leg-bal-rev       { order: 1; }
html[dir="ltr"] #leg-bal-other     { order: 2; }
html[dir="ltr"] #leg-bal-defense   { order: 3; }
html[dir="ltr"] #leg-rev-growth-ov { order: 4; }
html[dir="ltr"] #leg-tot-growth    { order: 5; }