/* Classless CSS (ADR-004): elements, structure, ARIA state and a few data
   attributes as styling hooks. Tokens on :root; a track swaps the palette
   via [data-engine] (the body in the writer, the live example on Home).
   Both follow the system light/dark setting.

   Product pages (Home, Features, the Guide; ADR-018) share the header,
   footer and element styles, plus layout hooks: hero, steps, compare,
   boxes, features, feature and prose.

   The writer is a working console: dense, scannable, every part in view.
   On wide screens the patch (and the bank) stay pinned while the knobs
   scroll, and the actions stay pinned to the bottom of the input panel.
   Songs are warm paper with burnt orange, tracks cool grey with teal and
   tighter corners; the patch header names the engine in words as well. */

:root {
  --bg: #f3f1ec;
  --panel: #fbfaf7;
  --sunk: #f4f1ea;
  --ink: #1d1b17;
  --ink-2: #5c574d;
  --line: #dcd6ca;
  --line-2: #c9c2b4;
  --accent: #c94c14;
  --accent-ink: #fff;
  --accent-soft: #fbe6da;
  --tag: #ebe5d8;
  --ok: #2f7d4f;
  --warn: #a8780a;
  --bad: #b23a2a;
  --code-bg: #f1ede4;
  --sel: #fff1e7;
  --e0: #e3d8c8;
  --e1: #f0b08f;
  --e2: #d9541a;
  --e3: #8f3510;
  --font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 10px;
  --radius-sm: 6px;
  --pad: 14px;
  --sticky-top: 12px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161519;
    --panel: #1f1e23;
    --sunk: #19181c;
    --ink: #ebe7df;
    --ink-2: #a39d91;
    --line: #34323a;
    --line-2: #45424b;
    --accent: #ff7a3d;
    --accent-ink: #1a1210;
    --accent-soft: #3a2419;
    --tag: #2b2a31;
    --ok: #5fc58a;
    --warn: #e2b84a;
    --bad: #ef6d5a;
    --code-bg: #151418;
    --sel: #2c211b;
    --e0: #3a383f;
    --e1: #8a4223;
    --e2: #ff7a3d;
    --e3: #ffc3a3;
  }
}

[data-engine="track"] {
  --bg: #eaecef;
  --panel: #f7f8fa;
  --sunk: #eef0f3;
  --ink: #15171c;
  --ink-2: #565c68;
  --line: #d0d5dd;
  --line-2: #bcc3cd;
  --accent: #08877a;
  --accent-ink: #fff;
  --accent-soft: #d7f0ec;
  --tag: #dfe3e9;
  --warn: #9c6c08;
  --code-bg: #eceef2;
  --sel: #e1f4f1;
  --e0: #c9ced6;
  --e1: #8fd4ca;
  --e2: #0a9b8a;
  --e3: #05675c;
  --radius: 6px;
  --radius-sm: 4px;
}

@media (prefers-color-scheme: dark) {
  [data-engine="track"] {
    --bg: #0e1013;
    --panel: #171a1f;
    --sunk: #121418;
    --ink: #e6e8ec;
    --ink-2: #9aa1ad;
    --line: #2a2f37;
    --line-2: #3a414b;
    --accent: #2fd4c0;
    --accent-ink: #06211d;
    --accent-soft: #10302c;
    --tag: #232830;
    --warn: #e0b44a;
    --code-bg: #0b0d10;
    --sel: #12302c;
    --e0: #2a2f37;
    --e1: #1d6b62;
    --e2: #2fd4c0;
    --e3: #9ff0e5;
  }
}

* {
  box-sizing: border-box;
}

/* Layout rules below set display; the attribute must still win. */
[hidden] {
  display: none !important;
}

body {
  margin: 0 auto;
  max-width: 1680px;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-body);
  transition: background-color 0.25s;
}

/* The engine at work, as a strip across the top of the window. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: 3px;
  background: var(--accent);
  transition: background-color 0.25s;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

code,
pre {
  font-family: var(--font-mono);
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Small mono caps: eyebrows, legends, box labels, stat labels. */
hgroup > p:first-child,
section[data-layout="hero"] > div > p:first-child,
main[data-layout="product"] figcaption,
main[data-layout="product"] thead th,
aside[data-intro] h2,
legend,
copy-box small,
stat-grid dt,
tab-set h3,
main[data-layout="console"] small,
#engine-label,
#try-engine {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---- page header ---- */

body > header {
  display: grid;
  gap: 12px;
  padding-block: 12px 14px;
  border-bottom: 1px solid var(--line);
}

body > header > nav[aria-label="Main"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 4px;
  padding-top: 4px;
  font-size: 14px;
}

body > header > nav[aria-label="Main"] a {
  padding: 4px 10px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

body > header > nav[aria-label="Main"] a:hover {
  color: var(--ink);
  background: var(--tag);
}

body > header > nav[aria-label="Main"] a[aria-current]:not([rel="home"]) {
  color: var(--ink);
  font-weight: 650;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -2px 0 var(--accent);
}

header nav output {
  font-variant-numeric: tabular-nums;
}

/* The brand: the way home from every page. */
body > header > nav[aria-label="Main"] a[rel="home"] {
  margin-right: 8px;
  padding-left: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

body > header > nav[aria-label="Main"] a[rel="home"]:hover {
  background: none;
}

a[rel="home"] em {
  font-style: normal;
  color: var(--accent);
}

/* The one main action of a page or the navigation, as a filled button. */
a[data-primary],
body > header > nav[aria-label="Main"] a[data-primary] {
  display: inline-block;
  padding: 6px 14px;
  font-weight: 650;
  color: var(--accent-ink);
  text-decoration: none;
  background: var(--accent);
  border-radius: var(--radius-sm);
}

a[data-primary]:hover,
body > header > nav[aria-label="Main"] a[data-primary]:hover {
  color: var(--accent-ink);
  background: var(--accent);
  filter: brightness(1.08);
}

header nav button[data-account] {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 13.5px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

header nav button[data-account]:hover {
  border-color: var(--accent);
}

hgroup {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: end;
  gap: 2px 32px;
}

hgroup > * {
  grid-column: 1 / -1;
}

hgroup > p:first-child {
  margin-bottom: 2px;
}

hgroup h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

hgroup h1 em {
  font-style: normal;
  color: var(--accent);
}

hgroup > p:last-child:not(:first-child) {
  max-width: 78ch;
  font-size: 13.5px;
  color: var(--ink-2);
}

@media (min-width: 1101px) {
  hgroup > h1 {
    grid-column: 1;
  }
  hgroup > h1 + p {
    grid-column: 2;
  }
}

/* ---- controls ---- */

button {
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 500;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--ink-2);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button[type="submit"] {
  padding: 6px 16px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

button[type="submit"]:hover {
  filter: brightness(1.06);
  border-color: var(--accent);
}

select,
input[type="number"],
input[type="search"],
input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 4px 8px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}

select:hover:not(:disabled),
input:hover:not(:disabled):not([type="checkbox"]):not([type="range"]) {
  border-color: var(--ink-2);
}

input[type="number"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

input[type="range"],
input[type="checkbox"] {
  accent-color: var(--accent);
}

input[type="range"] {
  width: 100%;
  margin: 2px 0;
}

textarea {
  display: block;
  width: 100%;
  min-height: 240px;
  padding: 10px 12px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  background: var(--code-bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}

textarea[readonly] {
  color: var(--ink-2);
}

/*
 * Syntax colours in the source text (shared/editor.ts): the textarea, with a transparent background,
 * sits on a mirror of its text that paints marks behind the syntax. The textarea keeps the text that
 * is read, selected and copied; the mirror's text is transparent. Every metric that places a
 * character is set on both, so the marks sit under their text.
 */
[data-editor] {
  position: relative;
}

[data-editor] > pre,
[data-editor] > textarea {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: normal;
  tab-size: 8;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  scrollbar-gutter: stable;
}

[data-editor] > pre {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  color: transparent;
  background: var(--code-bg);
  border-color: transparent;
  pointer-events: none;
}

[data-editor] > textarea {
  position: relative;
  background: transparent;
}

[data-editor] mark {
  all: unset;
  color: transparent;
  border-radius: 3px;
}

[data-editor] mark[data-kind="header"] {
  background: var(--accent-soft);
}

[data-editor] mark:is([data-kind="credit"], [data-kind="inline-tag"]) {
  background: var(--tag);
}

[data-editor] mark:is([data-kind="backing"], [data-kind="emphasis"], [data-kind="sfx"]) {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
}

/* Syntax Suno does not read as meant; Clean up removes it. */
[data-editor] mark:is([data-kind="chord"], [data-kind="timestamp"]) {
  background: color-mix(in srgb, var(--warn) 24%, transparent);
}

[data-editor] mark[data-kind="error"] {
  background: color-mix(in srgb, var(--bad) 24%, transparent);
  text-decoration: underline wavy var(--bad);
}

/* ---- console layout: input, patch, variation bank ---- */

main[data-layout="console"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.72fr);
  gap: 14px;
  padding-block: 14px;
  align-items: start;
}

@media (max-width: 1100px) {
  main[data-layout="console"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
  main[data-layout="console"] > aside {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  main[data-layout="console"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

main[data-layout="console"] > * {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 0 var(--pad) var(--pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background-color 0.25s, border-color 0.25s;
}

main[data-layout="console"] > * > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  margin-inline: calc(-1 * var(--pad));
  padding: 8px var(--pad);
  border-bottom: 1px solid var(--line);
}

main[data-layout="console"] > * > header > p {
  display: flex;
  gap: 6px;
}

main[data-layout="console"] h2 {
  font-size: 14.5px;
  font-weight: 700;
}

main[data-layout="console"] > aside > p {
  font-size: 12.5px;
  color: var(--ink-2);
}

/* The engine and family of the patch, in words. */
#engine-label {
  padding: 3px 9px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

#engine-label:empty {
  display: none;
}

/* Patch (and the bank on wide screens) stay in view while the knobs scroll. */
@media (min-width: 721px) {
  main[data-layout="console"] > section[aria-labelledby="patch-heading"] {
    position: sticky;
    top: var(--sticky-top);
    max-height: calc(100dvh - 2 * var(--sticky-top));
    overflow: hidden;
  }
  main[data-layout="console"] > section[aria-labelledby="patch-heading"] > tab-set {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  main[data-layout="console"] > section[aria-labelledby="patch-heading"] > tab-set > section {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
  main[data-layout="console"] > section[aria-labelledby="patch-heading"] copy-box header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-block: 2px 6px;
    background: var(--panel);
  }
  main[data-layout="console"] > section[aria-labelledby="patch-heading"] copy-box pre {
    max-height: none;
  }
  /* Generate, Save and Copy stay at the bottom of the input panel. */
  #knobs > p {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-inline: calc(-1 * var(--pad));
    margin-bottom: calc(-1 * var(--pad));
    padding: 10px var(--pad);
    background: var(--panel);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

@media (min-width: 1101px) {
  main[data-layout="console"] > aside {
    position: sticky;
    top: var(--sticky-top);
    max-height: calc(100dvh - 2 * var(--sticky-top));
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* ---- knobs ---- */

#knobs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#knobs fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
  gap: 10px 12px;
  min-width: 0;
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

#knobs legend {
  float: left;
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 2px;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
}

#knobs fieldset > label,
#knobs fieldset > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}

/* The style picker is the widest control; it gets the full row. */
#knobs fieldset > label:has(filter-select) {
  grid-column: 1 / -1;
}

#knobs fieldset > div > span {
  display: flex;
  gap: 6px;
}

#knobs fieldset > div > span > button {
  flex: none;
}

/* Range inputs: label and live value on one line, the slider under it. */
#knobs fieldset > label:has(input[type="range"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}

#knobs fieldset > label:has(input[type="range"]) > input {
  grid-column: 1 / -1;
  grid-row: 2;
}

#knobs fieldset > label > output {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Layers: three short rows side by side. */
#knobs fieldset:has(button[data-reroll]) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

/* Tag sheet: a wrap of checkboxes. */
#knobs fieldset:has(> label > input[type="checkbox"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

#knobs fieldset > label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

#knobs fieldset > label:has(input[name="taste"]) {
  flex-basis: 100%;
}

#knobs > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#knobs > p > small {
  margin-left: auto;
}

/* Help per knob group: a one-line summary that opens what each control does. */
#knobs details[data-help] {
  grid-column: 1 / -1;
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--ink-2);
}

#knobs details[data-help] > summary {
  display: flex;
  gap: 6px;
  align-items: baseline;
  width: fit-content;
  cursor: pointer;
  list-style: none;
}

#knobs details[data-help] > summary::-webkit-details-marker {
  display: none;
}

#knobs details[data-help] > summary::before {
  content: "?";
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--line-2);
  border-radius: 50%;
}

#knobs details[data-help][open] > summary::before {
  content: "\2212";
}

#knobs details[data-help] > summary:hover {
  color: var(--ink);
}

#knobs details[data-help] dl {
  display: grid;
  gap: 6px;
  margin: 8px 0 6px;
  padding: 10px 12px;
  background: var(--sunk);
  border-radius: var(--radius-sm);
}

#knobs details[data-help] dl > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 10px;
}

#knobs details[data-help] dt {
  font-weight: 650;
  color: var(--ink);
}

#knobs details[data-help] dd {
  margin: 0;
}

/* The sections of the text as its tags read; a click selects one in the text. */
#outline {
  font-size: 12.5px;
  color: var(--ink-2);
}

#outline > summary {
  width: fit-content;
  cursor: pointer;
}

#outline > summary:hover {
  color: var(--ink);
}

#outline ol {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
  padding: 8px 10px;
  list-style: none;
  background: var(--sunk);
  border-radius: var(--radius-sm);
}

#outline li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#outline li button {
  min-width: 0;
  padding: 2px 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  text-decoration: underline dotted var(--line-2);
  text-underline-offset: 3px;
  cursor: pointer;
}

#outline li button:hover {
  color: var(--accent);
}

#outline li small {
  flex: none;
}

/* First visit: the three steps above the console until dismissed. */
aside[data-intro] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

aside[data-intro] h2 {
  grid-column: 1;
}

aside[data-intro] ol {
  display: grid;
  grid-column: 1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

aside[data-intro] li {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  counter-increment: step;
}

aside[data-intro] li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
}

aside[data-intro] button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 720px) {
  aside[data-intro] {
    grid-template-columns: minmax(0, 1fr);
  }
  aside[data-intro] button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* A control the page hides (the Flavour select of a style without flavours). */
#knobs label[hidden] {
  display: none;
}

/* Controls of one engine show while that engine writes the patch. */
body[data-engine="song"] #knobs [data-for="track"],
body[data-engine="track"] #knobs [data-for="song"] {
  display: none;
}

/* Visitors: locked controls are muted and explain themselves on hover. */
#knobs :disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#knobs fieldset > :is(label, div)[title]:has(:disabled) {
  cursor: not-allowed;
}

#knobs fieldset > :is(label, div)[title]:has(:disabled) > :not(span):not(input):not(select) {
  opacity: 0.6;
}

#knobs fieldset[data-mode="anonymous"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--sel);
  border: 1px solid var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

#knobs fieldset[data-mode="anonymous"] legend {
  float: none;
  margin: 0;
}

#knobs fieldset[data-mode="anonymous"] p {
  font-size: 12.5px;
  color: var(--ink-2);
}

#knobs fieldset[data-mode="anonymous"] button[data-sign-in] {
  padding: 1px 8px;
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

body:not([data-signed-in]) [data-mode="signed-in"],
body[data-signed-in] [data-mode="anonymous"] {
  display: none !important;
}

filter-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- tabs ---- */

[role="tablist"] {
  display: flex;
  gap: 2px;
  margin-inline: calc(-1 * var(--pad));
  padding: 4px 8px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line);
}

/* On phones the five tabs wrap, so none hides off to the side. */
@media (max-width: 720px) {
  [role="tablist"] {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

[role="tab"] {
  padding: 8px 12px 7px;
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

[role="tab"]:hover {
  color: var(--ink);
}

[role="tab"][aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

[role="tab"]:focus-visible {
  outline-offset: -2px;
}

tab-set {
  display: block;
}

tab-set > section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}

tab-set > section[hidden] {
  display: none;
}

tab-set h3 {
  margin-top: 4px;
}

/* What a tab shows, in one line above it. */
tab-set > section > p:first-child {
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}

tab-set aside {
  font-size: 12.5px;
  padding: 7px 10px;
  background: var(--tag);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---- components ---- */

copy-box {
  display: block;
}

copy-box header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 6px;
}

copy-box header > span {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 8px;
}

copy-box output {
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: 999px;
}

copy-box output[data-level="warn"] {
  color: var(--warn);
  border-color: currentColor;
}

copy-box output[data-level="bad"] {
  color: var(--accent-ink);
  background: var(--bad);
  border-color: var(--bad);
}

pre {
  margin: 0;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

copy-box pre {
  max-height: 60vh;
  overflow: auto;
}

[aria-busy="true"] copy-box pre {
  opacity: 0.55;
  transition: opacity 0.2s 0.15s;
}

stat-grid dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  margin: 0;
}

stat-grid dl > div {
  padding: 9px 11px;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

stat-grid dd {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
}

stat-grid dd:first-of-type {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}

stat-grid meter {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 6px;
  background: var(--tag);
  border: 0;
  border-radius: 3px;
}

stat-grid meter::-webkit-meter-bar {
  background: var(--tag);
  border: 0;
  border-radius: 3px;
}

stat-grid meter::-webkit-meter-optimum-value {
  background: var(--accent);
  border-radius: 3px;
}

stat-grid meter::-moz-meter-bar {
  background: var(--accent);
  border-radius: 3px;
}

energy-chart {
  display: block;
  padding: 8px;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

energy-chart:empty {
  display: none;
}

energy-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

section-table table {
  width: 100%;
  font-size: 12.5px;
  border-collapse: collapse;
}

section-table th,
section-table td {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

section-table thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-2);
  border-bottom-color: var(--line-2);
}

section-table tbody > tr > :first-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

section-table tbody > tr > :last-child,
section-table thead th:last-child {
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

section-table tbody tr:has(mark) {
  background: var(--sel);
}

section-table th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}

section-table tbody td:nth-child(3) {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}

mark {
  margin-left: 4px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
}

/* No checks: one quiet line saying so. */
issue-list > p {
  font-size: 13px;
  color: var(--ink-2);
}

/* The patch panel with no text to write from. */
[data-empty-patch] {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 28px 18px;
  text-align: left;
  background: var(--sunk);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
}

[data-empty-patch] p {
  max-width: 52ch;
  font-size: 13.5px;
  color: var(--ink-2);
}

issue-list ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A marker in front of each check, so pass and warning never rely on colour. */
issue-list li {
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr);
  gap: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  background: var(--tag);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

issue-list li::before {
  content: "!";
  content: "!" / "Warning:";
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--warn);
}

issue-list li[data-ok] {
  border-left-color: var(--ok);
}

issue-list li[data-ok]::before {
  content: "✓";
  content: "✓" / "Pass:";
  color: var(--ok);
}

issue-list li button {
  all: unset;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

issue-list li button::after {
  content: " → line";
  content: " → line" / "";
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}

issue-list li button:hover {
  text-decoration-style: solid;
}

issue-list li button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Cards in one column beside the patch, a grid when the bank runs full width. */
variation-bank ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

variation-bank button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  text-align: left;
  border-color: var(--line);
  border-radius: var(--radius-sm);
}

variation-bank button:hover {
  background: var(--sunk);
}

variation-bank button[aria-current="true"] {
  background: var(--sel);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

variation-bank strong,
variation-bank small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Titles may take two lines; the detail line stays on one. */
variation-bank strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

main[data-layout="console"] variation-bank small {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

variation-bank svg {
  display: block;
  width: 64px;
  height: 28px;
}

/* ---- library ---- */

#filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 12px;
  margin-block: 16px 12px;
  padding: 12px var(--pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 12rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}

#filters label:has(input[type="search"]) {
  flex-grow: 3;
}

#tag-filter {
  margin-bottom: 12px;
  font-size: 13.5px;
}

patch-list > p {
  padding: 24px;
  text-align: center;
  color: var(--ink-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
}

patch-list ul,
ul[data-layout="cards"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

patch-list article,
ul[data-layout="cards"] article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: var(--pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

patch-list h2,
ul[data-layout="cards"] h2 {
  font-size: 16px;
  overflow-wrap: anywhere;
}

patch-list h2 a,
ul[data-layout="cards"] h2 a {
  color: var(--ink);
  text-decoration: none;
}

patch-list h2 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

patch-list article > p {
  font-size: 12.5px;
  color: var(--ink-2);
}

patch-list article > p:first-of-type {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

patch-list article > p:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

patch-list article > p:last-child a {
  font-weight: 600;
}

patch-list article > p:last-child button {
  margin-left: auto;
  color: var(--bad);
}

patch-list article > p:last-child button:hover {
  border-color: var(--bad);
}

patch-list details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 10px;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

patch-list details[open] {
  padding-bottom: 10px;
}

patch-list summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

patch-list details > p {
  margin-top: 8px;
}

patch-list copy-box {
  margin-top: 10px;
}

patch-list copy-box pre {
  max-height: 240px;
}

patch-list article > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-2);
}

patch-list textarea {
  min-height: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
}

patch-list details label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
}

ul[data-tags] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul[data-tags] a {
  display: inline-block;
  padding: 1px 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
  text-decoration: none;
  background: var(--tag);
  border-radius: 999px;
}

ul[data-tags] a::before {
  content: "#";
  content: "#" / "";
  color: var(--ink-2);
}

ul[data-tags] a:hover {
  background: var(--sel);
}

/* Rating: five stars, filled up to the checked one. */
fieldset[data-rating] {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset[data-rating] legend {
  float: left;
  margin-right: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

fieldset[data-rating] label {
  font-size: 20px;
  line-height: 1;
  color: var(--line-2);
  cursor: pointer;
}

fieldset[data-rating] input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

fieldset[data-rating] label:has(~ label input:checked),
fieldset[data-rating] label:has(input:checked) {
  color: var(--accent);
}

fieldset[data-rating]:hover label {
  color: var(--accent);
}

fieldset[data-rating] label:hover ~ label {
  color: var(--line-2);
}

fieldset[data-rating] label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Plain sections under a page's main content: "Your data". */
main:not([data-layout]) > section {
  margin-top: 20px;
  padding: var(--pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

main:not([data-layout]) > section h2 {
  font-size: 16px;
}

main:not([data-layout]) > section p {
  max-width: 76ch;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}

main:not([data-layout]) > section p:has(button) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

main:not([data-layout]) > section label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}

main:not([data-layout]) > section input[type="file"] {
  max-width: 100%;
  font-size: 12.5px;
}

main:not([data-layout]) > section output:not(:empty) {
  display: block;
  padding: 6px 10px;
  color: var(--ink);
  background: var(--tag);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

main > p {
  max-width: 68ch;
  color: var(--ink-2);
}

ul[data-layout="cards"] {
  margin-top: 18px;
}

ul[data-layout="cards"] p {
  color: var(--ink-2);
}

/* ---- guide ---- */

nav[aria-label="On this page"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 6px;
  counter-reset: article;
}

nav[aria-label="On this page"] a {
  display: flex;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  counter-increment: article;
}

nav[aria-label="On this page"] a::before {
  content: counter(article);
  font-family: var(--font-mono);
  color: var(--accent);
}

nav[aria-label="On this page"] a:hover {
  border-color: var(--accent);
}

/* One article per page, with the guide's pages beside it on wide screens. */
main[data-layout="prose"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 44px;
  padding-block: 22px 12px;
}

@media (min-width: 900px) {
  main[data-layout="prose"] {
    grid-template-columns: 12.5rem minmax(0, 76ch);
  }
  main[data-layout="prose"] > nav {
    position: sticky;
    top: var(--sticky-top);
    grid-row: 1 / span 3;
    align-self: start;
  }
  main[data-layout="prose"] > article {
    grid-column: 2;
  }
}

nav[aria-label="Guide"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

@media (min-width: 900px) {
  nav[aria-label="Guide"] {
    flex-direction: column;
    gap: 2px;
    padding-left: 0;
    border-left: 1px solid var(--line);
  }
}

nav[aria-label="Guide"] a {
  padding: 5px 12px;
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

nav[aria-label="Guide"] a:hover {
  color: var(--ink);
  background: var(--tag);
}

nav[aria-label="Guide"] a[aria-current] {
  font-weight: 650;
  color: var(--ink);
  background: var(--panel);
  box-shadow: inset 2px 0 0 var(--accent);
}

main[data-layout="prose"] > article {
  min-width: 0;
}

main[data-layout="prose"] > article + article {
  margin-top: 12px;
}

main[data-layout="prose"] h1 {
  margin-bottom: 14px;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

main[data-layout="prose"] h2 {
  margin: 26px 0 8px;
  font-size: 18px;
  scroll-margin-top: 16px;
}

main[data-layout="prose"] h3 {
  margin: 18px 0 6px;
  font-size: 15px;
  scroll-margin-top: 16px;
}

main[data-layout="prose"] :is(p, li, dd) {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}

main[data-layout="prose"] :is(p, ul, ol, pre, dl) + :is(p, ul, ol, pre, dl) {
  margin-top: 10px;
}

main[data-layout="prose"] :is(ul, ol) {
  margin-block: 0;
  padding-left: 20px;
}

main[data-layout="prose"] pre {
  font-size: 12px;
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
}

main[data-layout="prose"] dl {
  margin-block: 0;
}

main[data-layout="prose"] dt {
  margin-top: 16px;
  font-weight: 700;
  color: var(--ink);
  scroll-margin-top: 16px;
}

main[data-layout="prose"] dd {
  margin: 2px 0 0;
}

:not(pre) > code {
  padding: 1px 5px;
  font-size: 12px;
  color: var(--ink);
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* ---- product pages: Home and Features (ADR-018) ---- */

main[data-layout="product"] {
  display: grid;
  gap: 56px;
  padding-block: 28px 24px;
}

main[data-layout="product"] > section {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  scroll-margin-top: 16px;
}

main[data-layout="product"] h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
}

main[data-layout="product"] h3 {
  font-size: 16px;
}

main[data-layout="product"] > section > p,
main[data-layout="product"] li > p,
main[data-layout="product"] article > p {
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

main[data-layout="product"] figure {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

main[data-layout="product"] figure pre {
  font-size: 12.5px;
  background: var(--panel);
  border-radius: var(--radius);
}

/* Hero: the promise and the two ways in, a real Style box beside them. */
section[data-layout="hero"] {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 28px 48px;
}

@media (min-width: 900px) {
  main[data-layout="product"] > section[data-layout="hero"] {
    padding-block: 20px 12px;
  }
}

img {
  max-width: 100%;
  height: auto;
}

section[data-layout="hero"] > div {
  display: grid;
  gap: 16px;
}

section[data-layout="hero"] > div > p:first-child {
  color: var(--accent);
}

section[data-layout="hero"] h1 {
  max-width: 20ch;
  font-size: clamp(30px, 5.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

section[data-layout="hero"] > div > p:not(:first-child) {
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

section[data-layout="hero"] > div > p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

section[data-layout="hero"] > div > p:last-child > a {
  padding: 10px 18px;
  font-size: 15px;
}

section[data-layout="hero"] > div > p:last-child > a:not([data-primary]) {
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}

section[data-layout="hero"] > div > p:last-child > a:not([data-primary]):hover {
  border-color: var(--ink-2);
}

/* The product shot: the real writer, under the promise. */
section[data-layout="hero"] figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.1);
}

/* Numbered steps in a row. */
ol[data-layout="steps"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

ol[data-layout="steps"] > li {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  counter-increment: step;
}

ol[data-layout="steps"] > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
}

/* Two examples side by side: input above output. */
div[data-layout="compare"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 18px;
}

div[data-layout="compare"] > article {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 18px;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* The live example on Home. */
#try {
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background-color 0.25s;
}

#try > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

#try-engine {
  color: var(--accent);
}

#try-form {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 10px 16px;
}

#try-form label {
  display: grid;
  flex: 1 1 10rem;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

#try-form label:has(filter-select) {
  flex: 2 1 18rem;
}

div[data-layout="boxes"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 16px;
}

div[data-layout="boxes"] copy-box pre {
  max-height: 24rem;
}

/* Cards with an accent edge: what an account adds. */
ul[data-layout="features"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul[data-layout="features"] > li {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

/* Features page: one feature per section, text beside its example. */
main[data-layout="product"] > section[data-layout="feature"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  main[data-layout="product"] > section[data-layout="feature"]:has(> figure) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

section[data-layout="feature"] > div {
  display: grid;
  gap: 10px;
  align-content: start;
}

section[data-layout="feature"] > div > p:first-of-type {
  font-size: 16px;
  color: var(--ink);
}

section[data-layout="feature"] ul {
  display: grid;
  gap: 6px;
  max-width: 62ch;
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

main[data-layout="product"] > nav[aria-label="On this page"] {
  margin-bottom: -24px;
}

main[data-layout="product"] table {
  width: 100%;
  max-width: 60rem;
  font-size: 14px;
  border-collapse: collapse;
}

main[data-layout="product"] :is(th, td) {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

main[data-layout="product"] tbody th {
  font-weight: 650;
}

main[data-layout="product"] tbody td {
  color: var(--ink-2);
}

/* Questions and answers. */
main[data-layout="product"] details {
  max-width: 75ch;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

main[data-layout="product"] summary {
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

main[data-layout="product"] details > p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---- offline page: bare, centred ---- */

body > main:only-child {
  display: grid;
  gap: 12px;
  max-width: 60ch;
  margin: 18vh auto 0;
}

body > main:only-child h1 {
  font-size: 26px;
}

body > main:only-child p:first-of-type {
  color: var(--ink-2);
}

/* ---- footer and toast ---- */

body > footer {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  padding-block: 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

body > footer > nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

body > footer > nav a {
  color: var(--ink-2);
  text-decoration: none;
}

body > footer > nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

body > footer > p {
  font-size: 12.5px;
}

output[data-toast] {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  max-width: calc(100vw - 32px);
  padding: 8px 16px;
  font-size: 13px;
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

output[data-toast][data-show] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
  button:active:not(:disabled) {
    transform: none;
  }
}