/* ============================================================
   RESULTS SECTION — MOBILE FIX + UI POLISH PATCH
   Load this AFTER your main stylesheet:
   <link rel="stylesheet" href="results-fix.css">
   It only overrides what's broken — nothing else in the app
   is touched, and no HTML/JS changes are needed.
   ============================================================ */

/* ---------- 1. SAFETY NET: nothing may cause horizontal scroll ---------- */
#results,
#results * {
  min-width: 0; /* the #1 cause of flex/grid overflow — children default to min-width:auto */
}
#results img,
#results svg,
#results canvas {
  max-width: 100%;
  height: auto;
}

/* ---------- 2. CHARTS: force Chart.js canvases to respect their box ---------- */
.chart-wrap {
  height: clamp(190px, 26vh, 240px);
  padding: 4px 0;
}
.chart-wrap canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
}
.chart-card {
  padding: clamp(14px, 3vw, 24px);
  overflow: hidden; /* Chart.js legends can't blow out the card */
}

/* ---------- 3. STICKY RESULTS NAV → clean horizontal pill strip on mobile ---------- */
@media (max-width: 768px) {
  .results-nav {
    position: sticky;
    top: 60px;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .results-nav::-webkit-scrollbar { display: none; }
  .results-nav button {
    flex: 0 0 auto;
  }
}

/* ---------- 4. PODIUM + BREAKDOWN BARS: stop labels forcing overflow ---------- */
@media (max-width: 640px) {
  .reveal-top {
    grid-template-columns: 1fr;
  }
  .podium-wrap {
    padding: 16px 14px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
  }
  .podium-items { flex: 1 1 100%; }
  .confidence-ring-wrap { flex: 0 0 auto; margin: 0 auto; }

  .podium-eth,
  .eth-cell-name,
  .bar-label {
    white-space: normal;
    overflow-wrap: break-word;
  }
  .bar-label {
    min-width: 0;
    flex: 1 1 84px;
    font-size: 11.5px;
    line-height: 1.25;
  }
  .bar-row {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .bar-track { flex: 1.4 1 60px; }
  .bar-pct { min-width: 30px; }

  .result-main { padding: 16px; }
  .result-primary-name { font-size: 24px; }
}

/* ---------- 5. GRIDS: smaller min-widths so cards don't force scroll ---------- */
@media (max-width: 560px) {
  .eth-grid       { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 8px; }
  .dna-regions    { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
  .measure-grid   { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .ancient-civs-grid,
  .abilities-grid,
  .explainer-grid,
  .genetic-tendency-grid,
  .longevity-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sports-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }

  .eth-cell-name { font-size: 10.5px; }
  .dna-region-pct { font-size: 20px; }
}

/* ---------- 6. CARD SPACING: consistent vertical rhythm on phones ---------- */
@media (max-width: 560px) {
  #results {
    padding:
      calc(76px + env(safe-area-inset-top, 0px))
      14px
      calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .results-header {
    margin-bottom: 14px;
  }

  .results-nav {
    margin: 0 0 14px;
    padding: 6px 2px 8px;
    gap: 6px;
  }

  .treasure-unlock {
    margin-bottom: 14px;
  }

  .insights-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }

  .reveal-card,
  .sub-ethnicity-card,
  .map-card,
  .full-grid-card,
  .ancient-civs-card,
  .three-pillars-card-wrap,
  .results-panel,
  .dna-card,
  .measure-card,
  .facts-card,
  .heatmap-globe-card,
  .genetic-comp-card-wrap {
    padding: 14px;
    border-radius: var(--r-lg);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 14px;
  }

  .charts-row,
  .subChartsRow {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }

  .full-grid-title,
  .map-title,
  .chart-card-title {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .result-main {
    padding: 14px;
  }

  .result-desc {
    margin-bottom: 12px;
    line-height: 1.45;
  }

  .breakdown-title {
    margin-bottom: 8px;
  }

  .breakdown-bars {
    gap: 8px;
  }
}

/* ---------- 7. RESULTS ACTIONS: full-width stacked buttons on tiny screens ---------- */
@media (max-width: 420px) {
  .results-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .results-actions .btn-primary,
  .results-actions .btn-secondary {
    width: 100%;
  }
}

/* ---------- 8. UI POLISH (all sizes) ---------- */

/* Slightly deeper, more tactile card elevation on hover for anything clickable */
.podium-item,
.eth-cell,
.ability-card,
.sport-card,
.civ-card,
.tendency-card,
.longevity-card,
.explainer-card {
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.podium-item:hover,
.eth-cell:hover {
  border-color: var(--border2);
}

/* Quiet hairline on the primary match card */
.reveal-card::before {
  height: 1px;
}

/* Unified truncation for single-line labels — sports/abilities wrap instead */
.podium-eth,
.eth-cell-name,
.dna-region-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.sport-name,
.ability-name {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.3;
  hyphens: auto;
}

/* Confidence ring: keep it from ever colliding with the podium on narrow cards */
.confidence-ring-wrap {
  flex-shrink: 0;
}

/* Insight cards: tighter, evenly balanced on small grids */
@media (max-width: 420px) {
  .insight-val { font-size: 13px; }
  .insight-label { font-size: 9px; }
}

/* Respect reduced motion for the hover lift added above */
@media (prefers-reduced-motion: reduce) {
  .podium-item:hover,
  .eth-cell:hover {
    transform: none;
  }
}