/*
 * AV DS 4 data surfaces for KӨZ.
 * Keep data pages editorial and legible: one clear tool frame for maps/charts,
 * quiet metric rows, and no nested card treatment.
 */

.td-page,
.td-engine {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.td-hero,
.td-engine-hero,
.td-regions-hero,
.td-econ-hero {
  text-align: left;
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 32px;
}

.td-hero-label,
.td-engine-hero__label,
.td-regions-hero__eyebrow,
.td-econ-hero__eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.td-hero h1,
.td-engine-hero h1,
.td-regions-hero__title,
.td-econ-hero__title {
  margin: 8px 0 12px;
  color: var(--text);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

.td-hero-sub,
.td-engine-hero p,
.td-regions-hero__sub,
.td-econ-hero__subtitle {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.55;
}

.td-nav-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

.td-nav-card {
  min-height: 78px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.td-nav-card:hover,
.td-nav-card:focus-visible {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: none;
  transform: translateY(-1px);
}

.td-kpi-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.td-kpi {
  min-height: 94px;
  border: 0;
  border-right: 1px solid var(--border-light);
  border-radius: 0;
  background: transparent;
  padding: 18px 16px;
  text-align: left;
  box-shadow: none;
}

.td-kpi:last-child { border-right: 0; }
.td-kpi:hover { box-shadow: none; background: var(--surface-2); }

.td-kpi-value,
.td-metric__value,
.td-engine-cell__value {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}

.td-kpi-label,
.td-engine-cell__label,
.td-metric__label {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.td-section {
  margin-bottom: 48px;
}

.td-section-head,
.td-engine-section__head {
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.td-section-head h2,
.td-engine-section__title {
  font-size: 21px;
  letter-spacing: 0;
}

.td-section-head a {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.td-chart-wrap {
  min-height: 320px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}

.td-chart-wrap canvas {
  min-height: 276px;
  max-height: 360px;
}

.td-grid-2 {
  gap: 32px;
}

.td-person-card,
.td-qa-card,
.td-metric,
.td-story-card,
.td-artifact-list,
.td-stories-list {
  border-radius: 8px;
}

.td-person-card,
.td-qa-card,
.td-metric,
.td-story-card {
  border-color: var(--border-light);
  box-shadow: none;
}

.td-person-card:hover,
.td-story-card:hover {
  border-color: var(--accent);
  box-shadow: none;
  transform: translateY(-1px);
}

.td-region-map,
.td-chart-section,
.td-artifact-list {
  border-radius: 8px;
  border-color: var(--border-light);
  box-shadow: var(--shadow-xs);
}

.td-region-map__header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-light);
}

.td-region-map__body {
  min-height: 360px;
}

.td-region-map__canvas {
  position: relative;
  min-height: 380px;
}

.td-region-map__state {
  display: grid;
  min-height: 380px;
  place-items: center;
  padding: 32px;
  color: var(--text-muted);
  background: linear-gradient(110deg, transparent 20%, var(--surface-2) 45%, transparent 70%);
  background-size: 220% 100%;
  font-size: 13px;
  text-align: center;
  animation: td-map-state-shimmer 1.8s ease-in-out infinite;
}

.td-region-map__meta {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.td-region-map__meta strong {
  color: var(--text-secondary);
  font-weight: 700;
}

.td-region-map__canvas[data-state="empty"] .td-region-map__state,
.td-region-map__canvas[data-state="error"] .td-region-map__state {
  background: var(--surface-2);
  animation: none;
}

.td-region-map__canvas[data-state="error"] .td-region-map__state {
  color: var(--negative, #a53d3d);
}

@keyframes td-map-state-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.td-methodology,
.td-callout {
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: none;
}

.td-methodology {
  margin-top: 16px;
  padding: 18px 20px;
}

.td-rates-strip {
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-light);
}

.td-rate-chip {
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
}

@media (max-width: 980px) {
  .td-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .td-kpi:nth-child(3n) { border-right: 0; }
  .td-kpi:nth-child(n + 4) { border-top: 1px solid var(--border-light); }
}

@media (max-width: 640px) {
  .td-page,
  .td-engine { padding: 24px 16px 56px; }
  .td-hero,
  .td-engine-hero,
  .td-regions-hero,
  .td-econ-hero { padding: 24px 0; margin-bottom: 24px; }
  .td-hero h1,
  .td-engine-hero h1,
  .td-regions-hero__title,
  .td-econ-hero__title { font-size: 28px; }
  .td-nav-grid,
  .td-kpi-strip { grid-template-columns: 1fr; }
  .td-kpi { min-height: 0; border-right: 0; border-top: 1px solid var(--border-light); }
  .td-kpi:first-child { border-top: 0; }
  .td-kpi:nth-child(n + 4) { border-top: 1px solid var(--border-light); }
  .td-chart-wrap { min-height: 260px; padding: 12px; }
  .td-chart-wrap canvas { min-height: 220px; }
  .td-region-map__body { grid-template-columns: 1fr; }
  .td-region-map__canvas,
  .td-region-map__state { min-height: 280px; }
}

[data-theme="dark"] .td-nav-card:hover,
[data-theme="dark"] .td-nav-card:focus-visible {
  background: var(--surface-1);
}