/* Verse & Quote of the Day
   Copyright (C) 2026  Kevin Bell
   Licensed under the GNU Affero General Public License v3 or later. */

:root {
  --paper:      #faf7f2;
  --card:       #ffffff;
  --ink:        #1e1b16;
  --ink-soft:   #5c5347;
  --ink-faint:  #8a8073;
  --rule:       #e6dfd3;
  --accent:     #7a5c2e;
  --accent-ink: #6b4f26;
  --shadow:     0 1px 2px rgba(40, 30, 15, .05), 0 6px 20px rgba(40, 30, 15, .05);
}

/* The system setting still decides on its own, as it always has -- unless the
   reader has overridden it, which is what data-theme on <html> records. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #16171a;
    --card:       #1d1f23;
    --ink:        #ece8e1;
    --ink-soft:   #b3ada3;
    --ink-faint:  #857f76;
    --rule:       #2e3238;
    --accent:     #d8b878;
    --accent-ink: #e6c88a;
    --shadow:     0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
  }
}

/* Chosen dark, on a system set to light. Keep this palette identical to the
   one above -- they are the same theme reached two different ways. */
:root[data-theme="dark"] {
  --paper:      #16171a;
  --card:       #1d1f23;
  --ink:        #ece8e1;
  --ink-soft:   #b3ada3;
  --ink-faint:  #857f76;
  --rule:       #2e3238;
  --accent:     #d8b878;
  --accent-ink: #e6c88a;
  --shadow:     0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
}

/* Tell the browser too, so its own furniture -- scrollbars, form controls,
   the canvas behind the page -- follows the choice rather than the system. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

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

body {
  margin: 0;
  padding: clamp(1.5rem, 5vw, 4rem) 1.25rem clamp(3rem, 6vw, 5rem);
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* ---------- theme toggle ---------- */

/* Hidden in the markup and revealed by the script, so a reader without
   JavaScript is not shown a button that cannot do anything. */
.toolbar {
  max-width: 46rem;
  margin: 0 auto clamp(.75rem, 2vw, 1.25rem);
  display: flex;
  justify-content: flex-end;
}

.theme-toggle {
  font: inherit;
  font-size: .78rem;
  padding: .3rem .85rem;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

/* ---------- masthead ---------- */

.masthead {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}

.eyebrow {
  margin: 0 0 .75rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.masthead h1 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(1.75rem, 5.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.today {
  margin: .85rem 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* ---------- cards ---------- */

#cards {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1.4rem, 4vw, 2.25rem);
  box-shadow: var(--shadow);
}

.card__label {
  margin: 0 0 1.15rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.card__label span {
  display: block;
  margin-top: .25rem;
  font-weight: 500;
  color: var(--ink-faint);
}

.week {
  margin: -.4rem 0 1.15rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* ---------- the readings ---------- */

blockquote {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  hyphens: auto;
}

.scripture {
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  line-height: 1.62;
}

/* A scripture mastery passage is quoted whole, however many verses it runs to,
   because the verses of one teach as a piece -- Moroni 7:45's account of what
   charity does only lands with 7:47's "charity is the pure love of Christ"
   after it. A long one is set a step smaller so it still reads as a single
   block on a phone rather than filling the screen. */
.scripture--long {
  font-size: clamp(1rem, 2.3vw, 1.12rem);
  line-height: 1.58;
}

.quote {
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  line-height: 1.6;
  font-style: italic;
}

/* A talk taught in long paragraphs is quoted at length rather than not at all,
   and set a step smaller on the same terms as a long scripture passage. */
.quote--long {
  font-size: clamp(.97rem, 2.2vw, 1.06rem);
  line-height: 1.56;
}

/* A hanging open-quote, kept out of the text flow so it never shifts the
   first line's left edge. */
.quote::before {
  content: "\201C";
  position: absolute;
  margin-left: -.55em;
  color: var(--accent);
  opacity: .45;
  font-size: 1.9em;
  line-height: 1;
}

/* The speaker, photographed giving the talk the quote is taken from. Sized in
   rems and given its aspect ratio up front so the card does not jump when the
   photo arrives. */
.portrait {
  margin: 1.4rem 0 0;
  text-align: center;
}

.portrait img {
  width: 100%;
  max-width: 17rem;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.ref {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
  color: var(--ink-soft);
}

.ref cite { font-style: normal; }

/* Non-breaking spaces around the separators: ordinary spaces at an element
   boundary get collapsed away, which closes the gap up. */
.speaker { font-weight: 600; color: var(--ink); }
.speaker::after { content: "\00A0\00B7\00A0"; font-weight: 400; color: var(--ink-faint); }
.session::before { content: "\00A0\00B7\00A0"; color: var(--ink-faint); }

a {
  color: var(--accent-ink);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

a:focus-visible, :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- share ---------- */

/* Two ways to the same offer, so they are given the same pill: the button,
   hidden in the markup and revealed by the script, which opens the reader's
   share sheet; and the block underneath it, which is the whole of sharing for
   a reader with JavaScript switched off and which the script puts away when
   the button comes up. Both themes put the page's own background colour on
   the accent, which stays legible whichever way round they are. */
.share,
.share-fallback > summary {
  margin: 1.15rem 0 0;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  display: inline-block;
  padding: .5rem 1.35rem;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

/* An author `display` beats the browser's own rule for [hidden], so the
   attribute needs saying again here or the button shows through. */
.share[hidden], .share-fallback[hidden] { display: none; }

.share:hover,
.share-fallback > summary:hover { background: var(--accent-ink); }

/* The disclosure triangle would sit outside the pill. Taking `display` off
   `list-item` is what removes it in most browsers; Safari wants its own
   pseudo-element told as well. */
.share-fallback > summary { list-style: none; }
.share-fallback > summary::-webkit-details-marker { display: none; }

.share-fallback__hint {
  display: block;
  margin: 1rem 0 .4rem;
  font-size: .8rem;
  color: var(--ink-soft);
}

/* The passage as it will be pasted, in a field rather than as prose, because
   a field is the one thing a browser lets you select the whole of and copy
   without a script -- a long press on a phone, ctrl-A on a keyboard. */
.share-fallback__text {
  display: block;
  width: 100%;
  font: inherit;
  font-size: .85rem;
  line-height: 1.55;
  padding: .7rem .8rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  resize: vertical;
}

/* ---------- notices ---------- */

.card--notice { border-style: dashed; box-shadow: none; }

.card--notice h2 {
  margin: 0 0 .6rem;
  font-size: 1rem;
  font-weight: 600;
}

.card--notice p { margin: 0; color: var(--ink-soft); font-size: .93rem; }

/* ---------- colophon ---------- */

.colophon {
  max-width: 46rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: .8rem;
  line-height: 1.6;
}

.colophon p { margin: 0 0 .6rem; }
.colophon a { color: var(--ink-soft); }
.generated { white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise .45s ease-out both; }
  .card:nth-of-type(2) { animation-delay: .06s; }
  .card:nth-of-type(3) { animation-delay: .12s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

@media print {
  body { background: #fff; color: #000; padding: 0; }
  .card { border: none; box-shadow: none; page-break-inside: avoid; }
  .eyebrow, .colophon, .toolbar, .share, .share-fallback { display: none; }
}