/* Minimalistisk backend-UI v2. Accentfarven skifter per værktøj via app.js. */

:root {
  --bg: #08090b;
  --text: #e8e9ea;
  --text-soft: #dcdee1;
  --muted: #aab0b9;
  --muted-2: #9fa6b0;
  --dim: #858c96;
  --dim-2: #737b86;
  --line: #20252c;
  --line-2: #2a3038;
  --line-3: #313844;
  --line-4: #3a424d;
  --line-5: #58616d;
  --surface: #0d0f12;
  --surface-2: #0a0c0f;
  --surface-3: #101216;

  --accent: oklch(0.82 0.15 160);
  --accent-soft: oklch(0.82 0.15 160 / 0.05);

  /*
    Hvor hoejt et output maa vaere. Hele pointen med siden er at man kan se
    resultatet og betjene kontrollerne samtidig, saa intet preview - billede,
    tabel eller tekst - maa skubbe kontrollerne under skaermkanten. Vaerdien er
    bundet til skaermhoejden, ikke til et fast pixeltal, for det er skaermen der
    afgoer hvad der er plads til.
  */
  --preview-max: min(46vh, 520px);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: #ffffff; }
input[type=range] { accent-color: #8b8f96; }

/* Farvet slør bag indholdet, som skifter blødt når værktøjet skifter. */
.tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 900ms cubic-bezier(.22, .61, .36, 1);
}
.gridveil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .45;
  background-image:
    linear-gradient(#ffffff0a 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(900px 600px at 50% 0%, #000, transparent 75%);
}

.shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  /*
    Toppen giver plads til det fastgjorte navn i venstre hjoerne. Fra 1200px og
    op er kategoribjaelken smal nok til at navnet kan staa ved siden af den i
    stedet for over den, og saa rykker hele navigationen op i toppen af
    skaermen. Graensen er maalt, ikke gaettet: bjaelken begynder ved x=212 paa
    1280px og ved x=122 paa 1100px, og navnet slutter ved x=145.
  */
  padding: 66px 28px 88px;
}
@media (min-width: 1200px) {
  .shell { padding-top: 18px; }
}
.toprule {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 26px var(--accent);
  transition: background 900ms ease, box-shadow 900ms ease;
}

/* --- Navigation --- */
.nav-dock {
  position: sticky;
  top: 14px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/*
  Kun vaerktoejsraekken folder sig sammen - overkategorierne bliver staaende.
  Hoejden staar i --row-h, som app.js maaler paa selve raekken. Vi proevede
  foerst grid-template-rows 1fr -> 0fr, men i en container uden fast hoejde
  foelger containeren ikke sporet praecist: den beholdt mere plads end klippet
  viste, saa fanen slap panelet midt i animationen.

  Raekken haenger i underkanten, saa panelet glider op og forsvinder ind under
  kategorierne som en skuffe - i stedet for at blive skaaret af nedefra.
*/
.tool-row-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--row-h, auto);
  overflow: hidden;
  /* Klipningen er alligevel en barriere; det her siger det til browseren, saa
     den ikke behoever regne resten af siden om for hver frame. */
  contain: layout paint;
  transition: height 420ms cubic-bezier(.4, .01, .2, 1);
}
.tools-nav-collapsed .tool-row-wrap { height: 0; }

/*
  Haandtaget er en fane skaaret ud af panelets underkant, ikke en loes knap:
  samme fyld, ingen topkant, og 2px overlap saa den maler hen over panelets
  nederste streg. Naar raekken er lukket, haenger fanen under kategorierne.
*/
.nav-handle {
  display: grid;
  place-items: center;
  /*
    Kategoripillen har backdrop-filter og danner dermed sin egen stak. Uden
    z-index her ville dens nederste streg blive tegnet hen over fanens mund,
    naar raekken er lukket.
  */
  position: relative;
  z-index: 1;
  width: 58px;
  height: 20px;
  margin-top: -2px;
  padding: 0 0 3px;
  border: 1px solid #242b33;
  border-top: 0;
  border-radius: 0 0 13px 13px;
  background: #0b0d10;
  color: #6f7782;
  cursor: pointer;
  transition: color 240ms ease, background 240ms ease, border-color 240ms ease;
}
.nav-handle:hover,
.nav-handle:focus-visible {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent), #242b33 58%);
  outline: none;
}
.nav-handle-chevron {
  width: 9px;
  height: 9px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 1px;
  /* Peger op naar raekken er aaben, ned naar den er lukket. */
  transform: rotate(135deg);
  transition: transform 420ms cubic-bezier(.4, .01, .2, 1);
}
.tools-nav-collapsed .nav-handle-chevron {
  transform: rotate(-45deg);
}
/*
  Kategoribjaelken og vaerktoejspanelet er ét stykke, ikke to kasser med en luft
  imellem. Panelet ligger 18px ind under bjaelken, og z-index goer at bjaelken
  tegnes ovenpaa - saa panelet ser ud til at komme ud af den.

  Selve overlappet ligger paa .tool-row-wrap og ikke her, og det er vigtigt:
  bjaelken har backdrop-filter. Et blur-lag der flyttes hver frame skal
  genberegnes hver frame, og det river - det er praecis den glitch der staar
  beskrevet i .tool-row, hvor et blur netop derfor blev fjernet. Bjaelken staar
  fuldstaendig stille under hele foldningen; det er panelet der bevaeger sig.

  De 18px gaar igen som ekstra toppolstring i .tool-row: det er praecis den
  stribe der ligger bag bjaelken, og uden den ville den oeverste raekke piller
  forsvinde ind under den.
*/
/*
  Kassen. Rammen, bunden og skyggen ligger her og ikke paa raekkerne indeni -
  det er hele pointen: én figur, hvor pillerne folder sig ud nedenunder
  fanerne, i stedet for to figurer der ligger oven paa hinanden.

  Bredden er fast og ikke indholdsstyret. Faneraekken er smallere end
  pillegitteret, saa en fit-content-kasse ville skifte bredde hver gang man
  valgte en anden kategori.

  Ingen backdrop-filter. Kassens hoejde animerer naar raekken folder sig ud, og
  et blur-lag der skal genberegnes for hver frame river - se .tool-row og
  kommentaren om det samme i .topsearch.
*/
.nav-box {
  position: relative;
  z-index: 2;
  width: min(100%, 1080px);
  border: 1px solid #2b323b;
  border-radius: 26px;
  background: #0b0d10;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .018),
    0 22px 60px -34px #000;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px;
}
.category-tab {
  min-width: 0;
}
.nav-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid #252b33;
  border-radius: 999px;
  background: #0a0c0fb8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018);
  transition: border-color 320ms ease, background 320ms ease, box-shadow 320ms ease;
}
.nav-cluster.hovering,
.nav-cluster:hover,
.nav-cluster:focus-within {
  border-color: color-mix(in oklch, var(--hover-accent, var(--cluster-accent)), #252b33 46%);
  background: linear-gradient(180deg, color-mix(in oklch, var(--hover-accent, var(--cluster-accent)), #0a0c0f 96%), #0a0c0f);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--hover-accent, var(--cluster-accent)), transparent 70%),
    0 0 38px -28px var(--hover-accent, var(--cluster-accent));
}
.nav-cluster.active {
  border-color: color-mix(in oklch, var(--accent), #252b33 54%);
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent), #0a0c0f 94%), #0a0c0f);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--accent), transparent 74%),
    0 0 34px -28px var(--accent);
}
.tabs button {
  padding: 9px 15px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #b0b6bf;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .005em;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 320ms ease, color 320ms ease, box-shadow 320ms ease, transform 220ms ease;
}
.tabs button:hover,
.tabs button:focus-visible {
  color: #f4f5f6;
  background: color-mix(in oklch, var(--item-accent, var(--accent)), transparent 90%);
  outline: none;
  transform: translateY(-2px);
}
.tabs button.active {
  background: var(--item-accent, var(--accent));
  color: var(--bg);
  box-shadow: 0 14px 40px -18px var(--item-accent, var(--accent));
}
.tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  /* Ingen egen ramme og ingen egen baggrund - raekken er en del af .nav-box.
     Hårstregen er det eneste der skiller de to afsnit ad. */
  padding: 11px 9px 10px;
  border-top: 1px solid #1b2027;
}
.tool-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #171c22;
  border-radius: 999px;
  background: #090b0e;
  transition: border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.tool-item:has(.tool-choice.active),
.tool-item:hover,
.tool-item:focus-within {
  border-color: color-mix(in oklch, var(--item-accent, var(--accent)), #252b33 58%);
  background: color-mix(in oklch, var(--item-accent, var(--accent)), #090b0e 95%);
  box-shadow: 0 0 34px -28px var(--item-accent, var(--accent));
}
.tool-choice,
.fav-toggle {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #aeb5be;
  font-family: inherit;
  cursor: pointer;
}
.tool-choice {
  /* Er et <a> nu, saa den skal selv sige at den ikke er understreget og
     opfoerer sig som en blok. Se kommentaren i renderToolRow. */
  display: inline-block;
  text-decoration: none;
  padding: 8px 12px 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tool-choice:hover { color: #f4f5f6; }
.tool-choice:hover,
.tool-choice:focus-visible {
  color: #f4f5f6;
  outline: none;
}
.tool-choice.active {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 14px 38px -20px var(--accent);
}
.fav-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 1px;
  color: #6f7782;
  font-size: 13px;
}
.fav-toggle:hover,
.fav-toggle:focus-visible,
.fav-toggle.active {
  color: var(--item-accent, var(--accent));
  outline: none;
}
.tool-row-empty {
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--dim);
}
.nav-group-label {
  align-self: center;
  padding: 0 9px 0 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7b838e;
  pointer-events: none;
}
.tool-picker {
  display: none;
  width: min(100%, 420px);
  margin: 0 auto;
  border-radius: 999px;
  background: #0d0f12e6;
  backdrop-filter: blur(14px);
}
@media (prefers-reduced-motion: reduce) {
  .tool-row-wrap,
  .nav-handle,
  .nav-handle-chevron {
    transition: none;
  }
}
.contextbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.contextbar-line {
  width: 26px;
  height: 1px;
  background: var(--line-4);
}

/* --- Panel --- */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: panelIn 320ms cubic-bezier(.22, .61, .36, 1);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  .tint { transition: none; }
}

.tool-title {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 88px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-align: center;
  max-width: 20ch;
}
.tool-desc {
  margin: 20px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  text-align: center;
  text-wrap: pretty;
}
.engine-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  padding: 7px 14px 7px 11px;
  border: 1px solid #1b1e23;
  border-radius: 999px;
  background: var(--surface);
}
.engine-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.side-engine {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: .01em;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 780px;
  margin: 46px 0 0;
  padding: 34px 34px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, #101216, #0b0d10);
  box-shadow: 0 50px 110px -60px #000, 0 0 0 1px oklch(0.82 0.15 160 / 0);
  overflow: hidden;
  transition: border-color 320ms ease, box-shadow 320ms ease;
}
.tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .78;
}
.tool-card:focus-within {
  border-color: color-mix(in oklch, var(--accent), var(--line) 72%);
  box-shadow: 0 50px 110px -60px #000, 0 0 42px -32px var(--accent);
}
.tool-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
}
.tool-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.tool-side:empty { display: none; }
.side-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.side-controls:empty { display: none; }
.side-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding-top: 6px;
}
.side-actions:empty { display: none; }

/* Alt under kortet får samme maksimale bredde som design-stage. */
.panel > .status,
.panel > .bar,
.panel > .grid,
.panel > .note,
.panel > .editor,
.panel > .queue,
.panel > .row,
.panel > .status-wrap,
.panel > div:not(.engine-pill):not(.tool-card) {
  width: 100%;
  max-width: 780px;
  margin-top: 22px;
}

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

/* --- Slip-felt --- */
.dropwrap { display: flex; flex-direction: column; gap: 10px; }
.drop-note { margin: 0; font-size: 11px; font-family: var(--mono); color: var(--dim-2); }
.drop-confirm {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 38px;
  margin: 2px 0 4px;
  padding: 9px 14px;
  border: 1px solid color-mix(in oklch, var(--accent), #ffffff 24%);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--accent), #101216 82%), color-mix(in oklch, var(--accent), #08090b 90%));
  color: color-mix(in oklch, var(--accent), #ffffff 20%);
  font: 11.5px/1.35 var(--mono);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--accent), transparent 76%),
    0 16px 38px -30px var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-confirm::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}
.drop-confirm:not(:empty) { display: inline-flex; }
.drop-confirm.err {
  border-color: oklch(0.72 0.16 25 / .7);
  color: oklch(0.78 0.14 25);
  background: oklch(0.72 0.16 25 / .08);
}
.drop-confirm.err::before { background: oklch(0.72 0.16 25); box-shadow: none; }
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 236px;
  padding: 32px;
  border: 1px dashed #2a2e34;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent-soft), #0a0c0f 70%);
  cursor: pointer;
  text-align: center;
  transition: border-color 240ms ease, background 240ms ease;
}
.drop:hover, .drop.over { border-color: var(--line-5); }
/*
  Naar filen ligger der, har det store slip-felt gjort sit arbejde. Det falder
  sammen til en linje, saa pladsen gaar til det man nu skal se paa - og til at
  kontrollerne bliver paa skaermen. Feltet kan stadig klikkes og trakkes paa,
  hvis man vil skifte fil.
*/
.drop.uploaded {
  flex-direction: row;
  gap: 14px;
  min-height: 0;
  padding: 13px 18px;
  border-style: solid;
  border-color: color-mix(in oklch, var(--accent), var(--line-5) 42%);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--accent), transparent 88%), #0a0c0f 76%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--accent), transparent 78%),
    0 0 34px -28px var(--accent);
}
.drop.uploaded .drop-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 13px;
}
.drop.uploaded strong { font-size: 13.5px; }
.drop.uploaded small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  "Add more".

  Da feltet faldt sammen til en linje, forsvandt hjaelpeteksten under det med -
  og saa var der ikke laengere noget der sagde at man kunne laegge flere filer
  ind. Linjen tog stadig imod baade klik og traek, men den saa faerdig ud, saa
  folk troede der kun var plads til én fil. Den her pille er hele svaret.
*/
.drop-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.drop.uploaded .drop-lines { align-items: flex-start; gap: 2px; }

/* I det store, tomme felt siger overskriften det allerede. */
.drop:not(.uploaded) .drop-more { display: none; }
.drop-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
  padding: 6px 12px 6px 9px;
  border: 1px solid color-mix(in oklch, var(--accent), var(--line-5) 40%);
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  transition: background 160ms ease, border-color 160ms ease;
}
.drop:hover .drop-more,
.drop.over .drop-more {
  background: color-mix(in oklch, var(--accent), transparent 84%);
  border-color: var(--accent);
}
.drop-more-icon { font-size: 14px; line-height: 1; }

@media (max-width: 560px) {
  /* Filnavnet er vigtigere end ordet. Tegnet alene er stadig en knap. */
  .drop-more-text { display: none; }
  .drop-more { padding: 6px 10px; }
}
/* Kvitteringen og hjaelpelinjen gentager bare hvad linjen ovenfor allerede siger. */
.dropwrap:has(.drop.uploaded) .drop-confirm,
.dropwrap:has(.drop.uploaded) .drop-note { display: none; }

/* --- Build your own: kaeden af trin --- */
.chain-list { display: flex; flex-direction: column; gap: 8px; }
.chain-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  background: var(--surface-2);
}
/* Nummeret goer raekkefoelgen laesbar uden at man skal taelle kasser. */
.chain-num {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--accent), transparent 55%);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
}
.chain-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chain-name { font-size: 13.5px; }
.chain-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.chain-fields:empty { display: none; }
.chain-fields .field { min-width: 96px; }
.chain-note { font-family: var(--mono); font-size: 10px; color: var(--dim-2); }
.chain-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.chain-icon { padding: 4px 9px; font-size: 13px; line-height: 1; }
.chain-icon:disabled { opacity: .3; cursor: default; }

/* Filer fra det forrige vaerktoej i samme kategori. Tom naar der ikke er
   nogen, og saa fylder raekken heller ikke. */
.drop-handoff:empty { display: none; }
.drop-handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Er der allerede valgt en fil, er tilbuddet ikke laengere relevant. */
.dropwrap:has(.drop.uploaded) .drop-handoff { display: none; }
.drop-handoff-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.drop-handoff-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  max-width: 100%;
  padding: 6px 11px;
  font-size: 12px;
}
.drop-handoff-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-handoff-from {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.drop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #2a2e34;
  border-radius: 12px;
  font-size: 17px;
  color: var(--accent);
}
.drop.uploaded .drop-icon {
  border-color: color-mix(in oklch, var(--accent), var(--line-5) 44%);
  background: var(--accent-soft);
  box-shadow: 0 0 28px -22px var(--accent);
}
.drop strong { font-size: 16px; font-weight: 400; color: var(--text-soft); }
.drop small {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--dim);
  letter-spacing: .02em;
}

/* --- Kontroller --- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}
.control-band {
  padding: 14px;
  border: 1px solid #15181c;
  border-radius: 14px;
  background: #0b0d10;
}
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field > label {
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim-2);
  text-align: center;
}
.field.grow { flex: 1 1 100%; }

.tool-side .row { align-items: flex-start; }
.tool-side .field { align-items: center; }

select, input[type=text], input[type=number], textarea {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line-3);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-width: 0;
  width: 100%;
}
select:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus { border-color: var(--line-5); }
textarea { font-family: var(--mono); line-height: 1.7; resize: vertical; padding: 20px; }
input[type=color] {
  background: var(--surface-2);
  border: 1px solid var(--line-4);
  border-radius: var(--radius);
  width: 100%; height: 36px; padding: 3px;
  cursor: pointer;
}
input[type=range] { width: 100%; }
label.check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-soft);
  text-transform: none; letter-spacing: 0; font-family: inherit;
}

/* Native select bag chip-rækken: usynlig, men stadig tastatur- og
   skærmlæsertilgængelig og styrbar udefra. */
.sr-select {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  opacity: 0;
  pointer-events: none;
}
.chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chip {
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 240ms ease;
}
.chip:hover { border-color: var(--line-5); color: var(--text); }
.chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip:disabled { opacity: .35; cursor: not-allowed; }

/* --- Knapper --- */
button.btn {
  padding: 13px 30px;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .005em;
  font-family: inherit;
  cursor: pointer;
  color: var(--bg);
  background: var(--accent);
  box-shadow: 0 14px 40px -18px var(--accent);
  transition: opacity 200ms ease, background 500ms ease, box-shadow 300ms ease;
}
button.btn:hover { opacity: .88; }
button.btn:disabled { opacity: .35; cursor: not-allowed; }
button.btn.ghost {
  padding-inline: 22px;
  border: 1px solid var(--line-4);
  background: transparent;
  color: var(--muted-2);
  font-weight: 400;
  box-shadow: none;
}
button.btn.ghost:hover { color: var(--text); border-color: var(--line-5); opacity: 1; }
a.btn { text-decoration: none; display: inline-block; text-align: center; }

/* --- Status --- */
.status-wrap { width: 100%; }
.status { font-size: 12px; font-family: var(--mono); color: var(--dim); margin: 0; min-height: 17px; line-height: 1.5; }
.status.err { color: oklch(0.72 0.16 25); }
.status.ok { color: var(--muted-2); }
.bar { height: 2px; background: var(--line-2); border-radius: 99px; overflow: hidden; margin-top: 10px; display: none; }
.bar.on { display: block; }
.bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.card-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  background: #0b0d10;
}
.card-status span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
  flex: 0 0 auto;
}

/* --- Fillister --- */
.filelist { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.filelist li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.filelist li.dim { opacity: .4; }
.filelist li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist li .size { color: var(--dim); font-size: 11px; font-family: var(--mono); }
.filelist li button {
  background: none; border: 0; color: var(--dim-2);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
.filelist li button:hover { color: var(--text); }

/* --- Resultatgitter --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px;
  text-align: center;
}
.card img, .card canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--preview-max);
  margin: 0 auto;
  border-radius: 2px;
  background: #000;
}

/*
  Live-preview: sizes efter sit eget billedforhold, men aldrig hoejere end
  --preview-max. Bredden er "auto" og ikke "100%", saa der ikke opstaar sorte
  bjaelker naar hoejden er den bindende graense.
*/
.fitpreview {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--preview-max);
  margin: 0 auto;
}
.card .cap { font-size: 11px; font-family: var(--mono); color: var(--dim); margin-top: 7px; }
.card .cap.good { color: var(--accent); }
.card .cap.bad { color: oklch(0.72 0.16 25); }
.card a { display: inline-block; margin-top: 5px; font-size: 11px; font-family: var(--mono); color: var(--muted); }
.card.more { display: grid; place-items: center; color: var(--dim-2); font-size: 12px; min-height: 90px; }

/* --- Modelvælger med pristags --- */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 780px;
  margin-top: 22px;
}
.model-card {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 13px;
  text-align: left;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), #090b0e);
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.model-card:hover:not(:disabled) { border-color: var(--line-4); }
.model-card.on {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), #090b0e);
}
.model-card.blocked { opacity: .42; cursor: not-allowed; }
.model-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.model-top strong {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-soft);
}
.model-tier {
  font: 9.5px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-3);
  color: var(--dim);
  flex: none;
}
.model-tier[data-tier="ai"] { color: var(--accent); border-color: color-mix(in oklch, var(--accent), var(--line) 62%); }
.model-blurb {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-2);
}
.model-cost {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.model-cost > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.model-cost dt {
  font: 10px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.model-cost dd {
  margin: 0;
  font: 10.5px var(--mono);
  color: var(--muted);
  text-align: right;
}
.model-flag {
  margin: 0;
  font: 10.5px/1.5 var(--mono);
  padding: 7px 8px;
  border-radius: 6px;
}
.model-flag.warn { color: #e8c98a; background: rgba(255, 184, 77, .09); }
.model-flag.block { color: #e8a08a; background: rgba(255, 96, 77, .09); }
.model-device {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font: 10.5px var(--mono);
  color: var(--dim-2);
}

.stem-results {
  display: grid;
  gap: 10px;
}
.stem-head,
.stem-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), #090b0e);
}
.stem-head {
  border-color: var(--line-4);
  background: linear-gradient(180deg, var(--accent-soft), #090b0e);
}
.stem-head strong,
.stem-card strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}
.stem-head small,
.stem-card small {
  display: block;
  margin-top: 4px;
  font: 10.5px/1.5 var(--mono);
  color: var(--dim);
}
.stem-card {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}
.stem-mark {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-4);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 0 16%, currentColor 16% 25%, transparent 25% 36%, currentColor 36% 45%, transparent 45% 56%, currentColor 56% 65%, transparent 65% 76%, currentColor 76% 85%, transparent 85%),
    var(--accent-soft);
  color: var(--accent);
  opacity: .95;
}
.stem-mark[data-stem="vocals"],
.stem-mark[data-stem="vocal-ish"] { border-radius: 50%; }
.stem-mark[data-stem="drums"] {
  background:
    radial-gradient(circle at 32% 35%, currentColor 0 11%, transparent 12%),
    radial-gradient(circle at 68% 35%, currentColor 0 11%, transparent 12%),
    radial-gradient(circle at 50% 70%, currentColor 0 13%, transparent 14%),
    var(--accent-soft);
}
.stem-mark[data-stem="bass"] {
  background:
    linear-gradient(90deg, transparent 0 30%, currentColor 30% 39%, transparent 39% 61%, currentColor 61% 70%, transparent 70%),
    linear-gradient(180deg, transparent 0 22%, currentColor 22% 30%, transparent 30% 48%, currentColor 48% 56%, transparent 56% 74%, currentColor 74% 82%, transparent 82%),
    var(--accent-soft);
}
.stem-mark[data-stem="other"],
.stem-mark[data-stem="instrumental"] {
  background:
    linear-gradient(135deg, transparent 0 30%, currentColor 30% 38%, transparent 38%),
    linear-gradient(45deg, transparent 0 34%, currentColor 34% 42%, transparent 42%),
    var(--accent-soft);
}
.stem-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.stem-copy audio {
  width: 100%;
  height: 34px;
  filter: invert(1) hue-rotate(180deg) saturate(.55);
  opacity: .78;
}
.stem-card .btn {
  padding: 10px 14px;
  font-size: 12px;
}
.audio-preview {
  width: 100%;
  display: grid;
  gap: 10px;
}
.audio-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--accent), var(--line) 74%);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-soft), #090b0e);
}
.audio-result-mark {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-4);
  border-radius: 10px;
  color: var(--accent);
  background:
    linear-gradient(90deg, transparent 0 15%, currentColor 15% 24%, transparent 24% 36%, currentColor 36% 45%, transparent 45% 57%, currentColor 57% 66%, transparent 66% 78%, currentColor 78% 87%, transparent 87%),
    var(--accent-soft);
}
.audio-result-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.audio-result strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audio-result small {
  font: 10.5px/1.5 var(--mono);
  color: var(--dim);
}
.audio-result audio {
  width: 100%;
  height: 34px;
  filter: invert(1) hue-rotate(180deg) saturate(.55);
  opacity: .78;
}
.audio-result .btn {
  padding: 10px 14px;
  font-size: 12px;
}

.checkerboard {
  background-image:
    linear-gradient(45deg, #17191d 25%, transparent 25%),
    linear-gradient(-45deg, #17191d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #17191d 75%),
    linear-gradient(-45deg, transparent 75%, #17191d 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* --- Video --- */
video { width: 100%; border-radius: var(--radius); background: #000; display: block; }
.scrub { margin-top: 10px; }
.timecode { font: 11px/1.5 var(--mono); color: var(--dim); text-align: center; margin: 6px 0 10px; }
.steprow { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
button.step {
  padding: 7px 13px;
  font-size: 12px;
  font-family: var(--mono);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
input.goto { font-family: var(--mono); }

/* --- Maske-editor --- */
.editor-title { font-size: 11px; font-family: var(--mono); color: var(--dim); margin-bottom: 10px; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tool-group { display: flex; align-items: center; gap: 9px; }
.tool-group input[type=range] { width: 110px; }
.tool-label {
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim-2);
  white-space: nowrap;
}
.cap { font-size: 11px; font-family: var(--mono); color: var(--dim); }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.segmented > button {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  transition: all 240ms ease;
}
.segmented > button:hover { border-color: var(--line-5); color: var(--text); opacity: 1; }
button.tool.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
button.tool-wand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
}
button.tool-wand::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 12%, oklch(0.88 0.14 160 / .42), transparent 62%);
  opacity: .18;
}
button.tool-wand.active {
  box-shadow: 0 0 34px -22px var(--accent);
}
.trend-badge {
  position: relative;
  padding: 2px 6px;
  border: 1px solid color-mix(in oklch, var(--accent), transparent 46%);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent), #0a0c0f 88%);
}
.feature-callout {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 180px;
  padding: 6px 9px;
  border: 1px solid color-mix(in oklch, var(--accent), #252b33 38%);
  border-radius: 999px;
  background: rgba(8, 9, 11, .92);
  color: var(--text-soft);
  box-shadow: 0 18px 42px -30px var(--accent);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: .04em;
  pointer-events: none;
  text-transform: uppercase;
}
.feature-callout::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  background: color-mix(in oklch, var(--accent), #ffffff 14%);
  transform-origin: left center;
}
.feature-callout::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-right: 1px solid color-mix(in oklch, var(--accent), #ffffff 14%);
  border-bottom: 1px solid color-mix(in oklch, var(--accent), #ffffff 14%);
}
.feature-callout-wand {
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
}
.feature-callout-wand::before {
  left: 50%;
  top: 100%;
  transform: rotate(90deg);
}
.feature-callout-wand::after {
  left: calc(50% - 3px);
  top: calc(100% + 15px);
  transform: rotate(45deg);
}
button.act.active { font-weight: 500; }
button.act-add.active { border-color: oklch(0.82 0.15 155); background: oklch(0.82 0.15 155 / 0.16); color: oklch(0.82 0.15 155); }
button.act-remove.active { border-color: oklch(0.72 0.16 25); background: oklch(0.72 0.16 25 / 0.16); color: oklch(0.72 0.16 25); }

.hint {
  margin: 12px 0;
  padding: 10px 13px;
  font-size: 12px;
  font-family: var(--mono);
  line-height: 1.5;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-4);
  background: var(--surface-2);
  color: var(--dim);
}
.hint.is-add { border-left-color: oklch(0.82 0.15 155); }
.hint.is-remove { border-left-color: oklch(0.72 0.16 25); }

.viewport {
  position: relative;
  overflow: hidden;
  height: min(62vh, 560px);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background-color: #0d0f12;
  touch-action: none;
}
.edit-canvas { display: block; width: 100%; height: 100%; }
.brush-cursor {
  position: absolute;
  left: -999px; top: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .4);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.brush-cursor.remove { border-color: oklch(0.72 0.16 25 / .95); }

/* --- Kø --- */
.queue { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.qitem {
  position: relative;
  flex: 0 0 auto;
  width: 92px; height: 92px;
  border-radius: var(--radius);
  border: 1px solid var(--line-3);
  background: var(--surface-2);
  overflow: visible;
  cursor: pointer;
  outline: none;
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.qitem.status-done:hover,
.qitem.status-done:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 18px 46px -32px var(--accent);
}
.qitem.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent), transparent 56%);
}
.qitem.failed { border-color: oklch(0.72 0.16 25); }
.qitem.status-working {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent), transparent 62%), 0 0 38px -24px var(--accent);
}
.qitem.status-working::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: .82;
  animation: queuePulse 1s ease-in-out infinite;
  pointer-events: none;
}
.qitem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: calc(var(--radius) - 1px);
}
.qitem.status-done::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(0, 0, 0, .78));
  opacity: .74;
  pointer-events: none;
  transition: opacity 220ms ease;
  border-radius: calc(var(--radius) - 1px);
}
.qitem.status-done:hover::after,
.qitem.status-done:focus-visible::after,
.qitem.status-done.active::after {
  opacity: .9;
}
.qplaceholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--dim-2); font-size: 18px; }
.qitem.status-working .qplaceholder {
  color: var(--accent);
  font-size: 0;
}
.qitem.status-working .qplaceholder::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--accent), transparent 72%);
  border-top-color: var(--accent);
  animation: spin 760ms linear infinite;
}
.qbadge {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .7);
  color: var(--muted);
  font-size: 9px; font-family: var(--mono);
  text-align: center; padding: 3px 0;
}
.qitem.status-working .qbadge {
  color: var(--accent);
  background: rgba(0, 0, 0, .82);
}
.qedit {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 18px;
  z-index: 2;
  padding: 5px 5px;
  border: 1px solid color-mix(in oklch, var(--accent), #ffffff 12%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--accent), #0a0c0f 80%), #08090b);
  color: color-mix(in oklch, var(--accent), #ffffff 18%);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  box-shadow: 0 12px 28px -20px var(--accent);
}
/* Boksen skal blive inden for flisens egen hoejde. .queue scroller vandret, og
   overflow-x: auto tvinger overflow-y til auto - saa alt der stikker op over
   strimlen bliver klippet vaek. Foer sad den paa top: -16px og var usynlig. */
.qcallout {
  left: 78px;
  top: 22px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.qcallout::before {
  right: calc(100% - 2px);
  top: 50%;
  transform: rotate(155deg);
}
.qcallout::after {
  right: calc(100% + 15px);
  top: calc(50% + 4px);
  transform: rotate(135deg);
}
.qitem.active .qcallout,
.qitem.status-done:hover .qcallout,
.qitem.status-done:focus-visible .qcallout {
  opacity: 1;
  transform: translateX(0);
}
.qitem.status-done:hover .qedit,
.qitem.status-done:focus-visible .qedit,
.qitem.status-done.active .qedit {
  opacity: 1;
  transform: translateY(-1px);
}
.qremove {
  position: absolute; top: 3px; right: 3px;
  z-index: 3;
  width: 17px; height: 17px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff; font-size: 12px; line-height: 1;
  cursor: pointer; padding: 0;
}
.qremove:hover { background: oklch(0.72 0.16 25); }

@keyframes queuePulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.045); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Metadata --- */
.metacard {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.metaname { font-size: 12.5px; margin-bottom: 10px; color: var(--text-soft); }
.metawarn {
  font-size: 11px; font-family: var(--mono);
  color: oklch(0.72 0.16 25);
  border-left: 2px solid oklch(0.72 0.16 25);
  padding-left: 9px; margin-bottom: 10px;
}
.metatable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.metatable th {
  text-align: left; font-weight: 400;
  color: var(--dim-2);
  font-family: var(--mono); font-size: 11px;
  padding: 4px 14px 4px 0;
  white-space: nowrap; vertical-align: top;
}
.metatable td { padding: 4px 0; color: var(--text-soft); word-break: break-word; }
.preview-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--preview-max);
  /*
    margin-inline: auto er ikke centrering for pynt - det er dét der forhindrer
    flex i at straekke elementet.

    Uden den blev canvas'et bredt som hele kortet, og object-fit: contain
    letterboxede billedet i midten med sorte bjaelker. To ting gik i stykker af
    det: rammen nedenfor blev tegnet rundt om bjaelkerne i stedet for om
    billedet, og - vaerre - de vaerktoejer man MALER i regnede markoerens
    position ud fra elementets bredde. Et klik paa billedets venstre kant landede
    saa midt i billedet, og hele det synlige billede blev presset ned i en smal
    stribe om midten.

    En auto-margen paa tvaerasen slaar align-items: stretch fra. Det er samme
    greb som .fitpreview allerede brugte; her manglede det bare.
  */
  margin-inline: auto;
  object-fit: contain;
  /*
    outline og ikke border. En ramme taeller med i elementets rektangel, og
    getBoundingClientRect() giver derfor et tal der er to pixels bredere end
    billedet - saa maler man én pixel ved siden af sig selv i hver kant. Et
    outline med negativ offset tegnes praecis samme sted men fylder ingenting
    i layoutet.
  */
  outline: 1px solid var(--line);
  outline-offset: -1px;
  border-radius: var(--radius);
  background: #050607;
}
.passport-canvas {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.passport-canvas.dragging { cursor: grabbing; }
.twocol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.diffout {
  margin: 12px 0 0;
  max-height: var(--preview-max);
  overflow: auto;
  white-space: pre-wrap;
  font: 12px/1.5 var(--mono);
}
.diff-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 2px 0;
  color: var(--muted-2);
}
.diff-line.add { color: oklch(0.78 0.15 155); }
.diff-line.remove { color: oklch(0.72 0.16 25); }
.diff-line.same { color: var(--dim-2); }
.file-preview {
  display: grid;
  gap: 8px;
  max-height: var(--preview-max);
  overflow: auto;
  margin: 0;
}
.rename-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font: 11px/1.45 var(--mono);
}
.rename-row span {
  overflow-wrap: anywhere;
  color: var(--dim);
}
.rename-row span:last-child { color: var(--text-soft); }
.probability-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}
.prob-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(80px, 2fr) 42px;
  gap: 10px;
  align-items: center;
  font: 11px/1.4 var(--mono);
  color: var(--muted-2);
}
.prob-row i {
  display: block;
  height: 8px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px -10px var(--accent);
}
.prob-row b {
  font-weight: 400;
  color: var(--dim);
  text-align: right;
}
@media (max-width: 720px) {
  .twocol,
  .rename-row,
  .prob-row { grid-template-columns: 1fr; }
}

/* --- QR og OCR --- */
.qrwrap { display: flex; justify-content: center; padding: 4px 0; }
.qrpreview, .prettypreview { max-width: 100%; height: auto; border-radius: var(--radius); }
.qrpreview { background: #fff; }
textarea.qrtext, textarea.ocrout { min-height: 240px; font-size: 13px; }
.qrresult { margin-top: 4px; }
.qrout {
  background: var(--surface-2);
  border: 1px solid var(--line-4);
  border-radius: var(--radius);
  padding: 14px;
  font: 12.5px/1.6 var(--mono);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 8px 0 14px;
  color: var(--text-soft);
}
.ffmpeglog {
  background: #08090b;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  font: 10.5px/1.5 var(--mono);
  color: var(--dim-2);
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

.note {
  font-size: 11px;
  font-family: var(--mono);
  line-height: 1.6;
  color: var(--dim-2);
  border-left: 1px solid var(--line-4);
  padding-left: 12px;
  margin: 0;
}
.heavy-warning {
  display: grid;
  gap: 5px;
  width: 100%;
  max-width: 780px;
  margin-top: 22px;
  padding: 13px 15px;
  border: 1px solid color-mix(in oklch, #ffb84d, var(--line) 58%);
  border-left-color: #ffb84d;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(255, 184, 77, .12), rgba(255, 184, 77, .025) 52%, transparent),
    #0a0c0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018);
}
.heavy-warning strong {
  color: #ffd18a;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.heavy-warning span {
  color: #c5c0b5;
  font-size: 12.5px;
  line-height: 1.55;
}

/* --- Fod --- */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 780px;
  margin-top: 72px;
  padding-top: 22px;
  border-top: 1px solid #14171a;
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4f545b;
}
.site-foot span,
.site-foot a {
  padding: 6px 10px;
  border: 1px solid #14171a;
  border-radius: 999px;
  color: #4f545b;
  background: #0b0d10;
  text-decoration: none;
}
.site-foot a:hover {
  color: var(--text);
  border-color: var(--line-4);
}

/* --- Mobil --- */
@media (max-width: 820px) {
  .tabs { display: none; }
  .tool-row-wrap { display: none; }
  .nav-handle { display: none; }
  .tool-picker {
    display: block;
    width: calc(100vw - 32px);
  }
}
@media (max-width: 700px) {
  /* Toppen skal stadig gaa fri af det fastgjorte navn i hjoernet - kun siderne
     og bunden strammes her. */
  .shell { padding: 62px 16px 56px; }
  .contextbar { padding-top: 16px; }
  .tool-title { font-size: clamp(42px, 16vw, 62px); margin-top: 18px; }
  .tool-desc { font-size: 14.5px; }
  .tool-card {
    margin-top: 34px;
    padding: 22px;
    border-radius: 18px;
  }
  .drop { min-height: 180px; padding: 24px; }
  .row { justify-content: stretch; }
  .field, .tool-side .field { align-items: stretch; width: 100%; }
  .field > label { text-align: left; }
  .chips { width: 100%; }
  .chip { flex: 1; }
  .side-actions { flex-direction: column; align-items: stretch; }
  button.btn { width: 100%; }
  .toolbar { gap: 12px; padding: 12px; }
  .tool-group { flex: 1 1 100%; }
  .tool-group input[type=range] { flex: 1; width: auto; }
  .segmented { width: 100%; }
  .segmented > button { flex: 1; }
  .viewport { height: min(52vh, 420px); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .stem-head,
  .stem-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .stem-card {
    grid-template-columns: 32px 1fr;
  }
  .stem-card .btn {
    grid-column: 1 / -1;
  }
  .stem-mark {
    width: 32px;
    height: 32px;
  }
  .qitem { width: 74px; height: 74px; }
  .site-foot { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   "Buy me a coffee" nederst til venstre.

   Fast placeret, så den følger med uanset hvor langt man er scrollet og
   uanset hvilket værktøj der er åbent. Panelet folder op OVER knappen, ikke
   ned, fordi der ikke er noget under den.
--------------------------------------------------------------------------- */

.coffee {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: min(360px, calc(100vw - 36px));
}

.coffee-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background 160ms;
}
.coffee-btn:hover,
.coffee.open .coffee-btn {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-3);
}
.coffee-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.coffee-cup { font-size: 13px; }

.coffee-panel {
  width: min(360px, calc(100vw - 36px));
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 18px 50px #00000080;
}
.coffee-panel[hidden] { display: none; }

.coffee-lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.coffee-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.coffee-coin {
  display: flex;
  flex-direction: column;
  min-width: 34px;
}
.coffee-coin strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text);
}
.coffee-coin small {
  font-size: 9.5px;
  color: var(--dim-2);
}

/* Adressen skal kunne markeres med musen, og den må ikke skubbe panelet bredt
   ud - derfor beskæres den frem for at ombrydes. */
.coffee-addr {
  overflow: hidden;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}

.coffee-copy {
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.coffee-copy:hover { color: var(--text); border-color: var(--line-4); }
.coffee-copy.done { color: var(--accent); border-color: var(--accent); }

.coffee-note {
  margin: 12px 0 0;
  color: var(--dim-2);
  font-size: 10.5px;
  line-height: 1.45;
}

/* På små skærme ville en fast knap dække værktøjets egne knapper. Der lægger
   den sig i stedet i flowet nederst på siden. */
@media (max-width: 720px) {
  .coffee {
    position: static;
    width: 100%;
    max-width: 780px;
    margin: 24px auto 0;
    align-items: stretch;
  }
  .coffee-btn { justify-content: center; }
  .coffee-panel { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Fælles byggeklodser til regnemaskiner, farve- og kodeværktøjer.
   Ét sted, så de nye værktøjer ikke hver især finder på deres eget udseende.
--------------------------------------------------------------------------- */

.readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: center;
}
.readout .num {
  font-family: var(--serif);
  font-size: clamp(30px, 7vw, 52px);
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.readout .sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim-2);
}

.kvtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
/*
  Til tabeller og lister der vokser med det brugeren taster - fx afdragsplanen,
  der er en raekke per aar. En tabel kan ikke selv scrolle, saa den skal ligge i
  en kasse der kan.
*/
.scrollbox {
  width: 100%;
  max-height: var(--preview-max);
  overflow: auto;
}
.kvtable td {
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}
.kvtable tr:first-child td { border-top: 0; }
.kvtable td:first-child {
  width: 42%;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.kvtable td:last-child {
  font-family: var(--mono);
  color: var(--text);
  overflow-wrap: anywhere;
}

.codeout {
  margin: 0;
  padding: 13px;
  max-height: var(--preview-max);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-soft);
  font: 12px/1.6 var(--mono);
  white-space: pre;
  tab-size: 2;
}
.codeout.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

.swatch {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.chiplist { display: flex; flex-wrap: wrap; gap: 6px; }
.chiplist button {
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: 11px var(--mono);
  cursor: pointer;
}
.chiplist button:hover { color: var(--text); border-color: var(--line-4); }

/* Lodret liste af små resultatlinjer (lodtrækning, sorteret tekst, historik). */
.linelist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: var(--preview-max);
  overflow: auto;
}
.linelist > div {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  font: 12px var(--mono);
  color: var(--text-soft);
}

/* ==========================================================================
   Topbar, soegning og forside
   ==========================================================================

   Tilfoejet fordi siden foer aabnede direkte i det foerste vaerktoej: ingen
   forside, intet navn, ingen soegning. Med 128 vaerktoejer var kategorifanerne
   det eneste kort over stedet, og paa mobil var de en <select> med 128 punkter.
*/

/*
  Navnet er et hjoerne-element, paa linje med kaffeknappen i modsatte hjoerne -
  samme afstand til kanten, samme kasse. Det kan ikke ligge i .shell og goere
  det: kolonnen er centreret med et loft paa 1160px, saa dens venstrekant er
  langt inde paa siden paa en bred skaerm.

  Den gennemsigtige kant er ikke pynt. Kaffeknappen har en rigtig kant, og uden
  en her ville de to teksters venstrekant staa én pixel forskudt.
*/
.brand {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-soft);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.brand:hover,
.brand:focus-visible { background: var(--surface); border-color: var(--line-2); color: #fff; }

/* Samme maerke som favicon, delebillede og app-ikon: en diagonal med et
   accentfarvet punkt forneden til venstre og et lyst foroven til hoejre.
   Tegnet i CSS frem for hentet som fil, saa diagonalen foelger accentfarven
   naar man staar inde i et vaerktoej. */
.brand-mark {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(135deg, transparent 45.5%, var(--accent) 45.5%, var(--accent) 54.5%, transparent 54.5%)
    var(--surface-3);
}
.brand-mark::before,
.brand-mark::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.brand-mark::before { left: 2.5px; bottom: 2.5px; background: var(--accent); }
.brand-mark::after { right: 2.5px; top: 2.5px; background: var(--text); }
.brand-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* -- soegefelt i toppen --------------------------------------------------- */

/*
  Soegefeltet er en tap paa OVERSIDEN af kategoribjaelken - noejagtig samme
  greb som chevronen paa undersiden, bare vendt om. Det stod foer og svaevede
  for sig selv oppe i hoejre hjoerne, og saa var der tre loesrevne ting i
  toppen af siden i stedet for ét sammenhaengende objekt.

  Den negative bundmargen og den manglende nederste kant er det der faar de to
  til at smelte sammen; z-index er noedvendigt, fordi .tabs har backdrop-filter
  og dermed danner sin egen stak, der ellers ville tegne hen over foden af
  feltet.
*/
.topsearch {
  position: relative;
  /* Over .tabs, som selv har z-index 2 for at kunne ligge over panelet. */
  z-index: 3;
  width: min(330px, 62vw);
  margin: 0 auto -2px;
}

.topsearch-input {
  width: 100%;
  padding: 11px 18px 13px;
  border: 1px solid #2b323b;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  background: #0d0f12e6;
  backdrop-filter: blur(14px);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.topsearch-input::placeholder { color: var(--dim-2); }
.topsearch-input:hover { border-color: var(--line-4); }
.topsearch-input:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line-4));
  background: var(--surface);
}
/* Webkits eget kryds i type=search sidder skaevt i en pille. */
.topsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.topsearch-results {
  position: absolute;
  /* Haenger fra tappens fod, altsaa fra kategoribjaelkens overkant, og laegger
     sig hen over bjaelken. Derfor skygge og hoejere z-index end den. */
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(420px, 88vw);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #0b0d10f2;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px #00000080;
}
.topsearch-results[hidden] { display: none; }

.topsearch-hit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
/*
  Markeringen er neutral, og vaerktoejets egen farve staar som en streg i
  venstre kant. Foer var hele feltet toonet i den farve, og med hues hele vejen
  rundt om cirklen betoed det at en raekke kunne lyse mudret brun eller sygt
  gulgroen op - forskellig fra raekke til raekke, uden at forskellen betoed noget.
*/
.topsearch-hit.active,
.topsearch-hit:hover {
  background: #ffffff0f;
  color: #fff;
  box-shadow: inset 2px 0 0 var(--item-accent, var(--accent));
}
.topsearch-hit-label { font-weight: 500; }
.topsearch-hit-group {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.topsearch-empty {
  margin: 0;
  padding: 14px 12px;
  font-size: 13px;
  color: var(--dim);
}

/* -- forsiden ------------------------------------------------------------- */

/*
  Forsiden er den almindelige navigation og ikke andet - se home.js. Derfor er
  der ingen saerlige regler der skjuler nav-docken her; den ER forsiden.

  Taellerlinjen hoerer derimod til et aabent vaerktoej ("IMAGE - 14 / 128"), og
  paa forsiden er der ingen af delene at taelle.
*/
body.is-home .contextbar { display: none; }

/*
  Titlen skal staa midt i den plads der er tilbage, ikke lige under
  navigationen med et hul under sig. Forsiden er kort, saa paa en hoej skaerm
  laa alt klemt sammen i toppen med en tom halvdel nedenunder.

  Kaeden er: .shell fylder mindst skaermen, #view tager resten af den, og
  .home-intro faar den plads og centrerer sig i den. Faktakortene bliver
  liggende i bunden, hvor de hoerer til.
*/
body.is-home .shell { min-height: 100vh; }
body.is-home #view { flex: 1; }
/* flex: 1 og ikke height: 100%. #view er selv et flex-barn, og en
   procenthoejde paa et barn af dét bider ikke - hoejden er ikke "definite"
   nok til at regne procenter af. */
body.is-home .home { display: flex; flex-direction: column; flex: 1; }
/*
  Foerste skaerm er navigationen og titlen. Faktakortene skubbes under kanten,
  for ellers deler de plads med titlen, og saa staar den ikke midt paa
  skaermen - kun midt i resten. --above-h maales i app.js, fordi hoejden af
  docken afhaenger af om raekken er foldet ud, hvor bredt vinduet er, og hvilken
  topmargen .shell har.

  dvh og ikke vh: paa en telefon aendrer den synlige hoejde sig naar adresse-
  linjen glider vaek, og vh bruger den stoerste af de to.
*/
body.is-home .home-intro {
  /*
    To gange --above-h, ikke én.

    Kassen starter dér hvor navigationen slutter. Skal dens MIDTE ramme
    skaermens midte, skal den slutte lige saa langt over skaermens underkant
    som den starter under dens overkant - altsaa trraekkes navigationens hoejde
    fra i begge ender. Med kun én gang endte titlen 91px for lavt, og uden
    nogen af delene 96px for hoejt.

    max(0px, ...) fordi en udfoldet raekke paa en lav skaerm kan spise hele
    hoejden; saa lander titlen bare lige under navigationen i stedet for at
    faa en negativ hoejde.
  */
  min-height: max(0px, calc(100dvh - 2 * var(--above-h, 240px)));
  justify-content: center;
  padding: 24px 0;
}

.home {
  width: 100%;
  animation: panelIn 320ms cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .home { animation: none; } }

/* Titlen. Ligger under vaerktoejsraekken i det felt der alligevel stod tomt,
   saa navigationen bliver ved med at vaere det foerste man ser. */
.home-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 46px 0 0;
}
.home-intro-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.home-intro-title em { font-style: italic; color: var(--accent); }
.home-intro-line {
  margin: 14px 0 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.home-intro-line strong { color: var(--text-soft); font-weight: 500; }

/* Hvorfor stedet findes. Staar nederst, under vaerktoejerne, fordi det er
   forklaringen - ikke vejen ind. */
.home-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  width: 100%;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
  overflow: hidden;
  text-align: left;
}
.home-facts li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 20px 22px;
  background: var(--surface-2);
}
.home-facts strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}
.home-facts span {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dim);
}

/* -- uden JavaScript ------------------------------------------------------ */

.noscript-note {
  width: 100%;
  max-width: 62ch;
  margin: 40px auto;
  padding: 30px 30px 34px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface-2);
}
.noscript-note h1 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.noscript-note p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}
.noscript-note p:last-child { margin-bottom: 0; }

/* -- smalle skaerme ------------------------------------------------------- */

/*
  820px er ikke et tilfaeldigt tal: det er praecis dér .tabs forsvinder og
  <select>-vaelgeren tager over. Uden en bjaelke er der ingenting at sidde paa,
  saa tappen bliver et almindeligt felt igen.

  Blokken staar EFTER desktop-reglerne med vilje. Den laa foerst oppe sammen med
  de oevrige mobilregler, dér hvor .tabs skjules - men topbar-afsnittet er
  tilfoejet sidst i filen, og med samme specificitet vinder den sidste regel.
  Resultatet var en tap uden bjaelke under den paa hver eneste telefon.
*/
@media (max-width: 820px) {
  .topsearch {
    width: 100%;
    margin: 0 0 10px;
  }
  .topsearch-input {
    padding: 11px 16px;
    border-bottom: 1px solid #2b323b;
    border-radius: 999px;
    text-align: left;
  }
  .topsearch-results { width: min(420px, 92vw); }
}

@media (max-width: 720px) {
  .brand-name { font-size: 11px; letter-spacing: .1em; }

  .home-intro { padding-top: 28px; }
  .home-intro-line { font-size: 13.5px; }
  .home-facts { margin-top: 48px; }
}

/* ==========================================================================
   Fejlrapport
   ==========================================================================

   <dialog> og ikke en selvbygget kasse: Escape lukker, fokus bliver indeni,
   resten af siden bliver inert. Alt sammen gratis og rigtigt.
*/

.report {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-3);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
}
.report::backdrop { background: #05060899; backdrop-filter: blur(3px); }

.report-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 26px 22px;
}

.report-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -.015em;
}
.report-lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.report-sub {
  margin: 4px 0 -6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim-2);
}

.report-note {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-3);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.report-note:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line-4));
}

/* Diagnostikken staar aabent fremme og ikke gemt bag en pil. Man skal kunne se
   praecis hvad man er ved at sende, foer man sender det - ellers er "intet
   forlader din maskine" en paastand man skal tage paa ordet. */
.report-details {
  max-height: 168px;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--dim);
  white-space: pre-wrap;
  word-break: break-word;
}

.report-status {
  min-height: 16px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted-2);
}
.report-status:empty { display: none; }

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}


@media (max-width: 560px) {
  .report-inner { padding: 20px 18px 18px; }
  .report-title { font-size: 25px; }
  .report-actions .btn { flex: 1; text-align: center; }
}