/* city.css — City page (v7) specifics: hero chart heights, lab tiles,
   years input, row classes for the kit tables. Loaded after style.css. */

/* hero multi-grid chart: taller than the standard chart classes */
.hero-card .chart { height: 520px; }
.hero-card .chart-tall { height: 680px; }
@media (max-width: 640px) {
  .hero-card .chart { height: 560px; }
  .hero-card .chart-tall { height: 700px; }
}

/* lab KPI tiles */
.cty-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.cty-tile {
  background: var(--panel, #131824);
  border: 1px solid var(--border, #232c41);
  border-radius: 8px;
  padding: 8px 10px;
}
.cty-tile .k {
  color: var(--muted, #8b95a7);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cty-tile .v {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.cty-tile .s {
  color: var(--muted, #8b95a7);
  font-size: 11px;
  margin-top: 2px;
}

/* free-years input (0 = all) */
.cty-years {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cty-years input {
  width: 58px;
  background: var(--panel, #131824);
  color: var(--text, #d5dbe3);
  border: 1px solid var(--border2, #2d3854);
  border-radius: 6px;
  padding: 3px 6px;
  font-variant-numeric: tabular-nums;
}

/* kit-table row classes */
.dt tr.row-win td { background: rgba(76, 195, 138, 0.08); }
.dt tr.row-dead td { opacity: 0.45; }
.dt tr.row-upwind td { background: rgba(232, 163, 61, 0.07); }
.dt tr.row-miss td { background: rgba(229, 83, 75, 0.05); }