/* ==========================================================================
   CricVerse Ask — "night session"
   A scorebook rendered as an instrument: hairline rules, tabular figures,
   a pitch-green accent, and data marks in the product's validated blue ramp.
   ========================================================================== */

/* ------------------------------------------------------------ tokens ---- */
:root {
  /* light: paper under daylight, neutrals biased green-grey (chosen, not inherited) */
  --ground:      #f3f5f2;
  --surface:     #ffffff;
  --surface-2:   #ecefe9;
  --surface-3:   #e2e6dd;
  --ink:         #15181a;
  --ink-2:       #5b625e;
  --ink-3:       #868d88;
  --line:        #dde1d9;
  --line-2:      #cad0c4;

  --accent:      #0e6e5c;
  --accent-ink:  #ffffff;
  --accent-soft: #dcece7;
  --accent-line: #a9cdc2;

  /* data marks — the validated ramp from cricverse.web.theme, never the accent */
  --d1:#2a78d6; --d2:#eb6834; --d3:#1baf7a; --d4:#eda100;
  --d5:#e87ba4; --d6:#008300; --d7:#4a3aa7; --d8:#e34948;

  --good:#1baf7a; --warn:#c98500; --bad:#d14343;

  --shadow-1: 0 1px 2px rgba(20,26,22,.06), 0 4px 14px -6px rgba(20,26,22,.10);
  --shadow-2: 0 18px 50px -22px rgba(14,32,26,.42), 0 2px 8px rgba(14,32,26,.07);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rail-w: 268px;
  --col: 47rem;               /* ~72ch of body copy */
  --r-sm: 7px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px;
  --ease: cubic-bezier(.22,.68,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0e1210;
    --surface:     #151b18;
    --surface-2:   #1c2320;
    --surface-3:   #242c28;
    --ink:         #e9eee9;
    --ink-2:       #9aa39d;
    --ink-3:       #737c77;
    --line:        #262e2a;
    --line-2:      #333d38;

    --accent:      #3ab897;
    --accent-ink:  #06231c;
    --accent-soft: #16302a;
    --accent-line: #2b5d51;

    --d1:#3987e5; --d2:#d95926; --d3:#199e70; --d4:#c98500;
    --d5:#d55181; --d6:#3f9e3f; --d7:#9085e9; --d8:#e66767;

    --good:#3ab897; --warn:#d9a52b; --bad:#e66767;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.55);
    --shadow-2: 0 22px 60px -24px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
  --ground:      #0e1210;
  --surface:     #151b18;
  --surface-2:   #1c2320;
  --surface-3:   #242c28;
  --ink:         #e9eee9;
  --ink-2:       #9aa39d;
  --ink-3:       #737c77;
  --line:        #262e2a;
  --line-2:      #333d38;

  --accent:      #3ab897;
  --accent-ink:  #06231c;
  --accent-soft: #16302a;
  --accent-line: #2b5d51;

  --d1:#3987e5; --d2:#d95926; --d3:#199e70; --d4:#c98500;
  --d5:#d55181; --d6:#3f9e3f; --d7:#9085e9; --d8:#e66767;

  --good:#3ab897; --warn:#d9a52b; --bad:#e66767;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.55);
  --shadow-2: 0 22px 60px -24px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.4);
}

/* ------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,pre { margin: 0; }
/* Components below set their own display, which would otherwise beat the UA
   rule for [hidden]. Overlays are toggled by the attribute, so it has to win. */
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
kbd {
  font: 500 10.5px/1 var(--mono); color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px;
  background: var(--surface);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* thin, recessive scrollbars — this is an instrument, not a document */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px;
  border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* --------------------------------------------------------------- app ---- */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0,1fr); height: 100dvh; }
.app[data-rail="closed"] { grid-template-columns: 0 minmax(0,1fr); }
.app[data-rail="closed"] .rail { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.only-collapsed { display: none; }
.app[data-rail="closed"] .only-collapsed { display: inline-flex; }

/* -------------------------------------------------------------- rail ---- */
.rail {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.rail-head { display: flex; align-items: center; gap: 8px; padding: 15px 12px 10px 16px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--ink); flex: 1; min-width: 0; }
/* The CommBox wordmark is two tones: the letterforms and the BOX block in the ink
   colour, and the letters knocked out of that block in whatever the logo sits on.
   Both are tokens, so one copy of the artwork is right in light and dark alike —
   which is also why the supplied light and dark files need not both be shipped. */
.mark-logo { height: 21px; width: auto; flex: none; color: var(--ink); --logo-paper: var(--surface-2); }
/* The global icon rule gives every svg child a currentColor stroke, which would
   outline each letterform. Chart marks opt out the same way in explore.css. */
.mark-logo path { stroke: none; }
.mark-logo .lg-i { fill: currentColor; }
.mark-logo .lg-p { fill: var(--logo-paper); }
.mark-sep { width: 1px; height: 17px; background: var(--line-2); flex: none; }
.mark-app { font: 400 17px/1 var(--serif); font-style: italic; color: var(--accent); }

.new-thread {
  display: flex; align-items: center; gap: 9px;
  margin: 4px 12px 14px; padding: 9px 11px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 500; text-align: left;
  box-shadow: var(--shadow-1);
  transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.new-thread svg { width: 15px; height: 15px; color: var(--accent); }
.new-thread kbd { margin-left: auto; }
.new-thread:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.new-thread:active { transform: translateY(0); }

.threads { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 1px; }
.thread-group {
  font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 8px 7px;
}
.thread {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 13.5px; text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.thread:hover { background: var(--surface-3); color: var(--ink); }
.thread[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.thread[aria-current="true"] .thread-name { font-weight: 500; }
.thread-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-x { opacity: 0; flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 5px; color: var(--ink-3); transition: opacity .15s, color .15s, background .15s; }
.thread-x svg { width: 12px; height: 12px; }
.thread:hover .thread-x { opacity: 1; }
.thread-x:hover { background: var(--surface-3); color: var(--bad); }

.rail-foot { border-top: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.rail-link {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 13.5px; width: 100%; text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.rail-link svg { width: 15px; height: 15px; }
.rail-link:hover { background: var(--surface-3); color: var(--ink); }
.rail-link kbd, .rail-count { margin-left: auto; }
.rail-count { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.db-chip {
  display: flex; align-items: center; gap: 7px; padding: 8px 9px; margin-top: 2px;
  font: 400 11.5px/1 var(--mono); color: var(--ink-3);
}
.db-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.db-chip[data-ok="1"] .dot { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent); }
.db-chip[data-ok="0"] .dot { background: var(--bad); }

/* ------------------------------------------------------------- main ----- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  position: relative; z-index: 5;
}
.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 {
  font: 500 15px/1.3 var(--sans); letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-title p { font: 400 11.5px/1.3 var(--mono); color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  width: 33px; height: 33px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-2);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.ico-moon { display: none; }
:root[data-theme="dark"] .ico-sun { display: none; }
:root[data-theme="dark"] .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun { display: none; }
  :root:not([data-theme="light"]) .ico-moon { display: block; }
}

.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  font: 500 12.5px/1 var(--mono); color: var(--ink-2); max-width: 260px;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.chip:hover { border-color: var(--accent-line); color: var(--ink); }
.chip #modelName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .caret { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); flex: none; }
.chip-dot[data-ok="1"] { background: var(--good); }

/* ------------------------------------------------------------ stream ---- */
.scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.stream { max-width: var(--col); margin: 0 auto; padding: 26px 22px 0; display: flex; flex-direction: column; gap: 28px; }
.scroll-pad { height: 30px; }

.msg { display: flex; flex-direction: column; gap: 10px; animation: rise .4s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the question — set apart as a ruled entry, not a bubble */
.msg-user { align-items: flex-end; }
.msg-user .bubble {
  max-width: 90%; padding: 11px 15px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 5px var(--r-lg);
  box-shadow: var(--shadow-1); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere;
}

.msg-ai { gap: 12px; }
.ai-head { display: flex; align-items: center; gap: 9px; }
/* The same mark, sitting on --ground rather than the rail, so its knockout
   follows suit. Tones travel inside the symbol; only the two colours come from here. */
.ai-mark { width: 19px; height: 19px; flex: none; border-radius: 3px;
  color: var(--ink); --logo-paper: var(--ground); }
.ai-name { font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.ai-status { font: 400 11px/1 var(--mono); color: var(--accent); display: flex; align-items: center; gap: 6px; }
.ai-status .pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.3s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: .3; transform: scale(.7);} 50% { opacity: 1; transform: scale(1);} }

/* ------------------------------------------------------- tool activity -- */
.tools { display: flex; flex-direction: column; gap: 7px; }
.tools-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.tools-bar-label { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tools-bar-spacer { flex: 1; }
.tools-toggle { font: 400 11.5px/1 var(--mono); color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.tools-toggle svg { width: 12px; height: 12px; transition: transform .22s var(--ease); }
.tools[data-open="1"] .tools-toggle svg { transform: rotate(180deg); }
.tools-toggle:hover { color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 9px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  font: 500 11.5px/1 var(--mono); color: var(--ink-2);
  animation: pop .34s var(--ease-out) both;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: scale(.86) translateY(4px); } to { opacity: 1; transform: none; } }
.pill:hover { border-color: var(--accent-line); color: var(--ink); }
.pill .spin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent-line);
  border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pill .tick { width: 11px; height: 11px; color: var(--accent); }
.pill .ms { color: var(--ink-3); font-size: 10.5px; }
.pill[data-state="err"] { border-color: color-mix(in srgb, var(--bad) 45%, var(--line-2)); color: var(--bad); }
.pill[data-state="run"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }

.tool-cards { display: none; flex-direction: column; gap: 9px; }
.tools[data-open="1"] .tool-cards { display: flex; animation: rise .3s var(--ease-out) both; }

.tool-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.tool-card > summary {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer; list-style: none;
  font: 500 12.5px/1 var(--mono);
}
.tool-card > summary::-webkit-details-marker { display: none; }
.tool-card > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.4px solid var(--ink-3);
  border-bottom: 1.4px solid var(--ink-3); transform: rotate(-45deg); flex: none;
  transition: transform .22s var(--ease);
}
.tool-card[open] > summary::before { transform: rotate(45deg); }
.tool-card > summary:hover { background: var(--surface-2); }
.tool-card .t-name { color: var(--ink); }
.tool-card .t-meta { margin-left: auto; color: var(--ink-3); font-size: 11px; display: flex; gap: 10px; align-items: center; }
.tool-card .t-rows { color: var(--accent); }
.tool-body { border-top: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.tool-args {
  font: 400 11.5px/1.7 var(--mono); color: var(--ink-2);
  background: var(--surface-2); border-radius: var(--r-sm); padding: 9px 11px;
  overflow-x: auto; white-space: pre;
}
.tool-scalars { display: flex; flex-wrap: wrap; gap: 7px; }
.stat {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 9px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 2px; min-width: 84px;
}
.stat b { font: 500 13.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.stat span { font: 400 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tool-error { color: var(--bad); font: 400 12.5px/1.5 var(--mono); }

/* ------------------------------------------------------------- prose ---- */
.prose { font-size: 15.5px; line-height: 1.68; overflow-wrap: break-word; }
.prose > * + * { margin-top: .85em; }
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
  text-wrap: balance; margin-top: 1.5em;
}
.prose h1 { font-size: 1.35em; } .prose h2 { font-size: 1.2em; }
.prose h3 { font-size: 1.06em; } .prose h4 { font-size: 1em; color: var(--ink-2); }
.prose h2, .prose h3 { padding-bottom: .32em; border-bottom: 1px solid var(--line); }
.prose strong { font-weight: 600; }
.prose em { font-family: var(--serif); font-style: italic; font-size: 1.06em; }
.prose ul, .prose ol { padding-left: 1.35em; display: flex; flex-direction: column; gap: .3em; }
.prose li::marker { color: var(--accent); font-size: .9em; }
.prose ol li::marker { font-family: var(--mono); font-size: .85em; }
.prose blockquote {
  border-left: 2px solid var(--accent-line); padding: .1em 0 .1em 1em; color: var(--ink-2);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }
.prose code {
  font: 500 .855em/1.5 var(--mono); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px; padding: .1em .38em;
  font-variant-numeric: tabular-nums;
}
.prose a:hover { color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }

.codeblock { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.codeblock pre { overflow-x: auto; padding: 13px 14px; font: 400 12.5px/1.65 var(--mono); }
.codeblock code { background: none; border: 0; padding: 0; font-size: 1em; }
.codeblock .lang {
  position: absolute; top: 8px; right: 44px; font: 500 10px/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.copy-btn {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 6px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line);
  opacity: 0; transition: opacity .18s var(--ease), color .18s var(--ease);
}
.codeblock:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--accent); }
.copy-btn svg { width: 14px; height: 14px; }

/* streaming caret: a batting crease tick, not a blinking block */
.caret-live::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--accent); vertical-align: -.18em; animation: blink 1.05s steps(2,end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* raw markdown tables, shown for the instant before they are upgraded */
.prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.prose table th, .prose table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.prose table th { font: 500 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

/* -------------------------------------------------------- data tables --- */
.dtable { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden;
  animation: rise .35s var(--ease-out) both; }
.dtable-head {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px 7px 12px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.dtable-title { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.dtable-count { font: 400 11px/1 var(--mono); color: var(--ink-3); }
.dtable-actions { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.dtable-search {
  width: 0; opacity: 0; padding: 0; border: 1px solid transparent; background: var(--surface);
  border-radius: 6px; font: 400 12px/1 var(--mono); height: 26px;
  transition: width .26s var(--ease), opacity .2s var(--ease), padding .26s var(--ease);
}
.dtable-search.on { width: 140px; opacity: 1; padding: 0 8px; border-color: var(--line-2); }
.tbtn {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
  color: var(--ink-3); transition: background .15s, color .15s;
}
.tbtn svg { width: 14px; height: 14px; }
.tbtn:hover { background: var(--surface-3); color: var(--ink); }
.tbtn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }

.dtable-scroll { overflow: auto; max-height: 420px; }
.dtable table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.dtable th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--line-2);
  font: 500 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 12px; cursor: pointer; user-select: none;
  transition: color .15s var(--ease);
}
.dtable th:hover { color: var(--ink); }
.dtable th .arrow { display: inline-block; width: 0; opacity: 0; margin-left: 4px; transition: opacity .18s; }
.dtable th[aria-sort] { color: var(--accent); }
.dtable th[aria-sort] .arrow { width: auto; opacity: 1; }
.dtable td {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  vertical-align: middle; white-space: nowrap; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis;
}
.dtable tbody tr { transition: background .12s var(--ease); }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td.num, .dtable th.num { text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-size: 12.5px; }
.dtable td.num { position: relative; }
/* inline magnitude bar — reads the column's own range, never a fixed scale */
.dtable[data-bars="1"] td.num .bar {
  position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--d1) 24%, transparent); transform-origin: left;
  transform: scaleX(var(--v, 0)); animation: grow .5s var(--ease-out) both;
}
@keyframes grow { from { transform: scaleX(0); } }
.dtable:not([data-bars="1"]) td.num .bar { display: none; }
.dtable tr.rank-1 td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.dtable td .nil { color: var(--ink-3); }
.dchart-note { font: 400 10.5px/1 var(--mono); color: var(--ink-3); margin-left: auto; }
.dtable-foot { padding: 7px 12px; border-top: 1px solid var(--line); font: 400 11px/1 var(--mono); color: var(--ink-3);
  display: flex; align-items: center; gap: 10px; }
.dtable-more { color: var(--accent); font: 500 11px/1 var(--mono); }

/* chart drawer */
.dchart { border-top: 1px solid var(--line); padding: 12px; display: none; background: var(--surface-2); }
.dtable[data-chart="1"] .dchart { display: block; animation: rise .3s var(--ease-out) both; }
.dchart-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.dchart-head select {
  border: 1px solid var(--line-2); background: var(--surface); border-radius: 6px;
  padding: 4px 7px; font: 400 11.5px/1 var(--mono); color: var(--ink);
}
.dchart-head label { font: 500 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.dchart svg { width: 100%; display: block; }
.dchart .track { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.dchart .barfill { fill: var(--d1); }
.dchart .barfill.hi { fill: var(--accent); }
.dchart text { font: 400 11px var(--mono); fill: var(--ink-2); }
.dchart text.val { fill: var(--ink); font-weight: 500; }
/* fill-box so each bar grows from its own left edge, not the viewBox origin */
.dchart .barfill { animation: barin .55s var(--ease-out) both;
  transform-box: fill-box; transform-origin: left center; }
@keyframes barin { from { transform: scaleX(0); } }

/* --------------------------------------------------------- msg footer --- */
.msg-foot { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.act {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px;
  border-radius: 6px; color: var(--ink-3); font: 400 11.5px/1 var(--mono);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.act svg { width: 13px; height: 13px; }
.act:hover { background: var(--surface-2); color: var(--ink); }
.usage { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.notice {
  display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px;
  border-radius: var(--r-md); font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--line); background: var(--surface);
}
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.notice.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.notice.warn svg { color: var(--warn); }
.notice.err { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.notice.err svg { color: var(--bad); }

/* ------------------------------------------------------------- hero ----- */
.hero { max-width: var(--col); margin: 0 auto; padding: 4vh 22px 0; }
.hero[hidden] { display: none; }
.hero-inner { display: flex; flex-direction: column; gap: 18px; animation: rise .5s var(--ease-out) both; }
.eyebrow { font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hero-title {
  font: 400 clamp(30px, 5.2vw, 44px)/1.08 var(--serif);
  letter-spacing: -.02em; text-wrap: balance;
}
.hero-title em { font-style: italic; color: var(--accent); }
.hero-sub { color: var(--ink-2); font-size: 15px; max-width: 46ch; }
.hero-sub b { color: var(--ink); font-family: var(--mono); font-weight: 500; }

.suggest { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.suggest-row { display: flex; align-items: flex-start; gap: 10px; }
.suggest-group {
  flex: none; width: 76px; padding-top: 7px;
  font: 500 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.suggest-items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.sug {
  text-align: left; padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; color: var(--ink-2); line-height: 1.35;
  animation: rise .45s var(--ease-out) both; animation-delay: var(--d, 0ms);
  transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.sug:hover { border-color: var(--accent-line); color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-1); }

.hero-notes { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 16px; }
.hero-notes li { display: flex; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.hero-notes span {
  flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font: 500 10.5px/1 var(--mono); margin-top: 1px;
}

/* ----------------------------------------------------------- composer --- */
.composer-wrap {
  padding: 10px 22px 14px; position: relative;
  background: linear-gradient(to top, var(--ground) 62%, color-mix(in srgb, var(--ground) 0%, transparent));
}
.composer { max-width: var(--col); margin: 0 auto; display: flex; align-items: flex-end; gap: 9px; }
.composer-field {
  flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.composer-field:focus-within { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.composer-field textarea {
  display: block; width: 100%; border: 0; background: none; resize: none;
  padding: 12px 14px 4px; font-size: 15px; line-height: 1.5; max-height: 40vh; outline: none;
}
.composer-field textarea::placeholder { color: var(--ink-3); }
.composer-tools { display: flex; align-items: center; gap: 4px; padding: 2px 8px 8px 8px; }
.mini {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px;
  border-radius: 999px; color: var(--ink-3); font: 400 11px/1 var(--mono);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mini svg { width: 12px; height: 12px; }
.mini:hover { background: var(--surface-2); color: var(--ink); }

.send {
  width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease);
}
.send svg { width: 19px; height: 19px; }
.send .ico-stop { display: none; fill: currentColor; stroke: none; }
.send:hover:not(:disabled) { transform: scale(1.05); }
.send:active:not(:disabled) { transform: scale(.96); }
.send:disabled { opacity: .38; cursor: not-allowed; }
body[data-busy="1"] .send .ico-send { display: none; }
body[data-busy="1"] .send .ico-stop { display: block; }
body[data-busy="1"] .send { background: var(--surface-3); color: var(--ink); }

.composer-note {
  max-width: var(--col); margin: 7px auto 0; text-align: center;
  font: 400 10.5px/1.4 var(--mono); color: var(--ink-3);
}

.jump {
  position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: var(--shadow-2); font: 500 11.5px/1 var(--mono); color: var(--ink-2);
  animation: rise .3s var(--ease-out) both; z-index: 4;
}
.jump svg { width: 13px; height: 13px; }
.jump:hover { color: var(--accent); border-color: var(--accent-line); }

/* ------------------------------------------------------------ sheets ---- */
.sheet-scrim { position: fixed; inset: 0; background: rgba(8,14,11,.42); backdrop-filter: blur(2px);
  z-index: 40; animation: fade .2s var(--ease) both; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 41;
  background: var(--ground); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; box-shadow: var(--shadow-2);
  animation: slide-in .3s var(--ease-out) both;
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; padding: 16px 14px 14px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; font: 500 16px/1 var(--sans); letter-spacing: -.01em; }
.sheet-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 20px; }
.sheet-intro { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.field-label b { color: var(--accent); font-weight: 500; float: right; }
.field-row { display: flex; gap: 6px; }
.field input[type="text"], .field input[type="password"] {
  flex: 1; min-width: 0; height: 36px; padding: 0 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); font: 400 13px/1 var(--mono); outline: none;
  transition: border-color .18s var(--ease);
}
.field input:focus { border-color: var(--accent-line); }
.field-help { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.ghost {
  height: 36px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface); font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.ghost:hover { border-color: var(--accent-line); color: var(--ink); }

input[type="range"] { -webkit-appearance: none; appearance: none; height: 22px; background: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--line-2); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line-2); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
  margin-top: -6px; border: 2px solid var(--ground); box-shadow: var(--shadow-1);
}
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid var(--ground);
  border-radius: 50%; background: var(--accent); }

.model-grid { display: flex; flex-direction: column; gap: 5px; margin-top: -8px; }
.model-opt {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); text-align: left; width: 100%;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.model-opt:hover { border-color: var(--accent-line); }
.model-opt[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.model-opt .m-name { font: 500 13px/1.3 var(--sans); }
.model-opt .m-id { font: 400 10.5px/1.3 var(--mono); color: var(--ink-3); display: block; margin-top: 2px; }
.model-opt .m-note { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.model-opt .m-tools { color: var(--good); }

.tool-list { display: flex; flex-direction: column; gap: 16px; }
.tool-group h3 { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px; }
.tool-row { padding: 8px 0; border-top: 1px solid var(--line); }
.tool-row code { font: 500 12px/1 var(--mono); color: var(--accent); }
.tool-row p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }

/* ---------------------------------------------------------- palette ----- */
.palette-scrim { position: fixed; inset: 0; background: rgba(8,14,11,.45); backdrop-filter: blur(3px);
  z-index: 50; display: flex; justify-content: center; padding-top: 14vh; animation: fade .16s var(--ease) both; }
.palette {
  width: min(560px, 92vw); max-height: 62vh; display: flex; flex-direction: column;
  background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); overflow: hidden; animation: pal .22s var(--ease-out) both;
}
@keyframes pal { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
.palette input {
  height: 50px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line);
  background: none; font-size: 15px; outline: none;
}
.palette-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.palette-list li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; cursor: pointer; color: var(--ink-2);
}
.palette-list li[aria-selected="true"] { background: var(--surface); color: var(--ink); }
.palette-list li .p-kind { font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-line); border-radius: 4px; padding: 3px 5px; flex: none; }
.palette-list li .p-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-list li kbd { flex: none; }

/* --------------------------------------------------------- inspector ---- */
.inspector { position: fixed; inset: 0; z-index: 45; background: rgba(8,14,11,.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; animation: fade .18s var(--ease) both; }
.inspector-panel {
  width: min(1100px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); overflow: hidden; animation: pal .24s var(--ease-out) both;
}
.inspector-head { display: flex; align-items: center; padding: 13px 12px 13px 18px; border-bottom: 1px solid var(--line); }
.inspector-head h3 { flex: 1; font: 500 13px/1 var(--mono); letter-spacing: .04em; }
.inspector-body { flex: 1; overflow: auto; padding: 16px; }
.inspector-body .dtable-scroll { max-height: none; }

/* ------------------------------------------------------------ toasts ---- */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
  font: 400 12.5px/1 var(--mono); color: var(--ink);
  animation: toast-in .28s var(--ease-out) both;
}
.toast svg { width: 14px; height: 14px; color: var(--accent); }
.toast.leaving { animation: toast-out .22s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* -------------------------------------------------------- responsive ---- */
@media (max-width: 900px) {
  /* The rail becomes a fixed overlay, so it leaves the grid entirely — one
     column only, or `main` would be placed in the rail's empty 0px track. */
  .app, .app[data-rail="closed"], .app[data-rail="open"] { grid-template-columns: minmax(0,1fr); }
  .rail { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-w); z-index: 30;
    box-shadow: var(--shadow-2); }
  .app:not([data-rail="open"]) .rail { transform: translateX(-100%); opacity: 0; pointer-events: none; }
  .app:not([data-rail="open"]) .only-collapsed { display: inline-flex; }
  .app[data-rail="open"] .only-collapsed { display: none; }
  .app[data-rail="open"] .main::before {
    content: ""; position: absolute; inset: 0; z-index: 20;
    background: rgba(8,14,11,.45); backdrop-filter: blur(2px);
    animation: fade .2s var(--ease) both;
  }
  .suggest-row { flex-direction: column; gap: 6px; }
  .suggest-group { width: auto; padding-top: 0; }
  .stream, .hero, .composer-wrap { padding-left: 14px; padding-right: 14px; }
  .msg-user .bubble { max-width: 100%; }
}

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

/* ======================================================== access gate ==== */
/* `data-gate` on <body> owns what the page shows. It starts at `checking`, so an
   ungated deployment never flashes the panel and a gated one never flashes the app
   — the state is resolved before either is painted. */
.gate {
  position: fixed; inset: 0; z-index: 80;
  display: none; place-items: center; padding: 24px;
  background: var(--ground);
}
body[data-gate="locked"] .gate { display: grid; }
body[data-gate="checking"] .app,
body[data-gate="locked"] .app { visibility: hidden; }
body[data-gate="checking"] .gate,
body[data-gate="open"] .gate { display: none; }

.gate-panel {
  width: min(400px, 100%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 30px 30px 26px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-2);
  animation: rise .42s var(--ease-out) both;
}
.gate-logo { height: 22px; width: auto; margin-bottom: 20px; --logo-paper: var(--surface); }
.gate-eyebrow {
  font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.gate-title { font: 400 25px/1.2 var(--serif); letter-spacing: -.02em; margin-top: 10px; }
.gate-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 7px; }

.gate-field { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 22px; }
.gate-field input {
  width: 100%; height: 42px; padding: 0 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--ground); color: var(--ink);
  font: 400 14px/1 var(--mono); letter-spacing: .06em; outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.gate-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.gate-error {
  font: 400 12px/1.4 var(--mono); color: var(--bad); margin-top: 9px;
}
.gate-error[hidden] { display: none; }

.gate-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 42px; margin-top: 18px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font: 500 13.5px/1 var(--sans);
  transition: transform .16s var(--ease), opacity .16s var(--ease);
}
.gate-submit svg { width: 16px; height: 16px; }
.gate-submit:hover:not(:disabled) { transform: translateY(-1px); }
.gate-submit:disabled { opacity: .55; cursor: not-allowed; }
.gate-submit[data-busy="1"] span::after {
  content: "…"; display: inline-block; width: 0; overflow: hidden;
  animation: gate-dots 1s steps(4) infinite;
}
@keyframes gate-dots { to { width: 1.2em; } }

/* A wrong password should be felt, not just read. */
.gate-panel.shake { animation: gate-shake .34s var(--ease); }
@keyframes gate-shake {
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}