/* Componentes compartidos por toda página de módulo (progreso, diagrama,
   secciones, quiz + score). Requiere site.css cargado antes (tokens). */

.progress-bar{
  position:sticky; top:0; z-index:5;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:10px 20px;
}
.progress-bar-inner{
  max-width:640px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
}
.progress-track{
  flex:1; height:6px; border-radius:3px;
  background:var(--paper-raise);
  border:1px solid var(--line);
  overflow:hidden;
}
.progress-fill{
  height:100%; width:0%;
  background:var(--rust);
  transition:width .3s ease;
}
.progress-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  color:var(--ink-soft);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

header.hero{ padding:28px 0 24px; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.back-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:.76rem;
  color:var(--ink-soft);
  text-decoration:none;
  display:inline-block;
  margin-bottom:16px;
}
.back-link:hover{ color:var(--rust); }
.hero h1{ font-size:2.1rem; font-weight:600; letter-spacing:-.01em; }
.hero .dek{ margin-top:12px; color:var(--ink-soft); font-size:1rem; max-width:54ch; }
.hero .level-badge{ margin-top:16px; }

/* diagram */
.diagram{
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-raise);
  padding:14px 10px 8px;
}
.diagram svg{ display:block; width:100%; height:auto; }
.diagram-caption{
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
  color:var(--ink-soft);
  text-align:center;
  padding:8px 4px 2px;
}
.diagram-svg-labels{ font-family:'IBM Plex Mono', monospace; }

/* schedule strip */
.schedule{ display:flex; gap:6px; margin-top:22px; flex-wrap:wrap; }
.schedule-item{
  flex:1 1 auto; min-width:64px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  background:var(--paper-raise);
}
.schedule-item .t{
  font-family:'IBM Plex Mono', monospace;
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
  color:var(--rust);
}
.schedule-item .l{ font-size:.72rem; color:var(--ink-soft); margin-top:2px; }

/* modules */
section.module{
  margin-top:40px;
  padding-left:18px;
  border-left:3px solid var(--rust);
}
section.module.alt{ border-left-color:var(--pine); }
section.module.done{ opacity:.72; }

.module-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap;
}
.module-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.module-time{
  font-family:'IBM Plex Mono', monospace;
  font-size:.8rem;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.module h2{ font-size:1.5rem; font-weight:600; margin-top:4px; }
.module p{ margin:14px 0 0; }
.module p.lead{ font-size:1rem; }

.mental-model{
  margin-top:16px;
  padding:12px 14px;
  background:var(--paper-raise);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:.94rem;
}
.mental-model .k{
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-soft);
  display:block;
  margin-bottom:4px;
}

dl.terms{ margin:16px 0 0; }
dl.terms dt{
  font-family:'IBM Plex Mono', monospace;
  font-size:.88rem;
  color:var(--ink);
  font-weight:500;
  margin-top:10px;
}
dl.terms dt:first-child{ margin-top:0; }
dl.terms dd{ margin:2px 0 0; color:var(--ink-soft); font-size:.92rem; }

.video-card{
  margin-top:18px;
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper-raise);
  text-decoration:none;
}
.video-card .play{
  flex:none; width:34px; height:34px;
  border-radius:50%;
  background:var(--rust);
  color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
}
.module.alt .video-card .play{ background:var(--pine); }
.video-card .vtext{ flex:1; }
.video-card .vtitle{ color:var(--ink); font-weight:500; font-size:.94rem; }
.video-card .vmeta{
  color:var(--ink-soft); font-size:.78rem; margin-top:2px;
  font-family:'IBM Plex Mono', monospace;
}
.video-card + .video-card{ margin-top:8px; }

ul.takeaways{ margin:16px 0 0; padding-left:0; list-style:none; }
ul.takeaways li{ position:relative; padding-left:20px; margin-top:8px; font-size:.93rem; }
ul.takeaways li::before{
  content:"→"; position:absolute; left:0; color:var(--rust);
  font-family:'IBM Plex Mono', monospace;
}
.module.alt ul.takeaways li::before{ color:var(--pine); }

.mark-done{
  margin-top:20px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.82rem;
  color:var(--ink-soft);
  cursor:pointer;
  user-select:none;
}
.mark-done input{ width:16px; height:16px; accent-color:var(--rust); }

/* synthesis */
.synthesis{
  margin-top:48px;
  padding:20px;
  border-radius:10px;
  background:var(--paper-raise);
  border:1px solid var(--line);
}
.synthesis h2{ font-size:1.3rem; }
.synthesis p{ margin-top:12px; font-size:.95rem; }

.glossary-wrap{ overflow-x:auto; margin-top:18px; }
table.glossary{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.glossary th, table.glossary td{
  text-align:left; padding:8px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
table.glossary th{
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft);
}
table.glossary td.term{ font-weight:500; white-space:nowrap; }

/* quiz */
.quiz{
  margin-top:48px;
  padding:22px 22px 26px;
  border-radius:10px;
  background:var(--paper-raise);
  border:1px solid var(--line);
}
.quiz h2{ font-size:1.3rem; }
.quiz-note{ margin-top:8px; font-size:.84rem; color:var(--ink-soft); }
.quiz-q{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.quiz-q:first-of-type{ border-top:none; padding-top:0; }
.quiz-q-text{ font-size:.96rem; font-weight:500; color:var(--ink); }
.quiz-options{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.quiz-option{
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:.88rem;
  cursor:pointer;
}
.quiz-option:hover{ border-color:var(--rust); }
.quiz-option input{ margin-top:3px; accent-color:var(--rust); flex:none; }
.quiz-option.correct{ border-color:var(--good); background:var(--good-soft); }
.quiz-option.incorrect{ border-color:var(--bad); background:var(--bad-soft); }
fieldset{ border:none; margin:0; padding:0; }

.quiz-submit-row{ margin-top:22px; }
.quiz-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:.84rem;
  color:var(--paper);
  background:var(--rust);
  border:none;
  border-radius:8px;
  padding:10px 18px;
  cursor:pointer;
}
.quiz-btn:hover{ opacity:.9; }

/* score */
.score-card{
  margin-top:24px;
  padding:20px;
  border-radius:10px;
  background:var(--paper);
  border:1px solid var(--rust);
  text-align:center;
}
.score-card[hidden]{ display:none; }
.score-number{
  font-family:'Fraunces', Georgia, serif;
  font-weight:700;
  font-size:3rem;
  line-height:1;
  color:var(--rust);
  font-variant-numeric:tabular-nums;
}
.score-number .score-max{
  font-family:'IBM Plex Mono', monospace;
  font-size:1.1rem;
  font-weight:400;
  color:var(--ink-soft);
}
.score-level{
  margin-top:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.82rem;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.score-msg{ margin-top:12px; font-size:.9rem; color:var(--ink-soft); max-width:44ch; margin-left:auto; margin-right:auto; }
.score-future{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--line);
  font-size:.78rem;
  color:var(--ink-soft);
}

/* next steps */
.next{ margin-top:36px; padding-top:24px; border-top:1px dashed var(--line); }
.next h2{ font-size:1.1rem; }
.next p.lead{ color:var(--ink-soft); font-size:.88rem; margin-top:8px; }
.next-list{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.next-list a{
  font-size:.88rem; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
  display:flex; justify-content:space-between; gap:10px;
}
.next-list a span.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem; color:var(--ink-soft); flex:none;
}

@media (prefers-reduced-motion: reduce){ .progress-fill{ transition:none; } }