:root {
  /* Shared primitives used by all palettes */
  --white: #ffffff;
  --white-rgb: 255 255 255;
  --transparent: transparent;

  /* Glass/overlay whites */
  --glass-96: rgb(var(--white-rgb) / 0.96);
  --glass-50: rgb(var(--white-rgb) / 0.5);
  --glass-30: rgb(var(--white-rgb) / 0.3);
  --glass-20: rgb(var(--white-rgb) / 0.2);
  --glass-10: rgb(var(--white-rgb) / 0.1);

  /* Status colors */
  --badge-text: hsl(116.31deg 93% 27% / 12%);

  /* Layout tokens */
  --radius-lg: 6px;
  --radius-md: 4px;
  --radius-sm: 3px;
  --max-width: 1080px;

  /* Derived tokens (depend on per-theme --shadow-rgb) */
  --shadow: 0 2px 8px rgb(var(--shadow-rgb) / 0.10);
}

/* =============================
   Theme palettes (edit to try)
   Uncomment ONE block below.
   ============================= */

/* --- Default (current) --- */
:root {
  --bg: hsl(216 20% 96%);
  --bg-rgb: 240 243 248;
  --surface: var(--white);
  --surface-muted: hsl(216 18% 95%);
  --text: hsl(216 50% 10%);
  --text-soft: hsl(216, 63%, 30%);
  --text-faint: hsl(216 14% 50%);
  --border: hsl(216 18% 82%);
  --border-rgb: 196 205 218;
  --border-hover: hsl(216 24% 68%);
  --border-dashed: hsl(216 16% 76%);
  --primary: hsl(242.03deg 13.67% 43.09% / 91%);
  --primary-light: hsla(240, 6%, 68%, 0.91);
  --primary-rgb: 0 40 82;
  --accent: hsl(242.03deg 13.67% 43.09% / 91%);
  --accent-soft: hsl(216 50% 94%);
  --accent-rgb: 0 40 82;
  --patriot-red: hsl(351.14deg 78.54% 55.97% / 91%);
  --eyebrow-bg: hsl(351.14deg 78.54% 55.97% / 91%);
  --primary: hsla(215, 15%, 29%, 0.91);
  --primary-light: hsla(215, 15%, 60%, 0.91);
  --primary-rgb: 21 35 62;
  --patriot-red-rgb: 191 10 48;
  --red-soft: hsl(349 60% 95%);
  --shadow-rgb: 10 24 50;
  --error: hsl(2 65% 38%);
  --error-rgb: 160 34 34;
}

/* --- Ocean (alt) --- */
/* :root {
  --bg: hsl(216 20% 96%);
  --bg-rgb: 240 243 248;
  --surface: var(--white);
  --surface-muted: hsl(200 35% 95%);
  --text: hsl(214 35% 12%);
  --text-soft: hsl(206 30% 30%);
  --text-faint: hsl(216 14% 50%);
  --border: hsl(200 20% 84%);
  --border-rgb: 176 198 215;
  --border-hover: hsl(202 25% 68%);
  --border-dashed: hsl(201 22% 76%);

  --primary: hsl(198 50% 34% / 0.92);
  --primary-light: hsla(198, 45%, 60%, 0.91);
  --primary-rgb: 43 104 130;
  --accent: hsl(198 50% 34% / 0.92);
  --accent-soft: hsl(190 50% 94%);
  --accent-rgb: 43 104 130;

  --patriot-red: hsl(8 78% 46% / 0.91);
  --patriot-red-rgb: 209 50 26;
  --red-soft: hsl(8 85% 94%);

  --shadow-rgb: 20 62 82;
  --error: hsl(2 65% 38%);
  --error-rgb: 160 34 34;
} */

/* --- Sunset (alt) --- */
/* :root {
  --bg: hsl(216 20% 96%);
  --bg-rgb: 240 243 248;
  --surface: var(--white);
  --surface-muted: hsl(265 25% 95%);
  --text: hsl(230 30% 12%);
  --text-soft: hsl(250 25% 30%);
  --text-faint: hsl(216 14% 50%);
  --border: hsl(252 20% 84%);
  --border-rgb: 196 186 220;
  --border-hover: hsl(258 26% 68%);
  --border-dashed: hsl(255 20% 76%);

  --primary: hsl(265 28% 36% / 91%);
  --primary-light: hsla(265, 30%, 62%, 0.91);
  --primary-rgb: 88 66 118;
  --accent: hsl(265 28% 36% / 91%);
  --accent-soft: hsl(260 45% 94%);
  --accent-rgb: 88 66 118;

  --patriot-red: hsl(355 70% 45% / 0.91);
  --patriot-red-rgb: 195 34 48;
  --red-soft: hsl(355 80% 95%);

  --shadow-rgb: 60 35 80;
  --error: hsl(2 65% 38%);
  --error-rgb: 160 34 34;
} */

    * {
      box-sizing: border-box;
    }

    html {
      color-scheme: light;
    }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select {
      font: inherit;
    }

    .page {
      width: min(calc(100% - 2rem), var(--max-width));
      margin: 0 auto;
      padding: 0 0 3rem;
    }

    /* ─── Top banner bar ─── */
    .hero {
      position: relative;
      padding: 2rem 2rem 1.75rem;
      padding-top: calc(2rem + 5px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-top: 1rem;
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(
        90deg,
        var(--patriot-red) 0%,
        var(--patriot-red) 33.3%,
        var(--white) 33.3%,
        var(--white) 66.6%,
        var(--primary) 66.6%,
        var(--primary) 100%
      );
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.3rem 0.7rem;
      border-radius: var(--radius-sm);
      background: var(--eyebrow-bg);
  color: var(--white);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 1rem;
      border: none;
      box-shadow: none;
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(1.75rem, 3vw, 2.75rem);
      line-height: 1.1;
      letter-spacing: -0.02em;
      font-weight: 900;
      color: var(--primary);
      max-width: 16ch;
    }

    .hero p {
      margin: 0.75rem 0 0;
      max-width: 120ch;
      color: var(--text-soft);
      font-size: 0.95rem;
      line-height: 1.65;
    }

    /* ─── Controls bar ─── */
    .controls {
      position: sticky;
      top: 0;
      z-index: 5;
      margin-top: 0.75rem;
  background: var(--glass-96);
      backdrop-filter: blur(8px);
      border: 1px solid var(--border);
      border-top: 3px solid var(--primary);
      border-radius: var(--radius-lg);
      padding: 1rem;
      box-shadow: var(--shadow);
    }

    .controls-grid {
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(150px, 1fr)) auto;
      gap: 0.75rem;
      align-items: end;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .field label,
    .toggle-label {
      font-size: 0.72rem;
      color: var(--text-soft);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .input,
    .select,
    .button {
      width: 100%;
      min-height: 42px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      padding: 0.65rem 0.85rem;
      font-size: 0.9rem;
      transition: border-color 120ms ease, box-shadow 120ms ease;
    }

    .input:focus,
    .select:focus,
    .button:focus,
    .toggle:focus-visible {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.15);
    }

    .toggle-group {
      display: flex;
      gap: 0;
    }

    .toggle {
      min-height: 42px;
      padding: 0.65rem 0.85rem;
      border-radius: 0;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-soft);
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      flex: 1;
      transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
    }

    .toggle:first-child {
      border-radius: var(--radius-md) 0 0 var(--radius-md);
    }

    .toggle:last-child {
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      border-left: 0;
    }

    .toggle[aria-pressed="true"] {
      background: var(--primary);
      border-color: var(--primary);
  color: var(--white);
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      cursor: pointer;
      font-weight: 700;
      font-size: 0.85rem;
      background: var(--surface-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .button:hover {
      border-color: var(--patriot-red);
      color: var(--patriot-red);
    }

    .toggle:not([aria-pressed="true"]):hover {
      border-color: var(--border-hover);
      background: var(--surface-muted);
    }

    .result-item:hover,
    .group-card li:hover {
      border-color: var(--border-hover);
    }

    /* ─── Summary & chips ─── */
    .summary-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.75rem;
      align-items: center;
      margin-top: 1.25rem;
      margin-bottom: 0.75rem;
    }

    .summary-text {
      color: var(--text-soft);
      font-size: 0.88rem;
    }

    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.3rem 0.6rem;
      border-radius: var(--radius-sm);
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-soft);
      font-size: 0.76rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* ─── List results ─── */
    .results {
      display: grid;
      gap: 0.5rem;
    }

    .result-item {
      border: 1px solid var(--border);
      border-left: 3px solid var(--patriot-red);
      border-radius: var(--radius-md);
      background: var(--surface);
      transition: border-color 120ms ease, box-shadow 120ms ease;
      padding: 0;
    }

    .result-item:hover {
      box-shadow: 0 2px 8px rgb(var(--primary-rgb) / 0.08);
    }

    .result-date {
      font-weight: 800;
      color: var(--primary);
      font-size: 0.88rem;
    }

    .result-year {
      display: block;
      margin-top: 0.1rem;
      font-size: 0.7rem;
      color: var(--text-faint);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .result-title {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: -0.01em;
    }

    .group-link .result-title {
      font-size: 0.92rem;
      font-weight: 700;
      margin: 0 0 0.2rem;
    }

    .group-link .result-meta {
      margin-top: 0;
    }

    .result-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 0.5rem;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-sm);
  color: var(--badge-text);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border: none;
    }

    /* ─── Grouped results ─── */
    .grouped-results {
      display: grid;
      gap: 0.75rem;
    }

    .group-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 1rem;
    }

    .group-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 0.75rem;
      padding-bottom: 0.6rem;
      border-bottom: 2px solid var(--patriot-red);
    }

    .group-title {
      margin: 0;
      font-size: 0.88rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--primary);
    }

    .group-count {
      color: var(--text-faint);
      font-size: 0.76rem;
      font-weight: 700;
    }

    .group-card ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.5rem;
    }

    .group-card li {
      border: 1px solid var(--border);
      border-left: 3px solid var(--primary);
      border-radius: var(--radius-md);
      background: var(--surface);
      transition: border-color 120ms ease, box-shadow 120ms ease;
    }

    .group-card li:hover {
      box-shadow: 0 2px 8px rgb(var(--primary-rgb) / 0.08);
    }

    .group-link {
      display: grid;
      grid-template-columns: minmax(88px, 110px) minmax(0, 1fr);
      gap: 0.75rem;
      align-items: start;
      padding: 0.75rem 0.85rem;
    }

    .group-link:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: var(--radius-md);
    }

    .group-link strong {
      display: block;
      line-height: 1.4;
      margin-bottom: 0.2rem;
    }

    .group-link span {
      color: var(--text-faint);
      font-size: 0.78rem;
      word-break: break-word;
    }

    /* ─── Empty / status states ─── */
    .empty-state,
    .status-card {
      padding: 2rem;
      background: var(--surface);
      border: 1px dashed var(--border-dashed);
      border-left: 4px solid var(--primary);
      border-radius: var(--radius-md);
      text-align: center;
      color: var(--text-soft);
    }

    .empty-state h2,
    .status-card h2 {
      margin-top: 0;
      margin-bottom: 0.5rem;
      color: var(--primary);
      font-size: 1.05rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .footer-note {
      margin-top: 1rem;
      color: var(--text-faint);
      font-size: 0.78rem;
      text-align: center;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 980px) {
      .controls-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px) {
      .page {
        width: min(calc(100% - 1rem), var(--max-width));
        padding-top: 0.5rem;
      }

      .hero {
        padding: 1.25rem;
        padding-top: calc(1.25rem + 5px);
      }

      .controls-grid {
        grid-template-columns: 1fr;
      }

      .summary-bar,
      .group-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .group-link {
        grid-template-columns: 1fr;
      }
    }

/* ─── Document viewer (viewer.html) ─── */
.viewer-page {
  padding-bottom: 3rem;
}

.viewer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 1rem;
}

.viewer-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--primary);
  color: var(--white);
}

.viewer-title {
  margin: 0;
  font-size: clamp(0.88rem, 2.5vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

.viewer-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-30);
  background: var(--glass-10);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 120ms ease;
}

.viewer-header .back-link::before {
  content: "\2190";
}

.viewer-header .back-link:hover,
.viewer-header .back-link:focus-visible {
  outline: none;
  background: var(--glass-20);
  border-color: var(--glass-50);
}

.viewer-card .loading {
  text-align: center;
  padding: 2.5rem;
  color: var(--text-faint);
  font-size: 0.9rem;
}

.viewer-card .error {
  color: var(--error);
  padding: 1.1rem 1.25rem;
  margin: 1rem 1.5rem 1.5rem;
  background: rgb(var(--error-rgb) / 0.08);
  border: 1px solid rgb(var(--error-rgb) / 0.25);
  border-left: 4px solid var(--error);
  border-radius: var(--radius-md);
}

.viewer-card #content {
  line-height: 1.75;
  padding: 1.5rem 1.5rem 2rem;
  font-size: 0.95rem;
}

.viewer-card #content h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary);
  border-bottom: 2px solid var(--patriot-red);
  padding-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.viewer-card #content h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.viewer-card #content h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
}

.viewer-card #content h4,
.viewer-card #content h5,
.viewer-card #content h6 {
  margin-top: 1rem;
  margin-bottom: 0.45rem;
}

.viewer-card #content p {
  margin-bottom: 1rem;
}

.viewer-card #content ul,
.viewer-card #content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.viewer-card #content li {
  margin-bottom: 0.45rem;
}

.viewer-card #content blockquote {
  border-left: 3px solid var(--patriot-red);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  color: var(--text-soft);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
}

.viewer-card #content blockquote p:last-child {
  margin-bottom: 0;
}

.viewer-card #content a {
  color: var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.viewer-card #content a:hover {
  color: var(--patriot-red);
}

.viewer-card #content code {
  background: var(--surface-muted);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: 0.86em;
  border: 1px solid var(--border);
}

.viewer-card #content pre {
  background: var(--surface-muted);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}

.viewer-card #content pre code {
  background: var(--transparent);
  padding: 0;
  border: 0;
}

.viewer-card #content strong {
  color: var(--text);
  font-weight: 700;
}

.viewer-card #content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  overflow: hidden;
}

.viewer-card #content th,
.viewer-card #content td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.75rem;
  text-align: left;
}

.viewer-card #content th {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  .viewer-card #content {
    padding: 1.15rem 1rem 1.5rem;
  }

  .viewer-header {
    flex-direction: column;
    align-items: flex-start;
  }
}