/* AI Learning: a learning companion by Curious Stoic.
   Follows the shared reading and design rules (C:\Users\sangyas\.claude\CLAUDE.md, applied 2026-09-30): made for a
   dyslexic reader and meant to be pretty. One sans-serif font (Nunito Sans), no italics, no all-capital labels,
   18px text with 1.7 line spacing, lines about 65 characters wide, a cream ground with dark grey text, one accent
   (this app's deep blue) with soft tints, Lucide icons on every area, topic and section.
   Navigation copied from her Gyaan app: a menu of every topic on the left with search, a drawer on the phone.
   Type: 14 label, 16 note, 18 body, 22 card title, 28 page title. Weights 400 and 700 only. */
:root {
  --ground: #f5f1e8; --ink: #262a2e; --muted: #5b6268; --card: #ffffff;
  --line: rgba(38, 42, 46, 0.12); --soft: #f8f5ee;
  --accent: #35587a; --accent-2: #4f7ba3; --accent-soft: #e3ebf3; --accent-tint: #eef3f8;
  --warm: #b5653a;
  --shadow: 0 1px 2px rgba(20, 28, 36, 0.05), 0 8px 24px rgba(20, 28, 36, 0.07);
  --font: "Nunito Sans", "Segoe UI", Arial, sans-serif;
  --r: 16px;
  --read: 700px; /* about 65 characters of 18px text */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.7; letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-weight: 700; line-height: 1.25; margin: 0; text-wrap: balance; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 700; }
em, i { font-style: normal; }
.hidden { display: none !important; }
.label { display: block; font-size: 14px; color: var(--muted); font-weight: 700; }
.note { font-size: 16px; color: var(--muted); }
.danger { color: var(--warm); font-weight: 700; font-size: 16px; }
.visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
svg.lucide { width: 1em; height: 1em; flex: 0 0 auto; }

/* Round icon badge: tiles, page banners, the password screen */
.badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 24px; flex: 0 0 auto; }
.badge.big { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; }
.badge.small { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
.badge.num { font-size: 22px; font-weight: 700; }
.secLabel { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--accent); }
.secLabel svg { font-size: 20px; }

/* ---------- Frame ---------- */
.app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 24px; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; }
.headerText { display: block; min-height: 44px; text-decoration: none; min-width: 0; }
.header h1 { font-size: 28px; }
.header .sub { font-size: 16px; opacity: .92; line-height: 1.4; margin-top: 2px; }
.header .meta { font-size: 14px; opacity: .82; line-height: 1.5; }
.header .meta span { white-space: nowrap; }
.navToggle { display: none; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; border-radius: 999px; font-size: 22px; align-items: center; justify-content: center; }

.workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); }
.nav { position: sticky; top: var(--headerH, 110px); align-self: start; max-height: calc(100vh - var(--headerH, 110px)); overflow-y: auto; padding: 18px 14px 40px; border-right: 1px solid var(--line); }
.canvas { padding: 30px 36px 64px; min-width: 0; max-width: 1100px; }
.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ground); color: var(--muted); }
.foot { text-align: center; color: var(--muted); font-size: 14px; padding: 14px 16px 24px; border-top: 1px solid var(--line); }
.linkBtn { background: none; border: 0; padding: 10px 4px; min-height: 44px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }

/* ---------- Topic menu ---------- */
.navTop { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.searchBox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); }
.searchBox:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.search { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 18px; color: var(--ink); outline: none; }
.navClose, .navBackdrop { display: none; }
/* Group headings in the left menu: the one place with capitals, the same in every app (shared rules, her pick). */
.navGroup { margin: 16px 0 4px; padding: 0 12px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.navItem { display: flex; gap: 12px; align-items: center; width: 100%; text-decoration: none; border-radius: 12px; padding: 8px 12px; min-height: 46px; line-height: 1.35; font-size: 16px; }
.navItem svg { font-size: 18px; color: var(--muted); }
.navItem:hover { background: rgba(38, 42, 46, 0.05); }
.navItem.active { background: #fff; box-shadow: inset 3px 0 0 var(--accent), var(--shadow); font-weight: 700; }
.navItem.active svg { color: var(--accent); }
.navHome { font-weight: 700; color: var(--accent); }
.navHome svg { color: var(--accent); }
.navEmpty { padding: 12px; }

/* ---------- Page banner ---------- */
.hero { display: flex; gap: 20px; align-items: flex-start; padding: 26px 28px; margin: 0 0 24px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft), var(--accent-tint)); border: 1px solid var(--line); max-width: var(--read); }
.hero .badge { background: var(--accent); color: #fff; }
.heroText { min-width: 0; }
.heroKicker { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.heroKicker svg { font-size: 16px; }
.hero h2 { font-size: 28px; color: var(--accent); margin: 0 0 10px; }
.hero p { margin: 0 0 6px; }
.quotes { display: grid; gap: 14px; max-width: var(--read); }
.quote { margin: 0; border-left: 4px solid var(--accent); }
.quote blockquote { margin: 0; font-size: 18px; font-weight: 700; color: var(--accent); }
.quote blockquote p { margin: 0; }
.quote blockquote p:first-child::before { content: "\201C"; }
.quote blockquote p:last-child::after { content: "\201D"; }
.quote figcaption { margin-top: 10px; font-size: 16px; color: var(--muted); }
.sitePills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sitePill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow); }
.sitePill:hover, .sitePill:focus-visible { filter: brightness(1.12); }

/* ---------- Cards ---------- */
.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow); margin: 0 0 16px; max-width: var(--read); text-decoration: none; }
.card.tinted { background: var(--accent-tint); box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }
.intro { margin-bottom: 40px; }
.startRow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; border: 1px solid var(--accent); }
.btn:hover { filter: brightness(1.1); }
.btn.quiet { background: #fff; color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 16px; background: var(--accent-tint); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; }
.part { margin: 36px 0 16px; max-width: var(--read); }
.part > .secLabel { font-size: 22px; margin-bottom: 16px; }
.part > .secLabel svg { font-size: 24px; }
.byline { margin: 8px 0 0; max-width: var(--read); }

/* ---------- Shelves of tiles (home, the learning path, Connects to) ---------- */
.shelf { margin: 0 0 48px; }
.shelfHead { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.shelfHead h2 { font-size: 28px; color: var(--accent); }
.question { font-size: 18px; font-weight: 700; margin: 0 0 16px; max-width: var(--read); }
.shelf > .note { margin: -6px 0 16px; max-width: var(--read); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.part .tiles { grid-template-columns: minmax(0, 1fr); }
.tile { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); }
.tile:hover { border-color: var(--accent); }
.tileText { min-width: 0; display: block; }
.tile h3 { font-size: 22px; color: var(--accent); margin: 2px 0 6px; }
.tile .note { display: block; }

/* ---------- How it works: numbered steps as a path, each step in its own card ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li { position: relative; counter-increment: step; padding: 0 0 16px 62px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 12px; width: 44px; height: 44px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1; }
.steps > li::after { content: ""; position: absolute; left: 21px; top: 56px; bottom: 0; width: 2px; background: var(--accent-soft); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.stepCard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--shadow); }
.stepCard h3 { font-size: 22px; color: var(--accent); margin: 0 0 6px; }
.stepCard p { margin: 0; }
.stepCard p + p, .card p + p { margin-top: 10px; }
.rows dd p { margin: 0; }
.steps.titled .stepCard p:first-child { font-weight: 700; color: var(--accent); }
/* Lists inside lesson text: one item per line, each with a small accent dot */
.bullets { list-style: none; margin: 8px 0 12px; padding: 0; }
.bullets li { position: relative; padding: 4px 0 4px 26px; }
.bullets li::before { content: ""; position: absolute; left: 6px; top: calc(4px + .85em - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: .75; }
.bullets:last-child { margin-bottom: 0; }
.stepCard .chips { margin-top: 12px; }

/* Key words */
.rows { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; margin: 0; }
.rows dt, .rows dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.rows dt { font-weight: 700; padding-right: 16px; }
.rows dt:first-of-type, .rows dt:first-of-type + dd { border-top: 0; padding-top: 0; }

/* Sources */
.sources { display: grid; gap: 14px; }
.source { display: flex; gap: 16px; align-items: flex-start; margin: 0; }
.source:hover { border-color: var(--accent); }
.sourceText { min-width: 0; display: block; }
.sourceText .note { display: block; line-height: 1.5; }
.source h3 { font-size: 22px; color: var(--accent); margin: 2px 0 6px; }
.source p { margin: 10px 0 0; }
.sourceTop { display: flex; justify-content: space-between; gap: 10px; }
.suggested { color: var(--warm); }

/* ---------- The gate ---------- */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient(145deg, var(--accent), var(--accent-2)); }
.gatePanel { width: 100%; max-width: 460px; background: var(--card); border-radius: 22px; padding: 30px 26px; box-shadow: 0 18px 50px rgba(10, 20, 30, 0.3); }
.gatePanel .badge { margin-bottom: 14px; }
.gatePanel h2 { font-size: 28px; color: var(--accent); margin: 0 0 6px; }
.gateForm { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; }
.gateInput { flex: 1; min-width: 160px; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 18px; background: #fff; }
.gateInput:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.action { border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; padding: 0 26px; min-height: 50px; }
.action:disabled { opacity: .55; cursor: default; }

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .header { padding: 10px 16px; }
  .header h1 { font-size: 22px; }
  .navToggle { display: flex; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; align-self: stretch; height: 100%; width: min(88vw, 350px); max-height: none; background: var(--ground); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .2s ease; }
  .nav.open { transform: none; }
  .nav { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; height: 100dvh; }   /* the menu scrolls by itself (November 1, 2026) */
  .navClose { display: flex; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: 20px; }
  .navBackdrop { position: fixed; inset: 0; z-index: 30; background: rgba(20, 24, 28, .35); display: none; touch-action: none; }
  .navBackdrop.open { display: block; }
  .canvas { padding: 20px 16px 48px; }
  .hero { flex-direction: column; gap: 14px; padding: 20px; }
  .hero h2, .shelfHead h2 { font-size: 22px; }
  .card { padding: 18px; }
  .tile { padding: 16px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .rows { grid-template-columns: minmax(0, 1fr); }
  .rows dd { border-top: 0; padding-top: 0; }
  .steps > li { padding-left: 54px; }
  .steps > li::before { width: 40px; height: 40px; }
  .steps > li::after { left: 19px; top: 52px; }
  .stepCard { padding: 16px 18px; }
}

/* ---------- Wayfinding Map and area pages: simple cards, like the Course Journey in Spardha Music (2026-09-30) ---------- */
.pageHead { margin: 0 0 22px; max-width: var(--read); }
.pageHead h2 { font-size: 28px; color: var(--accent); margin: 0 0 6px; }
.wayGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wayGrid.one { grid-template-columns: minmax(0, 1fr); }
.wayCard { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow); }
.wayCard:hover { border-color: var(--accent); }
.wayLabel { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.wayLabel svg { font-size: 16px; color: var(--accent); }
.wayCard h3 { font-size: 22px; color: var(--accent); margin: 6px 0 8px; }
.wayCard .note { display: block; }
.aboutNote { margin: 28px 0 0; max-width: var(--read); }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px 0 10px; color: var(--accent); font-weight: 700; font-size: 16px; text-decoration: none; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }


@media (max-width: 1200px) { .wayGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .wayGrid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .wayCard { padding: 18px; } .pageHead h2 { font-size: 22px; } }
.wayCard.faded { background: var(--soft); box-shadow: none; opacity: .7; }

/* ---------- Collapsible area bars on the Wayfinding Map, as in Copilot Skills (2026-09-30) ---------- */
.wayGroup { margin: 0 0 16px; border-radius: 20px; background: var(--accent-tint); border: 1px solid var(--accent-soft); overflow: hidden; }
.groupBar { display: flex; align-items: center; gap: 16px; padding: 18px 22px; min-height: 44px; cursor: pointer; list-style: none; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.groupBar::-webkit-details-marker { display: none; }
/* Her focus areas: a gold star after the name, on the map bars, in the menu and in the key under the heading */
.focusStar { display: inline-flex; vertical-align: -2px; margin-left: 8px; color: #f2b632; }
.focusStar svg { fill: currentColor; width: 20px; height: 20px; }
.navGroup .focusStar, .navGroup .focusStar svg { color: #e0a21c !important; }
.navGroup .focusStar svg { width: 16px; height: 16px; transform: none !important; }
.focusKey { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.focusKey .focusStar { margin-left: 0; color: #e0a21c; }
.groupName .focusStar svg { width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgba(242,182,50,.55)); }
/* Focus bars, option E (her pick, 2026-10-12): deep navy with a gold icon badge. Gold means "focus" only; use it nowhere else */
.wayGroup.focus .groupBar { background: linear-gradient(120deg, #172b45, #2b4c75); box-shadow: inset 0 0 0 1px rgba(242,182,50,.35); }
.wayGroup.focus .groupBar .badge { background: linear-gradient(135deg, #f6c453, #e09a1c); color: #172b45; }
.groupBar .badge { background: rgba(255,255,255,.18); color: #fff; }
.groupText { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.groupName { font-size: 22px; font-weight: 700; line-height: 1.3; }
.groupSub { font-size: 16px; opacity: .9; }
.groupToggle { display: flex; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; align-items: center; justify-content: center; background: rgba(255,255,255,.16); font-size: 22px; transition: transform .2s ease; }
.wayGroup[open] .groupToggle { transform: rotate(180deg); }
.groupBar:focus-visible { outline: 3px solid var(--warm); outline-offset: -3px; }
.groupBody { padding: 20px 22px 24px; }
@media (max-width: 900px) { .groupBar { padding: 14px 16px; gap: 12px; } .groupBody { padding: 14px 12px 16px; } .groupName { font-size: 20px; } }

/* ---------- The ladder of autonomy (Agentic Systems, 2026-10-02): rails on both sides, one rung per step ---------- */
.ladder { max-width: var(--read); margin: 0 0 24px; }
.ladderEnd { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 8px 4px; }
.ladderEnd:last-child { margin: 8px 0 0 4px; }
.ladderEnd svg { color: var(--accent); font-size: 16px; }
.rungs { list-style: none; margin: 0; padding: 4px 16px; border-left: 6px solid var(--accent-2); border-right: 6px solid var(--accent-2); border-radius: 6px; }
.rungs li { margin: 10px 0; }
.rung { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; position: relative; }
.rung::before, .rung::after { content: ""; position: absolute; top: 50%; width: 16px; height: 4px; background: var(--accent-2); }
.rung::before { left: -17px; } .rung::after { right: -17px; }
.rung:hover { border-color: var(--accent); }
.rung > svg { font-size: 22px; color: var(--accent); }
.rungNum { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.rungText { min-width: 0; display: flex; flex-direction: column; }
.rungTitle { font-weight: 700; color: var(--accent); line-height: 1.35; }
.rungTag { font-weight: 400; color: var(--muted); font-size: 16px; }
.rungAdds { font-size: 16px; color: var(--muted); line-height: 1.5; }
.rung.here { background: var(--accent); border-color: var(--accent); }
.rung.here .rungTitle, .rung.here .rungTag, .rung.here .rungAdds, .rung.here > svg { color: #fff; }
.rung.here .rungNum { background: #fff; color: var(--accent); }
.hereTag { display: inline-block; margin-left: 8px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--accent); font-size: 14px; font-weight: 700; }
.groupBody > .ladder { margin-bottom: 20px; }

/* ---------- Side by side: two stacks (08-09 declarative vs custom engine agents) ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compareCard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.compareHead { display: flex; gap: 14px; align-items: center; margin: 0 0 14px; }
.compareHead h3 { font-size: 22px; color: var(--accent); }
.compareHead .note { display: block; }
.stack { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.layer { border-radius: 12px; padding: 10px 14px; background: var(--soft); border: 1px solid var(--line); }
.layer .label { margin-bottom: 6px; }
.layer .chip { background: #fff; }
.layer.engine { background: var(--accent); border-color: var(--accent); }
.layer.engine .label { color: #fff; }
.layer.engine .chip { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }
.points { list-style: none; margin: 0; padding: 0; }
.points li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.points li svg { color: var(--accent); font-size: 18px; margin-top: 3px; }
@media (max-width: 900px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .rungs { padding: 2px 10px; }
  .rung { padding: 10px 12px; gap: 10px; }
  .rung::before { left: -11px; width: 10px; } .rung::after { right: -11px; width: 10px; }
}

/* Who each rung acts as: you (borrowed identity), mixed, or its own identity */
.actsTag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 1px solid var(--line); }
.actsTag svg { font-size: 15px; }
.actsTag.you { background: var(--accent-tint); color: var(--accent); }
.actsTag.mixed { background: var(--soft); color: var(--muted); }
.actsTag.own { background: #f7ebe2; color: #8a4a26; border-color: rgba(181,101,58,.3); }
.rung.here .actsTag { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); }
.ladderNote { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; }
.ladderNote svg { color: var(--accent); font-size: 20px; margin-top: 3px; flex: 0 0 auto; }

/* ---------- Collapsible groups in the left menu (2026-10-02): closed at first, the current topic's group opens ---------- */
.navBox { margin: 0; }
summary.navGroup { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 2px; padding: 10px 12px; min-height: 44px; border-radius: 12px; cursor: pointer; list-style: none; }
summary.navGroup::-webkit-details-marker { display: none; }
summary.navGroup:hover { background: rgba(38, 42, 46, 0.05); }
summary.navGroup:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
summary.navGroup svg { flex: 0 0 auto; font-size: 18px; color: var(--muted); transition: transform .2s ease; }
.navBox[open] > summary.navGroup svg { transform: rotate(180deg); }
.navBox[open] > summary.navGroup { color: var(--accent); }
.navBox[open] > summary.navGroup svg { color: var(--accent); }
.navBox[open] { padding-bottom: 6px; }

/* ---------- How a model answers: a flow of steps with arrows (00-09) ---------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px; max-width: 860px; }
.flowStep:nth-child(3n)::after { display: none; }
.flowStep { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 14px; box-shadow: var(--shadow); }
.flowStep:not(:last-child)::after { content: "→"; position: absolute; right: -21px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 700; font-size: 18px; }
.flowStep h3 { font-size: 18px; color: var(--accent); margin: 10px 0 4px; line-height: 1.3; }
.flowStep .note { margin: 0; line-height: 1.5; }
.flowNum { position: absolute; top: 12px; right: 12px; font-size: 14px; font-weight: 700; color: var(--muted); }
@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .flowStep { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
  .flowStep .badge { grid-row: span 2; }
  .flowStep h3 { margin: 0; }
  .flowStep .note { grid-column: 2; }
  .flowStep:not(:last-child)::after, .flowStep:nth-child(3n):not(:last-child)::after { display: block; content: "↓"; right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); }
}

/* ---------- How big are they? Model sizes with bars (00-09) ---------- */
.scale .note { margin: 0; }
.scaleRow { padding: 14px 0; border-top: 1px solid var(--line); }
.scale > .note:first-child + .scaleRow, .scale > .scaleRow:first-child { border-top: 0; }
.scale > .note:first-child { margin-bottom: 6px; }
.scaleTop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.scaleSize { color: var(--accent); white-space: nowrap; }
.scaleBar { height: 10px; border-radius: 999px; background: var(--accent-tint); margin: 8px 0 6px; overflow: hidden; }
.scaleBar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.scaleFoot { padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- The way back to the map (her ask, October 18, 2026) ---------- */
/* A floating Map pill on every page except the map: above the page, below the phone menu (30, 40) */
.mapFab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 24px 0 20px; border-radius: 999px; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 10px rgba(20, 28, 36, 0.18), 0 12px 28px rgba(20, 28, 36, 0.22); }
.mapFab svg { font-size: 22px; }
.mapFab:hover, .mapFab:focus-visible { filter: brightness(1.12); }
.mapFab:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; }
/* Room at the bottom so the button never covers the last line */
body.hasFab .canvas { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
body.hasFab .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* The big button at the end of each topic */
.backEnd { margin-top: 36px; min-height: 56px; background: var(--accent-tint); font-size: 18px; }
.backEnd svg { font-size: 22px; }
@media (max-width: 900px) { .backEnd { display: flex; justify-content: center; width: 100%; } }

/* ---------- The sneak peek (2026-10-18): the real map, faded and not clickable, under an invitation card ---------- */
.gatePanel .noKey a, .gatePanel .peekSelf a { color: var(--accent); font-weight: 700; }
body:not(.peek) .peekOnly { display: none; }
body.peek .gateOnly { display: none; }
#peekSlot .gatePanel { max-width: 640px; margin: 0 0 32px; border: 1px solid var(--accent-soft); box-shadow: 0 18px 50px rgba(20, 30, 45, 0.16); }
body.peek .wayCard, body.peek .navItem { pointer-events: none; }
body.peek .wayCard { opacity: .55; filter: saturate(.75); }
body.peek .navItem { opacity: .6; }
body.peek .mapFab { display: none; }

/* ---------- Home (her ask, 2026-10-24): the banner, every area as a tile with her picks, then the map ---------- */
.homeBlock { margin: 0 0 36px; }
.homeHead { display: flex; align-items: center; gap: 10px; font-size: 22px; color: var(--accent); margin: 0 0 4px; }
.homeHead svg { font-size: 26px; }
.homeLine { margin: 0 0 10px; max-width: var(--read); color: var(--muted); }
.homeKey { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.homeTiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1100px; }
.homeTile { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow); }
.homeTile.pick { background: var(--accent-tint); border-color: var(--accent-soft); box-shadow: inset 0 4px 0 var(--accent-2), var(--shadow); }
a.homeTile:hover { border-color: var(--accent); }
.homeTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.homeTile h3 { font-size: 18px; color: var(--accent); margin: 0 0 4px; line-height: 1.35; }
.homeTile .note { display: block; font-size: 16px; flex: 1; }
.homeCount { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--accent); }
.homeCount svg { font-size: 16px; }
.pickTag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.pickTag svg { font-size: 14px; fill: currentColor; }
.openMap { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 22px; text-decoration: none; box-shadow: var(--shadow); margin: 6px 0 40px; }
.openMap:hover { background: var(--accent-2); }
.openMap svg { font-size: 26px; }
#peekSlot { margin: 8px 0 0; }
@media (max-width: 1200px) { .homeTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .homeTiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .homeTile { padding: 16px 18px; }
  .openMap { font-size: 18px; width: 100%; justify-content: center; padding: 0 18px; }
}
/* Topics like Gyaan's books (2026-10-24, area 00 first; copied from Women's Health): Pages (designed pictures, the
   default), Summary and Text tabs. The pictures are made by tools/pages and sit in docs/pages/<id>/. */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--accent-soft); background: var(--card); color: var(--accent); font-size: 16px; font-weight: 700; }
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab svg { font-size: 18px; }
@media (max-width: 700px) { .tabs { flex-wrap: nowrap; gap: 6px; } .tab { flex: 1; justify-content: center; padding: 0 8px; gap: 6px; } }
.pages { display: grid; gap: 22px; max-width: 1400px; }
.canvas:has(.pages) { max-width: 1480px; }   /* bigger pictures on a wide screen, so the words are easier to read */
.pagePic { display: block; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.pagePic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 700px) { .pagePic img { aspect-ratio: 9 / 16; } .pagePic { border-radius: 14px; } }
.toText { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 14px; background: var(--accent-tint); color: var(--accent); font-size: 16px; font-weight: 700; text-align: left; }
.sumHead { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.steps.titled .stepCard .sumHead + p { color: var(--ink); }
.whyList { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.whyList li { display: flex; gap: 14px; align-items: flex-start; }
.whyList .emo { font-size: 28px; line-height: 1.2; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.sumFlow { margin: 0; padding-left: 24px; display: grid; gap: 10px; }
.sumFlow li::marker { color: var(--accent); font-weight: 700; }
/* Quick win: a ticket-edged mint card with a wavy line under the heading (book-inspired callout, as in Women's Health). */
.quickWin { --mint: #e3f2ec; --mint-ink: #2f6b55; position: relative; max-width: var(--read); margin: 0 0 28px; padding: 22px 26px 22px 30px; background: var(--mint); border-radius: var(--r);
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.qwHead { display: flex; align-items: center; gap: 12px; }
.qwHead h3 { font-size: 22px; color: var(--mint-ink); }
.quickWin .badge { background: #fff; color: var(--mint-ink); }
.quickWin .wavy { display: block; width: 140px; height: 10px; margin: 6px 0 12px 52px; }
.quickWin .wavy path { fill: none; stroke: var(--mint-ink); stroke-width: 2.5; stroke-linecap: round; }
/* ---------- Download PDF (her ask, 2026-11-01, copied from Gyaan): a button beside the tabs, then a small card ---------- */
.topicBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 22px; }
.topicBar .tabs { margin: 0; }
.pdfBtn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--card); border: 2px solid var(--accent); color: var(--accent); font-size: 16px; font-weight: 700; box-shadow: var(--shadow); }
.pdfBtn:hover { background: var(--accent-tint); }
.pdfBtn svg { font-size: 18px; }
.pdfShade { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 26, 34, .45); }
.pdfCard { width: min(100%, 440px); background: var(--card); border-radius: 20px; padding: 26px; box-shadow: 0 20px 60px rgba(20, 30, 45, .3); }
.pdfHead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pdfHead h3 { font-size: 22px; color: var(--accent); }
.pdfAsk { font-weight: 700; margin-bottom: 10px; }
.pdfPick { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); cursor: pointer; font-size: 16px; line-height: 1.4; }
.pdfPick input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.pdfPick svg { font-size: 20px; color: var(--accent); }
.pdfStatus { min-height: 27px; margin: 10px 0; }
.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-weight: 700; }
.pdfGo svg { font-size: 20px; }
.pdfCancel { min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 700; color: var(--muted); }
.pdfGo:disabled, .pdfCancel:disabled { opacity: .55; cursor: default; }
.pdfGo:focus-visible, .pdfCancel:focus-visible, .pdfBtn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
@media (max-width: 900px) {
  .topicBar .tabs { width: 100%; }
  .pdfBtn { width: 100%; justify-content: center; }
}
/* The whole app in one PDF (her ask, November 1, 2026): the last menu item and a button at the end of the map. */
.navPdf { border: 0; background: none; font: inherit; color: var(--accent); font-weight: 700; text-align: left; cursor: pointer; margin-top: 12px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.navPdf svg { color: var(--accent); }
.pdfAll { margin: 24px 0 8px; }
.pdfExtra { margin: 4px 0 0; }