/* DEMO NIGHT — the demo in pilotlink.net's own world.

   Loaded after demo.css. The site is a ship's bridge at night: deep harbour
   charcoal, one teal accent, Geist for words and Geist Mono for every number.
   A visitor crossing from pilotlink.net to /demo should notice the URL change
   and nothing else, so the door pages (the chooser, the consent card, the
   ending) take the site's tokens verbatim, and the stage keeps its lit white
   cards on the same dark ground: the ops room after the corridor.

   The fonts are the site's own files, self-hosted, so a demo page makes no
   third-party request. Everything here hangs off the `dm-night` body class. */

@font-face {
    font-family: "Geist";
    src: url("/fonts/geist-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Geist Mono";
    src: url("/fonts/geist-mono-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

.dm-night {
    --nt-abyss: #0b1117;
    --nt-deck: #0e141b;
    --nt-surface: #131b24;
    --nt-raised: #18222d;
    --nt-signal: #4fd1c5;
    --nt-signal-dim: #35948c;
    --nt-flag: #d9a45b;
    --nt-ink: #e6edf3;
    --nt-ink-dim: #93a1ae;
    --nt-ink-faint: #5c6873;
    --nt-hair: rgba(148, 163, 184, 0.14);
    --nt-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --nt-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    font-family: var(--nt-sans);
    /* No `color` here: the stage's white cards inherit from the body, and a light
       ink on them made the rail's text vanish (Al, S17). The door pages set it. */
    background-color: var(--nt-abyss);
    /* The ground: the site's charcoal at the top left, running into the blue Al
       liked on the old demo pages, with the site's chart grid over it. Fixed, so
       a long stage page does not tile the gradient. */
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px),
        linear-gradient(160deg, #0b1117 0%, #0c2038 45%, #10324a 80%, #12414f 100%);
    background-size: 56px 56px, 56px 56px, cover;
    background-attachment: scroll, scroll, fixed;
    -webkit-font-smoothing: antialiased;
}
/* A teal wash only; the text keeps its own colour, dark on white and light on dark. */
.dm-night ::selection { background: rgba(79, 209, 197, 0.35); }
.nt-page { color: var(--nt-ink); }

/* The breathing status dot, shared with the site. */
@keyframes nt-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.nt-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--nt-signal);
    animation: nt-breathe 2.2s ease-in-out infinite;
    flex: none;
}
.nt-pulse--sm { width: 6px; height: 6px; }

/* ── the chooser ─────────────────────────────────────────────────────── */

.nt-page { width: 100%; max-width: 1240px; padding: 8px 8px 56px; }

.nt-bar {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 10px 0 22px;
    border-bottom: 1px solid var(--nt-hair);
    margin-bottom: 44px;
}
.nt-brand { color: var(--nt-ink); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.nt-brand sup { font-size: 9px; color: var(--nt-signal-dim); margin-left: 2px; }
.nt-bar-mid { font-family: var(--nt-mono); font-size: 11px; letter-spacing: 0.25em; color: var(--nt-ink-faint); }
.nt-bar-link { margin-left: auto; font-size: 13px; color: var(--nt-ink-dim); text-decoration: none; }
.nt-bar-link:hover { color: var(--nt-ink); }

.nt-eyebrow {
    margin: 0 0 16px;
    font-family: var(--nt-mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--nt-signal);
}
.nt-eyebrow .nt-dot { color: var(--nt-ink-faint); margin: 0 8px; }
.nt-h1 {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(32px, 4.6vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 600;
    text-wrap: balance;
    color: var(--nt-ink);
}
.nt-intro { display: grid; gap: 28px; align-items: end; margin-top: 8px; }
@media (min-width: 900px) { .nt-intro { grid-template-columns: 1fr 46ch; } }
.nt-lead { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--nt-ink-dim); }
.nt-lead strong { color: var(--nt-ink); font-weight: 500; }

/* Mira's panel. Not a wall, not a paywall: the honest sentence about the one
   thing that needs a code, with the code field right there. */
.nt-mira {
    margin: 40px 0 22px;
    padding: 20px 22px 22px;
    border: 1px solid var(--nt-hair);
    border-left: 2px solid var(--nt-signal);
    border-radius: 10px;
    background: rgba(19, 27, 36, 0.6);
    display: grid;
    gap: 14px;
}
@media (min-width: 900px) { .nt-mira { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: center; } }
.nt-mira-head { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; }
.nt-mira-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--nt-ink); }
.nt-mira p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--nt-ink-dim); }
.nt-mira p strong { color: var(--nt-ink); font-weight: 500; }
.nt-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nt-code label { font-family: var(--nt-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nt-ink-faint); }
.nt-code input {
    flex: 1 1 160px;
    min-width: 0;
    font: 500 14px var(--nt-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nt-ink);
    background: var(--nt-abyss);
    border: 1px solid var(--nt-hair);
    border-radius: 6px;
    padding: 9px 12px;
}
.nt-code input::placeholder { color: var(--nt-ink-faint); text-transform: none; letter-spacing: 0.08em; }
.nt-code input:focus { outline: none; border-color: var(--nt-signal); box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.15); }
.nt-code button {
    font: 500 14px var(--nt-sans);
    color: var(--nt-abyss);
    background: var(--nt-signal);
    border: 1px solid var(--nt-signal);
    border-radius: 6px;
    padding: 9px 16px;
    cursor: pointer;
}
.nt-code button:hover { background: #63dbd0; }
.nt-ask { font-size: 13px; color: var(--nt-signal-dim); text-decoration: none; white-space: nowrap; }
.nt-ask:hover { color: var(--nt-signal); }
.nt-chip {
    display: inline-block;
    font-family: var(--nt-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nt-abyss);
    background: var(--nt-signal);
    border-radius: 4px;
    padding: 3px 8px;
    margin-right: 10px;
    vertical-align: middle;
}
.nt-err { color: #f2a5a5; }

/* The chairs. The same card the site shows, so the visitor meets the five
   chairs they just read about, now real. */
.nt-chairs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .nt-chairs { grid-template-columns: repeat(2, 1fr); } }
/* SIX CHAIRS, TWO ROWS OF THREE (demo S25). This was pinned at repeat(5, 1fr)
   for the five seats, and the sixth wrapped and sat alone under a row of five.
   Three is an improvement anyway: each card goes from a fifth of the width to a
   third, which is room the card's sentence has wanted since business-S17.
   repeat(6, 1fr) is the other option and is too narrow at 1100px.
   Read left to right, top to bottom, the two rows are the night in order —
   1840 / 2200 / 2200 over 0330 / 0505 / 0800. */
@media (min-width: 1100px) { .nt-chairs { grid-template-columns: repeat(3, 1fr); } }
.nt-chair {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--nt-hair);
    border-radius: 10px;
    background: rgba(19, 27, 36, 0.4);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.nt-chair:hover { border-color: rgba(79, 209, 197, 0.6); background: rgba(19, 27, 36, 0.75); }
.nt-chair-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--nt-mono); font-size: 11px; }
.nt-hour { color: var(--nt-signal); font-variant-numeric: tabular-nums; }
.nt-stop { color: var(--nt-ink-faint); letter-spacing: 0.15em; text-transform: uppercase; }
.nt-chair-name { margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--nt-ink); }
.nt-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--nt-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nt-abyss);
    background: var(--nt-signal);
    vertical-align: 2px;
}
.nt-phone { margin-top: 4px; font-family: var(--nt-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--nt-ink-faint); }
.nt-chair-line { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--nt-ink-dim); }
.nt-chair-screen { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 20px; font-family: var(--nt-mono); font-size: 10.5px; line-height: 1.45; color: var(--nt-ink-faint); }
.nt-chair-screen .nt-pulse { margin-top: 4px; }
.nt-chair-go {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--nt-hair);
    font-size: 13px;
    font-weight: 500;
    color: var(--nt-ink);
}
.nt-chair-go span { color: var(--nt-signal); transition: transform 0.15s; }
.nt-chair:hover .nt-chair-go span { transform: translateX(2px); }
.nt-chair-route { margin-top: 8px; font-family: var(--nt-mono); font-size: 10px; color: var(--nt-ink-faint); }
.nt-foot { margin: 22px 0 0; font-family: var(--nt-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--nt-ink-faint); }

/* ── the consent card and the ending, on the seat pages ──────────────── */

.dm-night .dm-card--consent,
.dm-night .dm-card--done {
    background: var(--nt-surface);
    border: 1px solid var(--nt-hair);
    border-radius: 12px;
    box-shadow: 0 24px 48px -18px rgba(2, 6, 12, 0.65);
    color: var(--nt-ink);
    font-family: var(--nt-sans);
}
.dm-night .dm-card--consent .dm-brand,
.dm-night .dm-card--done .dm-brand { color: var(--nt-signal-dim); font-family: var(--nt-mono); font-weight: 500; letter-spacing: 0.2em; font-size: 11px; }
.dm-consent-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dm-consent-top .dm-brand { margin: 0; }
.dm-hourchip { font-family: var(--nt-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nt-ink-faint); }
.dm-hourchip b { color: var(--nt-signal); font-weight: 500; letter-spacing: 0; }
.dm-night .dm-card--consent .dm-h1,
.dm-night .dm-card--done .dm-h1 { color: var(--nt-ink); font-size: 30px; letter-spacing: -0.03em; font-weight: 600; }
.dm-night .dm-card--consent .dm-lead,
.dm-night .dm-card--done .dm-lead { color: var(--nt-ink-dim); font-size: 15px; }

/* The restart notice on the night ground: the flag colour, not the day amber. */
.dm-night .dm-restarted {
    border-left-color: var(--nt-flag);
    background: rgba(217, 164, 91, 0.08);
    color: var(--nt-ink-dim);
}
.dm-night .dm-consent-copy { border-color: var(--nt-hair); background: rgba(11, 17, 23, 0.5); }
.dm-night .dm-consent-copy p { color: var(--nt-ink-dim); }
.dm-night .dm-consent-copy strong { color: var(--nt-ink); font-weight: 500; }
.dm-promise { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
/* Not flex: an li with mixed text and <strong> children would split into columns. */
.dm-promise li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.55; color: var(--nt-ink-dim); }
.dm-promise li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 999px; background: var(--nt-signal-dim); }
.dm-promise strong { color: var(--nt-ink); font-weight: 500; }
.dm-night .dm-card--consent .dm-btn,
.dm-night .dm-card--done .dm-btn {
    background: transparent;
    color: var(--nt-ink);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-weight: 500;
    font-family: var(--nt-sans);
}
.dm-night .dm-card--consent .dm-btn:hover:not(:disabled),
.dm-night .dm-card--done .dm-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.22); }
.dm-night .dm-card--consent .dm-btn--solid { background: var(--nt-signal); color: var(--nt-abyss); border-color: var(--nt-signal); }
.dm-night .dm-card--consent .dm-btn--solid:hover:not(:disabled) { background: #63dbd0; }
.dm-night .dm-card--consent .dm-invite { background: rgba(11, 17, 23, 0.5); border-color: var(--nt-hair); border-left-color: var(--nt-signal); }
.dm-night .dm-card--consent .dm-invite p { color: var(--nt-ink-dim); }
.dm-night .dm-card--consent .dm-invite strong { color: var(--nt-ink); font-weight: 500; }
.dm-night .dm-card--consent .dm-invite-title { color: var(--nt-ink); }
.dm-night .dm-card--consent .dm-invite-form { border-top-color: var(--nt-hair); }
.dm-night .dm-card--consent .dm-invite-form label { color: var(--nt-ink-faint); font-family: var(--nt-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.dm-night .dm-card--consent .dm-invite-form input { background: var(--nt-abyss); color: var(--nt-ink); border-color: var(--nt-hair); font-family: var(--nt-mono); border-radius: 6px; }
.dm-night .dm-card--consent .dm-invite-form input:focus { outline: none; border-color: var(--nt-signal); box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.15); }
.dm-night .dm-card--consent .dm-invite-err { color: #f2a5a5; }
.dm-night .dm-card--consent .dm-allowance { color: var(--nt-ink-dim); }
.dm-night .dm-card--consent .dm-allowance strong { color: var(--nt-ink); }
.dm-night .dm-card--consent .dm-allowance-who { background: var(--nt-signal); color: var(--nt-abyss); font-family: var(--nt-mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10.5px; }
.dm-night .dm-tm { color: var(--nt-signal-dim); }

/* The S171 photo layer is retired by the night: its scrim painted a navy
   gradient over the ground on every seat page, and its background images were
   never made, so each seat page load logged a 404 the interns would have
   filed. The ground is the chart grid now, the same one the chooser stands on. */
.dm-night .dm-bg { display: none; }