/* folio's own stylesheet, loaded after the site stylesheet.

   Everything a utility can express lives in the views. This file is for what
   utilities cannot reach: the classes the shared scripts set, and the article
   furniture the editor produces which the template does not own. */

/* The contents entry the reader is inside. toc.js sets .active on it and
   .parent-active on a parent whose subsection is active; the look is ours.
   The text takes the ink at full strength; no marker, no accent, because the
   rail is a quiet list beside the measure and a second colour there competes
   with the prose. */
#toc-container a.active {
    color: var(--color-base-content);
    font-weight: 500;
}

#toc-container a.parent-active {
    color: var(--color-base-content);
}

/* Anchor jumps from the contents land clear of the top edge. The nav scrolls
   away, so only a little air is needed. */
#post-body :where(h2, h3, h4) {
    scroll-margin-top: 2rem;
}

/* Content furniture inside the article. Pictures take the selector radius
   rather than the box: inside a column of prose a picture is an inline object
   like a pull quote, not a plate like the cover above it. */
.prose :where(img, video, iframe):not(.velocity-widget *) {
    border-radius: var(--radius-selector);
}

/* Code blocks take the tint and the box radius, no border: folio separates
   with air and rounded objects, never with a ruled box. */
/* A highlighted code block brings its own ground: the Dracula theme the
   editor's code widget loads paints pre[class*="language-"] dark, and a
   template ground on top of it left a light box with dark token spans
   inside (Sai, 6 Sep 2026). The template styles only the plain pre. */
#post-body pre {
    border-radius: var(--radius-box);
}
#post-body pre:not([class*="language-"]) {
    border: 0;
    background-color: var(--color-base-200);
    /* The ground moved to paper, so the text has to move with it.
       Typography paints pre in --tw-prose-pre-code, which is
       neutral-content, white on a light theme: repainting the ground
       and leaving the text left white on white, and the code block
       read as an empty box (#57). */
    color: var(--color-base-content);
}

/* Tables read as rows of data on hairlines, the one rule the template allows. */
.prose table {
    border-collapse: collapse;
    width: 100%;
}

.prose table :where(th, td) {
    border-bottom: 1px solid var(--color-base-200);
}

.prose table tr:last-child :where(th, td) {
    border-bottom: 0;
}

/* A quotation sits on a primary rule at the left, upright rather than italic,
   with the display face: a pulled sentence is a caption for the argument. */
#post-body blockquote {
    border-inline-start: 2px solid var(--color-primary);
    font-style: normal;
}

/* The lifted opening image: the view renders it as the cover, so the
   in-content copy hides. */
.folio-lead-lifted > div[class*="se-image-container"]:first-child,
.folio-lead-lifted > figure:first-child {
    display: none;
}

/* FAQ answers are authored HTML, so they run through prose. Prose paints its
   body colour from --tw-prose-body, which a colour utility on the same element
   does not override. An id selector does. */
#post-faqs .prose {
    --tw-prose-body: var(--color-base-content-muted);
}