/* ─── <TimelinePresidencial> ─── */

.tlp {
  position: relative;
  width: 100%;
  font-family: var(--mono);
}

.tlp-track {
  position: relative;
  width: 100%;
  height: 32px;
  border-radius: 4px;
  border: 0.5px solid var(--border-soft);
  overflow: hidden;
  background: var(--surface-muted);
}

.tlp--compact .tlp-track {
  height: 24px;
}

.tlp-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: filter 120ms ease-out, opacity 120ms ease-out;
  user-select: none;
}

.tlp-seg-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  padding: 0 6px;
}

/* Standalone — interativo */
.tlp--standalone .tlp-seg,
.tlp--compact.tlp--interactive .tlp-seg {
  cursor: pointer;
}

.tlp--interactive .tlp-seg:hover,
.tlp--interactive .tlp-seg.is-hovered,
.tlp--interactive .tlp-seg:focus-visible {
  filter: brightness(1.1);
  outline: none;
}

.tlp--interactive .tlp-seg:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ink-1);
}

/* Selected: borda ink-primary + leve elevação visual via brightness */
.tlp--interactive .tlp-seg.is-selected {
  filter: brightness(1.05);
  box-shadow: inset 0 0 0 2px var(--ink-1);
}

/* Quando há seleção, segmentos não-selecionados ficam mais sóbrios */
.tlp--interactive:has(.is-selected) .tlp-seg:not(.is-selected) {
  opacity: 0.55;
}

/* Background — bandas verticais a 12% de opacidade */
.tlp--background {
  position: absolute;
  inset: 0;
  height: 100%;
}

.tlp--background .tlp-track {
  height: 100%;
  border-radius: 0;
  border: none;
  background: transparent;
}

.tlp--background .tlp-seg {
  opacity: 0.12;
  pointer-events: none;
}

.tlp--background .tlp-seg-label {
  display: none;
}

/* Tooltip */
.tlp-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--ink-1);
  color: var(--ink-on-dark);
  padding: 8px 12px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(15, 42, 74, 0.12);
}

.tlp-tooltip::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ink-1);
}

.tlp-tooltip-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 2px;
}

.tlp-tooltip-meta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.72);
}

/* Compact (mobile) */
@media (max-width: 767px) {
  .tlp-track {
    height: 24px;
  }
}