/* ---------- svg sizing (attribute height:auto is invalid SVG, so it's done in CSS) ---------- */
.viz-svg {
  display: block;
  width: 100%;
  height: auto;
}
.viz-svg-compact {
  width: min(420px, 90vw);
  margin: 0 auto;
}

/* ---------- shared stat / hero figure ---------- */
.hero-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 9vw, 6rem);
  color: var(--p-violet);
  line-height: 1;
  margin-top: var(--space-3);
}
.hero-figure .unit {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.28em;
  color: var(--ink-secondary);
  text-transform: lowercase;
}
.hero-figure .heart-mark { color: var(--her); width: 0.5em; height: 0.44em; align-self: center; }
.hero-figure .hero-emoji { font-size: 0.36em; filter: grayscale(0.75) brightness(0.75); opacity: 0.85; }

.days-conversion {
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-style: italic;
}

.te-amo-caption {
  margin-top: var(--space-2);
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-secondary);
}

.mini-evolution {
  margin: var(--space-4) auto 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mini-evolution-title {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.stat-row {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stat-chip .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
}
.stat-chip .label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stat-chip.her .value { color: var(--her); }
.stat-chip.him .value { color: var(--him); }

/* ---------- legend ---------- */
.legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--ink-secondary);
  margin-top: var(--space-2);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

/* ---------- tooltip ---------- */
.viz-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--ink-primary);
  transform: translate(-50%, -110%);
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 20;
  white-space: nowrap;
}
.viz-tooltip.is-visible { opacity: 1; }
.viz-tooltip .tt-title { font-weight: 600; }
.viz-tooltip .tt-sub { color: var(--ink-muted); font-size: 0.72rem; }

/* ---------- bars (nicknames ranking) ---------- */
.bar-rank { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 10px; }
.bar-row .bar-label { font-size: 0.85rem; color: var(--ink-secondary); text-align: right; }
.bar-row .bar-track { position: relative; height: 14px; background: var(--gridline); border-radius: 7px; overflow: visible; }
.bar-row .bar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 7px; transition: width 900ms cubic-bezier(0.16,1,0.3,1); }
.bar-row .bar-value { font-size: 0.8rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- axes ---------- */
.axis text { font-size: 10px; fill: var(--ink-muted); font-family: var(--font-body); }
.axis line, .axis path { stroke: var(--gridline); }
.novios-marker-label {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  fill: var(--ink-primary);
}
.gridline { stroke: var(--gridline); stroke-width: 1; }

/* ---------- heatmap ---------- */
.heatmap-cell { stroke: var(--surface); stroke-width: 2; rx: 2; }
.heatmap-day-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  fill: var(--ink-secondary);
}
.heatmap-legend { display: flex; align-items: center; gap: 4px; justify-content: center; margin-top: var(--space-2); }
.heatmap-legend .swatch { width: 11px; height: 11px; border-radius: 2px; }

/* ---------- wordcloud ---------- */
.wordcloud-word { font-family: var(--font-display); cursor: default; }

/* ---------- media stat grid ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-2);
}
.media-tile {
  background: var(--surface-raised);
  border-radius: 16px;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-soft);
}
.media-tile .media-emoji { font-size: 1.05rem; filter: grayscale(0.7) brightness(0.8); opacity: 0.85; }
.media-tile svg.media-emoji { filter: none; opacity: 1; }
.media-tile .value { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.media-tile .label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- relationship stages ---------- */
.stage-strip { width: 100%; display: flex; border-radius: 14px; overflow: hidden; height: 26px; box-shadow: var(--shadow-soft); }
.stage-strip .stage-seg { position: relative; transition: flex-grow 900ms cubic-bezier(0.16,1,0.3,1); }
.stage-cards { display: flex; gap: var(--space-3); width: 100%; margin-top: var(--space-3); flex-wrap: wrap; justify-content: center; }
.stage-card {
  flex: 1 1 200px;
  max-width: 260px;
  background: var(--surface-raised);
  border-radius: 18px;
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
  text-align: left;
}
.stage-card .stage-name { font-family: var(--font-script); font-style: italic; font-size: 1.15rem; }
.stage-card .stage-total { font-family: var(--font-display); font-weight: 700; font-size: 2rem; margin: 4px 0; }
.stage-card .stage-meta { font-size: 0.75rem; color: var(--ink-muted); }

/* narrated, step-by-step reveal, generalized to every chart slide: the heading
   narrates first (eyebrow, then title, then lede), then the visualization
   fades in as a whole. Slides with their own richer per-element choreography
   (stages, media) opt out via :not() and define their own timing below. */
.slide:not(.title-slide):not(.closing-slide) .slide-heading .eyebrow,
.slide:not(.title-slide):not(.closing-slide) .slide-heading h2,
.slide:not(.title-slide):not(.closing-slide) .slide-heading .lede,
.slide:not(.title-slide):not(.closing-slide):not(#slide-stages):not(#slide-media):not(#slide-nicknames) .chart-slot {
  opacity: 0;
  transition: opacity 500ms ease;
}
.slide.is-active:not(.title-slide):not(.closing-slide) .slide-heading .eyebrow {
  animation: reveal-block 700ms cubic-bezier(0.16,1,0.3,1) 100ms both;
}
.slide.is-active:not(.title-slide):not(.closing-slide) .slide-heading h2 {
  animation: reveal-block 750ms cubic-bezier(0.16,1,0.3,1) 380ms both;
}
.slide.is-active:not(.title-slide):not(.closing-slide) .slide-heading .lede {
  animation: reveal-block 700ms cubic-bezier(0.16,1,0.3,1) 680ms both;
}
.slide.is-active:not(.title-slide):not(.closing-slide):not(#slide-stages):not(#slide-media):not(#slide-nicknames) .chart-slot {
  animation: reveal-block 800ms cubic-bezier(0.16,1,0.3,1) 940ms both;
}

/* media slide: tiles land one by one, like the stage cards */
#slide-media .media-tile { opacity: 0; transition: opacity 450ms ease; }
#slide-media.is-active .media-tile:nth-of-type(1) { animation: reveal-block 650ms cubic-bezier(0.16,1,0.3,1) 940ms both; }
#slide-media.is-active .media-tile:nth-of-type(2) { animation: reveal-block 650ms cubic-bezier(0.16,1,0.3,1) 1040ms both; }
#slide-media.is-active .media-tile:nth-of-type(3) { animation: reveal-block 650ms cubic-bezier(0.16,1,0.3,1) 1140ms both; }
#slide-media.is-active .media-tile:nth-of-type(4) { animation: reveal-block 650ms cubic-bezier(0.16,1,0.3,1) 1240ms both; }
#slide-media.is-active .media-tile:nth-of-type(5) { animation: reveal-block 650ms cubic-bezier(0.16,1,0.3,1) 1340ms both; }
#slide-media.is-active .media-tile:nth-of-type(6) { animation: reveal-block 650ms cubic-bezier(0.16,1,0.3,1) 1440ms both; }
#slide-media.is-active .media-tile:nth-of-type(7) { animation: reveal-block 650ms cubic-bezier(0.16,1,0.3,1) 1540ms both; }

#slide-stages .slide-heading .eyebrow,
#slide-stages .slide-heading h2,
#slide-stages .slide-heading .lede,
#slide-stages .stage-strip,
#slide-stages .stage-card {
  opacity: 0;
  transition: opacity 500ms ease;
}
#slide-stages.is-active .slide-heading .eyebrow { animation: reveal-block 700ms cubic-bezier(0.16,1,0.3,1) 120ms both; }
#slide-stages.is-active .slide-heading h2 { animation: reveal-block 750ms cubic-bezier(0.16,1,0.3,1) 420ms both; }
#slide-stages.is-active .slide-heading .lede { animation: reveal-block 700ms cubic-bezier(0.16,1,0.3,1) 720ms both; }
#slide-stages.is-active .stage-strip { animation: reveal-block 800ms cubic-bezier(0.16,1,0.3,1) 980ms both; }
#slide-stages.is-active .stage-card:nth-of-type(1) { animation: reveal-block 700ms cubic-bezier(0.16,1,0.3,1) 1420ms both; }
#slide-stages.is-active .stage-card:nth-of-type(2) { animation: reveal-block 700ms cubic-bezier(0.16,1,0.3,1) 1560ms both; }
#slide-stages.is-active .stage-card:nth-of-type(3) { animation: reveal-block 700ms cubic-bezier(0.16,1,0.3,1) 1700ms both; }

/* ---------- milestone pins on the daily chart ---------- */
.milestone-pin { cursor: default; }
.pin-glyph {
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-glow 2.6s ease-in-out infinite;
}
.milestone-pin:hover .pin-glyph { animation-duration: 900ms; }
@keyframes pin-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  50% { filter: drop-shadow(0 0 5px rgba(123, 44, 191, 0.55)); transform: scale(1.12); }
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .bar-row { grid-template-columns: 92px 1fr 36px; }
  .stat-row { gap: var(--space-2); }
}