/* 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. Centering a flex
   line centers 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; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .1rem 0 .9rem; }
.opt-row .btn { white-space: nowrap; }
.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, .signin, .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; }

/* --- The library ---------------------------------------------------
   Leather is faked with three things and no images: a cross-spine
   gradient so the book reads as round rather than flat, a very fine
   repeating gradient for grain, and raised bands near the ends. Gilt is
   a gradient with a dark edge under it, because real gold leaf is bright
   metal over a debossed line and flat yellow never reads as gold. */

.library-fonts { font-family: "EB Garamond", Georgia, serif; }

.desk {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: 1.75rem; padding: 1.15rem 1.3rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.desk-words { flex: 1 1 18rem; min-width: 0; }
.desk h2 {
  margin: 0 0 .4rem; font-size: 1.5rem; line-height: 1.2;
  font-family: "EB Garamond", Georgia, serif; font-weight: 600;
}
.desk p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.desk-actions { display: flex; align-items: center; gap: .75rem; }
.desk-ask { white-space: nowrap; }

.shelf-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 1.6rem 0 .7rem; font-size: .9rem;
}
.controls-label { color: var(--ink-soft); margin-right: .2rem; }
.shelf-controls button {
  font: inherit; padding: .3rem .7rem; cursor: pointer;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
}
.shelf-controls button[aria-pressed="true"] {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
}

/* The case. Dark on both themes on purpose — a library is a dark room
   with light on the spines, and a white one looks like a spreadsheet. */
/* The case sits in a frame so the arrows can hang over its edges without
   being inside the thing that scrolls. */
.shelf-frame { position: relative; }
.shelf-nav {
  position: absolute; top: 0; bottom: 15px; width: 46px; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; padding: 0;
  color: #f0e3cb; font-size: 26px; line-height: 1;
  transition: opacity .2s;
}
.shelf-nav[hidden] { display: none; }
.shelf-nav-prev { left: 0;  border-radius: 10px 0 0 0;
  background: linear-gradient(90deg, #4f3a26d9 30%, #4f3a2600 100%); }
.shelf-nav-next { right: 0; border-radius: 0 10px 0 0;
  background: linear-gradient(270deg, #4f3a26d9 30%, #4f3a2600 100%); }
.shelf-nav:hover { color: #fff; }
.shelf-nav svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px #000); }

.shelf-case {
  --case: #967350;
  position: relative; border-radius: 10px; padding: 1.4rem 1.1rem .5rem;
  /* Wood: irregular grain rather than an even stripe, a warm honey-brown
     rather than near-black, and only a soft shadow at the top, so the
     shelf reads as lit from the room instead of unlit. */
  background:
    linear-gradient(180deg, #00000026 0%, #0000 22%, #0000 78%, #0000002e 100%),
    repeating-linear-gradient(90deg,
      #00000010 0 2px, #0000 2px 7px, #ffffff0a 7px 8px, #0000 8px 17px,
      #00000014 17px 19px, #0000 19px 29px),
    linear-gradient(180deg, #a8845c 0%, #967350 45%, #82623f 100%);
  box-shadow: inset 0 9px 18px -12px #0008, 0 2px 14px #0003;
  overflow-x: auto; overflow-y: hidden; perspective: 1400px;
  /* The scrollbar was a gray browser bar laid across the wood, right where
     the shelf edge should be. Now that the arrows exist it has nothing
     left to tell anyone, so it goes and the board is unbroken. Dragging,
     swiping, trackpads and keyboards all still scroll. */
  scrollbar-width: none;
}
.shelf-case::-webkit-scrollbar { height: 0; width: 0; }
.shelf-row {
  display: flex; align-items: flex-end; gap: 3px;
  min-height: 218px; padding-bottom: 2px;
  transform-style: preserve-3d;
}
/* Outside the scrolling case. Inside it, the board was only as wide as
   the visible area, so it ran out from under the books as soon as you
   scrolled — the shelf edge stopped a few books short. A shelf edge is a
   fixed piece of furniture; it should not move when you look along it. */
.shelf-board {
  height: 15px; border-radius: 0 0 8px 8px;
  background:
    repeating-linear-gradient(90deg,
      #00000012 0 3px, #0000 3px 11px, #ffffff0c 11px 12px, #0000 12px 23px),
    linear-gradient(180deg, #c29d70 0%, #a38058 40%, #75583a 100%);
  box-shadow: 0 5px 12px -4px #0007, inset 0 1px 0 #ffffff26;
}
.shelf-hint { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.shelf-noscript { color: #e8dcc8; padding: 1rem; }

/* A book. Width is the time it asks of you; height means nothing. */
.book {
  --leather: #6e3f1f;
  position: relative; flex: none; padding: 0; cursor: pointer;
  width: 48px; height: var(--tall, 186px);
  background: none; border: 0;
  transform-style: preserve-3d; transition: transform .45s ease, margin .45s ease;
  transform-origin: bottom center;
}
.book-t1 { width: 44px; } .book-t2 { width: 60px; }
.book-t3 { width: 80px; } .book-t4 { width: 98px; }

.spine, .face {
  position: absolute; inset: 0; border-radius: 3px 5px 5px 3px;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, #0008 0%, #0000 14%, #ffffff14 32%, #0000 62%, #0007 100%),
    repeating-linear-gradient(0deg, #0000000d 0 2px, #0000 2px 5px),
    var(--leather);
  box-shadow: inset 0 0 0 1px #0004, 2px 2px 7px -2px #000a;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; overflow: hidden;
}
/* The cover is hinged on the spine's outer edge and folded back 90°, so
   it is a real cover — much wider than the spine, the way a book is —
   rather than a second panel the same width. Turning the book swings it
   into view. */
.face {
  visibility: hidden;          /* only the open book needs one — see below */
  left: 100%; right: auto; width: 132px;
  transform-origin: left center;
  transform: rotateY(-90deg);
  border-radius: 2px 6px 6px 2px;
  background:
    linear-gradient(105deg, #0007 0%, #ffffff10 8%, #0000 30%, #0000 78%, #0005 100%),
    repeating-linear-gradient(0deg, #0000000d 0 2px, #0000 2px 5px),
    var(--leather);
  box-shadow: inset 0 0 0 1px #0004, inset 0 0 28px -6px #0007;
}
/* A blind-tooled border, the way a bound cover is finished. */
.face::after {
  content: ""; position: absolute; inset: 9px; border-radius: 2px;
  border: 1px solid #d9b45e3d;
  box-shadow: inset 0 0 0 1px #00000030;
}

.band {
  position: absolute; left: 0; right: 0; height: 9px;
  background: linear-gradient(180deg, #ffffff1f, #0006);
  box-shadow: 0 1px 0 #0006, 0 -1px 0 #0006;
}
.band-top { top: 26px; } .band-bottom { bottom: 26px; }

.gilt-emblem, .face-emblem, .legend-emblem, .syn-emblem {
  color: #d9b45e;
  filter: drop-shadow(0 1px 0 #00000080);
}
/* A gilt device sits on a pasted label, not straight on the hide. */
.gilt-emblem {
  width: 15px; height: 15px; position: absolute; bottom: 9px;
  padding: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #ffffff33, #ffffff14);
  box-shadow: inset 0 0 0 1px #d9b45e40, 0 1px 2px #0005;
}
.book-t1 .gilt-emblem { width: 13px; height: 13px; padding: 2px; }

.spine-title {
  writing-mode: vertical-rl; text-orientation: mixed;
  max-height: calc(100% - 94px); overflow: hidden;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 11px; line-height: 1.12; letter-spacing: .015em;
  text-align: center;
  /* Nearly flat gold. It used to fade to dark bronze top to bottom, so
     the end of every title sank into the leather. */
  background: linear-gradient(180deg, #fbe9b8 0%, #f0d48a 50%, #e6c26a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 1px #000000b3;
}
.book-t1 .spine-title { font-size: 10px; }

/* House editions get a gilt rule down each edge. */
.is-ours .spine::before, .is-ours .spine::after {
  content: ""; position: absolute; top: 14px; bottom: 14px; width: 1px;
  background: linear-gradient(180deg, #0000, #d9b45e88, #0000);
}
.is-ours .spine::before { left: 4px; } .is-ours .spine::after { right: 4px; }

/* A pamphlet is a thin thing: no bands, paler, no gilt edging. */
.is-pamphlet .spine { filter: saturate(.7) brightness(1.12); }
.is-pamphlet .band { display: none; }

/* Pulled out and turned toward you. One animation, and it is the most
   library-ish moment in the thing.

   Only the open book gets a cover in the scene. Every book carrying a
   132px panel folded back into shared 3D space meant each one intersected
   its neighbors — which is what the speckled overlap across the spines
   was, on every platform. */
.book.is-open .face { visibility: visible; }
.book.is-open {
  transform: translateY(-14px) rotateY(52deg) scale(1.1); z-index: 5;
  transform-origin: left bottom;
  margin-right: 118px; margin-left: 8px;
}
.book.is-open .spine-title { opacity: .3; }
.face-inner {
  display: flex; flex-direction: column; align-items: center; gap: .34rem;
  padding: .85rem .7rem; text-align: center; width: 100%;
  justify-content: center;
}
.face-emblem { width: 22px; height: 22px; flex: none; }
.face-title {
  font-family: "IM Fell English", Georgia, serif;
  font-size: 13.5px; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  background: linear-gradient(180deg, #f3dca6, #c9a24e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.face-rule { width: 52%; height: 1px; background: #d9b45e66; }
.face-meta { font-size: 10.5px; color: #e6d6b0b0; font-family: "EB Garamond", serif; }
/* A stable target for the synopsis: the book moves when it opens, so a
   second click on where it used to be landed on the case and read as
   "close". A button on the cover cannot move out from under you. */
.face-open {
  flex: none; white-space: nowrap;
  margin-top: .3rem; padding: .28rem .62rem; border-radius: 3px;
  font-family: "EB Garamond", Georgia, serif; font-size: 11px;
  color: #2a2014; background: linear-gradient(180deg, #e7c878, #c9a24e);
  box-shadow: 0 1px 0 #8d6b23;
}

.legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: 1.5rem 0 0; font-size: .9rem; color: var(--ink-soft);
}
.legend-item { display: flex; align-items: center; gap: .45rem; }
.legend-item b { color: var(--ink); font-weight: 600; }
.legend-swatch {
  width: 22px; height: 22px; border-radius: 3px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--leather); box-shadow: inset 0 0 0 1px #0005;
}
.legend-emblem { width: 13px; height: 13px; }

/* The synopsis */
/* [hidden] sets display:none, but a class rule with display:flex beats
   it on specificity — so the empty dialog was showing on page load. */
.synopsis[hidden] { display: none; }
.synopsis {
  position: fixed; inset: 0; z-index: 40; display: flex;
  align-items: center; justify-content: center; padding: 1.1rem;
  background: #0b0906cc; backdrop-filter: blur(2px);
}
.syn-card {
  position: relative; width: min(34rem, 100%); max-height: 84vh; overflow: auto;
  padding: 1.5rem 1.6rem; border-radius: 8px;
  background: linear-gradient(180deg, #fdfaf2, #f3ecdc);
  color: #24201a; box-shadow: 0 18px 50px #000a;
  font-family: "EB Garamond", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  .syn-card { background: linear-gradient(180deg, #221d16, #1a1611); color: #eee3cd; }
}
.syn-close {
  position: absolute; top: .5rem; right: .7rem; font-size: 1.5rem; line-height: 1;
  background: none; border: 0; cursor: pointer; color: inherit; opacity: .55;
}
.syn-close:hover { opacity: 1; }
.syn-title {
  margin: 0 0 .3rem; font-family: "IM Fell English", Georgia, serif;
  font-size: 1.6rem; line-height: 1.18; font-weight: 400;
}
.syn-meta { margin: 0 0 1rem; font-size: .9rem; opacity: .72;
  display: flex; align-items: center; gap: .4rem; }
.syn-emblem { width: 15px; height: 15px; }
.syn-action { margin: 0 0 1rem; font-size: 1.12rem; font-style: italic; }
.syn-outline { margin: 0 0 1.3rem; padding-left: 1.15rem; font-size: .97rem; }
.syn-outline li { margin: .32rem 0; }
.syn-unread { font-size: .97rem; opacity: .8; margin-bottom: 1.3rem; }
.take-out {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.1rem; border-radius: 6px; text-decoration: none;
  font-weight: 600; font-size: 1rem;
  color: #2a2014; background: linear-gradient(180deg, #e7c878, #c9a24e);
  box-shadow: 0 2px 0 #8d6b23, 0 4px 10px #0004;
}
.take-out svg { width: 19px; height: 19px; }
.take-out:hover { filter: brightness(1.06); }
body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .shelf-row { min-height: 190px; }
  .shelf-nav { width: 34px; }
  .book { height: calc(var(--tall, 186px) * .86); }
  .book.is-open { transform: translateY(-8px) rotateY(48deg) scale(1.05); margin-right: 96px; }
  .face { width: 112px; }
  /* In a column, `flex: 1 1 18rem` on the words made the box grow into a
     tall empty panel. Stacked, nothing should stretch. */
  .desk { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .desk-words { flex: none; }
  .desk-actions { width: 100%; }
  .desk-ask { flex: 1 1 auto; text-align: center; }
}

/* The open book's controls, in ordinary flow. They are not on the cover
   because a cover rotated in 3D is not reliably hit-testable: at the
   button's own center the browser reports the shelf behind it, on desktop
   and on a phone alike. Real covers have no buttons on them anyway. */
.book-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  justify-content: space-between;
  margin: .7rem 0 0; padding: .7rem .9rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.book-bar[hidden] { display: none; }
.bar-words { min-width: 0; font-family: "EB Garamond", Georgia, serif; }
.bar-words b { display: block; font-size: 1.05rem; line-height: 1.25; }
.bar-words span { font-size: .87rem; color: var(--ink-soft); }
.bar-buttons { display: flex; gap: .5rem; flex: none; }
.bar-btn {
  font: inherit; font-size: .92rem; padding: .45rem .9rem; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--ink);
}
.bar-btn:hover { border-color: var(--accent); }
.bar-btn-gilt {
  font-weight: 600; color: #2a2014; border-color: #b8933f;
  background: linear-gradient(180deg, #e7c878, #c9a24e);
  box-shadow: 0 1px 0 #8d6b23;
}
.bar-btn-gilt:hover { filter: brightness(1.06); border-color: #8d6b23; }

/* The build stamp. Deliberately quiet — it exists so two people testing
   together can tell whether they are looking at the same thing. */
.build-stamp {
  margin-left: .5rem; font-size: .78rem; color: var(--ink-soft);
  opacity: .6; font-variant-numeric: tabular-nums;
}

/* ---- Home page expanders (2026-09-23, Bill's order) -----------------
   Label + i, closed by default, opening IN FLOW. The site's other info
   panels float, which suits a sentence of help; these hold a quote and a
   whole section with buttons in it, so they push the page down instead of
   covering the shelf. The painting below is never inside one. */
.expander { margin: 1.1rem 0 0; }
.expander > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .55rem;
}
.expander > summary::-webkit-details-marker { display: none; }
.expander-title { margin: 0; font-size: 1.15rem; }
.expander-label { font-size: .92rem; color: var(--ink-soft); }
.i-dot {
  flex: 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;
}
.expander > summary:hover .i-dot,
.expander[open] > summary .i-dot { border-color: var(--accent); color: var(--accent); }
.expander > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.expander-body { margin-top: .9rem; }
.expander-body .epigraph { margin-bottom: .4rem; }
.expander-body .legend { margin-top: 0; }
.expander-body .desk { margin-top: 1.2rem; }

/* Pulled out of its old place under the heading, the shelf now leads, so
   it gets the breathing room the heading used to give it. */
main > .shelf-frame { margin-top: 1.4rem; }

/* "Order by" on one line, phones included — it wrapped at 375px with the
   old labels. */
.expander-body .shelf-controls { flex-wrap: nowrap; margin: 1.2rem 0 0; white-space: nowrap; }
@media (max-width: 400px) {
  .expander-body .shelf-controls { gap: .3rem; font-size: .84rem; }
  .expander-body .shelf-controls button { padding: .28rem .55rem; }
}
/* The painting follows the closed expander directly now; give it air. */
main + .hero-art { margin-top: 1.6rem; }

/* The top row: the breadcrumb on inner pages, and Join on every page. */
.topline { margin: 0 0 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topline .page-nav { margin: 0; }
.signin {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 .9rem;
  border: 1px solid var(--accent); border-radius: 999px; color: var(--accent);
  font-size: .92rem; font-weight: 600; text-decoration: none;
}
.signin:hover, .signin:focus-visible { background: var(--bg-soft); }
.signin[hidden] { display: none; }

/* Achievement badges — Citizenship Basics first (civics-badge.js). */
.badge-card { margin-top: 1.5rem; }
.badge-head { display: flex; align-items: center; gap: 1rem; }
.badge-emblem svg { width: 56px; height: 56px; display: block; filter: grayscale(1) opacity(.45); transition: filter .3s; }
.badge-card.is-earned .badge-emblem svg { filter: none; }
.badge-head h3 { margin: 0; }
.badge-sub { margin: .15rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.badge-steps { list-style: none; margin: 1rem 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.badge-steps li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; }
.badge-mark { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .1rem; border-radius: 50%;
  border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: #fff; }
.badge-steps li.done .badge-mark { background: var(--ok); border-color: var(--ok); }
.badge-note { margin: .75rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* End of a practice session: review what was missed, or start again. */
.session-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* Before the practice exam: where you stand against the practice goal. */
.exam-readiness { margin: 1rem 0 .25rem; padding: .7rem .9rem; border-radius: var(--radius);
  background: var(--bg-soft); border: 1px solid var(--line); line-height: 1.5; }
.exam-readiness.ready { border-color: var(--ok); }