/* Clean: the modern theme, light and dark, on the Kit tokens
   (css/kit/clean-tokens.css) and the component table in the clean-theme
   plan, section 4.4: cards on --surface with a hairline and --shadow-1,
   inputs at --control-h with the --ring on focus, --text-muted for the
   secondary copy. Every rule is scoped under [data-theme="clean"]; the only
   values defined here are Weather's own chart series, the compared
   cities' two line colours (FEAT-weather-1) and the two ends of the
   Difference and Stripes colours (FEAT-weather-9), per scheme.

   The series are a calm five, one hue each (blue, indigo, orange, violet,
   green), plus cyan and pink for the season facts' snow and freezing days
   (FEAT-weather-11), and each clears 3:1 against --surface in its scheme
   (tests/css.test.js checks it). The compare colours sit at least ΔE 20
   from every series (light's --compare-2 is a teal, away from the summer
   line's orange: review RWX2-7). Dark restates them twice, once for a
   chosen dark scheme and once for the system's, like the tokens sheet. */

:root[data-theme="clean"] {
  --series-snow: #0a7ea8;
  --series-rain: #4052d6;
  --series-summer: #c2410c;
  --series-winter: #8b3fc4;
  --series-humidity: #2e8540;
  --series-snowdays: #0e7490;
  --series-freezedays: #be185d;
  --compare-2: #0f766e;
  --compare-3: #334155;
  --anomaly-cold: #2563eb;
  --anomaly-warm: #dc2626;
}

:root[data-theme="clean"][data-scheme="dark"] {
  --series-snow: #4cc2e8;
  --series-rain: #8c9bff;
  --series-summer: #f59e4a;
  --series-winter: #c38cf2;
  --series-humidity: #5cc97a;
  --series-snowdays: #67e8f9;
  --series-freezedays: #f472b6;
  --compare-2: #fbbf24;
  --compare-3: #e2e8f0;
  --anomaly-cold: #60a5fa;
  --anomaly-warm: #f87171;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="clean"]:not([data-scheme="light"]) {
    --series-snow: #4cc2e8;
    --series-rain: #8c9bff;
    --series-summer: #f59e4a;
    --series-winter: #c38cf2;
    --series-humidity: #5cc97a;
    --series-snowdays: #67e8f9;
    --series-freezedays: #f472b6;
    --compare-2: #fbbf24;
    --compare-3: #e2e8f0;
    --anomaly-cold: #60a5fa;
    --anomaly-warm: #f87171;
  }
}

:root[data-theme="clean"] {
  background-color: var(--bg);
}

:root[data-theme="clean"] body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Page shell: the content keeps its width, capped for very wide screens. */
:root[data-theme="clean"] .page-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

:root[data-theme="clean"] header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--text);
}

:root[data-theme="clean"] .controls label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

/* Input, select: --surface, a --border-alt hairline, --radius-sm, the
   touch-target height; focus is the --focus border plus the --ring. */
:root[data-theme="clean"] .controls select {
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

:root[data-theme="clean"] #city-select {
  max-width: 420px;
}

:root[data-theme="clean"] .controls select:focus {
  outline: none;
}

:root[data-theme="clean"] .controls select:focus-visible {
  border-color: var(--focus);
  box-shadow: var(--ring);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:root[data-theme="clean"] .year-range label {
  font-weight: var(--weight-medium);
}

/* Card / panel. */
:root[data-theme="clean"] .chart-card {
  /* The halo of the part-year label and the ring of the picked point
     (app.js chartColours()): the card's own colour. */
  --chart-surface: var(--surface);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

:root[data-theme="clean"] .chart-card h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

:root[data-theme="clean"] .chart-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* The tooltip is a small raised surface, like a menu. */
:root[data-theme="clean"] .chart-hover {
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
}

:root[data-theme="clean"] .chart-hover .hover-year {
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

:root[data-theme="clean"] .chart-hover .hover-value {
  font-weight: var(--weight-semibold);
}

:root[data-theme="clean"] .city-info {
  padding: 0;
  color: var(--text-muted);
}

:root[data-theme="clean"] #city-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

:root[data-theme="clean"] footer {
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-top-color: var(--border);
}

:root[data-theme="clean"] footer a {
  color: var(--link);
  text-decoration: none;
}

:root[data-theme="clean"] .csv-link {
  color: var(--link);
}

:root[data-theme="clean"] .csv-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  :root[data-theme="clean"] footer a:hover {
    text-decoration: underline;
  }
}

:root[data-theme="clean"] footer a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:root[data-theme="clean"] .loading-state {
  color: var(--text-muted);
}

:root[data-theme="clean"] .error-state p {
  display: inline-block;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--danger-soft-text);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
}

:root[data-theme="clean"] .error-state .retry {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

:root[data-theme="clean"] .error-state .retry:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:root[data-theme="clean"] .units-toggle button,
:root[data-theme="clean"] .temp-view button,
:root[data-theme="clean"] .compare-add,
:root[data-theme="clean"] .compare-remove {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

:root[data-theme="clean"] .units-toggle button[aria-pressed="true"],
:root[data-theme="clean"] .temp-view button[aria-pressed="true"] {
  color: var(--accent-soft-text);
  background: var(--accent-soft);
  border-color: var(--accent);
}

:root[data-theme="clean"] .units-toggle button:focus-visible,
:root[data-theme="clean"] .temp-view button:focus-visible,
:root[data-theme="clean"] .compare-add:focus-visible,
:root[data-theme="clean"] .compare-remove:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:root[data-theme="clean"] .compare-legend {
  font-size: var(--text-sm);
  color: var(--text);
}

:root[data-theme="clean"] .state-tile,
:root[data-theme="clean"] .locate {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
}

:root[data-theme="clean"] .state-tile[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  border-color: var(--focus);
}

:root[data-theme="clean"] .state-tile:focus-visible,
:root[data-theme="clean"] .locate:focus-visible {
  border-color: var(--focus);
  box-shadow: var(--ring);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:root[data-theme="clean"] .locate-status {
  color: var(--text-muted);
}

:root[data-theme="clean"] .data-through {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

:root[data-theme="clean"] .chart-trend {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

:root[data-theme="clean"] .season-facts h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

:root[data-theme="clean"] .season-facts-scroll {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

:root[data-theme="clean"] .season-facts th {
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

:root[data-theme="clean"] .season-facts td {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

:root[data-theme="clean"] .season-facts-more {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

:root[data-theme="clean"] .season-facts-more:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  :root[data-theme="clean"] header h1 {
    font-size: var(--text-xl);
  }

  :root[data-theme="clean"] .chart-card {
    padding: var(--space-4);
  }

  :root[data-theme="clean"] #city-select {
    max-width: none;
  }
}