/* Sundsvallskollen, designen "Kvällsljus" (Robin 2026-11-05).
   Mörk sida, en himmel över stadens silhuett som följer solen och vädret,
   stora siffror och tydliga kort. En kolumn som läses bra i mobilen. */
:root{
  --bg:#0d1626; --surface:#152238; --surface-2:#1c2c47; --fg:#eef3fa; --muted:#9fb0c8; --line:#26365a;
  --accent:#ffb86b; --accent-ink:#20140a; --accent-soft:#ffb86b22;
  --ok:#3ccf82; --amber:#ffc04d; --warn:#ff7a66; --link:#8cc4ff;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  --f-data:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.5 var(--f-body);overflow-x:hidden}
[hidden]{display:none!important}
a{color:var(--link)}
button,input{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:820px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:16px}

/* ---------- Himlen ---------- */
.himmel{position:relative;overflow:hidden;isolation:isolate;
  --h1:#1b2d52; --h2:#3a3f6e; --h3:#d98a5a;
  background:linear-gradient(180deg,var(--h1) 0%,var(--h2) 55%,var(--h3) 100%);
  transition:background 1s}
body[data-dygn="dag"] .himmel{--h1:#2f6db8; --h2:#5c9bd8; --h3:#a9d1f0}
body[data-dygn="gryning"] .himmel{--h1:#25335f; --h2:#8a6f9e; --h3:#ffb98a}
body[data-dygn="kvall"] .himmel{--h1:#1b2d52; --h2:#3a3f6e; --h3:#d98a5a}
body[data-dygn="natt"] .himmel{--h1:#050a17; --h2:#0b1630; --h3:#1a2b4f}
/* Moln, regn och dimma lägger en grå hinna över himlen */
.himmel::before{content:"";position:absolute;inset:0;z-index:-1;background:#56627a;opacity:0;transition:opacity 1s}
body[data-vader="halvklart"] .himmel::before{opacity:.18}
body[data-vader="moln"] .himmel::before{opacity:.45}
body[data-vader="regn"] .himmel::before,body[data-vader="aska"] .himmel::before{opacity:.6;background:#3d4860}
body[data-vader="sno"] .himmel::before{opacity:.5;background:#8090a8}
body[data-vader="dimma"] .himmel::before{opacity:.7;background:#9aa4b4}
/* Stjärnor på natten när det är klart */
.stjarnor{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity 1s;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 40%,#fff,transparent),
  radial-gradient(1.4px 1.4px at 46% 12%,#fff,transparent),radial-gradient(1px 1px at 63% 32%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 78% 16%,#fff,transparent),radial-gradient(1px 1px at 90% 44%,#fff,transparent),
  radial-gradient(1px 1px at 36% 22%,#cfe0ff,transparent),radial-gradient(1px 1px at 85% 28%,#cfe0ff,transparent)}
body[data-dygn="natt"]:is([data-vader="klart"],[data-vader="halvklart"]) .stjarnor{opacity:.9}
/* Sol eller måne */
.sol{position:absolute;z-index:-1;width:84px;height:84px;border-radius:50%;right:12%;top:46px;
  background:radial-gradient(circle,#fff6d8 0 38%,#ffd27a 39% 52%,transparent 70%);opacity:.95;transition:all 1s}
body[data-dygn="gryning"] .sol,body[data-dygn="kvall"] .sol{top:118px;background:radial-gradient(circle,#ffe2b0 0 36%,#ff9d5c 37% 50%,transparent 70%)}
body[data-dygn="natt"] .sol{width:46px;height:46px;top:40px;background:radial-gradient(circle at 38% 38%,#f4f1e6 0 55%,transparent 58%);box-shadow:none;opacity:.85}
body:is([data-vader="moln"],[data-vader="regn"],[data-vader="sno"],[data-vader="dimma"],[data-vader="aska"]) .sol{opacity:.18}
/* Regn och snö */
.nederbord{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none}
body[data-vader="regn"] .nederbord,body[data-vader="aska"] .nederbord{opacity:.5;
  background-image:linear-gradient(105deg,transparent 0 48%,#cfe3ff 49% 50%,transparent 51%);background-size:14px 26px;animation:regn .6s linear infinite}
body[data-vader="sno"] .nederbord{opacity:.85;
  background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1.6px 1.6px at 70% 60%,#fff,transparent),radial-gradient(2.2px 2.2px at 45% 85%,#fff,transparent);
  background-size:70px 70px;animation:sno 6s linear infinite}
@keyframes regn{to{background-position:-7px 26px}}
@keyframes sno{to{background-position:20px 70px}}
@media (prefers-reduced-motion:reduce){.nederbord{animation:none!important}.himmel,.himmel::before,.sol{transition:none}}

.topp{max-width:820px;margin:0 auto;padding:max(18px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));position:relative}
.topp h1{font:800 1.6rem/1 var(--f-display);margin:0;letter-spacing:-.01em;text-shadow:0 1px 8px #0005}
.topp h1 span{color:var(--accent)}
.lede{margin:6px 0 0;color:#e2e9f5cc;font-size:.95rem;max-width:46ch;text-shadow:0 1px 6px #0006}
.nu{display:flex;align-items:flex-end;gap:14px;margin-top:14px;min-height:96px}
.temp{font:800 5.2rem/.9 var(--f-display);letter-spacing:-.04em;text-shadow:0 2px 18px #0004;font-variant-numeric:tabular-nums}
.nu-text{display:flex;flex-direction:column;gap:2px;padding-bottom:6px;text-shadow:0 1px 6px #0007;min-width:0}
.nu-text strong{font:700 1.25rem/1.15 var(--f-display)}
.nu-text span{color:#e2e9f5dd;font-size:.95rem}
.silhuett{display:block;width:100%;height:auto;margin-top:8px;color:var(--bg)}

/* ---------- Flikar ---------- */
nav{position:sticky;top:0;z-index:500;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
  margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
nav::-webkit-scrollbar{display:none}
nav button{display:flex;align-items:center;gap:7px;flex:none;font-weight:600;font-size:.98rem;color:#b7c4d8;background:var(--surface);
  border:1px solid var(--line);padding:9px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;min-height:44px}
nav button svg{width:19px;height:19px}
nav button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- Kort ---------- */
section.panel{display:flex;flex-direction:column;gap:14px}
.panel-inner{display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card.soon{border-style:dashed;background:transparent}
h2{font:700 1.2rem/1.2 var(--f-display);margin:0;display:flex;align-items:center;gap:10px}
.ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.ic svg{width:20px;height:20px}
.src{font-size:.82rem;color:var(--muted)}
.note{font-size:.98rem;color:var(--muted);margin:0}
.felruta{color:var(--warn)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border-radius:14px;padding:12px 14px}
.stat b{font:700 1.8rem/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:.88rem}
.prognos{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.prognos div{flex:none;min-width:70px;text-align:center;background:var(--surface-2);border-radius:14px;padding:10px 6px;font-size:.88rem;display:flex;flex-direction:column;align-items:center;gap:2px}
.prognos svg{width:28px;height:28px}
.prognos b{display:block;font:700 1.35rem/1.1 var(--f-display)}
.prognos small{color:var(--muted)}

.ok{display:flex;gap:12px;align-items:flex-start}
.ok strong{display:block;font-size:1.05rem}
.dot{width:14px;height:14px;border-radius:50%;background:var(--ok);flex:none;margin-top:5px;box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}
.dot.YELLOW,.dot.MESSAGE,.dot.amber{background:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 20%,transparent)}
.dot.ORANGE,.dot.RED,.dot.red{background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 20%,transparent)}

ul.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ul.list li{display:grid;grid-template-columns:5.8rem 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
ul.list li:first-child{border-top:0}
.time{font:400 .85rem/1.4 var(--f-data);color:var(--muted);font-variant-numeric:tabular-nums}
.what{min-width:0;overflow-wrap:anywhere}
.what strong{display:block}
.lokal{font:600 .7rem/1 var(--f-data);text-transform:uppercase;letter-spacing:.06em;background:var(--accent-soft);color:var(--accent);padding:3px 6px;border-radius:4px;margin-left:6px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-weight:600;font-size:.92rem;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);padding:7px 13px;border-radius:999px;cursor:pointer;min-height:38px}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
input[type=search]{padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);width:100%}
.skola-info{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 6px;border-top:1px solid var(--line);font-size:.98rem;vertical-align:top}
th{font:600 .72rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-top:0}
td.mono{font-family:var(--f-data);white-space:nowrap}
td small{display:block;color:var(--muted)}
.late{color:var(--warn);font-weight:600}
s.gammal{color:var(--muted)}
.rad{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.rad:first-child{border-top:0}
.rad .what span{display:block}
.cams{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.cams figure{margin:0;display:flex;flex-direction:column;gap:4px}
.cams img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.cams figcaption{font-size:.88rem;font-weight:600}
.cams figcaption small{display:block;font-weight:400;color:var(--muted)}

/* ---------- Bussar: stor karta ---------- */
.kartkort{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#0b1220}
#karta{width:100%;height:max(380px,calc(100dvh - 190px));background:#0b1220}
.kartkort.helskarm{position:fixed;inset:0;z-index:2000;border-radius:0;border:0}
.kartkort.helskarm #karta{height:100dvh}
body.las{overflow:hidden}
.kartknappar{position:absolute;z-index:1000;top:10px;right:10px;display:flex;flex-direction:column;gap:8px;padding-top:env(safe-area-inset-top,0px)}
.kartknapp{width:46px;height:46px;border-radius:14px;border:0;background:#0d1626e6;color:var(--fg);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px #0006}
.kartknapp svg{width:22px;height:22px}
.kartknapp[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.kartinfo{position:absolute;z-index:1000;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#0d1626ee;border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:0 4px 18px #0007;backdrop-filter:blur(6px)}
.kartinfo .what{flex:1 1 160px}
.kartinfo strong{font:700 1.05rem var(--f-display)}
.kartinfo .src{display:block}
.linjebricka{flex:none;min-width:40px;height:40px;padding:0 8px;border-radius:12px;display:grid;place-items:center;color:#fff;font:800 1.15rem var(--f-display);background:var(--c,#2f80ed)}
.smal{font-size:.88rem;padding:6px 11px;min-height:36px}
.demo-skylt{position:absolute;z-index:1000;top:10px;left:58px;background:var(--accent);color:var(--accent-ink);font:700 .78rem var(--f-data);letter-spacing:.06em;padding:5px 9px;border-radius:8px;margin-top:env(safe-area-inset-top,0px)}
.leaflet-container{font:inherit;background:#0b1220}
.leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important;font-size:20px!important}
.leaflet-control-attribution{font-size:10px}
.leaflet-control-attribution a{color:#2563a8}

/* Bussikonen: bussen sedd ovanifrån, fronten pekar dit den kör */
.bussmark{background:none;border:0}
.buss{position:relative;width:44px;height:44px;cursor:pointer;transition:opacity .3s}
.buss svg{position:absolute;inset:0;width:44px;height:44px;filter:drop-shadow(0 2px 3px #0008);transition:transform .8s ease}
.buss .nr{position:absolute;top:-8px;left:28px;min-width:24px;height:22px;padding:0 5px;border-radius:11px;background:var(--c);color:#fff;
  border:2px solid #fff;font:800 12px/18px var(--f-body);text-align:center;box-shadow:0 1px 4px #0007;white-space:nowrap}
.buss.vald svg{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 2px 3px #0008)}
.buss.vald .nr{transform:scale(1.15)}
.buss.dimmad{opacity:.25}

footer{font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
footer p{margin:0 0 8px}
footer summary{cursor:pointer;color:var(--fg)}

@media (min-width:900px){
  .temp{font-size:6.5rem}
  .topp h1{font-size:2rem}
}

/* Silhuetten får inte bli för hög på stora skärmar */
.silhuett{height:clamp(54px,9vw,96px)}
/* På bussfliken krymper himlen, så att kartan får nästan hela skärmen */
body[data-flik="buss"] :is(.lede,.nu){display:none}
body[data-flik="buss"] .silhuett{height:34px;margin-top:4px}
body[data-flik="buss"] .sol{width:40px;height:40px;top:6px}
/* Solen/månen bredvid temperaturen, inte bakom texten */
.sol{top:150px;right:9%}
body[data-dygn="gryning"] .sol,body[data-dygn="kvall"] .sol{top:170px}
body[data-dygn="natt"] .sol{top:160px}
@media (min-width:700px){.sol{top:60px}body[data-dygn="gryning"] .sol,body[data-dygn="kvall"] .sol{top:120px}body[data-dygn="natt"] .sol{top:50px}}
body[data-flik="buss"] .sol{top:6px!important}
/* Bredare karta på stora skärmar */
body[data-flik="buss"] .wrap{max-width:1400px}

/* Veckoprognos */
.vecka{display:flex;flex-direction:column}
.dag{display:grid;grid-template-columns:5.6rem 30px 1fr 5.4rem;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.dag:first-child{border-top:0}
.dag-namn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dag svg{width:28px;height:28px;color:var(--muted)}
.dag.vt-klart svg,.dag.vt-halvklart svg{color:var(--accent)}
.dag.vt-regn svg,.dag.vt-aska svg{color:var(--link)}
.dag.vt-sno svg{color:#dbe8ff}
.dag-temp{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;min-width:0}
.dag-temp small{color:var(--muted);width:2.4em;text-align:right;flex:none}
.dag-temp b{font:700 1.15rem var(--f-display);width:2.4em;flex:none}
.stapel{position:relative;flex:1;height:8px;border-radius:4px;background:var(--surface-2);min-width:30px}
.stapel i{position:absolute;top:0;bottom:0;border-radius:4px;min-width:8px}
.dag-extra{display:flex;flex-direction:column;align-items:flex-end;font-size:.85rem;color:var(--muted);line-height:1.25;text-align:right}
.dag-extra .blot{color:var(--link);font-weight:600}
.forklaring{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:.9rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.forklaring p{margin:0}
.forklaring b{color:var(--fg);font-weight:600}
.forklaring .kall{color:#7fb6ff}.forklaring .varm{color:#ffb86b}
.skala{display:inline-block;vertical-align:middle;width:46px;height:8px;border-radius:4px;margin-right:4px;
  background:linear-gradient(90deg,rgb(79,124,255),rgb(127,182,255),rgb(207,227,255),rgb(255,210,122),rgb(255,157,77))}