/* The Lab (/lab/): experiments readers tinker with. Visual first: the design
   being decided is the hero and takes most of the screen, the dials are
   named with a word, and how it all works sits behind the (i). Built on the
   site's materials (board, paper labels, the Questions wash into the
   endpaper) and its tokens only, like styles.css, which loads first. The
   ribbon (--color-ribbon) marks Sadik's pick and nothing else; a reader's own
   vote is ink, and brass stays the sign-up's. When to use each control:
   docs/design/components.md, "The Lab". */

.tnum { font-variant-numeric: tabular-nums; }

/* ---------- The bar: home, the Lab, the theme ---------- */
.lab-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); width: 100%; max-width: var(--width-content); margin-inline: auto; padding: var(--space-16) max(var(--gutter), env(safe-area-inset-left)); }
.lab-trail { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.lab-slash { color: var(--color-ink-muted); }
.lab-crumb { display: inline-flex; align-items: center; min-height: var(--size-tap); font-weight: var(--weight-semibold); text-decoration: none; }
.lab-crumb:active { opacity: var(--opacity-pressed); }

/* ---------- The page: on the board, washing into the endpaper ---------- */
.lab { flex: 1; padding-bottom: var(--section-space); background-image: var(--texture-grain), var(--texture-wash-faq); }
.lab-in { max-width: var(--width-content); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
@media (min-width: 960px) { .lab-in, .lab-bar { padding-inline: var(--gutter-wide); } }

.lab-head { padding-top: var(--space-24); }
.lab-head h1 { font-size: var(--text-section); }
.lab-ask { margin-top: var(--space-12); font-size: var(--text-lede); color: var(--color-ink-muted); text-wrap: pretty; }
.lab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-4); font-size: var(--text-small); color: var(--color-ink-muted); }
.lab-info-btn { position: relative; display: inline-grid; place-items: center; width: var(--size-icon-xl); height: var(--size-icon-xl); padding: 0; border: 0; background: none; color: var(--color-ink-muted); cursor: pointer; transition: color var(--duration-fast) var(--ease-fade); }
.lab-info-btn::after { content: ""; position: absolute; inset: calc(-1 * var(--space-10)); }
.lab-info-btn svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.lab-info-btn:active { opacity: var(--opacity-pressed); }
@media (hover: hover) and (pointer: fine) { .lab-info-btn:hover { color: var(--color-ink); } }

/* ---------- Open or closed, and the API's state ----------
   <body data-state> is open or closed. <body data-api> is loading, on, read
   (the gallery reads but takes no sends or votes) or off (it can't be
   reached: the gallery gives way to one quiet line, and the dials still
   work). */
[data-state="open"] [data-closed-only], [data-state="closed"] [data-open-only] { display: none; }
[data-api="off"] [data-api-on], [data-api]:not([data-api="off"]) [data-api-off] { display: none; }
.lab-noscript { margin-top: var(--space-32); font-size: var(--text-lede); }

/* ---------- Icons drawn from a design's dials (experiment.js) ----------
   --_gap is the paper behind an icon: Solid cuts lines out of a fill in it. */
.ico { display: block; width: 100%; height: 100%; overflow: visible; --_gap: var(--color-label); }
.ico .tint { opacity: var(--opacity-tint); }

/* ---------- The bench: the design is the hero ----------
   Phones: the strip of icons stays at the top while the dials scroll under it.
   From 960: the stage fills the left, the dials and the send sit at the right. */
.bench, .bench-make { display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr); }
.bench { margin-top: var(--space-32); }
/* The strip sticks only while the dials scroll under it: on phones .bench-make is its containing block. */
@media (min-width: 960px) {
  .bench-make { display: contents; }
  .bench { grid-template-columns: minmax(0, 1fr) var(--width-bench-dials); grid-template-rows: auto auto 1fr; grid-template-areas: "strip dials" "stage dials" "stage send"; align-items: start; gap: var(--space-24); }
  .strip { grid-area: strip; }
  /* The stage stays in view while the dials beside it scroll. */
  .stage { grid-area: stage; position: sticky; top: var(--space-24); }
  [data-state="closed"] .bench { grid-template-rows: auto 1fr; grid-template-areas: "strip dials" "stage dials"; }
  .dials { grid-area: dials; }
  .send { grid-area: send; }
}

.strip { position: sticky; top: max(var(--space-8), env(safe-area-inset-top)); z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-4); }
@media (min-width: 960px) { .strip { position: static; grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.strip button { display: grid; place-items: center; min-height: var(--size-tap); padding: var(--space-8) 0; border: 0; border-radius: calc(var(--radius-card) - var(--space-4)); background: transparent; color: var(--color-ink); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-fade); }
.strip button .ico { width: var(--size-icon-strip); height: var(--size-icon-strip); }
.strip button[aria-pressed="true"] { background: var(--color-label-hover); }
.strip button[aria-pressed="true"] .ico { --_gap: var(--color-label-hover); }
.strip button:active { transform: scale(var(--scale-press)); }
@media (hover: hover) and (pointer: fine) {
  .strip button[aria-pressed="false"]:hover { background: var(--color-label-hover); }
  .strip button[aria-pressed="false"]:hover .ico { --_gap: var(--color-label-hover); }
}

.stage { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
/* Phones: the specimen, then the dials, then the icons at real size, so a dial's effect is never far away. */
@media not all and (min-width: 960px) {
  .stage { display: contents; }
  .specimen, .context { background: var(--color-label); box-shadow: var(--shadow-paper); border-radius: var(--radius-card); }
  .strip { order: 1; }
  .specimen { order: 2; }
  .dials { order: 3; }
  .context { order: 4; }
}
@media (min-width: 960px) { .stage { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.specimen { display: grid; place-items: center; padding: var(--space-40) var(--space-24); }
@media (min-width: 960px) { .specimen { padding: var(--space-64) var(--space-32); } }
.specimen-box { position: relative; }
.specimen-art { width: var(--size-specimen); height: var(--size-specimen); background-image: var(--texture-specimen-grid); background-size: var(--size-grid-cell) var(--size-grid-cell); outline: var(--rule) solid var(--color-grid-line); color: var(--color-ink); }

/* At real size: the icons beside 17px text, as an iOS list and a toolbar would set them. */
.context { display: grid; align-content: center; gap: var(--space-16); padding: var(--space-20); font-size: var(--text-lede); }
@media (min-width: 960px) { .context { border-left: var(--rule) solid var(--color-hairline); padding: var(--space-32) var(--space-24); } }
.ios-rows { border-radius: var(--radius-field); background: var(--color-board); }
.ios-rows li { display: grid; grid-template-columns: var(--size-icon-real) minmax(0, 1fr) var(--size-icon-md); align-items: center; gap: var(--space-14); min-height: var(--size-tap); padding: 0 var(--space-14); }
.ios-rows li + li { border-top: var(--rule) solid var(--color-hairline); }
.ios-rows .ico, .ios-bar .ico { width: var(--size-icon-real); height: var(--size-icon-real); --_gap: var(--color-board); }
.ios-rows .chev { width: var(--size-icon-md); height: var(--size-icon-md); color: var(--color-ink-muted); }
.ios-bar { display: flex; justify-content: space-around; align-items: center; min-height: var(--size-tap); border-radius: var(--radius-field); background: var(--color-board); }

/* ---------- The dials: a word each ---------- */
.dials { display: grid; gap: var(--space-20); padding: var(--space-20); }
.dial-fields { display: grid; gap: var(--space-20); }
.dial { display: grid; gap: var(--space-8); }
.dial-name { font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--color-ink-muted); }
.dial-steps { grid-template-columns: minmax(0, 1fr) auto; }
.dial-steps .range-wrap { grid-column: 1 / -1; }
.dial-value { font-size: var(--text-small); font-weight: var(--weight-semibold); }

/* Picture cards: each option drawn in the current dials with only that option changed. */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.cards[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards label { position: relative; display: grid; justify-items: center; gap: var(--space-6); padding: var(--space-12) var(--space-4) var(--space-10); border-radius: var(--radius-field); background: var(--color-board); font-size: var(--text-caption); line-height: var(--leading-caption); text-align: center; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-fade), background-color var(--duration-fast) var(--ease-fade); }
.cards label:has(input:checked) { background: var(--color-label); box-shadow: var(--ring-picked); }
.cards label:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-width); }
.cards label:active { transform: scale(var(--scale-press)); }
.card-art { display: block; width: var(--size-icon-choice); height: var(--size-icon-choice); color: var(--color-ink); }
.card-art .ico { --_gap: var(--color-board); }
.cards label:has(input:checked) .card-art .ico { --_gap: var(--color-label); }

/* Two-way switch: words on a board track, the picked one in ink like the site's switches. */
.segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: var(--space-2); gap: var(--space-2); border-radius: var(--radius-pill); background: var(--color-board); }
.segments label { position: relative; display: grid; cursor: pointer; }
.segments span { display: grid; place-items: center; min-height: var(--size-seg); padding: 0 var(--space-14); border-radius: var(--radius-pill); font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--color-ink-muted); white-space: nowrap; transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-fade), background-color var(--duration-fast) var(--ease-fade); }
.segments input:checked + span { background: var(--color-ink); color: var(--color-label); }
.segments input:focus-visible + span { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-width); }
.segments label:active span { transform: scale(var(--scale-press)); }
@media (hover: hover) and (pointer: fine) { .segments input:not(:checked) + span:hover { color: var(--color-ink); } }
@media (pointer: coarse) { .segments span { min-height: var(--size-tap); } }
/* The radios stay real, focusable and arrow-keyed; only their dot is hidden. */
.cards input, .segments input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

/* Weight: a stepped slider, its steps marked under the track. */
.range-wrap { position: relative; }
.range { position: relative; z-index: 1; display: block; width: 100%; height: var(--size-tap); margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.range::-webkit-slider-runnable-track { height: var(--size-range-track); background: transparent; }
.range::-moz-range-track { height: var(--size-range-track); background: transparent; }
.range::-webkit-slider-thumb { width: var(--size-range-thumb); height: var(--size-range-thumb); margin-top: calc((var(--size-range-track) - var(--size-range-thumb)) / 2); border: 0; border-radius: 50%; background: var(--color-ink); box-shadow: var(--shadow-paper); -webkit-appearance: none; appearance: none; transition: transform var(--duration-fast) var(--ease-out); }
.range::-moz-range-thumb { width: var(--size-range-thumb); height: var(--size-range-thumb); border: 0; border-radius: 50%; background: var(--color-ink); box-shadow: var(--shadow-paper); }
.range:active::-webkit-slider-thumb { transform: scale(var(--scale-press)); }
.range:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-width); border-radius: var(--radius-pill); }
.ticks { position: absolute; inset: 0 calc(var(--size-range-thumb) / 2 - var(--space-2)); display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.ticks::before { content: ""; position: absolute; inset: 0 var(--space-2); margin: auto 0; height: var(--size-range-track); border-radius: var(--radius-pill); background: var(--color-hairline); }
.ticks i { position: relative; width: var(--space-4); height: var(--space-4); border-radius: 50%; background: var(--color-ink-muted); }

.dial-tools { display: flex; justify-content: space-between; border-top: var(--rule) solid var(--color-hairline); padding-top: var(--space-8); }
.text-btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--size-tap); padding: 0; border: 0; background: none; font-size: var(--text-small); font-weight: var(--weight-semibold); cursor: pointer; }
.text-btn svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.text-btn:active { opacity: var(--opacity-pressed); }
.text-btn:focus-visible { outline-offset: var(--space-4); border-radius: var(--radius-focus); }

/* ---------- Send ---------- */
.send { display: grid; padding: var(--space-20); }
.send-form, .send-done { grid-area: 1 / 1; display: grid; gap: var(--space-8); }
.send-email[hidden] { display: none; }
.send[data-done] .send-form, .send:not([data-done]) .send-done { visibility: hidden; }
.send-check { display: flex; align-items: center; gap: var(--space-10); min-height: var(--size-tap); font-size: var(--text-small); cursor: pointer; }
.send-check input { width: var(--size-checkbox); height: var(--size-checkbox); margin: 0; accent-color: var(--color-ink); }
.send-check:has(input:disabled) { opacity: var(--opacity-disabled); cursor: default; }
.lab-input { width: 100%; height: var(--size-control); padding: 0 var(--space-14); border: var(--stroke) solid var(--color-field-edge); border-radius: var(--radius-field); background: var(--color-label); font-size: var(--text-body); transition: border-color var(--duration-fast) var(--ease-fade), box-shadow var(--duration-fast) var(--ease-fade); }
.lab-input:focus { outline: none; border-color: var(--color-ink); box-shadow: var(--ring-field-focus); }
.lab-input[aria-invalid="true"] { border-color: var(--color-critical); box-shadow: var(--ring-field-critical); }
/* One line under the form: an error in critical, or a quiet note in muted when sending is off. */
.lab-hint { min-height: var(--size-hint); font-size: var(--text-small); line-height: var(--leading-snug); color: var(--color-critical); }
.lab-hint:empty { min-height: 0; }
.lab-hint[data-quiet] { color: var(--color-ink-muted); }
.send-done { justify-items: center; align-content: center; gap: var(--space-4); }
.send-done-art { display: flex; gap: var(--space-12); color: var(--color-ink); }
.send-done-art .ico { width: var(--size-icon-strip); height: var(--size-icon-strip); }
.send-done-title { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-title); font-weight: var(--weight-semibold); line-height: var(--leading-status); }
.send-done-title svg { width: var(--size-icon-xl); height: var(--size-icon-xl); }

/* The Lab's action: ink on paper. Brass is the sign-up's alone. */
.lab-btn { position: relative; display: grid; place-items: center; width: 100%; min-height: var(--size-control); padding: 0 var(--space-22); border: 0; border-radius: var(--radius-field); background: var(--color-ink); color: var(--color-label); font-size: var(--text-body); font-weight: var(--weight-semibold); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-fade); }
.lab-btn:active { transform: scale(var(--scale-press)); }
.lab-btn:disabled { opacity: var(--opacity-disabled); cursor: default; transform: none; }
.lab-btn.quiet { width: auto; background: var(--color-label); color: var(--color-ink); box-shadow: var(--shadow-paper); transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-fade); }
@media (hover: hover) and (pointer: fine) { .lab-btn.quiet:hover { background: var(--color-label-hover); } }
.lab-btn .spinner { position: absolute; inset: 0; margin: auto; width: var(--size-icon-md); height: var(--size-icon-md); border-radius: 50%; border: var(--spinner-width) solid currentColor; border-right-color: transparent; opacity: 0; animation: spin var(--duration-spin) var(--ease-spin) infinite; animation-play-state: paused; }
.lab-btn[aria-busy="true"] .lab-btn-text { opacity: 0; }
.lab-btn[aria-busy="true"] .spinner { opacity: 1; animation-play-state: running; }
.lab-btn[aria-busy="true"] { cursor: progress; }

.round-btn { position: relative; display: grid; place-items: center; width: var(--size-tap); height: var(--size-tap); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink-muted); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-fade), background-color var(--duration-fast) var(--ease-fade); }
.round-btn svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.round-btn:active { transform: scale(var(--scale-press-arrow)); }
@media (hover: hover) and (pointer: fine) { .round-btn:hover { color: var(--color-ink); background: var(--color-label-hover); } }
.play { position: absolute; right: calc(-1 * (var(--size-tap) + var(--space-12))); bottom: 0; color: var(--color-ink); background: var(--color-board); }

/* ---------- The gallery: pictures and a count ---------- */
.gallery { margin-top: var(--space-96); }
.gallery-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-16); }
.gallery-head h2 { font-size: var(--text-section); }
.gallery-quiet { margin-top: var(--space-24); }
.entries { margin: var(--space-24) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
@media (min-width: 960px) { .entries { grid-template-columns: repeat(auto-fill, minmax(var(--width-entry), 1fr)); gap: var(--space-16); } }
.entry { position: relative; display: grid; padding: var(--space-8) var(--space-8) var(--space-4); container-type: inline-size; }
.entry.is-pick { grid-column: 1 / -1; }
.entry-icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); justify-items: center; gap: var(--space-12) var(--space-8); padding: var(--space-32) var(--space-4) var(--space-20); color: var(--color-ink); }
.entry.is-pick .entry-icons { grid-template-columns: repeat(8, minmax(0, 1fr)); padding-top: var(--space-48); }
@container (max-width: 280px) { .entry-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entry-icons .ico { width: var(--size-icon-choice); height: var(--size-icon-choice); }
.entry-foot { display: flex; align-items: center; justify-content: space-between; }
.entry.is-new { box-shadow: var(--ring-picked); }

/* Sadik's pick: a ribbon tab on the card's top edge, notched at its end. */
.pick-badge { position: absolute; top: var(--space-12); left: 0; padding: var(--space-4) var(--space-20) var(--space-4) var(--space-12); background: var(--color-ribbon); color: var(--color-on-ribbon); font-size: var(--text-caption); font-weight: var(--weight-semibold); line-height: var(--leading-caption); clip-path: polygon(0 0, 100% 0, calc(100% - var(--space-8)) 50%, 100% 100%, 0 100%); }

/* The vote: a bookmark and the count. Your vote is ink; the ribbon is only Sadik's. */
.vote { position: relative; display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--size-tap); padding: 0 var(--space-14) 0 var(--space-10); border: var(--stroke) solid transparent; border-radius: var(--radius-pill); background: transparent; font-size: var(--text-small); font-weight: var(--weight-semibold); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-fade), border-color var(--duration-fast) var(--ease-fade), color var(--duration-fast) var(--ease-fade); }
.vote svg { width: var(--size-icon-md); height: var(--size-icon-md); fill: none; }
.vote[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-label); }
.vote[aria-pressed="true"] svg { fill: currentColor; }
.vote:active { transform: scale(var(--scale-press)); }
@media (hover: hover) and (pointer: fine) { .vote[aria-pressed="false"]:not([aria-disabled="true"]):hover { background: var(--color-label-hover); } }
.vote[aria-disabled="true"], .vote[aria-disabled="true"]:active { cursor: default; transform: none; }
.more { margin: var(--space-32) auto 0; }
.more[hidden] { display: none; }

/* ---------- Closed: the result as a picture, and a line ---------- */
.result { margin-top: var(--space-32); padding: var(--space-12); }
.result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
@media (min-width: 960px) { .result-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.result-col { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--space-12); padding: var(--space-40) var(--space-12) var(--space-20); border-radius: var(--radius-field); background: var(--color-board); }
.result-col.is-final { background: var(--color-label); box-shadow: var(--shadow-paper); }
.result-col.is-final figcaption { font-size: var(--text-title); }
.result-icons { display: grid; grid-template-columns: repeat(4, minmax(0, var(--size-icon-result))); gap: var(--space-16); color: var(--color-ink); }
.result-col.is-final .result-icons { grid-template-columns: repeat(4, minmax(0, var(--size-icon-result-final))); gap: var(--space-24); }
.result-icons .ico { width: 100%; height: auto; aspect-ratio: 1; --_gap: var(--color-board); }
.result-col.is-final .result-icons .ico { --_gap: var(--color-label); }
.result-col figcaption { font-size: var(--text-small); font-weight: var(--weight-semibold); text-align: center; }
.result-line { margin: var(--space-16) 0 var(--space-8); font-size: var(--text-lede); color: var(--color-ink-muted); text-align: center; text-wrap: balance; }

/* ---------- How the Lab works: the (i) ---------- */
.lab-info { width: min(100% - 2 * var(--gutter), var(--width-join)); max-width: none; padding: var(--space-32) var(--space-24) var(--space-24); border: 0; color: var(--color-ink); }
.lab-info::backdrop { background: var(--color-scrim); }
.lab-info-close { position: absolute; top: var(--space-14); right: var(--space-14); }
.lab-info h2:focus { outline: none; }
.lab-info ul { margin-top: var(--space-12); padding-inline-start: var(--space-20); list-style: disc; color: var(--color-ink-muted); }
.lab-info li + li { margin-top: var(--space-6); }
.lab-info p { margin-top: var(--space-16); font-size: var(--text-small); }
.lab-info a, .lab-next a { text-decoration-thickness: from-font; text-underline-offset: var(--underline-offset); }

/* ---------- The Lab's index: a tile per experiment ---------- */
.lab-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--width-strip-card)), 1fr)); gap: var(--space-16); margin-top: var(--space-32); }
.lab-tile { display: grid; gap: var(--space-16); padding: var(--space-16); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-fade); }
.lab-tile-art { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: var(--space-16); padding: var(--space-40) var(--space-16); border-radius: calc(var(--radius-card) - var(--space-6)); background: var(--color-board); color: var(--color-ink); }
.lab-tile-art .ico { width: var(--size-icon-choice); height: var(--size-icon-choice); --_gap: var(--color-board); }
.lab-tile-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); padding: 0 var(--space-4) var(--space-4); }
.lab-tile-foot .name { min-width: 0; }
.lab-tile-state { font-size: var(--text-small); color: var(--color-ink-muted); white-space: nowrap; }
.lab-tile:active { transform: scale(var(--scale-press)); }
@media (hover: hover) and (pointer: fine) { .lab-tile:hover { background: var(--color-label-hover); } }
.lab-next { margin-top: var(--space-24); font-size: var(--text-small); color: var(--color-ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .strip button, .cards label, .segments span, .lab-btn, .round-btn, .vote, .lab-tile { transition: opacity var(--duration-fast) var(--ease-fade); }
  .strip button:active, .cards label:active, .segments label:active span, .lab-btn:active, .round-btn:active, .vote:active, .lab-tile:active, .range:active::-webkit-slider-thumb { transform: none; opacity: var(--opacity-pressed); }
  .lab-btn .spinner { animation-duration: calc(2 * var(--duration-spin)); }
}