/* Polyment landing · the site's layer over the system "the map, lit" (Home v7, F-428; every page since F-430, 31 Oct 2026).
   The canvas boards draw the forms, the menu, the sticky bar, the join sheet and the clips with the system's
   own markup. On the site those parts are driven by scripts whose contracts do not change: js/waitlist.js
   (LV-1: its ids, its radios, its message paragraphs, whose class it rewrites), js/site.js (the menu, the
   sticky bar, the sheet) and js/plates.js (the clip player it builds). This file dresses those parts in the
   map, lit, so they read as the boards draw them. It adds no colour, face, radius or timing the system
   lacks: every value is a token from css/map-lit/tokens.css or a rule of css/map-lit/components.css. */

/* ---------- the page ------------------------------------------------------------------------------ */
html { background-color: var(--navy); color-scheme: dark; }
body { margin: 0; }
body.sheet-open { overflow: hidden; }                       /* js/site.js: the page holds still under the sheet */
.v6 [hidden], .sp [hidden] { display: none !important; }                /* the system's grids and flexes never outrank [hidden] */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Leo's board: the build's one addition to css/home-v7.css ------------------------------
   The moment waits (an inline script in index.html, at most 4 s) until his six drawings are decoded, so a
   slow network or a slow phone never shows a cut with nobody in it. It then plays from where it waited. */
.v7-hero.is-waiting * { animation-play-state: paused !important; }

/* ---------- the header's menu (js/site.js: body.menu-open) ------------------------------------- */
.pm-site-menu { display: none; }
@media (max-width: 860px) {
  body.menu-open .pm-site-header { background-color: var(--navy); border-bottom-color: var(--navy-line); }
  body.menu-open .pm-site-menu { display: grid; }
  body.menu-open .pm-site-header__menu .pm-icon--open { display: none; }
  body.menu-open .pm-site-header__menu .pm-icon--close { display: inline-block; }
}

/* ---------- the founding form (js/waitlist.js) ------------------------------------------------- */
.wl .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.turnstile-slot { margin-top: 2px; }
.turnstile-slot.is-interactive { min-height: 65px; margin-top: 12px; }
.wl-noscript { margin: 0; font: 400 15px/1.55 var(--font-sans); color: var(--fg-2); }
.wl-after { display: grid; gap: var(--space-3); min-width: 0; }

/* A message paragraph: js/waitlist.js shows one svg + span pair inside it and sets its class to
   "wl-msg form-message" plus the state. Errors are wrong text with the system's cross (.pm-error). */
.wl-msg { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 600 14px/1.45 var(--font-sans); color: var(--err); }
.wl-msg > svg { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.wl-msg > span { min-width: 0; }
.wl-msg strong { font-weight: 700; overflow-wrap: anywhere; }
.wl-msg.is-paused { color: var(--fg-2); }                    /* a pause or a limit: said plainly, not as a fault */
.wl-msg.is-step { color: var(--fg); }                        /* "One more step": the security check below */
/* "Did you mean …?": the hint, then "Yes, use it" and "No, keep mine" (.pm-form__hint). */
.wl-msg.is-hint { display: grid; justify-items: start; gap: 10px; font: 400 14px/1.45 var(--font-sans); color: var(--fg); }
.wl-hint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wl-hint-actions .pm-btn--sm::before { content: ""; position: absolute; inset: -4px 0; }   /* a 44 px tall target (LV-9) */

/* "Adding you…": the button keeps its look while it works (js/waitlist.js disables it and sets is-busy). */
.wl-sending { display: inline-flex; align-items: center; gap: 10px; }
.wl .pm-btn.is-busy:disabled { opacity: 1; cursor: progress; }

/* The aim chips are the form's own radios (name="interest"), drawn as the system's field chips: findable by
   a 3:1 edge; chosen means ember, a navy label and a check. The radio lies over the chip, invisible, so a
   tap, a click and the arrow keys all reach it, and its focus ring is drawn on the chip's face. */
.aim-chip { position: relative; isolation: isolate; cursor: pointer; color: var(--fg); }
.aim-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.aim-face { position: absolute; inset: 0; z-index: -1; border: 1px solid var(--ctl-line); border-radius: var(--r-pill); background: var(--ctl-bg);
  transition: background-color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard); }
.aim-tick { display: none; }
.aim-chip:hover .aim-face { border-color: var(--fg); }
.aim-input:checked ~ .aim-face { background: var(--ember); border-color: var(--ember); }
.aim-chip:hover .aim-input:checked ~ .aim-face { background: var(--ember-hover); border-color: var(--ember-hover); }
.aim-input:checked ~ .aim-tick { display: inline-block; }
.aim-input:checked ~ .aim-tick, .aim-input:checked ~ .aim-text { color: var(--navy); }
.aim-input:focus-visible ~ .aim-face { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }

/* ---------- the phone's sticky bar (js/site.js: is-shown, html.has-stickybar) ------------------- */
@media (max-width: 640px) {
  /* While the bar is up, keyboard focus and anchor jumps stop above it, not under it (WCAG 2.4.11). */
  html.has-stickybar { scroll-padding-block-end: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 374px) {
  .pm-stickybar { flex-wrap: wrap; row-gap: 8px; }
  .pm-stickybar__text, .pm-stickybar .pm-btn { flex: 1 1 100%; }
  html.has-stickybar { scroll-padding-block-end: calc(126px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- the clips (js/plates.js builds the player; it only adds and removes classes) -------- */
.pm-vplate .pm-play { text-decoration: none; }
.pm-vplate .pm-plate__screen > picture { position: absolute; inset: 0; }   /* the poster under the play disc, out of the grid */
.vplate-frame > .vplate-video { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; display: block;
  width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.vplate-frame > .vplate-video:fullscreen { object-fit: contain; }
.vplate-frame > .vplate-video:-webkit-full-screen { object-fit: contain; }
.vplate-controls { display: flex; align-items: center; gap: 10px; padding-block: 4px; padding-inline: 4px 12px;
  background: var(--navy-soft); color: var(--on-navy); border: 1px solid var(--navy-line); border-radius: var(--r-md); }
.vctl { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--on-navy); cursor: pointer; transition: background-color var(--dur-state) var(--ease-standard); }
.vctl:hover { background: var(--navy-lift); }
.vctl svg { width: 22px; height: 22px; }
.vseek { flex: 1 1 auto; min-width: 60px; height: 44px; margin: 0; accent-color: var(--ember); cursor: pointer; }
.vtime { flex: none; font: 600 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--on-navy-soft); white-space: nowrap; }
.vcc { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--ctl-line); border-radius: var(--r-pill); background: transparent;
  font: 700 14px/1 var(--font-sans); color: var(--on-navy); cursor: pointer; }
.vcc[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: var(--navy); }
.vctl:focus-visible, .vcc:focus-visible, .vseek:focus-visible, .vplate-retry:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.vplate-controls.is-wrapped { flex-wrap: wrap; }
.vplate-controls.is-wrapped .vseek { flex-basis: calc(100% - 44px - 10px); }
.vplate-controls.is-wrapped .vtime { padding-inline-start: 10px; margin-inline-end: auto; }
.vplate-controls.is-wrapped.is-tight { column-gap: 2px; padding-inline-end: 4px; }
.vplate-controls.is-wrapped.is-tight .vseek { flex-basis: calc(100% - 44px - 2px); }
.vplate-controls.is-wrapped.is-tight .vtime { padding-inline-start: 2px; }
.vplate-controls.is-wrapped.is-tight .vcc { padding-inline: 8px; }
/* The caption strip lies along the top of the picture, where the .vtt cues put it. */
.vplate-captions { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 3; margin: 0; padding: 8px 16px 9px; pointer-events: none;
  background: color-mix(in srgb, var(--navy) 90%, transparent); color: var(--on-navy); font: 500 16px/1.4 var(--font-sans); text-align: center; text-wrap: balance; }
.vplate-captions:empty { display: none; }
.vplate--small .vplate-captions { font-size: 15px; }
/* Waiting and failed: a quiet ring in the middle of the frame; a message and "Try again" when it fails. */
.vplate-state { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 12px; padding: 12px;
  pointer-events: none; text-align: center; }
.vplate-spin { display: none; position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--navy-soft); }
.vplate-spin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--navy-line); border-block-start-color: var(--ember);
  animation: vplate-turn 0.9s linear infinite; }
@keyframes vplate-turn { to { transform: rotate(1turn); } }
@keyframes vplate-show { from { opacity: 0; } }
.vplate.is-buffering .vplate-spin { display: block; animation: vplate-show 0.3s ease-out both; }
.vplate-msg { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vplate.is-failed .vplate-state { background: color-mix(in srgb, var(--navy) 88%, transparent); pointer-events: auto; }
.vplate.is-failed .vplate-msg { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  font: 600 16px/1.4 var(--font-sans); color: var(--on-navy); }
.vplate-retry { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; height: var(--button-h); padding: 0 24px;
  border: 1.5px solid var(--on-navy); border-radius: var(--r-pill); background: none; color: var(--on-navy); font: 700 16px/1 var(--font-sans); cursor: pointer; }
.vplate-retry:hover { background: var(--navy-lift); }
@media (max-width: 640px) {
  .vplate-captions, .vplate--small .vplate-captions { padding: 6px 10px 7px; font-size: 14px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .vplate-spin::before, .vplate.is-buffering .vplate-spin { animation: none; }
}