/* Base layer. Split along comment groups; link order IS cascade order.
   Kept deliberately small — the listening surfaces (P3 onward) bring their own. */

:root {
    --bg:      #101114;
    --fg:      #e8e6e1;
    --dim:     #8b8f98;
    --line:    #26282e;
    --accent:  #7fb2ff;
    --warn:    #ffb454;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
}

body {
    font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
    display: flex;
    justify-content: center;
    padding: 3rem 1.25rem 5rem;
}

main { width: 100%; max-width: 42rem; }

h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

.sub    { color: var(--dim); margin: 0 0 2rem; }
.rule   { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.dim    { color: var(--dim); }

/* Phase status block — replaced by the participant entry flow at P2. */
.card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1rem;
}

.card h2 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dim);
    margin: 0 0 0.6rem;
}

/* The deploy-freshness stamp. This exists to make P1's acceptance test visible
   without opening devtools: js/00-boot.js writes the build id it was deployed
   with, so a stale .js is legible at a glance rather than inferred. */
#stamp {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--accent);
    word-break: break-all;
}

#stamp.stale { color: var(--warn); }

footer {
    margin-top: 2.5rem;
    color: var(--dim);
    font-size: 0.85rem;
}