/* ============================================
   THE UNIVERSAL OFFICE — office.css
   Extracted from index.html for modular architecture
   ============================================ */

/* ── BCP-Only section visibility ── */
#ecumenical-devotions-section,
#during-office-section,
#closing-devotions-section {
    transition: opacity 0.3s, max-height 0.3s;
    overflow: hidden;
    max-height: 3000px;
    opacity: 1;
}
#ecumenical-devotions-section.bcp-only-hidden,
#during-office-section.bcp-only-hidden,
#closing-devotions-section.bcp-only-hidden {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* FIXED 2026-09-03: generic rule so individual ecumenical <label> rows inside
   #during-office-section / #closing-devotions-section can be hidden by BCP Only Mode
   without hiding the whole section -- those sections also contain genuine BCP-authorized
   settings that must stay visible and adjustable. See toggleBcpOnly() in js/office-ui.js. */
label.bcp-only-hidden {
    display: none;
}

/* ── CSS Custom Properties ── */
:root {
    /* Default: Vespers/Gothic dark mode */
    --bg-color: #0d0b14;
    --text-color: #e8d9b0;
    --container-bg: #1e1608;
    --parchment: #1e1608;
    --ink: #e8d9b0;
    --rubric: #c0392b;
    --accent: #c0392b;
    --gold: #c9a84c;
    --sidebar-bg: #080610;
    --sidebar-text: #c8bfa8;
    --main-bg: radial-gradient(ellipse at 50% 40%, #1a1228 0%, #0d0b14 50%, #060410 100%);
    --sidebar-bg-bottom: #030208;
    --sidebar-label: #a89878;
}
body.light-mode {
    /* Manuscript mode — warm parchment */
    color-scheme: light;
    --bg-color: #3d2b1a;
    --text-color: #2a1f14;
    --container-bg: #f5eedc;
    --parchment: #f5eedc;
    --ink: #2a1f14;
    --rubric: #8b1a10;
    --accent: #8b1a10;
    --gold: #8a5d1a;
    --sidebar-bg: #1c1208;
    --sidebar-bg-bottom: #110d05;
    --sidebar-text: #d4c9a8;
    --sidebar-label: #b8956a;
    --main-bg: radial-gradient(ellipse at 50% 30%, #5c3d20 0%, #3d2b1a 45%, #1e1208 100%);
}
body.dark-mode {
    /* Vespers/Gothic dark mode */
    color-scheme: dark;
    --bg-color: #0d0b14;
    --text-color: #e8d9b0;
    --container-bg: #1e1608;
    --parchment: #1e1608;
    --ink: #e8d9b0;
    --rubric: #c0392b;
    --accent: #c0392b;
    --gold: #c9a84c;
    --sidebar-bg: #080610;
    --sidebar-text: #c8bfa8;
    --sidebar-bg-bottom: #030208;
    --sidebar-label: #a89878;
    --main-bg: radial-gradient(ellipse at 50% 40%, #1a1228 0%, #0d0b14 50%, #060410 100%);
}

/* ── Base / Body ── */
body {
    font-family: "IM Fell English", Georgia, serif;
    font-size: 22px;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow-y: hidden;
    transition: background-color 0.3s, color 0.3s;
}
body:not(.office-active) {
    background-color: #000 !important;
}


/* ── Splash / Mode Selection ── */
#mode-selection {
    text-align: center;
    max-width: 600px;
    padding: 50px 40px;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    border: 1px solid rgba(201, 168, 76, 0.3);
    position: relative;
    z-index: 2;
}
#mode-selection h1 {
    font-family: "Cinzel Decorative", "Cinzel", serif;
    font-size: 2.2em;
    margin-bottom: 12px;
    color: var(--gold);
    letter-spacing: 0.06em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
#mode-selection p {
    font-family: "Cinzel", serif;
    font-size: 0.92em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #a89878;
    margin-bottom: 28px;
}
#splash-bg {
    position: fixed;
    inset: 0;
    background-color: var(--sidebar-bg);
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("/images/canterbury.png");
    background-size: 90%;
    background-position: center 5%;
    background-repeat: no-repeat;
    filter: blur(8px);
    z-index: 1;
}

/* ── Mode Buttons ── */
.mode-btn {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 12px 30px;
    margin: 8px;
    cursor: pointer;
    font-family: "Cinzel", serif;
    font-size: 0.95em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.mode-btn:hover {
    background: rgba(201, 168, 76, 0.15);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.2);
    color: #e8d090;
}
body.light-mode .mode-btn {
    background: rgba(30, 18, 8, 0.85);
    color: var(--gold);
    border-color: var(--gold);
}
body.light-mode .mode-btn:hover {
    background: rgba(30, 18, 8, 1);
    box-shadow: 0 0 12px rgba(160, 114, 42, 0.4);
}

/* ── Daily Office Section ── */
#daily-office-section {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: row;
    /* overflow:hidden clips the sidebar as it slides out via negative margin,
       so #main-content width never changes and the inner container never reflows */
    overflow: hidden;
    width: 100%;
}
#daily-office-section[style*="flex"] {
    display: flex !important;
}

/* Book of Needs' own #individual-prayers-section rule now lives in its
   consolidated design-pass block, further down this file (search "BOOK OF
   NEEDS -- its own design pass"). */

/* ── Horologion office selector radio list ──────────────────────────────── */
.hor-office-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

.hor-office-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c8bfa8;
    font-family: "IM Fell English", serif;
    font-size: 1.02em;
    line-height: 1.25;
    cursor: pointer;
    padding: 2px 0;
}

.hor-office-option input[type="radio"] {
    flex: 0 0 auto;
}

.hor-office-option span {
    display: inline-block;
}

.hor-office-option.is-active {
    color: var(--gold);
    font-weight: 700;
}

/* v8.0: Horologion display-depth disclosure controls */
.hor-depth-disclosure {
    margin: 4px 0;
}
.hor-depth-disclosure > summary {
    list-style: none;
    outline: none;
    padding: 2px 0;
}
.hor-depth-disclosure > summary::-webkit-details-marker {
    display: none;
}
.hor-depth-disclosure > summary::before {
    content: "▸";
    opacity: 0.55;
    font-size: 0.82em;
}
.hor-depth-disclosure[open] > summary::before {
    content: "▾";
}

.setting-group {
    margin-bottom: 25px;
    text-align: left;
}
.setting-group strong {
    display: block;
    margin-bottom: 10px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: "Cinzel", serif;
    font-size: 0.95em;
}
.setting-group label {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1.42;
    font-family: "IM Fell English", serif;
    color: var(--sidebar-label, #b8af98);
    white-space: normal;
}
.setting-group label input[type="checkbox"],
.setting-group label input[type="radio"] {
    margin-right: 6px;
    vertical-align: -0.15em;
}
.nested-group {
    margin-left: 12px;
    margin-top: 8px;
    font-size: 1em;
}

/* ── Main Content Area ── */
#main-content {
    flex: 1;
    min-width: 0;
    padding: 40px 40px 40px 340px;
    height: 100vh;
    overflow-y: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background: var(--main-bg);
    /* Prevent inherited transition:all from body animating flex-basis changes */
    transition: none;
}
#main-content.sidebar-hidden {
    padding-left: 80px;
}
/* sidebar-hidden kept for JS compatibility only — no styles needed */
#main-content::-webkit-scrollbar {
    width: 5px;
}
#main-content::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, 0.4);
    border-radius: 2px;
}
#main-content::-webkit-scrollbar-track {
    background: #0e0a05;
}
#main-content h1 {
    font-family: "Cinzel", serif;
    font-size: 1.8em;
    color: var(--gold);
    letter-spacing: 0.08em;
    margin-bottom: 0.4em;
    text-align: center;
}

/* ── Ornamental Divider ── */
.ornamental-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    width: 100%;
}
.ornamental-divider .div-line-left {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(139,90,30,0.6));
}
.ornamental-divider .div-line-right {
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, rgba(139,90,30,0.6));
}
.ornamental-divider-glyph {
    color: var(--gold);
    opacity: 0.7;
    font-size: 1em;
    padding: 0 16px;
    line-height: 1;
    font-family: Georgia, serif;
    letter-spacing: 8px;
}

/* ── Office Container (manuscript frame) ── */
.office-container {
    background: var(--container-bg);
    max-width: 820px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 72px 80px 80px;
    border-radius: 1px;
    position: relative;
    text-align: left;
    color: var(--ink);
    /* Prevent the container from visually jumping during sidebar transitions */
    will-change: auto;
    transition: none;
    box-shadow:
        0 0 0 1px rgba(201,168,76,0.55),
        0 0 0 5px rgba(100,60,10,0.3),
        0 0 0 6px rgba(201,168,76,0.18),
        0 0 0 10px rgba(0,0,0,0.25),
        0 20px 80px rgba(0,0,0,0.8),
        0 4px 20px rgba(0,0,0,0.5),
        inset 0 0 60px rgba(180,120,20,0.07);
}
/* Inner ruled border — double line like a Book of Hours */
.office-container::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(139,90,30,0.4);
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 0 3px rgba(139,90,30,0.15);
}
/* Corner knotwork ornaments (.office-container::after) removed 2026-09-24, Phase 6:
   already unconditionally neutralized both here in the new shell
   (body.shell-v2.office-active .office-container::after { display:none } in
   css/office-shell.css) and in Book of Needs' own override
   (#prayer-display.app-book-needs-display .office-container::after { display:none }
   below) -- dead weight nothing still shows. .office-container's base rule and
   ::before are kept: Book of Needs relies on both by omission (padding, margin,
   box-sizing, position, the inset ruled border), confirmed by reading its own
   override block before touching anything here. */

/* ── Typography ── */
h1 { font-family: "Cinzel", serif; font-size: 2.4em; letter-spacing: 0.06em; margin-bottom: 0.5em; color: var(--gold); }
h2 { font-family: "Cinzel", serif; font-size: 2.1em; color: var(--gold); border-bottom: 1px solid rgba(139,90,30,0.5); padding-bottom: 12px; margin-top: 0; letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }

.liturgical-title {
    color: var(--gold);
    font-family: "Cinzel", serif;
    font-variant: small-caps;
    font-weight: 600;
    font-size: 1.3em;
    letter-spacing: 0.05em;
    margin: 0 0 30px 0;
    opacity: 0.85;
}
/* Ornamental vine rule above the office title */
.liturgical-title::before {
    content: "— ✦ ✝ ✦ —";
    display: block;
    font-family: Georgia, serif;
    font-size: 0.7em;
    letter-spacing: 0.35em;
    color: var(--gold);
    opacity: 0.6;
    margin-bottom: 12px;
    text-align: center;
}

.rubric-text {
    color: var(--rubric);
    text-shadow: 0 0 8px rgba(0,0,0,0.2);
    font-family: "Cinzel", serif;
    font-variant: small-caps;
    font-style: italic;
    font-weight: 600;
    font-size: 0.88em;
    letter-spacing: 0.06em;
    display: block;
    margin-top: 32px;
    margin-bottom: 4px;
    border-bottom: 0.5px dotted rgba(201,168,76,0.35);
    padding-bottom: 4px;
    width: 100%;
    opacity: 0.9;
    line-height: 1.2;
}

.passage-reference {
    font-size: 1.25em;
    font-style: italic;
    color: var(--gold);
    margin: 8px 0 16px 0;
    font-weight: normal;
    opacity: 0.9;
    font-family: "IM Fell English", serif;
}

.component-text {
    font-family: "IM Fell English", Georgia, serif;
    font-size: 1em;
    line-height: 1.95;
    margin-bottom: 30px;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: visible;
    color: var(--ink);
}
/* Drop cap on first letter of prayer/reading text.
   A true two-line drop cap, so the text wraps around it for exactly two lines and every
   later line starts at the normal left edge (no permanent indent on the whole block).
   The cap is a float sized to the height of two body lines: body line-height is 1.95, so
   two lines = 3.9em; the cap's own line-height is just under 3.9 / its font-size (3.78em at
   3.2em) so rounding never catches a third line. CSS initial-letter was tried and rejected:
   Chromium reserves three lines for Cinzel Decorative's swashed capitals. */
.component-text::first-letter {
    font-family: "Cinzel Decorative", "Cinzel", serif;
    font-weight: 700;
    color: var(--rubric);
    font-size: 3.2em;
    float: left;
    line-height: 1.18;
    margin: 0 0.12em 0 0;
    text-shadow: 1px 1px 0 rgba(139,90,30,0.3);
}

/* Parish Intercessions lines (M6): same look as .component-text but no drop cap -- these are short
   list lines, and a drop cap on every request would be absurd. */
.parish-intentions-item,
.parish-intentions-category {
    font-family: "IM Fell English", Georgia, serif;
    font-size: 1em;
    line-height: 1.6;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--ink);
    margin-bottom: 10px;
}
.parish-intentions-category {
    margin-top: 14px;
}

.reading-text {
    font-family: "IM Fell English", Georgia, serif;
    font-size: 1em;
    line-height: 1.95;
    margin-bottom: 30px;
    display: block;
    word-wrap: break-word;
    text-align: justify;
    hyphens: auto;
    color: var(--ink);
}
.reading-text p {
    margin: 0 0 1.1em 0;
    text-indent: 1.8em;
}
.reading-text p:first-child {
    text-indent: 0;
}

/* ── Psalm Layout ── */
.psalm-stanza {
    font-family: "IM Fell English", Georgia, serif;
    font-size: 1em;
    line-height: 1.95;
    margin-bottom: 0.5em;
    display: block;
}
.psalm-stanza .psalm-half-verse {
    display: block;
    padding-left: 2em;
    color: var(--ink);
}
.psalm-stanza .psalm-half-verse:first-child {
    padding-left: 0;
}
.psalm-block {
    margin-bottom: 30px;
    display: block;
}
.psalm-verse { display: block; margin-bottom: 10px; font-size: 1em; line-height: 1.9; }
.verse-num { font-size: 0.65em; color: var(--gold); vertical-align: super; margin-right: 8px; opacity: 0.8; }

/* ── Saints / Commemorations ── */
.saint-section { margin-top: 60px; border-top: none; padding-top: 0; }
.saint-section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 40px 0;
    width: 100%;
}
.saint-section-divider .sdiv-left {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.45));
}
.saint-section-divider .sdiv-right {
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, rgba(201,168,76,0.45));
}
.saint-section-divider span {
    color: var(--gold);
    font-family: "Cinzel", serif;
    font-size: 0.75em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 0 20px;
    opacity: 0.7;
}
.saint-grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.saint-box { background: var(--container-bg); border-top: 5px solid var(--gold); padding: 20px; width: 240px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); text-align: left; border-radius: 0 0 6px 6px; }

/* ── Ordo Control (date nav) ── */
.ordo-control { background: rgba(201, 168, 76, 0.05); border: 1px solid rgba(201, 168, 76, 0.3); padding: 16px; border-radius: 2px; margin-bottom: 20px; text-align: center; width: 250px; box-sizing: border-box; font-size: 1em; }
.ordo-date { display: block; color: var(--gold); font-weight: bold; margin: 10px 0; font-size: 1.1em; white-space: normal; word-break: break-word; font-family: "Cinzel", serif; }
.ordo-buttons { display: flex; justify-content: center; gap: 5px; }
.ordo-btn { background: none; border: 1px solid rgba(201, 168, 76, 0.4); color: var(--gold); padding: 7px 16px; cursor: pointer; transition: background 0.2s; font-family: "Cinzel", serif; font-size: 0.9em; letter-spacing: 0.08em; border-radius: 1px; }
.ordo-btn:hover { background: rgba(201, 168, 76, 0.15); }

/* ── Form Controls ── */
select { width: 100%; padding: 10px; background: #1e1a14; color: #c8bfa8; border: 1px solid rgba(201,168,76,0.35); border-radius: 2px; font-family: "IM Fell English", serif; }


/* ── Info Tooltip System ── */
.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(201,168,76,0.2);
    border: 1px solid rgba(201,168,76,0.5);
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
    text-transform: none;
    cursor: help;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}
#uo-tooltip {
    position: fixed;
    background: #1a1208;
    color: #e8d9b0;
    border: 1px solid rgba(201,168,76,0.5);
    border-radius: 4px;
    padding: 14px 18px;
    font-family: "IM Fell English", Georgia, serif;
    font-size: 17px;
    line-height: 1.6;
    width: 280px;
    box-shadow: 4px 4px 20px rgba(0,0,0,0.7);
    pointer-events: none;
    z-index: 9999;
    display: none;
}

/* ── Ethiopian Rubric Style (Metsehafe Tselot / Brana aesthetic) ── */
/* Principle: Red = what you DO. Black = what you SAY.               */
.ethiopian-theme .rubric-text {
    color: #C0392B;
    font-size: 0.85em;
    font-style: italic;
    font-weight: 300;
    font-family: "IM Fell English", Georgia, serif;
    font-variant: normal;
    letter-spacing: 0.01em;
    line-height: 1.3;
    border-bottom: none;
    border-left: 2px solid rgba(192, 57, 43, 0.6);
    padding-left: 10px;
    margin-top: 28px;
    margin-bottom: 8px;
    text-shadow: none;
    width: auto;
}

.ethiopian-theme .rubric-text::before {
    content: "☩ ";
    font-style: normal;
    font-weight: 600;
    margin-right: 3px;
    color: #C0392B;
}

/* ── Light/Manuscript mode: restore traditional Qay ink ── */
body.light-mode .ethiopian-theme .rubric-text {
    color: #8B0000;
    border-left-color: #8B0000;
}

/* ── Ethiopian Prayer Text (heavier voice weight) ── */
.ethiopian-theme .component-text {
    font-weight: 500;
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* ── Mobile: content never shrinks. The panel-scoped overlay/dim rules that
   used to live here (positioning the four legacy sidebars and dimming
   content behind them) were deleted with the sidebars themselves (Phase 6,
   sidebar-deletion refactor) -- confirmed dead, not guessed: those ids no
   longer exist anywhere in index.html. ── */
@media (max-width: 768px) {
    #main-content {
        width: 100vw !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 600px) {
    .mode-btn { font-size: 1.05em; padding: 14px 28px; }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    /* .ordo-control/.setting-group removed 2026-09-25: not dead selectors
       (they're the "moved legacy controls" now living inside dialog.uo-drawer),
       but redundant -- office-shell.css's own print rule already hides that
       whole dialog with !important, and a hidden parent hides every
       descendant regardless of the descendant's own display value. */
    #mode-selection,
    .mode-btn,
    #date-header,
    .saint-section {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
        margin: 0;
        padding: 0;
        font-size: 12pt;
    }
    #main-content {
        margin-left: 0 !important;
        padding: 0.5in !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .office-container {
        background: white !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    h1 { font-size: 18pt; color: black !important; margin-bottom: 0.25in; page-break-after: avoid; }
    h2 { font-size: 14pt; color: black !important; border-bottom: 1px solid #333 !important; margin-top: 0.2in; page-break-before: auto; page-break-after: avoid; }
    h3, h4 { font-size: 12pt; color: black !important; page-break-after: avoid; }
    .rubric-text {
        color: #333 !important;
        font-style: italic;
        font-size: 11pt;
        border-bottom: none !important;
        margin-top: 0.15in;
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    .passage-reference { color: #666 !important; font-size: 10pt; font-style: italic; }
    .component-text { font-size: 11pt; line-height: 1.4; color: black !important; margin-bottom: 0.15in; page-break-inside: avoid; }
    hr { border: 0.5pt solid #999 !important; margin: 0.15in 0 !important; }
    a { text-decoration: none; color: black !important; }
    * { background: white !important; }
}

/* App-wide parchment design propagation pass */
:root {
    --app-bg-warm: #efe2cf;
    --app-bg-cream: #fbf6ee;
    --app-surface: rgba(255, 251, 244, 0.92);
    --app-surface-strong: rgba(255, 253, 248, 0.98);
    --app-border: rgba(103, 58, 31, 0.14);
    --app-border-strong: rgba(103, 58, 31, 0.22);
    --app-ink: #3f2618;
    --app-ink-soft: rgba(63, 38, 24, 0.72);
    --app-rubric: #8f3b30;
    --app-bronze: #7a3f17;
    --app-gold-soft: #d8bd78;
    --app-shadow-soft: 0 18px 52px rgba(74, 46, 26, 0.12);
    --app-shadow-card: 0 10px 30px rgba(74, 46, 26, 0.08);
    --app-radius-xl: 28px;
    --app-radius-lg: 18px;
    --app-serif: Georgia, "Times New Roman", serif;
    --app-label: Georgia, "Times New Roman", serif;
}

/* Dark-mode variant of the parchment design system above. The parchment pass
   defined --app-* as fixed light-only values in :root with no dark-mode
   awareness, so toggling "Dark Mode" had no visible effect on the
   actual office content area (only the outer body background, which uses
   the older --bg-color/--ink variable set, ever responded to it). Since
   every rule below just reads var(--app-ink) etc., overriding the color
   values here — scoped to when an office is actually open (.office-active)
   AND dark mode is on (.dark-mode) — restores the toggle's effect
   everywhere those variables are used, without editing each rule
   individually. Palette matches the original Vespers/Gothic dark theme
   variables above (--bg-color, --container-bg, --ink, --rubric, --gold).
   Radii and fonts are unaffected by theme, so are not overridden here. */
/* SCOPE WIDENED 2026-09-05. These dark values were scoped to
   body.office-active.dark-mode, so they applied ONLY once an office was
   open. Both splash screens (#tradition-entry, #mode-selection) are
   body:not(.office-active), so dark mode was a no-op there by construction:
   the checkbox flipped body classes and nothing visible was keyed to them. */
body.dark-mode {
    --app-bg-warm: #1e1608;
    --app-bg-cream: #241c0e;
    --app-surface: rgba(30, 22, 8, 0.92);
    --app-surface-strong: rgba(24, 18, 8, 0.98);
    --app-border: rgba(201, 168, 76, 0.16);
    --app-border-strong: rgba(201, 168, 76, 0.26);
    --app-ink: #e8d9b0;
    --app-ink-soft: rgba(232, 217, 176, 0.72);
    --app-rubric: #c0392b;
    --app-bronze: #c9a84c;
    --app-gold-soft: #d8bd78;
    --app-shadow-soft: 0 18px 52px rgba(0, 0, 0, 0.45);
    --app-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
}

body:not(.office-active) {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 250, 241, 0.94), rgba(239, 226, 207, 0.86) 46%, rgba(207, 185, 155, 0.78) 100%) !important;
}

body:not(.office-active).dark-mode {
    background:
        radial-gradient(circle at 50% 12%, rgba(38, 29, 14, 0.96), rgba(24, 18, 9, 0.92) 46%, rgba(12, 9, 5, 0.90) 100%) !important;
}

body.dark-mode #splash-bg {
    filter: blur(3px) saturate(0.55) brightness(0.42);
    opacity: 0.55;
}

#splash-bg {
    background:
        radial-gradient(circle at 50% 14%, rgba(255, 253, 248, 0.78), rgba(239, 226, 207, 0.72) 48%, rgba(169, 139, 101, 0.58) 100%),
        linear-gradient(90deg, rgba(102, 58, 25, 0.10), transparent 24%, transparent 76%, rgba(102, 58, 25, 0.10)),
        url("/images/canterbury.png");
    background-size: cover, cover, 82%;
    background-position: center center, center center, center 6%;
    background-repeat: no-repeat;
    filter: blur(3px) saturate(0.82);
    opacity: 0.82;
}

.app-sponsor-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(103, 58, 31, 0.12);
    color: var(--app-ink-soft);
    text-decoration: none;
    font-family: var(--app-serif);
}

.app-sponsor-link span {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.app-sponsor-link strong {
    color: var(--app-rubric);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}



/* Daily Office parchment app shell propagation pass */












































































/* ===========================================================================
   BOOK OF NEEDS -- its own design pass, 2026-09-25.

   Deferred through Phase 6 by design (documentation/UI_REDESIGN_HANDOFF.md
   §5): "It is not an hour: no ordered blocks, no liturgical day, no rail to
   draw -- forcing it into rail · page · margin would misrepresent what it
   is." No source mockup exists for this screen anywhere in this repo or its
   history (confirmed by full-repo search before writing a line of this) --
   built instead from the same design tokens and rules already approved for
   the office shell (css/office-shell.css), applied to Book of Needs' own
   simpler shape: a picker, then a single prayer read start to finish. Same
   palette, same type, same "hairlines and light do the separating, no
   rounded cards, no drop shadows" rule the shell's own header states -- just
   not the office's rail/page/margin grid, which the handoff doc's own §5
   explicitly says would misrepresent what this screen is.

   Deliberately keeps its OWN theme-switching mechanism (the existing Dark
   Mode checkbox, body.dark-mode/body.light-mode) rather than wiring into the
   shell's Auto/Light/Dark control: css/office-shell.js's applyTheme() is
   explicitly scoped to body.office-active only, and its own comment
   describes that separation as a hard-won fix ("six patches in a row... two
   systems owning one piece of global state cannot be reconciled by
   synchronising them harder"). The tokens below are the SAME color values as
   the shell's --uo-* set, under a different, independently-driven name
   (--bon-*) so the two systems stay decoupled on purpose, not by oversight.

   Replaces every previous Book-of-Needs-specific rule in this file (the
   original dark base layer and the "parchment app shell propagation pass"
   that followed it) outright, rather than stacking a third layer on top. */

#individual-prayers-section {
    --bon-ground:        #08070c;
    --bon-ground-raised: #0b0912;
    --bon-ink:           #e6dcc4;
    --bon-ink-quiet:     rgba(230, 220, 196, 0.62);
    --bon-accent:        #c9a84c;
    --bon-rubric:        #d34839;
    --bon-hairline:      rgba(201, 168, 76, 0.12);
    --bon-face-title:    'Cinzel', Georgia, serif;
    --bon-face-prayed:   'Cormorant Garamond', Georgia, serif;
    --bon-face-machine:  'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

body.light-mode #individual-prayers-section {
    --bon-ground:        #f2ebdf;
    --bon-ground-raised: #f4ece0;
    --bon-ink:           #2a2118;
    --bon-ink-quiet:     rgba(42, 33, 24, 0.7);
    --bon-accent:        #846522;
    --bon-rubric:        #8b1a10;
    --bon-hairline:      rgba(103, 58, 31, 0.14);
}

/* ── Shell: full-bleed ground. ── */
#individual-prayers-section.app-book-needs-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--bon-ground);
    overflow-y: auto;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 20px 80px;
    box-sizing: border-box;
    z-index: 200;
    color: var(--bon-ink);
    font-family: var(--bon-face-prayed);
}

/* ---------------------------------------------------------------------------
   GROUND IMAGERY, 2026-09-25. Superseding the original design pass's own
   comment ("no image texture -- Book of Needs has no one tradition of its
   own to veil a ground image for") -- that reasoning was correct for a
   LANE-specific image (the per-lane treatment above is keyed to a single
   tradition's envelope), but this screen serves every tradition equally,
   so it needs imagery that does the same. Josh: "we need to do imagery
   that is more or less ecumenical across the apostolic traditions."

   Same technique as the office shell's own per-lane ground imagery above:
   a separate ::before layer, not filter:blur() on the section itself
   (which would blur the prayer text too), absolutely positioned so it is
   excluded from normal flow, z-index below the real content. Because this
   section is a plain flex column with no other positioned descendants,
   its three direct children (#prayer-selection, #prayer-display,
   #prayer-back-bar) are explicitly promoted to position:relative so they
   paint above the ::before rather than relying on the non-positioned
   in-flow paint order, which would otherwise place them BEHIND a
   z-index:0 positioned ::before -- the same reason the office shell's own
   rail/page/margin/keeping areas needed the identical promotion. --------- */

#individual-prayers-section.app-book-needs-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('/images/chi-rho-sousse.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: blur(6px) saturate(0.5) brightness(0.55);
    opacity: 0.48;
}

body.light-mode #individual-prayers-section.app-book-needs-shell::before {
    filter: blur(6px) saturate(0.5) brightness(1.05);
    opacity: 0.3;
}

#individual-prayers-section.app-book-needs-shell > #prayer-selection,
#individual-prayers-section.app-book-needs-shell > #prayer-display,
#individual-prayers-section.app-book-needs-shell > #prayer-back-bar {
    position: relative;
    z-index: 1;
}

/* ── Selection screen: no card, generous top space, left-aligned like the
   office's own reading column rather than centred like the old splash. ── */
#prayer-selection.app-book-needs-selection {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
}

#book-needs-context-label {
    font-family: var(--bon-face-machine);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bon-accent);
    margin-bottom: 14px;
}

.app-book-needs-title {
    color: var(--bon-ink);
    font-family: var(--bon-face-title);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: 0.006em;
    margin: 0 0 14px;
    text-shadow: none;
}

.app-book-needs-subtitle {
    color: var(--bon-ink-quiet);
    font-family: var(--bon-face-prayed);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.45;
    letter-spacing: 0;
    margin: 0 0 22px;
}

/* The ministry role is a default filter, not a bar. This is the escape
   hatch that makes that true. Deliberately quiet -- it is not a permission
   prompt and nothing is being unlocked. */
.app-book-needs-show-all {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 20px;
    font-family: var(--bon-face-machine);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bon-ink-quiet);
    cursor: pointer;
}

.app-book-needs-show-all input {
    accent-color: var(--bon-accent);
    cursor: pointer;
    margin: 0;
}

/* ── The picker: reuses the settings drawer's own row/group visual
   language (.uo-drawer-section-head / .uo-drawer-office in
   css/office-shell.css) -- grouped, hairline-separated, selectable rows,
   not a parchment box. Dropdown DOM/JS (.prayer-select-wrapper/-trigger/
   -list, .prayer-optgroup-label, .prayer-option, selectPrayer(),
   togglePrayerDropdown()) is completely unchanged -- CSS only. ── */
#individual-prayers-section .prayer-select-wrapper {
    position: relative;
    width: 100%;
    max-width: none;
    text-align: left;
    z-index: 205;
}

#individual-prayers-section .prayer-select-trigger {
    width: 100%;
    min-height: 52px;
    padding: 14px 40px 14px 18px;
    box-sizing: border-box;
    background: transparent;
    color: var(--bon-ink);
    border: 1px solid var(--bon-hairline);
    border-radius: 0;
    font-family: var(--bon-face-prayed);
    font-size: 1.1rem;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#individual-prayers-section .prayer-select-trigger::after {
    content: "▾";
    color: var(--bon-accent);
    font-size: 0.9em;
    margin-left: 10px;
    flex-shrink: 0;
}

#individual-prayers-section .prayer-select-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bon-ground-raised);
    border: 1px solid var(--bon-hairline);
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    color: var(--bon-ink);
}

#individual-prayers-section .prayer-select-list.open { display: block; }

#individual-prayers-section .prayer-optgroup-label {
    padding: 12px 18px 6px;
    font-family: var(--bon-face-machine);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bon-accent);
    border-top: 1px solid var(--bon-hairline);
    background: transparent;
}

#individual-prayers-section .prayer-optgroup-label:first-child { border-top: none; }

#individual-prayers-section .prayer-option {
    padding: 11px 18px 11px 22px;
    font-family: var(--bon-face-prayed);
    font-size: 1.08rem;
    color: var(--bon-ink-quiet);
    cursor: pointer;
    line-height: 1.35;
    border-top: 1px solid var(--bon-hairline);
}

#individual-prayers-section .prayer-optgroup-label + .prayer-option { border-top: none; }

#individual-prayers-section .prayer-option:hover,
#individual-prayers-section .prayer-option:focus-visible {
    background: transparent;
    color: var(--bon-ink);
}

#individual-prayers-section .prayer-option.selected { color: var(--bon-accent); }

.book-needs-empty-state {
    max-width: 100%;
    margin: 1.1rem 0 0;
    padding: 16px 18px;
    border: 1px solid var(--bon-hairline);
    border-radius: 0;
    background: transparent;
    color: var(--bon-ink-quiet);
    font-family: var(--bon-face-prayed);
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
}

/* ── Buttons: the shell's own quiet small-button grammar (.uo-theme-button's
   spirit) -- hairline border, no fill, mono uppercase label -- not an
   invented filled CTA the shell doesn't otherwise have one of. ── */
.app-book-needs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

#individual-prayers-section .mode-btn.app-primary-action,
#individual-prayers-section .mode-btn.app-secondary-action,
#individual-prayers-section .app-mode-return {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 10px 20px;
    background: transparent;
    color: var(--bon-ink-quiet);
    border: 1px solid var(--bon-hairline);
    border-radius: 0;
    font-family: var(--bon-face-machine);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: none;
    text-shadow: none;
    opacity: 1;
    line-height: normal;
}

#individual-prayers-section .mode-btn.app-primary-action {
    color: var(--bon-accent);
    border-color: var(--bon-accent);
}

#individual-prayers-section .mode-btn.app-primary-action:hover,
#individual-prayers-section .mode-btn.app-secondary-action:hover,
#individual-prayers-section .app-mode-return:hover {
    color: var(--bon-ink);
    border-color: var(--bon-ink-quiet);
    background: transparent;
}

#book-needs-display-button:disabled,
#book-needs-display-button[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Single prayer display: no card, the same treatment the office's own
   prayer text already gets -- floats on the ground, capped to the same
   readable measure, no border, no shadow. ── */
#prayer-display.app-book-needs-display {
    display: none;
    width: 100%;
    max-width: 62ch;
    margin: 0 auto;
    padding: 20px 0 110px;
    box-sizing: border-box;
    background: transparent;
    text-align: left;
}

#prayer-display.app-book-needs-display .office-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--bon-ink);
}

#prayer-display.app-book-needs-display .office-container::before,
#prayer-display.app-book-needs-display .office-container::after {
    display: none;
    content: none;
}

#prayer-display.app-book-needs-display .office-container h2 {
    font-family: var(--bon-face-title);
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.08;
    color: var(--bon-ink);
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bon-hairline);
}

#prayer-display.app-book-needs-display .office-container p {
    font-family: var(--bon-face-machine);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bon-accent);
    margin: 0 0 28px;
}

#prayer-display.app-book-needs-display .component-text {
    display: block;
    font-family: var(--bon-face-prayed);
    font-size: 25px;
    line-height: 1.72;
    color: var(--bon-ink);
}

/* ── Back bar: matches the office's own keeping-place bar -- a hairline top
   border, not a fading parchment gradient. ── */
#prayer-back-bar.app-book-needs-back-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 210;
    display: none;
    padding: 16px 0;
    text-align: center;
    background: var(--bon-ground);
    border-top: 1px solid var(--bon-hairline);
}

@media (max-width: 760px) {
    #individual-prayers-section.app-book-needs-shell {
        padding: 50px 16px 60px;
    }

    .app-book-needs-actions {
        flex-direction: column;
    }

    #individual-prayers-section .mode-btn.app-primary-action,
    #individual-prayers-section .mode-btn.app-secondary-action,
    #individual-prayers-section .app-mode-return {
        width: 100%;
    }
}


/* Shared mode navigation grammar propagation pass */
.app-mode-return {
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    letter-spacing: 0.04em;
}

/* ADDED 2026-09-29: persistent per-office Profile icon, per Josh's direct
   request. Opposite corner (top-left) from the theme toggle/Explore-other-
   Offices button (top-right) to avoid crowding. Always visible -- unlike
   .app-mode-return, this is not opt-in. */
.app-profile-icon-btn {
    position: fixed;
    /* Sits BELOW the shared office masthead (.uo-ordo, office-shell.css),
       not on top of it -- top:12px collided visually with .uo-ordo-mark
       ("The Universal Office" branding), which occupies the same top-left
       corner at the same z-layer height. .uo-ordo is 64px tall
       (--uo-ordo-height); this clears it with a small margin. */
    top: calc(var(--uo-ordo-height, 64px) + 10px);
    left: 16px;
    z-index: 200;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.45);
    background: rgba(20, 14, 6, 0.4);
    color: var(--gold, #c9a84c);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.app-profile-icon-btn:hover,
.app-profile-icon-btn:focus-visible {
    opacity: 1;
    background: rgba(20, 14, 6, 0.6);
}

.app-profile-icon-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}



















.admin-app-shell .app-mode-workspace {
    align-items: start;
}

.admin-app-shell .app-mode-drawer-admin {
    align-self: stretch;
}

.admin-app-shell .app-primary-canvas-admin {
    min-width: 0;
}

.admin-app-shell .app-mode-return {
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: 0.035em !important;
}




/* Shared mode chrome normalization pass. Book of Needs removed from these
   two selector lists, 2026-09-25 (its own design pass): the !important
   here would otherwise completely override the new #individual-prayers-
   section .app-mode-return rule above regardless of specificity. Admin
   keeps this treatment unchanged -- out of scope for this pass. */

.admin-app-shell .app-mode-return {
    background: linear-gradient(180deg, #7a3f17, #5d2f11) !important;
    color: #fff8ec !important;
    border: 1px solid rgba(90, 47, 18, 0.48) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 22px rgba(74, 46, 26, 0.16) !important;
    font-family: var(--app-label, Georgia, "Times New Roman", serif) !important;
    font-size: 0.84rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.035em !important;
    text-transform: none !important;
    opacity: 1 !important;
}

.admin-app-shell .app-mode-return:hover {
    background: linear-gradient(180deg, #88491e, #633414) !important;
    color: #fff8ec !important;
    border-color: rgba(90, 47, 18, 0.68) !important;
}





/* width/margin for .office-container now live in one place, in the base
   rule above (line ~1598) -- consolidated so there's exactly one authority
   for this box's sizing instead of two separate rules with the same
   selector and no guaranteed cascade-order relationship. */



/* Constant sidebar-clearance padding-left (desktop only -- see media query
   below for why). The base #main-content rule (line ~485) swaps
   padding-left between 340px and 80px via .sidebar-hidden -- a layout
   paradigm from before .app-primary-canvas existed. Rather than making
   this constant at the *collapsed* width (which let the open sidebar,
   ~341px including its own left offset, visually cover the left edge of
   .office-container), reserve the full open-sidebar clearance ALWAYS, in
   both states. Content sits a little right-of-center while the sidebar is
   collapsed as a result -- a minor, acceptable trade-off against either
   shifting on every toggle or being covered by the sidebar when open.
   Scoped to min-width: 901px: on narrow/mobile screens the sidebar is an
   off-canvas overlay drawer (see the existing @media (max-width: 900px)
   rule elsewhere in this file), not a permanent side-by-side column --
   reserving a full desktop sidebar-width's worth of padding there would
   eat nearly the entire viewport. Mobile already avoids the shift bug on
   its own, using the same (much smaller) padding value in both states. */





























/* Shared office content typography sobriety pass */
















/* Disable the old global automatic drop cap.
   Intentional decorated initials should be added later with explicit markup,
   not by forcing every prayer-text block to float its first letter. */


















/* Tradition-specific text should retain its identity without breaking the shared reading rhythm. */







/* Shared office sidebar normalization pass */

















































/* Previously five separate :has(#<panel>:not(.mode-hidden)) selectors, one
   per tradition sidebar. Every office-active mode always has exactly one
   sidebar panel present (never zero), so gating this on :has() detecting
   *which specific* panel is active added fragility with no real benefit --
   :has() has to re-evaluate this relationship on every reflow, including
   the frequent full innerHTML rebuilds renderSharedOfficeNavigation() does
   on every date/hour/appearance click, and depended on staying in sync
   with a growing list of panel ids (already found once missing #coptic-
   settings entirely). Collapsed to a single unconditional rule -- same
   formula, same result, nothing left to fall out of sync or mistime.
   Content width also subtracts the box's own 40px right padding: with
   padding-left constant at (nav-rail + sidebar-width) above, the content
   box (content-box sizing, no explicit box-sizing override on
   #main-content) needs width = 100vw - padding-left - padding-right so
   the outer box lands exactly at 100vw, not 100vw + padding-right.
   Scoped to min-width: 901px for the same reason the padding-left rule
   above is -- at mobile widths --app-sidebar-width is redefined to nearly
   the full viewport (see the max-width: 900px block below), so this same
   formula would compute a near-zero or negative width there. Mobile
   relies on flex: 1 1 auto sizing itself naturally with no explicit
   width, same as before any of this session's width-formula work. */





/* Shared office navigation apparatus pass */
.shared-office-nav {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
}

.shared-office-nav-card {
    border: 1px solid rgba(103, 58, 31, 0.13);
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 8px 22px rgba(74, 46, 26, 0.045);
    padding: 16px 17px;
}


.shared-office-nav-section-title {
    margin: 0 0 9px;
    color: var(--app-bronze, #7a3f17);
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.095em;
    text-transform: uppercase;
}

.shared-office-nav-current {
    margin: 0 0 12px;
    color: var(--app-rubric, #8f3b30);
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.28;
}

.shared-office-nav-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 11px;
}

.shared-office-nav-actions button {
    border: 1px solid rgba(103, 58, 31, 0.16) !important;
    border-radius: 10px !important;
    background: rgba(255, 253, 248, 0.78) !important;
    color: var(--app-bronze, #7a3f17) !important;
    font-family: var(--app-serif, Georgia, "Times New Roman", serif) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    padding: 7px 8px !important;
    box-shadow: 0 4px 12px rgba(74, 46, 26, 0.045) !important;
}

.shared-office-nav-date-picker {
    display: grid !important;
    gap: 5px;
    margin: 0 !important;
    color: rgba(122, 63, 23, 0.76) !important;
    font-size: 0.84rem !important;
}

.shared-office-nav-date-picker span {
    color: rgba(122, 63, 23, 0.76);
    font-size: 0.82rem;
}

.shared-office-nav-date-picker input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(103, 58, 31, 0.15) !important;
    border-radius: 10px !important;
    background: rgba(255, 253, 248, 0.82) !important;
    color: var(--app-ink, #3f2618) !important;
    font-family: var(--app-serif, Georgia, "Times New Roman", serif) !important;
    font-size: 0.88rem !important;
}

.shared-office-nav-options {
    display: grid;
    gap: 7px;
}

.shared-office-nav-option {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 9px;
    border: 1px solid rgba(103, 58, 31, 0.09);
    border-radius: 10px;
    background: rgba(255, 253, 248, 0.38);
    color: rgba(63, 38, 24, 0.82) !important;
    cursor: pointer;
}


.shared-office-nav-option:hover {
    border-color: rgba(122, 63, 23, 0.24);
    background: rgba(255, 253, 248, 0.62);
}


.shared-office-nav-option input[type="radio"] {
    margin: 2px 0 0 !important;
    accent-color: var(--app-bronze, #7a3f17);
}

.shared-office-nav-option input[type="checkbox"] {
    margin: 2px 0 0 !important;
    accent-color: var(--app-bronze, #7a3f17);
}

.shared-office-nav-option:has(input[type="radio"]:checked) {
    border-color: rgba(143, 59, 48, 0.24);
    background: rgba(143, 59, 48, 0.055);
}


.shared-office-nav-option:has(input[type="checkbox"]:checked) {
    border-color: rgba(143, 59, 48, 0.24);
    background: rgba(143, 59, 48, 0.055);
}


.shared-office-nav-option-copy {
    display: grid;
    gap: 1px;
}

.shared-office-nav-option-label {
    color: var(--app-ink, #3f2618);
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.18;
}

.shared-office-nav-option-detail {
    color: rgba(63, 38, 24, 0.58);
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.78rem;
    line-height: 1.18;
}


.shared-office-nav-option:has(input[type="radio"]:checked) .shared-office-nav-option-label {
    color: var(--app-rubric, #8f3b30);
}

.shared-office-nav-option:has(input[type="checkbox"]:checked) .shared-office-nav-option-label {
    color: var(--app-rubric, #8f3b30);
}

.shared-office-nav-legacy-hidden {
    display: none !important;
}

/* Shared office navigation polish retirement tranche */
.shared-office-nav {
    gap: 10px;
    margin-bottom: 14px;
}

.shared-office-nav-card {
    padding: 12px 13px;
    border-radius: 14px;
}

.shared-office-nav-section-title {
    margin-bottom: 6px;
    font-size: 0.78rem;
    line-height: 1.08;
    letter-spacing: 0.085em;
}

.shared-office-nav-current {
    margin-bottom: 9px;
    font-size: 0.82rem;
    line-height: 1.22;
}

.shared-office-nav-actions {
    gap: 5px;
    margin-bottom: 8px;
}

.shared-office-nav-actions button {
    min-height: 30px;
    padding: 5px 7px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
}

.shared-office-nav-date-picker {
    gap: 3px;
    font-size: 0.76rem !important;
}

.shared-office-nav-date-picker span {
    font-size: 0.74rem;
}

.shared-office-nav-date-picker input[type="date"] {
    min-height: 30px !important;
    padding: 5px 8px !important;
    font-size: 0.78rem !important;
}

.shared-office-nav-options {
    max-height: min(42vh, 22rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 2px;
    gap: 5px;
}

.shared-office-nav-option {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 7px;
    border-radius: 9px;
}

.shared-office-nav-option-label {
    font-size: 0.84rem;
    line-height: 1.12;
}

.shared-office-nav-option-detail {
    font-size: 0.70rem;
    line-height: 1.14;
}

@media (max-width: 900px) {
    .shared-office-nav-options {
        max-height: 18rem;
    }
}

/* Entry first-screen scope repair */
#tradition-entry .app-entry-secondary-selector[hidden],
#mode-selection.app-universal-selector[hidden] {
    display: none !important;
}

/* Entry family-step separation repair */
#entry-family-grid[hidden],
#tradition-entry .app-entry-secondary-selector[hidden] {
    display: none !important;
}

#tradition-entry[data-entry-step="western"] .app-entry-family-grid,
#tradition-entry[data-entry-step="eastern"] .app-entry-family-grid {
    display: none !important;
}

/* Uniform office shell header hierarchy pass */
#main-content > #office-mode-title {
    max-width: min(900px, calc(100vw - 40px));
    margin: clamp(18px, 3vh, 38px) auto clamp(20px, 3vh, 38px);
    font-size: clamp(2rem, 3.7vw, 3.55rem);
    line-height: 1.02;
    letter-spacing: 0.012em;
    text-align: center;
}

.office-book-title {
    margin: 0 0 0.42rem;
    color: var(--app-bronze, #7a3f17);
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    font-size: clamp(0.78rem, 1.05vw, 0.94rem);
    font-variant: small-caps;
    letter-spacing: 0.13em;
    line-height: 1.15;
}

@media (max-width: 900px) {
    #main-content > #office-mode-title {
        max-width: calc(100vw - 28px);
        font-size: clamp(1.85rem, 7.4vw, 3rem);
    }
}

/* Book of Needs tradition-context access pass */
.office-context-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: -0.35rem auto 1.4rem;
}

.office-context-action {
    border: 1px solid rgba(122, 63, 23, 0.22);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.76);
    color: var(--app-bronze, #7a3f17);
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
}


.office-context-action:hover,
.office-context-action:focus-visible {
    background: rgba(255, 253, 248, 0.96);
    border-color: var(--app-border-strong);
    outline: none;
}


.prayer-option[hidden],
.prayer-optgroup-label[hidden] {
    display: none !important;
}

/* .book-needs-empty-state and #book-needs-display-button:disabled now live
   in the consolidated Book of Needs design-pass block above, 2026-09-25. */


/* Commemoration tradition scoping pass */
.saint-section.tradition-commemorations-hidden,
.saint-section[hidden] {
    display: none !important;
}

/* Daily Office commemoration card readability pass */
#main-content .saint-section:not([hidden]) {
    width: min(980px, calc(100vw - 40px));
    margin: clamp(42px, 6vh, 82px) auto 0;
}

#main-content .saint-section:not([hidden]) .saint-section-divider {
    margin-bottom: clamp(22px, 3vh, 34px);
}

#main-content .saint-section:not([hidden]) #saint-display.saint-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

#main-content .saint-section:not([hidden]) #saint-display > *,
#main-content .saint-section:not([hidden]) #saint-display .app-commemoration-card {
    min-height: 0 !important;
    width: auto !important;
    max-width: 420px !important;
    padding: 22px 24px !important;
    border: 1px solid var(--app-border, rgba(122, 63, 23, 0.18)) !important;
    border-top: 4px solid var(--app-bronze, rgba(201, 168, 76, 0.9)) !important;
    border-radius: 8px !important;
    /* FIXED 2026-09-25, per Josh's direct report ("You did not bring the
       commemoration card into alignment with the rest of the office if it
       is dark"): this readability pass hardcoded a fixed light-cream
       gradient, ignoring --app-surface/--app-surface-strong, which this
       file's own body.dark-mode block already defines correctly (a dark
       surface) for every other card on the page. Only the card's TEXT
       colors were already var()-based here, so dark mode looked like light
       gold-on-cream text sitting in a cream card, floating unchanged on an
       otherwise dark page, rather than the mismatch being in the text. */
    background:
        linear-gradient(180deg, var(--app-surface-strong, rgba(255, 253, 248, 0.96)), var(--app-surface, rgba(251, 244, 229, 0.9))) !important;
    box-shadow: var(--app-shadow-card, 0 18px 36px rgba(61, 40, 23, 0.12)) !important;
    color: var(--app-ink, #3a2618) !important;
    opacity: 1 !important;
}

#main-content .saint-section:not([hidden]) #saint-display > * *,
#main-content .saint-section:not([hidden]) #saint-display .app-commemoration-card * {
    color: var(--app-ink, #3a2618) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

#main-content .saint-section:not([hidden]) #saint-display > * > :first-child,
#main-content .saint-section:not([hidden]) #saint-display .app-commemoration-card > :first-child {
    color: var(--app-bronze, #7a3f17) !important;
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    font-size: 0.86rem !important;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    line-height: 1.25;
    margin-bottom: 0.75rem !important;
}

#main-content .saint-section:not([hidden]) #saint-display > * > :not(:first-child),
#main-content .saint-section:not([hidden]) #saint-display .app-commemoration-card > :not(:first-child) {
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: clamp(1rem, 1.35vw, 1.22rem) !important;
    line-height: 1.38 !important;
}


/* User Profile modal, REDESIGNED 2026-09-29 per Josh's direct feedback ("less
   ugly and more readable"). The old version was a translucent gradient card
   (rgba fills at 0.68-0.78 alpha) meant to sit on the splash screen's own
   background -- once this became a true modal (opened from any office page,
   over whatever content is currently showing), that translucency made
   contrast unpredictable and, per Josh, hard to read. Now matches the SAME
   solid-card-over-dark-backdrop pattern already used (and never complained
   about) by #uo-tradition-explanation/#uo-onboarding-prompt: a fully opaque
   parchment card, solid ink text, no alpha-blended text colors. */
.app-profile-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    overflow-x: hidden; /* the panel scrolls up and down only, never sideways */
    overscroll-behavior: contain;
    padding: 6vh 16px;
    box-sizing: border-box;
}

.app-profile-defaults {
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    width: min(820px, 100%);
    margin: 0 auto;
    padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 34px) clamp(24px, 3vw, 30px);
    border: 1px solid rgba(201, 168, 76, 0.5);
    border-radius: 10px;
    background: var(--parchment, #f4ecd8);
    color: var(--ink, #2b2118);
    box-shadow: 4px 4px 26px rgba(0, 0, 0, 0.55);
}

body.dark-mode .app-profile-defaults {
    background: #1a1208;
    color: #e8d9b0;
}

.app-profile-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--rubric, #8f3b30);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.app-profile-close:hover,
.app-profile-close:focus-visible { opacity: 1; }

.app-profile-defaults-copy {
    max-width: 640px;
    margin: 0 auto 20px;
    text-align: center;
    padding-right: 28px;
}

.app-profile-kicker {
    margin: 0 0 0.3rem;
    color: var(--gold, #c9a84c);
    font-family: "Cinzel", serif;
    font-size: 0.78rem;
    font-variant: small-caps;
    letter-spacing: 0.12em;
}

.app-profile-defaults h2 {
    margin: 0;
    color: inherit;
    font-family: "Cinzel", serif;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    letter-spacing: 0.04em;
}

.app-profile-defaults-copy p:last-child {
    margin: 0.6rem auto 0;
    color: inherit;
    opacity: 0.9;
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.98rem;
    line-height: 1.45;
}

.app-profile-defaults-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    align-items: end;
}

.app-profile-default-field {
    min-width: 0; /* a long option label must not stretch the column wider than the screen */
    display: grid;
    gap: 6px;
    color: var(--gold, #c9a84c);
    font-family: "Cinzel", serif;
    font-size: 0.72rem;
    font-variant: small-caps;
    letter-spacing: 0.08em;
}

/* ADDED 2026-09-29: same bug class already found and fixed once this session
   for #uo-threshold -- an author stylesheet rule with `display: grid` and no
   `[hidden]` qualifier overrides the browser's own `[hidden] { display: none }`
   UA rule (author styles beat UA styles regardless of specificity), so
   syncProfileFieldVisibilityForTradition() setting `.hidden = true` on a
   tradition-specific field had no visible effect -- the field stayed laid
   out in the grid, just as if it were shown. Explicit override restores
   `[hidden]`'s actual meaning for this class. */
.app-profile-default-field[hidden] {
    display: none;
}

.app-profile-default-field select,
.app-profile-default-field input[type="text"] {
    box-sizing: border-box; /* text inputs default to content-box: 100% width + padding spilled into the next column and made the name box taller than the dropdowns */
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: #2b2118;
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.96rem;
    font-variant: normal;
    letter-spacing: 0;
}

body.dark-mode .app-profile-default-field select,
body.dark-mode .app-profile-default-field input[type="text"] {
    background: rgba(255, 255, 255, 0.08);
    color: #e8d9b0;
}

.app-profile-default-field-checkbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.app-profile-default-field-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold, #c9a84c);
}

/* ADDED 2026-09-30 (Parish Intercessions): the parish picker spans both grid columns, with its
   join-code row, status note and "Stop following" button stacked beneath the select. */
.app-profile-default-field-wide {
    grid-column: 1 / -1;
}

.app-profile-parish-intentions-join {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.app-profile-parish-intentions-join[hidden],
.app-profile-parish-intentions-page[hidden],
.app-profile-parish-intentions-stop[hidden] {
    display: none;
}

.app-profile-parish-intentions-join input[type="text"] {
    flex: 1 1 220px;
    width: auto;
}

.app-profile-parish-intentions-note {
    margin: 0;
    min-height: 1.2em;
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.9rem;
    font-variant: normal;
    letter-spacing: 0;
    line-height: 1.4;
    color: inherit;
    opacity: 0.9;
}

.app-profile-parish-intentions-stop {
    justify-self: start;
}

/* ADDED 2026-10-06: link from the profile to a followed parish's own page. */
.app-profile-parish-intentions-page {
    justify-self: start;
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.9rem;
    color: inherit;
    text-decoration: underline;
}

.app-profile-defaults-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
}

.app-profile-confirm {
    position: fixed; /* pinned to the screen, so it is visible however far the tall panel is scrolled */
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.55);
}

.app-profile-confirm[hidden] { display: none; }

.app-profile-confirm-card {
    width: min(420px, 100%);
    padding: 22px 22px 20px;
    box-sizing: border-box;
    border: 1px solid var(--gold, #c9a84c);
    border-radius: 8px;
    background: var(--parchment, #f4ecd8);
    color: var(--ink, #2b2118);
    text-align: center;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .app-profile-confirm-card {
    background: #1a1208;
    color: #e8d9b0;
}

.app-profile-confirm-card h3 {
    margin: 0 0 10px;
    font-family: "Cinzel", serif;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

.app-profile-confirm-card p {
    margin: 0 0 18px;
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.98rem;
    line-height: 1.45;
}

.app-profile-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.app-profile-save {
    min-height: 44px;
    min-width: 160px;
    padding: 0.6rem 1.6rem;
    font-size: 0.9rem;
    font-family: "Cinzel", serif;
    letter-spacing: 0.08em;
    border: 1px solid var(--gold, #c9a84c);
    border-radius: 4px;
    background: var(--gold, #c9a84c);
    color: #1a1208;
    font-weight: 700;
    cursor: pointer;
}

.app-profile-reset {
    min-height: 38px;
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    font-family: "Cinzel", serif;
    letter-spacing: 0.06em;
    border: 1px solid var(--gold, #c9a84c);
    border-radius: 4px;
    background: rgba(201, 168, 76, 0.14);
    color: inherit;
    cursor: pointer;
}

@media (max-width: 640px) {
    .app-profile-defaults-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-profile-defaults-copy {
        padding-right: 0; /* the corner X is gone; no room to reserve for it */
    }

    .app-profile-defaults-actions {
        align-items: stretch;
        flex-direction: column;
    }
}


/* Office-page local profile defaults access pass */
.office-profile-defaults-action {
    background: rgba(255, 253, 248, 0.58);
    border-color: rgba(103, 58, 31, 0.15);
    color: rgba(122, 63, 23, 0.86);
}

.office-profile-defaults-action:hover,
.office-profile-defaults-action:focus-visible {
    background: rgba(255, 253, 248, 0.82);
    color: var(--app-bronze, #7a3f17);
}

/* Entry splash stained-glass viewport stabilization pass */
body:not(.office-active) {
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 18px 16px 26px !important;
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    padding-right: calc(16px + env(safe-area-inset-right)) !important;
    padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important;
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
}

#splash-bg {
    overflow: hidden;
    filter: none !important;
    opacity: 1 !important;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 252, 246, 0.54), rgba(239, 226, 207, 0.42) 42%, rgba(178, 145, 103, 0.50) 100%),
        linear-gradient(90deg, rgba(102, 58, 25, 0.16), transparent 24%, transparent 76%, rgba(102, 58, 25, 0.16)) !important;
}

#splash-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/canterbury.png");
    background-size: min(82vw, 1120px) auto;
    background-position: center clamp(28px, 5.5vh, 72px);
    background-repeat: no-repeat;
    opacity: 0.72;
    filter: blur(2px) saturate(0.98) contrast(1.04);
    transform: scale(1.012);
    transform-origin: center top;
}

#splash-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 252, 246, 0.10), rgba(255, 252, 246, 0.40) 46%, rgba(239, 226, 207, 0.58) 100%),
        linear-gradient(180deg, rgba(255, 249, 238, 0.16), rgba(207, 185, 155, 0.28));
}

@media (max-width: 860px) {
    #splash-bg::before {
        background-size: min(118vw, 920px) auto;
        background-position: center clamp(18px, 4vh, 46px);
        opacity: 0.68;
    }
}

@media (max-width: 760px) {
    #splash-bg::before {
        background-size: 138vw auto;
        background-position: center clamp(14px, 3vh, 34px);
        opacity: 0.64;
    }
}

/* Universal selector advanced-tools gate */
.app-advanced-only[hidden],
#mode-selection.app-universal-selector:not(.app-entry-advanced-tools-visible) .app-advanced-only {
    display: none !important;
}

/* Shared office hour selector internal-scroll removal */




/* Mobile sidebar close rail visibility */


/* Mobile sidebar label wrapping containment */


/* === UO MOBILE DRAWER REPAIR START === */
/*
   Mobile office shell repair.

   This block intentionally lives at the end of office.css so it overrides older
   mobile drawer rules without depending on fragile in-place patch anchors.
*/
@media (max-width: 768px) {
    html,

    body{
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #daily-office-section {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* The #sidebar-toggle and per-panel positioning/open-close rules that
       used to live here were deleted with the four legacy sidebars and
       #sidebar-toggle itself (Phase 6, sidebar-deletion refactor) --
       confirmed dead, not guessed: those ids no longer exist anywhere in
       index.html. */

    #main-content,
    #main-content.sidebar-hidden {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 22px 14px 44px 58px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    #office-display {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .office-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 42px 18px 52px !important;
        box-sizing: border-box !important;
    }

    .office-container::before {
        inset: 10px !important;
    }

    #office-mode-title {
        font-size: clamp(1.55rem, 8vw, 2.25rem) !important;
        line-height: 1.04 !important;
        overflow-wrap: anywhere !important;
    }

    .shared-office-nav,
    .shared-office-nav-card,
    .shared-office-nav-field,
    .shared-office-nav-options,
    .shared-office-nav-option,
    .ordo-control,
    .setting-group,
    .nested-group {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .setting-group label {
        white-space: normal !important;
    }

    /* CONFIRMED DEAD, deleted 2026-09-25: a body.mobile-sidebar-open
       #daily-office-section::after dim-overlay rule used to sit here.
       grep across every .js file and index.html found zero code anywhere
       that ever sets the mobile-sidebar-open class on body -- it was a
       leftover from the legacy sidebar's slide-out animation, already
       unreachable before the sidebars themselves were deleted (Phase 6).
       Everything else in this block (html/body and #main-content overflow
       containment, #daily-office-section positioning, .office-container/
       .shared-office-nav*/.setting-group sizing) is still live and, for
       the overflow-x rules specifically, appears to be the SOLE mechanism
       preventing horizontal scroll at mobile widths on both Daily Office
       and Book of Needs -- office-shell.css has zero html/body selectors
       and never references #daily-office-section at all. Confirmed via a
       three-agent research pass, not guessed; left in place. */
}
/* === UO MOBILE DRAWER REPAIR END === */

/* Roman Breviary 1960/1962 dev slice layout */
.rb1960-dev-slice {
    width: min(980px, calc(100vw - 2rem));
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.rb1960-dev-slice h2 {
    max-width: 100%;
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.rb1960-dev-slice h3,
.rb1960-dev-slice p,
.rb1960-dev-slice div,
.rb1960-dev-slice article,
.rb1960-dev-slice section {
    max-width: 100%;
    box-sizing: border-box;
}

.rb1960-dev-slice .rb1960-block {
    min-width: 0;
    overflow: hidden;
}

.rb1960-dev-slice .rb1960-unit {
    min-width: 0;
    overflow: hidden;
}

.rb1960-dev-slice pre {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    overflow-x: hidden;
    font-size: clamp(0.82rem, 1.8vw, 1rem);
    line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.rb1960-dev-slice details {
    max-width: 100%;
}

.rb1960-dev-slice ul {
    padding-left: 1.2rem;
}

@media (max-width: 720px) {
    .rb1960-dev-slice {
        width: calc(100vw - 1rem);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .rb1960-dev-slice h2 {
        font-size: clamp(1.5rem, 8vw, 2.4rem);
    }

    .rb1960-dev-slice pre {
        font-size: 0.78rem;
    }
}

.rb1960-dev-slice .rb1960-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.75rem;
}

.rb1960-dev-slice .rb1960-nav label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
}

/* Roman Breviary 1960/1962 office-like render polish */
.rb1960-dev-slice .rb1960-context {
    margin-top: 1.2rem;
    margin-bottom: 1.8rem;
    font-size: clamp(1rem, 2.1vw, 1.25rem);
}

.rb1960-dev-slice .rb1960-block {
    margin-top: 2rem;
}

.rb1960-dev-slice .rb1960-block h3 {
    margin-bottom: 0.6rem;
}

.rb1960-dev-slice .rb1960-unit-citation {
    margin-bottom: 0.7rem;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    color: var(--accent);
}

.rb1960-dev-slice .rb1960-unit-body {
    max-width: 100%;
}

.rb1960-dev-slice .rb1960-unit-body p {
    margin: 0 0 0.72rem 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    line-height: 1.52;
}

.rb1960-dev-slice .rb1960-diagnostics {
    margin-top: 2rem;
    font-size: 0.9em;
    opacity: 0.86;
}

/* Roman Breviary 1960/1962 sidebarless dev route */
body.roman-breviary-dev-mode #main-content,
body.roman-breviary-dev-mode #main-content.sidebar-hidden {
    padding-left: 40px;
}

@media (max-width: 720px) {
    body.roman-breviary-dev-mode #main-content,
    body.roman-breviary-dev-mode #main-content.sidebar-hidden {
        padding-left: 20px;
    }
}

/* Roman Breviary 1960/1962 nocturn grouping -- Nocturnus I/II/III is a lane-native display
   grouping carried on each block as a `nocturn`/`nocturnLabel` passthrough field, not a role of
   its own (Core Contract §7 rule 1 forbids a block/role for a structural container that isn't
   itself a liturgical unit); see js/roman-breviary-1960-1962-dev-slice.js's groupByNocturn(). */
.rb1960-nocturn-group {
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(201, 168, 76, 0.24);
}

.rb1960-nocturn-group > .rb1960-nocturn-heading {
    margin-bottom: 1.2rem;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rb1960-nocturn-group .rb1960-block h4 {
    margin: 1.5rem 0 0.6rem;
    font-family: "Cinzel", serif;
    color: var(--gold);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    letter-spacing: 0.06em;
}


/* ── Shared dark-mode toggle ─────────────────────────────────────────────────
   Added 2026-09-03 per Josh's direction that every screen carry its own dark
   mode control, not just the office sidebars. One class is used on the mode
   selector, the Book of Needs, and the Bible Reader so the control looks and
   behaves identically wherever it appears. The office sidebars keep their own
   Appearance card, which the shared navigator generates. */
/* RESTYLED 2026-09-05. This was a bare checkbox floating between the title
   and the mode grid on a ceremonial splash. It now sits as a quiet pill
   pinned to the card's top corner, out of the reading line. */
.app-dark-toggle {
    position: absolute;
    top: clamp(14px, 2.2vw, 22px);
    right: clamp(14px, 2.2vw, 26px);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.34em 0.72em;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    margin: 0;
    font-family: "Cinzel", serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.2s;
}

.app-dark-toggle:hover {
    opacity: 1;
}

.app-dark-toggle input {
    accent-color: var(--gold);
    cursor: pointer;
    margin: 0;
}

/* FIXED 2026-09-25, found while investigating a related report on this same
   .app-dark-toggle component (Book of Needs): the shared rule's
   position:absolute pins to the nearest POSITIONED ancestor's corner, but
   none of .bible-design-header-actions/.bible-design-hero/.bible-design-shell/
   #bible-browser-section ever set position:relative, so the toggle escaped
   all the way to the page's own top-right corner -- disconnected from the
   header row it visually belongs in (the "Design Pilot" chip and "Back to
   Modes" button either side of it), and fixed in place regardless of how far
   the passage text was scrolled. .bible-design-header-actions is already a
   proper flex row built to hold exactly this control; position:static lets
   it take its real place there instead. */
.bible-design-header-actions .app-dark-toggle {
    position: static;
    margin: 0;
}

/* ── Liturgical Education Layer — Architectural Charter section 11 ──────────
   Depth 1 markers reuse the existing .info-btn / #uo-tooltip system defined
   above; only the small overrides needed inside the office canvas are added
   here. Depth 2 uses a <details> disclosure, matching the .hor-depth-disclosure
   pattern already used by _horologionBodyWrap(). Depth 3 is a centred panel.
   Nothing here changes the office's own typography — the explanatory layer is
   deliberately quieter than the prayer it annotates. */

.uo-explanation-marker {
    /* Slightly smaller than the sidebar's info buttons: inside the prayer
       canvas the marker must not compete with the liturgical text. */
    width: 15px;
    height: 15px;
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}
.uo-explanation-marker:hover,
.uo-explanation-marker:focus {
    opacity: 1;
    outline: none;
}

.uo-explanation-structural {
    margin: 4px 0 14px 0;
    padding: 0;
    border-left: 2px solid rgba(201,168,76,0.28);
    padding-left: 12px;
}
.uo-explanation-structural > summary {
    cursor: pointer;
    list-style: none;
    font-family: "Cinzel", serif;
    font-size: 0.72em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rubric);
    opacity: 0.75;
    padding: 2px 0;
}
.uo-explanation-structural > summary::-webkit-details-marker { display: none; }
.uo-explanation-structural > summary::before {
    content: "›";
    display: inline-block;
    margin-right: 7px;
    transition: transform 0.15s ease;
}
.uo-explanation-structural[open] > summary::before { transform: rotate(90deg); }
.uo-explanation-structural > summary:hover { opacity: 1; }

.uo-explanation-body {
    font-family: "IM Fell English", Georgia, serif;
    font-size: 0.92em;
    line-height: 1.65;
    opacity: 0.9;
    margin: 6px 0 4px 0;
}
.uo-explanation-body p { margin: 0 0 0.8em 0; }
.uo-explanation-body p:last-child { margin-bottom: 0; }

/* Every explanatory string in this layer carries the page it was written from.
   The citation is shown, not hidden behind a toggle: this project's standing
   rule is that content is cited to a specific source page, and the citation is
   part of the content rather than metadata about it. */
.uo-explanation-source {
    font-family: "Cinzel", serif;
    font-size: 0.66em;
    letter-spacing: 0.03em;
    color: var(--rubric);
    opacity: 0.6;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(201,168,76,0.16);
}

#uo-tradition-explanation {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.55);
    overflow-y: auto;
    padding: 6vh 16px;
    box-sizing: border-box;
}
.uo-tradition-explanation-inner {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    background: var(--parchment, #f4ecd8);
    color: var(--ink, #2b2118);
    border: 1px solid rgba(201,168,76,0.5);
    border-radius: 5px;
    padding: 30px 34px 26px;
    box-shadow: 4px 4px 26px rgba(0,0,0,0.6);
}
body.dark-mode .uo-tradition-explanation-inner {
    background: #1a1208;
    color: #e8d9b0;
}
.uo-tradition-explanation-inner h3 {
    font-family: "Cinzel", serif;
    font-size: 1.05em;
    letter-spacing: 0.07em;
    color: var(--gold);
    margin: 0 0 16px 0;
    padding-right: 32px;
}
.uo-tradition-explanation-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--rubric);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}
.uo-tradition-explanation-close:hover { opacity: 1; }

/* One-time onboarding prompt, added 2026-09-28. Same outer backdrop
   treatment as #uo-tradition-explanation; reuses .uo-tradition-explanation-inner
   itself for the box (see the host markup in index.html) rather than
   duplicating that styling for a second dialog. */
#uo-onboarding-prompt {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0,0,0,0.6);
    overflow-y: auto;
    padding: 6vh 16px;
    box-sizing: border-box;
}
.uo-onboarding-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.uo-onboarding-field label {
    font-family: "Cinzel", serif;
    font-size: 0.72em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}
.uo-onboarding-field input,
.uo-onboarding-field select {
    font-size: 1em;
    padding: 8px 10px;
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 3px;
    background: rgba(255,255,255,0.6);
    color: inherit;
}
body.dark-mode .uo-onboarding-field input,
body.dark-mode .uo-onboarding-field select {
    background: rgba(255,255,255,0.06);
}
.uo-onboarding-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.uo-onboarding-actions button {
    font-family: "Cinzel", serif;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
}
.uo-onboarding-save {
    border: 1px solid var(--gold);
    background: rgba(201,168,76,0.14);
    color: inherit;
}
.uo-onboarding-skip {
    border: 1px solid transparent;
    background: none;
    /* Was --rubric, which is dark red on the dark theme's near-black card (about 2:1). The
       ink colour at reduced opacity stays quiet but is readable in both themes. */
    color: var(--ink);
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.uo-onboarding-skip:hover { opacity: 1; }

.shared-office-nav-formation-card select { width: 100%; }

@media (max-width: 768px) {
    .uo-tradition-explanation-inner { padding: 26px 20px 22px; }
    #uo-tradition-explanation { padding: 3vh 10px; }
}

/* .app-book-needs-show-all now lives in the consolidated Book of Needs
   design-pass block above, 2026-09-25 (kept its explanatory comment there:
   "the ministry role is a default filter, not a bar... deliberately
   quiet -- it is not a permission prompt and nothing is being unlocked"). */

/* ADDED 2026-10-07: the optional account section of the profile panel (js/account-ui.js). */
.app-account-section {
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.35);
}
.app-account-section > summary {
    cursor: pointer;
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.app-account-section[open] > summary { margin-bottom: 12px; }
.app-account-section h4 {
    margin: 18px 0 4px;
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.app-account-section label {
    display: block;
    margin: 12px 0 4px;
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.app-account-section input[type="text"],
.app-account-section input[type="email"],
.app-account-section input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: #2b2118;
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    font-size: 0.96rem;
}
body.dark-mode .app-account-section input[type="text"],
body.dark-mode .app-account-section input[type="email"],
body.dark-mode .app-account-section input[type="password"] {
    background: rgba(255, 255, 255, 0.08);
    color: #e8d9b0;
}
.app-account-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.app-account-tab {
    padding: 6px 12px;
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.app-account-tab[aria-pressed="true"] { background: rgba(201, 168, 76, 0.22); }
.app-account-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.app-account-hint, .app-account-intro, .app-account-who { margin: 6px 0; font-size: 0.92rem; line-height: 1.45; }
.app-account-status { margin: 12px 0 0; padding: 8px 10px; border-left: 3px solid rgba(201, 168, 76, 0.6); font-size: 0.92rem; }
.app-account-status.ok { border-color: #4a7c59; }
.app-account-status.bad { border-color: #9b2335; }
.app-account-confirm { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(201, 168, 76, 0.5); border-radius: 6px; }
.app-account-list { list-style: none; margin: 8px 0 0; padding: 0; }
.app-account-list li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(201, 168, 76, 0.25); }
[hidden].app-account-confirm, [hidden].app-account-status { display: none; }
body.dark-mode .app-account-section { background: rgba(255, 255, 255, 0.05); }

/* Small "saved on this device since ..." line above Save in the profile panel (2026-10-08). */
.app-profile-storage-note {
    margin: 0 0 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
    opacity: 0.7;
}

/* ADDED 2026-10-25: the quiet "listen" note for An Anglican Synaxarium, set beneath the commemoration cards (not one
   of them, so none of the card rules above apply). Colours come from the app's own theme variables, so it follows
   light and dark mode: --app-bronze is brown on parchment and gold on the dark page. */
.synaxarium-listen {
    max-width: 520px;
    margin: clamp(18px, 3vh, 30px) auto 0;
    padding: 26px 28px 20px;
    text-align: center;
    /* Not a card: an edgeless glow of the page colour, so the type stays legible over the photograph. */
    background: radial-gradient(ellipse closest-side at 50% 50%, color-mix(in srgb, var(--app-bg-cream, #fbf6ee) 84%, transparent) 0%, color-mix(in srgb, var(--app-bg-cream, #fbf6ee) 70%, transparent) 45%, transparent 100%);
    font-family: var(--app-serif, Georgia, "Times New Roman", serif);
    color: var(--app-ink, #3f2618);
}
.synaxarium-listen .syn-rule {
    display: block;
    width: 42px;
    height: 1px;
    margin: 0 auto 14px;
    background: var(--app-bronze, #7a3f17);
    opacity: 0.6;
}
.synaxarium-listen .syn-eyebrow {
    margin: 0 0 4px;
    font-family: var(--app-label, Georgia, "Times New Roman", serif);
    font-size: 0.86rem;
    font-weight: 600;
    font-variant: small-caps;
    letter-spacing: 0.16em;
    color: var(--app-bronze, #7a3f17);
}
.synaxarium-listen .syn-main {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(1.1rem, 1.5vw, 1.28rem);
    font-style: italic;
    color: var(--app-ink, #3f2618);
    -webkit-appearance: none;
    appearance: none;
}
.synaxarium-listen .syn-label {
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
.synaxarium-listen .syn-main:hover .syn-label {
    border-bottom-color: var(--app-bronze, #7a3f17);
}
.synaxarium-listen .syn-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2em;
    height: 2em;
    border: 1px solid var(--app-bronze, #7a3f17);
    border-radius: 50%;
    color: var(--app-bronze, #7a3f17);
    padding-left: 0.12em;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.synaxarium-listen .syn-icon-pause { display: none; }
.synaxarium-listen.is-playing .syn-icon-play { display: none; }
.synaxarium-listen.is-playing .syn-icon-pause { display: block; }
.synaxarium-listen.is-playing .syn-play { padding-left: 0; }
.synaxarium-listen .syn-main:hover .syn-play,
.synaxarium-listen.is-playing .syn-play {
    background: var(--app-bronze, #7a3f17);
    color: var(--app-bg-cream, #fbf6ee);
}
.synaxarium-listen .syn-main:focus-visible {
    outline: 2px solid var(--app-bronze, #7a3f17);
    outline-offset: 6px;
    border-radius: 999px;
}
.synaxarium-listen .syn-meta {
    margin: 2px 0 0;
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--app-ink-soft, rgba(63, 38, 24, 0.72));
}
.synaxarium-listen .syn-meta a {
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--app-border-strong, rgba(103, 58, 31, 0.22));
}
.synaxarium-listen .syn-meta a:hover,
.synaxarium-listen .syn-meta a:focus-visible {
    color: var(--app-ink, #3f2618);
    border-bottom-color: var(--app-bronze, #7a3f17);
}
@media print {
    .synaxarium-listen { display: none; }
}