/* Runnable cells — `js/run.js` builds them from `<div class="ikigai-run" data-cmd='…'>`.
 *
 * Every colour 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 colour 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 labelled, 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; }
.ikigai-run-expected-summary { cursor: pointer; color: var(--fg); opacity: .8; }
.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; }