/* Console layout; tokens and fonts come from brand.css. A slim header, flat sections divided by hairlines instead of boxed
   cards, small controls, no heavy shadows. */
body { font-size:14px; line-height:1.5; }
.site-header { position:sticky; top:0; z-index:50; background:var(--header-bg); border-bottom:1px solid var(--border); backdrop-filter:saturate(1.2) blur(8px); }
.header-inner { margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:960px; min-height:3.25rem; padding:6px 24px; }
.brand { display:flex; align-items:center; min-width:0; gap:12px; }
.brand img { width:auto; height:28px; }
.divider { width:1px; height:22px; background:var(--border); }
.brand h1 { margin:0; font-size:1rem; font-weight:600; color:var(--navy); white-space:nowrap; }
.right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.welcome { font-size:.9rem; color:var(--muted); margin-right:6px; }
.welcome b { color:var(--text); font-weight:600; }

.pill { font-size:.7rem; font-weight:600; padding:1px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:var(--surface); }
.pill.on   { color:var(--ok-fg); background:var(--ok-bg); border-color:var(--ok-bd); }
.pill.busy { color:var(--warn-fg); background:var(--warn-bg); border-color:var(--warn-bd); }
.pill.bad  { color:var(--bad-fg); background:var(--bad-bg); border-color:var(--bad-bd); }
.pill.num  { color:var(--text); font-variant-numeric:tabular-nums; }

.tabs { display:flex; margin:0 auto; max-width:960px; padding:8px 24px 0; gap:2px; }
.tab { background:none; border:0; border-radius:0; border-bottom:2px solid transparent; color:var(--muted);
       font:inherit; font-size:.9rem; font-weight:600; padding:6px 12px; cursor:pointer; }
.tab:hover { color:var(--navy); }
.tab:disabled { opacity:.45; cursor:not-allowed; }
.tab:disabled:hover { color:var(--muted); }
.tab.on { color:var(--indigo); border-bottom-color:var(--indigo); }

main { margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:0; max-width:960px; padding:22px 24px 56px; }
.panel { padding:22px 0; border-top:1px solid var(--border); }
main > .panel:first-child { border-top:0; padding-top:0; }
.panel h2 { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:1.05rem; font-weight:600; }
.panel h3 { margin:0 0 10px; font-size:.98rem; font-weight:600; }
.panel p { margin:0 0 12px; }
.panel p:last-child { margin-bottom:0; }

label { display:block; margin-bottom:4px; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
textarea { resize:vertical; line-height:1.6; }
input, select, textarea { padding:.4rem .7rem; font-size:.9rem; }
.row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-top:12px; }
.row.actions { align-items:center; margin-top:18px; }
.field { flex:1 1 180px; min-width:0; }
.field.narrow { flex:0 0 120px; }
.field.check { flex:1 1 200px; }
.field.check label { font-weight:400; color:var(--text); font-size:.85rem; margin:0 0 4px; text-transform:none; letter-spacing:0;
                     display:flex; align-items:center; gap:8px; }
.field.check input { width:auto; }
.field:has(#ref) { flex:2 1 300px; }

button { font:inherit; font-size:.85rem; font-weight:600; padding:.4rem 1.05rem; border-radius:999px; cursor:pointer;
         border:1px solid var(--border); background:var(--panel); color:var(--indigo);
         transition:transform .15s, box-shadow .15s; }
button.primary { background:var(--grad); border-color:transparent; color:#fff; }
button.tiny { font-size:.72rem; font-weight:500; padding:1px 9px; margin-left:auto; }
button[disabled] { opacity:.45; cursor:not-allowed; }
.err { color:var(--bad-fg); font-size:.85rem; }

.metrics, .tiles { display:grid; gap:8px 28px; }
.metrics { grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); }
.tiles { grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
.m-lab, .t-lab { display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.m-val, .t-val { font-family:var(--font-display); font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; }
.m-val { font-size:1.4rem; }
.t-val { display:block; white-space:nowrap; font-size:1.35rem; }
.m-u { font-size:.75rem; color:var(--muted); margin-left:4px; }
.t-sub { display:block; font-size:.75rem; color:var(--muted); margin-top:2px; }

.tbl { width:100%; border-collapse:collapse; font-size:.85rem; }
.tbl th { text-align:left; color:var(--muted); font-weight:600; text-transform:uppercase; font-size:.66rem; letter-spacing:.08em; padding:6px 10px;
          border-bottom:1px solid var(--border); }
.tbl td { padding:8px 10px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl td code { white-space:nowrap; }
#gens-tbl td.txt { white-space:normal; min-width:260px; word-break:break-word; }
#gens-tbl td.txt .e { color:var(--bad-fg); }
[id$="guide"] .tbl td { white-space:normal; vertical-align:top; }
[id$="guide"] .tbl td:first-child { white-space:nowrap; }
.ok  { color:var(--ok-fg); font-weight:700; }
.bad { color:var(--bad-fg); font-weight:700; }

.notice { margin:0; color:var(--warn-fg); background:var(--warn-bg); border:1px solid var(--warn-bd); border-radius:10px; padding:10px 14px; font-size:.85rem; }
.h2note { margin-left:auto; font-family:var(--font-sans); font-weight:400; font-size:.8rem; color:var(--muted); }
.h2note.left { margin:12px 0 0; }
.hint { color:var(--muted); font-size:.9rem; }
.scrollx { overflow-x:auto; }
.pager { justify-content:center; }
.pager .m-lab { display:inline; }

.words { display:flex; flex-wrap:wrap; gap:6px; }
.words span { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:3px 9px; font-size:.85rem; }
.words span b { font-weight:400; color:var(--muted); font-size:.7rem; margin-left:6px; }
.badge { display:inline-block; margin-left:6px; padding:0 8px; border-radius:999px; font-size:.7rem; font-weight:600;
         color:var(--violet); background:var(--surface-2); border:1px solid var(--border); vertical-align:middle; }

/* ---- Getting started */
.intro p { max-width:70ch; }
.toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.toc a { font-size:.8rem; font-weight:600; color:var(--indigo); text-decoration:none; padding:2px 11px;
         border:1px solid var(--border); border-radius:999px; }
.toc a:hover { border-color:var(--indigo); }
#tab-guide section[id] { scroll-margin-top:84px; }
code { font-family:var(--mono); font-size:.85em; background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
pre { position:relative; margin:12px 0; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 14px; overflow-x:auto; }
/* the model names in the LLM guide */
.models code { margin-right:6px; }
pre code { background:none; border:0; padding:0; font-size:.82rem; line-height:1.6; display:block; white-space:pre; }
pre[data-lang]::before { content:attr(data-lang); position:absolute; top:6px; left:14px; font-size:.65rem;
      letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
pre[data-lang] code { padding-top:14px; }
pre .copy { position:absolute; top:6px; right:8px; padding:2px 10px; font-size:.72rem; font-weight:500; }
.checks { margin:0; padding-left:20px; }
.checks li { margin:4px 0; }
.voices-box { max-height:320px; overflow-y:auto; }

/* ---- Stats */
.range { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.range .field { flex:0 1 210px; }
.presets { flex:1 1 100%; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chip { padding:.25rem .8rem; font-size:.8rem; font-weight:600; color:var(--muted); background:var(--panel); }
.chip.on { color:#fff; background:var(--grad); border-color:transparent; }
.seg { margin-left:auto; display:inline-flex; background:var(--panel); border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.seg button { border:0; border-radius:0; padding:.2rem .8rem; font-size:.8rem; font-weight:600; color:var(--muted); background:none; }
.seg button.on { color:#fff; background:var(--grad); }
.chart { position:relative; height:240px; }
.chart svg { display:block; width:100%; height:100%; }
.chart-empty { height:100%; display:grid; place-items:center; color:var(--muted); font-size:.9rem; }
.chart-tip { position:absolute; top:8px; z-index:5; pointer-events:none; background:var(--panel); border:1px solid var(--border);
             border-radius:10px; padding:8px 10px; font-size:.78rem; line-height:1.5; white-space:nowrap; }
.chart-legend { position:absolute; top:-2px; right:6px; display:flex; gap:14px; font-size:.75rem; color:var(--muted); }
.chart-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }

/* ---- Speech to text */
.transcript { min-height:6rem; line-height:1.8; font-size:1.05rem; overflow-wrap:anywhere; }
.transcript .interim { color:var(--muted); }
#gens-tbl td.txt audio { display:block; width:100%; max-width:320px; margin-top:6px; height:36px; }
.tbl td .tiny { margin-left:0; }
#stt-file { padding:.45rem; }

/* The alignment view: one time scale for the waveform and the words. */
#gens-tbl .align-row td { padding:12px 14px 16px; white-space:normal; }
.align { display:grid; gap:10px; min-width:0; }
.align-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.align-bar .tiny { margin-left:0; }
.align-bar select { width:auto; padding:.2rem .4rem; }
.align-clock { margin-left:auto; font-family:var(--mono); font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.align-scroll { overflow-x:auto; background:var(--panel); border:1px solid var(--border); border-radius:10px; }
.align-track { position:relative; min-width:100%; }
.align-track canvas { display:block; width:100%; height:96px; color:var(--link); cursor:pointer; }
.align-axis { position:relative; height:18px; border-top:1px solid var(--border); }
.align-axis span { position:absolute; top:2px; padding-left:3px; border-left:1px solid var(--border);
                   font:.7rem var(--mono); color:var(--muted); }
.align-words { position:relative; height:64px; border-top:1px solid var(--border); }
.align-words button { position:absolute; top:4px; height:26px; min-width:3px; margin:0; padding:0 3px; overflow:hidden;
                      white-space:nowrap; text-overflow:clip; font:.8rem var(--font-sans); text-align:left; cursor:pointer;
                      color:var(--text); background:var(--hover); border:1px solid var(--border); border-radius:3px; }
.align-words button.low { top:33px; }
.align-words button.on, .align-text span.on { color:var(--surface); background:var(--link); border-color:var(--link); }
.align-head { position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--warn-fg); pointer-events:none; }
.align-text { margin:0; line-height:2; overflow-wrap:anywhere; }
.align-text span { padding:1px 3px; border-radius:3px; cursor:pointer; }

/* LLM: the stored request, response and headers shown under a row of the Requests tab. */
.peek pre { white-space:pre-wrap; word-break:break-word; max-height:24rem; overflow:auto; margin:.4rem 0; }
.peek .row { gap:.4rem; }

.more { display:contents; }
.only-phone { display:none; }

/* ---- Phones */
@media (max-width:720px) {
  .divider, .h1-more, #health, #usage, #conn, .welcome { display:none; }
  .header-inner, .tabs, main { padding-left:14px; padding-right:14px; }
  .panel { padding:16px 0; }
  .tabs { overflow-x:auto; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { white-space:nowrap; }
  .range .field, .range .field.narrow { flex:1 1 100%; }
  .more { display:none; }
  .more.open { display:contents; }
  .only-phone { display:inline-block; }
  .right { gap:6px; }
  .right .pill { padding:2px 8px; }
  #lock { padding:.4rem .7rem; font-size:.8rem; }
  .panel h2 { flex-wrap:wrap; }
  .seg, .h2note { margin-left:0; }
  .field, .field.narrow, .field.check { flex:1 1 100%; }
  .row.actions button { flex:1 1 40%; min-height:44px; }
  .row.actions .pill, .row.actions .err { flex:1 1 100%; text-align:center; }
  .chip { min-height:38px; }
  .tiles, .metrics { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .t-val { white-space:normal; overflow-wrap:anywhere; }

  /* History as cards: each row a block, each cell labelled. */
  #gens-tbl thead { display:none; }
  #gens-tbl, #gens-tbl tbody, #gens-tbl tr, #gens-tbl td { display:block; width:100%; }
  #gens-tbl tr { border:1px solid var(--border); border-radius:12px; padding:8px 12px; margin-bottom:10px; background:var(--surface); }
  #gens-tbl td { border:0; padding:3px 0; white-space:normal; display:flex; justify-content:space-between; gap:12px; }
  #gens-tbl td::before { content:attr(data-label); color:var(--muted); font-size:.75rem; flex:none; }
  #gens-tbl td.txt { display:block; min-width:0; padding-top:6px; }
  #gens-tbl .align-row td { display:block; padding:6px 0; }
  #gens-tbl td.txt::before { display:none; }
}