/* Shared look of runnable code cells in every ThinkPress book (docs/UI.md, Code Cell
 * Controls). Loaded by thebe-runner.js (py, dsm) and by the cscs book. Runners add:
 *
 *   .thinkpress-cell-controls   the row under a cell's code: Run, Reset, Show saved output
 *   .thinkpress-cell-status     "saving…", "saved", "restored your saved work"
 *   .thinkpress-page-controls   the bar under the page title: Run all, Show all saved outputs,
 *                               and the progress line
 *   .thinkpress-cell-ran        on div.cell: the reader ran this cell on its own (tints the
 *                               line-number gutter)
 *   .thinkpress-cell-edited     on div.cell: its code differs from the book's (tints the code)
 *
 * Books may set --thinkpress-ran-color and --thinkpress-edited-color. The washes are
 * translucent overlays on the element that paints the code background; a book whose
 * code box is painted by another element (cscs's <pre> gradient) layers the same
 * variables there in its own CSS.
 */
:root {
    --thinkpress-ran-color: var(--pst-color-inline-code, #912583);
    --thinkpress-edited-color: #d4a72c;
    /* Light translucent washes laid over the book's own code background (light or dark). */
    --thinkpress-ran-gutter: color-mix(in srgb, var(--thinkpress-ran-color) 10%, transparent);
    --thinkpress-edited-code: color-mix(in srgb, var(--thinkpress-edited-color) 7%, transparent);
}

/* ---- cell buttons ---- */

.thinkpress-cell-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 4px 0 6px;
}

/* Thebe's busy spinner, moved into the button row by thebe-runner.js, before Run. */
.thinkpress-cell-controls .thebelab-busy {
    display: inline-flex;
    margin: 0 4px;
}

/* With line numbers, Run starts at the gutter's right edge and the spinner sits centered
   under the gutter (thebe-runner.js measures the gutter's edges, from the row's left). */
.thinkpress-cell-controls.thinkpress-gutter-aligned {
    padding-left: var(--thinkpress-gutter-right);
    position: relative;
}

.thinkpress-cell-controls.thinkpress-gutter-aligned .thebelab-busy {
    justify-content: center;
    left: var(--thinkpress-gutter-left);
    margin: 0;
    padding: 0;
    position: absolute;
    width: calc(var(--thinkpress-gutter-right) - var(--thinkpress-gutter-left));
}

/* The output starts at the gutter's right edge too (thebe-runner.js measures it from
   the output area's own left). Books set margin-left: 0 !important on .jp-OutputArea. */
div.jp-OutputArea.thinkpress-gutter-aligned {
    margin-left: var(--thinkpress-gutter-right) !important;
}

/* The output box itself starts there: JupyterLab indents run output 5px
   (.jp-RenderedText) and the page's saved output 3px. */
div.jp-OutputArea.thinkpress-gutter-aligned .jp-OutputArea-output {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* A light separator between the buttons and the output, in place of Thebe's #aaa
   (.jp-OutputArea > :first-child); mixed from the text color so it suits dark mode. */
body.thinkpress-runner-active div.jp-OutputArea > :first-child {
    border-top-color: color-mix(in srgb, currentColor 12%, transparent) !important;
}

/* Room around the output text inside its box. */
body.thinkpress-runner-active div.jp-OutputArea .jp-OutputArea-output pre {
    padding: 4px 5px !important;
}

/* Room between a cell's output and the next cell (books' custom.css set 0.5rem !important). */
body.thinkpress-runner-active div.cell:has(> .thebelab-cell) {
    margin-bottom: 1.25rem !important;
}

.thinkpress-cell-controls button {
    appearance: none;
    background: var(--pst-color-surface, #f7f7f7);
    border: 0;
    border-radius: 2px;
    color: var(--pst-color-text-muted, #666666);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 400;
    height: 24px;
    line-height: 1;
    margin: 0;
    padding: 2px 8px;
    text-transform: none;
    transition: background-color 120ms ease, box-shadow 120ms ease;
    width: auto;
}

.thinkpress-cell-controls button:hover:not(:disabled) {
    background: var(--pst-color-border, #e4e7eb);
    color: var(--pst-color-text-base, #27313a);
}

.thinkpress-cell-controls button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.thinkpress-cell-controls button:focus-visible {
    box-shadow: 0 0 0 2px rgba(39, 125, 161, 0.2);
    outline: none;
}

.thinkpress-cell-controls button[hidden],
.thinkpress-page-controls button[hidden] {
    display: none !important;
}

.thinkpress-cell-controls button[aria-expanded="true"] {
    font-weight: 600;
}

.thinkpress-cell-status {
    color: var(--pst-color-text-muted, #6e7781);
    font-size: 0.8rem;
    margin-left: 8px;
}

/* ---- the page bar: Run all and the progress line ---- */

.thinkpress-page-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0.5rem 0 1.25rem;
}

.thinkpress-page-controls button {
    appearance: none;
    background: var(--pst-color-surface, #f7f7f7);
    border: 1px solid var(--pst-color-border, #e4e7eb);
    border-radius: 4px;
    color: var(--pst-color-text-base, #27313a);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.2;
    padding: 5px 12px;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.thinkpress-page-controls button:hover:not(:disabled) {
    background: var(--pst-color-border, #e4e7eb);
}

.thinkpress-page-controls button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.thinkpress-page-controls button:focus-visible {
    box-shadow: 0 0 0 2px rgba(39, 125, 161, 0.3);
    outline: none;
}

.thinkpress-page-controls button[aria-pressed="true"] {
    background: #e8f1f8;
    border-color: #9fc3dc;
}

.thinkpress-page-status,
.thinkpress-progress {
    color: var(--pst-color-text-muted, #57606a);
    font-size: 0.85rem;
}

/* ---- cell states ---- */

/* Each wash is a background-image over the element's own background color, so it
   tints whatever the book paints there. Only elements that paint a background are
   listed, so nested ones do not stack. */

/* Selection: CodeMirror draws it beneath the code lines, which the books' "pre" rule
   paints opaque, hiding it. Keep the lines transparent and paint the book's code
   background (read from a plain <pre> by thebe-runner.js) on the editor box instead. */
.thebelab-cell .CodeMirror pre.CodeMirror-line,
.thebelab-cell .CodeMirror pre.CodeMirror-line-like {
    background: transparent !important;
}

.thebelab-cell .CodeMirror {
    background-color: var(--thinkpress-code-bg, transparent) !important;
}

/* Edited: the code area (not the gutter) takes a light amber wash. */
div.cell.thinkpress-cell-edited .CodeMirror-scroll,
div.cell.thinkpress-cell-edited div.cell_input .highlight {
    background-image: linear-gradient(var(--thinkpress-edited-code), var(--thinkpress-edited-code)) !important;
}

/* Ran: the line-number gutter takes the book's accent. */
div.cell.thinkpress-cell-ran .CodeMirror-gutters,
div.cell.thinkpress-cell-ran div.cell_input span.linenos {
    background-image: linear-gradient(var(--thinkpress-ran-gutter), var(--thinkpress-ran-gutter)) !important;
}

div.cell.thinkpress-cell-ran .CodeMirror-gutters {
    border-right-color: color-mix(in srgb, var(--thinkpress-ran-color) 20%, transparent) !important;
}

/* Standalone C input is supplied before running, independently for each cell. */
.thinkpress-c-input { margin: 6px 0; font-size: 0.85rem; }
.thinkpress-c-input label { display: block; margin: 8px 0; }
.thinkpress-c-input label span { display: block; }
.thinkpress-c-input textarea {
    display: block; width: 100%; box-sizing: border-box;
    font-family: var(--pst-font-family-monospace, monospace);
    background: var(--pst-color-background, white); color: var(--pst-color-text-base, #222);
    border: 1px solid var(--pst-color-border, #bbb); border-radius: 3px; padding: 6px;
}