/* ══════════════════════════════════════════════════════════════
Nirona — komponenter v2
Hver komponent har ett v2-navn og, der v1 hadde et, en peker fra det
gamle navnet. Utseendet er v2 uansett hvilket navn ruten bruker.
══════════════════════════════════════════════════════════════ */
/* ── Knapper: fylt, tonet, ren, kant ─────────────────────────
Fylt er det ene du helst skal gjøre. Aldri to fylte ved siden av hverandre. */
.knapp,.btn,.act{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:var(--trykk);padding:0 18px;border-radius:var(--r-sm);
border:1px solid transparent;font:inherit;font-size:var(--t-sm);font-weight:600;
text-decoration:none;cursor:pointer;color:var(--blekk);background:var(--kort);
border-color:var(--haar-sterk);transition:background .12s,filter .12s;
white-space:nowrap}
.knapp:hover,.btn:hover,.act:hover{background:var(--felt)}
.knapp.fylt,.btn.primary,.act.primary,.btn.accent,.act.accent{
background:var(--aksent);color:var(--paa-aksent);border-color:transparent}
.knapp.fylt:hover,.btn.primary:hover,.act.primary:hover,.btn.accent:hover,
.act.accent:hover{background:var(--aksent);filter:brightness(1.08)}
.knapp.tonet{background:var(--felt);color:var(--aksent-tekst);border-color:transparent}
/* Kant er standardutseendet på .knapp, og finnes som eget navn fordi
markupen sier det høyt der valget er bevisst. */
.kant{background:var(--kort);color:var(--blekk);border-color:var(--haar-sterk)}
.knapp.ren{background:transparent;color:var(--aksent-tekst);border-color:transparent}
.knapp.tonet:hover,.knapp.ren:hover{background:var(--felt)}
/* «Liten» er 36 px, ikke 34. Under 36 begynner en knapp å bli vanskelig å
treffe med tommelen, og den lille knappen brukes nettopp der det er trangt. */
.knapp.liten{min-height:var(--trykk);padding:0 14px;font-size:var(--t-sm)}
.knapp[disabled],.btn[disabled],.act[disabled]{cursor:default;color:var(--dempet);
background:var(--felt);border-color:transparent;filter:none}
.knapp svg,.btn svg,.act svg{width:17px;height:17px}
.act{width:100%;margin-bottom:8px;justify-content:flex-start}
/* ── Felter ──────────────────────────────────────────────────── */
.felt,.field{display:block;margin-bottom:16px}
.felt label,.field label{display:block;font-size:var(--t-xs);font-weight:700;margin-bottom:6px}
.felt .hj,.field .help{font-size:var(--t-xs);color:var(--dempet);margin:-2px 0 7px;line-height:1.5}
.inn,.input,input[type=text],input[type=email],input[type=search],
textarea,select{width:100%;min-height:var(--trykk);padding:0 13px;font:inherit;
font-size:var(--t-md);color:var(--blekk);background:var(--kort);
border:1px solid var(--haar-sterk);border-radius:var(--r-sm)}
textarea{padding:11px 13px;min-height:110px;resize:vertical;line-height:1.55}
.inn::placeholder,.input::placeholder,textarea::placeholder{color:var(--dempet)}
.inn:focus,.input:focus,input:focus,textarea:focus,select:focus{
border-color:var(--aksent);box-shadow:0 0 0 3px var(--felt)}
select{appearance:none;padding-right:38px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346505B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--aksent);cursor:pointer}
.avkryss{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
border:1px solid var(--haar);border-radius:var(--r-sm);background:var(--felt);
cursor:pointer;font-size:var(--t-sm)}
/* ── Brikker ─────────────────────────────────────────────────
Alltid tekst på tonet flate. Aldri hvit tekst på farge. */
/* Brikker ligger på kort eller side. På den dypeste flaten (felt) ville de
tonede fargene falt under 7:1 — så der får de sin egen, litt sterkere
bakgrunn i stedet for at kontrasten stille blir for lav. */
.felt .brikke,.segk .brikke,.inn .brikke{background:var(--kort)}
.brikke,.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:600;line-height:1.5;
background:var(--felt);color:var(--dempet);white-space:nowrap}
.brikke .p,.chip::before{content:"";width:6px;height:6px;border-radius:50%;
background:currentColor;flex:none}
.chip.nodot::before{display:none}
.brikke.aks,.chip.teal,.chip.live{background:var(--felt);color:var(--aksent-tekst)}
.brikke.rod,.chip.p1{background:var(--rod-flate);color:var(--rod-tekst)}
.brikke.gul,.chip.p2{background:var(--gul-flate);color:var(--gul-tekst)}
.brikke.bla,.chip.p3{background:var(--bla-flate);color:var(--bla-tekst)}
.brikke.gronn,.chip.ok{background:var(--gronn-flate);color:var(--gronn-tekst)}
/* ══ Tilstanden bæres av FORMEN, ikke av fargen ═══════════════════════
Målt 29. september 2026. Holdes alle fire statusfargene på AAA-gulvet
(7:1), presses de inn i et bånd mellom 4,7 og 7,6 prosent luminans; i
CIE L* lander de tonede flatene 2,8 fra hverandre, der omtrent 5 er der
en forskjell begynner å registreres.
Den som ikke skiller dem på kulør — og den som ser skjermen med
gjenskinn over, altså hver operatør i et opplyst kontrollrom — ser én
tone. Fire statuser som bare skilles med farge, er derfor én status.
Markøren finnes fra før i hver brikke, som en 6 px prikk. Den blir her
fire ulike former. Ingen mal er endret: formen følger av klassen
brikken alt har.
over frist trekant
venter ring
ny firkant
løst hake
Fargen på markøren er MARKØR-tokenet (3:1, WCAG 1.4.11), ikke
tekst-tokenet — markøren er en lampe, ikke et ord. */
/* Formen står på et PSEUDOELEMENT, ikke på `.p`.
Første utgave hang den på ``, som brikkene i køen har.
Brikkene på landingssiden har den ikke — og der sto altså fire statuser
uten noen markør i det hele tatt. Det ble sett på et skjermbilde i ren
gråtone, ikke fanget av en måling: kontrastporten måler tekst mot flate,
og en manglende markør har ingen kontrast å måle.
Med `::before` følger formen av KLASSEN, og finnes uansett hva malen
skrev. Der `.p` alt står, skjules den, så ingen brikke får to. */
.brikke.rod::before,.brikke.gul::before,
.brikke.bla::before,.brikke.gronn::before{content:"";flex:none}
.brikke.rod .p,.brikke.gul .p,.brikke.bla .p,.brikke.gronn .p{display:none}
.brikke.rod::before{background:var(--rod);width:9px;height:8px;
clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}
.brikke.gul::before{border:2px solid var(--gul);border-radius:50%;
width:9px;height:9px;box-sizing:border-box}
.brikke.bla::before{background:var(--bla);border-radius:1px;width:8px;height:8px}
.brikke.gronn::before{width:5px;height:9px;box-sizing:border-box;
border-right:2px solid var(--gronn);border-bottom:2px solid var(--gronn);
transform:rotate(40deg) translateY(-1px)}
.brikke.noyt,.chip.neutral{background:var(--felt);color:var(--dempet)}
/* ── Kort og rader ───────────────────────────────────────────── */
/* v4: kortet har ikke lenger en ramme. Flaten, skyggen og hårstreken under
etikettraden holder det sammen; rammen la en strek rundt alt på skjermen. */
.kort,.card{background:var(--hev);border:0;
border-radius:var(--r-lg);box-shadow:var(--skygge)}
/* ══ Raden er et RUTENETT, ikke en flex-rekke ═════════════════════════
── Hva som var galt ─────────────────────────────────────────────────
Målt 29. september 2026 på supportkonsollen, seks rader i køen:
Over frist brikke 92 px tittelen starter på 383
Venter brikke 75 px tittelen starter på 366
Ny brikke 51 px tittelen starter på 342
Løst brikke 57 px tittelen starter på 348
Tildelt meg brikke 100 px tittelen starter på 391
Uten eier brikke 87 px tittelen starter på 378
Tittelens venstrekant spriker 49 px, og saksnummerets høyrekant 143.
Med `display:flex` arver hver kolonne bredden fra innholdet sitt, og
innholdet er en statustekst som varierer med tilstanden.
── Hvorfor det betyr noe her, og ikke bare er pent ──────────────────
En kø skannes NEDOVER. Øyet følger en kant. Når kanten flytter seg for
hver rad, må blikket finne begynnelsen på nytt hver gang — hele dagen,
på den ene flaten kravet handler om.
Med et rutenett har hver kolonne én bredde for hele listen: status,
sak, hvem og når, nummer. Da er det bare teksten som varierer. */
.rad,.row{display:grid;
/* To faste kolonner, og så én auto-kolonne per barn som følger. Da
virker raden med tre barn OG med fire, uten at noe brytes ned på en
ny linje. Med en fast liste på tre kolonner havnet det fjerde barnet
på rad to — og justeringsporten sa grønt, fordi de brutte numrene
sto pent under hverandre. */
grid-template-columns:var(--kol-status) minmax(0,1fr);
grid-auto-flow:column; grid-auto-columns:auto;
align-items:center;gap:14px;padding:14px 18px;
background:var(--hev);
border-bottom:1px solid var(--haar);min-height:60px;text-decoration:none;
color:inherit}
/* ── Annenhver rad, fram til v4 ──────────────────────────────────────
*
* En kø skannes NEDOVER, og blikket må kunne følge én rad tvers over uten
* å miste den. Trinnet mellom `--hev` og `--kort` er 4,5 L* — nok til å
* følge en rad, for lite til å lese som to ulike ting.
*
* Det var umulig før palett v3: trinnet mellom de samme to tokenene var
* 1,6 L*, altså usynlig. Stripene ville vært en regel uten virkning.
*/
/* v4, 5. oktober 2026: stripen er FJERNET, og det var den som tvang fram
* det grå lerretet. En stripe krever ~5 L* ned fra hvitt; over L* 95 finnes
* ikke den plassen. Skillet bæres nå av hårstreken på hver rad — dekor, ikke
* informasjon, og derfor utenfor 1.4.11. Se AD-2026-10-05 og AVVIK.md A14.
*
* `--kort` er dermed ikke lenger stripeflaten. Den er hvilestillingen under
* pekeren, og står under `.rad:hover`. */
.rad:nth-child(even),.row:nth-child(even){background:var(--hev)}
/* Bredden på statuskolonnen er den bredeste brikken, ikke et gjett: målt
til 100 px («Tildelt meg»), pluss luft. Endres teksten, endres tallet —
og porten `radjustering.mjs` sier fra hvis den ikke gjorde det. */
:root{--kol-status:116px}
.rad>.brikke,.row>.brikke{justify-self:start}
/* Alt som skal stå på høyre kant, står på høyre kant — uansett om raden
har tre kolonner eller fire. `.mlauto` het det da raden var flex; i et
rutenett gjør `margin-left:auto` ingenting, og navnet er blitt en felle. */
.rad>.mono,.row>.mono,
.rad>.mlauto,.row>.mlauto,
.rad>.note-sm,.row>.note-sm{justify-self:end;text-align:right}
/* En rad som ikke har alle fire kolonnene, faller tilbake til flex —
rutenettet skal ikke tvinge tomme celler inn i lister som er noe annet. */
.rad.fri,.row.fri{display:flex}
.rad:last-child,.row:last-child{border-bottom:0}
.rad:hover,.row:hover{background:var(--kort)}
.rad .t,.row .t{font-weight:600}
.rad .u,.row .u{font-size:var(--t-xs);color:var(--sekundaer)}
.row.ny{box-shadow:inset 3px 0 0 var(--aksent-hev)}
.av{width:32px;height:32px;border-radius:50%;background:var(--felt);
color:var(--aksent-tekst);display:grid;place-items:center;font-size:var(--t-xs);
font-weight:700;flex:none}
/* ── Segmentvelger ───────────────────────────────────────────── */
.segk{display:inline-flex;background:var(--felt);padding:3px;border-radius:var(--r-sm);
gap:2px}
/* 38 px pluss 3 px padding på hver side gir 44 i alt — samme trykkflate som
en knapp, slik at et valg ikke er vanskeligere å treffe enn en handling. */
.segk a,.segk span,.segk button{padding:0 14px;border:0;background:transparent;
border-radius:var(--r-xs);font:inherit;font-size:var(--t-sm);font-weight:600;
color:var(--dempet);cursor:pointer;text-decoration:none;min-height:var(--trykk);
display:inline-flex;align-items:center;gap:6px}
.segk .on,.segk button.on{background:var(--kort);color:var(--blekk);box-shadow:var(--skygge)}
/* ── Meldinger ───────────────────────────────────────────────── */
.melding,.callout{border-left:3px solid var(--aksent-hev);background:var(--felt);
padding:13px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--t-sm);
margin:0 0 16px;line-height:1.6}
.melding.avvist{border-left-color:var(--rod-tekst);background:var(--rod-flate)}
.melding.venter{border-left-color:var(--gul-tekst);background:var(--gul-flate)}
/* ── Småting ─────────────────────────────────────────────────── */
/* v4: sans og normal kasus. Monospor i versaler er beholdt der det bærer
noe — kode, tastatur, loggutdrag — og fjernet der det bare var stil. */
.overl,.overline{font-size:12.5px;font-weight:600;letter-spacing:0;
color:var(--sekundaer)}
.note-sm{font-size:var(--t-xs);color:var(--sekundaer)}
/* En lenke inne i en merknad arvet merknadens farge, og dermed
sekundærrollens 4,5:1-gulv. En lenke er ikke metadata — og den skal
dessuten se ut som en lenke. Fanget av rollekontrollen 5. oktober 2026. */
.note-sm a{color:var(--aksent-tekst)}
.ikon{width:20px;height:20px;flex:none}
.kbd{font-family:var(--mono);font-size:var(--t-mono);border:1px solid var(--kant);
border-radius:var(--r-xs);padding:1px 6px;color:var(--sekundaer)}
/* ── Veiviseren og saksvisningen (v1-navn) ───────────────────── */
.viewhead{margin-bottom:20px}
.viewhead h2{font-size:var(--t-h2);margin-bottom:4px}
.viewhead p{margin:0;color:var(--dempet);font-size:var(--t-md)}
/* Sidehodet på en flate som skannes: tittelen, og ingenting mer. En
forklaring under tittelen leses én gang og koster to linjer hver dag. */
.viewhead.smal{margin-bottom:12px}
.viewhead.smal h2{margin-bottom:0}
/* Skjemaet som lager de lagrede visningene, ved brikkene det lager. Lukket
til noen spør — ellers er det et skjema som står åpent hele dagen for en
handling som gjøres et par ganger i året. */
.lagrevisning{position:relative}
.lagrevisning summary{display:inline-flex;align-items:center;
min-height:var(--trykk);padding:0 12px;cursor:pointer;
font-size:var(--t-sm);font-weight:600;color:var(--aksent-tekst)}
.lagrevisning form{max-width:420px;padding:14px 16px;background:var(--kort);
border:1px solid var(--haar);border-radius:var(--r-lg)}
.helpbox{background:var(--kort);border:1px solid var(--haar);border-radius:var(--r-lg);
padding:18px 20px;box-shadow:var(--skygge)}
.prob{display:block;padding:12px 14px;border:1px solid var(--haar);
border-radius:var(--r-sm);margin-bottom:8px;background:var(--kort);cursor:pointer;
text-decoration:none;color:inherit}
.prob:hover{border-color:var(--aksent)}
.prob.on{border-color:var(--aksent);background:var(--felt)}
.steps{display:flex;gap:6px;margin-bottom:22px}
.steps span{flex:1;height:4px;border-radius:var(--r-xs);background:var(--felt)}
.steps span.on{background:var(--aksent)}
.hasteval{display:grid;gap:8px}
.hasteval label{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;
border:1px solid var(--haar);border-radius:var(--r-sm);background:var(--kort);
cursor:pointer;font-weight:500}
.hasteval label:has(input:checked){border-color:var(--aksent);background:var(--felt)}
.hasteval input{margin-top:2px}
.sla{font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.sla.loper{color:var(--aksent-tekst)}
.sla.stille{color:var(--dempet)}
/* ══ Oppsettklasser ═════════════════════════════════════════════
CSP-hodet setter style-src 'self', og det blokkerer også style="…"-
attributter — stille. Alt oppsett skjer derfor med klasser. Disse er
det lille settet rutene trenger, med samme avstander som resten.
═══════════════════════════════════════════════════════════════ */
.p16{padding:16px 18px}.p18{padding:18px 20px}.p20{padding:20px 22px}
.p22{padding:22px 24px}.p26{padding:26px}.p0{padding:0}
.m0{margin:0}
.mb8{margin-bottom:8px}.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}
.mb14{margin-bottom:14px}.mb16{margin-bottom:16px}.mb18{margin-bottom:18px}
.mb20{margin-bottom:20px}.mb22{margin-bottom:22px}.mb26{margin-bottom:26px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.mt16{margin-top:16px}.mt18{margin-top:18px}.mt20{margin-top:20px}.mt22{margin-top:22px}
.mt28{margin-top:28px}
.my8{margin:8px 0}.mt-4-mb16{margin:-4px 0 16px}.mt-6-mb16{margin:-6px 0 16px}
.flex{display:flex}.wrap{flex-wrap:wrap}.kol{flex-direction:column}
.midt{align-items:center}.topp{align-items:flex-start}.slutt{align-items:flex-end}
.sentrer{justify-content:center}.hoyrestill{justify-content:flex-end}
.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}
.mlauto{margin-left:auto}.min0{min-width:0}.flex1{flex:1}
.midtstilt{text-align:center}.hoyre-tekst{text-align:right}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rutenett-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bredde-auto{width:auto;min-width:220px}.bredde-auto-2{width:auto;min-width:240px}
.overflow-skjult{overflow:hidden}
.ingen-strek{text-decoration:none;color:inherit}
.fw600{font-weight:600}.fw700{font-weight:700}
.dim{opacity:.7}.svak{opacity:.35}
.blekk{color:var(--blekk)}.rod-tekst{color:var(--rod-tekst)}.gul-tekst{color:var(--gul-tekst)}
.gronn-tekst{color:var(--gronn-tekst)}.aksent-tekst{color:var(--aksent-tekst)}
.hvit-tekst{color:var(--paa-aksent)}
/* Tomme tilstander. En tom skjerm uten forklaring leses som en feil. */
.tom{padding:26px;text-align:center;color:var(--dempet)}
/* Store tall på måltallkort */
.maaltall{font-size:var(--t-h2);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.maaltall.rod{color:var(--rod-tekst)}
/* Brødtekst i kort */
.tekst{margin:8px 0 0;font-size:var(--t-sm);line-height:1.7}
.tekst-mb{margin:8px 0 14px;font-size:var(--t-sm)}
.liten-midt{text-align:center;color:var(--dempet);margin:0 0 16px;font-size:var(--t-xs)}
/* ── Saklisten: faste kolonner, tegnet for å skannes ─────────────────────
*
* Settet er fast — velg · status · sak · eier · nr · alder · frist — og det
* er derfor kolonneoverskriften er mulig. Før v1.1.0 hadde raden et
* varierende antall kolonner, fordi fristbrikken ble utelatt når fristen var
* god; da sto de samme opplysningene på ulike steder fra rad til rad.
*
* `grid-auto-flow` er BORTE her med vilje: den fylte på med en kolonne per
* barn, og det er nettopp det som gjorde settet variabelt.
*/
.sakrad{display:grid;
/* Statuskolonnen er bredden på den LENGSTE statusteksten, ikke et gjett:
«Venter på leverandør» flommet 29 px inn i tittelen på 116 px. Porten
radjustering.mjs sier fra hvis teksten vokser forbi tallet igjen. */
grid-template-columns:24px 152px minmax(0,1fr) 88px 72px 56px 88px;
grid-auto-flow:row;gap:14px;
align-items:center;text-decoration:none;color:inherit;
border-left:3px solid transparent;padding-left:15px}
.sakrad .tittel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-weight:600}
/* Prioriteten er radens venstrekant, ikke en prikk i en egen kolonne. Den
koster ingen bredde, og den leses som det den er: en egenskap ved hele
raden. */
.sakrad.pri-rod{border-left-color:var(--rod)}
.sakrad.pri-gul{border-left-color:var(--gul)}
.sakrad.pri-bla{border-left-color:var(--bla)}
.prikk{width:8px;height:8px;border-radius:50%;background:var(--dempet)}
.prikk.rod{background:var(--rod)}.prikk.gul{background:var(--gul)}
.prikk.bla{background:var(--bla)}
.eier{font-size:var(--t-xs);color:var(--dempet);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.eier.ingen{color:var(--svak);font-style:italic}
.alder{text-align:right;color:var(--dempet)}
.alder.sen{color:var(--rod-tekst)}
.frist{text-align:right;font-size:var(--t-xs);font-weight:600}
.frist.rolig{color:var(--svak);font-weight:400}
.frist.rod{color:var(--rod-tekst)}
.frist.gul{color:var(--gul-tekst)}
.frist.bla{color:var(--bla-tekst)}
.frist.noyt{color:var(--dempet)}
/* Kolonneoverskriften. Egen flate og en sterk hårstrek under: den er en
etikettrad, ikke en sak. */
/* v4: etikettraden er ikke lenger en egen flate med sterk strek. Den er
tekst over en liste, og den ser slik ut. */
.kolonnehode{min-height:36px;background:transparent;
border-bottom:1px solid var(--haar);cursor:default}
.kolonnehode .kol{font-size:12.5px;font-weight:600;letter-spacing:0;
color:var(--sekundaer);overflow:hidden;white-space:nowrap}
.kolonnehode .kol.h{text-align:right}
/* Statistikktabellen */
.statrad{display:grid;grid-template-columns:1.4fr repeat(5,1fr) auto;gap:12px;
align-items:center}
.statrad.hode{background:var(--felt)}
/* Segmentvelger som kan bryte linje */
.segk.wrap{flex-wrap:wrap}
/* Inndata uten type-attributt skal se ut som alle andre */
input:not([type]){width:100%;min-height:var(--trykk);padding:0 13px;font:inherit;
font-size:var(--t-md);color:var(--blekk);background:var(--kort);
border:1px solid var(--haar-sterk);border-radius:var(--r-sm)}
input:not([type]):focus{border-color:var(--aksent);box-shadow:0 0 0 3px var(--felt)}
@media(max-width:760px){
.grid2,.grid4,.rutenett-4{grid-template-columns:1fr}
/* På telefon holder tre kolonner: status, sak, frist. Nummer, eier og
alder er ett trykk unna, og en rad som prøver sju kolonner på 360 px
bryter -- da står kantene pent på linje fordi alle har brutt likt. */
.sakrad{grid-template-columns:104px minmax(0,1fr) 84px;gap:10px;
padding-left:11px}
.sakrad .velg-sak,.sakrad .nr,.sakrad .eier,.sakrad .alder{display:none}
.kolonnehode{display:none}
.statrad{grid-template-columns:1fr 1fr;gap:6px}
}
/* ── Det store feltet ────────────────────────────────────────
Ett felt som er hele poenget med siden — virksomhetens navn, søkeordet —
får en størrelse som sier det. Apple gjør det samme i oppsettet av en ny
enhet: ett spørsmål, ett stort felt, ett svar. */
.inn.stor{min-height:56px;font-size:var(--t-lg);padding:0 16px;border-radius:var(--r)}
.inn.stor:focus{box-shadow:0 0 0 4px var(--felt)}
/* Lesbarhet i lange sider: begrens linjelengden. Over 75 tegn per linje
mister øyet linjen på vei tilbake. */
.view p,.view .u,.view .note-sm{max-width:72ch}
.view h2{max-width:28ch}
/* Rader som er lenker skal kjennes som rader, ikke som lenker. */
a.rad{text-decoration:none;color:inherit}
a.rad:hover .tittel{color:var(--aksent-tekst)}
/* Skjemaer i kort: feltene puster */
.kort .felt:last-of-type{margin-bottom:6px}
/* ── Wiki-tekst ──────────────────────────────────────────────
Lange tekster som skal leses, ikke skannes. Linjelengde, luft mellom
avsnitt, og overskrifter som skiller uten å rope. */
.wikitekst{font-size:var(--t-md);line-height:1.72;max-width:72ch}
.wikitekst h2{font-size:var(--t-h3);margin:26px 0 10px}
.wikitekst h3{font-size:var(--t-lg);margin:22px 0 8px}
.wikitekst h4{font-size:var(--t-md);margin:18px 0 6px}
.wikitekst h2:first-child,.wikitekst h3:first-child{margin-top:0}
.wikitekst p{margin:0 0 14px}
.wikitekst ul,.wikitekst ol{margin:0 0 14px;padding-left:22px}
.wikitekst li{margin-bottom:6px}
.wikitekst a{color:var(--aksent-tekst);font-weight:600}
.wikitekst code{font-family:var(--mono);font-size:var(--t-sm);background:var(--felt);
padding:2px 6px;border-radius:var(--r-xs)}
.wikitekst pre{background:var(--felt);border:1px solid var(--haar);
border-radius:var(--r-sm);padding:14px 16px;overflow:auto;margin:0 0 14px}
.wikitekst pre code{background:none;padding:0;font-size:var(--t-sm);line-height:1.6}
.wikitekst b{font-weight:700}
/* ══ Saksvisningen ══════════════════════════════════════════════
Meldingstråden, svarfeltet og fanene i den. Disse klassene sto uten
stiler i flere måneder — markupen var riktig, men ingenting traff den.
═══════════════════════════════════════════════════════════════ */
.bubble{background:var(--kort);border:1px solid var(--haar);border-radius:var(--r);
padding:14px 16px;margin-bottom:12px;max-width:72ch}
.bubble.intern{background:var(--gul-flate);border-color:transparent}
.bubble .who{display:flex;gap:8px;align-items:baseline;margin-bottom:6px;
font-size:var(--t-xs);color:var(--dempet)}
.bubble .who b{color:var(--blekk);font-size:var(--t-sm)}
.bubble p{margin:0;font-size:var(--t-md);line-height:1.65;white-space:pre-wrap}
.composer{background:var(--kort);border:1px solid var(--haar);border-radius:var(--r-lg);
padding:16px 18px;box-shadow:var(--skygge)}
.ctabs{display:inline-flex;background:var(--felt);padding:3px;border-radius:var(--r-sm);
gap:2px;margin-bottom:12px}
.ctab{padding:0 14px;min-height:var(--trykk);border:0;border-radius:var(--r-xs);
background:transparent;color:var(--dempet);font:inherit;font-size:var(--t-sm);
font-weight:600;cursor:pointer;display:inline-flex;align-items:center}
.ctab.on{background:var(--kort);color:var(--blekk);box-shadow:var(--skygge)}
.cinput{width:100%;min-height:88px;padding:12px 14px;font:inherit;font-size:var(--t-md);
line-height:1.6;color:var(--blekk);background:var(--kort);
border:1px solid var(--haar-sterk);border-radius:var(--r-sm);resize:vertical}
.cinput:focus{border-color:var(--aksent);box-shadow:0 0 0 3px var(--felt)}
.cfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.actnote{font-size:var(--t-xs);color:var(--dempet);margin-top:8px;line-height:1.55}
/* Sakstypevalg i veiviseren: to store kort, ikke to radioknapper. */
.typecards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.typecard{display:block;background:var(--kort);border:1px solid var(--haar-sterk);
border-radius:var(--r-lg);padding:20px;cursor:pointer;text-decoration:none;color:inherit}
.typecard:hover{border-color:var(--aksent)}
.typecard .ic{width:40px;height:40px;border-radius:var(--r);background:var(--felt);
color:var(--aksent-tekst);display:grid;place-items:center;margin-bottom:12px}
.typecard .ic svg{width:21px;height:21px}
.typecard b{display:block;font-size:var(--t-lg);margin-bottom:4px}
.typecard .d{font-size:var(--t-sm);color:var(--dempet)}
/* Køen som liste */
.qlist .rad:last-child{border-bottom:0}
/* Tabeller: plattformflaten og de juridiske dokumentene */
.tbl,.fakta{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tbl th,.fakta th{text-align:left;font-size:12.5px;letter-spacing:0;
color:var(--sekundaer);
padding:10px 12px;border-bottom:1px solid var(--haar);font-weight:600}
.tbl td,.fakta td{padding:12px;border-bottom:1px solid var(--haar);vertical-align:top}
.tbl tr:last-child td,.fakta tr:last-child td{border-bottom:0}
.fakta th{width:30%;color:var(--blekk);text-transform:none;font-family:var(--sans);
font-size:var(--t-sm);letter-spacing:0}
/* Juridiske dokumenter: lange tekster som skal kunne søkes i med Cmd+F,
derfor alltid synlige — ingen sammenklapping. */
.dok{max-width:820px;margin:0 auto;padding:34px 26px 80px}
.dok h1{font-size:var(--t-h1);margin-bottom:8px}
.dok h2{font-size:var(--t-h3);margin:34px 0 12px;display:flex;gap:10px;align-items:baseline}
.dok h3{font-size:var(--t-lg);margin:22px 0 8px}
.dok p,.dok li{font-size:var(--t-md);line-height:1.72;max-width:72ch}
.dok p{margin:0 0 14px}
.dok ul,.dok ol{margin:0 0 14px;padding-left:22px}
.dok .nummer{font-family:var(--mono);font-size:var(--t-xs);color:var(--aksent-tekst);
background:var(--felt);border-radius:var(--r-xs);padding:1px 8px;flex:none}
.dok .merknad{background:var(--gul-flate);border-left:3px solid var(--gul);
padding:14px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 22px;
font-size:var(--t-sm)}
.dok .innhold{background:var(--kort);border:1px solid var(--haar);
border-radius:var(--r-lg);padding:18px 22px;margin:0 0 26px}
.dok .innhold a{display:block;padding:5px 0;color:var(--aksent-tekst);font-weight:600;
text-decoration:none;font-size:var(--t-sm)}
/* Avkryssingen i opprettelsesskjemaet */
.avtale{display:flex;gap:12px;align-items:flex-start;padding:14px;
border:1px solid var(--haar);border-radius:var(--r-sm);background:var(--felt);
cursor:pointer;font-size:var(--t-sm);font-weight:400;margin:20px 0 0}
.avtale input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--aksent)}
.p4{padding:4px}
/* ══ Elementer uten klasse ══════════════════════════════════════
Et felt eller en knapp uten klasse skal ikke se ut som 1998. Dette er
sikkerhetsnettet, ikke unnskyldningen for å droppe klassen.
═══════════════════════════════════════════════════════════════ */
button:not([class]),input[type=submit]:not([class]){
min-height:var(--trykk);padding:0 18px;border-radius:var(--r-sm);
border:1px solid var(--haar-sterk);background:var(--kort);color:var(--blekk);
font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer}
button:not([class]):hover{background:var(--felt)}
table:not([class]){width:100%;border-collapse:collapse;font-size:var(--t-sm)}
table:not([class]) td,table:not([class]) th{padding:10px 12px;
border-bottom:1px solid var(--haar);text-align:left}
/* ══ Bunnlinjen ═══════════════════════════════════════════════════
Én mal for alle flater. Sentrert, fordi den ikke konkurrerer med noe —
den er der for den som leter etter den.
═══════════════════════════════════════════════════════════════ */
.bunn{border-top:1px solid var(--haar);text-align:center;margin-top:auto;
/* Det trygge området, nedre kant. Landingssidestandard v1.2, L7: «foten
legger env(safe-area-inset-bottom) til sin nedre fyll». Uten det havner
opphavsretten og de fire juridiske lenkene under hjemmestripen på en
telefon uten hjemknapp — lenker som finnes, men ikke kan trykkes. */
padding:36px calc(24px + env(safe-area-inset-right, 0px))
calc(44px + env(safe-area-inset-bottom, 0px))
calc(24px + env(safe-area-inset-left, 0px))}
.bunn .bmerke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:var(--trykk);
color:var(--blekk);margin-bottom:10px}
.bunn .bmerke .hvelvet{width:24px;height:24px;color:var(--blekk);flex:none}
.bunn .bmerke .hvelvet svg{width:100%;height:100%}
.bunn .bmerke b{font-size:var(--t-lg);letter-spacing:-.03em}
.bunn .bsagt{margin:0 0 18px;font-size:var(--t-sm);color:var(--dempet)}
.bunn .blenker{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;
margin-bottom:16px}
.bunn .blenker a{font-size:var(--t-sm);font-weight:600;color:var(--blekk);
text-decoration:none;min-height:var(--trykk);display:inline-flex;align-items:center}
.bunn .blenker a:hover{color:var(--aksent-tekst)}
.bunn .rett{margin:0;font-size:var(--t-xs);color:var(--dempet)}
/* ── 2.5.5 Forbedret: lenker som står ALENE ───────────────────────────
*
* Kriteriet unntar en lenke som står «i en setning». Fire steder i
* produktet så ut som løpende tekst og var det ikke: kontaktadressen i
* bunnlinjen står alene i sin egen `