/* =============================
   Tokens
   ============================= */
:root{
  --bg:#ffffff;
  --text:#1b1b1a;
  --soft:#3d3c39;
  --muted:#706d66;
  --hairline:#ececea;
  --fill:#f5f4f1;
  --raised:#ffffff;
  --shadow:0 12px 40px rgba(20,18,12,0.12), 0 2px 6px rgba(20,18,12,0.06);
  --bar-bg:rgba(255,255,255,0.86);
  --rubric:#a8322d;

  --serif:"Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure:38rem;                                  /* ~68 characters of scripture per line */
  --gutter:clamp(1.25rem, 6vw, 3rem);
  --reading-size:clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --accent:var(--muted);

  color-scheme:light;
}
:root[data-size="s"]{ --reading-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); }
:root[data-size="l"]{ --reading-size:clamp(1.3rem, 1.2rem + 0.4vw, 1.45rem); }
:root[data-size="xl"]{ --reading-size:clamp(1.5rem, 1.4rem + 0.5vw, 1.7rem); }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111110;
    --text:#ecebe6;
    --soft:#cfcdc6;
    --muted:#8d8a82;
    --hairline:#262523;
    --fill:#1d1c1a;
    --raised:#1d1c1a;
    --shadow:0 12px 40px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
    --bar-bg:rgba(17,17,16,0.86);
    --rubric:#e07a70;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111110;
  --text:#ecebe6;
  --soft:#cfcdc6;
  --muted:#8d8a82;
  --hairline:#262523;
  --fill:#1d1c1a;
  --raised:#1d1c1a;
  --shadow:0 12px 40px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --bar-bg:rgba(17,17,16,0.86);
  --rubric:#e07a70;
  color-scheme:dark;
}

/* =============================
   Base
   ============================= */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
  border-radius:6px;
}

[hidden]{ display:none !important; }

/* =============================
   Top bar
   ============================= */
.bar{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--bar-bg);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  padding-top:env(safe-area-inset-top);
  transition:border-color .2s ease;
}
.bar.scrolled{ border-bottom-color:var(--hairline); }

.bar-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:0.5rem;
  max-width:calc(var(--measure) + 2 * var(--gutter) + 12rem);
  margin:0 auto;
  height:3.75rem;
  padding:0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right));
}
.bar-start{ justify-self:start; display:flex; align-items:center; }
.bar-end{ justify-self:end; position:relative; display:flex; align-items:center; gap:0.25rem; }

.wordmark{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--soft);
}

.pill{
  font-size:0.8125rem;
  font-weight:500;
  padding:0.35rem 0.8rem;
  border-radius:999px;
  background:var(--fill);
  color:var(--soft);
  transition:background .15s ease;
}
.pill:hover{ background:var(--hairline); }

.day-nav{
  display:flex;
  align-items:center;
  gap:0.125rem;
}

.icon-btn{
  display:inline-grid;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:999px;
  color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.icon-btn:hover{ background:var(--fill); color:var(--text); }
.icon-btn svg{
  width:1.25rem;
  height:1.25rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.text-icon{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:500;
  color:var(--soft);
}
.text-icon[aria-expanded="true"]{ background:var(--fill); color:var(--text); }

.date-btn{
  position:relative;
  display:block;
  padding:0.45rem 0.75rem;
  border-radius:999px;
  font-size:0.9375rem;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease;
}
.date-btn:hover{ background:var(--fill); }
.date-short{ display:none; }
/* The native date input covers the label invisibly, so tapping the date opens the system picker */
.date-btn input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:0;
  padding:0;
}
.date-btn input::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:pointer;
}

/* Settings popover */
.settings{
  position:absolute;
  right:0;
  top:calc(100% + 0.5rem);
  width:min(20rem, calc(100vw - 2rem));
  padding:1.25rem;
  background:var(--raised);
  border:1px solid var(--hairline);
  border-radius:16px;
  box-shadow:var(--shadow);
  display:grid;
  gap:1.1rem;
  animation:pop .16s ease-out;
}
@keyframes pop{
  from{ opacity:0; transform:translateY(-4px) scale(.98); }
  to{ opacity:1; transform:none; }
}
.setting{ display:grid; gap:0.45rem; }
.setting-label{
  font-size:0.75rem;
  font-weight:500;
  color:var(--muted);
}

.segmented{
  display:flex;
  gap:2px;
  padding:3px;
  border-radius:10px;
  background:var(--fill);
}
.segmented button{
  flex:1;
  min-height:2.25rem;
  padding:0.25rem 0.5rem;
  border-radius:8px;
  font-size:0.875rem;
  color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.segmented button:hover{ color:var(--text); }
.segmented button.active{
  background:var(--bg);
  color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

/* =============================
   Page
   ============================= */
.page{
  max-width:calc(var(--measure) + 2 * var(--gutter));
  margin:0 auto;
  padding:clamp(2.5rem, 8vw, 5rem) max(var(--gutter), env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  transition:opacity .2s ease;
}
.page.loading{ opacity:.35; }
:root.wide .page{ max-width:calc(64rem + 2 * var(--gutter)); }

/* Day header */
.eyebrow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0.5rem;
  margin:0 0 1rem;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.dot{
  width:0.6rem;
  height:0.6rem;
  border-radius:50%;
  background:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12);
}

.feast{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2rem, 1.5rem + 2.4vw, 3rem);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-0.015em;
  text-wrap:balance;
}

.feast-sub{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:0.5rem;
  margin:1rem 0 0;
  font-size:0.9375rem;
  color:var(--muted);
}
.feast-sub .sep{ margin:0 0.45rem; opacity:.6; }

.badge{
  display:inline-block;
  margin-left:0.75rem;
  padding:0.15rem 0.6rem;
  border-radius:999px;
  background:var(--fill);
  color:var(--soft);
  font-size:0.75rem;
  font-weight:500;
  vertical-align:1px;
}

.optional{
  margin:0.5rem 0 0;
  font-size:0.9375rem;
  color:var(--muted);
}
.optional strong{ font-weight:500; color:var(--soft); }

.rule{
  width:2.5rem;
  height:3px;
  border:0;
  border-radius:3px;
  margin:clamp(2rem, 5vw, 2.75rem) 0 0;
  background:var(--accent);
}

/* Mass picker */
.missal-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:0.25rem;
  padding:0.25rem; margin:0 0 2rem;
  border-radius:0.9rem; background:var(--fill);
}
.missal-switch button{
  display:flex; flex-direction:column; align-items:center; gap:0.1rem;
  padding:0.55rem 0.5rem; border-radius:0.7rem; color:var(--muted);
}
.missal-switch button.active{ background:var(--bg); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.missal-name{ font-family:var(--sans); font-size:0.875rem; font-weight:600; }
.missal-detail{ font-family:var(--sans); font-size:0.75rem; }
.read-switch a{ display:flex; flex-direction:column; align-items:center; gap:0.1rem; padding:0.55rem 0.5rem;
  border-radius:0.7rem; color:var(--muted); text-decoration:none; }
.read-switch a.active{ background:var(--bg); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.lib-group{ margin-top:2.5rem; }
.lib-books{ display:grid; gap:0.75rem; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); margin-top:0.75rem; }
.lib-book{ display:flex; flex-direction:column; gap:0.3rem; padding:1rem 1.1rem; border:1px solid var(--hairline);
  border-radius:0.9rem; color:var(--text); text-decoration:none; }
.lib-book:hover{ border-color:var(--muted); }
.lib-title{ font-family:var(--serif); font-size:1.15rem; font-weight:500; line-height:1.3; }
.lib-author{ font-size:0.8125rem; color:var(--muted); }
.lib-about{ font-size:0.875rem; line-height:1.5; color:var(--soft); }
.lib-progress{ font-size:0.75rem; font-weight:600; color:var(--accent, var(--text)); margin-top:0.2rem; }
.lib-part{ margin-top:2rem; }
.hours.toc .toc-row{ grid-template-columns:1fr auto; grid-template-areas:"name time" "sub time"; padding:0.9rem 0.25rem; }
.toc-sub{ grid-area:sub; font-size:0.8125rem; color:var(--muted); line-height:1.45; margin-top:0.15rem; }
.lib-subtitle{ font-family:var(--serif); font-style:italic; }
.lib-meta{ font-size:0.8125rem; margin:0.5rem 0 0; }
#readingBody .lib-text p{ margin:0 0 1.1em; text-indent:0; }
.lib-heading{ font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); margin:2em 0 0.8em; }
.lib-source{ margin-top:2.5rem; font-size:0.8125rem; }
.saint-card{ margin:0 0 2rem; padding:1rem 1.15rem; border:1px solid var(--hairline); border-radius:0.9rem; }
.saint-card-label{ margin:0; font-size:0.6875rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.saint-card-name{ margin:0.35rem 0 0.4rem; font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.saint-card-text{ margin:0; font-family:var(--serif); font-size:0.95rem; line-height:1.6; color:var(--soft); }
.saint-card-link{ display:inline-block; margin-top:0.6rem; font-size:0.8125rem; color:var(--text); text-underline-offset:2px; }
.missa-latin-note{ margin:0.5rem 0 0; font-size:0.8125rem; }
.mass-picker{
  display:flex;
  gap:0.5rem;
  margin:2.5rem calc(-1 * var(--gutter)) 0;
  padding:0 var(--gutter) 2px;
  overflow-x:auto;
  scrollbar-width:none;
}
.mass-picker::-webkit-scrollbar{ display:none; }
.mass-picker:empty{ display:none; }
.mass-picker button{
  flex:none;
  padding:0.5rem 1rem;
  border-radius:999px;
  border:1px solid var(--hairline);
  font-size:0.875rem;
  color:var(--muted);
  white-space:nowrap;
  transition:all .15s ease;
}
.mass-picker button:hover{ color:var(--text); }
.mass-picker button.active{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg);
}

/* =============================
   Readings
   ============================= */
.reading{
  padding-top:clamp(2.75rem, 7vw, 4rem);
}
.reading + .reading{
  margin-top:clamp(2.75rem, 7vw, 4rem);
  border-top:1px solid var(--hairline);
}

.reading-label{
  margin:0;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.citation{
  margin:0.4rem 0 0;
  font-family:var(--serif);
  font-size:1.1875rem;
  font-weight:600;
  color:var(--text);
}
.citation-note{
  font-family:var(--sans);
  font-size:0.8125rem;
  font-weight:400;
  color:var(--muted);
  margin-left:0.35rem;
}

.alternatives{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  margin:0.9rem 0 0;
}
.alt{
  padding:0.3rem 0.75rem;
  border-radius:999px;
  border:1px solid var(--hairline);
  font-size:0.8125rem;
  color:var(--muted);
  transition:all .15s ease;
}
.alt:hover{ color:var(--text); }
.alt.active{
  background:var(--fill);
  border-color:var(--fill);
  color:var(--text);
}

.text{
  margin-top:1.25rem;
  font-family:var(--serif);
  font-size:var(--reading-size);
  line-height:1.75;
  color:var(--text);
  overflow-wrap:break-word;
}
.text p{ margin:0; }

.vn{
  font-family:var(--sans);
  font-size:0.6em;
  font-weight:500;
  color:var(--muted);
  vertical-align:0.45em;
  line-height:0;
  margin-right:0.2em;
  user-select:none;
  -webkit-user-select:none;
}
:root[data-verses="hide"] .vn{ display:none; }

[lang="la"]{ font-style:italic; }

/* Both languages: verse-by-verse pairs, side by side when there's room */
.pairs{ display:grid; gap:1.1rem; }
.pair{ display:grid; gap:0.35rem; }
.pair [lang="la"]{ color:var(--soft); }
@media (min-width:52rem){
  .pair{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .pairs{ gap:0.75rem; }
}

.empty{
  margin-top:1.25rem;
  font-size:0.9375rem;
  color:var(--muted);
}

/* =============================
   Mass / Divine Office switch and calendar labels
   ============================= */
.view-switch{
  display:flex;
  width:fit-content;
  margin:0 auto clamp(2.5rem, 7vw, 4rem);
  padding:3px;
  gap:2px;
  border-radius:999px;
  background:var(--fill);
}
.view-switch a{
  padding:0.45rem 1.1rem;
  border-radius:999px;
  font-size:0.875rem;
  font-weight:500;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.view-switch a:hover{ color:var(--text); }
.view-switch a.active{
  background:var(--bg);
  color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

.calendar-label{
  display:inline-block;
  margin:0 0 1.5rem;
  padding:0.3rem 0.7rem;
  border-radius:6px;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--soft);
  background:var(--fill);
}
.calendar-office{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--hairline);
}

.calendar-note{
  display:flex;
  gap:0.6rem;
  align-items:flex-start;
  margin:1.5rem 0 0;
  padding:0.85rem 1rem;
  border-radius:10px;
  background:var(--fill);
  font-size:0.875rem;
  line-height:1.55;
  color:var(--soft);
}
.calendar-note svg{
  flex:none;
  width:1.1rem;
  height:1.1rem;
  margin-top:0.1rem;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.75;
  stroke-linecap:round;
}
.calendar-note a{ color:var(--text); text-underline-offset:2px; }

.latin-title{ font-family:var(--serif); font-style:italic; font-size:1.05rem; }
.feast-sub-strong{ font-family:var(--serif); font-size:1.15rem; color:var(--soft); }

/* =============================
   Divine Office: list of Hours
   ============================= */
.hours{
  margin-top:clamp(1.5rem, 4vw, 2.5rem);
  border-top:1px solid var(--hairline);
}
.hour-row{
  display:grid;
  grid-template-columns:minmax(6.5rem, 1fr) 1fr auto;
  grid-template-areas:"name time chev" "latin time chev";
  align-items:center;
  column-gap:1rem;
  padding:1.1rem 0.25rem;
  border-bottom:1px solid var(--hairline);
  color:var(--text);
  text-decoration:none;
  transition:background .15s ease;
}
.hour-row:hover{ background:var(--fill); }
.hour-name{
  grid-area:name;
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:500;
}
.hour-latin{
  grid-area:latin;
  font-family:var(--serif);
  font-style:italic;
  font-size:0.875rem;
  color:var(--muted);
}
.hour-time{
  grid-area:time;
  font-size:0.875rem;
  color:var(--muted);
}
.chev{
  grid-area:chev;
  width:1.1rem;
  height:1.1rem;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.now{
  padding:0.1rem 0.5rem;
  border-radius:999px;
  /* an outline in the season's color, blended toward the text so it reads on any season and either theme
     (a solid pill can't: white text vanishes on the pale gold of a white feast) */
  background:none;
  color:color-mix(in srgb, var(--accent) 40%, var(--text));
  box-shadow:inset 0 0 0 1px currentColor;
  font-family:var(--sans);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* =============================
   Divine Office: one Hour
   ============================= */
.hour-crumbs{ margin:-1.5rem 0 1.75rem; }
.crumb{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  margin-left:-0.35rem;
  padding:0.3rem 0.6rem 0.3rem 0.35rem;
  border-radius:999px;
  font-size:0.875rem;
  color:var(--muted);
  text-decoration:none;
}
.crumb:hover{ background:var(--fill); color:var(--text); }
.crumb svg{
  width:1rem;
  height:1rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.office-section{ padding-top:clamp(2.25rem, 6vw, 3rem); }
.office-section.continued{ padding-top:1.5rem; }
.office-section .reading-label{ margin-bottom:0.75rem; }
.office-body{ margin-top:0; line-height:1.7; }
.office-body .line{
  display:block;
  padding-left:1.25em;
  text-indent:-1.25em;   /* hanging indent: wrapped verse lines sit under the text, not the verse number */
  margin-bottom:0.45em;
}
.office-body .line:has(> .note:only-child){ text-indent:0; padding-left:0; line-height:1.5; }
.office-body strong{ font-weight:600; }

.rubric{ color:var(--rubric); font-style:normal; }
.rubric em{ font-style:italic; }
.note{
  font-family:var(--sans);
  font-size:0.8em;
  color:var(--muted);
}
.mediant{ color:var(--rubric); opacity:.75; }

.office-pair{ display:grid; gap:1.25rem; }
.office-pair [lang="la"]{ color:var(--soft); }
@media (min-width:52rem){
  .office-pair{ grid-template-columns:1fr 1fr; gap:2.5rem; }
}

.hour-pager{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:clamp(3.5rem, 9vw, 5rem);
}
.pager-link{
  display:grid;
  gap:0.15rem;
  padding:1rem 1.15rem;
  border:1px solid var(--hairline);
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
  transition:background .15s ease;
}
.pager-link:hover{ background:var(--fill); }
.pager-next{ text-align:right; }
.pager-dir{ font-size:0.75rem; color:var(--muted); }
.pager-name{ font-family:var(--serif); font-size:1.15rem; font-weight:500; }

/* =============================
   Rosary
   ============================= */
.calendar-rosary{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.set-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.4rem;
  margin-top:1.25rem;
  font-size:0.8125rem;
}
.set-chips .muted{ margin-right:0.2rem; }
.latin-aside{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:0.7em;
  color:var(--muted);
  margin-left:0.35rem;
}

.rosary-part, .mystery{ padding-top:clamp(2.75rem, 7vw, 4rem); }
.mystery + .mystery, .mystery + .rosary-part, .rosary-part + .mystery{
  margin-top:clamp(2.75rem, 7vw, 4rem);
  border-top:1px solid var(--hairline);
}
.mystery-name{
  margin:0.35rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
  font-weight:500;
  line-height:1.2;
}
.mystery-art{
  --art-max-h:min(70vh, 36rem);   /* tall panels stay within one screen */
  margin:1.5rem 0 0;
}
.mystery-art img{
  display:block;
  height:auto;                    /* width (set inline from the painting's proportions) drives the size */
  border-radius:4px;
  background:var(--fill);
}
.mystery-art figcaption{
  margin-top:0.6rem;
  font-size:0.75rem;
  line-height:1.5;
  color:var(--muted);
}
.mystery-art cite{ font-style:italic; }
.mystery-art a{ color:inherit; text-underline-offset:2px; }

.mystery-fruit{
  margin:0.5rem 0 0;
  font-size:0.9375rem;
  color:var(--muted);
}

.prayer{ margin-top:1.5rem; }
.prayer .line{ padding-left:0; text-indent:0; }   /* prayers are prose, not psalm verses */
.prayer-name{
  margin:0 0 0.5rem;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
}
.times{
  white-space:nowrap;
  margin-left:0.5rem;
  font-family:var(--sans);
  font-size:0.8125rem;
  font-weight:500;
  color:var(--muted);
}

/* Folded prayers and passages */
details > summary{
  list-style:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
details > summary::-webkit-details-marker{ display:none; }
details > summary::after{
  content:"";
  display:inline-block;
  width:0.45rem;
  height:0.45rem;
  margin-left:0.6rem;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-0.2rem) rotate(45deg);
  transition:transform .15s ease;
}
details[open] > summary::after{ transform:translateY(0) rotate(-135deg); }
details .prayer-name{ margin:0; }
details[open] > .text{ margin-top:0.5rem; }

.scripture{ margin-top:1.25rem; }
.scripture > summary{
  display:inline-block;
  font-size:0.9375rem;
  font-weight:500;
  color:var(--soft);
}
.scripture[open] > .text{ margin-top:0.75rem; }
.decade{
  margin-top:1.25rem;
  padding-top:0.25rem;
}
.decade .prayer{ margin-top:0.9rem; }

.beads{
  display:grid;
  grid-template-columns:repeat(10, minmax(0, 1.6rem));   /* a decade always fits on one row */
  gap:clamp(0.3rem, 1.5vw, 0.55rem);
  margin-top:0.75rem;
}
.bead{
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid var(--muted);
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.bead:hover{ border-color:var(--text); }
.bead:active{ transform:scale(.92); }
.bead.on{
  background:var(--accent);
  border-color:var(--accent);
}
@media (pointer:coarse){
  .beads{ grid-template-columns:repeat(10, minmax(0, 1.9rem)); }   /* comfortable to tap on phones */
}

.note-line{
  margin:1rem 0 0;
  font-size:0.875rem;
  color:var(--muted);
}

.select{
  width:100%;
  min-height:2.4rem;
  padding:0.35rem 0.6rem;
  border:0;
  border-radius:10px;
  background:var(--fill);
  color:var(--text);
  font:inherit;
  font-size:0.875rem;
  cursor:pointer;
}

/* =============================
   Calendar
   ============================= */
:root.cal-wide .page{ max-width:calc(68rem + 2 * var(--gutter)); }

.cal-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.25rem;
}
.cal-title{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight:500;
}

.ico{ width:0.85rem; height:0.85rem; flex:none; vertical-align:-0.1em; }
.ico.fish{ width:1.25rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.ico.fish .eye{ fill:currentColor; stroke:none; }
.ico.fish.filled{ fill:currentColor; }
.ico.fish.filled .eye{ fill:var(--bg); }
.ico.cross{ fill:currentColor; }
.ico.moon circle, .ico.moon path{ fill:none; stroke:currentColor; stroke-width:1.4; }
.ico.moon .fill{ fill:currentColor; }

/* Month grid */
.cal-month{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
  border-radius:12px;
  overflow:hidden;
}
.cal-head{
  background:var(--bg);
  padding:0.5rem 0.25rem;
  text-align:center;
  font-size:0.6875rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.cal-cell{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.2rem;
  min-height:7rem;
  min-width:0;
  padding:0.5rem 0.45rem 0.45rem;
  background:var(--bg);
  border-top:3px solid var(--day-color, transparent);
  text-align:left;
  cursor:pointer;
  transition:background .12s ease;
}
.cal-cell:hover{ background:var(--fill); }
.cal-cell.other{ cursor:default; }
.cal-cell.other .cal-num{ color:var(--muted); }  /* faint, but still readable */
.cal-cell.selected{ box-shadow:inset 0 0 0 2px var(--text); }
.cal-num{
  display:inline-grid;
  place-items:center;
  min-width:1.6rem;
  height:1.6rem;
  margin:-0.2rem 0 0 -0.2rem;
  border-radius:999px;
  font-size:0.8125rem;
  font-weight:600;
}
.cal-cell.today .cal-num{ background:var(--text); color:var(--bg); }
.cal-markers{ display:flex; align-items:center; gap:0.25rem; color:var(--soft); min-height:0.9rem; }
.cal-cell .cal-markers{ position:absolute; top:0.55rem; right:0.45rem; }
.cal-name, .cal-trad{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  width:100%;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.cal-name{ -webkit-line-clamp:3; font-size:0.75rem; color:var(--soft); }
.rank-solemnity .cal-name, .rank-feast .cal-name, .rank-sunday .cal-name{ color:var(--text); font-weight:600; }
.cal-optional{ color:var(--muted); font-style:italic; -webkit-line-clamp:2; }
.cal-trad{ -webkit-line-clamp:2; font-family:var(--serif); font-style:italic; font-size:0.6875rem; color:var(--muted); }
.cal-obs{ font-size:0.625rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }

/* Week list */
.cal-week{ border-top:1px solid var(--hairline); }
.cal-row{
  display:grid;
  grid-template-columns:3.25rem 1fr auto;
  align-items:center;
  gap:1rem;
  width:100%;
  padding:1rem 0.75rem 1rem 0.9rem;
  border-bottom:1px solid var(--hairline);
  border-left:3px solid var(--day-color, transparent);
  text-align:left;
  cursor:pointer;
  transition:background .12s ease;
}
.cal-row:hover{ background:var(--fill); }
.cal-row.selected{ background:var(--fill); }
.cal-row-date{ display:grid; justify-items:center; }
.cal-row-date .dow{ font-size:0.6875rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.cal-row-date .num{ font-family:var(--serif); font-size:1.5rem; font-weight:500; line-height:1.2; }
.cal-row.today .num{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.cal-row-main{ display:grid; gap:0.2rem; min-width:0; }
.cal-row-name{ font-family:var(--serif); font-size:1.05rem; font-weight:500; }
.cal-row-trad{ font-size:0.8125rem; color:var(--muted); }

/* Day detail */
.cal-detail{
  max-width:var(--measure);
  margin-top:clamp(2rem, 5vw, 3rem);
}
.cal-detail.standalone{ margin-top:0.5rem; }
.cal-detail.standalone .cal-detail-date{ display:none; }   /* the day view's title already says it */
.cal-detail-date{
  margin:0;
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:500;
}
.cal-section{ margin-top:1.75rem; }
.cal-section .calendar-label{ margin-bottom:0.75rem; }
.cal-feast{
  display:flex;
  align-items:baseline;
  gap:0.6rem;
  margin:0;
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:500;
  line-height:1.3;
}
.cal-feast .dot{ flex:none; transform:translateY(-0.15rem); }
.cal-note{ margin:0.5rem 0 0; font-size:0.875rem; color:var(--muted); }
.cal-chips{ display:flex; gap:0.4rem; flex-wrap:wrap; margin:0.75rem 0 0; }
.cal-chips .badge{ margin:0; }
.badge .ico{ margin-right:0.25rem; }
.cal-facts{ display:grid; gap:0.75rem; padding-top:1.5rem; border-top:1px solid var(--hairline); }
.cal-fact{ display:flex; gap:0.75rem; align-items:flex-start; margin:0; font-size:0.9375rem; line-height:1.55; color:var(--soft); }
.cal-fact .ico{ width:1.15rem; height:1.15rem; margin-top:0.2rem; color:var(--text); }
.cal-fact strong{ color:var(--text); font-weight:600; }
.rosary-ico{ display:inline-grid; place-items:center; font-size:1rem; line-height:1; }
.cal-links{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.75rem; }
.cal-links .pill, .cal-actions .pill{ text-decoration:none; }

.cal-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:1rem 2rem;
  margin-top:clamp(2.5rem, 6vw, 3.5rem);
  padding-top:1.25rem;
  border-top:1px solid var(--hairline);
}
.cal-legend{ display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem; font-size:0.75rem; color:var(--muted); }
.cal-legend span{ display:inline-flex; align-items:center; gap:0.3rem; }
.cal-actions{ display:flex; gap:0.5rem; flex-wrap:wrap; }

@media (max-width:40rem){
  .tab-long{ display:none; }
  .cal-cell{ min-height:3.6rem; align-items:center; padding:0.35rem 0.1rem; gap:0.15rem; }
  .cal-cell .cal-markers{ position:static; gap:0.1rem; }
  .cal-cell .ico{ width:0.6rem; height:0.6rem; }
  .cal-cell .ico.fish{ width:0.75rem; }
  .cal-name, .cal-trad, .cal-obs{ display:none; }
  .cal-num{ margin:0; font-size:0.875rem; }
  .cal-head{ font-size:0.625rem; letter-spacing:0.04em; }
  .cal-toolbar .cal-title{ font-size:1.5rem; }
  .cal-row{ grid-template-columns:2.75rem 1fr auto; gap:0.75rem; }
}

@media print{
  @page{ size:landscape; margin:0.5in; }
  .view-switch, .cal-views, .cal-detail, .cal-actions, .credits{ display:none !important; }
  :root.cal-wide .page{ max-width:none; padding:0; }
  .cal-month{ border-radius:0; }
  .cal-cell{ min-height:5.6rem; break-inside:avoid; }
  .cal-name, .cal-trad, .cal-obs{ display:-webkit-box !important; }
  .cal-obs{ display:block !important; }
  .cal-cell .cal-markers{ position:absolute; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* =============================
   Prayers and Confession
   ============================= */
:root.dateless .day-nav{ display:none; }
:root.dateless .bar-inner{ grid-template-columns:1fr auto; }
:root.dateless #todayBtn{ display:none !important; }
:root.dateless #wordmark{ display:inline !important; }

.prayer-list .hour-row{ grid-template-columns:1fr auto; grid-template-areas:"name chev" "latin chev"; }
.prayer-list .hour-latin{ font-family:var(--sans); font-style:normal; }

.privacy-note svg{ stroke:var(--muted); }
.guide-text{ margin:0.75rem 0 0; font-size:1rem; line-height:1.65; color:var(--soft); }

.exam-section{ margin-top:2rem; }
.exam-heading{ margin:0; font-family:var(--serif); font-size:1.25rem; font-weight:500; }
.exam-commandment{ margin:0.3rem 0 0; font-family:var(--serif); font-style:italic; color:var(--muted); }
.exam-questions{ display:grid; gap:0.25rem; margin-top:0.75rem; }
.exam-q{
  display:flex;
  align-items:flex-start;
  gap:0.8rem;
  width:100%;
  padding:0.65rem 0.75rem 0.65rem 0.5rem;
  border-radius:10px;
  text-align:left;
  font-family:var(--serif);
  font-size:var(--reading-size);
  line-height:1.5;
  color:var(--text);
  transition:background .12s ease;
}
.exam-q:hover{ background:var(--fill); }
.exam-q.on{ background:var(--fill); }
.exam-check{
  flex:none;
  width:1.2rem;
  height:1.2rem;
  margin-top:0.25em;
  border-radius:50%;
  border:1.5px solid var(--muted);
  transition:background .12s ease, border-color .12s ease;
}
.exam-q.on .exam-check{
  border-color:var(--accent);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.prayer-body{ margin-top:0; }
.novena-heading{ margin-top:2.5rem; }
.novena-days{ display:grid; grid-template-columns:repeat(9, minmax(0, 2.6rem)); gap:0.4rem; margin-top:1.5rem; }
.novena-day{
  aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid var(--hairline);
  font-size:0.875rem;
  font-weight:600;
  color:var(--muted);
}
.novena-day.today{ border-color:var(--text); color:var(--text); }
.novena-day.on{ background:var(--text); border-color:var(--text); color:var(--bg); }
.novena-hint{ margin:0.6rem 0 0; font-size:0.8125rem; }
.rubric-line{ color:var(--rubric); font-style:italic; }
.prayer .line.rubric-line{ margin-top:0.2em; }
.line.stanza-break{ height:0.5em; margin:0; }
.novena-note{ margin:0.4rem 0 0; font-size:0.8125rem; }
.novena-source{ margin-top:2.5rem; font-size:0.8125rem; }
.novena-day-nav{ display:flex; align-items:center; gap:0.5rem; }
.novena-day-nav .prayer-name{ flex:1; margin:0; text-align:center; }
.novena-day-label{ display:block; font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-top:0.2rem; }
.novena-step{ width:2.25rem; height:2.25rem; border-radius:50%; display:grid; place-items:center; color:var(--text); }
.novena-step:disabled{ opacity:0.25; }
.novena-step svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.novena-daily .prayer-body{ margin-top:0.75rem; }
.inline-crumbs{ margin:0 0 1.5rem; }
.cal-novenas{ margin-top:1.5rem; }
.cal-novenas a{ color:var(--text); text-underline-offset:2px; }
.station-vr{ margin-top:1rem; }
.station-vr .line{ margin-bottom:0.2em; }
.station-consider{
  margin:1.25rem 0 1rem;
  padding-left:1rem;
  border-left:2px solid var(--accent);
  font-family:var(--serif);
  font-style:italic;
  font-size:var(--reading-size);
  line-height:1.7;
  color:var(--soft);
}
.refrain{
  margin:1.25rem 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:0.9375rem;
  line-height:1.6;
  color:var(--muted);
}
.basics{ margin-top:1rem; }
.basics .prayer-name{ font-size:0.9375rem; font-weight:500; color:var(--soft); }
.basics[open] > .text{ margin-top:0.5rem; }
.station-jumps .alt{ min-width:2.6rem; }
.prayer-body .line{ padding-left:0; text-indent:0; }
.angelus-note{ margin-top:2.5rem; font-size:0.9375rem; }
.jump-chips .alt.active{ background:var(--fill); border-color:var(--fill); color:var(--text); }
.prayer-group .prayer{ margin-top:1rem; }
.prayer-group .prayer[open] > .text{ margin:0.6rem 0 0.5rem; }
.prayer-group .prayer .line{ padding-left:0; text-indent:0; }
.reading-label .now{ margin-left:0.5rem; vertical-align:1px; }

.care-note{
  margin:0.75rem 0 0;
  padding:0.75rem 1rem;
  border-radius:10px;
  background:var(--fill);
  font-size:0.875rem;
  line-height:1.55;
  color:var(--soft);
}
.marked-heading{ margin:1.25rem 0 0.25rem; font-size:0.8125rem; font-weight:600; color:var(--muted); }
.marked{ margin:0; padding-left:1.2rem; font-family:var(--serif); font-size:var(--reading-size); line-height:1.6; }
.marked + .pill, .marked ~ .pill{ margin-top:1.25rem; }
.steps{ margin:0.75rem 0 0; padding-left:1.4rem; display:grid; gap:0.75rem; font-size:1rem; line-height:1.6; color:var(--soft); }
.steps strong{ color:var(--text); font-weight:600; }

.exam-counter{
  position:fixed;
  left:50%;
  bottom:calc(1.5rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:9;
  padding:0.65rem 1.1rem;
  border-radius:999px;
  background:var(--text);
  color:var(--bg);
  font-size:0.875rem;
  font-weight:500;
  box-shadow:var(--shadow);
  white-space:nowrap;
}

/* =============================
   Saints
   ============================= */
.cal-toolbar #calSaints{ margin-left:auto; text-decoration:none; }
.saint-feasts{ margin-top:1.25rem; display:grid; gap:0.35rem; font-size:0.9375rem; }
.saint-feasts p{ margin:0; }
.saints-search{ margin-top:2rem; }
.saints-search input{
  width:100%;
  padding:0.75rem 1rem;
  border:1px solid var(--hairline);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  font:inherit;
  font-size:1rem;
}
.saints-search input:focus{ outline:none; border-color:var(--text); }
.saints-tabs{ margin-top:1rem; }
#saintsBody{ margin-top:1.5rem; }

.martyrology-title{ margin:0 0 0.5rem; font-family:var(--serif); font-style:italic; color:var(--muted); }
.saint{ padding:1.25rem 0; border-top:1px solid var(--hairline); scroll-margin-top:5rem; }
.saint.highlight{ background:linear-gradient(90deg, var(--fill), transparent); margin:0 -0.75rem; padding:1.25rem 0.75rem; border-radius:8px; }
.saint-name{ margin:0 0 0.4rem; font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.saint-place{ margin-left:0.6rem; font-family:var(--sans); font-size:0.8125rem; font-weight:400; color:var(--muted); }
.saint-text{ margin:0; font-family:var(--serif); font-size:var(--reading-size); line-height:1.65; color:var(--soft); }
.saint-more{ display:inline-block; margin-top:0.5rem; font-size:0.8125rem; color:var(--muted); text-underline-offset:2px; }
.saint-links{ display:flex; gap:1rem; flex-wrap:wrap; }
.saint-life{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.lives{ margin:0 0 2.5rem; }
.life{ border-bottom:1px solid var(--hairline); padding:0.9rem 0; }
.life summary{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; cursor:pointer; list-style:none; }
.life summary::-webkit-details-marker{ display:none; }
.life-title{ font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.life-open{ flex:none; font-size:0.8125rem; color:var(--muted); }
.life[open] .life-open{ visibility:hidden; }
.life-body{ margin-top:0.75rem; font-family:var(--serif); font-size:var(--reading-size); line-height:1.7; }
.life-body p{ margin:0 0 1em; }
.life-reflection{ font-style:italic; color:var(--soft); }
.life-reflection span{ font-style:normal; font-weight:600; color:var(--text); }
.life-source{ margin-top:0.9rem; font-size:0.8125rem; font-family:var(--sans); }
.life-source a{ color:inherit; text-underline-offset:2px; }

.letters{ display:flex; flex-wrap:wrap; gap:0.3rem; }
.letter{
  min-width:2.1rem;
  height:2.1rem;
  border-radius:8px;
  font-size:0.875rem;
  font-weight:500;
  color:var(--muted);
  background:var(--fill);
}
.letter.active{ background:var(--text); color:var(--bg); }
.index-count{ margin:1rem 0 0.5rem; font-size:0.8125rem; }
.saint-list{ border-top:1px solid var(--hairline); }
.saint-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:0.75rem 0.25rem;
  border-bottom:1px solid var(--hairline);
  color:var(--text);
  text-decoration:none;
}
.saint-row:hover{ background:var(--fill); }
.saint-row-name{ font-family:var(--serif); font-size:1.05rem; }
.saint-row-meta{ flex:none; font-size:0.8125rem; color:var(--muted); text-align:right; }
@media (max-width:40rem){
  .saint-row{ flex-direction:column; gap:0.15rem; }
  .saint-row-meta{ text-align:left; }
}

/* =============================
   Bible
   ============================= */
.bible-goto{ display:flex; gap:0.5rem; margin-top:1.5rem; }
.bible-goto input{
  flex:1;
  min-width:0;
  padding:0.7rem 1rem;
  border:1px solid var(--hairline);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  font:inherit;
  font-size:1rem;
}
.bible-goto input:focus{ outline:none; border-color:var(--text); }
.bible-goto .pill{ padding:0.5rem 1.1rem; }
.goto-error{ margin:0.6rem 0 0; font-size:0.875rem; color:var(--rubric); }
.continue{ margin:1rem 0 0; }
.continue .pill{ text-decoration:none; display:inline-block; }
.testament{
  margin:2.5rem 0 0;
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
}
.bible-section{
  margin:1.5rem 0 0.6rem;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr)); gap:0.4rem; }
.book{
  display:grid;
  gap:0.1rem;
  padding:0.6rem 0.75rem;
  border-radius:10px;
  background:var(--fill);
  color:var(--text);
  text-decoration:none;
  transition:background .12s ease;
}
.book:hover{ background:var(--hairline); }
.book-name{ font-family:var(--serif); font-size:1rem; }
.book-alt{ font-size:0.6875rem; color:var(--muted); }
.chapter-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(3.1rem, 1fr)); gap:0.4rem; }
.chapter-btn{
  display:grid;
  place-items:center;
  height:3.1rem;
  border-radius:10px;
  background:var(--fill);
  color:var(--text);
  font-weight:500;
  text-decoration:none;
}
.chapter-btn:hover{ background:var(--hairline); }
.bible-text p{ margin:0; }
.bverse.highlight, .pair.highlight{ background:var(--fill); border-radius:4px; box-shadow:0 0 0 4px var(--fill); }
.citation-link{ color:inherit; text-decoration:underline; text-decoration-color:var(--hairline); text-underline-offset:4px; }
.citation-link:hover{ text-decoration-color:var(--muted); }

/* =============================
   Phone tab bar
   ============================= */
.tabbar{ display:none; }
@media (max-width:40rem){
  .view-switch{ display:none; }
  .tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:10;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    padding:0.35rem max(0.25rem, env(safe-area-inset-left)) calc(0.35rem + env(safe-area-inset-bottom)) max(0.25rem, env(safe-area-inset-right));
    background:var(--bar-bg);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--hairline);
  }
  .tabbar a{
    display:grid;
    justify-items:center;
    gap:0.15rem;
    padding:0.35rem 0;
    color:var(--muted);
    text-decoration:none;
    font-size:0.625rem;
    font-weight:500;
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar a[aria-current]{ color:var(--text); }
  .tabbar svg .beads{ stroke-width:2.6; }
  .tabbar svg{ width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .page{ padding-bottom:calc(6rem + env(safe-area-inset-bottom)); }
  .page > .view-switch + *{ margin-top:0; }
  .exam-counter{ bottom:calc(5rem + env(safe-area-inset-bottom)); }
}
@media print{ .tabbar, .exam-counter{ display:none !important; } }

/* =============================
   Footer
   ============================= */
.credits{
  margin-top:clamp(4rem, 10vw, 6rem);
  padding-top:1.5rem;
  border-top:1px solid var(--hairline);
  font-size:0.75rem;
  line-height:1.6;
  color:var(--muted);
}
.credits p{ margin:0 0 0.5rem; }
.credits:empty{ display:none; }
.credits a{ color:inherit; text-underline-offset:2px; }

/* =============================
   Small screens
   ============================= */
@media (max-width:40rem){
  .bar-inner{ height:3.5rem; gap:0.25rem; }
  .date-long{ display:none; }
  .date-short{ display:inline; }
  .date-btn{ padding:0.45rem 0.5rem; }
  .wordmark{ display:none; }
}
@media (max-width:30rem){
  .hour-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"name chev" "latin chev" "time chev";
  }
  .hour-latin{ display:inline; }
  .view-switch a{ padding:0.45rem 0.9rem; }
}
@media (max-width:22rem){
  .icon-btn{ width:2.25rem; height:2.25rem; }
  .date-btn{ font-size:0.875rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

@media print{
  .bar, .mass-picker, .alternatives, .missal-switch{ display:none; }
  .page{ padding-top:0; }
}
.pager-latin{ font-style:italic; font-size:0.85em; color:var(--muted); font-weight:400; margin-left:0.2rem; }

/* The Catechism */
.cat-search{ margin-top:1.5rem; }
.cat-count{ font-size:0.8125rem; margin:1.25rem 0 0.5rem; }
.cat-qa{ padding:1.1rem 0; border-bottom:1px solid var(--hairline); scroll-margin-top:5rem; }
.cat-qa.cat-target{ background:var(--fill); margin:0 -0.75rem; padding-left:0.75rem; padding-right:0.75rem; border-radius:0.6rem; }
.cat-q{ display:flex; gap:0.6rem; margin:0; font-family:var(--sans); font-weight:600; font-size:1rem; line-height:1.45; }
.cat-n{ flex:none; min-width:2.2rem; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums; }
.cat-n a{ color:inherit; text-decoration:none; }
.cat-a{ margin:0.45rem 0 0 2.8rem; font-family:var(--serif); font-size:1.0625rem; line-height:1.6; }
.cat-a p{ margin:0 0 0.4em; }
.cat-from{ font-size:0.75rem; margin:0.35rem 0 0 2.8rem; }
.cat-items{ margin:0.5rem 0 0; padding-left:1.4rem; font-family:var(--serif); font-size:1.0625rem; line-height:1.55; }
.cat-items li{ margin:0 0 0.45rem; padding-left:0.2rem; }
.cat-items.single{ list-style:none; padding-left:0; font-size:1.2rem; font-style:italic; }
.cat-item{ display:block; }
.cat-detail{ display:block; font-family:var(--sans); font-size:0.875rem; color:var(--soft); line-height:1.5; margin-top:0.15rem; }
.cat-list{ margin-top:2.25rem; scroll-margin-top:5rem; }
.cat-intro{ margin:0.5rem 0 0; color:var(--soft); font-size:0.9375rem; line-height:1.55; }
.cat-source{ font-size:0.75rem; margin:0.6rem 0 0; }
.cat-source a{ color:inherit; }
.cat-jump{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:1.5rem; }
.cat-jump a{ font-family:var(--sans); font-size:0.8125rem; padding:0.3rem 0.7rem; border-radius:999px; background:var(--fill);
  color:var(--text); text-decoration:none; }
.cat-jump a:hover{ background:var(--hairline); }
.cat-pairs{ display:grid; grid-template-columns:1fr 1fr; gap:0.35rem 1rem; margin-top:0.6rem; font-family:var(--serif);
  font-size:1.0625rem; }
.cat-pair-head{ font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); }
.read-switch{ grid-template-columns:repeat(3, 1fr); }
@media (max-width: 30rem){ .read-switch .missal-detail{ display:none; } }

/* Devotions */
.litany{ scroll-margin-top:5rem; }
.consecration-feast{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-top:1.25rem; font-family:var(--sans);
  font-size:0.9375rem; color:var(--soft); }
.consecration-feast select{ font:inherit; color:var(--text); background:var(--fill); border:1px solid var(--hairline);
  border-radius:0.6rem; padding:0.4rem 0.6rem; max-width:100%; }
.consecration-nav{ margin-bottom:1rem; }
.consecration-reading{ margin-top:0.5rem; }
.guide-list{ margin:0.5rem 0 1rem; padding-left:1.25rem; color:var(--soft); line-height:1.6; }
.guide-list li{ margin-bottom:0.4rem; }
.office-switch{ margin-bottom:1.75rem; }

/* The Examen, a rule of life, mental prayer, the liturgical year */
.rule-list{ display:flex; flex-direction:column; gap:0.35rem; margin:1rem 0 1.25rem; }
.rule-item{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0.75rem; padding:0.7rem 0.85rem;
  border:1px solid var(--hairline); border-radius:0.8rem; cursor:pointer; }
.rule-item.on{ background:var(--fill); }
.rule-item input{ width:1.2rem; height:1.2rem; accent-color:var(--accent, var(--text)); }
.rule-name{ display:flex; flex-direction:column; font-family:var(--serif); font-size:1.0625rem; }
.rule-item.on .rule-name{ color:var(--muted); text-decoration:line-through; text-decoration-color:var(--hairline); }
.rule-when{ font-family:var(--sans); font-size:0.8125rem; color:var(--muted); }
.rule-open{ color:var(--muted); display:flex; }
.rule-open .chev{ width:1.1rem; height:1.1rem; }
.rule-week{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:0.8125rem; margin:0.5rem 0 1rem; }
.rule-week th{ font-weight:500; color:var(--muted); text-align:center; padding:0.3rem 0.15rem; }
.rule-week th[scope=row]{ text-align:left; color:var(--soft); font-weight:400; padding-right:0.5rem; }
.rule-week td{ text-align:center; padding:0.3rem 0.15rem; }
.rule-dot{ display:inline-block; width:0.6rem; height:0.6rem; border-radius:50%; background:var(--accent, var(--text)); }
.rule-dot.off{ background:transparent; border:1px solid var(--hairline); }
.rule-edit{ display:flex; flex-direction:column; gap:0.5rem; margin:0.75rem 0; }
.rule-choice{ display:flex; gap:0.6rem; align-items:baseline; font-size:0.9375rem; }
.rule-add{ display:flex; gap:0.5rem; margin:0.75rem 0; }
.rule-add input, .pe-subject input{ flex:1; font:inherit; color:var(--text); background:var(--fill); border:1px solid var(--hairline);
  border-radius:0.6rem; padding:0.5rem 0.7rem; min-width:0; }
.examen-points{ padding-left:1.25rem; margin:1rem 0; }
.examen-points li{ margin-bottom:1rem; }
.examen-points .prayer-name{ margin:0 0 0.25rem; }
.examen-ignatius{ margin:0 0 0.35rem; font-family:var(--serif); font-style:italic; color:var(--soft); }
.pe-subject{ display:flex; flex-direction:column; gap:0.4rem; font-family:var(--sans); font-size:0.875rem; color:var(--soft); margin:1rem 0; }
.pe-counts{ display:flex; flex-wrap:wrap; gap:1.5rem; margin:0.5rem 0 1rem; }
.pe-count{ display:flex; align-items:center; gap:0.6rem; font-family:var(--sans); }
.pe-label{ font-size:0.875rem; color:var(--soft); min-width:5.5rem; }
.pe-n{ font-size:1.5rem; font-variant-numeric:tabular-nums; min-width:1.5rem; text-align:center; }
.pe-chart{ display:grid; grid-template-columns:repeat(14, 1fr); gap:0.25rem; height:6rem; align-items:end; margin:0.5rem 0; }
.pe-day{ position:relative; display:flex; gap:1px; align-items:flex-end; height:100%; padding-bottom:1.1rem; }
.pe-bar{ flex:1; background:var(--muted); border-radius:2px 2px 0 0; min-height:1px; }
.pe-bar.second{ background:var(--accent, var(--text)); }
.pe-d{ position:absolute; bottom:0; left:0; right:0; text-align:center; font-family:var(--sans); font-size:0.625rem; color:var(--muted); }
.lib-inline .lib-text{ margin-top:0.5rem; }
.meditation-title{ font-size:1.6rem; margin:0.25rem 0 1rem; }
.season.season-current{ border-left:3px solid var(--accent, var(--text)); padding-left:1rem; }
.season-when{ margin:-0.25rem 0 0.5rem; font-size:0.875rem; }
.season-customs{ padding-left:1.2rem; color:var(--soft); line-height:1.6; }
.season-customs li{ margin-bottom:0.45rem; }
.season-customs a{ color:var(--text); }
.season-reading{ display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; font-size:0.875rem; }
.season-table{ margin:0.75rem 0; }
.season-table div{ display:grid; grid-template-columns:7rem 1fr; gap:0.75rem; padding:0.45rem 0; border-bottom:1px solid var(--hairline); }
.season-table div.on{ font-weight:600; }
.season-table dt{ color:var(--muted); font-family:var(--sans); font-size:0.875rem; }
.season-table dd{ margin:0; }
.cat-jump a.on{ background:var(--accent, var(--text)); color:var(--bg); }

/* Search */
a.icon-btn{ display:inline-flex; align-items:center; justify-content:center; color:inherit; }
.icon-btn svg circle, .icon-btn svg path{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.search-form{ margin:1.25rem 0 1rem; }
.search-kinds button{ font-family:var(--sans); font-size:0.8125rem; padding:0.3rem 0.7rem; border-radius:999px;
  background:var(--fill); color:var(--text); border:0; cursor:pointer; }
.search-kinds button.on{ background:var(--text); color:var(--bg); }
.search-kinds button.on .muted{ color:inherit; opacity:0.7; }
.search-results{ list-style:none; padding:0; margin:1rem 0; }
.search-result a{ display:flex; flex-direction:column; gap:0.15rem; padding:0.85rem 0; border-bottom:1px solid var(--hairline);
  color:var(--text); text-decoration:none; }
.search-result a:hover .search-title{ text-decoration:underline; }
.search-kind{ font-family:var(--sans); font-size:0.6875rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.search-title{ font-family:var(--serif); font-size:1.125rem; line-height:1.35; }
.search-sub{ font-family:var(--sans); font-size:0.8125rem; color:var(--muted); }
.search-lead{ font-size:0.9375rem; color:var(--soft); line-height:1.5; }
.search-lead:empty{ display:none; }
.search-result mark{ background:none; color:inherit; font-weight:700; }
.search-more{ font-size:0.8125rem; }

/* Home */
.home-head{ text-align:center; margin:0.5rem 0 2.25rem; }
.home-date{ font-family:var(--sans); font-size:0.8125rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin:0 0 0.75rem; }
.home-feast{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem, 5vw, 2.6rem); line-height:1.15; margin:0 auto; max-width:30rem; text-wrap:balance; }
.home-season{ display:inline-flex; align-items:center; gap:0.5rem; margin:0.9rem 0 0; font-family:var(--sans); font-size:0.875rem; color:var(--soft); }
.home-season .dot{ width:0.55rem; height:0.55rem; border-radius:50%; background:var(--accent, var(--muted)); }
.home-today{ border-top:1px solid var(--hairline); margin-bottom:2.75rem; }
.today-row{ display:grid; grid-template-columns:8.5rem 1fr auto; align-items:baseline; gap:1rem; padding:1rem 0.25rem;
  border-bottom:1px solid var(--hairline); color:var(--text); text-decoration:none; }
.today-row:hover{ background:var(--fill); }
.today-row .chev{ width:1rem; height:1rem; color:var(--muted); align-self:center; }
.today-label{ font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.today-title{ font-family:var(--serif); font-size:1.15rem; line-height:1.35; }
.today-note{ color:color-mix(in srgb, var(--accent, var(--muted)) 40%, var(--text)); font-size:0.95rem; }  /* the season's color, readable on either theme */
.home-groups{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2.25rem 2.5rem; }
.home-group-name{ font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 0.6rem; padding-bottom:0.5rem; border-bottom:1px solid var(--hairline); }
.home-group ul{ list-style:none; margin:0; padding:0; }
.home-group a{ display:flex; flex-direction:column; padding:0.55rem 0; color:var(--text); text-decoration:none; }
.home-group a:hover .home-link{ text-decoration:underline; text-decoration-color:var(--hairline); text-underline-offset:0.2em; }
.home-link{ font-family:var(--serif); font-size:1.125rem; }
.home-detail{ font-family:var(--sans); font-size:0.8125rem; color:var(--muted); margin-top:0.1rem; }
.home-search{ margin:2.75rem 0 0; }
.home-search input{ width:100%; font:inherit; font-family:var(--sans); font-size:0.9375rem; color:var(--text); background:var(--fill);
  border:1px solid var(--hairline); border-radius:0.8rem; padding:0.75rem 1rem; }
@media (max-width: 34rem){
  .home-groups{ grid-template-columns:1fr; gap:1.75rem; }
  .today-row{ grid-template-columns:1fr auto; gap:0.2rem 0.75rem; }
  .today-label{ grid-column:1; }
  .today-title{ grid-column:1; }
  .today-row .chev{ grid-column:2; grid-row:1 / span 2; }
}
a.wordmark{ color:inherit; text-decoration:none; }

/* About, and the footer on every page */
.about-text p{ margin:0 0 1.1em; font-size:1.0625rem; line-height:1.7; }
.about-sources{ font-size:0.8125rem; line-height:1.6; }
.site-footer{ display:flex; justify-content:center; gap:0.6rem; margin:2rem 0 1rem; font-family:var(--sans); font-size:0.8125rem; color:var(--muted); }
.site-footer a{ color:var(--muted); text-decoration:none; }
.site-footer a:hover{ color:var(--text); }
.today-row .chev{ grid-area:auto; grid-column:3; grid-row:1; }
@media (max-width: 34rem){ .today-row .chev{ grid-column:2; grid-row:1 / span 2; } }

/* The Mass explained, and the Catena Aurea */
.mass-part{ scroll-margin-top:5rem; }
.mass-part-n{ display:inline-block; min-width:1.6rem; color:var(--accent, var(--muted)); }
.missal-words .office-body{ margin-top:0.6rem; }
details.catena{ margin:1.25rem 0 0; border:1px solid var(--hairline); border-radius:0.8rem; padding:0.75rem 1rem; }
details.catena summary{ cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:0.2rem 0.6rem; list-style:none; }
details.catena summary::-webkit-details-marker{ display:none; }
details.catena summary::before{ content:"▸"; color:var(--muted); font-size:0.8rem; }
details.catena[open] summary::before{ content:"▾"; }
.catena-name{ font-family:var(--serif); font-size:1.0625rem; }
.catena-sub{ font-family:var(--sans); font-size:0.75rem; color:var(--muted); }
.catena-body{ margin-top:0.75rem; }
.catena-section{ padding:0.75rem 0; border-top:1px solid var(--hairline); }
.catena-verses{ font-family:var(--serif); font-style:italic; color:var(--soft); margin:0 0 0.6rem; line-height:1.55; }
.catena-ref{ font-family:var(--sans); font-style:normal; font-size:0.75rem; font-weight:600; letter-spacing:0.04em; color:var(--muted); margin-right:0.35rem; }
.catena-comment{ margin:0 0 0.6rem; font-family:var(--serif); font-size:1rem; line-height:1.6; }
.catena-author{ font-family:var(--sans); font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent, var(--text)); margin-right:0.3rem; }

/* My Page, and the star that adds to it */
.fav-btn svg path{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.fav-btn.on{ color:var(--accent, #b8860b); }
.fav-btn.on svg path{ fill:currentColor; }
.toast{ position:fixed; left:50%; bottom:calc(5.5rem + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(1rem);
  background:var(--text); color:var(--bg); font-family:var(--sans); font-size:0.875rem; padding:0.55rem 1rem; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s; z-index:50; }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.my-group{ margin-bottom:1.5rem; }
.my-edit-row{ grid-template-columns:1fr auto; }
.my-edit-actions{ display:flex; gap:0.35rem; }
.my-actions{ margin-top:1rem; }
.star-inline{ font-size:1.1em; }
.home-mine{ margin-bottom:2.5rem; }
.home-mine-head{ display:flex; justify-content:space-between; align-items:baseline; }
.home-mine-head a{ font-family:var(--sans); font-size:0.8125rem; text-decoration:none; }
.home-mine .my-group .reading-label{ margin-top:1rem; }
.home-explore{ font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1rem; }
.my-group .reading-label{ margin:1.25rem 0 0.25rem; }
.my-group .hours{ margin-top:0; }
.my-group .hours .hour-row:first-child{ border-top:0; }
.home-mine-head a{ color:var(--muted); }
.home-mine-head a:hover{ color:var(--text); }
.my-group:first-of-type .reading-label{ margin-top:0.5rem; }

/* Bible study mode: each verse with Haydock's note beside it (below it, when tapped, on narrow screens) */
.study-switch{ display:inline-flex; gap:0.25rem; padding:0.2rem; margin:0.9rem 0 0; border-radius:999px; background:var(--fill); }
.study-switch button{ font:500 0.8rem/1 var(--sans); color:var(--muted); background:none; border:0; border-radius:999px;
  padding:0.45rem 0.85rem; cursor:pointer; }
.study-switch button[aria-pressed="true"]{ background:var(--raised); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.study{ display:grid; }
.srow{ display:grid; grid-template-columns:minmax(0,1fr); padding:0.35rem 0; border-radius:6px; }
.sverse{ margin:0; }
.study-latin{ display:block; color:var(--soft); font-style:italic; margin-top:0.2rem; }
.note-mark{ font:600 0.62rem/1 var(--sans); letter-spacing:0.06em; text-transform:uppercase; color:var(--rubric);
  background:none; border:1px solid currentColor; border-radius:999px; padding:0.18rem 0.42rem; margin-left:0.45rem;
  vertical-align:0.2em; cursor:pointer; opacity:0.8; }
.note-mark:hover{ opacity:1; }
.hay-note{ font:0.9rem/1.55 var(--sans); color:var(--soft); }
.hay-note p{ margin:0 0 0.55rem; }
.hay-src{ color:var(--muted); font-size:0.8em; white-space:nowrap; }
.hay-range{ font-weight:600; color:var(--muted); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }
.hay-more summary, .study-intro summary{ cursor:pointer; color:var(--muted); font:500 0.78rem/1.4 var(--sans); margin:0.2rem 0 0.4rem; }
.hay-more{ font-size:0.95em; }
.snote{ display:none; margin:0.5rem 0 0.4rem; padding:0.75rem 0.9rem; background:var(--fill); border-radius:8px; }
.srow.open .snote{ display:block; }
.srow.open .note-mark{ background:var(--rubric); color:var(--bg); border-color:var(--rubric); opacity:1; }
.study-intro{ margin:0 0 1rem; }
.study-intro .hay-note{ padding:0.25rem 0 0.5rem; }
.study-argument{ margin:0 0 1.2rem; padding:0 0 1rem; border-bottom:1px solid var(--hairline); }
.study-argument p:first-child{ font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--text); }
.study-none{ margin:0 0 1rem; }
.study-credit{ font-size:0.8rem; margin-top:1.5rem; }
.srow.highlight{ background:var(--fill); }

@media (min-width:70rem){
  :root.study-wide .page{ max-width:calc(68rem + 2 * var(--gutter)); }
  .srow{ grid-template-columns:minmax(0,38rem) minmax(0,1fr); column-gap:2.5rem; padding:0.5rem 0; }
  .srow + .srow{ border-top:1px solid var(--hairline); }
  .note-mark{ display:none; }
  .snote{ display:block; margin:0.15rem 0 0; padding:0; background:none; border-radius:0;
    max-height:9.5rem; overflow:hidden; position:relative; cursor:pointer; }
  .snote::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2.2rem;
    background:linear-gradient(transparent, var(--bg)); pointer-events:none; }
  .snote.expanded{ max-height:none; cursor:auto; }
  .snote.expanded::after{ display:none; }
  .study-intro, .study-argument{ max-width:38rem; }
}

/* The "not found" page */
.notfound-search{ display:flex; gap:0.5rem; margin:1.25rem 0 1.5rem; }
.notfound-search input{ flex:1; min-width:0; font:inherit; font-size:1rem; padding:0.6rem 0.8rem; border-radius:8px;
  border:1px solid var(--hairline); background:var(--raised); color:var(--text); }
.notfound-search button{ font:500 0.9rem var(--sans); padding:0.6rem 1rem; border-radius:8px; border:0; cursor:pointer;
  background:var(--text); color:var(--bg); }
.notfound-links{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.notfound-links a{ font:500 0.85rem var(--sans); padding:0.45rem 0.85rem; border-radius:999px; background:var(--fill);
  color:var(--text); text-decoration:none; }

/* About: corrections and privacy */
.about-section{ margin-top:2rem; }
.about-publisher{ margin-top:1.25rem; }

/* Home: the mark, the day's prayer and the motto */
.home-mark{ width:2.1rem; height:2.1rem; display:block; margin:0 auto 1rem; fill:none; stroke:var(--text);
  stroke-width:3.4; stroke-linecap:round; }
.home-mark .home-mark-way{ stroke:var(--rubric); stroke-width:2.4; }
.home-prayer{ margin:1.75rem auto 2.25rem; max-width:34rem; text-align:center; padding-top:1.5rem; position:relative; }
.home-prayer::before{ content:""; position:absolute; top:0; left:50%; width:2.5rem; margin-left:-1.25rem; height:2px;
  background:var(--accent, var(--muted)); border-radius:2px; }
.home-prayer figcaption{ font:600 0.68rem/1 var(--sans); letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.home-prayer blockquote{ margin:0.85rem 0 0.75rem; font:italic 400 1.18rem/1.6 var(--serif); color:var(--text); text-wrap:pretty; }
.home-prayer-src{ font:0.78rem var(--sans); color:var(--muted); text-decoration:none; }
.home-prayer-src:hover{ text-decoration:underline; }
.home-motto{ text-align:center; margin:2.5rem auto 0.5rem; font:italic 0.95rem/1.5 var(--serif); color:var(--soft); }
.home-motto span{ font:normal 0.75rem var(--sans); color:var(--muted); margin-left:0.35rem; white-space:nowrap; }
.about-motto{ font:italic 1.05rem/1.5 var(--serif); color:var(--soft); margin:-0.25rem 0 1.5rem; }
.about-motto .muted{ display:block; font:normal 0.8rem var(--sans); margin-top:0.2rem; }
.contact-email{ font:500 1.05rem var(--sans); margin-top:1.25rem; }
.contact-email a{ color:var(--text); text-decoration-color:var(--muted); text-underline-offset:3px; }
.about-close{ font:italic 1.05rem/1.5 var(--serif); color:var(--soft); text-align:center; margin:2.25rem 0 0.5rem; }

/* The star beside a single prayer's name */
.pstar{ display:inline-flex; vertical-align:-0.15em; margin-left:0.45rem; padding:0.15rem; border:0; background:none;
  color:var(--muted); cursor:pointer; border-radius:6px; opacity:0.55; transition:opacity .15s; }
.pstar svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.prayer:hover .pstar, .litany:hover .pstar, .pstar:focus-visible, .pstar.on{ opacity:1; }
.pstar.on{ color:var(--rubric); }
.pstar.on svg{ fill:currentColor; }
@media (hover:none){ .pstar{ opacity:0.8; } }
.my-prayer .my-prayer-body{ padding-top:0.25rem; }
.my-prayer-open{ font:0.8rem var(--sans); margin:0.5rem 0 0.75rem; }
.my-prayer-open a{ color:var(--muted); }
[id^="p-"]{ scroll-margin-top:5rem; }  /* a linked prayer clears the sticky header */
.pstar-wrap{ position:relative; }
.pstar-wrap > .pstar{ position:absolute; right:0; top:0.55rem; margin:0; z-index:1; }
.pstar-wrap > details > summary, .pstar-wrap > .prayer > summary{ padding-right:2.25rem; }