/* ============================================
   LESSON PAGES — clean figure-first layout (pilot: treble clef guide).
   Self-contained: its own tokens (mirrors the store palette), works with
   site-chrome.css (header/footer) and theme.njk (dark mode).
   Design model: a music-theory textbook page — the engraving leads,
   prose supports, one visual treatment per element type.
   ============================================ */

:root {
    --ink: #1c1917; --muted: #6b6560; --line: #e7e5e4; --bg: #fbfbfa; --card: #fff;
    --accent: #0d9488; --accent-dark: #0b7c72; --accent-soft: #f0fdfa;
    --amber: #b45309; --frame: #f5f4f2;
    --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    --sans: Inter, -apple-system, system-ui, sans-serif;
    --display: Fraunces, Georgia, serif;
}
body.dark-mode {
    --ink: #f5f5f4; --muted: #a8a29e; --line: #3a3633; --bg: #1a1817; --card: #242120;
    --accent: #2dd4bf; --accent-dark: #5eead4; --accent-soft: #132a27;
    --amber: #d9a066; --frame: #1f1d1c;
}

body { margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--sans); -webkit-font-smoothing: antialiased; }

.lesson { max-width: 680px; margin: 0 auto; padding: 0 22px; }

/* ---------- head: title, lede, byline — no hero, no buttons ---------- */

.lesson-head { padding: 30px 0 4px; }
.lesson-head h1 { font-family: var(--display); font-size: clamp(26px, 4.5vw, 34px);
    font-weight: 700; letter-spacing: -.015em; line-height: 1.12; margin: 0 0 10px; }
.lesson-lede { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6;
    color: var(--ink); margin: 0 0 14px; }
.lesson-meta { display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap;
    font-size: .82rem; color: var(--muted); margin: 0 0 4px; padding-bottom: 14px;
    border-bottom: 1px solid var(--line); }
.lesson-meta strong { color: var(--ink); font-weight: 600; }
.lesson-meta a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.lesson-meta a:hover { text-decoration: underline; }

/* ---------- the pipeline: Learn -> Practice -> Download ---------- */

.pipeline { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    font-family: var(--sans); font-size: .8rem; margin: 12px 0 2px; padding-bottom: 2px; }
.pipeline::-webkit-scrollbar { display: none; }
.pl-step, .pl-arrow { flex: 0 0 auto; white-space: nowrap; }
.pl-step { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px;
    border: 1px solid var(--line); border-radius: 100px; color: var(--muted);
    text-decoration: none; }
.pl-step .pl-k { font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; }
.pl-step.on { background: var(--accent-soft); border-color: var(--accent);
    color: var(--ink); }
.pl-step.on .pl-k { color: var(--accent-dark); }
a.pl-step { color: var(--ink); }
a.pl-step .pl-k { color: var(--accent-dark); }
a.pl-step:hover { border-color: var(--accent); }
a.pl-step.pl-buy .pl-k { color: var(--amber); }
a.pl-step.pl-buy:hover { border-color: var(--amber); }
.pl-step a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.pl-step a:hover { color: var(--accent-dark); border-bottom-color: var(--accent-dark); }
.pl-arrow { color: var(--muted); }

/* ---------- body copy ---------- */

.lesson h2 { font-family: var(--display); font-size: 1.32rem; font-weight: 700;
    letter-spacing: -.01em; margin: 34px 0 8px; }
.lesson h2 .n, .lesson h3 .n { color: var(--accent-dark); margin-right: 6px; }
.lesson p { font-family: var(--serif); font-size: 1.04rem; line-height: 1.65;
    margin: 0 0 12px; }
.lesson p a, .lesson li a { color: var(--accent-dark); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px; }
.lesson ol, .lesson ul { font-family: var(--serif); font-size: 1.04rem; line-height: 1.65;
    margin: 0 0 12px; padding-left: 24px; }
.lesson li { margin-bottom: 6px; }
.go { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: .92rem;
    color: #fff; background: var(--accent-dark); padding: 9px 18px; border-radius: 8px;
    text-decoration: none !important; }
body.dark-mode .go { color: #0d2622; background: var(--accent); }
.go:hover { filter: brightness(1.08); }
.lesson p a.go { color: #fff; }
body.dark-mode .lesson p a.go { color: #0d2622; }
.lesson .aside { font-size: .92rem; color: var(--muted); }


/* ---------- generic lesson furniture (tables, subheads, note cards) ---------- */

.lesson h3 { font-family: var(--display); font-size: 1.08rem; font-weight: 700;
    margin: 20px 0 6px; }
.lesson .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0; }
.lesson table { width: 100%; border-collapse: collapse; font-family: var(--sans);
    font-size: .9rem; line-height: 1.4; }
.lesson thead th { text-align: left; font-weight: 700; padding: 5px 12px 6px;
    border-bottom: 2px solid var(--muted); white-space: nowrap; }
.lesson tbody td { padding: 5px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lesson th:first-child, .lesson td:first-child { padding-left: 0; }
.lesson th:last-child, .lesson td:last-child { padding-right: 0; }
.lesson tbody tr:last-child td { border-bottom: none; }

.info-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin: 14px 0; }
.info-card.highlight { border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.info-card h4 { font-family: var(--sans); font-size: .92rem; font-weight: 700; margin: 0 0 6px; }
.info-card p:last-child, .info-card ul:last-child, .info-card ol:last-child { margin-bottom: 0; }

/* ---------- the example block: engraving + caption bar, one unit ---------- */

.ex { margin: 18px 0 22px; padding: 14px 16px 10px; background: var(--card);
    border: 1px solid var(--line); border-radius: 10px; }
.ex .guide-fig { max-width: 560px; margin: 0 auto; position: relative; }
.ex .guide-fig svg { display: block; width: 100%; height: auto; }
body.dark-mode .ex .guide-fig svg { filter: invert(.92) hue-rotate(180deg); }

.ex figcaption, .ex .guide-figcap { display: flex; align-items: baseline; gap: 6px 14px;
    flex-wrap: wrap; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line);
    font-family: var(--serif); font-size: .88rem; line-height: 1.45; color: var(--muted); }
.ex .mn { font-family: var(--display); font-style: normal; font-size: 1.02rem;
    font-weight: 700; color: var(--ink); }
.ex .gfig-play { margin-left: auto; order: 99; }

.gfig-play { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
    font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .03em;
    color: #fff; background: var(--accent-dark); border: none; border-radius: 100px;
    cursor: pointer; }
body.dark-mode .gfig-play { color: #0d2622; background: var(--accent); }
.gfig-play:hover { filter: brightness(1.08); }
.gfig-play:active { transform: translateY(1px); }

/* Note lit while its audio sounds (guide-figures / lesson-quiz) */
.gfig-hot path, .gfig-hot rect, .gfig-hot text { fill: #0d9488 !important; }
.gfig-hot path[stroke], .gfig-hot rect[stroke] { stroke: #0d9488 !important; }


/* ---------- "try it" quiz — interactive card, same family as .ex ---------- */

.try-it { max-width: 470px; margin: 18px auto 24px; padding: 12px 16px 12px;
    background: var(--accent-soft); border: 1px solid var(--line);
    border-radius: 12px; }
.ti-head { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 4px; }
.ti-label { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.ti-score { font-family: var(--sans); font-size: .78rem; font-weight: 700;
    color: var(--muted); font-variant-numeric: tabular-nums; }
.ti-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ti-stage { width: 190px; }
.ti-stage svg { display: block; }
body.dark-mode .ti-stage svg { filter: invert(.92) hue-rotate(180deg); }
.ti-right { flex: 1; min-width: 0; }
.ti-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.ti-btn { font-family: var(--sans); font-size: .95rem; font-weight: 700;
    color: var(--ink); background: var(--card); border: 1px solid var(--line);
    border-radius: 8px; width: 40px; height: 38px; cursor: pointer; }
.ti-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.ti-btn.ok { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.ti-btn.no { border-color: #dc2626; color: #dc2626; }
.ti-msg { font-family: var(--sans); font-size: .82rem; font-weight: 600;
    min-height: 1.2em; margin: 8px 0 0; color: var(--muted); }
.ti-msg.ok { color: var(--accent-dark); }
.ti-msg.no { color: #dc2626; }
.ti-right { width: 100%; }
.ti-btns { justify-content: center; }
.ti-msg { text-align: center; }

/* Hand-off panel after the three questions */
.ti-done-line { font-family: var(--serif); font-size: .96rem; line-height: 1.55;
    margin: 4px 0 10px; }
.ti-done-links { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.ti-go { font-family: var(--sans); font-size: .85rem; font-weight: 700; color: #fff;
    background: var(--accent-dark); padding: 8px 14px; border-radius: 8px;
    text-decoration: none; }
body.dark-mode .ti-go { color: #0d2622; background: var(--accent); }
.ti-go:hover { filter: brightness(1.08); }
.ti-shop { font-family: var(--sans); font-size: .82rem; font-weight: 700;
    color: var(--amber); text-decoration: none; }
.ti-shop:hover { text-decoration: underline; }
.ti-again { font-family: var(--sans); font-size: .78rem; font-weight: 600;
    color: var(--muted); background: none; border: 1px solid var(--line);
    border-radius: 100px; padding: 5px 12px; cursor: pointer; margin-left: auto; }
.ti-again:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- numbered method steps (section 4) ---------- */

.steps { list-style: none; padding-left: 0 !important; counter-reset: step; }
.steps li { position: relative; padding-left: 40px; margin-bottom: 14px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 1px;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-size: .95rem; font-weight: 700;
    color: var(--accent-dark); border: 1.5px solid var(--accent-dark); border-radius: 50%; }
.steps li strong { display: block; margin-bottom: 1px; }

/* ---------- closing matter: ruled off, subordinate to the lesson ---------- */

.next { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.next h2 { margin-top: 0; font-size: 1.14rem; }
.next p { margin-bottom: 10px; }

/* ---------- FAQ — same voice as the lesson, hairline-separated ---------- */

.lesson .faq { margin: 38px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.lesson .faq h2 { margin-top: 0; font-size: 1.14rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: 10px 0 12px; }
.faq-item:last-of-type { border-bottom: none; }
.faq-item h3 { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; }
.faq-item p { font-family: var(--serif); font-size: .98rem; line-height: 1.6;
    color: var(--muted); margin: 0; }

.lesson .sources { font-size: .8rem; color: var(--muted); font-family: var(--sans);
    line-height: 1.6; margin: 22px 0 34px; }
.lesson .sources cite { font-style: italic; }

@media (max-width: 760px) {
    .lesson-head { padding-top: 22px; }
}

/* ---------- print: the page is the handout ---------- */

@media print {
    body { background: #fff !important; color: #000 !important; }
    header.site, footer.site-foot, .topic-band, .newsletter, .gfig-play,
    .go, #bmc-wbtn, iframe { display: none !important; }
    .lesson { max-width: none; padding: 0; }
    .ex, .faq-item { break-inside: avoid; }
    .ex { border-color: #bbb; }
    .lesson .faq, .next, .pipeline, .try-it { display: none; }   /* handout = the lesson itself */
    .lesson p, .lesson li { color: #000; }
    .ex .guide-fig svg { filter: none !important; }
    a { color: #000; text-decoration: none; }
}