/* ============================================================
   LINASYSTEMS · ADMIN DASHBOARD v7 — OPERATOR CONSOLE
   The final / production admin shell. Civic identity preserved,
   refined typography + new chrome (icon rail, status strip, Pulse).
   Token NAMES preserved from v5/v6 so all JS contracts keep working;
   only VALUES change. Layout chrome (rail / status strip) is new.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ============================================================
     v8 REDESIGN (2026-06-03) — LINASYSTEMS civic identity.
     LIGHT is the default theme; [data-theme="dark"] (below) overrides
     the base color/surface tokens with a soft slate (lighter than v7's
     near-black). Token NAMES are preserved so the ~14k-line JS contract
     and all inline var(--x) styles keep resolving — the legacy alias
     layer now remaps cleanly onto the new palette. Interactive aliases
     (--gold/--steel/--brass/--blue) all resolve to LINAsystems blue so the
     one accent stays consistent; real civic gold = --gold-civic.
     7 dead aliases removed (--cyan/--moss/--red-wash-2/--red-alias/
     --s-bg/--paper-color/--sidebar-w; all had 0 var() references).
     ============================================================ */

  /* ===== surfaces — LINAsystems daylight ===== */
  --bg:#e8ecf4; --panel:#ffffff; --panel-2:#f4f7fb; --panel-3:#eaeef5;
  --line:#e4e8f0; --line-2:#d2dae6;

  /* ink ramp — deep navy, not pure black */
  --ink:#0d1f38; --ink-2:#46566f; --ink-3:#6c7c95; --ink-4:#9aa7ba;
  --ink-5:#c4cedb;   /* decorative hairline tier */

  /* ===== LINAsystems identity (rationed: blue=interactive; green/amber/red=status; violet=MIND) ===== */
  --navy:#0e2c52; --navy-2:#143a6b;              /* civic chrome */
  --accent:#16335f; --accent-2:#23528f;          /* interactive / primary (LINAsystems NAVY) */
  --accent-wash:rgba(22,51,95,.10); --accent-line:rgba(22,51,95,.32);
  --ok:#1f8a4c; --warn:#c47700; --bad:#d21f30;   /* bad = LINAsystems red */
  --gold-civic:#e0a106; --gold-civic-wash:rgba(224,161,6,.14);  /* civic highlight, rationed */
  --mind:#6d3bd6; --mind-wash:rgba(109,59,214,.12);

  /* on-fill text */
  --on-accent:#ffffff; --on-navy:#eaf1fb; --on-navy-dim:#9fb6d6; --on-gold:#3a2a00;

  /* type */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-display:var(--font-sans);
  --font-ui:var(--font-sans);
  --font-narrow:var(--font-sans);

  /* spacing */
  --s-0:2px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:28px; --s-8:36px; --s-9:52px;

  /* radius — 2026-06 rebuild: rounder, more 'product' feel */
  --r-xs:5px; --r-sm:10px; --r:14px; --r-md:18px; --r-lg:22px; --r-xl:26px;

  /* layout — VALUES preserved (JS-safe) */
  --topbar-h:56px;
  --rail-w:66px;
  --rail-w-expanded:244px;
  --subbar-h:38px;
  --status-h:28px;
  --max-canvas:1560px;

  /* shadows — soft on light; -1 lifts cards off the contrasted canvas */
  --shadow-1:0 1px 2px rgba(13,31,56,.05), 0 4px 12px rgba(13,31,56,.07);
  --shadow-2:0 8px 24px rgba(13,31,56,.10);
  --shadow-3:0 12px 34px rgba(13,31,56,.16);
  --shadow-pop:0 12px 40px rgba(13,31,56,.18);

  /* motion */
  --ease:cubic-bezier(0.2,0.7,0.2,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:80ms; --dur:160ms; --dur-slow:240ms;

  /* focus rings — single language */
  --ring-focus:0 0 0 3px rgba(22,51,95,.45);
  --ring-danger:0 0 0 3px rgba(210,31,48,.28);
  --ring-plum:0 0 0 3px var(--mind-wash);

  /* utility */
  --hover-overlay:rgba(22,51,95,.06);
  --focus-glow:rgba(22,51,95,.28);

  /* ===== legacy aliases — remap old names onto the new palette ===== */

  /* surface names */
  --canvas:var(--bg); --shade:var(--panel-3);
  --paper:var(--panel); --paper-2:var(--panel-2); --paper-3:var(--panel-3);
  --surface:var(--panel); --surface-2:var(--panel-2); --surface-3:var(--panel-3);
  --card-bg:var(--panel);
  --bg-2:var(--panel-3);
  --s-bg-elev:var(--panel-2);

  /* rule / hairline names */
  --rule:var(--line); --rule-2:var(--line-2);
  --hairline:var(--line); --hairline-bright:var(--line-2);
  --hairline-strong:var(--line-2);
  --border:var(--line);
  --s-hairline:var(--line);

  /* ink / text names */
  --text:var(--ink); --text-dim:var(--ink-2); --text-mute:var(--ink-3);
  --text-muted:var(--ink-3); --text-faint:var(--ink-4); --text-faded:var(--ink-4);
  --text-strong:var(--ink); --ink-muted:var(--ink-3);
  --s-text:var(--ink); --s-text-mute:var(--ink-3); --s-text-faint:var(--ink-4);
  --paper-bg:var(--panel);

  /* font alias */
  --s-font-mono:var(--font-mono);

  /* accent / color aliases — interactive family → LINAsystems blue */
  --gold:var(--accent); --gold-soft:var(--accent-2); --gold-deep:var(--accent-2);
  --gold-wash:var(--accent-wash); --gold-wash-2:var(--accent-line);
  --brass:var(--accent); --brass-deep:var(--accent-2);
  --steel:var(--accent); --steel-deep:var(--accent-2); --steel-wash:var(--accent-wash);
  --blue:var(--accent);

  --sage:var(--ok); --sage-deep:var(--ok); --sage-wash:rgba(31,138,76,.13);
  --green:var(--ok);

  --peach:var(--warn); --peach-deep:var(--warn); --peach-wash:rgba(196,119,0,.13);
  --rust:var(--warn);

  --red:var(--bad); --red-soft:var(--bad); --red-deep:var(--bad);
  --red-wash:rgba(210,31,48,.10);
  --lina-red:var(--bad);
  --oxblood:var(--bad); --oxblood-deep:var(--bad);

  --plum:var(--mind); --plum-wash:var(--mind-wash);
  --slate:var(--mind); --purple:var(--mind);
}

/* ===== SOFT-DARK (LINAsystems after-dark) — lighter slate than v7's near-black.
   Overrides only base color/surface/shadow tokens; every alias above
   references these, so the whole palette follows automatically. ===== */
[data-theme="dark"] {
  --bg:#111927; --panel:#1a2433; --panel-2:#212e40; --panel-3:#2a3950;
  --line:#31425b; --line-2:#43577a;

  --ink:#eaf1fb; --ink-2:#a9b8d0; --ink-3:#7b8aa6; --ink-4:#586a87;
  --ink-5:#43577a;

  --navy:#0c1b30; --navy-2:#13294a;
  --accent:#5d90df; --accent-2:#7eaae9;
  --accent-wash:rgba(93,144,223,.18); --accent-line:rgba(93,144,223,.5);
  --ok:#37c275; --warn:#e3981f; --bad:#ff5d68;
  --gold-civic:#f1b53f; --gold-civic-wash:rgba(241,181,63,.18);
  --mind:#9a6bf5; --mind-wash:rgba(154,107,245,.18);

  --hover-overlay:rgba(93,144,223,.12);
  --focus-glow:rgba(93,144,223,.40);

  --shadow-1:0 1px 3px rgba(0,0,0,.45);
  --shadow-2:0 6px 20px rgba(0,0,0,.50);
  --shadow-3:0 14px 36px rgba(0,0,0,.55);
  --shadow-pop:0 12px 40px rgba(0,0,0,.55);

  /* status washes need a touch more alpha to read on slate */
  --sage-wash:rgba(55,194,117,.16);
  --peach-wash:rgba(227,152,31,.16);
  --red-wash:rgba(255,93,104,.16);
  --ring-focus:0 0 0 3px rgba(93,144,223,.55);
}

/* — Keyframes for v5.2 micro-interactions — */
@keyframes hover-lift {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@keyframes scale-press {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.98); opacity: 0.9; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes slide-in-bottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes border-slide-in {
  from { width: 0; }
  to { width: 3px; }
}

/* — Reset & base — */
html, body {
  margin: 0; padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
a { color: var(--steel); text-decoration: none; }
a:hover { color:var(--steel); text-decoration: underline; }
code, kbd, samp, pre { font-family: var(--font-mono); }
button { font-family: inherit; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; }

/* — Utility — */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.mono { font-family: var(--font-mono); }
.text-mute { color: var(--ink-3); }
.text-faint { color: var(--ink-4); }
.text-sage { color:var(--sage); }
.text-red { color:var(--red); }
.text-gold { color:var(--gold); }

/* — Typography — */
.h1, h1.h1, .page-title {
  font-family: var(--font-sans);
  font-size: 34px; line-height: 1.05;
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 var(--s-2);
}
.h2 { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 var(--s-2); }
.h3 { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 var(--s-2); }
/* civic gold eyebrow — the brand signature; paired with a 16px gold tick */
.eyebrow {
  font-family: var(--font-sans);
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold-deep); margin-bottom: var(--s-2);
}
.eyebrow::before {
  content: ""; flex: none;
  width: 16px; height: 2px; background: var(--gold);
}
.subtitle { color: var(--ink-3); font-size: 13px; max-width: 760px; margin: 0 0 var(--s-5); }
.meta { color: var(--ink-3); font-size: 11.5px; font-family: var(--font-mono); letter-spacing: 0.02em; }

/* — Mono-numeral data law: tabular figures everywhere numbers live (instrument-grade alignment) — */
.mono, .meta, .num, .badge, .sc-stat .n,
.table td.num, .table td.mono,
.v7-status, code, kbd, samp, pre { font-variant-numeric: tabular-nums; }

/* ============================================================
   SHELL CHROME (.shell / .topbar / .sidebar / .main / .subbar /
   .canvas / .panel / .nav-*) is defined ONCE in the Mission Control
   chrome block further down. The old first-block duplicates were
   removed so each chrome selector has a single source of truth.
   ============================================================ */

/* command palette display text (markup hook, not chrome layout) */
.topbar .cmdk .cmdk-topbar-display { flex: 1; color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbd {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  background: var(--paper); color: var(--ink-3);
  padding: 2px 6px; border-radius: var(--r-xs);
  border: 1px solid var(--rule);
}

/* svc dots */
.svc-dots { display: flex; gap: var(--s-3); align-items: center; }
.svc {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: var(--s-1);
}
.svc .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); display: inline-block; }
.svc.warn .dot { background: var(--peach-deep); }
.svc.bad .dot, .svc.err .dot { background: var(--red); }

/* AI sync pill */
.ai-sync-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 28px; padding: 0 var(--s-3);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2); cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap; flex-shrink: 0;
}
.ai-sync-pill:hover { background: var(--paper-3); border-color: var(--gold-deep); }
.ai-sync-pill .ai-sync-dot { font-size: 10px; line-height: 1; }
.ai-sync-pill .ai-sync-label { font-size: 10.5px; }
.ai-sync-pill.ai-sync-paused   { background: var(--paper-2); color: var(--ink-3); border-color: var(--rule); }
.ai-sync-pill.ai-sync-scanning { background: var(--steel-wash); color:var(--steel); border-color: var(--steel); }
.ai-sync-pill.ai-sync-synced   { background: var(--sage-wash); color:var(--sage); border-color: var(--sage); }
.ai-sync-pill.ai-sync-drift    { background: var(--gold-wash); color:var(--gold); border-color: var(--gold); }
.ai-sync-pill.ai-sync-conflict { background: var(--red-wash); color:var(--red); border-color: var(--red); }

/* emergency maintenance pill (topbar) */
.maint-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 28px; padding: 0 var(--s-3);
  border: 1px solid var(--rule); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  cursor: pointer; transition: all var(--dur) var(--ease);
  white-space: nowrap; flex-shrink: 0; letter-spacing: .01em;
}
.maint-pill.maint-off { background: var(--paper-2); color: var(--ink-3); border-color: var(--rule); }
.maint-pill.maint-off:hover { background: var(--red-wash); border-color: var(--red); color: var(--red); }
.maint-pill.maint-on { background: var(--red); color: #fff; border-color: var(--red); animation: maint-pulse 1.6s ease-in-out infinite; }
.maint-pill.maint-on:hover { opacity: .9; }
.maint-pill .maint-dot { font-size: 8px; line-height: 1; }
@keyframes maint-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

/* maintenance-mode banner (below topbar, above shell) */
.maintenance-banner {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--red); color: #fff;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  padding: 7px 16px; letter-spacing: .01em; flex-shrink: 0; z-index: 90;
}
.maintenance-banner button {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: var(--r-sm); padding: 3px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .01em;
  transition: background var(--dur-fast) var(--ease);
}
.maintenance-banner button:hover { background: rgba(255,255,255,.3); }

/* icon button (topbar bell) */
.icon-btn {
  width: 30px; height: 30px;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--paper-3); border-color: var(--gold-deep); color:var(--gold); }

/* NOTE (v8): the .topbar .user chip and #hamburger styles are defined once in
   the single-source "Mission Control" chrome block further down. The old
   first-block duplicates that lived here were removed in the v8 redesign. */

/* ============================================================
   SIDEBAR / NAV chrome (.sidebar / .nav-sec / .nav-list / .nav-item)
   is defined ONCE in the Mission Control chrome block further down.
   The old wide-sidebar + env-card duplicates were removed (the rail
   hides .env-card), leaving only the .badge component styles below.
   ============================================================ */

/* sidebar badges (component colors; rail layout/visibility handled by
   the Mission Control chrome block) */
.nav-item .badge,
.badge {
  min-width: 18px; height: 18px;
  background: var(--paper-2); color: var(--ink-3);
  font-size: 10px; font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 9px; padding: 0 var(--s-2);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
}
.badge.live {
  background: var(--sage-wash); color:var(--sage);
  border-color: rgba(95,184,127,0.4);
  font-family: var(--font-sans); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.badge.alert {
  background: var(--red-wash); color:var(--red-soft);
  border-color: rgba(224,69,69,0.45);
}
.badge.warn {
  background: var(--gold-wash); color:var(--gold);
  border-color: var(--gold-wash-2);
}
.badge.ai {
  background: var(--peach-wash); color:var(--peach);
  border-color: rgba(236,148,95,0.4);
}
.badge.mind {
  background: var(--plum-wash); color:var(--plum);
  border-color: rgba(180,126,203,0.4);
}

/* ============================================================
   MAIN / CANVAS / SUBBAR / PANELS chrome (.main / .subbar / .canvas /
   .panel / .panel-workspace) is defined ONCE in the Mission Control
   chrome block further down. Only the .crumbs component styles and the
   scroll-owner behavior remain here.
   ============================================================ */
.crumbs {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.2;
  color: var(--ink-3);
}
.crumbs span { color: var(--ink-3); }
.crumbs .sep { color: var(--ink-4); margin: 0 var(--s-1); opacity: .8; }
.crumbs b { color: var(--ink); font-weight: 600; }

#main { scroll-behavior: smooth; }

/* split-pane for workspace panels (sessions / emails / review)
   Layout: [list-pane] [resizer 4px] [detail-pane] */
.split-pane {
  flex: 1; min-height: 0;
  /* First column consumes the resizer's --split-list-width (set by the drag JS on
     this element); falls back to 360px before the first drag. Without the var the
     resizer was dead. */
  display: grid; grid-template-columns: var(--split-list-width, 360px) 4px minmax(0, 1fr);
  border-top: 1px solid var(--rule);
  background: var(--canvas);
}
.split-pane > * { min-height: 0; min-width: 0; }
/* Mobile-only list↔detail back button — hidden on desktop (the mobile @media
   below flips it to inline-flex). Without this base rule it showed everywhere. */
.mobile-pane-back { display: none; }
.split-pane > .split-resizer {
  background: var(--rule);
  cursor: col-resize;
  transition: background var(--dur) var(--ease);
}
.split-pane > .split-resizer:hover,
body.split-resizing .split-pane > .split-resizer { background: var(--gold); }
.split-pane > .list-pane {
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  overflow: hidden auto;
  min-width: 0;
}
.split-pane > .detail-pane {
  background: var(--paper);
  padding: var(--s-5) var(--s-6);
  overflow-y: auto;
}

/* ============================================================
   M-TABS (in-panel tab strip)
   ============================================================ */
.mtabs {
  display: flex; align-items: center;
  gap: var(--s-1);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 var(--s-5);
  padding: 0;
}
.panel-workspace > .mtabs {
  padding: 0 var(--s-5);
  background: var(--paper);
  margin: 0;
}
/* Direct-child header bits (eyebrow / h1) need their own horizontal padding
   when inside a panel-workspace, since .panel-workspace.active strips canvas
   padding to 0 to let split-panes fill edge-to-edge. */
.panel-workspace > .eyebrow,
.panel-workspace > .h1,
.panel-workspace > h1.h1,
.panel-workspace > .subtitle {
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}
.panel-workspace > .eyebrow {
  padding-top: var(--s-5);
  margin-bottom: 0;
}
.panel-workspace > .h1,
.panel-workspace > h1.h1 {
  margin-bottom: var(--s-3);
}
.mtab {
  background: transparent; border: 0;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
  border-radius: 0;
}
.mtab:hover { color: var(--ink-2); }
.mtab:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-xs);
}
.mtab.active {
  color: var(--ink); font-weight: 600;
}
/* RATIONED GLOW role 1 — active-tab underline */
.mtab.active::after {
  content: ""; position: absolute;
  left: var(--s-4); right: var(--s-4); bottom: -1px;
  height: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px var(--gold-wash-2);
}

/* sub-tab cluster labels + dividers (used to group Knowledge's many tabs) */
.mtab-group {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
  align-self: center; padding: 0 6px 0 2px; white-space: nowrap; user-select: none;
}
.mtab-divider {
  width: 1px; height: 16px; align-self: center;
  background: var(--line-2); margin: 0 8px; flex-shrink: 0;
}
.mtab-content { display: none; }
.mtab-content.active { display: block; }
.panel-workspace > .mtab-content { flex: 1; min-height: 0; display: none; flex-direction: column; }
.panel-workspace > .mtab-content.active { display: flex; }

/* Sub-section tabs (Settings modal, Feedback sub-tabs) — hide inactive panes */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* tab (used in dashboard sub-tabs, email tabs, review tabs) */
.tab {
  background: transparent; border: 1px solid transparent;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
}
.tab:hover { background: var(--paper-2); color: var(--ink); }
.tab.active {
  background: var(--paper); color: var(--ink); font-weight: 600;
  border-color: var(--rule);
  box-shadow: var(--shadow-1);
}
.tab.active:focus-visible {
  box-shadow: var(--shadow-1), var(--ring-focus);
}

/* period selector tabs */
.ptab {
  background: transparent; border: 0;
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: all var(--dur) var(--ease);
}
.ptab:hover { background: var(--paper-2); color: var(--ink); }
.ptab.active {
  background: var(--ink); color: var(--paper); font-weight: 600;
}

/* filter pill */
.fpill {
  background: var(--paper); border: 1px solid var(--rule);
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 999px;
  transition: all var(--dur) var(--ease);
}
.fpill:hover { background: var(--paper-2); border-color: var(--ink-4); }
.fpill.active {
  background: var(--accent-wash); color: var(--accent);
  border-color: var(--accent-line); font-weight: 600;
}

/* email-tab uses .tab; data-email-tab kept as data attribute */
.email-tab { display: inline-flex; align-items: center; gap: var(--s-2); }
.email-tab .count {
  background: var(--paper-2); color: var(--ink-3);
  border-radius: 10px; padding: 0 var(--s-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}

/* ============================================================
   BUTTONS
   ============================================================ */
button, .button, .btn {
  height: 32px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  font: inherit;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

button:hover, .button:hover, .btn:hover {
  background: var(--paper-3);
  border-color: var(--ink-4);
  color: var(--ink);
}

button:active, .button:active, .btn:active {
  transform: scale(0.98);
}

button:disabled, .button:disabled, .btn:disabled, .btn.disabled {
  background: var(--paper-2);
  color: var(--ink-5);
  cursor: not-allowed;
  opacity: 0.45;
}

button:focus-visible, .button:focus-visible, .btn:focus-visible {
  outline: 0;
  box-shadow: var(--ring-focus);
  border-color: var(--gold);
}

/* btn-primary = the ONE filled-color action: solid AMBER + inset top highlight.
   Dark ink on amber stays high-contrast AA across the whole fill. */
.btn-primary, button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: var(--shadow-1);
}

.btn-primary:hover, button.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: var(--shadow-2);
}

.btn-primary:active, button.primary:active {
  filter: brightness(0.96);
  transform: scale(0.98);
}

.btn-primary:disabled, button.primary:disabled {
  filter: grayscale(0.4);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary:focus-visible, button.primary:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-glow);
  border-color: var(--gold);
}

.btn-success {
  background: var(--sage); color: var(--on-accent); border-color: var(--sage-deep);
  font-weight: 700;
}
.btn-success:hover { filter: brightness(1.06); border-color: var(--sage); }

/* solid red-deep (not a red→red-deep gradient) so light label #FCEAEA holds ~5.2:1 AA;
   the bright-red top stop only reached 3.5:1. */
.btn-danger {
  background: var(--red-deep);
  color: #FCEAEA; border-color: var(--red-deep);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-danger:hover { filter: brightness(1.1); border-color: var(--red); }
.btn-danger:focus-visible { box-shadow: var(--ring-danger); }

.btn-ghost, .btn.ghost {
  background: transparent; border-color: transparent; color: var(--ink-3);
}
.btn-ghost:hover, .btn.ghost:hover { background: var(--hover-overlay); border-color: transparent; color: var(--ink); }

.btn-sm { height: 26px; font-size: 12px; padding: 0 var(--s-3); }
.btn-xs { height: 24px; font-size: 11px; padding: 0 var(--s-2); }
.btn-lg { height: 40px; font-size: 14px; padding: 0 var(--s-5); }
.btn-block { width: 100%; }

.btn-purple {
  background: var(--plum); color: var(--paper);
  border-color: var(--plum); font-weight: 600;
}
.btn-purple:hover { filter: brightness(1.08); }
.btn-purple:focus-visible { box-shadow: var(--ring-plum); }

.btn-warn {
  background: var(--warn); color: var(--on-accent);
  border-color: var(--warn); font-weight: 700;
}
.btn-warn:hover { filter: brightness(1.06); }
.btn-warn:focus-visible { box-shadow: var(--ring-focus); }

/* ============================================================
   CARDS / SURFACES / KPI
   ============================================================ */
.card, .surface {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-1);   /* carries the brass top-edge material tell */
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover, .surface:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--rule-2);
}
.card.compact { padding: var(--s-3); }
.card-head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .meta { margin-left: auto; }
/* Filter-pill clusters get their own row inside .card-head so they don't
   wrap awkwardly between title and action buttons. */
.card-head > .filter-pills {
  flex-basis: 100%; order: 99;
  margin: var(--s-1) 0 0;
}

.kpi-row, .kpi-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  margin: 0 0 var(--s-5);
}
.kpi {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* — Accent strip is intentional on KPIs only (hero metric tiles), and it's a
   LEFT edge to match the Pulse KPI + .stat-card tiles (one tile language).
   .card, .surface, .summary-card are deliberately strip-less so the
   strip carries semantic weight: "this is a headline number." — */
.kpi::before {
  content: ""; position: absolute;
  top: 0; left: 0; width: 3px; height: 100%;
  background: var(--gold);
}
.kpi:hover { border-color: var(--ink-4); transform: translateY(-1px); }
.kpi .kpi-label, .kpi .label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
  font-family: var(--font-sans);
}
.kpi .kpi-value, .kpi .stat-value, .kpi .value, .kpi .v {
  font-family: var(--font-mono);
  font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink); line-height: 1.1;
  margin: 0;
}
.kpi .kpi-delta, .kpi .delta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); margin-top: var(--s-1);
}
.kpi .kpi-delta.up { color:var(--sage); }
.kpi .kpi-delta.down { color:var(--red); }

/* — KPI color variants — */
.kpi.kpi-brass::before   { background: var(--gold); } /* matches default; pins intent */
.kpi.kpi-sage::before    { background: var(--sage); }
.kpi.kpi-oxblood::before { background: var(--red); }
.kpi.kpi-slate::before   { background: var(--plum); }
.kpi.kpi-steel::before   { background: var(--steel); }
.kpi.kpi-rust::before    { background: var(--peach-deep); }

/* — Stat cards (Analytics) — unified with the Pulse KPI tile: LEFT-edge
     stripe (never top-edge) so every metric tile reads the same. — */
.stat-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-4);
  border-radius: var(--r); padding: var(--s-5);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.stat-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.stat-card.blue   { border-left-color: var(--steel); }
.stat-card.green  { border-left-color: var(--sage); }
.stat-card.gold   { border-left-color: var(--gold); } /* matches accent; pins intent */
.stat-card.red    { border-left-color: var(--red); }
.stat-card.purple { border-left-color: var(--plum); }
.stat-card.muted  { border-left-color: var(--ink-4); }
.stat-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin-bottom: var(--s-2);
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink); line-height: 1.1;
}

/* — Charts and progress bars (Analytics) — */
.chart-container {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r); padding: var(--s-4) var(--s-5);
}
.chart-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin-bottom: var(--s-3);
}
.progress-bar {
  height: 8px; background: var(--paper-2);
  border-radius: 999px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--steel);
  transition: width var(--dur-slow) var(--ease-out);
}
.progress-fill.blue  { background: var(--steel); } /* matches default; pins intent */
.progress-fill.green { background: var(--sage); }
.progress-fill.gold  { background: var(--gold); }

/* — Layout utilities (legacy markup) — */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.flex   { display: flex; }
.flex-between {
  display: flex; align-items: center; justify-content: space-between;
}
.gap-8  { gap: var(--s-2); }
.mt-14  { margin-top: var(--s-4); }       /* rounds 14 → 16px scale slot */
.mb-8   { margin-bottom: var(--s-2); }
.mb-12  { margin-bottom: var(--s-3); }
.mb-14  { margin-bottom: var(--s-4); } /* legacy markup name; same 16px slot as .mb-16 */
.mb-16  { margin-bottom: var(--s-4); }
.dash-toolbar {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; margin-bottom: var(--s-4);
}
.dash-tab-content { /* tab content container; layout handled per-instance */ }

@media (max-width: 980px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* summary-card pattern from packages/lina_core/summaries — domain-colored left-border KPI card */
.summary-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: grid; gap: var(--s-2);
  margin-bottom: var(--s-4);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* hover-reveal status wash bleeding in from the left edge (sits behind content) */
.summary-card::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 48px;
  background: linear-gradient(90deg, var(--gold-wash), transparent);
  opacity: 0; transition: opacity var(--dur) var(--ease);
  pointer-events: none; z-index: 0;
}
.summary-card > * { position: relative; z-index: 1; }
.summary-card:hover::before { opacity: 0.6; }
.summary-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.summary-card.sc-green { border-left-color: var(--sage); }
.summary-card.sc-amber { border-left-color: var(--gold); }
.summary-card.sc-red   { border-left-color: var(--red); }
.summary-card.sc-mind  { border-left-color: var(--plum); }    /* MIND domain */
.summary-card.sc-ai    { border-left-color: var(--peach); }   /* AI domain */
.summary-card.sc-green:hover::before { background: linear-gradient(90deg, var(--sage-wash), transparent); }
.summary-card.sc-red:hover::before   { background: linear-gradient(90deg, var(--red-wash), transparent); }
.summary-card.sc-mind:hover::before  { background: linear-gradient(90deg, var(--plum-wash), transparent); }
.summary-card.sc-ai:hover::before    { background: linear-gradient(90deg, var(--peach-wash), transparent); }
.summary-card .sc-eye {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--gold-deep);
}
.summary-card .sc-head {
  font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0;
}
.summary-card .sc-stats { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.summary-card .sc-stat { display: flex; flex-direction: column; }
.summary-card .sc-stat .n { font-family: var(--font-mono); font-size: 24px; color: var(--ink); font-weight: 600; line-height: 1.1; }
.summary-card .sc-stat .l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.summary-card .sc-next { font-size: 12.5px; color: var(--ink-2); margin-top: var(--s-1); }
.summary-card .sc-status { font-size: 11px; font-weight: 600; }
.summary-card .sc-status.green { color:var(--sage); }
.summary-card .sc-status.amber { color:var(--gold); }
.summary-card .sc-status.red { color:var(--red); }
/* JS-emitted class name aliases — keeps CSS and renderSummaryCard() in sync */
.summary-card .sc-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:2px; }
.summary-card .sc-headline { font-size:13px; font-weight:600; color:var(--ink-2); margin:0 0 var(--s-2); display:block; }
.summary-card .sc-num { font-family:var(--font-mono); font-size:24px; color:var(--ink); font-weight:600; line-height:1.1; }
.summary-card .sc-unit { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3); }
.summary-card .sc-light { display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:4px; vertical-align:middle; opacity:.85; }
.summary-card .sc-status.ok   { color:var(--sage); }
.summary-card .sc-status.warn { color:var(--warn); }
.summary-card .sc-status.error{ color:var(--bad); }

/* — Tailwind-flavor utility aliases (legacy markup) — */
.surface-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow-1);
}
/* v8 card tiers — give dense config panels a scannable hierarchy.
   .critical = needs-attention / kill-switch (red left edge);
   .info     = read-only context (recessed, no shadow). Additive modifiers
   that work on both .card and .surface-card; default cards are unchanged. */
.surface-card.critical, .card.critical { border-left: 3px solid var(--bad); }
.surface-card.info, .card.info { background: var(--paper-2); box-shadow: none; }
.hairline    { /* no-op — border lives on .surface-card */ }
.rounded-xl  { border-radius: var(--r-md); }
.p-3         { padding: var(--s-3); }
.p-4         { padding: var(--s-5); } /* 20px — diverges from Tailwind's 16px */

.card-title {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin: 0 0 var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
}
.card-body { padding-top: var(--s-3); }

.callout {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-deep);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  color: var(--ink-2); font-size: 13px; line-height: 1.6;
}
.creds-note {
  background: transparent; border-left: 2px solid var(--rule-2);
  padding: var(--s-2) var(--s-4);
  color: var(--ink-3); font-size: 12px; line-height: 1.55;
}

/* — Alert card (Alerts list row) — inline `border-left:Npx solid <tone>`
   from the JS render still wins on the left side, supplying the severity
   stripe; the rule below provides the surface, hairline, padding, and hover. */
.alert-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.alert-card:hover {
  background: var(--paper-2);
  border-color: var(--ink-4);
}
.alert-card .alert-fix-box {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-2);
  border-radius: var(--r-xs);
  border-left: 2px solid var(--rule-2);
  font-size: 12px; line-height: 1.55;
  color: var(--ink-2);
}
.alert-card .msg-box-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3) !important;
  margin-bottom: var(--s-1) !important;
}

/* — Section-divider banner (Alerts grouping: NEW / IN REVIEW / DONE) — */
.alert-section-divider {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  margin: 0 0 var(--s-3);
}
.alert-section-divider + .alert-section-divider { margin-top: var(--s-5); }
.alert-section-divider .dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.alert-section-divider .count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); font-weight: 600;
}
.alert-section-divider.tone-new {
  background: var(--red-wash); color: var(--red); border-color: var(--red);
}
.alert-section-divider.tone-new .dot { background: var(--red); }
.alert-section-divider.tone-new .count { color: var(--red-soft); }
.alert-section-divider.tone-review {
  background: var(--steel-wash); color: var(--steel); border-color: var(--steel);
}
.alert-section-divider.tone-review .dot { background: var(--steel); }
.alert-section-divider.tone-review .count { color: var(--steel); opacity: 0.75; }
.alert-section-divider.tone-done {
  background: var(--sage-wash); color: var(--sage); border-color: var(--sage);
}
.alert-section-divider.tone-done .dot { background: var(--sage); }
.alert-section-divider.tone-done .count { color: var(--sage); opacity: 0.75; }

/* ============================================================
   PRIORITY ACTIONS / LIST ROWS
   ============================================================ */
.list-row, .priority-row {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  margin-bottom: var(--s-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.list-row:hover, .priority-row:hover {
  background: var(--paper-2);
  border-color: var(--ink-4);
}
.list-row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--steel); margin-top: 6px; flex-shrink: 0;
}
.list-row.alarm .dot { background: var(--red); }
.list-row.warn .dot { background: var(--gold); }
.list-row.info .dot { background: var(--steel); }
.list-row.ok .dot { background: var(--sage); }
.list-row .body { flex: 1; min-width: 0; }
.list-row .title { font-weight: 600; color: var(--ink); font-size: 13px; }
.list-row .meta { color: var(--ink-4); font-size: 11px; margin-top: 2px; }

/* status pills */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  padding: 2px var(--s-2); border-radius: 999px;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--rule);
  white-space: nowrap; flex-shrink: 0; line-height: 1.6;
}
.status-pill.ok { background: var(--sage-wash); color:var(--sage); border-color: var(--sage); }
.status-pill.warn { background: var(--gold-wash); color:var(--gold); border-color: var(--gold); }
.status-pill.alarm, .status-pill.bad { background: var(--red-wash); color:var(--red); border-color: var(--red); }
.status-pill.info { background: var(--steel-wash); color:var(--steel); border-color: var(--steel); }
.status-pill.warning { background: var(--gold-wash); color:var(--gold); border-color: var(--gold); }

/* — Risk badges (AI dock action rows) — JS interpolates `risk-${risk}` */
.risk-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px var(--s-2); border-radius: var(--r-xs);
  border: 1px solid var(--rule);
}
.risk-low    { background: var(--sage-wash); color: var(--sage); border-color: var(--sage); }
.risk-medium { background: var(--gold-wash); color: var(--gold); border-color: var(--gold); }
.risk-high   { background: var(--red-wash);  color: var(--red);  border-color: var(--red); }

/* live-indicator pulse keyframe (kept here next to its only remaining
   consumer; the env-card that previously also used it was removed with the
   shadowed first-block sidebar chrome) */
@keyframes civic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(91,175,106,0.40); }
  70%  { box-shadow: 0 0 0 10px rgba(91,175,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,175,106,0); }
}
.live, .live-indicator {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color:var(--sage);
}
.live::before, .live-indicator::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
  animation: civic-pulse 2s var(--ease) infinite;
}

/* — Live Sync Console — */
.sync-state-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 10px;
  font-family: var(--font-mono);
}
.sync-state-idle { background: var(--paper-2); color: var(--ink-3); }
.sync-state-running { background: var(--gold-wash); color: var(--gold); }
.sync-state-ok { background: var(--sage-wash); color: var(--sage); }
.sync-state-error { background: var(--red-wash); color: var(--red); }

.sync-stat-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.sync-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline, rgba(148,163,184,0.18));
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.sync-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--text-muted);
}
.sync-stat[data-kind="new"]::before     { background: var(--sage); }
.sync-stat[data-kind="changed"]::before { background: var(--steel); }
.sync-stat[data-kind="cached"]::before  { background: var(--ink-3); }
.sync-stat[data-kind="skipped"]::before { background: var(--gold); }
.sync-stat[data-kind="error"]::before   { background: var(--red); }
.sync-stat[data-kind="total"]::before   { background: var(--gold-deep); }
.sync-stat-n {
  font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  color: var(--text); line-height: 1.1;
}
.sync-stat-l {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-top: 2px;
}

.sync-console-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
@media (max-width: 980px) { .sync-console-grid { grid-template-columns: 1fr; } }

.sync-pages-card, .sync-log-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline, rgba(148,163,184,0.18));
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; min-height: 0;
}
.sync-subhead {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.sync-recent-list {
  flex: 1; min-height: 0;
  max-height: 360px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.sync-empty { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.sync-row {
  display: grid; grid-template-columns: 18px 38px 1fr auto;
  align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 6px;
  font-size: 12px;
}
.sync-row + .sync-row { border-top: 1px solid rgba(148,163,184,0.08); }
.sync-row .sync-row-icon {
  font-family: var(--font-mono); font-weight: 700; text-align: center;
}
.sync-row[data-kind="new"]     .sync-row-icon { color: var(--sage); }
.sync-row[data-kind="changed"] .sync-row-icon { color: var(--steel); }
.sync-row[data-kind="cached"]  .sync-row-icon { color: var(--text-muted); }
.sync-row[data-kind="skipped"] .sync-row-icon { color: var(--gold); }
.sync-row[data-kind="error"]   .sync-row-icon { color: var(--red); }
.sync-row .sync-row-n {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: right;
}
.sync-row .sync-row-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.sync-row .sync-row-kind {
  font-size: 10px; font-family: var(--font-mono); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.sync-log-pre {
  margin: 0; flex: 1; min-height: 220px; max-height: 360px;
  overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
  color: var(--text); background: rgba(0,0,0,0.25);
  border: 1px solid var(--hairline, rgba(148,163,184,0.18));
  border-radius: 8px; padding: 10px 12px;
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  width: 100%; border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 12.5px;
}
.table thead th {
  background: var(--paper-2);
  text-align: left;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--rule-2);
}
.table tbody td {
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.4;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--hover-overlay); color: var(--ink); }
.table tbody tr.selected td { background: var(--gold-wash); box-shadow: inset 2px 0 0 var(--gold); }
.table td.mono, .table td.num { font-family: var(--font-mono); color: var(--ink); }
.table td.num { text-align: right; }

/* ============================================================
   FORMS
   ============================================================ */
.field, input[type=text], input[type=password], input[type=email], input[type=search],
input[type=number], input[type=url], select, textarea {
  background: var(--shade);                 /* recessed well against paper cards */
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink);
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
textarea { resize: vertical; min-height: 100px; font-family: var(--font-mono); line-height: 1.55; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.field:focus {
  outline: none;
  border-color: var(--gold);               /* amber focus ring */
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--focus-glow), inset 0 1px 2px rgba(0,0,0,0.3);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }

label, .label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: var(--s-1); display: block;
}

.checkbox, .toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  cursor: pointer; font-size: 13px; color: var(--ink-2);
}
.checkbox input, .toggle input { accent-color:var(--gold); }

/* — Form primitives (label/row/control/code) — */
.form-row {
  display: flex; flex-direction: column; gap: var(--s-1);
  margin-bottom: var(--s-3);
}
.form-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: var(--s-1); display: block;
}
.form-control,
input.form-control, select.form-control, textarea.form-control {
  background: var(--shade); border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink); width: 100%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.form-control:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--focus-glow), inset 0 1px 2px rgba(0,0,0,0.3); background: var(--paper);
}

.code, pre.code {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-2); line-height: 1.55;
  overflow-x: auto;
}

/* ============================================================
   COMMAND PALETTE (⌘K)
   ============================================================ */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(4,9,18,0.70);   /* solid fallback */
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
@supports (backdrop-filter: blur(6px)) {
  .cmdk-overlay { background: rgba(4,9,18,0.6); backdrop-filter: blur(6px); }
}
@media (prefers-reduced-transparency: reduce) {
  .cmdk-overlay { background: rgba(4,9,18,0.92); backdrop-filter: none; }
}
.cmdk-overlay.hidden { display: none; }
.cmdk-overlay.open { display: flex; }
.cmdk-panel {
  width: 620px; max-width: calc(100vw - 32px);
  background: var(--paper); border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop), 0 0 0 1px var(--gold-wash), inset 0 1px 0 rgba(230,215,164,0.06);
  overflow: hidden;
  animation: cmdk-pop var(--dur) var(--ease-out);
}
@keyframes cmdk-pop {
  0% { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cmdk-search-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-bottom: 1px solid var(--rule);
}
.cmdk-search-icon { color: var(--gold); font-size: 16px; font-family: var(--font-mono); }
.cmdk-input-field {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-sans); font-size: 15px;
  color: var(--ink);
}
.cmdk-kbd { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); background: var(--paper-2); border: 1px solid var(--rule); padding: 2px 5px; border-radius: var(--r-xs); }

.cmdk-list { list-style: none; margin: 0; padding: var(--s-2); max-height: min(60vh, 400px); overflow-y: auto; }
.cmdk-list li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.cmdk-list li:hover, .cmdk-list li.active { background: var(--gold-wash); color: var(--ink); box-shadow: inset 2px 0 0 var(--gold); }
.cmdk-list li span:first-child { flex: 1; font-weight: 500; }
.cmdk-list li .cmdk-jump {
  font-family: var(--font-mono); font-size: 10px;
  color:var(--gold); background: var(--gold-wash);
  padding: 2px 6px; border-radius: var(--r-xs); font-weight: 600;
}
.cmdk-list li:hover .cmdk-jump { background: var(--gold-wash-2); }

/* — Toast primitives (transient feedback bottom-right) — */
.toast-host {
  position: fixed; bottom: var(--s-5); right: var(--s-5);
  z-index: 700;
  display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none;
  max-width: calc(100vw - var(--s-7));
}
.toast {
  pointer-events: auto;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 13px; line-height: 1.5;
  min-width: 240px; max-width: 420px;
  animation: toast-slide var(--dur) var(--ease-out);
}
.toast.toast-ok    { border-left: 3px solid var(--sage); }
.toast.toast-warn  { border-left: 3px solid var(--gold); }
.toast.toast-error { border-left: 3px solid var(--red); }
.toast .toast-icon {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.toast.toast-ok    .toast-icon { color: var(--sage); }
.toast.toast-warn  .toast-icon { color: var(--gold); }
.toast.toast-error .toast-icon { color: var(--red); }
.toast.fade-out { opacity: 0; transition: opacity var(--dur) var(--ease); }
@keyframes toast-slide {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MODAL OVERLAY
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4,9,18,0.78);   /* solid fallback */
  display: none; align-items: center; justify-content: center;
  padding: var(--s-5);
}
@supports (backdrop-filter: blur(4px)) {
  .modal-overlay { background: rgba(4,9,18,0.64); backdrop-filter: blur(4px); }
}
@media (prefers-reduced-transparency: reduce) {
  .modal-overlay { background: rgba(4,9,18,0.92); backdrop-filter: none; }
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--paper); border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(230,215,164,0.06);
  width: 540px; max-width: 100%; max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.modal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--gold-wash-2); z-index: 1;
  pointer-events: none;
}
.modal-lg { width: 880px; }
.modal-header {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
.modal-close {
  margin-left: auto;
  background: transparent; border: 0;
  width: 32px; height: 32px; border-radius: var(--r-xs);
  color: var(--ink-3); cursor: pointer;
  font-size: 18px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-close:hover { background: var(--paper-3); color: var(--ink); }
.modal-body { padding: var(--s-5); overflow-y: auto; flex: 1; }
.modal-footer {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--rule);
  display: flex; gap: var(--s-2); justify-content: flex-end;
  background: var(--paper-2);
}

/* ============================================================
   AI DOCK
   ============================================================ */
.ai-dock-mount { display: none; }  /* per-panel mounts retired in favor of #active-ai-dock in subbar */
.ai-dock-slot { display: inline-flex; align-items: center; }
.ai-dock-anchor {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--peach-wash);
  border: 1px solid var(--peach);
  border-left: 3px solid var(--peach-deep);
  border-radius: var(--r);
  margin-bottom: var(--s-4);
}
.ai-dock-anchor .ai-dock-eye {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--peach-deep);
}
.ai-dock-anchor .ai-dock-title {
  font-size: 13px; font-weight: 600; color: var(--ink); flex: 1;
}
.ai-dock-anchor .ai-dock-actions { display: flex; gap: var(--s-2); margin-left: auto; }

.ai-dock-modal {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.64);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: var(--s-5);
}
.ai-dock-modal.ai-dock-modal-open { display: flex; }
.ai-dock-modal-card {
  width: 820px; max-width: 100%; max-height: 88vh;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  overflow: hidden;
  border-top: 4px solid var(--peach-deep);
}
.ai-dock-modal-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--peach-wash);
  font-family: var(--font-mono); font-weight: 600;
  color: var(--peach-deep);
  letter-spacing: 0.06em;
}
.ai-dock-modal-head button { margin-left: auto; }
#ai-dock-modal-body { padding: var(--s-5); overflow-y: auto; }
.ai-dock-error {
  background: var(--red-wash); color:var(--red);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--red); font-size: 13px;
}
.ai-dock-summary {
  font-size: 14px; color: var(--ink); line-height: 1.55;
  background: var(--paper-2);
  border-left: 3px solid var(--peach-deep);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-4);
}
.ai-dock-cost {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-4); margin-bottom: var(--s-4);
}
.ai-dock-findings, .ai-dock-actions {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.ai-dock-finding, .ai-dock-action {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  font-size: 13px; color: var(--ink-2);
}
.ai-dock-finding .severity {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase;
  padding: 1px var(--s-2); border-radius: var(--r-xs);
  margin-right: var(--s-2);
}
.ai-dock-finding .severity.high { background: var(--red-wash); color:var(--red); }
.ai-dock-finding .severity.med  { background: var(--gold-wash); color:var(--gold); }
.ai-dock-finding .severity.low  { background: var(--steel-wash); color:var(--steel); }

/* AI Dock row (findings + actions) — flex layout, hard text wrapping.
   Uses label.ai-dock-row / div.ai-dock-row selectors to override the global
   `label, .label { text-transform: uppercase; ... }` typography reset above. */
label.ai-dock-row, div.ai-dock-row, .ai-dock-row {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.55; color: var(--ink);
  font-weight: 400; letter-spacing: normal;
  text-transform: none;
  margin-bottom: 0;
  min-width: 0; max-width: 100%;
  cursor: default;
}
label.ai-dock-row { cursor: pointer; }
label.ai-dock-row:has(input:disabled) { cursor: default; }
.ai-dock-row > .ai-dock-action-cb {
  flex: 0 0 auto; margin-top: 4px;
}
.ai-dock-row .row-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  overflow-wrap: anywhere; word-break: break-word;
}
/* Finding titles are natural sentences — keep regular case + sans.
   Action titles are code identifiers (kind=...) — keep mono + uppercase. */
.ai-dock-row .row-body > strong {
  font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: normal; text-transform: none;
}
label.ai-dock-row .row-title-bar > strong {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
}
.ai-dock-row .row-detail {
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
  text-transform: none; font-weight: 400; letter-spacing: normal;
}
.ai-dock-row .row-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-4); text-transform: none; letter-spacing: normal;
}
.ai-dock-row .row-actions { flex: 0 0 auto; }
.ai-dock-row .severity-dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 8px; background: var(--ink-4);
}
.ai-dock-row.severity-high   { border-left-color: var(--red); background: color-mix(in srgb, var(--red-wash) 50%, var(--paper)); }
.ai-dock-row.severity-medium { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold-wash) 50%, var(--paper)); }
.ai-dock-row.severity-low    { border-left-color: var(--sage); background: var(--paper); }
.ai-dock-row.severity-high   .severity-dot { background: var(--red); }
.ai-dock-row.severity-medium .severity-dot { background: var(--gold); }
.ai-dock-row.severity-low    .severity-dot { background: var(--sage); }
.ai-dock-row.risk-low    { border-left-color: var(--sage); background: var(--paper); }
.ai-dock-row.risk-medium { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold-wash) 35%, var(--paper)); }
.ai-dock-row.risk-high   { border-left-color: var(--red);  background: color-mix(in srgb, var(--red-wash) 35%, var(--paper)); }

/* Plain-English diff preview block */
.ai-dock-diff-preview {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  padding: var(--s-2) var(--s-3);
  font-size: 12px; line-height: 1.55; color: var(--ink-2);
  text-transform: none; letter-spacing: normal;
  overflow-wrap: anywhere; word-break: break-word;
  display: flex; flex-direction: column; gap: 4px;
}
.ai-dock-diff-preview .diff-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4); margin-right: 6px;
}
.ai-dock-diff-preview .diff-from {
  background: var(--red-wash); color: var(--red);
  padding: 1px 4px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 11px;
}
.ai-dock-diff-preview .diff-to {
  background: var(--sage-wash); color: var(--sage);
  padding: 1px 4px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 11px;
}
.ai-dock-diff-preview code {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 2px; padding: 1px 4px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2);
}
.ai-dock-row details {
  font-size: 11px; color: var(--ink-3);
  text-transform: none; letter-spacing: normal;
}
.ai-dock-row details summary {
  cursor: pointer; user-select: none;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4);
}
.ai-dock-row details pre {
  margin: 6px 0 0 0;
  padding: var(--s-2) var(--s-3);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  max-width: 100%; max-height: 280px; overflow: auto;
}
.ai-dock-row .lock-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--rule);
}
.ai-dock-row .lock-hint.locked { color: var(--gold); border-color: var(--gold); background: var(--gold-wash); }
.ai-dock-row .row-title-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ai-dock-empty {
  padding: var(--s-4); text-align: center;
  font-size: 13px; color: var(--ink-3); font-style: italic;
}
.ai-dock-modal-card h4 {
  margin: 0 0 var(--s-2) 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* AI Dock — Apply selected bar + inline result */
.ai-dock-apply-bar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding-top: var(--s-3); margin-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.ai-dock-apply-bar .btn { flex-shrink: 0; }
.ai-dock-apply-hint {
  font-size: 11px; color: var(--ink-3); line-height: 1.4;
}
.ai-dock-apply-result { margin-top: var(--s-3); }
.ai-dock-apply-msg {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); font-size: 13px;
  background: var(--paper-2); border: 1px solid var(--rule);
  color: var(--ink-2);
}
.ai-dock-apply-msg.ok   { background: var(--sage-wash); color: var(--sage);  border-color: var(--sage); }
.ai-dock-apply-msg.warn { background: var(--gold-wash); color: var(--gold);  border-color: var(--gold); }
.ai-dock-apply-msg.err  { background: var(--red-wash);  color: var(--red);   border-color: var(--red); }
.ai-dock-apply-list {
  margin: var(--s-2) 0 0 var(--s-4); padding: 0;
  font-size: 12px; font-family: var(--font-mono);
}
.ai-dock-apply-list li { list-style: disc; margin: 2px 0; }
.ai-dock-apply-list li.ok  { color: var(--sage); }
.ai-dock-apply-list li.err { color: var(--red); }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
#login-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
}
#login-screen::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1100px circle at 12% 18%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 55%),
    radial-gradient(1100px circle at 85% 88%, color-mix(in srgb, var(--red) 6%, transparent), transparent 55%);
  pointer-events: none;
}
.login-confidential-stamp {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--rule-2); padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--paper);
}
.login-card {
  width: 420px; max-width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-6) var(--s-6);
  position: relative; z-index: 1;
  box-shadow: var(--shadow-3);
}
.login-card::before {
  content: ""; display: block;
  height: 3px; background: var(--gold);
  margin: calc(-1 * var(--s-7)) calc(-1 * var(--s-6)) var(--s-5);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.login-logos {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.login-brand-crest {
  width: 44px; height: 44px;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  border-radius: var(--r-sm);
  letter-spacing: 0.05em;
}
.login-brand-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color:var(--gold);
}
.login-brand-name {
  font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.login-brand-slug {
  font-size: 11px; color: var(--ink-4);
  font-family: var(--font-mono);
}
.login-title {
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin: var(--s-2) 0 var(--s-1);
}
.login-sub { font-size: 13px; color: var(--ink-3); margin-bottom: var(--s-5); }
#login-pw {
  width: 100%; height: 42px;
  background: var(--paper-2); border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  padding: 0 var(--s-3);
  font-family: var(--font-sans); font-size: 14px;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
#login-pw:focus {
  outline: none; border: 2px solid var(--steel);
  box-shadow: 0 0 8px var(--focus-glow); background: var(--paper-2);
  padding: calc(var(--s-3) - 1px);
}
.login-btn { width: 100%; height: 42px; font-size: 14px; }
.login-err {
  color:var(--red); font-size: 12px; margin-top: var(--s-3);
  font-family: var(--font-sans); min-height: 16px;
}

/* ============================================================
   PANEL WORKSPACES — sessions, mind, emails, review, website
   ============================================================ */

/* generic pane-toolbar pattern used across workspace panels */
.pane-toolbar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.pane-toolbar .left { display: flex; gap: var(--s-2); align-items: center; }
.pane-toolbar .right { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }

/* — Sessions / Emails list items — */
/* Children (.si-header / .si-preview / .si-footer) are intended to stack
   vertically, not lay out side-by-side. Row direction collapses them into a
   single line where the avatar header sits next to the preview text and they
   visually overlap. */
.session-item, .email-item {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: 12px 16px;
  border-bottom: 2px solid var(--rule-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
}
.session-item:hover, .email-item:hover {
  background: var(--paper-2);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.session-item.active, .session-item.selected,
.email-item.active, .email-item.selected {
  background: var(--paper);
  border-left: 3px solid var(--gold);
  padding-left: 13px;
  box-shadow: none;
  transform: none;
}
/* at-a-glance row state bars (no reflow — absolute ::before on the relative row) */
.session-item.is-flagged::before,
.session-item.is-live::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.session-item.is-flagged::before { background: var(--warn); }
.session-item.is-live::before { background: var(--ok); }
.session-item.active::before, .session-item.selected::before { display: none; }
.session-item .who, .email-item .who {
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: var(--s-2);
}
.session-item .preview, .email-item .preview {
  font-size: 12px; color: var(--ink-3);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.session-item .ts, .email-item .ts {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-4); margin-left: auto;
}
.item-cb {
  margin-top: 4px;
  width: 14px; height: 14px;
  accent-color:var(--gold);
}

/* — Detail pane open states —
   The JS toggles `sess-open` / `email-open` / `detail-pane-open` directly on
   the *inner* detail element (#sess-detail / #email-detail / #mind-detail /
   #mind-fb-detail / #review-detail). The OUTER `.detail-pane` wrapper is the
   split-pane child and must always be visible — its inner has its own
   display toggle. */
#sess-detail, #email-detail,
#mind-detail, #mind-fb-detail, #review-detail { display: none; }
/* These inner detail elements use flex column + flex:1 children + an internal
   overflow-y:auto body. Forcing display:block here kills the flex layout and
   the inner scroll no longer engages — opened emails / sessions / mind
   threads render as one long page with no scroll. Use flex (matches the
   inline style on each element). */
#sess-detail.sess-open,
#email-detail.email-open,
#mind-detail.detail-pane-open,
#mind-fb-detail.detail-pane-open,
#review-detail.detail-pane-open { display: flex; flex-direction: column; }

/* — Session / MIND list item internals (rendered by JS in renderSessions /
   renderDashSessions / renderMindList, etc.). These classes had no CSS after
   the v5 LINAsystems Civic rebuild, which is why .avatar was rendering as a
   full-width red bar. — */
.avatar {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--steel);
  position: relative;
  overflow: hidden;
}
.avatar-lg { width: 40px; height: 40px; font-size: 13px; }
.avatar.fb-avatar { background: var(--paper-2); color: var(--ink); }
.si-header {
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 0;
}
.si-header .avatar { margin-right: var(--s-1); }
.si-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.si-time {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-4); margin-left: auto; flex: none;
}
.si-preview {
  font-size: 12px; color: var(--ink-3);
  margin-top: var(--s-1);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.si-footer {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-1);
}
.msg-count {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-4);
}

/* — AI dock (Audit / Decide / Do) — small icon trio mounted into panel
   toolbars. Used to collide with the breadcrumb header because it had no
   layout rules of its own. — */
.ai-dock {
  display: inline-flex; align-items: center; gap: var(--s-1);
}
.ai-dock-btn {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ai-dock-btn:hover { background: var(--paper); border-color: var(--gold); }

/* — Priority Action row (Dashboard "Command Center is Clear" card). Was
   a bare <button> falling back to OS gray. — */
.priority-action-row {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--tone, var(--sage));
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  font: inherit;
}
.priority-action-row + .priority-action-row { margin-top: var(--s-2); }
.priority-action-row:hover { background: var(--paper); border-color: var(--ink-4); }
.priority-action-row .pa-tone {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tone, var(--sage));
  background: var(--tone-bg, transparent);
  padding: 2px var(--s-2); border-radius: var(--r-xs);
  flex: none;
}
.priority-action-row .pa-body { flex: 1; min-width: 0; }
.priority-action-row .pa-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.priority-action-row .pa-detail { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.priority-action-row .pa-cta {
  font-size: 12px; color: var(--ink-3); flex: none;
  display: inline-flex; align-items: center; gap: var(--s-1);
}
.priority-action-row:hover .pa-cta { color: var(--gold); }

/* — bulk action bar — */
.bulk-bar {
  display: none;
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--ink-2);
  align-items: center; flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
  z-index: 20;
  min-width: 0;
}
.bulk-bar.visible { display: flex; }
/* List-pane-docked variant: a bulk bar that sits flush inside a split-pane list
   column (Sessions, Phone) — square corners, no side borders, subtle top/bottom
   hairlines, tighter padding. Matches the Sessions bulk bar exactly so the two
   parallel panels are consistent. */
.bulk-bar.list-docked { margin: 0; border-radius: 0; border-left: 0; border-right: 0;
  border-top: 1px solid rgba(228,213,160,0.25); border-bottom: 1px solid rgba(228,213,160,0.25);
  padding: 6px 12px; }
.bulk-bar .btn, .bulk-bar .select-all-btn { flex: 0 0 auto; }
.bulk-bar .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.bulk-bar .btn-danger { background: var(--red); color: var(--paper); border-color: var(--red); }

/* — Bulk-bar internals + utility pills — */
.bulk-count {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.10);
  padding: 2px var(--s-3); border-radius: var(--r-xs);
  color: var(--paper);
}
.select-all-btn {
  background: transparent; border: 0;
  color: var(--paper); opacity: 0.85;
  font-family: var(--font-sans); font-size: 12px;
  font-weight: 500; cursor: pointer;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-xs);
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.select-all-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); }

.filter-pills {
  display: inline-flex; gap: var(--s-1); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.pill {
  /* base only — variant modifiers (pill.sage / .oxblood / .rust / .brass / .steel / .mono)
     are unstyled; tracked as long-tail follow-up per spec families list. */
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-width: 18px; height: 18px;
  background: var(--paper-2); color: var(--ink-3);
  font-size: 10px; font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 9px; padding: 0 var(--s-2);
  border: 1px solid var(--rule);
}

/* — message bubbles (transcripts) — */
.bubble {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  font-size: 13px; color: var(--ink-2);
  max-width: 86%;
}
.bubble.user {
  background: var(--paper-2); border-color: var(--rule);
  border-left: 3px solid var(--gold);
  margin-left: auto;
}
.bubble.bot, .bubble.assistant {
  background: var(--paper); border-color: var(--rule-2);
  box-shadow: var(--shadow-1);
}
.bubble .role {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-4); margin-bottom: var(--s-1);
}

/* — Help Sessions transcript bubbles (iMessage-style) —
   User (visitor) = incoming, paper-2 grey, LEFT, rounded with bottom-left flat.
   The founder (bot) = outgoing, steel blue, RIGHT, rounded with bottom-right flat.
   .msg-wrap is the row; .msg-bubble is the bubble; .msg-meta is the
   timestamp + action buttons below. */
#messages-area {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
}
.msg-wrap {
  display: flex; flex-direction: column;
  max-width: 78%;
}
.msg-wrap.user { align-self: flex-start; align-items: flex-start; }
.msg-wrap.founder { align-self: flex-end;   align-items: flex-end; }

.msg-bubble, .message-bubble {
  padding: var(--s-3) var(--s-4);
  font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  box-shadow: var(--shadow-1);
  border-radius: var(--r-md);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.msg-bubble.user, .message-bubble.msg-user {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 18px 18px 18px 4px;
}
.msg-bubble.founder, .message-bubble.msg-bot {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 18px 18px 18px 4px;
}

.msg-meta {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-1);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 0.04em;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.msg-wrap:hover .msg-meta {
  opacity: 1;
}
.msg-meta > span:first-child { /* timestamp */
  text-transform: uppercase;
}
.tool-pill {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--rule);
  padding: 1px var(--s-2);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.msg-action-btn {
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink-3);
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.msg-action-btn:hover:not([disabled]) {
  background: var(--paper-2); border-color: var(--ink-4); color: var(--ink);
}
.msg-action-btn[disabled] { cursor: not-allowed; }

/* — MIND Panel: stats strip (above tabs) — */
#mind-panel .mind-stats-strip {
  display: flex; align-items: center;
  gap: var(--s-7);
  padding: var(--s-3) var(--s-5);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
  flex-wrap: wrap;
}
#mind-panel .mind-stat {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 80px;
}
#mind-panel .mind-stat-n {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 600;
  color: var(--ink);                 /* numbers are neutral data; violet is reserved
                                          for the MIND domain signature, not every stat */
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
#mind-panel .mind-stat-l {
  font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}
#mind-panel .mind-stat-svc {
  margin-left: auto;
  align-items: flex-end;
}
#mind-panel .mind-stat-svc .mind-stat-l { text-align: right; }
@media (max-width: 760px) {
  #mind-panel .mind-stats-strip { gap: var(--s-4); }
  #mind-panel .mind-stat-svc { margin-left: 0; align-items: flex-start; }
  #mind-panel .mind-stat-svc .mind-stat-l { text-align: left; }
}

.mind-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  flex-shrink: 0;
}
.mind-tabs button {
  flex: 1; padding: var(--s-3) var(--s-4);
  background: transparent; border: none;
  color: var(--ink-3);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 3px solid transparent;
}
.mind-tabs button:hover {
  color: var(--ink);
}
.mind-tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* — Detail panes (Sessions / MIND / Emails / Review) — */
.detail-header {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  flex-shrink: 0;
}
.detail-actions {
  margin-left: auto;
  display: flex; gap: var(--s-2);
  flex-shrink: 0; flex-wrap: wrap;
}
.detail-meta {
  font-size: 11px; color: var(--ink-3);
  line-height: 1.6;
}

/* — Pane internals (workspace panel list panes) — */
.pane-header   { flex-shrink: 0; }
.pane-list     { flex: 1; overflow-y: auto; min-height: 0; }
.pane-help     {
  display: none;
  padding: var(--s-3) var(--s-4);
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
}
.pane-help.open { display: block; }
.pane-toolbar-title {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.pane-toolbar-count {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--paper); color: var(--ink-2);
  padding: 1px var(--s-2); border-radius: var(--r-xs);
  border: 1px solid var(--rule);
}
.pane-footer { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--rule); flex-shrink: 0; }

/* ============================================================
   WEBSITE EDITOR
   ============================================================ */
.editor-pane { background: var(--ink); color: var(--paper); }
.editor-pane textarea {
  background: var(--ink); color: var(--paper);
  border: 0; padding: var(--s-4);
  font-family: var(--font-mono); font-size: 12px;
  height: 100%; resize: none;
}
.preview-pane { background: var(--paper); border-left: 1px solid var(--rule); }
.preview-pane iframe { width: 100%; height: 100%; border: 0; background: var(--paper); }
.preview-desktop-mode iframe { width: 100%; }
.preview-mobile iframe { width: 390px; margin: 0 auto; display: block; }

/* — Editor split-pane layout — */
.editor-layout {
  flex: 1; display: grid;
  grid-template-columns: minmax(0, 1fr) 4px minmax(0, 1fr);
  min-height: 0; min-width: 0;
  background: var(--canvas);
}
#editor-code-pane, #editor-preview-pane {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  overflow: hidden;
}
#editor-code-pane    { background: var(--paper); }
#editor-preview-pane { background: var(--paper); border-left: 1px solid var(--rule); }

#html-editor {
  flex: 1; min-height: 0;
  width: 100%; resize: none; border: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  outline: none;
}
#ai-assist-panel {
  display: flex; flex-direction: column; flex-shrink: 0;
  border-top: 1px solid var(--rule);
}
#preview-iframe {
  flex: 1; width: 100%; min-height: 0; border: 0;
  background: var(--paper);
}

.editor-code-header, .preview-header {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-2);
  flex-shrink: 0;
}
.editor-code-footer {
  padding: var(--s-2) var(--s-3);
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--ink-4);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.editor-resize-handle {
  background: var(--rule);
  cursor: col-resize;
  transition: background var(--dur) var(--ease);
}
.editor-resize-handle:hover { background: var(--gold); }

.unsaved-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  background: var(--gold-wash); color: var(--gold);
  padding: 2px var(--s-2); border-radius: var(--r-xs);
  letter-spacing: 0.08em;
}

@media (max-width: 980px) {
  .editor-layout { grid-template-columns: 1fr; }
  #editor-preview-pane { border-left: 0; border-top: 1px solid var(--rule); }
}

/* — Knowledge → Fragments split-pane — */
.fragments-split {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: var(--s-4); align-items: start;
}

/* — Knowledge → Staff Notes split-pane — */
.notes-layout {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  flex: 1; min-height: 0;
}
.notes-list-pane {
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  min-height: 0;
}
.notes-list-header {
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.notes-editor-pane {
  display: flex; flex-direction: column;
  padding: var(--s-5) var(--s-6);
  gap: var(--s-3);
  background: var(--paper);
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 980px) {
  .fragments-split { grid-template-columns: 1fr; }
  .notes-layout { grid-template-columns: 1fr; }
  .notes-list-pane {
    border-right: 0; border-bottom: 1px solid var(--rule);
    max-height: 260px;
  }
}

/* — Editor textarea variants — */
.admin-prose-editor {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.78;
  padding: var(--s-4) var(--s-5);
}
.admin-monospace-editor {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  padding: var(--s-3) var(--s-4);
}

/* — Settings → System Prompts tab strip — */
.prompts-tab-strip {
  display: flex; gap: var(--s-1);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-1);
  margin-bottom: var(--s-4);
}

/* — Notifications V2 — filter swatches + empty state — */
.shell-filter-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: var(--s-2);
  flex-shrink: 0; vertical-align: middle;
}
.shell-empty {
  background: var(--paper);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r);
  padding: var(--s-7);
  text-align: center;
  color: var(--ink-3); font-size: 13px;
}
.shell-empty-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: var(--s-2);
}

/* — AI sync flyout (right-side drawer) — */
.ai-sync-flyout {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0;
  width: 420px; max-width: 100%;
  background: var(--paper); border-left: 1px solid var(--rule);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 495; /* above shell-drawer (490) — flyout always wins */ padding: var(--s-5);
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.ai-sync-flyout[aria-hidden="false"] { transform: translateX(0); }
.ai-sync-flyout-head {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  font-size: 14px; font-weight: 700;
}

/* — Brass-accent section heading (Web Search) — */
.section-heading-brass {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--gold-deep);
  margin-bottom: var(--s-2);
}

/* — Muted-text aliases (legacy markup) — */
.dim, .muted, .text-muted { color: var(--ink-3); }

/* ============================================================
   NOTIFICATIONS V2 (shell-*)
   ============================================================ */
.shell-hero {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
  margin: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-5);
  border-top: 3px solid var(--gold);
}
.shell-hero-row { display: flex; gap: var(--s-5); align-items: flex-start; }
.shell-hero-eye {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color:var(--gold);
}
.shell-hero-title {
  font-size: 28px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.1;
  margin: var(--s-1) 0;
}
.shell-hero-sub { font-size: 13px; color: var(--ink-3); max-width: 620px; }
.shell-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; align-items: center; justify-content: flex-end; }
.shell-hero-metrics {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.shell-metric { padding: var(--s-1) 0; }
.shell-metric-n {
  font-family: var(--font-mono); font-size: 22px; font-weight: 600;
  color: var(--ink); display: flex; align-items: center; gap: var(--s-2);
}
.shell-metric-l {
  font-size: 10px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 2px;
}
.shell-metric-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.shell-metric-dot.ok { background: var(--sage); }
.shell-metric-dot.warn { background: var(--gold); }
.shell-metric-dot.bad { background: var(--red); }

.shell-toolbar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-5) var(--s-2);
}
.shell-segmented {
  display: inline-flex; background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 2px;
}
.shell-seg {
  background: transparent; border: 0;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--ink-3); padding: var(--s-1) var(--s-3);
  cursor: pointer; border-radius: var(--r-xs);
  transition: all var(--dur) var(--ease);
}
.shell-seg:hover { color: var(--ink); }
.shell-seg.on { background: var(--ink); color: var(--paper); font-weight: 600; }

.shell-search {
  flex: 1;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink);
}
.shell-input {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink); width: 100%;
}
.shell-input:focus { outline: none; border: 2px solid var(--steel); padding: calc(var(--s-2) - 1px) calc(var(--s-3) - 1px); box-shadow: 0 0 8px var(--focus-glow); background: var(--paper-2); }

.shell-filters {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  padding: 0 var(--s-5) var(--s-4);
}
.shell-filter {
  background: transparent; border: 1px solid var(--rule);
  padding: 2px var(--s-3);
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  color: var(--ink-3);
  border-radius: 999px; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.shell-filter:hover { background: var(--paper-2); color: var(--ink); }
.shell-filter.on { background: var(--gold); color: var(--on-accent); border-color:var(--gold); font-weight: 600; }

.shell-grid {
  padding: 0 var(--s-5) var(--s-5);
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.shell-body { padding: 0; }

.shell-btn {
  height: 30px; padding: 0 var(--s-3);
  background: var(--paper-3); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.shell-btn:hover { background: var(--paper-2); border-color: var(--ink-4); }
.shell-btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--rule); }
.shell-btn.ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-4); }
.shell-btn.primary { background: var(--gold); color: var(--canvas); border-color: var(--gold-deep); }
.shell-btn.primary:hover { background: var(--gold-soft); color: var(--canvas); border-color: var(--gold); }
.shell-btn.fire { background: var(--gold-wash); color: var(--gold); border: 1px solid var(--gold); }
.shell-btn.fire:hover { background: var(--gold); color: var(--canvas); }
.shell-btn.sm { height: 26px; padding: 0 var(--s-2); font-size: 11px; }
.shell-btn.choice { display: block; white-space: normal; height: auto; padding: var(--s-2) var(--s-3); text-align: left; line-height: 1.4; }

/* --- shell-card (notifications grid event cards) --- */
.shell-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.shell-card:hover { background: var(--paper-2); }
.shell-card.cat-esc      { border-left-color: var(--red); }
.shell-card.cat-chat     { border-left-color: var(--steel); }
.shell-card.cat-activity { border-left-color: #5E5CE6; }
.shell-card.cat-form     { border-left-color: var(--peach); }
.shell-card.cat-email    { border-left-color: var(--steel-deep); }
.shell-card.cat-deploy   { border-left-color: var(--sage); }
.shell-card.cat-health   { border-left-color: var(--sage); }
.shell-card.cat-kb       { border-left-color: var(--plum); }
.shell-card.cat-custom   { border-left-color: var(--gold); }
.shell-card.cat-other    { border-left-color: var(--ink-4); }

.shell-card-tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.shell-card-tag-swatch {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
}
.shell-card.cat-esc      .shell-card-tag-swatch { background: var(--red); }
.shell-card.cat-chat     .shell-card-tag-swatch { background: var(--steel); }
.shell-card.cat-activity .shell-card-tag-swatch { background: #5E5CE6; }
.shell-card.cat-form     .shell-card-tag-swatch { background: var(--peach); }
.shell-card.cat-email    .shell-card-tag-swatch { background: var(--steel-deep); }
.shell-card.cat-deploy   .shell-card-tag-swatch { background: var(--sage); }
.shell-card.cat-health   .shell-card-tag-swatch { background: var(--sage); }
.shell-card.cat-kb       .shell-card-tag-swatch { background: var(--plum); }
.shell-card.cat-custom   .shell-card-tag-swatch { background: var(--gold); }

.shell-card-title {
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.005em;
}
.shell-card-meta {
  font-size: 12px; line-height: 1.5;
  color: var(--ink-3);
}
.shell-card-meta.mono { font-family: var(--font-mono); color: var(--ink-4); }

.shell-card-row {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-top: var(--s-2);
  align-items: center;
}
.shell-card-row .right { margin-left: auto; display: inline-flex; gap: var(--s-1); }

/* chips inside notification cards */
.shell-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.shell-chip {
  display: inline-flex; align-items: center;
  padding: 3px var(--s-2);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.shell-chip:hover { background: var(--paper-3); color: var(--ink); border-color: var(--ink-4); }
.shell-chip.on {
  background: var(--gold-wash); color: var(--gold);
  border-color: var(--gold);
}
.shell-chip.on:hover { background: var(--gold-wash-2); }
.shell-chip.add {
  background: transparent;
  border: 1px dashed var(--rule-2);
  color: var(--ink-3);
}
.shell-chip.add:hover { color: var(--ink-2); border-color: var(--ink-4); background: var(--paper-2); }

/* Chrome doesn't always honor SVG HTML width/height attributes inside flex containers — pin them */
.icon-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.shell-drawer-backdrop, .shell-modal-backdrop {
  position: fixed; inset: 0; z-index: 480;
  background: rgba(0,0,0,0.64);
  backdrop-filter: blur(4px);
  display: none;
  pointer-events: none;
}
.shell-drawer-backdrop.open, .shell-modal-backdrop.open { display: block; pointer-events: auto; }
.shell-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 100%;
  background: var(--paper); border-left: 1px solid var(--rule);
  z-index: 490; transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.shell-drawer.open { transform: translateX(0); }
.shell-modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 495;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  width: 720px; max-width: calc(100vw - 32px); max-height: 88vh;
  overflow-y: auto;
  display: none;
  padding: var(--s-5);
}
.shell-modal.open, .shell-modal-backdrop.open + .shell-modal,
.shell-modal-backdrop.open ~ .shell-modal, .shell-modal-backdrop.open .shell-modal { display: block; }

.shell-sample-row { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-2) 0; }
.notif-tab-active { color: var(--ink); background: var(--paper); }

/* — Drawer / modal subparts (template editor, recipient editor, new event) — */
.shell-drawer-head, .shell-modal-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--shade);
  position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(8px);
}
.shell-drawer-title, .shell-modal-title {
  flex: 1; min-width: 0;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell-drawer-close, .shell-modal-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-3); cursor: pointer; font-size: 14px;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.shell-drawer-close:hover, .shell-modal-close:hover {
  background: var(--paper-2); color: var(--ink); border-color: var(--rule);
}
.shell-drawer-body, .shell-modal-body {
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.shell-drawer-foot, .shell-modal-foot {
  display: flex; gap: var(--s-2); justify-content: flex-end;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--shade);
  position: sticky; bottom: 0; z-index: 2;
  backdrop-filter: blur(8px);
}

/* Field rows + labels */
.shell-field { display: flex; flex-direction: column; gap: 6px; }
.shell-ai-row { flex-direction: row; align-items: stretch; gap: var(--s-2); }
.shell-ai-row .shell-input { flex: 1; min-width: 0; }
.shell-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.shell-textarea {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.45;
  color: var(--ink); width: 100%; min-height: 96px; resize: vertical;
}
.shell-textarea:focus, .shell-input:focus {
  outline: none; border-color: var(--steel);
  box-shadow: 0 0 0 3px var(--focus-glow);
  background: var(--paper);
}
.shell-status {
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
}
.shell-status code {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--canvas); color: var(--gold);
  padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--rule);
}
.shell-status b { color: var(--ink); font-weight: 600; }

/* Live previews (Telegram + Email cards) */
.shell-preview {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.shell-preview-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4);
}
.shell-preview-tg {
  background: #0088cc12; border: 1px solid #0088cc44;
  border-radius: var(--r-sm);
  padding: var(--s-3);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
  color: var(--ink);
}
.shell-preview-tg b { font-weight: 600; }
.shell-preview-em {
  background: #ffffff; color: #222;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
}
.shell-preview-em-from {
  font-size: 11px; color: #666; margin-bottom: 4px;
  font-family: var(--font-mono);
}
.shell-preview-em-subj {
  font-size: 14px; font-weight: 600; color: #111;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

/* ============================================================
   EMPTY STATES / LOADERS
   ============================================================ */
.empty-msg, .empty {
  background: var(--paper);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r);
  padding: var(--s-7);
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.empty-msg .h3, .empty .h3 { color: var(--ink); margin-bottom: var(--s-2); }
.inline-load {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--ink-4); font-size: 12px;
  font-family: var(--font-mono);
}
.inline-load::before {
  content: ""; width: 12px; height: 12px;
  border: 2px solid var(--rule); border-top-color:var(--gold);
  border-radius: 50%; animation: spin 0.9s linear infinite;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pager, .pager-bar {
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
}
.pager button, .pager-btn {
  min-width: 28px; height: 28px;
  background: var(--paper-2); border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
  border-radius: var(--r-xs);
  padding: 0 var(--s-2);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pager button:hover:not(.active):not(:disabled),
.pager-btn:hover:not(.active):not(:disabled) {
  background: var(--paper); border-color: var(--ink-4); color: var(--ink);
}
.pager button.active, .pager-btn.active {
  background: var(--gold); color: var(--on-accent); border-color: var(--gold);
  font-weight: 700;
}
.pager button:disabled, .pager-btn:disabled, .pager-btn[disabled] {
  opacity: 0.35; cursor: not-allowed;
}
.pager-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-4); margin-left: var(--s-2);
  letter-spacing: 0.04em;
}

/* ============================================================
   ANIMATIONS / SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 5px; border: 2px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

* { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }

.dragging { user-select: none; cursor: col-resize !important; }
body.split-resizing * { user-select: none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .canvas { padding: var(--s-5) var(--s-5); }
  .kpi-row, .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 980px) {
  #hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .topbar .cmdk { max-width: none; }
  .canvas { padding: var(--s-5) var(--s-4); max-width: 100%; }
  .split-pane { grid-template-columns: 1fr; }
  .split-pane > .list-pane { border-right: 0; border-bottom: 1px solid var(--rule); }
  .svc-dots, .topbar .brand .name span { display: none; }
}
@media (max-width: 680px) {
  .topbar .cmdk .cmdk-topbar-display { display: none; }
  .topbar .user .who { display: none; }
  .h1, h1.h1, .page-title { font-size: 22px; }
  .h2 { font-size: 17px; }
  .ai-sync-pill .ai-sync-label { display: none; }
  .ai-sync-pill { padding: 0 var(--s-2); height: 28px; }
  .maint-pill .maint-label { display: none; }
  .maint-pill { padding: 0 var(--s-2); height: 28px; }
  .topbar { gap: var(--s-2); padding: 0 var(--s-3); }
  .topbar .brand .ver { display: none; }
  .crumbs { font-size: 11px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .topbar, .sidebar, .subbar, .ai-dock-anchor, #hamburger, .pager { display: none !important; }
  body { background: var(--paper); }
  .canvas { padding: 0; max-width: 100%; }
  /* Neutralize the desktop scroll-lock so tall panels paginate instead of
     clipping to one viewport when a landscape page box is wider than 981px. */
  .shell { height: auto !important; }
  .main { overflow: visible !important; height: auto !important; }
}

/* ============================================================
   FOCUS-VISIBLE / ACCESSIBILITY
   ============================================================ */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-xs); }
button:focus-visible, a:focus-visible { outline: 0; box-shadow: var(--ring-focus); }

/* honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .pulse, .live::before, .live-indicator::before { animation: none; }
  .kpi:hover { transform: none; }
}

/* ============================================================
   LEGACY COMPATIBILITY — classes referenced by older inline code paths
   ============================================================ */
.notif-row { background: var(--paper); border-radius: var(--r-sm); }
.app-shell { background: var(--canvas); }
.review-help .open { display: block; }
.review-help { display: none; }
.review-help.open { display: block; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: var(--s-4); margin-top: var(--s-3); font-size: 12px; color: var(--ink-2); }

/* user-menu inline styles in markup use --bg-2 / --surface; mapped via aliases above */

/* placeholder for legacy --hairline-bright */
.hl-bright { border-color: var(--rule-2); }

/* ============================================================
   v7 OPERATOR CONSOLE — final chrome
   Overrides .topbar / .sidebar / .shell / .main / .subbar layouts.
   Variable names + class hooks unchanged so JS keeps working.
   ============================================================ */

/* — Brand-color hardcode shadowing (catch any leftover v5 hex values) — */
[style*="#E4D5A0"], [style*="#E4D5A0"] { color: var(--gold) !important; }

/* — Hide hamburger by default; rail handles nav at all sizes ≥980px — */
#hamburger {
  position: fixed;
  top: calc(var(--topbar-h) + 10px);
  left: 10px;
  z-index: 60;
  width: 36px; height: 36px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: var(--r-sm);
  font-size: 18px;
  cursor: pointer;
  display: none;
}
@media (max-width: 980px) {
  #hamburger { display: flex; align-items: center; justify-content: center; }
}

/* ============ Mission Control · shell chrome (single source) ============ */
.shell{ display:grid; grid-template-columns:var(--rail-w-expanded) minmax(0,1fr);
  min-height:calc(100vh - var(--topbar-h) - var(--status-h)); background:var(--bg); }

/* top status strip / topbar */
.topbar{ position:sticky; top:0; z-index:50; height:var(--topbar-h);
  display:flex; align-items:center; gap:10px; padding:0 16px; min-width:0;
  padding-top:env(safe-area-inset-top);
  background:var(--navy); color:var(--on-navy); }
/* sidebar collapse toggle — lives in the topbar on desktop; hidden on mobile
   (≤980px) where the fixed #hamburger drives the slide-over drawer instead. */
.nav-collapse-btn{ display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--on-navy); font-size:16px; line-height:1; cursor:pointer;
  transition:background .14s ease; }
.nav-collapse-btn:hover{ background:rgba(255,255,255,.12); }
@media (max-width:980px){ .nav-collapse-btn{ display:none; } }
.topbar .brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:14px;
  letter-spacing:-.01em; color:var(--on-navy); white-space:nowrap; }
.topbar .brand .mark{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--red),#b3192a); color:#fff; font-weight:800; font-size:12px;
  letter-spacing:0; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.topbar .live-strip{ display:flex; align-items:center; gap:16px; font-family:var(--font-mono); font-size:11px; color:var(--on-navy-dim); }
.topbar .live-strip .v{ font-weight:700; color:var(--on-navy); }
.topbar .live-strip .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; background:#46d98a; box-shadow:0 0 7px #46d98a; }
.topbar .live-strip .dot.bad{ background:var(--bad); box-shadow:0 0 6px var(--bad); }
.topbar .cmdk{ flex:1 1 auto; min-width:0; max-width:460px; display:flex; align-items:center; gap:8px;
  height:32px; padding:0 10px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line-2);
  color:var(--ink-3); font-size:12px; cursor:pointer; }
.topbar .cmdk:hover{ border-color:var(--accent-line); }
.topbar .cmdk kbd{ margin-left:auto; font-family:var(--font-mono); font-size:10px;
  color:var(--ink-3); background:var(--panel-3); border:1px solid var(--line-2);
  border-radius:4px; padding:1px 5px; }
.topbar .spacer{ flex:1; }

/* sidebar — persistent labeled by default; collapses to an icon rail via
   body.sidebar-collapsed (topbar toggle, persisted in cfg). */
.sidebar{ position:relative; z-index:40; width:100%; background:var(--panel);
  border-right:1px solid var(--line); overflow:hidden;
  transition:width .16s ease, box-shadow .16s ease; }
.sidebar .nav-scroll{ height:100%; overflow-y:auto; padding:10px 0; }
.sidebar .nav-sec{ padding:0; margin-bottom:6px; position:relative; }
.sidebar .nav-sec h6{ margin:0; padding:14px 16px 6px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-4); white-space:nowrap; opacity:1; transition:opacity .16s ease; }
/* active-group cue — shows which section the current panel lives in (set by navTo) */
.sidebar .nav-sec.active-group::before{ content:""; position:absolute; left:0; top:8px; bottom:6px;
  width:3px; border-radius:0 3px 3px 0; background:var(--accent-line); }
.sidebar .nav-list{ display:flex; flex-direction:column; }
.nav-item{ position:relative; display:flex; align-items:center; gap:13px;
  height:42px; padding:0 16px; color:var(--ink-2); cursor:pointer; white-space:nowrap;
  transition:background .14s, color .14s; }
.nav-item .ico{ width:20px; text-align:center; flex:none; font-size:16px; }
.nav-item .label{ flex:1; font-size:13.5px; font-weight:500; opacity:1; transition:opacity .16s ease; }
.nav-item .badge{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3);
  opacity:1; transition:opacity .16s ease; }
/* collapsed icon-rail mode — desktop only; mobile (≤980px) uses the slide-over
   defined in the media queries below, so these never apply there. Collapsed
   still hover-expands so a rail user can peek labels. */
@media (min-width: 981px) {
  body.sidebar-collapsed .shell{ grid-template-columns:var(--rail-w) minmax(0,1fr); }
  body.sidebar-collapsed .sidebar{ width:var(--rail-w); }
  body.sidebar-collapsed .sidebar .nav-sec h6,
  body.sidebar-collapsed .sidebar .nav-item .label,
  body.sidebar-collapsed .sidebar .nav-item .badge{ opacity:0; }
  body.sidebar-collapsed .sidebar:hover{ width:var(--rail-w-expanded); box-shadow:var(--shadow-pop); }
  body.sidebar-collapsed .sidebar:hover .nav-sec h6,
  body.sidebar-collapsed .sidebar:hover .nav-item .label,
  body.sidebar-collapsed .sidebar:hover .nav-item .badge{ opacity:1; }
}
.nav-item .badge.live{ color:var(--ok); }
.nav-item .badge.alert{ color:var(--bad); }
.nav-item:hover{ background:var(--panel-2); color:var(--ink); }
.nav-item.active{ background:var(--accent-wash); color:var(--ink); font-weight:600; }
.nav-item.active .ico{ color:var(--accent); }
.nav-item.active::before{ content:""; position:absolute; left:0; top:7px; bottom:7px;
  width:3px; border-radius:0 3px 3px 0; background:var(--accent); box-shadow:0 0 8px var(--accent-line); }
/* MIND domain signature (violet) — MUST keep */
.sidebar .nav-item[data-panel="mind"] .ico{ color:var(--mind); }
.sidebar .nav-item[data-panel="mind"].active{ background:var(--mind-wash); }
.sidebar .nav-item[data-panel="mind"].active .ico{ color:var(--mind); }
.sidebar .nav-item[data-panel="mind"].active::before{ background:var(--mind); box-shadow:0 0 8px var(--mind-wash); }

/* main + subbar */
.main{ min-width:0; display:flex; flex-direction:column; }
.subbar{ height:var(--subbar-h); display:flex; align-items:center; padding:0 18px;
  background:var(--bg); border-bottom:1px solid var(--line);
  font-size:12px; color:var(--ink-3); }
.subbar .crumb-sec{ color:var(--ink-3); }
.subbar .crumb-sep{ margin:0 7px; color:var(--ink-4); }
.subbar .crumb-title{ color:var(--ink); font-weight:600; }

/* canvas + panels */
.canvas{ flex:1; min-width:0; padding:20px; max-width:1240px; width:100%; }
.canvas:has(> .panel.panel-workspace.active){ padding:0; max-width:none; }
.panel{ display:none; }
.panel.active{ display:block; }
.panel.panel-workspace{ padding:0 !important; }
.panel-workspace.active{ display:flex; flex-direction:column; flex:1; min-height:0;
  height:calc(100vh - var(--topbar-h) - var(--subbar-h) - var(--status-h)); }

/* Desktop: lock the shell to the viewport so the rail + topbar stay put while
   only #main scrolls (the documented "one scroll owner" invariant). overflow is
   left visible on .shell so the rail's hover-expand can still overlay the canvas.
   Mobile (≤980px) keeps natural body scroll — there the rail is a fixed drawer,
   so it never scrolls away. */
@media (min-width: 981px) {
  .shell{ height:calc(100vh - var(--topbar-h) - var(--status-h)); }
  .main{ overflow-x:hidden; overflow-y:auto; }
}

/* bottom infra strip */
.v7-status{ position:fixed; bottom:0; left:0; right:0; z-index:45;
  height:calc(var(--status-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; align-items:center; gap:18px; padding-left:16px; padding-right:16px;
  background:var(--panel-3); border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:10px; color:var(--ink-3); }
/* (segment/dot/clock styling lives in the .v7-status-seg/.v7-status-clock rules below) */
body{ padding-bottom:calc(var(--status-h) + env(safe-area-inset-bottom)); }

/* ============ Mission Control · chrome components (real markup hooks) ============
   These style elements present in the topbar + status-strip markup that the
   single-source chrome block above does not cover. Kept so the live console
   keeps working; they are NOT competing layout/theme redefinitions of the
   chrome selectors above. */
/* gold seam along the bottom edge — civic material tell (rationed) */
/* LINAsystems red seam — civic material tell along the topbar's bottom edge */
.topbar::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 30%, rgba(210,31,48,0) 30%);
  pointer-events: none;
}
.topbar .brand .name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--on-navy);
}
.topbar .brand .name span { color: var(--on-navy-dim); font-weight: 600; }
.topbar .brand .ver {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(255,255,255,.12);
  color: var(--on-navy-dim);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar .cmdk .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 1px 6px;
}
.topbar .top-spacer { flex: 1; }
.topbar .svc-dots { display: none; }   /* status strip replaces the SVC dots */
.topbar .ai-sync-pill { font-size: 10.5px; height: 28px; padding: 0 10px; }
.topbar .icon-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.topbar .icon-btn:hover { color: var(--accent); background: var(--panel-3); border-color: var(--accent-line); }
.topbar .user {
  display: flex; align-items: center; gap: 8px;
  height: 32px;
  padding: 0 8px 0 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .12s;
}
.topbar .user:hover { border-color: var(--accent-line); }
.topbar .user .av {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--red);
  color: var(--on-accent);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
}
.topbar .user .who {
  display: flex; flex-direction: column; line-height: 1.2;
}
.topbar .user .who #sb-user-name {
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.topbar .user .who small {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
/* status-strip segments / separators / clock (markup uses .v7-status-* classes) */
.v7-status-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.v7-status-seg:hover {
  background: var(--panel);
  color: var(--ink-2);
}
/* RATIONED GLOW — only live + error status dots glow; warn is matte */
.v7-status-seg .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
  display: inline-block;
}
.v7-status-seg .dot.amber { background: var(--warn); box-shadow: none; }
.v7-status-seg .dot.red { background: var(--bad); box-shadow: 0 0 6px var(--bad); animation: pulse 1.6s ease-in-out infinite; }
.v7-status-sep {
  color: var(--ink-4);
  font-weight: 400;
}
.v7-status-spacer { flex: 1; }
.v7-status-clock {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* — Pulse panel (the new landing) — */
#pulse-panel { display: block; }
#pulse-panel .pulse-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
/* — Pulse 3-pane: live-feed column · detail (rail provides the 3rd pane) — */
#pulse-panel .pulse-grid.pulse-3pane {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 1080px) {
  #pulse-panel .pulse-grid.pulse-3pane { grid-template-columns: 1fr; }
  #pulse-panel .pulse-feedcol { position: static; max-height: 460px; }
}
#pulse-panel .pulse-feedcol {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; overflow: hidden;
  position: sticky; top: 0;
  max-height: calc(100vh - var(--topbar-h) - var(--subbar-h) - var(--status-h) - 36px);
}
#pulse-panel .pulse-feedcol-head {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 18px; border-bottom: 1px solid var(--rule);
  font-weight: 700; font-size: 15px; color: var(--ink); flex-shrink: 0;
}
#pulse-panel .pulse-feedcol-head .fc-live { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 9px var(--sage-wash); }
#pulse-panel .pulse-feedcol-head .fc-mo { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; }
#pulse-panel .pulse-feedcol .pulse-feed { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }
#pulse-panel .pulse-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
/* feed rows restack (2-line) inside the narrow column — mirrors the mobile pattern */
#pulse-panel .pulse-feedcol .pulse-feed .row {
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "kind when meta" "summary summary summary";
  gap: 5px 9px; padding: 12px 18px; border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
}
#pulse-panel .pulse-feedcol .pulse-feed .row:hover { background: var(--hover-overlay); }
#pulse-panel .pulse-feedcol .pulse-feed .when { grid-area: when; justify-self: start; }
#pulse-panel .pulse-feedcol .pulse-feed .kind { grid-area: kind; }
#pulse-panel .pulse-feedcol .pulse-feed .meta { grid-area: meta; justify-self: end; }
#pulse-panel .pulse-feedcol .pulse-feed .summary {
  grid-area: summary; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.4; color: var(--ink-2);
}
#pulse-panel .pulse-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
#pulse-panel .pulse-hero h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
#pulse-panel .pulse-hero .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 6px;
}
#pulse-panel .range-tabs {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
}
#pulse-panel .range-tabs button {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: background var(--dur), color var(--dur);
}
#pulse-panel .range-tabs button.active {
  background: var(--gold-wash);
  color: var(--gold);
}
#pulse-panel .range-tabs button:hover:not(.active) {
  color: var(--ink-2);
}

#pulse-panel .pulse-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
#pulse-panel .pulse-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--red-wash);
  border-left: 3px solid var(--red);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink);
}
#pulse-panel .pulse-alert .ico {
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
  flex-shrink: 0;
}
#pulse-panel .pulse-alert .msg { flex: 1; }
#pulse-panel .pulse-alert .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

#pulse-panel .pulse-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
@media (max-width: 1180px) {
  #pulse-panel .pulse-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  #pulse-panel .pulse-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  #pulse-panel .pulse-kpis { grid-template-columns: 1fr; }
}
#pulse-panel .pulse-kpi {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
/* domain-colored KPI tiles (signature move) — apply k-* on the tile in markup */
#pulse-panel .pulse-kpi.k-help  { border-left-color: var(--gold); }
#pulse-panel .pulse-kpi.k-mind  { border-left-color: var(--plum); }
#pulse-panel .pulse-kpi.k-ai    { border-left-color: var(--peach); }
#pulse-panel .pulse-kpi.k-alert { border-left-color: var(--red); }
#pulse-panel .pulse-kpi.k-live  { border-left-color: var(--sage); }
#pulse-panel .pulse-kpi:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
#pulse-panel .pulse-kpi .label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#pulse-panel .pulse-kpi .value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
#pulse-panel .pulse-kpi .delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
#pulse-panel .pulse-kpi .delta.up { color: var(--sage); }
#pulse-panel .pulse-kpi .delta.down { color: var(--red); }

/* ===== Action Center — work-queue quick-jumps (icon · count · label · →).
   Horizontal cards, deliberately distinct from the metric KPIs above so the
   landing answers "what needs me?" not just "what are the numbers". ===== */
#pulse-panel .pulse-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: var(--s-3);
}
@media (max-width: 1180px) { #pulse-panel .pulse-actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { #pulse-panel .pulse-actions { grid-template-columns: 1fr; } }
#pulse-panel .pulse-action {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
#pulse-panel .pulse-action:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); transform: translateY(-1px); }
#pulse-panel .pulse-action:focus-visible { outline: none; box-shadow: var(--ring-focus); }
#pulse-panel .pulse-action .pa-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--accent-wash); color: var(--accent); font-size: 15px;
}
#pulse-panel .pulse-action .pa-body { flex: 1; min-width: 0; }
#pulse-panel .pulse-action .pa-value {
  font-family: var(--font-mono); font-size: 20px; font-weight: 600;
  color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums;
}
#pulse-panel .pulse-action .pa-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .07em; text-transform: uppercase; margin-top: 3px;
}
#pulse-panel .pulse-action .pa-go {
  font-family: var(--font-mono); font-size: 15px; color: var(--ink-4);
  flex-shrink: 0; transition: color var(--dur), transform var(--dur);
}
#pulse-panel .pulse-action:hover .pa-go { color: var(--accent); transform: translateX(2px); }
#pulse-panel .pulse-action[data-tone="warn"] { border-left: 3px solid var(--warn); }
#pulse-panel .pulse-action[data-tone="warn"] .pa-ico { background: var(--peach-wash); color: var(--warn); }
#pulse-panel .pulse-action[data-tone="bad"] { border-left: 3px solid var(--bad); }
#pulse-panel .pulse-action[data-tone="bad"] .pa-ico { background: var(--red-wash); color: var(--bad); }

/* ===== Collapsible analytics roll-up — keeps the home clean; expands on demand ===== */
#pulse-panel .pulse-analytics-toggle {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; background: transparent; border: 0; cursor: pointer; padding: 6px 0;
}
#pulse-panel .pulse-analytics-toggle .eyebrow { color: var(--ink-2); font-weight: 700; }
#pulse-panel .pulse-analytics-toggle .chev { font-size: 11px; color: var(--ink-3); transition: transform var(--dur); }
#pulse-panel .pulse-analytics:not(.collapsed) .pulse-analytics-toggle .chev { transform: rotate(90deg); }
#pulse-panel .pulse-analytics-toggle .pa-hint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); letter-spacing: .04em; margin-left: auto; }
#pulse-panel .pulse-analytics-toggle:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-xs); }
#pulse-panel .pulse-analytics.collapsed .pulse-analytics-body { display: none; }

#pulse-panel .pulse-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 1100px) {
  #pulse-panel .pulse-row { grid-template-columns: 1fr; }
}
#pulse-panel .pulse-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
#pulse-panel .pulse-card h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#pulse-panel .pulse-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#pulse-panel .pulse-feed .row {
  display: grid;
  grid-template-columns: 60px 80px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background var(--dur), padding var(--dur);
}
#pulse-panel .pulse-feed .row:hover {
  background: var(--paper-2);
  padding-left: 8px;
  padding-right: 8px;
  border-radius: var(--r-sm);
}
#pulse-panel .pulse-feed .row:last-child { border-bottom: 0; }
#pulse-panel .pulse-feed .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
#pulse-panel .pulse-feed .kind {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#pulse-panel .pulse-feed .kind.session { color: var(--sage); }
#pulse-panel .pulse-feed .kind.email { color: var(--gold); }
#pulse-panel .pulse-feed .kind.mind { color: var(--plum); }
#pulse-panel .pulse-feed .kind.kb { color: var(--peach); }
#pulse-panel .pulse-feed .kind.review { color: var(--steel); }
#pulse-panel .pulse-feed .summary {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pulse-panel .pulse-feed .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
#pulse-panel .pulse-feed .empty {
  padding: var(--s-5);
  color: var(--ink-3);
  text-align: center;
  font-size: 13px;
}

#pulse-panel .pulse-health-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#pulse-panel .pulse-health-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
#pulse-panel .pulse-health-row:last-child { border-bottom: 0; }
#pulse-panel .pulse-health-row .name {
  font-size: 13px;
  color: var(--ink);
  flex: 1;
}
#pulse-panel .pulse-health-row .dots {
  display: inline-flex;
  gap: 3px;
}
#pulse-panel .pulse-health-row .dots .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}
#pulse-panel .pulse-health-row .dots .dot.off { background: var(--ink-5); }
#pulse-panel .pulse-health-row .stats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* — Sidebar scrollbar (thinner) — */
.sidebar .nav-scroll::-webkit-scrollbar { width: 4px; }
.sidebar .nav-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 2px; }
.sidebar .nav-scroll::-webkit-scrollbar-track { background: transparent; }

/* — Mobile rail — */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    height: calc(100vh - var(--topbar-h) - var(--status-h));
    z-index: 100;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar .nav-sec h6 { opacity: 1; }
  .sidebar .nav-item .label { opacity: 1; }
  .sidebar .nav-item .badge { opacity: 1; }
  .sidebar:hover { width: 240px; box-shadow: none; }
}

/* — Workspace bar refresh button — */
.subbar .btn-ghost { color: var(--ink-3); }
.subbar .btn-ghost:hover { color: var(--ink); }

/* ============================================================
   Mobile + tablet topbar slim mode
   - 980px: tablets (iPad portrait) — drawer mode already kicks in here
     via existing rules; this just trims the topbar so RC chip + clock
     don't overflow the right edge when hamburger pushes things in.
   ============================================================ */
@media (max-width: 980px) {
  /* live-strip would crowd a narrow topbar — counts still live in panels + status strip */
  .topbar .live-strip { display: none !important; }
  .topbar { padding-left: calc(44px + var(--s-2)); }
  .rc-clock,
  #top-clock { display: none !important; }
  .topbar .user .who { display: none; }
  .topbar .user { padding: 2px 4px 2px 2px !important; }
  #sidebar-env-switcher { max-width: 180px; }
  #sidebar-env-switcher .l2,
  #sidebar-env-switcher [style*="font-mono"] { font-size: 9px !important; }
}

/* ============================================================
   iPhone-friendly mobile layout
   - 640px: phones in portrait (covers all iPhones; some androids land here)
   - 380px: iPhone SE / Mini extras
   These rules live last so they win the cascade over v7 base rules.
   ============================================================ */
@media (max-width: 640px) {
  /* Body — honor iOS notch + home indicator */
  html, body { overflow-x: hidden; }
  body {
    padding-bottom: calc(var(--status-h) + env(safe-area-inset-bottom));
  }

  /* Topbar — slim mode (RC mark + env chip + bell + avatar only) */
  .topbar {
    padding: 0 var(--s-2) 0 calc(44px + var(--s-1));
    padding-top: env(safe-area-inset-top);
    gap: var(--s-2);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
  .topbar .brand .name,
  .topbar .brand .ver { display: none; }
  .topbar .cmdk { display: none; }
  .topbar .svc-dots { display: none; }
  .topbar .ai-sync-pill .ai-sync-label,
  .topbar .ai-sync-pill .ai-sync-status,
  .topbar .ai-sync-pill .ai-sync-time { display: none; }
  .topbar .ai-sync-pill {
    padding: 0 var(--s-2); min-width: 28px;
    flex-shrink: 0;
  }
  #sidebar-env-switcher {
    padding: 4px 8px !important;
    max-width: 120px;
    font-size: 10px !important;
    flex-shrink: 1;
  }
  #sidebar-env-switcher .l2,
  #sidebar-env-switcher [style*="--font-mono"] { display: none !important; }
  #sidebar-env-switcher > div:last-child { display: none !important; }
  .topbar .user .who,
  .topbar .user .who *,
  #sb-greeting-sub,
  .rc-clock,
  #top-clock { display: none !important; }
  .topbar .user {
    padding: 2px !important;
    flex-shrink: 0;
  }
  .topbar .icon-btn { width: 36px; height: 36px; flex-shrink: 0; }

  /* Hamburger — pulled into topbar visually, real touch target */
  #hamburger {
    width: 44px; height: 44px;
    top: calc(env(safe-area-inset-top) + 2px);
    left: 4px;
    font-size: 22px;
    background: transparent;
    border-color: transparent;
    color: var(--ink);
    z-index: 70;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #hamburger:active { background: var(--paper-2); }

  /* Drawer + backdrop */
  .sidebar {
    width: 280px;
    z-index: 110;
    padding-top: env(safe-area-inset-top);
    height: calc(100vh - var(--topbar-h));
    top: var(--topbar-h);
  }
  .sidebar .nav-item {
    height: 48px;          /* iOS touch target */
    padding: 0 16px;
  }
  .sidebar .nav-sec h6 { opacity: 1 !important; }
  .sidebar .nav-item .label,
  .sidebar .nav-item .badge { opacity: 1 !important; }
  #mobile-backdrop {
    position: fixed;
    inset: 0;
    top: var(--topbar-h);
    background: rgba(5, 11, 23, 0.62);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
    backdrop-filter: blur(2px);
  }
  body.sidebar-open #mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Subbar — leaves room for hamburger but tighter */
  .subbar {
    padding: 0 var(--s-2) 0 calc(44px + var(--s-1));
    gap: var(--s-2);
  }
  .subbar .crumbs { font-size: 11px; min-width: 0; flex: 1; }
  .subbar .crumbs > span:first-child,
  .subbar .crumbs > .sep:first-of-type { display: none; }
  .subbar .btn,
  .subbar .btn-sm { padding-left: 8px; padding-right: 8px; }

  /* Canvas — tighter padding */
  .canvas { padding: var(--s-4) var(--s-3); }
  .panel:not(.panel-workspace) { min-width: 0; }

  /* mtabs — horizontally scrollable strip, never wrap */
  .mtabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: var(--s-3);
  }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtabs > * { flex-shrink: 0; white-space: nowrap; }

  /* Workspace panels: list↔detail mobile flow */
  .panel-workspace.active .split-pane {
    display: block;
    grid-template-columns: 1fr;
  }
  .panel-workspace.active .split-pane > .list-pane {
    display: block;
    min-height: 100%;
    border-right: 0;
    border-bottom: 0;
    overflow: visible;
  }
  .panel-workspace.active .split-pane > .detail-pane {
    display: none;
    min-height: 100%;
    padding: var(--s-4);
  }
  .panel-workspace.active .split-pane > .split-resizer { display: none; }
  body.mobile-detail-open .panel-workspace.active .split-pane > .list-pane { display: none; }
  body.mobile-detail-open .panel-workspace.active .split-pane > .detail-pane { display: block; }

  .mobile-pane-back {
    display: inline-flex !important;
    align-items: center;
    min-height: 36px;
    margin-bottom: var(--s-2);
  }

  /* Pulse — feed rows restack so summary breathes */
  #pulse-panel .pulse-feed .row {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "when kind meta"
      "summary summary summary";
    gap: 4px 8px;
    padding: var(--s-3) 0;
  }
  #pulse-panel .pulse-feed .when { grid-area: when; }
  #pulse-panel .pulse-feed .kind { grid-area: kind; }
  #pulse-panel .pulse-feed .meta { grid-area: meta; justify-self: end; font-size: 10px; }
  #pulse-panel .pulse-feed .summary {
    grid-area: summary;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }
  #pulse-panel .pulse-hero { gap: var(--s-3); align-items: flex-start; }
  #pulse-panel .pulse-hero h1 { font-size: 24px; }

  /* KPI grids — 2 columns on phones */
  .kpi-row, .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--s-2) !important;
  }

  /* AI sync flyout — contain inside viewport */
  #ai-sync-flyout,
  .ai-sync-flyout,
  [id*="ai-sync-flyout"] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
    box-sizing: border-box !important;
  }

  /* User menu, popovers — never wider than screen */
  #sb-user-menu,
  .user-menu,
  .popover {
    max-width: calc(100vw - 16px) !important;
  }

  /* Touch-target sizing on common buttons */
  .btn { min-height: 36px; }
  .btn.btn-xs { min-height: 28px; }
  /* iOS Safari auto-zooms inputs <16px — prevent that on text fields */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], textarea, select {
    font-size: 16px;
  }

  /* Status strip — push above home indicator, drop separators */
  .v7-status {
    height: calc(var(--status-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: var(--s-3);
    padding-right: var(--s-3);
    gap: var(--s-2);
    font-size: 10px;
  }
  .v7-status .v7-status-sep { display: none; }
  .v7-status .v7-status-seg { padding: 2px 4px; gap: 4px; }
  .v7-status-clock { font-size: 10px; }

  /* Login screen — keep card centered on phone */
  .login-card { width: calc(100vw - 32px) !important; max-width: 360px !important; }

  /* Suppress hover-expand of rail when drawer is in mobile mode */
  .sidebar:hover { width: 280px; box-shadow: var(--shadow-pop); }
}

/* iPhone SE / Mini (≤380px) extras */
@media (max-width: 380px) {
  .topbar { padding-left: calc(44px + var(--s-0)); }
  .topbar .brand .mark { width: 26px; height: 26px; font-size: 10px; }
  .topbar .ai-sync-pill { display: none; }
  #sidebar-env-switcher { max-width: 96px; }
  .topbar .icon-btn { width: 32px; height: 32px; }
  .canvas { padding: var(--s-3) var(--s-2); }
  .h1, h1.h1, .page-title { font-size: 20px; }
  .h2 { font-size: 16px; }
  #pulse-panel .pulse-hero h1 { font-size: 22px; }
}

/* ── Admin Accounts: viewer read-only mode ─────────────────────────────── */
.viewer-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: rgba(255, 170, 0, .14); color: #7a4d00;
  border-top: 1px solid rgba(255, 170, 0, .5);
  font-size: 13px; font-weight: 600; text-align: center;
  padding: 8px 16px;
}
/* Disable write controls for viewers; reads opt out with .allow-viewer.
   The server middleware + the apiFetch viewer guard are the real gate — this
   prevents misleading clicks. Scope covers panels (#main) AND modals
   (.modal-overlay) so forms like the MIND-token save (in #settings-modal,
   outside #main) are dead-clicked too, plus auto-save inputs/selects whose
   inline handler is a write (save…/toggle…). Read controls (search/filter/
   pagination/preview: _…Page, render…, _…Search, …Preview, loadAuditLog) use
   distinct handler names and stay live. */
body.viewer-mode #main .btn-primary:not(.allow-viewer),
body.viewer-mode #main .btn-danger:not(.allow-viewer),
body.viewer-mode .modal-overlay .btn-primary:not(.allow-viewer),
body.viewer-mode .modal-overlay .btn-danger:not(.allow-viewer),
body.viewer-mode #main [onchange*="save"]:not(.allow-viewer),
body.viewer-mode #main [onchange*="toggle"]:not(.allow-viewer),
body.viewer-mode #main [oninput*="save"]:not(.allow-viewer),
body.viewer-mode .modal-overlay [onchange*="save"]:not(.allow-viewer),
body.viewer-mode .modal-overlay [onchange*="toggle"]:not(.allow-viewer) {
  opacity: .45; pointer-events: none; cursor: not-allowed;
}

/* ── Compose email chips ──────────────────────────────────────── */
.compose-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 2px 8px 2px 10px;
  white-space: nowrap;
}
.compose-chip-warn {
  border-color: var(--warn, #e8a020);
  color: var(--warn, #e8a020);
}
.compose-chip button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  color: var(--text-muted);
}
.compose-chip button:hover { color: var(--bad); }