/* ================================================================
   Reading Room skin  (loaded after style.css)

   The approved "Direction B": text first, warm paper, a gold rule beside the
   line being spoken, and a reading column that is easy on the eye.  It
   changes colour, type and spacing only - every control, id and behaviour is
   the one style.css and player.js already have.

   To go back to the previous look, remove the <link> to this file in
   base.html (and the font-size multiplier note at the bottom).
   ================================================================ */

/* --- Fonts, served from this site (no outside request, and they work
       offline).  Latin only: that covers every letter the prayers use. ---- */
@font-face { font-family: "Crimson Pro"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("/static/fonts/crimson-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-weight: 400; font-style: italic; font-display: swap;
    src: url("/static/fonts/crimson-pro-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-weight: 500; font-style: normal; font-display: swap;
    src: url("/static/fonts/crimson-pro-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-weight: 500; font-style: italic; font-display: swap;
    src: url("/static/fonts/crimson-pro-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("/static/fonts/crimson-pro-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("/static/fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap;
    src: url("/static/fonts/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap;
    src: url("/static/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap;
    src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
    --font-stack-serif: "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --prayer-font-size: 1.35rem;

    /* Dark: ink-blue night, parchment text, lamp gold. */
    --color-bg: #0b0c12;
    --color-bg-elevated: #151824;
    --color-text: #efe9db;
    --color-text-muted: #b9b09c;
    --color-text-subtle: #a69f92;
    --color-border: #2a2d3d;
    --color-border-card: #2a2d3d;
    --color-accent: #e9c46a;
    --color-accent-hover: #f2d489;
    --color-accent-dim: rgba(233, 196, 106, 0.1);
    --color-accent-glow: rgba(233, 196, 106, 0);
    --color-rubric: #ef8f72;
    --color-link: #e9c46a;
    --color-header-bg: rgba(11, 12, 18, 0.92);
}

[data-theme="light"] {
    /* Light: warm paper, deep ink, the same gold as a rule and a button. */
    --color-bg: #f8f4ea;
    --color-bg-elevated: #ffffff;
    --color-text: #1f1a12;
    --color-text-muted: #5d5442;
    --color-text-subtle: #5d5442;
    --color-border: #e6dcc6;
    --color-border-card: #e6dcc6;
    --color-accent: #7d5a24;
    --color-accent-hover: #5e4219;
    --color-accent-dim: rgba(201, 154, 46, 0.14);
    --color-accent-glow: rgba(201, 154, 46, 0);
    --color-rubric: #9a3a20;
    --color-link: #7d5a24;
    --color-header-bg: rgba(248, 244, 234, 0.92);
}

/* --- The reading column ---------------------------------------------------
   Each .verse-line is a block-level flex item. Vertical padding on the
   line itself is added to line-height, so that padding (not the container
   gap) is what people see between single-line verses. */
.prayer-text-lines {
    line-height: 1.22;
    gap: 0;
}

/* Psalms and canticles: line-height 1.08 with no vertical padding, so the
   measured top-to-top distance is about 1.08 times the font size (~23.3px
   at the 21.6px prayer size). Stanza breaks still use margin-top below. */
.section-type--psalm .prayer-text-lines,
.section-type--canticle .prayer-text-lines,
.section-type--gospel_canticle .prayer-text-lines {
    line-height: 1.08;
    gap: 0;
}

.section-type--psalm .verse-line,
.section-type--canticle .verse-line,
.section-type--gospel_canticle .verse-line {
    line-height: 1.08;
    padding-top: 0;
    padding-bottom: 0;
}

/* Reader's choice (Aa sheet, data-spacing on <html>): room between psalm lines.
   Stanza breaks keep their own larger margin, so they still stand out. */
:root[data-spacing="comfortable"] .section-type--psalm .prayer-text-lines,
:root[data-spacing="comfortable"] .section-type--canticle .prayer-text-lines,
:root[data-spacing="comfortable"] .section-type--gospel_canticle .prayer-text-lines {
    line-height: 1.3;
    gap: 0.2rem;
}

:root[data-spacing="comfortable"] .section-type--psalm .verse-line,
:root[data-spacing="comfortable"] .section-type--canticle .verse-line,
:root[data-spacing="comfortable"] .section-type--gospel_canticle .verse-line {
    line-height: 1.3;
    padding-top: 1px;
    padding-bottom: 1px;
}

:root[data-spacing="comfortable"] .section-type--psalm .verse-line.verse-stanza-start,
:root[data-spacing="comfortable"] .section-type--canticle .verse-line.verse-stanza-start,
:root[data-spacing="comfortable"] .section-type--gospel_canticle .verse-line.verse-stanza-start {
    margin-top: 1.5em;
}

.section-type--reading .prayer-text-lines,
.section-type--first_reading .prayer-text-lines,
.section-type--second_reading .prayer-text-lines,
.section-type--gospel .prayer-text-lines {
    font-size: 1em;
    line-height: 1.55;
    gap: 0.45rem;
}

.prayer-antiphon {
    line-height: 1.45;
    font-size: 1em;
}

.prayer-section.section-type--te_deum .verse-line { line-height: 1.45; }
.prayer-section.section-type--responsory .verse-line { line-height: 1.48; }

/* Long verse lines wrap with a hanging indent, so one verse is still one
   line to the eye. */
.verse-line {
    padding: 1px 6px 1px 20px;
    margin-left: 0;
    margin-right: 0;
    text-indent: -14px;
    border-radius: 0;
    border-left: 3px solid transparent;
}

/* Mediant continuation lines indent past the hanging-indent margin so the
   two halves of a psalm verse are unmistakable on both phone and desktop. */
.verse-line.verse-continuation {
    padding-left: calc(20px + 1.15rem);
}

@media (max-width: 640px) {
    .verse-line.verse-continuation {
        padding-left: calc(20px + 0.85rem);
    }
}

/* Clear blank-line gap between psalm strophes and hymn stanzas. */
.verse-line.verse-stanza-start {
    margin-top: 1.15em;
}

.verse-line.drop-cap.verse-stanza-start {
    margin-top: 0;
}

/* Prose readings and drop-cap openings must not use a negative text-indent,
   which would pull the first line of words into the floated drop cap. */
.verse-line.drop-cap,
.section-type--reading .verse-line,
.section-type--first_reading .verse-line,
.section-type--second_reading .verse-line,
.section-type--gospel .verse-line,
.devotion-section .verse-line {
    padding-left: 8px;
    text-indent: 0;
}

.verse-line.drop-cap {
    display: flow-root;
}

/* Responsory and intercession responses: hang the ℟. mark in the left gutter
   so wrapped lines align under the response text rather than under ℟. */
.verse-line.verse-response {
    padding-left: 1.9rem;
    text-indent: -1.45rem;
}

.section-type--responsory .verse-line.verse-response + .verse-line.verse-response:not(.verse-stanza-start) {
    padding-left: 1.9rem;
    text-indent: 0;
}

/* The line being spoken: a gold rule in the margin and a soft tint -
   no glow, no colour change that could hurt contrast. */
.verse-line.reading-active-verse {
    color: var(--color-text);
    background-color: var(--color-accent-dim);
    border-left-color: #c99a2e;
    text-shadow: none;
}
[data-theme="dark"] .verse-line.reading-active-verse,
:root:not([data-theme="light"]) .verse-line.reading-active-verse {
    border-left-color: #e9c46a;
}

.prayer-section-heading.reading-active-heading {
    color: var(--color-accent);
    text-shadow: none;
}

.prayer-antiphon.reading-active-antiphon {
    border-left-color: #c99a2e;
    box-shadow: none;
}

/* Drop caps stay in the display face but no longer shout, and never collide
   with the words beside or below them. */
.verse-line.drop-cap::first-letter {
    font-weight: 600;
    font-size: 2.5em;
    float: left;
    line-height: 0.9;
    margin-right: 0.13em;
    margin-top: 0.04em;
    margin-bottom: 0.08em;
}

/* --- Section headings: small, letter-spaced, red --------------------------- */
.prayer-section-heading {
    font-family: var(--font-stack-display);
    letter-spacing: 0.14em;
}

/* Reduced motion: nothing here animates, but keep the old transitions off. */
@media (prefers-reduced-motion: reduce) {
    .verse-line, .prayer-section-heading { transition: none; }
}


/* ================================================================
   Direction B, boards B1 to B5

   The pieces of the approved mockup that are layout rather than
   colour: the Hours as rows with Read and Play, the reading room
   (Sanctuary mode made the ordinary way to read), the slim player,
   the Now Playing screen and the desktop column.

   Every control here already existed; this moves and dresses them.
   ================================================================ */

.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;
}

/* --- B1: the Hours as a list of rows -------------------------------------
   A card each was a lot of furniture for one line of text.  Each Hour is
   now a row: what it is, how long it runs, and the two things you do with
   it.  The scrub bar, skips and speed live in the slim player and in Now
   Playing, so they are not repeated here. */
.hours-list {
    gap: 0;
}

.hour-card {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border-card);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hours-list > .hour-card:first-of-type {
    border-top: 0;
}

@media (hover: hover) and (pointer: fine) {
    .hour-card:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--color-border-card);
    }
}

.hour-card.is-playing {
    border-color: var(--color-border-card);
    box-shadow: none;
}

.hour-card-header {
    gap: 0.5rem;
    margin-bottom: 0;
    min-height: 66px;
    padding: 0.3rem 0;
}

.hour-title {
    font-size: 1.1rem;
}

/* The running time rides with the name of the Hour, in the reading face. */
.hour-subtitle {
    font-family: var(--font-stack-serif);
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

.hour-header-actions {
    gap: 0.4rem;
}

/* Read and Play: two round buttons of the size a thumb expects. */
.hour-text-btn,
.hour-play-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--color-border-active);
    background: var(--color-bg-elevated);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}

.hour-play-btn {
    box-shadow: none;
    background-image: none;
}

.hour-play-btn .card-play-icon,
.hour-play-btn .card-pause-icon {
    /* The play triangle looks off-centre in a circle unless nudged. */
    margin-left: 2px;
}

.hour-play-btn .card-pause-icon {
    margin-left: 0;
}

/* "· 10:46" stays in one piece: if the line must break, it breaks before
   the dot rather than leaving the dot behind. */
.hour-duration {
    white-space: nowrap;
}

/* The per-Hour transport row is gone from the list; the slim player and
   Now Playing carry it.  The <audio> itself stays, of course. */
.hour-card .card-player-row {
    display: none;
}

.custom-card-player {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* --- B2 / B3: the reading room -------------------------------------------
   Read opens one Hour on its own: the rest of the page steps out of the
   way and the words get the screen.  This is the Sanctuary mode that was
   already here, made the ordinary way to read rather than a hidden extra. */
body.sanctuary-mode .site-header,
body.sanctuary-mode .date-navigation,
body.sanctuary-mode .liturgical-banner,
body.sanctuary-mode .devotional-card,
body.sanctuary-mode .hour-card:not(.sanctuary-target),
body.sanctuary-mode .site-footer {
    display: none;
}

body.sanctuary-mode .hour-card.sanctuary-target {
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    /* Opening an Hour scrolls it to the top; leave room for the bar that
       is fixed over it, or the first line hides behind it. */
    scroll-margin-top: calc(5rem + env(safe-area-inset-top, 0px));
}

/* The group headings sit outside the cards, so they need saying too; and
   the note telling you to "tap Read" means nothing once you have. */
body.sanctuary-mode .hours-group-heading,
body.sanctuary-mode .hour-card.sanctuary-target .hour-unavailable-row {
    display: none;
}

body.sanctuary-mode .hours-also {
    margin-top: 0;
}

/* The top bar names the Hour, so the row's own header would say it twice. */
body.sanctuary-mode .hour-card.sanctuary-target .hour-card-header {
    display: none;
}

body.sanctuary-mode .main-content {
    padding-top: calc(4.35rem + env(safe-area-inset-top, 0px));
}

.reading-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem;
    padding-top: max(0.65rem, calc(env(safe-area-inset-top, 0px) + 0.45rem));
    background: var(--color-header-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--color-border-card);
}

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

.reading-topbar-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.reading-topbar-btn[aria-pressed="true"] {
    background: var(--color-accent-dim);
}

.reading-topbar-aa {
    font-family: var(--font-stack-serif);
    font-size: 1.3rem;
    font-weight: 600;
}

.reading-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    padding: 0 0.25rem;
}

.reading-topbar-hour {
    display: block;
    font-family: var(--font-stack-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reading-topbar-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The top bar owns follow-the-voice and the way out; the drawer's own
   toolbar is just Share and Copy, at the head of the text. */
body.sanctuary-mode .drawer-header-toolbar {
    border: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
    justify-content: flex-end;
}

/* The drawer's own rule belonged under a card header that is no longer
   drawn here; on its own it read as a stray line under the top bar. */
body.sanctuary-mode .read-along-drawer {
    border-top: 0;
}

body.sanctuary-mode .share-hour-btn,
body.sanctuary-mode .copy-drawer-btn {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    min-height: 44px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
}

/* The base style draws the link button as a 32px circle for the old card
   header; here it carries a word, like Copy beside it. */
body.sanctuary-mode .share-hour-btn {
    width: auto;
    height: auto;
    border-radius: 0;
}

body.sanctuary-mode .copy-drawer-btn .copy-label,
body.sanctuary-mode .share-hour-btn .share-label {
    display: inline;
}

/* The reading column: one measure, centred, with room under the last line
   so the slim player never sits on the words. */
body.sanctuary-mode .read-along-body {
    max-width: 38rem;
    margin: 0 auto;
    padding-bottom: 5rem;
}

body.sanctuary-mode .main-content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* --- The slim player ------------------------------------------------------
   A hairline of progress along the top, then: play, what is playing (which
   opens Now Playing), fifteen seconds either way, and speed. */
.sticky-progress-container {
    order: -1;
    padding: 0;
    margin: 0 0 0.35rem 0;
}

.sticky-player-container {
    display: flex;
    flex-direction: column;
}

.sticky-track-icon {
    display: none;
}

.sticky-progress-bar,
.sticky-progress-bar::-webkit-slider-runnable-track {
    height: 3px;
}

.sticky-progress-bar::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4.5px;
    box-shadow: none;
}

.sticky-progress-bar::-moz-range-track {
    height: 3px;
}

.sticky-progress-bar::-moz-range-thumb {
    width: 12px;
    height: 12px;
    box-shadow: none;
}

/* Now Playing: the name and the line being spoken sit in the middle of the
   space above the controls rather than stranded at the top of it, while still
   allowing long reading paragraphs to scroll from the top. */
.np-body {
    justify-content: safe center;
}

/* --- B4: Now Playing ------------------------------------------------------
   The hour's name large, the line being spoken under it, and every control
   gathered on one panel, the way a lock screen puts them. */
.np-art {
    display: none;
}

.np-title {
    font-size: clamp(2.1rem, 9.5vw, 3.4rem);
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.np-subtitle {
    font-family: var(--font-stack-serif);
    font-size: 1.15rem;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.np-lines {
    margin-top: 1.2rem;
}

.np-line-current {
    font-family: var(--font-stack-serif);
    font-size: calc(var(--prayer-font-size, 1.35rem) * 1.1);
    line-height: 1.42;
    font-weight: 500;
    color: var(--color-text);
}

.np-line-next {
    font-family: var(--font-stack-serif);
    font-size: calc(var(--prayer-font-size, 1.35rem) * 0.82);
    line-height: 1.38;
    color: var(--color-text-muted);
    margin-top: 0.6rem;
}

/* The controls sit together on a raised panel rather than floating loose. */
.np-controls {
    margin: auto 0.75rem max(1rem, env(safe-area-inset-bottom)) 0.75rem;
    padding: 1rem 1rem 0.7rem 1rem;
    border-radius: 28px;
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border-card);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.np-btn-play {
    width: 74px;
    height: 74px;
}

/* --- B5: desktop ----------------------------------------------------------
   The day's particulars go down the left; the Hours, and the words when an
   Hour is open, keep the middle at a comfortable measure. */
@media (min-width: 1080px) {
    /* The wordmark and buttons share the content's width, so the title sits
       over the left column instead of floating in from the page edge. */
    .header-container {
        max-width: 1180px;
    }

    .main-content {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: 2.5rem;
        align-items: start;
        max-width: 1180px;
    }

    /* The left column in the order board B5 has it: the day, then what
       else there is to pray.  Explicit rows, so the column cannot
       reshuffle itself when a day happens to have no extras. */
    .date-navigation  { grid-column: 1; grid-row: 1; }
    .liturgical-banner { grid-column: 1; grid-row: 2; }
    .hours-also       { grid-column: 1; grid-row: 3; margin-top: 0; }
    .devotional-card  { grid-column: 1; grid-row: 4; }

    .hours-list:not(.hours-also) {
        grid-column: 2;
        grid-row: 1 / span 5;
    }

    /* Reading takes the whole width back and centres one column of text. */
    body.sanctuary-mode .main-content {
        display: block;
    }

    body.sanctuary-mode .read-along-body {
        max-width: 41rem;
    }

    body.sanctuary-mode .prayer-text-lines {
        font-size: 1.25em;
    }

    .reading-topbar {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* The date pill was built for the full width of a phone; in a 270px
       column it has to wrap and use the short form of the date. */
    .date-nav-pills {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.4rem 0.6rem;
    }

    .date-picker-wrapper {
        min-width: 0;
    }

    .calendar-display-long {
        display: none;
    }

    .calendar-display-short {
        display: inline;
    }

    /* In a 270px column the full-height scene crowds the card. */
    .sky-scene {
        height: 130px;
    }

    /* The sidebar card is as narrow as a small phone, so the day's
       particulars wrap the same way: whole phrases, no stray dots. */
    .liturgical-meta {
        gap: 0 0.7rem;
    }
    .liturgical-meta .meta-divider {
        display: none;
    }
}

/* The day's particulars read as whole phrases: at 320px "Psalter Week 1"
   was breaking after "Week", leaving a stray "1" and an orphaned dot. */
.liturgical-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 0.45rem;
}

.liturgical-meta .meta-item {
    white-space: nowrap;
}

@media (max-width: 360px) {
    .liturgical-meta {
        gap: 0 0.7rem;
    }
    .liturgical-meta .meta-divider {
        display: none;
    }
}

/* --- The sky over the abbey -----------------------------------------------
   The illustrated header from the mockup: one drawing, two palettes, with
   the sun (or the moon, after dark) standing where it stands in the real
   sky.  Decoration: it carries no information the text does not.  */
/* The card is padded 1.4rem x 1.6rem; the scene cancels that to run edge
   to edge, and the card clips it so the rounded corners survive. */
.liturgical-card {
    overflow: hidden;
}

.sky-scene {
    position: relative;
    height: 186px;
    overflow: hidden;
    margin: -1.4rem -1.6rem 0;
}

.sky-scene svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Light: warm paper daylight, as board B1 draws it. */
.sc-sky-0 { stop-color: #f8f4ea; }
.sc-sky-1 { stop-color: #f7ecd6; }
.sc-sky-2 { stop-color: #f3dcb4; }
.sc-sky-3 { stop-color: #efcf9c; }
.sc-land  { fill: #c8b183; }
.sc-land-st { stroke: #c8b183; }
.sc-ridge { fill: #ad9462; }
.sc-arc   { stroke: rgba(125, 90, 36, 0.35); }
.sc-rib   { stroke: #ffffff; stroke-opacity: 0.11; }

/* Night: the night sky of board B4.  Chosen by the hour of the day (the
   page sets data-sky on <html>), not by the light or dark setting: a phone
   in dark mode at noon still sees the sun. */
[data-sky="night"] .sc-sky-0 { stop-color: #050818; }
[data-sky="night"] .sc-sky-1 { stop-color: #0f1540; }
[data-sky="night"] .sc-sky-2 { stop-color: #232a63; }
[data-sky="night"] .sc-sky-3 { stop-color: #343a7c; }
[data-sky="night"] .sc-land { fill: #1a1a40; }
[data-sky="night"] .sc-land-st { stroke: #1a1a40; }
[data-sky="night"] .sc-ridge { fill: #141433; }
[data-sky="night"] .sc-arc { stroke: rgba(233, 196, 106, 0.22); }

/* The sun by day (6 AM to 6 PM), the moon after dark. */
.sc-moon { display: none; }
[data-sky="night"] .sc-sun { display: none; }
[data-sky="night"] .sc-moon { display: block; }

/* Behind Now Playing the scene is a backdrop, not a header: it sits under
   the whole screen and fades into the panel at the bottom. */
/* Behind Now Playing the scene is a band low on the screen, as board B4
   has it, not a full-bleed backdrop: stretched over the whole panel the
   sun swells across the Hour's name and the words stop being readable. */
.np .sky-scene {
    position: absolute;
    left: 0;
    right: 0;
    top: 42%;
    bottom: 150px;
    height: auto;
    margin: 0;
    z-index: 0;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}

/* Now Playing takes the page's own light or dark panel, so a sky from the
   other palette would put dark text on a dark band (or light on pale).
   Where the hour and the setting disagree, the scene there drops its sky
   band and keeps the sun or moon, the arc and the silhouettes, coloured
   for the panel it sits on. */
[data-theme="dark"][data-sky="day"] .np .sky-scene svg > rect,
[data-theme="light"][data-sky="night"] .np .sky-scene svg > rect { fill: transparent; }

/* Dark panel by day: golden hour. */
[data-theme="dark"][data-sky="day"] .np .sc-land { fill: #2b2620; }
[data-theme="dark"][data-sky="day"] .np .sc-land-st { stroke: #2b2620; }
[data-theme="dark"][data-sky="day"] .np .sc-ridge { fill: #211d19; }
[data-theme="dark"][data-sky="day"] .np .sc-arc { stroke: rgba(233, 196, 106, 0.30); }

/* Pale panel by night: the moon in muted gold over paper-toned hills. */
[data-theme="light"][data-sky="night"] .np .sc-land { fill: #c8b183; }
[data-theme="light"][data-sky="night"] .np .sc-land-st { stroke: #c8b183; }
[data-theme="light"][data-sky="night"] .np .sc-ridge { fill: #ad9462; }
[data-theme="light"][data-sky="night"] .np .sc-arc { stroke: rgba(125, 90, 36, 0.35); }
[data-theme="light"][data-sky="night"] .np .sc-moon circle[mask] { fill: #a8884a; }

.np-inner {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sc-orb { transition: none; }
}

/* The two groups the mockup lists: the day's Hours, then the things that
   are not Hours. */
.hours-group-heading {
    font-family: var(--font-stack-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.1rem;
}

.hours-also {
    margin-top: 1.25rem;
}

/* Prayed today: a plain tick in a gutter of its own, as board B1 draws it,
   rather than a green badge squeezed in beside the name. */
.hour-done-gutter {
    width: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.hour-done-gutter .hour-check-badge {
    background: none;
    box-shadow: none;
    color: var(--color-accent);
    width: 18px;
    height: 18px;
}

.hour-done-gutter .hour-check-badge svg {
    width: 16px;
    height: 16px;
}

.hour-card-header > .hour-title-wrap {
    flex: 1 1 auto;
}

/* --- Devotional prayers, as board B1 has them ----------------------------
   A tinted box with the two prayers ready to play; their words fold away
   beneath for whoever wants to read along. */
.devotional-box {
    background: var(--color-accent-dim);
    border: 0;
    border-radius: 18px;
    padding: 0.9rem 1rem 0.6rem;
}

.devotional-box-label {
    font-family: var(--font-stack-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
}

.devotional-box .prayer-buttons-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-top: 0.35rem;
}

.devotional-box .prayer-btn {
    flex: 1 1 8.5rem;
    justify-content: flex-start;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-stack-serif);
    font-size: 1.06rem;
    font-style: italic;
    gap: 0.45rem;
}

.devotional-box .prayer-btn svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .devotional-box .prayer-btn:hover {
        background: transparent;
        color: var(--color-accent);
    }
}

.devotional-box .prayer-player {
    margin-top: 0.4rem;
}

.devotional-texts-toggle {
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.devotional-texts-toggle::-webkit-details-marker {
    display: none;
}

.devotional-texts-toggle::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-speed);
}

.devotional-texts[open] .devotional-texts-toggle::after {
    transform: rotate(-135deg) translateY(-1px);
}

.devotional-texts .devotional-texts-wrap {
    padding-bottom: 0.6rem;
}

/* The note for an Hour without audio sits under its name, past the gutter. */
.hour-card .hour-unavailable-row {
    padding-left: calc(18px + 0.5rem);
    padding-bottom: 0.6rem;
}


/* "Yesterday Compline" is the longest name in "Also for today"; in the
   desktop column and at 320px it wrapped to two lines.  The extras are
   the quieter group, so a smaller name keeps it on one line next to the
   two buttons. */
.hours-also .hour-title-row {
    gap: 0.2rem;
}

.hours-also .hour-card-header {
    gap: 0.35rem;
}

.hours-also .hour-title {
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}

/* Landscape phones are short: the sky band sat across the Hour's name and
   its subtitle, and the gold arc touched the lettering.  There it drops to
   the foot of the screen, under the words. */
@media (max-height: 500px) and (orientation: landscape) {
    .np .sky-scene {
        top: auto;
        bottom: 0;
        height: 30%;
        opacity: 0.7;
    }
}

/* --- Examination of conscience, under Night Prayer -----------------------
   A short note and two ways to be led through one, by ear.  Quiet, like the
   Devotional Prayers box: the same small capitals for the label and the same
   italic for the names.  Under a button, the words fold open with the
   sentence being spoken lit. */
.examen-block {
    margin: 0.2rem 0 0.35rem;
    padding: 0.7rem 0 0.35rem calc(18px + 0.5rem);
    border-top: 1px solid var(--color-border);
}

.examen-block-heading {
    margin: 0;
    font-family: var(--font-stack-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.examen-note {
    margin: 0.35rem 0 0.2rem;
    font-family: var(--font-stack-serif);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.examen-buttons {
    display: flex;
    flex-direction: column;
}

.examen-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 52px;
    padding: 0.4rem 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.examen-buttons .examen-btn:first-child {
    border-top: 0;
}

.examen-btn-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--color-accent);
    color: var(--color-accent);
    transition: background var(--transition-speed), color var(--transition-speed);
}

.examen-icon-pause,
.examen-btn.is-playing .examen-icon-play {
    display: none;
}

.examen-btn.is-playing .examen-icon-pause {
    display: block;
}

.examen-btn.is-active .examen-btn-icon {
    background: var(--color-accent);
    color: var(--color-bg);
}

.examen-btn-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.examen-btn-label {
    font-family: var(--font-stack-serif);
    font-size: 1.06rem;
    font-style: italic;
    line-height: 1.25;
}

.examen-btn-meta {
    font-family: var(--font-stack-sans);
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.examen-btn-time {
    flex: 0 0 auto;
    font-family: var(--font-stack-sans);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.examen-btn:focus-visible,
.examen-return:focus-visible,
.examen-close:focus-visible,
.np-examen-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .examen-btn:hover .examen-btn-label {
        color: var(--color-accent);
    }
}

.examen-panel {
    margin: 0.3rem 0 0.4rem;
    padding: 0.7rem 0.9rem 0.8rem;
    border-radius: 14px;
    background: var(--color-accent-dim);
}

.examen-panel[hidden] {
    display: none;
}

.examen-panel-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.examen-panel-title {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-stack-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.examen-close {
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 44px;
    margin: -0.45rem -0.55rem -0.2rem 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.examen-return {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-accent);
    font-family: var(--font-stack-sans);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.examen-text {
    font-family: var(--font-stack-serif);
    font-size: 1.04rem;
    line-height: 1.6;
    color: var(--color-text);
}

.examen-para {
    margin: 0 0 0.85rem;
}

.examen-para:last-child {
    margin-bottom: 0;
}

/* The titles of the Hours in the Coptic text, the Glory be, and the answers
   the listener says back. */
.examen-para.examen-heading {
    margin: 1.1rem 0 0.4rem;
    font-family: var(--font-stack-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.examen-para.examen-heading:first-child {
    margin-top: 0;
}

.examen-para.examen-doxology {
    font-style: italic;
}

.examen-para.examen-response {
    margin-bottom: 0.3rem;
    padding-left: 1rem;
    font-style: italic;
}

.examen-cue {
    padding: 0.05em 0.15em;
    margin: 0 -0.15em;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.examen-cue.is-current {
    background-color: rgba(201, 154, 46, 0.26);
}

[data-theme="dark"] .examen-cue.is-current,
:root:not([data-theme="light"]) .examen-cue.is-current {
    background-color: rgba(233, 196, 106, 0.2);
}

.examen-credit {
    margin: 0.9rem 0 0;
    font-family: var(--font-stack-sans);
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.examen-error {
    margin: 0 0 0.5rem;
    font-family: var(--font-stack-sans);
    font-size: 0.82rem;
    color: var(--color-text);
    border-left: 3px solid #c99a2e;
    padding-left: 0.6rem;
}

/* In the full-screen player: the same two recordings, one tap away while a
   Night Prayer (or one of them) is on. */
.np-examen {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.np-examen[hidden] {
    display: none;
}

.np-examen-label {
    font-family: var(--font-stack-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.np-examen-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.np-examen-btn {
    min-height: 44px;
    padding: 0.25rem 0.85rem;
    border-radius: 22px;
    border: 1px solid var(--color-border-card);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-stack-sans);
    font-size: 0.82rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.np-examen-btn[hidden] {
    display: none;
}

.np-examen-time {
    margin-left: 0.2rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.np-examen-btn.is-active {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.np-examen.is-returning {
    padding-top: 0.4rem;
}

.np-examen.is-returning .np-examen-label {
    display: none;
}

.np-examen-btn.np-examen-back {
    border-color: var(--color-accent);
    background: var(--color-accent-dim);
    color: var(--color-accent);
    font-weight: 600;
}

/* A short screen has no room for a second row of buttons under the
   transport: the label goes, and the two recordings share one row, each
   wrapping its name if it must. */
@media (max-height: 640px) {
    .np-examen {
        padding-top: 0.35rem;
    }
    .np-examen-label {
        display: none;
    }
}

@media (max-height: 640px) and (orientation: portrait) {
    .np-examen-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .np-examen-btn {
        padding: 0.25rem 0.5rem;
        border-radius: 18px;
        font-size: 0.76rem;
        line-height: 1.2;
    }
    .np-examen-btn.np-examen-back {
        grid-column: 1 / -1;
    }
}

/* "Coptic act of contrition" is a long name for the display size the Hours
   use, so while one of these plays the title is set smaller, and the line
   under it can wrap rather than be cut off. */
.np.np--examen .np-title {
    font-size: clamp(1.45rem, 7.5vw, 2.4rem);
}

.np.np--examen .np-subtitle {
    font-size: 1rem;
    text-wrap: balance;
}

/* Landscape phones have the least room: the labels go, the buttons stay at a
   touchable size on one line where they fit, and the panel scrolls if the
   screen is shorter still rather than cutting a control off. */
@media (max-height: 480px) and (orientation: landscape) {
    .np-controls {
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        gap: 0.45rem;
    }
    .np-examen {
        padding-top: 0.3rem;
    }
    .np-examen-label {
        display: none;
    }
    .np-examen-btn {
        padding: 0.1rem 0.7rem;
        font-size: 0.78rem;
    }
    .np.np--examen .np-title {
        font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    }
}

/* In the reading room the words come first: the note is left out there, and
   the two recordings stay one tap away above the text. */
body.sanctuary-mode .examen-note {
    display: none;
}

/* The "Yesterday Night Prayer" card sits in the narrow left column on
   desktop; give the text a little less indent there. */
.hours-also .examen-block {
    padding-left: 0;
}

@media (prefers-reduced-motion: reduce) {
    .examen-cue,
    .examen-btn-icon {
        transition: none;
    }
}

/* --- Privacy page and footer link ---------------------------------------- */
.privacy-page { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; line-height: 1.65; }
.privacy-page h2 { font-family: var(--font-stack-display, inherit); margin-bottom: 0.75rem; }
.privacy-page h3 { margin: 1.5rem 0 0.35rem; font-size: 1.05rem; color: var(--color-accent); }
.privacy-page p { margin: 0 0 0.75rem; color: var(--color-text); }
.footer-privacy { margin: 0.35rem 0 0; font-size: 0.85rem; }
.footer-privacy a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }