.application-body.application-podcasts {
    /* Styling for the Podcasts application. Name-spaced under */
    /* #application-body-podcasts (compiled into the per-app block in */
    /* assets/base/applications/_registry.scss by */
    /* scripts/compile_sass.py:generate_registry_scss()). */
    /* The DB App.css field is appended on top at compile time. */

    & {
        /* Podcast purple — far enough from Music's Spotify green (#1DB954) that
           the two media apps never read as the same tile at a glance. */
        /* Whiteboard's violet (apps/whiteboard/styling/all.css) — Films, Podcasts,
           Design and Whiteboard share it (Daniel, 2026-09-11). */
        --app-colour: var(--app-colour-podcasts, #6b46c1);
        /* Every page head in this app is followed immediately by something that
           belongs to it — the category chips under a show's title, the meta line
           under an episode's. The component's own 0 let those close up against
           the byline; 10px separates them without opening the gap a full block
           margin would. */
        --quaive-page-head-margin-bottom: 10px;
    }

    /* Mid-inject, hide the stale content so the swap doesn't flash the */
    /* old listing under the new one (mirrors #app-content-music). The     */
    /* ``-ql`` one is a show or an episode open in the quick look.          */
    #app-content-podcasts,
    #app-content-podcasts-ql {
        &.injecting {
            opacity: 0;
        }
    }

    /* --- Episode rows ------------------------------------------------- */
    /* The rows ARE the shared audio pat_table's. The artless cover face is the
       shared ``kik-audio-tile-empty`` square in
       static/libraries/kikaron/link-list/link-list.css; all this app supplies is
       the glyph inside that square. */

    /* The row state band stops at the row in every bare table now
       (patterns/table/table-shape.css, "THE BAND HUGS THE PICTURE EVENLY"). */
    #app-content-podcasts,
    #app-content-podcasts-ql {
        &.injecting {
            opacity: 0;
        }
    }

    /* --- Episode rows ------------------------------------------------- */
    /* The rows ARE the shared audio pat_table's. The artless cover face is the
       shared ``kik-audio-tile-empty`` square in
       static/libraries/kikaron/link-list/link-list.css; all this app supplies is
       the glyph inside that square. */

    /* THE ROW STATE BAND STOPS AT THE ROW (Daniel, 2026-09-27: "the .current
       background sticks out too much left and right"). A collapsed audio table
       hangs its hover / current band 7px past each end of the row
       (``--kik-row-state-bleed``, patterns/table/table.css), and the row already
       insets its cover by the cell's own padding, so the band ran 13px ahead of
       the artwork and to within 4px of the list's edge — beside a quick look, all
       but touching the divider. Flush with the row instead, as the dashboard
       card's Podcasts rows already are. An id outranks the container-query rule
       that turns the bleed on, so this holds at every width. */
    #app-content-podcasts,
    #app-content-podcasts-ql {
        /* The listing's own width, which the show header below asks. (Not the
           pat-table container name: that belongs to each table's own box.) */
        container-type: inline-size;
        container-name: podcasts-content;
        /* A SMALLER COVER (Daniel, 2026-09-27: "set the cover art size slightly
           smaller for podcast episodes"). One media square is the leading cell of
           every episode row — the cover in a stream, the number on a show page —
           and the column is sized from it (patterns/table/table.css), so the one
           token moves them together. 2.4rem is the shared default. */
        --kik-table-media-size: 2.15rem;

        /* The gap between an episode's title and its byline is no longer set
           here: both lines are sized from the cover (patterns/table/table-shape.css,
           "A BYLINE"), so the pair spans exactly the cover's height. */
    }
    & {
        /* A microphone on its stand — the Podcasts subject, in place of the
           shared default's pair of quavers. Keep in sync with icon/icon.svg. */
        --kik-audio-tile-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="9.25" y="2.25" width="5.5" height="10.5" rx="2.75"/><path d="M6 10.75a6 6 0 0 0 12 0"/><path d="M12 16.75V21.5"/></svg>');
    }

    /* The sounding row is marked by its TITLE alone — app colour, half a weight
       heavier. A background tint on top of that fought the card's own ground and
       made one row in the stream look like a different kind of thing. */
    #document-body-podcasts .item-title.current,
    #quick-look-podcasts .item-title.current {
        color: var(--app-colour);
        font-weight: 600;
    }

    /* --- Shows grid (Favourites) --------------------------------------- */
    /* Square art, unlike the office apps' portrait page previews, so pin the
       aspect ratio on both the real cover and the placeholder — otherwise an
       artless show collapses to a short icon card and the row goes ragged next
       to its neighbours (see the preview_placeholder note in
       partials/pat_link_list.html). */
    .podcasts-show-grid {
        .preview.podcast-art,
        .preview:has(img) {
            aspect-ratio: 1 / 1;
            border-radius: var(--border-radii-small, 4px);
            overflow: hidden;
            background: var(--quaive-colour-gray-95, #f0f0f0);
        }

        .preview.podcast-art:empty {
            background-color: color-mix(in srgb, var(--app-colour) 14%, white);
        }
    }

    /* --- Library / country charts -------------------------------------- */
    /* No padding of its own: the document body around it already supplies the
       page gutter, and the grid should reach the same edges everything else on
       the screen does. (It is no longer a .pat-container either — that capped it
       at --pat-container-width and centred the remainder.) */
    .podcasts-catalogue-body {
        padding: 0;
    }

    /* Nothing here either. The directory results are the SHARED catalogue grid
       (templates/partials/kik_catalogue_grid.html +
       static/libraries/kikaron/catalogue-grid/catalogue-grid.css), which News's feed catalogue uses
       too; it picks up --app-colour from this block, so the same cards read
       purple here and orange there. The category tabs are a plain pat-tabs
       cluster in the toolbar's navigation area — no local rules needed. */

    /* --- Show page ------------------------------------------------------ */
    /* In a wide column the identity ALWAYS sits beside the cover — no wrapping.
       The album header wraps, but a show's blurb is far longer than an album's
       meta line, so a wrap there dropped the whole identity under a 17rem square
       and left the top of the page half empty. The narrow rule below stacks them
       deliberately. */
    .podcasts-show-header {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
        flex-wrap: nowrap;
        margin-bottom: 2rem;
    }

    /* The same treatment Music's album sleeve gets: large enough to be the
       subject of the page rather than a thumbnail, the SMALL radius (it reads as
       a sleeve, not a card) and lifted off the ground. */
    .podcasts-show-cover {
        flex: none;
        width: 17rem;
        /* Of the listing, not the window: the page runs in a resizable pane and
           in the quick look, and a vw cap measured a box the cover is not in.
           ``#app-content-podcasts`` (and its ``-ql`` twin) is an inline-size
           container (patterns/table/table.css). */
        max-width: min(100%, 45cqi);
        aspect-ratio: 1 / 1;
        border-radius: var(--border-radii-small, 4px);
        overflow: hidden;
        background: var(--quaive-colour-gray-95, #f0f0f0);
        box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--app-colour);
    }

    .podcasts-show-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* The cover's outbound link fills the box, so the whole square is the
       target rather than just the image's intrinsic area. */
    .podcasts-show-cover > a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .podcasts-show-cover svg {
        width: 40%;
        height: 40%;
        opacity: 0.35;
    }

    /* The title / byline / chips are the shared pat_page_head's and .kik-chips',
       so nothing here styles them — this only bounds the column they sit in.
       ``flex: 1 1 0`` + ``min-width: 0`` is what keeps a long show title from
       forcing the column wider than the row and pushing itself under the cover. */
    .podcasts-show-identity {
        flex: 1 1 0;
        min-width: 0;
    }

    /* The blurb's clamp and More toggle are the shared .kik-bio treatment
       (static/libraries/kikaron/chips/chips.css); only its measure is set here. */
    .podcasts-show-description {
        max-width: 60ch;
    }

    /* --- Episode page: the head ------------------------------------------ */
    /* Show, title, then "when and how long", beside a large cover and SITTING ON
       ITS FOOT — the show as a small coloured line above the title (the page
       head's byline), the date and length under it (its introduction).

       The hgroup steps aside (``display: contents``) so its title and byline
       become cells of the head's own grid, next to the introduction. The first
       row is ``1fr`` and empty: the cover spans all four rows, so whatever
       height the cover has over the text lands in that row and pushes the text
       down onto the cover's foot. A title long enough to be TALLER than the cover
       leaves nothing over, the row collapses to 0, and the text starts level with
       the cover's top instead — which is the layout that reads better once the
       title outgrows the art (Daniel, 2026-09-27). One rule, both cases.

       Asked of the COLUMN (``.podcasts-episode-meta``), never of the screen: the
       same width is reached by a phone, a narrow quick look and a hub window
       dragged down. The head cannot be its own container — a container query
       styles descendants, and it is the head's own grid that changes. */
    .podcasts-episode-meta {
        container-type: inline-size;
        container-name: podcasts-episode-head;

        > .quaive-page-head {
            --page-head-icon-size: 11rem;
            margin-bottom: 0;
            grid-template-columns: var(--page-head-icon-size) minmax(0, 1fr);
            grid-template-rows: 1fr auto auto auto;
            grid-template-areas:
                "icon ."
                "icon byline"
                "icon title"
                "icon intro";
            column-gap: 1.75rem;

            > hgroup {
                display: contents;
            }

            h1 {
                grid-area: title;
                margin: 0.35rem 0 0;
            }

            .byline {
                grid-area: byline;
                margin: 0;
                font-size: 0.8rem;
                font-weight: 600;
                letter-spacing: 0.06em;
                text-transform: uppercase;

                a {
                    color: var(--app-colour);
                }
            }

            .introduction {
                grid-area: intro;
                margin: 0.5rem 0 0.2rem;
                font-size: 0.9rem;
                font-weight: normal;
                color: color-mix(in srgb, currentColor 62%, transparent);
            }

            /* WHEN THE COVER IS A LINK the grid item is the ANCHOR, not the image
               inside it, so the component's ``.app-icon { grid-area: icon }``
               lands on something that is not a child of this grid. The anchor
               states the area itself. */
            > .podcasts-head-art-link,
            > .podcasts-head-art {
                grid-area: icon;
                align-self: start;
            }

            /* The component hides its icon on a small SCREEN (page-head.css). Here
               the cover stays at every width and shrinks instead (below). */
            .podcasts-head-art-link,
            .podcasts-head-art {
                display: block;
            }

            .podcasts-head-art {
                width: var(--page-head-icon-size);
                height: var(--page-head-icon-size);
                margin: 0;
                border: 0;
                border-radius: 0.9rem;
                box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.1);
            }
        }

        /* A NARROW COLUMN keeps the cover, smaller, with the show and the date
           beside it — and gives the title the full width underneath, where it has
           the room to be read in a few lines rather than five words at a time. */
        @container podcasts-episode-head (width < 34rem) {
            > .quaive-page-head {
                --page-head-icon-size: 6rem;
                column-gap: 1rem;
                grid-template-areas:
                    "icon ."
                    "icon byline"
                    "icon intro"
                    "title title";

                h1 {
                    margin-top: 1rem;
                }

                .podcasts-head-art {
                    border-radius: 0.6rem;
                }
            }
        }
    }

    /* --- Episode page: the play / pause button ------------------------------ */
    /* Under the head, on the page's own ground: no card, no track, no time
       (Daniel, 2026-10-01). It is the shared transport's toggle
       (kik_media_controls.html with controls_toggle_only), restyled as the Music
       app's "Afspelen" pill, and its word comes from ``attr()`` on the labels the
       toggle already carries, so it reads Pause while the episode sounds. */
    .podcasts-episode-play {
        margin-top: 1.5rem;

        .kik-media-controls {
            display: flex;
            max-width: none;
            margin: 0;
            padding: 0;
            background: none;
            border: 0;
            box-shadow: none;
        }

        .kmp-toggle {
            /* The Music app's "Afspelen" pill (music/album.html), the house shape
               for "start this thing". */
            width: auto;
            min-width: 0;
            max-width: none;
            aspect-ratio: auto;
            gap: 0.5rem;
            padding: 0 1.25rem 0 1rem;
            /* A stated height, not the button component's --pat-button-height:
               that var is a LINE height (23px) and a pill cut to it is under half
               the 44px a thumb needs. */
            height: 2.75rem;
            border-radius: 999px;
            background: var(--app-colour);
            color: white;
            font-size: 1rem;
            font-weight: 500;

            &::after {
                content: attr(data-label-play);
            }

            &.is-playing::after {
                content: attr(data-label-pause);
            }
        }

        /* The strip's own hover tint (base.css) is a WASH, right for a quiet round
           control and wrong for a filled pill: it turned the button pale under the
           pointer with white text on it. The pill brightens instead, by the
           theme's own default-button lift. Stated with the strip in the selector
           because base.css's wash is ``.kik-media-controls .kmp-toggle:hover``. */
        @media (hover: hover) {
            .kik-media-controls .kmp-toggle:not(:disabled):hover {
                background: var(--app-colour);
                filter: var(--pat-button-filter-default-hover, saturate(1.12) brightness(1.06));
            }
        }
    }

    /* --- Episode page --------------------------------------------------- */
    /* The head — cover, title, byline, meta — is entirely the shared
       pat_page_head's now, the artwork riding its ``page_head_logo_html`` slot.
       The component sizes and places .app-icon already; all that is left is to
       make a rectangular cover behave like the square icon it stands in for. */
    /* The episode page is a now-playing surface too: reached from the player's
       own Info action, it IS the loaded episode, so its title wears the same mark
       a sounding row's title does — app colour, half a weight heavier. Without it
       Info landed on a page that named the episode and claimed nothing about it,
       which read as the action having done nothing at all. */
    #document-body-podcasts .podcasts-episode-page .quaive-page-head h1.current,
    #quick-look-podcasts .podcasts-episode-page .quaive-page-head h1.current {
        color: var(--app-colour);
        font-weight: 600;
    }

    .podcasts-episode-stage {
        padding: 0 0 0.5rem;
    }

    .podcasts-head-art {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--border-radii-small, 4px);
        background: var(--quaive-colour-gray-95, #f0f0f0);
    }

    /* The artless fallback keeps the app tint rather than a grey square. */
    svg.podcasts-head-art {
        color: var(--app-colour);
        opacity: 0.55;
        background: color-mix(in srgb, var(--app-colour) 12%, white);
        padding: 0.35rem;
    }

    /* The date · length line that heads the notes. A heading, but a quiet one —
       it labels the block rather than competing with the episode title above it. */
    .podcasts-episode-meta-head {
        margin: 0 0 0.75rem;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: color-mix(in srgb, currentColor 55%, transparent);
    }

    .podcasts-episode-notes {
        max-width: 70ch;
        padding-block-end: 1.5rem;
    }

    /* --- Episode page: Up next --------------------------------------------- */
    /* The heading with the show's whole running order beside it. */
    .podcasts-up-next-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;

        > a {
            flex: none;
            color: var(--app-colour);
            text-decoration: none;
        }

        @media (hover: hover) {
            > a:hover {
                text-decoration: underline;
            }
        }
    }

    /* Each row leads with a PLAY square, not a number: in a list of what comes
       next the number was only the row's position, and "1" beside the episode
       you would hear next said nothing the order did not. The shared table's
       hover glyph is simply shown at rest. */
    .podcasts-up-next .audio-tracks {
        td.audio-track-number {
            color: transparent;

            &::before {
                display: flex;
            }
        }

        td.audio-track-number .audio-track-number-value {
            color: transparent;
            background: var(--pat-well-background-colour, white);
        }
    }

    /* Show notes arrive from third-party feeds: cap anything that would
       otherwise blow the column open. */
    .podcasts-episode-notes img,
    .podcasts-episode-notes iframe {
        max-width: 100%;
        height: auto;
    }

    /* --- Chapters + transcript ------------------------------------------- */
    /* Both are lists of seek controls: a time, then what is said there. They are
       <button>s, not links — they act on the player rather than navigating — so
       they carry no pointer cursor (house rule) and are stripped of the UA button
       face entirely. */
    .podcasts-chapter-list,
    .podcasts-transcript {
        list-style: none;
        margin: 0 0 1.5rem;
        padding: 0;
        max-width: 70ch;
    }

    .podcasts-seek {
        border: 0;
        background: transparent;
        padding: 0.15rem 0.4rem;
        margin: 2px 0;
        font: inherit;
        color: inherit;
        text-align: start;
        cursor: default;
        border-radius: var(--border-radii-small, 4px);
    }

    .podcasts-chapter {
        display: flex;
        gap: 0.75rem;
        width: 100%;
        align-items: baseline;
        padding-block: 0.55rem;
    }

    /* A running order of rows, each on its own hairline. */
    .podcasts-chapter-list > li + li {
        border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
    }

    /* The time is the column the eye scans, so it is tabular and fixed-width. */
    .podcasts-chapter-time,
    .podcasts-transcript-time {
        flex: none;
        min-width: 3.5rem;
        font-variant-numeric: tabular-nums;
        color: var(--app-colour);
    }

    .podcasts-chapter-title {
        min-width: 0;
    }

    @media (hover: hover) {
        .podcasts-seek:hover {
            /* A whisper, not a highlight: a chapter list is scanned, and 8% of the
               app colour made every row the pointer crossed announce itself. */
            background: rgba(124, 77, 255, 0.03);
        }
    }

    /* The chapter that is playing. */
    .podcasts-chapter.current {
        background: color-mix(in srgb, var(--app-colour) 10%, transparent);
    }

    .podcasts-chapter.current .podcasts-chapter-title {
        font-weight: 600;
    }

    /* A transcript is prose: the time sits beside its paragraph rather than
       above it, and the paragraph keeps a readable measure. */
    .podcasts-transcript > li {
        display: flex;
        gap: 0.75rem;
        align-items: baseline;
        margin-bottom: 0.5rem;
    }

    .podcasts-transcript-text {
        min-width: 0;
    }

    .podcasts-transcript-block {
        padding-block-end: 1.5rem;
    }

    /* --- Episode page: the tabs --------------------------------------------- */
    /* Notes, chapters and transcript, one at a time. Radio buttons in labels
       (podcasts/episode.html), switched by CSS alone: the checked tab's section
       shows, the others do not. Without tabs (one section) nothing is hidden. */
    .podcasts-episode-sections {
        margin-top: 2rem;

        &:has(.podcasts-episode-tabs) > .podcasts-section {
            display: none;
        }

        &:has(input[value="notes"]:checked) > .podcasts-section-notes,
        &:has(input[value="chapters"]:checked) > .podcasts-section-chapters,
        &:has(input[value="transcript"]:checked) > .podcasts-section-transcript {
            display: block;
        }
    }

    .podcasts-episode-tabs {
        display: flex;
        gap: 1.75rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    }

    .podcasts-episode-tab {
        position: relative;
        display: block;
        margin: 0 0 -1px;
        padding: 0 0 0.7rem;
        border-bottom: 2px solid transparent;
        font-size: 0.95rem;
        font-weight: 500;
        color: color-mix(in srgb, currentColor 62%, transparent);

        /* Hidden visually, never semantically: the radio is what the keyboard
           and the screen reader operate. */
        input {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: 0;
            opacity: 0;
            pointer-events: none;
        }

        &:has(input:checked) {
            color: inherit;
            font-weight: 600;
            border-bottom-color: currentColor;
        }

        &:has(input:focus-visible) {
            outline: 2px solid var(--app-colour);
            outline-offset: 4px;
            border-radius: 2px;
        }
    }

    /* --- Episode page: the fine print ---------------------------------------- */
    /* The network's boilerplate, lifted off the end of the notes
       (podcasts.feed.split_fine_print) into a closed disclosure: present, one
       press away, and no longer outweighing the episode's own words. */
    .podcasts-fine-print {
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px dashed color-mix(in srgb, currentColor 18%, transparent);
        font-size: 0.9rem;
        color: color-mix(in srgb, currentColor 70%, transparent);

        summary {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            list-style: none;

            &::-webkit-details-marker {
                display: none;
            }

            &::before {
                content: "";
                width: 0.85rem;
                height: 0.85rem;
                background-color: currentColor;
                -webkit-mask: var(--kik-svg-angle-right) center / contain no-repeat;
                mask: var(--kik-svg-angle-right) center / contain no-repeat;
                transition: transform 0.12s ease-out;
            }
        }

        &[open] summary::before {
            transform: rotate(90deg);
        }

        .pat-rich {
            margin-top: 0.5rem;
        }
    }

    /* --- Countries ------------------------------------------------------ */
    /* The shared flag-list draws known flags; storefronts we carry no file for
       get the abbreviation tile in the app tint. */
    .podcasts-countries {
        padding-top: 1rem;
    }

    /* Real flat SVG flags (vendored flag-icons set) — the extra selector depth
       outranks the component's own per-code gradient rules, so the US keeps its
       stars and nothing waves. */
    .podcasts-countries ul.flag-list li.flag.svg a::before {
        background-image: var(--kik-flag);
        background-size: cover;
        background-position: center;
    }

    .podcasts-countries .flag.unknown a::before {
        content: attr(data-abbr);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: color-mix(in srgb, var(--app-colour) 55%, black);
        background-color: color-mix(in srgb, var(--app-colour) 14%, white);
    }

    .podcasts-countries .flag a {
        cursor: default;
        text-decoration: none;
        color: inherit;
    }

    /* --- Narrow ---------------------------------------------------------- */
    /* A NARROW COLUMN STACKS THE HEAD, whatever the screen (Daniel, 2026-09-27:
       "the podcast page head should adapt to narrow size in small container").
       Asked of the listing's own width, not of the screen: beside a quick look,
       in a floating window or on a phone alike, a column too narrow to hold a
       cover and a readable identity side by side squeezed the title into a
       one-syllable-per-line strip and clipped the chips. Below 36rem — the
       17rem cover, the gap and about as much again for the words — the cover
       goes on top and the identity takes the whole width under it. */
    @container podcasts-content (width < 36rem) {
        .podcasts-show-header {
            flex-direction: column;
            gap: 1rem;
        }

        .podcasts-show-cover {
            width: 9rem;
            max-width: 50cqi;
        }

        .podcasts-show-identity {
            flex: none;
            width: 100%;
        }
    }


    /* --- The now-playing level meter, as Music draws it --------------- */
    /* The same meter, over the episode number instead of the track number.
       The DRAWING lives in kik-music-play.js and is called through
       window.KikLevelMeter (one analyser, one media element — a second
       implementation could not wire itself up); the class vocabulary it emits
       is Music's, so these rules keep those names verbatim rather than
       aliasing them. Per-app stylesheets are wrapped in
       .application-body.application-<slug>, which is why this is a copy and
       not a shared import: Music's block cannot reach into this app's body. */

    /* The now-playing level meter is NOT redefined here. It is one instrument
       shared with Music, and it lives with the components it sits inside —
       static/libraries/patterns/table/table.css and static/libraries/kikaron/link-list/link-list.css. A
       copy in this file was how the two apps' meters drifted apart. */

    /* The show name under an episode title is a link, but the head is a heading
       first — a permanent underline there reads as a form field's rule across the
       byline. Underlined on hover only, which is where a link has to prove itself
       anyway. */
    .quaive-page-head .byline a {
        text-decoration: none;
    }

    @media (hover: hover) {
        .quaive-page-head .byline a:hover {
            text-decoration: underline;
        }
    }



    /* --- Toolbar: the back control leads, the category strip follows ---------
       The Catalogue's navigation is a collapse-select tab strip, and the back
       control belongs LEFT of it — the way a back control leads every other
       screen — rather than trailing the search and window buttons on the far
       side of the bar (Daniel, 2026-08-30). ``toolbar_back_leading`` on the
       pat_toolbar include is what puts it in a .toolbar-section.micro-navigation
       of its own; the component then places that in the FIRST grid column by
       itself at every width above the phone breakpoint.

       Below it the stock rule parks every micro-navigation in the middle column
       beside the strip, so the placement has to be restated. Same two-rule
       reflow Radio carries for the same shape (apps/radio/styling/all.css) —
       patterns/components/toolbar.css already sizes the three columns for it and
       leaves the placement to the app, which is why this is stated here rather
       than once in the component. */
    @container screen style(--screen-small: true) {
        .pat-toolbar:has(.toolbar-section.navigation .pat-tabs):has(.toolbar-section.micro-navigation) {
            .toolbar-section.micro-navigation {
                grid-area: first;
                justify-self: start;
            }

            .toolbar-section.navigation {
                grid-area: middle;
                justify-self: start;
                justify-content: start;
            }
        }
    }

    /* --- Show page: the toolbar's Play / Pause button ----------------------- */
    /* A purple pat-button with the play or the pause mark beside its word
       (podcast_toolbar_quick_functions.html): both marks ride in it and
       ``is-playing`` (podcasts-play.js) shows the one that fits. Named with the
       toolbar and the button class: the toolbar's own rule for a mark inside a
       button (``.pat-toolbar .pat-button:not(.icon):not([class*="icon-"]):has(> svg) > svg``)
       shows every one of them on a small screen. */
    .pat-toolbar .pat-button.podcasts-show-play {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;

        > svg {
            width: 1.1em;
            height: 1.1em;
            flex: none;
        }

        > svg:nth-of-type(2) {
            display: none;
        }

        &.is-playing > svg:nth-of-type(1) {
            display: none;
        }

        &.is-playing > svg:nth-of-type(2) {
            display: block;
        }
    }

    /* Just left of the share menu at every width (Daniel, 2026-10-01): on a small
       screen the toolbar brings a context menu to the front (patterns toolbar,
       ``.pat-toolbar .pat-context-menu { order: -1 }``), and the button goes
       with it, ahead of it in the source. */
    @container screen style(--screen-small: true) {
        .pat-toolbar .podcasts-show-play {
            order: -1;
        }
    }
}