/* CARES Support Assistant — design tokens.
   Base from design-system/cares-chat-assistant/MASTER.md, adapted: the
   generated style called for oversized type and vast whitespace. This is an
   operational console worked under a 30-minute SLA, so density wins over
   drama. Palette, Fira typography and the dense spacing scale are kept. */

:root {
  --primary: #1D4ED8;
  --primary-hover: #1E40AF;
  --primary-soft: #EEF3FF;
  --on-primary: #FFFFFF;
  --accent: #0D9488;
  --bg: #F5F7FB;
  --surface: #FFFFFF;
  --surface-2: #FAFBFD;
  --fg: #101827;
  --fg-muted: #5B6880;
  --fg-faint: #8A96AB;
  --muted: #EDF1F7;
  --border: #E1E8F0;
  --border-strong: #CBD6E4;
  --ok: #0F7B3E;      --ok-bg: #E7F6EC;
  --warn: #A35B00;    --warn-bg: #FEF4E2;  --warn-line: #F0A93B;
  --danger: #B3261E;  --danger-bg: #FDECEA;
  --info: #1A4FC4;    --info-bg: #E9F0FE;
  --ring: #1D4ED8;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 30px;
  --r-sm: 7px; --r: 11px; --r-lg: 15px;
  --shadow-1: 0 1px 2px rgba(16,24,39,.05);
  --shadow-2: 0 1px 3px rgba(16,24,39,.06), 0 6px 16px -6px rgba(16,24,39,.10);
  --font: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #6098FF; --primary-hover: #82AEFF; --primary-soft: #16243D;
    --on-primary: #08101E; --accent: #2DD4BF;
    --bg: #0B111C; --surface: #131C2B; --surface-2: #17212F;
    --fg: #E9EFF8; --fg-muted: #9DAAC0; --fg-faint: #75839B;
    --muted: #1C2738; --border: #26334A; --border-strong: #33435F;
    --ok: #6EE7A0; --ok-bg: #10291C; --warn: #F5C069; --warn-bg: #2A2010;
    --warn-line: #B47B21; --danger: #FCA5A0; --danger-bg: #2C1512;
    --info: #9EC0FF; --info-bg: #14213A;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3);
    --shadow-2: 0 1px 3px rgba(0,0,0,.35), 0 8px 22px -8px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 5px; }

.app { display: grid; grid-template-columns: 252px 1fr; height: 100%; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sidebar { display: none; } }

/* ------------------------------- sidebar ------------------------------- */
.sidebar { background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0; }
.brand { padding: var(--s4); display: flex; gap: var(--s3); align-items: center; }
.mark { width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.brand h1 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.brand p { margin: 1px 0 0; font-size: 11px; color: var(--fg-faint); }

.nav { padding: 0 var(--s2) var(--s2); display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 9px var(--s3); background: none; border: 0;
  border-radius: var(--r-sm); color: var(--fg-muted); font-size: 13.5px;
  transition: background .15s ease, color .15s ease; }
.nav button:hover { background: var(--muted); color: var(--fg); }
.nav button[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav svg { width: 17px; height: 17px; flex: none; }

.side-block { padding: var(--s3) var(--s2); border-top: 1px solid var(--border); }
.btn-new { display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; border: 1px dashed var(--border-strong); background: none;
  border-radius: var(--r-sm); padding: 9px; color: var(--fg-muted); font-size: 13px;
  min-height: 38px; transition: all .15s ease; }
.btn-new:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.sidebar-foot { margin-top: auto; padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border); font-size: 11px; color: var(--fg-faint); }
.sidebar-foot .row { display: flex; justify-content: space-between; gap: var(--s2); padding: 2px 0; }
.sidebar-foot b { color: var(--fg-muted); font-weight: 600; font-family: var(--mono); }

/* --------------------------------- main -------------------------------- */
.main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s5); background: var(--surface);
  border-bottom: 1px solid var(--border); }
.topbar h2 { margin: 0; font-size: 14.5px; font-weight: 650; }
.topbar .sub { font-size: 11.5px; color: var(--fg-faint); margin-top: 1px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  padding: 4px 10px; border-radius: 999px; background: var(--muted);
  color: var(--fg-muted); font-weight: 550; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; }

.scroll { flex: 1; overflow-y: auto; min-height: 0; }
.wrap { max-width: 900px; margin: 0 auto; padding: var(--s5); }
.wrap.wide { max-width: 1180px; }

/* --------------------------------- chat -------------------------------- */
.notice { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: var(--r); padding: 11px var(--s3);
  font-size: 12.5px; margin-bottom: var(--s4); color: var(--fg); }
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--warn); }

.turn { margin-bottom: var(--s5); }
.q { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); }
.q .avatar { width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--primary); color: var(--on-primary); display: grid;
  place-items: center; font-size: 10.5px; font-weight: 700; }
.q p { margin: 0; font-weight: 550; font-size: 15px; padding-top: 3px; }

.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--shadow-2); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; margin-bottom: var(--s3); }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.answered { background: var(--ok-bg); color: var(--ok); }
.badge.abstained { background: var(--warn-bg); color: var(--warn); }
.badge.prohibited, .badge.blocked { background: var(--danger-bg); color: var(--danger); }
.badge.handoff, .badge.clarify { background: var(--info-bg); color: var(--info); }
.badge.greeting { background: var(--muted); color: var(--fg-muted); }

.lead { margin: 0 0 var(--s3); font-size: 15.5px; line-height: 1.62; white-space: pre-wrap; }
.sec { margin-top: var(--s4); }
.sec h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--fg-faint); margin: 0 0 var(--s2); font-weight: 700; }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 7px 0 7px 32px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 6px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft);
  color: var(--primary); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; font-family: var(--mono); }
.steps li + li { border-top: 1px solid var(--border); }
.pre { margin: 0; padding-left: 18px; }
.pre li { margin-bottom: 5px; }

.warn { background: var(--warn-bg); border-left: 3px solid var(--warn-line);
  padding: 9px var(--s3); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 6px; font-size: 13px; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s3); }
.shot button { padding: 0; border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; background: var(--surface-2); display: block; width: 100%;
  transition: border-color .15s ease, transform .15s ease; }
.shot button:hover { border-color: var(--primary); transform: translateY(-1px); }
.shot img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; object-position: top left; }
.shot figcaption { font-size: 10.5px; color: var(--fg-faint); margin-top: 5px; line-height: 1.4; }

/* A screenshot that failed to load. It used to leave the browser's broken
   image glyph, which reads as a rendering bug rather than as evidence the
   answer promised and could not show. */
.shot-missing img { display: none; }
.shot-missing button::after { content: "Screenshot unavailable"; display: block;
  padding: 22px 10px; font-size: 11px; color: var(--fg-faint); text-align: center;
  background: var(--surface-2); }

.cites { list-style: none; margin: 0; padding: 0; }
.cites li { font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--border);
  display: flex; gap: 10px; }
.cites li:last-child { border: 0; }
.cites .n { color: var(--fg-faint); font-family: var(--mono); flex: none; }

.foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--fg-faint); }
.foot .mono { font-family: var(--mono); }
.fb { display: flex; gap: 6px; margin-left: auto; }
.fb button { border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; display: inline-flex;
  align-items: center; gap: 6px; transition: all .15s ease; min-height: 32px; }
.fb button:hover { border-color: var(--primary); color: var(--primary); }
.fb button.on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.fb button.no.on { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.composer { border-top: 1px solid var(--border); background: var(--surface); padding: var(--s3) var(--s5) var(--s4); }
.composer-inner { max-width: 900px; margin: 0 auto; display: flex; gap: var(--s2); align-items: flex-end; }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--border-strong);
  border-radius: var(--r); padding: 11px var(--s3); font: inherit; background: var(--surface-2);
  color: var(--fg); max-height: 170px; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease; }
.composer textarea:focus { border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.send { background: var(--primary); color: var(--on-primary); border: 0; border-radius: var(--r);
  padding: 0 var(--s4); height: 44px; min-width: 46px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; transition: background .15s ease; }
.send:hover:not(:disabled) { background: var(--primary-hover); }
.send:disabled { opacity: .45; cursor: not-allowed; }
.hint { max-width: 900px; margin: var(--s2) auto 0; font-size: 11px; color: var(--fg-faint); }

.suggest { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.suggest button { border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  border-radius: var(--r); padding: 9px var(--s3); font-size: 13px; min-height: 36px;
  transition: all .15s ease; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.suggest button:hover { border-color: var(--primary); background: var(--primary-soft); }
.suggest button strong { font-weight: 600; }
.opt-blurb { font-size: 11.5px; color: var(--fg-faint); }

.empty { text-align: center; padding: var(--s6) var(--s4); }
.empty .mark { width: 44px; height: 44px; border-radius: 13px; margin: 0 auto var(--s3); font-size: 16px; }
.empty h3 { margin: 0 0 6px; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.empty p { margin: 0 auto; color: var(--fg-muted); max-width: 470px; }

.dots { display: inline-flex; gap: 4px; align-items: center; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  animation: b 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes b { 0%,80%,100% { opacity:.25; transform: translateY(0);} 40% { opacity:1; transform: translateY(-3px);} }

/* -------------------------------- admin -------------------------------- */
.sec-head { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s6) 0 var(--s3); }
.sec-head:first-child { margin-top: 0; }
.sec-head h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.sec-head p { margin: 0; font-size: 12px; color: var(--fg-faint); }

.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s4); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.tile::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--primary); opacity: .8; }
.tile.ok::after { background: var(--ok); }
.tile.warn::after { background: var(--warn-line); }
.tile.danger::after { background: var(--danger); }
.tile .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--fg-faint); font-weight: 700; }
.tile .v { font-size: 27px; font-weight: 650; font-family: var(--mono);
  letter-spacing: -.03em; margin-top: 5px; line-height: 1.1; }
.tile .d { font-size: 11.5px; color: var(--fg-muted); margin-top: 3px; }
.tile .act { margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--primary); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s4); box-shadow: var(--shadow-1); }
.panel + .panel { margin-top: var(--s3); }
.panel h4 { margin: 0 0 var(--s3); font-size: 12.5px; font-weight: 650;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.panel h4 .count { font-size: 11px; color: var(--fg-faint); font-family: var(--mono); font-weight: 500; }
.cols2 { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .cols2 { grid-template-columns: 1fr; } }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-faint); padding: 6px 8px; border-bottom: 1px solid var(--border); font-weight: 700; }
td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.trunc { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag { font-size: 10px; padding: 3px 8px; border-radius: 999px; background: var(--muted);
  color: var(--fg-muted); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.tag.answered { background: var(--ok-bg); color: var(--ok); }
.tag.abstained { background: var(--warn-bg); color: var(--warn); }
.tag.prohibited, .tag.blocked { background: var(--danger-bg); color: var(--danger); }
.tag.clarify, .tag.handoff { background: var(--info-bg); color: var(--info); }

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { display: grid; grid-template-columns: 116px 1fr 54px; gap: 10px; align-items: center; font-size: 12px; }
.bar .track { background: var(--muted); border-radius: 999px; height: 7px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width .4s ease; }
.bar .fill.ok { background: var(--ok); } .bar .fill.warn { background: var(--warn-line); }
.bar .fill.danger { background: var(--danger); } .bar .fill.info { background: var(--info); }
.bar .n { text-align: right; font-family: var(--mono); color: var(--fg-muted); font-size: 11.5px; }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 72px; }
.spark div { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 3px;
  opacity: .75; transition: opacity .15s ease; }
.spark div:hover { opacity: 1; }
.spark-x { display: flex; justify-content: space-between; font-size: 10px;
  color: var(--fg-faint); margin-top: 6px; font-family: var(--mono); }

.empty-note { color: var(--fg-faint); font-size: 12.5px; margin: 0; padding: var(--s3) 0; }

.lightbox { position: fixed; inset: 0; background: rgba(8,14,26,.88); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: var(--s5); }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r); }
.lightbox .close { position: absolute; top: var(--s4); right: var(--s4); background: var(--surface);
  color: var(--fg); border: 0; border-radius: var(--r-sm); padding: 10px 14px; min-height: 44px; }

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

/* Field lists and expected-state lines belonging to a step. */
.step-details { margin: 6px 0 0; padding-left: 16px; list-style: none; }
.step-details li { position: relative; padding: 2px 0 2px 12px; font-size: 13px;
  color: var(--fg-muted); border: 0; }
.step-details li::before { content: ""; position: absolute; left: 0; top: 11px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }

/* corpus actions */
.actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--fg); border-radius: var(--r-sm);
  padding: 9px var(--s3); font-size: 13px; min-height: 38px; transition: all .15s ease; }
.btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); color: var(--on-primary); }
.btn svg { width: 15px; height: 15px; }
.hint-inline { font-size: 11.5px; color: var(--fg-faint); margin-left: auto; }

/* retrieval inspector + danger zone */
.input { border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 9px var(--s3); font: inherit; font-size: 13px; background: var(--surface-2);
  color: var(--fg); min-height: 38px; transition: border-color .15s ease, box-shadow .15s ease; }
.input:focus { border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* Visually distinct from every other panel: nothing here should be reachable
   by muscle memory built on the rest of the console. */
.panel.danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger-bg) 45%, var(--surface)); }
.panel.danger h4 { color: var(--danger); }
.danger-op { border-top: 1px solid var(--border); padding-top: var(--s3); margin-top: var(--s3); }
.danger-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.danger-head strong { font-size: 13px; }
.confirm { margin-top: var(--s3); padding: var(--s3); border: 1px dashed var(--danger);
  border-radius: var(--r-sm); background: var(--surface); display: flex;
  flex-direction: column; gap: var(--s2); align-items: flex-start; }
.confirm p { margin: 0; font-size: 12.5px; color: var(--fg-muted); }
.confirm code { font-family: var(--mono); font-size: 12px; background: var(--danger-bg);
  color: var(--danger); padding: 2px 6px; border-radius: 4px; }
.confirm .input { min-width: 260px; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.btn.danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger);
  color: #fff; filter: brightness(1.08); }


/* ==========================================================================
   COMPONENTS
   --------------------------------------------------------------------------
   Everything below used to be inline styles scattered through app.js, or
   nothing at all. `button { font: inherit; cursor: pointer; }` was the whole
   button rule, so every bare <button> fell back to the browser's default
   chrome - which is why they came out different sizes on every screen and
   oversized on most.

   One control size, 32px, matching the inputs beside them. Buttons are sized
   by their content and never stretch: a full-width button reads as a banner,
   which is how "New conversation" ended up looking like a hero element in a
   252px sidebar.
   ========================================================================== */

/* ------------------------------------------------------------- buttons -- */
.btn,
.panel button,
.toolbar button,
.form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; width: auto;
  font: 500 13px/1 var(--font); white-space: nowrap;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.btn:hover,
.panel button:hover,
.toolbar button:hover,
.form button:hover { background: var(--muted); border-color: var(--fg-faint); }

.btn:disabled,
.panel button:disabled,
.toolbar button:disabled,
.form button:disabled { opacity: .5; cursor: not-allowed; background: var(--surface); }

.btn svg, .panel button svg, .toolbar button svg { width: 15px; height: 15px; flex: none; }

.btn-primary, .panel button.btn-primary {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary);
}
.btn-primary:hover, .panel button.btn-primary:hover {
  background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary);
}
.btn-danger, .panel button.btn-danger {
  background: var(--surface); border-color: var(--danger); color: var(--danger);
}
.btn-danger:hover, .panel button.btn-danger:hover { background: var(--danger-bg); }

.btn-ghost, .panel button.btn-ghost {
  background: transparent; border-color: transparent; color: var(--fg-muted);
}
.btn-ghost:hover, .panel button.btn-ghost:hover { background: var(--muted); color: var(--fg); }

/* Table row actions and other tight spots. Still a real target: 26px with a
   28px hit area, not a link pretending to be a button. */
.btn-sm, .panel button.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }

/* A group of related actions. */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.toolbar-spacer { flex: 1 1 auto; }

/* ------------------------------------------------------- form controls -- */
.panel input[type="text"], .panel input:not([type]), .panel input[type="email"],
.panel input[type="password"], .panel input[type="search"],
.panel textarea, .panel select,
.form input, .form textarea, .form select {
  width: 100%; font: 13px/1.5 var(--font); color: var(--fg);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 7px 10px;
  transition: border-color .12s, box-shadow .12s;
}
.panel input:not([type="checkbox"]):not([type="radio"]), .form input:not([type="checkbox"]) { height: 32px; }
.panel select, .form select { height: 32px; padding-right: 28px; }
.panel textarea, .form textarea { min-height: 76px; resize: vertical; line-height: 1.55; }

.panel input:focus, .panel textarea:focus, .panel select:focus,
.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.panel input::placeholder, .panel textarea::placeholder { color: var(--fg-faint); }
.panel input[aria-invalid="true"], .panel textarea[aria-invalid="true"] { border-color: var(--danger); }

/* A labelled field. The label is the accessible name AND the visible one -
   placeholder-as-label disappears the moment someone starts typing, which is
   exactly when they need to know what the box is for. */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.field .hint { font-size: 11.5px; color: var(--fg-faint); line-height: 1.45; }
.field .hint code { font-family: var(--mono); font-size: 11px; }

.form { display: grid; gap: var(--s4); max-width: 680px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: var(--s2); align-items: center; padding-top: 2px; }

/* --------------------------------------------------------- panel shell -- */
.panel h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.panel > p.muted:first-of-type { margin-top: 0; }
.panel-head { display: flex; align-items: flex-start; gap: var(--s3);
  justify-content: space-between; margin-bottom: var(--s3); }
.panel-head .muted { margin: 4px 0 0; max-width: 68ch; }

.section-title { font-size: 12.5px; font-weight: 650; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .04em; margin: var(--s5) 0 var(--s2); }
.section-title:first-child { margin-top: 0; }

/* ------------------------------------------------------------- tables --- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-faint); padding: 0 10px 7px;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table td .muted { font-size: 11.5px; line-height: 1.45; }
.table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table .right { text-align: right; }
.table .actions { text-align: right; white-space: nowrap; }

/* --------------------------------------------------------- stat strip --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3); margin-bottom: var(--s4); }
.stat { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s3); }
.stat b { display: block; font-size: 21px; font-weight: 650; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 11.5px; color: var(--fg-muted); margin-top: 3px; }
.stat.warn b { color: var(--warn); }
.stat.danger b { color: var(--danger); }

/* -------------------------------------------------------- run sections -- */
.run { border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: var(--s3); overflow: hidden; }
.run > summary { cursor: pointer; padding: 10px var(--s3); background: var(--surface-2);
  display: flex; align-items: center; gap: var(--s3); font-size: 13px; list-style: none; }
.run > summary::-webkit-details-marker { display: none; }
.run > summary::before { content: "▸"; color: var(--fg-faint); font-size: 11px; }
.run[open] > summary::before { content: "▾"; }
.run > summary time { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
.run > summary .grow { flex: 1; }
.run-body { padding: var(--s2) var(--s3) var(--s3); }
.run-latest { border-color: var(--primary); }
.run-latest > summary { background: var(--primary-soft); }

/* ------------------------------------------------------- review cards --- */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s3); }
.shot-card { border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
/* Fixed frame. Without it a card is as tall as its alt text, which for these
   images is the facilitator's entire script. */
.shot-card figure { margin: 0; height: 150px; background: var(--muted);
  display: grid; place-items: center; overflow: hidden; }
.shot-card img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.shot-card .meta { padding: var(--s2) var(--s3); display: flex; flex-direction: column;
  gap: 3px; font-size: 11.5px; color: var(--fg-muted); border-top: 1px solid var(--border); }
.shot-card .meta .dim { font-family: var(--mono); color: var(--fg-faint); }
.shot-card .meta .why { color: var(--fg); }
.shot-card .meta .src { color: var(--fg-faint); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.shot-card .card-actions { padding: 0 var(--s3) var(--s3); }

/* ------------------------------------------------------------ sidebar --- */
/* 32px, content width, aligned with the nav items above it. It was
   width:100% with a border-radius token that does not exist, so it rendered
   as a square full-width slab - a banner where a button belongs. */
.nav-new { display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; width: auto;
  font: 500 13px/1 var(--font);
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; }
.nav-new:hover { background: var(--muted); border-color: var(--fg-faint); }
.nav-new svg { width: 15px; height: 15px; }
.convos { padding: 0 var(--s4) var(--s3); }

/* --------------------------------------------------------------- misc --- */
.empty-note { color: var(--fg-faint); font-size: 12.5px; margin: var(--s3) 0; }
.inline-code { font-family: var(--mono); font-size: 12px; background: var(--muted);
  padding: 1px 5px; border-radius: 4px; }
.callout { border: 1px solid var(--border); border-left: 3px solid var(--primary);
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: var(--s3); margin: var(--s3) 0; font-size: 13px; line-height: 1.6; }
.callout.warn { border-left-color: var(--warn-line); background: var(--warn-bg); }
.callout h4 { margin: 0 0 5px; font-size: 12.5px; font-weight: 650; }
.callout p { margin: 0 0 6px; } .callout p:last-child { margin-bottom: 0; }
.callout ul { margin: 6px 0 0; padding-left: 18px; }
.callout li { margin: 3px 0; }

/* ------------------------------------------------- context overrides --- */
/* These live in the chat column, not in a .panel, so the component rules
   above do not currently reach them. Re-asserted anyway, and last, because
   the day someone wraps the answer card in a panel is the day a screenshot
   thumbnail silently becomes a 32px button with 12px of padding. */
.shot button { height: auto; padding: 0; border-radius: var(--r); }
.fb button { height: 28px; padding: 0 10px; }
.suggest button { height: auto; padding: 9px 12px; text-align: left;
  white-space: normal; line-height: 1.45; }
.nav button { height: auto; }