/* Retro: the willperlak.com house style, exactly as Weather has always worn
   it. The house tokens are in css/kit/retro-tokens.css; this sheet keeps
   Weather's own literal values where they differ (the starfield, the neon
   labels, the chart palette), so the page looks as it did before the Kit
   tokens existed. Every rule is scoped under [data-theme="retro"].

   Comic Sans MS ships with Windows and macOS but not with iOS, Android or
   most Linux boxes, so the stack names Comic Relief (a metrically equivalent
   SIL OFL clone) after it, and never ends in the generic `cursive`, which
   iOS Safari resolves to Snell Roundhand. The font files are the edge's, at
   /fonts/ on the same origin (willperlak.com static/home/fonts/), so the
   CSP's font-src 'self' covers them and this repo carries no copy. */
@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-700-normal.woff2") format("woff2");
}

:root[data-theme="retro"] {
  /* The chart series, read by app.js at draw time. */
  --series-snow: #00ccff;
  --series-rain: #0099ff;
  --series-summer: #ffee00;
  --series-winter: #cc00ff;
  --series-humidity: #33ff00;
  --series-snowdays: #66ffff;
  --series-freezedays: #ff66cc;
  /* The second and third compared city's line (FEAT-weather-1). */
  --compare-2: #ff9900;
  --compare-3: #ffffff;
  /* The ends of the Difference and Stripes colours (FEAT-weather-9). */
  --anomaly-cold: #3399ff;
  --anomaly-warm: #ff3366;

  background-color: #000010;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 25% 65%, #fff, transparent),
    radial-gradient(2px 2px at 35% 15%, #fff, transparent),
    radial-gradient(1px 1px at 45% 80%, #fff, transparent),
    radial-gradient(1px 1px at 55% 35%, #fff, transparent),
    radial-gradient(2px 2px at 65% 55%, #fff, transparent),
    radial-gradient(1px 1px at 75% 10%, #fff, transparent),
    radial-gradient(1px 1px at 85% 75%, #fff, transparent),
    radial-gradient(2px 2px at 95% 40%, #fff, transparent),
    radial-gradient(1px 1px at 5% 90%, #fff, transparent),
    radial-gradient(1px 1px at 15% 45%, #fff, transparent),
    radial-gradient(1px 1px at 30% 95%, #fff, transparent),
    radial-gradient(2px 2px at 50% 5%, #fff, transparent),
    radial-gradient(1px 1px at 70% 85%, #fff, transparent),
    radial-gradient(1px 1px at 90% 20%, #fff, transparent),
    radial-gradient(1px 1px at 95% 60%, #fff, transparent),
    radial-gradient(120px 120px at 80% 25%, rgba(200, 120, 255, 0.35), transparent 70%),
    radial-gradient(160px 160px at 15% 70%, rgba(80, 160, 255, 0.30), transparent 70%),
    radial-gradient(60px 60px at 60% 65%, #ffcc66 0%, #ff9933 45%, transparent 70%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

:root[data-theme="retro"] body {
  font-family: var(--font-body);
  color: #eaeaea;
  background: transparent;
}

/* Inside a chart, the axis text is the retro yellow at 75% and the grid the
   body text at 15%, as they always were. app.js reads --text-muted and
   --border-alt from the chart's own element, so these two are restated here
   for the charts only; the rest of the page keeps the house values. */
:root[data-theme="retro"] .chart-svg {
  --text-muted: #ffee00;
  --border-alt: #eaeaea;
  /* The colour behind a chart (the page's navy through the card's tint):
     the halo of the part-year label and the ring of the picked point. */
  --chart-surface: #000010;
}

:root[data-theme="retro"] .chart-svg .axis-label {
  opacity: 0.75;
}

:root[data-theme="retro"] .chart-svg .grid-line {
  opacity: 0.15;
}

:root[data-theme="retro"] header h1 {
  text-shadow: 2px 2px 0 #cc00ff, -1px -1px 0 #00ccff;
  animation: rainbow 6s linear infinite;
}

@keyframes rainbow {
  0%   { color: #ff0000; }
  16%  { color: #ff9900; }
  33%  { color: #ffee00; }
  50%  { color: #33ff00; }
  66%  { color: #00ccff; }
  83%  { color: #cc00ff; }
  100% { color: #ff0000; }
}

:root[data-theme="retro"] .controls label {
  color: #ffee00;
}

:root[data-theme="retro"] .controls select {
  background: rgba(0, 0, 20, 0.7);
  border: 3px outset #cc00ff;
  color: #00ff00;
}

:root[data-theme="retro"] .controls select:focus {
  outline: none;
  border-color: #00ccff;
  box-shadow: 0 0 10px #00ccff;
}

:root[data-theme="retro"] .controls select option {
  background: #000010;
  color: #00ff00;
}

:root[data-theme="retro"] .chart-card {
  background: rgba(0, 0, 20, 0.65);
  border: 4px double #00ccff;
}

:root[data-theme="retro"] .chart-card h2 {
  color: #ffee00;
}

:root[data-theme="retro"] .chart-subtitle {
  color: #00ff00;
  opacity: 0.7;
}

:root[data-theme="retro"] .chart-hover {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}

:root[data-theme="retro"] footer {
  color: #99ff99;
  border-top-color: #99ff99;
  opacity: 0.8;
}

:root[data-theme="retro"] footer a {
  color: #00ccff;
  text-decoration: none;
}

:root[data-theme="retro"] footer a:hover {
  text-decoration: underline;
}

:root[data-theme="retro"] .city-info {
  opacity: 0.8;
}

:root[data-theme="retro"] .csv-link {
  color: #00ccff;
}

:root[data-theme="retro"] .loading-state {
  color: #ffee00;
}

/* The loading pulse is clean's; retro's loading line always stood still. */
:root[data-theme="retro"] .loading-state.wp-loading {
  animation: none;
}

:root[data-theme="retro"] .error-state {
  color: #ff6666;
}

:root[data-theme="retro"] .error-state .retry {
  background: rgba(0, 0, 20, 0.7);
  border: 3px outset #cc00ff;
  color: #00ff00;
}

:root[data-theme="retro"] .error-state .retry:focus-visible {
  outline: none;
  border-color: #00ccff;
  box-shadow: 0 0 10px #00ccff;
}

:root[data-theme="retro"] .units-toggle button,
:root[data-theme="retro"] .temp-view button,
:root[data-theme="retro"] .compare-add,
:root[data-theme="retro"] .compare-remove {
  background: rgba(0, 0, 20, 0.7);
  border: 3px outset #cc00ff;
  color: #00ff00;
}

:root[data-theme="retro"] .units-toggle button[aria-pressed="true"],
:root[data-theme="retro"] .temp-view button[aria-pressed="true"] {
  border-style: inset;
  border-color: #00ccff;
  color: #ffee00;
}

:root[data-theme="retro"] .units-toggle button:focus-visible,
:root[data-theme="retro"] .temp-view button:focus-visible,
:root[data-theme="retro"] .compare-add:focus-visible,
:root[data-theme="retro"] .compare-remove:focus-visible {
  outline: none;
  box-shadow: 0 0 10px #00ccff;
}

:root[data-theme="retro"] .compare-legend {
  color: #00ff00;
}

:root[data-theme="retro"] .state-tile,
:root[data-theme="retro"] .locate {
  background: rgba(0, 0, 20, 0.7);
  border: 3px outset #cc00ff;
  color: #00ff00;
}

:root[data-theme="retro"] .state-tile[aria-pressed="true"] {
  border-style: inset;
}

:root[data-theme="retro"] .state-tile:focus-visible,
:root[data-theme="retro"] .locate:focus-visible {
  outline: none;
  border-color: #00ccff;
  box-shadow: 0 0 10px #00ccff;
}

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

:root[data-theme="retro"] .data-through {
  color: #00ff00;
}

:root[data-theme="retro"] .chart-trend {
  color: #00ff00;
}

:root[data-theme="retro"] .season-facts h2 {
  color: #ffee00;
}

:root[data-theme="retro"] .season-facts-scroll {
  background: rgba(0, 0, 20, 0.65);
  border: 4px double #00ccff;
}

:root[data-theme="retro"] .season-facts th {
  color: #ffee00;
  border-bottom: 1px solid #00ccff;
}

:root[data-theme="retro"] .season-facts td {
  color: #00ff00;
}

:root[data-theme="retro"] .season-facts-more {
  background: rgba(0, 0, 20, 0.7);
  border: 3px outset #cc00ff;
  color: #00ff00;
}

:root[data-theme="retro"] .season-facts-more:focus-visible {
  outline: none;
  box-shadow: 0 0 10px #00ccff;
}