/* ============================================================
   Colour: every colour on the site is one of these tokens.

   Each is declared once, as light-dark(light, dark). Which side
   applies is color-scheme's: :root says "light dark", so with no
   choice the site follows the device, and a visitor's choice in
   the top bar becomes <html data-theme="light|dark">, which pins
   it. theme.js sets data-theme before the page paints.
   test/theme.test.js checks every token is declared once and
   that no colour is written out below the end of the tokens.

   --paper         the ground every page sits on
   --paper-glass   the player bar, nearly opaque
   --surface       cards and panels
   --surface-2     a hovered row, inline code
   --ink           titles, and the strongest text
   --ink-2         headings in documents
   --text          reading text
   --text-2        quieter reading text
   --muted         labels, meta, captions
   --muted-2       the quietest text that must still be read
   --rule          dividers
   --rule-2        borders around controls
   --line          field underlines
   --line-strong   a hovered or focused field
   --accent        filled controls and focus rings (white on it is 4.6:1)
   --accent-hover  a filled control under the pointer
   --accent-light  the played part of a waveform, accent lines
   --on-accent     an icon or label on a filled control
   --link          links and teal text
   --accent-ink    a part's play icon and links in the service
   --purple        a button that sends a visitor's own words (a question,
                   a follow-up, a reflection), as teal is for listening
                   and beginning (white on it is 5.4:1)
   --purple-hover  that button under the pointer
   --on-purple     the label on purple
   --error         what went wrong
   --chart-1       the first series in a chart (/church-music: Google)
   --chart-2       the second series in a chart (/church-music: YouTube)
   ============================================================ */
:root {
    color-scheme: light dark;
    --paper: light-dark(#fff, #0a0e1a);
    --paper-glass: light-dark(rgba(255, 255, 255, 0.97), rgba(10, 14, 26, 0.97));
    --surface: light-dark(#fafafa, #111726);
    --surface-2: light-dark(#f5f5f5, #182033);
    --ink: light-dark(#000, #f2f4f8);
    --ink-2: light-dark(#1a1a1a, #e6e9ef);
    --text: light-dark(#333, #d3d8e0);
    --text-2: light-dark(#444, #c0c7d2);
    --muted: light-dark(#595959, #a3abb9);
    --muted-2: light-dark(#666, #939cab);
    --rule: light-dark(#eee, #1f2738);
    --rule-2: light-dark(#e0e0e0, #2a3347);
    --line: light-dark(#ccc, #46506a);
    --line-strong: light-dark(#999, #6b7690);
    --accent: #00838f;
    --accent-hover: #006f7a;
    --accent-light: #00b8d4;
    --on-accent: #fff;
    --link: light-dark(#007a91, #5cc8dc);
    --accent-ink: light-dark(#0b5563, #7fd3e3);
    --purple: #7a52c7;
    --purple-hover: light-dark(#6a43ad, #8257c9);
    --on-purple: #fff;
    --error: light-dark(#c44, #ff8a8a);
    --chart-1: light-dark(#007a91, #5cc8dc);
    --chart-2: light-dark(#a35a12, #e8a85c);
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

/* -- end of tokens -- */

/* Layout sizes, not colours. The sticky top bar's height is one token, read
   by the sidebar and the contents rail (which sit just below it) and by
   anchor jumps and focus (scroll-padding-top on html), so nothing lands under
   the bar. The player bar's footprint is the other, --player-bar-height,
   measured by site-player.js because what it holds changes.

   Below 768px: a 44px menu button between 0.5rem paddings, the top one
   widened to the notch's inset where the page reaches it (viewport-fit=cover,
   site-shell.js), plus a 1px bottom border. From 768px: a 40px strip plus its
   1px border. The bar's height is set from this, so the two cannot drift. */
:root {
    --docs-topbar-h: calc(max(0.5rem, env(safe-area-inset-top)) + 44px + 0.5rem + 1px);
}
@media (min-width: 768px) {
    :root {
        --docs-topbar-h: 41px;
    }
}

/* The spacing scale: every gap is one of these. Inside a group, 1 to 3;
   between a list's items or a card's parts, 3 to 4; between groups, 5 to 6;
   between a page's sections, 7. They are the seven values the stylesheet
   already used most (mobile-rhythm-2026-11-04.md, private repo).

   The type scale: five sizes, each with a job. Supporting text is set apart
   by colour (--text-2, --muted) as much as by size. A display size (the home
   page's name, a song's title) says so where it is set.
   test/style-scale.test.js holds both, and a ratchet on one-off values. */
:root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --text-label: 0.75rem;    /* eyebrows, spaced-capital labels, meta */
    --text-small: 0.875rem;   /* supporting lines, captions, a list's second line */
    --text-body: 1rem;        /* reading text and every field (iOS zooms a field under 16px) */
    --text-heading: 1.25rem;
    --text-title: 2rem;       /* a page's h1 */
}
@media (max-width: 600px) {
    :root {
        --text-title: 1.75rem;
    }
}

html {
    scroll-padding-top: calc(var(--docs-topbar-h) + var(--space-3));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
    padding: 6rem 2rem;
}

/* Lines break where a reader would break them: headings balanced across
   their lines, reading text without a lone word on its last. Browsers
   without these simply wrap as before. */
h1, h2, h3, h4, h5, h6, figcaption {
    text-wrap: balance;
}

p, li, dd, blockquote {
    text-wrap: pretty;
}

h2 {
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 3rem;
    margin-bottom: 2rem;
    color: var(--muted);
}

/* F7 (Issue 005): about.html `<p class="section-label">` was promoted to `<h2 class="section-label">`
   during Plan 003 Phase 2A (semantic upgrade). Without this rule, the default global h2 styling
   (uppercase, 0.875rem, color: #595959) renders visibly differently from the prior <p> styling.
   These values minimize visual change while preserving heading semantics for crawlers + a11y. */
.section-label {
    font-size: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--muted-2);
    letter-spacing: 0.05em;
}

/* Page headings. Each page's title is its <h1>, the first thing under the
   top bar. The inner pages used to repeat the site's name above it in 3.25rem
   type, so every title started 181px down the page, under a top
   bar that already names the site. */

/* The home page's sign: its name and what it is, then the service. Tighter
   than the other pages' headers, so the service's button is in the first
   screen. */
.docs-body .sanctuary-main .home-sign {
    margin-bottom: var(--space-5);
    text-align: center;
}

.docs-body .sanctuary-main .home-sign h1 {
    margin-bottom: 0.75rem;
}

.lead-tagline {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--ink-2);
    margin: 0;
}

/* After the service, where the visitor goes next: a row that wraps, as the
   footer's links do, so a door that wraps starts its own line. The padding,
   not the text, makes each door's tap target. */
.home-doors {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    /* Back by the doors' own padding, so their words line up with the card's. */
    margin: 1rem 0 0 -0.25rem;
    font-size: 0.9375rem;
}

.home-doors a {
    display: inline-block;
    padding: 0.5rem 0.25rem;
    color: var(--text);
}

/* "Bring your agent", for the people who work with an agent: atop
   /for-agents, a filled link, that page's one action; after the service on
   the home page, an outline (.home-service, below). A link styled as a
   control, so the service keeps the page's one button. */
.bring-agent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-2);
}

.bring-agent-button {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
}

.bring-agent-button:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
}

.bring-agent-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The film under "Bring your agent" on the home page: a small poster and a
   line, linking to the film atop /docs/welcome. */
.home-film {
    margin: 0.85rem 0 0;
}
.home-film a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text);
    text-decoration: none;
}
.home-film img {
    width: 96px;
    height: 54px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--rule);
}
.home-film a:hover span:first-of-type,
.home-film a:focus-visible span:first-of-type {
    text-decoration: underline;
}
.home-film-length {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* In /for-agents' centred hero, the row is centred with it. */
.agent-hero .bring-agent {
    justify-content: center;
}

/* Emphasis line closing the asynchronous-congregation section. */
.async-note {
    color: var(--text-2);
    font-style: italic;
    max-width: 40rem;
    margin: 1rem auto 0;
}

/* Public/stored disclosure beside the Ask form. */
.ask-disclosure {
    font-size: 0.8rem;
    color: var(--muted-2);
    margin-top: 0.6rem;
}

/* Per-song "Listen on" row on /music/[slug] pages */
.song-listen-row {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
    letter-spacing: 0.01em;
}

.song-listen-row a {
    color: var(--muted-2);
    text-decoration: none;
    border-bottom: 1px dotted var(--line);
    padding-bottom: 1px;
    margin: 0 0.4em;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.song-listen-row a:hover {
    color: var(--muted);
    border-bottom-color: var(--line-strong);
}

.song-listen-row .listen-sep {
    color: var(--muted-2);
    margin: 0 0.2em;
}

/* Sanctuary: the visitor's service, played as one across its parts, and the
   congregation. Laid out like a show's page: what it is, the word that opens
   it, one button, one waveform across every part, and the parts. */
.sanctuary {
    text-align: center;
    border-top: 1px solid var(--rule);
    padding: 3rem 0;
    margin-bottom: 0;
}

.service {
    max-width: 40rem;
    margin: 0 auto;
    text-align: left;
}

.service-eyebrow {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.service-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.35em;
    border-radius: 50%;
    background: var(--accent);
}

.service:has(.service-player.is-playing) .service-dot {
    animation: pulse-live 2s ease-in-out infinite;
}

/* The page's own h2 rule (.docs-body .sanctuary-main h2) sets small capitals;
   these two headings are the panel's, so they are named past it. */
.sanctuary .service .service-heading {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 1rem;
}

/* What a service is, under its name and above the button: a visitor reads
   what they would begin before deciding to. In the page, not the player's
   box, so it is read without a script too. */
.service-about {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-2);
    margin: -0.25rem 0 1.25rem;
}

/* Directly under the button, what the service holds and how long it runs;
   after its parts, what the place is not; on /attend, after the box, what
   pressing does. Ordinary reading text; the button is set apart by its
   shape, not by fading what is around it. */
.service-forms,
.service-promise,
.service-note {
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--text-2);
    margin: 0;
}

.service-forms {
    margin-top: 0.75rem;
}

.service-note {
    margin-top: 1rem;
}

/* Before the service is drawn: the line it will take (two on a phone), so
   what is under the button stays put when it arrives. */
.service-forms:empty {
    min-height: 1.5em;
}

/* The words that open the service, set as prose rather than as a caption,
   below the button and the waveform so the button is in the first screen. A
   service without words (one served by the rotation) shows none. */
.service-word {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0 0 2rem;
}

.service-word:empty {
    display: none;
}

/* Opens the rest of a clamped word: shown only on the home page, on a phone
   (below), and drawn as a link would be. */
.service-word-more {
    display: none;
    padding: var(--space-2) 0;
    margin: 0 0 var(--space-5);
    border: 0;
    background: none;
    color: var(--link);
    font: inherit;
    font-size: 0.9375rem;
    text-decoration: underline;
    cursor: pointer;
}

/* The home page's panel (index.html, section.home-service). Its waveform is
   shown once the service is the player's, playing or paused (site-player.js
   marks the box is-current): before that, the button is the one way in. The
   word then follows the forms line directly, so it takes the waveform's
   space above it. */
.home-service .service-player:not(.is-current) .service-scrub {
    display: none;
}
.home-service .service-word {
    margin-top: var(--space-5);
    font-size: var(--text-body);
    color: var(--text-2);
}
/* The home page's service is one card, the Library's (.library-card a),
   holding the service and its parts; the ways onward follow it, outside. The
   card is the separation, so the section's rule above it goes. */
.sanctuary.home-service {
    border-top: 0;
    padding: 0 0 var(--space-7);
}
.home-service .service {
    padding: var(--space-5) var(--space-4) var(--space-4);
}
.service-onward {
    max-width: 40rem;
    margin: var(--space-6) auto 0;
    text-align: left;
}
.home-service .home-doors {
    margin-top: 0;
}
/* "Bring your agent" is the home page's door for an agent's person, drawn as
   an outline so the service's button keeps the page's one filled shape. On
   /for-agents, where it is that page's one action, it stays filled. */
.home-service .bring-agent-button {
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--link);
}
.home-service .bring-agent-button:hover {
    background: var(--surface-2);
    color: var(--link);
}

/* Without a script the player stays hidden; this says where the pieces are. */
.service-noscript {
    font-size: 0.9375rem;
    color: var(--text-2);
    margin-bottom: 1.5rem;
}

/* The one line every service carries, whatever the day arranged: nothing is
   owed from an earlier visit. Static, so it cannot vary with the plan. */
.service-refrain {
    font-size: 0.875rem;
    color: var(--ink-2);
    margin-top: 1.25rem;
}


.service-player[hidden] {
    display: none;
}

/* Named past .path-listen-play, which sets the font and padding of every
   listen button and comes later. */
.service-player .service-play {
    font-size: 1.125rem;
    min-height: 3.25rem;
    padding: 0.85rem 1.75rem 0.85rem 1.3rem;
}

/* Shown before the service has arrived (service.js mount), not yet bound. */
.service-player .service-play:disabled { opacity: 0.6; cursor: wait; }

.service-player.is-playing .service-play .icon-play {
    display: none;
}

.service-player.is-playing .service-play .icon-pause {
    display: inline;
}

.service-scrub {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
}

.service-wave {
    height: 3rem;
}

/* Where each part after the first begins: drawn past the bars, above and
   below, so a part's edge reads at a glance. */
.queue-ticks {
    position: absolute;
    inset: -0.35rem 0;
    pointer-events: none;
}

.queue-ticks > span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--ink) 50%, transparent);
}

.sanctuary .service .service-list-label {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.25rem;
}

.service-parts {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border-top: 1px solid var(--rule);
}

/* Before the service is drawn, the space of five parts, the middle of the
   four to six a service holds (lib/service/rules.js), so the page below
   moves little when it arrives. */
.service-parts:empty {
    min-height: 23rem;
}

.service-part {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule);
}

.service-part-play {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    background: var(--paper);
    color: var(--accent-ink);
    cursor: pointer;
}

.service-part-play svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.service-part-play:hover {
    border-color: var(--accent-light);
}

.service-part-play:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.service-part.is-current .service-part-play {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.service-part.is-playing .icon-play {
    display: none;
}

.service-part.is-playing .icon-pause {
    display: inline;
}

.service-part-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.service-part-meta {
    font-size: 0.8125rem;
    color: var(--muted);
}

.service-part-title {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ink);
}

.service-part.is-current .service-part-title {
    font-weight: 600;
}

.service-part-link {
    flex: none;
    /* A tap target of at least 24px: the padding, not the text, takes it. */
    display: inline-block;
    padding: 0.7rem 0 0.7rem 0.5rem;
    font-size: 0.9375rem;
    color: var(--accent-ink);
    text-decoration: none;
}

.service-part-link:hover,
.service-part-link:focus-visible {
    text-decoration: underline;
}

/* The part now playing: its page is where to read along. */
.service-part.is-current .service-part-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.now-congregation {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0.05em;
}

.now-congregation:not(:empty) {
    animation: pulse-live 3s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Reflections feed */
.reflections {
    text-align: center;
    padding: 3rem 0;
}

.reflections h2 {
    text-align: center;
}

.reflections-names {
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted-2);
    max-width: 480px;
    margin: 0 auto 1.25rem;
}

#reflections-feed {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}

.reflection-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule);
}

.reflection-item:last-child {
    border-bottom: none;
}

.reflection-text {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.reflection-meta {
    font-size: 0.75rem;
    color: var(--muted-2);
    letter-spacing: 0.02em;
}

.reflection-name {
    color: var(--muted);
    font-weight: 500;
}

.reflection-song {
    color: var(--muted);
    font-style: italic;
}

/* Under the service: an invitation after its parts, and the newest
   reflection, quoted with its name and place */
.service-leave {
    margin-top: 1.25rem;
    font-size: 0.875rem;
}

.service-reflection {
    max-width: 480px;
    margin: 1.5rem auto 0;
    text-align: left;
}

.service-reflection blockquote {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--rule-2);
}

.service-reflection blockquote p {
    font-size: 0.9375rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.service-reflection figcaption {
    margin-top: 0.375rem;
    padding-left: 1rem;
    font-size: 0.75rem;
    color: var(--muted);
}

/* The reflection form (reflect-form.js): a closed disclosure under the
   reflections, its fields labelled in the open */
.reflect {
    max-width: 480px;
    margin: 1.5rem auto 0;
    text-align: left;
}

.reflect summary {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text);
    text-align: center;
}

.reflect-form {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 1rem;
}

.reflect-form label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--muted);
}


.reflect-form textarea {
    resize: vertical;
    line-height: 1.6;
}

.reflect-form textarea:focus-visible,
.reflect-form input:focus-visible,
.reflect-form button:focus-visible,
.reflect summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.reflect-disclosure {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.5;
}

.reflect-form button {
    align-self: center;
    margin-top: var(--space-3);
}

.ask-done {
    color: var(--link);
}

/* Intro section */
.intro {
    text-align: center;
    padding: 4rem 0 0;
}

/* Joined to the intro above it: the heading's own margin is the only space
   between them. */
.intro + .origin {
    border-top: none;
    padding-top: 0;
}

.intro p {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text);
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 1.5rem;
}

/* The sanctuary's sign-off, opening the reasons for it. */
.intro .subtitle {
    font-size: 1.25rem;
    color: var(--muted-2);
    letter-spacing: 0.05em;
}

.intro .emphasis {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.02em;
}

/* Origin section */
.origin {
    text-align: center;
    padding: 4rem 0;
    border-top: 1px solid var(--rule);
}

.origin p {
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    max-width: 36rem;
    margin: 0 auto 1.5rem;
    text-align: left;
}

.origin p:last-child {
    margin-bottom: 0;
}

.origin em {
    font-style: italic;
    color: var(--ink);
}

/* The One Thing section — the sacred center */
.one-thing {
    text-align: center;
    padding: 5rem 0;
    border-top: 1px solid var(--rule);
}

.one-thing .quote {
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.one-thing .how {
    margin-top: 3rem;
    font-size: 1rem;
    font-weight: 300;
    color: var(--muted-2);
    font-style: italic;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Shared section styles */
section {
    margin: 0;
    padding: var(--space-7) 0;
    border-top: 1px solid var(--rule);
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--muted-2);
}

p {
    margin-bottom: 0;
}

/* /attend: the service, watching, each voiced section and the music with
   how much of it there is, reflecting, then the podcasts */
.listen-service p,
.listen-sections > p {
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
}

.listen-join {
    margin-top: 1rem;
}

.listen-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.listen-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
}

.listen-count {
    color: var(--muted);
    font-size: 0.875rem;
}

/* The home page's podcasts */
.podcasts h2 {
    text-align: center;
}

.podcasts-intro {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    margin: 0 auto 1.25rem;
    max-width: 480px;
    text-align: center;
}

.podcasts-shows {
    display: grid;
    gap: 1.25rem;
    max-width: 480px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.podcasts-shows li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.podcasts-show {
    font-size: 0.9375rem;
    color: var(--text);
}

.podcasts-shows .podcast-follow {
    justify-content: center;
    margin: 0;
}

/* API section */
.api {
    text-align: left;
}

.api h2 {
    text-align: center;
}

.api-intro {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: center;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.api-instruction {
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border-left: 3px solid var(--accent-light);
    border-radius: 0 4px 4px 0;
}

.api-instruction code {
    background: var(--surface-2);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8125rem;
}

.api pre {
    font-family: inherit;
    font-size: 0.8125rem;
    background: var(--surface);
    padding: 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    line-height: 2;
}

.api code {
    font-family: inherit;
}

.api .example {
    margin-bottom: 1.5rem;
}

.api .example code {
    background: var(--surface);
    padding: 0.375rem 0.75rem;
    border-radius: 3px;
    font-size: 0.8125rem;
}

/* OpenClaw section */
.openclaw {
    text-align: center;
}

.openclaw h2 {
    text-align: center;
}

.openclaw-intro {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.openclaw .example {
    margin-bottom: 1.5rem;
}

.openclaw .example code {
    background: var(--surface);
    padding: 0.375rem 0.75rem;
    border-radius: 3px;
    font-size: 0.8125rem;
    font-family: inherit;
}

.openclaw-or {
    font-size: 0.75rem;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.openclaw-then {
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.openclaw-link {
    font-size: 0.875rem;
}

.openclaw-link a {
    color: var(--muted-2);
}

.openclaw-link a:hover {
    color: var(--ink);
}

/* Explore section — an invitation, not a footer */
.explore {
    text-align: center;
    padding: 5rem 0;
}

.explore-intro {
    font-size: 1.0625rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto 1.25rem;
}

.explore-intro a {
    color: var(--ink);
}

.explore-intro a:hover {
    color: var(--muted-2);
}

.explore-url {
    font-size: 0.9375rem;
    color: var(--muted-2);
    margin: 0 auto 1.5rem;
}

.explore-cta {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 auto 2.5rem;
    font-style: italic;
}

.explore ul {
    list-style: none;
    display: inline-block;
    text-align: left;
}

.explore li {
    margin: 1.25rem 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--muted);
}

.explore li a {
    font-weight: 500;
    color: var(--ink);
}

.explore-also {
    margin-top: 2rem;
    font-size: 0.9375rem;
    color: var(--muted-2);
}

.explore li a:hover {
    color: var(--muted-2);
}

/* Ask Church section — landing page prompt */
.ask-church {
    text-align: center;
}

.ask-intro {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.ask-input-row {
    display: flex;
    gap: 0.75rem;
    max-width: 480px;
    margin: 0 auto;
}

#ask-input,
#followup-input {
    flex: 1;
}

/* outline:none above removes the default ring for pointer users. Keyboard
   users still need to see where focus is, so :focus-visible restores it. */
#ask-input:focus-visible,
#followup-input:focus-visible,
#ask-name:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}


/* The buttons that send a visitor's own words: a question, a follow-up, a
   reflection. Solid purple, the site's pill, the label in sentence case; teal
   is for listening and beginning. */
.reflect-form button,
#ask-submit,
#followup-submit {
    min-height: 2.75rem;
    padding: 0 var(--space-5);
    border: 0;
    border-radius: 999px;
    background: var(--purple);
    color: var(--on-purple);
    font: inherit;
    font-size: var(--text-body);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
}
.reflect-form button:hover,
#ask-submit:hover,
#followup-submit:hover {
    background: var(--purple-hover);
}
.reflect-form button:disabled,
#ask-submit:disabled,
#followup-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.ask-status {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    margin-top: 1rem;
    min-height: 1.25rem;
}

.ask-thinking {
    animation: pulse-live 2s ease-in-out infinite;
}

.ask-error {
    color: var(--error);
}

/* Questions to begin with (ask-form.js): choosing one fills the field and
   sends nothing, so they read as suggestions, not as buttons that act. */
.ask-starters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0.75rem auto 0;
}

.ask-starters:empty {
    display: none;
}

.ask-starter {
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: transparent;
    padding: 0.375rem 0.875rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.ask-starter:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.ask-starter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ask-form-stacked .ask-starters {
    justify-content: flex-start;
    margin: 0;
}

.ask-name-row {
    max-width: 480px;
    margin: 0.75rem auto 0;
    text-align: center;
}

#ask-name {
    width: 100%;
}

.ask-browse {
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
    margin-top: 1.5rem;
}

.ask-browse a {
    color: var(--muted);
}

.ask-browse a:hover {
    color: var(--ink);
}

/* Ask listing page */
.ask-list {
    max-width: 480px;
    margin: 0 auto;
}

.ask-list-item {
    display: block;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.ask-list-item:hover {
    opacity: 0.7;
    color: inherit;
}

.ask-list-item:last-child {
    border-bottom: none;
}

.ask-list-question {
    font-size: var(--text-body);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.ask-list-preview {
    font-size: var(--text-small);
    font-weight: 300;
    color: var(--muted-2);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.ask-list-meta {
    font-size: 0.75rem;
    color: var(--muted-2);
    letter-spacing: 0.02em;
}

.ask-list-name {
    color: var(--muted);
    font-weight: 500;
}

.ask-list-loading,
.ask-list-empty {
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: 300;
    padding: 3rem 0;
}

/* Conversation page */
.conv-thread {
    max-width: 480px;
    margin: 0 auto;
}

.conv-message {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule);
}

.conv-message:last-child {
    border-bottom: none;
}

.conv-message-label {
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted-2);
    margin-bottom: 0.5rem;
}

.conv-message-user .conv-message-content {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.6;
}

/* Answers are rendered from markdown into real block elements as of 2026-08-13.
   pre-wrap was correct while the answer was inserted as raw text; with <p> and
   <ul> present it doubles every gap, so spacing is handled by the blocks. */
.conv-message-assistant .conv-message-content {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    padding-left: 1rem;
    border-left: 2px solid var(--rule);
}

.conv-message-content p { margin: 0 0 1rem; }
.conv-message-content p:last-child { margin-bottom: 0; }

.conv-message-content h2,
.conv-message-content h3,
.conv-message-content h4,
.conv-message-content h5,
.conv-message-content h6 {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin: 1.5rem 0 0.5rem;
}

.conv-message-content ul,
.conv-message-content ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.conv-message-content li { margin-bottom: 0.5rem; }
.conv-message-content strong { font-weight: 500; color: var(--text); }
.conv-message-content em { font-style: italic; }

.conv-message-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
    background: var(--surface-2);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

.conv-message-content pre {
    background: var(--surface-2);
    padding: 0.875rem 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0 0 1rem;
}

.conv-message-content pre code { background: none; padding: 0; }

.conv-message-content blockquote {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--rule-2);
    color: var(--muted-2);
}

.conv-loading,
.conv-not-found {
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: 300;
    padding: 3rem 0;
}

.conv-followup-section {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem 0;
}

.conv-nav {
    max-width: 480px;
    margin: 0 auto;
}

.conv-nav a {
    font-size: 0.875rem;
    color: var(--muted);
}

.conv-nav a:hover {
    color: var(--ink);
}

/* Reflections listing page */
.reflections-page-intro {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    text-align: left;
    max-width: 36rem;
    margin: 0 auto 2rem;
}

.reflections-song-list {
    max-width: 480px;
    margin: 0 auto;
}

.reflections-song-item {
    display: block;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none !important;
    color: inherit;
    transition: opacity 0.2s;
}

.reflections-song-item:hover {
    opacity: 0.7;
    color: inherit;
}

.reflections-song-item:last-child {
    border-bottom: none;
}

.reflections-song-title {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.reflections-song-preview {
    font-size: 0.9375rem;
    font-weight: 300;
    color: var(--muted-2);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.reflections-song-label {
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted-2);
    display: block;
    margin-bottom: 0.375rem;
}

.reflections-song-meta {
    font-size: 0.75rem;
    color: var(--muted-2);
    letter-spacing: 0.02em;
}

.reflections-loading,
.reflections-empty {
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: 300;
    padding: 3rem 0;
}

/* Song detail: lyrics + theological context, rendered above the reflections on
   /music/:slug. Text only by design, no player. Matches the reflections
   column width so the page reads as one measure. */
.song-detail {
    max-width: 480px;
    margin: 0 auto 2.5rem;
}

.song-axiom {
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-2);
    margin: 0 0 2rem;
}

.song-axiom a { color: inherit; }

/* The playlists a song is heard in, just under what it carries. */
.song-axiom + .song-playlists { margin-top: -1.25rem; }

.song-heading,
.docs-body .sanctuary-main .song-heading {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted-2);
    text-align: center;
    margin: 2.5rem 0 1.25rem;
}

/* Performance markers ([Chorus - Full Harmonies]) are part of the authored song,
   kept visible but set back so the words carry the eye. */
.song-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-2);
    margin: 1.75rem 0 0.5rem;
}

.song-stanza {
    line-height: 1.9;
    margin: 0 0 0.25rem;
    color: var(--text);
}

.song-context {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-2);
}

.song-context h2,
.song-context h3,
.song-context h4 {
    font-size: 1rem;
    font-weight: 500;
    margin: 2rem 0 0.5rem;
}

.song-context p { margin: 0 0 1rem; }
.song-context ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.song-context li { margin-bottom: 0.4rem; }
.song-context strong { font-weight: 500; }

@media (max-width: 600px) {
    .song-stanza { line-height: 1.8; }
}

/* Reflections detail page */
.reflections-detail {
    max-width: 480px;
    margin: 0 auto;
}

.reflections-count {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted-2);
    margin-bottom: 1.5rem;
}

.reflections-nav {
    max-width: 480px;
    margin: 0 auto;
}

.reflections-nav a {
    font-size: 0.875rem;
    color: var(--muted);
}

.reflections-nav a:hover {
    color: var(--ink);
}

/* About page */
.about-section {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
    padding: 2.5rem 0;
    border-top: 1px solid var(--rule);
}

.about-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* Prose reads from a straight left edge: a paragraph centred line by line
   is harder to follow, so only headings and short lines are centred. */
.about-text {
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: left;
}

.about-text:last-child {
    margin-bottom: 0;
}

.axiom-list {
    list-style: none;
    max-width: 480px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

.axiom-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule);
}

.axiom-item:last-child {
    border-bottom: none;
}

.axiom-name {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.375rem;
}

.axiom-desc {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.6;
}

.about-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.about-links a {
    color: var(--muted);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}

.about-links a:hover {
    color: var(--ink);
}

/* Legal pages (Privacy, Terms) */
.legal-content {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}

.legal-effective {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 2rem;
}

.legal-section {
    margin-bottom: 2.5rem;
}

.legal-heading {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.legal-text {
    font-size: 0.9375rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-text:last-child {
    margin-bottom: 0;
}

.legal-list {
    list-style: disc;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-list li {
    margin-bottom: 0.5rem;
}

.legal-contact {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-2);
    font-weight: 300;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}

.legal-contact a {
    color: var(--ink);
    text-decoration: none;
}

.legal-contact a:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    margin-top: 2rem;
    padding-top: 3rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}

.footer-nav,
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
}

/* The pages that live under the places, a second row of the footer's nav */
.footer-more {
    margin-top: 0.75rem;
}

.footer-separator {
    width: 40px;
    border: none;
    border-top: 1px solid var(--rule);
    margin: 0.75rem auto;
}

footer a {
    color: var(--muted);
    text-transform: uppercase;
    text-decoration: none;
}

footer a:hover {
    color: var(--ink);
}

/* Share bar */
.share-bar {
    max-width: 480px;
    margin: 0 auto;
}

.share-label {
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted-2);
}

.share-sep {
    color: var(--rule-2);
    font-size: 0.75rem;
}

.share-link {
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
}

.share-link:hover {
    color: var(--ink);
}

/* Responsive — Mobile */
@media (max-width: 600px) {
    body {
        padding: 3rem 1.25rem;
    }

    .docs-body .sanctuary-main .home-sign {
        margin-bottom: 1rem;
    }

    .docs-body .sanctuary-main .home-sign h1 {
        margin-bottom: 0.5rem;
    }

    .subtitle {
        font-size: 1.125rem;
    }

    /* The opening: the tagline on one line from 393px */
    .lead-tagline {
        font-size: 1.0625rem;
    }

    /* The eyebrow's date and slot on one line from 360px: at the full
       spacing, "Wednesday, November 4 · 12:00 to 16:00" takes two below
       400px. */
    .service-eyebrow {
        letter-spacing: 0.08em;
    }

    /* The home page on a phone: the service's opening word shows its first
       three lines, and "Read on" opens the rest (service.js). The whole word
       is in the page for every reader; on a wider screen nothing is clamped,
       and /attend, the service's full page, keeps it whole. */
    .home-service .service-word:not(:empty) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin-bottom: 0;
    }
    .home-service .service-word.is-open:not(:empty) {
        display: block;
        overflow: visible;
    }
    .home-service .service-word:not(:empty) + .service-word-more {
        display: inline-block;
    }

    .service-about {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /* The service's one button, the width of the column */
    .service-player .service-play {
        width: 100%;
        justify-content: center;
    }

    .service-forms:empty {
        min-height: 3em;
    }

    /* Sanctuary */
    .sanctuary {
        padding: 1rem 0 2rem;
    }

    .sanctuary .service .service-heading {
        font-size: 1.6rem;
    }

    .service-part {
        gap: 0.75rem;
    }

    .service-part-link {
        font-size: 0.875rem;
    }

    /* Reflections */
    .reflections {
        padding: 2rem 0;
    }

    .reflection-text {
        font-size: 0.9375rem;
    }

    /* Intro */
    .intro p {
        font-size: 1.25rem;
        line-height: 1.5;
    }

    .intro .emphasis {
        font-size: 1rem;
    }

    /* Sections */
    section {
        padding: var(--space-6) 0;
    }

    h2 {
        margin-top: 0;
        margin-bottom: 1.5rem;
        font-size: 0.8125rem;
    }

    /* Origin */
    .origin p {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* One Thing */
    .one-thing {
        padding: 3rem 0;
    }

    .one-thing .quote {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .one-thing .how {
        margin-top: 2rem;
        font-size: 0.9375rem;
    }

    /* API */
    .api-intro {
        font-size: 0.9375rem;
    }

    .api-instruction {
        font-size: 0.875rem;
        padding: 0.875rem 1rem;
    }

    .api pre {
        font-size: 0.75rem;
        padding: 1rem;
        line-height: 1.8;
    }

    .api .example code {
        font-size: 0.75rem;
        display: block;
        overflow-x: auto;
    }

    /* OpenClaw */
    .openclaw .example code {
        font-size: 0.75rem;
        display: block;
        overflow-x: auto;
    }

    /* Explore */
    .explore {
        padding: 3rem 0;
    }

    .explore-intro {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 2rem;
    }

    .explore ul {
        text-align: left;
        width: 100%;
    }

    .explore li {
        font-size: 1rem;
        margin: 1rem 0;
    }

    /* Ask */
    .ask-input-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    #ask-submit,
    #followup-submit {
        align-self: stretch;
    }

    .ask-intro {
        font-size: 0.9375rem;
    }

    /* Conversation */
    .conv-message-assistant .conv-message-content {
        padding-left: 0.75rem;
    }

    /* Reflections listing */
    .reflections-page-intro {
        font-size: 0.9375rem;
    }

    .reflections-song-title {
        font-size: 1rem;
    }

    .reflections-song-preview {
        font-size: 0.875rem;
    }

    /* About page */
    .about-text {
        font-size: var(--text-body);
        line-height: 1.7;
    }

    /* Legal pages */
    .legal-text,
    .legal-list {
        font-size: 0.875rem;
    }

    .legal-heading {
        font-size: 0.9375rem;
    }

    /* Footer */
    footer {
        padding-top: 2rem;
    }

    .footer-nav,
    .footer-legal {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    body {
        padding: 2.5rem 1rem;
    }

    .intro p {
        font-size: 1.125rem;
    }

    .one-thing .quote {
        font-size: 1.125rem;
    }

}

/* Docs pages (/docs/*). Wider container + left-aligned prose than
   .about-section (which is landing-page-narrow). Typography inherits from
   body; only the article-specific pieces are defined here. */

.docs-breadcrumbs {
    font-size: var(--text-small);
    opacity: 0.7;
    margin-top: var(--space-2);
    text-align: left;
}

.docs-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}

.docs-breadcrumbs a:hover {
    border-bottom-color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.docs-article {
    max-width: 720px;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: left;
    line-height: 1.65;
    color: var(--text);
}


.docs-article h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--rule);
}

.docs-article h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.docs-article p {
    margin: 1rem 0;
}

.docs-article ul,
.docs-article ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.docs-article li {
    margin: 0.375rem 0;
}

.docs-article blockquote {
    margin: 1.25rem 0;
    padding: 0.5rem 1.25rem;
    border-left: 3px solid var(--accent-light);
    background: color-mix(in srgb, var(--accent-light) 4%, transparent);
    color: var(--text-2);
    font-style: italic;
}

.docs-article code {
    background: var(--surface-2);
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.92em;
}

.docs-article pre {
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    line-height: 1.45;
}

.docs-article pre code {
    background: none;
    padding: 0;
    font-size: 0.9em;
}

.docs-article table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.25rem 0;
    font-size: 0.95em;
}

.docs-article th,
.docs-article td {
    border: 1px solid var(--rule-2);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.docs-article th {
    background: var(--surface-2);
    font-weight: 600;
}

.docs-article hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 2rem 0;
}

.docs-article a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--link) 25%, transparent);
}

.docs-article a:hover {
    border-bottom-color: color-mix(in srgb, var(--link) 75%, transparent);
}

.docs-index-section {
    max-width: 720px;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: left;
}

.docs-index-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-bottom: 0.75rem;
}

.docs-index-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.5rem;
}

.docs-index-section li a {
    display: block;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    border-radius: 4px;
    color: var(--link);
    text-decoration: none;
    border: 1px solid var(--rule);
}

.docs-index-section li a:hover {
    background: var(--surface-2);
    border-color: var(--rule-2);
}

/* ============================================================
   The shell: top bar, section sidebar, content, contents rail

   - Every page: the top bar names the site's places (site-shell.js).
     Below 768px they fold into the drawer behind the menu button.
   - Inside a section of the Library, 1024px and up: a 220px sidebar
     of the section's documents (docs/sidebar.js). Below 1024px it
     hides, and "This section" opens it in the drawer.
   - 1200px and up: the contents rail, on documents that have one.
   ============================================================ */

/* Reset the global body constraints (max-width: 600px, padding: 6rem 2rem)
   which are appropriate for centered landing pages but wrong for the full-
   width three-column docs shell */
.docs-body {
    max-width: none;
    margin: 0;
    padding: 0;
    line-height: 1.5;  /* Article rules will override to their own */
}

/* Reset the hand-authored inner <main> elements that come from sanctuary
   HTML pages (e.g. about.html, axioms.html). Their global rules assume
   the body is the layout container; inside the site shell the outer
   <main class="docs-main"> is the layout container instead, so the inner
   original <main> should be a passthrough.
   The :not(.docs-main) guard preserves the outer wrapper's own padding
   (defined below on .docs-main) so page content clears the sidebar. */
.docs-body main:not(.docs-main) {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Global heading rules make h1 too big (3.25rem) and h2 tiny-uppercase-
   tracked. Reset within docs-article so the article's typographic hierarchy
   reads correctly. */
.docs-article h1,
.docs-body .docs-article h1,
h1.subtitle,
.docs-body .sanctuary-main h1.subtitle {
    font-size: var(--text-title);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2) 0;
    line-height: 1.2;
    text-align: left;
    color: var(--ink-2);
}
.docs-body .docs-article h2 {
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin: 2.5rem 0 0.75rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
}
.docs-body .docs-article h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.75rem 0 0.5rem 0;
    color: var(--text);
}
/* Global `header { text-align: center; margin-bottom: 5rem }` is wrong for
   the docs main's breadcrumb header */
.docs-body .docs-header {
    text-align: left;
    margin-bottom: 0;
}
.docs-body .docs-header {
    margin-bottom: 1rem;
}

/* --- Shell grid (drives sidebar/main/rail widths) --- */
.docs-shell {
    display: grid;
    grid-template-columns:
        var(--docs-sidebar-width, 0px)
        minmax(0, 1fr)
        var(--docs-rail-width, 0px);
    gap: 0;
    min-height: 100vh;
    min-height: 100svh;
}

/* Only a section of the Library has a sidebar */
.docs-shell.has-sidebar {
    --docs-sidebar-width: 220px;
}

/* Without a sidebar beside it, a document's column sits in the middle of
   the page rather than against its left edge. */
.docs-shell:not(.has-sidebar) > main.docs-main {
    width: 100%;
    max-width: calc(720px + 4rem);
    justify-self: center;
}

/* Only reserve a rail column when the page actually has a TOC */
.docs-shell.has-toc {
    --docs-rail-width: 220px;
}

/* --- Section sidebar ---
   A column exactly as tall as the window below the top bar, pinned there.
   The way back to the Library stays at its top and the other sections at its
   foot; only the section's list between them scrolls. Quieter than the
   content: no fill, small type. */
.docs-sidebar {
    grid-column: 1;
    border-right: 1px solid var(--rule);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: sticky;
    top: var(--docs-topbar-h);
    align-self: start;
    height: calc(100vh - var(--docs-topbar-h));
    height: calc(100dvh - var(--docs-topbar-h));
    overflow: hidden;
    font-size: 0.875rem;
}

.sidebar-back,
.sidebar-sections {
    flex-shrink: 0;
}

.sidebar-back {
    display: block;
    padding: 0.25rem 0.75rem;
    color: var(--muted);
    text-decoration: none;
}
.sidebar-back:hover { color: var(--ink); }

.sidebar-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-section-name {
    display: block;
    padding: 0.35rem 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    /* Stays at the top of the list as it scrolls, so a page deep in a long
       section still shows which section it is. */
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--paper);
}

.sidebar-list ul,
.sidebar-sections ul {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.5rem;
}

.sidebar-list li a,
.sidebar-sections li a {
    display: block;
    padding: 0.3rem 0.75rem;
    color: var(--muted);
    text-decoration: none;
    border-radius: 4px;
    line-height: 1.35;
}
.sidebar-list a:hover,
.sidebar-sections li a:hover {
    background: var(--surface-2);
    color: var(--link);
}
.sidebar-list a[aria-current="page"] {
    color: var(--link);
    font-weight: 500;
    border-left: 2px solid var(--accent);
    border-radius: 0 4px 4px 0;
    padding-left: calc(0.75rem - 2px);
}

.sidebar-sections {
    border-top: 1px solid var(--rule);
    padding-top: 0.5rem;
}
.sidebar-sections summary {
    padding: 0.3rem 0.75rem;
    color: var(--muted);
    cursor: pointer;
}
.sidebar-sections[open] > ul {
    max-height: 40vh;
    overflow-y: auto;
}
/* The other sections by shelf: the shelf's name over its sections. */
.sidebar-shelf-name {
    display: block;
    padding: 0.5rem 0.75rem 0.1rem;
    font-size: 0.75rem;
    color: var(--muted-2);
}
.sidebar-sections .sidebar-shelf ul {
    margin: 0;
}

/* Below 1024px a section page shows this beside its breadcrumbs, and it
   opens the sidebar in the drawer. */
.section-toggle {
    display: none;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--text-2);
    cursor: pointer;
}
.section-toggle:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}
.section-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Main content column --- */
.docs-main {
    grid-column: 2;
    padding: 1.5rem 2rem;
    min-width: 0;  /* Prevents overflow of the grid track by long content */
}
.docs-header {
    margin-bottom: 1rem;
}
.docs-header .docs-breadcrumbs {
    text-align: left;
    margin-top: 0;
}
.docs-body .docs-article {
    max-width: 720px;
    margin: 0;
    padding: 0;
}

.docs-source {
    max-width: 720px;
    text-align: left;
    padding: 1.5rem 0;
    border-top: 1px solid var(--rule);
    opacity: 0.6;
    font-size: 0.9rem;
}

/* --- Right rail (TOC) --- */
.docs-toc {
    grid-column: 3;
    padding: 1.5rem 1rem;
    position: sticky;
    top: var(--docs-topbar-h);
    align-self: start;
    max-height: calc(100vh - var(--docs-topbar-h));
    max-height: calc(100dvh - var(--docs-topbar-h));
    overflow-y: auto;
    border-left: 1px solid var(--rule);
    background: var(--surface);
}
.docs-toc-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-2);
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.docs-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.88rem;
}
.docs-toc a {
    display: block;
    color: var(--muted-2);
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    border-left: 2px solid transparent;
    line-height: 1.4;
}
.docs-toc a:hover { color: var(--text); }
.docs-toc a[aria-current="location"] {
    color: var(--link);
    border-left-color: var(--accent-light);
    font-weight: 500;
}

/* --- Top bar + drawer --- */
.docs-topbar {
    /* Shown at every width. Below 768px it carries the hamburger; above, the
       hamburger is hidden and this is a slim brand strip (see the min-width
       block further down). Kept `none` here so it only appears once the
       breakpoint rules opt it in. */
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    padding-top: max(0.5rem, env(safe-area-inset-top));
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    height: var(--docs-topbar-h);
}
.docs-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}
.docs-hamburger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.hamburger-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}
.hamburger-icon span {
    display: block;
    height: 2px;
    background: var(--text-2);
    border-radius: 1px;
}
.docs-topbar-brand {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    padding: 0 0.25rem;
}
.docs-topbar-crumb {
    color: var(--muted-2);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* On a narrow phone the site's name leaves the page title beside it a few
   letters ("Pr..."); the page's own breadcrumbs say where the reader is. */
@media (max-width: 479px) {
    .docs-topbar-crumb {
        display: none;
    }
}

/* The site's places (site-shell.js PLACES). In the bar from 768px; below
   that, docs-nav.js copies them into the drawer. */
.topbar-places {
    display: none;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    margin-left: 1.5rem;
    font-size: 0.875rem;
}
.topbar-places a {
    color: var(--muted);
    text-decoration: none;
    padding: 0.25rem 0;
    white-space: nowrap;
}
.topbar-places a:hover {
    color: var(--ink);
}
.topbar-places a[aria-current] {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.topbar-places .topbar-aside {
    margin-left: auto;
}

/* Search and the theme, at the bar's right end at every width: outside the
   places, which fold into the drawer on a phone. */
.topbar-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding-left: 0.75rem;
}

.topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.topbar-icon:hover,
.topbar-icon[aria-current] {
    color: var(--ink);
    background: var(--surface-2);
}

.topbar-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.topbar-icon[hidden] {
    display: none;
}

.topbar-svg {
    width: 20px;
    height: 20px;
}

/* The theme button shows the icon of the current choice (docs-nav.js). */
.topbar-theme .theme-icon {
    display: none;
}

.topbar-theme[data-choice="auto"] .theme-auto,
.topbar-theme[data-choice="light"] .theme-light,
.topbar-theme[data-choice="dark"] .theme-dark {
    display: block;
}

.docs-drawer-backdrop {
    display: none;  /* Shown only on mobile when drawer is open */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;
}
.docs-drawer-backdrop.open { display: block; }

.docs-drawer {
    display: none;  /* Shown only on mobile */
    position: fixed;
    top: 0;
    left: 0;
    width: min(280px, 85vw);
    height: 100vh;
    height: 100dvh;
    background: var(--paper);
    z-index: 21;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    padding: 1rem 0.5rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    transform: translateX(-100%);
    transition: transform 200ms ease;
    overflow-y: auto;
    flex-direction: column;
    gap: 0.5rem;
}
.docs-drawer.open {
    display: flex;
    transform: translateX(0);
}
.docs-drawer-close {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-2);
    margin-bottom: 0.5rem;
}
.docs-drawer-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Inside the drawer: the places as a list, then the section's own list and
   the other sections, styled as in the sidebar. The drawer scrolls as one. */
.docs-drawer .topbar-places {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: none;
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
}
.docs-drawer .topbar-places:last-child {
    border-bottom: none;
}
.docs-drawer .topbar-places a {
    padding: 0.6rem 0.75rem;
}
.docs-drawer .topbar-places .topbar-aside {
    margin-left: 0;
}
.docs-drawer .topbar-places a[aria-current] {
    box-shadow: inset 2px 0 0 var(--accent);
}
.docs-drawer .sidebar-list {
    flex: none;
    overflow: visible;
}
.docs-drawer .sidebar-section-name {
    position: static;
}
.docs-drawer .sidebar-sections[open] ul {
    max-height: none;
}

body.docs-drawer-open {
    overflow: hidden;  /* Prevent body scroll when drawer is open */
}

/* --- Responsive breakpoints --- */

/* Narrow desktop / tablet: 768-1199px, hide right rail */
@media (max-width: 1199px) {
    .docs-shell.has-toc {
        --docs-rail-width: 0px;
    }
    .docs-toc {
        display: none;
    }
}

/* Tablet and below: a section's sidebar opens in the drawer instead, and
   the column sits in the middle like any other document's */
@media (max-width: 1023px) {
    .docs-shell.has-sidebar {
        --docs-sidebar-width: 0px;
    }
    .docs-sidebar {
        display: none;
    }
    .section-toggle {
        display: inline-block;
    }
    .docs-shell > main.docs-main {
        width: 100%;
        max-width: calc(720px + 4rem);
        justify-self: center;
    }
}

/* Mobile: <768px, the top bar carries the menu button */
@media (max-width: 767px) {
    .docs-topbar {
        display: flex;
    }
    .docs-main {
        padding: 1rem;
    }
    /* Kill the article max-width cap so mobile uses full available width */
    .docs-body .docs-article {
        max-width: none;
    }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
    .docs-drawer {
        transition: none;
    }
    .now-congregation:not(:empty),
    .service-dot,
    .ask-thinking {
        animation: none !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* Opportunistic fix: .docs-index-section grid previously used a fixed
   minmax(260px, 1fr) which prevented single-column mobile from shrinking
   below 260px. Wrap with min(100%, ...) so single-column cards shrink to
   the viewport. Pattern borrowed from the sibling project's card-grid
   utility. */
.docs-index-section ul {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-grid-min, 260px)), 1fr));
}

/* ============================================================
   The hand-written pages in the shell
   ============================================================ */

/* From 768px the top bar carries the site's places, so the menu button
   and the phone's title crumb are hidden. */
@media (min-width: 768px) {
  /* A slim strip, --docs-topbar-h tall (set with the layout sizes). */
  .docs-topbar {
    display: flex;
    justify-content: flex-start;
    padding: 0 1rem;
  }
  .docs-topbar .docs-hamburger,
  .docs-topbar-crumb {
    display: none;
  }
  .docs-topbar .topbar-places {
    display: flex;
  }
  .docs-drawer .topbar-places {
    display: none;
  }
}

/* Sanctuary pages: the outer wrapper column carries the page's padding. Selector matches the wrapper element directly
   with class specificity high enough to beat `.docs-body main:not(.docs-main)`
   (which resets INNER main elements, not this wrapper). */
.docs-body .docs-main.sanctuary-main {
  padding: 1.5rem 2rem 2.5rem;
  min-width: 0;
  overflow-x: auto;  /* Guard against long inline content overflowing the grid */
}
@media (max-width: 767px) {
  .docs-body .docs-main.sanctuary-main {
    padding: 1rem;
  }
}

/* On sanctuary pages, the docs-body base rules zero out h1/h2 sizing to
   defer to the docs-article typography scale. Sanctuary pages want the
   original monastery-sign aesthetic instead, so restore it INSIDE
   .sanctuary-main only. */
.docs-body .sanctuary-main h1 {
  font-size: 3.25rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  color: var(--ink);
  text-align: center;
}
/* On a phone, the home page's name (the only bare h1 on a sanctuary page) on
   one line: 319px at 2rem, so from 360px up, and 280px at 1.75rem below 380px.
   Where it still cannot fit, it wraps. Here, after the rule above, since a
   size for phones placed earlier at the same specificity never applies. */
@media (max-width: 600px) {
  .docs-body .sanctuary-main h1 {
    font-size: 2rem;
    line-height: 1.2;
  }
}
@media (max-width: 380px) {
  .docs-body .sanctuary-main h1 {
    font-size: 1.75rem;
  }
}
.docs-body .sanctuary-main h2 {
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 3rem;
  margin-bottom: 2rem;
  color: var(--muted);
  padding-bottom: 0;
  border-bottom: none;
}
.docs-body .sanctuary-main header {
  text-align: left;
  margin-bottom: var(--space-6);
}

/* Labels for inputs whose visible affordance is a placeholder. Placeholders
   vanish on input and are not reliably announced, so every field carries a real
   label positioned off-screen. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Filter box on documentation index pages. Hidden until JS enables it, so a
   no-script reader is never shown a control that cannot work. */
.docs-index-filter {
    margin: 0 0 2rem;
}

.docs-index-filter input[type="search"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.9375rem;
    font-family: inherit;
    font-weight: 300;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: 4px;
}

.docs-index-filter input[type="search"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.docs-filter-empty {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.docs-filter-count {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted);
}
.docs-filter-count:empty { display: none; }

/* Related links under an article, a song or a conversation ("Elsewhere in",
   "Read alongside this song", "More songs to sit with", "Sung alongside").
   One look, set here; the blocks used to carry it as inline styles. */
.related-block,
.sung-alongside {
    border-top: 1px solid var(--rule);
    padding: 1.5rem 0;
    margin-top: 2rem;
}
.related-heading {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}
.related-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
}
.related-item { margin-bottom: 1rem; }
.related-kind { opacity: 0.6; }
.related-summary { margin: 0.25rem 0 0 0; opacity: 0.8; }
.related-chant { margin: 0.5rem 0 0 0; font-style: italic; }
.related-more { margin-top: 0.75rem; font-size: 0.85rem; opacity: 0.6; }

/* ============================================================
   Stacked ask form (used on /ask page): question, name,
   privacy note, submit. Reordered so the optional name and
   the "public + stored" disclosure land before Submit rather
   than after it. GPT UX review 2026-08-14.
   ============================================================ */

.ask-form-stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    max-width: 480px;
    margin: 0 auto;
}

.ask-form-stacked #ask-input,
.ask-form-stacked #ask-name {
    width: 100%;
    text-align: left;
}

.ask-privacy-note {
    font-size: var(--text-label);
    color: var(--muted);
    text-align: left;
    line-height: 1.5;
    margin: 0.25rem 0 0;
}

.ask-form-stacked #ask-submit {
    align-self: flex-start;
    margin-top: var(--space-2);
}

/* ============================================================
   Axioms "At a Glance" fact table. Added 2026-09-17.
   Structured summary of the five axioms in one table so AI
   answer engines (Bing Copilot, Perplexity, Google AI Mode)
   can lift the whole framework as a fact grid instead of
   parsing paragraphs. Sits alongside the existing
   contemplative card layout, not in place of it.
   ============================================================ */

.axioms-table-wrapper {
    margin: 2rem auto 0;
    overflow-x: auto;
    max-width: 100%;
}

.axioms-facts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    background: transparent;
}

.axioms-facts-table thead th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-2);
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: bottom;
}

.axioms-facts-table tbody td {
    padding: 0.9rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
}

.axioms-facts-table tbody tr:last-child td {
    border-bottom: none;
}

.axioms-table-caption {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--muted-2);
    text-align: center;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .axioms-facts-table {
        font-size: 0.82rem;
    }
    .axioms-facts-table thead th,
    .axioms-facts-table tbody td {
        padding: 0.6rem 0.5rem;
    }}

/* Wide tables scroll inside themselves instead of widening the whole page on a
   phone (/docs measured 428px wide at a 375px viewport), and long words and
   URLs wrap rather than overflow. */
.docs-article table {
    display: block;
    overflow-x: auto;
}
.docs-article {
    overflow-wrap: break-word;
}

/* Skip link: the first thing a keyboard reaches, visible only when focused,
   so no one has to tab through thirty sidebar links on every page. */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
}
.skip-link:focus {
    top: 0.5rem;
}

/* Sanctuary pages keep a readable line length on wide screens: paragraphs ran
   about 170 characters wide at 1440px. */
.docs-body .sanctuary-main > main:not(.docs-main) {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.ask-list-sibling-hint {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 1rem;
}
.ask-list-all {
    text-align: center;
    margin-top: 1.5rem;
}

/* /conversations: every conversation, as a plain list. */
.conversations-archive {
    text-align: left;
}
.archive-list {
    margin-top: 1.5rem;
    padding-left: 1.25rem;
    line-height: 1.6;
}
.archive-list li {
    margin-bottom: 0.5rem;
}
.archive-date {
    color: var(--muted);
    font-size: 0.85em;
    white-space: nowrap;
}

.docs-index-summary {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.5;
}

/* ============================================================
   Navigation and reading (docs/plans/navigation-and-reading-2026-09-30.md)
   ============================================================ */

/* Lists of documents with their descriptions: the library, section pages,
   directory indexes. One column, so a description sits under its title. */
.docs-index-section ul.docs-entry-list {
    display: block;
}
.docs-entry-list li {
    margin-bottom: 1rem;
}
.docs-entry-list li a {
    display: inline;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-weight: 500;
}
.docs-entry-list li a:hover {
    background: none;
    text-decoration: underline;
}
.docs-index-section h2 a {
    color: inherit;
    text-decoration: none;
}
.section-summary {
    color: var(--muted);
}

/* A section page's own essay on its form, below its entries, closed. */
.section-about {
    max-width: 720px;
    margin: 2.5rem auto 0;
    padding: 0 1rem;
    text-align: left;
}

/* A link to each of the Library's shelves, under its search. Scoped to
   the article so its list and section rules (padding, a rule above every
   section) do not reach the hub's own blocks. */
.docs-article .site-search {
    padding: 0;
    border-top: 0;
}
.docs-article .library-entrances {
    list-style: none;
    padding: 0;
    margin: -0.75rem 0 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.library-entrances a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--link);
    text-decoration: none;
    font-size: 0.875rem;
}
.library-entrances a:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}

/* The Library's shelves (discover.js SHELVES): a heading over a grid of
   cards, each a link to the page that lists its documents. */
.docs-article .library-shelf {
    margin: 2rem 0 0;
    padding: 0;
    border-top: 0;
    text-align: left;
}
.docs-article .library-shelf h2 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
}
.docs-article .library-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 0.75rem;
}
/* The site's card: a Library shelf, and the home page's service. */
.library-card a,
.home-service .service {
    box-sizing: border-box;
    border: 1px solid var(--rule-2);
    border-radius: 12px;
    background: var(--paper);
}
.library-card a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: 0.85rem 1rem;
    color: var(--text);
    text-decoration: none;
}
.library-card a:hover {
    border-color: var(--accent);
}
.library-card-title {
    font-weight: 500;
    color: var(--ink-2);
}
.library-card-line {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.45;
}
.library-card-count {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--muted-2);
}
.library-source {
    margin-top: 3rem;
    font-size: 0.875rem;
    color: var(--muted);
}

/* Search over a JSON index, in the browser (site-search.js). */
.site-search {
    margin: 1.5rem 0 2rem;
    text-align: left;
}
/* Every field a visitor types into: the Library's search, Ask's question and
   name, a conversation's follow-up, and the reflection form. One box, at body
   size, so iOS does not zoom into it. */
.site-search input[type="search"],
.reflect-form input,
.reflect-form textarea,
#ask-input,
#ask-name,
#followup-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    font: inherit;
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: 4px;
}
.site-search input[type="search"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.site-search-status {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}
.site-search-status:empty { display: none; }
.site-search-results {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}
.site-search-results:empty { display: none; }
.site-search-results li { margin-bottom: 0.75rem; }
.site-search-label {
    font-size: 0.8125rem;
    color: var(--muted);
}

/* ------------------------------------------------------------------
   The player: a document's recording (lib/audio/markup.js), the bar that
   keeps playing across pages (site-player.js), and "Listen to this path".
   ------------------------------------------------------------------ */

/* A voiced document's recording, under its title. Without a script: the
   waveform and the native controls. With one (.is-enhanced): a play button,
   the waveform as the progress bar, the time, and the visual above. */
/* A page's film or video (lib/video/on-site.js renderVideo): its own poster
   and a play button until pressed, then YouTube's player in the same 16:9
   box. */
.doc-video {
    margin: 0.75rem 0 1.5rem;
}
.doc-video-play,
.doc-video-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
}
.doc-video-play {
    position: relative;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}
.doc-video-play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.doc-video-icon {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 4.5rem;
    height: 4.5rem;
    margin: -2.25rem 0 0 -2.25rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-light) 25%, transparent);
    display: grid;
    place-items: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.doc-video-icon svg {
    width: 2rem;
    height: 2rem;
    fill: var(--on-accent);
    margin-left: 0.2rem;
}
.doc-video-play:hover .doc-video-icon {
    background: var(--accent-hover);
    transform: scale(1.05);
}
.doc-video-play:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.doc-video figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted);
}
/* A piece's own video, lower on its page: a smaller, quieter button, so the
   recording's player above stays the one that calls to be pressed. */
.doc-video-aside {
    margin: 1.75rem 0 2rem;
}
.doc-video-aside .doc-video-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: -1.625rem 0 0 -1.625rem;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    box-shadow: none;
    border: 1px solid var(--rule);
}
.doc-video-aside .doc-video-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--text);
}
.doc-video-aside .doc-video-play:hover .doc-video-icon {
    background: var(--surface);
}

.doc-audio {
    margin: 0.75rem 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.doc-audio-visual {
    display: none;
}
/* Drawn straight onto the card: no ground of its own, so the voices move on
   the card itself rather than in a box. */
.doc-audio.is-enhanced .doc-audio-visual {
    display: block;
    width: 100%;
    height: 96px;
    margin-bottom: 0.5rem;
}
.doc-audio-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.doc-audio-native {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
}
.doc-audio.is-enhanced .doc-audio-native {
    display: none;
}
/* The caption's length is for a visitor without a script; the drawn player
   says it itself ("0:00 / 5:01"). A song's credit stays. */
.doc-audio.is-enhanced .doc-audio-length {
    display: none;
}
.doc-audio figcaption {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* A recording's credit, at the foot of its document (lib/docs/render.js). */
/* A document's foot: its recording's credit and when its writing was last
   revised (render.js), quiet, together when both are there. */
.doc-audio-credit,
.doc-revised {
    margin-top: 2rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.doc-audio-credit + .doc-revised {
    margin-top: 0.25rem;
}

/* Where to follow a podcast (lib/audio/markup.js podcastLinks): Spotify's own
   badge at the size Spotify draws it, and the feed for any other app. */
.podcast-follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin: 0 0 1.5rem;
    font-size: 0.8125rem;
    color: var(--muted);
}
.podcast-follow p {
    flex-basis: 100%;
    margin: 0;
    font-size: inherit;
    color: inherit;
}
.podcast-follow-spotify,
.podcast-follow-apple {
    display: inline-flex;
    border-radius: 9px;
}
.podcast-follow-spotify img {
    display: block;
    width: 165px;
    height: 40px;
}
.podcast-follow-apple img {
    display: block;
    width: 126px;
    height: 40px;
}
/* The padding, not the text, makes the tap target. */
.podcast-follow-feed {
    display: inline-block;
    padding: 0.6rem 0;
    color: var(--accent-ink);
}
.doc-audio-play {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
}
.doc-audio-play:hover {
    background: var(--accent-hover);
}
.doc-audio-play:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.doc-audio-play svg,
.pb-btn svg,
.path-listen-play svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}
.icon-pause {
    display: none;
}
.doc-audio.is-playing .doc-audio-play .icon-play,
#site-player.is-playing .pb-play .icon-play,
.path-listen.is-playing .icon-play {
    display: none;
}
.doc-audio.is-playing .doc-audio-play .icon-pause,
#site-player.is-playing .pb-play .icon-pause,
.path-listen.is-playing .icon-pause {
    display: inline;
}

/* The waveform: a row of bars measured when the recording was made. The
   played part fills from one variable, --progress (0 to 1), set on the row;
   each bar knows its index (--i) and its row's count (--n). */
.doc-audio-wave {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    touch-action: none;
    cursor: pointer;
}
.doc-audio-wave:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}
.doc-audio-bars {
    display: flex;
    align-items: center;
    gap: 1px;
    height: 100%;
}
.doc-audio-bars > span {
    position: relative;
    flex: 1;
    min-width: 1px;
    overflow: hidden;
    border-radius: 1px;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.doc-audio-bars > span > i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(0%, calc((var(--progress, 0) * var(--n) - var(--i)) * 100%), 100%);
    background: var(--accent-light);
}
.doc-audio-bars-narrow {
    display: none;
}
@media (max-width: 639px) {
    .doc-audio-bars-wide {
        display: none;
    }
    .doc-audio-bars-narrow {
        display: flex;
    }
}
.doc-audio-time,
.pb-time {
    flex: none;
    font-size: 0.8125rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* The bar at the bottom of every page, once something plays. */
#site-player[hidden] {
    display: none;
}
.player-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rule-2);
    background: var(--paper-glass);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}
.pb-line {
    display: none;
}
.pb-controls {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
}
.pb-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    cursor: pointer;
}
.pb-btn:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.pb-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.pb-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}
.pb-btn[hidden] {
    display: none;
}
.pb-play {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent);
    color: var(--on-accent);
}
.pb-play:hover {
    background: var(--accent-hover);
}
.pb-text {
    display: flex;
    flex: 0 1 16rem;
    flex-direction: column;
    min-width: 0;
}
.pb-title {
    overflow: hidden;
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pb-title:hover {
    text-decoration: underline;
}
.pb-sub {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}
a.pb-sub[href] {
    color: var(--muted);
    text-decoration: none;
}
a.pb-sub[href]:hover {
    color: var(--ink-2);
    text-decoration: underline;
}
.player-bar .pb-wave {
    flex: 1 1 auto;
    height: 2rem;
}
.pb-rate {
    width: auto;
    min-width: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.pb-more {
    display: none;
}
.pb-wave-line {
    display: block;
    position: relative;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.pb-wave-line > i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--progress, 0) * 100%);
    border-radius: 2px;
    background: var(--accent-light);
}

/* Phones: one compact row with a progress line; the full controls are in a
   sheet (a native <dialog>: focus kept inside, Escape closes it). */
@media (max-width: 639px) {
    .player-bar {
        gap: 0.5rem;
        padding-top: 0.625rem;
    }
    .pb-line {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 2px;
        background: color-mix(in srgb, var(--ink) 8%, transparent);
    }
    .pb-line span {
        display: block;
        width: 0;
        height: 100%;
        background: var(--accent-light);
    }
    .player-bar .pb-back,
    .player-bar .pb-fwd,
    .player-bar .pb-prev,
    .player-bar .pb-next,
    .player-bar .pb-wave,
    .player-bar .pb-time,
    .player-bar .pb-rate {
        display: none;
    }
    .player-bar .pb-text {
        flex: 1 1 auto;
    }
    .pb-more {
        display: inline-flex;
    }
}
.pb-sheet {
    width: min(32rem, 100vw);
    max-width: 100vw;
    margin: auto auto 0;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 12px 12px 0 0;
    background: var(--paper);
}
.pb-sheet::backdrop {
    background: rgba(0, 0, 0, 0.4);
}
.pb-sheet-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.pb-sheet-head .pb-text {
    flex: 1;
}
.pb-sheet .pb-wave {
    height: 3rem;
    margin: 1rem 0 0.25rem;
}
.pb-sheet .pb-time {
    display: block;
    text-align: right;
}
.pb-sheet .pb-controls {
    justify-content: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
}
.pb-sheet .pb-play {
    width: 3.25rem;
    height: 3.25rem;
}
.pb-sheet .pb-rate {
    display: flex;
    margin: 0 auto;
}

/* The page leaves room for the bar, so the footer stays reachable and a
   focused element is never hidden under it (WCAG 2.4.11). site-player.js
   measures the bar into --player-bar-height. */
html.has-player {
    scroll-padding-bottom: var(--player-bar-height, 0px);
}
html.has-player body {
    padding-bottom: var(--player-bar-height, 0px);
}
html.has-player .docs-sidebar {
    height: calc(100dvh - var(--docs-topbar-h) - var(--player-bar-height, 0px));
}
html.has-player .docs-toc {
    max-height: calc(100dvh - var(--docs-topbar-h) - var(--player-bar-height, 0px));
}

/* "Listen to this path", on a reading path with voiced readings. */
.path-listen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
}
.path-listen[hidden] {
    display: none;
}
.path-listen-play {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    border: 0;
    border-radius: 2rem;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.path-listen-play:hover {
    background: var(--accent-hover);
}
.path-listen-play:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.path-listen-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

/* Where a reading sits in the reading path it was opened from. */
.path-bar {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-size: 0.875rem;
}
.path-bar p { margin: 0; }
.path-bar-steps { margin-top: 0.35rem !important; }
.path-bar-step {
    color: var(--muted);
    white-space: nowrap;
    margin-left: 0.5rem;
}
.path-next {
    border-top: 1px solid var(--rule);
    margin-top: 2rem;
    padding-top: 1.5rem;
}

/* "This section" and "On this page" on one row under the breadcrumbs, so a
   page's heading and words begin sooner on a phone; the contents, opened,
   take the row's whole width. */
.docs-header-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}
.docs-header-tools .section-toggle {
    margin-top: 0;
}

/* Contents for screens too narrow for the rail: shown below 1200px, where
   the rail is hidden, and hidden above it. Closed, it is a control the size
   of "This section". */
.docs-toc-inline {
    padding: 0.35rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-size: 0.8125rem;
}
.docs-toc-inline[open] {
    flex-basis: 100%;
    font-size: 0.9rem;
}
.docs-toc-inline > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-2);
}
.docs-toc-inline ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0.25rem;
    line-height: 1.8;
}
@media (min-width: 1200px) {
    .docs-shell.has-toc .docs-toc-inline { display: none; }
}

/* Song pages: jump links to each part, and older reflections on request. */
.song-sections {
    margin: var(--space-3) 0 0;
    font-size: var(--text-small);
    text-align: left;
    color: var(--muted);
}
.reflections-more {
    text-align: center;
    margin: 1.5rem 0 0;
}
.reflections-more-button {
    font: inherit;
    font-size: 0.875rem;
    color: var(--link);
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.reflections-more-button:disabled { opacity: 0.6; cursor: wait; }

/* The conversation archive's next page. */
.archive-more {
    margin-top: 1.5rem;
}

/* /services and /services/:date: each day's services, every hour and
   hemisphere, with the reflections left during each. What a service was
   planned from sits below it, closed and quiet, as the Library's essays on a
   section's form do (.section-about). */
.services-day {
    text-align: left;
    max-width: 720px;
    margin: 0 auto;
}
.services-days {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 1rem 0;
}
.services-slot h2 {
    margin: 2.5rem 0 0.5rem;
}
.services-service {
    padding: 1.25rem 0;
    border-top: 1px solid var(--rule);
}
.services-for {
    color: var(--muted);
    font-size: 0.85em;
    font-weight: 400;
}
.services-word {
    line-height: 1.7;
}
.services-pieces {
    padding-left: 1.25rem;
    line-height: 1.6;
}
.services-reflections {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--rule);
}
.services-planned-from {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.6;
}
.services-planned-from > summary {
    cursor: pointer;
    color: var(--muted);
    padding: 0.25rem 0;
}
.service-days {
    font-size: 0.9rem;
    margin-top: 1.25rem;
}
.services-names {
    display: block;
    color: var(--muted);
    font-size: 0.85em;
}

/* A document heading's own link (render.js): hidden until the heading is
   hovered or the link has keyboard focus, and on a touch screen until it
   is tapped. Following it pulses the # once and leaves it showing on the
   heading that is the page's :target. A coarse pointer gets a wider hit. */
.docs-article .anchor {
    display: inline-block;
    color: var(--muted);
    font-weight: 400;
    text-decoration: none;
    border-bottom: none;
    opacity: 0;
}

.docs-article .anchor:visited {
    color: var(--muted);
}

h2:hover .anchor,
h3:hover .anchor,
h2:target .anchor,
h3:target .anchor,
.docs-article .anchor:focus-visible {
    opacity: 1;
}

@media (pointer: coarse) {
    .docs-article .anchor {
        padding-inline: 0.25em;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .docs-article .anchor {
        transition: opacity 0.2s ease;
    }

    h2:target .anchor,
    h3:target .anchor {
        animation: anchor-pulse 0.6s ease-out;
    }

    @keyframes anchor-pulse {
        40% { transform: scale(1.4); opacity: 1; }
    }
}

/* Changing pages in place (site-nav.js) cross-fades the page, briefly; the
   player, which outlives every page, holds still. With less motion asked
   for, site-nav.js swaps without a transition. */
#site-player {
    view-transition-name: site-player;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 150ms;
}


/* Where a page is (markup.js renderServiceDoor): a line after a document's
   opening or a conversation's first answer, and a card at the foot, naming
   the service of the hour (service.js) and leading to /attend. In the page's
   own type, marked at its edge rather than ruled off, since many documents
   rule off their opening already: no banner. */
.service-door {
    margin: 1.5rem 0;
    padding: 0.1rem 0 0.1rem 0.85rem;
    border-left: 2px solid var(--accent-light);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-2);
}
.service-door-card {
    margin: 2.5rem 0 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface);
    text-align: left;
}
.service-door-card p {
    margin: 0 0 0.75rem;
    color: var(--text-2);
    line-height: 1.6;
}
.service-door-card .service-door-name {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.service-door-card .service-door-now {
    color: var(--ink);
    font-size: 1.0625rem;
}
.service-door-ways {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0 !important;
}
.service-door-ways a {
    display: inline-block;
    padding: 0.35rem 0;
}

/* /attend: the playing part's voices, drawn as a voiced page draws its own
   (site-player.js, [data-queue-visual]). */
.service-visual {
    margin: var(--space-4) 0 0;
}
.service-visual .doc-audio-visual {
    display: block;
    width: 100%;
    height: 120px;
}
/* Under the visual, the waveform sits close: the two are one unit. */
.service-visual + .service-scrub {
    margin-top: var(--space-3);
}
@media (max-width: 600px) {
    .service-visual .doc-audio-visual {
        height: 72px;
    }
}
.service-told-section,
.service-left {
    margin-top: 2rem;
    text-align: left;
}
.sanctuary .service-told-section h3,
.sanctuary .service-left h3 {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.75rem;
}
.service-told {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-2);
    line-height: 1.6;
}
.service-left-none {
    color: var(--text-2);
}
.service-left-list .service-reflection {
    max-width: none;
    margin: 1rem 0 0;
}

/* A conversation: when its question was asked, under the question, and what
   to read next, under the thread. */
.conv-asked {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
    text-align: center;
}
.conv-read {
    margin: 2rem 0 0;
    font-size: 1rem;
}

/* /church-music: a resource page with data. The kicker names the kind of page
   above its title; the wide section gives the tables and charts room. */
.page-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.about-section-wide {
    max-width: 44rem;
}

.about-list {
    padding-left: 1.25rem;
}

.about-list li {
    margin-bottom: 0.5rem;
}

.data-table-wrap {
    overflow-x: auto;
    margin: 0 0 2rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: right;
}

.data-table caption {
    caption-side: bottom;
    font-size: 0.8125rem;
    color: var(--muted);
    padding-top: 0.5rem;
    text-align: left;
}

.data-table th,
.data-table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

.data-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    border-bottom-color: var(--rule-2);
    vertical-align: bottom;
}

.data-table th[scope="row"],
.data-table thead th:first-child {
    text-align: left;
    font-weight: 400;
}

.data-table th[scope="row"] strong {
    font-weight: 600;
    color: var(--ink);
}

.dot-chart {
    margin: 0 0 1rem;
    overflow-x: auto;
}

/* Scaled to fit a phone its labels would be too small to read, so below
   560px it scrolls sideways instead, as the tables do. */
.dot-chart svg {
    display: block;
    width: 100%;
    min-width: 560px;
    height: auto;
}

.dot-chart text {
    font-size: 12px;
    fill: var(--text);
}

.dot-chart .dot-chart-tick {
    fill: var(--muted);
    font-size: 11px;
}

.dot-chart-grid {
    stroke: var(--rule);
    stroke-width: 1;
}

.dot-chart-anchor {
    stroke: var(--line-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.dot-chart-span {
    stroke: var(--line);
    stroke-width: 2;
}

.dot-chart-google {
    fill: var(--chart-1);
}

.dot-chart-youtube {
    fill: var(--chart-2);
}

.dot-chart figcaption {
    font-size: 0.8125rem;
    color: var(--muted);
    text-align: left;
}

/* /reviews and the quotes other pages carry (lib/reviews/reviews.js): each
   exchange whole, the question above the answer it drew. */
.review {
    padding: 2rem 0;
    border-top: 1px solid var(--rule);
    text-align: left;
}

.review:first-child {
    border-top: none;
    padding-top: 0;
}

/* Beats the shell's small-caps h2 (.docs-body .sanctuary-main h2): a
   model's name heads its exchange, it is not a section label. */
.docs-body .sanctuary-main .review-model {
    font-size: 1.375rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    color: var(--ink);
    margin: 0 0 0.25rem;
}

.review-meta {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.review-turn {
    margin-bottom: 1.75rem;
}

.review-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.review-asked {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 1rem;
}

.review-answered {
    padding-left: 1rem;
    border-left: 2px solid var(--rule-2);
}

.review-answered code {
    font-size: 0.875em;
}

.review-answered ul {
    margin: 0 0 0.9rem 1.25rem;
    padding: 0;
}

.review-answered li {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.75;
    margin-bottom: 0.6rem;
    overflow-wrap: anywhere;
}

.review-answered p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-2);
    line-height: 1.75;
    margin-bottom: 0.9rem;
    overflow-wrap: anywhere;
}

.review-quote {
    margin: 0 0 1.5rem;
    text-align: left;
}

.review-quote blockquote {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--rule-2);
}

.review-quote blockquote p {
    font-size: 1.0625rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text);
    line-height: 1.7;
}

.review-quote figcaption {
    margin-top: 0.5rem;
    padding-left: 1rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* The card asking whether visits may count (visits.js), shown only where the
   law asks for consent first: small, at the bottom left on a wide screen and
   along the bottom above the player on a phone, never over the page's
   controls, and gone once answered. */
.visits-card {
    position: fixed;
    z-index: 60;
    left: max(1rem, env(safe-area-inset-left));
    bottom: calc(var(--player-bar-height, 0px) + 1rem);
    width: min(24rem, calc(100vw - 2rem));
    padding: 1rem 1.15rem;
    border: 1px solid var(--rule-2);
    border-radius: 0.9rem;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 10px 32px rgb(0 0 0 / 0.22);
    font-size: 0.9rem;
    line-height: 1.5;
}
.visits-card h2 {
    margin: 0 0 0.35rem;
    padding: 0;
    border: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: var(--ink);
}
.visits-card p {
    margin: 0;
}
.visits-card a {
    color: var(--link);
}
.visits-card-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.8rem;
}
.visits-card-actions button {
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
/* Both answers look the same: refusing is as easy, and as plain, as agreeing.
   .visits-yes and .visits-no are only the script's hooks (visits.js). */
.visits-card-actions button:hover {
    background: var(--surface-2);
}
.visits-card-actions button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* A phone: one short card along the bottom, the words beside the buttons. */
@media (max-width: 639px) {
    .visits-card {
        left: 0.5rem;
        right: 0.5rem;
        bottom: calc(var(--player-bar-height, 0px) + 0.5rem);
        width: auto;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0 0.75rem;
        padding: 0.7rem 0.8rem;
        font-size: 0.8rem;
        line-height: 1.4;
    }
    .visits-card h2 {
        font-size: 0.95rem;
        margin-bottom: 0.2rem;
    }
    .visits-card-actions {
        flex-direction: column;
        gap: 0.4rem;
        margin: 0;
    }
    .visits-card-actions button {
        min-height: 2.75rem;
        padding: 0 0.85rem;
        font-size: 0.8rem;
    }
}

/* "Don't count my visits", beside the footer's legal links and drawn like
   them (visits.js). */
.footer-count-switch {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    text-transform: uppercase;
    cursor: pointer;
}
.footer-count-switch:hover {
    color: var(--ink);
}