/* The stages viewer (`js/stages.js`, contract in docs/stages.md): numbered tabs of a picture's
 * stages, the steps that make them, the facts line, and Before | After below the tabs. ONE COPY for every book, as run.css is: a
 * book that uses it links to this file and lists it in its book.toml. Every color is a theme
 * variable, so the contrast gate's pairs cover it (the changed words' <mark> included: it is
 * --bg on --links, the gate's link pair turned over). */

.ikigai-stages {
    margin: 1em 0;
}

.ikigai-stages-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.ikigai-stages-facts,
.ikigai-stage-facts {
    font-family: var(--mono-font, monospace);
    font-size: 0.9em;
    padding: 0.3rem 0.6rem;
    border-left: 4px solid var(--links);
    background: var(--quote-bg);
    color: var(--fg);
    overflow-wrap: anywhere;
}

.ikigai-stages-status {
    font-size: 0.9em;
}

/* The tablist wraps rather than scrolling the page sideways at 320 px. */
.ikigai-stage-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    border-bottom: 2px solid var(--links);
    margin-top: 0.5rem;
}

.ikigai-stage-tab {
    font: inherit;
    font-size: 0.9em;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--links);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: var(--bg);
    color: var(--links);
    cursor: pointer;
}

/* The selected tab is told by its weight and a solid fill, never by color alone. */
.ikigai-stage-tab[aria-selected="true"] {
    background: var(--links);
    color: var(--bg);
    font-weight: 700;
}

.ikigai-stage-tab:focus-visible,
.ikigai-stage:focus-visible {
    outline: 3px solid var(--links);
    outline-offset: 2px;
}

/* "Stage " in a tab's name, for a screen reader; the tab shows "2 · open". */
.ikigai-stage-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ikigai-stage {
    padding: 0.2rem 0 0.5rem;
}

.ikigai-stage-result {
    margin: 1em 0;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--quote-border, var(--links));
    border-left: 4px solid var(--links);
    background: var(--quote-bg);
    color: var(--fg);
}

.ikigai-stage-result p {
    margin: 0.4em 0;
}

/* A page with a stages viewer may be as wide as 1680 px (mdbook's is 750, layout.css makes it
 * 1280), so the open tab's longest command line fits on a wide screen without scrolling.
 * Paragraphs keep layout.css's 90ch measure. */
html:has(.ikigai-stages) {
    --content-max-width: 1680px;
}

/* Before | After, between the tabs and the open panel (js/stages.js, once the kernel loads).
 * Each tab's own committed picture is then hidden: After shows it, or the kernel's. */
.ikigai-stages-compare {
    margin: 0.8em 0 1em;
}

.ikigai-stages-compare p {
    margin: 0.4em 0;
}

/* "Compare with": a label and one native select (ledger #2298), the select's text and border in
 * the gate's --fg/--bg and --links/--bg pairs, a 44 px target, and never wider than the column,
 * so a long stage name cannot scroll a 320 px page sideways. */
.ikigai-stages-against {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    font-size: 0.9em;
}

.ikigai-stages-against[hidden] {
    display: none;
}

.ikigai-stages-against-label {
    font-weight: 700;
}

.ikigai-stages-against-select {
    font: inherit;
    min-height: 44px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 0.5rem;
    border: 1px solid var(--links);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    cursor: pointer;
}

.ikigai-stages-against-select option {
    background: var(--bg);
    color: var(--fg);
}

.ikigai-stages-against-select:focus-visible {
    outline: 3px solid var(--links);
    outline-offset: 2px;
}

/* The two pictures side by side, stacked (Before on top) when the column is narrower than two
 * 520 px slots. A slot that narrow still holds its 500 px picture (below) with its padding and
 * border, so side by side a picture never scrolls in its slot; only a phone's column makes it. */
.ikigai-stages-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    gap: 1rem;
    margin: 0.6em 0;
}

.ikigai-stages-slot {
    margin: 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.5rem 0.8rem;
    border: 2px solid var(--links);
    border-radius: 4px;
    background: var(--quote-bg);
    color: var(--fg);
}

/* The chapter's picture, not the reader's kernel's: a dashed frame, and the caption says so.
 * The picture itself is not faded: its own secondary text is 5.7:1 at full strength in the
 * light scheme, and any fade takes it under 4.5:1 (SC 1.4.3). */
.ikigai-stages-slot-chapter {
    border-style: dashed;
    border-color: var(--fg);
}

.ikigai-stages-slot-caption {
    font-size: 0.9em;
}

.ikigai-stages-slot-note {
    font-size: 0.85em;
}

/* A picture keeps a readable 500 px and scrolls sideways in its slot on a narrow screen; on a
 * wide one it grows to its natural 960 px and stops. */
.ikigai-stages-slot-picture {
    overflow-x: auto;
}

.ikigai-stages-slot-picture .ikigai-stage-picture {
    margin: 0;
}

.ikigai-stages-slot-picture .ikigai-stage-picture img {
    display: block;
    width: 100%;
    min-width: 500px;
    max-width: 960px;
    height: auto;
}

/* The copy the theme needs, as a block so the picture can take the slot's width (the rules at
 * the end of this file pick the copy; these only change how the shown one is laid out). */
.ikigai-stages-slot .ikigai-stage-picture a.ikigai-scheme-light,
html.coal .ikigai-stages-slot .ikigai-stage-picture a.ikigai-scheme-dark,
html.navy .ikigai-stages-slot .ikigai-stage-picture a.ikigai-scheme-dark,
html.ayu .ikigai-stages-slot .ikigai-stage-picture a.ikigai-scheme-dark {
    display: block;
}

/* What changed between the two: a line is never wrapped (the words are URI-heavy), the list
 * scrolls sideways instead. */
.ikigai-stages-diff {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--quote-border, var(--links));
    border-left: 4px solid var(--links);
    background: var(--quote-bg);
    color: var(--fg);
}

.ikigai-stages-diff .ikigai-stage-changes {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.3rem;
}

.ikigai-stages-live > section.ikigai-stage > .ikigai-stage-result {
    display: none;
}

.ikigai-stages-live > section.ikigai-stage {
    border-top: 1px solid var(--links);
}

/* The open tab's cells: a command and its answer are never wrapped (a wrapped URI reads as two),
 * they scroll sideways in their own box, and the command takes the column's whole width, its
 * buttons under it. At 12 px (0.75em) the chapters' longest command, 226 characters, fits a
 * 1680 px column without scrolling. */
.ikigai-stages .ikigai-run-head {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "cmd" "help" "buttons";
}

.ikigai-stages .ikigai-run-buttons {
    flex-direction: row;
    flex-wrap: wrap;
}

.ikigai-stages .ikigai-run-cmd,
.ikigai-stages .ikigai-run-out,
.ikigai-stages .ikigai-run-entry-out,
.ikigai-stages .ikigai-run-entry-cmd {
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    font-size: 0.75em;
}

/* The command keeps its last line clear of its own sideways scrollbar. */
.ikigai-stages .ikigai-run-cmd {
    padding-bottom: 1.1rem;
}

.ikigai-stage-changes {
    margin: 0.2em 0 0;
}

/* The changed words, in the pair the selected tab uses (the contrast gate holds it in every
 * theme): mdbook's own <mark> colors fall below 4.5:1 in coal. */
.ikigai-stage-changed mark {
    font-weight: 700;
    padding: 0 0.2em;
    background: var(--links);
    color: var(--bg);
}

/* The facts list reads as one line: "upstream: fail · circuit: … · …". */
.ikigai-stages-facts {
    list-style: none;
}

.ikigai-stages-facts li {
    display: inline;
}

.ikigai-stages-facts li + li::before {
    content: " · ";
}

.ikigai-stage-words {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.85em;
    margin: 0.4em 0 0;
}

.ikigai-stage-picture img {
    max-width: 100%;
    height: auto;
}

/* The picture in the colors of the book's theme: light and rust are light; coal, navy and ayu
 * are dark. Both copies are on the page, so a theme change shows the other rather than asking
 * the kernel again. With no theme class, the light copy shows. */
.ikigai-stage-picture a.ikigai-scheme-light,
html.coal .ikigai-stage-picture a.ikigai-scheme-dark,
html.navy .ikigai-stage-picture a.ikigai-scheme-dark,
html.ayu .ikigai-stage-picture a.ikigai-scheme-dark {
    display: inline-block;
}

.ikigai-stage-picture a.ikigai-scheme-dark,
html.coal .ikigai-stage-picture a.ikigai-scheme-light,
html.navy .ikigai-stage-picture a.ikigai-scheme-light,
html.ayu .ikigai-stage-picture a.ikigai-scheme-light {
    display: none;
}

/* In print, every stage, one after another, and no tabs to press. */
@media print {
    .ikigai-stage-tabs,
    .ikigai-stages-buttons {
        display: none;
    }
    .ikigai-stage[hidden] {
        display: block !important;
    }
    .ikigai-stages-compare,
    .ikigai-stage-pointer {
        display: none;
    }
    .ikigai-stages-live > section.ikigai-stage > .ikigai-stage-result {
        display: block;
    }
}