/* Seeds and Wonder, Components v3
   Consumes design-tokens-v3.css only. No hardcoded colors.

   Component contracts live in design-system-v3.md; this file is the
   implementation. If you find yourself reaching for a hex code here,
   stop and add a token instead.
*/

/* ===== 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-on-page);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal-on-page); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

/* ===== PIN gate ===== */
#pin-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-page);
  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 .lock { font-size: 36px; }
#pin-gate h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2); margin: 0;
  color: var(--ink-on-page);
}
#pin-gate .sub {
  font-size: var(--fs-small);
  color: var(--muted-on-page); margin-top: -4px;
}
#pin-gate .row { display: flex; gap: var(--sp-3); }
#pin-gate .digit {
  width: 52px; height: 60px;
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--bg-card);
  color: var(--ink-on-card);
  font-family: var(--font-display);
  font-size: 26px; text-align: center;
  outline: none; caret-color: var(--teal-on-page);
}
#pin-gate .digit:focus { border-color: var(--teal-on-page); }
#pin-gate .digit.error {
  border-color: var(--danger-on-page);
  animation: shake .35s var(--ease-out);
}
#pin-gate .err {
  color: var(--danger-on-page);
  font-size: var(--fs-small); height: 18px;
}
#pin-gate .hint {
  color: var(--muted-on-page); font-size: var(--fs-small);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

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

.topnav {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.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-display);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--ink-on-page);
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.topnav a {
  color: var(--ink-soft-on-page);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  min-height: var(--tap-min);
  display: inline-flex; align-items: center;
}
.topnav a:hover {
  background: var(--bg-mist);
  color: var(--teal-on-mist);
}

/* ===== Hero (LOCKED) ===== */
.hero {
  background: linear-gradient(160deg, var(--lk-bg-feature) 0%, var(--lk-bg-feature-soft) 100%);
  color: var(--lk-fg-soft-on-feature);
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
}
.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-small); font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lk-accent-on-feature);
  margin-bottom: var(--sp-4);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
  color: var(--lk-fg-on-feature);
  letter-spacing: -0.01em;
}
.hero .subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--lk-accent-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-4); flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--lk-meta-on-feature);
}
.hero .meta span { display: inline-flex; gap: 6px; }
.hero .meta b {
  color: var(--lk-fg-on-feature);
  font-weight: 600;
  letter-spacing: 0.02em;
}

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

/* ===== Glance card ===== */
.glance {
  margin-top: calc(var(--sp-7) * -1);
  background: var(--bg-card);
  color: var(--ink-on-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-3);
  position: relative; z-index: 5;
}
.glance .row {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
.glance .label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-on-page);
}
.glance .value {
  font-size: var(--fs-body);
  color: var(--ink-on-card);
  font-weight: 500;
  margin-top: 2px;
}
.glance .verse {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--ink-on-card);
  line-height: var(--lh-snug);
  margin-top: 4px;
}
.glance .verse cite {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--teal-on-page);
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
}

@media (min-width: 720px) {
  .glance .row { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===== Section block ===== */
.block { margin-top: var(--sp-7); scroll-margin-top: 90px; }
.block > h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
  color: var(--ink-on-page);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-5);
  letter-spacing: -0.01em;
}
.block > p.lead {
  font-size: var(--fs-h3);
  color: var(--ink-soft-on-page);
  margin: 0 0 var(--sp-4);
  max-width: var(--reading-max);
  line-height: var(--lh-snug);
}

/* ===== Activity card ===== */
.card {
  background: var(--bg-card);
  color: var(--ink-on-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  padding: var(--sp-5);
  margin: var(--sp-4) 0;
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.card-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin: 0;
  color: var(--ink-on-card);
  line-height: var(--lh-snug);
}
.card-head .duration {
  font-size: var(--fs-small);
  color: var(--teal-on-mist);
  font-weight: 600;
  background: var(--bg-mist);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ===== Tabs (Logan / Caleb) ===== */
.tabs { margin: var(--sp-3) 0; }
.tab-bar {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-mist);
  border-radius: var(--r-md);
  width: fit-content;
}
.tab-btn {
  appearance: none; border: 0;
  background: transparent; cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  padding: 10px 18px;
  min-height: var(--tap-min);
  border-radius: var(--r-sm);
  color: var(--teal-on-mist);
  transition: background var(--dur-fast) var(--ease-out);
}
.tab-btn[aria-selected="true"] {
  background: var(--bg-card);
  color: var(--ink-on-card);
  box-shadow: var(--elev-1);
}
.tab-panel { padding-top: var(--sp-3); }
.tab-panel[hidden] { display: none; }
.tab-panel p { margin: 0 0 var(--sp-3); }
.tab-panel .age {
  font-size: var(--fs-small);
  color: var(--muted-on-page);
  margin: 0 0 6px;
}

/* ===== Materials checklist ===== */
.materials { margin-top: var(--sp-4); }
.materials h4 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted-on-page);
  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: 10px 12px;
  border-radius: var(--r-sm);
  min-height: var(--tap-min);
  transition: background var(--dur-fast) var(--ease-out);
}
.materials li:hover { background: var(--bg-mist); }
.materials input[type=checkbox] {
  margin-top: 4px;
  width: 22px; height: 22px;
  accent-color: var(--teal-on-page);
  flex-shrink: 0;
  cursor: pointer;
}
.materials li.done label {
  text-decoration: line-through;
  color: var(--muted-on-page);
}
.materials label {
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--ink-on-card);
  line-height: var(--lh-snug);
}

/* ===== Vocab pills ===== */
.vocab { margin-top: var(--sp-4); }
.vocab h4 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted-on-page);
  margin: 0 0 var(--sp-2);
}
.vocab .pill {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 8px 14px;
  min-height: var(--tap-min);
  border-radius: var(--r-pill);
  background: var(--bg-mist);
  color: var(--teal-on-mist);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.vocab .pill:hover {
  border-color: var(--teal-on-page);
}
.vocab .pill[aria-expanded="true"] {
  /* LOCKED inverse: navy fill, cream ink. Stays the same in both modes. */
  background: var(--lk-bg-feature);
  color: var(--lk-fg-on-feature);
  border-color: var(--lk-bg-feature);
}
.vocab .definition {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-mist);
  color: var(--ink-on-surface);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  border-left: 3px solid var(--teal-on-page);
  line-height: var(--lh-snug);
}
.vocab .definition[hidden] { display: none; }

/* ===== Companion video / Carlton's prep ===== */
.companion {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-carlton);
  color: var(--ink-on-carlton);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.companion-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-on-carlton);
  opacity: 0.78;
  margin-bottom: 4px;
}
.companion a {
  color: var(--teal-on-page);
  font-weight: 500;
}
.companion p { margin: 4px 0 0; }
.companion .vetnote {
  font-size: var(--fs-small);
  color: var(--ink-on-carlton);
  opacity: 0.75;
  margin-top: 4px;
}

/* ===== Fallback block ===== */
.fallback {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-fallback);
  color: var(--ink-on-fallback);
  border-radius: var(--r-md);
  border-left: 3px solid var(--gold-on-page);
}
.fallback-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-on-fallback);
  opacity: 0.85;
  margin-bottom: 4px;
}
.fallback p { margin: 4px 0 0; }

/* ===== Rachel's notes ===== */
.rachel-notes {
  background: var(--bg-rachel);
  color: var(--ink-on-rachel);
  border-left: 4px solid var(--teal-on-page);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  margin: var(--sp-5) 0;
}
.rachel-notes h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin: 0 0 var(--sp-2);
  color: var(--teal-on-mist);
}
.rachel-notes p {
  margin: 0 0 var(--sp-2);
  color: var(--ink-on-rachel);
  line-height: var(--lh-snug);
}

/* ===== Memory verse audio button ===== */
.scripture-audio {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-2);
  padding: 8px 14px;
  min-height: var(--tap-min);
  background: var(--bg-mist);
  color: var(--teal-on-mist);
  font-size: var(--fs-small);
  font-weight: 600;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}

/* ===== Photo CTA (LOCKED) ===== */
.photo-cta {
  margin-top: var(--sp-6);
  background: var(--lk-bg-feature);
  color: var(--lk-fg-on-feature);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.photo-cta .copy { max-width: 32rem; }
.photo-cta .copy strong {
  display: block;
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--lk-fg-on-feature);
}
.photo-cta .copy span {
  font-size: var(--fs-small);
  color: var(--lk-meta-on-feature);
  line-height: var(--lh-snug);
}
.photo-cta a {
  background: var(--lk-accent-on-feature);
  color: var(--lk-ink-on-cream);
  padding: 12px 20px;
  min-height: var(--tap-min);
  display: inline-flex; align-items: center;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
}
.photo-cta a:hover { filter: brightness(0.96); }

/* ===== Weather banner ===== */
.wx-banner {
  background: var(--bg-surface);
  color: var(--ink-on-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.wx-banner b {
  color: var(--ink-on-surface);
  font-weight: 700;
}
.wx-banner.unknown {
  background: var(--bg-fallback);
  color: var(--ink-on-fallback);
  border-color: var(--gold-on-page);
}
.wx-banner.unknown b { color: var(--ink-on-fallback); }
.wx-banner.alert {
  background: color-mix(in srgb, var(--danger-on-page) 14%, var(--bg-page));
  color: var(--ink-on-page);
  border-color: var(--danger-on-page);
}
.wx-banner.alert b { color: var(--danger-on-page); }

/* ===== Footer ===== */
footer {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--muted-on-page);
  font-size: var(--fs-small);
}
footer .build-note {
  font-size: var(--fs-micro);
  opacity: 0.7;
  display: block;
  margin-top: 4px;
}

/* ===== 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 h1, .hero .day-anchor, .hero .meta b { color: black !important; }
  .hero .subtitle, .hero .meta { color: #333 !important; }
  .glance, .card, .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; }
  .tab-panel .age::after { content: " (always shown in print)"; }
  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; }
  .block h2 {
    font-size: 15pt;
    padding-top: 8pt;
    color: black !important;
  }
}

/* ===== High contrast assist ===== */
@media (prefers-contrast: more) {
  :root {
    --rule: #000000;
  }
  .card, .companion, .fallback, .rachel-notes, .glance, .wx-banner {
    border-width: 2px;
  }
}