/* ============================================================================
   Wican Design v3 - kjerne
   Manrope · Granitt/Sand/Krokus · to skall · lyst og mørkt univers
   Rammeverksfri CSS, ingen build, ingen CDN.

   Struktur:
     1. Primitiver (rampene fra designmanualen + Rogn som UI-utvidelse)
     2. Semantiske tokens (lyst), aksentvalg via data-accent
     3. Mørkt univers (+ eksplisitt lyst per undertre, + OS-styrt via .theme-auto)
     4. Basis og typografi
     5. Layout-hjelpere
     6. Skall: toppmeny, sidemeny, mobil bunnavigasjon, footer
     7. Komponenter
     8. Ikoner
     9. Hjelpere og utvidelser
    10. v2-kompatibilitet (Nordisk-klasser som ikke finnes i v3-vokabularet)
    11. Utskrift, bevegelse og touch
   Regler: alle farger via tokens (hex kun i primitivblokken, SVG-data-URI-er og
   Microsoft-logoen). Én aksent per portal. Tekst tar mørke trinn, Krokus 400 er
   aldri tekst. v2-aliaser (--brand, --bg, .topbar ...) beholdes så konsumenter virker.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("manrope-var.woff2") format("woff2-variations"),
       url("assets/fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("manrope-var-ext.woff2") format("woff2-variations"),
       url("assets/fonts/manrope-var-ext.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 1. Primitiver ──────────────────────────────────────────────────────── */
:root {
  --granitt-050:#2E3D48; --granitt-100:#28363F; --granitt-200:#25313A; --granitt-300:#212D34;
  --granitt-400:#1E282F; --granitt-500:#1A2429; --granitt-600:#171F24; --granitt-700:#141B20;
  --granitt-800:#11171B; --granitt-900:#0E1316; --granitt-950:#0B0F11;

  --sand-050:#FCFBFA; --sand-100:#F7F5F3; --sand-200:#F0EDE8; --sand-300:#E8E4DD;
  --sand-400:#E2DDD4; --sand-500:#DED8CE; --sand-600:#D0C9BD; --sand-700:#BEB5A7;
  --sand-800:#A59C8D; --sand-900:#8C8373; --sand-950:#736D64;

  --krokus-050:#F4F0FF; --krokus-100:#E5DEFF; --krokus-200:#CEBDFF; --krokus-300:#AE94FF;
  --krokus-400:#9073E8; --krokus-500:#754BDF; --krokus-600:#5F39C1; --krokus-700:#4F319B;
  --krokus-800:#3F2A74; --krokus-900:#2F2152; --krokus-950:#1A1429;

  --multe-050:#FFF7EF; --multe-100:#FFEDDE; --multe-200:#FFDABC; --multe-300:#FFC494;
  --multe-400:#FF9D50; --multe-500:#F38A37; --multe-600:#D57225; --multe-700:#AA5E22;
  --multe-800:#7E4920; --multe-900:#59361A; --multe-950:#2C1D11;

  --skog-050:#F4FAF5; --skog-100:#E7F6E9; --skog-200:#CFEDD1; --skog-300:#B2E1B5;
  --skog-400:#86D08B; --skog-500:#67B76D; --skog-600:#4BA052; --skog-700:#3C8041;
  --skog-800:#365F39; --skog-900:#273F28; --skog-950:#1C241D;

  --himmel-050:#F0F9FF; --himmel-100:#DEF3FF; --himmel-200:#BDE6FF; --himmel-300:#94D7FF;
  --himmel-400:#57C1FF; --himmel-500:#24AEFF; --himmel-600:#009DFA; --himmel-700:#037FC9;
  --himmel-800:#105F8E; --himmel-900:#15435E; --himmel-950:#10222D;

  /* Rogn - UI-utvidelse av profilen. Kun feil og destruktive handlinger.
     Finnes ikke i designmanualen; dokumentert som bevisst tillegg for produktflater. */
  --rogn-050:#FDF1F0; --rogn-100:#FBE3E1; --rogn-200:#F6C4C0; --rogn-300:#EE9A94;
  --rogn-400:#E36B62; --rogn-500:#D3463C; --rogn-600:#B43730; --rogn-700:#8F2D27;
  --rogn-800:#6B241F; --rogn-900:#4A1A17; --rogn-950:#2A0F0D;

  --white:#FFFFFF;
  --white-05:rgba(255,255,255,.05); --white-10:rgba(255,255,255,.10); --white-15:rgba(255,255,255,.15);
  --white-30:rgba(255,255,255,.30); --white-40:rgba(255,255,255,.40); --white-60:rgba(255,255,255,.60); --white-75:rgba(255,255,255,.75);
  --black-05:rgba(0,0,0,.05); --black-10:rgba(0,0,0,.10); --black-40:rgba(0,0,0,.40); --black-60:rgba(0,0,0,.60);
}

/* ── 2. Semantiske tokens (lyst univers, standard) ──────────────────────── */
:root {
  color-scheme: light;

  /* Aksent: Krokus som standard. data-accent="skog|multe|himmel" bytter hele
     rampen (seksjon 2b). Standardverdiene hører hjemme HER, i :root, ikke i
     [data-theme="light"] - den har samme spesifisitet som [data-accent] og
     står senere i fila, så en ramp der ville overstyrt portalens aksent. */
  --accent-050:var(--krokus-050); --accent-100:var(--krokus-100); --accent-200:var(--krokus-200);
  --accent-300:var(--krokus-300); --accent-400:var(--krokus-400); --accent-500:var(--krokus-500);
  --accent-600:var(--krokus-600); --accent-700:var(--krokus-700); --accent-800:var(--krokus-800);

  --primary:        var(--accent-500);
  --primary-hover:  var(--accent-600);
  --primary-active: var(--accent-700);
  --primary-text:   var(--white);
  --primary-soft:   var(--accent-100);
  --primary-softer: var(--accent-050);
  --primary-ink:    var(--accent-700);   /* tekst på soft-flater */
  --link:           var(--accent-600);
  --decor:          var(--accent-400);   /* streker, prikker, aktiv-markør. Aldri tekst. */
  --ring:           color-mix(in srgb, var(--accent-500) 35%, transparent);

  --bg:         var(--sand-100);
  --surface:    var(--white);
  --surface-2:  var(--sand-050);
  --surface-3:  var(--sand-200);
  --surface-4:  var(--sand-300);
  --border:     var(--sand-300);
  --border-2:   var(--sand-600);
  --control-border: var(--sand-900);   /* ramme på input/select/bryter: 3,7:1 mot hvit (WCAG 1.4.11) */
  --divider:    var(--sand-200);
  --overlay:    rgba(26,36,41,.45);

  --text:     var(--granitt-300);
  --heading:  var(--granitt-500);
  --muted:    var(--granitt-050);
  --dim:      var(--sand-950);           /* kun plassholder og deaktivert tekst */
  --inverse:  var(--white);

  /* Status. Tekst tar mørke trinn (AA), fyll tar de mettede, bakgrunn tar 050. */
  --ok:        var(--skog-800);  --ok-fill:   var(--skog-600);  --ok-bg:   var(--skog-050);  --ok-border:   var(--skog-200);
  --warn:      var(--multe-700); --warn-fill: var(--multe-600); --warn-bg: var(--multe-050); --warn-border: var(--multe-200);
  --bad:       var(--rogn-600);  --bad-fill:  var(--rogn-500);  --bad-bg:  var(--rogn-050);  --bad-border:  var(--rogn-200);
  --bad-strong:var(--rogn-600);  --bad-strong-hover:var(--rogn-700);   /* knappeflate for destruktive handlinger, 6,4:1 med hvit */
  --info:      var(--himmel-800);--info-fill: var(--himmel-700);--info-bg: var(--himmel-050);--info-border: var(--himmel-200);
  --neutral:   var(--granitt-050);--neutral-fill:var(--sand-700);--neutral-bg:var(--sand-200);--neutral-border:var(--sand-400);
  --planned:   var(--krokus-400); /* rail: planlagt */
  --locked:    var(--granitt-100); /* rail: fakturert/låst */

  /* Flyktige mørke flater (toast, tooltip) og tekst på fargefyll. Egne tokens fordi
     de skal ligge OVER panelene i begge universer, ikke arve flatestigen. */
  --toast-bg:    var(--granitt-500);
  --toast-ink:   var(--white);
  --toast-link:  var(--accent-300);
  --tooltip-bg:  var(--granitt-500);
  --ink-on-fill: var(--granitt-800);   /* mørk tekst på mettet fyll, likt i begge universer */
  --ok-strong:   var(--skog-700);  --ok-strong-hover: var(--skog-800);   /* knappeflate, hvit tekst */
  --switch-on:   var(--skog-700);      /* bryter i på-stilling: 4,8:1 mot hvit, 4,1:1 mot innfelt flate */
  --side-warn:   var(--multe-300);     /* teller med varsel på mørk sidemeny */

  /* Sidemenyen er alltid mørk Granitt, uavhengig av tema */
  --side-bg:      var(--granitt-500);
  --side-text:    var(--sand-300);
  --side-muted:   var(--sand-700);   /* Sand 900 ga 4,2:1 mot Granitt 500 - Sand 700 gir 7,6:1 */
  --side-active:  var(--white-10);
  --side-hover:   var(--white-05);
  --side-marker:  var(--krokus-400);
  --side-border:  var(--white-10);

  /* Diagram-serier (8), CVD-vennlig rekkefølge */
  --chart-1:var(--krokus-500); --chart-2:var(--multe-600); --chart-3:var(--skog-600); --chart-4:var(--himmel-700);
  --chart-5:var(--krokus-300); --chart-6:var(--multe-300); --chart-7:var(--skog-400); --chart-8:var(--granitt-050);
  --chart-grid: var(--sand-300); --chart-axis: var(--granitt-050);

  /* Form */
  --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px;
  --stroke:1px;
  --shadow-sm:0 1px 2px rgba(17,23,27,.06);
  --shadow-overlay:0 12px 32px rgba(17,23,27,.16), 0 2px 6px rgba(17,23,27,.08);
  --shadow-modal:0 24px 64px rgba(17,23,27,.28);

  /* Typografi. Produktskala, ikke web-skalaen fra manualen. */
  --font:"Manrope", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px; --fs-4xl:40px;
  --lh-title:1.15; --lh-body:1.4; --ls-title:-0.02em;

  /* Spacing (4-basert) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  --paper:var(--sand-050); --paper-text:var(--granitt-800); --paper-muted:var(--granitt-050); --paper-border:var(--sand-300);
  --nav-h:56px; --nav-h-compact:48px; --side-w:220px; --maxw:1200px;
  --dur-fast:120ms; --dur:160ms; --dur-slow:240ms; --ease:cubic-bezier(.4,0,.2,1);

  /* v2-aliaser (bakoverkompatibilitet for konsumentenes lokale CSS) */
  --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft);
  --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); --brand-word:var(--heading);
  --brand-violet:var(--krokus-500); --text-muted:var(--muted); --ok-fg:var(--ok); --warn-fg:var(--warn);
  --err-bg:var(--bad-bg); --err-fg:var(--bad); --err-border:var(--bad-border);
  --shadow:var(--shadow-overlay); --shadow-lg:var(--shadow-modal); --border-hover:var(--border-2);
}

/* Aksent per portal: settes én gang på <html data-accent="skog|multe|himmel">.
   Krokus er standard. Skog = rådgivning, Multe = regnskap, Himmel = IT.
   De avledede tokenene gjentas fordi var() løses der det deklareres. */
[data-accent="skog"] { --accent-050:var(--skog-050); --accent-100:var(--skog-100); --accent-200:var(--skog-200); --accent-300:var(--skog-300); --accent-400:var(--skog-600); --accent-500:var(--skog-700); --accent-600:var(--skog-800); --accent-700:var(--skog-900); --accent-800:var(--skog-950); --side-marker:var(--skog-500);
  --primary:var(--accent-500); --primary-hover:var(--accent-600); --primary-active:var(--accent-700); --primary-soft:var(--accent-100); --primary-softer:var(--accent-050); --primary-ink:var(--accent-700); --link:var(--accent-600); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-500) 35%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); }
[data-theme="dark"][data-accent="skog"], .theme-dark[data-accent="skog"], [data-theme="dark"] [data-accent="skog"], .theme-dark [data-accent="skog"] { --primary:var(--accent-300); --primary-hover:var(--accent-200); --primary-active:var(--accent-400); --primary-soft:color-mix(in srgb, var(--accent-400) 22%, transparent); --primary-softer:color-mix(in srgb, var(--accent-400) 12%, transparent); --primary-ink:var(--accent-200); --link:var(--accent-300); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-300) 45%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); }
[data-accent="multe"] { --accent-050:var(--multe-050); --accent-100:var(--multe-100); --accent-200:var(--multe-200); --accent-300:var(--multe-300); --accent-400:var(--multe-600); --accent-500:var(--multe-700); --accent-600:var(--multe-800); --accent-700:var(--multe-900); --accent-800:var(--multe-950); --side-marker:var(--multe-400);
  --primary:var(--accent-500); --primary-hover:var(--accent-600); --primary-active:var(--accent-700); --primary-soft:var(--accent-100); --primary-softer:var(--accent-050); --primary-ink:var(--accent-700); --link:var(--accent-600); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-500) 35%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); }
[data-theme="dark"][data-accent="multe"], .theme-dark[data-accent="multe"], [data-theme="dark"] [data-accent="multe"], .theme-dark [data-accent="multe"] { --primary:var(--accent-300); --primary-hover:var(--accent-200); --primary-active:var(--accent-400); --primary-soft:color-mix(in srgb, var(--accent-400) 22%, transparent); --primary-softer:color-mix(in srgb, var(--accent-400) 12%, transparent); --primary-ink:var(--accent-200); --link:var(--accent-300); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-300) 45%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); }
[data-accent="himmel"] { --accent-050:var(--himmel-050); --accent-100:var(--himmel-100); --accent-200:var(--himmel-200); --accent-300:var(--himmel-300); --accent-400:var(--himmel-700); --accent-500:var(--himmel-800); --accent-600:var(--himmel-900); --accent-700:var(--himmel-950); --accent-800:var(--himmel-950); --side-marker:var(--himmel-400);
  --primary:var(--accent-500); --primary-hover:var(--accent-600); --primary-active:var(--accent-700); --primary-soft:var(--accent-100); --primary-softer:var(--accent-050); --primary-ink:var(--accent-700); --link:var(--accent-600); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-500) 35%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); }
[data-theme="dark"][data-accent="himmel"], .theme-dark[data-accent="himmel"], [data-theme="dark"] [data-accent="himmel"], .theme-dark [data-accent="himmel"] { --primary:var(--accent-300); --primary-hover:var(--accent-200); --primary-active:var(--accent-400); --primary-soft:color-mix(in srgb, var(--accent-400) 22%, transparent); --primary-softer:color-mix(in srgb, var(--accent-400) 12%, transparent); --primary-ink:var(--accent-200); --link:var(--accent-300); --decor:var(--accent-400); --ring:color-mix(in srgb, var(--accent-300) 45%, transparent); --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft); --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); }

/* ── 3. Mørkt univers (Granitt 700 + hvit + Krokus 300) ─────────────────── */
[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --primary:        var(--accent-300);
  --primary-hover:  var(--accent-200);
  --primary-active: var(--accent-400);
  --primary-text:   var(--granitt-900);
  --primary-soft:   color-mix(in srgb, var(--accent-400) 22%, transparent);
  --primary-softer: color-mix(in srgb, var(--accent-400) 12%, transparent);
  --primary-ink:    var(--accent-200);
  --link:           var(--accent-300);
  --decor:          var(--accent-400);
  --ring:           color-mix(in srgb, var(--accent-300) 45%, transparent);

  /* Flatestigen: siden er mørkest (Granitt 700), sidemenyen ligger fast på
     Granitt 500, og panelene løftes over den (Granitt 400 og oppover). Kort og
     tabeller leser derfor som løftet arbeidsflate inne i et mørkere skall -
     ikke som svarte hull. Hvit tekst på kort er fortsatt 15,0:1. */
  --bg:         var(--granitt-700);
  --surface:    var(--granitt-400);
  --surface-2:  var(--granitt-300);
  --surface-3:  var(--granitt-200);
  --surface-4:  var(--granitt-100);
  --border:     var(--white-10);
  --border-2:   var(--white-15);
  --control-border: var(--white-40);
  --divider:    var(--white-05);
  --overlay:    rgba(0,0,0,.6);

  --text:     var(--white);
  --heading:  var(--white);
  --muted:    var(--white-75);
  --dim:      var(--white-60);
  --inverse:  var(--granitt-900);

  /* Overlays ligger over panelene også i mørkt univers: Granitt 200 mot flatene på 400. */
  --toast-bg:    var(--granitt-200);
  --toast-ink:   var(--white);
  --toast-link:  var(--accent-300);
  --tooltip-bg:  var(--granitt-200);
  --ink-on-fill: var(--granitt-800);
  --ok-strong:   var(--skog-700);  --ok-strong-hover: var(--skog-800);
  --switch-on:   var(--skog-500);      /* lysere trinn på mørk flate, 5,9:1 */
  --side-warn:   var(--multe-300);

  --ok:   var(--skog-300);   --ok-fill:var(--skog-500);   --ok-bg:rgba(75,160,82,.16);    --ok-border:rgba(75,160,82,.35);
  --warn: var(--multe-300);  --warn-fill:var(--multe-500);--warn-bg:rgba(243,138,55,.16); --warn-border:rgba(243,138,55,.35);
  --bad:  var(--rogn-300);   --bad-fill:var(--rogn-500);  --bad-bg:rgba(211,70,60,.18);   --bad-border:rgba(211,70,60,.4);
  --bad-strong:var(--rogn-600); --bad-strong-hover:var(--rogn-700);
  --info: var(--himmel-300); --info-fill:var(--himmel-500);--info-bg:rgba(36,174,255,.14);--info-border:rgba(36,174,255,.35);
  --neutral:var(--white-75); --neutral-fill:var(--white-30); --neutral-bg:var(--white-10); --neutral-border:var(--white-15);
  --locked: var(--sand-700);

  --chart-1:var(--krokus-300); --chart-2:var(--multe-400); --chart-3:var(--skog-400); --chart-4:var(--himmel-400);
  --chart-5:var(--krokus-200); --chart-6:var(--multe-200); --chart-7:var(--skog-200); --chart-8:var(--white-60);
  --chart-grid:var(--white-10); --chart-axis:var(--white-60);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-overlay:0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
  --shadow-modal:0 24px 64px rgba(0,0,0,.6);

  /* Aliaser gjentas: en custom property med var() løses på elementet den deklareres på,
     så :root-aliasene ville ellers båret lyse verdier inn i mørkt univers. */
  --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft);
  --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); --brand-word:var(--heading);
  --brand-violet:var(--krokus-500); --text-muted:var(--muted); --ok-fg:var(--ok); --warn-fg:var(--warn);
  --err-bg:var(--bad-bg); --err-fg:var(--bad); --err-border:var(--bad-border);
  --shadow:var(--shadow-overlay); --shadow-lg:var(--shadow-modal); --border-hover:var(--border-2);
}

/* Lyst univers som eksplisitt valg, per rot eller per undertre (f.eks. kvittering/dokumentviser i mørk app) */
[data-theme="light"], .theme-light {
  color-scheme: light;

  /* Aksentrampen settes IKKE her. [data-theme="light"] har samme spesifisitet
     som [data-accent="..."] og står senere i fila, så en ramp her ville vunnet
     og gjort alle portaler Krokus. Rampen kommer fra :root eller [data-accent];
     de avledede tokenene under peker på den og blir derfor riktige uansett. */

  --primary:        var(--accent-500);
  --primary-hover:  var(--accent-600);
  --primary-active: var(--accent-700);
  --primary-text:   var(--white);
  --primary-soft:   var(--accent-100);
  --primary-softer: var(--accent-050);
  --primary-ink:    var(--accent-700);   /* tekst på soft-flater */
  --link:           var(--accent-600);
  --decor:          var(--accent-400);   /* streker, prikker, aktiv-markør. Aldri tekst. */
  --ring:           color-mix(in srgb, var(--accent-500) 35%, transparent);

  --bg:         var(--sand-100);
  --surface:    var(--white);
  --surface-2:  var(--sand-050);
  --surface-3:  var(--sand-200);
  --surface-4:  var(--sand-300);
  --border:     var(--sand-300);
  --border-2:   var(--sand-600);
  --control-border: var(--sand-900);   /* ramme på input/select/bryter: 3,7:1 mot hvit (WCAG 1.4.11) */
  --divider:    var(--sand-200);
  --overlay:    rgba(26,36,41,.45);

  --text:     var(--granitt-300);
  --heading:  var(--granitt-500);
  --muted:    var(--granitt-050);
  --dim:      var(--sand-950);           /* kun plassholder og deaktivert tekst */
  --inverse:  var(--white);

  /* Status. Tekst tar mørke trinn (AA), fyll tar de mettede, bakgrunn tar 050. */
  --ok:        var(--skog-800);  --ok-fill:   var(--skog-600);  --ok-bg:   var(--skog-050);  --ok-border:   var(--skog-200);
  --warn:      var(--multe-700); --warn-fill: var(--multe-600); --warn-bg: var(--multe-050); --warn-border: var(--multe-200);
  --bad:       var(--rogn-600);  --bad-fill:  var(--rogn-500);  --bad-bg:  var(--rogn-050);  --bad-border:  var(--rogn-200);
  --bad-strong:var(--rogn-600);  --bad-strong-hover:var(--rogn-700);   /* knappeflate for destruktive handlinger, 6,4:1 med hvit */
  --info:      var(--himmel-800);--info-fill: var(--himmel-700);--info-bg: var(--himmel-050);--info-border: var(--himmel-200);
  --neutral:   var(--granitt-050);--neutral-fill:var(--sand-700);--neutral-bg:var(--sand-200);--neutral-border:var(--sand-400);
  --planned:   var(--krokus-400); /* rail: planlagt */
  --locked:    var(--granitt-100); /* rail: fakturert/låst */

  /* Flyktige mørke flater (toast, tooltip) og tekst på fargefyll. Egne tokens fordi
     de skal ligge OVER panelene i begge universer, ikke arve flatestigen. */
  --toast-bg:    var(--granitt-500);
  --toast-ink:   var(--white);
  --toast-link:  var(--accent-300);
  --tooltip-bg:  var(--granitt-500);
  --ink-on-fill: var(--granitt-800);   /* mørk tekst på mettet fyll, likt i begge universer */
  --ok-strong:   var(--skog-700);  --ok-strong-hover: var(--skog-800);   /* knappeflate, hvit tekst */
  --switch-on:   var(--skog-700);      /* bryter i på-stilling: 4,8:1 mot hvit, 4,1:1 mot innfelt flate */
  --side-warn:   var(--multe-300);     /* teller med varsel på mørk sidemeny */

  /* Sidemenyen er alltid mørk Granitt, uavhengig av tema */
  --side-bg:      var(--granitt-500);
  --side-text:    var(--sand-300);
  --side-muted:   var(--sand-700);   /* Sand 900 ga 4,2:1 mot Granitt 500 - Sand 700 gir 7,6:1 */
  --side-active:  var(--white-10);
  --side-hover:   var(--white-05);
  --side-marker:  var(--krokus-400);
  --side-border:  var(--white-10);

  /* Diagram-serier (8), CVD-vennlig rekkefølge */
  --chart-1:var(--krokus-500); --chart-2:var(--multe-600); --chart-3:var(--skog-600); --chart-4:var(--himmel-700);
  --chart-5:var(--krokus-300); --chart-6:var(--multe-300); --chart-7:var(--skog-400); --chart-8:var(--granitt-050);
  --chart-grid: var(--sand-300); --chart-axis: var(--granitt-050);

  /* Form */
  --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px;
  --stroke:1px;
  --shadow-sm:0 1px 2px rgba(17,23,27,.06);
  --shadow-overlay:0 12px 32px rgba(17,23,27,.16), 0 2px 6px rgba(17,23,27,.08);
  --shadow-modal:0 24px 64px rgba(17,23,27,.28);

  /* Typografi. Produktskala, ikke web-skalaen fra manualen. */
  --font:"Manrope", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px; --fs-4xl:40px;
  --lh-title:1.15; --lh-body:1.4; --ls-title:-0.02em;

  /* Spacing (4-basert) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  --paper:var(--sand-050); --paper-text:var(--granitt-800); --paper-muted:var(--granitt-050); --paper-border:var(--sand-300);
  --nav-h:56px; --nav-h-compact:48px; --side-w:220px; --maxw:1200px;
  --dur-fast:120ms; --dur:160ms; --dur-slow:240ms; --ease:cubic-bezier(.4,0,.2,1);

  /* v2-aliaser (bakoverkompatibilitet for konsumentenes lokale CSS) */
  --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft);
  --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); --brand-word:var(--heading);
  --brand-violet:var(--krokus-500); --text-muted:var(--muted); --ok-fg:var(--ok); --warn-fg:var(--warn);
  --err-bg:var(--bad-bg); --err-fg:var(--bad); --err-border:var(--bad-border);
  --shadow:var(--shadow-overlay); --shadow-lg:var(--shadow-modal); --border-hover:var(--border-2);
}

/* Mørkt univers styrt av OS: KUN når portalen har satt class="theme-auto" på <html>
   og ikke har valgt eksplisitt tema. Uten .theme-auto er portalen alltid lys, så
   propagering til v2-konsumenter er trygg. Wican.theme() setter data-theme ved valg. */
@media (prefers-color-scheme: dark) {
  html.theme-auto:not([data-theme="light"]) {
    color-scheme: dark;
    --primary:        var(--accent-300);
    --primary-hover:  var(--accent-200);
    --primary-active: var(--accent-400);
    --primary-text:   var(--granitt-900);
    --primary-soft:   color-mix(in srgb, var(--accent-400) 22%, transparent);
    --primary-softer: color-mix(in srgb, var(--accent-400) 12%, transparent);
    --primary-ink:    var(--accent-200);
    --link:           var(--accent-300);
    --decor:          var(--accent-400);
    --ring:           color-mix(in srgb, var(--accent-300) 45%, transparent);
  
    /* Flatestigen: siden er mørkest (Granitt 700), sidemenyen ligger fast på
       Granitt 500, og panelene løftes over den (Granitt 400 og oppover). Kort og
       tabeller leser derfor som løftet arbeidsflate inne i et mørkere skall -
       ikke som svarte hull. Hvit tekst på kort er fortsatt 15,0:1. */
    --bg:         var(--granitt-700);
    --surface:    var(--granitt-400);
    --surface-2:  var(--granitt-300);
    --surface-3:  var(--granitt-200);
    --surface-4:  var(--granitt-100);
    --border:     var(--white-10);
    --border-2:   var(--white-15);
    --control-border: var(--white-40);
    --divider:    var(--white-05);
    --overlay:    rgba(0,0,0,.6);
  
    --text:     var(--white);
    --heading:  var(--white);
    --muted:    var(--white-75);
    --dim:      var(--white-60);
    --inverse:  var(--granitt-900);
  
    /* Overlays ligger over panelene også i mørkt univers: Granitt 200 mot flatene på 400. */
    --toast-bg:    var(--granitt-200);
    --toast-ink:   var(--white);
    --toast-link:  var(--accent-300);
    --tooltip-bg:  var(--granitt-200);
    --ink-on-fill: var(--granitt-800);
    --ok-strong:   var(--skog-700);  --ok-strong-hover: var(--skog-800);
    --switch-on:   var(--skog-500);
    --side-warn:   var(--multe-300);

    --ok:   var(--skog-300);   --ok-fill:var(--skog-500);   --ok-bg:rgba(75,160,82,.16);    --ok-border:rgba(75,160,82,.35);
    --warn: var(--multe-300);  --warn-fill:var(--multe-500);--warn-bg:rgba(243,138,55,.16); --warn-border:rgba(243,138,55,.35);
    --bad:  var(--rogn-300);   --bad-fill:var(--rogn-500);  --bad-bg:rgba(211,70,60,.18);   --bad-border:rgba(211,70,60,.4);
    --bad-strong:var(--rogn-600); --bad-strong-hover:var(--rogn-700);
    --info: var(--himmel-300); --info-fill:var(--himmel-500);--info-bg:rgba(36,174,255,.14);--info-border:rgba(36,174,255,.35);
    --neutral:var(--white-75); --neutral-fill:var(--white-30); --neutral-bg:var(--white-10); --neutral-border:var(--white-15);
    --locked: var(--sand-700);
  
    --chart-1:var(--krokus-300); --chart-2:var(--multe-400); --chart-3:var(--skog-400); --chart-4:var(--himmel-400);
    --chart-5:var(--krokus-200); --chart-6:var(--multe-200); --chart-7:var(--skog-200); --chart-8:var(--white-60);
    --chart-grid:var(--white-10); --chart-axis:var(--white-60);
  
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-overlay:0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
    --shadow-modal:0 24px 64px rgba(0,0,0,.6);
  
    /* Aliaser gjentas: en custom property med var() løses på elementet den deklareres på,
       så :root-aliasene ville ellers båret lyse verdier inn i mørkt univers. */
    --brand:var(--primary); --brand-strong:var(--primary-hover); --brand-soft:var(--primary-soft);
    --brand-softer:var(--primary-softer); --brand-ink:var(--primary-ink); --brand-word:var(--heading);
    --brand-violet:var(--krokus-500); --text-muted:var(--muted); --ok-fg:var(--ok); --warn-fg:var(--warn);
    --err-bg:var(--bad-bg); --err-fg:var(--bad); --err-border:var(--bad-border);
    --shadow:var(--shadow-overlay); --shadow-lg:var(--shadow-modal); --border-hover:var(--border-2);
  }

  /* Logoen må følge OS-temaet på samme måte som tokenene, ellers står den
     mørke logoen på en mørk toppbar. */
  html.theme-auto:not([data-theme="light"]) .brand-logo--dark { display:none; }
  html.theme-auto:not([data-theme="light"]) .brand-logo--light { display:block; }
}





/* ── 4. Basis og typografi ──────────────────────────────────────────────────
   Produktskala (13 px grunntekst, 14 px på touch), titler 115 % / -2 %,
   brødtekst 140 %. Store tall i Manrope Light med tabulære sifre. */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh-body); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { margin:0; color:var(--heading); line-height:var(--lh-title); letter-spacing:var(--ls-title); font-weight:600; text-wrap:balance; }
h1 { font-size:var(--fs-2xl); font-weight:700; }
h2 { font-size:var(--fs-lg); }
h3 { font-size:var(--fs-md); }
h4 { font-size:var(--fs-base); letter-spacing:0; }
p { margin:0 0 var(--sp-3); }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
small, .small { font-size:var(--fs-sm); }
.muted { color:var(--muted); }
.dim { color:var(--dim); }
.lead { font-size:var(--fs-md); color:var(--muted); }
.eyebrow { font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.num, .tnum { font-variant-numeric:tabular-nums; }
.big-num { font-weight:300; font-size:var(--fs-3xl); line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--heading); }
code, kbd, pre, .mono { font-family:var(--mono); font-size:.92em; }
code { background:var(--surface-3); padding:1px 5px; border-radius:var(--radius-xs); }
kbd { background:var(--surface); border:var(--stroke) solid var(--border-2); border-bottom-width:2px; border-radius:var(--radius-xs); padding:1px 6px; font-size:var(--fs-xs); font-weight:600; color:var(--muted); }
pre { margin:0; background:var(--surface-2); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); overflow:auto; line-height:1.5; }
pre.log { max-height:320px; }
hr, .divider { border:0; border-top:var(--stroke) solid var(--border); margin:var(--sp-4) 0; }
::selection { background:var(--primary-soft); }
::placeholder { color:var(--dim); opacity:1; }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--radius-xs); }
/* Innenfor klippede eller mørke flater legges fokusringen innover / i lys aksent */
.sidenav a:focus-visible, .sidenav button:focus-visible { outline:2px solid var(--accent-300); outline-offset:-3px; border-radius:var(--radius-xs); }
.tabs a:focus-visible, .tabs button:focus-visible, .pager .pages button:focus-visible, .menu a:focus-visible, .menu button:focus-visible, .bottomnav a:focus-visible, .topnav a:focus-visible, .seg button:focus-visible, .palette .item:focus-visible { outline-offset:-2px; }
.opt-card:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:2px; }
.chip:focus-visible, .opt-btn:focus-visible { outline-offset:2px; }
img { max-width:100%; }
.uiword { font-weight:600; color:var(--heading); }

/* ── 5. Layout ──────────────────────────────────────────────────────────────
   .container (1200 px) er standard; .container--wide for tabelltunge sider.
   .stack/.row/.between/.grid-* er de eneste avstandsverktøyene komponentene
   trenger; avstandshjelperne i seksjon 9 er unntaket for enkeltstående blokker. */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:var(--sp-6) var(--sp-5); flex:1; }
.container--wide { max-width:none; }
.container--narrow { max-width:760px; }
.stack { display:flex; flex-direction:column; gap:var(--sp-4); }
.stack-sm { display:flex; flex-direction:column; gap:var(--sp-2); }
.row { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.between { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.spacer { flex:1; }
form > .spacer, .login-card .spacer, .stack > .spacer { flex:none; height:var(--sp-3); }   /* v2: loddrett luft i skjema */
.grid { display:grid; gap:var(--sp-4); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-main-side { grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); align-items:start; }
.grid-side-main { grid-template-columns:minmax(240px,1fr) minmax(0,2.2fr); align-items:start; }
@media (max-width:900px) { .grid-3, .grid-4, .grid-main-side, .grid-side-main { grid-template-columns:1fr; } .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .grid-2, .grid-4 { grid-template-columns:1fr; } }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.page-head h1 { margin:0; }
.page-head .sub { color:var(--muted); margin-top:2px; }
.page-head .actions { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.crumbs { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-2); flex-wrap:wrap; }
.crumbs a { color:var(--muted); }
.crumbs .sep { color:var(--border-2); }
.crumbs .current { color:var(--heading); font-weight:500; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin:var(--sp-6) 0 var(--sp-3); }
.section-head h2 { display:flex; align-items:center; gap:var(--sp-2); }

/* ── 6. Skall ───────────────────────────────────────────────────────────────
   To likestilte skall, ett per portal: .shell--top (toppbar + innhold + footer)
   for mindre paneler, .shell--side (mørk Granitt 500-sidemeny + slank toppbar)
   for modulrike apper. Bunnavigasjon på mobil med .has-bottomnav på <body>. */
/* 6a. Toppbar: a.brand (logo + skille + appnavn) · nav.topnav · div.account.
   Aktiv lenke får understrek i aksentfargen; .navdot/.navcount for status. */
.topbar {
  position:sticky; top:0; z-index:30; height:var(--nav-h);
  display:flex; align-items:center; gap:var(--sp-5); padding:0 var(--sp-5);
  background:var(--surface); border-bottom:var(--stroke) solid var(--border);
}
.brand { display:flex; align-items:center; gap:var(--sp-2); flex:none; color:inherit; }
.brand:hover { text-decoration:none; }
.brand-mark { display:block; height:22px; width:auto; }
.brand-logo { display:block; height:20px; width:auto; }
/* To logofiler i toppbaren: mørk på lys flate, hvit på mørk. Sidemenyen er
   alltid mørk og bruker logo_white direkte, uten disse klassene. */
.brand-logo--light { display:none; }
[data-theme="dark"] .brand-logo--dark, .theme-dark .brand-logo--dark { display:none; }
[data-theme="dark"] .brand-logo--light, .theme-dark .brand-logo--light { display:block; }
.brand-word { font-weight:600; font-size:var(--fs-md); line-height:1; letter-spacing:-0.01em; color:var(--heading); }
.brand-sep { width:1px; height:18px; background:var(--border-2); }
.brand-app { font-weight:500; font-size:var(--fs-md); color:var(--muted); line-height:1; }

.topnav { display:flex; align-items:center; gap:2px; flex:1; min-width:0; }
.topnav a, .topnav button.navitem {
  display:inline-flex; align-items:center; gap:var(--sp-2); position:relative;
  color:var(--muted); font:inherit; font-weight:500; padding:8px 12px; white-space:nowrap;
  border:0; background:none; border-radius:var(--radius-sm); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topnav a:hover, .topnav button.navitem:hover { color:var(--heading); background:var(--surface-3); text-decoration:none; }
.topnav a.active, .topnav button.navitem.active { color:var(--heading); background:var(--surface-3); font-weight:600; }
.topnav a.active::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--primary); border-radius:1px; }
.topnav svg { width:16px; height:16px; flex:none; }
.navdot { width:7px; height:7px; border-radius:50%; background:var(--neutral-fill); margin-left:2px; }
.navdot.on { background:var(--ok-fill); } .navdot.warn { background:var(--warn-fill); } .navdot.bad { background:var(--bad-fill); }
/* Et merke som lenke i menyen (f.eks. «2 behandles») beholder merke-formen. */
.topnav a.badge { padding:2px 8px; gap:5px; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:600; background:var(--neutral-bg); color:var(--neutral); }
.topnav a.badge--accent { background:var(--primary-softer); color:var(--primary-ink); }
.topnav a.badge:hover { background:var(--primary-soft); color:var(--primary-ink); }
.navcount { min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill); background:var(--primary); color:var(--primary-text); font-size:var(--fs-xs); font-weight:700; display:inline-grid; place-items:center; }

.topbar .search { flex:1; max-width:440px; }
.account { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex:none; }
.who { display:flex; align-items:center; gap:var(--sp-2); padding:4px 6px; border-radius:var(--radius-sm); color:inherit; }
.who:hover { background:var(--surface-3); text-decoration:none; }
.who-text { display:flex; flex-direction:column; line-height:1.15; }
.who-name { font-weight:600; font-size:var(--fs-sm); color:var(--heading); }
.who-email { font-size:var(--fs-xs); color:var(--muted); }
.avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--primary-soft); color:var(--primary-ink); display:inline-grid; place-items:center; font-weight:700; font-size:var(--fs-sm); flex:none; }
.avatar-sm { width:28px; height:28px; font-size:var(--fs-xs); }
.avatar-lg { width:44px; height:44px; font-size:var(--fs-md); }

/* 6b. Sidemeny-skall: alltid mørk Granitt, uavhengig av tema. Grupper med .sidenav-label. */
.shell--top { display:flex; flex-direction:column; min-height:100dvh; flex:1; }
.shell--side { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100dvh; flex:1; }
.sidebar {
  background:var(--side-bg); color:var(--side-text);
  display:flex; flex-direction:column; padding:var(--sp-5) 0 var(--sp-4);
  position:sticky; top:0; height:100dvh; overflow-y:auto;
}
.sidebar .brand { padding:0 var(--sp-5) var(--sp-5); color:var(--white); }
.sidebar .brand-word { color:var(--white); }
.sidebar .brand-app { color:var(--side-muted); }
.sidebar .brand-tag { display:block; font-size:var(--fs-xs); color:var(--side-muted); font-weight:500; margin-top:2px; }
.sidenav { display:flex; flex-direction:column; gap:1px; }
.sidenav a, .sidenav button {
  display:flex; align-items:center; gap:var(--sp-3); padding:9px var(--sp-5) 9px calc(var(--sp-5) - 3px);
  color:var(--side-text); font:inherit; font-weight:500; text-align:left; background:none; border:0; cursor:pointer;
  border-left:3px solid transparent; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidenav a:hover, .sidenav button:hover { background:var(--side-hover); color:var(--white); text-decoration:none; }
.sidenav a.active, .sidenav button.active { background:var(--side-active); color:var(--white); border-left-color:var(--side-marker); font-weight:600; }
.sidenav svg { width:17px; height:17px; flex:none; opacity:.85; }
.sidenav .count { margin-left:auto; font-size:var(--fs-xs); font-weight:600; color:var(--side-muted); }
.sidenav .count.warn { color:var(--side-warn); }
.sidenav-label { padding:var(--sp-4) var(--sp-5) var(--sp-1); font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--side-muted); }
.sidebar .foot { margin-top:auto; padding:var(--sp-4) var(--sp-5) 0; font-size:var(--fs-xs); color:var(--side-muted); line-height:1.5; border-top:var(--stroke) solid var(--side-border); display:flex; flex-direction:column; gap:6px; }
.sidebar .foot b { color:var(--side-text); font-weight:600; }
.sidebar .side-status { display:flex; align-items:center; gap:6px; }
.shell--side .main { display:flex; flex-direction:column; min-width:0; }
.shell--side .topbar { gap:var(--sp-4); }
@media (max-width:900px) {
  .shell--side { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; padding:var(--sp-3) 0 0; }
  .sidenav { flex-direction:row; flex-wrap:wrap; padding:0 var(--sp-3); }
  .sidenav a, .sidenav button { border-left:0; border-bottom:3px solid transparent; padding:8px 10px; }
  .sidenav a.active { border-bottom-color:var(--side-marker); }
  .sidenav-label, .sidebar .foot { display:none; }
}

/* 6c. Bunnavigasjon: 3-5 punkter, vises under 760 px når <body class="has-bottomnav">. */
.bottomnav {
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--surface); border-top:var(--stroke) solid var(--border);
  padding:6px var(--sp-2) calc(6px + env(safe-area-inset-bottom, 0px));
  grid-template-columns:repeat(auto-fit,minmax(56px,1fr));
}
.bottomnav a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; color:var(--muted); font-size:var(--fs-xs); font-weight:500; border-radius:var(--radius-sm); }
.bottomnav a.active { color:var(--primary-ink); background:var(--primary-softer); }
.bottomnav svg { width:20px; height:20px; }
@media (max-width:760px) { .has-bottomnav .bottomnav { display:grid; } .has-bottomnav .topnav { display:none; } .has-bottomnav .container { padding-bottom:88px; } }

/* 6d. Footer: «Wican · Appnavn» + versjon (.ver) + .ver-pill ok/warn. */
.foot { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm); color:var(--muted); border-top:var(--stroke) solid var(--border); }
.foot .dot { width:4px; height:4px; border-radius:50%; background:var(--border-2); }
.ver code { background:none; padding:0; color:var(--muted); }
.ver-pill { display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:600; border:var(--stroke) solid var(--border); }
.ver-pill.ok { color:var(--ok); border-color:var(--ok-border); background:var(--ok-bg); }
.ver-pill.warn { color:var(--warn); border-color:var(--warn-border); background:var(--warn-bg); }

/* ── 7. Komponenter ─────────────────────────────────────────────────────── */
/* Kort: .card er standardflaten. .card--flush når innholdet er tabell/liste (ingen indre padding). */
.card { background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); }
.card--flush { padding:0; overflow:hidden; }
.card > .card-head, .card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:var(--stroke) solid var(--border); }
.card-head h2, .card-head h3 { margin:0; font-size:var(--fs-md); }
.card-body { padding:var(--sp-4); }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-top:var(--stroke) solid var(--border); background:var(--surface-2); }
.card--soft { background:var(--surface-2); }
.card--accent { border-top:3px solid var(--decor); }
.cards { display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

/* Knapper: default (hvit m/ strek), --primary (aksent), --soft, --ghost, --danger (Rogn), --success. Én primær per flate. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:34px; padding:0 14px; border-radius:var(--radius-sm); border:var(--stroke) solid var(--border-2);
  background:var(--surface); color:var(--heading); font:inherit; font-weight:600; font-size:var(--fs-base);
  cursor:pointer; white-space:nowrap; text-decoration:none; user-select:none;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background:var(--surface-2); border-color:var(--muted); text-decoration:none; }
.btn:active { background:var(--surface-3); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.btn svg { width:16px; height:16px; flex:none; }
.btn--primary, .btn.primary { background:var(--primary); border-color:var(--primary); color:var(--primary-text); }
.btn--primary:hover, .btn.primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
.btn--primary:active { background:var(--primary-active); }
.btn--ghost, .btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn--ghost:hover, .btn.ghost:hover { background:var(--surface-3); color:var(--heading); border-color:transparent; }
.btn--soft { background:var(--primary-softer); border-color:transparent; color:var(--primary-ink); }
.btn--soft:hover { background:var(--primary-soft); border-color:transparent; }
.btn--danger, .btn.danger { background:var(--bad-strong); border-color:var(--bad-strong); color:var(--white); }   /* Rogn 600 i begge univers: 6,4:1 med hvit */
.btn--danger:hover, .btn.danger:hover { background:var(--bad-strong-hover); border-color:var(--bad-strong-hover); }
.btn--danger-ghost { background:transparent; border-color:var(--bad-border); color:var(--bad); }
.btn--danger-ghost:hover { background:var(--bad-bg); }
.btn--success, .btn.success { background:var(--ok-strong); border-color:var(--ok-strong); color:var(--white); }
.btn--success:hover { background:var(--ok-strong-hover); border-color:var(--ok-strong-hover); }
.btn--sm, .btn.sm { height:28px; padding:0 10px; font-size:var(--fs-sm); }
.btn--lg { height:44px; padding:0 20px; font-size:var(--fs-md); border-radius:var(--radius); }
.btn--block, .btn.block { width:100%; }
.btn--icon { width:34px; padding:0; }
.btn--icon.btn--sm { width:28px; }
.btn kbd { margin-left:4px; }
.btn--ms svg { width:18px; height:18px; }
.btn-group { display:inline-flex; }
.btn-group .btn { border-radius:0; margin-left:-1px; }
.btn-group .btn:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); margin-left:0; }
.btn-group .btn:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

/* Merker: .badge er pille med prikk (status), .badge--plain uten prikk (kategori). .chip er valgbart filter. */
.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:600; line-height:1.5; white-space:nowrap; border:var(--stroke) solid var(--neutral-border); background:var(--neutral-bg); color:var(--neutral); }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.badge--ok, .badge.ok { background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok); }
.badge--warn, .badge.warn { background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn); }
.badge--bad, .badge.bad { background:var(--bad-bg); border-color:var(--bad-border); color:var(--bad); }
.badge--info, .badge.info { background:var(--info-bg); border-color:var(--info-border); color:var(--info); }
.badge--accent { background:var(--primary-softer); border-color:var(--primary-soft); color:var(--primary-ink); }
.badge--muted { color:var(--muted); }
.badge--plain::before, .badge.plain::before { display:none; }
.badge--ai { background:var(--primary-softer); border-color:transparent; color:var(--primary-ink); }
.badge--ai::before { display:none; }
/* Status som tekst med prikk (lettere enn pille i tabeller) */
.status { display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap; }
.status::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--neutral-fill); flex:none; }
.status--ok::before { background:var(--ok-fill); } .status--warn::before { background:var(--warn-fill); }
.status--bad::before { background:var(--bad-fill); } .status--info::before { background:var(--info-fill); }
.status--planned::before { background:var(--planned); } .status--locked::before { background:var(--locked); }
.status--pulse::before { animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.55; transform:scale(.8);} }

.chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:var(--radius-pill); border:var(--stroke) solid var(--border-2); background:var(--surface); color:var(--muted); font:inherit; font-size:var(--fs-sm); font-weight:500; cursor:pointer; white-space:nowrap; }
.chip:hover { border-color:var(--muted); color:var(--heading); }
.chip.on, .chip[aria-pressed="true"] { background:var(--heading); border-color:var(--heading); color:var(--inverse); }
.chip .x { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--white-15); }
.chip .count { font-size:var(--fs-xs); opacity:.8; }
.chips { display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* Faner (.tabs) bytter innhold på siden; segmentkontroll (.seg) bytter visning av samme innhold. */
.tabs { display:flex; gap:2px; border-bottom:var(--stroke) solid var(--border); }
.tabs a, .tabs button { position:relative; padding:9px 13px; font:inherit; font-weight:500; color:var(--muted); background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.tabs a:hover, .tabs button:hover { color:var(--heading); text-decoration:none; }
.tabs .active { color:var(--heading); border-bottom-color:var(--primary); font-weight:600; }
.tabs .cnt { font-size:var(--fs-xs); font-weight:600; padding:0 6px; border-radius:var(--radius-pill); background:var(--surface-3); color:var(--muted); }
.tabpanel { background:var(--surface); border:var(--stroke) solid var(--border); border-top:0; border-radius:0 0 var(--radius) var(--radius); }
.seg { display:inline-flex; padding:3px; background:var(--surface-3); border-radius:var(--radius-sm); gap:2px; }
.seg button, .seg a { padding:4px 12px; font:inherit; font-size:var(--fs-sm); font-weight:500; color:var(--muted); background:none; border:0; border-radius:var(--radius-xs); cursor:pointer; }
.seg .active { background:var(--surface); color:var(--heading); font-weight:600; box-shadow:var(--shadow-sm); }

/* Skjema: label over felt, .field med .help/.error, .fields-grid, .input-group, .search, .check, .switch, .opt-card. */
label, .label { display:block; font-size:var(--fs-sm); font-weight:600; color:var(--heading); margin-bottom:5px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .input {
  width:100%; height:34px; padding:0 10px; font:inherit; color:var(--text);
  background:var(--surface); border:var(--stroke) solid var(--control-border); border-radius:var(--radius-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { height:auto; min-height:88px; padding:8px 10px; resize:vertical; line-height:1.45; }
input:hover, select:hover, textarea:hover { border-color:var(--muted); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
input[aria-invalid="true"], .is-invalid { border-color:var(--bad-fill) !important; }
select { appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E3D48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
.theme-dark select, [data-theme="dark"] select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* Flervalg: <select multiple> og <select size> er LISTER, ikke felt. Uten dette
   arvet de høyde 34 px fra feltregelen og så ut som et vanlig tekstfelt med én
   synlig rad. Høyden er fri, så size bestemmer; uten size viser den ca. fem rader. */
select[multiple], select[size]:not([size="1"]) {
  height:auto; min-height:0; padding:var(--sp-1); line-height:1.5;
  background-image:none; overflow-y:auto;
}
/* Uten size: fem hele rader. Regnet ut fra radhøyden (linjehøyde + polstring)
   pluss listens egen polstring, så den treffer et helt antall rader. */
select[multiple]:not([size]) { min-height:calc(5 * (1.5em + 10px) + var(--sp-2)); }
select[multiple] option, select[size]:not([size="1"]) option {
  padding:5px 8px; border-radius:var(--radius-xs); color:var(--text);
}
/* option:checked trenger både farge og gradient: Chrome overstyrer background-color
   på valgte rader, men respekterer background-image. */
select[multiple] option:checked, select[size]:not([size="1"]) option:checked {
  background:var(--primary-soft) linear-gradient(0deg, var(--primary-soft), var(--primary-soft));
  color:var(--primary-ink); font-weight:600;
}
.field { display:flex; flex-direction:column; }
.field .help { font-size:var(--fs-xs); color:var(--muted); margin-top:4px; }
.field .error { font-size:var(--fs-xs); color:var(--bad); margin-top:4px; font-weight:500; }
.fields { display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,minmax(0,1fr)); }
.fields--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fields .span-2 { grid-column:span 2; }
@media (max-width:640px) { .fields, .fields--3 { grid-template-columns:1fr; } .fields .span-2 { grid-column:auto; } }

/* Felt på rad deler radene med naboene: etikett, kontroll og melding står på linje
   selv når én etikett brekker til to linjer. Uten dette satte hvert felt sin egen
   høyde ovenfra og ned, og en lang etikett dyttet kontrollen 17 px lenger ned enn
   naboens (meldt fra Wican Cron 28.09.2026).

   Fire soner: 1 etikett · 2 kontroll · 3 hjelpetekst · 4 feil (når begge finnes).
   Tomme soner er 0 px høye, så avstanden mellom feltrader er som før. row-gap er
   5 px fordi subgrid arver forelderens gap; kolonnegapet står urørt.
   Nettlesere uten subgrid beholder dagens oppførsel (@supports). */
@supports (grid-template-rows: subgrid) {
  .fields, .fields--3 { row-gap:5px; }
  .fields > .field { display:grid; grid-template-rows:subgrid; grid-row:span 4; align-content:start; }
  .fields > .field > label:not(.switch):not(.check) { grid-row:1; align-self:end; margin-bottom:0; }
  .fields > .field > :not(label):not(.help):not(.error):not(.spacer) { grid-row:2; }
  .fields > .field > .help, .fields > .field > .error { grid-row:3; margin-top:0; }
  .fields > .field > .help ~ .error { grid-row:4; }
}
.input-group { display:flex; }
.input-group > * { border-radius:0; }
.input-group > :first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.input-group > :last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .btn { margin-left:-1px; }
.input-addon { display:inline-flex; align-items:center; padding:0 10px; background:var(--surface-3); border:var(--stroke) solid var(--control-border); color:var(--muted); font-size:var(--fs-sm); white-space:nowrap; }
.search { display:flex; align-items:center; gap:8px; height:34px; padding:0 10px; background:var(--surface-2); border:var(--stroke) solid var(--border); border-radius:var(--radius-sm); color:var(--muted); }
.search input { border:0 !important; background:none !important; height:auto !important; padding:0 !important; box-shadow:none !important; flex:1; color:var(--text); }
.search svg { width:16px; height:16px; flex:none; }
.check { display:flex; align-items:center; gap:8px; font-size:var(--fs-base); font-weight:400; color:var(--text); cursor:pointer; margin:0; }
.check input { width:16px; height:16px; margin:0; accent-color:var(--primary); }
.switch { position:relative; display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer; user-select:none; margin:0; font-weight:400; color:var(--text); }
.switch input { position:absolute; left:0; top:50%; transform:translateY(-50%); width:36px; height:20px; opacity:0; margin:0; cursor:pointer; }
.switch .track { position:relative; width:36px; height:20px; flex:none; background:var(--control-border); border-radius:var(--radius-pill); transition:background var(--dur) var(--ease); }
.switch .track::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--white); transition:transform var(--dur) var(--ease); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .track { background:var(--switch-on); }
.switch input:checked + .track::after { transform:translateX(16px); }
.switch input:focus-visible + .track { outline:2px solid var(--primary); outline-offset:2px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:var(--stroke) solid var(--divider); }
.switch-row:last-child { border-bottom:0; }
.switch-row .t { font-weight:600; color:var(--heading); }
.switch-row .d { font-size:var(--fs-sm); color:var(--muted); }
.opt-cards { display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.opt-card { position:relative; display:block; padding:var(--sp-3) var(--sp-4); border:var(--stroke) solid var(--border-2); border-radius:var(--radius); background:var(--surface); cursor:pointer; font-weight:400; }
.opt-card input { position:absolute; opacity:0; }
.opt-card .t { font-weight:600; color:var(--heading); display:block; }
.opt-card .d { font-size:var(--fs-sm); color:var(--muted); }
.opt-card:has(input:checked) { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); background:var(--primary-softer); }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px var(--sp-5); font-size:var(--fs-base); margin:0; }
.kv dt { color:var(--muted); }
.kv dd { margin:0; color:var(--heading); font-weight:500; }
.kv--right dd { text-align:right; font-variant-numeric:tabular-nums; }
.dropzone { border:1.5px dashed var(--border-2); border-radius:var(--radius); padding:var(--sp-8) var(--sp-5); text-align:center; color:var(--muted); background:var(--surface-2); transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.dropzone.dragover, .dropzone:hover { border-color:var(--primary); background:var(--primary-softer); }
.dropzone .t { font-weight:600; color:var(--heading); }
.dropzone svg { width:28px; height:28px; color:var(--decor); margin-bottom:var(--sp-2); }

/* Tabeller: alltid i .table-wrap. th.sortable + .sort-asc/.sort-desc, td.num for tall, tr.clickable, .pager under. */
.table-tools { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.table-tools .search { max-width:320px; flex:1; min-width:180px; }
/* En tabell som er direkte barn av en flex- eller grid-beholder får
   min-width:auto og kan derfor ikke krympe under sin min-bredde. Da presser
   den beholderen ut i stedet, slik fakturaforhåndsvisningen i Wikai gjorde.
   Tette datatabeller hører uansett hjemme i .table-wrap, som ruller. */
.card > table, .card-body > table, .paper > table, .tabpanel > table { min-width:0; }
.table-wrap { overflow-x:auto; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
th { text-align:left; font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:var(--stroke) solid var(--border); background:var(--surface-2); white-space:nowrap; }
td { padding:10px 14px; border-bottom:var(--stroke) solid var(--divider); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--surface-2); }
tbody tr.clickable { cursor:pointer; }
tbody tr.selected td { background:var(--primary-softer); }
tfoot td { font-weight:600; background:var(--surface-2); border-top:var(--stroke) solid var(--border); color:var(--heading); }
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td .sub { display:block; font-size:var(--fs-sm); color:var(--muted); margin-top:1px; }
th.sortable { cursor:pointer; user-select:none; }
th.sortable::after { content:""; display:inline-block; width:0; height:0; margin-left:6px; border:4px solid transparent; border-top-color:var(--border-2); vertical-align:-3px; }
th.sort-asc::after { border-top-color:transparent; border-bottom-color:var(--heading); vertical-align:2px; }
th.sort-desc::after { border-top-color:var(--heading); }
.table--compact td, .table--compact th { padding:6px 10px; }
.table--sticky thead th { position:sticky; top:0; z-index:1; }
tr.group-row td { background:var(--surface-3); font-weight:600; color:var(--heading); font-size:var(--fs-sm); }
.pager { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); color:var(--muted); border-top:var(--stroke) solid var(--border); flex-wrap:wrap; }
.pager .pages { display:flex; gap:2px; }
.pager .pages button { min-width:28px; height:28px; padding:0 6px; border:0; background:none; border-radius:var(--radius-xs); font:inherit; font-size:var(--fs-sm); color:var(--muted); cursor:pointer; }
.pager .pages button.active { background:var(--heading); color:var(--inverse); font-weight:600; }
.pager .pages button:hover:not(.active) { background:var(--surface-3); }
.bulkbar { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-4); background:var(--heading); color:var(--inverse); border-radius:var(--radius-sm); font-weight:500; }
.bulkbar .btn { background:var(--white-10); border-color:transparent; color:var(--inverse); }
.bulkbar .btn:hover { background:var(--white-15); }

/* KPI: .kpi med .v (Manrope Light) og .l. Farget verdi kun ved semantikk (kpi--ok/warn/bad). */
.kpis { display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.kpi { position:relative; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:2px; min-width:0; }
.kpi .v { font-weight:300; font-size:var(--fs-3xl); line-height:1.05; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--heading); }
.kpi .v small { font-size:var(--fs-md); font-weight:400; color:var(--muted); margin-left:4px; letter-spacing:0; }
.kpi .l { font-size:var(--fs-sm); color:var(--muted); }
.kpi .delta { font-size:var(--fs-xs); font-weight:600; display:inline-flex; align-items:center; gap:3px; }
.kpi .delta.up { color:var(--ok); } .kpi .delta.down { color:var(--bad); } .kpi .delta.flat { color:var(--muted); }
.kpi--ok .v { color:var(--ok); } .kpi--warn .v { color:var(--warn); } .kpi--bad .v { color:var(--bad); }
.kpi.click { cursor:pointer; } .kpi.click:hover { border-color:var(--border-2); }
.kpi.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.kpi .spark { margin-top:var(--sp-2); }
.stat-strip { display:flex; gap:0; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); overflow-x:auto; }
.stat-strip .kpi { border:0; border-radius:0; border-right:var(--stroke) solid var(--border); flex:1; min-width:160px; }
.stat-strip .kpi:last-child { border-right:0; }

/* Hero: ett svar på «må jeg gjøre noe nå» øverst på driftspaneler. */
.hero { display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-5) var(--sp-6); border-radius:var(--radius); border:var(--stroke) solid var(--border); background:var(--surface); }
.hero .ring { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex:none; border:3px solid var(--neutral-fill); color:var(--neutral); }
.hero .ring svg { width:24px; height:24px; }
.hero .htitle { font-size:var(--fs-lg); font-weight:600; color:var(--heading); }
.hero .hsub { color:var(--muted); }
.hero.ok { border-color:var(--ok-border); } .hero.ok .ring { border-color:var(--ok-fill); color:var(--ok); }
.hero.warn { border-color:var(--warn-border); } .hero.warn .ring { border-color:var(--warn-fill); color:var(--warn); }
.hero.bad { border-color:var(--bad-border); } .hero.bad .ring { border-color:var(--bad-fill); color:var(--bad); }

/* Varsler: .alert i flaten, .banner på tvers av siden, .toast flyktig nederst til høyre (skjult til .show). */
.alert { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius); border:var(--stroke) solid var(--border); border-left:3px solid var(--decor); background:var(--surface); color:var(--text); }
.alert svg { width:18px; height:18px; flex:none; margin-top:1px; color:var(--decor); }
.alert b, .alert .t { color:var(--heading); font-weight:600; }
.alert--ok, .alert.ok { border-left-color:var(--ok-fill); } .alert--ok svg { color:var(--ok-fill); }
.alert--warn, .alert.warn { border-left-color:var(--warn-fill); } .alert--warn svg { color:var(--warn-fill); }
.alert--err, .alert--bad, .alert.error { border-left-color:var(--bad-fill); } .alert--err svg, .alert--bad svg { color:var(--bad-fill); }
.alert--info { border-left-color:var(--info-fill); } .alert--info svg { color:var(--info-fill); }
.banner { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5); line-height:1.45; font-weight:500; font-size:var(--fs-sm); background:var(--warn-bg); color:var(--warn); border-bottom:var(--stroke) solid var(--warn-border); }
/* Banneret er en stripe på tvers av siden. Det trenger luft: flere bannere skal ikke
   klistre seg sammen, og et banner inne i innholdet skal ikke ligge tett på nabo-
   blokkene. Som stripe rett under toppbaren (utenfor .container) står det fortsatt
   kant i kant, slik en global tilstandsstripe skal. .stack styrer selv med gap. */
.banner + .banner { margin-top:var(--sp-2); }
.container > .banner, .card-body > .banner { margin-block:var(--sp-5); }
.container > .banner:first-child, .card-body > .banner:first-child { margin-top:0; }
.container > .banner:last-child, .card-body > .banner:last-child { margin-bottom:0; }
.container > .banner + .banner, .card-body > .banner + .banner { margin-top:var(--sp-2); }
.banner--bad { background:var(--bad-bg); color:var(--bad); border-color:var(--bad-border); }
.banner--info { background:var(--info-bg); color:var(--info); border-color:var(--info-border); }
.toast { position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:60; display:flex; align-items:center; gap:var(--sp-3); padding:12px 16px; border-radius:var(--radius); background:var(--toast-bg); color:var(--toast-ink); box-shadow:var(--shadow-overlay); font-weight:500; max-width:380px;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  /* Toasten er alltid en mørk flate, også i lyst univers. Statusfargene settes
     derfor lokalt til lyse trinn, slik kassemodulen gjør for POS-skallet. */
  --ok-fill:var(--skog-400); --bad-fill:var(--rogn-300); --info-fill:var(--himmel-300);
}
.toast.show, .toast--inline { opacity:1; transform:none; pointer-events:auto; }
.toast.ok { border-left:3px solid var(--ok-fill); } .toast.err { border-left:3px solid var(--bad-fill); }
.toast.info { border-left:3px solid var(--info-fill); }
.toast svg { width:18px; height:18px; flex:none; }
.toast.ok svg { color:var(--ok-fill); } .toast.err svg { color:var(--bad-fill); }
.toast.info svg { color:var(--info-fill); }
.toast .undo { margin-left:auto; color:var(--toast-link); font-weight:600; background:none; border:0; font:inherit; cursor:pointer; }
.toast--inline { position:static; }

/* Overlays: eneste komponenter med skygge. .modal via .modal-overlay, .popover med .menu, .tooltip. */
/* [hidden] skal alltid vinne over komponentenes display (Wican.modal.close bruker det,
   og portaler skjuler .btn/.alert/flex-paneler med hidden). Global, så ingen komponent
   med display:flex/grid/inline-flex kan slå UA-regelen. */
[hidden] { display:none !important; }
.modal-overlay { position:fixed; inset:0; z-index:50; background:var(--overlay); display:grid; place-items:center; padding:var(--sp-5); }
.modal { width:min(520px,100%); max-height:90dvh; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-modal); border:var(--stroke) solid var(--border); overflow:hidden; }
.modal--wide { width:min(920px,100%); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-bottom:var(--stroke) solid var(--border); }
.modal-head h3 { margin:0; font-size:var(--fs-lg); }
.modal-body { padding:var(--sp-5); overflow:auto; }
.modal-foot { display:flex; justify-content:flex-end; gap:var(--sp-2); padding:var(--sp-3) var(--sp-5); border-top:var(--stroke) solid var(--border); background:var(--surface-2); }
.modal--inline { position:static; }
.popover { position:absolute; z-index:40; min-width:200px; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-overlay); padding:var(--sp-1); }
.popover--inline { position:static; display:inline-block; }
.menu { display:flex; flex-direction:column; }
.menu a, .menu button { display:flex; align-items:center; gap:var(--sp-2); padding:8px 10px; font:inherit; color:var(--text); background:none; border:0; border-radius:var(--radius-xs); text-align:left; cursor:pointer; width:100%; }
.menu a:hover, .menu button:hover { background:var(--surface-3); text-decoration:none; color:var(--heading); }
.menu .danger { color:var(--bad); }
.menu .sep { height:1px; background:var(--border); margin:4px 0; }
.menu svg { width:16px; height:16px; color:var(--muted); }
.menu kbd { margin-left:auto; }
.tooltip { display:inline-block; padding:4px 8px; border-radius:var(--radius-xs); background:var(--tooltip-bg); color:var(--toast-ink); font-size:var(--fs-xs); font-weight:500; }

/* Tilstander: .empty med ikon + tittel + handling, .spinner, .skel for lasting av kjent layout. */
.empty { text-align:center; padding:var(--sp-10) var(--sp-5); color:var(--muted); }
.empty svg { width:36px; height:36px; color:var(--decor); margin-bottom:var(--sp-3); }
.empty .t { font-weight:600; color:var(--heading); font-size:var(--fs-md); }
.empty .d { max-width:360px; margin:4px auto var(--sp-4); }
.spinner { width:18px; height:18px; border:2px solid var(--border-2); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.skel { background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-4) 50%, var(--surface-3) 75%); background-size:200% 100%; animation:skel 1.4s ease infinite; border-radius:var(--radius-xs); min-height:12px; }
.skel--text { height:12px; } .skel--title { height:20px; width:40%; } .skel--kpi { height:72px; }
@keyframes skel { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* Fremdrift: .bar/.bar-fill, --indeterminate for ukjent varighet, --stacked for fordeling. */
.bar { height:6px; background:var(--surface-4); border-radius:var(--radius-pill); overflow:hidden; }
.bar-fill { height:100%; background:var(--primary); border-radius:var(--radius-pill); transition:width var(--dur-slow) var(--ease); }
.bar-fill.ok { background:var(--ok-fill); } .bar-fill.warn { background:var(--warn-fill); } .bar-fill.bad { background:var(--bad-fill); }
.bar--indeterminate .bar-fill { width:40%; animation:indet 1.2s ease-in-out infinite; }
@keyframes indet { 0% { transform:translateX(-100%); } 100% { transform:translateX(260%); } }
.bar--thick { height:10px; }
.bar--stacked { display:flex; }
.bar--stacked span { height:100%; }

/* Statusløp: .rail viser hvor en sak står (planlagt=Krokus 400, pågår=Multe, klar=Skog, låst=Granitt). .steps er nummererte instruksjoner. */
.rail { display:flex; align-items:flex-start; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-4) var(--sp-4) var(--sp-3); overflow-x:auto; }
.rail .step { flex:1; min-width:100px; position:relative; text-align:center; }
.rail .step::before, .rail .step::after { content:""; position:absolute; top:6px; height:3px; width:50%; background:var(--surface-4); }
.rail .step::before { left:0; } .rail .step::after { right:0; }
.rail .step:first-child::before, .rail .step:last-child::after { display:none; }
.rail .dot { width:15px; height:15px; border-radius:50%; background:var(--surface); border:3px solid var(--surface-4); margin:0 auto 7px; position:relative; z-index:1; }
.rail .lbl { font-size:var(--fs-sm); font-weight:500; color:var(--muted); }
.rail .when { font-size:var(--fs-xs); color:var(--dim); }
.rail .step.done .dot { background:var(--primary); border-color:var(--primary); }
.rail .step.done::before, .rail .step.done::after { background:var(--primary); }
.rail .step.now .dot { border-color:var(--warn-fill); box-shadow:0 0 0 3px var(--warn-bg); }
.rail .step.now::before { background:var(--primary); }
.rail .step.now .lbl { color:var(--heading); font-weight:600; }
.rail .step.now.ok .dot { border-color:var(--ok-fill); box-shadow:0 0 0 3px var(--ok-bg); }
.rail .step.locked .dot { background:var(--locked); border-color:var(--locked); }
.steps { display:flex; flex-direction:column; gap:var(--sp-3); counter-reset:step; }
.steps .s { display:flex; gap:var(--sp-3); counter-increment:step; }
.steps .s::before { content:counter(step); width:26px; height:26px; border-radius:50%; background:var(--heading); color:var(--inverse); font-weight:600; font-size:var(--fs-sm); display:grid; place-items:center; flex:none; }

.steps .s .t { font-weight:600; color:var(--heading); }
.steps .s.done::before { content:""; background:var(--ok-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Tidslinje og liste: .timeline for hendelser med tidsstempel, .list for kompakte rader med .r til høyre. */
.timeline { position:relative; padding-left:22px; display:flex; flex-direction:column; gap:var(--sp-4); }
.timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--border); }
.timeline .ev { position:relative; }
.timeline .ev::before { content:""; position:absolute; left:-20px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--surface); border:2px solid var(--neutral-fill); }
.timeline .ev.ok::before { border-color:var(--ok-fill); background:var(--ok-fill); }
.timeline .ev.bad::before { border-color:var(--bad-fill); background:var(--bad-fill); }
.timeline .ev.warn::before { border-color:var(--warn-fill); background:var(--warn-fill); }
.timeline .ev.accent::before { border-color:var(--primary); background:var(--primary); }
.timeline .when { font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; }
.timeline .t { font-weight:600; color:var(--heading); }
.timeline .d { font-size:var(--fs-sm); color:var(--muted); }
.list { display:flex; flex-direction:column; }
.list .li { display:flex; align-items:center; gap:var(--sp-3); padding:10px var(--sp-4); border-bottom:var(--stroke) solid var(--divider); }
.list .li:last-child { border-bottom:0; }
.list .li .t { font-weight:500; color:var(--heading); }
.list .li .d { font-size:var(--fs-sm); color:var(--muted); }
.list .li .r { margin-left:auto; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Sammenleggbar: <details> med <summary>, innhold i .inner. */
details.fold, .card details, .list details { border:var(--stroke) solid var(--border); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; }
details.fold + details.fold { margin-top:var(--sp-2); }
details.fold summary, .card details summary { padding:10px var(--sp-4); cursor:pointer; font-weight:500; color:var(--heading); list-style:none; display:flex; align-items:center; gap:var(--sp-2); }
details.fold summary::-webkit-details-marker { display:none; }
details.fold summary::before { content:""; width:6px; height:6px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(-45deg); transition:transform var(--dur) var(--ease); flex:none; margin-left:2px; }
details.fold[open] summary::before { transform:rotate(45deg); }
details.fold[open] summary { border-bottom:var(--stroke) solid var(--border); }
details .inner { padding:var(--sp-3) var(--sp-4); }

/* Kommandopalett: Ctrl/Cmd+K. Bygges av Wican.palette(). */
.palette { width:min(640px,100%); background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-modal); border:var(--stroke) solid var(--border); overflow:hidden; }
.palette .search { border:0; border-bottom:var(--stroke) solid var(--border); border-radius:0; height:52px; padding:0 var(--sp-5); font-size:var(--fs-md); background:var(--surface); }
.palette .group { padding:var(--sp-2) var(--sp-3) var(--sp-1); font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.palette .item { display:flex; align-items:center; gap:var(--sp-3); padding:9px var(--sp-4); cursor:pointer; }
.palette .item:hover, .palette .item.active { background:var(--primary-softer); }
.palette .item svg { width:16px; height:16px; color:var(--muted); }
.palette .item .path { margin-left:auto; font-size:var(--fs-xs); color:var(--dim); }
.palette .foot { justify-content:flex-start; font-size:var(--fs-xs); gap:var(--sp-4); }

/* Diagrammer: klasser for inline SVG. Seriefargene --chart-1..8 deles med temaene for Chart.js og ECharts. */
.chart { width:100%; height:auto; display:block; overflow:visible; }
.chart .grid line { stroke:var(--chart-grid); stroke-width:1; }
.chart .axis text { fill:var(--chart-axis); font-size:11px; font-family:var(--font); }
.chart .s1 { fill:var(--chart-1); stroke:var(--chart-1); } .chart .s2 { fill:var(--chart-2); stroke:var(--chart-2); }
.chart .s3 { fill:var(--chart-3); stroke:var(--chart-3); } .chart .s4 { fill:var(--chart-4); stroke:var(--chart-4); }
.chart .s5 { fill:var(--chart-5); stroke:var(--chart-5); } .chart .s6 { fill:var(--chart-6); stroke:var(--chart-6); }
.chart .line { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chart .area { opacity:.14; stroke:none; }
.chart .bar-item { rx:2; }
.spark { display:block; width:100%; height:32px; }
.spark path { fill:none; stroke:var(--chart-1); stroke-width:1.75; stroke-linecap:round; }
.spark .fill { fill:var(--chart-1); opacity:.12; stroke:none; }
.spark .end { fill:var(--chart-1); }
.legend { display:flex; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-sm); color:var(--muted); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.barlist { display:flex; flex-direction:column; gap:var(--sp-2); }
.barlist .r { display:grid; grid-template-columns:minmax(80px,1fr) 3fr auto; gap:var(--sp-3); align-items:center; font-size:var(--fs-sm); }
.barlist .r .bar { height:8px; }
.barlist .r .v { font-variant-numeric:tabular-nums; color:var(--heading); font-weight:600; }
.donut { width:120px; height:120px; }
.donut circle { fill:none; stroke-width:14; }
.donut .track { stroke:var(--surface-4); }
.legend .s1 { background:var(--chart-1); } .legend .s2 { background:var(--chart-2); } .legend .s3 { background:var(--chart-3); } .legend .s4 { background:var(--chart-4); }
.legend .s5 { background:var(--chart-5); } .legend .s6 { background:var(--chart-6); } .legend .s7 { background:var(--chart-7); } .legend .s8 { background:var(--chart-8); }
.spark--ok path, .spark--ok .end { stroke:var(--ok-fill); fill:var(--ok-fill); } .spark--ok path { fill:none; } .spark--ok .fill { fill:var(--ok-fill); }
.spark--warn path, .spark--warn .end { stroke:var(--warn-fill); fill:var(--warn-fill); } .spark--warn path { fill:none; } .spark--warn .fill { fill:var(--warn-fill); }
.spark--bad path, .spark--bad .end { stroke:var(--bad-fill); fill:var(--bad-fill); } .spark--bad path { fill:none; } .spark--bad .fill { fill:var(--bad-fill); }
.donut .s1 { stroke:var(--chart-1); } .donut .s2 { stroke:var(--chart-2); } .donut .s3 { stroke:var(--chart-3); } .donut .s4 { stroke:var(--chart-4); } .donut .s5 { stroke:var(--chart-5); } .donut .s6 { stroke:var(--chart-6); }

/* Innlogging: .login-wrap + .card.login-card (kompakt) eller .login-split med merkevarebilde i mørkt univers. */
.login-wrap { min-height:calc(100dvh - var(--nav-h)); display:grid; place-items:center; padding:var(--sp-6) var(--sp-4); }
.login-card { width:min(400px,100%); padding:var(--sp-8) var(--sp-8) var(--sp-6); }
.login-head { text-align:center; margin-bottom:var(--sp-6); }
.login-head .brand-logo { height:22px; margin:0 auto var(--sp-4); }
.login-head h1 { font-size:var(--fs-xl); font-weight:600; }
.login-tagline { color:var(--muted); margin-top:4px; }
.login-divider { display:flex; align-items:center; gap:var(--sp-3); color:var(--dim); font-size:var(--fs-xs); margin:var(--sp-5) 0; }
.login-divider::before, .login-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.login-foot { text-align:center; font-size:var(--fs-xs); color:var(--dim); margin-top:var(--sp-5); }
.login-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100dvh; }
/* Bevisst unntak fra tokenregelen: innloggingsflaten er Wican-merket, ikke portalens
   flate. Granitt 900 og Krokus står fast i alle portaler, uansett data-accent og tema.
   Besluttet 30.09.2026. Alt annet på innloggingssiden følger portalens tokens. */
.login-split .visual { position:relative; overflow:hidden; background:var(--granitt-900); color:var(--white); padding:var(--sp-10); display:flex; flex-direction:column; justify-content:flex-end; }
.login-split .visual .shape { position:absolute; right:-18%; top:-22%; width:70%; aspect-ratio:1; border-radius:50%; background-size:cover; background-position:center; }
.login-split .visual .statement { font-size:var(--fs-3xl); font-weight:600; line-height:1.15; letter-spacing:-0.02em; position:relative; max-width:14em; }
.login-split .visual .kicker { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-xs); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--krokus-300); margin-bottom:var(--sp-4); position:relative; }
.login-split .visual .kicker::before { content:""; width:6px; height:14px; background:var(--krokus-400); transform:skewX(-18deg); }
.login-split .visual > img { height:22px; width:auto; align-self:flex-start; margin-top:var(--sp-8); position:relative; }
@media (max-width:820px) { .login-split { grid-template-columns:1fr; } .login-split .visual { display:none; } }

/* Diverse: KI-merke, FAB, diff, snarveiliste, kodeblokk med kopier, chat-bobler med kilder. */
.ai-badge { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:600; color:var(--primary-ink); }
.ai-badge svg { width:13px; height:13px; }
.fab { position:fixed; right:var(--sp-5); bottom:var(--sp-5); width:44px; height:44px; border-radius:50%; background:var(--heading); color:var(--inverse); display:grid; place-items:center; border:0; cursor:pointer; box-shadow:var(--shadow-overlay); z-index:35; }
.fab svg { width:20px; height:20px; }
.diff del { background:var(--bad-bg); color:var(--bad); text-decoration:line-through; }
.diff ins { background:var(--ok-bg); color:var(--ok); text-decoration:none; }
.shortcut-list { display:grid; grid-template-columns:auto 1fr; gap:8px var(--sp-4); align-items:center; font-size:var(--fs-sm); }
.code-block { position:relative; }
.code-block .copy { position:absolute; top:8px; right:8px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:var(--radius-sm); background:none; border:var(--stroke) solid var(--border-2); color:var(--muted); cursor:pointer; }
.theme-toggle:hover { background:var(--surface-3); color:var(--heading); }
.theme-toggle .ikon-mork { display:none; }
.theme-dark .theme-toggle .ikon-mork, [data-theme="dark"] .theme-toggle .ikon-mork { display:block; }
.theme-dark .theme-toggle .ikon-lys, [data-theme="dark"] .theme-toggle .ikon-lys { display:none; }
.bubble { max-width:72%; padding:10px 14px; border-radius:var(--radius-lg); background:var(--surface-3); color:var(--text); line-height:1.45; }
.bubble.user { margin-left:auto; background:var(--primary); color:var(--primary-text); border-bottom-right-radius:var(--radius-xs); }
.bubble.assistant { border-bottom-left-radius:var(--radius-xs); }
.bubble .meta { display:block; font-size:var(--fs-xs); opacity:.7; margin-top:4px; }
.chat { display:flex; flex-direction:column; gap:var(--sp-3); }
.sources { display:flex; gap:var(--sp-2); flex-wrap:wrap; font-size:var(--fs-xs); }
.sources a { padding:2px 8px; border:var(--stroke) solid var(--border); border-radius:var(--radius-pill); color:var(--muted); background:var(--surface); }

/* ── 8. Ikoner ──────────────────────────────────────────────────────────────
   Kuratert Lucide-utvalg (icons/sprite.svg og icons.js). 1,6 px strek i
   currentColor. Bruk: <svg class="ic"><use href="#i-search"/></svg>.
   Emoji brukes aldri som ikon. */
.ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-3px; }
.ic--sm { width:14px; height:14px; } .ic--md { width:18px; height:18px; } .ic--lg { width:22px; height:22px; } .ic--xl { width:28px; height:28px; }
.ic--ok { color:var(--ok-fill); } .ic--warn { color:var(--warn-fill); } .ic--bad { color:var(--bad-fill); } .ic--accent { color:var(--decor); }

/* ── 9. Hjelpere og utvidelser ──────────────────────────────────────────────
   Små, generelle klasser som skjermene i forslaget trengte på tvers av
   portaler. Alt bygger på tokens; ingen av dem er domenespesifikke. */
.statusbar { display:flex; align-items:center; gap:var(--sp-4); height:36px; padding:0 var(--sp-4); background:var(--surface); border-top:var(--stroke) solid var(--border); font-size:var(--fs-sm); color:var(--muted); }
.statusbar .status { font-weight:500; }
.paper { background:var(--paper); color:var(--paper-text); border:var(--stroke) solid var(--paper-border); border-radius:var(--radius); }
.paper .muted { color:var(--paper-muted); }
.input--sm, select.input--sm:not([multiple]):not([size]), input.input--sm { height:28px !important; padding:0 8px !important; font-size:var(--fs-sm) !important; }
select.input--sm[multiple], select.input--sm[size] { font-size:var(--fs-sm) !important; }
select.input--sm { padding-right:26px !important; background-position:right 6px center; }   /* plass til pilen */
.input--qty { text-align:center; width:64px !important; }
.input--auto { width:auto !important; }
.num--pos { color:var(--ok); font-weight:600; }
.num--neg { color:var(--bad); font-weight:600; }
.price-was { text-decoration:line-through; color:var(--muted); font-weight:400; margin-right:6px; font-variant-numeric:tabular-nums; }
.sum { font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; }
.counter { font-size:var(--fs-xs); font-variant-numeric:tabular-nums; color:var(--muted); font-weight:500; }
.counter.warn { color:var(--warn); } .counter.bad { color:var(--bad); }
.heat { display:grid; grid-template-columns:repeat(15,var(--heat-size,10px)); gap:2px; }
.heat i { width:var(--heat-size,10px); height:var(--heat-size,10px); border-radius:2px; background:var(--surface-4); display:block; }
.heat i.ok { background:var(--ok-fill); } .heat i.warn { background:var(--warn-fill); } .heat i.bad { background:var(--bad-fill); }
.heat--lg { --heat-size:14px; }
.table-tools .right { margin-left:auto; display:flex; gap:var(--sp-2); align-items:center; }
.status--paused::before { background:var(--neutral-fill); }
.btn--xl { height:56px; padding:0 24px; font-size:var(--fs-md); border-radius:var(--radius); }
.opt-btn { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:var(--sp-3) var(--sp-4); min-height:72px; text-align:left; background:var(--surface); border:var(--stroke) solid var(--border-2); border-radius:var(--radius); color:var(--text); font:inherit; cursor:pointer; }
.opt-btn:hover { border-color:var(--muted); background:var(--surface-2); }
.opt-btn.active, .opt-btn[aria-pressed="true"] { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); background:var(--primary-softer); }
.opt-btn .t { font-weight:600; color:var(--heading); }
.opt-btn .d { font-size:var(--fs-sm); color:var(--muted); }
.opt-btn .ic { color:var(--decor); }
.badge--sm { padding:0 6px; font-size:10px; }
.badge--sm::before { width:5px; height:5px; }
.card--flush .table-wrap { border:0; border-radius:0; }
.card--flush > .table-wrap:last-child, .tabpanel > :last-child { border-radius:0 0 var(--radius) var(--radius); }
.kv .ok { color:var(--ok); } .kv .bad { color:var(--bad); } .kv .warn { color:var(--warn); }
.check .badge { margin-left:auto; }
.list .li .stripe { width:3px; align-self:stretch; border-radius:2px; background:var(--decor); flex:none; }
.list .li .stripe.s1 { background:var(--chart-1); } .list .li .stripe.s2 { background:var(--chart-2); } .list .li .stripe.s3 { background:var(--chart-3); } .list .li .stripe.s4 { background:var(--chart-4); }
.bottomnav--always { display:grid; position:absolute; }
.modal--inline { position:static; width:100%; max-height:none; }
.topbar--compact { height:var(--nav-h-compact); padding:0 var(--sp-4); }
/* Avstandshjelpere (kun vertikale, 4-skalaen) */
.mt-2 { margin-top:var(--sp-2) !important; } .mt-3 { margin-top:var(--sp-3) !important; } .mt-4 { margin-top:var(--sp-4) !important; } .mt-5 { margin-top:var(--sp-5) !important; } .mt-6 { margin-top:var(--sp-6) !important; } .mt-8 { margin-top:var(--sp-8) !important; }
.mb-2 { margin-bottom:var(--sp-2) !important; } .mb-3 { margin-bottom:var(--sp-3) !important; } .mb-4 { margin-bottom:var(--sp-4) !important; } .mb-5 { margin-bottom:var(--sp-5) !important; } .mb-6 { margin-bottom:var(--sp-6) !important; } .mb-8 { margin-bottom:var(--sp-8) !important; }
.table-tools select, .pager select { width:auto; }
.bulkbar + .table-wrap { margin-top:var(--sp-2); }

/* ── 10. v2-kompatibilitet ──────────────────────────────────────────────────
   Nordisk v2-klasser som ikke finnes i v3-vokabularet, gjengitt med v3-tokens
   så eksisterende konsumenter ser riktige ut uten markup-endring. Nye flater
   skal bruke v3-navnene (kommentert per rad). Fjernes i v4. */
/* .stat/.totals -> .kpi/.kpis */
.totals { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-3); margin:var(--sp-1) 0; }
.stat { position:relative; background:var(--surface); border:var(--stroke) solid var(--border); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); }
.stat b, .kpi > .num, .kpi .num:not(td):not(th) { display:block; font-weight:300; font-size:var(--fs-3xl); line-height:1.05; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--heading); }
.stat span, .kpi .label { display:block; color:var(--muted); font-size:var(--fs-sm); margin-top:2px; }
.stat.good b { color:var(--ok); }
.stat.bad b { color:var(--bad); } .stat.bad { border-color:var(--bad-border); background:var(--bad-bg); }
.stat.click { cursor:pointer; transition:border-color var(--dur) var(--ease); } .stat.click:hover { border-color:var(--border-2); }
.stat.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.kpi .kpi-icon { position:absolute; top:var(--sp-4); right:var(--sp-4); color:var(--decor); }
/* .hero (v2-varianter) */
.hero .hbody { flex:1 1 auto; min-width:0; }
.hero.idle .ring { border-color:var(--neutral-fill); color:var(--neutral); }
/* .layout + lys .sidebar (v2) -> .shell--side + .sidenav. Sidemenyen er mørk i v3. */
.layout { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); flex:1; min-height:0; }
.layout .sidebar { position:static; height:auto; padding-top:var(--sp-3); }
.sidebar nav { display:flex; flex-direction:column; gap:1px; }
.sidebar nav a { display:flex; align-items:center; gap:var(--sp-3); padding:9px var(--sp-5) 9px calc(var(--sp-5) - 3px); color:var(--side-text); font-weight:500; border-left:3px solid transparent; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sidebar nav a:hover { background:var(--side-hover); color:var(--white); text-decoration:none; }
.sidebar nav a.active { background:var(--side-active); color:var(--white); border-left-color:var(--side-marker); font-weight:600; }
.sidebar nav a svg { width:17px; height:17px; flex:none; opacity:.85; }
.sidebar .nav-label, .sidebar-label { padding:var(--sp-4) var(--sp-5) var(--sp-1); font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--side-muted); }
@media (max-width:900px) { .layout { grid-template-columns:1fr; } .sidebar nav { flex-direction:row; flex-wrap:wrap; padding:0 var(--sp-3); } .sidebar nav a { border-left:0; border-bottom:3px solid transparent; padding:8px 10px; } .sidebar nav a.active { border-bottom-color:var(--side-marker); } }
/* Nav-kollaps (wilma): .topnav.has-collapse med .topnav-toggle + .topnav-links */
.topnav-links { display:flex; align-items:center; gap:2px; flex:1; min-width:0; }
.topnav-toggle { display:none; align-items:center; gap:var(--sp-2); background:none; border:0; cursor:pointer; color:var(--muted); font:inherit; font-weight:500; padding:8px 10px; border-radius:var(--radius-sm); }
.topnav-toggle:hover { color:var(--heading); background:var(--surface-3); }
.topnav-toggle svg { width:18px; height:18px; }
@media (max-width:1440px) {
  .topnav.has-collapse .topnav-links a svg, .topnav.has-collapse .topnav-links a img { display:none; }
  .topnav.has-collapse .topnav-links a { padding:8px 9px; }
}
@media (max-width:1100px) {
  .topnav.has-collapse { position:relative; flex:none; overflow:visible; }
  .topnav.has-collapse .topnav-toggle { display:inline-flex; }
  .topnav.has-collapse .topnav-links { display:none; position:absolute; top:calc(100% + 6px); right:0; flex-direction:column; align-items:stretch; gap:2px; min-width:230px; background:var(--surface); border:var(--stroke) solid var(--border); z-index:60; padding:var(--sp-1); border-radius:var(--radius); box-shadow:var(--shadow-overlay); }
  .topnav.has-collapse.open .topnav-links { display:flex; }
  .topnav.has-collapse .topnav-links a { padding:10px 12px; }
  .topnav.has-collapse .topnav-links a svg { display:inline-flex; }
  .topnav.has-collapse .topnav-links a.active::after { display:none; }
}
/* Toppbar-detaljer (wiva/wilma) */
.topbar .brand-row { display:flex; align-items:center; gap:var(--sp-2); }
.logout-form { display:inline-flex; margin:0; }
.avatar.initials { text-transform:uppercase; }
.navdot.off { background:var(--bad-fill); } .navdot.idle { background:var(--neutral-fill); }
/* Innlogging (v2-kort med ordmerke og «fra wican») */
.login-head .brand-row { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.login-head .brand-mark { height:40px; width:auto; }
.brand-name { font-size:var(--fs-3xl); font-weight:600; line-height:1; letter-spacing:-0.02em; color:var(--heading); }
.brand-by { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--muted); }
.brand-by img { height:15px; width:auto; display:block; }
.brand-by .logo-light { filter:none; }
[data-theme="dark"] .brand-by img, .theme-dark .brand-by img { filter:invert(1) hue-rotate(180deg) brightness(1.1); }
[data-theme="dark"] .brand-by .logo-light, .theme-dark .brand-by .logo-light { filter:none; }
.login-card form label { margin-top:var(--sp-1); }
.login-note, .login-sub { color:var(--muted); font-size:var(--fs-sm); text-align:center; margin:var(--sp-2) 0 0; }
.login-error { margin-bottom:var(--sp-4); }
.btn.ms-signin, .ms-signin { gap:var(--sp-2); } .btn.ms-signin svg, .ms-signin svg { flex:none; width:18px; height:18px; }
/* Knappe-alias: .btn--accent (Wican-lilla) er primærknappen i v3 */
.btn--accent, .btn.accent { background:var(--brand-violet); border-color:var(--brand-violet); color:var(--white); }
.btn--accent:hover, .btn.accent:hover { background:var(--brand-strong); border-color:var(--brand-strong); }
/* Skjema og hjelpetekst */
form .row > div, .row--fields > div { flex:1; min-width:160px; }
.fieldhelp { background:var(--surface-2); border:var(--stroke) solid var(--border); border-left:3px solid var(--decor); border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-4); font-size:var(--fs-base); color:var(--muted); line-height:1.6; }
.fieldhelp b { color:var(--heading); }
.fieldhelp code { background:var(--surface); border:var(--stroke) solid var(--border-2); color:var(--primary-ink); }
.fieldhelp dl { margin:var(--sp-2) 0 0; } .fieldhelp dt { font-weight:600; color:var(--heading); } .fieldhelp dd { margin:0 0 var(--sp-2); }
.table-tools .table-filter { max-width:280px; }
.card > h3 { margin-bottom:var(--sp-3); }
.loading { text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--muted); }
.modal-close { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:none; border:var(--stroke) solid var(--border); border-radius:var(--radius-sm); color:var(--muted); cursor:pointer; }
.modal-close:hover { background:var(--surface-3); color:var(--heading); }
.page-head > svg { color:var(--decor); flex:none; }
details:not(.fold) .inner { padding:var(--sp-3) var(--sp-4); }

/* ── 11. Utskrift, bevegelse og touch ─────────────────────────────────────── */
@media print {
  .topbar, .sidebar, .bottomnav, .foot, .fab, .toast, .table-tools, .pager, .bulkbar, .statusbar, .btn, .theme-toggle, .banner, .modal-overlay, .popover { display:none !important; }
  .shell--side { display:block; }
  body { background:var(--white); color:var(--granitt-900); font-size:11pt; }
  .container { max-width:none; padding:0; }
  .card, .table-wrap, .kpi, .stat, .alert { border-color:var(--sand-600); break-inside:avoid; box-shadow:none; }
  .table-wrap { overflow:visible; }
  th { background:none; }
  tr, .kpi, .rail, .timeline .ev { break-inside:avoid; }
  a { color:inherit; text-decoration:none; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.85em; color:var(--granitt-050); }
  .status::before, .badge::before, .heat i, .bar-fill { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media (pointer: coarse) {
  body { font-size:14px; }
  .btn { min-height:44px; } .btn--sm { min-height:36px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select:not([multiple]):not([size]) { min-height:44px; }
  .tabs a, .tabs button, .chip, .sidenav a, .topnav a, .menu a, .menu button { min-height:44px; }
  td, th { padding:12px 14px; }
  .switch .track { width:44px; height:24px; } .switch input { width:44px; height:24px; }
  .switch .track::after { width:20px; height:20px; } .switch input:checked + .track::after { transform:translateX(20px); }
}

/* ── 12. Tillegg fra JS- og eksempelrunden ───────────────────────────────── */
/* Toast-stabel (lages av Wican.toast): fast nederst til høyre, nyeste nederst */
.toast-stack { position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:60; display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-end; pointer-events:none; }
.toast-stack .toast { position:static; pointer-events:auto; }
/* Sidemeny på smal skjerm som overlay (Wican.nav.toggleSidebar setter .open + body.sidebar-open) */
@media (max-width:900px) {
  .sidebar.open { position:fixed; inset:0 auto 0 0; width:var(--side-w); height:100dvh; z-index:70; padding:var(--sp-5) 0 var(--sp-4); overflow-y:auto; box-shadow:var(--shadow-modal); }
  .sidebar.open .sidenav { flex-direction:column; padding:0; }
  .sidebar.open .sidenav a, .sidebar.open .sidenav button { border-left:3px solid transparent; border-bottom:0; padding:9px var(--sp-5) 9px calc(var(--sp-5) - 3px); }
  .sidebar.open .sidenav a.active { border-left-color:var(--side-marker); border-bottom-color:transparent; }
  .sidebar.open .sidenav-label, .sidebar.open .foot { display:block; }
  body.sidebar-open::before { content:""; position:fixed; inset:0; background:var(--overlay); z-index:65; }
}
.sidebar-toggle { display:none; }
@media (max-width:900px) { .sidebar-toggle { display:inline-flex; } }
/* Små avstandstrinn og fast firedelt KPI-rad */
.mt-1 { margin-top:var(--sp-1) !important; } .mb-1 { margin-bottom:var(--sp-1) !important; }
.kpis--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px) { .kpis--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .kpis--4 { grid-template-columns:1fr; } }
.pager .pages .dim { color:var(--dim); }
/* Klasser som Wican.palette og Wican.dropzone genererer */
.palette-list { max-height:min(60vh,480px); overflow-y:auto; padding:var(--sp-1) 0; }
.dz-files { margin-top:var(--sp-3); text-align:left; font-size:var(--fs-sm); display:flex; flex-direction:column; gap:4px; }
.dz-files .row { color:var(--text); }

/* ── 13. Feilflate: feil og advarsler skal synes på avstand ──────────────────
   Rød tekst alene forsvinner i en tabelltung flate. Feil får derfor en tonet
   flate og en 2 px kant, advarsler samme mønster svakere (8 prosent, 1 px).
   Fargen bærer aldri betydningen alene: bruk alltid tekst eller .status ved
   siden av. Brukes av VM Backup Monitor, Cron og Analyse. */
.kpi.kpi--bad, .hero.bad, .card.is-bad {
  background:color-mix(in srgb, var(--bad-fill) 14%, var(--surface));
  border:2px solid var(--bad-fill);
}
/* Tonefargen på KPI-verdien må slå v2-aliaset `.kpi .num:not(td):not(th)`
   (seksjon 10), som har høyere spesifisitet enn `.kpi--warn .v`. Uten disse
   linjene mister enhver KPI som bruker v2-markupen class="num" tonefargen. */
.kpi--ok .v, .kpi--ok > .num, .kpi--ok .num:not(td):not(th) { color:var(--ok); }
.kpi--warn .v, .kpi--warn > .num, .kpi--warn .num:not(td):not(th) { color:var(--warn); }
.kpi--bad .v, .kpi--bad > .num, .kpi--bad .num:not(td):not(th) { color:var(--bad); }
.kpi.kpi--bad .v, .kpi.kpi--bad .l { color:var(--bad); }
.kpi.kpi--bad .l { font-weight:600; }
.kpi.kpi--warn, .hero.warn, .card.is-warn {
  background:color-mix(in srgb, var(--warn-fill) 8%, var(--surface));
  border:var(--stroke) solid var(--warn-fill);
}
.kpi.kpi--warn .l { color:var(--warn); font-weight:600; }
.card.is-ok { border-color:var(--ok-border); }

/* Tabellrader: tonet flate og farget stripe i venstre kant */
tr.is-bad td { background:color-mix(in srgb, var(--bad-fill) 10%, var(--surface)); }
tr.is-bad:hover td { background:color-mix(in srgb, var(--bad-fill) 16%, var(--surface)); }
tr.is-bad td:first-child { box-shadow:inset 3px 0 0 var(--bad-fill); }
tr.is-warn td { background:color-mix(in srgb, var(--warn-fill) 7%, var(--surface)); }
tr.is-warn:hover td { background:color-mix(in srgb, var(--warn-fill) 12%, var(--surface)); }
tr.is-warn td:first-child { box-shadow:inset 3px 0 0 var(--warn-fill); }

/* Statusmerke i hjørnet av et kort: hake når alt er i orden, kryss ved feil.
   Krever position:relative på kortet (.card er ikke relativ som standard). */
.has-mark { position:relative; }
.card-mark {
  position:absolute; top:-10px; right:-10px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; z-index:1; border:2px solid var(--surface);
  background:var(--surface); color:var(--ok); box-shadow:var(--shadow-sm);
}
.card-mark svg { width:14px; height:14px; }
.card-mark--ok { border-color:var(--ok-fill); color:var(--ok); }
.card-mark--bad { background:var(--bad-fill); border-color:var(--bad-fill); color:var(--white); }
.card-mark--warn { background:var(--warn-fill); border-color:var(--warn-fill); color:var(--ink-on-fill); }
/* .card--flush har overflow:hidden (tabellkort), så et merke utenfor kanten
   klippes bort. Der legges merket innenfor i stedet. */
.card--flush.has-mark > .card-mark, .card--flush .card-mark { top:10px; right:10px; }