/* ============================================================
   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{
  --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. */
  --chart: var(--ink-3);

  --row-h: 32px;

  --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; }

/* ============ TOP BAR ============ */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:12px;
  height:48px; padding:0 14px 0 16px;
  background:rgba(255,255,255,0.92); 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); }
.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. */
.crumb-sep{ color:var(--ink-5); font-weight:400; padding:0 2px; font-family:var(--sans); }
.crumb{ color:var(--ink-4); font-weight:400; padding:3px 6px; border-radius:4px; font-family:var(--sans); font-size:13px; }
.crumb:hover{ background:var(--surface-2); color:var(--ink-2); }
.crumb.cur{ color:var(--ink); font-weight:600; }

/* primary nav chips (Briefing / Teams / Settings) */
.nav-chips{ display:flex; align-items:center; gap:2px; margin-left: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); }

.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;
}
.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; }

/* ============ 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);
}
/* 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; }

/* ============ 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, .seg-input .si, .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:#EAEEF2; 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: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)); }
.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; }