/* wattwhen hosted site: dark only. Fonts load from Google Fonts (OFL), canonical tokens in leeward/tools/php/tokens.css. */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root { --bg:#0f1216; --panel:#171b21; --line:#3a4149; --text:#e8eaed; --muted:#9aa3ad; --gold:#c9a227; --link:#6ec6ff; --ok:#3dba7a; --warn:#e0b04a; --bad:#e05a5a; --idle:#6b7380;
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500; --c5:#d55181; --c6:#2fae2f; --c7:#9085e9; --c8:#e66767; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
h1 { font-family: 'Big Shoulders Display', system-ui, sans-serif; font-weight: 800; letter-spacing: .02em; margin: 0 0 .8rem; }
h2 { font-family: 'Big Shoulders Display', system-ui, sans-serif; font-weight: 600; margin: 1.2rem 0 .5rem; }
a { color: var(--link); }
code, pre, .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.top { display: flex; align-items: center; gap: .8rem; height: 3.4rem; padding: 0 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.top .brand { font-family: 'Big Shoulders Display', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; }
.top .tag { color: var(--muted); font-size: .85rem; }
.top .who { margin-left: auto; display: flex; gap: .5rem; }
.app { display: grid; grid-template-columns: 200px 1fr; flex: 1; }
.nav { padding: 1rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; }
.nav a { color: var(--text); text-decoration: none; padding: .4rem .6rem; border-radius: 6px; }
.nav a.on { background: var(--line); color: var(--gold); }
.content { padding: 1.2rem; max-width: 62rem; width: 100%; }
.pill { display: inline-block; padding: .1rem .6rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--text); text-decoration: none; }
.pill.ok { color: var(--ok); border-color: var(--ok); } .pill.stale { color: var(--warn); border-color: var(--warn); } .pill.on { color: var(--gold); border-color: var(--gold); }
.btn { display: inline-block; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .9rem; font: inherit; cursor: pointer; text-decoration: none; }
.btn-gold { background: var(--gold); color: #111; border-color: var(--gold); } .btn-danger { color: var(--bad); border-color: var(--bad); }
.banner { border: 1px solid var(--ok); color: var(--ok); padding: .6rem .8rem; border-radius: 6px; margin-bottom: 1rem; }
.banner-err { border-color: var(--bad); color: var(--bad); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; }
.card .k { color: var(--muted); font-size: .8rem; } .card .v { font-size: 1.6rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
canvas.chart { width: 100%; height: 260px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: .8rem; margin: .4rem 0 1rem; font-size: .85rem; color: var(--muted); }
.legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
table.data { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
table.data th { color: var(--muted); font-weight: 500; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 28rem; margin-bottom: 1rem; }
.cal .d { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; font-size: .7rem; padding: 2px 3px; color: var(--muted); }
.cal .d.api { background: #12392a; } .cal .d.csv { background: #1d2f4a; } .cal .d.both { background: #2d4a1d; } .cal .d.gap { background: #3a1d1d; }
label { display: block; margin: .8rem 0 .3rem; color: var(--muted); }
input[type=text], input[type=password], input[type=email], select, textarea { width: 100%; max-width: 30rem; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .5rem; font: inherit; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 1rem 0; }
.hint { color: var(--muted); font-size: .85rem; }
.login-wrap { max-width: 22rem; margin: 3rem auto; padding: 0 1rem; }
.badge { display: block; margin: 0 0 1rem; max-width: 100%; height: auto; }
#map { height: 280px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 1rem; }
.journey img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.site-foot { text-align: right; padding: .8rem 1rem; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }
.site-foot a { color: var(--muted); }
@media (max-width: 840px) { .app { grid-template-columns: 1fr; } .nav { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; } .site-foot .ver { display: none; } .top .tag { display: none; } }