/* =============================================================
   FULL STACK SCHOOL — COMPLETE LESSON STYLESHEET
   Applies to standard lessons and System Design (.sd-*) lessons.
   Load after style.css. Version: 2
   ============================================================= */

/* Standard lesson typography */
.lesson-header{margin-bottom:30px}
.lesson-label{color:#61c4ed;font-size:13px;font-weight:700;letter-spacing:1px}
.lesson-description{color:#a9bdd4;line-height:1.8}
.lesson-content{line-height:1.85}
.lesson-content h2{margin-top:42px}
.lesson-content h3{margin-top:25px}
.lesson-content li{margin-bottom:10px}
.lesson-content strong{color:#e8f3ff}
.lesson-content pre{background:#091a2c;border:1px solid #244565;border-radius:7px;padding:18px;overflow-x:auto;color:#d6e8fa;line-height:1.6}
.lesson-content code{font-family:Consolas,Monaco,monospace}

/* Concept boxes */
.concept-box{background:#102b48;border-left:4px solid #61c4ed;padding:17px 20px;margin:22px 0;border-radius:5px}
.concept-box strong{color:#61c4ed}

/* Standard interactive quiz */
.quiz-section{margin-top:45px;padding-top:25px;border-top:1px solid #244565}
.quiz-intro{color:#a9bdd4;line-height:1.7}
.quiz-question{background:#102b48;border:1px solid #244565;border-radius:9px;padding:20px;margin:22px 0}
.question-number{color:#61c4ed;font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:8px}
.question-text{color:#edf5ff;font-weight:700;margin-bottom:16px;line-height:1.6}
.quiz-option{display:block;width:100%;text-align:left;background:#091a2c;color:#d6e8fa;border:1px solid #35516e;border-radius:6px;padding:12px 14px;margin:9px 0;cursor:pointer;font-size:14px;line-height:1.5;transition:background .2s,border-color .2s}
.quiz-option:hover:not(:disabled){border-color:#61c4ed;background:#173b5b}
.quiz-option:disabled{cursor:default;opacity:1}
.quiz-option.correct{background:#164b3d;border:1px solid #45bd91;color:#b8f3d7}
.quiz-option.incorrect{background:#5a252b;border:1px solid #ef6b73;color:#ffd0d2}
.answer-feedback{display:none;margin-top:14px;padding:12px 14px;border-radius:6px;line-height:1.6;font-size:14px}
.answer-feedback.show{display:block}
.answer-feedback.correct-feedback{background:#164b3d;color:#b8f3d7}
.answer-feedback.incorrect-feedback{background:#5a252b;color:#ffd0d2}
.quiz-summary{background:#102b48;border:1px solid #244565;border-radius:8px;padding:18px;margin-top:25px;display:none;line-height:1.7}
.quiz-summary.show{display:block}
.quiz-reset{background:#173b5b;color:#e5edf7;border:1px solid #35516e;border-radius:5px;padding:10px 16px;cursor:pointer;margin-top:12px}
.quiz-reset:hover{background:#245477}
.quiz-retry{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding:10px 22px;background:transparent;color:#60a5fa;border:1px solid #3b82f6;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}
.quiz-retry::before{content:"↻";font-size:18px}
.quiz-retry:hover{background:#1e3a5f;color:#fff;border-color:#60a5fa}
.quiz-retry:active{transform:scale(.97)}

/* Navigation */
.lesson-navigation{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:45px 0 40px;padding-top:25px;border-top:1px solid #244565}
.lesson-nav-button{display:inline-block;text-decoration:none;padding:12px 20px;border-radius:6px;font-weight:700;font-size:14px;text-align:center}
.previous-button{background:#102b48;color:#a9bdd4;border:1px solid #35516e}
.next-button{background:#17618b;color:#fff;border:1px solid #2586b7}
.next-button:hover{background:#2179a8}
.disabled-button{opacity:.4;cursor:not-allowed;pointer-events:none}

/* Course progress */
.progress-card{background:#102b48;border:1px solid #244565;border-radius:9px;padding:18px;margin:35px 0 45px}
.progress-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.progress-title{color:#e5edf7;font-weight:700}
.progress-percentage{color:#61c4ed;font-weight:700}
.progress-track{width:100%;height:10px;background:#071728;border-radius:20px;overflow:hidden}
.progress-fill{height:100%;width:0;background:#45bd91;border-radius:20px;transition:width .4s ease}
.progress-caption{color:#a9bdd4;font-size:12px;margin-top:9px}

/* Course test */
.course-test-link{display:block;background:linear-gradient(135deg,#624a12,#9a741e);border:1px solid #e5bd55;border-radius:9px;padding:19px 22px;margin:30px 0;color:#fff4cf;text-decoration:none;font-weight:700;font-size:16px;text-align:center;transition:all .2s ease}
.course-test-link:hover{background:linear-gradient(135deg,#806019,#b18a2c);transform:translateY(-2px)}
.course-test-link span{display:block;font-size:13px;font-weight:400;margin-top:6px;color:#ffebad}

/* =============================================================
   SYSTEM DESIGN LESSONS — shared layout and components
   These rules also support lessons without their inline styles.
   ============================================================= */
:root{--sd-ink:#e8f0ff;--sd-muted:#a7bad7;--sd-line:rgba(146,180,230,.19);--sd-accent:#69ddc2;--sd-gold:#f2c778}
body:has(.sd-shell){background:#071427;color:var(--sd-ink)}
main.sd-shell{display:block;box-sizing:border-box;width:100%;max-width:1100px;margin:0 auto;padding:32px 24px 100px}
.sd-shell *{box-sizing:border-box}
.sd-back{display:inline-flex;color:#9db8da;text-decoration:none;font-size:.9rem;margin-bottom:24px}
.sd-back:hover{color:#fff}

/* Important: global style.css may style ALL <header> tags as a narrow
   flex/grid site navbar. Reset ONLY the lesson hero, not site navigation. */
main.sd-shell > header.sd-hero{
  display:block!important;position:relative!important;float:none!important;
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;
  min-width:0!important;height:auto!important;min-height:0!important;
  margin:0!important;padding:clamp(30px,5vw,68px)!important;
  flex:none!important;flex-direction:initial!important;align-items:initial!important;
  justify-content:initial!important;grid-template-columns:none!important;
  text-align:left!important;white-space:normal!important;writing-mode:horizontal-tb!important;
  border:1px solid var(--sd-line);border-radius:26px;
  background:radial-gradient(circle at 85% 15%,rgba(50,120,184,.25),transparent 42%),linear-gradient(135deg,#102b4d,#0b1d37 72%);
  overflow:hidden;
}
main.sd-shell > header.sd-hero > .sd-eyebrow,
main.sd-shell > header.sd-hero > h1,
main.sd-shell > header.sd-hero > .sd-deck{
  display:block!important;position:static!important;float:none!important;
  flex:none!important;min-width:0!important;width:auto!important;
  max-width:100%!important;transform:none!important;
  white-space:normal!important;writing-mode:horizontal-tb!important;
  text-align:left!important;
}
.sd-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sd-accent)}
main.sd-shell > header.sd-hero > h1{
  font-size:clamp(2.1rem,5vw,4rem)!important;line-height:1.12!important;
  letter-spacing:-.035em!important;margin:18px 0 22px!important;
  padding:0!important;color:#fff!important;overflow-wrap:break-word!important;
  word-break:normal!important;
}
main.sd-shell > header.sd-hero > .sd-deck{max-width:720px!important;margin:0!important;color:#c4d4ed;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.65}
main.sd-shell > header.sd-hero > .sd-meta{
  display:flex!important;position:static!important;float:none!important;
  flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;
  justify-content:flex-start!important;gap:12px!important;width:100%!important;
  max-width:100%!important;height:auto!important;margin-top:28px!important;
  transform:none!important;
}
main.sd-shell > header.sd-hero > .sd-meta > span{
  display:inline-flex!important;width:auto!important;max-width:100%!important;
  white-space:normal!important;border:1px solid rgba(160,190,235,.28);
  border-radius:30px;padding:8px 14px;color:#d4e2f8;font-size:.82rem;
}

.sd-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:42px;margin-top:42px;align-items:start}
.sd-content{min-width:0}
.sd-content>h1{display:none}
.sd-content>p:first-of-type{font-size:1.12rem;color:#dce8f9}
.sd-content p,.sd-content li{color:#c1d0e7;line-height:1.85;font-size:1rem}
.sd-content p{margin:0 0 20px}
.sd-content h2{font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.25;color:#fff;letter-spacing:-.025em;margin:70px 0 22px;padding-top:16px;border-top:1px solid var(--sd-line)}
.sd-content h3{font-size:1.25rem;color:#eaf4ff;margin:34px 0 13px}
.sd-content h4.vocab-heading{color:var(--sd-accent);font-size:.88rem;letter-spacing:.07em;text-transform:uppercase;margin:30px 0 10px}
.sd-content h4.vocab-heading+p{background:#0d233d;border:1px solid var(--sd-line);border-left:3px solid #4dcdb4;border-radius:0 14px 14px 0;padding:18px 22px}
.sd-content h3.special-heading{color:var(--sd-gold);font-size:.88rem;text-transform:uppercase;letter-spacing:.08em;background:#132c47;border:1px solid var(--sd-line);border-radius:14px 14px 0 0;padding:18px 22px;margin-bottom:0}
.sd-content h3.special-heading+p{padding:20px 22px;background:#0e233c;border:1px solid var(--sd-line);border-top:0;border-radius:0 0 14px 14px}
.sd-content h3.special-heading~p em{color:#e5f1ff}
.sd-content strong{color:#f0f6ff}
.sd-content ul,.sd-content ol{padding-left:25px;margin:14px 0 26px}
.sd-content li{padding-left:4px;margin-bottom:10px}
.lesson-table{width:100%;border-collapse:collapse;margin:24px 0 32px}
.lesson-table th,.lesson-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--sd-line);color:#c5d6ec}
.lesson-table th{background:#173251;color:#fff}
.lesson-table tr:nth-child(even){background:#0d2239}
.source-note{font-size:.82rem!important;color:#8fa8c8!important}
.sd-toc{position:sticky;top:25px;padding:20px;background:#0d2138;border:1px solid var(--sd-line);border-radius:18px}
.sd-toc strong{display:block;font-size:.75rem;letter-spacing:.12em;color:var(--sd-accent);margin-bottom:16px}
.sd-toc a{display:block;color:#b6cbe4;text-decoration:none;font-size:.83rem;line-height:1.5;padding:8px 0;border-bottom:1px solid rgba(146,180,230,.1)}
.sd-toc a:hover{color:#fff}
.sd-assessment,.sd-next,.sd-progress{margin-top:55px;padding:28px;border-radius:20px;border:1px solid var(--sd-line);background:#0d233c}
.sd-assessment h2,.sd-next h2{margin:0 0 12px;color:#fff}
.sd-assessment>p,.sd-next p,.sd-progress p{color:var(--sd-muted)}
.sd-question{border:0;border-top:1px solid var(--sd-line);margin:22px 0 0;padding:24px 0 0;min-width:0}
.sd-question legend{color:#fff;font-weight:700;line-height:1.5;padding-top:20px}
.q-index{color:var(--sd-accent);margin-right:10px}
.sd-option{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;margin:9px 0;border:1px solid var(--sd-line);border-radius:10px;color:#d0def0;cursor:pointer}
.sd-option:has(input:checked){border-color:#69ddc2;background:#153e4c}
.sd-option input{margin-top:5px;accent-color:#69ddc2}
.sd-option.correct{border-color:#69ddc2}
.sd-option.incorrect{border-color:#f09a9a}
.sd-explanation{color:#9ee2d1!important;font-size:.9rem!important}
.sd-button{border:0;background:#69ddc2;color:#062b2c;padding:12px 22px;border-radius:9px;font-weight:800;cursor:pointer;margin:18px 10px 0 0}
.sd-button.secondary{background:#1c3955;color:#fff;border:1px solid var(--sd-line)}
/* System Design quiz summary is always visible when populated. */
.sd-assessment .quiz-summary{display:block;margin-top:15px;padding:0;border:0;background:transparent;font-weight:700;color:#b9f5e7}
.sd-next a,.sd-nav a{color:#9cebd9;text-decoration:none}
.sd-nav{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:25px}
.sd-progress .progress-track{height:10px;background:#1d3a57;border-radius:10px;overflow:hidden;margin-top:14px}
.sd-progress .progress-fill{height:100%;background:linear-gradient(90deg,#42bda6,#8ce6cf);width:0}
.sd-progress #progressPercentage{color:#9cebd9;font-weight:800}

/* Responsive */
@media(max-width:850px){
 .sd-layout{grid-template-columns:1fr}
 .sd-toc{position:static;order:-1}
 main.sd-shell{padding:18px 16px 60px}
 main.sd-shell > header.sd-hero{border-radius:18px}
}
@media(max-width:600px){
 .lesson-navigation{flex-direction:column}
 .lesson-nav-button{width:100%}
 .progress-card{padding:14px}
 .quiz-question{padding:15px}
 main.sd-shell > header.sd-hero{padding:24px!important}
 main.sd-shell > header.sd-hero > h1{font-size:clamp(2rem,9vw,3rem)!important}
 .sd-assessment,.sd-next,.sd-progress{padding:18px}
 .lesson-table{display:block;overflow-x:auto}
}