/* ==========================================================================
   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 {
  /* MÅLENE HER ER FELLES FOR BEGGE TEMAER, OG DET ER MENINGEN.
     sjekk-lodd.mjs gir en merknad om at --hj-venstre, --hj-hoyre,
     --hj-felt-minst, --hj-felt-mest og --hj-lesebredde ikke er satt i det
     mørke temaet, og den gjelder bredden under her også. Et mål er ikke en
     farge: en spalte er like bred i lyst og mørkt tema, og står tallet to
     steder, står det før eller siden med to verdier. Vakta har en egen liste
     for Lodds egne mål (FELLES i sjekk-lodd.mjs), men --hovedmeny,
     --undermeny og målene her står ikke i den, og den fila deles ut til tre
     repoer med sjekksum. Derfor står forklaringen her, i stedet for at
     merknaden blir stående uten svar. */

  /* 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;

  /* TALLENE UNDER ER FLYTTET HIT 28. SEPTEMBER 2026, IKKE REGNET OM.
     De sto som frie piksler nede i hver sin regel, mens de andre flatene i
     skallet holder bredden sin i et token med gulv og tak. Verdiene er de
     samme som før. Det som er nytt, er at de står samlet: en bredde som bor
     nede i en regel er den som blir glemt den dagen naboen justeres, og
     gulvet og taket er da ikke til å finne uten å lese hele fila. Skal en av
     dem endres, skal den måles i nettleseren først og målingen skrives her,
     slik --hovedmeny og --undermeny er gjort i lodd.css. */

  /* Feltet som skuff, under 900px. Der er det ikke lenger en spalte ved
     siden av teksten, men en skuff som legger seg over den, og bredden
     kommer av telefonen og ikke av draget. 320 er det samme gulvet som
     --chat-bredde-minst i lodd.css: smalere enn det blir et felt med ett ord
     per linje. Regnestykket står ved regelen og ikke her, som --hovedmeny i
     lodd.css: min() med 86vw lar en stripe av innholdet stå igjen ved siden
     av skuffen, så man ser hva man er på vei tilbake til. */
  --hj-skuff: 320px;

  /* De fire som flyter over teksten: forslagene mens man skriver, styringen
     i grafen, høyreklikkmenyen og kommandopaletten. Bredden kommer av
     innholdet og ikke av skalaen, av samme grunn som feltene over: en
     notattittel og et kommandonavn kan ikke brekke midt i et ord. Gulvet er
     der linja fortsatt får plass, taket der panelet begynner å dekke det man
     holder på med. */
  --hj-forslag-minst: 220px;
  --hj-forslag-mest: 340px;
  --hj-meny-minst: 200px;
  --hj-palett-mest: 560px;

  /* Grafstyringen står i hjørnet av lerretet og dekker grafen mens den står
     der. Derfor har den et eget, smalere tall under 900px, der lerretet selv
     er lite. To tokens og ikke ett: verdiene er forskjellige, og en bredde
     som gjelder bare i en media-spørring er like mye en bredde. */
  --hj-styring: 220px;
  --hj-styring-smal: 180px;

  /* Taket på en fane. Navnet klippes med ellipse innenfor, og uten et tak
     ville én fane med en lang tittel tatt hele raden. */
  --hj-fane-mest: 200px;

  /* 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. Ni typer, ni farger, og en tiende 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:       var(--ink-3);   /* fulgte dempet blekk som en kopi, og ble hengende igjen da
                                     lyst tema ble nøytralt 27. september 2026. Peker nå. */
  --hj-beslutning:  #5B3D8F;
  --hj-kunde:       #1B6B3A;
  --hj-person:      #0E1B4D;
  --hj-prosess:     #8A5B00;
  --hj-mote:        #1F5E7A;
  --hj-kilde:       #7A4A2F;
  /* «produkt» og «system» kom 27. september 2026. Fargene er hentet fra
     Lodds egen palett og ikke laget nye: taket på unike fargeverdier kan
     bare synke, og to nye hex-verdier for to nye typer er nettopp den
     driften taket står der for å stoppe. Rødt og rosa er de eneste
     huene ingen av de sju andre typene bruker. */
  --hj-produkt:     var(--rod);
  --hj-system:      var(--person-5);
  --hj-foreldrelos: var(--line-3);   /* fulgte sterkeste strek som en kopi, og ble hengende igjen da
                                     lyst tema ble nøytralt 27. september 2026. Peker nå. */

  /* 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-produkt:     var(--rod);
  --hj-system:      var(--person-5);
  --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-tekst);
}

/* 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: var(--hj-fane-mest);
  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-tekst); }
.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-tekst); text-decoration: none; }
.hj-lest .wikilenke:hover { text-decoration: underline; }
.hj-lest .wikilenke.mangler { color: var(--rod); opacity: .75; text-decoration: underline dotted; }
/* ÉN PILLEFORM, IKKE TRE.
   Taggen i teksten, taggen i høyrefeltet og .pille i lodd.css var tre
   utgaver av den samme tingen: 999px og --flate-2 her, 999px og --flate i
   .hj-taggrad, --r-3 og --flate i malen. 999px er forbeholdt merker, altså
   det som ER et stempel og ikke kan trykkes på (se .merke i lodd.css), og
   begge taggene kan trykkes: et trykk åpner søket etter taggen. Det samme
   ble rettet for .kanalsok .filter og .til-bunnen 27. september 2026, og de
   to her ble hengende igjen. Fra 28. september 2026 peker begge samme vei
   som .pille.

   Navnene står som de er. .tagg og .hj-taggrad button skrives inn i
   malstrenger i hjerne.js, og et klassenavn som ikke finnes feiler i
   stillhet.

   Innerlufta er var(--s-1) var(--s-3) og ikke .pilles var(--s-2): .pille
   sentrerer et tall innenfor et gulv på 26px, mens disse to er ord, og et
   ord trenger luft i enden. Begge er trinn i skalaen. */
.hj-lest .tagg, .hj-taggrad button {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--flate);
  color: var(--ink-2);
}
.hj-lest .tagg:hover, .hj-taggrad button:hover { border-color: var(--line-3); color: var(--ink); }
.hj-lest .tagg { text-decoration: none; font-size: .92em; }

/* 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: var(--hj-forslag-minst);
  max-width: var(--hj-forslag-mest);
  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-tekst); }

/* ==========================================================================
   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); }
/* Formen står sammen med .hj-lest .tagg lenger opp i fila, der begge peker
   på .pille. Her står bare det som er knappens eget. */
.hj-taggrad button {
  font: inherit;
  font-size: var(--t-2);
  cursor: pointer;
}

.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: var(--hj-styring);
  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: var(--hj-meny-minst);
  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: var(--hj-palett-mest);
  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(var(--hj-skuff), 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: var(--hj-styring-smal); }
}

@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; }
}

/* ==========================================================================
   TILFØRSELEN

   Fanen som viser hva Hjernen mates med. Den er en arbeidsflate og ikke et
   notat, og tegnes derfor med Lodds egne deler: .seksjon med etiketten i
   margen, .rad når det er én rad per enhet, og én tabell der tallene fra
   flere matinger skal sammenlignes nedover.

   Alt her står under .hj-tilforsel. Delene har navn fra komponent
   spesifikasjonen (.tabell, .tabellrull, .pille.gjort), men reglene bor her
   til de flyttes til lodd.css for alle tre repoene: en regel som gjelder
   overalt, skal deles ut av del-lodd.sh og ikke smuglastes fra Hjernen.
   ========================================================================== */

.hj-tilforsel {
  flex-grow: 1;
  min-width: 0;
  /* Bare loddrett. Vannrett rulling hører hjemme i .tabellrull og ingen
     andre steder: ruller hele flaten sidelengs, forsvinner loddlinja og
     etikettene i margen ut av bildet. */
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-6) var(--s-7) var(--s-8);
  /* Retning B (spes-design-v2.md 4): ingen loddlinje. Listene og tabellen
     står i kort, som resten av OS-et, og overskriftene står ved kanten. */
}

/* Statuspillene med svakt fyll i fargen, som i resten av B: blekket bærer
   fargen, fyllet gjør den synlig på avstand. */
.hj-tilforsel .pille { font-size: var(--t-2); }
.hj-tilforsel .pille.gjort  { border-color: transparent; background: var(--gronn-svak); color: var(--gronn); }
.hj-tilforsel .pille.venter { border-color: transparent; background: var(--amber-svak); color: var(--amber); }
.hj-tilforsel .pille.feil   { border-color: transparent; background: var(--rod-svak); color: var(--rod); }
.hj-tilforsel .pille.info   { color: var(--ink-3); }

.hj-tilforsel .rad .hoyre { padding-left: var(--s-5); }
.hj-tilforsel .rad .under { white-space: normal; }

/* Én rad per notat i panelet er tettere enn en rad i en liste: den leses i
   bunke, ikke én og én. */
.hj-tilforsel .rad.tett, .hj-panel .rad.tett { min-height: 32px; }
.hj-panel .rad.tett .inn { padding-top: var(--s-4); padding-bottom: var(--s-4); }

/* Tabellen. Ingen loddrette streker og ingen stripete rader: hårstreken
   under hver rad holder, og streker i begge retninger lager et rutenett
   øyet må lese i stedet for tallene. */
.hj-tilforsel .tabellrull {
  margin-left: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hj-tilforsel .tabell { width: 100%; border-collapse: collapse; }
.hj-tilforsel .tabell th, .hj-tilforsel .tabell td {
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.hj-tilforsel .tabell thead th {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.hj-tilforsel .tabell tbody th { font-weight: 500; font-size: var(--t-3); color: var(--ink); white-space: nowrap; }
.hj-tilforsel .tabell td { font-size: var(--t-3); color: var(--ink-2); }
.hj-tilforsel .tabell .hoyre { text-align: right; }
.hj-tilforsel .tabell tbody tr { cursor: pointer; }
.hj-tilforsel .tabell tbody tr:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.hj-tilforsel .maskin { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Skjelettet mens svaret er underveis. Ingen bevegelse: en flate som
   blinker tre ganger i sekundet er verre enn en som står stille, og
   spes-bevegelse.md sier at lasting under et halvt sekund ikke skal
   annonsere seg. */
.hj-tilforsel .rad.skjelett .tittel {
  display: block;
  width: 40%;
  height: 12px;
  border-radius: var(--r-1);
  background: var(--flate-3);
}

.hj-tilforsel .feilboks {
  margin-left: 0;
  padding: var(--s-5);
  border: 1px solid var(--rod);
  border-radius: var(--r-2);
  color: var(--rod);
  font-size: var(--t-3);
}

.hj-tilforsel details > summary {
  margin-left: 0;
  padding: var(--s-4) 0;
  font-size: var(--t-3);
  color: var(--ink-3);
  cursor: pointer;
}

/* Panelet fra høyre er høyre felt, som ellers i Hjernen. Under 900px er
   feltet alt en skuff som legger seg over flaten, med teppet bak. */
.hj-panel { display: flex; flex-direction: column; min-height: 0; }
.hj-panel .hj-rull { padding: 0 var(--s-5) var(--s-6); }
.hj-panel .rad .under { white-space: normal; }

@media (max-width: 899px) {
  .hj-tilforsel { padding: var(--s-5) var(--s-4) var(--s-8); }
  /* På 375px får ikke tittel, pille, to tall og en knapp plass på én
     linje. Da brytes raden i stedet for å skyve flaten sidelengs. */
  .hj-tilforsel .rad .inn { flex-wrap: wrap; }
  .hj-tilforsel .rad .hoyre { padding-left: 0; }
}

@media (hover: none) {
  .hj-tilforsel .tabell tbody tr { height: 44px; }
}

/* TILFØRSEL I EN SMAL SPALTE (1. oktober 2026, steg 15). Flaten står i den
   midterste spalten i Hjernen, som på 1280 med feltet til høyre åpent bare
   er et par hundre punkter bred. Radene ligger i kort, og margen bærer bare
   statussegmentet, så den er smal som i Lager. Er spalten smal, brytes
   raden: navnet og forklaringen på hele bredden, pillen, tidene og knappen
   på linja under, i stedet for ett ord per linje og tall utenfor kortet. */
.hj-tilforsel { container-type: inline-size; }
.hj-tilforsel .kort .rad > .marg { width: var(--s-5); flex: 0 0 var(--s-5); padding-right: 0; }
.hj-tilforsel .kort .rad > .marg .segment { left: 0; right: auto; top: var(--s-4); height: var(--s-5); border-radius: var(--r-1); }
@container (max-width: 599px) {
  .hj-tilforsel .rad .inn { flex-wrap: wrap; row-gap: var(--s-2); }
  .hj-tilforsel .rad .inn > .vokser { flex: 1 1 100%; }
  .hj-tilforsel .rad .hoyre { padding-left: 0; }
}