/* digest's own stylesheet, loaded after the site stylesheet.
 *
 * Everything a utility can express lives in the templates. This file is for
 * what utilities cannot reach: markup the editor produces and the template
 * does not own, declarations the platform sets that only a later unlayered
 * rule can change, and the class names the shared scripts toggle.
 *
 * The rules below are scoped to .prose, or to #post-body where they have to
 * out-specify a stylesheet that loads later. BOTH the post view and the page
 * view give their content container id="post-body": the lightbox and the
 * scrollspy find the article that way, and so do these rules.
 */

/* Content furniture inside an article. Pictures, video and embeds take the
 * selector radius, which is the same corner the listing thumbnails take, so a
 * picture inside an article and a picture on a row are the same object. The
 * cover is the exception and takes the box radius; it is the one place on the
 * post where that radius appears, and it is set in the markup.
 *
 * Widget internals are excluded on purpose. A tweet card, a Spotify player and
 * a Reddit embed paint their own corners inside content we cannot reach, and
 * clipping the iframe cuts their furniture apart.
 */
.prose :where(img, video, iframe):not(.velocity-widget *) {
    border-radius: var(--radius-selector);
}

/* Code blocks. The radius only: the block's colours are the platform's, and
 * they are what a reader of this site's posts already knows. Scoped to the id
 * because the Prism theme loads at the end of the body, after this file, and
 * its own selectors carry an attribute.
 */
#post-body pre {
    border-radius: var(--radius-selector);
}

/* Tables read as rows of data, so they take the rule that separates every
 * other row on this template and nothing else. No fill and no outer border: a
 * boxed table would be the only boxed thing on the page.
 */
.prose table {
    width: 100%;
    border-collapse: collapse;
}

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

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

/* The article quotation. Its colours, its rule and its padding are the
 * platform's and stay that way: a comparison table or a pull quote is the
 * customer's content, and switching templates must not rewrite what their
 * content looks like it means. The corner is the one part of it this template
 * owns, which is why it is the only declaration here.
 *
 * The platform's rule is unlayered so that it can beat Tailwind Typography;
 * this file is unlayered too and loads later, so this wins by source order
 * with no !important anywhere.
 */
.prose blockquote {
    border-radius: var(--radius-selector);
}

/* Anchor jumps from the contents land with a little air above them. Nothing on
 * this template is pinned to the top of the viewport, so this is breathing
 * room rather than clearance for a bar.
 */
#post-body :where(h2, h3, h4) {
    scroll-margin-top: 2rem;
}

/* The contents entry the reader is inside. toc.js sets these two class names
 * as they scroll; the look is ours. The accent marks exactly one item, so a
 * parent whose child is active takes full ink instead: two primary items at
 * once would say the reader is in two places.
 */
#toc-container a.active {
    color: var(--color-primary);
    font-weight: 500;
}

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

/* The audio player's moving parts are not here yet. When views/_tts.html
 * lands, the progress element needs its bar and value styled through
 * pseudo-elements, which no utility reaches; atlas.css has the working set to
 * copy and restyle.
 */

/* 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. */
.digest-lead-lifted > div[class*="se-image-container"]:first-child,
.digest-lead-lifted > figure:first-child {
    display: none;
}