/* Dark-theme contrast and interaction overrides. Loaded after the app bundle. */
:root {
  color-scheme: dark;
  --muted: #a8b2c1;
}

::selection {
  color: #080b10;
  background: #d9ff57;
}

/* Chapter markers act as persistent international navigation, not small eyebrows. */
.story .section-intro > .eyebrow,
.data-section .section-intro > .eyebrow,
.decision > div:first-child > .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: fit-content;
  margin-bottom: 1.35rem;
  margin-top: 0;
  max-width: 100%;
  color: #9cf1e6;
  font-size: clamp(0.92rem, 1.3vw, 1.12rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  line-height: 1;
  white-space: nowrap;
}

.story .section-intro > .eyebrow::after,
.data-section .section-intro > .eyebrow::after,
.decision > div:first-child > .eyebrow::after {
  flex: 0 1 7rem;
  min-width: 2rem;
  width: clamp(3rem, 8vw, 7rem);
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.48;
}

/* Long international chapter markers get their own row on wide layouts. */
@media (min-width: 901px) {
  .story .section-intro,
  .data-section .section-intro {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    column-gap: 3rem;
    row-gap: 1.35rem;
  }

  .story .section-intro > .eyebrow,
  .data-section .section-intro > .eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .story .section-intro > h2,
  .data-section .section-intro > h2 {
    grid-column: 1;
    grid-row: 2;
  }

  .story .section-intro > p:last-child,
  .data-section .section-intro > p:last-child {
    grid-column: 2;
    grid-row: 2;
  }
}

.story .section-intro > h2,
.data-section .section-intro > h2,
.decision > div:first-child > h2 {
  text-wrap: balance;
}

/* The descriptive second line stays strong without overwhelming the lead title. */
.hero__copy h1 em {
  display: inline-block;
  max-width: 18ch;
  font-size: 0.52em;
  line-height: 1.12;
  text-wrap: balance;
}

/* Secondary copy stays visibly subordinate without dropping below readable contrast. */
.metric p,
.section-intro > p:last-child,
.thesis p,
.implications li span,
.footer,
.hero__dek,
.hero__brief {
  color: #a8b2c1;
}

.card-head span,
.thesis > span,
.chart-note,
.table-tools span {
  color: #98a4b6;
}

/* The highlighted thesis card reverses to dark text on lime. */
.thesis--lime > span {
  color: #3a4415;
}

.thesis--lime p {
  color: #28300d;
}

.scope-callout span {
  color: #a2adbc;
}

/* Tailwind utilities in the recovered table bundle used dim defaults. */
thead th,
.text-slate-400,
.text-slate-500 {
  color: #aab4c3 !important;
}

.text-slate-200 {
  color: #eef1f6 !important;
}

.table-tools input {
  color: #eef1f6;
  caret-color: #d9ff57;
  border-color: #465164;
}

.table-tools input::placeholder {
  color: #8f9bad;
  opacity: 1;
}

.tabs button:not(.active):hover {
  color: #eef1f6;
  border-color: #667287;
  background: #151b25;
}

.source-link:hover {
  color: #9cf1e6;
}

/* Recharts ships dark text defaults that are unreadable on custom dark tooltips. */
.recharts-default-tooltip {
  color: #eef1f6 !important;
  background: #101722 !important;
  border-color: #3b4658 !important;
  box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
}

.recharts-default-tooltip .recharts-tooltip-label {
  color: #f5f7fb !important;
  font-weight: 700;
}

.recharts-default-tooltip .recharts-tooltip-item,
.recharts-default-tooltip .recharts-tooltip-item-name,
.recharts-default-tooltip .recharts-tooltip-item-separator,
.recharts-default-tooltip .recharts-tooltip-item-unit {
  color: #b7c1cf !important;
}

.recharts-default-tooltip .recharts-tooltip-item-value {
  color: #ffffff !important;
  font-weight: 750;
}

.recharts-cartesian-axis-tick-value {
  fill: #9da9ba !important;
}

/* One consistent, high-visibility keyboard focus treatment. */
:where(a, button, input, [role="button"]):focus-visible {
  outline: 2px solid #d9ff57;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .brand__mark,
  .tabs button.active,
  .thesis--lime {
    border: 1px solid CanvasText;
  }
}

@media (max-width: 600px) {
  .hero__copy h1 em {
    max-width: 15ch;
    font-size: 0.48em;
  }

  .story .section-intro > .eyebrow,
  .data-section .section-intro > .eyebrow,
  .decision > div:first-child > .eyebrow {
    width: 100%;
    gap: 0.65rem;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}