/**
 * doc/base.css — Document structure, independent of any visual theme.
 *
 * The screen counterpart to print/base.css, and it draws the same line: what
 * is here is structure the renderer's output needs in order to work at all —
 * a code block that scrolls rather than overflows, a checkbox that is a box
 * rather than an operating-system widget, a table that fills its column.
 * What a document *looks* like belongs in editorial.css, panel.css or
 * technical.css, exactly one of which is loaded alongside this file.
 *
 * Deliberately not wrapped in `@media not print`: print/base.css and its
 * themes load after this file and restate everything they care about inside
 * `@media print`, so they win on paper at equal specificity. Wrapping would
 * leave printed lists and quotes with no rules at all.
 */

.prose {
    max-width: 100%;
}

/* ── code ───────────────────────────────────────────────────────────────── */

.prose pre,
.prose code,
pre,
code {
    font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
}

pre {
    overflow-x: auto;
}

/* A `code` inside a `pre` is the block's own text. Every chip treatment the
   themes give inline code has to come back off it here, or each theme would
   have to remember to do it. */
.prose pre code,
pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Injected by sheet.js around every code block so the copy button has
   something to position against. It used to be a bare `<div>` with inline
   styles, which put presentation out of the stylesheets' reach. */
.code-block {
    position: relative;
}

.copy-btn {
    position: absolute;
    font-family: inherit;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.code-block:hover .copy-btn,
.copy-btn:focus-visible {
    opacity: 1;
}

/* ── tables ─────────────────────────────────────────────────────────────── */

.prose table {
    width: 100%;
}

/* Horizontal scroll on overflow, added by sheet.js. Layout, not decoration:
   a table wider than the screen has to go somewhere in every theme. */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    width: 100%;
}

.table-scroll-wrapper table {
    margin: 0;
    min-width: 100%;
}

/* ── task lists ─────────────────────────────────────────────────────────── */

/* pulldown-cmark's tasklist extension emits a bare `<li>` holding a bare
   `<input>` — no classes at all. `:has()` is what lets a stylesheet find them
   without the renderer having to mark them up, and it is why the old
   `li.task-list-item` and `ul.contains-task-list` rules never matched. */
.prose ul:has(> li > input[type="checkbox"]) {
    list-style: none;
}

/* The tick is a drawn shape, not the character "✓", and the box centres it
   with a grid rather than a line box. An empty box has no line box, so its
   baseline is its bottom edge; the moment a text tick appears the box acquires
   a text baseline instead and every row aligned on `baseline` shifts as it is
   ticked. The pseudo-element is always present and only scales in, so the
   box's metrics never change between the two states. */
.prose input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0 0.1rem 0 0;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    display: inline-grid;
    place-content: center;
    cursor: default;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.prose input[type="checkbox"]::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    transform: scale(0);
    transition: transform 0.12s ease-out;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.prose input[type="checkbox"]:checked::after {
    transform: scale(1);
}

/* ── syntax highlighting ────────────────────────────────────────────────── */

/* Token colours are the application's and do not vary by document style:
   re-picking them is a separate job from laying out a page. They live in
   common.css with the rest of the palette. */