/* busicheck — designsystem (S0) Delt av alle kundeflater: index.html, landing.html, priser.html, kjopsvindu.html. Serveres av GET /theme.css (api.py). Ingen build-kjede, ingen npm. Tema: lys og mørk i ÉN deklarasjon per token via light-dark(). - Default følger OS-innstillingen (color-scheme: light dark på :root). - overstyrer, og vinner begge veier. ponytail: light-dark() krever moderne nettleser (baseline 2024). Ingen fallback-blokk — faller det ut på en gammel nettleser er oppgraderingsveien én @supports-blokk med lys-verdiene. Farger endres KUN her. Komponenter refererer roller, aldri hex. Graf-paletten er den validerte kategoriske 8-slot-paletten fra dataviz-standarden, kjørt mot BUSICHECKS egne flater (lys #ffffff / mørk #1e293b) 2026-07-27. Alle harde porter passerte: lyshetsbånd, kroma-gulv, fargeblind-separasjon (verst tilstøtende ΔE 9.1 lys / 8.4 mørk, krav ≥8) og normalsyn-gulv (19.6 / 19.3, krav ≥15). Rekkefølgen er selve sikkerhetsmekanismen — ikke omorganiser slots uten å validere på nytt. Kjent og akseptert: chart-3/4/5 (lys) og chart-6 (mørk) ligger under 3:1 mot flaten. Avlastningen er at hver fler-serie-graf har legend/direkte etiketter, så farge aldri er eneste identitetsbærer. Grafer med ÉN serie bruker chart-1, som klarer 3:1. */ /* Selv-hostede fonter (redesign S1). Samme filer og samme subsett som soilandintel.no — ingen forespørsel til Google ved sidevisning. Familjen Grotesk var den som manglet. Absolutte stier: /theme.css deles av sider på /, /rapport/{div} og /anbud, og en relativ sti ville løst seg mot SIDEN, ikke mot stilarket. */ @font-face { font-family:'Familjen Grotesk'; font-style:normal; font-weight:500 700; font-display:swap; src:url(/fonts/FamiljenGrotesk-latin-912ffe.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Familjen Grotesk'; font-style:normal; font-weight:500 700; font-display:swap; src:url(/fonts/FamiljenGrotesk-latin-ext-cf17c4.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/Inter-latin-6ab57b.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/Inter-latin-ext-b6db4a.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/IBMPlexMono-latin-e2661b.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/IBMPlexMono-latin-ext-1969f6.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/IBMPlexMono-latin-0bc96c.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/IBMPlexMono-latin-ext-93cfae.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --- redesign S1: verdiene kommer fra handoff-pakkens tokens.css -------------------------- NAVNENE er de gamle, med vilje: ingen call site i index.html/priser.html/… er rørt. Fire jobber, én farge hver — grønn = handling/merkevare, rav = tid som renner ut, stålblå = data, rød = alvor. Derfor er --accent nå et FYLL (grønn) og ikke lenger lenkefargen; lenker leser --link. Bytt aldri en av dem tilbake uten den andre. rgba-verdiene i tokens.css er slått ned til hex her: kontrast-testen leser fila og krever light-dark(#hex, #hex) per token, og en alpha-verdi ville falt stille ut. */ :root { color-scheme: light dark; /* --- flater --- */ --bg: light-dark(#f4f6f9, #0e1420); /* sidebakgrunn (tokens: --bg) */ --surface: light-dark(#ffffff, #191d24); /* kort, panel (--bg-raised) */ --surface-2: light-dark(#eef1f6, #12161e); /* innfelt: readout, ai-out, søkefelt (--bg-sunken) */ /* Hover finnes ikke i tokens.css. Lyst tar sidebakgrunnen (raden senkes ett hakk mot flaten den ligger på), mørkt tar --bg-raised-2 (raden løftes). En mørkere lys-hover ble målt og forkastet: #e4e8ee tvang --muted ned til #5b6777 for å holde 4.5:1, altså en større avvik fra tokens.css enn hoveren var verdt. */ --surface-3: light-dark(#f4f6f9, #1e232c); --line: light-dark(#e2e6ec, #2a2f38); /* hårfin skillelinje (dekor) */ /* --line-strong bærer kanten på skjemafelt og ghost-knapper. WCAG 1.4.11 krever 3:1 for kanten som identifiserer en kontroll. tokens.css sin rgba(14,20,32,.20) lander på 1.5:1 mot hvitt — for svakt for en kontroll — så denne beholder S0-verdien med vilje. */ --line-strong: light-dark(#828c9e, #6b7f99); --scrim: light-dark(rgba(16,24,40,.45), rgba(0,0,0,.6)); /* bak modal */ --bg-inverse: light-dark(#0e1420, #0e1420); /* grafitt: innlogging, oppsalg, desktop-toppnav */ /* Tekst PÅ grafitt. Fast i begge temaer fordi flaten er fast — en «lys» variant her ville gjort teksten usynlig. Brukes av valgte chips (--chip-bg-on i handoff-pakken). */ --on-inverse: light-dark(#eaf0f8, #eaf0f8); /* --- tekst --- */ --txt: light-dark(#0e1420, #eaf0f8); /* --ink / --ink-on-dark */ --txt-2: light-dark(#4c586b, #c4cddb); /* ⚠️ tokens.css sier #6b7789, og den klarer 4.5:1 mot HVITT (4.54) — men ikke mot noen av de andre lyse flatene (--bg gir 4.36). Én tone mørkere holder overalt. README-ens påstand om at tekstvariantene «er mørknet for å klare 4.5:1 mot hvitt» er nettopp det: mot hvitt. */ --muted: light-dark(#626d7c, #97a3b6); /* --- interaktivt --- --accent er FYLLET (primærknapp, aktiv indikator). Tekst PÅ fyllet er --on-accent (#06231a, ikke hvitt — hvitt på #35c46f klarer ikke 4.5:1). --accent-text er grønn som TEKST/IKON på lys flate. Ikke bland dem. */ --accent: light-dark(#35c46f, #35c46f); --accent-hover: light-dark(#24a055, #5cd48c); --on-accent: light-dark(#06231a, #06231a); --accent-text: light-dark(#0b6b3c, #35c46f); --accent-wash: light-dark(#e3f7eb, #1d342f); --focus: light-dark(#2f6fd0, #6ea8fe); /* --- data: stålblå. Lenker og selskapsnavn, aldri handling. --- ⚠️ tokens.css sier #2f6fd0. Den klarer 4.5:1 mot hvitt (4.88) og så vidt mot --bg (4.50), men faller til 4.31 mot --surface-2 — og selskapsnavn står i readouts og kort-innfellinger. #2a66c2 er samme farge ett hakk ned og holder 4.5:1 mot ALLE lyse flater. Samme verdi som --info, så «data er blå» blir én farge og ikke to nesten like. */ --link: light-dark(#2a66c2, #6ea8fe); --link-hover: light-dark(#255aa8, #9cc4ff); /* --- betydning (farge brukes ALDRI dekorativt) --- */ --pos: light-dark(#0b6b3c, #35c46f); --pos-bg: light-dark(#e3f7eb, #12331f); --neg: light-dark(#b42318, #f0736a); --neg-bg: light-dark(#fdeceb, #3a1614); --warn: light-dark(#8a4f00, #f5a524); /* rav som TEKST */ --warn-bg: light-dark(#fdf0dc, #3a2c12); --warn-fill: light-dark(#f5a524, #f5a524); /* rav som FYLL: frist-stolpe, hastekant */ --info: light-dark(#2a66c2, #6ea8fe); --info-bg: light-dark(#eaf0fa, #1b2740); --neutral: light-dark(#4c586b, #c4cddb); --neutral-bg: light-dark(#eef1f6, #2a3140); /* Rammen rundt «haster mest»-kortet på forsiden — DEN ENESTE ravrammen i appen (README «Kort»). tokens.css har den som rgba(245,165,36,.55); her er den flatet mot kortflaten i hvert tema, fordi kontrast-testen krever light-dark(#hex, #hex) og en alpha-verdi ville falt stille ut. */ --warn-border: light-dark(#facd87, #926824); --skeleton: light-dark(#e4e8ee, #232833); --skeleton-2: light-dark(#eef1f5, #1c212a); /* --- grafer: validert kategorisk palett, fast rekkefølge (aldri syklet) --- */ --chart-1: light-dark(#2a78d6, #3987e5); --chart-2: light-dark(#eb6834, #d95926); --chart-3: light-dark(#1baf7a, #199e70); --chart-4: light-dark(#eda100, #c98500); --chart-5: light-dark(#e87ba4, #d55181); --chart-6: light-dark(#008300, #008300); --chart-7: light-dark(#4a3aa7, #9085e9); --chart-8: light-dark(#e34948, #e66767); --chart-grid: light-dark(#e9edf3, #2b3a52); --chart-ink: var(--muted); /* --- form --- */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 18px; --r-pill: 999px; /* Skygge KUN der noe faktisk svever: ark, og det ene «haster mest»-kortet. */ --shadow-card: 0 1px 2px rgba(14, 20, 32, .04); /* Luft — 4px-skala fra tokens.css. Bruk disse, ikke frie tall. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-11: 44px; --hit: 44px; /* minste berøringsflate */ /* Typografi. Mono-regelen er bærende: ALT registeret sier (org.nr, beløp, datoer, prosent, ansatte) settes i mono, alt appen sier settes i Inter. Et beløp i Inter ser ut som markedsføring. --font beholdes som navn fordi body og alt annet leser den. */ --font-display: "Familjen Grotesk", system-ui, sans-serif; --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --font: var(--font-ui); } :root[data-theme="lys"] { color-scheme: light; } :root[data-theme="mork"] { color-scheme: dark; } /* ---------- basis ---------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--txt); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; } /* Lenker og selskapsnavn er DATA, ikke handling → --link (stålblå), ikke --accent (grønt fyll). En grønn lenke ved siden av en grønn knapp gjør at ingen av dem betyr noe. */ a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } /* Display-fonten bærer overskrifter og selskapsnavn; negativ letter spacing er en del av uttrykket, ikke pynt. Brødtekst og knapper blir stående i Inter (--font). */ h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.018em; } h1 { letter-spacing: -.03em; } /* Synlig fokus overalt — tastaturbrukere skal aldri gjette hvor de er. :is() og ikke :where(): :where() gir spesifisitet 0, og da kan en hvilken som helst senere `.noe:focus { outline:none }` slå ut fokusringen uten at noen merker det. */ :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } /* Logoen er hvit på gjennomsiktig — usynlig på lys flate. Den er monokrom, så en invertering er nok; ingen egen fil å holde i synk. light-dark() gjelder kun farger, derfor to regler her: OS-lys (med mindre bryteren sier mørkt) + bryter satt til lys. */ @media (prefers-color-scheme: light) { :root:not([data-theme="mork"]) .logo { filter: invert(1); } } :root[data-theme="lys"] .logo { filter: invert(1); } /* ---------- skjema ---------- */ select, input, textarea { background: var(--surface); color: var(--txt); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 6px 8px; font: inherit; } select:hover, input:hover, textarea:hover { border-color: var(--accent); } /* Én fylt knapp per flate; alt annet er ghost. */ /* Kanten er ikke pynt: merkevaregrønnen #35c46f lander på 2.26:1 mot hvitt, så FYLLET kan ikke bære WCAG 1.4.11 (3:1 for grensen som identifiserer en kontroll). --accent-hover gjør det (3.2:1). test_theme_contrast måler nettopp dette paret — fjerner du kanten, fjern paret. */ button { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent-hover); border-radius: var(--r-lg); padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; } /* :not(...) holder hover-fyllet unna knapper som har egen bakgrunn og bare ÉN klasse — uten dette vinner `button:hover` (0,1,1) over f.eks. `.tab-btn` (0,1,0) og fyller hovednavigasjonen med accent-blå under muted tekst. */ button:not(.ghost, .filterreset, .tab-btn, .modal-x, .mini, .lrad, .chip-valg):hover { background: var(--accent-hover); } button:disabled { opacity: .5; cursor: default; } button:disabled:hover { background: var(--accent); } button.ghost, a.btnlink { background: transparent; color: var(--accent-text); /* grønn som TEKST, ikke fyllgrønnen */ border: 1px solid var(--line-strong); } button.ghost:hover, a.btnlink:hover { background: var(--surface-3); text-decoration: none; } a.btnlink { display: inline-block; border-radius: var(--r-sm); padding: 8px 12px; font-weight: 600; font-size: 13px; } button.mini { padding: 2px 7px; font-size: 11px; font-weight: 600; margin-left: 6px; } /* ---------- flater ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .card h2 { font-size: 13px; margin: 0 0 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* ---------- tabell ---------- */ /* Hårfine radlinjer, ingen zebra. Tall høyrestilt med tabular-nums så sifrene ligger i kolonne og kan leses som størrelse. */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--surface); white-space: nowrap; } tbody tr:hover { background: var(--surface-3); } /* Mono-regelen: talkolonner er registerdata og settes i mono. Skiller det registeret sier fra det appen sier — og gir sifrene samme bredde uten å be om tabular-nums to steder. */ td.num, th.num { text-align: right; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } th.num { font-size: 12px; } /* Tekstkolonner får brekke/forkortes — ikke nowrap på alt. */ .trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- betydningsbærende småting ---------- */ .pos { color: var(--pos); } .neg { color: var(--neg); } .muted { color: var(--muted); } .pill { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; } .pill.ja { background: var(--pos-bg); color: var(--pos); } .pill.trolig { background: var(--warn-bg); color: var(--warn); } .pill.svak, .pill.nei { background: var(--neg-bg); color: var(--neg); } .pill.ukjent { background: var(--neutral-bg); color: var(--neutral); } .chip { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); font-size: 12px; background: var(--info-bg); color: var(--info); margin: 2px 4px 2px 0; } /* --txt-2, ikke --muted: muted mot --info-bg lander på 4.49:1 i mørkt tema — så vidt under AA. */ .chip small { color: var(--txt-2); } /* Aktivt filter er alltid synlig og alltid reverserbart — chip med ×, pluss «nullstill alle». Brukeren skal aldri lure på hvorfor lista er kort. */ .filterchip { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px 4px 2px 9px; margin: 2px; } .filterchip button { background: transparent; border: 0; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1; padding: 0 4px; } .filterchip button:hover { background: transparent; color: var(--txt); } button.filterreset { font-size: 12px; font-weight: 400; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px 10px; margin: 2px; color: var(--muted); } button.filterreset:hover { background: var(--surface-3); color: var(--txt); } /* ---------- laster ---------- */ .skeleton { background: linear-gradient(90deg, var(--skeleton-2) 25%, var(--skeleton) 37%, var(--skeleton-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--r-sm); color: transparent !important; min-height: 14px; display: block; } .skeleton * { visibility: hidden; } .sk-line { height: 13px; margin: 7px 0; } @keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } * { transition-duration: .01ms !important; } } /* ---------- tom tilstand ---------- */ /* Ikon + én linje + én vei videre. En tom tabell er en blindvei; dette er ikke. */ .empty { text-align: center; padding: 20px 16px; color: var(--muted); font-size: 13px; } .empty .ikon { display: block; font-size: 26px; line-height: 1; margin-bottom: 8px; } .empty p { margin: 0; } .empty p + * { margin-top: 12px; } /* ---------- topp-N + «Vis alle» ---------- */ /* Lange lister åpner kuttet: de første radene er svaret, halen er oppslagsverk. Vi skjuler noder framfor å dele markupen i to — da gjelder samme regel for og
, og en
slipper å bo inne i et (ugyldig HTML). */ .kutt > .mer { display: none; } button.vis-alle { margin: 10px 0 0; } /* ---------- sammenleggbart kort ---------- */ /* Sekundært innhold ligger i
og åpner lukket, så en flate kan leses på én skjermhøyde. Samme overskrift-stil som .card h2 — ett utseende, to markup-former. */ details.card > summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } details.card[open] > summary { margin-bottom: 12px; } details.card > summary .antall { text-transform: none; letter-spacing: 0; font-weight: 400; } /* ---------- helsemåler (redesign S1, regel 1) ---------- */ /* Finansiell helse vises som en styrkemåler i tre streker + tekstetiketten Solid/Middels/Svak. ALDRI et tall ved siden av — det er en produktinvariant, ikke et stilvalg: et tall gjør et grovt registerderivat om til noe som ser ut som en kredittscore. ALDRI grønn heller. Grønn er merkevare/handling her, og en grønn prikk ved en grønn knapp leses som merkevare, ikke som data. Solid er derfor ink, middels rav, svak rød. ⚠️ Emoji-merket (🟢🟡🔴⚪) lever videre i UTGÅENDE E-POST (busicheck.rapport_epost, bw_digest). Det er med vilje: inline SVG rendres upålitelig i Gmail/Outlook, og et brev uten merke er verre enn et brev med emoji. App = måler, e-post = emoji. Endrer du det ene, ikke anta det andre skal følge. */ .helse { display: inline-flex; align-items: center; gap: 6px; vertical-align: -1px; } .hm { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; } .hm i { display: block; width: 4px; border-radius: 1px; background: var(--skeleton); } .hm i:nth-child(1) { height: 6px; } .hm i:nth-child(2) { height: 10px; } .hm i:nth-child(3) { height: 14px; } .hm[data-fylt="1"] i:nth-child(-n+1), .hm[data-fylt="2"] i:nth-child(-n+2), .hm[data-fylt="3"] i:nth-child(-n+3) { background: var(--hm-farge, var(--txt)); } .helse[data-niva="sunn"] { --hm-farge: var(--txt); } .helse[data-niva="middels"] { --hm-farge: var(--warn-fill); } .helse[data-niva="svak"], .helse[data-niva="kritisk"] { --hm-farge: var(--neg); } /* Skjermet (ENK/ANS og alle uten regnskapsplikt): stiplet, ikke et tomt hull. Fraværet er en egenskap ved registeret — det skal SES, ikke gjettes. */ .helse[data-niva="skjermet"] .hm i { background: transparent; border: 1px dashed var(--muted); } .hm-tekst { font: 500 11.5px/1 var(--font-ui); color: var(--txt-2); white-space: nowrap; } /* ---------- redesign S4: Finn bedrifter ---------- Basis-CSS er 390 px. Plass legges TIL med min-width — ingen max-width-brytepunkter her. Komponentene er de navngitte i handoff-pakken (KPI-stripe, Chip, Listerad, Ark) og bygges én gang: steg 5 (selskapskortet) gjenbruker .ark og .lrad. */ /* Skjermtittel — display-fonten, ikke .card h2 sin VERSAL-label. */ .flate-tittel { font: 600 24px/1.1 var(--font-display); letter-spacing: -.027em; margin: 0 0 12px; color: var(--txt); text-transform: none; } /* Søkefelt med ikon. Fontstørrelsen er 15 px med vilje: under det zoomer iOS Safari inn ved fokus, og hele flaten hopper. */ .sokefelt { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 0 14px; min-height: var(--hit); } .sokefelt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .sokefelt-ikon { flex: none; display: flex; color: var(--muted); } .sokefelt input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 0; font: 400 15px/1.3 var(--font-ui); } .sokefelt input:focus-visible { outline: 0; } .sokefelt input:hover { border: 0; } /* KPI-stripe — én rad med delte celler, ikke fire kort i rutenett. Tallet er registerdata → mono. Etiketten er en VERSAL mono-label, ikke brødtekst. */ .kpi-stripe { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; } .kpi-celle { flex: 1; min-width: 0; padding: 13px 14px; border-right: 1px solid var(--line); } .kpi-celle:last-child { border-right: 0; } .kpi-celle .v { font: 500 19px/1.1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi-celle .v .enhet { font-size: 12px; color: var(--muted); } .kpi-celle .l { font: 400 10.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } /* Fire celler på 390 px gir 90 px hver — «6 480» brekker. Ansatte er den minst brukte, og får plass først på nettbrett. */ .kpi-celle.sen { display: none; } @media (min-width: 768px) { .kpi-celle.sen { display: block; } } /* Chip — av: hvit flate med kant. På: grafitt med lys tekst. Hele chippen er treffflaten, og den er minst 44 px høy (README pkt 5). «+ Filter» er den ene i grønn omriss. */ .chip-rad { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } /* `display:flex` over slår UA-arkets `[hidden]{display:none}` (klasse vinner over den regelen), så `el.hidden = true` ville vært et no-op. Målt, ikke resonnert: chipsene sto igjen. */ .chip-rad[hidden] { display: none; } .chip-valg { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--txt-2); font: 500 12.5px/1 var(--font-ui); cursor: pointer; } .chip-valg:hover { background: var(--surface-3); } .chip-valg[aria-pressed="true"] { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--on-inverse); } .chip-valg[aria-pressed="true"]:hover { background: var(--bg-inverse); } .chip-filter { color: var(--accent-text); border-color: var(--accent-text); gap: 5px; } .chip-filter:hover { background: var(--accent-wash); } /* Aktive filter-chips er fjernbare med tommelen: ×-flaten er minst 44 px, ikke en 15 px glyf. */ .filterchip { min-height: var(--hit); } .filterchip button { min-width: var(--hit); min-height: var(--hit); } /* Listerad, selskap — ingen tabell på mobil. Navn + meta til venstre, omsetning og helsemåler høyrestilt, signalene som merkelapper under. */ .lliste { border-top: 1px solid var(--line); } .lliste-kol { display: none; } /* kolonnehoder finnes først når lista er tabell */ /* 🔴 flex-wrap, ikke pynt: «SORTERT PÅ MATCH» + eksportknappene er 373 px på en 316 px rad, og uten wrap dyttet de kortet ut til 389 og SIDA til 410 px på en 390 px skjerm. Målt i nettleseren — horisontal skrolling er nettopp det mobil-først-briefen forbyr. */ .lliste-hdr { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 2px 8px; font: 400 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .lrad { display: block; width: 100%; text-align: left; padding: 13px 4px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--txt); font: inherit; cursor: pointer; } .lrad:first-child { border-top: 0; } .lrad:hover { background: var(--surface-3); } /* 🔴 Raden er en