/**
 * doc/panel.css — Document style: Panel (the default)
 *
 * Every block that is not prose gets an edge: code in a titled card, tables in
 * a clipped one, quotes and alerts filled. Dense reference material is easier
 * to scan when the eye can tell at a glance where a thing starts and stops,
 * and a card does that without a single rule inside it.
 *
 * Loaded after doc/base.css. See docs/mockups/20260916_document_styles.html.
 */

.prose {
    color: var(--doc-text);
    font-size: 1rem;
    line-height: 1.65;
}

.prose > :first-child {
    margin-top: 0;
}

/* ── headings ───────────────────────────────────────────────────────────── */

/* No marker of any kind. A vertical bar is the edge of a quote and a dot is a
   list bullet — both already mean something else on this very page, and
   borrowing them for a heading makes the reader check twice. Cards are for the
   blocks that are not prose; a heading is prose, and gets nothing but type.

   Everything else is the mockup's, to the pixel: only the marker and the
   indent that made room for it have gone. */
.prose h2 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--doc-text-strong);
    margin: 2.75rem 0 1rem;
}

.prose h3 {
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--doc-text-strong);
    margin: 2rem 0 0.75rem;
}

.prose h4,
.prose h5,
.prose h6 {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--doc-muted);
    margin: 1.6rem 0 0.55rem;
}

/* ── body ───────────────────────────────────────────────────────────────── */

.prose p {
    margin: 0 0 1rem;
}

.prose strong {
    font-weight: 650;
    color: var(--doc-text-strong);
}

.prose a {
    color: var(--doc-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--doc-accent-wash);
    transition: border-color 0.2s;
}

.prose a:hover {
    border-bottom-color: var(--doc-accent);
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--doc-border);
    margin: 2.5rem 0;
}

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

code:not(pre code) {
    background: var(--doc-surface);
    color: var(--doc-accent);
    border: 1px solid var(--doc-border);
    border-radius: 0.3rem;
    padding: 0.1em 0.38em;
    font-size: 0.86em;
    font-weight: 500;
}

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

/* A titled card. The strip is not decoration — it is where the language name
   lives and where the copy button belongs, instead of floating over the first
   line of code.

   Both live on the wrapper rather than on the `pre`, because `pre` scrolls
   horizontally and anything positioned inside a scrolling box slides away with
   the content. The wrapper is added by sheet.js; without scripting a code
   block is a plain rounded box, which is a loss of a label and nothing else. */
.code-block {
    border: 1px solid var(--doc-border);
    border-radius: 0.7rem;
    overflow: hidden;
    margin: 0 0 1.35rem;
    background: var(--doc-code-bg);
}

.code-block[data-lang]::before {
    content: attr(data-lang);
    display: block;
    /* 0.6rem, not 0.5rem: in the mockup the strip was a flex row and the Copy
       button's own padding set its height. Here the button is positioned out
       of flow, so the strip has to reach 38px on its own. */
    padding: 0.6rem 0.9rem;
    background: var(--doc-code-bg-2);
    border-bottom: 1px solid var(--doc-border);
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--doc-muted);
}

pre {
    background: var(--doc-code-bg);
    color: var(--doc-code-text);
    border: 1px solid var(--doc-border);
    border-radius: 0.7rem;
    padding: 1rem 1.1rem;
    margin: 0 0 1.35rem;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* Inside the card the border and the radius belong to the card. */
.code-block pre {
    border: 0;
    border-radius: 0;
    margin: 0;
    background: none;
}

/* Parked in the strip at the opposite end from the language, and visible
   without hovering — the strip is the button's own row, so nothing is covered
   and there is nothing to discover. The hover-reveal in doc/base.css is for
   Editorial and Technical, where the button floats over the first line of
   code and being always-on would be in the way. */
.copy-btn {
    opacity: 1;
    top: 0.55rem;
    /* The strip's own side padding, so the button's right edge lines up with
       the language name's left edge. */
    right: 0.9rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--doc-muted);
    background: none;
    border: 0;
    border-radius: 0.25rem;
}

.copy-btn:hover {
    color: var(--doc-text-strong);
    background: var(--doc-surface-2);
}

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

/* The card clips the corners, so there is no outer border to draw and no
   column rules to need: the header's own surface already separates the
   columns' labels from their values.

   `border-collapse: separate` is what makes the radius possible at all — a
   collapsed table has no border box of its own to round — and the corner cells
   repeat the radius so a tinted header cannot square off the top corners. */
.prose table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--doc-border);
    border-radius: 0.7rem;
    overflow: hidden;
    margin: 1.5rem 0;
    font-size: 0.94rem;
}

.prose th {
    background: var(--doc-surface);
    text-align: left;
    font-weight: 600;
    color: var(--doc-text-strong);
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--doc-border);
}

.prose td {
    padding: 0.65rem 0.95rem;
    color: var(--doc-text);
    border-bottom: 1px solid var(--doc-border-soft);
    vertical-align: top;
}

.prose tbody tr:last-child td {
    border-bottom: 0;
}

.prose tbody tr:nth-child(even) {
    background: var(--doc-surface);
}

.prose thead tr:first-child th:first-child { border-top-left-radius: 0.7rem; }
.prose thead tr:first-child th:last-child { border-top-right-radius: 0.7rem; }
.prose tbody tr:last-child td:first-child { border-bottom-left-radius: 0.7rem; }
.prose tbody tr:last-child td:last-child { border-bottom-right-radius: 0.7rem; }

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

/* Markers as drawn objects rather than glyphs, so they line up whatever the
   font does and whatever the reader's browser thinks a disc looks like. */
.prose ul,
.prose ol {
    margin: 0 0 1rem;
    padding-left: 0;
    list-style: none;
}

.prose li {
    position: relative;
    margin: 0.4rem 0;
    padding-left: 1.35rem;
    color: var(--doc-text);
}

.prose ul > li:not(:has(> input))::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--doc-accent);
    opacity: 0.75;
}

.prose li > ul,
.prose li > ol {
    margin: 0.4rem 0 0.1rem;
}

.prose li > ul > li::before {
    background: var(--doc-faint);
    opacity: 0.6;
}

.prose ol {
    counter-reset: doc-ol;
}

.prose ol > li {
    counter-increment: doc-ol;
    padding-left: 1.9rem;
}

.prose ol > li::before {
    content: counter(doc-ol);
    position: absolute;
    left: 0;
    top: 0.08em;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--doc-accent-wash);
    color: var(--doc-accent);
    font-size: 0.72rem;
    font-weight: 700;
    display: grid;
    place-content: center;
    font-variant-numeric: tabular-nums;
}

/* ── quotes ─────────────────────────────────────────────────────────────── */

.prose blockquote {
    margin: 1.35rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--doc-surface);
    border: 1px solid var(--doc-border);
    border-left: 3px solid var(--doc-border-strong);
    border-radius: 0.5rem;
    color: var(--doc-text);
}

.prose blockquote p {
    margin: 0 0 0.6rem;
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

/* One nesting level, not five colour-cycling ones. */
.prose blockquote blockquote {
    margin: 0.75rem 0 0;
    background: var(--bg-body);
}

/* ── alerts ─────────────────────────────────────────────────────────────── */

/* Filled, because an alert is the one thing on the page that is allowed to
   interrupt. Icon plus word, never colour alone.

   The word is `::before` and the badge is `::after`: a pseudo-element in
   normal flow lands where its name says, so `::after` would print the label
   underneath the sentence. The badge escapes that by being absolutely
   positioned, which takes it out of flow and makes its order irrelevant. */
.prose blockquote[class^="markdown-alert-"] {
    position: relative;
    padding-left: 2.55rem;
    border-width: 1px;
    border-style: solid;
}

.prose blockquote[class^="markdown-alert-"]::before {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.3rem;
}

.prose blockquote[class^="markdown-alert-"]::after {
    position: absolute;
    left: 1rem;
    top: 0.85rem;
    width: 1.05rem;
    height: 1.05rem;
    font-size: 0.74rem;
    font-weight: 800;
    display: grid;
    place-content: center;
    border-radius: 50%;
    line-height: 1;
}

.prose .markdown-alert-note {
    background: var(--sem-note-wash);
    border-color: var(--sem-note);
}
.prose .markdown-alert-note::before { content: "Note"; color: var(--sem-note); }
.prose .markdown-alert-note::after { content: "i"; color: var(--bg-body); background: var(--sem-note); }

.prose .markdown-alert-tip {
    background: var(--sem-tip-wash);
    border-color: var(--sem-tip);
}
.prose .markdown-alert-tip::before { content: "Tip"; color: var(--sem-tip); }
.prose .markdown-alert-tip::after { content: "+"; color: var(--bg-body); background: var(--sem-tip); }

.prose .markdown-alert-warning {
    background: var(--sem-warn-wash);
    border-color: var(--sem-warn);
}
.prose .markdown-alert-warning::before { content: "Warning"; color: var(--sem-warn); }
.prose .markdown-alert-warning::after { content: "!"; color: var(--bg-body); background: var(--sem-warn); }

.prose .markdown-alert-important {
    background: var(--sem-caution-wash);
    border-color: var(--sem-caution);
}
.prose .markdown-alert-important::before { content: "Important"; color: var(--sem-caution); }
.prose .markdown-alert-important::after { content: "!"; color: var(--bg-body); background: var(--sem-caution); }

.prose .markdown-alert-caution {
    background: var(--sem-caution-wash);
    border-color: var(--sem-caution);
}
.prose .markdown-alert-caution::before { content: "Caution"; color: var(--sem-caution); }
.prose .markdown-alert-caution::after { content: "\00d7"; color: var(--bg-body); background: var(--sem-caution); }

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

.prose li:has(> input[type="checkbox"]) {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.3rem 0.5rem;
    margin: 0.15rem -0.5rem;
    border-radius: 0.4rem;
}

.prose li:has(> input[type="checkbox"]):hover {
    background: var(--doc-surface);
}

.prose input[type="checkbox"] {
    border: 1.5px solid var(--doc-border-strong);
    border-radius: 0.35rem;
    background: var(--bg-body);
    transform: translateY(0.15rem);
}

.prose input[type="checkbox"]::after {
    background: #ffffff;
}

.prose input[type="checkbox"]:checked {
    background: var(--sem-tip);
    border-color: var(--sem-tip);
}

.prose li:has(> input[type="checkbox"]:checked) {
    color: var(--doc-muted);
}