/* KOPI av den live nettsidens tokens: ~/Claude/x95/Nettside/ny/css/tokens.css (hentet 2026-11-11).
   Fasit er nettsiden. Endres den, kopier fila på nytt hit — ikke rett i kopien. Se apps/crm/README.md § Design. */
/* FiksFlyt — «Signal 2»
   Grafitt og betong er skallet. Signalfargen betyr én ting: «dette trenger deg».
   ALLE farger i hele retningen står her. HTML og SVG bruker bare var() / currentColor.
   Gråtonene er varm-nøytrale (R ≥ G ≥ B) — aldri blå undertone. */
/* Nettside/ny: Archivo ligger lokalt (ingen kall til Google før samtykke). Ellers ordrett kopi av runde6-signal/tokens.css. */
@font-face { font-family: "Archivo"; src: url("../font/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; 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+25B2, U+25A0, U+FEFF, U+FFFD; }

:root {
  /* ── Skallet ───────────────────────────────────────── */
  --grafitt:      #1D1C1A;  /* tekst, toppstripe        16,2:1 på flate · 14,2:1 på betong */
  --grafitt-2:    #2C2A27;  /* hevet flate på mørk grunn */
  --grafitt-3:    #3D3A36;  /* linjer på mørk grunn */
  --betong:       #ECEAE5;  /* sidegrunn */
  --flate:        #FAF9F6;  /* kort, meny, tabell */
  --flate-2:      #F2F0EB;  /* tabellhode, ikonplate */
  --tekst:        var(--grafitt);
  --tekst-2:      #57534C;  /* sekundær: 6,4:1 på betong · 7,3:1 på flate · 6,7:1 på flate-2 */
  --tekst-lys:    #FAF9F6;  /* tekst på grafitt */
  --tekst-lys-2:  #ADA89F;  /* dempet på grafitt 7,2:1 · på grafitt-2 6,1:1 */
  --linje:        #D9D5CC;
  --linje-sterk:  var(--grafitt);
  --feil:         #B3261E;  /* 6,2:1 på flate */

  /* ── Signal — bare «trenger deg» ───────────────────── */
  --signal:       #FF6B1A;  /* VESTORANSJE. Fyll, eller tekst på grafitt. Aldri tekst på lys grunn (2,7:1).
                               Grafitt på signal 6,0:1 · signal på grafitt 6,0:1 */
  --signal-pa:    var(--grafitt);   /* tekst/ikon som står PÅ signalfargen */
  --signal-svak:  #FFE2CF;  /* venter-/avvik-tint. Grafitt på denne 13,8:1 */
  --signal-tekst: #A8410C;  /* om signalet MÅ være tekst på lys grunn: 5,8:1 */
  --signal-hover: #FF7F38;

  /* ── Skygger (grafitt-tonet, aldri svart) ─────────── */
  --skygge-1: 0 1px 0 rgba(29,28,26,.06), 0 1px 2px rgba(29,28,26,.06);
  --skygge-2: 0 8px 24px rgba(29,28,26,.16);
  /* Bare testraden på merke.html: nøytrale «andre apper». Aldri i produktet. */
  --test-1: #3F7A55; --test-2: #B5473A; --test-3: #8A857D; --test-4: #3B6EA8; --test-5: #D9A93A; --test-6: #6D5BA3;
  --skygge-3: 0 24px 64px rgba(10,9,8,.6);    /* bare annonse: telefon på grafitt (varm, ikke svart) */

  /* ── Type — Archivo, TO vekter ─────────────────────── */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --w-normal: 400;
  --w-tung: 700;
  --bred: 112%;      /* font-stretch BARE på .display (sidetittel, annonseoverskrift). Alt annet normal bredde */
  /* Skala (≈ ×1,27). Ingen andre størrelser brukes. */
  --fs-xs: 13px;   /* etikett i versaler */
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-md: 21px;
  --fs-lg: 26px;
  --fs-xl: 34px;
  --fs-2xl: 44px;
  --fs-3xl: 64px;
  --fs-4xl: 88px;  /* annonse */
  --fs-5xl: 120px; /* annonse 1080 */

  /* ── Rom: 4 px-skala ───────────────────────────────── */
  --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; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ── Form ──────────────────────────────────────────── */
  --r-1: 2px;     /* knapper, chips */
  --r-2: 4px;     /* kort */
  --strek: 2px;
  --kant: 1px solid var(--linje);
  --kant-sterk: var(--strek) solid var(--linje-sterk);
  --trykk: 48px;  /* minste trykkflate i appen (krav 44) */
  --trykk-stor: 64px; /* Handyman: hansker */

  --mo-fast: 150ms; --mo-base: 250ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ── Grunnmur ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--betong); color: var(--tekst);
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.5;
  font-weight: var(--w-normal); -webkit-font-smoothing: antialiased;
}
b, strong, h1, h2, h3, h4, th { font-weight: var(--w-tung); }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
.display { font-stretch: var(--bred); font-weight: var(--w-tung); letter-spacing: -0.025em; }
.bred { font-weight: var(--w-tung); letter-spacing: -0.01em; }   /* fet, normal bredde */
.tall { font-variant-numeric: tabular-nums; }
.etikett { font-size: var(--fs-xs); font-weight: var(--w-tung); text-transform: uppercase;
           letter-spacing: 0.08em; line-height: 1.6; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--grafitt); outline-offset: 2px; box-shadow: 0 0 0 6px var(--signal); }

/* ── Ikonsettet: 24-rutenett, 2,25 strek, rette ender + ÉN massiv detalj ── */
.ikon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.25;
        stroke-linecap: square; stroke-linejoin: miter; flex: none; }
/* .m og .boble matcher inne i <symbol> (stilen følger originaltreet, ikke <use>) */
.m { fill: currentColor; stroke: none; }          /* den massive detaljen */

/* ── Merket ─────────────────────────────────────────── */
.boble { fill: var(--signal); stroke: var(--grafitt); stroke-width: 2; }
.vaeske { fill: var(--signal); }
.flis-g { fill: var(--grafitt); }
.ror-lys { stroke: var(--flate); }                                   /* libellens væske */
.strek-g { fill: none; stroke: var(--grafitt); stroke-width: 3; }
.boble-lys { fill: var(--flate); stroke: var(--grafitt); stroke-width: 2.5; }

/* ── Merket: Bølgehaken. Bølge = currentColor (grafitt på lys, flate på mørk), hake = signal ── */
.m-bolge, .m-hake { fill: none; stroke-width: 9; stroke-linecap: butt; stroke-linejoin: miter; }
.m-bolge { stroke: currentColor; }
.m-bolge.lys { stroke: var(--flate); }
.m-hake { stroke: var(--signal); }
/* Lås: merke + «FiksFlyt» i Archivo 700 */
.ordmerke { display: inline-flex; align-items: center; gap: 0.3em; font-weight: var(--w-tung); letter-spacing: -0.03em; white-space: nowrap; line-height: 1; }
.ordmerke .merke-svg { width: 1.25em; height: 1.25em; flex: none; overflow: visible; }

/* «Godkjent» er en fylt firkant (haken er merket nå) */
.form-firkant { width: 12px; height: 12px; background: currentColor; display: inline-block; flex: none; }

/* ── Signalprikken: signalfarge + grafitt-ring (synes på lys grunn, 3:1+ via ringen) ── */
.prikk { width: 12px; height: 12px; border-radius: 50%; background: var(--signal);
         box-shadow: inset 0 0 0 var(--strek) var(--grafitt); flex: none; display: inline-block; }

/* ── Toppstripa (felles for alle moduler) ───────────── */
.topp {
  height: 56px; background: var(--grafitt); color: var(--tekst-lys);
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4) 0 var(--sp-6);
  position: sticky; top: 0; z-index: 10;
}
.logo { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; min-height: 44px; }
.logo svg { width: 40px; height: 40px; flex: none; }
.logo .ordmerke { font-size: var(--fs-lg); }
.firma { color: var(--tekst-lys-2); font-size: var(--fs-sm); padding-left: var(--sp-4);
         border-left: 1px solid var(--grafitt-3); min-height: 24px; display: flex; align-items: center; }
.topp-sti { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--tekst-lys-2); }
.topp-sti strong { color: var(--tekst-lys); }
.topp-hoyre { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.topp-knapp {
  min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); background: transparent; border: 0; border-radius: var(--r-1);
  color: var(--tekst-lys); cursor: pointer; padding: 0 var(--sp-2); text-decoration: none;
}
.topp-knapp:hover { background: var(--grafitt-2); }
.profil-ring {
  width: 32px; height: 32px; border-radius: 50%; background: var(--tekst-lys); color: var(--grafitt);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--w-tung); letter-spacing: 0.04em;
}

/* ── Status: alltid form + ord ──────────────────────── */
.status { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px;
          font-size: var(--fs-sm); font-weight: var(--w-tung); white-space: nowrap; }
.status .ikon { width: 16px; height: 16px; stroke-width: 3; }
.form-ring { width: 12px; height: 12px; border-radius: 50%; border: var(--strek) solid var(--grafitt); display: inline-block; flex: none; }
.form-trekant { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
                border-bottom: 12px solid var(--grafitt); display: inline-block; flex: none; }

/* ── Knapper ────────────────────────────────────────── */
.knapp {
  min-height: var(--trykk); padding: 0 var(--sp-6); display: inline-flex; align-items: center;
  justify-content: center; gap: var(--sp-2); border-radius: var(--r-1); cursor: pointer;
  font-weight: var(--w-tung); font-size: var(--fs-base);
  border: var(--kant-sterk); background: var(--flate); color: var(--grafitt);
  transition: background var(--mo-fast) var(--ease);
  white-space: nowrap; text-decoration: none;
}
.knapp:hover { background: var(--flate-2); }
.knapp:active { transform: translateY(1px); }
/* Den ene fylte signalflaten på en skjerm: primærhandlingen */
.knapp.signal { background: var(--signal); border-color: var(--signal); color: var(--signal-pa); }
.knapp.signal:hover { background: var(--signal-hover); border-color: var(--signal-hover); }
.knapp.mork { background: var(--grafitt); color: var(--tekst-lys); }
.knapp.mork:hover { background: var(--grafitt-2); }
.knapp:disabled { background: var(--flate-2); border-color: var(--linje); color: var(--tekst-2); cursor: not-allowed; }