/* AI4BCM site — layout and components.
 * Every value here comes from tokens.css. Nothing invents a size: an edit that
 * seems to need a new step needs a different step or a different weight. */

@import url("tokens.css");
@import url("fonts.css");

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

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

body {
  margin: 0;
  background: var(--surface-warm-canvas);
  color: var(--color-pewter);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

code {
  font-family: var(--font-mono);
  /* Inherit the size rather than take the browser's monospace reduction, which
   * lands between two steps of the scale. */
  font-size: inherit;
}

/* ---------- The frame: one content column, ruled rather than shadowed ------ */

.frame {
  max-width: var(--page-max-width);
  margin: 0 auto;
  border-left: 1px solid var(--color-sand);
  border-right: 1px solid var(--color-sand);
}

.pad {
  padding-left: var(--spacing-48);
  padding-right: var(--spacing-48);
}

.rule-top {
  border-top: 1px solid var(--color-sand);
}

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

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
}

.display {
  margin: var(--spacing-24) 0 0;
  font-family: var(--font-display);
  /* The scale's display step, allowed to step down on narrow screens rather
   * than to wrap into a stack of orphans. Ceiling is the token: 64px. */
  font-size: clamp(38px, 8.4vw, var(--text-display));
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink-black);
  text-wrap: balance;
}

.lede {
  margin: var(--spacing-24) 0 0;
  max-width: 34em;
  font-size: var(--text-subheading);
  line-height: 1.5;
  letter-spacing: var(--tracking-subheading);
  color: var(--color-pewter);
}

.section-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink-black);
}

/* ---------- Nav ----------------------------------------------------------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-24);
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
  border-bottom: 1px solid var(--color-sand);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-ink-black);
  text-decoration: none;
}

.wordmark span {
  color: var(--color-ember-orange);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-24);
  margin-left: auto;
  list-style: none;
  padding: 0;
}

.nav-links a {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-slate);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-ink-black);
  border-bottom-color: var(--color-ember-orange);
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 12px var(--spacing-24);
  border-radius: var(--radius-buttons);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--color-ember-orange);
  color: var(--color-pure-white);
}

.btn-primary:hover {
  background: var(--color-burnt-rust);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-ink-black);
  color: var(--color-ink-black);
}

.btn-secondary:hover {
  border-color: var(--color-ember-orange);
  color: var(--color-ember-orange);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--element-gap);
  margin-top: var(--spacing-32);
}

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-64);
}

/* ---------- The question box --------------------------------------------- */

.ask {
  padding-top: var(--spacing-48);
  padding-bottom: var(--spacing-64);
}

/* ---------- The route panel (issue 12) ------------------------------------ */

/* The panel sits to the left of the box on desktop and above it on a phone,
 * where there is no "left of". One grid, two columns; the panel's own internal
 * grid is what keeps the connector ends on the labels. */
.ask-layout {
  display: grid;
  /* 460px is not a taste: it is the width at which the second route's note —
   * `Claude, Codex, Copilot, ChatGPT` — stays on one line, which is what keeps
   * the three label blocks the same height and the curve ends on the same three
   * numbers. Below it the list wraps and the fan tilts. */
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: var(--spacing-32);
  align-items: center;
}

/* Node | connectors | routes. The middle column is exactly the SVG's width and
 * the rows are exactly its height divided by three, so the curve endpoints are
 * arithmetic: 32, 96 and 160 in a 192-tall box, meeting rows whose centres are
 * at the same three numbers. */
.routes {
  display: grid;
  grid-template-columns: minmax(0, auto) 56px minmax(0, 1fr);
  grid-template-rows: repeat(3, 64px);
  align-items: center;
}

.routes-node {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-md);
  background: var(--surface-card-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink-black);
}

.routes-wires {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  /* Fixed, never scaled: a stretched viewBox would thin the strokes unevenly
   * and pull the endpoints off the rows the whole layout exists to hit. */
  flex: none;
}

.routes-list {
  grid-column: 3;
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: repeat(3, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.route {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--spacing-8) var(--spacing-12);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.route-name {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink-black);
  border-bottom: 1.5px solid transparent;
  align-self: flex-start;
}

.route-note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-warm-gray);
}

.route:hover .route-name {
  color: var(--color-ember-orange);
  border-bottom-color: var(--color-ember-orange);
}

/* The third branch is the live one, so its label carries the accent the
 * connector does. */
.route-ask .route-name {
  color: var(--color-burnt-rust);
}

/* Nothing on this page had a focus ring; three controls that exist to be driven
 * from the keyboard cannot be the place that carries on without one. */
.route:focus-visible {
  outline: 2px solid var(--color-ember-orange);
  outline-offset: 2px;
}

/* Where the third branch leaves the panel and runs into the box. It takes the
 * width the label does not, and the negative margin carries it across the grid
 * gap to the box's own border, so the branch ends on the box rather than near
 * it. No arrowhead: the other two connectors are plain lines, and one arrow
 * among three lines reads as a different kind of mark.
 *
 * `preserveAspectRatio="none"` is safe here and only here — the path is a single
 * horizontal line, and `vector-effect` keeps its weight at 1.5px however far the
 * column stretches. */
.route-tail {
  flex: 1 1 auto;
  min-width: var(--spacing-32);
  margin-left: var(--spacing-12);
  margin-right: calc(-1 * var(--spacing-32));
}


.ask-frame {
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-3xl-2);
  /* Canvas, not white: the field inside it is the white surface, and white on
   * white leaves the only interactive control on the page invisible. */
  background: var(--surface-warm-canvas);
  padding: var(--spacing-32);
}

.ask-label {
  display: block;
  margin-bottom: var(--spacing-16);
}

.ask-bar {
  display: flex;
  align-items: center;
  gap: var(--element-gap);
  min-height: 56px;
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-20);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-2xl-2);
  background: var(--surface-card-white);
}

/* The input has no border of its own — the bar is its visible edge, so the bar
 * is what has to show focus. Without this, `Ask it` moves the cursor into a
 * field that looks exactly as it did a moment ago, which is the same as not
 * having moved it (issue 12, and the contract 14 inherits). */
.ask-bar:focus-within {
  border-color: var(--color-ember-orange);
  outline: 2px solid var(--color-ember-orange);
  outline-offset: 2px;
}

.ask-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-black);
}

.ask-input::placeholder {
  color: var(--color-stone);
}

.ask-send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-full-6);
  background: var(--color-ember-orange);
  color: var(--color-pure-white);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ask-send:hover {
  background: var(--color-burnt-rust);
}

.ask-note {
  margin: var(--spacing-16) 0 0;
  max-width: 74ch;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-warm-gray);
}

.ask-form {
  margin: 0;
}

/* ---------- Asking: the progress state ------------------------------------ */

/* Measured on the live endpoint 2026-09-10: 1.3 s to 46.6 s, and the spread is
 * which upstream provider the zero-retention pool picks rather than how long the
 * answer is. A silent spinner for forty seconds is a dead control in front of
 * someone at a conference booth, so the region says what is happening, counts
 * out loud, and once it admits to being slow offers the download instead. */
.ask-progress {
  margin-top: var(--spacing-24);
  border-top: 1px solid var(--color-sand);
  padding-top: var(--spacing-20);
}

.ask-progress[hidden],
.ask-general[hidden],
.ask-answer[hidden],
.ask-progress-out[hidden],
.ask-cites-label[hidden],
.ask-answer-cta[hidden] {
  display: none;
}

.ask-progress-bar {
  height: 2px;
  overflow: hidden;
  background: var(--color-sand);
}

.ask-progress-bar span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--color-ember-orange);
  animation: ask-sweep 1.4s ease-in-out infinite;
}

@keyframes ask-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

/* The seconds are the honest part of the progress state, so they must survive a
 * reduced-motion setting: only the sweep stops, and it becomes a full rule. */
@media (prefers-reduced-motion: reduce) {
  .ask-progress-bar span {
    animation: none;
    width: 100%;
  }
}

.ask-progress-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin: var(--spacing-12) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-warm-gray);
}

.ask-elapsed {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--color-stone);
}

.ask-progress-out {
  margin: var(--spacing-12) 0 0;
  max-width: 60ch;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-warm-gray);
}

/* ---------- The answer, and every other thing the box can say -------------- */

.ask-answer {
  margin-top: var(--spacing-24);
  border-top: 1px solid var(--color-charcoal);
  padding-top: var(--spacing-20);
}

.ask-answer-body p {
  margin: var(--spacing-12) 0 0;
  max-width: 68ch;
}

.ask-cites-label {
  margin: var(--spacing-24) 0 var(--spacing-12);
}

.ask-cites {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A citation is a chip and not a footnote: it is the answer's evidence, and the
 * whole premise of AI4BCM is that it is there to be clicked and read. */
.ask-cite {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-2xl);
  background: var(--surface-card-white);
  text-decoration: none;
  color: var(--color-ink-black);
}

a.ask-cite:hover {
  border-color: var(--color-ember-orange);
  color: var(--color-ember-orange);
}

.ask-cite-title {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
}

.ask-cite-unit {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-warm-gray);
}

/* ---------- General practice, and why it looks unlike the answer ----------
 * Issue 19: the box answers a fair continuity question the Guidance is silent
 * on, and a reader must be able to tell that apart at a glance rather than by
 * reading carefully. So this block is not styled as more answer: it steps out
 * of the answer's measure with its own rule and its own left edge, its mark sits
 * above it in mono like every other eyebrow on the page, and it carries no
 * citation chips because there is nothing to cite. The ember accent is
 * deliberately NOT used here — ember is the Guidance's colour on this page. */
.ask-general {
  margin-top: var(--spacing-24);
  border-top: 1px solid var(--color-sand);
  border-left: 2px solid var(--color-driftwood);
  padding: var(--spacing-16) 0 0 var(--spacing-16);
}

.ask-general-mark {
  margin: 0;
  color: var(--color-warm-gray);
}

.ask-general-body p {
  margin: var(--spacing-12) 0 0;
  max-width: 68ch;
  color: var(--color-pewter);
}

.ask-answer-cta {
  margin-top: var(--spacing-24);
}

/* The fallback panel. It is the difference between "coming soon" and a dead
 * control, and it stays in the build right through launch (issue 08). */
.ask-panel {
  margin-top: var(--spacing-24);
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-3xl);
  background: var(--surface-warm-canvas);
  padding: var(--spacing-32);
}

.ask-panel[hidden] {
  display: none;
}

.ask-panel h2 {
  margin: var(--spacing-12) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--color-ink-black);
}

.ask-panel p {
  margin: var(--spacing-16) 0 0;
  max-width: 52ch;
}

/* ---------- Cards --------------------------------------------------------- */

.cards {
  padding-top: var(--spacing-64);
  padding-bottom: var(--spacing-64);
}

.cards-head {
  max-width: 46em;
  margin-bottom: var(--spacing-40);
}

.cards-head .section-heading {
  margin-top: var(--spacing-16);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
  background: var(--surface-card-white);
  padding: var(--card-padding);
}

.card-feature {
  background: var(--surface-peach-feature);
  border-color: var(--surface-peach-feature);
}

.card h3 {
  margin: var(--spacing-16) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--color-ink-black);
}

.card p {
  margin: var(--spacing-16) 0 0;
  font-size: var(--text-body);
  line-height: 1.55;
}

.card-feature .eyebrow,
.card-feature p {
  color: var(--color-charcoal);
}

.card-link {
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-driftwood);
  /* A finger-sized target, and the reason three cards of unequal copy still
   * line up along one rule at the bottom. */
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
  text-decoration: none;
}

.card-link:hover {
  color: var(--color-ember-orange);
}

.card-link::after {
  /* Non-breaking, because a collapsed space puts the arrow against the word. */
  content: "\00a0\00a0→";
}

/* Push the link to the bottom so three cards of unequal copy still line up. */
.card-link {
  margin-top: auto;
}

.card-feature .card-link {
  border-top-color: var(--color-charcoal);
}


/* ---------- Generated documents (/plug-it-in/) ---------------------------- */

/* Everything under .prose is rendered from the guidance's own Markdown, so the
 * styling has to cover whatever that Markdown contains rather than a shape a
 * template chose. Sizes stay on the page's scale: 11, 12, 14, 16, 20, 24, 32. */

.jump {
  margin-top: var(--spacing-32);
}

.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--element-gap);
  list-style: none;
  margin: var(--spacing-12) 0 0;
  padding: 0;
}

.jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--spacing-20);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-buttons);
  background: var(--surface-card-white);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
  text-decoration: none;
}

.jump-links a:hover {
  border-color: var(--color-ember-orange);
  color: var(--color-ember-orange);
}

.doc {
  padding-top: var(--spacing-64);
  padding-bottom: var(--spacing-64);
  /* An in-page anchor must not land the heading under nothing; give the jump
   * links somewhere to land that reads as the top of the section. */
  scroll-margin-top: var(--spacing-24);
}

.doc-head {
  max-width: 46em;
  margin-bottom: var(--spacing-32);
}

.doc-head .section-heading {
  margin-top: var(--spacing-16);
}

/* A heading's inline code is the heading, not a badge inside it: the boxed
 * treatment used in prose reads as a different size here. */
.section-heading code {
  font-family: var(--font-mono);
  /* The next step down, not a computed fraction: mono at the heading's own
   * size overpowers the sans beside it. */
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  color: var(--color-burnt-rust);
}

.prose {
  max-width: 68ch;
  /* Vendor documentation URLs appear bare in the guidance prose and are longer
   * than a 360px column. Breaking them is the alternative to a scrollbar
   * across the whole page. `break-word`, not `anywhere`: a word is moved to
   * the next line first and only broken if it still does not fit. */
  overflow-wrap: break-word;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h3,
.prose h4 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-black);
  letter-spacing: var(--tracking-heading-sm);
  overflow-wrap: normal;
}

.prose h3 {
  margin: var(--spacing-48) 0 0;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.prose h4 {
  margin: var(--spacing-32) 0 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

.prose p,
.prose li {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-pewter);
}

.prose p {
  margin: var(--spacing-16) 0 0;
}

.prose ul,
.prose ol {
  margin: var(--spacing-16) 0 0;
  padding-left: var(--spacing-24);
}

.prose li {
  margin-top: var(--spacing-8);
}

.prose li::marker {
  color: var(--color-ember-orange);
}

.prose strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-charcoal);
}

.prose a {
  color: var(--color-burnt-rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--color-ink-black);
}

.prose :not(pre) > code {
  padding: 2px var(--spacing-4);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-badges);
  background: var(--surface-card-white);
  font-size: 14px;
  color: var(--color-charcoal);
  /* A command is one token. Break it only if it genuinely does not fit:
   * `anywhere` split `ask-ai4bcm` across two lines mid-word, boxed each half,
   * and made the hyphen read as part of the break. */
  overflow-wrap: break-word;
}

.code-wrap {
  position: relative;
  margin-top: var(--spacing-20);
}

.prose pre {
  margin: var(--spacing-20) 0 0;
  padding: var(--spacing-20);
  /* Room for the copy button, which sits over the block's top-right corner. */
  padding-right: var(--spacing-80);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  background: var(--surface-card-white);
  /* The guidance's longest command line is wider than a phone column. Scroll
   * the block, never the page — and never wrap a command, which would make a
   * pasted line wrong. */
  overflow-x: auto;
  overflow-wrap: normal;
}

.code-wrap > pre {
  margin-top: 0;
}

.prose pre code {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-charcoal);
  white-space: pre;
}

.code-copy {
  position: absolute;
  top: var(--spacing-8);
  right: var(--spacing-8);
  /* A finger-sized target: it is a real control, not a decoration. It clears
   * the code because the block reserves padding for it. */
  min-width: 72px;
  min-height: 44px;
  padding: 0 var(--spacing-12);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-badges);
  background: var(--surface-warm-canvas);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  cursor: pointer;
}

.code-copy:hover {
  border-color: var(--color-ember-orange);
  color: var(--color-ember-orange);
}

/* ---------- Take-away pages (/guidance/, /playbook/) --------------------- */

/* A line of measured facts under a thing you can download: page count, size,
 * version. Mono, because every number in it was counted rather than written. */
.meta {
  margin: var(--spacing-16) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-warm-gray);
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
}

.download {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
  background: var(--surface-card-white);
  padding: var(--card-padding);
}

.download h3 {
  margin: var(--spacing-16) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--color-ink-black);
}

.download p {
  margin: var(--spacing-16) 0 0;
  font-size: var(--text-body);
  line-height: 1.55;
}

.download .meta {
  /* The measured line sits against the rule above the link, not floating in
   * the middle of the card. */
  margin-top: var(--spacing-20);
}

/* The attribution string: the licence condition, set as something to take
 * away rather than something to read past. Bordered in ink, not sand — on
 * this page it is the object, not a note beside one. */
.cite-block {
  position: relative;
  margin: var(--spacing-32) 0 0;
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-3xl);
  background: var(--surface-card-white);
  padding: var(--spacing-24);
}

.cite-block figcaption {
  margin-bottom: var(--spacing-16);
}

.cite-block pre {
  margin: 0;
  /* Room for the copy button, which sits over the top-right corner. */
  padding-right: var(--spacing-80);
  overflow-x: auto;
}

.cite-block code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-black);
  /* A citation is prose, not a command: it wraps rather than scrolls. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.cite-block .code-copy {
  top: var(--spacing-16);
  right: var(--spacing-16);
}

.citation-inline {
  overflow-wrap: break-word;
}

.citation-inline code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-charcoal);
}

/* The unit list: title in the reading face, path in mono, because the path is
 * what a citation names. */
.unit-group + .unit-group {
  margin-top: var(--spacing-40);
}

.unit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--spacing-40);
  list-style: none;
  margin: var(--spacing-16) 0 0;
  padding: 0;
}

.unit-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-12);
  padding: var(--spacing-12) 0;
  border-bottom: 1px solid var(--color-sand);
}

.unit-title {
  font-size: var(--text-body);
  color: var(--color-ink-black);
}

.unit-path {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-warm-gray);
  overflow-wrap: break-word;
}

.score {
  font-family: var(--font-mono);
  /* A named step, not a fraction of the lede: 0.9em landed on 18px, which is
   * not on this page's scale. */
  font-size: var(--text-body);
  color: var(--color-burnt-rust);
  white-space: nowrap;
}

/* The ladder. The rule down the left is the ladder: five steps against one
 * line, rather than five boxes. */
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--color-driftwood);
}

.ladder li {
  padding: var(--spacing-16) 0 var(--spacing-16) var(--spacing-24);
  border-bottom: 1px solid var(--color-sand);
}

.ladder li:last-child {
  border-bottom: 0;
}

.ladder-nr {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ember-orange);
}

.ladder-what {
  display: block;
  margin-top: var(--spacing-8);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--color-pewter);
}

.axis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
}

.axis {
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-3xl);
  background: var(--surface-card-white);
  padding: var(--spacing-24);
}

.axis p:last-child {
  margin: var(--spacing-12) 0 0;
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--color-pewter);
}

/* The register. Five level columns do not fit a phone and must not be made to:
 * the table scrolls inside its own frame, and the page never scrolls sideways. */
.matrix-scroll {
  margin-top: var(--spacing-8);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  background: var(--surface-card-white);
  overflow-x: auto;
}

.matrix-scroll:focus-visible {
  outline: 2px solid var(--color-ember-orange);
  outline-offset: 2px;
}

.matrix {
  border-collapse: collapse;
  /* Below this the cells shred into one word a line; above it the reader
   * scrolls, which is the trade this table is designed for. */
  min-width: 860px;
  width: 100%;
}

.matrix th,
.matrix td {
  padding: var(--spacing-16);
  border-bottom: 1px solid var(--color-sand);
  border-right: 1px solid var(--color-sand);
  text-align: left;
  vertical-align: top;
}

.matrix tr:last-child th,
.matrix tr:last-child td {
  border-bottom: 0;
}

.matrix th:last-child,
.matrix td:last-child {
  border-right: 0;
}

.matrix thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  background: var(--surface-warm-canvas);
}

.matrix tbody th {
  width: 160px;
  background: var(--surface-warm-canvas);
}

.matrix-letter {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-ember-orange);
}

.matrix-name {
  display: block;
  margin-top: var(--spacing-4);
  font-size: 14px;
  line-height: 1.4;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
}

.matrix td {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-pewter);
}

.matrix-second {
  margin-top: var(--spacing-64);
}

.notes {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--color-sand);
}

.notes p {
  margin: var(--spacing-12) 0 0;
  max-width: 74ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-warm-gray);
}

.notes b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-charcoal);
}

.glossary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--spacing-40);
  margin: 0;
}

.glossary > div {
  padding: var(--spacing-16) 0;
  border-bottom: 1px solid var(--color-sand);
}

.glossary dt {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ember-orange);
}

.glossary dd {
  margin: var(--spacing-8) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-pewter);
}

/* ---------- Footer -------------------------------------------------------- */

.footer {
  padding-top: var(--spacing-48);
  padding-bottom: var(--spacing-48);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-40);
  justify-content: space-between;
}

.footer p {
  margin: var(--spacing-12) 0 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-warm-gray);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-20);
  list-style: none;
  margin: var(--spacing-12) 0 0;
  padding: 0;
  font-size: 14px;
}

.footer-links a {
  color: var(--color-slate);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-ember-orange);
}

.citation {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-warm-gray);
}

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

/* ---------- Narrow screens ----------------------------------------------- */

@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pad {
    padding-left: var(--spacing-32);
    padding-right: var(--spacing-32);
  }
}

/* The fan needs a desktop's worth of room, and more than the card grid does: the
 * panel is a fixed 460 and the box beside it has an input and a 44px send button
 * to fit. Measured — below about 1080 the box is squeezed until the send button
 * sits on top of the placeholder, so the fan gives up the column first.
 *
 * Below it there is no "left of": the connectors go, the node becomes a plain
 * heading for the list, and the three routes stack as ruled rows above the box. */
@media (max-width: 1080px) {
  .ask-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
  }
  .routes {
    display: block;
  }
  .routes-wires,
  .route-tail {
    display: none;
  }
  .routes-node {
    display: block;
    margin-bottom: var(--spacing-12);
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
  }
  .routes-list {
    display: block;
    border-top: 1px solid var(--color-sand);
  }
  .route-row {
    border-bottom: 1px solid var(--color-sand);
  }
  .route {
    flex: 1 1 auto;
    /* A row a thumb has to hit, and not one pixel taller: every pixel this panel
     * adds is height the question input pays for on a phone. */
    min-height: 44px;
    justify-content: center;
    padding: var(--spacing-4) 0;
  }
}

@media (max-width: 560px) {
  .frame {
    border-left: 0;
    border-right: 0;
  }
  .pad {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
  .nav {
    gap: var(--spacing-12);
  }
  .nav-links {
    width: 100%;
    margin-left: 0;
    gap: var(--spacing-16);
  }
  .hero {
    padding-top: var(--spacing-48);
    padding-bottom: var(--spacing-40);
  }
  .ask,
  .cards {
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-40);
  }
  .ask-frame {
    border-radius: var(--radius-3xl);
    padding: var(--spacing-20);
  }
  .ask-bar {
    /* A 44px target beside a full-width field leaves no room for a placeholder
     * at 360px, so the bar stacks rather than squashing the input. */
    flex-wrap: wrap;
    padding: var(--spacing-16);
    border-radius: var(--radius-3xl);
  }
  .ask-input {
    flex-basis: 100%;
  }
  .ask-send {
    margin-left: auto;
  }
  .ask-panel,
  .card {
    padding: var(--spacing-20);
    border-radius: var(--radius-3xl);
  }
  /* At 360 the stage line and the seconds cannot share a row without the stage
   * text collapsing to two words a line. The seconds go under it instead. */
  .ask-progress-line {
    flex-direction: column;
    gap: var(--spacing-4);
  }
  /* A chip is a link a thumb has to hit, so it goes full width rather than
   * wrapping a section title into a 44px-tall sliver. */
  .ask-cites {
    flex-direction: column;
  }
  .ask-cite {
    border-radius: var(--radius-3xl);
  }
  .btn {
    justify-content: center;
    flex: 1 1 100%;
  }
  .lede {
    font-size: var(--text-body);
  }
  .nav-links a,
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ask-input {
    min-height: 44px;
  }
  .doc {
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-40);
  }
  .prose pre {
    padding: var(--spacing-16);
    padding-right: var(--spacing-16);
    /* At this width there is no room beside the code for the button, so it
     * sits above the block instead of over its corner. */
    padding-top: var(--spacing-64);
  }
  .prose pre code {
    font-size: 12px;
  }
  .prose h3 {
    margin-top: var(--spacing-40);
  }
  .jump-links a {
    font-size: var(--text-body);
  }
}

/* The take-away pages at narrow widths. Everything that is a grid of two or
 * three becomes one column; the register keeps scrolling inside its frame. */
/* Below 900px five level columns do not fit, and making them fit would shred
 * every cell into one word a line. The register stops being a table and becomes
 * one block per axis, each cell labelled with the level it belongs to — so
 * nothing sits past the viewport and nothing has to be scrolled sideways on a
 * phone to be read. The table returns intact at 900px and above. */
@media (max-width: 899px) {
  .matrix-scroll {
    border: 0;
    background: transparent;
    overflow-x: visible;
  }
  .matrix,
  .matrix thead,
  .matrix tbody,
  .matrix tr,
  .matrix th,
  .matrix td {
    display: block;
    min-width: 0;
    width: auto;
  }
  .matrix thead {
    /* The level names are on every cell below; the header row would repeat
     * them five times before the first answer. */
    display: none;
  }
  .matrix tr {
    margin-bottom: var(--spacing-24);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-md);
    background: var(--surface-card-white);
    overflow: hidden;
  }
  .matrix tbody th {
    /* Beats the 160px column width of the table form, which as a block would
     * be a 160px grey chip instead of a header band across the card. */
    width: auto;
    padding: var(--spacing-16);
    border-right: 0;
    border-bottom: 1px solid var(--color-sand);
  }
  .matrix td {
    padding: var(--spacing-16);
    border-right: 0;
  }
  .matrix td::before {
    content: attr(data-level);
    display: block;
    margin-bottom: var(--spacing-4);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
  }
  .matrix tr:last-child {
    margin-bottom: 0;
  }
  .matrix tr:last-child td:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  .download-grid,
  .axis-grid,
  .unit-list,
  .glossary {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .download,
  .axis,
  .cite-block {
    padding: var(--spacing-20);
    border-radius: var(--radius-3xl);
  }
  .cite-block pre {
    /* No room beside the citation for the button at this width, so it sits
     * above the text instead of over its corner. */
    padding-right: 0;
    padding-top: var(--spacing-48);
  }
  .cite-block .code-copy {
    top: var(--spacing-16);
    left: var(--spacing-16);
    right: auto;
  }
  .unit-path {
    /* Under the title rather than pushed to a right edge that is now close
     * enough to collide with it. */
    margin-left: 0;
    flex-basis: 100%;
  }
  .matrix tbody th {
    width: 132px;
  }
  .matrix th,
  .matrix td {
    padding: var(--spacing-12);
  }
}