/* DiddyDocket design system — foundation pass.
   Palette/fonts/nav approved across the 12-round redesign planning session;
   ported from the mockup artifact (Homepage/Case Files/Case Detail/Attorney Profile). */

@font-face {
  font-family: 'Carrois Gothic SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/CarroisGothicSC-Regular.ttf') format('truetype');
}

:root {
  --paper: #f1f1ef; --paper-raised: #f7f7f5; --paper-sunk: #e8e8e5;
  /* --ink-faint was #8a887f, which measured 3.14:1 on --paper -- below the
     4.5:1 that small text needs, and EVERY use of it is 9.5-13px. Solved
     against --paper-sunk, the worst surface it lands on, not against --paper:
     a value tuned to --paper alone still failed at 4.16 on the sunk surface. */
  --ink: #1c1c1a; --ink-soft: #55534c; --ink-faint: #6a685f;
  /* --red and --red-dark are the LOGO reds exactly (2026-09-07). The logo
     palette is #ac0c27 / #b40d29 / #cd0f2e / #d70f30, all at hue ~350. --red
     had been #cc0e2e, one step off #cd0f2e in two channels -- imperceptible,
     but it meant the token file and the logo disagreed. Don't "tidy" these. */
  --red: #cd0f2e; --red-dark: #ac0c27; --amber: #8a5f16; --slate: #48586a; --plum: #6d3b5c;
  --line: rgba(28,28,26,0.13); --line-strong: rgba(28,28,26,0.27);
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --label: 'Carrois Gothic SC', var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17171a; --paper-raised: #1e1e21; --paper-sunk: #111113;
    /* was #726f66 = 3.56:1; solved against --paper-raised, the lightest dark
       surface and therefore the worst case for light text. */
    --ink: #ecebe7; --ink-soft: #adaba3; --ink-faint: #88857c;
    --red: #f34a66; --red-dark: #f02e4e; --amber: #d7a53f; --slate: #93a4b5; --plum: #c393b3;
    --line: rgba(236,235,231,0.14); --line-strong: rgba(236,235,231,0.26);
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 700; }
a { color: var(--red); }
a:hover { color: var(--red-dark); }

.eyebrow {
  font-family: var(--label); font-size: 13px; color: var(--red);
  letter-spacing: .04em; margin-bottom: 6px;
}

/* ── header / nav ─────────────────────────────────────────────── */
.site-hd { background: var(--paper); border-bottom: 2px solid var(--ink); }
.site-hd-inner {
  max-width: 1080px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.site-logo-link { display: flex; align-items: center; text-decoration: none; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: 4px; font-size: 22px; line-height: 1; color: var(--ink);
  padding: 6px 10px; cursor: pointer;
}
.site-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--label); font-size: 15px; color: var(--ink-soft);
  text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a.cur { color: var(--ink); border-color: var(--red); }

@media (max-width: 700px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; width: 100%; flex-direction: column; align-items: flex-start;
    gap: 4px; padding-top: 12px;
  }
  .site-nav.open { display: flex; }
}

footer.site-ft {
  background: var(--paper-raised); color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
footer.site-ft a { color: var(--ink-soft); }
footer.site-ft a:hover { color: var(--red); }

/* ── homepage ─────────────────────────────────────────────────── */
.scope-line { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 0; }

.search-box {
  display: flex; gap: 0; margin: 22px 0 0; border: 1px solid var(--line-strong);
  border-radius: 4px; overflow: hidden; max-width: 520px;
}
.search-box input {
  flex: 1; border: none; padding: 12px 14px; font-size: 14.5px;
  font-family: var(--sans); background: var(--paper-raised); color: var(--ink); outline: none;
}
.search-box input::placeholder { color: var(--ink-faint); }
.search-box button {
  font-family: var(--label); font-size: 13px; background: var(--ink);
  color: var(--paper); border: none; padding: 0 20px; cursor: pointer;
}

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; margin: 16px 0 4px;
}
.stat { padding: 18px 20px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat-n {
  font-family: var(--mono); font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink);
}
.stat-l { font-family: var(--label); font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

.home-grid { display: grid; grid-template-columns: 0.85fr 1.4fr 0.85fr; gap: 32px; margin-top: 32px; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: 1fr 1.3fr; } .home-col-right { grid-column: 1 / -1; } }
@media (max-width: 800px) { .home-grid { grid-template-columns: 1fr; } .home-col-right { grid-column: auto; } }
.col-hd {
  font-family: var(--label); font-size: 15px; color: var(--red); padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong); margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.col-hd a { font-size: 13px; color: var(--ink-faint); }

.date-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.date-row:last-child { border-bottom: none; }
.date-d { width: 52px; flex-shrink: 0; text-align: center; }
.date-mo { font-family: var(--label); font-size: 11px; color: var(--ink-faint); }
.date-n { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1; }
.date-body a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.date-body a:hover { color: var(--red); }
.date-type { font-family: var(--label); font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.date-desc { font-size: 12.5px; color: var(--ink-faint); font-style: italic; margin-top: 3px; }

.news-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  /* Global `div { margin-top: 20px }` again: .thumb and .news-body are both
     divs, so every row carried 20px of dead space above its content on top of
     the row padding, and the fixed-height thumb was left with the slack below
     it. Third component this has hit -- book card, documentaries, here. */
  .news-row > * { margin-top: 0; }
  .news-row > .thumb { align-self: center; }
.news-row:last-child { border-bottom: none; }
.thumb {
  width: 64px; height: 48px; flex-shrink: 0; border-radius: 3px; background: var(--paper-sunk);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.thumb-init { font-family: var(--label); font-size: 12px; color: var(--ink-faint); }
.news-body { flex: 1; min-width: 0; }
.news-src { font-family: var(--label); font-size: 12px; color: var(--red); margin-bottom: 3px; }
.news-title { font-size: 14px; color: var(--ink); text-decoration: none; line-height: 1.4; display: block; }
.news-title:hover { color: var(--red); }
.news-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }

.news-row-lg { gap: 16px; padding: 18px 0; }
.thumb-lg { width: 110px; height: 80px; }
.thumb-lg .thumb-init { font-size: 16px; }
.news-row-lg .news-title { font-size: 16px; }

.card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; margin-bottom: 24px; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 10px; }
.card a.btn { display: inline-block; font-family: var(--label); font-size: 13px; color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); }

.rc-widget { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; margin-bottom: 24px; }
.rc-hd { font-family: var(--label); font-size: 13px; color: var(--red); margin-bottom: 10px; }
.rc-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 8px; }
.rc-link { font-family: var(--label); font-size: 12.5px; color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); }

.rc-countdown { display: flex; gap: 8px; margin-bottom: 10px; }
.rcc-unit { flex: 1; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 8px 4px; }
.rcc-unit span { display: block; font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rcc-unit p { font-family: var(--label); font-size: 9.5px; color: var(--ink-faint); margin: 3px 0 0; text-transform: uppercase; }

.rail-section { margin-bottom: 26px; }
.rail-hd { font-family: var(--label); font-size: 13px; color: var(--ink-faint); margin-bottom: 10px; }
.rail-link { display: block; font-size: 13.5px; color: var(--ink); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rail-link:hover { color: var(--red); }
.rail-link:last-child { border-bottom: none; }

@media (max-width: 640px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── case files search ────────────────────────────────────────── */
.status-toggle { display: flex; gap: 18px; margin: 14px 0 4px; font-family: var(--label); font-size: 12.5px; color: var(--ink-soft); }
.status-toggle label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.idx-table-wrap { overflow-x: auto; }
.idx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.idx-table th { text-align: left; font-family: var(--label); font-size: 11px; color: var(--ink-faint); padding: 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.idx-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.idx-table tbody tr:hover { background: var(--paper-raised); }
.idx-table a { text-decoration: none; }

/* ── case detail ──────────────────────────────────────────────── */
.case-hd { margin: 8px 0 18px; }
.case-caption { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--ink); margin: 4px 0 10px; line-height: 1.25; }
.case-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.badge { font-family: var(--label); font-size: 11.5px; padding: 3px 11px; border-radius: 20px; letter-spacing: .02em; }
.b-open { background: rgba(72,88,106,0.12); color: var(--slate); }
.b-closed { background: var(--paper-sunk); color: var(--ink-faint); }
.b-defendant { background: rgba(204,14,46,0.08); color: var(--red); }

.cw-banner { display: flex; gap: 10px; align-items: center; background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 4px; padding: 10px 14px; margin: 20px 0; font-size: 12.5px; flex-wrap: wrap; }
.cw-label { font-family: var(--label); font-size: 11px; color: var(--amber); }
.cw-tags { color: var(--ink-soft); }

.section-hd { font-family: var(--label); font-size: 14px; color: var(--red); border-bottom: 1px solid var(--line-strong); padding-bottom: 8px; margin: 32px 0 14px; }
/* criminal_court_dates / docket_dates / view_documents render BOTH standalone
   and as includes inside .content-section on /usa-v-combs, where their 28px h3
   outranked the 24px h2 above it. Scoped to the panel so the standalone pages
   keep their own heading. main.container-scoped to outspecify the 28px rule. */
main.container .content-section h3 { font-family: var(--label); font-size: 14px; color: var(--red);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 8px; margin: 0 0 14px; font-weight: 400; }

/* The #ac0c27 override that used to live here is GONE, and deliberately: it
   existed only because .promo-panels hardcoded a light #f4f4f4 band, so a
   theme-aware red landed on light. The band is themed now, so var(--red) is
   correct again and the hardcoded dark red would have been dark-on-dark. */
.disclaimer { font-size: 12px; color: var(--ink-faint); font-style: italic; margin-bottom: 10px; }
.allegations { font-size: 14.5px; line-height: 1.7; color: var(--ink); }

.party-row { margin: 0; padding: 3px 0; font-size: 13.5px; }
.party-desc { color: var(--ink-soft); font-size: 12.5px; }
.dismissed-note { font-size: 12.5px; color: var(--ink-faint); font-style: italic; margin-top: 6px; }

.coa-row { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.coa-row:last-child { border-bottom: none; }
.coa-title { color: var(--ink); }
/* No nowrap: it suits a short statute label, but a cause of action that lists
   eight defendants ran 1406px wide inside a 1100px row and forced the whole
   page to scroll sideways (25CHCV03555, and 17 other cases). Let it wrap. */
.coa-cat { color: var(--ink-faint); font-size: 12px; min-width: 0; }

.docket-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.docket-table th { text-align: left; font-family: var(--label); font-size: 11px; color: var(--ink-faint); padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
.docket-table th.sortable { cursor: pointer; user-select: none; }
.docket-table th.sortable:hover { color: var(--red); }
.docket-table th.sortable::after { content: '↕'; font-size: 9px; margin-left: 4px; opacity: .5; }
.docket-table th.sortable[data-sort-dir="asc"]::after { content: '↑'; opacity: 1; }
.docket-table th.sortable[data-sort-dir="desc"]::after { content: '↓'; opacity: 1; }
.docket-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.docket-table td.dd { white-space: nowrap; color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }
.docket-table td.dn { color: var(--ink-faint); font-family: var(--mono); }
.docket-table a.pdf { font-family: var(--label); font-size: 11.5px; color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); white-space: nowrap; }
.docket-table a.pdf.attachment { display: block; margin-top: 4px; font-size: 10.5px; opacity: .8; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docket-table .no-pdf { font-size: 11.5px; color: var(--ink-faint); }
tr.more-row { display: none; }
tr.more-row.shown { display: table-row; }
.load-more { font-family: var(--label); font-size: 12px; color: var(--red); background: none; border: 1px solid var(--line-strong); border-radius: 4px; padding: 6px 14px; margin-top: 10px; cursor: pointer; }

.atty-card { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.atty-card:last-child { border-bottom: none; }
.atty-name { color: var(--ink); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.atty-name:hover { color: var(--red); }
.atty-firm { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.atty-side { font-family: var(--label); font-size: 10.5px; color: var(--ink-soft); background: var(--paper-sunk); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }

@media (max-width: 700px) {
  .case-caption { font-size: 22px; }
  .docket-table { font-size: 12px; }
}

/* ── court calendar ───────────────────────────────────────────── */
.cal-toggle { display: flex; gap: 8px; margin: 20px 0 24px; }
.cal-toggle a {
  font-family: var(--label); font-size: 13px; color: var(--ink-soft); text-decoration: none;
  padding: 6px 16px; border: 1px solid var(--line-strong); border-radius: 4px;
}
.cal-toggle a.cur { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.cal-toggle a:hover:not(.cur) { border-color: var(--red); color: var(--ink); }

.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cal-nav a { font-family: var(--label); font-size: 13px; color: var(--red); text-decoration: none; }
.cal-month-hd { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.cal-wd {
  font-family: var(--label); font-size: 11px; color: var(--ink-faint); text-align: center;
  padding: 8px 4px; background: var(--paper-raised); border-bottom: 1px solid var(--line-strong);
}
.cal-cell {
  min-height: 92px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell--blank { background: var(--paper-sunk); }
.cal-cell--today { background: rgba(204,14,46,0.05); }
.cal-cell-n { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.cal-cell--today .cal-cell-n { color: var(--red); font-weight: 600; }
.cal-event {
  display: block; font-size: 10.5px; color: var(--ink); text-decoration: none;
  background: var(--paper-raised); border-left: 2px solid var(--red);
  padding: 2px 4px; margin-bottom: 2px; border-radius: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event:hover { color: var(--red); }

@media (max-width: 700px) {
  .cal-grid { grid-template-columns: repeat(7, minmax(38px, 1fr)); font-size: 11px; }
  .cal-cell { min-height: 56px; padding: 3px; }
  .cal-event { font-size: 9px; }
}

/* ── case spotlight ───────────────────────────────────────────────
   Featured single-case page (/spotlight/<slug>, vanity /tupac).
   Reuses the case-detail tokens — .section-hd, .badge, .disclaimer,
   .news-row — so a spotlight reads as the same publication as the
   docket pages, not a bolted-on microsite. */

.sl-hd { margin: 10px 0 20px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.sl-title { font-family: var(--serif); font-size: 38px; font-weight: 700; line-height: 1.12; margin: 2px 0 10px; }
.sl-caption { font-size: 14px; color: var(--ink-soft); font-style: italic; line-height: 1.5; }
.sl-dek { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; max-width: 42em; }

.sl-status { background: var(--paper-raised); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 0 5px 5px 0; padding: 14px 18px; margin: 22px 0 4px; }
.sl-status-flag { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sl-status-date { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sl-status-label { font-family: var(--label); font-size: 14px; color: var(--red); }
.sl-status-note { font-size: 14.5px; line-height: 1.65; color: var(--ink); margin: 7px 0 0; }

.sl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 22px 0 0; }
.sl-fact { padding: 13px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sl-fact-l { font-family: var(--label); font-size: 11.5px; color: var(--ink-faint); margin-bottom: 4px; }
.sl-fact-v { font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.sl-fact-v.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sl-docket-link { margin: 12px 0 0; font-family: var(--label); font-size: 13px; }
.sl-docket-link a { text-decoration: none; border-bottom: 1px solid var(--red); }

.sl-prose { font-size: 15px; line-height: 1.75; color: var(--ink); max-width: 44em; }
.sl-prose p { margin: 0 0 14px; }
.sl-prose p:last-child { margin-bottom: 0; }
.sl-prose ul, .sl-prose ol { margin: 0 0 14px; padding-left: 22px; }
.sl-prose li { margin-bottom: 7px; }
.sl-prose em { color: var(--ink-soft); }

/* Long-form profile pages (person.deep_dive) -- exactly two: Cardello-Smith and
   Oddi. The wrapper had NO rules at all, so it inherited the full Bootstrap
   container: body copy ran 110 characters a line against the 66 of .sl-prose
   beside it, and its <h2>s fell through to `main.container h2`, whose red is a
   hardcoded #c9190c that predates the tokens and so does NOT flip in dark mode.
   Deliberately mirrors .sl-prose / .section-hd rather than inventing a third
   prose style -- change them together. */
.who-deep-dive { font-size: 15px; line-height: 1.75; color: var(--ink); max-width: 44em; }
.who-deep-dive p { margin: 0 0 14px; }
.who-deep-dive ul, .who-deep-dive ol { margin: 0 0 14px; padding-left: 22px; }
.who-deep-dive li { margin-bottom: 7px; }
.who-deep-dive em { color: var(--ink-soft); }
/* Scoped through main.container to outspecify `main.container h2` (0-1-2),
   which otherwise wins over a bare .who-deep-dive h2 (0-1-1) and forces the
   legacy #c9190c -- a light-mode red that stays dark-on-dark in dark mode. */
main.container .who-deep-dive h2 { font-family: var(--label); font-size: 14px; color: var(--red);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 8px; margin: 32px 0 14px; }
/* Oddi's page embeds a video; keep it inside the measure. */
.who-deep-dive iframe { max-width: 100%; }

/* Click-to-play video facade. Nothing is requested from YouTube until the
   reader clicks; only then is the player created, from youtube-nocookie.
   Same privacy rule as the documentaries trailers and SpotlightNote.video_id,
   but swapped in place rather than in a dialog -- a full hearing is watched,
   not sampled. Reusable: documentaries could adopt it and drop its own copy. */
.vid-facade { position: relative; display: block; width: 100%; max-width: 720px;
  aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line); background: #000;
  cursor: pointer; overflow: hidden; }
.vid-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-facade-btn { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  border-radius: 50%; background: rgba(0,0,0,.62); border: 1.5px solid rgba(255,255,255,.9); }
.vid-facade-btn::after { content: ''; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-left: 19px solid #fff; border-top: 12px solid transparent;
  border-bottom: 12px solid transparent; transform: translateX(3px); }
.vid-facade:hover .vid-facade-btn { background: rgba(0,0,0,.82); }
.vid-facade:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.vid-wrap { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: #000; }
.vid-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid-cap { font-size: 12.5px; color: var(--ink-faint); margin: 8px 0 0; max-width: 720px; }

.appeal { margin: 34px 0 0; }
.appeal > * { margin-top: 0; }

/* watch table — described in the narrative vs. actually sued */
.sl-watch { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sl-watch th { text-align: left; font-family: var(--label); font-size: 11px; color: var(--ink-faint); padding: 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.sl-watch td { padding: 13px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sl-watch tbody tr:hover { background: var(--paper-raised); }
.sl-watch tr.sl-w-not_named { background: rgba(204,14,46,0.035); }
.sl-watch tr.sl-w-not_named:hover { background: rgba(204,14,46,0.06); }
.sl-w-name { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 14px; }
a.sl-w-name:hover { color: var(--red); }
.sl-w-role { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.sl-w-basis { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.sl-w-src { font-size: 12px; color: var(--ink-faint); margin-top: 4px; line-height: 1.45; }
.sl-w-resp { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; max-width: 20em; }

.sl-badge-defendant { background: rgba(204,14,46,0.10); color: var(--red); }
.sl-badge-not_named { background: rgba(138,95,22,0.13); color: var(--amber); }
.sl-badge-convicted { background: rgba(28,28,26,0.10); color: var(--ink); }
.sl-badge-deceased  { background: var(--paper-sunk); color: var(--ink-faint); }
.sl-badge-dismissed { background: var(--paper-sunk); color: var(--ink-faint); }
.sl-badge-doe       { background: rgba(72,88,106,0.13); color: var(--slate); }
.sl-badge-other     { background: var(--paper-sunk); color: var(--ink-soft); }

/* what to watch for */
.sl-watchfor { list-style: none; padding: 0; margin: 16px 0 0; max-width: 44em; }
.sl-watchfor li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.sl-watchfor li:last-child { border-bottom: none; }
.sl-wf-mark { flex-shrink: 0; width: 13px; height: 13px; margin-top: 4px; border: 1.5px solid var(--line-strong); border-radius: 3px; }
.sl-wf-body { color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; }
.sl-cite { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }

/* key allegations */
.sl-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sl-quote { margin: 0; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; }
.sl-q-hd { font-family: var(--label); font-size: 12.5px; color: var(--red); margin-bottom: 9px; }
.sl-quote blockquote { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--ink); border-left: 2px solid var(--line-strong); padding-left: 14px; }
.sl-quote figcaption { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.sl-q-src { font-size: 11.5px; color: var(--ink-faint); }
.sl-jump { font-family: var(--label); font-size: 11.5px; color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); margin-left: auto; white-space: nowrap; cursor: pointer; }

/* document reader */
.sl-doc { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper-raised); }
.sl-doc-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sl-doc-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-pg { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 3px; padding: 4px 10px; cursor: pointer; }
.sl-pg:hover { border-color: var(--red); color: var(--ink); }
.sl-pg.cur { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sl-doc-open { font-family: var(--label); font-size: 12px; color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); white-space: nowrap; }
.sl-doc-frame { background: var(--paper-sunk); }
.sl-doc-frame iframe { display: block; width: 100%; height: 78vh; min-height: 460px; border: none; }
.sl-doc-fallback { font-size: 12.5px; color: var(--ink-faint); margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); }

/* timeline */
.sl-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--line-strong); max-width: 46em; }
.sl-timeline li { position: relative; padding: 0 0 22px; }
.sl-timeline li::before { content: ''; position: absolute; left: -27px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); border: 2px solid var(--paper); }
.sl-timeline li.sl-tl-civil::before    { background: var(--red); }
.sl-timeline li.sl-tl-criminal::before { background: var(--slate); }
.sl-timeline li.sl-tl-media::before    { background: var(--amber); }
.sl-timeline li.sl-tl-context::before  { background: var(--ink-faint); }
.sl-tl-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sl-tl-title { font-size: 14.5px; color: var(--ink); font-weight: 600; margin-top: 2px; line-height: 1.45; }
.sl-tl-detail { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-top: 4px; }
.sl-tl-jump { display: inline-block; margin: 6px 0 0; }
.sl-tl-key { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; font-family: var(--label); font-size: 11.5px; color: var(--ink-faint); }
.sl-tl-key span { display: flex; align-items: center; gap: 6px; }
.sl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
i.sl-tl-civil { background: var(--red); } i.sl-tl-criminal { background: var(--slate); }
i.sl-tl-media { background: var(--amber); } i.sl-tl-context { background: var(--ink-faint); }

/* parallel proceedings */
.sl-related { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.sl-related:last-child { border-bottom: none; }
.sl-rel-name { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
a.sl-rel-name:hover { color: var(--red); }
.sl-rel-body { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-top: 4px; max-width: 44em; }
.sl-rel-cta { font-family: var(--label); font-size: 11.5px; color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); white-space: nowrap; flex-shrink: 0; }

/* commentary — visually distinct from reported news and from allegations */
.sl-note { background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--plum); border-radius: 0 6px 6px 0; padding: 18px 22px; margin-bottom: 16px; }
.sl-note-hd { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.sl-note-tag { font-family: var(--label); font-size: 11px; color: var(--plum); }
.sl-note-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.sl-note-title { font-size: 18px; margin: 0 0 8px; }

.sl-more-news { margin-top: 14px; font-family: var(--label); font-size: 13px; }
.sl-more-news a { text-decoration: none; border-bottom: 1px solid var(--red); }

.sl-disclaimer { margin: 36px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper-sunk); font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.sl-disclaimer p { margin: 0 0 9px; }
.sl-disclaimer p:last-child { margin-bottom: 0; }
.sl-updated { margin: 14px 0 0; font-size: 12px; color: var(--ink-faint); font-style: italic; }

@media (max-width: 700px) {
  .sl-title { font-size: 27px; }
  .sl-dek { font-size: 16px; }
  .sl-doc-frame iframe { height: 62vh; min-height: 380px; }
  .sl-watch { font-size: 12.5px; }
  .sl-watch td { padding: 10px 6px; }
  .sl-related { flex-direction: column; gap: 8px; }
}

/* ── spotlight admin forms ────────────────────────────────────────
   Plain stacked forms; each child row is its own <form> posting an
   action, matching the add/update/delete dispatch used by
   /admin/court-dates and /admin/news. */
.sla-form { margin: 0 0 18px; }
.sla-form.sla-sub { border: 1px solid var(--line); border-radius: 5px; padding: 14px 16px; background: var(--paper-raised); }
.sla-form.sla-new { border: 1px dashed var(--line-strong); border-radius: 5px; padding: 14px 16px; }
.sla-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sla-row > label { flex: 1 1 160px; }
.sla-form label { display: block; font-family: var(--label); font-size: 11.5px; color: var(--ink-faint); margin-bottom: 10px; }
.sla-form label.sla-wide { display: block; }
.sla-form label.sla-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); align-self: center; flex: 0 0 auto; }
.sla-form input[type=text], .sla-form input[type=number], .sla-form input[type=date],
.sla-form select, .sla-form textarea {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 3px;
}
.sla-form textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; resize: vertical; }
.sla-form input:focus, .sla-form select:focus, .sla-form textarea:focus { outline: none; border-color: var(--red); }
.sla-btn { font-family: var(--label); font-size: 12.5px; color: var(--paper); background: var(--ink);
           border: none; border-radius: 3px; padding: 8px 18px; cursor: pointer; }
.sla-btn:hover { background: var(--red); }
.sla-btn.sla-del { background: none; color: var(--ink-faint); border: 1px solid var(--line-strong); margin-left: 6px; }
.sla-btn.sla-del:hover { color: var(--red); border-color: var(--red); background: none; }
.idx-table td.mono, .idx-table .mono { font-family: var(--mono); font-size: 12px; }

/* video embed inside a spotlight note (press conferences, hearing footage) */
.sl-video { margin: 14px 0 0; }
.sl-video-frame { position: relative; width: 100%; padding-top: 56.25%; background: var(--paper-sunk);
                  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sl-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.sl-video figcaption { font-size: 12.5px; color: var(--ink-faint); margin-top: 7px; line-height: 1.5; }

/* lede row — status banner beside the video, above the fold.
   Stacks below 900px so the video stays a usable size on tablets. */
.sl-lede { margin: 22px 0 4px; }
.sl-lede .sl-status { margin: 0; height: 100%; }
.sl-lede-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sl-lede-video { margin: 0; }
.sl-lede-video .sl-video-frame { border-radius: 5px; }
@media (max-width: 900px) {
  .sl-lede-split { grid-template-columns: 1fr; gap: 16px; }
}

/* Aliases moved out of person.name and into person_alias -- the alias text
   still has to read on the page, just no longer as part of the name itself. */
.who-aka { color: var(--ink-faint); }
.who-aka-line { color: var(--ink-faint); font-size: 13px; margin: 2px 0 8px; }

/* Person relations. One stored row renders on both people's pages -- forwards
   on the record it belongs to, inverted on the person it points at. */
.rel-list { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 10px; }
.rel { font-size: 12.5px; color: var(--ink); border: 1px solid var(--line);
       border-radius: 2px; padding: 2px 8px; }
.rel-type { color: var(--ink-faint); }
.rel-role { border-style: dashed; color: var(--ink-faint); }
.rel-roles { margin-top: -4px; }

/* Book promo card. One include (_book_promo.html) used on every surface, so
   the price and cover can never drift between pages.

   The site has a global `div { margin-top: 20px }`. Left alone it lands on
   .bookcard-body AND .bookcard-eyebrow, pushing the text down 41px inside the
   card while the cover -- an img, unaffected -- stayed at the top edge, so the
   cover read as floating above the title. Reset it here rather than touching
   the global rule, which the rest of the site is built on.

   The cover is then centred against the text block: it is roughly a third of
   the text's height, and top-aligning a short element beside a tall one leaves
   it looking dropped in rather than placed. */
.bookcard { display: flex; gap: 13px; align-items: center; text-decoration: none;
  color: var(--ink); border: 1px solid var(--line-strong); padding: 13px; background: var(--paper-raised); }
.bookcard > *, .bookcard-body > * { margin-top: 0; }
.bookcard:hover { border-color: var(--red); }
.bookcard-cover { flex: 0 0 auto; width: 62px; height: auto; aspect-ratio: 1000 / 1499;
  border: 1px solid var(--line); box-shadow: 0 1px 5px rgba(28,28,26,.15); }
.bookcard-body { min-width: 0; }
.bookcard-eyebrow { font-family: var(--label); font-size: 11.5px; color: var(--red); margin-bottom: 3px; }
.bookcard-title { font-family: var(--serif); font-size: 16px; line-height: 1.15; }
.bookcard-vol { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--ink-faint);
  margin-top: 3px; letter-spacing: .01em; }
.bookcard-blurb { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin: 7px 0 0; }
.bookcard-cta { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--red); margin-top: 8px; }
.bookcard--compact .bookcard-cover { width: 46px; }
.bookcard--compact .bookcard-title { font-size: 14.5px; }
.book-promo-inline { max-width: 460px; margin: 30px 0 8px; }