/* ==========================================================================
   KONSEPTMASKINEN, 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.
   ========================================================================== */

/* 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. */
#skjerm-konsept .kon-tallrad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  padding-left: calc(var(--marg) + var(--inn));
  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); }

/* 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; padding-left: 0; }
  #skjerm-konsept .kon-kolonner { grid-template-columns: 1fr; }
}

/* Margetiketten er 60 px bred her (72 px marg minus lufta mot loddlinja),
   og i Geist Mono på 11 px med sperring rekker det til åtte tegn.
   «Tidsbegrensede», «Utvid formater» og «Nye vinkler» er lengre, og la seg
   oppå teksten ved siden av, fordi .etikett verken brekker eller klipper.
   Den får brekke i stedet. Et navn er ett ord, så bruddet må kunne komme
   midt i det, og høyden koster ingenting: seksjonen er allerede like høy
   som teksten til høyre. */
#skjerm-konsept .seksjon > .etikett:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   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. To knapper, ikke en fanerad med egne kanter: delen står allerede
   i sidemenyen, og en ramme til rundt to ord ville sagt at dette er et nytt
   sted og ikke to lister i det samme. */
#skjerm-konsept .kon-faner {
  display: flex;
  gap: var(--s-2);
  padding-left: calc(var(--marg) + var(--inn));
  margin-bottom: var(--s-5);
}
#skjerm-konsept .kon-fane {
  font: inherit;
  font-size: var(--t-3);
  font-weight: 500;
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--tid-1) var(--kurve), background var(--tid-1) var(--kurve);
}
#skjerm-konsept .kon-fane[aria-pressed="true"] {
  background: var(--flate-2);
  border-color: var(--line);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  #skjerm-konsept .kon-fane:hover { color: var(--ink); }
}

/* 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: calc(var(--marg) + var(--inn));
  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); }
}

/* 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-faner, #skjerm-konsept .kon-filter { padding-left: 0; }
  #skjerm-konsept .kon-rutekort { border-left: 0; }
}