/* ===========================================================================
   Separacja mowy · PolSESS — showcase webapp
   Design tokens and components lifted from the accepted mockup
   (docs/fable_plans/frontends_road1_webapp.md §5 + road1_ui_mockup.html).
   Light and dark: prefers-color-scheme by default, [data-theme] wins.
   =========================================================================== */

:root {
  --bg: #f6f8fa; --surface: #ffffff; --ink: #1f2328; --muted: #59636e;
  --line: #d1d9e0; --line-soft: #e7ebef;
  --spkA: #1f6feb; --spkB: #e36209; --spkC: #8250df; --spkD: #1a7f37;
  --spkA-soft: rgba(31,111,235,.10); --spkB-soft: rgba(227,98,9,.10);
  --spkC-soft: rgba(130,80,223,.10); --spkD-soft: rgba(26,127,55,.10);
  --ovl: rgba(207,34,46,.15); --ovl-line: rgba(207,34,46,.45);
  --ok: #1a7f37; --fail: #cf222e;
  --warn-bg: #fff8c5; --warn-border: #d4a72c; --warn-ink: #6a4e00;
  --fail-bg: #ffebe9; --fail-border: #ff818266;
  --note: #6e7781; --chip-bg: #eef1f4;
  --strat-low-bg: rgba(26,127,55,.12); --strat-low-ink: #1a7f37;
  --strat-mid-bg: rgba(212,167,44,.20); --strat-mid-ink: #8a6100;
  --strat-high-bg: rgba(207,34,46,.12); --strat-high-ink: #cf222e;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --page: 1760px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --surface: #161b22; --ink: #e6edf3; --muted: #8d96a0;
    --line: #30363d; --line-soft: #21262d;
    --spkA: #539bf5; --spkB: #f0883e; --spkC: #b083f0; --spkD: #3fb950;
    --spkA-soft: rgba(83,155,245,.14); --spkB-soft: rgba(240,136,62,.14);
    --spkC-soft: rgba(176,131,240,.16); --spkD-soft: rgba(63,185,80,.16);
    --ovl: rgba(248,81,73,.20); --ovl-line: rgba(248,81,73,.55);
    --ok: #3fb950; --fail: #f85149;
    --warn-bg: #2d2410; --warn-border: #9e6a03; --warn-ink: #e3b341;
    --fail-bg: #2b1416; --fail-border: #f8514966;
    --note: #8d96a0; --chip-bg: #21262d;
    --strat-low-bg: rgba(63,185,80,.16); --strat-low-ink: #3fb950;
    --strat-mid-bg: rgba(227,179,65,.16); --strat-mid-ink: #e3b341;
    --strat-high-bg: rgba(248,81,73,.16); --strat-high-ink: #f85149;
  }
}
:root[data-theme="light"] {
  --bg: #f6f8fa; --surface: #ffffff; --ink: #1f2328; --muted: #59636e;
  --line: #d1d9e0; --line-soft: #e7ebef;
  --spkA: #1f6feb; --spkB: #e36209; --spkC: #8250df; --spkD: #1a7f37;
  --spkA-soft: rgba(31,111,235,.10); --spkB-soft: rgba(227,98,9,.10);
  --spkC-soft: rgba(130,80,223,.10); --spkD-soft: rgba(26,127,55,.10);
  --ovl: rgba(207,34,46,.15); --ovl-line: rgba(207,34,46,.45);
  --ok: #1a7f37; --fail: #cf222e;
  --warn-bg: #fff8c5; --warn-border: #d4a72c; --warn-ink: #6a4e00;
  --fail-bg: #ffebe9; --fail-border: #ff818266;
  --note: #6e7781; --chip-bg: #eef1f4;
  --strat-low-bg: rgba(26,127,55,.12); --strat-low-ink: #1a7f37;
  --strat-mid-bg: rgba(212,167,44,.20); --strat-mid-ink: #8a6100;
  --strat-high-bg: rgba(207,34,46,.12); --strat-high-ink: #cf222e;
}
:root[data-theme="dark"] {
  --bg: #0d1117; --surface: #161b22; --ink: #e6edf3; --muted: #8d96a0;
  --line: #30363d; --line-soft: #21262d;
  --spkA: #539bf5; --spkB: #f0883e; --spkC: #b083f0; --spkD: #3fb950;
  --spkA-soft: rgba(83,155,245,.14); --spkB-soft: rgba(240,136,62,.14);
    --spkC-soft: rgba(176,131,240,.16); --spkD-soft: rgba(63,185,80,.16);
  --ovl: rgba(248,81,73,.20); --ovl-line: rgba(248,81,73,.55);
  --ok: #3fb950; --fail: #f85149;
  --warn-bg: #2d2410; --warn-border: #9e6a03; --warn-ink: #e3b341;
  --fail-bg: #2b1416; --fail-border: #f8514966;
  --note: #8d96a0; --chip-bg: #21262d;
  --strat-low-bg: rgba(63,185,80,.16); --strat-low-ink: #3fb950;
  --strat-mid-bg: rgba(227,179,65,.16); --strat-mid-ink: #e3b341;
  --strat-high-bg: rgba(248,81,73,.16); --strat-high-ink: #f85149;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  overflow-x: hidden;
}
a { color: var(--spkA); }
button { font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--spkA); outline-offset: 2px; }

/* Wide layout: the transcript columns and the timeline are the whole point of
   this UI and both read better with room. Prose keeps its own measure below. */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px 80px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.scroll-x { overflow-x: auto; }

/* ── top bar ──────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  max-width: var(--page); margin: 0 auto; padding: 26px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 20px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.topbar h1 a { color: inherit; text-decoration: none; }
.topbar .sub { color: var(--muted); font-size: 13.5px; }
.topbar nav { margin-left: auto; font-size: 14px; display: flex; gap: 16px; align-items: baseline; }
.topbar nav a { color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.topbar nav a.active { color: var(--ink); border-bottom-color: var(--spkA); }
.themebtn {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 6px; padding: 2px 9px; font-size: 12.5px; cursor: pointer;
}

/* ── cards ────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 18px 20px; margin-top: 14px;
}
.card h2 {
  font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.card h2 .h2sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 10px; }
.card h2.h2row { display: flex; align-items: baseline; gap: 10px; }
.card h2 .h2gap { flex: 1; }
/* Explanatory prose keeps a readable measure even on a 1760 px page. */
.lead { color: var(--muted); font-size: 13.5px; margin: 14px 2px 0; max-width: 72ch; }

/* ── chips / banners / provenance ─────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  background: var(--chip-bg); border-radius: 999px; padding: 3px 12px;
  font-size: 12.5px; color: var(--ink);
}
.chip b { font-variant-numeric: tabular-nums; }
.chip.accent { color: var(--spkA); }
.filename { font-weight: 650; word-break: break-all; }
.banner {
  margin-top: 12px; background: var(--warn-bg); border: 1px solid var(--warn-border);
  color: var(--warn-ink); border-radius: 6px; padding: 8px 14px; font-size: 13px;
}
.banner.info { background: var(--chip-bg); border-color: var(--line); color: var(--muted); }
.prov {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  margin-top: 12px; overflow-x: auto; white-space: nowrap;
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 6px; padding: 7px 15px; font-size: 13.5px; cursor: pointer;
}
.btn:hover { border-color: var(--spkA); }
.btn.primary { background: var(--spkA); border-color: var(--spkA); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.small { padding: 4px 11px; font-size: 12.5px; }
/* A destructive action that must not compete with "Start": muted until hovered. */
.quietbtn {
  background: none; border: none; padding: 0; cursor: pointer; color: var(--muted);
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .04em; text-transform: none;
  font-weight: 400;
}
.quietbtn:hover { color: var(--fail); }
.quietbtn[disabled] { opacity: .5; cursor: default; }
.clearnote { color: var(--muted); font-size: 11.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ── status pills ─────────────────────────────────────────────────────── */
.pill {
  font-size: 11.5px; border-radius: 999px; padding: 2px 10px;
  border: 1px solid var(--line); color: var(--muted); background: var(--chip-bg);
  white-space: nowrap;
}
.pill.running { color: var(--spkA); border-color: var(--spkA); background: var(--spkA-soft); }
.pill.done { color: var(--ok); border-color: var(--ok); background: transparent; }
.pill.failed { color: var(--fail); border-color: var(--fail); background: transparent; }

/* ── home: upload ─────────────────────────────────────────────────────── */
.drop {
  border: 2px dashed var(--line); border-radius: 10px; padding: 34px 20px;
  text-align: center; background: var(--bg); transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--spkA); background: var(--spkA-soft); }
.drop .big { font-size: 15.5px; margin-bottom: 4px; }
.drop .hint { color: var(--muted); font-size: 13px; margin: 8px auto 16px; max-width: 72ch; }
.drop input[type="file"] { display: none; }

/* ── home: the chosen-but-not-yet-sent file ───────────────────────────── */
.pending {
  margin-top: 14px; border: 1px solid var(--spkA); border-radius: 8px;
  background: var(--spkA-soft); padding: 12px 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pending .pmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pending .pactions { display: flex; gap: 8px; margin-left: auto; }
.pending .lead { margin: 0; flex: 1 1 100%; color: var(--fail); }

/* ── home: recent jobs ────────────────────────────────────────────────── */
.joblist { display: flex; flex-direction: column; }
.joblist .row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 9px 2px; border-top: 1px solid var(--line-soft); font-size: 13.5px;
}
.joblist .row:first-child { border-top: none; }
.joblist .row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joblist .row .nm a { text-decoration: none; }
.joblist .row .nm a:hover { text-decoration: underline; }
.joblist .row .when { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }

/* ── stage chain ──────────────────────────────────────────────────────── */
.stage { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.chain .stage:first-child { border-top: none; }
.stage .ic { width: 18px; text-align: center; flex: none; font-size: 13px; line-height: 1.5; }
.stage .ic.ok { color: var(--ok); }
.stage .ic.pend { color: var(--line); }
.stage .ic.bad { color: var(--fail); }
.stage .body { min-width: 0; flex: 1; }
.stage .nm { font-family: var(--mono); font-size: 12.5px; }
.stage .st { font-size: 12px; color: var(--muted); }
.stage .st .split { font-family: var(--mono); font-size: 11.5px; }
.stage.running {
  border-left: 2px solid var(--spkA); margin: 0 -20px; padding: 8px 20px 8px 18px;
  background: var(--spkA-soft); border-radius: 4px;
}
.stage.running .nm { font-weight: 650; }
.stage.running .live { color: var(--spkA); font-size: 12px; }
.stage.failed { border-left: 2px solid var(--fail); margin: 0 -20px; padding: 8px 20px 8px 18px; }
.shimmer { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .shimmer::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    animation: sh 2.4s ease-in-out infinite;
  }
  @keyframes sh { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
}
.eta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 12px; font-size: 13px; color: var(--muted);
}
.eta .t { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── timeline ─────────────────────────────────────────────────────────── */
.tl { --tl-gutter: 118px; --tl-gap: 10px; position: relative; margin-top: 6px; }
/* The scrollport is inert at 1×: the inner block is exactly 100% wide, none of
   the `.zoomed` rules apply, and `hidden` guarantees no scrollbar can appear
   from the sub-pixel overflow a min-width bar or a ruler half-leading leaves. */
.tl .port { overflow: hidden; overscroll-behavior-x: contain; }
.tl.zoomed .port { overflow-x: auto; }
.tl .inner { width: 100%; }
.tl .field { position: relative; }
/* Flex, not grid: a grid item's containing block is its own grid area, so a
   sticky label would have nowhere to travel while the field is panned. */
.tl .lane { display: flex; align-items: center; gap: var(--tl-gap); padding: 4px 0; }
.tl .lab {
  width: var(--tl-gutter); flex: none;
  font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 2px 7px;
  justify-content: flex-end; text-align: right; overflow: hidden;
  /* The name + SPEAKER_xx id together outgrow the gutter: wrap onto two lines
     ("Mówca A" / id + dot) instead of letting flex shrink clip the name. */
  flex-wrap: wrap;
}
.tl .lab .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tl .lab .id { font-family: var(--mono); font-size: 10.5px; }
.tl .track { flex: 1 1 0; min-width: 0; position: relative; height: 22px; background: var(--bg); border-radius: 4px; }
.tl .track.wf { height: 44px; }
.tl .bar { position: absolute; top: 4px; bottom: 4px; border-radius: 3px; min-width: 1px; }
.tl canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl .overlay {
  position: absolute; top: 0; bottom: 0; left: calc(var(--tl-gutter) + var(--tl-gap)); right: 0;
  pointer-events: none;
}
.tl .ovl-band {
  position: absolute; top: 0; bottom: 0; min-width: 1px;
  background: var(--ovl); border-left: 1px solid var(--ovl-line); border-right: 1px solid var(--ovl-line);
}
.tl .playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fail); opacity: .75; }
.tl.seekable .field { cursor: pointer; }
.ruler { display: flex; gap: var(--tl-gap); margin-top: 2px; }
.ruler .rgut { width: var(--tl-gutter); flex: none; }
.ruler .marks { flex: 1 1 0; min-width: 0; position: relative; height: 18px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.ruler .mk { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
/* A tick exactly on the end would overflow the scrollport and make 1× scrollable. */
.ruler .mk.end { transform: translateX(-100%); }
.ruler .mk::before { content: ""; display: block; width: 1px; height: 4px; background: var(--line); margin: 0 auto 1px; }
.ruler .mk.end::before { margin: 0 0 1px auto; }
.legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend .sw { display: inline-block; width: 12px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }

/* zoom control + panning. The gutter is a fixed-px column inside the zoomed
   block, so it is pinned while panning; its box-shadow paints over the flex gap
   that would otherwise let bars slide into view beside the labels. */
.zoomctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 11.5px; }
.zoomctl .seg button { padding: 2px 9px; font-size: 11.5px; font-family: var(--mono); }
.tl.zoomed .lab, .tl.zoomed .rgut {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface); box-shadow: var(--tl-gap) 0 0 var(--surface);
}
@media (max-width: 640px) { .tl { --tl-gutter: 74px; } }

/* ── transport ────────────────────────────────────────────────────────── */
/* Row 1 is play + clock + seek (the seek takes whatever is left); the stream
   selector and the volume moved to row 2 so the seek is never squeezed. */
.transport { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.transport2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.vol { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-left: auto; }
.vol .seek { flex: 0 0 150px; min-width: 110px; }
.volval { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.volval.boost { color: var(--warn-border); font-weight: 650; }
.playbtn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 15px; cursor: pointer; flex: none;
}
.playbtn:hover { border-color: var(--spkA); }
.ttime { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
input[type="range"].seek {
  flex: 1 1 180px; min-width: 140px; height: 14px; margin: 0; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
input[type="range"].seek::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: var(--line); }
input[type="range"].seek::-moz-range-track { height: 5px; border-radius: 999px; background: var(--line); }
input[type="range"].seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); border: none; margin-top: -4px;
}
input[type="range"].seek::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--ink); border: none; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button {
  border: none; background: var(--surface); color: var(--muted); padding: 7px 14px;
  font-size: 13px; cursor: pointer; border-left: 1px solid var(--line);
}
.seg button:first-child { border-left: none; }
.seg button.active { background: var(--ink); color: var(--bg); font-weight: 600; }
.seg button .sA { color: var(--spkA); font-weight: 700; }
.seg button .sB { color: var(--spkB); font-weight: 700; }
.seg button.active .sA, .seg button.active .sB { color: inherit; }

/* ── transcripts ──────────────────────────────────────────────────────── */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 4px; }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }
.tcol { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.tcol .thead {
  padding: 8px 14px; font-size: 13px; font-weight: 650; color: #fff;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.tcol .thead .tid { font-family: var(--mono); font-size: 10.5px; font-weight: 400; opacity: .85; }
/* one colour per speaker, set per column as --col / --col-soft */
.tcol .thead { background: var(--col, var(--spkA)); }
/* positioned so the follow math measures rects against THIS box, not an ancestor */
.tbody { position: relative; max-height: 340px; overflow-y: auto; padding: 6px 0; }
.tcol.expanded .tbody { max-height: none; }
/* Row density matched to the review page (N15): tighter leading + padding. */
.turn { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 4px 14px; }
.turn + .turn { border-top: 1px solid var(--line-soft); }
.turn .ts {
  font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 3px;
  font-variant-numeric: tabular-nums; cursor: pointer; background: none; border: none; text-align: left;
}
.turn .tx { font-size: 14px; line-height: 1.4; }
.turn.cur { background: var(--col-soft, var(--spkA-soft)); }
.w { cursor: pointer; border-radius: 4px; padding: 0 1px; }
.w-cur { background: var(--col, var(--spkA)); color: #fff; padding: 0 4px; }
.w-low { border-bottom: 2px dotted var(--muted); }
.jump {
  display: flex; justify-content: center; gap: 18px; font-size: 12px;
  padding: 6px; border-top: 1px solid var(--line-soft);
}
.jump button { background: none; border: none; color: var(--spkA); font-size: 12px; cursor: pointer; padding: 0; }
.tcol .empty { padding: 14px; color: var(--muted); font-size: 13px; }

/* ── downloads ────────────────────────────────────────────────────────── */
.dl { display: flex; flex-wrap: wrap; gap: 9px; }
.dl a {
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 13px;
  font-family: var(--mono); font-size: 12px; color: var(--ink); text-decoration: none; background: var(--surface);
}
.dl a:hover { border-color: var(--spkA); }
.dl a.eaf { border-color: var(--spkA); color: var(--spkA); }

/* ── diagnostics drawer ───────────────────────────────────────────────── */
details.diag { margin-top: 14px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; }
details.diag > summary {
  cursor: pointer; padding: 12px 18px; font-size: 13.5px; color: var(--muted);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
details.diag > summary::-webkit-details-marker { display: none; }
details.diag > summary::before { content: "\25B8"; transition: transform .15s; }
details.diag[open] > summary::before { transform: rotate(90deg); }
details.diag[open] { background: var(--surface); border-style: solid; }
.diag-inner { padding: 0 18px 16px; display: grid; gap: 8px; }
details.panel { border: 1px solid var(--line-soft); border-radius: 6px; }
details.panel > summary { cursor: pointer; padding: 8px 14px; font-size: 13px; list-style: none; color: var(--ink); }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary .hint { color: var(--muted); font-size: 12px; margin-left: 8px; }
details.panel[open] > summary { border-bottom: 1px solid var(--line-soft); }
.panel-body { padding: 12px 14px; overflow-x: auto; }
.panel-body .nodata { color: var(--muted); font-size: 13px; }
table.rt { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 420px; }
table.rt th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; }
table.rt td { padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11.5px; }
table.rt tr.dropped td { color: var(--muted); text-decoration: line-through; }
table.rt td.tag { font-family: var(--sans); font-size: 11.5px; text-decoration: none; }
.logbox {
  max-height: 320px; overflow: auto; background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 11.5px;
  white-space: pre-wrap; word-break: break-word; color: var(--ink);
}
.abpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.abpair .ab h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.abpair audio { width: 100%; }

/* ── error card ───────────────────────────────────────────────────────── */
.errcard { border-color: var(--fail); background: var(--fail-bg); }
.errcard h2 { color: var(--fail); }
.errcard .etype { font-family: var(--mono); font-size: 13px; color: var(--fail); }
.errcard .emsg { margin-top: 8px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }

/* ── examples gallery ─────────────────────────────────────────────────── */
.exgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.excard {
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; text-align: left;
  cursor: pointer; font: inherit; color: inherit;
}
.excard:hover { border-color: var(--spkA); }
.excard .exid { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.excard .exrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge {
  font-size: 10.5px; letter-spacing: .08em; font-weight: 650; padding: 1px 7px;
  border-radius: 4px; background: var(--chip-bg); color: var(--muted);
}
.badge.dev { color: var(--spkC); }
.badge.test { color: var(--spkD); }
/* acoustic-difficulty stratum: LOW easy → HIGH hard */
.sbadge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; font-weight: 650;
  padding: 1px 6px; border-radius: 4px; background: var(--chip-bg); color: var(--muted);
}
.sbadge.low { background: var(--strat-low-bg); color: var(--strat-low-ink); }
.sbadge.mid { background: var(--strat-mid-bg); color: var(--strat-mid-ink); }
.sbadge.high { background: var(--strat-high-bg); color: var(--strat-high-ink); }

/* ── examples: the frozen metric set (detail view only) ───────────────── */
.mgroups { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.mgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mgroup .mglabel { font-size: 12px; color: var(--muted); min-width: 176px; }
.mgroup .chip { cursor: help; }
.mgroup .chip.floor { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
@media (max-width: 700px) { .mgroup .mglabel { min-width: 100%; } }
.exfilter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.exfilter input[type="search"] {
  flex: 1 1 200px; min-width: 160px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 13px;
}
.exfilter select {
  padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px;
}
.backlink { background: none; border: none; color: var(--spkA); font-size: 13.5px; cursor: pointer; padding: 0; }
.exhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.exhead .spacer { flex: 1; }