/* =========================================================
   LESSON SUBPAGES: shared theme
   Reuses the color variables and utility classes already
   defined in style.css so lesson pages match css.html exactly.

   Per-level accent: pages can override --lesson-accent and
   --lesson-accent-d (and optionally --lesson-accent-soft) in
   an inline <style> block to retint the progress bar, quiz,
   and next-lesson button for that level. Everything falls
   back to the site's teal when nothing is set, so Level 1
   pages need no changes at all.
   ========================================================= */

/* Learning path: mark a level as available and let its
   lesson rows act as links through to the lesson pages */
.status-available { background:rgba(249,115,22,0.15); color:#F97316; border:1px solid rgba(249,115,22,0.35); }
.status-completed { background:rgba(79,70,229,0.15); color:var(--teal); border:1px solid rgba(79,70,229,0.35); }
/* ---- Per-path card theming ----
   Add class="accent" to each .level-item on an overview page. The
   actual color comes from --lesson-accent (and friends), which each
   page declares once in its own <head> <style> block. This lets every
   path have a single distinct brand color across all its levels,
   driving the border, number circle, lesson-row hover, and badge tint
   together, without hardcoding colors here. */
.level-item.accent { border-color:var(--lesson-accent-border, var(--border)); }
.level-item.accent .level-item-num { background:var(--lesson-accent, var(--teal)); }
.level-item.accent .lesson-row:hover { background:var(--lesson-accent-soft, rgba(79,70,229,0.08)); }
.level-item.accent .status-available,
.level-item.accent .status-completed { background:var(--lesson-accent-soft, rgba(79,70,229,0.08)); color:var(--lesson-accent, var(--teal)); border-color:var(--lesson-accent-border, var(--border)); }

/* Locked always wins over accent theming for the number circle */
.level-item.locked .level-item-num { background:rgba(255,255,255,0.08); color:var(--muted); }
a.lesson-row { text-decoration:none; color:inherit; transition:background 0.15s; cursor:pointer; }
a.lesson-row:hover { background:rgba(79,70,229,0.08); }
.lesson-row-arrow { margin-left:auto; color:var(--teal); font-size:0.85rem; flex-shrink:0; }

/* ---- Page shell ---- */
.lesson-main { max-width:820px; margin:0 auto; padding:110px 24px 80px; }

.lesson-topbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.lesson-back { display:inline-flex; align-items:center; gap:6px; font-size:0.83rem; color:var(--muted); text-decoration:none; }
.lesson-back:hover { color:var(--teal); text-decoration:none; }
.lesson-crumb { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--lesson-accent, var(--teal)); }

/* ---- Progress bar ---- */
.lesson-progress { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin-bottom:32px; }
.lesson-progress-top { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--muted); margin-bottom:10px; }
.lesson-progress-track { height:6px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.lesson-progress-fill { height:100%; width:0%; background:var(--lesson-accent, var(--teal)); border-radius:4px; transition:width 0.3s ease; }

/* ---- Title block ---- */
.lesson-title-block h1 { font-size:clamp(1.8rem,4vw,2.4rem); font-weight:800; color:var(--white); margin-bottom:10px; }
.lesson-title-block p { color:var(--muted); font-size:1rem; margin-bottom:32px; }

/* ---- Article ---- */
.lesson-article { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:36px; margin-bottom:32px; }
.lesson-article h2 { font-size:1.35rem; font-weight:800; color:var(--white); margin:32px 0 14px; }
.lesson-article h2:first-child { margin-top:0; }
.lesson-article h3 { font-size:1.05rem; font-weight:700; color:var(--white); margin:24px 0 10px; }
.lesson-article p { color:var(--muted); margin-bottom:16px; font-size:0.95rem; line-height:1.75; }
.lesson-article ul { margin:0 0 20px 22px; color:var(--muted); font-size:0.95rem; line-height:1.75; }
.lesson-article li { margin-bottom:8px; }
.lesson-article li strong { color:var(--white); }
.lesson-article pre { background:#0a0f1a; border:1px solid var(--border); border-radius:8px; padding:16px; overflow-x:auto; margin:18px 0; font-family:'Fira Code',Consolas,monospace; font-size:0.8rem; line-height:1.7; color:#A5B4FC; }
.lesson-article code { background:#0a0f1a; color:#A5B4FC; padding:2px 6px; border-radius:4px; font-family:'Fira Code',Consolas,monospace; font-size:0.85em; }
.lesson-article pre code { background:none; padding:0; }

/* ---- Callouts ---- */
.lesson-callout { border-radius:0 10px 10px 0; padding:14px 18px; margin:22px 0; font-size:0.88rem; color:var(--muted); border-left:3px solid var(--teal); background:rgba(79,70,229,0.08); }
.lesson-callout.tip { border-left-color:var(--navy); background:rgba(59,130,246,0.08); }
.lesson-callout.good { border-left-color:#10B981; background:rgba(16,185,129,0.1); }
.lesson-callout.warn { border-left-color:var(--pink); background:rgba(249,115,22,0.08); }
.lesson-callout.bad { border-left-color:#DC2626; background:rgba(220,38,38,0.08); }
.lesson-callout strong { color:var(--white); }
.lesson-callout-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; display:block; color:var(--white); }

/* ---- Practice CTA ---- */
.lesson-cta { background:rgba(79,70,229,0.08); border:1px solid rgba(79,70,229,0.25); border-radius:16px; padding:28px 32px; margin-bottom:32px; }
.lesson-cta h2 { font-size:1.3rem; font-weight:800; color:var(--white); margin-bottom:10px; }
.lesson-cta p { color:var(--muted); font-size:0.92rem; margin-bottom:18px; }

/* ---- Quiz ---- */
.lesson-quiz { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:32px; margin-bottom:32px; }
.lesson-quiz h2 { font-size:1.3rem; font-weight:800; color:var(--white); margin-bottom:6px; }
.lesson-quiz > p.quiz-intro { color:var(--muted); font-size:0.88rem; margin-bottom:24px; }
.quiz-q { border-left:3px solid var(--lesson-accent, var(--teal)); background:var(--lesson-accent-soft, rgba(79,70,229,0.06)); border-radius:0 10px 10px 0; padding:18px 20px; margin-bottom:20px; }
.quiz-q p.q-text { font-weight:600; color:var(--white); margin-bottom:12px; font-size:0.92rem; }
.quiz-option { display:flex; align-items:center; gap:10px; padding:8px 0; cursor:pointer; font-size:0.9rem; color:var(--muted); }
.quiz-option input[type="radio"] { accent-color:var(--lesson-accent, var(--teal)); width:16px; height:16px; cursor:pointer; flex-shrink:0; }
.quiz-option:hover { color:var(--white); }
.quiz-submit { width:100%; background:var(--lesson-accent, var(--teal)); border:none; color:#fff; font-weight:700; font-size:0.92rem; padding:14px; border-radius:10px; cursor:pointer; letter-spacing:0.03em; text-transform:uppercase; transition:background 0.2s; }
.quiz-submit:hover { background:var(--lesson-accent-d, var(--teal-d)); }
.quiz-results { margin-top:20px; }
.quiz-result-box { border-radius:10px; padding:16px 20px; border-left:3px solid; }
.quiz-result-box.success { background:rgba(16,185,129,0.1); border-left-color:#10B981; }
.quiz-result-box.retry { background:rgba(249,115,22,0.08); border-left-color:var(--pink); }
.quiz-result-box p.result-title { font-weight:700; margin-bottom:6px; }
.quiz-result-box.success p.result-title { color:#34D399; }
.quiz-result-box.retry p.result-title { color:var(--pink); }
.quiz-result-box p.result-sub { font-size:0.85rem; color:var(--muted); margin-bottom:0; }
.quiz-retry-btn { margin-top:12px; background:transparent; border:1px solid var(--border); color:var(--muted); font-size:0.82rem; font-weight:600; padding:8px 16px; border-radius:8px; cursor:pointer; }
.quiz-retry-btn:hover { border-color:var(--lesson-accent, var(--teal)); color:var(--lesson-accent, var(--teal)); }

/* ---- Level complete banner ---- */
.lesson-complete-banner { background:linear-gradient(135deg,var(--lesson-accent, var(--teal)),var(--lesson-accent-d, var(--teal-d))); border-radius:16px; padding:32px; margin-bottom:32px; text-align:center; color:#fff; }
.lesson-complete-banner h2 { font-size:1.5rem; font-weight:800; margin-bottom:10px; }
.lesson-complete-banner p { margin-bottom:14px; opacity:0.9; }
.lesson-complete-banner a { display:inline-block; background:#fff; color:var(--lesson-accent-d, var(--teal-d)); font-weight:700; padding:12px 26px; border-radius:10px; text-decoration:none; }
.lesson-complete-banner a:hover { background:rgba(255,255,255,0.9); text-decoration:none; }
.lesson-complete-banner .achievement-grid { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; padding:16px; background:rgba(255,255,255,0.15); border-radius:10px; font-size:0.85rem; text-align:left; }
@media(max-width:600px){ .lesson-complete-banner .achievement-grid { grid-template-columns:1fr 1fr; } }

/* ---- Prev / next navigation ---- */
.lesson-nav-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.lesson-nav-link { font-size:0.85rem; font-weight:600; color:var(--lesson-accent, var(--teal)); text-decoration:none; }
.lesson-nav-link:hover { text-decoration:underline; }
.lesson-nav-link.disabled { color:var(--muted); pointer-events:none; }
.lesson-next-btn { background:var(--border); color:var(--muted); font-weight:700; font-size:0.88rem; padding:13px 28px; border-radius:10px; border:none; cursor:not-allowed; text-transform:uppercase; letter-spacing:0.05em; }
.lesson-next-btn.enabled { background:var(--lesson-accent, var(--teal)); color:#fff; cursor:pointer; }
.lesson-next-btn.enabled:hover { background:var(--lesson-accent-d, var(--teal-d)); }

/* ---- Logged-in student badge ---- */
.lesson-logout { position:fixed; top:0; right:0; z-index:20; margin:10px; }
.lesson-logout-inner { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px 14px; box-shadow:0 6px 18px rgba(0,0,0,0.35); }
.lesson-logout-name { font-size:0.75rem; color:var(--muted); }
.lesson-logout-btn { font-size:0.72rem; background:rgba(239,68,68,0.15); color:#F87171; border:1px solid rgba(239,68,68,0.3); padding:5px 10px; border-radius:6px; font-weight:600; cursor:pointer; }
.lesson-logout-btn:hover { background:rgba(239,68,68,0.25); }

.hidden { display:none !important; }

/* ---- Student login modal ---- */
.modal-overlay { position:fixed; inset:0; background:rgba(5,8,16,0.75); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:32px; max-width:420px; width:100%; }
.modal-card h2 { font-size:1.4rem; font-weight:800; color:var(--white); margin-bottom:8px; }
.modal-card > p { color:var(--muted); font-size:0.88rem; margin-bottom:22px; }
.modal-field { margin-bottom:18px; }
.modal-field label { display:block; font-size:0.8rem; font-weight:600; color:var(--white); margin-bottom:6px; }
.modal-field input { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--white); font-size:0.9rem; box-sizing:border-box; }
.modal-field input::placeholder { color:var(--muted); }
.modal-field input:focus { outline:none; border-color:var(--teal); }
.modal-hint { font-size:0.72rem; color:var(--muted); margin-top:6px; }
.modal-btn-primary { width:100%; background:var(--teal); color:#fff; font-weight:700; padding:13px; border:none; border-radius:10px; cursor:pointer; font-size:0.9rem; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.03em; }
.modal-btn-primary:hover { background:var(--teal-d); }
.modal-btn-secondary { width:100%; background:transparent; color:var(--muted); font-weight:600; padding:11px; border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:0.85rem; }
.modal-btn-secondary:hover { border-color:var(--teal); color:var(--teal); }

/* ---- Student bar (shown once logged in) ---- */
.student-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 18px; margin:20px auto 0; max-width:640px; font-size:0.82rem; color:var(--muted); }
.student-bar strong { color:var(--white); }
.student-bar-actions { display:flex; gap:8px; flex-wrap:wrap; }
.student-bar-btn { font-size:0.75rem; font-weight:600; padding:6px 12px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; }
.student-bar-btn:hover { border-color:var(--teal); color:var(--teal); }
.student-bar-btn.primary { background:var(--teal); color:#fff; border-color:var(--teal); }
.student-bar-btn.primary:hover { background:var(--teal-d); }

/* ---- Overall progress card ---- */
.overall-progress-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px 26px; margin:0 auto 32px; max-width:900px; }
.overall-progress-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.overall-progress-top h3 { font-size:1.05rem; font-weight:800; color:var(--white); }
.overall-progress-value { font-size:1.5rem; font-weight:800; color:var(--teal); }
.overall-progress-track { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; margin-bottom:10px; }
.overall-progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--teal),var(--purple)); border-radius:4px; transition:width 0.4s ease; }
.overall-progress-sub { font-size:0.82rem; color:var(--muted); margin:0; }

/* ---- Locked level note ---- */
.level-locked-note { border-radius:0 10px 10px 0; padding:14px 18px; border-left:3px solid var(--border); background:var(--bg3); font-size:0.85rem; color:var(--muted); margin-top:2px; }
.level-locked-note strong { color:var(--white); }
.level-item.locked { cursor:not-allowed; }
.level-item.locked .lesson-row { pointer-events:none; }

.btn-block { display:block; width:100%; text-align:center; box-sizing:border-box; }

@media(max-width:700px){
  .lesson-article, .lesson-cta, .lesson-quiz { padding:24px; }
  .lesson-main { padding:100px 20px 60px; }
}