/* ==========================================================================
   Lemon Law Atlas - design system
   "A statute book that learned typography."

   Rules this file executes (SPEC_LEMON_LAW_DIRECTORY.md §2, §7; and the
   portfolio viewport gate in SPEC_DESIGN_PROPAGATION.md):
     - Full-width structural bands. Text measure lives INSIDE them.
       A lone centered prose column is the named failure mode.
     - At 1440px: primary band >=1100px AND a multi-column region above
       the fold, on every template.
     - Lemon yellow is an ACCENT. Never a page background. Never text on a
       light ground. Ink navy carries the page.
     - Editorial serif for display, workhorse sans for body/UI, mono for
       data. All-geometric type is a spec violation.
     - The jurisdiction tab is the recurring compositional device: every
       state-scoped block wears one.
     - WCAG 2.2 AA: visible focus, keyboard-operable tables, 200% zoom,
       reduced motion, never color alone.
   ========================================================================== */

/* --- fonts ------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-full-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* --- tokens ------------------------------------------------------------ */

:root {
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Light: warm paper, deep navy ink, lemon accent. */
  --paper: #faf8f3;
  --paper-2: #f2eee3;
  --paper-3: #eae5d7;
  --ink: #16203b;
  --ink-2: #26375f;
  --muted: #59627a;
  --rule: #ddd7c7;
  --rule-2: #c7bfa9;
  /* Lemon, not amber. Hue sits at ~53deg (lemon peel), never down at ~42deg
     (gold/orange). Matt's call 2026-08-17: it is the lemon law, so it is the
     colour of a lemon. --lemon-deep is the only one dark enough to be text
     on a light ground, and it stays in the same hue family. */
  --lemon: #f5d90a;
  --lemon-deep: #6d5e00;
  --lemon-soft: #fdf5c2;
  --link: #14427a;
  --link-visited: #4a3a75;
  --good: #1f6a4d;
  --warn: #9a5b00;
  --bad: #97331f;

  /* Polarity-fixed tokens. The ink band is navy in BOTH themes; deriving its
     background and foreground from theme tokens whose polarity flips made
     the band unreadable in dark mode (Codex finding 1, 2026-08-17: lemon
     links on pale "ink" measured 1.0:1). These never flip. */
  --band-ink-bg: #16203b;
  --band-ink-text: #f2efe6;
  --band-ink-muted: #aeb9d2;
  --band-ink-link: #ffe81c;

  /* Control boundaries need 3:1 against the page (WCAG non-text contrast);
     --rule-2 measures ~1.7:1 and is for hairlines only. */
  --control-border: #6f684f;

  --shadow-hard: 3px 3px 0 var(--ink);
  --shadow-soft: 0 1px 2px rgba(22, 32, 59, 0.06), 0 8px 24px rgba(22, 32, 59, 0.07);

  --measure: 68ch;
  --band-max: 1280px;
  --band-wide: 1440px;
  --pad: clamp(1rem, 3.2vw, 2.5rem);
  --gap: clamp(1rem, 2vw, 1.75rem);

  --radius: 4px;
  /* Height the sticky site header occupies; rails and anchor targets offset by it. */
  --sticky-offset: 4.25rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #11141b;
    --paper-2: #171b25;
    --paper-3: #1e2430;
    --ink: #e9e5da;
    --ink-2: #cfd7e6;
    --muted: #9aa3b6;
    --rule: #272e3b;
    --rule-2: #3a4354;
    --lemon: #ffe81c;
    --lemon-deep: #ffe81c;
    --lemon-soft: #2b2712;
    --link: #93bdf0;
    --link-visited: #bda9e8;
    --good: #6ec39b;
    --warn: #e8b45c;
    --bad: #ef9a84;
    --control-border: #7b849c;
    --shadow-hard: 3px 3px 0 #000;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.34);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper: #11141b;
  --paper-2: #171b25;
  --paper-3: #1e2430;
  --ink: #e9e5da;
  --ink-2: #cfd7e6;
  --muted: #9aa3b6;
  --rule: #272e3b;
  --rule-2: #3a4354;
  --lemon: #ffe81c;
  --lemon-deep: #ffe81c;
  --lemon-soft: #2b2712;
  --link: #93bdf0;
  --link-visited: #bda9e8;
  --good: #6ec39b;
  --warn: #e8b45c;
  --bad: #ef9a84;
  --control-border: #7b849c;
  --shadow-hard: 3px 3px 0 #000;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.34);
  color-scheme: dark;
}

/* --- base -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: calc(var(--sticky-offset) + 0.75rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1200px) {
  body {
    font-size: 1.125rem;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  margin-top: 1.6em;
}
h3 {
  font-size: clamp(1.16rem, 1.5vw, 1.35rem);
  margin-top: 1.5em;
}
h4,
.label {
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
p.label {
  margin: 0 0 0.5em;
}

p,
ul,
ol {
  margin: 0 0 1.1em;
}
li + li {
  margin-top: 0.35em;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:visited {
  color: var(--link-visited);
}
a:hover {
  text-decoration-thickness: 2px;
}

/* Visible focus everywhere. Never remove without replacing.
   Two tone on purpose: a lemon ring alone only reaches ~1.3:1 against warm
   paper, which fails WCAG 2.2 non-text contrast. The ink ring carries the
   contrast (15:1 in both themes) and the lemon halo carries the brand. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--lemon);
  border-radius: 2px;
}
strong {
  font-weight: 700;
}
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lemon);
  color: #16203b;
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  z-index: 100;
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- band grammar ------------------------------------------------------
   Bands go edge to edge. .inner holds the 1280px column. Prose measure is
   applied to text blocks INSIDE a band, never to the band itself. This is
   what keeps the page off the "narrow strip down the middle" failure.
   ----------------------------------------------------------------------- */

.band {
  padding: clamp(2rem, 4.5vw, 3.75rem) var(--pad);
}
.band-tight {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.band-tint {
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}
.band-ink {
  background: var(--band-ink-bg);
  color: var(--band-ink-text);
  border-block: 1px solid var(--band-ink-bg);
}
.band-ink h1,
.band-ink h2,
.band-ink h3 {
  color: var(--band-ink-text);
}
.band-ink a {
  color: var(--band-ink-link);
}
.band-ink .muted,
.band-ink .lede {
  color: var(--band-ink-muted);
}

.inner {
  max-width: var(--band-max);
  margin-inline: auto;
}
.inner-wide {
  max-width: var(--band-wide);
  margin-inline: auto;
}

.prose {
  max-width: var(--measure);
}
.prose > :first-child {
  margin-top: 0;
}

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}

/* Inside a composed layout, running text keeps its measure while feature
   blocks (card grids, tables, statute quotes, callouts, the key answer)
   use the full column width. Wide layout, never wide type. */
.split > article > p,
.split > article > ul,
.split > article > ol,
.split > article > h2,
.split > article > h3 {
  max-width: var(--measure);
}

/* --- layout primitives ------------------------------------------------- */

/* Main + rail. The rail is the fact panel; it sticks on tall screens. */
.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
  .split-rail-left {
    grid-template-columns: 17.5rem minmax(0, 1fr);
  }
  .rail-sticky {
    position: sticky;
    top: var(--sticky-offset);
    /* A rail taller than the viewport must scroll itself, not trap content. */
    max-height: calc(100vh - var(--sticky-offset) - 1.5rem);
    overflow: auto;
  }
}
@media (max-height: 640px) {
  .rail-sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* The 4.25rem offset assumes a one-row header. Below the split breakpoint
   (and at 200% zoom, which lands here too) the nav can wrap, so the header
   stops being sticky and anchors need only a breathing-room offset. */
@media (max-width: 61.99rem) {
  /* header.site-header outranks the base .site-header rule that appears
     later in the file; class alone would lose the cascade there. */
  header.site-header {
    position: static;
  }
  :root {
    --sticky-offset: 1rem;
  }
}

.grid {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 40rem) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 62rem) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hero: headline left, entry card right. Multi-column above the fold. */
.hero {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* --- header ------------------------------------------------------------ */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.hdr-inner {
  max-width: var(--band-max);
  margin-inline: auto;
  padding: 0.6rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand:visited {
  color: var(--ink);
}
.brand-mark {
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
}
.brand-name {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand-name i {
  font-style: normal;
  color: var(--lemon-deep);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.site-nav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.site-nav a:hover {
  background: var(--paper-2);
}
.site-nav a[aria-current='page'] {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--lemon);
}
.theme-toggle {
  margin-left: 0.35rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--ink-2);
}
.tt-sun {
  display: none;
}
:root[data-theme='dark'] .tt-sun {
  display: block;
}
:root[data-theme='dark'] .tt-moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tt-sun {
    display: block;
  }
  :root:not([data-theme='light']) .tt-moon {
    display: none;
  }
}

/* --- the jurisdiction tab: the recurring compositional device ----------
   Every state-scoped block wears one. It is the site's signature: a
   statute-book edge tab. Yellow fill, ink text (AA), mono caps.
   ----------------------------------------------------------------------- */

.jtab {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #16203b;
  background: var(--lemon);
  padding: 0.46em 0.85em 0.42em;
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .jtab {
    white-space: normal;
    line-height: 1.35;
  }
}
.jtab-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule-2);
  border-bottom: 0;
  box-shadow: none;
}

/* A block that carries its tab on the top edge. */
.jbox {
  position: relative;
  border: 1px solid var(--rule-2);
  border-top: 3px solid var(--lemon);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  background: var(--paper);
  padding: clamp(1.1rem, 2vw, 1.6rem);
}
.jbox > .jtab {
  position: absolute;
  top: -1.72rem;
  left: -1px;
}
.jbox-tint {
  background: var(--paper-2);
}

/* --- cards ------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: clamp(1rem, 1.8vw, 1.4rem);
  box-shadow: var(--shadow-soft);
}
.card-flat {
  box-shadow: none;
}
.card-hard {
  box-shadow: var(--shadow-hard);
  border-color: var(--ink);
}
.card h3 {
  margin-top: 0;
}
.card > :last-child {
  margin-bottom: 0;
}

a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.card:visited {
  color: inherit;
}
a.card:hover {
  border-color: var(--ink-2);
  box-shadow: var(--shadow-hard);
}

/* --- data type: cites, stamps, pills ----------------------------------- */

.cite {
  font: 400 0.86em/1.4 var(--mono);
  color: var(--muted);
}
.cite a {
  color: var(--link);
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font: 400 0.78rem/1.3 var(--mono);
  color: var(--muted);
}
.stamp::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--good);
  flex: none;
}
.stamp-pending::before {
  background: var(--warn);
}

/* Research-verified stamp (src/html.ts verified(), Phase A 2026-08-24).
   Two lines, not one, because the disclaimer is part of the stamp and not
   an optional footnote: the claim ("verified against this source on this
   date") and its limit ("by researchers, not an attorney") are the same
   component and must never be separable, in the markup or on the page.
   align-items goes to flex-start so the status dot sits on the first line
   rather than centering itself against a two-line block. */
.stamp-verified {
  align-items: flex-start;
}
.stamp-body {
  display: block;
}
.stamp-line {
  display: block;
}
.stamp-note {
  display: block;
  font: 400 0.78rem/1.45 var(--sans);
  font-style: normal;
  color: var(--muted);
  margin-top: 0.3em;
  max-width: 52ch;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font: 600 0.76rem/1 var(--sans);
  letter-spacing: 0.02em;
  padding: 0.4em 0.65em;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill-yes {
  border-color: color-mix(in srgb, var(--good) 40%, transparent);
  color: var(--good);
}
.pill-no {
  border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  color: var(--bad);
}
.pill-partial {
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--warn);
}

/* Research-pending state. Spec §5.1: an unreviewed fact never renders as
   an answer. Marked by pattern AND text, never by color alone. */
.pending {
  color: var(--muted);
  font-style: italic;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    color-mix(in srgb, var(--muted) 14%, transparent) 5px,
    color-mix(in srgb, var(--muted) 14%, transparent) 6px
  );
  padding: 0.15em 0.4em;
  border-radius: 2px;
}

/* --- key answer: the liftable block an answer engine quotes ------------ */

.key-answer {
  border: 1px solid var(--rule-2);
  border-left: 5px solid var(--lemon);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  margin: 0 0 1.75rem;
}
.key-answer p {
  font-size: 1.08em;
}
.key-answer > :last-child {
  margin-bottom: 0;
}
.key-answer h2,
.key-answer h3 {
  margin-top: 0;
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- callouts ---------------------------------------------------------- */

.callout {
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-2);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  font-size: 0.97em;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout-warn {
  border-left-color: var(--warn);
}
.callout-warn .callout-label {
  color: var(--warn);
}
.callout-label {
  display: block;
  font: 700 0.78rem/1.3 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

/* --- statute quote ----------------------------------------------------- */

.law {
  margin: 1.75rem 0;
  border-left: 3px solid var(--rule-2);
  padding-left: 1.15rem;
}
.law blockquote {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 14;
  font-size: 1.06em;
  line-height: 1.55;
}
.law figcaption {
  font: 400 0.84rem/1.5 var(--mono);
  color: var(--muted);
}

/* --- tables: the 50-state matrix and friends --------------------------
   Every table lives in a scroll container. The page body never scrolls
   horizontally. First column sticks so a row stays identifiable.
   ----------------------------------------------------------------------- */

.tbl-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

table.matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 60rem;
  font-size: 0.93rem;
}
table.matrix caption {
  text-align: left;
  padding: 0.9rem 1rem;
  font: 600 0.85rem/1.4 var(--sans);
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
table.matrix th,
table.matrix td {
  padding: 0.68rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-3);
  font: 700 0.78rem/1.3 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 2px solid var(--rule-2);
  white-space: nowrap;
}
.tbl-vh {
  max-height: min(70vh, 42rem);
  overflow: auto;
}
table.matrix thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
}
table.matrix tbody th[scope='row'] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  font-weight: 600;
  white-space: nowrap;
}
table.matrix tbody tr:hover th[scope='row'],
table.matrix tbody tr:hover td {
  background: var(--paper-2);
}
table.matrix tbody tr:last-child th,
table.matrix tbody tr:last-child td {
  border-bottom: 0;
}
table.matrix .num {
  font-family: var(--mono);
  font-size: 0.92em;
  white-space: nowrap;
}
.tbl-hint {
  font: 400 0.8rem/1.4 var(--sans);
  color: var(--muted);
  margin: 0.6rem 0 0;
}

/* --- decisions explorer ------------------------------------------------ */

.dec {
  display: grid;
  gap: 0.35rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 45rem) {
  .dec {
    grid-template-columns: 8.5rem minmax(0, 1fr) 10rem;
    align-items: baseline;
  }
}
.dec-id {
  font: 400 0.82rem/1.5 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.dec-veh {
  font-weight: 600;
}
.dec-out {
  justify-self: start;
}
.dec-out .pill {
  white-space: normal;
}
@media (min-width: 45rem) {
  .dec-out {
    justify-self: end;
  }
}

/* --- attorney roster --------------------------------------------------- */

.firm {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.firm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.firm h3 {
  margin: 0;
  font-size: 1.18rem;
}
.firm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.firm dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  font-size: 0.92rem;
}
.firm dt {
  color: var(--muted);
  font-weight: 600;
}
.firm dd {
  margin: 0;
}

/* Sponsored placement. Spec §6: separated, labeled, never presented as a
   match or a recommendation, and never signalled by color alone. */
.sponsored {
  border: 2px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: clamp(1rem, 1.8vw, 1.4rem);
  position: relative;
}
.ad-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font: 700 0.72rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--ink-2);
  border-radius: 2px;
  padding: 0.35em 0.55em;
  margin-bottom: 0.85rem;
}
.ad-note {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0.85rem 0 0;
}

/* --- filters ----------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
}
.field {
  display: grid;
  gap: 0.3rem;
}
.field label {
  font: 700 0.76rem/1.3 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.field select,
.field input {
  font: 400 0.95rem/1.2 var(--sans);
  padding: 0.55rem 0.7rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  min-height: 2.75rem;
}

/* Filters on this static site are LINKS to prebuilt views, never inert
   controls (Codex finding 4). a.pill is the interactive form and a true
   control (Codex r2): house 40px minimum and a compliant boundary. The
   compact treatment belongs to noninteractive status spans only. */
a.pill {
  text-decoration: none;
  min-height: 2.5rem;
  padding: 0.5em 0.9em;
  align-items: center;
  border-color: var(--control-border);
  background: var(--paper);
}
a.pill:hover {
  border-color: var(--ink-2);
  box-shadow: var(--shadow-hard);
}
a.pill[aria-current='true'] {
  border-color: var(--ink);
  background: var(--lemon-soft);
  color: var(--ink);
}

/* --- state grid -------------------------------------------------------- */

.states {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}
.state {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
}
.state:visited {
  color: var(--ink);
}
a.state:hover {
  border-color: var(--ink-2);
  box-shadow: var(--shadow-hard);
}
.state-live {
  border-left: 4px solid var(--lemon);
  font-weight: 600;
}
.state-soon {
  border-style: dashed;
  color: var(--muted);
}
.state small {
  font: 400 0.72rem/1.3 var(--mono);
  color: var(--muted);
}

/* --- footer ------------------------------------------------------------ */

.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding: clamp(2rem, 4vw, 3rem) var(--pad);
  font-size: 0.93rem;
}
.foot-grid {
  max-width: var(--band-max);
  margin-inline: auto;
  display: grid;
  gap: var(--gap);
}
@media (min-width: 45rem) {
  .foot-grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}
.site-footer .label {
  margin: 0 0 0.6rem;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li + li {
  margin-top: 0.3rem;
}
.disclaimer {
  max-width: var(--band-max);
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-2);
  color: var(--muted);
  font-size: 0.88rem;
}

/* --- utility ----------------------------------------------------------- */

.muted {
  color: var(--muted);
}
.mono {
  font-family: var(--mono);
}
.stack > * + * {
  margin-top: var(--gap);
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.85rem;
  padding: 0.7rem 1.25rem;
  font: 700 0.98rem/1 var(--sans);
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
}
.btn:visited {
  color: var(--paper);
}
.btn:hover {
  box-shadow: var(--shadow-hard);
  transform: translate(-1px, -1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}
.btn-ghost:visited {
  color: var(--ink);
}

/* --- inverse-surface cascade lock ---------------------------------------
   Placed AFTER every component so equal-specificity component rules can
   never resurrect page-polarity colors inside the navy band (Codex r2
   blocker 1: .cite a came later in the file and won, 1.6:1 on navy).
   Every sanctioned component that sets a color gets an explicit band form.
   ----------------------------------------------------------------------- */

.band-ink :is(.label, .cite, .stamp, .stamp-note, .muted, .lede, .tbl-hint, .ad-note) {
  color: var(--band-ink-muted);
}
.band-ink a:not(.btn):not(.pill):not(.state):not(.card),
.band-ink .cite a {
  color: var(--band-ink-link);
}
.band-ink .callout,
.band-ink .card-flat {
  border-color: var(--band-ink-muted);
  background: transparent;
}

/* --- forced colors (Windows High Contrast) ------------------------------
   Background colors vanish here, so every device that signals by fill gets
   an explicit border, and meaning that was pattern-borne gets a line. The
   words were already doing the semantic work ("Research pending",
   "Advertisement"), which is why color-alone was never the contract.
   ----------------------------------------------------------------------- */

@media (forced-colors: active) {
  .jtab,
  .pill,
  .ad-label {
    border: 1px solid CanvasText;
  }
  .pending {
    border: 1px dashed CanvasText;
    background-image: none;
  }
  .sponsored {
    border: 2px solid CanvasText;
  }
  .jbox {
    border-top-width: 3px;
  }
  .state-live {
    border-left: 4px solid CanvasText;
  }
  .key-answer,
  .callout {
    border-left-width: 5px;
  }
  :focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
  .stamp::before {
    border: 1px solid CanvasText;
  }
  .stamp-note {
    border-left: 2px solid CanvasText;
    padding-left: 0.5em;
  }
}

/* --- print --------------------------------------------------------------
   A legal reference gets saved and printed; that is a feature, not an
   accident. Chrome goes away, sources become visible, tables repeat their
   headers, and nothing sticks.
   ----------------------------------------------------------------------- */

@media print {
  :root {
    --paper: #fff;
    --paper-2: #fff;
    --paper-3: #f2f2f2;
    --ink: #000;
    --ink-2: #000;
    --muted: #333;
    --rule: #999;
    --rule-2: #777;
  }
  .site-header,
  .theme-toggle,
  .skip,
  .btn {
    display: none !important;
  }
  .site-header,
  .rail-sticky,
  table.matrix thead th,
  table.matrix tbody th[scope='row'],
  table.matrix thead th:first-child {
    position: static !important;
  }
  .band-ink {
    background: none;
    color: #000;
    border-block: 1px solid #000;
  }
  .band-ink h1,
  .band-ink h2,
  .band-ink h3,
  .band-ink .muted,
  .band-ink .lede {
    color: #000;
  }
  .band-ink a {
    color: #000;
  }
  .card,
  .jbox,
  .key-answer,
  .callout,
  .law,
  .dec {
    box-shadow: none;
    break-inside: avoid;
  }
  .tbl-scroll,
  .tbl-vh {
    overflow: visible;
    max-height: none;
    border: 0;
  }
  table.matrix {
    min-width: 0;
    font-size: 8.5pt;
  }
  table.matrix th,
  table.matrix td,
  table.matrix .num {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  thead {
    display: table-header-group;
  }
  main a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.82em;
    color: #333;
    word-break: break-all;
  }
}