/* Syllabus pages (/syllabus/*.html): the yoga certification syllabus, unit by unit.
   Frame, palette and type come from style.css. This file adds the night page head, the night
   "stage" that holds each animation, syllabus chips, practice steps, cautions, cards, tabs and
   scroll reveals. Page-specific animation styles live in /assets/course/<page>.css. */
:root {
  --night: #121831;
  --night-2: #1C1E3E;
  --night-3: #2B2447;
  --glow: #F3DFA8;
  --serif-it: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif;
  --deva: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif;
}

/* ---------- page head: a night sky band ---------- */
.course-head { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 56px; color: #fff; background: radial-gradient(120% 90% at 70% 0%, var(--night-3), var(--night) 72%); }
.course-head::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7; background-image:
  radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 68%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 46% 14%, var(--glow) 50%, transparent 51%), radial-gradient(1px 1px at 63% 42%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 82% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 91% 64%, var(--glow) 50%, transparent 51%),
  radial-gradient(1px 1px at 8% 84%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 55% 88%, #fff 50%, transparent 51%); }
.course-head .eyebrow { color: var(--glow); }
.course-head h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.5rem); }
.course-head .lead { color: rgba(255, 255, 255, .84); max-width: 640px; }
.course-head .jump a { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.course-head .jump a:hover { background: var(--glow); color: var(--night); }
.course-head-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 40px; align-items: center; }
.course-head figure { margin: 0; }
.course-head figure img { border-radius: var(--arch); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.course-head .books { margin: 20px 0 0; font-size: .85rem; color: rgba(255, 255, 255, .7); }

/* ---------- syllabus chip above each section heading ---------- */
.unit { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; font: 600 .74rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-dk); margin: 0 0 1rem; }
.unit b { padding: .3em .55em; border-radius: 6px; background: var(--sage-lt); color: var(--sage-dk); letter-spacing: .02em; }

/* ---------- Sanskrit ---------- */
.deva { font-family: var(--deva); font-size: 1.35rem; line-height: 1.6; color: var(--char); }
.iast { font-family: var(--serif-it); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.4; }
.verse .deva { display: block; margin-bottom: .3em; }
/* long sūtra compounds have no spaces: let them wrap on phones instead of widening the page */
.deva, .iast { overflow-wrap: break-word; }

/* ---------- references ---------- */
.cite { font-size: .85rem; color: var(--muted); }
.sources { font-size: .9rem; padding-left: 1.2em; }
.sources li { margin-bottom: .45em; }

/* ---------- practice steps ---------- */
.steps { counter-reset: step; list-style: none; padding: 0 !important; margin: 0 0 1.2em; }
.steps li { counter-increment: step; position: relative; padding: 0 0 .6em 2.6em; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: .1em; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--sage-dk); color: #fff; font: 600 .8rem/1.75em var(--sans); text-align: center; }

/* ---------- boxes ---------- */
.caution, .keypoint { margin: 1em 0 1.5em; padding: 16px 20px; border-radius: 14px; }
.caution { background: #FBEEE9; border: 1px solid #F0D2C7; border-left: 4px solid var(--terra); }
.keypoint { background: var(--sage-lt); border: 1px solid #D5DECF; border-left: 4px solid var(--sage-dk); }
.caution .eyebrow { color: var(--terra-dk); margin-bottom: .5rem; }
.keypoint .eyebrow { margin-bottom: .5rem; }
.caution > :last-child, .keypoint > :last-child { margin-bottom: 0; }
.caution ul, .keypoint ul { margin-bottom: 0; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 1.2em 0 1.6em; }
.card { padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: 18px; }
.card h3, .card h4 { margin: 0 0 .4em; font-size: 1.12rem; font-family: var(--serif); font-weight: 400; color: var(--char); }
.card p, .card li { font-size: .94rem; }
.card > :last-child { margin-bottom: 0; }
.card .tag-line { font: 600 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-dk); margin-bottom: .5em; }

/* ---------- the night stage that holds an animation ---------- */
.stage { position: relative; isolation: isolate; overflow: hidden; margin: 1.6em 0 2em; padding: 28px 24px; border-radius: 24px; color: #fff; background: radial-gradient(130% 100% at 50% 0%, var(--night-3), var(--night) 70%); box-shadow: 0 30px 60px -40px rgba(18, 24, 49, .8); }
.stage .eyebrow { color: var(--glow); margin-bottom: .6rem; }
.stage h3, .stage h4 { color: #fff; }
.stage p, .stage li { color: rgba(255, 255, 255, .84); }
.stage a { color: var(--glow); }
.stage svg, .stage canvas { display: block; width: 100%; height: auto; }
.stage-cap { font-size: .9rem; color: rgba(255, 255, 255, .72) !important; text-align: center; margin: 12px auto 0; max-width: 560px; min-height: 1.5em; }
.stage-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.stage button, .stage select { font: 600 .85rem/1 var(--sans); padding: .7em 1.1em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.stage select option { color: var(--char); }
.stage button:hover, .stage button[aria-pressed="true"], .stage button[aria-selected="true"] { background: var(--glow); border-color: var(--glow); color: var(--night); }
.stage button:focus-visible, .stage [tabindex]:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.stage-wide { margin-left: calc(50% - min(540px, 50vw - 16px)); margin-right: calc(50% - min(540px, 50vw - 16px)); }

/* ---------- tabs ([data-tabs] with role=tablist / tab / tabpanel) ---------- */
[data-tabs] [role="tablist"] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
[data-tabs] [role="tab"] { font: 600 .85rem/1.2 var(--sans); padding: .55em 1em; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--sage-dk); cursor: pointer; }
[data-tabs] [role="tab"][aria-selected="true"] { background: var(--sage-dk); border-color: var(--sage-dk); color: #fff; }
[data-tabs] [role="tab"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.stage[data-tabs] [role="tab"], .stage [data-tabs] [role="tab"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); color: #fff; }
.stage[data-tabs] [role="tab"][aria-selected="true"], .stage [data-tabs] [role="tab"][aria-selected="true"] { background: var(--glow); border-color: var(--glow); color: var(--night); }
[role="tabpanel"][hidden] { display: none; }

/* ---------- tables that may be wide ---------- */
.table-scroll { overflow-x: auto; margin: 0 0 1.2em; }
.table-scroll .gloss { min-width: 520px; margin: 0; }

/* ---------- previous / next unit ---------- */
.course-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--border); font-weight: 500; }

/* ---------- what a section teaches ---------- */
.aim { margin: -.3em 0 1.2em; font-size: .95rem; color: var(--sage-dk); }
.aim b { font: 600 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-right: .4em; }

/* ---------- checks: question cards, unit check and review (built by course.js) ---------- */
.check-card, .unit-check, .review { margin: 1.4em 0 1.8em; padding: 18px 20px 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--warm); }
.check-card { box-shadow: 0 1px 0 var(--border); }
.unit-check .check-card, .review .check-card { margin: 12px 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
.check-label { font: 600 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--terra-dk); margin: 0 0 .4em; }
.check-label:empty { display: none; }
.check-q { font-family: var(--serif); font-size: 1.18rem; line-height: 1.35; color: var(--char); margin: 0 0 .9em; outline: none; }
.check-opts { display: grid; gap: 8px; }
.check-opt { display: block; width: 100%; text-align: left; font: 500 .95rem/1.4 var(--sans); padding: .75em 1em; border-radius: 12px; border: 1px solid var(--border); background: #fff; color: var(--char); cursor: pointer; transition: border-color .2s, background .2s; }
.check-opt:hover:not(:disabled) { border-color: var(--sage-dk); background: var(--sage-lt); }
.check-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.check-opt:disabled { cursor: default; opacity: .55; }
.check-opt.is-right, .check-opt.is-wrong { opacity: 1; }
.check-opt.is-right { background: var(--sage-lt); border-color: var(--sage-dk); color: var(--sage-dk); font-weight: 600; }
.check-opt.is-wrong { background: #FBEEE9; border-color: var(--terra); color: var(--terra-dk); text-decoration: line-through; }
.check-opt.is-right::before { content: "✓  "; }
.check-opt.is-wrong::before { content: "✗  "; }
.check-fb { margin: .9em 0 0; font-size: .95rem; }
.check-fb:empty { display: none; }
.deck-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.deck-count { margin: 0; font: 600 .74rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--terra-dk); }
.deck-marks { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0 !important; margin: 0 !important; }
.deck-marks li { width: 14px; height: 14px; margin: 0; border-radius: 4px; border: 1px solid var(--border); background: #fff; }
.deck-marks li.is-now { border-color: var(--char); }
.deck-marks li.is-right { background: var(--sage-dk); border-color: var(--sage-dk); }
.deck-marks li.is-wrong { background: var(--terra); border-color: var(--terra); }
.deck-next { margin-top: 14px; font: 600 .9rem/1 var(--sans); padding: .8em 1.3em; border-radius: 999px; border: 0; background: var(--sage-dk); color: #fff; cursor: pointer; }
.deck-next:hover { background: var(--char); }
.deck-next:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.deck-note { margin: 0; }
.deck-score { font-family: var(--serif); font-size: 1.5rem; color: var(--char); margin: 0 0 .3em; }
.deck-link { display: inline-block; margin: 14px 0 0 16px; font-weight: 600; color: var(--terra-dk); }
.unit-score { display: inline-block; margin-left: .6em; padding: .2em .6em; border-radius: 999px; background: var(--sage-lt); color: var(--sage-dk); font: 600 .72rem/1.4 var(--sans); vertical-align: middle; }

/* a question that covers an animation until it is answered ("Before you watch") */
.stage .check { display: none; }
.stage.is-asking .check { display: flex; position: absolute; inset: 0; z-index: 3; overflow-y: auto; padding: 24px; background: radial-gradient(130% 100% at 50% 0%, var(--night-3), var(--night) 70%); }
.stage .check-card { margin: auto; width: 100%; max-width: 520px; background: none; border-color: rgba(255, 255, 255, .2); box-shadow: none; }
.stage .check-label { color: var(--glow); }
.stage .check-q { color: #fff; }
.stage .check-opt, .stage .check-opt:disabled { border-radius: 12px; text-align: left; padding: .75em 1em; font: 500 .95rem/1.4 var(--sans); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); color: #fff; }
.stage .check-opt:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: var(--glow); color: #fff; }
.stage .check-opt.is-right { background: rgba(123, 143, 110, .35); border-color: #A9C29A; color: #fff; }
.stage .check-opt.is-wrong { background: rgba(196, 101, 74, .25); border-color: var(--terra); color: #F3C9BB; }
.stage .deck-next { background: var(--glow); border-color: var(--glow); color: var(--night); }

/* ---------- scroll reveal (only when JS runs) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .course-head-grid { grid-template-columns: 1fr; gap: 28px; }
  .course-head figure { max-width: 300px; }
}
@media (max-width: 760px) {
  .stage { padding: 22px 16px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}