/* atlas's own stylesheet. Everything a utility can express lives in the
   templates; this file is for the things utilities cannot reach, which is
   pseudo-elements, the prose container's furniture, and the moving parts of
   the shared scripts. */

/* Content furniture inside the article. The editor produces this markup and
   the template does not own it, so the rules are here rather than in a view.
   Images, video and embeds take the box radius and the same well the cards
   use, so a picture inside an article and a picture on the grid are the same
   object. */
.prose :where(img, video, iframe):not(.velocity-widget *) {
    border-radius: var(--radius-box);
}

/* Code blocks. A hairline rather than a fill, because a filled block would be
   the one tinted surface in a page that separates by rules. */
/* 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 get the row rules the rest of the
   template uses 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 is set on a rule at the left, in the accent, because the accent
   on this template means "this is the important one" everywhere else. */
#post-body blockquote {
    border-inline-start: 2px solid var(--color-primary);
    font-style: normal;
}

/* Anchor jumps from the contents row land clear of the sticky masthead. */
#post-body :where(h2, h3, h4) {
    scroll-margin-top: 5.5rem;
}

/* The contents row's current item. toc.js sets these class names; the look is
   ours, and it is the same treatment the topic row gives its current item, so
   a reader learns one signal for "you are here". */
#toc-container a.active,
#toc-container a.parent-active {
    color: var(--color-base-content);
    font-weight: 500;
}

/* The audio player's moving parts. Everything else about it is Tailwind in
   views/_tts.html; these need pseudo-elements. */
#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. */
.atlas-lead-lifted > div[class*="se-image-container"]:first-child,
.atlas-lead-lifted > figure:first-child {
    display: none;
}