/* ============================================================
   Cadry design system — "Chart Room" v2 (maritime).
   Fog ground, white hull surfaces, harbor ink, one deep-navy
   accent moment per view. Serif voice for editorial surfaces,
   mono numerals wherever data lives.
   Tokens, base, top bar, buttons, pills, cards, KPI tiles.
   Shared across every screen.
   Rules locked by design review:
   - accent stays hue-parameterized (--accent-h, default 245)
   - data lines (sparklines/charts) are neutral, never accent
   - flagged = warn amber everywhere; red = off-track/danger only
   ============================================================ */

:root{
  color-scheme: light;
  --accent-h: 245;
  --accent:      oklch(0.44 0.09 var(--accent-h));
  --accent-soft: oklch(0.94 0.02 var(--accent-h));
  --accent-edge: oklch(0.82 0.05 var(--accent-h));
  --accent-ink:  oklch(0.36 0.10 var(--accent-h));

  --bg:        #F4F6F8;
  --surface:   #FFFFFF;
  --surface-2: #EDF0F3;
  --surface-3: #E4E9EE;
  --hover:     #EEF1F4;

  --ink:   #15242F;
  --ink-2: #33424E;
  --ink-3: #5B6B78;
  --ink-4: #8795A1;
  --ink-5: #C2CCD4;

  --rule:   #E8EDF1;
  --rule-2: #DCE3E9;
  --rule-3: #C8D2DB;

  --ok:   oklch(0.55 0.10 160);
  --warn: oklch(0.62 0.12 75);
  --bad:  oklch(0.52 0.14 28);
  --ok-soft:   oklch(0.95 0.025 160);
  --warn-soft: oklch(0.95 0.035 75);
  --bad-soft:  oklch(0.95 0.03 28);
  --ok-ink:   oklch(0.40 0.08 160);
  --warn-ink: oklch(0.45 0.10 75);
  --bad-ink:  oklch(0.42 0.12 28);
  /* red-tinted hairline for the small Delete outline button (artboard 00) */
  --bad-edge: #E3C5C1;

  /* Data lines stay neutral so charts survive any workspace accent hue.
     A second and third series need to be TELLABLE APART without borrowing a
     colour that already carries meaning: not --accent (a per-account hue that
     can land anywhere, including on the danger red) and not --ok (the app's
     "healthy" green, used a few pixels away for positive deltas). These two are
     fixed, well separated from the ink and from each other, and distinguishable
     under the common colour-vision deficiencies. */
  --chart-2: oklch(0.55 0.11 250);
  --chart-3: oklch(0.58 0.10 330);
  /* The goal rule is a reference line, not a series — it must never be the same
     ink as the data it is being compared against. */
  --goal-line: oklch(0.62 0.06 250);
  /* Wash under a single-series area chart. Lives here, not in chat.css, because
     cards also render inside the copilot sidebar, where a .asst-scoped token
     would resolve to nothing and paint the fill black. */
  --asst-area: color-mix(in srgb, var(--chart) 8%, transparent);
  --chart: var(--ink-3);

  /* ORDINAL ramp. For categories that come in an ORDER — funnel stages, plan
     tiers, heat — where five identity colours would be five lies. One hue at the
     accent's own angle, five steps, each a visible lightness apart, and the
     lightest still clear of the surface so the first step is not invisible.
     Fixed hue rather than var(--accent-h): the ramp has to hold its separation,
     and a workspace accent sitting on a low-chroma angle would collapse it. */
  --seq-1: oklch(0.745 0.062 245);
  --seq-2: oklch(0.665 0.082 245);
  --seq-3: oklch(0.585 0.096 245);
  --seq-4: oklch(0.505 0.100 245);
  --seq-5: oklch(0.425 0.098 245);

  /* DIVERGING scale, for a number that has a sign: above or below target. Built
     from the status hues so "bad" on a heatmap is the same red as "bad"
     everywhere else, with a NEUTRAL centre — at target must read as nothing at
     all, not as a faint success. */
  --dv-3: oklch(0.70 0.13 28);
  --dv-2: oklch(0.82 0.09 28);
  --dv-1: oklch(0.92 0.045 28);
  --dv0:  var(--surface-2);
  --dv1:  oklch(0.92 0.04 160);
  --dv2:  oklch(0.82 0.075 160);
  --dv3:  oklch(0.70 0.105 160);

  /* Ground under a range band or a quiet area. Neutral: a normal range is
     context, not a series, and it must never compete with the line on top. */
  --wash: color-mix(in srgb, var(--ink-3) 8%, transparent);

  /* Surfaces that can't derive from the neutrals above. */
  --topbar-bg: rgba(255,255,255,0.92);
  --topbar-height: 48px;
  --seg-track: #EAEEF2;

  /* Grid row height — the scorecard grid is the only consumer. Metric rows
     carry a two-line label plus their sparkline, which needs the room. */
  --row-h: 44px;

  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:'Newsreader', ui-serif, Georgia, serif;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 12px;

  --shadow-1: 0 1px 0 rgba(21,36,47,0.03), 0 1px 2px rgba(21,36,47,0.04);
  --shadow-2: 0 1px 0 rgba(21,36,47,0.04), 0 4px 16px rgba(21,36,47,0.06);
  --shadow-pop: 0 8px 28px rgba(21,36,47,0.12), 0 2px 4px rgba(21,36,47,0.05);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
body{ font-variant-numeric:tabular-nums; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }
input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
.ic{ display:inline-block; vertical-align:-2px; }
.mono{ font-family:var(--mono); }
.hidden{ display:none !important; }

/* ============ SKIP LINK ============
   First tab stop on every page. Clipped until focused so it adds no visible
   chrome; on focus it sits above the sticky topbar/nav. */
.skip-link{
  position:absolute; z-index:200; left:12px; top:12px;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%);
  white-space:nowrap; border:0;
  font-size:13px; font-weight:600; line-height:16px;
}
.skip-link:focus, .skip-link:focus-visible{
  clip:auto; clip-path:none; width:auto; height:auto; margin:0;
  padding:8px 12px; overflow:visible; border-radius:var(--radius);
  background:var(--ink); color:var(--bg);
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ============ TOP BAR ============ */
.topbar{
  /* Above the copilot (60) so search, account, and the account menu stay
     usable while the panel is open — including at max resize width. */
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; gap:12px;
  height:var(--topbar-height); padding:0 14px 0 16px;
  background:var(--topbar-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-2);
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; letter-spacing:-0.01em; font-family:var(--serif); flex:0 0 auto; }
.brand .mark{
  width:18px; height:18px; border-radius:5px;
  background:var(--accent);
  display:grid; place-items:center; color:white; font-family:var(--mono); font-size:10px; font-weight:500;
}
/* Breadcrumbs (artboard topbar): parent crumbs recede to ink-4/400, the "/"
   to ink-5; only the current page reads ink + heavy. The trail is the one part
   of the bar with no width ceiling (metric names run long), so it shrinks and
   the last crumb truncates before anything else in the row gives way. */
.crumbs{ display:flex; align-items:center; min-width:0; flex:0 1 auto; }
.crumb-item{ display:inline-flex; align-items:center; min-width:0; }
.crumb-item:last-child{ flex:0 1 auto; }
.crumb-sep{ color:var(--ink-5); font-weight:400; padding:0 2px; font-family:var(--sans); flex:0 0 auto; }
.crumb{
  color:var(--ink-4); font-weight:400; padding:3px 6px; border-radius:4px;
  font-family:var(--sans); font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.crumb:hover{ background:var(--surface-2); color:var(--ink-2); }
.crumb.cur{ color:var(--ink); font-weight:600; }

/* Elastic gap between the trail and the nav. It yields before the crumbs do. */
.topbar-gap{ flex:1 1 0; min-width:0; }

/* primary nav chips (Briefing / Teams / Settings) */
.nav-chips{ display:flex; align-items:center; gap:2px; margin-left:auto; flex:0 0 auto; }
.nav-chip{
  display:inline-flex; align-items:center; height:28px; padding:0 11px;
  border-radius:var(--radius); font-size:13px; font-weight:500; color:var(--ink-3);
}
.nav-chip:hover{ color:var(--ink); background:var(--surface-2); }
.nav-chip.cur{ color:var(--accent); background:var(--accent-soft); }

/* The ☰ that holds the same nav on narrow screens. Hidden on the desktop bar. */
.nav-menu{ display:none; }
.nav-menu-btn{ padding:0 6px; }
.nav-menu .menu-pop{ min-width:180px; }

.searchbar{
  display:flex; align-items:center; gap:8px;
  height:28px; padding:0 9px;
  background:var(--surface-2); border:1px solid transparent; border-radius:var(--radius);
  color:var(--ink-3); font-size:12.5px; min-width:220px; cursor:text;
  flex:0 0 auto;
}
.searchbar .ic{ flex:0 0 auto; }
.searchbar-fill{ flex:1 1 0; }
.searchbar:hover{ border-color:var(--rule-2); background:var(--surface); }
.kbd{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  padding:1px 4px; border:1px solid var(--rule-2); border-bottom-width:1.5px;
  border-radius:3px; background:var(--surface);
}
.avatar{
  width:24px; height:24px; border-radius:50%;
  color:white; font-family:var(--sans); font-size:10px; font-weight:600;
  display:grid; place-items:center; flex-shrink:0;
}

/* account switcher / user menu */
.menu-wrap{ position:relative; }
.menu-pop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:80;
  min-width:240px; background:var(--surface); border:1px solid var(--rule-2);
  border-radius:8px; box-shadow:var(--shadow-pop); padding:6px; display:none;
}
.menu-pop.on{ display:block; }
.menu-pop .mi{
  display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:5px;
  font-size:13px; color:var(--ink-2); cursor:pointer; width:100%; text-align:left;
}
.menu-pop .mi:hover{ background:var(--surface-2); color:var(--ink); }
.menu-pop .mi.cur{ font-weight:500; color:var(--ink); }
.menu-pop .sep{ height:1px; background:var(--rule); margin:5px 2px; }
.menu-pop .label{ font-family:var(--mono); font-size:9.5px; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.1em; padding:6px 9px 3px; }

/* ---- Top bar, narrow screens ----
   The row gives way one part at a time, cheapest part first. The six chips
   alone need ~410px, so they go before the crumbs do. A phone at 390px keeps
   the mark, the current page, the search icon, ☰ and the avatar. */
@media (max-width:1100px){
  /* The badge only names a shortcut you can still press. */
  .searchbar{ min-width:130px; }
  .searchbar .kbd{ display:none; }
  /* Only the page you are on. A parent crumb squeezed to "…" carries nothing,
     so the trail drops the parents before it has to truncate them. */
  .crumb-item:not(:last-child){ display:none; }
}
@media (max-width:820px){
  .nav-chips{ display:none; }
  .nav-menu{ display:block; }
}
@media (max-width:600px){
  /* ⌘K needs a keyboard, so the bar keeps the icon and drops the rest. */
  .searchbar{ min-width:0; width:28px; padding:0; justify-content:center; }
  .searchbar-label, .searchbar-fill{ display:none; }
}
@media (max-width:460px){
  .topbar{ gap:8px; padding:0 10px; }
  .brand-name{ display:none; }
}

/* ============ PAGE / HEAD ============ */
.page{ max-width:1480px; margin:0 auto; padding:0; }
.page-head{
  padding:24px 28px 16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  border-bottom:1px solid var(--rule);
}
/* Title/sub absorb leftover width so header actions don't shrink into a wrap. */
.page-head > :first-child{ min-width:0; flex:1; }
/* Page H1 — Instrument Sans 600/28 (artboard 00 "PAGE TITLE"). Every page
   header h1 should use this class; serif stays for briefing/auth editorial. */
.page-title{ font-family:var(--sans); font-size:28px; font-weight:600; letter-spacing:-0.02em; line-height:34px; margin:0; text-wrap:balance; }
.page-sub{ font-size:13px; color:var(--ink-3); margin:4px 0 0; text-wrap:pretty; }
.eyebrow{ font-family:var(--mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.16em; margin:0 0 6px; font-weight:500; }
.page-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.page-meta .btn{ white-space:nowrap; }

/* ============ COMPOSITOR HOVER/STATE OVERLAYS ============
   Every element below crossfades its hover/selected/flash visuals on a
   z-index:-1 ::before/::after layer (opacity = compositor, not paint). That
   layer only paints above the host's OWN background — instead of being hoisted
   behind it — when the host forms its own stacking context. `position:relative`
   alone does NOT create one, so an opaque-background host would hide the tint.
   `isolation:isolate` creates the context with no other rendering effect. One
   rule here covers every host (all feature CSS is loaded globally). */
.btn, .seg .si, .tk-tile,
.mk-feature, .mk-plan,
.team-card, .search-row, .tt-chip,
.team-article,
.onb-tile,
.cop-welcome-suggest .cop-welcome-chip,
.settings-nav-item, .member-row, .copy-link .copy-btn,
.ds-row, .ds-linked-row, .ds-table-item, .ds-column-item,
.cop-history-item, .cop-chip-suggest, .cop-send,
.source-opt, .ck,
td.cell, .feed-item, [data-rt-flash] { isolation: isolate; }

/* ============ BUTTONS ============ */
/* Base .btn = the artboard-00 small bordered button (28px / radius 6 / 12px).
   .btn.lg = the default page-head action size (34px / radius 7 / 13px). */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 12px; border-radius:var(--radius);
  font-size:12px; font-weight:500; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--rule-3);
  box-shadow:var(--shadow-1); cursor:pointer; position:relative;
}
/* Hover tint crossfades on a compositor layer (opacity) rather than
   transitioning background-color (paint). z-index:-1 keeps the layer above the
   button's own background but below its label/icon. The variant sets --btn-hover. */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--btn-hover, var(--surface-2)); opacity:0;
  transition:opacity .12s ease; pointer-events:none; z-index:-1;
}
.btn:hover::after{ opacity:1; }
.btn:hover{ border-color:var(--ink-5); color:var(--ink); }
/* Tactile press: compositor-only scale, interruptible mid-transition. */
.btn{ transition-property:transform; transition-duration:.1s; }
.btn:active:not([disabled]){ transform:scale(0.96); }
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
  .btn:active:not([disabled]){ transform:none; }
}
.btn.primary{ background:var(--accent); color:#FFFFFF; border-color:var(--accent); --btn-hover:var(--accent-ink); }
.btn.primary:hover{ border-color:var(--accent-ink); }
.btn.ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-3); }
.btn.sm{ height:24px; padding:0 8px; font-size:12px; }
.btn.lg{ height:34px; padding:0 16px; font-size:13px; border-radius:7px; }
.btn.danger{ color:var(--bad); border-color:var(--bad-edge); --btn-hover:var(--bad-soft); }
.btn.danger:hover{ border-color:var(--bad-edge); color:var(--bad-ink); }
.btn .ic{ width:13px; height:13px; opacity:.85; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ============ PILLS ============ */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 9px; border-radius:11px;
  font-size:11px; font-weight:500; color:var(--ink-2);
  background:var(--surface-2); border:1px solid transparent; font-family:var(--mono);
}
.pill.outline{ background:transparent; border-color:var(--rule-3); color:var(--ink-3); }
.pill .dot{ width:6px; height:6px; border-radius:50%; }
.pill.warn{ color:var(--bad-ink); background:var(--bad-soft); }
.pill.warn .dot{ background:var(--bad); }
.pill.ok{ color:var(--ok-ink); background:var(--ok-soft); }
.pill.ok .dot{ background:var(--ok); }
.pill.attn{ color:var(--warn-ink); background:var(--warn-soft); }
.pill.attn .dot{ background:var(--warn); }

/* ============ SEGMENTED CONTROL ============ */
/* Track #EAEEF2 + 3px gutter + 26px items per artboard 00 "SEGMENTED". */
.seg{ display:inline-flex; align-items:center; background:var(--seg-track); border-radius:8px; padding:3px; }
.seg .si{
  height:26px; padding:0 10px; display:flex; align-items:center;
  font-size:12px; color:var(--ink-3); font-weight:500; border-radius:6px; cursor:pointer;
  text-decoration:none; position:relative;
}
/* The selected pill (surface + shadow) crossfades via opacity on a compositor
   layer instead of transitioning background/box-shadow (paint). */
.seg .si::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--surface); box-shadow:0 1px 2px rgba(21,36,47,0.08);
  opacity:0; transition:opacity .12s ease; pointer-events:none; z-index:-1;
}
.seg .si:hover{ color:var(--ink); }
.seg .si.on{ color:var(--ink); font-weight:500; }
.seg .si.on::after{ opacity:1; }

/* ============ CARDS ============ */
.card{
  background:var(--surface); border:1px solid var(--rule-2);
  border-radius:var(--radius-lg); box-shadow:none; overflow:hidden;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px 10px; border-bottom:1px solid var(--rule);
}
.card-head h3{ margin:0; font-size:13.5px; font-weight:600; }
.card-head .sub{ font-size:11.5px; color:var(--ink-3); font-family:var(--mono); }
.card-body{ padding:14px 16px; }

/* ============ KPI TILES (team header) ============ */
.team-kpis{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--rule); border-bottom:1px solid var(--rule);
}
@media (max-width:1100px){ .team-kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .team-kpis{ grid-template-columns:minmax(0, 1fr); } }
.tk-tile{
  background:var(--surface); padding:16px 20px 14px;
  display:flex; flex-direction:column; gap:8px;
  min-height:148px; position:relative; cursor:pointer; color:inherit;
}
/* Hover tint via opacity crossfade (compositor) instead of background (paint). */
.tk-tile::after{
  content:""; position:absolute; inset:0; background:var(--hover);
  opacity:0; transition:opacity .12s ease; pointer-events:none; z-index:-1;
}
.tk-tile:hover::after{ opacity:1; }
.tk-tile .tk-top{ display:flex; align-items:center; gap:8px; }
.tk-tile .tk-label{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.1em; font-weight:500; flex:1; min-width:0;
}
.tk-tile .tk-rag{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tk-tile .tk-rag.ok{ background:var(--ok); }
.tk-tile .tk-rag.warn{ background:var(--warn); }
.tk-tile .tk-rag.bad{ background:var(--bad); }
.tk-tile .tk-val{
  font-family:var(--mono); font-weight:500; letter-spacing:-0.03em;
  font-size:27px; line-height:1.05; display:flex; align-items:baseline; gap:2px;
}
.tk-tile .tk-val .prefix{ color:var(--ink-3); font-size:16px; font-weight:400; margin-right:1px; }
.tk-tile .tk-val .unit{ color:var(--ink-3); font-size:15px; font-weight:400; }
.tk-tile .tk-sub{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.tk-tile .tk-delta{ font-weight:500; }
.tk-tile .tk-delta.ok{ color:var(--ok-ink); }
.tk-tile .tk-delta.bad{ color:var(--bad-ink); }
.tk-tile .tk-delta.warn{ color:var(--warn-ink); }
.tk-tile .tk-spark{ margin-top:auto; padding-top:4px; }
.tk-tile .tk-foot{ font-family:var(--mono); font-size:10px; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.1em; display:flex; align-items:center; gap:6px; }

/* ============ FLASH / EMPTY / FORMS-LITE ============ */
.flash-wrap{ position:fixed; top:60px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; width:min(460px, calc(100% - 32px)); pointer-events:none; }
.flash{
  padding:10px 14px; border-radius:8px; font-size:13px; box-shadow:var(--shadow-pop);
  background:var(--surface); border:1px solid var(--rule-2); color:var(--ink-2);
  display:flex; align-items:center; gap:8px;
}
.flash.notice{ border-color:var(--ok); background:var(--ok-soft); color:var(--ok-ink); }
.flash.alert{ border-color:var(--bad); background:var(--bad-soft); color:var(--bad-ink); }

.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:60px 24px; text-align:center; color:var(--ink-3);
}
.empty-state h3{ margin:0; font-size:16px; font-weight:500; color:var(--ink); }
.empty-state p{ margin:0; font-size:13px; max-width:420px; }

/* shared form primitives (used by wizard, data sources, settings, auth) */
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.12em; margin-bottom:6px; font-weight:500;
}
.field .hint{ font-size:11.5px; color:var(--ink-4); margin-top:6px; line-height:1.4; }
.field .error{ font-size:11.5px; color:var(--bad-ink); margin-top:6px; }
.input, .select, .textarea{
  width:100%; height:34px; padding:0 10px;
  border:1px solid var(--rule-3); border-radius:var(--radius);
  background:var(--surface); font-size:13px; color:var(--ink);
  font-family:var(--sans);
}
/* Focus ring appears instantly — animating a paint-tier border-color/box-shadow
   would be C-tier, and snapping the ring is the standard, accessible behavior. */
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='none' stroke='%235B6B78' stroke-width='1.4' d='M2.5 4 L5 6.5 L7.5 4'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px;
}
.textarea{ height:auto; padding:8px 10px; min-height:64px; resize:vertical; line-height:1.5; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* ============ THEME (user-menu control) ============ */
.theme-seg{ display:flex; margin:2px 6px 4px; }
.theme-seg .si{ flex:1; justify-content:center; }

/* ============ DARK MODE — "Chart Room, night" ============
   An inline head script resolves the stored preference (localStorage
   "cadry-theme": light | dark | system) to html[data-theme] before first
   paint. Tokens re-declare on body[data-themeable] — the layout marks only
   app pages, so marketing and auth keep their designed light palette even
   while the signed-in app is dark (Turbo keeps html attributes across
   visits; body attributes travel with each page).
   Neutrals extend the validated mailer dark translation (#0F1922 ground,
   #1B2833 card, #263644 rules). Rules locked by design review still hold:
   accent hue-parameterized, neutral data lines, amber = flagged. */
html[data-theme="dark"]:has(body[data-themeable]){ background:#0F1922; }
[data-theme="dark"] body[data-themeable]{
  color-scheme: dark;

  --accent:      oklch(0.60 0.10 var(--accent-h));
  --accent-soft: oklch(0.30 0.05 var(--accent-h));
  --accent-edge: oklch(0.46 0.07 var(--accent-h));
  --accent-ink:  oklch(0.80 0.08 var(--accent-h));

  --bg:        #0F1922;
  --surface:   #1B2833;
  --surface-2: #243440;
  --surface-3: #2C3E4C;
  --hover:     #223240;

  --ink:   #E9F0F5;
  --ink-2: #BCC9D3;
  --ink-3: #8496A3;
  --ink-4: #64778A;
  --ink-5: #3C4E5E;

  --rule:   #223140;
  --rule-2: #2A3A48;
  --rule-3: #364A5B;

  --ok:   oklch(0.68 0.10 160);
  --warn: oklch(0.72 0.11 75);
  --bad:  oklch(0.64 0.13 28);
  --ok-soft:   oklch(0.28 0.035 160);
  --warn-soft: oklch(0.28 0.04 75);
  --bad-soft:  oklch(0.27 0.04 28);
  --ok-ink:   oklch(0.78 0.08 160);
  --warn-ink: oklch(0.80 0.09 75);
  --bad-ink:  oklch(0.76 0.10 28);
  --bad-edge: #5C3B36;

  --chart-2: oklch(0.68 0.11 250);
  --chart-3: oklch(0.70 0.10 330);
  --goal-line: oklch(0.66 0.05 250);
  --asst-area: color-mix(in srgb, var(--chart) 16%, transparent);

  /* The dark steps are CHOSEN against the dark surface, not flipped from the
     light ones: on a dark ground more means lighter, and an inverted light ramp
     would put its strongest step where the eye reads "empty". */
  --seq-1: oklch(0.42 0.062 245);
  --seq-2: oklch(0.50 0.082 245);
  --seq-3: oklch(0.58 0.096 245);
  --seq-4: oklch(0.66 0.100 245);
  --seq-5: oklch(0.74 0.095 245);

  --dv-3: oklch(0.50 0.13 28);
  --dv-2: oklch(0.40 0.09 28);
  --dv-1: oklch(0.31 0.05 28);
  --dv0:  var(--surface-2);
  --dv1:  oklch(0.31 0.045 160);
  --dv2:  oklch(0.40 0.08 160);
  --dv3:  oklch(0.50 0.105 160);

  --wash: color-mix(in srgb, var(--ink-3) 14%, transparent);

  --topbar-bg: rgba(27,40,51,0.92);
  --seg-track: #101B24;

  --shadow-1: 0 1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-2: 0 1px 0 rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.28);
  --shadow-pop: 0 8px 28px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.25);
}
/* The select caret is an inline SVG data URI; give it a light stroke. */
[data-theme="dark"] body[data-themeable] .select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='none' stroke='%238496A3' stroke-width='1.4' d='M2.5 4 L5 6.5 L7.5 4'/></svg>");
}