/* Olive Moss design system v2: base, layout and components.
   Load order: tokens.css, then this file. Use only --color-*, --fs-*, --space-* and the other
   semantic tokens here; primitive scales (--secondary-600 etc.) are for tokens.css only.
   State is read from ARIA/native attributes, never from parallel classes. */

/* ------------------------------------------------------------------ Base */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--space-24);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[data-theme] {
  background: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-body); line-height: var(--lh-h3); }

/* Visual size decoupled from heading level: <h3 class="h2">. */
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-h1); font-weight: var(--fw-bold); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: 0; font-weight: var(--fw-bold); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 0; font-weight: var(--fw-bold); }

[hidden] { display: none !important; }

p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; }
p { text-wrap: pretty; }
/* Long unbroken strings (URLs, model names) break instead of widening the page. */
:is(p, li, dt, dd, th, td, figcaption, caption, h1, h2, h3, h4) { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--color-selected-bg); color: var(--color-selected-fg); }

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: var(--z-toast);
  padding: var(--space-8) var(--space-16);
  border: var(--border-width) solid var(--color-brand-fill-edge);
  border-radius: var(--radius);
  background: var(--color-brand-fill);
  color: var(--color-on-brand);
  font: var(--fw-medium) var(--fs-ui) / var(--lh-ui) var(--font-mono);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- Layout */

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

.section { padding-top: var(--space-section); }
.section--tight { padding-top: var(--space-56); }

.stack { display: flex; flex-direction: column; gap: var(--stack, var(--space-16)); }
.stack--tight { --stack: var(--space-8); }
.stack--loose { --stack: var(--space-24); }
.stack--block { --stack: var(--space-block); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster, var(--space-8)) var(--cluster-x, var(--space-16));
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-24);
}
.grid-cards > * { display: grid; }

.split {
  display: grid;
  gap: var(--space-32);
  align-items: start;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-56); }
}

.measure-headline { max-width: var(--measure-headline); }
.measure-text { max-width: var(--measure-text); }

/* ------------------------------------------------------------ Typography */

/* Optional key word. Inline-block keeps "well-made" on one line while it fits;
   a word wider than the line is capped at 100% and breaks mid-word instead of overflowing. */
.key {
  display: inline-block;
  max-width: 100%;
  font: var(--fw-regular) var(--fs-key) / var(--lh-key) var(--font-key);
  color: var(--color-brand);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.label {
  font: var(--fw-bold) var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-label);
}

.label a { color: inherit; }
.label a:hover { color: var(--color-text); }

/* Metadata (dates, counts, categories), eyebrows and index numbers are all about 14px. */
.meta {
  font: var(--fw-regular) var(--fs-sm) / var(--lh-sm) var(--font-mono);
  color: var(--color-meta);
  font-variant-numeric: tabular-nums;
}

.lede {
  max-width: var(--measure-text);
  color: var(--color-text-muted);
}

.text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.text-muted { color: var(--color-text-muted); }

/* Numbered section heading from v1: "01  Color" over a divider. */
.section-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: var(--border-width) solid var(--color-border);
}
.section-head__num { font-weight: var(--fw-medium); font-size: var(--fs-label); line-height: var(--lh-label); }

/* ----------------------------------------------------------------- Links */

a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-link); }

/* Bracket action: [say hello →]. Brackets are drawn, not read aloud. */
.action {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min); /* 24px; 44px on touch */
  padding: 0;
  border: 0;
  background: none;
  font: var(--fw-medium) var(--fs-ui) / var(--lh-ui) var(--font-mono);
  color: var(--color-link);
  text-decoration: none;
  cursor: pointer;
}
.action::before { content: "[" / ""; }
.action::after { content: "]" / ""; }
.action:hover { color: var(--color-text); }
.action--sm { font-size: var(--fs-sm); }
.action .icon { width: 1em; height: 1em; margin-left: 0.25em; }

/* ----------------------------------------------------------------- Icons */

.icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

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

.button {
  --btn-h: var(--control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--btn-h);
  padding: var(--space-4) var(--space-16);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: var(--fw-medium) var(--fs-ui) / var(--lh-ui) var(--font-mono);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere; /* long labels and enlarged text wrap instead of overflowing */
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.button:hover { background: var(--color-bg-hover); border-color: var(--color-text); color: var(--color-text); }

.button--primary {
  font-weight: var(--fw-bold);
  background: var(--color-brand-fill);
  border-color: var(--color-brand-fill-edge);
  color: var(--color-on-brand);
}
.button--primary:hover {
  background: var(--color-brand-fill-hover);
  border-color: var(--color-brand-fill-edge-hover);
  color: var(--color-on-brand);
}

.button--ghost { border-color: transparent; }
.button--ghost:hover { border-color: transparent; }

.button--sm { --btn-h: var(--control-sm); padding: var(--space-4) var(--space-12); font-size: var(--fs-sm); }
.button--lg { --btn-h: var(--control-lg); padding: var(--space-4) var(--space-24); }
.button--icon { padding: 0; width: var(--btn-h); flex: none; }
.button--block { width: 100%; }

.button:disabled,
.button[aria-disabled="true"] {
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  color: var(--color-disabled-fg);
  cursor: not-allowed;
}

.button[aria-busy="true"] { cursor: progress; }
.button .spinner { display: none; }
.button[aria-busy="true"] .spinner { display: inline-block; }
.button[aria-busy="true"] .button__icon { display: none; }

/* --------------------------------------------------------------- Spinner */

.spinner {
  width: 12px;
  height: 12px;
  flex: none;
  border: var(--border-width-thick) solid currentColor;
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- Forms */

.field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }

.field__label {
  font: var(--fw-bold) var(--fs-ui) / var(--lh-ui) var(--font-mono);
  color: var(--color-text);
}
.field__optional { font-weight: var(--fw-regular); color: var(--color-text-muted); }

.field__hint,
.field__error,
.field__counter {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
}
.field__error {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  color: var(--color-danger);
}
.field__error:empty { display: none; }
.field__error .icon { margin-top: 2px; }
.field__footer { display: flex; justify-content: space-between; gap: var(--space-16); }
.field__counter { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.input {
  width: 100%;
  min-height: var(--control-md);
  padding: var(--space-8) var(--space-12);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-body) / var(--lh-ui) var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover { border-color: var(--color-text-muted); }
.input:focus-visible { border-color: var(--color-focus); outline-offset: 0; }
/* Invalid: 2px red edge; padding gives back the extra 1px so text doesn't shift. */
.input[aria-invalid="true"] {
  border-width: var(--border-width-thick);
  border-color: var(--color-danger);
  padding: calc(var(--space-8) - 1px) calc(var(--space-12) - 1px);
}
.search .input[aria-invalid="true"] { padding-left: calc(var(--space-40) - 1px); padding-right: calc(var(--space-40) - 1px); }
.select .input[aria-invalid="true"] { padding-right: calc(var(--space-40) - 1px); }
.input[aria-invalid="true"]:focus-visible { outline-color: var(--color-danger); }
.input:disabled {
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  color: var(--color-disabled-fg);
  cursor: not-allowed;
}

textarea.input { min-height: 144px; resize: vertical; line-height: var(--lh-body); }

/* Select: native element, custom chevron. */
.select { position: relative; display: block; }
.select .input { appearance: none; padding-right: var(--space-40); cursor: pointer; }
.select .icon {
  position: absolute;
  right: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
  transition: transform var(--dur-fast) var(--ease);
}

/* Styled option list where the browser allows it (Chromium 135+); others keep the native list. */
@supports (appearance: base-select) {
  .select select.input,
  .select select.input::picker(select) { appearance: base-select; }
  .select select.input::picker-icon { display: none; }
  .select:has(select:open) .icon { transform: translateY(-50%) rotate(180deg); }
  .select select.input::picker(select) {
    margin-top: var(--space-4);
    padding: var(--space-4) 0;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: none;
    overflow: hidden;
  }
  .select option {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: var(--control-md);
    padding: 0 var(--space-12);
    font: var(--fw-regular) var(--fs-body) / var(--lh-ui) var(--font-sans);
    cursor: pointer;
  }
  .select option::checkmark { color: var(--color-link); }
  .select option:checked { font-weight: var(--fw-medium); }
  .select option:hover,
  .select option:focus-visible {
    background: var(--color-brand-fill);
    color: var(--color-on-brand);
    outline: none;
  }
  .select option:hover::checkmark,
  .select option:focus-visible::checkmark { color: inherit; }
  .select option:disabled { color: var(--color-disabled-fg); background: none; cursor: not-allowed; }
}

/* Search: leading icon, trailing clear button. */
.search { position: relative; display: block; }
.search > .icon {
  position: absolute;
  left: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.search .input { padding-left: var(--space-40); padding-right: var(--space-40); }
.search .input::-webkit-search-cancel-button { display: none; }
.search__clear {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  border: 0;
}

/* Checkbox: native input, small rounded square, brand check. */
.check {
  display: inline-flex;
  gap: var(--space-12);
  min-height: var(--target-min); /* the whole label is the target: 24px, 44px on touch */
  align-items: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  cursor: pointer;
}
.check input {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.check input::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--color-on-brand);
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
  transform: scale(0);
}
.check input:checked { background: var(--color-brand-fill); border-color: var(--color-brand-fill-edge); }
.check input:checked::before { transform: scale(1); }
.check input:disabled { background: var(--color-disabled-bg); border-color: var(--color-disabled-bg); cursor: not-allowed; }
.check:has(input:disabled) { color: var(--color-disabled-fg); cursor: not-allowed; }

/* ----------------------------------------------------------------- Chips
   Single-select filter = radio inputs inside a fieldset. Selected fills brand green. */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chips__legend { margin-bottom: var(--space-8); }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-sm);
  padding: 0 var(--space-12);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-ui) / var(--lh-ui) var(--font-mono);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip:hover { background: var(--color-bg-hover); border-color: var(--color-text); }
.chip:has(input:checked),
.chip[aria-pressed="true"] {
  background: var(--color-brand-fill);
  border-color: var(--color-brand-fill-edge);
  color: var(--color-on-brand);
}
.chip:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.chip:has(input:disabled),
.chip:disabled {
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  color: var(--color-disabled-fg);
  cursor: not-allowed;
}
.chip__count { color: inherit; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- Tags and badges */

.tags { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px var(--space-12);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font: var(--fw-regular) var(--fs-sm) / var(--lh-sm) var(--font-mono);
  overflow-wrap: anywhere;
}

/* Status: square marker + text, so it never relies on color alone. */
.badge {
  --badge: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--badge);
  font: var(--fw-medium) var(--fs-sm) / var(--lh-sm) var(--font-mono);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--badge);
}
.badge--success { --badge: var(--color-success); }
.badge--warning { --badge: var(--color-warning); }
.badge--info { --badge: var(--color-info); }
.badge--neutral::before { background: transparent; border: var(--border-width) solid var(--badge); }

/* ----------------------------------------------------------------- Media */

.media {
  position: relative;
  aspect-ratio: var(--ratio, var(--ratio-card));
  overflow: hidden;
  background: var(--color-bg-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.media--feature { --ratio: var(--ratio-feature); }
.media > img { width: 100%; height: 100%; object-fit: cover; }
.media__fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-sm) / var(--lh-ui) var(--font-mono);
}
.media[data-state="error"] > img { visibility: hidden; }
.media[data-state="error"] .media__fallback { display: flex; }

/* ------------------------------------------------------------------ Card
   Whole card is clickable through the title link; secondary links sit above it. */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease);
}
.card .media { border: 0; border-bottom: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card__body { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16) var(--space-16) var(--space-24); flex: 1; }
.card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4) var(--space-12); }
.card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.card__title a { text-decoration: none; color: inherit; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:focus-visible { outline: none; }
.card__desc { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.card__tags { margin-top: auto; padding-top: var(--space-4); }
.card__links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-top: var(--border-width) solid var(--color-border);
}

.card:hover { border-color: var(--color-border-strong); }
.card:hover .card__title { color: var(--color-link); }
.card:has(.card__title a:focus-visible) {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* ------------------------------------------------------------ Spec list */

.specs { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); }
.specs > dt, .specs > dd { padding: var(--space-12) 0; border-top: var(--border-width) solid var(--color-border); }
.specs > dt { padding-right: var(--space-24); }
.specs > dd { font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* Phones: the label sits above its value, so a long label can't squeeze the text column. */
@media (max-width: 639px) {
  .specs { grid-template-columns: minmax(0, 1fr); }
  .specs > dt { padding-bottom: var(--space-4); }
  .specs > dd { padding-top: 0; border-top: 0; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-16); }
.stat { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-12); border-top: var(--border-width-thick) solid var(--color-brand); }
.stat__value { font: var(--fw-bold) var(--fs-h2) / var(--lh-h2) var(--font-mono); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- Index row (v1) */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-8);
  margin: 0 calc(-1 * var(--space-8));
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
.row:hover { background: var(--color-bg-hover); color: var(--color-link); }
.row__title { font: var(--fw-medium) var(--fs-h3) / var(--lh-h3) var(--font-mono); }
.row__num { font-weight: var(--fw-medium); font-size: var(--fs-label); line-height: var(--lh-label); }

/* ---------------------------------------------------------------- Alerts */

.alert {
  --alert: var(--color-info);
  --alert-bg: var(--color-info-bg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4) var(--space-12);
  padding: var(--space-16);
  border: var(--border-width) solid var(--alert);
  border-radius: var(--radius);
  background: var(--alert-bg);
  color: var(--color-text);
}
.alert > .icon { color: var(--alert); margin-top: 3px; }
.alert__title { font: var(--fw-medium) var(--fs-body) / var(--lh-ui) var(--font-mono); color: var(--alert); }
.alert__body { grid-column: 2; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.alert__body ul { padding-left: var(--space-16); }
.alert__actions { grid-column: 2; margin-top: var(--space-8); }
.alert--danger { --alert: var(--color-danger); --alert-bg: var(--color-danger-bg); }
.alert--success { --alert: var(--color-success); --alert-bg: var(--color-success-bg); }
.alert--warning { --alert: var(--color-warning); --alert-bg: var(--color-warning-bg); }
.alert:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

/* ----------------------------------------------------------- Empty state */

.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-40) var(--space-24);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.empty > .icon { color: var(--color-meta); }
.empty__body { max-width: var(--measure-text); color: var(--color-text-muted); }
.empty__actions { margin-top: var(--space-8); }

/* -------------------------------------------------------------- Skeleton */

.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--color-bg-subtle) 0%, var(--color-bg-subtle) 40%, var(--color-border) 50%, var(--color-bg-subtle) 60%, var(--color-bg-subtle) 100%) 0 0 / 300% 100%;
  animation: shimmer 1.4s var(--ease) infinite;
}
.skeleton--line { height: 0.9em; }
.skeleton--title { height: 1.4em; width: 70%; }
.skeleton--short { width: 40%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------------- Long-form
   .prose styles rendered markdown; it never needs classes on its children. */

.article-head {
  padding-bottom: var(--space-40);
  margin-bottom: var(--space-40);
  border-bottom: var(--border-width) solid var(--color-border);
}
.article-layout { display: grid; gap: var(--space-40); align-items: start; }
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); gap: var(--space-64); }
  .article-layout > .toc { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-24); max-height: calc(100vh - 2 * var(--space-24)); overflow-y: auto; }
  .article-layout > .prose { grid-column: 1; grid-row: 1; }
}

/* Text keeps a reading measure; code blocks may use the full column. */
.prose { min-width: 0; font-size: var(--fs-prose); }
@media (max-width: 599px) { .prose { font-size: var(--fs-body); } }
.prose > :is(p, ul, ol, h2, h3, h4) { max-width: var(--measure-prose); }
.prose > * + * { margin-top: var(--space-16); }
.prose > h2 { margin-top: var(--space-56); scroll-margin-top: var(--space-24); }
.prose > h3 { margin-top: var(--space-40); scroll-margin-top: var(--space-24); }
.prose > :is(h2, h3) + * { margin-top: var(--space-12); }
.prose > :first-child { margin-top: 0; }
.prose :is(ul, ol) { padding-left: var(--space-24); }
.prose li + li { margin-top: var(--space-8); }
.prose li::marker { color: var(--color-meta); font-family: var(--font-mono); }
.prose strong { font-weight: var(--fw-bold); }
.prose hr { border: 0; border-top: var(--border-width) solid var(--color-border); margin-block: var(--space-40); }
.prose :not(pre) > code {
  padding: 0.1em 0.35em;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  font: var(--fw-regular) 0.875em / 1 var(--font-mono);
  overflow-wrap: anywhere;
}

/* Code block: language + copy bar over a scrollable, focusable pre. */
.code-block { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; overflow: hidden; }
.prose > .code-block { margin-top: var(--space-24); }
.prose > .code-block + * { margin-top: var(--space-24); }
.code-block__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-4) var(--space-12) var(--space-4) var(--space-16);
  border-bottom: var(--border-width) solid var(--color-border);
}
.code-block pre {
  margin: 0;
  padding: var(--space-16);
  overflow-x: auto;
  font: var(--fw-regular) var(--fs-sm) / var(--lh-body) var(--font-mono);
  tab-size: 4;
  color: var(--color-text);
}
.code-block pre:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }

/* Figure: image at its intrinsic ratio (width/height attributes reserve the box), optional caption. */
.prose > :is(.figure, .table-wrap) { margin-top: var(--space-32); }
.prose > :is(.figure, .table-wrap) + * { margin-top: var(--space-32); }
.figure { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.media--natural { aspect-ratio: auto; }
.media--natural > img { height: auto; object-fit: initial; }
.figure__caption {
  max-width: var(--measure-prose);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* Table: captioned, scrolls inside its own focusable region, first column labels each row. */
.table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; container-type: inline-size; }
.table-wrap:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-variant-numeric: tabular-nums;
}
/* A wide table scrolls, but its caption wraps to the frame and stays in view. */
.table caption {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  max-width: 100cqi;
  caption-side: top;
  padding: var(--space-12) var(--space-16);
  text-align: left;
  font: var(--fw-medium) var(--fs-sm) / var(--lh-sm) var(--font-mono);
  color: var(--color-text);
}
.table th, .table td {
  padding: var(--space-8) var(--space-16);
  border-top: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.table thead th {
  background: var(--color-bg-subtle);
  font: var(--fw-medium) var(--fs-sm) / var(--lh-sm) var(--font-mono);
  white-space: nowrap;
}
.table tbody th { font-weight: var(--fw-medium); }
.table :is(th, td).t-right { text-align: right; }
.table :is(th, td).t-center { text-align: center; }
.tok-c { color: var(--color-text-muted); }
.tok-s { color: var(--color-link); }
.tok-k { color: var(--color-label); font-weight: var(--fw-medium); }
.tok-n { color: var(--color-meta); }

/* Table of contents: collapsible on small screens, sticky sidebar on desktop. */
.toc { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.toc__summary {
  display: flex;
  align-items: center;
  min-height: var(--control-md);
  padding: 0 var(--space-16);
  font: var(--fw-medium) var(--fs-sm) / var(--lh-ui) var(--font-mono);
  cursor: pointer;
}
.toc__summary { justify-content: space-between; list-style: none; }
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary .icon { color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease); }
.toc[open] .toc__summary .icon { transform: rotate(180deg); }
.toc__list { list-style: none; margin: 0; padding: 0 var(--space-16) var(--space-12); }
.toc__list a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-4) 0 var(--space-4) var(--space-12);
  border-left: var(--border-width-thick) solid var(--color-border);
  color: var(--color-text-muted);
  font: var(--fw-regular) var(--fs-sm) / var(--lh-sm) var(--font-mono);
  text-decoration: none;
}
.toc__list a:hover { color: var(--color-text); }
.toc__list a[aria-current] { color: var(--color-text); border-left-color: var(--color-brand); }
@media (min-width: 1024px) {
  .toc { border: 0; border-radius: 0; background: none; }
  .js .toc__summary { display: none; }
  .toc__list { padding: 0; }
  .js .toc::before {
    content: "On this page" / ""; /* the nav's aria-label already names it */
    display: block;
    margin-bottom: var(--space-12);
    font: var(--fw-bold) var(--fs-label) / var(--lh-label) var(--font-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
}

.article-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-16) var(--space-32);
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--color-border);
}

/* --------------------------------------------------------------- Toolbar */

.toolbar { display: flex; flex-direction: column; gap: var(--space-16); }
.toolbar__row { display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: flex-end; }
.toolbar__search { flex: 1 1 280px; }
.toolbar__sort { flex: 0 1 200px; }
.toolbar__status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-8) var(--space-16); }

/* ------------------------------------------------------- Tool controls
   Range field, swatches, segmented choice and info note. Built for tool pages
   (configurators, previews); single-select groups use aria-pressed buttons. */

.field__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }

/* Range field: slider and an exact number joined in one row. ds.js keeps them in sync. */
.range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-16);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
}
.range input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: var(--control-md);
  margin: 0;
  accent-color: var(--color-brand-fill);
  cursor: pointer;
}
.range__value { display: flex; align-items: center; gap: var(--space-8); }
.range__value .input {
  width: calc(var(--space-64) + var(--space-8));
  padding-inline: var(--space-8);
  border-radius: var(--radius-sm);
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.range__value .input::-webkit-inner-spin-button,
.range__value .input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.range__unit { min-width: 2ch; }
.range:has(input:disabled) { background: var(--color-disabled-bg); color: var(--color-disabled-fg); }
.range input[type="range"]:disabled { cursor: not-allowed; }

/* Swatch picker: the selected swatch gets a 2px ring, so the state never relies on colour alone. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.swatch {
  display: grid;
  place-items: center;
  width: var(--target-touch);
  height: var(--target-touch);
  padding: 0;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.swatch:hover { border-color: var(--color-text); }
.swatch[aria-pressed="true"] { border: var(--border-width-thick) solid var(--color-brand); }
.swatch__dot {
  width: var(--icon-lg);
  height: var(--icon-lg);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--swatch, var(--color-text));
}
.swatch:disabled { border-color: var(--color-disabled-bg); background: var(--color-disabled-bg); cursor: not-allowed; }
.swatch:disabled .swatch__dot { opacity: 0.4; }

/* Segmented choice: options joined in one track; the selected one fills brand green. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: var(--space-4);
  max-width: 100%;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
}
.segmented--block { display: flex; align-self: stretch; }
.segmented__option {
  flex: 1 1 auto;
  min-height: var(--control-sm);
  padding: 0 var(--space-12);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-ui) / var(--lh-ui) var(--font-mono);
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented__option:hover { background: var(--color-bg-hover); }
.segmented__option[aria-pressed="true"] {
  background: var(--color-brand-fill);
  border-color: var(--color-brand-fill-edge);
  color: var(--color-on-brand);
}
.segmented__option:disabled { background: none; color: var(--color-disabled-fg); cursor: not-allowed; }

/* Info note: a short explanation revealed by a ghost icon button with aria-expanded. */
.note {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.button--ghost[data-disclosure][aria-expanded="true"] { background: var(--color-bg-hover); }

/* ------------------------------------------------------------- Accordion */

.accordion { display: flex; flex-direction: column; }
.accordion__item { border-top: var(--border-width) solid var(--color-border); }
.panel__body > .accordion > .accordion__item:first-child { border-top: 0; }
.accordion__heading { font: inherit; }
.accordion__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: calc(100% + 2 * var(--space-8));
  min-height: var(--target-touch);
  margin-inline: calc(-1 * var(--space-8));
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.accordion__button:hover { background: var(--color-bg-hover); }
.accordion__button:disabled { background: none; color: var(--color-disabled-fg); cursor: not-allowed; }
.accordion__button:disabled .label { color: inherit; }
.accordion__title { display: flex; align-items: baseline; gap: var(--space-12); min-width: 0; }
.accordion__button > .icon { color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease); }
.accordion__button[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.accordion__panel { padding: var(--space-8) 0 var(--space-32); }

/* --------------------------------------------------- Workspace and panel
   A preview stage beside an options panel. From 880px they sit side by side at a fixed
   height and the panel can collapse to a rail; below that they stack. */

.workspace { display: flex; height: calc(var(--space-96) * 7); }
.workspace__main { display: flex; flex: 1 1 0; min-width: 0; padding: var(--space-24); }
.workspace__main > .stage { flex: 1; }

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.workspace > .panel {
  flex: 0 0 30%;
  min-width: calc(var(--space-96) * 4);
  max-width: calc(var(--space-96) * 5);
  border: 0;
  border-left: var(--border-width) solid var(--color-border);
  border-radius: 0;
}
.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-24);
  border-bottom: var(--border-width) solid var(--color-border);
}
.panel__actions { display: flex; gap: var(--space-8); }
.panel__body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 var(--space-24); }
.panel__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-24) var(--space-24);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}
.panel__toggle[aria-expanded="false"] .icon { transform: scaleX(-1); }

@media (min-width: 880px) {
  .panel:has(.panel__toggle[aria-expanded="false"]) {
    flex: 0 0 calc(var(--space-64) + var(--space-8));
    min-width: calc(var(--space-64) + var(--space-8));
    max-width: calc(var(--space-64) + var(--space-8));
  }
  .panel:has(.panel__toggle[aria-expanded="false"]) :is(.panel__body, .panel__foot, .panel__actions > :not(.panel__toggle), .panel__toggle-text) { display: none; }
  .panel:has(.panel__toggle[aria-expanded="false"]) .panel__bar {
    flex: 1;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--space-24);
    padding: var(--space-8) 0;
    border-bottom: 0;
  }
  .panel:has(.panel__toggle[aria-expanded="false"]) .panel__title { writing-mode: vertical-rl; }
}
@media (max-width: 879px) {
  .workspace { flex-direction: column; height: auto; }
  .workspace__main { display: block; flex: none; padding: var(--space-16); }
  .workspace__main > .stage { height: calc(var(--space-96) * 5); }
  .workspace > .panel { flex: none; min-width: 0; max-width: none; overflow: visible; border-left: 0; border-top: var(--border-width) solid var(--color-border); }
  .workspace > .panel .panel__body { overflow: visible; }
  .panel__toggle { display: none; }
}
@media (max-width: 639px) {
  .workspace__main { padding: var(--space-12); }
  .workspace__main > .stage { height: calc(var(--space-96) * 3 + var(--space-56)); }
  :is(.panel__bar, .panel__body, .panel__foot) { padding-inline: var(--space-16); }
}

/* --------------------------------------------------------- Preview stage
   A sunken frame for a live preview. Everything on it uses color-text: muted and meta
   colours drop under 4.5:1 on bg-sunken in the light theme. */

.stage {
  position: relative;
  min-width: 0;
  min-height: calc(var(--space-96) * 3 + var(--space-56));
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
  color: var(--color-text);
}
.stage__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__tools {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  right: calc(var(--space-64) + var(--space-24));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}
.stage__tools .button:not(.button--primary, :disabled) { background: var(--color-surface); }
.stage__tools .button:not(.button--primary, :disabled):hover { background: var(--color-bg-hover); }
.stage__axes { position: absolute; top: var(--space-12); right: var(--space-12); width: var(--space-64); height: auto; overflow: visible; }
.stage__axes line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.stage__axes text { fill: currentColor; font: var(--fw-regular) var(--fs-sm) / 1 var(--font-mono); }
.stage__foot {
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}
.stage__dims { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.stage__hint { font: var(--fw-regular) var(--fs-sm) / var(--lh-sm) var(--font-mono); color: var(--color-text); }
.stage__hint-coarse { display: none; }
@media (pointer: coarse) {
  .stage__hint-fine { display: none; }
  .stage__hint-coarse { display: inline; }
}
.dim {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-sm) / var(--lh-sm) var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dim__key { color: var(--color-meta); }

/* ---------------------------------------------------------- Sticky action bar
   The choice and the main action; pinned to the bottom of the screen on phones. */

.sticky-bar { display: flex; flex-direction: column; gap: var(--space-12); }
.sticky-bar__row { display: flex; flex-direction: column; gap: var(--space-12); }
@media (max-width: 639px) {
  .sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: var(--z-header);
    padding: var(--space-12) var(--space-16) max(var(--space-12), env(safe-area-inset-bottom));
    border-top: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
  }
  .sticky-bar__row { flex-direction: row; align-items: center; }
  .sticky-bar__row > :not(.button) { flex: none; }
  .sticky-bar__row > .button { flex: 1; padding-inline: var(--space-12); }
  .sticky-bar__wide { display: none; }
}

/* ---------------------------------------------------------- Flow diagram
   Rows of steps joined by arrows. Stacks vertically on narrow screens. */

.flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
  padding: var(--space-24);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.prose > .flow { margin-top: var(--space-32); }
.prose > .flow + * { margin-top: var(--space-32); }
.flow__row { display: flex; flex-direction: column; gap: var(--space-8); }
.flow__steps { display: flex; align-items: stretch; gap: var(--space-8); }
.flow__box {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-12);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.flow__kind { font: var(--fw-regular) var(--fs-sm) / var(--lh-sm) var(--font-mono); color: var(--color-meta); }
.flow__title { font: var(--fw-bold) var(--fs-ui) / var(--lh-ui) var(--font-mono); color: var(--color-text); overflow-wrap: anywhere; }
.flow__note { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--color-text-muted); }
.flow__box--brand { background: var(--color-brand-fill); border-color: var(--color-brand-fill-edge); }
.flow__box--brand :is(.flow__kind, .flow__title, .flow__note) { color: var(--color-on-brand); }
.flow__box--out { border: var(--border-width-thick) solid var(--color-brand); padding: calc(var(--space-12) - 1px); }
.flow__arrow { align-self: center; color: var(--color-meta); }
@media (max-width: 759px) {
  .flow__steps { flex-direction: column; }
  .flow__arrow { transform: rotate(90deg); }
}

/* ------------------------------------------------------------ Site header */

.site-header { border-bottom: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
  min-height: 72px;
  padding-block: var(--space-12);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-touch);
  font: var(--fw-bold) var(--fs-ui) / var(--lh-ui) var(--font-mono);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__brand:hover { color: var(--color-link); }
/* DOM order is brand, tools, nav at every width, so Tab follows what you see:
   desktop "name ... [theme] [links]", mobile "name ... [theme][menu]" with links below. */
.site-header__tools { display: flex; align-items: center; gap: var(--space-8); margin-left: auto; }

.nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-16); list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-touch);
  font: var(--fw-regular) var(--fs-ui) / var(--lh-ui) var(--font-mono);
  color: var(--color-text-muted);
  text-decoration: none;
}
.nav a::before { content: "[" / ""; display: inline-block; }
.nav a::after { content: "]" / ""; display: inline-block; }
.nav a:hover { color: var(--color-text); }
.nav a[aria-current] {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: var(--border-width-thick);
  text-underline-offset: 6px;
}

.nav-toggle { display: none; }

/* Mobile: nav collapses behind a disclosure button (only once JS is running). */
@media (max-width: 639px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-header .nav { flex-basis: 100%; }
  .js .site-header .nav[data-open="false"] { display: none; }
  .js .site-header .nav__list { flex-direction: column; border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-8); }
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }

/* ------------------------------------------------------------ Site footer */

.site-footer {
  margin-top: var(--space-section);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  padding-block: var(--space-40) var(--space-32);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-40);
  padding-top: var(--space-16);
  border-top: var(--border-width) solid var(--color-border);
}
/* A footer that is only the bottom bar: the footer's own top border is the divider. */
.site-footer > .site-footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.link-list { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.link-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--target-min);
  color: var(--color-text-muted);
  text-decoration: none;
  font: var(--fw-regular) var(--fs-ui) / var(--lh-ui) var(--font-mono);
}
.link-list a:hover { color: var(--color-text); }