/* ============================================================================
   STRUKTUR — mått, skala, rytm och baskomponenter
   ----------------------------------------------------------------------------
   Den här filen innehåller INGEN palett. Färgerna kommer ur en identitetsfil
   i identiteter/, som definierar rollerna (--yta, --text, --accent …). Länka
   båda, plus typsnittsfilen som identiteten anger:

       <link rel="stylesheet" href="fonter.css">                 (Be Vietnam Pro)
       <link rel="stylesheet" href="identiteter/salvia.css">     (roller)
       <link rel="stylesheet" href="tokens.css">                 (den här)

   Ordningen spelar ingen roll — var() slår upp sitt värde när det används.

   Uppdelningen finns för att strukturen och identiteten har olika livslängd.
   Strukturen är MÄTT på spaceship.com med Playwright 2026-08-30 (rådata i
   kunder/nordens-invest-bygg/anbud-tredenborg/design/referens/tokens.json) och
   gäller oavsett vilken palett som körs: pillerform på alla knappar, höjderna
   34/40/48, vikt 700, alpha-dämpade ytor i stället för egna gråtoner, tight
   radhöjd på rubriker. Identiteten byts per projekt; strukturen gör det inte.

   Undantaget från "ingen färg här": de neutrala alpha-slöjorna och skuggan
   nedan. De är svart/vitt med genomskinlighet, alltså ingen palettfärg — det
   är spaceships eget grepp för att slippa en gråskala per identitet.

   Ban-listan i verktyg/skills/arbetsmetod/ban-lists/design.md gäller ovanpå:
   avvikelse från ett uppmätt värde är ett fel, inte ett förslag.
   ========================================================================== */

:root {
  /* ── Typskala ──────────────────────────────────────────────────────────
     Spaceships proportioner, nedskalade till dokumentbruk. Referensen körde
     72/74 på h1 och 32/40 på ingress. */
  --steg-hero:   clamp(38px, 6vw, 66px);
  --steg-h1:     clamp(30px, 4.4vw, 46px);
  --steg-h2:     clamp(23px, 3vw, 31px);
  --steg-h3:     19px;
  --steg-ingress:clamp(17px, 1.6vw, 21px);
  --steg-brod:   16.5px;
  --steg-liten:  14px;
  --steg-mikro:  12px;      /* golvet för läsbar text. Låg tidigare på 11.5px,
                               vilket krockade med design-self-verification-
                               skillens hårda 12px-golv. Skillen vinner: den
                               siffran kommer ur observerade fel, 11.5 kom ur
                               ingenting. granska.py läser golvet härifrån. */

  --radhojd-tat:  1.08;     /* rubriker */
  --radhojd-brod: 1.62;
  --radhojd-medel: 1.45;   /* mellanstora block: ingress, kortbrödtext */
  --sparr-rubrik: -0.02em;  /* spaceship körde -0.4px på 72px */
  --sparr-hero:   -0.03em;  /* tätare ju större graden — labben landade här */
  --sparr-etikett: 0.1em;

  /* ── Form ──────────────────────────────────────────────────────────────
     Pillerform är spaceships signatur — radius 9999px på ALLA knappar. */
  --radie-piller: 9999px;   /* uppmätt: spaceships signatur, byts aldrig */

  /* ── Hörnen: en spak för HELA systemet ────────────────────────────────
     Sätt data-horn på <html> eller <body>. Standard är "mjuk".

       <body data-horn="rund">

     --radie-kort är det enda formvärdet som ALDRIG mätts; spaceship gav bara
     pillerformen på knappar. Ett omätt värde ska vara ett val, inte ett
     påstående — därför en spak, och varje steg har en uppmätt referens:

       rata   0/0/0      denoutdoors, räta hörn på kort (REGLER §15)
       skarp  2/2/4      nine.se, radie 2 px
       mjuk   4/6/10     silver.se 4 px, carla.se 6 px
       rund   6/12/16    zimpler.com och treyd.io, båda 8 px   (STANDARD)
       stor   8/20/28    formue.no 15 px, schibsted.com 36 px

     Knapparna följer INTE med: pillerformen är uppmätt och är signaturen.
     Vill du ha räta knappar är det B2 i knapplabb — ett annat beslut. */
  --radie-liten:  6px;
  --radie-kort:  12px;   /* VALT av Sami 2026-09-14 — steget "rund" */
  --radie-stor:  16px;   /* paneler, band, rutnät — allt större än ett kort */

  /* ── Knappen ───────────────────────────────────────────────────────────
     HUSETS ANATOMI ÄR SPOONS, valt av Sami 2026-09-14. Uppmätt på spoon.se
     (med cookiedialogen borttagen först — Cookiebots knappar förorenade den
     första mätningen).

       nav        h37 · piller · vikt 600 · 14 px · sidopadding 16    UPPMÄTT
       primär     h43 · piller · vikt 600 · 14 px · sidopadding 32    UPPMÄTT
       sekundär   h45 · samma, kontur i stället för fyllning          UPPMÄTT

     Spoon har BARA två storlekar. Husets tredje steg (lg) finns för stora
     CTA:er som Spoon inte har — det är HÄRLETT, inte mätt, och märkt som sådant.
     Det ersätter spaceships 34/40/48 och vikt 700, som gällde till i dag.

     Sidopaddingen är det som gör mest: 32 px är dubbelt mot spaceships 14/20,
     och det är den luften som skiljer en kurerad knapp från en standardknapp. */
  --knapp-sm: 37px;      /* spoon.se nav, uppmätt */
  --knapp-md: 43px;      /* spoon.se primär, uppmätt */
  --knapp-lg: 52px;      /* [HÄRLETT] — spoon.se har ingen stor knapp */
  --knapp-pad-sm: 16px;  /* spoon.se nav, uppmätt */
  --knapp-pad-lg: 32px;  /* spoon.se primär och sekundär, uppmätt */
  --knapp-vikt: 600;     /* spoon.se, uppmätt (spaceship körde 700) */
  --knapp-grad: 14px;    /* spoon.se, uppmätt */

  /* ── Alpha-slöjor på KÄND yta ──────────────────────────────────────────
     För ytor som är mörka eller ljusa oavsett läge (t.ex. innehåll på
     --yta-djup). Ska ytan följa läget: använd --dampad/--dampad-hover, som
     identitetsfilen vänder åt rätt håll. */
  --dampad-pa-mork:    rgba(255, 255, 255, 0.12);
  --dampad-hover-mork: rgba(255, 255, 255, 0.18);
  --dampad-pa-ljus:    rgba(15, 15, 15, 0.06);
  --dampad-hover-ljus: rgba(15, 15, 15, 0.11);

  /* ── Vikter ────────────────────────────────────────────────────────────
     700 och 500 är uppmätta på spaceship (knappar respektive ingress).
     600 och 800 finns i Be Vietnam Pro och används som mellansteg. */
  --vikt-brod:    400;
  --vikt-medel:   500;   /* spaceship ingress, uppmätt */
  --vikt-halvfet: 600;
  --vikt-fet:     700;   /* spaceship knappar och rubriker, uppmätt */
  --vikt-tung:    800;

  /* ── Rörelse ───────────────────────────────────────────────────────────
     ALLA fyra tiderna och tre av kurvorna är tidssamplade på riktiga sajter
     2026-09-08. Fjärde kurvan är webbläsarens ease-out, uppmätt hos Klingit.
     Använd dem — en egen siffra här är ett fel, inte ett förslag. */
  --tid-snapp:  0s;      /* spaceship state-layer: byter utan fade */
  --tid-kvick:  .12s;    /* carla.se: färg, bakgrund, kant */
  --tid-normal: .2s;     /* schibsted.com invertering · denoutdoors korthover */
  --tid-lugn:   .4s;     /* silver.se kantvandring · den bildzoom */

  --kurva-standard: cubic-bezier(.4, 0, .2, 1);    /* denoutdoors, uppmätt */
  --kurva-expo:     cubic-bezier(.19, 1, .22, 1);  /* silver.se, uppmätt */
  --kurva-panel:    cubic-bezier(.55, 0, .35, 1);  /* spaceships megameny, uppmätt */
  --kurva-ut:       ease-out;                      /* klingit.com, uppmätt */

  /* ── Breddar ───────────────────────────────────────────────────────────
     --matt-text är den läsbara radlängden, en typografisk konvention
     (60-70 tecken) — inte ett mätvärde. Märkt som sådan. */
  --matt-text: 64ch;
  --matt-smal: 720px;

  /* ── Djupled ───────────────────────────────────────────────────────────
     Rörledning, inte smak: en fast trappa så att lager inte gissas per sida.
     [KONVENTION, ej uppmätt] */
  --z-bas:    1;
  --z-sticky: 10;
  --z-panel:  80;
  --z-over:   90;
  --z-topp:   100;

  /* ── Rytm ──────────────────────────────────────────────────────────── */
  --luft-1: 4px;   --luft-2: 8px;   --luft-3: 12px;  --luft-4: 16px;
  --luft-5: 24px;  --luft-6: 32px;  --luft-7: 48px;  --luft-8: 72px;

  --skugga: 0 1px 2px rgba(15, 15, 15, .05), 0 8px 24px -12px rgba(15, 15, 15, .18);
  --matt: 1120px;   /* max innehållsbredd */
}

/* Hörnspaken. Utanför :root så att den kan sättas på html ELLER body. */
[data-horn="rata"]  { --radie-liten: 0;    --radie-kort: 0;    --radie-stor: 0; }
[data-horn="skarp"] { --radie-liten: 2px;  --radie-kort: 2px;  --radie-stor: 4px; }
[data-horn="mjuk"]  { --radie-liten: 4px;  --radie-kort: 6px;  --radie-stor: 10px; }
[data-horn="rund"]  { --radie-liten: 6px;  --radie-kort: 12px; --radie-stor: 16px; }
[data-horn="stor"]  { --radie-liten: 8px;  --radie-kort: 20px; --radie-stor: 28px; }

/* ============================================================================
   Baskomponenter — det som annars byggs om varje gång
   ========================================================================== */

body {
  margin: 0;
  background: var(--yta);
  color: var(--text);
  font: 400 var(--steg-brod)/var(--radhojd-brod) var(--font-brod);
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--radhojd-tat);
  letter-spacing: var(--sparr-rubrik);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--steg-h1); font-weight: 700; }
h2 { font-size: var(--steg-h2); font-weight: 600; }
h3 { font-size: var(--steg-h3); font-weight: 600; letter-spacing: -0.01em; }

/* INGA EYEBROWS. Den lilla versala etiketten ovanför en rubrik används inte
   — 99 % av gångerna bär rubriken sig själv, och etiketten blir dekor som
   stjäl uppmärksamhet från det som faktiskt står. (REGLER.md §1.)
   Klassen finns kvar för de undantag där en verklig kategori måste märkas ut,
   t.ex. en statusrad i en tabell — aldrig som pynt över en rubrik. */
.etikett {
  font-family: var(--font-data);
  font-size: var(--steg-mikro);
  letter-spacing: var(--sparr-etikett);
  text-transform: uppercase;
  color: var(--text-svag);
}

/* Knappar: alltid piller, alltid vikt 700 (spaceship-mätt) */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: var(--knapp-md);
  padding: 0 var(--knapp-pad-lg);   /* 32 px är husets — sm drar ner till 16 */
  border: 0; border-radius: var(--radie-piller);
  font: var(--knapp-vikt) var(--knapp-grad)/1 var(--font-brod);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--tid-kvick) var(--kurva-standard);
}
/* De uppmätta höjderna är 34/40/48. Bara 48 klarar REGLER §11:s 44 px
   effektiva träffyta av sig själv — de andra två får en osynlig hitbox.
   Höjden är vad ögat ser, hitboxen är vad fingret träffar. */
.knapp { position: relative; }
.knapp::after { content: ""; position: absolute; inset: -1px 0; }   /* 43 + 2 = 45 */
.knapp--lg { height: var(--knapp-lg); }
.knapp--sm { height: var(--knapp-sm); padding: 0 var(--knapp-pad-sm); }
/* Den uppmätta höjden 34 px krockar med REGLER §11 (44 px effektiv träffyta).
   Båda gäller: höjden är vad ögat ser, hitboxen är vad fingret träffar.
   34 + 2x5 = 44. Utan den här raden faller varje sida med små knappar i
   granska.py:s touchmålskontroll, en och en, i varje projekt. */
.knapp--sm::after { inset: -4px 0; }                                 /* 37 + 8 = 45 */

/* --pa-accent, inte #fff: i mörkt läge är accenten ljus, och hårdkodad vit
   text gav då 2.55:1. Det var en riktig bugg i den odelade tokens.css. */
.knapp--primar   { background: var(--accent);   color: var(--pa-accent); }
.knapp--mork     { background: var(--yta-djup); color: var(--pa-djup); }
.knapp--dampad   { background: var(--dampad); color: var(--text); }
.knapp--dampad:hover { background: var(--dampad-hover); }
.knapp--spok     { background: transparent; color: var(--text-svag); }

/* Växlingsknapp. Saknades — varje sida har hittills definierat sitt eget
   tryckta läge, vilket är exakt den sortens dubblering uppdelningen finns för
   att hindra. Vilolaget är dämpat, tryckt är accenten. */
.knapp[aria-pressed] { background: var(--dampad); color: var(--text); }
.knapp[aria-pressed]:hover { background: var(--dampad-hover); }
.knapp[aria-pressed="true"] { background: var(--accent); color: var(--pa-accent); }

.knapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Chip: piller i litet format. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--radie-piller);
  background: var(--dampad); color: var(--text);
  font-size: var(--steg-liten); font-weight: 600;
}
.chip--accent { background: var(--accent); color: var(--pa-accent); }
.chip--ton    { background: var(--yta-ton); color: var(--pa-ton); }
.chip--gnista { background: var(--gnista); color: var(--pa-gnista); }

/* ── Djup yta ──────────────────────────────────────────────────────────────
   Mörkt taktslag i fullbredd. Allt inuti byter till på-djup-rollerna.

   Den viktiga raden är den sista: en accentfylld knapp eller chip PÅ den djupa
   ytan får en linje. Skälet är mätt, inte estetiskt — accenten är nästan alltid
   palettens mörkaste kulör, och --yta-djup är samma ände av paletten. Räknat
   2026-09-08 över elva paletter: NIO av dem har accenten under 3:1 mot djupytan,
   och sex av dem exakt 1,00 (samma färg). Utan linjen försvinner knappen helt
   och bara texten står kvar. Linjen ligger som inset-skugga, inte som border,
   så de uppmätta höjderna 34/40/48 inte växer med två pixlar. */
.djupyta {
  background: var(--yta-djup);
  color: var(--pa-djup);
  border-radius: var(--radie-stor);
  padding: var(--luft-6) var(--luft-5);
}
.djupyta .text-svag, .djupyta .dampad-text { color: var(--pa-djup-svag); }
.djupyta .god       { color: var(--god-pa-djup); }
.djupyta .varning   { color: var(--varning-pa-djup); }
.djupyta .allvarlig { color: var(--allvarlig-pa-djup); }
.djupyta .kritisk   { color: var(--kritisk-pa-djup); }
.djupyta .knapp--primar,
.djupyta .chip--accent { box-shadow: inset 0 0 0 1px var(--pa-djup); }

/* Höjdaren tar en HEL sektion, sparsamt — det är det som gör att den märks.
   Klingits syrliga gulgröna kan aldrig bära brödtext (1,09:1 mot deras kräm),
   så ytan bär sin egen på-färg precis som --yta-ton och --yta-djup. */
.hojdyta {
  background: var(--hojdare);
  color: var(--pa-hojdare);
  border-radius: var(--radie-stor);
  padding: var(--luft-6) var(--luft-5);
}

.kort {
  background: var(--yta);
  border: 1px solid var(--hairline);
  border-radius: var(--radie-kort);
  box-shadow: var(--skugga);
  padding: var(--luft-5);
}

/* ============================================================================
   Formulär
   ----------------------------------------------------------------------------
   Uppmätt 2026-09-08 på sex sajter. Två FAMILJER föll ut, inte en standard —
   därför en spak i stället för ett val åt dig:

     understreck   radie 0, ingen fyllning, bara en bottenlinje
                   schibsted.com h44 · carla.se h28 · denoutdoors (MATNINGAR)
     ruta          radie 5-8 px, 1 px kant runt om
                   klingit.com h50 r5px · treyd.io h56 r8px

   Sätt data-falt="ruta" på html eller body. Standard är understreck — den är
   mätt på tre av fyra källor och är dessutom DENs formulärfacit.

   16 px på fältets text är INTE en smaksak: alla sex sajter körde exakt 16,
   och under 16 zoomar iOS in sidan när fältet får fokus. Rör den inte. */
:root {
  --falt-hojd:  48px;    /* mellan de uppmätta 44 och 56 */
  --falt-grad:  16px;    /* uppmätt på samtliga · under 16 zoomar iOS */
  --falt-kant:  1px;
  --falt-fokus: 2px;     /* denoutdoors: hårlinje -> 2px vid fokus, uppmätt */
  --falt-radie: 0;
  --falt-yta:   transparent;
  --falt-pad:   0;
}
[data-falt="ruta"] {
  --falt-radie: var(--radie-kort);
  --falt-pad:   var(--luft-3);
}

.falt {
  display: block; width: 100%;
  height: var(--falt-hojd);
  padding: 0 var(--falt-pad);
  font: var(--vikt-brod) var(--falt-grad)/1.4 var(--font-brod);
  color: var(--text);
  background: var(--falt-yta);
  border: 0;
  border-bottom: var(--falt-kant) solid var(--hairline);
  border-radius: var(--falt-radie);
  transition: border-color var(--tid-kvick) var(--kurva-standard);
}
[data-falt="ruta"] .falt { border: var(--falt-kant) solid var(--hairline); }

.falt::placeholder { color: var(--text-svag); }
.falt:focus-visible {
  outline: none;
  border-color: var(--accent);
  border-bottom-width: var(--falt-fokus);
}
.falt:disabled { color: var(--text-svag); cursor: not-allowed; }
.falt[aria-invalid="true"] { border-color: var(--kritisk); }

/* textarea får växa, inte stå i en fast fälthöjd (uppmätt: 74 och 123 px) */
textarea.falt { height: auto; min-height: calc(var(--falt-hojd) * 1.6);
                padding: var(--luft-3) var(--falt-pad); resize: vertical; }

/* Etiketten står ÖVER fältet och är riktig text — inte en placeholder.
   En placeholder som etikett försvinner när man börjar skriva. */
.faltrad { display: grid; gap: var(--luft-2); margin-bottom: var(--luft-5); }
.faltrad > label { font-size: var(--steg-liten); font-weight: var(--vikt-halvfet); }
.faltrad > .hjalp { font-size: var(--steg-mikro); color: var(--text-svag); }
.faltrad > .fel   { font-size: var(--steg-mikro); color: var(--kritisk);
                    font-weight: var(--vikt-halvfet); }

/* Siffror i kolumn ska linjera. ALDRIG på body — tabularsiffror ger komma och
   punkt full sifferbredd, så löptext renderas "1 , 5 procent"
   (ban-listan 2026-08-31). */
table, .siffra { font-variant-numeric: tabular-nums; }

/* Brett innehåll skrollar i sin egen behållare — aldrig sidan i sidled. */
.skroll { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}