/* FILIBA shell + home pilot — grammar per DESIGN-STYLE-GUIDE §4/§6 (one hero, silence by default, calm) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}
[x-cloak] { display: none !important; }

/* ---------- app frame: sidebar (right) + content ---------- */
.frame { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--panel);
  padding: 22px 14px;
  display: flex; flex-direction: column; gap: 4px;
  border-inline-end: 1px solid var(--stroke);
}
.brand { display: flex; align-items: baseline; gap: 8px; padding: 0 10px 18px; }
.brand b { font-size: var(--fs-title); font-weight: 700; letter-spacing: 0.5px; }
.brand span { font-size: var(--fs-meta); color: var(--text-3); }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  color: var(--text-2); font-size: var(--fs-body); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  border: none; background: none; width: 100%; text-align: start; font-family: inherit;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
/* R3.8 contrast pass 3 — disabled nav = TRUE decoration (locked future phases): explicit
   --text-dec instead of inheriting live-looking text-2, and no hover invitation */
.nav-item:disabled { color: var(--text-dec); cursor: default; }
.nav-item:disabled:hover { background: none; color: var(--text-dec); }
.nav-item svg { width: 16px; height: 16px; flex: none; }
.nav-sep { height: 1px; background: var(--stroke); margin: 10px 6px; }
.nav-foot { margin-top: auto; padding: 10px; font-size: var(--fs-meta); color: var(--text-3); }

/* ---------- content ---------- */
.content { padding: 26px var(--gutter) 60px; max-width: 1120px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: var(--gutter); }
/* R3.4 — accent bar before the title (living-mock header treatment: 6×20px rounded accent stub) */
.page-head h1 { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.2px; display: flex; align-items: center; gap: 10px; }
.page-head h1::before { content: ''; width: 6px; height: 20px; border-radius: 3px; background: var(--accent); flex: none; }
/* R3.7 — the date/meta line under "דוח יומי" was Nativ's named contrast complaint: informational → text-2 */
.page-head .meta { font-size: var(--fs-label); color: var(--text-2); font-family: var(--font-num); display: block; margin-top: 4px; margin-inline-start: 16px; }

/* R3.4 A3 — data-freshness pill (mock's floating pill: translucent bg + blur + full-radius) */
.fresh-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(20, 20, 26, 0.82); backdrop-filter: blur(6px);
  border: 1px solid var(--stroke); border-radius: var(--r-pill);
  padding: 7px 14px; font-size: var(--fs-meta); color: var(--text-2);
  cursor: default; transition: border-color var(--t-fast) var(--ease);
}
.fresh-pill:hover { border-color: #3a3a48; }
.fresh-pill b { font-weight: 600; color: var(--text); }
.fresh-pill.quiet b { color: var(--warn); }

/* live-signal pulse (mock filPulse, 2.4s) — killed under prefers-reduced-motion */
@keyframes filPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.dot.pulse { animation: filPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dot.pulse { animation: none; } }

/* accessible keyboard focus — single accent ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* bento: hero dominant + supporting cells */
.bento { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gutter); }
.card {
  background: var(--card); border: 1px solid var(--stroke);
  border-radius: var(--r-card); padding: var(--pad-card);
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-med) var(--ease);
}
.card:hover { border-color: #3a3a48; } /* mock hover: hairline brightens, no shadow-lift */
.card-label { font-size: var(--fs-label); color: var(--text-2); display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* hero */
.hero { border-radius: var(--r-hero); grid-row: span 2; display: flex; flex-direction: column; }
.hero-num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 52px; font-weight: 300; line-height: 1.1; margin-top: 14px;
}
.hero-sub { font-size: var(--fs-label); color: var(--text-2); margin-top: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-num); font-size: var(--fs-meta);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.chip.up { color: var(--ok); background: rgba(62, 207, 142, 0.12); }
.chip.down { color: var(--bad); background: rgba(245, 86, 108, 0.12); }
.chip.flat { color: var(--text-2); background: rgba(255,255,255,0.06); }
.hero-chart { margin-top: auto; padding-top: 18px; }

/* small KPI tiles (2x2) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.tile-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-hero); font-weight: 300; margin-top: 10px; }
/* R3.8 contrast pass 3 — tile-meta labels a number → text-2 (was text-3) */
.tile-meta { font-size: var(--fs-meta); color: var(--text-2); margin-top: 4px; }

/* R3.4 — KPI tile anatomy: number + micro-sparkline row, bullet, context rows */
.kpi-tile { display: flex; flex-direction: column; }
.tile-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.spark { width: 96px; height: 30px; flex: none; margin-bottom: 4px; opacity: 0.9; }
.kpi-tile .bullet { margin-top: 10px; }
.kpi-ctx { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 4px; }
.kpi-ctx .ctx-row { font-size: var(--fs-meta); }
.kpi-ctx .ctx-row > span:first-child { width: 44px; }
.gold-num { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-title); }

/* ghost + highlight (guide §5.3): when the gold metric flags a problem,
   the matching tile gets a focus ring and the calm tiles recede. Hover restores. */
.card.ghost { opacity: 0.68; }
.card.ghost:hover { opacity: 1; }
.card.tile-focus { border-color: rgba(139, 127, 245, 0.45); box-shadow: 0 0 22px rgba(139, 127, 245, 0.08); }
.card-attn { border-color: rgba(245, 86, 108, 0.35); box-shadow: 0 0 22px rgba(245, 86, 108, 0.07); }

.chart-cap { font-size: var(--fs-meta); color: var(--text-3); margin-top: 4px; font-family: var(--font-num); }

/* bottom ticker */
.ticker {
  position: fixed; inset-inline: 0; bottom: 0;
  display: flex; gap: 26px; align-items: center;
  background: rgba(15, 15, 18, 0.85); backdrop-filter: blur(10px);
  border-top: 1px solid var(--stroke);
  padding: 8px var(--gutter); font-size: var(--fs-meta); color: var(--text-3);
  font-family: var(--font-num);
}
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 6px; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: 340px; text-align: center; }
.login-card h1 { font-size: var(--fs-title); margin-bottom: 4px; }
.login-card p { color: var(--text-3); font-size: var(--fs-label); margin-bottom: 22px; }
.field {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--stroke); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: var(--fs-body);
  margin-bottom: 10px; direction: ltr; text-align: left;
}
.field:focus { outline: none; border-color: var(--accent); }
.btn-primary {
  width: 100%; background: var(--accent); color: #101014;
  border: none; border-radius: 10px; padding: 11px;
  font-family: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}
.btn-primary:hover { opacity: 0.9; }
.login-err { color: var(--bad); font-size: var(--fs-label); min-height: 18px; margin-top: 8px; }

/* skeleton shimmer for loading numbers */
.skel { color: transparent; background: linear-gradient(90deg, #22222b 25%, #2a2a35 50%, #22222b 75%); background-size: 200% 100%; border-radius: 6px; animation: sh 1.2s infinite; }
@keyframes sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ==================================================================
   DAILY REPORT screen — grammar per DESIGN-STYLE-GUIDE §4/§6
   (tone-separated zones, list-row grammar, status = color+shape+label)
   ================================================================== */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.dim { color: var(--text-3); }

/* verbatim gapColor strings from ported builder (buildDailyKPIRows) map here */
.text-success { color: var(--ok); }
.text-danger { color: var(--bad); }

/* bullet progress (target vs actual — canonical KPI primitive, guide §13) */
.bullet { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.07); margin-top: 12px; overflow: hidden; }
.bullet-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width var(--t-med) var(--ease); }
/* status-colored bullet fill (guide §13 bullet chart, off-target state) — R weekly-P0 hero/bottom-line */
.bullet-fill.st-bad-fill { background: var(--bad); }

/* hero context block (weekly/monthly cascade + avg chip) */
.hero-ctx { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.ctx-rows { display: flex; flex-direction: column; gap: 4px; }
.ctx-row { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-label); color: var(--text-2); }
.ctx-row > span:first-child { width: 48px; color: var(--text-3); }
.ctx-meta { font-size: var(--fs-meta); color: var(--text-3); }
.card-attn { border-color: rgba(245, 86, 108, 0.35); }

/* tone-separated zone (panel half-step, no hard lines) */
.zone {
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: var(--r-hero); padding: var(--pad-card);
  margin-top: var(--gutter);
}
/* R3.7 — prominent sub-section headers (Nativ: "להבליט יותר את הכותרות של התת סקיישנים").
   Banking-ref grammar: every section repeats ONE header band — title a full type-step up (16→20px),
   the same accent tick as the page h1 (consistent header grammar, wayfinding not decoration),
   and a hairline under the head so the section body reads as its own band. */
.zone-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.zone-head h2 { font-size: var(--fs-title); font-weight: 650; letter-spacing: -0.2px; display: flex; align-items: center; gap: 10px; }
.zone-head h2::before { content: ''; width: 5px; height: 18px; border-radius: 3px; background: var(--accent); opacity: 0.9; flex: none; }
.zone-meta { font-size: var(--fs-meta); color: var(--text-3); display: block; margin-top: 4px; margin-inline-start: 15px; }
/* header action cluster (chip / filter / export) — mock's "action sits at the start-corner" grammar */
.zone-acts { display: flex; align-items: center; gap: 8px; flex: none; }

/* R3.7 — sticky section tabs: slim quick-nav bar (Hero/דופק/משפך/צוות/תכנון/VOC).
   In-flow and quiet at top; once scrolled it "floats" (fresh-pill grammar: translucent + blur + hairline). */
.tabs-sentinel { height: 1px; }
.section-tabs {
  position: sticky; top: 8px; z-index: 40;
  display: flex; gap: 2px; align-items: center; overflow-x: auto;
  padding: 5px; margin: 10px 0 4px; border-radius: 14px;
  border: 1px solid transparent; background: transparent;
  scrollbar-width: none;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tabs.stuck {
  background: rgba(18, 18, 23, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: var(--stroke);
}
.stab {
  border: none; background: none; color: var(--text-2);
  font-family: inherit; font-size: var(--fs-label); padding: 6px 13px; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.stab:hover { color: var(--text); }
.stab.on { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
/* CRITIC_GAPS zone-level ghost+highlight — quiet warn-dot on the tab whose domain owns the
   week's flagged goldMetric (guide §7 management-by-exception, one tick up from row/tile level). */
.stab-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); margin-inline-start: 6px; vertical-align: middle; }
/* anchored sections clear the floating bar on smooth-scroll */
.bento[id], .zone[id] { scroll-margin-top: 58px; }

/* Home v1 (D-14b) — canonical list-row grammar (style guide §6 "שורת-רשימה": name+meta on one
   side, status/action aligned to the trailing edge). Reused by any future zone once it gets real
   data (project-pulse rows use their own .proj-row below — richer: status-dot + heat-bar). */
.list-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.list-row:last-child { border-bottom: none; }
.row-title { font-size: var(--fs-body); color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: var(--fs-meta); color: var(--text-3); margin-top: 2px; }
.btn-ghost {
  flex: none; border: 1px solid var(--stroke); background: transparent; color: var(--text-2);
  font-family: inherit; font-size: var(--fs-meta); padding: 5px 12px; border-radius: var(--r-pill);
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
/* calm empty-state as a reward, not a broken-looking gap (style guide §6 "מצבי-ריק כפרס") */
.empty-state { text-align: center; }

/* ============================================================================================
   Home v2 (R — matched 1:1 to Claude-Design mock `inputs/design-tone/FILIBA-home-mock-standalone.html`,
   rendered live + DOM-inspected for exact grid/spacing/colors). RTL adapted, Sol tokens (near-identical
   to mock's raw rgb() values — kept token-based here, not literal rgb(), so Home stays in the same
   design-token system as every other Sol screen). Grid-area names/measurements match the mock's
   `main{grid-template:"hero hero" "proj today" minmax(190px,1fr) "kpi rem" / 1.14fr 1fr}` + a 294px
   right-aside ("מה דורש אותך" + "המלצות FILIBA") + 42px bottom ticker. Sol adaptation: content scrolls
   (mock was a fixed 812px device-frame — Sol's page can be taller than viewport), so min-heights
   replace the mock's hard pixel height, and the wrapper widens past .content's 1120px cap (home needs
   the aside) via .home-wrap overriding max-width for this screen only. ============================ */
.home-wrap { max-width: 1400px; }
.home-body { display: flex; gap: 14px; align-items: flex-start; }
.home-grid {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template:
    "hero hero" auto
    "proj today" minmax(220px, 1fr)
    "kpi rem" minmax(230px, auto)
    / 1.14fr 1fr;
  gap: 13px;
}
.home-aside { width: 294px; flex: 0 0 294px; display: flex; flex-direction: column; gap: 14px; }
.home-panel {
  background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-card);
  padding: 14px 15px; display: flex; flex-direction: column; min-height: 0;
}
.home-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; gap: 8px; }
.home-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-2); }
.home-panel-sub { font-size: 10.5px; color: var(--text-3); }
.home-link-btn { background: none; border: none; color: var(--text-3); font-size: 11px; cursor: pointer; font-family: inherit; }
.home-link-btn:hover { color: var(--accent); }

/* ---- P0 hero ("מה עכשיו") — the one dominant thing, mock's gradient-card treatment ---- */
.home-hero {
  grid-area: hero; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #221f2c, #1a1922);
  border: 1px solid #3b3552; border-radius: var(--r-hero);
  padding: 16px 19px; display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(139,127,245,0.1), 0 22px 55px -28px rgba(139,127,245,0.5);
}
.home-hero::before {
  content: ''; position: absolute; top: -55px; right: -30px; width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(139,127,245,0.2), transparent 68%); pointer-events: none;
}
.home-hero-top { display: flex; align-items: center; justify-content: space-between; position: relative; gap: 10px; }
.home-hero-eyebrow { display: flex; align-items: center; gap: 8px; }
.home-hero-eyebrow span { font-size: 11px; font-weight: 700; letter-spacing: 0.7px; color: #cfc9f5; }
.home-hero-title { font-size: 24px; font-weight: 700; line-height: 1.12; color: var(--text); letter-spacing: -0.4px; margin-top: 13px; position: relative; }
.home-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.home-hero-why { margin-top: 10px; font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.home-hero-cta { position: relative; margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.home-btn-primary {
  flex: none; background: var(--accent); color: #15101a; border: none; border-radius: 11px;
  padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  box-shadow: 0 10px 24px -10px var(--accent);
}
.home-btn-secondary {
  display: flex; align-items: center; gap: 6px; background: #26262f; color: #d3d3db;
  border: 1px solid #34343f; border-radius: 10px; padding: 10px 15px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.home-btn-tertiary { background: transparent; color: #7c7c88; border: none; padding: 10px 6px; font-size: 13px; cursor: pointer; font-family: inherit; }
.home-hero-next {
  position: relative; margin-top: 12px; padding-top: 11px; border-top: 1px solid #2c2838;
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); flex-wrap: wrap;
}

/* ---- project-pulse ("איפה כל דבר עומד") ---- */
.home-panel-scroll { display: flex; flex-direction: column; gap: 8px; overflow: auto; padding-inline-start: 2px; }
.proj-row {
  text-align: start; background: #141419; border: 1px solid #22222a; border-radius: 10px;
  padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
  font-family: inherit; width: 100%;
}
.proj-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proj-row-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.proj-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.proj-name-text { font-family: var(--font-num); font-size: 12.5px; color: #dcdce2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-row-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proj-note { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-changed { font-size: 10.5px; color: var(--text-3); flex: none; }
.proj-heat { height: 3px; border-radius: 2px; background: #20202a; overflow: hidden; }
.proj-heat-fill { height: 100%; border-radius: 2px; }

/* ---- agenda ("סדר היום") ---- */
.agenda-next {
  background: #141419; border: 1px solid #2b2b34; border-radius: 11px; padding: 11px 12px; margin-bottom: 12px;
}
.agenda-next-top { display: flex; align-items: center; justify-content: space-between; }
.agenda-next-label { font-size: 10px; letter-spacing: 0.5px; color: var(--text-3); }
.agenda-countdown { font-family: var(--font-num); font-size: 11px; color: var(--info); background: rgba(91,157,245,0.1); border: 1px solid rgba(91,157,245,0.32); border-radius: 6px; padding: 1px 7px; }
.agenda-next-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.agenda-next-time { font-family: var(--font-num); font-size: 17px; font-weight: 500; color: var(--text); }
.agenda-next-title { font-size: 14px; color: #d3d3db; }
.agenda-next-acts { display: flex; gap: 8px; margin-top: 11px; }
.agenda-band-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.agenda-band-label { font-size: 10px; letter-spacing: 0.6px; color: #575760; }
.agenda-band-rule { flex: 1; height: 1px; background: #20202a; }
.agenda-item { display: flex; align-items: center; gap: 9px; }
.agenda-item-time { font-family: var(--font-num); font-size: 11.5px; color: var(--text-3); width: 38px; flex: none; }
.agenda-item-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.agenda-item-title { font-size: 12.5px; color: #d3d3db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-item-title.done { color: #5b5b66; text-decoration: line-through; }

/* ---- KPI band ("שורה תחתונה") — bullet/gold-metric hero + 3 dimmed siblings ---- */
.kpi-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kpi-hero-label { font-size: 11.5px; color: #9a9aa8; margin-bottom: 4px; }
.kpi-hero-num-row { display: flex; align-items: baseline; gap: 9px; }
.kpi-hero-num { font-family: var(--font-num); font-size: 34px; font-weight: 400; color: var(--text); line-height: 1; letter-spacing: -1px; }
.kpi-hero-unit { font-size: 12px; color: #7c7c88; }
.kpi-hero-sub { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.kpi-siblings { display: flex; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #20202a; }
.kpi-sib {
  flex: 1 1 0; min-width: 0; text-align: start; background: transparent; border: none; border-radius: 9px;
  padding: 5px 7px; cursor: pointer; opacity: 0.55; font-family: inherit;
}
.kpi-sib-label { font-size: 10.5px; color: #7c7c88; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sib-val { font-family: var(--font-num); font-size: 16px; color: #c8c8d0; }
.kpi-sib-foot { font-size: 10px; color: #626272; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- reminders + quick-capture ("תזכורות + לכידה מהירה") ---- */
.rem-capture { display: flex; align-items: center; gap: 8px; background: #141419; border: 1px solid #2b2b34; border-radius: 11px; padding: 4px 4px 4px 12px; }
.rem-input { flex: 1; background: transparent; border: none; outline: none; font-size: 12.5px; color: var(--text); padding: 7px 0; font-family: inherit; }
.rem-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.rem-chip-label { font-size: 10.5px; color: #575760; align-self: center; }
.rem-chip { font-size: 10.5px; color: #9a9aa8; background: #1c1c22; border: 1px solid #2a2a33; border-radius: 6px; padding: 3px 9px; cursor: pointer; font-family: inherit; }
.rem-chip.on { color: #cfc9f5; background: rgba(139,127,245,0.12); border-color: rgba(139,127,245,0.4); }
.rem-tabs { display: flex; gap: 2px; margin-top: 13px; background: #131318; border: 1px solid var(--stroke); border-radius: 9px; padding: 3px; }
.rem-tab { flex: 1; background: transparent; color: #7c7c88; border: none; border-radius: 7px; padding: 6px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.rem-tab.on { background: #2a2a34; color: #e6e6ec; font-weight: 600; }
.rem-peek { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; overflow: auto; }
.rem-peek-item { display: flex; align-items: center; gap: 9px; }
.rem-peek-time { font-family: var(--font-num); font-size: 11px; color: var(--text-3); width: 36px; flex: none; }
.rem-peek-title { font-size: 12px; color: #c0c0cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- right aside: "מה דורש אותך" + "המלצות FILIBA" ---- */
.need-tabs { display: flex; gap: 2px; background: #131318; border: 1px solid var(--stroke); border-radius: 8px; padding: 2px; }
.need-tab { background: transparent; color: #7c7c88; border: none; border-radius: 6px; padding: 4px 9px; font-size: 10.5px; cursor: pointer; font-family: inherit; }
.need-tab.on { background: #2a2a34; color: #e6e6ec; font-weight: 600; }
.need-card { background: #141419; border: 1px solid var(--stroke); border-radius: 11px; padding: 10px 11px; display: flex; flex-direction: column; gap: 9px; }
.need-card.urgent { border-color: rgba(245,166,35,0.3); }
.need-row { display: flex; align-items: flex-start; gap: 9px; }
.need-icon { width: 26px; height: 26px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; }
.need-title { font-size: 12.5px; font-weight: 600; color: #e2e2e8; }
.need-sub { font-family: var(--font-num); font-size: 10.5px; color: #7c7c88; margin-top: 2px; }
.need-acts { display: flex; gap: 7px; }
.need-act-main { flex: 1; background: #222233; color: #d7d7de; border: 1px solid #33333d; border-radius: 8px; padding: 6px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.need-act-dismiss { flex: none; background: transparent; color: #626272; border: 1px solid #2a2a33; border-radius: 8px; padding: 6px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.ai-rec-text { font-size: 12.5px; line-height: 1.5; color: #d3d3db; }
.ai-rec-acts { display: flex; gap: 8px; margin-top: 9px; }
.ai-rec-btn { background: rgba(139,127,245,0.14); color: #cfc9f5; border: 1px solid rgba(139,127,245,0.4); border-radius: 9px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* ---- bottom ticker (home-specific: richer than the generic .ticker — sparkline + live dot) ---- */
.home-ticker {
  height: 42px; flex: none; border-top: 1px solid var(--stroke); display: flex; align-items: center;
  padding: 0 4px; gap: 22px; margin-top: 14px; background: #0d0d11; border-radius: var(--r-card);
}
.home-ticker-item { display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.home-ticker-sep { width: 1px; height: 16px; background: #20202a; }
.home-ticker-label { font-size: 11px; color: var(--text-3); }
.home-ticker-val { font-family: var(--font-num); font-size: 12px; color: #c8c8d0; }

@media (max-width: 1180px) {
  .home-body { flex-direction: column; }
  .home-aside { width: 100%; flex: none; }
  .home-grid { grid-template: "hero" auto "proj" auto "today" auto "kpi" auto "rem" auto / 1fr; }
}

/* R3.7 — download-to-Excel icon-button (PowerPixel ref: export affordance lives in the section header).
   Same circular ghost grammar as .lact/.day-btn — quiet until hover. */
.dl-btn {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 1px solid var(--stroke); background: rgba(14, 14, 18, 0.6);
  color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dl-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.dl-btn:disabled { opacity: 0.3; cursor: default; }
.dl-btn svg { width: 13px; height: 13px; }
/* export row inside expandable mini-lists (live dashboard puts 📥 inside the expanded panel) */
.mini-acts { display: flex; justify-content: flex-end; padding: 6px 0 2px; }

/* R3.7 — rep filter select (live daily funnelRepFilter, restyled to FILIBA dark grammar) */
.zone-select {
  background: #131318; border: 1px solid var(--stroke); color: var(--text-2);
  border-radius: 9px; padding: 5px 9px; font-family: inherit; font-size: var(--fs-meta); cursor: pointer;
}
.zone-select:focus { outline: none; border-color: var(--accent); }

/* inline stat strip */
.stats-inline { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 10px 2px 14px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-title); font-weight: 400; }
/* R3.8 contrast pass 3 — stat-label labels a number → text-2 (was text-3) */
.stat-label { font-size: var(--fs-meta); color: var(--text-2); }
.stat-sub { font-size: 11px; color: var(--text-3); } /* R3.4 A5 — sub-count under response-time stats */

/* R3.4 B — ticker micro-sparkline */
.tick-spark { display: inline-flex; align-items: center; gap: 8px; }
.tick-spark svg { display: block; }

/* list rows (one grammar everywhere — guide §4) */
.lrows { display: flex; flex-direction: column; }
.lrow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid rgba(255,255,255,0.05); }
.lrow:first-child { border-top: none; }
.ldot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-3); }
.ldot.st-ok { background: var(--ok); } .ldot.st-warn { background: var(--warn); } .ldot.st-bad { background: var(--bad); } .ldot.st-dim { background: var(--text-3); }
.lmain { min-width: 0; flex: 1; }
.lname { font-size: var(--fs-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lmeta { font-size: var(--fs-meta); color: var(--text-3); margin-top: 1px; }
.lend { display: flex; align-items: center; gap: 10px; flex: none; }
.pill { font-size: var(--fs-meta); padding: 2px 9px; border-radius: var(--r-pill); background: rgba(255,255,255,0.06); color: var(--text-2); white-space: nowrap; }
.pill.st-ok { color: var(--ok); background: rgba(62, 207, 142, 0.10); }
.pill.st-warn { color: var(--warn); background: rgba(245, 166, 35, 0.10); }
.pill.st-bad { color: var(--bad); background: rgba(245, 86, 108, 0.10); }
.pill.st-dim { color: var(--text-3); }
.st-ok { color: var(--ok); } .st-warn { color: var(--warn); } .st-bad { color: var(--bad); }
/* R3.10 delta-sweep — neutral/flat signed comparisons read as text-2 (not decoration-grey) */
.st-flat { color: var(--text-2); }
.empty { padding: 14px 2px; font-size: var(--fs-label); color: var(--text-3); }

/* R3.10 nowrap-sweep (Nativ: "ה-9.2 שובר שורה") — numeric values NEVER wrap mid-value.
   Every atomic value carrier: .num spans (dates/hours/counts inline in meta text), KPI numbers,
   stat strip, chips (▲/▼ + value + baseline read as one token), response micro-cells,
   funnel stage meta/count, table numeric cells, potential-$ labels, big counts. */
.num, .tile-num, .stat-num, .hero-num, .big-count, .chip,
.rcell, .scount, .smeta, .stat-sub, .xnums .pot,
.rep-table td.num, .ctx-row .num, .kpi-ctx .ctx-meta .num { white-space: nowrap; }

/* R3.4 A1 — response micro-cell + row action links (tel/mailto/Airtable) */
.rcell { font-size: var(--fs-meta); white-space: nowrap; }
.lacts { display: flex; align-items: center; gap: 5px; }
.lact {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--stroke); background: rgba(14, 14, 18, 0.6);
  color: var(--text-3); display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lact:hover { border-color: var(--accent); color: var(--accent); }
.lact svg { width: 12px; height: 12px; }
/* management-by-exception: healthy rows recede, risk rows keep full presence */
.lrow-calm { opacity: 0.72; transition: opacity var(--t-fast) var(--ease); }
.lrow-calm:hover { opacity: 1; }

/* R3.4 A4 — agent-notes quote in post-call drill rows (2-line clamp, full text in tooltip) */
.note-q {
  font-size: var(--fs-meta); color: var(--text-3); line-height: 1.5; margin-top: 3px;
  padding-inline-start: 8px; border-inline-start: 2px solid var(--stroke);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.more-btn {
  border: none; background: none; color: var(--accent); cursor: pointer;
  font-family: inherit; font-size: var(--fs-meta); padding: 8px 2px 0; text-align: start;
  transition: opacity var(--t-fast) var(--ease);
}
.more-btn:hover { opacity: 0.8; }

/* R3 Section 2 — report-switcher pill row (top of reports screen, יומי/שבועי) */
.report-switcher { margin: 4px 0 10px; width: fit-content; }

/* pill tabs — R3.4: mock's segmented-toggle container (bordered group, filled active segment) */
.pill-tabs {
  display: flex; gap: 2px; flex: none;
  background: #131318; border: 1px solid var(--stroke); border-radius: 11px; padding: 4px;
}
.ptab {
  border: none; background: none; color: var(--text-2);
  font-family: inherit; font-size: var(--fs-meta); padding: 6px 13px; border-radius: 8px;
  cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ptab:hover { color: var(--text); }
.ptab.on { background: var(--accent-dim); color: var(--accent); font-weight: 600; }

/* funnel stage rows */
.stage-row {
  display: grid; grid-template-columns: 1fr auto 44px; grid-template-areas: "name meta count" "bar bar bar";
  gap: 3px 14px; align-items: baseline; width: 100%;
  border: none; background: none; color: var(--text); font-family: inherit; text-align: start;
  padding: 9px 2px; border-top: 1px solid rgba(255,255,255,0.05); cursor: pointer;
  transition: background var(--t-fast) var(--ease); border-radius: 8px;
}
.stage-row:hover { background: rgba(255,255,255,0.03); }
.stage-row.on { background: var(--accent-dim); }
.sname { grid-area: name; font-size: var(--fs-body); }
/* R3.8 contrast pass 3 — smeta labels a number ("ממוצע N ימים") → text-2 (was text-3) */
.smeta { grid-area: meta; font-size: var(--fs-meta); color: var(--text-2); }
/* R3.10 delta-sweep — days-in-stage heat must beat the .smeta base color (equal specificity,
   .smeta is declared later in this file → compound selector wins). Thresholds = drill rows/chart heat. */
.smeta.st-warn { color: var(--warn); }
.smeta.st-bad { color: var(--bad); }
.scount { grid-area: count; font-size: var(--fs-sub); text-align: left; }
.sbar { grid-area: bar; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; display: block; }
.sbar-fill { display: block; height: 100%; border-radius: 2px; background: var(--accent); opacity: 0.55; transition: width var(--t-med) var(--ease); }

/* drill panel */
.drill { margin-top: 12px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 12px var(--pad-card); }
.drill-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-label); color: var(--text-2); font-weight: 600; margin-bottom: 4px; }

/* R3.16 D-29 — fixed-overlay popup variant of .drill (weekly drill modal + F.2 taskModal share this
   grammar). Alpine's x-show sets el.style.display = '' on show (falls back to CSS cascade — this class
   rule) and el.style.display = 'none' on hide (inline, always wins over a class rule with no
   !important — do NOT add !important here, that would beat Alpine's own hide and leave the overlay
   stuck visible; caught live 4.7.2026 rendering "אין תוצאות" over the page after closeWeeklyDrill()). */
.drill-modal-overlay { display: flex; }

/* F.2 — Task Modal field wrapper (Hebrew RTL label + input stack; distinct from login's .field which is LTR) */
.modal-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-body); }
.modal-field input, .modal-field select, .modal-field textarea { font-family: inherit; }

/* rep table */
.table-wrap { overflow-x: auto; }
.rep-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.rep-table th {
  text-align: start; font-size: var(--fs-meta); font-weight: 500; color: var(--text-3);
  padding: 6px 10px; border-bottom: 1px solid var(--stroke);
}
.rep-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.rep-table td.num { font-variant-numeric: tabular-nums; }
.rep-table tr.dimrow td { color: var(--text-3); }

/* VOC */
.voc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.voc-title { font-size: var(--fs-label); color: var(--text-2); font-weight: 600; margin-bottom: 8px; }
.voc-item { padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.voc-item:first-of-type { border-top: none; }
.voc-text { font-size: var(--fs-label); color: var(--text-2); margin-top: 3px; line-height: 1.55; }
.voc-mark { background: var(--accent-dim); color: var(--accent); padding: 1px 3px; border-radius: 3px; font-weight: 600; }

/* AI slot */
.ai-slot { margin-top: var(--gutter); margin-bottom: 20px; }

/* R3.6 — past-day navigation arrows (page-head) */
.day-nav { display: flex; align-items: center; gap: 12px; }
.day-btn {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 1px solid var(--stroke); background: rgba(14, 14, 18, 0.6);
  color: var(--text-2); font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.day-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.day-btn:disabled { opacity: 0.25; cursor: default; }

/* R3.6 — clickable number cells in rep table → inline drill */
.cell-btn.clickable { cursor: pointer; text-decoration: underline dotted rgba(255,255,255,0.25); text-underline-offset: 3px; }
.cell-btn.clickable:hover { color: var(--accent); }
.cell-btn.on { color: var(--accent); background: var(--accent-dim); border-radius: 6px; }

/* R3.6 — Planning zone (תכנון ותפעול) */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); align-items: start; }
.plan-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.prow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-body); }
.prow.sub { font-size: var(--fs-label); color: var(--text-2); }
.prow b { font-weight: 600; }
.plan-sep {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05);
  font-size: var(--fs-label); color: var(--text-2); font-weight: 600;
}
.plan-foot { font-size: var(--fs-meta); color: var(--text-3); font-style: italic; margin-top: 10px; line-height: 1.5; }

/* expandable row-button (no-flight leads / urgent-flights lists) */
.xrow {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 12px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--stroke); background: rgba(14, 14, 18, 0.5);
  color: var(--text); font-family: inherit; font-size: var(--fs-label); cursor: pointer; text-align: start;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.xrow:hover { border-color: var(--accent); }
.xrow.off { cursor: default; opacity: 0.7; }
.xrow.off:hover { border-color: var(--stroke); }
.xend { display: flex; align-items: center; gap: 8px; }
.xnums { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.xnums .pot { font-size: var(--fs-meta); }
.mini-list { max-height: 300px; overflow-y: auto; margin-top: 6px; padding-inline-end: 2px; }

/* 90d urgent flights card */
.urgent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.big-count { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 300; line-height: 1; }
.urgent-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
/* urgent row: flying in <14 days — keep full presence + warm hairline */
.lrow-hot { border-inline-start: 2px solid rgba(245, 86, 108, 0.45); padding-inline-start: 8px; }

/* ==================================================================
   R3.8 (D-16) — visual-first: ECharts containers + chart-card grammar.
   Charts live on .viz-card (card tone inside the panel zones) with a quiet
   title; canvases are direction:ltr (ECharts positions tooltips in LTR
   coordinates — content stays Hebrew via formatters).
   ================================================================== */
.echart { direction: ltr; width: 100%; }
.hero-trend { height: 150px; }
.viz-card {
  background: var(--card); border: 1px solid var(--stroke);
  border-radius: var(--r-card); padding: 12px 14px;
}
.viz-title { font-size: var(--fs-meta); color: var(--text-2); margin-bottom: 6px; }
.pulse-viz { display: flex; gap: var(--gutter); align-items: stretch; margin-bottom: 10px; }
.pulse-viz .viz-card:first-child { flex: 1 1 auto; min-width: 0; }
.pulse-viz .donut-card { flex: 0 0 240px; }
.heat-ch { height: 205px; }
.donut-ch { height: 215px; }
.donut-ch.tall { height: 250px; }
/* R3.9 stage-flow pile-up bars: JS sets inline height per stage count (n*52+12); 250px = pre-render fallback */
.funnel-ch { height: 250px; margin-bottom: 2px; }
/* heat legend under the pile-up bars (segdot grammar): accent = flowing, warn/bad = stuck 14+/30+ days */
.funnel-legend { margin: 0 0 10px; }
.segdot.fa { background: var(--accent); }
.segdot.fw { background: var(--warn); }
.segdot.fb { background: var(--bad); }
/* compact secondary stage list under the pile-up bars: bars off (the chart IS the visual),
   tighter rhythm; rows keep name/avg/count + click-to-drill */
.lrows.compact .sbar { display: none; }
.lrows.compact .stage-row { grid-template-areas: "name meta count"; padding: 7px 2px; }
/* team: table + comparison bars side by side */
.team-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gutter); align-items: start; }
.team-bars { min-width: 0; }
/* urgent 90d: donut column + the two expandable lists */
.urgent-body { display: flex; gap: var(--gutter); align-items: flex-start; }
.urgent-donut { flex: 0 0 250px; }
.urgent-body .urgent-cols { flex: 1 1 auto; min-width: 0; }
/* flights nested mini-bar (היום ⊂ שבוע ⊂ 30 יום) — layered fills, accent depth = closer window */
.seg-wrap { margin-top: 12px; cursor: help; }
.seg-track {
  position: relative; height: 10px; border-radius: 5px; overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.seg { position: absolute; inset-inline-start: 0; top: 0; height: 100%; border-radius: 5px; display: block; transition: width var(--t-med) var(--ease); }
.seg.s30 { width: 100%; background: rgba(139, 127, 245, 0.18); }
.seg.s7 { background: rgba(139, 127, 245, 0.5); }
.seg.s1 { background: var(--accent); }
.seg-legend { display: flex; gap: 14px; margin-top: 6px; font-size: var(--fs-meta); color: var(--text-2); }
.segdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 5px; }
.segdot.d1 { background: var(--accent); }
.segdot.d7 { background: rgba(139, 127, 245, 0.5); }
.segdot.d30 { background: rgba(139, 127, 245, 0.18); }

/* ===================== Blueprint 02 Slice S-C — screen 3 (שבוע ותור) drag-buckets =====================
   Per v4 canvas spec (03_LOGIC_AND_BEHAVIORS.md §Drag & Drop): source card opacity .35 while dragging,
   ghost card rotate -1.5deg + shadow, drop target = solid accent border + transparent accent bg. */
.task-bucket-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.task-bucket {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 10px;
  min-height: 160px;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.task-bucket-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-label); color: var(--text-2); font-weight: 600;
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--stroke);
}
.task-bucket-body { display: flex; flex-direction: column; gap: 0; min-height: 60px; }
/* drop target — solid accent border + transparent accent bg (locked spec wording) */
.task-bucket.bucket-drop-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}
/* source card while being dragged — opacity .35 (locked spec wording) */
.task-drag-card.task-drag-source { opacity: 0.35; }
.task-drag-card { transition: opacity var(--t-fast) var(--ease); }
.task-drag-card:active { cursor: grabbing; }
/* Native HTML5 drag image can't be styled via CSS on the dragged element directly in most browsers
   (the browser snapshots it at dragstart), so the -1.5deg tilt + shadow is applied via a cloned drag
   image element (see screens/tasks.js onDragStart if a custom image is ever wired); until then the
   browser's default drag ghost is used — still satisfies "opacity .35 on source" + "accent drop
   target", the two behaviors that are state-visible and testable without a canvas-diff. */

/* ===================== Blueprint 02 Slice S-C — screen 5 (Synced Tasks Bar), GLOBAL =====================
   Persistent bottom strip on ALL Sol screens (mounted once on the shell, not per-screen). */
.synced-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: var(--panel);
  border-top: 1px solid var(--stroke);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(6px);
}
.synced-bar-head {
  font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; flex: none;
}
.synced-bar-chips {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; flex: 1; min-width: 0;
  scrollbar-width: thin;
}
.synced-chip {
  display: flex; align-items: center; gap: 6px; flex: none;
  background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-pill);
  padding: 4px 10px; font-size: var(--fs-meta); cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease);
}
.synced-chip:hover { border-color: var(--accent); }
.synced-chip.done { opacity: 0.55; text-decoration: line-through; }
.synced-bar-toggle {
  flex: none; background: none; border: none; color: var(--text-3); cursor: pointer;
  font-size: var(--fs-meta); padding: 4px 6px;
}
/* body needs bottom clearance whenever the bar is visible + expanded, so page content never hides
   behind the fixed strip — applied via a body-level class toggled from appRoot (index.html). */
body.has-synced-bar .content { padding-bottom: 64px; }

@media (max-width: 900px) {
  .task-bucket-board { grid-template-columns: repeat(2, 1fr); }
}

/* responsive */
@media (max-width: 900px) {
  .frame { grid-template-columns: 64px 1fr; }
  .bento { grid-template-columns: 1fr; }
  .voc-cols { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .urgent-cols { grid-template-columns: 1fr; }
  /* R3.8 — chart layouts stack */
  .pulse-viz { flex-direction: column; }
  .pulse-viz .donut-card { flex: 1 1 auto; }
  .team-layout { grid-template-columns: 1fr; }
  .urgent-body { flex-direction: column; }
  .urgent-donut { flex: 1 1 auto; width: 100%; }
}