/* ============================================================
   Norrbotten.org – designlager (etapp 1)
   Läggs ovanpå app.css/pages.css. Tas bort genom att ta bort länken i layout.php.
   Väderkänsla: html[data-mood] sätts av sky.js efter verkligt väder och tid.
   ============================================================ */
@property --mA{syntax:"<color>";inherits:true;initial-value:rgba(62,207,190,.12)}
@property --mB{syntax:"<color>";inherits:true;initial-value:rgba(90,163,210,.10)}
@property --mC{syntax:"<color>";inherits:true;initial-value:#3ecfbe}
:root{--mA:rgba(62,207,190,.12);--mB:rgba(90,163,210,.10);--mC:#3ecfbe;transition:--mA 4s ease,--mB 4s ease,--mC 4s ease}
html[data-mood=clear]{--mA:rgba(255,196,96,.20);--mB:rgba(62,207,190,.14);--mC:#ffb84d}
html[data-mood=dusk]{--mA:rgba(255,122,120,.20);--mB:rgba(167,139,250,.20);--mC:#ff8a80}
html[data-mood=night]{--mA:rgba(88,120,220,.18);--mB:rgba(62,207,190,.10);--mC:#7c9cf0}
html[data-mood=aurora]{--mA:rgba(70,230,160,.30);--mB:rgba(167,139,250,.26);--mC:#46e6a0}
html[data-mood=cloud]{--mA:rgba(150,172,194,.18);--mB:rgba(90,163,210,.12);--mC:#8fb0cc}
html[data-mood=rain]{--mA:rgba(84,138,206,.22);--mB:rgba(88,108,140,.20);--mC:#5a95d8}
html[data-mood=snow]{--mA:rgba(184,214,246,.22);--mB:rgba(120,170,236,.14);--mC:#9cc8f4}
html[data-mood=fog]{--mA:rgba(204,214,224,.18);--mB:rgba(160,176,192,.14);--mC:#a8b8c8}
html[data-mood=thunder]{--mA:rgba(167,139,250,.28);--mB:rgba(255,200,100,.14);--mC:#b9a2ff}

/* Himlen får ett mjukt, väderstyrt sken överst */
.skybg::before{content:"";position:absolute;left:-12%;right:-12%;top:-8%;height:70vh;pointer-events:none;
  background:radial-gradient(52% 62% at 16% 0%,var(--mA),transparent 72%),radial-gradient(48% 56% at 86% 4%,var(--mB),transparent 70%);
  opacity:calc(var(--aurora-o) * 1.8);animation:moodDrift 48s ease-in-out infinite alternate}
@keyframes moodDrift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}

/* Rubriker: lugnare, med liten accentlinje */
.eyebrow{display:inline-flex;align-items:center;gap:9px;letter-spacing:.14em}
.eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--mC);opacity:.9}
.pagehead h1,.shead h1,.hero h1{letter-spacing:-.022em}
.pagehead,.shead{margin-bottom:22px}
.pagehead p,.shead__sub{font-size:1.04rem}

/* Kort: djup, tunn ljuskant och mjuka övergångar */
.card{transition:border-color .25s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),background .3s}
:root:not([data-theme=light]) .card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 93%,#fff 7%) 0,var(--surface) 70px);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.05)}
.card:hover{border-color:var(--line2)}
a.card:hover,.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
@media(min-width:900px) and (hover:hover){
  :root:not([data-theme=light]) .card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 80%,#fff 6%) 0,color-mix(in srgb,var(--surface) 86%,transparent) 70px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  [data-theme=light] .card{background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}

/* Knappar och chips */
.btn{transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(0) scale(.98)}
.chip{transition:background .2s,border-color .2s,color .2s}
.btn--primary{box-shadow:0 8px 22px -8px color-mix(in srgb,var(--mC) 70%,transparent),0 2px 6px rgba(0,0,0,.12)}

/* Mindre brus: ticker tonas ned, mobil döljer den */
.ticker{opacity:.78;transition:opacity .3s}.ticker:hover{opacity:1}
@media(max-width:640px){.ticker{display:none}}
/* Guiden "Gör till startsida" öppnas med knappen i sidhuvudet, så rutan visas bara då */
.guide:not([open]){display:none}
/* Läget-rutorna på startsidan hänger ihop */
.lgs + .lage{margin-top:0}
.lgs__x ul{margin:0;padding-left:18px}

/* Siffror lugnare att läsa */
.sitestats b,.lg__power b,.stat b,.num{font-variant-numeric:tabular-nums}

/* Mjuk sidövergång mellan sidor (webbläsare som stödjer det) */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vtOut .18s ease both}
  ::view-transition-new(root){animation:vtIn .28s ease both}
  @keyframes vtOut{to{opacity:0}}@keyframes vtIn{from{opacity:0}}
  /* Staggrad inladdning av kort i listor */
  html.js .reveal:nth-child(2){--d:.04s}html.js .reveal:nth-child(3){--d:.08s}html.js .reveal:nth-child(4){--d:.12s}html.js .reveal:nth-child(5){--d:.16s}html.js .reveal:nth-child(n+6){--d:.2s}
}
@media(prefers-reduced-motion:reduce){.skybg::before{animation:none}.card,.btn{transition:none}}
@media print{.skybg::before{display:none}}
/* Läget-rutan: ikon och rubrik på samma rad, lugnare lista */
.lgs{align-items:center;border-radius:var(--r)}.lgs__k .i{display:inline-block}.lgs__x ul{list-style:none;padding:0;margin:0}.lgs__x li+li{margin-top:3px}
.lgs__x li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin:0 9px 2px 0;vertical-align:middle}
.lgs--red .lgs__x li::before{background:var(--danger)}
/* Kommunfilter: en enda rad som går att svepa i stället för två rader knappar */
.chips.chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:2px 4px 6px;-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
.chips.chips--scroll::-webkit-scrollbar{display:none}.chips--scroll .chip,.chips--scroll a{flex:0 0 auto;white-space:nowrap}
.wxrain .i{width:12px;height:12px;vertical-align:-1px}
/* Anslagstavlans kategorier: en svepbar rad, mindre block */
.boardcats{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none;padding:2px 2px 8px;-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
.boardcats::-webkit-scrollbar{display:none}
.boardcat{flex:0 0 auto!important;width:auto!important;min-height:0!important;flex-direction:row!important;align-items:center;gap:8px;padding:9px 14px!important;white-space:nowrap}
.boardcat span{font-size:1em}
/* Sidfot: lugnare, mindre text, tydlig delning */
.footer__links{gap:6px 18px;font-size:.92rem}.footer__links a{opacity:.8}.footer__links a:hover{opacity:1}
.footer__links--legal{font-size:.84rem;opacity:.85;border-top:1px solid var(--line,rgba(255,255,255,.08));padding-top:12px;margin-top:10px}
.footer__links a::after,.footer__links a::before{content:none!important}
.footer__links--legal .footer__btn::before{content:none!important}.footer__links--legal{gap:6px 16px}
/* Läget: tydligt vad som är nytt och hur gammalt det är */
.lg__d>summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.lg__when{display:inline-flex;align-items:center;gap:8px;font-size:.82rem}
.lg__age{color:var(--muted,#8fa0b5)}
.lg__new{font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--accent,#3cc8b4);color:#04201b}
.lgp__a{font-size:13px;margin:0 0 6px;color:#5b6675}.lgp__n{background:#1fa38f;color:#fff;border-radius:5px;padding:1px 6px;font-size:11px;letter-spacing:.05em}
.lgm-pulse i{display:block;width:34px;height:34px;border-radius:50%;border:3px solid;animation:lgpulse 1.8s ease-out infinite;box-sizing:border-box}
@keyframes lgpulse{0%{transform:scale(.45);opacity:.95}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.lgm-pulse i{animation:none;opacity:.6}}
/* Meddelanderutor: ikon, text och länk på samma rad, stängknapp */
.banner{flex-wrap:nowrap;align-items:flex-start;gap:12px}.banner>.i{flex:none;margin-top:2px}.banner>span{flex:1 1 auto;min-width:0}
.banner .linkbtn,.banner>a{flex:none;white-space:nowrap}.banner form{margin:0}
@media (max-width:560px){.banner{flex-wrap:wrap}.banner>span{flex:1 1 calc(100% - 60px)}.banner>a,.banner>form{margin-left:32px}}
.banner__x{flex:none;margin-left:auto;background:none;border:0;color:inherit;opacity:.7;cursor:pointer;padding:2px;border-radius:6px;line-height:0}.banner__x:hover{opacity:1}
.banner__x .i{width:18px;height:18px}

.banner--late{animation:bnIn .5s ease 2.5s both}@keyframes bnIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.banner--late{animation:none}}