.page-eeg_lead_simulator {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  padding: 1.5rem 20px 8rem !important;
  /* Added 1.5rem top padding */
  /* Massive bottom padding to clear fixed footer */
}

.page-eeg_lead_simulator .page-title {
  text-align: center;
  font-size: 1.8rem;
  /* Reduced from 2.2rem */
  margin: 1.5rem 0 1rem 0 !important;
  /* Restored top margin */
  color: var(--primary-color);
  position: relative;
  padding-bottom: 6px;
  /* Reduced from 8px */
  font-weight: 700;
  letter-spacing: -0.5px;
}

.page-title:after {
  content: '';
  position: absolute;
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

/* Introduction Section */
.page-eeg_lead_simulator .simulator-intro {
  max-width: 1000px;
  /* Constrain more */
  margin: 0 auto 0.75rem !important;
  /* Reduced from 1rem */
}

.page-eeg_lead_simulator .intro-card {
  background: white;
  color: var(--text-primary);
  padding: 0.75rem 1.5rem !important;
  /* Reduced from 1rem 2rem */
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
}

.intro-card i {
  font-size: 1.8rem;
  /* Reduced from 2.5rem */
  margin-bottom: 0.5rem;
  /* Reduced from 1rem */
  color: var(--accent-color);
}

.intro-card h3 {
  margin: 0 0 0.35rem 0;
  /* Reduced from 0.75rem */
  font-size: 1.25rem;
  /* Reduced from 1.5rem */
  color: var(--text-primary);
}

.intro-card p {
  margin: 0 auto;
  font-size: 0.95rem;
  /* Reduced from 1.1rem */
  line-height: 1.5;
  /* Reduced from 1.6 */
  color: var(--text-secondary);
  max-width: 800px;
}

/* Simulator Container */
#lead-simulator-container {
  max-width: 1200px;
  margin: 0 auto !important;
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Fundamentals Content */
.fundamentals-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #f8faff;
}

.fundamentals-content .section-header {
  font-size: 1.6rem;
  text-align: left;
  border-bottom: none;
  margin: 2rem 0 0.75rem 0;
  color: var(--primary-color);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-bottom: 0;
  transition: color var(--transition-duration);
}

.fundamentals-content .section-header:first-of-type {
  margin-top: 0.5rem;
}

.fundamentals-section {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  margin-bottom: 2rem;
}

.fundamentals-section:last-of-type {
  margin-bottom: 0;
}

.section-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--accent-color);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fundamentals-card {
  background: #fdfdfd;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.fundamentals-card h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fundamentals-card p {
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 1rem 0;
}

.fundamentals-card p:last-child {
  margin-bottom: 0;
}

.analogy-box {
  background: #f8faff;
  border: 1px solid #e3f2fd;
  border-left: 5px solid #007bff;
  padding: 1.25rem;
  border-radius: 4px 12px 12px 4px;
  margin: 1.5rem 0;
}

.analogy-box.secondary {
  background: #fff8e1;
  border-color: #ffecb3;
  border-left-color: #ffc107;
}

.analogy-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.analogy-box p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-style: italic;
  color: var(--text-primary) !important;
}

.did-you-know {
  background: #f0f4f8;
  padding: 1rem;
  border-radius: 12px;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

.did-you-know i {
  color: #ffca28;
  font-size: 1.4rem;
}

.did-you-know p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: #455a64 !important;
}

.important-note {
  background: #fff8e1;
  border-left: 4px solid #ffca28;
  padding: 1rem;
  margin: 1rem 0;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-radius: 4px 8px 8px 4px;
}

.important-note i {
  color: #f57f17;
  font-size: 1.25rem;
  margin-top: 2px;
}

.important-note p {
  margin: 0;
  color: #5d4037;
  font-size: 0.95rem;
}

.fundamentals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1rem;
}

.btn-test {
  background: white;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.btn-test:hover {
  background: var(--accent-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2);
}

.theory-box {
  background: #f1f3f5;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.theory-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.theory-item {
  flex: 1;
  min-width: 200px;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  background: white;
  border: 1px solid var(--border-color);
}

.theory-item.negative h4 {
  color: #d32f2f;
}

.theory-item.positive h4 {
  color: #2e7d32;
}

.theory-item h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.theory-item p {
  margin: 0;
  font-weight: 700;
}

.direction-advice {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: #e3f2fd;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.direction-advice i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.direction-advice p {
  margin: 0;
  color: #0d47a1;
  font-weight: 500;
}

.review-section {
  background: var(--primary-color);
  color: white;
}

.review-section h2 {
  color: white;
}

.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.concept-item {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 15px;
  text-align: center;
  border: 1px solid var(--border-color);
}

.concept-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.concept-icon.neg i {
  color: #d32f2f;
}

.concept-icon.pos i {
  color: #1976d2;
}

.concept-item h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
}

.concept-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.pro-tip {
  background: #e8f5e9;
  border-left: 5px solid #4caf50;
  padding: 1rem;
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  border-radius: 4px 8px 8px 4px;
}

.pro-tip p {
  margin: 0;
  font-size: 0.95rem;
  color: #2e7d32;
  font-weight: 500;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.check-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.25rem;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.check-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
}

.check-item i {
  color: #4cd964;
  font-size: 1.2rem;
  margin-top: 2px;
}

.check-item p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.95;
}

.label-breakdown {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
}

.label-breakdown li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 1rem;
}

.label-breakdown li:last-child {
  border-bottom: none;
}

.interactive-placeholder {
  background: #f0f7ff;
  border: 2px dashed #007aff;
  padding: 2.5rem;
  border-radius: 20px;
  text-align: center;
  margin: 3rem 0;
}

.interactive-placeholder i {
  font-size: 3rem;
  color: #007aff;
  margin-bottom: 1rem;
}

.interactive-placeholder h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
}

.interactive-placeholder p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .fundamentals-section {
    padding: 1.5rem 1rem;
  }

  .review-list {
    grid-template-columns: 1fr;
  }
}

/* Course module content */
.tab-content {
  display: none;
  padding: 0.5rem 1rem 1rem 1rem !important;
  animation: fadeIn 0.3s ease;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-primary,
.btn-secondary {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--accent-color);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-color-dark, #0056b3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 136, 255, 0.3);
}

.btn-secondary {
  background: var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: #ccc;
}

/* Reference Guide */
.reference-guide {
  display: flex;
  flex-direction: column;
  gap: 0.5rem !important;
  margin-bottom: 4rem !important;
  /* Extra space at the bottom of the guide */
}

.reference-guide h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.diagram-container {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  /* Ensure cards are same height */
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.diagram-card {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  /* Allow flex content */
}

.diagram-card h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--accent-color);
  font-size: 1.2rem;
  border-bottom: 2px solid rgba(0, 136, 255, 0.1);
  padding-bottom: 0.5rem;
}

.ref-svg {
  width: 100%;
  height: auto;
  max-height: 400px;
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
  }
}

/* Reference Images */
.ref-image-container {
  width: 100%;
  flex-grow: 1;
  /* Take up available space */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  min-height: 250px;
  /* Ensure specific height for alignment */
}

.ref-img {
  max-width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.ref-img:hover {
  transform: scale(1.05);
}

/* Fundamentals Layout - Side-by-Side Images */
.fundamentals-layout {
  display: flex;
  gap: 2rem;
  align-items: center;
  /* Vertically center content */
}

.fundamentals-text {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.fundamentals-image {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  /* Constrain image width */
  margin: 0 auto;
}

.styled-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  background: white;
  padding: 0.5rem;
}

.styled-img:hover {
  transform: scale(1.02);
}

.img-caption {
  margin-top: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  font-style: italic;
  max-width: 90%;
}

/* Mobile Responsive - Stack columns */
@media (max-width: 992px) {
  .fundamentals-layout {
    flex-direction: column;
    gap: 1.5rem;
  }

  .fundamentals-layout,
  .fundamentals-text {
    width: 100%;
  }

  .fundamentals-image {
    max-width: 100%;
    /* Allow wider images on mobile for better visibility */
    width: 100%;
  }

  .styled-img {
    max-height: 400px;
    object-fit: contain;
  }
}

/* Interactive Bipolar Math Component */
.interactive-component {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0e0e0;
  overflow: hidden;
  margin: 2rem 0;
}

.component-header {
  background: #4ecdc4;
  color: white;
  padding: 0.75rem 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bipolar-math-simulator {
  display: flex;
  padding: 1.5rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.electrodes-column,
.calculations-column {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.math-electrode {
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #eee;
}

.math-electrode label {
  font-weight: 600;
  color: #555;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.voltage-display {
  text-align: right;
  font-family: monospace;
  font-weight: bold;
  color: #333;
}

.btn-primary-small {
  background: #4ecdc4;
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s;
  margin-top: 1rem;
}

.btn-primary-small:hover {
  background: #3dbdb4;
}

.calc-box {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 1rem;
  position: relative;
}

.calc-box h5 {
  margin: 0 0 0.5rem 0;
  color: #777;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.math-row {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calc-result {
  color: #333;
  background: #f0f0f0;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

.deflection-monitor {
  margin-top: 0.5rem;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: bold;
}

.deflection-monitor.up {
  color: #e74c3c;
  /* Red for negative/up usually */
}

.deflection-monitor.down {
  color: #3498db;
  /* Blue for positive/down */
}

.deflection-monitor .arrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.component-footer {
  background: #f9f9f9;
  padding: 0.75rem 1.5rem;
  margin: 0;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: #666;
}

@media (max-width: 768px) {
  .bipolar-math-simulator {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* Visual Column Styles */
.visual-column {
  flex: 0 0 150px;
  /* Fixed width for the strip */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #eee;
  padding: 1rem 0;
}

.visual-column h4 {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.electrode-strip-svg {
  width: 100%;
  height: 250px;
  /* Adjust as needed */
  max-width: 100px;
}

.vis-electrode-group circle {
  transition: fill 0.3s ease;
}

.vis-legend {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #555;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-item .dot.red {
  background: #e74c3c;
}

.legend-item .dot.blue {
  background: #3498db;
}

/* Math Waveform Canvas */
.math-waveform {
  width: 100%;
  height: 60px;
  background: #fafafa;
  border-top: 1px dashed #eee;
  margin-top: 0.5rem;
  display: block;
}

/* ------------------------------------------------------------------ */
/* CONTROL PANEL DASHBOARD DESIGN
/* ------------------------------------------------------------------ */
.control-panel-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.panel-module {
  background: #fdfdfd;
  /* Or #eef1f5 for a "medical device" gray */
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-module.filter-module {
  border-top: 4px solid #3498db;
  /* Blue for Filters */
}

.panel-module.sensitivity-module {
  border-top: 4px solid #e67e22;
  /* Orange for Sens */
}

.module-header {
  background: #f7f9fc;
  color: #5d6d7e;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.module-content {
  padding: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.module-content.horizontal {
  align-items: center;
}

/* Control Unit (Knob + Display) */
.control-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.knob-container {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 0.5rem;
}

.knob {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#f0f0f0 0deg, #dcdcdc 180deg, #f0f0f0 360deg);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.8),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  border: 1px solid #ccc;
}

.knob-indicator {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 4px;
  height: 12px;
  background: #34495e;
  transform: translateX(-50%);
  border-radius: 2px;
}

.knob-label {
  position: absolute;
  bottom: -20px;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: #7f8c8d;
}

/* Digital Display */
.digital-display {
  background: #2c3e50;
  color: #2ecc71;
  /* Matrix Green */
  font-family: 'Courier New', monospace;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #34495e;
  font-size: 0.9rem;
  min-width: 60px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.digital-display .unit {
  font-size: 0.7rem;
  opacity: 0.8;
}

.digital-display.status-on {
  color: #2ecc71;
  font-weight: bold;
}

.unit-desc {
  font-size: 0.7rem;
  color: #95a5a6;
  max-width: 80px;
  line-height: 1.2;
}

/* Toggle Switch */
.switch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.switch-track {
  width: 50px;
  height: 26px;
  background: #bdc3c7;
  border-radius: 13px;
  position: relative;
  transition: background 0.3s;
}

.switch-track.active {
  background: #27ae60;
}

.switch-handle {
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.switch-track.active .switch-handle {
  transform: translateX(24px);
}

.switch-label {
  font-size: 0.7rem;
  font-weight: bold;
  color: #7f8c8d;
}

/* Sensitivity Visualizer */
.zoom-visualizer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #2c3e50;
  padding: 1rem;
  border-radius: 8px;
  color: white;
  min-width: 120px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.zoom-value {
  font-size: 1.8rem;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #f1c40f;
  /* Amber */
}

.zoom-unit {
  font-size: 0.8rem;
  color: #bdc3c7;
}

.zoom-label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.zoom-explanation {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.zoom-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 60px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
}

.z-bar {
  width: 30px;
  background: #bdc3c7;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
}

.z-bar span {
  position: absolute;
  top: -20px;
  font-size: 0.7rem;
  color: #7f8c8d;
  width: 40px;
  text-align: center;
}

.z-bar.huge {
  height: 50px;
  opacity: 0.5;
}

.z-bar.standard {
  height: 25px;
  background: #e67e22;
}

/* Active color */
.z-bar.tiny {
  height: 10px;
  opacity: 0.5;
}

.zoom-explanation p {
  color: #34495e;
  font-size: 0.9rem;
  margin: 0;
}

.small-text {
  font-size: 0.8rem !important;
  color: #7f8c8d !important;
  font-style: italic;
}

/* Module Footer Explanations */
.module-footer {
  background: #fdfdfd;
  border-top: 1px solid #eee;
  padding: 1rem;
  font-size: 0.85rem;
  color: #5d6d7e;
  line-height: 1.5;
}

.module-footer strong {
  color: #34495e;
}

.module-footer .footer-item {
  margin-bottom: 0.5rem;
}

.module-footer .footer-item:last-child {
  margin-bottom: 0;
}

.module-footer ul {
  margin: 0.5rem 0 0 1.2rem;
  padding: 0;
  list-style-type: square;
}

.module-footer li {
  margin-bottom: 0.25rem;
}

.module-footer p {
  margin: 0 0 0.5rem 0;
}

/* Sleep Gallery */
.sleep-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.gallery-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: white;
}

.gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
  display: block;
}

.gallery-item p {
  margin: 0;
  padding: 0.5rem;
  font-size: 0.85rem;
  text-align: center;
  background: #f8f9fa;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Lightbox Modal */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lightbox-modal.active {
  display: flex;
  animation: fadeIn 0.3s;
}

.lightbox-content {
  max-width: 90%;
  max-height: 80vh;
  margin: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.lightbox-caption {
  margin: 1rem auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  font-size: 1.1rem;
  padding: 10px 0;
  height: 150px;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .lightbox-content {
    width: 100%;
  }
}

/* Artifact Hunter Game */
.interactive-module.artifact-hunter {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hunter-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-toggle {
  padding: 0.6rem 1.2rem;
  border: 1px solid #ddd;
  background: #f8f9fa;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-toggle:hover {
  background: #e9ecef;
}

.btn-toggle.active {
  background: #ffe3e3;
  color: #c0392b;
  border-color: #e74c3c;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-toggle.clean {
  background: #d4edda;
  color: #155724;
  border-color: #28a745;
}

canvas#artifact-canvas {
  width: 100%;
  height: 200px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}

.hunter-feedback {
  margin-top: 1rem;
  text-align: center;
  font-weight: 600;
  min-height: 1.5em;
  color: var(--text-secondary);
}

.hunter-feedback.success {
  color: #27ae60;
}

/* Seizure Timeline */
.seizure-timeline {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.timeline-viewer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

canvas#seizure-canvas {
  width: 100%;
  height: 150px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}

input[type=range]#seizure-slider {
  width: 100%;
  cursor: pointer;
}

.stage-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
}

/* These four were inert text that looked like navigation. They jump the
   slider to their stage now, so they have to look and behave like controls. */
.stage-jump {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #5a6570;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
  white-space: nowrap;
}

.stage-jump:hover { background: #eef4fa; border-color: #9db9d4; color: #0b6ab8; }
.stage-jump:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 2px; }

.stage-jump.is-active {
  background: #0b6ab8;
  border-color: #0b6ab8;
  color: #fff;
}

/* Mathematical Formula Renderings (CSS Fractions) */
.formula-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.25rem 0;
  width: 100%;
}

.formula-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main, #2c3e50);
  background: var(--bg-card-subtle, #f8fafc);
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.formula-lhs {
  margin-right: 0.75rem;
}

.formula-eq {
  margin-right: 1rem;
  color: var(--primary-color, #3498db);
  font-size: 1.25rem;
}

.formula-fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  vertical-align: middle;
}

.formula-fraction .numerator {
  border-bottom: 2px solid var(--text-main, #2c3e50);
  padding: 0 0.75rem 2px 0.75rem;
  width: 100%;
  text-align: center;
}

.formula-fraction .denominator {
  padding: 2px 0.75rem 0 0.75rem;
  width: 100%;
  text-align: center;
  font-size: 0.95em;
  opacity: 0.95;
}

/* Dark Mode support for formulas */
body.dark .formula-container,
[data-theme="dark"] .formula-container {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

body.dark .formula-fraction .numerator,
[data-theme="dark"] .formula-fraction .numerator {
  border-bottom-color: #f1f5f9;
}

/* Custom Param Select Dropdowns styled inside medical displays */
.param-select {
  background: transparent;
  color: #2ecc71; /* Matrix green */
  border: none;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  width: 100%;
  text-align: center;
  text-align-last: center;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.param-select option {
  background: #2c3e50;
  color: #2ecc71;
  font-size: 0.9rem;
}

.param-select.large {
  font-size: 1.15rem;
  color: #e67e22; /* Matches sensitivity color */
  text-align: center;
}

.param-select.large option {
  color: #e67e22;
}

/* Live Oscilloscope Monitor styles */
.oscilloscope-wrapper {
  position: relative;
  width: 100%;
  background: #090d16; /* Deep clinical dark slate */
  border: 2px solid #1e293b;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8), 0 4px 10px rgba(0, 0, 0, 0.3);
}

.oscilloscope-canvas {
  width: 100%;
  height: 160px;
  background: #05080e;
  display: block;
  box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.05);
}

.oscilloscope-labels {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #101726;
  padding: 0.6rem 0.5rem;
  border-top: 1px solid #1e293b;
  font-size: 0.75rem;
  color: #94a3b8;
  font-family: 'Courier New', monospace;
}

.oscilloscope-labels span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.oscilloscope-labels strong {
  font-weight: bold;
}

/* Medical display pulsing glow effect */
.digital-display {
  position: relative;
  overflow: hidden;
}

.digital-display::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle, rgba(46, 204, 113, 0.1) 0%, transparent 80%);
  pointer-events: none;
}

/* Sensitivity visualizer overrides */
.zoom-visualizer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #2c3e50;
  border: 1px solid #34495e;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  min-width: 120px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.zoom-level {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}

.zoom-label {
  font-size: 0.65rem;
  color: #95a5a6;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Dark theme oscilloscope colors */
body.dark .oscilloscope-wrapper,
[data-theme="dark"] .oscilloscope-wrapper {
  border-color: #334155;
  background: #020617;
}

body.dark .oscilloscope-labels,
[data-theme="dark"] .oscilloscope-labels {
  background: #0f172a;
  border-top-color: #334155;
}

/* Horizontal Medical Machine Instrument Dashboard Layout */
.medical-dashboard-wrapper {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  margin-top: 1rem;
}

.dashboard-controls-grid {
  display: grid;
  grid-template-columns: 2.2fr 3fr 1.5fr; /* Filters (left), Oscilloscope (center), Sensitivity (right) */
  gap: 1.25rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .dashboard-controls-grid {
    grid-template-columns: 1fr !important; /* Stack vertically on small screens */
  }
}

.control-panel-block {
  background: var(--bg-card-subtle, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.control-panel-block .block-header {
  background: #f1f5f9;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.control-panel-block .block-content {
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.filter-block .block-content {
  justify-content: space-around;
  gap: 0.75rem;
}

.monitor-block .block-content {
  padding: 0.4rem;
}

.sensitivity-block .block-content {
  flex-direction: column;
  justify-content: center;
}

/* Dark theme medical dashboard styles */
body.dark .medical-dashboard-wrapper,
[data-theme="dark"] .medical-dashboard-wrapper {
  background: #0f172a;
  border-color: #1e293b;
}

body.dark .control-panel-block,
[data-theme="dark"] .control-panel-block {
  background: #1e293b;
  border-color: #334155;
}

body.dark .control-panel-block .block-header,
[data-theme="dark"] .control-panel-block .block-header {
  background: #0f172a;
  border-bottom-color: #334155;
  color: #94a3b8;
}

body.dark .dashboard-reference-grid,
[data-theme="dark"] .dashboard-reference-grid {
  border-top-color: #1e293b !important;
}

/*-----------------------------------------------
  DARK MODE: EEG FUNDAMENTALS
  The surfaces above are hardcoded light (white / #f8f9fa / tinted
  callouts). Dark mode is `body.dark` (see base.css `.dark`), which
  flips text to #f5f5f7, so every hardcoded surface has to flip too or
  the text lands on its own colour. Mobile defaults to dark, so this is
  the default rendering for phones.
-----------------------------------------------*/

/* Page surfaces */
body.dark .page-eeg_lead_simulator .intro-card,
body.dark .fundamentals-section,
body.dark .diagram-card,
body.dark .interactive-component,
body.dark .interactive-module.artifact-hunter,
body.dark .seizure-timeline,
body.dark .gallery-item,
body.dark .leads-panel,
body.dark .theory-item {
  background: var(--info-bg);
  border-color: var(--border-color);
}

body.dark .fundamentals-content {
  background: #1a1a1c;
}

body.dark .fundamentals-card,
body.dark .panel-module,
body.dark .module-footer,
body.dark .visual-column,
body.dark .math-electrode,
body.dark .concept-item,
body.dark .theory-box,
body.dark .gallery-item p,
body.dark .component-footer,
body.dark .calc-box,
body.dark .timeline-viewer {
  background: #3a3a3c;
  border-color: var(--border-color);
  color: var(--text-color);
}

body.dark .module-header,
body.dark .calc-result,
body.dark .math-waveform {
  background: #2f2f31;
  color: var(--text-color);
}

/* Headings and body copy inside cards */
body.dark .intro-card h3,
body.dark .fundamentals-card h3,
body.dark .concept-item h4,
body.dark .diagram-card h4,
body.dark .calc-box h5,
body.dark .fundamentals-text h3,
body.dark .fundamentals-text h4,
body.dark .analogy-header {
  color: var(--text-color);
}

body.dark .intro-card p,
body.dark .fundamentals-card p,
body.dark .concept-item p,
body.dark .fundamentals-text p,
body.dark .fundamentals-text li,
body.dark .label-breakdown li,
body.dark .gallery-item p,
body.dark .component-footer,
body.dark .img-caption,
body.dark .fundamentals-section > p {
  color: var(--text-color);
}

body.dark .img-caption,
body.dark .small-text {
  color: var(--text-secondary);
}

body.dark .fundamentals-text strong,
body.dark .concept-item strong,
body.dark .label-breakdown strong,
body.dark .gallery-item strong {
  color: #ffffff;
}

/* Tinted callouts: keep the semantic hue, drop the luminance */
body.dark .analogy-box {
  background: rgba(41, 151, 255, 0.12);
  border-color: rgba(41, 151, 255, 0.3);
  border-left-color: #2997ff;
}

body.dark .analogy-box.secondary,
body.dark .important-note {
  background: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.3);
  color: var(--text-color);
}

body.dark .pro-tip {
  background: rgba(76, 175, 80, 0.13);
  border-color: rgba(76, 175, 80, 0.32);
}

body.dark .golden-rule {
  background: rgba(255, 202, 40, 0.12);
  border-color: rgba(255, 202, 40, 0.32);
}

body.dark .did-you-know,
body.dark .direction-advice,
body.dark .interactive-placeholder {
  background: rgba(41, 151, 255, 0.1);
  border-color: rgba(41, 151, 255, 0.28);
}

body.dark .analogy-box p,
body.dark .important-note p,
body.dark .pro-tip p,
body.dark .golden-rule p,
body.dark .did-you-know p {
  color: var(--text-color);
}

/* Tables */
body.dark .polarity-table,
body.dark .polarity-table td {
  background: transparent;
  color: var(--text-color);
  border-color: var(--border-color);
}

body.dark .polarity-table thead th {
  background: #3a3a3c;
  color: #ffffff;
  border-color: var(--border-color);
}

body.dark .polarity-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

/* Figures sit on white in the source art. Keep a light mat so the
   pencil sketches and trace screenshots stay legible. */
body.dark .styled-img,
body.dark .ref-img {
  background: #f5f5f7;
}

/* Controls */
body.dark .btn-toggle {
  background: #3a3a3c;
  border-color: var(--border-color);
  color: var(--text-color);
}

body.dark .btn-toggle.active {
  background: rgba(231, 76, 60, 0.25);
  border-color: rgba(231, 76, 60, 0.55);
  color: #ffb4ab;
}

body.dark .btn-toggle.clean {
  background: rgba(76, 175, 80, 0.22);
  border-color: rgba(76, 175, 80, 0.5);
  color: #a5e8a8;
}

body.dark .control-group select,
body.dark .param-select {
  background: #3a3a3c;
  color: var(--text-color);
  border-color: var(--border-color);
}

body.dark .hunter-feedback {
  color: var(--text-color);
}

body.dark .section-badge {
  color: #ffffff;
}

/* The instrument dashboard already had dark surfaces (they were keyed to
   [data-theme="dark"], which this site never sets, now also on body.dark).
   Its text colours were left behind, so the panel went dark while the copy
   stayed near-black. */
body.dark .medical-dashboard-wrapper,
body.dark .medical-dashboard-wrapper p,
body.dark .dashboard-reference-grid,
body.dark .dashboard-reference-grid p,
body.dark .ref-col,
body.dark .ref-col p,
body.dark .ref-col strong {
  color: #e2e8f0;
}

body.dark .ref-col .small-text,
body.dark .medical-dashboard-wrapper .small-text,
body.dark .unit-desc,
body.dark .knob-label,
body.dark .switch-label,
body.dark .zoom-label {
  color: #a9b6c6 !important;
}

body.dark .control-panel-block {
  color: #e2e8f0;
}

/* Page furniture that renders directly on the body background */
body.dark .mobile-app-header {
  background: var(--info-bg);
  border-radius: 12px;
}

body.dark .mobile-app-header .brand-title {
  color: var(--text-color);
}

body.dark .page-eeg_lead_simulator .page-title {
  color: var(--text-color);
}

/* Interactive-component headers and buttons: 1.9:1 in light mode */
.component-header,
.interactive-component .component-header {
  color: #0b4f86;
}

.btn-primary-small {
  background: #0b5ed7;
  color: #fff;
}

body.dark .component-header {
  color: #7cc0ff;
}

body.dark .btn-primary-small {
  background: #1f6fd0;
  color: #fff;
}

/* "Clinical Caution" / "Image Pending" placeholders */
.section-badge[style*="f39c12"] {
  background: #b06f05 !important;
}

body.dark .gallery-item[style*="background: #eee"],
body.dark .concept-item .gallery-item {
  background: #3a3a3c !important;
  color: var(--text-secondary) !important;
}

/* Blue "info" variant of .important-note. This was an inline style attribute,
   which beat every dark-mode rule. */
.important-note.info {
  background: #e3f2fd;
  border-color: #007aff;
  color: #0d47a1;
}

body.dark .important-note.info {
  background: rgba(41, 151, 255, 0.14);
  border-color: #2997ff;
  color: var(--text-color);
}

body.dark .important-note.info p,
body.dark .important-note.info strong {
  color: var(--text-color);
}

body.dark .section-badge-interactive,
body.dark .interactive-module p,
body.dark .interactive-module h3,
body.dark .artifact-hunter p,
body.dark .seizure-timeline p,
body.dark .stage-labels span {
  color: var(--text-color);
}

body.dark .stage-jump { color: #c7c7cc; }
body.dark .stage-jump:hover { background: #3a3a3c; border-color: #6b7783; color: #66b5f2; }
body.dark .stage-jump.is-active { background: #2f8fe0; border-color: #2f8fe0; color: #10171e; }

/* The site's dark theme leaves the body background light on this page, so
   anything sitting directly on it (the mobile brand header, the module guide)
   needs its own surface rather than inheriting a white backdrop. */
body.dark .page-eeg_lead_simulator {
  background: var(--bg-color);
}

body.dark .mobile-app-header {
  background: var(--info-bg) !important;
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

body.dark .mobile-app-header .brand-title,
body.dark .brand-title {
  color: var(--text-color) !important;
}

/* Final contrast pass */
.unit-desc { color: #5b6672; }
.component-header { color: #0b4f86; }

body.dark .component-header,
body.dark .interactive-component .component-header {
  color: #7cc0ff;
  background: #2f2f31;
}

body.dark .voltage-display,
body.dark .math-row,
body.dark .calc-result,
body.dark .math-electrode label,
body.dark .electrodes-column label,
body.dark .visual-column h4,
body.dark .vis-legend,
body.dark .legend-item {
  color: var(--text-color);
}

.section-badge-interactive { background: #6b3fa0; color: #fff; }

/*-----------------------------------------------
  FUNDAMENTALS: LAYOUT & DENSITY
  The two-column layout caps figures at 400px, which is fine for a simple
  icon but destroys an information-dense diagram: the biophysics SVGs are
  ~900 units wide and their labels become unreadable. Sections whose figure
  IS the teaching content get a full-width figure with the prose beneath.
-----------------------------------------------*/
.fundamentals-layout {
  align-items: flex-start;
}

.fundamentals-layout.figure-led {
  flex-direction: column;
  gap: 1.25rem;
}

.fundamentals-layout.figure-led .fundamentals-image {
  max-width: 100%;
  width: 100%;
  order: -1;
}

.fundamentals-layout.figure-led .styled-img {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  display: block;
}

.fundamentals-layout.figure-led .img-caption {
  max-width: 800px;
  margin: 0.75rem auto 0;
  text-align: center;
}

/* Give the remaining side-by-side figures more room than 400px. */
.fundamentals-image {
  max-width: 480px;
}

/* Cards were sized for icons; several now carry EEG traces that need width. */
.concept-grid {
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.6rem;
}

.sleep-gallery {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
}

/* A 250px cap crops wide trace figures into an unreadable strip. */
.gallery-item img {
  max-height: none;
  border-radius: 8px;
}

.concept-item .gallery-item {
  background: transparent;
}

/* Vertical rhythm: sections were running together under long figure blocks. */
.fundamentals-content .section-header {
  margin-top: 2.75rem;
}

.fundamentals-section {
  padding: 2rem 2rem 1.75rem;
}

.fundamentals-text h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.fundamentals-text h3:first-child {
  margin-top: 0;
}

.fundamentals-text p + ul.label-breakdown {
  margin-top: 0.75rem;
}

@media (min-width: 1200px) {
  .fundamentals-content {
    padding: 1.75rem 2.25rem;
  }
}

/* Grids whose cards carry EEG traces: a 258px column renders a 760-unit
   figure at ~240px, which is unreadable. Give the waveform room. */
.concept-grid.trace-grid {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1.75rem;
}

.concept-grid.trace-grid .gallery-item img {
  width: 100%;
}

@media (max-width: 520px) {
  .concept-grid.trace-grid {
    grid-template-columns: 1fr;
  }
}

/*-----------------------------------------------
  SEIZURE EVOLUTION TIMELINE
  Was a fixed 800px canvas of a single sine wave with UPPERCASE stage labels
  that wrapped. Now a responsive four-channel display with live readouts, so
  the learner can watch frequency, amplitude and FIELD change together.
-----------------------------------------------*/
.seizure-timeline {
  padding: 1.25rem 1.25rem 1.5rem;
}

.seizure-readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.seizure-readouts .readout {
  background: #f4f7fa;
  border: 1px solid #e2e9f0;
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.readout-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7b8794;
}

.seizure-readouts .readout strong {
  font-size: 0.92rem;
  color: #12283d;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.seizure-canvas-wrap {
  background: #fff;
  border: 1px solid #e2e9f0;
  border-radius: 10px;
  padding: 0.35rem;
  overflow: hidden;
}

#seizure-canvas {
  display: block;
  width: 100%;
}

#seizure-slider {
  width: 100%;
  margin: 1rem 0 0.35rem;
  accent-color: #c0392b;
  cursor: grab;
}

#seizure-slider:active { cursor: grabbing; }

/* The old labels were uppercase and space-between, so long ones wrapped into
   ragged two-line columns. Even columns, sentence case, aligned to quartiles. */
.seizure-timeline .stage-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-transform: none;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: #7b8794;
}

.seizure-timeline .stage-labels span { text-align: center; }
.seizure-timeline .stage-labels span:first-child { text-align: left; }
.seizure-timeline .stage-labels span:last-child { text-align: right; }

.seizure-timeline .hunter-feedback {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.5;
  background: #f4f7fa;
  border: 1px solid #e2e9f0;
  border-radius: 9px;
  padding: 0.7rem 0.85rem;
  color: #33424f;
}

/* Dark mode */
body.dark .seizure-readouts .readout,
body.dark .seizure-timeline .hunter-feedback,
body.dark .seizure-canvas-wrap {
  background: #3a3a3c;
  border-color: var(--border-color);
  color: var(--text-color);
}

body.dark .seizure-readouts .readout strong,
body.dark .seizure-timeline .hunter-feedback,
body.dark .seizure-timeline .hunter-feedback strong {
  color: var(--text-color);
}

body.dark .readout-label,
body.dark .seizure-timeline .stage-labels {
  color: #aab5c0;
}

/* The canvas draws in dark ink; keep it on a light mat so it stays legible. */
body.dark .seizure-canvas-wrap {
  background: #f4f7fa;
}

@media (max-width: 560px) {
  .seizure-timeline .stage-labels { font-size: 0.68rem; }
  .seizure-readouts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}

/* Five readouts orphaned the last one onto its own row at typical widths.
   But forcing five columns from 520px gave each label about 80px, and
   FREQUENCY and AMPLITUDE are single words that cannot wrap. They were
   clipped mid-word. An orphaned tile beats unreadable labels, so five-across
   waits until there is genuinely room for it. */
@media (min-width: 760px) {
  .seizure-readouts { grid-template-columns: repeat(5, 1fr); }
  .seizure-readouts .readout { padding: 0.45rem 0.55rem; }
  .seizure-readouts .readout strong { font-size: 0.84rem; }
}

.seizure-readouts .readout { min-width: 0; }

.readout-label {
  display: block;
  overflow-wrap: break-word;
}

/* This rendered as a full-width purple bar across the section. It is a badge:
   make it a pill that sits on the section edge like .section-badge does. */
.section-badge-interactive {
  position: absolute;
  top: -12px;
  left: 20px;
  display: inline-block;
  width: auto;
  background: #6b3fa0;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
}

/* The interactive modules nest one inside a section, so that one stays inline
   rather than absolutely positioning itself over the section edge. */
.interactive-module .section-badge-interactive {
  position: static;
  margin-bottom: 0.75rem;
}

body.dark .section-badge-interactive { color: #fff; }

/*-----------------------------------------------
  COURSE CONTAINMENT
  Keep wide interactive children from sizing the page past the viewport.
-----------------------------------------------*/
.page-eeg_lead_simulator > * {
  min-width: 0;
  max-width: 100%;
}

#lead-simulator-container {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/*-----------------------------------------------
  BIPOLAR MATH SIMULATOR
  Was three flex columns with min-widths summing to ~714px, so in a ~590px
  panel the calculations column wrapped below the fold and you could not see
  the sliders and the resulting traces at once. Now two stacked rows: controls
  on top, both channel traces full width beneath.
-----------------------------------------------*/
.bipolar-math-simulator {
  display: block;
  padding: 1.25rem;
}

.bpm-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
  .bpm-controls { grid-template-columns: minmax(0, 1fr); }
}

.bpm-controls .electrodes-column,
.bpm-controls .visual-column {
  min-width: 0;
  flex: none;
}

.bpm-controls .visual-column {
  width: 100%;
  padding: 0.85rem 0.75rem;
}

.bpm-controls .visual-column .electrode-strip-svg {
  width: 100%;
  height: auto;
  max-height: 96px;
}

.calculations-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  min-width: 0;
}

/* Never place the two channels side by side. A phase reversal is read
   vertically - Channel 1 deflecting down and Channel 2 up, pointing toward
   each other at the shared electrode - so Ch1 must always sit above Ch2. */
.calculations-column { grid-template-columns: minmax(0, 1fr); }

.calc-box { min-width: 0; }

.math-waveform {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 7px;
  margin-top: 0.5rem;
}

.math-electrode label { font-size: 0.84rem; }
.math-sim-buttons .btn-primary-small { font-size: 0.78rem; }

.vis-legend {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: #5f6d7c;
  margin-top: 0.4rem;
}

body.dark .math-waveform {
  background: #f7f9fb;
  border-color: var(--border-color);
}

body.dark .vis-legend { color: #aab5c0; }

/*-----------------------------------------------
  INSTRUMENT PARAMETERS DASHBOARD
  At panel widths the 3-column grid collapsed to one column and the whole
  thing ran to ~1250px tall, so you changed a filter and the oscilloscope was
  off-screen. You could not see cause and effect together, which is the only
  reason the widget exists. The scope now sits full width at the top with the
  controls in a compact row beneath it, and the decorative knobs (they are
  click-to-cycle, not draggable) are scaled down to stop eating the height.
-----------------------------------------------*/
.dashboard-controls-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.dashboard-controls-grid .monitor-block {
  grid-column: 1 / -1;
  order: -1;
}

@media (min-width: 860px) {
  .dashboard-controls-grid { grid-template-columns: 2fr 1fr; }
}

.control-panel-block { min-width: 0; }

.control-panel-block .block-content {
  padding: 0.6rem 0.7rem;
  gap: 0.6rem;
}

/* Knobs were sized by their container and dominated the panel. */
.knob-container {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.knob { border-width: 1px; }

.control-unit {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  flex-wrap: wrap;
}

.knob-label { font-size: 0.62rem; letter-spacing: 0.04em; }
.unit-desc { font-size: 0.6rem !important; white-space: nowrap; }

.filter-block .block-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.sensitivity-block .block-content { padding: 0.6rem !important; }

.oscilloscope-canvas { width: 100%; height: 132px !important; }

/* Reference band: two tight columns rather than a 575px stack. */
.dashboard-reference-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 1rem !important;
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
}

.dashboard-reference-grid .ref-col p { margin-bottom: 0.4rem; }
.formula-box { margin: 0.35rem 0 !important; }

body.dark .dashboard-controls-grid .block-header { color: #cdd8e3; }

/* Artifact hunter canvas: responsive like the other rebuilt widgets. */
.hunter-canvas-wrap {
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 9px;
  padding: 0.35rem;
  overflow: hidden;
  margin-top: 0.75rem;
}

#artifact-canvas { display: block; width: 100%; }

body.dark .hunter-canvas-wrap { background: #f7f9fb; border-color: var(--border-color); }

.hunter-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hunter-controls .btn-toggle { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; }

/*-----------------------------------------------
  TOP GAP AT NARROW WIDTHS
  mobile/components/header.css sets margin-top:40px !important on
  .mobile-app-header under @media (max-width:768px), commented "space for
  status bar". That is real, but only in an installed PWA, where the iOS
  status bar overlays the page (this page sets apple-mobile-web-app-capable).
  In an ordinary browser tab nothing occupies that strip - the desktop header
  is display:none and the skip-link is off-screen - so it rendered as ~84px of
  blank space above the brand title.

  So: drop it for browser tabs, and restore it from the real safe-area inset
  when actually running standalone. Scoped to this page.
-----------------------------------------------*/
@media (max-width: 768px) {
  .page-eeg_lead_simulator .mobile-app-header {
    margin-top: 0 !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .page-eeg_lead_simulator {
    padding-top: 0.75rem;
  }
}

@media (max-width: 768px) and (display-mode: standalone) {
  .page-eeg_lead_simulator .mobile-app-header {
    margin-top: env(safe-area-inset-top, 40px) !important;
  }
}

/* Four-channel bipolar chain: keep the channels stacked and compact enough
   that all four are on screen together, since the whole point is comparing
   the pair that reverses against the pair that does not. */
.bpm-hint {
  font-size: 0.78rem;
  line-height: 1.45;
  color: #5f6d7c;
  margin: 0 0 0.75rem;
}

.math-sim-buttons {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.calculations-column .calc-box {
  padding: 0.6rem 0.75rem;
}

.calculations-column .calc-box h5 {
  margin: 0 0 0.35rem;
  font-size: 0.84rem;
}

.calculations-column .math-row {
  font-size: 0.82rem;
}

.calc-box .deflection-monitor {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0.15rem 0 0;
}

/* channels that barely move are dimmed, so the reversing pair stands out */
.calc-box.is-flat { opacity: 0.62; }
.calc-box.is-flat .math-waveform { filter: saturate(0.4); }

body.dark .bpm-hint { color: #aab5c0; }

/* The reversing pair vs the bystanders. The contrast IS the localisation, so
   show it rather than only describing it in the caption. */
.calc-box.is-focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.14);
  background: rgba(192, 57, 43, 0.045);
}

.calc-box.is-focus h5 { color: #c0392b; }

/* Bystanders recede via a flat, desaturated trace - NOT via faded text. The
   small microvolt values are the whole point of these channels, so they stay
   fully legible; at 0.55 opacity they fell to 2.1:1 in light mode. */
.calc-box.is-quiet {
  border-color: rgba(120, 132, 145, 0.35);
  background: rgba(120, 132, 145, 0.04);
}

.calc-box.is-quiet .math-waveform { filter: saturate(0.2) opacity(0.75); }
.calc-box.is-quiet h5 { color: #5b6672; }

body.dark .calc-box.is-quiet {
  border-color: rgba(150, 162, 175, 0.28);
  background: rgba(150, 162, 175, 0.05);
}

body.dark .calc-box.is-quiet h5 { color: #a8b3bf; }

body.dark .calc-box.is-focus {
  border-color: #e2685c;
  box-shadow: 0 0 0 2px rgba(226, 104, 92, 0.2);
  background: rgba(226, 104, 92, 0.07);
}

body.dark .calc-box.is-focus h5 { color: #ff9a90; }

/* ------------------------------------------------------------------ */
/* BIPOLAR SIM: ONE ROW, NO SCROLLING                                  */
/* Sliders left, the four channels right, side by side. Previously the */
/* controls and the channels were stacked rows, so the channels - the  */
/* thing you are meant to WATCH while dragging a slider - sat below    */
/* the fold. Cause and effect have to be visible at the same time.     */
/* ------------------------------------------------------------------ */

.bipolar-math-simulator { display: block; padding: 1rem 1.1rem; }

.bpm-stage {
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 820px) {
  .bpm-stage { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

.bpm-stage .electrodes-column {
  display: block;
  min-width: 0;
  flex: none;
  gap: 0;
}

.bpm-stage .bpm-hint { margin: 0 0 0.6rem; }

/* The chain reads top to bottom, the way an EEG page actually does, with a
   connector threading the electrodes so adjacency stays obvious. */
.bpm-stage .math-electrode {
  position: relative;
  display: grid;
  grid-template-columns: 26px 34px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 0;
  padding: 0.22rem 0;
  flex-direction: row;
}

.bpm-stage .math-electrode::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d7dee6;
  z-index: 0;
}

.bpm-stage .math-electrode:first-of-type::before { top: 50%; }
.bpm-stage .math-electrode:last-of-type::before { bottom: 50%; }

.bpm-stage .chain-dot {
  width: 26px;
  height: 26px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.bpm-stage .math-electrode label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4a5560;
}

.bpm-stage .math-electrode input[type="range"] { width: 100%; margin: 0; }

.bpm-stage .voltage-display {
  font-size: 0.76rem;
  text-align: right;
  white-space: nowrap;
}

.bpm-stage .math-sim-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.bpm-stage .math-sim-buttons .btn-primary-small {
  margin-top: 0;
  padding: 0.4rem 0.3rem;
  font-size: 0.72rem;
  line-height: 1.2;
}

/* Channels: header on one line, trace under it, so four boxes fit the
   height of the slider column instead of running off the screen. */
.bpm-stage .calculations-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
}

.bpm-stage .calc-box { padding: 0.4rem 0.55rem; border-width: 2px; }

.bpm-stage .calc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
}

.bpm-stage .calc-head h5 {
  margin: 0;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bpm-stage .calc-head .math-row {
  margin: 0;
  font-size: 0.76rem;
  white-space: nowrap;
  gap: 0.25rem;
}

.bpm-stage .calc-box .deflection-monitor {
  margin: 0;
  height: auto;
  font-size: 0.7rem;
  white-space: nowrap;
}

.bpm-stage .math-waveform {
  height: 64px;
  margin-top: 0.25rem;
  border-top: 1px dashed #eee;
}

/* Too narrow for title + sum + arrow on one line: give the title its own
   row and let it wrap rather than truncating which channel you are reading. */
@media (max-width: 560px) {
  .bpm-stage .calc-head { grid-template-columns: minmax(0, 1fr) auto; }
  .bpm-stage .calc-head h5 {
    grid-column: 1 / -1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

body.dark .bpm-stage .math-electrode { background: none; border: 0; }
body.dark .bpm-stage .math-electrode::before { background: #3d4854; }
body.dark .bpm-stage .math-electrode label { color: #c6d0da; }

/* On a 375px phone the nested gutters (main 20 + tab 16 + content 24 +
   section 32 + component 17.6, doubled) consumed 220px - 59% of the screen -
   leaving the sliders 14px wide. Collapse them at phone widths; this is
   page-scoped so other pages keep their spacing. */
@media (max-width: 640px) {
  main.page-eeg_lead_simulator { padding-left: 8px; padding-right: 8px; }
  .page-eeg_lead_simulator .tab-content { padding-left: 8px; padding-right: 8px; }
  .page-eeg_lead_simulator .fundamentals-content { padding-left: 8px; padding-right: 8px; }
  .page-eeg_lead_simulator .fundamentals-section { padding-left: 10px; padding-right: 10px; }
  .page-eeg_lead_simulator .bipolar-math-simulator { padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* The page shell (line 7) and .tab-content (line 583) set their padding with
   !important, so specificity alone could not win - these have to match it. */
@media (max-width: 640px) {
  main.page-eeg_lead_simulator {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .page-eeg_lead_simulator .tab-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* "-10 - -100 = +90 uV" is the widest sum two 3-digit negatives can make;
   let it wrap on a phone instead of running under the arrow. */
@media (max-width: 560px) {
  .bpm-stage .calc-head .math-row { white-space: normal; flex-wrap: wrap; }
}

/* ==========================================================================
   GUIDED TOUR
   A walkthrough that drives the real model. The caption has to sit where the
   channels are already visible, otherwise the reader is told what to look at
   and then has to go find it.
   ========================================================================== */

.bpm-tour-start {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid #0b6ab8;
  border-radius: 999px;
  background: #fff;
  color: #0b6ab8;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}

.bpm-tour-start:hover { background: #eaf2fa; }
.bpm-tour-start i { font-size: 0.72rem; }

body.dark .bpm-tour-start { background: #232c36; border-color: #58a9ec; color: #6cb6f0; }
body.dark .bpm-tour-start:hover { background: #2b3540; }

.bpm-tour {
  border: 1px solid #b9d5ee;
  border-radius: 10px;
  background: #f4f9fd;
  margin-bottom: 0.7rem;
  overflow: hidden;
}

.bpm-tour[hidden] { display: none; }

.bpm-tour-progress {
  height: 3px;
  background: #dbe8f4;
}

.bpm-tour-progress-fill {
  display: block;
  height: 100%;
  width: 11%;
  background: #0b6ab8;
  transition: width 0.25s ease;
}

.bpm-tour-body { padding: 0.7rem 0.9rem 0.2rem; }

.bpm-tour-step {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3a6a92;   /* 4.09:1 at #4a7ea8 on the tour panel */
}

.bpm-tour-body h5 {
  margin: 0.15rem 0 0.25rem;
  font-size: 0.92rem;
  color: #143d5e;
}

.bpm-tour-body p:last-child {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #34424f;
}

.bpm-tour-nav {
  display: flex;
  gap: 0.4rem;
  padding: 0 0.9rem 0.8rem;
}

.bpm-tour-btn {
  border: 1px solid #b9d5ee;
  background: #fff;
  color: #0b6ab8;
  border-radius: 6px;
  padding: 0.32rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.bpm-tour-btn.is-primary { background: #0b6ab8; border-color: #0b6ab8; color: #fff; }
.bpm-tour-btn.is-quiet { margin-left: auto; border-color: transparent; color: #5a6570; }
.bpm-tour-btn:disabled { opacity: 0.45; cursor: default; }

body.dark .bpm-tour { background: #1d2833; border-color: #35506a; }
body.dark .bpm-tour-progress { background: #2b3b4a; }
body.dark .bpm-tour-step { color: #8fbfe4; }
body.dark .bpm-tour-body h5 { color: #cfe6f8; }
body.dark .bpm-tour-body p:last-child { color: #d6dee6; }
body.dark .bpm-tour-btn { background: #232c36; border-color: #35506a; color: #6cb6f0; }
body.dark .bpm-tour-btn.is-primary { background: #1a6bb5; border-color: #1a6bb5; color: #fff; }
body.dark .bpm-tour-btn.is-quiet { border-color: transparent; color: #aeaeb2; }

/* What the current step is about. Distinct from the focus/quiet marking the
   simulator applies on its own, which is about the physics, not the tour. */
.calc-box.is-tour-focus {
  outline: 2px solid #0b6ab8;
  outline-offset: 2px;
}

.calc-box.is-tour-dim { opacity: 0.42; }

.math-electrode.is-tour-focus label { color: #0b6ab8; }
.math-electrode.is-tour-focus .voltage-display { color: #0b6ab8; font-weight: 700; }

body.dark .calc-box.is-tour-focus { outline-color: #58a9ec; }
body.dark .math-electrode.is-tour-focus label,
body.dark .math-electrode.is-tour-focus .voltage-display { color: #6cb6f0; }

/* ==========================================================================
   BACKGROUND CHECKLIST
   The four questions you ask of every record, before any single waveform.
   Uses its own class rather than the shared .info-box-light utility, which
   sets a translucent background and no colour and so is unreadable in dark.
   ========================================================================== */

.bg-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.7rem;
  margin: 1.1rem 0 1.3rem;
}

.bg-check {
  position: relative;
  padding: 0.75rem 0.85rem 0.8rem 2.3rem;
  border: 1px solid #dfe6ee;
  border-left: 3px solid #1f6f4a;
  border-radius: 0 8px 8px 0;
  background: #f7fbf8;
}

.bg-check-n {
  position: absolute;
  left: 0.7rem;
  top: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #1f6f4a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.bg-check strong {
  display: block;
  font-size: 0.86rem;
  color: #1d2a36;
  margin-bottom: 0.15rem;
}

.bg-check span:not(.bg-check-n) {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4a5560;
}

body.dark .bg-check {
  background: #222a26;
  border-color: #3a3a3c;
  border-left-color: #5aa872;
}

body.dark .bg-check-n { background: #5aa872; color: #10231a; }
body.dark .bg-check strong { color: #f5f5f7; }
body.dark .bg-check span:not(.bg-check-n) { color: #e5e5ea; }

/* ==========================================================================
   ONE DISCHARGE, FOUR MONTAGES
   The control strip has to sit above the traces: the point is watching the
   same field redraw when you change the subtractions, which only works if
   the button and the tracings are visible at the same time.
   ========================================================================== */

.montage-compare {
  /* Without min-width:0 the fixed-size canvas inside props the whole widget
     open and it never shrinks with the column - it just runs off the page. */
  min-width: 0;
  max-width: 100%;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #fbfcfe;
  padding: 0.85rem 0.95rem 0.9rem;
  margin: 1.1rem 0 1.2rem;
}

.mc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.6rem;
  margin-bottom: 0.7rem;
}

.mc-group { min-width: 0; }

.mc-group-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5a6570;
  margin-bottom: 0.3rem;
}

.mc-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.mc-chip {
  border: 1px solid #d7dee6;
  background: #fff;
  color: #45515e;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.mc-chip:hover { background: #eef4fa; }
.mc-chip.is-active { background: #0b6ab8; border-color: #0b6ab8; color: #fff; }

.mc-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: #5a6570;
}

.mc-stage {
  min-width: 0;
  max-width: 100%;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  padding: 0.3rem 0.4rem;
  overflow-x: auto;
}

#mc-canvas { display: block; max-width: 100%; }

.mc-peak {
  margin: 0.45rem 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: #5a6570;
  font-family: 'Courier New', monospace;
}

.montage-compare .component-footer {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
}

body.dark .montage-compare { background: #1f272f; border-color: #3a3a3c; }
body.dark .mc-group-label { color: #aeaeb2; }
body.dark .mc-chip { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .mc-chip:hover { background: #3a3a3c; }
body.dark .mc-chip.is-active { background: #1a6bb5; border-color: #1a6bb5; color: #fff; }
body.dark .mc-hint { color: #aeaeb2; }
body.dark .mc-stage { background: #232c36; border-color: #3a3a3c; }
body.dark .mc-peak { color: #c7c7cc; }

@media (max-width: 560px) {
  .mc-controls { gap: 0.7rem; }
  .mc-chip { font-size: 0.72rem; padding: 0.28rem 0.6rem; }
}

/* ==========================================================================
   FREQUENCY EXPLORER
   One trace, one sensitivity, one time base - click through the bands. The
   shared scale is the point: it is what makes the amplitude claim checkable.
   ========================================================================== */

.freq-explorer {
  --band: #0b6ab8;
  min-width: 0;
  max-width: 100%;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #fbfcfe;
  overflow: hidden;
  margin: 1.1rem 0 1.3rem;
}

.freq-tabs { display: flex; border-bottom: 1px solid #dfe6ee; }

.freq-tab {
  flex: 1;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  padding: 0.55rem 0.4rem;
  cursor: pointer;
  font: inherit;
  text-align: center;
  min-width: 0;
}

.freq-tab-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #45515e;
}

.freq-tab-hz {
  display: block;
  font-size: 0.66rem;
  color: #5a6570;
  margin-top: 0.1rem;
}

.freq-tab:hover { background: #f2f6fa; }
.freq-tab.is-active { border-bottom-color: var(--band); background: #fff; }
.freq-tab.is-active .freq-tab-name { color: var(--band-ink, var(--band)); }

.freq-stage {
  padding: 0.6rem 0.75rem 0.2rem;
  background: #fff;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

#freq-canvas { display: block; max-width: 100%; }

.freq-readout {
  margin: 0.2rem 0 0.5rem;
  font-size: 0.72rem;
  color: #5a6570;
  font-family: 'Courier New', monospace;
}

.freq-body { padding: 0.2rem 0.9rem 0.7rem; }

.freq-body h4 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  color: var(--band-ink, var(--band));
}

.freq-body p {
  margin: 0 0 0.4rem;
  font-size: 0.87rem;
  line-height: 1.55;
}

.freq-seen {
  font-size: 0.79rem !important;
  font-weight: 600;
  color: #5a6570;
  border-left: 3px solid var(--band);
  padding-left: 0.6rem;
}

.freq-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.9rem 0.85rem;
}

.freq-nav-btn {
  border: 1px solid #d7dee6;
  background: #fff;
  color: #45515e;
  border-radius: 6px;
  padding: 0.32rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.freq-nav-btn:hover { background: #f2f6fa; border-color: var(--band); color: var(--band-ink, var(--band)); }

body.dark .freq-explorer { background: #1f272f; border-color: #3a3a3c; }
body.dark .freq-tabs { border-bottom-color: #3a3a3c; }
body.dark .freq-tab-name { color: #e5e5ea; }
body.dark .freq-tab-hz { color: #aeaeb2; }
body.dark .freq-tab:hover { background: #2c2c2e; }
body.dark .freq-tab.is-active { background: #232c36; }
body.dark .freq-stage { background: #232c36; }
body.dark .freq-readout, body.dark .freq-seen { color: #c7c7cc; }
body.dark .freq-nav-btn { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .freq-nav-btn:hover { background: #3a3a3c; }

/* ==========================================================================
   NORMAL-VARIANT EXPLORER
   Six variants that used to be six thumbnails on six different montages -
   which is unusable, because telling them apart IS the skill. One at a time,
   full width, on one shared page.
   ========================================================================== */

.var-explorer {
  min-width: 0;
  max-width: 100%;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #fbfcfe;
  overflow: hidden;
  margin: 1.1rem 0 1.3rem;
}

.var-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid #dfe6ee;
  background: #f4f7fa;
}

.var-tab {
  /* natural width, not stretched: with four chips the row wraps 3 + 1 and a
     grow factor made the orphan span the full width */
  flex: 0 1 auto;
  min-width: 0;
  border: 1px solid #d7dee6;
  border-radius: 999px;
  background: #fff;
  color: #45515e;
  padding: 0.34rem 0.8rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.var-tab:hover { background: #eaf2fa; border-color: #9db9d4; }

.var-tab.is-active {
  background: #0b6ab8;
  border-color: #0b6ab8;
  color: #fff;
}

.var-tab:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 2px; }

/* The figures are drawn on white paper, so the stage stays white in both
   themes rather than putting a bright rectangle on a dark card by accident. */
.var-stage {
  margin: 0;
  padding: 0.7rem 0.8rem 0.35rem;
  background: #fff;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

/* The whole page has to be readable without scrolling the figure. The pages
   are 1.9:1 so they come out short, and this caps them against the viewport
   as well, for short screens and for the taller figures that carry an inset. */
.var-figure {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  min-width: 620px;              /* below this the 16 channel labels collide */
  margin: 0 auto;
  cursor: zoom-in;
  transition: opacity 0.16s ease;
}

.var-figure.is-loading { opacity: 0.35; }

/* Sits on the white figure paper, which stays white in dark mode too - so the
   ink is fixed rather than theme-dependent. Themed grey here measured 2.2:1. */
.var-caption {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #4a5561;
}

.var-panel { padding: 0.75rem 0.95rem 0.2rem; }

.var-panel h4 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  color: #0b6ab8;
}

.var-panel > p {
  margin: 0 0 0.5rem;
  font-size: 0.87rem;
  line-height: 1.6;
}

.var-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}

.var-meta li {
  border: 1px solid #dfe6ee;
  border-radius: 6px;
  background: #f4f7fa;
  padding: 0.22rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #33404d;
}

.var-meta li span {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #56616d;          /* 6b7783 measured 4.25:1 on the chip fill */
}

.var-tell {
  margin: 0 0 0.2rem !important;
  border-left: 3px solid #c0392b;
  padding-left: 0.65rem;
  font-size: 0.82rem !important;
  line-height: 1.55;
  color: #45515e;
}

.var-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem 0.85rem;
}

.var-arrow {
  border: 1px solid #d7dee6;
  background: #fff;
  color: #45515e;
  border-radius: 6px;
  padding: 0.32rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.var-arrow:hover { background: #eaf2fa; border-color: #0b6ab8; color: #0b6ab8; }

.var-step {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: #5a6570;
}

body.dark .var-explorer { background: #1f272f; border-color: #3a3a3c; }
body.dark .var-tabs { background: #232c36; border-bottom-color: #3a3a3c; }
body.dark .var-tab { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .var-tab:hover { background: #3a3a3c; border-color: #6b7783; }
body.dark .var-tab.is-active { background: #2f8fe0; border-color: #2f8fe0; color: #10171e; }
body.dark .var-stage { background: #fff; }
body.dark .var-panel h4 { color: #66b5f2; }
body.dark .var-meta li { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .var-meta li span { color: #aeaeb2; }
body.dark .var-tell { color: #d6d6db; border-left-color: #e2705f; }
body.dark .var-arrow { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .var-arrow:hover { background: #3a3a3c; border-color: #66b5f2; color: #66b5f2; }
body.dark .var-step { color: #c7c7cc; }

@media (max-width: 640px) {
  .var-tab { flex: 1 1 45%; font-size: 0.74rem; padding: 0.32rem 0.5rem; }
  .var-stage { padding: 0.5rem 0.5rem 0.3rem; }
}

/* ==========================================================================
   READING THE BACKGROUND: the numbered strip as a step flow
   The generic behaviour and look live in components/step-flow.css; these are
   only the overrides that keep this section's existing numbered strip.
   ========================================================================== */

/* The component's default chip look is `.step-tabs > .step-tab`, which is more
   specific than `.bg-check` and so replaced this strip's padding, including
   the 2.3rem left gutter that the absolutely-positioned number badge sits in.
   The number landed on top of its own label. This selector is more specific
   again, and restores every property the default look sets. */
.bg-checklist.step-tabs > .step-tab {
  appearance: none;
  flex: 1 1 100%;
  width: 100%;
  padding: 0.75rem 0.85rem 0.8rem 2.3rem;
  border: 1px solid #dfe6ee;
  border-left: 3px solid #1f6f4a;
  border-radius: 0 8px 8px 0;
  background: #f7fbf8;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.bg-checklist.step-tabs > .step-tab:hover { border-color: #9db9d4; background: #f4f9fe; }

.bg-checklist.step-tabs > .step-tab.is-active {
  border-color: #0b6ab8;
  background: #eef6fd;
  box-shadow: inset 0 0 0 1px #0b6ab8;
}

.bg-checklist.step-tabs > .step-tab.is-active .bg-check-n { background: #0b6ab8; color: #fff; }

body.dark .bg-checklist.step-tabs > .step-tab { background: #2c2c2e; border-color: #48484a; }
body.dark .bg-checklist.step-tabs > .step-tab:hover { background: #3a3a3c; border-color: #6b7783; }
body.dark .bg-checklist.step-tabs > .step-tab.is-active {
  background: #21313f;
  border-color: #66b5f2;
  box-shadow: inset 0 0 0 1px #66b5f2;
}
body.dark .bg-checklist.step-tabs > .step-tab.is-active .bg-check-n { background: #66b5f2; color: #10171e; }

/* ==========================================================================
   10-20 ANATOMICAL MAP
   Was a 900px stack of dense bullets. Landmarks become a grid, the letter
   codes a lookup table, and the number rules a three-item strip.
   ========================================================================== */

.landmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
  margin: 0.7rem 0 1.2rem;
}

.landmark {
  position: relative;
  padding: 0.6rem 0.7rem 0.65rem 2.15rem;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  background: #f8fafc;
}

.landmark-n {
  position: absolute;
  left: 0.6rem; top: 0.62rem;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: #0b6ab8; color: #fff;
  font-size: 0.66rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

.landmark strong { display: block; font-size: 0.85rem; color: #1d2a36; }
.landmark span:not(.landmark-n) {
  display: block; font-size: 0.79rem; line-height: 1.45; color: #4a5560; margin-top: 0.1rem;
}

.code-table-wrap {
  overflow-x: auto;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  margin: 0.6rem 0 1rem;
}

.code-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; min-width: 380px; }

.code-table th {
  text-align: left; background: #f2f6fa; color: #45515e;
  font-size: 0.67rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.45rem 0.7rem; border-bottom: 1px solid #dce3ea;
}

.code-table td { padding: 0.42rem 0.7rem; border-bottom: 1px solid #eef2f6; color: #3c4854; }
.code-table td:first-child { font-weight: 700; color: #0b6ab8; font-family: 'Courier New', monospace; }
.code-table tbody tr:last-child td { border-bottom: 0; }

.rule-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}

.rule {
  padding: 0.5rem 0.65rem;
  border-left: 3px solid #0b6ab8;
  background: #f4f8fc;
  border-radius: 0 6px 6px 0;
}

.rule strong { display: block; font-size: 0.82rem; color: #1d2a36; }
.rule span { display: block; font-size: 0.76rem; color: #5a6570; margin-top: 0.1rem; }

body.dark .landmark { background: #232c36; border-color: #3a3a3c; }
body.dark .landmark strong { color: #f5f5f7; }
body.dark .landmark span:not(.landmark-n) { color: #c7c7cc; }
body.dark .code-table-wrap { border-color: #3a3a3c; }
body.dark .code-table th { background: #2c2c2e; color: #c7c7cc; border-bottom-color: #3a3a3c; }
body.dark .code-table td { color: #e5e5ea; border-bottom-color: #33383d; }
body.dark .code-table td:first-child { color: #6cb6f0; }
body.dark .rule { background: #232c36; border-left-color: #58a9ec; }
body.dark .rule strong { color: #f5f5f7; }
body.dark .rule span { color: #c7c7cc; }

/* ==========================================================================
   DIPOLE ORIENTATION EXPLORER
   The scalp curve is the real dipole potential, so the reader can watch the
   maximum walk away from the source instead of being told that it does.
   ========================================================================== */

.dip-explorer {
  min-width: 0;
  max-width: 100%;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #fbfcfe;
  padding: 0.85rem 0.95rem 0.9rem;
  margin: 1.1rem 0 1.2rem;
}

.dip-controls { margin-bottom: 0.7rem; }

.dip-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.dip-chip {
  border: 1px solid #d7dee6;
  background: #fff;
  color: #45515e;
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.dip-chip:hover { background: #eef4fa; }
.dip-chip.is-active { background: #0b6ab8; border-color: #0b6ab8; color: #fff; }

.dip-slider-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #5a6570;
}

.dip-slider-row input[type="range"] { flex: 1; min-width: 0; }

.dip-slider-row output {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #0b6ab8;
  min-width: 3.2em;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Summation lab. Borrows the dipole explorer's chips, slider row and readout
   so the two Basics simulators read as one instrument rather than two.
   -------------------------------------------------------------------------- */

/* The crowd analogy sits beside the paragraph it explains rather than above
   the lab, so the simulator underneath keeps the full column width. It needs
   it to show nine cells and a time axis. */
.sum-intuition {
  display: grid;
  gap: 0.9rem;
  align-items: start;
  margin: 0.8rem 0 0.2rem;
}

@media (min-width: 760px) {
  .sum-intuition { grid-template-columns: minmax(0, 1fr) 288px; }
}

.sum-intuition-copy > p { margin: 0 0 0.75rem !important; }
.sum-intuition-copy > p:last-child { margin-bottom: 0 !important; }

.sum-intuition-fig {
  margin: 0;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  padding: 0.4rem 0.4rem 0.3rem;
}

.sum-intuition-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.sum-intuition-fig figcaption {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #4a5561;
  text-align: center;
}

.sum-lab {
  margin: 0.9rem 0 1rem;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #f7fafd;
  padding: 0.75rem 0.8rem 0.6rem;
  min-width: 0;
}

.sum-controls { margin-bottom: 0.6rem; }

.sum-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.sum-stage {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  padding: 0.3rem 0.4rem;
}

#sum-canvas { display: block; max-width: 100%; }

.sum-stage figcaption {
  margin-top: 0.3rem;
  font-size: 0.73rem;
  line-height: 1.45;
  color: #4a5561;
}

.sum-lab .dip-readout { margin-top: 0.55rem; }

/* The figure keeps its white paper in dark mode, like every other artwork on
   this page, so its caption stays dark ink rather than following the theme. */
body.dark .sum-intuition-fig { background: #fff; border-color: #3a3a3c; }
body.dark .sum-lab { background: #1f272f; border-color: #3a3a3c; }
body.dark .sum-stage { background: #232c36; border-color: #3a3a3c; }
body.dark .sum-stage figcaption { color: #aeaeb2; }

/* --------------------------------------------------------------------------
   The cortical fold the dipole slider is a position on. Anatomy stays on white
   paper in both themes, like every other figure here. The tissue colours carry
   meaning and inverting them would misrepresent the drawing.
   -------------------------------------------------------------------------- */

/* Cause beside effect. Stacked, the fold and the scalp trace pushed this
   section past two screens and the reader lost sight of the control that
   drives both; side by side the whole argument fits on one. */
.dip-panels {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

@media (min-width: 860px) {
  .dip-panels { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.dip-anatomy {
  margin: 0;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  padding: 0.5rem 0.6rem 0.4rem;
}

.dip-fold-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  margin: auto 0;
}

/* Both panels are columns so their captions sit on the floor of the box and
   the artwork takes the space above, whatever its natural height. */
.dip-anatomy,
.dip-stage { display: flex; flex-direction: column; }
.dip-fold { flex: 1 1 auto; display: flex; align-items: center; }
.dip-panels figcaption { margin-top: auto; }

.dip-panels figcaption {
  margin-top: 0.35rem;
  font-size: 0.73rem;
  line-height: 1.45;
  color: #4a5561;
}

.dip-scalp { stroke: #c2cad2; stroke-width: 5; stroke-linecap: round; }
.dip-skull { stroke: #e2e7ec; stroke-width: 9; stroke-linecap: round; }

.dip-cortex { fill: none; stroke: #e7cdbd; stroke-linejoin: round; stroke-linecap: round; }
.dip-midline { fill: none; stroke: #cba894; stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }

.dipcell-apical { stroke: #6b7885; stroke-width: 1.6; stroke-linecap: round; }
.dipcell-basal { stroke: #6b7885; stroke-width: 1.2; stroke-linecap: round; }
.dipcell-soma { fill: #6b7885; }

.dipcell.is-active .dipcell-apical,
.dipcell.is-active .dipcell-basal { stroke: #0b4f8a; stroke-width: 2.2; }
.dipcell.is-active .dipcell-soma { fill: #0b6ab8; }

.dip-arrow { stroke: #c0392b; stroke-width: 2.6; stroke-linecap: round; }
.dip-arrow-head { fill: #c0392b; }

.dip-overhead { stroke: #8b97a4; stroke-width: 1.2; stroke-dasharray: 4 4; }
.dip-electrode { fill: #1d2a36; stroke: #fff; stroke-width: 1.5; }

.dip-lbl { fill: #6e7b88; font-size: 11px; font-weight: 600; }

.dip-stage {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  padding: 0.3rem 0.4rem;
}

#dip-canvas { display: block; max-width: 100%; }

.dip-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.4rem 1rem;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
}

.dip-k {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6570;
}

.dip-readout strong { color: #1d2a36; font-family: 'Courier New', monospace; }

.dip-explorer .component-footer {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
}

body.dark .dip-explorer { background: #1f272f; border-color: #3a3a3c; }
body.dark .dip-chip { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .dip-chip:hover { background: #3a3a3c; }
body.dark .dip-chip.is-active { background: #1a6bb5; border-color: #1a6bb5; color: #fff; }
body.dark .dip-slider-row { color: #c7c7cc; }
body.dark .dip-slider-row output { color: #6cb6f0; }
body.dark .dip-stage { background: #232c36; border-color: #3a3a3c; }
body.dark .dip-k { color: #aeaeb2; }
body.dark .dip-readout strong { color: #f5f5f7; }

/* Trap variant of the background checklist - same shape as the four checks at
   the top of the section, so the whole section keeps one visual rhythm rather
   than degrading into bullet lists and stacked callout boxes. */
.bg-check.is-trap {
  border-left-color: #c0894a;
  background: #fdf8f0;
}

.bg-check.is-trap .bg-check-n { background: #a8641c; }

body.dark .bg-check.is-trap {
  background: #2c2519;
  border-left-color: #b5762a;
}

body.dark .bg-check.is-trap .bg-check-n { background: #b5762a; color: #1a1206; }


/* ---------------------------------------------------------------------------
   From Cortex to Channel: the field diagram runs full width.
   As the second column of .fundamentals-layout it rendered around a third of
   the column, which is unreadable for a cross-section carrying three numbered
   callouts, and it forced the five-step chain into a narrow strip alongside.
   --------------------------------------------------------------------------- */
.cortex-figure {
  margin: 1.1rem 0 0.4rem;
  padding: 0.7rem 0.8rem 0.6rem;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  background: #fff;
}

.cortex-figure img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}

.cortex-figure figcaption {
  max-width: 78ch;
  margin: 0.55rem auto 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #4a5561;
  text-align: center;
}

body.dark .cortex-figure { background: #fff; border-color: #3a3a3c; }