/* Palette mirrors reporter-bot/charts.py exactly, so the dashboard and the
   Telegram PNGs are recognisably the same product. The amber/red hues are
   reserved for threshold state and are never used for a series. */

:root {
  --surface: #fcfcfb;
  --raised: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --pm25: #2a78d6;
  --pm10: #eb6834;
  --ok: #2e9e6b;
  --warn: #fab219;
  --err: #d03b3b;
  --band-alpha: 0.13;
  --radius: 12px;
  --gap: 14px;
}

html[data-theme="dark"] {
  --surface: #1a1a19;
  --raised: #232322;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --pm25: #3987e5;
  --pm10: #d95926;
  --band-alpha: 0.18;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

h1 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 13px; margin: 0; font-weight: 600; letter-spacing: 0.02em;
     text-transform: uppercase; color: var(--ink-2); }

button, select, input {
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--grid);
  border-radius: 8px;
  padding: 6px 10px;
}
button { cursor: pointer; }
button:hover { border-color: var(--axis); }
button.ghost { background: transparent; }
button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

/* ---------- top bar ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap);
  padding: 12px 16px calc(12px + env(safe-area-inset-top)) 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--grid);
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 9px; }
.topbar-actions { display: flex; gap: 8px; }

.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.dot[data-level="ok"]   { background: var(--ok); }
.dot[data-level="warn"] { background: var(--warn); }
.dot[data-level="err"]  { background: var(--err); }

/* ---------- range bar ---------- */

.rangebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap);
  padding: 10px 16px;
  border-bottom: 1px solid var(--grid);
}
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.custom label, .bucket {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2);
}

.customize { padding: 12px 16px; border-bottom: 1px solid var(--grid); }
.toggles { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.toggles label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 10px; }

.status-line { margin: 10px 16px 0; color: var(--muted); font-size: 13px; min-height: 1.2em; }

/* ---------- panels ---------- */

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--gap);
  padding: var(--gap) 16px 28px;
}
.panel {
  background: var(--raised);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}
.panel.wide { grid-column: 1 / -1; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.panel-note { color: var(--muted); font-size: 12px; text-align: right; }
.panel-body { min-width: 0; overflow-x: auto; }

/* ---------- live card ---------- */

.live { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.live-figure { display: flex; flex-direction: column; gap: 2px; }
.live-value { font-size: 34px; font-weight: 650; letter-spacing: -0.02em; line-height: 1; }
.live-label { font-size: 12px; color: var(--muted); text-transform: uppercase;
              letter-spacing: 0.04em; }
.live-level { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.trend { font-size: 12px; color: var(--ink-2); }
.stale { color: var(--err); font-weight: 600; }

/* Each pollutant against its own limits: a shared scale cannot carry
   PM2.5 warning at 35 and PM10 at 50 honestly. */
.meter { height: 8px; border-radius: 4px; background: var(--grid); position: relative;
         margin-top: 8px; overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; display: block; }
.meter > b { position: absolute; top: -2px; bottom: -2px; width: 2px;
             background: var(--axis); }

/* ---------- stats table ---------- */

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--grid); }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--muted); font-weight: 600; font-size: 12px;
           text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:last-child td { border-bottom: none; }

/* ---------- level distribution ---------- */

.levelbar { display: flex; height: 22px; border-radius: 6px; overflow: hidden;
            background: var(--grid); }
.levelbar > span { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
            margin-right: 6px; }

/* ---------- heatmap ---------- */

.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(11px, 1fr));
        gap: 2px; align-items: center; min-width: 460px; }
.heat .rowlabel, .heat .collabel { font-size: 10px; color: var(--muted); text-align: center; }
.heat .rowlabel { text-align: right; padding-right: 4px; }
.heat .cell { aspect-ratio: 1 / 1; border-radius: 2px; background: var(--grid); }
.heat .cell[data-empty="1"] { background: transparent; border: 1px dashed var(--grid); }

.scale { display: flex; align-items: center; gap: 8px; margin-top: 10px;
         font-size: 12px; color: var(--muted); }
.scale .ramp { flex: 1; height: 8px; border-radius: 4px; }

.empty { color: var(--muted); font-size: 14px; padding: 18px 0; text-align: center; }

.foot { padding: 0 16px 26px; color: var(--muted); font-size: 12px; }

/* uPlot's own chrome, themed */
.u-legend { font-size: 12px; color: var(--ink-2); }
.u-legend .u-marker { border-radius: 2px; }