/* Wayfold v2 — prose.css · the guide and legal pages, in the v2 brand world
 *
 * These pages are the one place on the site where text is allowed to carry the load: they
 * quote the Federal Register and ADA.gov at length, and the 120-word budget is a home-page
 * budget, not a site-wide one (DESIGN BAR v2 §3: "Guides/SEO pages can carry text, but must
 * keep the same brand world").
 *
 * So this file does NOT restyle the content. It re-dresses the shell the v1 pages already
 * use — the same class names, the same markup — in the v2 tokens, which is why the reskin is
 * a stylesheet swap rather than four rewritten pages. Loaded AFTER tokens.css, fonts.css and
 * blocks.css; every value below is a token.
 *
 * 0 hex literals. The accessibility motif is the point of this brand: the focus ring is a
 * 3px signal-orange band with a 2px offset, declared once in blocks.css, and nothing here
 * removes an outline.
 *
 * Display type is capped here. blocks.css sizes h1 for a hero statement (up to 6.5rem at
 * line-height 0.88); a guide h1 is a full sentence and a condensed face that large turns it
 * into a poster. DESIGN.md §3.1 allows the display face down to ~24px, not below.
 */

/* ════════════════════════════════════════════════ 1 · page frame and type scale ══ */

.page {
  padding-block: var(--space-7) var(--space-9);
}

.page > * + * { margin-top: var(--space-5); }

/* One measure for running text. A quoted rule read at 90 characters a line is a rule nobody
 * finishes, and these pages exist to be finished. */
.page p,
.page li { max-width: var(--measure-body); }

.page h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: 0.94;
  max-width: 30ch;
}

.page h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  line-height: 1.02;
  margin-top: var(--space-7);
  /* a hairline above every section: the same 1px rule the home uses between bands, so the
   * two page types read as one system */
  padding-top: var(--space-4);
  border-top: var(--bw-hairline) solid var(--rule);
  max-width: 34ch;
}

.page h1 + .asof,
.page h2 + * { margin-top: var(--space-4); }

.page h3 { margin-top: var(--space-6); color: var(--ink); }

.page ul, .page ol { margin: 0; padding-left: var(--space-5); }
.page li + li { margin-top: var(--space-3); }

/* ══════════════════════════════════════════════════════ 2 · the as-of stamp ══════ */

/* DESIGN.md §11.4: every date on this site carries an "as of" stamp and a real source. On a
 * guide page the stamp is the first thing under the title, set as a label, not a sentence. */
.asof {
  font-size: var(--step-label);
  font-weight: var(--wg-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.intro {
  font-size: var(--step-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure-body);
}

/* ═══════════════════════════════════════════════════════ 3 · quoted rule text ════ */

/* The quote is the strongest element on these pages because it is the only text on the site
 * that is not ours. It gets the finished-route colour as a 3px left line — the same stroke
 * role as a completed segment in the map: "this part is settled". */
.quote {
  margin: 0;
  padding: var(--space-5);
  padding-left: var(--space-5);
  background: var(--surface);
  border-left: 3px solid var(--line-done);
  border-radius: var(--r-panel);
}

.quote p { max-width: 62ch; }

.quote footer {
  margin-top: var(--space-4);
  font-size: var(--step-caption);
  line-height: var(--lh-caption);
  color: var(--ink-2);
}

/* ══════════════════════════════════════════════════════════════ 4 · tables ═══════ */

.page table,
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-body);
  font-variant-numeric: var(--num-tabular);
  text-align: left;
}

.page caption,
.tbl caption {
  caption-side: top;
  text-align: left;
  font-size: var(--step-label);
  font-weight: var(--wg-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: var(--space-3);
}

.page th,
.page td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--bw-hairline) solid var(--rule);
  vertical-align: top;
}

.page thead th {
  font-size: var(--step-label);
  font-weight: var(--wg-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom-width: 2px;
}

.page tbody th { font-weight: 600; max-width: 42ch; }

/* ═══════════════════════════════════════════════ 5 · owner code, shared atom ═════ */

/* The same owner chip as the map (marks.mjs `ownerSquare`), in HTML: a dry-cornered box
 * with a 2px finished-route border and a monospaced-feeling code. Keeping it identical is
 * what makes the guides feel like the same product as the hero. */
.owner {
  display: inline-block;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  padding: 2px var(--space-2);
  border: 2px solid var(--line-done);
  border-radius: var(--r-chip);
  background: var(--ground);
  color: var(--ink);
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════ 6 · breadcrumbs ═══════ */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-caption);
  color: var(--ink-2);
}

.crumbs li + li::before { content: "→"; padding-right: var(--space-2); color: var(--line-todo); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ══════════════════════════════════════════════════ 7 · header on doc pages ══════ */

/* Same shell as the home (blocks.css `.site-head`), under the names the v1 pages already
 * use, so the swap is a stylesheet swap. DESIGN.md §9: no CTA in the guide header. */
.site-header {
  border-bottom: var(--bw-hairline) solid var(--rule);
  padding-block: var(--space-4);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* `.brand` (mark + wordmark) lives in blocks.css: both page types use it now. */

.site-nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }

.site-nav a {
  font-size: var(--step-label);
  font-weight: var(--wg-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.site-nav a:hover { text-decoration: underline; }

/* The current page is marked by the finished-route colour AND an underline: colour is never
 * the only channel anywhere on this site. */
.site-nav a[aria-current="page"] {
  color: var(--line-done);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ═════════════════════════════════════════════════════ 8 · the honest label ══════ */

/* Moved off the top of the page by the design bar: it sits with the end CTA now, which is
 * where it is actually load-bearing — next to the thing a visitor is about to click. */
.disclosure {
  font-size: var(--step-caption);
  line-height: var(--lh-caption);
  color: var(--ink-2);
  max-width: var(--measure-caption);
}

/* ══════════════════════════════════════════════════════════ 9 · the end CTA ══════ */

.endcta {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--surface);
  border: var(--bw-hairline) solid var(--rule);
  border-radius: var(--r-panel);
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.endcta h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

/* ═══════════════════════════════════════════════════════════ 10 · the footer ═════ */

.site-footer {
  border-top: var(--bw-hairline) solid var(--rule);
  padding-block: var(--space-6);
  font-size: var(--step-caption);
  line-height: var(--lh-caption);
  color: var(--ink-2);
}

.foot-grid { display: grid; gap: var(--space-5); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }

.foot-links a {
  font-size: var(--step-label);
  font-weight: var(--wg-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.foot-links a:hover { text-decoration: underline; }
.foot-line { margin-top: var(--space-5); }

/* ═════════════════════════════════════════════════════════ 11 · narrow screens ═══ */

@media (max-width: 767px) {
  .page { padding-block: var(--space-6) var(--space-8); }

  /* The data table becomes a stack of labelled rows. The v1 markup already carries
   * data-label on every cell, so no HTML changes to make this work. */
  .page thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .page tbody tr {
    display: block;
    padding-block: var(--space-4);
    border-bottom: var(--bw-hairline) solid var(--rule);
  }
  .page tbody th, .page tbody td { display: block; border-bottom: 0; padding-inline: 0; max-width: none; }
  .page tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--step-label);
    font-weight: var(--wg-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--ink-2);
  }
}