/* Fonts: Baloo 2 (display), Nunito (UI) */
:root {
  --bg: #0f1020;
  --panel: #171833;
  --text: #eef1ff;
  --muted: #a7a9c2;
  --track: #26284e;
  --chip: #22244a;
  --chip-active: #3a3df0;
  --accent: #ffcc00;
  --card-width: 380px; /* default, adjustable via zoom */

  /* Category colors */
  --c-origins: #ff7b7b;
  --c-ecology: #7bd889;
  --c-health: #7bb6ff;
  --c-discovery: #d07bff;
  --c-technology: #ffb36b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 10% 10%, #1a1c3a, var(--bg));
  color: var(--text);
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,1px,1px); border: 0;
}

/* Header */
.site-header {
  padding: 24px 20px 8px;
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(to bottom, rgba(15,16,32,0.95), rgba(15,16,32,0.6) 70%, rgba(15,16,32,0));
  backdrop-filter: blur(4px);
  display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 6px;
}
.branding { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 28px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25)); }
.site-header h1 {
  font-family: 'Baloo 2', cursive; font-weight: 800; letter-spacing: 0.4px; margin: 0;
  background: linear-gradient(90deg, #ffd166, #aaf683, #60a5fa, #c084fc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.header-actions { justify-self: end; }
.home-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; border: 1px solid #2c2f63; background: #171a40; color: var(--text);
  text-decoration: none; font-weight: 700;
}
.home-button:hover { background: #3034b8; }
.tagline { margin: 6px 0 0; color: var(--muted); grid-column: 1 / -1; }

/* Controls */
.controls { display: grid; gap: 12px; padding: 12px 20px 10px; }
.search-wrap input[type="search"] {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #2c2f63; background: #14163a; color: var(--text);
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 12px; border-radius: 999px; border: 1px solid #2c2f63; background: var(--chip); color: var(--text);
  cursor: pointer; transition: transform .1s ease, background .2s ease, border-color .2s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip.active { background: var(--chip-active); border-color: transparent; }

.view-toggles { display: inline-flex; gap: 8px; }
.toggle {
  padding: 8px 12px; border-radius: 10px; border: 1px solid #2c2f63; background: #171a40; color: var(--text);
}
.toggle.active { background: #3034b8; }

/* Zoom control */
.zoom-wrap { display: flex; align-items: center; gap: 10px; }
.zoom-wrap label { color: var(--muted); }
.zoom-wrap input[type="range"] { width: min(420px, 90vw); }

/* Timeline */
.timeline-wrap { padding: 6px 0 24px; }
.timeline {
  position: relative; isolation: isolate;
  padding: 12px 20px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border-top: 1px solid #242653;
}
.timeline--horizontal { display: grid; grid-auto-flow: column; grid-auto-columns: min(var(--card-width), 95vw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.timeline--vertical { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; gap: 16px; }

.time-axis {
  position: sticky; left: 0; z-index: 2; align-self: stretch; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #c3c6ff; text-shadow: 0 1px 0 #0b0c1f;
  background: linear-gradient(90deg, rgba(15,16,32,0.95), rgba(15,16,32,0.2) 60%, rgba(15,16,32,0));
  border: 1px dashed #2f3270; border-radius: 14px; padding: 10px; min-height: 72px;
}

.event-card {
  position: relative; scroll-snap-align: start; background: var(--panel); border: 1px solid #2b2e63; border-radius: 16px; padding: 12px 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex; flex-direction: column; min-height: 240px;
}
.event-card:focus { outline: 2px solid #7bb6ff; outline-offset: 2px; }
.event-card .year { font-weight: 800; letter-spacing: 0.5px; color: #e9ecff; }
.event-card .title { margin: 6px 0 8px; font-family: 'Baloo 2', cursive; font-size: 1.15rem; }
.event-card .summary { color: var(--muted); line-height: 1.4; min-height: 3.2em; margin-bottom: 10px; }
.event-card .meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.event-card .label { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--text); border: 1px solid #2c2f63; }
.event-card .more { padding: 6px 10px; border-radius: 8px; border: 1px solid #2c2f63; background: #1f2150; color: var(--text); cursor: pointer; white-space: nowrap; }
.event-card .more:hover { background: #2a2dad; }
.label.origins { background: var(--c-origins); }
.label.ecology { background: var(--c-ecology); }
.label.health { background: var(--c-health); }
.label.discovery { background: var(--c-discovery); }
.label.technology { background: var(--c-technology); }

.event-card button.more {
  margin-left: auto; padding: 6px 10px; border-radius: 8px; border: 1px solid #2c2f63; background: #1f2150; color: var(--text);
  cursor: pointer; transition: transform .08s ease, background .2s ease;
}

.event-image {
  width: 100%; height: 140px; object-fit: cover; border-radius: 12px; margin-top: 8px; border: 1px solid #2b2e63;
}

/* Era headers */
.era-header {
  scroll-snap-align: start; background: linear-gradient(90deg, #262a70, #1c1f56);
  border: 1px solid #2b2e63; border-radius: 16px; padding: 10px 14px; color: #e6e9ff;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
.era-chip { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #3a3df0; color: white; }
.era-title { font-weight: 800; }
.era-desc { grid-column: 1 / -1; margin: 6px 0 2px; color: var(--muted); font-weight: 500; line-height: 1.35; }

/* Dialog */
dialog#eventDialog {
  border: none; border-radius: 16px; width: min(720px, 92vw); background: #121334; color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  max-height: 85vh; overflow: hidden; /* contain inner scroll */
}
.dialog-close { position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.event-detail { padding: 18px 16px 16px; max-height: calc(85vh - 16px); overflow-y: auto; }
.event-detail header { margin-bottom: 8px; }
.event-detail h2 { font-family: 'Baloo 2', cursive; margin: 0 0 6px; }
.event-detail .event-meta { margin: 0; color: var(--muted); }
.header-line { display: flex; align-items: center; gap: 10px; }
.cat-icon { font-size: 22px; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); }
.event-detail figure { margin: 10px 0; }
.event-detail img { width: 100%; border-radius: 12px; border: 1px solid #2b2e63; }
.event-detail .source a { color: #9db2ff; }
.fun-fact { background: rgba(255, 204, 0, 0.08); border: 1px solid #3b3d6e; border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.fun-fact h3 { margin: 0 0 6px; font-family: 'Baloo 2', cursive; }
.takeaways { margin-top: 12px; }
.takeaways h3 { margin: 0 0 6px; font-family: 'Baloo 2', cursive; }
.takeaways ul { margin: 0; padding-left: 18px; }
.takeaways li { margin: 4px 0; color: var(--text); }
.related { margin-top: 12px; }
.related h3 { margin: 0 0 6px; font-family: 'Baloo 2', cursive; }
.related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.related-pill { padding: 6px 10px; border-radius: 999px; border: 1px solid #2c2f63; background: #1f2150; color: var(--text); cursor: pointer; }
.related-pill:hover { background: #2a2dad; }
.dialog-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.copy-link { padding: 8px 10px; border-radius: 8px; border: 1px solid #2c2f63; background: #1f2150; color: var(--text); cursor: pointer; }
.copy-link:hover { background: #2a2dad; }

/* Footer */
.site-footer { text-align: center; color: var(--muted); padding: 16px 10px 40px; }

/* Minimap placeholder */
.minimap-wrap { padding: 6px 20px 24px; }
.minimap { border: 1px dashed #2f3270; border-radius: 12px; color: #aeb2ff; padding: 10px; text-align: center; background: rgba(58,61,240,0.06); }

/* Responsive tweaks */
@media (min-width: 900px) {
  .timeline--horizontal { grid-auto-columns: var(--card-width); }
  .event-image { height: 170px; }
}