/* lovedata ♥ — Modernist. Tokens og komponentklasser fra designsystemet,
   deretter oppsettet denne tjenesten trenger. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&display=swap');

:root {
  --color-bg: #fffafc;
  --color-surface: #fff0f4;
  --color-text: #2a1d20;
  --color-accent: #e0294a;
  /* Aksenten gjorde to jobber: farge på topplinjen, og uthevinger inne på
     arket. På et mørkt skin trekker de to i hver sin retning, så de er skilt. */
  --color-highlight: #e0294a;
  --color-on-highlight: #fffafc;
  --header-bg: #e0294a;
  --header-fg: #fffafc;
  --header-alt: #751425;
  --color-divider: color-mix(in srgb, #751425 33%, transparent);

  --color-neutral-100: #fff7fa;
  --color-neutral-200: #ffeaf1;
  --color-neutral-300: #ffd6e2;
  --color-neutral-500: #a08e92;
  --color-neutral-800: #4a3b3e;
  --color-neutral-900: #33262a;

  --color-accent-100: #fff2f6;
  --color-accent-200: #ffdde7;
  --color-accent-300: #ffb8cc;
  --color-accent-500: #f2537f;
  --color-accent-600: #c31f3d;
  --color-accent-700: #9e1b32;
  --color-accent-800: #751425;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px;
  --radius-md: 0px;
  --radius-sheet: 26px;
  --radius-panel: 16px;
  --radius-control: 0px;

  /* Flatene et skin bytter. Mønsteret er en hel url(), siden en CSS-variabel
     ikke kan settes inn midt inne i en data-URI. */
  --sheet-top: #fffbfc;
  --sheet-base: #fff6f9;
  --sheet-glow: rgba(255, 236, 243, .5);
  --sheet-ring: rgba(255, 196, 216, .5);
  --sheet-shadow: rgba(120, 18, 48, .3);
  --sheet-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23f2537f' fill-opacity='.17'%3E%3Cpath transform='translate(14 16) rotate(-12) scale(.30)' d='M50 92S3 62 3 30C3 13 16 2 30 2c9 0 17 5 20 12 3-7 11-12 20-12 14 0 27 11 27 28 0 32-47 62-47 62z'/%3E%3Cpath transform='translate(112 40) rotate(16) scale(.20)' d='M50 92S3 62 3 30C3 13 16 2 30 2c9 0 17 5 20 12 3-7 11-12 20-12 14 0 27 11 27 28 0 32-47 62-47 62z'/%3E%3Cpath transform='translate(62 104) rotate(8) scale(.26)' d='M50 92S3 62 3 30C3 13 16 2 30 2c9 0 17 5 20 12 3-7 11-12 20-12 14 0 27 11 27 28 0 32-47 62-47 62z'/%3E%3Cpath transform='translate(146 128) rotate(-20) scale(.17)' d='M50 92S3 62 3 30C3 13 16 2 30 2c9 0 17 5 20 12 3-7 11-12 20-12 14 0 27 11 27 28 0 32-47 62-47 62z'/%3E%3C/g%3E%3C/svg%3E");
  --sheet-pattern-size: 180px 180px;
  --page-1: #ffc8d8; --page-2: #ffaec5; --page-3: #f89bb6; --page-4: #ffbccf;
  --page-dot: rgba(255, 226, 236, .3);
  --page-glow: rgba(255, 214, 228, .35);
  --cloud: #ffd6e2; --cloud-alpha: .52;
  --spark: #ffdfe9; --spark-alpha: .72;
  --hit: #f7c744;
  --glow: rgba(158, 27, 50, .26);
  /* Leseskalaen settes fra innstillingene og ganges inn i tekststørrelsene på
     lesesidene. Alt annet står fast, så knapper og topplinje ikke forskyver seg. */
  --text-scale: 1;
  --heading-scale: 1;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  background:
    radial-gradient(circle at 1px 1px, var(--page-dot) 1px, transparent 0) 0 0 / 24px 24px,
    radial-gradient(90% 55% at 50% 0%, var(--page-glow) 0%, transparent 70%),
    linear-gradient(175deg, var(--page-1) 0%, var(--page-2) 38%, var(--page-3) 72%, var(--page-4) 100%);
  background-attachment: fixed;
}

/* Pynten ligger bak alt innhold og tar aldri imot klikk. */
#scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#scenery > * { position: absolute; }
.sky-cloud { fill: var(--cloud); opacity: var(--cloud-alpha); }
.sky-spark { fill: var(--spark); opacity: var(--spark-alpha); }
.sky-heart { fill: var(--color-accent-800); opacity: .16; }
/* Gjenstandene skal kjennes igjen, men aldri konkurrere med teksten. */
.prop { opacity: .3; }
@media (max-width: 1500px) { .prop { opacity: .2; } }
@media (max-width: 1100px) { .prop { display: none; } }
@keyframes lv-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(26px, -12px, 0); }
}
@keyframes lv-twinkle {
  0%, 100% { transform: scale(.75); opacity: .35; }
  50% { transform: scale(1.15); opacity: .95; }
}
@keyframes lv-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(0, -22px, 0) rotate(4deg); }
}
.drift { animation: lv-drift 26s ease-in-out infinite; }
.twinkle { animation: lv-twinkle 4.5s ease-in-out infinite; }
.sway { animation: lv-sway 19s ease-in-out infinite; }
/* De store hjertene bak innholdet driver så sakte at bevegelsen nesten ikke er
   til å ta og føle på. Det er meningen. */
/* Størrelsene ligger i klasser, ikke i inline-stil, slik at en liten skjerm
   kan skalere dem ned uten å miste spredningen mellom dem. */
.bigheart.xl { width: 420px; } .bigheart.l { width: 310px; }
.bigheart.m { width: 200px; } .bigheart.s { width: 145px; }
.bigheart.xs { width: 78px; } .bigheart.xxs { width: 56px; }
@media (max-width: 820px) {
  .bigheart.xl { width: 210px; } .bigheart.l { width: 160px; }
  .bigheart.m { width: 108px; } .bigheart.s { width: 82px; }
  .bigheart.xs { width: 48px; } .bigheart.xxs { width: 34px; }
}
.bigheart { animation: lv-float-a 97s ease-in-out infinite; }
.bigheart.b { animation: lv-float-b 151s ease-in-out infinite; }
.bigheart.c { animation: lv-float-c 223s ease-in-out infinite; }
@keyframes lv-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
  25% { transform: translate3d(150px, -96px, 0) rotate(5deg) scale(1.22); }
  50% { transform: translate3d(46px, -164px, 0) rotate(-3deg) scale(.78); }
  75% { transform: translate3d(-116px, -54px, 0) rotate(9deg) scale(1.08); }
}
@keyframes lv-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(6deg) scale(.86); }
  30% { transform: translate3d(-132px, -70px, 0) rotate(-7deg) scale(1.34); }
  60% { transform: translate3d(84px, -196px, 0) rotate(3deg) scale(.72); }
  80% { transform: translate3d(168px, -38px, 0) rotate(-4deg) scale(1.12); }
}
@keyframes lv-float-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1.15); }
  20% { transform: translate3d(96px, -142px, 0) rotate(8deg) scale(.68); }
  45% { transform: translate3d(-158px, -188px, 0) rotate(-6deg) scale(1.42); }
  70% { transform: translate3d(-58px, -62px, 0) rotate(4deg) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .drift, .twinkle, .sway, .bigheart { animation: none; }
  .sheet { animation: none; }
}
header.top, main.shell { position: relative; z-index: 1; }
/* Dialogene er modale og må ligge over ALT, også over Winamp, som ligger på
   2147483000. Lå de under, ble kortene i skin-velgeren liggende bak
   Winamp-vinduet og lot seg ikke klikke. Det så ut som en ustabil velger, fordi
   det avhang av hvor Winamp tilfeldigvis sto. !important er med fordi enkelte
   tema-moduler setter sin egen z-index på #dialog. */
#dialog { position: relative !important; z-index: 2147483600 !important; }

/* Dialogen er chrome og må være lesbar i ALLE temaer. Arvet den temaets egne
   farger, ble den usynlig i flere av dem, for eksempel mørk tekst på mørk
   flate. Den får derfor sin egen faste palett som ingen tema kan overstyre. */
#dialog .dialog-backdrop { background: rgba(0, 0, 0, .62) !important; }
#dialog .dialog {
  background: #16141c !important;
  border: 2px solid #6f6b85 !important;
  color: #f3f1f7 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .65) !important;
  border-radius: 12px !important;
}
#dialog .dialog h2,
#dialog .dialog p,
#dialog .dialog label,
#dialog .dialog span,
#dialog .dialog .x { color: #f3f1f7 !important; }
#dialog .dialog .text-muted { color: #b9b5c8 !important; }
#dialog .dialog .rule { background: #45415a !important; border-color: #45415a !important; }
#dialog .dialog .btn { background: #2f2b3d !important; color: #f3f1f7 !important; border-color: #6f6b85 !important; }
#dialog .dialog .btn:hover { background: #413c55 !important; }

/* Temaknapp som ALLTID er nåbar. Tema-modulene bygger om siden og har flyttet
   den vanlige skins-knappen ut av skjermen, blant annet til y=8509 i hoodlum.
   Denne ligger fast og er uavhengig av hva modulene gjør med siden. */
#theme-fab {
  position: fixed; right: 8px; top: 8px; z-index: 2147483100;
  cursor: pointer; border: 0; border-radius: 6px; padding: 6px 10px; font-size: 12px;
  background: rgba(0, 0, 0, .6); color: #fff; line-height: 1.2;
}
#theme-fab:hover { background: rgba(0, 0, 0, .8); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: calc(34px * var(--heading-scale)); }
h2 { font-size: calc(27px * var(--heading-scale)); }
h3 { font-size: calc(22px * var(--heading-scale)); }
h4 { font-size: calc(19px * var(--heading-scale)); } h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-800); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-highlight); text-decoration: underline; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-highlight) 30%, transparent); }
.tnum { font-variant-numeric: tabular-nums; }

/* — knapper — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; font-family: var(--font-heading);
  font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-control);
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-highlight); color: var(--color-on-highlight); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-on-highlight); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-highlight); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-highlight) 10%, transparent); }
.btn-block { width: 100%; justify-content: flex-start; text-align: left; }

/* — skjema — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-highlight);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-control);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-highlight); outline-offset: 0; }

/* — merkelapper og tabeller — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: .02em; padding: 3px 10px;
}
.tag-accent { background: var(--color-accent-300); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-highlight); color: var(--color-highlight); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — hjerter — */
#hearts { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.heart-bit { position: absolute; will-change: transform, opacity; user-select: none; }
.angel-fly { position: absolute; will-change: transform, opacity; filter: drop-shadow(0 6px 14px var(--glow)); }
@keyframes lv-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }

/* — topplinje — */
header.top { background: var(--header-bg); color: var(--header-fg); }
.topbar {
  max-width: 1340px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}

.brand { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.brand .mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--header-fg); color: var(--header-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
}
.brand .name {
  font-family: var(--font-heading); font-weight: 800; font-size: 25px;
  letter-spacing: -.02em; text-transform: uppercase;
}
/* O-en i navnet er et hjerte. Hjertet er aria-hidden og knappen har et
   eksplisitt navn, så en skjermleser sier «lovedata» og ikke «l hjerte vedata». */
.brand .o {
  display: inline-block; font-size: .82em; vertical-align: .04em;
  margin-inline: .04em; animation: lv-pulse 2.4s ease-in-out infinite;
}
.brand .beat { font-size: 19px; line-height: 1; animation: lv-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .brand .beat, .brand .o { animation: none; } }
.searchwrap { flex: 1 1 380px; display: flex; min-width: 260px; }
.searchwrap .input {
  flex: 1 1 auto; min-height: 42px;
  background: var(--color-neutral-100); border-color: var(--color-neutral-100);
}
.searchwrap .btn {
  min-height: 42px; background: var(--header-alt);
  color: var(--header-fg); padding-inline: 22px;
}
.topmeta { display: flex; align-items: center; gap: 10px; }
.topmeta .favcount { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.topmeta .btn { background: var(--header-fg); color: var(--header-bg); }
.iconbtn {
  all: unset; cursor: pointer; display: grid; place-items: center;
  width: 34px; height: 34px; color: var(--header-fg);
  border: 1px solid color-mix(in srgb, var(--header-fg) 45%, transparent);
}
.iconbtn:hover { background: var(--header-alt); }
.iconbtn.on { background: var(--header-alt); box-shadow: 0 0 0 1px var(--header-fg) inset; }
.toggles { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.toggle input { accent-color: var(--color-highlight); width: 16px; height: 16px; }
.setrow-slider { margin-bottom: 14px; }
.setrow-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.setrow-label { font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.setrow-hint { font-size: 11.5px; flex: 1 1 auto; }
.setrow-val { font-size: 12px; color: var(--color-accent-700); }
.setrow-slider input[type=range] {
  width: 100%; accent-color: var(--color-highlight); height: 20px;
}

.tabrow {
  max-width: 1340px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: stretch; overflow-x: auto;
}
.tab {
  all: unset; cursor: pointer; display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; padding: 10px 16px;
  background: var(--header-alt); color: var(--header-fg); margin-right: 2px;
  border-radius: 12px 12px 0 0;
}
.tab.on { background: var(--sheet-top); color: var(--color-accent-800); }
.tab.doc { text-transform: none; letter-spacing: 0; font-size: 12.5px; margin-right: 0; padding-right: 8px; }
.tabclose {
  all: unset; cursor: pointer; display: flex; align-items: center;
  padding: 0 12px 0 4px; font-size: 15px;
  background: var(--header-alt); color: var(--header-fg); margin-right: 2px;
  border-radius: 0 12px 0 0;
}
.tabclose.on { background: var(--sheet-top); color: var(--color-accent-800); }

/* — sider — */
main.shell { max-width: 1340px; margin: 0 auto; padding: 20px 24px 48px; }

/* Arket er den store flaten på siden, så det er her varmen må bære. Blushen
   dypner mot bunnen, hjertene ligger som et vannmerke så svakt at lovteksten
   aldri blir vanskeligere å lese, og kantene er myknet i rose framfor svart.
   Merk at arket ikke kan få overflow: hidden, for da slutter innholdsfortegnelsen
   og søkelinjen inni å klebe. */
.sheet {
  position: relative;
  background:
    var(--sheet-pattern) 0 0 / var(--sheet-pattern-size),
    radial-gradient(140% 100% at 50% 0%, var(--sheet-glow) 0%, transparent 62%),
    linear-gradient(180deg, var(--sheet-top) 0, var(--sheet-base) 620px, var(--sheet-base) 100%);
  border: 2px solid var(--color-accent-300);
  border-radius: var(--radius-sheet);
  padding: 34px clamp(20px, 3.4vw, 54px) 44px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .55) inset,
    0 0 0 8px var(--sheet-ring),
    0 22px 60px var(--sheet-shadow);
  animation: lv-watermark 300s linear infinite;
}
@keyframes lv-watermark {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 720px -1080px, 0 0, 0 0; }
}
/* Silkebåndet langs overkanten. */
.sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  border-radius: calc(var(--radius-sheet) - 2px) calc(var(--radius-sheet) - 2px) 0 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--color-accent-300) 0%, var(--color-highlight) 34%,
    var(--color-accent-500) 58%, var(--color-accent-300) 100%);
}

.cols { display: flex; flex-wrap: wrap; gap: 38px; }
.col-main { flex: 4 1 480px; min-width: 0; }
.col-side { flex: 1 1 280px; min-width: 0; }

.listhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.listhead h1 { font-size: calc(23px * var(--text-scale) * var(--heading-scale)); margin: 0; letter-spacing: -.02em; }
.listhead .tally { font-family: var(--font-heading); font-weight: 800; font-size: 27px; color: var(--color-highlight); letter-spacing: -.02em; }
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.filterbar .input { width: auto; min-width: 150px; max-width: 280px; min-height: 34px; font-size: 13px; }
.sorts { display: flex; gap: 12px; align-items: baseline; }
.sortbtn {
  all: unset; cursor: pointer; font-family: var(--font-heading); font-weight: 800;
  font-size: 13px; color: var(--color-accent-700);
}
.sortbtn:hover { color: var(--color-highlight); }
.sortbtn.on { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.intro { max-width: 68ch; margin: 0 0 14px; font-size: calc(15px * var(--text-scale)); line-height: 1.65; }
.actionrow { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.rule {
  height: 3px; margin-top: 12px; border-radius: 2px;
  background: linear-gradient(90deg, var(--color-highlight) 0%, var(--color-accent-500) 45%, var(--color-accent-300) 100%);
}
.group { margin-top: 26px; }
.group h2 {
  font-size: 13px; margin: 0 0 4px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.rows { display: flex; flex-direction: column; border-top: 2px solid var(--color-divider); }
/* Raden brytes av seg selv når tittelen ikke lenger får plassen sin. Det er
   viktigere enn det ser ut: uten en minstebredde på tittelen kan datasett og
   ident, som begge er nowrap, klemme den til nesten ingenting, og da hjelper
   ingen mediespørring. Med min-width brytes de to i stedet ned på egen linje,
   uansett hvor bred skjermen sier den er. */
.row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 13px 0;
  border-bottom: 1px solid var(--color-divider);
}
.row:hover { background: color-mix(in srgb, var(--color-accent-800) 11%, transparent); }
.row .fav {
  all: unset; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--color-highlight); opacity: .2; flex: none;
}
.row .fav.on { opacity: 1; }
.row .open {
  all: unset; cursor: pointer; display: block; flex: 1 1 340px;
  min-width: min(100%, 240px);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.4; color: var(--color-accent-700); text-decoration: underline;
  text-decoration-color: var(--color-accent-300); text-underline-offset: 3px;
}
/* Klippet må ligge på en span inni knappen. Safari lar ikke et button-element
   bli en -webkit-box, så -webkit-line-clamp på selve knappen gjør ingenting der,
   og en lang tittel renner nedover hele raden. */
.row .open > .t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.row .open:hover { color: var(--color-highlight); }
/* Datasett og ident hører sammen. Som to frie flex-elementer havnet de på hver
   sin linje så snart det ble trangt. Som én gruppe brytes de samlet. */
.row .meta {
  display: flex; align-items: baseline; gap: 14px; flex: 0 0 auto;
  margin-left: auto; max-width: 100%;
}
.row .set { font-size: 12px; white-space: nowrap; }
.row .ident { font-size: 12px; white-space: nowrap; text-align: right; }
.row .snippet { flex: 1 1 100%; font-size: calc(14px * var(--text-scale)); line-height: 1.6; margin-top: 2px; }
.row .snippet .m { background: var(--hit); }
.sidelinks { display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--color-highlight); padding-left: 16px; }

/* Hovedhandlingen: koble en agent på tjenesten. Skal ikke være til å overse. */
.agentcta {
  all: unset; box-sizing: border-box; cursor: pointer; display: block;
  width: 100%; margin: 0 0 16px; padding: 16px 18px;
  background: linear-gradient(135deg, var(--color-highlight), var(--color-accent-600));
  color: var(--color-on-highlight); border-radius: var(--radius-panel);
  box-shadow: 0 8px 22px var(--glow); position: relative; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.agentcta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px var(--glow); }
.agentcta:focus-visible { outline: 3px solid var(--color-accent-800); outline-offset: 2px; }
.agentcta::after {
  content: "♥"; position: absolute; right: -6px; bottom: -14px; font-size: 66px;
  opacity: .18; line-height: 1; pointer-events: none; animation: lv-pulse 2.4s ease-in-out infinite;
}
.agentcta-eyebrow {
  display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  opacity: .85; margin-bottom: 3px;
}
.agentcta-title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.15; }
.agentcta-sub { display: block; font-size: 12px; opacity: .9; margin-top: 4px; max-width: 24ch; }
@media (prefers-reduced-motion: reduce) { .agentcta::after { animation: none; } }

/* Footer-lenker som ser ut som lenker, ikke knapper. */
.footlink {
  all: unset; cursor: pointer; color: var(--color-accent-700);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-accent-300);
}
.footlink:hover { color: var(--color-highlight); }
.sidelinks .btn { justify-content: flex-start; background: var(--color-highlight); color: var(--color-on-highlight); }
.sidelinks .btn.strong { background: var(--color-accent-600); }
.setrow {
  all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  font-size: calc(13px * var(--text-scale)); padding: 9px 0;
  border-bottom: 1px solid var(--color-divider);
}
.setrow.on { color: var(--color-accent-700); font-weight: 700; }
.setrow .heart { color: var(--color-highlight); width: 14px; text-align: right; }

/* — dokument — */
.docgrid { display: flex; flex-wrap: wrap; gap: 38px; }
.doc-toc { flex: 1 1 280px; min-width: 0; align-self: start; position: sticky; top: 16px; max-height: 82vh; overflow-y: auto; }
.doc-body { flex: 4 1 480px; min-width: 0; }

/* Metadata står som en blokk over teksten, ikke i en sidekolonne, slik at
   brødteksten får hele bredden. */
.docmeta { margin: 6px 0 0; font-size: calc(13.5px * var(--text-scale)); }
.docmeta th {
  width: 190px; text-align: left; font-size: 12px; letter-spacing: 0;
  text-transform: none; font-weight: 500; padding: 7px 14px 7px 12px;
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-accent-800) 13%, transparent);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  vertical-align: top;
}
.docmeta td { padding: 7px 12px; vertical-align: top; }
.docmeta tbody tr:hover { background: none; }
.docrefs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-top: 14px; font-size: calc(13px * var(--text-scale));
}
.docrefs > .text-muted {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px;
}
.reflink {
  all: unset; cursor: pointer; color: var(--color-accent-700);
  text-decoration: underline; text-decoration-color: var(--color-accent-300);
  text-underline-offset: 3px;
}
.reflink:hover { color: var(--color-highlight); }
@media (max-width: 1050px) { .doc-toc { position: static; max-height: 320px; } }
@media (max-width: 620px) { .docmeta th { width: 120px; } }
.navrow {
  all: unset; cursor: pointer; display: flex; gap: 6px; padding: 9px 0;
  font-size: calc(13px * var(--text-scale));
  border-bottom: 1px solid var(--color-divider);
}
.navrow.on { color: var(--color-highlight); font-weight: 700; }
.navrow .num { min-width: 62px; font-variant-numeric: tabular-nums; }
.doc-body h1 { font-size: calc(clamp(24px, 2.7vw, 34px) * var(--text-scale) * var(--heading-scale)); margin: 0 0 16px; text-wrap: pretty; }
.identrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-bottom: 14px; border-bottom: 3px solid var(--color-highlight);
}
.infind {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, var(--sheet-top) 78%, var(--sheet-base) 100%);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 18px 0 4px; padding: 10px 0 12px;
  border-bottom: 2px solid var(--color-accent-300);
}

.infind .input { flex: 1 1 260px; max-width: 340px; min-height: 34px; font-size: 13px; }
.infind-state { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.infind .btn { font-size: 13px; }
mark { background: var(--hit); color: var(--color-text); padding: 0 1px; }
.section.hit { border-left-color: var(--color-accent-300); }
.section.here { border-left-color: var(--color-highlight); background: color-mix(in srgb, var(--color-accent-800) 19%, transparent); }
.navrow.hit { color: var(--color-accent-700); font-weight: 700; }

.section {
  padding: 24px 0; border-bottom: 1px solid var(--color-divider);
  border-left: 3px solid transparent; padding-left: 18px; margin-left: -18px;
  scroll-margin-top: 90px;
}
.section.on { border-left-color: var(--color-highlight); background: color-mix(in srgb, var(--color-accent-800) 15%, transparent); }
.section h3 { font-size: calc(17px * var(--text-scale)); margin: 0 0 8px; }
.section h3 .num { color: var(--color-accent-700); font-variant-numeric: tabular-nums; margin-right: 10px; }
.section .prose { max-width: 74ch; margin: 0; font-size: calc(16px * var(--text-scale)); line-height: 1.72; white-space: pre-wrap; text-wrap: pretty; }
.section .note { margin: 10px 0 0; font-size: 12px; }

/* — jobber — */
.job { padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.job .line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.job .bar { height: 6px; background: var(--color-surface); margin-top: 10px; }
.job .bar > div { height: 6px; background: var(--color-highlight); }
.job .bar > div.done { background: var(--color-neutral-500); }
.job .detail { font-size: 11px; margin-top: 8px; letter-spacing: .06em; text-transform: uppercase; }
.logline { padding: 11px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.logline .top { display: flex; justify-content: space-between; gap: 10px; }
.logline .what { color: var(--color-accent-700); }
.logline .url { font-size: 11px; word-break: break-all; }

/* — høyreklikkmeny for sitering — */
.ctxmenu {
  position: fixed; z-index: 300; min-width: 292px; max-width: 380px;
  background: linear-gradient(180deg, var(--sheet-top) 0%, var(--sheet-base) 100%);
  border: 2px solid var(--color-accent-700); border-radius: var(--radius-panel);
  box-shadow: 0 18px 46px var(--glow);
  padding: 8px; overflow: hidden;
}
.ctxhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 10px 8px; border-bottom: 1px solid var(--color-accent-300); margin-bottom: 6px;
}
.ctxwhat {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700);
}
.ctxpara { font-size: 12px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.ctxbody { display: flex; flex-direction: column; }
.ctxitem {
  all: unset; cursor: pointer; display: block; padding: 7px 10px;
  border-radius: 10px; line-height: 1.35;
}
.ctxitem:hover, .ctxitem:focus-visible { background: color-mix(in srgb, var(--color-accent-800) 13%, transparent); }
.ctxitem .k { font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.ctxitem .h {
  font-size: 11px; margin-left: 7px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.ctxitem .v {
  display: block; font-size: 11.5px; margin-top: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--color-accent-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctxmore { border-top: 1px solid var(--color-accent-300); border-radius: 0 0 10px 10px; margin-top: 4px; }

/* — skins — */
.skingrid {
  display: grid; gap: 8px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.skin {
  all: unset; cursor: pointer; display: block; padding: 8px;
  border: 2px solid var(--color-divider); border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent-800) 7%, transparent);
}
.skin:hover { border-color: var(--color-highlight); }
.skin.on { border-color: var(--color-highlight); background: color-mix(in srgb, var(--color-highlight) 16%, transparent); }
.skin-strip { display: flex; height: 14px; border-radius: 3px; overflow: hidden; }
.skin-info {
  display: block; font-size: 10.5px; line-height: 1.35; margin-top: 6px;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .2s ease, opacity .2s ease;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.skin:hover .skin-info, .skin.on .skin-info { max-height: 140px; opacity: 1; }
.skin-src { color: var(--color-accent); text-decoration: underline; white-space: nowrap; }

.skin-strip i { flex: 1 1 auto; }
.skin-chip {
  display: flex; align-items: center; gap: 6px; padding: 3px; margin-bottom: 7px;
  border-radius: 5px;
}
.skin-mark { display: grid; place-items: center; width: 20px; height: 20px; font-weight: 800; font-size: 12px; flex: none; border-radius: 3px; }
.skin-nm { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-note {
  display: block; font-size: 11.5px; line-height: 1.35; margin-top: 8px;
}
.skin-demo { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.skin-btn { font-size: 12px; font-weight: 800; padding: 5px 12px; }
.skin-glyphs { font-size: 15px; letter-spacing: 3px; }

/* — jukeboks, Winamp-stil, alltid nede til venstre — */
#jukebox {
  position: fixed; left: 14px; bottom: 14px; z-index: 200; width: 252px;
  font-family: "VT323", ui-monospace, Menlo, monospace;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--header-bg) 82%, #000),
    color-mix(in srgb, var(--header-bg) 55%, #000));
  border: 1px solid color-mix(in srgb, var(--color-text) 40%, #000); border-radius: calc(var(--radius-panel) / 2);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 10px 26px rgba(0,0,0,.5);
  color: var(--header-fg); user-select: none;
}
@media (max-width: 640px) { #jukebox { width: 200px; left: 8px; bottom: 8px; } }
.jb-title { cursor: move; touch-action: none; }
.jb-title {
  display: flex; align-items: center; gap: 6px; padding: 3px 6px;
  background: var(--header-bg); color: var(--header-fg);
  border-radius: calc(var(--radius-panel) / 2) calc(var(--radius-panel) / 2) 0 0;
  border-bottom: 1px solid rgba(0,0,0,.4);
  font-size: 15px; letter-spacing: .04em;
}
.jb-blink { color: #6a7382; }
.jb-blink.on { color: var(--hit); text-shadow: 0 0 6px var(--hit); animation: jb-pulse 1s steps(2) infinite; }
@keyframes jb-pulse { 50% { opacity: .3; } }
.jb-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.jb-min { all: unset; cursor: pointer; width: 16px; height: 14px; text-align: center; line-height: 12px;
  background: var(--header-fg); color: var(--header-bg); font-size: 11px; border-radius: 2px; }
.jb-body { padding: 7px; }
.jb-screen {
  display: flex; gap: 7px; align-items: stretch; padding: 5px 7px; margin-bottom: 6px;
  background: #050806; border: 1px solid #000; border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, #000) inset;
}
.jb-vis { width: 76px; height: 30px; align-self: center; }
.jb-lcd { flex: 1 1 auto; min-width: 0; color: var(--color-accent); text-shadow: 0 0 5px color-mix(in srgb, var(--color-accent) 60%, transparent); }
.jb-marquee { overflow: hidden; white-space: nowrap; font-size: 16px; line-height: 1.1; }
.jb-marquee span { display: inline-block; padding-left: 100%; animation: jb-scroll 12s linear infinite; }
@keyframes jb-scroll { to { transform: translateX(-100%); } }
.jb-sub { font-size: 13px; letter-spacing: .1em; color: color-mix(in srgb, var(--color-accent) 70%, #000); margin-top: 2px; }
.jb-transport { display: flex; align-items: center; gap: 4px; }
.jb-transport button {
  all: unset; cursor: pointer; min-width: 26px; height: 20px; text-align: center; line-height: 20px;
  font-size: 12px; color: var(--header-fg);
  background: color-mix(in srgb, var(--header-bg) 70%, #fff 8%); border: 1px solid rgba(0,0,0,.4);
  border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
}
.jb-transport button:hover { background: linear-gradient(180deg, #555c67, #33383f); }
.jb-transport button:active { box-shadow: 0 1px 3px #000 inset; }
.jb-listtoggle.on { color: var(--hit); }
.jb-spacer { flex: 1 1 auto; }
.jb-list {
  list-style: none; margin: 7px 0 0; padding: 4px; max-height: 320px; overflow-y: auto;
  background: #050806; border: 1px solid #000; border-radius: 3px;
  font-size: 15px; color: color-mix(in srgb, var(--color-accent) 80%, #fff);
}
.jb-list li { cursor: pointer; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-list li:hover { background: #0e1a10; }
.jb-list li.on { background: var(--header-bg); color: var(--header-fg); }
.jb-list .jb-n { color: var(--color-accent); }
#jukebox.min { width: auto; }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
}
.dialog {
  width: min(620px, 100%);
  background: linear-gradient(180deg, var(--sheet-top) 0%, var(--sheet-base) 100%);
  border: 2px solid var(--color-accent-700); border-radius: var(--radius-panel);
  padding: 30px 32px 28px; box-shadow: 0 20px 60px var(--glow);
  max-height: 90vh; overflow-y: auto;
}
.dialog h2 { font-size: calc(23px * var(--heading-scale)); margin: 0; }
.dialog .x { all: unset; cursor: pointer; font-size: 20px; line-height: 1; color: var(--color-highlight); }
.recognised {
  background: color-mix(in srgb, var(--color-accent-800) 11%, transparent);
  border-left: 3px solid var(--color-highlight);
  padding: 12px 14px; margin-top: 18px; font-size: 13px;
}
.citeblock { margin-bottom: 16px; }
.citehead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.citeblock pre {
  margin: 0; padding: 12px 14px; background: color-mix(in srgb, var(--color-accent-800) 12%, transparent);
  border-left: 3px solid var(--color-highlight); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dialog-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; align-items: center; }

footer.foot {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 18px 0 0; margin-top: 28px; border-top: 2px solid var(--color-divider); font-size: 12px;
}
footer.foot .heart { color: var(--color-highlight); }
.pager { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.spinner {
  display: inline-block; width: 13px; height: 13px; border: 2px solid var(--color-neutral-300);
  border-top-color: var(--color-highlight); border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* — bred skjerm —
   Under 1650 piksler er 1340 en god lesebredde. Over det blir siden stående
   som en smal stripe midt i et stort felt, så spalten får vokse. Brødteksten
   holdes på sin egen bredde uansett, ellers blir linjene for lange å følge. */
@media (min-width: 1650px) {
  main.shell, .topbar, .tabrow { max-width: 1560px; }
  .docgrid { gap: 56px; justify-content: center; }
  .doc-body { max-width: 940px; }
  .doc-toc { flex: 1 1 320px; max-width: 440px; }
  .cols { gap: 48px; }
  .col-side { max-width: 420px; }
}
@media (min-width: 2200px) {
  main.shell, .topbar, .tabrow { max-width: 1820px; }
  .cols, .docgrid { gap: 64px; }
  .doc-toc { max-width: 480px; }
}

/* — prompt til agenten —
   Den skal være det første øyet treffer på API-siden, siden det er den folk
   faktisk er ute etter. */
.agentbox {
  border: 2px solid var(--color-highlight); border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--color-highlight) 9%, transparent);
  padding: 18px 20px 20px; margin: 0 0 34px;
}
.agentbox h6 { margin: 0 0 6px; color: var(--color-accent-700); }
.agentbox p { margin: 0 0 14px; max-width: 66ch; }
.agentbox pre {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 8px; border-left: 0;
  background: color-mix(in srgb, var(--color-accent-800) 13%, transparent);
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(12.5px * var(--text-scale)); line-height: 1.6;
  max-height: 260px; overflow-y: auto;
}
.agentbox-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* — dokumentasjonssiden —
   Innholdet er markdown gjengitt til HTML, så det er elementene selv som må
   styles, ikke klasser. */
.sheet.md { max-width: 1000px; margin: 0 auto; }
.md h1 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 10px; }
.md h2 {
  font-size: calc(24px * var(--text-scale)); margin: 42px 0 10px;
  padding-bottom: 8px; border-bottom: 3px solid var(--color-highlight);
}
.md h3 {
  font-size: calc(17px * var(--text-scale)); margin: 30px 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  color: var(--color-accent-700); letter-spacing: -.01em;
}
.md p, .md li { font-size: calc(15px * var(--text-scale)); line-height: 1.68; max-width: 74ch; }
.md ul, .md ol { padding-left: 22px; margin: 0 0 14px; }
.md li { margin-bottom: 4px; }
.md li > ul { margin-top: 4px; }
.md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: color-mix(in srgb, var(--color-accent-800) 11%, transparent);
  padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere;
}
.md pre {
  background: color-mix(in srgb, var(--color-accent-800) 12%, transparent);
  border-left: 3px solid var(--color-highlight); border-radius: 0 6px 6px 0;
  padding: 14px 16px; margin: 0 0 18px; overflow-x: auto;
  font-size: calc(13px * var(--text-scale)); line-height: 1.55;
}
.md pre code { background: none; padding: 0; font-size: inherit; }
.md table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: calc(14px * var(--text-scale)); }
.md th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  padding: 8px 10px; border-bottom: 2px solid var(--color-divider);
}
.md td { padding: 8px 10px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.md table code { white-space: nowrap; }
.md blockquote {
  margin: 0 0 18px; padding: 10px 16px; border-left: 3px solid var(--color-highlight);
  background: color-mix(in srgb, var(--color-accent-800) 8%, transparent);
}
.md hr { border: 0; border-top: 2px solid var(--color-divider); margin: 34px 0; }
@media (max-width: 700px) {
  .md pre { font-size: calc(12px * var(--text-scale)); padding: 12px; }
  .md table { display: block; overflow-x: auto; }
}

/* — smal skjerm —
   Alt responsivt ligger sist, slik at det faktisk overstyrer reglene over.
   Står en mediespørring midt i filen, vinner en senere regel med samme
   spesifisitet uansett hvor smal skjermen er. */
@media (max-width: 700px) {
  .topbar { padding: 10px 14px; gap: 10px; }
  .tabrow { padding: 0 14px; }
  .brand .name { font-size: 21px; }
  .brand .mark { width: 30px; height: 30px; font-size: 18px; }
  .searchwrap { flex: 1 1 100%; min-width: 0; order: 3; }
  .searchwrap .input { min-height: 38px; }
  .searchwrap .btn { min-height: 38px; padding-inline: 14px; }
  .topmeta { margin-left: auto; gap: 6px; }
  .topmeta .favcount { display: none; }
  .topmeta .btn { padding-inline: 10px; font-size: 13px; }
}
@media (max-width: 700px) {
  .sheet { padding: 22px 14px 26px; }
  .section { padding-left: 14px; margin-left: -14px; }

  .row { gap: 5px 12px; padding: 12px 0; }
  .row .open { flex: 1 1 calc(100% - 30px); }
  .row .open > .t { -webkit-line-clamp: 3; }
  .row .meta { margin-left: 25px; flex-wrap: wrap; gap: 2px 12px; }
  .row .set { font-size: 11.5px; }
  .row .ident { font-size: 11.5px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .row .snippet { margin-left: 25px; }

  .filterbar { flex-direction: column; align-items: stretch; }
  .filterbar .input { width: 100%; max-width: none; }

  .listhead h1 { font-size: calc(20px * var(--text-scale) * var(--heading-scale)); }
  .cols, .docgrid { gap: 26px; }
  .identrow { gap: 8px; }
  .identrow .btn { padding-inline: 8px; }

  /* Info-blokkene (agent, import, datasett, lokalt speil) skal øverst, over
     «Alle dokumenter». Kolonnen legges i vanlig flyt og løftes foran lista. */
  .cols { flex-direction: column; }
  .col-side { order: -1; }
  .col-side .sidelinks { border-left: 0; padding-left: 0; }
  .footlink { display: inline-block; padding: 4px 0; }
}


/* Webamp (ekte Winamp). VIKTIG: Webamp tegner IKKE vinduene inn i verten vi gir
   den. Den lager sitt eget element med id "webamp" rett på body, og det har
   z-index 0 i Webamps egen CSS. Det var derfor spilleren alltid havnet bak
   innholdet, uansett hva vi gjorde med verten. Vi løfter derfor #webamp selv.
   Elementet er 0x0, så det blokkerer ingen klikk, men vi slipper likevel mus
   igjennom og lar bare selve vinduene fange den. Vi setter ingen posisjon på
   vinduene, for da overstyrer vi Webamps egen dra-logikk og vinduet blir
   sittende fast. Uten den overstyringen kan Winamp dras fritt over hele siden. */
#webamp { position: fixed !important; top: 0 !important; left: 0 !important;
  z-index: 2147483000 !important; pointer-events: none !important; }
#webamp .window,
#webamp [class*="window"] { pointer-events: auto !important; }
#webamp-host { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
#equalizer-window { display: none !important; }

/* Skin-velger vi eier selv. Ligger fast nede til venstre, over Winamp. */
#wa-skin { position: fixed; left: 8px; bottom: 8px; z-index: 2147483001; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 6px; padding: 6px 10px; font-size: 12px; }
#wa-skin:hover { background: rgba(0,0,0,.8); }
#wa-skin-menu { position: fixed; left: 8px; bottom: 44px; z-index: 2147483002; max-height: 60vh; overflow: auto;
  background: #14121c; color: #eee; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 5px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5); min-width: 200px; }
#wa-skin-menu button { display: block; width: 100%; text-align: left; background: transparent; color: inherit;
  border: 0; padding: 6px 9px; border-radius: 5px; font-size: 12px; cursor: pointer; }
#wa-skin-menu button:hover { background: rgba(255,255,255,.12); }
#wa-skin-menu button.on { background: rgba(255,255,255,.18); font-weight: 700; }

/* ---------- innholdsvinduet som eget program ---------- */
/* Et tynt håndtak i toppen lar deg dra arket. Det ligger over den tomme
   toppmargen (34px padding), så det dekker verken tekst eller knapper. Grepet
   er justert etter shell sin egen padding (20px topp, 24px sider) slik at det
   flukter med arkets kant. Reglene for Webamp lenger ned røres ikke. */
#sheet-grip {
  position: absolute; top: 20px; left: 24px; right: 24px; height: 22px;
  z-index: 3; cursor: grab; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  touch-action: none;
}
#sheet-grip::after {
  content: ""; width: 48px; height: 5px; border-radius: 3px;
  background: var(--color-accent-300, #f2a9c0); opacity: .55; transition: opacity .15s ease;
}
#sheet-grip:hover::after { opacity: .95; }
#sheet-grip.dragging { cursor: grabbing; }
/* Arket løftes litt visuelt når det er det fremste vinduet. */
.sheet.win-front { box-shadow:
  0 1px 0 rgba(255, 255, 255, .55) inset,
  0 0 0 8px var(--sheet-ring),
  0 28px 74px var(--sheet-shadow); }

/* ---------- søk i musikkarkivet ---------- */
#music-find {
  position: fixed; right: 14px; bottom: 14px; z-index: 2147483003;
  font-family: var(--font-heading, system-ui), sans-serif;
}
#mf-toggle {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font-weight: 800; font-size: 12.5px;
  color: var(--header-fg, #fff);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent, #e0294a) 92%, #000),
    color-mix(in srgb, var(--color-accent, #e0294a) 66%, #000));
  border: 1px solid color-mix(in srgb, #000 30%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 8px 22px rgba(0, 0, 0, .38);
}
#mf-toggle:hover { filter: brightness(1.06); }
#mf-panel {
  position: absolute; right: 0; bottom: 42px; width: min(280px, 82vw);
  padding: 10px; border-radius: 12px;
  background: linear-gradient(180deg, var(--sheet-top, #fff), var(--sheet-base, #fff6f9));
  border: 2px solid var(--color-accent-300, #f2a9c0);
  box-shadow: 0 18px 48px var(--sheet-shadow, rgba(120, 18, 48, .3));
  color: var(--color-text, #2a1620);
}
#mf-q {
  width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 10px;
  border-radius: 8px; border: 1px solid var(--color-accent-300, #f2a9c0);
  background: #fff; color: var(--color-text, #2a1620); font-size: 14px;
}
#mf-q:focus { outline: 2px solid var(--color-highlight, #e0294a); outline-offset: 1px; }
#mf-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 46vh; overflow-y: auto; }
#mf-list li {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 9px; cursor: pointer;
  border-radius: 7px; font-size: 13px; line-height: 1.3;
}
#mf-list li:hover { background: color-mix(in srgb, var(--color-accent, #e0294a) 12%, transparent); }
#mf-list li.on { background: color-mix(in srgb, var(--color-highlight, #e0294a) 20%, transparent); font-weight: 700; }
#mf-list .mf-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mf-list .mf-grp { flex: none; font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
#mf-list .mf-note { display: block; padding: 8px 9px; font-size: 12.5px; opacity: .7; cursor: default; }
#mf-list .mf-note:hover { background: none; }
@media (max-width: 760px) {
  #music-find { right: 8px; bottom: 8px; }
  #mf-toggle { padding: 6px 11px; font-size: 12px; }
}