/* ============================================================
   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.
   ============================================================ */

/* ----------  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.85rem;
  align-items: center;
  margin: 0 0 1.25rem;
}

.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 1.25rem;
  border-left: 2px solid rgba(169, 94, 255, 0.45);
  padding-left: 0.85rem;
  max-width: none;
}

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

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

.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(169, 94, 255, 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.
   ============================================================ */

.case-status.disposition-affirmed {
  color: var(--neon-cyan);
  border-left-color: var(--neon-cyan);
  background: rgba(38, 255, 230, 0.08);
  box-shadow: inset 0 0 10px rgba(38, 255, 230, 0.15), 0 0 6px rgba(38, 255, 230, 0.2);
}

.case-status.disposition-reversed {
  color: var(--neon-pink);
  border-left-color: var(--neon-pink);
  background: rgba(255, 43, 179, 0.08);
  box-shadow: inset 0 0 10px rgba(255, 43, 179, 0.15), 0 0 6px rgba(255, 43, 179, 0.2);
}

.case-status.disposition-vacated,
.case-status.disposition-denied {
  color: var(--hazard-red);
  border-left-color: var(--hazard-red);
  background: rgba(255, 77, 77, 0.08);
  box-shadow: inset 0 0 10px rgba(255, 77, 77, 0.15), 0 0 6px rgba(255, 77, 77, 0.2);
}

.case-status.disposition-remanded,
.case-status.disposition-modified {
  color: var(--neon-amber);
  border-left-color: var(--neon-amber);
  background: rgba(255, 191, 0, 0.10);
  box-shadow: inset 0 0 10px rgba(255, 191, 0, 0.15), 0 0 6px rgba(255, 191, 0, 0.2);
}

.case-status.disposition-mixed {
  color: var(--neon-violet);
  border-left-color: var(--neon-violet);
  background: rgba(169, 94, 255, 0.10);
  box-shadow: inset 0 0 10px rgba(169, 94, 255, 0.15), 0 0 6px rgba(169, 94, 255, 0.2);
}

.case-status.disposition-dismissed,
.case-status.disposition-other {
  color: var(--text-dim);
  border-left-color: rgba(148, 140, 161, 0.6);
  background: rgba(148, 140, 161, 0.08);
  box-shadow: none;
}

.case-status.disposition-granted {
  color: var(--neon-lime);
  border-left-color: var(--neon-lime);
  background: rgba(95, 201, 68, 0.08);
  box-shadow: inset 0 0 10px rgba(95, 201, 68, 0.15), 0 0 6px rgba(95, 201, 68, 0.2);
}

/* ============================================================
   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: 999px;
  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: 999px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
}
.treatment-overruled { color: var(--neon-pink); }
.treatment-distinguished { color: var(--neon-amber); }
.treatment-criticized { color: var(--neon-violet); }
.treatment-followed { color: var(--neon-lime); }
.treatment-explained { color: var(--neon-cyan); }

.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: 999px;
  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(169, 94, 255, 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;
}

.review-pill--ai_only {
  color: #ffbf3d;
  border-color: rgba(255, 191, 61, 0.45);
  background: rgba(255, 191, 61, 0.08);
}

.review-pill--flagged {
  color: var(--hazard-red);
  border-color: rgba(255, 64, 84, 0.45);
  background: rgba(255, 64, 84, 0.08);
}

.review-pill--reviewed {
  color: var(--neon-cyan);
  border-color: rgba(38, 255, 230, 0.55);
  background: rgba(38, 255, 230, 0.1);
  box-shadow: 0 0 8px rgba(38, 255, 230, 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: #ffbf3d;
  box-shadow: 0 0 5px rgba(255, 191, 61, 0.45);
}

.review-dot--flagged {
  background: var(--hazard-red);
  box-shadow: 0 0 5px rgba(255, 64, 84, 0.55);
}

.review-dot--reviewed {
  background: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(38, 255, 230, 0.65);
}

/* ============================================================
   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);
}

/* 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: #ffbf3d; }
.landing-stats li:nth-child(4) { border-left-color: #b394ff; }

.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(80, 200, 255, 0.06);
  border: 1px solid rgba(80, 200, 255, 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(255, 60, 180, 0.06);
  border: 1px solid rgba(255, 60, 180, 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(255, 60, 180, 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: 999px;
  overflow: hidden;
}

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

.judge-bar-fill--affirmed { background: #00ffc8; }
.judge-bar-fill--reversed { background: var(--neon-pink); }
.judge-bar-fill--vacated, .judge-bar-fill--denied { background: var(--hazard-red); }
.judge-bar-fill--remanded, .judge-bar-fill--modified { background: #ffbf3d; }
.judge-bar-fill--mixed { background: #b394ff; }
.judge-bar-fill--dismissed, .judge-bar-fill--other { background: rgba(148, 140, 161, 0.6); }
.judge-bar-fill--granted { background: var(--neon-cyan); }

.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(0, 217, 255, 0.08);
  border: 1px solid rgba(0, 217, 255, 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: #4adf95;
}

.concordance-bar__seg--partial {
  background: #f6c350;
}

.concordance-bar__seg--disagree {
  background: #ff6b6b;
}

.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: 999px;
  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(74, 223, 149, 0.16);
  color: #5fe6a4;
  border: 1px solid rgba(74, 223, 149, 0.4);
}

.vote-chip--concurrence {
  background: rgba(246, 195, 80, 0.16);
  color: #f6c350;
  border: 1px solid rgba(246, 195, 80, 0.4);
}

.vote-chip--dissent {
  background: rgba(255, 107, 107, 0.16);
  color: #ff7e7e;
  border: 1px solid rgba(255, 107, 107, 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(255, 126, 211, 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(255, 126, 211, 0.06);
  outline: none;
}

.doc-snippet-link mark {
  background: rgba(255, 126, 211, 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(0, 217, 255, 0.08);
  outline: none;
}

/* When a paragraph is the URL-fragment target, briefly flash it so the
   user can spot where the deep-link landed. */
.opinion-body .op-para:target {
  background: rgba(0, 217, 255, 0.06);
  border-left: 2px solid var(--neon-cyan);
  padding-left: 0.75rem;
  margin-left: -0.75rem;
  border-radius: 0 3px 3px 0;
}

/* Marks inside the opinion body (from ?q= highlighting). */
.opinion-body mark {
  background: rgba(255, 126, 211, 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(255, 126, 211, 0.08);
  border: 1px solid rgba(255, 126, 211, 0.25);
  border-radius: 3px;
  font-size: 0.86rem;
  color: var(--text-bright);
}

.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: 999px;
  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: #ffbf3d;
  border-color: rgba(255, 191, 61, 0.45);
  background: rgba(255, 191, 61, 0.07);
}

.opinion-tag--posture {
  color: #b394ff;
  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;
}