/* Physics Y11 Module 2 — Component Styles */

.hero-breadcrumb {
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 16px;
  font-family: 'DM Sans', sans-serif;
}
.hero-breadcrumb span {
  color: var(--text-light); margin: 0 6px;
}
.misconception-item {
  margin-bottom: 16px;
}
.misconception-item:last-child {
  margin-bottom: 0;
}
.misconception-wrong {
  font-weight: 700; color: #991b1b; font-size: 14px; margin-bottom: 4px;
}
.misconception-wrong::before {
  content: '✗  ';
}
.misconception-fix {
  color: var(--text-muted); font-size: 14px; line-height: 1.6; padding-left: 18px;
}
/* ============================================================
   VECTOR PROTOCOL CHECKLIST
   ============================================================ */
.vp-checklist {
  background: var(--primary-light); border-radius: var(--radius-sm);
  padding: 16px 20px; margin: 16px 0;
  border: 1px solid rgba(29,78,216,0.2);
}
.vp-checklist-label {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--primary);
  margin-bottom: 10px;
}
.vp-item {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px; font-size: 13.5px; color: var(--text-muted);
}
.vp-item:last-child {
  margin-bottom: 0;
}
.vp-box {
  width: 18px; height: 18px; border: 2px solid var(--primary);
  border-radius: 4px; flex-shrink: 0; margin-top: 1px;
  background: white; cursor: pointer; transition: all 0.15s;
  display: grid; place-items: center; font-size: 12px;
}
.vp-box.checked {
  background: var(--primary); color: white;
}
/* ============================================================
   VECTOR PLACEHOLDER
   ============================================================ */
.vector-placeholder {
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 32px 24px; margin: 16px 0;
}
.vp-label {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted);
  margin-bottom: 6px;
}
.vp-note {
  font-size: 12px; font-style: italic; color: var(--text-light); margin-bottom: 14px;
}
.vp-rect {
  width: 100%; height: 80px; background: var(--border);
  border-radius: 4px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); font-size: 12px; font-style: italic;
}
/* ============================================================
   DECISION FLOWCHART
   ============================================================ */
.flowchart-wrap {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin: 20px 0;
}
.flowchart-label {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-light);
  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.flowchart-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.fc-flow {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.fc-node {
  background: white; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 20px; font-family: 'DM Mono', monospace; font-size: 13px;
  color: var(--text-muted); text-align: center; min-width: 260px;
  box-shadow: var(--shadow-sm);
}
.fc-decision {
  background: var(--primary-light); border-color: var(--primary);
  color: var(--text); font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; font-weight: 600; border-radius: 8px;
  padding: 12px 24px; min-width: 300px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.fc-terminal {
  background: var(--success-light-bg); border-color: var(--success);
  color: var(--success); font-weight: 700; border-radius: 8px;
  padding: 10px 20px; font-family: 'DM Sans', sans-serif; font-size: 13.5px;
  text-align: center; min-width: 260px; box-shadow: var(--shadow-sm);
}
.fc-terminal.no {
  background: var(--danger-light); border-color: var(--danger); color: var(--danger);
}
.fc-arrow {
  display: flex; flex-direction: column; align-items: center;
  color: var(--text-light); font-size: 12px; gap: 2px; padding: 4px 0;
}
.fc-arrow::after {
  content: '↓'; font-size: 16px; color: var(--text-light);
}
.fc-arrow.label-yes::before {
  content: 'YES'; font-size: 10px; font-weight: 700; color: var(--success); letter-spacing: 0.5px;
}
.fc-arrow.label-no::before {
  content: 'NO'; font-size: 10px; font-weight: 700; color: var(--danger); letter-spacing: 0.5px;
}
.fc-row {
  display: flex; align-items: center; gap: 16px; width: 100%;
  justify-content: center; margin: 4px 0;
}
.fc-side {
  font-size: 11px; font-weight: 700; color: var(--danger);
  text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--danger-light); padding: 4px 10px; border-radius: 4px;
}
.we-header {
  background: var(--surface-2); padding: 14px 24px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.we-label {
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted);
}
.pt-badge {
  padding: 4px 12px; border-radius: 100px;
  background: var(--cyan-bg); color: var(--cyan);
  font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.we-setup {
  background: var(--primary-light); padding: 18px 24px;
  border-bottom: 1px solid rgba(29,78,216,0.15);
}
.we-setup h4 {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--primary);
  margin-bottom: 10px;
}
.we-setup p {
  color: var(--text); font-size: 14px; margin-bottom: 6px;
}
.we-setup ul {
  list-style: none; padding: 0;
}
.we-setup li {
  font-size: 14px; color: var(--text-muted); padding: 3px 0 3px 14px;
  position: relative;
}
.we-setup li::before {
  content: '→'; position: absolute; left: 0; color: var(--primary);
}
.we-solution {
  background: white; padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.we-solution h4 {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted);
  margin-bottom: 14px;
}
.we-step {
  display: grid; grid-template-columns: 28px 1fr 1fr;
  gap: 12px; align-items: start; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px dashed var(--border);
}
.we-step:last-child {
  border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.we-step-num {
  width: 24px; height: 24px; background: var(--primary);
  border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: white; flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
}
.we-step-eq {
  font-family: 'DM Mono', monospace; font-size: 13.5px;
  color: var(--text); line-height: 1.5;
}
.we-step-why {
  font-size: 13px; color: var(--text-muted); font-style: italic; line-height: 1.5;
}
.we-variation {
  background: var(--accent-light); padding: 18px 24px;
}
.we-variation h4 {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent);
  margin-bottom: 8px;
}
.we-variation p {
  font-size: 14px; color: var(--text-muted); margin: 0;
}
.mc-type-tag {
  display: inline-block; padding: 2px 10px; border-radius: 100px;
  background: var(--cyan-bg); color: var(--cyan);
  font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.vp-answer {
  background: var(--primary-light); border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 8px 0; font-size: 13px; color: var(--primary);
  font-family: 'DM Mono', monospace;
}
.completion-text h4 {
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px;
}
.completion-text p {
  font-size: 13px; color: var(--text-muted); margin: 0;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hero { padding: 32px 24px; }
  .hero h1 { font-size: 28px; }
  .intentions-grid { grid-template-columns: 1fr; }
  .copy-grid { grid-template-columns: 1fr; }
  .card, .activity { padding: 22px; }
  .section-nav { display: none; }
  .page { padding: 24px 14px 60px; }
  .we-step { grid-template-columns: 28px 1fr; }
  .we-step-why { grid-column: 2; }
  .formula-row { grid-template-columns: 1fr; }
}

  /* ── DIAGRAM PLACEHOLDERS ── */
.diagram-placeholder {
  border: 2px dashed #1d4ed8;
    border-radius: 10px;
    background: #eff6ff;
    padding: 32px 24px;
    margin: 16px 0;
    text-align: center;
}
.dp-tool {
  display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.dp-tool.excalidraw {
  background: #dbeafe; color: #1d4ed8;
}
.dp-tool.figma {
  background: #ede9fe; color: #6d28d9;
}
.dp-icon {
  font-family: 'DM Mono', monospace;
    font-size: 22px;
    color: #1d4ed8;
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.dp-label {
  font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #1d4ed8;
    margin-bottom: 10px;
}
.dp-content {
  background: white;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 10px auto;
    max-width: 540px;
    text-align: left;
}
.dp-content p {
  font-size: 12.5px;
    color: #1e293b;
    margin-bottom: 6px;
    line-height: 1.5;
}
.dp-content p:last-child {
  margin-bottom: 0;
}
.dp-content strong {
  color: #0f172a;
}
.dp-file {
  font-size: 12px;
    color: #64748b;
    font-style: italic;
    margin-top: 10px;
}
.dp-file code {
  background: #dbeafe;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: #1d4ed8;
    font-style: normal;
}
/* ── VECTOR PROTOCOL ── */
.vp-checklist {
  background: var(--primary-light); border-radius: var(--radius-sm); padding: 16px 20px; margin: 16px 0; border: 1px solid rgba(29,78,216,0.2);
}
/* ── VECTOR PLACEHOLDER ── */
.vector-placeholder {
  border: 2px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 32px 24px; margin: 16px 0;
}
/* ── FLOWCHART ── */
.flowchart-wrap {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 20px 0;
}
.band-45 {
  background: #fef9c3; color: #854d0e;
}
.vp-checklist {
  background:var(--accent-light);border-radius:var(--radius-sm);padding:16px 20px;margin:16px 0;border:1px solid rgba(29,78,216,0.2);
}
.physics-diagram {
  border-radius:var(--radius);overflow:hidden;margin:20px 0;box-shadow:var(--shadow-sm);
}
.physics-diagram img {
  width:100%;display:block;
}
.practical-box {
  background:var(--surface);border:2px solid var(--primary);border-radius:var(--radius);padding:28px 32px;margin:20px 0;
}
.practical-badge {
  padding:5px 16px;border-radius:100px;background:var(--primary);color:white;font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.6px;display:inline-block;margin-bottom:16px;
}
.practical-box h2 {
  font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;color:var(--text);margin-bottom:16px;
}
.practical-box h3 {
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:var(--primary);margin:20px 0 8px;text-transform:uppercase;letter-spacing:0.5px;
}
.practical-box p,.practical-box li {
  color:var(--text-muted);font-size:14.5px;line-height:1.7;
}
.practical-box ol,.practical-box ul {
  margin-left:20px;margin-bottom:14px;
}
.flowchart-wrap {
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:20px 0;
}
.fc-terminal.alt {
  background:var(--primary-light);border-color:var(--primary);color:var(--primary);
}
.fc-side.yes-s {
  color:var(--success);background:var(--success-light-bg);
}
.fc-side.no-s {
  color:var(--danger);background:var(--danger-light);
}
}

  /* ── DIAGRAM PLACEHOLDERS ── */
  .diagram-placeholder {
  border: 2px dashed #1d4ed8;
    border-radius: 10px;
    background: #eff6ff;
    padding: 32px 24px;
    margin: 16px 0;
    text-align: center;
}
.pill.premium {
  background:rgba(251,191,36,.2);border-color:rgba(251,191,36,.4);color:#fde68a
}
.callout-danger {
  background:var(--danger-light);border-left:3px solid var(--danger);color:var(--text-muted)
}
.callout-block { display: block; }
.callout-block p { margin-top: 8px; margin-bottom: 0; }
/* Graph scaffold */
.graph-scaffold {
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 22px;margin:16px 0;counter-reset:step
}
.graph-scaffold h4 {
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--primary);margin-bottom:12px
}
.graph-step {
  display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;font-size:14px;color:var(--text-muted)
}
.graph-step:last-child {
  margin-bottom:0
}
.graph-step.highlight {
  color:var(--text);font-weight:500
}
.graph-step.highlight .step-num {
  background:var(--accent)
}
/* Diagram card */
.diagram-card {
  background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:20px;margin:16px 0
}
.diagram-card-label {
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin-bottom:12px
}
/* Diagram placeholders */
.diagram-placeholder {
  border:2px dashed #1d4ed8;border-radius:10px;background:#eff6ff;padding:32px 24px;margin:16px 0;text-align:center
}
.callout-violet {
  background:var(--primary-light);border-left:3px solid var(--primary);color:var(--text-muted)
}
.pill.synthesis {
  background:rgba(109,40,217,.3);border-color:rgba(167,139,250,.5);color:#c4b5fd
}
.chain-steps {
  background:var(--surface-2);border-radius:var(--radius);padding:24px 28px;margin:20px 0;border:1px solid var(--border)
}
.chain-label {
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--primary);margin-bottom:16px
}
.chain-step {
  display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)
}
.chain-step:last-child {
  border-bottom:none;margin-bottom:0;padding-bottom:0
}
.chain-num {
  width:28px;height:28px;background:var(--primary);color:white;border-radius:50%;display:grid;place-items:center;font-family:'Outfit',sans-serif;font-size:12px;font-weight:800;flex-shrink:0;margin-top:2px
}
.chain-eq {
  font-family:'DM Mono',monospace;font-size:13.5px;color:var(--text);line-height:1.6;margin-bottom:4px
}
.chain-why {
  font-size:13px;color:var(--text-muted);font-style:italic;line-height:1.5
}
.chain-feeds {
  font-size:12px;color:var(--primary);margin-top:4px;font-weight:600
}
.formula-table {
  background:var(--surface);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);margin:20px 0
}
.formula-table-header {
  background:var(--text);color:white;padding:12px 20px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;display:grid;grid-template-columns:140px 1fr 1fr 1fr;gap:12px
}
.formula-table-row {
  display:grid;grid-template-columns:140px 1fr 1fr 1fr;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);align-items:start
}
.formula-table-row:last-child {
  border-bottom:none
}
.formula-table-row:nth-child(even) {
  background:var(--surface-2)
}
.ft-formula {
  font-family:'DM Mono',monospace;font-size:13px;color:var(--primary);font-weight:500
}
.ft-from {
  font-size:12.5px;color:var(--text-muted)
}
.ft-connects {
  font-size:12.5px;color:var(--success)
}
.ft-trap {
  font-size:12.5px;color:var(--danger)
}
.true-false-grid {
  display:grid;grid-template-columns:1fr;gap:10px;margin:16px 0
}
.tf-item {
  background:var(--surface-2);border:2px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;display:flex;align-items:flex-start;gap:16px
}
.tf-btns {
  display:flex;gap:8px;flex-shrink:0;margin-top:2px
}
.tf-btn {
  padding:5px 14px;border-radius:6px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;cursor:pointer;border:2px solid var(--border);background:var(--surface);transition:all .15s;text-transform:uppercase;letter-spacing:.5px
}
.tf-btn:hover {
  background:var(--primary-light);border-color:var(--primary);color:var(--primary)
}
.tf-btn.selected-true {
  background:var(--success-light-bg);border-color:var(--success);color:var(--success)
}
.tf-btn.selected-false {
  background:var(--danger-light);border-color:var(--danger);color:var(--danger)
}
.tf-statement {
  font-size:14.5px;color:var(--text);line-height:1.6;flex:1
}
.tf-formula-tag {
  display:inline-block;background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:4px;font-family:'DM Mono',monospace;font-size:11px;margin-left:6px
}
.tf-reveal {
  font-size:13px;margin-top:8px;padding:8px 12px;border-radius:6px;display:none
}
.tf-reveal.correct {
  background:var(--success-light-bg);color:var(--success);display:block
}
.tf-reveal.incorrect-reveal {
  background:var(--danger-light);color:var(--danger);display:block
}
.formula-table-header,.formula-table-row {
  grid-template-columns:1fr
}
.pill.consolidation {
  background:rgba(109,40,217,.3);border-color:rgba(167,139,250,.5);color:#c4b5fd
}
/* ── FORMULA SPRINT ── */
.sprint-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:8px
}
.sprint-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)
}
.sprint-front {
  padding:20px 22px;cursor:pointer;user-select:none;transition:background .15s
}
.sprint-front:hover {
  background:var(--surface-2)
}
.sprint-formula {
  font-family:'DM Mono',monospace;font-size:18px;font-weight:500;color:var(--primary);margin-bottom:6px
}
.sprint-prompt {
  font-size:13px;color:var(--text-light);font-style:italic
}
.sprint-reveal {
  display:none;border-top:1px solid var(--border);padding:16px 22px;background:var(--surface-2)
}
.sprint-reveal.open {
  display:block
}
.sprint-row {
  display:flex;gap:8px;margin-bottom:8px;font-size:13.5px;align-items:flex-start
}
.sprint-row:last-child {
  margin-bottom:0
}
.sprint-badge {
  font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;flex-shrink:0;margin-top:2px
}
.sb-use {
  background:#dbeafe;color:#1d4ed8
}
.sb-trap {
  background:#fee2e2;color:#b91c1c
}
.sb-link {
  background:#d1fae5;color:#065f46
}
.sprint-row-text {
  color:var(--text-muted);line-height:1.5
}
/* ── ERROR CLINIC ── */
.error-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm)
}
.error-header {
  display:flex;align-items:center;gap:14px;padding:16px 22px;cursor:pointer;user-select:none;transition:background .15s
}
.error-header:hover {
  background:var(--surface-2)
}
.error-num {
  width:32px;height:32px;background:var(--danger);color:white;border-radius:50%;display:grid;place-items:center;font-family:'Outfit',sans-serif;font-size:13px;font-weight:800;flex-shrink:0
}
.error-title {
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--text);flex:1
}
.error-arrow {
  font-size:16px;color:var(--text-light);transition:transform .2s
}
.error-header.open .error-arrow {
  transform:rotate(180deg)
}
.error-body {
  display:none;border-top:1px solid var(--border);padding:20px 22px
}
.error-body.open {
  display:block
}
.error-student {
  background:var(--danger-light);border-left:3px solid var(--danger);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 18px;margin-bottom:14px;font-size:14px;color:var(--text-muted);line-height:1.7
}
.error-student strong {
  color:var(--danger);display:block;margin-bottom:6px;font-family:'Outfit',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.6px
}
.error-find {
  margin-bottom:12px
}
.error-find label {
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px
}
.error-fix {
  background:var(--success-light-bg);border-left:3px solid var(--success);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 18px;font-size:14px;color:var(--text-muted);line-height:1.7;display:none
}
.error-fix.open {
  display:block
}
.error-fix strong {
  color:var(--success);display:block;margin-bottom:6px;font-family:'Outfit',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.6px
}
.show-fix-btn {
  background:var(--success);color:white;border:none;padding:8px 18px;border-radius:6px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin-top:10px;transition:opacity .15s
}
.show-fix-btn:hover {
  opacity:.85
}
/* ── MIXED PRACTICE ── */
.practice-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:14px;box-shadow:var(--shadow-sm)
}
.practice-q {
  font-weight:600;color:var(--text);font-size:15px;margin-bottom:14px;line-height:1.6
}
.practice-meta {
  display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap
}
.concept-tag {
  padding:3px 10px;border-radius:100px;background:var(--cyan-bg);color:var(--cyan);font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px
}
/* ── TIMED BLOCK ── */
.timed-header {
  background:var(--text);color:white;border-radius:var(--radius) var(--radius) 0 0;padding:20px 28px;display:flex;align-items:center;justify-content:space-between
}
.timed-header h2 {
  font-family:'Outfit',sans-serif;font-size:18px;font-weight:800;color:white;margin:0
}
.timer-display {
  font-family:'DM Mono',monospace;font-size:22px;color:#fde68a;font-weight:500
}
.timer-controls {
  display:flex;gap:8px;margin-top:8px
}
.timer-btn {
  padding:7px 18px;border-radius:6px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border:none;transition:all .15s
}
.timer-start {
  background:#22c55e;color:white
}
.timer-pause {
  background:#f59e0b;color:white
}
.timer-reset {
  background:#475569;color:white
}
.timer-btn:hover {
  opacity:.85
}
.timed-body {
  background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:24px 28px;margin-bottom:24px
}
.timed-q {
  background:var(--surface-2);border-left:4px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 22px;margin-bottom:20px
}
.timed-q h3 {
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;color:var(--text);margin-bottom:4px
}
.timed-q-meta {
  font-size:12px;color:var(--text-light);margin-bottom:12px;font-style:italic
}
.timed-q p {
  font-size:14.5px;color:var(--text-muted);line-height:1.7;margin-bottom:10px
}
.timed-q ol {
  margin-left:20px;color:var(--text-muted);font-size:14.5px;line-height:2
}
.sprint-grid {
  grid-template-columns:1fr
}
.safety-table {
  background:var(--surface-2);border-radius:var(--radius);padding:20px 24px;margin:16px 0;border:1px solid var(--border)
}
.safety-table h4 {
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--success);margin-bottom:14px
}
.safety-row {
  display:grid;grid-template-columns:130px 1fr 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;align-items:start
}
.safety-row:last-child {
  border-bottom:none
}
.safety-device {
  font-weight:700;color:var(--text)
}
.safety-mech {
  color:var(--text-muted)
}
.safety-result {
  color:var(--success);font-weight:600
}
.stage-flow {
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0
}
.stage-box {
  background:var(--surface-2);border-radius:var(--radius);padding:20px;border:1px solid var(--border);position:relative
}
.stage-num {
  position:absolute;top:-12px;left:16px;background:var(--primary);color:white;font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:100px
}
.stage-title {
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;color:var(--text);margin-bottom:8px;margin-top:8px
}
.stage-formula {
  font-family:'DM Mono',monospace;font-size:13px;color:var(--accent);margin-bottom:8px;font-weight:500
}
.stage-desc {
  font-size:13px;color:var(--text-muted);line-height:1.5
}
.stage-arrow {
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-light);align-self:center
}
.callout-graphite {
  background:var(--surface-2);border-left:3px solid var(--primary);color:var(--text-muted)
}
.concept-map {
  background:var(--surface-2);border-radius:var(--radius);padding:24px;margin:20px 0;border:1px solid var(--border)
}
.concept-map h4 {
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:18px
}
.cm-row {
  display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap
}
.cm-formula {
  font-family:'DM Mono',monospace;font-size:14px;font-weight:500;color:var(--accent);background:var(--accent-light);padding:6px 14px;border-radius:6px;white-space:nowrap
}
.cm-arrow {
  color:var(--text-light);font-size:18px;flex-shrink:0
}
.cm-op {
  font-size:13px;color:var(--text-muted);font-style:italic;white-space:nowrap
}
.cm-result {
  font-family:'DM Mono',monospace;font-size:14px;font-weight:500;color:var(--success);background:var(--success-light-bg);padding:6px 14px;border-radius:6px;white-space:nowrap
}
.cm-note {
  font-size:12px;color:var(--text-light);margin-top:4px;margin-left:4px
}
.chain-block {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:16px 0;box-shadow:var(--shadow-sm)
}
.chain-step-label {
  background:var(--surface-2);padding:16px 18px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border)
}
.chain-stage-name {
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--primary);margin-bottom:4px
}
.chain-formula-tag {
  font-family:'DM Mono',monospace;font-size:11px;color:var(--accent);font-weight:500
}
.chain-step-content {
  padding:16px 20px
}
.chain-step-content p {
  font-size:14px;color:var(--text-muted);margin-bottom:4px;line-height:1.6
}
.chain-step-content .calc {
  font-family:'DM Mono',monospace;font-size:13.5px;color:var(--text);background:var(--surface-2);padding:8px 12px;border-radius:6px;margin:6px 0;display:block
}
.chain-step-content .result {
  font-family:'DM Mono',monospace;font-size:14px;color:var(--success);font-weight:600;padding:4px 0
}
.chain-arrow {
  display:flex;align-items:center;justify-content:center;padding:8px;background:var(--surface-2);border-bottom:1px solid var(--border);color:var(--text-light);font-size:20px
}
/* SPRINT */
.sprint-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:8px
}
/* ERROR CLINIC */
.error-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm)
}
/* PRACTICE */
.practice-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:14px;box-shadow:var(--shadow-sm)
}
/* TIMED */
.timed-q {
  background:var(--surface-2);border-left:4px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 22px;margin-bottom:20px
}
.vp {
  background:var(--primary-light);border-radius:var(--radius-sm);padding:12px 16px;margin:6px 0;font-size:13px;color:var(--primary);font-family:'DM Mono',monospace;line-height:1.6
}