/* ==========================================================================
   Weather Dashboard — styles.css
   Theme: "vintage engineering blueprint" — aged patent-drawing paper in a
   brownish-violet sepia, ink linework, hand-lettered annotations. Layout
   unchanged: Flexbox for header/rows, CSS Grid for forecast + hourly strips.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Aged paper, leaning violet in the shadows */
  --paper-hi: #ebe1cd;
  --paper: #e4d8c4;
  --paper-mid: #d2c2ae;
  --paper-lo: #bfae9f;
  --cream: #efe6d3;

  /* Sepia ink — warm chocolate drifted toward mauve */
  --ink: #46383a;
  --ink-soft: #675051;
  --ink-faint: rgba(70, 56, 58, 0.55);
  --ink-wash: rgba(70, 56, 58, 0.08);
  --ink-wash-strong: rgba(70, 56, 58, 0.16);
  --iron-gall: #6e3421;          /* faded rust ink for errors */
  --iron-gall-soft: #8a4a2f;

  /* Ink-stamped tooltip (dark plate) */
  --plate: #362b28;
  --plate-text: #ede4cf;
  --plate-muted: #c9bbae;

  --font-tech: "Special Elite", "Courier Prime", "Courier New", monospace;
  --font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  --radius: 3px;
  --shadow: 0 2px 5px rgba(54, 42, 44, 0.22);
  --accent: var(--ink);
}

* {
  box-sizing: border-box;
}

/* ---------- Base / drafting table ---------- */
body {
  margin: 0;
  font-family: var(--font-tech);
  color: var(--ink);
  line-height: 1.5;
  background-color: var(--paper-lo);
  background-image:
    linear-gradient(rgba(70, 56, 58, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 56, 58, 0.05) 1px, transparent 1px),
    linear-gradient(160deg, var(--paper) 0%, var(--paper-mid) 45%, var(--paper-lo) 100%);
  background-size: 26px 26px, 26px 26px, cover;
  background-attachment: fixed, fixed, fixed;
}

/* Violet-mauve toning wash + broad age mottling, above the whole sheet.
   This is what drags the classic yellowed-sepia look toward brownish
   violet: a faint multiply gradient plus a low-frequency noise layer so
   the paper ages in blotches, not just fine grain. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='720' height='720' filter='url(%23b)'/%3E%3C/svg%3E"),
    linear-gradient(
      168deg,
      rgba(104, 84, 104, 0.11),
      rgba(86, 69, 90, 0.06) 45%,
      rgba(102, 80, 106, 0.12)
    );
  background-size: 720px 720px, cover;
  mix-blend-mode: multiply;
}

/* Paper grain overlay (SVG fractal noise), sits above everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Foxing stains + edge vignette, under the sheet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 4% 6%, rgba(122, 80, 34, 0.16), transparent 22%),
    radial-gradient(circle at 96% 4%, rgba(110, 72, 30, 0.13), transparent 20%),
    radial-gradient(circle at 98% 92%, rgba(96, 62, 26, 0.17), transparent 26%),
    radial-gradient(circle at 3% 94%, rgba(130, 88, 40, 0.12), transparent 22%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(70, 56, 58, 0.14) 100%);
}

::selection {
  background: rgba(70, 56, 58, 0.28);
  color: var(--cream);
}

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #cfc1ae;
}
::-webkit-scrollbar-thumb {
  background: #a3938a;
  border: 3px solid #cfc1ae;
  border-radius: 6px;
}

/* Blueprint owns the sepia scrollbar; Modern/Dark get neutral glass-neutral
   thumbs so the chrome doesn't clash with the material */
[data-theme="modern"]::-webkit-scrollbar-track {
  background: #e9eaef;
}
[data-theme="modern"]::-webkit-scrollbar-thumb {
  background: #c7c7cc;
  border: 3px solid #e9eaef;
}
[data-theme="dark"]::-webkit-scrollbar-track {
  background: #1c1c1e;
}
[data-theme="dark"]::-webkit-scrollbar-thumb {
  background: #48484a;
  border: 3px solid #1c1c1e;
}

/* ---------- The drawing sheet ---------- */
.container {
  position: relative;
  z-index: 0; /* stacking context so the backing sheet pseudo stays behind */
  max-width: 1100px;
  margin: 28px auto 48px;
  padding: 30px 26px 56px;
  background:
    linear-gradient(rgba(239, 230, 211, 0.92), rgba(235, 224, 198, 0.88));
  border: 1px solid var(--ink-faint);
  /* uneven, hand-trimmed deckle */
  border-radius: 4px 16px 5px 18px / 17px 5px 15px 6px;
  box-shadow:
    var(--shadow),
    inset 0 0 60px rgba(108, 86, 100, 0.08);
}

/* Backing sheet, slightly askew beneath the page */
.container::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px -7px -9px 9px;
  background: #c4b5a3;
  transform: rotate(0.45deg);
  border-radius: 6px 4px 14px 4px;
  box-shadow: 0 3px 8px rgba(54, 42, 44, 0.28);
}

/* Inner hairline frame with corner registration crosses + ruler ticks */
.container::after {
  content: "";
  position: absolute;
  inset: 11px;
  pointer-events: none;
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  background-image:
    /* ruler ticks along top inside frame */
    repeating-linear-gradient(
      90deg,
      rgba(70, 56, 58, 0.4) 0 1px,
      transparent 1px 12px
    ),
    /* corner crosshairs (two strokes per corner) */
    linear-gradient(rgba(70, 56, 58, 0.75), rgba(70, 56, 58, 0.75)),
    linear-gradient(rgba(70, 56, 58, 0.75), rgba(70, 56, 58, 0.75)),
    linear-gradient(rgba(70, 56, 58, 0.75), rgba(70, 56, 58, 0.75)),
    linear-gradient(rgba(70, 56, 58, 0.75), rgba(70, 56, 58, 0.75)),
    linear-gradient(rgba(70, 56, 58, 0.75), rgba(70, 56, 58, 0.75)),
    linear-gradient(rgba(70, 56, 58, 0.75), rgba(70, 56, 58, 0.75)),
    linear-gradient(rgba(70, 56, 58, 0.75), rgba(70, 56, 58, 0.75)),
    linear-gradient(rgba(70, 56, 58, 0.75), rgba(70, 56, 58, 0.75));
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    calc(100% - 28px) 5px,
    13px 1px, 1px 13px,
    13px 1px, 1px 13px,
    13px 1px, 1px 13px,
    13px 1px, 1px 13px;
  background-position:
    14px 6px,
    left 0 top 0, left 0 top 0,
    right 0 top 0, right 0 top 0,
    left 0 bottom 0, left 0 bottom 0,
    right 0 bottom 0, right 0 bottom 0;
}

.hidden {
  display: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 1px dashed var(--ink);
  outline-offset: 2px;
}

/* ==========================================================================
   Decorative primitives (added markup only; all pointer-transparent)
   ========================================================================== */

/* --- Dimension line: |<---- note ---->| --- */
.dim {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 460px;
  margin: 20px auto 4px;
  color: var(--ink-faint);
  transform: rotate(-0.8deg);
  pointer-events: none;
  user-select: none;
}

.dim-end {
  width: 8px;
  height: 15px;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.dim-run {
  position: relative;
  flex: 1;
  height: 1px;
  background: currentColor;
}

.dim-run::after {
  content: "";
  position: absolute;
  top: -4.5px;
  border: 5px solid transparent;
}

.dim-run.r::after {
  right: -1px;
  border-left-color: currentColor;
}

.dim-run.l::after {
  left: -1px;
  border-right-color: currentColor;
}

.dim-note {
  padding: 0 4px;
  font-family: var(--font-hand);
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* --- Leader-line annotation captions --- */
.note {
  position: absolute;
  z-index: 5;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-soft);
  white-space: nowrap;
  transform: rotate(-2deg);
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
}

/* instance placements */
.note--search {
  top: -48px;
  right: 4%;
}

.note--toggle {
  top: -44px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

.note::before,
.note::after {
  content: "";
  position: absolute;
}

/* line extends to the right of the text, arrow points right */
.note--r { padding-right: 62px; }
.note--r::before {
  top: 0.55em;
  right: 0;
  width: 52px;
  height: 1px;
  background: var(--ink-soft);
}
.note--r::after {
  top: calc(0.55em - 4.5px);
  right: -1px;
  border: 5px solid transparent;
  border-left-color: var(--ink-soft);
}

/* line extends to the left of the text, arrow points left */
.note--l { padding-left: 62px; }
.note--l::before {
  top: 0.55em;
  left: 0;
  width: 52px;
  height: 1px;
  background: var(--ink-soft);
}
.note--l::after {
  top: calc(0.55em - 4.5px);
  left: -1px;
  border: 5px solid transparent;
  border-right-color: var(--ink-soft);
}

/* line drops below the text, arrow points down */
.note--d { padding-bottom: 46px; }
.note--d::before {
  top: 1.25em;
  left: 50%;
  width: 1px;
  height: 36px;
  background: var(--ink-soft);
}
.note--d::after {
  top: calc(1.25em + 36px);
  left: calc(50% - 4.5px);
  border: 5px solid transparent;
  border-top-color: var(--ink-soft);
}

/* --- Cross-hatched section divider --- */
.hatch {
  height: 16px;
  max-width: 520px;
  margin: 26px auto;
  border-top: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 4px,
      rgba(70, 56, 58, 0.22) 4px 5px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 4px,
      rgba(70, 56, 58, 0.22) 4px 5px
    );
  pointer-events: none;
}

/* --- Archive stamp (fixed corner) --- */
.stamp {
  position: fixed;
  right: 20px;
  bottom: 18px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px 7px;
  border: 1.5px solid var(--ink);
  outline: 1px solid var(--ink-soft);
  outline-offset: 3px;
  transform: rotate(-5deg);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  opacity: 0.85;
  /* Distressed rubber-stamp ink: the noise mask makes the impression skip
     and pool unevenly, like a real hand stamp that didn't take evenly. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.32 0 0 0 0.9 0.35'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.32 0 0 0 0.9 0.35'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23m)'/%3E%3C/svg%3E");
  -webkit-mask-size: 240px 240px;
  mask-size: 240px 240px;
}

.stamp-no {
  font-family: var(--font-tech);
  font-size: 0.62rem;
  opacity: 0.8;
}

.stamp-title {
  font-family: var(--font-tech);
  font-size: 0.82rem;
  border-top: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  padding: 2px 0;
  opacity: 0.95;
}

.stamp-sig {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.7;
}

/* Automatic figure numbering on section headings */
body {
  counter-reset: figs;
}

.card-title::before,
.section-title::before {
  counter-increment: figs;
  content: "fig. " counter(figs, lower-roman) " \2014  ";
  font-family: var(--font-hand);
  font-size: 1.05em;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* ---------- Header & search ---------- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 14px;
}

.app-title {
  margin: 0;
  font-family: var(--font-tech);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Compass-rose survey mark before the title (inherits the ink color) */
.app-title .title-glyph {
  width: 0.88em;
  height: 0.88em;
  margin-right: 0.3em;
  vertical-align: -0.08em;
}

.app-title::after {
  content: " \2014 rev. c";
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.search-wrapper {
  position: relative;
  flex: 1 1 320px;
  max-width: 480px;
}

.search-form {
  display: flex;
  gap: 8px;
}

.search-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--font-tech);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(239, 230, 211, 0.6);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(70, 56, 58, 0.12);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.search-input::placeholder {
  color: rgba(70, 56, 58, 0.45);
  font-family: var(--font-hand);
  font-size: 1.05rem;
}

.search-input:focus {
  border-color: var(--ink);
  background: var(--cream);
}

.search-btn {
  padding: 10px 18px;
  font-family: var(--font-tech);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 238, 0.35),
    inset 0 -2px 0 rgba(70, 56, 58, 0.28);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.search-btn:hover {
  background: var(--ink);
  color: var(--cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 238, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.search-btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Geocoding results dropdown */
.search-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 300px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--cream);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(239, 230, 211, 0.6),
    inset 0 0 0 2px var(--ink-faint);
}

.search-results li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 2px;
  border-bottom: 1px dashed rgba(70, 56, 58, 0.2);
  cursor: pointer;
}

.search-results li:last-child {
  border-bottom: none;
}

.search-results li:hover,
.search-results li:focus {
  background: var(--ink-wash-strong);
  outline: none;
}

.search-results .no-results {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--ink-soft);
  cursor: default;
}

.search-results .no-results:hover {
  background: none;
}

.result-name {
  font-weight: 400;
  letter-spacing: 0.03em;
}

.result-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Unit toggle (°C / °F) ---------- */
.unit-toggle {
  position: relative;
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 4px;
  background: rgba(239, 230, 211, 0.6);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.unit-btn {
  padding: 7px 14px;
  text-align: center;
  font-family: var(--font-tech);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s,
    transform 100ms ease-out;
}

.unit-btn:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

/* Press feedback on touch-down (§1 Response). */
.unit-btn:active {
  transform: scale(0.96);
}

.unit-btn.active {
  color: var(--cream);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

/* Sliding active-state pill (Modern/Dark).
   Hidden in Blueprint — its solid ink-block active state is the design. */
.unit-pill {
  display: none;
}

[data-theme="modern"] .unit-toggle,
[data-theme="dark"] .unit-toggle {
  gap: 0; /* flush so the pill aligns with one button width */
}

[data-theme="modern"] .unit-btn,
[data-theme="dark"] .unit-btn {
  flex: 1;
  position: relative;
  z-index: 1;
  /* Higher-contrast inactive color on translucent surface (§12 vibrancy). */
  color: var(--ink-soft);
}

[data-theme="modern"] .unit-btn:hover,
[data-theme="dark"] .unit-btn:hover {
  border-color: transparent;
}

[data-theme="modern"] .unit-btn.active,
[data-theme="dark"] .unit-btn.active {
  color: white;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

[data-theme="modern"] .unit-pill,
[data-theme="dark"] .unit-pill {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  height: calc(100% - 8px);
  background: var(--accent);
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: background-color 240ms ease;
  will-change: transform;
}

[data-theme="dark"] .unit-pill {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}

/* ---------- Generic card: etched drafting plate ---------- */
.card {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  background: rgba(239, 230, 211, 0.55);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 238, 0.4),
    inset 0 -1px 0 rgba(70, 56, 58, 0.12);
}

/* Corner tick marks on plates */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size:
    9px 1px, 1px 9px,
    9px 1px, 1px 9px,
    9px 1px, 1px 9px,
    9px 1px, 1px 9px;
  background-position:
    left 0 top 0, left 0 top 0,
    right 0 top 0, right 0 top 0,
    left 0 bottom 0, left 0 bottom 0,
    right 0 bottom 0, right 0 bottom 0;
  opacity: 0.65;
}

.card-title {
  margin: 0 0 12px;
  font-family: var(--font-tech);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(70, 56, 58, 0.25);
  padding-bottom: 6px;
}

/* ---------- Location card ---------- */
.location-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.location-card h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

#location-meta {
  margin: 4px 0 0;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.location-date {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
  white-space: nowrap;
  transform: rotate(-1deg);
}

/* ---------- Error banner: rust ink warning plate ---------- */
.error-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: var(--iron-gall);
  background-color: rgba(138, 74, 47, 0.1);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 9px,
    rgba(138, 74, 47, 0.09) 9px 10px
  );
  border: 1px solid var(--iron-gall-soft);
  border-left: 4px double var(--iron-gall);
  border-radius: var(--radius);
}

.retry-btn {
  padding: 8px 16px;
  font-family: var(--font-tech);
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iron-gall);
  background: transparent;
  border: 1px solid var(--iron-gall);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.retry-btn:hover {
  background: var(--iron-gall);
  color: var(--cream);
}

/* ---------- UV section ---------- */
.uv-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.uv-value {
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.uv-sub {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.uv-badge {
  padding: 2px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Severity as section-cut hatching: the denser the hatch, the harsher the
   exposure — the convention engineering drawings use for material density.
   Text stays ink-colored at every tier; nothing inverts to a solid plate. */
.uv-badge {
  color: var(--ink);
}

.uv-badge.uv-low,
.uv-hour.uv-low {
  background: var(--ink-wash);
}

.uv-badge.uv-moderate,
.uv-hour.uv-moderate {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 8px,
    rgba(70, 56, 58, 0.26) 8px 9px
  );
}

.uv-badge.uv-high,
.uv-hour.uv-high {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 5px,
    rgba(70, 56, 58, 0.34) 5px 6px
  );
}

.uv-badge.uv-veryhigh,
.uv-hour.uv-veryhigh {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 6px,
      rgba(70, 56, 58, 0.42) 6px 7px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 6px,
      rgba(70, 56, 58, 0.42) 6px 7px
    );
}

.uv-badge.uv-extreme,
.uv-hour.uv-extreme {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 3.5px,
      rgba(70, 56, 58, 0.5) 3.5px 4.5px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 3.5px,
      rgba(70, 56, 58, 0.5) 3.5px 4.5px
    );
  border-width: 1.5px;
}

.uv-hint {
  margin: 0 0 10px;
  font-family: var(--font-hand);
  font-size: 1.02rem;
  color: var(--ink-soft);
  transform: rotate(-0.6deg);
}

.uv-hours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
}

.uv-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border: 1px solid rgba(70, 56, 58, 0.25);
  border-radius: 2px;
  font-size: 0.78rem;
}

.uv-hour-val {
  letter-spacing: 0.02em;
}

.uv-hour-time {
  color: var(--ink-soft);
}

/* Highlight for the "worst times for UV exposure" hours */
.uv-hour.peak {
  border: 1px dashed var(--ink);
  outline: 1px solid rgba(70, 56, 58, 0.35);
  outline-offset: 1px;
  background: rgba(70, 56, 58, 0.14);
}

.uv-hour.peak .uv-hour-time {
  color: var(--ink);
  font-weight: 700;
}

.uv-fallback {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* ---------- Historical averages card ---------- */
.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.history-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: rgba(228, 216, 196, 0.5);
  border: 1px solid rgba(70, 56, 58, 0.35);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s;
}

/* Hover affordance + popup for per-year high/low on this date */
.history-item--has-info {
  cursor: help;
}

.history-item--has-info .history-label {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.history-tooltip {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 200px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--plate-text);
  font-size: 0.85rem;
  line-height: 1.4;
  background: var(--plate);
  border-radius: 2px;
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(237, 228, 207, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.history-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--plate);
}

.history-item:hover .history-tooltip,
.history-item:focus-within .history-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.history-tooltip-title {
  margin-bottom: 2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(237, 228, 207, 0.3);
  padding-bottom: 3px;
}

.history-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

/* "Avg. high this month" card links to the calendar page */
a.history-item--link {
  color: inherit;
  text-decoration: none;
}

.history-item--link::after {
  content: "\203A";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.2rem;
  color: var(--ink-faint);
  transition: color 0.15s, transform 0.15s;
}

.history-item--link:hover {
  border-color: var(--ink);
  background: var(--ink-wash-strong);
}

.history-item--link:hover::after {
  color: var(--ink);
  transform: translateX(2px);
}

.history-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.history-value {
  font-size: 1.8rem;
  letter-spacing: 0.02em;
}

.history-sub {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.history-compare {
  margin: 14px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.history-unavailable {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* ---------- 10-day forecast grid ---------- */
.section-title {
  margin: 0 0 14px;
  font-family: var(--font-tech);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}

.forecast-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  text-align: center;
  background: rgba(239, 230, 211, 0.55);
  border: 1px solid rgba(70, 56, 58, 0.35);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 238, 0.4),
    inset 0 -1px 0 rgba(70, 56, 58, 0.1);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.forecast-card:hover {
  background: var(--cream);
  border-color: var(--ink);
}

/* Hover affordance + hourly popup for forecast cards.
   The tooltip anchors above the card and JS clamps it to stay inside
   the viewport (--tip-x shifts the box; --arrow-x counter-shifts the
   arrow so it keeps pointing at the card center). */
.forecast-card--has-hours::after {
  content: "▾";
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.7rem;
  color: var(--ink-faint);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.15s, transform 0.15s;
}

.forecast-card--has-hours:hover::after,
.forecast-card--has-hours:focus-within::after {
  opacity: 1;
  transform: translateY(2px);
}

.fc-tooltip {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 8px);
  --tip-x: 0px;
  --arrow-x: 0px;
  transform: translateX(calc(-50% + var(--tip-x))) translateY(4px);
  padding: 10px 14px;
  color: var(--plate-text);
  font-size: 0.78rem;
  text-align: left;
  white-space: nowrap;
  background: var(--plate);
  border-radius: 2px;
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(237, 228, 207, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Exit transitions: quick opacity fade, no spatial motion. */
  transition:
    opacity 90ms ease,
    transform 0ms linear 90ms,
    visibility 0ms linear 90ms;
  will-change: opacity, transform;
}

.fc-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(calc(-50% + var(--arrow-x)));
  border: 6px solid transparent;
  border-top-color: var(--plate);
}

/* Entry transitions: slower opacity + spatial rise into place. */
.forecast-card:hover .fc-tooltip,
.forecast-card:focus-within .fc-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-50% + var(--tip-x))) translateY(0);
  transition:
    opacity 150ms ease,
    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0ms linear;
}

.fc-tooltip-title {
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(237, 228, 207, 0.3);
  padding-bottom: 3px;
}

.fc-tooltip-cols {
  display: flex;
  gap: 18px;
}

.fc-tooltip-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.fc-tooltip-hour {
  width: 34px;
  min-width: 0;
}

.fc-tooltip-temp {
  width: 38px;
  min-width: 0;
  text-align: right;
}

.fc-tooltip-precip {
  width: 36px;
  min-width: 0;
  text-align: right;
  color: var(--plate-muted);
}

.forecast-card--today {
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink-soft);
  outline-offset: 3px;
  background: var(--cream);
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s,
    outline-color 0.15s;
}

/* Today already shows the cream fill + ink border at rest; on hover, give
   it a stronger outline + a soft ring so it still reads as "interactive"
   (otherwise the regular :hover rule produces no visible change). */
.forecast-card--today:hover {
  outline-color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 238, 0.4),
    inset 0 -1px 0 rgba(70, 56, 58, 0.1),
    0 0 0 3px var(--ink-wash-strong);
}

/* Hand-plated: the faintest per-card tilt, as if each plate were pasted
   down by hand (Modern/Dark reset this in the theme section below). */
.forecast-card:nth-child(odd) {
  transform: rotate(-0.35deg);
}

.forecast-card:nth-child(even) {
  transform: rotate(0.3deg);
}

.forecast-date {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 600;
  transform: rotate(-1.2deg);
}

/* Line-art weather glyph drawn in currentColor (see app.js for the paths);
   replaces emoji, which rendered off-palette blues and violets. */
.forecast-icon {
  display: flex;
  justify-content: center;
  color: var(--ink);
  line-height: 1.2;
}

.forecast-icon svg {
  width: 38px;
  height: 38px;
}

.forecast-desc {
  margin: 0;
  min-height: 2.4em;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.forecast-temps {
  margin: 2px 0;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.temp-max {
  font-weight: 700;
}

.temp-min {
  color: var(--ink-soft);
}

.forecast-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Small inline glyphs for the forecast meta rows (precip / UV / sunrise) */
.meta-glyph {
  width: 0.95em;
  height: 0.95em;
  margin-right: 3px;
  vertical-align: -0.14em;
}

/* ---------- Skeleton loaders (aged-paper shimmer) ---------- */
.skeleton,
.skeleton-card {
  position: relative;
  overflow: hidden;
  background: var(--paper-mid);
  border-radius: 2px;
}

.skeleton-text {
  display: block;
  height: 1.05rem;
}

.skeleton-card {
  min-height: 240px;
  border: 1px solid rgba(70, 56, 58, 0.25);
}

.skeleton::after,
.skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(250, 244, 228, 0.65),
    transparent
  );
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

/* ---------- Footer: drafting title block ----------
   The ruled identification table from the bottom of an engineering sheet.
   Blueprint renders the full block; Modern/Dark fall back to a plain
   centered credit line (see the theme overrides). */
.app-footer {
  margin-top: 34px;
}

.title-block {
  display: grid;
  font-family: var(--font-tech);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(239, 230, 211, 0.5);
  border: 1px solid var(--ink-soft);
  outline: 1px solid var(--ink-faint);
  outline-offset: 3px;
}

.tb-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr;
}

.tb-row + .tb-row {
  border-top: 1px solid rgba(70, 56, 58, 0.4);
}

.tb-cell {
  padding: 6px 10px;
  min-width: 0;
}

.tb-cell + .tb-cell {
  border-left: 1px solid rgba(70, 56, 58, 0.4);
}

.tb-label {
  color: var(--ink-soft);
}

.tb-label::after {
  content: ":";
  margin-right: 5px;
}

.tb-credit {
  grid-column: 1 / -1;
  margin: 0;
  padding: 6px 10px;
  border-top: 1px dashed rgba(70, 56, 58, 0.45);
  font-family: var(--font-hand);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
}

.tb-credit a {
  color: var(--ink);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.tb-credit a:hover {
  text-decoration-style: solid;
}

/* ---------- Monthly averages calendar page ---------- */
.cal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 12px;
}

.back-link {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-soft);
  text-decoration: none;
  transform: rotate(-1deg);
  display: inline-block;
}

.back-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-title {
  margin: 0;
  min-width: 150px;
  text-align: center;
  font-family: var(--font-tech);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cal-nav-btn {
  padding: 6px 14px;
  font-family: var(--font-tech);
  font-size: 1.15rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 238, 0.35),
    inset 0 -2px 0 rgba(70, 56, 58, 0.28);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cal-nav-btn:hover {
  background: var(--ink);
  color: var(--cream);
}

.cal-meta {
  margin: 0 0 16px;
  font-family: var(--font-hand);
  font-size: 1.08rem;
  color: var(--ink-soft);
  transform: rotate(-0.5deg);
}

/* Ruled drafting table: the lattice lines are the grid's own background
   showing through 1px gaps, so the month reads as one ruled sheet instead
   of a field of floating cards. */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: rgba(70, 56, 58, 0.52);
  border: 1px solid rgba(70, 56, 58, 0.6);
}

.calendar-dow {
  padding: 4px 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
  text-align: center;
  background: var(--paper-hi);
  border-bottom: 1px solid rgba(70, 56, 58, 0.52);
}

.calendar-dow:nth-child(odd) {
  transform: rotate(-1.4deg);
}

.calendar-dow:nth-child(even) {
  transform: rotate(1.2deg);
}

.cal-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 92px;
  min-width: 0; /* let grid tracks honor their allocated width */
  padding: 8px;
  background: var(--paper-hi);
  transition: background 0.15s;
}

.cal-day:hover {
  background: var(--cream);
}

/* Empty leading cells: faint hatch, like an unfinished zone of the table */
.cal-day--empty {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 5px,
      rgba(70, 56, 58, 0.07) 5px 6px
    ),
    var(--paper-hi);
}

/* Today: a double-ruled border drawn inside the cell — the lattice line
   is the outer rule, the inset shadow ring the inner one. */
.cal-day--today {
  background: var(--cream);
  box-shadow:
    inset 0 0 0 2px var(--cream),
    inset 0 0 0 3.5px var(--ink);
}

/* Skeleton loading cells (override the default cell background) */
.cal-day--loading {
  background: var(--paper-mid);
}

.cal-day-num {
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-width: 0;
  overflow-wrap: anywhere;
}

.cal-day-temps {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  min-width: 0;
}

.cal-day-high,
.cal-day-low {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cal-day-high {
  font-weight: 700;
}

.cal-day-low {
  color: var(--ink-soft);
}

.cal-error {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--iron-gall);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 600px) {
  .container {
    margin: 14px 10px 28px;
    padding: 24px 14px 44px;
  }

  /* The askew backing sheet rotates through the page's full height; on a
     tall phone page its rotated bounding box pokes past the viewport and
     creates horizontal scroll — keep the layering, drop the tilt. */
  .container::before {
    transform: none;
  }

  .app-title {
    font-size: 1.35rem;
  }

  /* decorative motifs yield to small screens */
  .dim,
  .note {
    display: none;
  }

  .stamp {
    transform: rotate(-5deg) scale(0.85);
    right: 10px;
    bottom: 10px;
  }

  .search-form {
    flex-direction: column;
  }

  .search-btn {
    width: 100%;
  }

  .location-card h2 {
    font-size: 1.2rem;
  }

  .uv-value {
    font-size: 1.8rem;
  }

  .uv-hours {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  }

  .forecast-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .skeleton-card {
    min-height: 250px;
  }

  .cal-title {
    min-width: 120px;
    font-size: 1.2rem;
  }

  .cal-day {
    min-height: 64px;
    padding: 5px;
  }

  .cal-day-num {
    font-size: 0.78rem;
  }

  .cal-day-temps {
    font-size: 0.68rem;
  }

  /* On phones the tooltip is 24 hours tall — too big for a viewport.
     Cap height, allow internal scroll. */
  .fc-tooltip {
    max-height: 50vh;
    overflow-y: auto;
  }

  /* Theme + unit switchers fit a tighter header on mobile */
  .header-controls {
    width: 100%;
    justify-content: space-between;
  }

  /* Allow the switchers to shrink so they don't push the page wider than
     the viewport on narrow phones. The pills inside use percentage widths
     so they stay aligned as the switcher shrinks. */
  .unit-toggle,
  .theme-switcher {
    flex-shrink: 1;
    min-width: 0;
  }

  .theme-btn {
    min-width: 0;
    padding: 6px 6px;
    font-size: 0.7rem;
  }

  /* Title block tightens but keeps its three-column rows */
  .title-block {
    font-size: 0.64rem;
  }

  .tb-cell {
    padding: 5px 7px;
  }
}

/* ==========================================================================
   Theme system
   - :root carries the Blueprint defaults (no-flash fallback).
   - [data-theme="blueprint"] re-asserts the same tokens explicitly.
   - [data-theme="modern"] / [data-theme="dark"] override variables and
     surface treatments; decorations specific to Blueprint are hidden.
   ========================================================================== */

[data-theme="blueprint"] {
  --accent: var(--ink);
}

[data-theme="modern"] {
  --paper-hi: #ffffff;
  --paper: #f8f9fb;
  --paper-mid: #e9eaef;
  --paper-lo: #d1d1d6;
  --cream: #ffffff;

  --ink: #1c1c1e;
  --ink-soft: #3a3a3c;
  --ink-faint: rgba(60, 60, 67, 0.6);
  --ink-wash: rgba(60, 60, 67, 0.06);
  --ink-wash-strong: rgba(60, 60, 67, 0.12);
  --iron-gall: #d70015;
  --iron-gall-soft: #ff3b30;

  /* Liquid Glass material: translucent surface + edge highlight + sheen.
     The aurora body background gives the blur something to bend. */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-tint: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-highlight: rgba(255, 255, 255, 0.8);
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-soft: blur(14px) saturate(160%);
  --glass-sheen: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 42%
  );
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --glass-shadow-hover: 0 14px 44px rgba(0, 0, 0, 0.14);
  --glass-shadow-float: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* Tooltip "plate" tokens double as floating glass here */
  --plate: rgba(255, 255, 255, 0.72);
  --plate-text: #1c1c1e;
  --plate-muted: rgba(60, 60, 67, 0.65);
  --plate-rule: rgba(60, 60, 67, 0.18);

  --accent: #007aff;
  --accent-tint: rgba(0, 122, 255, 0.15);
  --accent-ring: rgba(0, 122, 255, 0.18);

  --rule-soft: rgba(60, 60, 67, 0.15);

  --font-tech: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: var(--font-tech);

  --radius: 14px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --paper-hi: #3a3a3c;
  --paper: #2c2c2e;
  --paper-mid: #1c1c1e;
  --paper-lo: #000000;
  --cream: #1c1c1e;

  --ink: #f2f2f7;
  --ink-soft: rgba(235, 235, 245, 0.78);
  --ink-faint: rgba(235, 235, 245, 0.5);
  --ink-wash: rgba(255, 255, 255, 0.06);
  --ink-wash-strong: rgba(255, 255, 255, 0.14);
  --iron-gall: #ff453a;
  --iron-gall-soft: #ff6961;

  /* Dark glass: dimmer surface, brighter rim so the edge still catches
     light against the deep background. */
  --glass-bg: rgba(28, 28, 30, 0.55);
  --glass-bg-strong: rgba(44, 44, 46, 0.72);
  --glass-tint: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-blur: blur(20px) saturate(160%);
  --glass-blur-soft: blur(14px) saturate(140%);
  --glass-sheen: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 40%
  );
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --glass-shadow-hover: 0 14px 44px rgba(0, 0, 0, 0.55);
  --glass-shadow-float: 0 16px 48px rgba(0, 0, 0, 0.6);

  --plate: rgba(44, 44, 46, 0.78);
  --plate-text: #f2f2f7;
  --plate-muted: rgba(235, 235, 245, 0.65);
  --plate-rule: rgba(235, 235, 245, 0.22);

  --accent: #0a84ff;
  --accent-tint: rgba(10, 132, 255, 0.16);
  --accent-ring: rgba(10, 132, 255, 0.3);

  --rule-soft: rgba(235, 235, 245, 0.12);

  --font-tech: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: var(--font-tech);

  --radius: 14px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* Aurora backdrop — glass needs colorful light behind it to refract.
   Fixed attachment keeps the blobs under the viewport as cards scroll. */
[data-theme="modern"] body {
  background:
    radial-gradient(
      58% 52% at 12% 14%,
      rgba(0, 122, 255, 0.18),
      transparent 70%
    ),
    radial-gradient(
      48% 44% at 88% 10%,
      rgba(255, 55, 95, 0.13),
      transparent 70%
    ),
    radial-gradient(
      58% 54% at 92% 78%,
      rgba(88, 86, 214, 0.16),
      transparent 72%
    ),
    radial-gradient(
      50% 46% at 8% 84%,
      rgba(52, 199, 89, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, #f4f4f8 0%, #e7e8ee 100%);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background:
    radial-gradient(
      58% 54% at 14% 16%,
      rgba(10, 132, 255, 0.26),
      transparent 70%
    ),
    radial-gradient(
      48% 46% at 86% 12%,
      rgba(191, 90, 242, 0.18),
      transparent 70%
    ),
    radial-gradient(
      58% 54% at 90% 80%,
      rgba(5, 150, 105, 0.15),
      transparent 72%
    ),
    radial-gradient(
      46% 44% at 10% 86%,
      rgba(255, 55, 95, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, #1c1c1e 0%, #000000 100%);
  background-attachment: fixed;
}

/* Container loses the paper sheet in Modern/Dark — body provides the surface */
[data-theme="modern"] .container,
[data-theme="dark"] .container {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ---- Liquid Glass surfaces ----
   Recipe: translucent fill + backdrop blur/saturate (the "frost"), a 1px
   light border and an inset top highlight (light catching the rim), a
   diagonal sheen gradient (the light source), and a soft elevation shadow.
   Small nested cells (history, calendar, UV) get the tint without their
   own backdrop-filter — glass-on-glass over the parent card, and far
   cheaper to composite. */
[data-theme="modern"] .card,
[data-theme="dark"] .card,
[data-theme="modern"] .forecast-card,
[data-theme="dark"] .forecast-card {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight);
}

[data-theme="modern"] .forecast-card,
[data-theme="dark"] .forecast-card {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 var(--glass-highlight);
}

[data-theme="modern"] .forecast-card:hover,
[data-theme="dark"] .forecast-card:hover {
  background-color: var(--glass-bg-strong);
  background-image: var(--glass-sheen); /* base hover shorthand resets it */
  border-color: var(--accent);
  box-shadow:
    var(--glass-shadow-hover),
    inset 0 1px 0 var(--glass-highlight);
}

/* Section rules soften — heavy black lines fight the glass */
[data-theme="modern"] .app-header,
[data-theme="modern"] .cal-header,
[data-theme="modern"] .card-title,
[data-theme="modern"] .section-title {
  border-bottom-color: var(--rule-soft);
}

[data-theme="dark"] .app-header,
[data-theme="dark"] .cal-header,
[data-theme="dark"] .card-title,
[data-theme="dark"] .section-title {
  border-bottom-color: var(--rule-soft);
}

/* Hide blueprint-only decorations in Modern/Dark */
[data-theme="modern"] .dim,
[data-theme="modern"] .note,
[data-theme="modern"] .hatch,
[data-theme="modern"] .stamp,
[data-theme="dark"] .dim,
[data-theme="dark"] .note,
[data-theme="dark"] .hatch,
[data-theme="dark"] .stamp {
  display: none;
}

/* Blueprint's violet toning wash + mottling is not part of Modern/Dark */
[data-theme="modern"]::before,
[data-theme="dark"]::before {
  display: none;
}

[data-theme="modern"] body::before,
[data-theme="modern"] body::after,
[data-theme="modern"] .container::before,
[data-theme="modern"] .container::after,
[data-theme="modern"] .card::before,
[data-theme="modern"] .app-title::after,
[data-theme="modern"] .card-title::before,
[data-theme="modern"] .section-title::before,
[data-theme="dark"] body::before,
[data-theme="dark"] body::after,
[data-theme="dark"] .container::before,
[data-theme="dark"] .container::after,
[data-theme="dark"] .card::before,
[data-theme="dark"] .app-title::after,
[data-theme="dark"] .card-title::before,
[data-theme="dark"] .section-title::before {
  display: none;
}

/* Per-plate tilt is a Blueprint-only decoration */
[data-theme="modern"] .forecast-card:nth-child(odd),
[data-theme="modern"] .forecast-card:nth-child(even),
[data-theme="dark"] .forecast-card:nth-child(odd),
[data-theme="dark"] .forecast-card:nth-child(even) {
  transform: none;
}

/* Footer — plain centered credit in Modern/Dark, floating on a glass
   pill (the ruled title block is Blueprint-only) */
[data-theme="modern"] .title-block,
[data-theme="dark"] .title-block {
  display: block;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-tech);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  color: var(--ink-soft);
}

[data-theme="modern"] .tb-row,
[data-theme="dark"] .tb-row {
  display: none;
}

[data-theme="modern"] .tb-credit,
[data-theme="dark"] .tb-credit {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--glass-tint);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 var(--glass-highlight);
  color: var(--ink-soft);
}

/* Unit-toggle active state — pill provides the visual in Modern/Dark
   (see the unit-toggle block above). This rule kept for reference; the
   active button is transparent and the pill carries the accent fill. */

/* Search button — solid accent on glass (color applied judiciously: one
   saturated control per view), with a lit top rim like the glass panels */
[data-theme="modern"] .search-btn,
[data-theme="dark"] .search-btn {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow:
    0 4px 14px rgba(0, 122, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-theme="modern"] .search-btn:hover,
[data-theme="dark"] .search-btn:hover {
  background: var(--accent);
  color: white;
  filter: brightness(0.92);
  box-shadow:
    0 6px 20px rgba(0, 122, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

[data-theme="modern"] .search-btn:disabled,
[data-theme="dark"] .search-btn:disabled {
  opacity: 0.55;
  filter: none;
}

/* Retry / nav buttons — accent-tinted glass */
[data-theme="modern"] .retry-btn,
[data-theme="modern"] .cal-nav-btn,
[data-theme="dark"] .retry-btn,
[data-theme="dark"] .cal-nav-btn {
  background: var(--glass-tint);
  border-color: var(--accent);
  color: var(--accent);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow:
    0 4px 14px rgba(0, 122, 255, 0.12),
    inset 0 1px 0 var(--glass-highlight);
}

[data-theme="modern"] .retry-btn:hover,
[data-theme="modern"] .cal-nav-btn:hover,
[data-theme="dark"] .retry-btn:hover,
[data-theme="dark"] .cal-nav-btn:hover {
  background: var(--accent);
  color: white;
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.35);
}

/* Search input — inset glass well; focus lights the rim */
[data-theme="modern"] .search-input {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .search-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="modern"] .search-input:focus,
[data-theme="dark"] .search-input:focus {
  background: var(--glass-bg-strong);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Unit-toggle plate — glass track */
[data-theme="modern"] .unit-toggle,
[data-theme="dark"] .unit-toggle {
  background: var(--glass-tint);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

[data-theme="dark"] .unit-toggle {
  background: rgba(255, 255, 255, 0.08);
}

/* Tooltips — floating glass panels (plate tokens carry the fill/ink);
   the blur is strongest here: floating layers read most "liquid" */
[data-theme="modern"] .fc-tooltip,
[data-theme="modern"] .history-tooltip,
[data-theme="dark"] .fc-tooltip,
[data-theme="dark"] .history-tooltip {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow:
    var(--glass-shadow-float),
    inset 0 1px 0 var(--glass-highlight);
}

[data-theme="modern"] .fc-tooltip-title,
[data-theme="modern"] .history-tooltip-title,
[data-theme="dark"] .fc-tooltip-title,
[data-theme="dark"] .history-tooltip-title {
  border-bottom-color: var(--plate-rule);
}

/* Forecast extras: today gets an accent-tinted glass panel */
[data-theme="modern"] .forecast-card--today,
[data-theme="dark"] .forecast-card--today {
  border-color: var(--accent);
  background-color: var(--accent-tint);
  background-image: var(--glass-sheen);
  outline-color: var(--accent);
  outline-offset: 3px;
}

/* History cells — glass tint raised on the parent card glass */
[data-theme="modern"] .history-item,
[data-theme="dark"] .history-item {
  background: var(--glass-tint);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

[data-theme="modern"] .history-item:hover,
[data-theme="dark"] .history-item:hover {
  border-color: var(--accent);
  background: var(--glass-bg-strong);
}

[data-theme="modern"] .history-item--link:hover,
[data-theme="dark"] .history-item--link:hover {
  background: var(--glass-bg-strong);
  border-color: var(--accent);
}

/* Calendar — rounded glass cells in Modern/Dark (the ruled lattice is a
   Blueprint-only treatment); tint rides on the parent card's glass */
[data-theme="modern"] .calendar-grid,
[data-theme="dark"] .calendar-grid {
  gap: 8px;
  background: transparent;
  border: none;
}

[data-theme="modern"] .calendar-dow,
[data-theme="dark"] .calendar-dow {
  background: transparent;
  border-bottom: 1px solid var(--rule-soft);
}

[data-theme="modern"] .cal-day,
[data-theme="dark"] .cal-day {
  background: var(--glass-tint);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

[data-theme="modern"] .cal-day:hover,
[data-theme="dark"] .cal-day:hover {
  border-color: var(--accent);
  background: var(--glass-bg-strong);
}

[data-theme="modern"] .cal-day--empty,
[data-theme="dark"] .cal-day--empty {
  background: none;
  box-shadow: none;
}

[data-theme="modern"] .cal-day--today,
[data-theme="dark"] .cal-day--today {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  background: var(--accent-tint);
}

/* UV severity — neutral glass tint + red tint for very high/extreme */
[data-theme="modern"] .uv-hour,
[data-theme="modern"] .uv-badge,
[data-theme="dark"] .uv-hour,
[data-theme="dark"] .uv-badge {
  background: var(--ink-wash);
  color: var(--ink);
  border-color: var(--ink-wash-strong);
}

[data-theme="modern"] .uv-hour,
[data-theme="dark"] .uv-hour {
  border-radius: 10px;
}

[data-theme="modern"] .uv-hour.uv-veryhigh,
[data-theme="modern"] .uv-hour.uv-extreme,
[data-theme="modern"] .uv-badge.uv-veryhigh,
[data-theme="modern"] .uv-badge.uv-extreme,
[data-theme="dark"] .uv-hour.uv-veryhigh,
[data-theme="dark"] .uv-hour.uv-extreme,
[data-theme="dark"] .uv-badge.uv-veryhigh,
[data-theme="dark"] .uv-badge.uv-extreme {
  background: rgba(255, 59, 48, 0.18);
  color: var(--iron-gall);
  border-color: rgba(255, 59, 48, 0.35);
}

[data-theme="dark"] .uv-hour.uv-veryhigh,
[data-theme="dark"] .uv-hour.uv-extreme,
[data-theme="dark"] .uv-badge.uv-veryhigh,
[data-theme="dark"] .uv-badge.uv-extreme {
  color: var(--iron-gall);
}

[data-theme="modern"] .uv-hour.peak,
[data-theme="dark"] .uv-hour.peak {
  border: 1px dashed var(--ink);
  background: var(--ink-wash-strong);
  outline-color: var(--ink-faint);
}

/* Search results — the strongest floating glass layer */
[data-theme="modern"] .search-results {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow:
    var(--glass-shadow-float),
    inset 0 1px 0 var(--glass-highlight);
}

[data-theme="modern"] .search-results li:hover,
[data-theme="modern"] .search-results li:focus {
  background: var(--accent-ring);
}

[data-theme="dark"] .search-results {
  background: rgba(44, 44, 46, 0.8);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow:
    var(--glass-shadow-float),
    inset 0 1px 0 var(--glass-highlight);
  color: var(--ink);
}

[data-theme="dark"] .search-results li:hover,
[data-theme="dark"] .search-results li:focus {
  background: rgba(255, 255, 255, 0.08);
}

/* Error banner — red-tinted glass warning strip */
[data-theme="modern"] .error-banner,
[data-theme="dark"] .error-banner {
  background: rgba(255, 59, 48, 0.12);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(255, 59, 48, 0.35);
  border-left: 4px double var(--iron-gall);
  border-radius: var(--radius);
  box-shadow:
    0 8px 32px rgba(255, 59, 48, 0.12),
    inset 0 1px 0 var(--glass-highlight);
  color: var(--iron-gall);
}

/* ==========================================================================
   Theme switcher (segmented control)
   ========================================================================== */

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.theme-switcher {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  gap: 0;
  padding: 3px;
  background: var(--ink-wash-strong);
  border-radius: 10px;
  user-select: none;
  border: 1px solid var(--ink-wash-strong);
}

[data-theme="modern"] .theme-switcher,
[data-theme="dark"] .theme-switcher {
  background: var(--glass-tint);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.theme-pill {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  height: calc(100% - 6px);
  background: var(--cream);
  border-radius: 8px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: background-color 240ms ease; /* transform driven by JS spring */
  pointer-events: none;
  will-change: transform;
}

[data-theme="dark"] .theme-pill {
  /* Solid gray thumb so the active segment reads on dark glass */
  background: #48484a;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}

.theme-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 64px;
  padding: 6px 10px;
  font-family: var(--font-tech);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}

.theme-btn:hover {
  color: var(--ink);
}

.theme-btn.active {
  color: var(--ink);
  font-weight: 600;
}

.theme-btn:active {
  transform: scale(0.96);
}

.theme-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  z-index: 2;
}

/* Smooth color/border transitions for the theme switch.
   Animates compositor-friendly properties only. */
body,
.container,
.card,
.forecast-card,
.history-item,
.cal-day,
.uv-hour,
.uv-badge,
.unit-toggle,
.search-input,
.search-results,
.search-btn,
.unit-btn,
.retry-btn,
.cal-nav-btn,
.error-banner,
.theme-switcher,
.theme-pill,
.theme-btn,
.back-link,
.search-results li,
.location-card {
  transition:
    background-color 240ms ease,
    color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    backdrop-filter 240ms ease;
}

/* ---------- Reduced transparency ----------
   The blueprint palette relies on translucent surfaces; Modern + Dark are
   built on liquid glass. Honor users who've asked for legibility over
   translucency: every glass surface goes opaque, sheens drop. */
@media (prefers-reduced-transparency: reduce) {
  [data-theme] .card,
  [data-theme] .search-results,
  [data-theme] .unit-toggle,
  [data-theme] .theme-switcher,
  [data-theme] .search-input,
  [data-theme] .fc-tooltip,
  [data-theme] .history-tooltip,
  [data-theme] .error-banner,
  [data-theme] .tb-credit,
  [data-theme] .retry-btn,
  [data-theme] .cal-nav-btn {
    background: var(--cream);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-theme="modern"] .card,
  [data-theme="modern"] .search-results,
  [data-theme="modern"] .unit-toggle,
  [data-theme="modern"] .theme-switcher,
  [data-theme="modern"] .search-input,
  [data-theme="modern"] .forecast-card,
  [data-theme="modern"] .history-item,
  [data-theme="modern"] .cal-day,
  [data-theme="modern"] .fc-tooltip,
  [data-theme="modern"] .history-tooltip,
  [data-theme="modern"] .tb-credit,
  [data-theme="modern"] .retry-btn,
  [data-theme="modern"] .cal-nav-btn {
    background: #ffffff;
    background-image: none;
  }

  [data-theme="dark"] .card,
  [data-theme="dark"] .search-results,
  [data-theme="dark"] .unit-toggle,
  [data-theme="dark"] .theme-switcher,
  [data-theme="dark"] .search-input,
  [data-theme="dark"] .forecast-card,
  [data-theme="dark"] .history-item,
  [data-theme="dark"] .cal-day,
  [data-theme="dark"] .fc-tooltip,
  [data-theme="dark"] .history-tooltip,
  [data-theme="dark"] .tb-credit,
  [data-theme="dark"] .retry-btn,
  [data-theme="dark"] .cal-nav-btn {
    background: #2c2c2e;
    background-image: none;
  }

  [data-theme="modern"] .error-banner {
    background: #ffe9e7;
  }

  [data-theme="dark"] .error-banner {
    background: #3a1d1a;
  }

  /* Opaque tooltips keep their ink: Modern reads dark-on-light */
  [data-theme="dark"] .fc-tooltip,
  [data-theme="dark"] .history-tooltip {
    color: #f2f2f7;
  }
}

/* ---------- High contrast ----------
   The skill (§14): "near-solid backgrounds with a defined, contrasting
   border." Translucent surfaces become solid; faint borders become solid
   1px lines; the active unit pill becomes redundant (active button gets
   a high-contrast fill instead). */
@media (prefers-contrast: more) {
  /* Drop translucent surfaces; force solid, defined borders */
  [data-theme] .card,
  [data-theme] .search-results,
  [data-theme] .unit-toggle,
  [data-theme] .theme-switcher,
  [data-theme] .search-input,
  [data-theme] .forecast-card,
  [data-theme] .history-item,
  [data-theme] .cal-day,
  [data-theme] .fc-tooltip,
  [data-theme] .history-tooltip,
  [data-theme] .error-banner,
  [data-theme] .tb-credit {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-image: none;
    border-style: solid;
  }

  [data-theme="modern"] .card,
  [data-theme="modern"] .search-results,
  [data-theme="modern"] .unit-toggle,
  [data-theme="modern"] .theme-switcher,
  [data-theme="modern"] .search-input,
  [data-theme="modern"] .forecast-card,
  [data-theme="modern"] .history-item,
  [data-theme="modern"] .cal-day,
  [data-theme="modern"] .tb-credit {
    background: #ffffff;
    border-color: #000000;
    border-width: 1px;
  }

  [data-theme="dark"] .card,
  [data-theme="dark"] .search-results,
  [data-theme="dark"] .unit-toggle,
  [data-theme="dark"] .theme-switcher,
  [data-theme="dark"] .search-input,
  [data-theme="dark"] .forecast-card,
  [data-theme="dark"] .history-item,
  [data-theme="dark"] .cal-day,
  [data-theme="dark"] .tb-credit {
    background: #000000;
    border-color: #ffffff;
    border-width: 1px;
  }

  /* Blueprint: keep paper texture, but bump border + ink contrast */
  [data-theme="blueprint"] .forecast-card,
  [data-theme="blueprint"] .history-item,
  [data-theme="blueprint"] .cal-day {
    border-color: #1a0f06;
    border-width: 1px;
  }

  /* Blueprint: the violet wash slightly lowers contrast — drop it here */
  html::before {
    display: none;
  }

  /* Blueprint: flatten the severity hatching to a plain wash (patterned
     backgrounds behind small text fail boosted-contrast mode) */
  [data-theme="blueprint"] .uv-badge,
  [data-theme="blueprint"] .uv-hour {
    background-image: none;
    background-color: var(--ink-wash-strong);
  }

  /* Blueprint calendar: bordered cells instead of the background lattice */
  [data-theme="blueprint"] .calendar-grid {
    gap: 4px;
    background: transparent;
  }

  [data-theme="blueprint"] .calendar-dow {
    background: var(--cream);
  }

  [data-theme="blueprint"] .cal-day {
    background: var(--cream);
  }

  [data-theme="blueprint"] .cal-day--today {
    box-shadow: none;
    border: 1px solid #1a0f06;
    outline: 1px solid #1a0f06;
    outline-offset: 2px;
  }

  /* Bump faint ink to full-opacity ink for legibility on solid surfaces */
  :root,
  [data-theme] {
    --ink-faint: var(--ink-soft);
  }

  /* Pill becomes redundant — active button gets a high-contrast fill */
  [data-theme] .unit-pill,
  [data-theme] .theme-pill {
    display: none;
  }

  [data-theme="modern"] .unit-btn.active,
  [data-theme="modern"] .theme-btn.active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
  }

  [data-theme="dark"] .unit-btn.active,
  [data-theme="dark"] .theme-btn.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
  }
}

/* ---------- Reduced motion ----------
   Keep color transitions (so theme switches remain visible) but kill
   spatial motion (theme pill slide, skeleton shimmer, hover transitions). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Theme + unit pills: drop the slide, keep the color fade */
  .theme-pill,
  .unit-pill {
    transition: background-color 240ms ease !important;
    transform: none !important;
  }

  /* Skeleton shimmer: stop, leave a flat placeholder */
  .skeleton::after,
  .skeleton-card::after {
    animation: none !important;
    opacity: 0.6;
  }

  /* Re-allow color transitions on surfaces so the theme switch is still visible */
  body,
  .container,
  .card,
  .forecast-card,
  .history-item,
  .cal-day,
  .uv-hour,
  .uv-badge,
  .unit-toggle,
  .search-input,
  .search-results,
  .search-btn,
  .unit-btn,
  .retry-btn,
  .cal-nav-btn,
  .error-banner,
  .theme-switcher,
  .theme-btn,
  .back-link,
  .search-results li,
  .location-card {
    transition-property: background-color, color, border-color, box-shadow,
      backdrop-filter !important;
    transition-duration: 240ms !important;
  }

  /* Per-skill: gentle static transition for hover, not instant */
  .unit-btn:active,
  .theme-btn:active,
  .search-btn:active,
  .retry-btn:active,
  .cal-nav-btn:active {
    transform: none !important;
  }

  /* Tooltip: keep the opacity crossfade, drop the spatial rise.
     Also flatten the hint chevron so it doesn't slide on hover. */
  .fc-tooltip,
  .forecast-card:hover .fc-tooltip,
  .forecast-card:focus-within .fc-tooltip {
    transition: opacity 150ms ease, visibility 0ms linear !important;
    transform: translateX(calc(-50% + var(--tip-x))) !important;
  }
  .fc-tooltip::after {
    transform: translateX(calc(-50% + var(--arrow-x))) !important;
  }
  .forecast-card--has-hours::after,
  .forecast-card--has-hours:hover::after,
  .forecast-card--has-hours:focus-within::after {
    transition: opacity 0.15s !important;
    transform: none !important;
  }
}