/* Seeds and Wonder, Components v3-1
   Refinement layer over v3 components. The taste pass.
   Consumes design-tokens-v3-1.css only.

   Discipline:
     - One display moment per screen (hero h1 + verse pull only)
     - No card chrome by default. Hairline rules separate sections.
     - Numbers (durations) live as marginalia, never as pills.
     - One inset paper for "for Rachel", "Carlton", "if the day goes sideways".
     - Quiet motion. Color shift on hover. No transforms.
*/

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ===== Small caps label ===== */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}

/* ===== PIN gate ===== */
#pin-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--paper);
  display: flex; flex-direction: column; gap: var(--sp-4);
  align-items: center; justify-content: center;
  padding: var(--sp-5);
}
#pin-gate.hidden { display: none; }
#pin-gate .mark {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--accent);
  margin-bottom: var(--sp-2);
  letter-spacing: var(--tracking-tight);
}
#pin-gate h2 {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
#pin-gate .sub {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: -2px;
}
#pin-gate .row { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
#pin-gate .digit {
  width: 48px; height: 56px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  outline: none;
  caret-color: var(--accent);
  transition: border-color var(--dur-fast) var(--ease-out);
}
#pin-gate .digit:focus { border-color: var(--accent); }
#pin-gate .digit.error {
  border-color: var(--danger);
  animation: shake .35s var(--ease-out);
}
#pin-gate .err {
  color: var(--danger);
  font-size: var(--fs-small);
  height: 18px;
}
#pin-gate .hint {
  color: var(--muted);
  font-size: var(--fs-small);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}

/* ===== Top nav ===== */
#content { display: none; }
#content.visible { display: block; }

.topnav {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}
.topnav-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav-inner::-webkit-scrollbar { display: none; }
.topnav-brand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  flex-shrink: 0;
}
.topnav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 8px 4px;
  white-space: nowrap;
  min-height: var(--tap-min);
  display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.topnav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Hero (the one feature panel) ===== */
.hero {
  background: var(--lk-bg-feature);
  color: var(--lk-fg-soft-on-feature);
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
  position: relative;
}
.hero::after {
  /* A single hairline of accent at the bottom, the only chrome on the panel */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 48px; height: 1px;
  background: var(--lk-accent-on-feature);
  opacity: 0.6;
}
.hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.hero .day-anchor {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--lk-accent-on-feature);
  margin-bottom: var(--sp-5);
}
.hero h1 {
  /* THE display moment. Playfair, one size, one place. */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  color: var(--lk-fg-on-feature);
  letter-spacing: var(--tracking-tight);
  max-width: 18ch;
}
.hero .subtitle {
  /* Body face italic, not Playfair italic. Saves the display face for h1. */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-h3);
  color: var(--lk-fg-soft-on-feature);
  margin: 0 0 var(--sp-5);
  max-width: var(--reading-max);
  line-height: var(--lh-snug);
}
.hero .meta {
  display: flex; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--lk-meta-on-feature);
  font-feature-settings: "tnum" 1;
}
.hero .meta span { display: inline-flex; gap: 6px; }
.hero .meta .meta-key {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--fs-micro);
  color: var(--lk-accent-on-feature);
  align-self: center;
}

/* ===== Main container ===== */
main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}

/* ===== Glance, the only floating surface ===== */
.glance {
  margin-top: calc(var(--sp-7) * -1);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  padding: var(--sp-5);
  position: relative;
  z-index: 5;
}
.glance .row {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
}
.glance .label {
  margin-bottom: var(--sp-2);
}
.glance .value {
  font-size: var(--fs-body);
  color: var(--ink);
  font-weight: 400;
  line-height: var(--lh-snug);
}
.glance .verse {
  /* The second display moment of the page. Playfair italic. */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h3);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.glance .verse cite {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  display: block;
  margin-top: var(--sp-2);
}

@media (min-width: 720px) {
  .glance .row { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ===== Section block ===== */
.block {
  margin-top: var(--sp-7);
  scroll-margin-top: 80px;
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--sp-6);
  position: relative;
}
.block > h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.block > h2 .marginalia {
  /* Number in the margin: tracked uppercase, gold, tabular */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  align-self: center;
}
.block > p.lead {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-4);
  max-width: var(--reading-max);
}

/* ===== Card (now a quiet block, no chrome) ===== */
.card {
  background: transparent;
  color: var(--ink);
  padding: 0;
  margin: var(--sp-4) 0 0;
  border: none;
  box-shadow: none;
}
/* Card head removed in v3-1, but defensive styles for any leftover use */
.card-head { display: none; }

/* ===== Tabs ===== */
.tabs { margin: var(--sp-3) 0 0; }
.tab-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: var(--sp-4);
}
.tab-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 10px 14px 12px 0;
  margin-right: var(--sp-4);
  min-height: var(--tap-min);
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.tab-btn:hover { color: var(--ink-soft); }
.tab-btn[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tab-panel { padding-top: var(--sp-2); }
.tab-panel[hidden] { display: none; }
.tab-panel p {
  margin: 0 0 var(--sp-3);
  max-width: var(--reading-max);
}

/* ===== Materials ===== */
.materials { margin-top: var(--sp-5); }
.materials h4,
.vocab h4 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
  margin: 0 0 var(--sp-2);
}
.materials ul { list-style: none; padding: 0; margin: 0; }
.materials li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 8px 0;
  min-height: var(--tap-min);
  border-bottom: 1px solid var(--rule-soft);
}
.materials li:last-child { border-bottom: none; }
.materials input[type=checkbox] {
  margin-top: 6px;
  width: 18px; height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.materials li.done label {
  text-decoration: line-through;
  color: var(--muted);
}
.materials label {
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: var(--lh-snug);
}

/* ===== Vocab pills (now: underlined words, not pills) ===== */
.vocab { margin-top: var(--sp-5); }
.vocab .pill {
  display: inline-block;
  margin: 0 var(--sp-3) var(--sp-2) 0;
  padding: 4px 0;
  min-height: 28px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  border: 0;
  border-bottom: 1px dashed var(--accent);
  border-radius: 0;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.vocab .pill:hover {
  color: var(--accent);
  border-bottom-style: solid;
}
.vocab .pill[aria-expanded="true"] {
  color: var(--accent);
  border-bottom-style: solid;
}
.vocab .definition {
  margin-top: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--accent);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  font-style: italic;
  line-height: var(--lh-snug);
}
.vocab .definition[hidden] { display: none; }

/* ===== Inset blocks (Carlton, Rachel, Fallback) =====
   In v3 these were three different colored cards.
   In v3-1 they share one inset paper, distinguished by their label only. */
.companion,
.fallback,
.rachel-notes {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-inset);
  color: var(--ink);
  border-radius: var(--r-sm);
}
.companion-label,
.fallback-label,
.rachel-notes-label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  margin-bottom: var(--sp-2);
  display: block;
}
.companion p,
.fallback p,
.rachel-notes p {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  max-width: var(--reading-max);
}
.companion + .companion,
.fallback + .fallback,
.rachel-notes + .rachel-notes,
.companion + .rachel-notes,
.rachel-notes + .companion,
.companion + .fallback,
.fallback + .companion,
.rachel-notes + .fallback,
.fallback + .rachel-notes {
  margin-top: var(--sp-3);
}
.companion .vetnote {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: 6px;
}
.companion a {
  color: var(--link);
  font-weight: 500;
}

/* Legacy h3 inside rachel-notes from v3 templates: hide it; the label does the work */
.rachel-notes h3 { display: none; }

/* ===== Memory verse audio button ===== */
.scripture-audio {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3);
  padding: 6px 0;
  min-height: 32px;
  background: transparent;
  color: var(--link);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  border: 0;
  border-bottom: 1px solid var(--link);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.scripture-audio:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Photo CTA, ledger style =====
   v3 had this as a navy panel. v3-1 makes it a bracketed line:
   small caps label, plain prompt, plain link. No fill, two hairlines. */
.photo-cta {
  margin-top: var(--sp-7);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
.photo-cta .copy { max-width: var(--reading-max); }
.photo-cta .copy strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.photo-cta .copy span {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}
.photo-cta .cta-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  display: block;
  margin-bottom: 2px;
}
.photo-cta a {
  color: var(--link);
  font-weight: 500;
  font-size: var(--fs-body);
  text-decoration: none;
  border-bottom: 1px solid var(--link);
  padding: 4px 0;
  align-self: start;
  justify-self: start;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.photo-cta a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (min-width: 720px) {
  .photo-cta {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--sp-5);
  }
}

/* ===== Weather banner ===== */
.wx-banner {
  margin-top: var(--sp-4);
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  max-width: var(--reading-max);
}
.wx-banner b {
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--fs-micro);
  display: inline-block;
  margin-right: 6px;
}
.wx-banner.unknown b { color: var(--accent); }
.wx-banner.alert b { color: var(--danger); }
.wx-banner.alert {
  border-top-color: var(--danger);
  color: var(--ink);
}

/* ===== Footer (colophon) ===== */
footer {
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
  border-top: 1px solid var(--rule-soft);
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-small);
}
footer .colophon {
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.01em;
}
footer .colophon-mark {
  display: block;
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 18px;
  margin-bottom: var(--sp-3);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
/* Hide v3 build-note in v3-1; build version moves to HTML comment in template */
footer .build-note { display: none; }

/* ===== Print ===== */
@media print {
  @page { margin: 0.5in; }
  body { background: white !important; color: black !important; font-size: 11pt; }
  .topnav, .photo-cta, .scripture-audio,
  .vocab .definition[hidden],
  #pin-gate, .tab-btn { display: none !important; }
  #content { display: block !important; }
  .hero {
    background: white !important;
    color: black !important;
    padding: 0 0 12pt;
    border-bottom: 2pt solid black;
  }
  .hero::after { display: none; }
  .hero h1, .hero .day-anchor, .hero .meta b { color: black !important; }
  .hero .subtitle, .hero .meta { color: #333 !important; }
  .glance, .companion, .fallback, .rachel-notes, .wx-banner {
    box-shadow: none !important;
    border: 1pt solid #999 !important;
    background: white !important;
    color: black !important;
    break-inside: avoid;
  }
  .vocab .pill {
    background: white !important;
    color: black !important;
    border: 1pt solid #999 !important;
  }
  .tab-panel[hidden] { display: block !important; }
  .tab-panel { border-top: 1pt dashed #999; padding-top: 6pt; margin-top: 6pt; }
  a { color: black; text-decoration: underline; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt; color: #555;
  }
  .block { break-inside: avoid; margin-top: 16pt; border-top: 1pt solid #333; padding-top: 8pt; }
  .block h2 { font-size: 14pt; color: black !important; }
  footer .colophon-mark { color: black !important; }
}