/* Records guide presentation (/dc/foia-guide), approved design V1 2026-09-11.
 *
 * SCOPED to .foia-guide on the page container so nothing here reaches another
 * guide. Every colour reads a live main.css token; the approved mockup's
 * standalone :root palette is deliberately NOT copied.
 *
 * This file also absorbs the presentation the page used to carry in an inline
 * <style> block (step lists, submit cards, comparison and branch tables,
 * pitfall cards, the finder and its result cards). Moving it here is what lets
 * the markup ship as content rather than as a stylesheet.
 *
 * Two rules this file exists to respect:
 *   - THE BUTTON LAW: every clickable card or button carries a 2px accent
 *     border plus card-fx's cursor glow (cardfx-pop in the markup), a hover
 *     lift, and a border that shifts to --color-primary.
 *   - THE SYMMETRY LAW: no paragraph here gets its own narrower max-width, so
 *     the shared --prose-measure band set by main.css still rules the reading
 *     flow. Cards are their own measure, which is correct.
 *
 * Dark mode is declared with BOTH mechanisms (prefers-color-scheme AND
 * [data-theme="dark"]) because the Auto theme only sets the media query.
 */

/* --color-accent (#b07a1f) is 3.72:1 as TEXT on white, below AA. Gold-coloured
   text on this page reads this separate ink token instead; the accent itself
   stays the border colour in both themes. */
.foia-guide { --fg-ink-accent: #8a5e12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foia-guide { --fg-ink-accent: #f5c862; }
}
:root[data-theme="dark"] .foia-guide { --fg-ink-accent: #f5c862; }

/* The two views toggle with the `hidden` ATTRIBUTE, and `hidden` loses to any
   explicit `display` rule, so nothing in this file gives either section a
   display value and this pair states the closed case outright. */
.foia-guide #foia-finder-view[hidden],
.foia-guide #foia-reference-view[hidden] { display: none; }

/* ---------- Hero ---------- */

/* THE APPROVED INTRODUCTION IS LEFT-ALIGNED, a named decision in the approved
   scope. THE SYMMETRY LAW is respected rather than overridden: the hero BLOCK
   is capped at the shared --prose-measure and centred in the content column,
   and everything inside it is left-aligned against that same band, so
   `.dc-hero p`'s own `margin: 0 auto` resolves to zero and the heading and its
   paragraph share one edge. */
.foia-guide .fg-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: center;
  gap: 2.5rem;
  margin: 0 0 1.75rem;
}
.foia-guide .fg-hero .dc-hero {
  text-align: left;
  max-width: var(--prose-measure);
  margin: 0;
}
.foia-guide .fg-hero .dc-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.14; }
.foia-guide .fg-hero .dc-hero h1 em {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: var(--color-primary);
}
.foia-guide .fg-hero .dc-hero p { font-size: 1rem; }

.foia-guide .fg-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-ink-accent);
  /* auto side margins so an eyebrow in the prose flow shares the centred band
     of the paragraphs around it (THE SYMMETRY LAW). Inside a card it has no
     max-width, so auto resolves to zero and nothing shifts. */
  margin: 0 auto .45rem;
  line-height: 1.4;
}

.foia-guide .fg-hero-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.35rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--fg-ink-accent);
  font-weight: 700;
}
.foia-guide .fg-hero-steps b {
  font-size: .8rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: .45rem;
}

/* The art plate keeps ONE cream ground in both themes on purpose: the
   illustration itself is painted on cream, so a token that flips would leave a
   pale picture floating on a dark square. Its caption ink is therefore also
   fixed, never a flipping token. */
.foia-guide .fg-hero-art {
  background: #f7efdf;
  border: 2px solid var(--color-accent);
  border-radius: 5.5rem 5.5rem 1rem 1rem;
  padding: .6rem 0 .9rem;
  text-align: center;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.foia-guide .fg-hero-art img { width: 100%; height: auto; object-fit: contain; }
.foia-guide .fg-hero-art span {
  color: #143350;
  font-size: .55rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .18em;
}

/* ---------- Entry choices ---------- */

.foia-guide .fg-entry-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1.6rem;
  padding: 0;
}
.foia-guide .fg-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .95rem 1.15rem;
  min-height: 44px;
  text-align: left;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
.foia-guide .fg-entry:hover,
.foia-guide .fg-entry:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(26, 58, 107, .18);
  transform: translateY(-2px);
  text-decoration: none;
}
.foia-guide .fg-entry[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.foia-guide .fg-entry[aria-pressed="true"] .fg-entry-sub { color: var(--color-on-primary); opacity: .88; }
.foia-guide .fg-entry strong { display: block; font-size: .95rem; line-height: 1.3; }
.foia-guide .fg-entry .fg-entry-sub {
  display: block;
  font-size: .78rem;
  line-height: 1.4;
  margin-top: .2rem;
  color: var(--color-text-muted);
}
.foia-guide .fg-entry .fg-entry-mark { font-size: 1.15rem; line-height: 1; flex: 0 0 auto; }

/* ---------- Contents ---------- */

/* The pill row moved into the shared reading-shell rail on 2026-09-14
   (/css/guide-reading.css), which styles nav.guide-nav there. */

/* ---------- Section headers ---------- */

.foia-guide .fg-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.foia-guide .fg-section-head > div { min-width: 0; flex: 1 1 20rem; }
.foia-guide .fg-section-head h2 {
  font-size: 1.85rem;
  line-height: 1.18;
  color: var(--color-text);
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
  text-align: left;
}
.foia-guide .fg-section-head p { font-size: .9rem; margin: .45rem 0 0; }
.foia-guide .fg-privacy-note {
  border-left: 2px solid var(--color-accent);
  padding-left: .8rem;
  font-size: .72rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  flex: 0 0 auto;
  margin: 0;
}

/* ---------- Records Finder ---------- */

.foia-guide #records-finder { margin-top: .5rem; }

.foia-guide .rf-fs {
  border: 0;
  margin: 0 0 1.4rem;
  padding: 0;
  min-width: 0;
}
.foia-guide .rf-fs:not(:first-of-type) {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.3rem 1.4rem;
}
.foia-guide .rf-fs > legend {
  padding: 0 .55rem;
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text);
  max-width: 100%;
}
/* Question 1's legend is the visible section heading above the cards, so the
   fieldset keeps its accessible name without printing it twice. */
.foia-guide .rf-fs:first-of-type > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.foia-guide .rf-checks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .75rem;
}
.foia-guide .rf-check {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.05rem;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
.foia-guide .rf-check:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(26, 58, 107, .18);
  transform: translateY(-2px);
}
.foia-guide .rf-check:focus-within { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.foia-guide .rf-check:has(input:checked) {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}
.foia-guide .rf-check input {
  position: absolute;
  top: .9rem;
  right: .85rem;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-primary);
  z-index: 1;
}
.foia-guide .rf-check-number {
  font-size: .62rem;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--fg-ink-accent);
}
.foia-guide .rf-check-art {
  width: 5.9rem;
  height: 4.4rem;
  object-fit: contain;
  margin: .75rem 0 1rem;
  background: #f8f0df;
  border-radius: var(--radius-sm);
}
.foia-guide .rf-check-title {
  display: block;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-text);
  /* `break-word` and not `anywhere`: `anywhere` also affects min-content
     sizing and splits headings that would have fitted. */
  overflow-wrap: break-word;
  /* Two lines' worth, so the subtitle and description rows line up across the
     five cards whatever their titles do. */
  min-height: 3.2rem;
}
.foia-guide .rf-check-sub {
  display: block;
  font-size: .62rem;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--fg-ink-accent);
  margin: .5rem 0;
}
.foia-guide .rf-check-desc {
  display: block;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.foia-guide .rf-radios { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .5rem; }
.foia-guide .rf-radio {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  max-width: 100%;
  min-height: 46px;
  padding: .65rem .8rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: .88rem;
  line-height: 1.45;
  cursor: pointer;
}
.foia-guide .rf-radio:has(input:checked) {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.foia-guide .rf-radio input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin: .18rem 0 0; accent-color: var(--color-primary); }
.foia-guide .rf-hint, .foia-guide .rf-note { font-size: .82rem; color: var(--color-text-muted); line-height: 1.55; margin: .6rem 0 0; }
.foia-guide .rf-daterow { margin-top: 1.05rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .88rem; }
.foia-guide .rf-daterow input {
  padding: .55rem .8rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 46px;
  max-width: 100%;
  min-width: 0;
}

.foia-guide .rf-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: .9rem 0 1.2rem; }
.foia-guide .rf-actions .btn { min-height: 48px; }
.foia-guide #rf-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 48px;
  padding: .7rem 1.1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.foia-guide #rf-reset:hover,
.foia-guide #rf-reset:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(26, 58, 107, .18);
  transform: translateY(-2px);
}
.foia-guide .rf-selection { font-size: .78rem; color: var(--color-text-muted); margin-left: auto; }

.foia-guide .rf-selfserve-details {
  border-top: 1px solid var(--color-border);
  margin: 1.1rem 0 0;
  font-size: .85rem;
}
.foia-guide .rf-selfserve-details > summary {
  padding: .75rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
}
.foia-guide .rf-selfserve {
  background: rgba(176, 122, 31, .08);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  margin: 0 0 .6rem;
}
.foia-guide .rf-selfserve p { font-size: .85rem; line-height: 1.6; color: var(--color-text); margin: 0 0 .5rem; max-width: none; }
.foia-guide .rf-selfserve p:last-child { margin-bottom: 0; }

/* ---------- Finder results ---------- */

.foia-guide .rf-results { margin-top: 1.75rem; scroll-margin-top: 5.25rem; }
.foia-guide .rf-results:empty { display: none; }
.foia-guide .rf-results:focus { outline: none; }

.foia-guide .rf-intro { border-top: 1px solid var(--color-accent); padding-top: 1.5rem; margin-bottom: 1.3rem; }
.foia-guide .rf-intro h3 { font-size: 1.7rem; line-height: 1.2; margin: 0; color: var(--color-text); }
.foia-guide .rf-intro p { font-size: .88rem; }
.foia-guide .rf-snapshot { display: flex; gap: .45rem; flex-wrap: wrap; margin: .85rem 0 0; padding: 0; list-style: none; }
.foia-guide .rf-snapshot li {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .72rem;
  color: var(--color-text-muted);
}

.foia-guide .rf-pending {
  padding: .85rem 1.1rem;
  margin: 0 0 1rem;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: .88rem;
}

.foia-guide .rf-result-card {
  border: 2px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.55rem;
  margin: .9rem 0;
  overflow-wrap: break-word;
}
.foia-guide .rf-result-card h4 {
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 .7rem;
  font-weight: 600;
}
.foia-guide .rf-kicker {
  font-size: .62rem;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--fg-ink-accent);
  margin: 0 0 .5rem;
}
.foia-guide .rf-result-card > p { font-size: .92rem; line-height: 1.65; color: var(--color-text); margin: 0 0 .6rem; }
.foia-guide .rf-addr {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  margin: .9rem 0 .35rem;
  line-height: 1.75;
  font-size: .92rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.foia-guide .rf-addr strong { color: var(--color-text); }
.foia-guide .rf-meta { font-size: .8rem; margin-top: .5rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.foia-guide .rf-contact { margin: .15rem 0; }
.foia-guide .rf-guide-intro { font-weight: 600; }
.foia-guide .rf-guide-links { font-size: .88rem; line-height: 1.7; }
.foia-guide .rf-guide-links a { overflow-wrap: anywhere; }
.foia-guide .rf-or { font-size: .82rem; padding-top: .4rem; color: var(--color-text); font-weight: 600; margin: .5rem 0 .2rem; }
.foia-guide .rf-foot { font-size: .8rem; color: var(--color-text-muted); line-height: 1.55; margin: 1.2rem 0; }
.foia-guide .rf-warn {
  padding: .85rem 1.1rem;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 600;
  margin: .5rem 0;
}

/* The primary destination inside a result card reads as a button. Scoped to a
   direct child paragraph so the same class inside a note or a guidance link
   row stays an inline text link. */
.foia-guide .rf-result-card > p > .rf-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem .95rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
}
.foia-guide .rf-result-card > p > .rf-link:hover,
.foia-guide .rf-result-card > p > .rf-link:focus-visible { border-color: var(--color-primary); text-decoration: none; }
.foia-guide .rf-result-card .rf-note .rf-link,
.foia-guide .rf-result-card .rf-guide-links .rf-link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  text-decoration: underline;
  font-size: inherit;
}

/* How to request these records (2026-09-12 handoff): the form, what to select,
   copyable wording, the details the official form asks for, and the next step,
   inside each result card. The wording stays visible and selectable, so a
   refused clipboard never hides it. */
.foia-guide .rf-howto { border-top: 1px solid var(--color-border); margin: 1.1rem 0 .3rem; padding-top: 1rem; }
.foia-guide .rf-howto h5 { font-size: 1.05rem; line-height: 1.3; color: var(--color-text); margin: 0 0 .55rem; font-weight: 700; }
.foia-guide .rf-howto-list { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 1.65; color: var(--color-text); }
.foia-guide .rf-howto-list > li { margin: 0 0 .75rem; }
.foia-guide .rf-copy-block { margin: .55rem 0 .9rem; }
.foia-guide .rf-howto-label { font-size: .82rem; font-weight: 600; color: var(--color-text); margin: .45rem 0 .3rem; }
.foia-guide .rf-wording {
  padding: .85rem 1rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: .92rem;
  line-height: 1.65;
  margin: 0 0 .6rem;
  overflow-wrap: anywhere;
  user-select: text;
}
.foia-guide .rf-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55rem 1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.foia-guide .rf-copy:hover,
.foia-guide .rf-copy:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(26, 58, 107, .18);
  transform: translateY(-2px);
}
.foia-guide .rf-copy:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.foia-guide .rf-copy-status { display: block; min-height: 1.3em; margin-top: .35rem; font-size: .82rem; line-height: 1.5; color: var(--color-text-muted); }
.foia-guide .rf-result-card .rf-companion { margin: .9rem 0 .2rem; }

/* Track this request. The label colour is scoped to beat any broad link-colour
   rule in the reading flow: an unscoped `.rf-track-btn` rule lost that cascade
   once already and painted primary text on a primary background (owner fix
   FR-7, 2026-09-05). Tokens only, no !important, no hard-coded colour. */
.foia-guide .rf-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid var(--color-accent);
  padding: 1.4rem 0 .5rem;
  margin-top: 1.5rem;
}
.foia-guide .rf-track h4 { margin: 0 0 .4rem; font-size: 1.25rem; color: var(--color-text); }
.foia-guide .rf-track p { font-size: .9rem; line-height: 1.6; color: var(--color-text); margin: 0 0 .8rem; }
.foia-guide .rf-track a.rf-track-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.foia-guide .rf-track a.rf-track-btn:hover,
.foia-guide .rf-track a.rf-track-btn:focus-visible { border-color: var(--color-primary); text-decoration: none; }
.foia-guide .rf-track a.rf-track-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Feedback bar (unchanged pipeline). */
.foia-guide .rf-fb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.foia-guide .rf-fb-q { font-size: .9rem; font-weight: 600; color: var(--color-text); }
.foia-guide .rf-fb-btn { font-size: 1.1rem; line-height: 1; background: var(--color-bg); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); min-width: 44px; min-height: 44px; cursor: pointer; }
.foia-guide .rf-fb-btn[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-bg-alt); }
.foia-guide .rf-fb-btn:disabled { cursor: default; opacity: .75; }
.foia-guide .rf-fb-link { background: none; border: none; color: var(--color-primary); font-size: .85rem; text-decoration: underline; cursor: pointer; padding: .4rem; min-height: 44px; }
.foia-guide .rf-fb-thanks { font-size: .85rem; color: var(--color-text-muted); }
.foia-guide .rf-fb-form { flex-basis: 100%; margin-top: .5rem; }
.foia-guide .rf-fb-form textarea { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: .9rem; }
.foia-guide .rf-fb-form > div { margin-top: .5rem; }

/* ---------- Exam shortcuts ---------- */

.foia-guide .fg-exam {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 1.1rem;
  align-items: center;
  border-top: 1px solid var(--color-border);
  margin: 2.1rem 0 1.6rem;
  padding-top: 1.8rem;
}
.foia-guide .fg-exam h2 { font-size: 1.5rem; margin: 0; border-bottom: none; padding-bottom: 0; text-align: left; color: var(--color-text); }
.foia-guide .fg-exam p { font-size: .82rem; margin: .45rem 0 0; }
.foia-guide .fg-exam-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 6.5rem;
  padding: 1.2rem 1rem;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.foia-guide .fg-exam-link:hover,
.foia-guide .fg-exam-link:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(26, 58, 107, .18);
  transform: translateY(-2px);
  text-decoration: none;
}
.foia-guide .fg-exam-code {
  font-family: var(--font-serif, Georgia, serif);
  color: var(--fg-ink-accent);
  font-size: 1.15rem;
  font-weight: 700;
  border-right: 1px solid var(--color-border);
  padding-right: .75rem;
  flex: 0 0 auto;
}
.foia-guide .fg-exam-link strong { display: block; font-size: .9rem; line-height: 1.45; }
.foia-guide .fg-exam-link small { display: block; color: var(--color-text-muted); font-size: .74rem; margin-top: .3rem; line-height: 1.5; }
.foia-guide .fg-exam-link .fg-entry-mark { margin-left: auto; font-size: 1.05rem; }

/* ---------- About block and reading sections ---------- */

.foia-guide .fg-about,
.foia-guide .fg-reading .guide-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin: .75rem 0;
}
.foia-guide .fg-about > summary,
.foia-guide .fg-reading .guide-details > summary {
  padding: 1.1rem 1.3rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.4;
}
.foia-guide .fg-about > summary::before,
.foia-guide .fg-reading .guide-details > summary::before { content: none; }
.foia-guide .fg-about > summary::after,
.foia-guide .fg-reading .guide-details > summary::after {
  content: '+';
  color: var(--fg-ink-accent);
  font-size: 1.35rem;
  line-height: 1;
  flex: 0 0 auto;
}
.foia-guide .fg-about[open] > summary::after,
.foia-guide .fg-reading .guide-details[open] > summary::after { content: '\2212'; }
.foia-guide .fg-reading .guide-details > summary h2 {
  display: inline;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--color-text);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
  text-align: left;
}
.foia-guide .fg-about .details-body,
.foia-guide .fg-reading .details-body { padding: 0 1.4rem 1.4rem; }
.foia-guide .fg-reading .guide-section { margin-bottom: .75rem; }

.foia-guide .fg-reading-control { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.foia-guide .fg-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .9rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.foia-guide .fg-back:hover,
.foia-guide .fg-back:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(26, 58, 107, .18);
  transform: translateY(-2px);
}

/* ---------- Reading-flow components (moved out of the page's inline CSS) ---------- */

.foia-guide .guide-section h3 { font-size: 1.05rem; color: var(--color-text); margin: 1.25rem 0 .5rem; }
.foia-guide .guide-section p,
.foia-guide .guide-section li { font-size: .92rem; line-height: 1.7; color: var(--color-text-muted); }
.foia-guide .guide-section ul,
.foia-guide .guide-section ol { padding-left: 1.25rem; margin: .5rem 0; }
.foia-guide .guide-section li { margin-bottom: .35rem; }
.foia-guide .guide-section a { color: var(--color-primary); }
.foia-guide .guide-section strong { color: var(--color-text); }
.foia-guide .tip-box strong { color: var(--color-primary); }
.foia-guide .warning-box strong { color: var(--color-danger); }

.foia-guide .step-list { counter-reset: steps; list-style: none; padding-left: 0; margin: .75rem 0; }
.foia-guide .step-list li {
  counter-increment: steps;
  position: relative;
  padding: .7rem .9rem .7rem 3.25rem;
  margin-bottom: .6rem;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  min-height: 2.4rem;
}
.foia-guide .step-list li::before {
  content: counter(steps);
  position: absolute;
  left: .65rem;
  top: .6rem;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82rem;
}
/* `break-word`, never `anywhere`: a slashed compound like
   "Correspondence/Documentation" has no break opportunity and pushed a 320px
   page 43px sideways, while `anywhere` would also split short tokens such as
   "DC 6523" that fit perfectly well. */
.foia-guide .step-list li,
.foia-guide .step-list li a { overflow-wrap: break-word; }
.foia-guide .step-list li strong { color: var(--color-primary); }

.foia-guide .submit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: .85rem; margin: 1rem 0; }
.foia-guide .submit-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.15rem; background: var(--color-bg); }
.foia-guide .submit-card h4 { font-size: .9rem; color: var(--color-primary); margin: 0 0 .4rem; font-weight: 600; }
.foia-guide .submit-card p { font-size: .85rem; color: var(--color-text); line-height: 1.55; margin: 0; }
.foia-guide .submit-card .badge { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--color-success); color: #fff; margin-left: .4rem; vertical-align: middle; }

.foia-guide .compare-table,
.foia-guide .branch-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 1rem 0; }
.foia-guide .compare-table th,
.foia-guide .branch-table th {
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-weight: 700;
  text-align: left;
  padding: .65rem .9rem;
  border-bottom: 2px solid var(--color-border);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.foia-guide .compare-table td,
.foia-guide .branch-table td { padding: .65rem .9rem; border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-text); line-height: 1.55; }
.foia-guide .compare-table tr:last-child td,
.foia-guide .branch-table tr:last-child td { border-bottom: none; }
.foia-guide .compare-table td:first-child,
.foia-guide .branch-table td:first-child { font-weight: 700; color: var(--color-text); }

.foia-guide .pitfall-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; margin-bottom: .85rem; background: var(--color-bg); }
.foia-guide .pitfall-card h4 { font-size: .93rem; color: var(--color-primary); margin: 0 0 .4rem; font-weight: 600; }
.foia-guide .pitfall-card p { font-size: .88rem; color: var(--color-text); line-height: 1.6; margin: 0; }

/* ---------- After the records arrive ---------- */

.foia-guide .fg-next {
  display: flex;
  gap: 1.9rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 2.4rem 0;
  padding: 1.7rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.foia-guide .fg-next > div { min-width: 0; flex: 1 1 22rem; }
.foia-guide .fg-next h2 { font-size: 1.6rem; margin: 0; border-bottom: none; padding-bottom: 0; text-align: left; color: var(--color-text); }
.foia-guide .fg-next p { font-size: .9rem; margin: .5rem 0 0; }
.foia-guide .fg-next-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .7rem 1.15rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  flex: 0 0 auto;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.foia-guide .fg-next-link:hover,
.foia-guide .fg-next-link:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(26, 58, 107, .18);
  transform: translateY(-2px);
  text-decoration: none;
}

.foia-guide .fg-disclaimer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.foia-guide .fg-disclaimer p { font-size: .82rem; color: var(--color-text-muted); line-height: 1.6; }

/* ---------- Responsive ---------- */

@media (max-width: 1050px) {
  .foia-guide .fg-hero { grid-template-columns: minmax(0, 1fr) 11.5rem; gap: 1.75rem; }
  .foia-guide .rf-checks { gap: .55rem; }
  .foia-guide .rf-check { padding: .85rem .75rem; }
  .foia-guide .rf-check-title { font-size: 1.15rem; }
  .foia-guide .rf-check-desc { font-size: .72rem; }
  .foia-guide .fg-exam { grid-template-columns: 1fr 1fr; }
  .foia-guide .fg-exam > div { grid-column: 1 / -1; }
}

@media (max-width: 740px) {
  .foia-guide .fg-hero { display: block; position: relative; }
  .foia-guide .fg-hero .dc-hero h1 { font-size: 1.75rem; }
  .foia-guide .fg-hero-art {
    position: absolute;
    right: 0;
    top: .5rem;
    width: 4.6rem;
    height: 3.6rem;
    border-radius: 1rem 1rem .4rem .4rem;
    padding: 0;
    display: block;
  }
  .foia-guide .fg-hero-art img { width: 100%; height: 100%; }
  .foia-guide .fg-hero-art span { display: none; }
  .foia-guide .fg-hero .fg-eyebrow { max-width: calc(100% - 5.5rem); }
  .foia-guide .fg-entry-nav { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .foia-guide .fg-entry-track { grid-column: 1 / -1; }
  .foia-guide .fg-section-head { display: block; }
  .foia-guide .fg-privacy-note { border: 0; padding: 0; margin-top: .6rem; }
  .foia-guide .fg-privacy-note br { display: none; }
  .foia-guide .rf-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .foia-guide .rf-check { min-height: 14rem; }
  /* The fifth card has no partner on a two-column phone grid, so it becomes a
     single wide row rather than a half-empty column. */
  .foia-guide .rf-check:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    column-gap: 1rem;
    min-height: 7.2rem;
    padding-right: 2.3rem;
  }
  .foia-guide .rf-check:last-child .rf-check-number { grid-column: 1; grid-row: 1; }
  .foia-guide .rf-check:last-child .rf-check-art { grid-column: 1; grid-row: 2 / 5; margin: .5rem 0 0; width: 4.55rem; height: 3.5rem; }
  .foia-guide .rf-check:last-child .rf-check-title { grid-column: 2; grid-row: 1 / 3; min-height: 0; }
  .foia-guide .rf-check:last-child .rf-check-sub { grid-column: 2; grid-row: 3; margin-top: .35rem; }
  .foia-guide .rf-check:last-child .rf-check-desc { grid-column: 2; grid-row: 4; }
  .foia-guide .rf-check-art { width: 4.55rem; height: 3.45rem; margin: .6rem 0 .8rem; }
  .foia-guide .rf-check-title { font-size: 1.2rem; }
  .foia-guide .rf-fs:not(:first-of-type) { padding: 1rem .95rem; }
  .foia-guide .rf-fs > legend { font-size: 1.15rem; padding: 0 .45rem; }
  .foia-guide .rf-radios:has(input[name="rf-status"]) .rf-radio { flex-basis: 100%; }
  .foia-guide .rf-daterow { display: block; }
  .foia-guide .rf-daterow input { margin-top: .55rem; width: 100%; }
  .foia-guide .rf-actions #rf-go { flex: 1 1 100%; }
  .foia-guide .rf-selection { margin-left: 0; flex-basis: 100%; }
  .foia-guide .rf-result-card { padding: 1.15rem 1rem; }
  .foia-guide .rf-result-card h4 { font-size: 1.2rem; }
  .foia-guide .rf-addr { padding: .9rem .85rem; }
  .foia-guide .rf-track a.rf-track-btn { width: 100%; justify-content: center; font-size: .95rem; }
  .foia-guide .fg-exam { display: block; }
  .foia-guide .fg-exam-link { margin: .7rem 0; min-height: 5.6rem; }
  .foia-guide .fg-about > summary,
  .foia-guide .fg-reading .guide-details > summary { padding: .9rem 1rem; gap: .75rem; }
  .foia-guide .fg-reading .guide-details > summary h2 { font-size: 1.15rem; }
  .foia-guide .fg-about .details-body,
  .foia-guide .fg-reading .details-body { padding: 0 1rem 1.2rem; }
  /* The comparison table becomes labelled rows. Every column keeps its label
     and the table keeps its semantics; nothing is dropped. */
  .foia-guide .compare-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .foia-guide .compare-table tbody,
  .foia-guide .compare-table tr,
  .foia-guide .compare-table td { display: block; }
  .foia-guide .compare-table tr { padding: .75rem 0; border-bottom: 2px solid var(--color-accent); }
  .foia-guide .compare-table td { border: 0; padding: .3rem 0; font-size: .85rem; }
  .foia-guide .compare-table td:first-child { font-size: 1.1rem; line-height: 1.25; margin-bottom: .5rem; }
  .foia-guide .compare-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    color: var(--color-text-muted);
    font-size: .65rem;
    letter-spacing: .06em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .15rem;
  }
  .foia-guide .branch-table { font-size: .82rem; }
  .foia-guide .branch-table th,
  .foia-guide .branch-table td { padding: .5rem .65rem; }
  .foia-guide .fg-next { display: block; }
  .foia-guide .fg-next-link { margin-top: .8rem; }
}

@media (max-width: 355px) {
  .foia-guide .fg-hero .dc-hero h1 { font-size: 1.55rem; }
  .foia-guide .rf-check { padding: .8rem .65rem; }
  .foia-guide .rf-check-title { font-size: 1.05rem; }
  .foia-guide .rf-check-desc { font-size: .7rem; }
  .foia-guide .fg-entry strong { font-size: .85rem; }
  .foia-guide .fg-entry .fg-entry-sub { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .foia-guide .rf-check,
  .foia-guide .fg-entry,
  .foia-guide .fg-exam-link,
  .foia-guide .fg-next-link,
  .foia-guide .fg-back,
  .foia-guide #rf-reset,
  .foia-guide .rf-copy,
  .foia-guide .rf-actions #rf-go { transition: none; }
  .foia-guide .rf-check:hover,
  .foia-guide .fg-entry:hover,
  .foia-guide .fg-exam-link:hover,
  .foia-guide .fg-next-link:hover,
  .foia-guide .fg-back:hover,
  .foia-guide #rf-reset:hover,
  .foia-guide .rf-copy:hover,
  .foia-guide .rf-copy:focus-visible,
  .foia-guide .rf-actions #rf-go:hover { transform: none; }
}

/* ---------- Visual guide thumbnails ---------- */

/* Small full-composition thumbnails beside their caption. The full-size PNG and
   PDF stay click-through links, so nothing large is fetched on load. */
.foia-guide .visual-guide-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  max-width: 40.5rem;
  margin: 1.25rem 0;
  overflow: visible;
  box-shadow: none;
}
.foia-guide .visual-guide-card > a { flex: 0 0 auto; display: block; }
.foia-guide .visual-guide-card img { width: 7.5rem; height: auto; display: block; }
.foia-guide .visual-guide-card figcaption { display: block; padding: 0; border-top: 0; }
.foia-guide .visual-guide-card strong { display: block; font-size: 1.05rem; line-height: 1.3; color: var(--color-text); }
.foia-guide .visual-guide-card .vg-subcopy { display: block; font-size: .82rem; color: var(--color-text-muted); margin: .6rem 0; }
.foia-guide .visual-guide-card .vg-links { display: block; font-size: .76rem; }

/* The non-collapsing sections (Related Tools and Guides) keep the heading rule
   the page used to carry inline. */
.foia-guide .guide-section > h2 {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--color-border);
}

/* THE BUTTON LAW on the finder's primary action. */
.foia-guide .rf-actions #rf-go {
  border: 2px solid var(--color-accent);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.foia-guide .rf-actions #rf-go:hover,
.foia-guide .rf-actions #rf-go:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(26, 58, 107, .18);
  transform: translateY(-2px);
}

@media (max-width: 740px) {
  .foia-guide .visual-guide-card { gap: 1rem; padding: .95rem; }
  .foia-guide .visual-guide-card img { width: 4.9rem; }
  .foia-guide .visual-guide-card strong { font-size: .95rem; }
}