/* Algorhythm sign-up: a pixel panel that floats over the night sky.
   --fu is one "form pixel": 3px on a 1080p screen, 2px on phones. Every border, notch and key depth is a whole
   number of them, so the panel reads as pixel art next to the background. */
.su {
  --fu: max(2px, calc(var(--px, 5px) * 0.6));
  --panel: #0a1a30; --panel-hi: #11284a; --rule: #142c50;
  --frame: #4d6596; --frame-dark: #040b19;
  --well: #061226; --edge: #2a4470; --edge-hi: #6382b6;
  --ink: #eef6f4; --mist: #b4cbd3; --muted: #7d93ad; --hint: #4f6890;
  --lantern: #ffcf78; --lantern-hi: #fff0c2; --ember: #a3402f; --crystal: #66efef; --ok: #7fe0a8; --err: #ff9d8c;
  --moon: #e4f3ec;
  --display: "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
  --label: "Silkscreen", ui-monospace, monospace;
  --type: "VT323", ui-monospace, monospace;   /* typed answers: a pixel terminal face with unambiguous digits */
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
  color: var(--ink); color-scheme: dark;
}
.su[hidden] { display: none !important; }
html.su-open { overflow: hidden; }

/* dim the sky with a pixel checkerboard instead of a flat black wash */
.su-scrim { position: absolute; inset: 0;
  background: repeating-conic-gradient(rgba(4, 10, 24, .86) 0 25%, rgba(4, 10, 24, .6) 0 50%) 0 0 / calc(var(--px, 5px) * 2) calc(var(--px, 5px) * 2);
  animation: su-fade 200ms steps(4) both; }

/* the panel: notched pixel frame, a darker lip underneath and a hard offset shadow */
.su-panel { position: relative; width: min(100%, 640px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column;
  background: var(--panel);
  box-shadow:
    0 calc(var(--fu) * -1) 0 0 var(--frame), 0 var(--fu) 0 0 var(--frame),
    calc(var(--fu) * -1) 0 0 0 var(--frame), var(--fu) 0 0 0 var(--frame),
    0 calc(var(--fu) * 2) 0 0 var(--frame-dark),
    calc(var(--fu) * 3) calc(var(--fu) * 5) 0 0 rgba(2, 6, 16, .55),
    inset 0 var(--fu) 0 0 var(--panel-hi);
  animation: su-in 260ms steps(6) both; }
.su-panel.shake { animation: su-shake 300ms steps(6); }

.su-form, .su-done { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.su-done[hidden], .su-form[hidden], .su-field[hidden], .su-pass[hidden] { display: none; }

/* ---------- header */
.su-head { position: relative; padding: 24px 32px 18px; display: grid; gap: 10px; border-bottom: var(--fu) solid var(--rule); }
.su-kicker { margin: 0; font: 400 12px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--crystal); }
.su-title { margin: 0; font: 700 clamp(30px, 6vw, 42px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 var(--fu) 0 #1e3c6c; text-wrap: balance; }
.su-sub { margin: 0; max-width: 48ch; font: 500 17px/1.4 var(--display); color: var(--mist); text-wrap: pretty; }
.su-x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; padding: 0; background: transparent; color: var(--muted); cursor: pointer; }
.su-x svg { width: calc(var(--fu) * 7); height: calc(var(--fu) * 7); fill: currentColor; }
.su-x:hover { color: var(--ink); }
.su-x:focus-visible { outline: var(--fu) solid var(--crystal); outline-offset: calc(var(--fu) * -1); }

/* star meter: one star per required answer */
.su-meter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; width: fit-content; max-width: 100%;
  box-sizing: border-box; background: var(--well);
  box-shadow: 0 calc(var(--fu) * -1) 0 0 var(--rule), 0 var(--fu) 0 0 var(--rule), calc(var(--fu) * -1) 0 0 0 var(--rule), var(--fu) 0 0 0 var(--rule); }
.su-stars { display: flex; gap: calc(var(--fu) * 2); }
.su-star { width: calc(var(--fu) * 7); height: calc(var(--fu) * 7); display: block; }
.su-star .sp { fill: var(--edge); } .su-star .sc { fill: var(--edge-hi); }
.su-star.on .sp { fill: var(--lantern); } .su-star.on .sc { fill: var(--lantern-hi); }
.su-star.on { animation: su-pop 360ms steps(3); }
.su-count { margin: 0; font: 400 12px/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.su-form[data-ready] .su-count { color: var(--lantern); }

/* ---------- body */
.su-body { overflow: auto; overscroll-behavior: contain; padding: 24px 32px 12px; display: grid; gap: 24px;
  scrollbar-color: var(--edge) transparent; }
.su-field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.su-label { padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 400 14px/1.3 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.su-opt { color: var(--muted); }
/* required marker: a tiny gold pixel star instead of a red asterisk */
.su-req { position: relative; width: var(--fu); height: var(--fu); margin: 0 var(--fu); background: var(--lantern);
  box-shadow: 0 calc(var(--fu) * -1) 0 0 var(--lantern), 0 var(--fu) 0 0 var(--lantern),
    calc(var(--fu) * -1) 0 0 0 var(--lantern), var(--fu) 0 0 0 var(--lantern); }

/* text wells */
.su-well { position: relative; display: block; background: var(--well);
  box-shadow: 0 calc(var(--fu) * -1) 0 0 var(--edge), 0 var(--fu) 0 0 var(--edge),
    calc(var(--fu) * -1) 0 0 0 var(--edge), var(--fu) 0 0 0 var(--edge), inset 0 var(--fu) 0 0 #030916; }
.su-well input { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 12px 48px 12px 16px;
  font: 400 26px/1.2 var(--type); color: var(--ink); caret-color: var(--crystal); }
.su-well input::placeholder { color: var(--hint); opacity: 1; }
.su-well:hover { --edge: var(--edge-hi); }
.su-well:focus-within { --edge: var(--crystal); background: #071a30; }
.su-field[data-state="err"] .su-well { --edge: var(--err); }
/* a pixel tick appears in the field once the answer looks right */
.su-tick { position: absolute; right: 18px; top: 50%; width: var(--fu); height: var(--fu); margin-top: calc(var(--fu) * -1); opacity: 0;
  background: var(--ok);
  box-shadow: calc(var(--fu) * -3) calc(var(--fu) * -1) 0 0 var(--ok), calc(var(--fu) * -2) 0 0 0 var(--ok), calc(var(--fu) * -1) var(--fu) 0 0 var(--ok),
    var(--fu) calc(var(--fu) * -1) 0 0 var(--ok), calc(var(--fu) * 2) calc(var(--fu) * -2) 0 0 var(--ok); }
.su-field[data-state="ok"] .su-tick { opacity: 1; }
.su-err { margin: 0; font: 400 12px/1.35 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--err); }
.su-err:empty { display: none; }

/* choice keys: radios styled as pixel keycaps that press down when chosen */
.su-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.su-chips.ages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.su-chip { position: relative; display: block; }
.su-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.su-chip span, .su-hint { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; box-sizing: border-box;
  font: 400 14px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--panel-hi);
  box-shadow: 0 calc(var(--fu) * -1) 0 0 var(--edge), 0 var(--fu) 0 0 var(--edge), calc(var(--fu) * -1) 0 0 0 var(--edge), var(--fu) 0 0 0 var(--edge),
    0 calc(var(--fu) * 3) 0 0 var(--frame-dark);
  transition: transform 80ms steps(2); pointer-events: none; }
.su-chip:hover span { --edge: var(--edge-hi); transform: translateY(calc(var(--fu) * -1)); }
.su-chip input:checked + span { background: var(--lantern); color: #22122a; --edge: var(--lantern-hi);
  box-shadow: 0 calc(var(--fu) * -1) 0 0 var(--edge), 0 var(--fu) 0 0 var(--edge), calc(var(--fu) * -1) 0 0 0 var(--edge), var(--fu) 0 0 0 var(--edge),
    0 calc(var(--fu) * 2) 0 0 var(--ember);
  transform: translateY(var(--fu)); }
.su-chip input:focus-visible + span { outline: var(--fu) solid var(--crystal); outline-offset: calc(var(--fu) * 2); }
.su-field[data-state="err"] .su-chip span { --edge: #6a3b4a; }
.su-other { margin-top: 4px; }
.su-other[hidden] { display: none; }

/* quick picks for "how did you hear": tap one to fill the box, or type your own */
.su-hints { display: flex; flex-wrap: wrap; gap: 10px; }
.su-hint { appearance: none; border: 0; min-height: 38px; padding: 0 14px; font-size: 12px; color: var(--mist); cursor: pointer; pointer-events: auto; }
.su-hint:hover { color: var(--ink); --edge: var(--edge-hi); }
.su-hint[aria-pressed="true"] { color: var(--crystal); --edge: var(--crystal); }
.su-hint:focus-visible { outline: var(--fu) solid var(--crystal); outline-offset: calc(var(--fu) * 2); }

/* ---------- footer */
.su-foot { padding: 18px 32px 28px; display: grid; gap: 14px; border-top: var(--fu) solid var(--rule); background: var(--panel); }
.su-go { appearance: none; border: 0; cursor: pointer; min-height: 58px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 700 21px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #22122a; background: var(--moon);
  box-shadow: 0 calc(var(--fu) * -1) 0 0 #0b1d28, 0 var(--fu) 0 0 #0b1d28, calc(var(--fu) * -1) 0 0 0 #0b1d28, var(--fu) 0 0 0 #0b1d28,
    0 calc(var(--fu) * 3) 0 0 #9fc3bf, inset 0 var(--fu) 0 0 #ffffff;
  transition: transform 80ms steps(2); }
.su-go:hover { transform: translateY(calc(var(--fu) * -1)); }
.su-go:active { transform: translateY(var(--fu)); }
.su-go:focus-visible { outline: var(--fu) solid var(--crystal); outline-offset: calc(var(--fu) * 3); }
.su-form[data-ready] .su-go { background: var(--lantern);
  box-shadow: 0 calc(var(--fu) * -1) 0 0 #0b1d28, 0 var(--fu) 0 0 #0b1d28, calc(var(--fu) * -1) 0 0 0 #0b1d28, var(--fu) 0 0 0 #0b1d28,
    0 calc(var(--fu) * 3) 0 0 var(--ember), inset 0 var(--fu) 0 0 var(--lantern-hi); }
.su-go[aria-busy="true"] { cursor: progress; }
.su-go[aria-busy="true"] .su-go-label::after { content: ""; display: inline-block; width: 3ch; text-align: left; animation: su-dots 900ms steps(4) infinite; }
.su-arrow { width: calc(var(--fu) * 5); height: calc(var(--fu) * 5); fill: currentColor; flex: none; }
.su-missing { margin: 0; text-align: center; font: 400 12px/1.6 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.su-missing button { all: unset; cursor: pointer; color: var(--mist); border-bottom: var(--fu) dotted var(--edge-hi); }
.su-missing button:hover { color: var(--ink); }
.su-missing button:focus-visible { outline: var(--fu) solid var(--crystal); outline-offset: var(--fu); }
.su-sendfail { margin: 0; text-align: center; font: 400 12px/1.4 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--err); }
.su-sendfail:empty { display: none; }

/* ---------- success */
.su-done { padding: 40px 32px 32px; gap: 22px; align-items: center; text-align: center; overflow: auto; }
.su-done .su-title:focus { outline: none; }
.su-burst { display: flex; gap: calc(var(--fu) * 3); }
.su-burst .su-star { width: calc(var(--fu) * 7); height: calc(var(--fu) * 7); }
.su-burst .su-star:nth-child(1) { animation-delay: 0ms; } .su-burst .su-star:nth-child(2) { animation-delay: 90ms; }
.su-burst .su-star:nth-child(3) { animation-delay: 180ms; } .su-burst .su-star:nth-child(4) { animation-delay: 270ms; }
.su-burst .su-star:nth-child(5) { animation-delay: 360ms; }
.su-burst .su-star { animation: su-pop 420ms steps(3) both; }
.su-sub b { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }

/* the explorer pass: a little ticket with a perforated stub */
.su-pass { width: min(100%, 420px); display: grid; grid-template-columns: 1fr auto; text-align: left; color: #22122a; background: var(--moon);
  box-shadow: 0 calc(var(--fu) * -1) 0 0 #0b1d28, 0 var(--fu) 0 0 #0b1d28, calc(var(--fu) * -1) 0 0 0 #0b1d28, var(--fu) 0 0 0 #0b1d28,
    0 calc(var(--fu) * 3) 0 0 #9fc3bf;
  animation: su-in 300ms 200ms steps(5) both; }
.su-pass-main { padding: 18px 20px; display: grid; gap: 12px; min-width: 0; }
.su-pass-head span { white-space: nowrap; }
.su-pass-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font: 400 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #5a4a6e; }
.su-pass-name { font: 700 24px/1.1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.su-pass-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.su-pass-meta div { display: grid; gap: 4px; }
.su-pass-meta dt { font: 400 10px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #5a4a6e; }
.su-pass-meta dd { margin: 0; font: 400 15px/1.1 var(--label); text-transform: uppercase; }
.su-pass-stub { position: relative; width: 74px; display: grid; place-items: center; background: var(--lantern); }
.su-pass-stub::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fu);
  background: repeating-linear-gradient(#22122a 0 var(--fu), transparent var(--fu) calc(var(--fu) * 3)); }
.su-pass-stub .su-star { width: calc(var(--fu) * 7); height: calc(var(--fu) * 7); }
.su-pass-stub .su-star .sp { fill: #22122a; } .su-pass-stub .su-star .sc { fill: var(--ember); }
.su-done .su-go { max-width: 420px; }

/* ---------- motion */
@keyframes su-in { from { clip-path: inset(48% 0 48% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes su-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes su-pop { 0% { transform: scale(.4); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes su-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(calc(var(--fu) * -2)); } 40%, 80% { transform: translateX(calc(var(--fu) * 2)); } }
@keyframes su-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------- phones: a full-height sheet, the button stays in reach at the bottom */
@media (max-width: 600px) {
  .su { padding: 0; place-items: stretch; }
  .su-panel { width: 100%; max-height: none; height: 100dvh; margin-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 calc(var(--fu) * -1) 0 0 var(--frame), inset 0 var(--fu) 0 0 var(--panel-hi); }
  .su-head { padding: 22px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px)); }
  .su-body { padding: 20px max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); }
  .su-foot { padding: 14px max(20px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
  .su-row { grid-template-columns: 1fr; }
  .su-chips.ages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-sub { font-size: 16px; }
  .su-x { top: 10px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .su-scrim, .su-panel, .su-panel.shake, .su-star.on, .su-burst .su-star, .su-pass { animation: none; }
  .su-chip span, .su-go { transition: none; }
}