/* ============================================================
   DocketDrift — overrides + additions on top of core + documents
   ============================================================
   The sidebar layout in core.css doesn't style a brand block; we add
   it here. Also tweak the doc-table cell layout to match an opinion
   row (case-number stamp + court + date + disposition pill + title),
   and add detail-page chrome.
   ============================================================ */

/* ============================================================
   Semantic color key — the deliberate, top-down palette
   ============================================================
   One palette, one through-line, applied to every label family
   (dispositions, editorial review status, citation treatment) so a
   color means the SAME thing everywhere on the site:

     green   = stands / blessed / followed
     cyan    = in motion / neutral / ML-processed
     pink    = overturned / reversed
     magenta = nullified harder
     violet  = terminal / explained-away

   These five anchors are intentionally DISTINCT from the --neon-*
   chrome tokens in core.css: the chrome carries the brand, this key
   carries meaning. Each hue ships a channel triplet (-rgb) for
   translucent tints/glows and an -ink variant: where the saturated
   anchor is too dark to read as small text on near-black (#050505),
   -ink is a lightened, WCAG-AA-readable text color while the anchor
   stays the accent/border/dot fill. Swap a hue here and every badge,
   pill, dot, and bar tracks it.
   ============================================================ */
:root {
  /* Palette anchors */
  --dd-green:   #8AFF00;
  --dd-cyan:    #10FEE2;
  --dd-pink:    #FE14BB;
  --dd-magenta: #C401DB;
  --dd-violet:  #6715FF;
  --dd-neutral: #8a7e62;   /* muted neutral — "merely cited" / unbucketed */

  /* Channel triplets — keep in sync with the hex anchors above. */
  --dd-green-rgb:   138, 255, 0;
  --dd-cyan-rgb:    16, 254, 226;
  --dd-pink-rgb:    254, 20, 187;
  --dd-magenta-rgb: 196, 1, 219;
  --dd-violet-rgb:  103, 21, 255;
  --dd-neutral-rgb: 138, 126, 98;

  /* Readable text inks. green/cyan/pink read fine as-is on #050505;
     magenta/violet/neutral are lightened so small badge text clears
     WCAG AA. */
  --dd-green-ink:   var(--dd-green);
  --dd-cyan-ink:    var(--dd-cyan);
  --dd-pink-ink:    var(--dd-pink);
  --dd-magenta-ink: #ed6cf5;
  --dd-violet-ink:  #a88bff;
  --dd-neutral-ink: #b7ac8a;

  /* Semantic — dispositions. The five Onion-approved buckets, plus the
     extension buckets that exist in real data, mapped via the same
     through-line: granted = "in motion" (review proceeds, cyan),
     denied = "terminal" (review ends, violet), modified = "stands as
     modified" (green), other = unbucketed (neutral). */
  --dd-disp-affirmed:  var(--dd-green);
  --dd-disp-reversed:  var(--dd-pink);
  --dd-disp-remanded:  var(--dd-cyan);
  --dd-disp-vacated:   var(--dd-magenta);
  --dd-disp-dismissed: var(--dd-violet);
  --dd-disp-granted:   var(--dd-cyan);
  --dd-disp-denied:    var(--dd-violet);
  --dd-disp-modified:  var(--dd-green);
  --dd-disp-other:     var(--dd-neutral);

  /* Semantic — editorial review status */
  --dd-rev-processed: var(--dd-cyan);    /* ai_only — machine-processed */
  --dd-rev-reviewed:  var(--dd-green);   /* human-reviewed */
  --dd-rev-flagged:   var(--dd-magenta); /* flagged for review */

  /* Semantic — citation treatment (NH-only today, future-proofed) */
  --dd-tr-followed:      var(--dd-green);
  --dd-tr-distinguished: var(--dd-cyan);
  --dd-tr-overruled:     var(--dd-pink);
  --dd-tr-criticized:    var(--dd-magenta);
  --dd-tr-explained:     var(--dd-violet);
  --dd-tr-cited:         var(--dd-neutral);
}

/* ============================================================
   Reticle corners — card branding
   ------------------------------------------------------------
   Ported from the MvR design system into DocketDrift's own cyan/pink
   scheme (same --neon-cyan / --neon-pink tokens). Replaces the flat
   violet-border "card" look: the frame keeps its border, and neon
   bleeds OUT of two opposite corners -- cyan top-left, pink
   bottom-right -- fading into the edge so the ticks read as part of
   the frame, not stuck on top. Applied to .glossy-frame (the primary
   card) for site-wide branding; add the reusable `.reticle` class to
   give any other card the same treatment.
   ============================================================ */
.glossy-frame,
.reticle {
  position: relative;
  /* Square the corners a hair (8px -> 4px) so the L-brackets read
     crisp against the rounded edge, matching the MvR card look. */
  border-radius: var(--radius-sm);
}

.glossy-frame::before,
.reticle::before {
  content: "";
  position: absolute;
  inset: -1px;                 /* sit ON the border, not inside it */
  border-radius: inherit;
  pointer-events: none;        /* never intercept clicks */
  /* Two L-brackets: cyan top-left, pink bottom-right, each a 42px arm
     fading to transparent. They live in the card's padding gutter, so
     they read as corner ticks on the frame and never overlap content. */
  background:
    linear-gradient(to right,  var(--neon-cyan), transparent) no-repeat left top     / 42px 2px,
    linear-gradient(to bottom, var(--neon-cyan), transparent) no-repeat left top     / 2px 42px,
    linear-gradient(to left,   var(--neon-pink), transparent) no-repeat right bottom / 42px 2px,
    linear-gradient(to top,    var(--neon-pink), transparent) no-repeat right bottom / 2px 42px;
}

/* ----------  Self-hosted fonts  ----------
   We self-host Chakra Petch instead of pulling from Google Fonts so
   visitors aren't making a cross-origin request to fonts.googleapis.com
   on every page load (and so the brand renders consistently behind a
   strict CSP later). JetBrains Mono falls back to system mono fonts
   (ui-monospace / SF Mono / Consolas) which are perfectly serviceable
   for the file-number + tag-cloud usage. */
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----------  Sidebar brand block  ---------- */

.site-header .brand {
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: var(--border-soft);
}

.site-header .brand a {
  display: block;
  color: var(--neon-pink);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(255, 43, 179, 0.55);
  margin-bottom: 0.5rem;
  line-height: 1.1;
  border-bottom: none;
}

.site-header .brand a:hover {
  text-shadow: 0 0 18px rgba(255, 43, 179, 0.85);
  border-bottom: none;
}

.site-header .brand-subtitle {
  font-size: 0.74rem;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin: 0;
  font-style: italic;
  line-height: 1.45;
  max-width: none;
  border: none;
  padding: 0;
}

.site-header .search-module {
  margin: 0 0 1rem;
}

/* ----------  Apex (state picker)  ---------- */

.apex-hero {
  text-align: center;
}

.apex-hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  letter-spacing: 3px;
  margin: 0 0 1rem;
}

.apex-hero .lede {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ----------  Opinion list (doc-table tweaks)  ---------- */

.doc-table .case-number-cell {
  width: 120px;
  white-space: nowrap;
  vertical-align: top;
}

.doc-table .case-number-cell .file-number {
  position: static;
  display: inline-block;
  background: rgba(20, 0, 30, 0.6);
  color: var(--neon-pink);
  border: 1px solid rgba(255, 43, 179, 0.4);
  border-left: 2px solid rgba(255, 43, 179, 0.7);
}

.doc-table td.title-cell {
  font-size: 0.92rem;
  line-height: 1.45;
}

.doc-table td.title-cell a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.doc-table td.title-cell a:hover {
  color: var(--neon-cyan);
  border-bottom-color: var(--neon-cyan);
}

.doc-table .case-status {
  margin: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

/* ----------  Opinion detail page  ---------- */

.opinion-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0 0 0.85rem;
}

.opinion-header .file-number {
  position: static;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.opinion-meta {
  color: var(--text-dim);
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  margin: 0 0 0.85rem;
  border-left: 2px solid rgba(var(--neon-violet-rgb), 0.45);
  padding-left: 0.85rem;
  max-width: none;
}

.opinion-meta strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Actions + the NH "Cite this case" tool share one wrapping row so the
   buttons sit side by side instead of stacking — tightens the header card. */
.opinion-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.opinion-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.opinion-actions a {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255, 43, 179, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(255, 43, 179, 0.08);
  color: var(--neon-pink);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.opinion-actions a:hover {
  background: var(--neon-pink);
  color: #050505;
  box-shadow: 0 0 12px rgba(255, 43, 179, 0.45);
  border-bottom: none;
}

/* ============================================================
   Opinion body (structured HTML output from format_opinion_text)
   ============================================================
   Replaces the old monospace <pre> blob with proper paragraphs +
   section headings + linked statutes + styled case citations.
   Reads like prose, not like a code dump.
   ============================================================ */

.opinion-body {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--text-primary);
  max-height: 75vh;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  background: rgba(5, 5, 5, 0.45);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  margin: 0;
}

.opinion-body::-webkit-scrollbar { width: 8px; }
.opinion-body::-webkit-scrollbar-thumb {
  background: rgba(var(--neon-violet-rgb), 0.3);
  border-radius: 4px;
}

.opinion-body .op-para {
  margin: 0 0 1.2rem;
  text-indent: 0;
  max-width: 72ch;
}

.opinion-body .op-para:last-child {
  margin-bottom: 0;
}

.opinion-body .op-heading {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin: 2.2rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(38, 255, 230, 0.25);
}

.opinion-body .op-heading:first-child {
  margin-top: 0;
}

.opinion-body .op-statute {
  color: var(--neon-pink);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 43, 179, 0.4);
  transition: color var(--transition), border-color var(--transition);
}

.opinion-body .op-statute:hover,
.opinion-body .op-statute:focus-visible {
  color: var(--neon-cyan);
  border-bottom-color: var(--neon-cyan);
}

.opinion-body .op-cite {
  font-style: italic;
  color: var(--text-dim);
  background: rgba(38, 255, 230, 0.05);
  border-radius: 2px;
  padding: 0 0.15rem;
}

/* ----------  Small-screen sidebar tweaks  ---------- */

@media (max-width: 1024px) {
  .site-header .brand {
    margin-top: 0;
  }
}

/* ============================================================
   Disposition color taxonomy (state_home table + detail pill)
   ============================================================
   Maps the case-status pill color to the disposition bucket so a
   user can scan the doc-table and instantly distinguish "affirmed"
   (status quo) from "reversed" (appellate action) from "vacated"
   (most disruptive) without reading. Buckets are also rendered as
   a sidebar legend so the key is always visible.
   ============================================================ */

/* Base disposition badge. Previously only the .doc-table context + the
   per-bucket color rules were styled, so a bare .case-status in the opinion
   header had no box — the mixed green/pink gradient read as a stray text
   highlight. This gives every disposition a squared, bordered badge (matching
   the role-chip / treatment-badge family); the per-bucket rules below layer
   color + tint + left-accent + glow on top. */
.case-status {
  display: inline-block;
  padding: 0.26rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

/* Disposition pills — colored per the semantic key. Anchor hue carries
   the left-border accent + tint + glow; -ink carries readable text. */
.case-status.disposition-affirmed,
.case-status.disposition-modified {
  color: var(--dd-green-ink);
  border-left-color: var(--dd-disp-affirmed);
  background: rgba(var(--dd-green-rgb), 0.10);
  box-shadow: inset 0 0 10px rgba(var(--dd-green-rgb), 0.15), 0 0 6px rgba(var(--dd-green-rgb), 0.2);
}

.case-status.disposition-reversed {
  color: var(--dd-pink-ink);
  border-left-color: var(--dd-disp-reversed);
  background: rgba(var(--dd-pink-rgb), 0.10);
  box-shadow: inset 0 0 10px rgba(var(--dd-pink-rgb), 0.15), 0 0 6px rgba(var(--dd-pink-rgb), 0.2);
}

.case-status.disposition-vacated {
  color: var(--dd-magenta-ink);
  border-left-color: var(--dd-disp-vacated);
  background: rgba(var(--dd-magenta-rgb), 0.12);
  box-shadow: inset 0 0 10px rgba(var(--dd-magenta-rgb), 0.15), 0 0 6px rgba(var(--dd-magenta-rgb), 0.2);
}

.case-status.disposition-remanded,
.case-status.disposition-granted {
  color: var(--dd-cyan-ink);
  border-left-color: var(--dd-disp-remanded);
  background: rgba(var(--dd-cyan-rgb), 0.10);
  box-shadow: inset 0 0 10px rgba(var(--dd-cyan-rgb), 0.15), 0 0 6px rgba(var(--dd-cyan-rgb), 0.2);
}

/* Compound outcome ("Affirmed in part, reversed in part, ...") → split
   badge: the diagonal green/pink tint reads "stands in part / overturned
   in part" at a glance. Text sits in --text-primary so it clears both
   faint tints. */
.case-status.disposition-mixed {
  color: var(--text-primary);
  border-left-color: var(--dd-green);
  background: linear-gradient(135deg,
    rgba(var(--dd-green-rgb), 0.18) 0 50%,
    rgba(var(--dd-pink-rgb), 0.18) 50% 100%);
  box-shadow: inset 0 0 10px rgba(var(--dd-pink-rgb), 0.10);
}

.case-status.disposition-dismissed,
.case-status.disposition-denied {
  color: var(--dd-violet-ink);
  border-left-color: var(--dd-disp-dismissed);
  background: rgba(var(--dd-violet-rgb), 0.14);
  box-shadow: inset 0 0 10px rgba(var(--dd-violet-rgb), 0.16), 0 0 6px rgba(var(--dd-violet-rgb), 0.2);
}

.case-status.disposition-other {
  color: var(--dd-neutral-ink);
  border-left-color: rgba(var(--dd-neutral-rgb), 0.7);
  background: rgba(var(--dd-neutral-rgb), 0.08);
  box-shadow: none;
}

/* ============================================================
   Sidebar aside (tag cloud + disposition legend)
   ============================================================ */

.sidebar-aside {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: var(--border-soft);
}

.sidebar-aside-heading {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 0.75rem;
}

/* Tag cloud chips -- click pre-fills the search box. */
/* Judge-roster era filter: Current bench / All / by decade. Pills match the
   tag-chip aesthetic; .is-active marks the selected era in neon-pink. */
.era-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.6rem;
}
.era-chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 43, 179, 0.22);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
  line-height: 1.2;
}
.era-chip:hover,
.era-chip:focus-visible {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(38, 255, 230, 0.3);
  border-bottom: none;
}
.era-chip.is-active {
  background: rgba(255, 43, 179, 0.12);
  color: var(--neon-pink);
  border-color: var(--neon-pink);
  box-shadow: 0 0 8px rgba(255, 43, 179, 0.3);
}

/* Citation-graph panel (Phase 14): treatment badges + cite lists. */
.citation-graph .cite-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.citation-graph .cite-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.citation-graph .cite-list li:last-child {
  border-bottom: none;
}
.citation-graph .cite-ref {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.8rem;
  color: var(--neon-cyan);
}
.citation-graph .cite-date {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.citation-graph .cite-external {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
}
.citation-graph .cite-block-sep {
  margin-top: 1.6rem;
}
.treatment-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
}
/* Citation treatment (KeyCite/Shepard's layer) on the semantic key. The
   badge base draws its border from currentColor, so color carries both
   text + border; -ink keeps the darker hues readable. */
.treatment-followed { color: var(--dd-tr-followed); }
.treatment-distinguished { color: var(--dd-tr-distinguished); }
.treatment-overruled { color: var(--dd-tr-overruled); }
.treatment-criticized { color: var(--dd-magenta-ink); }
.treatment-explained { color: var(--dd-violet-ink); }
.treatment-cited { color: var(--dd-neutral-ink); }

/* "How this document has been cited" two-column layout (Phase 16b).
   Left = clustered citing passages; right = the distinct citing opinions. */
.citation-graph .cite-columns {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 760px) {
  .citation-graph .cite-columns {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}
.citation-graph .cite-how h2,
.citation-graph .cite-by h2 {
  margin-top: 0;
}
.citation-graph .cite-quote-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.citation-graph .cite-quote-list > li {
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.citation-graph .cite-quote-list > li:last-child {
  border-bottom: none;
}
.citation-graph .cite-quote {
  margin: 0;
  padding: 0.1rem 0 0.1rem 0.85rem;
  border-left: 2px solid rgba(16, 254, 226, 0.4);
  color: var(--text-bright, #e8e8e8);
  font-size: 0.92rem;
  line-height: 1.5;
}
.citation-graph .cite-quote::before { content: "\201C"; }
.citation-graph .cite-quote::after { content: "\201D"; }
.citation-graph .cite-quote-src {
  margin: 0.4rem 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.citation-graph .cite-quote-src a {
  color: var(--neon-cyan);
  text-decoration: none;
}
.citation-graph .cite-quote-src a:hover { text-decoration: underline; }
.citation-graph .cite-all-link {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
}
.citation-graph .cite-all-link a {
  color: var(--neon-cyan);
  text-decoration: none;
}
.citation-graph .cite-all-link a:hover { text-decoration: underline; }
/* Full citing-documents page: each row can carry its quote underneath. */
.citation-graph .cite-list--full > li {
  flex-direction: column;
  align-items: stretch;
  padding: 0.7rem 0;
}
.citation-graph .cite-list--full .cite-quote {
  margin-top: 0.45rem;
  font-size: 0.86rem;
}

.tag-cloud {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag-cloud li {
  display: inline-block;
}

.tag-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 43, 179, 0.35);
  background: rgba(255, 43, 179, 0.06);
  color: var(--neon-pink);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
  line-height: 1.2;
}

.tag-chip:hover,
.tag-chip:focus-visible {
  background: rgba(38, 255, 230, 0.1);
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(38, 255, 230, 0.35);
  border-bottom: none;
}

/* Word-cloud sizing -- 5 buckets keyed off relative frequency in the
   current state's raw_text corpus. xs is "appears but barely"; xl is
   "the dominant phrase in this state's appellate work". */
.tag-chip--xs { font-size: 0.62rem; opacity: 0.62; padding: 0.18rem 0.5rem; }
.tag-chip--sm { font-size: 0.7rem;  opacity: 0.78; padding: 0.22rem 0.55rem; }
.tag-chip--md { font-size: 0.8rem;  padding: 0.28rem 0.65rem; }
.tag-chip--lg { font-size: 0.92rem; padding: 0.32rem 0.7rem; font-weight: 700; }
.tag-chip--xl { font-size: 1.05rem; padding: 0.36rem 0.78rem; font-weight: 700;
                box-shadow: inset 0 0 8px rgba(255, 43, 179, 0.15); }

/* Disposition legend in the sidebar -- one row per bucket, full width. */
.disposition-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.disposition-legend li {
  display: block;
}

.disposition-legend .case-status {
  display: block;
  margin: 0;
  font-size: 0.66rem;
  padding: 0.22rem 0.6rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.disposition-legend .case-status:hover,
.disposition-legend .case-status:focus-visible {
  transform: translateX(2px);
  border-bottom: none;
}

/* The currently-filtering disposition gets a stronger visual signal
   (slight inset glow + lateral nudge so it stands out from siblings). */
.disposition-legend .case-status.is-active-filter {
  transform: translateX(4px);
  box-shadow: inset 0 0 0 1px currentColor, inset 0 0 12px rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Court differentiation pill (state_home table COURT cell)
   ============================================================ */

.court-pill {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.6rem;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
  text-transform: none;
}

.court-pill--supreme {
  color: var(--neon-pink);
  border-color: rgba(255, 43, 179, 0.5);
  background: rgba(255, 43, 179, 0.08);
}

.court-pill--appeals {
  color: var(--neon-cyan);
  border-color: rgba(38, 255, 230, 0.5);
  background: rgba(38, 255, 230, 0.08);
}

/* ============================================================
   Active-filter banner (above the doc-table when ?disposition= or ?q=)
   ============================================================ */

.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.85rem;
  background: rgba(20, 0, 30, 0.55);
  border: var(--border-soft);
  border-left: 3px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.active-filters-label {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.active-filters-query {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  color: var(--neon-cyan);
  padding: 0.18rem 0.5rem;
  background: rgba(38, 255, 230, 0.08);
  border: 1px solid rgba(38, 255, 230, 0.35);
  border-radius: 3px;
}

.active-filters-window {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(148, 140, 161, 0.35);
  border-radius: 3px;
  background: rgba(148, 140, 161, 0.06);
  white-space: nowrap;
}

.active-filters-expand {
  font-size: 0.75rem;
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(38, 255, 230, 0.4);
  transition: color var(--transition), border-color var(--transition);
}

.active-filters-expand:hover,
.active-filters-expand:focus-visible {
  color: var(--text);
  border-bottom-color: var(--neon-cyan);
}

.active-filters-clear {
  margin-left: auto;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(148, 140, 161, 0.4);
  padding: 0.22rem 0.55rem;
  border-radius: 3px;
  transition: color var(--transition), border-color var(--transition);
}

.active-filters-clear:hover {
  color: var(--hazard-red);
  border-color: var(--hazard-red);
  border-bottom: 1px solid var(--hazard-red);
}

/* ============================================================
   Current Judges roster page
   ============================================================
   17 COA judges + 7 SCt justices in a single column is unscannable.
   Redeclare the maddervramsey `cast-grid` + `cast-thumb` with
   tighter sizing so the roster reads as a wall of portraits the
   user can quickly scan, not a vertical scroll-of-doom.
*/

.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  margin: 0 0 2rem;
}

.cast-grid .entity-tile {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cast-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 4px;
  margin: 0.5rem 0 0.85rem;
  border: 1px solid rgba(var(--neon-violet-rgb), 0.25);
}

.cast-grid .entity-tile .role-chip {
  align-self: flex-start;
  margin-bottom: 0.35rem;
}

.cast-grid .entity-tile h3 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.cast-grid .entity-tile h3 a {
  color: var(--neon-cyan);
  text-decoration: none;
}

.cast-grid .entity-tile h3 a:hover {
  text-shadow: var(--shadow-glow-cyan);
  border-bottom: none;
}

.cast-grid .entity-tile .affiliation {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0.35rem 0 0;
}

.cast-grid .entity-tile .cast-summary {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0.5rem 0 0.75rem;
}

.cast-grid .entity-tile .inspect-link {
  margin-top: auto;
  font-size: 0.72rem;
}

/* Section headers between Supreme Court and Court of Appeals groupings. */
.cast-grid + .section-header {
  margin-top: 2rem;
}

/* Narrower screens -- shrink the photo and let the grid collapse to 2 columns. */
@media (max-width: 720px) {
  .cast-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
  }
  .cast-thumb {
    height: 180px;
  }
}

/* ============================================================
   CTA / Support frame (apex page + support page)
   ============================================================
   The "request your state" + "help fund the next embed" block
   on the apex needs to read as friendly + funder-honest, not
   pushy. Soft pink left-border accent matches the brand block.
   ============================================================ */

.cta-frame {
  border-left: 3px solid var(--neon-pink);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.cta-primary,
.cta-secondary {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.55rem 1rem;
  border-radius: 3px;
  border: 1px solid;
  transition: color var(--transition), border-color var(--transition), background var(--transition), text-shadow var(--transition);
}

.cta-primary {
  color: var(--neon-cyan);
  border-color: rgba(38, 255, 230, 0.55);
  background: rgba(38, 255, 230, 0.08);
  text-shadow: 0 0 6px rgba(38, 255, 230, 0.35);
}

.cta-primary:hover,
.cta-primary:focus-visible {
  color: var(--bg-deep);
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  text-shadow: none;
}

.cta-secondary {
  color: var(--neon-pink);
  border-color: rgba(255, 43, 179, 0.55);
  background: rgba(255, 43, 179, 0.08);
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
  color: var(--bg-deep);
  background: var(--neon-pink);
  border-color: var(--neon-pink);
}

button.cta-primary {
  font-family: inherit;
  cursor: pointer;
}

.cta-footnote {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: var(--border-soft);
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
}

.subtle-note {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: -0.5rem;
}

.cost-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.cost-list li {
  padding: 0.85rem 0 0.85rem 1.25rem;
  border-left: 2px solid rgba(38, 255, 230, 0.4);
  margin-bottom: 0.6rem;
  background: rgba(38, 255, 230, 0.04);
  line-height: 1.55;
}

.cost-list strong {
  color: var(--neon-cyan);
  font-weight: 600;
}

/* ============================================================
   Request-state form
   ============================================================ */

.cta-form {
  margin: 1.5rem 0 0;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.form-row label {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-bright, #f0e8f5);
  background: rgba(15, 0, 25, 0.6);
  border: 1px solid rgba(148, 140, 161, 0.4);
  border-radius: 3px;
  padding: 0.55rem 0.7rem;
  transition: border-color var(--transition), background var(--transition);
}

.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--neon-cyan);
  background: rgba(15, 0, 25, 0.9);
}

.form-row textarea {
  resize: vertical;
  min-height: 4rem;
  font-family: inherit;
  line-height: 1.5;
}

.form-error {
  color: var(--hazard-red);
  font-size: 0.85rem;
  margin: 0;
}

.form-actions {
  margin-top: 1rem;
}

/* Honeypot trap -- hidden from real users; bots fill it. */
.hp-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   Editorial review status
   ============================================================
   Surfaces whether an opinion has been human-reviewed vs. only
   machine-processed. Detail-page chip + list-view colored dot.
   ============================================================ */

/* Detail-page chip (alongside Precedential / Disposition in the header) */
.review-pill {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.6rem;
  border-radius: 3px;
  border: 1px solid;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Editorial review status on the semantic key: processed = cyan
   (ML-processed / in motion), reviewed = green (human-blessed),
   flagged = magenta (needs attention). */
.review-pill--ai_only {
  color: var(--dd-cyan-ink);
  border-color: rgba(var(--dd-cyan-rgb), 0.45);
  background: rgba(var(--dd-cyan-rgb), 0.08);
}

.review-pill--flagged {
  color: var(--dd-magenta-ink);
  border-color: rgba(var(--dd-magenta-rgb), 0.5);
  background: rgba(var(--dd-magenta-rgb), 0.1);
}

.review-pill--reviewed {
  color: var(--dd-green-ink);
  border-color: rgba(var(--dd-green-rgb), 0.55);
  background: rgba(var(--dd-green-rgb), 0.1);
  box-shadow: 0 0 8px rgba(var(--dd-green-rgb), 0.2);
}

/* List-view dot (in the title cell, before the case link) */
.review-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: help;
}

.review-dot--ai_only {
  background: var(--dd-cyan);
  box-shadow: 0 0 5px rgba(var(--dd-cyan-rgb), 0.55);
}

.review-dot--flagged {
  background: var(--dd-magenta);
  box-shadow: 0 0 5px rgba(var(--dd-magenta-rgb), 0.6);
}

.review-dot--reviewed {
  background: var(--dd-green);
  box-shadow: 0 0 6px rgba(var(--dd-green-rgb), 0.65);
}

/* ============================================================
   Summarized holding panel (NH-only)
   ------------------------------------------------------------
   The site's single LLM-generated surface: a 2-3 sentence summary
   of the court's holding, drawn from the opinion's own text. Reuses
   the .review-dot--<status> color convention so the amber/cyan/red
   dot reads identically to the opinion's editorial review status.
   The left border sits in the amber "machine summary" register by
   default; the dot + note line carry the live review state.
   ============================================================ */
.holding-panel {
  border-left: 2px solid rgba(255, 191, 61, 0.4);
}

.holding-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.holding-panel__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.holding-dot {
  cursor: help;
  margin-right: 0;
}

.holding-hide {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-dim);
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.holding-hide:hover {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
}

.holding-panel__text {
  margin: 0 0 0.9rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.holding-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  font-size: 0.85rem;
}

.holding-paras {
  color: var(--text-dim);
}

.holding-para-link,
.holding-jump {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.holding-para-link {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  margin-left: 0.3rem;
}

.holding-para-link:hover,
.holding-jump:hover {
  border-bottom-color: var(--neon-cyan);
}

.holding-panel__note {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-dim);
  font-style: italic;
}

.holding-panel__note a {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-style: normal;
}

.holding-panel__note a:hover {
  border-bottom-color: var(--neon-cyan);
}

/* Collapsed stub shown after the reader hides summaries site-wide. */
.holding-stub {
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 0.7rem 1rem;
}

.holding-stub a {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.holding-stub a:hover {
  border-bottom-color: var(--neon-cyan);
}

/* ============================================================
   Dig-deeper prompt (default landing, below the 10-row preview)
   ============================================================
   When there's no active filter, the home page shows the 10 most
   recent opinions and a prompt explaining how to access the full
   60K corpus (search box, outcome filter, tag cloud). Visually
   inset so it reads as a guide, not chrome.
   ============================================================ */

.dig-deeper {
  margin: 1.25rem 0 0;
  padding: 0.95rem 1.1rem;
  background: rgba(20, 0, 30, 0.55);
  border: var(--border-soft);
  border-left: 3px solid var(--neon-pink);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.6;
}

.dig-deeper p {
  margin: 0;
  color: var(--text-dim);
}

.dig-deeper strong {
  color: var(--neon-cyan);
  font-weight: 600;
}

/* ============================================================
   Pagination (state-home doc-table)
   ============================================================
   60K MN opinions means 50/page = 1,200+ pages. Power users use
   search, but the simple Prev/Next + First/Last + "Page X of Y"
   gives clean orientation. Three-column layout keeps the current-page
   indicator centered no matter which buttons are visible.
   ============================================================ */

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: var(--border-soft);
}

.pagination-prev {
  justify-self: start;
  display: flex;
  gap: 0.5rem;
}

.pagination-next {
  justify-self: end;
  display: flex;
  gap: 0.5rem;
}

.pagination-state {
  justify-self: center;
}

.pagination a {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(148, 140, 161, 0.35);
  border-radius: 3px;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.pagination a:hover,
.pagination a:focus-visible {
  color: var(--neon-cyan);
  border-color: rgba(38, 255, 230, 0.6);
  background: rgba(38, 255, 230, 0.06);
}

.pagination-current {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon-pink);
  padding: 0.35rem 0.85rem;
  background: rgba(255, 43, 179, 0.08);
  border: 1px solid rgba(255, 43, 179, 0.35);
  border-radius: 3px;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .pagination {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .pagination-prev,
  .pagination-next {
    justify-self: center;
  }
}

/* ============================================================
   Privacy link in the sidebar justice-banner
   ============================================================
   The four-line "Public record · Human review · No verdicts
   asserted · Privacy" footer is the editorial pact. The Privacy
   link is part of that promise, so it's styled to feel like an
   extension of the static text rather than a flashy CTA.
   ============================================================ */

.justice-banner-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(148, 140, 161, 0.45);
  text-underline-offset: 0.18em;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.justice-banner-link:hover,
.justice-banner-link:focus-visible {
  color: var(--neon-cyan);
  text-decoration-color: var(--neon-cyan);
}

/* ============================================================
   Status pill (About page) -- "Beta · Minnesota"
   ============================================================ */

.status-pill {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}

.status-pill--beta {
  color: var(--neon-cyan);
  border-color: rgba(38, 255, 230, 0.55);
  background: rgba(38, 255, 230, 0.1);
  box-shadow: 0 0 10px rgba(38, 255, 230, 0.18);
}

/* Flagship state (NH -- the proving ground). Magenta/pink so it reads as
   prestige + distinct from the cyan beta pill. */
.status-pill--flagship {
  color: var(--neon-pink);
  border-color: rgba(255, 43, 179, 0.6);
  background: rgba(255, 43, 179, 0.12);
  box-shadow: 0 0 12px rgba(255, 43, 179, 0.28);
}

/* Privacy page signature line ("— DocketDrift") -- right-aligned,
   muted, monospace, reads as a signoff rather than a paragraph. */
.signature {
  margin-top: 2rem;
  text-align: right;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* ============================================================
   State landing page (mn.docketdrift.com root)
   ============================================================
   The proper "Minnesota homepage" -- brand-forward hero, key
   numbers, recent activity preview, big card links into the
   actual surfaces (opinions, judges, tags). What casual visitors
   see when they hit a state subdomain.
   ============================================================ */

.landing-hero {
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.landing-hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  margin: 1rem 0 0.85rem;
  letter-spacing: 0.05em;
}

.landing-hero .status-pill {
  margin-bottom: 0.5rem;
}

.landing-hero .lede {
  font-size: 1.15rem;
  color: var(--text-primary);
  max-width: 620px;
  margin: 0 auto 0.5rem;
  line-height: 1.5;
}

.landing-hero .lede-secondary {
  font-size: 0.95rem;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto;
  font-style: italic;
}

.landing-stats-frame {
  padding: 1.2rem 1.4rem;
}

.landing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.1rem;
}

.landing-stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: rgba(20, 0, 30, 0.5);
  border: var(--border-soft);
  border-left: 3px solid var(--neon-pink);
  border-radius: var(--radius-sm);
}

.landing-stats li:nth-child(2) { border-left-color: var(--neon-cyan); }
.landing-stats li:nth-child(3) { border-left-color: var(--neon-green); }
.landing-stats li:nth-child(4) { border-left-color: var(--neon-violet); }

.landing-stats strong {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: 1;
}

.landing-stats strong small {
  font-size: 0.7em;
  color: var(--text-dim);
}

.landing-stats span {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.landing-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.landing-section-header h2 {
  margin: 0;
}

.landing-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.landing-browse-card {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.25rem;
  background: rgba(20, 0, 30, 0.5);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.landing-browse-card:hover,
.landing-browse-card:focus-visible {
  border-color: var(--neon-cyan);
  background: rgba(38, 255, 230, 0.05);
  transform: translateY(-2px);
}

.landing-browse-card strong {
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--neon-pink);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.landing-browse-card span {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.landing-browse-card:hover strong,
.landing-browse-card:focus-visible strong {
  color: var(--neon-cyan);
}

/* ============================================================
   Judge dossier stats (J3 -- per-judge opinion infographic)
   ============================================================
   The judge detail page now has real per-judge data: stat cards for
   role summary (authored / joined / dissents), CSS-only bar charts
   for court split + disposition breakdown, co-panelist list, and
   recent opinions table. All pure-HTML/CSS -- no JS framework, no
   chart library, lightweight forever.
   ============================================================ */

.judge-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
  margin: 1.25rem 0 0.5rem;
}

/* Per-state landing "Coverage note" banner -- fires when the most
   recent opinion in the corpus is more than ~30 days old. Honest
   disclosure of an ingestion lag (typically caused by CourtListener's
   own ingestion cadence for that state's court site). Visual posture:
   subdued -- it's information, not an alarm. */
.coverage-note {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  background: rgba(var(--neon-cyan-rgb), 0.06);
  border: 1px solid rgba(var(--neon-cyan-rgb), 0.22);
  border-left: 3px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.coverage-note strong:first-child {
  color: var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  margin-right: 0.4rem;
}
.coverage-note code {
  font-size: 0.86em;
  padding: 0.05em 0.35em;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

/* "Does DocketDrift hallucinate cases?" callout on /about/.
   Visually prominent: brighter border accent + slight background
   tint so readers' eyes land on it. Sits inside the glossy-frame
   so spacing inherits naturally. */
.ai-disclosure {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(var(--neon-pink-rgb), 0.06);
  border: 1px solid rgba(var(--neon-pink-rgb), 0.25);
  border-left: 4px solid var(--neon-magenta);
  border-radius: var(--radius-sm);
}
.ai-disclosure h2 {
  margin-top: 0;
  color: var(--neon-magenta);
}
.ai-disclosure p:last-child {
  margin-bottom: 0;
}

/* Two-column "what we don't / what we do" table in the
   How-we-differ section. Subtle border, comfortable padding,
   collapses to a stacked layout at narrow widths. */
.differ-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.differ-table th,
.differ-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border-soft-color, rgba(255, 255, 255, 0.08));
  vertical-align: top;
  text-align: left;
}
.differ-table th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #aaa);
  border-bottom: 2px solid var(--border-soft-color, rgba(255, 255, 255, 0.15));
}
.differ-table td:first-child {
  color: var(--text-secondary, #aaa);
}
.differ-table td:last-child {
  color: var(--text-primary, #fff);
}
@media (max-width: 720px) {
  .differ-table thead { display: none; }
  .differ-table tr {
    display: block;
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-soft-color, rgba(255, 255, 255, 0.08));
  }
  .differ-table td {
    display: block;
    border: 0;
    padding: 0.15rem 0;
  }
  .differ-table td:first-child::before {
    content: "We don't: ";
    color: var(--neon-magenta);
    font-weight: 600;
  }
  .differ-table td:last-child::before {
    content: "We do: ";
    color: var(--neon-cyan);
    font-weight: 600;
  }
}

/* Two-column hero row on the judge page: bio card on the left,
   judicial record card on the right. Below the row, the deeper-dive
   cards (by court / by disposition / cohort / recent opinions) keep
   the original full-width stacked layout. At mobile widths the grid
   collapses to one column, bio stacks above record. */
.judge-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  align-items: stretch;
}
.judge-top-row > .glossy-frame {
  margin: 0;             /* override the default vertical card spacing */
  height: 100%;
}
@media (max-width: 880px) {
  .judge-top-row {
    grid-template-columns: 1fr;
  }
}

/* Compact portrait inside the narrower bio card. The earlier 260px
   was sized for a full-width card; halving the card width means we
   need a smaller photo or it eats the whole column. */
.judge-bio-card__photo {
  display: block;
  max-width: 180px;
  height: auto;
  margin: 0 0 1.25rem;
  border-radius: var(--radius-sm);
}

/* Collapsible biography panel. Default state is a single line so the
   stat cards + judicial record sections sit close to the page top
   instead of being buried under a multi-paragraph wall of bio text.
   Click the summary to reveal the full official bio in-place. */
.judge-bio-toggle {
  margin: 0.5rem 0 1rem;
  border: var(--border-soft);
  border-left: 3px solid var(--neon-magenta);
  border-radius: var(--radius-sm);
  background: rgba(20, 0, 30, 0.35);
  overflow: hidden;
}
.judge-bio-toggle > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--neon-magenta);
  user-select: none;
}
.judge-bio-toggle > summary::-webkit-details-marker { display: none; }
.judge-bio-toggle > summary::marker { content: ""; }
.judge-bio-toggle > summary:hover {
  background: rgba(var(--neon-pink-rgb), 0.08);
}
.judge-bio-toggle__chevron {
  font-size: 0.9rem;
  transition: transform 0.18s ease;
  color: var(--neon-magenta);
}
.judge-bio-toggle[open] .judge-bio-toggle__chevron {
  transform: rotate(90deg);
}
.judge-bio-toggle__body {
  padding: 0.5rem 1.1rem 1rem;
  border-top: var(--border-soft);
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.judge-bio-toggle__body p {
  margin: 0 0 0.85rem;
}
.judge-bio-toggle__body p:last-child { margin-bottom: 0; }

.judge-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.1rem;
  background: rgba(20, 0, 30, 0.5);
  border: var(--border-soft);
  border-left: 3px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
}

.judge-stat-card strong {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--neon-cyan);
  letter-spacing: 0.02em;
  line-height: 1;
}

.judge-stat-card span {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.judge-stat-card--accent {
  border-left-color: var(--neon-pink);
}
.judge-stat-card--accent strong {
  color: var(--neon-pink);
}

/* Horizontal CSS bar chart for court + disposition breakdowns. */
.judge-bar-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.judge-bar-list li {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr 60px;
  align-items: center;
  gap: 0.85rem;
}

.judge-bar-label {
  display: flex;
  align-items: center;
}

.judge-bar-track {
  position: relative;
  height: 14px;
  background: rgba(148, 140, 161, 0.12);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.judge-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--neon-cyan);
  opacity: 0.65;
  border-radius: var(--radius-pill);
  min-width: 4px;
}

/* Disposition-breakdown bars track the same semantic key as the pills. */
.judge-bar-fill--affirmed, .judge-bar-fill--modified { background: var(--dd-green); }
.judge-bar-fill--reversed { background: var(--dd-pink); }
.judge-bar-fill--vacated { background: var(--dd-magenta); }
.judge-bar-fill--remanded, .judge-bar-fill--granted { background: var(--dd-cyan); }
.judge-bar-fill--dismissed, .judge-bar-fill--denied { background: var(--dd-violet); }
.judge-bar-fill--mixed {
  background: linear-gradient(135deg, var(--dd-green) 0 50%, var(--dd-pink) 50% 100%);
}
.judge-bar-fill--other { background: rgba(var(--dd-neutral-rgb), 0.6); }

.judge-bar-count {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: right;
  letter-spacing: 0.05em;
}

/* Frequent co-panelists list -- simple list with right-aligned counts. */
.judge-cohort-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.judge-cohort-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px dashed rgba(148, 140, 161, 0.18);
}

.judge-cohort-list a {
  color: var(--neon-cyan);
  text-decoration: none;
  font-weight: 500;
}

.judge-cohort-list a:hover,
.judge-cohort-list a:focus-visible {
  color: var(--neon-pink);
  text-decoration: underline;
  text-decoration-color: var(--neon-pink);
}

.judge-cohort-count {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.judge-cohort-compare {
  font-size: 0.75rem;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  font-style: italic;
  margin-left: 0.7rem;
  color: var(--text-dim);
  text-decoration: none;
}

.judge-cohort-compare::before {
  content: "·";
  margin-right: 0.55rem;
  color: rgba(148, 140, 161, 0.4);
}

.judge-cohort-compare:hover,
.judge-cohort-compare:focus-visible {
  color: var(--neon-pink);
  text-decoration: underline;
}

/* ----- Time-series chart (judge_detail) ------------------------------
   Server-rendered SVG line chart; the .judge-chart-wrap wraps both the
   SVG and the inline legend so they share a flex layout on desktop
   and stack on narrow screens.
   ------------------------------------------------------------------ */

.judge-chart-card .subtle-lead code {
  font-size: 0.82rem;
  padding: 0.05rem 0.35rem;
  background: rgba(var(--neon-cyan-rgb), 0.08);
  border: 1px solid rgba(var(--neon-cyan-rgb), 0.2);
  border-radius: 3px;
  color: var(--neon-cyan);
}

.judge-chart-wrap {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.judge-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(148, 140, 161, 0.12);
  border-radius: 4px;
}

.judge-chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.3rem;
  font-size: 0.85rem;
  color: var(--text-bright);
}

.judge-chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.judge-chart-legend__swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ----- Compare two judges (judge_compare.html) ---------------------- */

.judge-compare-header h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
}

.judge-compare-header h1 a {
  color: var(--neon-cyan);
  text-decoration: none;
}

.judge-compare-header h1 a:nth-of-type(2) {
  color: var(--neon-pink);
}

.vs-token {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-style: italic;
}

.judge-compare-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.9rem;
  margin-top: 1rem;
}

.judge-compare-picker__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 220px;
  min-width: 0;
}

.judge-compare-picker__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.judge-compare-picker__field select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-bright);
  border: 1px solid rgba(148, 140, 161, 0.3);
  border-radius: 3px;
  font: inherit;
}

.judge-compare-picker__field select:focus-visible {
  border-color: var(--neon-cyan);
  outline: none;
}

.judge-compare-picker__sep {
  padding-bottom: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-style: italic;
}

.judge-compare-picker__submit {
  padding: 0.55rem 1.15rem;
  background: var(--neon-cyan);
  color: #00141a;
  border: none;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.judge-compare-picker__submit:hover,
.judge-compare-picker__submit:focus-visible {
  background: var(--neon-pink);
  outline: none;
}

.judge-compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
  margin-top: 1.2rem;
}

@media (max-width: 800px) {
  .judge-compare-grid {
    grid-template-columns: 1fr;
  }
}

.judge-compare-col-frame {
  /* Each column is its own glossy-frame so they stand as parallel
     dossier cards; trim the inner padding slightly so the two columns
     don't feel cramped at typical desktop widths. */
  padding: 1.25rem 1.4rem;
}

.judge-compare-col-frame h3 {
  margin-top: 1.4rem;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text-bright);
}

.judge-compare-col-frame .judge-bar-list,
.judge-compare-col-frame .judge-cohort-list {
  margin-top: 0.4rem;
}

.judge-compare-col-title {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}

.judge-compare-col-title a {
  text-decoration: none;
}

.judge-compare-col-frame:nth-of-type(2) .judge-compare-col-title a {
  /* Matches the chart's overlay color so the column visually anchors
     to the pink line in the chart above. */
  color: var(--neon-pink);
}

.judge-compare-col-frame:nth-of-type(1) .judge-compare-col-title a {
  color: var(--neon-cyan);
}

/* Compact variant of doc-table used inside the side-by-side columns
   to keep each recent-opinions list narrower than the standalone
   dossier's. */
.doc-table.doc-table--compact {
  font-size: 0.82rem;
}

.doc-table.doc-table--compact th,
.doc-table.doc-table--compact td {
  padding: 0.35rem 0.45rem;
}

/* ----- Concordance + split-decision list -----------------------------
   Sits between the time-series chart and the side-by-side dossier
   columns on judge_compare.html. Headline is the agreement rate, then
   a stacked horizontal bar showing agree/partial/disagree share, then
   the legend, then a table of recent disagreement opinions with each
   judge's vote-bucket chip side-by-side.
   ------------------------------------------------------------------ */

.concordance-card {
  margin-top: 1.2rem;
}

.concordance-rate {
  font-size: 0.95rem;
  margin: 0.8rem 0 0.5rem;
  letter-spacing: 0.02em;
}

.concordance-rate strong {
  font-size: 1.55rem;
  color: var(--neon-cyan);
  display: inline-block;
  padding-right: 0.4rem;
}

.concordance-bar {
  display: flex;
  width: 100%;
  height: 22px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(148, 140, 161, 0.15);
  border-radius: 3px;
  overflow: hidden;
  margin: 0.4rem 0 0.8rem;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
}

.concordance-bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.78);
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.2s ease;
}

.concordance-bar__seg--agree {
  background: var(--neon-lime);
}

.concordance-bar__seg--partial {
  background: var(--neon-amber);
}

.concordance-bar__seg--disagree {
  background: var(--hazard-red);
}

.concordance-legend {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-bright);
}

.concordance-legend__swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 0.55rem;
  border-radius: 2px;
  vertical-align: middle;
}

.concordance-splits-table {
  width: 100%;
}

.concordance-splits-table .title-snippet {
  display: block;
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 0.1rem;
  letter-spacing: 0.01em;
}

/* Vote-bucket chips used in the splits-table judge columns. Distinct
   palette from the disposition pills -- these are about who-voted-what,
   not the case outcome. */
.vote-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vote-chip--majority {
  background: rgba(var(--neon-lime-rgb), 0.16);
  color: var(--neon-lime);
  border: 1px solid rgba(var(--neon-lime-rgb), 0.4);
}

.vote-chip--concurrence {
  background: rgba(var(--neon-amber-rgb), 0.16);
  color: var(--neon-amber);
  border: 1px solid rgba(var(--neon-amber-rgb), 0.4);
}

.vote-chip--dissent {
  background: rgba(var(--hazard-red-rgb), 0.16);
  color: var(--hazard-red);
  border: 1px solid rgba(var(--hazard-red-rgb), 0.4);
}

.vote-chip--recused {
  background: rgba(148, 140, 161, 0.16);
  color: var(--text-dim);
  border: 1px solid rgba(148, 140, 161, 0.4);
}

/* ----- Search-result match snippets ------------------------------- */

/* When a row has an attached snippet, drop the bottom border so the
   snippet row visually continues from the result row above it instead
   of looking like a separate result. */
.doc-table tbody tr.doc-row--with-snippet td {
  border-bottom: none;
}

.doc-snippet-row td.doc-snippet-cell {
  padding: 0 0.6rem 0.7rem 0.6rem;
  border-bottom: 1px solid rgba(148, 140, 161, 0.18);
}

.doc-snippet-link {
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-dim);
  text-decoration: none;
  font-style: italic;
  padding: 0.25rem 0.5rem 0.4rem 2rem;
  border-left: 2px solid rgba(var(--neon-pink-rgb), 0.3);
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0 2px 2px 0;
}

.doc-snippet-link:hover,
.doc-snippet-link:focus-visible {
  color: var(--text-bright);
  border-left-color: var(--neon-pink);
  background: rgba(var(--neon-pink-rgb), 0.06);
  outline: none;
}

.doc-snippet-link mark {
  background: rgba(var(--neon-pink-rgb), 0.32);
  color: var(--text-bright);
  font-style: normal;
  font-weight: 600;
  padding: 0.05rem 0.15rem;
  border-radius: 2px;
}

/* ----- Opinion-detail: paragraph anchors + find-this banner -------- */

.op-para-anchor {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-decoration: none;
  margin-right: 0.15rem;
  padding: 0 0.25rem;
  border-radius: 2px;
  vertical-align: baseline;
  user-select: none;
}

.op-para-anchor:hover,
.op-para-anchor:focus-visible {
  color: var(--neon-cyan);
  background: rgba(var(--neon-cyan-rgb), 0.08);
  outline: none;
}

/* When a paragraph is the URL-fragment target, keep a steady subtle marker
   so the user can still see where the deep-link landed after the flash. */
.opinion-body .op-para:target {
  background: rgba(var(--neon-cyan-rgb), 0.06);
  border-left: 2px solid var(--neon-cyan);
  padding-left: 0.75rem;
  margin-left: -0.75rem;
  border-radius: 0 3px 3px 0;
}

/* Landing flash (NH deep-links). The NH opinion script adds .para-flash on
   arrival at #para-N and on each pilcrow click; the paragraph pulses cyan
   once and fades over ~2s, settling into the steadier :target marker above.
   Class-driven rather than a :target animation so re-clicking the SAME
   paragraph re-fires the pulse (a :target animation wouldn't restart). */
@keyframes paraFlash {
  0%   { background: rgba(var(--neon-cyan-rgb), 0.26); }
  100% { background: transparent; }
}
.opinion-body .op-para.para-flash {
  animation: paraFlash 2s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  /* Skip the pulse; the persistent :target marker still shows the landing. */
  .opinion-body .op-para.para-flash { animation: none; }
}

/* Pilcrow copy-to-clipboard affordance (NH only). The base .op-para-anchor
   style is above; the NH script tags each anchor .op-para-anchor--copy and
   flips .is-copied for ~1.6s after a successful copy to show a confirmation
   bubble. MN/AZ keep the plain navigate-on-click anchor (no JS tagging). */
.op-para-anchor.op-para-anchor--copy {
  cursor: pointer;
  position: relative;
}
.op-para-anchor.is-copied {
  color: var(--neon-cyan);
  background: rgba(var(--neon-cyan-rgb), 0.14);
}
.op-para-anchor.is-copied::after {
  content: "Copied";
  position: absolute;
  left: 50%;
  bottom: 135%;
  transform: translateX(-50%);
  background: var(--neon-cyan);
  color: #04121a;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* Marks inside the opinion body (from ?q= highlighting). */
.opinion-body mark {
  background: rgba(var(--neon-pink-rgb), 0.32);
  color: inherit;
  padding: 0.03rem 0.18rem;
  border-radius: 2px;
  font-weight: 600;
}

.opinion-find-banner {
  margin: 0 0 1rem;
  padding: 0.55rem 0.9rem;
  background: rgba(var(--neon-pink-rgb), 0.08);
  border: 1px solid rgba(var(--neon-pink-rgb), 0.25);
  border-radius: 3px;
  font-size: 0.86rem;
  color: var(--text-bright);
}

/* Search-results notices: over-broad term capped, or a degraded (timed-out)
   search. Calm, informative -- not an error. The --warn variant is for the
   degraded case (search couldn't finish), the base for the capped case. */
.search-notice {
  margin: 0 0 1rem;
  padding: 0.55rem 0.9rem;
  background: rgba(var(--neon-cyan-rgb), 0.07);
  border: 1px solid rgba(var(--neon-cyan-rgb), 0.22);
  border-radius: 3px;
  font-size: 0.86rem;
  color: var(--text-bright);
}

.search-notice--warn {
  background: rgba(var(--neon-amber-rgb), 0.08);
  border-color: rgba(var(--neon-amber-rgb), 0.30);
}

.opinion-find-banner a {
  color: var(--neon-cyan);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.opinion-find-banner a:hover,
.opinion-find-banner a:focus-visible {
  color: var(--neon-pink);
  text-decoration: underline;
}

/* ============================================================
   Editorial tag chips (opinion detail header + browse pages)
   ============================================================
   Tags are the editorial moat -- the visible signal that a human has
   read this opinion and applied controlled-vocabulary topic markers.
   Color-coded per category so users see at a glance whether a tag
   describes a substantive doctrine, a procedural posture, etc.
   ============================================================ */

.opinion-tags {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.opinion-tag {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
  border: 1px solid;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.opinion-tag:hover,
.opinion-tag:focus-visible {
  filter: brightness(1.2);
}

.opinion-tag--lg {
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.tag-count {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.08rem 0.4rem;
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
}

.opinion-tag--doctrine {
  color: var(--neon-cyan);
  border-color: rgba(38, 255, 230, 0.45);
  background: rgba(38, 255, 230, 0.07);
}

.opinion-tag--subject {
  color: var(--neon-pink);
  border-color: rgba(255, 43, 179, 0.45);
  background: rgba(255, 43, 179, 0.07);
}

.opinion-tag--procedural {
  color: var(--neon-amber);
  border-color: rgba(var(--neon-amber-rgb), 0.45);
  background: rgba(var(--neon-amber-rgb), 0.07);
}

.opinion-tag--posture {
  color: var(--neon-violet);
  border-color: rgba(179, 148, 255, 0.45);
  background: rgba(179, 148, 255, 0.07);
}

/* Tag-index browse page: category sections + tag grid */

.tag-category-block {
  margin: 1.75rem 0;
}

.tag-category-heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin: 0 0 0.85rem;
  border-bottom: 1px dashed rgba(148, 140, 161, 0.25);
  padding-bottom: 0.5rem;
}

.tag-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* ============================================================
   Semantic search results block (state-home below keyword table)
   ============================================================
   When the user runs a query, we surface keyword/FULLTEXT matches in
   the main table AND a "semantically similar" block below for
   meaning-not-just-words matches. The block needs a clear visual
   break from the keyword results so users understand they're seeing
   a different kind of match.
   ============================================================ */

.semantic-results {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(255, 43, 179, 0.3);
}

.semantic-results-heading {
  font-size: 1.15rem;
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.semantic-badge {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 3px;
  color: var(--neon-pink);
  border: 1px solid rgba(255, 43, 179, 0.5);
  background: rgba(255, 43, 179, 0.08);
  box-shadow: 0 0 8px rgba(255, 43, 179, 0.18);
  white-space: nowrap;
  vertical-align: middle;
}

/* ----------  Similar-opinions panel (NH proving-ground)  ----------
   Polished, prominent "what else reads like this case" surface that sits
   directly under the opinion metadata on NH detail pages. Cyan accent to
   match the semantic-search lineage; MN/AZ keep the legacy bottom table. */
.semantic-badge--cyan {
  color: var(--neon-cyan);
  border-color: rgba(38, 255, 230, 0.5);
  background: rgba(38, 255, 230, 0.08);
  box-shadow: 0 0 8px rgba(38, 255, 230, 0.18);
}

.similar-panel {
  border-left: 2px solid rgba(38, 255, 230, 0.35);
}

.similar-panel__head {
  margin-bottom: 1rem;
}

.similar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.similar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-tile);
  border: 1px solid rgba(38, 255, 230, 0.14);
  border-radius: 6px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.similar-item:hover {
  border-color: var(--neon-cyan);
  background: var(--bg-tile-hover);
  transform: translateX(2px);
}

.similar-item__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  border: none;
  min-width: 0;
  flex: 1 1 auto;
}

.similar-item__link:hover {
  border: none;
}

.similar-item__title {
  color: var(--neon-cyan);
  font-weight: 600;
  line-height: 1.3;
}

.similar-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.similar-cite {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  color: var(--neon-amber);
  font-weight: 600;
  white-space: nowrap;
}

.similar-date {
  color: var(--text-dim);
  white-space: nowrap;
}

.similar-score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(38, 255, 230, 0.25);
  background: rgba(38, 255, 230, 0.06);
}

.similar-score__num {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--neon-cyan);
}

.similar-score__label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: 0.2rem;
}

@media (max-width: 560px) {
  .similar-item {
    flex-direction: column;
    align-items: stretch;
  }
  .similar-score {
    flex-direction: row;
    gap: 0.4rem;
    align-self: flex-start;
  }
}

/* ============================================================
   "Cite this case" tool + client-side citation cart (NH only)
   ------------------------------------------------------------
   The inline cite tool lives in the opinion-header card; the cart is a
   floating FAB (bottom-right) built in citation_cart.js. Cart state is
   localStorage-only -- nothing here or in the JS touches the server.
   Neon-on-dark, matching .opinion-actions (cyan accent to distinguish the
   research tool from the pink download/source actions above it).
   ============================================================ */
.cite-tool {
  margin: 0;
}

.cite-tool__btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(38, 255, 230, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(38, 255, 230, 0.08);
  color: var(--neon-cyan);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              box-shadow var(--transition);
}

.cite-tool__btn:hover,
.cite-tool__btn[aria-expanded="true"] {
  background: var(--neon-cyan);
  color: #050505;
  box-shadow: 0 0 12px rgba(38, 255, 230, 0.45);
}

.citation-display {
  margin-top: 0.7rem;
  padding: 0.85rem 1rem;
  border: var(--border-soft);
  border-left: 3px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  background: var(--bg-tile);
  max-width: 46rem;
}

.citation-display__text {
  margin: 0 0 0.7rem;
  font-style: italic;       /* Bluebook caption courtesy; cart export is plain */
  color: var(--text-primary);
  line-height: 1.5;
  /* Plain-text cite the user can select + copy by hand if JS clipboard fails */
  -webkit-user-select: text;
  user-select: text;
}

.citation-display__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.citation-copy,
.citation-add {
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(38, 255, 230, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(38, 255, 230, 0.06);
  color: var(--neon-cyan);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.citation-copy:hover,
.citation-add:hover,
.citation-copy.is-flashed,
.citation-add.is-flashed {
  background: var(--neon-cyan);
  color: #050505;
}

.citation-format-toggle {
  margin-left: auto;
  padding: 0.3rem 0.5rem;
  border: none;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.citation-format-toggle:hover {
  color: var(--neon-cyan);
}

/* ---- floating cart FAB + panel ---- */
.citation-cart-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}

.citation-cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(38, 255, 230, 0.55);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--neon-cyan);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(38, 255, 230, 0.25);
  transition: box-shadow var(--transition), background var(--transition);
}

.citation-cart-pill:hover {
  background: var(--bg-tile-hover);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 16px rgba(38, 255, 230, 0.4);
}

.citation-cart-pill__icon {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--neon-cyan);
}

.citation-cart-pill__count {
  font-variant-numeric: tabular-nums;
}

.citation-cart-pill__label {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.citation-cart-panel {
  width: min(26rem, calc(100vw - 2rem));
  max-height: min(60vh, 32rem);
  display: flex;
  flex-direction: column;
  border: var(--border-sharp);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

.citation-cart-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-bottom: var(--border-soft);
  color: var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

.citation-cart-close {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}

.citation-cart-close:hover {
  color: var(--neon-pink);
}

.citation-cart-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.5rem;
  overflow-y: auto;
  flex: 1;
  counter-reset: cite;
}

.citation-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.4rem;
  border-bottom: 1px solid rgba(var(--neon-violet-rgb), 0.12);
}

.citation-cart-item:last-child {
  border-bottom: none;
}

.citation-cart-item__text {
  flex: 1;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-primary);
  font-style: italic;
}

.citation-cart-item__text::before {
  counter-increment: cite;
  content: counter(cite) ". ";
  font-style: normal;
  color: var(--text-dim);
}

.citation-cart-item__remove {
  flex: none;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}

.citation-cart-item__remove:hover {
  color: var(--neon-pink);
}

.citation-cart-panel__actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-top: var(--border-soft);
}

.citation-cart-copyall,
.citation-cart-clear {
  flex: 1;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.citation-cart-copyall {
  border: 1px solid rgba(38, 255, 230, 0.45);
  background: rgba(38, 255, 230, 0.08);
  color: var(--neon-cyan);
}

.citation-cart-copyall:hover,
.citation-cart-copyall.is-flashed {
  background: var(--neon-cyan);
  color: #050505;
}

.citation-cart-clear {
  border: 1px solid rgba(255, 43, 179, 0.4);
  background: rgba(255, 43, 179, 0.06);
  color: var(--neon-pink);
}

.citation-cart-clear:hover {
  background: var(--neon-pink);
  color: #050505;
}

/* On a phone, shrink the resting pill so it doesn't cover opinion text;
   it still expands to the full panel on tap. */
@media (max-width: 600px) {
  .citation-cart-fab {
    right: 0.6rem;
    bottom: 0.6rem;
  }
  .citation-cart-pill__label {
    display: none;
  }
  .citation-cart-pill {
    padding: 0.5rem 0.7rem;
  }
}