/* ==========================================================================
   gymai.coach — the landing and the pages after the form.

   Built from `docs/design/handoff/project/website/GymAI Landing.dc.html` and
   `site/specs/landing.md`. The board draws every rule inline, as a design
   prototype does; this file is the same rules, named once and reused, which is
   what stops the fifth card diverging from the first.

   Nothing here is loaded from anywhere but this origin (landing.md R-17). The
   two typefaces are in `assets/fonts/` with their OFL notice beside them,
   because the licence requires the notice to travel with the files.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  /* The board's palette, and the contrast of every pair used on text was
     measured rather than assumed (landing.md R-28):
       #EFF3EC on #08211C  15.4:1   #C4D2C9 on #08211C  10.2:1
       #9BAAA2 on #08211C   6.9:1   #8A968E on #08211C   5.5:1
       #C6F24E on #08211C  13.0:1   #0A2A16 on #C6F24E  12.6:1
     The dimmest pair on the page clears AA at 4.5:1 with room to spare. */
  --ground: #08211C;
  --panel: #0A241F;
  --ink: #EFF3EC;
  --ink-body: #C4D2C9;
  --ink-dim: #9BAAA2;
  --ink-faint: #8A968E;
  --accent: #C6F24E;
  --accent-lift: #D8F97E;
  --accent-mark: #3CC3B2;
  --on-accent: #0A2A16;
  --warn: #E8A93C;

  --line: rgb(255 255 255 / 10%);
  --line-2: rgb(255 255 255 / 12%);
  --line-3: rgb(255 255 255 / 16%);
  --field: rgb(255 255 255 / 20%);

  --pad-x: clamp(20px, 4vw, 56px);
  --pad-y: clamp(64px, 8vw, 110px);
  --radius: 8px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lift); }
/* Underline the links inside running prose, where a colour alone is not enough
   to tell a reader that a word is a link — and NOT the navigation, which the
   board draws plain and which is unmistakably a set of links by its position. */
p a, li a, .legal a, .wl__consent a, .note a, .body a { text-decoration: underline; text-underline-offset: 3px; }
nav a, .mark { text-decoration: none; }

::selection { background: rgb(198 242 78 / 26%); }

/* One focus ring, on everything, and it is never removed — a person who moves
   by keyboard has to be able to see where they are (landing.md R-27). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -100px;
  z-index: 50;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transition: top 120ms ease;
}
.skip:focus { top: 12px; color: var(--on-accent); }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.mono--dim { color: var(--ink-dim); }

/* --- the bar ------------------------------------------------------------ */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
  padding: 0 var(--pad-x);
  background: rgb(8 33 28 / 82%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.mark { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.mark img { width: 30px; height: 30px; border-radius: 8px; display: block; flex: none; }
.mark span { font: 700 19px/24px var(--font-ui); letter-spacing: -.022em; }
.mark b { font-weight: 700; color: var(--accent-mark); }

.bar nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(13px, 2vw, 26px);
}
.bar nav a { font: 400 13px/18px var(--font-ui); color: var(--ink-dim); }
.bar nav a:hover { color: var(--ink); }

.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-body);
  white-space: nowrap;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.dot--beat { animation: beat 1400ms cubic-bezier(.32, .72, 0, 1) infinite; }

@keyframes beat {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

@media (width < 900px) {
  .bar nav a { display: none; }
}

/* --- sections ----------------------------------------------------------- */

.band {
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 46px);
}
.band--tint { background: rgb(255 255 255 / 2%); }

.band__head {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
}
.band__head > div { display: flex; flex-direction: column; gap: 15px; max-width: 720px; }
.band__aside { font: 400 16px/25px var(--font-ui); color: var(--ink-dim); margin: 0; max-width: 400px; }

h1, h2, h3 { margin: 0; letter-spacing: -.035em; text-wrap: balance; }
h2 { font: 700 clamp(30px, 3.6vw, 46px)/1.08 var(--font-ui); }
h3 { font: 600 18px/24px var(--font-ui); letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }

.lede { font: 400 17px/26px var(--font-ui); color: var(--ink-body); }
.note { font: 400 14px/22px var(--font-ui); color: var(--ink-dim); }
.body { font: 400 15px/23px var(--font-ui); color: var(--ink-body); }

.figure {
  font: 600 30px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--accent);
}

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(780px, 90vh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__photo, .cover { position: absolute; inset: 0; }
.hero__photo img, .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(8 33 28 / 74%) 0%, rgb(8 33 28 / 40%) 32%, rgb(8 33 28 / 94%) 80%, var(--ground) 100%);
}
.hero__inner {
  position: relative;
  padding: clamp(48px, 7vw, 88px) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1080px;
}
.hero h1 {
  font: 700 clamp(36px, 6.2vw, 76px)/1.03 var(--font-ui);
  letter-spacing: -.04em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__stand {
  font: 400 clamp(17px, 1.6vw, 22px)/1.5 var(--font-ui);
  color: #D6E0DA;
  max-width: 680px;
}
.hero__cta { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.hero__cta > strong { font: 600 17px/23px var(--font-ui); }

/* --- grids -------------------------------------------------------------- */

/* One hairline grid, drawn with a background showing through 1px gaps — the
   board's own device, and it keeps the rules even when a row is short. */
.hairline {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.hairline > * {
  flex: 1 1 30%;
  min-width: 250px;
  background: var(--ground);
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hairline--four > * { flex: 1 1 23%; min-width: 230px; }
.hairline--worlds > * { flex: 1 1 31%; padding: 0; }

.cards { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 24px); }
.card {
  flex: 1 1 340px;
  min-width: 290px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.step { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); }

.world { display: flex; flex-direction: column; }
.world__photo { height: 150px; position: relative; overflow: hidden; }
.world__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.world__text { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 9px; }
.world--point {
  background: rgb(198 242 78 / 6%);
  padding: 26px 24px 30px;
  justify-content: center;
  gap: 9px;
}
.world__none {
  height: 150px;
  display: flex;
  align-items: flex-end;
  padding: 16px 24px;
  background: rgb(255 255 255 / 3%);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.claim {
  font: 700 clamp(22px, 2.6vw, 32px)/1.24 var(--font-ui);
  letter-spacing: -.028em;
  max-width: 900px;
  text-wrap: balance;
}

/* --- the role selector -------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--ink);
  font: 600 14px/19px var(--font-ui);
  text-align: start;
}
.chip:hover { border-color: rgb(198 242 78 / 55%); }
/* Selection is carried by the border AND the background as well as the dot, so it does not depend
   on one 6px mark being seen (landing.md R-26). The rules that do it are the `#w-*:checked ~` ones
   further down: the selector is a group of NATIVE radios, so no `aria-checked` is ever written.
   Two rules keyed on `.chip[aria-checked="true"]` sat here matching nothing at all (D-644). */
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; visibility: hidden; }

.who {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  min-height: 300px;
}
.who__pane {
  flex: 1 1 380px;
  min-width: 290px;
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.who__pane h3 { font: 700 clamp(24px, 2.6vw, 32px)/1.16 var(--font-ui); letter-spacing: -.03em; }
.who__photo {
  flex: 1 1 300px;
  min-width: 260px;
  position: relative;
  min-height: 280px;
  border-inline-start: 1px solid var(--line-2);
  overflow: hidden;
}
.who__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- the app mock-ups --------------------------------------------------- */

.frames { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 34px); align-items: flex-start; }
.frame { flex: 1 1 300px; min-width: 280px; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.frame--wide { flex: 1 1 340px; min-width: 300px; max-width: none; }
.device {
  height: 600px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 70%);
}
.device--desk { border-radius: 12px; }
.frame__caption { font: 400 14px/22px var(--font-ui); color: var(--ink-dim); text-wrap: pretty; }
.frame__caption strong { font-weight: 600; color: var(--ink); }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.shot { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.shot__img { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
.shot__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot span { font: 600 14px/19px var(--font-ui); }
.shot small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim); }

/* --- privacy ------------------------------------------------------------ */

.split { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); }
.split > .split__main { flex: 1 1 440px; min-width: 300px; display: flex; flex-direction: column; gap: 20px; max-width: 660px; }
.split__main h2 { font: 700 clamp(30px, 3.8vw, 50px)/1.06 var(--font-ui); letter-spacing: -.038em; }
.stack {
  flex: 1 1 300px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: flex-start;
}
.stack > div { background: var(--panel); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.stack h3 { font: 600 16px/22px var(--font-ui); letter-spacing: 0; }

/* --- the gym band ------------------------------------------------------- */

.gyms { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.gyms__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgb(8 33 28 / 96%) 42%, rgb(8 33 28 / 72%));
}
.gyms__inner {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.gyms__text { flex: 1 1 480px; min-width: 300px; max-width: 680px; display: flex; flex-direction: column; gap: 22px; }
.gyms__text h2 { font: 700 clamp(30px, 4vw, 52px)/1.06 var(--font-ui); letter-spacing: -.038em; }
.bullets { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; }
.bullets li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 9px;
  flex: none;
}
.formbox {
  flex: 1 1 420px;
  min-width: 290px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  background: rgb(8 33 28 / 72%);
}
.formbox > strong { font: 600 17px/23px var(--font-ui); }

.pros {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  align-items: flex-start;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 40px);
}
.pros__text { flex: 1 1 280px; min-width: 260px; max-width: 380px; display: flex; flex-direction: column; gap: 11px; }
.pros__form { flex: 1 1 420px; min-width: 290px; }

/* --- the honest close --------------------------------------------------- */

.state { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); }
.state__intro { flex: 1 1 320px; min-width: 270px; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.state__intro h2 { font: 700 clamp(28px, 3.4vw, 42px)/1.1 var(--font-ui); }
.timeline { flex: 1 1 460px; min-width: 300px; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.timeline li {
  display: flex;
  gap: 22px;
  padding-bottom: 30px;
  padding-inline-start: 26px;
  border-inline-start: 1px solid var(--line-2);
  position: relative;
}
.timeline li:last-child { padding-bottom: 0; border-inline-start-color: transparent; }
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ground);
  border: 1px solid rgb(255 255 255 / 30%);
}
.timeline li.is-now::before { background: var(--accent); border-color: var(--accent); }
.timeline li > div { display: flex; flex-direction: column; gap: 7px; }
.timeline h3 { font: 600 17px/23px var(--font-ui); }

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

.foot {
  padding: clamp(32px, 4vw, 48px) var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.foot__by { display: flex; align-items: center; gap: 11px; }
.foot__by img { width: 20px; height: 20px; border-radius: 6px; display: block; }
.foot span, .foot a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a:hover { color: var(--accent); }

/* --- the form ----------------------------------------------------------- */

.wl { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 620px; }
.wl fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wl legend { padding: 0; }
.wl__group { display: flex; flex-direction: column; gap: 9px; }
.wl__group > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }

.wl__preset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wl__preset-chip {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border-radius: var(--radius);
  border: 1px solid rgb(198 242 78 / 45%);
  background: rgb(198 242 78 / 8%);
  font: 500 14px/19px var(--font-ui);
}
.linkish {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: 400 13px/18px var(--font-ui);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wl__fields { display: flex; flex-wrap: wrap; gap: 10px; }
.wl input[type="email"], .wl input[type="text"] {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 54px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid var(--field);
  background: rgb(255 255 255 / 4%);
  color: var(--ink);
  font: 400 16px/21px var(--font-ui);
}
.wl input::placeholder { color: var(--ink-dim); opacity: 1; }
.wl input:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.wl input[name="name"] { flex: 1 1 180px; }

.wl__consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.wl__consent input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--accent); }
.wl__consent span { font: 400 14px/21px var(--font-ui); color: var(--ink-body); text-wrap: pretty; }

.wl__go { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.button {
  cursor: pointer;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: 600 16px/21px var(--font-ui);
}
.button:hover { background: var(--accent-lift); }
.button[disabled] { opacity: .6; cursor: default; }
.wl__micro { font: 400 13px/20px var(--font-ui); color: var(--ink-dim); flex: 1 1 240px; min-width: 200px; text-wrap: pretty; }

/*
 * **`hidden` must beat every layout rule in this file, and until 2026-09-02 it beat none of them**
 * (D-636). The outcome panels carry `hidden` in the markup and `.wl__msg`/`.wl__error` declare
 * `display: flex` — a class selector outranks the browser's own `[hidden] { display: none }` — so
 * the landing shipped with `Sending…`, `Check your inbox` and `You are already on the list` all on
 * screen at once, with and without JavaScript. It was found by looking at the deployed page.
 *
 * `!important` is deliberate and is the one place it is right: `hidden` is a statement that an
 * element is not part of the page, and nothing about layout may overrule it.
 */
[hidden] { display: none !important; }

.wl__msg {
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wl__msg strong { font: 700 20px/26px var(--font-ui); letter-spacing: -.022em; }
.wl__msg--good { border-color: rgb(198 242 78 / 40%); background: rgb(198 242 78 / 7%); }
.wl__msg--wait { min-height: 54px; flex-direction: row; align-items: center; gap: 13px; padding: 16px 20px; }
.wl__error {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px solid rgb(232 169 60 / 45%);
  background: rgb(232 169 60 / 8%);
  border-radius: var(--radius);
  padding: 14px 16px;
  font: 400 14px/21px var(--font-ui);
}
.wl__error::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  margin-top: 7px;
  flex: none;
}
.wl__field-error { font: 400 14px/21px var(--font-ui); color: var(--warn); }

/* The honeypot: present for a machine, absent for a person and for a screen
   reader (site/specs/waiting-list.md R-24). `display:none` is what a bot skips,
   so it is moved out of the viewport instead — and taken out of the tab order
   and out of the accessibility tree. */
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- the mobile sticky bar ---------------------------------------------- */

.tail {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgb(8 33 28 / 94%);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2);
}
.tail.is-up { display: flex; }
.tail .button { min-height: 48px; padding: 0 18px; white-space: nowrap; }
.tail input { flex: 1; min-width: 0; }

@media (width >= 700px) {
  .tail, .tail.is-up { display: none; }
}

/* --- the pages after the form ------------------------------------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 6vw, 72px) var(--pad-x);
  gap: clamp(28px, 3.4vw, 44px);
}
.sheet {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--ground);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
}
.sheet--good { border-color: rgb(198 242 78 / 35%); }
.sheet h1 { font: 700 clamp(26px, 3vw, 36px)/1.12 var(--font-ui); letter-spacing: -.032em; }
.sheet p { font: 400 16px/25px var(--font-ui); color: var(--ink-body); }

/* The confirmation page's optional extras. **These were `style` attributes until 2026-09-02**, on
   the page a person reaches by pressing the button in their own confirmation email — so the rule,
   the offer's heading and the professional's aside had never rendered at all. `style-src 'self'`
   parses a style attribute into an empty declaration block (D-647, [[L-71]]); the sweep that found
   the thirty-four on the landing page did not reach the pages the server renders, and now
   `scripts/keel-site-inline` does. */
.sheet__offer { border-top: 1px solid var(--line-2); padding-top: 24px; max-width: 620px; }
.sheet__offer-title { font: 600 17px/23px var(--font-ui); }
.sheet__aside { border-top: 1px solid var(--line-2); padding-top: 20px; max-width: 620px; }

.legal { max-width: 780px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--pad-x); }
.legal h1 { font: 700 clamp(28px, 3.4vw, 42px)/1.1 var(--font-ui); margin-bottom: 12px; }
.legal h2 { font: 700 clamp(21px, 2.2vw, 26px)/1.2 var(--font-ui); margin: 44px 0 12px; }
.legal h3 { margin: 24px 0 6px; }
.legal p, .legal li { font: 400 16px/26px var(--font-ui); color: var(--ink-body); }
.legal p + p { margin-top: 14px; }
.legal ul { padding-inline-start: 22px; }
.legal li + li { margin-top: 8px; }

/* The legal documents (S-511, round 67 `35a`–`35h`): three documents, one row joining them, a word to change language.
   Grey is `--control-line`, the colour round 30 confirmed and round 67 draws for a closed section. */
.legal-bar { height: 62px; gap: 12px; }
.legal-bar__label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; padding-inline-start: 6px; }
.legal-bar__nav { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; }
.legal-bar__lang, .legal-bar__back { display: inline-flex; align-items: center; min-height: 44px; font: 400 14px/20px var(--font-ui); }
.legal-bar__lang { color: var(--ink); text-decoration: underline; text-decoration-color: rgb(198 242 78 / 50%); text-underline-offset: 4px; }
.legal-bar__back { color: var(--ink-dim); }
.legal-row { display: flex; gap: 26px; padding: 0 var(--pad-x); min-height: 52px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 3%); overflow-x: auto; }
.legal-row__link { display: flex; align-items: center; min-height: 52px; font: 400 15px/20px var(--font-ui); color: var(--ink-body); white-space: nowrap; }
.legal-row__link[aria-current="page"] { font-weight: 600; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.legal-row__short { display: none; }
.legal-doc { display: flex; align-items: flex-start; gap: 48px; max-width: 1180px; margin: 0 auto; padding: 38px var(--pad-x) 44px; }
.legal-doc .legal { flex: 1; min-width: 0; max-width: 720px; margin: 0; padding: 0; }
.legal__toc { flex: none; width: 236px; position: sticky; top: 24px; }
.legal__toc > summary { display: none; }
.legal__toc::details-content { content-visibility: visible; block-size: auto; }
.legal__toc ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.legal__toc li + li { margin-top: 0; }
.legal__toc a { font: 400 14px/21px var(--font-ui); color: var(--ink-body); text-decoration: none; }
.legal__toc a:hover { text-decoration: underline; }
.legal__toc .legal__toc-closed { color: var(--control-line); }
.legal__toc-key { display: flex; align-items: center; gap: 7px; padding-top: 12px; font: 400 10px/15px var(--font-mono); color: var(--control-line); }
.legal__toc-key span { width: 8px; height: 8px; border-radius: 3px; background: rgb(255 255 255 / 18%); flex: none; }
.legal__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.legal__head h1 { margin: 0; letter-spacing: -.036em; }
.legal .legal__dated { font: 400 12px/19px var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--ink-dim); margin: 0; }
.legal-services td.mono, .legal-card .mono { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-dim); }
.legal .legal__prevails { font: 400 15px/23px var(--font-ui); color: var(--ink-dim); margin: 0; }
.legal .legal__intro { border: 1px solid rgb(60 195 178 / 45%); border-radius: 10px; background: rgb(60 195 178 / 9%); padding: 17px 19px; font-size: 15px; line-height: 23px; }
.legal .legal__closed { border: 1px solid rgb(255 255 255 / 14%); border-radius: var(--radius); background: var(--fill-4); padding: 13px 15px; font-size: 14px; line-height: 21px; color: var(--ink-dim); }
.legal .table-wrap { overflow-x: auto; margin: 16px 0; }
.legal table { border-collapse: collapse; width: 100%; font: 400 14px/21px var(--font-ui); color: var(--ink-body); }
.legal th, .legal td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal thead th { font: 400 10px/15px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.legal code { font-family: var(--font-mono); font-size: .92em; }
.legal--services { max-width: 1000px; }
.legal-services table { border: 1px solid var(--line); }
.legal-services tbody th { font: 400 15px/22px var(--font-ui); color: var(--ink); }
.legal-services .legal-services__closed th { color: var(--ink-dim); }
.legal-services .legal-services__closed td.mono { color: var(--control-line); }
.legal__not-open { color: var(--ink-dim); }
.legal .legal__lede { font-size: 16px; line-height: 25px; margin: 0 0 26px; }
.legal .legal-cards { display: none; list-style: none; padding: 0; }
.legal .legal-card p + p { margin-top: 4px; }
.legal .legal-card .mono { font: 400 13px/19px var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--ink-dim); }
.legal .legal-card li + li { margin-top: 0; }
.legal-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.legal-card p { margin: 0; }
.legal-card__name { font-weight: 600; color: var(--ink); }
.legal-foot { max-width: 1180px; margin: 0 auto; padding: 24px var(--pad-x) 48px; border-top: 1px solid var(--line); }

@media (width < 900px) {
  .legal-doc { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 24px; }
  .legal-doc .legal { max-width: none; }
  .legal__toc { position: static; width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0 16px; }
  .legal__toc > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; font: 600 15px/20px var(--font-ui); }
  .legal__toc::details-content { content-visibility: hidden; block-size: 0; }
  .legal__toc[open]::details-content { content-visibility: visible; block-size: auto; padding-bottom: 14px; }
  .legal-row { gap: 20px; }
  .legal-row__long { display: none; }
  .legal-row__short { display: inline; }
  .legal-bar__back { display: none; }
  .bar .legal-bar__nav .legal-bar__lang { display: inline-flex; } /* the landing's bar hides its links here; 35b keeps this one */
  .legal-services table { display: none; }
  .legal .legal-cards { display: flex; flex-direction: column; gap: 10px; }
  .legal .legal-cards > li + li { margin-top: 0; }
}

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

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

/* The preset form: a real disclosure rather than a scripted swap, so "Change"
   works with no JavaScript at all (site/specs/waiting-list.md R-07). */
.wl__preset-box > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.wl__preset-box > summary::-webkit-details-marker { display: none; }
.wl__preset-open { padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }

/* The role selector, switched by checked radios rather than by script — it
   works with JavaScript off, gives arrow-key navigation and one tab stop for
   free, and announces the choice without a line of ARIA (landing.md R-19, R-26). */
.who__pane { display: none; }
#w-person:checked ~ .who .who__pane[data-role="person"] { display: flex; }
#w-person:checked ~ .chips label[for="w-person"] { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
#w-person:checked ~ .chips label[for="w-person"] .chip__dot { visibility: visible; }
#w-family:checked ~ .who .who__pane[data-role="family"] { display: flex; }
#w-family:checked ~ .chips label[for="w-family"] { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
#w-family:checked ~ .chips label[for="w-family"] .chip__dot { visibility: visible; }
#w-gym:checked ~ .who .who__pane[data-role="gym"] { display: flex; }
#w-gym:checked ~ .chips label[for="w-gym"] { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
#w-gym:checked ~ .chips label[for="w-gym"] .chip__dot { visibility: visible; }
#w-trainer:checked ~ .who .who__pane[data-role="trainer"] { display: flex; }
#w-trainer:checked ~ .chips label[for="w-trainer"] { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
#w-trainer:checked ~ .chips label[for="w-trainer"] .chip__dot { visibility: visible; }
#w-dietitian:checked ~ .who .who__pane[data-role="dietitian"] { display: flex; }
#w-dietitian:checked ~ .chips label[for="w-dietitian"] { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
#w-dietitian:checked ~ .chips label[for="w-dietitian"] .chip__dot { visibility: visible; }
#w-physio:checked ~ .who .who__pane[data-role="physio"] { display: flex; }
#w-physio:checked ~ .chips label[for="w-physio"] { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
#w-physio:checked ~ .chips label[for="w-physio"] .chip__dot { visibility: visible; }
#w-clinic:checked ~ .who .who__pane[data-role="clinic"] { display: flex; }
#w-clinic:checked ~ .chips label[for="w-clinic"] { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
#w-clinic:checked ~ .chips label[for="w-clinic"] .chip__dot { visibility: visible; }
#w-care:checked ~ .who .who__pane[data-role="care"] { display: flex; }
#w-care:checked ~ .chips label[for="w-care"] { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
#w-care:checked ~ .chips label[for="w-care"] .chip__dot { visibility: visible; }
#w-person:focus-visible ~ .chips label[for="w-person"], #w-family:focus-visible ~ .chips label[for="w-family"], #w-gym:focus-visible ~ .chips label[for="w-gym"], #w-trainer:focus-visible ~ .chips label[for="w-trainer"], #w-dietitian:focus-visible ~ .chips label[for="w-dietitian"], #w-physio:focus-visible ~ .chips label[for="w-physio"], #w-clinic:focus-visible ~ .chips label[for="w-clinic"], #w-care:focus-visible ~ .chips label[for="w-care"] { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The form's own role chips: a real radio and its label, so the group is one tab
   stop with arrow-key navigation and needs no ARIA (site/specs/waiting-list.md
   R-08). Each form is its own group because a radio group is scoped to its form
   owner — which is what lets the same `rol` name appear three times on the page. */
.wl input[type="radio"]:checked + .chip { border-color: var(--accent); background: rgb(198 242 78 / 8%); }
.wl input[type="radio"]:checked + .chip .chip__dot { visibility: visible; }
.wl input[type="radio"]:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 3px; }
.wl .chip { font-weight: 500; }

/* ── The three device mock-ups (landing.md R-11) ──────────────────────────────
   **Drawings of the product, not screenshots** — no capture of the real app is
   used until there is one with the catalogue's imagery in it (R-11,
   LANDING-BRIEF.md §5.1). The section existed with only the picture strip in it
   for as long as the page has been live, and the specification described these
   in the present tense (D-647).

   **Every frame is `aria-hidden`, and the caption carries the meaning.** These
   are illustrations of an interface, so a screen reader announcing "7:12, JC,
   Today Thursday, Start the session" reads out a UI that is not there and cannot
   be operated. The `<figcaption>` is the accessible equivalent, which is the
   alt-text pattern applied to markup instead of an image. Nothing inside is
   focusable — every control is a `<span>`, never a button — so the frame hides
   no operable element. */
/* The OUTER shell already existed — `.frames`, `.frame`, `.frame--wide`, `.device`, `.device--desk`
   and `.frame__caption`, written for R-11 and never given any markup to style. Only the interior
   below is new; duplicating the shell is what collided with it and squashed every frame to 538px
   (D-647). A `<figure>` needs its margin cleared, and that is the only addition. */
.frame { margin: 0; }

.dv__status { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.dv__battery { width: 16px; height: 8px; border: 1px solid var(--ink-faint); border-radius: 2px; }
.dv__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 11px 17px 16px; }
.dv__bar--set { padding-bottom: 14px; }
.dv__bar img { width: 20px; height: 20px; border-radius: 6px; display: block; flex: none; }
.dv__mark { font: 700 15px/20px var(--font-ui); letter-spacing: -.02em; }
.dv__mark b { color: var(--accent); font-weight: inherit; }
.dv__avatar { margin-inline-start: auto; width: 26px; height: 26px; border-radius: 7px; background: rgb(255 255 255 / 7%); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-body); }
.dv__back { width: 38px; height: 38px; flex: none; border-radius: 8px; border: 1px solid var(--line-3); display: flex; align-items: center; justify-content: center; }
.dv__back svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dv__where { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dv__where span:first-child { font: 600 14px/18px var(--font-ui); }
.dv__clock { font-family: var(--font-mono); font-size: 13px; color: var(--ink-body); }

.dv__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.dv__head { flex: none; padding: 0 17px 18px; display: flex; flex-direction: column; gap: 5px; }
.dv__title { font: 700 26px/31px var(--font-ui); letter-spacing: -.03em; }
.dv__sub { font: 400 14px/21px var(--font-ui); color: var(--ink-dim); }

.dv__sets { flex: none; display: flex; align-items: center; gap: 9px; padding: 0 17px 15px; }
.dv__sets > .mono { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.dv__pips { display: flex; gap: 4px; }
.dv__pips span { width: 22px; height: 5px; border-radius: 2px; box-sizing: border-box; border: 1px solid var(--field); }
.dv__pips .is-done { background: var(--accent); border-color: var(--accent); }
.dv__pips .is-now { border: 1.5px solid var(--accent); }
.dv__count { font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); margin-inline-start: auto; }

.dv__shot { flex: none; position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dv__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv__shot--ramp { height: 120px; }
.dv__shot--ramp img { opacity: .42; filter: grayscale(1); }
.dv__shot--ramp .dv__veil { background: linear-gradient(to top, var(--ground) 6%, rgb(8 33 28 / 50%)); }
.dv__shot--ramp span:last-child { position: absolute; inset-inline-start: 17px; bottom: 15px; font: 600 16px/21px var(--font-ui); }
.dv__shot--set { height: 140px; }
.dv__shot--set img { object-position: 50% 45%; opacity: .72; }
.dv__shot--set .dv__veil { background: linear-gradient(to top, var(--ground) 4%, rgb(8 33 28 / 55%) 58%, rgb(8 33 28 / 25%)); }
.dv__veil { position: absolute; inset: 0; }
.dv__over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 17px; }
.dv__over strong { font: 700 22px/27px var(--font-ui); letter-spacing: -.03em; }

.dv__list { flex: 1; padding: 16px 17px; display: flex; flex-direction: column; gap: 10px; }
.dv__row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px 9px 9px; }
.dv__row img { width: 38px; height: 38px; flex: none; border-radius: 6px; object-fit: cover; display: block; }
.dv__row span { flex: 1; min-width: 0; font: 600 14px/19px var(--font-ui); }
.dv__row small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-body); }
.dv__go { margin-top: auto; min-height: 52px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font: 600 16px/21px var(--font-ui); }

.dv__load { flex: none; padding: 18px 17px 19px; display: flex; flex-direction: column; gap: 11px; border-bottom: 1px solid var(--line); }
.dv__weigh { display: flex; align-items: flex-end; gap: 10px; }
.dv__kg { font: 600 58px/.84 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.dv__units { display: flex; flex-direction: column; gap: 3px; padding-bottom: 7px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-body); }
.dv__side { font: 400 11px/16px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-dim); white-space: nowrap; }

.dv__ask { flex: 1; padding: 17px 17px 19px; display: flex; flex-direction: column; gap: 4px; }
.dv__ask > strong { font: 700 19px/24px var(--font-ui); letter-spacing: -.024em; }
.dv__ask > .dv__sub { font-size: 13px; line-height: 19px; text-wrap: pretty; }
.dv__answers { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.dv__answer { min-height: 56px; border: 1px solid var(--line-3); border-radius: var(--radius); display: flex; align-items: center; gap: 12px; padding: 0 15px; }
.dv__answer svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-body); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dv__answer span { display: flex; flex-direction: column; gap: 2px; }
.dv__answer span span:first-child { font: 600 15px/19px var(--font-ui); }
.dv__answer small { font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); }
.dv__answer--take { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.dv__answer--take svg { stroke: currentcolor; stroke-width: 2.4; }
.dv__answer--take small { color: #12351F; }

.dv__nav { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 52px; border-bottom: 1px solid var(--line); }
.dv__nav img { width: 22px; height: 22px; border-radius: 6px; display: block; flex: none; }
.dv__nav .dv__mark { font-size: 14px; line-height: 19px; }
.dv__rule { width: 1px; height: 18px; background: rgb(255 255 255 / 14%); }
.dv__tab { font: 400 12px/17px var(--font-ui); color: var(--ink-dim); }
.dv__tab--on { font-weight: 600; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 3px; }
.dv__body { flex: 1; padding: 22px 20px; display: flex; flex-direction: column; gap: 18px; }
.dv__cap { display: flex; flex-direction: column; gap: 5px; }
.dv__cap strong { font: 700 21px/26px var(--font-ui); letter-spacing: -.026em; }
/* `flex: none` is load-bearing: as an ordinary flex item the 130px is treated as indefinite while
   the column resolves, so every bar's percentage height collapsed to zero and the chart rendered as
   an empty gap (D-647). */
/* **The bar heights are a calc, and the inline declaration needs the SPACE after its colon
   (D-647).** Two separate silent failures met here, and each rendered an empty gap that no test
   counting twelve spans would notice:
     1. `height: 38%` — the board's own form — computes to `0px`, because the containing block's
        height is not definite while the surrounding column resolves.
     2. `style="--h:38"` is DROPPED by Chrome's inline-style parser; `style="--h: 38"` is kept.
        Measured: the same element read back `""` for `--h` before and `38` after, and its height
        went from `0px` to `49.39px` with nothing else changed.
   The board's numbers stay verbatim in the markup, and the height is derived from the chart's own
   height so the two cannot drift. `tests/e2e/site.spec.js` asserts the bars have real height, which
   is the assertion that was missing while both bugs were live. */
.dv__chart { display: flex; align-items: flex-end; gap: 6px; --chart-h: 130px; height: var(--chart-h); flex: none; }
.dv__chart span { flex: 1; height: calc(var(--h) / 100 * var(--chart-h)); background: rgb(255 255 255 / 12%); border-radius: 3px; }
.dv__chart .is-now { background: var(--accent); }
.dv__read { font: 400 14px/21px var(--font-ui); color: var(--ink-body); text-wrap: pretty; }
.dv__stats { display: flex; gap: 14px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: auto; }
.dv__stats div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dv__stats b { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.dv__stats small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim); }

@media (prefers-reduced-motion: no-preference) { /* nothing animates here; the frames are static drawings */ }

/* ── The utilities that replace inline `style` attributes (D-647) ─────────────
   **A `style` attribute on this site does NOTHING.** `SECURITY_HEADERS` sets
   `style-src 'self'` with no `unsafe-inline`, so the browser parses the
   attribute and produces an EMPTY declaration block — measured: an element whose
   attribute read `--h: 38` reported `""` for that property and `0px` for its
   height. Thirty-four of them were on the built page, and every design intent
   they carried had never rendered: the picture-strip heading was displaying at
   the full section size, and eighteen paragraphs were the wrong colour.

   The failure is invisible from both sides — the markup looks right and the page
   looks plausible — which is why `scripts/keel-site-inline` now fails the build
   on any `style` attribute at all, rather than leaving this to be rediscovered. */
.t-body { color: var(--ink-body); }
.t-ink { color: var(--ink); }
.t-bright { color: #D6E0DA; }
.t-strong { font-weight: 600; color: var(--ink); }
.t-17 { font-size: 17px; line-height: 23px; }
.t-19 { font-size: 19px; line-height: 25px; }
.t-26 { color: var(--ink); font-size: 26px; }
.mw-none { max-width: none; }
.mw-720 { max-width: 720px; }
.mw-760 { max-width: 760px; }
.h2--lead { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; }
.h2--sub { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; font-weight: 600; }

/* The twelve bars, in the board's own proportions. In CSS rather than on the
   element for the reason above: the attribute would be discarded in silence. */
.dv__chart span:nth-child(1) { --h: 38; }
.dv__chart span:nth-child(2) { --h: 44; }
.dv__chart span:nth-child(3) { --h: 42; }
.dv__chart span:nth-child(4) { --h: 53; }
.dv__chart span:nth-child(5) { --h: 58; }
.dv__chart span:nth-child(6) { --h: 49; }
.dv__chart span:nth-child(7) { --h: 64; }
.dv__chart span:nth-child(8) { --h: 71; }
.dv__chart span:nth-child(9) { --h: 68; }
.dv__chart span:nth-child(10) { --h: 82; }
.dv__chart span:nth-child(11) { --h: 90; }
.dv__chart span:nth-child(12) { --h: 100; }

/* The administration screen (site/specs/admin.md, D-652). An operator tool on the site's own
   stylesheet rather than a product screen — it has no artboard and none was requested, because
   inventing one would be the DR-029 mistake in reverse. Deliberately plain: it shows numbers. */
.admin__table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.admin__table th, .admin__table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.admin__table thead th { font: 600 13px/18px var(--font-ui); color: var(--ink-dim); text-transform: uppercase; letter-spacing: .04em; }
.admin__table tbody th, .admin__table tfoot th { font: 400 16px/24px var(--font-ui); }
.admin__table tfoot th, .admin__table tfoot td { font-weight: 600; border-bottom: 0; }
.admin__n { font-variant-numeric: tabular-nums; font: 400 16px/24px var(--font-ui); }
/* 64 px targets, which this product asserts on every control it ships. */
.button--quiet { background: transparent; color: var(--ink-body); border: 1px solid var(--line-2); }
/* D-1139 — `.button:hover` fills with the lime accent; on a quiet button that put pale text on pale lime. The boards hover an outlined
   button with a faint wash (`rgba(255,255,255,.06)`); `--fill-7` is the nearest token, and the text keeps its contrast. */
.button--quiet:hover { background: var(--fill-7); }
.admin__table .button { min-height: 44px; display: inline-flex; align-items: center; }
/* R-10b (D-1031): the gym list is four columns of free text, so at a phone width the TABLE scrolls
   inside its own box and the page never does. */
.admin { min-width: 0; }
/* `position: relative` contains the visually-hidden labels inside the scroll box: an absolutely placed
   `.vh` span in a cell beyond the fold otherwise widens the DOCUMENT, which is what still scrolled the
   page sideways at 360 once the counts table sat in its own box (D-1037's defect). */
.admin__scroll { overflow-x: auto; max-width: 100%; position: relative; }
.admin__scroll .admin__table td, .admin__scroll .admin__table th { white-space: nowrap; }

/* The owner's moderation panel (S-303b + S-303c, board `27a` `27e` `27l` `27m` `27n` `27v` `27y`).
   **The tokens round 30 confirmed (ruling 18)** — the control border `#7C8A82`, the neutral marker at 22 %, and the
   4 / 5 / 7 % fills — and the site's own 8 % warning tint, which round 30 ruled the board's 10 % to be drift from. */
:root {
  --control-line: #7C8A82;
  --marker: rgb(255 255 255 / 22%);
  --fill-4: rgb(255 255 255 / 4%);
  --fill-5: rgb(255 255 255 / 5%);
  --fill-7: rgb(255 255 255 / 7%);
}
.mod { width: 100%; max-width: 1100px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.mod__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); padding-bottom: 12px; }
.mod__place { font: 400 11px/16px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.mod__who { display: inline-flex; align-items: center; gap: 8px; font: 400 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.mod__pill { font: 600 11px/16px var(--font-mono); letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--control-line); color: var(--ink-body); }
.mod__pill--owner { border-color: var(--accent); color: var(--accent); }
/* S-314 — the owner's one way to *Who can decide*. A moderator never sees it, and the path refuses them anyway. */
.mod__who-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 400 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.mod__queue { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mod__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; }
.mod__bar h1 { font: 700 22px/28px var(--font-ui); letter-spacing: -.028em; }
.mod__count { font: 600 13px/18px var(--font-mono); color: var(--accent); }
.mod__counting { font: 400 11px/16px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.mod__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.mod__chip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--control-line); background: none; color: var(--ink-body); font: 400 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.mod__chip--none { color: var(--ink-dim); border-color: var(--line-3); }
.mod__chip-n { font: 600 11px/16px var(--font-mono); color: var(--accent); }
.mod__chip--none .mod__chip-n { color: var(--ink-dim); }
.mod__total { margin: 0; }
.mod__placeholder { display: flex; align-items: center; gap: 16px; min-height: 72px; border-bottom: 1px solid var(--line); }
.mod__placeholder-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mod__bar-ghost { height: 12px; border-radius: 3px; background: rgb(255 255 255 / 6%); }
.mod__bar-ghost--lead { width: 44%; background: rgb(255 255 255 / 9%); }
.mod__bar-ghost--under { width: 66%; }
.mod__bar-ghost--end { width: 96px; flex: none; }
.mod__body { display: flex; flex-direction: column; min-width: 0; }
.mod__rows { list-style: none; margin: 0; padding: 0; }
.mod__row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 70px auto; align-items: center; gap: 2px 14px; min-height: 66px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mod__row > .mod__kind { grid-column: 1; grid-row: 1 / span 2; }
.mod__row > .mod__record { grid-column: 2; grid-row: 1; }
.mod__row > .mod__main { grid-column: 2; grid-row: 2; }
.mod__row > .mod__days { grid-column: 3; grid-row: 1 / span 2; }
.mod__row > .mod__take, .mod__row > .mod__taken { grid-column: 4; grid-row: 1 / span 2; }
.mod__row > .mod__main:empty { display: none; }
.mod__kind { font: 400 10px/14px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.mod__days { font: 400 11px/16px var(--font-mono); color: var(--ink-dim); }
.mod__days { white-space: nowrap; }
.mod__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mod__record { font: 500 15px/21px var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.mod__taken { font: 400 13px/18px var(--font-mono); color: var(--ink-body); white-space: nowrap; }
.mod__take { min-height: 44px; padding: 0 18px; border-color: var(--control-line); }
/* `27e` (D-1173's last step) — a re-claim's line on its row, mono 12 dim, and its note, 400 14/21 in the body ink. */
.mod__reclaim { font: 400 12px/18px var(--font-mono); color: var(--ink-dim); overflow-wrap: anywhere; }
.mod__reclaimNote,
.mod__heldNote { font: 400 14px/21px var(--font-ui); color: var(--ink-body); }
.mod__phone-note { display: none; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--fill-5); font: 400 15px/23px var(--font-ui); color: var(--ink-body); text-wrap: pretty; }
.mod__phone-note::before { content: ''; width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--warn); margin-top: 6px; }
/* `27aj` — what a dispute shows only on a phone; `.mod__desk-only` is what it hides there. */
.mod__phone-only { display: none; }
.mod__phone-lead { margin: 0; font: 400 15px/23px var(--font-ui); color: var(--ink-body); }
.mod__phone-card { flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--fill-5); }
.mod__phone-card h2 { font: 600 16px/23px var(--font-ui); }
.mod__phone-card p { margin: 0; font: 400 14px/21px var(--font-ui); color: var(--ink-body); }
.mod__phone-card strong { color: var(--ink); font-weight: 600; }
.mod__phone-card .button { width: 100%; min-height: 52px; }
/* `27am` + `27ak` (D-1133) — a flag on a phone: the head's days, the item lines, and full-width acts (56 px first, as drawn). */
.mod__phone-days { font: 400 11px/16px var(--font-mono); color: var(--ink-dim); }
/* Scoped to the detail so it outranks `.mod__block` and `.mod__acts`, which set `display: flex` further down. */
.mod__detail .mod__phone-block, .mod__detail .mod__phone-days { display: none; }
.mod__detail .mod__acts.mod__acts--full { flex-direction: column; align-items: stretch; }
.mod__detail .mod__acts--full .button { width: 100%; min-height: 52px; }
.mod__detail .mod__acts--full .button:first-child { min-height: 56px; }
.mod__reasons--tall .mod__reason { min-height: 52px; align-items: center; }
.mod__notice { flex-wrap: wrap; row-gap: 8px; }
/* `27l` is NOT one of `27y`'s cards. A failure and an item somebody else settled are things that happened; an empty queue is
   the absence of things, and it is drawn as the sentence alone — no card, no marker, nothing that reads as a state to clear. */
.mod__notice.mod__notice--plain { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; }
.mod__notice.mod__notice--plain::before { content: none; }
.mod__notice h2 { font: 700 20px/26px var(--font-ui); letter-spacing: -.02em; }
.mod__notice p { font: 400 15px/23px var(--font-ui); color: var(--ink-body); margin: 0; }
.mod__notice .button { min-height: 44px; }
.mod__fail, .mod__notice { display: flex; gap: 13px; align-items: flex-start; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--fill-4); font: 400 15px/23px var(--font-ui); color: var(--ink-body); }
.mod__fail::before, .mod__notice::before { content: ''; width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--marker); margin-top: 7px; }
.mod__notice { flex-wrap: wrap; }
.mod__notice > * { flex: 1 1 100%; }
.mod__gone { display: flex; flex-direction: column; gap: 12px; }
.mod__gone h1 { font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--font-ui); }
.mod__gone .button { min-height: 44px; }
/* `27m` — the one failure state is not amber: nothing failed part way, the device was simply not given a key. */
/* A30 (`27m`) — the door has ONE way in and it carries the emphasis: the passkey at the board's 58 px, in the lime. Its one
   failure state is the opposite — nothing failed and nothing stopped part way, so it takes the NEUTRAL marker on a hairline and
   nothing in it looks pressable. Amber here would tell somebody standing at a locked door that they did something wrong. */
.sheet [data-admin-signin] { min-height: 58px; }
.mod__door-fail { display: flex; flex-wrap: wrap; gap: 7px 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; background: var(--fill-5); padding: 18px; }
.mod__door-fail::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--marker); margin-top: 7px; }
.mod__door-fail p { flex: 1 1 100%; margin: 0; font: 400 15px/23px var(--font-ui); color: var(--ink-body); }
.mod__door-fail p:first-of-type { flex: 1; }
.mod__door-fail strong { font: 600 17px/24px var(--font-ui); color: var(--ink); }
/* `27bg` — the link under the passkey button is quiet (almost nobody here wants it) and still a 44 px target. */
/* Its own field treatment, as `27bg` draws it — the control border and a 58 px field, not the waiting-list form's `.wl input`. */
.mod__door-code-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border-radius: 6px; font: 400 16px/23px var(--font-ui); color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.mod__door-code-open:hover { color: var(--ink-body); }
.mod__door-code { display: flex; flex-direction: column; gap: 16px; }
.mod__door-code h2 { font: 700 22px/28px var(--font-ui); letter-spacing: -.02em; }
.mod__door-code h2:focus { outline: none; }
.mod__door-code label { display: flex; flex-direction: column; gap: 8px; font: 400 16px/22px var(--font-ui); color: var(--ink); }
.mod__door-code input { min-height: 58px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--control-line); background: none; color: var(--ink); font: 400 16px/22px var(--font-ui); }
.mod__door-code input[name="code"] { max-width: 300px; font-family: var(--font-mono); font-size: 20px; letter-spacing: .14em; }
.mod__door-code input::placeholder { color: var(--ink-dim); opacity: 1; }
.mod__door-code input:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.mod__door-code label .note { font: 400 12px/16px var(--font-mono); color: var(--ink-dim); }
.mod__door-code .button { align-self: flex-start; }

/* S-303d–g — the detail views (27i 27x 27z 27b 27w 27g 27p 27t 27o 27y). One column at 834 (27w), the dispute keeps its two. */
.mod__open { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 15px/21px var(--font-ui); text-align: left; cursor: pointer; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--control-line); text-underline-offset: 3px; }
.mod__detail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mod__detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mod__detail-head h1 { flex: 1 1 100%; font: 700 30px/36px var(--font-ui); letter-spacing: -.033em; overflow-wrap: anywhere; }
/* A9 (`27b`, `27i`, `27g`, `27k`, `27o`, `27ac`) — the way back is the chrome's 44 px icon, outlined at the control line, and it
   carries its name for anybody who cannot see the chevron. */
.mod__back { width: 44px; height: 44px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--control-line); border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.mod__back:hover { background: var(--fill-7); }
.mod__back svg { width: 17px; height: 17px; }
/* A10 — every outlined control on this panel borders at the board's control line, not at the site's faint hairline: at 1180
   these sit on a dark field beside a lime act, and `--line-2` is below the 3:1 a non-text control owes. */
.mod .button--quiet { border-color: var(--control-line); }
.mod__detail .button { min-height: 44px; }
.mod__acts--pair { flex-direction: column; align-items: stretch; max-width: 660px; }
.mod__acts--pair .button { min-height: 58px; justify-content: flex-start; text-align: start; font: 600 16px/22px var(--font-ui); padding: 0 20px; }
.mod__detail .mod__release .button { min-height: 52px; padding: 0 18px; color: var(--ink-body); font: 400 15px/21px var(--font-ui); }
.mod__send { min-height: 52px; font: 600 16px/22px var(--font-ui); }
/* A10 (`27b`) — the dispute's four acts are peers at 48 px, side by side: neither outcome is the ordinary one. */
.mod__acts--peers .button { min-height: 48px; padding: 0 16px; }
/* S-304 (`27j`) — the value search: one field, and the matches as a radio list at the board's 52 px rows. */
.mod__find-label { font: 400 15px/21px var(--font-ui); color: var(--ink); }
.mod__find { min-height: 52px; max-width: 420px; width: 100%; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--control-line); border-radius: 8px; background: none; color: var(--ink); font: 400 16px/22px var(--font-ui); }
.mod__find:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.mod__values { display: flex; flex-direction: column; max-width: 420px; }
.mod__value { display: flex; align-items: center; gap: 11px; min-height: 52px; cursor: pointer; border-radius: 8px; }
.mod__value:hover { background: var(--fill-5); }
.mod__value input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent); }
.mod__value-name { font: 400 16px/22px var(--font-ui); color: var(--ink); }
.mod__value-group { display: block; font: 400 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }

/* `27bf` — **Who can decide** (S-314). It borrows the panel's chrome (`.mod`) and adds only its own list and form. */
.ops__body { display: flex; flex-direction: column; min-width: 0; }
.ops__rows { list-style: none; margin: 0; padding: 0; }
.ops__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ops__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ops__who p { margin: 0; font: 400 14px/21px var(--font-ui); color: var(--ink-body); }
.ops__name { font: 600 16px/22px var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.ops__facts { font: 400 12px/18px var(--font-mono); color: var(--ink-dim); overflow-wrap: anywhere; }
/* A pending addition cannot open the panel, which is a state of the ROW and the one thing amber says on this surface. */
.ops__pending { color: var(--warn); }
.ops__note { font: 400 14px/21px var(--font-ui); color: var(--ink-dim); }
.ops__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ops__acts .button { min-height: 44px; }
.ops__ask { flex: 1 1 100%; margin: 0; font: 400 15px/23px var(--font-ui); color: var(--ink-body); text-wrap: pretty; }
.ops__fail { margin: 0; display: flex; gap: 13px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--fill-4); font: 400 15px/23px var(--font-ui); color: var(--ink-body); }
.ops__fail::before { content: ''; width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--marker); margin-top: 7px; }
.ops__fail strong { color: var(--ink); font-weight: 600; }
.ops__add h2 { font: 400 11px/16px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.ops__fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ops__fields label { flex: 1 1 280px; display: flex; flex-direction: column; gap: 7px; font: 400 15px/21px var(--font-ui); color: var(--ink); }
.ops__fields input { min-height: 56px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--control-line); border-radius: 8px; background: rgb(0 0 0 / 25%); color: var(--ink); font: 400 16px/22px var(--font-ui); }
.ops__fields input:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.ops__fields input::placeholder { color: var(--ink-dim); opacity: 1; }
.ops__fields .button { flex: none; min-height: 56px; }
@media (width < 700px) { .ops__fields .button { width: 100%; } }
/* A20 (`27o`) — the way back is the only thing to do on this screen, so it is the lime one at the board's 56 px. */
.mod__detail .mod__back-lime { min-height: 56px; padding: 0 20px; }
.mod__sub { margin: 0; font: 400 13px/18px var(--font-mono); color: var(--ink-dim); overflow-wrap: anywhere; }
/* `27am`'s *reported {day}* sits inside a block; `.mod__block p` would otherwise set it in body type. */
.mod__block p.mod__sub { font: 400 13px/18px var(--font-mono); color: var(--ink-dim); }
.mod__block { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.mod__block--first { border-inline-start: 3px solid var(--marker); padding-inline-start: 14px; }
/* Round 48 (D-1140) — an answer to a question we asked: the lime framing and *ANSWERED* are the item's state, at every width. */
.mod__block--answered { border-color: rgb(198 242 78 / 35%); }
.mod__block--answered h2 { color: var(--accent); }
.mod__answered { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; color: var(--accent); }
.mod__detail-head .mod__top-line { flex: 1 1 100%; }
.mod__block h2 { font: 400 11px/16px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.mod__block h3 { font: 500 12px/16px var(--font-mono); color: var(--ink-dim); text-transform: lowercase; }
.mod__block p { margin: 0; font: 400 15px/23px var(--font-ui); color: var(--ink-body); overflow-wrap: anywhere; }
.mod__mono { font: 400 14px/21px var(--font-mono) !important; color: var(--ink) !important; }
/* Round 53 item 20 (D-1229) — a stamp is typed lower case and upper-cased by the style. */
.mod__caps { text-transform: uppercase; letter-spacing: .06em; }
.mod__plain { white-space: pre-wrap; color: var(--ink) !important; }
.mod__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mod__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mod__acts p { flex: 1 1 100%; }
.mod__reasons { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mod__reasons legend { font: 500 12px/16px var(--font-mono); color: var(--ink-dim); text-transform: lowercase; margin-bottom: 4px; }
.mod__reason { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 10px; align-items: start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--fill-5); cursor: pointer; }
.mod__reason input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.mod__reason span { font: 500 15px/21px var(--font-ui); color: var(--ink); }
.mod__reason q { grid-column: 2; font: 400 14px/21px var(--font-ui); color: var(--ink-body); quotes: '“' '”'; }
.mod__preview { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; max-width: 640px; }
.mod__preview--filled { padding: 16px; gap: 8px; background: var(--fill-4); }
.mod__preview .mod__label { font: 400 11px/16px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
/* `27g` — the record is named by its address, read back in mono on the neutral rule, never by the typed name (D-988). */
.mod__preview .mod__mono { border-inline-start: 2px solid var(--marker); padding-inline-start: 10px; }
.mod__history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mod__history li { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 14px/21px var(--font-ui); color: var(--ink-body); }
.mod__history strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .mod__sides--one { grid-template-columns: minmax(0, 1fr); }
}
/* A24 (`27c`) — at a tablet the row stacks: its kind, its name and its days on one line, what it says under them, and
   *Take it* on its own line at the start. The single line of 1180 does not fit 834 without the name losing its width. */
@media (700px <= width < 1180px) {
  .mod__row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px 12px; padding: 16px 0; }
  .mod__row > .mod__kind { grid-column: 1; grid-row: 1; }
  .mod__row > .mod__record { grid-column: 2; grid-row: 1; }
  .mod__row > .mod__days { grid-column: 3; grid-row: 1; justify-self: end; }
  .mod__row > .mod__main { grid-column: 1 / -1; grid-row: 2; }
  .mod__row > .mod__take, .mod__row > .mod__taken { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
}
@media (width < 700px) {
  .mod__row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px 9px; padding: 16px 0; }
  .mod__row > .mod__kind { grid-column: 1; grid-row: 1; }
  .mod__row > .mod__days { grid-column: 2; grid-row: 1; justify-self: end; }
  .mod__row > .mod__record { grid-column: 1 / -1; grid-row: 2; }
  .mod__row > .mod__main { grid-column: 1 / -1; grid-row: 3; }
  /* A11 (`27v`) — *Take it* fills the row at 360: a phone has one column, and a start-aligned control there would be
     the only one on the panel that does not fill it. */
  .mod__row > .mod__take, .mod__row > .mod__taken { grid-column: 1 / -1; grid-row: 4; justify-self: stretch; }
  .mod__take { min-height: 52px; font: 600 16px/22px var(--font-ui); }
  /* `27v` — a dispute is not decided on a phone, and says so on its row instead of offering Take it. */
  .mod__phone-note { display: flex; }
  .mod__row--dispute { background: rgb(255 255 255 / 4%); }
  .mod__row--dispute .mod__take { display: none; }
  /* `27aj` — a dispute opened here is read, not decided: both sides stacked, the card, and no decide control. */
  .mod__phone-lead { display: block; }
  .mod__phone-card { display: flex; }
  /* `27am` — a flag opened here: the days, the item lines and the two full-width acts. */
  .mod__detail .mod__phone-days { display: inline; }
  .mod__detail .mod__phone-block { display: flex; }
  .mod__detail .mod__phone-block:not(.mod__acts) { flex-direction: column; gap: 8px; }
  /* Round 48 (D-1138) — *Let it go*, the item's last control, full width on a phone. */
  .mod__detail .mod__release { flex-direction: column; align-items: stretch; }
  .mod__detail .mod__release .button { width: 100%; min-height: 52px; }
  .mod__desk-only { display: none !important; }
  .mod__sides { grid-template-columns: minmax(0, 1fr); }
}

/* R-4 (S-327, D-1271) — the boundary stated on the panel: `27a` (1180), `27c` (834), `27v` (360), each width its own words. */
.mod__boundary-block { display: none; flex-direction: column; gap: 8px; padding: 16px 22px; }
.mod__boundary-block p { margin: 0; font: 400 14px/21px var(--font-ui); color: var(--ink-body); max-width: 660px; text-wrap: pretty; }
.mod__boundary-block .mod__label { font: 400 11px/16px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.mod__boundary-block em { font-style: normal; }
@media (width < 700px) {
  .mod__boundary--phone { display: flex; padding: 16px 20px; }
  .mod__boundary--phone p:not(.mod__label) { font: 400 15px/23px var(--font-ui); }
}
@media (700px <= width < 1180px) { .mod__boundary--tablet { display: flex; } }
@media (width >= 1180px) {
  .mod__boundary--laptop { display: flex; }
  .mod__boundary--laptop + .mod__boundary--laptop p:not(.mod__label) { font: 400 15px/23px var(--font-ui); }
}

/* S-548 (D-1417) — the owner's admin menu: his three screens, the current one marked. Provisional (DR-146). */
/* DR-146 rule 1 (`27cv`–`27da`, S-551) — a row under the head at every width: 48 px links, the current one primary ink with the
   2 px lime underline, the others tertiary. It never wraps: at 360 it scrolls sideways, opened on the current item. */
.admin-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a { flex: none; display: flex; align-items: center; min-height: 48px; padding: 0 10px; white-space: nowrap; font: 400 14px/19px var(--font-ui); color: var(--ink-dim); text-decoration: none; }
.admin-nav a:hover { color: var(--ink); }
.admin-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.admin-nav a[aria-current="page"] { font-weight: 600; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* DR-146 rules 3 and 4 — the owner's two lists (`27cv` `27cx` `27cz`, `27cw` `27cy` `27da`). One row markup, three layouts:
   a column grid at 1180, three lines beside *Open* at 834, a card at 360. */
.alists .mod__label { font: 400 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.alists__body { display: flex; flex-direction: column; min-width: 0; }
.alists__top { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.alists__title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.alists__title h1 { font: 700 22px/28px var(--font-ui); letter-spacing: -.028em; margin: 0; }
.alists__n { font: 600 13px/18px var(--font-mono); color: var(--accent); }
.alists__find { display: flex; flex-direction: column; gap: 6px; }
.alists__find input { min-height: 52px; box-sizing: border-box; width: 100%; border: 1px solid var(--control-line); border-radius: var(--radius); background: none; color: var(--ink); font: 400 16px/22px var(--font-ui); padding: 0 14px; }
.alists__find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alists__status { font: 400 15px/23px var(--font-ui); color: var(--ink-dim); margin: 0; text-wrap: pretty; }
.alists__status strong { font: 400 13px/23px var(--font-mono); color: var(--ink); }
.alists__status em { font-style: normal; }
/* DR-149 (`27df`, `27dg`; S-617) — an empty list: the heading of the empty area, then what fills it. */
.alist__empty { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; }
.alist__emptySays { margin: 0; font: 600 18px/25px var(--font-ui); color: var(--ink); }
.alist__emptyFills { margin: 0; font: 400 15px/23px var(--font-ui); color: var(--ink-body); text-wrap: pretty; }
.alist__path { font: 400 13px/23px var(--font-mono); }
.alist { list-style: none; margin: 0; padding: 0; }
.alist__row { border-bottom: 1px solid var(--line); padding: 12px 0; font: 400 14px/20px var(--font-ui); color: var(--ink-dim); }
.alist__row[hidden] { display: none; }
.alist__name { font: 600 15px/21px var(--font-ui); color: var(--ink); }
.alist__town { margin-left: 8px; }
.alist__user { font: 400 13px/20px var(--font-mono); color: var(--ink); }
.alist__added, .alist__oldest, .alist__shown { font: 400 12px/18px var(--font-mono); }
.alist__shown--not { font-weight: 600; color: var(--ink); }
.alist__open { flex: none; display: inline-flex; align-items: center; justify-self: end; min-height: 44px; padding: 0 14px; border: 1px solid var(--control-line); border-radius: var(--radius); color: var(--ink); text-decoration: none; font: 400 14px/20px var(--font-ui); }
.alist__open:hover { background: rgb(255 255 255 / 7%); }
.alist__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alist__cols { display: none; }
.alist__break { display: none; }
.alist__sep { white-space: pre; }
.acct__addr { color: var(--ink); overflow-wrap: anywhere; }
.acct__conf { font: 400 11px/16px var(--font-mono); margin-left: 6px; }
.acct__conf--not { font-weight: 600; color: var(--ink); }
.acct__ways, .acct__reg { font: 400 12px/18px var(--font-mono); }
.acct__keeps { color: var(--ink); }
.acct__keeps--none { color: var(--ink-dim); }
.acct__keeps--dormant { font: 600 12px/18px var(--font-mono); color: var(--ink); text-wrap: pretty; }
.acct__reg { display: none; }

/* 834 — the facts folded into lines beside *Open* (`27cx`); an account in four lines (`27cy`). */
@media (width >= 600px) and (width < 1000px) {
  .alist__row--record { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
  .alist__row--record > :not(.alist__open) { grid-column: 1; display: block; }
  .alist__row--record .alist__open { grid-column: 2; grid-row: 1 / span 3; }
  .alist__sep--lead { display: none; }
  .alist__row--record .alist__keeper .alist__user, .alist__row--record .alist__shown { color: var(--ink); }
}
/* 360 — one card per record (`27cz`): the name and whether it is shown, the town and the keeper, who added it, its age, *Open*. */
@media (width < 600px) {
  .alist__row--record { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; }
  .alist__row--record .alist__gym, .alist__row--record .alist__group { display: contents; }
  .alist__row--record .alist__name { order: 1; flex: 1 1 0; min-width: 0; }
  .alist__row--record .alist__shown { order: 2; margin-left: 12px; }
  .alist__row--record .alist__break { order: 3; display: block; flex-basis: 100%; height: 0; }
  .alist__row--record .alist__town { order: 4; margin-left: 0; }
  .alist__row--record .alist__sep--lead { order: 5; }
  .alist__row--record .alist__keeper { order: 6; flex: 1 1 auto; }
  .alist__row--record .alist__sep:not(.alist__sep--lead) { display: none; }
  .alist__row--record .alist__added { order: 7; flex-basis: 100%; }
  .alist__row--record .alist__oldest { order: 8; flex-basis: 100%; }
  .alist__row--record .alist__open { order: 9; margin-top: 8px; }
  .alists__wide-sm { display: none; }
}
@media (width < 1000px) {
  .alists__wide { display: none; }
  .alist__kept { display: inline; }
  .alist__row--account { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; column-gap: 16px; }
  .alist__row--account .acct__who { display: contents; }
  .alist__row--account .alist__user { grid-column: 1; grid-row: 1; }
  .alist__row--account .acct__ways { grid-column: 2; grid-row: 1; }
  .alist__row--account .acct__name, .alist__row--account .acct__mail, .alist__row--account .acct__keeps { grid-column: 1 / -1; }
}
/* 1180 — six facts compared down the column (`27cv`), five for an account (`27cw`). */
@media (width >= 1000px) {
  .alist__kept, .alist__sep, .acct__reg-inline { display: none; }
  .alist__cols { display: grid; gap: 16px; min-height: 40px; align-items: center; border-bottom: 1px solid var(--line);
    font: 400 10px/14px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
  .alist__cols--record, .alist__row--record { grid-template-columns: minmax(0, 1fr) 120px 290px 90px 170px 70px; }
  .alist__cols--account, .alist__row--account { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 90px minmax(0, 1fr) 120px; }
  .alist__row { display: grid; gap: 16px; align-items: center; min-height: 66px; padding: 0; }
  .alist__row .alist__group { display: contents; }
  .alist__gym { order: 1; } .alist__keeper { order: 2; } .alist__added { order: 3; } .alist__shown { order: 4; }
  .alist__oldest { order: 5; } .alist__open { order: 6; }
  .alist__gym, .acct__who { display: flex; flex-direction: column; min-width: 0; }
  .alist__town { margin-left: 0; }
  .acct__name { font: 400 14px/20px var(--font-ui); color: var(--ink-dim); }
  .acct__mail { display: flex; flex-direction: column; min-width: 0; }
  .acct__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct__conf { margin-left: 0; }
  .acct__reg { display: block; }
}