/* Citizenship Companion — companion website for the printed study guide.
   Values here come straight from the design (Citizenship Companion.dc.html).
   The audience skews older and often studies on a phone, so every tappable
   thing is at least 44px tall and most are far bigger. */

:root {
  --ink: #1d2433;
  --muted: #5b6474;
  --label: #5f6878;

  --blue: #24437e;
  --blue-dark: #1a3260;
  --blue-tint: #eef2fa;
  --blue-tint-2: #e7edf8;
  --blue-tint-3: #e0e8f7;
  --blue-line: #9db3d8;
  --blue-line-2: #c3d0e8;

  --shell: #e7e2d8;
  --page: #f7f4ee;
  --sand: #f1ede4;
  --sand-2: #eae5da;
  --sand-3: #e2ddd1;
  --line: #ddd7cc;
  --line-soft: #eee9de;
  --dash: #b9b1a1;
  --stone: #6b6455;
  --stone-dark: #4a4437;

  --amber-bg: #fdf1de;
  --amber-line: #e0b070;
  --amber-ink: #8a5518;
  --amber-ink-2: #5c3c10;
  --amber-ink-3: #7a5a2c;

  /* Old Glory Red. One red does both duty as the accent and as the error
     colour — errors carry a tinted panel and a heavy left rule, so they never
     read as decoration. */
  --red: #b22234;
  --red-dark: #8f1b2a;
  --red-bg: #fceff1;
  --red-line: #dda6ae;
  --red-ink: #6d2730;

  --green-bg: #e8f0e6;
  --green-line: #a8c3a0;
  --green-ink: #3d6135;

  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--shell);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* The tap targets are large and full of text; without this a slightly long
     press selects the label instead of pressing the button. */
  -webkit-user-select: none;
  user-select: none;
}

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

/* Screen headings take focus on navigation so a screen change is announced,
   but the focus ring on a heading would look like a mistake. */
h1:focus-visible,
[data-screen]:focus-visible { outline: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--blue);
  padding: 14px 20px;
  font: 700 17px/1 var(--sans);
  border-radius: 0 0 8px 0;
  z-index: 10;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- site header ----------

   Full width, so the page is anchored to the window instead of floating as a
   card in a field of tan. It carries the book's name onto every screen, which
   matters for anyone arriving from the QR code in Chapter 9 — they can land
   anywhere and still see what this belongs to. */

.sitehead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--blue);
}
.sitehead__inner {
  /* matches .screen--hub, so the crest lines up with the hub heading on the
     screen most people land on */
  max-width: 840px;
  margin: 0 auto;
  padding: 0 22px;
}
.sitehead__home {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  color: #fff;
}
.sitehead__home:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sitehead__mark { flex: none; display: flex; color: #fff; }
.sitehead__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sitehead__eyebrow {
  font: 600 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.sitehead__title {
  font: 700 19px/1.25 var(--serif);
  color: #fff;
  text-wrap: pretty;
}

/* ---------- shell ---------- */

.shell {
  min-height: 100vh;
  background: var(--page);
  display: flex;
  flex-direction: column;
}

.body { flex: 1; padding: 0 0 8px; }

.screen {
  max-width: 560px;
  margin: 0 auto;
  padding: 34px 22px 48px;
}
.screen--mid { max-width: 620px; padding: 20px 22px 34px; }
.screen--hub { max-width: 840px; padding: 32px 22px 44px; }
.screen--list { max-width: 760px; padding: 20px 22px 34px; }
.screen--library { max-width: 700px; padding: 20px 22px 40px; }
.screen--gate { padding: 20px 22px 40px; }

/* ---------- screen head ---------- */

.screenhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Replaces the old full-width blue banner. It sits inside the content, so it
   reads as part of the page rather than as a notification to dismiss. */
.setchip {
  min-height: 44px;
  margin: 0 0 14px;
  padding: 8px 14px;
  background: var(--blue-tint);
  border: 1px solid var(--blue-line-2);
  border-radius: 999px;
  color: var(--blue);
  font: 600 15px/1.2 var(--sans);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.setchip:hover { background: var(--blue-tint-3); }
.setchip__change { font-weight: 700; text-decoration: underline; }

/* ---------- type ---------- */

.h1 {
  font: 700 33px/1.25 var(--serif);
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.h1--hub { font-size: 32px; line-height: 1.22; margin-bottom: 14px; }
.h1--hub::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 14px;
  background: var(--blue);
}
.h1--list { font-size: 27px; margin: 0 0 18px; }
.h1--quiz { font-size: 28px; margin: 0; }
.h1--gate { font-size: 28px; margin: 0 0 12px; }

.lede {
  font: 400 18px/1.5 var(--sans);
  color: var(--muted);
  margin: 0 0 28px;
  text-wrap: pretty;
}
.lede--quiz { line-height: 1.55; margin: 0; }
.lede--gate { line-height: 1.55; margin: 0 0 26px; }
.lede--library { font-size: 17px; margin: 0 0 24px; }
.lede--hub { margin: 0 0 24px; }

.fineprint {
  font: 400 16px/1.5 var(--sans);
  color: var(--muted);
  margin: 26px 0 0;
}

.eyebrow {
  font: 700 13px/1 var(--sans);
  letter-spacing: .1em;
  color: var(--label);
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 15px;
  height: 3px;
  background: var(--blue);
  opacity: .55;
}
.eyebrow--warn { color: var(--amber-ink); }
.eyebrow--warn::before { background: var(--amber-ink); }

/* ---------- big choice buttons ---------- */

.choices {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.choice {
  min-height: 78px;
  padding: 16px 22px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 10px;
  font: 600 21px/1.3 var(--sans);
  color: var(--ink);
}
.choice:hover { background: var(--blue-tint); }

.linkback {
  min-height: 52px;
  background: none;
  border: none;
  padding: 0 0 14px;
  font: 600 17px/1.3 var(--sans);
  color: var(--blue);
  text-decoration: underline;
}

/* ---------- hub ---------- */

/* A large crest behind the page, at the weight of a watermark on headed
   paper. It sits under the content on every screen, in the cream margin the
   full-bleed layout leaves at laptop width. Hidden on narrow screens, where
   there is no margin for it to occupy and it would only muddy the text. */
.body { position: relative; }
.body::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  height: 345px;
  pointer-events: none;
  opacity: .05;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M3 3 H37 V25 C37 36 20 43 20 43 C20 43 3 36 3 25 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)' fill='%2324437e'%3E%3Crect x='0' y='0' width='40' height='16'/%3E%3Crect x='5' y='16' width='2.2' height='30' opacity='.55'/%3E%3Crect x='10.4' y='16' width='2.2' height='30' opacity='.55'/%3E%3Crect x='15.8' y='16' width='2.2' height='30' opacity='.55'/%3E%3Crect x='21.2' y='16' width='2.2' height='30' opacity='.55'/%3E%3Crect x='26.6' y='16' width='2.2' height='30' opacity='.55'/%3E%3Crect x='32' y='16' width='2.2' height='30' opacity='.55'/%3E%3C/g%3E%3Cpath d='M3 3 H37 V25 C37 36 20 43 20 43 C20 43 3 36 3 25 Z' fill='none' stroke='%2324437e' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* content sits above it; the sticky list bar still stacks inside .screen */
.body > .screen { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .body::before { display: none; }
}

/* The routing question as a card you can answer or walk past, rather than a
   screen standing between a visitor and the study tools. */
.poolcard {
  background: var(--blue-tint);
  border: 2px solid var(--blue-line);
  border-radius: 12px;
  padding: 22px;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.poolcard__title { font: 700 22px/1.3 var(--sans); color: var(--ink); text-wrap: pretty; }
.poolcard__body {
  font: 400 17px/1.5 var(--sans);
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}
.poolcard__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.poolcard__btn {
  flex: 1;
  min-width: 210px;
  min-height: 64px;
  padding: 12px 18px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 10px;
  color: var(--blue);
  font: 600 18px/1.25 var(--sans);
}
.poolcard__btn:hover { background: var(--blue-tint-3); }
.poolcard__btn--primary { background: var(--blue); color: #fff; font-weight: 700; }
.poolcard__btn--primary:hover { background: var(--blue-dark); }
.poolcard__more {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--blue);
  font: 600 16px/1.3 var(--sans);
  text-decoration: underline;
}

/* What the card collapses to once the reader has confirmed. */
.poolline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}
.poolline__text { font: 400 18px/1.4 var(--sans); color: var(--muted); }
.poolline__btn {
  min-height: 44px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--blue-line-2);
  border-radius: 999px;
  color: var(--blue);
  font: 600 15px/1 var(--sans);
}
.poolline__btn:hover { background: var(--blue-tint); }

/* The age and Green Card rules. Only 65/20 is actionable — it is the one
   that shortens the question list — so it is the only part that is a button. */
.exempt {
  margin-top: 22px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 18px 16px;
}
.sublink {
  width: 100%;
  min-height: 56px;
  text-align: left;
  background: none;
  border: none;
  padding: 12px 0 0;
  font: 400 17px/1.45 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}
.sublink b { color: var(--blue); font-weight: 700; text-decoration: underline; }
.sublink:hover b { color: var(--blue-dark); }
.exempt__note {
  margin: 10px 0 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--label);
  text-wrap: pretty;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.tile {
  min-height: 120px;
  padding: 22px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.tile { box-shadow: 0 2px 0 rgba(36, 67, 126, .14); }
.tile:hover { background: var(--blue-tint); }
.tile--locked { box-shadow: none; }
.tile__icon {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 10px;
  background: var(--blue-tint-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--sans);
  color: var(--blue);
}
.tile__body { display: flex; flex-direction: column; gap: 5px; }
.tile__title { font: 700 23px/1.2 var(--sans); color: var(--ink); }
.tile__sub { font: 400 16px/1.35 var(--sans); color: var(--muted); }

.tile--locked {
  background: var(--sand);
  border: 2px dashed var(--dash);
}
.tile--locked:hover { background: var(--sand-2); }
.tile--locked .tile__icon { background: var(--sand-3); color: var(--stone); }
.tile--locked .tile__title { color: var(--stone-dark); }
.tile--locked .tile__sub { font-weight: 600; font-size: 15px; color: var(--stone); }

/* ---------- pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  color: var(--amber-ink);
  padding: 7px 12px;
  border-radius: 999px;
  font: 700 15px/1 var(--sans);
}
.pill--sm { gap: 6px; padding: 6px 11px; font-size: 14px; }
.pill--xs { padding: 4px 9px; font-size: 13px; align-self: flex-start; }
.pill--grey {
  background: var(--sand);
  border-color: var(--dash);
  color: #5b5347;
}
.pill--saved {
  background: var(--green-bg);
  border-color: var(--green-line);
  color: var(--green-ink);
  align-self: flex-start;
  padding: 5px 10px;
  font-size: 13px;
}

/* ---------- segmented filter ---------- */

.seg {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.seg--list { margin: 0 0 8px; }
.seg--quiz { margin: 0; }

.seg__btn {
  flex: 1;
  min-width: 170px;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--blue);
  font: 600 16px/1.2 var(--sans);
  background: #fff;
  color: var(--blue);
}
.seg--list .seg__btn {
  min-width: 180px;
  min-height: 66px;
  padding: 12px 16px;
  font-size: 17px;
  line-height: 1.25;
}
.seg--quiz .seg__btn {
  min-width: 160px;
  min-height: 64px;
  font-size: 17px;
}
.seg__btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.seg__btn:not([aria-pressed="true"]):hover { background: var(--blue-tint); }

.fieldset { border: 0; margin: 0; padding: 0; }
.fieldset__legend {
  padding: 0;
  margin: 0 0 10px;
  font: 700 13px/1 var(--sans);
  letter-spacing: .1em;
  color: var(--label);
}

/* ---------- cards ---------- */

.cardmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.cardmeta__counter { font: 600 17px/1 var(--sans); color: var(--muted); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 14px;
  box-shadow: 0 2px 0 #e3ddd1;
  padding: 26px 22px;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The number in "What are two rights..." — underlined so it cannot be read
   as asking for one. Deliberately not blue: an underline in the link colour
   would read as a link. */
.qcount {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 700;
}

.card__q {
  font: 600 26px/1.32 var(--serif);
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.card__a {
  font: 700 26px/1.32 var(--serif);
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.card__section {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card__section--warn { gap: 14px; }

.answers { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.answers li { font: 700 26px/1.32 var(--serif); color: var(--ink); text-wrap: pretty; }
.answers--many li { font-size: 22px; }
.answers--many { gap: 8px; }

/* The answer the officer wants, then the alternatives. Keeping the extras
   visibly secondary is the point: a flat list of equals is harder to learn
   from, and only one of them has to be said out loud. */
.answerwrap { display: flex; flex-direction: column; gap: 16px; }
.answers__other {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.answers--other { gap: 7px; }
.answers--other li { font: 600 19px/1.35 var(--serif); color: var(--muted); }
.answers--other.answers--many li { font-size: 17px; }

.answerhint {
  font: 400 15px/1.4 var(--sans);
  color: var(--label);
  margin: 0;
}

.reveal {
  margin-top: 8px;
  min-height: 104px;
  width: 100%;
  background: var(--page);
  border: 2px dashed var(--dash);
  border-radius: 12px;
  font: 600 20px/1.3 var(--sans);
  color: var(--muted);
}
.reveal:hover { background: var(--sand); }

.play {
  align-self: flex-start;
  min-height: 60px;
  padding: 12px 22px;
  background: var(--blue-tint);
  border: 2px solid var(--blue);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 18px/1 var(--sans);
  color: var(--blue);
}
.play:hover { background: var(--blue-tint-3); }
.play__glyph { font-size: 18px; }
.play--dark {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.play--dark:hover { background: var(--blue-dark); }
.play--sm { min-height: 52px; padding: 10px 18px; font-size: 16px; }

.nav {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}
.nav__btn {
  flex: 1;
  min-height: 74px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 10px;
  font: 600 19px/1 var(--sans);
  color: var(--blue);
}
.nav__btn:hover { background: var(--blue-tint); }
.nav__btn--primary {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.nav__btn--primary:hover { background: var(--blue-dark); }

/* ---------- amber notice ---------- */

.notice {
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.notice__text {
  font: 600 19px/1.45 var(--sans);
  color: var(--amber-ink-2);
  text-wrap: pretty;
  margin: 0;
}
.notice__link {
  min-height: 60px;
  background: #fff;
  border: 2px solid var(--amber-ink);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font: 700 18px/1.25 var(--sans);
  color: var(--amber-ink);
  text-decoration: none;
}
.notice__link:hover { background: var(--amber-bg); color: var(--amber-ink-2); }
.notice__small {
  font: 400 15px/1.5 var(--sans);
  color: var(--amber-ink-3);
  margin: 0;
}
.notice--flat {
  padding: 16px;
  font: 600 18px/1.45 var(--sans);
  color: var(--amber-ink-2);
  text-wrap: pretty;
}

/* ---------- pdf box ---------- */

.pdf {
  margin-top: 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pdf__title { font: 700 20px/1.3 var(--sans); color: var(--ink); }
.pdf__blurb { font: 400 17px/1.5 var(--sans); color: var(--muted); text-wrap: pretty; margin: 0; }
.pdf__link {
  min-height: 74px;
  background: var(--blue-tint);
  border: 2px solid var(--blue);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  text-decoration: none;
}
.pdf__link:hover { background: var(--blue-tint-3); }
.pdf__icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--blue-line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 18px/1 var(--sans);
  color: var(--blue);
}
.pdf__body { display: flex; flex-direction: column; gap: 3px; }
.pdf__label { font: 700 18px/1.25 var(--sans); color: var(--blue); }
.pdf__meta { font: 400 15px/1.25 var(--sans); color: var(--muted); }

/* ---------- question list ---------- */

.listnote {
  font: 400 16px/1.5 var(--sans);
  color: var(--muted);
  margin: 10px 0 18px;
}
.rows {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 14px;
  overflow: hidden;
}
.row {
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
}
.row__head {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.row__num {
  font: 700 16px/1 var(--sans);
  color: var(--label);
  width: 38px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.row__main {
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.row__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.row__chev {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.row__chev svg { transition: transform .15s ease; }
.row__chev[data-open="true"] svg { transform: rotate(180deg); }
.row__q { font: 600 18px/1.4 var(--sans); color: var(--ink); text-wrap: pretty; }

/* The answer, opened in place. Indented to line up under the question text
   rather than the number. */
.row__answer {
  padding: 0 18px 20px 70px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.row__a {
  font: 700 20px/1.35 var(--serif);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.row__answer .answers li { font-size: 20px; }
.row__answer .answers--many li { font-size: 18px; }
.row__answer .answers--other li { font-size: 17px; }
.row__answer .answerwrap { gap: 14px; }
.row__answer .notice { padding: 16px; }
.row__answer .notice__text { font-size: 17px; }

/* Follows you down a list that runs to about 13,000px. The filter is the
   reason it exists: there is no other way to reach it from deep in the list,
   whereas "back" at least has the browser's own gesture. */
.stickybar {
  position: sticky;
  /* Measured from the header at runtime — bookTitle is an editor-facing
     value, so a long one wraps and the header grows. The fallback is the
     height at the shipped title. */
  top: var(--head-h, 69px);
  z-index: 20;
  margin: 0 -22px 14px;
  padding: 10px 22px;
  background: var(--page);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.stickybar__back {
  flex: none;
  min-height: 44px;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--blue);
  font: 600 16px/1 var(--sans);
  text-decoration: underline;
}
.stickybar__back:hover { color: var(--blue-dark); }
.stickybar__meta {
  margin-left: auto;
  font: 400 15px/1.3 var(--sans);
  color: var(--muted);
  text-align: right;
}
.stickybar__seg {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.stickybar__btn {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font: 600 15px/1 var(--sans);
  white-space: nowrap;
}
.stickybar__btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.stickybar__btn:not([aria-pressed="true"]):hover { background: var(--blue-tint); }

.listtools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.listtools__btn {
  min-height: 48px;
  padding: 10px 16px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 8px;
  color: var(--blue);
  font: 600 16px/1 var(--sans);
}
.listtools__btn:hover { background: var(--blue-tint); }
.row__play {
  flex: none;
  width: 70px;
  min-height: 64px;
  border: 2px solid var(--blue);
  border-radius: 10px;
  background: var(--blue-tint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--blue);
}
.row__play[data-playing="true"] { background: var(--blue); color: #fff; }
.row__play-glyph { font-size: 16px; line-height: 1; }
.row__play-label { font: 700 11px/1 var(--sans); letter-spacing: .06em; }
.rows__foot {
  padding: 18px;
  text-align: center;
  font: 400 15px/1.4 var(--sans);
  color: var(--label);
}

/* ---------- quiz ---------- */

.stack { display: flex; flex-direction: column; gap: 22px; }
.stack--tight { gap: 20px; }
.stack--tighter { gap: 12px; }
.stack--label { gap: 10px; }

.quizhead {
  display: flex;
  justify-content: space-between;
  font: 600 17px/1 var(--sans);
  color: var(--muted);
}
.progress {
  height: 14px;
  background: var(--shell);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar { height: 100%; background: var(--blue); width: 0; }

.status {
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--blue-tint);
  border: 2px solid var(--blue-line);
}
.status[data-phase="pause"] { background: var(--page); border-color: var(--dash); }
.status[data-phase="answer"] { background: var(--blue-tint-2); border-color: var(--blue); }
.status__icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 18px/1 var(--sans);
  color: var(--blue);
}
.status__body { display: flex; flex-direction: column; gap: 4px; }
.status__title { font: 700 19px/1.25 var(--sans); color: var(--ink); }
.status__sub { font: 400 15px/1.35 var(--sans); color: var(--muted); }

.vu {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 54px;
}
.vu span {
  flex: 1;
  height: 100%;
  background: var(--blue-line-2);
  border-radius: 3px;
  transform-origin: bottom;
  animation: vu .9s ease-in-out infinite;
}
.vu span:nth-child(2) { animation-duration: .7s; animation-delay: .1s; }
.vu span:nth-child(3) { background: var(--blue-line); animation-duration: 1.1s; animation-delay: .05s; }
.vu span:nth-child(4) { animation-duration: .8s; animation-delay: .2s; }
.vu span:nth-child(5) { background: var(--blue-line); animation-duration: 1s; animation-delay: .15s; }
.vu span:nth-child(6) { animation-duration: .75s; animation-delay: .25s; }
.vu span:nth-child(7) { background: var(--blue-line); animation-duration: .95s; animation-delay: .1s; }
.vu span:nth-child(8) { animation-duration: .85s; animation-delay: .3s; }

@keyframes vu {
  0%, 100% { transform: scaleY(.35); }
  50% { transform: scaleY(1); }
}

.quizcard {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 200px;
}
.quizcard__q {
  font: 600 24px/1.35 var(--serif);
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.quizcard__section {
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quizcard__a { font: 700 25px/1.32 var(--serif); color: var(--ink); text-wrap: pretty; margin: 0; }
.quizcard__section .answers li { font-size: 25px; }
.quizcard__section .answers--many li { font-size: 21px; }
.quizcard__section .answers--other li { font-size: 18px; }

.countdown {
  background: var(--page);
  border: 2px dashed var(--dash);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.countdown__num { font: 700 42px/1 var(--sans); color: var(--ink); }
.countdown__label {
  font: 600 15px/1 var(--sans);
  letter-spacing: .06em;
  color: var(--muted);
  text-align: center;
}

.bigbtn {
  min-height: 104px;
  background: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font: 700 25px/1 var(--sans);
  width: 100%;
}
.bigbtn:hover { background: var(--blue-dark); }

.advance {
  min-height: 80px;
  background: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 12px;
  color: #fff;
  font: 700 21px/1.2 var(--sans);
}
.advance:hover { background: var(--blue-dark); }

.minor {
  flex: 1;
  min-height: 66px;
  background: var(--blue-tint);
  border: 2px solid var(--blue);
  border-radius: 10px;
  color: var(--blue);
  font: 600 17px/1 var(--sans);
}
.minor:hover { background: var(--blue-tint-3); }
.minor--danger {
  background: #fff;
  border-color: var(--red);
  color: var(--red);
}
.minor--danger:hover { background: var(--red-bg); }

.donecard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
}
.donecard .advance { min-height: 80px; font-size: 21px; line-height: 1; }
.donecard__back {
  min-height: 66px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 10px;
  color: var(--blue);
  font: 600 18px/1 var(--sans);
}
.donecard__back:hover { background: var(--blue-tint); }

/* ---------- audio gate ---------- */

.field { display: flex; flex-direction: column; gap: 10px; }
.field__label { font: 600 17px/1 var(--sans); color: var(--ink); }
.input {
  min-height: 72px;
  padding: 14px 18px;
  border-radius: 10px;
  font: 600 22px/1 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--blue);
  width: 100%;
}
.input[aria-invalid="true"] { border-color: var(--red); }

.error {
  margin-top: 14px;
  background: var(--red-bg);
  border: 1px solid var(--red-line);
  border-left: 6px solid var(--red);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.error__title { font: 700 18px/1.3 var(--sans); color: var(--red); }
.error__body { font: 400 16px/1.5 var(--sans); color: var(--red-ink); text-wrap: pretty; }

.gatenote {
  font: 400 16px/1.5 var(--sans);
  color: var(--muted);
  margin: 14px 0 22px;
}
.unlock {
  width: 100%;
  min-height: 84px;
  background: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 12px;
  color: #fff;
  font: 700 22px/1 var(--sans);
}
.unlock:hover { background: var(--blue-dark); }

/* ---------- audio library ---------- */

.chapters { display: flex; flex-direction: column; gap: 14px; }
.chapter {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chapter__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.chapter__title { font: 700 20px/1.3 var(--sans); color: var(--ink); }
.chapter__length { font: 600 15px/1 var(--sans); color: var(--label); white-space: nowrap; }
.chapter__progress { display: flex; align-items: center; gap: 12px; }
.chapter__progress .progress { flex: 1; height: 12px; }
.chapter__elapsed {
  font: 600 14px/1 var(--sans);
  color: var(--muted);
  white-space: nowrap;
}
.chapter__actions { display: flex; gap: 12px; align-items: stretch; }
.chapter__foot {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.chapter__foot .chapter__btn { flex: 0 1 auto; min-width: 150px; }
.chapter--active { border-color: var(--blue-line); box-shadow: 0 2px 0 var(--sand-3); }

/* Jump back over a sentence you missed. Kept narrower than play, so the
   middle button stays the obvious one. */
.chapter__nudge {
  flex: none;
  min-width: 84px;
  min-height: 64px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid var(--blue);
  background: #fff;
  color: var(--blue);
  font: 600 15px/1 var(--sans);
}
.chapter__nudge:hover { background: var(--blue-tint); }

/* Drag to move through a forty-minute chapter. A range input rather than a
   div, so it is keyboard-operable and announced properly without rebuilding
   any of that by hand. The thumb is deliberately large for a touch screen. */
.scrub {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 30px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.scrub:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.scrub::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--blue) 0 var(--played, 0%), var(--shell) var(--played, 0%) 100%);
}
.scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 1px 2px rgba(29, 36, 51, .3);
}
.scrub::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  background: var(--shell);
}
.scrub::-moz-range-progress {
  height: 12px;
  border-radius: 999px;
  background: var(--blue);
}
.scrub::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
}

/* Slower matters more than faster here: most of these listeners are working
   in a second language. */
.speed { display: flex; align-items: center; gap: 9px; }
.speed__label {
  font: 600 15px/1 var(--sans);
  color: var(--muted);
}
.speed__select {
  min-height: 48px;
  padding: 8px 12px;
  border: 2px solid var(--blue);
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  font: 700 16px/1 var(--sans);
  font-family: var(--sans);
}
.ico { flex: none; }

.chapter__btn {
  flex: 1;
  gap: 8px;
  min-height: 64px;
  border-radius: 10px;
  border: 2px solid var(--blue);
  font: 700 17px/1 var(--sans);
  background: var(--blue-tint);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.chapter__btn[data-playing="true"] { background: var(--blue); color: #fff; }
.chapter__btn--secondary { background: #fff; font-weight: 600; }
.chapter__btn:hover:not([disabled]):not([data-playing="true"]) { background: var(--blue-tint-3); }
.chapter__btn[data-playing="true"]:hover { background: var(--blue-dark); }
.chapter--empty { border-style: dashed; border-color: var(--dash); background: var(--sand); }
.chapter--empty .chapter__title { color: var(--stone-dark); }
.chapter__soon { font: 600 15px/1.4 var(--sans); color: var(--stone); }

/* Taking the whole audiobook is a real commitment — four and a half hours
   and most of two hundred megabytes — so the size is stated before the
   button rather than after the download starts. */
.grabAll {
  margin: 0 0 20px;
  padding: 20px;
  background: var(--blue-tint);
  border: 2px solid var(--blue-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.grabAll__title { font: 700 20px/1.3 var(--sans); color: var(--ink); }
.grabAll__meta {
  margin: 6px 0 0;
  font: 400 16px/1.4 var(--sans);
  color: var(--muted);
}
.grabAll__btn {
  align-self: stretch;
  min-height: 64px;
  padding: 14px 20px;
  background: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 10px;
  color: #fff;
  font: 700 18px/1.2 var(--sans);
  /* This rule was written for the <button> fallback. With audiobookZip set
     the element is an <a>, which is inline by default — so min-height did
     nothing, the padding sat oddly and the label kept the link underline. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
}
/* The generic a:hover is (0,1,1) and outranks .grabAll__btn at (0,1,0), so
   without restating the colour the label turned --blue-dark on a
   --blue-dark ground and disappeared under the cursor. */
.grabAll__btn:hover:not([disabled]) { background: var(--blue-dark); color: #fff; }
.grabAll__note {
  margin: 0;
  font: 400 14px/1.5 var(--sans);
  color: var(--label);
  text-wrap: pretty;
}

.libnote {
  margin-top: 20px;
  font: 400 16px/1.5 var(--sans);
  color: var(--muted);
}

button[disabled], a[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--sand);
}
.footer__inner {
  max-width: 840px;
  margin: 0 auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.footer__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Publisher imprint. Modest by convention — it identifies the publisher,
   it is not a second piece of branding competing with the book's own. */
/* Imprint on the left, disclaimers beside it. The non-affiliation line
   matters more here than on most sites: this audience is a standing target
   for immigration scams, and a site that helps with a government process
   should never be mistakable for the government. */
.footer__base {
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  /* the imprint sits centred against the disclaimers beside it; once they
     wrap onto separate lines each is its own row, so this is a no-op there */
  align-items: center;
  gap: 20px 40px;
  flex-wrap: wrap;
}
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 52ch;
}
.footer__legal-line {
  margin: 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--label);
}

.footer__imprint {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}
.footer__imprint-label {
  font: 400 13px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
}
.footer__logo {
  width: 180px;
  height: auto;
  display: block;
}
.footer__imprint-name {
  font: 700 18px/1.2 var(--sans);
  color: var(--ink);
  letter-spacing: .02em;
}
.footer__imprint-link { display: inline-block; min-height: 44px; }
.footer a { font: 600 17px/1.3 var(--sans); color: var(--blue); }
.footer__note { font: 400 15px/1.5 var(--sans); color: var(--label); }
.footer__buy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 17px/1.35 var(--sans);
  color: var(--blue);
  text-decoration: underline;
}

/* Where to buy the book. Only ever shown where the copy already refers to
   the book, so it reads as an answer rather than an advert. */
.buyblock {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.buyblock__text { margin: 0; font: 600 17px/1.4 var(--sans); color: var(--ink); }
.buylink {
  align-self: flex-start;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 10px;
  color: var(--blue);
  font: 700 17px/1.3 var(--sans);
  text-decoration: none;
}
.buylink:hover { background: var(--blue-tint); color: var(--blue-dark); }
.buylink--wide { align-self: stretch; justify-content: center; }

/* ---------- small screens ---------- */

@media (max-width: 540px) {
  .screen { padding: 26px 16px 40px; }
  .sitehead__inner { padding: 0 16px; }
  .sitehead__home { gap: 11px; padding: 12px 0; }
  .sitehead__title { font-size: 17px; }
  .stickybar { margin: 0 -16px 14px; padding: 9px 16px; gap: 8px; }
  .footer__base { gap: 18px; }
  .footer__inner { padding: 22px 16px; }
  .stickybar__back { padding: 8px 8px; font-size: 15px; }
  .stickybar__btn { padding: 8px 12px; font-size: 14px; }
  .stickybar__meta { font-size: 13px; }

  .screen--mid,
  .screen--list,
  .screen--library,
  .screen--gate { padding: 16px 16px 32px; }
  .screen--hub { padding: 24px 16px 36px; }

  .h1 { font-size: 28px; }
  .h1--hub, .h1--quiz, .h1--gate { font-size: 26px; }
  .h1--list { font-size: 24px; }
  .lede { font-size: 17px; }

  .choice { font-size: 19px; padding: 14px 18px; }

  .card { padding: 20px 16px; }
  .card__q, .card__a, .answers li { font-size: 23px; }
  .answers--many li { font-size: 20px; }
  .answers--other li { font-size: 17px; }
  .quizcard { padding: 20px 16px; }
  .quizcard__q { font-size: 21px; }
  .quizcard__a, .quizcard__section .answers li { font-size: 22px; }
  .quizcard__section .answers--many li { font-size: 19px; }

  .bigbtn { font-size: 22px; }
  .row__head { padding: 14px 12px; gap: 10px; }
  .row__num { width: 30px; }
  .row__q { font-size: 17px; }
  .row__play { width: 62px; }
  .row__answer { padding: 0 12px 18px 52px; }
  .row__a, .row__answer .answers li { font-size: 19px; }
  .row__answer .answers--many li { font-size: 17px; }
  .poolcard { padding: 18px 16px; gap: 12px; }
  .poolcard__title { font-size: 20px; }
  .poolcard__btn { min-width: 100%; }
  /* Keep the first row of study tiles reachable without much scrolling. */
  .brand { margin-bottom: 22px; }
  .lede--hub { margin: 0 0 18px; }
  .poolline, .poolcard { margin-bottom: 20px; }
  .seg__btn { min-width: 100%; }
  .chapter__actions { flex-wrap: wrap; }
  .chapter__actions .chapter__btn { flex: 1 1 100%; order: -1; }
  .chapter__nudge { flex: 1; min-width: 0; }
  .chapter__foot { gap: 10px; }
  .chapter__foot .chapter__btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vu span { animation: none; transform: scaleY(.6); }
  * { transition: none !important; }
}