/* ============================================================
   Learn app — three views inside one .window-body:
   Learning Home (.lh-*) -> Section (.sv-*) -> Activity Workspace (.aw-*).
   The activity workspace's editor stack (toolbar/explorer/tabs/editor/
   terminal) reuses the same class names across both phases of this app.
============================================================ */
.learn-shell{height:100%;min-height:0;display:flex;flex-direction:column;background:var(--p-surface)}

/* ── Shared: difficulty tag (restrained — a label, not a colorful pill) ── */
.diff-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-muted)}
.diff-tag::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0}
.diff-tag.beginner::before{background:var(--p-green)}
.diff-tag.intermediate::before{background:var(--p-accent)}
.diff-tag.advanced::before{background:var(--p-yellow)}
.diff-tag.challenge::before{background:var(--p-red)}
.diff-tag.reading::before{background:var(--p-faint)}

/* ============================================================
   LEARNING HOME
============================================================ */
.lh-root{flex:1;min-height:0;overflow-y:auto;padding:44px 56px 72px}
.lh-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.lh-header h1{font-size:26px;font-weight:800;letter-spacing:-.025em;color:#151b2c}
.content-surface.on-dark .lh-header h1{color:var(--p-ink)}
.lh-search-wrap{position:relative;width:280px;max-width:100%}
.lh-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:13px;height:13px;pointer-events:none}
.lh-search-icon svg{stroke:var(--p-faint);width:13px;height:13px}
.lh-search{width:100%;padding:9px 12px 9px 34px;border-radius:8px;background:var(--p-surface);border:1px solid var(--p-border);color:var(--p-ink);font-size:12.5px;font-family:var(--font);outline:none;transition:border-color .15s}
.lh-search:focus{border-color:var(--p-accent-line)}
.lh-search::placeholder{color:var(--p-faint)}

.lh-continue{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(155deg,var(--p-surface2),var(--p-surface));
  border:1px solid var(--p-border);border-radius:12px;padding:26px 30px;margin-bottom:52px;
}
.lh-continue-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--p-accent);margin-bottom:8px}
.lh-continue-title{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--p-ink);margin-bottom:6px}
.lh-continue-sub{font-size:12.5px;color:var(--p-muted)}
.lh-continue-progress{display:flex;align-items:center;gap:10px;margin-top:14px}
.lh-continue-bar{width:180px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.lh-continue-bar span{display:block;height:100%;background:var(--p-accent);border-radius:3px}
.lh-continue-progress-text{font-size:11px;color:var(--p-muted);font-family:var(--mono)}
.lh-continue-btn{flex-shrink:0;padding:12px 22px;font-size:13px}

.lh-level{margin-bottom:44px}
.lh-level-hdr{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.lh-level-num{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--p-accent);font-family:var(--mono);flex-shrink:0}
.lh-level-hdr h2{font-size:17px;font-weight:800;letter-spacing:-.02em;color:#151b2c}
.content-surface.on-dark .lh-level-hdr h2{color:var(--p-ink)}
.lh-level-desc{font-size:12.5px;color:var(--p-muted);margin-bottom:16px;max-width:640px;line-height:1.6}
.lh-sections{display:flex;flex-direction:column;border-top:1px solid var(--p-border-soft)}

.lh-section-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  padding:16px 4px;border-bottom:1px solid var(--p-border-soft);background:none;border-left:none;border-right:none;border-top:none;
  text-align:left;cursor:pointer;transition:background .15s;
}
.lh-section-row:hover{background:rgba(255,255,255,.025)}
.lh-section-row-main{min-width:0}
.lh-section-title{font-size:14.5px;font-weight:700;color:#151b2c;letter-spacing:-.01em;margin-bottom:4px}
.content-surface.on-dark .lh-section-title{color:var(--p-ink)}
.lh-section-desc{font-size:12px;color:var(--p-muted);line-height:1.55;max-width:520px}
.lh-section-meta{display:flex;align-items:center;gap:18px;flex-shrink:0}
.lh-section-time{font-size:11.5px;color:var(--p-muted);font-family:var(--mono);white-space:nowrap}
.lh-section-progress{font-size:11px;color:var(--p-faint);font-family:var(--mono);white-space:nowrap}
.lh-section-chevron{width:14px;height:14px;flex-shrink:0}
.lh-section-chevron svg{stroke:var(--p-faint);width:14px;height:14px}

.lh-coming{padding:16px 4px;border-bottom:1px solid var(--p-border-soft)}
.lh-coming-title{font-size:13px;font-weight:700;color:#2a3348;margin-bottom:4px}
.content-surface.on-dark .lh-coming-title{color:var(--p-soft)}
.lh-coming-desc{font-size:12px;color:var(--p-muted);margin-bottom:12px;max-width:520px;line-height:1.55}
.lh-coming-list{display:flex;flex-direction:column;gap:9px}
.lh-coming-item{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--p-muted)}
.lh-coming-item svg{width:13px;height:13px;stroke:var(--p-faint);fill:none;stroke-width:1.8;flex-shrink:0;margin-top:2px}
.lh-coming-item strong{color:#2a3348;font-weight:600}
.content-surface.on-dark .lh-coming-item strong{color:var(--p-soft)}

.lh-row-dim{opacity:.3}

/* ============================================================
   SECTION VIEW
============================================================ */
.sv-root{flex:1;min-height:0;overflow-y:auto;padding:40px 56px 72px}
.sv-back{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--p-muted);margin-bottom:24px;background:none;border:none}
.sv-back:hover{color:#151b2c}
.content-surface.on-dark .sv-back:hover{color:var(--p-ink)}
.sv-back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.sv-crumb{font-size:12px;color:var(--p-muted);margin-bottom:10px}
.sv-header h1{font-size:26px;font-weight:800;letter-spacing:-.025em;color:#151b2c;margin-bottom:12px}
.content-surface.on-dark .sv-header h1{color:var(--p-ink)}
.sv-header-meta{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.sv-desc{font-size:13.5px;color:var(--p-muted);line-height:1.7;max-width:640px;margin-bottom:36px}

.sv-activities{display:flex;flex-direction:column;border-top:1px solid var(--p-border-soft)}
.sv-activity-row{
  display:flex;align-items:center;gap:18px;width:100%;padding:18px 4px;
  border-bottom:1px solid var(--p-border-soft);background:none;border-left:none;border-right:none;border-top:none;
  text-align:left;cursor:pointer;transition:background .15s;
}
.sv-activity-row:hover{background:rgba(255,255,255,.025)}
.sv-activity-num{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--p-faint);width:24px;flex-shrink:0}
.sv-activity-main{flex:1;min-width:0}
.sv-activity-title{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:#151b2c;letter-spacing:-.01em;margin-bottom:4px}
.content-surface.on-dark .sv-activity-title{color:var(--p-ink)}
.sv-activity-title .done-check{width:15px;height:15px;border-radius:50%;background:var(--p-green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sv-activity-title .done-check svg{width:9px;height:9px;stroke:#06170e;stroke-width:2.6}
.sv-activity-summary{font-size:12px;color:var(--p-muted);line-height:1.5}
.sv-activity-meta{display:flex;align-items:center;gap:16px;flex-shrink:0}
.sv-activity-time{font-size:11.5px;color:var(--p-muted);font-family:var(--mono);white-space:nowrap}
.sv-activity-chevron svg{stroke:var(--p-faint);width:14px;height:14px}

/* ============================================================
   ACTIVITY WORKSPACE
============================================================ */
.aw-root{flex:1;min-height:0;display:flex;flex-direction:column}
.aw-header{flex-shrink:0;height:48px;display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--p-surface2);border-bottom:1px solid var(--p-border)}
.aw-back{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--p-muted);background:none;border:none;flex-shrink:0}
.aw-back:hover{color:var(--p-ink)}
.aw-back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.aw-crumb{font-size:12.5px;color:var(--p-soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-crumb strong{color:var(--p-ink);font-weight:700}
.aw-header-spacer{flex:1}
.aw-step-indicator{font-size:11px;color:var(--p-muted);font-family:var(--mono);white-space:nowrap;flex-shrink:0}
.aw-header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.aw-focus-btn{font-size:11px;padding:6px 11px}
.aw-focus-btn.active{background:var(--p-accent-dim);border-color:var(--p-accent-line);color:#eaf2ff}

.aw-body{flex:1;min-height:0;display:flex}
.aw-left{width:40%;min-width:320px;max-width:78%;display:flex;flex-direction:column;min-height:0;background:var(--p-surface);transition:width .18s}
.aw-body.reading-mode .aw-left{width:100%!important;max-width:100%}
.aw-resizer{width:6px;flex-shrink:0;cursor:col-resize;background:var(--p-border-soft)}
.aw-resizer:hover,.aw-resizer:active{background:var(--p-accent-line)}
.aw-right{flex:1;min-width:340px;display:flex;flex-direction:column;min-height:0;background:var(--p-bg2)}

.aw-notebook{flex:1;min-width:0;overflow-y:auto;padding:36px 44px 30px}
.aw-body.reading-mode .aw-notebook > *{max-width:720px;margin-left:auto;margin-right:auto}
.aw-body.reading-mode .step-nav{max-width:808px;margin:0 auto}
.step-head{margin-bottom:6px}
.step-title{font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#151b2c;margin-bottom:8px}
.content-surface.on-dark .step-title{color:var(--p-ink)}
.step-sub{font-size:11.5px;color:#8a93a8;margin-bottom:20px}
.content-surface.on-dark .step-sub{color:var(--p-muted)}

.step-nav{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 44px;border-top:1px solid rgba(0,0,0,.08);background:#f0f2f7}
.step-nav .p-btn{color:#1a1f2e;border-color:rgba(0,0,0,.14)}
.step-nav .p-btn:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.22)}
.step-nav .p-btn.primary{color:#fff}
.step-nav .p-btn.ghost{background:none}
.content-surface.on-dark ~ .step-nav{background:var(--p-surface2);border-color:var(--p-border)}
.content-surface.on-dark ~ .step-nav .p-btn{color:var(--p-ink);border-color:var(--p-border)}
.content-surface.on-dark ~ .step-nav .p-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
.step-nav .p-btn{max-width:42%}
.step-nav .p-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step-dots{display:flex;align-items:center;gap:6px}
.step-dot{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.15)}
.step-dot.active{background:var(--p-accent);width:16px;border-radius:3px}
.step-dot.done{background:var(--p-green)}

.aw-complete{padding:56px 44px;text-align:center;max-width:480px;margin:0 auto}
.aw-complete-icon{width:52px;height:52px;border-radius:50%;background:rgba(47,191,116,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.aw-complete-icon svg{width:24px;height:24px;stroke:var(--p-green);stroke-width:2.2}
.aw-complete h2{font-size:20px;font-weight:800;color:#151b2c;margin-bottom:10px}
.content-surface.on-dark .aw-complete h2{color:var(--p-ink)}
.aw-complete p{font-size:13.5px;color:#4a5578;line-height:1.7;margin-bottom:20px}
.content-surface.on-dark .aw-complete p{color:var(--p-soft)}
.aw-complete-concepts{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:28px}
.aw-complete-chip{font-size:11px;font-weight:600;color:var(--p-accent);background:var(--p-accent-dim);border:1px solid var(--p-accent-line);padding:4px 11px;border-radius:20px}

/* ── Right: toolbar (shared with editor stack) ──────────── */
.learn-toolbar{flex-shrink:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--p-surface2);border-bottom:1px solid var(--p-border);gap:10px}
.wt-left{display:flex;align-items:center;gap:6px}
.wt-right{display:flex;align-items:center;gap:12px;min-width:0}
.wt-divider{width:1px;height:20px;background:var(--p-border);margin:0 2px}
.wt-file-status{font-size:11px;font-family:var(--mono);color:var(--p-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.wt-sim{cursor:not-allowed}
.wt-sim:hover{background:none;border-color:rgba(255,255,255,.09)}

/* ── Right: file explorer + editor + terminal ───────────── */
.learn-editor-area{flex:1;min-height:0;display:flex}
.learn-explorer{width:210px;flex-shrink:0;border-right:1px solid var(--p-border);background:var(--p-surface2);padding:8px 0}
.fx-row{width:100%;display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:12px;color:var(--p-soft);background:none;border:none;text-align:left;transition:background .12s,color .12s;white-space:nowrap}
.fx-row:hover{background:rgba(255,255,255,.05)}
.fx-file.active{background:var(--p-accent-dim);color:#eaf2ff}
.fx-caret{width:11px;height:11px;flex-shrink:0;transition:transform .15s;display:flex}
.fx-caret svg{stroke:var(--p-faint)}
.fx-caret.open{transform:rotate(90deg)}
.fx-icon{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fx-icon svg{width:13px;height:13px;stroke:var(--p-muted);fill:none;stroke-width:1.6}
.fx-icon-file{width:auto;min-width:14px}
.fx-ext{font-family:var(--mono);font-size:8px;font-weight:800;color:#6f9aff;background:rgba(61,139,255,.14);border-radius:3px;padding:1px 3px;line-height:1.4}
.fx-name{overflow:hidden;text-overflow:ellipsis}
.fx-dot{width:6px;height:6px;border-radius:50%;background:var(--p-accent);margin-left:4px;flex-shrink:0}

.learn-editor-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.learn-tabs{flex-shrink:0;display:flex;align-items:stretch;overflow-x:auto;background:var(--p-surface2);border-bottom:1px solid var(--p-border)}
.ed-tab{display:flex;align-items:center;gap:7px;padding:0 8px 0 12px;height:36px;font-size:12px;color:var(--p-muted);border-right:1px solid var(--p-border);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;flex-shrink:0}
.ed-tab:hover{color:var(--p-soft)}
.ed-tab.active{background:var(--p-bg2);color:var(--p-ink);box-shadow:inset 0 -2px 0 var(--p-accent)}
.ed-tab-name{font-family:var(--mono);font-size:11.5px}
.ed-tab-dot{width:6px;height:6px;border-radius:50%;background:var(--p-accent);flex-shrink:0}
.ed-tab-close{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ed-tab-close svg{width:10px;height:10px;stroke:currentColor}
.ed-tab-close:hover{background:rgba(255,255,255,.12)}

.learn-editor-surface{flex:1;min-height:0;position:relative;background:#1e1e1e}
.editor-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--p-muted);font-size:12.5px;font-family:var(--mono)}
.fallback-editor{width:100%;height:100%;border:none;resize:none;outline:none;background:#1e1e1e;color:#d6deeb;font-family:var(--mono);font-size:13px;line-height:1.7;padding:14px 16px;tab-size:4}

.learn-terminal{flex-shrink:0;height:230px;display:flex;flex-direction:column;border-top:1px solid var(--p-border);background:#0e1015;transition:height .18s}
.learn-terminal.collapsed{height:37px}
.term-bar{flex-shrink:0;height:36px;display:flex;align-items:center;gap:4px;padding:0 8px 0 4px;background:var(--p-surface2);border-bottom:1px solid var(--p-border)}
.term-tabs{display:flex;align-items:center;height:100%}
.term-tab{display:flex;align-items:center;gap:6px;height:100%;padding:0 10px;font-size:11px;font-weight:600;color:var(--p-muted);background:none;border:none;border-bottom:2px solid transparent}
.term-tab svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}
.term-tab.active{color:var(--p-ink);border-bottom-color:var(--p-accent)}
.term-tab-count{font-family:var(--mono);font-size:10px;color:var(--p-red)}
.term-bar-spacer{flex:1}
.term-clear{font-size:11px;padding:4px 9px;height:24px}
.term-collapse{width:24px;height:24px}
.learn-terminal.collapsed .term-body{display:none}
.term-body{flex:1;min-height:0;overflow-y:auto;padding:10px 14px;font-family:var(--mono);font-size:12px;line-height:1.85}
.term-line{color:#9fb0c9;white-space:pre-wrap;word-break:break-word}
.term-line.term-cmd{color:#7dffbd}
.term-line.term-ok{color:#4fd68e}
.term-line.term-warn{color:var(--p-yellow)}
.term-line.term-accent{color:#7fb2ff}

@media(max-width:900px){
  .lh-root,.sv-root{padding:28px 24px 56px}
  .aw-body{flex-direction:column}
  .aw-left,.aw-right{width:100%!important;max-width:100%}
  .aw-resizer{display:none}
  .aw-left{height:46%}
  .aw-right{height:54%}
  .learn-explorer{width:160px}
  .aw-header-actions{display:none}
  .aw-notebook{padding:24px 22px}
  .step-nav{padding:14px 22px}
}