:root { --bg:#0b1320; --card:#121a2b; --muted:#6b7a90; --text:#e8eefc; --accent:#6fd3ff; }
*{box-sizing:border-box}
body { margin:0; font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
.page-header { padding: 24px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.logo { margin: 0; font-weight: 600; letter-spacing:.2px; }
.logo s { text-decoration-thickness: .15em; text-decoration-color: currentColor; }
.tagline { margin:.25rem 0 0; color:var(--muted); }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.now-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.card { background: var(--card); border:1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.card h2, .card h3 { margin:0 0 8px; font-size:1.05rem; color: var(--accent); }
.big { font-size: 1.8rem; font-weight:700; letter-spacing:.3px; }
.sub { margin-top: 4px; color: var(--muted); font-size:.95rem; }
.charts { display:grid; gap:12px; grid-template-columns: 1fr; margin-top: 16px; }
.chart-card { background: var(--card); border:1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 14px 16px; }
.extras { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); margin-top: 16px; }
.tips ul { margin: 0; padding-left: 18px; color: var(--muted); }
.page-footer { color: var(--muted); padding: 20px 16px; border-top: 1px solid rgba(255,255,255,.06); text-align:center; font-size:.9rem; }
a { color: var(--accent); }
#sewageCard.alert { outline:2px solid #ff8a8a; box-shadow: 0 0 0 3px rgba(255,138,138,.25); }
.range-buttons { display:flex; gap:6px; margin: 6px 0 10px; flex-wrap:wrap; }
.range-buttons .btn {
  font: 600 12px/1 system-ui, Segoe UI, sans-serif;
  padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: var(--text); cursor: pointer;
}
.range-buttons .btn:hover { background: rgba(255,255,255,.08); }
.range-buttons .btn.active { background: var(--accent); border-color: var(--accent); color: #05121d; }


.flex-between { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.btn.btn-small { font-size:12px; padding:4px 8px; }
#forecastCard.collapsed #wx-collapsible { display:none; }

.wx-current { display:flex; gap:12px; align-items:center; margin: 4px 0 10px; }
.wx-current .big { font-size: 28px; font-weight: 700; }
.wx-current .muted { opacity:.8; }

.wx-daily { display:grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.wx-day {
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px;
  display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,.04);
}
.wx-day .d { font-weight:700; }
.wx-day .row { display:flex; justify-content:space-between; font-size:12px; }
.wx-day .ico { font-size:22px; line-height:1; }

.wx-hourly { display:flex; gap:6px; overflow:auto; padding-bottom:2px; }
.wx-hour {
  min-width:76px; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px;
  display:flex; flex-direction:column; gap:4px; background:rgba(255,255,255,.04);
  text-align:center; font-size:12px;
}
.wx-hour .ico { font-size:18px; line-height:1; }
.badge { padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.12); font-size:11px; }
.badge.blue { background:#0b62ff22; border-color:#0b62ff66; }
.badge.green{ background:#00b36b22; border-color:#00b36b66; }

/* Christmas accent palette */
:root.christmas {
  --accent: #0b8f2f;            /* holly green */
  --accent-2: #c62828;          /* berry red */
}
.christmas .card h3,
.christmas .btn, .christmas .badge.blue { border-color: var(--accent); }
.christmas .btn { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.christmas .badge.green { border-color: var(--accent); }

 /* Snow canvas sits on top but doesn't block clicks */
#snow-canvas {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 9999; opacity: .9;
}

/* Toggle placement */
.xmas-toggle {
  position: fixed; right: 12px; bottom: 12px; z-index: 10000;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #snow-canvas { display: none; }
}

.christmas .card { box-shadow: 0 0 0 2px rgba(198,40,40,.25), 0 0 20px rgba(11,143,47,.25) inset; }


/* back to the small, safe defaults */
.logo.brand { position: relative; display: inline-block; }

#santa-hat.hat {
  position: absolute;
  width: clamp(28px, 20%, 52px);
  aspect-ratio: 1.4 / 1;
  left: -0.15em;
  top: -0.65em;
  transform: rotate(-18deg);   /* no extra scaling */
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
  display: none;               /* shown only when .christmas is on <html> */
}

.christmas #santa-hat { display: block; }

#santa-hat.hat { transform: rotate(-18deg) scaleY(1.10); }