/* app/assets/stylesheets/era_themes.css */
/* Stable, non-Tailwind era theming via CSS variables */

.era {
  --era-bg: rgba(0,0,0,0.04);
  --era-border: rgba(0,0,0,0.10);
  --era-text: rgba(17,24,39,0.92);
  --era-lane: rgba(0,0,0,0.18);
  --era-ring: rgba(0,0,0,0.14);
}

.era--default {
  --era-bg: rgba(0,0,0,0.035);
  --era-border: rgba(0,0,0,0.10);
  --era-text: rgba(17,24,39,0.90);
  --era-lane: rgba(0,0,0,0.16);
  --era-ring: rgba(0,0,0,0.12);
}

/* Human Origins (neutral slate) */
.era--human {
  --era-bg: rgba(15,23,42,0.06);
  --era-border: rgba(15,23,42,0.14);
  --era-text: rgba(15,23,42,0.92);
  --era-lane: rgba(15,23,42,0.22);
  --era-ring: rgba(15,23,42,0.18);
}

/* Ancient (emerald) */
.era--ancient {
  --era-bg: rgba(4,120,87,0.08);
  --era-border: rgba(4,120,87,0.18);
  --era-text: rgba(6,95,70,0.95);
  --era-lane: rgba(4,120,87,0.24);
  --era-ring: rgba(4,120,87,0.20);
}

/* Classical (indigo) */
.era--classical {
  --era-bg: rgba(67,56,202,0.08);
  --era-border: rgba(67,56,202,0.18);
  --era-text: rgba(49,46,129,0.95);
  --era-lane: rgba(67,56,202,0.24);
  --era-ring: rgba(67,56,202,0.20);
}

/* Post-Classical (sky) */
.era--post {
  --era-bg: rgba(2,132,199,0.08);
  --era-border: rgba(2,132,199,0.18);
  --era-text: rgba(7,89,133,0.95);
  --era-lane: rgba(2,132,199,0.24);
  --era-ring: rgba(2,132,199,0.20);
}

/* Early Modern (violet) */
.era--early {
  --era-bg: rgba(109,40,217,0.08);
  --era-border: rgba(109,40,217,0.18);
  --era-text: rgba(76,29,149,0.95);
  --era-lane: rgba(109,40,217,0.24);
  --era-ring: rgba(109,40,217,0.20);
}

/* Industrial (amber) */
.era--industrial {
  --era-bg: rgba(217,119,6,0.09);
  --era-border: rgba(217,119,6,0.20);
  --era-text: rgba(146,64,14,0.95);
  --era-lane: rgba(217,119,6,0.22);
  --era-ring: rgba(217,119,6,0.20);
}

/* Modern (zinc) */
.era--modern {
  --era-bg: rgba(63,63,70,0.06);
  --era-border: rgba(63,63,70,0.14);
  --era-text: rgba(24,24,27,0.92);
  --era-lane: rgba(63,63,70,0.18);
  --era-ring: rgba(63,63,70,0.14);
}

.timeline-era-pill {
  background: var(--era-bg);
  border-color: var(--era-border);
  color: var(--era-text);
  backdrop-filter: blur(1px);

  /* KEY: do NOT force width bigger than the timeline math */
  min-width: 0;

  /* keep pills readable without forcing width */
  padding-left: 12px;
  padding-right: 12px;
}

.timeline-era-pill:hover {
  z-index: 50;
}

/* make tiny pills easier to hit without changing layout */
.timeline-era-pill::before {
  content: "";
  position: absolute;
  inset: -6px;     /* expands hit target */
}



.timeline-era-chip {
  background: color-mix(in srgb, var(--era-bg) 80%, white 20%);
  border-color: var(--era-border);
  color: var(--era-text);
}

.timeline-era-card .timeline-era-chip {
  border-color: color-mix(in srgb, var(--era-border) 85%, black 15%);
}

.timeline-era-lane {
  background: var(--era-lane);
}


.timeline-era-card.era {
  /* ring-like outline for cards (works with your Tailwind ring-1 class) */
  box-shadow: 0 0 0 1px var(--era-ring);
}