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

   signal shipped without one until 30 Aug 2026, and the absence was invisible
   in every check we have: the build was green, the sweep was clean and parity
   matched, because none of those look at whether a class a script sets has a
   rule behind it. What a reader saw was a contents list that never marked the
   section they were in. toc.js was adding .active the whole time.

   Everything a utility can express lives in the views. This file is for what
   utilities cannot reach: the classes the shared scripts set, pseudo-elements,
   and the article furniture the editor produces and 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 links carry border-l-2 border-transparent already, so the indicator is
   the transparent edge taking the accent rather than a new object appearing,
   and the row does not move by a pixel when it lights up. It is the same
   "you are here" mark the edition's topic rails use.

   A parent takes the text weight but not the accent edge, so a reader can see
   at a glance which of the two is the section they are actually in. */
#toc-container a.active {
    border-inline-start-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 500;
}

#toc-container a.parent-active {
    border-inline-start-color: var(--color-base-300);
    color: var(--color-base-content);
    font-weight: 500;
}

/* Anchor jumps from the contents land clear of the sticky masthead, which is
   4rem tall. Without this the heading a reader clicked arrives underneath it. */
#post-body :where(h2, h3, h4) {
    scroll-margin-top: 5.5rem;
}

/* Content furniture inside the article. The editor produces this markup, so
   the rules are here rather than in a view. Pictures take the box radius, the
   same as the cover above them, so an image in an article and an image at the
   top of one are the same object. */
.prose :where(img, video, iframe):not(.velocity-widget *) {
    border-radius: var(--radius-box);
}

/* Code blocks take a hairline rather than a fill. The page has been base-100
   from the masthead down, and a tinted block would be the one place it
   changes its mind. */
/* 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: 1px solid var(--color-base-200);
    background-color: var(--color-base-100);
    /* 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, so they take the same rule that separates
   every other row on the site and nothing else. */
.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 an accent rule at the left, upright rather than italic,
   because the accent means "this is the important one" everywhere else here. */
#post-body blockquote {
    border-inline-start: 2px solid var(--color-primary);
    font-style: normal;
}

/* The audio player's moving parts. Everything else about it is Tailwind in
   views/_tts.html; these are the parts that need pseudo-elements or that a
   script sets. */
#tts-toggle {
    position: relative;
    z-index: 1;
}

#tts-toggle::after {
    content: '';
    position: absolute;
    inset: -6px;
}

#tts-progress.tts-track {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border: 0;
    overflow: hidden;
    background: var(--color-base-200);
}

#tts-progress.tts-track::-webkit-progress-bar {
    background: transparent;
}

#tts-progress.tts-track::-webkit-progress-value {
    background: var(--color-primary);
}

#tts-progress.tts-track::-moz-progress-bar {
    background: var(--color-primary);
}

/* The paragraph being read, tinted the same 10 percent the search highlight
   uses, so following along needs no new colour. */
.tts-current {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: var(--radius-selector);
    transition: background 0.3s;
}

/* The selected speed. tts-player.js sets this class name; the look is ours. */
#tts-speed-menu .menu-active {
    background: var(--color-base-200);
    font-weight: 500;
}

/* The lifted opening image: the view renders it as the hero, so the in-content
   copy hides. The hidden copy never fetches (the editor writes loading=lazy on
   it), and the hero is the same URL the LCP preload warms, so promoting the
   image costs nothing. */
.signal-lead-lifted > div[class*="se-image-container"]:first-child,
.signal-lead-lifted > figure:first-child {
    display: none;
}

/* The answers inside the questions block. They are authored HTML, so they run
   through prose, and prose paints its body colour from its own --tw-prose-body.
   Both a prose-p: utility and an arbitrary property set on the same element
   lose to it, measured: the answers stayed at the prose default of
   base-content/0.8 either way. An id gets there. */
#post-faqs .prose {
    --tw-prose-body: var(--color-base-content-muted);
}