/* Switchable learning paths — the Almanac's quiet, editorial controls. */
/* Course shells deliberately load bbg.css instead of notes.css. Map the
   Almanac semantic names used below onto that shell's palette so a checked
   native radio has a dependable surface and foreground in both themes. */
body.bbg {
  --paper:var(--bg);
  --paper-2:var(--bg-elev);
  --card:var(--bg-card);
  --ink:var(--text);
  --ink-soft:var(--text-soft);
  --ink-faint:var(--text-mute);
  --hairline:var(--border);
  --accent-line:var(--border);
  --warn:var(--amber);
  --warn-bg:var(--accent-soft);
  --font-display:var(--sans);
  --font-body:var(--sans);
  --font-mono:var(--mono);
}

[data-learning-switch] {
  display:inline-flex; flex-wrap:wrap; gap:0; padding:3px;
  border:1px solid var(--hairline); border-radius:999px; background:var(--paper-2);
}
[data-learning-switch] legend {
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap;
}
[data-learning-switch] label {
  display:inline-flex; align-items:center; min-height:32px; padding:6px 11px;
  border-radius:999px; color:var(--ink-soft); cursor:pointer;
  font:600 0.68rem/1.2 var(--font-mono); letter-spacing:.04em;
}
[data-learning-switch] input { position:absolute; opacity:0; pointer-events:none; }
[data-learning-switch] label:has(input:checked) {
  color:var(--ink); background:var(--card); box-shadow:0 1px 2px rgb(48 34 20 / .16);
}
[data-learning-switch] label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }

.learning-home { margin:0 0 24px; }
.learning-summary {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px 24px;
  margin:20px 0 0; padding:18px 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--hairline);
}
.learning-summary h2 { font-family:var(--font-display); font-size:clamp(1.35rem,3vw,1.8rem); }
.learning-summary p { margin:3px 0 0; color:var(--ink-soft); }
.learning-summary a { align-self:center; color:var(--accent); font-weight:600; }
.learning-summary .learning-coming { grid-column:1 / -1; font:600 .67rem/1.4 var(--font-mono); letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase; }
.learning-empty-state, .learning-storage-state { grid-column:1 / -1; margin:12px 0 0; padding:11px 13px; border:1px solid var(--hairline); border-top:2px solid var(--accent); background:var(--paper-2); color:var(--ink-soft); font-size:.88rem; }
.learning-storage-state { border-top-color:var(--warn); }
.learning-privacy { font-size:.78rem; color:var(--ink-faint); }
.learning-privacy button { margin-left:6px; border:0; border-bottom:1px solid currentColor; background:none; color:var(--accent); cursor:pointer; font:inherit; }
.learning-privacy button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.learning-insights { grid-column:1 / -1; margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }
.learning-insights h2 { margin:0; font:600 1.05rem/1.2 var(--font-display); }
.learning-insights p { font-size:.82rem; }
.learning-insights dl { display:flex; flex-wrap:wrap; gap:16px 28px; margin:10px 0 0; }
.learning-insights dt { font:600 .62rem/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.learning-insights dd { margin:2px 0 0; font:600 1.2rem/1 var(--font-display); color:var(--ink); }

.learning-roadmap { max-width:940px; margin:0 auto; padding:clamp(24px,5vw,52px) clamp(18px,5vw,42px) 72px; }
.learning-roadmap > header { margin:26px 0 20px; padding-bottom:18px; border-bottom:2px solid var(--ink); }
.learning-roadmap > header p:first-child { font:600 .68rem/1 var(--font-mono); letter-spacing:.14em; color:var(--accent); text-transform:uppercase; }
.learning-roadmap > header h1 { margin-top:9px; font:600 clamp(2rem,6vw,3.4rem)/1 var(--font-display); letter-spacing:-.025em; }
.learning-roadmap .path-panel { margin-top:28px; }
.learning-roadmap .path-panel > h2 { font:600 clamp(1.55rem,4vw,2.25rem)/1.1 var(--font-display); }
.roadmap-stage { margin-top:26px; padding-top:18px; border-top:1px solid var(--hairline); }
.roadmap-stage h3 { font:600 1.25rem/1.2 var(--font-display); }
.roadmap-stage > p { margin-top:7px; color:var(--ink-soft); }
.roadmap-stage > ol { margin:17px 0 0 1.3rem; }
.roadmap-topic { padding:0 0 18px 8px; }
.roadmap-topic article { padding:14px 16px; border:1px solid var(--hairline); border-top:2px solid var(--accent); background:var(--accent-soft); }
.roadmap-topic h4 { margin:3px 0 7px; font:600 1.12rem/1.25 var(--font-display); }
.roadmap-topic h4 a, .roadmap-topic a { color:var(--accent); }
.roadmap-topic h5, .topic-meta { font:600 .66rem/1.4 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.roadmap-topic p, .roadmap-topic ul { margin-top:8px; color:var(--ink-soft); }
.roadmap-topic ul { padding-left:1.1rem; }
.learning-evidence { margin-top:13px; padding-top:12px; border-top:1px solid var(--hairline); }
.learning-status { margin:0 0 8px; font:600 .7rem/1.4 var(--font-mono); letter-spacing:.04em; color:var(--ink-soft); }
.learning-status strong { color:var(--ink); }
.learning-evidence-actions { display:flex; flex-wrap:wrap; gap:7px; }
.learning-evidence-actions button {
  min-height:34px; padding:7px 10px; border:1px solid var(--hairline); border-radius:6px;
  background:var(--paper-2); color:var(--ink); font:600 .67rem/1.2 var(--font-mono); cursor:pointer;
}
.learning-evidence-actions button:hover { border-color:var(--accent); color:var(--accent); }
.learning-evidence-actions button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.learning-evidence-actions [data-learning-reset] { color:var(--ink-soft); }
.learning-evidence-actions button:focus-visible, .learning-rail-control:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.learning-evidence-actions button:disabled { cursor:not-allowed; opacity:.66; }
.learning-evidence-actions button:active { transform:translateY(1px); }
.learning-live-region { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

.learning-mode-switch { margin-left:auto; }
.bbg #learningEvidence { min-width:130px; }
.bbg #learningReset { min-width:58px; }
.bbg .reading-progress { margin:7px 0 0; color:var(--text-mute); font:500 10px/1.3 var(--mono); }
.learning-rail-control { margin-top:8px; color:var(--ink-soft); background:transparent; border:0; cursor:pointer; font:600 .68rem/1.3 var(--font-mono); }
.learning-rail-control:hover { color:var(--accent); }
[data-learning-unavailable] { margin:10px 0; padding:9px 12px; border-left:2px solid var(--warn); background:var(--warn-bg); color:var(--ink-soft); font-size:.88rem; }

/* Canonical topic pages keep both practices in the document. JavaScript sets
   `hidden` after a learner chooses a goal; without it, both remain readable. */
[data-learning-orientation], [data-shared-core], [data-mode-content], [data-learning-exit] {
  margin-top:24px;
}
[data-mode-content] > h2, [data-learning-exit] > h2 {
  margin-bottom:8px;
}
[data-mode-content] details { margin-top:12px; }
[data-retrieval-question] { margin:8px 0; }

@media (max-width:720px) {
  .learning-summary { grid-template-columns:1fr; }
  .learning-summary a { align-self:start; }
  .learning-mode-switch { margin-left:0; order:3; }
  .learning-roadmap > header h1 { font-size:2.35rem; }
  .roadmap-topic { padding-left:0; }
  .learning-evidence-actions button { min-height:40px; }
}
@media (prefers-reduced-motion:reduce) { [data-learning-switch] label { transition:none; } }
@media (forced-colors:active) {
  [data-learning-switch], .roadmap-topic article { border:1px solid CanvasText; }
  [data-learning-switch] label:has(input:checked) { outline:2px solid Highlight; }
}