/* Typefaces: Newsreader (text) and Inter (interface), both SIL OFL; see fonts/. */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader.8dce1a6c24a0.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-italic.308f223a78ce.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.8e433c0592f7.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Themes. --rubric is the one accent: the red of a printed Bible's rubrics. */
:root {
  --bg: #fbfaf7; --raised: #fff; --fg: #1d1b18; --muted: #6f6a62; --faint: #a39d94; --line: #e6e1d8; --soft: #f3f0ea;
  --rubric: #a2301f; --chapter: #7f8c78;
  --serif: "Newsreader", Charter, "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-size: 1.25rem;
  --measure: 36rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #141312; --raised: #1c1b19; --fg: #e8e4dc; --muted: #9d978e; --faint: #6c675f; --line: #2d2b28; --soft: #1f1e1c;
    --rubric: #e0907c; --chapter: #97a48f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141312; --raised: #1c1b19; --fg: #e8e4dc; --muted: #9d978e; --faint: #6c675f; --line: #2d2b28; --soft: #1f1e1c;
  --rubric: #e0907c; --chapter: #97a48f;
  color-scheme: dark;
}
:root[data-theme="sepia"] {
  --bg: #f4ecdc; --raised: #faf4e8; --fg: #3a2f23; --muted: #786953; --faint: #a8987f; --line: #e2d5bc; --soft: #ece1cc;
  --rubric: #9c3a22; --chapter: #77806a;
}
:root[data-size="s"] { --text-size: 1.1rem; }
:root[data-size="l"] { --text-size: 1.4rem; }
:root[data-size="xl"] { --text-size: 1.6rem; }
:root[data-verses="off"] .scripture .verse-num,
:root[data-notes="off"] .scripture .fn,
:root[data-notes="off"] .scripture .footnotes,
:root[data-headings="off"] .scripture h4.section { display: none; }
/* With headings hidden, a paragraph that followed one is just the next paragraph. */
:root[data-headings="off"] .scripture h4 + p:not(.m):not(.d):not(.pc):not([class^="q"]):not(:has(.chapter-num)) { text-indent: 1.4em; }
:root[data-headings="off"] .scripture h4:first-child + p { text-indent: 0; }

/* Base */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main, footer.site { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }
p { margin: 0; }
.ref { white-space: nowrap; }
.kicker { display: block; font: 500 .7rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.quiet, .hint { color: var(--muted); }
.center { text-align: center; }
.note { font-size: .9rem; color: var(--muted); text-align: center; padding: .75rem 0; margin: 1.5rem 0; border-block: 1px solid var(--line); }

/* Header & footer */
header.site .bar { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1.25rem 0; display: flex; justify-content: space-between; align-items: center; }
.brand { font: 500 .8rem var(--serif); text-transform: uppercase; letter-spacing: .2em; text-decoration: none; }
header.site nav { display: flex; align-items: center; gap: 1.25rem; font-size: .85rem; }
header.site nav > a { text-decoration: none; color: var(--muted); }
header.site nav > a:hover, header.site nav > a[aria-current="page"] { color: var(--fg); }
header.site nav > a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rubric); text-underline-offset: .45em; }
footer.site { margin-top: 5rem; padding-top: 1.5rem; padding-bottom: 3rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--faint); text-align: center; }
footer.site p + p, footer.site form.account { margin-top: .5rem; }
footer.site button.link { font-size: inherit; color: inherit; }

/* Account pages */
form.account-form { max-width: 22rem; margin: 0 auto; display: grid; gap: 1.5rem; }
form.account-form label { display: grid; gap: .2rem; font: 500 .7rem var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
form.account-form input { font-size: 1rem; text-transform: none; letter-spacing: 0; }
form.account-form button.primary { justify-self: center; padding: .75rem 2rem; margin-top: .5rem; }
form.account-form .helptext, form.account-form .helptext ul { font: italic .9rem/1.5 var(--serif); color: var(--muted); margin: 0; padding-left: 1rem; text-transform: none; letter-spacing: 0; }
.errorlist { list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--rubric); text-transform: none; letter-spacing: 0; }
form.account-form label.toggle { display: flex; font: .95rem var(--sans); text-transform: none; letter-spacing: 0; color: var(--fg); }
.invite-link { display: flex; gap: .5rem; max-width: 30rem; margin: 2rem auto; }
.invite-link input { flex: 1; min-width: 0; font: .85rem var(--sans); color: var(--muted); }
.invite-link + .note { margin-top: 0; }
.account-aside { text-align: center; font: italic 1rem/1.5 var(--serif); color: var(--muted); margin-top: 2.5rem; }

/* Reading settings */
details.display { position: relative; }
details.display > summary { list-style: none; cursor: pointer; font: 400 1.05rem/1 var(--serif); color: var(--muted); padding: .2rem .1rem; }
details.display > summary::-webkit-details-marker { display: none; }
details.display > summary:hover, details.display[open] > summary { color: var(--fg); }
details.display .panel { position: absolute; z-index: 10; right: -.5rem; top: calc(100% + .75rem); width: 16.5rem; background: var(--raised); border: 1px solid var(--line); border-radius: 6px; padding: 1rem; box-shadow: 0 12px 32px rgb(0 0 0 / .08); }
fieldset.segmented { border: 0; padding: 0; margin: 0 0 1rem; display: flex; }
fieldset.segmented legend { padding: 0; margin-bottom: .4rem; font: 500 .65rem var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
fieldset.segmented label { flex: 1; }
fieldset.segmented input { position: absolute; opacity: 0; pointer-events: none; }
fieldset.segmented span { display: flex; align-items: center; justify-content: center; height: 2rem; font-size: .78rem; color: var(--muted); border: 1px solid var(--line); margin-left: -1px; cursor: pointer; }
fieldset.segmented label:first-of-type span { border-radius: 4px 0 0 4px; margin-left: 0; }
fieldset.segmented label:last-of-type span { border-radius: 0 4px 4px 0; }
fieldset.segmented input:checked + span { color: var(--bg); background: var(--fg); border-color: var(--fg); position: relative; }
fieldset.segmented input:focus-visible + span { outline: 2px solid var(--rubric); outline-offset: 2px; }
.size-s, .size-m, .size-l, .size-xl { font-family: var(--serif); }
.size-s { font-size: .8rem !important; } .size-m { font-size: .95rem !important; } .size-l { font-size: 1.15rem !important; } .size-xl { font-size: 1.35rem !important; }
fieldset.toggles { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
fieldset.toggles legend { padding: 0; margin-bottom: .4rem; font: 500 .65rem var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
label.toggle { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .82rem; color: var(--fg); cursor: pointer; }
label.toggle .aside { flex-basis: 100%; padding-left: 1.75rem; margin-top: -.15rem; color: var(--faint); font-size: .72rem; }

/* Controls */
button { font: 500 .8rem var(--sans); letter-spacing: .02em; padding: .55rem 1.1rem; border-radius: 4px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; transition: border-color .15s, background .15s; }
button:hover { border-color: var(--fg); }
button.primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
button.primary:hover { opacity: .88; }
button.danger { color: var(--rubric); }
button.danger:hover { border-color: var(--rubric); }
button.link { border: 0; padding: 0; color: var(--muted); font-size: .72rem; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; letter-spacing: 0; text-transform: none; }
button.link:hover { color: var(--fg); }
input:not([type=checkbox]):not([type=radio]), select {
  font: .95rem var(--sans); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .4rem .1rem; min-width: 0;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus { outline: none; border-bottom-color: var(--fg); }
input::placeholder { color: var(--faint); }
input[type=checkbox] { accent-color: var(--fg); }

/* Page headings */
.page-head { text-align: center; margin: 4rem 0 3rem; }
.page-head h1 { font: 400 2.6rem/1.15 var(--serif); letter-spacing: -.015em; margin-top: .35rem; }
.page-head .lede { font: italic 1.15rem/1.5 var(--serif); color: var(--muted); margin-top: .75rem; }
.back { margin-top: 2rem; font-size: .8rem; }
.back a { text-decoration: none; color: var(--muted); }
.back a:hover { color: var(--fg); }
.back + .page-head { margin-top: 2rem; }

/* Today: contents */
nav.contents ol { list-style: none; padding: 0; margin: 0 0 1rem; }
nav.contents li + li { margin-top: 1.1rem; }
nav.contents a { display: block; text-decoration: none; }
nav.contents .c-line { display: flex; align-items: baseline; gap: .5rem; margin-top: .1rem; }
nav.contents .c-passage { font: 1.15rem/1.35 var(--serif); }
nav.contents .leader { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--faint); transform: translateY(-.3em); }
nav.contents .c-time { font-size: .8rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
nav.contents a:hover .c-passage { color: var(--rubric); }

/* Today: readings */
section.reading { padding-top: 4.5rem; }
section.reading + section.reading { margin-top: 4.5rem; border-top: 1px solid var(--line); }
nav.contents + section.reading { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.reading-head { text-align: center; margin-bottom: 2.5rem; }
.reading-head h2 { font: 400 2rem/1.25 var(--serif); letter-spacing: -.01em; margin: .5rem 0 .6rem; text-wrap: balance; }
.reading-head .meta { font-size: .8rem; color: var(--muted); }
.reading-head .meta a { color: var(--muted); }
.reading-head .kicker + .meta { margin-top: .5rem; }
h3.part-title { text-align: center; font: 500 .8rem var(--serif); text-transform: uppercase; letter-spacing: .2em; color: var(--rubric); margin: 3.5rem 0 1.5rem; }
h3.part-title::before, h3.part-title::after { content: "—"; color: var(--faint); margin: 0 .8em; letter-spacing: 0; }
h3.part-title:first-child { margin-top: 0; }
details.keep-reading > summary { cursor: pointer; text-align: center; font-size: .85rem; color: var(--muted); list-style: none; }
details.keep-reading > summary::-webkit-details-marker { display: none; }
details.keep-reading > summary::after { content: " ↓"; }
details.keep-reading[open] > summary { margin-bottom: 2rem; }
.mark-read { text-align: center; margin-top: 3rem; }
.mark-read button { padding: .75rem 2rem; font-size: .85rem; }
.to-top { text-align: center; margin-top: 2.5rem; font-size: .75rem; }
.to-top a { color: var(--faint); text-decoration: none; }
.to-top a:hover { color: var(--fg); }
form.actions { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; font-size: .85rem; }

/* Scripture: set like a book. Indented paragraphs, no gaps between them. */
.scripture { font: var(--text-size)/1.7 var(--serif); font-optical-sizing: auto; hanging-punctuation: first; }
.scripture p { text-indent: 1.4em; }
.scripture p:first-child, .scripture h4 + p, .scripture p.m { text-indent: 0; }
.scripture p.q1, .scripture p.q2, .scripture p.q3 { padding-left: 2em; text-indent: -1em; }
.scripture p.q2 { padding-left: 3em; }
.scripture p.q3 { padding-left: 4em; }
.scripture p:not([class^="q"]) + p[class^="q"] { margin-top: .6em; }
.scripture p[class^="q"] + p:not([class^="q"]) { margin-top: .6em; text-indent: 0; }
.scripture p.d { font-style: italic; color: var(--muted); text-indent: 0; text-align: center; margin-bottom: .4em; }
.scripture p.pc { text-align: center; text-indent: 0; }
.scripture h4.section { font: italic 400 .95em/1.4 var(--serif); color: var(--muted); text-align: center; margin: 2em 0 .8em; }
.scripture h4.section:first-child { margin-top: 0; }
.scripture .chapter-num { float: left; font-size: 3.1em; line-height: .85; margin: .08em .2em 0 0; color: var(--chapter); font-weight: 400; }
.scripture p.p:has(.chapter-num) { text-indent: 0; }
/* When a chapter opens with poetry (most psalms), set the number on its own line above it, as a psalter does. */
.scripture p[class^="q"] .chapter-num { float: none; display: block; text-indent: 0; text-align: center; font-size: 2.2em; line-height: 1; margin: 0 0 .3em calc(-2em / 2.2); }
.scripture p.q2 .chapter-num { margin-left: calc(-3em / 2.2); }
.scripture p.q3 .chapter-num { margin-left: calc(-4em / 2.2); }
/* Space between one chapter's end and the next chapter's start (a psalm's title, or its number). */
.scripture p[class]:has(.chapter-num):not(:first-child), .scripture p.d:not(:first-child) { margin-top: 2em; }
.scripture p.d + p[class]:has(.chapter-num):not(:first-child) { margin-top: 0; }
:root:not([data-headings="off"]) .scripture h4 + p[class]:has(.chapter-num):not(:first-child),
:root:not([data-headings="off"]) .scripture h4 + p.d:not(:first-child) { margin-top: 0; }
.scripture .verse-num { font: 500 .5em var(--sans); color: var(--faint); vertical-align: .6em; margin-right: .2em; line-height: 0; }
.scripture .fn { font: 500 .55em var(--sans); line-height: 0; }
.scripture .fn a { color: var(--rubric); text-decoration: none; }
.scripture .add { font-style: italic; }
.scripture .selah { font-style: italic; color: var(--muted); }
.scripture + .scripture { margin-top: 0; }
.mark { text-align: center; font-size: .72rem; letter-spacing: .08em; color: var(--faint); margin-top: 2rem; }
.footnotes { font: .82rem/1.55 var(--sans); color: var(--muted); margin-top: 1.25rem; }
.footnotes summary { cursor: pointer; width: max-content; margin: 0 auto; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; list-style: none; }
.footnotes summary::-webkit-details-marker { display: none; }
.footnotes[open] summary { margin-bottom: .75rem; }
.footnotes ol { list-style: lower-alpha; padding-left: 1.4rem; margin: 0; }
.footnotes li { margin: .3rem 0; padding: 0 .25rem; }
.footnotes li::marker { color: var(--rubric); }
.footnotes li:target { background: var(--soft); }
.footnotes .back { text-decoration: none; color: var(--faint); }

/* Plans */
.plan-group { margin-top: 3.5rem; }
.plan-group > .kicker { text-align: center; color: var(--rubric); }
.group-note { text-align: center; font: italic 1rem/1.5 var(--serif); color: var(--muted); margin: .4rem auto 0; max-width: 30rem; }
ul.plans { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
li.plan { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
li.plan h3 { font: 400 1.35rem/1.3 var(--serif); }
li.plan p { margin-top: .3rem; font-size: .88rem; color: var(--muted); }
li.plan p.plan-meta { margin-top: .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.plan-action { flex-shrink: 0; }
/* On/off switch: is this plan on the Today page? */
label.switch { position: relative; display: inline-block; width: 2.6rem; height: 1.5rem; cursor: pointer; }
label.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
label.switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .2s; }
label.switch .track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--raised); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .2s; }
label.switch input:checked + .track { background: var(--chapter); }
label.switch input:checked + .track::after { transform: translateX(1.1rem); }
label.switch input:focus-visible + .track { outline: 2px solid var(--rubric); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { label.switch .track, label.switch .track::after { transition: none; } }
.build details > summary { cursor: pointer; text-align: center; font: 1.15rem var(--serif); margin-top: .75rem; list-style: none; }
.build details > summary::-webkit-details-marker { display: none; }
.build details > summary::after { content: " +"; color: var(--faint); }
.build details[open] > summary::after { content: " −"; }
.build form { margin-top: 1.5rem; }
fieldset.books { border: 0; padding: 0; margin: 2rem 0 0; }
fieldset.books legend { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 .5rem; margin-bottom: .75rem; border-bottom: 1px solid var(--line); font: 500 .7rem var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.book-grid { columns: 3 9rem; column-gap: 1.5rem; font: .98rem/1.4 var(--serif); }
.book-grid label { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; cursor: pointer; break-inside: avoid; }
.fields { display: grid; gap: 1.5rem; margin: 2.5rem 0 2rem; }
.fields label { display: grid; gap: .2rem; }
.fields label > span:first-child { font: 500 .7rem var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.fields .optional { text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 400; }
.fields select { justify-self: start; }
.build button.primary { display: block; margin: 0 auto; padding: .75rem 2rem; }

/* Adjust a plan */
.current { margin-top: 2rem; }
.current .current-passage { display: block; font: 1.5rem/1.3 var(--serif); margin-top: .3rem; }
.settings { border-top: 1px solid var(--line); }
.settings > form, .settings > p { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.settings label { display: block; font: 500 .7rem var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.settings .hint { font: italic 1rem/1.5 var(--serif); margin: .4rem 0 .9rem; }
.settings label + .inline { margin-top: .6rem; }
.settings .inline { display: flex; align-items: end; gap: .75rem; }
.settings .inline input { flex: 1; max-width: 18rem; }
.settings input[type=number] { max-width: 5rem; }
.settings .leave { border-bottom: 0; }

@media (max-width: 34rem) {
  :root { --text-size: 1.15rem; }
  :root[data-size="s"] { --text-size: 1.02rem; }
  :root[data-size="l"] { --text-size: 1.3rem; }
  :root[data-size="xl"] { --text-size: 1.48rem; }
  .page-head { margin: 2.75rem 0 2.25rem; }
  .page-head h1 { font-size: 2.1rem; }
  .reading-head h2 { font-size: 1.65rem; }
  section.reading { padding-top: 3.25rem; }
  section.reading + section.reading { margin-top: 3.25rem; }
  header.site nav { gap: 1rem; }
}