/* LESSONS — guess first. Same voice as the rest of the platform: void ground,
   serif for ideas, mono for figures. The star of every screen is the pair of
   bars where your number meets the math's. */
* { box-sizing: border-box; }
html { background: #07090e; }
body {
  margin: 0; background: transparent; color: #eef2f7;
  font-family: 'Jost', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}

/* ── the ambient layer (Visual Doctrine, phase 5) ──────────────────────────
   The lessons sky: a blue aurora with faint constellation lines, generated
   for this page, scrimmed back toward the void so text contrast holds.
   position:fixed (iOS ignores background-attachment:fixed) — the page
   scrolls over a still sky. z-index:-1 paints under content but over the
   html ground; body must stay transparent for it to show at all. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,9,14,0.5), rgba(7,9,14,0.78) 82%),
    url('/img/ambient/lessons.webp') center / cover no-repeat,
    #07090e;
}
@media (prefers-reduced-data: reduce) {
  body::before { background: #07090e; }
}
main { max-width: 640px; margin: 0 auto; padding: 0 18px calc(40px + env(safe-area-inset-bottom)); }
.hidden { display: none !important; }
.quiet { color: #8b96a6; font-size: 13.5px; line-height: 1.6; }
.fine { font-size: 12px; }

#bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(rgba(7,9,14,0.94), rgba(7,9,14,0.72)); backdrop-filter: blur(6px);
}
#homeLink {
  color: #aeb8c7; text-decoration: none; font-size: 20px; line-height: 1;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(140,160,190,0.25); border-radius: 10px;
}
.bar-title, #calChip {
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.22em;
}
.bar-title { color: #8fb6ff; }
.bar-spacer { flex: 1; }
#calChip { color: #aeb8c7; border: 1px solid rgba(140,160,190,0.28); border-radius: 99px; padding: 5px 10px; white-space: nowrap; }

/* the syllabus */
#home { padding-top: 26px; }
h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(30px, 8vw, 42px); line-height: 1.1; margin: 0 0 14px; text-wrap: balance;
}
.lede { font-size: 16px; line-height: 1.62; color: #ccd5e0; margin: 0 0 10px; }
.lede em { color: #eef2f7; }
#syllabus { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.syl {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; min-height: 60px; border-radius: 12px;
  background: rgba(16,20,28,0.6); border: 1px solid rgba(140,160,190,0.16);
  color: #eef2f7; font-family: 'Jost', system-ui, sans-serif;
}
.syl:active { background: rgba(24,32,46,0.85); }
.syl.cal { border-color: rgba(98,214,164,0.35); }
.syn {
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 11px;
  color: #5b687e; flex: 0 0 auto;
}
.syl.cal .syn { color: #62d6a4; }
.syt { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.syt i {
  display: block; font-style: normal; margin-top: 2px;
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 9px;
  letter-spacing: 0.18em; color: #8b96a6;
}
.sys {
  flex: 0 0 auto; max-width: 34%; text-align: right;
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 10px;
  line-height: 1.4; color: #8b96a6;
}
.syl.cal .sys { color: #62d6a4; }

#fine { margin-top: 36px; border-top: 1px solid rgba(140,160,190,0.15); padding-top: 16px; }
#fine p { font-size: 12.5px; line-height: 1.55; color: #8b96a6; margin: 0 0 12px; }
#doorsHome { display: flex; flex-direction: column; }
#doorsHome a { display: block; padding: 13px 0; color: #62d6a4; text-decoration: none; font-size: 14px; }

/* one lesson */
#lesson { padding-top: 26px; }
.sec {
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 10px;
  font-weight: 600; letter-spacing: 0.24em; color: #8fb6ff; margin: 0 0 10px;
}
#lsHook {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(26px, 6.8vw, 36px); line-height: 1.15; margin: 0 0 12px; text-wrap: balance;
}
#lsSetup { font-size: 16px; line-height: 1.6; color: #ccd5e0; margin: 0 0 22px; }

/* the guess */
#gVal {
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 34px; font-weight: 600;
  text-align: center; margin-bottom: 8px; font-variant-numeric: tabular-nums; color: #e6bd5c;
}
#gSlider {
  width: 100%; appearance: none; height: 44px; background: none; cursor: pointer;
}
#gSlider::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: rgba(140,160,190,0.25); }
#gSlider::-webkit-slider-thumb {
  appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #e6bd5c; border: 3px solid #0b0e15; margin-top: -11px;
  box-shadow: 0 0 14px rgba(230,189,92,0.5);
}
#gSlider::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(140,160,190,0.25); }
#gSlider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: #e6bd5c; border: 3px solid #0b0e15;
  box-shadow: 0 0 14px rgba(230,189,92,0.5);
}
.range-ends {
  display: flex; justify-content: space-between; margin-top: 2px;
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 10.5px; color: #5b687e;
}

#gChoices { display: flex; flex-direction: column; gap: 8px; }
.chc {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  padding: 15px 16px; min-height: 52px; border-radius: 12px; font-size: 15.5px; font-weight: 500;
  background: rgba(16,22,32,0.75); border: 1px solid rgba(140,160,190,0.26);
  color: #eef2f7; font-family: 'Jost', system-ui, sans-serif;
}
.chc.sel { border-color: #e6bd5c; box-shadow: 0 0 0 1px #e6bd5c inset; }
.chc.right { border-color: #62d6a4; box-shadow: 0 0 0 1px #62d6a4 inset; }
.chc.wrong { border-color: #e0716d; opacity: 0.75; }
.chc:disabled { cursor: default; }

button.primary {
  appearance: none; cursor: pointer; width: 100%; border: 0; border-radius: 12px;
  background: #8fb6ff; color: #0a1020; font-weight: 600;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: 0.16em; padding: 15px 18px; margin-top: 18px;
  box-shadow: 0 4px 0 #4a6ea8;
}
button.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #4a6ea8; }
button.primary:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
.ghost-btn {
  appearance: none; cursor: pointer; background: none; border: 0; width: 100%;
  color: #aeb8c7; font-family: 'Jost', system-ui, sans-serif; font-size: 14px;
  padding: 14px; min-height: 44px; margin-top: 8px;
}

/* the answer */
#reveal { margin-top: 8px; }

/* the scene: the reveal, drawn. Your commitment is the gold line already on
   the chart; the math traces itself past it. Labels sit ON the ink. */
#scene { margin: 6px 0 4px; }
.scene-svg { display: block; width: 100%; height: auto; }
.math-line { fill: none; stroke: #8fb6ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.alt-line { fill: none; stroke: rgba(143,182,255,0.45); stroke-width: 1.8; stroke-dasharray: 1 0; stroke-linecap: round; }
.g-mark { stroke: #e6bd5c; stroke-width: 1.6; stroke-dasharray: 5 4; }
.g-mark.thick { stroke-width: 4; stroke-dasharray: none; opacity: 0.9; }
.gap-mark { stroke: #8fb6ff; stroke-width: 4; }
.a-vline { stroke: rgba(143,182,255,0.7); stroke-width: 1.4; stroke-dasharray: 2 3; }
.target { stroke: rgba(140,160,190,0.45); stroke-width: 1; stroke-dasharray: 2 4; }
.thin { stroke-width: 1.4; opacity: 0.75; }
.dn2 { stroke: #e0716d; }
.up2 { stroke: #62d6a4; }
.enddot { fill: #8fb6ff; filter: drop-shadow(0 0 6px rgba(143,182,255,0.8)); animation: dotIn 0.4s 1.4s both; }
@keyframes dotIn { from { opacity: 0; r: 0; } }
.sc-t { font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 10px; fill: #8b96a6; }
.sc-t.g-lab { fill: #e6bd5c; font-weight: 600; }
.sc-t.m-lab { fill: #b9d2ff; font-weight: 600; }
.sc-t.m-lab.dn { fill: #e0716d; }
.sc-t.m-lab.up { fill: #62d6a4; }
.sc-t.ax { font-size: 9px; fill: #5b687e; }

@media (prefers-reduced-motion: reduce) {
  .enddot { animation: none; }
}
.bars { margin: 18px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.brow { display: flex; align-items: center; gap: 10px; }
.bl {
  flex: 0 0 86px; font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.16em; color: #8b96a6;
}
.btrack { flex: 1; height: 14px; border-radius: 7px; background: rgba(140,160,190,0.14); overflow: hidden; }
.btrack i { display: block; height: 100%; border-radius: 7px; transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.brow:first-child .btrack i { background: #e6bd5c; }
.brow:last-child .btrack i { background: #8fb6ff; }
.brow b {
  flex: 0 0 auto; min-width: 84px; text-align: right;
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
#verdict { font-size: 16px; line-height: 1.55; color: #ccd5e0; margin: 0 0 10px; }
#verdict b { color: #eef2f7; }
#formula {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  padding: 10px 12px; border-radius: 10px; background: rgba(16,20,28,0.6);
  border-left: 2px solid rgba(143,182,255,0.4); line-height: 1.6; margin: 0 0 14px;
}
#takeaway {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16.5px;
  line-height: 1.5; color: #dde4ee; margin: 0 0 14px;
}
#doorLink {
  display: block; padding: 13px 0; color: #62d6a4; text-decoration: none; font-size: 14px;
}
.share-btn {
  appearance: none; cursor: pointer; width: 100%; min-height: 48px;
  border: 1px solid rgba(230,189,92,0.4); border-radius: 12px;
  background: rgba(26,22,11,0.5); color: #e6bd5c;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.14em; padding: 13px 18px; margin-top: 6px;
}
.share-btn:active { background: rgba(40,34,16,0.7); }

/* the seasonal slot: this month's extra, gold-edged because it expires */
.season-sec, .core-sec {
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 10px;
  font-weight: 600; letter-spacing: 0.24em; margin: 22px 0 8px;
}
.season-sec { color: #e6bd5c; }
.season-sec span { letter-spacing: 0.04em; color: #8b96a6; font-weight: 400; }
.core-sec { color: #8fb6ff; margin-top: 26px; }
.syl.season { border-color: rgba(230,189,92,0.4); background: rgba(26,22,11,0.5); }
.syl.season .syn { color: #e6bd5c; }
.syl.season.cal { border-color: rgba(98,214,164,0.4); }
.season-tally { margin: 7px 2px 0; }

/* the badge: a reticle, because calibration is what it says */
.badge-art {
  width: 22px; height: 22px; flex: 0 0 22px;
  fill: none; stroke: #e6bd5c; stroke-width: 2.6; stroke-linecap: round;
}
.badge-art.big {
  width: 54px; height: 54px; display: block; margin: 0 auto 10px;
  stroke-width: 2.2; filter: drop-shadow(0 0 12px rgba(230,189,92,0.5));
}
#badgeStrip {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(28,23,11,0.55); border: 1px solid rgba(230,189,92,0.35);
}
#badgeText {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 10.5px; line-height: 1.55; letter-spacing: 0.06em; color: #e6bd5c;
}

/* the ceremony sheet */
dialog {
  border: 1px solid rgba(230,189,92,0.4); border-radius: 16px; background: #0b0e15; color: #eef2f7;
  padding: 26px 20px 18px; width: min(440px, calc(100vw - 32px)); text-align: center;
  font-family: 'Jost', system-ui, sans-serif;
}
dialog::backdrop { background: rgba(4,5,8,0.78); backdrop-filter: blur(3px); }
.ev-tag {
  font-family: 'Spline Sans Mono', ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: 0.24em; color: #e6bd5c;
}
dialog h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 24px;
  line-height: 1.2; margin: 8px 0 10px;
}
dialog p { font-size: 14.5px; line-height: 1.6; color: #ccd5e0; margin: 0 0 10px; }
dialog p b { color: #eef2f7; font-family: 'Spline Sans Mono', ui-monospace, monospace; }
.rep-line {
  font-family: 'Spline Sans Mono', ui-monospace, monospace !important;
  font-size: 12px !important; color: #e6bd5c !important;
}
dialog .primary { margin-top: 10px; }
.ghost-link { display: block; text-align: center; color: #62d6a4; text-decoration: none; font-size: 14px; padding: 12px; }

@media (prefers-reduced-motion: reduce) {
  .btrack i { transition: none; }
}