/* Same visual language as fl.unhackdemocracy.us on purpose — one project,
   not two products. Deliberately plain: legibility over personality. */

:root {
  color-scheme: light dark;

  --ink: #14181d;
  --ink-soft: #4a5560;
  --line: #d8dee5;
  --bg: #ffffff;
  --bg-soft: #f5f7f9;
  --accent: #1a5f7a;
  --warn: #8a5a00;
  --ok: #1d6b3f;
  --bad: #9b2c2c;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0f4f8;
    --ink-soft: #b9c6d2;
    --line: #333c46;
    --bg: #12161a;
    --bg-soft: #1a2027;
    --accent: #8ecae6;
    --warn: #e8b866;
    --ok: #74d99f;
    --bad: #f08a8a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 1.25rem; }

.brand-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1.75rem;
}
.brand {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  text-decoration: none; color: inherit;
}
.brand img { border-radius: 8px; display: block; flex: none; width: 34px; height: 34px; }
.brand h1 { margin: 0; min-width: 0; }

.menu-toggle {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
}
.menu-toggle span { width: 16px; height: 2px; background: var(--ink); display: block; }
.menu-toggle:hover { border-color: var(--accent); }
.menu-toggle[aria-expanded="true"] { border-color: var(--accent); }

.site-menu[hidden] { display: none; }
.site-menu a { font-weight: 600; font-size: .9rem; color: var(--ink); text-decoration: none; }

/* Narrow screens: a real dropdown panel, not the same bar the wide
   layout uses — anchored top-right near the button that opens it,
   stacked vertically, boxed so it reads as a menu rather than a
   second row of tabs. */
header { position: relative; }
.site-menu {
  position: absolute; top: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 9rem; padding: .4rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.site-menu a { padding: .5rem .6rem; border-radius: 6px; }
.site-menu a:hover { background: var(--bg-soft); color: var(--accent); }

/* Wide screens: tabs are always visible inline above the title instead —
   no toggle needed. The [hidden] attribute stays on the element either
   way (JS doesn't know about the viewport); this override just wins
   visually above the breakpoint. */
@media (min-width: 40rem) {
  .menu-toggle { display: none; }
  /* Both branches, matching (not exceeding) the base rule's specificity
     of .site-menu[hidden] — a plain .site-menu here loses to that base
     rule regardless of source order, which is exactly the bug this
     caused: tabs stuck invisible at desktop width. :not([hidden]) covers
     resizing wider while the mobile dropdown happens to be open. */
  .site-menu[hidden],
  .site-menu:not([hidden]) {
    display: flex; position: static; flex-direction: row; gap: 1.25rem;
    min-width: 0; margin: 1.75rem 0 0; padding: 0 0 .75rem;
    background: none; border: none; border-bottom: 1px solid var(--line);
    box-shadow: none;
  }
  .site-menu[hidden] a, .site-menu:not([hidden]) a { padding: 0; border-radius: 0; }
  .site-menu[hidden] a:hover, .site-menu:not([hidden]) a:hover { background: none; }
}

/* clamp rather than a fixed size: at narrow widths a fixed 2.1rem
   doesn't wrap (it's one flex child in .brand-row) and pushes the
   menu-toggle button off-screen to the right. */
h1 { font-size: clamp(1.15rem, 5.2vw, 2.1rem); margin: 0 0 .25rem; letter-spacing: -.02em; }
.subtitle {
  color: var(--ink-soft); margin: 0 0 1rem;
  font-size: .95rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
h2 { font-size: 1.2rem; margin: 2.25rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }

.lede { color: var(--ink-soft); margin: 0 0 1.25rem; font-size: 1.1rem; }

/* Epigraph — the why, above the hero. Added 2026-09-20. */
.epigraph {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--bg-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.epigraph blockquote { margin: 0; }
.epigraph p { margin: 0 0 .6rem; font-size: 1.06rem; line-height: 1.6; }
.epigraph p:last-of-type { margin-bottom: 0; }
.epigraph .turn { color: var(--ink-soft); }
.epigraph .decide { color: var(--ink); font-weight: 600; }
.epigraph figcaption {
  margin-top: .85rem; font-size: .9rem; color: var(--ink-soft);
}
@media (max-width: 480px) {
  .epigraph { padding: 1rem; }
  .epigraph p { font-size: 1rem; }
}

.hero-art { margin: 0 0 1.5rem; }
.hero-art img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.hero-art figcaption {
  margin-top: .5rem; font-size: .85rem; color: var(--ink-soft);
  font-style: italic; text-align: right;
}
.note { color: var(--ink-soft); font-size: .92rem; margin: 1em 0; }

p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: .35rem; }

a { color: var(--accent); }

.principles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 32rem) {
  .principles { grid-template-columns: 1fr; }
}
.principles > div {
  padding: .9rem 1rem; background: var(--bg-soft);
  border-radius: var(--radius); border-left: 3px solid var(--accent);
}
.principles h3 { font-size: .95rem; margin: 0 0 .35rem; }
.principles p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

.state-card, .card {
  margin: 1.5rem 0; padding: 1.25rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.state-card.live, .card.live { border-left: 3px solid var(--accent); }
.state-card h3, .card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px;
  background: var(--accent); color: var(--bg);
}
.badge.soft { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }

/* Where a claim on the page comes from, small and out of the way. */
.source { font-size: .85rem; color: var(--ink-soft); margin-top: .9rem; }

.state-card ul, .card ul { font-size: .92rem; margin: .6rem 0 1rem; }

.btn {
  display: inline-block; font: inherit; font-weight: 700;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  background: var(--accent); color: var(--bg); text-decoration: none;
}
.btn:hover { filter: brightness(1.1); }

.state-card.pending, .card.pending { color: var(--ink-soft); }
.state-card.pending h3, .card.pending h3 { color: var(--ink-soft); }

footer {
  border-top: 1px solid var(--line); margin-top: 3rem;
  color: var(--ink-soft); font-size: .9rem; padding: 1.25rem 0 2rem;
}
footer a { color: var(--accent); }

/* ---- Section menu, second level ----------------------------------
   Resources is a group of pages rather than one page, so it is a
   disclosure button inside the menu rather than a link. Both layouts
   have to work: on narrow screens the submenu is an indented list
   inside the dropdown panel, on wide screens it is its own panel
   hanging below the tab. */
.menu-group { display: flex; flex-direction: column; gap: .1rem; }

.submenu-toggle {
  font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: .5rem .6rem; border-radius: 6px;
  display: flex; align-items: center; gap: .4rem;
}
.submenu-toggle:hover { background: var(--bg-soft); color: var(--accent); }
/* Which way the caret points is the only state cue the button has, so
   it is driven by aria-expanded rather than a second class that could
   drift out of step with it. */
.submenu-toggle::after { content: "\25B8"; font-size: .75em; }
.submenu-toggle[aria-expanded="true"]::after { content: "\25BE"; }

.submenu[hidden] { display: none; }
.submenu { display: flex; flex-direction: column; gap: .1rem; padding-left: .6rem; }

/* The page you are on, marked in the menu itself — and the group it
   belongs to marked too, so a child page still shows up in a collapsed
   menu without the panel having to open over the page to prove it. */
.site-menu a[aria-current="page"] { color: var(--accent); }
.submenu-toggle[data-section-current] { color: var(--accent); }

@media (min-width: 40rem) {
  .menu-group { position: relative; flex-direction: row; }
  .submenu-toggle { padding: 0; }
  .submenu-toggle:hover { background: none; }
  .submenu:not([hidden]) {
    position: absolute; top: calc(100% + .75rem); left: 0; z-index: 10;
    min-width: 11rem; padding: .4rem;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  }
  /* Matching (not exceeding) the specificity of the wide-screen rule
     that strips padding from menu links, then winning on source order —
     the same trick the .site-menu[hidden] override documents above. */
  .site-menu .submenu a { padding: .5rem .6rem; border-radius: 6px; }
  .site-menu .submenu a:hover { background: var(--bg-soft); }
  .site-menu a[aria-current="page"],
  .submenu-toggle[data-section-current] { border-bottom: 2px solid var(--accent); }
  .site-menu .submenu a[aria-current="page"] { border-bottom: 0; }
}

/* ---- Where you are, and the way back ------------------------------
   Every page below the root says what it is and offers its parent. The
   root has no parent, so it has no bar at all rather than a disabled
   one. */
.page-nav { margin: 0 0 1.25rem; font-size: .9rem; }
.page-nav a {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--accent); text-decoration: none; font-weight: 600;
  padding: .35rem .7rem .35rem .55rem;
  border: 1px solid var(--line); border-radius: 999px;
}
.page-nav a:hover { background: var(--bg-soft); border-color: var(--accent); }


/* ---- Civics quiz ---------------------------------------------------
   Deliberately plainer than the rest of the site is playful. The people
   using this are adults preparing for a government interview, and a
   study tool that looks like a game is a study tool they will not
   trust with something that matters. */
.gate-buttons { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.btn.ghost { background: none; color: var(--accent); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg-soft); filter: none; }

.bar { margin: 1.5rem 0 1rem; }
.bar-track { height: 6px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.bar-text { margin: .5rem 0 0; font-size: .85rem; color: var(--ink-soft); }

.q-meta { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
          text-transform: uppercase; color: var(--ink-soft); }
.q-text { font-size: 1.15rem; line-height: 1.4; margin: 0 0 1rem; }

.q-options { display: flex; flex-direction: column; gap: .5rem; }
.q-option {
  font: inherit; text-align: left; cursor: pointer;
  padding: .7rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.q-option:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-soft); }
.q-option:disabled { cursor: default; opacity: .75; }
/* The right answer is always revealed, including when it was picked —
   the correction is the part that teaches, so it never gets skipped. */
.q-option.is-right { border-color: var(--ok); color: var(--ok); font-weight: 700; opacity: 1; }
.q-option.is-wrong { border-color: var(--bad); color: var(--bad); text-decoration: line-through; opacity: 1; }

.q-feedback:not(:empty) { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.fb-verdict { margin: 0 0 .4rem; font-weight: 800; }
.q-feedback.ok .fb-verdict { color: var(--ok); }
.q-feedback.no .fb-verdict { color: var(--bad); }
.fb-answer { margin: 0 0 .4rem; font-weight: 700; }
.fb-also { margin: 0 0 .9rem; font-size: .9rem; color: var(--ink-soft); }
.q-need { margin: -.6rem 0 .8rem; font-size: .85rem; font-weight: 700; color: var(--accent); }
.q-need:empty { display: none; }

/* A fold, for material that has to be present but must not compete with
   the thing the page is for. <details> rather than script: it works with
   JavaScript off, it is keyboard-operable for free, and find-in-page
   still reaches inside a closed one in current browsers. */
.fold > summary {
  cursor: pointer; font-weight: 700; font-size: 1.05rem;
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "\25B8"; font-size: .8em; color: var(--ink-soft); }
.fold[open] > summary::before { content: "\25BE"; }
.fold > summary:hover { color: var(--accent); }
.fold > *:not(summary) { margin-top: .9rem; }

.find-group { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.find-group:first-child { border-top: 0; padding-top: 0; }
.find-qs { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .95rem; }
.find-where { margin: 0; font-size: .88rem; color: var(--ink-soft); }

/* Progress against the real pass mark, not against an abstract 100%. Two
   segments — learned, and started-but-not-yet-learned — plus a tick at the
   point where a 20-question draw would be expected to pass. */
.bar-track { position: relative; }
.bar-started, .bar-learned {
  position: absolute; top: 0; left: 0; height: 100%; transition: width .3s ease;
}
.bar-started { background: var(--line); }
.bar-learned { background: var(--accent); }
.bar-mark {
  position: absolute; top: -3px; width: 2px; height: calc(100% + 6px);
  background: var(--ink-soft); opacity: .8;
}
.bar-counts { margin: .5rem 0 .15rem; font-size: .85rem; color: var(--ink-soft); }
.bar-verdict { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.bar-verdict.ready { color: var(--ok); font-weight: 700; }

/* Says which test this is, without standing in front of it. */
.notice { margin: 1.25rem 0 .5rem; padding: .8rem 1rem;
          border-left: 3px solid var(--accent); background: var(--bg-soft);
          border-radius: 0 var(--radius) var(--radius) 0; }
.notice > p { margin: 0 0 .4rem; font-size: .92rem; }
.fold.small > summary { font-size: .88rem; font-weight: 600; }
.fold.small > *:not(summary) { margin-top: .5rem; font-size: .9rem; }

/* The numbers, and an "i" that explains them without taking three lines
   of the page to do it. <details> again rather than script: keyboard
   operable for free, and it works with JavaScript off. */
.bar-counts { display: flex; align-items: center; gap: .4rem;
              margin: .5rem 0 0; font-size: .85rem; color: var(--ink-soft); }
/* The panel is anchored to its ROW, not to the icon. Anchoring to the icon
   put a 293px panel at x=262 inside a 375px phone, running 180px off the
   right edge — you had to scroll sideways to read a help popup. The rows
   below are the content column, so left:0/right:0 makes the panel exactly
   as wide as the text it explains, at any screen size. */
.info { display: inline-flex; }
.h2-row, .bar-counts, .mix-row, .lede-row { position: relative; }
.info > summary {
  cursor: pointer; list-style: none;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-soft);
  font-size: .72rem; font-weight: 800; font-style: italic;
  display: flex; align-items: center; justify-content: center;
}
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover { border-color: var(--accent); color: var(--accent); }
.info-body {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 20;
  width: auto; padding: .85rem 1rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.info-body .bar-verdict { margin: 0 0 .6rem; }
.info-mastery { margin: 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }

/* Recall questions: no options to pick from, so the answers are a list and
   the verdict is your own. */
.recall-answers { margin: .5rem 0 1rem; padding-left: 1.2rem;
                  font-size: .95rem; columns: 2; column-gap: 1.5rem; }
.recall-answers li { break-inside: avoid; margin-bottom: .2rem; }
@media (max-width: 520px) { .recall-answers { columns: 1; } }
.recall-judge { display: flex; gap: .6rem; flex-wrap: wrap; }

.recall-entry { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.recall-input {
  font: inherit; flex: 1 1 16rem; min-width: 0;
  padding: .6rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.recall-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-typed { margin: 0 0 .7rem; font-size: .95rem; color: var(--ink-soft); }
.fb-typed::before { content: ""; }

/* The recall control sits with the progress numbers rather than buried in
   an explainer — it is a dial people will want to move mid-session, and
   three clicks to reach a preference is three too many. */
.mix-row { display: flex; align-items: center; gap: .5rem; margin: .45rem 0 0; }
.mix-label { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line);
       border-radius: 999px; overflow: hidden; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span {
  display: block; padding: .22rem .7rem; font-size: .8rem; font-weight: 600;
  color: var(--ink-soft); border-left: 1px solid var(--line);
}
.seg label:first-child span { border-left: 0; }
.seg label:hover span { background: var(--bg-soft); color: var(--accent); }
.seg input:checked + span { background: var(--accent); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.mix-effect { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-soft); }

/* ---- Touch devices have no hover, and pretending otherwise breaks them.
   iOS applies :hover on tap and LEAVES IT THERE until you tap something
   else. So the tap that dismissed one question paints a hover state onto
   whatever lands under that spot next — and the first tap on an element
   whose appearance changes on hover gets swallowed revealing that state
   rather than activating it.
   
   Reported from an iPhone: the fifth option looked different from the rest
   and would not take a tap, then "looked like the previous 3" once another
   option was tapped. Not a rendering quirk — an unpickable answer.
   
   `hover: none` matches devices where hovering is not possible, so pointer
   devices keep every one of these. */
@media (hover: none) {
  .site-menu a:hover { background: none; color: var(--ink); }
  .site-menu a[aria-current="page"]:hover { color: var(--accent); }
  .submenu-toggle:hover { background: none; color: var(--ink); }
  .submenu-toggle[data-section-current]:hover { color: var(--accent); }
  .site-menu .submenu a:hover { background: none; }
  .btn:hover { filter: none; }
  .btn.ghost:hover { background: none; }
  .page-nav a:hover { background: none; border-color: var(--line); }
  .fold > summary:hover { color: inherit; }
  .info > summary:hover { border-color: var(--line); color: var(--ink-soft); }
  .q-option:hover:not(:disabled) { border-color: var(--line); background: var(--bg); }
  .seg label:hover span { background: none; color: var(--ink-soft); }
  .seg input:checked + span { background: var(--accent); color: var(--bg); }
}

/* The heading's own top margin has to move to the ROW. Centring a flex
   line centres each item's MARGIN box, so an h2 carrying 36px above it
   sits 18px lower than the round badge beside it — measured, not guessed,
   after `align-items: center` alone made the badge look dropped from the
   other direction. */
.h2-row { display: flex; align-items: center; gap: .5rem; margin: 2.25rem 0 .6rem; }
.h2-row h2 { margin: 0; }

/* The masthead keeps one short sentence; the fuller statement of purpose
   sits behind the icon beside it. Same bargain as everywhere else on this
   page — say the thing in a breath, and let anyone who wants the whole
   argument ask for it. */
.lede-row { display: flex; align-items: baseline; gap: .5rem; }
.lede-row .lede { margin-bottom: 1.25rem; }

/* ---- Exam mode -----------------------------------------------------
   Plainer than practice on purpose. Practice is a place to be helped;
   this is a place to be measured, and it should not feel like the same
   room. */
.exam-brief { margin: .5rem 0 1.2rem; padding-left: 1.1rem; font-size: .93rem; }
.exam-brief li { margin-bottom: .5rem; }
.exam-note { font-size: .85rem; color: var(--ink-soft); margin: .8rem 0; }
.btn.small { padding: .35rem .75rem; font-size: .85rem; }

.exam-item { border-top: 1px solid var(--line); padding: 1rem 0 .4rem; }
.exam-q { font-weight: 700; margin: 0 0 .5rem; }
.exam-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem;
}
#exam-tally { font-size: .85rem; color: var(--ink-soft); }
.recall-judge .btn.chosen { outline: 2px solid var(--accent); outline-offset: 2px; }

.exam-verdict { font-size: 1.3rem; margin: 0 0 .3rem; }
.exam-verdict.pass { color: var(--ok); }
.exam-verdict.fail { color: var(--bad); }
.exam-big { font-size: 1.05rem; font-weight: 700; margin: 0 0 .8rem; }
.exam-history { list-style: none; padding: 0; font-size: .9rem; }
.exam-history li { padding: .25rem 0; border-bottom: 1px solid var(--line); }
.exam-history li.pass { color: var(--ok); font-weight: 700; }

/* ---- The quiet default --------------------------------------------
   Options off is the shipping state: answer questions, nothing else.
   Three of the four info buttons hide with it. The fourth — beside the
   heading — never hides, because it is the only thing on the page that
   says WHICH test this is, and somebody who filed before 20 October 2025
   sits a different one. A warning that can be switched off is not a
   warning. */
.opt-row { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .9rem; }
.info-ref {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05em; height: 1.05em; border: 1px solid var(--line);
  border-radius: 50%; font-size: .8em; font-style: italic; font-weight: 700;
  color: var(--ink-soft); vertical-align: middle;
}
/* Options off hides the DIALS, not just their explanations. Hiding an info
   circle while leaving the control it explains is the worst of both: a
   knob with no label. Both rows go — Typing and Test — and whatever
   Typing was last set to still applies, silently. */
body:not(.options-on) .bar-counts > .info,
body:not(.options-on) .mix-row { display: none; }

/* ---- Your Eight Answers --------------------------------------------
   Roomier than the quiz. People arrive here to do a small amount of
   careful work with another website open beside them, often on a phone,
   often not reading in their first language. */
.plain { font-size: 1rem; line-height: 1.65; margin: 0 0 .8rem; }
.plain-small { font-size: .88rem; color: var(--ink-soft); margin: .6rem 0 0; }
.step { margin-bottom: 1.1rem; }
.step h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.step-note {
  border-left: 3px solid var(--accent); background: var(--bg-soft);
  padding: .6rem .8rem; margin: 0 0 .9rem; font-size: .95rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#place { font: inherit; padding: .55rem .7rem; border-radius: var(--radius);
         border: 1px solid var(--line); background: var(--bg); color: var(--ink);
         max-width: 100%; }
.field { margin-top: .9rem; }
.field label, .field-q { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.field .recall-input { width: 100%; }
.cap-answer { font-size: 1.15rem; font-weight: 800; color: var(--accent); margin: 0; }

.sheet { border: 2px solid var(--accent); }
.sheet-list { margin: 1rem 0; }
.sheet-list dt { font-weight: 700; font-size: .92rem; margin-top: .8rem; }
.sheet-list dd { margin: .15rem 0 0; font-size: 1.05rem; }
.sheet-list dd.empty { color: var(--ink-soft); font-style: italic; font-size: .92rem; }

/* Printing gives you the sheet and nothing else — the steps have been
   done by then, and a printout of instructions is not what you carry. */
@media print {
  header, .page-nav, .site-menu, footer, .source,
  #place-step, #steps, .card:not(.sheet), .sheet .btn { display: none; }
  .sheet { border: 0; padding: 0; }
  body { background: #fff; color: #000; }
}
.find-go { margin: 1rem 0 .2rem; }
/* How to find the answer once the other site is open. It sits under the
   button because that is the moment it is needed. */
.step-how { margin: .8rem 0 0; font-size: .95rem; line-height: 1.6;
            color: var(--ink-soft); }
.step-tip { margin: .6rem 0 0; font-size: .95rem; line-height: 1.6;
            border-left: 3px solid var(--ok); background: var(--bg-soft);
            padding: .55rem .75rem; border-radius: 0 var(--radius) var(--radius) 0; }

/* Grouped fields, so returning from another site lands on the boxes. */
.fields { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.fields-head { margin: 0 0 .6rem; font-weight: 800; font-size: .95rem; }

/* Appears only after you have gone out to another site. Fixed to the
   bottom so it is reachable wherever the page happens to be scrolled. */
.return-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  display: flex; justify-content: center;
}
.return-bar[hidden] { display: none; }
@media print { .return-bar { display: none; } }
.step-back { margin: .55rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.sheet-safe { font-size: .95rem; line-height: 1.6; margin: 1rem 0 .9rem;
              border-left: 3px solid var(--ok); background: var(--bg-soft);
              padding: .55rem .75rem; border-radius: 0 var(--radius) var(--radius) 0; }
.sheet-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.clear-link { font: inherit; font-size: .85rem; background: none; border: 0;
              padding: 0; color: var(--ink-soft); text-decoration: underline;
              cursor: pointer; }
.clear-link:hover { color: var(--bad); }
@media (hover: none) { .clear-link:hover { color: var(--ink-soft); } }
.missed-eight { border-left: 3px solid var(--warn); background: var(--bg-soft);
                padding: .7rem .9rem; margin: 1rem 0; border-radius: 0 var(--radius) var(--radius) 0; }
.missed-eight ul { margin: .4rem 0 .6rem; padding-left: 1.1rem; font-size: .95rem; }
.missed-eight p { margin: 0; font-size: .95rem; }
.missed-eight { border-left: 3px solid var(--warn); background: var(--bg-soft);
                padding: .7rem .9rem; margin: 1rem 0;
                border-radius: 0 var(--radius) var(--radius) 0; }
.missed-eight ul { margin: .4rem 0 .6rem; padding-left: 1.1rem; font-size: .95rem; }
.missed-eight p { margin: 0; font-size: .95rem; }

/* --- Find Your Next Step ------------------------------------------- */

/* Help mode: one flag governs every explainer on the page, so it reads
   clean for someone returning without losing the scaffolding for someone
   new. Ported from fl.unhackdemocracy.us, where it earned its place.
   Hidden by default and revealed by the attribute rather than the other
   way round — off is the common case, so the default render is already
   correct and nothing has to disappear after paint. */
.help { display: none; }
[data-help-mode="on"] .help {
  display: block;
  margin: -.35rem 0 1.1rem;
  padding: .7rem .85rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
  font-size: .94rem;
}

.help-row {
  margin: 1.5rem 0 .5rem;
  font-size: .93rem;
  color: var(--ink-soft);
}
.help-row label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }

.diagnosis {
  margin-top: 1.75rem;
  padding: 1.1rem 1.2rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.diagnosis h2 { margin: 0 0 .6rem; font-size: 1.28rem; line-height: 1.3; }
.diagnosis p { margin: .6rem 0 0; }

.progress {
  margin: 1.4rem 0 .3rem;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stage { min-height: 16rem; }
.stage .q { margin: .2rem 0 .9rem; font-size: 1.32rem; line-height: 1.32; }

.options { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.option {
  text-align: left;
  padding: .85rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.option:hover, .option:focus-visible {
  border-color: var(--accent);
  background: var(--bg-soft);
}

.stage textarea {
  width: 100%;
  padding: .75rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  resize: vertical;
}

.btn-primary {
  display: inline-block;
  padding: .8rem 1.15rem;
  font: inherit;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover, .btn-primary:focus-visible { filter: brightness(1.1); }

.btn-link {
  display: inline-block;
  margin: .9rem .9rem 0 0;
  padding: 0;
  font: inherit;
  font-size: .93rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.echo {
  margin: .2rem 0 1.2rem;
  padding-left: .85rem;
  border-left: 3px solid var(--line);
  color: var(--ink-soft);
}

.eyebrow {
  margin: 0 0 .25rem;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}
.pick-title { margin: 0 0 .5rem; font-size: 1.5rem; line-height: 1.25; }
.pick-blurb { margin: 0 0 1.1rem; font-size: 1.05rem; }

.why {
  margin: 0 0 1.3rem;
  padding: .85rem 1rem;
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.why-lead { margin: 0 0 .4rem; font-weight: 600; font-size: .95rem; }
.why ul { margin: 0; padding-left: 1.15rem; color: var(--ink-soft); }
.why li { margin: .2rem 0; }

.source { margin: 1rem 0 0; font-size: .9rem; color: var(--ink-soft); }

.smallprint {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  color: var(--ink-soft);
}
.smallprint h2 { font-size: 1rem; margin: 0 0 .6rem; color: var(--ink); }
.smallprint ul { margin: 0; padding-left: 1.15rem; }
.smallprint li { margin: .4rem 0; }

/* The opener is a hook, and the shape of it is deliberate: what you are
   about to do, not what is wrong. Leading with the problem was the first
   draft and it argued against the project's own thesis — the job is to
   attack helplessness, and a paragraph about how overwhelming it all is
   supplies more of the thing it was trying to cure. */
.opener {
  margin-top: 1.75rem;
  padding: 1.25rem 1.3rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.opener h2 { margin: 0 0 .55rem; font-size: 1.6rem; line-height: 1.2; }
.opener p { margin: .55rem 0 0; }
.opener-lead { font-size: 1.08rem; }
.opener-door {
  margin-top: .9rem !important;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  color: var(--ink-soft);
}

.action-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.action-row .btn-primary { flex: 0 1 auto; }
.btn-done {
  color: var(--accent) !important;
  background: transparent !important;
  border-color: var(--accent) !important;
}
.btn-done:hover, .btn-done:focus-visible { background: var(--bg-soft) !important; filter: none; }

.tally {
  margin: 0 0 1rem;
  font-weight: 600;
  color: var(--ok);
}

/* An info disclosure with its label beside it, rather than a bare i
   nobody knows to press. Same affordance as the masthead's. */
.info-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.info-block { position: relative; }
.info-label { font-size: .92rem; color: var(--ink-soft); }
.info-block[open] > .info-body,
.info-body {
  position: absolute; z-index: 5; left: 0; top: 2.1rem;
  width: min(30rem, 78vw);
  padding: .9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  font-size: .93rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.info-body ul { margin: 0; padding-left: 1.1rem; }
.info-body li { margin: .45rem 0; }
.guide-name { margin: 0 0 .5rem; font-weight: 600; color: var(--ink); }
.info-body .source { margin: .7rem 0 0; font-size: .87rem; }

.q-sub { margin: -.55rem 0 .9rem; color: var(--ink-soft); font-size: .95rem; }

/* Multi-select: the picked state has to be visible at a glance, because
   several can be on at once and an unlit row of six looks like a menu. */
.option-multi[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--bg-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}
.btn-primary[disabled] { opacity: .45; cursor: not-allowed; }

/* The guide button names the guide, so it has to fit a real title. */
.btn-guide {
  padding: 1rem 1.3rem;
  font-size: 1.02rem;
  line-height: 1.3;
  text-align: left;
  max-width: 100%;
}

.btn-link-spaced { margin-left: 1.4rem; }

/* --- The whole shelf ----------------------------------------------- */

.counts { margin: 1.5rem 0 0; }
.counts p { margin: .5rem 0; }
.counts-detail { font-size: .94rem; color: var(--ink-soft); }

.the-test {
  margin: 1.6rem 0 .5rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.the-test h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.the-test p { margin: .5rem 0 0; font-size: .96rem; }

.shelf-group { margin-top: 2.2rem; }
.shelf-group h3 {
  margin: 0 0 .2rem; font-size: 1.22rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.group-note { margin: .45rem 0 1rem; font-size: .92rem; color: var(--ink-soft); }

.shelf-card {
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.shelf-action { margin: 0 0 .45rem; font-size: 1.08rem; line-height: 1.35; }
.shelf-blurb { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .96rem; }
.shelf-meta {
  margin: 0 0 .8rem; font-size: .86rem; color: var(--ink-soft);
  letter-spacing: .01em;
}
.shelf-link {
  display: inline-block; padding: .55rem .8rem;
  font-size: .93rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
  border: 1px solid var(--accent); border-radius: var(--radius);
}
.shelf-link:hover, .shelf-link:focus-visible { background: var(--bg-soft); }

.shelf-outline { margin-top: .75rem; }
.shelf-outline > summary {
  cursor: pointer; font-size: .9rem; color: var(--accent);
}
.shelf-outline-body {
  margin-top: .55rem; padding: .75rem .9rem;
  background: var(--bg-soft); border-radius: var(--radius);
  font-size: .92rem; color: var(--ink-soft);
}
.shelf-outline-body ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.shelf-outline-body li { margin: .3rem 0; }

/* The opener collapses after the first visit. It is a disclosure rather
   than a static banner because on a second visit it is a heading someone
   has already read, and the questions are what they came back for. */
details.opener > summary {
  display: flex; align-items: baseline; gap: .55rem;
  cursor: pointer; list-style: none;
}
details.opener > summary::-webkit-details-marker { display: none; }
details.opener > summary::before {
  content: "\203A";
  display: inline-block;
  font-size: 1.5rem; line-height: 1; color: var(--accent);
  transition: transform .15s ease;
  transform: translateY(.1rem);
}
details.opener[open] > summary::before { transform: rotate(90deg) translateX(.1rem); }
.opener-title { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.opener-body > p:first-child { margin-top: .7rem; }

/* The flow, drawn once. It does two jobs: it tells a newcomer what is
   about to happen to them, which is what makes the opener a hook rather
   than a claim, and it shows that the last two steps are a loop rather
   than an ending. Inline SVG on currentColor so it themes for free. */
.flow { margin: 1.1rem 0 0; }
.flow-g rect { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.flow-g text {
  fill: var(--ink); font: 600 15px/1 system-ui, -apple-system, sans-serif;
  text-anchor: middle; dominant-baseline: middle;
}
.flow-g .flow-note {
  fill: var(--ink-soft); font: 400 12px/1 system-ui, -apple-system, sans-serif;
}
.flow-arrow, .flow-loop {
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round;
}
.flow-arrow, .flow-loop { color: var(--accent); }  /* marker fill follows currentColor */
.flow-loop { stroke-dasharray: 4 3; opacity: .85; }

.record { margin: 1.4rem 0 0; }
.record-panel > summary {
  cursor: pointer; font-weight: 600; color: var(--ok); font-size: .96rem;
}
.record-body {
  margin-top: .6rem; padding: .85rem 1rem;
  background: var(--bg-soft); border-radius: var(--radius);
}
.record-body ul { margin: 0; padding-left: 1.1rem; }
.record-body li { margin: .35rem 0; font-size: .94rem; }
.record-date { display: block; font-size: .82rem; color: var(--ink-soft); }
.record-note { margin: .8rem 0 .2rem; font-size: .87rem; color: var(--ink-soft); }

/* A wrapped menu label should read as one entry, not two. Hanging indent
   so the second line sits under the first word rather than under the
   bullet position, which made it look like a separate item. */
.submenu a { padding-left: 2.1rem; text-indent: -0.9rem; }

.btn-quiet {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
}
.btn-quiet:hover, .btn-quiet:focus-visible { border-color: var(--accent); }

/* Our own how-to pages: long-form prose, so they get reading measures and
   headings that separate sections rather than decorate them. */
.howto h2 { margin: .3rem 0 .6rem; font-size: 1.7rem; line-height: 1.22; }
.howto h3 {
  margin: 2rem 0 .6rem; font-size: 1.2rem; line-height: 1.3;
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.howto .lede { font-size: 1.1rem; }
.howto p { margin: .8rem 0; }
.howto ol, .howto ul { margin: .8rem 0; padding-left: 1.3rem; }
.howto li { margin: .5rem 0; }
.howto code {
  background: var(--bg-soft); padding: .12rem .35rem;
  border-radius: 5px; font-size: .92em;
}
.bodies li { margin: .7rem 0; }
.aside {
  padding: .8rem 1rem; background: var(--bg-soft);
  border-radius: var(--radius); color: var(--ink-soft); font-size: .96rem;
}
.checklist li { margin: .45rem 0; }
.howto-back { margin-top: 2.2rem; font-size: .95rem; }

/* The home page's one call to action. Above the hero art on purpose: the
   art is a 1:1 image and on a phone it is a long scroll, so anything
   below it is effectively a second page. */
.card-lead {
  margin-top: 2rem;
  border-color: var(--accent);
  background: var(--bg-soft);
}
.card-lead h3 { margin-top: 0; font-size: 1.3rem; }