/* ==========================================================================
   NYE KONSEPTER, det Lodd ikke dekker.

   Alt her står under #skjerm-konsept, og det er med vilje. Lodd eier
   begrepene: .rad, .seksjon, .merke, .tall-stort og resten brukes som de er.
   Det som står her er bare rytmen på den ene skjermen, og et navn som bare
   gjelder der, skal ikke bli et nytt begrep i stilarket som alle andre
   flater må forholde seg til.

   Ingen farge er skrevet som et tall: alle er tokener fra lodd.css, og
   derfor følger de begge temaene av seg selv.
   ========================================================================== */

/* INNRYKKET PÅ TELEFON. Lodd beholder margen under 600px, bare smalere (56px
   i stedet for 72px), og .seksjon beholder innrykket sitt. Her sto det før at
   tallrada, fanene og filterlinja skulle begynne ved kanten på telefon, og da
   lå de til venstre for loddlinja mens overskriften rett over dem lå til
   høyre for den. Innrykket er nå det samme overalt, og alt på skjermen står
   på den samme linja.

   Tallene i Runden. Fire tall i én rad, aldri fire kort: et kort rundt et
   tall er en ramme som ikke sier noe. På telefon faller de i to og to, så
   sifrene ikke blir smalere enn de er lesbare.

   max-width er rettelsen fra 27. september. Uten den strakk de fire tallene
   seg over hele skjermbredden, og på en bred skjerm sto det fire store
   nuller med flere hundre piksler mellom seg: fire løse tall i stedet for
   én gruppe man leser i ett blikk. 640px er fire spalter på rundt 145px,
   som er bredden på de lengste navnene her. */
#skjerm-konsept .kon-tallrad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  padding: var(--s-5);
  margin-bottom: var(--s-7);
}
#skjerm-konsept .kon-tall { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
#skjerm-konsept .kon-tallnavn {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
#skjerm-konsept .kon-under {
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}

/* De to listene i Runden står side om side på en skjerm, og under
   hverandre på en telefon. */
#skjerm-konsept .kon-kolonner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}

/* Dekningen: fem prikker i den låste rekkefølgen, én per bevissthetsnivå.
   Fylt betyr at nivået har en aktiv vinkel. Fem prikker sier det samme som
   en setning, og tar bredden av et tall. */
#skjerm-konsept .kon-prikker { display: inline-flex; gap: var(--s-1); justify-content: flex-end; width: 100%; }
#skjerm-konsept .kon-prikk {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
}
#skjerm-konsept .kon-prikk.kon-fylt { background: var(--brand); border-color: var(--brand-tekst); }

/* Et forslag som ikke er bekreftet står dempet, men det står. En rad man
   ikke kan bruke er en sperre, og formatene er forslag. */
#skjerm-konsept .rad.kon-forslag .tittel { color: var(--ink-2); }

/* Lastingen, 4.6 i spes-navigasjon. Skjelettet bruker .rad selv, så høyden
   og margen er de samme som radene som kommer, og lista står stille når
   tallene er inne. Pulsen er opasitet alene: den flytter ingenting, og
   regelen for prefers-reduced-motion i lodd.css slår den av av seg selv. */
#skjerm-konsept .kon-skjelett .rad { pointer-events: none; }
#skjerm-konsept .kon-strek {
  display: block;
  height: 8px;
  border-radius: var(--r-1);
  background: var(--line);
  animation: kon-puls 1.4s ease-in-out infinite;
}
#skjerm-konsept .kon-strek-marg   { width: 70%; margin-top: var(--s-4); }
#skjerm-konsept .kon-strek-tittel { width: 42%; margin-top: var(--s-4); }
#skjerm-konsept .kon-strek-under  { width: 64%; margin-top: var(--s-2); }

@keyframes kon-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (max-width: 899px) {
  #skjerm-konsept .kon-tallrad { grid-template-columns: 1fr 1fr; }
  #skjerm-konsept .kon-kolonner { grid-template-columns: 1fr; }
}

/* Her sto en lapp som lot margetiketten brekke nedover, fordi «Nye vinkler»,
   «Utvid formater» og «Tidsbegrensede» ikke gikk inn i margen. Den ga en smal
   stolpe med majuskler nedover venstresida, og det var den Theodor så 27.
   september 2026. Lappen er borte, og navnene er nå seksjonsoverskrifter:
   ingen del av denne skjermen har lenger et navn i margen. Margetiketten er
   bare for korte kategorinavn som gjentar seg nedover en liste med rader, og
   den regelen står over .seksjon i lodd.css.

   DEN TOMME TILSTANDEN. Den er ikke en fotnote under en liste: basen er tom,
   så den ER skjermen inntil videre. Derfor har den plass, en setning i
   brødskrift som sier hva delen er, og veien videre som en ekte knapp.
   Innrykket er det samme som radene som skal stå her, så tomrommet ligger på
   den samme linja som innholdet det venter på. */
/* I B står den tomme tilstanden i et .kort, som alt annet innhold, og ikke
   løst på flata (1. oktober 2026). Teksten holder lesebredden. */
#skjerm-konsept .kon-tomt { padding: var(--s-5); }
#skjerm-konsept .kon-tomt > p { max-width: 62ch; }
#skjerm-konsept .kon-tomt-hva {
  margin: 0 0 var(--s-2);
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  font-weight: 500;
  color: var(--ink);
}
#skjerm-konsept .kon-tomt-hvorfor {
  margin: 0;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-3);
}
#skjerm-konsept .kon-tomt .knapp { margin-top: var(--s-4); }

/* SPALTENE UTEN MARG. Det valgte konseptet og ruta fra høyre er egne,
   smale spalter, og de har ingen marg til venstre for seg. Et innrykk på
   84px inni dem er bare tapt bredde, og en margetikett ville blitt dratt
   ut av spalten og inn over lista ved siden av. Innholdet der bruker
   derfor overskrifter, og innrykket nulles her ett sted i stedet for at
   hver bolk husker det selv. */
#skjerm-konsept .kon-spalte .seksjon,
#skjerm-konsept .kon-ruteinn .seksjon,
#skjerm-konsept .kon-spalte .seksjon-tom,
#skjerm-konsept .kon-ruteinn .seksjon-tom,
#skjerm-konsept .kon-spalte .kon-tomt,
#skjerm-konsept .kon-ruteinn .kon-tomt,
#skjerm-konsept .kon-spalte .kon-tallrad,
#skjerm-konsept .kon-ruteinn .kon-tallrad,
#skjerm-konsept .kon-spalte .kon-handlinger,
#skjerm-konsept .kon-ruteinn .kon-handlinger { padding-left: 0; }

/* ==========================================================================
   MANUS OG KUNNSKAP, LEST FRA VIDEO

   Delen har to faner, en filterlinje og en rute fra høyre. Alt tre er
   Lodds egne begreper i bunnen (.rad, .seksjon, .knapp, input og select
   som de er), og det som står her er plasseringen på denne ene skjermen.
   ========================================================================== */

/* Fanene er Lodds .faner fra faner.js (1. oktober 2026). Her sto to egne
   knapper for Manus og Kunnskap, som nå er faner i Konsepter. */

/* Filterlinja. Etiketten står foran feltet og ikke over: to felter på én
   linje er ett valg, og to etiketter på egne linjer ville gjort det til to
   avsnitt. */
#skjerm-konsept .kon-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-left: 0;
  margin-bottom: var(--s-5);
}
#skjerm-konsept .kon-filter:empty { display: none; }
#skjerm-konsept .kon-lapp {
  display: inline-block;
  margin: 0;
  font-size: var(--t-2);
  color: var(--ink-3);
}
#skjerm-konsept .kon-filter select { width: auto; }
#skjerm-konsept .kon-filter input[type=search] { width: 260px; max-width: 100%; }

/* En rad som åpner ruta. Knappen skal se ut nøyaktig som raden ved siden
   av: det er raden man trykker på, ikke en knapp inni den. */
#skjerm-konsept .kon-klikkbar {
  font: inherit;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  #skjerm-konsept .kon-klikkbar:hover .tittel { color: var(--brand-tekst); }
}

/* Ruta fra høyre. Teppet er det samme som dialogene bruker, og kortet står
   i full høyde langs kanten: teksten i et manus er lang, og en dialog midt
   på skjermen ville blitt en liten rute å lese den gjennom. */
#skjerm-konsept .kon-rute { position: fixed; inset: 0; z-index: 58; }
#skjerm-konsept .kon-rute[hidden] { display: none; }
#skjerm-konsept .kon-rutebak { position: absolute; inset: 0; background: var(--teppe); }
#skjerm-konsept .kon-rutekort {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 560px;
  max-width: 100%;
  /* Kant og ikke skygge, som ellers i Lodd: skyggen sier det samme som
     kanten, og koster et tall i taket. */
  border-left: 1px solid var(--line-2);
  background: var(--flate);
  animation: kon-rute-inn var(--tid-3) var(--kurve-mot);
}
@keyframes kon-rute-inn {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
#skjerm-konsept .kon-rutetopp {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
#skjerm-konsept .kon-rutenavn {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--t-4);
  line-height: var(--t-4-h);
}
#skjerm-konsept .kon-ruteinn {
  flex: 1 1 auto;
  overflow: hidden auto;
  padding: var(--s-5) var(--s-5) calc(var(--s-7) + env(safe-area-inset-bottom));
}
#skjerm-konsept .kon-rutefakta {
  margin: 0 0 var(--s-4);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}
#skjerm-konsept .kon-kort {
  margin: 0 0 var(--s-5);
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  color: var(--ink);
}

/* Manusteksten. Linjeskiftene er en del av manuset, så de står, men
   skriften er den samme som ellers: et manus er tekst og ikke kode. */
#skjerm-konsept .kon-tekst {
  margin: 0;
  font: inherit;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#skjerm-konsept .kon-punkter { margin: 0; padding-left: var(--s-5); }
#skjerm-konsept .kon-punkter li { margin-bottom: var(--s-3); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-konsept .kon-punkter .under { display: block; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); }

@media (max-width: 899px) {
  #skjerm-konsept .kon-rutekort { border-left: 0; }
}

/* --- det valgte konseptet og vinkelpanelet (trinn 3) --------------------- */

/* Den valgte raden i konseptlista. En kant til venstre og ikke en fylt
   flate: raden skal se valgt ut uten å se ut som den er i ferd med å
   gjøre noe. */
#skjerm-konsept .rad.kon-valgt { background: var(--flate-2); }

/* Dekningen har fem tall og ikke fire. Samme rad, samme luft, bare en
   kolonne til: tallene skal stå på de samme plassene hver gang. */
#skjerm-konsept .kon-tallrad.kon-fem { grid-template-columns: repeat(5, 1fr); }

#skjerm-konsept .kon-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-left: 0;
  margin-bottom: var(--s-5);
}

/* Dommen som merke. Understreken i for_tidlig er byttet mot et mellomrom
   i teksten, og her står bare skriften: en farge per dom ville vært seks
   nye farger ingen har bestemt. */
#skjerm-konsept .merke.kon-dom { font-variant: none; text-transform: none; }

/* Livsløpet. Fem ord på én linje, det aktive uthevet. Ingen piler mellom:
   rekkefølgen leses av rekkefølgen. */
#skjerm-konsept .kon-livslop {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
}
#skjerm-konsept .kon-steg {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
#skjerm-konsept .kon-steg.kon-aktiv { color: var(--ink); font-weight: 500; }

/* Skjemaene i ruta. Én kolonne, fordi ruta er smal, og feltene står under
   merkelappene sine slik at et langt merkelappnavn ikke presser feltet. */
#skjerm-konsept .kon-skjema { display: flex; flex-direction: column; gap: var(--s-4); }
#skjerm-konsept .kon-felt { display: flex; flex-direction: column; gap: var(--s-2); }
#skjerm-konsept .kon-felt input,
#skjerm-konsept .kon-felt select,
#skjerm-konsept .kon-felt textarea { width: 100%; }
#skjerm-konsept .kon-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
#skjerm-konsept .kon-feil {
  margin: 0;
  color: var(--rod);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-konsept .kon-skjema .kon-handlinger { padding-left: 0; margin-bottom: 0; }

/* Varselet i vinkelpanelet, og kvitteringen etter en flytting. Begge er
   én setning som sier hva som nettopp skjedde eller hva neste steg er, og
   begge er kant i stedet for skygge, slik Lodd sier. */
#skjerm-konsept .kon-varsel,
#skjerm-konsept .kon-kvittering {
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate-2);
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  color: var(--ink);
}

/* ANNONSER OG INNSIKT I B (1. oktober 2026, spes-inndeling.md 5.2).
   Kort med nøkkeltall øverst, diagrammene i et rutenett under, og lista i
   et kort. Samme oppskrift som Lager-oversikten, så de to leses likt. */
#skjerm-konsept #kon-faner { margin-bottom: var(--s-5); }
#skjerm-konsept .fanepanel > * + * { margin-top: var(--s-5); }
#skjerm-konsept .kon-to-en, #skjerm-konsept .kon-en-to, #skjerm-konsept .kon-to-like { display: grid; gap: var(--s-5); }
#skjerm-konsept .kon-to-en { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#skjerm-konsept .kon-en-to { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
#skjerm-konsept .kon-to-like { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#skjerm-konsept .kon-to-en .legende, #skjerm-konsept .kon-to-like .legende { margin-top: var(--s-4); }
#skjerm-konsept .kon-filter .kon-ut { margin-left: auto; }
#skjerm-konsept .kon-kilde { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--amber-svak); color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-konsept .kon-annrad .inn { gap: var(--s-4); }
#skjerm-konsept .kon-gnist { flex: 0 0 var(--kon-gnist); height: var(--diagram-h-liten); }
#skjerm-konsept .kon-belop { display: flex; flex-direction: column; align-items: flex-end; min-width: var(--kon-belop); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#skjerm-konsept .kon-belop .under { font-family: var(--font-ui); font-size: var(--t-2); color: var(--ink-3); }
/* Dommen som pille med svakt fyll, fargen etter dommen (data-dom). */
#skjerm-konsept .pille[data-dom] { flex: 0 0 auto; }
#skjerm-konsept .pille[data-dom="vinner"] { color: var(--gronn); background: var(--gronn-svak); border-color: transparent; }
#skjerm-konsept .pille[data-dom="lonnsom"] { color: var(--brand-tekst); background: var(--omtale); border-color: transparent; }
/* I mørkt tema ga merkets tekstfarge på det svake fyllet 3.76 i kontrast
   (nettleserprøven, 1. oktober 2026). Blekket der, som dagshodet i Kalender. */
:root[data-tema="mork"] #skjerm-konsept .pille[data-dom="lonnsom"] { color: var(--ink); }
#skjerm-konsept .pille[data-dom="taper"] { color: var(--rod); background: var(--rod-svak); border-color: transparent; }
#skjerm-konsept .pille[data-dom="uavgjort"] { color: var(--amber); background: var(--amber-svak); border-color: transparent; }
#skjerm-konsept .kon-def { margin: 0 0 var(--s-4); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-2); }
#skjerm-konsept .kon-lengst { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; }
#skjerm-konsept .kon-lengst .tittel { font-size: var(--t-5); font-weight: 600; }
#skjerm-konsept .kon-lengst .under { font-size: var(--t-3); color: var(--ink-3); }
#skjerm-konsept .kon-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--kon-ref), 1fr)); gap: var(--s-4); }
#skjerm-konsept .kon-ref { display: flex; flex-direction: column; gap: var(--s-2); }
#skjerm-konsept .kon-ref h3 { margin: 0; font-size: var(--t-4); line-height: var(--t-4-h); }
#skjerm-konsept .kon-ref p { margin: 0; font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-konsept .kon-refunder { color: var(--ink-3); }
#skjerm-konsept .kon-refanalyse { padding-left: var(--s-3); border-left: var(--strek-tynn) solid var(--line); color: var(--ink-2); }
#skjerm-konsept .kon-stikk { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 899px) {
  #skjerm-konsept .kon-to-en, #skjerm-konsept .kon-en-to, #skjerm-konsept .kon-to-like { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  #skjerm-konsept .kon-gnist { display: none; }
  #skjerm-konsept .kon-filter .kon-ut { margin-left: 0; }
  #skjerm-konsept .kon-annrad .pille[data-dom] { display: none; }
}
#skjerm-konsept a.l { color: inherit; text-decoration: none; border-radius: var(--r-1); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-konsept a.l:hover { color: var(--ink); background: var(--flate-2); }
}
#skjerm-konsept .andeler { margin-top: var(--s-2); }
#skjerm-konsept .kon-tallrad.kon-fem { padding: 0; }

/* Merknaden under nøkkeltallene på Annonser (1. oktober 2026): hva som er
   sporet og hva som er hele kontoen. Rolig tekst, ikke et varsel. */
#skjerm-konsept .kon-merknad { margin: var(--s-3) 0 0; color: var(--ink-3); font-size: var(--t-3); line-height: var(--t-3-h); }