/* Earth EV Guide Design System */
:root {
  --bg: #0a0d11;
  --panel: #11161c;
  --panel2: #171d24;
  --line: #27313a;
  --text: #f5f7f8;
  --muted: #9aa7b1;
  --teal: #19d3d1;
  --warn: #f3c969;
  --ok: #68e0aa;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; } /* NO smooth scroll — prevents jump on accordion open */

body {
  margin: 0;
  background: linear-gradient(180deg, #080a0d, #0d1217);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 80px; }

/* === HEADER === */
.guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.guide-header-copy { flex: 1 1 auto; min-width: 0; }
.brand {
  color: var(--teal);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.guide-header h1 {
  font-size: clamp(30px, 7vw, 52px);
  line-height: 0.98;
  margin: 0 0 10px;
  letter-spacing: -0.04em;
}
.guide-subtitle { color: var(--muted); font-size: 16px; margin: 0; line-height: 1.5; }
.earth-logo {
  display: block;
  width: 200px;
  max-width: 28%;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
  margin-top: 4px;
}

/* === LEVEL 1 ACCORDION (Part A/B/C/🔧) === */
.acc1 {
  border: 1px solid #2f3c46;
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  margin: 14px 0;
}
.acc1-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  background: linear-gradient(135deg, #151b22, #10151a);
  border: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 850;
  cursor: pointer;
  text-align: left;
  position: relative;
  padding-right: 72px;
}
.acc1-trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.acc1-badge {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--teal);
  color: #051113;
  font-weight: 900;
  font-size: 18px;
}
.acc1-chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-57%);
  font-size: 48px;
  line-height: 0.65;
  color: var(--teal);
  transition: transform 0.18s ease;
  pointer-events: none;
}
.acc1-trigger[aria-expanded="true"] .acc1-chevron {
  transform: translateY(-43%) rotate(180deg);
}
.acc1-panel { display: none; background: #0d1217; padding: 10px 12px 14px; }
.acc1-panel.open { display: block; }

/* Intro block inside Part B (B0 video shown before numbered steps) */
.part-intro { padding: 20px 16px 4px; }
.part-intro h3 { margin: 0 0 6px; font-size: 22px; }
.part-intro p { color: var(--muted); margin: 0 0 16px; line-height: 1.55; }
.path-divider {
  margin: 20px 0 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

/* === LEVEL 2 ACCORDION (A.1, B.2, etc.) === */
.acc2 {
  border: 1px solid var(--line);
  border-radius: 15px;
  margin: 10px 0;
  overflow: hidden;
  background: var(--panel2);
}
.acc2-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 54px 16px 16px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  position: relative;
  min-height: 64px;
}
.acc2-trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.acc2-number {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #0e2527;
  color: var(--teal);
  display: grid;
  place-items: center;
  border: 1px solid #21575a;
  font-size: 14px;
  font-weight: 900;
}
.acc2-chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-56%);
  font-size: 30px;
  line-height: 0.75;
  color: #fff;
  transition: transform 0.18s ease;
  pointer-events: none;
}
.acc2-trigger[aria-expanded="true"] .acc2-chevron {
  transform: translateY(-44%) rotate(180deg);
}
.acc2-panel { display: none; border-top: 1px solid var(--line); padding: 0 16px 16px; }
.acc2-panel.open { display: block; }

/* === LEVEL 3 ACCORDION (Recommendations, Steps, More Info) === */
.acc3 {
  border: 1px solid #314048;
  border-radius: 13px;
  overflow: hidden;
  background: #0e1318;
  margin: 12px 0;
}
.acc3-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 13px 120px 13px 14px;
  background: transparent;
  border: 0;
  color: #dfe7eb;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  position: relative;
  min-height: 44px;
}
.acc3-trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.acc3-cue {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}
.acc3-panel { display: none; border-top: 1px solid #24303a; padding: 0 14px 14px; }
.acc3-panel.open { display: block; }

/* === CONTENT BLOCKS === */
.block-paragraph { font-size: 15px; line-height: 1.55; margin: 14px 0; color: var(--text); }

.block-steps { margin: 12px 0; padding-left: 0; list-style: none; counter-reset: step-counter; }
.block-steps li {
  counter-increment: step-counter;
  display: flex;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
}
.block-steps li::before {
  content: counter(step-counter);
  flex: 0 0 22px;
  height: 22px;
  border-radius: 6px;
  background: #0e2527;
  color: var(--teal);
  border: 1px solid #21575a;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  margin-top: 1px;
}

.block-image { margin: 14px 0; }
.block-image img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  border: 1px solid var(--line);
}
.block-image.lightbox img { cursor: zoom-in; }
.block-image-caption { font-size: 12px; color: var(--muted); margin: 6px 2px 0; text-align: center; }

.block-image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.block-image-pair img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; }

.block-video { margin: 14px 0 10px; border: 1px solid #26343d; border-radius: 16px; overflow: hidden; background: #05080b; }
.block-video video { display: block; width: 100%; height: auto; max-height: 72vh; background: #000; }
.block-video-title { padding: 10px 12px 12px; font-size: 13px; color: #cfd9de; background: #0b1015; border-top: 1px solid #1d2a31; }

.block-warning {
  border: 1px solid #5e5130;
  background: #19160f;
  color: #f3e3ae;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
}
.block-success {
  border: 1px solid #285c49;
  background: #0d1914;
  color: #d4f5e6;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 14px;
}
.block-callout {
  border: 1px solid #35505a;
  background: #0d171c;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.block-distinction { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.distinction-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  font-size: 14px;
}
.distinction-term { font-weight: 800; color: var(--teal); white-space: nowrap; }
.distinction-def { color: var(--text); }

.block-mode-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 14px 0; }
.mode-card {
  border: 1px solid #2c3942;
  border-radius: 13px;
  padding: 12px;
  background: #0b1116;
  text-align: center;
}
.mode-card-icon { font-size: 24px; margin-bottom: 6px; }
.mode-card-title { font-size: 14px; font-weight: 800; display: block; margin-bottom: 4px; }
.mode-card-tag { font-size: 11px; color: var(--teal); display: block; margin-bottom: 6px; }
.mode-card-detail { font-size: 12px; color: var(--muted); line-height: 1.4; }

.block-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
  border-radius: 11px;
  margin: 10px 0;
  font-size: 14px;
}
.block-status-row .status-label { color: var(--muted); }
.status-red { color: #ff5c64 !important; font-weight: 800; }
.status-teal { color: var(--teal) !important; font-weight: 800; }

/* === LIGHTBOX === */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 95vw; max-height: 90vh; border-radius: 10px; object-fit: contain; }

/* === LOADING STATE === */
.guide-loading { color: var(--muted); padding: 60px 20px; text-align: center; font-size: 16px; }
.guide-error { color: #ff6b6b; padding: 40px 20px; text-align: center; }

/* === RESPONSIVE === */
@media (max-width: 620px) {
  .block-mode-cards { grid-template-columns: 1fr; }
  .block-image-pair { grid-template-columns: 1fr; }
  .acc1-trigger { font-size: 18px; padding-right: 64px; }
  .acc1-chevron { font-size: 42px; right: 14px; }
  .earth-logo { width: 130px; max-width: 32%; }
}
@media (max-width: 430px) {
  .guide-header h1 { font-size: 28px; }
  .acc2-trigger { font-size: 16px; }
  .acc3-trigger { padding-right: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .acc1-chevron, .acc2-chevron { transition: none; }
}