/* Act 1 《抵达》ARRIVAL — chapter path, chapter view, guided task.
   Shares the Foundry palette with trial.css. Kept as its own stylesheet so
   act1.html stays independent of the community shell. */

.a1-root {
    --a1-ink: #e9edf5;
    --a1-ink-2: #a7b3c9;
    --a1-ink-3: #6b7794;
    --a1-panel: #0c1220;
    --a1-line: #1b2740;
    --a1-cyan: #35e0f5;
    --a1-amber: #ffcf6b;
    --a1-ok: #34d399;
    min-height: 100vh;
    background:
        radial-gradient(120% 80% at 50% 0%, #101a2e 0%, #080b14 55%, #05070e 100%);
    color: var(--a1-ink);
    padding: 26px 16px 90px;
}

.a1-wrap { max-width: 720px; margin: 0 auto; }

.a1-gate { text-align: center; padding: 70px 10px; }
.a1-gate h2 { font-size: 26px; margin-bottom: 12px; }
.a1-gate p { color: var(--a1-ink-2); line-height: 1.8; margin-bottom: 22px; }

/* ---------- hub ---------- */

.a1-head { margin-bottom: 22px; }

.a1-act {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--a1-cyan);
    text-shadow: 0 0 16px rgba(53, 224, 245, 0.4);
}

.a1-head h1 { font-size: 30px; line-height: 1.25; margin: 10px 0 12px; color: #fff; }

.a1-intro { color: var(--a1-ink-2); font-size: 15px; line-height: 1.75; }

.a1-bar { margin: 0 0 22px; }
.a1-bar-track { height: 5px; border-radius: 99px; background: #131c30; overflow: hidden; }
.a1-bar-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--a1-cyan), #7ad9ff);
    transition: width 0.5s cubic-bezier(.2, .8, .2, 1);
}
.a1-bar-lbl { margin-top: 8px; font-size: 12.5px; color: var(--a1-ink-3); }

/* Signed-out notice on the hub. Quieter than .a1-next on purpose: it states a
   condition, it is not the thing to do next. See js/act1.js § renderGuest. */
.a1-guest {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    background: rgba(53, 224, 245, 0.06); border: 1px solid var(--a1-line);
    border-radius: 14px; padding: 14px 16px; margin: 0 0 20px;
}
.a1-guest p {
    color: var(--a1-ink-2); font-size: 13.5px; line-height: 1.6;
    margin: 0; flex: 1 1 220px;
}
.a1-guest .a1-btn { padding: 10px 22px; font-size: 13.5px; }

/* The "one door that matters" call-out above the map. See js/act1.js
   § renderNext — it is the only accent-filled control on the hub, so the
   chapter cards below stay a map you can browse rather than six competing
   invitations. */
.a1-next { margin: 0 0 20px; }
.a1-next-why {
    color: var(--a1-ink-2); font-size: 13.5px; line-height: 1.65;
    margin: 0 0 12px; padding-left: 12px; border-left: 2px solid var(--a1-ok);
}
.a1-next-go { flex-direction: column; gap: 2px; padding: 13px 30px; text-align: center; }
.a1-next-nm { font-weight: 600; font-size: 12.5px; opacity: 0.72; }

.a1-list { display: grid; gap: 10px; }

.a1-ch {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    background: var(--a1-panel); border: 1px solid var(--a1-line);
    border-radius: 14px; padding: 15px 16px; cursor: pointer;
    font-family: inherit; color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.a1-ch:hover { border-color: #2e3f63; transform: translateY(-1px); background: #0e1526; }

.a1-ch-n {
    flex: 0 0 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #131c30; color: var(--a1-ink-2);
    font-weight: 700; font-size: 14px;
}
.a1-ch.done .a1-ch-n { background: rgba(52, 211, 153, 0.14); color: var(--a1-ok); }
.a1-ch.finale .a1-ch-n { background: rgba(255, 207, 107, 0.12); color: var(--a1-amber); }

.a1-ch-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.a1-ch-name { font-size: 15.5px; font-weight: 600; color: var(--a1-ink); }
.a1-ch-task { font-size: 12.5px; color: var(--a1-ink-3); }
.a1-ch-go { font-size: 12.5px; color: var(--a1-ink-3); flex: 0 0 auto; }

/* ---------- not open yet ----------
   Dimmed and quiet, never hidden: a chapter you cannot enter yet is still
   something to walk towards, and hiding it would make the act look shorter
   than it is. It keeps its name and its number so the road stays legible. */

.a1-ch.locked { opacity: 0.5; cursor: default; }
.a1-ch.locked:hover { transform: none; border-color: var(--a1-line); background: var(--a1-panel); }
.a1-ch.locked .a1-ch-n { background: #101828; color: var(--a1-ink-3); font-size: 13px; }
.a1-ch.locked .a1-ch-name { color: var(--a1-ink-2); }
.a1-ch.locked .a1-ch-go { letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }

/* Tapping a locked chapter throws the eye at the one that IS open. */
.a1-ch.nudge {
    border-color: var(--a1-cyan);
    animation: a1-nudge 1.1s cubic-bezier(.2, .8, .2, 1);
}
@keyframes a1-nudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(53, 224, 245, 0); }
    18% { box-shadow: 0 0 0 4px rgba(53, 224, 245, 0.22); }
    60% { box-shadow: 0 0 0 3px rgba(53, 224, 245, 0.12); }
}

/* The unlock, said in the moment it happens. */
.a1-done-open {
    margin: 14px 0 0; padding: 11px 14px;
    border: 1px solid rgba(53, 224, 245, 0.32); border-radius: 12px;
    background: rgba(53, 224, 245, 0.07);
    color: var(--a1-ink); font-size: 14px; font-weight: 600;
}

.a1-foot { margin-top: 26px; text-align: center; }

/* ---------- chapter ---------- */

.a1-c-head { margin-bottom: 20px; }
.a1-c-kicker {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--a1-cyan);
}
.a1-c-head h1 { font-size: 27px; line-height: 1.3; margin-top: 9px; color: #fff; }

/* The Stoker speaks in a panel with a lit edge — a person talking, not a
   callout box. */
.a1-stoker {
    background: linear-gradient(180deg, #0e1728 0%, #0b1120 100%);
    border: 1px solid var(--a1-line); border-left: 3px solid var(--a1-amber);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 22px;
}
.a1-stoker-who {
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--a1-amber); margin-bottom: 10px;
}
.a1-stoker-said p {
    color: #d6dfef; font-size: 16px; line-height: 1.8; margin: 0 0 13px;
}
.a1-stoker-said p:last-child { margin-bottom: 0; }

.a1-kicker {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--a1-ink-3); margin-bottom: 12px;
}

.a1-learns { display: grid; gap: 11px; margin-bottom: 22px; }
.a1-learn {
    background: var(--a1-panel); border: 1px solid var(--a1-line);
    border-radius: 12px; padding: 14px 16px;
}
.a1-learn b { display: block; font-size: 14.5px; color: var(--a1-ink); margin-bottom: 5px; }
.a1-learn span { font-size: 13.5px; color: var(--a1-ink-2); line-height: 1.7; }

.a1-c-done {
    border: 1px solid rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.07);
    color: #b6f0da; border-radius: 12px; padding: 13px 16px;
    font-size: 13.5px; line-height: 1.7; margin-bottom: 20px;
}

.a1-c-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- task ---------- */

.a1-t-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 18px;
}
.a1-t-kicker {
    font-size: 17px; font-weight: 700; color: #fff;
}
.a1-t-step { font-size: 12px; color: var(--a1-ink-3); flex: 0 0 auto; }

.a1-t-lead { color: var(--a1-ink-2); font-size: 15px; line-height: 1.75; margin-bottom: 18px; }

.a1-lanes { display: grid; gap: 10px; }
.a1-lane {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    background: var(--a1-panel); border: 1px solid var(--a1-line);
    border-radius: 14px; padding: 14px 16px; cursor: pointer;
    font-family: inherit; color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.a1-lane:hover { border-color: var(--a1-cyan); transform: translateY(-1px); }
.a1-lane-i { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.a1-lane-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a1-lane-t b { font-size: 15px; color: var(--a1-ink); font-weight: 600; }
.a1-lane-t small { font-size: 12.5px; color: var(--a1-ink-3); }

/* The prompt is EDITABLE. Every chapter tells the reader to swap the bits in
   brackets for their own, and the old read-only <pre> would not accept typing —
   the instruction and the interface disagreed. */
.a1-prompt { margin-bottom: 12px; }
.a1-prompt-ta {
    width: 100%; background: #070c16; border: 1px solid var(--a1-line);
    border-radius: 12px; padding: 15px; color: #cfe6ff;
    font-size: 13.5px; line-height: 1.75; resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.a1-prompt-ta:focus { outline: none; border-color: var(--a1-cyan); }

.a1-note { font-size: 12.5px; color: var(--a1-ink-3); line-height: 1.7; margin: 0 0 8px; }

.a1-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.a1-tool {
    border: 1px solid var(--a1-line); border-radius: 999px; padding: 8px 15px;
    font-size: 12.5px; color: var(--a1-ink-2); background: none;
    cursor: pointer; font-family: inherit;
}
.a1-tool:hover { border-color: var(--a1-cyan); color: var(--a1-cyan); }

/* Where the post goes, said before it is written. */
.a1-privacy {
    margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: #cbb994;
    background: rgba(255, 207, 107, 0.07);
    border: 1px solid rgba(255, 207, 107, 0.22);
    border-radius: 10px; padding: 11px 13px;
}

.a1-intro-stoker { color: var(--a1-ink-3) !important; font-size: 13.5px !important; margin-top: 14px; }
.a1-intro p { margin: 0 0 11px; }

.a1-recipe { display: grid; gap: 10px; }
.a1-recipe-row {
    display: flex; gap: 13px; align-items: flex-start;
    background: var(--a1-panel); border: 1px solid var(--a1-line);
    border-radius: 12px; padding: 13px 15px;
}
.a1-recipe-n {
    flex: 0 0 24px; height: 24px; border-radius: 50%; background: #131c30;
    color: var(--a1-cyan); font-size: 12.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
/* One part, one button — the row is the control, so it stays a row on a phone
   with the button sitting under the example rather than squeezing it. */
.a1-recipe-add {
    margin-left: auto; align-self: center; flex: none;
    background: #0d1524; color: var(--a1-ink); cursor: pointer;
    border: 1px solid var(--a1-line); border-radius: 999px;
    padding: 7px 13px; font-size: 13px; font-family: inherit;
}
.a1-recipe-add:hover:not(:disabled) { border-color: var(--a1-cyan); color: #fff; }
.a1-recipe-add:disabled { cursor: default; opacity: .55; }
.a1-recipe-row.added { border-color: var(--a1-ok); }
@media (max-width: 460px) {
    .a1-recipe-row { flex-wrap: wrap; }
    .a1-recipe-add { margin-left: 34px; align-self: flex-start; }
}
.a1-recipe-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.a1-recipe-b b { font-size: 14px; color: var(--a1-ink); }
.a1-recipe-b code {
    font-size: 12.5px; color: #9fd7ff; background: #070c16;
    border-radius: 7px; padding: 5px 9px; line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.a1-mins { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.a1-mins label { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; }
.a1-mins span { font-size: 12.5px; color: var(--a1-ink-3); }
.a1-mins input {
    background: #070c16; border: 1px solid var(--a1-line); border-radius: 10px;
    padding: 11px 13px; color: var(--a1-ink); font-size: 15px; font-family: inherit;
}
.a1-mins input:focus { outline: none; border-color: var(--a1-cyan); }

#a1-result {
    width: 100%; background: #070c16; border: 1px solid var(--a1-line);
    border-radius: 12px; padding: 14px; color: var(--a1-ink);
    font-size: 14.5px; line-height: 1.7; font-family: inherit; resize: vertical;
}
#a1-result:focus { outline: none; border-color: var(--a1-cyan); }

.a1-err { color: #ffb4c0; font-size: 13.5px; line-height: 1.6; margin-top: 10px; min-height: 1px; }

.a1-t-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; }

.a1-done-h { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.a1-done-q { color: var(--a1-ink-2); font-size: 15.5px; line-height: 1.8; }

/* ---------- buttons ---------- */

.a1-btn {
    border: none; cursor: pointer; font-family: inherit; font-weight: 700;
    background: linear-gradient(135deg, var(--a1-cyan), #7ad9ff); color: #05131a;
    border-radius: 999px; padding: 12px 28px; font-size: 14.5px;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 22px rgba(53, 224, 245, 0.2);
}
.a1-btn:hover { filter: brightness(1.06); }
.a1-btn:disabled { opacity: 0.55; cursor: default; }

.a1-btn.ghost {
    background: none; color: var(--a1-ink-2);
    border: 1px solid var(--a1-line); box-shadow: none; font-weight: 600;
}
.a1-btn.ghost:hover { border-color: #2e3f63; color: var(--a1-ink); }

@media (max-width: 560px) {
    .a1-head h1 { font-size: 25px; }
    .a1-c-head h1 { font-size: 22px; }
    .a1-stoker-said p { font-size: 15px; }
    .a1-t-nav { flex-direction: column-reverse; }
    .a1-t-nav .a1-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .a1-bar-fill { transition: none; }
    .a1-ch:hover, .a1-lane:hover { transform: none; }
    /* The nudge still has to POINT — it just holds still while it does. */
    .a1-ch.nudge { animation: none; box-shadow: 0 0 0 3px rgba(53, 224, 245, 0.18); }
}

/* ---- running it here, instead of in somebody else's tab ----
   The primary path through every task. It sits directly under the prompt box
   so the sequence reads as one motion: edit this, press this, read that. The
   third-party tool row stays below it and is deliberately quieter — it is the
   thing you graduate to, not the thing you need tonight. */
.a1-run {
    margin: 4px 0 14px; padding: 14px; border-radius: 12px;
    background: rgba(53, 224, 245, 0.05);
    border: 1px solid rgba(53, 224, 245, 0.22);
}
.a1-run-go { margin: 0 10px 0 0; }
.a1-run-hint { font-size: 12.5px; color: var(--a1-ink-3); }
.a1-run-out { margin-top: 13px; }
.a1-run-out.waiting { min-height: 42px; opacity: .55; }
/* Three dots rather than a spinner: this can take a few seconds and a beginner
   needs to see that something is happening, not that something is loading. */
.a1-run-out.waiting::after {
    content: '· · ·'; display: block; letter-spacing: 4px;
    color: var(--a1-cyan); font-size: 18px;
    animation: a1pulse 1.1s ease-in-out infinite;
}
@keyframes a1pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.a1-run-head {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--a1-ink-3); margin-bottom: 8px;
}
/* The question their standing order was tested against — quiet, but there,
   because the pair is the proof and the answer alone is not. */
.a1-run-asked {
    color: var(--a1-ink-2); font-size: 13.5px; line-height: 1.7;
    margin-bottom: 9px; font-style: italic;
}
.a1-run-text {
    background: #070c16; border: 1px solid var(--a1-line); border-radius: 10px;
    padding: 14px; color: #dbe7f7; font-size: 14px; line-height: 1.8;
    white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow: auto;
}
/* The answer arrives as markdown. Rendering the small subset it actually uses
   is the difference between an article and punctuation soup — see act1.js. */
.a1-md-h { font-weight: 650; color: #eaf2ff; margin: 14px 0 4px; }
.a1-md-h:first-child { margin-top: 0; }
.a1-md-li { padding-left: 14px; text-indent: -14px; }
.a1-md-gap { height: 10px; }
.a1-run-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
    background: #0d1524; border: 1px solid var(--a1-line); border-radius: 4px; padding: 0 4px;
}
.a1-run-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
/* The tool row is the alternative, so it reads as one. */
.a1-orelse { margin-top: 14px; color: var(--a1-ink-3); }

@media (max-width: 560px) {
    .a1-run-go { display: block; width: 100%; margin: 0 0 9px; }
    .a1-run-actions .a1-btn { flex: 1 1 100%; }
}