/* driftsradar.no – vaktmester og vegvesen: sort asfalt, skiltgult, sperrebånd */
:root {
  --sort: #000;
  --asfalt: #121212;
  --asfalt-2: #1b1b1b;
  --strek: #2a2a2a;
  --gul: #ffc800;
  --gul-lys: #ffd84d;
  --kritt: #f2f0ea;
  --betong: #bdb8ad;
  --gra: #8c8c8c;
  --rod: #e1251b;
  --rod-mork: #b00f0a;
  --gronn: #3fb35b;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --tekst: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --maks: 74rem;
  --tape: repeating-linear-gradient(-45deg, var(--gul) 0 16px, var(--sort) 16px 32px);
  --tape-tynn: repeating-linear-gradient(-45deg, var(--gul) 0 8px, var(--sort) 8px 16px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0; color: var(--kritt); background: transparent;
  font: 400 1.0625rem/1.55 var(--tekst); -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--gul); text-underline-offset: .18em; }
a:hover { color: var(--gul-lys); }
:focus-visible { outline: 3px solid var(--gul); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* bakgrunnsfoto bare øverst, så sort */
.bg { position: fixed; inset: 0; z-index: -1; }
.bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 3s ease; }
.bg-layer.vis { opacity: 1; }
.bg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.5) 45%, rgba(0,0,0,.62) 100%); }

/* topp */
.topp {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem;
  padding: .65rem max(1rem, env(safe-area-inset-left)) .65rem max(1rem, env(safe-area-inset-right));
  background: var(--sort);
}
.merke { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.nokkel { width: 2.5rem; height: 2.5rem; padding: .3rem; color: var(--sort); background: var(--gul); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--sort), 0 0 0 2px var(--gul); }
.ordmerke { font: 800 2rem/1 var(--display); color: var(--gul); letter-spacing: .005em; }
.meny-knapp { display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border: 0; background: var(--gul); border-radius: 6px; cursor: pointer; }
.streker, .streker::before, .streker::after { display: block; width: 1.3rem; height: 3px; background: var(--sort); position: relative; content: ""; }
.streker::before { position: absolute; top: -7px; }
.streker::after { position: absolute; top: 7px; }
.meny { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; background: var(--gul); }
.meny.apen { display: flex; }
.meny a { padding: .85rem 1.25rem; color: var(--sort); text-decoration: none; font: 700 1.3rem/1.2 var(--display); border-bottom: 2px solid var(--sort); }
.meny a:hover { background: var(--sort); color: var(--gul); }
@media (min-width: 66rem) {
  .meny { position: static; display: flex; flex-direction: row; flex-wrap: wrap; background: none; gap: .15rem; }
  .meny a { color: var(--gul); border: 0; padding: .35rem .55rem; font-size: 1.12rem; border-radius: 4px; }
  .meny a:hover { background: var(--gul); color: var(--sort); }
  .meny-knapp { display: none; }
}

/* sperrebånd – rolig i ro, bredt og i bevegelse ved alvorlige avvik */
.sperreband { height: 12px; position: sticky; top: 4.1rem; z-index: 19; background: var(--tape); background-size: 45.25px 45.25px; transition: height .6s ease; }
.sperreband.niva1 { height: 16px; }
.sperreband.niva2 { height: 24px; animation: band 1.8s linear infinite; }
@keyframes band { to { background-position: 45.25px 0; } }
.retningsbord { height: 36px; margin-top: 3rem; }
.retningsbord { background: var(--gul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='36' viewBox='0 0 46 36'%3E%3Cpath d='M6 0h14l16 18-16 18H6l16-18z' fill='%23000'/%3E%3C/svg%3E") repeat-x left center / 46px 36px; -webkit-mask: none; }
@media (prefers-reduced-motion: reduce) { .sperreband.niva2 { animation: none; } .bg-layer { transition: none; } html { scroll-behavior: auto; } }

main { max-width: var(--maks); margin: 0 auto; padding: 0 1rem 2rem; }

/* oppslag = midlertidig skiltplate */
.tavle { padding: 2.4rem 0 1.6rem; }
.oppslag {
  position: relative; max-width: 50rem; color: var(--sort); background: var(--gul);
  padding: 1.9rem 2.1rem 1.6rem; border-radius: 14px;
  box-shadow: inset 0 0 0 7px var(--gul), inset 0 0 0 11px var(--sort), 0 24px 50px -20px rgba(0,0,0,.9);
}
.oppslag.niva2 { box-shadow: inset 0 0 0 7px var(--gul), inset 0 0 0 11px var(--rod-mork), 0 24px 50px -20px rgba(0,0,0,.9); }
.skrue { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9d9d9, #6b6b6b 60%, #3a3a3a); }
.skrue::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #2a2a2a; transform: rotate(40deg); }
.s1 { top: 18px; left: 18px; } .s2 { top: 18px; right: 18px; } .s3 { bottom: 18px; left: 18px; } .s4 { bottom: 18px; right: 18px; }
.hilsen { margin: 0 0 .35rem; font: 700 1.1rem/1.2 var(--display); }
.oppslag h1 { margin: 0; font: 800 clamp(1.9rem, 5vw, 3.1rem)/1.04 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.punkter { margin: .9rem 0 0; padding: 0; list-style: none; font: 600 1.05rem/1.4 var(--tekst); }
.punkter li { padding: .2rem 0 .2rem 1.4rem; position: relative; }
.punkter li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem; background: var(--sort); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tidspunkt { margin: .9rem 0 0; font-size: .9rem; color: #3a3000; }

/* stedsvelger */
.sted { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 0 0 1rem; }
.sted label { font: 800 1.3rem var(--display); color: var(--gul); }
.sted select {
  appearance: none; -webkit-appearance: none; min-width: 12rem; max-width: 100%;
  padding: .6rem 2.6rem .6rem .9rem; font: 700 1.1rem var(--display); color: var(--sort);
  background: var(--gul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right .9rem center / .85rem;
  border: 0; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--sort); cursor: pointer;
}
.sted select:hover { background-color: var(--gul-lys); }
.sted-info { font-size: .875rem; color: var(--kritt); text-shadow: 0 1px 3px #000; flex-basis: 100%; }
@media (min-width: 48rem) { .sted-info { flex-basis: auto; } }

/* vaktmesterens logg */
.ticker { margin: 0 0 1.5rem; background: rgba(12,12,12,.86); backdrop-filter: blur(3px); border: 2px solid var(--gul); border-radius: 6px; overflow: hidden; }
.ticker-tittel { margin: 0; padding: .45rem 1rem; font: 800 1.1rem var(--display); color: var(--sort); background: var(--gul); }
.ticker ul { list-style: none; margin: 0; padding: .3rem 1rem .5rem; }
.ticker li { display: grid; grid-template-columns: 3.2rem 3.8rem 1fr; gap: .5rem; padding: .35rem 0; font-size: .95rem; border-top: 1px dashed var(--strek); }
.ticker li:first-child { border-top: 0; }
.ticker time { color: var(--gra); font-variant-numeric: tabular-nums; }
.ticker li span { font: 800 .9rem/1.6 var(--display); }
.ticker li.ny span { color: var(--gul); }
.ticker li.fikset span { color: var(--gronn); }
.ticker li.tom-linje { display: block; color: var(--betong); }

/* lampepanel = gule skiltplater */
.lamper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 40rem) { .lamper { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .lamper { grid-template-columns: repeat(3, 1fr); } }
.lamper li { display: flex; }
.lamper li a {
  flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .15rem .85rem;
  padding: 1rem 1.15rem; min-height: 6rem; color: var(--sort); text-decoration: none;
  background: var(--gul); border-radius: 10px; box-shadow: inset 0 0 0 4px var(--gul), inset 0 0 0 6px var(--sort);
  transition: transform .15s ease;
}
.lamper li a:hover { transform: translateY(-2px); background: var(--gul-lys); }
.lampe { width: 1.35rem; height: 1.35rem; border-radius: 50%; grid-row: span 2; background: #555; box-shadow: 0 0 0 3px var(--sort); }
.lampe.n0 { background: var(--gronn); box-shadow: 0 0 0 3px var(--sort), 0 0 10px 2px rgba(63,179,91,.6); }
.lampe.n1 { background: #ff9500; box-shadow: 0 0 0 3px var(--sort), 0 0 10px 2px rgba(255,149,0,.7); }
.lampe.n2 { background: var(--rod); box-shadow: 0 0 0 3px var(--sort), 0 0 12px 3px rgba(225,37,27,.75); }
.lampe.feil { background: transparent; border: 3px dashed var(--sort); box-shadow: none; }
.l-navn { font: 800 1.35rem/1.05 var(--display); }
.l-tall { font: 800 2.5rem/1 var(--display); grid-row: span 2; }
.l-tall.n2 { color: var(--rod-mork); }
.l-tekst { font-size: .9rem; font-weight: 500; color: #2b2400; }
.uvanlig { display: inline-block; margin-top: .3rem; padding: .05rem .4rem; font-style: normal; font-size: .82rem; font-weight: 600; color: var(--gul); background: var(--sort); border-radius: 3px; }

/* seksjoner – overskrift som skilt */
.seksjon { padding-top: 3.4rem; }
.seksjon h2 {
  display: inline-block; margin: 0 0 .7rem; padding: .35rem 1.1rem .4rem;
  font: 800 clamp(1.8rem, 4vw, 2.5rem)/1 var(--display); color: var(--sort);
  background: var(--gul); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--gul), inset 0 0 0 5px var(--sort);
}
.ingress { margin: 0 0 1.1rem; max-width: 62ch; color: var(--kritt); text-shadow: 0 1px 3px #000, 0 0 12px rgba(0,0,0,.8); }
.tips { margin: 1rem 0 0; font-size: .95rem; color: var(--kritt); text-shadow: 0 1px 3px #000; }
.innhold { background: rgba(12,12,12,.86); backdrop-filter: blur(3px); border-radius: 0 0 6px 6px; position: relative; padding-top: 10px; }
.innhold::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--tape-tynn); }

.rad { display: grid; grid-template-columns: .8rem 1fr; gap: .2rem .85rem; padding: .9rem 1rem; border-bottom: 1px solid var(--strek); }
.rad:last-child { border-bottom: 0; }
.prikk { width: .8rem; height: .8rem; border-radius: 50%; margin-top: .4rem; background: #555; }
.prikk.n0 { background: var(--gronn); } .prikk.n1 { background: var(--gul); } .prikk.n2 { background: var(--rod); }
.rad-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; }
.rad-tittel { font-weight: 600; }
.rad-meta { font-size: .875rem; color: var(--gra); }
.rad-tekst { grid-column: 2; margin: .15rem 0 0; color: var(--betong); font-size: .95rem; max-width: 72ch; }
.merkelapp { display: inline-block; padding: .05rem .5rem; font: 800 .88rem/1.45 var(--display); border-radius: 3px; background: var(--strek); color: var(--kritt); }
.merkelapp.gul { background: var(--gul); color: var(--sort); }
.merkelapp.oransje { background: #ff8a00; color: var(--sort); }
.merkelapp.rød, .merkelapp.stengt { background: var(--rod); color: #fff; }

.gruppe-tittel { margin: 0; padding: .75rem 1rem .45rem; font: 800 1.2rem/1.2 var(--display); color: var(--gul); background: rgba(0,0,0,.7); border-top: 2px solid var(--gul); }
.innhold > .gruppe-tittel:first-child, .innhold > .foreldet + .gruppe-tittel { border-top: 0; }
.tom { padding: 1.1rem 1rem; color: var(--betong); }
.tom strong { color: var(--gronn); font-weight: 700; }
.feilmelding { margin: .6rem 1rem; padding: .8rem 1rem; color: var(--sort); background: repeating-linear-gradient(-45deg, var(--gul) 0 10px, var(--gul-lys) 10px 20px); border-radius: 4px; font-weight: 500; }
.feilmelding a { color: var(--sort); font-weight: 700; }
.foreldet { padding: .5rem 1rem; font-size: .875rem; color: var(--sort); background: var(--gul); font-weight: 600; }
.flere { display: block; width: 100%; padding: .85rem 1rem; border: 0; background: var(--gul); color: var(--sort); font: 800 1.1rem var(--display); cursor: pointer; text-align: left; }
.flere:hover { background: var(--gul-lys); }

.tjenester { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); padding: .3rem 0 .7rem; }
.tjeneste { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 1rem; }
.tjeneste .prikk { flex: none; }
.tjeneste b { font-weight: 600; display: block; }
.tjeneste small { color: var(--gra); font-size: .85rem; }

.tabell { width: 100%; border-collapse: collapse; }
.tabell th, .tabell td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--strek); }
.tabell th { font: 800 1.02rem var(--display); color: var(--sort); background: var(--gul); }
.tabell td.tall { font: 800 1.35rem var(--display); }
.tabell td.tall.n1 { color: var(--gul); } .tabell td.tall.n2 { color: var(--rod); }
@media (max-width: 34rem) {
  .tabell thead { display: none; }
  .tabell tr { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--strek); }
  .tabell td { border: 0; padding: .5rem 1rem; }
  .tabell td:first-child { grid-column: 1 / -1; padding-bottom: 0; font-weight: 700; color: var(--gul); }
  .tabell td[data-l]::before { content: attr(data-l); display: block; font: 500 .8rem var(--tekst); color: var(--gra); }
}

.stortall { display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; padding: 1.2rem 1rem; }
.stortall div span { display: block; font: 800 3.1rem/1 var(--display); color: var(--gul); }
.stortall div small { color: var(--betong); }
.operatorer { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem 1rem; border-bottom: 1px solid var(--strek); }
.operatorer span { padding: .2rem .55rem; background: var(--sort); border: 1px solid var(--strek); border-radius: 3px; font-size: .9rem; }
.operatorer b { color: var(--gul); margin-left: .3rem; }

.korad { display: grid; grid-template-columns: .8rem 1fr; gap: .85rem; padding: .9rem 1rem; border-bottom: 1px solid var(--strek); }
.korad b { font-weight: 600; margin-right: .6rem; }
.tre { display: grid; grid-template-columns: repeat(3, minmax(0, 8.5rem)); gap: .5rem; margin-top: .55rem; }
.tre div { padding: .35rem .6rem; background: var(--sort); border-left: 4px solid var(--strek); }
.tre .avvik { border-left-color: var(--rod); }
.tre small { display: block; font-size: .8rem; color: var(--gra); }
.tre span { font: 800 1.55rem/1.1 var(--display); }
.tre .avvik span { color: var(--rod); }
.vannstand td.tall.n0 { color: var(--kritt); }
.fotnote { margin: 0; padding: .6rem 1rem .9rem; font-size: .85rem; color: var(--gra); }

/* bunn */
.bunn { padding: 2rem 1rem 3rem; color: var(--betong); font-size: .875rem; background: rgba(0,0,0,.88); }
.bunn > * { max-width: var(--maks); margin-left: auto; margin-right: auto; }
.bunn p { max-width: 75ch; margin-left: auto; margin-right: auto; }
.bunnlenker { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem auto; max-width: 75ch; }
.bunnlenker a { padding: .3rem .7rem; color: var(--sort); background: var(--gul); border-radius: 4px; text-decoration: none; font: 700 1rem var(--display); }
.bunnlenker a:hover { background: var(--gul-lys); }
.foto { font-size: .78rem; }
.foto a { color: var(--gra); }
.kildeliste .rad-tittel { font-size: 1.05rem; }

@media (max-width: 39.99rem) {
  .lamper { gap: .45rem; }
  .lamper li a { min-height: 4.4rem; padding: .7rem .95rem; }
  .l-tall { font-size: 2.1rem; }
  .oppslag { padding: 1.6rem 1.5rem 1.3rem; }
}

/* fotokreditering alltid synlig nederst i hjørnet */
.foto { position: fixed; right: .6rem; bottom: calc(.4rem + env(safe-area-inset-bottom)); z-index: 5; max-width: 60vw; margin: 0;
  padding: .2rem .5rem; font-size: .72rem; color: var(--betong); background: rgba(0,0,0,.65); border-radius: 3px; }
.foto:empty { display: none; }

/* ---------- v3: Norge nå, kart, fjell, kamera ---------- */
.norge-naa { margin: 0 0 1rem; }
.naa-tall { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
.naa-boks { padding: .8rem 1rem .7rem; background: rgba(0,0,0,.82); border: 2px solid var(--gul); border-radius: 8px; }
.naa-boks span { display: block; font: 800 2.6rem/1 var(--display); color: var(--gul); }
.naa-boks small { display: block; margin-top: .2rem; font-size: .88rem; color: var(--kritt); }
.naa-boks.rod { border-color: var(--rod); }
.naa-boks.rod span { color: #ff5a4f; }

.trend { display: inline-block; margin: .3rem 0 0 .3rem; font-style: normal; font-size: .8rem; font-weight: 700; padding: .05rem .35rem; border-radius: 3px; background: var(--sort); }
.trend.opp { color: #ff6b5f; }
.trend.ned { color: #7be08f; }

.kart { height: 440px; background: #1b1b1b; }
@media (max-width: 40rem) { .kart { height: 320px; } }
.leaflet-container { font: 500 .9rem var(--tekst); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--gul); color: var(--sort); border-radius: 6px; }
.leaflet-popup-content b { font: 800 1rem var(--display); }
.leaflet-control-attribution { background: rgba(0,0,0,.7) !important; color: var(--betong) !important; }
.leaflet-control-attribution a { color: var(--gul) !important; }

.oversikt-rutenett { display: grid; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .oversikt-rutenett { grid-template-columns: 1fr 1fr; } }
.fylkesoyler { list-style: none; margin: 0; padding: .5rem 1rem .8rem; }
.fylkesoyler button { width: 100%; display: grid; grid-template-columns: 8.5rem 1fr 2.4rem; align-items: center; gap: .6rem; padding: .3rem 0;
  background: none; border: 0; color: var(--kritt); font: 500 .95rem var(--tekst); cursor: pointer; text-align: left; }
.fylkesoyler button:hover .navn, .fylkesoyler button.valgt .navn { color: var(--gul); }
.soyle { height: .8rem; background: var(--strek); border-radius: 2px; overflow: hidden; }
.soyle i { display: block; height: 100%; background: var(--tape-tynn); }
.fylkesoyler b { font: 800 1.15rem var(--display); text-align: right; color: var(--gul); }
.tidslinje { padding: .8rem 1rem 0; }
.tidslinje svg { width: 100%; height: 120px; display: block; }
.tidslinje .flate { fill: rgba(255,200,0,.18); }
.tidslinje .linje { fill: none; stroke: var(--gul); stroke-width: 3; vector-effect: non-scaling-stroke; }
ol.toppliste { margin: 0; padding: .5rem 1rem .8rem 2.6rem; }
ol.toppliste li { padding: .35rem 0; border-bottom: 1px solid var(--strek); }
ol.toppliste li::marker { font: 800 1.1rem var(--display); color: var(--gul); }
ol.toppliste .prikk { display: inline-block; vertical-align: middle; margin: 0 .3rem 0 0; }
.merkelapp.gronn { background: var(--gronn); color: var(--sort); }

.fjellrutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; padding: .8rem; align-items: start; }
.fjellkort { padding: .8rem .9rem; background: rgba(0,0,0,.75); border: 2px solid var(--strek); border-radius: 8px; }
.fjellkort.n1 { border-color: var(--gul); }
.fjellkort.n2 { border-color: var(--rod); }
.fjellkort header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .45rem; }
.fjellkort header b { font: 800 1.35rem/1.1 var(--display); }
.fjellkort .veg { padding: .05rem .45rem; font: 800 .95rem var(--display); color: var(--sort); background: var(--gul); border-radius: 3px; }
.vaer { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .5rem; font-size: .92rem; color: var(--betong); }
.vaer span { white-space: nowrap; }
.fjellkort .rad-tekst { margin-top: .4rem; }

figure.kamera { grid-column: 2; margin: .55rem 0 0; max-width: 22rem; }
figure.kamera img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #222; border-radius: 4px; border: 2px solid var(--strek); }
figure.kamera figcaption { font-size: .78rem; color: var(--gra); margin-top: .2rem; }
figure.kamera.stor { max-width: none; }
.kamerarutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; padding: .8rem; }
.korad figure.kamera { grid-column: auto; }

/* =================== BYGGEPLASS: gul hjelm, sjablong, stål og sperrebånd =================== */
:root {
  --sjablong: "Big Shoulders Stencil Display", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --nagle: radial-gradient(circle at 35% 35%, #8a8a8a 0 1.5px, #3a3a3a 2.5px, #111 4px, transparent 4.5px);
  --stal: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px), linear-gradient(180deg, rgba(24,24,24,.94), rgba(10,10,10,.94));
}
.hjelm { width: 2.9rem; height: 2.9rem; filter: drop-shadow(0 2px 0 #000); }
.ordmerke { font: 900 2.25rem/1 var(--sjablong); letter-spacing: .02em; color: var(--gul); }
.topp { border-bottom: 0; box-shadow: 0 4px 0 #000; }

/* oppslaget: anleggsskilt med sperrebånd over og under */
.oppslag { padding: 2.6rem 2.2rem 2.2rem; border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 6px var(--sort), 0 26px 50px -18px rgba(0,0,0,.95); }
.oppslag.niva2 { box-shadow: inset 0 0 0 6px var(--rod-mork), 0 26px 50px -18px rgba(0,0,0,.95); }
.oppslag::before, .oppslag::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--tape); background-size: 45.25px 45.25px; }
.oppslag::before { top: 0; } .oppslag::after { bottom: 0; }
.skrue { top: auto; } .s1 { top: 24px; left: 16px; } .s2 { top: 24px; right: 16px; } .s3 { bottom: 24px; left: 16px; } .s4 { bottom: 24px; right: 16px; }
.hjelm-stor { position: absolute; right: 1.6rem; top: 1.7rem; width: 5.5rem; height: 5.5rem; transform: rotate(12deg); filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.hilsen { font: 800 1.15rem/1.2 var(--display); text-transform: none; }
.oppslag h1 { font: 900 clamp(2.2rem, 6vw, 3.8rem)/.98 var(--sjablong); letter-spacing: .01em; padding-right: 5.5rem; }
.punkter { font-weight: 700; }
@media (max-width: 40rem) { .hjelm-stor { width: 3.6rem; height: 3.6rem; right: 1rem; top: 1.5rem; } .oppslag h1 { padding-right: 3.2rem; } }

/* tall i sjablong */
.naa-boks span, .stortall div span, .l-tall, .tabell td.tall, .tre span, .fylkesoyler b { font-family: var(--sjablong); font-weight: 900; letter-spacing: .02em; }
.naa-boks { background: var(--stal); border-width: 3px; border-radius: 4px; position: relative; }
.naa-boks::after { content: ""; position: absolute; inset: 6px; pointer-events: none;
  background: var(--nagle) left top / 10px 10px no-repeat, var(--nagle) right top / 10px 10px no-repeat,
              var(--nagle) left bottom / 10px 10px no-repeat, var(--nagle) right bottom / 10px 10px no-repeat; }

/* fliser: gule stålplater med nagler */
.lamper li a { border-radius: 4px; box-shadow: inset 0 0 0 5px var(--sort); position: relative; padding-left: 1.35rem; }
.lamper li a::after { content: ""; position: absolute; inset: 9px; pointer-events: none;
  background: var(--nagle) left top / 10px 10px no-repeat, var(--nagle) right top / 10px 10px no-repeat,
              var(--nagle) left bottom / 10px 10px no-repeat, var(--nagle) right bottom / 10px 10px no-repeat; }
.l-navn { font: 800 1.4rem/1.05 var(--display); text-transform: none; }

/* seksjonsoverskrifter: sjablong på gult skilt, sperrebånd etter */
.seksjon h2 { font: 900 clamp(2rem, 4.6vw, 2.9rem)/1 var(--sjablong); letter-spacing: .015em; padding: .45rem 1.2rem .5rem;
  border-radius: 4px; box-shadow: inset 0 0 0 4px var(--sort), 6px 6px 0 #000; }
.seksjon { position: relative; }
.innhold { background: var(--stal); border: 2px solid #2b2b2b; border-top: 0; }
.innhold::before { height: 12px; background: var(--tape); background-size: 45.25px 45.25px; }
.gruppe-tittel { font: 800 1.25rem/1.2 var(--display); border-top: 3px solid var(--gul); }

.ticker { border-width: 3px; border-radius: 4px; background: var(--stal); }
.ticker-tittel { font: 900 1.3rem var(--sjablong); letter-spacing: .02em; }
.sted label { font: 900 1.5rem var(--sjablong); }
.sted select { border-radius: 4px; box-shadow: inset 0 0 0 3px var(--sort); font-weight: 800; }
.flere { font: 900 1.2rem var(--sjablong); letter-spacing: .03em; }
.fjellkort, .naa-boks { border-radius: 4px; }
.fjellkort header b { font-family: var(--sjablong); font-weight: 900; font-size: 1.5rem; }
.bunnlenker a { font: 800 1.05rem var(--display); border-radius: 3px; }
.sperreband { height: 14px; }
.sperreband.niva1 { height: 18px; }
.sperreband.niva2 { height: 26px; }
.hjelm-stor path:nth-child(1), .hjelm-stor path:nth-child(3) { fill: var(--sort); }
.hjelm-stor path:nth-child(2) { fill: var(--gul); stroke: var(--sort); }
@media (min-width: 66rem) and (max-width: 87.99rem) {
  .meny { position: absolute; display: none; flex-direction: column; background: var(--gul); gap: 0; }
  .meny.apen { display: flex; }
  .meny a { color: var(--sort); border-bottom: 2px solid var(--sort); border-radius: 0; padding: .85rem 1.25rem; font-size: 1.3rem; }
  .meny-knapp { display: flex; }
}

/* bare avvik */
.i-rute { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .9rem; }
.i-rute-tittel { font: 800 1rem var(--display); color: var(--kritt); text-shadow: 0 1px 3px #000; margin-right: .2rem; }
.ok-chip { padding: .15rem .55rem; background: rgba(0,0,0,.75); color: #7be08f; border: 1px solid #2f6b3c; border-radius: 3px; font-weight: 600; }
.feil-chip { padding: .15rem .55rem; background: rgba(0,0,0,.75); color: var(--betong); border: 1px dashed var(--gra); border-radius: 3px; text-decoration: none; }
.lamper .alt-ok { grid-column: 1 / -1; padding: 1.4rem 1.2rem; font: 900 1.8rem var(--sjablong); color: var(--sort); background: var(--gronn); border-radius: 4px; box-shadow: inset 0 0 0 5px var(--sort); }
.seksjon[hidden], .meny a[hidden] { display: none !important; }
/* lenker */
.rad-tittel a, .ticker li a, ol.toppliste a, .fjellkort header b a { color: var(--kritt); text-decoration: underline; text-decoration-color: var(--gul); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.rad-tittel a:hover, .ticker li a:hover, ol.toppliste a:hover, .fjellkort header b a:hover { color: var(--gul); }
a.merkelapp { text-decoration: none; }
a.merkelapp:hover { filter: brightness(1.15); }

/* hendelsesbilder */
.hendelsesbilder { display: grid; gap: .8rem; margin: 0 0 1.2rem; }
.bilde { background: var(--stal); border: 3px solid var(--gul); border-radius: 4px; overflow: hidden; }
.bilde.n2 { border-color: var(--rod); }
.bilde header { padding: 1rem 1.2rem .6rem; background: rgba(0,0,0,.6); position: relative; }
.bilde header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--tape-tynn); }
.bilde.n2 header::before { background: repeating-linear-gradient(-45deg, var(--rod) 0 8px, var(--sort) 8px 16px); }
.bilde-merke { display: inline-block; margin-top: .4rem; padding: .05rem .45rem; font: 800 .85rem var(--display); color: var(--sort); background: var(--gul); border-radius: 2px; }
.bilde h2 { margin: .3rem 0 .2rem; font: 900 clamp(1.8rem, 4.5vw, 2.6rem)/1 var(--sjablong); color: var(--gul); letter-spacing: .01em; }
.bilde.n2 h2 { color: #ff6a5f; }
.driver { margin: .2rem 0; font-weight: 600; }
.driver a { color: var(--kritt); }
.telling { list-style: none; margin: 0; padding: .7rem 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; background: rgba(0,0,0,.45); }
.telling li { font-size: .95rem; }
.telling b { font: 900 1.5rem var(--sjablong); color: var(--gul); margin-right: .15rem; }
.bilde-vis { width: 100%; padding: .75rem 1rem; border: 0; background: var(--gul); color: var(--sort); font: 900 1.15rem var(--sjablong); cursor: pointer; text-align: left; }
.bilde-vis:hover { background: var(--gul-lys); }
.kildeboks { text-decoration: none; }
.kildeboks span { color: var(--gronn) !important; }
.kildeboks.delvis span { color: var(--gul) !important; }
.innhold.nodvarsel { border-color: var(--rod); }