/* ==========================================================================
   AgentCore teaching workspace — shared stylesheet
   --------------------------------------------------------------------------
   Editorial field manual, not a course platform.

     Warm paper, dark ink, one muted brick-red accent.
     Real margin notes in the right rail; that rail always has a job.
     Two callout types only: a quiet note, and a serious constraint.
     No rounded panels, no tinted alert boxes, no colour-only distinctions.
     Print is a first-class composition, not a restyled screen page.

   Every colour pair in here has been contrast-checked. Body ink is 16.6:1 on
   paper; the faintest text token is 5.5:1 on paper and 5.0:1 on the inset
   surface, so retrieval dates and metadata clear AA rather than sitting just
   under it as they used to.
   ========================================================================== */

/* ------------------------------------------------------------------ font --- */
/*
   EB Garamond is self-hosted, not merely named. Two Latin-subset variable
   files, 92KB total. Naming a font that may not be installed left the whole
   serif aesthetic to whatever the device happened to have, and left PDF
   output unpredictable — which is unacceptable when the artifacts are meant
   to be printed. SIL Open Font License 1.1; see assets/fonts/LICENSE.
*/

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/eb-garamond-latin-var.woff2") format("woff2-variations"),
       url("fonts/eb-garamond-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/eb-garamond-latin-var-italic.woff2") format("woff2-variations"),
       url("fonts/eb-garamond-latin-var-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* ---------------------------------------------------------------- tokens --- */

:root {
  /* Warm paper and dark ink. One accent, used only for genuine caution and
     for the thing on the page that must be noticed. */
  /* Matched exactly to the ground and box fills the diagrams render with under the
     `look:tufte` style, so a figure sits on the page rather than on a white plate.
     Page and figures are one document. */
  --bg:          #fffff8;   /* paper, = diagram ground                     */
  --paper:       #f8f8f1;   /* inset surface, = diagram box fill           */
  --ink:         #1c1a17;   /* body text                    16.6:1 on paper */
  --ink-sec:     #4f4740;   /* captions, sidenotes           8.7:1         */
  --ink-faint:   #6e6459;   /* metadata, retrieval dates     5.5:1         */
  --accent:      #8c2f22;   /* muted brick red               7.9:1         */
  --line:        #ded5c5;   /* hairline separators (decorative)             */
  --line-strong: #8f8474;   /* interactive control borders   3.5:1         */

  --serif: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* The measure is expressed in rem, not ch.
     `ch` resolves against each element's own font-size, so `max-width: 64ch`
     gave h2 a 913px measure and body prose a 655px one — four different right
     edges on a single page, with heading rules overshooting their own text by
     258px. One measure, one right edge. */
  --measure: 41rem;    /* ~65 characters at body size */
  --rail:    16rem;    /* right-hand rail: margin notes, contents, progress */
  --gap:     2.5rem;

  --step--1: 0.8125rem;
  --step-0:  clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);
  --step-1:  clamp(1.25rem,   1.18rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.5rem,    1.35rem + 0.8vw,  1.875rem);
  --step-3:  clamp(2rem,      1.6rem  + 2vw,    2.75rem);
}

/* ----------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.25rem 6rem;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.62;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

/* Layout: a text column plus a right rail. The rail always carries something —
   margin notes on lessons, a contents list on reference cards, the route panel
   and progress on the index. It is never reserved and left empty. */
.page {
  max-width: calc(var(--measure) + var(--rail) + var(--gap));
  margin: 0 auto;
}

.page > * { max-width: var(--measure); }

/* Elements that may use the rail's width as well as the measure. */
.page > .wide,
.page > figure,
.page > .quiz,
.page > table,
.page > .table-wrap,
.page > .card-grid { max-width: 100%; }

/* ------------------------------------------------------------ typography --- */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.011em;
  text-wrap: balance;
}

h1 { font-size: var(--step-3); margin: 0 0 0.3rem; }

/* No default underline. A rule under every h2 turned a hairline into the most
   repeated element on the page, and it was also the element whose width did
   not match its own text. Space does this work; `hr` marks a real break. */
h2 {
  font-size: var(--step-2);
  margin: 3.25rem 0 0.9rem;
}

h3 { font-size: var(--step-1); margin: 2.25rem 0 0.5rem; }

h4 {
  font-size: var(--step--1);
  margin: 1.75rem 0 0.4rem;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-sec);
}

p { margin: 0 0 1.1rem; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

strong { font-weight: 600; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--paper);
  padding: 0.08em 0.3em;
  font-variant-numeric: tabular-nums;
}

pre {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--paper);
  border-left: 2px solid var(--line-strong);
  padding: 0.9rem 1rem;
  overflow-x: auto;
}
pre code { background: none; padding: 0; font-size: 1em; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin-bottom: 0.4rem; }
li > ul, li > ol { margin-top: 0.4rem; margin-bottom: 0.4rem; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3.25rem 0;
}

/* ------------------------------------------------------- page furniture --- */

.lesson-head { margin-bottom: 2.5rem; }

.lesson-head__meta {
  font-family: var(--sans);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: baseline;
  margin-bottom: 0.9rem;
}
.lesson-head__meta .sep { color: var(--line-strong); }

.lesson-head__standfirst {
  font-size: var(--step-1);
  line-height: 1.42;
  color: var(--ink-sec);
  margin: 0.8rem 0 0;
  text-wrap: pretty;
}

/* Badges differ by type and border, not by fill. A GA badge and a preview
   badge must still read differently in greyscale and on a printed page. */
.badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1em 0.45em;
  border: 1px solid currentColor;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.badge--ga      { color: var(--ink); }
.badge--preview { color: var(--accent); border-style: dashed; }
.badge--none    { color: var(--ink-faint); border-style: dotted; }

/* --------------------------------------------------------------- callouts --- */
/*
   Two only.

   `.note` — a quiet aside. Sits in the rail on wide screens, indented inline
             below that. No fill, no rounding.
   `.warn` — a real constraint: something that will cost the reader if missed.
             Brick rule, restrained fill, and the only place colour raises
             its voice.

   The five tinted, rounded, coloured-left-border variants this replaces were
   the most repeated visual element in the project (51 instances across 13
   pages) and flattened hierarchy: a hard Canada limitation looked much like a
   phrasing suggestion.
*/

.note {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-sec);
  margin: 1.5rem 0;
  padding-left: 0.95rem;
  border-left: 1px solid var(--line-strong);
}
.note > :last-child { margin-bottom: 0; }

/* "Read this next" — one primary AWS source per lesson. Slightly more weight than a
   plain aside, but still not a tinted panel. */
.note--source {
  border-left-width: 2px;
  border-left-color: var(--ink);
  color: var(--ink);
}
.note--source .label { color: var(--ink); }

.warn {
  margin: 1.75rem 0;
  padding: 0.9rem 0 0.9rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: linear-gradient(to right, rgba(140, 47, 34, 0.045), transparent 65%);
  break-inside: avoid;
}
.warn > :last-child { margin-bottom: 0; }

.label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 0.4rem;
  color: var(--ink-faint);
}
.warn .label { color: var(--accent); }

/* The single idea of a lesson. Typography, not a box — it should read as the
   most important sentence on the page, which a tinted panel never achieves
   once there are five tinted panels. */
.lede {
  font-size: var(--step-1);
  line-height: 1.4;
  margin: 2rem 0;
  padding: 1.1rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  text-wrap: pretty;
}
.lede > :last-child { margin-bottom: 0; }
.lede .label { color: var(--ink); }

/* What to actually say to a customer. A quotation, because that is what it
   is — not a fourth species of alert box. */
blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--line-strong);
  font-style: italic;
  text-wrap: pretty;
}
blockquote > :last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

/* ------------------------------------------------------------- the rail --- */
/*
   Margin notes proper. Citations belong beside the sentence that needed them,
   which is the one Tufte device this project genuinely earns.
*/

.sidenote {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-sec);
}

@media (min-width: 1100px) {
  .sidenote {
    float: right;
    clear: right;
    width: var(--rail);
    margin-right: calc(-1 * (var(--rail) + var(--gap)));
    margin-bottom: 1.1rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--line);
  }
  /* A note in the rail should not also be an indented note. */
  .sidenote.note { padding-left: 0.9rem; border-left-color: var(--line); }
}

/* Below the rail breakpoint a citation becomes a quiet indented line, not a
   full-width tinted block. Promoting every margin note to a panel added
   interruption and length on exactly the screens with least room. */
@media (max-width: 1099px) {
  .sidenote {
    display: block;
    margin: 0.7rem 0 1.1rem;
    padding-left: 0.85rem;
    border-left: 1px solid var(--line-strong);
  }
}

.sidenote a { word-break: break-word; }

.retrieved {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Rail furniture that is not a citation: contents lists, progress, routes.
   Unlike .sidenote, this is a direct child of .page, so its containing block is the
   full page width rather than the measure. It therefore floats to the page's right
   edge with no negative margin — applying the sidenote's negative margin here pushed
   it 296px past the viewport. */
.rail-panel {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-sec);
}
@media (min-width: 1100px) {
  .rail-panel {
    float: right;
    clear: right;
    width: var(--rail);
    margin: 0.3rem 0 1.5rem var(--gap);
    padding-left: 0.9rem;
    border-left: 1px solid var(--line);
  }
}
@media (max-width: 1099px) {
  .rail-panel {
    margin: 1.5rem 0;
    padding: 0.85rem 1rem;
    background: var(--paper);
  }
}
.rail-panel ul { list-style: none; padding: 0; margin: 0; }
.rail-panel li { margin-bottom: 0.3rem; }
.rail-panel .label { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------- figures --- */

figure { margin: 2.25rem 0; break-inside: avoid; }

figure svg,
figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

figcaption {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-sec);
  margin-top: 0.7rem;
  max-width: var(--measure);
}
figcaption b { color: var(--ink); font-weight: 600; }

/* Diagrams render around 350px on a phone, which is too small to read. An
   explicit escape hatch beats pinch-zooming a nested SVG. */
.figure-open {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  margin-top: 0.4rem;
}

/* The prose summary of a diagram is content, not a fallback. It is authored as a
   <span> inside <figcaption>, so it must be made a block: an inline element given a
   border-top draws that border on every line fragment, which renders as a
   strikethrough through the caption. */
.figure-summary {
  display: block;
  font-size: 0.98rem;
  color: var(--ink-sec);
  border-top: 1px solid var(--line);
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- tables --- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.95rem;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

caption {
  caption-side: top;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  padding-bottom: 0.5rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* `nowrap` on headers guaranteed overflow on narrow screens. Let them wrap. */
thead th {
  border-bottom: 2px solid var(--ink);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

td.num { text-align: right; }
.t-yes { font-weight: 600; }
.t-no  { font-weight: 600; color: var(--accent); }

table.compact { font-size: 0.87rem; }
table.compact th, table.compact td { padding: 0.35rem 0.5rem; }

/* Money always sets in tabular figures, everywhere, without opt-in. */
table.rates, table.rates td, table.rates th,
.money { font-variant-numeric: tabular-nums; }

/*
   Responsive tables, by container width rather than viewport, so a table
   behaves the same wherever it is placed.

     2 columns          stay tabular; they fit
     3-4 columns        become labelled rows, each cell keyed by data-label
     .table-wrap.scroll horizontal scroll with a sticky first column

   Six pages used to scroll horizontally at 390px, and the service map clipped
   its status column outright.
*/

.table-wrap { container-type: inline-size; margin: 1.75rem 0; }
.table-wrap > table { margin: 0; }

.table-wrap.scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap.scroll table { min-width: 34rem; }
.table-wrap.scroll th:first-child,
.table-wrap.scroll td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg);
}

@container (max-width: 34rem) {
  .table-wrap.stack table,
  .table-wrap.stack thead,
  .table-wrap.stack tbody,
  .table-wrap.stack tr,
  .table-wrap.stack th,
  .table-wrap.stack td { display: block; }

  .table-wrap.stack thead { display: none; }

  .table-wrap.stack tr {
    border-bottom: 2px solid var(--ink);
    padding: 0.7rem 0 0.5rem;
  }
  .table-wrap.stack tr:last-child { border-bottom: 0; }

  .table-wrap.stack td {
    border: 0;
    padding: 0 0 0.45rem;
  }
  .table-wrap.stack td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint);
    margin-bottom: 0.1rem;
  }
  .table-wrap.stack td:first-child {
    font-weight: 600;
    font-size: 1.02rem;
  }
  .table-wrap.stack td:first-child::before { content: none; }
}

/* ------------------------------------------------------------ card grids --- */
/* Reserved for genuine peer comparison. Unlike things in equal boxes read as
   interchangeable, which is how three memory strategies ended up looking like
   a product pricing table. */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  margin: 1.75rem 0;
  border-top: 1px solid var(--line);
}

.card {
  padding: 0.9rem 1.25rem 0.9rem 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.card + .card { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.card h4 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card p { font-size: 0.95rem; margin-bottom: 0.5rem; }

@media (max-width: 640px) {
  .card + .card { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------------------ gates --- */
/*
   Lesson-specific composition. The compute lesson is a decision with three gates, so
   the page is built as those gates rather than as topic sections around a diagram. Each
   gate states its question and both branches, and a branch either terminates in a
   destination or hands on to the next gate.
*/

.gates { margin: 2rem 0; border-top: 2px solid var(--ink); }

.gate {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}

.gate__n {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  padding-top: 0.2rem;
}

.gate__q {
  font-size: var(--step-1);
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 0.7rem;
  text-wrap: pretty;
}

.branch {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: 0 0.8rem;
  padding: 0.4rem 0;
  align-items: baseline;
}
.branch + .branch { border-top: 1px dotted var(--line); }

.branch__if {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.branch__then { font-size: 0.98rem; }

/* A branch that ends the decision, versus one that hands on to the next gate. */
.branch__dest { font-weight: 600; }
.branch--terminal .branch__dest { color: var(--accent); }
.branch--onward .branch__dest { color: var(--ink-sec); font-weight: 400; font-style: italic; }
.branch__why { display: block; color: var(--ink-sec); font-size: 0.94rem; margin-top: 0.1rem; }

@media (max-width: 560px) {
  .gate { grid-template-columns: 1fr; gap: 0.3rem; }
  .branch { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------------------------------------------------------------- ledger --- */
/*
   Lesson-specific composition. Memory bills on three meters, and the lesson's real
   structure is an account: what each meter charges, what fires it, what it came to in
   the worked example, and the lever that moves it. Set as a ledger the page teaches the
   shape of the bill, which a run of prose sections did not.
*/

.ledger {
  margin: 2rem 0;
  border-top: 2px solid var(--ink);
  font-variant-numeric: tabular-nums;
}

.ledger__entry {
  display: grid;
  grid-template-columns: 1.9rem 1fr 6.5rem 3.2rem;
  gap: 0 0.9rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.ledger__n {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.ledger__what { grid-column: 2; }
.ledger__name { font-weight: 600; }
.ledger__rate {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-left: 0.4rem;
  white-space: nowrap;
}
.ledger__fires {
  display: block;
  font-size: 0.94rem;
  color: var(--ink-sec);
  margin-top: 0.15rem;
}
.ledger__lever {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}
.ledger__lever b {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.92em;
  color: var(--ink-faint);
  font-weight: 700;
}

.ledger__amt   { text-align: right; font-weight: 600; }
.ledger__share { text-align: right; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); }

/* The line that is the whole point of the lesson. */
.ledger__entry--dominant .ledger__amt,
.ledger__entry--dominant .ledger__share { color: var(--accent); }
.ledger__entry--dominant .ledger__name { color: var(--accent); }

.ledger__total {
  display: grid;
  grid-template-columns: 1.9rem 1fr 6.5rem 3.2rem;
  gap: 0 0.9rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.9rem;
}
.ledger__total:last-child { border-bottom: 2px solid var(--ink); }
.ledger__total .ledger__what { font-weight: 700; }
.ledger__total .ledger__amt { font-weight: 700; }
.ledger__total--against { font-weight: 400; color: var(--ink-sec); }
.ledger__total--against .ledger__amt { font-weight: 400; }

@media (max-width: 560px) {
  .ledger__entry, .ledger__total {
    grid-template-columns: 1.9rem 1fr auto;
  }
  .ledger__amt   { grid-column: 3; grid-row: 1; }
  .ledger__share { grid-column: 2 / 4; text-align: left; margin-top: 0.3rem; }
}

/* --------------------------------------------------------- definition run --- */
/* Peers that are genuinely alternatives, set as a run of definitions rather than
   equal-sized cards. Cards made three strategies look like three products. */

.defs { margin: 1.5rem 0; border-top: 1px solid var(--line); }
.defs > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0 1.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.defs dt { font-weight: 600; font-family: var(--sans); font-size: 0.92rem; }
.defs dd { margin: 0; font-size: 0.96rem; }
.defs dd .answers {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}
@media (max-width: 560px) {
  .defs > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------------------------------------------------------------- quizzes --- */

.quiz {
  margin: 3rem 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
  break-inside: avoid;
}

.quiz__head {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
}

.quiz__intro {
  font-size: 0.95rem;
  color: var(--ink-sec);
  margin-bottom: 1.25rem;
}

.quiz__questions { list-style: none; margin: 0; padding: 0; counter-reset: q; }

.quiz__q {
  margin: 0 0 1.75rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--line);
  counter-increment: q;
}
.quiz__q:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.quiz__prompt { font-weight: 600; margin: 0 0 0.85rem; }
.quiz__prompt::before {
  content: counter(q) ". ";
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 0.9em;
}

.quiz__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.quiz__opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.quiz__opt:hover:not([disabled]) { background: var(--paper); border-color: var(--ink); }
.quiz__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz__opt[disabled] { cursor: default; }

.quiz__opt .key {
  display: inline-block;
  width: 1.3em;
  font-weight: 700;
  color: var(--ink-faint);
}

/* Verdict is carried by a mark and a weight, not by fill alone. */
.quiz__opt.is-correct { border-color: var(--ink); border-left-width: 4px; font-weight: 600; }
.quiz__opt.is-correct::after { content: " \2713"; font-weight: 700; }
.quiz__opt.is-wrong   { border-color: var(--accent); border-left-width: 4px; color: var(--accent); }
.quiz__opt.is-wrong::after { content: " \00d7"; font-weight: 700; }
.quiz__opt.is-muted { opacity: 0.55; }

.quiz__feedback {
  margin-top: 0.85rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line-strong);
  font-size: 0.95rem;
}
.quiz__feedback[data-state="wrong"] { border-left-color: var(--accent); }
.quiz__feedback > :last-child { margin-bottom: 0; }
.quiz__feedback .verdict {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.3rem;
}

.quiz__retry {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.7rem;
  padding: 0.35rem 0.7rem;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
}
.quiz__retry:hover { background: var(--paper); border-color: var(--ink); }
.quiz__retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.quiz__score {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
}
.quiz__score .hint {
  display: block;
  font-weight: 400;
  color: var(--ink-sec);
  margin-top: 0.3rem;
  font-size: 0.85rem;
}

.quiz__answer-fallback {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-sec);
  margin-top: 0.6rem;
}
.js-on .quiz__answer-fallback { display: none; }

/* ---------------------------------------------------------------- reveals --- */

.reveal { margin: 1.5rem 0; border-left: 1px solid var(--line-strong); break-inside: avoid; }

.reveal__btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.reveal__btn:hover { color: var(--accent); }
.reveal__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reveal__btn::before { content: "\25B8  "; color: var(--ink-faint); }
.reveal.is-open .reveal__btn::before { content: "\25BE  "; }

.reveal__body { padding: 0 0.9rem 0.5rem; }
.reveal__body > :last-child { margin-bottom: 0; }
.js-on .reveal:not(.is-open) .reveal__body { display: none; }

/* ---------------------------------------------------------------- sources --- */
/*
   Numbered sources, collected once per page. On screen a citation links to
   its entry; in print the entry carries the URL, so a printed page is
   traceable without a raw URL after every link destroying the line rag.
*/

.source-footer {
  margin: 3.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-sec);
}
.source-footer ol { columns: 2; column-gap: 2rem; padding-left: 1.2rem; }
.source-footer li { margin-bottom: 0.4rem; break-inside: avoid; }
.source-footer .url { display: none; color: var(--ink-faint); word-break: break-all; }

@media (max-width: 700px) { .source-footer ol { columns: 1; } }

sup.ref { font-size: 0.7em; line-height: 0; }
sup.ref a { text-decoration: none; }

/* ------------------------------------------------------- questions block --- */
/* Replaces the "I'm your teacher" panel that closed almost every page. The
   useful part of it was always the invitation, not the reassurance. */

.questions {
  margin: 3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--ink-sec);
}
.questions ul { list-style: none; padding: 0; }
.questions li { padding-left: 1.1rem; position: relative; }
.questions li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}
.questions > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- nav --- */

.lesson-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.88rem;
  max-width: 100% !important;
}

.lesson-nav a { display: block; text-decoration: none; color: var(--ink); }
.lesson-nav a:hover .lesson-nav__title { text-decoration: underline; }
.lesson-nav__dir {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.lesson-nav__title { font-weight: 600; }
.lesson-nav__next { text-align: right; margin-left: auto; }

.crumb {
  font-family: var(--sans);
  font-size: 0.78rem;
  margin-bottom: 1.5rem;
  color: var(--ink-faint);
}
.crumb a { color: var(--ink-sec); }

/* ------------------------------------------------------------- the index --- */

/* Two routes, stated before anything else. The reader's opening question is
   "I have a customer meeting tomorrow, what do I read?" — not "what files
   exist?" */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0;
  margin: 2rem 0 2.5rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.route { padding: 1.1rem 1.5rem 1.1rem 0; }
.route + .route { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.route h3 { margin: 0 0 0.3rem; font-size: var(--step-1); }
.route p { font-size: 0.95rem; color: var(--ink-sec); margin-bottom: 0.6rem; }
.route__time {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}
.route ol, .route ul { font-size: 0.95rem; margin-bottom: 0; }
@media (max-width: 640px) {
  .route + .route { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* The one action. */
.action {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--bg);
  background: var(--ink);
  padding: 0.6rem 1.1rem;
  margin: 0.5rem 0 0.3rem;
}
.action:hover { background: var(--accent); }
.action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.action__sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}

.course-list { list-style: none; padding: 0; margin: 1.5rem 0; }

.course-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.course-item__num {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.course-item__body a { font-weight: 600; font-size: var(--step-0); text-decoration: none; color: var(--ink); }
.course-item__body a:hover { text-decoration: underline; }
.course-item__desc { display: block; font-size: 0.94rem; color: var(--ink-sec); margin-top: 0.15rem; }
.course-item__time {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
.course-item.is-done .course-item__num::after { content: " \2713"; color: var(--ink); }

/* Duration must not compete with the title on a narrow screen. */
@media (max-width: 560px) {
  .course-item { grid-template-columns: 1.8rem 1fr; }
  .course-item__time { grid-column: 2; }
}

/* A milestone is a marker, not a green panel. */
.milestone {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin: 0.6rem 0 0.6rem 3.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ink);
}

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

body.reference { font-size: 1.03rem; }
body.reference .page { max-width: calc(58rem + var(--rail)); }
body.reference .page > * { max-width: 58rem; }
body.reference h2 { margin-top: 2.5rem; }

.ref-head {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.7rem;
  margin-bottom: 1.75rem;
}
.ref-head h1 { font-size: var(--step-2); }
.ref-head__sub {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-sec);
  margin: 0.45rem 0 0;
}

/* A card's governing idea belongs in its masthead, not in a separate panel
   below it — on paper that panel cost about 100px, which was the difference
   between three pages and four. */
.ref-head__thesis {
  font-size: 0.98rem;
  line-height: 1.45;
  margin: 0.6rem 0 0;
  text-wrap: pretty;
}

.ref-cols { columns: 2; column-gap: 2.25rem; }
.ref-cols > * { break-inside: avoid; }
@media (max-width: 800px) { .ref-cols { columns: 1; } }

.term { margin: 0 0 1rem; break-inside: avoid; }
.term dt { font-weight: 600; font-family: var(--sans); font-size: 0.92rem; }
.term dd { margin: 0.15rem 0 0; font-size: 0.98rem; color: var(--ink-sec); }
.term dd .avoid {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 0.15rem;
}

/* Availability lists: two real sections, not a two-column layout table
   wrapping bulleted lists that could never collapse on a phone. */
.avail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0 2rem;
  margin: 1.5rem 0;
}
.avail section { break-inside: avoid; }
.avail h3 { margin-top: 0; font-size: var(--step-0); }
.avail ul { list-style: none; padding: 0; font-size: 0.96rem; }
.avail li { padding: 0.22rem 0; border-bottom: 1px solid var(--line); }
.avail .where { display: block; font-size: 0.82rem; color: var(--ink-faint); font-family: var(--sans); }

/* ------------------------------------------------------------- utilities --- */

.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;
}

.muted  { color: var(--ink-sec); }
.faint  { color: var(--ink-faint); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.small  { font-size: 0.9rem; }
.sans   { font-family: var(--sans); }
.page-break { break-before: page; }
.screen-only { }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   PRINT
   ---------------------------------------------------------------------------
   A separate composition, not a restyled screen page.

   Reference cards are meant to be carried into a meeting, so each has a page
   budget. Getting there needed four things: a denser type scale, sources
   collected into a numbered footer instead of a URL appended after every
   link, margin notes kept in the margin where the page is wide enough, and
   explicit page breaks where an artifact is a set of cards rather than one
   document.
   =========================================================================== */

@media print {
  :root {
    --bg:          #fff;
    --paper:       #f2f0eb;
    --ink:         #000;
    --ink-sec:     #2b2b2b;
    --ink-faint:   #474747;
    --accent:      #000;
    --line:        #b0b0b0;
    --line-strong: #6b6b6b;

    --measure: 100%;
    --step--1: 7.6pt;
    --step-0:  9.6pt;
    --step-1:  11pt;
    --step-2:  12.5pt;
    --step-3:  17pt;
  }

  /* 13/12mm still leaves a comfortable thumb margin and a safe non-printable edge on
     every desk printer, while returning about 4mm of column height per page — which on a
     two-column card is worth roughly 60px of content. */
  @page {
    margin: 13mm 12mm;
  }

  body {
    font-size: 9.6pt;
    line-height: 1.36;
    padding: 0;
    background: #fff;
  }

  .page, .page > * { max-width: 100% !important; }

  h1 { font-size: 17pt; }
  h2 { font-size: 12.5pt; margin: 0.9rem 0 0.35rem; break-after: avoid; }
  h3 { font-size: 10.6pt; margin: 0.7rem 0 0.25rem; break-after: avoid; }
  h4 { margin: 0.6rem 0 0.2rem; break-after: avoid; }
  p  { margin: 0 0 0.5rem; }
  ul, ol { margin: 0 0 0.5rem; }
  li { margin-bottom: 0.12rem; }

  a { color: #000; text-decoration: none; font-weight: 600; }

  /* Sources are numbered once at the end. No inline URL expansion: appending
     the href after every link is what turned a two-page card into four. */
  a[href^="http"]::after { content: none !important; }

  .source-footer {
    margin-top: 0.45rem;
    padding-top: 0.3rem;
    font-size: 7pt;
    line-height: 1.3;
    break-inside: avoid;
  }
  .source-footer ol { columns: 2; column-gap: 1.2rem; }
  .source-footer .url { display: inline; }

  /* Margin notes stay in the margin. A4 minus 26mm of gutter leaves room for
     a 30mm rail, which is what a sidenote needs. */
  .sidenote {
    float: right;
    clear: right;
    width: 30mm;
    margin: 0 0 0.4rem 3mm;
    padding-left: 2mm;
    border-left: 0.4pt solid #999;
    font-size: 7.2pt;
    line-height: 1.3;
    background: none !important;
  }

  .note {
    font-size: 8.6pt;
    margin: 0.5rem 0;
    padding-left: 3mm;
    border-left: 0.5pt solid #666;
  }

  .warn {
    margin: 0.6rem 0;
    padding: 0.35rem 0 0.35rem 3mm;
    border-left: 2pt solid #000;
    background: none !important;
    break-inside: avoid;
  }

  .lede {
    font-size: 11pt;
    margin: 0.7rem 0;
    padding: 0.4rem 0;
    border-top: 1.5pt solid #000;
    border-bottom: 0.5pt solid #999;
    break-inside: avoid;
  }

  blockquote { margin: 0.6rem 0; padding-left: 3mm; border-left: 1pt solid #666; }

  table { font-size: 8.4pt; margin: 0.6rem 0; }
  th, td { padding: 0.16rem 0.3rem; }
  table.compact { font-size: 8pt; }
  /* Field cards are mostly table. Tightening the row box is where the page budget is
     won or lost — a 13-row table saves about 60px at this padding. */
  body.reference table { font-size: 8.2pt; }
  body.reference th, body.reference td { padding: 0.1rem 0.28rem; }
  body.reference caption { padding-bottom: 0.2rem; }
  thead { display: table-header-group; }
  thead th { border-bottom: 1pt solid #000; font-size: 7.4pt; }

  /* Container-query stacking is a small-screen affordance, never a print one:
     paper is wide and a stacked table wastes it. */
  .table-wrap { container-type: normal; }
  .table-wrap.scroll { overflow: visible; }
  .table-wrap.scroll table { min-width: 0; }
  .table-wrap.scroll th:first-child,
  .table-wrap.scroll td:first-child { position: static; }

  figure { margin: 0.7rem 0; break-inside: avoid; }
  /* 70mm keeps a seven-box diagram legible on paper while leaving room for the
     card's front matter and its first pattern to share page one. Measured: the
     figure is the only element large enough to decide pagination. */
  figure svg, figure img { max-height: 62mm; }
  figcaption { font-size: 7.6pt; margin-top: 0.3rem; }
  .figure-summary { font-size: 8.4pt; margin-top: 0.4rem; padding-top: 0.3rem; }
  .figure-open { display: none !important; }

  .card-grid { gap: 0; }
  .card { padding: 0.4rem 0.6rem 0.4rem 0; break-inside: avoid; }

  .avail { gap: 0 6mm; }
  .avail li { padding: 0.1rem 0; }

  /* Prose-heavy cards set in two columns on paper. A 184mm measure at 8.6pt is far
     wider than comfortable for reading anyway, so columns improve the card and halve
     its length at the same time. On screen it stays one column. */
  .cols-print-2 { columns: 2; column-gap: 6mm; }
  .cols-print-2 h2 { break-after: avoid; margin-top: 0.7rem; }
  .cols-print-2 > h2:first-child { margin-top: 0; }
  .cols-print-2 .warn, .cols-print-2 ul, .cols-print-2 ol { break-inside: avoid; }
  /* A long rate table is taller than a column, so it must be allowed to flow across
     one. `thead` repeats, so a split table still carries its headers. */
  .cols-print-2 .table-wrap, .cols-print-2 table { break-inside: auto; }
  .cols-print-2 tr { break-inside: avoid; }

  /* A glossary is short definitions, so paper can carry three columns where a
     screen carries two. This is the difference between three sides and two. */
  body.reference .ref-cols { columns: 3; column-gap: 5mm; }
  .term { margin-bottom: 0.25rem; }
  .term dt { font-size: 8.2pt; }
  .term dd { font-size: 8.2pt; }

  /* A printout is a study aid: everything hidden behind an interaction opens. */
  .reveal { break-inside: avoid; }
  .reveal__body { display: block !important; padding: 0 0 0.3rem 3mm; }
  .reveal__btn { padding: 0.2rem 0 0.2rem 3mm; font-weight: 700; }
  .reveal__btn::before { content: "" !important; }
  .quiz__answer-fallback { display: block !important; }
  .quiz { break-inside: auto; margin: 1rem 0 0; }
  .quiz__q { break-inside: avoid; margin-bottom: 0.7rem; padding-bottom: 0.5rem; }
  .quiz__opt { border-color: #999; padding: 0.2rem 0.4rem; font-size: 8.4pt; }
  .quiz__retry { display: none !important; }

  /* Chrome that means nothing on paper. */
  .lesson-nav, .crumb, .print-hide, .rail-panel, .routes, .action,
  .screen-only { display: none !important; }

  .questions { margin-top: 1rem; padding-top: 0.4rem; font-size: 8.6pt; }

  /* Artifacts that are a set of cards, not one document, break per card. */
  .card-page { break-before: page; }
  .card-page:first-of-type { break-before: avoid; }
}