/* Biodex website — additions to the design system for the live site: the early-access form, the hero's
   example label, and the small pages (privacy, support…). Loaded on every page, after biodex.css. */

/* ── The early-access form ─────────────────────────────────────────────────────────────────────────── */
/* the honeypot: a field people never see (bots fill it in) */
.ea-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* the answer line under the door: empty (and taking no room) until there is something to say */
.ea-status { margin-top: calc(8 * var(--u)); color: var(--ink); }
.ea-status.is-idle { margin-top: 0; }
.ea-status { align-items: flex-start; }
.ea-status .gem { flex: none; margin-top: calc((round(up, calc(1.5 * var(--prose-small)), var(--u)) - 6 * var(--u)) / 2); }
.ea-msg { flex: 1 1 auto; }
.ea [data-success] { margin-top: calc(8 * var(--u)); }
.field input[aria-invalid="true"] { color: var(--ink); }
.check .prose a { position: relative; }
/* a light sheet on the dark band (the inline form) keeps its text ink, not the band's cream */
.g-sheet .k-sheet6 :is(p, .prose, .h2, h3, label, .tlink) { color: var(--ink); text-shadow: none; }
.dialog-panel > h2 { padding-right: calc(20 * var(--u)); }
/* the dialog hangs from the top instead of sitting centred: centred, an error line under the door grew
   the panel by ~20 px and moved the door up by half of that, out from under the thumb */
.dialog { margin: max(10vh, 24px) auto auto; }
/* the email field: a whole 44 px tap target on every screen (it was 40 px at small units) */
.field { height: max(calc(24 * var(--u)), 44px); }

/* the plaque's small door: the label sits in the key's padding, not in a 20u box that ran past its bottom */
.plaque-door .key-label { height: auto; }

/* ── An example value that stands for a real one ("its place · its date"): in the softer ink ─────── */
.statrow dd.soft { color: var(--ink-soft); }

/* ── The hero's example card ──────────────────────────────────────────────────────────────────────── */
.hero-example { margin-top: calc(6 * var(--u)); font-family: "Biodex Pixel", monospace; text-transform: uppercase;
                font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); color: var(--ink-soft); text-align: center; }
:root[data-lowdensity] .hero-example { font-size: calc(16 * var(--u)); line-height: calc(18 * var(--u)); }

/* ── The small pages (Page layout) ────────────────────────────────────────────────────────────────── */
.page { padding-top: calc(24 * var(--u)); min-height: 60vh; }
.page-sheet { padding: calc(14 * var(--u)); }
.page-sheet > * + * { margin-top: calc(8 * var(--u)); }
.page-sheet > .banner { margin-right: calc(20 * var(--u)); }
.page-sheet > .close-key { margin-top: 0; }
.page-body > * + * { margin-top: calc(8 * var(--u)); }
.page-body h2 { margin-top: calc(16 * var(--u)); }
.page-body ul { display: grid; gap: calc(4 * var(--u)); }
.page-body li { display: flex; gap: calc(6 * var(--u)); align-items: baseline; }
.page-body li::before { content: ""; flex: none; width: calc(2 * var(--u)); height: calc(2 * var(--u)); background: var(--ink);
                        transform: translateY(calc(-3 * var(--u))); }
.page-body strong { font-weight: 500; }
.page-body a:not(.px) { text-decoration: underline; text-decoration-thickness: var(--u); text-underline-offset: calc(2 * var(--u)); }
.page-body a:not(.px):focus-visible { outline: calc(2 * var(--u)) solid var(--ink); outline-offset: calc(2 * var(--u)); }
.page-body .door { width: min(calc(176 * var(--u)), 100%); }
.page-body .updated { color: var(--ink-soft); }
.page-back { margin-top: calc(12 * var(--u)); }
.page-big { font-family: "Biodex Pixel", monospace; font-size: calc(32 * var(--u)); line-height: calc(36 * var(--u)); color: var(--border); }