/* Educerie notes — the chrome around the written material: the rail, the breadcrumb,
   the index pages and the controls a student touches. Colour, dark mode, the corner
   radii and the typography of the page body come from notes.css, which is loaded first.

   One face throughout: Helvetica, from the wordmark in the rail to the footer. Nothing
   here is downloaded; the face is already on the machine.

   Every rectangle is a squircle — the corner eases into the side rather than turning at
   a point. The shapes follow the SAT practice page: a card is a 1.5px squircle that lifts
   a little under the pointer, a button is the same shape filled (green for the one main
   action, teal for the rest), a tag is a round-ended pill. No gradients, no stripes.

   Teal is the accent and does the work white would otherwise do: it fills the buttons,
   marks the level you have chosen, ticks what you have read, fills the progress bar and
   shows where you are in the rail, the tab strip and the contents list. Amber says higher
   level. Everything else is ink, faint ink and a hairline.

   One spacing scale, one container, one card. Everything on every page is built out of
   those three, which is what makes the section feel like one thing. */

:root {
  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 24px; --s5: 36px; --s6: 60px; --s7: 92px;
  --mid: 1120px;
  --gut: clamp(18px, 4vw, 32px);
  --radius: var(--r-lg);
}

body { padding: 0; }
[hidden] { display: none !important; }
.mid { max-width: var(--mid); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* ============================================================ the rail
   Flat paper, one hairline under it. No blur, no tint: when the page scrolls under the
   rail, the hairline is what separates them. */
.rail {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.railin { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand {
  font: 700 1.04rem/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.railnav, .railend { display: flex; align-items: center; gap: 26px; }
.railnav { margin-left: auto; }
.railend { margin-left: 10px; }
.railnav a, .signin {
  position: relative;
  font: 700 .72rem/1 var(--sans); letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none; white-space: nowrap;
}
.railnav a:hover, .signin:hover { color: var(--ink); }
.railnav a.here { color: var(--teal-deep); }
.railnav a.here::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -25px; height: 2px; background: var(--teal);
}
/* the app button, and every link from a page into the app. A plain .cta is the one main
   action on a page and is green; .ghost is every other. */
.btn-app, .cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 18px;
  border-radius: 14px; corner-shape: squircle;
  font: 800 .76rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--teal); text-decoration: none; white-space: nowrap;
  border: 1.5px solid var(--teal); cursor: pointer;
  transition: transform .12s ease, background-color .15s, border-color .15s, box-shadow .15s;
}
.btn-app:hover, .cta:hover {
  background: var(--teal-deep); border-color: var(--teal-deep); color: #fff;
  transform: translateY(-1px); box-shadow: var(--lift);
}
.btn-app:active, .cta:active { transform: translateY(0) scale(.97); }
.cta { background: var(--go); border-color: var(--go); }
.cta:hover { background: var(--go-deep); border-color: var(--go-deep); }
.cta.ghost { background: transparent; color: var(--teal-deep); border-color: var(--teal-pale); }
.cta.ghost:hover { background: var(--teal-wash); border-color: var(--teal); color: var(--teal-deep); }

/* ============================================================ breadcrumb, and the level switch at its end */
.crumb { border-bottom: 1px solid var(--rule); background: var(--paper); }
.crumb .mid, .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.crumb .mid {
  padding-top: 10px; padding-bottom: 10px;
  font: 400 .79rem/1.4 var(--sans); color: var(--ink-faint);
}
.crumbs, .levelset { min-height: 26px; }
.levelset { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.levellabel { font: 700 .8rem/1 var(--sans); color: var(--ink-faint); }
.levels {
  display: flex; gap: 2px; padding: 3px; background: var(--rule-soft);
  border-radius: 12px; corner-shape: squircle;
}
.levels button {
  font: 800 .72rem/1 var(--sans); letter-spacing: .06em; padding: 6px 13px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.levels button:hover { color: var(--ink); }
html[data-level="sl"] .levels button[data-set-level="sl"],
html[data-level="hl"] .levels button[data-set-level="hl"] { background: var(--teal); color: #fff; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.crumb b { color: var(--ink); font-weight: 700; }
.crumb i { font-style: normal; color: var(--rule); }

/* ============================================================ page heads */
.page { padding-top: var(--s6); padding-bottom: var(--s7); font-family: var(--sans); }
.pagehead { max-width: 44rem; margin-bottom: var(--s6); }
.pagehead .eyebrow { margin: 0 0 var(--s3); }
/* "Your subject · HL": the eyebrow line itself is hidden (notes.css); notes.js shows this
   badge when the student's record holds this subject, and the line comes back as the badge */
.yours {
  display: inline-block; padding: 7px 12px;
  border-radius: 999px; border: 1.5px solid var(--teal-pale);
  font: 700 .78rem/1 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--teal-deep); background: var(--teal-wash);
}
.pagehead h1 {
  margin: 0; font: 800 clamp(2.4rem, 5.6vw, 3.6rem)/1.02 var(--sans);
  letter-spacing: -.035em; color: var(--ink); text-wrap: balance;
}
.pagehead .lede {
  margin: var(--s4) 0 0; max-width: 39rem;
  font: 400 1.14rem/1.62 var(--sans); color: var(--ink-soft);
}
.pagehead .stats {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s4) 0 0;
  font: 400 .84rem/1 var(--sans); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.pagehead .stats b { color: var(--teal-deep); font-weight: 800; }
.pagehead .acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }

/* ============================================================ blocks and grids */
.block { margin-top: var(--s6); }
.block:first-of-type { margin-top: 0; }
.blockhead {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  margin: 0 0 var(--s4); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  font: 800 1.2rem/1.3 var(--sans); letter-spacing: -.02em; text-transform: none;
  color: var(--ink);
}
.blockhead .gn {
  font: 800 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--teal); padding: 5px 8px; border-radius: 8px;
}
.grid { display: grid; gap: var(--s3); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards-3, .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards-2, .cards-3, .cards-4 { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ cards
   A 1.5px squircle, as the SAT practice page draws its domain cards: under the pointer it
   lifts a little, the border goes teal and a soft shadow sits under it. */
.card {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s3);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 22px; corner-shape: squircle;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: var(--lift); }
.card .cardbody { display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.card b { font: 800 1.2rem/1.28 var(--sans); letter-spacing: -.028em; color: var(--ink); }
.card .blurb { font: 400 .9rem/1.6 var(--sans); color: var(--ink-soft); }
.card .pills { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.pill-n {
  display: inline-flex; align-items: center; padding: 6px 11px;
  border: 1.5px solid var(--rule); border-radius: 999px;
  font: 700 .74rem/1 var(--sans); color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill-n.full { color: var(--teal-deep); border-color: var(--teal-pale); background: var(--teal-wash); }
/* amber means higher level and nothing else; a programme not yet written is simply quiet */
.pill-n.soon { color: var(--ink-faint); }
.card .cardfoot {
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--rule);
  font: 800 .76rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep);
}
.card .cardfoot .muted { color: var(--ink-faint); font-weight: 400; letter-spacing: .04em; text-transform: none; }
.card .tag {
  align-self: flex-start; font: 800 .7rem/1 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--teal);
  padding: 5px 8px; border-radius: 8px;
}
.card.is-soon b { color: var(--ink-faint); }
.card.is-soon .tag { color: var(--ink-faint); background: var(--rule-soft); }
.card.is-soon:hover { transform: none; border-color: var(--rule); box-shadow: none; }
.card.doc .blurb { color: var(--ink-faint); }

/* ============================================================ the notes landing: a slim head and one row per programme */
.pagehead.slim { margin-bottom: var(--s5); }
.pagehead.slim h1 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
.pagehead.slim .lede { margin-top: var(--s3); font-size: 1rem; }
.proglist {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1.5px solid var(--rule); border-radius: 22px; corner-shape: squircle; overflow: hidden;
}
.prow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3);
  padding: 14px var(--s4); text-decoration: none; color: inherit; transition: background .15s ease;
}
.prow + .prow { border-top: 1px solid var(--rule-soft); }
.prow:hover { background: var(--teal-wash); }
.prow .tag {
  min-width: 38px; text-align: center; font: 800 .7rem/1 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--teal); padding: 6px 8px; border-radius: 8px;
}
.prow .pb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prow b { font: 800 1.05rem/1.3 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.prow .blurb { font: 400 .86rem/1.45 var(--sans); color: var(--ink-soft); }
.prow .pn { display: flex; gap: var(--s2); font: 700 .78rem/1 var(--sans); color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prow .pn span + span::before { content: "·"; margin-right: var(--s2); }
.prow .go { font: 800 1rem/1 var(--sans); color: var(--teal-deep); transition: transform .15s ease; }
.prow:hover .go { transform: translateX(3px); }
.soonline { margin: var(--s3) 0 0; font: 400 .86rem/1.5 var(--sans); color: var(--ink-faint); }
@media (max-width: 600px) {
  .prow { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px var(--s3); }
  .prow .pn { grid-column: 2; }
  .prow .go { grid-row: 1; grid-column: 3; }
  .prow .blurb { display: none; }
}

/* ============================================================ subtopic rows */
.rows { list-style: none; margin: 0; padding: 0; }
.rows .row + .row { border-top: 1px solid var(--rule-soft); }
.rows .row a {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: var(--s3);
  align-items: baseline; padding: var(--s3) var(--s3);
  text-decoration: none; color: inherit;
  border-radius: 16px; corner-shape: squircle;
  transition: background-color .15s, padding-left .2s;
}
.rows .row a:hover { background: var(--teal-wash); padding-left: calc(var(--s3) + 4px); }
.rows .code {
  font: 800 1.02rem/1.35 var(--sans); letter-spacing: -.02em; color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}
.rows .rowbody b { display: block; font: 700 1.1rem/1.38 var(--sans); letter-spacing: -.024em; color: var(--ink); }
/* the question this subtopic answers — a plain line here, not the ruled question block a note page uses */
.rows .rowbody .q {
  display: block; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0;
  font: 400 .88rem/1.55 var(--sans); color: var(--ink-faint);
}
.rows .rowtags { display: flex; align-items: center; gap: var(--s3); white-space: nowrap; }
.rows .figs { font: 400 .75rem/1 var(--sans); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rows em.hlpill, .rows em.hlbit {
  font: 800 .64rem/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber-deep); background: var(--amber-wash); padding: 6px 9px;
  border-radius: 999px;
}
/* the read mark: a round tick, as the SAT practice page draws its checkboxes */
.rows .tick {
  width: 18px; height: 18px; display: inline-block; vertical-align: -3px;
  border: 1.5px solid color-mix(in srgb, var(--ink-faint) 55%, transparent); border-radius: 50%;
  background: center / 12px no-repeat;
}
.rows .row.done .tick {
  background-color: var(--teal); border-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.rows .row.done .rowbody b { color: var(--ink-faint); }
.rows .row.hidden { display: none; }
.noresult { font: .9rem/1.5 var(--sans); color: var(--ink-faint); padding: var(--s4) var(--s3); }

/* ============================================================ search and progress */
.controls { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }
#q {
  flex: 1 1 340px; font: 400 .95rem/1.4 var(--sans); padding: 12px 16px;
  border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink);
  border-radius: 14px; corner-shape: squircle;
  transition: border-color .15s, box-shadow .15s;
}
#q::placeholder { color: var(--ink-faint); }
#q:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 14%, transparent); }
.progress {
  display: flex; align-items: center; gap: var(--s2); margin: 0 0 0 auto;
  font: 400 .81rem/1 var(--sans); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.progress .bar { display: block; width: 116px; height: 5px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.progress .bar span { display: block; height: 100%; width: 0; background: var(--teal); transition: width .3s ease; }
.link { border: 0; background: none; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; padding: 0; }
.link:hover { color: var(--teal-deep); }

/* ============================================================ level switching */
html[data-level="sl"] .notepage section.hl,
html[data-level="sl"] tr.hl-row,
html[data-level="sl"] .rows .row.whole-hl,
html[data-level="sl"] .toc li.hl { display: none; }
.slnote { display: none; }
html[data-level="sl"] .slnote {
  display: block; margin: 0 0 var(--s4); padding: 12px var(--s3);
  background: var(--amber-wash); border: 1.5px solid var(--amber-rule);
  border-radius: 16px; corner-shape: squircle;
  font: 400 .89rem/1.6 var(--sans); color: var(--ink-soft);
}
.slnote button { font: inherit; font-weight: 700; border: 0; background: none; color: var(--amber-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0; }
html[data-level="hl"] .index-slnote { display: none; }

/* ============================================================ the reading layout */
/* The reading page is wider than the rest of the section: the written column keeps its
   measure, and the room left over goes to the contents on one side and to the diagrams on
   the other, rather than to empty margin. Shut the contents and the room goes to the page. */
.layout {
  display: grid; align-items: start; gap: var(--s5);
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  max-width: 1300px;
  padding-top: var(--s4); padding-bottom: var(--s7);
  transition: grid-template-columns .22s ease;
}
html[data-toc="shut"] .layout { grid-template-columns: var(--rail-shut) minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .layout { transition: none; } }
/* a page with nothing to list — a test paper — keeps the sheet in the middle on its own */
.layout.solo { grid-template-columns: minmax(0, var(--sheet-w)); max-width: 1120px; justify-content: center; }
/* the page has a widest it wants to be: past that the room goes back to the margins
   rather than to a line no one can track or a rule running off into nothing */
.layout .sheet { margin: 0 auto; max-width: 980px; padding-top: 0; }
/* the parts of a question, indented as a block so a part that wraps stays under itself */
.sheet p.part { margin-left: 26px; }
.sheet p.part + p.part { margin-top: -4px; }
.sheet .eyebrow:first-child, .sheet > .eyebrow { margin-top: var(--s4); }

/* ---------------- the contents rail
   Three levels, told apart by weight and indent rather than by shouting: a group heading,
   a numbered section, and an unnumbered one a step in. The section being read is a
   teal-tinted pill, which notes.js moves as the page scrolls. */
/* ---------------- the contents, which is a control rather than a heading
   No label sitting above it saying what it is. The button at the top says which section
   you are in — notes.js keeps it current as the page scrolls — and shutting it folds the
   whole rail away to its own width, which is the one thing the reader wants from it. */
.side { position: sticky; top: calc(62px + var(--s3)); }
.sidein { font-family: var(--sans); }
.tocbox {
  border: 1.5px solid var(--rule); border-radius: 20px; corner-shape: squircle;
  background: var(--paper); overflow: hidden;
}
.tocpop {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; padding: 11px 12px; border: 0; background: transparent; cursor: pointer;
  font: 700 .82rem/1.35 var(--sans); letter-spacing: -.014em; color: var(--ink); text-align: left;
}
.tocpop:hover { background: var(--rule-soft); }
/* the mark on the button: three rules, the way a list looks from across the room */
.tocbars { flex: none; width: 15px; display: grid; gap: 3px; }
.tocbars i { display: block; height: 2px; border-radius: 2px; background: var(--teal); }
.tocbars i:nth-child(2) { width: 68%; }
.tocbars i:nth-child(3) { width: 84%; }
.tocnow {
  flex: 1; min-width: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tocnow b { color: var(--teal-deep); font-variant-numeric: tabular-nums; margin-right: 5px; }
.tocchev { flex: none; color: var(--ink-faint); font-size: .7rem; line-height: 1; transition: transform .2s ease; }
html[data-toc="shut"] .tocchev { transform: rotate(180deg); }
.toc {
  list-style: none; margin: 0; padding: 6px 6px 8px; border-top: 1px solid var(--rule-soft);
  position: relative;                 /* the entries measure themselves against this list */
  max-height: calc(100vh - 220px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.toc li a {
  display: flex; gap: 11px; align-items: baseline; padding: 8px 10px;
  color: var(--ink-soft); text-decoration: none;
  font: 400 .875rem/1.45 var(--sans); letter-spacing: -.008em;
  border-radius: var(--r-md); corner-shape: squircle;
}
.toc li a:hover { color: var(--ink); background: var(--rule-soft); }
/* the number a student says out loud, set to be found by eye */
.toc .tn {
  font: 700 .92rem/1.35 var(--sans); color: var(--ink-faint); min-width: 1.45em;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right;
}
.toc .tt { flex: 1; }
.toc li a em {
  align-self: center; padding: 4px 7px; border-radius: 999px;
  font: 800 .58rem/1 var(--sans); font-style: normal; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber-deep); background: var(--amber-wash);
}
.toc li a.here {
  color: var(--teal-deep); font-weight: 700; background: var(--teal-wash);
  box-shadow: inset 0 0 0 1.5px var(--teal-pale); border-radius: 14px;
}
.toc li a.here .tn { color: var(--teal-deep); }
/* a group heading: the same face, one weight up and a little air above it */
.toc li.tgroup a {
  margin-top: var(--s2); font: 700 .9rem/1.4 var(--sans); letter-spacing: -.02em;
  text-transform: none; color: var(--ink);
}
.toc li.tgroup:first-child a { margin-top: 0; }
.sidemeta {
  margin: 0; padding: 9px 14px; border-top: 1px solid var(--rule-soft);
  font: 400 .74rem/1 var(--sans); color: var(--ink-faint);
}

/* shut: the rail is the button and nothing else, stood on its end */
html[data-toc="shut"] .toc, html[data-toc="shut"] .sidemeta, html[data-toc="shut"] .tocnow,
html[data-toc="shut"] .tocchev { display: none; }
html[data-toc="shut"] .tocpop { justify-content: center; padding: 12px 0; }
html[data-toc="shut"] .tocbars { width: 17px; }

@media (max-width: 1180px) {
  .layout, html[data-toc="shut"] .layout { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .side { position: sticky; top: 62px; z-index: 20; }
  .toc { column-count: 2; column-gap: var(--s4); max-height: min(52vh, 420px); }
  /* an entry is one thing: it does not break across the two columns */
  .toc li { break-inside: avoid; }
  .sidemeta { display: none; }
  /* shut is the resting state on a narrow page: the button, and the page under it */
  html[data-toc="shut"] .tocpop { justify-content: flex-start; padding: 11px 12px; }
  html[data-toc="shut"] .tocnow, html[data-toc="shut"] .tocchev { display: block; }
  html[data-toc="shut"] .tocbars { width: 15px; }
}
@media (max-width: 620px) { .toc { column-count: 1; } }

/* the brief, shown flat inside a subject page. The card runs the width of the index, but the
   prose inside it keeps the same measure as a note page — a table or a diagram may use the
   whole card, a sentence may not. */
/* the block heading above it already rules this off, so it carries no rule of its own */
.sheet.flat {
  max-width: none; margin: 0; border: 0;
  padding: 0 0 var(--s5);
}
.sheet.flat > :first-child { margin-top: 0; }
.sheet.flat .eyebrow { margin-top: var(--s4); }
.sheet.flat p, .sheet.flat ul, .sheet.flat ol, .sheet.flat blockquote,
.sheet.flat h2.group, .sheet.flat section > h3, .sheet.flat .meta,
.sheet.flat figcaption, .sheet.flat .q { max-width: 43rem; }

/* a group heading inside a long document */
h2.group {
  margin: var(--s7) 0 var(--s4); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule); color: var(--ink);
  font: 800 1.74rem/1.16 var(--sans); letter-spacing: -.035em;
  scroll-margin-top: 84px;
}
.sheet h4 {
  margin: var(--s4) 0 var(--s2); font: 700 1.1rem/1.4 var(--sans);
  letter-spacing: -.024em; color: var(--ink);
}

/* ============================================================ the parts of a unit, as tabs
   The theory, the worked examples, the test and its scheme are four views of one unit, so
   they sit in a single strip across the top of the sheet — the tab you are on a teal pill,
   the mock at the far end — rather than as loose buttons stacked above the title. */
.unitbar {
  display: flex; align-items: center; gap: var(--s4);
  margin: 0 0 var(--s3);
  border-bottom: 1px solid var(--rule);
}
.parts { display: flex; align-items: center; gap: var(--s1); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.parts::-webkit-scrollbar { display: none; }
.parts a {
  display: inline-flex; align-items: center; padding: 8px 13px;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 700 .82rem/1 var(--sans); letter-spacing: -.005em; white-space: nowrap;
  color: var(--ink-faint); text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.parts a:hover { color: var(--ink); border-color: var(--rule); }
.parts a.on { color: var(--teal-deep); border-color: var(--teal-pale); background: var(--teal-wash); }
/* the way from a unit into a mock in the app: the page's one main action, so green */
.unitmock {
  flex: none; margin-left: auto; display: inline-flex; align-items: center;
  min-height: 36px; padding: 7px 13px;
  border: 1.5px solid var(--go); border-radius: 14px; corner-shape: squircle;
  font: 800 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none; background: var(--go); white-space: nowrap;
  transition: transform .12s ease, background-color .15s, border-color .15s, box-shadow .15s;
}
.unitmock:hover { background: var(--go-deep); border-color: var(--go-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--lift); }
.unitmock:active { transform: translateY(0) scale(.97); }
@media (max-width: 620px) {
  .unitbar { flex-wrap: wrap; gap: 0 var(--s3); padding-bottom: var(--s1); }
  .parts { flex: 1 1 100%; gap: var(--s3); }
  .unitmock { margin: 0 0 var(--s1) auto; }
}
.donebar .doneacts { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ============================================================ answers, read, pager */
.reveal { margin: var(--s1) 0 0; }
.btn-reveal, .btn-done {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px;
  font: 800 .76rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; padding: 9px 18px;
  border-radius: 14px; corner-shape: squircle;
  border: 1.5px solid var(--teal-pale); background: transparent; color: var(--teal-deep);
  transition: transform .12s ease, background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-reveal:hover, .btn-done:hover { background: var(--teal-wash); border-color: var(--teal); transform: translateY(-1px); box-shadow: var(--lift); }
.btn-reveal:active, .btn-done:active { transform: translateY(0) scale(.97); }
section.answers:not(.open) > :not(h3):not(.reveal) { display: none; }
.btn-done.is-done { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-done.is-done::before { content: "✓ "; }

.donebar {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule);
}
.donebar .nextlink { font: 700 .88rem/1.4 var(--sans); color: var(--teal-deep); text-decoration: none; }
.donebar .nextlink:hover { text-decoration: underline; text-underline-offset: 3px; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s5); }
.pager a {
  display: block; padding: var(--s3) var(--s4); border: 1.5px solid var(--rule);
  border-radius: 20px; corner-shape: squircle; background: var(--paper);
  text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pager a:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--lift); }
.pager a span { display: block; font: 700 .8rem/1 var(--sans); color: var(--ink-faint); }
.pager a b { display: block; margin-top: 7px; font: 800 .98rem/1.42 var(--sans); letter-spacing: -.024em; color: var(--ink); }
.pager .next { grid-column: 2; text-align: right; }
@media (max-width: 620px) { .pager { grid-template-columns: 1fr; } .pager .next { grid-column: 1; text-align: left; } }

/* ============================================================ foot */
.sitefoot { border-top: 1px solid var(--rule); background: var(--paper); }
.footin {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between;
  padding-top: var(--s4); padding-bottom: var(--s5);
  font: 400 .79rem/1.65 var(--sans); color: var(--ink-faint);
}
.footlinks { display: flex; gap: var(--s4); flex-wrap: wrap; }
.footin a { color: var(--teal-deep); text-decoration: none; }
.footin a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================ small screens */
/* The rail steps down as the landing page's does: below 860 the two section links fold away;
   below 520 Sign in goes (the footer carries it, and Start free reaches the app) and "SAT
   practice" says "SAT", so what stays is never smaller than 12px. */
@media (max-width: 860px) { .railnav a.hide-sm { display: none; } }
@media (max-width: 700px) {
  .railin, .railnav, .railend { gap: 16px; }
  .railend { margin-left: 0; }
  .brand { font-size: .96rem; letter-spacing: .16em; }
  .rail .btn-app { min-height: 36px; padding: 7px 13px; }
}
@media (max-width: 520px) {
  .railin { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .railnav, .railend { gap: 16px; }
  .railend { margin-left: 0; }
  .railnav a, .signin { font-size: .75rem; letter-spacing: .07em; }
  .railnav .long, .rail [data-signed-out-only] { display: none; }
  .rail .btn-app { min-height: 38px; padding: 8px 12px; font-size: .72rem; letter-spacing: .06em; }
  .brand { font-size: .9rem; letter-spacing: .12em; }
}
@media (max-width: 360px) {
  .railin, .railnav, .railend { gap: 11px; }
  .brand { font-size: .84rem; letter-spacing: .08em; }
}
@media (max-width: 760px) {
  .page { padding-top: var(--s5); }
  .pagehead { margin-bottom: var(--s5); }
  .rows .row a { grid-template-columns: 54px minmax(0, 1fr); gap: var(--s2) var(--s3); padding-left: var(--s2); padding-right: var(--s2); }
  .rows .rowtags { grid-column: 2; }
  .progress { margin-left: 0; }
}

@media print {
  .rail, .crumb, .side, .pager, .donebar, .sitefoot, .reveal, .parts, .unitbar { display: none !important; }
  .layout { max-width: none; }
  .layout { display: block; padding: 0; }
  section.answers:not(.open) > :not(h3):not(.reveal) { display: revert; }
}

/* the unit's test set, offered beside the unit heading it belongs to */
.unitparts {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  margin-left: auto; text-transform: none; letter-spacing: 0;
}
.unitparts .partslabel { font: 700 .8rem/1 var(--sans); color: var(--ink-faint); }
.unitparts a {
  font: 700 .78rem/1 var(--sans); letter-spacing: 0; text-decoration: none; color: var(--ink-soft);
  padding: 8px 12px; border: 1.5px solid var(--rule); background: none;
  border-radius: 999px;
  transition: transform .12s, border-color .15s, color .15s, background-color .15s;
}
.unitparts a:hover { transform: translateY(-1px); border-color: var(--teal); color: var(--teal-deep); background: var(--teal-wash); }
.endnote { margin: var(--s6) 0 0; font: 400 .83rem/1.65 var(--sans); color: var(--ink-faint); }

/* an unnumbered section sits a step in from the numbered ones */
.toc li.tsub a { padding-left: 25px; font-size: .81rem; }
@media (max-width: 1080px) { .toc li.tsub a { padding-left: 12px; } }

/* quotations: a short one is a pull quote, a long one is a passage to read */
blockquote p { margin: 0; }
blockquote p + p { margin-top: .8em; }
blockquote.long {
  font: 400 1.04rem/1.7 var(--sans); color: var(--ink-soft);
  background: transparent; border-color: var(--rule);
}
blockquote.long strong { color: var(--ink); }

/* checkboxes, as the SAT practice page draws them: round, with a drawn tick */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink-faint) 55%, transparent); background: var(--paper) center / 12px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
input[type=checkbox]:hover { border-color: var(--teal); }
input[type=checkbox]:checked { background-color: var(--teal); border-color: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
input[type=checkbox]:active { transform: scale(.9); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .card, .pager a, .btn-app, .cta, .unitmock, .btn-reveal, .btn-done, .unitparts a { transition: none; }
  .card:hover, .pager a:hover, .btn-app:hover, .cta:hover, .unitmock:hover, .btn-reveal:hover, .btn-done:hover, .unitparts a:hover { transform: none; }
}

/* ============================================================ between pages
   Moving from page to page, the rail holds still and the page under it settles in: the old
   one fades out quickly, the new one fades up a few pixels. Short enough to read as the site
   answering, never as a show. Browsers without view transitions simply change page. */
@view-transition { navigation: auto; }
.rail { view-transition-name: rail; }
::view-transition-group(rail), ::view-transition-old(rail), ::view-transition-new(rail) { animation: none; }
::view-transition-old(root) { animation: 120ms ease-out both vt-out; }
::view-transition-new(root) { animation: 220ms cubic-bezier(.2, .7, .2, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ============================================================ as an app, and under a finger
   No grey flash on tap, no double-tap zoom delay, no zoom into a field on iPhone, and the lift
   a card gives under a pointer is left out on touch screens, where it would stick after a tap. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, label, select, [role=button] { touch-action: manipulation; }
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, 1em); }
}
@media (hover: none) {
  .card:hover, .pager a:hover, .btn-app:hover, .cta:hover, .unitmock:hover, .btn-reveal:hover, .btn-done:hover, .unitparts a:hover { transform: none; box-shadow: none; }
}