ui/css/styles.css

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg1:#1a1a2e;--bg2:#16213e;--bg3:#0f0f23;
  --accent:#e94560;--accent2:#ff6b6b;
  --text1:#eef0f2;--text2:#9ca3af;
  --border:#2d3a59;--success:#4ade80;--warn:#fbbf24;
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg1);color:var(--text1);height:100vh;overflow:hidden}

/* layout */
.screen-switcher{height:56px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#18233f,#131c33);position:sticky;top:0;z-index:30}
.screen-btn{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:13px;font-weight:600}
.screen-btn.active{border-color:var(--accent);color:#fff;background:rgba(233,69,96,.2)}
.app-screen{display:none;height:calc(100vh - 56px)}
.app-screen.active{display:block}
.app-container{display:flex;height:100%}
.sidebar{width:290px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;position:sticky;top:0;height:100%;flex-shrink:0}
.logo{padding:18px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.logo-icon{font-size:30px;color:var(--accent)}
.logo-text{font-size:17px;font-weight:600}
.sidebar-toggle-btn{margin-left:auto}
.formula-library{flex:1;overflow-y:auto;padding:14px}
.formula-library h3,.symbol-palette h3{font-size:11px;text-transform:uppercase;color:var(--text2);margin-bottom:10px;letter-spacing:1px}
.symbol-palette{padding:14px;border-top:1px solid var(--border);max-height:240px;overflow-y:auto}

/* categories */
.category-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.category-btn{padding:5px 11px;background:var(--bg3);border:1px solid var(--border);border-radius:18px;color:var(--text2);font-size:12px;cursor:pointer;transition:.2s}
.category-btn:hover,.category-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* formula list */
.formula-list{display:flex;flex-direction:column;gap:6px}
.formula-item{padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:7px;cursor:pointer;transition:.2s}
.formula-item:hover{border-color:var(--accent);transform:translateX(3px)}
.formula-item .name{font-weight:500;font-size:13px;margin-bottom:3px}
.formula-item .preview{font-size:13px;color:var(--text2);overflow:hidden}

/* symbols */
.sym-group{margin-bottom:10px}
.sym-group-title{font-size:11px;color:var(--text2);margin-bottom:5px}
.sym-btns{display:flex;flex-wrap:wrap;gap:4px}
.sym-btn{padding:5px 9px;background:var(--bg3);border:1px solid var(--border);border-radius:5px;color:var(--text1);cursor:pointer;font-size:13px;transition:.15s}
.sym-btn:hover{border-color:var(--accent);background:var(--bg2)}

/* workspace */
.workspace{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:100%;min-height:0}
.input-section{padding:20px 24px;border-bottom:1px solid var(--border)}
.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.input-header h2{font-size:17px;font-weight:500}
.type-selector{display:flex;align-items:center;gap:8px}
.type-selector select,.param-group input,.param-group select{padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text1);font-size:13px}
.demo-picker{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px}
.demo-picker label{font-size:13px;color:var(--text2);font-weight:600;flex-shrink:0}
.demo-picker select{flex:1;min-width:220px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text1);font-size:13px}

.math-input-container{margin-bottom:14px}
#mathInput{width:100%;min-height:84px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;padding:12px 14px;background:var(--bg3);border:2px solid var(--border);border-radius:8px;color:var(--text1);resize:vertical;line-height:1.35}
#mathInput:focus{border-color:var(--accent);outline:none}
.input-copy-tools{display:flex;gap:8px;margin-top:8px}

.params-section{display:flex;gap:20px;margin-bottom:14px;flex-wrap:wrap}
.param-group{display:flex;align-items:center;gap:6px}
.param-group.hidden{display:none}
.param-group label{font-size:13px;color:var(--text2)}
.param-group input{width:70px}

.input-actions-row{display:flex;gap:14px;align-items:stretch;justify-content:space-between;flex-wrap:wrap}
.action-buttons{display:flex;gap:10px;align-items:flex-start}
.quick-symbols{flex:1;min-width:380px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.quick-symbols-head{font-size:11px;text-transform:uppercase;color:var(--text2);letter-spacing:.9px}
.quick-symbol-tabs{display:flex;gap:6px;flex-wrap:wrap}
.quick-symbol-tab{padding:5px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:999px;color:var(--text2);font-size:12px;cursor:pointer}
.quick-symbol-tab.active,.quick-symbol-tab:hover{border-color:var(--accent);background:rgba(233,69,96,.14);color:#fff}
.quick-symbol-grid{display:flex;flex-wrap:wrap;gap:6px}
.quick-symbol-grid .sym-btn{padding:5px 10px;font-size:13px;border-radius:6px}
.btn{padding:10px 22px;border:none;border-radius:7px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-secondary{background:var(--bg3);color:var(--text1);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--text2)}
.btn-small{padding:7px 14px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
button,.btn,.tab,.learning-topic-btn,.learning-related-btn,.related-learning-link{user-select:text}
.katex,.katex *{user-select:text!important}

/* pretty inline math rendering for non-KaTeX text surfaces */
sup{font-size:.72em;line-height:0;vertical-align:super}
sub{font-size:.72em;line-height:0;vertical-align:sub}
.math-frac{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle;line-height:1.05;margin:0 .08em}
.math-frac-num,.math-frac-den{display:block;padding:0 .2em;white-space:nowrap}
.math-frac-bar{display:block;width:100%;min-width:1.15em;border-top:1.4px solid currentColor;margin:.07em 0}

/* output */
.output-section{flex:0 0 auto;display:flex;flex-direction:column;overflow:visible}
.tabs{display:flex;padding:0 24px;border-bottom:1px solid var(--border)}
.tab{padding:14px 22px;background:none;border:none;color:var(--text2);font-size:13px;cursor:pointer;position:relative;transition:.2s}
.tab:hover{color:var(--text1)}
.tab.active{color:var(--accent)}
.tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent)}
.tab-content{flex:0 0 auto;padding:20px 24px;overflow:visible;display:none}
.tab-content.active{display:flex;flex-direction:column}
#animationTab.tab-content.active{overflow:visible;min-height:0}
#animVisualWrap{flex:0 0 auto}

/* result */
.result-display{padding:18px;background:var(--bg3);border-radius:8px;margin-bottom:18px;font-size:20px;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center}
.result-display .placeholder{color:var(--text2);font-size:14px;font-weight:400}
.result-display .katex{font-size:24px}
.result-display{overflow:auto;max-width:100%}
.result-display .katex-display{overflow:auto;max-width:100%;padding-bottom:4px}
.result-display.copyable{cursor:copy}
.result-display, .result-display *{user-select:text}
.related-learning-panel{margin-bottom:14px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);padding:10px 12px}
.related-learning-panel.hidden{display:none}
.related-learning-title{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.related-learning-links{display:flex;flex-wrap:wrap;gap:8px}
.related-learning-link{border:1px solid var(--border);background:var(--bg2);color:var(--text1);border-radius:999px;padding:7px 11px;font-size:12px;cursor:pointer}
.related-learning-link:hover{border-color:var(--accent)}

/* steps */
.steps-container{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;overflow:visible}
.step-card{padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;transition:.35s;opacity:1}
.step-card.highlight{border-color:var(--accent);box-shadow:0 0 18px rgba(233,69,96,.25)}
.step-card .step-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.step-number{width:26px;height:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
.step-rule{padding:3px 9px;background:var(--bg3);border-radius:4px;font-size:11px;color:var(--text2);text-transform:capitalize}
.step-description{color:var(--text2);font-size:13px;margin-bottom:10px;line-height:1.5}
.step-math{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.step-math .arrow{color:var(--accent);font-size:20px;flex-shrink:0}
.step-math .before,.step-math .after{font-size:16px}
.step-math .before,.step-math .after{max-width:100%;overflow:auto}

/* graph */
#graphCanvas{width:100%;max-width:886px;background:var(--bg3);border-radius:8px;display:block;margin:0 auto 14px}
#animCanvas{width:100%;max-width:700px;background:var(--bg3);border-radius:8px;display:block;margin:0 auto 14px}
.graph-controls,.animation-controls{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.animation-controls input[type="range"]{width:90px;accent-color:var(--accent)}
.animation-controls select{padding:6px 9px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text1);font-size:12px}
.animation-menu{flex:0 0 auto;min-height:140px;overflow:visible;padding-right:0}
.step-indicator{text-align:center;color:var(--text2);font-size:13px;margin-top:4px}
.anim-related{display:flex;justify-content:center;margin:6px 0 8px}
.anim-related-menu{margin-top:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);padding:10px;max-width:760px}
.anim-related-menu.hidden{display:none}

/* animation stage */
.anim-stage{background:var(--bg3);border-radius:8px;padding:30px 24px;margin-bottom:14px;text-align:center;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative}
.anim-math-display{font-size:24px;transition:opacity .9s,transform .9s;min-height:170px;position:relative;width:100%;display:flex;align-items:center;justify-content:center;overflow:visible}
.anim-math-display:empty{opacity:0}
.anim-math-display.fade-out{opacity:0;transform:translateY(-10px)}
.anim-math-display.fade-in{opacity:1;transform:translateY(0)}
.anim-transition-frame{position:relative;width:100%;min-height:160px;display:flex;align-items:center;justify-content:center}
.anim-compare{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:nowrap;min-height:120px;max-width:100%;overflow:auto;padding-bottom:4px}
.anim-eq{opacity:1;transition:opacity .7s ease,transform .7s ease}
.anim-eq.prev{opacity:.82}
.anim-eq.next{opacity:0;transform:translateY(20px)}
.anim-eq.next.enter{opacity:1;transform:translateY(0)}
.anim-eq{max-width:100%;overflow:auto}
.anim-arrow{font-size:34px;color:var(--accent);font-weight:700;opacity:.55;transform:scale(.9);transition:opacity .7s ease,transform .7s ease}
.anim-arrow.enter{opacity:1;transform:scale(1)}
.anim-motion-canvas{position:absolute;inset:0;pointer-events:none}
.anim-eq.settled{position:relative;left:auto;top:auto;transform:none;opacity:1}
.anim-rule-badge{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.35px;line-height:1;opacity:0;transform:translateY(2px);transition:opacity .25s ease,transform .25s ease,background-color .2s ease,color .2s ease}
.anim-rule-badge.rule{background:var(--accent);color:#ffffff}
.anim-rule-badge.solution{background:#22c55e;color:#062e14}
.anim-rule-badge.visible{opacity:1}
.anim-rule-badge.visible{transform:translateY(0)}
.anim-description{font-size:13px;color:var(--text2);opacity:0;transition:opacity .4s}
.anim-description.visible{opacity:1}
.anim-final-solution{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:140px}
.anim-final-title{font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:#22c55e;font-weight:700}
.anim-steps-panel{margin-top:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);max-height:none;overflow-y:visible}
.anim-step-item{display:flex;flex-direction:column;gap:4px;align-items:flex-start;width:100%;padding:10px 12px;background:transparent;border:0;border-left:3px solid transparent;color:var(--text1);text-align:left;cursor:pointer;border-bottom:1px solid rgba(45,58,89,.5)}
.anim-step-item:last-child{border-bottom:0}
.anim-step-item:hover{background:rgba(255,255,255,.03)}
.anim-step-item.active{border-left-color:var(--accent);background:rgba(233,69,96,.1)}
.anim-step-num{font-size:11px;color:var(--text2);min-width:38px}
.anim-step-text{font-size:12px;line-height:1.35;color:var(--text2)}
.anim-step-detail{margin-top:5px;font-size:12px;color:var(--text1);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.anim-step-detail .math{font-size:12px}
.anim-step-detail .arr{color:var(--accent);font-weight:700}

/* learning tab */
.learning-screen-wrap{height:100%;display:flex;flex-direction:column;padding:18px 20px 20px;overflow-y:auto}
.learning-screen-head{margin-bottom:14px}
.learning-screen-head h2{font-size:24px}
.learning-screen-head p{font-size:14px;color:var(--text2);margin-top:5px}
.learning-mode-tabs{display:flex;gap:8px;margin-bottom:12px}
.learning-mode-btn{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer}
.learning-mode-btn.active{background:rgba(233,69,96,.15);border-color:var(--accent);color:#fff}
.learning-mode-btn[data-learning-mode="capacity"]{display:none}
.learning-mode{display:none}
.learning-mode.active{display:block}
.learning-home{background:linear-gradient(180deg,#101937,#0d142b);border:1px solid var(--border);border-radius:14px;padding:20px;min-height:620px;display:flex;flex-direction:column;gap:16px}
.learning-home-hero{padding:16px 18px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:radial-gradient(120% 140% at 90% 0%, rgba(233,69,96,.22), rgba(233,69,96,.02) 40%),rgba(255,255,255,.02)}
.learning-home-hero h3{font-size:28px;line-height:1.2;margin-bottom:8px}
.learning-home-hero p{font-size:15px;line-height:1.6;color:#d4dae4;max-width:920px}
.learning-home-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px}
.learning-home-card{padding:16px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));color:var(--text1);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:10px;transition:.2s}
.learning-home-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.learning-home-kicker{font-size:11px;letter-spacing:.8px;color:#fca5b2;text-transform:uppercase}
.learning-home-card h4{font-size:18px;line-height:1.25}
.learning-home-card p{font-size:13px;line-height:1.55;color:#c5cdd9;min-height:58px}
.learning-home-card span{font-size:12px;font-weight:700;color:#ffd4db}
.learning-home-stats{display:flex;gap:10px;flex-wrap:wrap}
.learning-home-pill{padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.03);font-size:12px;color:#d7dce8}
.learning-shell{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:16px;min-height:620px}
.pathways-shell{grid-template-columns:minmax(240px,300px) 1fr}
.pathways-shell.collapsed{grid-template-columns:56px 1fr}
.pathways-shell.collapsed .learning-sidebar{display:flex;max-height:88vh}
.pathways-shell.collapsed .learning-topic-list,
.pathways-shell.collapsed .learning-sidebar-head input,
.pathways-shell.collapsed .learning-sidebar-head h3,
.pathways-shell.collapsed #pathwayPickerToggleBtn,
.pathways-shell.collapsed #selectedPathwayLabel,
.pathways-shell.collapsed #pathwayPickerWrap,
.pathways-shell.collapsed .learning-sidebar .learning-sidebar-head + .learning-topic-list,
.pathways-shell.collapsed .learning-sidebar .learning-sidebar-head:nth-of-type(2){display:none}
.pathways-shell.collapsed .learning-sidebar-head{padding:10px;min-height:56px;justify-content:center;align-items:center}
.pathways-shell.collapsed .learning-sidebar-head-row{justify-content:center}
.pathways-shell.collapsed .pathway-collapse-btn{padding:8px 9px;font-size:0}
.pathways-shell.collapsed .pathway-collapse-btn::after{content:"Show";font-size:11px;font-weight:600;letter-spacing:.3px}
.learning-sidebar{background:var(--bg3);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
.learning-sidebar-head{padding:14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:9px}
.learning-sidebar-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.learning-sidebar-head h3{font-size:14px;font-weight:600}
.learning-sidebar-head input{padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text1);font-size:13px}
.learning-view-tabs{display:flex;padding:12px 14px;gap:8px;border-bottom:1px solid var(--border)}
.learning-view-btn{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text2);cursor:pointer;font-size:12px;font-weight:600}
.learning-view-btn.active{border-color:var(--accent);background:rgba(233,69,96,.12);color:#fff}
.learning-category-chips{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--border)}
.learning-chip{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);color:var(--text2);font-size:12px;cursor:pointer}
.learning-chip.active,.learning-chip:hover{border-color:var(--accent);color:var(--text1)}
.learning-chip-note{font-size:12px;color:var(--text2)}
.learning-topic-list{padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.learning-topic-btn{background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text1);text-align:left;padding:10px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.learning-topic-btn:hover,.learning-topic-btn.active{border-color:var(--accent)}
.learning-topic-title{font-size:13px;font-weight:600}
.learning-topic-summary{font-size:12px;color:var(--text2);line-height:1.4}
.learning-topic-progress{display:inline-block;margin-top:6px;padding:3px 8px;font-size:11px;font-weight:600;color:var(--accent);background:rgba(233,69,96,.12);border:1px solid rgba(233,69,96,.3);border-radius:999px;letter-spacing:.2px;align-self:flex-start}

/* Inline confirm popup that appears below a chapter card on click.
   Small, in-flow row (not a modal); flex-children so it doesn't push
   the rest of the chapter list down dramatically. The green check is
   the primary action (load + scroll); the muted-blue Cancel dismisses. */
.chapter-confirm-popup{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.3);opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease;font-size:12px;color:var(--text2)}
.chapter-confirm-popup.open{opacity:1;transform:translateY(0)}
.chapter-confirm-msg{flex:1;line-height:1.3}
.chapter-confirm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.chapter-confirm-yes{width:32px;height:32px;padding:0;border:none;border-radius:50%;background:#22c55e;color:#062e14;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease}
.chapter-confirm-yes:hover{background:#16a34a;transform:scale(1.06)}
.chapter-confirm-no{padding:6px 12px;border:1px solid rgba(102,126,234,.4);border-radius:6px;background:rgba(102,126,234,.18);color:#c5cdd9;font-size:12px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.chapter-confirm-no:hover{background:rgba(102,126,234,.28);border-color:rgba(102,126,234,.6);color:#fff}
.learning-topic-empty{padding:14px;color:var(--text2);font-size:13px}
.learning-detail{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:18px;overflow-y:auto;max-height:72vh;display:flex;flex-direction:column;gap:14px}
.pathways-shell .learning-detail{max-height:90vh}
.learning-detail-head h2{font-size:22px;margin-bottom:8px}
.learning-detail-head p{color:var(--text2);font-size:14px;line-height:1.5}
.learning-block{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;padding:14px}
.learning-block h3{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.learning-block p{line-height:1.55}
.learning-block.collapsible{padding:0;overflow:hidden}
.learning-block-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:transparent;border:0;color:var(--text1);cursor:pointer;text-align:left}
.learning-block-toggle h3{margin:0}
.learning-block-caret{font-size:13px;color:var(--text2);transition:transform .2s}
.learning-block-content{padding:0 14px 14px}
.learning-block.collapsed .learning-block-content{display:none}
.learning-block.collapsed .learning-block-caret{transform:rotate(-90deg)}
.learning-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.learning-mini-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px}
.learning-mini-head{font-size:13px;font-weight:600;margin-bottom:5px}
.learning-mini-body{font-size:12px;color:var(--text2);line-height:1.45}
.learning-example-grid{display:grid;grid-template-columns:1fr;gap:12px}
.learning-example-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}
.learning-example-card h4{font-size:15px}
.learning-example-problem{font-size:13px;color:#d9dde3;padding:8px 10px;background:#101730;border:1px solid var(--border);border-radius:6px;overflow:auto}
.learning-example-steps{display:flex;flex-direction:column;gap:8px}
.learning-example-step{border-left:3px solid #2a3659;padding-left:10px}
.learning-example-step-title{font-size:13px;font-weight:600}
.learning-example-step-explain{font-size:12px;color:var(--text2);margin-top:3px;line-height:1.45}
.learning-example-step-math{font-size:12px;margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}
.learning-empty,.learning-empty-inline,.learning-example-step-empty{color:var(--text2);font-size:13px;line-height:1.5}
.learning-related-row{display:flex;flex-wrap:wrap;gap:8px}
.learning-related-btn{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);color:var(--text1);font-size:12px;cursor:pointer}
.learning-related-btn:hover{border-color:var(--accent)}
.learning-slide-stage{border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#0f1530,#0d1228);padding:26px;display:flex;flex-direction:column}
.learning-stage-top{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.learning-stage-bottom{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.learning-slide-title{font-size:22px;font-weight:700;line-height:1.2;margin-bottom:8px}
.learning-slide-title.compact{font-size:19px;line-height:1.25}
.learning-slide-title.worked{font-size:18px;line-height:1.25}
.learning-slide-sub{font-size:12px;color:var(--text2);margin-bottom:12px;text-transform:uppercase;letter-spacing:.8px}
.learning-slide-visual{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(6,10,24,.30);padding:10px 12px;margin:0 auto 14px;min-height:0;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:14px;width:fit-content;max-width:92%}
/* Loading state with no rendered content yet: collapse to invisible
   so the user doesn't see a brief empty box flash before the image
   pops in. Once renderLearningSlideVisual populates the host (or
   _showSlideVisualUnavailable fills it with a fallback message),
   :empty stops matching and the styled box returns. */
.learning-slide-visual.loading:empty{border:none;background:transparent;padding:0;margin:0}
.learning-slide-visual.loading{opacity:.88}
.learning-slide-visual-img{display:block;width:auto;max-width:100%;height:auto;border-radius:10px;border:1px solid rgba(255,255,255,.06);image-rendering:auto}
.learning-slide-text{display:none}
.learning-slide-text.show{display:block;margin-top:8px}
.learning-block-card{border:none;border-radius:0;background:transparent;padding:8px 0;margin-bottom:10px;font-size:15px;line-height:1.62;color:#f3f6ff}
.learning-block-card:last-child{margin-bottom:0}
.learning-block-card.example,
.learning-block-card.problem,
.learning-block-card.step{border-left:none}
.learning-quiz-gate,.learning-test-panel{margin-top:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg3);padding:12px}
.learning-quiz-title,.learning-test-title{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);margin-bottom:8px}
.learning-question{margin-bottom:10px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.02)}
.learning-question:last-child{margin-bottom:0}
.learning-q-prompt{font-size:13px;font-weight:600;margin-bottom:8px}
.learning-q-choice{display:block;margin:4px 0;font-size:12px;color:var(--text2)}
.learning-q-meta{font-size:12px;color:var(--text2);margin-top:6px}
.glossary-link{color:#7dd3fc;text-decoration:underline;text-decoration-style:dotted;cursor:pointer}
.glossary-chip{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);color:var(--text1);font-size:12px}
.is-hidden{display:none!important}

/* Course picker modal: opens when user taps "Change Course" in the
   pathways sidebar. Sidebar always shows just the active course
   label + chapter list; pathway selection happens here. */
.pathway-picker-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.pathway-picker-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);cursor:pointer}
.pathway-picker-dialog{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:14px;max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pathway-picker-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg3)}
.pathway-picker-head h3{font-size:15px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text2);margin:0}
.pathway-picker-close{background:none;border:none;color:var(--text1);font-size:24px;line-height:1;cursor:pointer;padding:0 6px}
.pathway-picker-close:hover{color:var(--accent)}
.pathway-picker-modal .learning-topic-list{padding:14px 18px 18px;overflow-y:auto;gap:8px}
@media (max-width:768px){
  .pathway-picker-modal{padding:0}
  .pathway-picker-dialog{max-width:100%;max-height:100vh;height:100vh;border-radius:0;border:none}
}

/* The 🎓 floating tutor opener is contextually about solver state.
   On the Learning screen its bottom-right anchor (bottom:120px on
   mobile after round-2) overlaps pathway chapter cards, and tapping
   it just lands the user on the round-2 "Load or solve a problem
   first" guard message. Hide the toggle entirely while the user is
   on Learning. The opener (and the panel + backdrop, if previously
   opened) re-appear automatically when the user switches back to
   the solver screen. !important defeats the tutor-panel.js's
   later-injected stylesheet. */
#learningScreen.active ~ .tutor-toggle{display:none!important}

/* solver sidebar collapse — desktop/tablet only.
   When collapsed: hide the formula library and symbol palette but
   keep a thin 48px gutter strip on the left of the workspace, with
   a small round arrow button anchored inside it that re-opens the
   sidebar on click. The button reuses #toggleSolverSidebarBtn so
   the existing JS click handler still works. The 48px gutter
   prevents the floating-toggle approach's content overlap (the
   toggle would otherwise sit on top of the "Expression Input"
   header). Mobile (<=768px) is intentionally excluded — the mobile
   block at the bottom of this file hides the toggle entirely (the
   sidebar stacks above the workspace on phones, so collapsing has
   no useful effect). */
@media (min-width: 769px){
  #solverAppContainer.solver-collapsed .sidebar{
    width:48px;
    overflow:visible;
  }
  #solverAppContainer.solver-collapsed .formula-library,
  #solverAppContainer.solver-collapsed .symbol-palette,
  #solverAppContainer.solver-collapsed .logo > .logo-icon,
  #solverAppContainer.solver-collapsed .logo > .logo-text{
    display:none;
  }
  #solverAppContainer.solver-collapsed .logo{
    padding:14px 0 0 0;
    height:auto;
    border-bottom:none;
    flex-direction:column;
    align-items:center;
    overflow:visible;
    gap:0;
  }
  #solverAppContainer.solver-collapsed .sidebar-toggle-btn{
    margin:0 auto;
    width:32px;
    height:32px;
    padding:0;
    font-size:0;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--bg3);
    color:var(--text1);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
  }
  #solverAppContainer.solver-collapsed .sidebar-toggle-btn:hover{
    background:var(--bg2);
    border-color:var(--accent);
    transform:scale(1.08);
  }
  #solverAppContainer.solver-collapsed .sidebar-toggle-btn::after{
    content:"›";
    font-size:16px;
    font-weight:700;
    color:var(--text1);
    line-height:1;
    letter-spacing:0;
  }
}

/* Use a single primary scroll container in Pathways mode (outer wrap). */
.pathways-shell .learning-detail{max-height:none;overflow:visible}
.pathways-shell .learning-sidebar{
  max-height:86vh;
  overflow:hidden;
}
.pathways-shell .learning-topic-list{
  overflow-y:auto;
  max-height:none;
  min-height:0;
}

/* pathways notes layout */
.learning-stage-layout{display:flex;gap:0;align-items:flex-start}
.learning-stage-main{flex:1;min-width:0;padding-right:12px}
.slide-notes-resizer{width:8px;cursor:col-resize;background:transparent;position:relative}
.slide-notes-resizer::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.10);border-radius:2px}
.slide-notes-panel{position:relative;width:420px;min-width:300px;max-width:700px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.slide-notes-head{padding:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
.slide-notes-head h3{font-size:14px;font-weight:700}
.slide-notes-body{padding:14px 16px;overflow:auto;max-height:76vh;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.7}
.slide-notes-item{border:none;border-radius:0;background:transparent;padding:0;line-height:1.7}
.slide-notes-item .k{display:inline-block;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px}
.slide-notes-tab{position:absolute;left:-34px;top:50%;transform:translateY(-50%) rotate(-90deg);padding:6px 10px;border:1px solid var(--border);border-bottom:none;background:var(--bg3);color:var(--text1);border-radius:8px 8px 0 0;cursor:pointer}
.learning-stage-layout.notes-collapsed .slide-notes-panel{width:0;min-width:0;border:none;overflow:visible;background:transparent}
.learning-stage-layout.notes-collapsed .slide-notes-head,
.learning-stage-layout.notes-collapsed .slide-notes-body{display:none}
.learning-stage-layout.notes-collapsed .slide-notes-resizer{display:none}
.learning-stage-layout.notes-collapsed .slide-notes-tab{left:-22px}

/* capacity mode */
.capacity-shell{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:16px;min-height:760px}
.capacity-controls label{font-size:13px;color:var(--text2)}
.capacity-input{width:100%;min-height:260px;resize:vertical;background:var(--bg2);color:var(--text1);border:1px solid var(--border);border-radius:8px;padding:10px;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.capacity-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.capacity-preview-pane{display:flex;flex-direction:column;gap:10px}
.capacity-page-text{margin:0;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;user-select:text}
.capacity-report-output{width:100%;min-height:200px;max-height:280px;resize:vertical;background:var(--bg2);color:var(--text1);border:1px solid var(--border);border-radius:8px;padding:10px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;user-select:text}
#capacityPageText,#capacityPageText *{user-select:text}
#capacityPreview,#capacityPreview *{user-select:none}

@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake-input{animation:shake 0.45s ease;border-color:var(--accent)!important}

@media (max-width: 1024px){
  .quick-symbols{min-width:0;width:100%}
  .input-actions-row{flex-direction:column}
  .learning-home-grid{grid-template-columns:1fr}
  .learning-home-hero h3{font-size:23px}
  .learning-shell{grid-template-columns:1fr;min-height:0}
  .learning-sidebar,.learning-detail{max-height:none}
  .learning-stage-layout{flex-direction:column}
  .learning-stage-main{padding-right:0}
  .slide-notes-resizer{display:none}
  .slide-notes-panel{width:100%!important;max-width:none;min-width:0;margin-top:10px}
  .learning-stage-layout.notes-collapsed .slide-notes-panel{display:none}
  .capacity-shell{grid-template-columns:1fr}
  .screen-switcher{position:static}
  .app-screen{height:auto}
}

@media (max-width: 768px){
  /* Natural page scroll; collapse to single column */
  body{overflow:visible}
  .app-container{flex-direction:column}
  .sidebar{width:100%;max-height:280px;position:static;overflow-y:auto;border-right:none;border-bottom:1px solid var(--border);flex-shrink:0}

  /* Compact the sidebar logo block so the formula list shows in the strip */
  .sidebar .logo{padding:10px 14px;gap:8px}
  .sidebar .logo-icon{font-size:1.4rem}
  .sidebar .logo-text{font-size:1.1rem}

  /* Hide the collapse toggle on mobile entirely — the layout already
     stacks, so "collapsing" the sidebar leaves nothing useful and the
     toggle goes with it. Don't apply the desktop solver-collapsed rule
     either; it would orphan the toggle button. */
  #toggleSolverSidebarBtn{display:none}
  #solverAppContainer.solver-collapsed .sidebar{display:block}

  /* Same pattern for the pathways sidebar toggle: in single-column mobile
     the sidebar already stacks above the detail, so "Hide Sidebar" has
     no useful effect and tapping it leaves the layout in a broken
     56px-wide first column. Hide the button and undo any collapsed
     grid that was carried in from a wider viewport. */
  #togglePathwaySidebarBtn{display:none}
  .pathways-shell.collapsed{grid-template-columns:1fr}

  /* Tab strip horizontal scroll */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding:0 12px}

  /* Prevent forced horizontal overflow */
  .demo-picker{min-width:0;flex-wrap:wrap}
  .demo-picker select{min-width:0}

  /* Tap-target audit (≥44px) */
  .tab{min-height:44px;padding:15px 22px;flex-shrink:0}
  .demo-picker .btn{min-height:44px}
  .formula-item{min-height:44px;padding:12px 14px}

  /* Sticky category chips inside the scroll-bound 280px sidebar strip.
     Without this the chips (All / Derivatives / Integrals / Limits /
     Series) scroll out of view as the user browses formulas, forcing a
     scroll-up to switch category. background:var(--bg2) matches the
     sidebar so the formula-list doesn't bleed through; the small
     vertical padding gives the chips visual breathing room when stuck.
     z-index:5 sits well below the floating tutor toggle (z-index:9999)
     and the screen-switcher (z-index:30); chips and tutor are in
     different stacking contexts and at different y-positions, no
     overlap. (Round-3 audit fix.) */
  .formula-library .category-list{
    position:sticky;
    top:0;
    background:var(--bg2);
    padding:8px 0 6px;
    margin-top:-6px;
    margin-bottom:8px;
    z-index:5;
  }

  /* Type scaling (~30% reduction for headings / formula display) */
  .input-header h2{font-size:12px}
  .result-display{font-size:14px}
  .result-display .katex{font-size:17px}
  .anim-math-display{font-size:17px;min-height:120px}
  .anim-stage{min-height:180px;padding:20px 14px}
  .anim-arrow{font-size:24px}
  .anim-compare{flex-wrap:wrap;gap:14px}

  /* Floating AI tutor button sits above the bottom action buttons on
     mobile so it does not overlap the Solve & Animate / Clear pair.
     Round-2 audit raised the offset from 88px to 120px because at 88px
     the button still overlapped Related Topics expand chevrons in
     learning detail views and the Delete button row in the solver
     input section. */
  .tutor-toggle{bottom:120px;right:16px}
}

/* scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text2)}