/* Allowlist application page (/launchpad/<slug>/apply). Standalone: no app.js / style.css. Light only, like the teaser.
   Layout "quest map": collection header -> track of stage tiles -> one stage card -> human check + send. */
:root {
  --bg: #e6f3f5;
  --card: #ffffff;
  --ink: #111111;
  --muted: #6b6b6b;
  --faint: #a7acac;
  --line: #e2e6e6;
  --chip: #f1f3f3;
  --accent: #1a8fb0;
  --accent-dk: #136f8a;
  --done: #16a34a;
  --done-dk: #0f7a37;
  --soft: #e3f3f6;
  --ok: #16a34a;
  --danger: #d93636;
  --radius: 18px;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* the page colour sits on html; body stays clear so the fixed .bg layer (z-index -1) shows through */
html { background: var(--bg); }
html, body { margin: 0; color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: inherit; }
/* background: "Elysian fields" - soft sky over three layers of stepped pixel hills (1600 x 320 tile, repeats sideways) */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='320'%3E%3Cpath d='M0 320 L0 160 L16 160 L16 160 L32 160 L32 160 L48 160 L48 160 L64 160 L64 144 L80 144 L80 144 L96 144 L96 144 L112 144 L112 144 L128 144 L128 144 L144 144 L144 144 L160 144 L160 144 L176 144 L176 144 L192 144 L192 144 L208 144 L208 144 L224 144 L224 144 L240 144 L240 144 L256 144 L256 160 L272 160 L272 160 L288 160 L288 160 L304 160 L304 176 L320 176 L320 176 L336 176 L336 176 L352 176 L352 192 L368 192 L368 192 L384 192 L384 192 L400 192 L400 208 L416 208 L416 208 L432 208 L432 208 L448 208 L448 224 L464 224 L464 224 L480 224 L480 224 L496 224 L496 224 L512 224 L512 224 L528 224 L528 224 L544 224 L544 224 L560 224 L560 224 L576 224 L576 224 L592 224 L592 224 L608 224 L608 224 L624 224 L624 224 L640 224 L640 224 L656 224 L656 208 L672 208 L672 208 L688 208 L688 208 L704 208 L704 208 L720 208 L720 192 L736 192 L736 192 L752 192 L752 176 L768 176 L768 176 L784 176 L784 176 L800 176 L800 160 L816 160 L816 160 L832 160 L832 160 L848 160 L848 160 L864 160 L864 144 L880 144 L880 144 L896 144 L896 144 L912 144 L912 144 L928 144 L928 144 L944 144 L944 144 L960 144 L960 144 L976 144 L976 144 L992 144 L992 144 L1008 144 L1008 144 L1024 144 L1024 144 L1040 144 L1040 144 L1056 144 L1056 160 L1072 160 L1072 160 L1088 160 L1088 160 L1104 160 L1104 176 L1120 176 L1120 176 L1136 176 L1136 176 L1152 176 L1152 192 L1168 192 L1168 192 L1184 192 L1184 192 L1200 192 L1200 208 L1216 208 L1216 208 L1232 208 L1232 208 L1248 208 L1248 224 L1264 224 L1264 224 L1280 224 L1280 224 L1296 224 L1296 224 L1312 224 L1312 224 L1328 224 L1328 224 L1344 224 L1344 224 L1360 224 L1360 224 L1376 224 L1376 224 L1392 224 L1392 224 L1408 224 L1408 224 L1424 224 L1424 224 L1440 224 L1440 224 L1456 224 L1456 208 L1472 208 L1472 208 L1488 208 L1488 208 L1504 208 L1504 208 L1520 208 L1520 192 L1536 192 L1536 192 L1552 192 L1552 176 L1568 176 L1568 176 L1584 176 L1584 176 L1600 176 L1600 160 L1616 160 L1600 320 Z' fill='%23d7ece6'/%3E%3Cpath d='M0 320 L0 208 L16 208 L16 208 L32 208 L32 208 L48 208 L48 224 L64 224 L64 224 L80 224 L80 224 L96 224 L96 240 L112 240 L112 240 L128 240 L128 256 L144 256 L144 256 L160 256 L160 256 L176 256 L176 272 L192 272 L192 272 L208 272 L208 272 L224 272 L224 272 L240 272 L240 272 L256 272 L256 272 L272 272 L272 272 L288 272 L288 256 L304 256 L304 256 L320 256 L320 256 L336 256 L336 240 L352 240 L352 240 L368 240 L368 224 L384 224 L384 224 L400 224 L400 224 L416 224 L416 208 L432 208 L432 208 L448 208 L448 208 L464 208 L464 208 L480 208 L480 208 L496 208 L496 208 L512 208 L512 208 L528 208 L528 208 L544 208 L544 208 L560 208 L560 208 L576 208 L576 224 L592 224 L592 224 L608 224 L608 224 L624 224 L624 240 L640 240 L640 240 L656 240 L656 256 L672 256 L672 256 L688 256 L688 256 L704 256 L704 256 L720 256 L720 272 L736 272 L736 272 L752 272 L752 272 L768 272 L768 272 L784 272 L784 272 L800 272 L800 272 L816 272 L816 256 L832 256 L832 256 L848 256 L848 256 L864 256 L864 240 L880 240 L880 240 L896 240 L896 224 L912 224 L912 224 L928 224 L928 224 L944 224 L944 208 L960 208 L960 208 L976 208 L976 208 L992 208 L992 208 L1008 208 L1008 208 L1024 208 L1024 208 L1040 208 L1040 208 L1056 208 L1056 208 L1072 208 L1072 208 L1088 208 L1088 208 L1104 208 L1104 208 L1120 208 L1120 224 L1136 224 L1136 224 L1152 224 L1152 240 L1168 240 L1168 240 L1184 240 L1184 240 L1200 240 L1200 256 L1216 256 L1216 256 L1232 256 L1232 256 L1248 256 L1248 272 L1264 272 L1264 272 L1280 272 L1280 272 L1296 272 L1296 272 L1312 272 L1312 272 L1328 272 L1328 272 L1344 272 L1344 256 L1360 256 L1360 256 L1376 256 L1376 256 L1392 256 L1392 240 L1408 240 L1408 240 L1424 240 L1424 240 L1440 240 L1440 224 L1456 224 L1456 224 L1472 224 L1472 208 L1488 208 L1488 208 L1504 208 L1504 208 L1520 208 L1520 208 L1536 208 L1536 208 L1552 208 L1552 208 L1568 208 L1568 208 L1584 208 L1584 208 L1600 208 L1600 208 L1616 208 L1600 320 Z' fill='%23c3e3d8'/%3E%3Cpath d='M0 320 L0 288 L16 288 L16 304 L32 304 L32 304 L48 304 L48 304 L64 304 L64 304 L80 304 L80 304 L96 304 L96 288 L112 288 L112 288 L128 288 L128 288 L144 288 L144 288 L160 288 L160 272 L176 272 L176 272 L192 272 L192 272 L208 272 L208 256 L224 256 L224 256 L240 256 L240 256 L256 256 L256 256 L272 256 L272 256 L288 256 L288 272 L304 272 L304 272 L320 272 L320 272 L336 272 L336 272 L352 272 L352 288 L368 288 L368 288 L384 288 L384 288 L400 288 L400 288 L416 288 L416 304 L432 304 L432 304 L448 304 L448 304 L464 304 L464 304 L480 304 L480 304 L496 304 L496 288 L512 288 L512 288 L528 288 L528 288 L544 288 L544 288 L560 288 L560 272 L576 272 L576 272 L592 272 L592 272 L608 272 L608 256 L624 256 L624 256 L640 256 L640 256 L656 256 L656 256 L672 256 L672 256 L688 256 L688 272 L704 272 L704 272 L720 272 L720 272 L736 272 L736 272 L752 272 L752 288 L768 288 L768 288 L784 288 L784 288 L800 288 L800 288 L816 288 L816 304 L832 304 L832 304 L848 304 L848 304 L864 304 L864 304 L880 304 L880 304 L896 304 L896 288 L912 288 L912 288 L928 288 L928 288 L944 288 L944 288 L960 288 L960 272 L976 272 L976 272 L992 272 L992 272 L1008 272 L1008 256 L1024 256 L1024 256 L1040 256 L1040 256 L1056 256 L1056 256 L1072 256 L1072 256 L1088 256 L1088 272 L1104 272 L1104 272 L1120 272 L1120 272 L1136 272 L1136 272 L1152 272 L1152 288 L1168 288 L1168 288 L1184 288 L1184 288 L1200 288 L1200 288 L1216 288 L1216 304 L1232 304 L1232 304 L1248 304 L1248 304 L1264 304 L1264 304 L1280 304 L1280 304 L1296 304 L1296 288 L1312 288 L1312 288 L1328 288 L1328 288 L1344 288 L1344 288 L1360 288 L1360 272 L1376 272 L1376 272 L1392 272 L1392 272 L1408 272 L1408 256 L1424 256 L1424 256 L1440 256 L1440 256 L1456 256 L1456 256 L1472 256 L1472 256 L1488 256 L1488 272 L1504 272 L1504 272 L1520 272 L1520 272 L1536 272 L1536 272 L1552 272 L1552 288 L1568 288 L1568 288 L1584 288 L1584 288 L1600 288 L1600 288 L1616 288 L1600 320 Z' fill='%23b1d9c9'/%3E%3C/svg%3E") center bottom / 1600px 320px repeat-x, linear-gradient(180deg, #cdebf1 0%, #e9f4f5 55%, #f3f6f2 100%); }
@media (max-width: 720px) { .bg { background-size: 1000px 200px, auto; } }
.wrap { max-width: 880px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; padding-block: 48px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
#app, #view, #tail { display: flex; flex-direction: column; gap: 24px; }
#tail { gap: 12px; }
#tail[hidden], .ts[hidden], [hidden] { display: none !important; }
.loading { color: var(--muted); padding: 40px 0; text-align: center; }

/* header */
.head { display: flex; gap: 28px; align-items: center; }
.thumb { width: 200px; height: 200px; flex: none; border-radius: 22px; overflow: hidden; background: var(--chip); border: 1px solid var(--line); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb span { font-family: Silkscreen, monospace; font-size: 34px; color: var(--faint); }
.head-t { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.head h1 { margin: 0 0 0 -.07em; font-family: Silkscreen, "JetBrains Mono", monospace; font-weight: 400; font-size: clamp(26px, 5.4vw, 48px); line-height: 1.05; letter-spacing: .02em; text-wrap: balance; }
.head p { margin: 0; color: var(--muted); font-size: 15.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.by { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.by b { color: var(--ink); }
.by img { border-radius: 4px; }
.by:hover b { text-decoration: underline; text-underline-offset: 3px; }
.blurb { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font: 700 12px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; color: #3d4142; background: var(--chip); }
.tag.chain { color: #4f5a06; background: #f2f7d2; border-color: #dfe8a4; }
.tag.open { color: var(--accent); background: var(--soft); border-color: #bfe2ea; }

/* track of stage tiles; the line behind fills up to the current stage */
/* first tile sits flush with the left edge, last with the right edge; the line runs tile centre to tile centre */
.track { --tile: 76px; display: flex; justify-content: space-between; position: relative; }
.track::before, .track::after { content: ""; position: absolute; top: calc(var(--tile) / 2 - 2px); left: calc(var(--tile) / 2); height: 0; }
.track::before { right: calc(var(--tile) / 2); border-top: 4px dashed #cdd4d4; }
.track::after { width: calc((100% - var(--tile)) * var(--fill)); border-top: 4px solid var(--done); transition: width .4s; }
.node { all: unset; position: relative; z-index: 1; width: var(--tile); display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; cursor: pointer; }
.node b, .node .sub { width: max-content; max-width: 160px; }
.node:first-child { align-items: flex-start; text-align: left; }
.node:last-child { align-items: flex-end; text-align: right; }
.node.lock { cursor: default; }
.node:focus-visible .tile { outline: 3px solid var(--accent); outline-offset: 3px; }
.tile { width: var(--tile); height: var(--tile); border-radius: 12px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); color: var(--faint); box-shadow: 0 3px 0 #dfe4e4; transition: transform .12s; }
.node:not(.lock):hover .tile { transform: translateY(-2px); }
.node.done .tile { background: var(--done); border-color: var(--done); color: #fff; box-shadow: 0 3px 0 var(--done-dk); }
.node:not(.done):not(.lock) .tile { color: var(--ink); }
.node.now .tile, .node.now:not(.done):not(.lock) .tile { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 3px 0 #000, 0 0 0 5px var(--soft); }
.node.done.now .tile { background: var(--done); border-color: var(--done); box-shadow: 0 3px 0 var(--done-dk), 0 0 0 5px #dcf3e3; }
.node b { font-size: 13px; line-height: 1.25; }
.node .sm { display: none; }
.node.lock b { color: var(--faint); }
.node .sub { font: 11px "JetBrains Mono", ui-monospace, monospace; color: var(--muted); min-height: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the stage in focus */
.stage { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; box-shadow: 0 1px 2px rgba(10, 20, 20, .04); }
.stage-l, .stage-r { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* right column starts level with the stage title (kicker line + gap above it) */
.stage-r { padding-top: 23px; }
.stage-r > .link { margin-bottom: 2px; }
.kick { font: 11px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; color: var(--muted); }
.stage h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.stage p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.stage p b { color: var(--ink); }
.note { font-size: 12.5px !important; }
.who { display: flex; align-items: center; gap: 10px; font: 700 14px "JetBrains Mono", ui-monospace, monospace; padding: 12px 14px; border-radius: 12px; background: var(--chip); }
.who img { width: 32px; height: 32px; border-radius: 50%; }
.okmsg { color: var(--done) !important; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.okmsg svg { width: 18px; height: 18px; }
.verified { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--done); background: #f3fbf5; color: var(--done); font-weight: 700; font-size: 14px; }
.verified svg { width: 18px; height: 18px; flex: none; }
.verified span { flex: 1; }

/* buttons are chunky game keys (same 3 px "base" as the track tiles), not pills */
.btn { font: inherit; font-size: 14px; font-weight: 700; border-radius: 10px; border: 2px solid #d3d9d9; background: var(--card); color: var(--ink); padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 3px 0 #d3d9d9; transition: transform .06s, box-shadow .06s; }
.btn:hover { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 3px 0 #000; }
.btn.dark:hover { background: #262626; }
.btn.big { width: 100%; padding: 15px 18px; font-size: 15px; border-radius: 14px; }
.btn[disabled] { background: repeating-linear-gradient(-45deg, #e6eaea 0 8px, #eef1f1 8px 16px); border-color: #dde2e2; color: #9aa1a1; box-shadow: none; cursor: not-allowed; transform: none; }

/* like / repost / reply: three equal key caps with a pixel icon */
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.act { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: 10px; border: 2px solid #d3d9d9; background: #fff; box-shadow: 0 3px 0 #d3d9d9; text-decoration: none; font-weight: 700; font-size: 13.5px; color: var(--ink); transition: transform .06s, box-shadow .06s; }
.act svg { width: 18px; height: 18px; }
.act:hover { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.act.done { border-color: var(--done); color: var(--done); box-shadow: 0 3px 0 #bfe6cc; background: #f3fbf5; }

/* input and its button form one bar */
.field { display: flex; }
.field input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 11px 12px; border: 2px solid #d3d9d9; border-right: 0; border-radius: 10px 0 0 10px; background: #fff; color: var(--ink); }
.field input:focus { outline: none; border-color: var(--ink); }
.field .btn { border-radius: 0 10px 10px 0; box-shadow: none; transform: none; padding-inline: 20px; }
.link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; width: fit-content; }
.error { color: var(--danger) !important; font-size: 13px; line-height: 1.45; margin: 0; }
.center { text-align: center; }
.muted { color: var(--muted); margin: 0; }

.ts { display: flex; justify-content: center; min-height: 66px; }
.foot { text-align: center; font-size: 12.5px; color: var(--muted); margin: 0; }
.foot a { color: var(--ink); }

.done-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 22px; display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
.done-card .kv { max-width: 420px; }
.big-dot { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--done); color: #fff; font-size: 24px; font-weight: 800; box-shadow: 0 3px 0 var(--done-dk); }
.big-dot.sel { background: var(--ink); box-shadow: 0 3px 0 #000; }
.big-dot.no { background: #fbe9e9; color: var(--danger); box-shadow: none; }
.done-card h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.kv { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; text-align: left; font-size: 13px; margin: 6px 0 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font: 12px "JetBrains Mono", ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; }
.banner { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-size: 14px; color: var(--muted); display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

@media (max-width: 720px) {
  .wrap { padding-block: 28px 48px; }
  .head { gap: 16px; }
  .thumb { width: 112px; height: 112px; border-radius: 16px; }
  .head p, .blurb { font-size: 14px; }
  .tag { font-size: 11px; }
  .track { --tile: 50px; }
  .tile svg { width: 20px; height: 20px; }
  .node b { font-size: 11px; }
  .node .lg { display: none; }
  .node .sm { display: inline; }
  .node .sub { display: none; }
  .stage { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .stage-r { padding-top: 0; }
}
@media (max-width: 380px) { .track { --tile: 46px; } .node b { font-size: 10.5px; } }

/* big screens at 100 % zoom (1440 px and up): everything one step larger */
@media (min-width: 1440px) {
  .wrap { max-width: 1040px; }
  #app, #view { gap: 30px; }
  .thumb { width: 236px; height: 236px; border-radius: 26px; }
  .head { gap: 32px; }
  .head h1 { font-size: 56px; }
  .head p, .blurb { font-size: 17px; }
  .tag { font-size: 13px; padding: 7px 11px; }
  .track { --tile: 92px; }
  .tile svg { width: 32px; height: 32px; }
  .node b { font-size: 14.5px; }
  .node .sub { font-size: 12px; }
  .stage { padding: 34px; gap: 40px; }
  .stage-r { padding-top: 25px; }
  .kick { font-size: 12px; }
  .stage h2 { font-size: 30px; }
  .stage p { font-size: 15.5px; }
  .note { font-size: 13.5px !important; }
  .btn { font-size: 15px; }
  .act { font-size: 14.5px; padding: 12px 8px; }
  .field input { font-size: 15px; padding: 13px 14px; }
  .act svg { width: 20px; height: 20px; }
  .btn.big { padding: 17px 18px; font-size: 16.5px; }
  .foot, .link { font-size: 14px; }
}