

.progress-step-description{padding:6px 8px;border-radius:8px;background:#ffffff1f;color:#fff;line-height:1.4}
.progress-step-actions{display:flex;gap:8px;margin-top:3px}
.progress-step-actions>button{flex:1;min-width:0;min-height:40px;padding:9px 14px;border:0;border-radius:8px;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.progress-step-actions>.progress-step-continue{background:#15803d}
.progress-step-actions>.progress-step-cancel{background:#b91c1c}
.progress-step-actions>.progress-step-continue:hover{background:#166534}
.progress-step-actions>.progress-step-cancel:hover{background:#991b1b}
.progress-step-actions>button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.learn-mode-steps{display:grid;gap:6px}
.learn-mode-step{display:flex;align-items:stretch;gap:6px;min-width:0}
.learn-mode-step>button:first-child{flex:1;min-width:0;text-align:left;white-space:normal}
.learn-mode-step>[aria-current="step"]{border-color:var(--violet);color:var(--violet)}
.learn-mode-step>.learn-question-copy{flex:0 0 38px;min-height:38px;padding:8px;display:flex;align-items:center;justify-content:center}
.player-tools:has(>#learnModeReferences:not([hidden])){display:flex}

.learn-map-stage{position:relative}
.learn-preparation-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;width:min(440px,calc(100% - 40px));box-sizing:border-box;padding:20px 24px;border:1px solid #8b465d;border-radius:14px;background:#3b202b;color:#ffe3ec;box-shadow:0 16px 50px #0007;text-align:center;font-size:14px;line-height:1.5}
.learn-preparation-popup strong{display:block;margin-bottom:8px;font-size:16px}
.learn-preparation-meter{height:5px;margin-top:14px;overflow:hidden;border-radius:9px;background:#ffffff26}
.learn-preparation-meter>span{display:block;height:100%;background:#f29cb8;border-radius:inherit;transition:width .3s ease}
.learn-preparation-meter.indeterminate>span{width:35%;animation:learn-preparation-pulse 1.5s ease-in-out infinite alternate}
@keyframes learn-preparation-pulse{to{transform:translateX(180%)}}
@media(prefers-reduced-motion:reduce){.learn-preparation-meter.indeterminate>span{animation:none}.learn-preparation-meter>span{transition:none}}

.ref-toast.learn-toast-fading{opacity:0;transition:opacity 2s ease}

/* Discovery learning workspace: retains the existing primary player in place. */
.learning-workspace-header,.learning-side,.personal-dialog{--surface:#0f2033;--surface-2:#14263b;--ink:#edf4ff;--muted:#a6b8cf;--line:#2a3e56;background:#0b1726;color:var(--ink);border:1px solid var(--line);border-radius:10px}
.learning-workspace-header{padding:20px;margin-bottom:16px;min-width:0}
.learning-intro{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:20px;align-items:start}
.learning-intro>img{width:100px;height:100px;object-fit:cover;border-radius:8px}
.learning-intro h2{font-size:clamp(22px,2.3vw,30px);line-height:1.25;margin:8px 0;letter-spacing:-.025em;overflow-wrap:anywhere}
.learning-intro p{font-size:13px;line-height:1.6;margin:8px 0;color:var(--muted)}
.learning-intro small,.learning-current-heading>small{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--brand-highlight,#83baff)}
.learning-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:6px;max-width:400px}.learning-actions button,.learning-actions select{width:auto;white-space:nowrap;padding:6px 12px;min-width:0;font-size:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:7px;text-align:center}
.learning-actions .learning-primary{background:var(--brand-accent,#1767c4);color:var(--brand-on-accent,#fff);border-color:var(--brand-accent,#1767c4)}
.learning-step-strip{display:flex;gap:10px;overflow-x:auto;padding:18px 2px;scrollbar-width:thin;scroll-snap-type:x proximity}
.learning-step-card{flex:0 0 175px;display:grid;align-content:start;gap:9px;min-height:135px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);text-align:left;cursor:pointer;scroll-snap-align:start}
.learning-step-card small{font-size:10px;color:var(--muted)}.learning-step-card strong{font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.learning-step-card p{font-size:11px;margin:0;color:var(--muted)}
.learning-step-card[aria-current=step]{border-color:var(--brand-highlight,#83baff);background:color-mix(in srgb,var(--brand-accent,#1767c4) 18%,#14263b)}
.learning-step-card[data-complete=true]>small:first-child{color:#71d7b5}
.learning-current-heading h3{font-size:16px;line-height:1.4;margin:6px 0 6px}.learning-current-heading .learning-step-quote{font-size:13px;font-style:italic;color:var(--muted);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.learning-current-heading>div{display:flex;gap:8px}.learning-current-heading button:disabled{opacity:.4;cursor:default}
.learning-active #episodeShell>.episode-heading,.learning-active #episodeShell>.episode-grid>.timeline-column>.timeline-card{display:none}
/* Keep the path steps and primary player on the same full-width content track. */
.learning-active .episode-grid{grid-template-columns:minmax(0,1fr)}
.learning-side{padding:16px;min-width:0}.learning-side details+details{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.learning-side summary{font-size:13px;font-weight:700;cursor:pointer;margin-bottom:12px}.learning-side details>button{display:block;max-width:100%;width:100%;text-align:left;margin:6px 0;font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.learning-side button[aria-current=true]{border-color:var(--brand-highlight,#83baff)}.learning-side p,.learning-side details>div,.learning-side li{font-size:12px;line-height:1.6;overflow-wrap:anywhere}.learning-side article{padding:8px 0;border-bottom:1px solid var(--line)}.learning-side article button{font-size:11px;margin:3px}
.personal-dialog{width:min(520px,calc(100vw - 24px));max-height:85dvh;padding:22px;overflow:auto;box-shadow:0 20px 60px #0006}.personal-dialog::backdrop{background:#030c19b3}.personal-dialog h3{margin-top:0}.personal-dialog label{display:grid;gap:10px;font-size:13px;line-height:1.5}.personal-dialog textarea,.personal-dialog input{width:100%;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:12px;font:inherit;box-sizing:border-box}.personal-dialog button{background:var(--surface-2);color:var(--ink);border-color:var(--line);margin:4px}.personal-dialog form>button[type=submit]{background:var(--brand-accent,#1767c4);color:var(--brand-on-accent,#fff)}.personal-dialog header{display:flex;justify-content:space-between;align-items:center;gap:14px}.personal-dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px}.personal-dialog-actions button{margin:0}.personal-dialog p{font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.personal-dialog small{color:var(--muted);font-size:11px}.library-dialog{width:min(780px,calc(100vw - 24px))}.personal-records article{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--line)}
.personal-library-nav{display:grid;gap:4px;margin:16px 0;padding:14px 0;border-top:1px solid var(--line)}.personal-library-nav small{font-size:10px;letter-spacing:.13em;color:var(--muted);padding:8px 11px}.personal-library-nav button{text-align:left;min-height:36px;background:none;border:0;color:var(--muted);border-radius:7px;padding:7px 11px;cursor:pointer}.personal-library-nav button:hover{background:var(--surface-2);color:var(--ink)}
.learning-workspace-header button:focus-visible,.learning-side button:focus-visible,.personal-dialog :focus-visible{outline:2px solid var(--brand-highlight,#83baff);outline-offset:3px}
@media(max-width:1000px){.learning-intro{grid-template-columns:70px minmax(0,1fr)}.learning-intro>img{width:70px;height:70px}.learning-actions{grid-column:1/-1;justify-content:flex-start;max-width:none}.learning-active .episode-grid{grid-template-columns:minmax(0,1fr)}.learning-side{margin-top:12px}}
@media(max-width:640px){.learning-workspace-header{padding:14px}.learning-intro{gap:12px}.learning-intro h2{font-size:21px}.learning-step-card{flex-basis:155px;min-height:120px}.learning-current-heading h3{font-size:15px}.personal-dialog{padding:16px}.learning-active .player-tools-actions{flex-wrap:wrap}.learning-step-strip{padding-block:14px}}
.learning-intro.without-image{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:1000px){.learning-intro.without-image{grid-template-columns:minmax(0,1fr)}}
