/* Runnable cells — `js/run.js` builds them from `<div class="ikigai-run" data-cmd='…'>`.
 *
 * Every color here is one of mdbook's own theme variables, and only in pairs the
 * contrast gate (`crates/book-a11y`) already measures: text on `--bg` and on
 * `--quote-bg`, links on both, inline code on both. No new color is introduced, so no
 * theme can pass the gate while a cell fails it.
 */

.ikigai-run {
    margin: 1.2em 0;
    border: 1px solid var(--table-header-bg);
    border-radius: 4px;
    background: var(--quote-bg);
    color: var(--fg);
}

/* The command: a labeled, editable textarea, one row per line, and the buttons. */
.ikigai-run-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "label cmd buttons"
        ".     help buttons";
    align-items: start;
    gap: 0.3rem 0.6rem;
    padding: 0.6rem 0.8rem 0.4rem;
}

.ikigai-run-label {
    grid-area: label;
    font-size: 0.8em;
    font-weight: 600;
    padding-top: 0.45rem;
    color: var(--inline-code-color);
}

.ikigai-run-cmd {
    grid-area: cmd;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--table-header-bg);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--mono-font, "Source Code Pro", monospace);
    font-size: 0.9em;
    line-height: 1.5;
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
}

.ikigai-run-cmd:focus-visible {
    outline: 3px solid var(--links);
    outline-offset: 1px;
}

.ikigai-run-help {
    grid-area: help;
    font-size: 0.75em;
    color: var(--inline-code-color);
}

.ikigai-run-buttons {
    grid-area: buttons;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ikigai-run-secondary {
    font: inherit;
    font-size: 0.85em;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--links);
    border-radius: 4px;
    background: var(--bg);
    color: var(--links);
    cursor: pointer;
}

.ikigai-run-secondary:focus-visible {
    outline: 3px solid var(--links);
    outline-offset: 2px;
}

/* One status line per page, above the first cell. */
.ikigai-run-kernel {
    font-size: 0.85em;
    color: var(--inline-code-color);
}

/* The history: every run so far, oldest first, under the latest result. */
.ikigai-run-history {
    margin: 0;
    padding: 0.4rem 0.8rem 0.6rem 2rem;
    border-top: 1px solid var(--table-header-bg);
    font-size: 0.85em;
}

.ikigai-run-entry {
    margin: 0.3rem 0;
}

.ikigai-run-entry-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: baseline;
}

.ikigai-run-entry-n {
    font-weight: 600;
}

.ikigai-run-entry-cmd {
    background: transparent;
    padding: 0;
    color: var(--fg);
    overflow-wrap: anywhere;
}

.ikigai-run-entry-meta {
    color: var(--inline-code-color);
}

.ikigai-run-entry-out {
    margin: 0.2rem 0 0;
    padding: 0.3rem 0.5rem;
    background: var(--bg);
    color: var(--fg);
    font-size: 0.95em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
    .ikigai-run-head {
        grid-template-columns: 1fr;
        grid-template-areas: "label" "cmd" "help" "buttons";
    }
    .ikigai-run-buttons {
        flex-direction: row;
    }
}

.ikigai-run-button {
    flex: 0 0 auto;
    font: inherit;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border: 2px solid var(--links);
    border-radius: 4px;
    background: var(--bg);
    color: var(--links);
    cursor: pointer;
}

.ikigai-run-button:hover:not(:disabled) {
    background: var(--links);
    color: var(--bg);
}

/* A visible focus ring for the keyboard — the button is the whole interaction. */
.ikigai-run-button:focus-visible {
    outline: 3px solid var(--links);
    outline-offset: 2px;
}

.ikigai-run-button:disabled {
    cursor: default;
    opacity: 0.6;
}

.ikigai-run-caption {
    padding: 0 0.8rem;
    font-size: 0.8em;
    color: var(--inline-code-color);
}

/* Caption and output pane together are the cell's one live region — see run.js. */
.ikigai-run-result {
    display: block;
}

.ikigai-run-out {
    margin: 0.3rem 0 0;
    padding: 0.6rem 0.8rem;
    border-top: 1px solid var(--table-header-bg);
    border-radius: 0 0 4px 4px;
    background: var(--bg);
    color: var(--fg);
    font-size: 0.9em;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-height: 1.5em;
}

/* No motion is used, so there is nothing to reduce — stated so the next person does not
 * add a spinner without reading this. */
@media (prefers-reduced-motion: reduce) {
    .ikigai-run-button,
    .ikigai-run-out {
        transition: none;
    }
}

/* The listing's expected output, behind a disclosure so the page does not answer the
   question before the reader runs the cell. */
.ikigai-run-expected-wrap { margin-top: .5rem; font-size: .85em; }
/* No opacity: `--fg` at 80% over `--quote-bg` is a pair the contrast gate never measures, and
   in coal it fell below 4.5:1 (axe-core in a real browser, 2026-09-29). Full `--fg` on
   `--quote-bg` is one it does. */
.ikigai-run-expected-summary { cursor: pointer; color: var(--fg); }
.ikigai-run-expected-summary:focus-visible { outline: 2px solid var(--links); outline-offset: 2px; }
.ikigai-run-expected-wrap[open] .ikigai-run-expected { margin-top: .35rem; }

/* Before `js/run.js` has built a cell, the chapter's raw `<pre class="ikigai-run-expected">`
   is a direct child of the cell's div, and a browser can paint it — the answer, unlabeled —
   in the moment between parsing the chapter and running the scripts at the end of the body.
   mdbook's head script sets `js` on <html> before anything paints, so this hides the raw
   `<pre>` exactly when a script is coming to put it behind the disclosure. With JavaScript
   off there is no Run to press, and the listing's output is the whole content of the cell,
   so it stays visible. (After run.js, the `<pre>` sits inside the <details>, not directly
   in the cell, and this rule no longer matches it.) */
.js .ikigai-run > .ikigai-run-expected { display: none; }