/* Scripture-specific layer. Everything else in this app is Classical Mind's
   stylesheet, unchanged. These rules follow the same two conventions it uses:
     • light values live in the fallback slot — var(--dk-x, <light value>)
     • --dk-* variables exist ONLY in dark mode
   so light mode keeps its exact colours and dark mode picks up the theme. */

[data-theme="dark"] body {
  --dk-mark: #4A3A18;
  /* The folded note's title sits on a tint. Without a dark value it would fall
     back to the light one and glare as a pale block on a dark page. */
  --dk-tint2: #241F30;
  /* The plain-English label on the way-to-live page. The light value is a deep
     sky that reads as a label beside black body text; on a dark page that same
     blue goes muddy, so it lifts to the app bar's sky instead. */
  --dk-skyink: #7FC0E8;
  /* The short list's numbers are quiet furniture; the light value is a pale sky
     that would burn on a dark card. */
  --dk-numink: #3E5A70;
}

/* ---------- Scripture typography ----------
   No red. His words are simply the text — full-strength ink at reading weight.
   In the context view the SCENE steps back into the muted grey instead, which
   is the same figure/ground move the rest of the shell uses. */
.scripture { font-size: var(--fs, 19px); line-height: 1.72; letter-spacing: -.004em; }
.words { color: var(--ink); font-weight: 500; }
.narr  { color: var(--dk-mute, #7a7488); font-weight: 400; }
.vnum  { font: 700 .62em/1 var(--sans); color: var(--dk-mute, #7a7488); vertical-align: .5em;
         margin: 0 .28em 0 .1em; letter-spacing: 0; opacity: .75; }
.ref   { font: 800 .72rem/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase;
         color: var(--c-ink); }
mark   { background: var(--dk-mark, #FBEED4); color: inherit; border-radius: 4px; padding: 0 2px; }

/* ---------- A passage card — the .today-bar shape: left accent bar, white card ---------- */
.today-list .saying:last-child { margin-bottom: 0; }
.saying {
  position: relative; background: var(--paper-card); border-radius: 16px;
  padding: 15px 17px 14px 20px; margin-bottom: .7em; scroll-margin-top: 150px;
  box-shadow: 0 2px 4px rgba(60,45,20,.07), 0 10px 24px rgba(60,45,20,.09);
  transition: box-shadow .15s ease;
  --c: var(--sun); --cd: var(--gold-deep);
}
.saying::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 3;
  background: linear-gradient(180deg, var(--c), var(--cd));
}
.saying.playing { box-shadow: 0 0 0 3px var(--sun-soft), 0 10px 24px rgba(60,45,20,.12); }
.saying-head { margin-bottom: 8px; }
.saying-body { margin: 0; }
.saying-foot { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- The promise ---------- */
.promise {
  display: flex; gap: 11px; align-items: flex-start; margin: 2px 0 18px;
  background: var(--sun-soft); border-radius: 14px; padding: 13px 15px;
  font-size: 14px; line-height: 1.5; color: var(--dk-soft, #4d4658);
}
.promise b { color: var(--gold-deep); }
.promise .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
                background: var(--gold-deep); margin-top: 6px; }

/* ---------- A passage whose boundary or manuscript is genuinely open ---------- */
/* A note on a passage is a small title you can open. The Matthew 5:3 reasoning
   runs to 845 characters and left inline it buried the passage under it, and
   the "Manuscripts differ" notes read better as a flag than as a paragraph.
   The title is the signal; the reasoning is one tap away. */
.pnote-fold { margin: 12px 0 0; }
.pnote-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                        gap: .5em; font: 800 12.5px/1.5 var(--sans); letter-spacing: .01em;
                        color: var(--dk-soft, #4d4658); padding: .45em .7em;
                        border-radius: 10px; background: var(--dk-tint2, #F3EEE1); }
.pnote-fold > summary::-webkit-details-marker { display: none; }
.pnote-fold > summary .wl-sumtxt { flex: 1; }
.pnote-fold > summary .wl-chev { transition: transform .18s ease; opacity: .6; }
.pnote-fold[open] > summary .wl-chev { transform: rotate(180deg); }
.pnote-fold .pnote { margin: .55em 0 0; }
.pnote-fold .pnote p { margin: 0 0 .7em; }
.pnote-fold .pnote p:last-child { margin-bottom: 0; }

.pnote { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--dk-mute, #7a7488);
         background: var(--dk-tint, #FBF7F1); border-radius: 12px; padding: 11px 13px;
         border-left: 4px solid var(--dk-rule, #EADFC6); }
.pnote b { color: var(--dk-soft, #4d4658); }

/* ---------- Sticky controls ---------- */
.controls {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 30;
  margin: 0 -16px 14px; padding: 10px 16px;
  background: var(--paper); border-bottom: 1px solid var(--dk-rule, #EADFC6);
}
.pills { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: 0 0 auto; font-size: .82em; padding: .55em 1.05em; color: var(--ink-soft); }
.pill.on { background: var(--ink); color: var(--paper); }
.pill.on::before { display: none; }
.vpick { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.vlabel { font-size: .76em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
          color: var(--ink-mute); margin-right: 1px; }
.vblurb { flex: 1 1 100%; font-size: 12.5px; line-height: 1.5; margin-top: 1px;
          color: var(--dk-mute, #7a7488);
          max-height: 4em; overflow: hidden;
          transition: max-height .18s ease, opacity .18s ease, margin-top .18s ease; }
/* Reading beats explaining: once you have scrolled in, the sticky bar gives the
   blurb's two lines back to the text. The pills themselves never move. */
body.scrolled .vblurb { max-height: 0; opacity: 0; margin-top: 0; }
/* A reading that has not been made yet is still listed, greyed and unclickable,
   so you can see what exists rather than wonder. */
.pill.notmade { opacity: .42; cursor: default; }
.pill.notmade::before { background: var(--rule); }

/* The other recording is a quiet way out at the foot of the page, not a switch
   under the heading — that read as though it were part of this one. */
.otherrec { margin: 26px 0 0; text-align: center; font-size: 13.5px; }
.otherrec a { color: var(--dk-mute, #7a7488); font-weight: 700; text-decoration: none; }
.otherrec a:hover { color: var(--ink); }

.row-tools { display: flex; gap: 8px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.search { flex: 1 1 100%; border: 1.5px solid var(--dk-rule, #EADFC6);
          background: var(--paper-card); color: var(--ink); border-radius: var(--radius-pill);
          font: 600 .92em/1 var(--sans); padding: .72em 1.1em; }
.search::placeholder { color: var(--ink-mute); }
.voice-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }

/* ---------- Buttons ----------
   The house system already covers these: every button gets the warm
   gradient outline, .secondary swaps it for sky, .primary-fill is a solid
   fill with no outline. Only the stop state is new. */
button.stop, .btn.stop { background: var(--ink); color: var(--paper); }
button.stop::before, .btn.stop::before { display: none; }

/* ---------- A chapter, in context ---------- */
.chapter { background: var(--paper-card); border-radius: 16px; padding: 18px 19px 20px;
           position: relative; overflow: hidden;
           box-shadow: 0 2px 4px rgba(60,45,20,.07), 0 10px 24px rgba(60,45,20,.09); }
.chapter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 3;
                   background: linear-gradient(180deg, var(--sky), var(--sky-deep)); }
.chapter h2 { margin: 0 0 3px; font-size: 1.35em; letter-spacing: -.02em; }
.chapter .sub { margin: 0 0 15px; font-size: .82em; color: var(--dk-mute, #7a7488); }
.verse { display: block; margin: 0 0 .35em; }
.verse.hit { background: var(--dk-tint, #E0F0FA); border-radius: 8px;
             box-shadow: 0 0 0 6px var(--dk-tint, #E0F0FA); }
.chapnums { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none;
            padding-bottom: 2px; }
.chapnums::-webkit-scrollbar { display: none; }
.chapnums button { flex: 0 0 auto; font-size: .78em; padding: .5em 0; min-width: 2.6em;
                   justify-content: center; color: var(--ink-soft); }
.chapnums button.on { background: var(--ink); color: var(--paper); }
.chapnums button.on::before { display: none; }
/* Chapters he doesn't speak in are still reachable, just quieter. */
.chapnums button.none { opacity: .45; }
.chapnums button.none::before { background: var(--rule); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px;
          color: var(--dk-mute, #7a7488); margin: 2px 0 16px; }
.legend i { font-style: normal; font-weight: 800; }
.legend .k-w { color: var(--ink); font-weight: 800; }
.navrow { display: flex; gap: 8px; justify-content: space-between; margin-top: 16px; }

.empty { text-align: center; color: var(--dk-mute, #7a7488); padding: 40px 20px; font-size: 15px; }
.srcnote { font-size: 13px; line-height: 1.55; color: var(--dk-mute, #7a7488);
           background: var(--dk-tint, #FBF7F1); border-radius: 14px; padding: 14px 16px;
           margin-top: 26px; border: 1.5px solid var(--dk-rule, #EADFC6); }
.srcnote b { color: var(--dk-soft, #4d4658); }
.foot { margin-top: 30px; text-align: center; font-size: 12.5px;
        color: var(--dk-mute, #7a7488); line-height: 1.6; }

[hidden] { display: none !important; }

/* ---------- Inner-page navigation ----------
   Back is browser history, so it returns you to the exact place you left,
   scroll and all. Home goes straight to the launcher. */
.appbar .hbtn.left { justify-self: start; }
.appbar .hbtn { gap: 5px; }
/* The shell hides .hbtn labels under 440px because the home page's "Get app"
   pill can afford to be an icon. Navigation cannot — a bare arrow and a bare
   house are a guess. Keep the words and give the title the room instead. */
@media (max-width: 440px) {
  .appbar .hbtn span { display: inline; }
  .appbar .brand { font-size: 17px; }
}
@media (max-width: 360px) {
  .appbar .brand { font-size: 15px; }
  .appbar .hbtn { font-size: 11.5px; padding: 8px 10px; }
}
.sizebtn { font-size: .78em; padding: .5em 1em; color: var(--ink-soft); }

/* ---------- Long passages fold away ----------
   The Sermon on the Mount is one 2,441-word passage. Left open it buries
   everything after it, so anything long opens folded and you unfold what you
   actually want to read today. Capped in em, so it holds its shape at every
   text size. */
.saying-body.clamp { max-height: 15.5em; overflow: hidden;
                     -webkit-mask-image: linear-gradient(#000 68%, transparent 100%);
                     mask-image: linear-gradient(#000 68%, transparent 100%); }
.saying.open .saying-body.clamp { max-height: none; -webkit-mask-image: none; mask-image: none; }
.unfold { display: flex; width: 100%; justify-content: center; margin-top: 10px;
          font-size: .78em; padding: .6em 1em; color: var(--ink-soft); }
.unfold .count { color: var(--dk-mute, #7a7488); font-weight: 700; }

/* ---------- Save, and your place ---------- */
.mark { font-size: .78em; padding: .55em .95em; color: var(--ink-soft); }
.mark.on { background: var(--ink); color: var(--paper); }
.mark.on::before { display: none; }
.mark .ic { font-style: normal; }

/* The one passage you're picking up from gets a quiet flag, not a shout. */
.saying.is-place { box-shadow: 0 0 0 2px var(--gold), 0 10px 24px rgba(60,45,20,.10); }
.saying.is-place .saying-head::after {
  content: "Your place"; margin-left: .7em; font: 800 .62rem/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep);
  background: var(--sun-soft); padding: .42em .7em; border-radius: 999px;
  vertical-align: .15em; white-space: nowrap;
}

/* ---------- The saved shelf on the home page ---------- */
.saved-empty { font-size: 14px; line-height: 1.55; color: var(--dk-mute, #7a7488);
               background: var(--dk-tint, #FBF7F1); border-radius: 14px; padding: 14px 16px;
               border: 1.5px dashed var(--dk-rule, #EADFC6); }
.saved-more { display: block; text-align: center; margin-top: 10px; }

/* The Saved tile carries no artwork, so its photo block becomes a plain
   gradient panel with the star centred rather than an empty grey box. */
.rtile-photo:not(:has(img)) { display: grid; place-items: center; }
.rtile-photo:not(:has(img)) .rtile-ic { position: static; width: 40px; height: 40px; }
.rtile-photo:not(:has(img)) .rtile-ic svg { width: 24px; height: 24px; }
a.ref { text-decoration: none; }
a.ref:hover { text-decoration: underline; }

/* ---------- A passage the sources are not certain about ----------
   Kept, not hidden — some of them matter too much to drop, and a reader can
   weigh it themselves. Marked in red so it reads as a caution, and carrying
   the reason. This is the ONLY red in the app. */
.saying.uncertain { --c: #E0736B; --cd: #B23B32; }
.uncertain-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5;
                  color: var(--dk-warn, #9E2B22); background: var(--dk-warn-soft, #FCEDEB);
                  border-radius: 10px; padding: 9px 12px; }
.uncertain-note b { font-weight: 800; }
b.warn { color: var(--dk-warn, #9E2B22); }
[data-theme="dark"] body { --dk-warn: #F2A69D; --dk-warn-soft: #3A1F1C; }
.quoted-note { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45;
               color: var(--dk-mute, #7a7488); background: var(--dk-tint, #FBF7F1);
               border-radius: 10px; padding: 8px 11px; }
/* an uncertain stretch inside the scene view */
.uncertain-words { color: var(--dk-warn, #9E2B22); }

/* ---------- The one place the text departs from the King James ----------
   Declared in data/edits.json, applied at build time, and never silent — but
   quiet: an asterisk by the reference, and the reason in the note below. The
   audio says nothing at all about it. */
.edit-star { margin-left: .25em; font-weight: 800; color: var(--dk-warn, #9E2B22);
             cursor: help; font-size: 1.15em; line-height: 0; }
.edited-word { border-bottom: 1.5px dotted var(--dk-warn, #9E2B22); }

/* ---------- Listen ---------- */
.part-meta { margin: 0 0 8px; font-size: 13px; color: var(--dk-mute, #7a7488); }
.pl-bar { height: 4px; border-radius: 999px; background: var(--dk-rule, #EADFC6); overflow: hidden; margin-bottom: 4px; }
.pl-bar i { display: block; height: 100%; background: var(--grad-gold); }
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
          background: var(--paper-card); border-top: 1.5px solid var(--dk-rule, #EADFC6);
          padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
          box-shadow: 0 -6px 24px rgba(60,45,20,.14); }
.pl-now { display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
          font: 800 12.5px/1.3 var(--sans); color: var(--ink); margin-bottom: 6px; }
.pl-ref { font-weight: 700; font-size: 11.5px; color: var(--gold-deep); white-space: nowrap; }
.pl-seek { width: 100%; accent-color: var(--gold-deep); margin: 0 0 4px; }
.pl-row { display: flex; align-items: center; gap: 8px; }
.pl-btn { font: 800 13px/1 var(--sans); padding: .6em .9em; color: var(--ink-soft); }
.pl-btn.play { font-size: 16px; padding: .55em 1.1em; background: var(--grad-gold); color: #fff; }
.pl-btn.play::before { display: none; }
.pl-time { margin-left: auto; font: 700 12px/1 var(--sans); color: var(--dk-mute, #7a7488); }
body:has(.player:not([hidden])) .launcher-main { padding-bottom: 130px; }

/* The two daily cards say whose words they are — the reference alone doesn't
   tell you, and the whole point of the app is knowing exactly who spoke. */
.today-list .saying-head { display: flex; align-items: baseline; justify-content: space-between; gap: .9em; }
.who { font: 700 .64rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase;
       color: var(--dk-mute, #8b8397); white-space: nowrap; }

/* The daily modal's buttons sit on one row; the links below them wrap. */
.cm-acts { display: flex; gap: .6em; flex-wrap: wrap; align-items: center; }
.cm-acts .cm-read { margin-right: 0; }
.cm-mbody .cm-morelink { margin-right: .5em; }
.cm-mbody .uncertain-note { margin-top: 1em; }

/* The source note folds away — it matters once, not every day. */
.srcnote-fold { margin: 26px 0 8px; }
.srcnote-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: .6em; padding: .7em .9em; border-radius: 14px; border: 1.5px solid var(--dk-rule, #EADFC6);
  background: var(--paper-card); font: 700 .9rem/1.3 var(--sans); color: var(--dk-mute, #6b6478); }
.srcnote-fold > summary::-webkit-details-marker { display: none; }
.srcnote-fold > summary .wl-sumtxt { flex: 1; }
.srcnote-fold[open] > summary .wl-chev { transform: rotate(180deg); }
.srcnote-fold > summary .wl-chev { transition: transform .18s ease; }
.srcnote-fold .srcnote { margin-top: .6em; }

/* Jump to a book — one row of pills under the single audio card. */
.jump { margin: 18px 0 26px; }
.jump-lead { font: 800 .72rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--dk-mute, #7a7488); margin-bottom: .6em; }
.jump-row { display: flex; flex-wrap: wrap; gap: .5em; }
.jump-btn { cursor: pointer; font: 700 .85rem/1 var(--sans); color: var(--ink, #2A2038);
  background: var(--paper-card); border: 1.5px solid var(--dk-rule, #EADFC6); border-radius: 999px;
  padding: .6em 1em; transition: transform .15s cubic-bezier(0.34,1.56,0.64,1), border-color .15s ease; }
.jump-btn:hover { border-color: var(--gold); } .jump-btn:active { transform: scale(.95); }

/* ---------- Downloading the recording ----------
   One player and one download, with the explanation folded away. */
.dl { margin: 4px 0 26px; }
.dl-row { display: flex; gap: .5em; flex-wrap: wrap; }
.dl-row:empty { display: none; }
.dl .pl-bar { margin-top: .9em; }
.dl-note { margin: .8em 0 0; font-size: .92em; line-height: 1.5; color: var(--dk-mute, #6b6478); }
.dl-note .ok { color: var(--mint-deep, #2E9A73); }

/* The status beside the running time — quiet when streaming, a green tick when
   the file is on the phone. Nothing else about playing changes either way. */
.dl-state { display: inline-block; margin-left: .5em; font-weight: 800; }
.dl-state.on { color: var(--mint-deep, #2E9A73); }

.how { margin-top: 18px; }
.how > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6em;
  padding: .7em .9em; border-radius: 14px; border: 1.5px solid var(--dk-rule, #EADFC6);
  background: var(--paper-card); font: 700 .9rem/1.3 var(--sans); color: var(--dk-mute, #6b6478); }
.how > summary::-webkit-details-marker { display: none; }
.how > summary .wl-sumtxt { flex: 1; }
.how > summary .wl-chev { transition: transform .18s ease; }
.how[open] > summary .wl-chev { transform: rotate(180deg); }
.how-body { padding: .2em .3em 0; }
.how-body p { margin: .9em 0 0; font-size: .92em; line-height: 1.55; color: var(--dk-mute, #6b6478); }

/* The player is fixed to the bottom, so the page has to end above it. */
body.with-player .launcher-main { padding-bottom: 190px; }

/* ---------- Share the app / put it on your home screen ----------
   The Days Out NI card, in this app's shell: one install variant at a time,
   then the QR. */
/* The only button in the bar: square, so it never widens the row enough to
   wrap. The shell hides .hbtn span under 440px anyway, so this carries no text. */
.hbtn-qr { flex: 0 0 auto; padding: .42em .52em; }
.hbtn-qr svg { width: 21px; height: 21px; display: block; }

.share-dialog { border: 0; padding: 0; background: transparent; max-width: 400px; width: calc(100% - 36px); }
.share-dialog::backdrop { background: rgba(30,22,15,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.share-body { background: var(--paper-card); border-radius: 22px; padding: 24px 22px 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.38); text-align: center; }

.install-headline { margin: 0 0 6px; font: 800 clamp(21px,5.2vw,25px)/1.15 var(--sans);
  letter-spacing: -.02em; color: var(--ink, #2A2038); }
.install-sub { margin: 0 0 15px; font-size: 14.5px; line-height: 1.5; color: var(--dk-mute, #6b6478); }
.install-done { margin: 0; font: 800 14.5px var(--sans); color: var(--mint-deep, #2E9A73); }
.install-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 11px; }
.install-steps li { counter-increment: step; display: flex; align-items: center; gap: 10px;
  font-size: 14px; line-height: 1.4; color: var(--ink, #2A2038); }
.install-steps li::before { content: counter(step); flex: 0 0 auto; width: 21px; height: 21px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold, #E7A83C), var(--gold-deep, #C6811A));
  color: #fff; font: 800 11.5px var(--sans); }
.install-ico { flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: var(--gold-deep, #C6811A);
  background: var(--dk-tint, #FBF7F1); border: 1.5px solid var(--dk-rule, #EADFC6); }
.install-ico svg { width: 17px; height: 17px; }
.install-ico-done { font: 800 15px var(--sans); }
.install-note { display: block; font-style: normal; font-size: 12.5px;
  color: var(--dk-mute, #7a7488); margin-top: 3px; }
.install-open-safari { text-align: left; padding: 12px 14px; border-radius: 13px;
  background: var(--dk-tint, #FBF7F1); border: 1.5px solid var(--dk-rule, #EADFC6); }
.install-hint-title { margin: 0 0 5px; font: 800 14.5px var(--sans); color: var(--gold-deep, #C6811A); }
.install-hint-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink, #2A2038); }

.install-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px;
  font: 800 11.5px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--dk-mute, #8b8397); }
.install-divider::before, .install-divider::after { content: ""; flex: 1; height: 1px;
  background: var(--dk-rule, #EADFC6); }
.share-sub { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--dk-mute, #6b6478); }
.qr-box { width: 208px; height: 208px; margin: 0 auto 12px; background: #fff; border-radius: 15px;
  padding: 11px; box-shadow: 0 6px 18px rgba(60,45,20,.16); display: flex; align-items: center;
  justify-content: center; color: var(--dk-mute, #7a7488); font-size: 13px; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.share-url { font: 700 14.5px var(--sans); color: var(--gold-deep, #C6811A); }
.share-buttons { display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; margin-top: 18px; }

/* The two recordings sit behind one player, so the page needs a way across.
   It is the same pill row the book filters use — `.pill.on` is ink on paper,
   never `--grad-sky-app`, which is the near-black app bar in dark. */
.listen-switch { margin: 0 0 22px; }

/* ---------- The way to live ----------
   The one page in this app that prints words we wrote next to words he said, so
   the two have to stay visibly different. His stay at full-strength --ink at
   reading weight, exactly as they are on words.html. Ours — the plain-English
   label above each quote — is smaller, heavier, and sits in the sky accent, so
   it reads as a tab on a drawer rather than as scripture. Do not let the label
   creep towards the body's size or colour. */
.waylede { font-size: 14px; line-height: 1.55; color: var(--dk-mute, #7a7488);
           margin: 0 0 18px; }
.waylede b { color: var(--dk-soft, #4d4658); }

.waysec { margin: 0 0 30px; scroll-margin-top: 10px; }
.waysec .sectitle { margin: 26px 0 6px; font-size: 1.18em; letter-spacing: -.02em;
                    color: var(--ink); }
.waysec:first-child .sectitle { margin-top: 4px; }
.secblurb { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55;
            color: var(--dk-mute, #7a7488); }

.wayh { margin: 0 0 9px; font: 800 .88em/1.35 var(--sans); letter-spacing: -.01em;
        color: var(--dk-skyink, #2E6C97); text-transform: none; }

/* The parallels are furniture, like the reference itself, and go away with it. */
.alsoref { margin-left: 8px; font-size: .92em; color: var(--dk-mute, #7a7488); }

/* On words.html the reference sits ABOVE the passage; here it sits below, under
   the quote it belongs to, so the gap has to move with it. */
.waysec .saying-head { margin: 11px 0 0; }

/* ---------- The short list ----------
   The whole thing boiled down to forty. Same colour rule as the rest of the
   page — sky is ours, ink is his — but here our line is the headline, so it
   is bigger than the label on a long entry while staying the same colour. */
.shortlist { margin: 0 0 34px; }
.shortlist ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.shortfoot { font-size: 13px; line-height: 1.55; color: var(--dk-mute, #7a7488);
             margin: 16px 0 0; }

.core { display: flex; gap: 13px; align-items: flex-start; margin: 0 0 12px;
        background: var(--paper-card); border-radius: 16px; padding: 15px 17px 16px;
        position: relative; overflow: hidden;
        box-shadow: 0 2px 4px rgba(60,45,20,.07), 0 10px 24px rgba(60,45,20,.09); }
.core::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
                background: linear-gradient(180deg, var(--sky), var(--sky-deep)); }
.corenum { flex: 0 0 auto; min-width: 1.9em; text-align: right;
           font: 800 1.15em/1.35 var(--sans); letter-spacing: -.03em;
           color: var(--dk-numink, #BFD9EC); }
.corebody { flex: 1 1 auto; min-width: 0; }
.coreh { margin: 0 0 7px; font: 800 1.02em/1.35 var(--sans); letter-spacing: -.015em;
         color: var(--dk-skyink, #2E6C97); }
.core .saying-head { margin: 9px 0 0; }