/* Søkesekvensen på forsiden. Tokens og geometri fra den vedlagte visningen,
   scoped under #soksekvens så sidens egne klasser (.kicker, .felt) ikke kolliderer.
   Inter hentes allerede av forsiden — ingen innbygde skrifter. */
#soksekvens {
  --surface:#fffefc; --ink:#1a1816; --dempet:#72706e; --substrat:#a3a19f;
  --hair:rgba(26,24,22,.22);
  --kort:#ffffff;
  /* Skygger i tre lag: kontaktskygge (skarp, tett), formskygge (mellom) og
     omgivelseslys (vid og svak). Det siste laget er det som gjør at kanten
     ikke slutter brått — uten det ser skyggen påklistret ut. */
  --hev-felt:0 1px 1px rgba(26,24,22,.04),0 3px 8px rgba(26,24,22,.04),
             0 10px 24px rgba(26,24,22,.035);
  --hev-kort:0 1px 2px rgba(26,24,22,.035),0 8px 20px rgba(26,24,22,.05),
             0 28px 64px rgba(26,24,22,.055);
  /* Dybdetrapp i søkestakken: søkefeltet er det primære og ligger høyest,
     de tilføyde adressene synker nedover — innrykket blir hierarki. */
  --hev-sok:0 1px 2px rgba(26,24,22,.05),0 6px 14px rgba(26,24,22,.055),
            0 18px 40px rgba(26,24,22,.05);
  --hev-a1:0 1px 2px rgba(26,24,22,.04),0 4px 10px rgba(26,24,22,.04),
           0 12px 26px rgba(26,24,22,.032);
  --hev-a2:0 1px 2px rgba(26,24,22,.035),0 3px 7px rgba(26,24,22,.032),
           0 8px 18px rgba(26,24,22,.025);
  --hev-a3:0 1px 1px rgba(26,24,22,.03),0 2px 5px rgba(26,24,22,.025),
           0 5px 12px rgba(26,24,22,.02);
  --luft:48px;      /* pusterom i klippeboksen, så skygger ikke kappes */
  --stakkB:488px;   /* innholdsbredden i diagrammet */
  /* Radius: nettstedets tokens (site.css, vedtatt 2026-08-02 — skarpere
     hjørner). Felter og flater på --r-lg, knapper på --r-sm — samme verdier
     som nav-platen og Book demo-knappen i naven (.tryfree). Pilleformen er
     forlatt: den fantes ikke ellers på siden og brøt systemet. */
  --r-lg:6px; --r-md:5px; --r-sm:4px;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
#soksekvens, #soksekvens * {box-sizing:border-box}
#soksekvens .scene {display:grid;grid-template-columns:minmax(280px,38%) 1fr;gap:64px;
  padding:24px 8% 80px;align-items:center}
#soksekvens .venstre h2 {margin:0 0 6px;font:400 clamp(26px,3.2vw,38px)/1.15 var(--font);
  letter-spacing:-.014em}
#soksekvens .venstre .under {margin:0 0 18px;font:400 15px/1.35 var(--font);color:var(--ink)}
#soksekvens .venstre p {margin:0 0 12px;font:300 14px/1.55 var(--font);color:var(--dempet);
  max-width:46ch}
/* Usynlig klippeboks med --luft rundt innholdet (skyggeplass), sentrert i
   kolonnen sin så det ikke blir dødt rom til høyre for diagrammet. */
#soksekvens .hoyre {position:relative;min-height:600px;overflow:hidden;padding:var(--luft);
  width:min(calc(var(--stakkB) + 2*var(--luft)),100%);margin-inline:auto;
  /* myk kant for glidingen: masken er tett i hele innholdssonen og toner
     bare ut over luftsonen — statisk innhold berøres ikke, men det som
     krysser kanten under sceneskiftet fader i stedet for å kuttes */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--luft),
    #000 calc(100% - var(--luft)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--luft),
    #000 calc(100% - var(--luft)),transparent 100%)}
#soksekvens .stakk, #soksekvens .rapwrap {position:absolute;top:var(--luft);left:var(--luft);
  width:min(var(--stakkB),calc(100% - 2*var(--luft)))}
#soksekvens .hoyre.drabar {cursor:grab;user-select:none;-webkit-user-select:none;
  touch-action:pan-y}
#soksekvens .hoyre.griper {cursor:grabbing}
/* felter — skissens geometri, Easy-tokens */
#soksekvens .felt {display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--kort);
  box-shadow:var(--hev-felt);
  padding:0 20px;font:400 14.5px/1 var(--font)}
#soksekvens .stat.felt {padding:0 16px}
#soksekvens .sokefelt {height:60px;font-size:15.5px;box-shadow:var(--hev-sok)}
#soksekvens .sokefelt .pluss {flex:none;width:22px;height:22px;border:1px solid var(--ink);
  border-radius:50%;display:grid;place-items:center;
  color:var(--ink);transform-origin:center}
#soksekvens .sokefelt .pluss svg {display:block}
/* underadressene: lavere felt, mer innrykk, tettere klynget — barn av
   hovedadressen, ikke sidestilte med den */
#soksekvens .adresserad {height:0;opacity:0;overflow:hidden;margin:0 0 0 26px}
#soksekvens .adresserad .felt {height:52px;font-size:14px;color:var(--ink);
  justify-content:flex-start;gap:12px}
/* tilleggs-symbolet: samme kryss som ⊕-knappen, dempet — radene ER
   tilleggene den la til */
#soksekvens .a-pluss {flex:none;color:var(--dempet)}
#soksekvens .a-pluss svg {display:block}
#soksekvens .a-venstre {display:flex;flex-direction:column;gap:3px;min-width:0}
#soksekvens .a-meta {font:400 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--dempet)}
#soksekvens .adresserad:nth-child(1) .felt {box-shadow:var(--hev-a1)}
#soksekvens .adresserad:nth-child(2) .felt {box-shadow:var(--hev-a2);
  border-color:rgba(26,24,22,.19)}
#soksekvens .adresserad:nth-child(3) .felt {box-shadow:var(--hev-a3);
  border-color:rgba(26,24,22,.16)}
#soksekvens .caret {display:inline-block;width:1px;height:1em;background:var(--ink);
  vertical-align:-.15em;margin-left:1px;opacity:0}
#soksekvens .sokknapp-rad {display:flex;justify-content:flex-end;margin:18px 0 0}
#soksekvens .sokknapp {height:38px;padding:0 24px;border-radius:var(--r-sm);background:var(--ink);
  color:var(--surface);font:500 12px/38px var(--font);letter-spacing:.14em;
  box-shadow:0 1px 2px rgba(26,24,22,.16),0 4px 10px rgba(26,24,22,.14),
             0 10px 24px rgba(26,24,22,.10);
  transform-origin:center;opacity:0}
/* arbeids-telleren: ankret som en summeringsrad — etikett venstre, tall
   høyre, hårlinje under. Innrykk 20px matcher feltenes indre marg, så
   tallet flukter med statfeltenes tallkolonne. */
#soksekvens .teller {display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;margin:40px 0 0;padding:0 20px 12px;
  border-bottom:1px solid var(--hair)}
#soksekvens .teller-label {font:400 10.5px/1.3 var(--font);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dempet)}
#soksekvens .teller b {font:400 20px/1.1 var(--font);letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums}
#soksekvens .statliste {margin:16px 0 0;display:flex;flex-direction:column;gap:14px}
#soksekvens .stat .navn {color:var(--ink);font-weight:400}
#soksekvens .stat {height:44px;font-size:14px}
#soksekvens .stat .verdi {color:var(--dempet);font-variant-numeric:tabular-nums;
  white-space:nowrap}
#soksekvens .stat .verdi.aktiv {color:var(--ink)}
/* rapportkortet */
#soksekvens .rapport {border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px 30px 24px;
  background:var(--kort);box-shadow:var(--hev-kort);
  display:flex;flex-direction:column}
#soksekvens .rapport .kicker {margin:0 0 10px;font:400 10px/1 var(--font);
  letter-spacing:.14em;text-transform:uppercase;color:var(--substrat)}
#soksekvens .rapport h3 {margin:0 0 4px;font:400 20px/1.2 var(--font);letter-spacing:-.01em}
#soksekvens .rapport .meta {margin:0 0 18px;font:300 12px/1.45 var(--font);color:var(--substrat)}
#soksekvens .rap-tall {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:0 0 6px;padding:0 0 14px}
#soksekvens .rap-tall b {display:block;font:400 18px/1.2 var(--font);color:var(--ink);
  font-variant-numeric:tabular-nums}
#soksekvens .rap-tall span {display:block;margin-top:3px;font:300 11px/1.3 var(--font);
  color:var(--dempet)}
/* radene deler kortets overskuddshøyde likt, så låst korthøyde ikke
   etterlater et dødt felt over kildeboksen */
#soksekvens .rap-rad {border-top:1px solid var(--hair);padding:10px 0;flex:1 0 auto;
  display:flex;flex-direction:column;justify-content:center}
/* radnavn venstre, antall høyre i blekk — samme lesekolonne som stat-
   feltene, og tallet mister ikke viktighet i grått */
#soksekvens .rap-navn {margin:0 0 4px;font:400 14px/1.3 var(--font);color:var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#soksekvens .rap-navn span {color:var(--ink);font-variant-numeric:tabular-nums}
/* beskrivelsen bryter FØR tallkolonnen: uten reservasjonen til høyre la
   teksten seg under antallet på linja over */
#soksekvens .rap-linje {margin:0;font:300 13px/1.5 var(--font);color:var(--dempet);
  padding-right:52px}
#soksekvens .rap-boks {border:1px solid var(--hair);border-radius:var(--r-sm);padding:13px 15px;
  margin:10px 0 0;font:300 12px/1.45 var(--font);color:var(--dempet)}
/* sluttproduktet: listene ut til Excel — tekstlinje, ikke knapp (svart er
   reservert for det klikkbare) */
#soksekvens .rap-eksport {display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;border-top:1px solid var(--hair);margin-top:12px;padding:12px 0 0;
  font:400 12.5px/1.4 var(--font);color:var(--ink)}
#soksekvens .rap-eksport .re-til {font-weight:500;white-space:nowrap}
#soksekvens .rap-rad:last-of-type {margin-bottom:10px}
@media (max-width:860px){
  #soksekvens .scene {grid-template-columns:1fr;gap:40px}
}