/* Sundsvallskollen, designen "Kvällsljus" (Robin 2026-11-05), i RS-färgerna svart, vitt och orange #ff6a13 (2026-11-08).
   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{
  /* RS-färger (Robin 2026-11-08): svart, vitt och orange. Orange text bara på svart/mörkt (5,3–7,3:1),
     på orange står texten i svart (7,3:1). Grön/gul/röd/blå finns kvar bara där färgen betyder något
     (läget, varningar, försening, regn, var jag är). Linjefärgerna på kartan ändras inte. */
  --bg:#000; --surface:#121212; --surface-2:#1e1e1e; --fg:#fff; --muted:#a8a8a8; --line:#2e2e2e;
  --accent:#ff6a13; --accent-ink:#000; --accent-soft:#ff6a1329;
  --ok:#3ccf82; --amber:#ffc04d; --warn:#ff7a66; --link:#ff6a13; --info:#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%}
/* Textstorlek: allt i rem växer. Utgår från webbläsarens egen textstorlek (16px som standard). */
html[data-text="stor"]{font-size:118.75%}
html[data-text="storst"]{font-size:137.5%}
body{margin:0;background:var(--bg);color:var(--fg);font:1.0625rem/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;background:#000;color:#fff;padding:7px 12px 8px;border-radius:12px} /* svart bricka: orange "kollen" syns mot alla himlar */
.topp h1 span{color:var(--accent)}
.topp-rad{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.textval{display:flex;align-items:center;gap:2px;margin-left:auto;padding:3px 3px 3px 10px;border-radius:999px;background:#00000099;border:1px solid #ffffff2e;font-size:14px}
.textval span{color:#fff;margin-right:2px}
.textval button{min-width:40px;height:40px;padding:0 6px;border-radius:999px;border:0;background:none;color:#fff;font:700 15px/1 var(--f-body);cursor:pointer}
.textval button[data-text="stor"]{font-size:18px}
.textval button[data-text="storst"]{font-size:21px}
.textval button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.textval button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.lede{margin:6px 0 0;color:#ffffffcc;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:#ffffffdd;font-size:.95rem}
.silhuett{display:block;width:100%;height:auto;margin-top:8px;color:var(--bg)}

/* ---------- Flikar ---------- */
/* Tio flikar i två rader om fem (Robin 2026-11-08), både på dator och mobil – inget göms, ingen scroll i sidled */
nav{position:sticky;top:0;z-index:500;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;
  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;justify-content:center;gap:7px;min-width:0;font-weight:600;font-size:.98rem;color:#d0d0d0;background:var(--surface);
  border:1px solid var(--line);padding:9px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;min-height:44px}
nav button svg{width:19px;height:19px}
/* Dator: flikarna krymper hellre än att gå utanför bild */
@media (min-width:841px){nav button{padding:9px 10px;font-size:.93rem;gap:6px} nav button svg{width:18px;height:18px;flex:none}}
nav button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
nav .kort{display:none}
/* Mobil och smal skärm: ikon och ett kort ord (Robin 2026-11-05), två rader om fem */
@media (max-width:840px){
  nav{gap:4px;padding-top:8px;padding-bottom:8px}
  nav button{flex-direction:column;justify-content:center;gap:3px;padding:7px 1px;border-radius:12px;font-size:min(.68rem,11.5px);min-height:54px;min-width:0}
  nav button svg{width:22px;height:22px}
  nav .lang{display:none}
  nav .kort{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:360px){nav button{font-size:min(.6rem,9.6px);letter-spacing:-.01em} nav button svg{width:19px;height:19px}}

/* ---------- 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}
/* Viktiga nummer: stora knappar att ringa med */
.nummer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nummer li{display:grid;grid-template-columns:minmax(0,8.6em) 1fr;gap:4px 14px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.nummer a{grid-row:span 2;display:grid;place-items:center;min-height:48px;padding:6px 10px;border-radius:12px;background:#ffffff14;border:1px solid var(--line);
  color:var(--fg);text-decoration:none;font-family:var(--f-data);text-align:center}
.nummer a b{font-size:.95rem;white-space:nowrap}
.nummer .akut a{background:var(--warn);border-color:var(--warn);color:#2a0b06}
.nummer .akut a b{font-size:1.4rem}
.nummer span{font-size:.98rem;line-height:1.4}
.nummer em{font-style:normal;font-size:.85rem;color:var(--ok);font-weight:600}
.nummer em::before{content:"● ";font-size:.7em;vertical-align:.15em}
/* Läget i korthet: korta meningar i lite större text */
.korthet-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.korthet-rad{display:flex;gap:12px;align-items:flex-start;font-size:1.08rem;line-height:1.45}
.korthet-rad .dot{margin-top:6px}
.dot.info{background:var(--info);box-shadow:0 0 0 4px color-mix(in srgb,var(--info) 20%,transparent)}
.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}
.rad .what .tider{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:.88rem;color:var(--fg);font-variant-numeric:tabular-nums}
.rad .what .tider span{display:inline}
.tider .lage{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.tider .lage.pagar{background:var(--accent);color:var(--accent-ink)}
.tider .lage.snart{background:#ffffff1f;color:#fff}
.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:#000}
#karta{width:100%;height:max(380px,calc(100dvh - 250px));background:#000}
.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:#000000e6;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)}
/* Ruta när man trycker på en hållplats */
.hp-tryck{cursor:pointer}
.hp-ruta .leaflet-popup-content-wrapper,.hp-ruta .leaflet-popup-tip{background:#000000f2;color:var(--fg);box-shadow:0 2px 12px #0008}
.hp-ruta .leaflet-popup-content{margin:12px 14px;font:.98rem/1.4 var(--f-body);width:min(272px,calc(100vw - 90px))!important}
.hp-ruta a.leaflet-popup-close-button{color:var(--fg);width:34px;height:34px;font-size:24px;line-height:32px}
.hp-innehall strong{display:block;font:700 1.1rem var(--f-display);margin:0 28px 6px 0}
.hp-linjer{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.hp-linje{display:inline-block;min-width:2.1em;padding:1px 6px;border-radius:7px;background:var(--c);color:#fff;font:700 .85rem/1.35 var(--f-body);text-align:center;text-shadow:0 1px 1px #0006}
.hp-vald{margin:0 0 8px;padding:8px 10px;border-radius:10px;background:#ffffff12}
.hp-rubrik{margin:4px 0 4px;font-weight:600;color:var(--muted);font-size:.88rem}
.hp-avg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:min(38vh,260px);overflow:auto}
.hp-avg li{display:flex;align-items:center;gap:8px}
.hp-mot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-avg time{font:600 .95rem var(--f-data);white-space:nowrap}
.hp-avg small{font:700 .8rem var(--f-data)}
.hp-ark{position:absolute;z-index:1100;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom,0px));max-height:62%;overflow:auto;
  padding:14px 14px 12px;border-radius:16px;background:#000;border:1px solid var(--line);color:var(--fg);box-shadow:0 -2px 18px #000a;font-size:.98rem;line-height:1.4}
.hp-stang{position:absolute;top:6px;right:6px;width:40px;height:40px;border:0;border-radius:12px;background:#ffffff14;color:var(--fg);font-size:24px;line-height:1;cursor:pointer}
.hp-ark .hp-avg{max-height:none;overflow:visible}
/* Var jag är: blå prick (stannar i telefonen, skickas aldrig) */
.kartmeddelande{position:absolute;z-index:1001;top:10px;left:64px;right:66px;margin:0 auto;max-width:360px;padding:10px 14px;border-radius:12px;
  background:#000000f2;color:var(--fg);font-size:.95rem;box-shadow:0 2px 10px #0006;text-align:center}
.jag-prick{border-radius:50%;background:#2f7de1;border:3px solid #fff;box-shadow:0 0 0 6px #2f7de155,0 1px 6px #0008}
.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:#000000ee;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}
.leaflet-container{font:inherit;background:#000}
/* Mörk karta (Robin 2026-11-05): OpenStreetMap med färgfilter, ingen ny karttjänst eller nyckel */
#karta .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.18)} /* nästan grå, så att linjefärgerna syns */
#karta.leaflet-container{background:#2c2c2c} /* samma ton som kartan, så att glipor mellan rutorna inte syns */
#karta .leaflet-bar{border:1px solid var(--line);box-shadow:0 2px 8px #0006}
#karta .leaflet-bar a{background:#000000e6;color:#fff;border-bottom-color:var(--line)}
#karta .leaflet-bar a:hover{background:var(--surface-2)}
#karta .leaflet-control-attribution{background:#000000cc;color:#d0d0d0}
#karta .leaflet-control-attribution a{color:var(--accent)}
.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)}
.bussmark.dold{display:none}
/* Linjeknappar överst på kartan (mellan zoom och helskärm), rullar i sidled */
.kartlinjer{position:absolute;z-index:1000;top:6px;left:58px;right:62px;display:flex;flex-wrap:nowrap;gap:5px;margin-top:env(safe-area-inset-top,0px);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 4px 8px;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.kartlinjer::-webkit-scrollbar{display:none}
.kartlinjer::after{content:"";flex:none;width:18px} /* sista knappen hamnar utanför toningen */
.kartlinjer:empty{display:none}
.kl-knapp{flex:none;min-width:36px;height:32px;padding:0 9px;border-radius:999px;border:2px solid var(--c,#4a4a4a);background:#000000e6;color:#fff;
  font:800 .85rem var(--f-body);cursor:pointer;box-shadow:0 2px 8px #0006;font-variant-numeric:tabular-nums}
.kl-knapp[aria-pressed="true"]{background:var(--c,var(--accent));border-color:#fff;color:#fff}
.kl-knapp:not([style])[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:640px){.kl-knapp{min-width:32px;height:30px;padding:0 7px;font-size:.8rem}}

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}
body[data-flik="buss"] nav{align-self:center;width:min(calc(100% + 2 * max(16px,env(safe-area-inset-left,0px))), 820px)} /* flikarna står kvar på samma ställe när kartan är bred */

/* 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(--info)}
.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)}
.dag-temp b{font:700 1.15rem var(--f-display)}
.dag-temp .tg{display:flex;flex-direction:column;line-height:1.1;flex:none;width:2.6em}
.dag-temp .tg.min{align-items:flex-end;text-align:right}
.dag-temp .kl{font:500 .72rem var(--f-body);color:var(--muted);white-space:nowrap;margin-top:2px;opacity:.85}
.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(--info);font-weight:600}
.dag-extra span{white-space:nowrap}
@media (max-width:480px){
  .dag{grid-template-columns:4.3rem 24px minmax(0,1fr) 4.4rem;gap:7px}
  .dag-namn{font-size:.9rem}
  .dag svg{width:24px;height:24px}
  .dag-temp{gap:6px}
  .stapel{min-width:10px} /* största text + "ca 13" sköt ut raden 11 px på iPhone SE (2026-11-08) */
  .dag-extra{font-size:.78rem}
}
.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))}

/* Tåg: tryck på en avgång för alla stationer */
tr.klickbar{cursor:pointer}
tr.klickbar:hover td,tr.klickbar[data-oppen] td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
tr.klickbar .pil{display:inline-grid;place-items:center;min-width:32px;min-height:32px;padding:0;margin-left:4px;background:none;border:0;cursor:pointer;font-size:1.1rem;color:var(--muted);transition:transform .2s}
tr.klickbar[data-oppen] .pil{transform:rotate(180deg)}
tr.tagdetalj td{padding:4px 8px 14px;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.stopp{list-style:none;margin:6px 0 8px;padding:0 0 0 14px;border-left:2px solid var(--line);display:flex;flex-direction:column}
.stopp li{display:grid;grid-template-columns:7.2rem minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:5px 0;position:relative;font-size:.92rem}
.stopp li::before{content:"";position:absolute;left:-20px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--muted)}
.stopp li.varit{color:var(--muted)}
.stopp li.varit::before{background:var(--muted)}
.stopp li.hit{font-weight:700}
.stopp li.hit::before{background:var(--accent);border-color:var(--accent)}
.stopp .tid{white-space:nowrap}
.stopp .st small{color:var(--muted);font-weight:400}
.stopp .st .st-info{display:block;color:var(--accent);font-weight:600}
.stopp .lg{text-align:right;white-space:nowrap}
.tag-info{margin:6px 0 0}
@media (max-width:480px){.stopp li{grid-template-columns:4.6rem minmax(0,1fr) auto;font-size:.86rem}}

/* Evenemang: länkkort */
.lankar{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.lankkort{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--fg);text-decoration:none}
.lankkort:hover{border-color:var(--accent)}
.lankkort strong{color:var(--accent)}

.lov-stor{font-size:1.25rem;margin:.2rem 0}
.lov-lista{list-style:none;padding:0;margin:.8rem 0 .4rem;display:grid;gap:.35rem}
.lov-lista li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:.35rem}
.lov-lista li>*{margin:0}

/* Bussens tur: nästa hållplats, ankomst, försening och alla hållplatser */
.tur{flex:1 1 100%;order:5;min-width:0}
.tur-fakta{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:2px 0 6px;font-variant-numeric:tabular-nums}
.tur-fakta dt{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;align-self:center}
.tur-fakta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.lage-ok{color:#5fd38d}.lage-sen{color:#ffb15c}.lage-tidig{color:#7cc4ff}
.lanklik{background:none;border:0;padding:6px 0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tur-lista{list-style:none;margin:4px 0 0;padding:0;max-height:min(22vh,260px);overflow-y:auto;font-variant-numeric:tabular-nums;overscroll-behavior:contain}
.tur-lista li{display:flex;justify-content:space-between;gap:12px;padding:5px 2px 5px 18px;position:relative;border-top:1px solid var(--line)}
.tur-lista li::before{content:"";position:absolute;left:4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--c,#888)}
.tur-lista li.forbi{opacity:.45}
.tur-lista li.nasta{font-weight:700}
.tur-lista li.nasta::before{box-shadow:0 0 0 3px #fff3}
.tur-lista time{flex:none;color:var(--muted)}
.tur-lista li.nasta time{color:var(--fg)}
.kartinfo{max-height:calc(100% - 20px);overflow-y:auto}
.tur-fakta{margin-top:0}
@media (max-width:420px){.tur-fakta{gap:1px 12px}.tur-lista li{padding-block:4px}}
@media (min-width:840px){.kartinfo:has(#tur:not([hidden])){right:auto;width:440px}}

/* Försening på bussikonen: +min (sen) eller −min (före) */
.buss .avvik{position:absolute;top:30px;left:28px;height:18px;padding:0 5px;border-radius:9px;font:800 11px/16px var(--f-body);color:#1a1205;
  border:1px solid #0008;box-shadow:0 1px 3px #0007;white-space:nowrap;font-variant-numeric:tabular-nums}
.buss .avvik.sen{background:#ffb15c}
.buss .avvik.tidig{background:#7cc4ff}
/* Hållplatser nära dig (2026-11-08) */
.nara-lista{display:flex;flex-direction:column;gap:12px}
.nara-lista:empty{display:none}
.nara-hp{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.nara-hp:first-child{border-top:0;padding-top:0}
.nara-topp{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.nara-namn{font:700 1.05rem var(--f-display);text-align:left;padding:0}
.nara-avst{font-size:.88rem;color:var(--muted)}
.nara-avg{max-height:none}
.nara-avg .hp-mot{white-space:normal;overflow-wrap:anywhere}

/* Mer live-data (2026-11-08): elpris, luft och pollen, havet. Detaljer bakom "Visa" (details/summary, fungerar med tangentbord och skärmläsare). */
details.mer{border-top:1px solid var(--line);padding-top:10px}
details.mer summary{cursor:pointer;font-weight:600;color:var(--accent);min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
details.mer summary::-webkit-details-marker{display:none}
details.mer summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;flex:none}
details.mer[open] summary::before{transform:rotate(45deg)}
details.mer table{margin-top:6px}
details.mer caption{text-align:left;font-weight:700;padding:8px 0 4px}
.pristabell td{padding:6px}
.pristabell tr.nu-rad td{background:var(--accent-soft);font-weight:700}
.prisrad{display:flex;align-items:center;gap:10px;width:100%}
.pris-tal{min-width:3.2em;text-align:right;font-family:var(--f-data)}
.pristabell td:last-child{width:70%}
.prisspar{flex:1;min-width:0}
.prisstapel{display:block;height:8px;border-radius:4px;background:var(--accent)}
.pollen-lista{margin:6px 0 0;padding-left:1.2em}
#luft{display:flex;flex-direction:column;gap:10px}
th.enhet{text-transform:none;letter-spacing:0;font-family:var(--f-body);font-size:.85rem}
/* Elpriset över tid (diagram i SVG). Orange staplar/linje på mörkt, "nu" är vit stapel med ordet "nu". */
.eldiagram{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.eldiagram h3{font:700 1.05rem/1.25 var(--f-display);margin:0}
.el-sammanfattning{margin:0;font-size:.98rem}
.el-diagram{width:100%;min-height:190px}
.el-diagram svg{display:block;overflow:visible}
.d-text{fill:var(--muted);font-family:var(--f-body)}
.d-enhet{fill:var(--fg);font-family:var(--f-body);font-weight:600}
.d-rutnat{stroke:var(--line);stroke-width:1}
.d-axel{stroke:#6b6b6b;stroke-width:1}
.d-stapel{fill:var(--accent)}
.d-stapel.d-nu{fill:#fff}
.d-nu-text{fill:#fff;font-family:var(--f-body);font-weight:700}
.d-dela{stroke:#fff;stroke-width:1;stroke-dasharray:4 3}
.d-linje{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.d-yta{fill:var(--accent-soft)}

/* Nödnumret står alltid kvar i Läget, fast Viktiga nummer har en egen flik (2026-11-08) */
.nodrad{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.nodrad a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 16px;border-radius:12px;background:var(--warn);color:#2a0b06;font-weight:700;font-size:1.1rem;text-decoration:none}
.nodrad a b{font-size:1.35rem}
.nodrad a svg{width:22px;height:22px;flex:none}
.nodrad a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.nodrad .lanklik{min-height:44px;font-size:1rem}
.korthet-rad .lanklik{padding:2px 0;font-size:.95em;min-height:24px}
/* Läget i korthet: ikon för ämnet, färgad efter läget (grön/gul/röd/blå) */
.radikon{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;margin-top:-.3em;border-radius:50%;color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent);border:1.5px solid color-mix(in srgb,var(--ok) 55%,transparent)}
.radikon svg{width:1.2em;height:1.2em}
/* Störst text: ringen växer högst till 44 px så att texten får plats (iPhone SE) */
.radikon{width:min(2.1em,44px);height:min(2.1em,44px)}
.radikon svg{width:min(1.2em,25px);height:min(1.2em,25px)}
.radikon.amber{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent);border-color:color-mix(in srgb,var(--amber) 55%,transparent)}
.radikon.red{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.radikon.info{color:var(--info);background:color-mix(in srgb,var(--info) 16%,transparent);border-color:color-mix(in srgb,var(--info) 55%,transparent)}