/* ==========================================================================
   Reader (§15, §43)

   Each block type gets a card treatment that tells the reader what *kind* of
   knowing they are looking at before they read a word: sacred cards are warm
   and quiet, empirical cards are cool and edged, the journal card invites a
   reply. The accent is carried on a single left rule plus a wash, never a
   heavy border — §4 asks for restraint and clutter is the failure mode.
   ========================================================================== */

.reader {
    padding-block: var(--s-5) calc(var(--bottom-nav-h) + var(--s-8));
}

@media (min-width: 1100px) {
    /* §35 — three columns on desktop, with the reading column kept narrow. */
    .reader-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr) 260px;
        gap: var(--s-6);
        align-items: start;
    }

    /*
     * A sticky rail taller than the window is a rail whose bottom half cannot
     * be reached: the page scrolls, the rail does not, and the last third of a
     * 27-section outline is simply unreachable. Capping it at the window and
     * letting it scroll on its own is what makes the whole list usable.
     *
     * Scroll chaining is deliberately left ON. `overscroll-behavior: contain`
     * would be right for a modal, but here it means a reader whose pointer
     * happens to sit over the rail finds the PAGE stops moving once the rail
     * runs out — which is the same complaint in a new place.
     */
    .reader-aside {
        position: sticky;
        top: calc(var(--nav-h) + var(--s-4));
        max-height: calc(100vh - var(--nav-h) - var(--s-7));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--hairline-strong) transparent;
        /* Room for the scrollbar so it never sits on top of the text. */
        padding-inline-end: var(--s-2);
    }

    .reader-aside::-webkit-scrollbar { width: 6px; }
    .reader-aside::-webkit-scrollbar-track { background: transparent; }

    .reader-aside::-webkit-scrollbar-thumb {
        background: var(--hairline-strong);
        border-radius: 3px;
    }

    .reader-aside:hover::-webkit-scrollbar-thumb { background: var(--copper-edge); }
}

@media (max-width: 1099px) {
    .reader-aside { display: none; }
}

/* ---- Verse hero ------------------------------------------------------- */

.verse-hero {
    position: relative;
    overflow: hidden;
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-xl);
    background:
        linear-gradient(165deg, rgba(192, 138, 78, 0.14), transparent 55%),
        var(--bg-card);
    border: 1px solid var(--copper-edge);
    box-shadow: var(--glow-copper);
}

/* §4 — "very subtle sacred geometry": one concentric ring set, barely
   visible, anchored off the corner so it never competes with the verse. */
.verse-hero::after {
    content: '';
    position: absolute;
    top: -140px;
    right: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 1px solid var(--copper);
    opacity: 0.10;
    box-shadow:
        inset 0 0 0 1px var(--copper),
        inset 0 0 0 40px transparent,
        inset 0 0 0 41px var(--copper),
        inset 0 0 0 80px transparent,
        inset 0 0 0 81px var(--copper);
    pointer-events: none;
}

.verse-hero > * { position: relative; z-index: 1; }

.verse-hero .verse { color: var(--ink); }

/* ---- Block cards ------------------------------------------------------ */

.block-card {
    position: relative;
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    transition: border-color var(--base) var(--ease);
}

.block-card:hover { border-color: var(--hairline-strong); }

.block-card__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}

.block-card__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--r-sm);
    background: var(--glass);
    border: 1px solid var(--hairline);
    color: var(--ink-muted);
}

.block-card__title {
    font-family: var(--font-tamil);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.002em;
}

.block-card__toggle {
    margin-left: auto;
    color: var(--ink-muted);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    transition: background var(--fast) var(--ease), transform var(--base) var(--ease);
}

.block-card__toggle:hover { background: var(--glass); color: var(--ink); }
.block-card__toggle[aria-expanded='false'] { transform: rotate(-90deg); }

/* ---- Variants --------------------------------------------------------- */

.block-card--sacred {
    background: linear-gradient(165deg, var(--copper-wash), transparent 60%), var(--bg-card);
    border-color: var(--copper-edge);
}
.block-card--sacred .block-card__icon { color: var(--copper-bright); border-color: var(--copper-edge); background: var(--copper-wash); }

.block-card--reading { background: var(--bg-raised); }

.block-card--copper { border-left: 2px solid var(--copper); background: linear-gradient(100deg, var(--copper-wash), transparent 40%), var(--bg-card); }
.block-card--copper .block-card__icon { color: var(--copper-bright); }

.block-card--mind { border-left: 2px solid var(--violet); background: linear-gradient(100deg, var(--violet-wash), transparent 40%), var(--bg-card); }
.block-card--mind .block-card__icon { color: var(--violet-bright); border-color: var(--violet-edge); }

.block-card--science { border-left: 2px solid var(--cyan); background: linear-gradient(100deg, var(--cyan-wash), transparent 40%), var(--bg-card); }
.block-card--science .block-card__icon { color: var(--cyan-bright); border-color: var(--cyan-edge); }

/* Science boundary is an informational notice, not a claim card: it is the
   flattest surface in the reader on purpose. */
.block-card--notice {
    background: var(--bg-inset);
    border: 1px dashed var(--cyan-edge);
}
.block-card--notice .block-card__icon { color: var(--cyan); background: transparent; }

.block-card--life { border-left: 2px solid var(--sand); background: linear-gradient(100deg, var(--sand-wash), transparent 40%), var(--bg-card); }
.block-card--life .block-card__icon { color: var(--sand); border-color: var(--sand-edge); }

/* The takeaway is the one card allowed to feel like a destination. */
.block-card--emphasis {
    padding: var(--s-6) var(--s-5);
    text-align: center;
    background:
        linear-gradient(160deg, rgba(232, 154, 76, 0.16), transparent 60%),
        var(--bg-card);
    border: 1px solid rgba(232, 154, 76, 0.34);
    box-shadow: 0 0 50px -18px rgba(232, 154, 76, 0.5);
}
.block-card--emphasis .block-card__head { justify-content: center; }
.block-card--emphasis .prose {
    font-family: var(--font-verse);
    font-size: calc(var(--text-xl) * var(--reader-font-scale));
    color: var(--ink);
    line-height: 1.6;
}

.block-card--memory {
    background: var(--bg-inset);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
}
.block-card--memory .prose { font-weight: 500; color: var(--ink); }

.block-card--quote {
    border: 0;
    border-left: 3px solid var(--copper);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--glass);
    font-style: italic;
}

.block-card--sources { background: transparent; border-style: dashed; }

.block-card--audio { background: var(--bg-inset); }

.block-card--next {
    background: transparent;
    border: 1px dashed var(--hairline-strong);
    text-align: center;
}

/* ---- Journal card (§24) ------------------------------------------------ */

.block-card--journal {
    background: linear-gradient(160deg, var(--glass), transparent 60%), var(--bg-raised);
    border: 1px solid var(--hairline-strong);
}

.reflection-question {
    font-family: var(--font-tamil);
    font-size: calc(var(--text-md) * var(--reader-font-scale));
    line-height: var(--reader-line-height);
    color: var(--ink);
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-inset);
    border: 1px solid var(--hairline);
}

.reflection-question + .reflection-question { margin-top: var(--s-3); }

/* ---- Structured children ---------------------------------------------- */

/* Word meanings: a definition list that stays readable on a phone. */
.word-grid {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: var(--s-2) var(--s-4);
    font-family: var(--font-tamil);
    font-size: calc(var(--text-base) * var(--reader-font-scale));
    line-height: 1.7;
}

.word-grid dt { color: var(--copper-bright); font-weight: 600; }
.word-grid dd { color: var(--ink-soft); margin: 0; }

@media (max-width: 480px) {
    .word-grid { grid-template-columns: 1fr; gap: 0; }
    .word-grid dt { margin-top: var(--s-3); }
}

/* Three-level meaning: science / mind / spiritual, side by side. */
.triad {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.triad__cell {
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-inset);
    border-top: 2px solid var(--hairline-strong);
}

.triad__cell[data-level='science'] { border-top-color: var(--cyan); }
.triad__cell[data-level='mind'] { border-top-color: var(--violet); }
.triad__cell[data-level='spiritual'] { border-top-color: var(--copper); }

.triad__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-2);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.triad__cell[data-level='science'] .triad__label { color: var(--cyan); }
.triad__cell[data-level='mind'] .triad__label { color: var(--violet-bright); }
.triad__cell[data-level='spiritual'] .triad__label { color: var(--copper-bright); }

/* Concept flow (§8 `flow`) — a horizontal chain that wraps on small screens. */
.flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

.flow__node {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--bg-inset);
    border: 1px solid var(--hairline-strong);
    font-family: var(--font-tamil);
    font-size: calc(var(--text-base) * var(--reader-font-scale));
    color: var(--ink);
}

.flow__arrow { color: var(--copper); flex: 0 0 auto; }

/* Line-by-line explanation. */
.lines { display: flex; flex-direction: column; gap: var(--s-4); }

.lines__row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: baseline; }

.lines__ref {
    font-family: var(--font-tamil);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--copper-bright);
    white-space: nowrap;
}

/* Steps (modern life application). */
.steps { display: flex; flex-direction: column; gap: var(--s-3); counter-reset: step; }

.steps__item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--s-3);
    align-items: start;
    font-family: var(--font-tamil);
    font-size: calc(var(--text-base) * var(--reader-font-scale));
    line-height: var(--reader-line-height);
    color: var(--ink-soft);
}

.steps__item::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--sand-wash);
    border: 1px solid var(--sand-edge);
    color: var(--sand);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* Sources list (§13). */
.sources-list { display: flex; flex-direction: column; gap: var(--s-3); }

.source-item {
    padding: var(--s-3);
    border-radius: var(--r-sm);
    background: var(--bg-inset);
    border: 1px solid var(--hairline);
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.source-item__type {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 700;
}

/* ---- Rail navigation (§15) -------------------------------------------- */

.rails {
    position: sticky;
    top: var(--nav-h);
    z-index: 20;
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    padding: var(--s-3) 0;
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border-bottom: 1px solid var(--hairline);
    scrollbar-width: none;
}

.rails::-webkit-scrollbar { display: none; }

.rail {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-pill);
    font-family: var(--font-tamil);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-muted);
    border: 1px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: all var(--fast) var(--ease);
}

.rail:hover { color: var(--ink); background: var(--glass); }

.rail.is-active {
    color: var(--saffron-bright);
    background: var(--saffron-wash);
    border-color: rgba(232, 154, 76, 0.28);
}

.rail[disabled] { opacity: 0.35; pointer-events: none; }

/* ---- Progress --------------------------------------------------------- */

.progress-rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 60;
    background: transparent;
}

.progress-rail__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--copper), var(--saffron));
    transition: width var(--base) var(--ease);
}

/* ---- Table of contents (desktop right rail) --------------------------- */

.toc { display: flex; flex-direction: column; gap: 2px; }

.toc__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-family: var(--font-tamil);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    text-align: left;
    border-left: 2px solid transparent;
    transition: all var(--fast) var(--ease);
}

.toc__item:hover { color: var(--ink); background: var(--glass); }
.toc__item.is-active { color: var(--copper-bright); border-left-color: var(--copper); background: var(--copper-wash); }

/* ---- Audio (§19) ------------------------------------------------------- */

.audio-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--bg-inset);
    border: 1px solid var(--hairline);
}

.audio-scrub {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--hairline-strong);
    cursor: pointer;
}

.audio-scrub::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--copper-bright);
    border: 2px solid var(--bg);
}

.audio-scrub::-moz-range-thumb {
    width: 14px; height: 14px;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: var(--copper-bright);
}

/* Mini player docks above the bottom nav on mobile (§34). */
.mini-player {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--bottom-nav-h);
    z-index: 45;
    padding: var(--s-2) var(--s-4);
    background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border-top: 1px solid var(--hairline);
}

@media (min-width: 900px) {
    .mini-player { bottom: 0; }
}