/* learn.css — page-specific layout only. Colors/fonts/header/buttons all
   come from style.css's shared variables, so both pages stay in sync
   automatically (including light/dark theme). */

.learn-main{flex:1;display:flex;flex-direction:column;min-height:0;}

.learn-nav-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 18px;flex:none;}
.learn-nav-tab{
  padding:12px 16px;font-size:13.5px;font-weight:500;color:var(--muted);
  background:transparent;border:none;border-bottom:3px solid transparent;
  margin-bottom:-1px;cursor:pointer;font-family:var(--font-ui);
}
.learn-nav-tab.active{color:var(--blue);border-bottom-color:var(--blue);}

.learn-body{flex:1;display:flex;min-height:0;}

/* ---------- Sidebar ---------- */
.lesson-sidebar{
  width:260px;flex:none;overflow-y:auto;background:var(--bg);
  border-right:1px solid var(--border);padding:16px 0;
}
.sidebar-category{
  font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--muted);padding:14px 18px 6px;
}
.sidebar-category:first-child{padding-top:4px;}
.sidebar-item{
  display:block;width:100%;text-align:left;background:transparent;border:none;
  padding:9px 18px;font-family:var(--font-ui);font-size:13.5px;color:var(--text);
  cursor:pointer;border-left:3px solid transparent;
}
.sidebar-item:hover{background:var(--surface);}
.sidebar-item.active{
  background:var(--blue-dim);border-left-color:var(--blue);color:var(--blue);font-weight:500;
}

/* ---------- Lesson content ---------- */
.lesson-content{flex:1;overflow-y:auto;padding:28px 36px;max-width:760px;}
.lesson-category-tag{
  display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.04em;color:var(--blue);background:var(--blue-dim);
  padding:3px 10px;border-radius:12px;margin-bottom:10px;
}
.lesson-title{font-size:24px;font-weight:600;margin:0 0 16px;color:var(--text);}
.lesson-concept{
  font-size:14.5px;line-height:1.7;color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:24px;
}
.lesson-section-label{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--muted);margin:28px 0 10px;
}

.code-walkthrough{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.code-line-row{display:flex;border-bottom:1px solid var(--border);}
.code-line-row:last-child{border-bottom:none;}
.code-line-row.blank .line-code{color:var(--muted);}
.line-code{
  flex:0 0 42%;font-family:var(--font-mono);font-size:12.5px;color:var(--text);
  background:var(--surface);padding:10px 14px;white-space:pre-wrap;word-break:break-word;
  border-right:1px solid var(--border);
}
.line-why{flex:1;font-size:13px;line-height:1.55;color:var(--muted);padding:10px 14px;background:var(--bg);}

.lesson-takeaway{
  margin-top:24px;background:var(--green-dim);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;font-size:13.5px;line-height:1.6;color:var(--text);
}
.lesson-takeaway b{color:var(--green);}

.try-in-visualizer{
  margin-top:0;width:100%;justify-content:center;font-size:14.5px;padding:12px 18px;
}

/* ---------- Duolingo-style step-through ---------- */
#stepArea{max-width:560px;}
.step-progress{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:6px;}
.step-progress-fill{height:100%;background:var(--blue);transition:width .3s ease;}
.step-counter{font-size:11.5px;color:var(--muted);margin-bottom:16px;font-family:var(--font-mono);}
.step-card{
  border:1px solid var(--border);border-radius:14px;padding:22px;background:var(--surface);
  animation:stepIn .25s ease;
}
@keyframes stepIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.step-code-line{
  font-family:var(--font-mono);font-size:15px;color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:16px;
  white-space:pre-wrap;word-break:break-word;
}
.step-why{font-size:14px;line-height:1.6;color:var(--text);background:var(--blue-dim);border-radius:8px;padding:14px 16px;animation:stepIn .25s ease;}
.step-controls{display:flex;gap:10px;margin-top:16px;max-width:560px;}
.step-complete{text-align:center;}
.step-complete-badge{font-size:15px;font-weight:600;color:var(--green);margin-bottom:16px;}

/* ---------- Practice tab ---------- */
.practice-grid{display:flex;flex-direction:column;gap:10px;max-width:680px;margin-bottom:28px;}
.practice-card{
  border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;
  background:var(--surface);display:flex;align-items:center;gap:14px;
}
.practice-card-main{flex:1;min-width:0;}
.practice-card-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;}
.practice-card-hint{font-size:12.5px;color:var(--muted);line-height:1.5;}
.practice-tags{display:flex;gap:6px;margin-bottom:6px;}
.practice-tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.03em;}
.practice-tag.diff-easy{background:var(--green-dim);color:var(--green);}
.practice-tag.diff-medium{background:#FDF0D5;color:#B06000;}
html[data-theme="dark"] .practice-tag.diff-medium{background:#3A2E1A;color:var(--yellow);}
.practice-tag.diff-hard{background:var(--red-dim);color:var(--red);}
.practice-card a{
  flex:none;font-size:12px;font-weight:500;color:var(--blue);text-decoration:none;
  border:1px solid var(--border);border-radius:16px;padding:6px 12px;white-space:nowrap;text-align:center;
}
.practice-card a:hover{background:var(--blue-dim);}
.practice-card .btn-vis{font-size:12.5px;padding:7px 14px;white-space:nowrap;}

/* ---------- Mobile ---------- */
@media (max-width: 760px){
  .learn-main{flex-direction:column;}
  .lesson-sidebar{width:auto;height:auto;max-height:38vh;border-right:none;border-bottom:1px solid var(--border);}
  .lesson-content{padding:18px;max-width:none;}
  .lesson-title{font-size:19px;}
  .line-code{flex:none;width:100%;border-right:none;border-bottom:1px solid var(--border);}
  .code-line-row{flex-direction:column;}
}