/*
 * BioAge Partner OS — brandlag.
 *
 * Paletten er ikke opfundet her. Den er låst i
 * kunder/bioagediagnostics/brand/BRAND-GUIDELINE.md, som selv er
 * reverse-engineered fra deres Shopify-butik fordi brandmateriale aldrig blev
 * leveret.
 *
 * DEN ENE REGEL DER IKKE MÅ BRYDES: guld betyder handling. Aldrig dekoration.
 * Findes guld et sted hvor man ikke kan trykke, er det en fejl.
 *
 * Overskrifter kører 600-700 hvor deres eget site kører 400. Det er bevidst:
 * i et dashboard forsvinder hierarkiet ved 400.
 */

:root {
  --ground: #FAF8F4;
  --surface: #FFFFFF;
  --surface-2: #F3EFE9;
  --anker: #273B4A;
  --dyb: #1B2832;
  --handling: #C99A45;
  --handling-blod: #F5EBD6;
  --linje: #E5E0DA;
  --tekst: #062940;
  --tekst-blod: #5C6B76;
  --ok: #2D7D6F;
  --advarsel: #B06E2B;
  --kritisk: #9E3B34;
  --skygge: 0 1px 2px rgba(6, 41, 64, .05), 0 10px 30px rgba(6, 41, 64, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #141C24;
    --surface: #1B2832;
    --surface-2: #22303B;
    --anker: #22303B;
    --dyb: #0E1620;
    --handling: #D4A857;
    --handling-blod: #33291A;
    --linje: #2E3E4A;
    --tekst: #E9EEF2;
    --tekst-blod: #93A3AE;
    --ok: #5FA48F;
    --advarsel: #D0904A;
    --kritisk: #C46A5F;
    --skygge: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .28);
  }
}

:root[data-theme="dark"] {
  --ground: #141C24;
  --surface: #1B2832;
  --surface-2: #22303B;
  --anker: #22303B;
  --dyb: #0E1620;
  --handling: #D4A857;
  --handling-blod: #33291A;
  --linje: #2E3E4A;
  --tekst: #E9EEF2;
  --tekst-blod: #93A3AE;
  --ok: #5FA48F;
  --advarsel: #D0904A;
  --kritisk: #C46A5F;
  --skygge: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--tekst);
  font-family: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }

/* ── indgangen ─────────────────────────────────────────────────────────── */

.indgang {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
}

.indgang-venstre {
  padding: clamp(40px, 7vw, 92px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  max-width: 760px;
}

.maerke { display: flex; align-items: center; gap: 11px; }

.maerke-prik {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--handling);
}

.maerke-navn {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tekst-blod);
}

.indgang h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  font-weight: 700;
}

/*
 * Produktnavnet stod først i guld. Det var forkert, og det kunne ses:
 * en gylden overskrift på fire linjers højde slog login-knappen ihjel, fordi
 * øjet gik til det største gyldne felt — og dét felt kunne man ikke trykke på.
 *
 * Hierarkiet laves nu med vægt og tone i stedet. Guld er reserveret til
 * knappen, som er sidens eneste handling.
 */
.indgang h1 .linje-1 {
  display: block;
  font-weight: 500;
  color: var(--tekst-blod);
  font-size: .62em;
  letter-spacing: -.01em;
  margin-bottom: .06em;
}

.indgang h1 .produktnavn {
  display: block;
  color: var(--tekst);
}

.ingress {
  font-size: 1.16rem;
  color: var(--tekst-blod);
  max-width: 46ch;
}

.finetryk {
  font-size: .89rem;
  color: var(--tekst-blod);
  max-width: 52ch;
}

.finetryk strong { color: var(--tekst); font-weight: 600; }

/* ── login ─────────────────────────────────────────────────────────────── */

.login-omraade { min-height: 96px; display: flex; flex-direction: column; gap: 14px; }

.henter { color: var(--tekst-blod); font-size: .95rem; }

.knap {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  align-self: flex-start;
  padding: 14px 26px;
  border: none;
  border-radius: 8px;
  background: var(--handling);
  color: #1B2832;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.knap:hover { transform: translateY(-1px); box-shadow: var(--skygge); }
.knap:focus-visible { outline: 3px solid var(--anker); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .knap { transition: none; }
  .knap:hover { transform: none; }
}

/* ── login-formular ────────────────────────────────────────────────────── */

.login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 340px;
}

.felt { display: flex; flex-direction: column; gap: 5px; }

.felt label {
  font-size: .84rem;
  font-weight: 500;
  color: var(--tekst-blod);
}

.felt input {
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid var(--linje);
  border-radius: 7px;
  background: var(--surface);
  color: var(--tekst);
}

.felt input:focus {
  outline: none;
  border-color: var(--handling);
  box-shadow: 0 0 0 3px var(--handling-blod);
}

.login-form .knap { align-self: stretch; justify-content: center; margin-top: 3px; }

.knap:disabled { opacity: .6; cursor: default; transform: none; }

.form-fejl {
  font-size: .9rem;
  color: var(--kritisk);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--linje);
  border-left: 3px solid var(--kritisk);
  border-radius: 0 6px 6px 0;
}

/* Opsætning mangler: sig præcis hvad, i stedet for at vise en død knap. */
.mangler-kort {
  background: var(--surface);
  border: 1px solid var(--linje);
  border-left: 3px solid var(--advarsel);
  border-radius: 9px;
  padding: 18px 20px;
  max-width: 44ch;
}

.mangler-kort h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.mangler-kort p { font-size: .92rem; color: var(--tekst-blod); }

.mangler-liste {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mangler-liste li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--tekst-blod);
  border: 1px solid var(--linje);
}

/* ── højre panel ───────────────────────────────────────────────────────── */

.indgang-hoejre {
  background: var(--anker);
  color: #E9EEF2;
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
}

.panel-hoved {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #8FA3B2;
}

.noegletal { margin: 0; display: grid; gap: 22px; }
.noegletal > div { display: grid; gap: 2px; }

.noegletal dt {
  font-size: .87rem;
  color: #8FA3B2;
}

.noegletal dd {
  margin: 0;
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #F4F1EC;
}

.panel-fod {
  font-size: .84rem;
  line-height: 1.55;
  color: #8FA3B2;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 18px;
  max-width: 34ch;
}

@media (max-width: 900px) {
  .indgang { grid-template-columns: 1fr; min-height: auto; }
  .indgang-venstre { padding: 48px 26px; }
  .indgang-hoejre { padding: 36px 26px 48px; }
  .noegletal { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .noegletal dd { font-size: 1.7rem; }
}

/* ── den indre flade ───────────────────────────────────────────────────── */

.skal { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

.sidebjaelke {
  background: var(--anker);
  color: #E9EEF2;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.sidebjaelke-top { display: flex; flex-direction: column; gap: 28px; }
.sidebjaelke .maerke-navn { color: #A9BBC7; }

.menu { display: flex; flex-direction: column; gap: 2px; }

.menupunkt {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: #C2D0DA;
  text-decoration: none;
  font-size: .96rem;
  font-weight: 500;
  border-left: 2px solid transparent;
}

.menupunkt:hover { background: rgba(255, 255, 255, .05); color: #F0F4F7; }

/* Guld = aktiv tilstand. Det er den anden af de to tilladte anvendelser. */
.menupunkt.aktiv {
  background: rgba(255, 255, 255, .07);
  color: #FFFFFF;
  border-left-color: var(--handling);
}

.menupunkt:focus-visible { outline: 2px solid var(--handling); outline-offset: 1px; }

.sidebjaelke-bund { display: flex; flex-direction: column; gap: 12px; }
.bruger { display: flex; flex-direction: column; gap: 1px; }
.bruger-navn { font-size: .94rem; font-weight: 600; color: #F0F4F7; }
.bruger-rolle { font-size: .78rem; color: #8FA3B2; }

.tekstknap {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: #8FA3B2;
  font-family: inherit;
  font-size: .86rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tekstknap:hover { color: #E9EEF2; }

.indhold { padding: clamp(28px, 4vw, 52px); max-width: 1100px; }

.sidehoved { margin-bottom: 30px; }
.sidehoved h1 { font-size: 1.9rem; font-weight: 700; }
.undertekst { color: var(--tekst-blod); margin-top: 6px; }

.kortgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.kort {
  background: var(--surface);
  border: 1px solid var(--linje);
  border-radius: 11px;
  padding: 20px 22px;
  box-shadow: var(--skygge);
}

.kort-titel {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tekst-blod);
}

.kort-tal {
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 7px;
}

.kort-tal.skelet { color: var(--linje); }
.kort-note { font-size: .84rem; color: var(--tekst-blod); margin-top: 5px; }

/*
 * Kortet der ikke har data, og som siger hvorfor.
 * Aldrig et nul der lyver om at der ikke er noget.
 */
.kort-afventer { border-left: 3px solid var(--advarsel); }
.kort-afventer .kort-tal { font-size: 1.05rem; font-weight: 500; color: var(--advarsel); }

.fodnote {
  margin-top: 24px;
  font-size: .87rem;
  color: var(--tekst-blod);
  max-width: 62ch;
}

/* Mobil.
   Et link i en mail bliver ofte åbnet på telefonen først, så det her er lige
   så tit det FØRSTE indtryk som skrivebordsudgaven.

   Menuen wrappede før til fem rækker og skubbede indholdet en halv skærm ned.
   Nu er den én vandret stribe der kan scrolles: otte punkter fylder ikke mere
   end 44 pixels i højden, og det aktive punkt er stadig det man ser først. */
@media (max-width: 760px) {
  .skal { grid-template-columns: 1fr; }

  /* `min-width: 0` HELE VEJEN NED, og det er ikke pedanteri.
     Et grid- og flex-barn har `min-width: auto`, altså "bliv mindst så bred
     som dit indhold". Menuens `overflow-x: auto` bliver dermed virkningsløs:
     i stedet for at scrolle i sig selv skubber den forælderen ud i 751 px på
     en 390 px skærm, og hele siden scroller sidevejs med teksten klippet.
     Kæden skal brydes på hvert led, ellers arver det næste problemet. */
  .skal, .sidebjaelke, .sidebjaelke-top, .menu, .indhold { min-width: 0; }

  .sidebjaelke {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 0 0;
  }

  .sidebjaelke-top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    order: 2;
  }

  /* Mærket og brugeren deler den øverste linje. */
  .maerke { padding: 0 18px; }

  .sidebjaelke-bund {
    order: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 18px;
    margin: 0;
    border: 0;
  }

  .menu {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    padding: 0 12px 10px;
    /* Skjuler scrollbaren uden at slå scroll fra. */
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }

  .menupunkt {
    white-space: nowrap;
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
  }
  .menupunkt.aktiv {
    border-left: 0;
    border-bottom-color: var(--handling);
  }

  /* Indholdet må ikke starte klemt op ad bjælken. */
  .indhold { padding-top: 26px; }

  /* Skrivefeltet stod klæbet til bunden her. Det lagde sig oven på kortene
     i stedet for at give plads til dem, og på en side der er to skærme lang,
     er gevinsten ved at slippe for at scrolle mindre end prisen ved at dække
     indholdet. Det står nu hvor det hører hjemme: efter det man skal læse. */
  .bund { margin-top: 1.6rem; padding-bottom: 20px; }
}

/* ── dashboard ─────────────────────────────────────────────────────────── */

.oversigt { display: flex; flex-direction: column; gap: 14px; }

.afsnit { margin-top: 18px; }
.afsnit h2 { font-size: 1.12rem; font-weight: 600; }
.afsnit .undertekst { font-size: .9rem; margin-top: 3px; }

/*
 * Pipelinen. Bjaelken er en andel af den stoerste fase, ikke af totalen —
 * ellers forsvinder de sma faser til en streg man ikke kan se.
 */
.pipeline {
  background: var(--surface);
  border: 1px solid var(--linje);
  border-radius: 11px;
  padding: 6px 20px;
  box-shadow: var(--skygge);
}

.fase {
  display: grid;
  grid-template-columns: 190px 1fr 56px 96px;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linje);
}

.fase:last-child { border-bottom: none; }

.fase-navn { font-size: .95rem; font-weight: 500; }

.fase-bjaelke {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}

.fase-fyld {
  display: block;
  height: 100%;
  background: var(--anker);
  border-radius: 4px;
}

.fase-antal,
.fase-beloeb {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: .93rem;
}

.fase-antal { font-weight: 600; }
.fase-beloeb { color: var(--tekst-blod); font-size: .87rem; }

/* Datakvalitet: over halvdelen mangler noget. Det skal kunne ses uden at laese. */
.kort-advarsel { border-left: 3px solid var(--advarsel); }
.kort-advarsel .kort-tal { color: var(--advarsel); }

@media (max-width: 700px) {
  .fase { grid-template-columns: 1fr 46px 84px; gap: 10px; }
  .fase-bjaelke { grid-column: 1 / -1; order: 3; }
}

/* ── indbakken ─────────────────────────────────────────────────────────── */

.eyebrow {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tekst-blod);
  margin-bottom: 8px;
}

/*
 * Banneret er sidens tese. Det er ikke pynt — det er det tal der forklarer
 * hvorfor 90 sager ligger stille, og det skal kunne læses på to sekunder.
 */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--linje);
  border-left: 3px solid var(--advarsel);
  border-radius: 11px;
  padding: 22px 26px;
  box-shadow: var(--skygge);
}

.banner-tal {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--advarsel);
  font-variant-numeric: tabular-nums;
}

.banner-titel { font-size: 1.05rem; font-weight: 600; }
.banner-note { font-size: .92rem; color: var(--tekst-blod); margin-top: 4px; max-width: 62ch; }

.koe { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

.sag {
  background: var(--surface);
  border: 1px solid var(--linje);
  border-radius: 11px;
  padding: 19px 22px;
  box-shadow: var(--skygge);
}

.sag-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.sag-top h3 { font-size: 1.02rem; font-weight: 600; }

.maerkat {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--tekst-blod);
  white-space: nowrap;
}

.maerkat-advarsel { background: var(--handling-blod); color: var(--advarsel); }

.sag-hvorfor { font-size: .93rem; color: var(--tekst-blod); margin-top: 8px; max-width: 68ch; }

/* Hvad der VIL ske, før det sker. Det er hele pointen med en godkendelseskø. */
.sag-vil {
  margin-top: 13px;
  padding: 11px 14px;
  background: var(--ground);
  border-left: 2px solid var(--handling);
  border-radius: 0 6px 6px 0;
}

.sag-vil .lab {
  display: block;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-blod);
  margin-bottom: 3px;
}

.sag-vil p { font-size: .92rem; }

.sag-bund {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.sag-beloeb {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .96rem;
}

.acts { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.knap-lille { padding: 8px 18px; font-size: .9rem; }

.knap-tekst {
  background: none;
  border: 1px solid var(--linje);
  border-radius: 6px;
  padding: 8px 15px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--tekst-blod);
  cursor: pointer;
}

.knap-tekst:disabled,
.knap:disabled { opacity: .45; cursor: not-allowed; }

/*
 * Fund-kortet. Ikke en advarsel, ikke en manglende adgang — noget vi har
 * opdaget i kundens data som de sandsynligvis ikke selv ved.
 *
 * Derfor guld og ikke orange: det er en åbning, ikke et problem.
 */
.kort-fund { border-left: 3px solid var(--handling); }
.kort-fund .kort-titel { color: var(--handling); }
.fund-titel { font-size: 1.06rem; font-weight: 600; margin-top: 6px; }

/* ── I dag ───────────────────────────────────────────────────────────────────
   Overblikket og samtalen er samme rum. Ikke en chat i et hjørne, og ikke et
   dashboard med et felt under: siden åbner med et svar og slutter med et
   spørgefelt, fordi et tomt felt beder om et spørgsmål man selv skal opfinde,
   mens et brief med en knap beder om en beslutning.

   Alt herunder henter farver fra tokens, så begge temaer følger med. En farve
   defineret direkte gælder kun i det ene tema — og så står den ene temas tekst
   på den andens bund. */

.idag {
  display: flex;
  flex-direction: column;
  max-width: 44rem;
}

/* Linjen der viser at systemet er vågent */
.toplinje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.dato {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tekst-blod);
}

.kilder {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--tekst-blod);
}

.puls {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
  flex: 0 0 auto;
}

/* Falder en kilde ud, siger linjen det samme sted. Så opdager man det, i
   stedet for at læse forældede tal uden at vide det. */
.kilder-nede .puls {
  background: var(--kritisk);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kritisk) 18%, transparent);
}
.kilder-nede { color: var(--kritisk); }

.hilsen {
  font-size: clamp(1.7rem, 3.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.1;
  margin: 0 0 1.4rem;
}

/* ── briefet ───────────────────────────────────────────────────────────── */

.brief { margin-bottom: 1.7rem; }
.brief p { margin: 0 0 .9rem; line-height: 1.66; }
.brief p:last-child { margin-bottom: 0; }

.brief-stor {
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--tekst);
}

.brief-stor + p { color: var(--tekst-blod); font-size: .97rem; }

.tal-kritisk { color: var(--kritisk); font-weight: 600; }

/* ── handlinger ────────────────────────────────────────────────────────────
   Én guldknap pr. skærm. Guld betyder handling i dette brand, og hvis alt er
   guld, betyder det ingenting. */

.primaer {
  background: var(--surface);
  border: 1px solid var(--linje);
  border-left: 3px solid var(--handling);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
  box-shadow: var(--skygge);
  margin-bottom: 1.8rem;
}

.primaer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.primaer h3 {
  margin: 0 0 .3rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tekst);
}

.primaer p {
  margin: 0;
  font-size: .88rem;
  color: var(--tekst-blod);
  line-height: 1.5;
  max-width: 30rem;
}

.knap-guld {
  flex: 0 0 auto;
  background: var(--handling);
  color: #fff;
  border: 0;
  padding: .55rem 1.1rem;
  border-radius: 7px;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s ease;
}
.knap-guld:hover { filter: brightness(1.08); }
.knap-guld:focus-visible { outline: 2px solid var(--anker); outline-offset: 2px; }

.mellem-titel {
  font-size: .93rem;
  color: var(--tekst-blod);
  margin: 0 0 .8rem;
}

.kortpar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: .4rem;
}
@media (max-width: 46rem) { .kortpar { grid-template-columns: 1fr; } }

.kort {
  background: var(--surface);
  border: 1px solid var(--linje);
  border-radius: 10px;
  padding: .95rem 1.05rem;
}

.kort-navn {
  font-size: .93rem;
  font-weight: 600;
  margin: 0 0 .4rem;
  color: var(--tekst);
}

.kort-tal {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 .15rem;
  line-height: 1.15;
  color: var(--tekst);
}

.kort-note {
  font-size: .83rem;
  color: var(--tekst-blod);
  margin: 0 0 .8rem;
  line-height: 1.45;
}
.kort-note-adv { color: var(--kritisk); }

.knap-flad {
  background: transparent;
  border: 1px solid var(--linje);
  padding: .4rem .85rem;
  border-radius: 6px;
  font: inherit;
  font-size: .85rem;
  color: var(--tekst);
  cursor: pointer;
  transition: border-color .15s ease;
}
.knap-flad:hover { border-color: var(--anker); }
.knap-flad:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }

/* ── tråden ────────────────────────────────────────────────────────────── */

.traad {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.traad:not(:empty) { margin-top: 1.9rem; }

.besked { display: flex; }
.besked-bruger { justify-content: flex-end; }

.besked-tekst {
  max-width: 38rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Assistentens svar står frit uden boble. Det er ikke en samtale med et system
   i en kasse — det er sidens egen stemme. Brugerens beskeder får en boble, så
   man kan se hvad man selv har spurgt om. */
.besked-assistent .besked-tekst { color: var(--tekst); font-size: 1.02rem; }

.besked-bruger .besked-tekst {
  background: var(--surface-2);
  border-radius: 14px 14px 4px 14px;
  padding: .7rem 1rem;
  font-size: .97rem;
}

.besked-fejl .besked-tekst { color: var(--kritisk); }

/* ── mens den tænker ───────────────────────────────────────────────────────
   En spinner siger "vent". En liste over hvad der sker, siger "jeg er i gang
   med noget". Samme ventetid, anden følelse. */

.taenker {
  background: var(--surface);
  border: 1px solid var(--linje);
  border-radius: 10px;
  padding: .9rem 1.05rem;
}

.trin { list-style: none; margin: 0 0 .8rem; padding: 0; }

.trin li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .26rem 0;
  font-size: .93rem;
  color: var(--tekst-blod);
  opacity: .45;
  transition: opacity .3s ease, color .3s ease;
}
.trin li.igang { color: var(--tekst); opacity: 1; font-weight: 500; }
.trin li.faerdig { opacity: 1; }

.trin-mrk {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .16rem;
  border-radius: 50%;
  border: 1px solid var(--linje);
  display: grid;
  place-items: center;
  font-size: .6rem;
  line-height: 1;
}
.trin li.faerdig .trin-mrk {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.trin li.faerdig .trin-mrk::after { content: '✓'; }
.trin li.igang .trin-mrk {
  border-color: var(--anker);
  border-top-color: transparent;
  animation: snurre .7s linear infinite;
}

@keyframes snurre { to { transform: rotate(360deg); } }

.bjaelke {
  height: 3px;
  background: var(--linje);
  border-radius: 2px;
  overflow: hidden;
}
.bjaelke i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--anker);
  border-radius: 2px;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* Folder sammen når svaret er der, så vejen ikke fylder mere end resultatet.
   Efter tyve spørgsmål ville tråden ellers være en logfil. */
.kollaps {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: var(--tekst-blod);
  padding: .5rem .75rem;
  background: var(--surface);
  border: 1px solid var(--linje);
  border-radius: 8px;
  align-self: flex-start;
}

.flueben {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .64rem;
  flex: 0 0 auto;
}

/* ── bunden ────────────────────────────────────────────────────────────── */

.bund { margin-top: 1.9rem; }

.skriv {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  padding: .55rem .55rem .55rem 1rem;
  background: var(--surface);
  border: 1px solid var(--linje);
  border-radius: 14px;
  box-shadow: var(--skygge);
}
.skriv:focus-within { border-color: var(--anker); }

.skriv-felt {
  flex: 1;
  border: 0;
  background: transparent;
  resize: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tekst);
  padding: .5rem 0;
  max-height: 200px;
}
.skriv-felt:focus { outline: none; }
.skriv-felt::placeholder { color: var(--tekst-blod); }

.skriv-knap {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: 9px;
  background: var(--handling);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: filter .15s ease;
}
.skriv-knap:hover { filter: brightness(1.08); }
.skriv-knap:focus-visible { outline: 2px solid var(--anker); outline-offset: 2px; }

.proev {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .8rem;
  font-size: .85rem;
  color: var(--tekst-blod);
}
.proev b { font-weight: 500; }

.proev-knap {
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--linje);
  padding: .1rem 0;
  font: inherit;
  font-size: .85rem;
  color: var(--tekst-blod);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.proev-knap:hover { color: var(--tekst); border-bottom-color: var(--anker); }
.proev-knap:focus-visible { outline: 2px solid var(--handling); outline-offset: 3px; }

/* ── dialogen der forklarer arbejdsgangen ──────────────────────────────── */

.skygge {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--dyb, #1B2832) 55%, transparent);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  z-index: 50;
  animation: toning .18s ease;
}

@keyframes toning { from { opacity: 0; } }

.dialog {
  background: var(--surface);
  border: 1px solid var(--linje);
  border-radius: 12px;
  max-width: 30rem;
  width: 100%;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  animation: op .22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes op { from { opacity: 0; transform: translateY(8px); } }

.dialog-hat {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--handling);
  margin: 0 0 .8rem;
}

.dialog-stor {
  font-size: 1.06rem;
  line-height: 1.55;
  font-weight: 500;
  margin: 0 0 1.2rem;
  color: var(--tekst);
}

.dialog-liste { margin: 0 0 1.2rem; padding: 0; list-style: none; }

.dialog-liste li {
  position: relative;
  padding: .55rem 0 .55rem 1.1rem;
  border-top: 1px solid var(--linje);
  font-size: .93rem;
  color: var(--tekst-blod);
  line-height: 1.5;
}
.dialog-liste li:last-child { border-bottom: 1px solid var(--linje); }
.dialog-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.02rem;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--handling);
}
.dialog-liste b { color: var(--tekst); font-weight: 600; }

.dialog-note {
  font-size: .87rem;
  color: var(--tekst-blod);
  line-height: 1.55;
  margin: 0 0 1.3rem;
  padding-left: .85rem;
  border-left: 2px solid var(--linje);
}

.dialog-bund {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dialog-spor {
  font-size: .84rem;
  color: var(--tekst-blod);
  flex: 1;
  min-width: 12rem;
}

@media (prefers-reduced-motion: reduce) {
  .trin li.igang .trin-mrk { animation: none; border-top-color: var(--anker); }
  .bjaelke i, .trin li { transition: none; }
  .skygge, .dialog { animation: none; }
}

/* ── siderne der ikke er bygget endnu ────────────────────────────────────────
   "Ikke bygget endnu" er sandt og ligegyldigt. Her står i stedet hvad siden
   kommer til at kunne, i systemets egen stemme — så et hul bliver et løfte. */

.kommer { max-width: 40rem; }

.kommer-stor {
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--tekst);
  margin: 0 0 1.4rem;
}

.kommer .dialog-liste { margin-bottom: 1.4rem; }

.kommer-note {
  font-size: .9rem;
  color: var(--tekst-blod);
  margin: 0;
  padding-left: .85rem;
  border-left: 2px solid var(--linje);
}

/*
 * Knapper på række, fx på Min profil hvor Google-handlingerne står ved siden af
 * hinanden. Wrap, fordi en telefon ikke har plads til tre knapper på én linje.
 */
.knapraekke {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

/* ── hilsenen der skriver sig frem (Jonas 21/9) ─────────────────────────
 *
 * Samtalen står nu øverst på «I dag», og hilsenen er det første der sker.
 * To linjer: «God dag, Camilla» og et spørgsmål der gør det lettere at
 * komme i gang end en tom prompt.
 *
 * Højden er låst med min-height, så resten af siden IKKE hopper mens
 * teksten skrives. Et layout der rykker sig, mens man kigger på det, føles
 * i stykker uanset hvor pæn animationen er.
 */

.hilsen { min-height: 2.9em; }

.hilsen-linje { display: block; }

.hilsen-spoerg {
  display: block;
  margin-top: .3rem;
  font-size: .62em;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--tekst-blod);
}

/* Markøren. Forsvinder når der er skrevet færdigt. */
.hilsen-mark {
  display: inline-block;
  width: .5ch;
  height: .62em;
  margin-left: .12em;
  background: var(--handling);
  vertical-align: baseline;
  animation: hilsen-blink 1.1s step-end infinite;
}

@keyframes hilsen-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

/* Skrivefeltet står nu i toppen, ikke i bunden. */
.bund.toppen { margin-top: 0; margin-bottom: 1.9rem; }

@media (prefers-reduced-motion: reduce) {
  .hilsen-mark { display: none; }
}

/* Modellens svar: afsnit og punktlister. Fundet i en UI-test 21/9, hvor
 * svaret stod med raa stjerner fordi teksten blev sat med textContent. */
.besked-tekst p { margin: 0 0 .7rem; }
.besked-tekst p:last-child { margin-bottom: 0; }
.besked-tekst .svar-liste { margin: 0 0 .7rem; padding-left: 1.25rem; }
.besked-tekst .svar-liste:last-child { margin-bottom: 0; }
.besked-tekst .svar-liste li { margin-bottom: .25rem; }
.besked-tekst .svar-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.besked-tekst strong { font-weight: 600; }

/* Brugere (24/9) */
.bruger-raekke { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 4px; border-top: 1px solid rgba(0,0,0,.08); }
.bruger-raekke:first-child { border-top: 0; }
.engangskode { font-family: ui-monospace, Menlo, monospace; font-size: 1.1em; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,.06); user-select: all; }

/* Tjeklisten på Min profil og Brugere (29/9): er man færdig, og hvad mangler. */
.tjekliste { list-style: none; margin: 8px 0 0; padding: 0; }
.tjekliste li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--linje); }
.tjekliste li:first-child { border-top: 0; }
.tjekliste li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 12px; border-radius: 99px; background: var(--advarsel); }
.tjekliste li.ok::before { background: var(--ok); }
.tjekliste li.valg::before { background: transparent; border: 2px solid var(--tekst-blod); width: 8px; height: 8px; }
.tjekliste li.valg.til::before { background: var(--ok); border-color: var(--ok); }
.tjekliste strong { display: block; }
.tjekliste .undertekst { margin: 2px 0 0; }
.faerdig-maerke { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 99px; margin-left: 8px; vertical-align: middle; }
.faerdig-maerke.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.faerdig-maerke.mangler { color: var(--advarsel); background: color-mix(in srgb, var(--advarsel) 13%, transparent); }
.bruger-knapper { display: flex; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.bruger-knapper .undertekst { margin: 0; font-size: 14px; }
.bruger-mangler { color: var(--advarsel); }
@media (max-width: 640px) {
  .bruger-raekke { flex-direction: column; align-items: stretch; }
  .bruger-knapper { justify-content: flex-start; }
}
.profil-mail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; width: 100%; }
.profil-mail .undertekst { flex-basis: 100%; margin: 0; }

/* ── samtale-tilstand (Jonas 6/10: «mere Claude/ChatGPT») ─────────────────
   Første besked folder dashboardet væk. Tråden står i midten, feltet nederst. */
.idag.samtale > :not(.samtale-top):not(.traad):not(.bund):not(.samtale-liste) { display: none; }
.idag.samtale .proev { display: none; }
.idag.samtale { max-width: 46rem; margin-inline: auto; min-height: calc(100vh - 80px); display: flex; flex-direction: column; }
.idag.samtale .traad { flex: 1; margin-top: .6rem; padding-bottom: 1.2rem; }
.idag.samtale .bund { position: sticky; bottom: 0; margin-top: 0; padding: .8rem 0 calc(1.1rem + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--ground) 30%); }
.samtale-top { display: flex; gap: .4rem; position: sticky; top: env(safe-area-inset-top, 0px); padding: .6rem 0; background: var(--ground); z-index: 2; }
.samtale-tilbage { border: 1px solid var(--linje); background: var(--surface); border-radius: 99px; padding: .35rem .9rem; font: inherit; font-size: .88rem; color: var(--tekst-blod); cursor: pointer; }
.samtale-tilbage:hover { color: var(--tekst); border-color: var(--tekst-blod); }
.samtale-status { display: flex; flex-direction: column; gap: .35rem; }
.samtale-trin { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--tekst-blod); }
.samtale-trin.igang { color: var(--tekst); }
.samtale-trin .flueben { color: var(--ok); font-size: .8rem; width: 14px; text-align: center; }
.snurre { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linje); border-top-color: var(--handling); animation: snurre .8s linear infinite; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .snurre { animation: none; } }
.samtale-forslag { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: -.3rem; }
.samtale-forslag .proev-knap { border: 1px solid var(--linje); background: var(--surface); border-radius: 99px; padding: .4rem .9rem; font-size: .9rem; color: var(--tekst); cursor: pointer; text-decoration: none; }
.samtale-forslag .proev-knap:hover { border-color: var(--handling); }
.besked-stoppet .besked-tekst { color: var(--tekst-blod); font-style: italic; }
.skriv-knap.stop { font-size: .8rem; }

/* Gemte samtaler (6/10). */
.seneste-samtaler { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; margin-top: .6rem; font-size: .9rem; color: var(--tekst-blod); }
.seneste-samtaler:empty { display: none; }
.idag.samtale .seneste-samtaler { display: none; }
.samtale-liste { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--linje); border-radius: 10px; padding: .3rem; margin-bottom: .8rem; max-height: 50vh; overflow: auto; }
.samtale-punkt { display: flex; justify-content: space-between; gap: 1rem; text-align: left; border: 0; background: none; padding: .55rem .7rem; border-radius: 7px; font: inherit; color: var(--tekst); cursor: pointer; }
.samtale-punkt:hover { background: var(--surface-2); }
.samtale-punkt-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.samtale-punkt-dato { color: var(--tekst-blod); font-size: .85rem; white-space: nowrap; }

/* ── Menutal og mobilmenuen (10/10) ──────────────────────────────────────
   Tallet ved I dag og Indbakke er det eneste i menuen der ændrer sig. Nul
   vises ikke: et «0» er støj. På telefonen ligger menuen fast i bunden, hvor
   tommelfingeren er, i stedet for som en stribe man skal scrolle sidelæns. */
.menupunkt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-tal {
  min-width: 22px; padding: 1px 7px; border-radius: 99px;
  background: var(--handling); color: #1B2832;
  font-size: .76rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.menu-tal[hidden] { display: none; }

@media (max-width: 760px) {
  .menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    overflow: visible; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--anker);
    box-shadow: 0 -6px 20px rgba(6, 41, 64, .18);
  }
  .menupunkt {
    flex-direction: column; justify-content: center; gap: 2px;
    padding: 7px 2px; border: 0; border-radius: 8px;
    font-size: .74rem; text-align: center; white-space: nowrap; position: relative;
  }
  .menupunkt.aktiv { border: 0; background: rgba(255, 255, 255, .1); }
  .menu-tal { position: absolute; top: -2px; right: 2px; min-width: 18px; padding: 0 5px; font-size: .68rem; }
  /* Toppen er én lav linje: mærket til venstre, log ud til højre. Menuen bor i bunden. */
  .sidebjaelke { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 18px; gap: 12px; }
  .sidebjaelke-top { order: 1; gap: 0; }
  .sidebjaelke-top .maerke { padding: 0; }
  .sidebjaelke-bund { order: 2; padding: 0; }
  .sidebjaelke-bund .bruger { display: none; }
  .indhold { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .idag.samtale .bund { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* Ventetid (venter.js, 13/10): en rolig bjælke, et sekundtal og en tanke om at leve længe og godt */
.venter { display: grid; gap: 10px; padding: 22px 0; max-width: 560px; }
.venter-linje { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--tekst-blod); }
.venter-tekst { font-weight: 500; color: var(--tekst); }
.venter-tid { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.venter-spor { height: 3px; border-radius: 3px; background: var(--linje); overflow: hidden; }
.venter-bjaelke { height: 100%; background: var(--handling); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.venter-tanke { margin: 14px 0 0; padding-left: 14px; border-left: 2px solid var(--handling); opacity: 0; transform: translateY(4px); transition: opacity .6s ease, transform .6s ease; }
.venter-tanke.ind { opacity: 1; transform: none; }
.venter-tanke blockquote { margin: 0; font-size: 16px; line-height: 1.45; font-style: italic; color: var(--tekst); text-wrap: balance; }
.venter-tanke figcaption { margin-top: 6px; font-size: 12px; letter-spacing: .04em; color: var(--tekst-blod); }
@media (prefers-reduced-motion: reduce) { .venter-bjaelke, .venter-tanke { transition: none; } }