/* ================================================================
   Liturgy of the Hours — Modern Sacred Aesthetic Stylesheet
   Mobile-first, Light & Dark themes, Glassmorphic Cards,
   Liturgical Red Rubrics, Versified Typography, and Audio Controls.
   ================================================================ */

:root {
    /* Dark Theme (Default) - Refined Nocturnal Slate & Royal Liturgical Gold */
    --color-bg: #0c0e15;
    --color-bg-elevated: #151824;
    --color-bg-card: rgba(21, 24, 36, 0.72);
    --color-bg-card-hover: rgba(27, 31, 46, 0.88);
    --color-bg-glass: rgba(16, 18, 28, 0.8);
    
    --color-text: #f5f1e8;
    --color-text-muted: #a69f92;
    --color-text-subtle: #8c8477;
    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-card: rgba(255, 255, 255, 0.08);
    --color-border-active: rgba(212, 175, 55, 0.55);

    --color-accent: #d4af37;
    --color-accent-hover: #e5be79;
    --color-accent-dim: rgba(212, 175, 55, 0.12);
    --color-accent-glow: rgba(212, 175, 55, 0.28);

    /* Liturgical Red Rubric (Cinnabar/Crimson) */
    --color-rubric: #e05345;
    --color-rubric-dim: rgba(224, 83, 69, 0.12);

    /* Compline Amber Warmth */
    --color-amber-bg: rgba(32, 24, 18, 0.85);
    --color-amber-accent: #e5a968;
    --color-amber-border: rgba(229, 169, 104, 0.25);

    --color-header-bg: rgba(12, 14, 21, 0.85);
    --color-footer-bg: #08090f;
    --color-link: #d4af37;
    --color-link-hover: #e5be79;
    --color-disabled: #323544;

    --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-sticky: 0 -6px 30px rgba(0, 0, 0, 0.55);
    --radius-card: 22px;
    --radius-pill: 9999px;
    --radius-btn: 14px;

    --font-stack-display: "Cinzel", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-stack-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-stack-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --prayer-font-size: 1.08rem;
    --transition-speed: 0.22s;
}

[data-theme="light"] {
    --color-bg: #fbf8f2;
    --color-bg-elevated: #ffffff;
    --color-bg-card: rgba(255, 255, 255, 0.85);
    --color-bg-card-hover: #ffffff;
    --color-bg-glass: rgba(251, 248, 242, 0.88);

    --color-text: #28211a;
    --color-text-muted: #6e6456;
    --color-text-subtle: #766d60;
    --color-border: rgba(0, 0, 0, 0.05);
    --color-border-card: rgba(0, 0, 0, 0.07);
    --color-border-active: rgba(155, 114, 55, 0.55);

    --color-accent: #7d5a24;
    --color-accent-hover: #5e4219;
    --color-accent-dim: rgba(155, 114, 55, 0.1);
    --color-accent-glow: rgba(155, 114, 55, 0.22);

    /* Liturgical Red Rubric in Light Mode */
    --color-rubric: #b82e22;
    --color-rubric-dim: rgba(184, 46, 34, 0.08);

    --color-amber-bg: rgba(253, 246, 235, 0.92);
    --color-amber-accent: #9a6628;
    --color-amber-border: rgba(154, 102, 40, 0.25);

    --color-header-bg: rgba(251, 248, 242, 0.9);
    --color-footer-bg: #ece5d8;
    --color-link: #7d5a24;
    --color-link-hover: #5a3f17;
    --color-disabled: #d8d0c2;

    --shadow-card: 0 8px 24px -4px rgba(60, 45, 30, 0.07), 0 1px 3px rgba(60, 45, 30, 0.03), inset 0 1px 1px 0 rgba(255, 255, 255, 0.8);
    --shadow-sticky: 0 -4px 20px rgba(60, 45, 30, 0.1);
}

/* --- Reset & Base ----------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Accessibility & Focus Reset (Eliminates sticky focus highlights on click/tap) */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

body {
    font-family: var(--font-stack-sans);
    background-color: var(--color-bg);
    background-image: radial-gradient(circle at 50% -10%, var(--color-accent-dim) 0%, transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* --- Header ----------------------------------------------------- */
.site-header {
    background: var(--color-header-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: opacity var(--transition-speed);
}

.header-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 0.75rem max(1.25rem, env(safe-area-inset-right)) 0.75rem max(1.25rem, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-text h1 {
    font-family: var(--font-stack-display);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.site-title-link {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.site-title-link:hover {
    color: var(--color-accent);
}

.header-subtitle {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-icon-btn, .theme-toggle {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-btn);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .header-icon-btn:hover, .theme-toggle:hover {
        background: var(--color-accent-dim);
        color: var(--color-accent);
        border-color: var(--color-accent);
        transform: translateY(-1px);
    }
}

.header-icon-btn:active, .theme-toggle:active {
    transform: scale(0.94);
    background: var(--color-accent-dim);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.theme-icon-light { display: none; }
.theme-icon-dark { display: inline-block; }
[data-theme="light"] .theme-icon-light { display: inline-block; }
[data-theme="light"] .theme-icon-dark { display: none; }

/* --- Main Layout ------------------------------------------------ */
.main-content {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 7rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: opacity var(--transition-speed);
}

/* --- Sanctuary / Distraction-Free Reading Mode -------------------- */
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 {
    opacity: 0.1;
    pointer-events: none;
    filter: blur(2px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

body.sanctuary-mode .hour-card.sanctuary-target {
    transform: scale(1.01);
    box-shadow: 0 16px 54px rgba(0, 0, 0, 0.65), 0 0 36px var(--color-accent-glow);
    border-color: var(--color-accent);
    z-index: 50;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exit-sanctuary-btn {
    position: fixed;
    top: max(1.25rem, calc(0.75rem + env(safe-area-inset-top)));
    right: max(1.25rem, calc(0.75rem + env(safe-area-inset-right)));
    background: var(--color-bg-card);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .exit-sanctuary-btn:hover {
        background: var(--color-accent);
        color: #12131f;
    }
}

/* --- Date Navigation & Experience Controls ---------------------- */
.date-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.date-nav-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.date-nav-pills {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.5rem;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.date-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: all var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .date-nav-btn:hover {
        background: var(--color-accent-dim);
        color: var(--color-accent);
    }
}

.date-picker-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.calendar-picker-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.calendar-display-text {
    font-family: var(--font-stack-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Long form on a wide screen, short form on a narrow one — the wrap it
   used to take ("Sunday, August 30, / 2026") pushed Prev and Next out of
   alignment with each other. */
.calendar-display-short {
    display: none;
}

/* Experience Controls Bar (Autoplay & Font Size) */
.experience-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.autoplay-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}

.autoplay-toggle-checkbox {
    display: none;
}

.toggle-slider {
    width: 34px;
    height: 18px;
    background: var(--color-border-card);
    border-radius: var(--radius-pill);
    position: relative;
    transition: background var(--transition-speed);
}

.toggle-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform var(--transition-speed);
}

.autoplay-toggle-checkbox:checked + .toggle-slider {
    background: var(--color-accent);
}

.autoplay-toggle-checkbox:checked + .toggle-slider::after {
    transform: translateX(16px);
}

.font-size-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.font-size-btn {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: 12px;
    min-height: 44px;
    padding: 0.2rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .font-size-btn:hover {
        background: var(--color-accent-dim);
        color: var(--color-accent);
        border-color: var(--color-accent);
    }
}

.font-size-btn:active {
    transform: scale(0.92);
    background: var(--color-accent-dim);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* The chevrons are drawn here, not typed into the link, so the link's text
   is exactly the word on the button. */
.prev-btn::before { content: "\2039"; margin-right: 0.15em; }
.next-btn::after { content: "\203A"; margin-left: 0.15em; }

/* Text size is set in the Aa sheet; the button is a little tighter to the
   title than the other header buttons. */
.header-aa-btn {
    font-family: var(--font-stack-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.header-container {
    position: relative;
}

.header-icon-btn[aria-expanded="true"],
.reading-topbar-btn[aria-expanded="true"],
.np-icon-btn[aria-expanded="true"] {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Dropdown panels hanging from the header: the Aa sheet and the ⋯ menu. */
.header-panel {
    position: absolute;
    top: calc(100% - 0.35rem);
    right: max(1.25rem, env(safe-area-inset-right));
    z-index: 60;
    min-width: 17rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.5rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card), 0 18px 40px -12px rgba(0, 0, 0, 0.35);
}

/* The Aa settings sheet is shared by the site header, the Sanctuary reading
   topbar, and the full-screen Now Playing overlay (z-index 1200). */
#settings-sheet {
    position: fixed;
    top: calc(3.75rem + env(safe-area-inset-top, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    z-index: 1300;
    max-width: min(22rem, calc(100vw - 2.5rem));
    max-height: calc(100dvh - 4.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

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

.panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    padding: 0.25rem 0.75rem;
}

.panel-row + .panel-row,
.translation-about + .panel-row {
    border-top: 1px solid var(--color-border);
}

.panel-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.font-scale-label {
    min-width: 3.2ch;
    text-align: center;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.header-menu {
    padding: 0.35rem;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-item svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
    .menu-item:hover {
        background: var(--color-accent-dim);
    }
}

/* --- Liturgical Banner & Hero Action ---------------------------- */
.liturgical-banner {
    width: 100%;
}

.liturgical-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    padding: 1.4rem 1.6rem;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.liturgical-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.liturgical-color-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}

.color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.color-green .color-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
.color-white .color-dot { background: #f8fafc; box-shadow: 0 0 8px rgba(248, 250, 252, 0.8); }
.color-red .color-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
.color-violet .color-dot, .color-purple .color-dot { background: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.6); }
.color-rose .color-dot { background: #f43f5e; box-shadow: 0 0 8px rgba(244, 63, 94, 0.6); }

.liturgical-season {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.celebration-title {
    font-family: var(--font-stack-display);
    font-size: clamp(1.2rem, 5.4vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    letter-spacing: 0.02em;
    /* Long titles ("Tuesday of the thirty-first week of Ordinary Time")
       wrap into even lines instead of leaving a lone last word. */
    text-wrap: balance;
}

.liturgical-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.meta-divider {
    color: var(--color-text-subtle);
}

/* Quick Action Hero Row */
.hero-action-row {
    margin-top: 0.35rem;
}

.pray-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: linear-gradient(135deg, #e5be79 0%, #ba8d3c 50%, #d4af37 100%);
    color: #10121a;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.7rem 1.4rem;
    font-family: var(--font-stack-sans);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 18px var(--color-accent-glow);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .pray-hero-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px var(--color-accent-glow);
    }
}

.hero-play-icon {
    font-size: 0.85rem;
}

@media (hover: hover) and (pointer: fine) {
    .pray-hero-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px var(--color-accent-glow);
    }
}

.hero-play-icon {
    font-size: 0.85rem;
}

/* Generation Buttons and Status */
.gen-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--color-bg-elevated);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-btn);
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .gen-action-btn:hover {
        background: var(--color-accent);
        color: #12131f;
        box-shadow: 0 4px 12px var(--color-accent-glow);
    }
}

.gen-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading-state-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    padding: 2.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

.gen-inline-status {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}

.gen-spinner-ring {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: gen-spin 0.8s linear infinite;
    margin: 0.3rem auto;
}

@keyframes gen-spin {
    to { transform: rotate(360deg); }
}

.gen-progress {
    font-family: var(--font-stack-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.gen-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
}

.gen-error {
    font-size: 0.85rem;
    color: var(--color-rubric);
    font-weight: 600;
    margin: 0;
}

.gen-empty-notice {
    font-family: var(--font-stack-serif);
    font-size: 1.05rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Devotional Prayers Card (Collapsible) ---------------------- */
.devotional-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    padding: 0.75rem 1.25rem;
    transition: all var(--transition-speed);
}

.devotional-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: 0.15rem 0;
}

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

.devotional-indicator {
    font-size: 0.75rem;
    color: var(--color-accent);
    transition: transform var(--transition-speed);
}

.devotional-card[open] .devotional-indicator {
    transform: rotate(180deg);
}

.devotional-body {
    padding-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.devotional-texts-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.prayer-buttons-group {
    display: flex;
    gap: 0.6rem;
}

.prayer-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-speed);
}

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

.prayer-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-bg-elevated);
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-btn);
}

.prayer-player-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
}

/* --- Hours List & Cards ----------------------------------------- */
.hours-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hour-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    padding: 1.35rem 1.5rem;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .hour-card:hover {
        border-color: var(--color-border-active);
        box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.45);
        transform: translateY(-2px);
    }
}

/* Active Playing Card Glow */
.hour-card.is-playing {
    border-color: var(--color-accent);
    box-shadow: 0 0 32px var(--color-accent-glow), var(--shadow-card);
}

.hour-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}

.hour-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* "Midmorning Prayer (Terce · 9 AM)" is wider than the space left beside
   the buttons, and a flex item will not shrink below its content unless
   told to.  Without this the subtitle pushed into the actions and broke
   the "Prayer Text" pill across two lines. */
.hour-header-actions {
    flex-shrink: 0;
}

.hour-text-btn,
.hour-text-btn-label {
    white-space: nowrap;
}

.btn-label-short {
    display: none;
}

.hour-title-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.hour-title {
    font-family: var(--font-stack-display);
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.02em;
    line-height: 1.25;
}

.hour-subtitle {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-top: 0.2rem;
}

.hour-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hour-text-btn {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.85rem;
    height: 32px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--transition-speed);
}

.hour-text-btn.active {
    background: var(--color-accent);
    color: #10121a;
    border-color: var(--color-accent);
    box-shadow: 0 2px 10px var(--color-accent-glow);
}

@media (hover: hover) and (pointer: fine) {
    .hour-text-btn:hover {
        background: var(--color-accent);
        color: #10121a;
        border-color: var(--color-accent);
    }
}

/* Light theme: the accent is a dark bronze, so near-black text on it measured
   2.99:1 (WCAG AA needs 4.5:1).  White on it is about 6.4:1. */
[data-theme="light"] .hour-text-btn.active {
    color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
    [data-theme="light"] .hour-text-btn:hover {
        color: #ffffff;
    }
}

.hour-book-icon {
    display: inline-block;
    flex-shrink: 0;
}

.share-hour-btn {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .share-hour-btn:hover {
        color: var(--color-accent);
        background: var(--color-accent-dim);
    }
}

.share-hour-btn.copied {
    color: #4ade80;
}

.duration-badge {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.22rem 0.6rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
}

/* Status Icons & Equalizer */
.hour-check-badge {
    background: #22c55e;
    color: #ffffff;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 1px 6px rgba(34, 197, 94, 0.5);
}

.hour-check-badge svg {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
}

.playing-equalizer {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 15px;
}

.playing-equalizer span {
    width: 3px;
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
    animation: equalizerBounce 0.8s infinite ease-in-out alternate;
}

.playing-equalizer span:nth-child(2) {
    animation-delay: 0.2s;
}

.playing-equalizer span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes equalizerBounce {
    0% { height: 3px; }
    100% { height: 15px; }
}

/* --- Custom Card Audio Player ----------------------------------- */
.custom-card-player {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.custom-card-player audio {
    display: none;
}

.card-player-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}

.card-play-btn {
    background: linear-gradient(135deg, #e5be79 0%, #ba8d3c 50%, #d4af37 100%);
    color: #10121a;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card-play-btn svg {
    display: block;
    width: 18px;
    height: 18px;
}

.card-play-btn svg.card-play-icon {
    margin-left: 2px; /* Optical center for triangle */
}

@media (hover: hover) and (pointer: fine) {
    .card-play-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45);
    }
}

.card-play-btn:active {
    transform: scale(0.94);
}

.card-ctrl-btn {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 0;
    flex-shrink: 0;
    transition: all var(--transition-speed);
}

.card-ctrl-btn svg {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
    .card-ctrl-btn:hover {
        background: var(--color-accent-dim);
        color: var(--color-accent);
        border-color: var(--color-accent);
        transform: scale(1.06);
    }
}

.card-ctrl-btn:active {
    transform: scale(0.92);
}

.card-progress-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 80px;
}

.card-scrub-bar {
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 7px 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    /* A sideways drag moves the slider; an up-or-down swipe that starts on
       it still scrolls the page (with "none" the list got stuck under a
       thumb). */
    touch-action: pan-y;
}

.card-scrub-bar::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
}

.card-scrub-bar::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 6px var(--color-accent-glow);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.card-scrub-bar::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
}

.card-scrub-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 6px var(--color-accent-glow);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .card-scrub-bar::-webkit-slider-thumb:hover {
        transform: scale(1.25);
        box-shadow: 0 2px 10px var(--color-accent-glow);
    }
}

.card-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.speed-select {
    box-sizing: border-box;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    line-height: 28px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-align-last: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}

@media (hover: hover) and (pointer: fine) {
    .speed-select:hover {
        background: var(--color-accent-dim);
        color: var(--color-accent);
        border-color: var(--color-accent);
    }
}

.hour-unavailable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.no-audio-note {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* --- Collapsible Read Along Text Drawer ------------------------- */
.read-along-drawer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* The rule separates the player from the text below it, so it belongs to
   the open state.  Closed, it drew a divider under nothing and spent
   about 31px on every card in the list. */
.read-along-drawer[open] {
    border-top: 1px solid var(--color-border);
    padding-top: 0.95rem;
    margin-top: 0.95rem;
}

.read-along-drawer > summary {
    display: none !important;
}

.read-along-drawer > summary::-webkit-details-marker {
    display: none !important;
}

.drawer-header-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.drawer-toolbar-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.drawer-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.drawer-toolbar-actions button {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.28rem 0.7rem;
    height: 30px;
    min-height: 30px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    white-space: nowrap;
    transition: all var(--transition-speed);
    box-sizing: border-box;
}

.drawer-toolbar-actions button:active {
    transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
    .drawer-toolbar-actions button:hover {
        background: var(--color-accent-dim);
        color: var(--color-accent);
        border-color: var(--color-accent);
    }
}

.autoscroll-toggle-btn.active {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.sanctuary-mode-btn.active {
    background: var(--color-accent) !important;
    color: #10121a !important;
    border-color: var(--color-accent) !important;
    font-weight: 700;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(212, 175, 55, 0.4);
}

.read-along-body {
    padding: 0.25rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Sacred Text & Rubric Red Styling ---------------------------- */
.prayer-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}

.prayer-section-heading {
    font-family: var(--font-stack-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-rubric);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

/* --- Office of Readings structure --------------------------------------- */

/* The versicle between the psalmody and the readings is two short lines
   with no antiphon and no citation; without this it reads as a stunted
   fourth psalm. */
.prayer-section.section-type--versicle .verse-line {
    font-style: italic;
    opacity: 0.88;
}

.prayer-section.section-type--versicle {
    margin: 1.1rem 0;
}

/* The Te Deum is a hymn, so it should look like one rather than like the
   reading it used to be buried in. */
.prayer-section.section-type--te_deum .verse-line {
    line-height: 1.5;
}

/* Each reading's responsory, now its own section rather than a run-on of
   the reading above it. */
.prayer-section.section-type--responsory .verse-line {
    line-height: 1.55;
}

/* --- Mass readings ------------------------------------------------------ */

/* The slot ("First Reading") sits above the citation, which is the
   heading proper — the citation is what gets announced in the audio, so
   it keeps the emphasis and the slot label reads as a quiet eyebrow. */
.mass-slot-label {
    font-family: var(--font-stack-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-rubric);
    opacity: 0.62;
    margin-bottom: 0.2rem;
}

.prayer-section.mass-section {
    margin-top: 1.35rem;
}

.prayer-section.section-type--gospel .mass-slot-label {
    opacity: 0.85;
}

.rubric-heading {
    color: var(--color-rubric);
}

.rubric-instruction {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-rubric);
    line-height: 1.45;
}

.rubric-versicle,
.rubric-response {
    font-weight: 700;
    color: var(--color-rubric);
    font-family: var(--font-stack-serif);
    margin-right: 0.25rem;
}

.prayer-antiphon {
    font-family: var(--font-stack-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-accent-dim);
    padding: 0.65rem 1.05rem;
    border-radius: 10px;
    border-left: 3.5px solid var(--color-rubric);
    margin: 0.4rem 0;
    line-height: 1.6;
}

.antiphon-label {
    font-style: normal;
    font-weight: 700;
    color: var(--color-rubric);
    font-family: var(--font-stack-sans);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 0.4rem;
}

.prayer-text-lines {
    font-family: var(--font-stack-serif);
    font-size: var(--prayer-font-size);
    line-height: 1.76;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.verse-line {
    margin: 0;
    transition: color 0.2s ease, background-color 0.2s ease, text-shadow 0.2s ease;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: -6px;
    margin-right: -6px;
    overflow-wrap: break-word;
}

.verse-line,
.prayer-antiphon,
.prayer-section-heading {
    scroll-margin-top: calc(4.8rem + env(safe-area-inset-top, 0px));
}

.verse-line.reading-active-verse {
    color: var(--color-accent);
    background-color: var(--color-accent-dim);
    text-shadow: 0 0 10px var(--color-accent-glow);
}

.prayer-section-heading.reading-active-heading {
    color: var(--color-accent);
    text-shadow: 0 0 12px var(--color-accent-glow);
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.prayer-antiphon.reading-active-antiphon {
    border-left-color: var(--color-accent);
    background: var(--color-accent-dim);
    box-shadow: 0 0 16px var(--color-accent-glow);
    transition: all 0.2s ease;
}

.read-along-body .verse-line,
.read-along-body .prayer-antiphon,
.read-along-body .prayer-section-heading {
    cursor: pointer;
}

.section-type--hymn .verse-line {
    font-style: italic;
}

.section-type--reading .prayer-text-lines {
    font-size: 1.08rem;
    line-height: 1.8;
}

.section-type--lords_prayer,
.section-type--concluding_prayer {
    background: var(--color-accent-dim);
    padding: 0.95rem 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--color-border-card);
}

/* Liturgical Drop Caps */
.verse-line.drop-cap {
    display: flow-root;
    text-indent: 0;
}

.verse-line.drop-cap::first-letter {
    font-size: 2.5em;
    float: left;
    line-height: 0.9;
    margin-right: 0.13em;
    margin-top: 0.04em;
    margin-bottom: 0.08em;
    font-weight: 700;
    color: var(--color-rubric);
    font-family: var(--font-stack-display);
}

.verse-asterisk {
    display: inline-block;
    color: var(--color-rubric);
    font-weight: 700;
    margin: 0 0.35rem;
}

.verse-dagger {
    display: inline-block;
    color: var(--color-rubric);
    font-weight: 700;
    margin: 0 0.35rem;
}

/* Compline Devotion Section */
.devotion-section {
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border-card);
    border-radius: var(--radius-btn);
    padding: 0.85rem 1rem;
}

/* --- Sticky Mini-Player ----------------------------------------- */
.sticky-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-header-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--color-border-card);
    box-shadow: var(--shadow-sticky);
    z-index: 900;
    padding: 0.6rem 1rem 0.8rem;
}

.sticky-player-container {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sticky-player-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.sticky-track-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sticky-track-icon {
    font-size: 1.1rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.sticky-track-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.sticky-track-title {
    font-family: var(--font-stack-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

.sticky-track-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
    .sticky-track-time:hover {
        color: var(--color-accent);
    }
}

.sticky-player-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sticky-ctrl-btn {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 0;
    transition: all var(--transition-speed);
}

.sticky-ctrl-btn svg {
    display: block;
    margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
    .sticky-ctrl-btn:hover {
        color: var(--color-accent);
        background: var(--color-accent-dim);
        border-color: var(--color-accent);
    }
}

.sticky-play-btn {
    background: linear-gradient(135deg, #e5be79 0%, #ba8d3c 50%, #d4af37 100%);
    color: #10121a;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 0;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.sticky-play-btn svg {
    display: block;
}

.sticky-play-btn svg#sticky-play-icon {
    margin-left: 2px; /* Optical center for triangle */
}

@media (hover: hover) and (pointer: fine) {
    .sticky-play-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 18px rgba(212, 175, 55, 0.45);
    }
}



.sticky-progress-container {
    width: 100%;
    padding-top: 0.1rem;
}

.sticky-progress-bar {
    width: 100%;
    height: 16px;
    margin: 0;
    padding: 5px 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    touch-action: pan-y;
}

.sticky-progress-bar::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
}

.sticky-progress-bar::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.sticky-progress-bar::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
}

.sticky-progress-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

/* --- Month Calendar Modal --------------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    width: 100%;
    max-width: 480px;
    padding: 1.25rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-family: var(--font-stack-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
}

.modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 0.4rem;
}

.modal-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-card);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-btn);
}

.month-nav-btn {
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.4rem;
}

.month-label {
    font-family: var(--font-stack-serif);
    font-weight: 600;
    color: var(--color-text);
}

.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.calendar-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
}

.calendar-day-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.2rem;
    cursor: pointer;
    transition: all var(--transition-speed);
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
    .calendar-day-cell:hover {
        background: var(--color-accent-dim);
        border-color: var(--color-accent);
    }
}

.calendar-day-cell.is-today {
    border-color: var(--color-accent);
    background: var(--color-accent-dim);
}

.calendar-day-cell.empty-day {
    background: transparent;
    border: none;
    cursor: default;
}

.day-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.calendar-color-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 2px;
}

.dot--green { background: #22c55e; }
.dot--white { background: #f8fafc; }
.dot--red { background: #ef4444; }
.dot--violet, .dot--purple { background: #a855f7; }
.dot--rose { background: #f43f5e; }

.day-short-name {
    display: none;
}

/* --- Footer ----------------------------------------------------- */
.site-footer {
    background: var(--color-footer-bg);
    border-top: 1px solid var(--color-border);
    padding: 1.5rem 1.25rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* While the bottom bar is showing it would sit on top of the footer. */
body.has-sticky-player .site-footer {
    padding-bottom: calc(7.25rem + env(safe-area-inset-bottom));
}

.latin-cross {
    color: var(--color-accent);
}

.footer-timestamp {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* --- Responsive Breakpoints & Mobile Safe Areas ---------------- */
@media (max-width: 640px) {
    .header-container {
        padding: 0.65rem max(0.9rem, env(safe-area-inset-right)) 0.65rem max(0.9rem, env(safe-area-inset-left));
        padding-top: max(0.65rem, env(safe-area-inset-top));
    }
    /* "Liturgy of the Hours" wrapped to two lines here, and the header is
       sticky, so the wrap cost a permanent 83px band at the top of a
       phone screen.  It is a wordmark, so it scales with the viewport
       rather than wrapping or crowding the four buttons off the edge. */
    .header-text h1 {
        font-size: clamp(0.76rem, 3.4vw, 1.2rem);
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    .header-actions {
        gap: 0.35rem;
        flex-shrink: 0;
    }
    /* The book icon carries the meaning; the long label was costing the
       subtitle beside it the room it needed to stay on one line. */
    .btn-label-long {
        display: none;
    }
    .btn-label-short {
        display: inline;
    }
    /* "Midafternoon Prayer · 3 PM" is the longest of them and was still
       12px over, which cost that card an extra line of height. */
    .hour-subtitle {
        letter-spacing: 0.04em;
    }
    .calendar-display-long {
        display: none;
    }
    .calendar-display-short {
        display: inline;
    }
    .main-content {
        padding: 0.85rem max(0.75rem, env(safe-area-inset-left)) calc(8.5rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-right));
        gap: 1.1rem;
    }
    .hour-card {
        border-radius: 18px;
        padding: 1rem 1.1rem;
    }
    .card-player-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }
    .card-play-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }
    .skip-btn.skip-back,
    .skip-btn.skip-fwd {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
    .card-progress-wrap {
        flex: 1;
        min-width: 65px;
    }
    .card-speed-select {
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        height: 26px;
        min-height: 26px;
        font-size: 0.72rem;
    }
    .hour-text-btn {
        padding: 0.25rem 0.65rem;
        font-size: 0.75rem;
        height: 28px;
    }
    .drawer-header-toolbar {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
    .drawer-toolbar-title {
        font-size: 0.76rem;
    }
    .drawer-toolbar-actions {
        gap: 0.25rem;
    }
    .drawer-toolbar-actions button {
        padding: 0.2rem 0.45rem;
        height: 26px;
        min-height: 26px;
        font-size: 0.7rem;
        gap: 0.2rem;
    }
    .sticky-player {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(0.85rem, calc(0.85rem + env(safe-area-inset-bottom)));
    }
    /* Room for the title: the speed picker lives in the full-screen
       player on a phone, and the controls get proper touch targets. */
    .sticky-speed-select {
        display: none;
    }
    .sticky-player-controls {
        gap: 0.4rem;
    }
    .sticky-ctrl-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    .sticky-play-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
    }
    .prayer-buttons-group {
        flex-direction: column;
    }
    .date-nav-pills {
        padding: 0.35rem 0.5rem;
    }
    .calendar-display-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 400px) {
    .drawer-toolbar-title {
        font-size: 0.72rem;
    }
    .drawer-toolbar-actions {
        gap: 0.2rem;
    }
    .drawer-toolbar-actions button {
        padding: 0.16rem 0.35rem;
        font-size: 0.66rem;
    }
    .drawer-toolbar-actions .copy-label {
        display: none;
    }
}

@media (max-width: 340px) {
    .drawer-toolbar-actions .autoscroll-label {
        display: none;
    }
    /* The wordmark and four buttons were 9px wider than a 320px phone,
       which made the whole page scroll sideways and the browser zoom out. */
    .header-container {
        gap: 0.4rem;
    }
    .header-text {
        min-width: 0;
    }
    .header-actions {
        gap: 0.25rem;
    }
}

/* Standalone iOS PWA Optimization */
@media (display-mode: standalone) {
    body {
        -webkit-user-select: none;
        user-select: none;
    }
    /* The installed app blocks selection on the chrome (buttons, bars) so a
       stray touch does not start a selection, but every word of the prayers
       must stay selectable: that is how a phone is asked to read them aloud. */
    .prayer-text-lines,
    .prayer-section,
    .prayer-section * {
        -webkit-user-select: text;
        user-select: text;
    }
    .site-header {
        padding-top: env(safe-area-inset-top);
    }
}

/* Touch action & tap highlight prevention */
button, a, input, select, summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* --- The hour this is the time for ------------------------------ */

/* The hero button knows which Hour it is time for; the list did not,
   so a reader scrolling past it had nothing to aim at. */
.hour-now-badge {
    display: none;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-stack-sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-dim);
    border: 1px solid var(--color-border-active);
    border-radius: var(--radius-pill);
    padding: 0.12rem 0.5rem;
}

.hour-card.is-now .hour-now-badge {
    display: inline-flex;
}

.hour-card.is-now {
    border-color: var(--color-border-active);
}

/* --- Repeated responses ----------------------------------------- */

/* A responsory and the intercessions are call-and-response: one line
   comes back verbatim between the petitions.  Rendered flat, the
   response was indistinguishable from the verse it answers, which is
   exactly the distinction the reader needs to know when to speak. */
.verse-line.verse-response {
    color: var(--color-rubric);
    font-style: italic;
}

.verse-line.verse-response::before {
    content: "℟.";
    font-style: normal;
    font-weight: 700;
    margin-right: 0.4rem;
    opacity: 0.75;
}

.section-type--responsory .verse-line.verse-response + .verse-line.verse-response:not(.verse-stanza-start)::before {
    content: none;
}

.verse-line.verse-response.reading-active-verse {
    color: var(--color-accent);
}

/* --- Now playing, from anywhere on the page --------------------- */

.sticky-track-info {
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .sticky-track-info:hover .sticky-track-title {
        color: var(--color-accent);
    }
}

/* --- Reduced motion --------------------------------------------- */

/* The read-along scrolls the page on its own for the length of an
   Hour, which is the kind of sustained, unrequested movement this
   setting exists for. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* The bouncing bars are the only sign an Hour is playing, so keep
       them legible rather than frozen mid-bounce. */
    .playing-equalizer span {
        height: 60% !important;
    }
}

/* --- Verse shape ------------------------------------------------- */

/* A psalm verse is one line closing on the mediant and an indented line
   completing it; strophes and hymn stanzas are separated by a blank
   line.  iBreviary marks all three and the parser now keeps them, so the
   text can be set as verse rather than as a column of equal sentences.
   Both are classes on the existing line elements — no new nodes, so the
   read-along still matches its cues one to one. */
.verse-line.verse-continuation {
    padding-left: 1.6rem;
}

.verse-line.verse-stanza-start {
    margin-top: 1.15em;
}

/* A drop-cap opens a section, so it never needs the gap above it. */
.verse-line.drop-cap.verse-stanza-start {
    margin-top: 0;
}

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


/* Temporary notice under the header (set via the SITE_NOTICE variable):
   one slim line the reader can dismiss. */
.site-notice {
    max-width: 920px;
    margin: 0.6rem auto 0;
    padding: 0 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-accent-dim);
    border: 1px solid var(--color-border-active);
    border-radius: 14px;
    color: var(--color-text);
    font-size: 0.85rem;
    line-height: 1.35;
}

.site-notice[hidden] {
    display: none;
}

.site-notice p {
    margin: 0;
    flex: 1;
    padding: 0.55rem 0;
}

.site-notice-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -2px 0;
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 960px) {
    .site-notice {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}


/* "What's new" banner: same slim card as the notice, with the Aa glyph
   drawn as a small button that opens the settings sheet. */
.features-banner[hidden] {
    display: none;
}

.features-banner {
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.features-banner p {
    min-width: 0;
    padding: 0.5rem 0;
}

.features-banner-aa {
    display: inline-block;
    min-width: 1.9em;
    padding: 0.05em 0.45em;
    font: inherit;
    font-weight: 700;
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border-active);
    border-radius: 8px;
    cursor: pointer;
}

/* ================================================================
   Skip buttons: the icon carries the number, so size it to read
   ================================================================ */
.card-ctrl-btn.skip-btn svg {
    width: 20px;
    height: 20px;
}

/* A larger invisible hit area; the visible circle stays small. */
.card-ctrl-btn.skip-btn {
    position: relative;
}

.card-ctrl-btn.skip-btn::after,
.sticky-ctrl-btn::after {
    content: "";
    position: absolute;
    inset: -5px;
}

.sticky-ctrl-btn {
    position: relative;
}

.sticky-ctrl-btn svg {
    width: 22px;
    height: 22px;
}

/* ================================================================
   Opening the full-screen player
   ================================================================ */
.sticky-track-info {
    min-height: 44px;
}

.sticky-track-time {
    cursor: inherit;
}

.sticky-expand {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.25rem;
    color: var(--color-text-muted);
    box-sizing: content-box;
}

@media (hover: hover) and (pointer: fine) {
    .sticky-track-info:hover .sticky-expand {
        color: var(--color-accent);
    }
}

/* An hour with audio opens the player from its title. */
.hour-title-wrap[data-open-player] {
    cursor: pointer;
    border-radius: 10px;
    padding: 0.2rem 0.4rem 0.2rem 0;
    margin: -0.2rem 0;
}

.hour-title-wrap[data-open-player]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .hour-title-wrap[data-open-player]:hover .hour-title {
        color: var(--color-accent);
    }
}

.hour-expand-hint {
    display: none;
    flex-shrink: 0;
    color: var(--color-accent);
    opacity: 0.85;
}

/* Hinted on the hour that is current or playing, and on hover elsewhere. */
.hour-card.is-now .hour-expand-hint,
.hour-card.is-playing .hour-expand-hint {
    display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
    .hour-title-wrap[data-open-player]:hover .hour-expand-hint {
        display: inline-block;
    }
}

/* Jumping to a card (the player's "show prayer text", a #hour link) must
   leave its title below the sticky header, not under it. */
.hour-card,
.custom-card-player,
.devotional-card {
    scroll-margin-top: calc(5rem + env(safe-area-inset-top));
}

/* ================================================================
   Full-screen Now Playing
   ================================================================ */
body.np-open {
    overflow: hidden;
}

.np {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 1200;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse at 50% -8%, var(--color-accent-glow) 0%, transparent 58%),
        radial-gradient(circle at 50% 115%, var(--color-accent-dim) 0%, transparent 55%);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    overscroll-behavior: contain;
    will-change: transform;
}

.np[hidden] {
    display: none;
}

.np.is-open {
    transform: translateY(0);
}

.np.is-dragging {
    transition: none;
}

.np-inner {
    height: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding:
        max(1rem, calc(env(safe-area-inset-top, 0px) + 0.65rem))
        max(1.25rem, env(safe-area-inset-right, 0px))
        max(1rem, env(safe-area-inset-bottom, 0px))
        max(1.25rem, env(safe-area-inset-left, 0px));
}

/* -- Top bar -- */
.np-top {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    align-items: center;
    gap: 0.25rem;
    touch-action: none;
}

.np-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    display: inline-grid;
    place-items: center;
    padding: 0;
    transition: color var(--transition-speed), background var(--transition-speed);
}

.np-aa-btn {
    font-family: var(--font-stack-serif);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

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

@media (hover: hover) and (pointer: fine) {
    .np-icon-btn:hover {
        color: var(--color-accent);
        background: var(--color-accent-dim);
    }
}

.np-top-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
}

.np-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.np-celebration {
    max-width: 100%;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Body: artwork, name, current line -- */
.np-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: clamp(0.7rem, 2.4dvh, 1.5rem);
    text-align: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room above the artwork for its glow: this box scrolls on tiny
       screens, so it clips whatever is painted outside it. */
    padding: 1rem 0.25rem 0.75rem;
}

.np-art {
    flex: 0 1 auto;
    width: clamp(92px, min(68vw, 34dvh), 320px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: linear-gradient(150deg, var(--color-bg-elevated) 0%, var(--color-accent-dim) 100%);
    border: 1px solid var(--color-border-active);
    box-shadow: var(--shadow-card), 0 14px 44px -10px var(--color-accent-glow);
    touch-action: none;
}

.np-cross {
    font-family: var(--font-stack-display);
    font-size: clamp(2.6rem, 17dvh, 7rem);
    line-height: 1;
    color: var(--color-accent);
}

.np.is-playing .np-art {
    animation: npBreathe 4.5s ease-in-out infinite;
}

@keyframes npBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

.np-meta {
    flex-shrink: 0;
    max-width: 100%;
    margin-top: auto;
    touch-action: none;
}

.np-meta:has(+ .np-lines[hidden]) {
    margin-bottom: auto;
}

.np-title {
    font-family: var(--font-stack-display);
    font-size: clamp(1.25rem, 5.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--color-text);
}

.np-subtitle {
    margin-top: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.np-lines {
    flex-shrink: 0;
    width: 100%;
    max-width: 32rem;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

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

.np-line {
    margin: 0;
    font-family: var(--font-stack-serif);
    overflow-wrap: break-word;
}

.np-line-current {
    font-size: clamp(1.05rem, 4.4vw, 1.3rem);
    line-height: 1.45;
    color: var(--color-text);
}

.np-line-next {
    font-size: 0.95rem;
    line-height: 1.38;
    color: var(--color-text-subtle);
}

.np-line:empty {
    display: none;
}

/* -- Controls -- */
.np-controls {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 2dvh, 1.1rem);
}

.np-progress {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.np-scrub {
    --np-pct: 0%;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 10px 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    touch-action: none;
}

.np-scrub::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--color-accent) var(--np-pct), var(--color-disabled) var(--np-pct));
}

.np-scrub::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6.5px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 8px var(--color-accent-glow);
}

.np-scrub::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: var(--color-disabled);
}

.np-scrub::-moz-range-progress {
    height: 5px;
    border-radius: 3px;
    background: var(--color-accent);
}

.np-scrub::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 8px var(--color-accent-glow);
}

.np-scrub:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.np-times {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.np-time {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.np-time-btn {
    background: none;
    border: 0;
    padding: 0.35rem 0 0.35rem 0.75rem;
    min-height: 36px;
    font-family: inherit;
}

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

.np-transport {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.np-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--color-text);
    display: inline-grid;
    place-items: center;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.12s ease, color var(--transition-speed), opacity var(--transition-speed);
}

.np-btn:active:not(:disabled) {
    transform: scale(0.9);
}

.np-btn:disabled {
    opacity: 0.28;
    cursor: default;
}

.np-btn-hour {
    color: var(--color-text-muted);
}

.np-btn-skip {
    width: 64px;
    height: 64px;
}

.np-btn-play {
    width: 78px;
    height: 78px;
    background: linear-gradient(135deg, #e5be79 0%, #ba8d3c 50%, #d4af37 100%);
    color: #10121a;
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4);
}

.np-btn-play svg#np-play-icon {
    margin-left: 3px; /* optical centre for the triangle */
}

@media (hover: hover) and (pointer: fine) {
    .np-btn:hover:not(:disabled) {
        color: var(--color-accent);
    }
    .np-btn-play:hover {
        color: #10121a;
        transform: scale(1.05);
    }
}

.np-extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
}

.np-speed {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
}

.np-continuous {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.np-continuous input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.np-continuous-box {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: var(--color-disabled);
    transition: background var(--transition-speed);
}

.np-continuous-box::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-speed);
}

.np-continuous input:checked + .np-continuous-box {
    background: var(--color-accent);
}

.np-continuous input:checked + .np-continuous-box::after {
    transform: translateX(16px);
}

.np-continuous input:focus-visible + .np-continuous-box {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* -- Short phones: keep the controls on screen -- */
@media (max-height: 680px) {
    .np-line-next {
        display: none;
    }
    .np-btn-play {
        width: 68px;
        height: 68px;
    }
    .np-btn-skip {
        width: 58px;
        height: 58px;
    }
}

/* Short portrait screens (iPhone SE and the like): compact spacing while
   allowing the current spoken line to wrap without clipping. */
@media (max-height: 640px) and (orientation: portrait) {
    .np-body {
        padding-top: 0.65rem;
        gap: 0.5rem;
    }
    .np-art {
        width: clamp(88px, min(60vw, 25dvh), 320px);
        border-radius: 22px;
    }
    .np-line-current {
        font-size: 1.15rem;
    }
}

/* -- Landscape phones: artwork and name beside the controls -- */
@media (max-height: 480px) and (orientation: landscape) {
    .np-inner {
        max-width: 900px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 2rem;
        padding-top: max(0.6rem, calc(env(safe-area-inset-top, 0px) + 0.4rem));
    }
    .np-top {
        grid-column: 1 / -1;
    }
    .np-body {
        grid-column: 1;
        grid-row: 2;
    }
    .np-controls {
        grid-column: 2;
        grid-row: 2;
        justify-content: center;
    }
    .np-art {
        width: clamp(72px, 30dvh, 140px);
    }
    .np-cross {
        font-size: clamp(2rem, 14dvh, 4rem);
    }
    .np-lines {
        display: none;
    }
    .np-eyebrow {
        font-size: 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .np.is-playing .np-art {
        animation: none;
    }
}

[role="button"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}


/* The reader's psalter choice: a one-line note under the day's title, and the
   selected state of the Grail/Abbey switch in the Aa sheet. */
.translation-note {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.translation-control .translation-btn[aria-pressed="true"],
.spacing-control .spacing-btn[aria-pressed="true"] {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.translation-about {
    margin: 0.25rem 0 0.5rem;
    padding: 0 0.75rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.translation-about summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--color-accent);
}
.translation-about p { margin: 0 0 0.6rem; }
.translation-note {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.translation-note[hidden] { display: none; }
.translation-control[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* --- Send feedback ----------------------------------------------- */
.feedback-card { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.feedback-sub { margin: 0; font-size: 0.88rem; color: var(--color-text-muted); }
.feedback-kinds { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.feedback-kind {
    background: transparent;
    border: 1px solid var(--color-border-card);
    border-radius: 999px;
    color: var(--color-text);
    font: inherit;
    font-size: 0.85rem;
    min-height: 40px;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
}
.feedback-kind.is-on {
    border-color: var(--color-border-active);
    background: var(--color-accent-dim);
    color: var(--color-accent);
    font-weight: 600;
}
.feedback-text, .feedback-contact {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-bg);
    border: 1px solid var(--color-border-card);
    border-radius: 10px;
    color: var(--color-text);
    font: inherit;
    font-size: 1rem; /* 16px: no zoom on iOS focus */
    padding: 0.6rem 0.75rem;
}
.feedback-text { resize: vertical; min-height: 110px; }
.feedback-text:focus, .feedback-contact:focus { outline: 2px solid var(--color-accent); outline-offset: 0; }
.feedback-count { margin: 0; min-height: 1em; font-size: 0.78rem; color: var(--color-text-muted); text-align: right; }
.feedback-count.is-over { color: var(--color-rubric); text-align: left; font-weight: 600; }
.feedback-fine { margin: 0; font-size: 0.78rem; color: var(--color-text-subtle); }
.feedback-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.feedback-btn {
    background: transparent;
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-btn);
    color: var(--color-text);
    font: inherit;
    min-height: 44px;
    padding: 0.4rem 1.1rem;
    cursor: pointer;
}
.feedback-btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #1a1405; font-weight: 600; }
.feedback-btn:disabled { opacity: 0.5; cursor: default; }
.feedback-status { margin: 0; min-height: 1em; font-size: 0.85rem; color: var(--color-text-muted); }