/* components.css — tokens only, flex/grid + gap, mobile-first (min-width queries only). */

/* Container — the ONLY place side padding is set */
.container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-left: max(var(--wp--style--root--padding-left), env(safe-area-inset-left));
  padding-right: max(var(--wp--style--root--padding-right), env(safe-area-inset-right));
}
.container--content { max-width: calc(var(--wp--style--global--content-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right)); }

.section { padding-block: var(--section-space); }
.stack { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.stack--lg { gap: var(--wp--preset--spacing--50); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); }

/* Skip link */
.skip-link {
  position: absolute;
  top: var(--wp--preset--spacing--20);
  left: var(--wp--preset--spacing--20);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--wp--preset--spacing--30);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; color: var(--wp--preset--color--paper); }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--10);
  min-height: var(--tap);
  min-width: var(--tap);
  padding-inline: var(--wp--preset--spacing--40);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-decoration: none;
  cursor: pointer;
}
.button--primary { background: var(--wp--preset--color--accent-ink); color: var(--wp--preset--color--surface); }
.button--primary:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); }
.button--secondary { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--line); }
.button--secondary:hover { border-color: var(--wp--preset--color--ink-3); color: var(--wp--preset--color--ink); }
.button--ghost { background: transparent; color: var(--wp--preset--color--accent-ink); }
.button--ghost:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Panel — flat surface, full hairline border, no accent rail */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--surface);
  border: var(--border-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-panel);
}

/* Chip (also used as radio pill) */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding-inline: var(--wp--preset--spacing--30);
  border: var(--border-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink-2);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.chip:hover { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink-3); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

/* Segmented group */
.segmented {
  display: inline-flex;
  gap: var(--wp--preset--spacing--10);
  padding: var(--wp--preset--spacing--10);
  border: var(--border-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--surface);
}
.segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding-inline: var(--wp--preset--spacing--30);
  border-radius: var(--radius-pill);
  color: var(--wp--preset--color--ink-2);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--font-weight-semibold);
}
.segmented__btn:hover { color: var(--wp--preset--color--ink); }
.segmented__btn[aria-pressed="true"], .segmented__btn[aria-checked="true"] {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

/* Form field */
.field { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.field__label { font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); color: var(--wp--preset--color--ink); }
.field__hint { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); }
.field__error { font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); color: var(--color-danger); }
.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border: var(--border-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-panel);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--base);
}
.field__input:hover { border-color: var(--wp--preset--color--ink-3); }
.field__input:focus-visible { border-color: var(--wp--preset--color--accent); border-radius: var(--radius-panel); }
.field__input[aria-invalid="true"] { border-color: var(--color-danger); }
textarea.field__input { min-height: calc(var(--tap) * 3); resize: vertical; }

/* Range slider */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: var(--tap);
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: var(--range-track);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--line);
}
.range::-moz-range-track {
  height: var(--range-track);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--line);
}
.range::-moz-range-progress {
  height: var(--range-track);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--accent);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--range-thumb);
  height: var(--range-thumb);
  margin-top: calc((var(--range-track) - var(--range-thumb)) / 2);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--surface);
  border: var(--focus-width) solid var(--wp--preset--color--accent-ink);
  box-shadow: var(--shadow-1);
}
.range::-moz-range-thumb {
  width: var(--range-thumb);
  height: var(--range-thumb);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--surface);
  border: var(--focus-width) solid var(--wp--preset--color--accent-ink);
  box-shadow: var(--shadow-1);
}

/* The big round control */
.dial {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--dial-size);
  aspect-ratio: 1;
  margin-inline: auto;
}
.dial__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dial__track { fill: none; stroke: var(--wp--preset--color--line); stroke-width: var(--dial-stroke); stroke-linecap: round; }
.dial__fill { fill: none; stroke: var(--wp--preset--color--accent); stroke-width: var(--dial-stroke); stroke-linecap: round; }
.dial__button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--10);
  width: 76%;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  box-shadow: var(--shadow-2);
  text-align: center;
}
.dial__button:hover { border-color: var(--wp--preset--color--ink-3); }
.dial__button:focus-visible { border-radius: var(--radius-pill); }
.dial__value {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--display);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-tight);
}
.dial__label {
  max-width: 80%;
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}
.dial__sub { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); font-variant-numeric: tabular-nums; }
.dial[data-state="running"] .dial__button { border-color: var(--wp--preset--color--accent); }

/* Wide content wrapper */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Ad slot — always reserves its height */
.ad {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
}
.ad__label {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  max-width: none;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--wp--preset--color--ink-3);
}
.ad__label::after { content: ""; flex: 1; height: var(--border-width); background: var(--wp--preset--color--line); }
.ad-slot {
  display: block;
  min-height: var(--ad-height);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--wp--preset--color--line) var(--ad-tint), transparent);
}
.ad-anchor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-anchor);
  min-height: calc(var(--ad-anchor-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--wp--preset--color--paper);
  border-top: var(--border-width) solid var(--wp--preset--color--line);
}
body.has-ad-anchor { padding-bottom: calc(var(--ad-anchor-h) + env(safe-area-inset-bottom)); }

/* ——— Site header ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: calc(var(--header-h) + env(safe-area-inset-top) + var(--border-width));
  padding-top: env(safe-area-inset-top);
  background: var(--wp--preset--color--paper);
  border-bottom: var(--border-width) solid transparent;
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  height: var(--header-h);
}
/* Compact = visual only: the header box never changes height, so nothing below it moves. */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--wp--preset--color--surface) var(--header-alpha), transparent);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border-bottom-color: var(--wp--preset--color--line);
  box-shadow: var(--shadow-1);
  transform: translateY(calc(var(--header-h-compact) - var(--header-h)));
}
.site-header.is-scrolled .site-header__bar { padding-top: calc(var(--header-h) - var(--header-h-compact)); }
.site-header.is-scrolled.is-hidden { transform: translateY(-100%); box-shadow: none; }
.site-header[data-menu="open"] {
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--wp--preset--color--paper);
}
.site-header[data-menu="open"] .site-header__bar { padding-top: 0; }
.read-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--border-width));
  height: var(--progress-h);
  transform-origin: left center;
  transform: scaleX(var(--read, 0));
  background: var(--wp--preset--color--accent);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--font-weight-display);
  font-size: var(--wp--preset--font-size--lg);
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--wp--preset--color--ink); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  min-height: var(--tap);
  min-width: var(--tap);
  padding-inline: var(--wp--preset--spacing--30);
  border: var(--border-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--surface);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--font-weight-semibold);
  color: var(--wp--preset--color--ink);
}
.menu-toggle__icon { width: var(--icon); height: var(--icon); }
.menu-toggle__icon line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open,
.menu-toggle[aria-expanded="false"] .menu-toggle__close { display: none; }
html:not(.js) .menu-toggle { display: none; }

/* Mobile: panel closed by default; JS opens it. Without JS it shows inline. */
.site-nav { display: none; }
html:not(.js) .site-nav { display: block; padding-bottom: var(--wp--preset--spacing--30); }
.site-header[data-menu="open"] .site-nav {
  display: block;
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0 0;
  z-index: var(--z-menu);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--wp--preset--color--paper);
  border-top: var(--border-width) solid var(--wp--preset--color--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.site-nav__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50);
  padding-block: var(--wp--preset--spacing--40);
}
.nav__list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); list-style: none; }
.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--wp--preset--spacing--30);
  border-radius: var(--radius-pill);
  color: var(--wp--preset--color--ink-2);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.nav__link:hover { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); }
.nav__link[aria-current="page"] { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); box-shadow: inset 0 0 0 var(--border-width) var(--wp--preset--color--line); }
.theme-toggle { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); align-items: flex-start; }

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .site-nav, html:not(.js) .site-nav, .site-header[data-menu="open"] .site-nav { display: contents; }
  .site-nav__inner { display: contents; }
  .site-header__bar { justify-content: flex-start; }
  .site-header__bar > .wordmark { margin-inline-end: auto; }
  .nav__list { flex-direction: row; gap: var(--wp--preset--spacing--10); }
  .nav__link { font-size: var(--wp--preset--font-size--sm); }
  .theme-toggle .label { display: none; }
}

/* ——— Site footer ——— */
.site-footer {
  border-top: var(--border-width) solid var(--wp--preset--color--line);
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: max(var(--wp--preset--spacing--50), env(safe-area-inset-bottom));
  color: var(--wp--preset--color--ink-2);
  font-size: var(--wp--preset--font-size--sm);
}
.site-footer__inner { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); }
.site-footer__intro { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.site-footer__safety { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--sm); }
.site-footer__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.footer-group { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.footer-group__title {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--wp--preset--color--ink-3);
}
.footer-group__list { display: flex; flex-direction: column; list-style: none; }
.footer-group__list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--wp--preset--color--ink-2);
  text-decoration: none;
}
.footer-group__list a:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.footer-group__list a[aria-current="page"] { color: var(--wp--preset--color--ink); }
.site-footer__legal { padding-top: var(--wp--preset--spacing--40); border-top: var(--border-width) solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink-3); }

@media (min-width: 768px) {
  .site-footer__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--wp--preset--spacing--60); }
  .site-footer__legal { grid-column: 1 / -1; }
}


@media (prefers-reduced-motion: no-preference) {
  .button, .chip, .segmented__btn, .nav__link, .menu-toggle, .field__input, .dial__button {
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .skip-link { transition: transform var(--dur) var(--ease); }
}


/* ===== Page scaffolding ===== */
main { display: flex; flex-direction: column; gap: var(--section-space); padding-bottom: var(--section-space); }
main:focus { outline: none; }
.section-head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.lede { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--lg); line-height: var(--line-height-snug); }
.muted { color: var(--wp--preset--color--ink-2); }
.page-head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--30); }

/* Breadcrumb */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--wp--preset--spacing--10); list-style: none; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); }
.breadcrumb li { display: flex; align-items: center; gap: var(--wp--preset--spacing--10); max-width: none; }
.breadcrumb li + li::before { content: "\203A"; color: var(--wp--preset--color--ink-3); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--wp--preset--color--ink-2); }
.breadcrumb a:hover { color: var(--wp--preset--color--ink); }
.breadcrumb [aria-current="page"] { color: var(--wp--preset--color--ink-2); }

/* Prose — spacing via gap, never per-element margins */
.prose { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); max-width: var(--measure); }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding-left: var(--wp--preset--spacing--40); }
.prose h3 { padding-top: var(--wp--preset--spacing--20); }
.prose strong { font-weight: var(--font-weight-semibold); }
.steps { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); list-style: none; counter-reset: step; max-width: var(--measure); }
.steps li { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr); gap: var(--wp--preset--spacing--30); align-items: start; counter-increment: step; max-width: none; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border: var(--border-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--ink);
}
.steps strong { display: block; color: var(--wp--preset--color--ink); }

/* Tables */
.table { width: 100%; min-width: 34rem; font-size: var(--wp--preset--font-size--sm); }
.table th, .table td { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); text-align: left; vertical-align: top; border-bottom: var(--border-width) solid var(--wp--preset--color--line); }
.table th { font-weight: var(--font-weight-semibold); color: var(--wp--preset--color--ink); }
.table td { color: var(--wp--preset--color--ink-2); }
.table td:first-child { color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroll-x { border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); background: var(--wp--preset--color--surface); }

/* Link list (related guides etc.) */
.link-list { display: flex; flex-direction: column; list-style: none; border-top: var(--border-width) solid var(--wp--preset--color--line); max-width: var(--wp--style--global--content-size); }
.link-list li { max-width: none; border-bottom: var(--border-width) solid var(--wp--preset--color--line); }
.link-list a { display: flex; flex-direction: column; justify-content: center; gap: var(--wp--preset--spacing--10); min-height: var(--tap); padding-block: var(--wp--preset--spacing--30); text-decoration: none; color: var(--wp--preset--color--ink); font-weight: var(--font-weight-semibold); }
.link-list a:hover .link-list__title { text-decoration: underline; }
.link-list__meta { font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-regular); color: var(--wp--preset--color--ink-2); }

/* Notice + safety */
.notice { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); background: var(--wp--preset--color--surface); color: var(--color-warn); font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); max-width: var(--measure); }
.notice[hidden] { display: none; }
.safety { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); text-align: center; max-width: 44ch; margin-inline: auto; }
.status { min-height: calc(var(--wp--preset--font-size--sm) * 1.6); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); text-align: center; font-variant-numeric: tabular-nums; }

/* JS / no-JS swaps */
html:not(.js) [data-requires-js] { display: none !important; }
html.js [data-no-js] { display: none !important; }
[hidden] { display: none !important; }

/* ===== Tool layout ===== */
.tool { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--30); }
.tool__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.tool__head p { color: var(--wp--preset--color--ink-2); }
.tool__body { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--40); }
.tool__stage { display: grid; place-items: center; width: 100%; min-height: var(--dial-size); }
.tool__stage > * { grid-area: 1 / 1; }
.stage-panel { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); width: 100%; max-width: 28rem; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--surface); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-1); }
.stage-panel h2 { font-size: var(--wp--preset--font-size--lg); }
.stage-panel .cluster .button { flex: 1 1 auto; }
.checklist { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); list-style: none; counter-reset: check; }
.checklist li { display: grid; grid-template-columns: var(--wp--preset--spacing--50) minmax(0, 1fr); gap: var(--wp--preset--spacing--20); align-items: baseline; counter-increment: check; color: var(--wp--preset--color--ink); }
.checklist li::before { content: counter(check); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; color: var(--wp--preset--color--accent-ink); }
.manual { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); width: 100%; max-width: 32rem; padding: var(--wp--preset--spacing--40); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); background: var(--wp--preset--color--surface); }
.manual ol { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding-left: var(--wp--preset--spacing--40); }
.segmented { flex-wrap: wrap; justify-content: center; max-width: 100%; }

/* Gauge parts */
.dial__needle { fill: var(--wp--preset--color--accent); }
.dial__fill { transition: none; }
.dial[data-state="idle"] .dial__fill, .dial[data-state="idle"] .dial__needle { opacity: 0; }
.dial__icon { width: var(--icon); height: var(--icon); fill: currentColor; }
.dial__unit { font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); color: var(--wp--preset--color--ink-3); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.dial__button[aria-pressed="true"] { border-color: var(--wp--preset--color--accent); }
.dial--compact { --dial-size: clamp(13rem, 56vw, 16rem); }

/* Controls (tone generator) */
.controls { display: grid; gap: var(--wp--preset--spacing--40); width: 100%; max-width: var(--wp--style--global--content-size); }
.control { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.control__row { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); }
.control__value { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); color: var(--wp--preset--color--ink); }
.control__inline { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.control__inline .range { flex: 1 1 auto; min-width: 0; }
.field__input--num { width: 7.5rem; flex: 0 0 auto; font-variant-numeric: tabular-nums; text-align: right; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--10); }
@media (min-width: 480px) { .presets { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.field__input--select { appearance: auto; }

/* Stereo test */
.sides { display: grid; grid-template-columns: repeat(2, var(--side-size)); justify-content: center; gap: var(--wp--preset--spacing--40); }
.side {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--10);
  width: var(--side-size); aspect-ratio: 1;
  border: var(--focus-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  box-shadow: var(--shadow-1);
}
.side__letter { font-family: var(--wp--preset--font-family--display); font-weight: var(--font-weight-display); font-size: var(--wp--preset--font-size--display); line-height: var(--line-height-tight); }
.side__label { font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); }
.side:hover { border-color: var(--wp--preset--color--ink-3); }
.side[data-active="true"] { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--wp--preset--spacing--20); }
.toggle { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--tap); padding-inline: var(--wp--preset--spacing--30); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-pill); background: var(--wp--preset--color--surface); font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); }
.toggle input { width: var(--icon); height: var(--icon); accent-color: var(--wp--preset--color--accent-ink); }
.toggle:has(input:disabled) { opacity: 0.5; }
.select-inline { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); }
.select-inline .field__input { width: auto; min-width: 8rem; }

/* Surround room map */
.room { width: var(--room-size); max-width: 100%; height: auto; }
.room__walls { fill: var(--wp--preset--color--surface); stroke: var(--wp--preset--color--line); stroke-width: 2; }
.room__listener { fill: var(--wp--preset--color--ink-3); }
.room__spk { fill: var(--wp--preset--color--paper); stroke: var(--wp--preset--color--ink-3); stroke-width: 2; }
.room__tag { fill: var(--wp--preset--color--ink-2); font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: var(--font-weight-semibold); text-anchor: middle; dominant-baseline: central; }
.room [data-active="true"] .room__spk { fill: var(--wp--preset--color--accent); stroke: var(--wp--preset--color--accent); }
.room [data-active="true"] .room__tag { fill: var(--wp--preset--color--on-accent); }
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--10); width: 100%; max-width: 32rem; }
@media (min-width: 768px) { .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.channels .button[data-active="true"] { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--10); }
.check { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--tap); font-size: var(--wp--preset--font-size--sm); }
.check input { width: var(--icon); height: var(--icon); accent-color: var(--wp--preset--color--accent-ink); }
.result { font-weight: var(--font-weight-semibold); }
.result[data-tone="ok"] { color: var(--color-ok); }
.result[data-tone="warn"] { color: var(--color-warn); }
.result[data-tone="danger"] { color: var(--color-danger); }

/* ===== FAQ ===== */
.faq { display: flex; flex-direction: column; border-top: var(--border-width) solid var(--wp--preset--color--line); max-width: var(--wp--style--global--content-size); }
.faq__item { border-bottom: var(--border-width) solid var(--wp--preset--color--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); min-height: var(--tap); padding-block: var(--wp--preset--spacing--30); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: 0 0 auto; font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--ink-3); }
.faq__item[open] summary::after { content: "\2013"; }
.faq__item summary:focus-visible { border-radius: var(--radius-panel); }
.faq__q { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); }
.faq__a { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--40); color: var(--wp--preset--color--ink-2); }
@media (min-width: 1024px) {
  .faq--auto-open .faq__item::details-content { content-visibility: visible; display: block; block-size: auto; }
}
@supports selector(::details-content) {
  @media (min-width: 1024px) {
    .faq--auto-open .faq__item summary { cursor: default; pointer-events: none; }
    .faq--auto-open .faq__item summary::after { content: none; }
    .toc summary { cursor: default; pointer-events: none; }
    .toc summary::after { content: none; }
  }
}

/* ===== Blog index / category ===== */
.guide-group { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.guide-group h2 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.guide-group h2 a:hover { text-decoration: underline; }
.entries { display: flex; flex-direction: column; list-style: none; border-top: var(--border-width) solid var(--wp--preset--color--line); }
.entry { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding-block: var(--wp--preset--spacing--40); border-bottom: var(--border-width) solid var(--wp--preset--color--line); max-width: none; }
.entry__title { font-size: var(--wp--preset--font-size--lg); }
.entry__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.entry__title a:hover { text-decoration: underline; }
.entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; padding: 0 var(--wp--preset--spacing--20); border-radius: var(--radius-pill); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); }
.entry--pillar .entry__title { font-size: var(--wp--preset--font-size--xl); }
.entry--pillar { padding-block: var(--wp--preset--spacing--50); }
.grid-2 { display: grid; gap: var(--wp--preset--spacing--50); }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--60); } }

/* ===== Post template ===== */
.post { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--30); }
.post__head, .post__body, .post__foot { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); min-width: 0; }
.post__body { gap: var(--wp--preset--spacing--60); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); }
.post__meta a.label { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--wp--preset--color--accent-ink); text-decoration: none; }
.post__meta a.label:hover { text-decoration: underline; }
.post-section { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); max-width: var(--measure); }
.takeaways { max-width: var(--measure); }
.takeaways ul { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding-left: var(--wp--preset--spacing--40); }
.callout { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); align-items: flex-start; max-width: var(--measure); padding: var(--wp--preset--spacing--40); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); background: var(--wp--preset--color--surface); }
@media (min-width: 768px) { .callout { flex-direction: row; align-items: center; justify-content: space-between; } }
.byline { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); max-width: var(--measure); padding-top: var(--wp--preset--spacing--30); border-top: var(--border-width) solid var(--wp--preset--color--line); }
.toc { max-width: var(--measure); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); background: var(--wp--preset--color--surface); }
.toc summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding-inline: var(--wp--preset--spacing--30); cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; color: var(--wp--preset--color--ink-3); font-size: var(--wp--preset--font-size--lg); }
.toc[open] summary::after { content: "\2013"; }
.toc summary:focus-visible { border-radius: var(--radius-panel); }
.toc ol { display: flex; flex-direction: column; list-style: none; padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20); }
.toc a { display: flex; align-items: center; min-height: var(--tap); padding-inline: var(--wp--preset--spacing--20); border-radius: var(--radius-panel); color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--sm); text-decoration: none; line-height: var(--line-height-snug); }
.toc a:hover { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--paper); }
.toc a[aria-current="location"] { color: var(--wp--preset--color--ink); font-weight: var(--font-weight-semibold); }
.pager { display: grid; gap: var(--wp--preset--spacing--20); max-width: var(--measure); }
@media (min-width: 768px) { .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pager a { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); min-height: var(--tap); padding: var(--wp--preset--spacing--30); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); text-decoration: none; font-weight: var(--font-weight-semibold); }
.pager a:hover { border-color: var(--wp--preset--color--ink-3); }
.pager__next { text-align: right; }
@media (min-width: 768px) { .pager__next { grid-column: 2; } }
@media (min-width: 1024px) {
  .post { grid-template-columns: minmax(0, 1fr) var(--toc-width); column-gap: var(--wp--preset--spacing--60); align-items: start; }
  .post__head { grid-column: 1; grid-row: 1; }
  .post__body { grid-column: 1; grid-row: 2; }
  .post__foot { grid-column: 1; grid-row: 3; }
  .toc { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h-compact) + var(--wp--preset--spacing--40)); max-height: calc(100dvh - var(--header-h-compact) - var(--wp--preset--spacing--50)); overflow-y: auto; }
  .toc::details-content { content-visibility: visible; display: block; block-size: auto; }
}

/* ===== Forms (contact) ===== */
.form { display: grid; gap: var(--wp--preset--spacing--40); max-width: var(--wp--style--global--content-size); }
.form__success { max-width: var(--wp--style--global--content-size); }
.form__success h2 { color: var(--color-ok); font-size: var(--wp--preset--font-size--lg); }
.req { color: var(--color-danger); }

/* 404 */
.tool-links { display: grid; gap: var(--wp--preset--spacing--20); grid-template-columns: minmax(0, 1fr); max-width: var(--wp--style--global--content-size); list-style: none; }
@media (min-width: 768px) { .tool-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-links a { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); min-height: var(--tap); padding: var(--wp--preset--spacing--40); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); text-decoration: none; font-family: var(--wp--preset--font-family--display); font-weight: var(--font-weight-display); font-size: var(--wp--preset--font-size--lg); }
.tool-links a span { font-family: var(--wp--preset--font-family--body); font-weight: var(--font-weight-regular); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.tool-links a:hover { border-color: var(--wp--preset--color--ink-3); }

/* ===== Back to top ===== */
.to-top {
  position: fixed;
  right: max(var(--wp--preset--spacing--40), env(safe-area-inset-right));
  bottom: calc(max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom)) + var(--lift, 0px));
  z-index: var(--z-to-top);
  display: grid; place-items: center;
  width: var(--to-top-size); height: var(--to-top-size);
  border: var(--border-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.to-top__ring circle { fill: none; stroke-width: var(--ring-stroke); }
.to-top__track { stroke: transparent; }
.to-top__progress { stroke: var(--wp--preset--color--accent); stroke-dasharray: 100; stroke-dashoffset: var(--offset, 100); stroke-linecap: round; }
.to-top__icon { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* ===== Consent banner ===== */
.consent {
  position: fixed;
  left: max(var(--wp--preset--spacing--30), env(safe-area-inset-left));
  right: max(var(--wp--preset--spacing--30), env(safe-area-inset-right));
  bottom: max(var(--wp--preset--spacing--30), env(safe-area-inset-bottom));
  z-index: var(--z-consent);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  max-width: var(--overlay-max);
  margin-inline: auto;
  padding: var(--wp--preset--spacing--30);
  border: var(--border-width) solid var(--wp--preset--color--line);
  border-radius: var(--radius-panel);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--shadow-2);
  font-size: var(--wp--preset--font-size--sm);
}
.consent p { flex: 1 1 16rem; color: var(--wp--preset--color--ink-2); }
.consent .cluster { flex: 0 0 auto; }
.consent .button { min-height: var(--tap); padding-inline: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--sm); }
.consent[data-position="away"] { visibility: hidden; }

/* ===== Motion (opt-in only) ===== */
@media (prefers-reduced-motion: no-preference) {
  .site-header { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .site-header__bar { transition: padding var(--dur) var(--ease); }
  .to-top { transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .side, .channels .button, .room__spk { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), fill var(--dur) var(--ease), color var(--dur) var(--ease); }
  .dial[data-state="running"] .dial__button { animation: dial-pulse 2.4s var(--ease) infinite; }
  .side[data-active="true"] { animation: dial-pulse 1.2s var(--ease) infinite; }
}
@keyframes dial-pulse {
  0%, 100% { box-shadow: var(--shadow-2); }
  50% { box-shadow: var(--shadow-1); }
}

/* Footer legal row + link-style button */
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); }
.link-button { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--sm); text-decoration: underline; text-underline-offset: 0.2em; }
.link-button:hover { color: var(--wp--preset--color--ink); }
.text-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--font-weight-semibold); }

/* ===== Content sections ===== */
.band { background: var(--wp--preset--color--surface); border-block: var(--border-width) solid var(--wp--preset--color--line); padding-block: var(--section-space); }
.band > .container { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.band .scroll-x { background: var(--wp--preset--color--paper); }
.two-col { display: grid; gap: var(--wp--preset--spacing--50); }
@media (min-width: 768px) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--60); } }
.ticks { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); list-style: none; }
.ticks li { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); gap: var(--wp--preset--spacing--20); align-items: baseline; color: var(--wp--preset--color--ink-2); }
.ticks li::before { content: "\2713"; font-weight: var(--font-weight-semibold); color: var(--color-ok); }
.ticks--no li::before { content: "\00d7"; color: var(--color-danger); }
.cat-grid { display: grid; gap: var(--wp--preset--spacing--50); list-style: none; }
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--60); } }
@media (min-width: 1280px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--50); } }
.cat-grid__item { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding-top: var(--wp--preset--spacing--30); border-top: var(--focus-width) solid var(--wp--preset--color--ink); max-width: none; }
.cat-grid__item h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.cat-grid__item h3 a:hover { text-decoration: underline; }
.cat-grid__count { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); font-variant-numeric: tabular-nums; }
.tool-links--wide { max-width: none; }
.band .tool-links a { background: var(--wp--preset--color--paper); }
@media (min-width: 1280px) { .tool-links--wide { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }

/* ===== Theme toggle: quiet icon segmented control ===== */
.theme-toggle .segmented { gap: 0; padding: 0; background: transparent; border-color: var(--wp--preset--color--line); }
.theme-toggle .segmented__btn { gap: var(--wp--preset--spacing--10); color: var(--wp--preset--color--ink-3); }
.theme-toggle .segmented__btn:hover { color: var(--wp--preset--color--ink); }
.theme-toggle .segmented__btn[aria-pressed="true"] { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); box-shadow: inset 0 0 0 var(--border-width) var(--wp--preset--color--ink-3); }
.theme-toggle__icon { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
  .theme-toggle .segmented__btn { padding-inline: 0; }
  .theme-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__list { gap: var(--wp--preset--spacing--20); }
  .site-header__bar { gap: var(--wp--preset--spacing--40); }
}

.entries--grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .entries--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--60); } }

/* Small text reads as secondary through colour, not size */
.table { font-size: var(--wp--preset--font-size--base); }
.link-list__meta, .field__hint, .safety, .status { line-height: var(--line-height-body); }
@media (min-width: 1024px) { .nav__link { font-size: var(--wp--preset--font-size--base); } }

/* Steps laid out across the full width */
.steps--row { max-width: none; }
.steps--row li { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--20); padding-top: var(--wp--preset--spacing--30); border-top: var(--border-width) solid var(--wp--preset--color--line); }
.steps--row li::before { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); }
.steps--row strong { font-size: var(--wp--preset--font-size--lg); font-family: var(--wp--preset--font-family--display); line-height: var(--line-height-snug); padding-bottom: var(--wp--preset--spacing--10); }
.steps--row li > div { color: var(--wp--preset--color--ink-2); }
@media (min-width: 768px) { .steps--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); } }
.chip { text-decoration: none; }

/* ===== Design pass: fuller sections ===== */
main > section > h2, main > section > .section-head > h2, main > section > .container > h2, main > section > .container > .section-head > h2, .guide-group > h2 { font-size: var(--wp--preset--font-size--xxl); line-height: var(--line-height-tight); letter-spacing: -0.01em; }
.section-head { gap: var(--wp--preset--spacing--30); }
.section-head .muted { font-size: var(--wp--preset--font-size--lg); line-height: var(--line-height-snug); }

/* Tick lists: block flow so inline links stay inline */
.ticks li { display: block; position: relative; padding-left: calc(var(--icon) + var(--wp--preset--spacing--20)); max-width: none; }
.ticks li::before { position: absolute; left: 0; top: 0; }
.two-col > .stack { padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--surface); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); }
.band .two-col > .stack { background: var(--wp--preset--color--paper); }
.two-col { gap: var(--wp--preset--spacing--40); }
@media (min-width: 768px) { .two-col { column-gap: var(--wp--preset--spacing--40); } }

/* Heading left, content right */
.split { display: grid; gap: var(--wp--preset--spacing--40); align-items: start; }
.split .faq { max-width: none; background: var(--wp--preset--color--surface); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); padding-inline: var(--wp--preset--spacing--40); }
.split .faq__item:last-child { border-bottom: 0; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--wp--preset--spacing--60); } }

/* Category grid as full panels */
.cat-grid { gap: var(--wp--preset--spacing--30); }
@media (min-width: 768px) { .cat-grid { column-gap: var(--wp--preset--spacing--30); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--30); } }
.cat-grid__item { gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); background: var(--wp--preset--color--surface); }
.cat-grid__item .text-link { margin-top: auto; align-items: flex-start; }
.cat-grid__count { order: -1; text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: var(--font-weight-semibold); }

/* Lists and tables on the plain ground sit on surface */
.entries { background: var(--wp--preset--color--surface); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); padding-inline: var(--wp--preset--spacing--40); }
.entries .entry:last-child { border-bottom: 0; }
@media (min-width: 768px) { .entries--grid .entry:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
.link-list { max-width: none; background: var(--wp--preset--color--surface); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); padding-inline: var(--wp--preset--spacing--40); }
.link-list li:last-child { border-bottom: 0; }
.faq { background: var(--wp--preset--color--surface); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); padding-inline: var(--wp--preset--spacing--40); }
.faq .faq__item:last-child { border-bottom: 0; }
.steps:not(.steps--row) { max-width: none; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--surface); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); }
@media (min-width: 1024px) { .steps:not(.steps--row) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); } }

/* Footer on its own ground */
.site-footer { background: var(--wp--preset--color--surface); }
.site-footer .wordmark { font-size: var(--wp--preset--font-size--xl); }
.footer-group__list a { font-size: var(--wp--preset--font-size--base); }
main { padding-bottom: 0; }
main > :last-child:not(.band) { padding-bottom: var(--section-space); }

/* ===== Polish: centred tool head, calmer ad slots, quieter section intros ===== */
.tool__head { align-items: center; text-align: center; }
.tool__head p { font-size: var(--wp--preset--font-size--lg); }
.tool .breadcrumb ol { justify-content: center; }
.tool { gap: var(--wp--preset--spacing--50); }
.section-head .muted { font-size: var(--wp--preset--font-size--base); line-height: var(--line-height-body); }
.ad { gap: 0; }
.ad__label { display: none; }
.ad-slot { position: relative; background: transparent; border: var(--border-width) dashed var(--wp--preset--color--line); }
.ad-slot::after { content: "Advertisement"; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--wp--preset--color--ink-3); }
.ad-slot[data-ad-state="ready"]::after { content: none; }

/* Logo mark */
.wordmark { gap: var(--wp--preset--spacing--20); }
.wordmark__mark { width: var(--logo-size); height: var(--logo-size); flex: 0 0 auto; }
.wordmark__arc { fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 2.5; stroke-linecap: round; }
.wordmark__drop { fill: var(--wp--preset--color--ink); }

.wordmark__text { letter-spacing: -0.025em; font-size: var(--wp--preset--font-size--xl); line-height: 1; }
.wordmark__accent { color: var(--wp--preset--color--accent); }

/* Logo lockup: Bricolage Grotesque 700, lowercase, -2.5% tracking, fixed brand colours */
.wordmark__text { font-family: var(--wp--preset--font-family--display); font-weight: var(--font-weight-display); text-transform: lowercase; letter-spacing: -0.025em; color: var(--logo-ink); }
.wordmark__accent { color: var(--logo-blue); }
.wordmark__arc { stroke: var(--logo-blue); }
.wordmark__drop { fill: var(--logo-ink); }

/* Header never wraps: compact nav from 1024px, roomier from 1280px */
.nav__link, .wordmark, .menu-toggle { white-space: nowrap; }
.theme-toggle .segmented { flex-wrap: nowrap; }
@media (min-width: 1024px) {
  .site-header__bar > nav, .site-header__bar .theme-toggle, .site-header__bar > .wordmark { flex: 0 0 auto; }
  .site-header__bar { gap: var(--wp--preset--spacing--30); }
  .nav__list { flex-wrap: nowrap; gap: 0; }
  .nav__link { font-size: var(--wp--preset--font-size--sm); padding-inline: var(--wp--preset--spacing--20); }
}
@media (min-width: 1280px) {
  .site-header__bar { gap: var(--wp--preset--spacing--40); }
  .nav__list { gap: var(--wp--preset--spacing--10); }
  .nav__link { font-size: var(--wp--preset--font-size--base); padding-inline: var(--wp--preset--spacing--30); }
}

/* ===== Header nav: quiet text links with an accent underline for the current page ===== */
@media (min-width: 1024px) {
  .site-header__bar { justify-content: space-between; gap: var(--wp--preset--spacing--40); }
  .site-header__bar > .wordmark { margin-inline-end: 0; }
  .wordmark__text { font-size: var(--wp--preset--font-size--lg); }
  .wordmark__mark { width: var(--logo-size-sm); height: var(--logo-size-sm); }
  .nav__list { gap: var(--wp--preset--spacing--40); }
  .nav__link {
    position: relative;
    padding-inline: 0;
    border-radius: 0;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    color: var(--wp--preset--color--ink-2);
    background: transparent;
  }
  .nav__link:hover { background: transparent; color: var(--wp--preset--color--ink); }
  .nav__link[aria-current="page"] { background: transparent; box-shadow: none; color: var(--wp--preset--color--ink); }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: var(--wp--preset--spacing--10);
    height: var(--nav-underline);
    border-radius: var(--radius-pill);
    background: var(--logo-blue);
    transform: scaleX(0);
    transform-origin: left center;
  }
  .nav__link:hover::after { transform: scaleX(0.4); }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link:focus-visible { border-radius: var(--radius-panel); }
  .theme-toggle .segmented { border-color: transparent; background: color-mix(in srgb, var(--wp--preset--color--line) var(--toggle-tint), transparent); padding: var(--toggle-pad); }
  .theme-toggle .segmented__btn { min-width: var(--toggle-btn); min-height: var(--toggle-btn); }
  .theme-toggle .segmented__btn[aria-pressed="true"] { background: var(--wp--preset--color--surface); box-shadow: var(--shadow-1); }
  .theme-toggle__icon { width: var(--toggle-icon); height: var(--toggle-icon); }
}
@media (min-width: 1280px) {
  .nav__list { gap: var(--wp--preset--spacing--50); }
  .nav__link { font-size: var(--wp--preset--font-size--sm); padding-inline: 0; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .nav__link::after { transition: transform var(--dur) var(--ease); }
}

/* ===== Mobile off-canvas drawer (below 1024px). Rendered closed; animates only after first use. ===== */
html.js .site-nav,
html.js .site-header[data-menu="open"] .site-nav {
  display: block;
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--drawer-width);
  z-index: var(--z-menu);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--wp--preset--color--surface);
  border-top: 0;
  border-left: var(--border-width) solid var(--wp--preset--color--line);
  box-shadow: var(--shadow-2);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(100%);
  visibility: hidden;
}
html.js .site-header[data-menu="open"] .site-nav { transform: none; visibility: visible; }
html.js .site-nav .site-nav__inner { padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); padding-inline: var(--wp--preset--spacing--40); gap: var(--wp--preset--spacing--40); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h-compact); border-bottom: var(--border-width) solid var(--wp--preset--color--line); }
.drawer__close { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); color: var(--wp--preset--color--ink); }
.drawer__close:hover { background: var(--wp--preset--color--paper); }
html.js .site-nav .nav__link { border-radius: var(--radius-panel); }
html.js .site-nav .nav__link[aria-current="page"] { background: var(--wp--preset--color--paper); }
/* Backdrop */
.site-header::before { content: ""; position: fixed; inset: 0; background: var(--scrim); opacity: 0; visibility: hidden; }
.site-header[data-menu="open"]::before { opacity: 1; visibility: visible; }
.site-header__bar { position: relative; }
/* While closing, the header stays un-transformed so the fixed drawer keeps its place */
.site-header[data-menu="closing"] { transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--wp--preset--color--paper); }
.site-header[data-menu="closing"] .site-header__bar { padding-top: 0; }
.site-header[data-menu="closing"] .site-nav { visibility: visible; }

@media (min-width: 1024px) {
  html.js .site-nav, html.js .site-header[data-menu="open"] .site-nav, html.js .site-header[data-menu="closing"] .site-nav { display: contents; visibility: visible; transform: none; }
  html.js .site-nav .site-nav__inner { display: contents; }
  html.js .site-nav .nav__link { border-radius: 0; }
  html.js .site-nav .nav__link[aria-current="page"] { background: transparent; }
  .drawer__head { display: none; }
  .site-header::before { content: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .site-header.is-ready .site-nav { transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease); }
  .site-header.is-ready::before { transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
}

/* More air between the sticky header and the first block of every page */
.tool, .page-head, .post { padding-top: var(--wp--preset--spacing--50); }
@media (min-width: 768px) { .tool, .page-head, .post { padding-top: var(--wp--preset--spacing--60); } }
@media (min-width: 1024px) { .tool, .page-head, .post { padding-top: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40)); } }

/* ===== Guide cards ===== */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); list-style: none; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); } }
.card { position: relative; display: flex; flex-direction: column; max-width: none; overflow: hidden; background: var(--wp--preset--color--surface); border: var(--border-width) solid var(--wp--preset--color--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-1); }
.card:hover, .card:focus-within { border-color: var(--wp--preset--color--ink-3); box-shadow: var(--shadow-2); }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20); max-width: none; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); background: var(--wp--preset--color--paper); border-bottom: var(--border-width) solid var(--wp--preset--color--line); }
.card__top .label { color: var(--wp--preset--color--accent-ink); }
.card__mins { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); font-variant-numeric: tabular-nums; }
.card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--20); flex: 1 1 auto; padding: var(--wp--preset--spacing--40); }
.card__title { font-size: var(--wp--preset--font-size--lg); line-height: var(--line-height-snug); }
.card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-panel); }
.card__title a:focus-visible { outline: none; }
.card__title a:focus-visible::after { outline: var(--focus-width) solid var(--wp--preset--color--accent); outline-offset: calc(-1 * var(--focus-width)); }
.card__more { margin-top: auto; padding-top: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); color: var(--wp--preset--color--accent-ink); }
.card__more::after { content: " \2192"; }
.guide-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); }
.guide-group__head h2 { font-size: var(--wp--preset--font-size--xxl); }

/* ===== Single guide: modern head, sidebar with contents + share ===== */
.post__head h1 { max-width: 18ch; }
.post__head .lede { max-width: 52ch; }
.post__meta { padding-block: var(--wp--preset--spacing--20); border-block: var(--border-width) solid var(--wp--preset--color--line); }
.post__side { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); min-width: 0; }
.toc ol { counter-reset: toc; }
.toc li { counter-increment: toc; max-width: none; }
.toc a { gap: var(--wp--preset--spacing--20); align-items: baseline; padding-block: var(--wp--preset--spacing--20); min-height: var(--tap); }
.toc a::before { content: counter(toc, decimal-leading-zero); flex: 0 0 auto; font-size: var(--wp--preset--font-size--sm); font-variant-numeric: tabular-nums; color: var(--wp--preset--color--ink-3); }
.toc a[aria-current="location"] { background: var(--wp--preset--color--paper); }
.toc a[aria-current="location"]::before { color: var(--wp--preset--color--accent-ink); }
.share { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.share__list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); list-style: none; }
.share__list .chip { text-decoration: none; }
.share__list .chip:hover { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.post-section h2 { font-size: var(--wp--preset--font-size--xxl); line-height: var(--line-height-tight); padding-top: var(--wp--preset--spacing--20); }
.post__body { font-size: var(--wp--preset--font-size--lg); }
.post__body p, .post__body li { font-size: var(--wp--preset--font-size--base); line-height: var(--line-height-body); }
@media (min-width: 1024px) {
  .post__side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h-compact) + var(--wp--preset--spacing--40)); max-height: calc(100dvh - var(--header-h-compact) - var(--wp--preset--spacing--50)); overflow-y: auto; }
  .post__side .toc { position: static; max-height: none; overflow: visible; }
  .post { grid-template-columns: minmax(0, 1fr) var(--toc-width); }
}
@media (prefers-reduced-motion: no-preference) {
  .card { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .card:hover { transform: translateY(-2px); }
}

/* Closed drawer is out of layout entirely, and the root clips sideways overflow */
html.js .site-header[data-menu="closed"] .site-nav { display: none; }
.site-header[data-menu="opening"] { transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--wp--preset--color--paper); }
.site-header[data-menu="opening"] .site-header__bar { padding-top: 0; }
@media (min-width: 1024px) {
  html.js .site-header[data-menu="closed"] .site-nav, html.js .site-header[data-menu="opening"] .site-nav { display: contents; visibility: visible; transform: none; }
}
.post__meta { max-width: none; }

/* ================= Site identity: soft violet — rounded panels, soft shadows, tool beside the headline ================= */
h1 { letter-spacing: -0.03em; }
h2, h3 { letter-spacing: -0.02em; }
.dial__button, .side, .to-top, .steps li::before, .drawer__close, .room__spk { border-radius: var(--radius-round); }
.card, .panel, .stage-panel, .manual, .callout, .cat-grid__item, .two-col > .stack, .entries, .link-list, .faq, .split .faq,
.steps:not(.steps--row), .scroll-x, .tool-links a, .pager a, .toc, .consent { box-shadow: var(--shadow-1); border-color: transparent; }
.card:hover, .card:focus-within, .tool-links a:hover, .pager a:hover { box-shadow: var(--shadow-2); border-color: transparent; }
.button--primary { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); box-shadow: var(--shadow-1); }
.button--primary:hover { background: var(--wp--preset--color--accent-ink); color: var(--wp--preset--color--on-accent); }
.badge, .card .badge { background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--surface)); color: var(--wp--preset--color--accent-ink); padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); }
.card__top { background: transparent; border-bottom: 0; padding-bottom: 0; padding-top: var(--wp--preset--spacing--40); }
.band { background: color-mix(in srgb, var(--wp--preset--color--accent) 6%, var(--wp--preset--color--surface)); border-block: 0; }
.steps li::before, .steps--row li::before { background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--surface)); border-color: transparent; color: var(--wp--preset--color--accent-ink); }
.chip[aria-checked="true"], .chip[aria-pressed="true"], .segmented__btn[aria-pressed="true"], .segmented__btn[aria-checked="true"] { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
.side[data-active="true"], .channels .button[data-active="true"] { color: var(--wp--preset--color--on-accent); }
.dial__button { border-color: transparent; }
.wordmark__text { text-transform: none; letter-spacing: -0.03em; }
.wordmark__box { fill: none; stroke: var(--logo-ink); stroke-width: 2; }
.wordmark__arc { stroke-width: 2; }
.site-footer { background: var(--wp--preset--color--surface); }
/* Header nav as soft pills */
@media (min-width: 1024px) {
  .nav__list { gap: var(--wp--preset--spacing--10); }
  .nav__link { padding-inline: var(--wp--preset--spacing--30); border-radius: var(--radius-pill); }
  .nav__link::after { content: none; }
  .nav__link:hover { background: var(--wp--preset--color--surface); }
  .nav__link[aria-current="page"] { background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--surface)); color: var(--wp--preset--color--accent-ink); }
}
@media (min-width: 1280px) { .nav__link { padding-inline: var(--wp--preset--spacing--30); } .nav__list { gap: var(--wp--preset--spacing--10); } }
/* Hero: headline left, tool in a soft panel on the right */
.tool__head { align-items: flex-start; text-align: left; }
.tool .breadcrumb ol { justify-content: flex-start; }
@media (min-width: 1024px) {
  .tool { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--wp--preset--spacing--60); align-items: center; }
  .tool > .breadcrumb { grid-column: 1 / -1; }
  .tool__head { gap: var(--wp--preset--spacing--40); }
  .tool__body { padding: var(--wp--preset--spacing--50); background: var(--wp--preset--color--surface); border-radius: var(--radius-panel); box-shadow: var(--shadow-2); }
}

/* ===== Button icons (no markup needed: chosen from each control's role) ===== */
.button::before, .button::after, .chip::before, .chip::after, .text-link::after, .dial[data-view="dial"] .dial__label::before {
  width: var(--icon); height: var(--icon); flex: 0 0 auto; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.button, .chip, .text-link { gap: var(--wp--preset--spacing--10); }
.dial[data-view="dial"] .dial__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--10); }
.dial[data-view="dial"] .dial__label::before { content: ""; --ico: var(--ico-play); }
.dial[data-state="running"] .dial__label::before { --ico: var(--ico-stop); }
.button[data-action="ready"]::before, .button[data-action="yes"]::before, .button[data-answer="yes"]::before,
.button[data-action="report"]::before, .button[data-consent-set="granted"]::before { content: ""; --ico: var(--ico-check); }
.button[data-action="no"]::before, .button[data-answer="neither"]::before, .button[data-consent-set="denied"]::before { content: ""; --ico: var(--ico-x); }
.button[data-action="back"]::before { content: ""; --ico: var(--ico-arrow-left); }
.button[data-action="again"]::before, .button[data-action="more"]::before { content: ""; --ico: var(--ico-refresh); }
.button[data-action="auto"]::before { content: ""; --ico: var(--ico-repeat); }
.button[data-action="all"]::before { content: ""; --ico: var(--ico-play); }
.button[data-action="stop"]::before { content: ""; --ico: var(--ico-stop); }
.button[data-answer="one"]::before, .channels .button::before { content: ""; --ico: var(--ico-speaker); }
.button[type="submit"]::before { content: ""; --ico: var(--ico-send); }
.chip[data-share-copy]::before { content: ""; --ico: var(--ico-link); }
.chip[data-share]::before { content: ""; --ico: var(--ico-share); }
a.button::after, .text-link::after, a.chip:not([data-share])::after { content: ""; --ico: var(--ico-arrow-right); }
.dial__button:focus-visible, .side:focus-visible, .to-top:focus-visible { border-radius: var(--radius-round, var(--radius-pill)); }
@media (prefers-reduced-motion: no-preference) {
  a.button::after, .text-link::after, a.chip::after { transition: transform var(--dur) var(--ease); }
  a.button:hover::after, .text-link:hover::after, a.chip:hover::after { transform: translateX(3px); }
}

/* Large eject badge inside the round control (idle state only) */
.dial[data-view="dial"] .dial__button::before {
  content: ""; flex: 0 0 auto; width: var(--dial-badge); height: var(--dial-badge);
  border-radius: var(--radius-round, var(--radius-pill));
  background: var(--ico-eject-badge) center / 62% no-repeat var(--wp--preset--color--accent-ink);
  box-shadow: var(--shadow-1);
}
.dial[data-state="running"] .dial__button::before { display: none; }
.dial[data-view="dial"] .dial__button { gap: var(--wp--preset--spacing--20); }

/* Explanation beside a demo clip */
.explain { display: grid; gap: var(--wp--preset--spacing--40); align-items: center; }
@media (min-width: 1024px) { .explain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp--preset--spacing--60); } }
.demo { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.demo__media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-panel); border: var(--border-width) solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); box-shadow: var(--shadow-1); }
.demo__media--empty { display: grid; place-items: center; border-style: dashed; box-shadow: none; color: var(--wp--preset--color--ink-3); font-size: var(--wp--preset--font-size--sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.demo figcaption { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-3); max-width: none; }

.split > .prose { max-width: none; }
.two-col > .stack > p { max-width: none; }

/* Animated badge: equaliser bars inside a pulsing ring (replaces the static drop icon) */
.dial[data-view="dial"] .dial__button::before {
  --bar: linear-gradient(var(--wp--preset--color--surface), var(--wp--preset--color--surface));
  background-color: var(--wp--preset--color--accent-ink);
  background-image: var(--bar), var(--bar), var(--bar), var(--bar), var(--bar);
  background-repeat: no-repeat;
  background-position: 27% 50%, 38.500% 50%, 50% 50%, 61.500% 50%, 73% 50%;
  background-size: 7% 20%, 7% 40%, 7% 56%, 7% 34%, 7% 18%;
}
@media (prefers-reduced-motion: no-preference) {
  .dial[data-view="dial"] .dial__button::before { animation: badge-wave 1.200s ease-in-out infinite, badge-ripple 1.800s var(--ease) infinite; }
}
@keyframes badge-wave {
  0%, 100% { background-size: 7% 20%, 7% 40%, 7% 56%, 7% 34%, 7% 18%; }
  25% { background-size: 7% 44%, 7% 24%, 7% 38%, 7% 58%, 7% 30%; }
  50% { background-size: 7% 28%, 7% 56%, 7% 22%, 7% 42%, 7% 52%; }
  75% { background-size: 7% 52%, 7% 32%, 7% 48%, 7% 20%, 7% 36%; }
}
@keyframes badge-ripple {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent); }
  100% { box-shadow: 0 0 0 var(--wp--preset--spacing--30) transparent; }
}

/* Round control text: one clear label, one short line under it */
.dial[data-view="dial"][data-state="idle"] .dial__label::before { content: none; }
.dial[data-view="dial"] .dial__label { max-width: 86%; font-size: var(--wp--preset--font-size--lg); line-height: var(--line-height-tight); text-wrap: balance; }
.dial[data-view="dial"] .dial__sub { white-space: nowrap; }
.dial[data-view="dial"] .dial__button { gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--30); }