:root{
  --bg0: #0b1020;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --text: #e9edf6;
  --muted: rgba(233,237,246,0.70);
  --muted2: rgba(233,237,246,0.55);

  --accent: #3b82f6;
  --accent2: #22c55e;
  --danger: #ef4444;
  --ok: #34d399;

  --shadow: 0 18px 60px rgba(0,0,0,0.45);
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html{ background: #0b0f1a; }

body{
  font-family: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  padding: 2rem 1.25rem 3rem;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 15% 15%, rgba(255, 139, 86, 0.18), transparent 55%),
    radial-gradient(900px 700px at 85% 20%, rgba(59, 130, 246, 0.22), transparent 55%),
    radial-gradient(900px 800px at 50% 95%, rgba(34, 197, 94, 0.14), transparent 60%),
    linear-gradient(180deg, #070a14 0%, #0b1020 60%, #070a14 100%);
}

.wrap{ max-width: 1100px; margin: 0 auto; }

header.page-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

h1{ font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.02em; }

.subtitle{ color: var(--muted); font-size: 0.9rem; margin-top: .25rem; }

.controls{ display:flex; align-items:center; gap: .6rem; flex-wrap: wrap; }

button{
  font: inherit;
  cursor: pointer;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .45rem 1rem;
  transition: background .12s ease, border-color .12s ease;
}
button:hover{ background: var(--card2); }
button.active{ background: rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.5); }

.grid{
  display:grid;
  gap: 1.1rem;
  /* 230px (not 200px) so values like "1012.4 hPa" or "0.0 km/h" get one
     fewer column to share and don't wrap onto a second line at common
     desktop widths - card-body also gets its own min-width guard below
     for the same reason. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 1.75rem;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Icon lives in its own left column, bigger and vertically centered, with
   the label/value/sub stacked to its right - fills the width a
   single-column mobile layout otherwise leaves empty next to a small
   top-left icon, and still reads fine in the multi-column desktop grid.
   Material Symbols icons are monochrome-by-design (meant to be tinted via
   CSS), so they're rendered as a mask filled with background-color
   instead of a plain <img>. */
.card > .icon{
  width: 40px;
  height: 40px;
  flex: none;
  background-color: rgba(233,237,246,0.85);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.card-body{ min-width: 0; }

.card .label{
  font-size: .78rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .4rem;
}

/* Severity coloring for at-a-glance values - applied/removed by dashboard.js
   based on thresholds for temperature, UV, wind, and rain. The icon gets
   the same treatment (background-color, since it's a CSS mask) so the
   whole card reads as "hot" or "extreme" at a glance, not just the number. */
.card .value.lvl-cold{ color: #60a5fa; }
.card .value.lvl-cool{ color: #38bdf8; }
.card .value.lvl-warm{ color: #fbbf24; }
.card .value.lvl-hot{ color: #f97316; }
.card .value.lvl-extreme{ color: #ef4444; }
.card .value.lvl-severe{ color: #c084fc; }

.card > .icon.lvl-cold{ background-color: #60a5fa; }
.card > .icon.lvl-cool{ background-color: #38bdf8; }
.card > .icon.lvl-warm{ background-color: #fbbf24; }
.card > .icon.lvl-hot{ background-color: #f97316; }
.card > .icon.lvl-extreme{ background-color: #ef4444; }
.card > .icon.lvl-severe{ background-color: #c084fc; }

.card .value{
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.card .sub{ font-size: .85rem; color: var(--muted); margin-top: .3rem; }

.fun-facts{ margin-bottom: 1.75rem; }

.fun-facts-label{
  font-size: .78rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .6rem;
}

/* Same grid the main current-cards section uses (auto-fit, collapses to
   one column on mobile). */
.fun-facts-row{
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fact{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fact > .icon{
  width: 34px;
  height: 34px;
  flex: none;
  background-color: rgba(233,237,246,0.85);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.fact-body{ min-width: 0; }

.fact-label{
  font-size: .72rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}

.fact-value{ font-size: 1.35rem; font-weight: 650; }

.fact-sub{ font-size: .78rem; color: var(--muted); margin-top: .2rem; }

.charts{ display:grid; gap: 1.25rem; grid-template-columns: 1fr; }

.chart-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.4rem;
}

.chart-card h2{ font-size: 1rem; font-weight: 600; margin-bottom: .8rem; color: var(--muted); }

.chart-wrap{ position: relative; height: 260px; }

#status-banner{
  display:none;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  color: #fecaca;
  border-radius: 12px;
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .9rem;
}