/* ==========================================================================
   HJERNEN, flata

   Obsidians oppsett, tegnet med Lodd. Skjermbildet Theodor viste er fasit:
   et smalt ikonbånd helt til venstre, et felt med mapper, faner over
   notatet, grafen i midten, og et høyrefelt med alt som henger rundt det
   man leser.

   Tre ting skiller denne fila fra resten av Lodd, og alle tre er med vilje:

     1. INGEN LODDLINJE. Hjernen er et arbeidsrom med fire spalter, ikke en
        liste med en marg. En loddrett hårstrek til gjennom den ville vært
        den femte streken på skjermen, og ingen av dem ville lest som
        struktur lenger. Kantene mellom feltene ER strukturen her.

     2. EGNE FARGER FOR GRAFEN. En node farges etter hva notatet er, og de
        sju typene trenger sju farger som holder seg fra hverandre i begge
        temaer. De står som tokener, i begge blokkene, og leses av canvas
        med getComputedStyle: et lerret arver ingenting.

     3. FELTENE MÅLES I PIKSLER. Bredden på et felt dras av et menneske og
        huskes, akkurat som chatpanelet. Da kan den ikke være et trinn i
        skalaen. Gulvet og taket holder den brukbar.

   Alt annet følger Lodd, og sjekk-os.mjs håndhever skalaene her på samme
   måte som i lodd.css.
   ========================================================================== */

:root {
  /* Ikonbåndet. 44 er klikkflata, og båndet er ett ikon bredt. */
  --hj-band: 48px;

  /* Feltene. Dras av et menneske, huskes i localStorage, og settes som
     variabel på rota av hjerne.js. Gulvet er der et mappenavn fortsatt kan
     leses, taket der feltet begynner å spise notatet. */
  --hj-venstre: 264px;
  --hj-hoyre: 280px;
  --hj-felt-minst: 200px;
  --hj-felt-mest: 420px;

  /* Bredden på selve teksten i lesevisningen. Obsidian kaller det
     «readable line length», og grunnen er den samme her: over 70 tegn per
     linje mister øyet starten på den neste. */
  --hj-lesebredde: 68ch;

  /* Grafen. Sju typer, sju farger, og en åttende for de som ikke henger
     sammen med noe. De er informasjon og ikke pynt: fargen er det eneste
     som skiller en beslutning fra en kunde når teksten er for liten til å
     leses. */
  --hj-notat:       #6B7183;
  --hj-beslutning:  #5B3D8F;
  --hj-kunde:       #1B6B3A;
  --hj-person:      #0E1B4D;
  --hj-prosess:     #8A5B00;
  --hj-mote:        #1F5E7A;
  --hj-kilde:       #7A4A2F;
  --hj-foreldrelos: #C9C5BC;

  /* Kantene i grafen, og noden man peker på. Kanten er svakere enn en
     hårstrek i flata: med to tusen av dem blir selv --line en grå flate. */
  --hj-kant:        #DDDAD3;
  --hj-lys:         #0E1B4D;
}

:root[data-tema="mork"] {
  --hj-notat:       #8A93AC;
  --hj-beslutning:  #B79BEC;
  --hj-kunde:       #5FD99B;
  --hj-person:      #4C7DFF;
  --hj-prosess:     #E8B75B;
  --hj-mote:        #6FC3E8;
  --hj-kilde:       #D2A183;
  --hj-foreldrelos: #39435C;

  --hj-kant:        #263146;
  --hj-lys:         #4C7DFF;
}

/* ==========================================================================
   FULL FLATE

   Hjernen fyller innholdsspalten helt ut, uten marg og uten loddlinje, som
   et innebygd system gjør. Rammen og ikke siden ruller, så hver boks
   nedover får min-height: 0. Uten det vokser rammen til høyden på det
   lengste notatet, og hele OS-et ruller med, sidemenyen også.
   ========================================================================== */

.modus-hjerne .ramme { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.modus-hjerne .kropp { min-height: 0; }
.modus-hjerne .innhold {
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.modus-hjerne #skjerm-hjerne.pa {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  position: relative;
}

.hj {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}

/* ==========================================================================
   IKONBÅNDET
   ========================================================================== */

.hj-band {
  flex: 0 0 var(--hj-band);
  width: var(--hj-band);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-right: 1px solid var(--line-2);
  background: var(--flate-2);
}
.hj-band .vokser { flex-grow: 1; }

.hj-ikon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.hj-ikon svg { width: 18px; height: 18px; }
.hj-ikon:hover { background: var(--flate-3); color: var(--ink); }
.hj-ikon[aria-pressed="true"], .hj-ikon[aria-current="true"] {
  background: var(--flate);
  border-color: var(--line-2);
  color: var(--brand);
}

/* Arkivering spør én gang først. Knappen blir amber mens spørsmålet står,
   og faller tilbake av seg selv etter fire sekunder. */
.hj-ikon.sporr { color: var(--amber); border-color: var(--amber); }

/* Båndet er 48 bredt og ikonene 36, altså under gulvet på 44. Det er den
   ene bevisste unntakstilstanden: hele båndet er 48 bredt og hvert ikon har
   6px luft rundt seg, så det du faktisk treffer med fingeren er 48 x 44.
   På berøring vokser ikonet ut til hele båndet. */
@media (hover: none) {
  /* Bredden settes på tokenet og ikke på båndet: skuffene på smal skjerm
     legger seg på var(--hj-band), og ville ellers stått 8px for langt inn. */
  :root { --hj-band: 56px; }
  .hj-ikon { width: 44px; height: 44px; }
}

/* ==========================================================================
   VENSTRE FELT: mapper, søk og bokmerker
   ========================================================================== */

.hj-venstre {
  flex: 0 0 var(--hj-venstre);
  width: var(--hj-venstre);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-2);
  background: var(--flate-2);
}
.hj-venstre[hidden], .hj-hoyre[hidden] { display: none; }

.hj-felttopp {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  min-height: 44px;
}
.hj-felttopp .etikett { flex-grow: 1; }

.hj-rull {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  padding: var(--s-2) var(--s-2) var(--s-5);
}

/* Treet. Hver rad er en knapp, ikke en lenke: den åpner noe inne i flata
   og går ingen steder. Innrykket kommer av dybden og settes av hjerne.js
   som en variabel, så en mappe fem ledd ned ikke trenger fem klasser. */
.hj-rad {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 28px;
  padding: var(--s-1) var(--s-3);
  /* Innrykk per nivå. Et trinn fra skalaen, ikke en fri verdi: 14 sto her
     til 26. september 2026, og slapp gjennom fordi vakta hoppet over hele
     deklarasjonen så snart den inneholdt en calc. */
  padding-left: calc(var(--s-3) + var(--dybde, 0) * var(--s-4));
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-3);
  text-align: left;
  cursor: pointer;
}
.hj-rad:hover { background: var(--flate-3); color: var(--ink); }
.hj-rad[aria-current="true"] { background: var(--flate); color: var(--ink); font-weight: 500; }
.hj-rad .navn { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hj-rad .tall {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-1);
  color: var(--ink-3);
}
.hj-rad .pil {
  width: 12px;
  flex: 0 0 12px;
  color: var(--ink-3);
  transition: transform var(--tid-1) var(--kurve);
}
.hj-rad[aria-expanded="false"] .pil { transform: rotate(-90deg); }
.hj-rad.mappe { font-weight: 500; color: var(--ink); }
.hj-rad.arkivert .navn { color: var(--ink-3); text-decoration: line-through; }

/* Dra og slipp. Raden man holder over lyser opp som en mappe som tar imot,
   og den man drar blir blek, så det alltid er tydelig hva som flyttes og
   hvor det havner. */
/* Feltet man skriver et mappenavn i, står i treet der mappa skal havne.
   Nettleserens egen prompt er forbudt her, og en rad man kan skrive i er
   uansett nærmere det man holder på med. */
.hj-rad input[type=text] {
  min-height: 24px;
  font-size: var(--t-3);
  padding: 0 var(--s-2);
  border-radius: var(--r-1);
}
.hj-rad.drar { opacity: .4; }
/* Raden man slipper et notat på. Samme dempede merkefarge som en omtale:
   noe er lagt fram, og det er her det havner. */
.hj-rad.slipp { background: var(--omtale); box-shadow: inset 0 0 0 1px var(--brand); }

.hj-bolk {
  border-top: 1px solid var(--line);
  padding: var(--s-3) 0 var(--s-2);
}
.hj-bolk .etikett { padding: 0 var(--s-4) var(--s-2); }
.hj-bokmerker { max-height: 30%; overflow: hidden auto; flex: 0 0 auto; }

/* Søket i venstre felt. Feltet er en search-input så nettleseren gir det
   et kryss, og Esc tømmer det. */
.hj-sok { padding: var(--s-3) var(--s-3) 0; }
.hj-sok input { min-height: 34px; font-size: var(--t-3); }
.hj-treff {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-3);
  padding: var(--s-3);
  cursor: pointer;
}
.hj-treff:hover { background: var(--flate-3); }
.hj-treff .tittel { display: block; color: var(--ink); font-weight: 500; }
.hj-treff .utdrag {
  display: block;
  color: var(--ink-3);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  margin-top: var(--s-1);
}
.hj-treff .utdrag b { color: var(--ink); font-weight: 600; }

.hj-tomt { color: var(--ink-3); font-size: var(--t-2); padding: var(--s-4); margin: 0; }

/* Hvelvnavnet helt nederst, med hjelp og innstillinger, som i Obsidian. */
.hj-hvelv {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line-2);
  font-size: var(--t-2);
  color: var(--ink-3);
}
.hj-hvelv .navn { flex-grow: 1; color: var(--ink-2); font-weight: 500; }

/* ==========================================================================
   HÅNDTAKENE

   Samme rolle som kanten på chatpanelet: en separator som kan dras med
   pekeren og flyttes med piltastene. Den er 1px synlig og 9px bred å treffe,
   fordi en hårstrek er umulig å ta tak i med en mus.
   ========================================================================== */

.hj-handtak {
  flex: 0 0 8px;
  width: 8px;
  margin-left: -4px;
  margin-right: -4px;
  z-index: 2;
  cursor: col-resize;
  background: none;
  touch-action: none;
}
.hj-handtak:hover, .hj-handtak:focus-visible {
  background: var(--handtak);
  outline: none;
  box-shadow: none;
}
.hj-handtak[hidden] { display: none; }

/* ==========================================================================
   MIDTEN: faner og notat
   ========================================================================== */

.hj-midt {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.hj-fanerad {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-2);
  background: var(--flate-2);
  min-height: 44px;
}
.hj-faner {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.hj-fanevelger { display: none; }

.hj-fane {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 200px;
  min-height: 30px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--t-3);
  cursor: pointer;
  white-space: nowrap;
}
.hj-fane:hover { background: var(--flate-3); color: var(--ink-2); }
.hj-fane[aria-selected="true"] {
  background: var(--paper);
  border-color: var(--line-2);
  color: var(--ink);
  font-weight: 500;
}
.hj-fane .navn { overflow: hidden; text-overflow: ellipsis; }
.hj-fane .nal { color: var(--brand); }
.hj-fane .prikk {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex: 0 0 6px;
}

/* Lukkekrysset ligger INNE i fanen. En knapp i en knapp er ikke gyldig
   HTML, så fanen er en div med role=tab og tabindex, og krysset er den
   eneste ekte knappen. Tastaturet når begge deler. */
.hj-fane .kryss {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
}
.hj-fane:hover .kryss, .hj-fane[aria-selected="true"] .kryss { opacity: 1; }
.hj-fane .kryss:hover { background: var(--flate-3); color: var(--ink); }
.hj-fane .kryss svg { width: 12px; height: 12px; }

/* ==========================================================================
   NOTATET
   ========================================================================== */

.hj-flate {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.hj-notattopp {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.hj-notattopp .vokser { flex-grow: 1; }
.hj-notattopp .sti {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hj-lagring {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--ink-3);
  white-space: nowrap;
}
.hj-lagring.strid { color: var(--amber); }
.hj-lagring.gal { color: var(--rod); }

.hj-ark {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  padding: var(--s-6) var(--s-6) var(--s-8);
}
.hj-ark > * { max-width: var(--hj-lesebredde); margin-left: auto; margin-right: auto; }

/* Tittelen i notatet er et felt, ikke en overskrift: den redigeres der den
   står, som i Obsidian, og omdøpingen skjer når man forlater feltet. */
.hj-tittel {
  display: block;
  width: 100%;
  max-width: var(--hj-lesebredde);
  margin: 0 auto var(--s-5);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-8);
  line-height: var(--t-8-h);
}
.hj-tittel:focus { outline: none; box-shadow: var(--fokus); border-radius: var(--r-2); }

/* Kildevisningen. Skriften er mono, fordi kilden ER kode: en tabell i
   markdown står bare i lodd når tegnene er like brede. */
.hj-kilde {
  display: block;
  width: 100%;
  max-width: var(--hj-lesebredde);
  margin: 0 auto;
  min-height: 60vh;
  padding: 0;
  border: 0;
  resize: none;
  background: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-3);
  line-height: 22px;
  tab-size: 2;
}
.hj-kilde:focus { outline: none; }

/* ==========================================================================
   LESEVISNINGEN

   Tolket av hjerne.js, aldri av nettleseren: hvert eneste tegn går gjennom
   escaping før noe blir HTML. Se tilHtml() i hjerne.js.
   ========================================================================== */

.hj-lest { color: var(--ink); font-size: var(--t-4); line-height: var(--t-4-h); }
.hj-lest h1, .hj-lest h2, .hj-lest h3, .hj-lest h4, .hj-lest h5, .hj-lest h6 {
  margin: var(--s-6) 0 var(--s-3);
  line-height: 1.25;
}
.hj-lest h1 { font-size: var(--t-7); font-family: var(--font-ui); font-weight: 600; }
.hj-lest h2 { font-size: var(--t-6); }
.hj-lest h3 { font-size: var(--t-5); }
.hj-lest h4, .hj-lest h5, .hj-lest h6 { font-size: var(--t-4); color: var(--ink-2); }
.hj-lest p { margin: 0 0 var(--s-4); }
.hj-lest ul, .hj-lest ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.hj-lest li { margin-bottom: var(--s-2); }
.hj-lest li > ul, .hj-lest li > ol { margin-top: var(--s-2); margin-bottom: 0; }
.hj-lest .avkrysning { list-style: none; padding-left: 0; }
.hj-lest .avkrysning li { display: flex; align-items: flex-start; gap: var(--s-3); }
.hj-lest .avkrysning input { margin-top: 4px; }
.hj-lest .avkrysning li.gjort { color: var(--ink-3); text-decoration: line-through; }
.hj-lest blockquote {
  margin: 0 0 var(--s-4);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 2px solid var(--line-3);
  color: var(--ink-2);
}
/* CALLOUTS. > [!note] Tittel, slik Obsidian skriver dem, og det mest
   synlige elementet i lesevisningen i skjermbildet Theodor viste.

   Kant og ikke skygge, som alt annet i Lodd, og fargen bærer meningen:
   den samme grønn, amber, rød og violett som ellers i OS. Venstrekanten
   er 2px og ikke en hårstrek, fordi den ER signalet her. */
.hj-lest .hj-callout {
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--ink-3);
  border-radius: var(--r-2);
  background: var(--flate-2);
}
.hj-lest .hj-callout-tittel,
.hj-lest .hj-callout > summary {
  margin: 0;
  font-weight: 600;
  font-size: var(--t-3);
  color: var(--ink);
}
.hj-lest .hj-callout > summary { cursor: pointer; list-style: none; min-height: 24px; }
.hj-lest .hj-callout > summary::-webkit-details-marker { display: none; }
/* Trekanten er vår egen, så den peker likt i begge nettlesere. */
.hj-lest .hj-callout > summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: var(--s-3);
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--tid-1) var(--kurve);
}
.hj-lest .hj-callout[open] > summary::before { transform: rotate(90deg); }
.hj-lest .hj-callout-kropp { margin-top: var(--s-3); color: var(--ink-2); }
.hj-lest .hj-callout-kropp > :last-child { margin-bottom: 0; }

.hj-lest .hj-callout.f-gronn { border-left-color: var(--gronn); }
.hj-lest .hj-callout.f-gronn .hj-callout-tittel,
.hj-lest .hj-callout.f-gronn > summary { color: var(--gronn); }
.hj-lest .hj-callout.f-amber { border-left-color: var(--amber); }
.hj-lest .hj-callout.f-amber .hj-callout-tittel,
.hj-lest .hj-callout.f-amber > summary { color: var(--amber); }
.hj-lest .hj-callout.f-rod { border-left-color: var(--rod); }
.hj-lest .hj-callout.f-rod .hj-callout-tittel,
.hj-lest .hj-callout.f-rod > summary { color: var(--rod); }
.hj-lest .hj-callout.f-violett { border-left-color: var(--violett); }
.hj-lest .hj-callout.f-violett .hj-callout-tittel,
.hj-lest .hj-callout.f-violett > summary { color: var(--violett); }

.hj-lest hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--s-6) 0; }
.hj-lest code {
  font-family: var(--font-mono);
  font-size: .92em;
  padding: 1px 4px;
  border-radius: var(--r-1);
  background: var(--flate-3);
}
.hj-lest pre {
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--flate-2);
  overflow-x: auto;
}
.hj-lest pre code { padding: 0; background: none; font-size: var(--t-2); line-height: var(--t-2-h); }
.hj-lest table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--s-4);
  font-size: var(--t-3);
}
.hj-lest th, .hj-lest td {
  border: 1px solid var(--line-2);
  padding: var(--s-2) var(--s-3);
  text-align: left;
}
.hj-lest th { background: var(--flate-2); font-weight: 600; }
/* Justeringen i en markdowntabell kommer som en klasse og ikke som stil i
   markupen: CSP-en tillater ingen style-attributter, heller ikke i HTML
   vi bygger selv. */
.hj-lest th.midt, .hj-lest td.midt { text-align: center; }
.hj-lest th.hoyre, .hj-lest td.hoyre { text-align: right; }
/* Treffet i lesevisningen. Samme farge som en omtale i chatten, fordi det er
   den samme saken: noe er lagt fram for deg. */
.hj-lest mark { background: var(--omtale); color: inherit; }

/* Wikilenkene. En lenke til et notat som ikke finnes ennå er rød og svak,
   som i Obsidian: den er ikke en feil, den er noe som ikke er skrevet enda,
   og et trykk lager det. */
.hj-lest .wikilenke, .hj-lest .tagg, .hj-lest .ytre {
  cursor: pointer;
  text-underline-offset: 3px;
}
.hj-lest .wikilenke { color: var(--brand); text-decoration: none; }
.hj-lest .wikilenke:hover { text-decoration: underline; }
.hj-lest .wikilenke.mangler { color: var(--rod); opacity: .75; text-decoration: underline dotted; }
.hj-lest .tagg {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .92em;
  padding: 1px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--flate-2);
}
.hj-lest .tagg:hover { border-color: var(--line-3); color: var(--ink); }

/* Egenskapene øverst i notatet, slik Obsidian viser «properties». */
.hj-egenskaper {
  margin: 0 auto var(--s-5);
  max-width: var(--hj-lesebredde);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--flate-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
}
.hj-egenskaper dl { display: grid; grid-template-columns: 128px 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.hj-egenskaper dt { font-family: var(--font-mono); color: var(--ink-3); }
.hj-egenskaper dd { margin: 0; color: var(--ink-2); }

/* ==========================================================================
   FORSLAGENE MENS MAN SKRIVER

   Ligger over teksten, og er det eneste i Hjernen som har skygge: den
   flyter faktisk over noe annet, og da sier Lodd skygge.
   ========================================================================== */

.hj-forslag {
  position: absolute;
  z-index: 5;
  min-width: 220px;
  max-width: 340px;
  max-height: 260px;
  overflow: hidden auto;
  padding: var(--s-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  box-shadow: var(--over);
}
.hj-forslag[hidden] { display: none; }
.hj-forslag button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-3);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hj-forslag button[aria-selected="true"], .hj-forslag button:hover {
  background: var(--flate-3);
  color: var(--ink);
}
.hj-forslag .sti { color: var(--ink-3); font-size: var(--t-1); font-family: var(--font-mono); }
.hj-forslag .nytt { color: var(--brand); }

/* ==========================================================================
   HØYRE FELT
   ========================================================================== */

.hj-hoyre {
  flex: 0 0 var(--hj-hoyre);
  width: var(--hj-hoyre);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-2);
  background: var(--flate-2);
}

.hj-seksjon { border-bottom: 1px solid var(--line); }
.hj-seksjon > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hj-seksjon > summary::-webkit-details-marker { display: none; }
.hj-seksjon > summary:hover { color: var(--ink); background: var(--flate-3); }
.hj-seksjon > summary .tall {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.hj-seksjon .innmat { padding: 0 var(--s-2) var(--s-3); }

.hj-lenkerad {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-3);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
}
.hj-lenkerad:hover { background: var(--flate-3); color: var(--ink); }
.hj-lenkerad .sti { display: block; font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); }
.hj-lenkerad.mangler { color: var(--rod); }

.hj-taggrad { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
.hj-taggrad button {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--flate);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-2);
  padding: 2px 8px;
  cursor: pointer;
}
.hj-taggrad button:hover { border-color: var(--line-3); color: var(--ink); }

.hj-disposisjon button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-3);
  padding: var(--s-1) var(--s-3);
  padding-left: calc(var(--s-3) + var(--dybde, 0) * var(--s-3));
  border-radius: var(--r-1);
  cursor: pointer;
}
.hj-disposisjon button:hover { background: var(--flate-3); color: var(--ink); }

/* ==========================================================================
   GRAFEN

   Canvas, ikke SVG. To tusen noder som flytter seg seksti ganger i
   sekundet er to tusen DOM-noder som legges om på nytt hver gang, og da
   faller nettleseren sammen lenge før kreftene har roet seg.
   ========================================================================== */

.hj-graf { position: relative; flex: 1 1 auto; min-height: 0; }
.hj-graf canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.hj-graf.drar canvas { cursor: grabbing; }

.hj-grafstyring {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 3;
  width: 220px;
  max-height: calc(100% - 32px);
  overflow: hidden auto;
  padding: var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  box-shadow: var(--over);
}
.hj-grafstyring .etikett { margin-bottom: var(--s-2); }
.hj-grafstyring label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 28px;
  margin: 0;
  font-size: var(--t-2);
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
}
.hj-grafstyring .prikk { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.hj-grafstyring input[type=search] { min-height: 34px; font-size: var(--t-2); margin-bottom: var(--s-3); }
.hj-grafstyring .skille { border: 0; border-top: 1px solid var(--line); margin: var(--s-3) 0; }
.hj-grafstyring .tall {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-1);
  color: var(--ink-3);
}

/* Den lokale grafen i høyre felt. Fast høyde, fordi den er et bilde av
   naboene og ikke et arbeidsrom: får den vokse, spiser den tilbakelenkene. */
.hj-lokalgraf { height: 180px; position: relative; }
.hj-lokalgraf canvas { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   HØYREKLIKKMENYEN

   Obsidian legger nesten alt her. Menyen flyter over alt annet, og er det
   ene stedet --over faktisk hører hjemme.
   ========================================================================== */

.hj-meny {
  position: fixed;
  z-index: 60;
  min-width: 200px;
  padding: var(--s-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--paper);
  box-shadow: var(--over);
}
.hj-meny[hidden] { display: none; }
.hj-meny button {
  display: block;
  width: 100%;
  min-height: 32px;
  text-align: left;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-3);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
}
.hj-meny button:hover, .hj-meny button:focus-visible { background: var(--flate-3); color: var(--ink); }
.hj-meny button.fare { color: var(--rod); }
.hj-meny .skille { border: 0; border-top: 1px solid var(--line); margin: var(--s-1) 0; }

/* ==========================================================================
   KOMMANDOPALETTEN OG HURTIGBYTTEREN
   ========================================================================== */

.hj-palett {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px var(--s-5) var(--s-5);
  background: var(--teppe);
}
.hj-palett[hidden] { display: none; }
.hj-palett .kort {
  width: 100%;
  max-width: 560px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--flate);
  box-shadow: var(--over);
  overflow: hidden;
}
.hj-palett input {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-3) var(--r-3) 0 0;
  box-shadow: none;
  min-height: 52px;
  font-size: var(--t-5);
}
.hj-palett input:focus { box-shadow: none; border-color: var(--line-2); }
.hj-palett .liste { overflow: hidden auto; padding: var(--s-2); }
.hj-palett .liste button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-4);
  padding: var(--s-3) var(--s-4);
  min-height: 40px;
  cursor: pointer;
}
.hj-palett .liste button[aria-selected="true"], .hj-palett .liste button:hover {
  background: var(--flate-3);
  color: var(--ink);
}
.hj-palett .liste .sti { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); }
.hj-palett .liste .tast {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  padding: 1px 8px;
}

/* ==========================================================================
   MELDINGEN NÅR NOEN ANDRE HAR SKREVET

   Rolig, og den står: en dialog ville tatt tastaturet midt i en setning,
   og Theodor og Joar skriver i det samme hvelvet hele dagen.
   ========================================================================== */

.hj-strid {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: 0 auto var(--s-5);
  max-width: var(--hj-lesebredde);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--amber);
  border-radius: var(--r-2);
  background: var(--flate-2);
  font-size: var(--t-3);
  color: var(--ink);
}
.hj-strid[hidden] { display: none; }
.hj-strid .vokser { flex-grow: 1; }

/* Et arkivert notat sier det selv, med veien tilbake i samme linje.
   Violett og ikke amber: dette er en tilstand, ikke noe som er galt. */
.hj-arkivlinje {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: 0 auto var(--s-5);
  max-width: var(--hj-lesebredde);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--violett);
  border-radius: var(--r-2);
  background: var(--flate-2);
  font-size: var(--t-3);
  color: var(--ink-2);
}
.hj-arkivlinje .vokser { flex-grow: 1; }

/* ==========================================================================
   SMAL SKJERM

   Under 900px blir feltene skuffer som legger seg over notatet, og fanene
   blir en velger. Fire spalter på 375px gir 90px hver, og da er ingen av
   dem til nytte.
   ========================================================================== */

@media (max-width: 899px) {
  .modus-hjerne .kropp { flex-direction: column; }
  .hj { position: relative; }
  .hj-handtak { display: none; }

  .hj-venstre, .hj-hoyre {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: min(320px, 86vw);
    flex-basis: auto;
    box-shadow: var(--over);
  }
  .hj-venstre { left: var(--hj-band); }
  .hj-hoyre { right: 0; }

  .hj-skygge {
    position: absolute;
    inset: 0;
    z-index: 10;
    border: 0;
    padding: 0;
    background: var(--teppe);
  }
  .hj-skygge[hidden] { display: none; }

  .hj-faner { display: none; }
  .hj-fanevelger {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    /* Velgeren finnes bare under 900px, altså nesten alltid en finger. */
    min-height: 44px;
    font: inherit;
    font-size: var(--t-3);
    padding: 0 var(--s-3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    background: var(--flate);
    color: var(--ink);
  }
  .hj-ark { padding: var(--s-5) var(--s-4) var(--s-8); }
  .hj-grafstyring { width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .hj-rad .pil { transition: none; }
}

/* ==========================================================================
   BERØRING

   Radene i treet er 28px høye, som i Obsidian, og det er riktig for en mus
   på en stor skjerm: et hvelv med hundre notater skal kunne leses uten å
   rulle. Med en finger er 28 for lite, og da vokser de til gulvet på 44.
   Regelen står på (hover: none) og ikke på bredden, fordi det er pekeren og
   ikke skjermen som avgjør hvor presist man treffer.
   ========================================================================== */

@media (hover: none) {
  .hj-rad, .hj-treff, .hj-lenkerad, .hj-fane, .hj-forslag button, .hj-disposisjon button,
  .hj-seksjon > summary, .hj-grafstyring label, .hj-palett .liste button,
  .hj-taggrad button, .hj-rad input[type=text], .hj-sok input,
  .hj-grafstyring input[type=search], .hj-meny button,
  .hj-lest .hj-callout > summary {
    min-height: 44px;
  }
  /* Krysset er alltid synlig med en finger: det finnes ingen hover å vise
     det på, og en fane man ikke kan lukke må byttes til først. */
  .hj-fane .kryss { opacity: 1; width: 44px; height: 44px; flex-basis: 44px; }
}