/* ============================================================================
   Fyraftensmøder om sundhedsteknologi — forsiden.

   Sitet er tegnet som et instrumentpanel frem for en brochure: mørk flade,
   pulslinjen som gennemgående figur, og tal der står i faste kolonner. Det er
   ingeniørstuderende der skal tilmelde sig, og apparatur er deres sprog.

   Farverne er sat én gang her og bruges kun gennem variablerne. Designet er
   bevidst mørkt hele vejen — der er ingen lys udgave — så hver farve står
   eksplicit, og siden holder uanset hvad browseren måtte foretrække.
   ========================================================================= */

/* ── Skrifter. Selvhostet, så Content-Security-Policy kan blive stående som
   'self' hele vejen: intet hentes fra et andet domæne. ─────────────────── */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Flader, fra dybest til nærmest */
  --bg:      #08131A;
  --bg-2:    #0D1E28;
  --bg-3:    #132C38;
  --line:    #1B3542;
  --line-2:  #29505F;

  /* Tekst */
  --ink:     #EAF2F4;
  --dim:     #8CA6B0;
  --dimmer:  #617C88;

  /* Accent. Pulsgrøn er sidens eneste stærke farve — alt andet er dæmpet,
     så den kan bære det den skal: linjen, tallene der tæller, og knappen. */
  --pulse:     #2BE0A6;
  --pulse-ink: #05231B;
  --pulse-dim: #1C8E6B;

  /* Årstal og markeringer i arkivet. Varm, så den ikke forveksles med pulsen. */
  --warm:    #FF7A4D;
  /* Statusfarver. Adskilt fra accenten, så "advarsel" ikke ligner "primær". */
  --amber:   #FFC24D;
  --crit:    #FF6B6B;

  --radius:  4px;
  --gutter:  clamp(20px, 4vw, 40px);
  --measure: 1160px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--pulse); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--pulse);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Springlink. Skal kunne ses, når den får fokus — ellers findes den ikke. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 90;
  background: var(--pulse); color: var(--pulse-ink);
  padding: 10px 16px; border-radius: var(--radius); font-weight: 600;
  text-decoration: none; transition: top .15s;
}
.skip:focus { top: 12px; color: var(--pulse-ink); }

/* ── Typografi ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: "Archivo", system-ui, sans-serif;
  letter-spacing: -0.024em;
  /* Overskrifter sættes tæt. Brødtekstens 1,62 er til linjer man læser efter
     hinanden; en overskrift på to linjer falder fra hinanden med den afstand. */
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

.label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* Tal der står under hinanden, skal flugte. */
.num { font-variant-numeric: tabular-nums; }

/* ── Toplinje ──────────────────────────────────────────────────────────── */

.topbar {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}
.topbar-inner {
  max-width: var(--measure); margin: 0 auto; padding: 15px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none;
  letter-spacing: -0.005em;
}
.brand:hover { color: var(--ink); }
.brand-part { display: none; }
@media (min-width: 560px) { .brand-part { display: inline; } }
.brand-mark {
  width: 9px; height: 9px; border-radius: 50%; background: var(--pulse);
  flex: none;
  animation: beat 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes beat {
  0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(43,224,166,.5); }
  8%            { box-shadow: 0 0 0 10px rgba(43,224,166,0); }
}
.topbar nav { display: flex; gap: 4px; align-items: center; }
.topbar nav a {
  color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--radius);
}
.topbar nav a:hover { color: var(--ink); background: var(--bg-2); }
@media (max-width: 720px) {
  .topbar nav a.optional { display: none; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 86px) 0 0;
  isolation: isolate;
}

/* De tre lag der giver dybden. De ligger bag indholdet og flyttes i hver sin
   hastighed, når man ruller — millimetervis, ikke meter: bevægelsen skal
   mærkes, ikke ses. */
.hero-layer {
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.hero-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .34;
  /* Gitteret må ikke fortsætte ud i teksten nedenfor; det toner ud. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.hero-glow {
  background:
    radial-gradient(58% 46% at 22% 10%, rgba(43,224,166,.15), transparent 70%),
    radial-gradient(46% 40% at 88% 46%, rgba(255,122,77,.09), transparent 72%);
}
.hero-veins { opacity: .5; }
.hero-veins svg { width: 100%; height: 100%; display: block; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pulse);
  border: 1px solid rgba(43,224,166,.3);
  border-radius: 100px; padding: 6px 15px 6px 12px;
  margin-bottom: 26px;
}
.hero-kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pulse); flex: none;
  animation: beat 2.4s cubic-bezier(.4,0,.2,1) infinite;
}

.hero h1 {
  font-weight: 700;
  /* Nedre grænse følger skærmen frem for at være et fast tal: "sundhedsteknolog"
     er ét ord på seksten bogstaver, og ved 40px er det bredere end en telefon.
     Orddeling er sikkerhedsnettet, hvis et endnu længere ord dukker op — siden
     er lang="da", så browseren deler efter danske regler. */
  font-size: clamp(30px, 8.4vw, 86px);
  line-height: .95;
  letter-spacing: -0.036em;
  max-width: 16ch;
  margin-bottom: 26px;
  hyphens: auto;
  overflow-wrap: break-word;
}
.hero h1 em { font-style: normal; color: var(--pulse); }

.hero-lead {
  max-width: 56ch;
  font-size: clamp(17px, 1.7vw, 19.5px);
  color: var(--dim);
  margin: 0 0 34px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 44px; }

/* ── Pulslinjen ────────────────────────────────────────────────────────── */

/* Kurven er ikke pynt: den tegnes af den faktiske bølgeform i assets/js/ecg.js,
   med P-tak, QRS-kompleks og T-tak i rigtige indbyrdes forhold. */
.ecg { display: block; width: 100%; height: clamp(78px, 11vw, 118px); overflow: visible; }
.ecg-trace {
  fill: none;
  stroke: var(--pulse);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(43,224,166,.4));
}
.ecg-baseline { stroke: var(--line-2); stroke-width: 1; fill: none; }
/* Prikken der løber med spidsen af kurven, mens den tegnes. */
.ecg-head { fill: var(--pulse); filter: drop-shadow(0 0 8px rgba(43,224,166,.8)); }

/* Den tynde udgave, der skiller sektionerne. */
.ecg-divider { height: 46px; opacity: .55; margin: 0; }
.ecg-divider .ecg-trace { stroke-width: 1.4; filter: none; }

/* ── Nøgletal under kurven ─────────────────────────────────────────────── */

 /* Faste kolonner frem for auto-fit: skillelinjen mellem to tal skal væk,
    når tallet er først i sin række, og det kan man kun vide med et fast
    antal kolonner. Auto-fit gav enten tekst klemt op ad linjen eller en
    kolonne, der ikke flugtede med overskriften ovenover. */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  margin-top: 28px;
}
.fact {
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 520px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { border-left: 1px solid var(--line); padding-left: 20px; }
  .fact:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 860px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact { border-bottom: 0; }
  .facts { border-bottom: 1px solid var(--line); }
  .fact:nth-child(2n + 1) { border-left: 1px solid var(--line); padding-left: 20px; }
  .fact:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
}
.fact dt { margin-bottom: 7px; }
.fact dd {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 23px);
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.fact dd small { display: block; font-size: 13.5px; font-weight: 400; color: var(--dim);
  font-family: "Instrument Sans", sans-serif; letter-spacing: 0; margin-top: 3px; }

/* ── Knapper ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.btn-primary { background: var(--pulse); color: var(--pulse-ink); }
.btn-primary:hover:not(:disabled) { background: #4CEEBC; color: var(--pulse-ink); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--pulse); color: var(--pulse); }
.btn-quiet { background: transparent; color: var(--dim); padding: 9px 13px; font-weight: 500; }
.btn-quiet:hover:not(:disabled) { color: var(--ink); background: var(--bg-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* ── Sektioner ─────────────────────────────────────────────────────────── */

.section { padding: clamp(56px, 8vw, 92px) 0; }
.section-head { margin-bottom: 38px; }
.section-head .label { display: block; margin-bottom: 12px; }
.section-head h2 {
  font-weight: 600;
  font-size: clamp(27px, 3.6vw, 41px);
  letter-spacing: -0.028em;
  max-width: 20ch;
}
.section-head p { color: var(--dim); max-width: 62ch; margin: 14px 0 0; }

/* ── Program ───────────────────────────────────────────────────────────── */

/* Programmet hænger på en lodret linje med en prik ved hvert punkt — samme
   figur som pulslinjen, drejet en kvart omgang. */
.programme { position: relative; padding-left: 0; }
.prog-row {
  display: grid;
  grid-template-columns: 72px 22px 1fr;
  gap: 0 18px;
  align-items: start;
}
.prog-time {
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 16px;
  font-variant-numeric: tabular-nums; color: var(--pulse);
  padding-top: 14px; letter-spacing: -0.01em;
}
/* Sporet: en linje ned gennem hele programmet med en prik ved hvert punkt. */
.prog-spine { position: relative; }
.prog-spine::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--line-2); transform: translateX(-50%);
}
.prog-row:first-child .prog-spine::before { top: 21px; }
.prog-row:last-child .prog-spine::before { bottom: auto; height: 21px; }
.prog-dot {
  position: absolute; left: 50%; top: 21px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line-2);
  transform: translate(-50%, -50%);
}
.prog-row[data-key] .prog-dot { background: var(--pulse); border-color: var(--pulse); }
.prog-body { padding: 14px 0 22px; }
.prog-body h3 { font-size: 19.5px; font-weight: 600; letter-spacing: -0.018em; margin-bottom: 4px; }
.prog-who { color: var(--pulse); font-size: 14.5px; font-weight: 500; }
.prog-who span { color: var(--dim); font-weight: 400; }
.prog-body p { color: var(--dim); font-size: 15.5px; margin: 8px 0 0; max-width: 60ch; }
.prog-mins { color: var(--dimmer); font-size: 13.5px; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .prog-row { grid-template-columns: 58px 18px 1fr; gap: 0 12px; }
  .prog-time { font-size: 15px; }
}

/* ── Oplægsholdere ─────────────────────────────────────────────────────── */

.speakers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 20px;
}
.speaker {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s, background .25s;
}
.speaker:hover { border-color: var(--pulse-dim); background: var(--bg-3); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .speaker:hover { transform: none; } }

.portrait {
  width: 86px; height: 86px; border-radius: 50%;
  object-fit: cover; display: block; margin-bottom: 18px;
  background: var(--bg-3);
  box-shadow: 0 0 0 1px var(--line-2), 0 0 0 6px rgba(43,224,166,.07);
}
/* Uden foto: initialerne i en cirkel, ikke et gråt ikon af et menneske. */
.portrait-blank {
  display: grid; place-items: center;
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 27px;
  color: var(--pulse-dim); letter-spacing: -0.02em;
}
.speaker h3 { font-size: 18px; font-weight: 600; margin-bottom: 3px; letter-spacing: -0.018em; }
.speaker-role { color: var(--pulse); font-size: 14px; font-weight: 500; }
.speaker-role span { color: var(--dim); font-weight: 400; }
.speaker-bio { color: var(--dim); font-size: 14.5px; line-height: 1.55; margin: 12px 0 0; }
.speaker-talk {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink); font-weight: 500;
}
.speaker-foot { margin-top: auto; padding-top: 15px; }
.tag {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--warm); border: 1px solid rgba(255,122,77,.3);
  border-radius: 2px; padding: 3px 7px;
}

/* ── Stedet ────────────────────────────────────────────────────────────── */

.venue {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
}
@media (min-width: 900px) { .venue { grid-template-columns: 1fr 1.15fr; } }

.venue-body { padding: 30px 30px 32px; }
.venue-body h3 { font-size: 25px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.024em; }
.venue-address { color: var(--dim); font-style: normal; margin-bottom: 20px; }
.venue-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 5px 10px;
}
.chip b { color: var(--pulse); font-weight: 600; }
.venue-body p { color: var(--dim); font-size: 15.5px; margin: 0 0 18px; }

/* Skråfoto og kort. Fotoet står øverst, kortet under: man genkender bygningen
   først, og finder derefter ud af hvor den ligger. */
.venue-visual { display: grid; grid-template-rows: auto auto; background: var(--bg-3); }
.venue-photo { position: relative; }
.venue-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.venue-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 11px;
  font-size: 12px; color: var(--ink);
  background: linear-gradient(to top, rgba(8,19,26,.92), transparent);
}

/* Kortet er en mosaik af flisebilleder fra OpenStreetMap, lagt af
   assets/js/tilemap.js. Ingen kortbibliotek: seks img-elementer og en nål. */
.map {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--bg-3);
}
/* Kun en skillelinje, når der faktisk står noget ovenover. */
.venue-photo + .map { border-top: 1px solid var(--line); }
.map-canvas { position: absolute; inset: 0; }
.map-canvas img {
  position: absolute; width: 256px; height: 256px; display: block;
  /* OpenStreetMap leverer kun lyse fliser. En dæmpning alene rækker ikke — den
     giver et gråt kort, ikke et mørkt. Invertering vender lyst til mørkt, og
     hue-rotate(180deg) vender farverne tilbage, så vand stadig er blåligt og
     parker grønne. Derefter køles det ned mod sidens petroleum. */
  filter: invert(1) hue-rotate(180deg) brightness(.78) contrast(.92)
          saturate(.55) sepia(.22) hue-rotate(140deg);
}
.map-pin {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid var(--pulse);
  background: rgba(43,224,166,.22);
  box-shadow: 0 0 0 6px rgba(43,224,166,.12);
  pointer-events: none;
}
.map-pin::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; background: var(--pulse);
}
.map-tools { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.map-tools button {
  width: 30px; height: 30px; border-radius: 3px; cursor: pointer;
  background: rgba(8,19,26,.85); color: var(--ink);
  border: 1px solid var(--line-2);
  font-size: 16px; line-height: 1; font-family: inherit;
}
.map-tools button:hover { border-color: var(--pulse); color: var(--pulse); }
.map-credit {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 10.5px; color: var(--dim);
  background: rgba(8,19,26,.7); padding: 2px 6px; border-radius: 2px;
}
.map-credit a { color: var(--dim); }

/* ── Tilmelding ────────────────────────────────────────────────────────── */

.signup {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(43,224,166,.07), transparent 70%),
    var(--bg-2);
  padding: clamp(28px, 4vw, 44px);
}
.signup-head { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: baseline; margin-bottom: 26px; }
.signup-head h2 { font-size: clamp(25px, 3.2vw, 34px); font-weight: 600; letter-spacing: -0.028em; }
.seats {
  font-size: 14.5px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.seats b { color: var(--pulse); font-weight: 600; }

.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.field label span { color: var(--dimmer); font-weight: 400; }
.field .hint { font-size: 13px; color: var(--dimmer); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="time"], input[type="number"], input[type="url"], input[type="search"],
select, textarea {
  font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 11px 13px;
  width: 100%;
  transition: border-color .16s, background .16s;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: #35606F; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pulse); background: var(--bg-2);
  box-shadow: 0 0 0 3px rgba(43,224,166,.13);
}
input::placeholder, textarea::placeholder { color: var(--dimmer); }
/* Safari tegner sit eget felt for type=search, med afrundede kanter og en
   baggrund vi ikke kan sætte. appearance: none giver os feltet tilbage. */
input[type="search"] { appearance: none; -webkit-appearance: none; }
select {
  appearance: none;
  /* Pilen tegnes her frem for med et billede, så der ikke skal hentes en fil
     for en trekant. */
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.form-foot { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form-note { color: var(--dimmer); font-size: 13.5px; max-width: 52ch; }

/* Beskeder. Farven bærer betydningen, men teksten siger den også — en farve
   alene er ikke en besked. */
.note {
  border-radius: var(--radius); padding: 13px 16px; font-size: 15px;
  border: 1px solid; display: flex; gap: 10px; align-items: flex-start;
}
.note-ok   { border-color: var(--pulse-dim); background: rgba(43,224,166,.09); color: var(--ink); }
.note-warn { border-color: rgba(255,194,77,.4); background: rgba(255,194,77,.08); color: var(--ink); }
.note-bad  { border-color: rgba(255,107,107,.42); background: rgba(255,107,107,.09); color: var(--ink); }
.note b { font-weight: 600; }

/* ── Arkiv ─────────────────────────────────────────────────────────────── */

.archive { border-top: 1px solid var(--line); }
.arch-row {
  display: grid; gap: 4px 20px;
  grid-template-columns: 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 720px) { .arch-row { grid-template-columns: 130px 1fr auto; } }
.arch-date { color: var(--warm); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.arch-title { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 17.5px; letter-spacing: -0.018em; }
.arch-meta { color: var(--dim); font-size: 14px; }

/* ── Bunden ────────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 56px;
  color: var(--dim);
  font-size: 14.5px;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; }
.footer p { margin: 0 0 6px; max-width: 52ch; }
.footer a { color: var(--dim); }
.footer a:hover { color: var(--pulse); }

/* ── Tilstande siden kan være i ────────────────────────────────────────── */

.empty {
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 44px 30px; text-align: center; color: var(--dim);
}
.empty h2 { font-size: 24px; color: var(--ink); margin-bottom: 10px; font-weight: 600; }
.empty p { margin: 0 auto; max-width: 48ch; }

.loading { color: var(--dimmer); font-size: 15px; padding: 30px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-layer { transform: none !important; }
}

/* Løbende tekst holdes på en læsbar linjelængde, uanset hvor bred spalten er. */
.measure { max-width: 66ch; }