/* Oracle — the kill index.

   Everything here is scoped under #oracle or .oracle-wide so this file can
   never reach another page, and so site.css needs no edit to host it. The
   tokens are site.css's: same surfaces, same ink, same side colours, same
   28px row. This page is a denser instance of the timing tower, not a new
   visual language. */

/* The shell is 1320px for scouting pages. A ledger next to a video wants
   more, and :has() lets this page widen it without a body class the base
   template does not offer. */
main:has(.oracle-wide) .shell { max-width: 1760px; }

#oracle { padding-top: 16px; }

/* ---------------------------------------------------------------- head */
.o-beta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-left: 3px solid #ff4655;
  border-radius: var(--r);
  background: var(--panel);
}
.o-beta-label { color: var(--ink-hi); font-size: 12px; font-weight: 700; }
.o-beta p { margin: 0; color: var(--ink-2); font-size: 12px; }

.o-info {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink-2);
  border-radius: 50%;
}
.o-info:hover { color: var(--ink-hi); background: var(--panel-2); }
.o-info svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.o-info .o-info-dot { fill: currentColor; stroke: none; }
html:has(#oracle-intro) { scrollbar-gutter: stable; }
html.oracle-intro-open { overflow: hidden; }
.o-intro {
  width: min(660px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hair);
  border-top: 3px solid #ff4655;
  border-radius: 6px;
  box-shadow: 0 24px 80px #0008;
}
.o-intro::backdrop { background: rgb(8 10 13 / 92%); backdrop-filter: blur(5px); }
.o-intro-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.o-intro-beta { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.o-intro h2 { max-width: 22ch; font-size: 27px; line-height: 1.15; letter-spacing: -.025em; color: var(--ink-hi); }
.o-intro h2:focus { outline: none; }
.o-intro p { margin: 14px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.o-roadmap { margin-top: 26px; }
.o-roadmap h3 { color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.o-roadmap ol { list-style: none; counter-reset: roadmap; margin: 12px 0 0; padding: 0; }
.o-roadmap li { position: relative; counter-increment: roadmap; border-top: 1px solid var(--hair); padding: 16px 0 16px 28px; }
.o-roadmap li::before { content: counter(roadmap, decimal-leading-zero); position: absolute; left: 0; top: 17px; color: var(--ink-3); font: 10px var(--mono); }
.o-roadmap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.o-roadmap h4 { font-size: 14px; color: var(--ink-hi); }
.o-roadmap-status { color: #ff727d; font-size: 10px; white-space: nowrap; }
.o-roadmap-planned { color: var(--ink-3); }
.o-roadmap li p { margin-top: 7px; font-size: 12px; }
.o-intro-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hair); padding-top: 20px; }
.o-intro-footer p { margin: 0; max-width: 26ch; font-size: 11px; }
.o-intro-continue { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 42px; padding: 10px 16px; border-radius: 3px; background: #ff4655; color: #17191f; font-size: 12px; font-weight: 750; }
.o-intro-continue:hover { background: #ff6874; }
@media (max-width: 520px) {
  .o-intro { padding: 22px 18px; max-height: calc(100dvh - 24px); width: calc(100% - 24px); }
  .o-intro-brand { gap: 8px; margin-bottom: 22px; }
  .o-intro h2 { font-size: 24px; }
  .o-intro-footer { flex-direction: column; align-items: stretch; }
  .o-intro-footer p { max-width: none; }
}
@media print { .o-intro, .o-info { display: none !important; } }

/* ---------------------------------------------------------------- 70/30 */
.o-split {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
  align-items: start;
}
@media (max-width: 1180px) { .o-split { grid-template-columns: minmax(0, 1fr); } }
.o-left { min-width: 0; }
.o-right { min-width: 0; position: sticky; top: calc(var(--topbar-height, 46px) + 12px); }

/* ---------------------------------------------------------------- filters */
.o-filters {
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 9px 11px; margin-bottom: 10px;
}

/* Tier 1: one dense band. Sized so the table header is on screen without a
   scroll on a 900px-tall viewport — an index you have to scroll to reach is
   a form, not an index. */
.o-primary {
  display: grid; gap: 8px 14px;
  grid-template-columns:
    minmax(150px, 1.3fr)   /* search */
    minmax(190px, 1.6fr)   /* maps */
    minmax(120px, 1fr)     /* team */
    minmax(76px, .6fr)     /* vs */
    minmax(150px, 1.2fr)   /* player */
    minmax(170px, 1.3fr);  /* quick toggles */
  align-items: start;
}
@media (max-width: 1400px) {
  .o-primary { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

/* Tier 2 drawer. Folded, never hidden: the summary names what is inside and
   how much of it is switched on, and the server opens it when any of those
   filters is active so a pasted link cannot conceal its own query. */
.o-drawer { margin-top: 8px; border-top: 1px solid var(--grid); padding-top: 7px; }
.o-drawer > summary {
  display: flex; align-items: baseline; gap: 9px; cursor: pointer;
  font-size: 11px; color: var(--ink-2); list-style: none;
}
.o-drawer > summary::-webkit-details-marker { display: none; }
.o-drawer > summary::before {
  content: "▸"; color: var(--ink-3); font-size: 9px; transition: transform .12s;
}
.o-drawer[open] > summary::before { content: "▾"; }
.o-drawer > summary:hover { color: var(--ink-hi); }
.o-drawer > summary span { font-weight: 600; }
.o-drawer > summary i { font-style: normal; color: var(--ink-3); font-size: 10px; }
.o-drawer > summary em {
  font-style: normal; margin-left: auto; font-size: 10px;
  color: var(--ink-hi); background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 8px; padding: 1px 7px;
}
.o-drawer .o-fgrid { margin-top: 9px; }

.o-fgrid {
  display: grid; gap: 10px 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
}
.o-fgroup { border: 0; margin: 0; padding: 0; min-width: 0; }
.o-fgroup-wide { grid-column: span 2; }
@media (max-width: 900px) { .o-fgroup-wide { grid-column: auto; } }
.o-fgroup legend {
  padding: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700; margin-bottom: 5px;
}
.o-fgroup legend i {
  font-style: normal; letter-spacing: .04em; text-transform: none;
  color: var(--ink-3); font-weight: 400; margin-left: 6px;
}
.o-provgrid { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }

.o-f { margin-bottom: 6px; min-width: 0; }
.o-f-lbl {
  display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 3px; white-space: nowrap;
}
/* A label that also carries the either/killer/victim toggle is no longer a
   single short token, and `nowrap` made it spill sideways over the next
   filter group's heading. Let that one wrap; plain labels keep nowrap. */
.o-f-lbl:has(.o-role) {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 5px; white-space: normal;
}
.o-f-lbl:has(.o-role) .o-role { margin-left: 0; }
.o-f-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.o-f-row .o-f-lbl { margin: 0; }
.o-inline { display: inline-flex; align-items: center; gap: 4px; }
.o-inline select { width: auto; }
.o-dash { color: var(--ink-3); }

#oracle select, #oracle input[type="number"], #oracle input[type="search"] {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--hair);
  border-radius: 3px; font: 12px/1.3 var(--font); padding: 3px 5px; width: 100%;
}
#oracle input[type="number"] { width: 58px; }
#oracle select[multiple] { padding: 2px; font-size: 11px; }
#oracle select[multiple] option { padding: 1px 4px; }
#oracle select:focus, #oracle input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
#oracle input[type="search"]::placeholder { color: var(--ink-3); }

/* Checkbox chips. The native box is hidden but still focusable and still the
   thing a screen reader announces — the chip is its label. */
.o-checks { display: flex; flex-wrap: wrap; gap: 3px; }
.o-check {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  border: 1px solid var(--hair); border-radius: 3px; background: var(--panel-2);
  padding: 2px 6px; font-size: 11px; color: var(--ink-2);
  transition: background .1s, border-color .1s, color .1s;
}
.o-check:hover { border-color: var(--ink-3); color: var(--ink-hi); }
.o-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-check i { font-style: normal; font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.o-check:has(input:checked), .o-check.on {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--hair));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  color: var(--ink-hi);
}
.o-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.o-role { display: inline-flex; margin-left: 5px; vertical-align: middle; }
.o-seg {
  border: 1px solid var(--hair); border-left-width: 0; padding: 1px 5px;
  font-size: 10px; color: var(--ink-3); cursor: pointer; background: var(--panel-2);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.o-role .o-seg:first-child, .o-order .o-seg:first-child { border-left-width: 1px; border-radius: 3px 0 0 3px; }
.o-role .o-seg:last-child, .o-order .o-seg:last-child { border-radius: 0 3px 3px 0; }
.o-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-seg.on, .o-seg:has(input:checked) { color: var(--ink-hi); background: var(--raise); border-color: var(--ink-3); }

.o-f-blocked { opacity: .75; }
.o-f-blocked p {
  margin: 0; font-size: 10px; color: var(--ink-3); line-height: 1.45;
  border: 1px dashed var(--hair); border-radius: 3px; padding: 4px 6px;
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.015) 4px 8px);
}
.o-submit { border: 1px solid var(--accent); border-radius: 3px; padding: 4px 14px; margin-top: 8px; }

/* ---------------------------------------------------------------- results */
/* Sticky, because the complaint that mattered most was "when filtering I
   can't see the filtered". The controls are at the top of the column and the
   answer was 300px below them; now the answer follows you. It is also the
   first node in the swapped fragment, so it is the first thing that changes. */
.o-count {
  position: sticky; top: var(--topbar-height, 46px); z-index: 3;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--hair); margin-bottom: 7px;
  background: var(--bg);
}
/* The working state is on the count, not on a corner spinner: the number is
   what you are waiting for, so the number is what says "not yet". */
.o-working {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); opacity: 0; transition: opacity .1s;
}
.htmx-request .o-working, .htmx-request.o-working { opacity: 1; }
#o-results.htmx-request .o-count > b { opacity: .35; }
.o-count > b { font-size: 21px; font-weight: 650; color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.o-count > span { font-size: 12px; color: var(--ink-2); }
.o-count-sub { color: var(--ink-3) !important; font-size: 11px !important; }
.o-order { margin-left: auto; display: inline-flex; }
.o-order .o-seg { padding: 2px 8px; font-size: 10px; }

.o-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 7px; }
.o-chips-lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.o-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--hair));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  color: var(--ink); border-radius: 3px; padding: 2px 6px;
}
.o-chip i { font-style: normal; color: var(--ink-3); }
.o-chip:hover { color: var(--ink-hi); }
.o-chip:hover i { color: var(--loss); }
.o-chip-clear { border-style: dashed; background: transparent; color: var(--ink-3); }

/* The honesty strip. Same weight as the count, because on a raw ledger
   provenance IS the quality signal — there are no rates to judge. */
.o-prov { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.o-pstat {
  display: inline-flex; align-items: baseline; gap: 5px;
  border: 1px solid var(--hair); border-radius: 3px; background: var(--panel);
  padding: 3px 8px; font-size: 11px; color: var(--ink-3);
}
.o-pstat b { font-size: 13px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.o-pstat:hover { border-color: var(--ink-3); }
.o-pstat.is-zero { opacity: .5; }
.o-pstat.is-zero b { color: var(--ink-3); font-weight: 400; }
.o-pstat-flat { cursor: default; }

.o-gapbar {
  border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent);
  padding: 6px 10px; margin-bottom: 8px; font-size: 12px; border-radius: 0 3px 3px 0;
}
.o-gapbar > summary { cursor: pointer; list-style: none; }
.o-gapbar > summary::-webkit-details-marker { display: none; }
.o-gapbar b { color: var(--ink-hi); font-weight: 600; }
.o-gapbar span { color: var(--ink-3); font-size: 11px; margin-left: 6px; }
.o-gapbar ul { margin: 6px 0 0; padding-left: 16px; font-size: 11px; color: var(--ink-3); line-height: 1.7; }
.o-gapbar li a { color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }
.o-gapbar li a:hover { color: var(--ink-hi); }

.o-notes { margin-top: 10px; }
.o-notes > summary { font-size: 11px; color: var(--ink-3); cursor: pointer; }
.o-notes > summary:hover { color: var(--ink); }
.o-notes ul { margin: 6px 0 0; padding-left: 16px; font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.o-notes b { color: var(--ink-2); font-weight: 600; }

.o-empty {
  border: 1px dashed var(--hair); border-radius: var(--r); padding: 26px 20px;
  text-align: center; color: var(--ink-3);
}
.o-empty b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.o-empty p { margin: 0 auto; font-size: 12px; max-width: 60ch; line-height: 1.6; }
.o-empty-act { margin-top: 10px !important; }
.o-empty-act a { color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }
.o-empty-act a:hover { color: var(--ink-hi); }
.o-empty-gap { margin-top: 8px !important; color: var(--warn) !important; }

/* ---------------------------------------------------------------- table */
/* No overflow container on desktop: `overflow-x` would make this element the
   sticky containing block, and the column header would stick 46px from the
   TOP OF THE TABLE — i.e. sitting on row 2 — instead of under the site bar.
   The horizontal escape hatch only exists where the table cannot fit. */
.o-tablewrap { min-width: 0; }
@media (max-width: 1100px) {
  .o-tablewrap { overflow-x: auto; }
  .o-tbl th { position: static; }
}
.o-tbl { font-size: 12px; font-variant-numeric: tabular-nums lining-nums; }
.o-tbl th {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  font-weight: 700; text-align: right; padding: 0 7px 5px; border-bottom: 1px solid var(--hair);
  white-space: nowrap; position: sticky; top: 46px; background: var(--bg); z-index: 2;
}
.o-tbl th.l { text-align: left; }
.o-tbl td {
  text-align: right; padding: 0 7px; height: var(--row-h);
  border-bottom: 1px solid var(--grid); white-space: nowrap;
}
.o-tbl td.l { text-align: left; }

.o-row { cursor: pointer; }
.o-row:hover td { background: rgba(255,255,255,.03); }
.o-row.is-sel td { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.o-row.is-sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.o-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.o-row.is-novod { color: var(--ink-3); }
.o-row.is-excl td { color: var(--ink-2); }
/* A marked-missing row is a hole in the ledger, drawn as one. */
.o-row.is-missing td {
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(224,163,58,.07) 4px 8px);
  border-bottom-color: color-mix(in srgb, var(--warn) 30%, var(--grid));
}

.o-where b { color: var(--ink-hi); font-weight: 600; }
.o-where span { color: var(--ink-3); margin-left: 6px; }
.o-where .o-r {
  font-style: normal; color: var(--ink-2); margin-left: 6px;
  font-size: 11px; padding: 0 3px; border-radius: 2px; background: var(--panel-2);
}
.o-where .o-r-pistol { color: var(--c4); background: color-mix(in srgb, var(--c4) 14%, transparent); }
.o-where .o-r-maplevel { color: var(--warn); border: 1px dashed color-mix(in srgb, var(--warn) 50%, transparent); background: none; }

/* The duel in one cell. Two name columns made the eye travel twice to read a
   single fact; the arrow does the work a column boundary was doing. */
.o-duel { white-space: nowrap; }
.o-duel b { color: var(--ink-hi); font-weight: 600; }
.o-arrow { font-style: normal; color: var(--ink-3); margin: 0 7px; }
.o-rail { display: inline-block; width: 3px; height: 12px; border-radius: 1px; margin-right: 5px; vertical-align: -1px; }
.o-team { color: var(--ink-3); font-size: 10px; margin-left: 4px; letter-spacing: .04em; }
.o-side { font-size: 9px; font-weight: 700; letter-spacing: .06em; margin-left: 4px; }
.o-side-t { color: var(--atk); }
.o-side-ct { color: var(--def); }
.o-duel .o-state {
  color: var(--ink-3); font-size: 10px; margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.o-unknown {
  color: var(--warn); font-style: italic;
  border-bottom: 1px dotted color-mix(in srgb, var(--warn) 60%, transparent);
}

.o-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em; margin-left: 5px;
  padding: 0 3px; border-radius: 2px; border: 1px solid;
}
.o-badge-open { color: var(--c1); border-color: color-mix(in srgb, var(--c1) 45%, transparent); }
.o-badge-traded { color: var(--c3); border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.o-badge-warn { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 45%, transparent); }

.o-nodata { font-size: 11px; color: var(--ink-3); }
.o-clock { color: var(--ink-2); width: 58px; }
.o-vod { width: 66px; }
.o-vodlink { color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }
.o-vodlink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Marks as dots. Present at a glance, named on hover, spelled out on expand —
   the compromise that keeps every mark visible without four sentences of
   schema on every row. */
.o-markcell { width: 74px; }
.o-marks { display: inline-flex; gap: 3px; align-items: center; justify-content: flex-end; }
.o-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: var(--ink-3); cursor: help; flex: none;
}
.o-dot-warn { background: var(--warn); }
.o-dot-dim  { background: var(--ink-3); opacity: .55; }
.o-dot-out  { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.o-dot-cls  { background: var(--c6); }
.o-dot-flag { background: var(--loss); }
.o-dot-ok   { background: var(--win); }

.o-expcell { width: 26px; }
.o-exp {
  width: 18px; height: 18px; line-height: 16px; text-align: center;
  border: 1px solid var(--hair); border-radius: 3px; color: var(--ink-3);
  font-size: 12px; background: var(--panel-2);
}
.o-exp:hover { color: var(--ink-hi); border-color: var(--ink-3); }
.o-exp[aria-expanded="true"] { color: var(--ink-hi); background: var(--raise); }

/* ---------------------------------------------------------------- detail */
/* The detail escapes the table's right-aligned numeric defaults: it is prose,
   and prose reads from the left. */
.o-detail > td {
  padding: 0; height: auto; text-align: left; white-space: normal;
  background: var(--panel); border-bottom: 1px solid var(--hair);
}
.o-detgrid {
  display: grid; gap: 14px 22px; padding: 12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-left: 3px solid var(--accent);
}
.o-detcol h4 {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 6px;
}
.o-detcol dl { display: grid; grid-template-columns: 92px 1fr; gap: 3px 10px; margin: 0; font-size: 11px; text-align: left; }
.o-detcol dt { color: var(--ink-3); text-align: left; }
.o-detcol dd { margin: 0; color: var(--ink); white-space: normal; }
.o-detprov dd b { display: block; color: var(--ink-hi); font-weight: 600; }
.o-detprov dd span { display: block; color: var(--ink-3); line-height: 1.5; margin-bottom: 3px; }
.o-detcol .o-dim { color: var(--ink-3); }
.o-detcol .o-warn { color: var(--warn); }
.o-detcol a { color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }
.o-detcol a:hover { color: var(--ink-hi); }

/* The internal values, kept inspectable per the audit — small, last, and
   clearly a different register from the sentences above them. */
.o-rawline { margin: 9px 0 0; font-size: 10px; color: var(--ink-3); line-height: 1.9; }
.o-rawline span { letter-spacing: .1em; text-transform: uppercase; margin-right: 5px; }
.o-rawline code {
  font: 10px/1 var(--mono); background: var(--panel-2); border: 1px solid var(--grid);
  border-radius: 2px; padding: 2px 4px; margin-right: 3px; color: var(--ink-2);
}

.o-proposal {
  margin-top: 10px; border-left: 3px solid var(--warn); padding: 6px 9px;
  background: color-mix(in srgb, var(--warn) 7%, transparent); border-radius: 0 3px 3px 0;
}
.o-proposal > b { color: var(--warn); font-size: 11px; }
.o-proposal p { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.55; }
.o-proposal p b { color: var(--ink-2); }

.o-more td { border: 0; padding-top: 10px; text-align: center; }
.o-more button {
  border: 1px solid var(--hair); border-radius: 3px; padding: 5px 16px;
  font-size: 12px; color: var(--ink-2); background: var(--panel);
}
.o-more button:hover { color: var(--ink-hi); border-color: var(--ink-3); }
.o-more-sub { color: var(--ink-3); font-size: 10px; }

/* ---------------------------------------------------------------- watch */
.o-player-shell {
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r);
  overflow: hidden;
}

/* The primary action, sized like the video it replaces is not. Embedding is
   disabled by the broadcaster on every VOD in the corpus (measured: YouTube
   error 150 on all 13, both hosts), so the honest strongest move is to make
   the jump to the exact second unmissable. */
.o-watchbtn {
  display: block; padding: 14px 13px 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--panel-2)), var(--panel-2));
  border-bottom: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
}
.o-watchbtn:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--panel-2)), var(--panel-2)); }
.o-watchbtn b { display: block; font-size: 17px; font-weight: 650; color: var(--ink-hi); }
.o-watchbtn b span { font-variant-numeric: tabular-nums; }
.o-watchbtn > span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-2); }
.o-watchwhy {
  margin: 0; padding: 7px 11px; font-size: 10px; color: var(--ink-3);
  line-height: 1.5; border-bottom: 1px solid var(--grid);
}
.o-watchnone {
  padding: 22px 14px; text-align: center; border-bottom: 1px solid var(--hair);
  background: var(--panel-2);
}
.o-watchnone b { display: block; font-size: 13px; color: var(--ink); }
.o-watchnone span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }

.o-lead {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px 9px; border-bottom: 1px solid var(--hair); font-size: 10px; color: var(--ink-3);
}
.o-lead > span { letter-spacing: .1em; text-transform: uppercase; margin-right: 3px; }
.o-lead .o-seg:first-of-type { border-left-width: 1px; border-radius: 3px 0 0 3px; }
.o-lead .o-seg:nth-of-type(5) { border-radius: 0 3px 3px 0; }
.o-follow {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; border: 1px solid var(--hair); border-radius: 3px;
  padding: 1px 6px; background: var(--panel-2);
}
.o-follow:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--hair));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); color: var(--ink-hi);
}
.o-follow input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.o-clipmeta { padding: 9px 11px; }
.o-clip-head b { display: block; font-size: 14px; color: var(--ink-hi); font-weight: 650; }
.o-clip-head span { font-size: 11px; color: var(--ink-3); }
.o-clip-when { margin: 7px 0 0; font-size: 11px; color: var(--ink-2); }
.o-clip-when b { color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.o-clip-when i { display: block; color: var(--c4); font-style: normal; margin-top: 2px; }
.o-clip-novod {
  margin: 7px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.6;
  border-left: 2px solid var(--hair); padding-left: 8px;
}
.o-clip-novod b { color: var(--warn); }
.o-clip-links { margin: 7px 0 0; display: flex; gap: 12px; font-size: 11px; }
.o-clip-links a { color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }
.o-clip-links a:hover { color: var(--ink-hi); }

.o-clip-prov {
  display: grid; grid-template-columns: 74px 1fr; gap: 2px 8px;
  margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--grid);
  font-size: 11px;
}
.o-clip-prov dt { color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; font-size: 9px; padding-top: 2px; }
.o-clip-prov dd { margin: 0; color: var(--ink-2); }

.o-proposal {
  margin-top: 10px; border-left: 3px solid var(--warn); padding: 6px 9px;
  background: color-mix(in srgb, var(--warn) 7%, transparent); border-radius: 0 3px 3px 0;
}
.o-proposal b { color: var(--warn); font-size: 11px; }
.o-proposal p { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.55; }
.o-proposal p b { color: var(--ink-2); }

.o-ledger { margin-top: 10px; border-top: 1px solid var(--grid); padding-top: 7px; }
.o-ledger-head { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.o-lrow {
  display: grid; grid-template-columns: 18px 1fr 12px 1fr 44px; gap: 5px;
  align-items: baseline; font-size: 11px; padding: 2px 3px; border-radius: 2px;
}
.o-lrow:hover { background: rgba(255,255,255,.04); }
.o-lrow.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.o-lrow i { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.o-lrow b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.o-lrow em { font-style: normal; color: var(--ink-3); }
.o-lrow span { color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.o-lrow.is-missing b { color: var(--warn); font-style: italic; }

/* htmx in-flight: dim the results, never the player. */
/* Dim the ROWS while a search is in flight, never the count bar — the count
   has to stay readable because it is the thing that proves the filter landed. */
#o-results.htmx-request .o-tablewrap,
#o-results.htmx-request .o-empty { opacity: .4; transition: opacity .1s; }
@media (prefers-reduced-motion: reduce) { #o-results { transition: none !important; } }