/* ============================================================================
 * Rokkit design system — the ONE place tokens + base components are defined.
 *
 * Every module renders through the shell's base template (core.dashboard.chrome
 * render_page), which links this bundle, so all modules share one visual language.
 * Modules are NEVER styled individually — override a token here and the whole
 * product reskins.
 *
 * v5 design language: a confident, data-dense console — dark-first, layered
 * navy/slate surfaces, ONE cyan accent, mono numerals, a whisper dot-grid, and
 * restrained motion. Reads like a premium fraud/risk console (Sardine/Feedzai/
 * Unit21) and premium dev tools (Linear/Vercel), not a neon hacker theme.
 *
 * Layers:
 *   1. Tokens        — palette (dark default + light alternative), type, spacing.
 *   2. Base + a11y   — reset, dot-grid, focus, skip link, reduced-motion.
 *   3. Shell         — left rail (module + section nav), sticky topbar, demo banner.
 *   4. Components     — cards, stat tiles, tables, bars, buttons, badges, panels,
 *                       charts, forms, assistant.
 *
 * White-label hook: the shell may emit a small inline `:root` override (brand
 * colours from a tenant's config) AFTER this file. Because every component reads
 * these variables and nothing hardcodes a hex, overriding a token reskins the
 * whole product.
 *
 * Palettes are validated, not eyeballed: UI text/status tokens meet WCAG-AA
 * (>=4.5:1) on their surfaces in BOTH themes (scripts/contrast_check.py); the
 * categorical chart ramp is a CVD-safe blue/orange/violet/teal set in both themes.
 * ========================================================================== */

/* ------------------------------- 1. tokens ------------------------------- */

/* DARK is the default (dark-first). Light is a first-class alternative, applied
 * via prefers-color-scheme: light and via an explicit data-theme="light". */
:root {
  /* ---- palette: layered surfaces & ink (dark) ---- */
  --surface-0: #0B0F17;   /* page background (deepest)   */
  --surface-1: #0F1522;   /* raised panels / rail / header */
  --surface-2: #161D2B;   /* subtle fills / bar tracks / hover */
  --ink:   #E8EEF7;       /* primary text               */
  --ink-2: #AEB9CC;       /* secondary text             */
  --muted: #8A97AD;       /* tertiary text (AA on surface-0) */
  --line:  #1E2A3D;       /* borders (non-text)          */

  /* ---- palette: brand + interaction (one accent) ---- */
  --accent: #38BDF8;      /* links / active / primary action */
  --on-accent: #0B0F17;   /* ink on an accent fill       */
  --focus: #38BDF8;       /* focus ring                  */

  /* ---- palette: status (ship with icon/label, never colour alone) ---- */
  --good:     #34D399;
  --warning:  #F5B948;
  --serious:  #FB9A4B;
  --critical: #FB7185;
  --on-warning: #0B0F17;  /* ink on a --warning fill (demo banner) */

  /* ---- palette: categorical chart ramp (CVD-safe; assign in order) ---- */
  --chart-1: #38BDF8;     /* cyan (accent)  */
  --chart-2: #F5A34E;     /* amber          */
  --chart-3: #A78BFA;     /* violet         */
  --chart-4: #34D399;     /* teal-green     */

  /* ---- whisper dot-grid texture (page background only) ---- */
  --grid-dot: rgba(232, 238, 247, 0.03);

  /* ---- type ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .82rem; --fs-md: .95rem;
  --fs-lg: 1.1rem; --fs-xl: 1.45rem;
  --lh: 1.5;

  /* ---- spacing scale (4px base) ---- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem;
  --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;

  /* ---- shape + shell metrics ---- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.30), 0 6px 24px rgba(0,0,0,.28);
  --rail-w: 236px; --topbar-h: 52px; --ra-drawer-w: 384px;

  color-scheme: dark;
}

/* Light — explicit choice (data-theme="light"). Same design language, inverted. */
:root[data-theme="light"] {
  --surface-0: #FFFFFF; --surface-1: #F6F8FB; --surface-2: #E9EEF5;
  --ink: #0B1220; --ink-2: #3F4B60; --muted: #5B6879; --line: #DCE3EC;
  --accent: #1268C4; --on-accent: #FFFFFF; --focus: #1268C4;
  --good: #0F7A34; --warning: #8A5A00; --serious: #B4501C; --critical: #C62F39;
  --on-warning: #FFFFFF;
  --chart-1: #1268C4; --chart-2: #C2410C; --chart-3: #7C3AED; --chart-4: #0F766E;
  --grid-dot: rgba(11, 18, 32, 0.03);
  --shadow: 0 1px 2px rgba(16,20,30,.06), 0 2px 8px rgba(16,20,30,.05);
  color-scheme: light;
}

/* Light — system preference, unless an explicit dark choice overrides it. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --surface-0: #FFFFFF; --surface-1: #F6F8FB; --surface-2: #E9EEF5;
    --ink: #0B1220; --ink-2: #3F4B60; --muted: #5B6879; --line: #DCE3EC;
    --accent: #1268C4; --on-accent: #FFFFFF; --focus: #1268C4;
    --good: #0F7A34; --warning: #8A5A00; --serious: #B4501C; --critical: #C62F39;
    --on-warning: #FFFFFF;
    --chart-1: #1268C4; --chart-2: #C2410C; --chart-3: #7C3AED; --chart-4: #0F766E;
    --grid-dot: rgba(11, 18, 32, 0.03);
    --shadow: 0 1px 2px rgba(16,20,30,.06), 0 2px 8px rgba(16,20,30,.05);
    color-scheme: light;
  }
}

/* ============================ 2. base + a11y ============================= */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh);
  background: var(--surface-0);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "rail main";
  min-height: 100vh;
}

/* whisper-quiet dot-grid, fixed behind everything, on the page surface only
 * (panels/cards sit on their own surfaces and cover it). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}

a { color: var(--accent); }

/* one icon box everywhere (nav, header tools, banner, brand): uniform size + alignment
 * so glyphs read as a consistent set rather than drifting by context. */
.ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; line-height: 1; flex: none; font-style: normal;
  vertical-align: -0.15em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
}
.skip-link:focus { left: 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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =============================== 3. shell =============================== */

/* ---- persistent left rail: brand + module nav + section nav ---- */
nav.rail {
  grid-area: rail;
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface-1); border-right: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  letter-spacing: -.01em; color: var(--ink); text-decoration: none;
  padding: var(--sp-1) var(--sp-2) var(--sp-4);
}
.brand img { height: 1.5rem; width: auto; }
.rail-group { display: flex; flex-direction: column; gap: 2px; }
.rail-eyebrow {
  color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .08em; padding: var(--sp-3) var(--sp-2) var(--sp-1);
}
.rail-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.rail-link .ic { width: 1.1em; text-align: center; }
.rail-link:hover { background: var(--surface-2); color: var(--ink); }
.rail-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
/* section nav nested under the active module */
.rail-sections {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 var(--sp-2) calc(var(--sp-4) + 2px);
  border-left: 1px solid var(--line); padding-left: var(--sp-2);
}
.rail-sub {
  padding: 4px var(--sp-2); border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none; font-size: var(--fs-xs);
  transition: color .12s ease, background .12s ease;
}
.rail-sub:hover { color: var(--ink); background: var(--surface-2); }
.rail-sub[aria-current="page"] { color: var(--accent); font-weight: 600; }
/* maker attribution: pinned to the foot of the rail, muted and small (both themes) */
.rail-attrib {
  margin: auto 0 0; padding: var(--sp-4) var(--sp-2) 0;
  color: var(--muted); font-size: var(--fs-xs); letter-spacing: .02em;
}

/* keep .switch as a harmless alias (legacy standalone pages) */
nav.switch { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
nav.switch a { padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink-2); font-size: var(--fs-sm); }
nav.switch a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }

/* ---- app column: sticky topbar (context/user menu) + main ---- */
.app { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
header.shell {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--topbar-h); padding: var(--sp-2) var(--sp-5);
  background: var(--surface-1); border-bottom: 1px solid var(--line);
}
.spacer { flex: 1; }
.ctx-meta {
  font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; white-space: nowrap;
}
.ctx-meta b { color: var(--ink); }
/* header controls (theme, knowledge base, audit, sign out): one uniform tool set */
.ctx-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); }
.ctx-tools form { display: inline-flex; }
.tool {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border: 1px solid transparent; background: none; color: var(--ink-2);
  border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: var(--fs-xs);
  padding: 4px var(--sp-2); line-height: 1; text-decoration: none;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.tool:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
.tool .ic { color: var(--muted); }
.tool:hover .ic { color: var(--accent); }

/* ---- demo-mode badge: a compact, always-visible chip in the top bar ----
 * Sits beside the tenant/role context instead of filling a full-width row, so it
 * stays visible without dominating the page. A muted warning tint plus a small
 * warning icon carry the cue; the full explanation rides in the title tooltip.
 * Non-dismissible: demo data must never pass for live. */
.demo-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-2); border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; cursor: default;
  color: var(--ink);
  background: color-mix(in srgb, var(--warning) 15%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line));
}
.demo-badge .ic { color: var(--warning); }

/* ---- in-page section nav: sticky anchor chips for multi-section screens ----
 * One reusable component (core.dashboard.components.sections). Sticks directly under
 * the top bar; a scrollspy marks the active chip. Chips scroll horizontally on narrow
 * viewports, and each section carries scroll-margin so an anchor jump lands its
 * heading clear of the sticky bars. Its ground matches main (--surface-0) so content
 * scrolls cleanly underneath. */
/* ---- page tabs: sibling pages of one area (links, aria-current on the active one) ---- */
nav.tabs {
  display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line);
  margin: 0 0 var(--sp-4); overflow-x: auto; scrollbar-width: thin;
}
.tab {
  display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
  padding: var(--sp-2) var(--sp-3); margin-bottom: -1px; color: var(--ink-2);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid transparent; border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count {
  min-width: 1.4em; padding: 0 6px; border-radius: 999px; text-align: center;
  background: var(--accent); color: var(--surface-0); font-size: var(--fs-xs); line-height: 1.5;
}

.section-nav {
  position: sticky; top: var(--topbar-h); z-index: 14;
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4); padding: var(--sp-2) 0;
  background: var(--surface-0); border-bottom: 1px solid var(--line);
}
.section-nav-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap; flex: none;
}
.section-nav-chips { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: thin; }
.section-chip {
  white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none;
  padding: 4px var(--sp-3); border-radius: 999px; border: 1px solid transparent;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.section-chip:hover { color: var(--ink); background: var(--surface-2); }
.section-chip[aria-current="true"] {
  color: var(--accent); font-weight: 600;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
}
.doc-section { scroll-margin-top: calc(var(--topbar-h) + 3.4rem); }
.doc-section > h2:first-child { margin-top: 0; }

.demo-note {
  border: 1px dashed var(--warning); border-radius: var(--radius-md);
  padding: var(--sp-4); background: var(--surface-1);
}

/* ---- auth (sign-in / setup / recovery): a branded card on the design system ---- */
body.auth {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "main";
  place-items: center;
  padding: var(--sp-5);
}
.auth-card {
  grid-area: main; width: min(420px, 100%);
  display: grid; gap: var(--sp-2); padding: var(--sp-6);
}
.auth-card .brand.auth-brand { padding: 0 0 var(--sp-3); font-size: var(--fs-xl); }
.auth-card h1 { margin: 0; }
.auth-form { display: grid; gap: var(--sp-4); margin: var(--sp-3) 0; }
.auth-form .cfg-field { max-width: none; margin: 0; }
.auth-form .btn { justify-content: center; padding: var(--sp-2) var(--sp-4); }
.auth-card input[type=password], .auth-card input[type=text] {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink); font: inherit;
}
.auth-attrib {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-xs); text-align: center; letter-spacing: .02em;
}
.auth-card code {
  display: block; overflow-wrap: anywhere; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-2);
}

/* ---- section sub-nav (legacy standalone pages, e.g. AppSec error page) ---- */
nav.sub {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-5);
  background: var(--surface-1); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
nav.sub a { color: var(--ink-2); text-decoration: none; }
nav.sub a:hover { color: var(--ink); }
nav.sub a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* ---- main column ---- */
main {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  max-width: 1200px; width: 100%;
}
h1 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: -.01em; margin: 0 0 var(--sp-4); text-wrap: balance; }
h2 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600;
  margin-top: var(--sp-5); letter-spacing: -.01em; }
h3 { font-family: var(--font-display); font-weight: 600; }
small { color: var(--muted); font-weight: 400; }
.hint { color: var(--ink-2); font-size: var(--fs-sm); }
.err { color: var(--critical); }

/* mono for data: numerals, scores, IDs, code (tabular so columns line up) */
.mono, code, td.num, th.num, .stat-value, .card .n, .bl-value,
.chart .tick, .cvss, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================ 4. components ============================= */

/* ---- cards + module cards (home) ---- */
.cards { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0; }
.card {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4);
  min-width: 120px;
}
.card .n { font-size: 1.7rem; font-weight: 700; }
.card .l { color: var(--ink-2); font-size: var(--fs-sm); }
a.card.mod {
  display: block; text-decoration: none; min-width: 200px; max-width: 260px;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
a.card.mod:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
a.card.mod .l { color: var(--ink); font-size: var(--fs-md); font-weight: 600; margin-top: 2px;
  font-family: var(--font-display); }
a.card.mod .s { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }
a.card.mod .n { font-size: 1.4rem; }

/* ---- "Needs attention" (home): the assistant's triage digest ---- */
.card.attention { margin: var(--sp-4) 0; padding: var(--sp-4); border-left: 3px solid var(--accent); }
.attn-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline;
  font-family: var(--font-display); font-size: var(--fs-md); }
.card.attention { display: grid; gap: var(--sp-3) var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card.attention .attn-head, .card.attention > .hint { grid-column: 1 / -1; margin: 0; }
.attn-sec { min-width: 0; }
.attn-title { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .06em; }
.attn-sec p { margin: var(--sp-1) 0; font-size: var(--fs-sm); color: var(--ink); }
.attn-sec ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); color: var(--ink-2); }
.attn-sec li { overflow-wrap: anywhere; margin: 2px 0; }
.attn-more { display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-sm); }

/* ---- stat tiles ---- */
.stat-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin: var(--sp-4) 0;
}
.stat {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4);
}
.stat-label { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 1.6rem; font-weight: 600; margin-top: 3px; color: var(--ink); letter-spacing: -.01em; }
.stat-sub { color: var(--muted); font-size: var(--fs-xs); margin-top: 3px; }

/* ---- tables (dense; sticky header; row hover) ---- */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-1) var(--sp-2); text-align: left; vertical-align: top;
}
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-1); color: var(--muted);
  font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.table-wrap table { font-size: var(--fs-sm); }
.table-wrap thead th { border-bottom: 1px solid var(--line); }

/* ---- proportion bar ---- */
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ---- buttons ---- */
.btn, button.act {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink);
  cursor: pointer; font-size: var(--fs-sm); font-weight: 500;
  transition: filter .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover, button.act:hover { border-color: var(--accent); }
.btn:disabled, button.act:disabled { opacity: .5; cursor: default; }
button.confirm { background: transparent; color: var(--critical); border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }
button.dismiss { background: transparent; color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
button.approve, .btn.approve { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
button.approve:hover, .btn.approve:hover { filter: brightness(1.08); border-color: transparent; }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-danger { background: transparent; color: var(--critical); border-color: var(--critical); }
.btn-danger:hover { background: color-mix(in srgb, var(--critical) 12%, transparent); border-color: var(--critical); }
.approvebar { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0; flex-wrap: wrap; }
.approvebar input {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink);
}
.res { color: var(--muted); font-size: var(--fs-sm); }

/* ---- severity / status chips (colour + text + border, never colour alone) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px var(--sp-2); border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.b-critical, .b-high {
  color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, var(--line));
  background: color-mix(in srgb, var(--critical) 14%, transparent);
}
.b-medium, .b-serious {
  color: var(--serious); border-color: color-mix(in srgb, var(--serious) 40%, var(--line));
  background: color-mix(in srgb, var(--serious) 14%, transparent);
}
.b-good, .b-low {
  color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line));
  background: color-mix(in srgb, var(--good) 14%, transparent);
}

/* live/running indicator — the ONLY pulsing element (disabled by reduced-motion) */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--good); vertical-align: middle;
  animation: rk-pulse 1.8s ease-in-out infinite;
}
.badge.live { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line));
  background: color-mix(in srgb, var(--good) 14%, transparent); }
.badge.live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  animation: rk-pulse 1.8s ease-in-out infinite;
}
@keyframes rk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- panels (chart / content blocks) ---- */
.panel {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-4);
}
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.panel-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; }
.charts-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---- chart primitives (text always from tokens for both themes) ---- */
.chart { color: var(--ink); }
.chart text, .chart .axis, .chart .tick { fill: var(--ink-2); font-size: var(--fs-xs); }
.chart .grid line { stroke: var(--line); }
.chart-card { margin: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card svg.chart { width: 100%; height: auto; display: block; }
.chart-sub { margin: 0 0 var(--sp-2); }
.chart .axis-line { stroke: var(--line); }
.chart .fill, .bar-list .fill { fill: var(--chart-1); background: var(--chart-1); }
.chart .hit { fill: transparent; }
.mark { outline: none; cursor: default; }
.mark:hover .fill, .mark:focus .fill { filter: brightness(1.18); }
.mark:focus-visible .hit { stroke: var(--focus); stroke-width: 2; }
.bar-list { display: grid; gap: 2px; }
.bl-row {
  display: grid; grid-template-columns: minmax(120px, 45%) 1fr auto; align-items: center;
  gap: var(--sp-2); padding: 3px var(--sp-1); border-radius: var(--radius-sm);
  transition: background .1s ease;
}
.bl-row:hover, .bl-row:focus-visible { background: var(--surface-2); }
.bl-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.bl-label { font-size: var(--fs-sm); color: var(--ink); overflow-wrap: break-word; min-width: 0; }
.bl-track { height: 14px; }
.bl-fill { display: block; height: 14px; min-width: 2px; border-radius: 0 4px 4px 0; }
.bl-value { font-size: var(--fs-sm); color: var(--ink-2); }
.table-view { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.table-view summary { cursor: pointer; color: var(--accent); }
.chart-empty { margin: var(--sp-4) 0; }
.chart-tip {
  position: absolute; z-index: 50; pointer-events: none;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs);
  display: flex; flex-direction: column;
}
.chart-tip strong { font-size: var(--fs-sm); font-family: var(--font-mono); }
.chart-tip span { color: var(--ink-2); }
@media (forced-colors: active) {
  .chart .fill, .bar-list .fill { fill: CanvasText; background: CanvasText; }
}
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2); }
.legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* ---- forms (Config screens) ---- */
.cfg-form { display: grid; gap: var(--sp-4); }
.cfg-form > button { justify-self: start; padding: var(--sp-2) var(--sp-4); }
.cfg-group { margin: 0 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cfg-group legend { font-family: var(--font-display); font-weight: 600; padding: 0 var(--sp-1); }
.cfg-field { display: grid; gap: 4px; margin: var(--sp-3) 0; max-width: 520px; }
.cfg-field label { font-weight: 600; font-size: var(--fs-sm); }
.cfg-field [aria-invalid=true] { border-color: var(--critical); }
.cfg-help { color: var(--muted); font-size: var(--fs-xs); }

/* ---- form components (core.dashboard.forms): every module's fields, one look ----
   Controls take the theme tokens, so light and dark follow automatically; the select
   chevron is drawn with gradients in --ink-2 (no image), the checkbox box is drawn over a
   real, focusable input. Config screens and Detect filter rows share the same control. */
.ui-form { display: grid; gap: var(--sp-3); }
.ui-form > .actions, .ui-form > button { justify-self: start; }
.field { display: grid; gap: 4px; margin: var(--sp-2) 0; max-width: 560px; min-width: 0; }
.field-label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.field-help { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.field-error { color: var(--critical); }
.field-inline { margin: 0; }
.field-inline .field-label { font-weight: 500; font-size: var(--fs-xs); color: var(--muted); }
.ui-control, .cfg-field input[type=text], .cfg-field input[type=number], .cfg-field select,
.cfg-field textarea, .filters select, .filters input {
  width: 100%; min-height: 36px; padding: 6px 10px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--surface-0); color: var(--ink); font: inherit; font-size: var(--fs-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ui-control:hover, .cfg-field select:hover, .filters select:hover,
.cfg-field input:hover, .filters input:hover { border-color: var(--muted); }
.ui-control:focus-visible, .cfg-field select:focus-visible, .filters select:focus-visible,
.cfg-field input:focus-visible, .filters input:focus-visible, .cfg-field textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent);
}
.ui-control:disabled { opacity: .55; cursor: not-allowed; }
.ui-control[aria-invalid=true] { border-color: var(--critical); }
select.ui-control, .cfg-field select:not([multiple]), .filters select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
select.ui-control option, .cfg-field select option, .filters select option {
  background: var(--surface-1); color: var(--ink);
}
textarea.ui-control { min-height: 88px; resize: vertical; line-height: var(--lh); }
.ui-file { padding: 5px 8px; }
.ui-file::file-selector-button {
  margin-right: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); font: inherit; padding: 3px 10px; cursor: pointer;
}
.ui-check { position: relative; display: inline-flex; align-items: flex-start; gap: var(--sp-2);
  cursor: pointer; font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; }
.ui-check-input { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; margin: 0;
  opacity: 0; cursor: inherit; }
.ui-check-box { flex: none; width: 18px; height: 18px; box-sizing: border-box; margin-top: 1px;
  display: inline-grid; place-items: center; border: 1.5px solid var(--muted);
  border-radius: 4px; background: var(--surface-0);
  transition: background .12s ease, border-color .12s ease; }
.ui-check:hover .ui-check-box { border-color: var(--accent); }
.ui-check-input:checked + .ui-check-box { background: var(--accent); border-color: var(--accent); }
.ui-check-input:checked + .ui-check-box::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ui-check-input:focus-visible + .ui-check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.ui-check.is-disabled { cursor: not-allowed; color: var(--muted); }
.ui-check.is-disabled .ui-check-box { opacity: .5; }
.ui-check-text { display: grid; gap: 2px; }
.cfg-field input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.ui-fieldset { border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); min-width: 0; background: var(--surface-1); }
.ui-fieldset > legend { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  padding: 0 var(--sp-1); color: var(--ink); }
.ui-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.ui-row > .field { margin: 0; flex: 1 1 200px; }
@media (forced-colors: active) {
  .ui-check-box { forced-color-adjust: none; border-color: CanvasText; }
  .ui-check-input:checked + .ui-check-box { background: Highlight; border-color: Highlight; }
}

.sr-label .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.check-grid { display: grid; gap: var(--sp-2) var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.narrow-form { max-width: 640px; }
.filters .ui-check { display: inline-flex; align-self: end; margin-bottom: 9px; color: var(--ink); font-size: var(--fs-sm); }
.filters .field-inline { flex: 1 1 150px; max-width: 240px; }
.actions .field-inline { margin: 0; min-width: 160px; }

/* the assessment checklist (Intelligence entity page) */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.checklist > li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.checklist > li:first-child { border-top: 0; }
.checklist .check-state { font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.check-group-note { margin: 0 0 var(--sp-2); }
.assessment-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0 0; }
.profile-grid th, .profile-grid td { text-align: center; }
.profile-grid th:first-child, .profile-grid td:first-child { text-align: left; }
.profile-grid tbody th { min-width: 210px; font-weight: 600; }
.profile-grid .badge { white-space: nowrap; }
.profile-grid thead th { min-width: 120px; vertical-align: bottom; }
.profile-grid .ui-check { justify-content: center; }
.notice {
  background: var(--surface-1); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
}
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; margin: var(--sp-3) 0; }
.filters label { display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--muted); }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; }
dl.kv dt { color: var(--muted); font-size: var(--fs-sm); }
dl.kv dd { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.two-col { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
pre.block {
  white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); color: var(--ink);
  padding: var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-xs); max-height: 420px; overflow: auto;
  border: 1px solid var(--line);
}
code { font-size: var(--fs-xs); }
footer.appfoot { margin-top: var(--sp-6); color: var(--muted); font-size: var(--fs-xs); }

/* ---- explainability "why" panel (per-decision) ---- */
.why-panel { margin: var(--sp-4) 0; }
.why-panel h3 { font-family: var(--font-display); font-size: var(--fs-sm); margin: var(--sp-3) 0 var(--sp-2); color: var(--ink-2); }
.why-comps { display: grid; gap: var(--sp-2); }
.why-row { display: grid; grid-template-columns: minmax(140px, 30%) 1fr auto; gap: var(--sp-3); align-items: center; }
.why-k { font-size: var(--fs-sm); color: var(--ink); }
.why-k small { color: var(--muted); }
.why-v { font-size: var(--fs-sm); color: var(--ink-2); }
.why-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: var(--sp-2); }
.why-list li { font-size: var(--fs-sm); color: var(--ink-2); }
.why-list b { color: var(--ink); }
.why-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- entity link-analysis network view (inline SVG) ---- */
.egraph { width: 100%; height: auto; display: block; max-width: 640px; margin-inline: auto; }
.egraph .edge { stroke: var(--line); stroke-width: 2; }
.egraph .node { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.egraph .node.focus { fill: var(--accent); stroke: var(--accent); }
.egraph .node.flag { stroke: var(--critical); stroke-width: 2.5; }
.egraph text { fill: var(--ink-2); font-size: 11px; font-family: var(--font-mono); }
.egraph .edge.link { stroke: var(--serious); stroke-width: 2.5; }
.egraph .edge-label { font-size: 10px; fill: var(--ink); paint-order: stroke;
  stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round; }

/* ---- responsive: collapse the rail to a top strip at narrow widths (JS-free) ---- */
@media (max-width: 860px) {
  header.shell { flex-wrap: wrap; row-gap: var(--sp-1); padding-inline: var(--sp-4); }
  .ctx-meta { white-space: normal; }
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "main";
  }
  nav.rail {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: var(--sp-1);
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .brand { padding: var(--sp-1) var(--sp-2); }
  .rail-group { flex-direction: row; flex-wrap: wrap; }
  .rail-eyebrow { display: none; }
  .rail-sections { flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; margin: 0; }
  header.shell { padding: var(--sp-2) var(--sp-4); }
  main { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
}

/* ============================================================================
 * Rokkit assistant — the chat panel injected into the shell chrome (core.assistant).
 * Colours come only from tokens, so it follows both themes and any white-label
 * override. The launcher is fixed bottom-right and clears the phone safe area.
 * ========================================================================== */
#rokkit-assistant { position: fixed; right: var(--sp-4); z-index: 60;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
.ra-launch {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border: 1px solid transparent;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow);
  transition: filter .12s ease;
}
.ra-launch:hover { filter: brightness(1.08); }
/* Open panel is a docked right-side drawer: full height, its own surface, and it
 * reflows page content (see body[data-ra-open] .app) instead of overlapping it. */
.ra-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(var(--ra-drawer-w), 100vw);
  display: flex; flex-direction: column;
  background: var(--surface-1); color: var(--ink);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow); overflow: hidden; z-index: 40;
}
/* .ra-panel sets display:flex, which would beat the UA [hidden] rule; this restores
 * hide-on-close so the × button (and Esc) actually dismiss the drawer. */
.ra-panel[hidden] { display: none; }
/* only one of { floating launcher, open drawer } shows at a time */
body[data-ra-open] .ra-launch { display: none; }
/* Reflow the whole app column (header + demo banner + main together) so the drawer
 * never overlaps content on wide screens. The banner lives inside .app, so this single
 * offset moves all three as one — it must NOT get an extra offset of its own, or it gets
 * compressed into a sliver. */
@media (min-width: 861px) {
  body[data-ra-open] .app { padding-right: var(--ra-drawer-w); }
}
.ra-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.ra-head b { font-family: var(--font-display); font-size: var(--fs-md); }
.ra-scope { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.ra-close {
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: var(--fs-md); line-height: 1; padding: var(--sp-1);
}
.ra-close:hover { color: var(--ink); }
.ra-log {
  flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.ra-msg { font-size: var(--fs-sm); line-height: 1.5; max-width: 92%; }
.ra-msg.ra-user {
  align-self: flex-end; background: var(--accent); color: var(--on-accent);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md) var(--radius-md) 2px var(--radius-md);
}
.ra-msg.ra-bot {
  align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 2px;
}
.ra-msg.ra-thinking { color: var(--muted); font-style: italic; animation: rk-pulse 1.4s ease-in-out infinite; }
.ra-msg.ra-err { color: var(--critical); }
.ra-cites { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.ra-cite {
  font-size: var(--fs-xs); color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px var(--sp-2);
}
.ra-flag {
  margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--warning);
}
.ra-mode { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
/* in-answer record links + quick actions (in-app paths only, allowlisted server-side) */
.ra-answer a.ra-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ra-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.ra-action { display: inline-flex; align-items: center; padding: 2px var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 999px;
  font-size: var(--fs-xs); color: var(--accent); text-decoration: none; }
.ra-action:hover, .ra-action:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* comparison table (every cell from the records); scrolls sideways inside the panel */
.ra-table-wrap { overflow-x: auto; margin-top: var(--sp-2); max-width: 100%; }
.ra-table { border-collapse: collapse; font-size: var(--fs-xs); table-layout: fixed; width: 100%;
  min-width: calc(var(--cols, 3) * 92px); }
.ra-table col.ra-fcol { width: 35%; }
.ra-table tbody th { overflow-wrap: normal; word-break: normal; hyphens: auto; }
.ra-table th, .ra-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: left;
  vertical-align: top; overflow-wrap: anywhere; }
.ra-table thead th { background: var(--surface-2, var(--surface-1)); font-weight: 600;
  text-transform: none; letter-spacing: 0; white-space: normal; }
.ra-table th, .ra-table td { white-space: normal; }
.ra-table tbody th { color: var(--muted); font-weight: 500; }
.ra-rn { color: var(--muted); font-weight: 400; }
/* suggested follow-up chips */
.ra-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.ra-chip { font: inherit; font-size: var(--fs-xs); padding: 3px var(--sp-2); cursor: pointer;
  border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); }
.ra-chip:hover, .ra-chip:focus-visible { border-color: var(--accent); color: var(--ink); }
/* case-note draft: editable, saved only by the analyst */
.ra-draft { margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface-1); }
.ra-draft-label { display: block; font-size: var(--fs-xs); color: var(--muted); }
.ra-draft-body { display: block; width: 100%; margin-top: var(--sp-1); font: inherit;
  font-size: var(--fs-sm); color: var(--ink); background: var(--bg, transparent);
  border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); padding: var(--sp-1);
  resize: vertical; box-sizing: border-box; }
.ra-draft-bar { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center;
  margin-top: var(--sp-1); }
.ra-draft-status { font-size: var(--fs-xs); color: var(--ink-2); }
.ra-streaming { white-space: pre-wrap; }
/* keyboard shortcut hint in the panel header */
.ra-kbd { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.ra-kbd kbd { font-family: var(--font-mono); font-size: .95em; padding: 0 4px;
  border: 1px solid var(--line); border-radius: 3px; }
.ra-linkbtn { font: inherit; background: none; border: 0; padding: 0; color: var(--accent);
  cursor: pointer; text-decoration: underline; }
/* notes on case and entity pages */
ul.notes { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
ul.notes li { border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); background: var(--surface-1); }
.note-meta { color: var(--muted); font-size: var(--fs-xs); }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: var(--sp-1); }
.note-form { display: grid; gap: var(--sp-1); max-width: 720px; }
.note-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
.note-form .btn { justify-self: start; }
a.ra-cite { text-decoration: none; color: inherit; }
a.ra-cite:hover { border-color: var(--accent); }
.ra-fb { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.ra-fb-q { font-size: var(--fs-xs); color: var(--muted); }
.ra-fb-btn {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px;
  cursor: pointer; font-size: var(--fs-xs); line-height: 1; padding: 2px var(--sp-2);
}
.ra-fb-btn:disabled { opacity: .5; cursor: default; }
.ra-form {
  display: flex; gap: var(--sp-2); align-items: flex-end;
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface-1);
}
.ra-form textarea {
  flex: 1; resize: none; font: inherit; font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface-0); color: var(--ink);
  max-height: 140px;
}
.ra-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ra-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 480px) {
  .ra-panel { width: 100vw; }
  #rokkit-assistant { right: var(--sp-3); }
}