/* kiosk'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.

   A template with no assets/ directory is not one that needed no CSS, it is one
   that has not been asked the question yet. signal shipped without this file and
   its contents list never marked the reader's place for three days. */

/* 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.

   kiosk's rail is a plain column with no rule down it, so the indicator is the
   text taking the accent and the weight going up. No border and no marker: this
   template has one accent gesture, the pill, and a second one in the margin
   would be a competing vocabulary in the one place a reader is trying to
   concentrate. */
#toc-container a.active {
    color: var(--color-primary);
    font-weight: 600;
}

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

/* 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 selector radius
   rather than the box: inside a column of prose a picture is an inline object
   like a pull quote, not a panel like the cover above it. */
.prose :where(img, video, iframe):not(.velocity-widget *) {
    border-radius: var(--radius-selector);
}

/* Code blocks take a tint rather than a hairline. kiosk already separates with
   space and rounded objects rather than rules, so a bordered block would be the
   one ruled thing on the page. */
/* 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 and take 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 an accent rule at the left, upright rather than italic.
   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 lifted opening image: the view renders it as the hero, so the in-content
   copy hides. The hidden copy never fetches, and the hero is the same URL the
   LCP preload warms, so promoting it costs nothing. */
.kiosk-lead-lifted > div[class*="se-image-container"]:first-child,
.kiosk-lead-lifted > figure:first-child {
    display: none;
}

/* The audio player's moving parts. Everything else about it is Tailwind in the
   view; these need pseudo-elements or are set by a script. */
#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: 600;
}