/* /train: the desktop companion's waitlist. The Line's own type and C2 "Night glass" (line/glass.css), in a dawn palette.
   Type is drawn at one CSS pixel per glyph pixel or a whole multiple of it, as on the Line:
     Midnight Fine 15/22 and 30/44 (2x), Fine Input 16/22 for the field (so iOS never zooms), Midnight 5x7 10/15 and 20/28 (2x).
   No glow behind text; the warmth is in rims, lamps and the dawn itself.
   Phones: the clip fills the screen behind the page and the glass card rises over it.
   Desktop: the clip is docked down the right edge, the way the companion sits beside your work. */
@font-face { font-family: "Midnight Fine"; src: url("/assets/train-waitlist/fonts/MidnightFine-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Midnight Fine"; src: url("/assets/train-waitlist/fonts/MidnightFine-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Midnight Fine Input"; src: url("/assets/train-waitlist/fonts/MidnightFine-Input.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Midnight 5x7"; src: url("/assets/train-waitlist/fonts/Midnight5x7-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Midnight 5x7"; src: url("/assets/train-waitlist/fonts/Midnight5x7-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fine: "Midnight Fine", ui-monospace, "SF Mono", Menlo, monospace;
  --in: "Midnight Fine Input", ui-monospace, "SF Mono", Menlo, monospace;
  --p57: "Midnight 5x7", ui-monospace, "SF Mono", Menlo, monospace;
  --night: #070914; --night2: #0d1026; --indigo: #1d1f4a; --plum: #3a2c58; --mauve: #7d5f86; --peach: #e7a58a; --dawn: #ffdcaa;
  --ink: #e6ebf3; --ink2: #c4cbdb; --dim: #a3aec4; --dim2: #8b97b0;
  --amber: #ffa030; --key: #ffd7a0; --warm: #ffeccd; --focus: #7fd8ff;
  --glass: rgba(8, 10, 20, .86); --glass-solid: rgba(8, 10, 20, .94);
  --edge: rgba(255, 214, 160, .28); --hair: rgba(200, 220, 255, .1);
  --paper: #f3e4c4; --paper-ink: #251b34; --paper-dim: #76667f;
  --dock-w: 360px; --dock-h: 640px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--night); color: var(--ink);
  font: 15px/22px var(--fine);
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-kerning: none; font-variant-ligatures: none; text-rendering: optimizeSpeed;
}
a { color: inherit; text-decoration: underline 1px; text-decoration-color: rgba(255, 160, 48, .6); text-underline-offset: 4px; }
a:hover { color: var(--key); text-decoration-color: var(--amber); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, p { margin: 0; }

/* the skip link is drawn only while it has focus */
.tw-skip { position: absolute; left: 12px; top: 12px; z-index: 10; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  padding: 10px 14px; background: var(--glass-solid); color: var(--ink); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.tw-skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; }
body.tw-min .tw-skip { display: none; }

/* ---------------------------------------------------------------- the window (phones: behind everything) */
.tw-window { position: fixed; inset: 0; z-index: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--night2) url("/assets/train-waitlist/dawn-poster-720.jpg") center 40% / cover no-repeat; }
.tw-clip { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; background: transparent; }
/* a little night at the top (for the headline) and at the bottom (for the card); the middle stays clear */
.tw-window::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 9, 20, .72) 0, rgba(7, 9, 20, .38) 22%, rgba(7, 9, 20, 0) 42%, rgba(7, 9, 20, 0) 62%, rgba(7, 9, 20, .55) 82%, rgba(7, 9, 20, .8) 100%); }
.tw-dock-note { display: none; }

.tw-sound {
  position: fixed; z-index: 3; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 0; cursor: pointer; color: var(--ink2);
  background: var(--glass-solid); box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px rgba(255, 160, 48, .4);
  font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase;
}
.tw-sound:hover { color: var(--ink); box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px var(--amber); }
.tw-sound[aria-pressed="true"] { color: var(--key); background: rgba(40, 24, 8, .92); box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px var(--amber); }
/* a pixel speaker: a 9 x 9 drawing, off (crossed) or on (two waves) */
.tw-sound-icon { width: 9px; height: 9px; flex: none; background: center / 9px 9px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges' fill='%23c4cbdb'%3E%3Cpath d='M0 3h2v3H0zM2 2h1v5H2zM3 1h1v7H3z'/%3E%3Cpath d='M6 3h1v1H6zM8 3h1v1H8zM7 4h1v1H7zM6 5h1v1H6zM8 5h1v1H8z'/%3E%3C/svg%3E"); }
.tw-sound[aria-pressed="true"] .tw-sound-icon { background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges' fill='%23ffd7a0'%3E%3Cpath d='M0 3h2v3H0zM2 2h1v5H2zM3 1h1v7H3z'/%3E%3Cpath d='M5 3h1v3H5zM7 1h1v1H7zM8 2h1v5H8zM7 7h1v1H7z'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- the page over it */
.tw-page { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; padding: 0 16px max(20px, env(safe-area-inset-bottom)); }
.tw-top { display: none; }
.tw-brand { display: inline-block; padding: 6px 0; }
.tw-brand img { display: block; width: auto; height: 12px; opacity: .9; }

/* the intro holds the first screen, so the card's top (title, field, button) rises just above the fold */
.tw-intro { min-height: calc(100svh - 236px); padding: max(76px, 10svh) 0 28px; max-width: 34rem; }
.tw-kicker { margin: 0 0 12px; color: var(--key); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.tw-intro h1 { color: var(--warm); font: 700 30px/44px var(--fine); letter-spacing: 0; max-width: 15em; text-wrap: balance; }
.tw-lede { margin-top: 14px; max-width: 26em; color: var(--ink2); }

/* ---------------------------------------------------------------- the glass card (C2 Night glass) */
.tw-card {
  position: relative; width: 100%; max-width: 34rem; padding: 14px 14px 16px;
  color: var(--ink);
  background: url("/assets/train-waitlist/beads.svg") 0 0 / 120px 160px, var(--glass-solid);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px rgba(255, 160, 48, .45), 0 0 0 1px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 150, 40, .14), 0 16px 40px rgba(0, 0, 0, .5);
}
.tw-card-title { color: var(--warm); font: 700 15px/22px var(--fine); }
.tw-card-title span { color: var(--ink2); font-weight: 400; }

.tw-form { display: grid; gap: 16px; margin-top: 12px; }
/* phones: the line above says what the field is for, so its label is read aloud but not drawn */
.tw-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tw-field { display: grid; gap: 8px; }
.tw-field label { color: var(--dim); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.tw-row { display: grid; gap: 8px; }
.tw-row input {
  width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border: 0; border-radius: 0; appearance: none;
  background: rgba(255, 255, 255, .045); color: var(--ink); caret-color: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(200, 220, 255, .22);
  font: 16px/22px var(--in);
}
.tw-row input::placeholder { color: var(--dim2); opacity: 1; }
.tw-row input:hover { box-shadow: inset 0 0 0 1px rgba(200, 220, 255, .38); }
.tw-row input:focus { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: inset 0 0 0 1px var(--amber); }
.tw-row input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #ff74b0; }

/* the lamp button, with stepped (pixel) corners */
.tw-board {
  height: 48px; padding: 0 22px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--amber); color: #1a0f03;
  font: 700 20px/28px var(--p57); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
  box-shadow: inset 0 -4px 0 rgba(120, 50, 0, .35), inset 0 2px 0 rgba(255, 236, 205, .55);
}
.tw-board:hover { background: #ffb24a; }
.tw-board:active { background: var(--key); box-shadow: inset 0 4px 0 rgba(120, 50, 0, .25); }
.tw-board:focus-visible { outline: none; background: var(--key); box-shadow: inset 0 0 0 3px var(--focus); }
.tw-board:disabled { cursor: progress; background: #c98a3c; }

.tw-error { color: #ffb0d0; }

/* the chips: native radios in C2 segmented controls */
/* ---------------------------------------------------------------- the three optional questions
   Each is its own block: a hairline, a pixel glyph and the question in Midnight Fine (brighter and larger than the
   answers), "Optional" kept quiet. Answers are native radios drawn as cards; the pictures are inline SVG pixel art
   at 2 CSS px per art pixel (whole device pixels at 2x and 3x), coloured from here so the chosen card lights up. */
.tw-chips { min-width: 0; margin: 0; padding: 0; border: 0; }
.tw-q-block { padding-top: 14px; border-top: 1px solid var(--hair); }
/* a floated legend sits inside the block like a heading, so the hairline above it runs unbroken */
.tw-q { float: left; width: 100%; padding: 0; margin: 0 0 10px; }
.tw-q + .tw-seg { clear: both; }
.tw-q-row { display: flex; align-items: center; gap: 8px; }
.tw-q-glyph { flex: none; }
.tw-q-text { color: var(--warm); font: 15px/22px var(--fine); }
.tw-q-opt { margin-left: auto; padding-left: 8px; color: var(--dim2); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }

.tw-seg { display: grid; gap: 6px; width: 100%; }
.tw-seg-pic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-seg-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-seg-answer { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 330px; }

.tw-chip { position: relative; display: block; min-width: 0; cursor: pointer; }
.tw-chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tw-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 44px; padding: 10px 6px 9px;
  color: var(--dim); background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(200, 220, 255, .16);
}
.tw-opt-label { font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.tw-seg-pic .tw-opt { min-height: 76px; justify-content: flex-end; }
.tw-seg-map .tw-opt { min-height: 84px; }
.tw-chip:hover .tw-opt { color: var(--ink); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(200, 220, 255, .3); }
.tw-chip input:checked + .tw-opt {
  color: var(--key); background: rgba(255, 160, 48, .13);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px var(--amber), 0 0 10px rgba(255, 150, 40, .22);
}
.tw-chip input:focus-visible + .tw-opt { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the answer row (price): plain, equal answers with a pixel radio square, so no answer leans on you */
.tw-seg-answer .tw-opt { flex-direction: row; gap: 8px; min-height: 44px; padding: 0 8px; }
.tw-seg-answer .tw-opt::before { content: ""; flex: none; width: 8px; height: 8px; box-shadow: inset 0 0 0 1px currentColor; }
.tw-seg-answer input:checked + .tw-opt::before { background: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), inset 0 0 0 2px var(--night); }

/* the pixel drawings */
.tw-ico, .tw-q-glyph { display: block; overflow: visible; }
.px-line { fill: currentColor; }
.px-glass { fill: currentColor; fill-opacity: .06; }
.px-work { fill: currentColor; fill-opacity: .32; }
.px-train { fill: var(--amber); fill-opacity: .55; }
.px-train.px-faint { fill-opacity: .4; }
.px-win { fill: #1a0f03; }
.px-sun { fill: var(--key); }
.px-coin { fill: var(--amber); }
.px-coin-in { fill: #b8701c; }
.tw-q-glyph .px-line { fill: var(--dim); }
.tw-q-glyph .px-train { fill-opacity: 1; }
.tw-chip:hover .px-train { fill-opacity: .8; }
.tw-chip input:checked + .tw-opt .px-train { fill-opacity: 1; }
.tw-chip input:checked + .tw-opt .px-glass { fill: var(--amber); fill-opacity: .1; }
.tw-chip input:checked + .tw-opt .px-train.px-faint { fill-opacity: .85; }

.tw-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.tw-consent { padding-top: 12px; border-top: 1px solid var(--hair); color: var(--dim); }

/* ---------------------------------------------------------------- the ticket stub */
.tw-done { display: grid; gap: 16px; }
.tw-ticket-wrap { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.tw-ticket {
  --perf: calc(100% - 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) 96px; background: var(--paper); color: var(--paper-ink);
  clip-path: polygon(0 4px, 4px 4px, 4px 0,
    calc(var(--perf) - 6px) 0, calc(var(--perf) - 6px) 3px, calc(var(--perf) - 3px) 3px, calc(var(--perf) - 3px) 6px, calc(var(--perf) + 3px) 6px, calc(var(--perf) + 3px) 3px, calc(var(--perf) + 6px) 3px, calc(var(--perf) + 6px) 0,
    calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    calc(var(--perf) + 6px) 100%, calc(var(--perf) + 6px) calc(100% - 3px), calc(var(--perf) + 3px) calc(100% - 3px), calc(var(--perf) + 3px) calc(100% - 6px), calc(var(--perf) - 3px) calc(100% - 6px), calc(var(--perf) - 3px) calc(100% - 3px), calc(var(--perf) - 6px) calc(100% - 3px), calc(var(--perf) - 6px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.tw-ticket-main { padding: 0 0 16px; }
.tw-ticket-band { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 9px 14px 8px; background: var(--paper-ink); color: var(--amber); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.tw-ticket-title { padding: 0 14px; color: var(--paper-ink); font: 700 30px/44px var(--fine); text-wrap: balance; }
.tw-ticket-title:focus { outline: none; }
.tw-ticket-title:focus-visible { outline: none; }
.tw-ticket-rows { display: grid; gap: 4px; margin: 12px 0 0; padding: 10px 14px 0; border-top: 1px dashed rgba(37, 27, 52, .3); }
.tw-ticket-rows div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; }
.tw-ticket-rows dt { color: var(--paper-dim); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.tw-ticket-rows dd { margin: 0; color: var(--paper-ink); }
.tw-ticket-stub {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 8px 16px;
  background: repeating-linear-gradient(180deg, rgba(37, 27, 52, .45) 0 4px, transparent 4px 8px) 0 0 / 2px 100% no-repeat, #ead6ae;
  text-align: center;
}
.tw-punch { width: 10px; height: 10px; margin-bottom: auto; background: var(--night);
  clip-path: polygon(3px 0, 7px 0, 7px 1px, 8px 1px, 8px 2px, 9px 2px, 9px 3px, 10px 3px, 10px 7px, 9px 7px, 9px 8px, 8px 8px, 8px 9px, 7px 9px, 7px 10px,
    3px 10px, 3px 9px, 2px 9px, 2px 8px, 1px 8px, 1px 7px, 0 7px, 0 3px, 1px 3px, 1px 2px, 2px 2px, 2px 1px, 3px 1px); }
.tw-stub-label { color: var(--paper-dim); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.tw-stub-value { color: var(--paper-ink); font: 700 20px/28px var(--p57); letter-spacing: 2px; text-transform: uppercase; }
.tw-done-line { color: var(--ink2); }
.tw-done-ask { display: grid; gap: 14px; padding-top: 6px; }
.tw-done-ask-title { color: var(--dim); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.tw-done-ask .tw-ask { display: grid; gap: 14px; }
.tw-done-ask .tw-q-opt { display: none; }
.tw-done-ask-status { min-height: 22px; color: var(--key); }
.tw-done-ask-status:empty { min-height: 0; }
.tw-ask { display: grid; gap: 14px; }

/* ---------------------------------------------------------------- folding the panel away (phones and tablets)
   The handle on the card's top edge folds the page down to a slim bar, so the whole scene can be watched; the bar
   unfolds it. Nothing is remembered between visits; it always starts unfolded. */
.tw-min {
  position: absolute; z-index: 2; top: -12px; left: 0; right: 0; width: 64px; height: 24px; margin: 0 auto; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 0; cursor: pointer; touch-action: none;
  color: var(--key); background: var(--glass-solid);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px rgba(255, 160, 48, .45), 0 0 0 1px rgba(0, 0, 0, .55);
}
.tw-min::after { content: ""; position: absolute; inset: -10px -8px; }
.tw-min:hover { color: #fff0d8; box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px var(--amber), 0 0 0 1px rgba(0, 0, 0, .55), 0 0 10px rgba(255, 150, 40, .22); }
.tw-min:focus-visible, .tw-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tw-chev { display: block; flex: none; }

.tw-bar {
  /* compact and centred, so the dog, the mug and the backpack on the sill stay in view */
  position: fixed; z-index: 3; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); width: max-content; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px;
  border: 0; border-radius: 0; cursor: pointer; color: var(--dim);
  background: url("/assets/train-waitlist/beads.svg") 0 0 / 120px 160px, var(--glass-solid);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px rgba(255, 160, 48, .45), 0 0 0 1px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .45);
  font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase;
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity .18s ease, translate .2s ease, visibility 0s .2s;
}
.tw-bar-go { display: inline-flex; align-items: center; gap: 10px; color: var(--key); }
.tw-bar:hover .tw-bar-go { color: #fff0d8; }
body.tw-min .tw-bar { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .2s ease .04s, translate .2s ease .04s, visibility 0s; }

.tw-page > * { transition: opacity .2s ease, translate .2s ease, visibility 0s; }
body.tw-min { overflow: hidden; }
body.tw-min .tw-page > * { opacity: 0; translate: 0 16px; visibility: hidden; transition: opacity .16s ease, translate .2s ease, visibility 0s .2s; }
.tw-window::after { transition: opacity .2s ease; }
body.tw-min .tw-window::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tw-page > *, body.tw-min .tw-page > *, .tw-bar, body.tw-min .tw-bar, .tw-window::after { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .tw-done:not([hidden]) .tw-ticket { animation: tw-arrive .7s steps(7, end) both; }
  .tw-done:not([hidden]) .tw-punch { animation: tw-punch .25s steps(2, end) .75s both; }
  .tw-done:not([hidden]) .tw-done-line { animation: tw-fade .6s ease 1s both; }
}
@keyframes tw-arrive { from { opacity: 0; translate: 0 21px; } to { opacity: 1; translate: 0 0; } }
@keyframes tw-punch { from { opacity: 0; } to { opacity: 1; } }
@keyframes tw-fade { from { opacity: 0; } to { opacity: 1; } }

.tw-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 28px; padding-top: 12px; color: var(--dim2); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.tw-foot a { color: var(--dim); }
.tw-horizon { display: none; }

/* ---------------------------------------------------------------- wider phones and tablets: the field and button share a row */
@media (min-width: 520px) {
  .tw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tw-seg-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tw-card { padding: 22px 22px 20px; }
  .tw-form { margin-top: 16px; }
  .tw-field label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .tw-board { height: 52px; }
  .tw-page { padding-left: 24px; padding-right: 24px; }
}

/* ---------------------------------------------------------------- desktop: the train docks down the right edge */
@media (min-width: 900px) and (min-height: 600px) {
  /* the clip is docked beside the page here, so there is nothing to fold away */
  .tw-min, .tw-bar { display: none; }
  body.tw-min { overflow: visible; }
  body.tw-min .tw-page > * { opacity: 1; translate: none; visibility: visible; }
  body {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180' shape-rendering='crispEdges'%3E%3Cg fill='%23dfe8ff'%3E%3Crect x='14' y='22' width='1' height='1' fill-opacity='.5'/%3E%3Crect x='92' y='9' width='2' height='2' fill-opacity='.35'/%3E%3Crect x='170' y='40' width='1' height='1' fill-opacity='.6'/%3E%3Crect x='214' y='96' width='1' height='1' fill-opacity='.35'/%3E%3Crect x='52' y='118' width='1' height='1' fill-opacity='.45'/%3E%3Crect x='136' y='150' width='1' height='1' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 180px repeat-x,
      linear-gradient(180deg, var(--night) 0, var(--night2) 30%, var(--indigo) 58%, var(--plum) 78%, var(--mauve) 90%, #b98276 100%) fixed;
    background-color: var(--night);
  }
  .tw-window {
    inset: auto; right: 0; top: 50%; translate: 0 -50%; width: var(--dock-w); height: var(--dock-h); overflow: visible; background: none;
  }
  .tw-clip { position: relative; z-index: 1; background: var(--night2) url("/assets/train-waitlist/dawn-poster-720.jpg") center / cover no-repeat;
    box-shadow: -3px 0 0 #6b4a1c, -4px 0 0 #c7943e, -6px 0 0 #3a260c, 0 0 0 1px rgba(0, 0, 0, .6), -10px 0 34px rgba(255, 150, 40, .16), -24px 30px 60px rgba(0, 0, 0, .55); }
  .tw-window::after { display: none; }
  .tw-dock-note { display: block; position: absolute; right: 12px; top: calc(100% + 10px); margin: 0; color: rgba(255, 236, 205, .72); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
  .tw-sound { position: fixed; top: calc(50% + var(--dock-h) / 2 - 56px); right: 12px; }

  .tw-page { margin-right: var(--dock-w); justify-content: center; align-items: center; min-height: 100vh; padding: 56px 64px 40px; }
  .tw-page > * { width: 100%; max-width: 31rem; }
  .tw-top { display: block; position: absolute; top: 28px; left: 64px; padding: 0; width: auto; }
  .tw-brand img { height: 15px; }
  .tw-intro { min-height: 0; padding: 0 0 28px; }
  .tw-intro h1 { max-width: 14em; }
  .tw-card { -webkit-backdrop-filter: blur(14px) saturate(1.25) brightness(.75); backdrop-filter: blur(14px) saturate(1.25) brightness(.75);
    background: url("/assets/train-waitlist/beads.svg") 0 0 / 120px 160px, var(--glass); }
  .tw-foot { margin-top: 32px; }
  .tw-horizon { display: block; position: fixed; z-index: 0; left: 0; right: var(--dock-w); bottom: 0; width: calc(100% - var(--dock-w)); height: 120px; pointer-events: none; }
}
/* tall screens: a bigger window (art pixels at 2.5 CSS px) */
@media (min-width: 1100px) and (min-height: 900px) {
  :root { --dock-w: 450px; --dock-h: 800px; }
}
@media (min-width: 1500px) { .tw-page > * { max-width: 34rem; } }