@font-face {
    font-family: "Lexend";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/lexend/lexend-latin-ext.woff2") format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Lexend";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/lexend/lexend-latin.woff2") format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/geist/geist-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/geist/geist-latin-ext.woff2") format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/geist/geist-latin.woff2") format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    color-scheme: dark;
    --bg: #000000;
    --bg-soft: #020203;
    --bg-strong: #06070a;
    --line: #13151a;
    --line-subtle: #0c0e12;
    --text: #f1f3f7;
    --text-secondary: #cfd4dd;
    --muted: #a1a7b2;
    --brand-rgb: 63, 56, 82;
    --brand-strong-rgb: 86, 77, 112;
    --brand: #3f3852;
    --brand-strong: #564d70;
    --brand-dim: rgba(63, 56, 82, 0.16);
    --brand-soft: rgba(63, 56, 82, 0.28);
    --brand-contrast: #f1f3f7;
    --interactive-hover-bg: #1e1e24;
    --interactive-hover-line: #2a2a32;
    --overlay-scrim: rgba(7, 6, 5, 0.78);
    --surface-inline-bg: rgba(255, 255, 255, 0.035);
    --search-offer-bg: linear-gradient(
        135deg,
        #211a31 0%,
        #171223 52%,
        #120f1b 100%
    );
    --search-offer-bg-active: linear-gradient(
        135deg,
        #2a2140 0%,
        #1b1528 52%,
        #14101d 100%
    );
    --search-offer-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(var(--brand-rgb), 0.08);
    --search-offer-shadow-active:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(var(--brand-rgb), 0.16);
    --service-offer-bg: linear-gradient(
        135deg,
        #1a1d24 0%,
        #141619 52%,
        #111214 100%
    );
    --service-offer-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(var(--brand-rgb), 0.08);
    --search-offer-title: #bcaeea;
    --search-offer-icon: #9f8bd8;
    --search-offer-accent: #9f8bd8;
    --search-offer-accent-strong: #bcaeea;
    --cap-card-bg: linear-gradient(135deg, #381b20 0%, #1e1114 100%);
    --cap-card-border: rgba(179, 107, 114, 0.34);
    --cap-card-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(179, 107, 114, 0.08);
    --cap-card-icon: #e2bcc0;
    --success-fg: #d7ecd8;
    --success-fg-strong: #b5dcc2;
    --warning-fg: #e2b087;
    --paper-shell-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    --grain-accent-rgb: 20, 18, 28;
    --grain-ambient-opacity: 0.055;
    --grain-surface-opacity: 0.065;
    --grain-paper-opacity: 0.092;
    --grain-ambient-blend: lighten;
    --grain-surface-blend: screen;
    --grain-paper-blend: multiply;
    --grain-size: 512px auto;
    --grain-ambient-filter: none;
    --grain-surface-filter: none;
    --grain-paper-filter: none;
    --text-muted: #999999;
    --page-scale: 0.9;
    --ok: #93bc9f;
    --bad: #c07c84;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /*
     * Brand lockup (mark + "Selah Tools"):
     * Lexend 600 measured cap/em ≈ 0.72 → font-size = mark / cap-em so
     * capital height equals the mark in every context. Home uses a larger
     * mark; the desktop header uses a smaller one; the ratio stays identical.
     */
    --rb-brand-cap-em: 0.72;
    --rb-brand-mark-home: 1.75rem;
    /* Inner-page brand: only slightly smaller than home (was 0.78rem / ~17px text). */
    --rb-brand-mark-header: 1.4rem;
    --rb-brand-gap-home: 0.75rem;
    --rb-brand-gap-header: 0.55rem;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f0eb;
    --bg-soft: #faf9f6;
    --bg-strong: #ebe8e3;
    --line: #d8cfbf;
    --line-subtle: #e8dfd1;
    --text: #241f19;
    --text-secondary: #5e554a;
    --muted: #7b7267;
    --brand-rgb: 255, 154, 92;
    --brand-strong-rgb: 239, 135, 71;
    --brand: #ff9a5c;
    --brand-strong: #ef8747;
    --brand-dim: rgba(255, 154, 92, 0.16);
    --brand-soft: rgba(255, 154, 92, 0.24);
    --brand-contrast: #fffaf4;
    --interactive-hover-bg: #e8dfd2;
    --interactive-hover-line: #cfc4b3;
    --overlay-scrim: rgba(74, 60, 42, 0.24);
    --surface-inline-bg: rgba(102, 86, 59, 0.06);
    --search-offer-bg: linear-gradient(
        135deg,
        #fff0e5 0%,
        #fbe6d7 52%,
        #f5dbc8 100%
    );
    --search-offer-bg-active: linear-gradient(
        135deg,
        #ffe7d5 0%,
        #f8dcc8 52%,
        #f1cfb8 100%
    );
    --search-offer-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        0 0 0 1px rgba(var(--brand-rgb), 0.08);
    --search-offer-shadow-active:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 0 0 1px rgba(var(--brand-rgb), 0.14);
    --service-offer-bg: linear-gradient(
        135deg,
        #fff2e8 0%,
        #f6e5d8 52%,
        #ecd8c8 100%
    );
    --service-offer-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 0 0 1px rgba(var(--brand-rgb), 0.08);
    --search-offer-title: #b35f2f;
    --search-offer-icon: #d97439;
    --search-offer-accent: #d97439;
    --search-offer-accent-strong: #b35f2f;
    --cap-card-bg: linear-gradient(135deg, #f1dfdd 0%, #e9d3d1 100%);
    --cap-card-border: rgba(179, 107, 114, 0.28);
    --cap-card-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 0 1px rgba(179, 107, 114, 0.06);
    --cap-card-icon: #a86f77;
    --success-fg: #416b4f;
    --success-fg-strong: #315a40;
    --warning-fg: #8b5d3e;
    --paper-shell-shadow:
        0 10px 24px rgba(85, 63, 35, 0.08), 0 1px 2px rgba(85, 63, 35, 0.05);
    --grain-accent-rgb: 20, 18, 28;
    --grain-ambient-opacity: 0;
    --grain-surface-opacity: 0;
    --grain-paper-opacity: 0;
    --grain-ambient-blend: normal;
    --grain-surface-blend: normal;
    --grain-paper-blend: multiply;
    --grain-size: 320px auto;
    --grain-ambient-filter: contrast(235%) brightness(46%);
    --grain-surface-filter: contrast(220%) brightness(52%);
    --grain-paper-filter: contrast(190%) brightness(62%);
    --text-muted: #746b60;
    --shadow-sm: 0 1px 2px rgba(85, 63, 35, 0.12);
    --shadow-md: 0 8px 20px rgba(85, 63, 35, 0.12);
    --shadow-lg: 0 18px 40px rgba(85, 63, 35, 0.16);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --bg: #f3f0eb;
        --bg-soft: #faf9f6;
        --bg-strong: #ebe8e3;
        --line: #d8cfbf;
        --line-subtle: #e8dfd1;
        --text: #241f19;
        --text-secondary: #5e554a;
        --muted: #7b7267;
        --brand-rgb: 255, 154, 92;
        --brand-strong-rgb: 239, 135, 71;
        --brand: #ff9a5c;
        --brand-strong: #ef8747;
        --brand-dim: rgba(255, 154, 92, 0.16);
        --brand-soft: rgba(255, 154, 92, 0.24);
        --brand-contrast: #fffaf4;
        --interactive-hover-bg: #e8dfd2;
        --interactive-hover-line: #cfc4b3;
        --overlay-scrim: rgba(74, 60, 42, 0.24);
        --surface-inline-bg: rgba(102, 86, 59, 0.06);
        --search-offer-bg: linear-gradient(
            135deg,
            #fff0e5 0%,
            #fbe6d7 52%,
            #f5dbc8 100%
        );
        --search-offer-bg-active: linear-gradient(
            135deg,
            #ffe7d5 0%,
            #f8dcc8 52%,
            #f1cfb8 100%
        );
        --search-offer-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.48),
            0 0 0 1px rgba(var(--brand-rgb), 0.08);
        --search-offer-shadow-active:
            inset 0 1px 0 rgba(255, 255, 255, 0.58),
            0 0 0 1px rgba(var(--brand-rgb), 0.14);
        --service-offer-bg: linear-gradient(
            135deg,
            #fff2e8 0%,
            #f6e5d8 52%,
            #ecd8c8 100%
        );
        --service-offer-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.42),
            0 0 0 1px rgba(var(--brand-rgb), 0.08);
        --search-offer-title: #b35f2f;
        --search-offer-icon: #d97439;
        --search-offer-accent: #d97439;
        --search-offer-accent-strong: #b35f2f;
        --cap-card-bg: linear-gradient(135deg, #f1dfdd 0%, #e9d3d1 100%);
        --cap-card-border: rgba(179, 107, 114, 0.28);
        --cap-card-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.45),
            0 0 0 1px rgba(179, 107, 114, 0.06);
        --cap-card-icon: #a86f77;
        --success-fg: #416b4f;
        --success-fg-strong: #315a40;
        --warning-fg: #8b5d3e;
        --paper-shell-shadow:
            0 10px 24px rgba(85, 63, 35, 0.08), 0 1px 2px rgba(85, 63, 35, 0.05);
        --grain-accent-rgb: 20, 18, 28;
        --grain-ambient-opacity: 0;
        --grain-surface-opacity: 0;
        --grain-paper-opacity: 0;
        --grain-ambient-blend: normal;
        --grain-surface-blend: normal;
        --grain-paper-blend: multiply;
        --grain-size: 320px auto;
        --grain-ambient-filter: contrast(235%) brightness(46%);
        --grain-surface-filter: contrast(220%) brightness(52%);
        --grain-paper-filter: contrast(190%) brightness(62%);
        --text-muted: #746b60;
        --shadow-sm: 0 1px 2px rgba(85, 63, 35, 0.12);
        --shadow-md: 0 8px 20px rgba(85, 63, 35, 0.12);
        --shadow-lg: 0 18px 40px rgba(85, 63, 35, 0.16);
    }
}


* {
    box-sizing: border-box;
}
html {
    scrollbar-gutter: stable;
    background: var(--bg);
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.58;
}
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}
body::before {
    z-index: 0;
    background:
        radial-gradient(
            760px 320px at 50% -6%,
            rgba(var(--grain-accent-rgb), 0.022),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            rgba(var(--grain-accent-rgb), 0.01),
            var(--bg) 62%
        );
    background:
        radial-gradient(
            760px 320px at 50% -6%,
            rgba(var(--grain-accent-rgb), 0.022),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            color-mix(
                in oklab,
                var(--bg) 100%,
                rgba(var(--grain-accent-rgb), 0.01)
            ),
            var(--bg) 62%
        );
}
body::after {
    z-index: 1;
    opacity: 0;
    mix-blend-mode: var(--grain-ambient-blend);
    filter: var(--grain-ambient-filter);
    background-image: var(--route-bible-grain-image, none);
    background-repeat: repeat;
    background-position: left top;
    background-size: var(--grain-size);
    transition: opacity 0.3s ease-out;
    -webkit-mask-image: radial-gradient(
        ellipse at 50% 34%,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.45) 28%,
        rgba(0, 0, 0, 0.86) 70%,
        #000 100%
    );
    mask-image: radial-gradient(
        ellipse at 50% 34%,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.45) 28%,
        rgba(0, 0, 0, 0.86) 70%,
        #000 100%
    );
}
body.grain-ready::after {
    opacity: var(--grain-ambient-opacity);
}
main {
    position: relative;
    z-index: 2;
    /* 100% (not 94vw): 94vw was a scrollbar dodge that jumped to 100vw once
       body.route-view-* applied. Pair with html { scrollbar-gutter: stable }. */
    width: min(1100px, 100%);
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 28px 16px 56px;
    zoom: var(--page-scale);
}
.panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 34px;
    box-shadow: var(--shadow-lg);
}
.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: var(--grain-surface-blend);
    filter: var(--grain-surface-filter);
    background-image: var(--route-bible-grain-image, none);
    background-repeat: repeat;
    background-position: left top;
    background-size: var(--grain-size);
    transition: opacity 0.3s ease-out;
}
body.grain-ready .panel::after {
    opacity: calc(var(--grain-surface-opacity) - 0.015);
}
:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after,
:root[data-theme="light"] .panel::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body::before,
    :root:not([data-theme="dark"]) body::after,
    :root:not([data-theme="dark"]) .panel::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        background: none !important;
        background-image: none !important;
    }
}
.panel > *:not(.launcher-preview-modal) {
    position: relative;
    z-index: 1;
}
.section-card {
    border: 1px solid var(--line-subtle);
    background: var(--bg-strong);
    padding: 24px;
}


.info-stack {
    display: grid;
    gap: 16px;
}
.ext-hero {
    display: grid;
    gap: 12px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--line);
    background:
        linear-gradient(
            135deg,
            rgba(var(--brand-rgb), 0.1),
            rgba(var(--brand-rgb), 0.03)
        ),
        var(--bg-soft);
}
.info-hero,
.info-section {
    display: grid;
    gap: 12px;
}
.info-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--line);
    background:
        linear-gradient(
            135deg,
            rgba(var(--brand-rgb), 0.1),
            rgba(var(--brand-rgb), 0.03)
        ),
        var(--bg-soft);
}
.info-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.info-card-bright {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 12px;
    padding: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(var(--brand-rgb), 0.12),
            rgba(var(--brand-rgb), 0.04)
        ),
        var(--bg-strong);
    border: 1px solid var(--line);
}
.ext-hero::before,
.info-hero::before,
.info-card-bright::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: var(--grain-surface-blend);
    filter: var(--grain-surface-filter);
    background-image: var(--route-bible-grain-image, none);
    background-repeat: repeat;
    background-position: left top;
    background-size: var(--grain-size);
    transition: opacity 0.3s ease-out;
}
body.grain-ready .ext-hero::before,
body.grain-ready .info-hero::before,
body.grain-ready .info-card-bright::before {
    opacity: var(--grain-surface-opacity);
}
.ext-hero > *,
.info-hero > *,
.info-card-bright > * {
    position: relative;
    z-index: 1;
}
.info-card-bright h2 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-strong);
}
.info-eyebrow {
    margin: 0;
    color: var(--brand-strong);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.info-lead {
    margin: 0;
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.65;
}
.info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.info-actions > .button {
    width: auto;
    min-width: 190px;
}
.info-card-bright p {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
}
.info-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.info-card-bright .info-list {
    color: var(--text);
}
.info-list-ordered {
    padding-left: 22px;
}
.info-list li::marker {
    color: var(--brand-strong);
}
.info-card-bright li::marker {
    color: var(--brand);
}
.topic-reader-shell {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: clamp(18px, 4vw, 34px);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.topic-reader-shell.panel::before,
.topic-reader-shell.panel::after {
    content: none;
    display: none;
}
.topic-reader-page {
    gap: 12px;
}
.topic-reader-header {
    position: static;
    padding-bottom: 0;
    background: transparent;
    box-shadow: none;
}
.topic-reader-header::after {
    content: none;
}
.topic-reader-shell .topic-reader-header .topic-reader-title {
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: clamp(1.55rem, 4vw, 2.1rem);
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.035em;
}
.topic-reader-shell .topic-reader-header .reader-title-suffix {
    font-size: clamp(0.82rem, 1.5vw, 0.96rem);
    font-weight: 650;
    letter-spacing: 0;
}
.topic-reader-page .topic-reader-intro {
    max-width: 62ch;
    margin: 0 0 2px;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}
.topic-reader-page {
    --topic-old-reference: #8a5d2e;
    --topic-old-reference-hover: #6f461e;
    --topic-new-reference: #586fa5;
    --topic-new-reference-hover: #3f5688;
}
.topic-reader-divider-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}
.topic-reader-divider {
    flex: 1 1 auto;
    height: 1px;
    margin: 0;
    background: color-mix(in oklab, var(--text) 12%, transparent);
}
.topic-reader-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.topic-reader-shell .topic-reader-verse {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding: 9px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    line-height: 1.55;
    text-decoration: none;
    cursor: pointer;
}
.topic-reader-shell .topic-reader-verse + .topic-reader-verse {
    border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent);
}
.topic-reader-shell .topic-reader-verse:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand) 35%, transparent);
    outline-offset: 4px;
}
.topic-reader-shell .topic-reader-verse-text {
    display: grid;
    gap: 2px;
}
.topic-reader-reference {
    color: var(--text);
    font-weight: 650;
}
.topic-reader-reference[data-testament="old"] {
    color: var(--topic-old-reference);
}
.topic-reader-reference[data-testament="new"] {
    color: var(--topic-new-reference);
}
.topic-reader-excerpt {
    color: var(--text-secondary);
    font-weight: 400;
}
@media (hover: hover) and (pointer: fine) {
    .topic-reader-shell .topic-reader-verse:hover .topic-reader-reference {
        color: var(--brand-strong);
    }
    .topic-reader-shell .topic-reader-verse:hover .topic-reader-reference[data-testament="old"] {
        color: var(--topic-old-reference-hover);
    }
    .topic-reader-shell .topic-reader-verse:hover .topic-reader-reference[data-testament="new"] {
        color: var(--topic-new-reference-hover);
    }
}
.topic-sort-button {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.3rem;
    padding: 2px 0;
    background: none;
    border: none;
    color: color-mix(in oklab, var(--text) 40%, transparent);
    font-size: clamp(0.68rem, 1.2vw, 0.78rem);
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    appearance: none;
    transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.topic-sort-button:hover {
    color: var(--text);
}
}

.topic-sort-button:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand) 35%, transparent);
    outline-offset: 3px;
    border-radius: var(--rb-radius);
}
.topic-sort-icon {
    flex-shrink: 0;
    opacity: 0.65;
}
@media (hover: hover) and (pointer: fine) {
.topic-sort-button:hover .topic-sort-icon {
    opacity: 1;
}
}

:root[data-theme="dark"] .topic-reader-page {
    --topic-old-reference: #d3a66b;
    --topic-old-reference-hover: #efc282;
    --topic-new-reference: #aab6e3;
    --topic-new-reference-hover: #c7d0ff;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .topic-reader-page {
        --topic-old-reference: #d3a66b;
        --topic-old-reference-hover: #efc282;
        --topic-new-reference: #aab6e3;
        --topic-new-reference-hover: #c7d0ff;
    }
}
.info-token,
.info-inline-url {
    display: inline-flex;
    align-items: center;
    border-radius: var(--rb-radius);
    line-height: 1.35;
}
.info-token {
    padding: 0.16rem 0.56rem;
    border: 1px solid rgba(var(--brand-strong-rgb), 0.4);
    background: var(--brand-dim);
    color: var(--text);
    font-size: 0.86em;
    font-weight: 650;
    letter-spacing: 0.01em;
}
.info-inline-url {
    padding: 0.16rem 0.56rem;
    border: 1px solid var(--line);
    background: var(--surface-inline-bg);
    color: var(--text);
    font-family: "Geist", "Helvetica Neue", sans-serif;
    font-size: 0.84em;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}
.integrate-workbench,
.integrate-form,
.integrate-snippet-card,
.integrate-embed-section {
    gap: 16px;
}
.integrate-workbench {
    display: grid;
}
.integrate-form {
    display: grid;
}
.integrate-form-copy {
    display: grid;
    gap: 8px;
}
.integrate-form-copy > p {
    margin: 0;
}
.integrate-form-actions {
    margin-top: 4px;
}
.integrate-snippet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.integrate-snippet-card {
    align-content: start;
}
.integrate-snippet-card > p {
    margin: 0;
}
.integrate-snippet-card .info-inline-url {
    width: fit-content;
    max-width: 100%;
}
.integrate-embed-section {
    display: grid;
}
.integrate-embed-header {
    align-items: flex-start;
}
.integrate-embed-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.integrate-note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.info-section > p,
.faq-item > p {
    margin: 0;
    color: var(--text-secondary);
}
@media (max-width: 900px) {
    .integrate-snippet-grid,
    .integrate-embed-grid,
    .integrate-note-grid {
        grid-template-columns: 1fr;
    }
}
.faq-list {
    gap: 0;
}
.faq-item + .faq-item {
    padding-top: 14px;
    border-top: 1px solid var(--line-subtle);
}
.panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    z-index: 3;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--brand-rgb), 0.68) 30%,
        rgba(var(--brand-strong-rgb), 0.68) 70%,
        transparent 100%
    );
}
.monologue-grain {
    user-select: none;
    mix-blend-mode: var(--grain-ambient-blend);
    opacity: 0;
    pointer-events: none;
    z-index: 12;
    position: fixed;
    inset: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-out;
}
body.grain-ready .monologue-grain {
    opacity: calc(var(--grain-ambient-opacity) + 0.005);
}
:root[data-theme="light"] .monologue-grain {
    display: none;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .monologue-grain {
        display: none;
    }
}
.monologue-grain__tile {
    position: absolute;
    inset: 0;
    filter: var(--grain-ambient-filter);
    background-image: var(--route-bible-grain-image, none);
    background-repeat: repeat;
    background-position: left top;
    background-size: var(--grain-size);
}

/* ---------- Selah Margin Outliner, Chapter Overview Trigger & Memorize inside route.bible ---------- */
.reader-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.reader-overview-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font: 500 0.78rem/1 "Lexend", "Helvetica Neue", sans-serif;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.14s ease;
}
.reader-overview-trigger:focus-visible {
    color: var(--text);
    outline: none;
}
.reader-verse.has-margin-note {
    box-shadow: none;
}
.rb-margin-tray {
    /* Overridden by durable-core continuous-rail margin (left edge = verses). */
    margin: 0 44px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.outliner {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    padding: 6px 0;
    min-height: 0;
    transition: border-color 0.14s ease;
}
.outliner:focus-within {
    border-color: color-mix(in oklab, var(--text) 34%, var(--line));
}
.oblock {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0 0.75rem 0 calc(0.55rem + (var(--depth, 0) * 1.15rem));
}
.obullet {
    position: relative;
    width: 1.35rem;
    min-width: 1.35rem;
    height: 1.55em;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    background: transparent;
}
.obullet::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.34rem;
    height: 0.34rem;
    margin: -0.17rem 0 0 -0.17rem;
    /* Inherently circular note bullet — exception to --rb-radius: 0. */
    border-radius: 50%;
    background: transparent;
}
.oblock.is-bullet .obullet::after {
    background: var(--muted);
    opacity: 0.85;
}
/* Empty unfocused note: no stray bullet ghost. */
.oblock:not(.is-bullet) .obullet::after {
    background: transparent;
}
.oblock:not(.is-bullet):focus-within .obullet::after {
    background: var(--muted);
    opacity: 0.38;
}
.otext {
    flex: 1;
    min-width: 0;
    min-height: 1.55em;
    line-height: 1.55;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-word;
    caret-color: var(--text);
    color: var(--text);
    outline: none;
    border: 0;
    font-size: 16px;
}
.rb-margin-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 26px;
}
.rb-margin-status {
    font-size: 0.74rem;
    color: var(--muted);
}
.rb-margin-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.rb-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--line-subtle);
    background: transparent;
    color: var(--muted);
    font: 500 0.72rem/1 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}
.rb-inline-action:focus-visible {
    color: var(--text);
    border-color: var(--line);
    background: var(--bg-soft);
    outline: none;
}
.rb-inline-action.is-starred {
    color: var(--text);
    border-color: var(--line);
}
.rb-bar-actions,
.rb-bar-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.dashboard-section--margin {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- Notes & Memorize Subpages ---------- */
.rb-subpage,
.rb-memorize-wrap,
.rb-search-page {
    display: flex;
    flex-direction: column;
    /* Title / tabs / content rhythm is owned by durable-core margins
       (--rb-page-title-to-tabs / --rb-page-tabs-to-content), not flex gap. */
    gap: 0;
    width: var(--rb-content-column, min(42rem, 100%));
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}
.rb-subpage > .rb-bookmarks-view,
.rb-subpage > .rb-notes-feed,
.rb-memorize-wrap > .rb-mem-list,
.rb-memorize-wrap > .rb-memorize-card,
.rb-memorize-wrap > .rb-notes-empty,
.rb-search-page > .route-search {
    margin-top: 0;
}
.rb-subpage > .rb-bookmarks-view {
    margin-bottom: var(--rb-page-tabs-to-content, 16px);
}
.rb-subbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0;
}
.rb-subbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rb-subbar-count {
    font-size: 0.78rem;
    font-weight: 550;
    color: var(--muted);
}
.rb-subbar-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: 500 0.8rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.rb-seg-group {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: transparent;
}
.rb-seg-btn {
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--muted);
    font: 500 0.78rem/1 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--rb-motion, 0.2s ease), background-color var(--rb-motion, 0.2s ease);
}
.rb-seg-btn.is-active {
    background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
    color: var(--text);
}
/* Quiet underline tabs — active ink only; no full-width divider row. */
.rb-underline-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    border-bottom: 0;
}
.rb-underline-tab {
    position: relative;
    height: 2.15rem;
    margin: 0;
    padding: 0 0.85rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--rb-tab-inactive, #6b6358);
    font: 500 0.82rem/1 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--rb-motion, 0.2s ease), border-color var(--rb-motion, 0.2s ease);
}
.rb-underline-tab.is-active,
.rb-underline-tab[aria-selected="true"] {
    color: var(--text);
    border-bottom-color: var(--text);
}
.rb-page-head.rb-page-head--row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.rb-page-head--row > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}
/* Page actions live on the title row (never in .rb-tabs). Quiet like reader Share. */
.rb-page-menu {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    /* Sit on the first title line, not floating into the header band. */
    margin-top: 0.05rem;
}
.rb-page-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--muted);
    font: 500 1.15rem/1 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0.12em;
    cursor: pointer;
}
.rb-page-menu-btn[aria-expanded="true"],
.rb-page-menu-btn:focus-visible {
    color: var(--text);
    background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
}
@media (hover: hover) and (pointer: fine) {
    .rb-page-menu-btn:hover {
        color: var(--text);
    }
}
.rb-page-menu-pop {
    position: absolute;
    z-index: 20;
    right: 0;
    top: calc(100% + 4px);
    display: flex;
    flex-direction: column;
    min-width: 11.5rem;
    padding: 4px 0;
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 8px 24px rgb(28 25 23 / 0.1);
}
.rb-page-menu-pop button,
.rb-page-menu-pop .rb-page-menu-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--text);
    font: 500 0.84rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.rb-page-menu-pop button:focus-visible,
.rb-page-menu-pop .rb-page-menu-item:focus-visible {
    background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
}
@media (hover: hover) and (pointer: fine) {
    .rb-page-menu-pop button:hover,
.rb-page-menu-pop .rb-page-menu-item:hover {
        background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
    }
}
.rb-undo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Bottom margin owned by durable-core --rb-page-title-to-tabs. */
    margin: 0;
    padding: 0.55rem 0.7rem;
    background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
    color: var(--text);
    font: 500 0.82rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-confirm {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgb(28 25 23 / 0.28);
}
.rb-confirm-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: min(22rem, 100%);
    margin: 0;
    padding: 1.15rem 1.1rem 1rem;
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    border-radius: var(--rb-radius);
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 16px 40px rgb(28 25 23 / 0.14);
}
.rb-confirm-title {
    margin: 0;
    font: 650 1.05rem/1.25 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-confirm-copy {
    margin: 0;
    color: var(--muted);
    font: 400 0.9rem/1.45 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
}
.rb-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font: 500 0.78rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    color: var(--muted);
}
.rb-field-hint {
    font-weight: 400;
    opacity: 0.8;
}
.rb-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.4rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: var(--bg);
    color: var(--text);
    font: 500 0.95rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-mem-row-wrap,
.rb-note-row-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
}
.rb-mem-row-wrap .rb-mem-row,
.rb-note-row-wrap .rb-note-row {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 0.7rem;
}
.rb-mem-row-wrap .rb-mem-row {
    /* Status lives under the ref — not in the action cluster. */
    justify-content: flex-start;
}
.rb-mem-row-wrap .rb-mem-row-due {
    display: block;
    margin-top: 0.15rem;
}
.rb-note-row-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: center;
    gap: 0;
    padding: 0;
}
.rb-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--muted);
    font: inherit;
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rb-row-action svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
.rb-row-action.is-danger:focus-visible {
    color: #9f1239;
}
@media (hover: hover) and (pointer: fine) {
    .rb-row-action:hover {
        color: var(--text);
    }
    .rb-row-action.is-danger:hover {
        color: #9f1239;
    }
}
.rb-row-action:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--text) 30%, transparent);
    outline-offset: 1px;
}
.rb-mem-bm-icon {
    display: inline-flex;
    margin-left: 0.35rem;
    color: var(--muted);
    vertical-align: -0.1em;
}
.rb-mem-bm-icon svg {
    display: block;
}
.rb-memorize-card {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    width: 100%;
    margin: 0.35rem 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
}
.rb-mem-card-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 -0.85rem;
}
.rb-mem-swap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--rb-motion, 0.2s ease);
}
.rb-mem-swap svg {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .rb-mem-swap:hover {
        color: var(--text);
    }
}
.rb-mem-verse {
    margin: 0;
    color: var(--text);
    font: 400 1.125rem/1.65 "Lexend", "Helvetica Neue", sans-serif;
    text-wrap: pretty;
}
.rb-mem-verse.is-loading {
    color: var(--muted);
}
.rb-mem-load-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}
.rb-mem-load-error-copy {
    margin: 0;
    color: var(--muted);
    font: 500 0.95rem/1.4 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-mem-ref-prompt {
    margin: 0;
    color: var(--text);
    font: 650 1.35rem/1.25 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: -0.02em;
}
.rb-mem-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rb-mem-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.7rem 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color var(--rb-motion, 0.2s ease);
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .rb-mem-row:hover {
        background: color-mix(in oklab, var(--text) 4%, transparent);
    }
}

/* Memorize library FSRS info sheet — phone bottom sheet / desktop modal. */
.rb-mem-info {
    position: fixed;
    z-index: 72;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    /* Sit above the phone tab bar, same as the More sheet. */
    padding-bottom: var(--rb-tabs-bottom, 0px);
}
.rb-mem-info-scrim {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: rgb(28 25 23 / 0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rb-mem-info-sheet {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    max-width: 100%;
    max-height: min(78dvh, 36rem);
    margin: 0;
    padding: 0.55rem max(16px, env(safe-area-inset-right, 0px)) 14px
        max(16px, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 -12px 28px rgb(28 25 23 / 0.12);
    box-sizing: border-box;
    outline: none;
    overscroll-behavior: contain;
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rb-mem-info-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 4px auto 2px;
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--text) 18%, transparent);
    flex: 0 0 auto;
}
.rb-mem-info-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}
.rb-mem-info-title {
    margin: 0;
    min-width: 0;
    font: 650 1.1rem/1.25 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.rb-mem-info-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.25rem -0.35rem 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rb-mem-info-close svg {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .rb-mem-info-close:hover {
        color: var(--text);
        background: color-mix(in oklab, var(--text) 6%, transparent);
    }
}
.rb-mem-info-preview {
    margin: 0;
    color: var(--muted);
    font: 400 0.92rem/1.45 "Lexend", "Helvetica Neue", sans-serif;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.rb-mem-info-meta {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.rb-mem-info-row {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    min-width: 0;
}
.rb-mem-info-row dt {
    margin: 0;
    color: var(--muted);
    font: 500 0.78rem/1.35 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-mem-info-row dd {
    margin: 0;
    min-width: 0;
    color: var(--text);
    font: 500 0.88rem/1.35 "Lexend", "Helvetica Neue", sans-serif;
    overflow-wrap: anywhere;
}
.rb-mem-info-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.15rem;
    min-width: 0;
}
.rb-mem-info-actions .rb-primary-btn,
.rb-mem-info-link,
.rb-mem-info-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 2.6rem;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border: 0;
    border-radius: var(--rb-radius);
    box-sizing: border-box;
    font: 550 0.9rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rb-mem-info-actions .rb-primary-btn {
    background: var(--text);
    color: var(--bg);
}
.rb-mem-info-link {
    background: color-mix(in oklab, var(--text) 7%, transparent);
    color: var(--text);
}
.rb-mem-info-remove {
    background: transparent;
    color: color-mix(in oklab, #9f1239 72%, var(--text));
}
.rb-mem-info-action-icon {
    display: inline-flex;
    flex: 0 0 auto;
}
.rb-mem-info-action-icon svg {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .rb-mem-info-link:hover {
        background: color-mix(in oklab, var(--text) 11%, transparent);
    }
    .rb-mem-info-remove:hover {
        background: color-mix(in oklab, #9f1239 8%, transparent);
    }
}
@media (min-width: 768px) {
    .rb-mem-info {
        align-items: center;
        padding: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .rb-mem-info-sheet {
        width: min(22.5rem, 100%);
        max-height: min(78vh, 34rem);
        padding: 1.1rem 1.1rem 1rem;
        border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
        box-shadow: 0 16px 40px rgb(28 25 23 / 0.14);
    }
    .rb-mem-info-handle {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .rb-mem-info-sheet {
        transition: none;
    }
}
.rb-mem-row-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.rb-mem-row-title {
    font: 650 0.95rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-mem-row-excerpt {
    overflow: hidden;
    color: var(--muted);
    font: 400 0.82rem/1.4 "Lexend", "Helvetica Neue", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-mem-row-due {
    flex: 0 0 auto;
    color: var(--muted);
    font: 500 0.74rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-mem-rates {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
    border: 0;
    background: transparent;
}
/*
  Spaced-repetition rates — soft warm tints (Again red, Hard amber, Good green,
  Easy blue-slate). Text stays ≥4.5:1 on the tinted fill in light and dark.
*/
.rb-rate-btn {
    --rb-rate-fill: color-mix(in oklab, var(--text) 5%, transparent);
    --rb-rate-border: color-mix(in oklab, var(--text) 18%, var(--line));
    --rb-rate-ink: var(--text);
    height: 36px;
    margin: 0;
    padding: 0 0.5rem;
    border: 1px solid var(--rb-rate-border);
    border-radius: var(--rb-radius);
    background: var(--rb-rate-fill);
    color: var(--rb-rate-ink);
    font: 500 0.78rem/1 "Lexend", "Helvetica Neue", sans-serif;
    cursor: pointer;
    transition:
        background-color var(--rb-motion, 0.2s ease),
        border-color var(--rb-motion, 0.2s ease),
        color var(--rb-motion, 0.2s ease);
}
.rb-rate-btn[data-rate="again"] {
    --rb-rate-fill: color-mix(in oklab, #9f1239 12%, var(--bg));
    --rb-rate-border: color-mix(in oklab, #9f1239 38%, var(--line));
    --rb-rate-ink: #7f1d1d;
}
.rb-rate-btn[data-rate="hard"] {
    --rb-rate-fill: color-mix(in oklab, #b45309 14%, var(--bg));
    --rb-rate-border: color-mix(in oklab, #b45309 40%, var(--line));
    --rb-rate-ink: #7c2d12;
}
.rb-rate-btn[data-rate="good"] {
    --rb-rate-fill: color-mix(in oklab, #3f6b4a 14%, var(--bg));
    --rb-rate-border: color-mix(in oklab, #3f6b4a 40%, var(--line));
    --rb-rate-ink: #1f3d28;
}
.rb-rate-btn[data-rate="easy"] {
    --rb-rate-fill: color-mix(in oklab, #475569 14%, var(--bg));
    --rb-rate-border: color-mix(in oklab, #475569 40%, var(--line));
    --rb-rate-ink: #1e293b;
}
.rb-rate-btn.is-preferred {
    /* Preferred stays Good's palette; slightly stronger fill. */
    --rb-rate-fill: color-mix(in oklab, #3f6b4a 20%, var(--bg));
}
:root[data-theme="dark"] .rb-rate-btn[data-rate="again"] {
    --rb-rate-fill: color-mix(in oklab, #fb7185 28%, var(--bg));
    --rb-rate-border: color-mix(in oklab, #fb7185 52%, var(--line));
    --rb-rate-ink: #fecdd3;
}
:root[data-theme="dark"] .rb-rate-btn[data-rate="hard"] {
    --rb-rate-fill: color-mix(in oklab, #fbbf24 26%, var(--bg));
    --rb-rate-border: color-mix(in oklab, #fbbf24 52%, var(--line));
    --rb-rate-ink: #fde68a;
}
:root[data-theme="dark"] .rb-rate-btn[data-rate="good"] {
    --rb-rate-fill: color-mix(in oklab, #86efac 26%, var(--bg));
    --rb-rate-border: color-mix(in oklab, #86efac 52%, var(--line));
    --rb-rate-ink: #bbf7d0;
}
:root[data-theme="dark"] .rb-rate-btn[data-rate="easy"] {
    --rb-rate-fill: color-mix(in oklab, #94a3b8 26%, var(--bg));
    --rb-rate-border: color-mix(in oklab, #94a3b8 52%, var(--line));
    --rb-rate-ink: #e2e8f0;
}
:root[data-theme="dark"] .rb-rate-btn.is-preferred {
    --rb-rate-fill: color-mix(in oklab, #86efac 34%, var(--bg));
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rb-rate-btn[data-rate="again"] {
        --rb-rate-fill: color-mix(in oklab, #fb7185 28%, var(--bg));
        --rb-rate-border: color-mix(in oklab, #fb7185 52%, var(--line));
        --rb-rate-ink: #fecdd3;
    }
    :root:not([data-theme="light"]) .rb-rate-btn[data-rate="hard"] {
        --rb-rate-fill: color-mix(in oklab, #fbbf24 26%, var(--bg));
        --rb-rate-border: color-mix(in oklab, #fbbf24 52%, var(--line));
        --rb-rate-ink: #fde68a;
    }
    :root:not([data-theme="light"]) .rb-rate-btn[data-rate="good"] {
        --rb-rate-fill: color-mix(in oklab, #86efac 26%, var(--bg));
        --rb-rate-border: color-mix(in oklab, #86efac 52%, var(--line));
        --rb-rate-ink: #bbf7d0;
    }
    :root:not([data-theme="light"]) .rb-rate-btn[data-rate="easy"] {
        --rb-rate-fill: color-mix(in oklab, #94a3b8 26%, var(--bg));
        --rb-rate-border: color-mix(in oklab, #94a3b8 52%, var(--line));
        --rb-rate-ink: #e2e8f0;
    }
    :root:not([data-theme="light"]) .rb-rate-btn.is-preferred {
        --rb-rate-fill: color-mix(in oklab, #86efac 34%, var(--bg));
    }
}
.rb-rate-btn:active {
    filter: brightness(0.96);
}
.rb-mem-answer {
    font: 650 1rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-canon-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--line-subtle);
    background: var(--bg-soft);
}
.rb-canon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rb-canon-end {
    font-size: 0.72rem;
    color: var(--muted);
}
.rb-canon-marker-pill {
    font-size: 0.84rem;
    font-weight: 640;
    color: var(--text);
    padding: 2px 8px;
    border: 1px solid var(--line);
    background: var(--bg);
}
.rb-canon-rail {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}
.rb-canon-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--bg-strong);
    border: 1px solid var(--line);
}
.rb-canon-seam {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: var(--line);
}
.rb-canon-input {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 28px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.rb-canon-pin {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 2px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}
.rb-canon-pin::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--bg-soft);
}
.rb-canon-pin--guess {
    background: var(--text);
}
.rb-canon-pin--guess::after {
    background: var(--text);
}
.rb-canon-pin--true {
    background: var(--ok);
}
.rb-canon-pin--true::after {
    background: var(--ok);
}
.rb-canon-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.rb-mem-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding-top: 0.25rem;
}
.rb-mem-result {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    color: var(--text);
    font-size: 0.96rem;
}
.rb-mem-dist {
    font-size: 0.78rem;
    color: var(--muted);
}
.rb-mem-hint {
    font-size: 0.78rem;
    color: var(--muted);
}
.rb-primary-btn {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--text);
    font: 550 0.84rem/1 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--rb-motion, 0.2s ease), border-color var(--rb-motion, 0.2s ease);
}
.rb-primary-btn:focus-visible {
    background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
    border-color: color-mix(in oklab, var(--text) 28%, var(--line));
    outline: none;
}

@media (hover: hover) and (pointer: fine) {
    .reader-overview-trigger:hover {
        color: var(--text);
    }
    .oblock:not(.is-bullet):hover .obullet::after {
        background: var(--muted);
        opacity: 0.38;
    }
    .rb-inline-action:hover {
        color: var(--text);
        border-color: var(--line);
        background: var(--bg-soft);
    }
    .rb-subbar-link:hover {
        color: var(--text);
    }
    .rb-seg-btn:hover {
        color: var(--text);
        background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
    }
    .rb-primary-btn:hover {
        background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
        border-color: color-mix(in oklab, var(--text) 28%, var(--line));
    }
    .rb-rate-btn:hover {
        filter: brightness(0.97);
        border-color: color-mix(in oklab, var(--rb-rate-ink) 55%, var(--rb-rate-border));
    }
    .rb-rate-btn:active {
        filter: brightness(0.93);
    }
    .rb-mem-row:hover {
        background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
    }
}


.header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-subtle);
}
.header > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}
h1,
h2 {
    margin: 0;
    letter-spacing: -0.02em;
    font-weight: 700;
}
h1 {
    font-size: clamp(1.55rem, 1.1rem + 1.2vw, 2rem);
}
.shell-title-link {
    color: inherit;
    text-decoration: none;
}
.shell-brand {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

/*
 * Shared brand lockup — home (.shell-brand) and desktop header (.rb-tabs-home).
 * Contexts only override --rb-brand-mark / --rb-brand-gap; cap ratio is shared.
 */
.shell-brand-link,
.rb-tabs-home {
    --rb-brand-mark: var(--rb-brand-mark-header);
    --rb-brand-gap: var(--rb-brand-gap-header);
    display: inline-flex;
    align-items: center;
    gap: var(--rb-brand-gap);
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-weight: 600;
    font-size: calc(var(--rb-brand-mark) / var(--rb-brand-cap-em));
    line-height: 1;
    letter-spacing: -0.02em;
    color: inherit;
    text-decoration: none;
}

h1.shell-brand .shell-brand-link {
    --rb-brand-mark: var(--rb-brand-mark-home);
    --rb-brand-gap: var(--rb-brand-gap-home);
    justify-content: center;
}

.shell-brand-mark,
.rb-tabs-home-mark {
    display: block;
    width: var(--rb-brand-mark);
    height: var(--rb-brand-mark);
    flex: 0 0 auto;
    color: inherit;
}

.shell-brand-mark path,
.rb-tabs-home-mark path {
    fill: currentColor;
}

.shell-brand-text {
    min-width: 0;
    line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
.shell-title-link:hover {
    color: inherit;
    text-decoration: none;
}
}
.shell-title-link:focus-visible {
    color: inherit;
    text-decoration: none;
}

.shell-title-link:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand-strong) 55%, transparent);
    outline-offset: 4px;
}
h2 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}
.header-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: color-mix(in oklab, var(--muted) 86%, var(--text) 1%);
    box-shadow: none;
    opacity: 0.58;
    line-height: 0;
}
.header-copy-button svg {
    display: block;
    flex: 0 0 auto;
}
.header-copy-button:focus-visible {
    border-color: var(--line-subtle);
    background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
    color: var(--text);
    opacity: 1;
}
.header-copy-button.is-copied {
    color: var(--ok);
    opacity: 1;
}
.header-copy-button.is-failed {
    color: var(--bad);
    opacity: 1;
}
.header-share-button {
    position: relative;
}
a.header-reader-button {
    text-decoration: none;
}
.header-reader-button[aria-pressed="true"] {
    color: var(--brand-strong);
    opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
    .header-copy-button:hover {
        border-color: var(--line-subtle);
        background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
        color: var(--text);
        opacity: 1;
    }
}

/* Verse context expand button */
.header-verse-context-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--accent);
    background: color-mix(in oklab, var(--accent) 12%, transparent);
    color: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent);
    opacity: 1;
    line-height: 0;
    border-radius: var(--rb-radius);
    position: relative;
    animation: verse-context-pulse 2s ease-in-out 3;
}

@keyframes verse-context-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 4px
            color-mix(in oklab, var(--accent) 20%, transparent);
    }
}

.header-verse-context-button::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: var(--rb-radius);
    border: 1px dashed color-mix(in oklab, var(--accent) 30%, transparent);
    opacity: 0.6;
    pointer-events: none;
}

.header-verse-context-button svg {
    display: block;
    flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
/* Stop pulsing after user interaction */
.header-verse-context-button:hover {
    animation: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
}
}
.header-verse-context-button:focus-visible {
    animation: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
}


.header-verse-context-button:focus-visible {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 20%, transparent);
    color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .header-verse-context-button:hover {
        border-color: var(--accent);
        background: color-mix(in oklab, var(--accent) 24%, transparent);
        color: var(--accent);
    }
}


.input-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.passage-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.passage-row input {
    flex: 1;
    min-width: 0;
}
.builder-search-offer {
    display: flex;
}
.builder-search-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 14px;
    border: 1px solid
        color-mix(in oklab, var(--line) 64%, var(--brand) 36%);
    background: color-mix(
        in oklab,
        var(--bg-strong) 88%,
        rgba(var(--brand-rgb), 0.12)
    );
    text-align: left;
}
.builder-search-button:focus-visible {
    border-color: var(--brand-strong);
    background: color-mix(
        in oklab,
        var(--bg-strong) 82%,
        rgba(var(--brand-strong-rgb), 0.16)
    );
}
@media (hover: hover) and (pointer: fine) {
    .builder-search-button:hover {
        border-color: var(--brand-strong);
        background: color-mix(
            in oklab,
            var(--bg-strong) 82%,
            rgba(var(--brand-strong-rgb), 0.16)
        );
    }
}
.builder-search-icon {
    width: 12px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    color: var(--brand-strong);
}
.builder-search-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.builder-search-title {
    color: color-mix(in oklab, var(--muted) 82%, var(--brand) 18%);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.builder-search-label {
    min-width: 0;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.builder-search-cta {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.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;
}
label {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
input,
select,
textarea,
button,
a.button {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--text);
    padding: 0 14px;
    font: inherit;
    font-size: 0.95rem;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
input.input-valid {
    border-color: var(--ok);
}
input.input-invalid {
    border-color: var(--bad);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand-dim);
}
input.input-valid:focus {
    border-color: var(--ok);
    box-shadow: 0 0 0 1px rgba(126, 168, 143, 0.3);
}
input.input-invalid:focus {
    border-color: var(--bad);
    box-shadow: 0 0 0 1px rgba(179, 107, 114, 0.3);
}
textarea {
    min-height: 68px;
    padding: 10px 14px;
    resize: vertical;
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 0.82rem;
    line-height: 1.6;
}
button {
    cursor: pointer;
    background: var(--bg-strong);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}
button:focus,
button:focus-visible,
a.button:focus,
a.button:focus-visible {
    outline: none;
}
@media (hover: hover) and (pointer: fine) {
    button:hover {
        border-color: var(--interactive-hover-line);
    }
    button:disabled:hover {
        background: var(--bg-strong);
        border-color: var(--line);
    }
    button.primary:hover,
    a.button.primary:hover {
        background: var(--brand-strong);
        border-color: var(--brand-strong);
    }
}
button.primary:focus-visible,
a.button.primary:focus-visible {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
}
button:disabled {
    cursor: not-allowed;
    opacity: 0.78;
}
button.primary,
a.button.primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
    font-weight: 700;
}
button.primary.is-busy {
    position: relative;
    overflow: hidden;
}
button.primary.is-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 48%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: button-sweep 1.1s linear infinite;
    pointer-events: none;
}
button.primary.is-confirmed,
button.primary.is-confirmed:focus-visible {
    background: rgba(126, 168, 143, 0.16);
    border-color: rgba(126, 168, 143, 0.45);
    color: var(--success-fg);
}
@media (hover: hover) and (pointer: fine) {
    button.primary.is-confirmed:hover {
        background: rgba(126, 168, 143, 0.16);
        border-color: rgba(126, 168, 143, 0.45);
        color: var(--success-fg);
    }
}
@keyframes button-sweep {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
a {
    color: var(--brand-strong);
    transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
    a:hover {
        color: var(--warning-fg);
    }
}
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
#builder-open-link {
    font-weight: 600;
}
.builder-inline-open {
    display: none;
    margin-top: 2px;
}
.parsed {
    border: 1px solid var(--line);
    background: var(--bg-strong);
    padding: 10px 14px;
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
}
.parsed.ok {
    border-color: var(--ok);
    background: rgba(126, 168, 143, 0.06);
}
.parsed.bad {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
    border-color: var(--bad);
    color: var(--bad);
    background: rgba(179, 107, 114, 0.06);
}
.preview {
    border: none;
    padding: 0 0 14px;
    margin-top: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    font-size: 0.96rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.preview-ref {
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 6px;
}
.preview-text {
    margin: 0;
    max-width: 66ch;
    overflow: hidden;
}
.preview-text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.preview.clamped {
    margin: 0;
    margin-top: 16px;
    word-break: break-word;
}


.quick-search {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-left: auto;
    max-width: min(620px, 100%);
}
.quick-search-actions {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    min-height: 42px;
}
.quick-search.is-landing-main {
    --landing-search-width: min(620px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(20px, auto);
    justify-content: normal;
    width: var(--landing-search-width);
    max-width: 100%;
    margin: 0;
    gap: 13px;
    isolation: isolate;
}

.quick-search.is-landing-main .quick-search-field {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
    box-shadow: none;
}
.quick-search.is-landing-main
    .quick-search-field.quick-search-field--picker-expand {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.quick-search.is-landing-main
    .quick-search-field.quick-search-field--picker-expand:has(
        .landing-passage-pickers-panel:not([hidden])
    ) {
    box-shadow: inset 0 -1px 0 var(--line);
}
.quick-search.is-landing-main .quick-search-picker-expand {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    width: 42px;
    min-width: 42px;
    height: auto;
    min-height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: transparent;
    color: color-mix(in oklab, var(--text-secondary) 92%, var(--muted) 8%);
    cursor: pointer;
    grid-row: 1;
    grid-column: 1;
    transition:
        color 120ms ease,
        background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
.quick-search.is-landing-main .quick-search-picker-expand:hover {
    color: var(--text);
    background: color-mix(in oklab, var(--bg) 55%, transparent);
}
}

.quick-search.is-landing-main .quick-search-picker-expand svg {
    transition: transform 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .quick-search.is-landing-main .quick-search-picker-expand svg {
        transition: none;
    }
}
.quick-search.is-landing-main .quick-search-input {
    position: static;
    width: 100%;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    font-size: 0.98rem;
    font-weight: 520;
    box-shadow: none;
    z-index: auto;
    grid-row: 1;
    grid-column: 1;
}
.quick-search.is-landing-main
    .quick-search-field.quick-search-field--picker-expand
    .quick-search-input {
    grid-column: 2;
}
.quick-search.is-landing-main .quick-search-input:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}
.quick-search.is-landing-main .quick-search-input::placeholder {
    color: color-mix(in oklab, var(--muted) 86%, transparent);
}
.quick-search.is-landing-main .quick-search-button,
.quick-search.is-landing-main .quick-search-actions {
    display: none;
}
.quick-search.is-landing-main .quick-search-go {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    height: 42px;
    flex-basis: 42px;
    align-self: stretch;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    grid-row: 1;
    grid-column: 2;
}
.quick-search.is-landing-main
    .quick-search-field.quick-search-field--picker-expand
    .quick-search-go {
    grid-column: 3;
}
.quick-search.is-landing-main[data-state="ready"] .quick-search-go,
.quick-search.is-landing-main[data-state="idle"]:has(
        .quick-search-search-offer:not(.hidden)
    )
    .quick-search-go {
    background: var(--text);
    color: var(--bg);
}
.quick-search.is-landing-main .quick-search-hint {
    position: static;
    width: 100%;
    min-height: 20px;
    margin: 0;
    color: var(--muted);
    opacity: 1;
    transform: none;
    pointer-events: none;
    text-align: left;
    z-index: auto;
    font-size: 0.72rem;
    font-weight: 560;
    letter-spacing: 0.01em;
}
.quick-search.is-landing-main:has(.quick-search-autocomplete-list:not(.hidden))
    .quick-search-hint,
.quick-search.is-landing-main:has(.quick-search-search-offer:not(.hidden))
    .quick-search-hint {
    visibility: hidden;
}
.quick-search.is-landing-main[data-state="ready"] .quick-search-hint {
    visibility: visible;
}
.quick-search.is-landing-main .quick-search-autocomplete-list,
.quick-search.is-landing-main .quick-search-search-offer,
.quick-search.is-landing-main .quick-search-cap-card {
    grid-column: 1 / -1;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    margin: 0;
    z-index: 42;
    border-radius: var(--rb-radius);
}
.quick-search.is-landing-main .quick-search-autocomplete-list {
    padding: 0;
    max-height: min(360px, calc(50dvh - 104px));
    min-height: 0;
    border-color: var(--line);
    border-top: 0;
    background: var(--bg-soft);
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.quick-search.is-landing-main .quick-search-search-offer,
.quick-search.is-landing-main .quick-search-cap-card {
    top: calc(100% + 8px);
    max-height: min(300px, calc(50dvh - 104px));
    padding: 12px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.quick-search.is-landing-main .quick-search-autocomplete-option {
    min-height: 57px;
    padding: 11px 17px;
    margin: 0;
    border-radius: var(--rb-radius);
    box-shadow: none;
}
/* Adapters are flat list rows on landing — never a separate framed offer. */
.quick-search.is-landing-main .quick-search-service-offer.launcher-adapter {
    display: none !important;
}
.quick-search.is-landing-main .quick-search-hint-ready-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 57px;
    padding: 11px 17px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--text);
    pointer-events: auto;
}
.quick-search.is-landing-main {
    --landing-picker-panel-offset: 37px;
}
/* Panel is `position:absolute` on `.quick-search-field`, so it does not reserve
   layout height; push dependent overlays below it while open. */
.quick-search.is-landing-main:has(.landing-passage-pickers-panel:not([hidden]))
    .quick-search-autocomplete-list {
    top: calc(100% + var(--landing-picker-panel-offset));
}
.quick-search.is-landing-main:has(.landing-passage-pickers-panel:not([hidden]))
    .quick-search-search-offer,
.quick-search.is-landing-main:has(.landing-passage-pickers-panel:not([hidden]))
    .quick-search-cap-card {
    top: calc(100% + var(--landing-picker-panel-offset));
}
.quick-search.is-landing-main:has(.landing-passage-pickers-panel:not([hidden]))
    .quick-search-hint {
    margin-top: calc(var(--landing-picker-panel-offset) - 14px);
}
.quick-search.is-landing-main:has(.landing-passage-pickers-panel:not([hidden]))
    .quick-search-hint-ready-row {
    border-top: 0;
}

/* Sticky shell search — same query-row look as the dashboard field. */
.quick-search.is-shell-search {
    --shell-search-size: 50px;
    --shell-search-font: 1.0625rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 0;
    isolation: isolate;
}
.quick-search.is-shell-search .quick-search-field {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    width: 100%;
    min-height: var(--shell-search-size);
    overflow: visible;
    border: 0;
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
    outline: 1px solid transparent;
    outline-offset: 0;
    box-shadow: none;
    transition:
        background-color 150ms ease,
        outline-color 150ms ease;
}
.quick-search.is-shell-search .quick-search-field:focus-within {
    outline-color: color-mix(in oklab, var(--brand-strong) 55%, transparent);
    background: color-mix(in oklab, var(--bg-strong) 78%, var(--bg) 22%);
}
.quick-search.is-shell-search .quick-search-input {
    position: static;
    width: 100%;
    min-width: 0;
    min-height: var(--shell-search-size);
    height: var(--shell-search-size);
    padding: 0 0.95rem 0 1.05rem;
    border: 0;
    background: transparent;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    font-size: var(--shell-search-font);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.3;
    box-shadow: none;
    z-index: auto;
}
.quick-search.is-shell-search .quick-search-input:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}
.quick-search.is-shell-search .quick-search-input::placeholder {
    color: color-mix(in oklab, var(--muted) 86%, transparent);
}
.quick-search.is-shell-search .quick-search-button,
.quick-search.is-shell-search .quick-search-actions,
.quick-search.is-shell-search .quick-search-hint {
    display: none;
}
.quick-search.is-shell-search .quick-search-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: var(--shell-search-size);
    min-width: var(--shell-search-size);
    min-height: var(--shell-search-size);
    height: auto;
    margin: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: color-mix(
        in oklab,
        rgba(var(--brand-rgb), 0.14) 100%,
        transparent
    );
    color: var(--brand-strong);
    box-shadow: none;
}
.quick-search.is-shell-search .quick-search-autocomplete-list,
.quick-search.is-shell-search .quick-search-search-offer,
.quick-search.is-shell-search .quick-search-cap-card {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: 100%;
    margin: 0;
    z-index: 42;
    border-radius: var(--rb-radius);
}
.quick-search.is-shell-search .quick-search-autocomplete-list {
    padding: 0;
    max-height: min(360px, calc(50dvh - 104px));
    border: 1px solid var(--line);
    border-top: 0;
    /* Opaque flat panel — no translucency over page content. */
    background: var(--bg-soft);
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.quick-search.is-shell-search .quick-search-autocomplete-option {
    min-height: 52px;
    padding: 10px 14px;
    margin: 0;
    border-radius: var(--rb-radius);
    box-shadow: none;
}
.quick-search.is-shell-search .quick-search-search-offer,
.quick-search.is-shell-search .quick-search-cap-card {
    top: calc(100% + 8px);
    max-height: min(300px, calc(50dvh - 104px));
    padding: 12px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Adapters are flat list rows on shell search — never a separate framed offer. */
.quick-search.is-shell-search .quick-search-service-offer.launcher-adapter {
    display: none !important;
}
.quick-search.is-shell-search[data-state="ready"] .quick-search-input,
.quick-search.is-shell-search[data-state="invalid"] .quick-search-input {
    border-color: transparent;
}
@media (min-width: 641px) {
    .quick-search.is-shell-search {
        --shell-search-size: 52px;
        --shell-search-font: 1.125rem;
    }
}

.quick-search-field {
    display: contents;
}
.quick-search-input {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(420px, calc(100vw - 40px));
    min-height: 42px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    padding: 0 12px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--text);
    font-size: 16px;
    z-index: 40;
    box-shadow: var(--shadow-md);
    transition:
        opacity 170ms ease,
        transform 170ms ease,
        border-color 100ms ease;
}
.quick-search[data-open="true"] .quick-search-input {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.quick-search[data-state="ready"] .quick-search-input {
    border-color: var(--ok);
}
.quick-search[data-state="invalid"] .quick-search-input {
    border-color: var(--bad);
}
.quick-search-button {
    width: auto;
    min-width: 92px;
    min-height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}
.quick-search-button svg {
    width: 15px;
    height: 15px;
}
.quick-search-label {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
    .quick-search-button:hover {
        color: var(--text);
        border-color: var(--text-secondary);
    }
}
.quick-search.is-tertiary .quick-search-button {
    min-width: 42px;
    padding: 0;
}
.quick-search.is-tertiary .quick-search-label {
    display: none;
}
.quick-search.is-launcher-toolbar {
    gap: 0;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    max-width: 100%;
    overflow: hidden;
}
.quick-search.is-launcher-toolbar .quick-search-hint {
    display: none;
}
.quick-search.is-launcher-toolbar .quick-search-button {
    min-width: 96px;
    min-height: 40px;
    border: none;
    background: transparent;
}
.quick-search.is-launcher-toolbar .launcher-toolbar-actions {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    min-height: 40px;
}
.quick-search.is-launcher-toolbar .launcher-toolbar-button,
.quick-search.is-launcher-toolbar .launcher-toolbar-select {
    min-height: 40px;
    border: none;
    border-left: 1px solid var(--line);
    background: transparent;
}
.quick-search.is-launcher-toolbar .launcher-toolbar-select {
    width: 84px;
    min-width: 84px;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
    background-image: none;
}
.quick-search.is-launcher-toolbar .launcher-toolbar-toggle {
    width: 70px;
    min-width: 70px;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.quick-search.is-launcher-toolbar
    .launcher-toolbar-toggle[aria-pressed="true"] {
    color: var(--brand-strong);
    background: rgba(var(--brand-rgb), 0.12);
}
.quick-search.is-launcher-toolbar[data-open="true"] .quick-search-input {
    width: min(440px, calc(100vw - 28px));
}
.quick-search[data-state="ready"] .quick-search-button {
    border-color: var(--ok);
    color: var(--ok);
}
.quick-search[data-state="invalid"] .quick-search-button {
    border-color: var(--bad);
    color: var(--bad);
}
.quick-share-button {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--muted);
    cursor: pointer;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}
.quick-share-button svg {
    width: 18px;
    height: 18px;
}
@media (hover: hover) and (pointer: fine) {
    .quick-share-button:hover {
        border-color: var(--brand);
        color: var(--brand-strong);
    }
}
.quick-share-button:focus-visible {
        border-color: var(--brand);
        color: var(--brand-strong);
    }
.quick-search-hint {
    position: absolute;
    top: calc(100% + 56px);
    right: 0;
    width: min(420px, calc(100vw - 40px));
    margin: 0;
    min-height: 16px;
    text-align: left;
    font-size: 0.74rem;
    color: var(--muted);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    z-index: 40;
    transition:
        opacity 170ms ease,
        transform 170ms ease;
}
.quick-search[data-open="true"] .quick-search-hint {
    opacity: 1;
    transform: translateY(0);
}
.quick-search[data-state="ready"] .quick-search-hint {
    color: var(--ok);
}
.quick-search[data-state="invalid"] .quick-search-hint {
    color: var(--bad);
}
.quick-search-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    margin: 0;
    z-index: 41;
    display: grid;
    gap: 0;
    border: 1px solid
        color-mix(in oklab, var(--brand-strong) 58%, var(--line) 42%);
    border-top: 0;
    border-radius: var(--rb-radius);
    /* Opaque flat panel — no peach/purple offer gradient or translucency. */
    background: var(--bg-soft);
    box-shadow: none;
    text-align: left;
    overflow: hidden;
}
.quick-search-autocomplete-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 10px 12px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line-subtle);
    border-radius: var(--rb-radius);
    background: var(--bg-soft);
    box-shadow: none;
    color: inherit;
    text-align: left;
    transform: none;
    opacity: 1;
    isolation: isolate;
}
.quick-search-autocomplete-option:last-child {
    border-bottom: 0;
}
.quick-search-autocomplete-option:focus-visible,
.quick-search-autocomplete-option.is-active {
    background: var(--interactive-hover-bg);
    opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
    .quick-search-autocomplete-option:hover {
        background: var(--interactive-hover-bg);
        opacity: 1;
    }
}
.quick-search-autocomplete-option--adapter {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    /* Same row chrome as book/topic suggestions — no nested offer frame. */
    background: var(--bg-soft);
    border-color: var(--line-subtle);
    box-shadow: none;
}
.quick-search-autocomplete-option--adapter .launcher-adapter-icon {
    --adapter-icon-width: 18px;
    --adapter-icon-img-size: 18px;
    --adapter-icon-img-scale: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 0;
    margin: 0;
    border-radius: var(--rb-radius);
    overflow: hidden;
}
.quick-search-autocomplete-option--adapter .launcher-adapter-icon.is-wordmark {
    width: 18px;
    flex-basis: 18px;
}
.quick-search-autocomplete-option--adapter .launcher-adapter-icon img,
.quick-search-autocomplete-option--adapter .launcher-adapter-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    object-fit: cover;
    border-radius: var(--rb-radius);
    transform: none;
}
.quick-search-autocomplete-icon {
    width: 10px;
    height: 17px;
    display: block;
    color: var(--search-offer-icon);
    flex: 0 0 auto;
}
.quick-search-autocomplete-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.quick-search-autocomplete-title {
    color: var(--search-offer-title);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.quick-search-testament-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 18px;
    padding: 0 7px;
    border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--line) 60%);
    background: color-mix(in oklab, var(--brand) 10%, transparent);
    color: var(--search-offer-accent-strong);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
}
.quick-search-testament-label[data-testament="OT"] {
    color: var(--muted);
    border-color: color-mix(in oklab, var(--muted) 28%, var(--line) 72%);
    background: color-mix(in oklab, var(--muted) 8%, transparent);
}
.quick-search-autocomplete-label {
    min-width: 0;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-search-autocomplete-meta {
    min-width: 0;
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 560;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-search-search-offer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 2px 0 0;
    padding: 10px 12px;
    border: 1px solid
        color-mix(in oklab, var(--brand-strong) 58%, var(--line) 42%);
    background: var(--search-offer-bg);
    box-shadow: var(--search-offer-shadow);
    text-align: left;
}
.quick-search-search-offer:focus-visible {
    border-color: var(--brand-strong);
    background: var(--search-offer-bg-active);
    box-shadow: var(--search-offer-shadow-active);
}
@media (hover: hover) and (pointer: fine) {
    .quick-search-search-offer:hover {
        border-color: var(--brand-strong);
        background: var(--search-offer-bg-active);
        box-shadow: var(--search-offer-shadow-active);
    }
}
.quick-search-search-icon {
    width: 10px;
    height: 17px;
    display: block;
    color: var(--search-offer-icon);
    flex: 0 0 auto;
}
.quick-search-search-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.quick-search-search-title {
    color: var(--search-offer-title);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.quick-search-search-label {
    min-width: 0;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-search-service-offer.launcher-adapter {
    margin: 2px 0 0;
    padding: 10px 12px;
    text-align: left;
    background: var(--service-offer-bg);
    box-shadow: var(--service-offer-shadow);
}
.passage-cap-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cap-card-border);
    background: var(--cap-card-bg);
    box-shadow: var(--cap-card-shadow);
    text-align: left;
}
.quick-search-cap-card {
    position: absolute;
    top: calc(100% + 54px);
    right: 0;
    width: min(420px, calc(100vw - 40px));
    margin: 0;
    z-index: 40;
}
.builder-cap-card {
    margin-top: 12px;
}
.passage-cap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    color: var(--cap-card-icon);
    flex: 0 0 auto;
    padding-top: 1px;
}
.passage-cap-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.passage-cap-eyebrow {
    color: var(--cap-card-icon);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.passage-cap-title {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
}
.quick-search-go {
    display: none;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ok);
    border-left: none;
    background: rgba(147, 188, 159, 0.1);
    color: var(--ok);
    cursor: pointer;
    flex: 0 0 36px;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}
.quick-search-go svg {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .quick-search-go:hover {
        background: rgba(147, 188, 159, 0.18);
        border-color: var(--ok);
        color: var(--success-fg-strong);
    }
}
.quick-search-go:focus-visible {
        background: rgba(147, 188, 159, 0.18);
        border-color: var(--ok);
        color: var(--success-fg-strong);
    }
.quick-search[data-state="ready"] .quick-search-go {
    display: inline-flex;
}
.quick-search[data-state="idle"]:has(.quick-search-search-offer:not(.hidden))
    .quick-search-input {
    border-color: var(--search-offer-accent);
}
.quick-search[data-state="idle"]:has(.quick-search-search-offer:not(.hidden))
    .quick-search-button {
    border-color: var(--search-offer-accent);
    color: var(--search-offer-accent);
}
.quick-search[data-state="idle"]:has(.quick-search-search-offer:not(.hidden))
    .quick-search-go {
    display: inline-flex;
    border-color: var(--search-offer-accent);
    background: rgba(159, 139, 216, 0.1);
    color: var(--search-offer-accent);
}
@media (hover: hover) and (pointer: fine) {
    .quick-search[data-state="idle"]:has(
            .quick-search-search-offer:not(.hidden)
        )
        .quick-search-go:hover {
        background: rgba(159, 139, 216, 0.18);
        border-color: var(--search-offer-accent-strong);
        color: var(--search-offer-accent-strong);
    }
}
.quick-search[data-state="idle"]:has(
            .quick-search-search-offer:not(.hidden)
        )
        .quick-search-go:focus-visible {
        background: rgba(159, 139, 216, 0.18);
        border-color: var(--search-offer-accent-strong);
        color: var(--search-offer-accent-strong);
    }


.two-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 32px;
}
body.route-view-landing main {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: start center;
    padding: clamp(150px, 30vh, 265px) 24px clamp(24px, 8vh, 72px);
    zoom: 1;
}
body.route-view-landing .panel {
    position: relative;
    width: 100%;
    min-height: auto;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
body.route-view-landing .panel::before,
body.route-view-landing .panel::after {
    content: none;
    display: none;
}
body.route-view-landing .header {
    /* Flex column (not grid) so children with `width: 100%` actually fill the
       header. A grid auto column collapses to max-content of its items, which
       previously left the search bar shrunk and the hero hugging one side. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: var(--rb-content-column, min(42rem, 100%));
    max-width: 100%;
    margin: 3rem auto;
    padding: 0;
    border-bottom: 0;
    text-align: center;
    box-sizing: border-box;
}
body.route-view-landing .header > div:first-child {
    max-width: none;
}
body.route-view-landing h1 {
    font-size: clamp(2.9rem, 2.05rem + 3.25vw, 4.9rem);
    line-height: 0.88;
    letter-spacing: -0.07em;
}
body.route-view-landing .subtitle {
    display: none;
}
body.route-view-landing .landing-passage-search {
    width: 100%;
    max-width: min(620px, calc(100vw - 48px));
}
/* `[hidden]` alone loses to author `display`; keep collapsed panel off-screen and unfocusable */
body.route-view-landing .landing-passage-pickers-panel[hidden] {
    display: none !important;
}
body.route-view-landing .landing-passage-pickers-panel:not([hidden]) {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 41;
    display: flex;
    justify-content: flex-start;
    width: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-top: 0;
    background: color-mix(in oklab, var(--bg-soft) 88%, var(--bg) 12%);
}
body.route-view-landing .landing-stack {
    display: none;
}
body.route-view-landing .quick-search-pickers {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
body.route-view-landing .quick-search-picker-strip {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0;
    overflow: hidden;
}
body.route-view-landing .quick-search-picker-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
}
body.route-view-landing
    .quick-search-picker-step
    + .quick-search-picker-step {
    border-left: 1px solid var(--line);
}
body.route-view-landing .quick-search-picker-step[hidden] {
    display: none !important;
}
body.route-view-landing
    .quick-search-picker-step[data-picker-field="book"]:not(
        [data-step-state="filled"]
    ) {
    flex: 2 1 0;
    min-width: 0;
}
body.route-view-landing
    .quick-search-picker-step[data-step-state="next"]:not(
        [data-picker-field="book"]
    ),
body.route-view-landing .quick-search-picker-step[data-step-state="stub"] {
    flex: 1 1 0;
    min-width: 0;
}
body.route-view-landing .quick-search-picker-step[data-step-state="filled"] {
    position: relative;
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    width: auto;
    max-width: 100%;
    min-width: 0;
}
body.route-view-landing
    .quick-search-picker-step[data-picker-field="book"][data-step-state="filled"] {
    flex: 2 1 0;
    margin-right: 0;
}
body.route-view-landing
    .quick-search-picker-step[data-picker-field="verse"][data-step-state="filled"]::before,
body.route-view-landing
    .quick-search-picker-step[data-picker-field="end"][data-step-state="filled"]::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
body.route-view-landing
    .quick-search-picker-step[data-picker-field="verse"][data-step-state="filled"]::before {
    content: ":";
}
body.route-view-landing
    .quick-search-picker-step[data-picker-field="end"][data-step-state="filled"]::before {
    content: "-";
}
body.route-view-landing .quick-search-picker-select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 0 26px 0 10px;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--bg-strong);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-sizing: border-box;
    appearance: none;
}
body.route-view-landing
    .quick-search-picker-step[data-step-state="filled"]
    .quick-search-picker-select {
    width: 100%;
    max-width: none;
    padding: 0 10px;
    border-color: var(--line);
    background: var(--bg-strong);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
}
body.route-view-landing
    .quick-search-picker-step[data-picker-field="book"][data-step-state="filled"]
    .quick-search-picker-select {
    padding-left: 16px;
}
body.route-view-landing
    .quick-search-picker-step[data-picker-field="verse"][data-step-state="filled"]
    .quick-search-picker-select,
body.route-view-landing
    .quick-search-picker-step[data-picker-field="end"][data-step-state="filled"]
    .quick-search-picker-select {
    padding-left: 24px;
    padding-right: 10px;
}
body.route-view-landing
    .quick-search-picker-step[data-step-state="filled"]
    + .quick-search-picker-step[data-step-state="filled"]
    .quick-search-picker-select {
    margin-left: 0;
}
body.route-view-landing
    .quick-search-picker-step
    + .quick-search-picker-step
    .quick-search-picker-select {
    margin-left: 0;
}
body.route-view-landing .landing-picker-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    box-sizing: border-box;
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    margin-left: -1px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    cursor: pointer;
}
body.route-view-landing .landing-picker-go[hidden] {
    display: none !important;
}
body.route-view-info .header {
    flex-wrap: nowrap;
}
body.route-view-builder .quick-search,
body.route-view-info .quick-search {
    --builder-search-gap: 8px;
    --builder-search-width: clamp(260px, 28vw, 420px);
    gap: 0;
    justify-content: flex-end;
    min-width: 0;
    overflow: visible;
}
body.route-view-info .quick-search .quick-search-button {
    flex-shrink: 0;
}
body.route-view-builder .quick-search .quick-search-field,
body.route-view-info .quick-search .quick-search-field {
    display: flex;
    align-items: stretch;
    width: 0;
    min-width: 0;
    margin-right: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
        width 170ms ease,
        margin-right 170ms ease,
        visibility 170ms step-end;
}
body.route-view-builder .quick-search[data-open="true"] .quick-search-field {
    width: min(var(--builder-search-width), calc(100vw - 180px));
    margin-right: var(--builder-search-gap);
    visibility: visible;
    transition:
        width 170ms ease,
        margin-right 170ms ease,
        visibility 0s linear;
}
body.route-view-info .quick-search[data-open="true"] .quick-search-field {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin-right: var(--builder-search-gap);
    visibility: visible;
    transition:
        flex 170ms ease,
        margin-right 170ms ease,
        visibility 0s linear;
}
body.route-view-builder .quick-search .quick-search-input,
body.route-view-info .quick-search .quick-search-input {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-shadow: none;
    z-index: auto;
}
body.route-view-builder .quick-search .quick-search-hint,
body.route-view-info .quick-search .quick-search-hint {
    display: none;
}

body.route-view-search main {
    --route-search-query-size: 54px;
    --route-search-query-font: 1.375rem;
    --route-search-query-leading: calc(var(--route-search-query-font) * 1.35);
    --route-search-query-pad-block: calc(
        (
                var(--route-search-query-size) - 2px -
                    var(--route-search-query-leading)
            ) / 2
    );
    width: min(960px, 100%);
    max-width: 100%;
    box-sizing: border-box;
    box-sizing: border-box;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 4.5vh, 52px) 16px 20px;
}
body.route-view-search .panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

body.route-view-search .route-search {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
body.route-view-search .route-search-results-wrapper {
    flex: 0 1 auto;
    min-height: 0;
}

body.route-view-search .panel::before,
body.route-view-search .panel::after {
    content: none;
    display: none;
}
body.route-view-search .header--sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    gap: 0;
}
body.route-view-search .header .quick-search {
    display: none;
}

/* Unified search: /search with dashboard chrome matches home search. */
body.route-view-search.route-view-dashboard main {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    display: block;
    padding: 0;
}
body.route-view-search.route-view-dashboard .panel {
    display: block;
    flex: none;
    overflow: visible;
    gap: 0;
}
body.route-view-search.route-view-dashboard .route-search {
    flex: none;
    overflow: visible;
}
/* Search results use a page h1 (.rb-page-title); keep the shell title sr-only. */
body.route-view-search.route-view-dashboard .header--sr-title {
    display: none;
}
.route-search {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 0.7rem;
}

/* Search box: query row + topic chips — pinned while results scroll */
.route-search-box {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
}

/* Query row — single border container, inner go control */
.route-search-query-row {
    position: relative;
    display: flex;
    align-items: stretch;
    height: auto;
    min-height: var(--route-search-query-size, 54px);
    border: 1px solid var(--line);
    background: var(--bg);
    transition: border-color 150ms ease;
}
.route-search-query-row:focus-within {
    border-color: var(--brand-strong);
}

/* Input fills the row */
.route-search-query-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--route-search-query-size, 54px) - 2px);
    min-height: calc(var(--route-search-query-size, 54px) - 2px);
    max-height: calc(
        var(--route-search-query-leading, 1.85625rem) * 4 +
            var(--route-search-query-pad-block, 11px) * 2
    );
    padding: var(--route-search-query-pad-block, 0) 0.9rem
        var(--route-search-query-pad-block, 0) 1.05rem;
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-size: var(--route-search-query-font, 1.375rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: var(--route-search-query-leading, 1.85625rem);
    border: none;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--text);
    box-shadow: none;
    resize: none;
    overflow-x: hidden;
    overflow-y: hidden;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    appearance: none;
    -webkit-appearance: none;
}
.route-search-query-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.route-search-query-input::placeholder {
    color: color-mix(in oklab, var(--muted) 72%, var(--text-secondary) 28%);
    font-size: var(--route-search-query-font, 1.375rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: var(--route-search-query-leading, 1.85625rem);
    /* Placeholder must wrap; never ellipsize / clip mid-phrase. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Clear (X) — narrow control between text and go */
.route-search-query-clear {
    position: absolute;
    top: 0;
    right: var(--route-search-query-size, 54px);
    bottom: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 36px;
    min-width: 36px;
    min-height: 0;
    max-height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--rb-radius);
    line-height: 0;
    background: transparent;
    color: color-mix(in oklab, var(--muted) 82%, var(--text) 18%);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 150ms ease,
        color 150ms ease,
        background-color 150ms ease;
}
.route-search-query-clear.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.route-search-query-row--has-value .route-search-query-input {
    padding-right: calc(var(--route-search-query-size, 54px) + 36px);
}
@media (hover: hover) and (pointer: fine) {
    .route-search-query-clear:hover {
        color: var(--brand-strong);
        background: transparent;
    }
}
.route-search-query-clear:focus-visible {
    color: var(--brand-strong);
    background: transparent;
    outline: 2px solid color-mix(in oklab, var(--brand-strong) 55%, transparent);
    outline-offset: -2px;
}
.route-search-query-clear svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Go arrow — docked right; tint only (no stacked divider line) */
.route-search-query-go {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: var(--route-search-query-size, 54px);
    min-width: var(--route-search-query-size, 54px);
    min-height: 0;
    height: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--rb-radius);
    background: rgba(var(--brand-rgb), 0.1);
    color: var(--brand-strong);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 150ms ease,
        background-color 150ms ease,
        color 150ms ease;
}
.route-search-query-go.is-visible {
    opacity: 1;
    pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .route-search-query-go:hover {
        background: rgba(var(--brand-rgb), 0.18);
        color: var(--brand-strong);
    }
}
.route-search-query-go:focus-visible {
    background: rgba(var(--brand-rgb), 0.18);
    color: var(--brand-strong);
    outline: 2px solid color-mix(in oklab, var(--brand-strong) 55%, transparent);
    outline-offset: -2px;
}
.route-search-query-go svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Topic chips — horizontal marquee with edge fades */
.route-search-topic-chips {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: stretch;
    padding: 0;
    min-height: 30px;
    margin-top: 0.35rem;
}
.route-search-topic-chips::before,
.route-search-topic-chips::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    pointer-events: none;
    z-index: 2;
}
.route-search-topic-chips::before {
    left: 0;
    background: linear-gradient(
        90deg,
        var(--bg) 0%,
        color-mix(in oklab, var(--bg) 55%, transparent) 45%,
        transparent 100%
    );
}
.route-search-topic-chips::after {
    right: 0;
    background: linear-gradient(
        270deg,
        var(--bg) 0%,
        color-mix(in oklab, var(--bg) 55%, transparent) 45%,
        transparent 100%
    );
}
@media (hover: hover) and (pointer: fine) {
.route-search-topic-chips:hover .route-search-topic-chips__track {
    animation-play-state: paused;
}
}
.route-search-topic-chips:focus-within .route-search-topic-chips__track {
    animation-play-state: paused;
}

.route-search-topic-chips__track {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 0.6rem;
    min-width: max-content;
    height: 30px;
    box-sizing: border-box;
    padding-right: 0.6rem;
    animation: route-search-marquee var(--route-search-marquee-duration, 120s)
        linear infinite;
}
@keyframes route-search-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - 0.5rem));
    }
}
.route-search-topic-chip {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 0;
    min-width: max-content;
    width: auto;
    height: 100%;
    padding: 0 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rb-radius);
    border: 1px solid var(--line-subtle);
    background: transparent;
    color: var(--muted);
    font-family: "Geist", "Lexend", "Helvetica Neue", sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    /* Colors only: `all` animated chip geometry on font load (CLS). */
    transition:
        color 150ms ease,
        border-color 150ms ease,
        background-color 150ms ease;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.route-search-topic-chip:hover {
    border-color: var(--line);
    color: var(--text-secondary);
    background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
}
}
.route-search-topic-chip:focus-visible {
    border-color: var(--line);
    color: var(--text-secondary);
    background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
}


/* Status bar */
.route-search-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    flex-shrink: 0;
    /* Always reserve the status line so 'N results · ms' cannot shift results. */
    min-height: 1.35rem;
    height: 1.35rem;
    overflow: hidden;
}

/* Status badge pill */
.route-search-status__badge {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.28rem;
    max-width: 100%;
    padding: 0.15rem 0;
    border: none;
    border-radius: var(--rb-radius);
    font-family: "Geist", "Lexend", "Helvetica Neue", sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
}
.route-search-status__badge--topical {
    color: var(--brand-strong);
}
.route-search-status__badge--scripture {
    color: var(--muted);
}
.route-search-status__badge--loading {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 400;
    color: var(--muted);
    border: none;
    background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
    .route-search-status__badge--loading {
        animation: route-search-pulse 1.4s ease infinite;
    }
}
@keyframes route-search-pulse {
    50% {
        opacity: 0.7;
    }
}
.route-search-status-badge__kind {
    color: var(--brand-strong);
    font-weight: 600;
}
.route-search-status-badge__sep {
    color: var(--muted);
    font-weight: 400;
    opacity: 0.6;
}
.route-search-status-badge__topic {
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-transform: none;
    color: var(--text-secondary);
    max-width: min(22rem, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status meta (count + timing) */
.route-search-status-meta {
    font-family: "Geist", "Lexend", "Helvetica Neue", sans-serif;
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--muted);
    opacity: 0.8;
}

/* Results box hugs the cards. It only fills the leftover viewport when they overflow, then scrolls inside. */
.route-search-results-wrapper {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 1.25rem;
    border: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 96%, var(--bg-strong) 4%);
    overflow: hidden;
}
.route-search-results {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.route-search-results::-webkit-scrollbar {
    display: none;
}

/* Result card — list item with border-bottom */

/* Search result skeletons — pattern from margin-bible src/html.ts suggest-skeleton
   + jump-ui.ts showSearchLoading (4 rows: ref bar + text bar). No divider lines. */
.route-search-skel {
    margin: 0;
    padding: 0.85rem 1rem;
    pointer-events: none;
    width: 100%;
    box-sizing: border-box;
}
.route-search-skel__ref,
.route-search-skel__text {
    display: block;
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--line) 78%, var(--muted) 22%);
}
.route-search-skel__ref {
    height: 0.72rem;
    width: 4.6rem;
}
.route-search-skel__text {
    height: 0.62rem;
    width: 88%;
    margin-top: 0.45rem;
}
.route-search-skel:nth-child(2) .route-search-skel__ref { width: 6.2rem; }
.route-search-skel:nth-child(2) .route-search-skel__text { width: 74%; }
.route-search-skel:nth-child(3) .route-search-skel__ref { width: 3.8rem; }
.route-search-skel:nth-child(3) .route-search-skel__text { width: 92%; }
.route-search-skel:nth-child(4) .route-search-skel__ref { width: 5.4rem; }
.route-search-skel:nth-child(4) .route-search-skel__text { width: 66%; }
.route-search-skel:nth-child(5) .route-search-skel__ref { width: 7rem; }
.route-search-skel:nth-child(5) .route-search-skel__text { width: 80%; }
.route-search-skel:nth-child(6) .route-search-skel__ref { width: 4.2rem; }
.route-search-skel:nth-child(6) .route-search-skel__text { width: 70%; }
@media (prefers-reduced-motion: no-preference) {
    .route-search-skel__ref,
    .route-search-skel__text {
        background: linear-gradient(
            90deg,
            color-mix(in oklab, var(--line) 88%, transparent) 0%,
            color-mix(in oklab, var(--muted) 28%, var(--line) 72%) 50%,
            color-mix(in oklab, var(--line) 88%, transparent) 100%
        );
        background-size: 200% 100%;
        animation: route-search-skel-shimmer 1.15s ease-in-out infinite;
    }
}
@keyframes route-search-skel-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.route-search-card {
    display: block;
    flex: 0 0 auto;
}
.route-search-card__button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    width: 100%;
    min-height: auto;
    padding: 0.9rem 1rem 0.95rem 1.1rem;
    border: 0;
    border-bottom: 1px solid var(--line-subtle);
    background: color-mix(in oklab, var(--bg) 98%, var(--bg-strong) 2%);
    text-align: left;
    box-shadow: inset 3px 0 0 transparent;
    transition:
        background 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}
.route-search-card:nth-child(even) .route-search-card__button {
    background: color-mix(in oklab, var(--bg) 96%, var(--bg-strong) 4%);
}
@media (hover: hover) and (pointer: fine) {
    .route-search-card__button:hover {
        background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
    }
}
.route-search-results .route-search-card .route-search-card__button.is-active,
.route-search-results .route-search-featured__button.is-active {
    /* Keyboard-active result (ArrowUp/ArrowDown from the search field). */
    background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
    box-shadow: inset 4px 0 0 var(--brand-strong);
}
.route-search-card__button:focus-visible {
    outline: none;
    box-shadow:
        inset 4px 0 0 var(--brand-strong),
        0 0 0 1px var(--line);
}
.route-search-card:last-child .route-search-card__button {
    border-bottom: none;
}
.route-search-card__ref {
    margin: 0;
    color: var(--text);
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.route-search-card__preview {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    max-width: none;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.route-search-card__meta {
    color: var(--muted);
    font-family: "Geist", "Lexend", "Helvetica Neue", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Enhanced empty state */
.route-search-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    gap: 0.75rem;
    min-height: min(46vh, 20rem);
}
.route-search-empty-state__title {
    margin: 0;
    color: var(--text-secondary);
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.4;
}
.route-search-empty-state__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
    max-width: 32ch;
}
.route-search-empty-state__hint strong {
    color: var(--text-secondary);
    font-weight: 500;
}
.route-search-empty-state__examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    max-width: 280px;
}
.route-search-empty-state__example {
    flex: 0 0 auto;
    padding: 0.35rem 0.7rem;
    font-size: 0.7rem;
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    background: color-mix(in oklab, var(--bg-strong) 92%, transparent);
    border: 1px solid var(--line-subtle);
    border-radius: var(--rb-radius);
    cursor: pointer;
    transition: all 150ms ease;
    min-height: auto;
    min-width: auto;
    width: auto;
    text-transform: none;
}
@media (hover: hover) and (pointer: fine) {
.route-search-empty-state__example:hover {
    border-color: var(--brand-strong);
    color: var(--brand-strong);
    background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
}
}

.route-search-empty-state--error .route-search-empty-state__title {
    color: var(--bad);
}

/* Mobile adaptations */
@media (max-width: 640px) {
    body.route-view-search main {
        --route-search-query-size: 56px;
        --route-search-query-font: 1.25rem;
        width: 100%;
        padding: max(1rem, env(safe-area-inset-top))
            max(1rem, env(safe-area-inset-right))
            max(0.75rem, env(safe-area-inset-bottom))
            max(1rem, env(safe-area-inset-left));
    }
    body.route-view-search .panel {
        gap: 0.75rem;
    }

    /* Topic chips: keep marquee animation, hide duplicate track on mobile */
    .route-search-topic-chips {
        flex-wrap: nowrap;
    }
    .route-search-topic-chips__track[aria-hidden="true"] {
        display: none;
    }
    .route-search-topic-chip {
        flex: 0 0 auto;
    }

    /* Cards: tighter padding */
    .route-search-card__button {
        padding: 0.75rem 0.85rem 0.8rem 1rem;
    }
    .route-search-card__ref {
        font-size: 1.05rem;
    }
    .route-search-card__preview {
        font-size: 0.78rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-search-topic-chips__track {
        animation: none;
    }
    .route-search-status__badge--loading {
        animation: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* Empty /search: one chip row, then today's passage. */

.route-search-idle {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}
.route-search-idle::-webkit-scrollbar {
    display: none;
}
.route-search-idle[hidden] {
    display: none !important;
}

.route-search[data-search-idle="true"] .route-search-results-wrapper {
    display: none;
}
.route-search[data-search-idle="true"] .route-search-status:empty {
    display: none;
}

.route-search-topic-chips--row {
    overflow-x: auto;
    scrollbar-width: none;
}
.route-search-topic-chips--row::-webkit-scrollbar {
    display: none;
}
.route-search-topic-chips--row::before,
.route-search-topic-chips--row::after {
    display: none;
}
.route-search-topic-chips--row .route-search-topic-chips__track {
    animation: none;
}

.route-search-featured {
    margin: 0.35rem 0 1.25rem;
}
.route-search-featured__button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    width: min(100%, 40rem);
    min-height: 0;
    padding: 1.05rem 1.15rem 1.15rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--bg) 94%, var(--bg-strong) 6%);
    box-shadow: inset 3px 0 0 var(--brand-strong);
    text-align: left;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .route-search-featured__button:hover {
        background: color-mix(in oklab, var(--bg-strong) 88%, transparent);
    }
}
.route-search-featured__button:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand-strong) 55%, transparent);
    outline-offset: 2px;
}
.route-search-featured__kicker,
.route-search-featured__meta {
    margin: 0;
    font-family: "Geist", "Lexend", "Helvetica Neue", sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}
.route-search-featured__kicker {
    color: var(--brand-strong);
}
.route-search-featured__meta {
    color: var(--muted);
    font-weight: 500;
}
.route-search-featured__ref {
    margin: 0;
    color: var(--text);
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.route-search-featured__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Desktop idle: one composed launcher, not a top-stuck row. */
@media (min-width: 641px) {
    body.route-view-search .route-search[data-search-idle="true"] {
        --search-idle-chip-size: 2.25rem;
        --search-idle-chip-gap: 0.5rem;
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
        /* Main already pads the top. Land the field near 30% of the viewport. */
        padding-top: max(1.25rem, calc(30vh - clamp(24px, 4.5vh, 52px)));
        padding-bottom: 2.5rem;
    }
    body.route-view-search .route-search[data-search-idle="true"]::-webkit-scrollbar {
        display: none;
    }
    .route-search[data-search-idle="true"] .route-search-idle {
        flex: 0 0 auto;
        overflow: visible;
    }
    .route-search[data-search-idle="true"] .route-search-topic-chips--row {
        overflow: hidden;
        max-height: calc(
            var(--search-idle-chip-size) * 2 + var(--search-idle-chip-gap)
        );
    }
    .route-search[data-search-idle="true"]
        .route-search-topic-chips--row
        .route-search-topic-chips__track {
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        height: auto;
        padding-right: 0;
        gap: var(--search-idle-chip-gap);
    }
    .route-search[data-search-idle="true"] .route-search-topic-chip {
        flex: 0 0 auto;
        width: max-content;
        height: var(--search-idle-chip-size);
        min-width: 0;
        min-height: var(--search-idle-chip-size);
        max-width: 100%;
        padding: 0 0.85rem;
        overflow: hidden;
        font-size: 0.875rem;
        letter-spacing: 0.04em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .route-search[data-search-idle="true"] .route-search-featured,
    .route-search[data-search-idle="true"] .route-search-featured__button {
        width: 100%;
        max-width: none;
    }
    .route-search[data-search-idle="true"] .route-search-featured__button {
        gap: 0.55rem;
        padding: 1.35rem 1.4rem 1.45rem 1.5rem;
    }
    .route-search[data-search-idle="true"] .route-search-featured__ref {
        font-size: 1.75rem;
    }
    .route-search[data-search-idle="true"] .route-search-featured__text {
        font-size: 1.25rem;
        line-height: 1.45;
    }
}

@media (max-width: 640px) {
    body.route-view-search .route-search[data-search-idle="true"] {
        justify-content: flex-start;
        overflow-y: auto;
        padding-top: 0;
        padding-bottom: 0;
    }
    .route-search[data-search-idle="true"] .route-search-idle {
        flex: 1 1 auto;
        overflow: auto;
    }
    .route-search-featured__ref {
        font-size: 1.3rem;
    }
    .route-search-featured__text {
        font-size: 0.95rem;
    }
}

/* A wide touch device still keeps the field at the top. Desktop offset stays pointer-fine. */
@media (pointer: coarse) {
    body.route-view-search .route-search[data-search-idle="true"] {
        justify-content: flex-start;
        padding-top: 0;
        padding-bottom: 0;
    }
}


/* /search uses the home suggestion menu, anchored to the growing field. */

.route-search-query-row {
    z-index: 4;
}

.route-search-query-row .quick-search-autocomplete-list {
    /* Match the query-row border-box exactly (no ±1px inset/outset). */
    top: 100%;
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: min(320px, 46dvh);
    margin: 0;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: var(--rb-radius);
    background: var(--bg-soft);
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 5;
}

@media (max-width: 640px) {
    .route-search-query-row .quick-search-autocomplete-list {
        max-height: min(52dvh, calc(100dvh - 220px));
    }
}


.launcher-layout {
    display: grid;
    gap: 12px;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    overflow: hidden;
}
.launcher-layout--dashboard {
    --dashboard-space-xs: 0.5rem;
    --dashboard-space-sm: 0.75rem;
    --dashboard-space: 1.25rem;
    --dashboard-space-md: 1.75rem;
    --dashboard-tile-gap: 0.35rem;
    --dashboard-tile-min: 3.15rem;
    --dashboard-icon-size: 1.35rem;
    gap: var(--dashboard-space);
    grid-template-rows: auto auto auto;
    overflow: auto;
    align-content: start;
}
.launcher-apps-panel {
    display: grid;
    gap: 8px;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    transform: translateZ(0);
    backface-visibility: hidden;
}
.launcher-layout--dashboard .launcher-apps-panel {
    gap: var(--dashboard-space-sm);
    grid-template-rows: auto auto;
    min-height: 0;
}
.launcher-chooser--dashboard {
    overflow: visible !important;
    padding-bottom: 0 !important;
    contain: none !important;
}
.launcher-chooser--dashboard .dashboard-idle {
    margin-top: 0;
}
.launcher-section-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.launcher-preview-card {
    display: grid;
    gap: 6px;
    padding-top: 10px;
}
a.launcher-preview-trigger {
    text-decoration: none;
}
.launcher-preview-trigger {
    display: none;
    width: auto;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid color-mix(in oklab, var(--line) 74%, var(--brand) 26%);
    background: color-mix(
        in oklab,
        var(--bg-strong) 92%,
        rgba(var(--brand-rgb), 0.08)
    );
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
}
.launcher-preview-trigger:focus-visible {
    border-color: var(--brand-strong);
    background: color-mix(
        in oklab,
        var(--bg-strong) 84%,
        rgba(var(--brand-strong-rgb), 0.12)
    );
}
@media (hover: hover) and (pointer: fine) {
    .launcher-preview-trigger:hover {
        border-color: var(--brand-strong);
        background: color-mix(
            in oklab,
            var(--bg-strong) 84%,
            rgba(var(--brand-strong-rgb), 0.12)
        );
    }
}
.launcher-preview {
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
    line-height: 1.48;
    font-size: 0.94rem;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    min-height: calc(1.48em * 3);
    overflow: hidden;
}
.launcher-inline-verse {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.45;
    word-break: break-word;
    /* Reserve clamped height so skeleton → text never shifts layout. */
    --launcher-verse-lines: 3;
    min-height: calc(1.45em * var(--launcher-verse-lines));
}
.launcher-inline-verse:not([hidden]) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.launcher-inline-verse.is-skeleton {
    display: block;
    color: transparent;
    pointer-events: none;
}
.launcher-verse-skel {
    display: grid;
    gap: 0.42em;
    margin: 0;
    padding: 0.12em 0 0;
}
.launcher-verse-skel__line {
    display: block;
    height: 0.72em;
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--line) 78%, var(--muted) 22%);
}
.launcher-verse-skel__line--short {
    width: 68%;
}
@media (prefers-reduced-motion: no-preference) {
    .launcher-verse-skel__line {
        background: linear-gradient(
            90deg,
            color-mix(in oklab, var(--line) 88%, transparent) 0%,
            color-mix(in oklab, var(--muted) 28%, var(--line) 72%) 50%,
            color-mix(in oklab, var(--line) 88%, transparent) 100%
        );
        background-size: 200% 100%;
        animation: launcher-verse-shimmer 1.15s ease-in-out infinite;
    }
}
@keyframes launcher-verse-shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}
.launcher-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    padding: 18px;
    display: grid;
    align-items: center;
    transition: none;
    overflow: hidden;
}
.launcher-preview-scrim {
    position: absolute;
    inset: 0;
    background: var(--overlay-scrim);
    backdrop-filter: blur(4px);
}
.launcher-preview-dialog {
    position: relative;
    width: min(100%, 480px);
    justify-self: center;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    box-shadow: var(--shadow-lg);
    max-height: min(76dvh, 560px);
    overflow: auto;
}
.launcher-preview-dialog > * {
    min-width: 0;
}
.launcher-preview-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.launcher-preview-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--rb-radius);
    color: var(--muted);
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.launcher-preview-close svg {
    display: block;
    width: 16px;
    height: 16px;
}
.launcher-preview-close:focus-visible {
    border-color: var(--text-secondary);
    color: var(--text);
    background: var(--bg-strong);
}
@media (hover: hover) and (pointer: fine) {
    .launcher-preview-close:hover {
        border-color: var(--text-secondary);
        color: var(--text);
        background: var(--bg-strong);
    }
}
.launcher-preview-dialog-ref {
    margin: 0;
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.launcher-preview-dialog-text {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.94rem;
}
.launcher-catalog-dialog {
    width: min(100%, 680px);
    max-height: min(82dvh, 760px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 14px;
}
.launcher-catalog-search {
    min-height: 42px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--text);
    padding: 0 12px;
    font-size: 16px;
}
.launcher-catalog-search:focus-visible {
    border-color: var(--brand-strong);
    outline: none;
}
.launcher-catalog-search-wrap {
    position: relative;
}
.launcher-catalog-enter-hint {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-family: inherit;
    font-size: 11px;
    font-weight: 450;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}
.launcher-catalog-enter-hint[hidden] {
    display: none !important;
}
.launcher-catalog-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.launcher-catalog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
@media (max-width: 640px) {
    .launcher-catalog-nav {
        min-width: 0;
        max-width: 100%;
    }
    .launcher-catalog-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .launcher-catalog-tabs::-webkit-scrollbar {
        display: none;
    }
    .launcher-catalog-tab {
        flex: 0 0 auto;
    }
}
.launcher-catalog-tab {
    width: auto;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.launcher-catalog-tab[aria-selected="true"] {
    border-color: var(--brand);
    background: rgba(var(--brand-rgb), 0.14);
    color: var(--text);
}
.launcher-catalog-tabs[data-search-active="true"]
    .launcher-catalog-tab[aria-selected="true"] {
    border-color: var(--line);
    background: var(--bg-strong);
    color: var(--muted);
}
.launcher-catalog-subtab-select {
    margin-left: auto;
    width: auto;
    min-height: 32px;
    padding: 0 8px;
    padding-right: 32px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px);
    background-size: 5px 5px;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
    .launcher-catalog-subtab-select:hover {
        border-color: var(--brand-dim);
    }
}
.launcher-catalog-subtab-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand-dim);
}
.launcher-catalog-subtab-select option {
    background: var(--bg-strong);
    color: var(--text);
}
.launcher-catalog-subtab-select[hidden],
.launcher-catalog-tabs[data-search-active="true"]
    + .launcher-catalog-subtab-select {
    display: none;
}
.launcher-catalog-summary {
    margin: 0;
    font-size: 0.8rem;
    border: 0;
    box-shadow: none;
}
.launcher-catalog-results {
    min-height: 0;
    max-height: min(52dvh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    border: 0;
    box-shadow: none;
    gap: 6px;
}
.launcher-catalog-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: stretch;
    gap: 0;
    margin: 0;
    border: 0;
    background: color-mix(in oklab, var(--bg-strong) 90%, var(--text) 10%);
}
.launcher-catalog-results > .launcher-catalog-row + .launcher-catalog-row {
    margin-top: 0;
}
.launcher-catalog-row > .launcher-adapter,
.launcher-catalog-row > .launcher-catalog-pin {
    border: 0 !important;
    box-shadow: none;
    background: transparent;
}
.launcher-catalog-row[data-draggable="true"] {
    -webkit-user-select: none;
    user-select: none;
}
.launcher-catalog-row[data-draggable="true"] > .launcher-adapter {
    cursor: grab;
}
.launcher-catalog-row.is-dragging {
    background: rgba(var(--brand-rgb), 0.1);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.launcher-catalog-row.is-dragging > .launcher-adapter,
.launcher-catalog-row.is-dragging > .launcher-catalog-pin {
    border-color: var(--brand);
}
.launcher-catalog-row.is-touch-dragging {
    position: relative;
    z-index: 10;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px var(--brand);
    pointer-events: none;
    will-change: transform;
}
.launcher-catalog-results > .launcher-catalog-row > .launcher-adapter {
    min-height: 50px;
    align-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
}
.launcher-catalog-results
    > .launcher-catalog-row[data-one-time-completed="true"]
    > .launcher-adapter[data-low-priority="true"] {
    opacity: 0.45;
}
.launcher-catalog-results
    > .launcher-catalog-row[data-one-time-completed="true"]
    > .launcher-adapter[data-low-priority="true"]
    .launcher-adapter-icon,
.launcher-catalog-results
    > .launcher-catalog-row[data-one-time-completed="true"]
    > .launcher-adapter[data-low-priority="true"]
    .launcher-adapter-label {
    opacity: 1;
}
.launcher-catalog-results
    > .launcher-catalog-row
    > .launcher-adapter
    .launcher-adapter-icon,
.launcher-catalog-results
    > .launcher-catalog-row
    > .launcher-adapter
    .launcher-adapter-label {
    align-self: center;
}
.launcher-catalog-pin {
    min-height: 50px;
    padding: 0;
    border: 0;
    border-left: 1px solid color-mix(in oklab, var(--line) 55%, transparent);
    background: transparent;
    color: var(--muted);
}
.launcher-catalog-pin svg {
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
}
.launcher-catalog-row[data-pinned="true"] .launcher-catalog-pin {
    background: rgba(var(--brand-rgb), 0.16);
    border-color: var(--brand);
    color: var(--brand-strong);
}
.launcher-catalog-pin:focus-visible {
    position: relative;
    z-index: 2;
    outline: 2px solid var(--brand-strong);
    outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
    .launcher-catalog-pin:hover:not([disabled]) {
        color: var(--text);
        background: color-mix(
            in oklab,
            var(--bg-strong) 84%,
            rgba(var(--brand-strong-rgb), 0.12)
        );
        border-color: var(--brand);
    }
}
.launcher-catalog-pin[disabled] {
    opacity: 0.5;
    cursor: default;
}
.launcher-catalog-row[data-one-time-adapter="true"]
    > .launcher-catalog-pin[disabled] {
    opacity: 1;
}
.preview.muted {
    color: var(--muted);
}
@keyframes pulse-loading {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
.preview.is-loading {
    animation: pulse-loading 1.5s ease-in-out infinite;
    pointer-events: none;
}
.row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.row > * {
    flex: 1 1 0;
}
.chooser {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}
.chooser > .launcher-adapter + .launcher-adapter {
    border-top-width: 0;
}
.launcher-preview-card > .remember-toggle {
    margin-top: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .chooser
        > .launcher-adapter:hover:not([disabled]):not([aria-disabled="true"]) {
        position: relative;
        z-index: 1;
        border-top-width: 1px;
    }
    .launcher-catalog-results
        > .launcher-catalog-row[data-one-time-completed="true"]
        > .launcher-adapter[data-low-priority="true"]:hover {
        transform: none;
        box-shadow: none;
        background: var(--bg-strong);
        border-color: color-mix(in oklab, var(--line) 76%, var(--brand) 24%);
    }
}
.bible-position {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    padding: 8px 14px;
}
.bible-position-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.bible-position-head span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-transform: none;
}
.bible-position-head strong {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
}
.bible-position-ruler-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}
.bible-position-ruler {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: var(--rb-radius);
    background: var(--line);
}
.bible-position-ruler-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--rb-radius);
    background: var(--brand);
    transition: width 0.3s ease;
}
.bible-position-marker {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    /* Inherently circular marker — exception to --rb-radius: 0. */
    border-radius: 50%;
    background: var(--brand-strong);
    border: 2px solid var(--bg-strong);
    box-shadow: 0 0 0 1px var(--brand);
}
.bible-position-book-label {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    user-select: none;
}
.chooser button[disabled],
.chooser .launcher-adapter[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}
.launcher-footer {
    margin: 0;
    padding-top: 10px;
    border-top: 0;
}
/* Reader-only chrome: hidden on the dashboard-style launcher. */
body.route-view-launcher:not(.launcher-reader-active) .launcher-footer {
    display: none;
}
.launcher-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
    flex: 1 1 0;
}
.qr-card.is-pretty::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: var(--grain-paper-blend);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.02)),
        var(--route-bible-grain-image, none);
    background-repeat: no-repeat, repeat;
    background-position:
        center,
        left top;
    background-size:
        auto,
        512px auto;
    transition: opacity 0.3s ease-out;
}
body.grain-ready .qr-card.is-pretty::before {
    opacity: var(--grain-paper-opacity);
}
.qr-card.is-pretty > * {
    position: relative;
    z-index: 1;
}
body.route-view-launcher {
    --launcher-keyboard-inset: 0px;
    overflow: hidden;
}
body.route-view-launcher main {
    height: 100dvh;
    padding: 20px 14px;
    overflow: hidden;
    display: grid;
    place-items: stretch center;
}
body.route-view-launcher .panel {
    width: min(720px, 100%);
    margin-inline: auto;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}
body.route-view-launcher .panel::after {
    opacity: 0.07;
}
:root[data-theme="light"] body.route-view-launcher .panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}
:root[data-theme="light"] body.route-view-launcher .panel::before,
:root[data-theme="light"] body.route-view-launcher .panel::after {
    content: none;
    display: none;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.route-view-launcher .panel {
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    :root:not([data-theme="dark"]) body.route-view-launcher .panel::before,
    :root:not([data-theme="dark"]) body.route-view-launcher .panel::after {
        content: none;
        display: none;
    }
}
body.route-view-launcher .header {
    /* Sticky top chrome: title/actions + shared shell search. */
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title actions"
        "search search";
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 0;
    background: var(--bg);
    /* No hairline divider — spacing + sticky bg only. */
    box-shadow: none;
}
body.route-view-launcher .header > div:first-child {
    grid-area: title;
    min-width: 0;
}
body.route-view-launcher .header-actions {
    grid-area: actions;
    margin-left: 0;
}
body.route-view-launcher .quick-search.is-shell-search {
    grid-area: search;
}
body.route-view-launcher .header-actions .reader-open-button {
    display: none;
    width: auto;
    min-width: 52px;
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.02em;
    opacity: 0.85;
}
body.route-view-builder main {
    padding: 20px 14px;
}
body.route-view-builder .panel {
    padding: 20px 22px 14px;
}
body.route-view-launcher section.input-stack {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
body.route-view-launcher
    .quick-search.is-launcher-toolbar
    .quick-search-button {
    min-width: 82px;
}
body.route-view-launcher #launcher-chooser {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 2px;
    padding-bottom: calc(20px + var(--launcher-keyboard-inset, 0px));
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: paint;
}
/* Reader matches prod: hide shell header entirely; search docks in footer. */
body.route-view-launcher.launcher-reader-active .header,
body.route-view-launcher.launcher-reader-active .launcher-inline-verse,
body.route-view-launcher.launcher-reader-active .launcher-preview-card {
    display: none;
}
body.route-view-launcher.launcher-reader-active {
    --reader-bg: #090b10;
    --reader-surface: var(--reader-bg);
    --reader-text: #f7f8fb;
    /* Margin `.vnum` dark: #e7e5e4 */
    --reader-number: #e7e5e4;
    --reader-selected: #ffb07a;
}
:root.route-reader-active {
    --reader-bg: #090b10;
    --bg: var(--reader-bg);
    background: var(--reader-bg);
}
:root[data-theme="light"] body.route-view-launcher.launcher-reader-active {
    --reader-bg: #fffaf3;
    --reader-surface: var(--reader-bg);
    --reader-text: #1c1712;
    /* Margin `.vnum` light: #57534e */
    --reader-number: #57534e;
    --reader-selected: #c94f12;
}
:root[data-theme="light"].route-reader-active {
    --reader-bg: #fffaf3;
    --bg: var(--reader-bg);
    background: var(--reader-bg);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]).route-reader-active {
        --reader-bg: #fffaf3;
        --bg: var(--reader-bg);
        background: var(--reader-bg);
    }

    :root:not([data-theme="dark"])
        body.route-view-launcher.launcher-reader-active {
        --reader-bg: #fffaf3;
        --reader-surface: var(--reader-bg);
        --reader-text: #1c1712;
        --reader-number: #57534e;
        --reader-selected: #c94f12;
    }
}
:root.route-reader-active body.route-view-launcher.launcher-reader-active,
:root.route-reader-active body.route-view-launcher.launcher-reader-active main {
    background: var(--reader-bg);
}
body.route-view-launcher.launcher-reader-active main {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    zoom: 1;
}
body.route-view-launcher.launcher-reader-active .launcher-layout,
body.route-view-launcher.launcher-reader-active .launcher-layout--dashboard {
    /* Match prod: two tracks (apps + footer). Desktop named areas are set in
       responsive.css; avoid empty preview/remember tracks on phone (extra gaps). */
    gap: 4px;
    overflow: hidden;
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr) auto;
}
body.route-view-launcher.launcher-reader-active .panel {
    /* Undo the non-reader 720px centered column — reader is full-bleed like prod. */
    width: 100%;
    max-width: none;
    margin-inline: 0;
    background: var(--reader-bg);
    padding-top: 10px;
}
body.route-view-launcher.launcher-reader-active .launcher-chooser--dashboard {
    /* Dashboard chooser unlocks overflow; reader must scroll like prod. */
    overflow: auto !important;
    contain: layout style !important;
}
:root[data-theme="light"] body.route-view-launcher.launcher-reader-active .panel {
    background: var(--reader-bg);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"])
        body.route-view-launcher.launcher-reader-active
        .panel {
        background: var(--reader-bg);
    }
}
body.route-view-launcher.launcher-reader-active .panel::after {
    opacity: 0;
}
body.route-view-launcher.launcher-reader-active .launcher-apps-panel {
    position: relative;
    gap: 0;
    grid-template-rows: minmax(0, 1fr);
    /* Same centering as Notes/Memorize .panel — margin auto, not justify-self
       alone (that was 1px off the shared content column at 1280). */
    justify-self: center;
    width: var(--rb-page-shell, min(920px, calc(100% - 48px)));
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    transform: none;
    backface-visibility: visible;
}
@media (min-width: 768px) {
    body.route-view-launcher.launcher-reader-active .launcher-apps-panel {
        /* Match Overview/Notes: 2px end gutter so --rb-content-column centers alike. */
        padding-right: var(--rb-page-shell-gutter, 2px);
    }
}
body.route-view-launcher.launcher-reader-active .launcher-apps-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 30px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        var(--reader-surface, var(--reader-bg, var(--bg))) 0%,
        color-mix(
                in oklab,
                var(--reader-surface, var(--reader-bg, var(--bg))) 72%,
                transparent
            )
            52%,
        transparent 100%
    );
    transition: opacity 0.12s ease;
}
body.route-view-launcher.launcher-reader-active
    .launcher-apps-panel[data-reader-can-scroll-bottom]::after {
    opacity: 1;
}
body.route-view-launcher.launcher-reader-active #launcher-chooser {
    background: transparent;
    color: var(--reader-text);
    padding-bottom: 0;
    /* Gutter lives on .launcher-apps-panel only — a second 2px here shifted
       the reader column 1px left of Notes/Memorize/History at 1280. */
    padding-right: 0;
    scrollbar-width: none;
    transform: none;
    contain: layout style;
}
body.route-view-launcher.launcher-reader-active #launcher-chooser::-webkit-scrollbar {
    width: 0;
    height: 0;
}
body.route-view-launcher.launcher-reader-active #go-builder-link {
    display: none;
}
body.route-view-launcher.launcher-reader-active .launcher-footer {
    justify-self: center;
    width: var(--rb-page-shell, min(920px, calc(100% - 48px)));
    padding-top: 4px;
}
body.route-view-launcher.launcher-reader-active
    .launcher-apps-panel.has-overflow
    #launcher-chooser {
    padding-bottom: 0;
    -webkit-mask-image: none;
    mask-image: none;
}
@media (max-width: 900px) {
    body.route-view-launcher.launcher-reader-active .panel {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        box-shadow: none;
        padding: max(12px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
    }
}
body.route-view-launcher .launcher-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
    order: 4;
}
body.route-view-launcher .selah-badge {
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.62rem;
}
body.preview-modal-open {
    overflow: hidden;
}
.launcher-share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid color-mix(in oklab, var(--line) 72%, var(--brand) 28%);
    background: color-mix(
        in oklab,
        var(--bg-strong) 90%,
        rgba(var(--brand-rgb), 0.09)
    );
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0 14px;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}
.launcher-share-link:focus-visible {
    background: color-mix(
        in oklab,
        var(--bg-strong) 84%,
        rgba(var(--brand-strong-rgb), 0.14)
    );
    border-color: var(--brand-strong);
    color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
    .launcher-share-link:hover {
        background: color-mix(
            in oklab,
            var(--bg-strong) 84%,
            rgba(var(--brand-strong-rgb), 0.14)
        );
        border-color: var(--brand-strong);
        color: var(--text);
    }
}
.launcher-share-link.is-featured-root {
    background: var(--brand);
    border-color: var(--brand-strong);
    color: var(--brand-contrast);
    box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.16);
}
.launcher-share-link.is-featured-root:focus-visible {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    color: var(--brand-contrast);
}
@media (hover: hover) and (pointer: fine) {
    .launcher-share-link.is-featured-root:hover {
        background: var(--brand-strong);
        border-color: var(--brand-strong);
        color: var(--brand-contrast);
    }
}
.launcher-adapter {
    min-height: 38px;
    display: grid;
    grid-template-columns: var(--adapter-grid-cols, auto minmax(0, 1fr));
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px);
    border-color: color-mix(in oklab, var(--line) 76%, var(--brand) 24%);
    background: color-mix(
        in oklab,
        var(--bg-strong) 50%,
        rgba(var(--brand-rgb), 0.02)
    );
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease;
}
:root[data-theme="light"] body.route-view-launcher .launcher-adapter {
    border-color: var(--line);
    background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"])
        body.route-view-launcher
        .launcher-adapter {
        border-color: var(--line);
        background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
    }
}
.launcher-adapter:focus-visible {
    outline: none;
    box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
    .launcher-adapter:hover:not([disabled]):not([aria-disabled="true"]) {
        background: color-mix(
            in oklab,
            var(--bg-strong) 84%,
            rgba(var(--brand-strong-rgb), 0.12)
        );
        border-color: var(--brand);
    }
    :root[data-theme="light"]
        body.route-view-launcher
        .launcher-adapter:hover:not([disabled]):not([aria-disabled="true"]) {
        border-color: var(--line);
        background: color-mix(in oklab, var(--bg) 55%, transparent);
    }
    @media (prefers-color-scheme: light) {
        :root:not([data-theme="dark"])
            body.route-view-launcher
            .launcher-adapter:hover:not([disabled]):not(
                [aria-disabled="true"]
            ) {
            border-color: var(--line);
            background: color-mix(in oklab, var(--bg) 55%, transparent);
        }
    }
}
.launcher-adapter:active {
    transform: none;
}
.launcher-adapter[data-launch-state="opening"] {
    position: relative;
    z-index: 1;
    border-color: var(--brand);
    background: color-mix(
        in oklab,
        var(--bg-strong) 78%,
        rgba(var(--brand-strong-rgb), 0.16)
    );
    pointer-events: none;
}
.chooser > .launcher-adapter + .launcher-adapter[data-launch-state="opening"] {
    border-top-width: 1px;
    margin-top: -1px;
}
.launcher-adapter[data-launch-state="opening"] .launcher-adapter-title::after {
    content: " · Opening...";
    color: var(--brand-strong);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
}
.launcher-adapter[data-launch-state="opening"] .launcher-adapter-subtitle {
    color: color-mix(in oklab, var(--brand-strong) 74%, var(--text) 26%);
}
.launcher-adapter-icon {
    width: var(--adapter-icon-width, 24px);
    height: var(--adapter-icon-width, 24px);
    flex: 0 0 var(--adapter-icon-width, 24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    background: var(--adapter-icon-bg, transparent);
    border-radius: var(--adapter-icon-radius, var(--rb-radius));
    color: var(--adapter-icon-color, inherit);
    overflow: var(--adapter-icon-overflow, visible);
}
.launcher-adapter-icon.is-wordmark {
    width: var(--adapter-icon-width, 30px);
    height: auto;
    flex-basis: var(--adapter-icon-width, 30px);
}
.launcher-adapter-icon svg {
    width: var(--adapter-icon-img-size, 100%);
    height: var(--adapter-icon-img-size, 100%);
    display: block;
}
.launcher-adapter-icon img {
    width: var(--adapter-icon-img-size, 100%);
    height: var(--adapter-icon-img-size, 100%);
    display: block;
    object-fit: cover;
    border-radius: var(--rb-radius);
    transform: scale(var(--adapter-icon-img-scale, 1));
}
.launcher-adapter-icon img[data-fit="contain"] {
    object-fit: contain;
    border-radius: var(--rb-radius);
}
:root[data-theme="light"] .launcher-adapter-icon img[data-theme="invert"] {
    filter: invert(1) brightness(1.12);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"])
        .launcher-adapter-icon
        img[data-theme="invert"] {
        filter: invert(1) brightness(1.12);
    }
}
.launcher-adapter-icon-more {
    color: color-mix(
        in oklab,
        var(--search-offer-accent-strong) 36%,
        var(--text) 64%
    );
}
.launcher-adapter-icon-more-chip {
    fill: color-mix(
        in oklab,
        var(--search-offer-accent) 5%,
        var(--bg-strong) 95%
    );
}
.launcher-adapter-icon-more-dot {
    fill: currentColor;
}
.launcher-adapter-label {
    min-width: 0;
    display: grid;
    gap: 3px;
    align-items: start;
    align-self: center;
    line-height: 1.1;
}
.launcher-adapter-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.launcher-adapter-title {
    color: var(--text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.launcher-adapter-title-hidden {
    display: none;
}
.launcher-adapter-subtitle {
    color: color-mix(in oklab, var(--muted) 88%, var(--brand) 12%);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.launcher-adapter-label[data-inline-subtitle="true"] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}
.launcher-adapter-label[data-inline-subtitle="true"]
    .launcher-adapter-subtitle {
    font-weight: 320;
    color: color-mix(in oklab, var(--muted) 90%, var(--brand) 10%);
}
.launcher-adapter-more {
    border-color: color-mix(
        in oklab,
        var(--search-offer-accent-strong) 9%,
        var(--line) 91%
    );
    background: linear-gradient(
        135deg,
        color-mix(
                in oklab,
                var(--search-offer-accent) 0.75%,
                var(--bg-strong) 97%
            )
            0%,
        color-mix(
                in oklab,
                var(--search-offer-accent) 0.35%,
                var(--bg-strong) 98.75%
            )
            54%,
        color-mix(
                in oklab,
                var(--search-offer-accent) 0.15%,
                var(--bg-strong) 99.25%
            )
            100%
    );
    touch-action: manipulation;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.launcher-adapter-more .launcher-adapter-title {
    color: color-mix(in oklab, var(--search-offer-title) 24%, var(--text) 76%);
}
.launcher-adapter-more .launcher-adapter-subtitle {
    color: color-mix(in oklab, var(--text) 92%, var(--search-offer-accent) 8%);
}
@media (hover: hover) and (pointer: fine) {
    .launcher-adapter-more:hover:not([disabled]) {
        border-color: color-mix(
            in oklab,
            var(--search-offer-accent-strong) 18%,
            var(--line) 82%
        );
        background: linear-gradient(
            135deg,
            color-mix(
                    in oklab,
                    var(--search-offer-accent) 4.5%,
                    var(--bg-strong) 95.5%
                )
                0%,
            color-mix(
                    in oklab,
                    var(--search-offer-accent) 2.2%,
                    var(--bg-strong) 97.8%
                )
                52%,
            color-mix(
                    in oklab,
                    var(--search-offer-accent) 1%,
                    var(--bg-strong) 99%
                )
                100%
        );
    }
}
.remember-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    background: var(--bg-soft);
    border: 1px solid var(--line-subtle);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.76rem;
    cursor: pointer;
    width: 100%;
    border-radius: var(--rb-radius);
    appearance: none;
    -webkit-appearance: none;
    opacity: 0.8;
}
.remember-toggle:focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: 2px;
}
.remember-toggle:active {
    transform: none;
}
@media (hover: hover) and (pointer: fine) {
    .remember-toggle:hover {
        background: var(--bg-strong);
        color: var(--text);
        border-color: var(--line);
        opacity: 1;
    }
}
.remember-toggle[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand-strong);
    color: var(--brand-contrast);
    opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
    .remember-toggle[aria-pressed="true"]:hover {
        background: var(--brand-strong);
        border-color: var(--brand-strong);
    }
}
.launcher-status {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 100;
    margin: 0;
    padding: 8px 18px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    translate: -50% 8px;
    transition:
        opacity 0.2s ease,
        translate 0.2s ease;
}
.launcher-status.toast-visible {
    opacity: 1;
    translate: -50% 0;
}
.launcher-status.toast-exit {
    opacity: 0;
    translate: -50% 8px;
}

/* ── Verse study ── */
.launcher-preview-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.launcher-verse-study-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid color-mix(in oklab, var(--line) 74%, var(--brand) 26%);
    background: color-mix(
        in oklab,
        var(--bg-strong) 92%,
        rgba(var(--brand-rgb), 0.08)
    );
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}
.launcher-verse-study-trigger svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.launcher-verse-study-trigger:focus-visible {
    border-color: var(--brand-strong);
    background: color-mix(
        in oklab,
        var(--bg-strong) 84%,
        rgba(var(--brand-strong-rgb), 0.12)
    );
}
@media (hover: hover) and (pointer: fine) {
    .launcher-verse-study-trigger:hover {
        border-color: var(--brand-strong);
        background: color-mix(
            in oklab,
            var(--bg-strong) 84%,
            rgba(var(--brand-strong-rgb), 0.12)
        );
    }
}
.launcher-verse-study-dialog {
    width: min(100%, 520px);
    max-height: min(82dvh, 680px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
}
.launcher-verse-study-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.launcher-verse-study-tab {
    width: auto;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        border-color 0.12s ease,
        background 0.12s ease,
        color 0.12s ease;
}
.launcher-verse-study-tab.active {
    border-color: var(--brand);
    background: rgba(var(--brand-rgb), 0.14);
    color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
    .launcher-verse-study-tab:not(.active):hover {
        border-color: color-mix(in oklab, var(--line) 60%, var(--brand) 40%);
        color: var(--text-secondary);
    }
}
.launcher-verse-study-content {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    min-height: 0;
}
.launcher-verse-study-loading,
.launcher-verse-study-error {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}
.launcher-verse-study-error {
    color: var(--bad);
}
/* Overview: verse text + preview blocks */
.verse-study-text {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.7;
    font-style: italic;
}
.verse-study-preview-block {
    padding: 8px 0;
    border-top: 1px solid var(--line-subtle);
}
.verse-study-preview-block:first-child,
.verse-study-text + .verse-study-preview-block {
    border-top: none;
}
.verse-study-preview-label {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.verse-study-preview-title {
    margin: 0 0 3px;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
}
.verse-study-preview-content {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.6;
}
/* Note groups */
.verse-study-note-group {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-subtle);
}
.verse-study-note-group:first-child {
    padding-top: 0;
}
.verse-study-note-group:last-child {
    border-bottom: none;
}
.verse-study-note-source {
    margin-bottom: 8px;
}
.verse-study-note-source-label {
    margin: 0;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.verse-study-note-source-desc {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.4;
}
.verse-study-note {
    padding: 6px 0;
}
.verse-study-note + .verse-study-note {
    border-top: 1px solid var(--line-subtle);
}
.verse-study-note-title {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.verse-study-note-title::-webkit-details-marker {
    display: none;
}
.verse-study-note-title::before {
    content: "\25B8";
    font-size: 0.7em;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.12s ease;
}
.verse-study-note[open] > .verse-study-note-title::before {
    transform: rotate(90deg);
}
.verse-study-note-body {
    padding: 6px 0 2px 14px;
}
.verse-study-note-body p {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.65;
}
.verse-study-note-body p:last-child {
    margin-bottom: 0;
}
.verse-study-note-truncated {
    font-size: 0.78rem;
}
/* Words: interlinear by verse */
.verse-study-verse-block {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-subtle);
}
.verse-study-verse-block:last-child {
    border-bottom: none;
}
.verse-study-interlinear {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
}
.verse-study-vnum {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--brand-strong);
    padding: 0 3px 0 0;
    align-self: flex-start;
    line-height: 1.3;
    user-select: none;
}
.verse-study-il-word {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 3px;
    text-align: center;
}
.il-original {
    font-size: 0.88rem;
    line-height: 1.25;
    color: var(--text);
    direction: auto;
}
.il-gloss {
    font-size: 0.64rem;
    line-height: 1.15;
    color: var(--muted);
    margin-top: 1px;
    white-space: nowrap;
}
.il-strongs {
    font-size: 0.54rem;
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.1s ease;
}
@media (hover: hover) and (pointer: fine) {
.verse-study-il-word:hover .il-strongs {
    opacity: 0.6;
}
}

@media (hover: hover) and (pointer: fine) {
.il-strongs:hover {
    color: var(--brand-strong);
    text-decoration: underline;
    opacity: 1 !important;
}
}


/* Reader mode */
.reader-mode {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    background: transparent;
    color: var(--reader-text, var(--text));
}
.reader-verse-rail {
    position: absolute;
    top: 46px;
    right: env(safe-area-inset-right, 0);
    bottom: 18px;
    z-index: 25;
    width: 32px;
    padding-left: 18px;
    border-radius: var(--rb-radius);
    background: transparent;
    opacity: 0.56;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition:
        width 0.16s ease,
        padding-left 0.16s ease,
        opacity 0.16s ease,
        background-color 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
.reader-verse-rail:hover {
    width: 36px;
    padding-left: 12px;
    opacity: 1;
    outline: none;
}
}
.reader-verse-rail.visible,
.reader-verse-rail:focus-visible {
    width: 36px;
    padding-left: 12px;
    opacity: 1;
    outline: none;
}

.reader-verse-rail.dragging {
    width: 38px;
    padding-left: 8px;
    opacity: 1;
    background: transparent;
    outline: none;
}
.reader-verse-rail.is-native-scroll {
    pointer-events: none;
}
.reader-verse-rail.is-selection-hidden {
    opacity: 0;
    pointer-events: none;
}
.reader-verse-rail-checkpoints {
    position: absolute;
    inset: 20px -1px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
}
.reader-verse-rail-dot {
    width: 15px;
    height: 2px;
    flex: 0 0 2px;
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--reader-number) 45%, transparent);
    opacity: 0.42;
    transition:
        width 0.12s ease,
        background-color 0.12s ease,
        opacity 0.12s ease,
        box-shadow 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
.reader-verse-rail:hover .reader-verse-rail-dot {
    opacity: 0.48;
}
}
.reader-verse-rail:focus-visible .reader-verse-rail-dot,
.reader-verse-rail.visible .reader-verse-rail-dot,
.reader-verse-rail.dragging .reader-verse-rail-dot {
    opacity: 0.48;
}

.reader-verse-rail.dragging .reader-verse-rail-dot {
    background: color-mix(in oklab, var(--reader-text) 36%, transparent);
    opacity: 0.82;
}
.reader-verse-rail-dot.current {
    width: 42px;
    background: var(--reader-selected, var(--brand));
    opacity: 1;
    box-shadow: 0 0 10px
        color-mix(in oklab, var(--reader-selected) 28%, transparent);
}
.reader-verse-rail-dot.wave-3 {
    width: 16px;
    background: color-mix(in oklab, var(--reader-number) 56%, transparent);
    opacity: 0.54;
}
.reader-verse-rail-dot.wave-2 {
    width: 17px;
    background: color-mix(in oklab, var(--reader-number) 64%, transparent);
    opacity: 0.62;
}
.reader-verse-rail-dot.wave-1 {
    width: 21px;
    background: color-mix(in oklab, var(--reader-number) 74%, transparent);
    opacity: 0.74;
}
.reader-verse-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 55;
    min-width: 96px;
    height: 96px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
    border-radius: var(--rb-radius);
    background: color-mix(
        in oklab,
        var(--reader-surface, var(--reader-bg, var(--bg))) 96%,
        transparent
    );
    color: var(--reader-text, var(--text));
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
}
.reader-verse-modal[hidden] {
    display: none;
}
.reader-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 0 0 4px;
    background-color: var(--reader-surface, var(--reader-bg, var(--bg)));
    box-shadow: 0 -32px 0 32px
        var(--reader-surface, var(--reader-bg, var(--bg)));
}
.reader-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    height: 30px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        var(--reader-surface, var(--reader-bg, var(--bg))) 0%,
        color-mix(
                in oklab,
                var(--reader-surface, var(--reader-bg, var(--bg))) 72%,
                transparent
            )
            52%,
        transparent 100%
    );
    transition: opacity 0.12s ease;
}
body.route-view-launcher.launcher-reader-active
    #launcher-chooser[data-reader-scrolled]
    .reader-header::after {
    opacity: 1;
}
.reader-header .reader-title {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    margin: 0;
    min-width: 0;
    color: var(--reader-text, var(--text));
    font-size: 0.85rem;
    font-weight: 650;
    letter-spacing: 0;
}
.reader-title-suffix {
    min-width: 0;
    overflow: hidden;
    color: color-mix(in oklab, var(--reader-text, var(--text)) 34%, transparent);
    font: inherit;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reader-verse {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-height: 0;
    padding-block: 9px;
    padding-inline: 0;
    cursor: default;
    align-content: start;
    line-height: 1.55;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.reader-verse + .reader-verse {
    border-top-width: 0;
}
body.route-view-launcher.launcher-reader-active .reader-verse {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding-block: 9px;
    padding-inline: 0 44px;
    border: 0;
    background: transparent;
    /* No press scale/translate — durable-core owns rail + transform:none. */
    transition: none;
    transform: none;
}
:root[data-theme="light"]
    body.route-view-launcher.launcher-reader-active
    .reader-verse.launcher-adapter {
    border-color: transparent;
    background: transparent;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"])
        body.route-view-launcher.launcher-reader-active
        .reader-verse.launcher-adapter {
        border-color: transparent;
        background: transparent;
    }
}
body.route-view-launcher.launcher-reader-active
    #launcher-chooser
    > .reader-verse
    + .reader-verse {
    border-top-width: 0;
}
body.route-view-launcher.launcher-reader-active .reader-verse.is-selected {
    border-color: transparent;
    background: transparent;
}
@media (hover: hover) and (pointer: fine) {
    body.route-view-launcher.launcher-reader-active
        .reader-verse:hover:not([disabled]):not([aria-disabled="true"]) {
        border-color: transparent;
        background: transparent;
    }
}
.reader-verse.is-selected {
    position: relative;
    z-index: 1;
}
body.route-view-launcher.launcher-reader-active.reader-selection-dragging
    .reader-verse.is-selected,
body.route-view-launcher.launcher-reader-active .reader-verse:active,
body.route-view-launcher.launcher-reader-active .reader-verse.is-selected:active {
    transform: none !important;
}
.reader-verse.reader-rail-active-verse .reader-verse-text {
    font-weight: 450;
    text-shadow:
        0.028em 0 0 currentColor,
        -0.028em 0 0 currentColor;
}
.reader-verse-num {
    width: 28px;
    min-width: 28px;
    min-height: 0;
    height: auto;
    padding: 0;
    display: block;
    align-self: start;
    font-size: 0.94rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: inherit;
    letter-spacing: 0;
    border: 0;
    background: transparent;
    color: var(--reader-number, var(--muted));
    border-radius: var(--rb-radius);
    cursor: pointer;
    text-align: center;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.reader-verse-num:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 40%, transparent);
}
.reader-verse-num.selected,
.reader-verse-num[aria-pressed="true"] {
    color: var(--reader-selected, var(--brand));
}
@media (hover: hover) and (pointer: fine) {
    .reader-verse-num:hover:not(.selected):not([aria-pressed="true"]) {
        color: var(--reader-text, var(--text));
    }
}
.reader-verse-text {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.94rem;
    font-weight: 400;
    line-height: inherit;
    color: var(--reader-text, var(--text));
    cursor: pointer;
    text-align: left;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.reader-verse-text:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand) 35%, transparent);
    outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .reader-verse-text:hover {
        color: var(--reader-selected, var(--brand-strong));
    }
}
.reader-verse.is-selected .reader-verse-text {
    color: var(--reader-selected, var(--brand-strong));
}
.reader-empty {
    margin: 0;
    padding: 14px 0;
    color: var(--muted);
    font-size: 0.86rem;
}
.reader-share-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    line-height: 0;
    cursor: pointer;
}
.reader-share-button svg {
    width: 21px;
    height: 21px;
}
.reader-share-button:focus-visible {
    outline: none;
    color: var(--text);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 35%, transparent);
}
@media (hover: hover) and (pointer: fine) {
    .reader-share-button:hover {
        color: var(--text);
    }
}


/* Search-first home dashboard: pinned grid + recents under search. */

body.route-view-dashboard {
    --dashboard-space-xs: 0.5rem;
    --dashboard-space-sm: 0.75rem;
    --dashboard-space: 1.25rem;
    --dashboard-space-md: 1.75rem;
    --dashboard-space-lg: 2.25rem;
    --dashboard-tile-gap: 0.35rem;
    --dashboard-tile-min: 3.15rem;
    --dashboard-icon-size: 1.35rem;
    /* Match live landing quick-search field (42px). */
    --route-search-query-size: 42px;
    --route-search-query-font: 0.98rem;
    --route-search-query-leading: calc(var(--route-search-query-font) * 1.3);
    --route-search-query-pad-block: calc(
        (var(--route-search-query-size) - var(--route-search-query-leading)) / 2
    );
    --landing-search-width: var(--rb-content-column, min(42rem, 100%));
}

body.route-view-dashboard main {
    place-items: start center;
    /* Live landing rhythm: wordmark + search sit mid-viewport when idle.
       No inline pad — --rb-page-shell owns the 48px inset so column edges
       match the reader. */
    padding: clamp(72px, 18vh, 200px) 0 clamp(28px, 7vh, 72px);
    overflow-x: clip;
    max-width: 100vw;
}

/* Outer measure matches the reader page shell (durable-core). Keep main
   full-bleed so --rb-page-shell + --rb-content-column own the edges. */
body.route-view-dashboard main,
body.route-view-landing.route-view-dashboard main,
body.route-view-search.route-view-dashboard main {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    zoom: 1;
}

/* Only animate padding after first paint (see enterDashboardChrome). */
body.route-view-dashboard.route-dashboard-settled main {
    transition: padding 160ms ease;
}

/* Results in focus: pull chrome up so the list starts higher. */
body.route-view-dashboard:has(
        .route-search[data-search-idle="false"]
    )
    main {
    padding-top: clamp(16px, 3vh, 28px);
    padding-bottom: clamp(20px, 5vh, 48px);
}

body.route-view-dashboard .panel {
    place-items: center;
    /* Same outer shell as the reader (durable-core --rb-page-shell). */
    width: var(--rb-page-shell, min(920px, calc(100% - 48px)));
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    overflow-x: clip;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    body.route-view-dashboard .panel {
        padding-right: var(--rb-page-shell-gutter, 2px);
    }
}

body.route-view-dashboard .header {
    width: var(--rb-content-column, min(42rem, 100%));
    max-width: 100%;
    margin: 0 auto var(--dashboard-space);
    gap: 32px;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

body.route-view-dashboard h1.shell-brand {
    text-align: center;
}

body.route-view-dashboard:has(
        .route-search[data-search-idle="false"]
    )
    .header {
    margin-bottom: var(--dashboard-space-sm);
    gap: var(--dashboard-space-sm);
}

/* Condensed home brand while search is active — same cap/mark ratio. */
body.route-view-dashboard:has(
        .route-search[data-search-idle="false"]
    )
    h1.shell-brand .shell-brand-link {
    --rb-brand-mark: 1.35rem;
}

body.route-view-dashboard .landing-passage-search {
    display: none;
}

body.route-view-landing .landing-stack {
    display: block;
    width: 100%;
}

body.route-view-dashboard .landing-stack {
    display: grid;
    gap: var(--dashboard-space-lg);
    width: 100%;
}

body.route-view-dashboard .route-search {
    width: var(--landing-search-width);
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    overflow-x: clip;
    box-sizing: border-box;
}

body.route-view-dashboard .route-search-box {
    display: grid;
    gap: var(--dashboard-space-sm);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 5;
    padding-bottom: 2px;
    background: var(--bg);
}

/* With results: hide suggestion chips so the list is the focal point. */
body.route-view-dashboard
    .route-search[data-search-idle="false"]
    .route-search-topic-chips {
    display: none !important;
}

body.route-view-dashboard .route-search-topic-chips[hidden] {
    display: none !important;
}

/* While idle (typing, Recents still shown) keep the chips row's space so
   Recents does not jump up 44px on the first keystroke; collapse only once
   results take over (data-search-idle="false"). */
body.route-view-dashboard
    .route-search[data-search-idle="true"]
    .route-search-topic-chips[hidden] {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
}

body.route-view-dashboard
    .route-search:not([data-search-idle="true"])
    .route-search-box.route-search-box--chips-hidden {
    gap: 0;
}

body.route-view-dashboard
    .route-search[data-search-idle="false"]
    .route-search-box {
    gap: 0;
}

body.route-view-dashboard
    .route-search[data-search-idle="false"] {
    gap: var(--dashboard-space-xs);
}

/* Match live `.quick-search.is-landing-main .quick-search-field`. */
body.route-view-dashboard .route-search-query-row,
body.route-view-dashboard
    .route-search-query-row.route-search-query-row--landing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: var(--route-search-query-size);
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
    box-shadow: none;
    outline: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}

body.route-view-dashboard
    .route-search-query-row:focus-within {
    border-color: var(--line);
    background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
    outline: none;
}

body.route-view-dashboard .route-search-picker-expand {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    width: 42px;
    min-width: 42px;
    height: auto;
    min-height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: transparent;
    color: color-mix(in oklab, var(--text-secondary) 92%, var(--muted) 8%);
    cursor: pointer;
    grid-row: 1;
    grid-column: 1;
    transition:
        color 120ms ease,
        background-color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
body.route-view-dashboard
    .route-search-picker-expand:hover {
    color: var(--text);
    background: color-mix(in oklab, var(--bg) 55%, transparent);
}
}


body.route-view-dashboard .route-search-query-input {
    grid-row: 1;
    grid-column: 2;
    height: var(--route-search-query-size);
    min-height: var(--route-search-query-size);
    max-height: calc(
        var(--route-search-query-leading) * 4 +
            var(--route-search-query-pad-block) * 2
    );
    padding: var(--route-search-query-pad-block) 16px;
    font-size: var(--route-search-query-font);
    font-weight: 520;
    letter-spacing: 0;
    line-height: var(--route-search-query-leading);
}

body.route-view-dashboard
    .route-search-query-row--has-value
    .route-search-query-input {
    padding-right: calc(36px + 8px);
}

body.route-view-dashboard
    .route-search-query-input::placeholder {
    color: color-mix(in oklab, var(--muted) 86%, transparent);
    font-size: var(--route-search-query-font);
    font-weight: 520;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.route-view-dashboard .route-search-query-clear {
    width: 36px;
    min-width: 36px;
    right: var(--route-search-query-size);
    grid-column: 2;
}

body.route-view-dashboard .route-search-query-go,
body.route-view-dashboard
    .route-search-query-go.is-visible {
    position: relative;
    grid-row: 1;
    grid-column: 3;
    top: auto;
    right: auto;
    bottom: auto;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    height: auto;
    align-self: stretch;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    opacity: 1;
    pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    body.route-view-dashboard .route-search-query-go:hover {
        background: var(--text);
        color: var(--bg);
    }
}
body.route-view-dashboard
        .route-search-query-go:focus-visible {
        background: var(--text);
        color: var(--bg);
    }

/* Chips: live search-page sharp bordered chips (no pills / tint tiles). */
body.route-view-dashboard .route-search-topic-chips,
body.route-view-dashboard .route-search-topic-chips--row {
    --search-idle-chip-gap: 0.45rem;
    --search-idle-chip-size: 2rem;
    position: relative;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    margin-top: 0;
    /* Fixed single-row height: chips never wrap, so the box never grows. */
    height: var(--search-idle-chip-size);
    max-height: var(--search-idle-chip-size);
    min-height: var(--search-idle-chip-size);
    padding: 0;
}

body.route-view-dashboard
    .route-search-topic-chips::-webkit-scrollbar,
body.route-view-dashboard
    .route-search-topic-chips--row::-webkit-scrollbar {
    display: none;
}

/* Edge fades as a mask on the scroller itself (the old ::before/::after
   overlays scrolled with the content: the left fade sat on the first chip at
   scrollLeft 0). data-at-start / data-at-end come from scroll-edge-fade.ts;
   the markup ships data-at-start="true" so first paint has no left fade.
   A mask never affects layout. */
body.route-view-dashboard .route-search-topic-chips::before,
body.route-view-dashboard .route-search-topic-chips::after {
    content: none;
    display: none;
}

body.route-view-dashboard .route-search-topic-chips {
    --chip-fade-size: 28px;
    --chip-fade-start: var(--chip-fade-size);
    --chip-fade-end: var(--chip-fade-size);
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--chip-fade-start),
        #000 calc(100% - var(--chip-fade-end)),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--chip-fade-start),
        #000 calc(100% - var(--chip-fade-end)),
        transparent 100%
    );
}
body.route-view-dashboard .route-search-topic-chips:not([data-at-start="false"]) {
    --chip-fade-start: 0px;
}
body.route-view-dashboard .route-search-topic-chips[data-at-end="true"] {
    --chip-fade-end: 0px;
}

body.route-view-dashboard
    .route-search-topic-chips--row
    .route-search-topic-chips__track {
    animation: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    min-width: max-content !important;
    max-width: none;
    height: var(--search-idle-chip-size);
    gap: var(--search-idle-chip-gap);
    padding-inline: 0.15rem 0.35rem;
}

body.route-view-dashboard .route-search-topic-chip {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: auto;
    min-width: max-content;
    max-width: none;
    height: var(--search-idle-chip-size) !important;
    min-height: var(--search-idle-chip-size);
    max-height: var(--search-idle-chip-size);
    padding: 0 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-subtle) !important;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--muted);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (hover: hover) and (pointer: fine) {
    body.route-view-dashboard .route-search-topic-chip:hover {
        border-color: var(--line) !important;
        color: var(--text-secondary);
        background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
    }
}
body.route-view-dashboard
        .route-search-topic-chip:focus-visible {
        border-color: var(--line) !important;
        color: var(--text-secondary);
        background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
    }

body.route-view-dashboard .landing-stack,
body.route-view-dashboard .route-search-idle {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Recents/Pinned: same width and edges as the search box + chips column. */
body.route-view-dashboard .dashboard-idle,
body.route-view-dashboard .dashboard-columns {
    width: var(--landing-search-width);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
}

body.route-view-dashboard .route-search-status,
body.route-view-dashboard .route-search-results-wrapper {
    /* Fill `.route-search` so edges match the search bar exactly. */
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
}

body.route-view-dashboard
    .route-search[data-search-idle="false"]
    .route-search-status {
    /* Keep reserved status height so meta text cannot shift the results. */
    min-height: 1.35rem;
    height: 1.35rem;
    /* Keep horizontal auto so meta stays in the search-bar column. */
    margin-block: 0;
    margin-inline: auto;
    padding-top: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* Spacing below the status line lives on the bordered wrapper, not inside it:
   a margin on the results list left a ~5.6px sliver between the box's top
   border and the first card. The first card now sits on the border. */
body.route-view-dashboard
    .route-search[data-search-idle="false"]
    .route-search-results-wrapper {
    margin-top: 0.35rem;
}
body.route-view-dashboard
    .route-search[data-search-idle="false"]
    .route-search-results {
    margin-top: 0;
    padding-top: 0;
}

.dashboard-idle {
    width: 100%;
    min-width: 0;
    margin-top: var(--dashboard-space-md);
}

.dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dashboard-space-md);
    width: 100%;
    min-width: 0;
}

.dashboard-section {
    min-width: 0;
    background: transparent;
}

.dashboard-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    margin: 0 0 var(--dashboard-space-sm);
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    box-sizing: border-box;
}

.dashboard-section-bar__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-transform: none;
}

.dashboard-section-bar__action {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    margin-inline-start: auto;
    padding: 0.15rem 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: color-mix(in oklab, var(--bg) 82%, transparent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.dashboard-section-bar__action:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--bg) 55%, transparent);
    outline-offset: 2px;
}

.dashboard-section-bar__action[hidden] {
    display: none !important;
}

.dashboard-pinned-grid {
    /* One row: all pinned tiles + … share the column width. */
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--dashboard-tile-gap);
    padding: 0;
    border: 0;
    background: transparent;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Tiles: square icon-only surfaces + gaps. No cell borders / stacked lines. */
.dashboard-pinned-tile.launcher-adapter {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
    /* Hold final square size before icons paint (avoids tile grow CLS). */
    min-height: var(--dashboard-tile-min);
    min-width: var(--dashboard-tile-min);
    max-width: 100%;
    padding: 0.35rem;
    border: 0 !important;
    border-radius: var(--rb-radius);
    box-shadow: none !important;
    text-align: center;
    background: color-mix(in oklab, var(--bg-strong) 82%, var(--bg) 18%);
    transition: background-color 0.12s ease;
    contain: layout style;
}

.dashboard-pinned-grid > .dashboard-pinned-tile + .dashboard-pinned-tile {
    border: 0 !important;
    border-top-width: 0 !important;
    border-left-width: 0 !important;
}

.dashboard-pinned-tile .launcher-adapter-icon {
    width: var(--dashboard-icon-size);
    height: var(--dashboard-icon-size);
    margin: 0 auto;
    flex: 0 0 auto;
}

.dashboard-pinned-tile .launcher-adapter-icon img,
.dashboard-pinned-tile .launcher-adapter-icon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-pinned-tile .launcher-adapter-label,
.dashboard-pinned-tile .launcher-adapter-subtitle,
.dashboard-pinned-tile .launcher-adapter-title-row {
    display: none;
}

/* Name stays in aria-label + title; no visible label in the square tile. */
.dashboard-pinned-tile__label {
    display: none !important;
}

.dashboard-pinned-tile--more .dashboard-pinned-tile__more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dashboard-icon-size);
    height: var(--dashboard-icon-size);
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.dashboard-pinned-tile--more .dashboard-pinned-tile__label {
    display: none;
}

.dashboard-recents-list {
    list-style: none;
    display: grid;
    gap: var(--dashboard-tile-gap);
    margin: 0;
    padding: 0;
}

/* Skeleton placeholders for pinned / recents while idle chrome hydrates. */
.dashboard-skel-tiles {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--dashboard-tile-gap);
}
.dashboard-skel-tile {
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    min-height: var(--dashboard-tile-min);
    min-width: var(--dashboard-tile-min);
    background: color-mix(in oklab, var(--bg-strong) 82%, var(--bg) 18%);
}
.dashboard-skel-rows {
    display: grid;
    gap: var(--dashboard-tile-gap);
}
.dashboard-skel-row {
    min-height: 2.75rem;
    background: color-mix(in oklab, var(--bg-strong) 82%, var(--bg) 18%);
}
@media (prefers-reduced-motion: no-preference) {
    .dashboard-skel-tile,
    .dashboard-skel-row {
        background: linear-gradient(
            90deg,
            color-mix(in oklab, var(--line) 88%, transparent) 0%,
            color-mix(in oklab, var(--muted) 28%, var(--line) 72%) 50%,
            color-mix(in oklab, var(--line) 88%, transparent) 100%
        );
        background-size: 200% 100%;
        animation: dashboard-skel-shimmer 1.15s ease-in-out infinite;
    }
}
@keyframes dashboard-skel-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.dashboard-recents-item {
    margin: 0;
    border: 0;
    background: color-mix(in oklab, var(--bg-strong) 82%, var(--bg) 18%);
}

.dashboard-recents-item + .dashboard-recents-item {
    border: 0;
}

.dashboard-recents-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.7rem 0.8rem;
    color: inherit;
    text-decoration: none;
}

.dashboard-recents-link:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand-strong) 55%, transparent);
    outline-offset: -2px;
}

.dashboard-recents-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.4rem;
    min-width: 0;
}

.dashboard-recents-title {
    color: var(--text);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dashboard-recents-title--search {
    font-style: italic;
}

.dashboard-recents-detail {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.35;
}

.dashboard-recents-time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    white-space: nowrap;
}

.dashboard-recents-empty {
    margin: 0;
    padding: 0.9rem 0.8rem;
    border: 0;
    background: color-mix(in oklab, var(--bg-strong) 82%, var(--bg) 18%);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

@media (min-width: 641px) {
    body.route-view-dashboard,
    body.route-view-launcher .launcher-layout--dashboard {
        --dashboard-space: 1.35rem;
        --dashboard-space-md: 2rem;
        --dashboard-space-lg: 2.5rem;
        --dashboard-tile-gap: 0.4rem;
        --dashboard-tile-min: 3.35rem;
        --dashboard-icon-size: 1.45rem;
        --route-search-query-font: 0.98rem;
        --route-search-query-size: 42px;
        --route-search-query-leading: calc(var(--route-search-query-font) * 1.3);
        --route-search-query-pad-block: calc(
            (var(--route-search-query-size) - var(--route-search-query-leading)) /
                2
        );
        --search-idle-chip-gap: 0.45rem;
    }

    body.route-view-dashboard main {
        /* Match live landing vertical rhythm. */
        padding: clamp(150px, 30vh, 265px) 24px clamp(24px, 8vh, 72px);
    }

    body.route-view-dashboard:has(
            .route-search[data-search-idle="false"]
        )
        main {
        padding: clamp(56px, 10vh, 140px) 24px clamp(24px, 6vh, 56px);
    }

    body.route-view-dashboard .header {
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto var(--dashboard-space-md);
    }

    body.route-view-dashboard h1 {
        font-size: clamp(2.9rem, 2.05rem + 3.25vw, 4.9rem);
        line-height: 0.88;
        letter-spacing: -0.07em;
        text-align: center;
    }

    body.route-view-dashboard .route-search-box {
        gap: var(--dashboard-space-sm);
    }

    body.route-view-dashboard
        .route-search[data-search-idle="false"]
        .route-search-box {
        gap: 0;
    }

    /* Desktop chips stay on ONE horizontally scrolling row (no wrap); see base rule. */
}

/* Keep Pinned + Recents stacked in the same centered column at all widths. */

@media (hover: hover) and (pointer: fine) {
    .dashboard-section-bar__action:hover {
        color: var(--bg);
    }

    .dashboard-pinned-tile.launcher-adapter:hover:not([disabled]):not(
            [aria-disabled="true"]
        ) {
        border: 0 !important;
        box-shadow: none !important;
        background: color-mix(
            in oklab,
            var(--bg-strong) 70%,
            rgba(var(--brand-strong-rgb), 0.1)
        );
    }

    .dashboard-recents-link:hover .dashboard-recents-title {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.14em;
    }
}

/*
 * Passage pages: soften Pinned / Recents so the verse is the focal point.
 * Landing dashboard keeps the stronger bars. Reader chrome is untouched.
 */
body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-section-bar {
    padding: 0;
    background: transparent;
    color: var(--muted);
}

body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-section-bar__title {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-section-bar__action {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-section-bar__action:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand-strong) 55%, transparent);
    outline-offset: 2px;
}

body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-pinned-tile.launcher-adapter {
    background: var(--surface-inline-bg);
}

body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-pinned-tile--more
    .dashboard-pinned-tile__more {
    color: var(--muted);
    font-weight: 650;
}

body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-recents-item,
body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-recents-empty {
    background: var(--surface-inline-bg);
}

body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-recents-title {
    color: var(--text-secondary);
    font-weight: 600;
}

body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-recents-detail,
body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-recents-time,
body.route-view-launcher:not(.launcher-reader-active)
    .launcher-layout--dashboard
    .dashboard-recents-empty {
    color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard
        .dashboard-section-bar__action:hover {
        color: var(--text-secondary);
    }

    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard
        .dashboard-pinned-tile.launcher-adapter:hover:not([disabled]):not(
            [aria-disabled="true"]
        ) {
        background: color-mix(
            in oklab,
            var(--surface-inline-bg) 72%,
            rgba(var(--brand-strong-rgb), 0.1)
        );
    }

    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard
        .dashboard-recents-link:hover
        .dashboard-recents-title {
        color: var(--text);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.14em;
    }
}

/* Unified search chrome — beat route-view-search layout.css rules. */
body.route-view-search.route-view-dashboard {
    /* Same tokens as home dashboard search. */
    --route-search-query-size: 42px;
    --route-search-query-font: 0.98rem;
    --route-search-query-leading: calc(var(--route-search-query-font) * 1.3);
    --route-search-query-pad-block: calc(
        (var(--route-search-query-size) - var(--route-search-query-leading)) / 2
    );
    --landing-search-width: var(--rb-content-column, min(42rem, 100%));
}

body.route-view-search.route-view-dashboard main {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: clip;
    overflow-y: visible;
    display: grid;
    place-items: start center;
    padding: clamp(72px, 18vh, 200px) 16px clamp(28px, 7vh, 72px);
    box-sizing: border-box;
    zoom: 1;
}
/* Results page: page-title chrome (not brand hero) — same top as Notes. */
body.route-view-search.rb-view-search-page.route-view-dashboard main {
    padding: 0;
    place-items: start center;
}

body.route-view-search.route-view-dashboard:has(
        .route-search[data-search-idle="false"]
    )
    main {
    padding-top: clamp(16px, 3vh, 28px);
    padding-bottom: clamp(20px, 5vh, 48px);
}
body.route-view-search.rb-view-search-page.route-view-dashboard:has(
        .route-search[data-search-idle="false"]
    )
    main {
    padding: 0;
}

body.route-view-search.route-view-dashboard .panel {
    display: grid;
    place-items: center;
    width: var(--rb-page-shell, min(920px, calc(100% - 48px)));
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    flex: none;
    overflow: visible;
    gap: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}
body.route-view-search.rb-view-search-page.route-view-dashboard .panel {
    place-items: start stretch;
    padding: var(--rb-page-chrome-top, 14px) 0 2.5rem;
}
@media (min-width: 768px) {
    body.route-view-search.route-view-dashboard .panel {
        padding-right: var(--rb-page-shell-gutter, 2px);
    }
    body.route-view-search.rb-view-search-page.route-view-dashboard .panel {
        padding-right: var(--rb-page-shell-gutter, 2px);
    }
}

body.route-view-search.route-view-dashboard .route-search {
    width: var(--landing-search-width);
    max-width: 100%;
    min-width: 0;
    flex: none;
    overflow: visible;
    margin: 0 auto;
    box-sizing: border-box;
}

body.route-view-search.route-view-dashboard .route-search-results-wrapper {
    flex: none;
    min-height: 0;
    width: 100%;
}

body.route-view-search.route-view-dashboard .header {
    width: var(--rb-content-column, min(42rem, 100%));
    max-width: 100%;
    position: static;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    body.route-view-dashboard main,
    body.route-view-search.route-view-dashboard main {
        padding-inline: 0;
    }
    body.route-view-dashboard .panel,
    body.route-view-search.route-view-dashboard .panel {
        width: 100%;
        max-width: 100%;
        padding-inline: var(--rb-phone-pad, 18px);
        padding-right: var(--rb-phone-pad, 18px);
        box-sizing: border-box;
    }
    body.route-view-search.rb-view-search-page.route-view-dashboard .panel {
        padding: calc(env(safe-area-inset-top, 0px) + var(--rb-page-title-top, 12px))
            var(--rb-phone-pad, 18px)
            calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }
    body.route-view-dashboard .header,
    body.route-view-search.route-view-dashboard .header {
        width: 100%;
        max-width: 100%;
    }
}

/* Search-bar book/chapter/verse picker (home + /search). Absolute overlay under
   the bar so opening it never shifts layout. */
body.route-view-dashboard .route-search-pickers-panel[hidden] {
    display: none !important;
}
body.route-view-dashboard .route-search-pickers-panel:not([hidden]) {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 41;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-top: 0;
    background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
}
body.route-view-dashboard .route-search-picker-field {
    flex: 1 1 0;
    display: flex;
    min-width: 0;
}
body.route-view-dashboard .route-search-picker-field[data-picker-field="book"] {
    flex: 2 1 0;
}
body.route-view-dashboard .route-search-picker-field[hidden] {
    display: none !important;
}
body.route-view-dashboard
    .route-search-picker-field
    + .route-search-picker-field {
    border-left: 1px solid var(--line);
}
body.route-view-dashboard .route-search-picker-select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    cursor: pointer;
}
body.route-view-dashboard .route-search-picker-select:focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: -2px;
}
body.route-view-dashboard
    .route-search-picker-expand[aria-expanded="true"] {
    color: var(--text);
}

/* Chips row → dark "Recents" header: tight like other section headers
   (was ~45px: route-search gap + 2rem idle margin). */
body.route-view-dashboard .route-search-idle .dashboard-idle {
    margin-top: 0;
}

/* Beat search-today.css desktop idle wrap (overflow:hidden + flex-wrap):
   dashboard chips are always one touch/trackpad-scrollable row. */
body.route-view-dashboard
    .route-search[data-search-idle]
    .route-search-topic-chips--row {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: var(--search-idle-chip-size);
}
body.route-view-dashboard
    .route-search[data-search-idle]
    .route-search-topic-chips--row
    .route-search-topic-chips__track {
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content !important;
    height: var(--search-idle-chip-size);
}

/* Passage launcher: Pinned/Recents span the full search-bar width (the
   chooser's 2px scrollbar-dodge padding left them 2px short of the bar). */
body.route-view-launcher:not(.launcher-reader-active)
    #launcher-chooser.launcher-chooser--dashboard {
    padding-right: 0;
}


/* History (/history): visit log inside the shared app shell (tabs + column).
   One content column; no HOME › escape hatch; no divider lines. */

/* Recents bar: "History ›" link — same treatment as the bar's text actions. */
.dashboard-section-bar__link {
    text-decoration: none;
}
/* Icon-only History link. Its layout box is exactly the old text link's box
   (a zero-width text strut + the action's 0.15rem block padding), so the
   Recents row height is unchanged; the icon and a 32x32 tap target are
   absolutely positioned on top and never affect layout. */
.dashboard-section-bar__icon-link {
    /* 32px visual even inside the zoomed (--page-scale) launcher main. */
    --history-hit: calc(32px / var(--page-scale, 1));
    position: relative;
    display: inline-block;
    width: var(--history-hit);
    /* Ends exactly at the bar's content edge: the Recents section clips
       overflow on phones, so the tap target grows leftward instead. */
    margin-inline-end: 0;
}
.dashboard-section-bar__icon-link::before {
    content: "\200b";
}
.dashboard-section-bar__icon-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--history-hit);
    transform: translateY(-50%);
}
.dashboard-section-bar__icon {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 1.35em;
    height: 1.35em;
    transform: translateY(-50%);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .dashboard-section-bar__link:hover {
        color: var(--bg);
    }
    body.route-view-launcher .launcher-layout--dashboard .dashboard-section-bar__link:hover {
        color: var(--text-secondary);
    }
}

.history-panel {
    display: block;
    width: var(--rb-content-column, min(42rem, 100%));
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding: 0;
    box-sizing: border-box;
    --dashboard-tile-gap: 0.35rem;
}

.history-header.rb-page-head {
    min-width: 0;
}

/* Size/weight come from shared .rb-page-title (= .reader-chapter-head). */
.history-title.rb-page-title {
    text-transform: none;
}

.history-count.rb-page-lede {
    margin: 0;
}

.history-tools,
.history-confirm {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0 0 var(--rb-page-tabs-to-content, 16px);
    min-width: 0;
}

.history-confirm[hidden],
.history-clear[hidden] {
    display: none;
}

.history-tools .history-filter {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
    color: var(--text);
    font: 400 0.95rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
}

.history-filter::placeholder {
    color: var(--muted);
}
.history-filter:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--text) 30%, transparent);
    outline-offset: 1px;
}

.history-clear,
.history-confirm__yes,
.history-confirm__no {
    flex: 0 0 auto;
    min-height: 44px;
    margin: 0;
    padding: 0 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--text);
    font: 500 0.84rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    cursor: pointer;
}

.history-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.history-confirm {
    flex-wrap: wrap;
}
.history-confirm__text {
    flex: 1 1 100%;
    margin: 0 0 0.35rem;
    color: var(--text-secondary, var(--muted));
    font: 400 0.88rem/1.35 "Lexend", "Helvetica Neue", sans-serif;
}

.history-confirm__yes {
    color: var(--bad, #c07c84);
}

.history-day {
    margin: 0 0 1.25rem;
}
.history-day__label {
    margin: 0 0 0.45rem;
    color: var(--text-secondary);
    font: 600 0.72rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.history-panel .dashboard-recents-item {
    margin: 0;
}
.history-panel .dashboard-recents-title {
    font-weight: 500;
}

.history-panel .dashboard-recents-detail,
.history-panel .dashboard-recents-time {
    color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
    .history-clear:not(:disabled):hover,
    .history-confirm__no:hover {
        background: var(--rb-fill, color-mix(in oklab, var(--text) 6%, transparent));
    }
    .history-panel .dashboard-recents-link:hover .dashboard-recents-title {
        color: var(--text);
    }
}


h1:has(> .shell-title-overview),
p.shell-passage-title:has(> .shell-title-overview) {
    min-width: 0;
}

h1 .shell-title-overview,
p.shell-passage-title .shell-title-overview {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    text-decoration: none;
    cursor: pointer;
    transform: none;
}

/* Clearer chapter-overview entry: whole title block is one hit target. */
body.launcher-reader-active .shell-overview-affordance {
    display: none !important;
}

.shell-title-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

/* Stretched hit target — covers title + CHAPTER OVERVIEW ›, not header actions. */
.shell-title-block__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-shadow: none;
    color: transparent;
    font: inherit;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transform: none;
    appearance: none;
    -webkit-appearance: none;
}

@media (hover: hover) and (pointer: fine) {
.shell-title-block__hit:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: transparent;
    transform: none;
}
}
.shell-title-block__hit:active,
.shell-title-block__hit:focus {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: transparent;
    transform: none;
}


.shell-title-block__hit:focus {
    outline: none;
}

.shell-title-block__hit:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand-strong) 55%, transparent);
    outline-offset: 4px;
}

.shell-overview-affordance--link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    transform: none;
    pointer-events: none;
}

.shell-overview-affordance[hidden] {
    display: none !important;
}

.shell-overview-affordance--link .shell-overview-affordance__chevron {
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.8;
}

/* Subtle color shift only; no underline. Fine pointers only (no sticky hover on touch). */
@media (hover: hover) and (pointer: fine) {
    .shell-title-block:hover .shell-title-overview {
        text-decoration: none;
        color: color-mix(in oklab, var(--text) 82%, var(--brand-strong) 18%);
    }

    .shell-title-block:hover .shell-overview-affordance--link {
        color: var(--text-secondary);
        text-decoration: none;
    }
}

.chapter-overview-view {
    min-height: 0;
    /* Document/window is the scroller so wheel/trackpad/touch work in the
       side gutters and empty areas, not only over the center column. */
    overflow: visible;
}

.chapter-overview-view[hidden] {
    display: none !important;
}

/* Clip horizontal overflow on the root so the viewport stays the vertical scroller. */
html:has(body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active)) {
    overflow-x: clip;
}

body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) {
    overflow: visible;
}

/* Pre-JS: the server marks chapter pages so the empty shell already has the
   overview's full-bleed width (no 990→1425px main jump at boot). */
main[data-boot-view="chapter-overview"] {
    width: 100%;
    max-width: none;
    padding: 0;
    zoom: 1;
}

/*
  Match the reader shell: zoom 1, full-bleed main/panel, title top = 10px
  (desktop) / safe-area+12 (phone). Chrome + article share --rb-content-column
  so Read ↔ Overview only swaps content below the tabs.
*/
body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) main {
    width: 100%;
    max-width: none;
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: visible;
    zoom: 1;
}

body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .panel {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;
    margin-inline: 0;
    /*
      Reader panel padding-top is 10px plus launcher-layout gap: 4px above the
      apps track — total 14px before the shared chrome.
    */
    padding: 14px 0 0;
    overflow: visible;
}

/* Phone: same title top (safe-area + 12) and 18px side pad as the reader. */
@media (max-width: 767px) {
    body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) main {
        padding: 0;
    }
    body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .panel {
        padding-inline: 0;
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    }
    body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .chapter-overview-body {
        padding-top: 0;
        padding-inline: var(--rb-phone-pad, 18px);
        box-sizing: border-box;
    }
}

/* Same as reader: shell header is replaced by in-flow reader-chapter-chrome. */
body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .header {
    display: none;
}

/* Match reader cream so Read ↔ Overview does not flash a different page tone. */
:root[data-theme="light"] body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active),
:root[data-theme="light"] body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .panel,
:root[data-theme="light"] body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .chapter-overview-view {
    --bg: #fffaf3;
    --reader-bg: #fffaf3;
    background-color: #fffaf3;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active),
    :root:not([data-theme="dark"]) body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .panel,
    :root:not([data-theme="dark"]) body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .chapter-overview-view {
        --bg: #fffaf3;
        --reader-bg: #fffaf3;
        background-color: #fffaf3;
    }
}

.chapter-overview-fade {
    position: fixed;
    z-index: 3;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        color-mix(in oklab, var(--bg) 72%, transparent) 0%,
        transparent 100%
    );
}

.chapter-overview-fade[hidden] {
    display: none;
}

body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .launcher-layout {
    width: 100%;
    align-self: stretch;
    margin-inline: 0;
    flex: 0 1 auto;
    min-height: 0;
    gap: 0;
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-content: start;
    overflow: visible;
}

body.route-view-launcher.chapter-overview-active .launcher-layout > :not(.chapter-overview-view) {
    display: none !important;
}

body.route-view-launcher.chapter-overview-active .chapter-overview-view:not([hidden]) {
    display: block;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.route-view-launcher.chapter-overview-active .chapter-overview-view:not([hidden]) {
        /*
          Same outer shell as launcher-reader-active .launcher-apps-panel, plus
          the 2px end gutter #launcher-chooser keeps for its scrollbar — so
          --rb-content-column centers on the same edges as .reader-mode.
        */
        width: var(--rb-page-shell, min(920px, calc(100% - 48px)));
        margin-inline: auto;
        padding-right: var(--rb-page-shell-gutter, 2px);
        box-sizing: border-box;
    }
}

/*
  One shared column with the reader (--rb-content-column). Chrome and article
  both fill this body, so title / share / tabs / breadcrumb / cards share edges.
*/
.chapter-overview-body {
    width: var(--rb-content-column);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 32px);
}

/* Shared chapter chrome — same geometry as the reader (title / share / tabs). */
.chapter-overview-body > .reader-chapter-chrome {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
}

/* Grounding --muted is #6b6358. route.bible --muted in light is #7b7267. */
:root[data-theme="light"] .chapter-overview {
    --muted: #6b6358;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .chapter-overview {
        --muted: #6b6358;
    }
}

.chapter-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: start;
    font-size: 1rem;
}

.chapter-overview > :not(.chapter-overview-bar),
.chapter-overview .names,
.chapter-overview .nl {
    grid-column: 1;
    min-width: 0;
}

.chapter-overview .names {
    display: contents;
}

/* Phone: body pad owns the 18px edge; bar label keeps its inner inset. */
@media (max-width: 767px) {
    .chapter-overview h2.chapter-overview-bar,
    .chapter-overview h3.chapter-overview-bar,
    .chapter-overview .names h3.chapter-overview-bar {
        padding-inline: 0.9rem;
    }
}

.chapter-overview h2.chapter-overview-bar,
.chapter-overview h3.chapter-overview-bar,
.chapter-overview .names h3.chapter-overview-bar {
    position: static;
    z-index: 0;
    grid-column: 1;
    margin: 32px 0 0;
    padding: 0.62rem 0.9rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-transform: none;
}

.chapter-overview h2 {
    margin: 2.75rem 0 0.75rem;
    color: var(--text);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-transform: none;
}

.chapter-overview h2.chapter-overview-quiet {
    margin-top: 2.5rem;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
}

.chapter-overview h3 {
    margin: 1.1rem 0 0.15rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.chapter-overview-where {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.35rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.35;
}

.chapter-overview-where a {
    color: inherit;
    text-decoration: none;
}

.chapter-overview-book {
    color: var(--text);
    font-weight: 600;
}

.chapter-overview-sep {
    color: var(--muted);
}

.chapter-overview-pos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin-top: 0.45rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    white-space: normal;
    min-width: 0;
    max-width: 100%;
}

.chapter-overview-setting {
    flex: 1 1 8rem;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chapter-overview-dots {
    display: flex;
    flex: 1 1 5rem;
    gap: 2px;
    min-width: 3.5rem;
    max-width: 18rem;
    height: 6px;
}

.chapter-overview-dots i {
    flex: 1;
    border-radius: var(--rb-radius);
    background: var(--line-subtle, var(--line));
}

.chapter-overview-dots i.is-on {
    background: var(--brand-strong);
}

.chapter-overview-setting-k {
    margin-right: 0.35rem;
    color: var(--text-secondary);
    font-weight: 600;
}

a.chapter-overview-read {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 44px;
    margin-left: auto;
    padding: 0 0.2rem 0 0.6rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-shadow: none;
    color: #a8501b;
    font: 600 0.85rem "Lexend", "Helvetica Neue", sans-serif;
    line-height: 1;
    text-decoration: none;
    transform: none;
    cursor: pointer;
}
/* Inline title-row toggle replaces this legacy in-row Read link. */
.chapter-overview-body:has(> .reader-chapter-chrome) a.chapter-overview-read {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
a.chapter-overview-read:hover {
    color: #a8501b;
    text-decoration: none;
    background: transparent;
}
}
a.chapter-overview-read:focus {
    color: #a8501b;
    text-decoration: none;
    background: transparent;
}


.chapter-overview-lead {
    margin-top: 32px;
    padding: 20px 18px;
    background: var(--bg-strong);
}

.chapter-overview-lead p {
    max-width: 62ch;
    margin: 0;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;
}

.chapter-overview-lead p.chapter-overview-from {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 400;
}

.chapter-overview-watch {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.55;
}

.chapter-overview-watch b {
    color: var(--text);
    font-weight: 600;
}

.chapter-overview-sections {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}

.chapter-overview-sections > li {
    border: 0;
}

a.chapter-overview-section {
    display: block;
    padding: 16px;
    border-radius: var(--rb-radius);
    background: var(--bg-strong);
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
a.chapter-overview-section:hover {
    color: inherit;
    text-decoration: none;
    background: color-mix(in oklab, var(--bg-strong) 78%, var(--text) 22%);
}
}
a.chapter-overview-section:focus,
a.chapter-overview-section:active {
    color: inherit;
    text-decoration: none;
    background: color-mix(in oklab, var(--bg-strong) 78%, var(--text) 22%);
}


.chapter-overview-range {
    display: block;
    margin-bottom: 0.15rem;
    color: #a8501b;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    line-height: 1.4;
}

.chapter-overview-section-title {
    display: block;
    color: var(--text);
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.chapter-overview-section-detail {
    display: block;
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 0.97rem;
    line-height: 1.6;
}

.chapter-overview-section-detail.is-quote {
    font-style: italic;
}

.chapter-overview mark {
    padding: 0 0.08em;
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--brand) 28%, transparent);
    color: inherit;
    font-style: normal;
}

a.chapter-overview-inline {
    display: inline;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: inherit;
    white-space: normal;
    vertical-align: baseline;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in oklab, var(--brand-strong) 45%, transparent);
    cursor: pointer;
}

.chapter-overview-world {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}

.chapter-overview-world div {
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--bg-strong);
}

.chapter-overview-world dt {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.chapter-overview-world dd {
    margin: 0;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}

/* Long descriptive values (Written for, >40 chars): body-size regular text on
   a full-width row under the short facts, so short cards are not stretched
   tall beside one long card. */
.chapter-overview-world div.is-long {
    flex: 1 1 100%;
    min-width: 100%;
}
.chapter-overview-world div.is-long dd {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
}

.chapter-overview .names {
    margin-top: 0;
}

.chapter-overview .names h3 {
    margin: 1.1rem 0 0.15rem;
    color: var(--muted);
    font: 500 0.8rem/1.3 "Lexend", "Helvetica Neue", system-ui, sans-serif;
}

.chapter-overview .nl {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.chapter-overview .nl > li {
    min-width: 0;
}

button.nb {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--bg-strong);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button.nb:focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: 2px;
    border-radius: var(--rb-radius);
}

button.nb b,
button.nb span {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    overflow-wrap: break-word;
}

button.nb b {
    font: 700 1.05rem/1.3 "Lexend", "Helvetica Neue", system-ui, sans-serif;
    color: var(--text);
}

button.nb span {
    font: 400 0.88rem/1.35 "Lexend", "Helvetica Neue", system-ui, sans-serif;
    color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
    button.nb:hover {
        background: color-mix(in oklab, var(--bg-strong) 78%, var(--text) 22%);
    }

    button.nb:hover b {
        color: #a8501b;
    }

    :root[data-theme="dark"] button.nb:hover b {
        color: #f0a273;
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) button.nb:hover b {
        color: #f0a273;
    }
}

button.nb[aria-expanded="true"] b {
    color: #a8501b;
}

.chapter-overview-xrefs {
    display: grid;
    gap: 40px;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

.chapter-overview-xrefs > li {
    display: grid;
    gap: 8px;
    padding: 0;
    border: 0;
}

.chapter-overview-xref-source {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0.72;
}

.chapter-overview-xref-section {
    margin: 0;
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

a.chapter-overview-xref {
    display: block;
    min-height: 44px;
    padding: 14px 16px 14px 13px;
    border: 0;
    border-left: 3px solid color-mix(in oklab, var(--text) 32%, transparent);
    border-radius: var(--rb-radius);
    background: var(--bg-strong);
    color: inherit;
    text-decoration: none;
}

a.chapter-overview-xref b {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.chapter-overview-xref-from {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: var(--rb-radius);
    background: var(--bg);
    color: var(--muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    line-height: 1.3;
    vertical-align: 2px;
}

.chapter-overview-xref-snip {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
}

details.chapter-overview-more {
    margin-top: 16px;
}

details.chapter-overview-more summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--brand-strong);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

details.chapter-overview-more summary::-webkit-details-marker {
    display: none;
}

details.chapter-overview-more summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin: -0.2rem 0 0 0.55rem;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

details.chapter-overview-more[open] summary::after {
    margin-top: 0.2rem;
    transform: rotate(-135deg);
}

.chapter-overview-nav-button,
.chapter-overview-retry {
    width: auto;
    min-height: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    transform: none;
    box-shadow: none;
    cursor: pointer;
}

.pop {
    position: absolute;
    z-index: 30;
    width: min(22rem, calc(100vw - 2rem));
    background: var(--bg-soft);
    color: var(--text);
    font: 16px/1.58 "Lexend", "Helvetica Neue", sans-serif;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.16s ease-out,
        transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    zoom: var(--page-scale);
}

.pop.on {
    opacity: 1;
    transform: none;
}

.pop[hidden] {
    display: none;
}

.pop-body {
    display: grid;
    gap: 1.05rem;
}

.pop-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
    padding-right: 2.4rem;
}

.pop-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.pop-kind {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: var(--bg);
    color: var(--text);
}

.pop-kind svg,
.pop-ico svg {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
}

.pop-copy {
    min-width: 0;
}

.pop-facts {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-width: 0;
}

.pop h3 {
    margin: 0.15rem 0 0;
    font: 700 1.45rem/1.12 "Lexend", "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: -0.025em;
    text-transform: none;
}

.pop h3 a {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
.pop h3 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-strong);
}
}


.pop h3 a:focus {
    outline: none;
}

.pop h3 a:focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: 3px;
}

.pop .k {
    font: 650 0.75rem/1.2 "Lexend", "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0.35rem 0 0;
}

.pop .d {
    margin: 0.55rem 0 0;
    font: 400 0.95rem/1.55 "Lexend", "Helvetica Neue", system-ui, sans-serif;
    color: var(--text-secondary);
}

.pop .vs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.15rem 0 0.2rem;
}

.pop .vs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    padding: 0 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    font: 500 0.85rem "Lexend", "Helvetica Neue", system-ui, sans-serif;
    color: var(--text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
.pop .vs a:hover {
    border-color: var(--brand-strong);
}
}


.pop .meta {
    font: 400 0.86rem/1.45 "Lexend", "Helvetica Neue", system-ui, sans-serif;
    color: var(--text-secondary);
    margin: 0;
}

.pop .pop-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.pop-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 1rem;
    height: 1.15rem;
    margin-top: 0.08rem;
    color: var(--muted);
}

.pop-ico svg {
    width: 0.95rem;
    height: 0.95rem;
}

.pop .meta a {
    color: var(--text);
    text-decoration-color: var(--line);
}

.pop .pop-label {
    margin: 0;
    font: 650 0.75rem/1.2 "Lexend", "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.pop .go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin-top: 0.85rem;
    padding: 0 16px;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--text);
    font: 600 15px/1 "Lexend", "Helvetica Neue", system-ui, sans-serif;
    color: var(--bg);
    text-decoration: none;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
.pop .go:hover {
    background: var(--brand-strong);
    color: #fff;
}
}


.pop .go:focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: 2px;
}

.pop .x {
    all: unset;
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--muted);
    border-radius: var(--rb-radius);
}

@media (hover: hover) and (pointer: fine) {
.pop .x:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}
}
.pop .x:active,
.pop .x:focus {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}


.pop .x:focus-visible {
    outline: 2px solid var(--brand-strong);
}

@media (min-width: 641px) {
    .pop .x {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        z-index: 1;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: var(--rb-radius);
        background: var(--bg-soft);
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 600;
    }

    @media (hover: hover) and (pointer: fine) {
.pop .x:hover {
        border-color: var(--text-secondary);
        color: var(--text);
        background: var(--bg-strong);
    }
}
.pop .x:focus-visible {
        border-color: var(--text-secondary);
        color: var(--text);
        background: var(--bg-strong);
    }

}

.pop-place-coords {
    margin-top: 0.1rem;
}

.pop-coords {
    font-variant-numeric: tabular-nums;
}

.pop-coords-sep {
    color: var(--muted);
}

.pop-maps-link {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 0.12em;
}

@media (hover: hover) and (pointer: fine) {
.pop-maps-link:hover {
    text-decoration-color: var(--brand-strong);
}
}


.scrim {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(20, 16, 12, 0.32);
    opacity: 0;
    transition: opacity 0.2s;
}

.scrim.on {
    opacity: 1;
}

.scrim[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .pop {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: auto;
        max-height: 78vh;
        overflow: auto;
        border-radius: var(--rb-radius);
        border-bottom: 0;
        padding: 1.3rem max(1.25rem, env(safe-area-inset-left))
            calc(1.25rem + env(safe-area-inset-bottom));
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        zoom: 1;
        font: 17px/1.6 "Lexend", "Helvetica Neue", system-ui, sans-serif;
        box-shadow:
            0 12px 32px -8px rgba(36, 31, 25, 0.22),
            0 2px 6px rgba(36, 31, 25, 0.08);
    }

    .pop.on {
        transform: none;
    }

    .pop::before {
        content: "";
        display: block;
        width: 2.5rem;
        height: 4px;
        border-radius: var(--rb-radius);
        background: var(--line);
        margin: -0.6rem auto 0.9rem;
    }

    .pop .go {
        width: 100%;
        height: 42px;
        min-height: 42px;
        margin-top: 0.85rem;
        align-self: stretch;
    }
}

:root[data-theme="dark"] .pop .k,
:root[data-theme="dark"] .pop .meta,
:root[data-theme="dark"] button.nb span {
    color: #a1a7b2;
}

:root[data-theme="dark"] button.nb[aria-expanded="true"] b,
:root[data-theme="dark"] .chapter-overview-range,
:root[data-theme="dark"] a.chapter-overview-read {
    color: #f0a273;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pop .k,
    :root:not([data-theme="light"]) .pop .meta,
    :root:not([data-theme="light"]) button.nb span {
        color: #a1a7b2;
    }

    :root:not([data-theme="light"]) button.nb[aria-expanded="true"] b,
    :root:not([data-theme="light"]) .chapter-overview-range,
    :root:not([data-theme="light"]) a.chapter-overview-read {
        color: #f0a273;
    }
}

.chapter-overview-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
    border: 0;
}

.chapter-overview-nav-button {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 16px;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--bg-strong);
}

.chapter-overview-nav-button--next {
    padding: 16px;
    border-left: 0;
    text-align: right;
}

.chapter-overview-nav-label {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.chapter-overview-nav-detail {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}

.chapter-overview-source {
    margin-top: 32px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.45;
    opacity: 0.72;
}

.chapter-overview-source a {
    color: inherit;
}

.chapter-overview-error {
    display: grid;
    gap: 12px;
    min-height: 8rem;
    align-content: start;
}

.chapter-overview-error p {
    margin: 0;
    color: var(--text-secondary);
}

.chapter-overview-retry {
    width: auto;
    justify-self: start;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--text);
    font-weight: 650;
}

/* Loading skeleton: an <article class="chapter-overview"> in the real centred
   column (see internal/share/src/chapter-overview-shell.ts). Bars are real;
   only pending cards hold placeholder lines. No borders/dividers. */
.chapter-overview-skel-card {
    display: grid;
    align-content: start;
    gap: 9px;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    background: var(--bg-strong);
}
span.chapter-overview-section.chapter-overview-skel-card {
    padding: 16px;
    min-height: 138px;
}
span.nb.chapter-overview-skel-card {
    padding: 12px 14px;
    min-height: 69px;
}
span.chapter-overview-xref.chapter-overview-skel-card {
    padding: 14px 16px 14px 13px;
    border-left: 3px solid color-mix(in oklab, var(--text) 18%, transparent);
    min-height: 107px;
}
.chapter-overview-lead.chapter-overview-skel-card {
    gap: 14px;
    min-height: 236px;
}
.chapter-overview--loading .chapter-overview-world dd,
.chapter-overview--loading .chapter-overview-world dt {
    display: block;
}
.chapter-overview--loading .chapter-overview-world > div {
    min-height: 90px;
}
.chapter-overview--loading .chapter-overview-world > div.is-long {
    min-height: 96px;
}
/* Phone: approximate real card heights (no page zoom here). */
@media (max-width: 640px) {
    .chapter-overview-lead.chapter-overview-skel-card { min-height: 380px; }
    span.chapter-overview-section.chapter-overview-skel-card { min-height: 162px; }
    span.chapter-overview-xref.chapter-overview-skel-card { min-height: 128px; }
    .chapter-overview--loading .chapter-overview-world > div { min-height: 66px; }
    .chapter-overview--loading .chapter-overview-world > div.is-long { min-height: 110px; }
}

.chapter-overview-skel {
    display: block;
    height: 11px;
    max-width: 100%;
    border: 0;
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--line) 70%, var(--bg-strong) 30%);
}
.chapter-overview-skel--short { width: 58%; }
.chapter-overview-skel--line { width: 92%; }
.chapter-overview-skel--range { width: 2.6rem; height: 9px; }
.chapter-overview-skel--title { width: 54%; height: 15px; }
.chapter-overview-skel--title-b { width: 42%; height: 15px; }
.chapter-overview-skel--label { width: 3.2rem; height: 9px; }
.chapter-overview-skel--fact { width: 70%; height: 14px; margin-top: 4px; }
.chapter-overview-skel--fact-b { width: 52%; height: 14px; margin-top: 4px; }
.chapter-overview-skel--name { width: 34%; height: 13px; }
.chapter-overview-skel--name-b { width: 26%; height: 13px; }
.chapter-overview-skel--lead { width: 96%; height: 13px; }
.chapter-overview-skel--lead-short { width: 61%; height: 13px; }
.chapter-overview-skel--crumbs { width: 15rem; height: 10px; margin: 3px 0; }
.chapter-overview-skel--pos { width: 11rem; height: 10px; margin: 3px 0; }

@media (prefers-reduced-motion: no-preference) {
    .chapter-overview-skel {
        /* Subtle: a low-contrast sweep, slow. */
        background: linear-gradient(
            90deg,
            color-mix(in oklab, var(--line) 70%, var(--bg-strong) 30%) 0%,
            color-mix(in oklab, var(--line) 86%, var(--muted) 14%) 50%,
            color-mix(in oklab, var(--line) 70%, var(--bg-strong) 30%) 100%
        );
        background-size: 200% 100%;
        animation: chapter-overview-shimmer 1.8s ease-in-out infinite;
    }
}

@keyframes chapter-overview-shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

@media (hover: hover) and (pointer: fine) {
    .chapter-overview-nav-button:hover,
    .chapter-overview-retry:hover,
    a.chapter-overview-xref:hover {
        color: var(--text);
        border-color: transparent;
        background: color-mix(in oklab, var(--bg-strong) 78%, var(--text) 22%);
        transform: none;
    }

    a.chapter-overview-inline:hover {
        background: none;
        border-color: transparent;
        font-weight: 400;
        text-decoration-color: var(--brand-strong);
    }
}

@media (hover: hover) and (pointer: fine) {
    a.chapter-overview-section:hover {
        background: color-mix(in oklab, var(--bg-strong) 78%, var(--text) 22%);
    }
}

.chapter-overview-nav-button:focus-visible,
.chapter-overview-inline:focus-visible,
a.chapter-overview-read:focus-visible,
a.chapter-overview-section:focus-visible,
.chapter-overview-retry:focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: 2px;
}

@media (min-width: 641px) {
    .pop.chapter-overview-pop {
        position: fixed;
        zoom: 1;
        top: auto;
        right: auto;
        bottom: env(safe-area-inset-bottom, 0px);
        left: 0;
        /* JS sets left/width to match `.chapter-overview` exactly. */
        width: auto;
        min-width: 0;
        height: auto;
        max-height: min(68vh, calc(100dvh - env(safe-area-inset-bottom, 0px)));
        overflow: auto;
        border-radius: var(--rb-radius);
        --pop-pad-y: 1.05rem;
        --pop-pad-r: 2.5rem;
        padding: var(--pop-pad-y) var(--pop-pad-r) var(--pop-pad-y) 1.15rem;
        font-size: 15px;
        line-height: 1.35;
        opacity: 1;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .pop.chapter-overview-pop.on {
        transform: none;
    }

    .pop-body {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        column-gap: 1.15rem;
        align-items: stretch;
        max-height: none;
        overflow: visible;
        gap: 1.15rem;
    }

    .pop-identity {
        align-self: start;
        gap: 0.5rem;
        padding-right: 0;
    }

    .pop-head {
        align-items: flex-start;
        gap: 0.65rem;
    }

    .pop-kind {
        width: 2.15rem;
        height: 2.15rem;
    }

    .pop-kind svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .pop-copy {
        padding-right: 0;
    }

    .pop h3 {
        margin: 0;
        font-size: 1.35rem;
        line-height: 1.15;
    }

    .pop .k {
        margin: 0.18rem 0 0;
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .pop .d {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        font-size: 0.9rem;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .pop-facts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        justify-content: flex-start;
        gap: 0.85rem;
        padding-top: 0;
        padding-left: 1rem;
        border-left: 1px solid var(--line);
    }

    .pop .pop-label {
        display: none;
    }

    .pop .vs {
        width: 100%;
        justify-content: flex-start;
        gap: 0.3rem;
        margin: 0;
    }

    .pop .vs a {
        min-width: 0;
        min-height: 0;
        height: 1.85rem;
        padding: 0 0.5rem;
        font-size: 0.8rem;
    }

    .pop .go {
        align-self: flex-end;
        width: auto;
        height: 44px;
        min-height: 44px;
        margin-top: auto;
        margin-right: calc(var(--pop-pad-y) - var(--pop-pad-r));
        margin-bottom: 0;
        padding: 0 18px;
        font: 600 15px/1 "Lexend", "Helvetica Neue", system-ui, sans-serif;
        white-space: nowrap;
    }

    .pop .meta,
    .pop .pop-fact {
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .pop .pop-fact {
        gap: 0.4rem;
        align-items: center;
    }

    .pop-place-coords {
        margin-top: 0.15rem;
        row-gap: 0.15rem;
    }

    .pop-ico {
        width: 0.95rem;
        height: 0.95rem;
        margin-top: 0;
    }

    .pop-ico svg {
        width: 0.85rem;
        height: 0.85rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .pop,
    .scrim {
        transition: none;
    }
}

@media (max-width: 720px) {
    body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) {
        overflow: visible;
    }

    body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) main {
        zoom: 1;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        max-height: none !important;
        min-height: 100dvh;
        padding-left: 0;
        padding-right: 0;
        overflow: visible;
    }

    body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .panel {
        padding-left: 0;
        padding-right: 0;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body.route-view-launcher.chapter-overview-active .chapter-overview-view {
        overflow-x: clip;
        overflow-y: visible;
    }

    /* Keep bar label inset between 641–720; column edge stays on body pad. */
    .chapter-overview h2.chapter-overview-bar,
    .chapter-overview h3.chapter-overview-bar,
    .chapter-overview .names h3.chapter-overview-bar {
        padding-inline: 0.9rem;
    }
}

@media (max-width: 640px) {
    body.route-view-launcher.chapter-overview-active:not(.launcher-reader-active) .chapter-overview-body {
        /* Title chrome owns the top inset (safe-area + 12 on .panel). */
        padding-top: 0;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    }

    .chapter-overview-nav {
        grid-template-columns: 1fr 1fr;
    }

    .chapter-overview-nav-detail {
        display: none;
    }
}


body.route-view-entity main {
    height: calc(100dvh / var(--page-scale));
    max-height: calc(100dvh / var(--page-scale));
    padding: 20px 14px 0;
    overflow: hidden;
}

body.route-view-entity .panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding: 20px 22px 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-shadow: none;
}

body.route-view-entity .panel::before,
body.route-view-entity .panel::after {
    content: none;
    display: none;
}

body.route-view-entity .header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 4;
    flex: 0 0 auto;
    width: min(72ch, calc(100% - 2.1rem));
    align-self: center;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: var(--bg);
    font-size: 1rem;
    box-sizing: border-box;
}

body.route-view-entity .header > div:first-child {
    width: 100%;
    min-width: 0;
    overflow: visible;
}

body.route-view-entity h1 {
    font-size: clamp(1.55rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow: visible;
    white-space: normal;
}

body.route-view-entity .shell-title-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 2px 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: break-word;
    color: inherit;
    font: inherit;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-decoration: none;
}

.entity-page {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(1.05rem, 1fr) min(72ch, calc(100% - 2.1rem)) minmax(1.05rem, 1fr);
    align-content: start;
    align-items: start;
    width: 100%;
    min-height: 0;
    margin: 0;
    overflow: auto;
    font-size: 1rem;
    scrollbar-width: none;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
}

.entity-page::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.entity-page > * {
    grid-column: 2;
    min-width: 0;
}

.entity-kind {
    margin: 0.85rem 0 0;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.entity-identity {
    max-width: 62ch;
    margin: 0.85rem 0 0;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;
}

.entity-place-coords {
    margin: 1.15rem 0 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
}

.entity-coords {
    font-variant-numeric: tabular-nums;
}

.entity-coords-sep {
    color: var(--muted);
}

.entity-maps-link {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 0.12em;
}

@media (hover: hover) and (pointer: fine) {
.entity-maps-link:hover {
    text-decoration-color: var(--brand-strong);
}
}


.entity-page h2.entity-bar {
    position: static;
    margin: 32px 0 0;
    padding: 0.62rem 0.9rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-transform: none;
}

.entity-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

.entity-fact {
    min-width: 7.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
}

.entity-fact dt {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.entity-fact dd {
    margin: 0;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.entity-fact a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.entity-books,
.entity-related {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.entity-books {
    display: grid;
    gap: 8px;
}

.entity-book {
    display: grid;
    grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
    gap: 0.35rem 0.85rem;
    align-items: center;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--bg-strong);
}

a.entity-book-name {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.entity-chapters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

a.entity-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.entity-related {
    display: grid;
    gap: 8px;
}

a.entity-related-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--bg-strong);
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
}

.entity-related-role {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.entity-credit {
    margin-top: 32px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.45;
    opacity: 0.72;
}

.entity-credit a,
.entity-status {
    color: inherit;
}

.entity-status {
    grid-column: 2;
    width: 100%;
    max-width: min(72ch, calc(100% - 2.1rem));
    margin: 1rem 0 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    a.entity-book-name:hover,
    a.entity-chip:hover,
    a.entity-related-link:hover,
    .entity-fact a:hover {
        color: var(--brand-strong);
    }

    .entity-book:hover,
    a.entity-related-link:hover {
        background: color-mix(in oklab, var(--bg-strong) 78%, var(--text) 22%);
    }

    a.entity-chip:hover {
        border-color: var(--brand-strong);
    }
}

@media (max-width: 640px) {
    body.route-view-entity main {
        /* Prefer % over 100vw so padding/safe-area cannot inflate past the
           layout viewport on mobile WebKit. */
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        padding: max(10px, env(safe-area-inset-top)) 6px 0;
    }

    body.route-view-entity .panel {
        padding: 8px 10px 0;
    }

    body.route-view-entity h1 {
        font-size: clamp(1.3rem, 6.6vw, 2rem);
    }

    .entity-book {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        align-items: start;
    }
}

@media (max-width: 720px) {
    body.route-view-entity {
        overflow-x: clip;
    }

    body.route-view-entity main {
        zoom: 1;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        padding-left: 0;
        padding-right: 0;
    }

    body.route-view-entity .panel {
        padding-left: 0;
        padding-right: 0;
    }

    .entity-page {
        overflow-x: clip;
    }

    .entity-page h2.entity-bar {
        grid-column: 1 / -1;
        padding-right: max(1.05rem, calc((100% - 72ch) / 2));
        padding-left: max(1.05rem, calc((100% - 72ch) / 2));
    }
}


.status {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}
.hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}
.builder-source-details {
    border: 1px solid var(--line-subtle);
    background: var(--bg-soft);
    padding: 8px 10px;
}
.builder-source-details > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    user-select: none;
    list-style: none;
}
.builder-source-details > summary::-webkit-details-marker {
    display: none;
}
.builder-source-details > summary::after {
    content: " +";
    color: var(--text-secondary);
}
.builder-source-details[open] > summary::after {
    content: " −";
}
.builder-source-details[open] > summary {
    margin-bottom: 10px;
    color: var(--text-secondary);
}
.builder-source-body {
    display: grid;
    gap: 8px;
}
.builder-source-body > label {
    font-size: 0.75rem;
}
.shell-theme-toggle {
    width: 36px;
    min-width: 36px;
    padding: 0;
    flex: 0 0 36px;
}
.shell-theme-toggle[data-theme="light"],
.shell-theme-toggle[data-theme="dark"] {
    border-color: color-mix(in oklab, var(--brand) 36%, var(--line) 64%);
    background: color-mix(
        in oklab,
        var(--bg-strong) 84%,
        rgba(var(--brand-rgb), 0.14)
    );
    color: var(--text);
}
.shell-theme-toggle svg {
    display: block;
    margin: 0 auto;
}
.shell-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease;
}
.shell-link:focus-visible {
    color: var(--text);
    border-color: var(--brand-strong);
    background: color-mix(
        in oklab,
        var(--bg-strong) 82%,
        rgba(var(--brand-strong-rgb), 0.16)
    );
}
.shell-link[aria-current="page"] {
    color: var(--text);
    border-color: var(--brand-strong);
    background: color-mix(
        in oklab,
        var(--bg-strong) 80%,
        rgba(var(--brand-strong-rgb), 0.18)
    );
}
.selah-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: var(--bg-strong);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease;
}
.selah-badge-icon {
    width: 6.5px;
    height: 11px;
    display: block;
    flex: 0 0 auto;
    color: currentColor;
    transform: translateY(-0.5px);
}
.selah-badge:focus-visible {
    color: var(--bg);
    border-color: var(--text);
    background: var(--text);
}
@media (hover: hover) and (pointer: fine) {
    .shell-link:hover {
        color: var(--text);
        border-color: var(--brand-strong);
        background: color-mix(
            in oklab,
            var(--bg-strong) 82%,
            rgba(var(--brand-strong-rgb), 0.16)
        );
    }
    .selah-badge:hover {
        color: var(--bg);
        border-color: var(--text);
        background: var(--text);
    }
    .shell-theme-toggle:hover {
        border-color: var(--brand-strong);
        background: color-mix(
            in oklab,
            var(--bg-strong) 78%,
            rgba(var(--brand-strong-rgb), 0.18)
        );
    }
}
.qr-wrap {
    display: grid;
    gap: 10px;
}
.qr-actions {
    display: grid;
    gap: 7px;
}
.qr-actions-primary {
    min-height: 40px;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
}
.qr-actions-secondary {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qr-actions-secondary > .button {
    min-height: 36px;
    font-size: 0.78rem;
    white-space: nowrap;
    padding: 0 10px;
}
.builder-pretty-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--line);
    background: var(--bg-strong);
    cursor: pointer;
    min-height: 36px;
    padding: 0 10px;
}
.qr-actions-frame {
    justify-content: flex-start;
}
.builder-integrate-controls {
    display: grid;
}
.builder-integrate-select {
    width: 100%;
    min-height: 42px;
    font-size: 0.9rem;
    font-weight: 600;
    padding-left: 14px;
    padding-right: 36px;
    background-color: var(--bg-strong);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine) {
    .builder-integrate-select:hover {
        border-color: var(--brand-dim);
    }
}
.builder-integrate-select option {
    background: var(--bg-strong);
    color: var(--text);
}
.builder-integrate-modal .launcher-preview-dialog {
    width: min(100%, 520px);
}
.builder-spec-modal .launcher-preview-dialog {
    width: min(100%, 920px);
}
.builder-integrate-dialog {
    gap: 14px;
}
.builder-integration-spec-link-wrap {
    display: none;
    margin: 0;
}
.builder-integration-spec-link-wrap .builder-integration-spec-link {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
}
.builder-spec-dialog {
    gap: 10px;
    padding: 14px;
    max-height: min(84dvh, 680px);
}
.builder-spec-dialog .launcher-preview-dialog-head {
    gap: 8px;
    align-items: center;
}
.builder-spec-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}
.builder-spec-copy-button {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
}
.builder-spec-dialog .launcher-section-label {
    font-size: 0.7rem;
}
.builder-spec-dialog .launcher-preview-dialog-text {
    max-width: 48ch;
    font-size: 0.84rem;
    line-height: 1.42;
}
.builder-spec-dialog .launcher-preview-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Match shared icon close target (durable-core / launcher). */
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
}
.builder-spec-dialog .builder-spec-copy-button,
.builder-spec-dialog .launcher-preview-close {
    align-self: center;
}
.builder-spec-sheet {
    gap: 8px;
    overflow: auto;
}
.builder-spec-sheet > .builder-spec-hero,
.builder-spec-grid > .info-section {
    gap: 8px;
    padding: 14px;
}
.builder-spec-grid {
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
.builder-spec-grid > .info-section {
    grid-template-rows: auto 1fr auto;
    min-height: 0;
}
.builder-spec-grid > .info-section > h2 {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}
.builder-spec-grid > .info-section > p,
.builder-spec-hero .info-lead {
    line-height: 1.42;
}
.builder-spec-grid > .info-section > p {
    font-size: 0.88rem;
}
.builder-spec-hero .info-lead {
    font-size: 0.92rem;
}
.builder-spec-hero {
    gap: 8px;
}
.builder-spec-endpoints,
.builder-spec-example-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.builder-spec-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 0 7px;
    border: 1px solid var(--line);
    background: color-mix(
        in oklab,
        var(--bg-strong) 88%,
        rgba(var(--brand-rgb), 0.08)
    );
    color: var(--text);
    text-decoration: none;
    font-size: 0.66rem;
    line-height: 1.25;
    font-family:
        Geist Mono,
        Geist,
        ui-monospace,
        SFMono-Regular,
        monospace;
}
.builder-spec-chip:link,
.builder-spec-chip:visited {
    color: var(--text);
}
.builder-spec-inline-syntax {
    display: inline-flex;
    align-items: center;
    min-height: 1.2em;
    padding: 0.04rem 0.34rem;
    border: 1px solid
        color-mix(in oklab, var(--line) 74%, rgba(var(--brand-rgb), 0.36));
    background: color-mix(
        in oklab,
        var(--bg-strong) 80%,
        rgba(var(--brand-rgb), 0.12)
    );
    color: var(--text);
    font-size: 0.78em;
    line-height: 1.1;
    white-space: nowrap;
    vertical-align: 0.02em;
    font-family:
        Geist Mono,
        Geist,
        ui-monospace,
        SFMono-Regular,
        monospace;
}
.builder-spec-chip:focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .builder-spec-chip:hover {
        border-color: var(--brand-strong);
        background: color-mix(
            in oklab,
            var(--bg-strong) 82%,
            rgba(var(--brand-strong-rgb), 0.14)
        );
    }
    :root:not([data-theme="light"]) .builder-spec-chip:hover {
        border-color: var(--interactive-hover-line);
        background: var(--interactive-hover-bg);
        color: var(--text);
    }
    :root:not([data-theme="light"]) .builder-spec-chip:hover:visited {
        color: var(--text);
    }
}
.builder-spec-links {
    margin: 0;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.builder-spec-links a {
    color: var(--text);
}
.builder-spec-links a:focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: 2px;
}
.builder-spec-card-example {
    display: grid;
    gap: 5px;
    align-content: start;
    margin-top: auto;
    padding-top: 5px;
    border-top: 1px solid var(--line-subtle);
}
.builder-spec-card-example-stack {
    gap: 4px;
}
.builder-spec-card-label {
    color: var(--text-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
@media (max-width: 860px) {
    .builder-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .builder-spec-grid {
        grid-template-columns: 1fr;
    }
}
.builder-integrate-points {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9rem;
}
.builder-integrate-points.hidden {
    display: none;
}
.builder-integrate-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 18px;
    border: 1px solid var(--brand-strong);
    background: rgba(var(--brand-strong-rgb), 0.12);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease;
}
.builder-integrate-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.builder-integrate-cta-group.hidden {
    display: none;
}
.builder-integrate-cta.hidden {
    display: none;
}
@media (hover: hover) and (pointer: fine) {
    .builder-integrate-cta:hover {
        color: var(--bg);
        border-color: var(--text);
        background: var(--text);
    }
}
.builder-integrate-cta:focus-visible {
    color: var(--bg);
    border-color: var(--text);
    background: var(--text);
}
.builder-pretty-toggle.is-enabled {
    border-color: var(--brand);
    background: rgba(var(--brand-rgb), 0.2);
    color: var(--text);
}
.builder-pretty-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-height: 14px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    accent-color: var(--brand);
    flex: 0 0 auto;
}
.builder-pretty-toggle span {
    display: inline-flex;
    align-items: center;
}
.qr-actions-hint {
    margin-top: 1px;
}
.qr-card {
    width: 100%;
    position: relative;
}
.qr-card-stage {
    width: min(240px, 100%);
    min-height: clamp(280px, 70vw, 338px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-card-inner {
    position: relative;
}
.qr-image {
    aspect-ratio: 1 / 1;
    display: block;
}
.qr-card-overlay,
.qr-corners {
    pointer-events: none;
}
.qr-reference {
    margin: 10px 0 0;
    text-align: center;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.01em;
    word-break: break-word;
}
.qr-card.is-plain {
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.qr-card.is-plain .qr-image {
    width: min(220px, 100%);
    border: 1px solid var(--line);
    background: #fff;
    margin: 0 auto;
}
.qr-card.is-plain .qr-reference {
    display: none;
}
.qr-card.is-plain .qr-card-overlay,
.qr-card.is-plain .qr-corners {
    display: none;
}
.qr-card.is-pretty {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    min-height: 0;
    border: 1px solid #dcd5c6;
    border-radius: var(--rb-radius);
    padding: 20px;
    box-shadow: var(--paper-shell-shadow);
    background: #f7f5f0;
}
.qr-card.is-pretty .qr-card-inner {
    border: 2px solid #2c2a28;
    border-radius: var(--rb-radius);
    background: transparent;
    padding: 10px;
    box-shadow: none;
    position: relative;
}
.qr-card.is-pretty .qr-card-inner::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid #2c2a28;
    pointer-events: none;
}
.qr-card.is-pretty .qr-image {
    width: 100%;
    border-radius: var(--rb-radius);
    background: transparent;
    mix-blend-mode: multiply;
}
.qr-card.is-pretty .qr-card-overlay {
    display: none;
}
.qr-card.is-pretty .qr-reference {
    color: #2c2a28;
    font-family: "Geist", "Helvetica Neue", sans-serif;
    font-size: 0.8rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 18px;
    text-shadow: none;
}
.qr-card.is-pretty .qr-corners {
    display: none;
}
#builder-route-link {
    text-align: center;
    word-break: break-all;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: var(--text-secondary);
    padding: 6px;
    background: var(--bg-strong);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--line-subtle);
    display: block;
    transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
#builder-route-link:hover {
    color: var(--brand-strong);
}
}

.embed-wrap {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}
.embed-wrap > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    user-select: none;
    list-style: none;
}
.embed-wrap > summary::-webkit-details-marker {
    display: none;
}
.embed-wrap > summary::after {
    content: " +";
    color: var(--text-secondary);
}
.embed-wrap:not([open]) {
    border: 1px solid var(--line-subtle);
    background: var(--bg-soft);
    padding: 12px 10px;
    gap: 0;
    cursor: pointer;
}
.embed-wrap[open] > summary {
    margin-bottom: 10px;
    color: var(--text-secondary);
}
.embed-wrap[open] > summary::after {
    content: " −";
}
.embed-body {
    display: grid;
    gap: 12px;
}
.embed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.embed-wrap[open] .embed-header {
    cursor: pointer;
}
.embed-preview-wrap {
    flex-shrink: 0;
}
.embed-code-wrap {
    display: grid;
    gap: 8px;
}
.badge-preview {
    display: block;
    width: 200px;
}
.badge-preview img {
    max-width: 100%;
    height: auto;
    display: block;
}
.embed-badge {
    min-height: 72px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
}
.embed-badge-logo {
    width: 16px;
    height: 28px;
    flex: 0 0 auto;
}
.embed-badge-label {
    margin: 0;
    font-weight: 700;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.embed-badge-link {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: var(--brand-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}
body.embed-mode {
    background: transparent;
}
body.embed-mode::before,
body.embed-mode::after {
    display: none;
}
body.embed-mode main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
.hidden {
    display: none !important;
}


@media (min-width: 641px) {
    /* Passage/launcher: vertically center the content block like the dashboard.
       When taller than the viewport, safe-center falls back to top flow + scroll.
       Reader and chapter overview keep their own full-bleed layouts. */
    body.route-view-launcher:not(.launcher-reader-active):not(
            .chapter-overview-active
        )
        main {
        /* Compensate main { zoom: var(--page-scale) } so the block fills the
           visual viewport, then safe-center within it. !important matches the
           chapter-overview shell-zoom override so 100dvh cannot win. */
        height: calc(100dvh / var(--page-scale)) !important;
        max-height: calc(100dvh / var(--page-scale)) !important;
        overflow: auto;
        display: grid;
        /* One full-width track, top-anchored like home. `justify-content:
           center` on an auto track shrink-wrapped the column to the verse
           text (183px on John 3:9, 362px on John 3:4); `align-content: safe
           center` floated it mid-viewport. */
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        justify-content: stretch;
        align-items: start;
        justify-items: center;
        padding-top: calc(clamp(72px, 18vh, 200px) / var(--page-scale));
    }

    body.route-view-launcher:not(.launcher-reader-active):not(
            .chapter-overview-active
        )
        .panel {
        height: auto;
        max-height: none;
        overflow: visible;
        /* Fixed column: the search bar renders at the home bar width (620px
           visual) regardless of the verse; main is zoomed by --page-scale. */
        width: min(calc(620px / var(--page-scale) + 44px), 100%);
        max-width: 100%;
    }

    body.route-view-launcher:not(.launcher-reader-active):not(
            .chapter-overview-active
        )
        section.input-stack {
        flex: 0 1 auto;
        overflow: visible;
    }

    body.route-view-launcher .launcher-layout--dashboard {
        grid-template-areas:
            "preview"
            "apps"
            "remember";
        grid-template-rows: auto auto auto;
    }
    body.route-view-launcher.launcher-reader-active .launcher-layout,
    body.route-view-launcher.launcher-reader-active .launcher-layout--dashboard {
        /* Same named areas as prod desktop launcher so footer docks correctly. */
        grid-template-areas:
            "preview"
            "apps"
            "remember"
            "footer";
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
    body.route-view-launcher.launcher-reader-active .launcher-footer {
        grid-area: footer;
    }
    body.route-view-launcher.launcher-reader-active .launcher-apps-panel {
        grid-area: apps;
    }
    body.route-view-launcher .launcher-apps-panel {
        grid-area: apps;
        grid-template-rows: auto auto;
    }
    body.route-view-launcher .launcher-preview-card {
        display: contents;
    }
    body.route-view-launcher .launcher-preview {
        grid-area: preview;
    }
    body.route-view-launcher .launcher-inline-verse {
        grid-area: preview;
    }
    body.route-view-launcher .launcher-layout:has(> .launcher-inline-verse:not([hidden])) .launcher-preview {
        display: none;
    }
    body.route-view-launcher .launcher-preview-card > .remember-toggle {
        grid-area: remember;
        margin-top: 0;
    }
    body.route-view-launcher .launcher-footer {
        grid-area: footer;
    }
    .launcher-catalog-enter-hint {
        right: 38px;
    }
}
@media (min-width: 860px) {
    .two-pane.has-preview {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    }
    /* Prod reader/footer chrome: flex row (QR aside removed, search remains). */
    body.route-view-launcher .launcher-footer {
        display: flex;
        align-items: stretch;
        gap: 0;
    }
}
@media (max-width: 640px) {
    :root {
        --page-scale: 1;
    }
    /* Keep the document itself from gaining a horizontal scrollport when a
       descendant briefly paints past the viewport (chips, badges, vw quirks). */
    html {
        max-width: 100%;
        overflow-x: clip;
    }
    body {
        max-width: 100%;
        overflow-x: clip;
    }
    main {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .selah-badge {
        max-width: 100%;
        min-width: 0;
    }
    pre,
    code,
    .parsed,
    .parsed.bad {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    body.route-view-landing main {
        width: 100%;
        min-height: 100dvh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        padding: max(1rem, env(safe-area-inset-top)) 20px
            max(1.25rem, env(safe-area-inset-bottom));
        transition: padding 0.35s ease;
    }
    /* Dashboard home never uses the autocomplete-open padding swap; the
       padding transition only animated base→landing padding on first paint
       (panel x 16→20 / width 358→350, CLS ~0.03). */
    body.route-view-landing.route-view-dashboard main {
        transition: none;
        /* Top-anchor like /search: centring made the title jump up when the
           lazily-loaded search box + Recents grew the panel (CLS ~0.03). */
        justify-content: flex-start;
        /* Shell + --rb-phone-pad own the side inset (match reader). */
        padding-inline: 0;
    }
    body.route-view-landing.route-landing-autocomplete-open main {
        justify-content: flex-start;
        padding: clamp(72px, 12vh, 112px) 20px
            max(20px, env(safe-area-inset-bottom));
    }
    @media (prefers-reduced-motion: reduce) {
        body.route-view-landing main {
            transition: none;
        }
    }
    body.route-view-landing .panel {
        min-height: auto;
        padding: 0;
        box-shadow: none;
    }
    body.route-view-landing .header {
        gap: 24px;
        width: 100%;
    }
    body.route-view-landing h1 {
        font-size: clamp(2.59rem, 11.9vw, 3.36rem);
    }
    body.route-view-landing .landing-passage-search {
        width: 100%;
        max-width: 100%;
    }
    .quick-search.is-landing-main {
        --landing-search-width: 100%;
        width: var(--landing-search-width);
    }
    .quick-search.is-landing-main .quick-search-field {
        min-height: 40px;
    }
    .quick-search.is-landing-main .quick-search-input {
        min-height: 40px;
        font-size: 16px;
    }
    .quick-search.is-landing-main .quick-search-picker-expand {
        width: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    .quick-search.is-landing-main .quick-search-go {
        min-height: 40px;
        height: 40px;
        width: 40px;
        min-width: 40px;
        flex-basis: 40px;
    }
    .quick-search.is-landing-main .quick-search-autocomplete-list {
        max-height: min(68dvh, calc(100dvh - 180px));
    }
    .quick-search.is-landing-main .quick-search-search-offer,
    .quick-search.is-landing-main .quick-search-cap-card {
        max-height: min(360px, calc(100dvh - 260px));
    }
    .quick-search.is-landing-main:has(
            .landing-passage-pickers-panel:not([hidden])
        )
        .quick-search-autocomplete-list {
        max-height: min(62dvh, calc(100dvh - 236px));
    }
    body::before {
        background: none;
    }
    .panel {
        border: none;
        background: transparent;
        padding: 0 0 14px;
        box-shadow: none;
    }
    .panel::before {
        display: none;
    }
    .section-card {
        border-left: none;
        border-right: none;
        padding: 16px;
    }
    h1 {
        font-size: 1.25rem;
    }
    .header {
        align-items: stretch;
    }
    .quick-search {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
    .quick-search-actions {
        gap: 6px;
    }
    .quick-search-button {
        min-width: 88px;
    }
    .quick-search[data-open="true"] .quick-search-input {
        max-width: calc(100vw - 40px);
        flex-basis: 100%;
        order: -1;
    }
    body.route-view-builder .panel,
    body.route-view-info .panel {
        display: flex;
        flex-direction: column;
    }
    body.route-view-builder #builder-layout.section-card,
    body.route-view-builder #builder-embed-wrap.section-card {
        border: none;
        background: transparent;
        padding: 0;
    }
    body.route-view-builder .header,
    body.route-view-info .header {
        display: contents;
    }
    body.route-view-builder .header > div:first-child {
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--line-subtle);
    }
    body.route-view-info .header > div:first-child {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--line-subtle);
    }
    body.route-view-builder .quick-search,
    body.route-view-info .quick-search {
        order: 90;
        margin: 16px 0 0;
        max-width: none;
        width: 100%;
    }
    body.route-view-builder .quick-search .quick-search-input,
    body.route-view-info .quick-search .quick-search-input {
        position: static;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        z-index: auto;
    }
    body.route-view-builder .quick-search .quick-search-field,
    body.route-view-info .quick-search .quick-search-field {
        display: flex;
        flex: 1 1 auto;
        width: auto;
        margin-right: 0;
        overflow: visible;
        visibility: visible;
        transition: none;
    }
    body.route-view-builder .quick-search .quick-search-button,
    body.route-view-info .quick-search .quick-search-button {
        display: none;
    }
    body.route-view-builder .quick-search .quick-search-hint,
    body.route-view-info .quick-search .quick-search-hint {
        display: none;
    }
    body.route-view-builder .quick-search .quick-search-actions,
    body.route-view-info .quick-search .quick-search-actions {
        display: none;
    }
    body.route-view-builder .builder-integrate-modal {
        align-items: end;
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }
    body.route-view-builder .builder-integrate-modal .launcher-preview-dialog {
        width: 100%;
        max-height: min(72dvh, 560px);
        padding: 16px;
    }
    body.route-view-builder .builder-spec-modal {
        align-items: end;
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }
    body.route-view-builder .builder-spec-modal .launcher-preview-dialog {
        width: 100%;
        max-height: min(78dvh, 720px);
        padding: 16px;
    }
    .quick-search.is-launcher-toolbar {
        padding: 4px;
        gap: 4px;
    }
    .quick-search.is-launcher-toolbar .quick-search-button {
        min-width: 90px;
        min-height: 36px;
    }
    .quick-search.is-launcher-toolbar .launcher-toolbar-button,
    .quick-search.is-launcher-toolbar .launcher-toolbar-select {
        min-height: 36px;
    }
    .quick-search.is-launcher-toolbar .launcher-toolbar-select {
        min-width: 78px;
        font-size: 0.82rem;
        padding-left: 10px;
    }
    .qr-card {
        width: 100%;
    }
    .qr-card-stage {
        width: min(260px, 100%);
    }
    .qr-actions-secondary {
        grid-template-columns: 1fr;
    }
    .builder-inline-open {
        display: inline-flex;
    }
    .builder-search-button {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px;
    }
    .builder-search-cta {
        display: none;
    }
    .qr-actions-primary {
        display: none;
    }
    .qr-actions-secondary > .button,
    .builder-pretty-toggle {
        font-size: 0.84rem;
        min-height: 38px;
        padding: 0 10px;
    }
    body.route-view-launcher main,
    body.route-view-builder main {
        width: min(1100px, 100%);
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px 6px;
    }
    body.route-view-builder main {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    body.route-view-launcher main {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    body.route-view-launcher.launcher-mobile-input-active main {
        padding-bottom: 4px;
    }
    body.route-view-launcher .panel,
    body.route-view-builder .panel {
        padding: 12px 10px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    body.route-view-launcher .panel {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    body.route-view-launcher.launcher-mobile-input-active .panel {
        padding-bottom: 4px;
    }
    body.route-view-launcher .header {
        margin-bottom: 4px;
    }
    /* Shell / overview titles only — don’t shrink the in-flow chapter h1. */
    body.route-view-launcher h1:not(.reader-chapter-head) {
        font-size: clamp(1.3rem, 6.6vw, 2rem);
    }
    /* Passage title: keep the full ref on one line beside the action icons. */
    body.route-view-launcher:not(.launcher-reader-active) .header > div:first-child {
        container-type: inline-size;
        min-width: 0;
    }
    body.route-view-launcher:not(.launcher-reader-active) .header-actions {
        gap: 4px;
    }
    body.route-view-launcher:not(.launcher-reader-active) .header h1 {
        /* Scale down to keep long refs (Song of Solomon / 1 Thessalonians) on one line. */
        font-size: clamp(0.72rem, 0.42rem + 7.8cqi, 1.15rem);
        line-height: 1.15;
        min-width: 0;
    }
    body.route-view-launcher:not(.launcher-reader-active)
        .header
        h1
        .shell-title-link {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
    }
    /* Phone: square icon-only Pinned docked to the bottom (scrollable row). */
    body.route-view-launcher:not(.launcher-reader-active) {
        --pinned-dock-size: 3.35rem;
        --pinned-dock-pad: calc(
            var(--pinned-dock-size) + 1rem + env(safe-area-inset-bottom, 0px)
        );
    }
    /* translateZ(0) on apps/chooser creates a fixed containing block — clear it
       so the pinned dock can anchor to the viewport. */
    body.route-view-launcher:not(.launcher-reader-active) .launcher-apps-panel,
    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-chooser--dashboard,
    body.route-view-launcher:not(.launcher-reader-active) #launcher-chooser {
        transform: none;
        backface-visibility: visible;
    }
    body.route-view-launcher:not(.launcher-reader-active)
        .dashboard-section--pinned {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        width: 100%;
        margin: 0;
        padding: 0.45rem 0.65rem max(0.45rem, env(safe-area-inset-bottom));
        box-sizing: border-box;
        background: var(--bg);
        border: 0;
        box-shadow: none;
    }
    body.route-view-launcher:not(.launcher-reader-active)
        .dashboard-section--pinned
        .dashboard-section-bar {
        /* Icon dock only — name lives on aria-label / title. */
        display: none;
    }
    body.route-view-launcher:not(.launcher-reader-active)
        .dashboard-section--pinned
        .dashboard-pinned-grid {
        gap: 0.4rem;
        padding: 0;
        border: 0;
        background: transparent;
    }
    body.route-view-launcher:not(.launcher-reader-active)
        .dashboard-pinned-tile.launcher-adapter {
        flex: 0 0 var(--pinned-dock-size);
        width: var(--pinned-dock-size);
        min-width: var(--pinned-dock-size);
        max-width: var(--pinned-dock-size);
        aspect-ratio: 1 / 1;
        height: auto;
        padding: 0.4rem;
    }
    /* Keep page content clear of the fixed pinned dock. */
    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard {
        padding-bottom: var(--pinned-dock-pad);
        box-sizing: border-box;
    }
    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard
        .launcher-preview {
        min-height: 0;
    }
    /* Keep inline verse / skeleton height so load does not collapse the column. */
    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard
        .launcher-inline-verse {
        min-height: calc(1.4em * var(--launcher-verse-lines, 3));
    }
    body.route-view-launcher section.input-stack {
        overflow: hidden;
    }
    body.route-view-launcher .launcher-layout {
        gap: 6px;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) auto auto auto;
        overflow: hidden;
    }
    /* Dashboard passage/launcher: pack preview + apps (no 1fr gap above BSB). */
    body.route-view-launcher:not(.launcher-reader-active) .launcher-layout--dashboard {
        grid-template-rows: auto auto auto;
        align-content: start;
    }
    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard
        .launcher-preview-card {
        align-self: start;
    }
    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard
        .launcher-apps-panel {
        grid-template-rows: auto auto;
    }
    /* Non-dashboard only: a mid-track 1fr row on the dashboard launcher
       inflates the preview card and shoves apps/recents down (large CLS). */
    body.route-view-launcher
        .launcher-layout:not(.launcher-layout--dashboard):has(
            > .launcher-inline-verse:not([hidden])
        ) {
        grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    }
    body.route-view-launcher.launcher-reader-active .launcher-layout,
    body.route-view-launcher.launcher-reader-active .launcher-layout--dashboard,
    body.route-view-launcher.launcher-reader-active .launcher-layout:has(> .launcher-inline-verse) {
        /* Phone: two tracks only (prod), no empty named-area gaps. */
        grid-template-areas: unset;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    body.route-view-launcher.launcher-reader-active .launcher-apps-panel,
    body.route-view-launcher.launcher-reader-active .launcher-footer {
        grid-area: auto;
        justify-self: center;
        width: var(--rb-page-shell, min(920px, calc(100% - 48px)));
    }
    body.route-view-launcher .launcher-inline-verse {
        font-size: 0.92rem;
        line-height: 1.4;
    }
    body.route-view-launcher .launcher-apps-panel {
        position: relative;
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr);
    }
    body.route-view-launcher #launcher-chooser {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-right: 2px;
        padding-bottom: 8px;
        -webkit-mask-image: none;
        mask-image: none;
    }
    body.route-view-launcher.launcher-mobile-input-active #launcher-chooser {
        padding-bottom: 4px;
    }
    body.route-view-launcher
        .launcher-apps-panel.has-overflow
        #launcher-chooser {
        padding-bottom: 14px;
        -webkit-mask-image: linear-gradient(
            180deg,
            #000 0,
            #000 calc(100% - 18px),
            transparent 100%
        );
        mask-image: linear-gradient(
            180deg,
            #000 0,
            #000 calc(100% - 18px),
            transparent 100%
        );
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    body.route-view-launcher.launcher-mobile-input-active
        .launcher-apps-panel.has-overflow
        #launcher-chooser {
        padding-bottom: 8px;
    }
    body.route-view-launcher
        #launcher-chooser
        > .launcher-adapter
        + .launcher-adapter {
        border-top-width: 1px;
    }
    body.route-view-launcher .launcher-footer {
        position: static;
        transform: none;
        will-change: auto;
    }
    body.route-view-launcher .launcher-section-label {
        font-size: 0.68rem;
    }
    body.route-view-launcher .launcher-preview-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding-top: 6px;
        align-items: stretch;
    }
    body.route-view-launcher .launcher-preview-card > .remember-toggle {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
    }
    body.route-view-launcher .launcher-adapter {
        min-height: 52px;
        grid-template-columns: var(--adapter-grid-cols, 36px minmax(0, 1fr));
        align-items: center;
        align-content: center;
        gap: 7px;
        padding: 14px 14px;
    }
    body.route-view-launcher .launcher-adapter-icon {
        width: var(--adapter-icon-width, 28px);
        height: 28px;
        flex-basis: var(--adapter-icon-width, 28px);
    }
    body.route-view-launcher .launcher-adapter-title {
        font-size: 0.9rem;
    }
    body.route-view-launcher .launcher-adapter-title-row {
        gap: 5px;
    }
    body.route-view-launcher .launcher-adapter-subtitle {
        display: none;
    }
    body.route-view-launcher
        .launcher-adapter-label[data-inline-subtitle="true"] {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
    }
    body.route-view-launcher
        .launcher-adapter-label[data-inline-subtitle="true"]
        .launcher-adapter-subtitle {
        display: inline;
    }
    body.route-view-launcher .launcher-preview {
        display: none;
    }
    body.route-view-launcher .launcher-preview-trigger {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        min-height: 36px;
        font-size: 0.82rem;
        grid-column: 2;
        grid-row: 1;
    }
    /* Dashboard-style launcher: keep the passage preview visible on phone.
       Reader must stay prod-identical — never resurrect the preview card. */
    body.route-view-launcher:not(.launcher-reader-active)
        .launcher-layout--dashboard
        .launcher-preview-card {
        display: block;
        padding-top: 0;
    }
    body.route-view-launcher.launcher-reader-active
        .launcher-layout--dashboard
        .launcher-preview-card {
        display: none;
    }
    body.route-view-launcher .launcher-layout--dashboard .launcher-preview {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        min-height: 0;
    }
    body.route-view-launcher
        .launcher-layout--dashboard
        .launcher-preview-trigger {
        display: none;
    }
    body.route-view-launcher .launcher-preview-dialog {
        width: 100%;
        max-height: min(72dvh, 520px);
        padding: 16px;
    }
    body.route-view-launcher .launcher-preview-modal {
        align-items: end;
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }
    body.route-view-launcher .launcher-preview-dialog-text {
        font-size: 0.9rem;
    }
    body.route-view-launcher .launcher-catalog-modal {
        align-items: stretch;
        padding: 0;
    }
    body.route-view-launcher .launcher-catalog-modal .launcher-preview-scrim {
        display: none;
    }
    body.route-view-launcher .launcher-catalog-dialog {
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
        justify-self: stretch;
        border: none;
        box-shadow: none;
        background: var(--bg);
        gap: 10px;
        padding: calc(env(safe-area-inset-top, 16px) + 12px) 12px
            calc(env(safe-area-inset-bottom, 16px) + 12px);
    }
    body.route-view-launcher .launcher-catalog-search {
        min-height: 38px;
        font-size: 16px;
    }
    body.route-view-launcher .launcher-catalog-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    body.route-view-launcher .launcher-catalog-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }
    body.route-view-launcher .launcher-catalog-tabs::-webkit-scrollbar {
        display: none;
    }
    body.route-view-launcher .launcher-catalog-tab {
        min-height: 30px;
        padding: 0 10px;
        font-size: 0.72rem;
        flex-shrink: 0;
    }
    body.route-view-launcher .launcher-catalog-subtab-select {
        margin-left: 0;
        width: 100%;
        min-height: 30px;
        font-size: 0.72rem;
        padding: 0 6px;
        padding-right: 28px;
        background-position:
            calc(100% - 14px) calc(50% - 2px),
            calc(100% - 9px) calc(50% - 2px);
    }
    body.route-view-launcher .launcher-catalog-results {
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    body.route-view-launcher .launcher-catalog-row {
        grid-template-columns: minmax(0, 1fr) 40px;
    }
    body.route-view-launcher
        .launcher-catalog-results
        > .launcher-catalog-row
        > .launcher-adapter {
        min-height: 52px;
        align-content: normal;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    body.route-view-launcher .launcher-catalog-pin {
        min-height: 52px;
    }
    body.route-view-launcher .launcher-utility-target {
        min-height: 34px;
    }
    body.route-view-launcher .launcher-share-link {
        min-height: 34px;
        font-size: 0.8rem;
    }
    body.route-view-launcher .quick-search.is-launcher-toolbar {
        width: 100%;
        margin-left: 0;
        padding: 0;
        gap: 0;
        overflow: visible;
    }
    body.route-view-launcher
        .quick-search.is-launcher-toolbar
        .launcher-toolbar-actions {
        min-width: 0;
        flex: 0 0 auto;
    }
    body.route-view-launcher
        .quick-search.is-launcher-toolbar
        .quick-search-button {
        width: 38px;
        min-width: 38px;
        flex: 0 0 38px;
        min-height: 34px;
        padding: 0;
    }
    body.route-view-launcher
        .quick-search.is-launcher-toolbar
        .quick-search-label {
        display: none;
    }
    body.route-view-launcher
        .quick-search.is-launcher-toolbar
        .launcher-toolbar-button,
    body.route-view-launcher
        .quick-search.is-launcher-toolbar
        .launcher-toolbar-select {
        min-height: 34px;
    }
    body.route-view-launcher
        .quick-search.is-launcher-toolbar
        .launcher-toolbar-button {
        width: 38px;
        min-width: 38px;
        flex: 0 0 38px;
        padding: 0;
    }
    body.route-view-launcher
        .quick-search.is-launcher-toolbar
        .launcher-toolbar-select {
        min-width: 76px;
        width: 76px;
        flex: 0 0 76px;
        font-size: 0.78rem;
        font-weight: 700;
        text-align: center;
        padding-left: 6px;
        padding-right: 6px;
        background-image: none;
    }
    body.route-view-launcher .remember-toggle {
        min-height: 36px;
        font-size: 0.68rem;
        padding: 0 8px;
        line-height: 1.1;
    }
    .embed-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .embed-preview-wrap {
        order: -1;
        align-self: center;
    }
    .embed-code-wrap {
        gap: 6px;
    }
    .embed-code-wrap .row {
        flex-direction: column;
    }
    .badge-preview {
        width: 200px;
        margin: 0 auto;
    }
    textarea {
        min-height: 56px;
        font-size: 0.8rem;
    }
}


/* ==========================================================================
   Durable core: tabs, floating search modal, cleaner reader (Margin-styled).
   House rules: Lexend, no divider lines, hover only on fine pointers,
   ~300ms motion, zero horizontal scroll at 320px.
   ========================================================================== */

:root {
    /* Shared corner radius — square chrome everywhere. True circles use 50%. */
    --rb-radius: 0;
    /* One content column — matches the reader measure. Home, Notes, Memorize,
       dashboard columns, and the search trigger share these edges. */
    --rb-content-column: min(42rem, 100%);
    --landing-search-width: var(--rb-content-column);
    /* Outer shell around the column — same as reader .launcher-apps-panel /
       Overview shell (920px max, 48px viewport inset, 2px end gutter). */
    --rb-page-shell-max: 920px;
    --rb-page-shell-inset: 48px;
    --rb-page-shell: min(
        var(--rb-page-shell-max),
        calc(100% - var(--rb-page-shell-inset))
    );
    --rb-page-shell-gutter: 2px;
    /* One shared title↔chrome gap (was 14/28 desktop, 12/16/24 phone). */
    --rb-page-title-top: 16px;
    --rb-page-title-to-tabs: 8px;
    --rb-page-tabs-to-content: 16px;
    /* Desktop pad under fixed tabs → page title. */
    --rb-page-chrome-top: 28px;
    --rb-ink-faint: color-mix(in oklab, var(--text) 42%, transparent);
    /* Inactive underline-tab ink: ≥4.5:1 on #FFFAF3 (5.69) and #F3F0EB (5.20). */
    --rb-tab-inactive: #6b6358;
    --rb-fill: color-mix(in oklab, var(--text) 6%, transparent);
    --rb-fill-strong: color-mix(in oklab, var(--text) 10%, transparent);
    --rb-motion: 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Desktop top header — slightly tighter than the original 48/32/16 stack. */
    --rb-tabs-h: 42px;
    --rb-tabs-top: var(--rb-tabs-h);
    --rb-tabs-bottom: 0px;
    --rb-search-fab-size: 48px;
    /* Match c34d8e1 right margin (~18px); left shrinks to the same. */
    --rb-phone-pad: 18px;
}
:root[data-theme="dark"] {
    --rb-tab-inactive: #a1a7b2;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --rb-tab-inactive: #a1a7b2;
    }
}
@media (max-width: 767px) {
    :root {
        --rb-tabs-h: calc(3.35rem + env(safe-area-inset-bottom, 0px));
        --rb-tabs-top: 0px;
        --rb-tabs-bottom: var(--rb-tabs-h);
    }
}
@media (max-width: 600px) {
    :root {
        /* Fluid column on phones — desktop keeps the 42rem measure. */
        --rb-content-column: 100%;
        --landing-search-width: 100%;
    }
}

/* ---------- Shell: no header divider; instant search lives in the modal ---------- */
.header {
    border-bottom: 0;
}
body {
    padding-top: var(--rb-tabs-top);
    padding-bottom: var(--rb-tabs-bottom);
}
html.search-modal-open,
html.search-modal-open body {
    overflow: hidden;
}

/* ---------- Core tabs ---------- */
.rb-tabs {
    position: fixed;
    /* Above the Search FAB (35) so More / popovers inside this chrome win. */
    z-index: 40;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--rb-tabs-h);
    padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
    /* Own surface vs page --bg — no divider lines under the chrome. */
    background: var(--bg-soft, color-mix(in oklab, var(--bg) 88%, var(--text) 12%));
    border-bottom: 0;
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    /* Desktop autohide uses transform so body padding-top stays (no layout shift). */
    transform: translateY(0);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    box-shadow: none;
}
/* Soft lift when scrolled — still no hairline divider. */
html:not([data-tabs-at-top="true"]) .rb-tabs,
html.rb-tabs-scrolled .rb-tabs {
    box-shadow: 0 10px 24px rgb(28 25 23 / 0.08);
}
@media (min-width: 768px) {
    /* Brand + tab row share the page shell width (same edges as reader content). */
    .rb-tabs {
        display: grid;
        grid-template-columns: var(--rb-page-shell);
        justify-content: center;
        padding-inline: 0;
    }
    .rb-tabs-home {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin-inline-start: max(14px, env(safe-area-inset-left, 0px));
    }
    .rb-tabs-row {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        margin-inline-end: max(
            14px,
            calc(var(--rb-page-shell-gutter, 2px) + env(safe-area-inset-right, 0px))
        );
    }
    /* Home: tabs flush to the viewport right edge (normal pad), not the
       centered content shell. Brand mark stays hidden on landing. */
    body.route-view-landing .rb-tabs {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        grid-template-columns: none;
        padding-inline: max(14px, env(safe-area-inset-left, 0px))
            max(14px, env(safe-area-inset-right, 0px));
    }
    body.route-view-landing .rb-tabs-row {
        margin-inline-end: 0;
        margin-left: auto;
        justify-self: auto;
    }
}
html.rb-tabs-collapsed .rb-tabs {
    transform: translateY(-100%);
    pointer-events: none;
}

/*
  Sticky chapter ref — slides into the top chrome slot once the chapter
  title scrolls past (desktop + phone). Transform-only; fade mask softens
  verse clipping under the bar. Radius 0. No divider line.
*/
:root {
    --rb-sticky-ref-h: 40px;
    /* Tall enough that mid-glyph remnants under the bar wash out before full ink. */
    --rb-sticky-ref-fade: 40px;
    --rb-sticky-ref-motion: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reader-sticky-ref {
    position: fixed;
    /* Above .rb-tabs (40) so the compact ref owns the top chrome slot. */
    z-index: 41;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Include notch safe-area so phone verses never hard-clip under the status bar. */
    height: calc(var(--rb-sticky-ref-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px)
        max(14px, env(safe-area-inset-right, 0px)) 0
        max(14px, env(safe-area-inset-left, 0px));
    border: 0;
    border-bottom: 0;
    border-radius: var(--rb-radius);
    background: var(--reader-surface, var(--reader-bg, var(--bg)));
    color: var(--reader-text, var(--text));
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform var(--rb-sticky-ref-motion);
    will-change: transform;
    box-shadow: none;
    /* Let the ::after fade paint below the bar box. */
    overflow: visible;
}
.reader-sticky-ref.is-visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}
/* Off-screen bar still sits at z-index 41; hide paint so its ::after fade
   cannot wash out the header brand/tabs while translateY(-100%). */
.reader-sticky-ref:not(.is-visible) {
    visibility: hidden;
}
.reader-sticky-ref:not(.is-visible)::after {
    display: none;
}
.reader-sticky-ref[hidden] {
    display: none;
}
.reader-sticky-ref-label {
    display: block;
    max-width: var(--rb-content-column, 42rem);
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--reader-text, var(--text));
    font: 650 0.92rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Soft mask so verses are not hard-clipped under the bar. */
.reader-sticky-ref::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--rb-sticky-ref-fade);
    pointer-events: none;
    /* Hold surface longer, then ease out — kills the hard mid-glyph edge. */
    background: linear-gradient(
        180deg,
        var(--reader-surface, var(--reader-bg, var(--bg))) 0%,
        var(--reader-surface, var(--reader-bg, var(--bg))) 18%,
        color-mix(
                in oklab,
                var(--reader-surface, var(--reader-bg, var(--bg))) 88%,
                transparent
            )
            42%,
        color-mix(
                in oklab,
                var(--reader-surface, var(--reader-bg, var(--bg))) 45%,
                transparent
            )
            68%,
        color-mix(
                in oklab,
                var(--reader-surface, var(--reader-bg, var(--bg))) 12%,
                transparent
            )
            88%,
        transparent 100%
    );
}
/* Phone: no top tab bar — sticky owns the top edge while active. */
@media (max-width: 767px) {
    body.launcher-reader-active.reader-sticky-ref-active #launcher-chooser {
        /* Keep free-scroll physics; mask is on the sticky. */
        scroll-padding-top: calc(
            var(--rb-sticky-ref-h) + env(safe-area-inset-top, 0px)
        );
    }
}
@media (prefers-reduced-motion: reduce) {
    .reader-sticky-ref {
        transition: none;
    }
}
html.rb-more-open,
html.rb-more-open body {
    overflow: hidden;
}
/* Sizing comes from shared .shell-brand-link / --rb-brand-mark-header tokens. */
.rb-tabs-home {
    flex: 0 0 auto;
    color: var(--text);
}
.rb-tabs-row {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: auto;
    min-width: 0;
}
.rb-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--muted);
    font: 500 0.74rem/1 "Lexend", "Helvetica Neue", sans-serif;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--rb-motion), background-color var(--rb-motion);
    -webkit-tap-highlight-color: transparent;
}
.rb-tab-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
.rb-tab[aria-current="page"] {
    color: var(--text);
    background: var(--rb-fill);
}
/* Desktop non-home: icons only (labels stay for a11y via aria-label/title). */
@media (min-width: 768px) {
    :root {
        --rb-tabs-h: 44px;
    }
    body:not(.route-view-landing) .rb-tab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    body:not(.route-view-landing) .rb-tab {
        width: 44px;
        padding: 0;
        gap: 0;
    }
    /* Home (wide): keep icon + text; same 44px height so the bar does not jump. */
    body.route-view-landing .rb-tab {
        width: auto;
        padding: 0 10px;
        gap: 5px;
    }
}
.rb-tab:focus-visible,
.rb-more-item:focus-visible,
.rb-icon-action:focus-visible,
.rb-tabs-home:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--text) 30%, transparent);
    outline-offset: 1px;
}
.rb-tab-more {
    position: relative;
}
.rb-tab-more-menu {
    position: absolute;
    z-index: 55;
    right: 0;
    top: calc(100% + 6px);
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: var(--bg);
    box-shadow: none;
}
.rb-tab-more-menu[hidden] {
    display: none;
}
/* Scrim lives inside .rb-tabs so it shares main's stacking context with the
   sheet (html::before would paint over main { z-index: 2 } and eat clicks). */
.rb-more-scrim {
    display: none;
}
.rb-more-item,
.rb-tab-more-menu .shell-link,
.rb-tab-more-menu button,
.rb-tab-more-menu .selah-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--text);
    font: 500 0.84rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    font-weight: 500;
    letter-spacing: normal;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    flex: none;
    transition: none;
}
.rb-tab-more-menu .shell-theme-toggle {
    width: 100%;
    min-width: 0;
    padding: 0 12px;
    border-color: transparent;
    background: transparent;
    color: var(--text);
}
.rb-tab-more-menu .shell-theme-toggle[data-theme="light"],
.rb-tab-more-menu .shell-theme-toggle[data-theme="dark"] {
    border-color: transparent;
    background: transparent;
    color: var(--text);
}
.rb-tab-more-menu .shell-theme-toggle svg {
    display: block;
    margin: 0;
    flex: 0 0 auto;
}
.rb-tab-more-menu .selah-badge {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}
.rb-tab-more-menu .selah-badge:focus-visible {
    color: var(--text);
    border-color: transparent;
    border-top-color: var(--line);
    background: var(--rb-fill);
}
.rb-tab-more-menu > * {
    max-width: 100%;
}
@media (max-width: 767px) {
    .rb-tabs {
        top: auto;
        bottom: 0;
        gap: 0;
        height: var(--rb-tabs-h);
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        box-shadow: 0 -8px 24px rgb(28 25 23 / 0.05);
    }
    .rb-tabs-home {
        display: none;
    }
    .rb-tabs-row {
        display: grid;
        /* Read / Notes / Memorize / More — Search is FAB-only. */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        height: 3.35rem;
        margin: 0;
    }
    /* One grid cell for More — not `display: contents`, or the open sheet
       would become a 5th grid item and shove the tabs. */
    .rb-tab-more {
        position: relative;
        display: flex;
        align-items: stretch;
        min-width: 0;
    }
    .rb-tab-more > .rb-tab {
        flex: 1 1 auto;
        width: 100%;
    }
    .rb-tab {
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 3.35rem;
        padding: 0;
        border-radius: var(--rb-radius);
        color: var(--rb-ink-faint);
    }
    .rb-tab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .rb-tab-icon {
        width: 1.6rem;
        height: 1.6rem;
    }
    .rb-tab[aria-current="page"] {
        color: var(--text);
        background: transparent;
        box-shadow: inset 0 2px 0 var(--text);
    }
    /* Native-feeling sheet anchored above the bottom tabs (above the FAB).
       Use left/right stretch (width:auto) — width:100% can resolve against a
       narrower body when the scrollbar gutter is reserved. */
    .rb-tab-more-menu {
        position: fixed;
        z-index: 55;
        top: auto;
        left: 0;
        right: 0;
        bottom: var(--rb-tabs-h);
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 10px 0 4px;
        border: 0;
        border-top: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
        border-radius: var(--rb-radius);
        /* Same warm paper as the tab bar / reader — not cooler --bg-soft. */
        background: var(--bg);
        box-shadow: 0 -12px 28px rgb(28 25 23 / 0.1);
    }
    .rb-tab-more-menu::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: 2px auto 8px;
        border-radius: var(--rb-radius);
        background: color-mix(in oklab, var(--text) 18%, transparent);
    }
    html.rb-more-open .rb-more-scrim {
        display: block;
        position: fixed;
        z-index: 54;
        inset: 0 0 var(--rb-tabs-h) 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgb(28 25 23 / 0.28);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .rb-tab-more-menu {
        padding-inline: var(--rb-phone-pad, 18px);
        box-sizing: border-box;
    }
    .rb-more-item,
    .rb-tab-more-menu .shell-link,
    .rb-tab-more-menu button,
    .rb-tab-more-menu .selah-badge {
        min-height: 44px;
        padding-inline: 0;
    }
    .rb-tab-more-menu .shell-theme-toggle {
        padding-inline: 0;
    }
}

/*
  Search FAB — reader only (?read=1 / launcher-reader-active).
  Desktop: only after the top header has scrolled away (rb-tabs-collapsed).
  Phone: always available in the reader (Search leaves the tab row).
  Never on home, Overview, Notes, Memorize, or other shells.
*/
.rb-search-fab {
    display: none;
    position: fixed;
    z-index: 35;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    align-items: center;
    justify-content: center;
    width: var(--rb-search-fab-size);
    height: var(--rb-search-fab-size);
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 8px 24px rgb(28 25 23 / 0.22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 160ms ease,
        opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color var(--rb-motion);
}
.rb-search-fab .rb-tab-icon {
    width: 1.35rem;
    height: 1.35rem;
}
.rb-search-fab:active {
    /* No press-shrink — Dylan: verses and chrome stay put on tap. */
    background: color-mix(in oklab, var(--text) 88%, black);
}
.rb-search-fab:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--text) 40%, transparent);
    outline-offset: 3px;
}
/* Desktop: reader + header scrolled away. */
@media (min-width: 768px) {
    html.rb-tabs-collapsed body.launcher-reader-active .rb-search-fab {
        display: inline-flex;
    }
}
@media (max-width: 600px) {
    /* Phone: only after scroll, and not over the end-of-chapter nav. */
    body.launcher-reader-active:has(#launcher-chooser[data-reader-scrolled]):has(
            .launcher-apps-panel[data-reader-can-scroll-bottom]
        )
        .rb-search-fab {
        display: inline-flex;
        /* Above the bottom tab bar on phones. */
        bottom: calc(var(--rb-tabs-h) + 12px);
    }
}
/* Hide FAB under any overlay: search, More sheet, open-anywhere, keyboard.
   Also hide while a verse tray is open — tray actions sit where the FAB is.
   Phone/desktop: hide when the end-of-chapter nav is in the scrollport
   (data-reader-can-scroll-bottom cleared near the bottom). */
html.search-modal-open .rb-search-fab,
html.rb-more-open .rb-search-fab,
body.launcher-keyboard-open .rb-search-fab,
body.launcher-keyboard-active .rb-search-fab,
body:has(#launcher-catalog-modal:not(.hidden)) .rb-search-fab,
body:has(.rb-margin-tray) .rb-search-fab,
body:has(.chapter-overview-panel:not([hidden])) .rb-search-fab,
body:has([data-reader-share-menu]:not([hidden])) .rb-search-fab,
body.launcher-reader-active:has(
        .launcher-apps-panel:not([data-reader-can-scroll-bottom])
    )
    .rb-search-fab {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .rb-tabs,
    .rb-search-fab {
        transition: none !important;
    }
}

/* ---------- Shared page shell (column + outer measure) ---------- */
.rb-content-column,
.rb-page-column {
    width: var(--rb-content-column);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}
.rb-page-shell {
    width: var(--rb-page-shell);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .rb-page-shell {
        padding-right: var(--rb-page-shell-gutter);
    }
}

/* ---------- Home ---------- */
.rb-tabs-home[aria-current="page"],
body.route-view-landing .rb-tabs-home {
    visibility: hidden;
}
/* Home header = page paper: no --bg-soft tone, no lift shadow. Other
   routes keep the subtle chrome surface. */
body.route-view-landing .rb-tabs,
html:not([data-tabs-at-top="true"]) body.route-view-landing .rb-tabs,
html.rb-tabs-scrolled body.route-view-landing .rb-tabs {
    background: var(--bg);
    box-shadow: none;
}
/* Home already has the big search bar — hide FAB always. */
body.route-view-landing .rb-search-fab {
    display: none !important;
}
/* Home / Search: outer shell matches reader; inner column is --rb-content-column. */
body.route-view-dashboard main,
body.route-view-landing.route-view-dashboard main,
body.route-view-search.route-view-dashboard main {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    zoom: 1;
}
body.route-view-dashboard .panel,
body.route-view-search.route-view-dashboard .panel {
    width: var(--rb-page-shell);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    body.route-view-dashboard .panel,
    body.route-view-search.route-view-dashboard .panel {
        padding-right: var(--rb-page-shell-gutter);
    }
}
@media (max-width: 767px) {
    body.route-view-dashboard .panel,
    body.route-view-search.route-view-dashboard .panel {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-inline: var(--rb-phone-pad);
        box-sizing: border-box;
    }
    body.route-view-dashboard .header,
    body.route-view-landing .header,
    body.route-view-search.route-view-dashboard .header {
        width: 100%;
        max-width: 100%;
    }
    body.route-view-dashboard .rb-home,
    body.route-view-dashboard .rb-home.landing-stack,
    body.route-view-landing .rb-home.landing-stack {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }
}
body.route-view-dashboard .header,
body.route-view-landing .header,
body.route-view-search.route-view-dashboard .header {
    width: var(--rb-content-column);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}
.rb-home {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-space-md, 1rem);
    /* Same content column as the reader verse block. */
    width: var(--rb-content-column);
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    box-sizing: border-box;
}
/* Beat body.route-view-dashboard .landing-stack { width: 100% } + nested
   dashboard-idle auto-margins so search and columns share one edge. */
body.route-view-dashboard .rb-home.landing-stack,
body.route-view-landing .rb-home.landing-stack {
    width: var(--rb-content-column);
    max-width: 100%;
    margin-inline: auto;
}
body.route-view-dashboard .rb-home .dashboard-idle,
body.route-view-dashboard .rb-home .dashboard-columns,
.rb-home .dashboard-idle,
.rb-home .dashboard-columns {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}
/* Home search stays inline while typing; modal opens only for results. */
.rb-home-search-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
/* Match `.route-search-query-row` / dashboard blocks: square, flat, full border. */
.rb-home-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--route-search-query-size, 48px);
    height: auto;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--bg-strong) 86%, var(--bg) 14%);
    box-shadow: none;
    transition: border-color var(--rb-motion), background-color var(--rb-motion);
}
.rb-home-suggest,
.rb-home-suggest.quick-search-autocomplete-list {
    position: absolute;
    z-index: 8;
    /* Flush to the search chrome border-box — no gap, full width. */
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: min(16rem, 45vh);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: var(--rb-radius);
    background: var(--bg);
    box-shadow: none;
}
.rb-home-suggest.hidden {
    display: none;
}
.rb-home-suggest .quick-search-autocomplete-option {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}
.rb-home-suggest .quick-search-autocomplete-option.is-active,
.rb-home-suggest .quick-search-autocomplete-option:focus-visible {
    outline: none;
    background: var(--rb-fill);
}
@media (hover: hover) and (pointer: fine) {
    .rb-home-suggest .quick-search-autocomplete-option:hover {
        background: var(--rb-fill);
    }
}
.rb-home-search-icon {
    display: flex;
    color: var(--muted);
}
.rb-home-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--text);
    font: 400 1.05rem/1.25 "Lexend", "Helvetica Neue", sans-serif;
    -webkit-appearance: none;
    appearance: none;
}
.rb-home-search-input::placeholder {
    color: var(--muted);
    opacity: 1;
}
.rb-home-search-input::-webkit-search-decoration,
.rb-home-search-input::-webkit-search-cancel-button {
    display: none;
}
.rb-home-search-kbd {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--muted);
    font: 500 0.72rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    text-align: center;
}
@media (max-width: 767px) {
    .rb-home-search-kbd {
        display: none;
    }
    .rb-home-search-input {
        font-size: 16px;
    }
}

/* ---------- Floating search modal (Margin proportions) ---------- */
.search-modal {
    --search-gutter: max(0.75rem, env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
    /* Snap open: shell + backdrop paint on the first frame; panel ≤120ms. */
    --rb-search-open: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
    position: fixed;
    z-index: 60;
    inset: 0;
    display: flex;
    /* Top-stable: growing results must not jump the panel from mid-screen. */
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--search-gutter) calc(0.75rem + env(safe-area-inset-right, 0px))
        var(--search-gutter) calc(0.75rem + env(safe-area-inset-left, 0px));
    overflow-x: hidden;
    font-family: "Lexend", "Helvetica Neue", sans-serif;
}
.search-modal[hidden] {
    display: none;
}
@keyframes rb-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes rb-rise-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* Search panel only: opacity + slight translate, no scale. */
@keyframes rb-search-open {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.search-modal-backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: rgb(28 25 23 / 0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
:root[data-theme="dark"] .search-modal-backdrop {
    background: #000000e6;
}
.search-modal-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(36rem, 100%);
    max-width: 100%;
    max-height: calc(100dvh - (2 * var(--search-gutter)));
    min-height: 0;
    height: auto;
    overflow: hidden;
    border-radius: var(--rb-radius);
    background: var(--bg);
    color: var(--text);
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    box-shadow: 0 16px 40px rgb(28 25 23 / 0.14);
    animation: rb-search-open var(--rb-search-open);
}
@media (prefers-reduced-motion: reduce) {
    .search-modal-panel {
        animation: none;
    }
}
:root[data-theme="dark"] .search-modal-panel {
    background: var(--bg);
    color: var(--text);
}
.search-modal-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
}
.search-modal-bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 0;
    /* Compact Margin height, route.bible type air from a99c508. */
    padding: 11px 14px;
}
.search-modal-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--muted, #a8a29e);
}
.search-modal-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}
.search-modal-form input[type="search"] {
    flex: 1 1 auto;
    align-self: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0.25rem 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    outline: none;
    box-shadow: none;
    color: inherit;
    /* Blend: a99c508 used 1.125rem; keep Lexend, slightly larger than Margin. */
    font: 400 1.1rem/1.25 "Lexend", "Helvetica Neue", sans-serif;
    -webkit-appearance: none;
    appearance: none;
}
.search-modal-form input[type="search"]::placeholder {
    color: var(--muted, #a8a29e);
    opacity: 1;
}
.search-modal-form input[type="search"]::-webkit-search-decoration,
.search-modal-form input[type="search"]::-webkit-search-cancel-button,
.search-modal-form input[type="search"]::-webkit-search-results-button,
.search-modal-form input[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}
.search-cancel {
    display: none;
    /* Beat the global `button { width: 100% }` from forms.css. */
    width: auto;
    min-width: 0;
    min-height: 0;
}
.search-history {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
    padding: 0 14px 10px;
}
.search-history[hidden] {
    display: none;
}
.search-history-label {
    display: inline-flex;
    flex: none;
    color: var(--muted, #a8a29e);
    line-height: 0;
}
.search-suggest-chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 0.3rem;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.search-suggest-chips::-webkit-scrollbar {
    display: none;
}
/* Compact left-aligned chips — beat forms.css `button { width:100%; min-height:42px }`.
   Soft fill from a99c508, square corners via --rb-radius. */
.search-suggest-chip {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0.22rem 0.6rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: color-mix(in oklab, var(--text) 6%, transparent);
    box-shadow: none;
    color: var(--muted, #78716c);
    font: 400 0.82rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--rb-motion), color var(--rb-motion);
}
.search-suggest-chip:focus-visible {
    outline: none;
    color: var(--text);
    background: color-mix(in oklab, var(--text) 10%, transparent);
}
.search-modal-results {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
}
.search-modal-form:has(.search-modal-list:not([hidden])) .search-modal-results {
    flex: 1 1 auto;
}
/* Flush under the bar when history is hidden — zero gap to first option. */
.search-modal-form:has(.search-history[hidden]) .search-modal-results,
.search-modal-form:not(:has(.search-history:not([hidden]))) .search-modal-results {
    margin-top: 0;
}
.search-modal-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
}
.search-modal-list::-webkit-scrollbar {
    display: none;
}
.search-modal-list[hidden] {
    display: none;
}
.search-modal-list > li + li {
    margin-top: 0;
}
.search-result {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    /* Blend: a99c508 0.75rem air, Margin compaction kept short. */
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease;
}
.search-result.is-selected,
.search-result:focus-visible {
    outline: none;
    background: color-mix(in oklab, var(--text) 5%, transparent);
}
.search-result:active {
    background: color-mix(in oklab, var(--text) 7%, transparent);
}
.search-modal-list.is-passage .search-result {
    padding-block: 0.6rem;
    min-height: 0;
}
.search-result-ref {
    display: block;
    color: var(--text, #1c1917);
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}
.search-result-text {
    display: -webkit-box;
    margin-top: 0.25rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--muted, #57534e);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.search-result-passage {
    display: block;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
}
.search-mark {
    background: none;
    color: inherit;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}
:root[data-theme="dark"] .search-result-ref {
    color: #f5f5f4;
}
:root[data-theme="dark"] .search-result-text {
    color: #a8a29e;
}
:root[data-theme="dark"] .search-mark {
    color: inherit;
}
.search-unavailable {
    margin: 0;
    padding: 0.85rem 1rem;
    color: var(--muted, #a8a29e);
    font-size: 0.92rem;
    line-height: 1.35;
}
.search-modal-footer {
    display: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 0.5rem 1rem 0.75rem;
    border: 0;
    color: var(--muted, #a8a29e);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}
.search-modal-form:has(.search-modal-list:not([hidden]):not(.is-passage)) .search-modal-footer {
    display: block;
}
.suggest-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
}
.suggest-skeleton-ref,
.suggest-skeleton-text {
    display: block;
    height: 0.7rem;
    border-radius: var(--rb-radius);
    background: linear-gradient(90deg, rgb(28 25 23 / 0.05), rgb(28 25 23 / 0.1), rgb(28 25 23 / 0.05));
    background-size: 200% 100%;
    animation: rb-shimmer 1.2s linear infinite;
}
.suggest-skeleton-ref {
    width: 6rem;
}
.suggest-skeleton-text {
    width: 92%;
    height: 0.9rem;
}
@keyframes rb-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}
@media (max-width: 767px) {
    .search-modal {
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
    }
    .search-modal-panel {
        position: absolute;
        inset: 0;
        width: auto;
        max-width: none;
        max-height: none;
        height: auto;
        border-radius: var(--rb-radius);
        border: 0;
        box-shadow: none;
    }
    .search-modal-form {
        height: 100%;
        max-height: none;
    }
    .search-modal-bar {
        padding: calc(10px + env(safe-area-inset-top, 0px))
            calc(14px + env(safe-area-inset-right, 0px)) 10px
            calc(14px + env(safe-area-inset-left, 0px));
    }
    .search-modal-form input[type="search"] {
        font-size: 1.0625rem;
    }
    .search-cancel {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0 0.35rem;
        border: 0;
        background: transparent;
        color: inherit;
        font: 600 0.95rem/1 "Lexend", "Helvetica Neue", sans-serif;
        cursor: pointer;
    }
    .search-history,
    .search-suggest {
        padding: 0 calc(14px + env(safe-area-inset-right, 0px)) 10px
            calc(14px + env(safe-area-inset-left, 0px));
    }
    .search-modal-results {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .search-modal-list {
        flex: none;
        overflow: visible;
    }
    /* Keep chips compact on phone — do not inflate to 44px tap pills. */
    .search-suggest-chip {
        min-height: 0;
        padding: 0.25rem 0.65rem;
    }
}

/* ---------- Reader: Margin-like measure, tight numbers, left rail ---------- */
/*
  Reading column = [vnum | text] — horizontally centered with equal page pads.
  The rail lives OUTSIDE the column (absolute ::before in the left page margin)
  so it never shifts content right. Gap rail→vnum ≥ 9px.
  Vnums are left-aligned on the column edge (same as heads / note / ref).
  Selected verses + in-range heads + tray share one continuous rail and the
  same left/right column edges.
*/
body.route-view-launcher.launcher-reader-active {
    --reader-selected: var(--reader-text);
    --verse-rail-w: 2px;
    /*
      Rail at ~x=7 (2px) inside the 18px page pad.
      Vnums LEFT-aligned: first digit at column left (x=18), same as heads/note/ref.
      Gutter sized for three tabular digits only; ~6px gap before verse text.
      Rail→vnum box ≥9px. Pad stays ~18 both sides — never grow margins.
    */
    --verse-rail-gap: 9px;
    /* Three tabular digits at 0.92em ("100" ≈28px) — tight, not a 2rem slot. */
    --verse-gutter: 1.8rem;
    --verse-gutter-gap: 6px;
    --verse-inset: 0px;
    /* Text column indent (no rail — rail is outside the column). */
    --verse-text-indent: calc(var(--verse-gutter) + var(--verse-gutter-gap));
    /* column_left(18) − rail_x(7) = 11 = rail-w(2) + gap(9). */
    --verse-rail-outside: calc(var(--verse-rail-w) + var(--verse-rail-gap));
    --verse-rail-color: rgba(28, 25, 23, 0.42);
    --verse-rail-color-soft: rgba(28, 25, 23, 0.18);
    --read-size: 1.125rem;
    --read-leading: 1.65;
}
@media (max-width: 767px) {
    body.route-view-launcher.launcher-reader-active {
        --verse-rail-gap: 9px;
        --verse-gutter: 1.8rem;
        --verse-gutter-gap: 6px;
        --read-size: 1.08rem;
        --read-leading: 1.62;
    }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.route-view-launcher.launcher-reader-active {
        --reader-selected: var(--reader-text);
    }
}
body.route-view-launcher.launcher-reader-active main {
    height: calc(100dvh - var(--rb-tabs-h));
    max-height: calc(100dvh - var(--rb-tabs-h));
}
@media (max-width: 900px) {
    body.route-view-launcher.launcher-reader-active .panel {
        height: calc(100dvh - var(--rb-tabs-h));
        max-height: calc(100dvh - var(--rb-tabs-h));
    }
}
body.route-view-launcher.launcher-reader-active .reader-mode {
    width: var(--rb-content-column);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}
/*
  Chapter chrome: big h1 + inline Overview/Read toggle on one row.
  Share lives in More. Spacing at 390: title @ safe-area+12, title→content 16px.
*/
.reader-chapter-chrome {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 0 var(--rb-page-tabs-to-content) 0;
    min-width: 0;
    width: 100%;
}
/* Continuous scroll: each chapter is a section in one .reader-mode stream. */
.reader-continuous-chapter {
    display: block;
    width: 100%;
    min-width: 0;
}
.reader-continuous-chapter + .reader-continuous-chapter {
    margin-top: 2.5rem;
    padding-top: 0.5rem;
}
.reader-chapter-title-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}
/* Floor above header brand wordmark (mark 1.4rem / cap 0.72 ≈ 1.94rem) so
   page h1s stay the hierarchy peak; shared by reader + Notes/Memorize/Search. */
.reader-chapter-head,
.rb-page-title {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    color: var(--text);
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: clamp(2.05rem, 1.25rem + 3.4vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
    text-wrap: balance;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.reader-chapter-title-row .reader-chapter-head {
    flex: 1 1 auto;
    min-width: 0;
}
.reader-chapter-title-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.25rem;
    align-self: center;
}
.reader-chapter-title-actions .rb-page-menu {
    margin-top: 0;
}
/* Destination toggle — shows the view it switches to; radius 0.
   Beat forms.css `button { width: 100% }` so the title keeps the row. */
.reader-view-toggle {
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
    width: auto;
    max-width: max-content;
    min-height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0 0.55rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--rb-tab-inactive);
    font: 500 0.88rem/1 "Lexend", "Helvetica Neue", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: none;
    appearance: none;
    -webkit-appearance: none;
}
.reader-view-toggle:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--text) 40%, transparent);
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .reader-view-toggle:hover {
        color: var(--text);
        background: var(--rb-fill);
    }
}
.header-share-button.is-copied,
.rb-more-share.is-copied {
    color: var(--ok, #2f6b3a);
}
.header-share-button[data-share-confirm]::after {
    content: attr(data-share-confirm);
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.15rem 0.4rem;
    border-radius: var(--rb-radius);
    background: var(--bg-strong, var(--bg));
    color: var(--ok, #2f6b3a);
    font: 650 0.72rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
}
.rb-more-share-icon,
.rb-more-home-icon,
.rb-more-bookmarks-icon,
.rb-more-history-icon,
.rb-more-profile-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
/* Memorize Review | Library underline tabs — no full-width divider (no-dividers). */
.rb-memorize-wrap .rb-underline-tabs {
    width: 100%;
    min-width: 0;
    gap: 4px;
    border-bottom: 0;
}
.rb-memorize-wrap .rb-underline-tab {
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 0.7rem;
    border-bottom: 2px solid transparent;
    color: var(--rb-tab-inactive);
    font: 500 0.88rem/1 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-memorize-wrap .rb-underline-tab:first-child {
    padding-left: 0;
}
.rb-memorize-wrap .rb-underline-tab.is-active,
.rb-memorize-wrap .rb-underline-tab[aria-selected="true"] {
    color: var(--text);
    border-bottom-color: var(--text);
}
.reader-chapter-chrome + .reader-section-head,
.reader-chapter-chrome + .reader-section-head:first-of-type,
.reader-chapter-chrome + .reader-verse {
    margin-top: 0;
}
/* Margin `.section-head` (act.20): full ink, 1.2rem / 600 — stronger than body.
   Same left edge as the reading column (vnum), not indented by the rail. */
.reader-section-head {
    position: relative;
    margin: 1.4rem 0 0.55rem 0;
    color: var(--text);
    font: 600 1.2rem/1.25 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: normal;
    text-transform: none;
}
.reader-section-head:first-of-type {
    margin-top: 0.35rem;
}
/* Margin `.vnum`: stone muted, tabular, LEFT-aligned — first digit on column edge. */
.reader-verse-num,
body.route-view-launcher.launcher-reader-active .reader-verse-num {
    box-sizing: border-box !important;
    width: var(--verse-gutter) !important;
    min-width: var(--verse-gutter) !important;
    max-width: var(--verse-gutter) !important;
    margin: 0 !important;
    padding-top: 0.28rem !important;
    padding-inline: 0 !important;
    color: #57534e;
    font-size: 0.92em !important;
    font-weight: 650;
    font-variant-numeric: lining-nums tabular-nums !important;
    line-height: inherit;
    text-align: left !important;
    letter-spacing: 0 !important;
}
:root[data-theme="dark"] .reader-verse-num,
:root[data-theme="dark"] body.route-view-launcher.launcher-reader-active .reader-verse-num {
    color: #e7e5e4;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .reader-verse-num,
    :root:not([data-theme="light"])
        body.route-view-launcher.launcher-reader-active
        .reader-verse-num {
        color: #e7e5e4;
    }
}
/* Open / noted: Margin `--ink-soft` (#44403c / #d6d3d1) — never brand orange. */
.reader-verse-num.selected,
.reader-verse-num[aria-pressed="true"],
.reader-verse.has-margin-note .reader-verse-num,
.reader-verse.is-selected .reader-verse-num,
body.route-view-launcher.launcher-reader-active .reader-verse-num.selected,
body.route-view-launcher.launcher-reader-active
    .reader-verse-num[aria-pressed="true"] {
    color: #44403c;
    font-weight: 650;
}
:root[data-theme="dark"] .reader-verse-num.selected,
:root[data-theme="dark"] .reader-verse-num[aria-pressed="true"],
:root[data-theme="dark"] .reader-verse.has-margin-note .reader-verse-num,
:root[data-theme="dark"] .reader-verse.is-selected .reader-verse-num {
    color: #d6d3d1;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .reader-verse-num.selected,
    :root:not([data-theme="light"]) .reader-verse-num[aria-pressed="true"],
    :root:not([data-theme="light"]) .reader-verse.has-margin-note .reader-verse-num,
    :root:not([data-theme="light"]) .reader-verse.is-selected .reader-verse-num {
        color: #d6d3d1;
    }
}
/* Soften verse body slightly so section heads read with clear ink contrast. */
.reader-verse-text,
.reader-verse.is-selected .reader-verse-text {
    color: color-mix(in oklab, var(--reader-text, var(--text)) 86%, transparent);
    font-size: var(--read-size);
    font-weight: 400;
    line-height: var(--read-leading);
    /* Dim/undim + ink must snap — a transition reads as a verse-select flash. */
    transition: none;
}
@media (hover: hover) and (pointer: fine) {
    .reader-verse-text:hover {
        color: var(--reader-text, var(--text));
    }
}
/*
  Spotlight: while a verse is expanded, the rest of the chapter recedes.
  Instant opacity — never animate dim/undim across frames.
*/
.reader-mode:has(.reader-verse.is-selected) .reader-verse:not(.is-selected) .reader-verse-text,
.reader-mode:has(.reader-verse.is-selected) .reader-verse:not(.is-selected) .reader-verse-num,
.reader-mode:has(.reader-verse.is-selected) .reader-section-head,
.reader-mode:has(.reader-verse.is-selected) .reader-chapter-chrome {
    opacity: 0.42;
    transition: none;
}
.reader-mode:has(.reader-verse.is-selected) .reader-section-head:has(+ .reader-verse.is-selected) {
    opacity: 1;
}
.reader-mode:has(.reader-verse.is-selected) .reader-chapter-nav {
    opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
    .reader-mode:has(.reader-verse.is-selected) .reader-verse:not(.is-selected):hover .reader-verse-text,
.reader-mode:has(.reader-verse.is-selected) .reader-verse:not(.is-selected):hover .reader-verse-num {
        opacity: 0.8;
        transition: none;
    }
}
/* Kill forms.css button transitions on verse controls (bg/transform flash on tap). */
.reader-verse-num,
.reader-verse-text,
.reader-verse.is-selected .reader-verse-num,
.reader-verse.is-selected .reader-verse-text {
    transition: none !important;
}

/* End-of-chapter prev/next — same 18 → vw−18 column as the reading measure. */
.reader-chapter-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 1.75rem 0 0.5rem;
    padding: 0;
    overflow: hidden;
}
.reader-chapter-nav__link,
.reader-chapter-nav__spacer {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}
.reader-chapter-nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    color: color-mix(in oklab, var(--reader-text, var(--text)) 72%, transparent);
    font: 550 0.95rem/1.25 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.reader-chapter-nav__link--prev {
    justify-content: flex-start;
    text-align: left;
}
.reader-chapter-nav__link--next {
    justify-content: flex-end;
    text-align: right;
}
.reader-chapter-nav__link--prev::before {
    content: "‹";
    margin-right: 0.35em;
    font-weight: 650;
}
.reader-chapter-nav__link--next::after {
    content: "›";
    margin-left: 0.35em;
    font-weight: 650;
}
@media (hover: hover) and (pointer: fine) {
    .reader-chapter-nav__link:hover {
        color: var(--reader-text, var(--text));
    }
}
.reader-chapter-nav__link:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--reader-text, var(--text)) 40%, transparent);
    outline-offset: 2px;
    border-radius: var(--rb-radius);
}
.reader-verse,
body.route-view-launcher.launcher-reader-active .reader-verse {
    position: relative;
    display: grid;
    /* Beat launcher.css's fixed 28px column. */
    grid-template-columns: var(--verse-gutter) minmax(0, 1fr) !important;
    align-items: start;
    gap: var(--verse-gutter-gap) !important;
    margin: 0.12rem 0;
    /* No border/pad for the rail — it sits outside the column. */
    border-left: 0 !important;
    padding: 0.15rem 44px 0.15rem 0 !important;
    line-height: var(--read-leading);
    transform: none !important;
}
/*
  Verse tap/selection: highlight only — never inherit forms.css
  `button:active { transform: scale(0.98) }` on num/text buttons.
*/
.reader-verse:active,
.reader-verse.is-selected,
.reader-verse.is-selected:active,
.reader-verse.reader-rail-active-verse,
.reader-verse-num:active,
.reader-verse-num.selected,
.reader-verse-num[aria-pressed="true"],
.reader-verse-text:active,
.reader-verse.is-selected .reader-verse-num,
.reader-verse.is-selected .reader-verse-text,
body.route-view-launcher.launcher-reader-active .reader-verse:active,
body.route-view-launcher.launcher-reader-active .reader-verse.is-selected,
body.route-view-launcher.launcher-reader-active .reader-verse.is-selected:active,
body.route-view-launcher.launcher-reader-active .reader-verse-num:active,
body.route-view-launcher.launcher-reader-active .reader-verse-text:active {
    transform: none !important;
}
/* Phones 320–430: equal page pads; rail lives in the left pad. */
@media (max-width: 600px) {
    body.route-view-launcher.launcher-reader-active {
        --verse-rail-gap: 9px;
        --verse-gutter: 1.8rem;
        --verse-gutter-gap: 6px;
        --read-size: 1.06rem;
        --read-leading: 1.6;
    }
    body.route-view-launcher.launcher-reader-active .rb-margin-tray,
    .rb-margin-tray {
        margin-right: 0;
    }
    body.route-view-launcher.launcher-reader-active main {
        padding-inline: 0;
    }
    /*
      Page pad on the scroll container (not .panel) so the absolute rail can
      paint into the left pad without being clipped by overflow:auto.
    */
    body.route-view-launcher.launcher-reader-active .panel {
        width: 100%;
        max-width: 100%;
        padding-inline: 0;
        /* Title top ≈ safe-area + 12px (Margin rhythm). */
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    }
    body.route-view-launcher.launcher-reader-active #launcher-chooser {
        padding-inline: var(--rb-phone-pad);
        padding-bottom: calc(
            20px + var(--rb-search-fab-size) + 20px + var(--launcher-keyboard-inset, 0px)
        );
        box-sizing: border-box;
    }
    body.route-view-launcher.launcher-reader-active .launcher-apps-panel,
    body.route-view-launcher.launcher-reader-active .launcher-footer {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }
    body.route-view-launcher.launcher-reader-active .reader-mode {
        width: 100%;
        max-width: 100%;
    }
    body.route-view-launcher.launcher-reader-active .reader-verse,
    .reader-verse {
        padding: 0.12rem 0 !important;
    }
    body.route-view-launcher.launcher-reader-active .reader-verse-rail {
        display: none;
    }
    .rb-margin-tray {
        margin-right: 0;
    }
}
/* Kill the orange inset from surface.css. */
.reader-verse.has-margin-note {
    box-shadow: none !important;
}
/*
  Continuous rail in the left page margin (outside the centered column).
  Hardcoded rgba — WebKit iPhone drops oklab/var() colors on pseudo paints.
*/
body.route-view-launcher.launcher-reader-active .reader-verse.has-margin-note::before,
.reader-verse.has-margin-note::before,
body.route-view-launcher.launcher-reader-active .reader-verse.is-selected::before,
.reader-verse.is-selected::before,
body.route-view-launcher.launcher-reader-active .rb-margin-tray::before,
.rb-margin-tray::before,
body.route-view-launcher.launcher-reader-active
    .reader-verse.is-selected
    + .reader-section-head::before,
.reader-verse.is-selected + .reader-section-head::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: calc(-1 * var(--verse-rail-outside));
    top: 0;
    bottom: 0;
    width: var(--verse-rail-w);
    background: rgba(28, 25, 23, 0.42);
    pointer-events: none;
    z-index: 1;
}
body.route-view-launcher.launcher-reader-active
    .reader-verse.has-margin-note:not(.is-selected)::before,
.reader-verse.has-margin-note:not(.is-selected)::before {
    background: rgba(28, 25, 23, 0.18);
}
:root[data-theme="dark"]
    body.route-view-launcher.launcher-reader-active
    .reader-verse.has-margin-note:not(.is-selected)::before,
:root[data-theme="dark"] .reader-verse.has-margin-note:not(.is-selected)::before {
    background: rgba(231, 229, 228, 0.2);
}
:root[data-theme="dark"] body.route-view-launcher.launcher-reader-active .reader-verse.is-selected::before,
:root[data-theme="dark"] .reader-verse.is-selected::before,
:root[data-theme="dark"] body.route-view-launcher.launcher-reader-active .rb-margin-tray::before,
:root[data-theme="dark"] .rb-margin-tray::before,
:root[data-theme="dark"]
    body.route-view-launcher.launcher-reader-active
    .reader-verse.is-selected
    + .reader-section-head::before,
:root[data-theme="dark"] .reader-verse.is-selected + .reader-section-head::before {
    background: rgba(231, 229, 228, 0.45);
}
/* No leftover border-left rail on the column. */
body.route-view-launcher.launcher-reader-active .reader-verse.has-margin-note,
.reader-verse.has-margin-note,
body.route-view-launcher.launcher-reader-active .reader-verse.is-selected,
.reader-verse.is-selected,
body.route-view-launcher.launcher-reader-active .rb-margin-tray,
.rb-margin-tray {
    border-left: 0 !important;
}
/* Adjacent selected verses / tray / in-range heads share one continuous rail. */
.reader-verse.is-selected:has(+ .reader-verse.is-selected),
.reader-verse.is-selected:has(+ .reader-section-head),
.reader-verse.is-selected:has(+ .rb-margin-tray),
.reader-verse.is-selected:has(+ .rb-margin-tray + .reader-verse.is-selected),
.reader-verse.has-margin-note:has(+ .reader-verse.has-margin-note),
.reader-verse.has-margin-note:has(+ .reader-verse.is-selected),
.reader-verse.is-selected:has(+ .reader-verse.has-margin-note) {
    margin-bottom: 0 !important;
}
.reader-verse.is-selected + .reader-verse.is-selected,
.reader-verse.has-margin-note + .reader-verse.has-margin-note,
.reader-verse.has-margin-note + .reader-verse.is-selected,
.reader-verse.is-selected + .reader-verse.has-margin-note,
.reader-verse.is-selected + .reader-section-head,
.reader-verse.is-selected + .rb-margin-tray,
.reader-section-head + .reader-verse.is-selected {
    margin-top: 0 !important;
}
/*
  Section heads inside a selected range: same column edges as verses, rail via
  ::before. Vertical spacing is padding so the rail stroke has no gap.
*/
body.route-view-launcher.launcher-reader-active .reader-verse.is-selected + .reader-section-head,
.reader-verse.is-selected + .reader-section-head {
    box-sizing: border-box;
    margin: 0 !important;
    border-left: 0 !important;
    padding: 1.15rem 0 0.5rem 0;
    opacity: 1;
}
/* No divider above the (now empty) reader footer. */
.launcher-footer {
    border-top: 0;
}
body.route-view-launcher.launcher-reader-active .launcher-footer {
    padding-top: 0;
}
/* The verse rail must not sit on top of the expanded verse's actions. */
.rb-margin-tray {
    position: relative;
    z-index: 5;
}
.reader-verse-rail-dot.current {
    background: var(--reader-text, var(--text));
    box-shadow: none;
}

/* Sticky reader-header removed — chapter chrome is in-flow above the verses. */

/* ---------- Expanded verse: editor + icon-only actions ---------- */
.rb-margin-tray {
    display: flex;
    flex-direction: column;
    /*
      Tray border-box stays on the column left (x=18) so the rail ::before can
      sit at x≈7. Content (note + ref/actions) is indented to the verse-text
      column via padding-left: --verse-text-indent.
    */
    box-sizing: border-box;
    margin: 0 44px 14px 0 !important;
    padding: 0.15rem 0 0.35rem var(--verse-text-indent, 0px);
    gap: 4px;
    animation: rb-rise-in var(--rb-motion);
    /* Clear FAB + tabs so tray actions are never under the search button. */
    scroll-margin-bottom: calc(
        var(--rb-tabs-h) + var(--rb-search-fab-size) + 28px +
            var(--launcher-keyboard-inset, 0px)
    );
}
.reader-verse.is-selected + .rb-margin-tray {
    margin-top: 0 !important;
}
/* Collapse the verse's own bottom margin so passage→note has no gap. */
.reader-verse.is-selected:has(+ .rb-margin-tray) {
    margin-bottom: 0 !important;
    padding-bottom: 0.15rem !important;
}
/* Ref + actions share one row (ref left, actions right) — same edges as note. */
.rb-margin-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 28px;
}
.rb-margin-ref {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: color-mix(in oklab, var(--reader-text, var(--text)) 48%, transparent);
    font: 500 0.72rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rb-margin-tray .outliner {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--rb-fill);
    /* Sensible pad inside the box — box already sits on the verse-text edges. */
    padding: 8px 12px;
    transition: background-color var(--rb-motion);
}
.rb-margin-tray .outliner:focus-within {
    background: var(--rb-fill-strong);
}
/* Bullet hangs without shifting .otext off the passage column. */
.rb-margin-tray .oblock {
    position: relative;
    padding: 0;
    gap: 0;
}
.rb-margin-tray .obullet {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.55rem;
    min-width: 0.55rem;
    pointer-events: none;
}
/* No marker gutter on plain lines — typed text starts at the box’s 12px pad. */
.rb-margin-tray .otext {
    margin: 0;
    padding-left: 0;
}
/* Real bullets keep a shallow hang so the marker sits inside the box pad. */
.rb-margin-tray .oblock.is-bullet .otext {
    padding-left: 0.7rem;
}
.rb-margin-tray .oblock:not(.is-bullet) .obullet {
    /* Keep the hit target; don’t reserve text indent for a hidden marker. */
    width: 0;
    min-width: 0;
}
.rb-margin-tray .oblock:not(.is-bullet):focus-within .obullet::after {
    background: transparent;
}
.rb-margin-status {
    flex: 0 0 auto;
    color: var(--rb-ink-faint);
    font-size: 0.72rem;
}
.rb-margin-actions {
    display: flex;
    flex: 0 1 auto;
    flex-shrink: 1;
    align-items: center;
    gap: 2px;
    margin-left: 0;
    min-width: 0;
}
@media (max-width: 360px) {
    .rb-margin-actions {
        gap: 0;
    }
    .rb-margin-bar .rb-icon-action {
        width: 26px;
        height: 26px;
    }
    .rb-margin-status {
        display: none;
    }
}
.rb-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rb-radius);
    background: transparent;
    color: var(--rb-ink-faint);
    cursor: pointer;
    transition: color var(--rb-motion), background-color var(--rb-motion);
    -webkit-tap-highlight-color: transparent;
}
.rb-icon-action svg {
    display: block;
    width: 16px;
    height: 16px;
}
.rb-icon-action.is-copied {
    color: var(--ok, #2f6b3a);
}
.rb-icon-action.is-starred,
.rb-icon-action.is-memorized,
.rb-icon-action[aria-pressed="true"],
.rb-icon-action[aria-expanded="true"] {
    color: var(--reader-text, var(--text));
}
.rb-icon-action[aria-expanded="true"] {
    background: var(--rb-fill);
}
.rb-mem-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}
@media (max-width: 767px) {
    /* Tray border-box stays on the column; content indent via --verse-text-indent. */
    .rb-margin-tray {
        margin: 0 40px 14px 0 !important;
    }
    .rb-icon-action {
        width: 36px;
        height: 36px;
    }
}
@media (max-width: 600px) {
    .rb-margin-tray {
        margin-right: 0 !important;
    }
}
/*
  All apps catalog — match the search modal: centered panel, 0.5rem radius,
  snappy ≤120ms open (opacity + translate, no scale), X / Esc / outside close.
*/
.launcher-catalog-modal.launcher-preview-modal {
    --rb-catalog-open: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 60;
    padding: max(0.75rem, env(safe-area-inset-top, 0px))
        calc(0.75rem + env(safe-area-inset-right, 0px))
        max(0.75rem, env(safe-area-inset-bottom, 0px))
        calc(0.75rem + env(safe-area-inset-left, 0px));
    align-items: center;
    justify-items: center;
    font-family: "Lexend", "Helvetica Neue", sans-serif;
}
.launcher-catalog-modal .launcher-preview-scrim {
    background: rgb(28 25 23 / 0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
:root[data-theme="dark"] .launcher-catalog-modal .launcher-preview-scrim {
    background: #000000e6;
}
.launcher-catalog-modal .launcher-catalog-dialog {
    width: min(36rem, 100%);
    max-width: 100%;
    max-height: calc(100dvh - 1.5rem);
    padding: 0;
    gap: 0;
    border-radius: var(--rb-radius);
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 16px 40px rgb(28 25 23 / 0.14);
    animation: rb-search-open var(--rb-catalog-open);
    overflow: hidden;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
}
@media (prefers-reduced-motion: reduce) {
    .launcher-catalog-modal .launcher-catalog-dialog {
        animation: none;
    }
}
.launcher-catalog-modal .launcher-preview-dialog-head {
    padding: 12px 12px 0 14px;
}
.launcher-catalog-modal .launcher-section-label {
    margin: 0;
    font: 650 0.95rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
    color: var(--text);
}
.launcher-catalog-modal .launcher-catalog-search-wrap,
.launcher-catalog-modal .launcher-catalog-nav,
.launcher-catalog-modal .launcher-catalog-summary {
    padding-inline: 14px;
}
.launcher-catalog-modal .launcher-catalog-search-wrap {
    padding-top: 10px;
}
.launcher-catalog-modal .launcher-catalog-search {
    min-height: 44px;
    border-radius: var(--rb-radius);
    font-family: "Lexend", "Helvetica Neue", sans-serif;
}
.launcher-catalog-modal .launcher-catalog-results {
    padding: 4px 0 10px;
    overflow: auto;
}
.launcher-catalog-modal .launcher-catalog-results .launcher-adapter,
.launcher-catalog-modal .launcher-catalog-results [data-adapter-id] {
    min-height: 44px;
}
.launcher-catalog-modal .launcher-catalog-results .launcher-adapter-icon,
.launcher-catalog-modal .launcher-catalog-results .adapter-logo {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}
@media (max-width: 767px) {
    .launcher-catalog-modal.launcher-preview-modal {
        padding: 0;
        align-items: stretch;
        justify-items: stretch;
    }
    .launcher-catalog-modal .launcher-catalog-dialog {
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: var(--rb-radius);
        border: 0;
        box-shadow: none;
        animation: rb-search-open var(--rb-catalog-open);
    }
}

/* ---------- Notes & Memorize: match Read/Search chrome ---------- */
/* Drop zoom + bordered panel — same outer shell as reader/Overview. */
body.route-view-info.rb-view-notes main,
body.route-view-info.rb-view-profile main,
body.route-view-info.rb-view-memorize main,
body.route-view-search.rb-view-search-page main,
body.route-view-history.rb-view-history main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    zoom: 1;
}
body.route-view-info.rb-view-notes .panel,
body.route-view-info.rb-view-profile .panel,
body.route-view-info.rb-view-memorize .panel,
body.route-view-search.rb-view-search-page .panel,
body.route-view-history.rb-view-history .panel {
    width: var(--rb-page-shell);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding: var(--rb-page-chrome-top) 0 2.5rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    body.route-view-info.rb-view-notes .panel,
    body.route-view-info.rb-view-profile .panel,
    body.route-view-info.rb-view-memorize .panel,
    body.route-view-search.rb-view-search-page .panel,
    body.route-view-history.rb-view-history .panel {
        padding-right: var(--rb-page-shell-gutter);
    }
}
body.route-view-info.rb-view-notes .panel::before,
body.route-view-info.rb-view-profile .panel::before,
body.route-view-info.rb-view-memorize .panel::before,
body.route-view-search.rb-view-search-page .panel::before,
body.route-view-history.rb-view-history .panel::before,
body.route-view-info.rb-view-notes .panel::after,
body.route-view-info.rb-view-profile .panel::after,
body.route-view-info.rb-view-memorize .panel::after,
body.route-view-search.rb-view-search-page .panel::after,
body.route-view-history.rb-view-history .panel::after {
    content: none;
    display: none;
}
body.route-view-info.rb-view-notes .header--sr-title,
body.route-view-info.rb-view-profile .header--sr-title,
body.route-view-info.rb-view-memorize .header--sr-title,
body.route-view-search.rb-view-search-page .header--sr-title,
body.route-view-history.rb-view-history .header--sr-title {
    display: none;
}
@media (max-width: 767px) {
    body.route-view-info.rb-view-notes .panel,
    body.route-view-info.rb-view-profile .panel,
    body.route-view-info.rb-view-memorize .panel,
    body.route-view-search.rb-view-search-page .panel,
    body.route-view-history.rb-view-history .panel {
        width: 100%;
        max-width: 100%;
        padding: calc(env(safe-area-inset-top, 0px) + var(--rb-page-title-top))
            var(--rb-phone-pad)
            calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }
}
/* Page chrome: same title treatment as .reader-chapter-head; rhythm
   title→tabs 8 / tabs→content 16 (or title→content 16 when no tabs). */
.rb-page-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    width: 100%;
    margin: 0 0 var(--rb-page-tabs-to-content);
    min-width: 0;
}
.rb-page-head:has(+ .rb-subbar),
.rb-page-head:has(+ .rb-underline-tabs),
.rb-page-head:has(+ .rb-undo-bar) {
    margin-bottom: var(--rb-page-title-to-tabs);
}
/* Secondary copy under the page h1 (due counts, note counts, search hint). */
.rb-page-lede {
    margin: 0;
    color: var(--text-secondary, var(--muted));
    font: 400 0.88rem/1.35 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0;
}
.rb-subbar {
    margin: 0 0 var(--rb-page-tabs-to-content);
}
.rb-undo-bar {
    margin: 0 0 var(--rb-page-title-to-tabs);
}

/* ---------- Notes & bookmarks (Margin note rows + week buckets) ---------- */
.rb-notes-page,
.rb-profile-page,
.rb-subpage.rb-content-column,
.rb-memorize-wrap.rb-content-column,
.rb-search-page.rb-content-column {
    width: var(--rb-content-column);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}
.rb-notes-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
}
.rb-notes-empty {
    margin: 0;
    padding: 0.85rem 0;
    color: var(--muted);
    font: 400 0.92rem/1.4 "Lexend", "Helvetica Neue", sans-serif;
}
/* Signed-out Notes: one quiet line → Profile (auth form lives there). */
.rb-notes-signin-hint {
    margin: 0 0 1rem;
    color: var(--muted);
    font: 400 0.88rem/1.45 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-notes-signin-link {
    color: var(--text);
    font-weight: 550;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.rb-more-profile-icon {
    flex: 0 0 auto;
}
/* Home “Your Margin” empty uses .dashboard-recents-empty (same pad as Recents). */
.rb-margin-auth {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    background: color-mix(in oklab, var(--bg-strong) 70%, var(--bg) 30%);
}
.rb-margin-auth-lede,
.rb-margin-auth-hint,
.rb-margin-auth-status,
.rb-margin-auth-error {
    margin: 0;
    color: var(--muted);
    font: 400 0.86rem/1.4 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-margin-auth-error {
    color: var(--danger, #b42318);
}
.rb-margin-auth-form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.rb-margin-auth-form .rb-margin-auth-label {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.rb-margin-auth-form input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: var(--bg);
    color: var(--text);
    font: 400 0.9rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
}
.rb-margin-auth-form .rb-margin-auth-btn {
    align-self: flex-start;
}
.rb-margin-import {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
}
.rb-margin-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.rb-margin-auth-btn--quiet {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
}
.rb-margin-auth-btn {
    min-height: 44px;
    padding: 0 0.9rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    font: 650 0.84rem/1 "Lexend", "Helvetica Neue", sans-serif;
    cursor: pointer;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.rb-note-week {
    width: 100%;
    min-width: 0;
    margin: 0 0 0.65rem;
}
/* Shared inverted section bar (Notes week labels, Home section bars). */
.rb-section-bar,
.rb-note-week-label,
.dashboard-section-bar {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-radius: var(--rb-radius);
    background: var(--text);
    color: var(--bg);
    font: 650 0.78rem/1.2 "Lexend", "Helvetica Neue", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-sizing: border-box;
}
.rb-note-week-label {
    margin: 0;
}
.dashboard-section-bar {
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 var(--dashboard-space-sm, 0.75rem);
}
.dashboard-section-bar__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: inherit;
}
.rb-note-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rb-note-bundle {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.55rem 0.7rem;
    box-sizing: border-box;
}
.rb-note-bundle-name {
    flex: 0 0 auto;
    max-width: 42%;
    overflow: hidden;
    color: var(--text);
    font: 650 0.95rem/1.3 "Lexend", "Helvetica Neue", sans-serif;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-note-bundle-body {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
}
.rb-note-verses {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}
.rb-note-verse-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    min-height: 1.55rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--rb-radius);
    background: var(--bg);
    color: var(--text);
    font: 500 0.78rem/1 "Lexend", "Helvetica Neue", sans-serif;
    text-decoration: none;
    box-sizing: border-box;
}
.rb-note-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rb-note-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--rb-radius);
    color: var(--text);
    text-decoration: none;
    transition: background-color var(--rb-motion);
}
.rb-note-row-title {
    flex: none;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-note-row-excerpt {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--rb-ink-faint);
    font-size: 0.78rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-bookmarks-view {
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.35rem 0;
    border-radius: var(--rb-radius);
    background: var(--rb-fill);
    box-sizing: border-box;
}
.rb-bookmarks-view > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.55rem 0.7rem;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.rb-bookmarks-view > summary::-webkit-details-marker {
    display: none;
}
.rb-bookmarks-view > summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    min-height: 1.35rem;
    color: var(--muted);
    font-weight: 500;
}
.rb-bookmarks-view[open] > summary::after {
    content: "−";
}
.rb-bookmarks-summary-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.rb-bookmarks-summary-icon {
    display: inline-flex;
    color: var(--muted);
}
.rb-bookmarks-summary-icon svg {
    width: 14px;
    height: 14px;
}
.rb-bookmarks-empty {
    padding: 0 0.7rem 0.65rem;
}
.rb-bookmarks-view .rb-note-rows {
    padding: 0 0.25rem 0.35rem;
}

@media (hover: hover) and (pointer: fine) {
    .rb-tab:hover {
        color: var(--text);
        background: var(--rb-fill);
    }
    .rb-more-item:hover,
    .rb-tab-more-menu .shell-link:hover,
    .rb-tab-more-menu button:hover,
    .rb-tab-more-menu .rb-more-item:hover,
    .rb-tab-more-menu .shell-theme-toggle:hover,
    .rb-tab-more-menu .selah-badge:hover {
        color: var(--text);
        background: var(--rb-fill);
        border-color: transparent;
    }
    .rb-tab-more-menu .selah-badge:hover {
        color: var(--muted);
        border-top-color: var(--line);
    }
    .rb-home-search:hover {
        border-color: color-mix(in oklab, var(--text) 28%, var(--line));
        background: color-mix(in oklab, var(--bg-strong) 90%, var(--bg) 10%);
        box-shadow: none;
    }
    .search-suggest-chip:hover {
        color: #44403c;
        background: color-mix(in oklab, var(--text) 6%, transparent);
    }
    .search-result:hover {
        background: rgb(28 25 23 / 0.05);
    }
    .rb-icon-action:hover {
        color: var(--reader-text, var(--text));
        background: var(--rb-fill);
    }
    .rb-note-row:hover,
    .rb-note-bundle:hover {
        background: var(--rb-fill);
    }
    .rb-note-verse-chip:hover {
        background: var(--rb-fill-strong);
        border-color: color-mix(in oklab, var(--text) 22%, var(--line));
    }
}
@media (prefers-reduced-motion: reduce) {
    .search-modal,
    .search-modal-panel,
    .rb-margin-tray,
    .launcher-catalog-modal .launcher-catalog-dialog {
        animation: none;
    }
}


/* selah-tools-shell (vendored) */
/**
 * Selah Tools shared chrome — app launcher.
 * Hosts map design tokens via --sts-* (see per-app overrides).
 */
.sts-app-launcher {
  position: relative;
  font-family: var(--sts-font, inherit);
}

.sts-app-launcher__trigger {
  box-sizing: border-box;
  width: var(--sts-trigger-size, 2.25rem);
  height: var(--sts-trigger-size, 2.25rem);
  border: var(
    --sts-trigger-border,
    1px solid var(--sts-border, var(--border, rgba(72, 58, 42, 0.2)))
  );
  border-radius: var(--sts-trigger-radius, 0);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sts-trigger-bg, transparent);
  color: var(--sts-trigger-fg, var(--sts-muted, var(--muted, #625647)));
  cursor: pointer;
  transition: var(
    --sts-trigger-transition,
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease
  );
}

.sts-app-launcher__trigger:hover,
.sts-app-launcher__trigger[aria-expanded="true"] {
  background: var(--sts-trigger-hover-bg, var(--sts-text, var(--text, #201a14)));
  color: var(--sts-trigger-hover-fg, var(--sts-bg, var(--bg, #f3efe5)));
  border-color: var(--sts-trigger-hover-border, var(--sts-text, var(--text, #201a14)));
}

.sts-app-launcher__trigger:focus {
  outline: none;
}

.sts-app-launcher__trigger:focus-visible {
  outline: 2px solid var(--sts-focus-ring, var(--sts-accent, var(--accent, currentColor)));
  outline-offset: 2px;
}

.sts-app-launcher__trigger svg {
  width: var(--sts-trigger-icon-size, 1.05rem);
  height: var(--sts-trigger-icon-size, 1.05rem);
}

.sts-app-launcher__trigger svg rect {
  fill: currentColor;
}

.sts-app-launcher__menu {
  z-index: var(--sts-menu-z, 40);
  min-width: var(--sts-menu-min-width, 15.5rem);
  padding: var(--sts-menu-padding, 0.35rem);
  margin: 0;
  list-style: none;
  border: 1px solid var(--sts-menu-border-color, var(--sts-border, var(--border, rgba(72, 58, 42, 0.2))));
  border-radius: var(--sts-menu-radius, 12px);
  background: var(--sts-menu-bg, var(--panel-strong, rgba(255, 249, 240, 0.92)));
  box-shadow: var(
    --sts-menu-shadow,
    0 24px 64px -28px var(--sts-shadow, var(--shadow, rgba(44, 29, 14, 0.12)))
  );
}

.sts-app-launcher__menu:not(.sts-app-launcher__menu--anchored) {
  position: absolute;
  top: calc(100% + var(--sts-menu-offset, 0.45rem));
  right: 0;
  backdrop-filter: var(--sts-menu-backdrop, blur(20px));
}

/**
 * Viewport-anchored menu (set via JS). Avoids clipping under overflow:hidden shells.
 * top/left set inline per open (see `anchoredMenuPositionMode` in mount.ts).
 */
.sts-app-launcher__menu.sts-app-launcher__menu--anchored {
  position: fixed;
  left: auto;
  bottom: auto;
  right: auto;
  z-index: var(--sts-menu-z, 12050);
  max-height: min(70vh, calc(100dvh - 16px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sts-app-launcher__menu[hidden] {
  display: none;
}

.sts-app-launcher__item {
  display: flex;
  align-items: center;
  gap: var(--sts-item-gap, 0.65rem);
  padding: var(--sts-item-padding-y, 0.55rem) var(--sts-item-padding-x, 0.65rem);
  border-radius: var(--sts-item-radius, 8px);
  text-decoration: none;
  color: var(--sts-item-text, var(--text, #201a14));
  font-size: var(--sts-item-font-size, 0.88rem);
  font-weight: var(--sts-item-font-weight, 500);
  letter-spacing: var(--sts-item-letter-spacing, -0.02em);
  font-family: inherit;
  transition: var(--sts-item-transition, background 160ms ease);
}

.sts-app-launcher__item:focus {
  outline: none;
}

.sts-app-launcher__item:focus-visible {
  outline: 2px solid var(--sts-focus-ring, var(--sts-accent, var(--accent, currentColor)));
  outline-offset: -2px;
}

.sts-app-launcher__item:hover {
  background: var(--sts-item-hover-bg, var(--sts-accent-soft, var(--accent-soft, rgba(157, 79, 29, 0.12))));
}

.sts-app-launcher__item--current {
  background: var(--sts-item-current-bg, var(--sts-accent-soft, var(--accent-soft, rgba(157, 79, 29, 0.12))));
  color: var(--sts-item-current-fg, var(--sts-accent-strong, var(--accent-strong, #7e3912)));
  cursor: default;
  pointer-events: none;
}

.sts-app-launcher__item-icon {
  flex-shrink: 0;
  width: var(--sts-item-icon-box, 1.35rem);
  height: var(--sts-item-icon-box, 1.35rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sts-item-icon-fg, var(--sts-accent, var(--accent, #9d4f1d)));
}

.sts-app-launcher__item-icon svg {
  width: var(--sts-item-icon-inner, 1.2rem);
  height: var(--sts-item-icon-inner, 1.2rem);
  stroke: currentColor;
  fill: none;
  stroke-width: var(--sts-item-icon-stroke-width, 1.75);
  stroke-linecap: var(--sts-item-icon-linecap, round);
  stroke-linejoin: var(--sts-item-icon-linejoin, round);
}

.sts-app-launcher__item--current .sts-app-launcher__item-icon {
  color: var(
    --sts-item-current-icon-fg,
    var(--sts-accent-strong, var(--accent-strong, #7e3912))
  );
}

.sts-app-launcher__item-icon--fill svg {
  fill: currentColor;
  stroke: none;
}

/** Fixed corner mount (route.bible, single control) */
.sts-app-launcher-mount--fixed {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  z-index: 12000;
}

/** Launcher + adjacent controls (e.g. theme toggle on grab.bcv) */
.sts-top-chrome--fixed {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* selah-tools-shell (route.bible) */
/**
 * Selah Tools app launcher — normalized to route.bible chrome.
 * Parity targets: .quick-share-button, .quick-search-input, launcher toolbar toggles.
 * Loaded after vendor/selah-tools-shell/shell.css (see scripts/lib/static-css.mjs).
 */

body.embed-mode #sts-launcher-mount {
    display: none !important;
}

#sts-launcher-mount {
    --sts-menu-z: 80;
    /* Override package defaults (blur + translucent panel) so the menu reads solid on route.bible */
    --sts-menu-bg: var(--bg-strong);
    --sts-menu-backdrop: none;
    font-family: "Lexend", "Helvetica Neue", sans-serif;
}

#sts-launcher-mount .sts-app-launcher {
    font-family: inherit;
}

/* Trigger ≈ .header-copy-button (32px, quiet chrome beside passage title) */
#sts-launcher-mount .sts-app-launcher__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: var(--rb-radius);
    border: 1px solid transparent;
    background: transparent;
    color: color-mix(in oklab, var(--muted) 86%, var(--text) 1%);
    opacity: 0.58;
    cursor: pointer;
    line-height: 0;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        opacity 0.15s ease;
}

#sts-launcher-mount .sts-app-launcher__trigger:focus {
    outline: none;
}

@media (hover: hover) and (pointer: fine) {
    #sts-launcher-mount .sts-app-launcher__trigger:hover {
        border-color: var(--line-subtle);
        background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
        color: var(--text);
        opacity: 1;
    }
}

#sts-launcher-mount .sts-app-launcher__trigger:focus-visible {
    border-color: var(--line-subtle);
    background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
    color: var(--text);
    opacity: 1;
    box-shadow: none;
}

/* Open = same emphasis as hover */
#sts-launcher-mount .sts-app-launcher__trigger[aria-expanded="true"] {
    border-color: var(--line-subtle);
    background: color-mix(in oklab, var(--bg-strong) 90%, transparent);
    color: var(--brand-strong);
    opacity: 1;
}

#sts-launcher-mount .sts-app-launcher__trigger svg {
    width: 15px;
    height: 15px;
}

/* Menu ≈ .quick-search-input floating surface — fully opaque (no glass / bleed-through) */
#sts-launcher-mount .sts-app-launcher__menu {
    min-width: min(280px, calc(100vw - 32px));
    padding: 6px;
    margin: 0;
    border-radius: var(--rb-radius);
    border: 1px solid var(--line);
    background: var(--bg-strong);
    background-color: var(--bg-strong);
    box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: isolate;
}

#sts-launcher-mount .sts-app-launcher__menu.sts-app-launcher__menu--anchored {
    z-index: 80;
}

/* Rows ≈ dense list / toolbar text */
#sts-launcher-mount .sts-app-launcher__item {
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--rb-radius);
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--text);
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

#sts-launcher-mount .sts-app-launcher__item:focus {
    outline: none;
}

#sts-launcher-mount .sts-app-launcher__item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--brand);
    background: color-mix(in oklab, var(--interactive-hover-bg) 70%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    #sts-launcher-mount .sts-app-launcher__item:hover {
        background: var(--interactive-hover-bg);
    }
}

#sts-launcher-mount .sts-app-launcher__item--current {
    background: rgba(var(--brand-rgb), 0.12);
    color: var(--text);
    pointer-events: none;
}

#sts-launcher-mount .sts-app-launcher__item-icon {
    width: 22px;
    height: 22px;
    color: var(--muted);
}

#sts-launcher-mount .sts-app-launcher__item-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.85;
}

@media (hover: hover) and (pointer: fine) {
    #sts-launcher-mount .sts-app-launcher__item:hover .sts-app-launcher__item-icon {
        color: var(--brand-strong);
    }
}

#sts-launcher-mount .sts-app-launcher__item--current .sts-app-launcher__item-icon {
    color: var(--brand-strong);
}

#sts-launcher-mount .sts-app-launcher__item-icon--fill svg {
    fill: currentColor;
    stroke: none;
}