/* Spardha Music: Sangya's course companion.
   Look borrowed from her Morning Notes app (2026-09-29): calm ground colour, white cards each with one accent
   (a coloured edge and heading), serif headings, Nunito Sans text. Layout is still her portal: course list on the
   left, chapter menu in the middle, lesson cards on the right; one column on the phone.
   No italics anywhere. Three type sizes: 13 (labels), 17 (text), 26 (headings). */
:root {
  --ground: #eef0ed; --ink: #1e211f; --muted: #666c68; --card: #ffffff;
  --line: rgba(30, 33, 31, 0.10); --soft: #f5f6f4;
  --accent: #4f7a5c; --accent-ink: #ffffff;
  --hue-green: #107c10; --hue-crimson: #b0284a; --hue-blue: #0f6cbd; --hue-amber: #946200;
  --good: #e6f4e8; --bad: #fbe9ec;
  --shadow: 0 1px 3px rgba(20, 24, 22, 0.06);
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --r: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
h2 { font-size: 26px; margin: 0 0 12px; color: var(--hue, var(--ink)); }
h3 { font-size: 17px; font-weight: 700; margin: 10px 0 6px; color: var(--ink); }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 700; }
.small { font-size: 13px; color: var(--muted); }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---------- Frame ---------- */
.app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
.header { display: flex; align-items: center; gap: 14px; padding: 14px 22px; background: rgba(238, 240, 237, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header h1 { font-size: 26px; font-weight: 600; }
.titleShort { display: none; }
.header .sub { font-size: 17px; color: var(--muted); margin-top: 2px; }
.header .meta { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.navToggle { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.navToggle:hover { border-color: var(--ink); }

.workspace { display: grid; grid-template-columns: 250px 220px minmax(0, 1fr); min-height: 0; }
.workspace.navCollapsed { grid-template-columns: 220px minmax(0, 1fr); }
.workspace.navCollapsed .courseNav { display: none; }
.courseNav { border-right: 1px solid var(--line); padding: 14px 12px; }
.contextNav { border-right: 1px solid var(--line); padding: 14px 12px; }
.canvas { padding: 22px; min-width: 0; max-width: 980px; }
.courseNavTop { display: flex; align-items: center; justify-content: space-between; }
.navClose { display: none; }
.navBackdrop { display: none; }
.navTitle { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 8px 10px; }
.divider { height: 1px; background: var(--line); margin: 10px 6px; }
.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ground); color: var(--muted); font-size: 17px; }

/* ---------- Course list ---------- */
.courseItem, .contextItem { display: block; width: 100%; border: 0; background: transparent; color: var(--ink); text-align: left; border-radius: 10px; padding: 10px 12px; margin: 2px 0; min-height: 44px; }
.courseItem:hover, .contextItem:hover { background: rgba(30, 33, 31, 0.05); }
.courseItem.active, .contextItem.active { background: #fff; box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.courseItem .num { font-size: 13px; font-weight: 700; color: var(--muted); display: block; letter-spacing: .06em; }
.courseItem .name { font-weight: 700; display: block; }
.courseItem .status { font-size: 13px; color: var(--muted); display: block; margin-top: 1px; }
.courseItem.upcoming { opacity: .6; }
.courseItem.locked { opacity: .5; }
.toolIcon { display: inline-block; margin-right: 8px; }
.groupToggle { width: 100%; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; text-align: left; border-radius: 10px; padding: 9px 10px; margin: 2px 0; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); min-height: 44px; }
.groupToggle:hover { background: rgba(30, 33, 31, 0.05); }
.group.collapsed .groupItems { display: none; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 10px 12px; min-height: 44px; text-align: left; }

/* ---------- Chapter menu ---------- */
.contextHeader { padding: 8px 10px 12px; }
.contextHeader .kicker { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.contextHeader .title { font-family: var(--display); font-size: 17px; font-weight: 600; margin-top: 3px; }
.contextHeader .status { font-size: 13px; color: var(--accent); font-weight: 700; margin-top: 4px; }
.sectionBar { display: none; }

/* ---------- Cards: a quiet white card with one accent (edge and heading). Colours take turns down the page. ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px 18px 24px; margin: 0 0 14px; box-shadow: inset 3px 0 0 var(--hue), var(--shadow); --hue: var(--hue-green); overflow: hidden; }
.card > :last-child { margin-bottom: 0; }
.here { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 14px; }
.grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.tile h3:first-child { margin-top: 0; }
.tile > :last-child { margin-bottom: 0; }
.tile .big { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--hue); }
.memory { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.memory h3:first-child { margin-top: 0; color: var(--hue); }
.memory > :last-child { margin-bottom: 0; }
.pills { margin: 0 0 12px; }
.pill { display: inline-block; padding: 4px 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 13px; margin: 2px 6px 2px 0; }
.pattern { font-family: var(--display); font-size: 17px; letter-spacing: .12em; background: var(--soft); padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; margin: 6px 0 10px; }
.practice { }
.note { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.tip { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.road { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #fff; }
.road strong { display: block; color: var(--hue); }
.wayGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.wayNode { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.wayNode strong { display: block; font-family: var(--display); color: var(--hue); font-size: 17px; margin-bottom: 4px; }
.wayNode .where { font-size: 13px; color: var(--muted); margin-top: 8px; font-weight: 700; }
.glideRow { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.glideRow .swarBox { min-width: 54px; text-align: center; font-family: var(--display); font-size: 26px; font-weight: 600; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; background: var(--soft); }
.glideRow .glide { font-size: 34px; color: var(--hue); font-weight: 600; letter-spacing: -5px; }
.imageTile { margin: 0 0 14px; }
.imageTile img { width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.imageTile h3:first-child { margin-top: 0; }
.libraryLink { display: inline-block; margin-top: 6px; border-radius: 999px; background: var(--ink); color: var(--ground); text-decoration: none; font-weight: 600; padding: 10px 18px; min-height: 44px; }
.libraryLink:hover { filter: brightness(1.15); }
.albumHero { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 20px; align-items: start; }
.albumCover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.verse { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; line-height: 1.65; font-family: var(--display); }
.verse p { margin: 0 0 12px; }
.verse p:last-child { margin-bottom: 0; }
.verseLabel { font-family: var(--body); font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.tableHint { display: none; }
.tableWrap { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
td.num, th.num { text-align: center; }
.placeholder { color: var(--muted); }

/* ---------- Swara notation: octave dots and Teevra Ma ---------- */
.swarLine { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; font-family: var(--display); font-size: 26px; font-weight: 600; line-height: 2; margin: 8px 0 0; }
.swarPhrase { display: inline-flex; gap: 6px; align-items: flex-end; white-space: nowrap; padding: 2px 10px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); }
.swar { position: relative; display: inline-block; min-width: 1em; text-align: center; padding: .12em .06em; }
.swar.lower::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: currentColor; left: 50%; transform: translateX(-50%); bottom: -.05em; }
.swar.upper::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: currentColor; left: 50%; transform: translateX(-50%); top: -.05em; }
.swar.tivra::before { content: ""; position: absolute; width: 2px; height: .4em; background: currentColor; left: 50%; transform: translateX(-50%); top: -.25em; border-radius: 2px; }
.raagaMap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.raagaMap .tile { min-width: 0; overflow-x: auto; }
.raagaMap .swarLine { font-size: 22px; }
.raagaMap .swarPhrase { gap: 4px; padding: 2px 8px; }
.vistaarCard { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin: 12px 0; }
.vistaarNum { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--hue); font-family: var(--display); font-weight: 600; margin-right: 8px; vertical-align: middle; }

/* ---------- Meend map ---------- */
.octaveKey { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.octaveKey span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; }
.meendMap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 12px; align-items: start; margin: 0 0 14px; }
.meendExercise { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.meendExercise h3:first-child { margin-top: 0; }
.meendLine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; min-width: 0; }
.meendPhrase { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; max-width: 100%; }
.meendNote { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--ink); }
.meendNote.low { padding-bottom: 8px; }
.meendNote.low::after { content: "•"; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 17px; color: var(--hue); line-height: 1; }
.meendFlow { font-size: 24px; color: var(--hue); font-weight: 600; letter-spacing: -2px; }
.phraseBreak { font-weight: 700; color: var(--muted); padding: 0 3px; }

/* ---------- Practice: checklists, flashcards, quiz, recall ---------- */
.checklist label { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.checklist input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.checklist label.done { background: var(--good); border-color: rgba(16, 124, 16, 0.25); }
.progress { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.progress > div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.flash { min-height: 200px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); font-size: 26px; font-weight: 600; padding: 22px; cursor: pointer; user-select: none; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.action { border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 600; padding: 10px 18px; min-height: 44px; }
.action:hover { filter: brightness(1.15); }
.action.alt { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.action:disabled { opacity: .55; cursor: default; }
.option { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; margin: 8px 0; border-radius: 10px; padding: 12px 14px; min-height: 44px; }
.option:hover { border-color: var(--ink); }
.option.correct { background: var(--good); border-color: var(--hue-green); }
.option.wrong { background: var(--bad); border-color: var(--hue-crimson); }
.success { color: var(--hue-green); font-weight: 700; }
.danger { color: var(--hue-crimson); font-weight: 700; }
textarea { width: min(100%, 560px); font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* ---------- Recordings: a Repeat switch under every player ---------- */
.player { margin-top: 10px; }
.player audio { width: 100%; display: block; }
.repeat { margin-top: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 14px; min-height: 40px; font-weight: 600; font-size: 13px; }
.repeat:hover { border-color: var(--ink); }
.repeat.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.audioTile .mediaNote { display: none; margin-top: 8px; }
.mediaMissing .mediaNote { display: block; }
.mediaMissing audio, .mediaMissing img { display: none; }
.hwAudio { margin: -2px 0 10px 48px; }
.hwAudio .player { margin-top: 0; }

/* ---------- Today page ---------- */
.action.wide { display: block; width: 100%; text-align: left; font-size: 17px; padding: 14px 18px; margin: 0 0 12px; border-radius: 12px; background: var(--accent); border-color: var(--accent); color: #fff; }
.action.wide span { display: block; font-size: 13px; font-weight: 600; opacity: .8; letter-spacing: .06em; text-transform: uppercase; }
.streak { display: inline-block; background: var(--soft); border: 1px solid var(--line); color: var(--hue); padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.moreLink { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 8px 0; min-height: 44px; }

/* ---------- Home hero: the day's picture with the greeting on it, like Morning Notes ---------- */
.hero { position: relative; min-height: 360px; border-radius: var(--r); overflow: hidden; background: #3a4740 center / cover no-repeat; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 22px 34px; margin: 0 0 14px; box-shadow: 0 18px 50px rgba(20, 24, 22, 0.18); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.58) 100%); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero .heroDate { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .92; margin-bottom: 8px; }
.hero h2 { color: #fff; font-family: var(--display); font-size: 44px; font-weight: 500; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hero .heroCredit { position: absolute; right: 14px; bottom: 10px; font-size: 11px; opacity: .85; max-width: 70%; text-align: right; }
.zenBtn { position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(0,0,0,0.35); color: #fff; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 10px 16px; min-height: 44px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.zenBtn:hover { background: rgba(0,0,0,0.5); }
/* Just the picture: the hero fills the screen and everything else waits behind it */
body.zen { overflow: hidden; }
body.zen .hero { position: fixed; inset: 0; z-index: 60; border-radius: 0; margin: 0; min-height: 100svh; max-height: none; padding: 24px 24px 48px; }
body.zen .hero .heroCredit { display: block; }
body.zen .zenBtn { top: calc(16px + env(safe-area-inset-top)); }

/* ---------- Footer: the version, so Sangya and Claude can tell which build a phone has ---------- */
.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 18px 16px 28px; }

/* ---------- The gate: password or guest code ---------- */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: #3a4740 center / cover no-repeat; position: relative; }
.gate::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55)); }
.gatePanel { position: relative; width: 100%; max-width: 440px; background: rgba(250, 250, 247, 0.97); border-radius: 22px; padding: 26px 24px; box-shadow: 0 18px 50px rgba(20, 24, 22, 0.25); }
.gateBrand { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.gatePanel h2 { font-size: 26px; margin-bottom: 4px; color: var(--ink); }
.gateForm { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.gateInput { font: inherit; font-size: 17px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; flex: 1; min-width: 160px; min-height: 48px; background: #fff; }
.gateInput:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* ---------- Breathing circle (not on Home right now, kept for later) ---------- */
.breath { display: flex; align-items: center; gap: 22px; padding: 10px 6px; }
.breathRing { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f5f6f4 0%, #b9d3c1 45%, #4f7a5c 100%); animation: breathe 8s ease-in-out infinite; }
.breathText b { display: block; font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--hue); margin-bottom: 6px; }
.breathText span { color: var(--muted); }
@keyframes breathe { 0%, 100% { transform: scale(0.72); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .breathRing { animation: none; } }

/* ---------- PC: the two menus stay put while the page scrolls ---------- */
@media (min-width: 981px) {
  .header { position: sticky; top: 0; z-index: 20; }
  .courseNav, .contextNav { position: sticky; top: var(--headerH, 96px); max-height: calc(100vh - var(--headerH, 96px)); overflow-y: auto; align-self: start; }
}

/* ---------- Phone and small tablet: one column ---------- */
@media (max-width: 980px) {
  .header { padding: 10px 14px; }
  .header h1 { font-size: 20px; }
  .header .sub { display: none; }
  .header .meta { font-size: 11px; margin-top: 0; }
  .titleLong { display: none; }
  .titleShort { display: inline; }
  .workspace { display: block; position: relative; }
  .workspace.navCollapsed .courseNav { display: block; }

  /* The course list slides in as a drawer. */
  .courseNav { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: min(320px, 88vw); z-index: 40; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--ground); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); border-right: 0; padding-bottom: 40px; }
  .workspace.navOpen .courseNav { transform: none; }
  .navBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 30; touch-action: none; }
  .workspace.navOpen .navBackdrop { display: block; }
  .navClose { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: 18px; }

  /* The chapter menu becomes a bar with a drop-down list. */
  .sectionBar { display: flex; width: calc(100% - 28px); margin: 12px 14px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; text-align: left; box-shadow: var(--shadow); }
  .sectionBarText { display: flex; flex-direction: column; min-width: 0; }
  .sectionBarPage { font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
  .sectionBarLabel { font-family: var(--display); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sectionBarChevron { color: var(--accent); font-size: 20px; flex: 0 0 auto; }
  .contextNav { display: none; margin: 8px 14px 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .workspace.sectionsOpen .contextNav { display: block; }
  .contextHeader { display: none; }
  .contextItem { padding: 12px; }
  .canvas { padding: 14px; max-width: none; }
  .card { padding: 16px 16px 14px 18px; }
  .grid.cols3, .raagaMap { grid-template-columns: 1fr; }
  .columns { grid-template-columns: 1fr; }
  .albumHero { grid-template-columns: 1fr; }
  .albumCover { max-width: 360px; }
  .swarLine { font-size: 22px; gap: 8px 10px; }
  .swarPhrase { gap: 5px; padding: 2px 8px; }
  .meendExercise { padding: 12px 14px; }
  .meendLine { gap: 6px; }
  .meendPhrase { padding: 8px 9px; }
  .meendNote { font-size: 22px; min-width: 34px; }
  .meendFlow { font-size: 22px; }
  .tableHint { display: block; }
  .hwAudio { margin-left: 0; }
  .canvas .hero { min-height: 46vh; max-height: 520px; padding: 16px 16px 20px; }
  .hero h2 { font-size: 34px; }
  .hero .heroCredit { display: none; }
  .foot { padding-bottom: 40px; }
}
@media (max-width: 400px) {
  .header h1 { font-size: 18px; }
  .glideRow .swarBox { font-size: 22px; }
}
@media print {
  .header, .courseNav, .contextNav, .sectionBar, .controls, .action, .zenBtn, .mapFab, .backToMap { display: none !important; }
  .workspace { display: block; }
}

/* ---------- Cards sit on the ground (2026-09-29): no white box around a whole page.
   A page section is just a heading on the grey ground; every tile, recording, memory box and exercise
   is its own white card with the green edge, like the notes in Morning Notes. ---------- */
.card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 26px; overflow: visible; }
.card > h2 { margin-bottom: 10px; }
.card > .small { margin-bottom: 12px; }
.tile, .vistaarCard, .wayNode, .road, .meendExercise, .imageTile, .breath, .tableWrap, .verse, .memory, .albumHero, .flash, .todayBox {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 3px 0 0 var(--hue), var(--shadow);
  padding: 16px 18px 14px 20px; margin: 0 0 12px;
}
.memory, .verse { background: var(--soft); }
.tile.memory { background: var(--soft); }
.grid .tile, .grid .imageTile, .wayGrid .wayNode, .roadmap .road, .meendMap .meendExercise, .columns .verse { margin: 0; }
.grid, .wayGrid, .roadmap, .meendMap, .columns { margin-bottom: 12px; }
.tip, .note { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin: 0 0 12px; }
.tableWrap table { min-width: 520px; }
.breath { padding: 18px 22px; }
.audioTile .player { margin-top: 8px; }
.hero { margin-bottom: 26px; }
.hwAudio { margin: -4px 0 12px 0; padding: 10px 14px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.checklist label { margin: 0 0 8px; }
@media (max-width: 980px) {
  .card { padding: 0; margin-bottom: 22px; }
  .tile, .vistaarCard, .wayNode, .road, .meendExercise, .imageTile, .breath, .tableWrap, .verse, .memory, .albumHero, .flash { padding: 14px 14px 12px 16px; }
  .hero { margin-bottom: 22px; }
}

/* ---------- Header: a deep green bar with white text, so the top of the app has a clear edge ---------- */
.header { background: var(--accent); color: #fff; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
.header h1 { color: #fff; }
.header .sub { color: rgba(255,255,255,0.88); }
.header .meta { color: rgba(255,255,255,0.75); }
.navToggle { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.45); color: #fff; }
.navToggle:hover { background: rgba(255,255,255,0.26); border-color: #fff; }

/* ---------- Continue: a plain button, not a block ---------- */
.action.wide { display: inline-block; width: auto; max-width: 100%; white-space: normal; text-align: left; border-radius: 14px; padding: 12px 18px; margin: 0 0 12px; line-height: 1.35; }
.action.wide span { display: block; font-size: 13px; font-weight: 600; opacity: .8; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }

/* ---------- This week: each chapter is a card you can tap ---------- */
.chapterTile { text-align: left; cursor: pointer; font: inherit; color: var(--ink); display: block; width: 100%; }
.chapterTile:hover { border-color: var(--ink); }
.chapterTile .num { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.chapterTile b { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; margin: 2px 0 4px; }
.chapterTile .small { display: block; }

/* ---------- Cards without the coloured edge (her call, 2026-09-29): the green lives in the header bar and the headings ---------- */
.tile, .vistaarCard, .wayNode, .road, .meendExercise, .imageTile, .breath, .tableWrap, .verse, .memory, .albumHero, .flash, .todayBox, .courseItem.active, .contextItem.active { box-shadow: var(--shadow); }

/* ---------- Card headings are green, like the page headings ---------- */
h3, .tile h3, .memory h3:first-child, .wayNode strong, .road strong, .chapterTile b { color: var(--hue); }
.hero h2, .gatePanel h2, .hero h3 { color: #fff; }

/* ---------- Just the picture: the breathing circle floats over the photo ---------- */
.zenBreath { display: none; }
body.zen .zenBreath { display: flex; flex-direction: column; align-items: center; gap: 18px; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-60%); z-index: 1; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
body.zen .zenBreath .breathRing { width: 160px; height: 160px; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.15) 100%); box-shadow: 0 0 60px rgba(255,255,255,0.35); }
body.zen .zenBreath span { font-size: 17px; opacity: .95; }
@media (prefers-reduced-motion: reduce) { body.zen .zenBreath .breathRing { animation: none; } }
/* The card that says what the picture is (as in Morning Notes); in Just the picture it takes the greeting's place */
.aboutPic { display: none; }
body.zen .hero .heroDate, body.zen .hero h2, body.zen .hero .heroLine, body.zen .hero .heroCredit { display: none; }
body.zen .aboutPic { display: block; position: absolute; z-index: 2; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 440px; max-height: calc(100svh - 110px); overflow: auto; margin-right: 16px; padding: 16px 20px; border-radius: 18px; background: rgba(255, 253, 247, .94); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.25); text-shadow: none; }
.aboutPic summary { list-style: none; cursor: pointer; position: relative; padding-right: 40px; min-height: 44px; }
.aboutPic summary::-webkit-details-marker { display: none; }
.aboutPic summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: rgba(79, 122, 92, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7a5c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform .2s; }
.aboutPic details:not([open]) summary::after { transform: rotate(180deg); }
.aboutPic .k { display: block; font-size: 15px; font-weight: 700; color: var(--accent); }
.aboutPic b { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.aboutPic .place { margin: 4px 0 8px; font-size: 15px; color: var(--muted); }
.aboutPic .text { margin: 0; font-size: 17px; line-height: 1.6; }
.aboutPic .place:empty, .aboutPic .text:empty { display: none; }
.aboutPic .by { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.aboutPic .picTip { display: none; margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--accent); }
.aboutPic .picTip .all, body.whole .aboutPic .picTip .fill { display: none; }
body.whole .aboutPic .picTip .all { display: inline; }
body.zen .hero { touch-action: pan-y pinch-zoom; }      /* a double-tap is ours, not the browser zoom */
/* A phone held upright: the picture fills the screen; a double-tap (.whole) shows all of it on a blurred copy of itself */
@media (max-aspect-ratio: 1/1) {
  body.zen .aboutPic .picTip { display: block; }
  body.zen.whole .hero::before { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; filter: blur(28px) brightness(.6) saturate(1.2); transform: scale(1.25); }
  body.zen.whole .hero::after { background: inherit; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; }
}

/* ---------- Home: homework as a plain list, no tick boxes ---------- */
.hwItem { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin: 0 0 8px; box-shadow: var(--shadow); }

/* ==========================================================================================
   TYPE SYSTEM (2026-09-29). Four sizes, two weights, one rule for colour. Nothing else.
     Label    13px  Nunito  600  uppercase, muted     kickers, "CHAPTER 07", dates on Home, pills
     Note     15px  Nunito  400  muted                secondary lines: intros, "Open the chapter", credits
     Body     17px  Nunito  400  ink                  everything you read; emphasis is 600, never 700
     Title    20px  Serif   600  green                every card heading
     Section  26px  Serif   600  green                every page heading (h2)
   One card padding (18px 20px), one gap between cards (12px), one gap between sections (28px).
   ========================================================================================== */
body { font-size: 17px; font-weight: 400; }
b, strong { font-weight: 600; }
h2 { font-size: 26px; font-weight: 600; color: var(--hue); margin: 0 0 8px; }
h3, .tile h3, .memory h3, .breathText b, .chapterTile b, .wayNode strong, .road strong, .albumHero h2, .flash { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--hue); margin: 0 0 8px; line-height: 1.25; }
.albumHero h2 { font-size: 20px; }
.here, .chapterTile .num, .navTitle, .contextHeader .kicker, .heroDate, .verseLabel, .sectionBarPage, .groupToggle, th, .courseItem .num { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.here { margin-bottom: 6px; }
.small, .chapterTile .small, .breathText span, .hero .heroCredit, .courseItem .status, .contextHeader .status, .foot, .tableHint { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
.contextHeader .status { color: var(--accent); }
.hero .heroCredit { font-size: 11px; color: #fff; }
.pill { font-size: 13px; font-weight: 600; color: var(--muted); padding: 3px 10px; }
.card > .small { margin: -2px 0 12px; }
.courseItem .name { font-weight: 600; }
.contextItem, .courseItem, .option, .checklist label, .repeat, .action, .libraryLink, .zenBtn, .moreLink, .link { font-weight: 600; }
.contextItem { font-weight: 400; }
.contextHeader .title { font-family: var(--display); font-size: 17px; font-weight: 600; }
.sectionBarLabel { font-family: var(--display); font-size: 17px; font-weight: 600; }
.pattern { font-family: var(--display); font-size: 17px; letter-spacing: .1em; }
.moreLink { font-size: 15px; }

/* One padding for every card and box, so left edges line up */
.tile, .vistaarCard, .wayNode, .road, .meendExercise, .imageTile, .breath, .tableWrap, .verse, .memory, .albumHero, .flash, .tip, .note, .hwItem, .checklist label, .option, .hwAudio { padding: 18px 20px; }
.checklist label { padding: 14px 20px; }
.hwItem { padding: 14px 20px; }
.hwAudio { padding: 14px 20px; }
.option { padding: 12px 20px; }
.card { margin: 0 0 28px; }
.tile, .vistaarCard, .wayNode, .road, .meendExercise, .imageTile, .breath, .tableWrap, .verse, .memory, .albumHero, .flash, .tip, .note, .hwItem { margin: 0 0 12px; }
.grid .tile, .grid .imageTile, .wayGrid .wayNode, .roadmap .road, .meendMap .meendExercise, .columns .verse { margin: 0; }
.checklist label { margin: 0 0 8px; }
.breath { gap: 22px; }
.breathRing { width: 96px; height: 96px; }
@media (max-width: 980px) {
  .tile, .vistaarCard, .wayNode, .road, .meendExercise, .imageTile, .breath, .tableWrap, .verse, .memory, .albumHero, .flash, .tip, .note { padding: 16px; }
  .hwItem, .hwAudio, .checklist label { padding: 12px 16px; }
  .card { margin-bottom: 24px; }
}
/* Corrections after the first look at the type pass */
.checklist label, .hwItem { font-weight: 400; }                 /* so the emphasised words stand out */
.heroDate { color: #fff; opacity: .92; }
.metaLong { display: inline; }
@media (max-width: 980px) { .metaLong { display: none; } }        /* phone header: just "Version 0334" */

/* ---------- One left edge for all text; cards that actually show (2026-09-29) ---------- */
:root { --ground: #e7eae5; --line: rgba(30, 33, 31, 0.14); --shadow: 0 1px 2px rgba(20, 24, 22, 0.06), 0 6px 18px rgba(20, 24, 22, 0.06); }
.card > h2, .card > h3, .card > .here, .card > .small, .card > p, .card > .pills, .card > .moreLink, .card > .glideRow, .card > .octaveKey, .card > .controls { padding-left: 20px; padding-right: 20px; }
.card > .moreLink { display: block; }
.pills { margin: -2px 0 10px; }
.pill { background: none; border: 0; padding: 0; margin: 0 14px 0 0; }
.tile > .pills, .memory > .pills { margin: -4px 0 10px; }
.contextNav, .courseNav { background: transparent; }
@media (max-width: 980px) {
  .card > h2, .card > h3, .card > .here, .card > .small, .card > p, .card > .pills, .card > .moreLink, .card > .glideRow, .card > .octaveKey, .card > .controls { padding-left: 16px; padding-right: 16px; }
}
.pill { text-transform: uppercase; letter-spacing: .1em; }
.chapterTile.locked { opacity: .6; cursor: default; }
.chapterTile.locked:hover { border-color: var(--line); }

/* ---------- Phone: the drawer must be solid, and the header stays put like on the PC ---------- */
@media (max-width: 980px) {
  .workspace .courseNav { background: var(--ground); }
  .header { position: sticky; top: 0; z-index: 20; }
}

/* ---------- Weather line under the greeting ---------- */
.hero .heroLine { font-size: 15px; color: #fff; opacity: .95; margin-top: 8px; max-width: 640px; }
.hero .heroLine:empty { display: none; }
body.zen .hero .heroLine { font-size: 17px; }

/* Phone header: show the subtitle line too (her ask, 2026-09-29) */
@media (max-width: 980px) { .header .sub { display: block; font-size: 13px; color: rgba(255,255,255,0.88); margin-top: 1px; } .header .meta { font-size: 11px; } }
.subShort { display: none; }
@media (max-width: 980px) { .subShort { display: inline; } }

/* ---------- Previous / Next at the bottom of a section page ---------- */
.pageNav { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 28px; }
.pageNavBtn { flex: 1; max-width: 48%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; box-shadow: var(--shadow); font-weight: 600; color: var(--ink); line-height: 1.3; }
.pageNavBtn.next { text-align: right; margin-left: auto; }
.pageNavBtn span { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.pageNavBtn:hover { border-color: var(--ink); }

/* ---------- Phone: the chapter menu is a row of chips under the header, always in view ---------- */
@media (max-width: 980px) {
  .sectionBar { display: none !important; }
  .contextNav { display: flex !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; margin: 0; padding: 10px 14px; border: 0; border-radius: 0; background: var(--ground); position: sticky; top: var(--headerH, 60px); z-index: 15; }
  .contextNav::-webkit-scrollbar { display: none; }
  .contextNav .divider { display: none; }
  .contextNav:empty, .contextNav.noMenu { display: none !important; }
  .contextItem { flex: 0 0 auto; width: auto; margin: 0; padding: 9px 14px; min-height: 40px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
  .contextItem.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
  .header { position: sticky; top: 0; z-index: 20; }
}

/* ---------- The way back to the Wayfinding Map (her ask, October 18, 2026) ----------
   The app name in the header, a floating Map button on every page but the map, and a big button at the end of each page.
   The Map button sits above the page (z 25) but under the phone drawer (40), its backdrop (30) and "Just the picture". */
.homeLink { color: inherit; text-decoration: none; position: relative; display: inline-block; }
.homeLink::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.homeLink:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.mapFab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--body); font-size: 17px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(20, 24, 22, 0.18), 0 12px 28px rgba(20, 24, 22, 0.16); }
.mapFab:hover { background: #3f6a4c; }
.mapFab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
body.zen .mapFab { display: none; }
body.hasMapFab .canvas { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.backToMap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 8px 0 28px; padding: 12px 24px; border: 2px solid var(--accent); border-radius: 999px; background: #fff; color: var(--accent); font-family: var(--body); font-size: 17px; font-weight: 600; box-shadow: var(--shadow); }
.backToMap:hover { background: var(--good); }
@media (max-width: 980px) { .backToMap { display: flex; width: 100%; } }

/* ---------- The sneak peek (her pick, October 18, 2026) ----------
   Without a key, the real Wayfinding Map shows faded and not clickable, under an invitation card with the key box. */
.gateBadge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--good); color: var(--accent); margin-bottom: 12px; }
.gatePanel .noKey a, .gatePanel .peekSelf a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gatePanel .noKey, .gatePanel .peekSelf { margin-top: 10px; }
body:not(.peek) .peekOnly { display: none; }
body.peek .gateOnly { display: none; }
#peekSlot .gatePanel { max-width: 640px; margin: 0 0 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(20, 24, 22, 0.16); }
.gate .gatePanel h2, #peekSlot .gatePanel h2 { color: var(--accent); }
body.peek .chapterTile, body.peek .courseItem { pointer-events: none; }
body.peek .chapterTile { opacity: .55; filter: saturate(.75); }
body.peek .courseItem { opacity: .6; }
body.peek .mapFab, body.peek .backToMap { display: none; }
body.peek .homeLink { pointer-events: none; }

/* ---------- Player buttons: a big Play / Pause / Resume next to Repeat (2026-10-25) ---------- */
.playerBtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.playerBtns .repeat { margin-top: 0; }
.repeat.big { min-width: 120px; min-height: 44px; font-size: 15px; }
.repeat.big.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Visitor mode shows Home in full (2026-10-25): no links out of it, the map faded below the card ---------- */
body.peek .moreLink, body.peek .pageNav { display: none; }
#peekSlot { margin: 4px 0 28px; }
#peekMap .chapterTile { opacity: .55; filter: saturate(.75); pointer-events: none; }
body.peek .player { opacity: .5; pointer-events: none; }
body.peek .player audio { filter: saturate(.6); }
#peekSlot { margin: 0 0 14px; }
/* Visitors may open Home and the Wayfinding Map from the menu (2026-10-25) */
body.peek .courseItem[data-page="home"], body.peek .courseItem[data-page="wayfinding"] { pointer-events: auto; opacity: 1; }

/* ---------- Taans on the 16-beat Tilwada cycle (November 1, 2026): one box a beat, 4 a row on the PC, 2 on the phone ---------- */
.taanGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.taanBeat { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 8px; min-height: 64px; min-width: 0; }
.taanBeat.empty { background: transparent; }
.taanNum { display: block; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.taanMark { color: var(--accent); }
.taanBeat .swarLine { font-size: 20px; gap: 6px 6px; margin-top: 6px; line-height: 1.7; }
.taanBeat .swarPhrase { gap: 3px; padding: 1px 6px; background: #fff; }
.taanWords { display: block; margin-top: 6px; }
@media (max-width: 980px) { .taanGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- Taans on the 16-beat Tilwada cycle (November 1, 2026): one box a beat, 2 a row on the PC, 1 on the phone.
   Each beat is one line of 4 pairs, like Aditi's handwriting: GaGa ReGa GaRe SaSa. ---------- */
.taanGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.taanBeat { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 8px; min-height: 64px; min-width: 0; }
.taanBeat.empty { background: transparent; }
.taanNum { display: block; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.taanMark { color: var(--accent); }
.taanLine { display: flex; gap: 4px; margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.7; }
.taanPair { display: inline-flex; justify-content: center; flex: 1 1 0; min-width: 0; padding: 2px 4px; border-radius: 8px; background: #fff; border: 1px solid var(--line); white-space: nowrap; }
.taanPair .swar { min-width: 0; padding: .1em .04em; }
.taanWords { display: block; margin-top: 6px; }
@media (max-width: 980px) { .taanGrid { grid-template-columns: 1fr; } }

/* ---------- Long cards fold (November 1, 2026): the whole card hides behind one "Show: <name>" pill, like Morning Notes ---------- */
.fold { margin: 0 0 12px; }
.foldBtn { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border: 1px solid var(--accent); border-radius: 999px; background: #fff; color: var(--accent); font: inherit; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.foldBtn:hover { background: var(--soft); }
.foldChevron { flex: 0 0 auto; }
.fold.open .foldBtn { margin-bottom: 12px; }
.fold.open .foldChevron { display: inline-block; transform: rotate(180deg); }

/* ---------- Download PDF (her ask, 2026-11-01): a button at the top of each lesson page, then a small card ---------- */
.pdfBar { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.pdfBtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 20px; border-radius: 999px; background: #fff; border: 2px solid var(--accent); color: var(--accent); font: inherit; font-size: 17px; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }
.pdfBtn:hover { background: var(--good); }
.pdfShade { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 24, 22, .45); }
.pdfCard { display: flex; flex-direction: column; width: min(100%, 460px); max-height: calc(100vh - 32px); background: var(--card); border-radius: 20px; padding: 24px; box-shadow: 0 20px 60px rgba(20, 30, 24, .3); }
.pdfHead { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pdfHead h3 { margin: 0 0 2px; color: var(--accent); }
.pdfBadge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--good); color: var(--accent); }
.pdfBadge svg { width: 24px; height: 24px; }
.pdfAskRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pdfAsk { font-weight: 600; margin: 0 0 8px; }
.pdfAskRow .pdfAsk { margin: 0; }
.pdfAll { min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.pdfList { overflow-y: auto; min-height: 60px; margin: 0 -4px; padding: 0 4px; }
.pdfPick { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); cursor: pointer; }
.pdfPick input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.pdfNote { margin: 10px 0 0; }
.pdfStatus { min-height: 24px; margin: 6px 0 10px; }
.pdfActions { display: flex; gap: 10px; flex-wrap: wrap; }
.pdfGo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.pdfCancel { min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.pdfGo:disabled, .pdfCancel:disabled, .pdfAll:disabled { opacity: .55; cursor: default; }
.pdfGo:focus-visible, .pdfCancel:focus-visible, .pdfBtn:focus-visible, .pdfAll:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 980px) { .pdfBtn { width: 100%; justify-content: center; } }
body.peek .pdfBar { display: none; }
@media print { .pdfBar { display: none !important; } }
/* "Download all as PDF", the last course tool (November 1, 2026) */
.pdfAllItem { color: var(--accent); }
.pdfAllItem .toolIcon svg { width: 18px; height: 18px; vertical-align: -3px; }
body.peek .pdfAllItem { display: none; }