` nettleserens understrek
* i tillegg. Det spiller ingen rolle før noe som SER ut som en knapp er en
* lenke — og det er den riktige semantikken hver gang knappen fører et sted:
* «Ring og registrer samtale» i ringelista, `#til-kunde` i onboardingen og
* `#prat-hel` på forsida. Alle tre sto med strek under teksten.
*
* Regelen hører HER og ikke i tre sideark. Ringelista hadde alt begynt på sin
* egen `.ark-kort a.knapp`-utgave, og to av de tre andre ville blitt glemt —
* det er nøyaktig mønsteret `topplinje.test.ts` finnes for.
*/
a.knapp { text-decoration: none; }
.knapp.primar {
background: var(--ice);
color: var(--navy); /* ALDRI hvit tekst på is */
font-weight: 700;
border-color: transparent;
}
/*
* Knappen som fjerner noe.
*
* RAMME OG TEKST, ikke fylt rødt. En fylt rød flate er en ALARM — «noe er
* galt» — og det er ikke det som skjer her: brukeren er i ferd med å gjøre noe
* med vilje. Fylt rødt ville dessuten konkurrert med `.pille.feil` og
* `.status.feil`, som faktisk melder feil, om den samme betydningen.
*
* `--bad-text` på teksten og `--bad` på kanten, ikke omvendt: den røde er MÅLT
* til 4,21:1 på tonet rødt og ryker AA. Kanten trenger ikke bestå den grensa,
* teksten må. Samme fordeling som feilmeldingene ellers i huben.
*
* Bruk den bare på trykket som TAR NOE BORT. «Aktiver brukeren» gir tilgang
* tilbake og skal ikke være rød — en farge som brukes på begge, betyr ingenting.
*
* Regelen sto HÅNDSKREVET TO STEDER — `admin.css` og `kundesider.css`, ord for
* ord like — og en tredje kopi var på vei inn i `moter.css` da slett-knappen
* kom 28.08.2026. Det er nøyaktig mønsteret som tok `.ikn`-fargen og
* plassholderfargen: en regel som bor i sidearkene, gjelder de sidene noen
* husket. Nå bor den her, og de to kopiene er fjernet.
*/
.knapp.farlig { color: var(--bad-text); border-color: var(--bad); }
.knapp.farlig:hover { background: var(--navy3); border-color: var(--bad); }
/*
* Ikonet må følge TEKSTEN, ikke paletten.
*
* `.ikn` setter `color: var(--ice)` som standard, og en primærknapp har is som
* BAKGRUNN. Uten denne linja tegnes ikonet i nøyaktig samme farge som flata det
* ligger på, og forsvinner — knappen ser tom ut, og ingenting sier fra.
*
* Regelen var kjent: `.ring .ikn` i ringelista og `.valg .knapp.valgt .ikn` i
* møtene gjør det samme, hver for seg. Den ble skrevet to ganger for hånd og
* glemt to ganger — her og på chat-boblen, der den faktisk slo ut. Derfor
* finnes `vakt_ikonfarge.test.ts`.
*/
.knapp.primar .ikn { color: var(--navy); }
.knapp.primar:hover { background: var(--ice-light); }
.knapp[disabled] {
opacity: .5;
cursor: not-allowed;
/* Med vilje IKKE pointer-events:none. I 1.0 nådde klikket aldri fram til noe
som kunne forklart hvorfor knappen var grå — den bare satt der. */
}
/* ── Skjemafelter ──────────────────────────────────────────────────────── */
/*
* ┌───────────────────────────────────────────────────────────────────────────┐
* │ EN `input`-REGEL UTEN UNNTAK TREFFER OGSÅ AVKRYSSINGSBOKSEN. │
* │ │
* │ Onboardingsiden hadde `input, textarea { width:100%; min-height: │
* │ var(--trykk) }` for seg selv. Riktig for et tekstfelt, ødeleggende for │
* │ en sjekkboks: «Kontrakten er signert» ble en grå firkant på 44 × 44 px │
* │ midt i raden, teksten ble dyttet ut til høyre og brutt over to linjer, │
* │ og de to boksene sto ikke engang på linje med hverandre. Chipsene under │
* │ «Hva vi leverer» sprakk på samme vis — «SMS-oppfølging» sprengte pillen │
* │ sin. Kontraktsiden hadde nøyaktig samme feil gjennom │
* │ `.felt-rutenett input`. Sett på skjermen 21.08.2026; i koden så begge │
* │ reglene helt fornuftige ut. │
* │ │
* │ Derfor står unntaket i VELGEREN, ikke som en overstyring under. En │
* │ overstyring virker bare der noen husker å skrive den; en velger som ikke │
* │ treffer, kan ikke glemmes på neste flate. `vakt_skjema` holder på begge │
* │ deler: at regelen bor her, og at den slipper sjekkboksene forbi. │
* │ │
* │ `:not(a, b)` og ikke `:not(a):not(b)` — med vilje. Listeformen arver │
* │ spesifisiteten til ETT argument, så velgeren blir (0,1,1). Kjedeformen │
* │ ville gitt (0,2,1) og dermed slått en sideregel som `.rett input` uansett │
* │ hvilken rekkefølge stilarkene lastes i. Da flytter man feilen i stedet │
* │ for å fjerne den. │
* └───────────────────────────────────────────────────────────────────────────┘
*/
label {
display: block;
margin-bottom: 4px;
font-size: 14px;
color: var(--silver);
}
input:not([type="checkbox"], [type="radio"]),
textarea,
select {
width: 100%;
min-height: var(--trykk);
padding: 10px 12px;
border-radius: var(--r-btn);
/*
* `--kontroll-kant`, ikke `--border-strong`. Målt 10.09.2026: kanten på et
* skjemafelt var 1,23:1 mot kortet det ligger i, mot kravet 3:1 i WCAG
* 1.4.11 for grensa rundt en kontroll. Et TOMT felt var dermed nesten
* usynlig — man så en tekst og en flate, ikke noe å skrive i. Utendørs på
* en telefon er det forskjellen på å finne feltet og ikke. Begrunnelsen for
* tallet står i tema.css.
*/
border: 1px solid var(--kontroll-kant);
background: var(--navy);
color: var(--offwhite);
font: inherit;
/* 16px: alt under dette får iOS til å zoome inn når feltet får fokus. */
font-size: 16px;
}
/*
* ┌───────────────────────────────────────────────────────────────────────────┐
* │ KALENDERIKONET ER DEN ENESTE VEIEN INN I VELGEREN — OG DET VAR 15 PX. │
* │ │
* │ Resten av et `date`- eller `datetime-local`-felt skriver man i, ett │
* │ siffer om gangen i DD/MM/ÅÅÅÅ. Vil man ha kalenderen, er ikonet til │
* │ høyre det eneste målet — og nettleseren tegner det 15 × 15 px. Målt i │
* │ Chrome 10.09.2026 på «Utsett» i møtekortet: 11,5 × 13,5 px. Kravet er │
* │ 44, og dette er den kontrollen på hele flata som er vanskeligst å treffe. │
* │ │
* │ Flata blir 44 px av padding, og de negative margene tar paddingen ut │
* │ igjen av oppsettet — så ikonet står nøyaktig der det sto, mens flata │
* │ rundt det er fire ganger så stor. Ingen ny form, ingen ny farge. │
* │ │
* │ På iOS gjør Safari dette selv: hele feltet åpner hjulet, og velgeren │
* │ finnes ikke som eget element. Regelen er derfor for Chrome, Android og │
* │ skrivebordet — der den ER problemet. │
* └───────────────────────────────────────────────────────────────────────────┘
*/
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
/*
* `var(--trykk)` er HELE boksen, ikke ikonet. `* { box-sizing: border-box }`
* står øverst i fila, så paddingen spises innenfra: 44 px boks minus 2 × 12
* px padding gir et 20 px ikon midt i en 44 px flate. Skrev man i stedet
* `width: 20px; padding: 12px`, ville border-box klemt ikonet til NULL —
* og vakta som fanget nettopp det, hadde rett.
*
* De negative margene tar mesteparten av veksten ut igjen av oppsettet, så
* ikonet står omtrent der det sto. Feltet har 10 px egen padding og tåler
* resten.
*/
width: var(--trykk); height: var(--trykk);
padding: 12px;
margin-block: -12px;
margin-right: -6px;
cursor: pointer;
}
/* Høyden kommer fra `rows`, ikke herfra. Et skrivefelt på én linje og et
referatfelt på åtte skal ikke tvinges til samme mål. */
textarea { resize: vertical; line-height: 1.5; }
/*
* Hjelpeteksten skal LESES som en hjelpetekst.
*
* Uten denne arver plassholderen nettleserens egen grå, som på kald navy er
* nesten umulig å skille fra ekte skrevet tekst — og et felt som ser utfylt ut
* uten å være det, sendes tomt. Regelen fantes ETT sted i hele hub2,
* `.sok-rad input::placeholder` i ringelista, og gjaldt dermed ett av rundt
* seksti felter.
*/
::placeholder { color: var(--muted); opacity: 1; }
/*
* Et søkefelt er rundt. Et utfyllingsfelt er det ikke.
*
* Formen skiller «skriv for å lete» fra «skriv for å lagre», og den hører til
* feltets TYPE, ikke til siden det står på. Sto som `.sok-rad input` i
* ringelista — riktig utseende, feil sted: neste søkefelt et annet sted ville
* blitt firkantet, og forskjellen ville ingen kunnet begrunne.
*/
input[type="search"] { border-radius: var(--r-pill); }
/*
* Ruta er 18 px. TRYKKFLATA er `label.avkryss` under — 44 px høy, og hele
* raden er klikkbar fordi etiketten omslutter både ruta og teksten. Ei rute på
* 44 px er ikke en trykkflate, det er nettopp feilen vi kom fra.
*/
input[type="checkbox"],
input[type="radio"] {
/*
* TEGNET SELV, ikke nettleserens egen.
*
* `accent-color` farger bare HAKEN. Den tomme ruta ble stående som Chromes
* nøytralgrå firkant — som på kald navy leses som en deaktivert kontroll, og
* ikke som noe man skal trykke på. Med 27 løypepunkter under hverandre er
* det 27 grå firkanter, og flata ser uferdig ut.
*
* Flata er `--navy`, haken `--navy` på `--ice` — samme par som primærknappen
* bruker, og samme grunn (ALDRI hvit tekst på is). Radius er `--r-sm` for
* avkryssing og full sirkel for radio.
*
* RAMMA er `--kontroll-kant`, ikke `--border-strong` som resten av feltene.
* Her sto det at «ingen nye verdier» var en dyd — og det var feil dyd:
* målt 10.09.2026 var den tomme ruta 1,23:1 mot kortflata, mot kravet 3:1
* for en kontrollgrense. En kortkant skal så vidt anes; en rute man skal
* treffe med tommelen skal ses. Begrunnelsen for tallet står i tema.css.
*
* `appearance: none` slår av nettleserens egen tegning. Da forsvinner OGSÅ
* haken, så den må tegnes — her som to kanter rotert 45 grader, ikke som et
* ikon: ikonsettet er strekikoner i `currentColor`, og en hake inni en
* 18 px rute er en form, ikke et ikon.
*/
appearance: none;
-webkit-appearance: none;
width: 18px; height: 18px;
margin: 0;
flex: none; /* i en flex-rad presses den ellers til en strek */
position: relative;
border: 1.5px solid var(--kontroll-kant);
border-radius: var(--r-rute);
background: var(--navy);
transition: background-color .12s ease, border-color .12s ease;
cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--border-hover); }
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--ice);
border-color: var(--ice);
}
/* Haken: to kanter i hjørnet, rotert. Navy på is — aldri hvit på is. */
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px; top: 1px;
width: 4px; height: 9px;
border: solid var(--navy);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
input[type="radio"]:checked::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--navy);
}
/* En deaktivert rute skal se deaktivert ut, ikke bare føles det. */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
/*
* Feltet som IKKE skal ha en boks, fordi flata rundt det alt har en.
*
* Søkefeltet i topplinja er den ene i dag: `.topp-sok` har kant, bakgrunn og
* 14 px luft, og lupa står til venstre for feltet. Uten dette får den boks
* inni boks — 12 px ekstra innrykk som skyver skrivemerket vekk fra lupa, og
* en ramme rundt en ramme. Modifikatoren hører HER og ikke i et sideark, fordi
* det er base.css som maler hvert eneste felt; den som maler, må også kunne
* la være.
*
* ELEMENTNAVNET MÅ STÅ I VELGEREN. `.felt-naken` alene er (0,1,0) og taper mot
* feltregelen over, som er (0,1,1) — klassen så helt riktig ut i koden og
* gjorde ingenting på skjermen. Sett i den gamle ⌘K-ruta 21.08.2026: boks inni
* boks, akkurat den feilen klassen finnes for å hindre.
*/
input.felt-naken, textarea.felt-naken, select.felt-naken {
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.avkryss {
/*
* `flex-start`, ikke `center`.
*
* Med `center` sto den 18 px høye ruta LODDRETT MIDT i raden. Så lenge
* etiketten er én linje er det riktig — men «Databehandleravtalen er
* signert» brekker til to linjer på 320 px, og da havnet ruta i luftgapet
* MELLOM linjene og så ut til å høre til ingen av dem.
*
* `padding` på 11 px holder trykkflata over 44 px uten at `min-height`
* binder: 11 + 23 (én tekstlinje) + 11 = 45. Ruta står da i flukt med
* første linje uansett hvor mange linjer etiketten har.
*/
display: flex; align-items: flex-start; gap: 9px;
min-height: var(--trykk);
padding: 11px 0;
margin: 0;
color: var(--offwhite);
font-size: 15px;
cursor: pointer;
}
/*
* MÅ dekke `select` og `textarea` også, ikke bare `input`.
*
* Feilmeldingene sier «se hva som er merket rødt i skjemaet». Sto regelen bare
* på `input`, ble rollefeltet i admin merket i koden uten å bli rødt på
* skjermen — og da peker meldinga på noe som ikke finnes. Sett i nettleseren
* 18.08.2026.
*/
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--bad); }
/* Et sperret felt skal SE sperret ut. Dempet TEKST, ikke dempet felt:
`opacity` tar kanten med seg, og da ser feltet ut som om det mangler. */
input:disabled, textarea:disabled, select:disabled {
color: var(--muted);
cursor: not-allowed;
}
/* ── Piller ────────────────────────────────────────────────────────────── */
.pille {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-size: 13px; font-weight: 500;
background: var(--fill-subtle);
border: 1px solid var(--border);
color: var(--silver);
/*
* `nowrap` er riktig for det en pille ER — «Signert», «2 av 2», «Ikke ringt».
* Men klassen brukes også på tekst som ikke er en pille: kundekortet legger
* hele varselsetningen «Står som signert, men uten dato — bindingen kan ikke
* regnes» (58 tegn, målt ~394 px) i en, og admin legger et brukernavn på
* inntil 32 tegn i en. Uten et tak dytter da HELE SIDA sidelengs: målt 42 px
* vannrett overflyt på 320 px 10.09.2026.
*
* Taket er en sikring, ikke en løsning: en pille som blir avkuttet er et
* tegn på at teksten aldri skulle vært en pille. Men en avkuttet pille er
* langt bedre enn en side som ruller sidelengs, og den er synlig — så feilen
* blir funnet i stedet for å bli tilvent.
*/
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.pille.is { background: var(--ice-bg); color: var(--ice); border-color: transparent; }
.pille.ok { background: var(--green-svak); color: var(--green); border-color: transparent; }
.pille.varsel{ background: var(--warn-svak); color: var(--warn); border-color: transparent; }
.pille.feil { background: var(--bad-svak); color: var(--bad-text); border-color: transparent; }
/* ── Statuslinje ───────────────────────────────────────────────────────── */
/*
* ┌───────────────────────────────────────────────────────────────────────────┐
* │ EN TOM KVITTERINGSLINJE SKAL TA NULL PLASS. │
* │ │
* │ `.status` brukes som `` over hele huben — «Lagret», «Fikk ikke │
* │ kontakt», og oftest ingenting. Regelen satte bare farge og størrelse, så │
* │ elementet bar nettleserens egen `margin: 1em 0` = 32 px, OGSÅ når det var │
* │ tomt. Målt 10.09.2026: admin har seks slike og kastet bort 84 px i │
* │ panelet; kundekortets topp ble 142,5 px høyt for et navn, en undertittel │
* │ og tre piller. │
* │ │
* │ `margin: 0` og en `gap` fra forelderen i stedet: da bestemmer den som │
* │ eier layouten avstanden, og en tom linje koster ingenting. `:empty` │
* │ tar den helt ut av flyten — i et rutenett teller et tomt barn fortsatt │
* │ som en rad, og to gap rundt ingenting er to gap for mye. │
* └───────────────────────────────────────────────────────────────────────────┘
*/
/*
* `overflow-wrap: anywhere` fordi en feilmelding ikke alltid er pen norsk
* prosa. `server/fiken.ts` sender inntil 200 tegn RÅ serverkropp inn i `hva`
* («Fiken svarte noe som ikke er JSON: …»), og en URL eller en JSON-bit uten
* mellomrom sprenger containeren sin og skyver hele sida sidelengs.
*/
.status { margin: 0; font-size: 14px; color: var(--silver); overflow-wrap: anywhere; }
.status:empty { display: none; }
.status.feil { color: var(--bad-text); }
/* ── Bolken man lander i fra et forsidevarsel ──────────────────────────── */
/*
* Tegnes av `felles/avvik.js` på fire skjermer — ringelista, kunder, møter og
* økonomi. Stilen hører HER og ikke i fire stilark, av samme grunn som koden
* bor i én fil: fire kopier blir uenige, og den ene som ble glemt ser ut som
* en halvferdig side.
*
* Bolken legges OPPÅ skjermens egen liste. Den skiller seg fra kortene rundt
* med en is-kant til venstre — samme språk som forsidevarselet man kom fra,
* uten å bruke rødt: her er man alt framme, og da haster ingenting mer.
*/
.avvikbolk {
/*
* Ingen bunnmarg. Bolken er direkte barn av `.wrap`, som er `display: grid`
* med `gap: var(--stabel)` — og marger kollapser ikke i grid. 20 px marg
* oppå 16 px gap ga 36 px under nettopp den bolken man kom for å se, og
* ingen andre steder på sida.
*/
margin: 0;
padding: 14px 16px;
background: var(--navy2);
border: 1px solid var(--border);
border-left: 3px solid var(--ice);
border-radius: var(--r-md);
}
.avvikbolk-tittel {
margin: 0 0 4px;
font-family: var(--font-display); font-weight: 600;
font-size: 15px; color: var(--offwhite);
}
.avvikrader { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.avvikrad {
width: 100%;
min-height: var(--trykk);
display: flex; align-items: center; gap: 12px;
padding: 9px 12px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--fill-subtle);
color: var(--offwhite);
font: inherit; text-align: left;
cursor: pointer;
touch-action: manipulation;
}
.avvikrad:hover, .avvikrad:active { background: var(--navy3); border-color: var(--border-hover); }
.avvikrad .ikn { margin-left: auto; width: 15px; height: 15px; }
.avvikrad-midt { display: grid; gap: 2px; min-width: 0; }
.avvikrad-navn { font-weight: 600; font-size: 15px; }
.avvikrad-hva { font-size: 13px; color: var(--silver); line-height: 1.4; }
/* ── Tomme lister ──────────────────────────────────────────────────────── */
/* En tom liste skal se ut som en tom liste, aldri som en feil. */
.tomt {
padding: 28px 20px;
text-align: center;
color: var(--silver);
font-size: 15px;
/*
* Midtstilt er riktig for ÉN linje og feil for fire: da har hver linje sin
* egen venstrekant, og øyet mister starten på neste. Flere av tomtekstene i
* huben er to til fire linjer på 390 px («Ingen sider lagt inn. Legger du inn
* nettsida og kontrollpanelet her, måles de hver time.»). Taket på 38 tegn
* holder linjene korte nok til at midtstillingen fortsatt leses.
*/
max-width: 38ch;
margin-inline: auto;
/* Samme grunn som på `.status`: flere flater skriver en feilmelding hit når
lista ikke kunne hentes, og en rå serverstreng har ingen mellomrom. */
overflow-wrap: anywhere;
}
/*
* ┌───────────────────────────────────────────────────────────────────────────┐
* │ TOMHETEN SOM ER HELE SVARET, SKAL SE UT SOM ET SVAR. │
* │ │
* │ `.tomt` alene er en løs setning midtstilt i luft. Det er riktig når den │
* │ står under en liste som ellers har innhold — panel.css skriver ned │
* │ hvorfor. Det er feil når den ER skjermen: målt på moter-320.png │
* │ 10.09.2026 lå «Ingen møter er avtalt ennå.» midt i ~180 px tomt felt, │
* │ uten ramme, uten ikon og uten noe å gjøre. Tre slike under hverandre på │
* │ samme side, og flata ser ut som den ikke er ferdig lastet. │
* │ │
* │ `.figur` gir den en form: strekikon, setningen, og — når det finnes noe │
* │ fornuftig å gjøre — ÉN knapp. Stiplet ramme og ikke fylt kort: en stiplet │
* │ ramme sier «her er det plass til noe», en fylt flate sier «her ER noe». │
* │ Forsida hadde sin egen utgave av nettopp denne formen, `.rolig` — den er │
* │ avviklet 11.09.2026, og `#avvik-rolig` bruker denne. │
* │ │
* │ Den er en VARIANT og ikke den nye standarden, med vilje. Tjueni steder │
* │ bruker `.tomt`, og de fleste av dem står under en liste der en ramme til │
* │ ville vært boks inni boks. │
* └───────────────────────────────────────────────────────────────────────────┘
*/
.tomt.figur {
display: grid; justify-items: center; gap: var(--rom-2);
/*
* `margin: 0` alene slo ut `margin-inline: auto` fra `.tomt` over, og da sto
* den stiplede ramma VENSTRESTILT og ~13 px smalere enn kortet den ligger i
* — målt på `#ingen` i kundelista, 390 px: boksen sluttet på 363 der
* knappene over slutter på 374. Figuren skal fylle kortet sitt; det er
* SETNINGEN inni som har lesebredde, ikke ramma.
*/
margin: 0 auto;
max-width: none;
padding: var(--rom-5) var(--rom-4);
border: 1px dashed var(--border-strong);
border-radius: var(--r-md);
font-size: 14.5px; line-height: 1.45;
}
.tomt.figur .ikn { width: 22px; height: 22px; color: var(--muted); }
/* Setningen skal kunne stå på to linjer uten å bli bredere enn den er lesbar. */
.tomt.figur .tomt-tekst { max-width: 34ch; }
.tomt.figur .knapp { margin-top: var(--rom-1); }
/*
* ┌───────────────────────────────────────────────────────────────────────────┐
* │ EN TOM LISTE INNE I ET KORT ER IKKE HELE SKJERMENS SVAR. │
* │ │
* │ `.tomt` er 28 px luft over og under, midtstilt. Det er riktig når │
* │ tomheten ER sida. Står den derimot i et kort som allerede har en │
* │ venstrestilt overskrift og sitt eget krom, blir «Ingen åpne innlogginger» │
* │ en 80 px høy midtstilt blokk under en 22 px venstrestilt tittel — og et │
* │ tomt kort blir like høyt som et fullt. Målt 10.09.2026 av tre agenter │
* │ uavhengig av hverandre, på admin, økonomi og panelet. │
* │ │
* │ `:not(:only-child)` er hele skillet, og det er en ren avlesning av │
* │ virkeligheten: er setningen kortets ENESTE barn, er kortet tomt og │
* │ teksten er svaret. Har kortet en overskrift eller en liste ved siden av, │
* │ er setningen en fotnote til noe annet. │
* │ │
* │ `panel.css` har hatt sin egen utgave av dette siden 23.08.2026, scopet │
* │ til `.brett .liste + .tomt`. Den blir stående — den er SNEVRERE enn │
* │ denne, og treffer et tilfelle denne ikke gjør (tom liste, ikke tomt kort).│
* └───────────────────────────────────────────────────────────────────────────┘
*/
/*
* En FEILMELDING i `.tomt` er ikke en tom tilstand.
*
* Flere flater skriver `${f.hva} ${f.hva_na}` inn i det samme elementet når
* lista ikke kunne hentes. Da er teksten to setninger, ikke tre ord, og både
* midtstillingen og lesebredden på 38 tegn er feil form for den. `.feil`
* finnes fra før i admin.css og gir den ramme og rød tekst; her får den
* bredden tilbake.
*/
.tomt.feil { max-width: none; margin-inline: 0; text-align: left; }
.kort > .tomt:not(.figur):not(:only-child),
.brett > .tomt:not(.figur):not(:only-child) {
padding: var(--rom-3) 0 var(--rom-1);
margin-inline: 0;
max-width: none;
text-align: left;
font-size: 14px;
}
/* ── Lastetilstand ─────────────────────────────────────────────────────────
* ┌───────────────────────────────────────────────────────────────────────────┐
* │ FØRSTE TEGNING VAR OVERSKRIFTER UTEN KROPP. │
* │ │
* │ Elleve flater henter ved sidelast, og ingen av dem sa fra at de holdt på. │
* │ Fram til svaret landet sto sida med sine overskrifter og INGENTING under │
* │ — og så vokste den i ett hopp. Målt på panelet 10.09.2026: fra ti tomme │
* │ brett til 4 521 px i ett sprang. På 4G er det et par sekunder der flata │
* │ ser ut som den er tom, ikke som den laster. │
* │ │
* │ Et skjelett løser TO ting på én gang: det sier at noe er på vei, og det │
* │ RESERVERER høyden, så innholdet ikke dytter noe nedover når det kommer. │
* │ Det andre er det viktigste — en side som hopper mens man sikter på en │
* │ knapp, er verre enn en som er treg. │
* │ │
* │ Formen er en flate i `--fill-subtle`, ikke et glimt som løper over. Et │
* │ løpende glimt er en gradient, og PALETT.md sier ingen gradient-fyll og │
* │ ingen glød. Pulsen er `opacity` alene — den eneste egenskapen som ikke │
* │ koster en ny layout — og den står stille for den som har bedt om mindre │
* │ bevegelse. │
* └───────────────────────────────────────────────────────────────────────────┘ */
.skjelett {
display: block;
border-radius: var(--r-sm);
background: var(--fill-subtle);
/* Et skjelett er ikke tekst: det skal ikke kunne merkes med fingeren. */
user-select: none;
animation: skjelett 1.2s ease-in-out infinite;
}
/*
* ┌───────────────────────────────────────────────────────────────────────────┐
* │ VARIANTENE ER PREFIKSET — FORDI `tall` OG `rad` ALT ER TATT. │
* │ │
* │ Variantene sto som `.skjelett.tall` og `.skjelett.rad`. Begge ordene er │
* │ vanlige klassenavn som ALT finnes i huben: `.tall` er et rutenett med tre │
* │ kolonner i ringelista og et auto-fit-rutenett i panelet, og `.rad` er en │
* │ køerad i ringelista. Et skjelett skrevet som `class="skjelett tall"` inne │
* │ i panelet arvet dermed panelets eget rutenett, og plassholderen fikk en │
* │ form ingen hadde bestemt. Meldt av en agent 11.09.2026 før det rakk å bli │
* │ en feil noen måtte lete etter. │
* │ │
* │ `sk-` er derfor prefikset, og `.skjelett` blir stående som KROKEN: rundt │
* │ førti regler i sidearkene henger på den (`.moter li.skjelett`, │
* │ `.brukere li.skjelett`, `.rader li.skjelett` …) for å nulle kortdrakta og │
* │ sette en høyde som er MÅLT mot det ekte innholdet. Prefikset løser │
* │ kollisjonen uten å rive opp det laget. hub.css brukte alt `sk-hei` og │
* │ `sk-dagslinje` — konvensjonen fantes, den var bare ikke tatt i bruk her. │
* └───────────────────────────────────────────────────────────────────────────┘
*/
.skjelett.sk-linje { height: 1em; }
.skjelett.sk-tall { height: 28px; width: 4.5ch; }
.skjelett.sk-rad { height: var(--trykk); border-radius: var(--r-md); }
@keyframes skjelett { 50% { opacity: .45; } }
/*
* Den som har bedt om mindre bevegelse, får en stille flate. Ikke usynlig —
* da hadde skjelettet sluttet å si at noe er på vei.
*/
@media (prefers-reduced-motion: reduce) {
.skjelett { animation: none; opacity: .7; }
}
/* Markøren sier det samme som skjelettet, for den som bruker mus. */
[aria-busy="true"] { cursor: progress; }
/* ── Ting du må gjøre ──────────────────────────────────────────────────────
┌───────────────────────────────────────────────────────────────────────────┐
│ DEN ENESTE RUTA I HUBEN UTEN LUKKEKNAPP. │
│ │
│ Formen bor her og ikke i tolv sideark, av samme grunn som topplinja: │
│ tegnes den av `felles/krav.js` på hver eneste flate, kan den ikke ha │
│ tolv utgaver. Den skal se ut som at den alltid har hørt hjemme — samme │
│ radius, samme flate, samme skygge og samme knappehierarki som `.kort` og │
│ resten av huben. │
│ │
│ ALVORET LIGGER I VENSTREKANTEN, ikke i tekstfargen — nøyaktig som │
│ `.varsler div` på kundekortet og `.avvikbolk` over. Gul, ikke rød: dette │
│ er noe som skal fylles ut, ikke noe som har gått galt. │
│ │
│ Ingen glød, ingen gradient, ingen frostet flate. `.krav` er solid │
│ `--navy2` og skiller seg fra sida med `--scrim` bak seg, som alle andre │
│ overlegg her. │
└───────────────────────────────────────────────────────────────────────────┘ */
.krav {
width: min(560px, calc(100vw - 24px));
/*
* Tastaturet trekkes fra høyden, og hakket med.
*
* Et modalt `