/* di-components.css: the Digital Iceberg component layer.

   Framework-agnostic HTML and CSS for the site, the tools and the course pages.
   Load order: css/fonts.css, dist/tokens.css, css/base.css, then this file, then your own CSS.

   Rules this file keeps (README.md has the full set, component by component):
   - Role tokens only. No --p-* primitive and no colour literal appears below. Component tokens
     (the Blueprint grammar: route, node, station, plate, field) are declared here from the roles,
     on :root and again on every [data-surface], so an ink island inside paper re-resolves them.
   - No glow, blur or coloured shadow anywhere in the interface. Glow belongs to art and coded
     diagrams. The only shadows are the token shadows: --sh-lead (the lead plate) and --sh-book.
   - Orange (--action-key-*, --marker, --kicker-frame on ink) is the frame kicker plus one other
     mark per screen. Red (--warning) appears only on a warning, always with an icon and words.
   - No text under 13px. Verdana 400 and 700 only; Newsreader for reading text.
   - A line means a sequence: routes are drawn only where a person moves through an order.
   - Every class is prefixed di- so it can sit beside a consumer's CSS while the re-skin lands.
   - Masks (the small arrows and ticks drawn in CSS) carry only alpha; their colour is currentColor
     or a role token. */

/* ==========================================================================
   0. Component tokens
   ========================================================================== */

:root {
  /* Small glyphs drawn as masks. The fill comes from background-color, never from the SVG. */
  --i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  --i-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E");
  --i-sort-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3C/svg%3E");
  --i-sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

:root,
[data-surface] {
  /* The Blueprint grammar. Read roles only; a theme that is not DI never has to define these. */
  --route-line: var(--line-path);
  --route-done: var(--structure);
  --route-ahead: var(--structure-quiet);
  --node-size: 14px;
  --node-here-size: 20px;
  --node-numbered: 32px;
  --node-y: 1px;
  --node-ring: var(--control-line);
  --node-done: var(--structure);
  --node-done-fg: var(--surface);
  --node-here: var(--structure);
  --node-fill: var(--surface);
  --node-marked: var(--marker);
  --node-marked-edge: var(--marker-edge);
  --node-marked-fg: var(--marker-fg);
  --station-bg: var(--surface-raised);
  --station-line: var(--rule-strong);

  /* Panels, fields, plates and overlays. */
  --panel-bg: var(--surface-raised);
  --panel-line: var(--rule-strong);
  --field-bg: var(--surface-raised-2);
  --plate-matte: var(--surface-sunken);
  --plate-edge: var(--rule-strong);
  --scrim: rgb(var(--surface-rgb) / 0.84);

  /* Page-head art: the art zone of the 16:9 master (8:3, the band under the frame zone), at most
     --headart-h tall, so the first line of an essay stays on the first screen at 1440 by 900
     (budget.first-prose-y-max) with a three-line title and a two-line subtitle. */
  --headart-hw: 0.375;
  --headart-h: 240px;

  /* Room a scroll container leaves around its items, so a focus ring is never cut off. */
  --ring-room: calc(var(--focus-w) + var(--focus-offset));
}

[data-surface="paper"] {
  --field-bg: var(--surface);
  --plate-matte: var(--surface-raised);
  --scrim: rgb(var(--text-1-rgb) / 0.62);
}

/* ==========================================================================
   1. Layout helpers and type roles
   ========================================================================== */

.di-wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.di-skip {
  position: absolute;
  left: var(--s-3);
  top: calc(-1 * var(--s-9));
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-control);
  background: var(--action-fill-bg);
  color: var(--action-fill-fg);
  font: var(--fw-bold) var(--fs-ui) / 1.2 var(--font-sans);
  text-decoration: none;
}
.di-skip:focus { top: var(--s-3); color: var(--action-fill-fg); }

/* Kicker: Verdana Bold caps. Blue section kicker by default; the frame kicker is orange on ink
   (the covers' kicker) and blue on paper. Type it in sentence case: CSS sets the caps. */
.di-kicker {
  margin: 0;
  font: var(--fw-bold) var(--fs-label) / var(--lh-label) var(--font-sans);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--kicker);
}
.di-kicker--frame {
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  letter-spacing: var(--tr-kicker);
  color: var(--kicker-frame);
}
.di-kicker > span:not(:last-child)::after { content: "\00B7"; margin-inline: 0.45em; }
.di-kicker > .di-flag:not(:last-child)::after { content: none; }
.di-kicker > .di-flag { margin-right: 0.6em; }

.di-label {
  margin: 0;
  font: var(--fw-bold) var(--fs-label) / var(--lh-label) var(--font-sans);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* Meta row: middle dots glued to the item before them, so a wrapped line never starts with one. */
.di-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-3);
}
.di-meta > *:not(:last-child)::after { content: "\00B7"; margin-inline: 0.55em; }
.di-meta strong { color: var(--text-2); font-weight: var(--fw-bold); }

.di-dek {
  margin: 0;
  max-width: 34em;
  font-size: var(--fs-dek);
  line-height: var(--lh-dek);
  color: var(--text-subtitle);
}

/* Title-length steps (fitted to the 137 real titles). Pick by character count:
   up to 50 the base step, 51 to 80 --m, 81 to 100 --l, over 100 --xl. */
.di-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  color: var(--text-1);
  text-wrap: balance;
}
.di-title--m { font-size: var(--fs-title-m); line-height: var(--lh-title-m); letter-spacing: var(--tr-title-m); }
.di-title--l { font-size: var(--fs-title-l); line-height: var(--lh-title-l); letter-spacing: var(--tr-title-l); }
.di-title--xl { font-size: var(--fs-title-xl); line-height: var(--lh-title-xl); letter-spacing: var(--tr-title-xl); }
.di-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.di-display.di-title--m { font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: var(--tr-display-m); }
.di-display.di-title--l { font-size: var(--fs-display-l); line-height: var(--lh-display-l); letter-spacing: var(--tr-display-l); }
.di-display.di-title--xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); }

/* Every component title is Verdana Bold, whatever element carries it. */
.di-sectionhead__title, .di-station__title, .di-panel__title, .di-card__title, .di-toolcard__title,
.di-bookcard__title, .di-author__name, .di-dialog__title, .di-empty__title, .di-chart__title,
.di-transcript__title { font-family: var(--font-sans); font-weight: var(--fw-bold); text-wrap: balance; }

/* Section head: kicker, title, optional lede and one arrow link, on a strong rule. Not a route. */
.di-sectionhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-2) var(--s-5);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-6);
  border-bottom: var(--line-hair) solid var(--rule-strong);
}
.di-sectionhead > .di-kicker { grid-column: 1 / -1; }
.di-sectionhead__title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  color: var(--text-1);
}
.di-sectionhead__lede { grid-column: 1; margin: var(--s-2) 0 0; max-width: var(--measure-ui); color: var(--text-3); }
.di-sectionhead__link { grid-column: 2; grid-row: 2; align-self: end; }

/* Breadcrumb */
.di-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-3); }
.di-crumbs li:not(:last-child)::after { content: "/"; margin-inline: 0.6em; color: var(--text-3); }
.di-crumbs a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--link); text-decoration-color: var(--link-underline); }
.di-crumbs a:hover { color: var(--link-hover); }
.di-crumbs [aria-current] { color: var(--text-2); }

/* ==========================================================================
   2. Lines: the waterline (2px, once per page) and the lit line (base.css .lit-line)
   ========================================================================== */

.di-waterline {
  display: block;
  height: var(--waterline-w);
  margin: 0;
  border: 0;
  background: var(--waterline);
}

.di-rule { height: 0; margin: 0; border: 0; border-top: var(--line-hair) solid var(--rule); }
.di-rule--strong { border-top-color: var(--rule-strong); }

/* ==========================================================================
   3. Actions: buttons, icon buttons, links
   ========================================================================== */

.di-btn {
  --btn-bg: transparent;
  --btn-bg-hover: var(--btn-bg);
  --btn-bg-active: var(--btn-bg-hover);
  --btn-fg: var(--text-1);
  --btn-line: transparent;
  --btn-line-hover: var(--btn-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  max-width: 100%;
  min-height: var(--tap);
  padding: var(--s-1) calc(var(--s-5) - 4px);
  border: var(--line-hair) solid var(--btn-line);
  border-radius: var(--r-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: var(--fw-bold) var(--fs-ui) / 1.2 var(--font-sans);
  text-align: center;
  text-decoration: none;
  /* Labels wrap only when the button would otherwise run past its container (a 320px screen is
     the WCAG 1.4.10 reflow width). In a row of actions the button moves to a new line first. */
  white-space: normal;
  text-wrap: balance;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.di-btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-line-hover); color: var(--btn-fg); }
.di-btn:active { background: var(--btn-bg-active); }
.di-btn > svg { width: 18px; height: 18px; flex: none; }

/* Key: the one orange action on a screen. Navy label, never white. On paper a 1px navy edge draws
   its shape (orange on white is 2.53:1); on ink the edge is the fill colour. */
.di-btn--key {
  --btn-bg: var(--action-key-bg);
  --btn-bg-hover: var(--action-key-bg-hover);
  --btn-bg-active: var(--action-key-bg-pressed);
  --btn-fg: var(--action-key-fg);
  --btn-line: var(--action-key-edge);
  --btn-line-hover: var(--action-key-edge);
}
/* Secondary: the standard filled action; repeatable on a screen. */
.di-btn--secondary {
  --btn-bg: var(--action-fill-bg);
  --btn-bg-hover: var(--action-fill-bg-hover);
  --btn-fg: var(--action-fill-fg);
}
/* Quiet: an outlined action for Back, Cancel, Subscribe in the header. */
.di-btn--quiet {
  --btn-fg: var(--action-ghost-fg);
  --btn-line: var(--action-ghost-line);
  --btn-bg-hover: var(--action-ghost-bg-hover);
  --btn-line-hover: var(--action-ghost-fg);
}
/* Text: no box, link colour. Still 44px tall. */
.di-btn--text {
  --btn-fg: var(--link);
  padding-inline: var(--s-1);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: var(--line-hair);
  text-underline-offset: 0.2em;
}
.di-btn--text:hover { color: var(--link-hover); text-decoration-color: currentColor; }
/* Danger: a destructive action is a warning, so it takes the warning colour and words. */
.di-btn--danger {
  --btn-fg: var(--warning);
  --btn-line: var(--warning);
  --btn-bg-hover: var(--warning-bg);
}
.di-btn--sm { min-height: 36px; padding-inline: var(--s-3); font-size: var(--fs-small); }
.di-btn--block { display: flex; width: 100%; }
.di-btn:disabled,
.di-btn[aria-disabled="true"] {
  --btn-bg: var(--action-disabled-bg);
  --btn-bg-hover: var(--action-disabled-bg);
  --btn-fg: var(--action-disabled-fg);
  --btn-line: transparent;
  --btn-line-hover: transparent;
  cursor: not-allowed;
}
/* Busy: keep the label, add a turning ring. Static under reduced motion. */
.di-btn[aria-busy="true"]::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  border: var(--line-path) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-round);
  animation: di-turn 900ms linear infinite;
}
@keyframes di-turn { to { transform: rotate(1turn); } }

.di-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.di-actions--end { justify-content: flex-end; }
.di-actions--split { justify-content: space-between; }

/* Icon button: 44px target, an accessible name that says what it does. */
.di-iconbtn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: var(--line-hair) solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.di-iconbtn:hover { color: var(--text-1); background: var(--action-ghost-bg-hover); }
.di-iconbtn > svg { width: 20px; height: 20px; }
.di-iconbtn--line { border-color: var(--action-ghost-line); color: var(--text-1); }
.di-iconbtn--sm { width: 36px; height: 36px; }
.di-iconbtn--sm > svg { width: 18px; height: 18px; }
.di-iconbtn[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--selected-line); color: var(--selected-fg); }
.di-iconbtn:disabled,
.di-iconbtn[aria-disabled="true"] { color: var(--action-disabled-fg); background: transparent; border-color: transparent; cursor: not-allowed; }

/* Links. Prose links come from base.css (colour plus underline). */
.di-link { color: var(--link); text-decoration-line: underline; text-decoration-color: var(--link-underline); text-decoration-thickness: var(--line-hair); text-underline-offset: 0.2em; }
.di-link:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.di-link--quiet { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--text-2); text-decoration-color: var(--rule-strong); }
.di-link--quiet:hover { color: var(--text-1); }

/* Arrow link: a short Bold label and an arrow drawn in CSS (Verdana has no arrow glyphs). */
.di-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--target-min);
  color: var(--link);
  font: var(--fw-bold) var(--fs-small) / 1.3 var(--font-sans);
  text-decoration: none;
}
.di-arrowlink::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background-color: currentColor;
  mask: var(--i-arrow) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease);
}
.di-arrowlink:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.di-arrowlink:hover::after { transform: translateX(3px); }
.di-arrowlink--back::after { content: none; }
.di-arrowlink--back::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background-color: currentColor;
  mask: var(--i-arrow-left) center / contain no-repeat;
}
.di-arrowlink--external::after { mask-image: var(--i-external); }
.di-arrowlink--external:hover::after { transform: translate(2px, -2px); }

/* ==========================================================================
   4. Shell: header, mobile menu, footer
   ========================================================================== */

.di-header {
  container: di-header / inline-size;
  position: relative;
  z-index: var(--z-header);
  background: var(--surface);
}
.di-header__in {
  display: flex;
  align-items: stretch;
  gap: var(--s-6);
  min-height: 84px;
}
/* The lockup keeps its token width and gives way only when the header is squeezed narrower than
   any phone (a 320px screen leaves room), so Menu always keeps its word and nothing runs off. */
.di-header__brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; margin-inline: calc(-1 * var(--ring-room)); padding: var(--s-3) var(--ring-room); }
.di-header__brand img { width: var(--lockup-w-2); max-width: 100%; height: auto; }
/* The brand link fills the bar's height, so its ring sits inside it; --ring-room (given back by the
   margin) keeps the ring clear of the lockup. */
.di-header__brand:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }
.di-header__nav { display: flex; margin-left: auto; }
.di-header__list { display: flex; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.di-header__list > li { position: relative; display: flex; align-items: center; }
.di-header__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text-2);
  font: var(--fw-bold) var(--fs-ui) / 1.2 var(--font-sans);
  text-decoration: none;
}
.di-header__link:hover { color: var(--text-1); }
.di-header__link[aria-current] { color: var(--text-1); }
/* The current section sits on the lit line as a short travelled segment. */
.di-header__link[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: var(--line-path);
  background: var(--structure);
}
.di-header__tools { display: flex; align-items: center; gap: var(--s-2); }
.di-header__menu { display: none; }
.di-header .lit-line { position: absolute; left: 0; right: 0; bottom: 0; }

@container di-header (min-width: 1280px) {
  .di-header__brand img { width: var(--lockup-w-1); }
}
@container di-header (max-width: 959px) {
  .di-header__nav, .di-header__cta { display: none; }
  .di-header__menu { display: inline-flex; }
  .di-header__tools { margin-left: auto; }
  .di-header__in { min-height: 72px; gap: var(--s-3); }
  .di-header__brand img { width: var(--lockup-w-3); }
}
@container di-header (max-width: 599px) {
  .di-header__in { min-height: 64px; }
  .di-header__brand img { width: var(--lockup-w-4); }
}

/* Under 380px (a 320px phone) the search link lives only in the menu, so Menu keeps its word. */
@container di-header (max-width: 379px) {
  .di-header__search { display: none; }
}

/* Mobile menu: a panel under the header, opened by the Menu button (aria-expanded, aria-controls).
   No extra shadow: the raised surface and a hairline separate it. */
.di-menu { border-top: var(--line-hair) solid var(--rule); background: var(--surface-raised); }
.di-menu[hidden] { display: none; }
.di-menu__list { margin: 0; padding: var(--s-2) 0 0; list-style: none; }
.di-menu__list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-left: var(--s-3);
  border-bottom: var(--line-hair) solid var(--rule);
  border-left: var(--line-heavy) solid transparent;
  color: var(--text-1);
  font: var(--fw-bold) var(--fs-h3) / 1.3 var(--font-sans);
  text-decoration: none;
}
.di-menu__list a:hover { color: var(--link); }
.di-menu__list a[aria-current] { border-left-color: var(--structure); }
.di-menu__actions { display: grid; gap: var(--s-3); padding-block: var(--s-5) var(--s-6); }

/* Footer: lockup, one line of description, three link columns, a base line. No waterline. */
.di-footer {
  container: di-footer / inline-size;
  background: var(--surface);
  border-top: var(--line-hair) solid var(--rule);
  color: var(--text-3);
}
.di-footer__in { padding-block: var(--s-8) var(--s-6); }
.di-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--s-6) var(--col-gap); }
.di-footer__brand img { width: var(--lockup-w-1); height: auto; }
.di-footer__desc { margin-top: var(--s-4); max-width: 26rem; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-3); }
.di-footer__head { margin: 0 0 var(--s-2); font: var(--fw-bold) var(--fs-label) / var(--lh-label) var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); }
.di-footer__list { margin: 0; padding: 0; list-style: none; }
.di-footer__list a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-2); font-size: var(--fs-small); text-decoration: none; }
.di-footer__list a:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 0.2em; }
.di-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: var(--line-hair) solid var(--rule);
  font-size: var(--fs-small);
}
@container di-footer (max-width: 899px) {
  .di-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .di-footer__brand { grid-column: 1 / -1; }
}
@container di-footer (max-width: 479px) {
  .di-footer__brand img { width: var(--lockup-w-3); }
}

/* Newsletter band: one per page, above the footer. Flat ground and a hairline on top: never a
   gradient wash, a haze or a glow. One email field with its error state. Subscribe is a Secondary
   action; the page's orange mark stays with the page. */
.di-newsletter { container: di-newsletter / inline-size; border-top: var(--line-hair) solid var(--rule); background: var(--surface); }
.di-newsletter__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) var(--col-gap); align-items: end; padding-block: var(--space-section); }
.di-newsletter__head { display: grid; gap: var(--s-3); justify-items: start; }
.di-newsletter__title { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--text-1); text-wrap: balance; }
.di-newsletter__promise { margin: 0; max-width: 34em; color: var(--text-2); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.di-newsletter__form { min-width: 0; }
.di-newsletter__row { display: flex; gap: var(--s-2); }
.di-newsletter__row > .di-input { flex: 1; min-width: 0; }
/* The status line stays in the accessibility tree while empty, so its first message is announced. */
.di-newsletter__status:empty { display: block; height: 0; margin-top: calc(-1 * var(--s-2)); }
@container di-newsletter (max-width: 759px) {
  .di-newsletter__in { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@container di-newsletter (max-width: 419px) {
  .di-newsletter__row { flex-direction: column; }
}

/* ==========================================================================
   5. Page head: the cover frame on every page head, then the waterline
   ========================================================================== */

.di-pagehead { background: var(--surface); padding-block: var(--space-head-top) var(--space-head-bottom); }
.di-pagehead__crumbs { margin-bottom: var(--s-6); }
.di-pagehead__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5) var(--s-7); align-items: end; }
.di-pagehead__title { margin-top: var(--s-4); max-width: 19em; }
.di-pagehead__subtitle { margin-top: var(--s-4); }
.di-pagehead__meta { margin-top: var(--s-5); }
.di-pagehead__aside { max-width: 22rem; }
.di-pagehead--compact { padding-block: var(--s-7) var(--s-6); }
.di-pagehead--compact .di-pagehead__title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
@media (max-width: 767px) {
  .di-pagehead__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Page head with art (the essay head): the art straddles the waterline from the ink head onto the
   reading paper, --straddle-above of it above the line. The plate is the art zone of the master
   (8:3), its height capped by --headart-h. Below the line, __landing keeps the room for the lower
   part of the plate and sets the byline beside it. Percentages in margins, paddings and grid
   tracks all resolve against the same wrap width, so the plate and its landing always agree. */
.di-pagehead--art { padding-bottom: 0; }
.di-pagehead__art {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--headart-h) / var(--headart-hw)));
  margin-top: var(--s-6);
  margin-bottom: calc(-1 * min(var(--headart-h), 100% * var(--headart-hw)) * (1 - var(--straddle-above)));
}
.di-pagehead__art > .di-plate { --ratio: 1 / var(--headart-hw); }
.di-pagehead__below { container: di-headbelow / inline-size; }
.di-pagehead__landing {
  display: grid;
  grid-template-columns: minmax(0, min(100%, calc(var(--headart-h) / var(--headart-hw)))) minmax(0, 1fr);
  column-gap: var(--s-6);
  align-items: start;
}
/* The room under the waterline: the plate's lower part, as a share of the plate's own width. */
.di-pagehead__landing::before { content: ""; grid-column: 1; grid-row: 1; padding-top: calc(100% * var(--headart-hw) * (1 - var(--straddle-above))); }
.di-pagehead__landing > .di-byline { grid-column: 2; grid-row: 1; }
@container di-headbelow (max-width: 959px) {
  .di-pagehead__landing { grid-template-columns: minmax(0, min(100%, calc(var(--headart-h) / var(--headart-hw)))); }
  .di-pagehead__landing > .di-byline { grid-column: 1; grid-row: 2; }
}

/* Byline strip under the waterline: who, role and the facts of the piece. */
.di-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); }
.di-byline__who { display: flex; align-items: center; gap: var(--s-3); }
.di-byline__who img { width: 40px; height: 40px; border-radius: var(--r-round); object-fit: cover; }
.di-byline__name { display: block; color: var(--text-1); font-weight: var(--fw-bold); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-byline__role { display: block; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }

/* The lead with the straddle: the plate crosses the waterline with a third above it, for any
   image. --lead-plate-h is the plate's height over its width (0.75 for 4:3). */
.di-lead { container: di-lead / inline-size; background: var(--surface); padding-top: var(--space-head-top); --lead-plate-h: 0.75; }
.di-lead__above,
.di-lead__below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); }
.di-lead__above { align-items: end; }
.di-lead__text { padding-bottom: var(--s-6); }
.di-lead__who { margin: 0 0 var(--s-6); max-width: 30em; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--text-2); }
.di-lead__who strong { color: var(--text-1); }
.di-lead__title { margin-top: var(--s-3); }
.di-lead__art { position: relative; z-index: 1; margin-bottom: calc(-100% * var(--lead-plate-h) * (1 - var(--straddle-above))); }
.di-lead__art .di-plate { box-shadow: var(--sh-lead); }
.di-lead__below { align-items: start; padding-bottom: var(--space-section); }
.di-lead__body { display: grid; gap: var(--s-5); justify-items: start; padding-top: var(--s-5); }
.di-lead__dek { margin: 0; max-width: 34em; color: var(--text-2); font-size: var(--fs-dek); line-height: var(--lh-dek); }
.di-lead__spacer { padding-top: calc(100% * var(--lead-plate-h) * (1 - var(--straddle-above))); }
@container di-lead (max-width: 759px) {
  .di-lead__above, .di-lead__below { grid-template-columns: minmax(0, 1fr); }
  .di-lead__text { padding-bottom: var(--s-5); }
  .di-lead__spacer { order: -1; }
}

/* ==========================================================================
   6. Blueprint grammar: node, route, station, route summary
   ========================================================================== */

/* Node: a stop on a route. States come from the stop (.is-done, .is-here, .is-locked, .is-marked)
   or from the node itself. Every state also has a word: shape and colour are never the only cue. */
.di-node {
  --n: var(--node-size);
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--n);
  height: var(--n);
  border: var(--route-line) solid var(--node-ring);
  border-radius: var(--r-round);
  background: var(--node-fill);
  color: var(--text-1);
  font: var(--fw-bold) var(--fs-label) / 1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.di-node.is-done,
.is-done > .di-node { border-color: var(--node-done); background: var(--node-done); color: var(--node-done-fg); }
.di-node.is-done:empty::after,
.is-done > .di-node:empty::after {
  content: "";
  width: 72%;
  height: 72%;
  background-color: var(--node-done-fg);
  mask: var(--i-tick) center / contain no-repeat;
}
.di-node.is-here,
.is-here > .di-node { --n: var(--node-here-size); border-color: var(--node-here); }
.di-node.is-here:empty::after,
.is-here > .di-node:empty::after { content: ""; width: 40%; height: 40%; border-radius: var(--r-round); background: var(--node-here); }
.di-node.is-locked,
.is-locked > .di-node { border-style: dashed; }
.di-node.is-marked,
.is-marked > .di-node { border-color: var(--node-marked-edge); background: var(--node-marked); color: var(--node-marked-fg); }
.di-node--num { --n: var(--node-numbered); }
.di-node--num.is-here,
.is-here > .di-node--num { --n: var(--node-numbered); border-color: var(--node-here); color: var(--text-1); }

/* Route: stops on a line. Each stop draws the segment that leaves it, from its node's centre to
   the next node's centre; nodes are painted over the line. */
.di-route { container: di-route / inline-size; }
.di-route__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.di-route__stop {
  position: relative;
  min-width: 0;
  padding: calc(var(--node-here-size) + var(--s-3)) var(--s-4) 0 0;
}
.di-route__stop > .di-node { position: absolute; top: calc((var(--node-here-size) - var(--n)) / 2); left: calc((var(--node-here-size) - var(--n)) / 2); }
.di-route__stop::before {
  content: "";
  position: absolute;
  top: calc(var(--node-here-size) / 2 - var(--route-line) / 2);
  left: calc(var(--node-here-size) / 2);
  right: calc(-1 * var(--node-here-size) / 2);
  height: var(--route-line);
  background: var(--route-ahead);
}
.di-route__stop:last-child::before { display: none; }
.di-route__stop.is-done::before { background: var(--route-done); }
.di-route__stop.is-here::before { background: linear-gradient(90deg, var(--route-done) var(--p, 0%), var(--route-ahead) var(--p, 0%)); }

.di-route__no {
  display: block;
  font: var(--fw-bold) var(--fs-label) / var(--lh-label) var(--font-sans);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.di-route__label {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font: var(--fw-bold) var(--fs-small) / 1.35 var(--font-sans);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.di-route__label::after { content: ""; position: absolute; inset: 0; }
a.di-route__label:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
a.di-route__label:focus-visible { outline: none; }
.di-route__stop:has(> a.di-route__label:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
.di-route__meta { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-3); }
.is-here > .di-route__no,
.is-here > .di-route__label { color: var(--text-1); }
.is-ahead > .di-route__label,
.is-locked > .di-route__label { color: var(--text-3); }
.is-locked > .di-route__meta::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 0.35em;
  vertical-align: -1px;
  background-color: currentColor;
  mask: var(--i-lock) center / contain no-repeat;
}
.di-route__status { display: none; margin: var(--s-3) 0 0; color: var(--text-1); font: var(--fw-bold) var(--fs-small) / 1.4 var(--font-sans); }
.di-route__status span { color: var(--text-3); font-weight: var(--fw-regular); }

/* Lit: a route that is a fixed order rather than progress (the tools in working order). */
.di-route--lit { --node-ring: var(--structure); --route-ahead: var(--structure); }
/* Arrow: the line runs on past the last stop and ends in an arrowhead. */
.di-route--arrow .di-route__list { position: relative; }
.di-route--arrow .di-route__stop:last-child::before { display: block; right: 0; }
.di-route--arrow .di-route__list::after {
  content: "";
  position: absolute;
  top: calc(var(--node-here-size) / 2 - 7px);
  right: -4px;
  width: 14px;
  height: 14px;
  background-color: var(--route-ahead);
  mask: var(--i-arrow) center / contain no-repeat;
}

/* Numbered stations on one line when the route is narrow: the numbers stay, the labels are
   visually hidden (still read out), and the status line names where you are. */
@container di-route (max-width: 599px) {
  .di-route--compact .di-route__stop { padding-right: 0; }
  .di-route--compact .di-route__label > span,
  .di-route--compact .di-route__meta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .di-route--compact .di-route__label { margin: 0; }
  .di-route--compact .di-route__status { display: block; }
}

/* Numbers: numbered stations on one line at any width (the closed contents strip, progress). */
.di-route--numbers .di-route__stop { padding-right: 0; }
.di-route--numbers .di-route__label > span,
.di-route--numbers .di-route__meta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.di-route--numbers .di-route__label { margin: 0; }

/* Vertical route: the same stops, top to bottom. */
.di-route--v .di-route__list { display: block; }
.di-route--v .di-route__stop { padding: 0 0 var(--s-4) calc(var(--node-here-size) + var(--s-3)); }
.di-route--v .di-route__stop:last-child { padding-bottom: 0; }
.di-route--v .di-route__stop > .di-node { top: calc(var(--node-y) + (var(--node-here-size) - var(--n)) / 2); }
.di-route--v .di-route__stop::before {
  top: calc(var(--node-y) + var(--node-here-size) / 2);
  bottom: calc(-1 * (var(--node-y) + var(--node-here-size) / 2));
  left: calc(var(--node-here-size) / 2 - var(--route-line) / 2);
  right: auto;
  width: var(--route-line);
  height: auto;
}
.di-route--v .di-route__stop.is-here::before { background: linear-gradient(180deg, var(--route-done) var(--p, 0%), var(--route-ahead) var(--p, 0%)); }
.di-route--v .di-route__label { margin-top: 0; }
.di-route--v .di-route__no { display: inline; margin-right: var(--s-2); }

/* Stack: a horizontal route that turns vertical when its container is narrow. */
@container di-route (max-width: 759px) {
  .di-route--stack .di-route__list { display: block; }
  .di-route--stack .di-route__stop { padding: 0 0 var(--s-5) calc(var(--node-here-size) + var(--s-3)); }
  .di-route--stack .di-route__stop:last-child { padding-bottom: 0; }
  .di-route--stack .di-route__stop > .di-node { top: calc(var(--node-y) + (var(--node-here-size) - var(--n)) / 2); }
  .di-route--stack .di-route__stop::before {
    top: calc(var(--node-y) + var(--node-here-size) / 2);
    bottom: calc(-1 * (var(--node-y) + var(--node-here-size) / 2));
    left: calc(var(--node-here-size) / 2 - var(--route-line) / 2);
    right: auto;
    width: var(--route-line);
    height: auto;
  }
  .di-route--stack.di-route--arrow .di-route__stop:last-child::before { display: none; }
  .di-route--stack.di-route--arrow .di-route__list::after { display: none; }
}

/* Station: the rounded capsule from the covers, for a stop on a route only. Ordinary cards and
   panels use .di-panel (4px). */
.di-station {
  position: relative;
  --node-fill: var(--station-bg);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border: var(--line-hair) solid var(--station-line);
  border-radius: var(--r-station);
  background: var(--station-bg);
}
.di-station__title { margin: var(--s-2) 0 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-1); }
.di-station__text { margin: var(--s-2) 0 var(--s-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.di-station .di-arrowlink::before { content: ""; position: absolute; inset: 0; }
.di-station:has(.di-arrowlink:hover) { border-color: var(--structure); }
.di-station .di-arrowlink:focus-visible { outline: none; }
.di-station:has(.di-arrowlink:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
.is-here > .di-station { border-color: var(--structure); }
/* Tools route: numbered stations on a lit line, equal heights, the link at the foot. */
.di-toolsroute { --node-here-size: var(--node-numbered); }
.di-toolsroute .di-route__stop { display: flex; flex-direction: column; }
.di-toolsroute .di-station { display: flex; flex: 1; flex-direction: column; }
.di-toolsroute .di-station .di-arrowlink { margin-top: auto; }

/* Panel: an ordinary raised box with a hairline and a 4px radius. */
.di-panel {
  --node-fill: var(--panel-bg);
  padding: var(--s-5);
  border: var(--line-hair) solid var(--panel-line);
  border-radius: var(--r-panel);
  background: var(--panel-bg);
}
.di-panel__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-1); }
.di-panel__lede { margin: var(--s-1) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-3); }

/* Ruled list: unordered things in hairline rows with a right-aligned count. Not a route. */
.di-ruled { margin: 0; padding: 0; list-style: none; border-top: var(--line-hair) solid var(--rule); }
.di-ruled > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); padding-block: var(--s-3); border-bottom: var(--line-hair) solid var(--rule); }
.di-ruled a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.35 var(--font-sans); text-decoration: none; }
.di-ruled a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
.di-ruled__name { color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.35 var(--font-sans); }
.di-ruled__count { color: var(--text-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* "Your route so far": the answers given so far, drawn as the route they make. */
.di-routesum__route { margin-top: var(--s-5); }
.di-routesum .di-route__stop { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); }
.di-routesum .di-route__stop > :not(.di-node) { grid-column: 1; }
.di-routesum__answer { display: block; margin-top: 2px; color: var(--text-1); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-routesum .di-route__stop > .di-routesum__change { grid-column: 2; grid-row: 1 / span 3; align-self: start; display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--fs-small); }
.di-routesum__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--line-hair) solid var(--rule-strong); }

/* ==========================================================================
   7. Forms
   ========================================================================== */

.di-form { display: grid; gap: var(--s-5); }
.di-field { display: grid; gap: var(--s-2); min-width: 0; }
.di-field__label { color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.35 var(--font-sans); }
.di-field__optional { color: var(--text-3); font-weight: var(--fw-regular); }
.di-field__help { margin: 0; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-field__msg {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin: 0;
  font: var(--fw-bold) var(--fs-small) / var(--lh-small) var(--font-sans);
}
.di-field__msg > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.di-field__msg--error { color: var(--warning); }
.di-field__msg--success { color: var(--status-success); }

.di-input,
.di-textarea,
.di-select {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  border: var(--line-hair) solid var(--control-line);
  border-radius: var(--r-control);
  background: var(--field-bg);
  color: var(--text-1);
  font: var(--fw-regular) var(--fs-ui) / 1.4 var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease);
}
.di-textarea { min-height: 120px; resize: vertical; }
.di-input::placeholder,
.di-textarea::placeholder { color: var(--text-3); opacity: 1; }
.di-input:hover,
.di-textarea:hover,
.di-select:hover { border-color: var(--text-3); }
.di-input:focus-visible,
.di-textarea:focus-visible,
.di-select:focus-visible { border-color: var(--focus); }
.di-input[aria-invalid="true"],
.di-textarea[aria-invalid="true"],
.di-select[aria-invalid="true"] { padding: 10px 13px; border-width: var(--line-path); border-color: var(--warning); }
.di-input.is-valid,
.di-textarea.is-valid,
.di-select.is-valid { border-color: var(--structure); }
.di-input:disabled,
.di-textarea:disabled,
.di-select:disabled { border-style: dashed; background: var(--action-disabled-bg); color: var(--action-disabled-fg); cursor: not-allowed; }
.di-input[readonly],
.di-textarea[readonly] { border-style: dashed; background: transparent; }

.di-selectwrap { position: relative; }
.di-selectwrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  pointer-events: none;
  background-color: var(--text-2);
  mask: var(--i-chevron) center / contain no-repeat;
}
.di-select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.di-select[aria-invalid="true"] { padding-right: 43px; }

/* Search: a field and its button in one row. */
.di-search { display: flex; gap: var(--s-2); }
.di-search .di-input { flex: 1; min-width: 0; }

/* Checkbox and radio: drawn boxes, 44px rows. */
.di-check {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  min-height: var(--tap);
  padding-block: 11px;
  color: var(--text-2);
  font-size: var(--fs-ui);
  line-height: 1.4;
  cursor: pointer;
}
.di-check > input,
.di-choice > input,
.di-quiz input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: var(--line-path) solid var(--control-line);
  border-radius: var(--r-1);
  background: var(--field-bg);
  cursor: pointer;
}
.di-check > input[type="radio"],
.di-choice > input[type="radio"],
.di-quiz input[type="radio"] { border-radius: var(--r-round); }
.di-check > input:checked,
.di-choice > input:checked,
.di-quiz input:checked { border-color: var(--structure); background: var(--structure); }
.di-check > input[type="checkbox"]:checked::before,
.di-choice > input[type="checkbox"]:checked::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--node-done-fg);
  mask: var(--i-tick) center / contain no-repeat;
}
.di-check > input[type="radio"]:checked,
.di-choice > input[type="radio"]:checked,
.di-quiz input[type="radio"]:checked { background: var(--field-bg); }
.di-check > input[type="radio"]:checked::before,
.di-choice > input[type="radio"]:checked::before,
.di-quiz input[type="radio"]:checked::before { content: ""; width: 10px; height: 10px; border-radius: var(--r-round); background: var(--structure); }
.di-check > input[aria-invalid="true"],
.di-choice > input[aria-invalid="true"] { border-color: var(--warning); }
.di-check > input:disabled { border-style: dashed; background: var(--action-disabled-bg); cursor: not-allowed; }
.di-check:has(> input:disabled) { color: var(--action-disabled-fg); cursor: not-allowed; }
.di-check__hint { display: block; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }

/* Choice: an answer as a selectable row (the radio-card pattern). */
.di-choice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-1) var(--s-3);
  align-items: start;
  padding: 13px var(--s-4);
  border: var(--line-hair) solid var(--control-line);
  border-radius: var(--r-control);
  background: var(--field-bg);
  color: var(--text-2);
  font-size: var(--fs-ui);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.di-choice:hover { border-color: var(--text-3); }
.di-choice:has(> input:checked) { border-color: var(--selected-line); background: var(--selected-bg); color: var(--selected-fg); }
.di-choice:has(> input:checked) > input[type="radio"] { border-color: var(--selected-line); background: var(--selected-bg); }
.di-choice:has(> input:checked) > input[type="radio"]::before { background: var(--selected-line); }
.di-choice:has(> input[aria-invalid="true"]) { border-color: var(--warning); }
.di-choice__hint { grid-column: 2; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-choices { display: grid; gap: var(--s-2); }

.di-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.di-legend { padding: 0; margin-bottom: var(--s-2); color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.35 var(--font-sans); }
.di-fieldset > .di-field__help { margin-bottom: var(--s-3); }
.di-fieldset > .di-field__msg { margin-top: var(--s-2); }

/* Segmented control: one choice from a short set, joined. Not clipped (a clip would cut the focus
   ring), so the end segments carry the corners themselves. */
.di-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: var(--line-hair) solid var(--control-line); border-radius: var(--r-control); }
.di-segmented label { position: relative; display: grid; }
.di-segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.di-segmented span {
  display: grid;
  place-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-2);
  border-left: var(--line-hair) solid var(--control-line);
  background: var(--field-bg);
  color: var(--text-2);
  font: var(--fw-bold) var(--fs-ui) / 1.2 var(--font-sans);
  text-align: center;
}
.di-segmented label:first-child span { border-left: 0; border-radius: calc(var(--r-control) - var(--line-hair)) 0 0 calc(var(--r-control) - var(--line-hair)); }
.di-segmented label:last-child span { border-radius: 0 calc(var(--r-control) - var(--line-hair)) calc(var(--r-control) - var(--line-hair)) 0; }
.di-segmented label:only-child span { border-radius: calc(var(--r-control) - var(--line-hair)); }
.di-segmented input:hover + span { color: var(--text-1); }
.di-segmented input:checked + span { background: var(--selected-bg); color: var(--selected-fg); box-shadow: inset 0 calc(-1 * var(--line-heavy)) 0 var(--selected-line); }
.di-segmented input:focus-visible + span { outline: var(--focus-w) solid var(--focus); outline-offset: -5px; }
.di-segmented[aria-invalid="true"],
.di-fieldset:has(> [aria-invalid="true"]) .di-segmented { border-color: var(--warning); }

/* Scale 0 to 5: rings on a line, because the values are an order. The line fills to the answer. */
.di-scale__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; }
.di-scale__opt { position: relative; display: grid; justify-items: center; gap: var(--s-1); min-height: var(--tap); padding-top: 2px; cursor: pointer; }
.di-scale__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.di-scale__ring {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: var(--line-path) solid var(--control-line);
  border-radius: var(--r-round);
  background: var(--node-fill);
}
.di-scale__num { color: var(--text-3); font: var(--fw-bold) var(--fs-label) / 1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.di-scale__opt::before {
  content: "";
  position: absolute;
  top: calc(2px + 12px - var(--route-line) / 2);
  left: 50%;
  right: -50%;
  height: var(--route-line);
  background: var(--route-ahead);
}
.di-scale__opt:last-child::before { display: none; }
.di-scale__opt:has(~ .di-scale__opt input:checked)::before { background: var(--route-done); }
.di-scale__opt:has(~ .di-scale__opt input:checked) .di-scale__ring { border-color: var(--route-done); }
.di-scale__opt:has(input:checked) .di-scale__ring { border-color: var(--structure); background: var(--node-fill); box-shadow: inset 0 0 0 4px var(--node-fill), inset 0 0 0 12px var(--structure); }
.di-scale__opt:has(input:checked) .di-scale__num { color: var(--text-1); }
.di-scale__opt:has(input:focus-visible) .di-scale__ring { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
.di-scale__ends { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-1); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-scale__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.di-scale__value { color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.3 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.di-fieldset:has([aria-invalid="true"]) .di-scale__ring { border-color: var(--warning); }

/* Range: a slider when the scale is continuous. Set --fill to the value as a percentage. */
.di-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--tap);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.di-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--structure) var(--fill, 50%), var(--control-line) var(--fill, 50%)); }
.di-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--control-line); }
.di-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--structure); }
.di-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border: var(--line-path) solid var(--structure); border-radius: var(--r-round); background: var(--text-1); }
.di-range::-moz-range-thumb { width: 18px; height: 18px; border: var(--line-path) solid var(--structure); border-radius: var(--r-round); background: var(--text-1); }
.di-range:focus-visible { outline-offset: 0; }
.di-rangerow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); }
.di-rangerow output { min-width: 3ch; color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1 var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; }

/* Switch: an on or off setting that applies at once. Square, like every other control. */
.di-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: var(--fw-regular) var(--fs-ui) / 1.3 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.di-switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border: var(--line-path) solid var(--control-line);
  border-radius: var(--r-control);
  background: var(--field-bg);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.di-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-1);
  background: var(--control-line);
  transition: transform var(--dur-fast) var(--ease);
}
.di-switch[aria-checked="true"] .di-switch__track { border-color: var(--structure); background: var(--structure); }
.di-switch[aria-checked="true"] .di-switch__track::after { transform: translateX(18px); background: var(--node-done-fg); }
.di-switch__state { color: var(--text-3); font-size: var(--fs-small); }

/* Error summary: the first thing in a form that failed, with a link to each field. */
.di-errorsummary {
  padding: var(--s-4) var(--s-5);
  border: var(--line-path) solid var(--warning);
  border-radius: var(--r-panel);
  background: var(--warning-bg);
  color: var(--text-1);
}
.di-errorsummary:focus-visible { outline-offset: var(--focus-offset); }
.di-errorsummary__title { display: flex; gap: var(--s-2); align-items: center; margin: 0; color: var(--warning); font: var(--fw-bold) var(--fs-ui) / 1.35 var(--font-sans); }
.di-errorsummary__title > svg { width: 20px; height: 20px; flex: none; }
.di-errorsummary ul { margin: var(--s-3) 0 0; padding-left: var(--s-5); }
.di-errorsummary li { margin-top: var(--s-1); }
.di-errorsummary a { color: var(--text-1); font-weight: var(--fw-bold); text-decoration-color: currentColor; }
.di-errorsummary a:hover { color: var(--text-1); text-decoration-thickness: var(--line-path); }

/* ==========================================================================
   8. Plates and cards
   ========================================================================== */

/* Plate: art at a fixed ratio, contained on a matte with an edge line. Never cropped, never
   overlaid with text. Set --ratio (3 / 2 cards, 4 / 3 lead, 16 / 9 lessons, 1 / 1 rows). */
.di-plate {
  position: relative;
  margin: 0;
  aspect-ratio: var(--ratio, 3 / 2);
  overflow: hidden;
  background: var(--plate-matte);
}
.di-plate > img { width: 100%; height: 100%; object-fit: contain; }
.di-plate::after { content: ""; position: absolute; inset: 0; border: var(--line-hair) solid var(--plate-edge); pointer-events: none; }
/* Art-zone crop: shows the art zone, the part of the art under the frame zone. For a text-free
   master (its top third is the empty frame zone) and, until text-free art exists, for a recent dark
   cover whose baked title sits in the top band, so the title never repeats the HTML title. Never
   for the back catalogue. --art-y moves the crop up for art not composed to the template. */
.di-plate--artzone > img { object-fit: cover; object-position: 50% var(--art-y, 100%); }
.di-plate--empty { display: grid; place-items: center; padding: var(--s-4); }
.di-plate__ph { max-width: 22em; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); text-align: center; }

/* Pins and key: code-set labels for text-free art on the site. Numbered pins on the art, the
   words in a key below it. Pins sit on dark art, so the pin layer is always ink. */
.di-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border: var(--line-path) solid var(--text-1);
  border-radius: var(--r-round);
  background: var(--surface);
  color: var(--text-1);
  font: var(--fw-bold) var(--fs-label) / 1 var(--font-sans);
}
.di-pin.is-marked { border-color: var(--marker-edge); }
.di-artkey { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.di-artkey li { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); font: var(--fw-bold) var(--fs-label) / 1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }
.di-artkey .di-pin { position: static; transform: none; flex: none; }
[data-surface="paper"] .di-artkey .di-pin { border-color: var(--text-1); background: var(--surface); color: var(--text-1); }
[data-surface="paper"] .di-artkey .di-pin.is-marked { border-color: var(--marker-edge); background: var(--marker); color: var(--marker-fg); }

/* Card: plate, kicker, title, excerpt, meta. One link per card (the title), stretched over it.
   Text never sits on the art. */
.di-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.di-card > .di-plate { margin-bottom: var(--s-1); }
.di-card__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-1); }
.di-card__link { color: inherit; text-decoration: none; }
.di-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.di-card__link:hover { color: inherit; }
.di-card:hover .di-card__link { text-decoration: underline; text-decoration-color: var(--structure); text-decoration-thickness: var(--line-path); text-underline-offset: 0.18em; }
.di-card__link:focus-visible { outline: none; }
.di-card:has(.di-card__link:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--s-2); }
.di-card__excerpt {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.di-card__meta { margin-top: auto; }
/* Row: the compact card for phones and side lists (1:1 thumb). */
.di-card--row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-1) var(--s-4); align-items: start; }
.di-card--row > .di-plate { --ratio: 1 / 1; grid-row: 1 / span 3; margin: 0; }
.di-card--row .di-card__title { font-size: var(--fs-ui); line-height: 1.35; letter-spacing: 0; }
/* Line: the cover line, text only, on a rule. */
.di-card--line { padding-top: var(--s-4); border-top: var(--line-hair) solid var(--rule-strong); gap: var(--s-2); }
.di-card--line .di-card__title { font-size: var(--fs-ui); line-height: 1.4; letter-spacing: 0; }

.di-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-7) var(--col-gap); }

/* Tool card: a hairline panel. Verb kicker, name, one sentence, one link. */
.di-toolcard { position: relative; display: flex; flex-direction: column; gap: var(--s-2); }
.di-toolcard .di-arrowlink { margin-top: auto; padding-top: var(--s-3); }
.di-toolcard .di-arrowlink::before { content: ""; position: absolute; inset: 0; }
.di-toolcard .di-arrowlink:focus-visible { outline: none; }
.di-toolcard:has(.di-arrowlink:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
.di-toolcard:has(.di-arrowlink:hover) { border-color: var(--structure); }
.di-toolcard__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-1); }
.di-toolcard__text { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-toolcard__foot { display: flex; align-items: center; gap: var(--s-2); color: var(--text-3); font-size: var(--fs-small); }
.di-toolcard__foot > svg { width: 16px; height: 16px; flex: none; }

/* Course card: cover art (text-free) on a 16:9 plate, the title in HTML below, progress as words
   and a short route. */
.di-coursecard .di-plate { --ratio: 16 / 9; }
.di-coursecard__progress { display: grid; gap: var(--s-2); }
.di-coursecard__state { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); font: var(--fw-bold) var(--fs-small) / 1.3 var(--font-sans); }

/* Progress bar: a determinate line. Set --p (0% to 100%). Always with the number in words. */
.di-bar { position: relative; height: 4px; border-radius: 2px; background: var(--structure-quiet); overflow: hidden; }
.di-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--structure); }
.di-bar--thin { height: var(--line-path); }

/* Lesson row: a lesson on the course route. */
.di-lessons .di-route__stop { padding-bottom: 0; }
.di-lessonrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-4);
  min-height: var(--tap);
}
.di-lessonrow__title { display: inline-block; padding-block: 3px; color: var(--text-2); font: var(--fw-bold) var(--fs-small) / 1.4 var(--font-sans); text-decoration: none; }
a.di-lessonrow__title:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
.is-here .di-lessonrow__title { color: var(--text-1); }
.is-locked .di-lessonrow__title,
.is-ahead .di-lessonrow__title { color: var(--text-3); }
.di-lessonrow__no { color: var(--text-3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; margin-right: var(--s-2); }
.di-lessonrow__time { color: var(--text-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.di-lessonrow__state { grid-column: 1 / -1; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.is-here .di-lessonrow__state { color: var(--text-1); font-weight: var(--fw-bold); }

/* E-book card: the book at its true ratio with the book shadow. A book is an object, so it is
   the one card image that is not on a plate. */
.di-bookcard { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: start; }
.di-bookcard__cover { grid-row: 1 / span 5; width: 100%; height: auto; box-shadow: var(--sh-book); }
.di-bookcard__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-1); }
.di-bookcard__text { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-bookcard--stack { grid-template-columns: minmax(0, 1fr); }
.di-bookcard--stack .di-bookcard__cover { grid-row: auto; width: min(100%, 220px); margin-bottom: var(--s-3); }

/* ==========================================================================
   9. Essay parts
   ========================================================================== */

/* Reading progress: a 2px line at the top edge. No orange, no node. */
.di-readprogress { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); height: var(--line-path); background: var(--structure-quiet); }
.di-readprogress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--structure); }
.di-readprogress--static { position: relative; z-index: auto; }

/* Contents as a route: sections read, the section you are in, sections ahead. */
.di-toc { font-size: var(--fs-small); }
.di-toc__head { margin: 0 0 var(--s-1); }
.di-toc__sum { margin: 0 0 var(--s-5); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-toc .di-route__stop { padding-bottom: var(--s-3); }
.di-toc .di-route__label { font-weight: var(--fw-regular); line-height: 1.4; }
.di-toc .is-here > .di-route__label { font-weight: var(--fw-bold); }
.di-toc .di-route__label { display: block; padding-block: 2px; }

/* Contents inline: under 1100px the rail folds into a disclosure; closed, it still shows the
   numbered stations on one line. */
.di-tocinline { border: var(--line-hair) solid var(--panel-line); border-radius: var(--r-panel); background: var(--panel-bg); --node-fill: var(--panel-bg); }
.di-tocinline > summary { display: grid; gap: var(--s-3); padding: var(--s-4); list-style: none; cursor: pointer; }
.di-tocinline > summary::-webkit-details-marker { display: none; }
.di-tocinline__top { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--text-1); font: var(--fw-bold) var(--fs-small) / 1.3 var(--font-sans); }
.di-tocinline__top span:last-child { color: var(--text-3); font-weight: var(--fw-regular); display: inline-flex; align-items: center; gap: var(--s-1); }
.di-tocinline__top span:last-child::after { content: ""; width: 14px; height: 14px; background-color: currentColor; mask: var(--i-chevron) center / contain no-repeat; transition: transform var(--dur-fast) var(--ease); }
.di-tocinline[open] .di-tocinline__top span:last-child::after { transform: rotate(180deg); }
.di-tocinline__body { padding: 0 var(--s-4) var(--s-4); }
.di-tocinline .di-route__stop { padding-right: 0; }
.di-tocinline .di-route--v .di-route__label { font-weight: var(--fw-regular); }
.di-tocinline .di-route--v .is-here > .di-route__label { font-weight: var(--fw-bold); }

/* Prose: the reading baseline. Newsreader 18 to 21px on 1.68, 40rem measure, on paper. */
.di-prose {
  max-width: var(--measure);
  counter-reset: di-section;
  color: var(--text-2);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: var(--fw-read);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  hanging-punctuation: first;
}
.di-prose > * { margin: 0 0 1.05em; }
.di-prose > .di-lede,
.di-lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--text-emphasis); }
.di-prose strong, .di-prose b { font-weight: var(--fw-read-strong); color: var(--text-emphasis); }
.di-prose em { font-style: italic; }
.di-prose a { color: var(--link); text-decoration-color: var(--link-underline); }
.di-prose a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
/* Section headings are stations: a numbered ring hung on a hairline. Counted in CSS, so plain
   Markdown headings number themselves and match the contents route. */
.di-prose > h2 {
  position: relative;
  counter-increment: di-section;
  margin: 2.2em 0 0.7em;
  padding-top: calc(var(--node-numbered) + var(--s-4));
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  color: var(--text-1);
  scroll-margin-top: var(--s-6);
}
.di-prose > h2::before {
  content: counter(di-section, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--node-numbered);
  height: var(--node-numbered);
  box-sizing: border-box;
  border: var(--route-line) solid var(--structure);
  border-radius: var(--r-round);
  background: var(--surface);
  color: var(--text-1);
  font: var(--fw-bold) var(--fs-label) / 1 var(--font-sans);
  letter-spacing: 0.02em;
}
.di-prose > h2::after { content: ""; position: absolute; top: calc(var(--node-numbered) / 2); left: var(--node-numbered); right: 0; height: var(--line-hair); background: var(--rule); }
.di-prose > h3 { margin: 1.8em 0 0.5em; font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-1); }
.di-prose ul, .di-prose ol { padding-left: 1.3em; }
.di-prose li { margin-bottom: 0.4em; }
.di-prose li::marker { color: var(--text-3); }
.di-prose blockquote { margin-inline: 0; padding-left: 1.1em; border-left: var(--line-path) solid var(--rule-strong); font-style: italic; }
.di-prose hr { margin-block: 2em; }
.di-prose code { padding: 0.05em 0.3em; border-radius: var(--r-1); background: var(--surface-sunken); color: var(--text-emphasis); }
.di-prose pre { padding: var(--s-4); border: var(--line-hair) solid var(--rule); border-radius: var(--r-panel); background: var(--surface-sunken); color: var(--text-2); }
.di-prose pre code { padding: 0; background: none; }
.di-endmark { display: inline-block; width: 9px; height: 9px; margin-left: 0.4em; border-radius: var(--r-round); background: var(--structure); vertical-align: 0.05em; }

/* The point: the one takeaway at the top of an essay. An orange marker, an ink takeaway: the
   cover's one orange idea, carried into the reading page. Counts as the screen's orange mark. */
.di-point {
  margin: 0 0 var(--s-6);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: var(--line-heavy) solid var(--marker-edge);
}
.di-point__label { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); color: var(--text-1); font: var(--fw-bold) var(--fs-label) / var(--lh-label) var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }
.di-point__label::before { content: ""; width: 10px; height: 10px; flex: none; box-sizing: border-box; border: var(--line-hair) solid var(--marker-edge); background: var(--marker); }
.di-point__text { margin: 0; color: var(--text-1); font-family: var(--font-serif); font-size: calc(var(--fs-body) * 1.08); font-style: italic; font-weight: var(--fw-read); line-height: 1.5; }

/* Figure: natural ratio, an edge line, "Figure n", a source, and Full size. */
.di-figure { margin: 2.2em 0 2.4em; }
.di-figure__media { position: relative; display: block; background: var(--plate-matte); }
.di-figure__media img { width: 100%; height: auto; }
.di-figure__media::after { content: ""; position: absolute; inset: 0; border: var(--line-hair) solid var(--plate-edge); pointer-events: none; }
.di-figure figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); max-width: var(--measure); color: var(--text-3); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-sans); }
.di-figure__label { color: var(--kicker); font-weight: var(--fw-bold); letter-spacing: var(--tr-label); text-transform: uppercase; }
.di-figure__caption { color: var(--text-2); }
.di-figure__full { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0; border: 0; background: none; color: var(--link); font: var(--fw-bold) var(--fs-small) / 1.3 var(--font-sans); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em; cursor: pointer; }
.di-figure__full:hover { color: var(--link-hover); }

/* Pull quote: a line from the essay itself, never invented, never the only place it appears. */
.di-pullquote { margin: 2em 0; padding-top: var(--s-4); border-top: var(--line-path) solid var(--structure); }
.di-pullquote blockquote { margin: 0; padding: 0; border: 0; font-style: normal; }
.di-pullquote p { margin: 0; color: var(--text-1); font-family: var(--font-serif); font-size: var(--fs-lede); font-style: italic; font-weight: var(--fw-read); line-height: 1.4; }
.di-pullquote figcaption { margin-top: var(--s-3); }

/* Callout: an aside set apart from the argument. Quiet panel, a structure rule, an icon and a
   title. Warnings use .di-alert instead. */
.di-callout {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-1) var(--s-3);
  margin: 2em 0;
  padding: var(--s-4) var(--s-5);
  border-left: var(--line-heavy) solid var(--structure);
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
  background: var(--panel-bg);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--text-2);
}
.di-callout > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--structure); }
.di-callout__title { margin: 0; color: var(--text-1); font-weight: var(--fw-bold); }
.di-callout__body { grid-column: 2; margin: 0; }

/* Cite this essay (UK Harvard), with a copy button and a status line. */
.di-cite { display: grid; gap: var(--s-3); }
.di-cite__text { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; overflow-wrap: anywhere; }
.di-cite__text cite { font-style: italic; }
.di-cite__status { color: var(--status-success); font: var(--fw-bold) var(--fs-small) / 1.3 var(--font-sans); }

/* Author box: pale panel, a heavy rule on top, a round portrait, a serif bio. */
.di-author {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  padding: var(--s-5);
  border-top: var(--line-heavy) solid var(--text-1);
  background: var(--panel-bg);
}
.di-author__img { width: 72px; height: 72px; border-radius: var(--r-round); object-fit: cover; }
.di-author__name { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-1); }
.di-author__role { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-small); }
.di-author__bio { margin: var(--s-3) 0 0; color: var(--text-2); font-family: var(--font-serif); font-size: calc(var(--fs-body) * 0.9); font-weight: var(--fw-read); line-height: 1.55; }
.di-author__links { margin-top: var(--s-3); }

/* Filed under, share and the other end-of-essay rows: a label column and its content. */
.di-endrow { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: baseline; padding-top: var(--s-4); border-top: var(--line-hair) solid var(--rule); }
@media (max-width: 599px) { .di-endrow { grid-template-columns: minmax(0, 1fr); } }

/* Essay grid: [contents rail] [text at the measure] [margin], from the Deep Water grammar. The
   rail folds into the inline contents under 960px of container; the margin column (pull quotes)
   appears from 1180px. The site keeps its own exact geometry; this is the same order and measure. */
.di-essaygrid { container: di-essay / inline-size; }
.di-essaygrid__in { display: grid; grid-template-columns: minmax(0, var(--measure)); justify-content: center; column-gap: var(--s-6); }
.di-essaygrid__rail { display: none; }
.di-essaygrid__inline { margin-bottom: var(--s-6); }
@container di-essay (min-width: 960px) {
  .di-essaygrid__in { grid-template-columns: var(--rail) minmax(0, var(--measure)); justify-content: start; }
  .di-essaygrid__rail { display: block; grid-column: 1; grid-row: 1 / span 20; }
  .di-essaygrid__rail > * { position: sticky; top: var(--s-5); }
  .di-essaygrid__inline { display: none; }
  .di-essaygrid__main { grid-column: 2; }
}
@container di-essay (min-width: 1180px) {
  .di-essaygrid__in { grid-template-columns: var(--rail) minmax(0, var(--measure)) var(--margin-col); }
  .di-pullquote--margin { float: right; clear: right; width: var(--margin-col); margin: 0.2em calc(-1 * (var(--margin-col) + var(--s-6))) 1em var(--s-5); }
}

/* Previous and next: three stops on a line, because essays are a sequence in time. */
.di-pagenav .di-route__label { font-size: var(--fs-small); max-width: 18em; }
.di-pagenav a.di-route__label { color: var(--link); }
.di-pagenav a.di-route__label:hover { color: var(--link-hover); }

@media (max-width: 599px) {
  .di-author { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   10. Tables
   ========================================================================== */

/* The wrapper scrolls sideways, which clips; --ring-room of padding (given back by the margin) keeps
   the focus ring of an edge control, such as a sort button in the last column, whole. */
.di-tablewrap { container: di-table / inline-size; position: relative; max-width: calc(100% + 2 * var(--ring-room)); margin-inline: calc(-1 * var(--ring-room)); padding-inline: var(--ring-room); overflow-x: auto; }
.di-tablewrap:focus-visible { outline-offset: var(--focus-offset); }
.di-table { width: 100%; border-collapse: collapse; color: var(--text-2); font-size: var(--fs-small); line-height: 1.45; font-variant-numeric: tabular-nums; }
.di-table caption { padding-bottom: var(--s-3); caption-side: top; color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.4 var(--font-sans); text-align: left; }
.di-table caption .di-label { display: block; margin-bottom: 2px; color: var(--kicker); }
.di-table th,
.di-table td { padding: 11px var(--s-3); border-bottom: var(--line-hair) solid var(--rule); text-align: left; vertical-align: top; }
.di-table th:first-child,
.di-table td:first-child { padding-left: 0; }
.di-table th:last-child,
.di-table td:last-child { padding-right: 0; }
.di-table thead th { padding-block: var(--s-2); border-bottom: var(--line-path) solid var(--rule-strong); color: var(--text-1); font-weight: var(--fw-bold); vertical-align: bottom; white-space: nowrap; }
.di-table tbody th { color: var(--text-1); font-weight: var(--fw-bold); }
.di-table .is-num { text-align: right; }
.di-table a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.di-table tfoot td, .di-table tfoot th { border-bottom: 0; border-top: var(--line-path) solid var(--rule-strong); color: var(--text-1); font-weight: var(--fw-bold); }
.di-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--target-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.di-table__sort::after { content: ""; width: 14px; height: 14px; background-color: var(--text-3); mask: var(--i-sort) center / contain no-repeat; }
[aria-sort="ascending"] .di-table__sort::after { background-color: var(--structure); mask-image: var(--i-sort-up); }
[aria-sort="descending"] .di-table__sort::after { background-color: var(--structure); mask-image: var(--i-sort-down); }
.di-table__sort:hover { color: var(--link); }
.di-table--interactive tbody tr:hover { background: var(--surface-raised); }
.di-table tbody tr[aria-selected="true"] { background: var(--selected-bg); }
.di-table tbody tr[aria-selected="true"] > :first-child { box-shadow: inset var(--line-heavy) 0 0 var(--selected-line); padding-left: var(--s-3); }
.di-table--dense th, .di-table--dense td { padding-block: 7px; }
.di-tablenote { margin: var(--s-3) 0 0; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-status { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-2); font-weight: var(--fw-bold); white-space: nowrap; }
.di-status > svg { width: 16px; height: 16px; flex: none; }
.di-status--success > svg, .di-status--info > svg { color: var(--status-success); }
.di-status--caution > svg { color: var(--status-caution); }
.di-status--warning { color: var(--status-warning); }

/* Stacked rows on a narrow container: each cell carries its column name. */
@container di-table (max-width: 599px) {
  /* Stacked, each cell carries its column name, so the head is hidden outright: a sort button left
     in a visually hidden head would take focus where nobody can see it. */
  .di-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; }
  .di-table--stack, .di-table--stack tbody, .di-table--stack tr, .di-table--stack th, .di-table--stack td { display: block; }
  .di-table--stack tr { padding-block: var(--s-3); border-bottom: var(--line-hair) solid var(--rule); }
  .di-table--stack tbody th, .di-table--stack td { padding: 2px 0; border: 0; }
  .di-table--stack td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-3); text-align: left; }
  .di-table--stack td::before { content: attr(data-label); color: var(--text-3); font-weight: var(--fw-regular); }
  .di-table--stack .is-num { text-align: left; }
  .di-table--stack caption { display: block; }
  .di-table--stack td > * { justify-self: start; }
  .di-table--stack tfoot { display: block; }
}

/* ==========================================================================
   11. Tabs
   ========================================================================== */

.di-tabs__list {
  display: flex;
  gap: var(--s-5);
  margin: 0;
  padding: 0 var(--s-1);
  border-bottom: var(--line-hair) solid var(--rule-strong);
  overflow-x: auto;
  /* A tab that takes focus scrolls fully into view with a little of its neighbour showing. */
  scroll-padding-inline: var(--s-5);
  scrollbar-width: thin;
}
.di-tabs__tab {
  position: relative;
  flex: none;
  min-height: var(--tap);
  padding: 0 var(--s-1);
  border: 0;
  background: none;
  color: var(--text-3);
  font: var(--fw-bold) var(--fs-ui) / 1.2 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.di-tabs__tab:hover { color: var(--text-1); }
.di-tabs__tab[aria-selected="true"],
.di-tabs__tab[aria-current="page"] { color: var(--text-1); }
.di-tabs__tab[aria-selected="true"]::after,
.di-tabs__tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--line-heavy); background: var(--structure); }
/* The ring sits inside the tab (the row clips), clear of the label. */
.di-tabs__tab:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }
.di-tabs__count { color: var(--text-3); font-weight: var(--fw-regular); }
.di-tabs__panel { padding-top: var(--s-5); }
.di-tabs__panel:focus-visible { outline-offset: var(--s-2); }
.di-tabs__panel[hidden] { display: none; }

/* ==========================================================================
   12. Tags, chips, badges, flags, placeholders. Square, never pills.
   ========================================================================== */

.di-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.di-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 32px;
  padding: 0 var(--s-3);
  border: var(--line-hair) solid var(--control-line);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--text-1);
  font: var(--fw-bold) var(--fs-small) / 1.2 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}
a.di-tag:hover { border-color: var(--structure); color: var(--link); }
.di-tag--static { min-height: var(--target-min); border-color: var(--rule-strong); color: var(--text-2); }

/* Filter chip: a toggle (aria-pressed). Pressed shows a tick as well as the selected ground. */
.di-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-3);
  border: var(--line-hair) solid var(--control-line);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--text-1);
  font: var(--fw-bold) var(--fs-small) / 1.2 var(--font-sans);
  cursor: pointer;
}
.di-chip:hover { border-color: var(--text-3); }
.di-chip[aria-pressed="true"] { border-color: var(--selected-line); background: var(--selected-bg); color: var(--selected-fg); }
.di-chip[aria-pressed="true"]::before { content: ""; width: 14px; height: 14px; background-color: var(--selected-line); mask: var(--i-tick) center / contain no-repeat; }
.di-chip__count { color: var(--text-3); font-weight: var(--fw-regular); }

/* Badge: a status word. The word carries the meaning; the icon and edge support it. */
.di-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 1px var(--s-2);
  border: var(--line-hair) solid var(--rule-strong);
  border-radius: var(--r-1);
  color: var(--text-2);
  font: var(--fw-bold) var(--fs-small) / 1.2 var(--font-sans);
  white-space: nowrap;
  vertical-align: middle;
}
.di-badge > svg { width: 14px; height: 14px; flex: none; }
.di-badge--info { border-color: var(--structure); color: var(--status-info); }
.di-badge--success { border-color: var(--structure); color: var(--status-success); }
.di-badge--caution { border-color: var(--status-caution); color: var(--status-caution); }
.di-badge--warning { border-color: var(--status-warning); color: var(--status-warning); }
.di-badge--strong { border-color: var(--selected-line); background: var(--selected-bg); color: var(--selected-fg); }

/* Count: a number in a square. */
.di-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-1); background: var(--surface-raised-3); color: var(--text-1); font: var(--fw-bold) var(--fs-small) / 1 var(--font-sans); font-variant-numeric: tabular-nums; }

/* Flag: the one word in front of a kicker ("Latest"). */
.di-flag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 6px; border-radius: var(--r-1); background: var(--selected-bg); color: var(--selected-fg); font: var(--fw-bold) var(--fs-label) / 1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }

/* Placeholder: marks copy that does not exist yet. Dashed, bracketed, never written to look real. */
.di-ph {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--s-2);
  border: var(--line-hair) dashed var(--text-3);
  border-radius: var(--r-1);
  color: var(--text-3);
  font: var(--fw-bold) var(--fs-label) / 1.2 var(--font-sans);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  vertical-align: middle;
}
.di-phtext { color: var(--text-3); font-style: italic; }

/* ==========================================================================
   13. Alerts, banners, toasts
   ========================================================================== */

.di-alert {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: var(--line-hair) solid var(--rule-strong);
  border-left-width: var(--line-heavy);
  border-radius: var(--r-panel);
  background: var(--surface-raised);
  color: var(--text-2);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}
.di-alert > svg { width: 20px; height: 20px; margin-top: 2px; }
.di-alert__body { grid-column: 2; min-width: 0; }
.di-alert__title { margin: 0; color: var(--text-1); font-weight: var(--fw-bold); }
.di-alert__text { margin: 2px 0 0; }
.di-alert__text:first-child { margin-top: 0; }
.di-alert__actions { margin-top: var(--s-3); }
.di-alert__close { grid-column: 3; grid-row: 1; margin: -10px -10px -10px 0; }
.di-alert ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.di-alert--info { border-left-color: var(--structure); }
.di-alert--info > svg { color: var(--status-info); }
.di-alert--success { border-left-color: var(--structure); }
.di-alert--success > svg { color: var(--status-success); }
.di-alert--caution { border-left-color: var(--status-caution); }
.di-alert--caution > svg { color: var(--status-caution); }
.di-alert--warning { border-color: var(--warning); background: var(--warning-bg); color: var(--text-1); }
.di-alert--warning > svg { color: var(--warning); }
.di-alert--warning .di-alert__title { color: var(--warning); }
.di-alert--compact { padding: var(--s-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-alert--compact > svg { width: 18px; height: 18px; margin-top: 0; }

/* Banner: one line across the page for a notice that applies to the whole page. */
.di-banner { border-bottom: var(--line-hair) solid var(--rule-strong); background: var(--surface-raised); color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-banner__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: var(--tap); padding-block: var(--s-2); }
.di-banner__in > svg { width: 18px; height: 18px; flex: none; color: var(--structure); }
.di-banner a { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* Toast: a short status that needs no action. Always ink, a hairline, no shadow. Polite live
   region; anything that needs a decision is a dialog, not a toast. */
.di-toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-toast); display: grid; gap: var(--s-2); width: min(420px, calc(100vw - 2 * var(--s-4))); }
.di-toast {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border: var(--line-hair) solid var(--rule-strong);
  border-radius: var(--r-panel);
  background: var(--surface-raised-2);
  color: var(--text-1);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  animation: di-rise var(--dur) var(--ease);
}
.di-toast > svg { width: 20px; height: 20px; color: var(--status-success); }
.di-toast__msg { margin: 0; padding-block: var(--s-2); }
.di-toast__actions { display: flex; align-items: center; gap: var(--s-1); }
@keyframes di-rise { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 599px) {
  .di-toasts { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); width: auto; }
}

/* ==========================================================================
   14. Dialog and lightbox (native <dialog>)
   ========================================================================== */

.di-dialog {
  width: min(560px, calc(100vw - 2 * var(--s-4)));
  max-width: none;
  max-height: min(90vh, 760px);
  margin: auto;
  padding: 0;
  border: var(--line-hair) solid var(--rule-strong);
  border-radius: var(--r-panel);
  background: var(--surface-raised);
  color: var(--text-2);
  overflow: auto;
}
[data-surface="paper"] > .di-dialog,
.di-dialog[data-surface="paper"] { background: var(--surface); }
.di-dialog::backdrop { background: var(--scrim); }
.di-dialog--sm { width: min(440px, calc(100vw - 2 * var(--s-4))); }
.di-dialog--lg { width: min(800px, calc(100vw - 2 * var(--s-4))); }
.di-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-2) 0 var(--s-5); }
.di-dialog__title { margin: 10px 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--text-1); }
.di-dialog__body { padding: var(--s-3) var(--s-5) var(--s-5); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.di-dialog__body > * + * { margin-top: var(--s-3); }
.di-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: var(--line-hair) solid var(--rule-strong); }
@media (max-width: 599px) {
  .di-dialog__foot { flex-direction: column-reverse; }
  .di-dialog__foot .di-btn { width: 100%; }
}

/* Lightbox: a figure at full size, always on ink, contained, with its caption and a way out. */
.di-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--text-2);
}
.di-lightbox::backdrop { background: var(--scrim); }
.di-lightbox__in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.di-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); border-bottom: var(--line-hair) solid var(--rule); }
.di-lightbox__media { display: grid; place-items: center; min-height: 0; padding: var(--s-5); }
.di-lightbox__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; outline: var(--line-hair) solid var(--rule-strong); }
.di-lightbox__caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: 0; padding: var(--s-3) var(--s-5) var(--s-5); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }

/* ==========================================================================
   15. Empty and loading states
   ========================================================================== */

.di-empty {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  border: var(--line-hair) dashed var(--rule-strong);
  border-radius: var(--r-panel);
}
/* The glyph: a route that has not started. One ring, a dashed line, no illustration. */
.di-empty__glyph { display: flex; align-items: center; gap: 0; width: 120px; height: 20px; }
.di-empty__glyph::before { content: ""; width: 16px; height: 16px; flex: none; box-sizing: border-box; border: var(--route-line) solid var(--structure); border-radius: var(--r-round); }
.di-empty__glyph::after { content: ""; flex: 1; height: 0; border-top: var(--route-line) dashed var(--structure-quiet); }
.di-empty__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-1); }
.di-empty__text { margin: 0; max-width: var(--measure-ui); color: var(--text-2); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.di-empty__list { margin: 0; padding-left: 1.2em; color: var(--text-2); font-size: var(--fs-small); line-height: 1.7; }
.di-empty__list a { display: inline-block; padding-block: 4px; margin-block: -2px; }

/* Skeleton: the shape of what is coming. Static: no shimmer, no pulse. Hidden from assistive
   technology; a status line says what is loading. */
.di-skel { display: grid; gap: var(--s-3); }
.di-skel__block { display: block; height: 14px; border-radius: var(--r-1); background: var(--surface-raised-2); }
.di-skel__block--title { height: 22px; width: 70%; }
.di-skel__block--plate { height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
.di-skel__block--short { width: 45%; }

.di-spinner { display: inline-block; width: 20px; height: 20px; flex: none; box-sizing: border-box; border: var(--route-line) solid var(--structure-quiet); border-top-color: var(--structure); border-radius: var(--r-round); animation: di-turn 900ms linear infinite; }
.di-loading { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text-2); font-size: var(--fs-small); }

.di-progress { display: grid; gap: var(--s-2); }
.di-progress__head { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--text-1); font: var(--fw-bold) var(--fs-small) / 1.3 var(--font-sans); }
.di-progress__head span:last-child { color: var(--text-3); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   16. Data: bar charts in HTML (labels stay real text at every width)
   ========================================================================== */

.di-chart { container: di-chart / inline-size; margin: 0; }
.di-chart__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-1); }
.di-chart__sub { margin: var(--s-1) 0 0; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-chart__source { margin: var(--s-4) 0 0; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-chart__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-small); }
.di-chart__legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.di-chart__key { width: 14px; height: 14px; flex: none; background: var(--data-1); }
.di-chart__key--2 { box-sizing: border-box; border: var(--line-path) solid var(--data-2); background: none; }
.di-chart__key--context { background: var(--data-context); }
.di-chart__key--highlight { background: var(--data-highlight); box-shadow: inset 0 0 0 var(--line-hair) var(--data-highlight-edge); }
.di-chart__key--threshold { height: 0; border-top: var(--line-path) dashed var(--data-threshold); background: none; }

.di-bars { position: relative; display: grid; gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.di-bars__row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-1) var(--s-4); align-items: center; }
.di-bars__label { color: var(--text-2); font-size: var(--fs-small); line-height: 1.35; }
.di-bars__track { position: relative; display: grid; gap: 3px; }
.di-bars__bar { position: relative; display: flex; align-items: center; height: 22px; }
.di-bars__bar::before { content: ""; box-sizing: border-box; width: var(--v); height: 100%; background: var(--data-1); }
/* Series 2 is an outline, so the two series differ in shape as well as lightness (data-1 against
   data-2 is under 3:1 on both surfaces). */
.di-bars__bar--2::before { border: var(--line-path) solid var(--data-2); background: none; }
.di-bars__bar--context::before { background: var(--data-context); }
.di-bars__bar--highlight::before { background: var(--data-highlight); box-shadow: inset 0 0 0 var(--line-hair) var(--data-highlight-edge); }
.di-bars__value { margin-left: var(--s-2); color: var(--text-1); font: var(--fw-bold) var(--fs-small) / 1 var(--font-sans); font-variant-numeric: tabular-nums; }
.di-bars--thin .di-bars__bar { height: 12px; }
/* Gridlines and an axis: quiet, behind the bars. Set the area with --grid (the track width). */
.di-bars__axis { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-2); color: var(--text-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.di-bars__ticks { position: relative; display: flex; justify-content: space-between; padding-top: var(--s-1); border-top: var(--line-hair) solid var(--data-axis); }
.di-bars__threshold { position: absolute; top: calc(-1 * var(--s-2)); bottom: calc(-1 * var(--s-2)); left: var(--t); width: 0; border-left: var(--line-path) dashed var(--data-threshold); }
.di-bars__thresholdlabel { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--status-warning); font: var(--fw-bold) var(--fs-small) / 1.3 var(--font-sans); }
.di-bars__thresholdlabel > svg { width: 16px; height: 16px; }
@container di-chart (max-width: 519px) {
  .di-bars__row, .di-bars__axis { grid-template-columns: minmax(0, 1fr); }
  .di-bars__axis > :first-child { display: none; }
  .di-bars__threshold { top: 0; bottom: 0; }
}

/* Sequential ramp: five steps of one hue, for ordered values only. */
.di-ramp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.di-ramp li { display: grid; gap: var(--s-1); color: var(--text-3); font-size: var(--fs-small); text-align: center; }
.di-ramp li::before { content: ""; height: 28px; background: var(--c); }

/* ==========================================================================
   17. Lesson parts
   ========================================================================== */

/* Lesson bar: the course, where you are in it, and the way to the next lesson. */
.di-lessonbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); border-bottom: var(--line-hair) solid var(--rule); }
.di-lessonbar__course { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.di-lessonbar__title { color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.3 var(--font-sans); }
.di-lessonbar__count { color: var(--text-2); font: var(--fw-bold) var(--fs-small) / 1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
.di-lessonbar__nav { display: flex; align-items: center; gap: var(--s-2); }

/* Player: always ink. The picture, then the controls in their own bar below it, so controls never
   sit on the video and their contrast never depends on the frame. */
.di-player { container: di-player / inline-size; border: var(--line-hair) solid var(--rule-strong); border-radius: var(--r-panel); background: var(--surface-raised); overflow: hidden; }
.di-player__screen { position: relative; aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden; }
.di-player__screen > img,
.di-player__screen > video { width: 100%; height: 100%; object-fit: contain; }
/* Poster: the still before play is the video generator's title card (generators/video,
   title-card.png), the same deliverable the video pipeline produces: set it as the video's poster,
   or as an img in the screen. .di-poster and its parts below are the retired coded stand-in, kept
   only until the system view moves to the title card. Do not use them. */
.di-poster { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: var(--s-2); padding: 6% 11.5%; text-align: center; container-type: size; }
.di-poster__kicker { margin: 0; color: var(--kicker-frame); font: var(--fw-bold) max(var(--fs-kicker), calc(var(--frame-kicker) * 1cqmin)) / 1.3 var(--font-sans); letter-spacing: var(--tr-kicker); text-transform: uppercase; }
.di-poster__title { margin: 0; color: var(--text-1); font: var(--fw-bold) max(var(--fs-h3), calc(var(--frame-title) * 1.6cqmin)) / var(--frame-title-line-height) var(--font-sans); letter-spacing: calc(var(--frame-title-tracking) * 1em); }
.di-poster__sub { margin: 0; color: var(--text-subtitle); font-size: max(var(--fs-small), calc(var(--frame-subtitle) * 1.4cqmin)); line-height: 1.4; }
.di-player__resume { position: absolute; left: var(--s-3); top: var(--s-3); display: flex; align-items: center; gap: var(--s-1); padding: 2px 2px 2px var(--s-3); border: var(--line-hair) solid var(--rule-strong); border-radius: var(--r-control); background: var(--surface); color: var(--text-2); font-size: var(--fs-small); }
/* Captions: on by default. Solid ground, so the words read on any frame. */
.di-player__captions { position: absolute; left: 7%; right: 7%; bottom: 6%; width: fit-content; max-width: 86%; margin: 0 auto; padding: 4px 10px; background: var(--surface); color: var(--text-1); font: var(--fw-regular) max(var(--fs-small), 2.2cqw) / 1.45 var(--font-sans); text-align: center; }
.di-player__bar { display: grid; gap: var(--s-1); padding: var(--s-2) var(--s-3) var(--s-2); border-top: var(--line-hair) solid var(--rule); }
.di-player__row { display: flex; align-items: center; gap: var(--s-1); }
.di-player__spacer { flex: 1; }
.di-player__time { padding-inline: var(--s-2); color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.di-player__chapter { min-width: 0; overflow: hidden; color: var(--text-3); font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; }
/* Control: 44px. A visible text label is the start of the accessible name (WCAG 2.5.3). */
.di-ctl {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: var(--tap);
  height: var(--tap);
  padding: 0 var(--s-2);
  border: var(--line-hair) solid transparent;
  border-radius: var(--r-control);
  background: none;
  color: var(--text-1);
  font: var(--fw-bold) var(--fs-small) / 1 var(--font-sans);
  cursor: pointer;
}
.di-ctl:hover { background: var(--action-ghost-bg-hover); }
.di-ctl > svg { width: 22px; height: 22px; }
.di-ctl[aria-pressed="true"] { border-color: var(--selected-line); background: var(--selected-bg); color: var(--selected-fg); }
.di-ctl--text { min-width: 52px; }
/* Scrubber: chapters as nodes on the line, because a video is a sequence. */
.di-scrub { position: relative; height: 32px; margin-inline: var(--s-2); cursor: pointer; }
.di-scrub__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--structure-quiet); }
.di-scrub__done { position: absolute; left: 0; top: 50%; width: var(--p); height: 4px; margin-top: -2px; border-radius: 2px; background: var(--structure); }
.di-scrub__ch { position: absolute; top: 50%; left: var(--at); width: 10px; height: 10px; margin: -5px 0 0 -5px; box-sizing: border-box; border: var(--line-path) solid var(--control-line); border-radius: var(--r-round); background: var(--surface-raised); }
.di-scrub__ch.is-done { border-color: var(--structure); background: var(--structure); }
.di-scrub__head { position: absolute; top: 50%; left: var(--p); width: 18px; height: 18px; margin: -9px 0 0 -9px; border: var(--line-path) solid var(--surface-raised); border-radius: var(--r-round); background: var(--text-1); }
.di-scrub:focus-visible { outline-offset: 2px; border-radius: var(--r-1); }
@container di-player (max-width: 599px) {
  .di-ctl--wide, .di-player__chapter { display: none; }
  .di-player__bar { padding-inline: var(--s-1); }
}
/* On the narrowest players the time takes its own line, so every control keeps 44px. */
@container di-player (max-width: 419px) {
  .di-player__row { flex-wrap: wrap; }
  .di-player__time { order: -1; flex-basis: 100%; padding: 0 var(--s-2) var(--s-1); }
}
.di-player__help { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: 0; padding: 0; list-style: none; }
.di-keys li { display: inline-flex; align-items: center; gap: var(--s-1); }
.di-kbd, .di-keys kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border: var(--line-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--surface-raised-2); color: var(--text-1); font: var(--fw-bold) var(--fs-small) / 1 var(--font-sans); }
@media (max-width: 767px) { .di-keys { display: none; } }

/* Chapter strip: large targets under the player, a route because chapters are an order. */
.di-chapters { --node-fill: var(--surface); }
/* The strip scrolls sideways inside itself: --ring-room keeps the first and last focus rings whole,
   and the scroll padding leaves part of the next chapter showing when a focused chapter is brought
   into view. No scroll snapping: it pulls a focused chapter back to a snap point that cuts it off. */
.di-chapters__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); margin: 0 calc(-1 * var(--ring-room)); padding: 0 var(--ring-room) var(--s-2); list-style: none; overflow-x: auto; scroll-padding-inline: var(--s-5); }
.di-chapters__item { position: relative; padding-top: calc(var(--node-here-size) + var(--s-2)); padding-right: var(--s-3); }
.di-chapters__item > .di-node { position: absolute; top: calc((var(--node-here-size) - var(--n)) / 2); left: calc((var(--node-here-size) - var(--n)) / 2); }
.di-chapters__item::before { content: ""; position: absolute; top: calc(var(--node-here-size) / 2 - var(--route-line) / 2); left: calc(var(--node-here-size) / 2); right: calc(-1 * var(--node-here-size) / 2); height: var(--route-line); background: var(--route-ahead); }
.di-chapters__item:last-child::before { right: 0; }
.di-chapters__item.is-done::before { background: var(--route-done); }
.di-chapters__btn {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 60px;
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: var(--fw-regular) var(--fs-small) / 1.35 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.di-chapters__btn:hover .di-chapters__name { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
.di-chapters__time { color: var(--text-3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.di-chapters__name { color: var(--text-2); font-weight: var(--fw-bold); }
.is-here > .di-chapters__btn .di-chapters__name { color: var(--text-1); }
.is-here > .di-chapters__btn .di-chapters__time { color: var(--text-1); }

/* Transcript: on paper, Newsreader, a timestamp button per paragraph (44px target). */
.di-transcript { max-width: calc(var(--measure) + 88px); }
.di-transcript__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.di-transcript__title { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-1); }
.di-transcript__p { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) 0 var(--s-2) var(--s-3); margin-left: calc(-1 * var(--s-3) - var(--line-heavy)); border-left: var(--line-heavy) solid transparent; }
.di-transcript__p[aria-current="true"] { border-left-color: var(--structure); background: var(--surface-raised); }
.di-transcript__time {
  display: inline-flex;
  align-items: flex-start;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 6px 0 0;
  border: 0;
  background: none;
  color: var(--link);
  font: var(--fw-bold) var(--fs-small) / 1.6 var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.di-transcript__time:hover { color: var(--link-hover); }
.di-transcript__speaker { display: block; margin-bottom: 2px; color: var(--text-3); font: var(--fw-bold) var(--fs-label) / 1.4 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }
.di-transcript__text { margin: 0; color: var(--text-2); font-family: var(--font-serif); font-size: calc(var(--fs-body) * 0.92); font-weight: var(--fw-read); line-height: 1.62; }
.di-transcript__desc { color: var(--text-3); font-style: italic; }
/* On a phone the time sits above its paragraph and keeps its 44px target. */
@media (max-width: 599px) {
  .di-transcript__p { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .di-transcript__time { align-items: center; padding-top: 0; }
}

/* Resources: ruled rows, each with a format tag and its size. */
.di-resources { margin: 0; padding: 0; list-style: none; border-top: var(--line-hair) solid var(--rule); }
.di-resources li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: var(--line-hair) solid var(--rule); }
.di-resources__title { color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.35 var(--font-sans); text-decoration: none; }
.di-resources__title::after { content: ""; position: absolute; inset: 0; }
.di-resources__title:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
.di-resources__title:focus-visible { outline: none; }
.di-resources li:has(.di-resources__title:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
.di-resources__meta { grid-column: 1; color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-resources .di-tag { grid-column: 2; grid-row: 1 / span 2; }

/* Course progress: the numbers in words, then the route of lessons on one line. */
.di-courseprog__nums { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-4); }
.di-courseprog__big { color: var(--text-1); font: var(--fw-bold) var(--fs-h2) / 1.2 var(--font-sans); }
.di-courseprog__big span { color: var(--text-3); font-size: var(--fs-small); font-weight: var(--fw-regular); }
.di-courseprog .di-route__stop { padding-right: 0; }
.di-courseprog .di-route { --node-here-size: 18px; --node-size: 12px; }

/* Up next and the end card. The end card is a solid panel over the stopped picture. */
.di-upnext { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-4); align-items: start; }
.di-upnext__body { display: grid; gap: var(--s-1); }
.di-upnext__title { margin: 0; color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.35 var(--font-sans); }
.di-endcard { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 3%; background: var(--surface); }
.di-endcard__panel { display: grid; gap: var(--s-2); width: min(100%, 480px); padding: var(--s-5); border: var(--line-hair) solid var(--rule-strong); border-radius: var(--r-panel); background: var(--surface-raised); }
.di-countdown { height: var(--line-path); background: var(--structure-quiet); overflow: hidden; }
.di-countdown::before { content: ""; display: block; height: 100%; width: var(--p, 100%); background: var(--structure); }
.di-countdown.is-running::before { animation: di-count var(--dur-countdown) linear forwards; }
@keyframes di-count { from { width: 100%; } to { width: 0%; } }
@container di-player (max-width: 599px) {
  .di-endcard__panel { padding: var(--s-3); gap: var(--s-1); }
  .di-endcard .di-meta { display: none; }
}
@media (max-width: 599px) {
  .di-upnext { grid-template-columns: minmax(0, 1fr); }
}

/* Completion: the rule stated up front, then the done state with a tick and words. */
.di-complete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-items: start; }
.di-complete > .di-node { --n: 28px; margin-top: 1px; }
.di-complete__title { margin: 0; color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.4 var(--font-sans); }
.di-complete__text { grid-column: 2; margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-complete__actions { grid-column: 2; margin-top: var(--s-3); }

/* Knowledge check: one question, written feedback after Check. Wrong is information, not a
   warning, so it is never red. */
.di-quiz { display: grid; gap: var(--s-4); }
.di-quiz__q { margin: 0 0 var(--s-3); padding: 0; color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.4 var(--font-sans); }
.di-quiz .di-choice:has(> input:checked) { border-color: var(--selected-line); }
.di-feedback { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-1) var(--s-3); padding: var(--s-4); border-left: var(--line-heavy) solid var(--structure); background: var(--panel-bg); color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.di-feedback > svg { width: 20px; height: 20px; color: var(--status-info); }
.di-feedback__title { margin: 0; color: var(--text-1); font: var(--fw-bold) var(--fs-ui) / 1.35 var(--font-sans); }
.di-feedback__text { grid-column: 2; margin: 0; }

/* Notes: a textarea with an honest line about where the notes are kept. */
.di-notes .di-textarea { min-height: 160px; }

/* ==========================================================================
   18. Motion, forced colours and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .di-btn[aria-busy="true"]::before,
  .di-spinner { animation: none; border-right-color: currentColor; }
  .di-countdown.is-running::before { animation: none; }
  .di-toast { animation: none; }
}

@media (forced-colors: active) {
  .di-btn, .di-iconbtn, .di-tag, .di-chip, .di-badge, .di-flag, .di-ctl { border-color: ButtonText; }
  .di-node { forced-color-adjust: none; border-color: CanvasText; background: Canvas; color: CanvasText; }
  .di-node.is-done, .is-done > .di-node { border-color: Highlight; background: Highlight; color: HighlightText; }
  .di-node.is-done::after, .is-done > .di-node::after { background-color: HighlightText; }
  .di-node.is-here, .is-here > .di-node { border-color: Highlight; border-width: 4px; }
  .di-node.is-here::after, .is-here > .di-node::after { background: Highlight; }
  .di-route__stop::before, .di-chapters__item::before, .di-scale__opt::before { forced-color-adjust: none; background: GrayText; }
  .di-route__stop.is-here::before, .di-route--v .di-route__stop.is-here::before { background: GrayText; }
  .di-route__stop.is-done::before, .di-chapters__item.is-done::before { background: Highlight; }
  .di-node.is-marked, .is-marked > .di-node { border-color: CanvasText; background: Mark; color: MarkText; }
  .di-scale__ring { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .di-scale__opt:has(input:checked) .di-scale__ring { border-color: Highlight; box-shadow: inset 0 0 0 4px Canvas, inset 0 0 0 12px Highlight; }
  .di-input[aria-invalid="true"], .di-textarea[aria-invalid="true"], .di-select[aria-invalid="true"] { border-style: double; border-width: 4px; }
  .di-arrowlink::after, .di-arrowlink--back::before, .di-selectwrap::after, .di-chip[aria-pressed="true"]::before,
  .di-table__sort::after, .di-check > input:checked::before, .di-choice > input:checked::before { forced-color-adjust: none; background-color: CanvasText; }
  .di-chip[aria-pressed="true"], .di-iconbtn[aria-pressed="true"], .di-ctl[aria-pressed="true"],
  .di-choice:has(> input:checked), .di-segmented input:checked + span { outline: 2px solid Highlight; outline-offset: -2px; }
  .di-tabs__tab[aria-selected="true"]::after, .di-header__link[aria-current]::after { forced-color-adjust: none; background: Highlight; }
  .di-bar, .di-readprogress, .di-scrub__track, .di-countdown { forced-color-adjust: none; background: GrayText; }
  .di-bar::before, .di-readprogress::before, .di-scrub__done, .di-countdown::before { forced-color-adjust: none; background: Highlight; }
  .di-plate::after, .di-figure__media::after { border-color: CanvasText; }
  .di-waterline { background: CanvasText; }
  /* Bars and keys are backgrounds, which forced colours remove: draw them in system colours, keeping
     the solid and outline shapes that tell the two series apart. */
  .di-bars__bar::before, .di-chart__key { forced-color-adjust: none; background: CanvasText; }
  .di-bars__bar--2::before, .di-chart__key--2 { background: Canvas; border-color: CanvasText; }
  .di-bars__bar--context::before, .di-chart__key--context { background: GrayText; }
  .di-bars__bar--highlight::before, .di-chart__key--highlight { background: Highlight; box-shadow: none; }
  .di-chart__key--threshold { background: none; border-top-color: CanvasText; }
}

@media print {
  .di-header, .di-menu, .di-footer, .di-newsletter, .di-readprogress, .di-toasts, .di-player__bar, .di-chapters, .di-tocinline { display: none !important; }
  .di-plate, .di-figure__media { box-shadow: var(--sh-print); }
  .di-lead__art .di-plate { box-shadow: var(--sh-print); }
}