/* === AUA brand palette ====================================================
   Colors sampled from the official logo artwork (graphics/):
   seal blue #07618c, wordmark navy #1b4165. */

[data-md-color-scheme="default"][data-md-color-primary="custom"],
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #07618c;
  --md-primary-fg-color--light: #3a86ac;
  --md-primary-fg-color--dark: #1b4165;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

/* === News section banners and briefs ====================================== */

.section-banner {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  margin: 0.4rem 0 1rem;
}

.section-brief {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 0.2rem solid var(--md-primary-fg-color);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--md-code-bg-color);
}

.section-brief p {
  margin: 0;
}

.section-brief-date {
  margin-top: 0.45rem !important;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* === Footer ================================================================
   The attribution line is a display element alone in a full-width band (no
   social icons balance the right side), so it centers, like the hero. If
   social links are ever added to mkdocs.yml extra, revisit this. */

.md-footer-meta__inner {
  justify-content: center;
}

.md-footer-meta .md-copyright {
  text-align: center;
}

/* === Layout ================================================================
   Material caps the content grid at 61rem for book-like line lengths.
   Raise the cap moderately so wide screens get room for tables and card
   grids; phones and tablets sit below the cap and are unaffected. Owner
   preference 2026-06-11; adjust this one number to taste (readability
   degrades as prose lines lengthen). */

.md-grid {
  max-width: 78rem;
}

/* Generated pages stack multiple card grids; Material's prose-tuned
   heading margin leaves section boundaries tighter than the gaps between
   cards inside a section. Extra air above h2 marks section starts through
   whitespace alone (owner-approved 2026-06-12). */
.md-typeset h2 {
  margin-top: 2.2em;
}

/* Tighter horizontal cell padding so wide tables (the 10-column LiveBench
   snapshot) fit the content column without clipping or scrolling. */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding-left: 0.7em;
  padding-right: 0.7em;
}

/* Reading measure: tried and reverted 2026-07-25, recorded so it is not
   re-attempted blind. Prose reaches about 104 characters a line on a
   maximized desktop window, past the 60 to 75 that reads comfortably, so
   the text flow was capped at 74ch while tables, grids and banners kept
   the full column. It measured well (104 to 78 characters) and looked
   wrong: figures already cap at 42rem, so pages ended up with three
   widths (prose 810px, figure 924px, everything else 1102px) and the
   prose read as wrapping early for no reason.
   The coherent fix is one width, not an exception: lower the .md-grid cap
   to about 64rem and drop any per-element capping, which yields the same
   78-character prose with every element aligned. Measured cost at 64rem:
   the tool grid keeps two cards per row (527px to 387px each) and the
   ten-column LiveBench table starts needing horizontal scroll, which is
   exactly what the 78rem cap above was widened to avoid. That trade is
   the owner's call, so the column stays wide until he takes it. */

/* --aua-alert is the red that figures use for warnings and failure paths
   (added 2026-09-22 site audit). It was hard-coded as #c62828 in 43 places
   across 19 pages, which is about 2.9:1 against the dark scheme's
   background, below the 4.5:1 that small figure text needs; the dark value
   is about 8:1. Figures reference it as fill="var(--aua-alert)". */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #07618c;
  --aua-alert: #c62828;
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #5aa3c7;
  --aua-alert: #ef9a9a;
}

/* Material sets headings at weight 300. Light strokes hold their shape on a
   white page but lose definition as light-on-dark, where the headings ended
   up reading thinner than the body text they outrank (2026-07-25). Restore
   the hierarchy in the dark scheme only; the light scheme is fine as it is. */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  font-weight: 400;
}

/* Page titles: Material sets h1 at weight 300 in 54% grey, which made every
   page title the faintest text on its page, lighter than the card headings
   beneath it (site review, 2026-09-22). Full-strength color and a medium
   weight restore the hierarchy in both schemes. */
.md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--md-default-fg-color);
  font-weight: 500;
}

/* The section banners are a dark brand gradient, which reads as a strong
   band on a white page and half-dissolves into the dark one. A hairline
   keeps the block's edge in the slate scheme without touching the art. */
[data-md-color-scheme="slate"] .section-banner {
  outline: 1px solid var(--md-default-fg-color--lightest);
  outline-offset: -1px;
}

/* === Badges (governance statuses, SPEC section 6) ======================== */

.badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-approved { background-color: #2e7d32; color: #ffffff; }
.badge-conditional { background-color: #ff8f00; color: #1a1a1a; }
.badge-restricted { background-color: #c62828; color: #ffffff; }
.badge-under-review { background-color: #757575; color: #ffffff; }
.badge-listed { background-color: #757575; color: #ffffff; }
.badge-licensed { background-color: #2e7d32; color: #ffffff; }
.badge-reviewed { background-color: #1565c0; color: #ffffff; }
.badge-caution { background-color: #ff8f00; color: #1a1a1a; }

/* Glossary terms render as compact headings so the right-hand TOC
   becomes an A-Z index; scoped to the glossary's wrapper div. They are h2
   since 2026-09-22 (were h4): h1 straight to h4 was the site's only
   heading-level skip, which the accessibility statement rules out. */
.md-typeset .glossary h2 {
  margin: 1.1em 0 0.25em;
  font-size: 0.8rem;
}

/* Navigation orientation: the active top tab gets a pill, tabs get thin
   separators, and the active sidebar items get an accent rail. All are
   orientation signals, not decoration. */
.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  padding: 0.15rem 0.7rem;
  /* Material's fixed .8rem top margin plus the pill padding leaves the pill
     4px below center of the 2.4rem bar; pull it back to vertical center. */
  margin-top: 0.6rem;
}
.md-tabs__item + .md-tabs__item {
  position: relative;
}

.md-tabs__item + .md-tabs__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0.9rem;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.22);
}
.md-sidebar--primary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--active {
  border-left: 3px solid var(--md-primary-fg-color);
  padding-left: 0.45rem;
  margin-left: -0.65rem;
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link--active,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link--active {
  border-left-color: var(--md-primary-fg-color--light);
}

/* Page metadata chips (audience, time) under module and playbook titles;
   non-interactive, paired with a muted note for the remainder. */
.md-typeset .meta-chip {
  display: inline-block;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 1rem;
  padding: 0.05rem 0.6rem;
  margin: 0 0.3rem 0.2rem 0;
  font-size: 0.75rem;
  color: var(--md-typeset-color);
}
.md-typeset .meta-note {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* News topic chips (filtering handled by javascripts/topics.js). */
.md-typeset .topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.8rem;
}
.md-typeset .topic-chip {
  border: 1px solid var(--md-default-fg-color--light);
  background: transparent;
  color: var(--md-typeset-color);
  border-radius: 1rem;
  padding: 0.1rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.6;
  cursor: pointer;
}
.md-typeset .topic-chip:hover {
  border-color: var(--md-primary-fg-color);
}
.md-typeset .topic-chip.is-active {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #ffffff;
}
.badge-deadline { background-color: #ff8f00; color: #1a1a1a; }
.badge-unconfirmed { background-color: #757575; color: #ffffff; }

/* The homepage H1 stays in the document for accessibility and search, but
   the hero wordmark already announces the site; rendering both reads as a
   stutter, most visibly on phones (mobile audit, 2026-07-01). */
.md-typeset .hp-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* === Homepage hero ======================================================== */

.hub-hero {
  margin: 0 0 1.6rem;
  padding: 1.6rem 1.8rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg,
    var(--md-primary-fg-color) 0%,
    var(--md-primary-fg-color--dark) 100%);
  color: var(--md-primary-bg-color);
  /* Display element, not reading text: centered by owner preference
     (2026-06-11). Body text everywhere else stays left-aligned. */
  text-align: center;
}

.hub-hero p {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.hub-hero strong {
  font-size: 1.15rem;
}

.hub-hero .hero-wordmark {
  display: block;
  width: min(20rem, 80%);
  margin: 0 auto 0.9rem;
}

.hub-hero .md-button {
  margin: 0.3rem 0.25rem 0;
  border-color: var(--md-primary-bg-color);
  color: var(--md-primary-bg-color);
}

.hub-hero .md-button--primary {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: #1a1a1a;
}

/* === Card grids (homepage uses Material's grid cards) ===================== */

.md-typeset .grid.cards > ul > li {
  border-radius: 0.5rem;
  transition: transform 0.15s, box-shadow 0.15s;
  /* Cards in a row have descriptions of different lengths, which left the
     closing link sitting at a different height in each one (visible on the
     homepage's top row, 2026-07-25). Making the card a column and pushing
     its last block down aligns every call to action along the row. */
  display: flex;
  flex-direction: column;
}

.md-typeset .grid.cards > ul > li > p:last-child {
  margin-top: auto;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-shadow-z2);
}

/* The same lift for the other whole-card links (2026-09-27, owner: the hub
   cards' hover is the model): the Prompt Library's rows, news cards and
   the homepage's timely items (tool and video cards already had it). */
.md-typeset .pl-rows .pl-row,
.md-typeset .news-card,
.md-typeset .timely-list > li.timely-item {
  transition: transform 0.15s, box-shadow 0.15s;
}

.md-typeset .pl-rows .pl-row:hover,
.md-typeset .news-card:hover,
.md-typeset .timely-list > li.timely-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-shadow-z2);
}

/* The homepage's nine doors fall as 4 + 4 + 1 in Material's auto-fit grid,
   leaving the last card alone beside three empty slots. Three columns make
   it three full rows and give each card more room for its text. Below the
   breakpoint the grid falls back to auto-fit as usual. */
@media screen and (min-width: 60em) {
  /* Material puts the grid on the wrapper and gives the inner list
     `display: contents`, so the columns have to be set here, not on the
     list. */
  .md-typeset .grid.cards.hp-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* For Students has four cards, which auto-fit laid out as 3 + 1 with
     Residency alone on a row (navigation redesign, 2026-09-25). Two
     columns make two full rows. */
  .md-typeset .grid.cards.two-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === News cards =========================================================== */

.news-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}

.news-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-left: 0.2rem solid var(--md-primary-fg-color);
  border-radius: 0.4rem;
  background: var(--md-default-bg-color);
  transition: box-shadow 0.15s;
}

.news-card-body {
  flex: 1;
  min-width: 0;
}

.md-typeset .news-card-thumb {
  flex: 0 0 7.5rem;
  width: 7.5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.3rem;
  margin: 0.15rem 0 0;
  background: var(--md-default-fg-color--lightest);
}

@media screen and (max-width: 480px) {
  .md-typeset .news-card-thumb {
    flex-basis: 5.2rem;
    width: 5.2rem;
    height: 3.6rem;
  }
}

.news-card:hover {
  box-shadow: var(--md-shadow-z2);
}

.news-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}

.source-chip {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: 0.8rem;
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.news-card-date {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

.news-card-title {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--md-typeset-color) !important;
}

.news-card-title:hover {
  color: var(--md-accent-fg-color) !important;
}

.md-typeset .news-card-summary {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  color: var(--md-default-fg-color--light);
}

/* === Hardware page widgets (docs/tools/hardware.md) ======================= */

.tps-demo,
.hw-estimator {
  margin: 1rem 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-left: 0.2rem solid var(--md-primary-fg-color);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--md-code-bg-color);
}

.tps-demo button {
  margin: 0 0.4rem 0.6rem 0;
  padding: 0.25rem 0.8rem;
  border: 0.05rem solid var(--md-primary-fg-color);
  border-radius: 0.3rem;
  background: transparent;
  color: var(--md-primary-fg-color);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.tps-demo button.tps-active {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.tps-demo-output {
  min-height: 6.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.3rem;
  background: var(--md-default-bg-color);
  font-size: 0.76rem;
  line-height: 1.5;
}

.hw-label {
  display: inline-block;
  margin: 0 0.9rem 0.6rem 0;
  font-size: 0.72rem;
  font-weight: 700;
}

.hw-estimator select {
  display: block;
  margin-top: 0.2rem;
  padding: 0.25rem 0.4rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.3rem;
  background: var(--md-default-bg-color);
  color: var(--md-typeset-color);
  font-size: 0.74rem;
  max-width: 100%;
}

.hw-result {
  margin-top: 0.4rem;
  font-size: 0.76rem;
}

.hw-result p {
  margin: 0 0 0.5rem;
}

.hw-note {
  color: var(--md-default-fg-color--light);
}

/* === Token estimator (docs/basics/better-answers.md) ======================= */

.tok-estimator {
  margin: 1rem 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-left: 0.2rem solid var(--md-primary-fg-color);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--md-code-bg-color);
}

.tok-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.tok-estimator textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.3rem;
  background: var(--md-default-bg-color);
  color: var(--md-typeset-color);
  font-size: 0.76rem;
  line-height: 1.5;
  resize: vertical;
}

.tok-result {
  margin-top: 0.5rem;
  font-size: 0.76rem;
}

.tok-result p {
  margin: 0 0 0.35rem;
}

.tok-bar {
  height: 0.5rem;
  margin: 0.1rem 0 0.6rem;
  border-radius: 0.25rem;
  background: var(--md-default-fg-color--lightest);
  overflow: hidden;
}

.tok-fill {
  height: 100%;
  border-radius: 0.25rem;
  background: var(--md-primary-fg-color);
}

.tok-note {
  color: var(--md-default-fg-color--light);
}

/* === Inline figures (educational pages) ==================================== */

.md-typeset .figure {
  /* Material's own `figure { width: fit-content; max-width: 100% }` wins
     specificity over a bare .figure and shrink-wraps the SVG to its
     default 150px height (~505px wide). This selector outranks it and
     gives figures a real width; the SVG canvases are ~660 units. */
  width: 100%;
  max-width: 42rem;
  margin: 1.6rem auto;
  text-align: center;
}

.figure svg {
  width: 100%;
  height: auto;
}

/* Screenshots inside figures (worked examples). The rule above only covers
   SVG, so a raster figure shrink-wrapped to its intrinsic size and sat off
   centre. A faint border matters here: these are dark interface captures on
   a page that is white in light mode, and without it the image bleeds into
   the background with no edge. */
.figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
}

/* Portrait figures (a cropped panel, a tall screenshot) would otherwise be
   scaled to the full 42rem column width and tower over the prose. */
.md-typeset .figure--narrow {
  max-width: 20rem;
}

.figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: var(--md-default-fg-color--light);
}

/* === Community Exchange posts ============================================== */

.exchange-meta {
  display: block;
  margin-top: -0.4rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* === Maintainer card (About page) ========================================= */

.maintainer-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.2rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
}

.md-typeset .maintainer-photo {
  flex: 0 0 6.5rem;
  width: 6.5rem;
  height: 6.5rem;
  min-width: 6.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.maintainer-bio {
  flex: 1;
  min-width: 0;
}

.md-typeset .maintainer-bio p {
  margin: 0;
}

/* The maintainer's profile links (2026-10-06), a quiet line under the bio. */
.md-typeset .maintainer-bio p.maintainer-profiles {
  margin-top: 0.6rem;
  color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 480px) {
  .maintainer-card {
    flex-direction: column;
    text-align: center;
  }
}

/* === Committee cards (Governance section) ================================= */

.committee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0;
}

.committee-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.8rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  background: var(--md-default-bg-color);
}

.md-typeset .committee-card img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.55rem;
}

.committee-name {
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.committee-card .badge {
  margin-bottom: 0.4rem;
}

.committee-line {
  display: block;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
}

/* === Video cards =========================================================== */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}

.video-card {
  display: flex;
  flex-direction: column;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--md-default-bg-color);
  color: var(--md-typeset-color) !important;
  transition: transform 0.15s, box-shadow 0.15s;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-shadow-z2);
  color: var(--md-typeset-color) !important;
}

.video-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--md-default-fg-color--lightest);
}

/* Video, podcast and course cards are already one link each (the card is
   the <a>). As on the hub cards (2026-09-27): the title is underlined while
   the pointer or keyboard focus is on the card, focus rings the card, and
   the meta line ends with the destination mark. */
/* Material's link transition (color, 0.125s) outranks .video-card's own,
   which made the lift a jump; this keeps the hub cards' timing. */
.md-typeset a.video-card {
  transition: transform 0.15s, box-shadow 0.15s, color 0.125s;
}

.md-typeset a.video-card:is(:hover, :focus-visible) .video-card-title {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.md-typeset a.video-card:is(:focus-visible, .focus-visible) {
  outline: 2px solid var(--hub-focus);
  outline-offset: 2px;
}

.md-typeset a.video-card[href^="http"] .video-card-meta::after {
  content: " \2197";
  content: " \2197" / "";
  opacity: 0.7;
}

.video-card-title {
  padding: 0.55rem 0.7rem 0.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-meta {
  padding: 0 0.7rem 0.45rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.video-card-desc {
  padding: 0 0.7rem 0.65rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--md-default-fg-color--light);
  /* Clamp like the title (2 lines) so grid rows stay even when one
     description runs long. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Podcast variant: square show art, slightly narrower cards */

.podcast-grid {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.podcast-grid .video-card img {
  aspect-ratio: 1 / 1;
}

/* === Tool cards ============================================================ */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 1.6rem;
}

.tool-card {
  padding: 0.85rem 1rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  background: var(--md-default-bg-color);
  transition: transform 0.15s, box-shadow 0.15s;
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-shadow-z2);
}

.tool-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.tool-card-head a {
  font-weight: 700;
  font-size: 0.85rem;
}

/* Favicon-derived tool branding (render_data.py); hidden onerror, so a
   missing favicon just renders a text-only head. */
.md-typeset .tool-card-icon {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.2rem;
  margin: 0 0.45rem 0 0;
  vertical-align: -0.25rem;
}

.tool-card-sub {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.cost-chip {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.45rem;
  border-radius: 0.8rem;
  background: var(--md-default-fg-color--lightest);
  /* Full-strength text: the inherited light grey on this tinted pill
     measured 4.4:1 (light) and 4.1:1 (dark), under the 4.5:1 that 13.6px
     text needs (2026-09-23, found by an axe run on the Tool Directory). */
  color: var(--md-typeset-color);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.md-typeset .tool-card-blurb {
  margin: 0.4rem 0 0;
  font-size: 0.76rem;
  color: var(--md-default-fg-color--light);
}

/* Substantive status notes, visible on the card rather than hover-only
   (2026-09-08). Nineteen of 75 tools carry one: documented-consent
   requirements, services operated from China, credential limits, ongoing
   litigation. Slightly stronger than the blurb above it, because a caution
   should not read as quieter than the description it qualifies. */
.md-typeset .tool-card-note {
  margin: 0.45rem 0 0;
  padding-left: 0.5rem;
  border-left: 0.12rem solid var(--md-default-fg-color--lighter);
  font-size: 0.72rem;
  color: var(--md-default-fg-color);
}

/* Entry provenance on tool and open-weights cards. "Checked" deliberately,
   never "reviewed": the weekly content watch may set data/tools.yaml's
   last_reviewed itself, so the label must not imply a person looked
   (2026-09-08). Sits under the blurb at the metadata type-scale floor of
   0.68rem set in the 2026-07-09 type pass. */
.md-typeset .tool-card-checked {
  margin: 0.45rem 0 0;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

/* Freshness footer on pages enrolled in prose page review: quiet,
   separated from content, but present (owner approved 2026-07-09). */
.md-typeset .page-reviewed {
  margin-top: 2.6rem;
  padding-top: 0.7rem;
  border-top: 0.05rem solid var(--md-default-fg-color--lightest);
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* Announcement banner: links inherit the brand-blue primary, which is
   unreadable on the banner's dark strip (measured ~2.4:1). Use the
   amber accent, matching the hero's primary button. */
.md-banner a,
.md-banner a:focus,
.md-banner a:hover {
  color: var(--md-accent-fg-color);
}

/* === Narration player (2026-09-01) ========================================
   Injected by scripts/render_data.py under the meta-chip row on pages
   that have a generated MP3 in docs/assets/audio/, and inside each news
   section brief that has one. Native audio element: keyboard-accessible,
   works on phones, nothing to maintain. */
.listen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 1rem;
}
.listen audio {
  height: 2.2rem;
  max-width: 100%;
}
.listen-note {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}
.section-brief .listen {
  margin: 0.4rem 0 0.6rem;
}

/* Narration speed buttons (docs/javascripts/listen.js). Same idiom as the
   news topic chips: small pills, one active. Sits under the player so a
   listener can change speed without hunting in the browser's menu. */
.listen-speed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex-basis: 100%;
}
.listen-speed-btn {
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.2;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 1rem;
  background: transparent;
  color: var(--md-typeset-color);
  cursor: pointer;
}
.listen-speed-btn:hover,
.listen-speed-btn:focus-visible {
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-fg-color);
}
.listen-speed-btn.is-active {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #ffffff;
}

/* === Figure colors in the dark scheme (2026-09-23 design review) ==========
   Hand-drawn figures color their lines and boxes with the brand blue
   (var(--md-primary-fg-color), #07618c in both schemes). Against the dark
   page that is about 2.4:1, below the 3:1 that graphics need, and it was
   used 135 times as a stroke across 40 figures. Rather than touch every
   figure, these rules retarget the exact attribute values the figures use,
   in the dark scheme only (CSS outranks SVG presentation attributes):
   lines and arrowheads take the dark link blue (#5aa3c7, about 5:1), and
   filled boxes take a middle blue (#2b7aab) that clears 3:1 against the
   page while white text on it stays at about 4.7:1. The light scheme is
   untouched. New figures should use var(--aua-figure-line) and
   var(--aua-figure-fill) directly instead of the primary color. */
[data-md-color-scheme="default"] {
  --aua-figure-line: #07618c;
  --aua-figure-fill: #07618c;
}

[data-md-color-scheme="slate"] {
  --aua-figure-line: #5aa3c7;
  --aua-figure-fill: #2b7aab;
}

[data-md-color-scheme="slate"] .md-typeset svg [stroke="var(--md-primary-fg-color)"] {
  stroke: var(--aua-figure-line);
}

[data-md-color-scheme="slate"] .md-typeset svg path[fill="var(--md-primary-fg-color)"] {
  fill: var(--aua-figure-line);
}

[data-md-color-scheme="slate"] .md-typeset svg rect[fill="var(--md-primary-fg-color)"] {
  fill: var(--aua-figure-fill);
}

/* Green means "fine" or "safe" in the figures; #2e7d32 is about 3.1:1 on
   the dark page, so the dark scheme lightens it. */
[data-md-color-scheme="slate"] .md-typeset svg [stroke="#2e7d32"] {
  stroke: #66bb6a;
}

[data-md-color-scheme="slate"] .md-typeset svg [fill="#2e7d32"] {
  fill: #81c784;
}

/* === Figures on phones ===================================================
   The figures are drawn on a ~660-unit canvas and scale to the column, so
   on a 390px phone their labels shrank to 4 to 6px against 16px body text.
   Until each is rebuilt with its words in HTML (the pathway modules were
   first, 2026-09-23), a figure that is still one SVG keeps a readable
   minimum width on phones and scrolls sideways inside its own box, the way
   the site's wide tables already do. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .figure:has(> svg) {
    overflow-x: auto;
  }

  .md-typeset .figure:has(> svg) > svg {
    min-width: 600px;
  }

  .md-typeset .figure:has(> svg)::before {
    content: "Swipe sideways to see the whole figure";
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.64rem;
    text-align: left;
    color: var(--md-default-fg-color--light);
  }

  /* The section banners are decorative art that shrinks to a thin, empty
     blue strip at phone width; on a phone they only push the text down. */
  .md-typeset .section-banner {
    display: none;
  }
}

/* === Glossary terms ======================================================
   Terms rendered at the same weight as their definitions (400 in the dark
   scheme), so the eye had nothing to catch while scanning the list. */
.md-typeset .glossary h2,
[data-md-color-scheme="slate"] .md-typeset .glossary h2 {
  font-weight: 700;
}

/* === LiveBench spread chart (Benchmarks page, owner approved 2026-09-23) ==
   Generated with the table by aggregate.update_livebench(), from the same
   rows, so it redraws with every snapshot and cannot disagree with the
   table. Words are HTML so they keep the site's type size on a phone; the
   marks are SVG placed in percentages with no viewBox, so dots stay round
   at any width and nothing is scaled down. Material's
   `.md-typeset figure { width: fit-content }` and
   `.md-typeset svg { height: auto }` would shrink-wrap the figure and give
   every viewBox-less SVG a 150px default height; the selectors below
   outrank both. */
.md-typeset .lb-spread {
  width: 100%;
  max-width: none;
  margin: 1.2rem 0 1.6rem;
  padding: 0.9rem 1.1rem 0.7rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  text-align: left;
}

.md-typeset .lb-spread-head {
  margin-bottom: 0.4rem;
}

.md-typeset .lb-spread-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.8rem;
}

.md-typeset .lb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin: 0.2rem 0 0;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .lb-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.md-typeset .lb-spread svg.lb-key {
  width: 16px;
  height: 16px;
  flex: none;
}

.md-typeset .lb-spread svg.lb-key--wide {
  width: 28px;
}

.md-typeset .lb-row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  align-items: center;
  column-gap: 1rem;
  padding: 0.3rem 0;
  border-top: 0.05rem solid var(--md-default-fg-color--lightest);
}

.md-typeset .lb-row--global {
  margin: 0 -0.5rem;
  padding: 0.35rem 0.5rem;
  border-top: 0;
  border-radius: 0.3rem;
  background: var(--md-code-bg-color);
}

.md-typeset .lb-row--axis {
  border-top: 0;
  padding-top: 0;
}

.md-typeset .lb-label {
  margin: 0;
  line-height: 1.35;
}

.md-typeset .lb-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
}

.md-typeset .lb-span {
  display: block;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .lb-spread svg.lb-strip {
  display: block;
  width: 100%;
  height: 28px;
  max-width: none;
  overflow: visible;
}

.md-typeset .lb-spread svg.lb-axis {
  height: 16px;
}

.lb-axis text {
  font-size: 0.62rem;
  fill: var(--md-default-fg-color--light);
}

.lb-grid {
  stroke: var(--md-default-fg-color--lightest);
  stroke-width: 1;
}

.lb-range {
  fill: var(--md-default-fg-color--lightest);
}

.lb-row--global .lb-range {
  fill: var(--md-default-fg-color--lighter);
}

.lb-dot {
  fill: var(--md-default-bg-color);
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.5;
}

.lb-row--global .lb-dot {
  fill: var(--md-code-bg-color);
}

.lb-lead {
  fill: var(--md-typeset-a-color);
  stroke: var(--md-default-bg-color);
  stroke-width: 1.5;
}

.md-typeset .lb-spread figcaption {
  max-width: 40rem; /* Material caps figcaption at 24rem */
  margin: 0.6rem 0 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  text-align: left;
}

/* Phones: the label stacks over its strip so the strip gets the full width. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .lb-row {
    grid-template-columns: 1fr;
    row-gap: 0.1rem;
  }

  .md-typeset .lb-row--axis .lb-label {
    display: none;
  }
}

@media print {
  .md-typeset .lb-row--global {
    background: none;
  }
}

/* The LiveBench table itself. Material gives every table header a 5rem
   minimum width, so its ten columns needed about 1000px in a 940px column
   and the last one was cut off at 1440px wide. Scoped to this table (the
   generator wraps it in .livebench-table); model names stay on one line
   instead of breaking at every hyphen. */
/* Material's rule is `.md-typeset table:not([class]) th`; this must outrank it. */
.md-typeset .livebench-table table:not([class]) th {
  min-width: 0;
}

.md-typeset .livebench-table table:not([class]) td:nth-child(2) {
  white-space: nowrap;
}

/* === Reduced motion ======================================================
   Visitors who ask their system for reduced motion get no hover lifts and
   no smooth scrolling. Nothing on the site carries meaning through motion,
   so this removes decoration only. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .md-typeset .grid.cards > ul > li,
  .md-typeset .pl-rows .pl-row,
  .md-typeset .news-card,
  .md-typeset .timely-list > li.timely-item,
  .md-typeset a.video-card,
  .video-card,
  .tool-card {
    transition: none;
  }

  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .pl-rows .pl-row:hover,
  .md-typeset .news-card:hover,
  .md-typeset .timely-list > li.timely-item:hover,
  .video-card:hover,
  .tool-card:hover {
    transform: none;
  }
}

/* === Next-token stepper (How LLMs Work, owner approved 2026-09-23) ========
   docs/javascripts/next-token.js with data/next_token_demo.yaml. Same frame
   as the site's other widgets: a left brand rule on the code background.
   Colors are scheme-aware tokens only. The newest word is underlined, so
   nothing depends on seeing the arrival animation, and that animation and
   the bar fill are removed under prefers-reduced-motion. */
.md-typeset .nt-demo {
  margin: 1rem 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-left: 0.2rem solid var(--md-primary-fg-color);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--md-code-bg-color);
  font-size: 0.76rem;
  --nt-tint: rgba(7, 97, 140, 0.18);
}

[data-md-color-scheme="slate"] .md-typeset .nt-demo {
  border-left-color: var(--md-typeset-a-color);
  --nt-tint: rgba(90, 163, 199, 0.28);
}

.md-typeset .nt-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: 0.8rem;
}

.md-typeset .nt-label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset .nt-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.7rem;
}

.md-typeset .nt-chip {
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.6;
  padding: 0.05rem 0.7rem;
  border-radius: 1rem;
  cursor: pointer;
  border: 1px solid var(--md-default-fg-color--light);
  background: transparent;
  color: var(--md-typeset-color);
}

.md-typeset .nt-chip.is-active {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #ffffff;
}

.md-typeset .nt-context,
.md-typeset .nt-reply {
  margin: 0 0 0.6rem;
}

.md-typeset .nt-ask {
  font-style: italic;
}

.md-typeset .nt-attach {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.5rem;
  border-radius: 0.8rem;
  font-size: 0.66rem;
  background: var(--md-default-fg-color--lightest);
}

/* `hidden` loses to any author `display`, so restate it; without this the
   attachment chip showed in the no-paper scenario. */
.md-typeset .nt-demo [hidden] {
  display: none;
}

.md-typeset .nt-final {
  margin: 0 0 0.7rem;
  font-weight: 700;
}

.md-typeset .nt-reply {
  padding: 0.45rem 0.7rem;
  border-radius: 0.3rem;
  background: var(--md-default-bg-color);
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  min-height: 3.4rem;
}

.md-typeset .nt-text {
  font-size: 0.85rem;
}

.md-typeset .nt-newest {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--md-typeset-a-color);
  border-radius: 0.15rem;
}

.md-typeset .nt-caret {
  display: inline-block;
  width: 0.08rem;
  height: 1em;
  margin-left: 0.15rem;
  vertical-align: -0.12em;
  background: var(--md-default-fg-color--light);
}

/* Material indents lists with [dir] selectors; match their weight. */
[dir] .md-typeset ul.nt-cands {
  list-style: none;
  margin: 0.2rem 0 0.4rem;
  padding: 0;
}

[dir] .md-typeset .nt-cands li.nt-cand {
  display: grid;
  grid-template-columns: 6.5rem 1fr 5.2rem;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.25rem;
  padding: 0;
  line-height: 1.4;
}

.md-typeset .nt-tok {
  font-family: var(--md-code-font-family);
  font-size: 0.72rem;
}

.md-typeset .nt-bar {
  height: 0.55rem;
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--md-default-fg-color--lightest);
}

.md-typeset .nt-fill {
  display: block;
  height: 100%;
  border-radius: 0.3rem;
  background: var(--md-default-fg-color--light);
  transition: width 360ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.md-typeset .nt-pct {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  font-variant-numeric: tabular-nums;
}

.md-typeset .is-picked .nt-tok,
.md-typeset .is-picked .nt-pct {
  font-weight: 700;
  color: var(--md-typeset-color);
}

.md-typeset .is-picked .nt-fill {
  background: var(--md-typeset-a-color);
}

.md-typeset .is-other .nt-tok {
  font-family: inherit;
  font-style: italic;
  color: var(--md-default-fg-color--light);
}

.md-typeset .is-other .nt-fill {
  background: repeating-linear-gradient(135deg, var(--md-default-fg-color--lighter) 0 3px, transparent 3px 6px);
}

.md-typeset .nt-note {
  margin: 0.3rem 0 0.7rem;
  min-height: 2.6em;
}

.md-typeset .nt-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.md-typeset .nt-controls button {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.25rem 0.8rem;
  border-radius: 0.3rem;
  border: 0.05rem solid var(--md-typeset-a-color);
  background: transparent;
  color: var(--md-typeset-a-color);
}

.md-typeset .nt-controls .nt-next {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #ffffff;
}

.md-typeset .nt-controls .nt-next:disabled {
  opacity: 0.55;
  cursor: default;
}

.md-typeset .nt-controls button:focus-visible,
.md-typeset .nt-chip:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.md-typeset .nt-count {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

/* Screen-reader-only live region. */
.md-typeset .nt-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.md-typeset .nt-disclaimer {
  margin: 0.7rem 0 0;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

@keyframes nt-arrive {
  0% { background-color: var(--nt-tint); transform: translateY(0.25em); opacity: 0.2; }
  25% { transform: none; opacity: 1; }
  100% { background-color: transparent; }
}

.md-typeset .nt-arrive {
  display: inline-block;
  animation: nt-arrive 1.1s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .nt-fill {
    transition: none;
  }

  .md-typeset .nt-arrive {
    animation: none;
  }
}

@media screen and (max-width: 30em) {
  [dir] .md-typeset .nt-cands li.nt-cand {
    grid-template-columns: 5.2rem 1fr 4.4rem;
    gap: 0.4rem;
  }
}

/* === Pathway route map (pathway/index.md, owner approved 2026-09-23) =====
   Replaces the section banner and the three-stage figure, which repeated
   each other. The words and links are ordinary markdown inside md_in_html,
   so MkDocs rewrites and checks every link and the text keeps the page's
   type size on a phone; CSS draws only the stations and lines. The line
   style carries the meaning and the legend below says so in words: solid
   for "in order", separate stops for "pick what fits", dashed for
   "optional". Three columns on wide screens, stacked on phones. */
.md-typeset .route-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin: 1.4rem 0 0.4rem;
}

.md-typeset .route-stage {
  position: relative;
  padding: 0.75rem 0.9rem 0.5rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-top: 0.2rem solid var(--aua-figure-line);
  border-radius: 0.4rem;
  background: var(--md-default-bg-color);
}

.md-typeset .route-stage--optional {
  border-top-style: dashed;
}

/* The arrow between stages: a short rule and a chevron in the gap. */
.md-typeset .route-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  right: -1.25rem;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid var(--md-default-fg-color--light);
  border-right: 2px solid var(--md-default-fg-color--light);
  transform: rotate(45deg);
}

.md-typeset .route-stage-head {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.4rem;
  line-height: 1.35;
}

.md-typeset .route-stage-num {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset .route-stage-name {
  font-size: 0.86rem;
  font-weight: 700;
}

.md-typeset .route-stage-note {
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

[dir] .md-typeset .route-stage ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset .route-stage ul > li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.28rem 0;
  font-size: 0.74rem;
  line-height: 1.3;
}

/* The line through the stations, for the in-order and optional stages. */
.md-typeset .route-stage--core ul::before,
.md-typeset .route-stage--optional ul::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: calc(0.8rem - 1px);
  border-left: 2px solid var(--aua-figure-line);
}

.md-typeset .route-stage--optional ul::before {
  border-left-style: dashed;
}

.md-typeset .route-n {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--aua-figure-fill);
  color: #ffffff;
}

/* Choices are open circles with no line between them. */
.md-typeset .route-stage--pick .route-n {
  background: var(--md-default-bg-color);
  border: 2px solid var(--aua-figure-line);
  color: var(--md-typeset-color);
}

.md-typeset .route-stage--optional .route-n {
  background: var(--md-default-bg-color);
  border: 2px dashed var(--aua-figure-line);
  color: var(--md-typeset-color);
}

/* A lesson row outside the Learn map (a hub's "Start with the Basics",
   news round 2026-09-27): the same numbered, colored row, with the
   explanation the page gives as its subtitle. */
.md-typeset .route-stage--solo {
  margin: 0.6rem 0 1rem;
}

/* A route list outside the Learn map has no next stage, so no arrow: it
   drew past the page edge once the list was not its block's last child. */
.md-typeset .route-stage.route-stage--solo:not(:last-child)::after {
  content: none;
}

.md-typeset .route-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
}

.md-typeset .route-legend {
  margin: 0.2rem 0 1.4rem;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 59.9375em) {
  .md-typeset .route-map {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }

  /* Stacked: the chevron points down, centered in the gap below. */
  .md-typeset .route-stage:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -0.95rem;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* === "How the weekly review missed a rename" (worked-examples/this-site.md,
   owner approved 2026-09-23) ================================================
   Words in HTML, arranged by CSS grid; no SVG at all. In the DOM the result
   comes after every row, so a screen reader hears the rows first and the
   verdict last; on wide screens the grid places the verdict in a third
   column beside the rows. The "never read" gap is marked in words, with a
   dashed outline, and in the alert color, so no meaning rests on color. */
[data-md-color-scheme="default"] {
  --aua-ok: #2e7d32;
}

[data-md-color-scheme="slate"] {
  --aua-ok: #81c784;
}

.md-typeset .check-fig {
  padding: 0.9rem 1rem 0.6rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  text-align: left;
}

.md-typeset .check-fig-title {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.md-typeset .check-fig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.45rem 1rem;
  align-items: center;
  font-size: 0.74rem;
}

.md-typeset .check-fig-head {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset .check-fig-head--result {
  grid-column: 3;
  grid-row: 1;
}

.md-typeset .check-item {
  padding: 0.3rem 0.6rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.3rem;
}

.md-typeset .check-item--exempt {
  border-style: dashed;
}

.md-typeset .check-flag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.45rem;
  border-radius: 0.6rem;
  font-size: 0.62rem;
  background: var(--md-default-fg-color--lightest);
}

.md-typeset .check-mark {
  color: var(--aua-ok);
  font-weight: 700;
}

.md-typeset .check-read--missing {
  padding: 0.28rem 0.6rem;
  border: 0.05rem dashed var(--aua-alert);
  border-radius: 0.3rem;
  font-style: italic;
  color: var(--aua-alert);
}

.md-typeset .check-result {
  grid-column: 3;
  grid-row: 2 / span 4;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.8rem;
  border: 2px solid var(--aua-ok);
  border-radius: 0.4rem;
  text-align: center;
}

.md-typeset .check-result span:last-child {
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .check-result-mark {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--aua-ok);
}

.md-typeset .check-fig-note {
  margin: 0.8rem 0 0;
  font-size: 0.72rem;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .check-fig-grid {
    grid-template-columns: 1fr 1fr;
  }

  .md-typeset .check-fig-head--result,
  .md-typeset .check-result {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .md-typeset .check-fig-head--result {
    margin-top: 0.4rem;
  }
}

/* === HTML figures (the pathway modules first, 2026-09-23) ================
   Words in HTML, shapes in CSS. A figure drawn as one SVG scales its whole
   canvas, text included, to the column, which put labels at 4 to 6px on a
   phone; these reflow instead, so text stays at the page's own size and
   panels stack on narrow screens. Vocabulary:
     .hf-box (+ --ok --info --warn --stop --plain)  a bordered box
     .hf-panels  boxes side by side, stacking when there is no room
     .hf-flow    boxes joined by arrows (.hf-arrow), stacking on phones
     .hf-return  a labeled arrow back to an earlier step
     .hf-gradient  labeled rows beside a caution bar
   Colors: --aua-ok (fine), --aua-figure-line (neutral), --aua-warn
   (review), --aua-alert (stop), all scheme-aware. Every color also has
   words next to it, so no meaning rests on color alone. */
[data-md-color-scheme="default"] {
  --aua-warn: #e65100;
}

[data-md-color-scheme="slate"] {
  --aua-warn: #ffa726;
}

.md-typeset .hf {
  text-align: left;
}

.md-typeset .hf-title {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.md-typeset .hf-note {
  margin: 0.75rem 0 0;
  font-size: 0.7rem;
  font-style: italic;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-box {
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--aua-figure-line);
  border-radius: 0.45rem;
  background: var(--md-default-bg-color);
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

.md-typeset .hf-box--ok {
  border-color: var(--aua-ok);
}

.md-typeset .hf-box--warn {
  border-color: var(--aua-warn);
}

.md-typeset .hf-box--stop {
  border-color: var(--aua-alert);
}

.md-typeset .hf-box--plain {
  border: 1px solid var(--md-default-fg-color--light);
}

.md-typeset .hf-box > p {
  margin: 0;
}

.md-typeset .hf-box-title {
  font-size: 0.78rem;
  font-weight: 700;
}

.md-typeset .hf-box-sub {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-box > .hf-box-foot {
  margin-top: 0.45rem;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-box > .hf-box-ok {
  margin-top: 0.45rem;
  font-size: 0.7rem;
  color: var(--aua-ok);
}

[dir] .md-typeset .hf-box ul {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset .hf-box ul > li {
  margin: 0 0 0.1rem;
}

.md-typeset .hf-banner {
  margin: 0.8rem 0 0;
  padding: 0.55rem 0.8rem;
  border-radius: 0.45rem;
  background: var(--aua-figure-fill);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
}

/* Panels: as many columns as fit at 11rem or more, so three sit side by
   side in the column and stack on a phone without a breakpoint. */
.md-typeset .hf-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
}

/* Flow: boxes joined by arrows, left to right; top to bottom on phones. */
.md-typeset .hf-flow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.md-typeset .hf-flow > .hf-box,
.md-typeset .hf-flow > .hf-col {
  flex: 1 1 0;
  min-width: 0;
}

.md-typeset .hf-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.md-typeset .hf-arrow {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  min-width: 1.8rem;
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-arrow::after {
  content: "\2192";
  font-size: 1.2rem;
  line-height: 1;
  color: var(--aua-figure-line);
}

.md-typeset .hf-box--pill {
  border-radius: 2rem;
}

.md-typeset .hf-return {
  margin: 0.55rem 0 0;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-return::before {
  content: "\21A9\00a0";
  font-size: 0.95rem;
  color: var(--aua-figure-line);
}

.md-typeset .hf-return--stop {
  color: var(--aua-alert);
}

.md-typeset .hf-return--stop::before {
  color: var(--aua-alert);
}

/* The request stack in the prompting figure. */
.md-typeset .hf-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.45rem;
}

.md-typeset .hf-stack > p {
  margin: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 0.3rem;
  background: var(--md-default-fg-color--lightest);
  font-size: 0.72rem;
  text-align: center;
}

.md-typeset .hf-stack > .hf-stack-key {
  background: var(--aua-figure-fill);
  color: #ffffff;
}

/* Small drawn cues inside the consequence panels (decorative; the words
   beside them say the same thing). */
.md-typeset .hf-timeline {
  display: flex;
  margin: 0.55rem 0 0.2rem;
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-timeline > span {
  flex: 1;
  padding-top: 0.25rem;
  border-top: 2px solid var(--md-default-fg-color--light);
}

.md-typeset .hf-timeline > .hf-tl-after {
  border-top: 2px dashed var(--aua-alert);
  border-left: 3px solid var(--aua-alert);
  color: var(--aua-alert);
}

.md-typeset .hf-window {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0.2rem;
  font-size: 0.66rem;
}

.md-typeset .hf-window > span:first-child {
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-window > span:last-child {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.3rem;
}

.md-typeset .hf-quote {
  margin: 0.45rem 0 0;
  font-style: italic;
}

/* The caution gradient in the teaching figure: a bar from ok to stop
   beside labeled rows. */
.md-typeset .hf-gradient {
  display: grid;
  grid-template-columns: 0.5rem minmax(8rem, 12rem) 1fr;
  gap: 0.65rem 0.9rem;
  align-items: center;
}

.md-typeset .hf-gradient::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: stretch;
  border-radius: 0.25rem;
  background: linear-gradient(var(--aua-ok), var(--aua-warn), var(--aua-alert));
}

.md-typeset .hf-grad-row {
  display: contents;
}

.md-typeset .hf-grad-row > .hf-grad-label {
  grid-column: 2;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
}

.md-typeset .hf-grad-row > .hf-box {
  grid-column: 3;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .hf-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .md-typeset .hf-arrow::after {
    content: "\2193";
  }

  .md-typeset .hf-gradient {
    grid-template-columns: 0.5rem 1fr;
    gap: 0.35rem 0.8rem;
  }

  .md-typeset .hf-gradient::before {
    grid-row: 1 / span 6;
  }

  .md-typeset .hf-grad-row > .hf-grad-label,
  .md-typeset .hf-grad-row > .hf-box {
    grid-column: 2;
  }

  .md-typeset .hf-grad-row > .hf-grad-label {
    margin-top: 0.4rem;
  }
}

/* Weekly digest pages: the previous-week, archive and next-week line the
   render hook adds under the H1 and at the foot (2026-09-23). */
.md-typeset .digest-nav {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* === Tool Directory task chooser (owner approved 2026-09-23) ==============
   docs/javascripts/tools-chooser.js over the task index render_data.py
   builds from data/tool_tasks.yaml. Uses only Material's tokens and the
   site's existing widget idiom (the estimator panels, pill chips), so both
   schemes follow automatically. */

/* The panel: same frame as the hardware estimator and token estimator. */
.md-typeset .tool-chooser {
  margin: 0.6rem 0 1.4rem;
  padding: 0.8rem 1rem 0.9rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-left: 0.2rem solid var(--md-primary-fg-color);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--md-code-bg-color);
}

.md-typeset .tc-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.md-typeset .tc-legend {
  padding: 0;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.md-typeset .tc-subhead {
  margin: 0.6rem 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--md-typeset-color);
}

.md-typeset .tc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* The radio sits under its pill: invisible, still focusable and still in
   the accessibility tree, so arrow keys and screen readers work natively. */
.md-typeset .tc-chip {
  position: relative;
  display: inline-flex;
}

.md-typeset .tc-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.md-typeset .tc-chip label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.1rem 0.65rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 1rem;
  background: var(--md-default-bg-color);
  color: var(--md-typeset-color);
  font-size: 0.72rem;
  line-height: 1.3;
  cursor: pointer;
}

.md-typeset .tc-chip input:hover + label {
  border-color: var(--md-primary-fg-color);
}

/* Focus ring in the link color: about 6.6:1 on white and 6:1 on slate,
   where the amber accent would fall under the 3:1 a focus ring needs. */
.md-typeset .tc-chip input:focus-visible + label {
  outline: 2px solid var(--md-typeset-a-color);
  outline-offset: 2px;
}

/* Chosen: filled, bold AND a check mark, so the state never rests on
   color alone. The check is decorative; the radio announces "checked". */
.md-typeset .tc-chip input:checked + label {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #ffffff;
  font-weight: 700;
}

.md-typeset .tc-chip input:checked + label::before {
  content: "\2713";
  content: "\2713" / "";
}

.md-typeset .tc-count {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  min-width: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 0.6rem;
  background: var(--md-default-fg-color--lightest);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
}

.md-typeset .tc-chip input:checked + label .tc-count {
  background: rgba(255, 255, 255, 0.25);
}

.md-typeset .tc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.md-typeset .tc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.md-typeset .tc-status {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  font-weight: 700;
}

.md-typeset .tc-status:empty {
  margin: 0;
}

.md-typeset .tc-clear,
.md-typeset .tc-openall {
  padding: 0.15rem 0.7rem;
  border: 0.05rem solid var(--md-primary-fg-color);
  border-radius: 0.3rem;
  background: transparent;
  color: var(--md-typeset-a-color);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.md-typeset .tc-clear {
  margin-top: 0.6rem;
}

.md-typeset .tc-clear:focus-visible,
.md-typeset .tc-openall:focus-visible {
  outline: 2px solid var(--md-typeset-a-color);
  outline-offset: 2px;
}

.md-typeset .tc-idle {
  margin: 0.7rem 0 0;
  font-size: 0.74rem;
}

.md-typeset .tc-results {
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 0.05rem solid var(--md-default-fg-color--lightest);
}

.md-typeset h3.tc-results-heading,
[data-md-color-scheme="slate"] .md-typeset h3.tc-results-heading {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.md-typeset .tc-guide,
.md-typeset .tc-standing {
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
}

/* The standings line carries governance meaning, so it keeps full-strength
   text: the site's grey (--md-default-fg-color--light) measured under
   4.5:1 on the panel background (axe, 2026-09-23). Italic sets it apart. */
.md-typeset .tc-standing {
  font-style: italic;
}

.md-typeset .tc-results-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
}

.md-typeset .tc-change {
  font-size: 0.72rem;
}

.md-typeset .tc-results-heading {
  scroll-margin-top: 7rem;
}

.md-typeset .tc-grid {
  margin: 0.8rem 0 0.6rem;
}

.md-typeset .tc-also-heading {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Cross-listed card: says where it lives in the directory. */
.md-typeset .tc-home {
  margin: 0.45rem 0 0;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .tc-foot {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
}

/* A card reached by a #tool-... link: a brief outline so the eye lands. */
.md-typeset .tool-card.tc-target {
  outline: 2px solid var(--md-typeset-a-color);
  outline-offset: 2px;
  animation: tc-flash 2.4s ease-out 1 forwards;
}

@keyframes tc-flash {
  0%, 60% { outline-color: var(--md-typeset-a-color); }
  100% { outline-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .tool-card.tc-target {
    animation: none;
  }
}

/* Anchored cards clear Material's sticky header when jumped to. */
.md-typeset .tool-card[id] {
  scroll-margin-top: 6rem;
}

/* No-JavaScript task index: compact, one paragraph per task. */
.md-typeset .tool-task-index .tt-item {
  margin: 0 0 0.7rem;
}

.md-typeset .tool-task-index .tt-item p {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
}

.md-typeset .tool-task-index .tt-standing {
  color: var(--md-default-fg-color--light);
}

/* Phones: two even columns of pills instead of one ragged column, which
   cut the chooser from about 590px to about 400px tall at 390px wide.
   Labels may wrap to a second line inside their pill. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .tool-chooser {
    padding: 0.7rem 0.75rem 0.8rem;
  }
  .md-typeset .tc-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
  }
  .md-typeset .tc-chip {
    display: flex;
  }
  .md-typeset .tc-chip label {
    width: 100%;
    justify-content: space-between;
    padding: 0.15rem 0.55rem;
    border-radius: 0.8rem;
    font-size: 0.68rem;
  }
}

/* Prompt library chooser (owner approved 2026-09-23): reuses the Tool
   Directory chooser's panel and chip styles (.tool-chooser, .tc-*); two
   radio groups, so a little space between them. A chip that would match
   nothing is disabled rather than hidden, so the set of choices never
   jumps around. */
.md-typeset .prompt-chooser .pc-second {
  margin-top: 0.6rem;
}

/* The choosers hide what does not match with the `hidden` attribute, but
   Material gives details (each "Show the prompt" toggle) display:
   flow-root, which outranks the browser's own [hidden] rule, so filtered-out
   toggles stayed on the page without their headings (found 2026-09-25).
   Restate it for all page content, as .nt-demo already does locally. */
.md-typeset [hidden] {
  display: none;
}

.md-typeset .tc-chip input:disabled + label {
  opacity: 0.45;
  cursor: default;
}

/* === HTML figures, extended (the remaining 32 rebuilt, 2026-09-23) =======
   More shapes for the .hf vocabulary above, still words in HTML and shapes
   in CSS:
     .hf-box--filled / --dashed    a solid brand box with white text; a
                                   dashed box for optional or side notes
     .hf-list                      a column of small labeled pills
     .hf-segbar                    one bar split into labeled segments
     .hf-bars                      a labeled horizontal bar chart
     .hf-frame, .hf-chip           a container of chips (a window, a folder)
     .hf-label, .hf-marker         a small label above a box; a dashed
                                   marker line with its label
   Phones stack everything that sits side by side. */
/* Since the layout redesign (L14, 2026-09-25), "filled" is a tint, not
   solid navy: solid navy now means something you can press (the Copy and
   Start buttons), and the lecture guide's solid boxes were the same color
   as its buttons (MA-5). The border keeps the brand line, the tint keeps
   "filled" readable in the figure legends that name it, and the text is
   the page's own color, so contrast is the body text's in both schemes. */
[data-md-color-scheme="default"] {
  --aua-figure-tint: rgba(7, 97, 140, 0.13);
}

[data-md-color-scheme="slate"] {
  --aua-figure-tint: rgba(90, 163, 199, 0.2);
}

.md-typeset .hf-box--filled {
  border-color: var(--aua-figure-fill);
  background: var(--aua-figure-tint);
  color: var(--md-default-fg-color);
}

.md-typeset .hf-box--filled > .hf-box-sub,
.md-typeset .hf-box--filled > .hf-box-foot {
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-box--dashed {
  border: 1.5px dashed var(--md-default-fg-color--light);
}

.md-typeset .hf-label {
  margin: 0.3rem 0 0.2rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-col > .hf-label:first-child {
  margin-top: 0;
}

[dir] .md-typeset ul.hf-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset ul.hf-list > li {
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
  background: var(--md-default-fg-color--lightest);
  font-size: 0.72rem;
  text-align: center;
}

.md-typeset .hf-arrow--down {
  align-self: center;
}

.md-typeset .hf-arrow--down::after {
  content: "\2193";
}

.md-typeset .hf-col > .hf-banner {
  margin-top: 0;
}

.md-typeset .hf-note--alert {
  font-style: normal;
  color: var(--aua-alert);
}

.md-typeset .hf-note-right {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  text-align: right;
}

/* A bar split into segments; flex-grow sets the relative share. */
.md-typeset .hf-segbar {
  display: flex;
  overflow: hidden;
  border: 2px solid var(--aua-figure-line);
  border-radius: 0.45rem;
  font-size: 0.72rem;
}

.md-typeset .hf-segbar > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.55rem 0.4rem;
  border-right: 1px solid var(--md-default-bg-color);
  background: var(--md-default-fg-color--lightest);
  text-align: center;
  line-height: 1.3;
}

.md-typeset .hf-segbar > span:last-child {
  border-right: 0;
}

.md-typeset .hf-segbar small {
  display: block;
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-segbar > .hf-seg--key {
  background: var(--aua-figure-fill);
  color: #ffffff;
  font-weight: 700;
}

/* A labeled horizontal bar chart. Fill widths are set inline as a share
   of 80% of the track, leaving room for the value after the longest bar. */
.md-typeset .hf-bars {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 0.8rem;
  align-items: center;
  font-size: 0.74rem;
}

.md-typeset .hf-bars > p {
  display: contents;
}

.md-typeset .hf-bar-label {
  text-align: right;
}

.md-typeset .hf-bar-track {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.md-typeset .hf-bar-fill {
  flex: none;
  min-width: 3px;
  height: 1.1rem;
  border-radius: 0.15rem;
  background: var(--aua-figure-fill);
}

.md-typeset .hf-bar-fill--muted {
  background: var(--md-default-fg-color--light);
}

.md-typeset .hf-bar-value {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-bar-value strong {
  color: var(--md-typeset-color);
}

/* A container of chips: the context window, a project, a folder. */
.md-typeset .hf-frame {
  padding: 0.6rem;
  border: 2px solid var(--aua-figure-line);
  border-radius: 0.5rem;
}

.md-typeset .hf-frame > .hf-frame-title {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
}

.md-typeset .hf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.md-typeset .hf-chip {
  flex: 1 1 7rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.3rem;
  background: var(--md-default-fg-color--lightest);
  font-size: 0.72rem;
  text-align: center;
  line-height: 1.3;
}

.md-typeset .hf-chip small {
  display: block;
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-chip--filled {
  border-color: var(--aua-figure-fill);
  background: var(--aua-figure-fill);
  color: #ffffff;
  font-weight: 700;
}

.md-typeset .hf-chip--filled small {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
}

.md-typeset .hf-chip--faded {
  opacity: 0.55;
  border-style: dashed;
}

/* Something that has left the frame, beside it. */
.md-typeset .hf-outside {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.8rem;
  align-items: center;
}

.md-typeset .hf-outside > p {
  margin: 0;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
  text-align: center;
}

/* Decorative lines standing for a long, messy conversation. */
.md-typeset .hf-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem 0;
}

.md-typeset .hf-lines > span {
  height: 0.3rem;
  border-radius: 0.15rem;
  background: var(--md-default-fg-color--lighter);
}

.md-typeset .hf-lines > span:nth-child(2n) {
  width: 85%;
}

.md-typeset .hf-lines > .is-struck {
  background: linear-gradient(var(--aua-alert), var(--aua-alert)) center / 100% 2px no-repeat,
    var(--md-default-fg-color--lighter);
}

.md-typeset .hf-pill {
  margin: 0.45rem 0;
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem;
  background: var(--aua-figure-fill);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
}

/* A dashed marker under a box, with its label: "the knowledge cutoff". */
.md-typeset .hf-marker {
  margin: 0.2rem 0 0 1.2rem;
  padding: 0.4rem 0 0 0.6rem;
  border-left: 2px dashed var(--md-default-fg-color--light);
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .hf-segbar {
    flex-direction: column;
  }

  .md-typeset .hf-segbar > span {
    border-right: 0;
    border-bottom: 1px solid var(--md-default-bg-color);
  }

  .md-typeset .hf-bars {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  /* Stacked on a phone, each label must sit visibly closer to its own bar
     than to the bar above (2026-10-13: at 0.35rem the gaps read as even). */
  .md-typeset .hf-bar-label {
    margin-top: 0.8rem;
    text-align: left;
  }

  .md-typeset .hf-outside {
    grid-template-columns: 1fr;
  }

  .md-typeset .hf-note-right {
    text-align: left;
  }
}

/* A chip sitting in a sentence (the context window's "oldest messages"). */
.md-typeset .hf-outside .hf-chip {
  display: inline-block;
  margin-bottom: 0.35rem;
}

/* .hf vocabulary, continued:
     .hf-steps     an ordered list of boxes, numbered by CSS, wrapping as room
                   allows; the numbers carry the order, so no arrows to break
     .hf-step-tag  a small label on a step saying whose step it is
     .hf-split     two panels divided by a labeled line (a bright line)
     .hf-rows      rows of box, arrow, outcome, beside one input
     .hf-boundary  a dashed container: everything inside runs within it
     .hf-mock      a schematic of a screen (tabs, a gauge, flagged bars) */
[dir] .md-typeset ol.hf-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hf-step;
}

[dir] .md-typeset ol.hf-steps > li {
  position: relative;
  margin: 0;
  padding-top: 0.9rem;
  counter-increment: hf-step;
}

.md-typeset ol.hf-steps > li::before {
  content: counter(hf-step);
  position: absolute;
  top: -0.55rem;
  left: 0.6rem;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.3rem;
  border: 2px solid var(--md-default-bg-color);
  border-radius: 0.7rem;
  background: var(--aua-figure-line);
  color: var(--md-default-bg-color);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* [dir] and ol match the base rule above, which otherwise wins. */
[dir] .md-typeset ol.hf-steps--wide {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.md-typeset .hf-step-tag {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-box--filled .hf-step-tag {
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-legend {
  margin: 0.45rem 0 0;
  font-size: 0.68rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* Two panels either side of a labeled line. */
.md-typeset .hf-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.8rem;
  align-items: stretch;
}

.md-typeset .hf-split-line {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 0;
  margin: 0 0.6rem;
  border-left: 3px solid var(--aua-alert);
}

.md-typeset .hf-split-line > span {
  margin-bottom: -1.3rem;
  font-size: 0.68rem;
  color: var(--aua-alert);
  white-space: nowrap;
}

.md-typeset .hf-box-alert {
  color: var(--aua-alert);
}

/* Rows of box, arrow, outcome. */
.md-typeset .hf-rows {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
  gap: 0.55rem 0.35rem;
  align-items: center;
}

.md-typeset .hf-rows > p {
  margin: 0;
  font-size: 0.72rem;
  text-align: center;
}

/* A dashed boundary around the steps that run inside it. */
.md-typeset .hf-boundary {
  padding: 0.7rem;
  border: 1.5px dashed var(--md-default-fg-color--light);
  border-radius: 0.6rem;
}

.md-typeset .hf-boundary > .hf-label:first-child {
  margin-bottom: 0.8rem;
}

/* A schematic of a screen. */
.md-typeset .hf-mock {
  padding: 0.7rem;
  border: 2px solid var(--md-default-fg-color--light);
  border-radius: 0.6rem;
}

.md-typeset .hf-mock-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.8rem;
}

.md-typeset .hf-mock-tabs > span {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.25rem;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-mock-tabs > .is-active {
  border-color: var(--aua-figure-fill);
  background: var(--aua-figure-fill);
  color: #ffffff;
  font-weight: 700;
}

.md-typeset .hf-mock-body {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  align-items: start;
}

.md-typeset .hf-gauge {
  text-align: center;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-gauge > span {
  display: block;
  width: 7rem;
  height: 3.5rem;
  margin: 0 auto 0.3rem;
  border-radius: 7rem 7rem 0 0;
  background: conic-gradient(from -90deg at 50% 100%,
    var(--aua-figure-fill) 0deg 120deg, var(--md-default-fg-color--lightest) 120deg 180deg,
    transparent 180deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 2.3rem, #000 2.35rem);
  mask: radial-gradient(circle at 50% 100%, transparent 2.3rem, #000 2.35rem);
}

.md-typeset .hf-gauge > strong {
  display: block;
  font-size: 0.8rem;
  color: var(--md-typeset-color);
}

.md-typeset .hf-flag--low {
  font-weight: 700;
  color: var(--aua-alert);
}

.md-typeset .hf-flag--high {
  font-weight: 700;
  color: var(--aua-ok);
}

.md-typeset .hf-mock-strip {
  margin: 0.8rem 0 0;
  padding: 0.45rem 0.7rem;
  border: 1.5px dashed var(--aua-figure-line);
  border-radius: 0.35rem;
  font-size: 0.7rem;
  text-align: center;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .hf-split {
    grid-template-columns: 1fr;
  }

  .md-typeset .hf-split-line {
    width: auto;
    height: 0;
    margin: 0.6rem 0 0.9rem;
    border-left: 0;
    border-top: 3px solid var(--aua-alert);
  }

  .md-typeset .hf-split-line > span {
    margin: 0.2rem 0 0;
    padding: 0 0.4rem;
    background: var(--md-default-bg-color);
    transform: translateY(-0.75rem);
  }

  .md-typeset .hf-rows {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .md-typeset .hf-rows > .hf-arrow {
    justify-self: center;
  }

  .md-typeset .hf-rows > p {
    margin-bottom: 0.5rem;
  }

  .md-typeset .hf-mock-body {
    grid-template-columns: 1fr;
  }
}

/* A full-width wall under a flow (the feedback pipeline). */
.md-typeset .hf-box--wall {
  margin-top: 0.8rem;
}

/* The agent loop's boundary takes the room its steps need. */
.md-typeset .hf-flow > .hf-boundary {
  flex: 3 1 0;
  min-width: 0;
}

/* Room under a split for the dividing line's label. */
.md-typeset .hf-split {
  padding-bottom: 1.5rem;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .hf-split {
    padding-bottom: 0;
  }
}

/* .hf vocabulary, last additions:
     .hf-lanes     labeled lanes, each a short flow
     .hf-wall      a dashed red wall between steps (not a step itself)
     .hf-pipes     memory tiers as pipes of different widths
     .hf-scale     a ruler drawn to scale, with labeled marks
     .hf-chart     a data chart: bars stay SVG (no text in it), and the
                   legend, notes and axis labels are HTML
     .hf-sr        text for screen readers only */
.md-typeset .hf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.md-typeset .hf-lanes {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.7rem 1rem;
  align-items: center;
}

.md-typeset .hf-lanes > .hf-lane-label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
}

.md-typeset .hf-lane-note {
  flex: 1 1 0;
  margin: 0;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-wall {
  align-self: stretch;
  width: 0;
  margin: 0 0.5rem;
  border-left: 3px dashed var(--aua-alert);
}

/* Memory tiers as pipes: a grid of tier, pipe, and the processor they feed. */
.md-typeset .hf-pipes {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(6rem, 1.3fr) minmax(10rem, 1.2fr);
  gap: 0.6rem 0.6rem;
  align-items: center;
}

.md-typeset .hf-pipes > .hf-pipe {
  display: block;
  border-radius: 0.2rem;
}

.md-typeset .hf-pipe--wide {
  height: 2.2rem;
  background: var(--aua-figure-fill);
}

.md-typeset .hf-pipe--mid {
  height: 0.75rem;
  background: var(--aua-figure-line);
  opacity: 0.6;
}

.md-typeset .hf-pipe--thin {
  height: 0.25rem;
  background: var(--aua-alert);
}

.md-typeset .hf-pipes > .hf-processor {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: stretch;
}

.md-typeset .hf-pipes > .hf-pipes-note {
  grid-column: 2;
  margin: 0;
  font-size: 0.66rem;
  font-style: italic;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* A ruler drawn to scale; positions are inline percentages of its width. */
.md-typeset .hf-scale {
  position: relative;
  padding: 0 0.5rem;
  font-size: 0.72rem;
}

.md-typeset .hf-scale > p {
  margin: 0;
}

.md-typeset .hf-scale-track {
  position: relative;
  height: 1.1rem;
  margin: 0.3rem 0 0;
}

.md-typeset .hf-scale-track > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.md-typeset .hf-scale-track > .hf-scale-two {
  border: 1.5px dashed var(--aua-figure-line);
}

.md-typeset .hf-scale-track > .hf-scale-one {
  background: var(--aua-figure-fill);
}

.md-typeset .hf-scale-track > .hf-scale-note {
  bottom: auto;
  padding-left: 0.4rem;
  font-size: 0.68rem;
  white-space: nowrap;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-scale-axis {
  position: relative;
  height: 1.6rem;
  border-top: 1.5px solid var(--md-default-fg-color--light);
}

.md-typeset .hf-scale-axis > span {
  position: absolute;
  top: 0;
  padding-top: 0.35rem;
  transform: translateX(-50%);
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-scale-axis > span::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: 50%;
  height: 0.5rem;
  border-left: 1px solid var(--md-default-fg-color--light);
}

.md-typeset .hf-scale-axis > span:first-child {
  transform: none;
}

.md-typeset .hf-scale-axis > span:first-child::before {
  left: 0;
}

.md-typeset .hf-scale-bracket {
  margin-top: 0.3rem;
  padding-top: 0.35rem;
  border: 1.5px solid var(--aua-alert);
  border-top: 0;
  height: 0.5rem;
}

.md-typeset .hf-scale > .hf-scale-bracket-label {
  margin-top: 0.3rem;
  color: var(--aua-alert);
}

/* A data chart with HTML text around SVG bars. */
.md-typeset .hf-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
}

.md-typeset .hf-chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.md-typeset .hf-chart-legend > .hf-chart-peak {
  margin-left: auto;
  font-style: italic;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-swatch {
  width: 0.65rem;
  height: 0.65rem;
  background: var(--aua-figure-fill);
}

.md-typeset .hf-swatch--muted {
  background: var(--md-default-fg-color--light);
  opacity: 0.5;
}

.md-typeset .hf-chart > svg {
  display: block;
  width: 100%;
  height: 9rem;
}

.md-typeset .hf-chart-axis {
  position: relative;
  height: 1.2rem;
  margin: 0;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-chart-axis > span {
  position: absolute;
  top: 0.15rem;
  transform: translateX(-50%);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .hf-lanes {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .md-typeset .hf-lanes > .hf-lane-label {
    margin-top: 0.6rem;
  }

  .md-typeset .hf-wall {
    width: auto;
    height: 0;
    margin: 0.4rem 0;
    border-left: 0;
    border-top: 3px dashed var(--aua-alert);
  }

  .md-typeset .hf-pipes {
    grid-template-columns: 1fr;
  }

  .md-typeset .hf-pipes > .hf-processor,
  .md-typeset .hf-pipes > .hf-pipes-note {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Small pieces for the last batch. */
.md-typeset .hf-box--aside {
  max-width: 18rem;
  margin: 0 0 0.7rem;
  font-size: 0.7rem;
}

.md-typeset .hf-chips--below {
  margin-top: 0.5rem;
}

[dir] .md-typeset ul.hf-list > li.hf-list-key {
  border: 1.5px solid var(--aua-figure-line);
  font-weight: 700;
}

/* The first axis label starts at its tick rather than centering on it,
   which would push it past the chart's left edge. */
.md-typeset .hf-chart-axis > span:first-child {
  transform: none;
}

/* Glossary A to Z jump row (owner approved 2026-09-23), built by the
   render hook from the term headings. Letters with no terms are dimmed
   and not links. */
.md-typeset .glossary-az {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.8rem 0 1.4rem;
}

.md-typeset .glossary-az > a,
.md-typeset .glossary-az > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.md-typeset .glossary-az > a {
  border: 1px solid var(--md-default-fg-color--lighter);
}

.md-typeset .glossary-az > a:hover,
.md-typeset .glossary-az > a:focus-visible {
  border-color: var(--md-typeset-a-color);
  background: var(--md-default-fg-color--lightest);
}

.md-typeset .glossary-az > .is-empty {
  color: var(--md-default-fg-color--lighter);
}

/* Terms reached from the jump row clear the sticky header. */
.md-typeset .glossary h2 {
  scroll-margin-top: 5rem;
}

/* Explainer videos (owner approved 2026-10-07; scripts/render_data.py and
   docs/javascripts/explainer-video.js): a still from the film with a play
   button, and YouTube's player in the same 16:9 box once pressed. The
   button sits low, over the audience, so it never covers the film's title.
   It is neutral ink, not a kind color: color on this site means a kind of
   page. */
.md-typeset figure.ev {
  display: block;
  width: 100%;
  margin: 0 0 1em;
  text-align: left;
}

.md-typeset .ev-label {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.md-typeset a.ev-frame,
.md-typeset .ev-player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--md-default-fg-color--lightest);
}

.md-typeset a.ev-frame {
  border: 0.05rem solid var(--md-default-fg-color--lightest);
}

.md-typeset .ev-player {
  border: 0;
}

.md-typeset a.ev-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.md-typeset .ev-play {
  position: absolute;
  left: 50%;
  top: 77%;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: rgba(20, 28, 34, 0.82);
  color: #fff;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  transition: transform 0.15s, background-color 0.15s;
}

.md-typeset a.ev-frame:is(:hover, :focus-visible) .ev-play {
  background: rgba(20, 28, 34, 0.96);
  transform: translate(-50%, -50%) scale(1.08);
}

.md-typeset a.ev-frame:is(:focus-visible, .focus-visible) {
  outline: 2px solid var(--hub-focus);
  outline-offset: 2px;
}

.md-typeset figure.ev figcaption {
  max-width: none;
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  font-style: normal;
  text-align: left;
}

.md-typeset .ev-note {
  display: block;
  color: var(--md-default-fg-color--light);
}

.md-typeset .ev-cap {
  display: block;
  margin-top: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ev-play {
    transition: none;
  }
}

/* A film on a shelf page (the leaderboard film on benchmarks.md, 2026-10-12):
   shelves have no reading grid, so without this the film filled the whole
   frame. From the width where reading pages become two columns it takes one
   column's width, as on those pages, with the text that follows beside it
   (a figure keeps its text beside it, DESIGN.md), and the next section
   starts below both. One block, so it backs out in one step. */
@media screen and (min-width: 68.75em) {
  body[data-page-type="shelf"] .md-typeset > figure.ev {
    float: right;
    width: calc(50% - 0.6rem);
    margin: 0 0 1.2rem 1.2rem;
  }

  body[data-page-type="shelf"] .md-typeset > figure.ev ~ h2 {
    clear: both;
  }
}

/* The films page (learning/films.md, owner approved 2026-10-12): every
   film in the block its own page uses, grouped by Learn stage, then by the
   site section of a page off the route map. The renderer
   sets each group's column counts (--ev-wide up to four, --ev-mid up to
   three) to the count that leaves no film alone in a row. The title above
   each film is the link to its page, so it is the size of a card title. */
.md-typeset .ev-shelf-intro,
.md-typeset .ev-shelf-lede {
  max-width: 42rem;
}

.md-typeset .ev-shelf-lede {
  margin: 0 0 1.2rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .ev-shelf-stage {
  margin: -0.5rem 0 0.9rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .ev-shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem 1.4rem;
  margin: 0 0 2rem;
}

@media screen and (min-width: 40em) {
  .md-typeset .ev-shelf {
    grid-template-columns: repeat(var(--ev-mid, 2), minmax(0, 1fr));
  }
}

@media screen and (min-width: 76.25em) {
  .md-typeset .ev-shelf {
    grid-template-columns: repeat(var(--ev-wide, 3), minmax(0, 1fr));
  }
}

.md-typeset .ev-shelf figure.ev {
  margin: 0;
}

/* A group of one film (Compare Models, 2026-10-12): across the whole row it
   would fill the frame, so from the width where the shelf goes to columns
   (40em) the film takes half the row, the size a reading page gives it, with
   its title, length and caption beside it. On a phone it is a film like any
   other. */
@media screen and (min-width: 40em) {
  .md-typeset .ev-shelf[data-ev-one] figure.ev {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 1.4rem;
    align-items: start;
  }

  .md-typeset .ev-shelf[data-ev-one] figure.ev > .ev-frame {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .md-typeset .ev-shelf[data-ev-one] figure.ev > .ev-label {
    grid-column: 2;
    grid-row: 1;
  }

  .md-typeset .ev-shelf[data-ev-one] figure.ev > figcaption {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

.md-typeset .ev-shelf .ev-label {
  font-size: 0.85rem;
}

/* Each film wears the kind of the page its title opens (layout_nav.py adds
   the class and data-kind; the bar and tint come from the kind treatment in
   layout-nav.css), with the title in the kind's text color. */
.md-typeset figure.ev--shelf.kind-mark {
  padding: 0.75rem 0.9rem 0.85rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

.md-typeset figure.ev--shelf.kind-mark .ev-label a {
  color: var(--k);
}

/* === Company pages: the commands' worked examples (2026-10-09) ==========
   Each command is a small figure in the site's own vocabulary (words in
   HTML, shapes in CSS, the .hf colors), revised the same day at the owner's
   request that the pages match the rest of the site: a white screen with the
   brand outline of .hf-box, the agent's name as a filled tab (as .hf-mock),
   what you type on the brand tint, what you see beneath it, and a menu's
   choices as chips. Labelled as an illustration from the company's
   documentation, never a screenshot. Colors are the scheme's own tokens, so
   both schemes keep the body text's contrast. */
.md-typeset .hf-cmd-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.2rem 1.4rem;
  margin: 0.6rem 0 1.4rem;
}

/* Three across where they fit, one below that: every group holds a multiple
   of three (render_vendors.py checks it), so no row is left with one. */
@media screen and (min-width: 68.75em) {
  .md-typeset .hf-cmd-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.md-typeset .figure.hf-cmd {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
}

.md-typeset .hf-cmd > .hf-title {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  text-align: left;
}

.md-typeset .hf-cmd > .hf-title > code {
  margin-right: 0.3em;
  font-weight: 700;
}

.md-typeset .hf-cmd-when {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-term {
  padding: 0.55rem 0.7rem 0.6rem;
  border: 2px solid var(--aua-figure-line);
  border-radius: 0.45rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: 0.72rem;
  line-height: 1.45;
}

.md-typeset .hf-term-bar {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.12rem 0.6rem;
  border-radius: 0.25rem;
  background: var(--aua-figure-fill);
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 700;
}

.md-typeset .hf-term-in {
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.55rem;
  border-left: 3px solid var(--aua-figure-line);
  border-radius: 0 0.3rem 0.3rem 0;
  background: var(--aua-figure-tint);
  font-family: var(--md-code-font-family);
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}

.md-typeset .hf-term-caret {
  color: var(--aua-figure-line);
  font-weight: 700;
}

.md-typeset .hf-term-in > kbd {
  display: inline;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  color: var(--md-default-fg-color);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  white-space: pre-wrap;
}

[dir] .md-typeset ul.hf-term-out {
  margin: 0;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset ul.hf-term-out > li {
  margin: 0.2rem 0;
  font-family: var(--md-code-font-family);
  font-size: 0.68rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* A line that describes the screen rather than quoting it. */
[dir] .md-typeset ul.hf-term-out > li.hf-term-desc {
  font-family: var(--md-text-font-family);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--md-default-fg-color--light);
}

/* A menu's choices: chips, as .hf-chip. */
[dir] .md-typeset ul.hf-term-out > li.hf-term-opt {
  display: inline-block;
  margin: 0.15rem 0.35rem 0.15rem 0;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.3rem;
  background: var(--md-default-fg-color--lightest);
  font-family: var(--md-text-font-family);
  font-size: 0.66rem;
}

.md-typeset .hf-cmd-note {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
}

.md-typeset .hf-cmd > figcaption {
  max-width: none;
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  text-align: left;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hf-cmd-src {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.62rem;
}

/* layout_width centres a figure's caption and paragraphs at the reading measure
   (.w-page figure > :is(figcaption, p)); a command figure is one cell of a grid,
   so its words run the cell's full width from its left edge. */
.md-typeset .w-page .hf-cmd > :is(figcaption, p) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* The commands with no worked example: one short row each, in a grid that
   runs three across where it fits. */
.md-typeset .hf-cmd-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 1.6rem;
  margin: 0.4rem 0 1.2rem;
}

@media screen and (min-width: 68.75em) {
  .md-typeset .hf-cmd-more-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.md-typeset .w-page .hf-cmd-more-grid > p {
  max-width: none;
  margin: 0;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.72rem;
}

.md-typeset .hf-cmd-more-grid > p > code {
  margin-right: 0.35em;
  font-weight: 700;
}