/* ==========================================================================
   THE HEART'S ELECTRICAL STORY — Design System
   A premium dark-mode educational platform for cardiac electrophysiology.
   ========================================================================== */

/* === Scrollbar === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a4a; }
html { scrollbar-color: #2a2a3a transparent; scrollbar-width: thin; }

/* === Selection === */
::selection { background: rgba(59,130,246,0.25); color: #e8e6e3; }

/* === Focus Ring (accessibility) === */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* === Reading Progress Bar === */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #14b8a6);
  z-index: 100;
  transition: width 80ms linear;
}

/* === Sidebar === */
.sidebar-link {
  position: relative;
  transition: color 200ms ease, background-color 200ms ease;
}
.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: #3b82f6;
  border-radius: 1px;
  transition: height 200ms ease;
}
.sidebar-link.active::before,
.sidebar-link:hover::before {
  height: 60%;
}

/* === Animation Keyframes === */

/* hero-ecg-draw removed — ECG now uses inline SMIL <animate> */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes subtle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes glow-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px var(--glow-color, #3b82f6)); }
  50% { filter: drop-shadow(0 0 16px var(--glow-color, #3b82f6)); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes signal-travel {
  0%   { offset-distance: 0%; opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* === Hero heart: red myocardium + yellow wiring + SMIL impulse & ECG === */

.hero-heart {
  --beat-cycle: 4s;
}

.hero-heart .cond-wire {
  stroke: rgba(245, 210, 60, 0.92);
  stroke-width: 2.15;
  pointer-events: none;
}
.hero-heart .cond-wire.thin {
  stroke-width: 1.3;
  stroke: rgba(234, 196, 45, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .hero-heart svg { animation-play-state: paused; }
  .hero-heart svg animate,
  .hero-heart svg animateMotion { display: none; }
}

/* === Content Reveal === */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: fade-in-up 0.6s ease forwards;
}
.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }
.reveal-delay-4 { animation-delay: 0.4s; }

/* === Base type (Inter only — avoids mixed system fallbacks between weights) === */
html {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === Prose (narrative content) === */
.prose-ep {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.8;
  color: #c8c6c3;
}
/* Opening “hook” line: same family as body prose; do not use font-light (weight 300) — it can substitute a different face on some systems */
.prose-ep .prose-hook {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(232, 230, 227, 0.92);
}
/* Chapter subtitle under H1 — match prose metrics */
.chapter-header-lead {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75;
  color: #8a8a9a;
}
.prose-ep p { margin-bottom: 1.25em; }
.prose-ep strong { color: #e8e6e3; font-weight: 600; }
.prose-ep em { color: #a8a6a3; }
.prose-ep h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e8e6e3;
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.prose-ep h3 {
  font-size: 1.175rem;
  font-weight: 600;
  color: #e8e6e3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* === Component: Mechanism Card === */
.mechanism-card {
  background: linear-gradient(135deg, #161621 0%, #1e1e2e 100%);
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  padding: 1.75rem;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.mechanism-card:hover {
  border-color: #3a3a5a;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* === Component: Clinical Pearl === */
.clinical-pearl {
  position: relative;
  background: linear-gradient(135deg, rgba(20,184,166,0.06) 0%, rgba(20,184,166,0.02) 100%);
  border: 1px solid rgba(20,184,166,0.2);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.5rem 3.5rem;
}
.clinical-pearl::before {
  content: '◆';
  position: absolute;
  left: 1.25rem;
  top: 1.5rem;
  color: #14b8a6;
  font-size: 0.875rem;
}

/* === Component: Insight Box === */
.insight-box {
  position: relative;
  background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(139,92,246,0.02) 100%);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.5rem 3.5rem;
}
.insight-box::before {
  content: '⚡';
  position: absolute;
  left: 1.25rem;
  top: 1.5rem;
  font-size: 0.875rem;
}

/* === Component: Ion Channel Badge === */
.ion-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.ion-badge-na { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25); }
.ion-badge-ca { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.ion-badge-k  { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25); }

/* === Component: "What Proves It?" Callout === */
.proof-callout {
  background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.02) 100%);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 12px;
  padding: 1.5rem;
}

/* === Component: Expandable Deep Dive === */
.deep-dive summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #8a8a9a;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: color 200ms ease, background-color 200ms ease;
}
.deep-dive summary:hover { color: #e8e6e3; background: rgba(30,30,46,0.5); }
.deep-dive summary::-webkit-details-marker { display: none; }
.deep-dive summary .chevron {
  transition: transform 200ms ease;
  font-size: 0.75rem;
}
.deep-dive[open] summary .chevron { transform: rotate(90deg); }
.deep-dive .dive-content {
  padding: 1rem 1rem 0.5rem;
  animation: fade-in 0.3s ease;
}

/* === Component: Key Takeaway === */
.takeaway-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: #c8c6c3;
  line-height: 1.6;
}
.takeaway-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14b8a6;
}

/* === Volume Card (Landing Page) === */
.volume-card {
  background: linear-gradient(135deg, #161621 0%, #1a1a28 100%);
  border: 1px solid #2a2a3a;
  border-radius: 16px;
  padding: 2rem;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.volume-card:hover {
  transform: translateY(-4px);
  border-color: #3a3a5a;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

/* === Chapter Navigation Footer === */
.chapter-nav-footer {
  border-top: 1px solid #2a2a3a;
  margin-top: 4rem;
  padding-top: 2rem;
}

/* === Action Potential Module === */
.ap-phase-btn {
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 200ms ease;
  cursor: pointer;
  background: transparent;
  color: #8a8a9a;
}
.ap-phase-btn:hover { color: #e8e6e3; background: rgba(30,30,46,0.6); }
.ap-phase-btn.active {
  color: #e8e6e3;
  border-color: var(--phase-color, #3b82f6);
  background: var(--phase-bg, rgba(59,130,246,0.1));
}

/* === Glossary Tooltip === */
.glossary-term {
  border-bottom: 1px dotted #5a5a6a;
  cursor: help;
  transition: border-color 200ms ease;
}
.glossary-term:hover { border-color: #8a8a9a; }

/* === Mobile Bottom Nav === */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10,10,15,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #2a2a3a;
  z-index: 50;
  padding: 0.5rem 1rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* === Mermaid Theme Overrides === */
.mermaid {
  background: transparent !important;
}
.mermaid .node rect,
.mermaid .node circle {
  fill: #1e1e2e !important;
  stroke: #3b82f6 !important;
}
.mermaid .edgeLabel {
  background: #161621 !important;
  color: #c8c6c3 !important;
}
.mermaid .label {
  color: #e8e6e3 !important;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reading-progress { transition: none; }
}

/* === Print === */
@media print {
  .sidebar, .right-panel, .mobile-nav, .reading-progress { display: none !important; }
  body { background: white; color: black; }
  .mechanism-card, .clinical-pearl, .insight-box, .proof-callout {
    border: 1px solid #ccc;
    background: #f9f9f9;
  }
}