/* =========================================================================
   1. TOKENS
   The :root block below is reproduced verbatim from STYLE-GUIDE section 2.
   No hex value appears anywhere else in this stylesheet.
   ========================================================================= */

:root {
  /* Brand */
  --crimson-900: #5C1414;  /* deep seal red: footer, dark surfaces */
  --crimson-700: #7E1B1B;  /* primary brand: headers, rules, seals */
  --crimson-050: #F9EDED;  /* faint wash for brand-tinted surfaces */

  /* Neutrals */
  --ink-900: #1C1B1A;      /* body text */
  --ink-600: #4A4744;      /* secondary text, captions */
  --ink-300: #B9B4AE;      /* hairlines, disabled */
  --paper: #FAF9F7;        /* page background */
  --paper-raised: #FFFFFF; /* cards, panels */

  /* Interactive (navy, so links never read as brand or status) */
  --federal-blue-700: #1F3A5F;  /* links, buttons */
  --federal-blue-800: #162944;  /* hover, active */

  /* Status: functional colors, never used decoratively */
  --status-verified: #2E6B34;   /* verified, holding */
  --status-partial: #8A6D1A;    /* partial, mixed outcome */
  --status-failed: #A32222;     /* failed, reversed (distinct from brand) */
  --status-disputed: #7A4A9E;   /* disputed: deliberately neither red nor green */
  --status-neutral: #5A6570;    /* pending display in admin, n/a, blocked-in-court */

  /* Type */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* Scale (1.25 ratio, rem-based) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;      /* 16px body, line-height 1.6 */
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;

  /* Structure */
  --measure: 68ch;         /* max line length for prose */
  --radius: 3px;           /* barely rounded: documents, not apps */
  --rule: 1px solid var(--ink-300);
  --rule-heavy: 3px solid var(--crimson-700);
}

/* Category color bands, from STYLE-GUIDE section 6. Wayfinding only, never
   meaning. Declared here so no hex value appears outside a :root block.
   The `promises` category postdates STYLE-GUIDE v1.0 and takes the same
   neutral fallback as `other` pending a band assignment. */
:root {
  --band-statements: #6B5B4A;
  --band-executive-orders: #4A5B6B;
  --band-personnel: #5B6B4A;
  --band-litigation: #6B4A5B;
  --band-legislation: #4A6B66;
  --band-finance: #7A6A3A;
  --band-foreign-policy: #3F5A7A;
  --band-epstein-records: #55505E;
  --band-promises: var(--ink-300);
  --band-other: var(--ink-300);
}

/* =========================================================================
   2. RESET AND BASE
   ========================================================================= */

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

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

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-lg);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-2);
}

ul,
ol {
  padding-left: var(--space-3);
}

li {
  margin-bottom: var(--space-1);
}

a {
  color: var(--federal-blue-700);
  text-underline-offset: 0.15em;
}

a:hover,
a:active {
  color: var(--federal-blue-800);
}

a:focus-visible {
  outline: 2px solid var(--federal-blue-700);
  outline-offset: 2px;
}

blockquote {
  margin: 0 0 var(--space-2);
}

hr {
  border: 0;
  border-top: var(--rule);
  margin: var(--space-4) 0;
}

/* =========================================================================
   3. TYPOGRAPHY
   Display serif for titles, body sans for prose, mono for record metadata.
   ========================================================================= */

.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--space-4);
}

.prose h3 {
  margin-top: var(--space-3);
}

.page-title {
  margin-bottom: var(--space-1);
}

.page-lede {
  color: var(--ink-600);
  font-size: var(--text-lg);
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

.section-title {
  border-bottom: var(--rule-heavy);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-3);
}

/* The ledger voice: IDs, dates, dockets, citations, checkpoint labels. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.mono-xs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Case names, per legal citation convention. Italics are not used for
   emphasis anywhere in the record. */
.case-name {
  font-style: italic;
}

/* Verbatim source quotations, with the source line in mono beneath. */
.quote {
  border-left: var(--rule-heavy);
  padding-left: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.quote__attribution {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--ink-600);
  display: block;
  margin-top: var(--space-1);
}

/* =========================================================================
   4. LAYOUT
   ========================================================================= */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.shell {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

@media (min-width: 40em) {
  .shell {
    padding: 0 var(--space-4);
  }
}

.masthead {
  background-color: var(--crimson-700);
  border-bottom: var(--rule-heavy);
  color: var(--paper);
  padding: var(--space-3) 0;
}

.masthead__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.masthead__link {
  color: var(--paper);
  text-decoration: none;
}

.masthead__link:hover,
.masthead__link:active {
  color: var(--paper);
  text-decoration: underline;
}

.masthead__link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.masthead__statement {
  color: var(--crimson-050);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
  max-width: var(--measure);
}

.nav {
  background-color: var(--crimson-900);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
}

.nav__item {
  margin: 0;
}

.nav__link {
  color: var(--paper);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav__link:hover,
.nav__link:active {
  color: var(--paper);
  text-decoration: underline;
}

.nav__link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.main {
  flex: 1 0 auto;
  padding: var(--space-6) 0 var(--space-8);
}

.footer {
  background-color: var(--crimson-900);
  color: var(--crimson-050);
  font-size: var(--text-sm);
  padding: var(--space-4) 0;
}

.footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}

.footer__item {
  margin: 0;
}

.footer__link {
  color: var(--paper);
}

.footer__link:hover,
.footer__link:active {
  color: var(--paper);
}

.footer__link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.footer__note {
  margin: 0;
  max-width: var(--measure);
}

/* Card and listing grid. Single column until there is room for two. */
.grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 52em) {
  .grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid__item {
  margin: 0;
}

/* =========================================================================
   5. COMPONENTS
   Phase 1 implements the entry card, the status chip, and the revision
   note. Panels, scorecards, pagination, filters, and search arrive with
   the phases that introduce them.
   ========================================================================= */

/* --- 5.1 Entry card --------------------------------------------------- */

.entry-card {
  background-color: var(--paper-raised);
  border: var(--rule);
  border-left: 3px solid var(--band-other);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: var(--space-2);
}

.entry-card--statements {
  border-left-color: var(--band-statements);
}

.entry-card--executive_orders {
  border-left-color: var(--band-executive-orders);
}

.entry-card--personnel {
  border-left-color: var(--band-personnel);
}

.entry-card--litigation {
  border-left-color: var(--band-litigation);
}

.entry-card--legislation {
  border-left-color: var(--band-legislation);
}

.entry-card--finance {
  border-left-color: var(--band-finance);
}

.entry-card--foreign_policy {
  border-left-color: var(--band-foreign-policy);
}

.entry-card--epstein_records {
  border-left-color: var(--band-epstein-records);
}

.entry-card--promises {
  border-left-color: var(--band-promises);
}

.entry-card--other {
  border-left-color: var(--band-other);
}

.entry-card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.entry-card__link {
  color: var(--ink-900);
  text-decoration: none;
}

.entry-card__link:hover,
.entry-card__link:active {
  color: var(--ink-900);
  text-decoration: underline;
}

.entry-card__link:focus-visible {
  outline: 2px solid var(--federal-blue-700);
  outline-offset: 2px;
}

.entry-card__summary {
  margin-bottom: var(--space-2);
  max-width: var(--measure);
}

.entry-card__footer {
  align-items: center;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding-top: var(--space-1);
}

.entry-card__id,
.entry-card__date,
.entry-card__sources {
  color: var(--ink-600);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.entry-card__banner {
  margin-bottom: var(--space-1);
}

/* --- 5.2 Status chip -------------------------------------------------- */
/* Always a text label plus color. Never color alone. */

.status-chip {
  border-radius: var(--radius);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 0.15em 0.5em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-chip--verified {
  background-color: color-mix(in srgb, var(--status-verified) 10%, var(--paper-raised));
  color: var(--status-verified);
}

.status-chip--partial {
  background-color: color-mix(in srgb, var(--status-partial) 10%, var(--paper-raised));
  color: var(--status-partial);
}

.status-chip--failed {
  background-color: color-mix(in srgb, var(--status-failed) 10%, var(--paper-raised));
  color: var(--status-failed);
}

.status-chip--disputed {
  background-color: color-mix(in srgb, var(--status-disputed) 10%, var(--paper-raised));
  color: var(--status-disputed);
}

.status-chip--neutral {
  background-color: color-mix(in srgb, var(--status-neutral) 10%, var(--paper-raised));
  color: var(--status-neutral);
}

/* The pending banner is the one high-emphasis chip. It exists so that a
   preview build cannot be mistaken for a production build. */
.status-chip--pending {
  background-color: var(--status-neutral);
  color: var(--paper);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.25em 0.75em;
}

/* --- 5.3 Revision note ------------------------------------------------ */
/* Corrections are visible or they are not corrections. */

.revision-note {
  background-color: var(--crimson-050);
  border: var(--rule);
  border-left: var(--rule-heavy);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

.revision-note__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.revision-note__text {
  margin: 0;
}

/* --- 5.4 Empty state -------------------------------------------------- */
/* What a listing shows when the verified collection is empty. */

.empty-state {
  border: var(--rule);
  border-radius: var(--radius);
  color: var(--ink-600);
  padding: var(--space-4) var(--space-2);
  text-align: center;
}

.empty-state__text {
  margin: 0 auto;
  max-width: var(--measure);
}

/* --- 5.5 Preview notice ----------------------------------------------- */
/* Only ever rendered when PREVIEW_PENDING is set. */

.preview-notice {
  background-color: var(--status-neutral);
  color: var(--paper);
  padding: var(--space-1) 0;
}

.preview-notice__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

/* --- 5.6 Entry detail ------------------------------------------------- */
/* The permalink page for one entry. SITE-SPEC 10 gives every entry a stable
   URL; this is where the whole record on that entry renders, sources
   included. Prose blocks hold to the measure; metadata takes the mono
   ledger voice. */

.entry-detail__back {
  font-family: var(--font-mono);
}

.entry-detail__title {
  margin-top: var(--space-1);
  max-width: var(--measure);
}

.entry-detail__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.entry-detail__id,
.entry-detail__date {
  color: var(--ink-600);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.entry-detail__summary {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.entry-detail__footer {
  border-top: var(--rule);
  margin-top: var(--space-6);
  padding-top: var(--space-2);
}

.entry-block {
  margin-top: var(--space-6);
}

.entry-block__text {
  margin: 0;
  max-width: var(--measure);
}

.entry-block__note {
  margin-bottom: var(--space-2);
  max-width: var(--measure);
}

.entry-media__image {
  border: var(--rule);
  border-radius: var(--radius);
}

/* --- 5.7 Source list --------------------------------------------------- */
/* SITE-SPEC 6: the document identifier is the citation, and the URL is a
   resolution mechanism. The identifier therefore renders above the links
   and in the ledger voice, and a missing archive snapshot is stated rather
   than hidden. */

.source-list {
  counter-reset: source;
  list-style: none;
  margin: 0;
  max-width: var(--measure);
  padding: 0;
}

.source {
  border-bottom: var(--rule);
  counter-increment: source;
  margin: 0;
  padding: var(--space-2) 0;
  position: relative;
}

.source__title {
  font-weight: 600;
  margin: 0;
}

.source__title::before {
  color: var(--ink-600);
  content: counter(source) ". ";
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.source__identifier {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

.source__meta {
  color: var(--ink-600);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  text-transform: uppercase;
}

.source__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
}

.source__link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.source__missing {
  color: var(--status-neutral);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* =========================================================================
   6. PAGE-SPECIFIC OVERRIDES
   Kept minimal by design. Prefer a component variant over a page rule.
   ========================================================================= */

.series-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.series-list__item {
  border-bottom: var(--rule);
  margin: 0;
  padding: var(--space-2) 0;
}

.series-list__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.series-list__rule {
  color: var(--ink-600);
  margin: 0;
  max-width: var(--measure);
}

/* =========================================================================
   7. UTILITIES
   ========================================================================= */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.measure {
  max-width: var(--measure);
}

.stack-top {
  margin-top: var(--space-4);
}

.muted {
  color: var(--ink-600);
}

/* =========================================================================
   8. MEDIA QUERIES
   Colocated with their components above, not pooled here. This banner
   marks the convention so it survives future edits.
   ========================================================================= */

/* =========================================================================
   9. PRINT
   This site should print cleanly. It is a record.
   ========================================================================= */

@media print {
  body {
    background-color: transparent;
    color: var(--ink-900);
    font-size: 11pt;
  }

  .nav,
  .preview-notice {
    display: none;
  }

  .masthead {
    background-color: transparent;
    border-bottom: var(--rule-heavy);
    color: var(--ink-900);
  }

  .masthead__link,
  .masthead__statement {
    color: var(--ink-900);
  }

  .footer {
    background-color: transparent;
    border-top: var(--rule);
    color: var(--ink-900);
  }

  .footer__link {
    color: var(--ink-900);
  }

  .entry-card {
    border: var(--rule);
    box-shadow: none;
    break-inside: avoid;
  }

  .status-chip {
    border: var(--rule);
  }

  .source {
    break-inside: avoid;
  }

  /* A printed citation has to resolve without a browser, so the URL prints
     with the link text. SITE-SPEC 6: the identifier is the citation and the
     URL is how it resolves; both belong on paper. */
  .source__link::after {
    content: " " attr(href);
    font-size: 9pt;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .source__links {
    display: block;
  }

  .entry-detail__back {
    display: none;
  }
}

/* =========================================================================
   10. REDUCED MOTION
   The site's only sanctioned motion is a scroll fade on scorecard rows and
   panels, which arrives with those components. This block disables it, and
   anything later added, for readers who ask for less motion.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}