/* ca5-judicial (default) — concatenated by Usca5.WebSite.Renderer */

/* file: fonts.css */
/*
 * fonts.css — webfont registration (shared by every theme).
 *
 * Self-hosted: no external CDN call. A .gov site must not hand visitor IPs to
 * Google Fonts. Files live in wwwroot/fonts and are served same-origin at
 * /fonts/*.woff2. Both faces are variable fonts — one file per family covers
 * every weight the themes use, so 500/600/700 are real, not synthesized:
 *   Source Serif 4 — wght 200..900 + optical-size (opsz) 8..60
 *   Source Sans 3  — wght 200..900
 * Optical sizing applies automatically (font-optical-sizing: auto is default).
 */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3.woff2') format('woff2');
}

/* file: palette.css */
/*
 * palette.css — Judicial color tokens.
 * Values from assets/claude-design-export/bundle.jsx PALETTES.judicial
 * (the live tweak panel's source of truth; ca5.css and docs/ca5-themes.md
 * §2 disagree — see whats-open.md B11).
 * Restrained classical: warm parchment + deep navy + gilt focus.
 */

:root {
  --c-bg:           #fbf9f4;          /* warm parchment */
  --c-bg-elev:      #ffffff;          /* surface (cards) */
  --c-bg-sunk:      #f3efe6;          /* surfaceAlt (subtle wells) */
  --c-ink:          #1a1d2b;          /* primary text — 14.8:1 on bg */
  --c-ink-2:        #3c4256;          /* secondary text — 8.7:1 */
  --c-ink-3:        #666b7c;          /* tertiary / meta — 5.0:1 on bg, 4.6:1 on bg-sunk (AA at any size) */
  --c-line:         rgba(26, 29, 43, 0.12);
  --c-line-soft:    rgba(26, 29, 43, 0.07);
  --c-accent:       #1e3a5f;          /* deep navy — 9.4:1 on bg */
  --c-accent-ink:   #ffffff;
  --c-accent-soft:  #dde5ee;
  --c-accent-dark:  #7aa7d9;          /* lightened navy for dark mode */
  --c-link:         #1e3a5f;
  --c-focus:        #b8860b;          /* gilt */
  --c-warn:         #7a5a14;
  --c-good:         #2d5a3b;
}

/* file: tokens.css */
/*
 * tokens.css — typography, spacing, radii, shadows, density.
 * Values mirror docs/ca5-themes.md §2.
 */

:root {
  /* Type families */
  --f-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --f-sans:    'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-display: var(--f-serif);
  --f-body:    var(--f-sans);

  /* Type scale (modular, base 16) */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  48px;
  --t-4xl:  64px;

  /* Layout */
  --w-content: 1320px;   /* canonical content max-width: header, nav, main, footer all align to this */

  /* Spacing (8pt grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadows */
  --sh-1: 0 1px 0 rgba(20,16,8,.04), 0 1px 2px rgba(20,16,8,.05);
  --sh-2: 0 1px 0 rgba(20,16,8,.04), 0 4px 16px rgba(20,16,8,.06);
  --sh-3: 0 12px 36px rgba(20,16,8,.10), 0 2px 4px rgba(20,16,8,.04);

  /* Density multiplier — components do `calc(40px * var(--density))` etc. */
  --density: 1;
}

.density-compact { --density: 0.85; }
.density-comfy   { --density: 1.15; }

/* file: base.css */
/*
 * base.css — element-level resets and defaults that consume the tokens.
 * Unscoped: applies site-wide. Component CSS layers on top.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding-top: 6px;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); }
h6 { font-size: var(--t-base); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }

a {
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Skip-to-content (keyboard a11y). Hidden well off-screen until focused.
   `top: -40px` left a 1-2px sliver visible at the very top of the viewport
   on some renderings because the element's rendered height + padding
   nearly matched the offset. -100px is unambiguously off-screen. */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  background: var(--c-ink);
  color: var(--c-bg);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-weight: 600;
  z-index: 1000;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus {
  top: var(--s-2);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* component: address-card.css */
.address-card { font-style: normal; }
.address-card__label {
  font-family: var(--f-display);
  font-weight: 600;
}
.address-card a { color: var(--c-link); text-decoration: none; }
.address-card a:hover { text-decoration: underline; }

/* Variant: block — full card */
.address-card--block {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  font-size: var(--t-sm);
}
.address-card--block .address-card__label { font-size: var(--t-md); margin: 0 0 var(--s-2); }
.address-card--block .address-card__lines { margin: 0 0 var(--s-3); line-height: 1.5; color: var(--c-ink-2); }
.address-card--block p { margin: 0 0 var(--s-1); }

/* Variant: inline — single line, separators */
.address-card--inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-ink-2);
}
.address-card--inline .address-card__label { font-size: var(--t-sm); }
.address-card__sep { color: var(--c-ink-3); }

/* Variant: summary — label + city/state + phone */
.address-card--summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--t-sm);
}
.address-card--summary .address-card__label { font-size: var(--t-base); margin: 0; }
.address-card--summary p { margin: 0; }
.address-card__location { color: var(--c-ink-3); }

/* component: archive.css */
/* Archives sidebar (News + Vacancies) and the year/month archive pages. */

.archive-nav {
  position: sticky;
  top: var(--s-4);
  font-size: var(--t-sm);
}
.archive-nav__heading {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
.archive-nav__years { list-style: none; margin: 0; padding: 0; }
.archive-nav__year + .archive-nav__year { margin-top: var(--s-1); }

.archive-nav__year-link,
.archive-nav__month-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--c-ink);
  padding: 2px 0;
}
.archive-nav__year-link { font-family: var(--f-display); font-weight: 600; }
.archive-nav__year-link:hover,
.archive-nav__month-link:hover { color: var(--c-accent); text-decoration: underline; }
.archive-nav__year--active > .archive-nav__year-link { color: var(--c-accent); }

.archive-nav__count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: var(--t-xs);
  color: var(--c-ink-3);
}

.archive-nav__months {
  list-style: none;
  margin: var(--s-1) 0 var(--s-2);
  padding: 0 0 0 var(--s-3);
  border-left: 1px solid var(--c-line-soft);
}
.archive-nav__month-link { color: var(--c-ink-2); }

/* Month sections on the archive pages */
.archive-month + .archive-month { margin-top: var(--s-7); }
.archive-month__heading {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--c-line);
  scroll-margin-top: var(--s-5);
}

/* component: banner-hero.css */
/* Homepage banner. Ported from claude-design-export3/index.html.
   v1 implements the photo mode; statement fallback handles other modes. */

/* ───────── Direction D — image-only hero (.hp-hero) ─────────
   A single full-width courtroom photo with NO superimposed text, on a walnut
   backstop sampled from the photo's dark bottom edge so the shortcut band below
   reads as a continuation. The photo keeps its own short ~4.2:1 proportion
   (height:auto) — the court trimmed the previously-too-tall image.
   The one allowed homepage literal: --band-walnut (see homepage-three.css). */
.page-hero:has(.hp-hero) {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--band-walnut, #1e1410);
    border-bottom: none;
}
.hp-hero {
    display: block;
    width: 100%;
    background: var(--band-walnut, #1e1410);
    line-height: 0;
    text-decoration: none;
}
.hp-hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
/* The visually-hidden homepage H1 inherits body ink, which computes ~1:1
   against the walnut backstop. Contrast checkers (WAVE, axe) evaluate
   clipped text too, so give it a color that passes against the walnut. */
.page-hero:has(.hp-hero) .sr-only {
    color: #fff;
}

/* The banner is edge-to-edge within the content max-width. Neutralize
   the default .page-hero wrapper styles (padding/background/border)
   and align it with .site-masthead's max-width so the side margins
   match. */
.page-hero:has(.banner-hero) {
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-bottom: none;
}

.banner-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Matches export3/index.html line 1581 exactly: minHeight:360, flex,
   alignItems:flex-end. */
.banner-hero--photo {
    min-height: 360px;
    display: flex;
    align-items: flex-end;
}

.banner-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}

/* Legibility scrim — horizontal: darkens the left half where the text sits. */
.banner-hero__scrim--horiz {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 14, 22, 0.86) 0%,
        rgba(10, 14, 22, 0.66) 42%,
        rgba(10, 14, 22, 0.18) 78%,
        rgba(10, 14, 22, 0.05) 100%);
    pointer-events: none;
}

/* Legibility scrim — vertical: subtle top + bottom darkening. */
.banner-hero__scrim--vert {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 14, 22, 0.28) 0%,
        rgba(10, 14, 22, 0) 30%,
        rgba(10, 14, 22, 0) 55%,
        rgba(10, 14, 22, 0.45) 100%);
    pointer-events: none;
}

.banner-hero__content {
    position: relative;
    max-width: 720px;
    padding: 40px;
}

.banner-hero__eyebrow {
    color: #fff;
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 18px;
}

/* Class beats the theme's `h1 { color: var(--c-ink) }` rule on specificity. */
.banner-hero__headline {
    color: #fff;
    font-family: var(--f-display);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.banner-hero__subhead {
    color: #fff;
    font-family: var(--f-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    margin-top: 22px;
    max-width: 560px;
    opacity: 0.92;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}

/* Statement fallback — neutral block until other modes are ported. */
.banner-hero--statement {
    background: var(--color-accent, #6b1d23);
    color: var(--color-accent-ink, #fff);
    padding: 64px 40px 80px;
}

.banner-hero--statement .banner-hero__headline {
    text-shadow: none;
}

.banner-hero--statement .banner-hero__subhead {
    text-shadow: none;
}

/* Responsive: shrink type on narrow viewports. */
@media (max-width: 768px) {
    .banner-hero--photo {
        min-height: 360px;
    }
    .banner-hero__content {
        padding: 24px 20px;
    }
    .banner-hero__headline {
        font-size: 36px;
    }
    .banner-hero__subhead {
        font-size: 16px;
        margin-top: 16px;
    }
}

/* component: brand-header.css */
/* Brand identity — masthead variant per claude-design-export5. Seal 84px +
   stacked text, with chief judge / clerk restored beneath the wordmark
   (export3 had hidden them; export5 brings them back into the masthead and
   removes them from the photo hero):
     "Fifth Circuit"        : 600 18px/1.15 display, letter-spacing 0.005em
     "U.S. Court of Appeals": 400 11px/1.3 sans, ink-2, uppercase, ls 0.04em
       (design export said inkMuted/ink-3, but at 11px that misses WCAG
       contrast on several theme surfaces — ink-2 clears 7:1 everywhere)
     officers               : 400 12px/1.5 sans, ink-2, name + ", " + title
*/

.brand-header__inner {
  display: flex;
  align-items: center;
  gap: 14px;          /* export3 line 1523 */
  padding: 0;          /* the brand-row wrapper provides padding */
}

.brand-header__seal {
  width: 84px;         /* export5 had 72; enlarged per judge feedback 2026-07 */
  height: 84px;
  display: block;
}

.brand-header__seal-link { display: inline-block; line-height: 0; }
.brand-header__name-link {
  color: var(--c-ink);
  text-decoration: none;
}

.brand-header__court-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--c-ink);
}

.brand-header__court-subtitle {
  display: block;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-2);  /* ink-3 fails contrast at this size; see header note */
}

/* Officers (chief judge + clerk) — letterhead-style lines under the
   wordmark, restored to the masthead in export5. */
.brand-header__officers {
  margin-top: 5px;
}
.brand-header__officer {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-ink-2);  /* inkSoft */
}

/* Utility links still don't belong in this compact identity block. */
.brand-header__utility {
  display: none;
}

@media (max-width: 640px) {
  .brand-header__seal { width: 64px; height: 64px; }
}

/* component: breadcrumb.css */
.breadcrumb {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--s-3) var(--s-5) 0;
  font-size: var(--t-sm);
  color: var(--c-ink-3);
}
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--s-1); }
.breadcrumb a { color: var(--c-link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { color: var(--c-ink-3); padding: 0 var(--s-1); }
[aria-current="page"] { color: var(--c-ink); font-weight: 600; }

@media (max-width: 600px) { .breadcrumb { padding: var(--s-3) var(--s-4) 0; } }

/* component: ca5-live-player.css */
/* ============================================================================
   CA5 live-audio player (.ca5player) — the shared "now playing" panel created by
   ca5-live-player.js. It renders EMBEDDED, in-flow, inside a page's
   [data-ca5-player-slot]; it is hidden unless a feed is playing, and is
   self-contained (no dependency on page tokens beyond the theme variables that
   exist on every page).
   ============================================================================ */
.ca5player {
  margin: 0 0 18px;
  background: var(--c-bg-elev, #fff); border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.ca5player[hidden] { display: none !important; }   /* beat the base display */
.ca5player__in { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }

.ca5player__toggle {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
.ca5player__toggle:hover { filter: brightness(.96); }
.ca5player__toggle svg { width: 20px; height: 20px; fill: currentColor; }

.ca5player__meta { flex: 1 1 auto; min-width: 0; }
.ca5player__k { font-weight: 600; font-size: 14px; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca5player__s { font-size: 12.5px; color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.ca5player__live {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c62f2f;
}
.ca5player__live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e23b3b;
  box-shadow: 0 0 0 3px rgba(226, 59, 59, .18);
}

.ca5player__close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--c-line); background: transparent; color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center;
}
.ca5player__close:hover { color: var(--c-ink); border-color: var(--c-ink-3); }
.ca5player__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.ca5player audio { display: none; }

@media (max-width: 560px) {
  .ca5player__in { flex-wrap: wrap; }
  .ca5player__meta { flex-basis: 100%; order: 3; }
  .ca5player__live { display: none; }
}

/* component: calendars.css */
/* Court Calendars — ported from the design handoff calendars.css.
   Already token-based (var(--c-*)/var(--f-*)); chrome lives in the site template.
   LIVE-state reds kept literal per the handoff (intentional exception). */

/* Base primitives the prototype inherited from opinions.css (discarded chrome).
   Re-declared here scoped to .ca5-cal, the same way recordings-browser.css does
   for .ca5-recordings — icons, links, focus ring, ghost buttons, helper text. */
.ca5-cal svg.i{
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex:0 0 auto;
}
.ca5-cal a{color:var(--c-link); text-decoration:none;}
.ca5-cal a:hover{text-decoration:underline;}
.ca5-cal :focus-visible{outline:2px solid var(--c-focus); outline-offset:2px; border-radius:3px;}
.ca5-cal .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit;
  font-size:15px; font-weight:600; padding:11px 18px; border-radius:9px; cursor:pointer;
  border:1px solid transparent; min-height:44px; text-decoration:none;
}
.ca5-cal .btn--ghost{background:var(--c-bg-elev); color:var(--c-ink-2); border-color:var(--c-line);}
.ca5-cal .btn--ghost:hover{background:var(--c-bg-sunk); text-decoration:none;}
.ca5-cal .note{font-size:14px; color:var(--c-ink-3); line-height:1.5; margin:18px 0;}
.ca5-cal .empty{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  background:var(--c-bg-elev); border:1px solid var(--c-line); border-radius:12px;
  padding:22px 24px; color:var(--c-ink-2); font-size:15px; margin:18px 0;
}
.ca5-cal .empty strong{font-family:var(--f-serif); font-size:18px; color:var(--c-ink);}
/* Per-case special note (only renders when the source carries one). */
.ca5-cal .ct-note{display:flex; gap:6px; align-items:flex-start; margin-top:5px;
  font-family:var(--f-sans); font-size:12.5px; line-height:1.35; color:var(--c-gold);}
.ca5-cal .ct-note svg{width:14px; height:14px; color:var(--c-gold); flex:0 0 auto; margin-top:1px;}
/* Date shown inside the "This day" toggle so its target is clear from week view. */
.ca5-cal .viewseg__sub{font-weight:500; opacity:.72;}

/* ============================================================================
   CA5 Court Calendars — page-specific styles
   Loads AFTER opinions.css (shell + design tokens). Adds the next-sitting
   banner, the by-case finder, the three browse views (agenda / month grid /
   week cards), the archive block, and the daily-sitting detail (panel + case
   table). Inherits host theme + dark mode through the tokens.
   ============================================================================ */

/* nature category colors — derived from the navy/gold palette via mixes so they
   stay in-theme and follow dark mode (the tokens shift, these follow). */
.ca5-cal{
  --n-crim:#8a3324; --n-civ:#1d3b5e; --n-imm:#3d6b54; --n-agc:#8a6d2f;
  --n-cr:#5a3d7a;   --n-emp:#1f6b73; --n-bkr:#6b5644; --n-hab:#7a2f4f;
}

/* ── View toggle row ─────────────────────────────────────────────────────── */
.calbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px;}
.calbar__title{font-family:var(--f-serif); font-weight:500; font-size:24px; line-height:1.2; color:var(--c-ink); margin:0;}
.calbar__title .n{font-family:var(--f-sans); font-size:14px; font-weight:500; color:var(--c-ink-3); margin-left:10px;}
.viewseg{display:inline-flex; border:1px solid var(--c-line); border-radius:9px; overflow:hidden; background:var(--c-bg-elev);}
.viewseg button{display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; font:inherit;
  font-size:13.5px; font-weight:600; color:var(--c-ink-3); padding:9px 15px; cursor:pointer; transition:.12s;}
.viewseg button + button{border-left:1px solid var(--c-line);}
.viewseg button:hover{color:var(--c-accent);}
.viewseg button.is-active{background:var(--c-accent); color:#fff;}
.viewseg svg{width:16px; height:16px;}

/* ── Next sitting banner ─────────────────────────────────────────────────── */
.nextsit{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px;
  background:var(--c-accent); color:#fff; border-radius:16px; padding:24px 28px; margin:0 0 30px;}
.nextsit__date{text-align:center; line-height:1; border-right:1px solid rgba(255,255,255,.22); padding-right:26px;}
.nextsit__dow{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.8;}
.nextsit__day{font-family:var(--f-serif); font-size:52px; font-weight:500; margin:4px 0 2px;}
.nextsit__mon{font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.85;}
.nextsit__body{min-width:0;}
.nextsit__eyebrow{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.8;}
.nextsit__week{font-family:var(--f-serif); font-size:24px; font-weight:500; line-height:1.25; margin:5px 0 8px;}
.nextsit__meta{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14px; opacity:.9;}
.nextsit__meta span{display:inline-flex; align-items:center; gap:7px;}
.nextsit__meta svg{width:15px; height:15px; opacity:.85;}
.nextsit__btn{flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--c-accent);
  font-weight:600; font-size:15px; padding:12px 20px; border-radius:10px; white-space:nowrap;}
.nextsit__btn:hover{text-decoration:none; filter:brightness(.97);}
.nextsit__btn svg{width:17px; height:17px;}

/* ── By-case finder ──────────────────────────────────────────────────────── */
.finder{display:flex; align-items:center; gap:16px; background:var(--c-bg-elev); border:1px solid var(--c-line);
  border-radius:14px; padding:18px 22px;}
.finder__text{flex:0 0 auto;}
.finder__text h3{font-family:var(--f-serif); font-weight:500; font-size:18px; margin:0; color:var(--c-ink); white-space:nowrap;}
.finder__text p{margin:2px 0 0; font-size:13px; color:var(--c-ink-3);}
.finder__inputwrap{position:relative; flex:1;}
.finder__inputwrap svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--c-ink-3);}
.finder input{width:100%; border:1px solid var(--c-line); border-radius:10px; background:var(--c-bg-elev);
  padding:12px 14px 12px 42px; font:inherit; font-size:15px; color:var(--c-ink);}
.finder input:focus{outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft);}
.finder input::placeholder{color:var(--c-ink-3);}

.finder-results{margin:14px 0 0; border:1px solid var(--c-line); border-radius:12px; overflow:hidden; background:var(--c-bg-elev);}
.finder-results.is-empty{border-style:dashed; background:transparent;}
.fhit{display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:16px; padding:13px 18px; color:var(--c-ink);}
.fhit + .fhit{border-top:1px solid var(--c-line-soft);}
.fhit:hover{background:var(--c-bg-sunk); text-decoration:none;}
.fhit__docket{font-family:var(--f-mono); font-size:13px; color:var(--c-link); font-weight:500;}
.fhit__cap{font-family:var(--f-serif); font-size:16.5px; line-height:1.3; min-width:0;}
.fhit__when{font-size:13px; color:var(--c-ink-3); white-space:nowrap; text-align:right;}
.fhit__when strong{display:block; color:var(--c-ink); font-weight:600;}
.finder-note{padding:18px; font-size:14px; color:var(--c-ink-3); text-align:center;}

.section-rule{display:flex; align-items:center; gap:14px; margin:38px 0 22px;}
.section-rule h2{font-family:var(--f-serif); font-weight:500; font-size:22px; margin:0; color:var(--c-ink); white-space:nowrap;}
.section-rule::after{content:""; flex:1; height:1px; background:var(--c-line);}

/* ── View A: Agenda (court week → day cards) ─────────────────────────────── */
.agenda{display:flex; flex-direction:column; gap:30px;}
.weekblock__head{display:flex; align-items:baseline; gap:12px; margin:0 0 14px; padding-bottom:9px; border-bottom:2px solid var(--c-ink);}
.weekblock__label{font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3);}
.weekblock__range{font-family:var(--f-serif); font-size:20px; font-weight:500; color:var(--c-ink);}
.weekblock__city{margin-left:auto; font-size:13px; color:var(--c-ink-3);}
.daycards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;}
.daycard{display:flex; flex-direction:column; border:1px solid var(--c-line); border-radius:14px; background:var(--c-bg-elev);
  padding:0; overflow:hidden; color:var(--c-ink); transition:border-color .12s, box-shadow .12s, transform .12s;}
.daycard:hover{text-decoration:none; border-color:var(--c-accent); box-shadow:0 6px 22px rgba(29,59,94,.10); transform:translateY(-2px);}
.daycard__top{display:flex; align-items:center; gap:14px; padding:16px 18px 14px;}
.daycard__cal{flex:0 0 auto; width:54px; border:1px solid var(--c-line); border-radius:10px; overflow:hidden; text-align:center; background:var(--c-bg);}
.daycard__cal .m{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--c-accent); color:#fff; padding:3px 0;}
.daycard__cal .d{font-family:var(--f-serif); font-size:26px; font-weight:500; line-height:1; padding:6px 0 7px; color:var(--c-ink);}
.daycard__head{min-width:0;}
.daycard__dow{font-family:var(--f-serif); font-size:19px; font-weight:500; color:var(--c-ink); line-height:1.15;}
.daycard__count{font-size:13px; color:var(--c-ink-3); margin-top:3px;}
.daycard__panel{padding:0 18px 14px; display:flex; flex-wrap:wrap; gap:6px;}
.daycard__panel--tba{align-items:center; gap:7px; font-size:12.5px; color:var(--c-ink-3); font-style:italic;}
.daycard__panel--tba svg{width:15px; height:15px; opacity:.7;}
.judge{display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color:var(--c-accent);
  background:var(--c-accent-soft); border-radius:999px; padding:4px 11px;}
.daycard__cases{list-style:none; margin:0; padding:6px 18px 8px; border-top:1px solid var(--c-line-soft); flex:1;}
.daycard__case{display:flex; align-items:baseline; gap:9px; padding:5px 0; font-size:13.5px; line-height:1.4;}
.daycard__case + .daycard__case{border-top:1px dotted var(--c-line-soft);}
.ndot{flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:6px;}
.daycard__case .cap{color:var(--c-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.daycard__more{font-size:12.5px; color:var(--c-ink-3); padding:4px 0 0;}
.daycard__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px;
  border-top:1px solid var(--c-line-soft); background:var(--c-bg-sunk); margin-top:auto;}
.daycard__loc{font-size:12px; color:var(--c-ink-3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.daycard__link{font-size:13px; font-weight:600; color:var(--c-accent); display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.daycard__link svg{width:15px; height:15px;}

/* nature dot palette */
.ndot.crim{background:var(--n-crim);} .ndot.civ{background:var(--n-civ);} .ndot.imm{background:var(--n-imm);}
.ndot.agc{background:var(--n-agc);} .ndot.cr{background:var(--n-cr);} .ndot.emp{background:var(--n-emp);}
.ndot.bkr{background:var(--n-bkr);} .ndot.hab{background:var(--n-hab);}

/* ── View B: Month grid ──────────────────────────────────────────────────── */
.monthnav{display:flex; align-items:center; justify-content:center; gap:18px; margin:0 0 16px;}
.monthnav h3{font-family:var(--f-serif); font-weight:500; font-size:22px; margin:0; color:var(--c-ink); min-width:230px; text-align:center;}
.monthnav button{width:40px; height:40px; border:1px solid var(--c-line); border-radius:10px; background:var(--c-bg-elev);
  color:var(--c-ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.monthnav button:hover{border-color:var(--c-accent); color:var(--c-accent);}
.monthnav button:disabled{opacity:.35; pointer-events:none;}
.monthnav button svg{width:18px; height:18px;}
.monthgrid{border:1px solid var(--c-line); border-radius:14px; overflow:hidden; background:var(--c-bg-elev);}
.monthgrid__dows{display:grid; grid-template-columns:repeat(7,1fr); background:var(--c-bg-sunk); border-bottom:1px solid var(--c-line);}
.monthgrid__dows span{padding:10px 12px; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--c-ink-3);}
.monthgrid__week{display:grid; grid-template-columns:repeat(7,1fr);}
.monthgrid__week + .monthgrid__week{border-top:1px solid var(--c-line-soft);}
.mcell{min-height:118px; padding:9px 10px; border-right:1px solid var(--c-line-soft); position:relative; color:var(--c-ink);}
.mcell:nth-child(7n){border-right:0;}
.mcell--empty{background:var(--c-bg-sunk); opacity:.4;}
.mcell--weekend{background:color-mix(in srgb, var(--c-bg-sunk) 45%, transparent);}
.mcell__num{font-size:13px; font-weight:600; color:var(--c-ink-3); font-variant-numeric:tabular-nums;}
.mcell--today .mcell__num{background:var(--c-accent); color:#fff; border-radius:50%; width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;}
.mcell--sitting{cursor:pointer;}
.mcell--sitting:hover{text-decoration:none; background:var(--c-accent-soft);}
/* Already-heard days this month: present but muted. */
.mcell--heard .mevent{border-left-color:var(--c-line); background:var(--c-bg-sunk);}
.mcell--heard .mevent__t{color:var(--c-ink-3);}
.mevent{display:block; margin-top:7px; border-left:3px solid var(--c-accent); background:var(--c-accent-soft);
  border-radius:0 7px 7px 0; padding:6px 8px;}
.mevent__t{font-size:12.5px; font-weight:600; color:var(--c-accent); line-height:1.2;}
.mevent__s{font-size:11.5px; color:var(--c-ink-3); margin-top:2px; line-height:1.3;}
.mevent__dots{display:flex; gap:3px; margin-top:5px;}
.mevent__dots .ndot{width:6px; height:6px; margin:0;}

/* ── View C: Week cards (compact horizontal weeks) ───────────────────────── */
.weekrows{display:flex; flex-direction:column; gap:18px;}
.weekrow{border:1px solid var(--c-line); border-radius:14px; overflow:hidden; background:var(--c-bg-elev);}
.weekrow__head{display:flex; align-items:center; gap:12px; padding:13px 20px; background:var(--c-bg-sunk); border-bottom:1px solid var(--c-line);}
.weekrow__range{font-family:var(--f-serif); font-size:18px; font-weight:500; color:var(--c-ink);}
.weekrow__city{margin-left:auto; font-size:13px; color:var(--c-ink-3); display:inline-flex; align-items:center; gap:7px;}
.weekrow__city svg{width:14px; height:14px;}
.weekrow__days{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.minday{padding:15px 18px; border-right:1px solid var(--c-line-soft); color:var(--c-ink); display:flex; flex-direction:column; gap:9px;}
.minday:last-child{border-right:0;}
.minday:hover{text-decoration:none; background:var(--c-bg-sunk);}
.minday__date{font-family:var(--f-serif); font-size:17px; font-weight:500; color:var(--c-ink);}
.minday__date span{font-family:var(--f-sans); font-size:13px; font-weight:500; color:var(--c-ink-3); margin-left:6px;}
.minday__panel{font-size:12.5px; color:var(--c-ink-3); line-height:1.5;}
.minday__panel b{color:var(--c-ink-2); font-weight:600;}
.minday__foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.minday__count{font-size:12.5px; font-weight:600; color:var(--c-accent);}
.minday__dots{display:flex; gap:4px;}

/* ── Archive ─────────────────────────────────────────────────────────────── */
.archive{border:1px solid var(--c-line); border-radius:14px; overflow:hidden; background:var(--c-bg-elev);}
.archive__row{display:grid; grid-template-columns:90px 1fr; align-items:center; gap:20px; padding:16px 22px;}
.archive__row + .archive__row{border-top:1px solid var(--c-line-soft);}
.archive__year{font-family:var(--f-serif); font-size:22px; font-weight:500; color:var(--c-ink);}
.archive__months{display:flex; flex-wrap:wrap; gap:7px;}
.archive__m{font-size:13px; font-weight:500; color:var(--c-ink-2); border:1px solid var(--c-line); border-radius:7px;
  padding:6px 12px; background:var(--c-bg-elev);}
.archive__m:hover{text-decoration:none; border-color:var(--c-accent); color:var(--c-accent); background:var(--c-accent-soft);}
.archive__legacy{margin-top:14px;}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:16px 2px 0; font-size:12.5px; color:var(--c-ink-3);}
.legend span{display:inline-flex; align-items:center; gap:7px;}
.legend .ndot{width:9px; height:9px; margin:0;}

/* ════════════════════════════════════════════════════════════════════════
   Daily sitting detail page
   ════════════════════════════════════════════════════════════════════════ */
.sit-switch{display:flex; align-items:center; gap:10px; margin:0 0 22px;}
.sit-switch a{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--c-ink-2);
  border:1px solid var(--c-line); border-radius:9px; padding:9px 14px; background:var(--c-bg-elev);}
.sit-switch a:hover{text-decoration:none; border-color:var(--c-accent); color:var(--c-accent);}
.sit-switch a svg{width:16px; height:16px;}
.sit-switch .sit-switch__spacer{flex:1;}

/* panel band */
.sitpanel{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; background:var(--c-accent); color:#fff;
  border-radius:16px; padding:24px 28px; margin:0 0 26px;}
.sitpanel__label{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.8; margin-bottom:12px;}
.sitpanel__judges{display:flex; flex-wrap:nowrap; gap:10px;}
.sitpanel__judge{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.12);
  border-radius:999px; padding:8px 16px 8px 9px; font-size:15px; font-weight:500; white-space:nowrap;}
.sitpanel__av{width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.2); display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700; letter-spacing:.02em; flex:0 0 auto;}
.sitpanel__tba{display:inline-flex; align-items:center; gap:10px; font-size:15px; color:#fff; opacity:.82;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:11px; padding:11px 16px;}
.sitpanel__tba svg{width:18px; height:18px; opacity:.9; flex:0 0 auto;}
.sitpanel__meta{text-align:right; font-size:14px; line-height:1.7; opacity:.92;}
.sitpanel__meta div:first-child{font-family:var(--f-serif); font-size:17px; opacity:1; margin-bottom:2px;}

/* important notes */
.sitnotes{display:flex; gap:14px; background:var(--c-gold-soft); border:1px solid color-mix(in srgb, var(--c-gold) 35%, transparent);
  border-radius:12px; padding:16px 20px; margin:0 0 26px;}
.sitnotes__icon{flex:0 0 auto; color:var(--c-gold);}
.sitnotes__icon svg{width:22px; height:22px;}
.sitnotes__body h3{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--c-gold); margin:1px 0 7px;}
.sitnotes__body ul{margin:0; padding-left:18px;}
.sitnotes__body li{font-size:14.5px; line-height:1.55; color:var(--c-ink-2); margin:4px 0;}

/* case table */
.casetable-wrap{border:1px solid var(--c-line); border-radius:14px; overflow:hidden; background:var(--c-bg-elev);}
.casetable{width:100%; border-collapse:collapse;}
.casetable thead th{text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-ink-3); padding:13px 16px; background:var(--c-bg-sunk); border-bottom:2px solid var(--c-ink); white-space:nowrap;}
.casetable tbody td{padding:15px 16px; border-top:1px solid var(--c-line-soft); vertical-align:top; font-size:14.5px;}
.casetable tbody tr:hover{background:var(--c-bg-sunk);}
.ct-time{font-family:var(--f-mono); font-size:13.5px; color:var(--c-ink-2); white-space:nowrap; font-variant-numeric:tabular-nums;}
.ct-docket a{font-family:var(--f-mono); font-size:13.5px; color:var(--c-link); font-weight:500; white-space:nowrap;}
.ct-case{min-width:240px;}
.ct-case .cap{font-family:var(--f-serif); font-size:17px; line-height:1.3; color:var(--c-ink);}
.ct-nature{white-space:nowrap;}
.ntag{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--c-ink-2);}
.ct-origin{color:var(--c-ink-3); white-space:nowrap; font-size:13.5px;}
.ct-perside{white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--c-ink-2); font-size:13.5px;}
.ct-sub{font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--c-ink-3); background:var(--c-bg-sunk);
  border:1px solid var(--c-line); border-radius:6px; padding:3px 9px; white-space:nowrap;}
.casetable tbody tr.is-sub td{background:color-mix(in srgb, var(--c-bg-sunk) 50%, transparent);}

.sit-foot{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-top:22px;}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .nextsit{grid-template-columns:auto 1fr; gap:18px 22px;}
  .nextsit__btn{grid-column:1 / -1; justify-content:center;}
  .finder{flex-wrap:wrap; gap:12px;}
  .finder__text h3{white-space:normal;}
  .calbar{gap:12px;}
  .viewseg{width:100%;}
  .viewseg button{flex:1; justify-content:center;}
  .daycards{grid-template-columns:1fr;}
  .mcell{min-height:74px; padding:6px 6px;}
  .mevent__s,.mevent__dots{display:none;}
  .mevent__t{font-size:11px;}
  .sitpanel{grid-template-columns:1fr; gap:16px;}
  .sitpanel__meta{text-align:left;}
  .casetable thead{display:none;}
  .casetable, .casetable tbody, .casetable tr, .casetable td{display:block; width:100%;}
  .casetable tbody tr{padding:12px 14px; border-top:1px solid var(--c-line);}
  .casetable tbody td{padding:3px 0; border:0;}
  .ct-case .cap{font-size:16px;}
  .fhit{grid-template-columns:1fr; gap:4px;}
  .fhit__when{text-align:left;}
  .archive__row{grid-template-columns:1fr; gap:10px;}
}
@media (max-width:560px){
  .nextsit{grid-template-columns:1fr;}
  .nextsit__date{border-right:0; border-bottom:1px solid rgba(255,255,255,.22); padding-right:0; padding-bottom:16px;}
}

/* ════════════════════════════════════════════════════════════════════════
   Multi-panel days, live state, and per-case audio (June 24 revision)
   ════════════════════════════════════════════════════════════════════════ */

/* live dot + tag */
@keyframes ca5pulse{0%{box-shadow:0 0 0 0 rgba(176,42,42,.55);}70%{box-shadow:0 0 0 7px rgba(176,42,42,0);}100%{box-shadow:0 0 0 0 rgba(176,42,42,0);}}
.livedot{display:inline-block; width:9px; height:9px; border-radius:50%; background:#e23b3b; flex:0 0 auto;
  animation:ca5pulse 1.8s infinite;}
.livedot--sm{width:7px; height:7px;}
.livetag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#c62f2f; background:#fdeaea; border:1px solid #f4caca; border-radius:999px;
  padding:2px 9px 2px 7px; vertical-align:middle;}
@media (prefers-reduced-motion:reduce){.livedot{animation:none;}}

/* hub live banner variant */
.nextsit--live{background:linear-gradient(120deg, #1d3b5e, #25496f);}
.nextsit__eyebrow--live{display:inline-flex; align-items:center; gap:8px; color:#ffd9d9;}
.nextsit__eyebrow--live .livedot{background:#ff5b5b;}
.nextsit__livedot{display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.nextsit__livedot .livedot{width:12px; height:12px; background:#ff5b5b;}

/* hub "arguments today, not on the air yet" — muted, not the live treatment */
.nextsit--today{background:var(--c-accent-soft); color:var(--c-ink);}
.nextsit--today .nextsit__date{border-right-color:var(--c-line);}
.nextsit--today .nextsit__dow,.nextsit--today .nextsit__mon,
.nextsit--today .nextsit__eyebrow,.nextsit--today .nextsit__meta{opacity:1; color:var(--c-ink-2);}
.nextsit--today .nextsit__btn{background:var(--c-accent); color:#fff;}

/* day-card: multi-panel summary */
.daycard__city{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--c-ink-3); margin-top:4px;}
.daycard__city svg{width:14px; height:14px; opacity:.7;}
.daycard--live{border-color:#f0c9c9;}
.daycard--live:hover{border-color:#e23b3b; box-shadow:0 6px 22px rgba(200,47,47,.12);}
.daycard__tba{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--c-ink-3); font-style:italic;
  padding:2px 18px 10px;}
.daycard__tba svg{width:15px; height:15px; opacity:.7;}
.daycard__panels{list-style:none; margin:0; padding:6px 18px 10px; border-top:1px solid var(--c-line-soft); flex:1;}
.pl{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0; font-size:13.5px; line-height:1.4;}
.pl + .pl{border-top:1px dotted var(--c-line-soft);}
.pl__room{font-weight:600; color:var(--c-ink-2); white-space:nowrap;}
.pl__judges{color:var(--c-ink-3); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pl__count{color:var(--c-accent); font-weight:600; white-space:nowrap;}
.pl__more{color:var(--c-ink-3); font-size:12.5px; justify-content:flex-start;}
.daycard__dotsrow{display:flex; gap:4px;}
.daycard__dotsrow .ndot{width:8px; height:8px; margin:0;}

.minday--live{outline:2px solid #f0c9c9; outline-offset:-2px;}
.mcell--live .mevent{border-left-color:#e23b3b; background:#fdeaea;}
.mcell--live .mevent__t{color:#c62f2f;}

.fhit__room{display:block; font-size:12px; color:var(--c-ink-3); margin-top:2px;}

/* ── detail: day summary strip ── */
.sitsummary{display:flex; flex-wrap:wrap; gap:10px 26px; padding:4px 0 22px; margin-bottom:22px; border-bottom:1px solid var(--c-line);}
.sitsummary span{display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--c-ink-2);}
.sitsummary svg{width:17px; height:17px; color:var(--c-ink-3);}

/* ── detail: live banner ── */
.livebanner{display:flex; align-items:center; gap:16px; background:#fdeaea; border:1px solid #f4caca;
  border-radius:14px; padding:18px 22px; margin:0 0 24px;}
.livebanner__dot{flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid #f4caca;
  display:flex; align-items:center; justify-content:center;}
.livebanner__dot .livedot{width:14px; height:14px;}
.livebanner__text{flex:1; min-width:0;}
.livebanner__k{font-family:var(--f-serif); font-size:19px; font-weight:500; color:#a02020; line-height:1.25;}
.livebanner__s{font-size:14px; line-height:1.5; color:var(--c-ink-2); margin-top:3px;}

/* detail: "arguments today, not on the air yet" — muted, no red "live" tone */
.livebanner--pending{background:var(--c-accent-soft); border-color:var(--c-line);}
.livebanner--pending .livebanner__dot{border-color:var(--c-line);}
.livebanner--pending .livebanner__dot .livedot{background:var(--c-ink-3); animation:none;}
.livebanner--pending .livebanner__k{color:var(--c-ink);}

/* ── detail: city group ── */
.citygroup + .citygroup{margin-top:30px;}
.citygroup__head{display:flex; align-items:center; gap:9px; font-family:var(--f-serif); font-size:21px; font-weight:500;
  color:var(--c-ink); margin:0 0 14px; padding-bottom:9px; border-bottom:2px solid var(--c-ink);}
.citygroup__head svg{width:19px; height:19px; color:var(--c-accent);}

/* ── detail: panel card ── */
.panelcard{border:1px solid var(--c-line); border-radius:14px; overflow:hidden; background:var(--c-bg-elev); margin-bottom:20px;}
.panelcard__head{display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--c-accent); color:#fff; padding:16px 20px;}
.panelcard__roomwrap{flex:0 0 auto; min-width:180px;}
.panelcard__room{display:flex; align-items:center; gap:9px; font-family:var(--f-serif); font-size:19px; font-weight:500;}
.panelcard__room svg{width:18px; height:18px; opacity:.85;}
.panelcard__sub{font-size:12.5px; opacity:.75; margin-top:3px; padding-left:27px;}
.panelcard__judges{display:flex; flex-wrap:nowrap; gap:8px; flex:1; justify-content:flex-end;}
.panelcard__judge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border-radius:999px;
  padding:6px 14px 6px 7px; font-size:14px; font-weight:500; white-space:nowrap;}
.panelcard__av{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.2); display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 auto;}
.panelcard__tba{display:inline-flex; align-items:center; gap:9px; font-size:14px; color:#fff; opacity:.82;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:9px 14px; flex:1; justify-content:flex-end; max-width:fit-content; margin-left:auto;}
.panelcard__tba svg{width:16px; height:16px;}
.panelcard__live{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; background:#e23b3b; color:#fff;
  font-family:inherit; border:0; cursor:pointer;
  font-weight:600; font-size:14px; padding:9px 16px; border-radius:9px; white-space:nowrap;}
.panelcard__live:hover{text-decoration:none; filter:brightness(1.06);}
.panelcard__live.is-playing{background:#a02020;}
.panelcard__live svg{width:16px; height:16px;}
.panelcard--live .panelcard__head{background:linear-gradient(120deg,#1d3b5e,#2a4d72);}

.panelnote{display:flex; align-items:flex-start; gap:10px; background:var(--c-gold-soft); color:var(--c-ink-2);
  font-size:13.5px; line-height:1.5; padding:11px 18px; border-bottom:1px solid var(--c-line-soft);}
.panelnote svg{width:17px; height:17px; color:var(--c-gold); flex:0 0 auto; margin-top:1px;}
.panelcard .casetable-wrap{border:0; border-radius:0;}

/* ── case table: session subhead + audio column ── */
.ct-session td{background:var(--c-bg-sunk); font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--c-ink-3); padding:8px 16px !important; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line-soft);}
.ct-audio{white-space:nowrap;}
.aud{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;}
.aud--play{color:var(--c-accent);}
.aud--play svg{width:15px; height:15px;}
.aud--play:hover{text-decoration:none; filter:brightness(1.1);}
.aud--live{color:#c62f2f; background:#fdeaea; border:1px solid #f4caca; border-radius:999px; padding:4px 11px 4px 9px;}
.aud--live:hover{text-decoration:none; filter:brightness(1.03);}
.aud--pending{color:var(--c-ink-3); font-weight:500; font-style:italic;}
.aud--upcoming{color:var(--c-ink-3); font-weight:500;}
.aud--upcoming svg{width:14px; height:14px; opacity:.7;}
.aud--na{color:var(--c-ink-3); font-weight:500;}
/* highlight the case currently at the podium on a live day */
.casetable tbody tr.is-live{background:#fdeaea;}
.casetable tbody tr.is-live:hover{background:#fce0e0;}
.casetable tbody tr.is-live .ct-time{box-shadow:inset 3px 0 0 #e23b3b;}

@media (max-width:980px){
  .panelcard__head{gap:12px;}
  .panelcard__judges{flex-wrap:wrap; justify-content:flex-start; width:100%;}
  .panelcard__tba{justify-content:flex-start; margin-left:0;}
  .panelcard__live{width:100%; justify-content:center;}
  .sitsummary{gap:8px 18px;}
  .pl{flex-direction:column; gap:2px;}
  .pl__judges,.pl__room{text-align:left; white-space:normal;}
}

/* ── this-day / by-courtroom mode toggle ── */
.modebar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 22px;}
.modebar:empty{margin:0;}
.modebar__hint{font-size:13.5px; color:var(--c-ink-3); font-style:italic;}

/* ── by-courtroom (full week) grouping ── */
.roomgroup{margin-bottom:32px;}
.roomgroup__head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding-bottom:9px; border-bottom:2px solid var(--c-ink);}
.roomgroup__head svg{width:19px; height:19px; color:var(--c-accent);}
.roomgroup__name{font-family:var(--f-serif); font-size:21px; font-weight:500; color:var(--c-ink);}
.roomgroup__sub{font-size:13px; color:var(--c-ink-3);}
.roomday{border:1px solid var(--c-line); border-radius:14px; overflow:hidden; margin-bottom:14px; background:var(--c-bg-elev);}
.roomday--live{border-color:#f0c9c9;}
.roomday__bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 18px; background:var(--c-bg-sunk); border-bottom:1px solid var(--c-line);}
.roomday__date{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-serif); font-size:17px; font-weight:500; color:var(--c-ink);}
.roomday__date svg{width:16px; height:16px; color:var(--c-ink-3);}
.roomday__judges{display:flex; flex-wrap:wrap; gap:6px;}
.roomday__tba{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--c-ink-3); font-style:italic;}
.roomday__tba svg{width:15px; height:15px; opacity:.7;}
.roomday__live{margin-left:auto; display:inline-flex; align-items:center; gap:7px; background:#e23b3b; color:#fff;
  font-family:inherit; border:0; cursor:pointer;
  font-weight:600; font-size:13.5px; padding:8px 14px; border-radius:8px; white-space:nowrap;}
.roomday__live:hover{text-decoration:none; filter:brightness(1.06);}
.roomday__live.is-playing{background:#a02020;}
.roomday__live svg{width:15px; height:15px;}
.roomday .casetable-wrap{border:0; border-radius:0;}
@media (max-width:980px){
  .roomday__live{margin-left:0; width:100%; justify-content:center;}
}

/* component: callout-card.css */
.callout-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-bg-elev);
  box-shadow: var(--sh-1);
}
.callout-card--accent {
  background: var(--c-accent-soft);
  border-color: transparent;
}
.callout-card__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.callout-card--accent .callout-card__icon {
  background: var(--c-bg-elev);
}
.callout-card__body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 auto; min-width: 0; }
.callout-card__title {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  margin: 0;
}
.callout-card__copy { color: var(--c-ink-2); font-size: var(--t-sm); }
.callout-card__copy p { margin: 0 0 var(--s-2); }
.callout-card__copy p:last-child { margin: 0; }
.callout-card__cta {
  align-self: flex-start;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-link);
}
.callout-card__cta:hover { text-decoration: underline; }

/* component: child-page-grid.css */
/* No outer margin: the page-main grid `gap` separates this from the body
   above. An extra top margin here just stacked on the gap (~80px total). */
.child-page-grid { margin: 0; }
.child-page-grid__heading {
  font-size: var(--t-xl);
  margin-bottom: var(--s-4);
}
.child-page-grid__empty { color: var(--c-ink-3); font-style: italic; }
.child-page-grid__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.child-page-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s;
}
.child-page-card:hover { border-color: var(--c-accent); box-shadow: var(--sh-1); }
.child-page-card__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--c-ink);
}
.child-page-card__summary { color: var(--c-ink-3); font-size: var(--t-sm); }

@media (max-width: 1100px) { .child-page-grid__items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .child-page-grid__items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .child-page-grid__items { grid-template-columns: 1fr; } }

/* component: conduct-browser.css */
/* ============================================================================
   CA5 Judicial Conduct Matters — page styles.
   Thin layer on top of news-browser.css: reuses the browse toolbar (.nx-bar),
   month groups (.nx-mg) and row cards (.nx-rows / .nx-row), and only re-shapes
   the row into three columns (Closed · Complaint No. · Order) and styles the
   complaint number + the PDF affordance. Token-inheriting: the PDF pill uses
   the same sunk-surface pairing as the News "Order" tag so dark mode is free.
   ============================================================================ */

/* keyword box on its own line above the list (no category chips here) */
.jcm-find { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
  margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--c-line); }
.jcm-find .nx-search { margin-left: 0; }
.jcm-find__count { font-size: 13px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; margin-left: auto; }

/* three-column rows */
.jcm-rows .nx-rows__head,
.jcm-rows .nx-row { grid-template-columns: 150px minmax(0, 1fr) 92px; gap: 22px; align-items: center; }

/* complaint number reads best in tabular sans, not the serif headline face */
.jcm-rows .nx-row__title { font-family: var(--f-sans); font-size: 16px; font-weight: 600;
  letter-spacing: 0; color: var(--c-link); font-variant-numeric: tabular-nums; }

/* order (PDF) affordance, right-aligned */
.jcm-doc { justify-self: end; display: inline-flex; align-items: center; gap: 9px; }
.jcm-pdf { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ink-2); background: var(--c-bg-sunk); padding: 3px 8px; border-radius: 5px; }
.jcm-arw { width: 15px; height: 15px; fill: none; stroke: var(--c-ink-3); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.jcm-rows .nx-row:hover .jcm-arw { stroke: var(--c-accent); }
.jcm-doc--none { color: var(--c-ink-3); }

/* withdrawn tag beside the complaint number */
.jcm-status { font-family: var(--f-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-ink-2); background: var(--c-bg-sunk);
  padding: 3px 8px; border-radius: 5px; margin-left: 10px; vertical-align: 2px; }

/* matters without an order document render as a static (non-link) row */
.jcm-rows .nx-row--static { cursor: default; }
.jcm-rows .nx-row--static:hover { background: transparent; }
.jcm-rows .nx-row--static .nx-row__title { color: var(--c-ink); }
.jcm-rows .nx-row--static:hover .nx-row__title { text-decoration: none; }

@media (max-width: 980px) {
  .jcm-rows .nx-row { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .jcm-rows .nx-row__date { order: 1; }
  .jcm-rows .jcm-doc { order: 2; justify-self: end; }
  .jcm-rows .nx-row__title { order: 3; grid-column: 1 / -1; }
  .jcm-find__count { margin-left: 0; flex-basis: 100%; }
}

/* component: dark-mode.css */
/*
 * dark-mode.css — theme-agnostic dark overrides.
 *
 * Applies when the user has explicitly chosen dark via the theme picker
 * (`<html data-theme-mode="dark">`) or chosen "auto" and the OS prefers
 * dark. With no attribute set, the site stays light — that preserves the
 * default public behavior for visitors who haven't opted in.
 *
 * Neutrals (bg / surface / surfaceAlt / ink / line) come from the shared
 * DARK_OVERRIDE in assets/claude-design-export4/index.html. The accent
 * swaps to the per-palette --c-accent-dark token set in palette.css —
 * a lightened version of the accent that remains legible on the dark bg.
 */

[data-theme-mode="dark"] {
  --c-bg:           #101218;
  --c-bg-elev:      #181b24;
  --c-bg-sunk:      #222632;
  --c-ink:          #f1f3f8;
  --c-ink-2:        #c8ccd6;
  --c-ink-3:        #8a8f9c;
  --c-line:         rgba(255, 255, 255, 0.12);
  --c-line-soft:    rgba(255, 255, 255, 0.06);
  --c-accent:       var(--c-accent-dark);
  --c-accent-ink:   #101218;
  --c-accent-soft:  rgba(255, 255, 255, 0.08);
  --c-link:         var(--c-accent-dark);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme-mode="auto"] {
    --c-bg:           #101218;
    --c-bg-elev:      #181b24;
    --c-bg-sunk:      #222632;
    --c-ink:          #f1f3f8;
    --c-ink-2:        #c8ccd6;
    --c-ink-3:        #8a8f9c;
    --c-line:         rgba(255, 255, 255, 0.12);
    --c-line-soft:    rgba(255, 255, 255, 0.06);
    --c-accent:       var(--c-accent-dark);
    --c-accent-ink:   #101218;
    --c-accent-soft:  rgba(255, 255, 255, 0.08);
    --c-link:         var(--c-accent-dark);
    color-scheme: dark;
  }
}

/* component: document-list.css */
/* Document list — bordered card list matching the authored .ca5-page__doc cards
   on content pages (chip icon · title · meta · type badge · external arrow, opens
   in a new tab). Token-mapped so it follows the theme. */

.document-list { margin: var(--s-5) 0; }
.document-list__heading {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
}
.document-list__empty { color: var(--c-ink-3); font-style: italic; }

.document-list__items {
  list-style: none; margin: var(--s-2) 0 0; padding: 0; max-width: 760px;
  border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; background: var(--c-bg-elev);
}
.document-list__items > li + li { border-top: 1px solid var(--c-line-soft); }

.document-item {
  display: flex; align-items: center; gap: 16px; padding: 17px 20px;
  color: var(--c-ink); text-decoration: none;
}
.document-item:hover { text-decoration: none; background: var(--c-bg-sunk); }

.document-item__chip {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  background: var(--c-accent-soft); color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
}
.document-item__chip svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.document-item__main { flex: 1; min-width: 0; }
.document-item__title { display: block; font-family: var(--f-serif); font-size: 17px; line-height: 1.3; color: var(--c-ink); }
.document-item:hover .document-item__title { color: var(--c-accent); }
.document-item__desc { display: block; font-size: 13.5px; line-height: 1.5; color: var(--c-ink-2); margin-top: 4px; }
.document-item__meta { font-size: 13.5px; color: var(--c-ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }

.document-item__type {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ink-3); border: 1px solid var(--c-line); border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}

.document-item__arrow { flex: 0 0 auto; color: var(--c-accent); display: inline-flex; }
.document-item__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .12s; }
.document-item:hover .document-item__arrow svg { transform: translateY(2px); }

/* component: homepage-band.css */
/* ============================================================================
   Homepage — Direction-D shortcut band (.hp-band--walnut)
   A full-bleed quick-links bar flush under the hero, on the photo-derived walnut
   tone so it reads as a continuation of the courtroom image. Token-driven except
   the one allowed homepage literal (--band-walnut, defined in homepage-three.css).
   Recreated from design_handoff_homepage/homepage.css.
   ============================================================================ */

.hp-band {
  display: block;
  background: var(--band-walnut, #1e1410);
}
/* Sits flush under the hero; the section below collapses its top margin. */
.hp-band + * { margin-top: 0; }

.hp-band__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  /* Match .page-main (the three-column row) so the band aligns with the columns. */
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.hp-band__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 8px;
  min-height: 44px;            /* a11y touch target */
  text-align: center;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: #f3efe7;
  white-space: nowrap;
  text-decoration: none;
  transition: background .14s;
}
.hp-band__item:hover { text-decoration: none; }
.hp-band__item svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.hp-band__ext { width: 11px; height: 11px; opacity: .6; }

/* Hairline dividers + subtle white wash on hover. */
.hp-band--walnut .hp-band__item + .hp-band__item { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .10); }
.hp-band--walnut .hp-band__item:hover { background: rgba(255, 255, 255, .07); }

/* Keyboard focus ring legible on the dark band. */
.hp-band__item:focus-visible {
  outline: 2px solid #f3efe7;
  outline-offset: -3px;
  border-radius: var(--r-sm);
}

/* ≤980px: wrap to a 3-column grid; ≤560px: 2-column. */
@media (max-width: 980px) {
  .hp-band__row { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
  .hp-band__item { flex: none; box-shadow: none !important; border-top: 1px solid rgba(255, 255, 255, .10); border-left: 1px solid rgba(255, 255, 255, .10); }
  .hp-band__item:nth-child(-n+3) { border-top: 0; }
  .hp-band__item:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 560px) {
  .hp-band__row { grid-template-columns: repeat(2, 1fr); }
  .hp-band__item:nth-child(-n+3) { border-top: 1px solid rgba(255, 255, 255, .10); }
  .hp-band__item:nth-child(-n+2) { border-top: 0; }
  .hp-band__item:nth-child(3n+1) { border-left: 1px solid rgba(255, 255, 255, .10); }
  .hp-band__item:nth-child(2n+1) { border-left: 0; }
}

/* component: homepage-hero.css */
.homepage-hero {
  max-width: var(--w-content);
  margin: var(--s-7) auto var(--s-6);
  padding: 0 var(--s-5);
}
.homepage-hero h1 {
  font-size: var(--t-3xl);
  margin: 0;
}

@media (max-width: 600px) {
  .homepage-hero h1 { font-size: var(--t-2xl); }
}

/* component: homepage-news.css */
/* ============================================================================
   Homepage — News column (paged cards). The viewport fills the column body and
   content paginates (it never grows the column). Tags fall back to accent tokens
   when a theme defines no --c-gold. Recreated from design_handoff_homepage.
   ============================================================================ */

.hp-newspager { display: flex; flex-direction: column; min-height: 0; }
.hp-three--bal .hp-newspager { flex: 1; }
/* padding-top gives the cards' :hover lift (translateY(-1px)) headroom so the
   top border isn't clipped by overflow: hidden. */
.hp-newspager__vp { flex: 1; min-height: 0; overflow: hidden; padding-top: 2px; }
.hp-newspager__track { display: flex; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.hp-newspager__page { flex: 0 0 100%; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (prefers-reduced-motion: reduce) { .hp-newspager__track { transition: none; } }

/* Cards */
.hp-card {
  display: block;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 15px 18px 16px;
  color: var(--c-ink);
  text-decoration: none;
  flex: 0 0 auto;
  transition: border-color .14s, transform .14s;
}
.hp-card:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.hp-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.hp-card__meta { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.hp-card__date { font-size: 12.5px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Pinned marker: a small accent thumbtack next to the date. */
.hp-card__pin { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: var(--c-accent); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.hp-card__title {
  font-family: var(--f-serif); font-weight: 500; font-size: 17px; line-height: 1.28;
  color: var(--c-ink); margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-card:hover .hp-card__title { color: var(--c-accent); }
.hp-card__sum {
  font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-empty { font-size: 14px; color: var(--c-ink-3); margin: 0; }

/* Category tags (colored pills). --c-gold is not defined by every theme, so the
   pacer tag falls back to the accent tokens. */
.hp-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
.hp-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.hp-tag--enbanc  { background: var(--c-accent-soft); color: var(--c-accent); }
.hp-tag--order   { background: var(--c-bg-sunk); color: var(--c-ink-2); }
.hp-tag--ann     { background: var(--c-bg-sunk); color: var(--c-ink-2); }
.hp-tag--pacer   { background: var(--c-gold-soft, var(--c-accent-soft)); color: var(--c-gold, var(--c-accent)); }
.hp-tag--vacancy { background: var(--c-accent-soft); color: var(--c-accent); }
.hp-tag--oa      { background: var(--c-bg-sunk); color: var(--c-ink-2); }

/* Compact pager controls in the column foot (shares the .hp-rot__ control styles
   defined in homepage-spotlight.css). */
.hp-rot__controls--compact { margin-top: 0; gap: 12px; }
.hp-rot__controls--compact .hp-rot__arrow { width: 30px; height: 30px; }

/* component: homepage-opinions.css */
/* ============================================================================
   Homepage — Latest Opinions panel (.hp-ops). The row area scrolls under a soft
   mask-fade when a heavy release day runs long; the footer stays anchored.
   Recreated from design_handoff_homepage/homepage.css.
   ============================================================================ */

.hp-ops {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 22px 24px 20px;
}
/* In the balanced row the panel fills the shared column height; the list scrolls. */
.hp-three--bal .hp-ops { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hp-three--bal .hp-ops__list {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  padding-bottom: 6px;
}

.hp-ops__grouplabel {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-ink-3); margin: 18px 0 6px; padding-bottom: 6px; border-bottom: 1.5px solid var(--c-ink);
}
.hp-ops__grouplabel:first-of-type { margin-top: 4px; }
.hp-ops__row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 9px 0; color: var(--c-ink); text-decoration: none;
}
.hp-ops__row + .hp-ops__row { border-top: 1px solid var(--c-line-soft); }
.hp-ops__row:hover { text-decoration: none; }
.hp-ops__docket { font-family: var(--f-mono); font-size: 13px; color: var(--c-link); font-weight: 500; white-space: nowrap; }
.hp-ops__row:hover .hp-ops__docket { text-decoration: underline; }
.hp-ops__cap { font-family: var(--f-serif); font-size: 16.5px; line-height: 1.3; color: var(--c-ink); }

/* PDF (opens in a new tab) affordance — mirrors the Opinions page's row button. */
.hp-ops__pdf {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--c-ink-3); border: 1px solid var(--c-line); border-radius: 6px; padding: 5px 9px; white-space: nowrap;
}
.hp-ops__pdf svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-ops__row:hover .hp-ops__pdf { color: var(--c-accent); border-color: var(--c-accent); }

.hp-ops__more {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line);
}
.hp-three--bal .hp-ops__more { margin-top: 0; flex: 0 0 auto; }
.hp-ops__sum { font-size: 14px; color: var(--c-ink-2); }
.hp-ops__sum strong { color: var(--c-ink); font-weight: 700; }
.hp-ops__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box;
  margin-left: auto;  /* keep the button right-aligned even when the "+ N" summary is hidden */
  background: var(--c-accent); color: var(--c-accent-ink);
  font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 9px; white-space: nowrap; text-decoration: none;
}
.hp-ops__btn:hover { text-decoration: none; filter: brightness(1.08); }
.hp-ops__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* component: homepage-spotlight.css */
/* ============================================================================
   Homepage — Spotlight rotator (.hp-rot / .hp-spot). The photo fills the column
   height (flex-grows, never floats in a void). The .hp-rot__ control styles here
   are shared with the News pager. Recreated from design_handoff_homepage.
   ============================================================================ */

.hp-rot { position: relative; min-width: 0; }
.hp-rot__viewport { overflow: hidden; border-radius: 14px; width: 100%; }
.hp-rot__track { display: flex; width: 100%; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.hp-rot__slide { flex: 0 0 100%; width: 100%; min-width: 0; display: flex; }
.hp-rot__slide > .hp-spot { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .hp-rot__track { transition: none; } }

/* Controls (arrows + dots) — also used by the News pager's compact variant. */
.hp-rot__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.hp-rot__arrow {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-bg-elev); color: var(--c-ink-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .14s, color .14s;
}
.hp-rot__arrow:hover { border-color: var(--c-accent); color: var(--c-accent); }
.hp-rot__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-rot__dots { display: flex; align-items: center; gap: 9px; }
.hp-rot__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--c-line); cursor: pointer; transition: background .14s, transform .14s; }
.hp-rot__dot:hover { background: var(--c-ink-3); }
.hp-rot__dot[aria-current="true"] { background: var(--c-accent); transform: scale(1.25); }

/* In the balanced row the rotator fills the column height; the photo grows. */
.hp-three--bal .hp-rot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hp-three--bal .hp-rot__viewport { flex: 1; min-height: 0; }
.hp-three--bal .hp-rot__track,
.hp-three--bal .hp-rot__slide { height: 100%; }
.hp-three--bal .hp-rot .hp-spot--v { height: 100%; }
.hp-three--bal .hp-rot .hp-spot__media { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.hp-three--bal .hp-rot .hp-spot__body { flex: 0 0 auto; }
.hp-three--bal .hp-rot__controls { margin-top: 14px; }

/* The card */
.hp-spot {
  display: block; background: var(--c-bg-elev); border: 1px solid var(--c-line);
  border-radius: 14px; overflow: hidden; color: var(--c-ink); text-decoration: none;
}
.hp-spot:hover { text-decoration: none; }
.hp-spot__media { position: relative; background: var(--c-bg-sunk); overflow: hidden; }
.hp-spot__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.hp-spot:hover .hp-spot__media img { transform: scale(1.03); }
.hp-spot__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-ink) 6%, var(--c-bg-elev)) 0 11px, var(--c-bg-elev) 11px 22px);
}
.hp-spot__ph span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--c-ink-3); background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: 6px; padding: 5px 10px; }
.hp-spot__body { padding: 18px 20px 20px; }
.hp-spot__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 8px; }
.hp-spot__title { font-family: var(--f-serif); font-weight: 500; font-size: 19px; line-height: 1.25; color: var(--c-ink); margin: 0 0 7px; }
.hp-spot:hover .hp-spot__title { color: var(--c-accent); }
.hp-spot__blurb { font-size: 14px; line-height: 1.55; color: var(--c-ink-2); margin: 0 0 13px; }
.hp-spot__link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--c-link); }
.hp-spot__link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* vertical card (narrow column) — fills slide height */
.hp-spot--v { display: flex; flex-direction: column; }
.hp-spot--v .hp-spot__media { aspect-ratio: 16/9; }
.hp-spot--v .hp-spot__body { flex: 1; }

/* horizontal card (full-width band) — image left, text right */
.hp-spot--h { display: grid; grid-template-columns: minmax(0, 46%) 1fr; align-items: stretch; }
.hp-spot--h .hp-spot__media { min-height: 320px; }
.hp-spot--h .hp-spot__body { align-self: center; padding: 30px 38px; }
.hp-spot--h .hp-spot__title { font-size: 25px; line-height: 1.2; margin-bottom: 11px; }
.hp-spot--h .hp-spot__blurb { font-size: 15px; max-width: 46ch; margin-bottom: 16px; }
@media (max-width: 680px) {
  .hp-spot--h { grid-template-columns: 1fr; }
  .hp-spot--h .hp-spot__media { min-height: 0; aspect-ratio: 16/9; }
  .hp-spot--h .hp-spot__body { padding: 20px 22px 22px; }
  .hp-spot--h .hp-spot__title { font-size: 21px; }
}

/* component: homepage-three.css */
/* ============================================================================
   Homepage — shared scaffolding + the Direction-D three-column balanced row.
   Defines the one allowed homepage literal (--band-walnut) and the shared
   column height (--col-h). Everything else is token-driven.
   Recreated from design_handoff_homepage/homepage.css (.hp-three--bal).
   ============================================================================ */

/* The photo-derived walnut tone (hero backstop + shortcut band). A homepage
   constant, NOT a theme token — it tracks the courtroom image, not the accent,
   so it must read correctly under every theme + light/dark. */
:root { --band-walnut: #1e1410; --band-walnut-2: #271a15; }

/* The hero + walnut band + Today band are full-bleed (edge to edge). They live
   inside the 1320px .page-main, so they break out to the viewport width; clip
   the home body to keep the 100vw breakout from spawning a horizontal scrollbar. */
body.page-type-home { overflow-x: clip; }
body.page-type-home .page-main { margin-top: 0; }

.hp-fullbleed,
.hp-band,
.hp-today {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Section scaffolding (column heads, CTAs). */
.hp-sec { margin: 0; }
.hp-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.hp-sechead h2 { font-family: var(--f-serif); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--c-ink); margin: 0; letter-spacing: -.01em; }
.hp-colcta { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--c-link); text-decoration: none; }
.hp-colcta:hover { text-decoration: underline; }
.hp-colcta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* The balanced three-column row: News (wider) · Latest Opinions · Spotlight.
   Every column shares one fixed height (--col-h); each body flexes to fill it so
   no single column's content drives the row. Stacks to one column ≤980px. */
.hp-three {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
}
.hp-three--bal { align-items: stretch; --col-h: 630px; }
/* min-width: 0 lets each column shrink below its content's min-content. Without
   it, a column whose body is a horizontal track (news pager / spotlight rotator)
   forces the grid track wider than the viewport. It matters most stacked to one
   column on mobile, where the track is a plain 1fr (auto-min = min-content) — so
   that mobile track is also pinned to minmax(0, 1fr) below. */
.hp-three--bal > .hp-col { display: flex; flex-direction: column; height: var(--col-h); min-width: 0; min-height: 0; }
.hp-col__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  min-height: 34px;
}

@media (max-width: 980px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr track's auto-minimum is min-content, so
     a column with a horizontal track would push the stacked grid wider than the
     viewport (horizontal scroll). minmax(0, …) lets the single column shrink. */
  .hp-three, .hp-three--bal { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* When stacked, let each column take its natural height. */
  .hp-three--bal > .hp-col { height: auto; }
}

/* component: homepage-today.css */
/* ============================================================================
   Homepage — "Today at the Court" band (.hp-today). Full-bleed, state-driven.
   Production uses one tasteful default tint (the accent-soft surface); the
   prototype's data-bg preview knob is omitted. Recreated from
   design_handoff_homepage/homepage.css.
   ============================================================================ */

.hp-today {
  background: var(--c-accent-soft);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
/* Align the inner content box to .page-main (the three-column row) so the
   "Today at the Court" heading lines up with the "News" column edge. */
.hp-today__in { max-width: var(--w-content); margin: 0 auto; padding: 30px var(--s-5) 34px; }
.hp-today__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.hp-today__title { display: flex; gap: 13px; align-items: flex-start; }
.hp-today__dot { width: 11px; height: 11px; border-radius: 50%; background: #cc2030; margin-top: 8px; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(204, 32, 48, .18); }
.hp-today[data-state="after"] .hp-today__dot,
.hp-today[data-state="off"] .hp-today__dot { background: var(--c-ink-3); box-shadow: none; }
.hp-today__title h2 { font-family: var(--f-serif); font-weight: 500; font-size: 26px; color: var(--c-ink); margin: 0; letter-spacing: -.01em; }
.hp-today__title .sub { font-size: 13.5px; color: var(--c-ink-2); margin-top: 5px; }
.hp-today__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.hp-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; box-sizing: border-box;
  font-size: 13px; font-weight: 600; color: var(--c-accent);
  padding: 9px 16px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg-elev);
  white-space: nowrap; text-decoration: none;
}
.hp-pill:hover { text-decoration: none; border-color: var(--c-accent); }
.hp-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Argument table */
.hp-cal { width: 100%; border-collapse: collapse; background: var(--c-bg-elev); border-radius: 12px; overflow: hidden; }
.hp-cal th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-3); padding: 14px 16px 10px; border-bottom: 2px solid var(--c-ink);
}
.hp-cal th:last-child { text-align: right; }
.hp-cal td { padding: 15px 16px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
/* divider above the concluded block, when live/upcoming cases precede it */
.hp-cal tr.hp-row--concluded-start td { border-top: 2px solid var(--c-ink); }
.hp-cal__time { font-weight: 600; font-size: 15px; color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-cal__case { font-family: var(--f-serif); font-size: 17px; color: var(--c-ink); }
.hp-cal__no { font-family: var(--f-mono); font-size: 13px; color: var(--c-ink-2); white-space: nowrap; }
.hp-cal__room { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-2); }
.hp-cal__listen { text-align: right; }
.hp-live {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: var(--c-bg-elev); border: 1px solid var(--c-line); color: var(--c-accent); font-weight: 600; font-size: 13px;
  font-family: inherit; cursor: pointer;
}
.hp-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #cc2030; box-shadow: 0 0 0 3px rgba(204, 32, 48, .18); }
button.hp-live.is-playing { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
button.hp-live.is-playing::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.hp-pending { font-size: 13px; color: var(--c-ink-3); }
.hp-upcoming { font-size: 13px; color: var(--c-ink-2); font-weight: 500; }
.hp-today__livenote { font-size: 14.5px; color: var(--c-ink-2); background: var(--c-bg-elev);
  border: 1px dashed var(--c-line); border-radius: 12px; padding: 16px 18px; margin: 0; }

/* "All cases" / "Only live" view toggle */
.hp-today__modes { display: inline-flex; margin: 0 0 14px; border: 1px solid var(--c-line);
  border-radius: 999px; overflow: hidden; background: var(--c-bg-elev); }
.hp-today__modes button { border: 0; background: transparent; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--c-ink-3); padding: 7px 16px; cursor: pointer; transition: .12s; }
.hp-today__modes button + button { border-left: 1px solid var(--c-line); }
.hp-today__modes button:hover { color: var(--c-accent); }
.hp-today__modes button[aria-pressed="true"] { background: var(--c-accent); color: #fff; }

/* After-session note + remaining-week summary */
.hp-today__note { font-size: 15px; color: var(--c-ink); margin-bottom: 16px; }
.hp-today__note a { color: var(--c-link); font-weight: 600; }
.hp-today__note a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.hp-weekrest { background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: 12px; padding: 18px 20px; }
.hp-weekrest__h { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); margin-bottom: 10px; }
.hp-weekrest ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 28px; }
.hp-weekrest li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--c-ink); padding: 8px 0; border-bottom: 1px solid var(--c-line-soft); }
.hp-weekrest li b { font-weight: 600; white-space: nowrap; }
.hp-weekrest li .c { color: var(--c-ink-2); font-size: 13.5px; }

/* Out-of-session note (reduced state — no argument table) */
.hp-today__offnote {
  font-size: 14.5px; color: var(--c-ink-2);
  background: var(--c-bg-elev); border: 1px dashed var(--c-line); border-radius: 12px;
  padding: 18px 20px;
}
.hp-today__offnote a { color: var(--c-link); font-weight: 600; }

/* ≤980px: horizontal scroll for the table. ≤760px: stack into cards. */
@media (max-width: 980px) {
  .hp-today__in { padding: 26px 18px 30px; }
  .hp-today__live { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hp-today .hp-cal { min-width: 560px; }
}
@media (max-width: 760px) {
  .hp-today__live { overflow: visible; }
  .hp-today .hp-cal { min-width: 0; display: block; background: transparent; }
  .hp-today .hp-cal thead { display: none; }
  .hp-today .hp-cal tbody, .hp-today .hp-cal tr, .hp-today .hp-cal td { display: block; }
  .hp-today .hp-cal tr { background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
  .hp-today .hp-cal td { padding: 2px 0; border: 0 !important; }
  .hp-today .hp-cal__case { font-size: 18px; margin: 2px 0 6px; }
  .hp-today .hp-cal__no { display: inline; }
  .hp-today .hp-cal__no::after { content: " · "; color: var(--c-ink-3); }
  .hp-today .hp-cal__room { display: inline; }
  .hp-today .hp-cal__listen { text-align: left; margin-top: 10px; }
  .hp-today__controls { width: 100%; }
  .hp-weekrest ul { grid-template-columns: 1fr; }
}

/* component: link-list.css */
/* Common */
.link-list { margin: 0; }
.link-list__heading {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
}
.link-list__items { list-style: none; margin: 0; padding: 0; }

/* Variant: bullet */
.link-list--bullet .link-list__items {
  list-style: disc;
  padding-left: var(--s-5);
}
.link-list--bullet li { margin: var(--s-2) 0; }
.link-list--bullet a { color: var(--c-link); text-decoration: none; }
.link-list--bullet a:hover { text-decoration: underline; }

/* Variant: inline */
.link-list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: baseline;
}
.link-list--inline .link-list__heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-sm);
  color: var(--c-ink-3);
  margin: 0;
}
.link-list--inline .link-list__items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.link-list--inline a { color: var(--c-link); text-decoration: none; }
.link-list--inline a:hover { text-decoration: underline; }

/* Variant: tile-grid */
.link-list--tile-grid .link-list__items {
  --ll-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--ll-columns), 1fr);
  gap: var(--s-4);
}
.link-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-decoration: none;
  color: var(--c-ink);
  transition: box-shadow .15s, border-color .15s, transform .04s;
}
.link-tile:hover { box-shadow: var(--sh-2); border-color: var(--c-accent); }
.link-tile:active { transform: translateY(1px); }
.link-tile__icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.link-tile__label {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.link-tile__description { font-size: var(--t-sm); color: var(--c-ink-3); }
@media (max-width: 900px) { .link-list--tile-grid .link-list__items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .link-list--tile-grid .link-list__items { grid-template-columns: 1fr; } }

/* Variant: card-list — vertical stack of richer cards (audience-first nav landings) */
.link-list--card-list .link-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.link-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s;
}
.link-card:hover { border-color: var(--c-accent); box-shadow: var(--sh-1); }
.link-card__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.link-card__body { display: flex; flex-direction: column; gap: var(--s-1); flex: 1 1 auto; min-width: 0; }
.link-card__label {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--c-ink);
}
.link-card__description { font-size: var(--t-sm); color: var(--c-ink-3); }

/* component: live-streams.css */
/* ============================================================================
   CA5 Live Streams — page-specific styles (Direction B, "Live board")
   Ported from the design handoff (live-streams.css). Depends on calendars.css
   (globally aggregated into /css/theme.css) for the shared .livedot / ca5pulse,
   nature dots (.ndot.*), and the .aud case-audio states. Only the BOARD layout
   ships here; the prototype's cards (A) / now (C) directions and the reviewer
   In/After/Out toggle are intentionally dropped.

   Everything inherits the host theme + dark mode through the --c-*/--f-* tokens.
   The one exception: the live-audio cues use a fixed "on the air" red
   (#e23b3b / #c62f2f, tint #fdeaea) that stays constant across themes.
   ============================================================================ */

/* ── Page header row (echoes the "Today at the Court" widget) ─────────────── */
.ls-top{display:flex; align-items:flex-start; justify-content:space-between; gap:20px 24px; flex-wrap:wrap; margin:0 0 6px;}
.ls-title{display:flex; align-items:center; gap:14px; font-family:var(--f-serif); font-weight:500;
  font-size:38px; line-height:1.05; color:var(--c-ink); margin:0;}
.ls-title__dot{flex:0 0 auto; width:16px; height:16px; border-radius:50%; background:#e23b3b;
  animation:ca5pulse 1.8s infinite;}
.ls-title__dot--idle{background:var(--c-ink-3); animation:none;}
.ls-context{font-size:15.5px; color:var(--c-ink-3); margin:8px 0 0;}
.ls-context strong{color:var(--c-ink-2); font-weight:600;}
.ls-controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:4px;}

/* .ca5-ls scope on link-bearing buttons beats calendars.css `.ca5-cal a{color:var(--c-link)}`
   so they keep their intended text colour (ink pills, white-on-fill CTAs). */
.ca5-ls .ls-full{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--c-line); border-radius:999px;
  padding:11px 20px; font-size:15px; font-weight:600; color:var(--c-ink); background:var(--c-bg-elev); white-space:nowrap;}
.ca5-ls .ls-full:hover{text-decoration:none; border-color:var(--c-accent); color:var(--c-accent);}
.ls-full svg{width:16px; height:16px;}

/* ── Live banner ─────────────────────────────────────────────────────────── */
.ls-livebanner{display:flex; align-items:center; gap:16px; background:#fdeaea; border:1px solid #f4caca;
  border-radius:14px; padding:16px 22px; margin:22px 0 0;}
.ls-livebanner__dot{flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid #f4caca;
  display:flex; align-items:center; justify-content:center;}
.ls-livebanner__dot .livedot{width:14px; height:14px;}
.ls-livebanner__k{font-family:var(--f-serif); font-size:19px; font-weight:500; color:#a02020; line-height:1.25;}
.ls-livebanner__s{font-size:14.5px; line-height:1.5; color:var(--c-ink-2); margin-top:3px;}

.ls-afterbanner{display:flex; align-items:center; gap:16px; background:var(--c-accent-soft);
  border:1px solid color-mix(in srgb,var(--c-accent) 22%,transparent); border-radius:14px; padding:16px 22px; margin:22px 0 0;}
.ls-afterbanner__ic{flex:0 0 auto; width:42px; height:42px; border-radius:11px; background:#fff; color:var(--c-accent);
  display:flex; align-items:center; justify-content:center;}
.ls-afterbanner__ic svg{width:22px; height:22px;}
.ls-afterbanner__k{font-family:var(--f-serif); font-size:19px; font-weight:500; color:var(--c-ink); line-height:1.25;}
.ls-afterbanner__s{font-size:14.5px; line-height:1.5; color:var(--c-ink-2); margin-top:3px;}
.ls-afterbanner__s a{color:var(--c-link); font-weight:600;}

/* ── Find-my-case filter bar ─────────────────────────────────────────────── */
.ls-filter{display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--c-bg-elev);
  border:1px solid var(--c-line); border-radius:14px; padding:16px 20px; margin:22px 0 0;}
.ls-filter__label{flex:0 0 auto; font-size:14px; font-weight:600; color:var(--c-ink-2);}
.ls-filter__wrap{position:relative; flex:1; min-width:260px;}
.ls-filter__wrap svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--c-ink-3);}
.ls-filter input{width:100%; border:1px solid var(--c-line); border-radius:10px; background:var(--c-bg-elev);
  padding:12px 40px 12px 42px; font:inherit; font-size:15.5px; color:var(--c-ink);}
.ls-filter input:focus{outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft);}
.ls-filter input::placeholder{color:var(--c-ink-3);}
.ls-filter__clear{position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent;
  color:var(--c-ink-3); cursor:pointer; padding:6px; border-radius:6px; display:none; line-height:0;}
.ls-filter__clear:hover{color:var(--c-ink); background:var(--c-bg-sunk);}
.ls-filter__clear svg{width:16px; height:16px; position:static; transform:none;}
.ls-filter.is-active .ls-filter__clear{display:inline-flex;}
.ls-filter__count{flex:0 0 auto; font-size:13.5px; color:var(--c-ink-3); white-space:nowrap;}

/* ── "recordings posted after argument" note ─────────────────────────────── */
.ls-recnote{display:flex; align-items:center; gap:12px; background:var(--c-gold-soft);
  border:1px solid color-mix(in srgb,var(--c-gold) 32%,transparent); border-radius:12px;
  padding:13px 18px; margin:20px 0 0; font-size:14.5px; line-height:1.5; color:var(--c-ink-2);}
.ls-recnote svg{flex:0 0 auto; width:19px; height:19px; color:var(--c-gold);}
.ls-recnote a{color:var(--c-link); font-weight:600;}

/* ── Shared room chrome (judges + the live-audio button) ─────────────────── */
.ls-stage{margin:26px 0 0;}
.ls-judges{display:flex; flex-wrap:wrap; gap:8px;}
.ls-judge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.13); border-radius:999px;
  padding:6px 14px 6px 7px; font-size:14px; font-weight:500; white-space:nowrap; color:#fff;}
.ls-judge__av{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.2); display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 auto;}
.ls-tba{display:inline-flex; align-items:center; gap:9px; font-size:14px; color:#fff; opacity:.82;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:8px 14px;}
.ls-tba svg{width:16px; height:16px;}

/* the prominent live-audio button (the whole point of the page) */
.ca5-ls .ls-listen{display:inline-flex; align-items:center; gap:11px; background:#e23b3b; color:#fff;
  font-family:inherit; border:0; cursor:pointer;
  font-weight:700; font-size:16px; padding:13px 22px; border-radius:11px; white-space:nowrap;
  box-shadow:0 2px 10px rgba(200,47,47,.28);}
.ls-listen:hover{text-decoration:none; filter:brightness(1.06); box-shadow:0 4px 16px rgba(200,47,47,.34);}
.ls-listen svg{width:20px; height:20px;}
.ls-listen .livedot{width:9px; height:9px; background:#fff;}
.ls-listen--wide{width:100%; justify-content:center; font-size:17px; padding:15px 22px;}
/* currently playing in the shared player bar → a calmer "pause" affordance */
.ca5-ls .ls-listen.is-playing{background:#a02020;}
/* no per-courtroom feed URL supplied yet → a muted, non-interactive placeholder */
.ls-listen.is-pending{background:var(--c-bg-sunk); color:var(--c-ink-3); box-shadow:none;
  border:1px solid var(--c-line); font-weight:600; font-size:14.5px; cursor:default;}
.ls-listen.is-pending .i{width:17px; height:17px; opacity:.7;}

/* Active / All courtroom view toggle */
.ls-modes{display:inline-flex; margin:0 0 18px; border:1px solid var(--c-line); border-radius:999px;
  overflow:hidden; background:var(--c-bg-elev);}
.ls-modes button{border:0; background:transparent; font:inherit; font-size:13.5px; font-weight:600;
  color:var(--c-ink-3); padding:9px 18px; cursor:pointer; transition:.12s;}
.ls-modes button + button{border-left:1px solid var(--c-line);}
.ls-modes button:hover{color:var(--c-accent);}
.ls-modes button[aria-pressed="true"]{background:var(--c-accent); color:#fff;}

/* ════════════════════════════════════════════════════════════════════════
   The live board (side-by-side courtroom columns)
   ════════════════════════════════════════════════════════════════════════ */
.ls-board{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; align-items:start;}
.ls-col{border:1px solid var(--c-line); border-radius:16px; overflow:hidden; background:var(--c-bg-elev); display:flex; flex-direction:column;}
.ls-col--live{border-color:#f0c9c9; box-shadow:0 6px 24px rgba(200,47,47,.08);}
.ls-col__head{background:var(--c-accent); color:#fff; padding:16px 18px;}
.ls-col--live .ls-col__head{background:linear-gradient(120deg,#1d3b5e,#2a4d72);}
.ls-col__toprow{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.ls-col__room{display:flex; align-items:center; gap:9px; font-family:var(--f-serif); font-size:20px; font-weight:500;}
.ls-col__room svg{width:18px; height:18px; opacity:.85;}
/* probe-confirmed "on the air" chip — a hard signal distinct from the editorial
   status (green, not the live-red). Sits in the navy column head. */
.ls-col__onair{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#eafff1; background:rgba(46,170,94,.28); border:1px solid rgba(120,230,160,.5);
  border-radius:999px; padding:3px 10px 3px 8px;}
.ls-col__onair .onairdot{width:8px; height:8px; border-radius:50%; background:#3fd07a; flex:0 0 auto;
  animation:ca5airpulse 1.8s infinite;}
@keyframes ca5airpulse{0%{box-shadow:0 0 0 0 rgba(63,208,122,.55);}70%{box-shadow:0 0 0 6px rgba(63,208,122,0);}100%{box-shadow:0 0 0 0 rgba(63,208,122,0);}}
@media (prefers-reduced-motion:reduce){ .ls-col__onair .onairdot{animation:none;} }
.ls-col__sub{font-size:12.5px; opacity:.78; margin:3px 0 12px; padding-left:27px;}
.ls-col__judges .ls-judges{gap:6px;}
.ls-col__judge{background:rgba(255,255,255,.13); border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:500; color:#fff;}
.ls-col__cta{padding:16px 18px; border-bottom:1px solid var(--c-line-soft);}
.ls-col--live .ls-col__cta{background:#fdeaea; border-bottom-color:#f4caca;}
.ls-col__nowlabel{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#a02020; margin-bottom:9px;}
.ls-col__nowcase{font-family:var(--f-serif); font-size:18px; line-height:1.3; color:var(--c-ink); margin-bottom:3px;}
.ls-col__nowmeta{font-size:12.5px; color:var(--c-ink-3); margin-bottom:14px; display:flex; gap:10px; flex-wrap:wrap;}
.ls-col__nowmeta .mono{font-family:var(--f-mono);}
.ls-col__idle{font-size:13.5px; color:var(--c-ink-3); margin-bottom:12px;}
.ls-col__idle svg{width:16px; height:16px; vertical-align:-3px; margin-right:4px;}
.ls-col__note{display:flex; align-items:flex-start; gap:7px; font-size:12.5px; line-height:1.4; color:var(--c-ink-2);
  background:var(--c-bg-sunk); border-radius:8px; padding:8px 11px; margin-bottom:12px;}
.ls-col__note svg{flex:0 0 auto; width:15px; height:15px; color:var(--c-ink-3); margin-top:1px;}
.ls-col__list{list-style:none; margin:0; padding:6px 0; flex:1;}
.ls-col__caption--head{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--c-ink-3); padding:10px 18px 4px;}
.ls-cse{display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px; align-items:baseline; padding:9px 18px;}
.ls-cse + .ls-cse{border-top:1px dotted var(--c-line-soft);}
.ls-cse.is-live{background:#fdeaea;}
.ls-cse__time{font-family:var(--f-mono); font-size:12.5px; color:var(--c-ink-2); white-space:nowrap; font-variant-numeric:tabular-nums;}
.ls-cse__cap{font-family:var(--f-serif); font-size:15px; line-height:1.3; color:var(--c-ink); min-width:0;}
.ls-cse__docket{font-family:var(--f-mono); font-size:11.5px; color:var(--c-ink-3); display:block; margin-top:1px;}
.ls-cse__state{font-size:12px; white-space:nowrap; text-align:right;}

/* ── Empty state (out of session) ────────────────────────────────────────── */
.ls-empty{border:1px solid var(--c-line); border-radius:18px; background:var(--c-bg-elev); text-align:center;
  padding:56px 40px; margin:30px 0 0;}
.ls-empty__ic{width:64px; height:64px; border-radius:50%; background:var(--c-bg-sunk); display:inline-flex;
  align-items:center; justify-content:center; color:var(--c-ink-3); margin-bottom:20px;}
.ls-empty__ic svg{width:30px; height:30px;}
.ls-empty h2{font-family:var(--f-serif); font-weight:500; font-size:28px; color:var(--c-ink); margin:0 0 10px;}
.ls-empty p{font-size:16px; line-height:1.6; color:var(--c-ink-2); max-width:520px; margin:0 auto;}
.ls-empty__actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px;}
.ca5-ls .ls-empty__btn{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; padding:12px 20px;
  border-radius:10px; border:1px solid var(--c-line); color:var(--c-ink); background:var(--c-bg-elev);}
.ca5-ls .ls-empty__btn:hover{text-decoration:none; border-color:var(--c-accent); color:var(--c-accent);}
.ls-empty__btn svg{width:16px; height:16px;}
.ca5-ls .ls-empty__btn--primary{background:var(--c-accent); color:#fff; border-color:var(--c-accent);}
.ca5-ls .ls-empty__btn--primary:hover{color:#fff; filter:brightness(1.06);}

/* filter no-results within a state */
.ls-noresults{border:1px dashed var(--c-line); border-radius:14px; padding:30px 24px; text-align:center;
  color:var(--c-ink-3); font-size:15px; margin:22px 0 0;}
.ls-noresults strong{color:var(--c-ink-2);}

/* ── Case-audio state specific to this page (base .aud* live in calendars.css) ── */
.aud--onnow{color:#c62f2f; font-weight:700;}
.aud--onnow .livedot{width:7px; height:7px;}

/* ── Responsive (board stacks to one column) ─────────────────────────────── */
@media (max-width:980px){
  .ls-title{font-size:30px;}
  .ls-top{gap:14px;}
  .ls-controls{width:100%;}
  .ls-board{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .ls-title{font-size:26px;}
  .ls-filter{flex-direction:column; align-items:stretch;}
  .ls-filter__count{text-align:left;}
}

/* the pulsing live dot respects reduced-motion (matches .livedot in calendars.css) */
@media (prefers-reduced-motion:reduce){ .ls-title__dot{animation:none;} }

/* component: news-browser.css */
/* ============================================================================
   CA5 News & Announcements — browse toolbar + category filter + month-grouped
   list (Direction B). Ported from the design prototype's news.css; inherits the
   host theme tokens (--c-* / --f-*) so it follows light/dark automatically.
   The archive "rail" from Direction A is intentionally dropped.
   ============================================================================ */

.nx-news { margin-top: 4px; }

/* ── category tags — scoped to the news page so the richer per-category colours
      don't disturb the homepage's muted tags (same hp-tag-- class names) ─────── */
.nx-news .hp-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
.nx-news .hp-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.nx-news .hp-tag--enbanc  { background: var(--c-accent-soft); color: var(--c-accent); }
.nx-news .hp-tag--order   { background: #eef0f4; color: #41506b; }
.nx-news .hp-tag--ann     { background: var(--c-bg-sunk); color: var(--c-ink-2); }
.nx-news .hp-tag--pacer   { background: var(--c-gold-soft, var(--c-accent-soft)); color: var(--c-gold, var(--c-accent)); }
.nx-news .hp-tag--vacancy { background: #e7efe8; color: #3c6b4a; }
.nx-news .hp-tag--oa      { background: #e9eef0; color: #3a6473; }

/* ── browse toolbar ───────────────────────────────────────────────────────── */
.nx-bar {
  border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-bg-elev);
  padding: 18px 22px; margin-bottom: 26px; display: flex; flex-direction: column; gap: 15px;
}
.nx-bar__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nx-bar__row + .nx-bar__row { padding-top: 15px; border-top: 1px solid var(--c-line-soft); }
.nx-bar__lbl { flex: 0 0 50px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.nx-bar__years, .nx-bar__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nx-bar__year {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--c-line);
  background: var(--c-bg-elev); color: var(--c-ink-2); font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; transition: .12s;
}
.nx-bar__year:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
.nx-bar__year.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
/* Counts are de-emphasized via color, not opacity — opacity-dimmed ink-2
   composites below 4.5:1 at 12px (WCAG AA) in the darker-warm themes. */
.nx-bar__c { font-size: 12px; font-weight: 500; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.nx-bar__year:hover .nx-bar__c { color: inherit; }
.nx-bar__year.is-on .nx-bar__c { color: #fff; }
.nx-bar__sel { display: inline-flex; }
.nx-bar__more {
  border: 1px solid var(--c-line); background: var(--c-bg-elev); color: var(--c-ink-2);
  font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.nx-bar__more:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.nx-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--c-line);
  background: var(--c-bg-elev); color: var(--c-ink-2); font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 6px 13px; border-radius: 999px; cursor: pointer; text-decoration: none; transition: .12s;
}
.nx-chip:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
.nx-chip.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.nx-chip__c { font-size: 12px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.nx-chip:hover .nx-chip__c { color: inherit; }
.nx-chip.is-on .nx-chip__c { color: #fff; }

/* ── category filter + keyword ────────────────────────────────────────────── */
.nx-filters {
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
  margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--c-line);
}
.nx-filters__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); margin-right: 2px; }
.nx-fil { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-fchip {
  border: 1px solid var(--c-line); background: var(--c-bg-elev); color: var(--c-ink-2); font: inherit;
  font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  text-decoration: none; transition: .12s;
}
.nx-fchip:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
.nx-fchip.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.nx-search { margin-left: auto; position: relative; min-width: 230px; flex: 0 1 280px; }
.nx-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--c-ink-3); stroke-width: 1.8; }
.nx-search input { width: 100%; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg-elev); padding: 9px 14px 9px 38px; font: inherit; font-size: 14px; color: var(--c-ink); }
.nx-search input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.nx-search input::placeholder { color: var(--c-ink-3); }

/* ── month groups + the news list ─────────────────────────────────────────── */
.nx-mg { margin-bottom: 34px; }
.nx-mg:last-child { margin-bottom: 0; }
.nx-mg__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.nx-mg__head h2 { font-family: var(--f-serif); font-weight: 500; font-size: 25px; line-height: 1.15; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.nx-mg__n { font-size: 13px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; background: var(--c-bg-sunk); border-radius: 999px; padding: 2px 10px; }

.nx-rows { border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-bg-elev); padding: 6px 0; overflow: hidden; }
.nx-rows__head, .nx-row { display: grid; grid-template-columns: 118px 158px minmax(0, 1.25fr) minmax(0, 1.5fr); gap: 22px; align-items: baseline; }
.nx-rows__head { padding: 13px 26px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); border-bottom: 1px solid var(--c-line); }
.nx-row { padding: 18px 26px; color: var(--c-ink); border-top: 1px solid var(--c-line-soft); text-decoration: none; }
.nx-row:first-of-type { border-top: 0; }
.nx-row:hover { text-decoration: none; background: var(--c-bg-sunk); }
.nx-row__date { font-size: 14px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-row__title { font-family: var(--f-serif); font-size: 18px; line-height: 1.32; color: var(--c-link); }
.nx-row:hover .nx-row__title { text-decoration: underline; }
.nx-row__sum { font-size: 14px; line-height: 1.5; color: var(--c-ink-2); }

/* featured (e.g. En Banc) — an INSET tinted block with breathing room */
.nx-row--feature { margin: 8px 12px; padding: 16px 18px; border-radius: 10px; background: var(--c-accent-soft); box-shadow: inset 3px 0 0 var(--c-accent); border-top: 0; }
.nx-row--feature + .nx-row { border-top: 0; }
.nx-row--feature .nx-row__title { color: var(--c-accent); }

.nx-empty { border: 1px dashed var(--c-line); border-radius: 14px; padding: 46px 24px; text-align: center; color: var(--c-ink-3); font-size: 14.5px; }
.nx-empty strong { display: block; font-family: var(--f-serif); font-weight: 500; font-size: 19px; color: var(--c-ink-2); margin-bottom: 6px; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .nx-search { margin-left: 0; flex-basis: 100%; }
  .nx-rows__head { display: none; }
  .nx-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .nx-row--feature { margin: 8px; }
  .nx-row__title { font-size: 17px; }
  .nx-bar__lbl { flex-basis: 100%; }
}

/* component: news-list.css */
.news-list {
  max-width: var(--w-content);
  margin: var(--s-7) auto;
  padding: 0 var(--s-5);
}
.news-list__heading {
  font-size: var(--t-xl);
  margin-bottom: var(--s-4);
}
.news-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.news-list__empty {
  color: var(--c-ink-3);
  font-style: italic;
}
.news-list__more {
  display: inline-block;
  margin-top: var(--s-5);
  font-weight: 600;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.news-card--pinned { border-color: var(--c-accent); }

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
}
.news-card__category {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: 999px;
  background: var(--c-bg-sunk);
  color: var(--c-ink-2);
  border: 1px solid var(--c-line);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.news-card__category--en-banc      { background: var(--c-accent-soft); color: var(--c-accent); border-color: transparent; }
.news-card__category--oral-argument { background: #e6efe9;             color: var(--c-good);   border-color: transparent; }
.news-card__category--pacer         { background: #f2ead3;             color: var(--c-warn);   border-color: transparent; }
.news-card__date { color: var(--c-ink-3); }

.news-card__title { font-size: var(--t-lg); margin: 0; }
.news-card__title a { color: var(--c-ink); text-decoration: none; }
.news-card__title a:hover { color: var(--c-accent); text-decoration: underline; }
.news-card__summary { color: var(--c-ink-2); font-size: var(--t-sm); }
.news-card__summary p { margin: 0; }
.news-card__cta {
  align-self: start;
  font-size: var(--t-sm);
  font-weight: 600;
}

@media (max-width: 900px) { .news-list__items { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-list__items { grid-template-columns: 1fr; } }

/* Variant: featured-with-list — one large + a stacked rail */
.news-list--featured-with-list .news-list__split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-5);
}
.news-card--featured { gap: var(--s-4); padding: var(--s-6); }
.news-card__title--featured { font-size: var(--t-2xl); letter-spacing: -0.015em; }
.news-list__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.news-card--rail {
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.news-card--rail .news-card__title { font-size: var(--t-md); }
@media (max-width: 800px) {
  .news-list--featured-with-list .news-list__split { grid-template-columns: 1fr; }
}

/* Variant: headlines-only — dense title+date list */
.news-list__headlines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line-soft);
}
.news-headline {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.news-headline__link {
  flex: 1 1 auto;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
}
.news-headline__link:hover { color: var(--c-accent); text-decoration: underline; }
.news-headline__date { flex: 0 0 auto; color: var(--c-ink-3); font-size: var(--t-sm); }

/* Variant: index-table — full table layout */
.news-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.news-table th,
.news-table td {
  text-align: left;
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: top;
}
.news-table th {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  border-bottom: 1px solid var(--c-line);
}
.news-table__col-date     { width: 12ch; }
.news-table__col-category { width: 14ch; }
.news-table__col-title    { width: 28%; }
.news-table__date         { color: var(--c-ink-3); white-space: nowrap; }
.news-table__row--pinned  { background: var(--c-bg-sunk); }
@media (max-width: 720px) {
  .news-table__col-summary, .news-table__summary { display: none; }
}

/* component: notice-bar.css */
.notice-bar {
  border-bottom: 1px solid transparent;
}
.notice-bar__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
.notice-bar__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--f-mono);
}
.notice-bar__body { flex: 1 1 auto; min-width: 0; }
.notice-bar__headline { margin: 0; font-weight: 600; }
.notice-bar__detail { margin-top: var(--s-1); color: inherit; opacity: 0.92; }
.notice-bar__detail p { margin: 0; }
.notice-bar__cta {
  flex: 0 0 auto;
  font-weight: 600;
  text-decoration: none;
}
.notice-bar__cta:hover { text-decoration: underline; }

/* Variant: info — neutral parchment */
.notice-bar--info {
  background: var(--c-bg-sunk);
  color: var(--c-ink);
  border-bottom-color: var(--c-line);
}
.notice-bar--info .notice-bar__icon { background: var(--c-accent-soft); color: var(--c-accent); }
.notice-bar--info .notice-bar__cta { color: var(--c-link); }

/* Variant: warning — amber */
.notice-bar--warning {
  background: #f5e6c4;
  color: #4a3a14;
  border-bottom-color: rgba(122, 90, 20, 0.25);
}
.notice-bar--warning .notice-bar__icon { background: var(--c-warn); color: #fff; }
.notice-bar--warning .notice-bar__cta { color: var(--c-warn); }

/* Variant: emergency — full-width red, sticky-top capable */
.notice-bar--emergency {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  position: sticky;
  top: 0;
  z-index: 100;
}
.notice-bar--emergency .notice-bar__icon { background: rgba(255,255,255,0.22); color: var(--c-accent-ink); }
.notice-bar--emergency .notice-bar__cta {
  color: var(--c-accent-ink);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .notice-bar__inner { padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
  .notice-bar__cta { flex-basis: 100%; }
}

/* component: opinion-subscription-form.css */
/* Opinions subscription page — magic-link signup + token-gated manage form.
   Lives in the `main` slot of the opinions-subscribe template. Tokens per the
   shared component vocabulary (--c-*, --s-*, --r-*, --t-*). */

.opinion-sub {
  max-width: 38rem;
}

.opinion-sub__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.opinion-sub__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.opinion-sub__label {
  font-weight: 600;
  color: var(--c-ink);
  font-size: var(--t-sm);
}

.opinion-sub__optional {
  font-weight: 400;
  color: var(--c-ink-3);
}

.opinion-sub__input {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-elev);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  color: var(--c-ink);
}

.opinion-sub__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.opinion-sub__readonly {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--c-bg-sunk);
  border-radius: var(--r-md);
  color: var(--c-ink-2);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
}

.opinion-sub__fieldset {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.opinion-sub__legend {
  font-weight: 600;
  font-size: var(--t-sm);
  padding: 0 var(--s-1);
}

.opinion-sub__choice {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}

.opinion-sub__choice--check {
  margin-top: var(--s-1);
}

.opinion-sub__hint {
  margin: 0;
  color: var(--c-ink-3);
  font-size: var(--t-sm);
}

.opinion-sub__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-2);
}

.opinion-sub__submit {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border: 0;
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-5);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.opinion-sub__submit:hover { filter: brightness(1.06); }

.opinion-sub__danger {
  background: transparent;
  color: var(--c-warn);
  border: 1px solid var(--c-warn);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.opinion-sub__danger:hover { background: var(--c-warn); color: var(--c-bg); }

.opinion-sub__message {
  margin-top: var(--s-4);
  max-width: var(--w-content);
  line-height: 1.6;
}

.opinion-sub__error {
  background: var(--c-bg-sunk);
  border-left: 3px solid var(--c-warn);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--c-ink);
}

/* Honeypot: kept in the DOM and focusable only to scripted bots, removed from
   the visual + accessibility tree for humans. */
.opinion-sub__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* component: opinions-browser.css */
/* ============================================================================
   Opinions browser — list/search UI for the public Opinions page.
   Ported from the design bundle's opinions.css. The prototype's standalone
   :root navy block is dropped; component vars map onto the HOST theme tokens
   (--c-*, --f-*), so every theme + Light/Dark/Auto "just work". All rules are
   scoped under .ca5-opinions so the generic class names (.panel, .chip, .tag…)
   don't leak. No fonts, no color literals — tokens only.
   ============================================================================ */

.ca5-opinions {
  --bg:          var(--c-bg, #f7f5ef);
  --surface:     var(--c-bg-elev, #fff);
  --surface-alt: var(--c-bg-sunk, color-mix(in srgb, var(--c-ink, #1a1c22) 6%, var(--c-bg, #fff)));
  --ink:         var(--c-ink, #1a1c22);
  --ink-2:       var(--c-ink-2, color-mix(in srgb, var(--c-ink, #1a1c22) 78%, var(--c-bg, #fff)));
  --ink-3:       var(--c-ink-3, color-mix(in srgb, var(--c-ink, #1a1c22) 56%, var(--c-bg, #fff)));
  --line:        var(--c-line, color-mix(in srgb, var(--c-ink, #1a1c22) 14%, transparent));
  --line-soft:   var(--c-line-soft, color-mix(in srgb, var(--c-ink, #1a1c22) 8%, transparent));
  --accent:      var(--c-accent, #1d3b5e);
  --accent-soft: var(--c-accent-soft, color-mix(in srgb, var(--c-accent, #1d3b5e) 12%, var(--c-bg, #fff)));
  --accent-ink:  var(--c-accent-ink, #fff);
  --link:        var(--c-link, var(--c-accent, #27548a));
  --focus:       var(--c-focus, var(--c-accent, #1a6f8e));
  --gold:        var(--c-warn, #8a6d2f);
  --gold-soft:   color-mix(in srgb, var(--c-warn, #8a6d2f) 16%, var(--c-bg, #fff));
  --font-serif:  var(--f-serif, Georgia, 'Times New Roman', serif);
  --font-sans:   var(--f-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --font-mono:   var(--f-mono, ui-monospace, SFMono-Regular, Menlo, monospace);

  font-family: var(--font-sans);
  color: var(--ink);
}

.ca5-opinions svg.i {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex: 0 0 auto;
}
.ca5-opinions a { color: var(--link); text-decoration: none; }
.ca5-opinions a:hover { text-decoration: underline; }
.ca5-opinions :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* ───────── Subscribe callout — compact (Unified) ─────────
   Dark accent card with light text. Default (narrow/mobile): a normal
   compact block stacked above the search panel. Wide screens: pinned to the
   top-right of the template page-header band (see the min-width rule below). */
.ca5-opinions .subscribe-compact {
  display: block; background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: 14px; padding: 15px 18px; margin-bottom: 4px;
}
.ca5-opinions .subscribe-compact:hover { text-decoration: none; filter: brightness(1.06); }
.ca5-opinions .subscribe-compact .t {
  display: flex; align-items: center; gap: 9px; font-family: var(--font-serif);
  font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--accent-ink);
}
.ca5-opinions .subscribe-compact .d {
  display: block; font-size: 13px; line-height: 1.5; color: var(--accent-ink); opacity: .82; margin-top: 4px;
}

/* Wide: lift the compact card into the top-right of the page-header band.
   The header (H1 + lede) is a sibling rendered by the template, so we make
   the shared main-column grid the positioning context via :has(). */
@media (min-width: 1025px) {
  .page-main__inner:has(.subscribe-compact) { position: relative; }
  .ca5-opinions .subscribe-compact { position: absolute; top: 0; right: 0; width: 300px; margin-bottom: 0; }
}

/* ───────── Search panel ───────── */
.ca5-opinions .op-form { margin-top: 28px; }
.ca5-opinions .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.ca5-opinions .panel__legend {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px;
}
.ca5-opinions .field { display: block; margin-bottom: 16px; }
.ca5-opinions .field--quick { margin-bottom: 0; }
.ca5-opinions .field__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.ca5-opinions .field input[type=text],
.ca5-opinions .field input[type=search],
.ca5-opinions .field input[type=date] {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 11px 13px; font: inherit; font-size: 15px; color: var(--ink);
}
.ca5-opinions .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ca5-opinions .field input::placeholder { color: var(--ink-3); }

/* full-text search box — selector mirrors the generic .field
   input[type=search] specificity (+ .fulltext) so the icon padding here isn't
   overridden, which would let the placeholder sit under the magnifier. */
.ca5-opinions .fulltext { position: relative; }
.ca5-opinions .field.fulltext input[type="search"] {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 13px 16px 13px 42px; font: inherit; font-size: 15px; color: var(--ink-1); cursor: text;
}
.ca5-opinions .fulltext .mag { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }

/* full-text match snippet under a result row */
.ca5-opinions .oprow__snippet {
  margin: -2px 0 10px; padding: 0 14px 0 42px; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2);
}
.ca5-opinions .oprow__snippet mark {
  background: var(--gold-soft); color: inherit; padding: 0 1px; border-radius: 2px;
}

.ca5-opinions .daterange { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ca5-opinions .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ca5-opinions .two-up--last { margin-bottom: 0; }

/* quick chips */
.ca5-opinions .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ca5-opinions .chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit;
  font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: .12s; line-height: 1.3; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center;
}
.ca5-opinions .chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.ca5-opinions .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ca5-opinions .chip--reset { margin-left: auto; }

/* type checkboxes */
.ca5-opinions .checks { display: flex; flex-direction: column; gap: 9px; }
.ca5-opinions .checks--row { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
.ca5-opinions .check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; min-height: 44px; }
.ca5-opinions .check input {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--line);
  border-radius: 5px; background: var(--surface); cursor: pointer; flex: 0 0 auto; position: relative;
}
.ca5-opinions .check input:checked { background: var(--accent); border-color: var(--accent); }
.ca5-opinions .check input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
  border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ca5-opinions .check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ca5-opinions .actions { display: flex; gap: 10px; margin-top: 6px; }
.ca5-opinions .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px;
  font-weight: 600; padding: 11px 18px; border-radius: 9px; cursor: pointer; border: 1px solid transparent;
  min-height: 44px; text-decoration: none;
}
.ca5-opinions .btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.ca5-opinions .btn--ghost:hover { background: var(--surface-alt); text-decoration: none; }
.ca5-opinions .op-grow { flex: 1; }

/* ───────── Results ───────── */
.ca5-opinions [data-op-results-region] { display: block; }
.ca5-opinions .op-form > [data-op-results-region] { margin-top: 34px; }
.ca5-opinions .results__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 16px;
}
.ca5-opinions .results__count { font-size: 14px; color: var(--ink-3); }
.ca5-opinions .results__count strong { color: var(--ink); font-weight: 600; }
.ca5-opinions .results__title { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ink); margin: 0 0 3px; }
.ca5-opinions .toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.ca5-opinions .toggle button {
  border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3);
  padding: 8px 14px; cursor: pointer; min-height: 38px;
}
.ca5-opinions .toggle button + button { border-left: 1px solid var(--line); }
.ca5-opinions .toggle button.is-active { background: var(--accent); color: var(--accent-ink); }

.ca5-opinions .results__controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ca5-opinions .op-pagesize { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
.ca5-opinions .op-pagesize select {
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13px; padding: 7px 26px 7px 9px; min-height: 38px; cursor: pointer;
}
.ca5-opinions .op-pagesize select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ca5-opinions .op-pager { margin-top: 22px; }

.ca5-opinions .group-label {
  display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin: 26px 0 8px; padding-bottom: 7px; border-bottom: 2px solid var(--ink);
}
.ca5-opinions .group-label:first-child { margin-top: 0; }
.ca5-opinions .group-label .n { font-weight: 500; color: var(--ink-3); letter-spacing: 0; }

.ca5-opinions .oplist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ca5-opinions .oplist li + li { border-top: 1px solid var(--line-soft); }
.ca5-opinions .oprow {
  display: grid; grid-template-columns: 104px 1fr 116px 150px 64px; align-items: center; gap: 18px;
  padding: 15px 20px; color: var(--ink);
}
.ca5-opinions .oprow:hover { text-decoration: none; background: var(--surface-alt); }
.ca5-opinions .oprow__docket { font-family: var(--font-mono); font-size: 13.5px; color: var(--link); font-weight: 500; white-space: nowrap; }
.ca5-opinions .oprow:hover .oprow__docket { text-decoration: underline; }
.ca5-opinions .oprow__caption { font-family: var(--font-serif); font-size: 18px; line-height: 1.3; color: var(--ink); min-width: 0; }
.ca5-opinions .oprow__date { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca5-opinions .oprow__type { justify-self: start; }
.ca5-opinions .tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.ca5-opinions .tag--pub { background: var(--accent-soft); color: var(--accent); }
.ca5-opinions .tag--unpub { background: var(--surface-alt); color: var(--ink-3); border: 1px solid var(--line); }
.ca5-opinions .oprow__pdf {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px;
}
.ca5-opinions .oprow:hover .oprow__pdf { color: var(--accent); border-color: var(--accent); }

/* empty state */
.ca5-opinions .empty { border: 1px dashed var(--line); border-radius: 12px; padding: 40px 24px; text-align: center; color: var(--ink-3); }
.ca5-opinions .empty strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 19px; color: var(--ink-2); margin-bottom: 6px; }

.ca5-opinions .op-note { font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 14px 0 0; max-width: 760px; }
.ca5-opinions .op-note a { color: var(--link); }

/* ───────── Search-forward two-column layout ───────── */
.ca5-opinions .op-app { margin-top: 24px; }
.ca5-opinions .applayout { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; margin-top: 28px; }
.ca5-opinions .applayout__rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.ca5-opinions .rail-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.ca5-opinions .rail-card .field:last-of-type { margin-bottom: 14px; }
.ca5-opinions .subscribe-mini {
  display: block; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; color: var(--ink);
}
.ca5-opinions .subscribe-mini:hover { text-decoration: none; border-color: var(--accent); }
.ca5-opinions .subscribe-mini .t { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--accent); }
.ca5-opinions .subscribe-mini .d { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 5px; }

/* ───────── Responsive (single breakpoint, mirrors the design) ───────── */
@media (max-width: 980px) {
  .ca5-opinions .two-up,
  .ca5-opinions .daterange { grid-template-columns: 1fr; }
  .ca5-opinions .applayout { grid-template-columns: 1fr; gap: 24px; }
  .ca5-opinions .applayout__rail { position: static; }
  .ca5-opinions .oprow { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 14px 16px; }
  .ca5-opinions .oprow__docket { order: 1; }
  .ca5-opinions .oprow__type { order: 2; justify-self: end; }
  .ca5-opinions .oprow__caption { order: 3; grid-column: 1 / -1; }
  .ca5-opinions .oprow__date { order: 4; }
  .ca5-opinions .oprow__pdf { order: 5; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .ca5-opinions * { transition: none !important; }
}

/* component: opinions-serp.css */
/* ============================================================================
   Opinions — full-text search hero + SERP (Direction A).
   Ported from the design bundle's opinions-search.css (and the shared search-
   hero pieces of opinions.css). Layers on top of opinions-browser.css. The
   prototype's standalone :root navy block is dropped; these rules consume the
   HOST theme tokens (--c-*, --f-*) directly — every one of the 10 themes
   defines them, so there is NO local re-declaration. (A self-referential
   "--c-x: var(--c-x, …)" mapping block here would be a CSS variable cycle: the
   token computes to its guaranteed-invalid value, which silently drops every
   background/border that reads it — e.g. the search bar loses its white fill.
   opinions-browser.css side-steps this by aliasing to distinct names like
   --surface; here we just read the host tokens.) All rules are scoped under
   .ca5-opinions; no fonts, no color literals beyond text-on-accent
   (--c-accent-ink) and the drawer/scrim shadows.
   ============================================================================ */

/* Stroke-style icons (the ones that aren't svg.i). */
.ca5-opinions .browse-toggle svg,
.ca5-opinions .tips-toggle svg,
.ca5-opinions .backbtn svg,
.ca5-opinions .filterbtn svg,
.ca5-opinions .hit__pdf svg {
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}

/* ───────── "Browse & filter" disclosure (landing) ───────── */
.ca5-opinions .browsewrap { margin-top: 30px; }
.ca5-opinions .browse-toggle {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--c-link); padding: 4px 0;
}
.ca5-opinions .browse-toggle::-webkit-details-marker { display: none; }
.ca5-opinions .browse-toggle svg { width: 15px; height: 15px; transition: transform .15s; }
.ca5-opinions details[open] .browse-toggle svg { transform: rotate(90deg); }
.ca5-opinions .browse-panel { margin-top: 16px; }

/* ───────── Search hero (the full-text "front door") ───────── */
.ca5-opinions .fthero {
  background: var(--c-bg-elev, #fff); border: 1px solid var(--c-line); border-radius: 14px;
  padding: 26px 28px; margin-top: 28px;
}
.ca5-opinions .fthero__label {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-3); margin: 0 0 12px;
}
.ca5-opinions .ftbar {
  display: flex; align-items: stretch; gap: 0; border: 1.5px solid var(--c-line); border-radius: 11px;
  background: var(--c-bg-elev, #fff); overflow: hidden; transition: border-color .12s, box-shadow .12s;
}
.ca5-opinions .ftbar:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.ca5-opinions .ftbar__mag { display: flex; align-items: center; padding-left: 16px; color: var(--c-ink-3); }
.ca5-opinions .ftbar input {
  flex: 1; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--c-ink);
  padding: 15px 14px; min-width: 0;
}
.ca5-opinions .ftbar input:focus { outline: none; }
.ca5-opinions .ftbar input::placeholder { color: var(--c-ink-3); }
.ca5-opinions .ftbar__clear {
  border: 0; background: transparent; color: var(--c-ink-3); font-size: 20px; line-height: 1;
  padding: 0 12px; cursor: pointer;
}
.ca5-opinions .ftbar__clear:hover { color: var(--c-ink); }
.ca5-opinions .ftbar__go {
  border: 0; background: var(--c-accent); color: var(--c-accent-ink); font: inherit; font-size: 15px;
  font-weight: 600; padding: 0 24px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.ca5-opinions .ftbar__go:hover { filter: brightness(1.08); }

.ca5-opinions .ftmeta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px 18px; margin-top: 12px;
}
.ca5-opinions .ftmeta__hint { flex: 1 1 280px; font-size: 13.5px; line-height: 1.5; color: var(--c-ink-3); }
.ca5-opinions .tips-toggle {
  background: transparent; border: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--c-link);
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px;
}
.ca5-opinions .tips-toggle:hover { text-decoration: underline; }
.ca5-opinions .tips-toggle svg { width: 14px; height: 14px; transition: transform .15s; }
.ca5-opinions .tips-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ca5-opinions .tips {
  margin: 14px 0 0; border-top: 1px solid var(--c-line-soft); padding-top: 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 24px;
}
.ca5-opinions .tips[hidden] { display: none; }
.ca5-opinions .tips dt { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--c-accent); }
.ca5-opinions .tips dd { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--c-ink-3); }

/* ───────── Mode banner (browse ⇄ search hand-off) ───────── */
.ca5-opinions .modebar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0 0 4px;
}
.ca5-opinions .backbtn {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--c-link);
  background: transparent; border: 0; cursor: pointer; padding: 6px 0;
}
.ca5-opinions .backbtn:hover { text-decoration: underline; }
.ca5-opinions .backbtn svg { width: 16px; height: 16px; }

/* ───────── SERP layout: facet rail + results ───────── */
.ca5-opinions .serp { display: grid; grid-template-columns: 264px 1fr; gap: 36px; align-items: start; margin-top: 18px; }
.ca5-opinions .facets { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; }
.ca5-opinions .facets__grp { border-bottom: 1px solid var(--c-line-soft); padding: 16px 0; }
.ca5-opinions .facets__grp:first-of-type { padding-top: 0; }
.ca5-opinions .facets__h {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-2);
  margin: 0 0 12px;
}
.ca5-opinions .facet { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-ink-2); cursor: pointer; padding: 5px 0; }
.ca5-opinions .facet input {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--c-line);
  border-radius: 5px; background: var(--c-bg-elev); cursor: pointer; flex: 0 0 auto; position: relative;
}
.ca5-opinions .facet input:checked { background: var(--c-accent); border-color: var(--c-accent); }
.ca5-opinions .facet input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
  border: solid var(--c-accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ca5-opinions .facet input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.ca5-opinions .facet__label { flex: 1; min-width: 0; }
.ca5-opinions .facet__n { font-size: 12.5px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.ca5-opinions .facet.is-zero { opacity: .4; }
.ca5-opinions .facet-more {
  background: transparent; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--c-link);
  cursor: pointer; padding: 6px 0 0;
}
.ca5-opinions .facet-more:hover { text-decoration: underline; }
.ca5-opinions .facet-date { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ca5-opinions .facet-date input,
.ca5-opinions .facet-docket {
  width: 100%; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-bg-elev);
  padding: 9px 10px; font: inherit; font-size: 13px; color: var(--c-ink);
}
.ca5-opinions .facet-docket { margin-top: 2px; }
.ca5-opinions .facet-date input:focus,
.ca5-opinions .facet-docket:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }

/* "Show all N years" reveal — pure CSS toggle (JS flips .is-allyears). */
.ca5-opinions [data-serp-years] .facet.is-extra { display: none; }
.ca5-opinions [data-serp-years].is-allyears .facet.is-extra { display: flex; }

/* ───────── Results column ───────── */
.ca5-opinions .serp__main { min-width: 0; }
.ca5-opinions .serp__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--c-line); margin-bottom: 4px;
}
.ca5-opinions .serp__count { font-size: 14.5px; color: var(--c-ink-3); }
.ca5-opinions .serp__count strong { color: var(--c-ink); font-weight: 600; }
.ca5-opinions .serp__count em { font-style: normal; color: var(--c-ink); font-weight: 600; }
.ca5-opinions .serp__of { opacity: .6; }
.ca5-opinions .sortbar { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--c-ink-3); }
.ca5-opinions .minisel {
  border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-bg-elev); color: var(--c-ink);
  font: inherit; font-size: 13px; padding: 7px 26px 7px 9px; min-height: 38px; cursor: pointer;
}
.ca5-opinions .minisel:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* active filter chips */
.ca5-opinions .activechips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.ca5-opinions .achip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--c-accent);
  background: var(--c-accent-soft); border: 1px solid color-mix(in oklab, var(--c-accent) 22%, transparent);
  border-radius: 999px; padding: 5px 8px 5px 12px;
}
.ca5-opinions .achip button { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .7; }
.ca5-opinions .achip button:hover { opacity: 1; }
.ca5-opinions .achip-clear {
  background: transparent; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--c-link);
  cursor: pointer; align-self: center;
}
.ca5-opinions .achip-clear:hover { text-decoration: underline; }

/* snippet result cards */
.ca5-opinions .hits { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ca5-opinions .hit { display: block; padding: 20px 4px; border-bottom: 1px solid var(--c-line-soft); }
.ca5-opinions .hit:first-child { padding-top: 6px; }
.ca5-opinions .hit__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ca5-opinions .hit__docket { font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--c-link); }
.ca5-opinions .hit__date { font-size: 13px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.ca5-opinions .hit__title {
  display: block; font-family: var(--f-serif); font-size: 21px; line-height: 1.25; color: var(--c-link); margin: 0 0 7px;
}
.ca5-opinions .hit__title:hover { text-decoration: underline; }
.ca5-opinions .hit__snip { font-size: 14.5px; line-height: 1.6; color: var(--c-ink-2); margin: 0; max-width: 74ch; }
.ca5-opinions .hit__snip mark { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 600; padding: 0 2px; border-radius: 3px; }
.ca5-opinions .hit__foot { display: flex; align-items: center; gap: 14px; margin-top: 11px; }
.ca5-opinions .hit__pdf {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--c-ink-2); border: 1px solid var(--c-line); border-radius: 7px; padding: 6px 11px;
}
.ca5-opinions .hit__pdf:hover { color: var(--c-accent); border-color: var(--c-accent); text-decoration: none; }
.ca5-opinions .hit__pdf svg { width: 14px; height: 14px; }

/* pagination (reuses the shared Pagination component, centered) */
.ca5-opinions .serp__pager { margin-top: 30px; }
.ca5-opinions .serp__pager .pagination { justify-content: center; }

/* ───────── Mobile facet drawer ───────── */
.ca5-opinions .filterbtn {
  display: none; align-items: center; gap: 9px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--c-ink-2); background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: 9px;
  padding: 10px 16px; cursor: pointer;
}
.ca5-opinions .filterbtn svg { width: 16px; height: 16px; }
.ca5-opinions .filterbtn .badge {
  background: var(--c-accent); color: var(--c-accent-ink); font-size: 11px; font-weight: 700; border-radius: 999px;
  min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.ca5-opinions .facets__close { display: none; }

@media (max-width: 900px) {
  .ca5-opinions .serp { grid-template-columns: 1fr; gap: 16px; }
  .ca5-opinions .facets {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw); background: var(--c-bg-elev); z-index: 60;
    transform: translateX(100%); transition: transform .22s; overflow-y: auto; padding: 20px 22px 40px;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .16); gap: 4px;
  }
  .ca5-opinions .facets.is-open { transform: translateX(0); }
  .ca5-opinions .facets__close {
    display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 16px; margin-bottom: 8px;
  }
  .ca5-opinions .facets__close button { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--c-ink-2); }
  .ca5-opinions .filterbtn { display: inline-flex; }
  .ca5-opinions .hit__title { font-size: 19px; }
}

/* The scrim is appended to <body> (outside .ca5-opinions), so style it globally. */
.facetscrim { display: none; }
@media (max-width: 900px) {
  .facetscrim {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 55; opacity: 0;
    pointer-events: none; transition: opacity .22s; display: block;
  }
  .facetscrim.is-open { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ca5-opinions .ftbar, .ca5-opinions .facets, .facetscrim,
  .ca5-opinions .browse-toggle svg, .ca5-opinions .tips-toggle svg { transition: none !important; }
}

/* component: opinions-table.css */
.opinions-table { margin-top: var(--s-5); }
.opinions-table__meta { color: var(--c-ink-3); font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.opinions-table__empty { color: var(--c-ink-3); font-style: italic; }
.opinions-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.opinions-table__table th,
.opinions-table__table td {
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: top;
}
.opinions-table__table th {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  border-bottom: 1px solid var(--c-line);
}
.opinions-table__col-docket { width: 14ch; }
.opinions-table__col-date   { width: 14ch; white-space: nowrap; color: var(--c-ink-3); }
.opinions-table__col-type   { width: 18ch; }
.opinions-table__col-file   { width: 28ch; }
.opinions-table__table a { color: var(--c-link); text-decoration: none; }
.opinions-table__table a:hover { text-decoration: underline; }
/* external-link (opens in new tab) affordance — the PDF lives on the legacy host */
.opinions-table__table a svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; margin-left: 5px;
}

@media (max-width: 720px) {
  .opinions-table__col-type, .opinions-table__col-date { display: none; }
  .opinions-table__table thead .opinions-table__col-type,
  .opinions-table__table thead .opinions-table__col-date { display: none; }
}

/* component: page-header.css */
.page-header {
  /* No bottom margin: the page-main grid `gap` already separates the header
     from the body below, so an extra margin here just stacks on top of it. */
  margin: 0;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
}
.page-header__kicker {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 var(--s-2);
}
.page-header__title {
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  margin: 0;
}
.page-header__lede {
  font-size: var(--t-lg);
  color: var(--c-ink-2);
  margin: var(--s-3) 0 0;
  max-width: 60ch;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .page-header__title { font-size: var(--t-2xl); }
}

/* component: page-main.css */
/* Screen-reader-only text (the standard visually-hidden pattern). Used for
   headings/labels the design shows no visible text for — e.g. the homepage H1. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-main { max-width: var(--w-content); margin: var(--s-5) auto var(--s-7); padding: 0 var(--s-5); }
.page-main__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Vertical rhythm between main-slot rows (header -> body -> child grid).
     Components should not add their own top/bottom margins on top of this. */
  gap: var(--s-5);
  align-items: start;
}
body.has-aside .page-main__inner {
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
}
/* The page header spans both columns; the main content (col 1) and the aside
   (col 2) sit side-by-side beneath it. Without this, the grid scatters the
   header / content / aside into separate cells (content lands in the narrow
   column, aside in the wide one). */
body.has-aside .page-main__inner > .page-header { grid-column: 1 / -1; }
.page-aside { display: contents; }
.page-aside > * + * { margin-top: var(--s-4); }

.page-hero { background: var(--c-bg-sunk); border-bottom: 1px solid var(--c-line-soft); padding: var(--s-6) 0; }
.page-feature-grid { max-width: var(--w-content); margin: var(--s-7) auto; padding: 0 var(--s-5); }

@media (max-width: 900px) {
  body.has-aside .page-main__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-main { padding: 0 var(--s-4); }
}

/* component: pagination.css */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin: var(--s-5) 0;
  font-size: var(--t-sm);
}
.pagination__pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-1);
}
.pagination__pages li > a,
.pagination__pages li > span {
  display: inline-block;
  min-width: 2em;
  padding: var(--s-1) var(--s-2);
  text-align: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg-elev);
  color: var(--c-ink);
  text-decoration: none;
}
.pagination__pages li > a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination__pages li [aria-current="page"] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
  font-weight: 600;
}
.pagination__ellipsis { padding: var(--s-1) var(--s-2); color: var(--c-ink-3); }
.pagination__prev, .pagination__next {
  text-decoration: none;
  font-weight: 600;
  color: var(--c-link);
}
.pagination__disabled { color: var(--c-ink-3); cursor: not-allowed; }

/* component: primary-nav.css */
/* Primary nav — direct port of the export3 inline nav (index.html
   lines 1532-1545): display:flex, gap:4. Items are 500 14px/1 sans,
   inkSoft color, padding 10px 12px, borderRadius 8. Hover swaps in
   surfaceAlt background + ink color. Dropdowns appear from hover. */

.primary-nav {
  background: transparent;
}

/* Mobile menu toggle — hidden on desktop; shown ≤960px (see media query). */
.primary-nav__toggle { display: none; }
.primary-nav__burger {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.primary-nav__list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav__group {
  position: relative;
}

.primary-nav__group-label {
  display: inline-block;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--c-ink-2);   /* inkSoft */
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.primary-nav__group-label:hover,
.primary-nav__group:hover .primary-nav__group-label,
.primary-nav__group:focus-within .primary-nav__group-label {
  background: var(--c-bg-sunk);  /* surfaceAlt */
  color: var(--c-ink);
}

/* Hide dropdown chevron — export3's nav is plain text. */
.primary-nav__chevron {
  display: none;
}

.primary-nav__dropdown {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-2);
  border-radius: var(--r-sm);
  display: none;
  z-index: 50;
}

.primary-nav__group:hover .primary-nav__dropdown,
.primary-nav__group:focus-within .primary-nav__dropdown {
  display: block;
}

.primary-nav__dropdown a {
  display: block;
  padding: var(--s-2) var(--s-4);
  color: var(--c-ink);
  text-decoration: none;
  font-size: 14px;
}

.primary-nav__dropdown a:hover {
  background: var(--c-bg-sunk);
  color: var(--c-accent);
}

@media (max-width: 960px) {
  /* Hamburger: a full-width "Menu" bar that opens the nav drawer. */
  .primary-nav__toggle {
    display: inline-flex; align-items: center; gap: 9px; width: 100%; justify-content: flex-start;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--c-ink);
    background: var(--c-bg-sunk); border: 1px solid var(--c-line); border-radius: 8px;
    padding: 0 14px; min-height: 44px; cursor: pointer;
  }

  /* Drawer: hidden until the toggle opens it. */
  .primary-nav__list {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-top: 8px;
  }
  .primary-nav.is-open .primary-nav__list { display: flex; }

  .primary-nav__group { border-top: 1px solid var(--c-line-soft); }
  .primary-nav__group:first-child { border-top: 0; }
  .primary-nav__group-label {
    width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; box-sizing: border-box;
  }

  /* Show the chevron on mobile (it's hidden on desktop) and rotate it when open. */
  .primary-nav__chevron { display: inline-block; transition: transform .15s ease; }
  .primary-nav__group.is-open > .primary-nav__group-label .primary-nav__chevron { transform: rotate(180deg); }

  /* Submenu is an accordion toggled by JS (.is-open), not hover/focus. */
  .primary-nav__dropdown {
    position: static; border: 0; box-shadow: none; padding: 2px 0 8px var(--s-4);
    display: none;
  }
  .primary-nav__group:hover .primary-nav__dropdown,
  .primary-nav__group:focus-within .primary-nav__dropdown { display: none; }
  .primary-nav__group.is-open > .primary-nav__dropdown { display: block; }
  .primary-nav__dropdown a { min-height: 40px; display: flex; align-items: center; }
}

/* component: recordings-browser.css */
/* ============================================================================
   Oral Argument Recordings browser — search/filter UI + inline audio player.
   Ported from the design bundle's recordings.css (+ the shared panel/chip/field
   shell from opinions.css). The prototype's standalone :root navy block is
   dropped; component vars map onto the HOST theme tokens (--c-*, --f-*), so
   every theme + Light/Dark/Auto "just work". All rules are scoped under
   .ca5-recordings so the generic class names (.panel, .chip, .field…) don't
   leak. No fonts, no color literals — tokens only.
   ============================================================================ */

.ca5-recordings {
  --bg:          var(--c-bg, #f7f5ef);
  --surface:     var(--c-bg-elev, #fff);
  --surface-alt: var(--c-bg-sunk, color-mix(in srgb, var(--c-ink, #1a1c22) 6%, var(--c-bg, #fff)));
  --ink:         var(--c-ink, #1a1c22);
  --ink-2:       var(--c-ink-2, color-mix(in srgb, var(--c-ink, #1a1c22) 78%, var(--c-bg, #fff)));
  --ink-3:       var(--c-ink-3, color-mix(in srgb, var(--c-ink, #1a1c22) 56%, var(--c-bg, #fff)));
  --line:        var(--c-line, color-mix(in srgb, var(--c-ink, #1a1c22) 14%, transparent));
  --line-soft:   var(--c-line-soft, color-mix(in srgb, var(--c-ink, #1a1c22) 8%, transparent));
  --accent:      var(--c-accent, #1d3b5e);
  --accent-soft: var(--c-accent-soft, color-mix(in srgb, var(--c-accent, #1d3b5e) 12%, var(--c-bg, #fff)));
  --accent-ink:  var(--c-accent-ink, #fff);
  --link:        var(--c-link, var(--c-accent, #27548a));
  --focus:       var(--c-focus, var(--c-accent, #1a6f8e));
  --font-serif:  var(--f-serif, Georgia, 'Times New Roman', serif);
  --font-sans:   var(--f-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --font-mono:   var(--f-mono, ui-monospace, SFMono-Regular, Menlo, monospace);

  font-family: var(--font-sans);
  color: var(--ink);
}

.ca5-recordings svg.i {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex: 0 0 auto;
}
.ca5-recordings a { color: var(--link); text-decoration: none; }
.ca5-recordings a:hover { text-decoration: underline; }
.ca5-recordings :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* ───────── YouTube / archive callout ───────── */
.ca5-recordings .yt-callout {
  display: flex; align-items: center; gap: 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin: 24px 0 0;
}
.ca5-recordings .yt-callout__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px; background: var(--accent-soft);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.ca5-recordings .yt-callout__icon svg { width: 24px; height: 24px; }
.ca5-recordings .yt-callout__text { flex: 1; min-width: 0; }
.ca5-recordings .yt-callout__title { font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--ink); line-height: 1.3; }
.ca5-recordings .yt-callout__sub { font-size: 14px; line-height: 1.5; color: var(--ink-3); margin-top: 3px; }
.ca5-recordings .yt-callout__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--accent); font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: 9px; white-space: nowrap;
}
.ca5-recordings .yt-callout__btn:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }

/* ───────── Search panel + fields ───────── */
.ca5-recordings .rec-form { margin-top: 28px; }
.ca5-recordings .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.ca5-recordings .panel__legend {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px;
}
.ca5-recordings .field { display: block; margin-bottom: 16px; }
.ca5-recordings .field__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.ca5-recordings .field input[type=text],
.ca5-recordings .field input[type=date] {
  width: 100%; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 11px 13px; font: inherit; font-size: 15px; color: var(--ink);
}
.ca5-recordings .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ca5-recordings .field input::placeholder { color: var(--ink-3); }

.ca5-recordings .daterange { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ca5-recordings .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ca5-recordings .two-up--three { grid-template-columns: 1fr 1fr 1fr; }
.ca5-recordings .two-up--last { margin-bottom: 0; }
.ca5-recordings .two-up .field { margin-bottom: 0; }

/* quick chips */
.ca5-recordings .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ca5-recordings .chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit;
  font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: .12s; line-height: 1.3; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center;
}
.ca5-recordings .chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.ca5-recordings .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.ca5-recordings .actions { display: flex; gap: 10px; margin-top: 6px; }
.ca5-recordings .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px;
  font-weight: 600; padding: 11px 18px; border-radius: 9px; cursor: pointer; border: 1px solid transparent;
  min-height: 44px; text-decoration: none;
}
.ca5-recordings .btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.ca5-recordings .btn--ghost:hover { background: var(--surface-alt); text-decoration: none; }
.ca5-recordings .rec-grow { flex: 1; }

/* ───────── Two-column app layout (rail + results) ───────── */
.ca5-recordings .applayout { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; margin-top: 28px; }
.ca5-recordings .applayout__rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.ca5-recordings .rail-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.ca5-recordings .rail-card .field:last-of-type { margin-bottom: 14px; }
.ca5-recordings .subscribe-mini {
  display: block; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; color: var(--ink);
}
.ca5-recordings .subscribe-mini:hover { text-decoration: none; border-color: var(--accent); }
.ca5-recordings .subscribe-mini .t { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--accent); }
/* ink-2, not ink-3: on the accent-soft card surface, ink-3 misses 4.5:1 at 13px. */
.ca5-recordings .subscribe-mini .d { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 5px; }

/* ───────── Results head ───────── */
.ca5-recordings .results__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 16px;
}
.ca5-recordings .results__title { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ink); margin: 0 0 3px; }
.ca5-recordings .results__count { font-size: 14px; color: var(--ink-3); }
.ca5-recordings .results__count strong { color: var(--ink); font-weight: 600; }
.ca5-recordings .rec-pager { margin-top: 22px; }

.ca5-recordings .empty { border: 1px dashed var(--line); border-radius: 12px; padding: 40px 24px; text-align: center; color: var(--ink-3); }
.ca5-recordings .empty strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 19px; color: var(--ink-2); margin-bottom: 6px; }
.ca5-recordings .rec-note { font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 14px 0 0; max-width: 760px; }
.ca5-recordings .rec-note a { color: var(--link); }

/* ───────── Results list ───────── */
.ca5-recordings .rec-list {
  list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--surface);
}
.ca5-recordings .rec + .rec { border-top: 1px solid var(--line-soft); }
.ca5-recordings .rec.is-open { background: var(--surface-alt); }

.ca5-recordings .rec__row { display: grid; grid-template-columns: 104px 1fr 124px auto; align-items: center; gap: 20px; padding: 15px 20px; }
.ca5-recordings .rec__docket { font-family: var(--font-mono); font-size: 13.5px; color: var(--link); font-weight: 500; white-space: nowrap; }
.ca5-recordings .rec__main { min-width: 0; }
.ca5-recordings .rec__caption {
  display: block; font-family: var(--font-serif); font-size: 18px; line-height: 1.3; color: var(--ink);
  background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font-weight: 400;
}
.ca5-recordings .rec__caption:hover { text-decoration: underline; text-underline-offset: 2px; }
.ca5-recordings .rec__appearing {
  font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.ca5-recordings .rec__date { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ca5-recordings .rec__actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
.ca5-recordings .rec__play {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent);
  border-radius: 9px; padding: 8px 14px; cursor: pointer; white-space: nowrap;
}
.ca5-recordings .rec__play:hover { filter: brightness(1.08); }
.ca5-recordings .rec__play-ico { display: inline-flex; }
.ca5-recordings .rec__play-ico svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.ca5-recordings .rec.is-playing .rec__play { box-shadow: 0 0 0 3px var(--accent-soft); }
.ca5-recordings .rec__dl {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; white-space: nowrap;
}
.ca5-recordings .rec__dl svg { width: 15px; height: 15px; }
.ca5-recordings .rec__dl:hover { text-decoration: none; color: var(--accent); border-color: var(--accent); }

/* ───────── Inline player ───────── */
.ca5-recordings .rec__player { padding: 4px 20px 20px; border-top: 1px dashed var(--line); }
.ca5-recordings .player {
  display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 16px; margin-top: 16px;
}
.ca5-recordings .player__pp {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center;
}
.ca5-recordings .player__pp:hover { filter: brightness(1.08); }
.ca5-recordings .player__pp svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.ca5-recordings .player__cur,
.ca5-recordings .player__tot {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 42px;
}
.ca5-recordings .player__tot { text-align: right; color: var(--ink-3); }
.ca5-recordings .player__track { position: relative; flex: 1; height: 18px; display: flex; align-items: center; }
.ca5-recordings .player__fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 999px;
  background: var(--accent); pointer-events: none; width: 0;
}
.ca5-recordings .player__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 6px; border-radius: 999px; background: var(--surface-alt);
}
.ca5-recordings .player__seek {
  position: relative; z-index: 2; width: 100%; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; height: 18px; cursor: pointer;
}
.ca5-recordings .player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer;
}
.ca5-recordings .player__seek::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer;
}
.ca5-recordings .player__seek:focus-visible { outline: none; }
.ca5-recordings .player__seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft); }
.ca5-recordings .player__seek:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent-soft); }
.ca5-recordings .player__dl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.ca5-recordings .player__dl svg { width: 15px; height: 15px; }
.ca5-recordings .player__close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ca5-recordings .player__close:hover { color: var(--ink); border-color: var(--ink-3); background: var(--surface-alt); }
.ca5-recordings .player__close svg { width: 17px; height: 17px; }

/* appearances / panel detail */
.ca5-recordings .rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 13px; padding-left: 2px; }
.ca5-recordings .rec-meta__lab {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.ca5-recordings .rec-meta__lab svg { width: 16px; height: 16px; }
.ca5-recordings .rec-meta__att { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13.5px; }
.ca5-recordings .rec-meta__name { color: var(--ink-2); }
.ca5-recordings .rec-meta__role {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px;
}
.ca5-recordings .rec-meta__where { font-size: 12.5px; color: var(--ink-3); margin-left: auto; font-style: italic; }

/* ───────── Responsive ───────── */
@media (max-width: 980px) {
  .ca5-recordings .two-up,
  .ca5-recordings .two-up--three,
  .ca5-recordings .daterange { grid-template-columns: 1fr; }
  .ca5-recordings .two-up .field { margin-bottom: 16px; }
  .ca5-recordings .applayout { grid-template-columns: 1fr; gap: 24px; }
  .ca5-recordings .applayout__rail { position: static; }
  .ca5-recordings .yt-callout { flex-wrap: wrap; gap: 14px; }
  .ca5-recordings .yt-callout__btn { width: 100%; justify-content: center; }
  .ca5-recordings .rec__row { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 14px 16px; }
  .ca5-recordings .rec__docket { order: 1; }
  .ca5-recordings .rec__date { order: 2; justify-self: end; }
  .ca5-recordings .rec__main { order: 3; grid-column: 1 / -1; }
  .ca5-recordings .rec__actions { order: 4; grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
  .ca5-recordings .rec__player { padding: 4px 16px 18px; }
  .ca5-recordings .player { flex-wrap: wrap; }
  .ca5-recordings .player__track { flex-basis: 100%; order: 5; }
  .ca5-recordings .rec-meta__where { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ca5-recordings * { transition: none !important; }
}

/* component: recordings-table.css */
.recordings-table { margin-top: var(--s-5); }
.recordings-table__meta { color: var(--c-ink-3); font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.recordings-table__empty { color: var(--c-ink-3); font-style: italic; }
.recordings-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.recordings-table__table th,
.recordings-table__table td {
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: top;
}
.recordings-table__table th {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  border-bottom: 1px solid var(--c-line);
}
.recordings-table__row--en-banc { background: var(--c-accent-soft); }
.recordings-table__table a { color: var(--c-link); text-decoration: none; }
.recordings-table__table a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .recordings-table__table th:nth-child(4),
  .recordings-table__table td:nth-child(4) { display: none; }
}

/* component: result-list.css */
.result-list { list-style: none; margin: 0; padding: 0; }
.result-list__empty { color: var(--c-ink-3); font-style: italic; }

.result-item {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.result-item:first-child { padding-top: 0; }
.result-item:last-child { border-bottom: 0; }

.result-item__kicker {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 var(--s-1);
}
.result-item__title {
  font-size: var(--t-md);
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
}
.result-item__title a { color: var(--c-link); text-decoration: none; }
.result-item__title a:hover { text-decoration: underline; }
.result-item__snippet {
  margin: var(--s-2) 0 var(--s-1);
  color: var(--c-ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.result-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-ink-3);
}
.result-item__url { font-family: var(--f-mono); }

/* component: rich-text.css */
.rich-text { max-width: 960px; line-height: 1.6; color: var(--c-ink); }
.rich-text > * + * { margin-top: var(--s-4); }
.rich-text h2 { font-size: var(--t-xl); margin-top: var(--s-6); }
/* The first block (often an h2/h3) must not push the body down — the heading
   margins above are for *between* blocks, not the top of the content. */
.rich-text > :first-child { margin-top: 0; }
.rich-text h3 { font-size: var(--t-lg); margin-top: var(--s-5); }
.rich-text p, .rich-text ul, .rich-text ol { margin: 0; }
.rich-text ul, .rich-text ol { padding-left: var(--s-5); }
.rich-text li + li { margin-top: var(--s-1); }
.rich-text a { color: var(--c-link); text-decoration: underline; }
.rich-text a:hover { text-decoration-thickness: 2px; }
.rich-text blockquote {
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border-left: 3px solid var(--c-accent);
  color: var(--c-ink-2);
  font-style: italic;
}
.rich-text code {
  font-family: var(--f-mono);
  font-size: 0.92em;
  background: var(--c-bg-sunk);
  padding: 0.05em 0.4em;
  border-radius: var(--r-sm);
}
.rich-text pre {
  font-family: var(--f-mono);
  background: var(--c-bg-sunk);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.rich-text img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* component: search-bar.css */
.search-bar {
  display: flex;
  gap: var(--s-2);
  align-items: stretch;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-1);
  box-shadow: var(--sh-1);
}
.search-bar__label {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.search-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: var(--s-2) var(--s-3);
  font: inherit;
  color: var(--c-ink);
}
.search-bar__input:focus { outline: none; }
.search-bar:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.search-bar__submit {
  flex: 0 0 auto;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0 var(--s-4);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.search-bar__submit:hover { filter: brightness(1.06); }

/* Header scope — the global header search field rendered in every page's
   masthead per rendering-contract §9. Layered into the right side of the
   brand-header row by .site-masthead's CSS grid, so it doesn't consume a
   band of its own. Distinct from the inline scoped searches on /search,
   /opinions/search, /oral-argument-recordings (those use scope=site /
   opinions / recordings and keep the default chip-style appearance). */
/* Header-scope search: compact pill-shaped input. The submit button is
   visually subdued (icon-only on small screens) since Enter submits. */
.search-bar--header {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: none;
  padding: 4px 8px 4px 12px;
  width: clamp(240px, 30vw, 340px);
  align-items: center;
}

.search-bar--header .search-bar__input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: 14px;
  color: var(--c-ink);
}

.search-bar--header .search-bar__input::placeholder {
  color: var(--c-ink-3);
}

.search-bar--header:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* Submit button styled as a compact icon-ish chip — text-content fallback
   when no icon font is available. */
.search-bar--header .search-bar__submit {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  color: var(--c-ink-2);
}

.search-bar--header .search-bar__submit:hover {
  color: var(--c-accent);
  background: transparent;
  filter: none;
}

/* component: shortcuts-grid.css */
.shortcuts-grid {
  max-width: var(--w-content);
  margin: var(--s-7) auto;
  padding: 0 var(--s-5);
}
.shortcuts-grid__heading {
  font-size: var(--t-xl);
  margin-bottom: var(--s-4);
}
.shortcuts-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-3);
}
.shortcuts-grid__item { margin: 0; }

.shortcut-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-2);
  row-gap: 2px;
  padding: var(--s-3);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-decoration: none;
  color: var(--c-ink);
  transition: box-shadow .15s, border-color .15s, transform .04s;
}
.shortcut-tile__icon { grid-row: 1 / -1; }
.shortcut-tile__label,
.shortcut-tile__description {
  grid-column: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.shortcut-tile:hover {
  box-shadow: var(--sh-2);
  border-color: var(--c-accent);
}
.shortcut-tile:active { transform: translateY(1px); }
.shortcut-tile__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  position: relative;
}
/* Icon glyphs: simple unicode placeholders. Real SVG icons are
   the icon registry's job (component-contracts §3); deferred. */
.shortcut-tile__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}
.shortcut-tile__icon[data-icon="search"]::before    { content: "🔎"; }
.shortcut-tile__icon[data-icon="mic"]::before       { content: "🎙"; }
.shortcut-tile__icon[data-icon="lock"]::before      { content: "🔒"; }
.shortcut-tile__icon[data-icon="calendar"]::before  { content: "📅"; }
.shortcut-tile__icon[data-icon="doc"]::before       { content: "📄"; }
.shortcut-tile__icon[data-icon="mail"]::before      { content: "✉"; }
.shortcut-tile__icon[data-icon="phone"]::before     { content: "☎"; }
.shortcut-tile__icon[data-icon="map"]::before       { content: "📍"; }
.shortcut-tile__icon[data-icon="external"]::before  { content: "↗"; }

.shortcut-tile__label {
  font-family: var(--f-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.shortcut-tile__description {
  font-size: var(--t-sm);
  color: var(--c-ink-3);
}

@media (max-width: 1100px) { .shortcuts-grid--cards .shortcuts-grid__list,
                             .shortcuts-grid--tinted .shortcuts-grid__list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .shortcuts-grid--cards .shortcuts-grid__list,
                             .shortcuts-grid--tinted .shortcuts-grid__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .shortcuts-grid--cards .shortcuts-grid__list,
                             .shortcuts-grid--tinted .shortcuts-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .shortcuts-grid--cards .shortcuts-grid__list,
                             .shortcuts-grid--tinted .shortcuts-grid__list { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────── */
/* Variants (claude-design-export5). The base markup above is the "cards"   */
/* grid; the variant blocks below re-layout it. "band" is the base style.   */
/* ─────────────────────────────────────────────────────────────────────── */

/* The bar runs wider than the 1320px content column so every caption fits
   without truncation — it spans the viewport with modest gutters. Tighter
   vertical rhythm than the card grid: the band sits close to the hero above
   and the section below. */
.shortcuts-grid--band,
.shortcuts-grid--quiet {
  max-width: none;
  padding-left: var(--s-6);
  padding-right: var(--s-6);
  margin-top: var(--s-4);
  margin-bottom: var(--s-4);
}

/* The section right after the band (e.g. NewsList) carries its own 48px top
   margin; collapse that down so the band's tight rhythm isn't undone by the
   neighbor below. */
.shortcuts-grid--band + *,
.shortcuts-grid--quiet + * {
  margin-top: var(--s-4);
}

/* Shared bar layout for "band" + "quiet": one edge-to-edge flex strip,
   no per-item card chrome. Items size to their content (with equal growth)
   so longer labels claim the room they need instead of being clipped. */
.shortcuts-grid--band .shortcuts-grid__list,
.shortcuts-grid--quiet .shortcuts-grid__list {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.shortcuts-grid--band .shortcuts-grid__item,
.shortcuts-grid--quiet .shortcuts-grid__item { flex: 1 1 auto; }

.shortcuts-grid--band .shortcut-tile,
.shortcuts-grid--quiet .shortcut-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 9px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.shortcuts-grid--band .shortcut-tile__label,
.shortcuts-grid--quiet .shortcut-tile__label {
  font-family: var(--f-sans);
  font-weight: 500;
  letter-spacing: 0;
  /* never clip captions in the bar */
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
}

/* "band" — compact accent-colored bar, rounded, white text/icons,
   color-mix dividers + hover. Adapts to palette + dark mode via tokens. */
.shortcuts-grid--band .shortcuts-grid__list {
  background: var(--c-accent);
  border-radius: var(--r-md);
  overflow: hidden;
}
.shortcuts-grid--band .shortcut-tile {
  padding: 15px var(--s-2);
  color: var(--c-accent-ink);
  font-size: var(--t-sm);
  transition: background .15s;
}
.shortcuts-grid--band .shortcuts-grid__item + .shortcuts-grid__item .shortcut-tile {
  border-left: 1px solid color-mix(in srgb, var(--c-accent-ink) 22%, transparent);
}
.shortcuts-grid--band .shortcut-tile:hover {
  background: color-mix(in srgb, var(--c-accent-ink) 13%, transparent);
}
.shortcuts-grid--band .shortcut-tile__icon {
  width: 17px;
  height: 17px;
  background: none;
  color: var(--c-accent-ink);
  opacity: .85;
}

/* "quiet" — hairline band with dividers, ink text, subtle hover. */
.shortcuts-grid--quiet .shortcuts-grid__list {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.shortcuts-grid--quiet .shortcut-tile {
  padding: var(--s-5) var(--s-2);
  color: var(--c-ink);
  font-size: var(--t-base);
  transition: background .15s;
}
.shortcuts-grid--quiet .shortcuts-grid__item + .shortcuts-grid__item .shortcut-tile {
  border-left: 1px solid var(--c-line);
}
.shortcuts-grid--quiet .shortcut-tile:hover { background: var(--c-bg-sunk); }
.shortcuts-grid--quiet .shortcut-tile__icon { background: none; }

/* "tinted" — accentSoft tiles in the grid, flat (no shadow/border). */
.shortcuts-grid--tinted .shortcut-tile {
  background: var(--c-accent-soft);
  border-color: transparent;
  box-shadow: none;
}
.shortcuts-grid--tinted .shortcut-tile:hover {
  box-shadow: inset 0 0 0 1.5px var(--c-accent);
  border-color: transparent;
}

/* The bar collapses to a 2-column grid on phones so labels stay legible. */
@media (max-width: 600px) {
  .shortcuts-grid--band .shortcuts-grid__list,
  .shortcuts-grid--quiet .shortcuts-grid__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .shortcuts-grid--band .shortcuts-grid__item + .shortcuts-grid__item .shortcut-tile,
  .shortcuts-grid--quiet .shortcuts-grid__item + .shortcuts-grid__item .shortcut-tile {
    border-left: none;
  }
}

/* component: site-footer.css */
.site-footer {
  background: var(--c-bg-sunk);
  border-top: 1px solid var(--c-line);
  margin-top: var(--s-8);
  color: var(--c-ink-2);
  font-size: var(--t-sm);
}
.site-footer__main {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-5);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3fr;
  gap: var(--s-6);
  align-items: start;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.site-footer__seal { width: 80px; height: 80px; }  /* 56 -> 80 per judge feedback 2026-07 */
.site-footer__brand-text { display: flex; flex-direction: column; }
.site-footer__court-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.15;
  color: var(--c-ink);
}
/* Mirrors the masthead wordmark: small uppercase sans line under the name.
   ink-2, not ink-3: at this size on the sunk footer background, ink-3 misses
   WCAG AA in several themes (judicial 4.35:1). */
.site-footer__court-subtitle {
  display: block;
  margin-top: 2px;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.site-footer__address {
  margin-top: var(--s-2);
  font-family: var(--f-sans);
  font-style: normal;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.site-footer__column { min-width: 0; }
.site-footer__column-title {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
}
.site-footer__column ul { list-style: none; margin: 0; padding: 0; }
.site-footer__column li { margin: var(--s-2) 0; }
.site-footer__column a { color: var(--c-ink-2); text-decoration: none; }
.site-footer__column a:hover { color: var(--c-link); text-decoration: underline; }

.site-footer__utility {
  border-top: 1px solid var(--c-line);
  padding: var(--s-4) var(--s-5);
  max-width: var(--w-content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  color: var(--c-ink-2);  /* ink-3 on bg-sunk fails AA in several themes */
}
.site-footer__utility-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.site-footer__utility-links a { color: var(--c-ink-2); text-decoration: none; }
.site-footer__utility-links a:hover { text-decoration: underline; }
.site-footer__copyright { margin: 0; font-size: var(--t-xs); }

@media (max-width: 900px) {
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .site-footer__columns { grid-template-columns: 1fr; }
}

/* component: site-masthead.css */
/* Site masthead — direct port of the export3 DesktopHeader (index.html
   lines 1497-1551). Utility band on top (full-width navy), then a
   brand row with a flex layout matching the source's `padding: pad,
   paddingTop: padY, paddingBottom: padY, display: flex, alignItems:
   center, gap: 32`.

   Background is full-bleed (like the hero and the hp-band below it); the
   content constrains to the same --w-content column + --s-5 gutter as
   .page-main so the seal and the search box align with the page content. */

.site-masthead {
  background: var(--c-bg-elev);  /* palette.surface */
  border-bottom: 1px solid var(--c-line);  /* palette.border */
}

.site-masthead__brand-row {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 16px var(--s-5);
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Brand link sticks at left and takes its natural width. */
.site-masthead__brand-row > .brand-header {
  flex: 0 0 auto;
}

/* Nav consumes the remaining space (export3 line 1532). */
.site-masthead__brand-row > .primary-nav {
  flex: 1;
  min-width: 0;
}

/* Search is a fixed 320px box at the right (export3 line 1547). */
.site-masthead__brand-row > .search-bar--header {
  flex: 0 0 auto;
  width: 320px;
}

/* Stack on narrow viewports. */
@media (max-width: 960px) {
  .site-masthead__brand-row {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  /* Nav (now the hamburger) breaks to its own full-width line below the brand,
     instead of being squeezed into the leftover space beside it. */
  .site-masthead__brand-row > .primary-nav {
    flex: 1 1 100%;
  }
  .site-masthead__brand-row > .search-bar--header {
    width: 100%;
  }
}

/* Match .page-main's narrower phone gutter. */
@media (max-width: 600px) {
  .site-masthead__brand-row {
    padding: 16px var(--s-4);
  }
}

/* component: utility-nav.css */
/* Utility band — dark accent strip at the very top of the masthead.
   "An official website..." on the left, contact + accessibility on the
   right. The band's background is full-bleed; the list constrains to the
   same --w-content column + --s-5 gutter as .page-main and the brand row
   below it, so everything aligns to one gutter. */

.utility-nav {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.utility-nav__list {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 7px var(--s-5);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
}

.utility-nav a {
  color: var(--c-accent-ink);
  text-decoration: none;
  opacity: 0.92;
}

.utility-nav a:hover {
  text-decoration: underline;
  opacity: 1;
}

@media (max-width: 600px) {
  .utility-nav__list {
    padding: 7px var(--s-4);
    gap: var(--s-3);
    justify-content: flex-start;
  }
}

/* component: vacancies.css */
/* Vacancies index table — reuses the .news-table shell, adds vacancy columns
   and a closing-date status treatment. The "vacancy" news-category tag (shown
   when a vacancy opts into the News list via ShowInNews) is defined here too,
   since it is referenced by the homepage/news renderers but had no style. */

/* The list reuses .news-list, which is a self-centering full-bleed container
   for the standalone News page (max-width + margin:auto). Inside the vacancies
   content column — a CSS grid — those auto side-margins shrink the block to its
   content and center it, so "Latest" floats mid-page while the header and the
   How-to-Apply card sit left. Reset it to fill the column, left-aligned. */
.news-list.vacancy-list {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.vacancy-table__col-position { width: 52%; }
.vacancy-table__col-closing  { width: 18ch; }

.vacancy-table__position a { color: var(--c-ink); text-decoration: none; font-weight: 600; }
.vacancy-table__position a:hover { color: var(--c-accent); text-decoration: underline; }

.vacancy-table__closing { white-space: nowrap; color: var(--c-ink-2); }

.vacancy-status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.vacancy-status--open { background: var(--c-bg-sunk); color: var(--c-ink-3); }
.vacancy-status--soon { background: #f2ead3; color: var(--c-warn); }

/* The vacancy tag in the News list / homepage news column. */
.news-card__category--vacancy { background: #ece6f2; color: #5b4a78; border-color: transparent; }

/* component: zz-theme-picker.css */
/*
 * theme-picker.css — dev-only floating switcher.
 * File name prefixed `zz-` so the alphabetical aggregator emits it last,
 * letting later rules override prior component CSS if needed. The picker
 * is intentionally subtle (small, dim) so it doesn't disturb design review.
 */
.theme-picker {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 9999;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  padding: var(--s-2);
  font-size: var(--t-xs);
  color: var(--c-ink-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 140px;
}
.theme-picker__label {
  font-family: var(--f-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  padding: 0 var(--s-1);
}
.theme-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.theme-picker__list a {
  display: block;
  padding: var(--s-1) var(--s-2);
  color: var(--c-ink-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.theme-picker__list a:hover {
  background: var(--c-bg-sunk);
  color: var(--c-ink);
}
.theme-picker__list a[aria-current="true"] {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 600;
}
.theme-picker__form {
  margin: 0;
  padding: 0 var(--s-1);
}
.theme-picker__select {
  width: 100%;
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  cursor: pointer;
}
.theme-picker__select:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}