/* Nuca Channel Review — base design system (SPEC §5.6 "Look").
   The Nuca Tasks / CRM look: dark by default, light via <html data-theme="light"> (set by
   theme-init.js, key `nt-theme`), teal accent, system font stack, no external assets.
   Section 1 is the Nuca Tasks token block copied from ../nuca-channel-launch/app/static/theme.css:8-35
   (only the light selector changed: this app sets data-theme on <html>, not <body>).
   Rules: no colour literal outside the token blocks; no inline style or script anywhere (CSP).
   Page-specific rules (cards, queue, tables of a given page, .htmx-indicator) live in app.css. */

/* ---------- 1. Tokens (Nuca Tasks, verbatim) ---------- */
:root{
  --bg:#0b0d11;--surface:#13161d;--surface2:#1a1e28;--surface3:#222736;--border:#2a2f3e;
  --text:#e8eaf0;--text2:#7c8295;--text3:#4e5468;
  --teal:#00d4aa;--teal-dim:rgba(0,212,170,.12);
  --red:#ff5252;--red-dim:rgba(255,82,82,.12);
  --orange:#ffab40;--orange-dim:rgba(255,171,64,.12);
  --blue:#448aff;--blue-dim:rgba(68,138,255,.12);
  --green:#69f0ae;--green-dim:rgba(105,240,174,.12);
  --purple:#b388ff;--purple-dim:rgba(179,136,255,.12);
  --navy:#1f3a5f;
  --radius:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f6fa;--surface:#ffffff;--surface2:#eef1f6;--surface3:#e3e8f0;--border:#d6dce6;
  --text:#1a1f2b;--text2:#5a6270;--text3:#8a93a3;
  --teal:#00a88a;--teal-dim:rgba(0,168,138,.12);
  --red:#e53935;--red-dim:rgba(229,57,53,.10);
  --orange:#f57c00;--orange-dim:rgba(245,124,0,.12);
  --blue:#1976d2;--blue-dim:rgba(25,118,210,.10);
  --green:#2e9e5b;--green-dim:rgba(46,158,91,.12);
  --purple:#7e57c2;--purple-dim:rgba(126,87,194,.12);
  color-scheme:light;
}
/* Light mode text accents taken dark enough for 4.5:1 on their own 12% tint (the ncl audit fix). */
:root[data-theme="light"]{
  --teal-text:#006a57;--red-text:#b31d19;--orange-text:#8f4900;--blue-text:#145ea8;--green-text:#1e693c;
}

/* ---------- 2. Derived tokens (resolve on the same element, so both themes follow) ---------- */
:root,:root[data-theme="light"]{
  --accent:var(--teal);--accent-soft:var(--teal-dim);--accent-ink:var(--bg);
  --good:var(--green);--good-soft:var(--green-dim);
  --warn:var(--orange);--warn-soft:var(--orange-dim);
  --bad:var(--red);--bad-soft:var(--red-dim);
  --info:var(--blue);--info-soft:var(--blue-dim);
  --focus:var(--teal-dim);
  --r-control:6px;--r-card:var(--radius);--r-pill:999px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-16:16px;--fs-20:20px;--fs-24:24px;--fs-32:32px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;
  --content:1440px;
}
:root[data-theme="light"]{
  --good:var(--green-text);--warn:var(--orange-text);--bad:var(--red-text);--info:var(--blue-text);
  --accent-text:var(--teal-text);--shadow:0 6px 24px rgba(0,0,0,.12);
}
:root{--accent-text:var(--teal)}

/* ---------- 3. Base elements ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-14)/1.5 var(--font);
  -webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{margin:0 0 var(--sp-3);line-height:1.25;font-weight:600}
h1{font-size:var(--fs-24)}h2{font-size:var(--fs-20)}h3{font-size:var(--fs-16)}h4{font-size:var(--fs-14)}
p{margin:0 0 var(--sp-3)}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
code,kbd,pre{font-family:var(--mono);font-size:.92em}
code{background:var(--surface2);padding:1px 5px;border-radius:4px}
kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border:1px solid var(--border);
  border-bottom-width:2px;border-radius:4px;background:var(--surface2);text-align:center}
pre{background:var(--surface2);padding:var(--sp-3);border-radius:var(--r-control);overflow:auto}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-4) 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--teal-dim)}
details{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);
  margin:0 0 var(--sp-3)}
details>summary{cursor:pointer;padding:var(--sp-3) var(--sp-4);font-weight:600;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸";display:inline-block;width:1.2em;color:var(--text2)}
details[open]>summary::before{content:"▾"}
details>.details-body{padding:0 var(--sp-4) var(--sp-4)}

/* ---------- 4. Shell ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--surface);padding:var(--sp-2) var(--sp-3);z-index:100}
.skip-link:focus{left:var(--sp-2);top:var(--sp-2)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-2) var(--sp-4);background:var(--surface);border-bottom:1px solid var(--border);
  flex-wrap:wrap}
.brand{font-weight:700;color:var(--text);font-size:var(--fs-16);white-space:nowrap}
.brand span{color:var(--accent-text);font-weight:600}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.nav-link{color:var(--text2);padding:6px var(--sp-3);border-radius:var(--r-control);font-weight:500}
.nav-link:hover{color:var(--text);background:var(--surface2);text-decoration:none}
.nav-link.active{color:var(--text);background:var(--surface3)}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.reviewer{color:var(--text2);font-size:var(--fs-13)}
.signout{margin:0}
.main{max-width:var(--content);margin:0 auto;padding:var(--sp-4)}
.main:focus{outline:none}
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;margin-bottom:var(--sp-4)}
.page-head h1{margin:0}
body.anon .main{max-width:420px;padding-top:var(--sp-12)}

/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:7px 14px;border:1px solid var(--border);border-radius:var(--r-control);
  background:var(--surface2);color:var(--text);font:500 var(--fs-14)/1.2 var(--font);
  cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface3);text-decoration:none}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent);filter:brightness(1.08)}
.btn-good{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.btn-warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.btn-danger,.btn-bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text2)}
.btn-ghost:hover{background:var(--surface2);color:var(--text)}
.btn-sm{padding:4px 10px;font-size:var(--fs-13)}
.btn-lg{padding:10px 20px;font-size:var(--fs-16)}
.btn-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}

/* ---------- 6. Forms ---------- */
label{display:block;font-weight:500;margin-bottom:var(--sp-1);color:var(--text)}
.field{margin-bottom:var(--sp-4)}
.hint{color:var(--text2);font-size:var(--fs-13);margin-top:var(--sp-1)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],
input[type=url],select,textarea{width:100%;padding:8px 10px;border:1px solid var(--border);
  border-radius:var(--r-control);background:var(--bg);color:var(--text);font:var(--fs-14)/1.4 var(--font)}
textarea{min-height:120px;resize:vertical;font-family:var(--mono);font-size:var(--fs-13)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus)}
input[type=checkbox],input[type=radio]{accent-color:var(--teal)}
.inline-form{display:flex;gap:var(--sp-2);align-items:end;flex-wrap:wrap}
.inline-form .field{margin:0}
.error-text{color:var(--bad);font-size:var(--fs-13)}

/* ---------- 7. Cards, tiles, stats ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--sp-4);margin-bottom:var(--sp-4)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-2)}
.stat{background:var(--surface2);border-radius:var(--r-control);padding:var(--sp-2) var(--sp-3)}
.stat-label{display:block;color:var(--text2);font-size:var(--fs-12)}
.stat-value{display:block;font-size:var(--fs-20);font-weight:600;font-variant-numeric:tabular-nums}
.big-number{font-size:var(--fs-32);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3)}
.tile{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-control);
  overflow:hidden;display:flex;flex-direction:column}
.tile img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface3)}
.tile-body{padding:var(--sp-2);font-size:var(--fs-13)}
.tile-title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--text);margin-bottom:var(--sp-1)}
.tile-meta{color:var(--text2);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.tile.outlier{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--surface3)}
.avatar-sm{width:28px;height:28px}
.empty{text-align:center;color:var(--text2);padding:var(--sp-12) var(--sp-4)}

/* ---------- 8. Chips and badges ---------- */
.chips{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-12);font-weight:600;background:var(--surface3);color:var(--text2);
  border:1px solid transparent;white-space:nowrap}
.chip-good{background:var(--good-soft);color:var(--good)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-bad{background:var(--bad-soft);color:var(--bad)}
.chip-info{background:var(--info-soft);color:var(--info)}
.chip-accent{background:var(--accent-soft);color:var(--accent-text)}
.verdict-add{color:var(--good)}.verdict-watch{color:var(--warn)}.verdict-dismiss{color:var(--bad)}

/* ---------- 9. Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);
  border-radius:var(--r-card);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.table th,.table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
.table th{color:var(--text2);font-weight:600;font-size:var(--fs-12);white-space:nowrap;
  background:var(--surface2);position:sticky;top:0}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface2)}
.table .num,.num{text-align:right;font-variant-numeric:tabular-nums}
.table th a{color:inherit}
.table th[aria-sort] a{color:var(--text)}

/* ---------- 10. Flash, pager, errors ---------- */
.flash-area{max-width:var(--content);margin:0 auto;padding:0 var(--sp-4)}
.flash{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-control);
  border:1px solid var(--border);background:var(--surface2)}
.flash-good{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.flash-warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.flash-bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.flash-info{background:var(--info-soft);border-color:var(--info);color:var(--info)}
.pager{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin:var(--sp-4) 0}
.pager-pos{color:var(--text2);font-size:var(--fs-13)}
.error-page{max-width:560px;margin:var(--sp-12) auto;text-align:center}
.error-code{font-size:var(--fs-32);font-weight:700;color:var(--text3);margin:0}

/* ---------- 11. Utilities ---------- */
.muted{color:var(--text2)}.faint{color:var(--text3)}
.small{font-size:var(--fs-13)}.tiny{font-size:var(--fs-12)}
.mono{font-family:var(--mono)}
.prewrap{white-space:pre-line;overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.good{color:var(--good)}.warn{color:var(--warn)}.bad{color:var(--bad)}.info{color:var(--info)}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.stack>*+*{margin-top:var(--sp-3)}
.grow{flex:1 1 auto;min-width:0}
.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}

/* ---------- 12. Small screens ---------- */
@media (max-width:720px){
  .topbar{gap:var(--sp-2)}
  .topbar-end{margin-left:0;width:100%;justify-content:flex-end}
  .main{padding:var(--sp-3)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .big-number{font-size:var(--fs-24)}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}