/* Design tokens lifted from the original build's :root. Keeping oklch (rather
   than converting to hex) preserves the exact colors on wide-gamut displays. */
:root {
  --coral:      oklch(67.9% .201 30.1);
  --coral-deep: oklch(57.3% .183 32);
  --sun:        oklch(80.4% .161 76.5);
  /* Light sky blue page. Named --cream throughout for continuity with the
     original build; it is the page/on-dark surface colour, whatever its hue. */
  --cream:      oklch(95.5% .032 232);
  --ink:        oklch(25.3% .019 47);
  --sage:       oklch(61.7% .132 155);
  --sage-deep:  oklch(50% .115 155);
  /* "Today" on the journey grid. Deeper than the sky-blue page so the pill
     still reads as the one thing to tap. */
  --today:      oklch(58% .168 250);
  --today-deep: oklch(47% .147 250);
  --muted:      oklch(91% .035 232);
  --card:       oklch(100% 0 0);

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --ring: 0 0 0 1px rgb(0 0 0 / 0.05);
}

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

html {
  /* Stop iOS inflating body text when a phone is turned to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Citation URLs in the source text are long single tokens; without this they
     push the layout wider than a phone viewport. */
  overflow-wrap: break-word;
  /* The default blue flash fires on taps *and* on scroll-starts, which reads as
     the page glitching while you read. Pressed states are handled per-control. */
  -webkit-tap-highlight-color: transparent;
  /* Stop the rubber-band at the ends of the book from scrolling the page behind
     it / triggering pull-to-refresh mid-read. */
  overscroll-behavior-y: contain;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  /* Room for the home indicator / notch on phones. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px) { .wrap { padding: 0 1.5rem; } }

/* ---------- shared atoms ---------- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in oklab, var(--ink) 45%, transparent);
}

.card {
  background: var(--card);
  border-radius: 1rem;
  box-shadow: var(--ring);
}

/* The signature control: a solid, unblurred offset shadow that the button
   visibly presses down into when tapped. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 1rem;
  border: 0;
  border-radius: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--cream);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-coral { background: var(--coral); box-shadow: 0 10px 0 0 var(--coral-deep); }
.btn-sage  { background: var(--sage);  box-shadow: 0 9px 0 0 var(--sage-deep); }

@media (hover: hover) {
  .btn-coral:hover, .btn-sage:hover { transform: translateY(-2px); }
}
.btn-coral:active { transform: translateY(4px); box-shadow: 0 3px 0 0 var(--coral-deep); }
.btn-sage:active  { transform: translateY(4px); box-shadow: 0 3px 0 0 var(--sage-deep); }
/* The Appendix's "Start again at Day 1" button, close under its sentence. */
/* A <button>, unlike the <a> "Next up" links that share .btn-plain, doesn't inherit the font. */
.blocks .restart-btn { margin-top: -0.5rem; font-family: var(--font-body); }

.btn-plain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  border: 0;
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--ring);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s;
}
.btn-plain:active { transform: scale(0.99); }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Entry animation, matched to the original's easing. */
.anim { animation: fadeUp 0.7s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anim { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- home ---------- */

.home { padding-block: calc(2rem + env(safe-area-inset-top, 0px)) 5rem; }

/* The masthead is the page's headline act: a small setup line over the title,
   with nothing competing beside it. */
.masthead { text-align: center; }
/* Same colour, weight and family as before — only the size changed, so that
   "Scientists and Prophets agree that" stays on one line. Measured: it needs
   <=16.5px at 320px and <=21px at 390px. */
.masthead-kicker {
  font-size: 1rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
  white-space: nowrap;
}
@media (min-width: 375px) { .masthead-kicker { font-size: 1.1875rem; } }
@media (min-width: 640px) { .masthead-kicker { font-size: 1.375rem; } }
.masthead-title {
  margin-top: 0.375rem;
  font-weight: 800;
  line-height: 1.05;
}
/* Each line is its own block so the break never depends on available width. */
.masthead-line1,
.masthead-line2 { display: block; }
.masthead-line1 { font-size: 2.25rem; }
.masthead-line2 { font-size: 2.8125rem; }
@media (min-width: 640px) {
  .masthead-line1 { font-size: 2.875rem; }
  .masthead-line2 { font-size: 3.625rem; }
}

.hero { margin-top: 1.75rem; text-align: center; }
.hero-kicker { font-size: 0.875rem; font-weight: 500; color: color-mix(in oklab, var(--ink) 55%, transparent); }
/* Deliberately smaller than .masthead-title — it's a prompt, not the headline. */
.hero-ask {
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.home-cta { margin-top: 1.25rem; }

/* streak card */
.streak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 0.875rem 1rem;
  text-align: center;
  background: var(--card);
  border-radius: 1.5rem;
  box-shadow: var(--ring);
}
.streak-body { min-width: 0; }
.streak-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.streak-sub { margin-top: 0.125rem; font-size: 0.875rem; font-weight: 500; color: color-mix(in oklab, var(--ink) 55%, transparent); }

.journey { margin-top: 2.5rem; }
.journey-head { display: flex; align-items: center; gap: 0.75rem; }

.dots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.375rem 0.5rem;
  margin-top: 1rem;
}
/* The pill is 40px inside a 45px row. The wrapper <a> is what gets tapped, so
   its height is what must clear the 44px touch minimum — it does, but only by a
   point, so re-measure at 320px before shrinking anything here. */
.dot-link {
  display: grid;
  place-items: center;
  min-height: 2.8125rem;
  border-radius: 999px;
}
.dot {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--card);
  color: color-mix(in oklab, var(--ink) 35%, transparent);
  box-shadow: var(--ring);
}
.dot { font-variant-numeric: tabular-nums; }
.dot.done    { background: var(--sage);  color: var(--cream); box-shadow: none; }
.dot.current { background: var(--today); color: var(--cream); box-shadow: 0 3px 0 0 var(--today-deep); }
/* Sits on the pill's edge so the day number underneath stays readable. Colour
   alone is a weak signal, so completion gets a shape too. */
.dot { position: relative; transition: transform 0.12s; }
.dot-check {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--sage-deep);
  color: var(--cream);
  box-shadow: 0 0 0 2px var(--cream);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}
.dot-link:active .dot { transform: scale(0.88); }

.day-list { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.day-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card);
  border-radius: 1rem;
  box-shadow: var(--ring);
  transition: transform 0.15s;
}
@media (hover: hover) { .day-row:hover { transform: translateY(-2px); } }
.day-row:active { transform: scale(0.985); }
.day-row-num {
  width: 4.75rem;
  flex-shrink: 0;
  font-size: 0.6875rem;
  /* body sets break-word globally for citation URLs; this column must not
     break a label mid-word. */
  overflow-wrap: normal;
  font-weight: 600;
  text-transform: uppercase;
  /* "Introduction" and "Appendix" are long enough to wrap mid-word at
     this width; the tighter tracking keeps each on one line. */
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: color-mix(in oklab, var(--ink) 40%, transparent);
}
.day-row-title {
  min-width: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.day-row-check { font-size: 0.875rem; font-weight: 700; color: var(--sage); }

.home-foot { margin-top: 2.5rem; text-align: center; }
.reset-btn {
  border: 0;
  background: none;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--ink) 40%, transparent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.reset-btn:active { color: var(--ink); }
.pdf-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--ink) 40%, transparent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- day + start-here ---------- */

.sticky-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklab, var(--cream) 85%, transparent);
  backdrop-filter: blur(6px);
  padding-top: env(safe-area-inset-top, 0px);
}
.sticky-inner { display: flex; align-items: center; gap: 1rem; padding-block: 0.75rem; }
/* 36px circle centered inside a 44px hit area: the <a> is the touch target, the
   inner span is what you see. Keeps the visual weight while clearing the
   minimum tappable size. */
.back {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -0.25rem;
  border-radius: 999px;
  transition: transform 0.15s;
}
.back:active i { transform: scale(0.9); }
.back i {
  transition: transform 0.15s;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--ring);
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}
.back:active { transform: scale(0.9); }
/* The page label fills the header on its own now that the progress bar is gone. */
.head-label { flex: 1; min-width: 0; font-size: 1rem; letter-spacing: 0.12em; }

.lesson { padding-block: 2rem 7rem; }

.day-eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--coral); }
.day-title {
  margin-top: 0.5rem;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}
@media (min-width: 640px) { .day-title { font-size: 3rem; } }

.blocks { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.5rem; }
.blocks p { font-size: 1.125rem; line-height: 1.7; text-wrap: pretty; }
/* The book's subtitle on the Introduction: bold, 2px above body text. */
.blocks p.intro-subtitle { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.blocks h3 { padding-top: 1rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
/* A heading that should stay on one line where it can: it scales down on
   narrow phones, and still wraps (rather than overflowing) if it must. */
.blocks h3.h-fit { font-size: clamp(1.125rem, 5.4vw, 1.5rem); }
/* "by Wendy Ulrich" — pulled up against its heading, against the 1.5rem gap. */
.blocks p.attribution { margin-top: -1.125rem; font-size: 1rem; font-weight: 600; color: color-mix(in oklab, var(--ink) 60%, transparent); }
.blocks blockquote {
  margin: 0;
  border-left: 4px solid var(--sun);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  padding: 1rem 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}
.blocks ul, .blocks ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.blocks ul { gap: 0.625rem; }
.blocks ol { gap: 1rem; }
.blocks li { display: flex; gap: 0.75rem; font-size: 1.125rem; line-height: 1.7; }
.bullet { margin-top: 0.625rem; width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 999px; background: var(--coral); }
.num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}
.lines { background: var(--card); border-radius: 1rem; box-shadow: var(--ring); padding: 1rem; }

/* aspect-ratio from the width/height attributes holds the slot before the image
   loads, so text never jumps while someone is reading. */
.figure { margin: 0; }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: var(--ring);
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}
.figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
}
.lines p { padding: 0.25rem 0; font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }

/* activity card */
.activity {
  margin-top: 3rem;
  border-radius: 1.5rem;
  background: var(--ink);
  color: var(--cream);
  padding: 1.5rem;
}
.activity-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.activity h2 { margin-top: 1rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.activity-body { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 1rem; font-size: 1rem; line-height: 1.7; color: color-mix(in oklab, var(--cream) 85%, transparent); }
.activity-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.activity-body li { text-wrap: pretty; }
.activity-body .sub { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--cream); }

/* Labelled answer boxes in an activity (Day 3: Trigger / Behavior / Result).
   Each starts one line tall, at the 44px touch minimum, and grows as you type.
   16px text keeps iOS Safari from zooming in when a box is tapped. */
.fields { display: flex; flex-direction: column; gap: 0.5rem; }
.fields .sub { margin-bottom: 0.125rem; }
.field { display: grid; grid-template-columns: 5.5rem 1fr; align-items: start; gap: 0.625rem; }
.field-name { padding-top: 0.625rem; font-weight: 700; line-height: 1.5; color: var(--cream); }
.field textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  resize: none;
  overflow: hidden;
  border: 0;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--cream) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cream) 15%, transparent);
  padding: 0.625rem 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cream);
}
.field textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--sun); }
/* Box layouts: a bullet beside each box, the question above it, or the box alone. */
.fields-bullets .field { grid-template-columns: 1rem 1fr; }
.fields-bullets .field-name { font-weight: 700; text-align: center; }
.fields-stacked { gap: 0.875rem; }
.fields-stacked .field { grid-template-columns: 1fr; gap: 0.375rem; }
.fields-stacked .field-name { padding-top: 0; font-weight: 600; }
.fields-plain .field { grid-template-columns: 1fr; }

/* Tap-to-choose pills (Day 25). Each is a full 44px target; long options wrap
   inside the pill. The pick is shown by colour AND, for checks, a tick — colour
   alone is a weak signal. */
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 1.375rem;
  background: color-mix(in oklab, var(--cream) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cream) 25%, transparent);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}
.choice:active { transform: scale(0.97); }
/* A link inside the book's text (Day 4's Book of Mormon App). Same trick as .source-link:
   vertical padding gives a 44px tap height without spreading the lines apart. */
.text-link {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:active { opacity: 0.6; }
.choice[aria-checked="true"], .choice[aria-pressed="true"] { background: var(--sun); color: var(--ink); box-shadow: none; }
.choice-check[aria-pressed="true"]::before { content: "\2713"; margin-right: 0.4em; }
/* A 1–5 scale: equal-width pills across the card, ends explained beneath. */
.scale .choices { flex-wrap: nowrap; }
.scale .choice { flex: 1 1 0; justify-content: center; padding-inline: 0; text-align: center; }
.scale-ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.4; color: color-mix(in oklab, var(--cream) 60%, transparent); }
.scale-ends span:last-child { text-align: right; }
/* The same boxes in the lesson itself (Day 5's Review), on the light page. */
.blocks .field-name { color: var(--ink); }
.blocks .field textarea { background: var(--card); box-shadow: var(--ring); color: var(--ink); }
.blocks .field textarea:focus { box-shadow: 0 0 0 2px var(--sun); }

.reflect { display: block; margin-top: 1.5rem; }
.reflect-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in oklab, var(--cream) 50%, transparent); }
.reflect textarea {
  display: block;
  margin-top: 0.5rem;
  width: 100%;
  min-height: 7.5rem;
  resize: none;
  border: 0;
  border-radius: 1rem;
  background: color-mix(in oklab, var(--cream) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cream) 15%, transparent);
  padding: 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cream);
}
.reflect textarea::placeholder { color: color-mix(in oklab, var(--cream) 35%, transparent); }
.reflect textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--sun); }
/* Lives on the dark activity card, so it's outlined rather than filled — it is
   an offer, not the primary action there. */
.save-reflect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--cream) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cream) 30%, transparent);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}
@media (hover: hover) {
  .save-reflect:hover { background: color-mix(in oklab, var(--cream) 20%, transparent); }
}
.save-reflect:active { transform: scale(0.97); }

.reflect-note { display: block; margin-top: 0.5rem; font-size: 0.75rem; color: color-mix(in oklab, var(--cream) 45%, transparent); }
/* Shown in place of the usual note only when writing genuinely won't survive
   (private window, blocked site data). Amber rather than red: it's a caution
   about the browser, not an error the reader caused. */
.reflect-warn {
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--sun) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sun) 45%, transparent);
  color: var(--sun);
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- sources ---------- */

/* Deliberately quiet: present and checkable, but never competing with the
   lesson. Set below body size and in the muted ink. */
.sources {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.sources-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in oklab, var(--ink) 45%, transparent);
}
.sources-list {
  list-style: decimal;
  margin: 0.625rem 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sources-list li {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
  /* Journal URLs are long single tokens; let them wrap rather than overflow. */
  overflow-wrap: anywhere;
}
/* Footnote numbers in the lesson text, matching the numbered list above.
   line-height: 0 keeps a superscript from pushing its line apart. */
.fn-ref {
  font-size: 0.7em;
  line-height: 0;
  margin-left: 0.1em;
  font-weight: 600;
  /* Inherit, so it reads on both the light page and the dark activity card. */
  color: inherit;
  opacity: 0.7;
}
.sources-list li::marker {
  color: color-mix(in oklab, var(--ink) 35%, transparent);
  font-size: 0.75rem;
}
/* An inline-block with vertical padding gives the link a 44px tap height
   without adding visible space between the citation's lines. */
.source-link {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.day-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  /* Clear the home indicator so the last button isn't half under it. */
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.day-streak { margin-top: 2.5rem; }

/* start-here */
.intro-byline { margin-top: 0.5rem; font-size: 1rem; font-weight: 500; color: color-mix(in oklab, var(--ink) 55%, transparent); }
/* Each copyright line must stay on one line, down to a 320px screen. */
.byline-line { display: block; white-space: nowrap; }
/* The copyright block sits a step below the byline. */
.intro-copyright { font-size: 0.875rem; }

/* ---------- small phones ---------- */

/* Seven 44px columns cannot fit inside a 320px screen's gutters, so the grid
   reflows to five and every dot keeps a full-size touch target. */
@media (max-width: 360px) {
  /* Six columns is the book's shape, so it is kept even here; the gap tightens
     instead so each cell still clears a 44px touch target. */
  .dots { gap: 0.25rem 0.125rem; }
  .streak { gap: 0.75rem; padding: 0.875rem; }
  .hero { gap: 0.875rem; }
  .day-row-num { width: 3.75rem; }
}

/* ---------- landscape phones ---------- */

/* Placed last so it wins over the base type sizes above. On a short landscape
   viewport the sticky header would otherwise eat ~15% of the screen. */
@media (max-height: 460px) and (orientation: landscape) {
  .sticky-inner { padding-block: 0.25rem; }
  .back, .back i { width: 2.25rem; height: 2.25rem; }
  .lesson { padding-block: 1.25rem 4rem; }
  .day-title { font-size: 1.75rem; }
  .home { padding-block: 1.5rem 3rem; }
  .blocks { margin-top: 1.5rem; }
}