/* Source-driven learning trail and reader steps. Loaded after the app layers. */
.learning-trail{width:min(1240px,calc(100% - 64px));margin:20px auto 30px;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:18px;color:var(--ink);font-family:var(--display);}
.trail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.trail-note{font:10px var(--mono);color:var(--muted)}
.trail-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.trail-module{min-width:0;padding:12px 12px 14px;background:color-mix(in srgb,var(--amber) 8%,var(--panel));border:1px solid var(--line);border-radius:14px}.trail-module-title{display:flex;align-items:center;gap:8px;font-size:11px}.trail-module-title strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trail-module-title>span:last-child{margin-left:auto;color:var(--muted);font:10px var(--mono)}.trail-number{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:var(--amber);color:#493713;font:10px var(--mono);font-weight:700}
.trail-nodes{position:relative;display:flex;align-items:center;gap:7px;margin-top:14px}.trail-nodes::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:var(--line-strong);z-index:0}.trail-node{position:relative;z-index:1;display:grid;place-items:center;width:27px;height:27px;border:2px solid var(--line-strong);border-radius:50%;background:var(--paper);color:var(--muted);font:9px var(--mono);transition:transform .16s,border-color .16s,background .16s,color .16s}.trail-node.is-complete{border-color:#4d9b71;background:#4d9b71;color:#fff}.trail-node.is-current{border-color:var(--amber);background:var(--amber);color:#493713;box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%,transparent)}.trail-node:hover{transform:translateY(-2px);border-color:var(--blue);color:var(--ink)}.trail-node:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.reader-steps{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 22px;padding:8px;background:color-mix(in srgb,var(--amber) 8%,var(--panel));border:1px solid var(--line);border-radius:12px}.reader-step{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font:10px var(--mono);transition:transform .16s,border-color .16s,background .16s}.reader-step span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--paper);color:var(--muted);font-size:8px}.reader-step.is-complete{border-color:#4d9b71;color:var(--ink)}.reader-step.is-complete span{background:#4d9b71;color:#fff}.reader-step:hover{transform:translateY(-1px);border-color:var(--blue)}.reader-step:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
html[data-theme=dark] .trail-number,html[data-theme=dark] .trail-node.is-current{color:#241c0a}html[data-theme=dark] .worked-example{background:color-mix(in srgb,var(--amber) 16%,var(--panel));color:var(--ink-soft)}
@media(max-width:850px){.learning-trail{width:min(100% - 40px,720px);padding:15px;margin-top:16px}.trail-modules{grid-template-columns:1fr;gap:9px}.trail-module{padding:10px}.trail-nodes{gap:6px}.trail-node{width:25px;height:25px}.reader-steps{margin-bottom:17px}}
@media(max-width:380px){.learning-trail{width:calc(100% - 28px);padding:12px}.trail-node{width:23px;height:23px;font-size:8px}.trail-module-title{font-size:10px}.reader-step{padding:5px 7px}}
@media(prefers-reduced-motion:reduce){.trail-node,.reader-step{transition:none}.trail-node:hover,.reader-step:hover{transform:none}}

.quiz-question-nav{display:flex;gap:9px;margin:18px 0 8px}
.quiz-step{display:grid;place-items:center;gap:2px;min-width:70px;min-height:56px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--ink);cursor:pointer}
.quiz-step>span{font:700 13px var(--mono)}
.quiz-step small{font:10px var(--kb-body,system-ui);color:var(--muted)}
.quiz-step.is-current{border:2px solid var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent)}
.quiz-step.is-correct{border-color:#4d9b71}.quiz-step.is-retry{border-color:#c66a67}
.quiz-step:focus-visible,.quiz-option:focus-visible,.quiz-pager button:focus-visible,.quiz-summary button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.quiz-stage{min-height:130px}.quiz-item{padding:17px 0 20px}
.quiz-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}
.quiz-pager>span{font-size:12px;text-align:center;color:var(--muted)}
.quiz-summary{margin-top:16px;padding:17px 19px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--amber) 9%,var(--panel))}
.quiz-summary h3{margin:0 0 7px;font:700 16px var(--kb-display,system-ui)}
.quiz-summary p{font-size:12px;line-height:1.6;margin:5px 0;color:var(--ink-soft)}
.quiz-summary .button{margin-top:8px}
html[data-theme=dark] .quiz-step.is-correct{border-color:#73bd91}html[data-theme=dark] .quiz-step.is-retry{border-color:#df8c84}
@media(max-width:520px){.quiz-question-nav{gap:7px}.quiz-step{flex:1;min-width:0;min-height:54px;padding:6px}.quiz-pager{gap:7px}.quiz-pager .button{padding:9px 10px;font-size:11px}.quiz-pager>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.quiz-step{transition:none}}

.home-trail{grid-column:1/-1;border:2px solid var(--ink);border-radius:16px;background:var(--panel);margin:0;min-width:0}.home-trail>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;cursor:pointer;font:700 14px var(--kb-body,system-ui)}.home-trail>summary span{font-size:12px;color:var(--muted)}.home-trail .learning-trail{width:auto;margin:0;border:0;border-radius:0;padding:12px 16px 18px}.trail-node{width:42px;height:42px;font-size:12px;flex-shrink:0}.trail-nodes{gap:8px;flex-wrap:wrap}.trail-module-title{font-size:13px}.trail-module-title strong{white-space:normal;overflow:visible}.trail-module-title>span:last-child,.trail-note{font-size:11px}.reader-step{font-size:12px;min-height:40px}.reader-step span{font-size:10px}.reader-step.is-current{border-color:var(--amber);color:var(--ink)}.reader-content h2,#reader-quiz{scroll-margin-top:100px}@media(max-width:850px){.trail-node{width:40px;height:40px}.trail-module-title{font-size:12px}.home-trail .learning-trail{width:auto;padding:10px}.trail-nodes{gap:7px}.home-trail>summary{font-size:13px;padding:13px}.home-trail>summary span{font-size:11px}}

/* Final Learn presentation layer: readable defaults after the legacy skin cascade. */
body[data-kubear-app="learn"] { font-family: var(--kb-body, system-ui, sans-serif); font-size: 16px; line-height: 1.55; }
body[data-kubear-app="learn"] .learn-home,
body[data-kubear-app="learn"] .courses-page,
body[data-kubear-app="learn"] .utility-page,
body[data-kubear-app="learn"] .course-page,
body[data-kubear-app="learn"] .reader-page { min-width: 0; }
.learn-welcome h1, .courses-intro h1, .utility-head h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.06; }
.learn-welcome p, .courses-intro p, .utility-head p { font-size: 16px; line-height: 1.6; }
.start-card-copy h2 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.16; }
.start-card-copy p, .game-challenge p, .course-chip small, .learn-glossary-link,
.lesson-row p, .module-copy p, .term-desc, .search-result p, .side-card p,
.source-note-inline, .source-check-meta { font-size: 14px; line-height: 1.55; }
.course-chip strong, .lesson-row h3, .module-copy h3 { font-size: 17px; line-height: 1.35; }
.eyebrow, .reader-meta, .reader-crumbs, .result-module, .term-pron,
.story-label, .trail-note, .trail-module-title>span:last-child { font-size: 12px; line-height: 1.45; letter-spacing: .04em; }
.trail-module-title { font-size: 14px; line-height: 1.4; }
.reader-title { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; }
.reader-deck { font-size: 18px; line-height: 1.55; }
.reader-content { max-width: 68ch; }
.reader-content p, .reader-content li, .story-block p, .worked-example p,
.exercise-box p, .takeaway-box span, .source-note-inline { font-size: 16px; line-height: 1.68; }
.reader-content h2 { font-size: 23px; line-height: 1.2; }
.reader-tools { gap: 8px; }
.tool-button, .reader-step, .reader-mobile-dock button, .reader-mobile-dock a { font-size: 14px; line-height: 1.4; }
.reader-step { min-height: 44px; padding: 8px 12px; }
.reader-step span { width: 22px; height: 22px; font-size: 11px; }
.quiz-intro, .quiz-explain, .quiz-score, .quiz-summary p { font-size: 14px; line-height: 1.55; }
.quiz-step { min-height: 58px; }
.quiz-step small { font-size: 12px; }
.quiz-q, .quiz-option { font-size: 16px; line-height: 1.5; }
.quiz-pager>span { font-size: 13px; line-height: 1.45; }
.quiz-pager .button { min-height: 44px; font-size: 13px; }
.course-chips, .trail-modules, .trail-module, .quiz-section,
.quiz-question-nav, .quiz-stage, .quiz-pager, .reader-shell { min-width: 0; }
.trail-nodes { gap: 8px; }
.trail-node { width: 40px; height: 40px; font-size: 12px; }
.home-trail>summary { min-height: 52px; }
.home-trail>summary span, .quiz-summary h3 { font-size: 14px; }
@media(max-width:560px) {
  .learn-welcome h1, .courses-intro h1, .utility-head h1 { font-size: clamp(30px, 9vw, 38px); }
  .learn-welcome p, .courses-intro p, .utility-head p { font-size: 15px; }
  .start-card-copy h2 { font-size: 25px; }
  .reader-deck { font-size: 17px; }
  .quiz-question-nav { gap: 8px; }
  .quiz-step { padding: 7px 8px; }
  .quiz-pager { gap: 8px; }
  .quiz-pager .button { padding: 9px 10px; }
  .home-trail>summary { padding: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-kubear-app="learn"] *, body[data-kubear-app="learn"] *::before,
  body[data-kubear-app="learn"] *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}