/*
 * /start Get started page: the app-side rules around Asa's design (site.css is the design's own CSS, extracted from
 * questworks-site `newsite`, scoped under #v-start). This file only handles what the app adds: showing the page
 * instead of the card shell, form messages, the busy button and link-style buttons. One centered column, no animation (Asa, 2026-11-02).
 */
body.st2-mode { background: #fff; }
body.st2-mode .qm-header, body.st2-mode .shell, body.st2-mode .auth-foot { display: none; }
.st2-stage[hidden] { display: none; }
#st2-wrap { font-family: var(--font-sans, 'League Spartan', system-ui, sans-serif); color: var(--ink); background: var(--qw-white, #fff); font-weight: 400; -webkit-font-smoothing: antialiased; }
#v-start b, #v-start strong { font-weight: 400; }
#v-start h1, #v-start h2 { font-weight: 400; }
#v-start [hidden] { display: none !important; }
#v-start .st2-h1 { margin: 0; font-size: 34px; font-weight: 400; color: var(--head); outline: none; }
#v-start .st2-view { display: grid; gap: 14px; }
#v-start .st2-auth { display: grid; gap: 14px; }
#v-start .st2-lead { text-decoration: none; }
#v-start .st2-msg { margin: -4px 0 0; font-size: var(--fs-small, 15px); color: var(--strained-ink, #c93d37); }
#v-start .st2-msg:empty { display: none; }
#v-start .st2-msg[data-tone="ok"] { color: var(--ink-2); }
#v-start .st2-f > .st2-msg { margin-top: -6px; }
#v-start .st2-f label.err input { border-color: var(--strained, #e4605b); }
#v-start .st2-f input::placeholder { color: var(--ink-3); }
#v-start .st2-who { margin: 0; color: var(--ink-2); font-size: var(--fs-small, 15px); overflow-wrap: anywhere; }
#v-start .st2-link { all: unset; cursor: pointer; color: var(--qw-link); text-decoration: underline; font-size: inherit; }
#v-start .st2-link:focus-visible { outline: 2px solid var(--qw-blue); outline-offset: 2px; }
#v-start .st2-legal a { text-decoration: underline; }
#v-start .qm-btn { width: 100%; box-sizing: border-box; cursor: pointer; }
#v-start .qm-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
#v-start .qm-btn .swap { display: inline-grid; }
#v-start .qm-btn .swap > * { grid-area: 1 / 1; transition: opacity .2s; }
#v-start .qm-btn .swap .busy { opacity: 0; }
#v-start .qm-btn[aria-busy="true"] .swap .lbl { opacity: 0; }
#v-start .qm-btn[aria-busy="true"] .swap .busy { opacity: 1; }
#v-start .qm-btn .dots { display: inline-flex; gap: 3px; margin-left: 4px; }
#v-start .qm-btn .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: st2dot 1s infinite; }
#v-start .qm-btn .dots i:nth-child(2) { animation-delay: .15s; }
#v-start .qm-btn .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes st2dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #v-start .qm-btn .dots i { animation: none; opacity: .6; }
}

/* ---- The first quest's genre cards (card shell, time step). Same card language as .choice-card in phase2.css. ---- */
.genre-box { border: 0; margin: 4px 0 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.genre-box[hidden] { display: none; }
.genre-legend { padding: 0; font-size: 17px; line-height: 1.3; color: var(--head); }
.genre-lead { margin: 0; }
.genre-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.genre-card { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; overflow: hidden; transition: border-color var(--qw-dur-fast, .15s) ease, background-color var(--qw-dur-fast, .15s) ease; }
.genre-card:hover { background: var(--surface-2); }
.genre-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.genre-card:has(input:focus-visible) { outline: 2px dashed var(--ink-3); outline-offset: 3px; }
.genre-card:has(input:checked), .genre-card:has(input:checked):hover { border-color: var(--core); background: var(--alice); }
.genre-art { aspect-ratio: 16 / 9; background: var(--surface-2); display: block; overflow: hidden; }
.genre-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.genre-art.none { display: grid; place-items: center; color: var(--ink-3); font-size: 14px; }
.genre-name { display: block; padding: 7px 10px 9px; font-size: 14px; line-height: 1.2; color: var(--head); }
.genre-card .cc-mark { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; opacity: 0; transform: scale(.85); transition: opacity .15s ease, transform .15s ease; }
.genre-card:has(input:checked) .cc-mark { opacity: 1; transform: none; }
.genre-card .cc-mark svg { display: block; }
.genre-card.surprise .genre-art { display: grid; place-items: center; background: linear-gradient(117deg, var(--core), var(--sky)); color: #fff; font-size: 34px; }
.genre-card.surprise .genre-art span { font-size: 34px; line-height: 1; }
.genre-picked { margin: 0; min-height: 1.4em; }
@media (max-width: 520px) { .genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .genre-name { font-size: 13px; padding: 6px 8px 8px; } }
@media (prefers-reduced-motion: reduce) { .genre-card, .genre-card .cc-mark { transition: none; } }

/* ---- The invite step's confirmation ("Team invites sent.") ---- */
.invite-sent { display: grid; gap: 14px; justify-items: start; }
.invite-sent[hidden] { display: none; }
.invite-sent-row { display: flex; align-items: center; gap: 12px; justify-self: stretch; }
.invite-sent .done-mark { display: block; flex: none; }
.invite-sent-h { margin: 0; max-width: none; flex: 1; min-width: 0; font-size: 22px; line-height: 1.2; font-weight: 400; color: var(--head); outline: none; }
.invite-sent .lead { margin: 0; }
.invite-sent .stackbtn { width: 100%; display: grid; gap: 12px; margin-top: 10px; }

/* ---- The done screen (Asa, 2026-11-02): one focal element (the heading, its small check beside it: .mark-head in auth.css), 4px-step spacing, the join
   link field full width with Copy link beside it, the helper line right under the field, "Posted in #channel" as a line. ---- */
[data-panel="done"] .body { gap: 16px; }
[data-panel="done"] .body > .small-line { margin: 0; }

/* "Team invites sent." after the time choice sent them: a secondary line, its check the size of the text. */
.invites-sent { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.invites-sent[hidden] { display: none; }
.invites-sent .done-mark { margin: 0; display: inline-flex; flex: none; }
.invites-sent .done-mark .mark { width: 16px; height: 16px; }

.done-link { display: grid; gap: 4px; }
.done-link .copy-field { margin-top: 0; }
.done-link #done-link-hint { margin: 0; }
.done-link #done-link-hint[hidden] { display: none; }
.done-post:empty { display: none; }
.done-post { display: grid; justify-items: start; gap: 8px; margin-top: 8px; }
.done-post .post-line { margin: 0; }
.done-post .post-btn { min-height: 40px; }
.post-done { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.post-done svg { flex: none; }

/* ---- Get started steps (D1, DASH_DESIGN_BRIEF 4.1): indicator, Back, task cards, overseer invite results. ---- */
#v-start .st2-top { display: grid; gap: 10px; }
#v-start .st2-back { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 24px; font-size: 14px; color: var(--btn2-ink); }
#v-start .st2-back:focus-visible { outline: 2px solid var(--qw-blue); outline-offset: 2px; border-radius: 6px; }
#v-start .st2-stp { display: flex; align-items: center; gap: 12px; }
#v-start .st2-stp-l { font: 400 12px/1.4 var(--font-mono); letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; }
#v-start .st2-seg { display: flex; gap: 4px; flex: 1; max-width: 180px; }
#v-start .st2-seg i { flex: 1; height: 4px; border-radius: 999px; background: var(--line-2); }
#v-start .st2-seg i.on { background: var(--core); }
#v-start .st2-em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
#v-start .st2-small { margin: 0; font-size: 14px; color: var(--ink-2); }
#v-start .st2-tasks { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
#v-start .st2-task { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
#v-start .st2-task input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
#v-start .st2-task:has(input:focus-visible) { outline: 2px solid var(--qw-blue); outline-offset: 2px; }
#v-start .st2-task:has(input:checked) { border-color: var(--core); background: var(--wash); }
#v-start .st2-rd { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); box-sizing: border-box; }
#v-start .st2-task:has(input:checked) .st2-rd { border-color: var(--core); background: radial-gradient(circle, var(--core) 0 4px, transparent 4.5px); }
#v-start .st2-tt { font-size: 17px; line-height: 1.3; color: var(--head); }
#v-start .qm-btn.ghost { background: transparent; color: var(--btn2-ink); border: 1px solid var(--btn2-line); }
#v-start a.qm-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#v-start .st2-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#v-start .st2-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
#v-start .st2-chip { font: 400 11px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--core-ink); background: var(--alice); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
#v-start .st2-row.no .st2-chip { color: var(--ink-2); background: var(--surface-2); }
#v-start .st2-addr { font: 400 14px/1.4 var(--font-mono); color: var(--head); overflow-wrap: anywhere; }
#v-start .st2-row-note { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  #v-start .st2-task { transition: none; }
}
#v-start .qm-btn { justify-content: center; text-align: center; }

/* Team name hint: short line under the field. --ink-2: the brief keeps --ink-3 for 18px+ text and placeholders. */
.st2-hint { margin: 0; font-size: var(--fs-small, 14px); color: var(--ink-2); line-height: 1.4; }

/* /start has no motion between steps (Asa, 2026-11-02): the card shell's panel slide and height tween are off on this page only. */
#flow .panel.entering { animation: none; }
#flow .panel[data-active] .mark .disc, #flow .panel[data-active] .mark .tick { animation: none; }
#flow .panel.leaving { display: none; }
/* ui.js pins the stack's height inline while it tweens; with no tween the stack keeps its natural height. */
#flow .stack.sizing { transition: none; height: auto !important; }