/* sky-steps.css — the shared mission/map step component (mission-flow redesign, phase 1,
   2026-10-13). Markup: v1/sky-steps.js. Design: DESIGN.md §2.1–2.6.

   COLOURS: every rule below reads a --steps-* alias and nothing else. There is no literal
   colour in a component rule (tests/light-contrast-components.test.js enforces it).
   What each colour MEANS (John, 2026-10-14 — "color has a psychological meaning"):
     green = done · blue = your next step, in progress, the primary button, links ·
     red = failed / a problem / delete · grey = not started, skipped, optional.
   The brand magenta is an accent only (here: the focus ring); it is never a step state or
   the primary button, where it read as an error. The aliases are fed by the theme in use:
     * Classic (data-ui="classic": the vercel pack, the legacy linear pack, or no pack) — the
       defaults right below, from the Classic tokens (--sky-*, --theme-*, the pack's --bg /
       --ink-3 / --line-2). Dark and light come out of the pack's own mode blocks; only two
       aliases need a light-specific source (the done fill, the control boundary).
     * The v4 themes (data-ui="new") — v1/themes/_src/base.css maps them onto --ss-* tokens
       (built into v1/themes/<id>/theme.css). They are declared ON the component (not on
       <html>), so a [data-context="field"] scope re-valuing --ss-* reaches them.
   The defaults use :where() (zero specificity) so a theme's mapping always wins.
   Contrast for every pairing is asserted in tests/light-mode-contrast.test.js (Classic)
   and tests/themes-tokens-contrast.test.js (v4). */

:where(.sky-steps, .sky-steps-pill) {
    --steps-surface: var(--bs-card-bg, var(--sky-surface));
    --steps-surface-2: var(--sky-surface-hover);
    --steps-raised: var(--bs-dropdown-bg, var(--steps-surface));
    --steps-ink: var(--sky-text);
    --steps-ink-2: var(--sky-text-muted);
    --steps-muted: var(--sky-text-muted);
    --steps-border: var(--sky-border);
    --steps-control: var(--ink-3, var(--sky-text-muted));
    /* the semantic tokens (--action-* / --status-*, defined by the Classic pack) first; the
       older --sky-* / --theme-* tokens are only the fallback for a pack without them */
    --steps-accent: var(--action-primary, var(--sky-primary));
    --steps-accent-hover: var(--action-primary-hover, color-mix(in srgb, var(--steps-accent) 88%, var(--steps-on-accent)));
    --steps-on-accent: var(--on-action-primary, var(--bg, var(--sky-bg)));
    --steps-current: var(--status-active-fg, var(--sky-primary));
    --steps-current-bg: color-mix(in srgb, var(--status-active, var(--sky-primary)) 12%, var(--steps-surface));
    --steps-current-line: color-mix(in srgb, var(--status-active, var(--sky-primary)) 45%, var(--steps-surface));
    --steps-done: var(--status-done, var(--theme-success));
    --steps-on-done: var(--status-on-done, var(--bg, var(--sky-bg)));
    --steps-done-ink: var(--status-done-fg, var(--theme-success-fg));
    --steps-done-bg: color-mix(in srgb, var(--status-done-fg, var(--theme-success-fg)) 6%, var(--steps-surface));
    --steps-running: var(--status-active-fg, var(--theme-info-fg));
    --steps-running-bg: color-mix(in srgb, var(--status-active-fg, var(--theme-info-fg)) 8%, var(--steps-surface));
    --steps-failed: var(--status-error-fg, var(--theme-danger-fg));
    --steps-failed-bg: color-mix(in srgb, var(--status-error-fg, var(--theme-danger-fg)) 8%, var(--steps-surface));
    --steps-danger: var(--status-error-fg, var(--theme-danger-fg));
    --steps-focus: var(--theme-focus-ring);
    --steps-shadow: var(--theme-shadow-lg);
    --steps-radius: 10px;
    --steps-radius-sm: 6px;
}
/* Classic light: the success fill carries a white check (the -fg ink is 5.0:1 against it),
   and the pack's control-boundary line (--line-2 is 3.4:1 in light only; in dark it is
   1.5:1, which is why dark uses --ink-3). */
html[data-theme-mode="light"]:not([data-ui="new"]) :where(.sky-steps, .sky-steps-pill) {
    --steps-done: var(--status-done, var(--theme-success-fg));
    --steps-control: var(--line-2, var(--sky-text-muted));
}

/* ── shared bits ─────────────────────────────────────────────────────────── */
.sky-steps { color: var(--steps-ink); font-size: 13px; line-height: 1.45; text-align: left; }
.sky-steps *, .sky-steps *::before, .sky-steps *::after { box-sizing: border-box; }
.sky-steps [hidden] { display: none !important; }
.sky-steps-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sky-steps__ico {
    width: 1em; height: 1em; flex: none; vertical-align: -0.15em;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sky-steps :is(a, button, select, input):focus-visible,
.sky-steps-pill:focus-visible {
    outline: 2px solid var(--steps-focus);
    outline-offset: 2px;
}

/* ── the status pill ─────────────────────────────────────────────────────── */
.sky-steps-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px; border: 1px solid transparent;
    font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.sky-steps-pill__n { font-variant-numeric: tabular-nums; }
.sky-steps-pill--current { background: var(--steps-current-bg); color: var(--steps-current); border-color: var(--steps-current-line); }
.sky-steps-pill--running { background: var(--steps-running-bg); color: var(--steps-running); }
.sky-steps-pill--done { background: var(--steps-done-bg); color: var(--steps-done-ink); }
.sky-steps-pill--failed { background: var(--steps-failed-bg); color: var(--steps-failed); }
.sky-steps-pill--unavailable { background: var(--steps-surface-2); color: var(--steps-muted); }
.sky-steps-pill__spin {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: sky-steps-spin 0.9s linear infinite;
}

/* ── the card (list variant) ─────────────────────────────────────────────── */
.sky-steps--list {
    position: relative;
    background: var(--steps-surface);
    border: 1px solid var(--steps-border);
    border-radius: var(--steps-radius);
}
.sky-steps--flat { background: transparent; border: 0; border-radius: 0; }
.sky-steps__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sky-steps__check { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--steps-accent); }
.sky-steps__name { flex: 1 1 auto; min-width: 0; }
.sky-steps__title {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 14.5px; font-weight: 600; color: var(--steps-ink);
}
.sky-steps__title-link { color: var(--steps-ink); text-decoration: none; }
.sky-steps__title-link:hover { text-decoration: underline; }
.sky-steps__title-ico { display: inline-flex; color: var(--steps-muted); }
.sky-steps__tag {
    font-size: 11px; font-weight: 600; color: var(--steps-muted); line-height: 1.5;
    border: 1px solid var(--steps-border); border-radius: 4px; padding: 0 6px; white-space: nowrap;
}
.sky-steps__sub {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px;
    font-size: 12.5px; color: var(--steps-muted);
}
.sky-steps__note { margin: -6px 14px 8px; font-size: 12.5px; color: var(--steps-muted); }
.sky-steps__pill { flex: none; }
.sky-steps__act { display: flex; align-items: center; gap: 8px; flex: none; }

/* buttons: primary (filled accent), secondary (filled neutral), icon (⋯) */
.sky-steps__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 32px; padding: 6px 12px;
    border: 1px solid var(--steps-control); border-radius: var(--steps-radius-sm);
    background: var(--steps-surface); color: var(--steps-ink);
    font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sky-steps__btn:hover { background: var(--steps-surface-2); color: var(--steps-ink); }
.sky-steps__btn--primary {
    background: var(--steps-accent); border-color: var(--steps-accent); color: var(--steps-on-accent); font-weight: 600;
}
.sky-steps__btn--primary:hover {
    background: var(--steps-accent-hover); border-color: var(--steps-accent-hover);
    color: var(--steps-on-accent);
}
.sky-steps__btn--secondary { background: var(--steps-surface-2); }
.sky-steps__btn--icon { width: 32px; padding: 0; }
.sky-steps__btn.is-disabled, .sky-steps__link.is-disabled, .sky-steps__mi.is-disabled { opacity: 0.55; cursor: not-allowed; }
.sky-steps__toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--steps-radius-sm);
    background: transparent; color: var(--steps-muted); cursor: pointer;
}
.sky-steps__toggle:hover { background: var(--steps-surface-2); color: var(--steps-ink); }
.sky-steps__toggle .sky-steps__ico { transition: transform 0.15s; }
.sky-steps.is-open .sky-steps__toggle .sky-steps__ico { transform: rotate(180deg); }

/* the ⋯ menu */
.sky-steps__menu { position: relative; }
.sky-steps__pop {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
    min-width: 240px; padding: 6px;
    background: var(--steps-raised); color: var(--steps-ink);
    border: 1px solid var(--steps-border); border-radius: 8px; box-shadow: var(--steps-shadow);
}
.sky-steps__grp {
    padding: 6px 10px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--steps-muted);
}
.sky-steps__sep { height: 0; border-top: 1px solid var(--steps-border); margin: 5px 0; }
.sky-steps__mi {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 10px; border: 0; border-radius: 6px;
    background: transparent; color: var(--steps-ink);
    font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer;
}
.sky-steps__mi:hover, .sky-steps__mi:focus { background: var(--steps-surface-2); color: var(--steps-ink); }
.sky-steps__mi--danger, .sky-steps__mi--danger:hover, .sky-steps__mi--danger:focus { color: var(--steps-danger); }

/* ── the eight thin lines ────────────────────────────────────────────────── */
.sky-steps__list {
    list-style: none; margin: 0; padding: 0 14px 10px;
    border-top: 1px solid var(--steps-border);
}
.sky-steps:not(.is-open) .sky-steps__list { border-top: 0; padding-top: 0; }
.sky-steps__line {
    display: grid; grid-template-columns: var(--sky-steps-dot-col, 22px) 170px minmax(0, 1fr) auto;
    gap: 10px; align-items: center; min-height: 30px; padding: 4px 0;
    color: var(--steps-muted); border-bottom: 1px dashed var(--steps-border);
}
.sky-steps__list > li:last-child { border-bottom: 0; }
/* collapsed: the one visible line is the last thing in the card */
.sky-steps:not(.is-open) .sky-steps__list > li { border-bottom-color: transparent; }
.sky-steps__dot {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--steps-control); color: var(--steps-muted);
    font-size: 10.5px; font-weight: 700; line-height: 1;
}
/* the "1–4" head of a combined / orphan-map card: a pill as tall as a dot and as wide as its
   text. It used to keep width:auto inside the fixed 22px dot column, so the grid stretched it
   to 22px and "1–4" wrapped onto two lines ("1–" over "4") and spilled out of the 18px ring.
   The list widens the dot column for every line of such a card (--sky-steps-dot-col), so the
   step dots stay centred under the pill. */
.sky-steps__dot--wide {
    width: auto; min-width: 18px; padding: 0 6px; border-radius: 999px; flex: none;
    font-size: 10px; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sky-steps__list--wide { --sky-steps-dot-col: 36px; }
.sky-steps__list--wide .sky-steps__line > .sky-steps__dot { justify-self: center; }
.sky-steps__dot .sky-steps__ico { width: 11px; height: 11px; stroke-width: 3; }
.sky-steps__t { font-weight: 600; color: var(--steps-ink-2); min-width: 0; }
.sky-steps__w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sky-steps__a { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; justify-content: flex-end; }
.sky-steps__opt {
    display: inline-block; margin-left: 6px; padding: 0 5px; vertical-align: 1px;
    font-size: 10.5px; font-weight: 600; color: var(--steps-muted);
    border: 1px solid var(--steps-border); border-radius: 4px; white-space: nowrap;
}
.sky-steps__link {
    display: inline-flex; align-items: center; min-height: 28px; padding: 4px 8px;
    border: 0; border-radius: var(--steps-radius-sm); background: transparent;
    color: var(--steps-current); font: inherit; font-size: 12.5px; font-weight: 500;
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sky-steps__link:hover { background: var(--steps-current-bg); color: var(--steps-current); text-decoration: underline; }
.sky-steps__after { font-size: 12px; color: var(--steps-muted); }

/* done */
.sky-steps__line--done .sky-steps__dot { background: var(--steps-done); border-color: var(--steps-done); color: var(--steps-on-done); }
/* current: the one tinted line */
.sky-steps__line--current {
    margin: 0 -14px; padding: 7px 14px; border-radius: var(--steps-radius-sm);
    background: var(--steps-current-bg); color: var(--steps-ink); border-bottom-color: transparent;
}
.sky-steps__line--current .sky-steps__dot {
    background: var(--steps-accent); border-color: var(--steps-accent); color: var(--steps-on-accent);
    box-shadow: 0 0 0 3px var(--steps-current-bg);
}
.sky-steps__line--current .sky-steps__t { color: var(--steps-current); }
.sky-steps__line--current .sky-steps__w { white-space: normal; }
/* running */
.sky-steps__line--running .sky-steps__dot { border-color: var(--steps-running); color: var(--steps-running); }
/* the title and ring carry the running colour; the words stay plain (v2 mockup) */
.sky-steps__line--running .sky-steps__t { color: var(--steps-running); }
.sky-steps__spin {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid transparent; border-top-color: var(--steps-running);
    animation: sky-steps-spin 0.9s linear infinite;
}
.sky-steps__bar {
    display: block; height: 5px; max-width: 360px; margin-top: 4px;
    border-radius: 3px; background: var(--steps-surface-2); overflow: hidden;
}
.sky-steps__bar > i { display: block; height: 100%; background: var(--steps-running); }
/* failed */
.sky-steps__line--failed .sky-steps__dot { border-color: var(--steps-failed); color: var(--steps-failed); }
.sky-steps__line--failed .sky-steps__t, .sky-steps__line--failed .sky-steps__w { color: var(--steps-failed); }
.sky-steps__line--failed .sky-steps__w { white-space: normal; }
/* skipped: dashed ring */
.sky-steps__line--skipped .sky-steps__dot { border-style: dashed; }
/* locked: the lock icon says it; text stays at full muted contrast */
.sky-steps__line--locked .sky-steps__dot .sky-steps__ico { width: 9px; height: 9px; stroke-width: 2.5; }

/* the map slot above step 5: picker for 2+ maps, or the name line (A2) */
.sky-steps__maps {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 0 6px; font-size: 12.5px; color: var(--steps-muted);
    border-bottom: 1px dashed var(--steps-border);
}
.sky-steps__maps b { color: var(--steps-ink-2); font-weight: 600; }
.sky-steps__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sky-steps__chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    border: 1px solid var(--steps-control); border-radius: 999px;
    background: transparent; color: var(--steps-ink-2);
    font: inherit; font-size: 12.5px; cursor: pointer;
}
.sky-steps__chip:hover { background: var(--steps-surface-2); }
.sky-steps__chip.is-on {
    border-color: var(--steps-accent); background: var(--steps-current-bg);
    color: var(--steps-current); font-weight: 600;
}
.sky-steps__chipdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--steps-muted); }
.sky-steps__chipdot--done { background: var(--steps-done); }
.sky-steps__chipdot--on { background: var(--steps-accent); }
.sky-steps__mapsel { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.sky-steps__mapsel select {
    min-height: 28px; padding: 2px 8px; font: inherit; font-size: 12.5px;
    background: var(--steps-surface); color: var(--steps-ink);
    border: 1px solid var(--steps-control); border-radius: var(--steps-radius-sm);
}
.sky-steps__mapcount { color: var(--steps-muted); }

/* ── rail variant (the map page) ─────────────────────────────────────────── */
.sky-steps__rail {
    display: grid; grid-template-columns: repeat(var(--steps-cols, 8), minmax(0, 1fr)); gap: 4px;
    list-style: none; margin: 0; padding: 10px 12px;
    background: var(--steps-surface); border: 1px solid var(--steps-border); border-radius: var(--steps-radius);
}
.sky-steps__col { display: flex; min-width: 0; border-radius: var(--steps-radius-sm); color: var(--steps-muted); }
.sky-steps__col, .sky-steps__colink {
    flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 6px 4px; font-size: 12px;
}
.sky-steps__colink {
    display: flex; flex: 1 1 auto; min-width: 0; margin: -6px -4px;
    color: inherit; text-decoration: none; border-radius: var(--steps-radius-sm);
}
.sky-steps__colink:hover { background: var(--steps-surface-2); }
.sky-steps__col .sky-steps__dot { width: 22px; height: 22px; font-size: 11px; }
.sky-steps__col .sky-steps__dot--wide { width: auto; min-width: 22px; padding: 0 7px; }
.sky-steps__col .sky-steps__dot .sky-steps__ico { width: 12px; height: 12px; }
.sky-steps__col .sky-steps__t { line-height: 1.2; }
.sky-steps__s {
    font-size: 11px; line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sky-steps__col--done .sky-steps__dot { background: var(--steps-done); border-color: var(--steps-done); color: var(--steps-on-done); }
.sky-steps__col--current { background: var(--steps-current-bg); }
.sky-steps__col--current .sky-steps__colink:hover { background: transparent; }
.sky-steps__col--current .sky-steps__dot {
    background: var(--steps-accent); border-color: var(--steps-accent); color: var(--steps-on-accent);
    box-shadow: 0 0 0 3px var(--steps-current-bg);
}
.sky-steps__col--current .sky-steps__t, .sky-steps__col--current .sky-steps__s { color: var(--steps-current); }
.sky-steps__col--running .sky-steps__dot { border-color: var(--steps-running); color: var(--steps-running); }
.sky-steps__col--running .sky-steps__t, .sky-steps__col--running .sky-steps__s { color: var(--steps-running); }
.sky-steps__col--failed .sky-steps__dot { border-color: var(--steps-failed); color: var(--steps-failed); }
.sky-steps__col--failed .sky-steps__t, .sky-steps__col--failed .sky-steps__s { color: var(--steps-failed); }
.sky-steps__col--skipped .sky-steps__dot { border-style: dashed; }
.sky-steps__col--locked .sky-steps__dot .sky-steps__ico { width: 10px; height: 10px; }

@keyframes sky-steps-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sky-steps__spin, .sky-steps-pill__spin { animation: none; }
    .sky-steps__spin { border-color: var(--steps-running); }
    .sky-steps__toggle .sky-steps__ico { transition: none; }
}

/* ── phones and narrow columns ───────────────────────────────────────────── */
@media (max-width: 760px) {
    .sky-steps__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .sky-steps__head {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; column-gap: 10px;
        grid-template-areas: "chk name tog" "pill pill pill" "act act act";
    }
    .sky-steps__check { grid-area: chk; width: 24px; height: 24px; align-self: start; margin-top: 2px; }
    .sky-steps__name { grid-area: name; }
    .sky-steps__pill { grid-area: pill; justify-self: start; max-width: 100%; }
    .sky-steps-pill { white-space: normal; }
    .sky-steps__act { grid-area: act; width: 100%; }
    .sky-steps__act .sky-steps__btn--primary { flex: 1 1 auto; }
    .sky-steps__toggle { grid-area: tog; align-self: start; }
    .sky-steps__btn, .sky-steps__toggle { min-height: 44px; }
    .sky-steps__btn--icon, .sky-steps__toggle { width: 44px; height: 44px; }
    .sky-steps__link, .sky-steps__chip, .sky-steps__mapsel select { min-height: 44px; }
    .sky-steps__mi { min-height: 44px; }
    .sky-steps__pop { min-width: min(280px, calc(100vw - 32px)); }
    .sky-steps__line {
        grid-template-columns: var(--sky-steps-dot-col, 22px) minmax(0, 1fr); row-gap: 2px;
        grid-template-areas: "d t" "d w" "d a";
    }
    .sky-steps__line > .sky-steps__dot { grid-area: d; align-self: start; margin-top: 2px; }
    .sky-steps__line > .sky-steps__t { grid-area: t; }
    .sky-steps__line > .sky-steps__w { grid-area: w; white-space: normal; }
    .sky-steps__line > .sky-steps__a { grid-area: a; justify-content: flex-start; }
    .sky-steps__line > .sky-steps__a:empty { display: none; }
    .sky-steps__colink { min-height: 44px; }
}
@media (max-width: 420px) {
    .sky-steps__rail { grid-template-columns: 1fr; }
    .sky-steps__col, .sky-steps__colink { flex-direction: row; text-align: left; justify-content: flex-start; }
    .sky-steps__s { -webkit-line-clamp: 1; }
}