/* ============================================================
   /prayers — the page as a book of hours, and the prayer-book builder.

   Loaded by prayers.html alone. The classes it restyles (.prayer-card,
   .prayer-title, .prayer-text, .prayer-note, .prayer-verse) are shared with
   a dozen other pages, so every rule here is held under .pb, the class on
   this page's .prayers-body, or names a pb- class only this page carries.
   Colours are the tokens in styles.css; nothing new.

   Contrast. --gold is 3.6:1 on --paper, below AA for small type, so it is
   used here only where the type is large or decorative (drop caps, section
   numerals, ornaments, the checkbox square) and --gold-deep (5.1:1) carries
   the small type that means something: the ℣/℟ marks, the incipits, the
   rubrics, the current section in the index.
   ============================================================ */

/* Anchors clear the sticky nav, and below 1080px the Contents bar too. */
html{scroll-padding-top:calc(var(--nav-h) + 24px);}
@media(max-width:1079px){html{scroll-padding-top:calc(var(--nav-h) + 72px);}}

.pb{padding:28px 0 48px;}
.pb :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.pb-layout{max-width:var(--wide);margin:0 auto;padding:0 20px;}
@media(min-width:641px){.pb-layout{padding:0 32px;}}

/* The prayers sit on a white leaf, like the page of a missal laid on the
   parchment. The leaf is the 560px measure plus its own margins, so the
   text keeps its width; on a phone it runs edge to edge instead. */
.pb-main{
  max-width:656px;margin:0 auto;counter-reset:pb-sec;min-width:0;
  padding:8px 48px 56px;background:#fff;border:1px solid var(--rule);
}
@media(max-width:640px){
  .pb-main{margin:0 -20px;padding:4px 20px 40px;border-left:0;border-right:0;}
}

/* ───────────────── THE INDEX ─────────────────
   Static markup: a plain list at the head of the prayers when scripting is
   off. prayers.js adds .is-enhanced, which turns it into the sticky left
   column on a desktop and the "Contents ▾" bar beneath the nav below 1080px. */
.pb-index{margin:0 0 8px;}
.pb .pb-index-kicker{display:block;margin:0 0 14px;color:var(--gold-deep);font-size:13px;font-weight:700;}
.pb-index-list{list-style:none;margin:0;padding:0;}
.pb-index-list li{border-bottom:1px solid var(--rule);}
.pb-index-list li:last-child{border-bottom:none;}
.pb-index-list a{
  display:block;position:relative;padding:9px 0 9px 16px;
  font-family:var(--display);font-size:13px;letter-spacing:.06em;line-height:1.4;
  color:var(--muted);
}
.pb-index-list a::before{
  content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;
  border:1px solid var(--rule);transform:rotate(45deg);transition:background .2s,border-color .2s;
}
.pb-index-list a:hover{color:var(--gold-deep);}
.pb-index-list a[aria-current="true"]{color:var(--gold-deep);font-weight:600;}
.pb-index-list a[aria-current="true"]::before{background:var(--gold);border-color:var(--gold);}
.pb-index-count{color:var(--muted);font-weight:400;white-space:nowrap;}
.pb-index-devotions{margin:20px 0 0;}
.pb-index-devotions .readmore{font-size:11px;letter-spacing:.14em;line-height:1.6;display:inline;}

/* Language and selection controls, added by prayers.js. */
/* Latin · English · Both: a rounded segmented switch. The three choices sit
   in a parchment track; the one in force is a filled gold-deep pill. */
.pb-lang{
  display:flex;gap:3px;margin:0 0 20px;padding:3px;min-width:0;
  border:1px solid var(--rule);border-radius:999px;background:var(--paper-card);
  box-shadow:inset 0 1px 2px rgba(26,18,11,.06);
}
.pb-lang legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.pb-lang label{flex:1;position:relative;cursor:pointer;min-width:0;}
.pb-lang input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.pb-lang span{
  display:block;text-align:center;padding:9px 6px;border-radius:999px;
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1.2;
  color:var(--muted);transition:background .2s,color .2s,box-shadow .2s;
}
.pb-lang label:hover span{color:var(--gold-deep);background:rgba(201,168,90,.16);}
.pb-lang input:checked + span{
  background:var(--gold-deep);color:var(--paper);
  box-shadow:0 1px 3px rgba(26,18,11,.28);
}
.pb-lang input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){.pb-lang span{transition:none;}}

.pb-index-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:-6px 0 12px;}

/* "Select all · Clear": a small-caps text link, at the head of the index and
   in the builder bar. --gold-deep on the parchment, --champagne on espresso. */
.pb-sclink{
  background:none;border:0;padding:4px 0;min-height:32px;cursor:pointer;
  font-family:var(--body);font-size:16px;font-variant-caps:small-caps;letter-spacing:.06em;line-height:1.2;
  color:var(--gold-deep);
  text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;
}
.pb-sclink:hover{color:var(--ink);text-decoration-color:currentColor;}
.pb-sclink:disabled{color:var(--muted);text-decoration:none;cursor:default;}
.pb-sclink-sep{color:var(--muted);}

/* A button that reads as a quiet text link. */
.pb-textbtn{
  background:none;border:0;padding:6px 0;min-height:32px;cursor:pointer;
  font-family:var(--display);font-size:12px;letter-spacing:.08em;color:var(--gold-deep);
  text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;
}
.pb-textbtn:hover{color:var(--gold);text-decoration-color:currentColor;}
.pb-textbtn:disabled{color:var(--muted);text-decoration:none;cursor:default;}

/* Desktop: a sticky column to the left of a 560px measure. */
@media(min-width:1080px){
  .pb-layout{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:56px;align-items:start;}
  .pb-main{margin:0;}
  /* The index never scrolls as a whole, so "Select all · Clear" and the
     language switch stay in view; only the list of sections scrolls, inside
     the height left to it, and without a scrollbar of its own. A soft fade
     at either end says there is more (.is-more-above / .is-more-below). */
  .pb-index{
    position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;
    max-height:calc(100vh - var(--nav-h) - 48px);display:flex;flex-direction:column;
    padding:44px 4px 16px 0;margin:0;
  }
  .pb-index-panel{display:flex;flex-direction:column;min-height:0;flex:0 1 auto;}
  .pb-index-panel > *{flex:none;}
  .pb-index-panel > nav{display:flex;flex-direction:column;min-height:0;flex:0 1 auto;}
  .pb-index-list{
    min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Room for the links' focus outlines inside the scrolling box. */
    padding:4px;margin:-4px;
  }
  .pb-index-list::-webkit-scrollbar{display:none;}
  .pb-index-list.is-more-below{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent);}
  .pb-index-list.is-more-above{-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px);}
  .pb-index-list.is-more-above.is-more-below{-webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent);}
  .pb-index-toggle{display:none !important;}
}

/* Below 1080px: the "Contents ▾" bar under the nav, opening a sheet. */
@media(max-width:1079px){
  .pb-index{padding:0 0 18px;border-bottom:1px solid var(--rule);margin-bottom:12px;}
  .pb-index.is-enhanced{
    position:sticky;top:var(--nav-h);z-index:45;
    margin:-28px -20px 12px;padding:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
  }
  .pb-index-toggle{
    display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 20px;
    background:none;border:0;cursor:pointer;text-align:left;
    font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--gold-deep);
  }
  .pb-index-toggle[hidden]{display:none;}
  .pb-index-toggle-label{flex:none;}
  .pb-index-toggle[aria-expanded="true"] .pb-index-toggle-label [aria-hidden]{display:inline-block;transform:rotate(180deg);}
  .pb-index-current{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;
    font-family:var(--head);font-style:italic;font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted);
  }
  .pb-index.is-enhanced .pb-index-panel{
    display:none;position:absolute;left:0;right:0;top:100%;
    max-height:calc(100vh - var(--nav-h) - 64px);max-height:calc(100dvh - var(--nav-h) - 64px);
    overflow-y:auto;overscroll-behavior:contain;
    padding:20px 20px 24px;background:var(--paper-card);
    border-bottom:1px solid var(--rule);box-shadow:0 14px 28px rgba(26,18,11,.14);
  }
  .pb-index.is-enhanced.is-open .pb-index-panel{display:block;}
  .pb-index.is-enhanced .pb-index-kicker{display:none;}
}
@media(min-width:641px) and (max-width:1079px){
  .pb-index.is-enhanced{margin-left:-32px;margin-right:-32px;}
  .pb-index-toggle{padding:0 32px;}
  .pb-index.is-enhanced .pb-index-panel{padding:24px 32px 28px;}
}

/* ───────────────── SECTION OPENERS ───────────────── */
.pb-section{counter-increment:pb-sec;}
.pb-opener{text-align:center;margin:72px 0 32px;}
.pb-section:first-child .pb-opener{margin-top:40px;}
.pb .pb-opener .prayer-section-heading{
  font-family:var(--display);font-size:clamp(24px,3vw,32px);font-weight:500;
  letter-spacing:.04em;line-height:1.2;color:var(--ink);text-align:center;margin:0;
}
.pb .pb-opener .prayer-section-heading::before{
  content:counter(pb-sec,upper-roman);
  content:counter(pb-sec,upper-roman) / "";
  display:block;margin:0 0 14px;
  font-size:13px;font-weight:600;letter-spacing:.32em;color:var(--gold);
}
.pb-section-desc{
  font-family:var(--head);font-style:italic;font-size:19px;line-height:1.45;
  color:var(--muted);max-width:32em;margin:12px auto 0;text-wrap:balance;
}
.pb-opener .orn{margin:22px 0 0;}
.pb-opener .pb-textbtn{margin-top:10px;}

/* ───────────────── THE PRAYERS ───────────────── */
.pb .prayer-card{position:relative;margin:0;padding:0;border-bottom:none;}
/* A centred star between prayers, in place of the old full-width rule. */
.pb .prayer-card:has(+ .prayer-card)::after,
.pb .pb-intention:has(+ .prayer-card)::after{
  content:"✦";display:block;text-align:center;
  font-size:24px;line-height:1;color:var(--gold);margin:40px 0;
}

.pb .prayer-title{
  font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:.06em;
  line-height:1.35;color:var(--ink);text-align:left;margin:0;
}
.pb .prayer-title::after{content:"";display:block;width:48px;height:1px;background:var(--champagne);margin-top:12px;}
.pb .prayer-title em{font-style:normal;}

.pb .prayer-card > .prayer-title + :not(.pb-tools){margin-top:18px;}

.pb .prayer-text,
.pb .prayer-verse{
  font-family:var(--body);font-style:normal;font-size:18px;line-height:1.65;
  color:var(--ink);text-align:left;hyphens:manual;max-width:560px;
}
.pb .prayer-text{margin:0 0 14px;}
.pb .prayer-text:last-child{margin-bottom:0;}
.pb .prayer-verse p{margin:0;}
.pb .prayer-verse p.stanza{margin-top:1em;}
/* Litany responses and the Gloria's answering lines sit indented under
   their invocation; "(please bow)" in the Creed is a rubric within a line. */
.pb .prayer-verse p.indent{padding-left:1.6em;}
.pb .rubric-inline{font-size:15px;color:var(--gold-deep);}

/* A quotation that opens or closes a section. */
.pb-epigraph{margin:22px auto 0;max-width:30em;text-align:center;}
.pb-epigraph p{font-family:var(--head);font-style:italic;font-size:19px;line-height:1.45;color:var(--ink);}
.pb-epigraph cite{display:block;margin-top:6px;font-family:var(--display);font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--gold-deep);}
.pb-epigraph-close{margin-top:48px;}
.pb .prayer-verse em{font-style:italic;}
.pb .prayer-text strong,
.pb .prayer-verse strong{font-weight:500;}

/* The incipit, and the closing Amen, in small capitals rather than bold. */
.pb .incipit{font-weight:400;font-variant-caps:small-caps;letter-spacing:.04em;color:var(--gold-deep);}
.pb .amen{font-weight:400;font-variant-caps:small-caps;letter-spacing:.04em;}

/* Rubrics: the italic notes, novena lines and attributions. */
.pb .rubric{
  font-family:var(--body);font-style:italic;font-size:15px;line-height:1.55;
  color:var(--gold-deep);text-align:left;margin:0 0 14px;max-width:560px;
}
.pb .rubric:last-child{margin-bottom:0;}
.pb .prayer-text + .rubric,
.pb .prayer-verse + .rubric{margin-top:14px;}
.pb .rubric strong{font-weight:500;font-style:normal;}

/* ℣. and ℟. in a hanging column. The source keeps "V." and "R." — that is
   what is copied, searched and read aloud — and the response mark is drawn
   over it. */
.pb .dlg{padding-left:1.6em;text-indent:-1.6em;}
.pb .vr{
  display:inline-block;width:1.6em;text-indent:0;position:relative;
  font-weight:400;color:transparent;
}
.pb .vr::after{position:absolute;left:0;top:0;color:var(--gold-deep);font-weight:500;}
.pb .vr-v::after{content:"℣.";content:"℣." / "";}
.pb .vr-r::after{content:"℟.";content:"℟." / "";}

.pb .prayer-list li{font-size:18px;line-height:1.6;}

/* The Holy Father's intention for the month, beneath the Morning Offering that
   names it. A ruled note rather than a prayer: it is an aside, not a
   .prayer-card, so it carries no tools and the prayer book leaves it out. The
   star between prayers moves below it. Written by
   scripts/build-papal-intention.mjs; see papal-intention.js. */
.pb-intention{
  margin:26px 0 0;padding:4px 0 4px 18px;max-width:560px;
  border-left:2px solid var(--champagne);
}
.pb-intention-label{
  margin:0;
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
}
.pb-intention-title{
  margin:8px 0 0;
  font-family:var(--head);font-style:italic;font-size:21px;line-height:1.3;color:var(--ink);
}
.pb-intention-text{
  margin:6px 0 0;
  font-family:var(--body);font-size:16.5px;line-height:1.6;color:var(--ink);
}
.pb-intention-more{margin:10px 0 0;font-family:var(--body);font-size:15.5px;}
.pb-intention-more a{
  color:var(--gold-deep);
  text-decoration:underline;text-decoration-color:rgba(125,98,36,.4);text-underline-offset:3px;
}
.pb-intention-more a:hover{text-decoration-color:currentColor;}
@media print{.pb-intention{display:none;}}

/* A drop cap opens each section, as on the essays (.prose p.first). */
.pb .pb-section > .prayer-card:first-of-type > p.prayer-text:first-of-type::first-letter,
.pb .pb-section > .prayer-card:first-of-type > .prayer-verse > p:first-child::first-letter{
  font-family:var(--display);font-weight:700;float:left;font-size:74px;line-height:.74;
  padding:8px 12px 0 0;color:var(--gold);font-variant-caps:normal;
}
@media(max-width:560px){
  .pb .pb-section > .prayer-card:first-of-type > p.prayer-text:first-of-type::first-letter,
  .pb .pb-section > .prayer-card:first-of-type > .prayer-verse > p:first-child::first-letter{font-size:60px;}
}

.pb-colophon-orn{margin:72px 0 20px;}

/* ───────────────── LATIN ─────────────────
   Absent attribute = scripting off: the Latin follows the English, as the
   page's three Latin notes always did. The head script sets the attribute. */
.pb .prayer-latin{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);}
/* EB Garamond carries a Latin locale form that sets every u as v
   ("nvntiavit"). The texts are printed with u in the missals; keep it. */
.pb [lang="la"]{font-feature-settings:"locl" 0;font-language-override:"ENG";}
.pb .prayer-latin::before{
  content:"Latine";display:block;margin:0 0 10px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--gold-deep);
}
html[data-prayer-lang="english"] .pb .prayer-latin{display:none;}
html[data-prayer-lang="latin"] .pb .prayer-card.has-latin > :not(.prayer-title):not(.pb-tools):not(.prayer-latin){display:none;}
html[data-prayer-lang="latin"] .pb .prayer-latin{margin-top:18px;padding-top:0;border-top:none;}
html[data-prayer-lang="latin"] .pb .prayer-latin::before{content:none;}
/* The drop cap moves to the Latin when it is the only text shown. */
html[data-prayer-lang="latin"] .pb .pb-section > .prayer-card:first-of-type > .prayer-latin > p.prayer-text:first-of-type::first-letter,
html[data-prayer-lang="latin"] .pb .pb-section > .prayer-card:first-of-type > .prayer-latin > .prayer-verse > p:first-child::first-letter{
  font-family:var(--display);font-weight:700;float:left;font-size:74px;line-height:.74;
  padding:8px 12px 0 0;color:var(--gold);font-variant-caps:normal;
}

/* Both, side by side: Latin left, English right, each paragraph level with
   its counterpart. The card becomes a two-column grid; the wrappers dissolve
   (display:contents) so every paragraph is a grid item, and dense packing
   drops the Nth Latin paragraph into the row of the Nth English one. */
@media(min-width:900px){
  html[data-prayer-lang="both"] .pb-main{max-width:956px;}
  html[data-prayer-lang="both"] .pb-main > .pb-section > .prayer-card:not(.has-latin),
  html[data-prayer-lang="both"] .pb-main > .pb-section > .pb-intention,
  html[data-prayer-lang="both"] .pb-main > .pb-section > .pb-opener,
  html[data-prayer-lang="both"] .pb-main > .colophon{max-width:560px;}
  html[data-prayer-lang="both"] .pb-main > .pb-section > .pb-opener{margin-left:auto;margin-right:auto;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;
    grid-auto-flow:row dense;align-items:start;
  }
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > *{grid-column:2;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .rubric,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-title,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .pb-tools,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin::after{grid-column:1 / -1;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-verse,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-latin,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-latin > .prayer-verse{display:contents;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-verse > *{grid-column:2;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-latin > *,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-latin > .prayer-verse > *{grid-column:1;}
  html[data-prayer-lang="both"] .pb .prayer-latin::before{content:none;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-title + *{margin-top:0;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin .prayer-text:last-child{margin-bottom:14px;}
  /* Side by side, both columns open with the same drop cap, so their first
     lines stand level (the Anima Christi, the Salve Regina, the Pater). */
  html[data-prayer-lang="both"] .pb .pb-section > .prayer-card.has-latin:first-of-type > .prayer-latin > p.prayer-text:first-of-type::first-letter,
  html[data-prayer-lang="both"] .pb .pb-section > .prayer-card.has-latin:first-of-type > .prayer-latin > .prayer-verse > p:first-child::first-letter{
    font-family:var(--display);font-weight:700;float:left;font-size:74px;line-height:.74;
    padding:8px 12px 0 0;color:var(--gold);font-variant-caps:normal;
  }
}

/* ───────────────── TOOL ROW ─────────────────
   Quiet until wanted. The brief asked for 60% at rest; --muted at 60% falls
   to about 2.6:1, so the words rest at .88 (4.7:1, still AA) and only the
   separators and the empty square go to 60%. */
.pb-tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:8px 0 14px;
  font-family:var(--display);font-size:12px;letter-spacing:.08em;color:var(--muted);
  opacity:.88;transition:opacity .2s;
}
.pb .prayer-card:hover .pb-tools,
.pb-tools:focus-within{opacity:1;}
.pb-tool-sep{opacity:.6;}
.pb-tool{
  background:none;border:0;padding:6px 0;min-height:32px;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:inherit;
}
.pb-tool:hover{color:var(--gold-deep);}
.pb-tool-done{color:var(--gold-deep);}

/* The checkbox: native input, invisible, over a drawn 18px square. */
.pb-check{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;}
.pb-check input{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0;opacity:0;cursor:pointer;}
.pb-box{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:1px solid var(--gold);background:var(--paper-card);
  font-family:var(--body);font-size:15px;line-height:1;color:var(--gold-deep);
}
.pb-tools .pb-check input:not(:checked) + .pb-box{border-color:rgba(154,122,46,.6);}
.pb-check:hover .pb-box{border-color:var(--gold);}
.pb-check input:checked + .pb-box::after{content:"✓";}
.pb-check input:focus-visible + .pb-box{outline:2px solid var(--gold);outline-offset:2px;}
.pb-check input:checked ~ .pb-check-label{color:var(--gold-deep);}


/* ───────────────── BUILDER BAR ───────────────── */
.pb-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  width:calc(100% - 32px);max-width:880px;margin:0 auto;padding:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  background:var(--espresso);color:var(--paper);
  border-top:1px solid var(--rule-dark);border-radius:4px 4px 0 0;
  box-shadow:0 -10px 30px rgba(26,18,11,.22);
  transform:translateY(calc(100% + 24px));visibility:hidden;
  transition:transform .35s ease,visibility 0s linear .35s;
}
.pb-bar.is-visible{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s;}
.pb-bar-id{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0;}
.pb-bar-id img{width:auto;height:28px;flex:none;}
.pb-bar-title{font-family:var(--head);font-size:19px;line-height:1.25;color:var(--paper);margin:0;}
.pb-bar-count{color:var(--champagne);white-space:nowrap;}
.pb-bar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.pb-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;line-height:1.2;
  color:var(--paper);background:transparent;border:1px solid var(--rule-dark);border-radius:2px;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.pb-btn:hover{border-color:var(--champagne);color:var(--champagne);}
.pb-btn-primary{background:var(--champagne);border-color:var(--champagne);color:var(--espresso);}
.pb-btn-primary:hover{background:var(--paper);border-color:var(--paper);color:var(--espresso);}
.pb-btn-quiet{border-color:transparent;color:var(--champagne);padding-left:8px;padding-right:8px;}
.pb-bar .pb-sclink,.pb-pill .pb-sclink{color:var(--champagne);text-decoration-color:var(--rule-dark);padding-left:4px;padding-right:4px;}
.pb-bar .pb-sclink:hover,.pb-pill .pb-sclink:hover{color:var(--paper);text-decoration-color:currentColor;}
.pb-bar-all{
  padding:4px;font-family:var(--body);font-size:16px;font-variant-caps:small-caps;letter-spacing:.06em;
  color:var(--muted-dark);white-space:nowrap;
}
.pb-bar-all[hidden],.pb-bar .pb-sclink[hidden]{display:none;}
.pb-bar-all:focus{outline:none;}
/* × folds the bar into the pill; the selection stays. */
.pb-bar-hide{
  width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;margin-left:4px;
  background:none;border:1px solid var(--rule-dark);border-radius:2px;color:var(--paper);font-size:22px;line-height:1;cursor:pointer;
}
.pb-bar-hide:hover{border-color:var(--champagne);color:var(--champagne);}
.pb-bar :focus-visible,.pb-pill :focus-visible,.pb-modal :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.pb-bar :focus-visible,.pb-pill :focus-visible{outline-color:var(--champagne);}
@media(max-width:480px){
  .pb-bar{gap:12px;}
  .pb-bar-id{padding-right:44px;}
  .pb-bar-actions{width:100%;}
  .pb-bar-actions .pb-btn-primary{flex:1;}
  .pb-btn{padding:8px 10px;letter-spacing:.08em;}
  .pb-bar-hide{position:absolute;top:10px;right:10px;margin:0;}
}

/* ───────────────── THE PILL ─────────────────
   The bar folded away, bottom right: the lantern mark, the count, "Done". */
.pb-pill{
  position:fixed;right:16px;bottom:16px;z-index:55;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:4px;padding:4px 12px 4px 4px;
  background:var(--espresso);color:var(--paper);
  border:1px solid var(--rule-dark);border-radius:999px;
  box-shadow:0 8px 24px rgba(26,18,11,.28);cursor:pointer;
  transform:translateY(calc(100% + 24px));visibility:hidden;
  transition:transform .3s ease,visibility 0s linear .3s;
}
.pb-pill.is-visible{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s;}
.pb-pill-open{
  display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:40px;padding:0 8px 0 10px;
  background:none;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--head);font-size:18px;line-height:1.2;color:var(--paper);text-align:left;
}
.pb-pill-open img{width:auto;height:22px;flex:none;}
.pb-pill-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pb-pill-count,.pb-pill-tick{color:var(--champagne);}
.pb-pill:hover{border-color:var(--champagne);}
@media(max-width:480px){
  .pb-pill{right:12px;bottom:12px;max-width:calc(100% - 24px);padding-right:8px;gap:0;}
  .pb-pill-open{gap:8px;padding:0 6px 0 8px;font-size:16px;}
  .pb-pill-open img{height:20px;}
}

/* "Your prayer book is ready": two seconds above the foot of the page. */
.pb-toast{
  position:fixed;left:50%;bottom:calc(var(--pb-bar-space,72px) + 4px);z-index:56;
  max-width:calc(100% - 32px);padding:10px 18px;
  background:var(--paper-card);color:var(--ink);border:1px solid var(--rule);border-radius:4px;
  box-shadow:0 8px 24px rgba(26,18,11,.18);
  font-family:var(--head);font-style:italic;font-size:18px;line-height:1.3;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;pointer-events:none;
}
.pb-toast.is-shown{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s ease,transform .25s ease,visibility 0s;}

@media(prefers-reduced-motion:reduce){
  .pb-bar,.pb-bar.is-visible,.pb-pill,.pb-pill.is-visible,.pb-toast,.pb-toast.is-shown{transition:none;}
  .pb-tools{transition:none;}
}

/* Room at the foot of the page while the bar is up, so it never sits over
   the footer's liturgical-colour switch, and the back-to-top button rises
   clear of it. --pb-bar-space is set by prayers.js from the bar's height. */
body.pb-has-bar{padding-bottom:var(--pb-bar-space,120px);}
body.pb-has-bar .back-to-top{bottom:calc(var(--pb-bar-space,120px) + 12px);}
@media(max-width:760px){body.pb-has-bar .back-to-top{display:none;}}

/* ───────────────── PREVIEW MODAL ───────────────── */
.pb-modal{
  width:calc(100% - 32px);max-width:720px;height:90vh;max-height:90vh;
  margin:auto;padding:0;border:1px solid var(--rule);border-radius:4px;
  background:var(--paper-card);color:var(--ink);overflow:hidden;
}
.pb-modal[open]{display:flex;flex-direction:column;}
.pb-modal::backdrop{background:rgba(26,18,11,.62);}
.pb-modal-head{
  display:flex;align-items:center;gap:10px;padding:12px 12px 12px 20px;
  background:var(--espresso);color:var(--paper);
}
.pb-modal-title{flex:1;min-width:0;margin:0;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--paper);}
.pb-modal-close{
  width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule-dark);border-radius:2px;color:var(--paper);font-size:22px;line-height:1;cursor:pointer;
}
.pb-modal-close:hover{border-color:var(--champagne);color:var(--champagne);}
.pb-modal-head :focus-visible{outline-color:var(--champagne);}

.pb-opts{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;
  padding:12px 20px;border-bottom:1px solid var(--rule);margin:0;
}
.pb-opts legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.pb-opt{display:flex;flex-direction:column;gap:4px;}
.pb-opt-label{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--gold-deep);}
.pb-opts select,.pb-opts input[type="text"]{
  font-family:var(--body);font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:6px 8px;min-height:36px;
}
.pb-opts input[type="text"]{width:13em;max-width:100%;}
.pb-opts select:focus-visible,.pb-opts input[type="text"]:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}
.pb-opt-check{flex-direction:row;align-items:center;font-family:var(--body);font-size:16px;color:var(--ink);}
.pb-opt-check .pb-check{gap:8px;}
.pb-modal-frame{flex:1;min-height:0;width:100%;border:0;background:var(--rule);display:block;}
@media(max-width:560px){
  .pb-opts{padding:10px 16px;gap:8px 14px;}
  .pb-opt-text{flex:1 1 100%;}
  .pb-opts input[type="text"]{width:100%;}
  .pb-modal-head{padding-left:16px;}
  .pb-modal-title{font-size:12px;}
}

/* ───────────────── PRINTING THIS PAGE ─────────────────
   The book has its own page (/prayers/print); printing /prayers itself gives
   the prayers alone, in one column, with none of the controls. */
@media print{
  .pb-index,.pb-tools,.pb-opener .pb-textbtn,.pb-bar,.pb-pill,.pb-toast,.pb-modal,.pb-live,.back-to-top{display:none !important;}
  body.pb-has-bar{padding-bottom:0;}
  .pb-layout{display:block;padding:0;}
  .pb-main,html[data-prayer-lang="both"] .pb-main{max-width:none;margin:0;padding:0;border:0;background:none;}
  .pb .prayer-card{break-inside:avoid;}
  .pb .prayer-title{break-after:avoid;}
}