/* RainCount — Daylight Gauge (light) / Night Radar (dark) */
:root{
  color-scheme:light;
  --bg:#faf9f5; --surface:#ffffff; --field:#eef0ec;
  --ink:#18242e; --ink-soft:#5a6472; --ink-faint:#8a93a0;
  --line:#e3e1d8; --line-soft:#ecebe2;
  --blue:#1d6fa5; --blue-ink:#175a87; --blue-soft:#d8e9f4;
  --surplus:#3a7d44; --deficit:#c4611c;
  --chart-bar:#1d6fa5;
  --shadow:0 10px 28px rgba(24,36,46,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0c0e12; --surface:#12151b; --field:#181c24;
    --ink:#e6edf3; --ink-soft:#94a3b8; --ink-faint:#64748b;
    --line:#232936; --line-soft:#1a1f29;
    --blue:#4d9bd1; --blue-ink:#38bdf8; --blue-soft:#173548;
    --surplus:#4ade80; --deficit:#fb923c;
    --chart-bar:#4d9bd1;
    --shadow:0 10px 28px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"]{ color-scheme:light; }
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0e12; --surface:#12151b; --field:#181c24;
  --ink:#e6edf3; --ink-soft:#94a3b8; --ink-faint:#64748b;
  --line:#232936; --line-soft:#1a1f29;
  --blue:#4d9bd1; --blue-ink:#38bdf8; --blue-soft:#173548;
  --surplus:#4ade80; --deficit:#fb923c;
  --chart-bar:#4d9bd1;
  --shadow:0 10px 28px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;}
a{color:var(--blue-ink); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}
.mono{font-family:'Fragment Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.wrap{max-width:1040px; margin:0 auto; padding:0 22px;}

/* header */
.site-head{border-bottom:1px solid var(--line); background:var(--surface);}
.site-head .bar{display:flex; align-items:center; gap:10px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand svg{color:var(--blue);}
.brand .wm{font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink);}
.brand .wm b{color:var(--blue); font-weight:800;}
.nav{margin-left:auto; display:flex; gap:20px; font-size:14px; font-weight:600;}
.nav a{color:var(--ink-soft);}
.nav a[aria-current]{color:var(--blue-ink);}
.nav .soon{color:var(--ink-faint); cursor:default;}
@media (max-width:640px){ .nav{gap:14px; font-size:13px;} .nav .hide-sm{display:none;} }

/* hero */
.hero{padding:64px 0 46px;}
.hero h1{font-size:clamp(32px,5.4vw,52px); font-weight:800; letter-spacing:-.028em;
  line-height:1.06; margin:0 0 14px; max-width:17ch; text-wrap:balance;}
.hero h1 em{font-style:normal; color:var(--blue-ink);}
.hero .sub{font-size:17px; color:var(--ink-soft); margin:0 0 26px; max-width:52ch;}
.search{display:flex; max-width:560px; border:2px solid var(--ink); border-radius:10px;
  overflow:hidden; background:var(--surface);}
.search input{flex:1; border:0; padding:14px 16px; font-size:15.5px; background:transparent;
  color:var(--ink); font-family:inherit; min-width:0;}
.search input::placeholder{color:var(--ink-faint);}
.search button{border:0; background:var(--blue); color:#fff; font-weight:700; font-size:15px;
  padding:0 24px; cursor:pointer; font-family:inherit;}
.search button:hover{background:var(--blue-ink);}
.hero .hint{margin:10px 2px 0; font-size:13px; color:var(--ink-faint);}
.hero .hint a{font-weight:600;}

/* live strip */
.livestrip{border-block:1px solid var(--line); background:var(--surface); padding:18px 0 20px;}
.livestrip .cap{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--ink-faint); display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.livestrip .cap .dot{width:7px; height:7px; border-radius:50%; background:var(--surplus); display:inline-block;}
.livegrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media (max-width:860px){ .livegrid{grid-template-columns:repeat(2,1fr);} }
.livecell{background:var(--field); border-radius:10px; padding:12px 14px; font-size:13.5px;}
.livecell a{color:var(--ink); font-weight:600;}
.livecell .val{display:block; margin-top:3px; font-size:17px; color:var(--blue-ink);}
.livecell .st{color:var(--ink-faint); font-weight:400;}

/* sections */
section.pad{padding:52px 0;}
h2.sec{font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px;}
p.secsub{color:var(--ink-soft); margin:0 0 26px; max-width:60ch; font-size:15.5px;}
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:820px){ .cards3{grid-template-columns:1fr;} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px;}
.card h3{margin:0 0 6px; font-size:16.5px; font-weight:700;}
.card p{margin:0; font-size:14px; color:var(--ink-soft);}
.card .knum{font-size:26px; color:var(--blue-ink); display:block; margin-bottom:10px;}

/* browse hubs */
.hubgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
@media (max-width:860px){ .hubgrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .hubgrid{grid-template-columns:repeat(2,1fr);} }
.hub{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 13px;
  font-size:13.5px; font-weight:600; color:var(--ink);}
a.hub:hover{border-color:var(--blue); text-decoration:none; color:var(--blue-ink);}
span.hub{color:var(--ink-faint); font-weight:500;}

/* plain terms band */
.band{background:var(--field); border-block:1px solid var(--line-soft); padding:44px 0;}
.band .duo{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;}
@media (max-width:820px){ .band .duo{grid-template-columns:1fr;} }
.band blockquote{margin:0; font-size:21px; font-weight:600; letter-spacing:-.01em; line-height:1.45;
  border-left:4px solid var(--blue); padding-left:18px; max-width:30ch;}
.band blockquote .mono{color:var(--blue-ink);}
.band p{color:var(--ink-soft); font-size:15px; margin:0;}

/* breadcrumb + leaf */
.crumb{font-size:12.5px; color:var(--ink-faint); padding:20px 0 0; letter-spacing:.02em;}
.crumb a{color:var(--ink-soft); font-weight:600;}
.leaf-head{padding:14px 0 8px;}
.leaf-head h1{font-size:clamp(26px,4.4vw,38px); font-weight:800; letter-spacing:-.025em; margin:0 0 4px;}
.leaf-head .upd{font-size:13px; color:var(--ink-faint);}
.leaf-head .upd .mono{font-size:12px;}

.figure{display:flex; align-items:baseline; flex-wrap:wrap; gap:14px 18px; background:var(--surface);
  border:2px solid var(--ink); border-radius:14px; padding:20px 24px; margin:18px 0 10px; box-shadow:var(--shadow);}
.figure .n{font-size:clamp(44px,8vw,64px); line-height:1; color:var(--ink); letter-spacing:-.02em;}
.figure .u{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.figure .chip{margin-left:auto; font-size:13px; padding:5px 12px; border-radius:99px; font-weight:600;}
.chip.up{background:color-mix(in srgb, var(--surplus) 15%, transparent); color:var(--surplus);}
.chip.down{background:color-mix(in srgb, var(--deficit) 15%, transparent); color:var(--deficit);}

.leafgrid{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:start; padding-bottom:8px;}
@media (max-width:860px){ .leafgrid{grid-template-columns:1fr;} }
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px;}
.panel h2{font-size:16px; font-weight:700; margin:0 0 12px; letter-spacing:-.01em;}
.rows{font-size:14px;}
.rows > div{display:flex; justify-content:space-between; gap:12px; padding:9px 2px; border-bottom:1px solid var(--line-soft);}
.rows > div:last-child{border-bottom:none;}
.rows .k{color:var(--ink-soft);}
.rows .v{font-size:13.5px;}
.plain{background:var(--blue-soft); border:none;}
.plain p{margin:0 0 10px; font-size:14.5px; color:var(--ink);}
.plain p:last-child{margin:0;}
.plain b{font-weight:700;}

/* chart */
.chart{margin-top:6px;}
.chart .plot{display:grid; grid-template-columns:repeat(9,1fr); gap:8px; align-items:end;
  height:150px; padding:0 2px; border-bottom:2px solid var(--line);}
.chart .col{position:relative; display:flex; align-items:flex-end; justify-content:center; height:100%;}
.chart .bar{width:68%; max-width:34px; background:var(--chart-bar); border-radius:4px 4px 0 0;
  min-height:2px; cursor:default; transition:opacity .12s;}
.chart .col:hover .bar{opacity:.82;}
.chart .norm{position:absolute; width:86%; max-width:42px; height:0; border-top:2.5px dashed var(--ink-soft);
  left:50%; transform:translateX(-50%); pointer-events:none;}
.chart .xlab{display:grid; grid-template-columns:repeat(9,1fr); gap:8px; padding:6px 2px 0;
  font-size:11px; color:var(--ink-faint); text-align:center;}
.chart .legend{display:flex; gap:18px; margin:14px 0 0; font-size:12.5px; color:var(--ink-soft); align-items:center;}
.chart .legend .sw{display:inline-block; width:14px; height:10px; background:var(--chart-bar); border-radius:2px; margin-right:6px; vertical-align:-1px;}
.chart .legend .dash{display:inline-block; width:16px; border-top:2.5px dashed var(--ink-soft); margin-right:6px; vertical-align:3px;}
.tip{position:fixed; z-index:50; background:var(--ink); color:var(--bg); font-size:12px; padding:6px 10px;
  border-radius:7px; pointer-events:none; opacity:0; transform:translate(-50%,-130%); white-space:nowrap; transition:opacity .1s;}
.tip .mono{color:inherit;}

/* nearby + verticals */
.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chips a{background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:7px 14px;
  font-size:13px; font-weight:600; color:var(--ink);}
.chips a:hover{border-color:var(--blue); color:var(--blue-ink); text-decoration:none;}
.chips a .mono{color:var(--blue-ink); font-size:12px; margin-left:6px;}

/* faq */
.faq details{border-bottom:1px solid var(--line); padding:4px 0;}
.faq summary{cursor:pointer; font-weight:700; font-size:15px; padding:12px 0; list-style:none; display:flex; justify-content:space-between; gap:10px;}
.faq summary::after{content:"+"; color:var(--blue-ink); font-weight:700;}
.faq details[open] summary::after{content:"–";}
.faq p{margin:0 0 14px; font-size:14.5px; color:var(--ink-soft); max-width:68ch;}

/* footer */
footer.site{border-top:1px solid var(--line); margin-top:64px; padding:30px 0 44px;
  font-size:13px; color:var(--ink-faint);}
footer.site .cols{display:flex; flex-wrap:wrap; gap:14px 34px; margin-bottom:16px;}
footer.site a{color:var(--ink-soft); font-weight:600;}
footer.site p{margin:4px 0; max-width:80ch;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto;} }

/* dev theme toggle */
.theme-dev{position:fixed; bottom:16px; right:16px; z-index:80;
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:99px; color:var(--ink-soft);
  font-family:'Fragment Mono',ui-monospace,monospace; font-size:11.5px;
  padding:7px 14px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.18);}
.theme-dev:hover{color:var(--ink); border-color:var(--blue);}