/* ==========================================================================
   LODD

   Designspråket for Nordiva, tegnet 25. september 2026 og brukt her for
   første gang fra bunnen av. De andre flatene får det som en overstyring
   over et arvet stilark; denne har ingen arv å rydde bort.

   Tre regler bærer hele filen:

     1. SKALAER MED TRINN. Åtte skriftstørrelser, åtte lufttrinn, tre
        radiuser. Ingenting imellom. Det er repetisjonen som leses som
        presisjon, ikke verdiene i seg selv.

     2. KANT I STEDET FOR SKYGGE. En hårstrek bærer strukturen. Skygge er
        forbeholdt det som faktisk flyter over noe annet. Har noe skygge,
        ligger det over noe.

     3. LODDLINJA. Én loddrett hårstrek går gjennom hver skjerm på samme
        sted. Til venstre for den ligger margen med maskinelle verdier, til
        høyre ligger saken. Status er et lite segment som sitter PÅ linja, så
        en ren linje betyr at ingenting krever noe av deg.
   ========================================================================== */

:root {
  --font-ui:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --t-1: 11px;  --t-1-h: 16px;
  --t-2: 12px;  --t-2-h: 18px;
  --t-3: 13px;  --t-3-h: 20px;
  --t-4: 15px;  --t-4-h: 22px;
  --t-5: 17px;  --t-5-h: 26px;
  --t-6: 20px;  --t-6-h: 26px;
  --t-7: 26px;  --t-7-h: 32px;
  --t-8: 34px;  --t-8-h: 40px;

  --s-1: 2px;  --s-2: 4px;  --s-3: 8px;  --s-4: 12px;
  --s-5: 16px; --s-6: 24px; --s-7: 32px; --s-8: 48px;

  --r-1: 3px; --r-2: 6px; --r-3: 10px;

  --tid-1: 90ms; --tid-2: 140ms; --tid-3: 180ms;
  --kurve: cubic-bezier(.2, 0, 0, 1);

  /* Margen er 72px bred, linja står på 72. Alt innhold starter 20px inn
     fra den. Tallet gjentas i hver skjerm, så det bor i ett token. */
  --marg: 72px;

  /* Innrykket fra loddlinja til teksten. Ett tall, brukt overalt, så
     margen og innholdet flukter på hver eneste skjerm. */
  --inn: 16px;

  /* Høyden på selve topplinja, uten klokka og signalet på iPhone. På telefon
     legger chatten seg under den, og må kjenne tallet. */
  --topplinje: 52px;

  /* Bredden på chatpanelet. Den kommer utenfra, fra hvor bredt det er dratt,
     og huskes i localStorage, så den kan ikke være et trinn i skalaen. Gulvet
     og taket holder den brukbar: smalere enn 320 blir en melding til ett ord
     per linje, bredere enn 560 spiser panelet skjermen det står ved siden av. */
  --chat-bredde: 380px;
  --chat-bredde-minst: 320px;
  --chat-bredde-mest: 560px;

  /* Den smaleste spalten vi vil sitte igjen med når panelet står åpent. Den
     kommer utenfra, som de tre over: det er bredden på en telefon, ikke et
     trinn i skalaen. Den bor her og ikke i os.js, for det er den fjerde
     verdien i det samme regnestykket, og en av fire som bor et annet sted er
     den som blir glemt den dagen taket justeres. */
  --innhold-minst: 375px;

  /* Bredden på vindusknappene i appen på Mac. Den kommer fra macOS, ikke
     fra skalaen vår, og kan ikke rundes til et trinn: treffer den ikke,
     ligger merket enten oppå en knapp eller for langt inne. */
  --knapper-mac: 78px;

  --brand:       #0E1B4D;
  --brand-rgb:   14 27 77;
  --brand-hover: #16265F;
  --brand-blekk: #FFFFFF;

  --paper:  #F7F6F4;
  --flate:  #FFFFFF;
  --flate-2:#F2F1EE;
  --flate-3:#EDEBE7;
  --line:   #E8E6E1;
  --line-2: #DEDBD4;
  --line-3: #C9C5BC;

  --ink:    #14182B;
  --ink-2:  #2E3447;
  --ink-3:  #6B7183;

  --gronn:  #1B6B3A;
  --rod:    #9B2226;
  --amber:  #8A5B00;
  --violett:#5B3D8F;

  --relieff: inset 0 1px 0 rgb(255 255 255 / .70);
  --over:    0 1px 2px rgb(14 27 77 / .08), 0 8px 24px rgb(14 27 77 / .12);
  --fokus:   0 0 0 1px var(--flate), 0 0 0 3px rgb(var(--brand-rgb) / .38);

  /* Skjermen bak video og bilder er mørk i begge temaer. Et klipp skal
     bedømmes på sin egen eksponering, ikke på flaten rundt. */
  --skjerm: #14161C;
}

:root[data-tema="mork"] {
  --brand:       #4C7DFF;
  --brand-rgb:   76 125 255;
  --brand-hover: #6A92FF;
  --brand-blekk: #0A0F1F;

  --paper:  #0A0F1F;
  --flate:  #111728;
  --flate-2:#161D31;
  --flate-3:#1C243A;
  --line:   #1F2739;
  --line-2: #2A3349;
  --line-3: #3A4560;

  --ink:    #E9EEFB;
  --ink-2:  #C3CBE0;
  --ink-3:  #8A93AC;

  --gronn:  #5FD99B;
  --rod:    #F08A85;
  --amber:  #E8B75B;
  --violett:#B79BEC;

  --relieff: inset 0 1px 0 rgb(255 255 255 / .045);
  --over:    0 1px 2px rgb(0 0 0 / .45), 0 8px 24px rgb(0 0 0 / .38);
  --fokus:   0 0 0 1px var(--flate), 0 0 0 3px rgb(var(--brand-rgb) / .45);
  --skjerm: #05091C;
}

/* «hidden» skal bety skjult. Standardregelen taper mot enhver annen
   display-regel, og da står det knapper på skjermen som ikke gjør noe. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  -webkit-font-smoothing: antialiased;
}

:root[data-tema="mork"] body {
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgb(var(--brand-rgb) / .20), transparent 62%),
    radial-gradient(900px  520px at 92% 108%, rgb(var(--brand-rgb) / .11), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-8); line-height: var(--t-8-h); }
h2 { font-size: var(--t-7); line-height: var(--t-7-h); letter-spacing: -.01em; }
h3 { font-size: var(--t-6); line-height: var(--t-6-h); letter-spacing: -.005em; }
p  { margin: 0 0 var(--s-4); }
a  { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration: none; }

:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r-2); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.etikett {
  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);
  margin: 0;
}
.svak  { color: var(--ink-3); }
.enhet { color: var(--ink-3); }

/* --- knapper --------------------------------------------------------------
   Ett primitiv, tre roller, to størrelser. Gulvet er 44px, fordi det er det
   en finger trenger. Tetthet hentes fra skrift og kanter, aldri fra å
   krympe trykkflater. */
.knapp {
  font: inherit;
  font-size: var(--t-4);
  font-weight: 600;
  min-height: 44px;
  padding: 0 var(--s-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  border: 1px solid var(--brand);
  border-radius: var(--r-2);
  background: var(--brand);
  color: var(--brand-blekk);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tid-1) var(--kurve), border-color var(--tid-1) var(--kurve);
}
.knapp:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.knapp:active { transform: scale(.985); }
.knapp[disabled] { opacity: .5; cursor: not-allowed; }
.knapp.full { width: 100%; }

.knapp.rolig {
  background: var(--flate);
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: var(--relieff);
}
.knapp.rolig:hover { background: var(--flate-3); border-color: var(--line-3); }

.knapp.naken {
  background: none;
  border-color: transparent;
  color: var(--ink-2);
  font-weight: 500;
  box-shadow: none;
}
.knapp.naken:hover { background: var(--flate-3); border-color: transparent; }

.knapp.liten { min-height: 44px; padding: 0 12px; font-size: var(--t-3); font-weight: 500; }

.knapperad { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Luften over knappen «Bruk en annen adresse». Står som klasse, ikke som
   style-attributt: sikkerhetshodet (statisk/_headers) tillater ikke stil i
   selve HTML-en. */
.luft-over { margin-top: var(--s-5); }

/* --- felt ----------------------------------------------------------------- */
label { display: block; font-size: var(--t-3); font-weight: 500; color: var(--ink-2); margin-bottom: var(--s-3); }
input[type=email], input[type=text], input[type=search] {
  font: inherit;
  font-size: var(--t-4);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  color: var(--ink);
  box-shadow: var(--relieff);
}
input:focus { outline: none; border-color: var(--brand); box-shadow: var(--fokus); }
input::placeholder { color: var(--ink-3); }
.kodefelt {
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: .3em;
  text-align: center;
  min-height: 56px;
}
.feilmelding { color: var(--rod); font-size: var(--t-3); line-height: var(--t-3-h); margin: var(--s-3) 0 0; }
.feilmelding:empty { display: none; }

/* --- innlogging -----------------------------------------------------------
   Romsligere enn arbeidsflaten med vilje. Dette er en skjerm du ser sjelden,
   gjør én ting på, og ofte på telefon. */
.loggside {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-5);
}
.loggkort {
  width: 100%;
  max-width: 420px;
  padding: var(--s-8) var(--s-7) var(--s-7);
  background: var(--flate);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--over);
}
.loggkort h1 { font-size: var(--t-8); margin-bottom: var(--s-3); }
.loggkort .etikett { margin-bottom: var(--s-5); }
.loggkort .ingress { color: var(--ink-3); font-size: var(--t-4); margin-bottom: var(--s-6); }
.loggkort .felt { margin-bottom: var(--s-5); }

/* --- skallet -------------------------------------------------------------- */
/* SPALTEN RULLER, IKKE SIDEN.

   Skallet fyller vinduet og ruller aldri selv. Det er .innhold som har sin
   egen rulleposisjon, som hovedspalten i Slack og Linear, og chatpanelet
   ligger utenfor den.

   Grunnen står i en måling fra 26. september 2026: da HELE siden rullet,
   endret chatpanelet dokumenthøyden hver gang det ble åpnet eller lukket.
   På Rutiner falt høyden fra 1680 til 1134, nettleseren klemte
   rulleposisjonen fra 700 til 334, og raden man leste sto 366px lenger nede
   etter én runde av og på. Nå rikker ikke dokumenthøyden seg. */
.ramme { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

.topplinje {
  /* 52 er høyden på selve linja. Lagt på Hjem-skjermen kommer klokka og
     signalet på iPhone oppå siden, så linja vokser med akkurat den høyden
     og skyver innholdet ned. Utenfor en telefon er verdien 0. */
  height: calc(var(--topplinje) + env(safe-area-inset-top, 0px));
  flex: 0 0 auto;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--paper);
  position: sticky;
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 20;
}
.merke { font-family: var(--font-display); font-size: var(--t-6); line-height: 1; color: var(--ink); text-decoration: none; }
.topplinje .vokser { flex-grow: 1; }

.ikonknapp {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  color: var(--ink-3);
  cursor: pointer;
  box-shadow: var(--relieff);
}
.ikonknapp:hover { color: var(--ink); border-color: var(--line-3); }
.ikonknapp svg { width: 16px; height: 16px; }
/* 32px er under gulvet for en finger. På berøring legges det et usynlig lag
   utenpå knappen, så flata blir 44 uten at ruta vokser: tre ruter på 44 i en
   topplinje på 375 ville dyttet «Logg ut» ut av linja. */
@media (hover: none) {
  .ikonknapp { position: relative; }
  .ikonknapp::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
  }
}

/* CHATKNAPPEN. Tallet for uleste sitter PÅ ikonet, som i innboksikonet i
   Linear, ikke som en rad i menyen: chatten er ett sted du kan gå til
   uansett hvor du står, ikke et av systemene i lista. Amber betyr at noe
   venter på deg, her som på Hjem. Blekket er --paper, som snur med temaet:
   amber er mørk i lyst tema og lys i mørkt. */
.chatknapp { position: relative; }
.chatknapp[aria-expanded="true"] { background: var(--flate-3); color: var(--ink); border-color: var(--line-3); }
.chatknapp .tall {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--s-2);
  border-radius: 999px;
  background: var(--amber);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.initialer {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand);
  color: var(--brand-blekk);
  font-family: var(--font-mono);
  font-size: var(--t-2);
}

.kropp { flex-grow: 1; display: flex; min-height: 0; }

.sidemeny {
  width: 212px;
  flex: 0 0 212px;
  border-right: 1px solid var(--line-2);
  padding: var(--s-5) var(--s-4) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  overflow-y: auto;
}
.sidemeny .etikett { padding: 0 var(--s-4); margin: var(--s-5) 0 var(--s-3); }
.sidemeny .etikett:first-child { margin-top: 0; }
.sidemeny button, .sidemeny a {
  font: inherit;
  font-size: var(--t-4);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 34px;
  padding: var(--s-2) var(--s-4);
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}
.sidemeny button:hover, .sidemeny a:hover { background: var(--flate-3); color: var(--ink); }
.sidemeny button[aria-current="true"] { background: var(--flate-3); color: var(--ink); font-weight: 500; }
.sidemeny .tall { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-2); color: var(--amber); }
.sidemeny .prikk { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; }

.innhold {
  flex-grow: 1;
  min-width: 0;
  padding: var(--s-7) var(--s-7) var(--s-8);
  position: relative;
  /* Rulleområdet. Se .ramme over: dokumenthøyden skal ikke rikke seg av at
     chatpanelet åpnes, og da må spalten bære rullingen selv. */
  overflow: hidden auto;
  /* Innholdet kan være smalt selv om vinduet er bredt: chatpanelet tar av
     bredden. Derfor spør radene under om hvor bredt INNHOLDET er, ikke hvor
     bredt vinduet er. Uten dette la klokka seg oppå tittelen på Hjem første
     gang panelet sto åpent på en skjerm på 900. */
  container-type: inline-size;
  container-name: innhold;
  /* LODDLINJA. Én strek, samme sted på hver skjerm. Den er en BAKGRUNN og
     ikke et element: et element med top 0 og bottom 0 inne i en boks som
     ruller, ruller bort sammen med innholdet, og da står streken bare på den
     første skjermhøyden. Samme grep som i .strom, av samme grunn. */
  background-image: linear-gradient(var(--line-2), var(--line-2));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: calc(var(--s-7) + var(--marg)) 0;
}

.skjerm { display: none; }
.skjerm.pa { display: block; }

.sidetopp {
  display: flex;
  align-items: flex-end;
  gap: var(--s-5);
  padding-left: calc(var(--marg) + var(--inn));
  margin-bottom: var(--s-3);
}
.sidetopp .vokser { flex-grow: 1; }
.ingress {
  padding-left: calc(var(--marg) + var(--inn));
  margin: 0 0 var(--s-6);
  color: var(--ink-3);
  font-size: var(--t-4);
  max-width: 68ch;
}

/* --- rader ----------------------------------------------------------------
   Ett radsystem for hele skallet. Radene deler flate og skilles av en
   hårstrek. De er ikke kort: et kort per rad gjør at øyet må finne
   venstrekanten på nytt for hver linje. */
.bolk { display: flex; align-items: center; min-height: 34px; margin-top: var(--s-6); }
.bolk .etikett { width: var(--marg); flex: 0 0 var(--marg); padding-right: var(--s-4); text-align: right; }
.bolk .hva { flex-grow: 1; padding-left: var(--inn); font-size: var(--t-3); color: var(--ink-3); }

.rad { display: flex; align-items: stretch; min-height: 48px; border-bottom: 1px solid var(--line); }
.rad:first-of-type { border-top: 1px solid var(--line); }

.rad .marg {
  width: var(--marg);
  flex: 0 0 var(--marg);
  position: relative;
  padding: var(--s-4) var(--s-4) 0 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}
/* Segmentet sitter PÅ linja, midtstilt mot radens første tekstlinje. */
.rad .marg .segment {
  position: absolute;
  right: -1px;
  top: var(--s-4);
  width: 2px;
  height: 16px;
  background: var(--ink-3);
}
.seg-venter { background: var(--amber) !important; }
.seg-gjort  { background: var(--gronn) !important; }
.seg-feil   { background: var(--rod) !important; }
.seg-info   { background: var(--line-3) !important; }

.rad .inn {
  flex-grow: 1;
  min-width: 0;
  padding: var(--s-3) 0 var(--s-3) var(--inn);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
a.rad { text-decoration: none; color: inherit; }
a.rad:hover { background: var(--flate-3); }

.rad .tittel { display: block; font-size: var(--t-4); font-weight: 500; color: var(--ink); }
.rad .under  { display: block; font-size: var(--t-3); color: var(--ink-3); }
.rad .vokser { flex-grow: 1; min-width: 0; }
.rad .hoyre  { font-family: var(--font-mono); font-size: var(--t-3); color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.hode {
  display: flex;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid var(--line-2);
}
.hode .marg { width: var(--marg); flex: 0 0 var(--marg); padding-right: var(--s-4); text-align: right; }
.hode .inn { flex-grow: 1; padding-left: var(--inn); display: flex; align-items: center; gap: var(--s-5); }
.hode span { font-family: var(--font-mono); font-size: var(--t-1); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* --- tomme tilstander ----------------------------------------------------- */
.tomt {
  padding: var(--s-6) 0 var(--s-6) calc(var(--marg) + var(--inn));
  color: var(--ink-3);
  font-size: var(--t-4);
}

/* --- statusord ------------------------------------------------------------ */
.status { font-size: var(--t-3); font-weight: 500; white-space: nowrap; }
.status.ok       { color: var(--gronn); }
.status.advarsel { color: var(--amber); }
.status.feil     { color: var(--rod); }
.status.ukjent   { color: var(--ink-3); }

/* --- smal skjerm ----------------------------------------------------------
   Under 900px legger menyen seg som en rullbar rad over innholdet, og margen
   krymper. Loddlinja blir stående: den er strukturen, ikke pynt. */
@media (max-width: 899px) {
  .kropp { flex-direction: column; }
  .sidemeny {
    width: auto;
    flex: 0 0 auto;
    flex-direction: row;
    gap: var(--s-2);
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
    padding: var(--s-3) var(--s-4);
    overflow-x: auto;
  }
  .sidemeny .etikett { display: none; }
  .sidemeny button, .sidemeny a { white-space: nowrap; }
  .innhold { padding: var(--s-6) var(--s-5) var(--s-8); background-position: calc(var(--s-5) + var(--marg)) 0; }
}
@media (max-width: 599px) {
  :root { --marg: 56px; }
}

/* Radene brekker når SPALTEN er smal, uansett hvor bredt vinduet er.
   Knekkpunktet står nede ved kolonnene, så de to reglene aldri kan komme i
   utakt. */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .knapp:active { transform: none; }
}

/* Bryteren viser MÅLET, ikke tilstanden: står flaten lyst, ser du månen du
   kan trykke på. En sol i lyst tema ville beskrevet det du allerede ser. */
#temabryter .sol, #temabryter .mane { display: none; }
:root[data-tema="lys"]  #temabryter .mane { display: block; }
:root[data-tema="mork"] #temabryter .sol  { display: block; }

/* KOLONNENE MÅ FLUKTE MED HODET

   Bredden står ett sted, og både hoderaden og radene under bruker den. Ble
   den satt i markupen per rad, ville hodet og innholdet drevet fra hverandre
   første gang noen endret det ene. */
.kol-plan   { width: 180px; flex: 0 0 180px; text-align: right; }
.kol-hvor   { width: 200px; flex: 0 0 200px; text-align: right; }
.kol-helse  { width: 150px; flex: 0 0 150px; text-align: right; }
.kol-venter { width: 48px;  flex: 0 0 48px;  text-align: right; }
.kol-sett   { width: 96px;  flex: 0 0 96px;  text-align: right; }
.kol-bosted { width: 240px; flex: 0 0 240px; font-size: var(--t-3); }
.hode .kol-plan, .hode .kol-hvor, .hode .kol-helse,
.hode .kol-venter, .hode .kol-sett, .hode .kol-bosted { display: block; }

/* NÅR SPALTEN IKKE HAR PLASS TIL RUTENETTET

   744 er et SPALTEMÅL, ikke et vindusmål, og det er regnet ut og ikke arvet.
   Forrige gang ble vindustallet 899 gjenbrukt uendret på en spørring mot
   spalten, og da flyttet terskelen seg fra vindu 899 til vindu 1175:
   hoderaden på Drift, Rutiner og Nøkler forsvant på et vindu på 1100 med
   chatten LUKKET, altså på en helt alminnelig 13-tommer.

   Regnestykket er hva kolonnene FAKTISK trenger på den bredeste skjermen,
   Rutiner: 180 til tittelen, 412 til de to faste kolonnene med luft mellom
   (180 + 200 + 2 x 16), og 152 til margen, innrykket og lufta i spalten.
   Under det klemmes tittelen, og da er rutenettet ikke verdt prisen.

   Da gir radene opp rutenettet: kolonnene tar bredden sin av innholdet,
   raden brekker om den må, og hoderaden går bort med dem. Står tallene i
   kolonner som ikke får plass, havner de oppå hverandre. */
@container innhold (max-width: 744px) {
  .kol-plan, .kol-hvor, .kol-helse, .kol-venter, .kol-sett, .kol-bosted {
    width: auto; flex: 0 1 auto; min-width: 0; text-align: left;
  }
  .rad .inn { flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
  .rad .hoyre { text-align: left; }
  /* Har raden faste kolonner, tar tittelen hele linja og verdiene står
     samlet på linja under. Uten dette brakk noen rader og andre ikke, alt
     etter hvor lang tittelen tilfeldigvis var, og da sto de samme verdiene
     på ulik linje fra rad til rad. Hjem har ingen slike kolonner, og der
     blir klokkeslettet stående ved siden av tittelen som før. */
  .rad .inn:has(.kol-plan, .kol-hvor, .kol-helse, .kol-bosted) .vokser { flex-basis: 100%; }
  /* Tittelen er saken, og den skal ikke klemmes til ett ord per linje fordi
     nabokolonnen har en lang verdi. Målt på 1280 med panelet på 380:
     «Meta-synk, video» sto 68px bred og 66px høy, mens raden rett over sto
     på én linje. 180 er samme mål som .kol-plan har over. */
  .rad .vokser { min-width: 180px; }
  /* Verdiene brekker heller enn å bli klippet bort. «7, 22, 37 og 52 over
     hver time» stakk forbi høyrekanten og mistet halen sin uten at et eneste
     tegn sa fra, og en rutinetid uten slutten på seg ser komplett ut. */
  .rad .hoyre.kol-plan, .rad .hoyre.kol-hvor { white-space: normal; }
  .hode { display: none; }
}

/* Første kolonne i hodet må vokse på samme måte som i radene, ellers
   klemmes de faste kolonnene inn mot venstre og står under feil tall. */
.hode .vokser { flex-grow: 1; min-width: 0; }

/* Modullenkene tegnes inn i en egen beholder, men skal oppføre seg som om
   de sto rett i menyen. Uten dette ble de en søyle inni menyraden på
   telefon, og «Hjem» ble en høy boks ved siden av. */
#modulmeny { display: contents; }

/* Knapper og feil under en liste starter der teksten i radene starter, til
   høyre for loddlinja, ikke ute i margen. */
.etter-liste { padding-left: calc(var(--marg) + var(--inn)); margin-top: var(--s-4); }

/* Teksten i margen kuttes med ellipse når den er for lang. Den får sin egen
   boks, fordi segmentet som sitter på linja ligger en piksel utenfor margen
   og ville blitt kuttet bort sammen med teksten. */
.margtekst { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   CHAT

   Chatten er et PANEL langs høyre kant, ikke en skjerm i .innhold. Grunnen
   er at den er noe annet enn systemene: den går på tvers av dem, og skal
   kunne stå åpen mens du leser en levering på Hjem.

   Lodd gjelder her som ellers, men margen er smalere: 56 i stedet for 72.
   72px av et panel på 320 er en firedel av bredden, og da blir en melding
   til én setning per linje. 56 er ikke et nytt mål: det er det samme tallet
   skallet selv bruker på telefon.

   Én ting om gangen: lista, og samtalen OVER lista. To kolonner side om
   side fikk plass da chatten var en hel skjerm, men aldri i et panel på
   320 til 560. Tråden åpnes på samme måte, i stedet for samtalen.
   ========================================================================== */

/* --- panelet ---------------------------------------------------------------
   Som trådpanelet i Slack og sakspanelet i Linear: det DYTTER innholdet i
   stedet for å legge seg oppå det. Derfor er det et søsken til .innhold i
   .kropp, og ikke position: fixed.

   Panelet fyller høyden i .kropp og ruller aldri selv: det er .innhold som
   ruller ved siden av, og strømmen som ruller inni. Det sto en stund med
   position: sticky, og det kostet mer enn det ga: sticky lager ALLTID en ny
   stablekontekst, og da ble lysbordet på z-index 60 fanget inni panelet og
   lå under topplinja i stedet for over den.

   Ingen overgang når det åpnes eller lukkes. En bredde som animerer fra null
   flytter på hver eneste rad i innholdet mens den går, og det er pynt som
   koster lesbarhet. Bredden følger pekeren nøyaktig under et drag, av samme
   grunn. Det eneste som tones er streken i håndtaket. */
.chatpanel {
  flex: 0 0 var(--chat-bredde);
  width: var(--chat-bredde);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-2);
  background: var(--paper);
  padding: 0 var(--s-5);
  /* Rammen for lukkeknappen når den flytter seg opp i samtalens egen rad,
     se «ÉN TOPP, IKKE TO» under. */
  position: relative;
  /* Hjulet skal bli i panelet. Uten dette rullet Rutiner bak fra 0 til 500
     mens pekeren sto midt i chatten, og man mistet plassen sin uten å se det. */
  overscroll-behavior: contain;
  --marg: 56px;
}
/* Panelet får fokus når det åpnes, så Esc og skjermleseren treffer riktig
   sted med en gang. Det er ikke en klikkflate, så en ring rundt hele
   panelet ville vært støy. Tastaturet får ringene sine på knappene inni. */
.chatpanel:focus { outline: none; }

.chatpanel-topp {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  border-bottom: 1px solid var(--line-2);
}
.chatpanel-topp h2 {
  margin: 0;
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  font-weight: 600;
  color: var(--ink);
}
.chatpanel-topp .vokser { flex-grow: 1; }

/* ÉN TOPP, IKKE TO

   Panelet har sin egen topp med «Chat» og et kryss, og samtalen har sin med
   vinkelen tilbake og navnet på kanalen. Sto de over hverandre, gikk det
   100px fra panelets overkant til den første meldingen i et panel på 380,
   og kommentaren i chat.js sier selv at to titler i en smal spalte er ren
   støy. Veien tilbake og veien ut sto dessuten i hver sin rad i hver sin
   ende, og da er de vanskeligere å skille enn om de står sammen.

   Er en samtale åpen, flytter krysset seg opp i samtalens egen rad, som i
   trådpanelet i Slack: vinkelen tilbake til venstre, navnet i midten,
   krysset ut til høyre. Er den ikke det, er panelets topp den eneste raden,
   og da står «Chat» der som før.

   Bare på stor skjerm. På telefon legger samtalen seg over hele flaten,
   panelets topp inkludert, så der har det aldri vært to. */
@media (min-width: 900px) {
  .chatpanel:has(.chat.apen) .chatpanel-topp {
    position: absolute;
    /* 12 er lufta over samtalen, .chat sin margin-top, og høyden er navnets
       linjehøyde: da flukter krysset med kanalnavnet og med vinkelen, ikke
       med mellomrommet under dem. */
    top: var(--s-4);
    right: var(--s-5);
    min-height: 0;
    height: var(--t-5-h);
    border-bottom: 0;
    z-index: 1;
  }
  .chatpanel:has(.chat.apen) .chatpanel-topp h2 { display: none; }
  /* Navnet på kanalen skal ikke gli inn under krysset. */
  .chatpanel:has(.chat.apen) .samtale-topp { padding-right: var(--s-8); }
}

/* HÅNDTAKET. Samme sone som i Slack og Linear: smal, med col-resize, og
   usynlig til pekeren er på den. Den ligger halvveis utenfor panelet, så
   den er lett å treffe uten å spise plass fra teksten. touch-action: none,
   ellers tar nettleseren pekeren til rulling midt i draget. */
.chathandtak {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  /* 8, ikke 6: seks piksler er i tynneste laget å sikte på, og Slack og
     Linear ligger begge rundt åtte. */
  width: 8px;
  z-index: 1;
  cursor: col-resize;
  touch-action: none;
}
.chathandtak::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand);
  opacity: 0;
  transition: opacity var(--tid-1) var(--kurve);
}
.chathandtak:hover::after,
.drar .chathandtak::after { opacity: 1; }
/* Fokus skal ikke se ut som en peker som tilfeldigvis er i nærheten. Streken
   får ringen fra Lodd rundt seg, den samme som feltene bruker, så det er
   tydelig at tastaturet står her og at piltastene gjør noe. */
.chathandtak:focus-visible::after { opacity: 1; box-shadow: var(--fokus); }
.chathandtak:focus-visible { outline: none; }
/* Mens det dras skal HELE flaten ha col-resize, ikke bare de seks pikslene:
   pekeren kommer alltid litt foran eller bak kanten under et drag. */
.drar, .drar * { cursor: col-resize !important; user-select: none; }

/* Skjermen fyller panelet under toppen, og bare strømmen inni ruller. */
#skjerm-chat { flex: 1 1 auto; min-height: 0; }
#skjerm-chat.pa { display: flex; flex-direction: column; }

.chat {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: var(--s-4);
}
.chat-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--s-5); }

/* Samtalen ligger OVER lista, i panelet, ikke ved siden av den. Lista skjules
   mens den ligger under: den er dekket uansett, og en dekket rad som likevel
   tar imot tabulator sender fokus til noe ingen kan se. */
.chat.apen .chat-liste { visibility: hidden; }
.chat .samtale { display: none; }
.chat.apen .samtale {
  display: flex;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--paper);
}

.chat-etikett { padding-left: calc(var(--marg) + var(--inn)); margin: var(--s-6) 0 var(--s-3); }
.chat-etikett:first-child { margin-top: 0; }
.chat-liste .tomt { padding: var(--s-3) 0 var(--s-4) calc(var(--marg) + var(--inn)); font-size: var(--t-3); line-height: var(--t-3-h); }
.chat-listefeil { padding-left: calc(var(--marg) + var(--inn)); }

/* Radene er knapper, fordi et trykk gjør noe. De skal likevel se ut som
   radene på Hjem, så knappens egen drakt tas av. */
button.chat-rad {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  cursor: pointer;
}
button.chat-rad:hover { background: var(--flate-2); }
button.chat-rad[aria-current="true"] { background: var(--flate-3); }
button.chat-rad[disabled] { cursor: progress; }
.chat-rad .tittel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rad .under { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rad.ulest .tittel { font-weight: 600; }
.chat-rad.ulest .under { color: var(--ink-2); }
.chat-rad .hoyre { align-self: flex-start; padding-top: var(--s-1); font-size: var(--t-2); color: var(--ink-3); }

/* --- samtalen ------------------------------------------------------------- */
.samtale { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Toppen i samtalen følger loddlinja som alt annet: veien tilbake står i
   margen, til venstre for linja, og navnet på samtalen begynner PÅ linja,
   rett over teksten i den første meldingen. */
.samtale-topp {
  display: flex;
  /* flex-start og ikke center: hodet er to linjer, navnet og beskrivelsen,
     og med center pekte vinkelen mot mellomrommet mellom dem. Målt i et
     panel på 380: navnet sto med sentrum på 114, vinkelen på 124. Nå
     flukter de, som i Slack og Linear. */
  align-items: flex-start;
  /* Hodet skal ikke gi etter for strømmen. Uten dette klemte samtalen det
     ned til sin egen min-height på 44, og beskrivelsen under kanalnavnet
     lå 2px nede i den første meldingen. */
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 0 var(--s-4);
  border-bottom: 1px solid var(--line-2);
}
.samtale-topp .vokser { flex-grow: 1; min-width: 0; padding-left: var(--inn); }
/* Vinkelen går ett steg tilbake: fra tråden til samtalen, fra samtalen til
   lista. Den sto bare på telefon da lista og samtalen lå side om side på
   stor skjerm. Nå er det én kolonne overalt, og da er den eneste veien ut.
   Den fyller hele margen, så klikkflata er 56 bred og 44 høy. */
.samtale-topp .tilbake {
  flex: 0 0 var(--marg);
  width: var(--marg);
  justify-content: flex-start;
  /* Flata er hele margen, 56 bred og 44 høy, men SELVE vinkelen sitter på
     navnets linje: 4 over ikonet setter sentrum i det på 13, som er midt i
     en linje på 26. Knappen strekker seg ned under navnet, der det bare er
     beskrivelsen, og stjeler ingenting. */
  align-items: flex-start;
  padding: var(--s-2) 0 0;
  color: var(--ink-3);
}
.samtale-topp .tilbake:hover { color: var(--ink); background: none; }
.samtale-topp .tilbake svg { width: 18px; height: 18px; }
.samtale-navn {
  font-size: var(--t-5);
  line-height: var(--t-5-h);
  font-weight: 600;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.samtale-om {
  margin: 0;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Linja i samtalen er en bakgrunn, ikke et element. Et element med top: 0
   og bottom: 0 inne i en boks som ruller, ruller bort med innholdet, og da
   står linja bare på den første skjermhøyden. */
.strom, .skriv {
  background-image: linear-gradient(var(--line-2), var(--line-2));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: var(--marg) 0;
}
.strom {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  padding-bottom: var(--s-5);
}

.eldre { padding: var(--s-4) 0 0 calc(var(--marg) + var(--inn) - var(--s-4)); }

.melding { display: flex; align-items: flex-start; position: relative; }
.melding.forst { margin-top: var(--s-4); }
.melding .marg {
  width: var(--marg);
  flex: 0 0 var(--marg);
  padding: var(--s-1) var(--s-4) 0 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
/* Klokka står bare ved første melding i en rekke. På de neste kommer den
   fram når pekeren står over, så margen ikke blir en søyle av like tall. */
.melding.fortsatt .klokke { visibility: hidden; }
.melding.fortsatt:hover .klokke, .melding.fortsatt:focus-within .klokke { visibility: visible; }

/* Bakgrunnen ved pekeren ligger på saken, ikke på hele raden. Lå den på
   raden, ville den dekket linja. */
.melding .sak { flex: 1 1 0; min-width: 0; padding: 0 var(--s-4) var(--s-1) var(--inn); border-radius: var(--r-1); }
.melding:hover .sak { background: var(--flate-2); }
.melding .navn { display: block; font-weight: 600; color: var(--ink); }
.melding .tekst { color: var(--ink); overflow-wrap: anywhere; }
.melding .endret {
  margin-left: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--ink-3);
}
.melding.slettet .tekst, .melding.sendes .tekst { color: var(--ink-3); }

/* «Ikke sendt, prøv igjen». Meldingen blir stående i lista med teksten sin,
   med en rød hårstrek i margen i stedet for å forsvinne ned i skrivefeltet:
   da ser man hva som ikke kom fram, og i hvilken rekkefølge. Rød betyr at
   noe er galt, her som ellers. Kant, ikke skygge: raden ligger ikke over noe. */
.melding.feilet .sak { box-shadow: inset 2px 0 0 var(--rod); }
.ikkesendt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.ikkesendt .hva { font-size: var(--t-3); line-height: var(--t-3-h); color: var(--rod); }

.melding .handlinger { display: flex; gap: var(--s-1); flex: 0 0 auto; }
.melding .handlinger .knapp { color: var(--ink-3); }
.melding .handlinger .knapp:hover { color: var(--ink); }

/* Med mus står knappene gjemt til pekeren er over meldingen. På berøring
   finnes ingen peker, og da står de alltid framme. */
@media (hover: hover) {
  .melding .handlinger {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background: var(--flate);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    visibility: hidden;
  }
  .melding:hover .handlinger, .melding:focus-within .handlinger { visibility: visible; }
}
/* På berøring står knappene under teksten. Til høyre for den ville knapper
   på 44px klemt meldingen ned til en smal stripe på telefon.

   Raden MÅ kunne brekke for alle meldinger, ikke bare egne. Knappene ber om
   hele bredden (flex-basis 100%), og uten wrap tar de plassen fra teksten i
   samme rad i stedet for å legge seg under den. Da ble en melding fra den
   andre til én bokstav per linje. «Svar i tråd» står på alle meldinger, så
   dette gjelder alle. */
@media (hover: none) {
  .melding { flex-wrap: wrap; }
  .melding .handlinger { flex: 1 0 100%; padding-left: calc(var(--marg) + var(--inn) - var(--s-4)); }
}

.melding .bekreft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.melding .bekreft .hva { font-size: var(--t-3); color: var(--ink-2); }
.knapp.fare { color: var(--rod); }

.rediger { margin-top: var(--s-1); }
.rediger .knapperad { margin-top: var(--s-3); align-items: center; }
.rediger .hint { font-size: var(--t-2); color: var(--ink-3); }

/* «Nye meldinger»: et amber segment på linja, og ordene der det uleste
   begynner. Amber betyr at noe venter på deg, her som på Hjem. */
.nye { display: flex; align-items: center; margin-top: var(--s-4); }
.nye .marg { width: var(--marg); flex: 0 0 var(--marg); align-self: stretch; position: relative; }
.nye .segment { position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: var(--amber); }
.nye .etikett { padding-left: var(--inn); color: var(--amber); }
.nye .strek { flex: 1 1 auto; height: 1px; margin-left: var(--s-4); background: var(--line-2); }

/* --- skrivefeltet ---------------------------------------------------------
   Linjehøyden er 26 og luften 8 over og under, så én linje blir 44 med
   kanten. Da står feltet og knappen like høyt uten et tall utenfor skalaen. */
.skriv {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  padding: var(--s-4) 0 var(--s-5);
  border-top: 1px solid var(--line-2);
}
/* Selve raden: bindersen, feltet og Send. Kurven med vedleggene ligger over
   den, så feltet flytter seg nedover når et bilde legges inn i stedet for at
   Send-knappen hopper bort under fingeren. */
/* FELTET FÅR HELE LINJA, KNAPPENE STÅR UNDER

   Som i Slack og Linear. Sto bindersen, feltet og Send på samme linje, var
   feltet 136px i et panel på gulvet 320, altså rundt sytten tegn, og
   plassholderen «Skriv til #generelt» fikk ikke plass på én linje. At en
   plassholder brekker er den klassiske prøven på at et felt er for trangt.
   Halve raden var knapper.

   Panelet er mellom 320 og 560 bredt og aldri mer, så dette gjelder alltid.
   Et knekkpunkt til ville vært et tall å holde rede på for en forskjell
   ingen ser. */
.skrivrad { display: flex; align-items: flex-end; flex-wrap: wrap; row-gap: var(--s-3); }
.skriv .knapp { flex: 0 0 auto; }
/* Bindersen står i MARGEN, til venstre for linja, som klokka over den og
   vinkelen i toppen av samtalen. Sto den til høyre for linja sammen med
   feltet, ble feltet 84px i et panel på 320, og da ser man ti tegn av det
   man skriver. Ingen .ikonknapp her: den er 32px, og under gulvet for en
   finger. Her er flata hele margen, 56 bred og 44 høy. */
.knapp.binders {
  flex: 0 0 var(--marg);
  width: var(--marg);
  justify-content: flex-start;
  padding: 0;
  color: var(--ink-3);
}
/* Feltet begynner PÅ linja, rett under teksten i meldingene over, og tar
   hele linja. order flytter det først i raden uten å røre HTML-en, så
   bindersen og Send havner på linja under det. */
.skriv .skrivefelt { order: -1; flex: 1 1 100%; margin-left: calc(var(--marg) + var(--inn)); }
.skriv .knapp.send { margin-left: auto; }
.vedleggkurv { padding-left: calc(var(--marg) + var(--inn)); }
.knapp.binders:hover { color: var(--ink); }
.knapp.binders svg { width: 18px; height: 18px; }
/* Filvelgeren skal ikke ses, men må kunne klikkes av koden. display: none
   ville gjort click() virkningsløs i noen nettlesere. */
.filvelger {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skrivefelt {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--t-4);
  line-height: var(--t-5-h);
  min-height: 44px;
  max-height: calc(var(--t-5-h) * 6 + var(--s-3) * 2 + 2px);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  color: var(--ink);
  resize: none;
  overflow-y: hidden;
}
.skriv .skrivefelt { min-width: 0; }
.skrivefelt:focus { outline: none; border-color: var(--brand); box-shadow: var(--fokus); }
.skrivefelt::placeholder { color: var(--ink-3); }
.skrivefelt[disabled] { opacity: .6; }
.chat-status { padding-left: calc(var(--marg) + var(--inn)); margin: 0 0 var(--s-3); }

/* --- vedleggene -----------------------------------------------------------
   Kant i stedet for skygge, som resten av Lodd: et bilde i en melding ligger
   ikke over noe, det ligger i den. Skygge er bare på lysbordet, som faktisk
   flyter over skjermen. */

.vedleggene { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
/* Luft under en melding med vedlegg. Sett i nettleseren 26. september 2026:
   meldinger fra samme person på rad står med vilje uten avstand, og det er
   riktig for tekst, men med et skjermbilde imellom la neste melding sin tekst
   seg rett inntil bildet over og ble lest som en bildetekst til feil melding. */
.melding.medvedlegg { margin-bottom: var(--s-6); }
/* Flere bilder i samme melding legger seg i et rutenett som brekker av seg
   selv. auto-fill og ikke faste kolonner, fordi chatten skal virke både i et
   panel på 400px og i full bredde. */
.vedleggene.rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-3);
}
.vedlegg { margin: 0; min-width: 0; }
.vedlegg.bilde img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  /* Bak et bilde som ikke fyller ruta står den mørke flaten, i begge temaer:
     et skjermbilde skal bedømmes på sin egen eksponering. */
  background: var(--skjerm);
  cursor: zoom-in;
}
.vedleggene.rutenett .vedlegg.bilde img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.vedlegg.film video {
  display: block;
  width: 100%;
  max-height: 360px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--skjerm);
}
.vedlegg figcaption {
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
  margin-top: var(--s-2);
  overflow-wrap: anywhere;
}

/* Raden for en pdf, en fil som ikke kan vises, og et bilde nettleseren ikke
   klarte å tegne (heic utenfor Safari). 44px høy, som alt annet man trykker på. */
.vedlegg.filrad, .kurvbit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
}
.vedlegg.filrad .ikon, .kurvbit .tumm.tom { flex: 0 0 auto; color: var(--ink-3); display: inline-flex; }
.vedlegg.filrad .ikon svg, .kurvbit .tumm.tom svg { width: 20px; height: 20px; }
.vedlegg.filrad .vokser, .kurvbit .vokser { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.filnavn {
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tall i mono med tabular-nums, som alt maskinelt i Lodd. */
.maskin {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* --- kurven: det som ligger klart i skrivefeltet ------------------------- */

.vedleggkurv { display: flex; flex-direction: column; gap: var(--s-2); }
.kurvbit .tumm {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-1);
  object-fit: cover;
  background: var(--skjerm);
}
.kurvbit .tumm.tom { width: 40px; height: 40px; align-items: center; justify-content: center; }
.kurvbit.ille { border-color: var(--rod); }
.kurvbit .ille { color: var(--rod); font-size: var(--t-2); line-height: var(--t-2-h); }

/* Framdriften. En strek som fylles, ikke et tall som teller: den sier «det
   skjer noe» uten at man må lese. Bredden settes med en klasse og ikke med
   style, fordi CSP-en ikke tillater stil i HTML-en. */
.framdrift {
  display: block;
  height: 2px;
  background: var(--line-2);
  border-radius: var(--r-1);
  overflow: hidden;
}
.framdrift .fylt { display: block; height: 2px; background: var(--brand); width: 0; transition: width var(--tid-2) var(--kurve); }
.fyll-5 { width: 5%; }    .fyll-10 { width: 10%; }  .fyll-15 { width: 15%; }
.fyll-20 { width: 20%; }  .fyll-25 { width: 25%; }  .fyll-30 { width: 30%; }
.fyll-35 { width: 35%; }  .fyll-40 { width: 40%; }  .fyll-45 { width: 45%; }
.fyll-50 { width: 50%; }  .fyll-55 { width: 55%; }  .fyll-60 { width: 60%; }
.fyll-65 { width: 65%; }  .fyll-70 { width: 70%; }  .fyll-75 { width: 75%; }
.fyll-80 { width: 80%; }  .fyll-85 { width: 85%; }  .fyll-90 { width: 90%; }
.fyll-95 { width: 95%; }  .fyll-100 { width: 100%; }

/* Rammen rundt samtalen mens noe dras inn. Amber, som alt annet som venter
   på at du gjør noe. */
.chat.drar .strom { box-shadow: inset 0 0 0 2px var(--amber); }

/* --- trådene --------------------------------------------------------------
   Tråden åpnes I STEDET FOR samtalen, i samme kolonne, på alle
   skjermstørrelser. Ingen tredje kolonne: chatten skal bli et smalt panel ved
   siden av de andre skjermene. */

/* «3 svar · 14:02» under meldingen i kanalen. En knapp, ikke en lenke: den
   bytter hva kolonnen viser, den går ikke til en ny adresse. */
.tradlinje {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-3);
  margin-top: var(--s-1);
  margin-left: calc(var(--s-3) * -1);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  color: var(--brand);
  font-size: var(--t-3);
  font-weight: 500;
  cursor: pointer;
}
.tradlinje:hover { background: var(--flate-2); border-color: var(--line-2); }
.tradlinje .maskin { color: var(--ink-3); }
/* Amber betyr at noe venter på deg, her som på Hjem og på «Nye meldinger». */
.tradlinje.ulest .nye {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

/* Forelderen står øverst i tråden, med en hårstrek under: den er
   utgangspunktet for alt under, ikke det første svaret. Kant, ikke skygge. */
.tradforelder {
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}
.tradforelder .melding.forst { margin-top: var(--s-4); }

/* Knappen ut av tråden står på ALLE skjermstørrelser. «Tilbake» ved siden av
   den vises bare på telefon, og uten denne var det ingen vei ut på stor
   skjerm. */
.samtale-topp .tilbake-trad { display: inline-flex; margin-left: calc(var(--s-4) * -1); flex: 0 0 auto; }
/* Inne i en tråd er det trådens egen knapp som gjelder. Uten denne sto det
   «Tilbake» og «Tilbake til #generelt» ved siden av hverandre på telefon, og
   de to gjorde ikke det samme. Sett i nettleseren 26. september 2026. */
.chat.itrad .samtale-topp .tilbake { display: none; }

/* --- reaksjonene ----------------------------------------------------------
   Brikker under meldingen: tegnet og antallet. Tallet i mono med tabular-nums,
   som alt maskinelt i Lodd, så to brikker ved siden av hverandre står i lodd.

   Tegnet er INNHOLD, ikke pynt i grensesnittet. Knappen som åpner valget er et
   ikon uten emoji. */

/* Velgeren henger fra DENNE raden, ikke fra den lille knappen. Sett i
   nettleseren 26. september 2026: med .leggtil som ramme var den tilgjengelige
   bredden 28px, og de åtte tegnene brøt til én per linje. Velgeren ble en
   loddrett søyle som gikk av skjermen oppover, og de to øverste kunne ikke
   trykkes i det hele tatt. */
.reaksjoner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

/* KNAPPEN er 44px, PILLA inni er 28. Luft rundt en knapp er ikke klikkbar,
   bare knappen er, så en brikke på 28px med marg rundt var en klikkflate på
   28. Målingen i verktoy/se-paa-chatten.mjs fant høyden.

   BREDDEN måtte sies like tydelig. Pilla i knappen som åpner valget er et
   ikon på 16px og 28px bred, og ingenting annet holdt knappen ut: den sto
   28 bred og 44 høy. Det så ingen av de to andre måleverktøyene, fordi de
   kjører uten berøring, og da står knappen skjult til pekeren er over
   meldingen. verktoy/se-paa-beroring.mjs måler den grenen, og fant den. */
.brikke {
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 28px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--flate);
  color: var(--ink-2);
}
.brikke:hover .pille { border-color: var(--line-3); background: var(--flate-2); }
/* Min egen er tydeligere, så man ser hva man selv har satt uten å telle. */
.brikke.min .pille { border-color: var(--brand); color: var(--ink); background: var(--flate-2); }
.brikke .tegn { font-size: var(--t-4); line-height: 1; }
.brikke .antall {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  font-variant-numeric: tabular-nums;
}

.brikke.apneknapp .pille { min-width: 28px; padding: 0 var(--s-2); color: var(--ink-3); }
.brikke.apneknapp svg { width: 16px; height: 16px; }
.brikke.apneknapp:hover .pille { color: var(--ink); }

/* Uten reaksjoner står bare den lille knappen, og den kommer fram ved
   pekeren, som Endre og Slett. På berøring finnes ingen peker, og da står den
   alltid framme. */
@media (hover: hover) {
  .reaksjoner.tom .leggtil { visibility: hidden; }
  .melding:hover .reaksjoner.tom .leggtil,
  .melding:focus-within .reaksjoner.tom .leggtil { visibility: visible; }
}

/* Velgeren FLYTER over meldingene under, og er derfor det ene stedet her som
   har skygge. Se regel 2 i Lodd: har noe skygge, ligger det over noe.

   .leggtil har med vilje INGEN position: da ville den vært rammen velgeren
   måler seg mot, og den er 28px bred. Rammen er .reaksjoner, som starter ved
   meldingens venstrekant. */
.leggtil { display: inline-flex; }
/* Fire og fire, alltid. Åtte på rad er 352px pluss luft, og det får ikke plass
   i et panel på 400. Et fast rutenett er ett tall å forholde seg til i stedet
   for en brytning som avhenger av hvor langt ute i raden knappen står:
   4 x 44 + 3 x 2 + 2 x 4 + 2 blir 192px, og det er trygt på 375 også. */
.velger {
  position: absolute;
  bottom: calc(100% + var(--s-2));
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: var(--s-1);
  padding: var(--s-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--flate);
  box-shadow: var(--over);
}
.tegnknapp {
  font: inherit;
  font-size: var(--t-5);
  line-height: 1;
  /* Åtte tegn på rad må kunne treffes med en finger, også på 375px. */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  cursor: pointer;
}
.tegnknapp:hover { background: var(--flate-3); }

/* --- lysbordet ------------------------------------------------------------
   Det ENESTE i chatten som faktisk flyter over noe annet, og derfor det eneste
   som har skygge. Ikke en <dialog> og ingen nettleserdialog: en boks i vår egen
   flate, med Lukk, Last ned og Esc. */
.lysbord {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgb(10 15 31 / .82);
}
.lysramme {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
}
.lysramme img {
  display: block;
  max-width: 100%;
  /* Plass til raden med navn og knapper under. */
  max-height: calc(100vh - 44px - var(--s-8));
  max-height: calc(100dvh - 44px - var(--s-8));
  object-fit: contain;
  border-radius: var(--r-2);
  background: var(--skjerm);
  box-shadow: var(--over);
}
.lystopp { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.lystopp .filnavn { flex: 1 1 auto; color: #E9EEFB; }
/* Knappene står på et mørkt teppe i BEGGE temaer, så fargen er fast her og
   ikke hentet fra --ink: i lyst tema ville de blitt usynlige. */
.lystopp .knapp.naken { color: #C3CBE0; }
.lystopp .knapp.naken:hover { color: #FFFFFF; background: rgb(255 255 255 / .12); }

/* --- telefon: panelet tar hele flaten -------------------------------------
   Under 900px er det ikke plass til et panel ved siden av noe. Da legger
   chatten seg over innholdet, under topplinja, som i dag. Topplinja blir
   stående, så knappen som lukker chatten er der du forlot den. Ingen
   håndtakskant: bredden er hele skjermen, og det er ingenting å dra i.

   Samtalen legger seg over ALT, også topplinja. Høyden kommer fra
   visualViewport (chat.js), så skrivefeltet står over tastaturet på iPhone
   og ikke bak det. */
@media (max-width: 899px) {
  .chatpanel {
    position: fixed;
    left: 0;
    right: 0;
    /* bottom og ikke en høyde regnet ut fra topplinja: panelet er fast her,
       og da er nederkanten av vinduet det eneste målet som alltid stemmer. */
    top: calc(var(--topplinje) + env(safe-area-inset-top, 0px));
    bottom: 0;
    width: auto;
    z-index: 25;
    border-left: 0;
  }
  .chathandtak { display: none; }
  .chat.apen .samtale {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vv-topp, 0px);
    bottom: auto;
    height: var(--vv-hoyde, 100dvh);
    z-index: 30;
    padding: 0 var(--s-5);
  }
  .samtale-topp { padding: calc(var(--s-2) + env(safe-area-inset-top, 0px)) 0 var(--s-2); }
  /* Streken nederst på iPhone ligger over skrivefeltet uten dette. Når
     tastaturet er oppe, er verdien 0, og da gjelder bare den vanlige luften. */
  .skriv { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
  /* Under 16px zoomer Safari inn når feltet får fokus. */
  .skrivefelt { font-size: var(--t-5); }
}
@media (max-width: 599px) {
  /* Margen er 56px her, og «24. SEP» med sperring og luft ble bredere enn
     det, så datoen gikk over linja. */
  .strom .bolk .etikett { letter-spacing: 0; padding-right: var(--s-3); }
}

/* ==========================================================================
   INSTALLER

   Egen side, utenfor innloggingen, fordi Joar må kunne lese den FØR han har
   kommet inn. Den viser ingen data, bare framgangsmåten. Kortene henger på
   loddlinja som radene ellers, og tallene står i margen.
   ========================================================================== */

.stedkort {
  padding: var(--s-4) 0 var(--s-5);
  border-bottom: 1px solid var(--line);
}
.stedkort:first-child { border-top: 1px solid var(--line); }
.stedkort h2 {
  margin: 0;
  padding-left: calc(var(--marg) + var(--inn));
  font-family: var(--font-body);
  font-size: var(--t-4);
  font-weight: 500;
  color: var(--ink);
}
.stedkort .under { display: block; padding-left: calc(var(--marg) + var(--inn)); margin-top: var(--s-1); }

/* Stedet du sitter på står med et rolig segment på linja, som «venter»
   ellers i skallet. Ingen farge, bare en strek, så det ikke roper. */
.stedkort.fram { position: relative; }
.stedkort.fram::before {
  content: '';
  position: absolute;
  left: calc(var(--marg) - 1px);
  top: var(--s-4);
  bottom: var(--s-5);
  width: 2px;
  background: var(--brand);
}

.stedkort .steg { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.stedkort .steg li {
  display: flex;
  align-items: baseline;
  gap: var(--inn);
  padding: var(--s-2) 0;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-2);
}
/* Tallet står i margen, høyrestilt mot linja, som klokkeslettene. */
.stedkort .steg .nr {
  flex: 0 0 var(--marg);
  width: var(--marg);
  padding-right: var(--s-4);
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--t-2);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Lenka til installeringen står nederst på innloggingskortet. Den må være
   der, ikke bak innloggingen, fordi den som skal installere appen ennå ikke
   er kommet inn. */
.installerlenke { margin: var(--s-5) 0 0; text-align: center; }
.installerlenke a { color: var(--ink-3); }
.installerlenke a:hover { color: var(--ink); }

/* ==========================================================================
   I APPEN PÅ MAC

   På Mac har appen en gjennomsiktig tittellinje: siden fyller hele vinduet,
   og de tre knappene flyter oppå den øverst til venstre. Det er slik Slack
   og Linear gjør det, og det krever to ting av oss.

   1. INNHOLDET MÅ VIKE. Knappene tar rundt 78px, og merket skyves forbi dem.

   2. TOPPLINJA MÅ KUNNE DRA VINDUET. Uten tittellinje finnes det ingen
      annen måte å flytte vinduet på. Alt som kan klikkes, må meldes ut
      igjen, ellers drar man vinduet i stedet for å trykke på knappen.

   På Windows beholder appen sin vanlige tittellinje, fordi Windows ikke har
   en gjennomsiktig variant. Der ligger knappene OVER siden, ikke oppå den,
   så ingenting trenger å vike og topplinja trenger ikke dra.
   ========================================================================== */

[data-app="mac"] .topplinje {
  padding-left: var(--knapper-mac);
  -webkit-app-region: drag;
  app-region: drag;
}
[data-app="mac"] .topplinje button,
[data-app="mac"] .topplinje a,
[data-app="mac"] .topplinje input,
[data-app="mac"] .topplinje select {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

/* Sidemenyen på smal bredde ligger rett under topplinja og blir ellers
   liggende under knappene når vinduet gjøres smalt. */
@media (max-width: 899px) {
  [data-app="mac"] .sidemeny { padding-left: var(--s-5); }
}