/* Cubestead demo replay (/demo/replay/): the page around the phone. The phone's screen is the app's own stylesheet
   (in pack/replay-pack.js) inside a shadow root, so nothing here reaches the app and nothing of the app reaches the
   page. The site's tokens (paper, ink and Pacific) and its self-hosted DM Sans and Instrument Serif, the same font
   files the site's pages use (release-overlay/overlay/assets). */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/wsai-dm-sans-400-normal-21fc850317.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/wsai-dm-sans-500-normal-8adfcc2ef7.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/wsai-dm-sans-600-normal-9d741dd754.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/wsai-dm-sans-700-normal-3d7ca74182.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/wsai-instrument-serif-400-normal-434b2f59ba.woff2) format("woff2"); }

:root {
  --paper: #F5F3EC; --ink: #172226; --muted: #44545A; --line: #D3DCDD; --chip: #E3EBEC; --chip-ink: #172226;
  --pick: #006C85; --pick-ink: #FFFFFF; --focus: #8A5A2B; --label: #FFFFFF; --label-line: #C9D3D4;
  --rim-a: #8E979A; --rim-c: #6B7578; --rim-d: #2B3235; --glow: rgba(0, 108, 133, .11);
  --shadow: 0 2px 4px rgba(23, 34, 38, .10), 0 28px 60px -24px rgba(23, 34, 38, .55);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --screen-line: rgba(23, 34, 38, .16);
  --gutter: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F181B; --ink: #EDF2F0; --muted: #A9BCC3; --line: #2B3A3E; --chip: #1B282B; --chip-ink: #EDF2F0;
    --pick: #1CA9C9; --pick-ink: #0F181B; --focus: #E7B37A; --label: #172226; --label-line: #33464B;
    --rim-a: #A5AFB2; --rim-c: #859093; --rim-d: #3A4447; --glow: rgba(28, 169, 201, .15);
    --shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 70px -20px rgba(0, 0, 0, .85);
    --screen-line: rgba(255, 255, 255, .14);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 10; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 10px; }
.skip:focus { left: 12px; }

.site-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto;
  padding: 14px var(--gutter) 6px; }
.home { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.lockup { display: block; width: 138px; height: auto; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--ink); font-size: 15px; font-weight: 600;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); text-underline-offset: 4px; }
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the demo: copy and question picker, then the phone; side by side on wide screens */
.replay { display: grid; gap: 22px; max-width: 1200px; margin: 0 auto; padding: 10px var(--gutter) 36px; overflow-x: clip; }  /* the glow never widens the page */
.replay-copy { min-width: 0; max-width: 34rem; }
h1 { margin: 0 0 12px; font: 400 clamp(36px, 9.6vw, 64px)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.lede { margin: 0 0 22px; color: var(--muted); max-width: 31rem; }
.picker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; }
.picker-label { margin: 0; font-size: 16px; font-weight: 600; }
.controls { display: flex; gap: 8px; }
.ctl { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 15px 8px 11px; border: 1.5px solid var(--ink);
  border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px/1 var(--sans); cursor: pointer; }
.ctl:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ctl-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctl-play { fill: currentColor; stroke-width: 1.5; }
.ctl[data-state="paused"] .ctl-pause, .ctl:not([data-state="paused"]) .ctl-play { display: none; }

/* on a phone the questions are one row that scrolls sideways; on a wide screen they wrap */
.chips { position: relative; display: flex; gap: 8px; min-height: 44px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px;
  overflow-x: auto; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: 999px; background: var(--chip);
  color: var(--chip-ink); font: 500 15px/1.35 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
.chip:hover { border-color: color-mix(in srgb, var(--chip-ink) 32%, transparent); }
.chip[aria-selected="true"] { background: var(--pick); color: var(--pick-ink); border-color: var(--pick); }
.notice { min-height: 3.1em; margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* The phone. From 600 px wide the app's screen sits in a handset's frame. Under 600 px the page is already on a phone,
   so the screen stands on its own, without a frame, 8 px from the window's edges: in a 390 px window the app gets
   374 px, enough for its header's name beside the Emergency button.
   --rp-scale draws the app's screen larger than the phone it was captured on (390 x 844) by just enough that the app's
   smallest text reads at 11 px or more on the page, without changing the app's styles. It was 1.042 while the valve
   tags' labels were 10.56 px (11 / 10.56, rounded up). Release K set those labels to 12 px, and the app's smallest
   text is now 12 px, so the scale is 1: the frame is the captured phone's size and under 600 px the app lays out at
   the screen's width (374 px in a 390 px window; replay.js, fit). The verification measures every word on the phone
   at 375, 390, 414 and 1440 px; raise the scale again if a new app release brings text under 11 px. */
.replay-stage { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 16px; text-align: center; }
.labels span { padding: 5px 11px; border: 1px solid var(--label-line); border-radius: 999px; background: var(--label); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1.3; }
.phone { --rp-scale: 1; --screen-r: 28px; position: relative; align-self: stretch; margin-inline: calc(8px - var(--gutter)); }
.phone-screen { position: relative; width: 100%; max-width: calc(390px * var(--rp-scale)); aspect-ratio: 390 / 844;
  max-height: max(460px, calc(100svh - 234px)); margin-inline: auto; overflow: hidden; border-radius: var(--screen-r); background: #000;
  box-shadow: 0 0 0 1px var(--screen-line), var(--shadow); --phone-safe-top: 44px; --phone-safe-bottom: 20px; --phone-island: none; }
.phone-screen:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--screen-r); }
.phone-power { display: none; }
.phone-fallback { margin: 0; padding: 120px 28px; color: #E8EEF0; font-size: 16px; text-align: center; }
.confirm { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 16px; font-weight: 600; }
.confirm svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--pick); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fine { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; text-wrap: balance; }

.site-foot { max-width: 1200px; margin: 0 auto; padding: 18px var(--gutter) 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.site-foot p { margin: 0; }
.site-foot p + p { margin-top: 6px; }
.site-foot a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 359.98px) {
  :root { --gutter: 12px; }
  .labels span { font-size: 12.5px; }
}
@media (min-width: 600px) {
  :root { --gutter: 32px; }
  /* the handset: a real phone's proportions, as large as the window allows */
  .phone {
    --bezel: 11px; --screen-r: 46px;
    --sw: min(calc(390px * var(--rp-scale)), calc(100vw - 2 * var(--gutter) - 2 * var(--bezel) - 8px));
    --sh: clamp(560px, calc(100svh - 236px), calc(844px * var(--rp-scale)));
    align-self: center; margin-inline: 0; padding: var(--bezel); border-radius: calc(var(--screen-r) + var(--bezel)); background: #050607;
    box-shadow: 0 0 0 2px var(--rim-d), 0 0 0 3.5px var(--rim-a), var(--shadow);
  }
  .phone::before { content: ""; position: absolute; inset: -70px -110px; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
  /* the side buttons: action and volume on the left, power on the right */
  .phone::after { content: ""; position: absolute; left: -6.5px; top: 112px; width: 3px; height: 172px; border-radius: 2px 0 0 2px;
    background: linear-gradient(var(--rim-c) 0 30px, transparent 30px 56px, var(--rim-c) 56px 110px, transparent 110px 120px, var(--rim-c) 120px 172px); }
  .phone-power { display: block; position: absolute; right: -6.5px; top: 190px; width: 3px; height: 74px; border-radius: 0 2px 2px 0; background: var(--rim-c); }
  .phone-screen { width: var(--sw); max-width: none; height: var(--sh); max-height: none; aspect-ratio: auto; margin: 0; box-shadow: none;
    --phone-safe-top: 54px; --phone-safe-bottom: 24px; --phone-island: block; }
  .phone-screen:focus-visible { outline-offset: 5px; }
}
@media (min-width: 980px) {
  .replay { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(48px, 7vw, 120px); padding-top: 26px; padding-bottom: 60px; }
  .replay-copy { padding-bottom: 32px; }
  h1 { font-size: clamp(54px, 4.9vw, 72px); }
  .lede { font-size: 18px; }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .notice { min-height: 4.7em; }
}
@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
}