/* The mission sequence (mission-sequence.js): a road as ruled lines in a notebook,
   what she finished one quiet line each and then the one mission next (2026-10-08).
   A coloured mark in the margin says what state the row is in, the words say it
   too, and a row waiting for a person (in review) is tinted so it is the first
   thing the eye lands on. The brand's tokens from primer.css, and
   the desks' card paper for the forms. Reduced motion and the hidden attribute are
   primer.css's global rules, which this relies on (the walk checks both). */
.seq-host { display: block; }
.seq { --seq-card: #fffdf8; color: var(--ink); font: 15px/1.45 var(--sans); }
.seq *, .seq *::before, .seq *::after { box-sizing: border-box; }
.seq :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.seq-road { margin: 0 0 14px; font: 500 24px/1.15 var(--serif); font-variation-settings: "opsz" 48; text-wrap: balance; overflow-wrap: anywhere; }

/* What she finished, one quiet line each above the next mission: the words a link to the page it became, the code, the day. */
.seq-finished { list-style: none; display: grid; gap: 2px; margin: 0 0 10px; padding: 0; }
.seq-finished-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 6px 8px 18px; position: relative; border-bottom: 1px dashed var(--line-strong); }
.seq-finished-row::before { content: ""; position: absolute; left: 3px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--leaf); }
.seq-finished-link { font: 600 15px/1.35 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
a.seq-finished-link { text-decoration: underline; text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.seq-finished-link:hover { text-decoration-color: var(--ink); }
.seq-finished-day { font: 13px/1.3 var(--sans); color: var(--ink-soft); }
.seq-studio { padding: 2px 8px; border: 1px solid var(--ink-faint); border-radius: 8px; font-family: var(--sans); letter-spacing: .04em; }

.seq-list { list-style: none; margin: 0; padding: 0; }
.seq-row { position: relative; padding: 14px 6px 14px 18px; border-bottom: 1px solid var(--line-strong); }
.seq-row::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 4px; border-radius: 2px; background: var(--seq-mark, var(--line-strong)); }
.seq-row[data-status="done"] { --seq-mark: var(--leaf); }
.seq-row[data-status="open"] { --seq-mark: var(--ink); }
.seq-row[data-status="tomorrow"] { --seq-mark: color-mix(in srgb, var(--ink) 55%, var(--paper)); }
.seq-row[data-status="review"] { --seq-mark: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.seq-row[data-status="writing"] { --seq-mark: var(--lemon); }

.seq-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.seq-code { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; color: var(--ink-soft); overflow-wrap: anywhere; }
.seq-state { padding: 4px 10px; border: 1.3px solid var(--ink); border-radius: 11px 8px 12px 8px / 8px 12px 8px 11px; background: transparent; color: var(--ink); font: 600 12px/1.2 var(--sans); letter-spacing: .02em; white-space: nowrap; }
.seq-state[data-tone="done"] { background: color-mix(in srgb, var(--leaf) 34%, var(--seq-card)); }
.seq-state[data-tone="open"] { background: var(--lemon); }
.seq-state[data-tone="tomorrow"] { background: color-mix(in srgb, var(--lemon) 40%, var(--seq-card)); }
.seq-state[data-tone="review"] { background: color-mix(in srgb, var(--accent) 30%, var(--seq-card)); }
.seq-state[data-tone="writing"] { background: var(--paper-2); }
.seq-state[data-tone="planned"] { border-style: dashed; color: var(--ink-soft); }
.seq-title { margin: 8px 0 0; font: 600 18px/1.25 var(--serif); font-variation-settings: "opsz" 20; overflow-wrap: anywhere; }
.seq-materials { list-style: none; display: grid; gap: 4px; margin: 6px 0 0; padding: 0; color: var(--ink-soft); font-size: 14px; overflow-wrap: anywhere; }
.seq-materials strong { color: var(--ink); font-weight: 600; }
.seq-material-note { display: block; }
.seq-outcome { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
/* What Nell was told of the child, on a mission a ticket wrote: the engine's words and the note's day, for grown ups only. */
.seq-told { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; font-style: italic; overflow-wrap: anywhere; }
/* Place one's missions to choose between (a beginner's and one for a child who is ahead): each a small card with its label, its title, Play and Publish. */
.seq-choices { list-style: none; display: grid; gap: 10px; margin: 12px 0 0; padding: 0; }
.seq-choice { padding: 10px 12px; border: 1.5px dashed var(--ink); border-radius: 10px 8px 11px 8px / 8px 11px 8px 10px; }
.seq-choice-label { margin: 0; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.seq-choice-title { margin: 2px 0 0; font: 600 16px/1.25 var(--serif); overflow-wrap: anywhere; }
.seq-choice .seq-actions { margin-top: 8px; }

.seq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.seq-btn { min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 9px 7px 10px 7px / 7px 10px 7px 9px; background: var(--seq-card); color: var(--ink); font: 600 14px/1.2 var(--sans); cursor: pointer; transition: background-color .15s ease; }
.seq-btn:hover:not(:disabled) { background: var(--paper-2); }
.seq-btn:disabled { opacity: .5; cursor: default; }
.seq-primary { background: var(--ink); color: var(--paper); }
.seq-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.seq-quiet { padding-inline: 6px; border-color: transparent; background: transparent; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse), (max-width: 600px) { .seq-btn { min-height: 44px; } }

.seq-form { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1.5px solid var(--ink); border-radius: 10px 8px 11px 8px / 8px 11px 8px 10px; background: var(--seq-card); }
.seq-label { font: 600 13px/1.3 var(--sans); }
/* Sixteen pixels, so a phone does not zoom the page when the box is pressed. */
.seq-input { display: block; width: 100%; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 7px; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--serif); }
textarea.seq-input { min-height: 84px; resize: vertical; }
.seq-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Withdraw asks once, in one line on the row (2026-10-08): the oxblood of a press that takes something back. */
.seq-ask { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--oxblood); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--oxblood) 6%, transparent); }
.seq-ask .seq-help { margin: 0; }
.seq-withdraw:hover:not(:disabled), .seq-withdraw:focus-visible { color: var(--oxblood); }
.seq-primary.seq-danger { border-color: var(--oxblood); background: var(--oxblood); color: var(--paper); }
.seq-primary.seq-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--oxblood) 86%, var(--paper)); }

.seq-comments { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.seq-comments li { padding: 8px 12px; border-left: 3px solid var(--oxblood); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--oxblood) 6%, transparent); }
.seq-comments p { margin: 0; font: 15px/1.45 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.seq-by { display: block; margin-top: 2px; font: 12px/1.3 var(--sans); color: var(--ink-soft); }

.seq-note { margin: 10px 0 0; font: 500 14px/1.4 var(--sans); color: var(--ink-soft); }
.seq-note[data-kind="bad"] { color: var(--oxblood); font-weight: 600; }
.seq-note[data-kind="busy"] { animation: seq-pulse 1.8s ease-in-out infinite; }
@keyframes seq-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.seq-none, .seq-later { margin: 12px 0 0; color: var(--ink-soft); }
.seq-preview { margin-top: 20px; min-width: 0; }
.seq-preview header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.seq-preview h3 { margin: 0; font: 600 20px/1.25 var(--serif); overflow-wrap: anywhere; }
.seq-preview button { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.seq-preview iframe { display: block; width: 100%; height: min(76vh, 780px); min-height: 400px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); }
@media (max-width: 480px) { .seq-preview header { align-items: flex-start; flex-direction: column; } }