/* =============================================================================
   ryderkatz.com — Transcripts workbench (transcripts.html)
   -----------------------------------------------------------------------------
   A standalone fullscreen analysis-and-reading instrument. Keeps the site's top
   nav, drops the footer; the body owns the viewport and panes scroll internally.
   All private data is fetched from /api; the page carries none.

   IDENTITY (rebuilt 2026-07-24 against the ratified taste corpus,
   ~/Developer/records/skills/taste/): a WORKBENCH, not a website.
     • P2-graphite-informed neutral scale (cool, never warm, never lime).
     • r2 corners — square, machined ("this looks beautiful" — e-05 O#1).
       The old 8–11px radii are the "unnatural corners" Ryder flagged.
     • Shell/dense spacing: generous shell padding, tight interior rows;
       control clusters pad 9 / gap 7 (e-05 G, e-06 F).
     • SPINE accent language: a 3px left spine carries role/state everywhere
       (e-06/07). Depth by RECESSION (inset wells) on fixed zones; ELEVATION
       only on transients (dropdowns, overlays) (e-15c).
     • ONE ACCENT, NOT THREE HUES (2026-07-26, § YOU-SAID: "the red and blue
       and white is clashing a little much and it's not the 4th of july
       anymore"). The old red-USER / blue-MODEL / slate-TOOL trio put two
       saturated hues against near-white. Now: RYDER carries the P2 accent —
       he is the subject, and the accent marks the subject — while MODEL is
       neutral ink and TOOL is faint graphite. Monochrome + one accent, which
       is the P2 stance itself ("near-black on off-white, blue accent").
       Position separates the voices as much as color: Ryder's spine runs
       down the RIGHT, the model's down the LEFT.
     • Small-caps mono labels; numerals mono/tabular. ANTI-DIDACTIC, and this
       one is law (e-13 F, YOU-SAID STRONG): "i hate text that tries to TEACH
       me". Chrome shows CONTEXT — what a thing is, what sits around it, what
       an action will cost — and never explains what a button does.
     • Type floor is 12.5px for chrome, 16.5px for reading (2026-07-26:
       "tons of text is too small and hard to read"). D2-snug means tight
       SPACING, never small type — the old 9–10.5px chrome was under D2's own
       fs12 baseline.
     • NO ELLIPSIS CHARACTERS anywhere (§ YOU-SAID, repeat correction).
       Overflow fades out under a mask; nothing ever trails off in dots. */
.tv-scope {
  /* --- type scale (one ladder, used everywhere) --- */
  --fs-xs:   11px;     /* micro tags, keycaps — the absolute floor */
  --fs-sm:   12.5px;   /* chrome labels, meta, mono numerals */
  --fs-md:   13.5px;   /* UI text */
  --fs-lg:   15px;     /* list titles, secondary body */
  --fs-body: 16.5px;   /* reading */
  --fs-title:22px;
  /* --- spacing ladder (shell/dense: box 12, rows tight, clusters 9/7) --- */
  --s1: 4px; --s2: 6px; --s3: 9px; --s4: 12px; --s5: 18px; --s6: 26px;
  --pad-box: 12px;     /* content-box outer */
  --pad-ctl: 9px;      /* control cluster */
  --gap-ctl: 7px;
  --gap-head: 4px;
  /* --- motion (e-09/10/12: composed, never pushy; 220 symmetric press) --- */
  --ease: cubic-bezier(.32, .72, .28, 1);
  --ease-back: cubic-bezier(.34, 1.4, .48, 1);   /* the settle/overshoot */
  --t-fast: 130ms;
  --t-mid:  240ms;
  --t-slow: 420ms;      /* the "floaty" flavour, e-09 */
  /* light — graphite paper */
  --v-bg:      #eef0f4;
  --v-panel:   #f7f8fa;
  --v-panel-2: #e7eaef;
  --v-panel-3: #dde1e8;
  --v-well:    #e3e6ec;   /* inset well ground */
  --v-line:    #d0d5dd;
  --v-line-2:  #b8bfca;
  --v-fg:      #1c2028;
  --v-dim:     #454c5b;
  --v-mute:    #7c8494;
  --v-strong:  #0b0d12;
  --v-code-bg: #eceef3;
  /* P2 accent (oklch .55 .16 255) — the single hue in the workspace. */
  --brand:      #3f66c4;
  --brand-soft: rgba(63,102,196,.10);
  /* RYDER = the accent. MODEL = ink. TOOL = faint graphite. No second hue. */
  --tok-user:   #3f66c4;
  --tok-user-soft: rgba(63,102,196,.075);
  --tok-model:  #414a5c;
  --tok-model-soft: rgba(65,74,92,.05);
  --tok-tool:   #8b94a4;
  --tok-tool-soft: rgba(139,148,164,.07);
  --flag:       #b06a10;  /* state only — flagged for review */
  --flag-soft:  rgba(176,106,16,.10);
  --ok:         #2f7d4f;
  --danger:     #b3283c;  /* destructive actions ONLY — never a data class */
  --seam:       #cf6410;  /* the movable split seam — loud on purpose, and
                             deliberately outside the three data classes */
  --shadow-pop: 0 10px 30px rgba(20,24,35,.18), 0 2px 8px rgba(20,24,35,.10);
  --well-shadow: inset 0 1px 4px rgba(20,24,35,.07);
  /* group colors (use-focused filter taxonomy) */
  --g-cli:      #c2410c;  /* Claude Code CLI — terminal orange-red */
  --g-cowork:   #a16207;  /* Cowork — desk amber */
  --g-chat:     #4f46e5;  /* Chat — indigo (subs keep product hues) */
  --g-server:   #0e7490;  /* Server Model — console cyan */
  --g-research: #7c3aed;  /* Research — violet */
  --g-agy:      #be185d;  /* Antigravity CLI — pink */
  --g-unknown:  #64748b;
  --src-claude-chat: #b45309;
  --src-chatgpt:     #0d9463;
  --src-gemini-app:  #2563eb;
  --src-kit:         #1a9c48;  /* Kit — Spotify's agent, its own green */
  /* Model series palette — used ONLY inside analytics charts, where the series
     is the data. Never a surface tint (portal law, KB #274). */
  --m1: #3f5ea8; --m2: #c2410c; --m3: #0e7490; --m4: #7c3aed;
  --m5: #a16207; --m6: #be185d; --m7: #15803d; --m8: #64748b;
  --r: 2px;               /* the corner language: r2, everywhere */
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --num: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --mono: var(--num);
  --serif: var(--ui);
}
.tv-scope, .tv { font-family: var(--ui); }
:root[data-theme="dark"] .tv-scope {
  --v-bg:      #101318;
  --v-panel:   #171b22;
  --v-panel-2: #1e232c;
  --v-panel-3: #272d38;
  --v-well:    #0d1015;
  --v-line:    #2b313d;
  --v-line-2:  #3d4452;
  --v-fg:      #e6e9ef;
  --v-dim:     #aab2c2;
  --v-mute:    #6b7383;
  --v-strong:  #ffffff;
  --v-code-bg: #12151b;
  --brand:      #8aa6e8;
  --brand-soft: rgba(138,166,232,.14);
  --tok-user:   #8aa6e8;
  --tok-user-soft: rgba(138,166,232,.10);
  --tok-model:  #b9c1d1;
  --tok-model-soft: rgba(185,193,209,.06);
  --tok-tool:   #6e7789;
  --tok-tool-soft: rgba(110,119,137,.10);
  --flag:       #d99435;
  --flag-soft:  rgba(217,148,53,.13);
  --ok:         #4bb571;
  --danger:     #e8607a;
  --seam:       #f5913f;
  --shadow-pop: 0 12px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --well-shadow: inset 0 1px 5px rgba(0,0,0,.35);
  --g-cli:      #e8703a;
  --g-cowork:   #d3a13a;
  --g-chat:     #8b93f0;
  --g-server:   #38c2dd;
  --g-research: #a98af5;
  --g-agy:      #ef6aa8;
  --g-unknown:  #8d9aac;
  --src-claude-chat: #dd9448;
  --src-chatgpt:     #38c68f;
  --src-gemini-app:  #6ba1f5;
  --src-kit:         #2ee06a;
  --m1: #7b96d4; --m2: #e8703a; --m3: #38c2dd; --m4: #a98af5;
  --m5: #d3a13a; --m6: #ef6aa8; --m7: #34a35e; --m8: #8d9aac;
}

html, body.tv-scope { height: 100%; }
body.tv-scope { margin: 0; display: flex; flex-direction: column; overflow: hidden; }

.tv {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--v-bg); color: var(--v-fg);
}

/* === Dedicated top bar ==================================================== */
.tv-top {
  flex: none; position: relative; z-index: 30;
  display: flex; align-items: stretch; gap: .55rem;
  padding: 0 .8rem; height: 44px;
  background: var(--v-panel); border-bottom: 1px solid var(--v-line);
}
.tv-top > * { align-self: center; }
.tv-brand {
  display: flex; align-items: center; gap: .5rem; flex: none;
  border: 0; background: none; cursor: pointer; padding: .15rem .2rem;
  border-radius: var(--r);
}
.tv-brand .tv-mark { display: flex; flex-direction: column; gap: 2px; flex: none; }
.tv-brand .tv-mark i { display: block; height: 3px; border-radius: 1px; }
.tv-brand .tv-mark i:nth-child(1) { background: var(--tok-user); width: 15px; }
.tv-brand .tv-mark i:nth-child(2) { background: var(--tok-model); width: 11px; }
.tv-brand .tv-mark i:nth-child(3) { background: var(--tok-tool); width: 8px; }
.tv-brand .tv-wm { font-weight: 800; font-size: 1rem; letter-spacing: -.03em; color: var(--v-fg); }
.tv-brand:hover .tv-wm { color: var(--brand); }

/* Tabs: Library · Analytics · History — spine-active (state-coded spine). */
.tv-tabs { display: flex; align-self: stretch; align-items: stretch; gap: 2px; margin-left: .6rem; }
.tv-tab {
  display: inline-flex; align-items: center; padding: 0 .8rem; cursor: pointer;
  border: 0; background: none; position: relative;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--v-mute);
}
.tv-tab::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 0; height: 3px;
  background: transparent;
}
.tv-tab:hover { color: var(--v-fg); }
.tv-tab.on { color: var(--v-strong); }
.tv-tab.on::after { background: var(--brand); }
.tv-tab .mark {
  margin-left: .45rem; font-size: 11px; padding: 0 .3rem; border-radius: var(--r);
  background: var(--flag-soft); color: var(--flag); letter-spacing: 0;
}
.tv-tab[hidden] { display: none; }

.tv-top .spacer { flex: 1 1 auto; }

/* Top-bar controls — control cluster: pad 9 / gap 7, compact targets. */
.tv-top-ctl {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  height: 27px; padding: 0 .6rem; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--v-panel-2); color: var(--v-dim);
  border: 1px solid var(--v-line); border-radius: var(--r);
  transition: color .12s, border-color .12s, background .12s;
}
.tv-top-ctl:hover { color: var(--v-fg); border-color: var(--v-line-2); }
.tv-top-ctl.on { color: #fff; background: var(--brand); border-color: var(--brand); }
.tv-top-ctl .chev { transition: transform .18s ease; }
.tv-top-ctl.open .chev { transform: rotate(180deg); }
.tv-top-ctl .count {
  min-width: 15px; text-align: center; padding: 0 .2rem; border-radius: var(--r);
  background: var(--brand); color: #fff; font-size: 11px;
}
.tv-icon-btn {
  flex: none; display: grid; place-items: center; width: 27px; height: 27px;
  border: 1px solid var(--v-line); border-radius: var(--r); background: var(--v-panel-2);
  color: var(--v-dim); cursor: pointer; transition: color .12s, border-color .12s;
}
.tv-icon-btn:hover { color: var(--v-fg); border-color: var(--v-line-2); }
.tv-icon-btn.on { color: #fff; background: var(--brand); border-color: var(--brand); }
body:not([data-admin]) .admin-only { display: none !important; }

/* Search — the search law: hidden while idle, expands on demand under the bar. */
.tv-search-pop {
  position: absolute; top: 100%; right: .8rem; z-index: 40; width: min(420px, 90vw);
  margin-top: 6px; padding: .55rem;
  background: var(--v-panel); border: 1px solid var(--v-line-2); border-radius: var(--r);
  box-shadow: var(--shadow-pop);
}
.tv-search-pop[hidden] { display: none; }
.tv-search-pop input {
  width: 100%; box-sizing: border-box; background: var(--v-well); border: 1px solid var(--v-line);
  border-radius: var(--r); color: var(--v-fg); font: inherit; font-size: 15px;
  padding: .45rem .65rem; box-shadow: var(--well-shadow);
}
.tv-search-pop input:focus { outline: none; border-color: var(--brand); background: var(--brand-soft); }
.tv-search-pop input::placeholder { color: var(--v-mute); }

/* === Filters dropdown (top-right) ======================================== */
.tv-filters-pop {
  position: absolute; top: 100%; right: .8rem; z-index: 40;
  width: min(340px, 92vw); margin-top: 6px;
  background: var(--v-panel); border: 1px solid var(--v-line-2); border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; max-height: min(72vh, 640px);
}
.tv-filters-pop[hidden] { display: none; }
.tv-corpus { padding: .75rem .85rem .6rem; border-bottom: 1px solid var(--v-line); }
.tv-corpus-top { font-size: 13.5px; color: var(--v-dim); }
.tv-corpus-top b { color: var(--v-fg); font-weight: 800; font-size: 16.5px; font-family: var(--mono); }
.tv-corpus-bar {
  display: flex; gap: 2px; height: 8px; margin: .5rem 0 .45rem;
  border-radius: var(--r); overflow: hidden;
}
.tv-corpus-bar .seg { height: 100%; border-radius: 1px; }
.tv-corpus-legend { display: flex; flex-wrap: wrap; gap: .4rem .75rem; font-size: 12.5px; color: var(--v-mute); font-family: var(--mono); }
.tv-corpus-legend .k { display: inline-flex; align-items: center; gap: .3rem; }
.tv-corpus-legend .k b { color: var(--v-fg); font-weight: 700; }
.tv-corpus-legend .k i { width: 8px; height: 8px; border-radius: 1px; }
.tv-corpus-legend .k.tok-user  i { background: var(--tok-user); }
.tv-corpus-legend .k.tok-user  b { color: var(--tok-user); }
.tv-corpus-legend .k.tok-model i { background: var(--tok-model); }
.tv-corpus-legend .k.tok-tool  i { background: var(--tok-tool); }
/* The unit letter riding a dual count: present, never competing with it. */
.uu { font-size: .82em; font-weight: 500; opacity: .6; margin-left: .5px; letter-spacing: 0; }
.seg.tok-user  { background: var(--tok-user); }
.seg.tok-model { background: var(--tok-model); }
.seg.tok-tool  { background: var(--tok-tool); }

.tv-filters {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px; padding: .5rem .55rem .65rem;
}
.tv-filters-head {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--v-mute); padding: .35rem .3rem .15rem;
}
.tv-facet {
  position: relative; display: flex; align-items: center; gap: .45rem; width: 100%;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: .3rem .5rem; border-radius: var(--r); text-align: left; overflow: hidden;
  color: var(--v-dim); border: 0; background: none;
  border-left: 3px solid transparent;
  transition: color .12s, background .12s;
}
.tv-facet .bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: color-mix(in srgb, var(--facet, var(--v-mute)) 13%, transparent);
}
.tv-facet .dot, .tv-facet .lbl, .tv-facet .n { position: relative; z-index: 1; }
.tv-facet .dot { width: 7px; height: 7px; border-radius: 1px; background: var(--facet, var(--v-mute)); flex: none; }
.tv-facet .lbl { flex: 1; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%); mask-image: linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%); }
.tv-facet .n { color: var(--v-mute); font-weight: 500; font-variant-numeric: tabular-nums; }
.tv-facet:hover { color: var(--v-fg); background: var(--v-panel-2); }
.tv-facet.on {
  color: var(--v-strong); background: color-mix(in srgb, var(--facet) 12%, transparent);
  border-left-color: var(--facet);
}
.tv-facet.on .lbl { font-weight: 800; }
.tv-facet.on .n { color: var(--facet); font-weight: 800; }
.tv-facet.sub { margin-left: 1.1rem; font-size: 12.5px; font-weight: 500; }
.tv-facet.sub .dot { width: 5px; height: 5px; }
.tv-filters-foot { padding: .5rem .55rem; border-top: 1px solid var(--v-line); display: flex; gap: .45rem; align-items: center; }
.tv-filters-hint { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--v-mute); }
.tv-mini-btn {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: .28rem .6rem; border-radius: var(--r);
  background: none; border: 1px solid var(--v-line-2); color: var(--v-dim);
}
.tv-mini-btn:hover { color: var(--v-fg); border-color: var(--v-mute); }
.tv-mini-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.tv-mini-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

/* === Settings dropdown (hover) =========================================== */
.tv-settings { position: relative; display: flex; align-self: center; }
.tv-settings-menu {
  position: absolute; top: 100%; right: 0; z-index: 40; margin-top: 6px;
  min-width: 230px; padding: .35rem;
  background: var(--v-panel); border: 1px solid var(--v-line-2); border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  display: none; flex-direction: column; gap: 2px;
}
.tv-settings.open .tv-settings-menu { display: flex; }
.tv-settings-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .45rem .55rem; cursor: pointer; text-align: left;
  border: 0; border-left: 3px solid transparent; border-radius: var(--r);
  background: none; color: var(--v-fg); font-size: 13.5px; font-weight: 600;
}
.tv-settings-item:hover { background: var(--v-panel-2); border-left-color: var(--brand); }
.tv-settings-item .k { font-family: var(--mono); font-size: 13.5px; color: var(--v-mute); width: 16px; text-align: center; }
.tv-settings-item .sub { display: block; font-size: 12.5px; color: var(--v-mute); font-weight: 500; margin-top: .1rem; }
.tv-settings-sep { height: 1px; background: var(--v-line); margin: .25rem .3rem; }

/* === Pages ================================================================ */
.tv-page { flex: 1 1 auto; min-height: 0; }
.tv-page[hidden] { display: none; }

/* --- Library page: rail | reader (| console) ----------------------------- */
.tv-page-library {
  display: grid; grid-template-columns: var(--tv-side-w, 320px) 1fr;
}
.tv-page-library.console-open { grid-template-columns: var(--tv-side-w, 300px) minmax(0,1fr) clamp(360px, 32vw, 460px); }
body.tv-side-rz-active .tv-page-library { transition: none; }

/* Collapsed list — the reader takes the whole workspace. A real state, not a
   drag to zero: the column goes away entirely, no residual gutter. */
.tv-page-library.side-hidden { grid-template-columns: 0 1fr; }
.tv-page-library.side-hidden.console-open { grid-template-columns: 0 minmax(0,1fr) clamp(360px, 32vw, 460px); }
.tv-page-library.side-hidden .tv-side { display: none; }

/* Left rail — the transcripts themselves, nothing else. */
.tv-side {
  border-right: 1px solid var(--v-line); background: var(--v-panel);
  display: flex; flex-direction: column; min-height: 0; position: relative;
}
.tv-side-rz { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: ew-resize; z-index: 6; }
.tv-side-rz::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 38px; border-radius: 1px; background: var(--v-line); transition: background .12s;
}
.tv-side-rz:hover::after, body.tv-side-rz-active .tv-side-rz::after { background: var(--v-mute); }
body.tv-side-rz-active { user-select: none; cursor: ew-resize; }

/* Quick filters — the switch made constantly, one click, digit-addressable.
   One scrollable row: density over a wrapped block that pushes the list down. */
.tv-quick {
  flex: none; display: flex; gap: 3px; align-items: center;
  padding: .35rem .45rem; border-bottom: 1px solid var(--v-line);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tv-quick::-webkit-scrollbar { display: none; }
.tv-quick:empty { display: none; }
.tv-qchip {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: .2rem .42rem; border-radius: var(--r); white-space: nowrap;
  color: var(--v-dim); background: none;
  border: 1px solid transparent; border-bottom: 2px solid transparent;
  transition: color .1s, background .1s, border-color .1s;
}
.tv-qchip .dot { width: 6px; height: 6px; border-radius: 1px; background: var(--facet, var(--v-mute)); flex: none; }
.tv-qchip .n { color: var(--v-mute); font-weight: 500; font-variant-numeric: tabular-nums; }
.tv-qchip .key {
  font-size: 11px; font-weight: 700; color: var(--v-mute); opacity: 0;
  border: 1px solid var(--v-line); border-radius: 1px; padding: 0 .18rem; line-height: 1.3;
  transition: opacity .1s;
}
.tv-quick:hover .tv-qchip .key { opacity: .75; }
.tv-qchip:hover { color: var(--v-fg); background: var(--v-panel-2); }
.tv-qchip.on {
  color: var(--v-strong); background: color-mix(in srgb, var(--facet) 12%, transparent);
  border-bottom-color: var(--facet);
}
.tv-qchip.on .n { color: var(--facet); font-weight: 800; }

.tv-listmeta {
  flex: none; display: flex; justify-content: space-between; align-items: center;
  padding: .45rem .8rem; border-bottom: 1px solid var(--v-line);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-mute);
}
.tv-listmeta select {
  font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
  background: transparent; color: var(--v-dim); border: 1px solid var(--v-line);
  border-radius: var(--r); padding: .12rem .3rem; cursor: pointer;
}
.tv-listmeta select:focus { outline: none; border-color: var(--brand); }

.tv-list { overflow-y: auto; flex: 1; padding: 0 0 30vh var(--s3); }
.tv-group {
  position: sticky; top: 0; z-index: 2;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--v-mute);
  padding: var(--s4) var(--s3) var(--s2) 0; margin-left: calc(var(--s3) * -1);
  padding-left: var(--s3);
  background: linear-gradient(var(--v-panel) 72%, transparent);
}
/* Conversation ROW — one fixed rhythm, not a stack of differently-sized
   blocks (§ YOU-SAID 2026-07-26: "the side transcripts are all different
   sizes and feel like blocks"). Every row is exactly three lines tall
   whatever the title length; a long title fades out under a mask rather than
   wrapping or trailing off in dots. A ruled list, not cards. */
.tv-item {
  display: grid; grid-template-columns: 3px 1fr; column-gap: var(--s3);
  position: relative; cursor: pointer; height: 62px; align-content: center;
  padding: 0 var(--s3) 0 0; margin: 0; border-bottom: 1px solid var(--v-line);
  background: none;
  transition: background var(--t-fast) var(--ease);
}
.tv-item::before {
  content: ""; grid-row: 1 / span 3; grid-column: 1; align-self: stretch;
  margin: 9px 0; border-radius: 1px; background: var(--src, var(--v-line-2));
  opacity: .35; transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease-back);
}
.tv-item > * { grid-column: 2; min-width: 0; }
.tv-item:hover { background: var(--v-panel-2); }
.tv-item:hover::before { opacity: .7; }
.tv-item.active { background: color-mix(in srgb, var(--src, var(--brand)) 7%, var(--v-panel-2)); }
.tv-item.active::before { opacity: 1; transform: scaleX(1.7); }
.tv-item-src {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--src, var(--v-mute)); display: flex; align-items: center; gap: var(--s2);
  white-space: nowrap; overflow: hidden;
}
.tv-item-src .dot { display: none; }
.tv-item-src .mdl { color: var(--v-mute); font-weight: 600; }
.tv-item-src .date { margin-left: auto; color: var(--v-mute); font-weight: 500; letter-spacing: 0; flex: none; }
.tv-item-src .flagmark { color: var(--flag); letter-spacing: 0; flex: none; }
/* Overflow FADES. No ellipsis characters anywhere in this workspace. */
.tv-item-title {
  font-weight: 650; font-size: var(--fs-lg); line-height: 1.25; color: var(--v-fg);
  margin: 1px 0 3px; white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
}
.tv-item.active .tv-item-title { color: var(--v-strong); }
/* The meter is a hairline under the row, not a block inside it. */
.tv-item-bar {
  display: flex; gap: 1px; height: 3px; border-radius: 1px; overflow: hidden;
  margin: 0 0 3px; opacity: .55; transition: opacity var(--t-fast) var(--ease);
}
.tv-item:hover .tv-item-bar, .tv-item.active .tv-item-bar { opacity: 1; }
.tv-item-bar .seg { height: 100%; border-radius: 1px; min-width: 2px; }
.tv-item-stats {
  display: flex; align-items: baseline; gap: var(--s3); white-space: nowrap; overflow: hidden;
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--v-mute); font-variant-numeric: tabular-nums;
}
.tv-item-stats .n { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.tv-item-stats .n i { width: 5px; height: 5px; border-radius: 1px; flex: none; }
.tv-item-stats .n.u { color: var(--tok-user); }  .tv-item-stats .n.u i { background: var(--tok-user); }
.tv-item-stats .n.m { color: var(--v-dim); }     .tv-item-stats .n.m i { background: var(--tok-model); }
.tv-item-stats .n.t { color: var(--tok-tool); }  .tv-item-stats .n.t i { background: var(--tok-tool); }
.tv-item-stats .foot { color: var(--v-mute); font-weight: 500; margin-left: auto; flex: none; }
.tv-item-stats .fail { color: var(--flag); font-weight: 700; flex: none; }
.tv-item-stats .ver { color: var(--ok); font-weight: 700; flex: none; }

/* --- Reader --------------------------------------------------------------- */
.tv-main { min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.tv-readbar {
  flex: none; display: flex; align-items: center; gap: .5rem; padding: .4rem .9rem;
  border-bottom: 1px solid var(--v-line); background: var(--v-panel);
  font-family: var(--mono); font-size: 12.5px; color: var(--v-dim); min-height: 20px;
}
.tv-readbar .t {
  overflow: hidden; white-space: nowrap; font-weight: 600; flex: 1; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
}
.tv-progress { flex: none; height: 2px; background: var(--brand); width: 0%; transition: width .1s linear; }

.tv-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; scroll-behavior: smooth; }
.tv-doc { max-width: 860px; margin: 0 auto; padding: 1.8rem 2.2rem 30vh; }
.tv-doc-head { border-bottom: 1px solid var(--v-line); padding-bottom: 1.1rem; margin-bottom: 1.5rem; }
.tv-doc-head h1 {
  font-family: var(--ui); font-weight: 780; font-size: 1.7rem;
  letter-spacing: -.026em; line-height: 1.18; margin: 0 0 .6rem; color: var(--v-fg);
}
.tv-doc-meta { display: flex; flex-wrap: wrap; gap: .45rem .6rem; align-items: center; font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.tv-doc-meta .src-chip { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--src, var(--v-mute)); }
.tv-doc-meta .sep { opacity: .5; }
.tv-doc-meta .tok { color: var(--v-dim); font-weight: 700; }
.tv-doc-meta .ver { color: var(--ok); font-weight: 700; }

/* Model · effort — a first-class, hand-correctable variable. Click-to-edit:
   single click, edit in place, blur/Enter commits (e-13 A#1). */
.mdl-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--v-dim); border: 1px solid var(--v-line); border-left: 3px solid var(--src, var(--v-line-2));
  border-radius: var(--r); padding: .12rem .5rem; letter-spacing: .04em;
}
.mdl-chip .lbl { text-transform: uppercase; font-size: 11px; color: var(--v-mute); letter-spacing: .1em; }
.mdl-chip.editable { cursor: pointer; }
.mdl-chip.editable:hover { border-color: var(--v-line-2); color: var(--v-fg); }
.mdl-edit { display: inline-flex; align-items: center; gap: .3rem; }
.mdl-edit input, .mdl-edit select {
  font-family: var(--mono); font-size: 12.5px; padding: .15rem .35rem;
  background: var(--v-well); color: var(--v-fg); border: 1px solid var(--v-line-2);
  border-radius: var(--r); box-shadow: var(--well-shadow);
}
.mdl-edit input { width: 7.5rem; }
.mdl-edit input:focus, .mdl-edit select:focus { outline: none; border-color: var(--brand); }

/* === Flag for review ====================================================== */
/* The flag is the primary act — one click. The note is optional color. */
.tv-flag { margin: .8rem 0 0; }
.tv-flag-btn {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  padding: .32rem .7rem; border-radius: var(--r);
  background: none; color: var(--v-dim); border: 1px solid var(--v-line-2);
}
.tv-flag-btn:hover { color: var(--flag); border-color: var(--flag); background: var(--flag-soft); }
.tv-flag-card {
  border: 1px solid color-mix(in srgb, var(--flag) 35%, var(--v-line));
  border-left: 3px solid var(--flag); border-radius: var(--r);
  background: var(--flag-soft); padding: .6rem .8rem;
}
.tv-flag-card.resolved {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--v-line));
  border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.tv-flag-h { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.tv-flag-h .k {
  font-family: var(--mono); font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--flag);
}
.tv-flag-card.resolved .tv-flag-h .k { color: var(--ok); }
.tv-flag-h .when { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.tv-flag-h .spacer { flex: 1; }
.tv-flag-note { margin-top: .4rem; font-size: 15px; color: var(--v-fg); line-height: 1.5; white-space: pre-wrap; }
.tv-flag-note.empty { color: var(--v-mute); font-style: italic; cursor: pointer; }
.tv-flag-note.editable { cursor: pointer; }
.tv-flag-note.editable:hover { text-decoration: underline dotted var(--v-mute); }
.tv-flag-res { margin-top: .45rem; font-size: 13.5px; color: var(--v-dim); line-height: 1.5;
  border-top: 1px solid color-mix(in srgb, var(--v-line) 60%, transparent); padding-top: .45rem; }
.tv-flag-res b { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ok); margin-right: .4rem; }
.tv-flag-input {
  width: 100%; box-sizing: border-box; margin-top: .4rem; min-height: 2.4rem; resize: vertical;
  font: inherit; font-size: 13.5px; background: var(--v-well); color: var(--v-fg);
  border: 1px solid var(--v-line-2); border-radius: var(--r); padding: .4rem .55rem;
  box-shadow: var(--well-shadow);
}
.tv-flag-input:focus { outline: none; border-color: var(--flag); }

/* === AI summary =========================================================== */
.tv-summary {
  margin: 1.1rem 0 1.6rem;
  border: 1px solid var(--v-line); border-left: 3px solid var(--src, var(--v-line-2));
  border-radius: var(--r); background: var(--v-panel);
  padding: .7rem .95rem .85rem;
}
.tv-summary-h { display: flex; align-items: center; gap: .55rem; }
.tv-summary-badge {
  font-family: var(--mono); font-size: 12.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--src, var(--v-dim));
}
.tv-summary-model { font-family: var(--mono); font-size: 11px; color: var(--v-mute); }
.tv-summary-gen {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  cursor: pointer; color: var(--v-dim); background: none;
  border: 1px solid var(--v-line); border-radius: var(--r); padding: .12rem .5rem;
}
.tv-summary-gen:hover { border-color: var(--src, var(--v-line-2)); color: var(--src, var(--v-fg)); }
.tv-summary-gen:disabled { opacity: .6; cursor: default; }
.tv-summary-tldr { margin: .5rem 0 0; font-size: 15px; line-height: 1.6; color: var(--v-fg); }
.tv-summary-points { margin: .5rem 0 0; padding-left: 1.15rem; font-size: 15px; line-height: 1.55; color: var(--v-dim); }
.tv-summary-points li { margin-bottom: .25rem; }
.tv-summary-points li::marker { color: var(--src, var(--v-mute)); }
.tv-summary-topics { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.tv-summary-topic {
  font-family: var(--mono); font-size: 11px; color: var(--v-mute);
  border: 1px solid var(--v-line); border-radius: var(--r); padding: .06rem .4rem;
}
.tv-summary-empty { margin-top: .45rem; color: var(--v-mute); font-size: 13.5px; }
.tv-summary-err { margin-top: .45rem; color: var(--danger); font-size: 13.5px; }

.tv-empty { display: grid; place-items: center; height: 100%; color: var(--v-mute); font-family: var(--mono); padding: 2rem; text-align: center; }

/* === Turns — who is speaking is structural, not decorative ================ */
/* Every block: an in-block header naming the speaker (small-caps, colored)
   + a 3px role spine + a role-distinct ground:
     USER      → red-tinted well (the hero — his writing)
     MODEL     → plain panel (the paper heart)
     TOOL      → inset machine well, mono
     THINKING  → quiet italic aside
   One vocabulary for every source; CLI sessions just use more of it. */
/* === TURN GROUPS — the connector ==========================================
   A TURN is one entity's uninterrupted output (terminology law 2026-07-06):
   a prompt, or a whole AI work loop of prose + tool calls + results +
   thinking. Until now each STEP floated on its own and the turn existed only
   in the data. Now the turn is a real object on the page: one connector rail
   runs the full height of everything the speaker said without interruption —
   down the LEFT for the model, down the RIGHT for Ryder. Side alone tells you
   who is talking before you read a word. */
.tg { position: relative; margin: 0 0 var(--s6); scroll-margin-top: var(--s5); }
.tg + .tg { margin-top: 0; }
.tg-model { padding-left: 22px; }
.tg-user  { padding-right: 22px; }
/* The rail. One continuous line, capped at the top so it reads as a bracket
   rather than a border that happened to be there. */
.tg::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; width: 2px;
  border-radius: 1px; background: var(--rail, var(--v-line-2));
  transition: background var(--t-mid) var(--ease);
}
.tg::after {
  content: ""; position: absolute; top: 3px; width: 8px; height: 2px;
  border-radius: 1px; background: var(--rail, var(--v-line-2));
}
.tg-model { --rail: color-mix(in srgb, var(--tok-model) 55%, var(--v-line)); }
.tg-user  { --rail: var(--tok-user); }
.tg-model::before { left: 7px; }
.tg-model::after  { left: 7px; }
.tg-user::before  { right: 7px; }
.tg-user::after   { right: 7px; }
.tg:hover::before { background: var(--rail); filter: brightness(1.12); }

/* The speaker header belongs to the TURN, not to each step inside it. */
.tg-head {
  display: flex; align-items: baseline; gap: var(--gap-ctl); flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.tg-user .tg-head { justify-content: flex-end; text-align: right; }
.tg-who {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 17px; font-weight: 800;
  letter-spacing: .05em; line-height: 1.1; color: var(--who, var(--v-fg));
}
.tg-model .tg-who { --who: var(--v-fg); }
.tg-user  .tg-who { --who: var(--tok-user); }
.tg-who i { width: 9px; height: 9px; border-radius: 1px; background: var(--rail); flex: none; }
.tg-meta {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--v-mute);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.tg-meta b { color: var(--v-dim); font-weight: 700; }
.tg-sum {
  flex: 1 1 100%; font-size: var(--fs-md); line-height: 1.5; color: var(--v-dim);
  margin-top: var(--gap-head);
}
.tg-user .tg-sum { text-align: right; }

.turn { position: relative; margin-bottom: var(--s2); scroll-margin-top: var(--s5); }
.turn-head {
  display: flex; align-items: center; gap: var(--gap-ctl); flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--v-mute);
  padding: 0 .15rem; margin-bottom: var(--gap-head);
}
.tg-user .turn-head { justify-content: flex-end; }
/* The speaker is named once, on the GROUP. A step header only says what KIND
   of step it is, and only when that isn't already obvious — chrome, not shout. */
.turn-head .role {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
}
.turn-head .role i { width: 6px; height: 6px; border-radius: 1px; flex: none; }
.turn.role-user  .turn-head .role { color: var(--tok-user); }
.turn.role-user  .turn-head .role i { background: var(--tok-user); }
.turn.role-model .turn-head .role { color: var(--v-dim); }
.turn.role-model .turn-head .role i { background: var(--tok-model); }
.turn.role-tool  .turn-head .role { color: var(--tok-tool); }
.turn.role-tool  .turn-head .role i { background: var(--tok-tool); }
.turn.role-quiet .turn-head .role { color: var(--v-mute); }
.turn.role-quiet .turn-head .role i { background: var(--v-mute); }
/* Inside a group the speaker never changes, so the prose step's own label is
   pure noise — the body carries it. Machine kinds keep theirs. */
.tg .turn.role-model > .turn-head > .role,
.tg .turn.role-user  > .turn-head > .role { display: none; }
.turn-head .hmeta { font-weight: 500; letter-spacing: .03em; color: var(--v-mute); font-size: var(--fs-xs); }
.turn-head .inf { color: var(--flag); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.turn-head .vbadge { color: var(--ok); letter-spacing: .02em; text-transform: none; font-weight: 700; }
.turn-head .spacer { flex: 1; }
.tg-user .turn-head .spacer { display: none; }
.prompt-ref {
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 800; cursor: pointer;
  background: var(--tok-user-soft); color: var(--tok-user);
  border: 1px solid color-mix(in srgb, var(--tok-user) 30%, transparent);
  border-radius: var(--r); padding: .04rem .38rem; line-height: 1.35; letter-spacing: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.prompt-ref:hover { background: var(--tok-user); color: #fff; }

.turn-body { line-height: 1.68; font-size: var(--fs-body); color: var(--v-fg); min-width: 0; }
/* RYDER — the accent well. He is the subject; the accent marks the subject. */
.turn.role-user .turn-body {
  background: var(--tok-user-soft);
  border: 1px solid color-mix(in srgb, var(--tok-user) 20%, var(--v-line));
  border-radius: var(--r); padding: var(--s4) calc(var(--s4) + 2px);
}
/* MODEL — neutral paper. No hue: it is the bulk of the text, and colouring
   the bulk is what made the page shout. */
.turn.role-model .turn-body {
  background: var(--v-panel); border: 1px solid var(--v-line);
  border-radius: var(--r); padding: var(--s4) calc(var(--s4) + 2px);
}
.turn-body p { margin: 0 0 .8rem; }
.turn-body p:last-child { margin-bottom: 0; }
.turn-body strong { color: var(--v-strong); font-weight: 700; }
.turn-body pre {
  background: var(--v-code-bg); border: 1px solid var(--v-line); border-radius: var(--r);
  padding: .8rem .95rem; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; margin: .65rem 0; line-height: 1.55;
}
.turn-body code { font-family: var(--mono); font-size: .9em; background: var(--v-code-bg); padding: .08rem .3rem; border-radius: var(--r); color: var(--v-dim); }
.turn-body pre code { background: none; padding: 0; color: var(--v-fg); }

/* TOOL call — machine well: inset, mono, slate spine. Its RESULT nests under
   the same spine, dimmer — call and output read as one machine passage. Both
   sit INSIDE the model's group rail, so they read as part of one turn. */
.turn.kind-tool_use, .turn.kind-tool_result { margin-bottom: var(--s1); }
.turn.kind-tool_use .turn-body pre.raw,
.turn.kind-tool_result .turn-body pre.raw {
  margin: 0; font-family: var(--mono); white-space: pre-wrap; overflow: auto;
  border-radius: var(--r);
}
.turn.kind-tool_use .turn-body pre.raw {
  background: var(--v-well); border: 1px solid var(--v-line);
  border-left: 3px solid var(--tok-tool); box-shadow: var(--well-shadow);
  padding: .42rem .7rem; font-size: 13.5px; color: var(--v-fg); font-weight: 600;
}
.turn.kind-tool_result .turn-body pre.raw {
  background: color-mix(in srgb, var(--v-well) 60%, transparent);
  border: 1px solid var(--v-line);
  border-left: 3px solid color-mix(in srgb, var(--tok-tool) 45%, transparent);
  padding: .42rem .7rem; font-size: 12.5px; color: var(--v-dim); max-height: 20rem;
  margin-left: .9rem;
}
.turn.kind-tool_result { margin-left: 0; }
.turn.kind-tool_result .turn-head { padding-left: 1rem; }

/* THINKING / META — quiet asides, never competing with the dialogue. */
.turn.kind-thinking .turn-body {
  font-style: italic; color: var(--v-mute); font-size: 15px;
  border-left: 3px solid var(--v-line-2); padding: .1rem 0 .1rem .8rem;
}
.turn.kind-meta .turn-body {
  color: var(--v-mute); font-size: 13.5px; font-family: var(--mono); line-height: 1.5;
  border: 1px dashed var(--v-line-2); border-radius: var(--r); padding: .5rem .7rem;
  white-space: pre-wrap;
}

/* Compact rhythm for CLI sessions: the ladder reads continuously. */
.tv-doc--claude-code .turn { margin-bottom: var(--s1); }

.turn-body sup.cite { color: var(--g-research); font-weight: 700; font-size: .7em; padding: 0 .05em; cursor: default; }

/* === Boundary drag =======================================================
   The seam between two steps is a thing you can GRAB. Pull it down and this
   turn absorbs whole lines from the one below; push it up and it gives them
   back. Split-then-merge, done as one gesture on the object itself. */
.turn-edge {
  position: relative; height: 9px; margin: -3px 0 -1px; cursor: ns-resize;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.tg:hover .turn-edge, .turn-edge.live { opacity: 1; }
.turn-edge::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px;
  border-radius: 1px; background: var(--seam); opacity: .35;
  transition: opacity var(--t-fast) var(--ease), height var(--t-fast) var(--ease);
}
.turn-edge:hover::before, .turn-edge.live::before { opacity: 1; height: 3px; top: 3px; }
.turn-edge .grip {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 34px; height: 9px; border-radius: 1px; background: var(--seam);
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.turn-edge:hover .grip, .turn-edge.live .grip { opacity: 1; }
.turn-edge .count {
  position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 800;
  color: #fff; background: var(--seam); border-radius: var(--r);
  padding: .12rem .4rem; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.turn-edge.live .count { opacity: 1; }
/* Lines currently held by the drag, shown in place before anything commits. */
.edge-ghost {
  background: color-mix(in srgb, var(--seam) 14%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--seam);
  transition: background var(--t-fast) var(--ease);
}
body.tv-edge-drag { cursor: ns-resize; user-select: none; }
/* While you drag, the lines actually crossing the seam are rendered here, so
   the border is visibly landing on a line and not on a guess. */
.edge-preview {
  margin: 0 0 var(--s2); padding: var(--s2) var(--s3); white-space: pre-wrap;
  font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.5;
  color: var(--v-fg); background: color-mix(in srgb, var(--seam) 12%, transparent);
  border-left: 3px solid var(--seam); border-radius: var(--r);
  max-height: 11rem; overflow: hidden;
}
.edge-preview[hidden] { display: none; }
/* A structural edit says what moved instead of silently redrawing. */
@keyframes tg-settle { from { transform: translateY(4px); opacity: .5; } to { transform: none; opacity: 1; } }
.tg-settle { animation: tg-settle 420ms var(--ease-back) both; }
@media (prefers-reduced-motion: reduce) { .tg-settle { animation: none; } }

/* Turn footer: tags primary; the correction tools behind a quiet toggle. */
.turn-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-ctl); margin-top: var(--s2); padding: 0 .15rem; }
.tg-user .turn-foot { justify-content: flex-end; }
.turn-foot .turn-tags { flex: 1 1 auto; margin-top: 0; }
.tag-adder { display: inline-flex; }
.tag-input {
  font-family: var(--mono); font-size: 12.5px; padding: .15rem .5rem; min-width: 10rem;
  background: var(--v-well); color: var(--v-fg); border: 1px solid var(--brand);
  border-radius: var(--r); outline: none; box-shadow: var(--well-shadow);
}
.tag-input::placeholder { color: var(--v-mute); }
/* Always present, never loud. It was opacity:0 until hover — a correction tool
   you have to discover by accident is a correction tool that doesn't exist. */
.turn-fix-toggle {
  flex: none; font-family: var(--mono); font-size: 12.5px; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--v-mute); padding: .1rem .4rem; opacity: .45; transition: opacity .12s, color .12s;
}
.turn:hover .turn-fix-toggle { opacity: .9; }
.turn-fix-toggle:hover { color: var(--v-fg); opacity: 1; }
.turn-fix-toggle.on { opacity: 1; color: var(--brand); border-color: var(--v-line-2); }

/* === Fix a turn ==========================================================
   Opens in place, under the turn it edits. CONTEXT, then controls: what sits
   above, what this is, what sits below — the real neighbours with their real
   sizes and real text.
   Context is NOT instruction (e-13 F, YOU-SAID STRONG: "i hate text that
   tries to TEACH me"). The first build of this panel wrote a sentence under
   every button explaining what the button did; that is the exact thing he
   named. Removed. A control shows WHAT IT WILL TOUCH — the neighbour's name,
   the line count, the live cost — and never what it means. */
.turn-fixhost:empty { display: none; }
.fx {
  margin: .6rem 0 .2rem; border: 1px solid var(--v-line-2); border-radius: var(--r);
  background: var(--v-panel); box-shadow: var(--well-shadow); user-select: none;
}
.fx-head {
  display: flex; align-items: baseline; gap: .5rem; padding: .45rem .7rem;
  border-bottom: 1px solid var(--v-line); background: var(--v-panel-2);
}
.fx-head .t {
  font-family: var(--mono); font-size: 12.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--v-fg);
}
.fx-head .sub { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.fx-head .spacer { flex: 1; }
.fx-x {
  border: 0; background: none; cursor: pointer; color: var(--v-mute);
  font-size: 16.5px; line-height: 1; padding: 0 .15rem;
}
.fx-x:hover { color: var(--v-fg); }

.fx-ctx { padding: .45rem .7rem; border-bottom: 1px solid var(--v-line); background: var(--v-well); }
.fx-nb {
  display: grid; grid-template-columns: 1.1rem 5.6rem 8.5rem 1fr; gap: .5rem;
  align-items: baseline; font-family: var(--mono); font-size: 12.5px;
  color: var(--v-mute); padding: .12rem 0;
}
.fx-nb .ar { color: var(--v-line-2); font-weight: 700; }
.fx-nb .k { font-weight: 700; color: var(--v-dim); }
.fx-nb .k.kind-message { color: var(--tok-user); }
.fx-nb .k.kind-response { color: var(--tok-model); }
.fx-nb .k.kind-tool_use, .fx-nb .k.kind-tool_result { color: var(--tok-tool); }
.fx-nb .n { color: var(--v-mute); font-variant-numeric: tabular-nums; }
.fx-nb .q { overflow: hidden; white-space: nowrap; font-style: italic; -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%); mask-image: linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%); }
.fx-nb.none .q { font-style: normal; }
.fx-nb.self {
  color: var(--v-fg); background: var(--v-panel-2);
  border-left: 3px solid var(--src, var(--brand)); margin: .15rem -.7rem;
  padding: .22rem .7rem .22rem calc(.7rem - 3px);
  grid-template-columns: 1.1rem 5.6rem 1fr auto;
}
.fx-nb.self .ar { color: var(--src, var(--brand)); }
.fx-nb.self .q { font-style: normal; color: var(--v-mute); text-align: right; }

.fx-sec { padding: .5rem .7rem; border-bottom: 1px solid var(--v-line); }
.fx-sec:last-child { border-bottom: 0; }
.fx-sec.row { display: flex; }
.fx-lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v-mute); margin-bottom: .35rem;
}
.fx-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 3px; }
.fx-kind, .fx-act {
  display: flex; align-items: baseline; gap: var(--s2); text-align: left; cursor: pointer;
  padding: var(--s2) var(--pad-ctl); border-radius: var(--r);
  border: 1px solid var(--v-line); background: var(--v-bg); color: var(--v-dim);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.fx-kind:hover:not(:disabled), .fx-act:hover:not(:disabled) {
  border-color: var(--brand); background: var(--brand-soft); color: var(--v-fg);
}
.fx-kind:active:not(:disabled), .fx-act:active:not(:disabled) { transform: translateY(1px); }
.fx-kind .kn, .fx-act .an {
  font-family: var(--mono); font-size: var(--fs-md); font-weight: 700; color: inherit;
  white-space: nowrap;
}
/* The only thing allowed beside an action name is the OBJECT it will touch. */
.fx-kind .kw, .fx-act .aw {
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.3; color: var(--v-mute);
  margin-left: auto; text-align: right; white-space: nowrap;
}
.fx-kind.on {
  border-color: var(--src, var(--brand)); background: var(--v-panel-2); color: var(--v-strong);
  box-shadow: inset 3px 0 0 var(--src, var(--brand));
}
.fx-kind:disabled, .fx-act:disabled { cursor: default; opacity: .45; }
.fx-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 3px; }
.fx-act.primary { border-color: color-mix(in srgb, var(--brand) 45%, var(--v-line)); }
.fx-act.on { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.fx-sec.row .fx-act { flex: 1; }
.fx-note {
  margin-top: .35rem; font-family: var(--mono); font-size: 12.5px; color: var(--danger);
}

/* === Split editor ========================================================
   The seam is a thing you SEE and MOVE. Full text, numbered lines, one bright
   rule between two of them; both halves costed live. */
.sp {
  margin: .5rem .7rem .7rem; border: 1px solid var(--brand);
  border-radius: var(--r); background: var(--v-bg); outline: none;
}
.sp:focus-visible { box-shadow: 0 0 0 2px var(--brand-soft); }
.sp-head {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  padding: .38rem .6rem; border-bottom: 1px solid var(--v-line); background: var(--brand-soft);
}
.sp-head .t {
  font-family: var(--mono); font-size: 12.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.sp-head .sub { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.sp-body {
  max-height: 24rem; overflow-y: auto; padding: .25rem 0;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  background: var(--v-well); box-shadow: var(--well-shadow);
}
.sp-line { display: flex; gap: .55rem; padding: 0 .6rem; cursor: pointer; }
.sp-line:hover { background: var(--v-panel-2); }
.sp-n {
  flex: none; width: 2.4rem; text-align: right; color: var(--v-line-2);
  font-size: 12.5px; user-select: none; padding-top: .12rem;
}
.sp-t { white-space: pre-wrap; word-break: break-word; min-width: 0; }
.sp-line.blank .sp-t { min-height: 1.05em; }
.sp-line.above .sp-t { color: var(--v-dim); }
.sp-line.below .sp-t { color: var(--v-fg); }
.sp-line.below .sp-n { color: color-mix(in srgb, var(--brand) 60%, var(--v-line-2)); }

/* The seam itself: unmissable, and the thing the arrow keys move. */
.sp-seam {
  display: flex; align-items: center; gap: .4rem; padding: .18rem .6rem;
  cursor: grab; user-select: none;
}
.sp-seam:active { cursor: grabbing; }
.sp-seam-l { flex: 1; height: 2px; background: var(--seam); border-radius: 1px; }
.sp-seam-lbl {
  flex: none; font-family: var(--mono); font-size: 11px; font-weight: 800;
  letter-spacing: .16em; color: #fff; background: var(--tok-user);
  border-radius: var(--r); padding: .1rem .4rem; white-space: nowrap;
}
.sp-seam-n { font-weight: 500; letter-spacing: .06em; opacity: .85; }
.sp-foot {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .4rem .6rem; border-top: 1px solid var(--v-line); background: var(--v-panel);
}
.sp-foot .spacer { flex: 1; }
.sp-stats { display: flex; gap: .9rem; flex-wrap: wrap; }
.sp-half {
  font-family: var(--mono); font-size: 12.5px; color: var(--v-mute);
  border-left: 2px solid var(--v-line-2); padding-left: .4rem;
}
.sp-half b {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v-dim); font-weight: 700;
}
.sp-half.new { border-left-color: var(--seam); }
.sp-half.new b { color: var(--seam); }
/* A split is rarely the goal — the half being cut off usually belongs to a
   neighbour. Those are peers of the plain split, not a follow-up step. */
.sp-go { display: flex; gap: 3px; flex-wrap: wrap; }

/* === Ryder's comments ====================================================
   His own note on the conversation, at the top, above everything the machine
   produced. Inline-edit in place (e-11: "content is always the control"). */
.tv-comments {
  margin: var(--s5) 0 0; border-left: 3px solid var(--tok-user);
  background: var(--tok-user-soft); border-radius: var(--r);
  padding: var(--s3) var(--s4);
}
.tv-comments-k {
  display: flex; align-items: baseline; gap: var(--s2);
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tok-user);
  margin-bottom: var(--gap-head);
}
.tv-comments-k .when { color: var(--v-mute); font-weight: 500; letter-spacing: .02em; text-transform: none; }
.tv-comments-b {
  font-size: var(--fs-md); line-height: 1.6; color: var(--v-fg); white-space: pre-wrap;
  cursor: text; min-height: 1.2em;
}
.tv-comments-b.empty { color: var(--v-mute); font-style: italic; }
.tv-comments textarea {
  width: 100%; box-sizing: border-box; min-height: 5rem; resize: vertical;
  font: inherit; font-size: var(--fs-md); line-height: 1.6;
  background: var(--v-bg); color: var(--v-fg);
  border: 1px solid var(--brand); border-radius: var(--r);
  padding: var(--s3); box-shadow: var(--well-shadow); outline: none;
}
.tv-comments-foot { display: flex; gap: var(--gap-ctl); margin-top: var(--s2); align-items: center; }
.tv-comments-foot .hint { font-family: var(--mono); font-size: var(--fs-xs); color: var(--v-mute); }

/* === Motion ==============================================================
   e-12: "animated data-changes STRONG (numbers travel)". The reference Ryder
   recorded grows its bars up from the baseline with an overshoot that settles.
   Bars are tweened in script (rAF) so the easing is the real spring; these
   rules carry everything else. */
@keyframes tv-rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tv-pop {
  0%   { opacity: 0; transform: scale(.55); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.an-tile { animation: tv-rise var(--t-slow) var(--ease-back) both; }
.an-lg-row { animation: tv-rise var(--t-mid) var(--ease-back) both; }
.an-heat-grid .hc { animation: tv-pop 320ms var(--ease-back) both; }
.an-compare { animation: tv-rise var(--t-slow) var(--ease) both; }
/* The stagger is what makes it read as one motion instead of a flash. */
.an-tiles > *:nth-child(1) { animation-delay: 0ms; }
.an-tiles > *:nth-child(2) { animation-delay: 22ms; }
.an-tiles > *:nth-child(3) { animation-delay: 44ms; }
.an-tiles > *:nth-child(4) { animation-delay: 66ms; }
.an-tiles > *:nth-child(5) { animation-delay: 88ms; }
.an-tiles > *:nth-child(6) { animation-delay: 110ms; }
.an-tiles > *:nth-child(7) { animation-delay: 132ms; }
.an-tiles > *:nth-child(8) { animation-delay: 154ms; }
.an-tiles > *:nth-child(9) { animation-delay: 176ms; }
.an-tiles > *:nth-child(10){ animation-delay: 198ms; }
.an-card { transition: none; }
.an-card-body { transition: height var(--t-slow) var(--ease-back); }
@media (prefers-reduced-motion: reduce) {
  .an-tile, .an-lg-row, .an-heat-grid .hc, .an-compare { animation: none; }
  .an-card-body { transition: none; }
}

/* === Annotation margin ==================================================== */
.tv-margin { position: absolute; top: 0; right: 30px; width: 224px; z-index: 6; pointer-events: none; }
.tv-scroll.has-annots .tv-doc { margin-right: 268px; }
.tv-page-library.console-open .tv-margin { display: none; }
.tv-page-library.console-open .tv-scroll.has-annots .tv-doc { margin-right: auto; }
.tv-annot-card, .tv-annot-composer {
  position: absolute; right: 0; width: 100%; pointer-events: auto;
  background: var(--v-panel); border: 1px solid var(--v-line); border-left: 3px solid var(--tok-user);
  border-radius: var(--r); box-shadow: var(--shadow-pop); padding: .55rem .65rem;
  transition: top .18s ease;
}
.tv-annot-card.flash { box-shadow: 0 0 0 2px var(--tok-user), var(--shadow-pop); }
.tv-annot-q { font-size: 12.5px; color: var(--v-mute); font-style: italic; line-height: 1.4;
  border-left: 2px solid var(--v-line-2); padding-left: .5rem; margin-bottom: .4rem; }
.tv-annot-b { font-size: 13.5px; color: var(--v-fg); line-height: 1.45; white-space: pre-wrap; }
.tv-annot-foot { display: flex; gap: .5rem; margin-top: .5rem; }
.tv-annot-mini { font-family: var(--mono); font-size: 12.5px; cursor: pointer; background: none;
  border: 1px solid var(--v-line); border-radius: var(--r); color: var(--v-mute); padding: .1rem .4rem; }
.tv-annot-mini:hover { color: var(--v-fg); border-color: var(--v-line-2); }
.tv-annot-mini.danger:hover { color: var(--danger); border-color: var(--danger); }
.tv-annot-composer .tv-annot-quote { font-size: 12.5px; color: var(--v-mute); font-style: italic;
  border-left: 2px solid var(--tok-user); padding-left: .5rem; margin-bottom: .5rem; }
.tv-annot-input { width: 100%; box-sizing: border-box; min-height: 3.5rem; resize: vertical;
  font: inherit; font-size: 13.5px; background: var(--v-well); color: var(--v-fg);
  border: 1px solid var(--v-line-2); border-radius: var(--r); padding: .45rem .55rem; box-shadow: var(--well-shadow); }
.tv-annot-input:focus { outline: none; border-color: var(--brand); }
.tv-annot-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.tv-annot-save { font-family: var(--mono); font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: var(--brand); color: #fff; border: 0; border-radius: var(--r); padding: .3rem .7rem; }
.tv-annot-cancel { font-family: var(--mono); font-size: 12.5px; cursor: pointer; background: none;
  border: 1px solid var(--v-line); border-radius: var(--r); color: var(--v-mute); padding: .3rem .6rem; }
mark.tv-annot-hl { background: var(--tok-user-soft); color: inherit; border-bottom: 2px solid color-mix(in srgb, var(--tok-user) 60%, transparent);
  border-radius: 1px; padding: 0 1px; cursor: pointer; transition: background .12s; }
mark.tv-annot-hl.active { background: color-mix(in srgb, var(--tok-user) 26%, transparent); }
.tv-sel-add {
  position: absolute; transform: translateX(-50%); z-index: 60;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: var(--brand); color: #fff; border: 0; border-radius: var(--r); padding: .3rem .6rem;
  box-shadow: var(--shadow-pop);
}
.annotatable { }

/* === Turn rail =========================================================== */
.tv-rail {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 3px; z-index: 4;
  max-height: 76vh; overflow: hidden; padding: 4px;
}
.tv-rail-dot { width: 12px; height: 6px; border-radius: 1px; cursor: pointer; border: none;
  background: var(--v-line-2); transition: background .15s, transform .12s, width .12s; }
.tv-rail-dot.message { background: color-mix(in srgb, var(--tok-user) 65%, var(--v-line-2)); }
.tv-rail-dot.response { background: color-mix(in srgb, var(--tok-model) 55%, var(--v-line-2)); }
.tv-rail-dot:hover { transform: scaleX(1.6); }
.tv-rail-dot.current { background: var(--tok-user); width: 18px; }

/* === Tag chips — square r2 tags ========================================== */
.tagrow { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tv-scope .tagchip {
  display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  padding: .14rem .45rem; border-radius: var(--r); background: var(--v-panel-2); color: var(--v-dim); border: 1px solid var(--v-line);
}
.tv-scope .tagchip.turn { color: var(--tok-model); border-color: color-mix(in srgb, var(--tok-model) 30%, transparent); }
.tv-scope .tagchip-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; opacity: .6; padding: 0; }
.tv-scope .tagchip-x:hover { opacity: 1; }
.tv-scope .tag-add {
  background: none; border: 1px dashed var(--v-line-2); border-radius: var(--r); color: var(--v-mute);
  font-family: var(--mono); font-size: 12.5px; padding: .14rem .45rem; cursor: pointer;
}
.tv-scope .tag-add:hover { color: var(--brand); border-color: var(--brand); }

/* === Aside: links + failures ============================================= */
.tv-aside { margin-top: 2.5rem; border-top: 1px solid var(--v-line); padding-top: 1.3rem; }
.tv-aside h3 { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--v-mute); margin: 0 0 .7rem; }
.tv-link {
  display: flex; gap: .6rem; align-items: baseline; padding: .5rem .7rem; border-radius: var(--r);
  background: var(--v-panel); border: 1px solid var(--v-line); margin-bottom: 4px; font-size: 15px; color: var(--v-fg);
}
.tv-link .k { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.tv-aside .fail-card {
  background: var(--v-panel); border: 1px solid color-mix(in srgb, var(--g-cli) 30%, var(--v-line));
  border-left: 3px solid var(--g-cli); border-radius: var(--r); padding: .85rem 1rem; margin-bottom: 5px;
}
.tv-aside .fail-what { font-weight: 700; color: var(--v-fg); }
.tv-aside .fail-line { font-size: 15px; color: var(--v-dim); margin-top: .3rem; }
.tv-aside .fail-line b { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; color: var(--v-mute); margin-right: .4rem; }

/* === View switch (Full | My prompts) — segmented strip =================== */
.tv-view {
  display: inline-flex; gap: 2px; padding: 2px; margin: 0 0 .9rem;
  border: 1px solid var(--v-line-2); border-radius: var(--r);
  background: var(--v-well); box-shadow: var(--well-shadow);
}
.tv-view-btn {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  padding: .24rem .75rem; border: 0; border-radius: var(--r);
  background: transparent; color: var(--v-mute); cursor: pointer; transition: color .12s, background .12s;
}
.tv-view-btn:hover { color: var(--v-fg); }
.tv-view-btn.on { background: var(--brand); color: #fff; }

/* === Token split ========================================================= */
.tok-split { margin: .8rem 0 .2rem; }
.tok-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--r); overflow: hidden; }
.tok-seg { height: 100%; border-radius: 1px; min-width: 2px; }
.tok-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.tok-key { display: inline-flex; align-items: center; gap: .4rem; letter-spacing: .03em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.tok-key b { color: var(--v-fg); font-weight: 800; }
.tok-key .tok-dot { width: 8px; height: 8px; border-radius: 1px; }
.tok-key.tok-user  .tok-dot { background: var(--tok-user); }
.tok-key.tok-user  b { color: var(--tok-user); }
.tok-key.tok-model .tok-dot { background: var(--tok-model); }
.tok-key.tok-tool  .tok-dot { background: var(--tok-tool); }
.tok-key .tok-pct { color: var(--v-mute); opacity: .8; }

/* === Prompts-only view =================================================== */
.tv-doc--prompts { max-width: 800px; }
.prompts-bar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 1.3rem; padding: .6rem .85rem;
  border: 1px solid color-mix(in srgb, var(--tok-user) 30%, var(--v-line));
  border-left: 3px solid var(--tok-user); border-radius: var(--r);
  background: var(--tok-user-soft);
}
.prompts-lead { flex: 1 1 auto; font-size: 13.5px; color: var(--v-dim); }
.prompts-stat { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.prompts-stat b { color: var(--tok-user); font-weight: 800; }
.prompts-copy {
  flex: none; font-family: var(--mono); font-size: 12.5px; cursor: pointer;
  background: var(--tok-user); color: #fff; border: 0; border-radius: var(--r); padding: .32rem .65rem; font-weight: 700;
}
.prompts-copy:hover { filter: brightness(1.06); }
.prompts-empty { color: var(--v-mute); font-family: var(--mono); padding: 2rem 0; }
.prompt-block { margin-bottom: 1.4rem; scroll-margin-top: 1.2rem; }
.prompt-num {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--v-dim); margin-bottom: .4rem; display: flex; align-items: center; gap: .55rem;
}
.prompt-num .prompt-label { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--v-mute); }
.prompt-num .prompt-tok { margin-left: auto; color: var(--tok-user); font-weight: 800; letter-spacing: 0; }
.prompt-raw {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--mono); font-size: 15px; line-height: 1.6; color: var(--v-fg);
  background: var(--tok-user-soft); border: 1px solid color-mix(in srgb, var(--tok-user) 18%, var(--v-line));
  border-left: 3px solid var(--tok-user); border-radius: var(--r); padding: .9rem 1.05rem;
}
.prompt-ai { margin: .8rem 0 .8rem 1.1rem; padding: .45rem .75rem; border-left: 2px dashed var(--v-line-2); color: var(--v-mute); }
.prompt-ai .pai-k {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--v-mute); margin-bottom: .2rem;
}
.prompt-ai .pai-s { font-size: 13.5px; line-height: 1.5; color: var(--v-dim); font-style: italic; }

/* === Console column ====================================================== */
.tv-console {
  grid-column: 3; min-height: 0; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); border-left: 1px solid var(--v-line); overflow: hidden;
}
.tv-console[hidden] { display: none; }
.tv-console-head {
  flex: none; display: flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
}
.tv-console-title { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.tv-console-sub { font-family: var(--mono); font-size: 12.5px; color: var(--fg-mute); }
.tv-console-x {
  flex: none; border: 1px solid var(--hairline); background: var(--bg);
  color: var(--fg-mute); cursor: pointer; width: 26px; height: 26px; border-radius: var(--r);
  font-size: 16.5px; line-height: 1; display: grid; place-items: center;
}
.tv-console-x:hover { color: var(--fg); border-color: var(--fg-mute); }
.tv-console .ag-shell { flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; }

/* === Analytics page ====================================================== */
.tv-page-analytics, .tv-page-history { overflow-y: auto; }
.tv-an-inner, .tv-hi-inner { max-width: 1060px; margin: 0 auto; padding: 1.3rem 1.6rem 5rem; }
.an-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .9rem; flex-wrap: wrap; }
.an-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.an-head .sub { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.an-head .spacer { flex: 1; }
/* Stat tiles — bounded, dense, numeric emphasis. */
.an-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; margin-bottom: 1rem; }
.an-tile {
  background: var(--v-panel); border: 1px solid var(--v-line);
  border-left: 3px solid var(--tile, var(--v-line-2)); border-radius: var(--r);
  padding: .55rem .75rem .6rem;
}
.an-tile .k {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v-mute);
}
.an-tile .v { font-family: var(--mono); font-size: 26px; font-weight: 800; color: var(--v-fg); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.an-tile .d { font-family: var(--mono); font-size: 11px; color: var(--v-mute); margin-top: .1rem; }
/* Cards — capped panels. */
.an-card { background: var(--v-panel); border: 1px solid var(--v-line); border-radius: var(--r); margin-bottom: 1rem; }
.an-card-head {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .5rem .8rem; border-bottom: 1px solid var(--v-line);
}
.an-card-head .t {
  font-family: var(--mono); font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v-dim);
}
.an-card-head .sub { font-family: var(--mono); font-size: 11px; color: var(--v-mute); }
.an-card-head .spacer { flex: 1; }
.an-card-body { padding: .8rem; }
/* Segmented range control. */
.an-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--v-line-2); border-radius: var(--r); background: var(--v-well); box-shadow: var(--well-shadow); }
.an-seg button {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; padding: .18rem .55rem;
  border: 0; border-radius: var(--r); background: transparent; color: var(--v-mute); cursor: pointer;
}
.an-seg button:hover { color: var(--v-fg); }
.an-seg button.on { background: var(--brand); color: #fff; }
/* An option that can't coexist with the current selection is erased, not
   merely dimmed-but-clickable. */
.an-seg button:disabled { opacity: .3; cursor: not-allowed; }
.an-seg button:disabled:hover { color: var(--v-mute); }
.tv-mini-btn:disabled { opacity: .3; cursor: not-allowed; }
select option:disabled { color: var(--v-mute); }
/* Chart */
.an-chart-wrap { position: relative; }
.an-chart-wrap svg { display: block; width: 100%; height: auto; }
.an-chart-wrap svg text { font-family: var(--num); font-size: 12.5px; fill: var(--v-mute); }
/* Tooltip: a small table, not a sentence — every series present that day with
   its own swatch, then the day's total under a rule. */
.an-chart-tip {
  position: absolute; pointer-events: none; z-index: 5; transform: translate(-50%, 0);
  background: var(--v-panel); border: 1px solid var(--v-line-2); border-radius: var(--r);
  box-shadow: var(--shadow-pop); padding: .4rem .55rem; white-space: nowrap;
  font-family: var(--mono); font-size: 12.5px; color: var(--v-dim); min-width: 10rem;
}
.an-chart-tip .tt-h {
  font-weight: 800; color: var(--v-strong); font-size: 12.5px; margin-bottom: .25rem;
}
.an-chart-tip .tt-r { display: flex; align-items: center; gap: .4rem; line-height: 1.6; }
.an-chart-tip .tt-r i { width: 7px; height: 7px; border-radius: 1px; flex: none; }
.an-chart-tip .tt-r span { flex: 1; }
.an-chart-tip .tt-r b { color: var(--v-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.an-chart-tip .tt-r.quiet { color: var(--v-mute); }
.an-chart-tip .tt-f {
  margin-top: .3rem; padding-top: .25rem; border-top: 1px solid var(--v-line);
  color: var(--v-mute); font-size: 12.5px;
}
.an-chart-tip[hidden] { display: none; }
.an-empty { color: var(--v-mute); font-family: var(--mono); font-size: 12.5px; padding: 1rem .2rem; }

/* Chart legend — doubles as the model ledger in Models mode. */
.an-legend { display: flex; flex-direction: column; gap: 1px; margin-top: .7rem; }
.an-lg-row {
  display: grid; grid-template-columns: 9px minmax(6rem, 12rem) 1fr auto;
  gap: .6rem; align-items: baseline; padding: .18rem .15rem;
  font-family: var(--mono); font-size: 12.5px; color: var(--v-mute);
  font-variant-numeric: tabular-nums;
}
.an-lg-row:hover { background: var(--v-panel-2); }
.an-lg-row i { width: 9px; height: 9px; border-radius: 1px; align-self: center; }
.an-lg-row .nm { color: var(--v-fg); font-weight: 700; }
.an-lg-row .io { text-align: right; }
.an-lg-row .pc { color: var(--v-strong); font-weight: 800; min-width: 3.4rem; text-align: right; }

/* Activity calendar — weeks across, weekdays down. Intensity is quantile-cut,
   so a corpus with one enormous day still shows texture on the ordinary ones. */
.an-heat-wrap { overflow-x: auto; }
.an-heat-inner { display: flex; gap: 5px; align-items: flex-start; min-width: min-content; }
.an-heat-days {
  display: grid; grid-template-rows: repeat(7, 1fr); gap: 2px; flex: none;
  font-family: var(--mono); font-size: 11px; color: transparent; padding-top: 1px;
}
.an-heat-days span { line-height: 11px; height: 11px; }
.an-heat-days span.on { color: var(--v-mute); }
.an-heat-grid {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px);
  gap: 2px; flex: 1; min-width: 0;
}
.an-heat-grid .hc, .an-heat-scale .hc {
  display: block; height: 11px; min-width: 6px; border-radius: 1px;
  background: color-mix(in srgb, var(--v-mute) 16%, transparent);
}
.an-heat-grid .hc.pad { background: none; }
.hc.l0 { background: color-mix(in srgb, var(--v-mute) 16%, transparent); }
.hc.l1 { background: color-mix(in srgb, var(--brand) 26%, transparent); }
.hc.l2 { background: color-mix(in srgb, var(--brand) 45%, transparent); }
.hc.l3 { background: color-mix(in srgb, var(--brand) 66%, transparent); }
.hc.l4 { background: color-mix(in srgb, var(--brand) 85%, transparent); }
.hc.l5 { background: var(--brand); }
.an-heat-scale {
  display: flex; align-items: center; gap: 3px; margin-top: .55rem;
  font-family: var(--mono); font-size: 11px; color: var(--v-mute);
}
.an-heat-scale .hc { width: 11px; min-width: 11px; }
.an-heat-scale span:first-child { margin-right: .2rem; }
.an-heat-scale span:last-child { margin-left: .2rem; }
.an-compare {
  margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--v-line);
  font-size: 13.5px; line-height: 1.5; color: var(--v-dim);
}
.an-compare b { color: var(--v-strong); font-weight: 800; font-family: var(--mono); }

/* Monthly ledger — alignment is the structure; no internal rules. */
.an-months { display: grid; grid-template-columns: auto 1fr repeat(6, auto); gap: 3px 1.1rem; align-items: center; font-variant-numeric: tabular-nums; }
.an-months .hd {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v-mute); padding-bottom: .2rem;
}
.an-months .hd.r { text-align: right; }
.an-months .mo { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--v-fg); }
.an-months .bar { display: flex; gap: 2px; height: 7px; border-radius: var(--r); overflow: hidden; min-width: 60px; }
.an-months .bar .seg { height: 100%; border-radius: 1px; min-width: 1px; }
.an-months .num { font-family: var(--mono); font-size: 12.5px; color: var(--v-dim); text-align: right; }
.an-months .num.u { color: var(--tok-user); font-weight: 700; }
.an-months .num.q { color: var(--v-mute); }
/* Projects */
.an-proj { display: flex; flex-direction: column; gap: 4px; }
.an-proj-row {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto auto auto; gap: .9rem;
  align-items: center; padding: .45rem .6rem;
  background: var(--v-bg); border: 1px solid var(--v-line); border-left: 3px solid var(--brand);
  border-radius: var(--r);
}
.an-proj-row .nm { font-weight: 700; font-size: 15px; color: var(--v-fg); display: flex; align-items: center; gap: .5rem; }
.an-proj-row .nm .x { border: 0; background: none; color: var(--v-mute); cursor: pointer; font-size: 15px; padding: 0; opacity: 0; }
.an-proj-row:hover .nm .x { opacity: .7; }
.an-proj-row .nm .x:hover { color: var(--danger); opacity: 1; }
.an-proj-row .wbar { height: 7px; border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, var(--v-mute) 15%, transparent); }
.an-proj-row .wbar i { display: block; height: 100%; background: var(--brand); border-radius: 1px; }
.an-proj-row .num { font-family: var(--mono); font-size: 12.5px; color: var(--v-dim); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-proj-row .num.u { color: var(--tok-user); font-weight: 700; }
.an-proj-note { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); margin-top: .6rem; line-height: 1.5; }
.an-proj-tools { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }
.an-proj-tools input {
  font: inherit; font-size: 13.5px; padding: .3rem .5rem; flex: 1 1 14rem;
  background: var(--v-well); color: var(--v-fg); border: 1px solid var(--v-line-2);
  border-radius: var(--r); box-shadow: var(--well-shadow);
}
.an-proj-tools input:focus { outline: none; border-color: var(--brand); }
/* Ghost preview empty state (shape, not lessons). */
.an-ghost { display: flex; flex-direction: column; gap: 4px; padding: .3rem 0 .5rem; }
.an-ghost i { display: block; height: 26px; border: 1px dashed var(--v-line-2); border-radius: var(--r); opacity: .7; }
.an-ghost i:nth-child(2) { opacity: .45; } .an-ghost i:nth-child(3) { opacity: .25; }

/* === History page ======================================================== */
.hi-list { display: flex; flex-direction: column; gap: 3px; }
.hi-row {
  display: grid; grid-template-columns: 92px 138px 1fr auto; gap: .9rem; align-items: baseline;
  padding: .4rem .65rem; background: var(--v-panel); border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-line-2); border-radius: var(--r); cursor: pointer;
}
.hi-row:hover { border-color: var(--v-line-2); }
.hi-row.found { border-left-color: var(--tok-model); }
.hi-row.miss { border-left-color: var(--v-line-2); }
.hi-row .ago { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); white-space: nowrap; }
.hi-row .tool {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--v-dim); white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%); mask-image: linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%);
}
.hi-row .q { font-size: 13.5px; color: var(--v-fg); overflow: hidden; white-space: nowrap; min-width: 0; -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%); mask-image: linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%); }
.hi-row .q .quiet { color: var(--v-mute); font-style: italic; }
.hi-row .res { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hi-row .res.hit { color: var(--tok-model); font-weight: 700; }
.hi-row .res.none { color: var(--v-mute); }
.hi-detail {
  grid-column: 1 / -1; border-top: 1px solid var(--v-line); margin-top: .35rem; padding-top: .4rem;
  font-family: var(--mono); font-size: 12.5px; color: var(--v-dim); line-height: 1.55;
  display: flex; flex-direction: column; gap: .15rem; cursor: default;
}
.hi-detail .k { color: var(--v-mute); margin-right: .45rem; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.hi-detail a { color: var(--tok-model); }

/* === Overlays (import / threads) — transients, so elevation ============== */
.tv-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: color-mix(in srgb, var(--v-strong) 38%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.tv-overlay[hidden] { display: none; }
.tv-overlay-panel {
  width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--v-bg); color: var(--v-fg);
  border: 1px solid var(--v-line-2); border-radius: var(--r); box-shadow: var(--shadow-pop);
  animation: tv-pop .16s ease;
}
@keyframes tv-pop { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.tv-overlay-head {
  flex: none; display: flex; align-items: center; gap: .7rem;
  padding: .65rem .95rem; border-bottom: 1px solid var(--v-line); background: var(--v-panel);
}
.tv-overlay-head .t { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.tv-overlay-head .sub { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.tv-overlay-x {
  margin-left: auto; flex: none; border: 1px solid var(--v-line); background: var(--v-panel-2);
  color: var(--v-mute); font-size: 16.5px; line-height: 1; cursor: pointer;
  width: 26px; height: 26px; border-radius: var(--r);
}
.tv-overlay-x:hover { color: var(--v-fg); border-color: var(--v-mute); }
.tv-overlay-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.1rem 1.3rem; }

/* Paste (import-from-clipboard) */
.paste-src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 5px; }
.src-btn {
  font-family: var(--mono); font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  padding: .7rem .5rem; cursor: pointer;
  border: 1px solid var(--v-line); border-left: 3px solid transparent; border-radius: var(--r);
  background: var(--v-panel); color: var(--v-dim); transition: border-color .12s, color .12s;
}
.src-btn:hover { color: var(--v-fg); border-color: var(--v-line-2); }
.src-btn.selected {
  color: var(--brand); border-color: var(--brand); border-left-color: var(--brand);
  background: var(--brand-soft);
}
.paste-text {
  width: 100%; box-sizing: border-box; margin-top: .8rem; resize: vertical; min-height: 10rem;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
  padding: .7rem .85rem; border-radius: var(--r);
  border: 1px solid var(--v-line); background: var(--v-well); color: var(--v-fg); box-shadow: var(--well-shadow);
}
.paste-text:focus { outline: none; border-color: var(--brand); }
.paste-fields { display: flex; gap: 1.1rem; align-items: flex-end; flex-wrap: wrap; margin-top: .8rem; }
.ic-field { display: flex; flex-direction: column; gap: .3rem; }
.ic-label { font-size: 13.5px; font-weight: 600; color: var(--v-dim); }
.ic-label em { color: var(--v-mute); font-style: normal; font-weight: 500; }
.ic-field input, .ic-field select {
  font: inherit; font-size: 15px; padding: .4rem .55rem; border-radius: var(--r);
  border: 1px solid var(--v-line); background: var(--v-well); color: var(--v-fg); box-shadow: var(--well-shadow);
}
.ic-field input:focus, .ic-field select:focus { outline: none; border-color: var(--brand); }
.paste-title-field { flex: 1 1 16rem; }
.paste-title-field input { width: 100%; box-sizing: border-box; }
.ic-check { display: flex; align-items: center; gap: .45rem; font-size: 13.5px; color: var(--v-dim); cursor: pointer; }
.tv-cta {
  margin-top: .9rem; width: 100%; padding: .7rem 1rem; cursor: pointer;
  font-family: var(--ui); font-size: 15px; font-weight: 800; border-radius: var(--r);
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
}
.tv-cta:hover { filter: brightness(1.05); }
.tv-cta:disabled { opacity: .45; cursor: not-allowed; }

/* File import */
.import-drop {
  border: 1px dashed var(--v-line-2); border-radius: var(--r); background: var(--v-panel);
  padding: 1.6rem 1rem; text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
}
.import-drop:hover, .import-drop.drag { border-color: var(--brand); background: var(--brand-soft); }
.import-drop .big { font-weight: 700; font-size: 15px; }
.import-drop .small { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); margin-top: .3rem; }
.import-confirm { margin-top: .9rem; border: 1px solid var(--v-line-2); border-radius: var(--r); background: var(--v-panel); overflow: hidden; }
.import-confirm[hidden] { display: none; }
.import-confirm-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; border-bottom: 1px solid var(--v-line); }
.ic-count { font-weight: 700; font-size: 15px; }
.ic-x { margin-left: auto; border: 0; background: transparent; color: var(--v-mute); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.ic-x:hover { color: var(--v-fg); }
.import-confirm-body { padding: .85rem; display: flex; flex-direction: column; gap: .8rem; }
.import-confirm-actions { display: flex; gap: .55rem; padding: 0 .85rem .85rem; }
.import-log { margin-top: .9rem; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.import-log-row {
  display: flex; gap: .55rem; align-items: baseline; padding: .35rem .6rem;
  background: var(--v-panel); border: 1px solid var(--v-line); border-radius: var(--r);
}
.import-log-row .ok { color: var(--ok); font-weight: 700; }
.import-log-row .err { color: var(--tok-user); font-weight: 700; }
.import-log-row .warn { color: var(--flag); font-weight: 700; }
.import-log-row a { color: var(--tok-model); }

/* Threads manager */
.tx-toolbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .7rem;
  font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); }
.tx-list { display: flex; flex-direction: column; gap: 4px; }
.tx-card { background: var(--v-panel); border: 1px solid var(--v-line); border-radius: var(--r); padding: .55rem .7rem; }
.tx-top { display: flex; align-items: center; gap: .55rem; }
.tx-title { flex: 1 1 auto; font-weight: 650; font-size: 15px; min-width: 0; }
.tx-title a { color: var(--v-fg); text-decoration: none; }
.tx-title a:hover { color: var(--brand); }
.tx-src {
  font-family: var(--mono); font-size: 12.5px; background: var(--v-panel-2); color: var(--v-dim);
  border: 1px solid var(--v-line) !important; border-radius: var(--r); padding: .1rem .3rem;
}
.tx-meta { font-family: var(--mono); font-size: 12.5px; color: var(--v-mute); margin: .3rem 0; }
.tx-actions { display: flex; gap: .45rem; margin-top: .4rem; }
.crud-mini {
  font-family: var(--mono); font-size: 12.5px; cursor: pointer; text-decoration: none;
  background: none; border: 1px solid var(--v-line-2); border-radius: var(--r); color: var(--v-dim); padding: .15rem .5rem;
}
.crud-mini:hover { color: var(--v-fg); border-color: var(--v-mute); }
.crud-mini.danger:hover { color: var(--danger); border-color: var(--danger); }
.crud-empty { color: var(--v-mute); font-family: var(--mono); font-size: 13.5px; }

/* Scrollbars */
.tv-filters::-webkit-scrollbar, .tv-list::-webkit-scrollbar, .tv-scroll::-webkit-scrollbar,
.tv-page-analytics::-webkit-scrollbar, .tv-page-history::-webkit-scrollbar,
.tv-overlay-body::-webkit-scrollbar,
.turn-body pre::-webkit-scrollbar, .turn.kind-tool_result pre.raw::-webkit-scrollbar {
  width: 8px; height: 8px;
}
.tv-filters::-webkit-scrollbar-thumb, .tv-list::-webkit-scrollbar-thumb, .tv-scroll::-webkit-scrollbar-thumb,
.tv-page-analytics::-webkit-scrollbar-thumb, .tv-page-history::-webkit-scrollbar-thumb,
.tv-overlay-body::-webkit-scrollbar-thumb,
.turn-body pre::-webkit-scrollbar-thumb, .turn.kind-tool_result pre.raw::-webkit-scrollbar-thumb {
  background: var(--v-line-2); border-radius: 2px;
}

@media (max-width: 900px) {
  body.tv-scope { overflow: auto; }
  .tv-top { flex-wrap: wrap; height: auto; padding: .35rem .6rem; gap: .35rem; }
  .tv-page-library, .tv-page-library.console-open { display: flex; flex-direction: column; }
  .tv-side { max-height: 42vh; border-right: none; border-bottom: 1px solid var(--v-line); }
  .tv-main { overflow: visible; }
  .tv-scroll { overflow: visible; }
  .tv-rail, .tv-margin, .tv-console { display: none; }
  .tv-doc, .tv-scroll.has-annots .tv-doc { padding: 1.2rem 1rem 30vh; margin-right: auto; }
  .turn.role-user { margin-right: 0; }
  .hi-row { grid-template-columns: 80px 1fr auto; }
  .hi-row .tool { display: none; }
}