/* 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;
}

/* 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 8px !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;
}

/* Cross-book rollout: ordinary notebook output is collapsed until requested.
   Reader-run output uses cell-has-run; existing solution disclosures are retained. */
body.thinkpress-runner-active .cell:not(.tag_hide-input):not(.cell-has-run) .jp-OutputArea {
    display: none !important;
}

/* Current shared code-cell geometry. Specificity overrides old book-local frames. */
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .cell_input,
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .cell_input .highlight,
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .thebelab-input,
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .thebelab-cell {
    border: 0 !important; box-shadow: none !important;
    background: transparent !important; padding: 0 !important; margin: 0 !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .CodeMirror {
    margin-left: calc(3rem - var(--thinkpress-code-gutter-width, 0px)) !important;
    border-radius: 6px 6px 0 0 !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .CodeMirror-gutters {
    border-right: 1px solid transparent !important;
    background-color: var(--pst-color-background, white) !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout :is(.CodeMirror-linenumber, .linenos) {
    color: #8a919c !important; border-right-color: transparent !important;
}
html[data-theme="dark"] body.thinkpress-code-layout-active div.cell.thinkpress-code-layout :is(.CodeMirror-linenumber, .linenos) {
    color: #929baa !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .thinkpress-cell-controls {
    margin-top: 4px !important; margin-bottom: 4px !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout :is(.jp-OutputArea, .cscs-execution-output, .cell_output:not(:has(.jp-OutputArea))) {
    margin-left: var(--thinkpress-output-inset, 3rem) !important;
    width: var(--thinkpress-output-width, calc(100% - 3rem)) !important;
    max-width: var(--thinkpress-output-width, calc(100% - 3rem)) !important;
    box-sizing: border-box;
    margin-top: 0 !important; margin-bottom: 0 !important;
    border: 0 !important; border-radius: 0 0 6px 0 !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout :is(.jp-OutputArea-child, .jp-OutputArea-output, .output.stream) {
    border: 0 !important; margin: 0 !important; padding: 0 !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout :is(.jp-OutputArea, .cell_output) pre,
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout pre.cscs-execution-output {
    padding: 4px var(--thinkpress-output-padding, 8px) !important;
    margin-block: 0 !important; border: 0 !important; border-radius: 0 0 6px 0 !important;
}
/* C# keeps its inline editor and syntax colors; its gutter is part of the pre. */
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .cell_input pre:has(.linenos) {
    margin-left: calc(3rem - var(--thinkpress-code-gutter-width)) !important;
    padding-left: 0 !important; border: 0 !important; border-radius: 6px 6px 0 0 !important;
    background-color: transparent !important;
    background-image: linear-gradient(to right, transparent var(--thinkpress-code-gutter-width), var(--pst-color-surface, #f7f7f7) var(--thinkpress-code-gutter-width)) !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout.thinkpress-cell-ran .cell_input pre:has(.linenos) {
    background-image: linear-gradient(to right, var(--thinkpress-ran-gutter) var(--thinkpress-code-gutter-width), transparent var(--thinkpress-code-gutter-width)), linear-gradient(to right, transparent var(--thinkpress-code-gutter-width), var(--pst-color-surface, #f7f7f7) var(--thinkpress-code-gutter-width)) !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout.thinkpress-cell-edited .cell_input pre:has(.linenos) {
    background-image: linear-gradient(to right, transparent var(--thinkpress-code-gutter-width), var(--thinkpress-edited-code) var(--thinkpress-code-gutter-width)), linear-gradient(to right, transparent var(--thinkpress-code-gutter-width), var(--pst-color-surface, #f7f7f7) var(--thinkpress-code-gutter-width)) !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout.thinkpress-cell-ran.thinkpress-cell-edited .cell_input pre:has(.linenos) {
    background-image: linear-gradient(to right, var(--thinkpress-ran-gutter) var(--thinkpress-code-gutter-width), var(--thinkpress-edited-code) var(--thinkpress-code-gutter-width)), linear-gradient(to right, transparent var(--thinkpress-code-gutter-width), var(--pst-color-surface, #f7f7f7) var(--thinkpress-code-gutter-width)) !important;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout > .cscs-execution-controls {
    margin-left: var(--thinkpress-controls-inset, 3rem) !important; position: relative;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout > .cscs-execution-controls::before {
    content: ""; position: absolute; top: 6px;
    left: var(--thinkpress-spinner-offset, -18px); width: 12px; height: 12px;
    border: 2px solid var(--pst-color-border, #d4d7dc);
    border-top-color: var(--pst-color-primary, #386c83); border-radius: 50%;
    visibility: hidden;
}
body.thinkpress-code-layout-active div.cell.thinkpress-code-layout > .cscs-execution-controls:has(.cscs-run-button:disabled)::before {
    visibility: visible; animation: thinkpress-cell-spin .8s linear infinite;
}
@keyframes thinkpress-cell-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    body.thinkpress-code-layout-active div.cell.thinkpress-code-layout > .cscs-execution-controls::before { animation: none !important; }
}

body.thinkpress-code-layout-active div.cell.thinkpress-code-layout .thinkpress-cell-controls button {
    border: 0 !important; border-radius: 2px !important;
    height: 24px; padding: 2px 8px;
}