@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/static/fonts/Inter-Regular-subset.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/static/fonts/Inter-SemiBold-subset.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(/static/fonts/Inter-Bold-subset.woff2) format("woff2"); }

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117; --surface: #161b22; --surface-2: #1c232d; --border: #262e3a;
  --text: #f0f3f6; --text-2: #a8b3c1; --text-3: #7d8896;
  --calm: #0ca30c; --tense: #8fb81c; --elevated: #fab219; --high: #ec835a; --extreme: #d03b3b;
  --t-calm: #3fbf3f; --t-tense: #a6cc3a; --t-elevated: #fab219; --t-high: #ec835a; --t-extreme: #f07171;
  --up: #ec835a; --down: #3fb950;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #eef1f4; --border: #d8dee4;
  --text: #1f2328; --text-2: #4b5563; --text-3: #6b7280;
  --t-calm: #0a7a0a; --t-tense: #56710c; --t-elevated: #8a5a00; --t-high: #b3431b; --t-extreme: #b91c1c;
  --up: #b3431b; --down: #1a7f37;
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;
    --bg: #ffffff; --surface: #ffffff; --surface-2: #eef1f4; --border: #d8dee4;
    --text: #1f2328; --text-2: #4b5563; --text-3: #6b7280;
    --t-calm: #0a7a0a; --t-tense: #56710c; --t-elevated: #8a5a00; --t-high: #b3431b; --t-extreme: #b91c1c;
    --up: #b3431b; --down: #1a7f37;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { color: var(--text); font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--text-3); }
[hidden] { display: none !important; }

.w { display: flex; flex-direction: column; gap: 12px; padding: 2px; }
.w-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.w-title { display: block; font-weight: 700; font-size: 17px; }
.w-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.w-hero { text-align: center; }
.w-delta { font-size: 13px; }

.gauge { width: 100%; display: block; }
.gauge-lg { max-width: 300px; margin: 4px auto 0; }
.band-calm { stroke: var(--calm); } .band-tense { stroke: var(--tense); } .band-elevated { stroke: var(--elevated); }
.band-high { stroke: var(--high); } .band-extreme { stroke: var(--extreme); }
.gauge-marker { fill: var(--text); stroke: var(--surface); stroke-width: 3; }
.gauge-value { fill: var(--text); font-size: 44px; font-weight: 700; text-anchor: middle; }
.gauge-value-sm { font-size: 40px; }
.gauge-label { fill: var(--text-2); font-size: 15px; font-weight: 600; text-anchor: middle; }

.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill-calm { color: var(--t-calm); } .pill-tense { color: var(--t-tense); } .pill-elevated { color: var(--t-elevated); }
.pill-high { color: var(--t-high); } .pill-extreme { color: var(--t-extreme); }
.delta { font-weight: 600; font-size: 12px; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.flat { color: var(--text-3); }

.w-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.w-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 10px; }
.w-item:hover, .w-hot a:hover { border-color: var(--text-3); }
.w-item-name { font-size: 12px; font-weight: 600; white-space: nowrap; }

.w-hot { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.w-hot a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n v" "m m"; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; align-items: center; }
.w-hot-name { grid-area: n; font-weight: 600; font-size: 13px; }
.w-hot-val { grid-area: v; display: flex; gap: 6px; align-items: center; }
.meter { grid-area: m; width: 100%; height: 6px; display: block; }
.meter-track { fill: var(--surface-2); }
.fill-calm { fill: var(--calm); } .fill-tense { fill: var(--tense); } .fill-elevated { fill: var(--elevated); }
.fill-high { fill: var(--high); } .fill-extreme { fill: var(--extreme); }

.world { width: 100%; height: auto; display: block; }
.world .country { stroke: var(--surface); stroke-width: .5; }
.world .nodata { fill: var(--surface-2); }
.legend { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-2); }
.legend li { display: flex; align-items: center; gap: 5px; }
.swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.swatch.fill-calm { background: var(--calm); } .swatch.fill-tense { background: var(--tense); } .swatch.fill-elevated { background: var(--elevated); }
.swatch.fill-high { background: var(--high); } .swatch.fill-extreme { background: var(--extreme); }

.w-badge { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.w-badge-gauge { width: 64px; flex: none; }
.w-badge-text { display: flex; flex-direction: column; gap: 2px; }
.w-badge-title { font-weight: 700; font-size: 14px; }
.w-badge-value { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.w-badge-value strong { color: var(--text); font-size: 18px; }

.w-foot { font-size: 11px; color: var(--text-2); padding: 0 4px; }
.w-foot a:hover { text-decoration: underline; }

.compact .w-card { padding: 12px; }
.compact .gauge-lg { max-width: 220px; }
.compact .w-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }

/* Map zoom */
.map-wrap { position: relative; }
.map-wrap.zoomed svg.world { cursor: grab; touch-action: none; }
.map-wrap.zoomed svg.world:active { cursor: grabbing; }
.map-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.map-zoom button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font: 600 18px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.map-zoom button:hover, .map-zoom button:focus-visible { border-color: var(--text-3); background: var(--border); }
.world .country { vector-effect: non-scaling-stroke; }
.cname { display: none; fill: var(--text); stroke: var(--surface); paint-order: stroke; stroke-linejoin: round; font-family: Inter, system-ui, sans-serif; font-weight: 600; pointer-events: none; }
.cname.on { display: inline; }