/* Layout and the shared look. Every theme ships on top of this file:
   it holds the structure (grids, container queries, the study region,
   the pinned video) and a look written only in tokens. A theme sets the
   tokens in theme.json and adds the few rules its look needs beyond them,
   in its theme.css. Written against elements and data-* hooks only.

   The defaults below are the tokens this file needs; theme.json values
   come later in the cascade and replace them. */

:root {
  --scheme: light;
  --color-bg: #ffffff;
  --color-surface: #f6f5f2;
  --color-surface-border: #e5e5e5;
  --color-text: #1f1f1f;
  --color-muted: #5b5b5b;
  --color-accent: #0c75f2;
  --color-accent-contrast: #ffffff;
  --color-rule: #e5e5e5;
  --color-ok: oklch(72% 0.14 160);
  --page-bg: var(--color-bg);
  --card-bg: var(--color-surface);
  --card-border: 1px solid var(--color-surface-border);
  --card-shadow: none;
  --card-blur: none;
  --shadow-card: none;
  --title-fill: linear-gradient(var(--color-text), var(--color-text));
  --accent-fill: var(--color-accent);
  --hover-wash: oklch(0% 0 0 / 0.05);
  --answer-bg: var(--color-bg);
  --painting-bg: oklch(0% 0 0 / 0.3);
  --font-body: system-ui, sans-serif;
  --font-heading: system-ui, sans-serif;
  --font-size: 1rem;
  --line-height: 1.65;
  --measure: 56rem;
  --radius: 0.75rem;
  --pill-radius: 999px;
}

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

html { -webkit-text-size-adjust: 100%; color-scheme: var(--scheme); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* Cards: the surfaces content sits on. A flat theme sets the card tokens
   to transparent and none. */
[data-role="book-card"],
[data-role="book-lessons"],
[data-role="series-nav"] a,
[data-role="lesson-header"],
[data-role="pager"] a,
[data-component],
[data-region="masthead"] {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
}

/* Display headings take --title-fill through the text: a gradient, or one
   colour as linear-gradient(c, c). */
[data-page] > h1,
[data-role="lesson-header"] h1 {
  background: var(--title-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Shell ------------------------------------------------------------ */

[data-region="masthead"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem auto 0;
  max-width: var(--measure);
  padding: 0.75rem 1.25rem;
}

[data-brand] { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--color-text); font-weight: 600; }
[data-brand]:hover { text-decoration: none; }
[data-brand] img { height: 1.75rem; width: auto; }
/* The brand lockup: wordmark and ring drawn in currentColor through masks
   (the mask images are set on the elements). */
/* The brand's logo colour when it gives one (a theme's bar may set its own). */
[data-brand][data-lockup] { gap: 0.4rem; flex: 0 0 auto; color: var(--color-logo, var(--color-text)); }
[data-brand] [data-role="wordmark"], [data-brand] [data-role="mark"] i { background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
[data-brand] [data-role="wordmark"] { display: block; height: 1.3rem; width: calc(1.3rem * 770 / 96); flex: 0 0 auto; }
[data-brand] [data-role="mark"] { display: block; position: relative; width: 2rem; height: 2rem; flex: 0 0 auto; }
[data-brand] [data-role="mark"] i { position: absolute; inset: 0; }
[data-brand] [data-role="mark"] img { position: absolute; inset: 0; width: 100%; height: 100%; }

main { max-width: var(--measure); margin: 0 auto; padding: 1rem 1rem 4rem; }

/* Appearance: one button; it shows the scheme in use (light, dark, or
   the device's setting) and a click steps to the next. */
[data-action="theme"] { border: 1px solid var(--color-surface-border); background: transparent; color: var(--color-text); border-radius: 999px; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1rem; }
[data-action="theme"] span { display: none; }
[data-action="theme"][data-theme-state="system"] [data-theme-label="system"],
[data-action="theme"][data-theme-state="light"] [data-theme-label="light"],
[data-action="theme"][data-theme-state="dark"] [data-theme-label="dark"] { display: inline; }
@media print { [data-action="theme"] { display: none; } }

[data-region="footer"] { padding: 2rem 1rem 3rem; color: var(--color-muted); font-size: 0.8rem; text-align: center; }

/* Painting strips (series cards, course hero): the books' paintings edge to edge. */
[data-role="painting-strip"] { display: flex; gap: 2px; overflow: hidden; border-radius: 0.75rem; aspect-ratio: 5 / 1.4; margin: 0 0 1rem; background: var(--painting-bg); }
[data-role="painting-strip"] img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; }
[data-page="course"] > [data-role="painting-strip"] { aspect-ratio: 5 / 1.1; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); }
/* The card trick: a sliver under the pointer opens to its square (the
   strip's height, 100cqh), its neighbours open part way, as if fanned. */
[data-page="course"] > [data-role="painting-strip"] { container-type: size; gap: 0; }
[data-page="course"] > [data-role="painting-strip"] a { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; box-shadow: -1px 0 0 oklch(0% 0 0 / 0.35); transition: flex 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease; }
[data-page="course"] > [data-role="painting-strip"] img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-page="course"] > [data-role="painting-strip"] span { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; padding: 1.5rem 0.75rem 0.6rem; background: linear-gradient(transparent, oklch(0% 0 0 / 0.75)); color: #fff; font-family: var(--font-heading); line-height: 1.2; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; }
[data-page="course"] > [data-role="painting-strip"] small { font-size: 0.75rem; opacity: 0.85; }
@media (hover: hover) {
  [data-page="course"] > [data-role="painting-strip"] a:hover { flex: 0 0 100cqh; z-index: 2; box-shadow: 0 0 0 2px oklch(100% 0 0 / 0.9), 0 0 24px oklch(0% 0 0 / 0.6); }
  [data-page="course"] > [data-role="painting-strip"] a:hover span { opacity: 1; transition-delay: 0.2s; }
  [data-page="course"] > [data-role="painting-strip"] a:has(+ a:hover),
  [data-page="course"] > [data-role="painting-strip"] a:hover + a { flex-grow: 5; z-index: 1; box-shadow: 0 0 14px oklch(0% 0 0 / 0.5); }
  [data-page="course"] > [data-role="painting-strip"] a:has(+ a + a:hover),
  [data-page="course"] > [data-role="painting-strip"] a:hover + a + a { flex-grow: 2.5; }
}
@media (prefers-reduced-motion: reduce) { [data-page="course"] > [data-role="painting-strip"] a { transition: none; } }

/* Course index ----------------------------------------------------- */

[data-page="course"] > h1 { font-size: 2.5rem; text-align: center; }
[data-page="course"] [data-role="description"] { text-align: center; color: var(--color-muted); margin-bottom: 2rem; }
[data-page="course"] [data-role="course-meta"] { text-align: center; color: var(--color-muted); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin: -1.5rem 0 2rem; }
/* Series tiles: each series as a small card, its books' paintings in a
   strip over its name and its place in the course. A grid where there is
   room; on a phone, one row that scrolls sideways. */
[data-role="series-nav"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem; margin: 0 0 2rem; }
[data-role="series-nav"] a {
  display: flex; flex-direction: column; gap: 0.2rem;
  overflow: hidden; padding: 0 0 0.75rem;
  color: var(--color-text); text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
[data-role="series-paintings"] { display: flex; gap: 1px; height: 3.25rem; margin: 0 0 0.45rem; background: var(--painting-bg); }
[data-role="series-paintings"] img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; }
[data-role="series-name"] { padding: 0 0.85rem; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; line-height: 1.25; }
[data-role="series-span"] { padding: 0 0.85rem; color: var(--color-muted); font-family: var(--font-heading); font-size: 0.75rem; }
[data-role="series-span"] > span { white-space: nowrap; }
[data-role="series-span"] > span + span::before { content: " · "; }
@media (hover: hover) { [data-role="series-nav"] a:hover { border-color: var(--color-accent); transform: translateY(-2px); text-decoration: none; } }
[data-role="series-nav"] a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { [data-role="series-nav"] a { transition: none; } }
@media (max-width: 36rem) {
  [data-role="series-nav"] {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 9.5rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -0.25rem; padding: 0.25rem 0.25rem 0.5rem;
  }
  [data-role="series-nav"]::-webkit-scrollbar { display: none; }
  [data-role="series-nav"] a { scroll-snap-align: start; }
}

/* Paced: series cards only at first. A picked series (#pentateuch) shows
   its book cards; a picked book (#book-genesis) shows its lessons too.
   A course with one series shows it at once. */
[data-page="course"] [data-role="series"],
[data-page="course"] [data-role="book-lessons"] { display: none; }
[data-page="course"] [data-role="series"]:is(:target, :has(:target)),
[data-page="course"]:not(:has([data-role="series-nav"])) [data-role="series"],
[data-page="course"] [data-role="book-lessons"]:target { display: block; }
[data-page="course"]:has([data-role="series"]:target, [data-role="series"] :target) [data-role="series-hint"] { display: none; }
[data-role="series-hint"] { text-align: center; color: var(--color-muted); margin: -1rem 0 2rem; }
[data-role="series"], [data-role="book-lessons"] { scroll-margin-top: 1rem; }
/* The picked series and book stay marked (site.js sets aria-current). */
[data-role="series-nav"] a[aria-current],
[data-role="book-card"][aria-current] { border-color: var(--color-accent); box-shadow: var(--card-shadow), 0 0 0 2px var(--color-accent); }

/* Wider than the reading measure, so a long book's lessons fit on one
   screen in columns. */
@media (min-width: 64rem) { main:has([data-page="course"]) { max-width: min(80rem, calc(100vw - 3rem)); } }

[data-page="course"] [data-role="series-title"] { font-size: 1.35rem; margin: 0 0 0.25rem; }
[data-page="course"] [data-role="series-description"] { color: var(--color-muted); margin: 0 0 1rem; }
[data-role="book-grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
@media (max-width: 36rem) { [data-role="book-grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } }
[data-role="book-card"] {
  display: flex; flex-direction: column; gap: 0.1rem; overflow: hidden; padding: 0 0 0.65rem;
  color: var(--color-text); text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) { [data-role="book-card"]:hover { border-color: var(--color-accent); transform: translateY(-2px); text-decoration: none; } }
[data-role="book-card"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { [data-role="book-card"] { transition: none; } }
[data-role="book-painting"] { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: 0 0 0.4rem; background: var(--painting-bg, var(--hover-wash)); }
[data-role="book-painting"] img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
[data-role="book-name"], [data-role="book-moniker"], [data-role="book-count"] { padding: 0 0.7rem; }
[data-role="book-name"] { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
[data-role="book-moniker"] { color: var(--color-muted); font-size: 0.8rem; line-height: 1.25; }
[data-role="book-count"] { color: var(--color-muted); font-family: var(--font-heading); font-size: 0.72rem; margin-top: auto; padding-top: 0.25rem; }

/* A book's lessons: its name and a start link over the list, which runs
   down in as many columns as the width holds. */
[data-role="book-lessons"] { padding: 1rem 1rem 0.75rem; }
[data-role="book-lessons"] header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
[data-role="book-lessons"] h3 { margin: 0; font-size: 1.35rem; }
[data-role="book-lessons"] header p { margin: 0; color: var(--color-muted); font-size: 0.9rem; }
[data-role="book-start"] { margin-left: auto; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; }
[data-page="course"] [data-role="lesson-list"] { display: block; columns: 12.5rem; column-gap: 1rem; }
[data-page="course"] [data-role="lesson-list"] li { break-inside: avoid; }

[data-role="lesson-list"] { list-style: none; margin: 0; padding: 0; }
[data-role="lesson-list"] a { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.4rem; border-radius: 0.5rem; color: var(--color-text); line-height: 1.25; font-size: 0.92rem; }
[data-role="lesson-list"] a:hover { background: var(--hover-wash); text-decoration: none; }
[data-role="lesson-list"] [data-role="day"] { min-width: 2.5ch; font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; opacity: 0.55; }
[data-role="lesson-list"] [data-role="lesson-name"] { display: flex; flex-direction: column; min-width: 0; }
[data-role="lesson-list"] [data-role="passage"] { font-size: 0.78rem; color: var(--color-muted); }
/* Where the lesson's image will go; a tinted block until the images come. */
[data-role="lesson-thumb"] { flex: 0 0 auto; width: 2.4rem; aspect-ratio: 4 / 3; border-radius: 0.3rem; background: var(--painting-bg, var(--hover-wash)); background-size: cover; background-position: center; }

/* Lesson page ------------------------------------------------------ */

/* Lesson top: the header card with the previous and next lessons beside
   it, as wide as the content below. A container query, so it follows the
   width main actually has (the theater layout widens it): side by side
   when there is room, with the step pills above them. Collapsed, the
   pager shrinks to two links in the pills' row: one bar to move through
   the course, the header under it. */
[data-page="lesson"] { container-type: inline-size; }
[data-role="lesson-top"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "prev steps next" "header header header";
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
[data-role="lesson-top"] > [data-role="steps"] { grid-area: steps; margin: 0; }
[data-role="lesson-header"] { grid-area: header; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; }
[data-role="book-thumb"] { width: 4rem; flex: 0 0 auto; border-radius: 0.6rem; box-shadow: 0 4px 12px oklch(0% 0 0 / 0.4); }
[data-role="lesson-heading"] { flex: 1 1 12rem; min-width: 0; }
[data-role="crumb"] { overflow: hidden; margin: 0 0 0.35rem; color: var(--color-muted); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
/* Separated lists (crumb, lesson meta): each item reserves room for a "·"
   in front, and the list is pulled back by one separator so the one that
   would open a wrapped line falls outside its clipping parent. An item
   that itself wraps keeps its lines inside its own room. */
[data-role="sep-list"] { --sep: 1.4em; display: flex; flex-wrap: wrap; align-items: baseline; margin-inline-start: calc(-1 * var(--sep)); }
[data-role="sep-list"] > * { position: relative; padding-inline-start: var(--sep); }
[data-role="sep-list"] > *::before { content: "·"; position: absolute; inset-inline-start: 0; width: var(--sep); text-align: center; opacity: 0.7; }
[data-role="crumb"] a { color: inherit; }
[data-role="crumb"] a:hover { color: var(--color-text); text-decoration: none; }
[data-page="lesson"] h1 { font-size: 1.85rem; margin: 0; }
[data-role="lesson-meta"] { overflow: hidden; margin: 0.4rem 0 0; color: var(--color-muted); font-family: var(--font-heading); font-size: 0.95rem; }
[data-role="lesson-meta"] em { color: var(--color-text); font-style: normal; font-weight: 600; }
/* The passage links to Bible Gateway: the reference, then where it goes. */
[data-role="passage-link"] { color: var(--color-text); text-decoration: none; }
[data-role="passage-link"] strong { font-weight: 700; }
[data-role="passage-link"] small { color: var(--color-accent); font-size: 0.8em; font-weight: 500; white-space: nowrap; }
@media (hover: hover) { [data-role="passage-link"]:hover { text-decoration: none; } [data-role="passage-link"]:hover strong { text-decoration: underline; text-underline-offset: 0.2em; } [data-role="passage-link"]:hover small { text-decoration: underline; } }
[data-role="passage-link"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 0.25rem; }

/* Day of the course, with a thin bar in the accent fill. */
[data-role="lesson-aside"] { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.85rem; min-width: 10rem; }
[data-role="course-progress"] { display: flex; flex-direction: column; gap: 0.45rem; color: var(--color-muted); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
[data-role="progress-track"] { display: block; height: 4px; border-radius: 999px; background: var(--hover-wash); overflow: hidden; }
[data-role="progress-track"] > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-fill); }

/* Previous and next: cards, the direction above the lesson title. */
[data-role="pager"] { display: contents; }
[data-role="pager"] a {
  display: flex; flex-direction: column; justify-content: center; gap: 0.3rem;
  min-width: 0; padding: 0.85rem 1.1rem;
  color: var(--color-text); text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
[data-role="pager"] a[rel="prev"] { grid-area: prev; }
[data-role="pager"] a[rel="next"] { grid-area: next; align-items: flex-end; text-align: end; }
[data-role="pager"] small { color: var(--color-muted); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.15s ease; }
[data-role="pager"] a[rel="prev"] small::before { content: "‹ "; }
[data-role="pager"] a[rel="next"] small::after { content: " ›"; }
[data-role="pager-title"] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
[data-role="pager-passage"] { color: var(--color-muted); font-family: var(--font-heading); font-size: 0.8rem; }
@media (hover: hover) {
  [data-role="pager"] a:hover { background-color: var(--hover-wash); border-color: var(--color-accent); text-decoration: none; }
  [data-role="pager"] a:hover small { color: var(--color-accent); }
}
[data-role="pager"] a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { [data-role="pager"] a, [data-role="pager"] small { transition: none; } }

@container (max-width: 40rem) {
  [data-role="lesson-aside"] { flex-basis: 100%; }
}
@container (min-width: 62rem) {
  [data-role="lesson-top"] {
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(9rem, 13rem);
    grid-template-areas: "steps steps steps" "prev header next";
    align-items: stretch;
  }
  [data-role="lesson-top"] > [data-role="steps"] { width: 100%; margin-bottom: 0.75rem; }
}
@container (max-width: 61.99rem) {
  [data-role="pager"] a {
    flex-direction: row; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.15rem;
    background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    color: var(--color-muted); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600;
  }
  [data-role="pager"] a[rel="next"] { justify-content: flex-end; align-items: center; }
  [data-role="pager"] small { display: none; }
  [data-role="pager"] a:has([data-role="pager-passage"]) [data-role="pager-title"] { display: none; }
  [data-role="pager-title"] { -webkit-line-clamp: 1; font-size: inherit; }
  [data-role="pager-passage"] { overflow: hidden; color: inherit; font-size: inherit; white-space: nowrap; text-overflow: ellipsis; }
  [data-role="pager"] a[rel="prev"]::before { content: "‹"; font-size: 1.3em; }
  [data-role="pager"] a[rel="next"]::after { content: "›"; font-size: 1.3em; }
  @media (hover: hover) { [data-role="pager"] a:hover { background: none; color: var(--color-text); } }
}
/* Narrow: the pills keep their labels and take the whole row; the
   previous and next passages go on a thin row under them. */
@container (max-width: 30rem) {
  [data-role="lesson-top"] { grid-template-areas: "steps steps steps" "prev . next" "header header header"; row-gap: 0.25rem; }
  [data-role="lesson-top"] > [data-role="steps"] { justify-self: stretch; }
  [data-role="pager"] a[rel] { padding: 0.15rem 0; }
  [data-role="pager"] a[rel="prev"] { justify-content: flex-start; }
  [data-role="pager"] a[rel="next"] { justify-content: flex-end; }
}

[data-component] { margin: 0 0 1rem; padding: 1.5rem; }
[data-component] > h2 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; font-weight: 600; margin-bottom: 1rem; }

/* Content: the semantic subset, "prose"-like. */
[data-role="body"] h2, [data-role="passage"] h2 { font-size: 1.35rem; margin-top: 1.5rem; }
[data-role="body"] h3 { font-size: 1.1rem; margin-top: 1.25rem; }
[data-role="body"] p { margin: 0 0 1em; }
[data-role="body"] blockquote { margin: 1.25em 0; padding-left: 1em; border-left: 3px solid var(--color-accent); opacity: 0.85; }
[data-role="body"] table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.95em; }
[data-role="body"] th, [data-role="body"] td { padding: 0.4em 0.6em; border: 1px solid var(--color-rule); vertical-align: top; }
[data-role="body"] sup { font-size: 0.7em; }
[data-role="body"] figcaption { color: var(--color-muted); font-size: 0.9em; }

/* Video */
[data-component="video"] [data-role="player"] { position: relative; aspect-ratio: 16 / 9; background: oklch(0% 0 0 / 0.4); border-radius: 0.75rem; overflow: hidden; }
[data-component="video"] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-component="video"] [data-role="fallback"] { margin: 0.75rem 0 0; font-size: 0.85rem; opacity: 0.6; }

/* Reading */

/* Questions */
[data-role="question-list"] { padding-left: 1.4em; }
[data-role="question-list"] > li { margin-bottom: 1.25em; }
[data-role="question-list"] [data-role="prompt"] p { margin: 0; }
[data-role="answer"] textarea { display: block; width: 100%; min-height: 6rem; margin-top: 0.5rem; padding: 0.6rem; border: 1px solid var(--color-rule); border-radius: 0.5rem; font: inherit; background: var(--answer-bg); color: var(--color-text); }
[data-role="answer-bar"] { display: flex; align-items: center; gap: 0.75rem; min-height: 1.5rem; margin-top: 0.35rem; }
[data-role="answer-status"] { font-size: 0.85rem; color: var(--color-muted); }
[data-role="answer-earlier"] { margin-top: 0.4rem; font-size: 0.92rem; }
[data-role="answer-earlier"] summary { cursor: pointer; color: var(--color-muted); }
[data-role="answer-earlier-when"] { margin: 0.6rem 0 0.15rem; font-size: 0.8rem; color: var(--color-muted); }
[data-role="answer-earlier-text"] { margin: 0; padding: 0.5rem 0.6rem; border-radius: 0.5rem; background: var(--answer-bg); white-space: pre-wrap; }
[data-role="answer-signin"] { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--color-muted); }
[data-region="account"] { font-size: 0.85rem; color: var(--color-muted); display: flex; gap: 0.6rem; align-items: center; }
[data-region="account"] a { color: var(--color-accent); }

[data-component][data-progress="complete"] > h2::after { content: " ✓"; color: var(--color-ok); }


/* Curated lesson flow ---------------------------------------------- */

[data-component="devotional"] [data-role="hero"] { margin: 0 0 1.25rem; }
[data-component="devotional"] [data-role="hero"] { margin: -1.5rem -1.5rem 1.25rem; }
[data-component="devotional"] [data-role="hero"] img { display: block; width: 100%; max-height: 26rem; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
[data-role="devotional-title"] { margin: 0 0 0.25rem; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
[data-role="devotional-meta"] { margin: 0 0 1rem; color: var(--color-muted); font-family: var(--font-heading); font-size: 0.85rem; }
[data-role="devotional-meta"] span + span::before { content: " · "; }
[data-role="devotional-scripture"] { margin: 0 0 1.25rem; padding-left: 1em; border-left: 3px solid var(--color-accent); font-style: italic; }

/* Video with the sidecar (notes and questions tabs); stacked in
   portrait / narrow. */
[data-region="study"] { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 1.5rem; align-items: start; margin: 0 0 2.5rem; }
[data-region="study"] [data-component] { margin: 0; }
[data-role="study-main"] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
[data-region="study"] [data-role="sidecar"] { max-height: 80vh; overflow: auto; }
@media (max-width: 900px), (orientation: portrait) {
  /* minmax(0, …): the audio player's wide minimum must not widen the column. */
  [data-region="study"] { grid-template-columns: minmax(0, 1fr); }
  [data-region="study"] [data-role="sidecar"] { max-height: none; overflow: visible; }
}

/* Sidecar: one card holds the tab bar and the open panel, as the
   notes card did on its own. The panels inside give up their own card. */
[data-role="sidecar"] {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
}
[data-role="sidecar"] [data-tab] { background: none; border: 0; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Sidecar tabs: the card's header. The open tab carries the theme's
   accent fill as an indicator on the card's rule; the bar stays in view
   while the panel scrolls. The tab names the panel, so the panel heading
   is kept for screen readers only. */
[data-role="tabs"] {
  position: sticky; top: 0; z-index: 4;
  display: flex; gap: 0.25rem;
  padding: 0.6rem 0.75rem 0;
  border-bottom: 1px solid var(--color-surface-border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  font-family: var(--font-heading);
}
[data-role="tabs"] a {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem 0.8rem;
  border-radius: 0.65rem 0.65rem 0 0;
  color: var(--color-muted);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
@media (hover: hover) { [data-role="tabs"] a:hover { color: var(--color-text); background: var(--hover-wash); text-decoration: none; } }
[data-role="tabs"] a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
[data-role="tabs"] a::after {
  content: "";
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--accent-fill);
  opacity: 0; transform: scaleX(0.3);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-role="tab-count"] {
  min-width: 1.5rem; padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--hover-wash);
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
[data-page="lesson"]:not(:has([data-tab]:target)) [data-tab-link][data-default],
[data-page="lesson"]:has(#notes:target) [data-tab-link="notes"],
[data-page="lesson"]:has(#questions:target) [data-tab-link="questions"] { color: var(--color-text); }
[data-page="lesson"]:not(:has([data-tab]:target)) [data-tab-link][data-default]::after,
[data-page="lesson"]:has(#notes:target) [data-tab-link="notes"]::after,
[data-page="lesson"]:has(#questions:target) [data-tab-link="questions"]::after { opacity: 1; transform: none; }
[data-page="lesson"]:not(:has([data-tab]:target)) [data-tab-link][data-default] [data-role="tab-count"],
[data-page="lesson"]:has(#questions:target) [data-tab-link="questions"] [data-role="tab-count"] { background: var(--color-accent); color: var(--color-accent-contrast); }
@media (prefers-reduced-motion: reduce) {
  [data-role="tabs"] a, [data-role="tabs"] a::after, [data-role="tab-count"] { transition: none; }
}
[data-role="sidecar"]:has([data-role="tabs"]) [data-tab] > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-role="sidecar"] [data-tab] [data-role="body"] > :first-child,
[data-role="sidecar"] [data-tab] [data-role="question-list"] { margin-top: 0; }
/* A tab jump lands the card level with the pinned video card: the tab
   bar and its rule (3.7rem) plus the video's 1rem offset. */
[data-tab] { scroll-margin-top: 4.7rem; }

[data-component="media"] [data-role="audio-player"] { display: block; width: 100%; margin: 0; }
/* Downloads: a pill in the header that opens a small panel. */
[data-role="downloads-menu"] { position: relative; align-self: flex-end; }
[data-role="downloads-menu"] summary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.75rem 0.4rem 0.65rem;
  border: 1px solid var(--color-surface-border); border-radius: var(--pill-radius);
  background: var(--hover-wash);
  color: var(--color-text); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600;
  list-style: none; cursor: pointer; user-select: none;
  transition: border-color 0.15s ease;
}
[data-role="downloads-menu"] summary::-webkit-details-marker { display: none; }
[data-role="downloads-menu"] summary::after { content: ""; width: 0.4rem; height: 0.4rem; margin: -0.15rem 0 0 0.1rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0.7; transition: transform 0.15s ease; }
[data-role="downloads-menu"][open] summary::after { margin-top: 0.2rem; transform: rotate(-135deg); }
[data-role="downloads-menu"][open] summary { border-color: var(--color-accent); }
@media (hover: hover) { [data-role="downloads-menu"] summary:hover { border-color: var(--color-accent); } }
[data-role="downloads-menu"] summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[data-role="downloads"] {
  position: absolute; top: calc(100% + 0.45rem); inset-inline-end: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 0.1rem;
  min-width: 14rem; margin: 0; padding: 0.4rem; list-style: none;
  /* Opaque: the surface over the page colour. A blur cannot work here,
     inside the header card's own blur. */
  background: linear-gradient(var(--color-surface), var(--color-surface)), var(--color-bg);
  border: 1px solid var(--color-surface-border); border-radius: 0.8rem;
  box-shadow: var(--shadow-card);
  font-family: var(--font-heading); font-size: 0.9rem;
}
[data-role="downloads"] a { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; border-radius: 0.55rem; color: var(--color-text); text-decoration: none; }
[data-role="downloads"] a::after { content: "↓"; margin-inline-start: auto; color: var(--color-muted); }
@media (hover: hover) { [data-role="downloads"] a:hover { background: var(--hover-wash); text-decoration: none; } [data-role="downloads"] a:hover::after { color: var(--color-accent); } }
[data-role="downloads"] a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* An open menu lifts the header above the content after it. */
[data-role="lesson-header"]:has([data-role="downloads-menu"][open]) { position: relative; z-index: 30; }
@media (prefers-reduced-motion: reduce) { [data-role="downloads-menu"] summary, [data-role="downloads-menu"] summary::after { transition: none; } }

/* Stepper ---------------------------------------------------------- */

/* A segmented control: one track, the current step filled with the
   accent, the other plain text on the track (available, not disabled). */
[data-role="steps"] { display: flex; gap: 0.25rem; margin: 0 0 1.5rem; padding: 0.25rem; border: 1px solid var(--color-surface-border); border-radius: var(--pill-radius); background: var(--hover-wash); font-family: var(--font-heading); }
[data-role="steps"] a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; padding: 0.55rem 0.9rem; border: 0; border-radius: var(--pill-radius); background: transparent; color: var(--color-text); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
@media (hover: hover) { [data-role="steps"] a:hover { background: var(--hover-wash); text-decoration: none; } }
[data-role="steps"] a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[data-role="step-icon"] { flex: 0 0 auto; display: inline-grid; place-items: center; color: inherit; }
[data-page="lesson"]:not(:has([data-step]:target)) [data-step-link="1"],
[data-page="lesson"]:has(#daily-word:target) [data-step-link="2"],
[data-page="lesson"]:has(#lesson:target) [data-step-link="1"] { background: var(--color-accent); color: var(--color-accent-contrast); box-shadow: 0 1px 3px oklch(0% 0 0 / 0.2); }
[data-role="step-next"] { margin: 1.5rem 0 0; font-family: var(--font-heading); font-weight: 700; text-align: right; }
@media (max-width: 600px) { [data-role="steps"] a { gap: 0.4rem; padding: 0.5rem 0.6rem; font-size: 0.85rem; } }

/* Theater layout for the Lesson step on wide viewports: the study region
   uses the full width — video large and pinned, notes beside it scrolling
   with the page, and the header row above it is as wide — while the
   stepper and text steps keep the reading measure. Player fullscreen remains available on top of this. */
@media (min-width: 1200px) and (orientation: landscape) {
  main:has(#lesson:target),
  main:has([data-page="lesson"]):not(:has([data-step]:target)) { max-width: min(120rem, calc(100vw - 3rem)); }
  main:has(#lesson:target) [data-role="steps"],
  main:has([data-page="lesson"]):not(:has([data-step]:target)) [data-role="steps"],
  main:has(#lesson:target) [data-role="step-next"],
  main:has([data-page="lesson"]):not(:has([data-step]:target)) [data-role="step-next"] { max-width: var(--measure); margin-left: auto; margin-right: auto; }
  main:has(#lesson:target) [data-region="study"],
  main:has([data-page="lesson"]):not(:has([data-step]:target)) [data-region="study"] { grid-template-columns: minmax(0, 3fr) minmax(24rem, 2fr); gap: 2rem; }
  main:has(#lesson:target) [data-role="study-main"],
  main:has([data-page="lesson"]):not(:has([data-step]:target)) [data-role="study-main"] { position: sticky; top: 1rem; }
  main:has(#lesson:target) [data-region="study"] [data-role="sidecar"],
  main:has([data-page="lesson"]):not(:has([data-step]:target)) [data-region="study"] [data-role="sidecar"] { max-height: none; overflow: visible; }
}

@media print {
  [data-region="masthead"], [data-role="pager"], [data-region="footer"], [data-component="video"] { display: none; }
  body { background: #fff; color: #000; }
  [data-component] { border: 0; box-shadow: none; padding: 0; }
  main { max-width: none; }
}

/* Footnotes recovered from the typeset citations: a superscript reference
   in the text, the citations listed at the end of the component. */
[data-component] sup.fn-ref { font-size: 0.7em; line-height: 0; vertical-align: super; }
[data-component] sup.fn-ref a { text-decoration: none; padding-inline: 0.1em; }
[data-component] section.footnotes { margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--color-surface-border, currentColor); font-size: 0.85em; line-height: 1.5; }
[data-component] section.footnotes ol { padding-inline-start: 1.6em; margin: 0; }
[data-component] section.footnotes li { margin: 0.35em 0; }
[data-component] section.footnotes li > p { margin: 0; }
[data-component] section.footnotes li:target { background: var(--hover-wash, rgba(127,127,127,0.12)); }


/* Phones and portrait tablets, Lesson step: the video stays pinned at the
   top of the screen, edge to edge, and the teaching notes scroll under
   it, as on YouTube, with the tab bar pinned under the video. The
   section heading is left out of the pinned block; the stepper already
   names the step. Tab and footnote jumps land below the pinned video and
   tab bar. The video-and-audio column dissolves here, so the video pins to
   the whole study region and the audio scrolls under it like the notes. */
@media (max-width: 900px) and (orientation: portrait) {
  [data-region="study"] [data-role="study-main"] { display: contents; }
  [data-region="study"] [data-component="video"] {
    position: sticky; top: 0; z-index: 5;
    margin-inline: calc(50% - 50vw);
    padding: 0; border: 0; border-radius: 0;
    background: #000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    backdrop-filter: none;
  }
  [data-region="study"] [data-component="video"] > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  [data-region="study"] [data-component="video"] [data-role="player"] { border-radius: 0; }
  [data-region="study"] [data-component="video"] [data-role="fallback"] { display: none; }
  [data-region="study"] [data-role="tabs"] { top: 56.25vw; }
  [data-region="study"] [data-tab],
  [data-region="study"] [data-tab] [id] { scroll-margin-top: calc(56.25vw + 4rem); }
  /* Typing an answer: the keyboard makes iOS slide pinned elements around
     as the page is dragged, so the video and the tab bar scroll with the
     page until the box loses focus. */
  [data-region="study"]:has([data-role="answer"] textarea:focus) [data-component="video"],
  [data-region="study"]:has([data-role="answer"] textarea:focus) [data-role="tabs"] { position: relative; }
}

/* Progress on a lesson (reader.js): a ring beside Downloads, apart from
   the day counter, with "Progress" under it (Jef, 2026-11-08). One segment
   per part of the lesson; it opens the checklist. */
[data-role="lesson-tools"] { display: flex; align-items: flex-end; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
[data-role="lesson-tools"] [data-role="downloads-menu"] { align-self: flex-end; }
[data-role="lesson-progress"] { position: relative; --lp-on: #00B8DB; --lp-done: #A855F7; }
:root[data-theme="dark"] [data-role="lesson-progress"] { --lp-on: #00D3F2; --lp-done: #C084FC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-role="lesson-progress"] { --lp-on: #00D3F2; --lp-done: #C084FC; } }
[data-role="lesson-progress"] summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.15rem 0.3rem; border-radius: 0.6rem; user-select: none; }
[data-role="lesson-progress"] summary::-webkit-details-marker { display: none; }
[data-role="lesson-progress"] summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (hover: hover) { [data-role="lesson-progress"] summary:hover { background: var(--hover-wash); } }
[data-role="lesson-progress"][open] summary { background: var(--hover-wash); }
.lp-ring { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; }
.lp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-track { fill: none; stroke: color-mix(in oklab, var(--color-muted) 22%, transparent); stroke-width: 3.4; }
.lp-seg { fill: none; stroke: transparent; stroke-width: 3.4; stroke-linecap: round; }
.lp-seg[data-on="true"] { stroke: var(--lp-on); }
.lp-num { position: relative; font: 700 0.72rem/1 var(--font-heading); color: var(--color-text); }
[data-role="lesson-progress"][data-done="true"] .lp-seg[data-on="true"] { stroke: var(--lp-done); }
[data-role="lesson-progress"][data-done="true"] .lp-num { color: var(--lp-done); font-size: 0.95rem; }
.lp-label { font: 600 0.62rem/1 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
[data-role="lesson-progress"] ul {
  position: absolute; top: calc(100% + 0.45rem); inset-inline-end: 0; z-index: 3;
  width: min(17rem, calc(100vw - 2.5rem)); margin: 0; padding: 0.5rem 0.6rem; list-style: none;
  background: linear-gradient(var(--color-surface), var(--color-surface)), var(--color-bg);
  border: 1px solid var(--color-surface-border); border-radius: 0.8rem; box-shadow: var(--shadow-card);
  font-family: var(--font-heading); font-size: 0.9rem; letter-spacing: normal; text-transform: none; font-weight: 400;
}
[data-role="lesson-progress"] .lp-head { padding: 0.15rem 0.3rem 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--color-muted); }
[data-role="lesson-progress"] label { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.3rem; border-radius: 0.45rem; cursor: pointer; color: var(--color-text); }
@media (hover: hover) { [data-role="lesson-progress"] label:hover { background: var(--hover-wash); } }
[data-role="lesson-progress"] input { accent-color: var(--color-accent); width: 1rem; height: 1rem; }
[data-role="lesson-progress"] [data-role="lesson-done"] { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--color-rule); font-weight: 600; }
[data-role="lesson-progress"] li[data-note] { padding: 0.4rem 0.3rem 0.1rem; font-size: 0.75rem; color: var(--color-muted); line-height: 1.35; }
@media print { [data-role="lesson-progress"] { display: none; } }
/* The open checklist sits above the study area's tabs below the header. */
[data-role="lesson-top"]:has([data-role="lesson-progress"][open]) { position: relative; z-index: 30; }
[data-role="lesson-header"]:has([data-role="lesson-progress"][open]) { position: relative; z-index: 30; }
/* Me: the start date under a course's buttons. */
[data-role="start-date"] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--color-rule); font-size: 0.9rem; color: var(--color-muted); }
[data-role="start-date"] input { font: inherit; color: var(--color-text); padding: 0.3rem 0.5rem; border: 1px solid var(--color-surface-border); border-radius: 0.5rem; background: transparent; }
/* On a narrow screen the checklist hangs from the whole row, not the ring. */
@media (max-width: 640px) {
  [data-role="lesson-tools"] { position: relative; }
  [data-role="lesson-progress"] { position: static; }
  [data-role="lesson-progress"] ul { inset-inline: 0; width: auto; }
}
/* The first-time tour (tour.js): the page dimmed, a window cut around the
   part it points at, and a popover beside it. Colours from the theme's
   tokens, so it follows light and dark. Over everything, the "Need help?"
   button too. */
[data-role="tour"] { position: fixed; inset: 0; z-index: 1000; }
[data-role="tour-shade"] { position: fixed; inset: 0; background: transparent; }
[data-role="tour"][data-centered="true"] [data-role="tour-shade"] { background: rgb(0 0 0 / 0.55); }
[data-role="tour-hole"] {
  position: fixed; pointer-events: none; border-radius: 0.6rem;
  box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 200vmax rgb(0 0 0 / 0.55);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
[data-role="tour-hole"][hidden] { display: none; }
[data-role="tour-pop"] {
  position: fixed; box-sizing: border-box; width: min(23rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  padding: 0.9rem 1rem 0.85rem; border-radius: var(--radius);
  background: var(--card-bg, var(--color-bg)); color: var(--color-text);
  border: 1px solid var(--color-surface-border); box-shadow: 0 18px 48px -12px rgb(0 0 0 / 0.5);
  font-family: var(--font-body); line-height: 1.45; text-align: start;
  transition: top 0.25s ease, left 0.25s ease;
}
[data-role="tour-pop"]:focus, [data-role="tour-pop"] h2:focus { outline: none; }
[data-role="tour-pop"] h2 { font-size: 1.1rem; margin: 0 0 0.35rem; color: var(--color-heading, var(--color-text)); background: none; -webkit-text-fill-color: currentColor; }
[data-role="tour-pop"] p { margin: 0 0 0.5rem; font-size: 0.95rem; }
[data-role="tour-pop"] [data-role="tour-count"] { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-muted); margin: 0 0 0.2rem; }
[data-role="tour-actions"] { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
[data-role="tour-actions"] button { font: inherit; font-size: 0.9rem; font-weight: 700; padding: 0.45rem 0.9rem; border-radius: 0.5rem; cursor: pointer; border: 1px solid var(--color-surface-border); background: transparent; color: var(--color-text); }
[data-role="tour-actions"] [data-action="tour-skip"] { border-color: transparent; padding-inline: 0.2rem; color: var(--color-muted); font-weight: 600; margin-inline-end: auto; }
[data-role="tour-actions"] [data-action="tour-next"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
[data-role="tour-actions"] button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[data-role="tour-actions"] button[hidden] { display: none; }
[data-role="tour"][data-still] [data-role="tour-hole"],
[data-role="tour"][data-still] [data-role="tour-pop"] { transition: none; }
@media (prefers-reduced-motion: reduce) { [data-role="tour-hole"], [data-role="tour-pop"] { transition: none; } }
@media print { [data-role="tour"] { display: none; } }
/* A notice across the top of every page (SITE_NOTICE). */
[data-role="site-notice"] { margin: 0; padding: 0.75rem 1rem; text-align: center; font-weight: 600; line-height: 1.4; color: var(--color-text); background: color-mix(in oklab, #EC4899 14%, var(--color-bg)); border-bottom: 1px solid color-mix(in oklab, #EC4899 35%, var(--color-bg)); }