/* build/section_modes.css
 * Three-position section mode toggle: BASIC / TEACH ME / PRO.
 *
 * BASIC  = strip everything except the real-sized tables, heat map,
 *          and Scarecrow's flags. User just reviews & accepts.
 * TEACH  = guided click-along walkthrough with scrolling explanation.
 * PRO    = full info-overload (formerly COMPLEX). Everything visible,
 *          tuner can edit anything before committing.
 */

/* ---- The 3-position toggle UI ---- */
.mode-switch.mode-switch-3 {
  display: inline-flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.mode-switch.mode-switch-3 .mode-btn {
  padding: 6px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: none;
  border-right: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-switch.mode-switch-3 .mode-btn:last-child { border-right: none; }
.mode-switch.mode-switch-3 .mode-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.mode-switch.mode-switch-3 .mode-btn.active.basic   { background: #3fb950; color: #fff; }
.mode-switch.mode-switch-3 .mode-btn.active.teach   { background: #58a6ff; color: #fff; }
.mode-switch.mode-switch-3 .mode-btn.active.pro     { background: #a371f7; color: #fff; }

/* ---- BASIC MODE: strip distractions ---- */
/* Hide subsections marked as advanced/pro */
body.mode-basic .subsection.pro,
body.mode-basic .subsection[data-pro],
body.mode-basic .pro-only { display: none !important; }

/* Hide explanation-heavy chrome */
body.mode-basic .why-panel,
body.mode-basic .term-popover,
body.mode-basic .term-glossary,
body.mode-basic .copy-complex,
body.mode-basic .help-popover,
body.mode-basic .pedagogy-block,
body.mode-basic .ax-explainer,
body.mode-basic .reasoning-block { display: none !important; }

/* Suppress decorative term-pills (SCARECROW's underlines) — distracting */
body.mode-basic button.term { background: transparent !important; border-bottom: none !important; padding: 0 !important; color: inherit !important; cursor: default; }
body.mode-basic button.term:hover { background: transparent !important; }

/* Show only what tells the user what's going to the ECU */
body.mode-basic .real-table,
body.mode-basic .heat-map,
body.mode-basic .scarecrow-flag,
body.mode-basic .ax-table,
body.mode-basic .tbl,
body.mode-basic .table-wrap,
body.mode-basic .commit-bar,
body.mode-basic .subsection.basic-keep { display: block !important; }

/* In BASIC, the section copy that the user actually reads is the one-liner */
body.mode-basic .copy-simple { display: block; }

/* Tune-ready banner appearing in BASIC */
.mode-basic-banner {
  display: none;
  margin: 14px 0;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(63,185,80,0.12) 0%, rgba(63,185,80,0) 100%);
  border-left: 3px solid #3fb950;
  border-radius: 4px;
  font-size: 12px;
  color: #cfcec9;
}
.mode-basic-banner b { color: #3fb950; }
body.mode-basic .mode-basic-banner { display: block; }

/* ---- TEACH MODE: walkthrough overlay ---- */
.mode-teach-narration {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 18px;
  right: 18px;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, rgba(20,22,27,0.96) 0%, rgba(12,13,16,0.96) 100%);
  border: 1px solid rgba(88, 166, 255, 0.55);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  z-index: 9000;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #e8e6e0;
}
body.mode-teach .mode-teach-narration { display: block; }
.mode-teach-narration .mtn-eyebrow {
  font-size: 9.5px;
  letter-spacing: 1.6px;
  color: #58a6ff;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.mode-teach-narration .mtn-text {
  font-size: 13px;
  line-height: 1.55;
  color: #cfcec9;
  max-height: 90px;
  overflow-y: auto;
}
.mode-teach-narration .mtn-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.mode-teach-narration .mtn-btn {
  padding: 5px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(88, 166, 255, 0.55);
  background: transparent;
  color: #58a6ff;
  transition: all 0.15s;
}
.mode-teach-narration .mtn-btn:hover {
  background: rgba(88, 166, 255, 0.12);
  color: #fff;
}
.mode-teach-narration .mtn-btn.primary {
  background: #58a6ff;
  color: #fff;
}

/* In TEACH mode, highlight whatever element is currently being explained */
body.mode-teach .mtn-spotlight {
  outline: 2px solid #58a6ff;
  outline-offset: 4px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(88,166,255,0.18);
  animation: mtn-pulse 1.6s ease-in-out infinite;
}
@keyframes mtn-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(88,166,255,0.18); }
  50%      { box-shadow: 0 0 0 10px rgba(88,166,255,0.32); }
}

/* ---- PRO MODE: no overrides — current default ---- */