@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500&display=swap');

:root {
  --ink-navy: #1B2340;
  --soft-ink: #2B3350;
  --quiet-paper: #F6F5F0;
  --canopy-gold: #C99A3E;
  --leaf-green: #3E6B3A;
  --sky-blue: #4A7A96;
  --blossom-rose: #B8577A;
  --bark-brown: #8A5C28;

  --chip-teacher-bg: #6B4A1A; --chip-teacher-fg: #FCEFD8;
  --chip-inquirer-bg: #2F5A72; --chip-inquirer-fg: #E3F0F6;
  --chip-former-bg: #3E6B3A; --chip-former-fg: #EAF3DE;
  --chip-newbeliever-bg: #8C3F5C; --chip-newbeliever-fg: #FBE6EE;
}

* { box-sizing: border-box; }

/* One visible keyboard-focus style everywhere (the old gold rings were 2.6:1 against white). */
:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 3px; }

body {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  background: var(--quiet-paper);
  color: var(--soft-ink);
  line-height: 1.5;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 16px 20px 80px; }

header.site {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 8px;
  padding: 16px 20px; border-bottom: 0.5px solid rgba(27,35,64,0.15);
  max-width: 640px; margin: 0 auto;
}
/* Name and tagline stack to the right of the tree; the tagline shows on desktop reader pages only. */
.wordmark-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.tagline { display: none; }
.wordmark { display: flex; align-items: center; gap: 8px; font-family: Georgia, serif; font-weight: 600; font-size: 17px; color: var(--ink-navy); text-decoration: none; }
/* Visual Design doc §1: icon-only crop, for anywhere too small for the full
   lockup's wordmark to stay legible — this compact header is exactly that
   case, so the icon pairs with the existing text wordmark rather than
   swapping in the full stacked lockup (which wants ~74px+ tall at its
   120px-wide minimum to keep its own wordmark legible, more height than
   this header has). */
/* The logo file has ~26% empty space each side of the tree (measured from its pixels). Show only the tree so it lines up with the text edge. */
.site-icon { height: 28px; aspect-ratio: 621 / 640; object-fit: cover; }
/* Six links + the wordmark don't fit one row under ~490px (real content
   width measured directly, not guessed) — wrap onto a second line rather
   than forcing the whole page wider than the viewport. Harmless above
   that width: there's already room for one row, so wrapping never
   triggers there. */
nav.desktop-nav { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 15px; }
nav.desktop-nav a { color: var(--ink-navy); text-decoration: underline; padding: 9px 0; }

/* D-092: site footer, outside .wrap like header.site — sits on the page
   background, not inside the white reading-panel card on desktop. */
.site-footer { max-width: 700px; margin: 48px auto 0; padding: 20px 20px 32px; border-top: 0.5px solid rgba(27,35,64,0.15); text-align: center; }
.site-footer p { font-size: 12px; color: var(--bark-brown); margin: 0 0 8px; line-height: 1.6; }
.site-footer a { color: var(--bark-brown); text-decoration: underline; white-space: nowrap; }
.site-footer a:hover { color: var(--ink-navy); }
.site-footer a:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }

/* D-074: prev/next-day nav, top and bottom of a lesson page — the same
   class both places, no position-specific styling, kept deliberately
   simple. UI chrome, not reading content, so it stays Public Sans (the
   dialogue body's own Georgia switch, D-073, doesn't apply here). */
.daynav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; font-size: 13px; margin: 4px 0 20px; }
.daynav a { color: var(--ink-navy); text-decoration: underline; display: inline-block; padding: 12px 0; margin: -12px 0; }
.daynav-disabled { color: #5C6284; font-style: italic; }

/* D-082: first-visit "New here?" strip on public lesson pages. */
.intro-strip { display: flex; align-items: center; gap: 8px 14px; background: #fff; border: 0.5px solid rgba(27,35,64,0.15); border-left: 3px solid var(--canopy-gold); border-radius: 8px; padding: 9px 14px; margin: 0 0 16px; font-size: 13px; color: var(--soft-ink); }
.intro-strip[hidden] { display: none; }
.intro-strip a { color: var(--ink-navy); text-decoration: underline; white-space: nowrap; }
.intro-strip button { margin: -12px -10px -12px auto; min-width: 44px; min-height: 44px; background: none; border: none; font-size: 20px; line-height: 1; color: #5C6284; cursor: pointer; padding: 0 4px; }
.intro-strip button:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }

.utility { font-size: 11px; letter-spacing: 0.06em; color: var(--bark-brown); font-weight: 500; text-transform: uppercase; }

h1.title { font-family: Georgia, serif; font-weight: 600; font-size: 26px; color: var(--ink-navy); margin: 6px 0 12px; line-height: 1.25; }
h2.title { font-family: Georgia, serif; font-weight: 600; font-size: 20px; color: var(--ink-navy); }

.context-line { font-size: 13px; font-style: italic; color: #5c6284; margin: 0 0 22px; line-height: 1.6; }
.context-line a { color: #5c6284; }

.memory-verse { background: #FBF7EE; border-left: 3px solid var(--bark-brown); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 0 0 22px; }
.memory-verse p { margin: 0; font-size: 17px; font-style: italic; color: var(--ink-navy); line-height: 1.6; font-family: Georgia, serif; }

/* D-075: founder-placed pull quotes (">> " line marker, renderProse in
   render.js) — a distinct navy/gold treatment from .memory-verse's
   bark-brown border, so the two block-quote-shaped elements read as
   different things (a cited verse vs. a pulled line of the conversation
   itself). Reading content, so Georgia (D-073) and the same 34em measure
   as the dialogue body it's pulled from. */
blockquote.pull { margin: 22px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--canopy-gold); font-family: Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.5; color: var(--ink-navy); max-width: 34em; }

.speaker { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 8px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.s-teacher { background: var(--chip-teacher-bg); color: var(--chip-teacher-fg); }
.s-inquirer { background: var(--chip-inquirer-bg); color: var(--chip-inquirer-fg); }
.s-former { background: var(--chip-former-bg); color: var(--chip-former-fg); }
.s-newbeliever { background: var(--chip-newbeliever-bg); color: var(--chip-newbeliever-fg); }

.dialogue-block { margin-bottom: 30px; }
/* A long unbroken string (a pasted link, a long reference) must wrap rather than widen the page: on a phone it made the whole lesson scroll sideways. */
.dialogue-block, .memory-verse, .narrative, .before-tree { overflow-wrap: anywhere; }
.dialogue-block p { margin: 0; font-size: 16px; line-height: 1.7; font-family: Georgia, serif; max-width: 34em; }
.dialogue-block p + p, .dialogue-block p + ul, .dialogue-block ul + p { margin-top: 14px; }
.dialogue-block ul { margin: 8px 0 4px; padding-left: 22px; }
.dialogue-block li { font-size: 16px; line-height: 1.6; margin-bottom: 3px; font-family: Georgia, serif; max-width: 34em; }
.dialogue-block li::marker { color: var(--bark-brown); }

/* Was only ever defined as page-scoped inline CSS in the week-bundle
   prototype page, missing from this shared file — meaning narrative
   paragraphs on other pages (e.g. index.html) silently fell back to
   unstyled body text. Visual Design doc, Section 5: narrative should get
   "same type treatment as the dialogue body" — this is that treatment,
   applied everywhere narrative renders, not just on one page. */
.narrative { margin-bottom: 16px; }
.narrative p { margin: 0 0 10px; font-size: 16px; line-height: 1.7; color: var(--soft-ink); }
.narrative p:last-child { margin-bottom: 0; }

.refs { margin: 24px 0 18px; }
.refs a { font-size: 13px; color: var(--ink-navy); text-decoration: underline; margin-right: 12px; }
.refs a:hover { opacity: 0.75; }
.refs a:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }

/* D-091: podcast + official ssnet.org lesson, replacing the old
   single-line .episode-link. Same label style as .refs above it. */
.study-links { margin: 20px 0 18px; }
.study-links .links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.study-links a { font-size: 13px; color: var(--sky-blue); text-decoration: underline; }
.study-links a:hover { color: var(--ink-navy); }
.study-links a:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }

/* D-096: "Jump to a day" line under the title on a week page. */
.weekdays { margin: 14px 0 0; font-size: 14px; line-height: 2; color: var(--soft-ink); }
.weekdays .utility { margin-right: 6px; }
.weekdays a { color: var(--ink-navy); text-decoration: underline; padding: 6px 0; }
.weekdays a:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }
/* The spaces around each dot (in the markup) are what let the line wrap onto a second row on a phone; without them it is one unbreakable string and widens the whole page. */
.weekdays .sep { color: #B5B8C6; margin: 0 2px; }
/* On a phone the line wraps, and a dot left at the end of a row looks stray: use spacing instead. */
@media (max-width: 520px) {
  .weekdays .sep { display: none; }
  .weekdays a, .weekdays .off { margin-right: 12px; }
}
.weekdays .off { color: #5C6284; }
.day-block { scroll-margin-top: 16px; }
.weekdays { scroll-margin-top: 16px; }
/* D-097: end-of-day link back to the "Jump to a day" line. */
.backtodays { text-align: right; margin: 12px 0 0; font-size: 12px; }
.backtodays a { color: #5C6284; text-decoration: underline; display: inline-block; padding: 8px 0; }
.backtodays a:hover { color: var(--ink-navy); }
.backtodays a:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 0.5px solid rgba(27,35,64,0.15); margin-bottom: 24px; }
.tags a { font-size: 13px; color: var(--ink-navy); border: 0.5px solid var(--ink-navy); border-radius: 12px; padding: 4px 12px; text-decoration: none; }
.tags a:hover { background: rgba(27,35,64,0.06); }
.tags a:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }

.step-block { background: var(--bark-brown); border-radius: 10px; padding: 18px 20px; margin-bottom: 8px; }
.step-block .utility { color: #FAEEDA; margin-bottom: 8px; display: block; }
.step-block p.prompt { margin: 0 0 12px; color: #fff; font-size: 15px; line-height: 1.6; }
.step-block textarea, .step-block input[type=text] {
  width: 100%; border: none; border-radius: 6px; padding: 10px; font-size: 16px;
  font-family: 'Public Sans', sans-serif; box-sizing: border-box; margin-bottom: 10px;
}
.step-block button.save {
  background: var(--quiet-paper); color: var(--ink-navy); border: none; border-radius: 6px;
  padding: 12px 20px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'Public Sans', sans-serif;
}
.step-block button.save:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Contact form (/contact). Inputs match .search-form: 16px text so iOS
   doesn't zoom on focus. Error red #B8404A: 5.4:1 on white, 5.0:1 on
   --quiet-paper (WCAG AA). */
.contact-intro { font-size: 15px; line-height: 1.65; color: var(--soft-ink); margin: 0 0 20px; }
.contact-about { font-size: 13px; color: var(--soft-ink); background: var(--quiet-paper); border-left: 3px solid var(--canopy-gold); border-radius: 4px; padding: 10px 12px; margin: 0 0 18px; }
.contact-about a { color: var(--ink-navy); }
.contact-formerror { font-size: 14px; color: #B8404A; background: #FBEDEC; border: 1px solid #B8404A; border-radius: 8px; padding: 10px 12px; margin: 0 0 18px; }
.contact-form .field { display: block; margin: 0 0 16px; }
.contact-form .label { display: block; font-size: 13px; font-weight: 600; color: var(--soft-ink); margin-bottom: 6px; }
.contact-form .label em { font-weight: 400; font-style: normal; color: #5C6284; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea {
  width: 100%; box-sizing: border-box; border: 0.5px solid rgba(27,35,64,0.25); border-radius: 8px; padding: 12px 14px;
  font-size: 16px; font-family: 'Public Sans', sans-serif; color: var(--soft-ink); background: #fff;
}
.contact-form textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 1px; }
.contact-form .field.has-error input, .contact-form .field.has-error textarea { border: 1px solid #B8404A; }
.contact-form .field-error { display: block; font-size: 13px; color: #B8404A; margin-top: 6px; }
.contact-form .privacy { font-size: 12.5px; color: #5C6284; line-height: 1.55; margin: 4px 0 16px; }
.contact-form .cf-turnstile { margin: 0 0 16px; min-height: 65px; max-width: 100%; overflow: hidden; }
.contact-form button[type=submit] {
  background: var(--ink-navy); color: #fff; border: none; border-radius: 8px; min-height: 44px; padding: 0 24px;
  font-size: 15px; font-weight: 500; cursor: pointer; font-family: 'Public Sans', sans-serif;
}
.contact-form button[type=submit]:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }
.contact-alt { font-size: 13px; color: #5C6284; margin: 24px 0 0; padding-top: 16px; border-top: 0.5px solid rgba(27,35,64,0.15); }
.contact-alt a { color: var(--ink-navy); overflow-wrap: anywhere; }
.contact-sent { background: #EFF5E7; border: 1px solid rgba(62,107,58,0.4); border-radius: 10px; padding: 16px 18px; margin: 0 0 20px; }
.contact-sent p { margin: 0 0 6px; color: var(--soft-ink); font-size: 15px; line-height: 1.6; }
.contact-sent p:last-child { margin: 0; }
.contact-sent a { color: var(--ink-navy); }
.step-block .step-error { color: #fff; font-size: 12px; margin-bottom: 8px; display: none; }
.step-block .choice-btn {
  display: block; width: 100%; text-align: left; background: rgba(255,255,255,0.12);
  border: none; color: #fff; padding: 12px 14px; border-radius: 6px; font-size: 14px;
  cursor: pointer; margin-bottom: 8px; font-family: 'Public Sans', sans-serif;
}
.step-block .choice-btn:hover { background: rgba(255,255,255,0.2); }
.step-block .choice-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.step-block .saved-response { background: rgba(255,255,255,0.12); padding: 10px 12px; border-radius: 6px; color: #fff; font-size: 15px; margin-bottom: 10px; }
.step-block .undo { background: transparent; border: 0.5px solid #FAEEDA; color: #FAEEDA; font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: 'Public Sans', sans-serif; }
.step-block .saved-badge { color: #D4F5D4; }

.card { display: block; background: #fff; border: 0.5px solid rgba(27,35,64,0.15); border-radius: 12px; padding: 16px; margin-bottom: 12px; text-decoration: none; color: inherit; }
.card:hover { border-color: var(--ink-navy); }
.card .card-title { font-family: Georgia, serif; font-weight: 600; font-size: 16px; color: var(--ink-navy); margin-bottom: 4px; }
.card .card-meta { font-size: 11px; color: var(--bark-brown); }

.feedback-note { margin-top: 40px; padding-top: 20px; border-top: 0.5px solid rgba(27,35,64,0.15); font-size: 13px; color: #5c6284; text-align: center; }
.feedback-note a { color: var(--ink-navy); }

.date-status-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.done-badge { display: none; font-size: 11px; color: var(--leaf-green); font-weight: 500; }
.before-tree .bt-eyebrow { font-size: 11px; letter-spacing: 0.06em; color: var(--bark-brown); font-weight: 500; text-transform: uppercase; margin-bottom: 8px; display: block; }
.before-tree .bt-title { font-family: Georgia, serif; font-weight: 600; font-size: 18px; color: var(--ink-navy); margin: 0 0 12px; }
.before-tree p { font-size: 15px; line-height: 1.7; margin: 0 0 10px; color: var(--soft-ink); font-family: Georgia, serif; max-width: 34em; }
.before-tree p:last-child { margin-bottom: 0; }

/* M4: Topics, Search, Podcast, About. */
.topic-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.topic-pill { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--ink-navy); border: 0.5px solid var(--ink-navy); border-radius: 14px; padding: 8px 16px; text-decoration: none; }
.topic-pill:hover { background: rgba(27,35,64,0.06); }
.topic-pill .count { font-size: 11px; color: var(--bark-brown); }
.topic-rare { margin-top: 28px; border-top: 1px solid rgba(27,35,64,0.14); padding-top: 14px; }
.topic-rare > summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-navy); padding: 6px 0; }
.topic-rare > summary:focus-visible { outline: 2px solid var(--canopy-gold); outline-offset: 2px; }
.topic-rare-note { font-size: 12.5px; color: #5C6284; margin: 4px 0 14px; }

.search-form { display: flex; gap: 8px; margin-bottom: 28px; }
.search-form input[type=search], .search-form input.feed-address {
  flex: 1; border: 0.5px solid rgba(27,35,64,0.25); border-radius: 8px; padding: 12px 14px;
  font-size: 16px; font-family: 'Public Sans', sans-serif; color: var(--soft-ink); background: #fff;
}
.search-form input[type=search]:focus-visible, .search-form input.feed-address:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 1px; }
.search-form button {
  background: var(--ink-navy); color: #fff; border: none; border-radius: 8px; padding: 0 20px;
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'Public Sans', sans-serif;
}
.search-form button:focus-visible { outline: 2px solid var(--ink-navy); outline-offset: 2px; }
.search-form input.feed-address { min-width: 0; }
.result-count { font-size: 13px; color: var(--bark-brown); margin-bottom: 14px; }
.card .card-snippet { font-size: 14px; color: var(--soft-ink); line-height: 1.6; margin-top: 6px; }
mark { background: rgba(201,154,62,0.35); color: inherit; padding: 0 2px; border-radius: 2px; }

.platform-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.platform-link {
  font-size: 13px; color: var(--ink-navy); border: 0.5px solid var(--ink-navy); border-radius: 8px;
  padding: 8px 14px; text-decoration: none;
}
.platform-link:hover { background: rgba(27,35,64,0.06); }
.episode-meta-row { display: flex; gap: 10px; align-items: baseline; }
.episode-meta-row .card-meta { flex: 1; }
.episode-duration { font-size: 11px; color: var(--bark-brown); white-space: nowrap; }
.episode-links { margin-top: 8px; font-size: 12px; }
.episode-links a { color: var(--sky-blue); text-decoration: underline; margin-right: 12px; }

/* Desktop reading layout. Below 860px this file is untouched (the
   mobile-first column stays exactly as designed). Above it, the column
   widens and type scales up together — widening alone just gives the same
   small text more room to be small in; this is a real desktop pass, not a
   recenter. 760px keeps prose at a comfortable ~75-85 characters per line
   at the larger type size, rather than stretching to fill wide monitors,
   which would hurt readability of the dialogue-heavy body content. */
@media (min-width: 860px) {
  .wrap { max-width: 760px; padding: 32px 40px 100px; }
  /* D-084: on desktop the name gets its own row and the menu sits under it.
     The reading panel is 700px with 44px sides, so its content is exactly
     the 612px text measure (34em at 18px) and the text is centred in it. */
  header.site { max-width: 760px; padding: 24px 40px; }
  .site-footer { max-width: 760px; }
  .wordmark { font-size: 19px; }
  .site-icon { height: 32px; }
  nav.desktop-nav { font-size: 14px; gap: 22px; }
  body.reading header.site { max-width: 700px; padding: 28px 44px 10px; flex-direction: column; align-items: flex-start; gap: 14px; border-bottom: none; }
  body.reading .wordmark { font-size: 28px; gap: 14px; }
  body.reading .site-icon { height: 60px; }
  body.reading .tagline { display: block; font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 15px; line-height: 1.3; color: #5C6284; }
  body.reading nav.desktop-nav { gap: 0 22px; font-size: 15px; }
  /* The reading panel: content sits on white against the cream page. */
  body.reading .wrap { max-width: 700px; background: #fff; border: 1px solid rgba(27,35,64,0.12); border-radius: 14px; margin: 14px auto 48px; padding: 28px 44px 56px; box-shadow: 0 1px 3px rgba(27,35,64,0.05); }
  .intro-strip { margin-bottom: 28px; }

  .utility { font-size: 12px; }
  h1.title { font-size: 34px; margin: 10px 0 16px; }
  h2.title { font-size: 24px; }
  .context-line { font-size: 14px; margin-bottom: 26px; }
  .memory-verse p { font-size: 19px; }

  .speaker { font-size: 12px; padding: 4px 12px; }
  .dialogue-block p, .narrative p, .dialogue-block li { font-size: 18px; line-height: 1.75; }

  .refs a, .tags a { font-size: 14px; }

  .step-block { padding: 24px 28px; }
  .step-block p.prompt { font-size: 17px; }

  .card { padding: 20px; }
  .card .card-title { font-size: 18px; }
  .card .card-meta { font-size: 12px; }

  .before-tree .bt-title { font-size: 21px; }
  .before-tree p { font-size: 17px; }

  .feedback-note { font-size: 14px; }
}

/* ============================================================
   Merged CMS submit/review screen (.cms-*) — Session 8.
   Internal tooling: reuses the site tokens (D-025), no separate
   visual language. Needs real layout CSS (grid, sticky, media
   queries), which renderPage's inline-only convention can't carry
   — so it lives here, namespaced, loaded on every page but only
   ever matched on the CMS submit screen.
   ============================================================ */
.cms-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.cms-tab {
  font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; color: var(--ink-navy);
  padding: 8px 14px; border-radius: 9px; border: 1.5px solid rgba(27,35,64,0.28); white-space: nowrap;
}
.cms-tab:hover { background: var(--quiet-paper); border-color: var(--ink-navy); }
.cms-tab.here { background: var(--ink-navy); color: #fff; border-color: var(--ink-navy); }
.cms-tabs-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: #F3E7CE; color: var(--bark-brown); border: 1px solid rgba(201,154,62,0.4);
}
.cms-tabs-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.cms-tabs-pill.ready { background: #E7F0DC; color: var(--leaf-green); border-color: rgba(62,107,58,0.45); }

.cms-editor {
  position: relative;
  width: min(1180px, calc(100vw - 32px));
  margin: 0 0 0 50%;
  transform: translateX(-50%);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  padding-bottom: 160px;
}
.cms-editor-col { min-width: 0; }
@media (min-width: 980px) {
  .cms-editor { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: start; }
  /* Fill the viewport between the top and the fixed action bar (~96px) so the preview shows as much of the lesson as possible. */
  .cms-preview-col { position: sticky; top: 16px; height: calc(100vh - 116px); min-height: 420px; display: flex; flex-direction: column; }
  .cms-preview-shell { min-height: 0; }
}
/* D-093: the edit screen for an existing lesson reuses this two-column editor.
   It has no fixed action bar (the decision buttons sit at the end of the left
   column), so the bottom padding shrinks and the preview fills the viewport. */
.cms-editor-review { padding-bottom: 40px; }
@media (min-width: 980px) {
  .cms-editor-review .cms-preview-col { height: calc(100vh - 32px); }
}

.cms-head { margin-bottom: 16px; }
.cms-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bark-brown); margin: 0 0 4px; }
.cms-head h1.title { margin: 0 0 6px; }
.cms-sub { font-size: 13px; color: #5C6284; margin: 0; }

.cms-errbox { background: #FBEDEC; border: 1px solid #B8404A; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; font-size: 13px; }
.cms-errbox ul { margin: 6px 0 0; padding-left: 20px; }

.cms-paste { border: 1px solid rgba(27,35,64,0.14); border-radius: 14px; background: #fff; overflow: hidden; }
.cms-paste > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 16px; }
.cms-paste > summary::-webkit-details-marker { display: none; }
.cms-paste-title { font-family: Georgia, serif; font-weight: 600; font-size: 15px; color: var(--ink-navy); }
.cms-paste-sum { font-size: 12px; color: #5C6284; }
.cms-paste[open] .cms-paste-sum { display: none; }
.cms-paste-toggle { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-navy); border: 1px solid rgba(27,35,64,0.28); border-radius: 8px; padding: 5px 11px; background: #FCFBF7; }
.cms-paste:not([open]) .cms-paste-toggle .c { display: none; }
.cms-paste[open] .cms-paste-toggle .o { display: none; }
.cms-paste-body { padding: 0 16px 16px; }
.cms-hint { font-size: 12px; color: #5C6284; margin: 0 0 10px; }
#raw_text {
  width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6;
  color: var(--ink-navy); background: #FBFAF5; border: 1px solid rgba(27,35,64,0.28); border-radius: 10px;
  padding: 11px 12px; min-height: 150px; resize: vertical;
}

.cms-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 2px 0; }
.cms-xchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(27,35,64,0.28); background: #FCFBF7; color: var(--soft-ink); }
.cms-xchip b { font-weight: 700; }
.cms-xchip.ok { color: var(--leaf-green); border-color: rgba(62,107,58,0.4); background: #EFF5E7; }
.cms-xchip.warn { color: #A6702A; border-color: rgba(166,112,42,0.4); background: #FBF1E3; }

.cms-fields-head { font-family: Georgia, serif; font-weight: 600; font-size: 15px; color: var(--ink-navy); margin: 20px 2px 8px; }
.cms-fields-head em { font-family: 'Public Sans', sans-serif; font-weight: 400; font-size: 11.5px; color: #5C6284; }

.cms-section { border: 1px solid rgba(27,35,64,0.14); border-radius: 14px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.cms-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-family: Georgia, serif; font-weight: 600; font-size: 14px; color: var(--ink-navy); }
.cms-section > summary::-webkit-details-marker { display: none; }
.cms-section > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid #5C6284; border-bottom: 1.5px solid #5C6284; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease; }
.cms-section[open] > summary::after { transform: rotate(-135deg); }
.cms-section-body { padding: 2px 16px 16px; }

.cms-field { display: block; margin-top: 12px; }
.cms-field:first-child { margin-top: 4px; }
.cms-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--soft-ink); margin-bottom: 4px; }
.cms-label em { font-weight: 400; color: #5C6284; font-style: normal; }
.cms-field input[type=text], .cms-field textarea {
  width: 100%; font-family: 'Public Sans', sans-serif; font-size: 13px; color: var(--ink-navy);
  background: #FCFBF7; border: 1px solid rgba(27,35,64,0.28); border-radius: 8px; padding: 8px 10px; line-height: 1.5;
}
.cms-field textarea { resize: vertical; }
.cms-two { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: start; }
.cms-two > .cms-field, .cms-two > .cms-field:first-child { margin-top: 12px; }
@media (max-width: 460px) { .cms-two { grid-template-columns: 1fr; } }

.cms-readout { font-size: 13px; color: var(--ink-navy); padding: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cms-note { font-size: 12px; color: #5C6284; margin: 4px 0 0; }
.cms-fmt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; background: var(--ink-navy); color: #fff; border-radius: 6px; padding: 2px 8px; }
.cms-spk { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 7px; background: #6B4A1A; color: #FCEFD8; }

.cms-bodyfield textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.65; min-height: 280px; background: #FBFAF5; }
.cms-body-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; font-size: 11px; color: #5C6284; }
.cms-legend { margin-left: auto; display: flex; gap: 8px; }
.cms-legend code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; background: var(--quiet-paper); border: 1px solid rgba(27,35,64,0.14); border-radius: 5px; padding: 1px 5px; color: var(--soft-ink); }

.cms-step-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--quiet-paper); border: 1px solid rgba(27,35,64,0.14); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.cms-step-type { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bark-brown); color: #FCEFD8; border-radius: 5px; padding: 2px 7px; }
.cms-step-note { font-size: 12px; color: var(--soft-ink); flex: 1; min-width: 140px; }
.cms-regen { font-family: 'Public Sans', sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-navy); background: #fff; border: 1px solid rgba(27,35,64,0.28); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.cms-regen:hover { background: var(--quiet-paper); }

.cms-phrasing-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cms-phrasing-item { display: flex; align-items: flex-start; gap: 9px; background: var(--quiet-paper); border: 1px solid rgba(27,35,64,0.14); border-radius: 8px; padding: 8px 10px; font-size: 12px; cursor: pointer; }
.cms-phrasing-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.cms-phrasing-text { display: flex; flex-direction: column; gap: 2px; }
.cms-phrasing-original { text-decoration: line-through; color: var(--bark-brown); }
.cms-phrasing-suggested { color: var(--leaf-green); font-weight: 600; }
.cms-phrasing-reason { font-size: 11px; color: #5C6284; font-style: italic; }

.cms-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cms-preview-head h2.title { font-size: 15px; }
.cms-preview-head span { font-size: 11px; color: #5C6284; }
.cms-preview-shell { border: 1px solid rgba(27,35,64,0.14); border-radius: 14px; background: #fff; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 420px; }
.cms-preview-bar { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-bottom: 1px solid rgba(27,35,64,0.14); background: var(--quiet-paper); font-size: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; color: #5C6284; }
.cms-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(27,35,64,0.28); }
#cms-preview { width: 100%; border: 0; flex: 1 1 auto; min-height: 380px; background: var(--quiet-paper); }
.cms-preview-empty { padding: 40px 20px; text-align: center; font-size: 13px; font-style: italic; color: #5C6284; }

.cms-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px 18px; flex-wrap: wrap;
  padding: 13px clamp(14px, 3vw, 34px);
  background: #fff; border-top: 3px solid var(--ink-navy);
  box-shadow: 0 -10px 30px -12px rgba(27,35,64,0.28);
}
.cms-decision { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cms-tick { flex: none; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #F3E7CE; color: var(--bark-brown); }
.cms-actionbar.is-ready .cms-tick { background: var(--leaf-green); color: #fff; }
.cms-decision-txt { font-size: 12px; color: #5C6284; line-height: 1.4; }
.cms-decision-txt b { display: block; color: var(--ink-navy); font-size: 13px; font-weight: 600; }
.cms-actionbar-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.cms-btn { font-family: 'Public Sans', sans-serif; font-size: 14px; font-weight: 700; border-radius: 10px; padding: 11px 22px; cursor: pointer; border: 2px solid transparent; }
.cms-btn:active { transform: translateY(1px); }
.cms-btn-publish { background: #2F5A2B; color: #fff; box-shadow: 0 3px 0 #1F3E1D; }
.cms-btn-publish:hover { background: #244722; }
.cms-btn-defer { background: #fff; color: var(--ink-navy); border-color: var(--ink-navy); box-shadow: 0 3px 0 rgba(27,35,64,0.28); }
.cms-btn-defer:hover { background: var(--quiet-paper); }
.cms-btn-review { background: transparent; color: var(--ink-navy); border-color: rgba(27,35,64,0.28); font-weight: 600; }
.cms-btn-review:hover { background: var(--quiet-paper); }
.cms-btn:disabled { background: #E4E1D7; color: #57544A; border-color: #D6D3C7; box-shadow: none; cursor: not-allowed; transform: none; }
@media (max-width: 620px) {
  .cms-actionbar-btns { width: 100%; margin-left: 0; }
  .cms-btn { flex: 1; padding: 12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .cms-section > summary::after { transition: none; } .cms-btn:active { transform: none; } }


/* ============================================================
   Print (D-086). Content doc spec: strip the header, menu and other
   chrome; keep the title, memory verse, conversation and scripture
   references, for classroom use. This was specified and mocked up in the
   prototype but never ported to the real build until now.
   Written to read on paper with "background graphics" off, the browser
   default: the speaker chips and the memory-verse tint lose their fills, so
   they are redrawn with bold text and borders, which do print.
   ============================================================ */
.print-masthead { display: none; }
.print-btn { background: transparent; border: 0.5px solid var(--ink-navy); color: var(--ink-navy); border-radius: 8px; padding: 9px 16px; font-size: 14px; font-family: 'Public Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.print-btn:hover { background: rgba(27,35,64,0.06); }

@media print {
  @page { margin: 18mm 16mm; }
  body, body.reading { background: #fff; color: #000; }
  header.site, nav, .intro-strip, .daynav, .print-btn, .step-block, .tags, .study-links, .weekdays, .backtodays, .site-footer, .feedback-note { display: none !important; }
  .print-masthead { display: block; font-family: Georgia, serif; font-size: 9pt; letter-spacing: 0.06em; text-transform: uppercase; color: #444; border-bottom: 0.5pt solid #999; padding-bottom: 4pt; margin: 0 0 14pt; }
  .wrap, body.reading .wrap { max-width: none; margin: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; }
  h1.title { font-size: 22pt; margin: 4pt 0 8pt; color: #000; }
  h1, h2, h3, .day-title, .utility, .speaker { break-after: avoid; }
  .utility { font-size: 9pt; color: #333; }
  .dialogue-block { margin-bottom: 12pt; }
  .dialogue-block p, .narrative p, .dialogue-block li { font-size: 11.5pt; line-height: 1.5; max-width: none; color: #000; orphans: 3; widows: 3; }
  .speaker, .speaker.s-teacher, .speaker.s-inquirer, .speaker.s-former, .speaker.s-newbeliever { background: none !important; color: #000 !important; padding: 0; border-radius: 0; font-size: 9pt; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 2pt; }
  .memory-verse { background: none; border-left: 2.5pt solid #000; border-radius: 0; padding: 4pt 0 4pt 10pt; break-inside: avoid; }
  .memory-verse p { color: #000; font-size: 11.5pt; }
  blockquote.pull { color: #000; border-left-color: #000; max-width: none; break-inside: avoid; }
  .before-tree { break-inside: avoid; }
  .day-block { border-top: 0.5pt solid #999 !important; }
  a { color: #000; text-decoration: none; }
}


/* ============================================================
   Founder stats page (.stats-*), D-088. Mocked up in
   prototype/cms-stats.html. Plain CSS bars, no scripts.
   ============================================================ */
.stats-window { display: flex; gap: 6px; margin: 4px 0 20px; align-items: center; flex-wrap: wrap; }
.stats-window .lbl { font-size: 12px; color: #5C6284; margin-right: 4px; }
.stats-section { margin-top: 32px; }
.stats-section > h2.title { font-size: 18px; margin: 0 0 4px; }
.stats-sub { font-size: 12.5px; color: #5C6284; margin: 0 0 14px; }
.stats-panel { display: block; background: #fff; border: 1px solid rgba(27,35,64,0.14); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.stats-panel h3 { font-family: Georgia, serif; font-size: 14.5px; font-weight: 600; color: var(--ink-navy); margin: 0 0 12px; }
.stats-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.stats-total .n { font-family: Georgia, serif; font-size: 32px; font-weight: 600; color: var(--ink-navy); line-height: 1; }
.stats-total .u { font-size: 13px; color: #5C6284; }

.stats-bars { list-style: none; margin: 0; padding: 0; }
.stats-bars li { display: grid; grid-template-columns: 132px 1fr 74px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--soft-ink); }
.stats-bars .track { height: 10px; background: #EEECE4; border-radius: 999px; overflow: hidden; }
.stats-bars .fill { display: block; height: 100%; background: var(--sky-blue); border-radius: 999px; }
.stats-bars .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-navy); font-weight: 600; }
.stats-bars .val small { font-weight: 400; color: #5C6284; }

.stats-cols { display: grid; gap: 10px; align-items: end; height: 120px; padding-top: 6px; }
.stats-cols .col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; min-width: 0; }
.stats-cols .bar { width: 100%; max-width: 52px; background: var(--sky-blue); border-radius: 6px 6px 0 0; min-height: 3px; }
.stats-cols .bar.gold { background: var(--canopy-gold); }
.stats-cols .num { font-size: 12px; font-weight: 600; color: var(--ink-navy); font-variant-numeric: tabular-nums; }
.stats-col-labels { display: grid; gap: 10px; margin-top: 6px; }
.stats-col-labels span { text-align: center; font-size: 11px; color: #5C6284; overflow: hidden; }

table.stats-list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.stats-list th { text-align: left; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bark-brown); font-weight: 600; padding: 0 0 8px; border-bottom: 1px solid rgba(27,35,64,0.14); }
table.stats-list th.num, table.stats-list td.num { text-align: right; font-variant-numeric: tabular-nums; width: 64px; }
table.stats-list td { padding: 9px 0; border-bottom: 1px solid rgba(27,35,64,0.08); color: var(--soft-ink); }
table.stats-list tr:last-child td { border-bottom: none; }
table.stats-list td a { color: var(--ink-navy); text-decoration: none; font-weight: 500; }
table.stats-list td a:hover { text-decoration: underline; }
table.stats-list td.q { font-weight: 500; color: var(--ink-navy); overflow-wrap: anywhere; }
table.stats-list td .meta { display: block; font-size: 11.5px; color: #5C6284; font-weight: 400; }
.stats-list .zero { display: inline-block; font-size: 11px; font-weight: 600; color: #A6702A; background: #FBF1E3; border: 1px solid rgba(166,112,42,0.4); border-radius: 999px; padding: 1px 8px; }

.stats-empty { border: 1px dashed rgba(27,35,64,0.25); border-radius: 12px; padding: 18px; text-align: center; color: #5C6284; font-size: 13.5px; }
.stats-note { font-size: 12px; color: #5C6284; margin: 10px 0 0; line-height: 1.55; }
.stats-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: inherit; }
.stats-link:hover { border-color: var(--ink-navy); }
.stats-link .arrow { color: var(--ink-navy); font-weight: 600; white-space: nowrap; }

@media (max-width: 520px) {
  .stats-bars li { grid-template-columns: 96px 1fr 62px; gap: 8px; font-size: 12.5px; }
}