/* ============================================================
   automate.business: design system
   An nzwe.com venture · GST compliance for NZ accounting firms
   Mood: precise, calm, financial-instrument. Trust is the aesthetic.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Public+Sans:wght@400;500;600;700&family=Schibsted+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Neutral surfaces (warm stone) ---- */
  --paper:        #f4f3ef;
  --surface:      #ffffff;
  --surface-2:    #faf9f6;
  --surface-3:    #f0efe9;
  --ink:          #1b1d1a;
  --ink-2:        #494d46;
  --ink-3:        #7c8079;
  --ink-4:        #a7aaa2;
  --line:         #e5e3dc;
  --line-2:       #d8d6cd;
  --line-strong:  #c7c5ba;

  /* ---- Accent (single brand action color) ---- */
  --accent:       #2563c9;
  --accent-press: #2059b4;
  --accent-ink:   #11305c;
  --accent-soft:  #e4edfb;
  --accent-line:  #bacff0;

  /* ---- Semantic status (color = meaning, never decoration) ---- */
  --attn:         #9a6400;   --attn-bg:  #f8edd4;  --attn-line: #e7cb86;
  --flag:         #b1530b;   --flag-bg:  #fbe6d5;  --flag-line: #eebd93;
  --ok:           #1c7a4f;   --ok-bg:    #e2efe8;  --ok-line:   #b6d8c5;
  --filed:        #51606e;   --filed-bg: #e9edf1;  --filed-line:#c8d2db;
  --error:        #b3261e;   --error-bg: #f9e4e1;  --error-line:#eeb6b0;
  --proc:         #1f6fb2;   --proc-bg:  #e4eef7;  --proc-line: #b3d2ea;

  /* ---- Type ---- */
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs:   11px;
  --t-sm:   12px;
  --t-base: 13px;
  --t-md:   14px;
  --t-lg:   16px;
  --t-xl:   20px;
  --t-2xl:  27px;
  --t-disp: 34px;

  /* ---- Shape ---- */
  --r-sm: 5px;
  --r:    7px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 1.5px rgba(28,30,26,.05);
  --shadow:    0 1px 2px rgba(28,30,26,.06), 0 2px 8px rgba(28,30,26,.04);
  --shadow-lg: 0 8px 30px rgba(28,30,26,.10), 0 2px 6px rgba(28,30,26,.06);

  --sidebar-w: 248px;
  --topbar-h:  60px;
}

* { box-sizing: border-box; }

/* global polish: smooth anchor scroll, selection, focus rings */
html { scroll-behavior: smooth; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* tabular figures everywhere numbers appear */
.num, .mono, td.num, .figure {
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }

/* ============================================================
   App shell
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--paper);
}

/* ---- Sidebar ---- */
.side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.brand {
  display: flex;
  align-items: center;
  padding: 19px 18px 18px;
  border-bottom: 1px solid var(--line);
}
/* refined typographic wordmark */
.wordmark {
  font-family: 'DM Sans', var(--sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}
.wordmark b { color: var(--accent); font-weight: 700; }
.wordmark .biz { color: var(--ink); font-weight: 700; }
.wordmark.dark { color: #fff; }
.wordmark.dark b { color: #84a9f6; }
.wordmark.dark .biz { color: #fff; }

.nav { padding: 10px 10px; display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.nav .group-label {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); padding: 14px 10px 6px; font-weight: 600;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--t-md); font-weight: 500;
  position: relative;
}
.nav a svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.nav a:hover { background: var(--surface-3); }
.nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav a.active svg { color: var(--accent); }
.nav a .count {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--attn-bg); color: var(--attn);
  border: 1px solid var(--attn-line);
  padding: 0 6px; border-radius: 20px; line-height: 16px;
}
.nav a.active .count { background: #fff; }

.side .spacer { flex: 1; }
.side-foot {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  position: relative;
}
/* account trigger + menu */
.acct-trigger { display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; background:none; border:none; padding:0; text-align:left; font:inherit; }
.acct-trigger .chev { margin-left:auto; color:var(--ink-4); transition:transform .15s ease; flex:none; }
.acct-trigger .chev svg { width:15px; height:15px; display:block; }
.acct-toggle:checked ~ .acct-trigger .chev { transform:rotate(180deg); }
.acct-pop { position:absolute; left:12px; right:12px; bottom:62px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; display:none; z-index:60; }
.acct-toggle:checked ~ .acct-pop { display:block; }
.acct-pop .ap-head { padding:13px 14px; border-bottom:1px solid var(--line); }
.acct-pop .ap-head .nm { font-size:var(--t-base); font-weight:700; color:var(--ink); }
.acct-pop .ap-head .em { font-size:var(--t-xs); color:var(--ink-3); font-family:var(--mono); margin-top:2px; }
.acct-sec { display:flex; align-items:center; gap:7px; margin-top:10px; font-size:var(--t-xs); font-weight:600; color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:6px; padding:5px 8px; }
.acct-sec svg { width:12px; height:12px; flex:none; }
.ap-item { display:flex; align-items:center; gap:11px; padding:9px 14px; font-size:var(--t-base); color:var(--ink-2); cursor:pointer; text-decoration:none; }
.ap-item:hover { background:var(--surface-2); color:var(--ink); }
.ap-item svg { width:15px; height:15px; color:var(--ink-3); flex:none; }
.ap-item.danger { color:var(--error); }
.ap-item.danger svg { color:var(--error); }
.ap-div { height:1px; background:var(--line); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #1d4a90, #2563c9);
  color: #fff; font-weight: 700; font-size: 12px;
  display: grid; place-items: center; flex: none;
}
.side-foot .who { line-height: 1.25; min-width: 0; }
.side-foot .who .n { font-size: var(--t-base); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .who .r { font-size: var(--t-xs); color: var(--ink-3); }

/* ---- Main column ---- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.topbar {
  height: var(--topbar-h); flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px;
}
.topbar .crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--t-md); color: var(--ink-3); }
.topbar .crumbs b { color: var(--ink); font-weight: 600; }
.topbar .crumbs .sep { color: var(--ink-4); }
.search {
  margin-left: 6px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 7px 11px; width: 320px; color: var(--ink-3);
  font-size: var(--t-md); white-space: nowrap;
}
.search .txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search svg { width: 15px; height: 15px; flex: none; }
.search .k { margin-left: auto; font-family: var(--mono); font-size: 10px; border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; color: var(--ink-4); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar .right > * { flex: none; }

.period {
  display: flex; align-items: center; gap: 9px; white-space: nowrap; flex: none;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 6px 11px;
  font-size: var(--t-md); color: var(--ink); font-weight: 500;
}
.period .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.period .lab { color: var(--ink-3); font-weight: 500; }
.period .mono { color: var(--ink); }
.period svg { width: 14px; height: 14px; color: var(--ink-3); }

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  display: grid; place-items: center; color: var(--ink-2); cursor: pointer;
  position: relative;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .pip { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--flag); border: 1.5px solid var(--surface); }

.content { flex: 1; overflow: auto; padding: 22px 24px 40px; min-height: 0; }
.content.tight { padding: 0; }

/* ============================================================
   Page header
   ============================================================ */
.page-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .title { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.025em; }
.page-head .sub { font-size: var(--t-md); color: var(--ink-3); margin-top: 3px; }
.page-head .ph-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: var(--t-md); font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  cursor: pointer; line-height: 1; white-space: nowrap; text-decoration: none;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--accent-press); border-color: var(--accent-press); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { padding: 6px 10px; font-size: var(--t-base); }
.btn.lg { padding: 12px 20px; font-size: var(--t-lg); }
.btn.danger { color: var(--error); border-color: var(--error-line); background: var(--error-bg); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================================================
   Status pill: one-glance cycle state
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 600; line-height: 1;
  padding: 4px 9px 4px 7px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.pill .ic { width: 13px; height: 13px; flex: none; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pill.attn   { color: var(--attn);  background: var(--attn-bg);  border-color: var(--attn-line); }
.pill.flag   { color: var(--flag);  background: var(--flag-bg);  border-color: var(--flag-line); }
.pill.ok     { color: var(--ok);    background: var(--ok-bg);    border-color: var(--ok-line); }
.pill.filed  { color: var(--filed); background: var(--filed-bg); border-color: var(--filed-line); }
.pill.error  { color: var(--error); background: var(--error-bg); border-color: var(--error-line); }
.pill.proc   { color: var(--proc);  background: var(--proc-bg);  border-color: var(--proc-line); }
.pill.attn .dot{background:var(--attn);} .pill.flag .dot{background:var(--flag);}
.pill.ok .dot{background:var(--ok);} .pill.filed .dot{background:var(--filed);}
.pill.error .dot{background:var(--error);} .pill.proc .dot{background:var(--proc);}
.pill.proc .dot { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.pill.lg { font-size: var(--t-base); padding: 6px 12px 6px 9px; }

/* ============================================================
   Cards / panels
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.card-head h3 { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; }
.card-head .ch-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card-body { padding: 16px; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 15px 16px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.kpi .kl { font-size: var(--t-sm); color: var(--ink-3); font-weight: 600; letter-spacing: .01em; display:flex; align-items:center; gap:6px; }
.kpi .kv { font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; margin-top: 8px; color: var(--ink); }
.kpi .kv.tiny { font-size: 22px; }
.kpi .km { font-size: var(--t-sm); color: var(--ink-3); margin-top: 4px; }
.kpi .accent-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }

/* ============================================================
   Tables: dense, calm, tabular
   ============================================================ */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-base); }
.tbl thead th {
  text-align: left; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .045em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.tbl thead th.r, .tbl td.r { text-align: right; }
.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tbl .client { display: flex; align-items: center; gap: 11px; }
.tbl .client .ci { width: 30px; height: 30px; border-radius: 6px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #fff; }
.tbl .client .cn { font-weight: 600; color: var(--ink); }
.tbl .client .cm { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--mono); }
.tbl .check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--surface); display: inline-block; vertical-align: middle; }
.tbl .check.on { background: var(--accent); border-color: var(--accent); position: relative; }
.tbl .check.on::after { content:''; position:absolute; left:4.5px; top:2px; width:4px; height:7px; border:solid #fff; border-width:0 2px 2px 0; transform: rotate(45deg); }
.tbl tr.sel td { background: var(--accent-soft) !important; }

/* density (driven by Tweaks on the suite) */
:root[data-density="compact"] .tbl thead th { padding-top:7px; padding-bottom:7px; }
:root[data-density="compact"] .tbl tbody td { padding-top:8px; padding-bottom:8px; }
:root[data-density="compact"] .queue-item { padding-top:9px; padding-bottom:9px; }
:root[data-density="comfy"] .tbl tbody td { padding-top:16px; padding-bottom:16px; }
:root[data-density="comfy"] .queue-item { padding-top:17px; padding-bottom:17px; }

.muted { color: var(--ink-3); }
.tiny { font-size: var(--t-xs); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: .55; }
tr:hover .row-actions { opacity: 1; }

/* cycle micro-tracker in table */
.cyc { display: inline-flex; gap: 3px; align-items: center; }
.cyc i { width: 16px; height: 5px; border-radius: 3px; background: var(--line-2); display: inline-block; }
.cyc i.done { background: var(--accent); }
.cyc i.now  { background: var(--proc); animation: pulse 1.6s ease-in-out infinite; }
.cyc i.flag { background: var(--flag); }

/* deadline chip */
.dl { font-family: var(--mono); font-size: var(--t-sm); display:inline-flex; align-items:center; gap:6px; }
.dl .bar { width: 46px; height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.dl .bar i { display:block; height:100%; background: var(--ink-3); }
.dl.soon .bar i { background: var(--attn); }
.dl.urgent { color: var(--error); }
.dl.urgent .bar i { background: var(--error); }

/* bulk action bar */
.bulkbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--accent-ink); color: #fff;
  border-radius: var(--r); padding: 10px 12px 10px 16px;
  box-shadow: var(--shadow-lg);
}
.bulkbar .cnt { font-family: var(--mono); font-weight: 500; font-size: var(--t-base); color: rgba(255,255,255,.72); }
.bulkbar .cnt b { background: var(--accent); color:#fff; font-weight:600; padding: 2px 8px; border-radius: 20px; margin-right: 8px; }
.bulkbar .sep { width: 1px; height: 20px; background: rgba(255,255,255,.2); }
.bulkbar .b {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-md); font-weight: 600; color: #fff;
  padding: 7px 11px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid rgba(255,255,255,.16);
}
.bulkbar .b svg { width: 15px; height: 15px; }
.bulkbar .b:hover { background: rgba(255,255,255,.10); }
.bulkbar .b.go { background: var(--accent); border-color: var(--accent); }
.bulkbar .x { margin-left: 4px; opacity: .7; cursor: pointer; display:grid; place-items:center; }

/* segmented control / filters */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { font-family: var(--sans); font-size: var(--t-base); font-weight: 600; color: var(--ink-3); background: transparent; border: none; padding: 6px 11px; border-radius: 4px; cursor: pointer; display:flex; align-items:center; gap:6px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg button .c { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.seg button.on .c { color: var(--accent); }

.filterbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.chip { display:inline-flex; align-items:center; gap:7px; font-size: var(--t-base); font-weight:500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer; }
.chip svg { width: 14px; height: 14px; color: var(--ink-3); }
.chip .v { color: var(--ink); font-weight: 600; }

/* misc */
.divider { height: 1px; background: var(--line); margin: 0; border: 0; }
.section-label { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; }
.flex { display: flex; }
.between { display:flex; align-items:center; justify-content:space-between; }
.gap8{gap:8px;} .gap12{gap:12px;} .gap16{gap:16px;}
.acc { color: var(--accent); }
.up { color: var(--ok); } .down { color: var(--error); }

/* ============================================================
   App responsive: design target 1440, fluid to mobile
   ============================================================ */
/* Large desktop / small laptop */
@media (max-width: 1180px) {
  :root { --sidebar-w: 224px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
/* Tablet landscape */
@media (max-width: 1024px) {
  :root { --sidebar-w: 210px; }
  .content { padding: 18px 16px 36px; }
  .search { width: 200px; }
}
/* Tablet portrait & below: collapse the sidebar, stack two-column work areas */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr !important; }
  .side { display: none !important; }
  .topbar .search { display: none; }
  .content { padding: 16px 14px 38px; }
  /* stack the framed two/three-column layouts */
  .review-grid, .cyc-grid, .cc-grid, .act-grid, .dev-grid, .rules-grid, .pack-grid { grid-template-columns: 1fr !important; }
  .rv-rail, .cyc-rail, .pack-rail, .pack-nav { border-left: none !important; border-right: none !important; border-top: 1px solid var(--line); }
  .plan-rail { position: static !important; }
  /* auth screens */
  .lg, .ob { grid-template-columns: 1fr !important; }
  .lg-aside, .ob-aside { display: none !important; }
  .lg-card, .connect-card { width: 100% !important; max-width: 440px; }
}
/* Mobile */
@media (max-width: 600px) {
  .kpi-row { grid-template-columns: 1fr; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar .crumbs { font-size: var(--t-base); }
  .page-head { flex-wrap: wrap; gap: 12px; }
  .bulkbar, .bulkbar2 { flex-wrap: wrap; gap: 10px; }
  .seg { overflow-x: auto; max-width: 100%; }
  .card { overflow-x: auto; }
  .content { padding: 14px 12px 36px; }
}

/* ============================================================
   Dark operator-console theme: opt-in via [data-theme="dark"]
   ============================================================ */
:root[data-theme="dark"] {
  --paper:#14161a;
  --surface:#1b1e22;
  --surface-2:#212529;
  --surface-3:#2a2f33;
  --ink:#edefec;
  --ink-2:#bcc1bd;
  --ink-3:#878d88;
  --ink-4:#5c625d;
  --line:#2b3034;
  --line-2:#353b40;
  --line-strong:#464d52;

  --accent:#5b8def;
  --accent-press:#79a6f5;
  --accent-ink:#0e1f3c;
  --accent-soft:rgba(91,141,240,.15);
  --accent-line:rgba(91,141,240,.34);

  --attn:#e0a23a; --attn-bg:rgba(224,162,58,.14); --attn-line:rgba(224,162,58,.30);
  --flag:#e5894d; --flag-bg:rgba(229,137,77,.14); --flag-line:rgba(229,137,77,.30);
  --ok:#3cbb82; --ok-bg:rgba(60,187,130,.14); --ok-line:rgba(60,187,130,.30);
  --filed:#94a6b5; --filed-bg:rgba(148,166,181,.14); --filed-line:rgba(148,166,181,.28);
  --error:#ec6b62; --error-bg:rgba(236,107,98,.14); --error-line:rgba(236,107,98,.30);
  --proc:#4aa6e3; --proc-bg:rgba(74,166,227,.14); --proc-line:rgba(74,166,227,.30);

  --shadow-sm:0 1px 1.5px rgba(0,0,0,.45);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.32);
  --shadow-lg:0 10px 34px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}
/* dark-mode component touch-ups (where accent-ink was a dark surface used with dark text) */
:root[data-theme="dark"] body, :root[data-theme="dark"] .app { background: var(--paper); }
:root[data-theme="dark"] .nav a.active { color:#84a9f6; }
:root[data-theme="dark"] .nav a.active svg { color:#84a9f6; }
/* accent-ink is a dark-green surface in dark mode, fix places it was used as TEXT on soft-green */
:root[data-theme="dark"] .reason,
:root[data-theme="dark"] .ev-reason,
:root[data-theme="dark"] .cite,
:root[data-theme="dark"] .ai-eyebrow,
:root[data-theme="dark"] .treat.cap,
:root[data-theme="dark"] .scope.firm,
:root[data-theme="dark"] .rule .r-logic .tok.code,
:root[data-theme="dark"] .tool-row .tn,
:root[data-theme="dark"] .thresh .tv,
:root[data-theme="dark"] .actor .badge.agent,
:root[data-theme="dark"] .change-line .now,
:root[data-theme="dark"] .skill .sk-ic svg { color:#84a9f6; }
:root[data-theme="dark"] ::selection { background: rgba(91,141,240,.3); color:#e9f6ef; }
:root[data-theme="dark"] .wordmark .biz { color: var(--ink-2); }
:root[data-theme="dark"] .avatar { background: linear-gradient(135deg,#1d4a90,#5b8def); }
:root[data-theme="dark"] .kpi .accent-edge { opacity:.9; }
:root[data-theme="dark"] .cmd:focus-within { box-shadow:0 0 0 3px var(--accent-soft); }
/* theme toggle button (injected by theme.js) */
.theme-toggle { width:34px; height:34px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); display:grid; place-items:center; color:var(--ink-2); cursor:pointer; flex:none; }
.theme-toggle svg { width:16px; height:16px; }
.theme-toggle .moon { display:block; } .theme-toggle .sun { display:none; }
:root[data-theme="dark"] .theme-toggle .moon { display:none; } :root[data-theme="dark"] .theme-toggle .sun { display:block; }