/* ============================================================================
   Kervence — «Dagslyssnittet, bebodd» (2026-09-01, seed 75e4935c)

   Verdenen: handelsdagen som et snitt gjennom et kalkhvitt hus. Sola vandrer
   gjennom rommene fra børsåpning til stenging; oppmerksomheten samler seg der
   lyset står. Eieren styrte renditionen organisk: vi står I huset, ikke over
   tegningen — kalkvarme flater, myke radier, buede pennelinjer. Snittets
   disiplin består: strukturlinjer, tidsstempler, annotasjoner, tabulære tall.

   Reglene som aldri brytes:
   - Gull er lys, ikke pynt: kun det aktive lyser. Ett opplyst element om gangen.
   - Datafarge (--opp/--ned) finnes bare i tall og kurver, aldri i dekor.
   - Skyggeblå er det tilbaketrukne: stengt marked, historikk, hvilende felt.
   - Tekst først: hver flate skal fungere som lesbar semantikk uten dette laget.
   - Overskrifter bærer seg selv: ingen kickers, ingen beskrivende undertekster.

   Laget lastes ETTER style.css og redefinerer fellestokens til lys verden;
   sidenes egne CSS-filer arver dermed temaet uten å vite om det.
   ========================================================================== */

/* ---------------------------------------------------------------- skrifter */
/* Bricolage Grotesque: display — organisk, vennlig, med karakter.
   Schibsted Grotesk: brødtekst/UI — norsk grotesk, varm og hverdagslig.
   Spline Sans Mono: KUN måling — tidsstempler, tabellkolonner, dimensjoner. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("vendor/fonts/BricolageGrotesque-Var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("vendor/fonts/SchibstedGrotesk-Var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("vendor/fonts/SchibstedGrotesk-Italic-Var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("vendor/fonts/SplineSansMono-Var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* --------------------------------------------------- verdens egne tokens */
  --kalk: #f4efe5;        /* grunnen: kalkbeige vegg i formiddagslys */
  --kalk-lys: #faf7f0;    /* opplyst flate — der innholdet bor */
  --kalk-dyp: #eae3d4;    /* skyggevegg — hvilende felt, skillerom */
  --kull: #26221b;        /* varm poché: snittkanten, primærtekst */
  --kull-myk: #4e463a;    /* sekundærtekst — alltid varm, aldri grå */
  --kull-svak: #6e6455;   /* etiketter, tertiærtekst (AA på kalk) */
  --sol: #d9a53c;         /* strålen: fyller flater, bærer aldri tekst */
  --sol-glod: #ecca82;    /* strålens kant, markeringsfarge */
  --sol-blekk: #8a6210;   /* sol som TEKST (lenker, aktive etiketter) */
  --skygge: #5b6b7c;      /* det tilbaketrukne: stengt, historisk */
  --skygge-svak: #93a0ac; /* skyggens kant, aldri løpende tekst */
  --mortel: #ddd6c7;      /* hairlines mellom rom */
  --stein: #a8a39a;       /* stein: foreløpig-tilstanden, matte markeringer */
  --kalk-grunn: #ded4bf;  /* skåret masse under gulvlinja */
  --natt: #0a111c;        /* nattehimmelen over kloden -- reisens grunn */
  --opp: #376b45;         /* data: stigning. Kun i tall og kurver. 5,47:1 mot --kalk (var
                             #3e7a4e = 4,47:1, under AA naar tallet staar rett paa grunnen) */
  --ned: #a94436;         /* data: fall. Kun i tall og kurver. */

  /* ------------------------------------------------- retheming av fellestokens
     (samme navn som style.css — alle sider arver lyset) */
  --bg: var(--kalk);
  --surface: var(--kalk-lys);
  --surface-raised: var(--kalk-dyp);
  --border: rgba(78, 70, 58, 0.16);
  --border-strong: rgba(78, 70, 58, 0.32);
  --text: var(--kull);
  --text-secondary: var(--kull-myk);
  --text-muted: var(--kull-svak);
  --gridline: #e6dfce;
  --accent: var(--sol-blekk);
  --accent-ink: var(--kalk-lys);
  --good: var(--opp);     /* samme farge som stigning -- ett token, én kontrastverdi */
  --warning: #8a5d0d;     /* 5,02:1 mot --kalk (var #96660f = 4,36:1, under AA) */
  --serious: #a94436;
  --critical: #8f2f23;

  --font-display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --font-sans: "Schibsted Grotesk", -apple-system, "Segoe UI", Helvetica, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* organisk formspråk: rundere enn tegnebrettet, aldri pille-UI overalt */
  --radius: 16px;
  --radius-rom: 22px;
  --radius-input: 11px;

  /* bevegelse (emil): raske, bestemte kurver; aldri ease-in */
  --ease-ut: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-flytt: cubic-bezier(0.77, 0, 0.175, 1);
  --tid-trykk: 140ms;
  --tid-ui: 200ms;
  --tid-rom: 380ms;

  color-scheme: light;
}

/* ------------------------------------------------------------------ grunnen */
/* Kalkvegg med dagslys ovenfra: to myke, varme glør — ingen falsk papirtekstur. */
body {
  background:
    radial-gradient(1200px 480px at 70% -6%, rgba(236, 202, 130, 0.34), transparent 62%),
    radial-gradient(900px 520px at 8% 4%, rgba(250, 247, 240, 0.85), transparent 58%),
    var(--kalk);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  color: var(--kull);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1, .display { font-weight: 640; line-height: 1.1; }
h2 { line-height: 1.15; }
/* Den gamle mørke verdens kvadrat-markør foran h2 hører ikke hjemme i dagslys. */
h2::before { content: none; }

/* nettleserflatene bærer også verdenen */
::selection { background: var(--sol-glod); color: var(--kull); }
input, textarea { caret-color: var(--sol-blekk); }
a { color: var(--sol-blekk); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sol-blekk);
  outline-offset: 2px;
  border-radius: 4px;
}
* { scrollbar-width: thin; scrollbar-color: var(--mortel) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--mortel); border-radius: 999px; border: 3px solid var(--kalk); }
::-webkit-scrollbar-thumb:hover { background: var(--kull-svak); }

/* tall er måling: alltid tabulære */
.tall, td.num, .mono, time { font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------------------- app-skallet */
/* Snittkanten: en tynn kull-poché øverst — kuttet gjennom huset. Innholdet
   under er det lyste rommet. */
.topbar {
  background: var(--kull);
  border-bottom: none;
  backdrop-filter: none;
}
.topbar a, .topbar .rail-brand__mark { color: var(--kalk-lys); }
.rail-brand__mark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 4px 2px;
}
.menu-trigger:hover { background: rgba(250, 247, 240, 0.12); }
.menu-trigger__bar { background: var(--kalk-dyp); }
.nav-panel {
  background: var(--kull);
  border-color: rgba(250, 247, 240, 0.12);
}
.nav-panel a { color: var(--kalk-dyp); }
.nav-panel a:hover { color: var(--kalk-lys); }
.nav-panel a.active { color: var(--sol-glod); }
.nav-panel a i { color: var(--skygge-svak); }

/* --------------------------------------------------------------- dagslinja */
/* Skallets signatur: handelsdagen 07–18 som ett lysbånd. Strålen står der
   klokka står (--dag-pos: 0..1, settes av dagslinje.js hvert minutt), med
   organiske, myke kanter. Fasen står alltid i klartekst — aldri farge alene. */
.dagslinje {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 24px;
  background: var(--kalk-dyp);
  border-bottom: 1px solid var(--mortel);
}
.dagslinje__spor {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(91, 107, 124, 0.28),
    rgba(91, 107, 124, 0.14) 18%,
    rgba(91, 107, 124, 0.14) 82%,
    rgba(91, 107, 124, 0.28));
  overflow: hidden;
}
.dagslinje__straale {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px 200% at calc(var(--dag-pos, 0.5) * 100%) 50%,
    var(--sol) 0%, var(--sol-glod) 34%, transparent 72%);
  transition: background var(--tid-rom) var(--ease-flytt);
}
.dagslinje--stengt .dagslinje__straale {
  background: radial-gradient(120px 200% at calc(var(--dag-pos, 0.5) * 100%) 50%,
    var(--skygge) 0%, var(--skygge-svak) 34%, transparent 72%);
  opacity: 0.55;
}
.dagslinje__merke {
  position: absolute;
  top: 50%;
  left: calc(var(--dag-pos, 0.5) * 100%);
  translate: -50% -50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--kalk-lys);
  border: 2.5px solid var(--sol-blekk);
  transition: left 60s linear; /* driver i sanntid mellom minuttoppdateringene */
}
.dagslinje--stengt .dagslinje__merke { border-color: var(--skygge); }
.dagslinje__fase {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--kull-myk);
  white-space: nowrap;
}
.dagslinje__fase strong { color: var(--kull); font-weight: 600; }
.dagslinje__tid { font-family: var(--font-mono); font-size: 0.72rem; color: var(--kull-svak); }
/* SC 2.1.1: flytteknappene ved siden av zoom-bryteren i avatarutsnittet. */
.pg-utsnitt__flytt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .dagslinje__merke { transition: none; }
}

/* ------------------------------------------------------------------- rom */
/* Et «rom» er verdenens kort: opplyst flate, myk varm skygge med ekte offset. */
.rom {
  background: var(--kalk-lys);
  border: 1px solid var(--mortel);
  border-radius: var(--radius-rom);
  box-shadow: 0 10px 28px -18px rgba(38, 34, 27, 0.35);
}
.rom--skygge { background: var(--kalk-dyp); box-shadow: none; }
.rom--lyser {
  border-color: var(--sol);
  box-shadow: 0 14px 34px -16px rgba(217, 165, 60, 0.45);
}

/* -------------------------------------------------------------- sidehode */
/* Ett hode for hver innsideside. Før dette hadde hver side sitt eget: .mk-head,
   .fc-head, .pg-head, .rp-head, .dr-head og en .brain-topbar med inline-stil -- seks
   containere for den samme jobben. Fire av dem hadde alt konvergert på samme typeskala,
   så det var ikke skriften som sprikte; det var boksen rundt den. Dashbordet var den
   eneste siden der overskriften satt i et eget rom med lysvask, og det er hele grunnen
   til at den så mer ferdig ut enn resten.
                                                                                  
   «Samme følelse, passende til sin funksjon» løses av --sone, som dybde.css allerede
   gir hver side: Markedet skyggeblå, Prognoser enggrønn, Rapporter plomme, Profil stein.
   Formen er identisk overalt; fargen er sidens egen. */
.sidehode {
  position: relative;
  margin: 30px 0 16px;
  padding: 26px 28px 22px;
  border-radius: var(--radius-rom);
  /* Samme materiale som dashbordets hilsen: halvdekkende kalk over grunnen, tolyset
     (sonen fra venstre, sola fra høyre) som ::before. Ikke opak -- kornet skinner
     gjennom slik det gjør på dashbordet. */
  background: rgba(250, 247, 240, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              0 12px 30px -22px rgba(38, 34, 27, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sidehode::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(60% 140% at 0% 50%, var(--sone) 0%, transparent 70%),
    radial-gradient(50% 140% at 100% 50%, var(--sone-sol) 0%, transparent 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--sone) 50%, transparent), rgba(246, 232, 200, 0.5));
}
.sidehode > * { position: relative; }
.sidehode h1 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

/* Høyre slot: sidens egen handling eller måling. Ingen undertittel -- DESIGN.md sin
   no-subtitle-regel gjelder her som overalt ellers, og to sider brøt den før dette. */
.sidehode__side {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
@media (max-width: 640px) {
  .sidehode { padding: 20px 20px 18px; margin-top: 20px; }
  .sidehode__side { margin-left: 0; }
}

/* ------------------------------------------------------------------ brett */
/* Mellomlaget fra dashbordet: halvgjennomsiktig, litt kjøligere brett rundt hver rad av
   rom, så rommene oppå leses som varmere og nærmere. Én klasse for alle sider; radformen
   (kolonner) settes av siden, brettet setter bare materialet og avstanden.
   Et brett der alt innhold er skjult (faner, ventende rapport) skjules selv. */
.brett {
  display: grid;
  gap: 18px;
  padding: 14px;
  border-radius: calc(var(--radius-rom) + 10px);
  background: linear-gradient(180deg, rgba(250, 247, 240, 0.34), rgba(216, 223, 231, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(38, 34, 27, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  align-items: stretch;
}
/* Ikke en [hidden]-lapp: dette skjuler BRETTET når alle rommene i det er skjult (faner, en
   rapport som ikke er hentet ennå), så det ikke står igjen en tom ramme. Selve
   [hidden]-elementene styres av den globale regelen; test_hidden_attribute skiller de to. */
.brett:not(:has(> :not([hidden]))) { display: none; }
.brett--rad { grid-template-columns: 7fr 5fr; }
.brett--halv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brett--rad > :only-child, .brett--halv > :only-child { grid-column: 1 / -1; }
.brett__side { display: grid; gap: 18px; align-content: start; }
/* Sidene stables som dashbordet: hode, så brett med 20px mellom. */
.sidestabel { display: grid; gap: 20px; align-content: start; }
@media (max-width: 900px) {
  .brett { padding: 10px; }
  .brett--rad, .brett--halv { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- annotasjon */
/* Snittets penn: skråstilt merknad med buet lederlinje ned til datapunktet.
   Brukes til «dagens innsikt» — setningen peker på tallet den beskriver. */
.annotasjon {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  color: var(--kull);
  font-size: 1.02rem;
}
.annotasjon mark {
  background: linear-gradient(transparent 58%, var(--sol-glod) 58%, var(--sol-glod) 92%, transparent 92%);
  color: inherit;
  padding: 0 1px;
}
.annotasjon__linje { stroke: var(--sol-blekk); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.annotasjon__punkt { fill: var(--sol-blekk); }

/* --------------------------------------------------------------- knapper */
.lys-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.95rem/1 var(--font-sans);
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform var(--tid-trykk) var(--ease-ut),
              box-shadow var(--tid-ui) var(--ease-ut),
              background-color var(--tid-ui) var(--ease-ut);
}
.lys-btn:active { transform: scale(0.97); }
.lys-btn--sol {
  background: var(--sol);
  color: var(--kull);
  box-shadow: 0 8px 20px -10px rgba(138, 98, 16, 0.45); /* sol-blekk-tint */
}
.lys-btn--sol:hover { background: var(--sol-glod); }
.lys-btn--kalk {
  background: transparent;
  color: var(--kull);
  border: 1.5px solid var(--border-strong);
}
.lys-btn--kalk:hover { background: var(--kalk-lys); border-color: var(--kull-svak); }
.lys-btn--kull { background: var(--kull); color: var(--kalk-lys); }
.lys-btn--kull:hover { background: #3a342a; }

/* --------------------------------------------------------------- måltall */
/* «Visualiser alle tall»: et måltall er aldri nakent — det får en dimensjons-
   strek som gir det romlig størrelse, som en målsetting på tegningen. */
.maal {
  display: grid;
  gap: 4px;
  font-variant-numeric: tabular-nums lining-nums;
}
.maal__verdi {
  font-family: var(--font-display); font-weight: 620; font-size: 1.7rem;
  color: var(--kull); line-height: 1.1;
  /* «+33 913 NOK» brakk som «+33 913 NO / K» i Urealisert-kortet. Mellomrommene
     i beloepet er tusenskilletegn, ikke ordskiller, saa verdien skal staa samlet. */
  text-wrap: nowrap;
}
.maal__navn { font-size: 0.8rem; color: var(--kull-svak); }
.maal__strek { position: relative; height: 4px; border-radius: 999px; background: var(--kalk-dyp); overflow: hidden; }
.maal__strek i {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--andel, 0) * 100%);
  border-radius: inherit;
  background: var(--skygge-svak);
}
.maal--opp .maal__strek i { background: var(--opp); }
.maal--ned .maal__strek i { background: var(--ned); }
.tall--opp { color: var(--opp); }
.tall--ned { color: var(--ned); }

/* ------------------------------------------------------------------ spør */
/* Chatten: en liten lapp i hjørnet. Alltid til stede, aldri masete. */
.spor-knapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 19px;
  border: none;
  border-radius: 999px;
  background: var(--kull);
  color: var(--kalk-lys);
  font: 600 0.92rem/1 var(--font-sans);
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(38, 34, 27, 0.5);
  transition: transform var(--tid-trykk) var(--ease-ut), box-shadow var(--tid-ui) var(--ease-ut);
}
.spor-knapp:hover { box-shadow: 0 18px 36px -12px rgba(38, 34, 27, 0.55); }
.spor-knapp:active { transform: scale(0.96); }

/* ---------------------------------------------------------------- maskott */
/* Den gule analytikeren (maskott.js). Én canvas per plass; boksen setter størrelsen. */
.maskott { display: block; pointer-events: none; }
.maskott canvas { display: block; width: 100% !important; height: 100% !important; }
.maskott--knapp { width: 34px; height: 36px; margin: -11px 0 -11px -8px; flex: none; }
.spor-panel__tittel { display: inline-flex; align-items: center; gap: 8px; }
.spor-panel__tittel .maskott--knapp { margin: -11px 0 -11px -4px; }
.maskott--rs { width: 60px; height: 66px; flex: none; margin-bottom: -6px; }
.produkt--hero { position: relative; }
.maskott--hero { pointer-events: auto; }
.maskott__flat { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Robert på inngangsdørene: over tittelen, sentrert. */
.maskott--vl { width: 150px; height: 160px; margin: -8px auto 4px; pointer-events: auto; }
/* Robert titter over kanten på innloggingskortet: canvasens bunn ligger på kortets overkant. */
.auth__card { position: relative; }
.auth:has(.maskott--auth) { padding-top: 150px; } /* plass til Robert over kortet */
.maskott--auth { position: absolute; right: 22px; top: -156px; width: 190px; height: 156px; margin: 0; pointer-events: auto; }
.maskott--auth .maskott-boble { transform: translate(-50%, -100%); }
/* position: relative er ankeret for snakkeboblen (maskott.js regner left/top i boksen). Uten den
   la boblen seg etter .avn__innhold og havnet til venstre for Robert, klippet ved 390 px. */
.maskott--avn { position: relative; width: 170px; height: 180px; margin: 0 auto 8px; pointer-events: auto; }
.maskott--ob { width: 150px; height: 160px; margin: 0 auto 4px; pointer-events: auto; }
/* Robert i kapitlene på landingen: i høyre marg av introen, over teksten. */
.produkt__intro:has(.maskott--kap) { grid-template-columns: 1fr 1fr 150px; }
.maskott--kap { order: 3; width: 150px; height: 165px; margin-top: -30px; pointer-events: auto; }
.priser__inn { position: relative; }
.maskott--kveld { position: absolute; right: 0; top: -40px; margin-top: 0; }
@media (max-width: 720px) {
  .maskott--kap { display: none; }
  .maskott--vl, .maskott--avn, .maskott--ob { width: 120px; height: 130px; }
  .maskott--auth { right: 8px; top: -120px; width: 150px; height: 120px; }
}
.maskott-boble {
  position: absolute; z-index: 3; transform: translate(-50%, -100%);
  background: var(--kalk-lys); color: var(--kull); border: 1.5px solid var(--kull);
  border-radius: 14px; padding: 8px 13px; font: 600 14px/1.3 var(--font-sans);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease-ut);
}
.maskott-boble::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 11px; height: 11px;
  background: inherit; border-right: 1.5px solid var(--kull); border-bottom: 1.5px solid var(--kull);
  transform: translateX(-50%) rotate(45deg);
}
.maskott-boble.er-synlig { opacity: 1; }
.maskott--hero {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: -34px;
  height: clamp(150px, 22vw, 230px);
}
@media (max-width: 720px) {
  .maskott--hero { height: 130px; bottom: -26px; }
}

.spor-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: min(400px, calc(100vw - 36px));
  height: min(560px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  background: var(--kalk-lys);
  border: 1px solid var(--mortel);
  border-radius: var(--radius-rom);
  box-shadow: 0 24px 60px -20px rgba(38, 34, 27, 0.45);
  overflow: hidden;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: bottom right;
  transition: transform var(--tid-rom) var(--ease-ut), opacity var(--tid-ui) var(--ease-ut);
}
@starting-style {
  .spor-panel { opacity: 0; transform: translateY(14px) scale(0.96); }
}
.spor-panel__topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--kull);
  color: var(--kalk-lys);
  font: 600 0.95rem/1 var(--font-sans);
}
.spor-panel__lukk { background: none; border: none; color: var(--kalk-dyp); cursor: pointer; padding: 4px; border-radius: 6px; }
.spor-panel__lukk svg { display: block; width: 20px; height: 20px; }
.spor-panel__lukk:hover { color: var(--kalk-lys); }
.spor-panel__logg { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.spor-melding { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 0.93rem; line-height: 1.5; }
.spor-melding--meg { align-self: flex-end; background: var(--kalk-dyp); color: var(--kull); border-bottom-right-radius: 5px; }
.spor-melding--ai { align-self: flex-start; background: var(--kalk); border: 1px solid var(--mortel); color: var(--kull); border-bottom-left-radius: 5px; }
.spor-melding--venter { color: var(--kull-svak); font-style: italic; }
/* Tokenkvoten nådd: kjøpsknappen står under avslaget (static/tokens.js). */
.spor-kvote { align-self: flex-start; }
/* Prognosene er betaversjon under utvikling (eier 2026-09-11). Samme merke i menyen, på
   prognosesiden, på selskapssiden, i 5D-seksjonen og på dashbordet. */
.beta-merke { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--sol); border-radius: 999px; background: color-mix(in srgb, var(--sol) 22%, var(--kalk-lys)); color: var(--kull); font-size: 0.62em; font-weight: 600; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; vertical-align: middle; }
.beta-notis { max-width: 62ch; margin: 8px 0 0; font-size: 0.92rem; color: var(--kull-myk); }
/* I sidetittelen ble 0.62em 26 px og leste som en del av tittelen, ikke et merke. */
h1 .beta-merke { font-size: 13px; vertical-align: 0.9em; }
.tk-kjop { margin-top: 0.6rem; }
.spor-kvote .tk-kjop { margin-top: 0; }

/* Tokenpakker (static/tokens.js): samme dialog som porteføljens .pf-dialog, men her i det
   globale arket, fordi grensen kan nås fra Spør på hvilken som helst side. */
.tk-dialog {
  border: 1px solid var(--mortel);
  border-radius: var(--radius-rom);
  background: var(--kalk-lys);
  color: var(--kull);
  padding: 1.5rem;
  width: min(26rem, calc(100vw - 2rem));
  font-family: var(--font-sans);
  box-shadow: 0 24px 60px -20px rgba(38, 34, 27, 0.45);
}
.tk-dialog::backdrop { background: rgba(38, 34, 27, 0.4); backdrop-filter: blur(3px); }
.tk-dialog__tittel {
  margin: 0 0 0.4rem; font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 640; letter-spacing: -0.015em; color: var(--kull);
}
.tk-dialog__lede { margin: 0 0 1rem; font-size: 0.83rem; color: var(--kull-myk); line-height: 1.6; }
.tk-pakker { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.5rem; }
.tk-pakker legend { padding: 0; margin-bottom: 0.4rem; font-size: 0.76rem; color: var(--kull-svak); }
.tk-pakke {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; cursor: pointer;
  border: 1.5px solid var(--mortel); border-radius: var(--radius); background: var(--kalk);
}
.tk-pakke:has(input:checked) { border-color: var(--sol); background: var(--kalk-lys); box-shadow: inset 0 0 0 1px var(--sol); }
.tk-pakke:has(input:focus-visible) { outline: 2px solid var(--sol); outline-offset: 2px; }
.tk-pakke input { margin: 0; accent-color: var(--sol-blekk); }
.tk-pakke__tekst { flex: 1; display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums lining-nums; }
.tk-pakke__pris { color: var(--kull-myk); }
.tk-melding { margin: 0.8rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--kull-myk); }
.tk-melding:empty { display: none; }
.tk-melding a { color: var(--sol-blekk); }
.tk-dialog__knapper { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .tk-dialog[open] { animation: tk-inn 0.26s var(--ease-ut) both; }
}
@keyframes tk-inn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.spor-panel__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--mortel); }
.spor-panel__inn {
  flex: 1;
  border: 1.5px solid var(--mortel);
  border-radius: 999px;
  padding: 10px 16px;
  font: 400 0.93rem/1.4 var(--font-sans);
  background: var(--kalk);
  color: var(--kull);
}
.spor-panel__inn:focus { outline: none; border-color: var(--sol-blekk); }
.spor-panel__send {
  border: none; border-radius: 999px; width: 42px; height: 42px;
  background: var(--sol); color: var(--kull); cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--tid-trykk) var(--ease-ut), background-color var(--tid-ui) var(--ease-ut);
}
.spor-panel__send:hover { background: var(--sol-glod); }
.spor-panel__send:active { transform: scale(0.94); }
.spor-panel__send:disabled { background: var(--kalk-dyp); color: var(--kull-svak); cursor: default; }

/* --------------------------------------------------------- små justeringer */
/* Den gamle mørke verdens rene-hvite tekstklasser og glass-effekter nulles der
   de ville lyst feil i dagslys. */
.topbar { box-shadow: 0 1px 0 rgba(38, 34, 27, 0.2); }

/* ================================================================== glass */
/* Apple-materialet i dagslysverdenen: kalk-lys glass som flyter over rommet.
   Regler (apple-design §12): innhold scroller UNDER, aldri to lyse glass
   stablet, større flate = tykkere (mer blur + dypere skygge), lys toppkant =
   lyset som treffer materialet. Vibrancy: tekst på glass er kull med et lite
   sporingsløft, aldri grå. */
:root {
  --glass-bg: rgba(250, 247, 240, 0.72);
  --glass-bg-tung: rgba(250, 247, 240, 0.78);
  --glass-kant: rgba(255, 255, 255, 0.75);
  --glass-skygge: 0 18px 40px -18px rgba(38, 34, 27, 0.35);
  --glass-blur: 22px;
  /* CSS-fjær for ikke-gesturell entré (linear()-tilnærmet kritisk dempet fjær,
     response ~0.35s). Gesturelt bruker fjaer.js. */
  --fjaer-ut: linear(0, 0.2178 2.1%, 0.5872 5.4%, 0.9663 9.9%, 1.0966 13%,
    1.1327 15.2%, 1.1352 16.4%, 1.1191 18.5%, 1.0407 25%, 1.0021 30.4%,
    0.9863 36.2%, 0.9959 49%, 1.0015 62%, 1 100%);
  --fjaer-rolig: linear(0, 0.3924 5.5%, 0.7477 11.3%, 0.9451 17.4%,
    1.0203 24.2%, 1.0304 31%, 1.0102 44.3%, 1.0004 61.2%, 1 100%);
}
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-kant);
  box-shadow: var(--glass-skygge), inset 0 1px 0 rgba(255,255,255,0.6);
}
.glass--tung {
  background: var(--glass-bg-tung);
  --glass-blur: 30px;
}
.glass .vibrant, .glass a, .glass button {
  color: var(--kull);
  font-weight: 560;
  letter-spacing: 0.01em;
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--tung {
    background: var(--kalk-lys);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .glass, .glass--tung {
    background: var(--kalk-lys);
    border: 1.5px solid var(--kull-svak);
  }
}

/* ------------------------------------------------------- skjelett-lasting */
/* Skeletons i verdens materialer: kalk-dyp base med en sol-varm skimmer som
   vandrer -- lyset leter etter innholdet. Bruk aria-busy på beholderen. */
.skjelett {
  position: relative;
  overflow: hidden;
  background: var(--kalk-dyp);
  border-radius: 10px;
  color: transparent !important;
  user-select: none;
}
.skjelett::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: -100% 0;
  background: linear-gradient(100deg, transparent 20%,
    rgba(236, 202, 130, 0.35) 50%, transparent 80%);
  animation: skjelett-skimmer 1.5s var(--ease-flytt) infinite;
}
.skjelett--tekst { height: 1em; margin-block: 0.25em; }
.skjelett--tall { height: 1.9em; width: 6ch; }
.skjelett--kurve { height: 120px; border-radius: var(--radius); }
@keyframes skjelett-skimmer { to { translate: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skjelett::after { animation: none; opacity: 0.5; translate: 0 0; }
}

/* ------------------------------------------------- side-til-side-overgang */
/* MPA View Transitions: rolig kryssfading med et lite løft -- samme bane inn
   og ut (apple-design §7). Nettlesere uten støtte ignorerer alt. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-ut 260ms var(--ease-ut) both;
}
::view-transition-new(root) {
  animation: vt-inn 320ms var(--ease-ut) both;
}
@keyframes vt-ut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-inn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 150ms;
  }
  @keyframes vt-ut { to { opacity: 0; transform: none; } }
  @keyframes vt-inn { from { opacity: 0; transform: none; } }
}

/* ------------------------------------------------------------- tekstrom */
/* «Containere til å bære tekst»: løpende tekst bor i et rom, aldri rett på
   veggen. Fargeteoretisk lagdeling: grunn (kalk) -> rom (kalk-lys, varmere og
   lysere = nærmere) -> aksent (sol) -- avstand kodes som varme og letthet. */
.tekstrom {
  background: var(--kalk-lys);
  border: 1px solid var(--mortel);
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 68ch;
}
.tekstrom--skygge { background: var(--kalk-dyp); border-color: transparent; }

/* ------------------------------------------------------------- brødsmule */
.brodsmule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--kull-svak);
  margin: 3rem 0 18px;
}
.brodsmule a { color: var(--kull-myk); text-underline-offset: 3px; }
.brodsmule a:hover { color: var(--sol-blekk); }
.brodsmule span[aria-current] { color: var(--kull); font-weight: 600; }
.brodsmule span[aria-hidden] { color: var(--skygge-svak); }

/* ------------------------------------------------------------- firmalogo
   Monogram: initialer på en rolig, on-brand tint utledet stabilt fra tickeren.
   Ekte logo (scripts/hent_logoer.py) kommer som --logo og tegnes i ::after over bokstavene.
   Bildet er ugjennomsiktig og dekker dem; mangler filen, er laget tomt og bokstavene står. */
.firma-logo {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  inline-size: 2.15rem;
  block-size: 2.15rem;
  border-radius: 30% / 32%;         /* superellipse-aktig, ikke sirkel */
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgb(38 34 27 / 0.06);
  position: relative;
  overflow: hidden;
}
.firma-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--logo, none) center / cover no-repeat;
}
.firma-logo--liten { inline-size: 1.65rem; block-size: 1.65rem; font-size: 0.66rem; }
.firma-logo--stor  { inline-size: 3rem;    block-size: 3rem;    font-size: 1.05rem; }
/* Kuratert palett (ikke rå hue-hjul): 6 dempede par som hviler på beige. */
.firma-logo--0 { background: #f0e0bd; color: #8a6210; }  /* sol   */
.firma-logo--1 { background: #d8dfe7; color: #3f4e5e; }  /* skygge*/
.firma-logo--2 { background: #d7e4d7; color: #2f5e3b; }  /* eng   */
.firma-logo--3 { background: #eedad3; color: #8a3529; }  /* rust  */
.firma-logo--4 { background: #e5ded0; color: #5a5346; }  /* stein */
.firma-logo--5 { background: #e0d9e1; color: #574a63; }  /* plomme*/

/* --------------------------------------------------------------- live-tikk
   Kort vask når et tall faktisk endrer seg ved polling (~1/min). Bevegelse =
   informasjon (ny verdi), ikke pynt. Kun opacity via ::after — komposittvennlig. */
[data-live-price], [data-live-change], [data-live-forecast-gap] { position: relative; }
.tikk-opp::after, .tikk-ned::after {
  content: "";
  position: absolute;
  inset: -0.15em -0.35em;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  animation: tikk-vask 0.9s var(--fjaer-rolig, ease-out) 1;
}
.tikk-opp::after { background: color-mix(in srgb, var(--opp) 22%, transparent); }
.tikk-ned::after { background: color-mix(in srgb, var(--ned) 22%, transparent); }
@keyframes tikk-vask { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* ----------------------------------------------------------- friskhets-puls
   Rolig prikk som slår ETT slag når ferske data lander (ikke evig loop). */
.puls {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--opp);
  vertical-align: middle;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--opp) 55%, transparent);
}
.puls--slag { animation: puls-slag 1.1s var(--fjaer-rolig, ease-out) 1; }
@keyframes puls-slag {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--opp) 55%, transparent); }
  70%  { box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--opp) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--opp) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .tikk-opp::after, .tikk-ned::after, .puls--slag { animation: none; }
}

/* OT-031: vurdering av ett svar. Diskret med vilje -- den skal vaere der naar kunden vil
   si fra, ikke be om oppmerksomhet etter hvert eneste svar. */
.spor-vurder { display: flex; align-items: center; gap: 6px; margin: -4px 0 8px 4px; }
.spor-vurder__knapp {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 0.85rem; line-height: 1; opacity: 0.45;
  transition: opacity var(--tid-trykk, 0.15s) ease;
}
.spor-vurder__knapp:hover, .spor-vurder__knapp:focus-visible { opacity: 1; }
.spor-vurder__takk { font-size: 0.78rem; color: var(--kull-svak, #6e6455); animation: spor-vurder-inn var(--tid-ui) var(--ease-ut); }
/* Fokus lander her når kortet lukkes (vurdering.js::linje). Linjen kan ikke trykkes, så en
   fokusring rundt den ser ut som en knapp; samme valg som .ob__steg h1[tabindex="-1"]. */
.spor-vurder__takk:focus { outline: none; }
.spor-vurder { flex-wrap: wrap; }
.spor-vurder__knapp.er-valgt { opacity: 1; }

/* Kommentarkortet etter tommel ned: vokser ut fra tommelen (--fra settes i vurdering.js).
   Høyden åpnes med grid-rader så innholdet under glir ned i stedet for å hoppe. */
.spor-vurder__kort {
  flex-basis: 100%; display: grid; grid-template-rows: 0fr; margin: 0;
  transition: grid-template-rows 320ms var(--ease-ut);
}
.spor-vurder__kort.er-aapen { grid-template-rows: 1fr; }
.spor-vurder__indre { min-height: 0; overflow: hidden; }
/* Marginen står inni den klippede boksen, så skyggen får plass uten at noe layout animeres. */
.spor-vurder__flate {
  max-width: 22rem; margin: 6px 8px 14px 0;
  display: grid; gap: 8px; padding: 12px;
  background: var(--kalk-lys); border: 1px solid var(--border); border-radius: var(--radius-input);
  box-shadow: 0 6px 16px -10px rgba(38, 34, 27, 0.3);
  transform-origin: var(--fra, 16px) top;
  transform: scale(0.85) translateY(-6px); opacity: 0;
  transition: transform 320ms var(--ease-ut), opacity 200ms var(--ease-ut);
}
.spor-vurder__kort.er-aapen .spor-vurder__flate { transform: none; opacity: 1; }
.spor-vurder__sporsmal { font-size: 0.86rem; font-weight: 600; color: var(--kull); }
.spor-vurder__felt {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5rem;
  font: inherit; font-size: 0.86rem; color: var(--kull);
  padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--kalk);
}
.spor-vurder__felt:focus-visible { outline: 2px solid var(--sol-blekk); outline-offset: 1px; border-color: var(--sol-blekk); }
.spor-vurder__handling { display: flex; justify-content: flex-end; gap: 6px; }
.spor-vurder__hopp, .spor-vurder__send {
  font: inherit; font-size: 0.82rem; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  transition: transform var(--tid-trykk) var(--ease-ut), background-color var(--tid-ui) var(--ease-ut);
}
.spor-vurder__hopp { border: 0; background: none; color: var(--kull-myk); }
.spor-vurder__hopp:hover { background: var(--kalk-dyp); }
.spor-vurder__send { border: 0; background: var(--kull); color: var(--kalk-lys); font-weight: 600; }
.spor-vurder__hopp:active, .spor-vurder__send:active { transform: scale(0.96); }
@keyframes spor-vurder-inn { from { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .spor-vurder__kort, .spor-vurder__flate { transition-duration: 0.01ms; }
  .spor-vurder__takk { animation: none; }
}

/* ------------------------------------------------------------------ regime */
/* Markedsregimet (market_data.regime): pillen og kortet i _regime.html. Prikken bærer
   retningen i datafarge (opp/ned er tall om markedet, ikke pynt); delt marked og
   sidelengs er skyggeblå -- det tilbaketrukne, uten samlet retning. */
.regime {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px;
  border-radius: 999px; background: rgba(38, 34, 27, 0.05); color: var(--kull);
  font-size: 0.82rem; text-decoration: none; white-space: nowrap;
}
.regime b { font-weight: 640; }
.regime .tall { color: var(--kull-svak); font-size: 0.76rem; }
a.regime:hover { background: rgba(38, 34, 27, 0.09); }
a.regime:focus-visible { outline: 2px solid var(--sol-blekk); outline-offset: 2px; }
.regime__prikk { width: 9px; height: 9px; border-radius: 50%; background: var(--skygge); flex: none; }
.regime--opptrend .regime__prikk { background: var(--opp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--opp) 18%, transparent); }
.regime--nedtrend .regime__prikk { background: var(--ned); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ned) 18%, transparent); }
.regime--delt .regime__prikk { background: linear-gradient(90deg, var(--opp) 50%, var(--ned) 50%); }
.regime--ukjent .regime__prikk { background: var(--stein); }

.regimekort { display: grid; gap: 12px; }
.regimekort__hode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.regimekort__uro { font-family: var(--font-mono); font-size: 0.72rem; color: var(--kull-svak); }
.regimekort__setning { margin: 0; max-width: 64ch; font-size: 0.93rem; line-height: 1.5; color: var(--kull-myk); }
.regimekort__bredde { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.regimekort__maal {
  display: grid; gap: 4px; padding: 12px 14px 14px; border-radius: 14px;
  background: rgba(38, 34, 27, 0.04); box-shadow: inset 0 1px 2px rgba(38, 34, 27, 0.06);
}
.regimekort__maal dt { font-size: 0.78rem; font-weight: 600; color: var(--kull-myk); }
.regimekort__maal dd { margin: 0; font-family: var(--font-display); font-weight: 640; font-size: 1.3rem; line-height: 1.1; color: var(--kull); }
/* Båndet: fylt andel, og et merke på 50 % -- halvparten er streken mellom opp og ned. */
.regimekort__strek { position: relative; height: 5px; border-radius: 999px; background: rgba(38, 34, 27, 0.10); overflow: visible; }
.regimekort__strek i { position: absolute; inset: 0 auto 0 0; width: calc(var(--andel, 0) * 100%); border-radius: inherit; background: var(--skygge); }
.regimekort__strek em { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--kull-svak); opacity: 0.6; }
.regimekort__notis { margin: 0; font-size: 0.74rem; color: var(--kull-svak); }
@media (max-width: 640px) { .regimekort__bredde { grid-template-columns: 1fr; } }

/* Merket (_merke.html) står foran ordmerket i hver header og bunn. Høyden følger skriften
   rundt, så samme partial passer i skallet, den offentlige headeren, ventelista og bunnene;
   vertical-align setter midten på versalhøyden. Bokstavene er kull på lys grunn -- bunnen
   på kull arver sin egen kalkfarge (trust.css). */
.merke { display: inline-block; height: 1.5em; width: auto; vertical-align: -0.4em; margin-right: 0.5em; color: var(--kull); }
/* Eier 2026-10-11: «jeg vil ikke ha den noen sted der» -- bare ordmerket i alle headere og bunner.
   K-en lever i faviconet, profilbildene og Google-logoen. */
.merke { display: none; }
/* Handelsforslag fra agenten (static/handel.js). Bevisst dempet (eier 2026-09-14): et forslag
   skal ikke se ut som en oppfordring. Omriss, ikke fylt knapp, og knappeteksten er et spørsmål. */
.handel { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.handel__rad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.handel__tekst { font-weight: 500; margin-right: 4px; color: var(--kull-myk); }
.handel__knapp {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--kull) 18%, transparent); background: transparent;
  color: var(--kull-myk); font: 500 0.84rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
}
.handel__knapp:hover { color: var(--kull); border-color: color-mix(in srgb, var(--kull) 35%, transparent); }
.handel__knapp:disabled { cursor: default; opacity: 0.7; }
.handel__notis { margin: 0; font-size: 13px; color: var(--kull-myk); }