/* Layout, and the motion that belongs to it. No colours here: every colour,
   border colour and font lives in retro.css or clean.css, under its
   data-theme, on the Kit tokens (css/kit/). Motion uses the duration and
   easing tokens from css/kit/motion.css only. */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.is-hidden {
  display: none !important;
}

.page-container {
  display: flex;
  flex-direction: column;
  /* Gives back the height of the site-wide header bar above it
     (willperlak.com's /site-nav/, not sticky), so a short page doesn't
     scroll by that much. nav.css publishes it; the fallback 0 is right when
     it isn't loaded (run locally, the bar is absent). */
  min-height: calc(100vh - var(--wp-site-nav-h, 0px));
  padding: 20px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 30px;
  position: relative;
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
  flex: 1;
}

/* The appearance control (js/kit/appearance.js) in the header, where the
   old "Normal UI" button was. */
.appearance-slot {
  flex: 0 1 320px;
  min-width: 0;
}

main {
  flex: 1;
}

footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid;
  font-size: 0.9rem;
  line-height: 1.6;
}

.controls {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.controls label {
  font-weight: bold;
  font-size: 1.1rem;
}

.controls select {
  padding: 10px;
  font-size: 1rem;
  font-family: inherit;
}

.loading-state,
.error-state {
  padding: 20px;
  text-align: center;
  font-size: 1.1rem;
}

/* The error's Retry: its own line under the message, a full touch target. */
.error-state .retry {
  display: block;
  min-height: 44px;
  min-width: 88px;
  margin: 12px auto 0;
  padding: 0 16px;
  font: inherit;
  cursor: pointer;
}

/* The units switch (FEAT-weather-6): two buttons side by side under the
   city select, each a full touch target. */
.units-toggle {
  display: flex;
  align-self: flex-start;
  gap: 8px;
}

.units-toggle button {
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  cursor: pointer;
}

/* Comparing cities (FEAT-weather-1): under the city select, a select and a
   remove button per compared city, then the add button, each a full touch
   target. */
.compare {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.compare-rows {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 10px;
}

.compare-rows:empty {
  display: none;
}

.compare-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-row .compare-select {
  flex: 1;
  min-width: 0;
}

.compare-add,
.compare-remove {
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  cursor: pointer;
}

.compare-remove {
  flex: none;
  min-width: 44px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
}

/* The legend over the charts while comparing: a sample of each city's line
   and its name, across the whole grid. */
.compare-legend {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.compare-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.compare-legend .legend-sample {
  flex: none;
  overflow: visible;
}

.compare-note {
  font-style: normal;
}

.chart-hover .hover-line {
  font-size: 1rem;
  white-space: nowrap;
}

/* The temperature charts' Values / Difference / Stripes switch
   (FEAT-weather-9), above the charts: three buttons in a row, each a full
   touch target, wrapping on a phone. */
.temp-view {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.temp-view button {
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  cursor: pointer;
}

.temp-view button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.chart-svg .stripe,
.chart-svg .anomaly-bar,
.chart-svg .zero-line {
  pointer-events: none;
}

/* The map of the states and "Use my location" (FEAT-weather-5), under the
   city select. Tiles are placed by app-side gridRow/gridColumn. */
.pick-alt {
  margin-top: 8px;
}

.state-map summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 3px;
  max-width: 560px;
  margin-top: 8px;
}

.state-tile {
  aspect-ratio: 1;
  min-width: 24px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.locate {
  min-height: 44px;
}

.locate-status {
  margin: 4px 0;
  min-height: 1.2em;
}

/* How far the data goes, under the controls (UX-weather-7). */
.data-through {
  margin: 0 0 16px;
  font-size: 0.85rem;
}

/* The trend sentences under each chart (FEAT-weather-3). */
.chart-trend {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.chart-svg .trend-line {
  pointer-events: none;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

/* The charts arriving is this page's one "route change". */
.charts-grid {
  animation: wp-enter var(--duration) var(--ease-out);
}

.chart-card {
  position: relative;
  padding: 15px;
  border-radius: 8px;
}

.chart-card h2 {
  margin: 0 0 5px 0;
  font-size: 1.3rem;
}

.chart-subtitle {
  font-size: 0.85rem;
  margin: 0 0 15px 0;
}

.chart-svg {
  width: 100%;
  height: 240px;
  display: block;
}

/* The SVG parts app.js draws. Colours come from the tokens at draw time
   (app.js chartColours()); these classes carry only what varies by theme
   beyond colour, in the theme sheets. */
.chart-svg .chart-root,
.chart-svg .grid-line,
.chart-svg .axis-label,
.chart-svg .empty-label {
  pointer-events: none;
}

/* The layer over the plot that takes taps, presses and mouse moves
   (app.js renderChart). Vertical scrolling still starts on it. */
.chart-svg .pointer-layer {
  cursor: crosshair;
  pointer-events: all;
  touch-action: pan-y;
}

/* The in-progress year (dashed segment, hollow marker, its label) and the
   picked year's guide line and marker: drawn, never a target. */
.chart-svg .partial-segment,
.chart-svg .partial-marker,
.chart-svg .partial-label,
.chart-svg .crosshair,
.chart-svg .focus-marker {
  pointer-events: none;
}

/* The year selects sit on one row of their own. .controls is a column flex
   container, so without this each label and select would stack vertically. */
.year-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.chart-hover {
  position: absolute;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 100;
}

.chart-hover .hover-year {
  font-weight: bold;
}

.chart-hover .hover-value {
  font-size: 1.1rem;
}

.city-info {
  margin-top: 30px;
  padding: 15px;
  font-size: 0.9rem;
}

.city-info p {
  margin: 5px 0;
}

.grid-note {
  font-style: italic;
}

/* The season facts table (FEAT-weather-11): six columns scroll sideways in
   their own box on a phone rather than widening the page. */
.season-facts {
  margin-top: 30px;
}

.season-facts h2 {
  margin: 0 0 10px 0;
  font-size: 1.3rem;
}

.season-facts-scroll {
  overflow-x: auto;
}

.season-facts table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.season-facts th,
.season-facts td {
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

.season-facts-more {
  min-height: 44px;
  margin-top: 12px;
  padding: 0 16px;
  font: inherit;
  cursor: pointer;
}

/* FEAT-weather-8: a 44 px touch target (Kit's MIN_TARGET), on a line of
   its own. */
.csv-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* FEAT-weather-4: the rankings across all 50 capitals. Layout only; the
   buttons inherit their colour. */
.rankings {
  margin-top: 24px;
}

.rankings-scroll {
  overflow-x: auto;
}

.rankings-table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.rankings-table th,
.rankings-table td {
  padding: 6px 8px;
  text-align: right;
  white-space: nowrap;
}

.rankings-table th[scope="row"],
.rankings-table thead th:first-child {
  text-align: left;
}

.rankings-table thead button,
.rank-city {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.rankings-status {
  margin: 8px 0;
}

/* The caption starts at the left: centred across a table wider than a
   phone, most of it would sit off-screen in the scroll. */
.rankings-table caption {
  text-align: left;
}

/* The period select is outside .controls, so it gets none of that select's
   styling; this keeps it a full touch target (Kit's MIN_TARGET, the theme
   matrix's audit). */
.rankings select {
  min-height: 44px;
  font: inherit;
}

@media (max-width: 1024px) {
  .charts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 16px;
  }

  header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  header h1 {
    font-size: 1.8rem;
  }

  .appearance-slot {
    flex: none;
    align-self: flex-end;
    width: 100%;
    max-width: 320px;
  }

  .charts-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .chart-card {
    padding: 12px;
  }

  footer {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .page-container {
    padding: 12px;
  }

  header h1 {
    font-size: 1.5rem;
  }

  /* On a phone the appearance control spans the header, as in the other
     apps. */
  .appearance-slot {
    max-width: none;
  }

  .controls {
    margin-bottom: 20px;
  }

  .controls select {
    padding: 8px;
    font-size: 0.95rem;
  }

  .chart-card h2 {
    font-size: 1.1rem;
  }

  .chart-subtitle {
    font-size: 0.8rem;
  }

  .chart-svg {
    height: 200px;
  }
}