:root{--ink:#132a3a;--muted:#60717b;--paper:#f7f4ec;--surface:#fffdf8;--gold:#b88732;--gold-text:#7f5b1a;--gold-soft:#efe1be;--line:#dce1df;--sage:#dce8df;--shadow:0 18px 50px rgba(18,43,59,.09);--on-gold:#132a3a;--danger:#b3402e;color-scheme:light}
:root.dark{--ink:#edf4f4;--muted:#a9b9bd;--paper:#0d1b24;--surface:#142833;--gold:#f1c879;--gold-text:#f1c879;--gold-soft:#3a3427;--line:#2c4450;--sage:#203c3b;--shadow:0 18px 50px rgba(0,0,0,.24);--danger:#e2705c;color-scheme:dark}
/* The static pages (landing, fear index, every day page) carry no
   JavaScript, so the .dark class that app.js toggles never reaches them and
   they stayed full-brightness for a visitor whose device is set to dark --
   the visitor the hero addresses at 3 a.m. They opt in with class="theme-auto"
   on <html>, which the app itself never sets: a bare prefers-color-scheme rule
   on :root would override the explicit "light" a reader can choose in the app,
   since that choice is the ABSENCE of .dark rather than a class of its own.
   These tokens must stay identical to :root.dark above; the smoke suite
   compares the two so they cannot drift. */
@media(prefers-color-scheme:dark){:root.theme-auto{--ink:#edf4f4;--muted:#a9b9bd;--paper:#0d1b24;--surface:#142833;--gold:#f1c879;--gold-text:#f1c879;--gold-soft:#3a3427;--line:#2c4450;--sage:#203c3b;--shadow:0 18px 50px rgba(0,0,0,.24);--danger:#e2705c;color-scheme:dark}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app-shell{max-width:900px;margin:auto;min-height:100vh}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:.18em}.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:10px;border:1px solid var(--gold);border-radius:50%;color:var(--gold-text)}.top-actions{display:flex;gap:8px}.icon-button,.favorite-button{border:0;background:transparent;color:var(--ink);font-size:1.3rem;cursor:pointer}.icon-button{width:44px;height:44px;border-radius:50%}.icon-button:hover{background:var(--gold-soft)}.progress-wrap{padding:22px 28px 10px}.progress-copy{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.progress-track,.audio-track{height:4px;background:var(--line);border-radius:99px;overflow:hidden}.progress-track{margin-top:10px}.progress-track span,.audio-track span{display:block;height:100%;width:0;background:var(--gold);transition:width .35s ease}.devotional{margin:10px 28px 60px;padding:clamp(26px,6vw,68px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.eyebrow,.day-number,.section-kicker{margin:0;color:var(--gold-text);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:12px 0 28px}.day-number{color:var(--muted)}h1{margin:2px 0 0;font-family:Georgia,serif;font-size:clamp(3rem,9vw,6.2rem);line-height:1;font-weight:500;letter-spacing:-.04em}h2{font-family:Georgia,serif;font-size:1.65rem;font-weight:500;line-height:1.25}.favorite-button{font-size:2.1rem}.favorite-button.active{color:var(--gold)}.scripture{margin:0;padding:24px 0 24px 28px;border-left:3px solid var(--gold)}.scripture p{margin:0;font:italic 1.22rem/1.65 Georgia,serif}.scripture cite{display:block;margin-top:12px;color:var(--muted);font-style:normal;font-size:.85rem;font-weight:700}.audio-card{--player-bg:#132a3a;--player-ink:#f7f4ec;--player-muted:#c3cdd1;--player-line:rgba(247,244,236,.3);--player-rail:rgba(247,244,236,.18);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play main extras";align-items:center;gap:14px 18px;margin:34px 0;padding:18px 20px;background:var(--player-bg);color:var(--player-ink)}:root.dark .audio-card{--player-bg:#1f3a47;--player-ink:#edf4f4;--player-muted:#b9c8cc;--player-line:rgba(237,244,244,.28);--player-rail:rgba(237,244,244,.16);box-shadow:inset 0 0 0 1px var(--line)}.play-button{grid-area:play;width:56px;height:56px;border:0;border-radius:50%;background:var(--gold);color:var(--on-gold);cursor:pointer;font-size:1.1rem;line-height:1}.audio-main{grid-area:main;min-width:0}.audio-labels{font-size:.82rem;line-height:1.45}.audio-labels strong{display:block;font-size:.95rem}.audio-labels span{display:block;color:var(--player-muted);text-wrap:pretty}.audio-track{height:6px;margin-top:12px;background:var(--player-rail)}.audio-extras{grid-area:extras;display:flex;flex-wrap:wrap;gap:7px}#voiceRate,#sleepTimer,.repeat-button{min-height:44px;padding:0 11px;border:1px solid var(--player-line);border-radius:99px;background-color:transparent;color:inherit;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}#voiceRate,#sleepTimer{field-sizing:content}.timer-chip{position:relative;display:inline-flex}.timer-chip #sleepTimer{width:100%;padding-left:29px}.timer-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.95rem;line-height:1;pointer-events:none}#voiceRate,#sleepTimer{-webkit-appearance:none;appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f7f4ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}#voiceRate option,#sleepTimer option{color:#132a3a;background:#fffdf8}.repeat-button{display:inline-flex;align-items:center;gap:6px}.repeat-button span[aria-hidden]{font-size:1rem;line-height:1}.repeat-button.active{background-color:var(--gold);border-color:var(--gold);color:var(--on-gold)}.play-button:focus-visible,#voiceRate:focus-visible,#sleepTimer:focus-visible,.repeat-button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.content-section{margin:42px 0}.content-section p,.prayer-panel p{white-space:pre-line}.prayer-panel{padding:30px;border:1px solid var(--gold);background:linear-gradient(135deg,var(--gold-soft),transparent)}.amen{font-family:Georgia,serif;font-size:1.35rem}.declaration-panel{margin:26px 0;padding:24px 28px;background:var(--sage)}.declaration-panel p:last-child{font:1.35rem/1.5 Georgia,serif}.action-panel{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.action-panel p{margin:0}.action-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--on-gold);font-size:1.35rem}.notes-section{margin:34px 0}.notes-section label{display:block;margin-bottom:8px;font-weight:800}textarea{width:100%;padding:16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;resize:vertical}.save-status{margin:4px 0 0;color:var(--muted);font-size:.78rem}.complete-button{width:100%;padding:17px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-weight:800;cursor:pointer}a.complete-button{display:block;box-sizing:border-box;text-align:center;text-decoration:none}.complete-button.completed{background:var(--gold);color:var(--on-gold)}.day-nav{display:flex;justify-content:space-between;margin-top:20px}.day-nav button{border:0;background:none;color:var(--ink);padding:10px 0;font:inherit;font-weight:700;cursor:pointer}.day-nav button:disabled{opacity:.3}dialog{width:min(760px,calc(100% - 24px));max-height:88vh;padding:30px;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:rgba(3,14,20,.7)}.dialog-header{display:flex;justify-content:space-between;align-items:start}.dialog-header h2{margin:4px 0 20px;font-size:2.4rem}.day-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.day-card{padding:15px;border:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer}.day-card:hover{border-color:var(--gold)}.day-card.done{background:var(--sage)}.day-card small{display:block;color:var(--muted)}
@media(max-width:600px){.topbar{padding:0 18px}.progress-wrap{padding:18px}.devotional{margin:6px 10px 40px;padding:28px 20px}.audio-card{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"play main" "extras extras";padding:16px}.audio-extras>*{flex:1 1 auto}.prayer-panel{padding:24px 20px}.day-grid{grid-template-columns:1fr 1fr}}
.track-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 20px}
.track-chip{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.track-chip:hover{border-color:var(--gold)}
.track-chip.active{border-color:var(--gold);background:var(--gold);color:var(--on-gold)}
.track-chip small{color:var(--muted)}
/* On the selected chip's gold-soft ground the muted grey falls to 3.9:1; ink keeps it above 4.5:1 in both themes. */
.track-chip.active small{color:var(--on-gold)}
.prayer-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.prayer-controls label{display:block;margin-bottom:6px;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.prayer-controls select,.prayer-petition input{width:100%;padding:11px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit}
.prayer-petition{margin:0 0 18px}
.prayer-petition label{display:block;margin-bottom:6px;color:var(--muted);font-size:.82rem}
.prayer-card{padding:24px;border:1px solid var(--gold);background:linear-gradient(135deg,var(--gold-soft),transparent)}
.prayer-title{margin:0 0 14px;font-family:Georgia,serif;font-size:1.3rem;font-weight:500}
.prayer-line{margin:0 0 12px;font:var(--prayer-text)}
.prayer-line:last-of-type{margin-bottom:0}
.prayer-line-alt{margin-top:-6px;color:var(--muted);font-style:italic}
.prayer-title-alt{margin:-10px 0 14px;color:var(--muted);font-family:Georgia,serif;font-size:1.05rem;font-style:italic}
.prayer-both{display:flex;align-items:flex-end}
.prayer-both label{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink);font-size:.9rem;font-weight:700;text-transform:none;letter-spacing:0;cursor:pointer}
.prayer-both input{accent-color:var(--gold)}
.prayer-note{margin:16px 0 0;color:var(--muted);font-size:.82rem;font-style:italic}
.prayer-meta{margin:12px 0 0;color:var(--muted);font-size:.78rem}
.prayer-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.traditional-list{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.traditional-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 20px}
.tradition-note{margin:6px 0 0;color:var(--muted);font-size:.82rem;font-style:italic}
.traditional-list .section-kicker{margin-top:18px}
.traditional-list .section-kicker:first-child{margin-top:0}
.traditional-chip{padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer}
.traditional-chip:hover{border-color:var(--gold)}
.fear-finder{margin:0 0 20px;padding:16px;border:1px solid var(--gold);background:var(--gold-soft)}
.fear-finder label{display:block;margin-bottom:8px;font-weight:800}
.fear-finder select{width:100%;padding:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit}
.track-group-label{grid-column:1/-1;margin:6px 0 0;color:var(--gold-text);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.track-group-label:first-child{margin-top:0}
.filter-tabs{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.filter-tab{padding:8px 16px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--muted);font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.filter-tab:hover{border-color:var(--gold)}
.filter-tab.active{border-color:var(--gold);background:var(--gold);color:var(--on-gold)}
.day-card{position:relative}
.day-card .fav-mark{position:absolute;top:12px;right:12px;color:var(--gold-text)}
.empty-note{margin:6px 0;color:var(--muted)}
/* The Prayer Book in the app: an entry under the journeys in the library,
   and a dialog that lists the prayers like days and reads one like a day. */
.book-entry{width:100%;margin:0 0 20px}
#bookSections .section-kicker{margin-top:22px}
#bookSections .section-kicker:first-child{margin-top:0}
.book-grid{margin:12px 0 4px}
.book-back{margin:0 0 14px;padding:0}
.book-reader .title-row{margin:6px 0 8px}
.book-title{margin:4px 0 0;font:500 clamp(1.9rem,6vw,2.6rem)/1.08 Georgia,serif;letter-spacing:-.02em;text-wrap:balance}
.book-reader .tradition-note{margin:0 0 4px}
.book-player{margin:22px 0}
.book-reader .prayer-panel p{margin:0;font:var(--prayer-text)}
.book-reader .prayer-panel .book-other{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-style:italic}
.book-reader .day-nav{gap:16px}
.book-reader .day-nav button:last-child{text-align:right;margin-left:auto}
/* The Rosary's pages: the order of prayer as a numbered list, and one
   section per mystery on a set's page. */
.rosary-order{margin:14px 0 22px;padding-left:1.4em;line-height:1.9}
.rosary-order ol{margin:4px 0;padding-left:1.4em}
.rosary-page .rosary-mystery{margin:34px 0}
.rosary-page .rosary-mystery h2{margin:6px 0 14px}
.rosary-page .rosary-mystery .tradition-note{margin-top:10px}
#fatima h3.section-kicker{margin:0 0 10px;font-family:inherit;font-size:.75rem;font-weight:800;letter-spacing:.16em}
/* The top bar holds five buttons beside the brand; at phone width they sit
   closer, and on the narrowest screens the brand keeps its mark only (its
   aria-label still says "Stand"). */
.icon-svg{display:block;margin:auto}
@media(max-width:430px){.top-actions{gap:0}.topbar{padding:0 12px}.brand{letter-spacing:.12em}.brand-mark{margin-right:6px}}
@media(max-width:360px){.topbar .brand > span:last-child{display:none}}
/* The Rosary: its entry heads the Prayer Book; the view counts beads. */
.rosary-entry{width:100%;margin:0 0 18px;border-color:var(--gold);background:var(--gold-soft)}
.rosary-entry small{color:var(--ink)}
.rosary-options{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;margin:14px 0 10px}
.rosary-options label{display:block;font-size:.82rem;font-weight:700}
.rosary-options > div{flex:1 1 220px;min-width:0}
.rosary-options select{width:100%;max-width:100%;min-height:44px;margin-top:4px;padding:0 10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit}
.rosary-options .rosary-fatima{display:flex;gap:8px;align-items:center;font-weight:400}
.rosary-along{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:4px 0 6px}
.rosary-along-button{min-height:44px;padding:0 18px;border:1px solid var(--gold);border-radius:99px;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;font-weight:800;cursor:pointer}
.rosary-along-button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.rosary-along-hint{flex:1 1 220px;margin:0;color:var(--muted);font-size:.8rem;line-height:1.45}
.rosary-progress{margin:14px 0 6px;color:var(--muted);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rosary-decades{display:flex;gap:8px;margin:0 0 16px}
.rosary-decade{flex:1;height:5px;border-radius:99px;background:var(--line)}
.rosary-decade.done{background:var(--gold)}
.rosary-decade.current{background:var(--gold-text)}
.rosary-step{margin:0 0 18px}
.rosary-step-title{margin:6px 0 12px;font:500 1.5rem/1.2 Georgia,serif;text-wrap:balance}
/* :where() keeps this at one class and one element, so the mystery's name,
   its verse and the bead count below can style themselves. */
.rosary-step p:where(:not(.section-kicker):not(.tradition-note):not(.rosary-count)){margin:0;font:var(--prayer-text)}
.rosary-step .rosary-mystery-name{font-size:1.35rem;font-weight:600}
.rosary-step .rosary-verse{margin-top:12px;font-style:italic}
.rosary-step .tradition-note{margin-top:8px}
.rosary-step .book-other{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-style:italic}
.rosary-beads{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.rosary-bead{width:22px;height:22px;border:2px solid var(--gold);border-radius:50%}
.rosary-bead.done{background:var(--gold)}
.rosary-bead.current{box-shadow:0 0 0 3px var(--gold-soft);border-color:var(--gold-text)}
.rosary-count{margin:6px 0 0;font:700 .9rem/1.4 inherit;font-family:inherit;color:var(--ink)}
.rosary-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rosary-actions .complete-button{flex:1 1 180px;width:auto}
.rosary-actions .text-button:disabled{opacity:.4;cursor:default}
.rosary-done{padding:22px 0}
.rosary-done-title{margin:6px 0 18px;font:500 1.5rem/1.3 Georgia,serif}
@media (prefers-reduced-motion:no-preference){.rosary-bead{transition:background-color .2s ease}}
.title-actions{display:flex;gap:2px;align-items:flex-start}
.share-button{font-size:1.45rem;padding-top:8px}
.journal-entry{padding:18px 0;border-bottom:1px solid var(--line)}
.journal-entry p:last-child{margin:8px 0 0;white-space:pre-line}
#exportButton{margin-top:22px}
#exportButton:disabled{opacity:.4;cursor:default}
.noscript-note{display:block;margin:40px 28px;padding:20px;border:1px solid var(--line);background:var(--surface)}
.data-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.data-note{margin:10px 0 0;color:var(--muted);font-size:.82rem}
.text-button{border:0;background:none;padding:0;color:var(--ink);font:inherit;font-size:.85rem;font-weight:700;text-decoration:underline;cursor:pointer}
.text-button.danger{color:var(--danger)}

.checkin-section{margin:34px 0;padding:24px 28px;border:1px solid var(--line)}
.checkin-question{margin:6px 0 14px;font-family:Georgia,serif;font-size:1.15rem}
.checkin-scale{display:flex;gap:8px;flex-wrap:wrap}
.checkin-scale button{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.checkin-scale button:hover{border-color:var(--gold)}
.checkin-scale button.selected{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.checkin-note{margin:12px 0 0;color:var(--muted);font-size:.82rem}
.sos-button{position:fixed;right:18px;bottom:18px;z-index:10;border:0;border-radius:99px;padding:14px 22px;background:var(--gold);color:var(--on-gold);font:inherit;font-size:.9rem;font-weight:800;letter-spacing:.04em;cursor:pointer;box-shadow:0 12px 32px rgba(18,43,59,.28)}
.sos-button:hover{transform:translateY(-1px)}
main{padding-bottom:78px}
.sos-dialog{max-width:560px;padding:36px clamp(24px,5vw,44px)}
.sos-close{position:absolute;top:14px;right:14px}
.sos-stage{min-height:280px}
.sos-stage h2{margin:8px 0 20px}
.sos-stage .checkin-scale{margin:8px 0 4px}
.sos-prayer{margin:22px 0 14px;white-space:pre-line}
.sos-decl{font:1.25rem/1.5 Georgia,serif;margin:0 0 18px}
.sos-actions{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.sos-footer{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.sos-resources{margin-top:14px;padding:16px 20px;background:var(--sage);font-size:.92rem}
.sos-resources ul{margin:10px 0;padding-left:20px}
.sos-resources li{margin:6px 0}
.sos-resources a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.breath-circle{width:150px;height:150px;margin:28px auto;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:700;animation:breathe 14s ease-in-out infinite}
@keyframes breathe{0%{transform:scale(.72)}28%{transform:scale(1)}57%{transform:scale(1)}100%{transform:scale(.72)}}
.ledger{margin:4px 0 22px;padding:16px 20px;background:var(--sage)}
.ledger-line{margin:8px 0 0;font-size:.95rem}
.welcome-paths{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.path-button{display:flex;flex-direction:column;gap:3px;padding:15px 18px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.path-button:hover{border-color:var(--gold)}
.path-button small{color:var(--muted)}
.reminder-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem}
.reminder-row label{font-weight:700}
.offline-row{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem}
.offline-row label{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.offline-row[hidden]{display:none}
.backup-nudge{margin:0 28px 10px;padding:14px 18px;border:1px solid var(--gold);background:var(--gold-soft);color:var(--ink);font-size:.9rem}
.backup-nudge p{margin:0 0 8px}
.backup-nudge-actions{display:flex;flex-wrap:wrap;gap:18px}
.backup-nudge[hidden],.backup-nudge-actions[hidden]{display:none}
@media(max-width:600px){.backup-nudge{margin:0 10px 8px}}
@media print{.backup-nudge{display:none!important}}
.reminder-options{margin:8px 0 0;font-size:.85rem}
.reminder-options>summary{color:var(--muted);cursor:pointer}
.reminder-option{display:flex;align-items:center;gap:10px;margin:8px 0 0}
.reminder-option label{font-weight:700}
.reminder-option input[type=time]{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:5px 8px;font:inherit}
.reminder-option input[type=time]:disabled{opacity:.5}
.reminder-option select{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:5px 8px;font:inherit}
.reminder-help{margin:8px 0 0;font-size:.85rem;color:var(--muted)}
.reminder-subscribe{margin:8px 0 0;font-size:.85rem}
.reminder-subscribe>summary{color:var(--muted);cursor:pointer}
.reminder-subscribe-actions{margin:8px 0 0}
.reminder-preview{margin:8px 0 0;font-size:.85rem}
.reminder-preview>summary{color:var(--muted);cursor:pointer}
.reminder-preview-title{margin:10px 0 4px;font-weight:700}
.reminder-preview-body{margin:0;padding:12px 14px;border:1px solid var(--line);background:var(--paper);white-space:pre-line;overflow-wrap:anywhere}
.reminder-row input[type=time]{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:6px 8px;font:inherit}
.install-hint{position:fixed;left:12px;right:12px;bottom:12px;z-index:11;display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--ink);color:var(--paper);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.install-hint[hidden]{display:none}
.install-hint p{margin:0;font-size:.88rem}
.install-hint .icon-button{color:var(--paper);flex:none}
.welcome-list{margin:18px 0 26px;padding:0;list-style:none}
.welcome-list li{position:relative;margin:10px 0;padding-left:30px}
.welcome-list li::before{content:"✦";position:absolute;left:2px;color:var(--gold-text)}
@media print{.topbar,.progress-wrap,.audio-card,.notes-section,.complete-button,.day-nav,.title-actions,.share-row,.share-card,dialog{display:none!important}body{background:#fff}.devotional{margin:0;border:none;box-shadow:none;padding:0}}
:is(a,button,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.breath-circle{animation:none}}

.library-about{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);text-align:center}

/* Landing page (about/) — reuses the app's tokens and type so the marketing
   page and the app read as one product. */
.top-actions a.text-button{align-self:center;color:var(--ink)}
.landing-hero{margin:10px 28px 0;padding:clamp(34px,7vw,72px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
/* text-wrap:balance evens the lines so a heading does not end on a short
   orphan ('...will not / sit still.'). Unsupported browsers just wrap as
   before, so there is nothing to fall back to. */
.landing-hero h1{margin:14px 0 0;font-size:clamp(2.4rem,7vw,4.4rem);text-wrap:balance}
.landing-section h2,.landing-close h2,.feature-card h3{text-wrap:balance}
/* Left-aligned inside a centred hero. The heading and the buttons stay
   centred; the lead does not, because three sentences of centred prose
   ran to seven ragged-left lines on a phone, which is the hardest
   configuration to read -- the eye has to hunt for each line's start. */
.landing-lead{max-width:52ch;margin:22px auto 30px;font:1.12rem/1.75 Georgia,serif;color:var(--ink);text-align:left}
.landing-hero .complete-button{max-width:420px;margin:0 auto}
.landing-fineprint{margin:14px 0 0;color:var(--muted);font-size:.85rem}
.landing-section{margin:46px 28px;padding:clamp(24px,5vw,44px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.landing-section h2{margin:10px 0 18px;font-size:clamp(1.8rem,4vw,2.5rem)}
.landing-section > p{max-width:70ch}
.feature-grid{display:grid;gap:16px;margin-top:26px}
.feature-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feature-card{padding:22px;border:1px solid var(--line);background:var(--paper)}
/* Screenshots of the running app. The images are captured at a phone width,
   so they are capped rather than stretched: a 390px-wide screen blown up to
   a desktop column looks like a mistake. align-items:start keeps a short
   capture from stretching to the tallest one in the row. */
.shot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;align-items:start;margin-top:26px}
.shot{margin:0}
.shot img{display:block;width:auto;max-width:100%;max-height:460px;height:auto;margin:0 auto;border:1px solid var(--line);box-shadow:var(--shadow)}
.shot figcaption{margin-top:12px;color:var(--muted);font-size:.88rem;text-align:center}
.feature-card h3{margin:0 0 8px;font-family:Georgia,serif;font-size:1.2rem;font-weight:500}
.feature-card p{margin:0;font-size:.95rem}
/* Site nav: a primary call to action that is always visible, plus a disclosure
   menu holding the rest. <details> is used rather than a scripted dropdown so
   the static pages stay script-free and the open state is announced natively. */
.site-nav{display:flex;align-items:center;gap:10px}
.nav-cta{padding:10px 16px;background:var(--ink);color:var(--paper);font-size:.85rem;font-weight:800;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:var(--gold);color:var(--on-gold)}
.nav-menu{position:relative}
.nav-menu>summary{padding:10px 14px;border:1px solid var(--line);color:var(--ink);font-size:.85rem;font-weight:700;list-style:none;cursor:pointer;white-space:nowrap}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary::after{content:" \2630"}
.nav-menu>summary:hover,.nav-menu[open]>summary{border-color:var(--gold);color:var(--gold-text)}
.nav-menu ul{position:absolute;right:0;top:calc(100% + 8px);z-index:5;min-width:230px;margin:0;padding:8px;list-style:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.nav-menu a{display:block;padding:11px 12px;color:var(--ink);font-size:.92rem;text-decoration:none}
.nav-menu a:hover{background:var(--gold-soft);color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:520px;margin:0 auto}
.hero-actions .complete-button{flex:1 1 200px;margin:0}
.hero-secondary{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.hero-secondary:hover{background:var(--gold-soft)}
.landing-section>.complete-button{max-width:320px;margin-top:24px}
.footer-links{margin:18px 0 8px}
.landing-footer .complete-button{max-width:320px;margin:0 auto}
@media(max-width:600px){
  .topbar{gap:10px}
  .nav-cta{padding:9px 12px;font-size:.8rem}
  .nav-menu>summary{padding:9px 12px;font-size:.8rem}
  .nav-menu ul{min-width:min(260px,calc(100vw - 36px))}
  .hero-actions .complete-button{flex:1 1 100%}
}
.landing-close{text-align:center}
.landing-close .complete-button{max-width:420px;margin:22px auto 0}
.landing-footer{margin:0 28px 48px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;text-align:center}
/* Scoped to the text links: `.landing-footer a` also matched the footer's
   call to action, whose own .complete-button colour lost on specificity and
   left white-on-ink button text rendering muted grey at 2.92:1. */
.footer-links a{color:var(--muted)}
/* A group label that is also a real heading, so the page does not jump h1 -> h3.
   Needs to out-specify `.landing-section h2`, which would otherwise size it as
   a section title, and to opt out of the serif h2 face. */
h2.section-kicker,.landing-section h2.section-kicker{margin:0;font-family:inherit;font-size:.75rem;font-weight:800;letter-spacing:.16em}
/* Links in static page content: the stylesheet had no rule for them, so they
   fell back to browser blue against a gold-and-ink palette. Excludes
   .complete-button, which carries its own colours. */
.landing-section a:not(.complete-button),.landing-hero a:not(.complete-button),.day-nav a{color:var(--ink);text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
.landing-section a:not(.complete-button):hover,.landing-hero a:not(.complete-button):hover,.day-nav a:hover{color:var(--gold-text)}
.feature-card h3 a{text-decoration:none;border-bottom:1px solid var(--gold)}
.day-nav a{font-weight:700}
/* The Prayer Book. The eyebrow and section label link back up the book, in
   their own colour; a prayer's name can run long ("Prayer to St. Michael the
   Archangel"), so its heading is smaller than a day's one-word title; and the
   prayer itself is set in the serif, as it is on the share card. */
.prayer-page .eyebrow a,.prayer-page .day-number a,.landing-hero .eyebrow a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:4px}
.prayer-page h1{font-size:clamp(2.4rem,7vw,4.2rem);line-height:1.05;text-wrap:balance}
.prayer-page .title-row{margin-bottom:10px}
.prayer-page .tradition-note{margin:0 0 26px}
.prayer-page .prayer-panel p:not(.section-kicker){font:var(--prayer-text)}
.prayer-page .day-nav{gap:18px}
.prayer-page .day-nav a:last-child{text-align:right}
@media(max-width:600px){.landing-hero{margin:6px 10px 0;padding:30px 20px}.landing-section{margin:26px 10px;padding:24px 20px}.landing-footer{margin:0 18px 36px}}
/* The share row on the static day pages and the app's share dialog. Links and
   buttons share one shape; the copy button carries a label because "copied"
   has to be readable. */
:is(.share-row,.share-sheet){display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0 22px}
.share-label{flex:0 0 100%;margin:0 0 2px;background:var(--surface);color:var(--gold-text);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
:is(.share-row,.share-sheet,.share-card figcaption) a,:is(.share-row,.share-sheet,.share-card figcaption) button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font:inherit;font-size:.85rem;font-weight:700;text-decoration:none;cursor:pointer}
:is(.share-row,.share-sheet,.share-card figcaption) :is(a,button):is(:hover,:focus-visible){border-color:var(--gold);background:var(--gold-soft)}
:is(.share-row,.share-sheet,.share-card figcaption) svg{width:18px;height:18px;flex:0 0 18px}
:is(.share-row,.share-sheet) .share-link{padding:0;width:44px}
:is(.share-row,.share-sheet) .is-copied{border-color:var(--gold);background:var(--gold-soft)}
:is(.share-row,.share-sheet) .share-url{flex:0 0 100%;padding:10px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.9rem}
:is(.share-row,.share-sheet,.share-card figcaption) [hidden]{display:none}
/* The day's share card on a day page: shown small, the whole image one tap away. */
.share-card{margin:4px 0 28px}
.share-card .section-kicker{margin-bottom:12px}
.share-card-image{display:block;width:min(300px,100%);border:1px solid var(--line);box-shadow:var(--shadow);line-height:0}
.share-card-image img{display:block;width:100%;height:auto}
.share-card figcaption{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.share-sheet{margin:6px 0 0}
.share-sheet .save-status{flex:0 0 100%;margin:0}
.share-caption{margin:0 0 14px;font:italic 1.05rem/1.6 Georgia,serif}
/* Text buttons that carry a step of a flow (Skip, another round, the crisis
   link, the composer's actions, backup and erase) get a full-size tap area:
   they are used one-handed, often in distress. */
.sos-dialog .text-button,.prayer-actions .text-button,.data-actions .text-button,.reminder-subscribe-actions .text-button{min-height:44px}
:is(.reminder-options,.reminder-subscribe,.reminder-preview)>summary{padding:11px 0}
.prayer-actions{margin-top:8px}
/* The policy pages nest content sections inside a card, whose own padding
   already spaces them from its edges. */
.landing-section>.content-section:first-child{margin-top:0}.landing-section>.content-section:last-child{margin-bottom:0}
@media(max-width:600px){.track-picker{grid-template-columns:1fr 1fr;gap:8px}.track-chip{padding:12px}.checkin-section{padding:20px}.checkin-scale{gap:6px}.checkin-scale button{flex:0 1 48px;min-width:38px;width:auto;height:auto;aspect-ratio:1}.share-sheet>button{flex:1 1 100%}}
/* The crisis link wraps to two lines in Spanish; keep it aligned like the rest of the step. */
.sos-footer .text-button{text-align:left}

/* Tap targets: every control a finger has to hit is at least 44 by 44 CSS
   pixels (WCAG 2.5.5), on every screen; tests/a11y.js measures them all.
   Links inside a sentence are exempt, as the criterion allows. Where a larger
   box would push the layout about, padding grows the target and a matching
   negative margin keeps the text where it was. */
.favorite-button{min-width:44px;min-height:44px}
.text-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.filter-tab,.traditional-chip{min-height:44px}
.reminder-option select,.reminder-option input[type=time],.reminder-row input[type=time]{min-height:44px}
.prayer-both label,.rosary-fatima,.reminder-option label:has(input[type=checkbox]){min-height:44px}
.reminder-option label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;min-height:44px}
.nav-cta,.nav-menu>summary{display:inline-flex;align-items:center;min-height:44px}
.day-nav a,.rosary-order a{display:inline-flex;align-items:center;min-height:44px}
.prayer-page .eyebrow a,.prayer-page .day-number a,.landing-hero .eyebrow a,.landing-fineprint a{display:inline-block;padding:15px 0;margin:-15px 0}
/* A card with one link is one target: the link's box covers the card. */
.feature-card:has(h3>a:only-child){position:relative}
.feature-card h3>a:only-child::after{content:"";position:absolute;inset:0}
.icon-button{flex:0 0 44px}

/* Prayer text: one voice for every prayer the reader prays, on every surface
   (the day, Steady me now, the composer, the Prayer Book, the Rosary and the
   site's pages). Headings, notes and the declaration keep their own. */
:root{--prayer-text:1.15rem/1.8 Georgia,serif}
.prayer-panel p:where(:not(.section-kicker):not(.amen)),.sos-prayer{font:var(--prayer-text)}

/* Selected, on every control: filled gold with dark text, the look of the
   Steady me now button. The same fill marks the one urgent action on the
   site, so "Steady me now" looks the same wherever it is offered. */
.sos-cta{border:0;border-radius:99px;background:var(--gold);color:var(--on-gold);letter-spacing:.04em}
.sos-cta:hover,.sos-cta:focus-visible{background:var(--gold);color:var(--on-gold);box-shadow:0 0 0 3px var(--gold-soft)}
/* "Show both languages", offered in the Prayer Book reader and the Rosary. */
.book-both{display:flex;gap:8px;align-items:center;font-weight:400;min-height:44px}
/* The workbook's download page: each card's buttons sit at its foot, level
   with its neighbour's, and the flyers offer one button per language. */
.download-card{display:flex;flex-direction:column}
.download-card h3+p{margin-bottom:18px}
.download-card>.complete-button,.download-links{margin-top:auto}
.download-card .landing-fineprint{margin-top:12px}
.download-links{display:flex;flex-wrap:wrap;gap:10px}
.download-links .complete-button{flex:1 1 120px;width:auto}
/* The app shell's markup is in English and paints before any script runs.
   body.booting keeps the main column and Steady me now out of sight until the
   app has put the reader's language on them; body.day-pending, for a Spanish
   reader whose journeys are still loading, holds back only the day's own text
   and Steady me now. If the app never starts, everything shows after eight
   seconds, as the markup is (app.js, boot). */
.booting main,.booting #sosButton,.day-pending :is(#weekLabel,#dayNumber,#dayTitle,.scripture,#reflection,#prayer,#declaration,#action,.progress-copy,#sosButton){visibility:hidden;animation:shell-fallback 0s 8s forwards}
@keyframes shell-fallback{to{visibility:visible}}