/* brasholtbruun.dk v2 — nøgternt standard-design (AP-7, bygget videre på AP1's
   struktur-CSS). Albert 2026-09-12: "brug det eksisterende tema" — INGEN nye
   farver/fonts. Alle farver er tokens herunder (grep-krav, AP-7.md accept-test
   4: ingen hex-farve uden for :root). Tokens+værdier fra
   apps/mobile-brasholtbruun/src/lib/theme.js (familie-appens farver); lys/mørk
   via prefers-color-scheme + data-theme = SAMME mekanik + SAMME localStorage-
   nøgle ('portal-theme-v1') som apps/agent/portal.html og madplan.js, se
   includes/layout.php. Én accent-farve, resten gråtoner
   ([[feedback_restrained_color_use]]). */

:root {
  --bg:            #0f1117;
  --flade:         #1a1d27;
  --flade-2:       #161a22;
  --tekst:         #e8eaf0;
  --tekst-dæmpet:  #9ca3af;
  --tekst-svag:    #6b7280;
  --accent:        #4f8ef7;
  --kant:          #2a2d3a;
  --ok:            #3fb950;
  --fejl:          #f87171;
  --paa-accent:    #ffffff;
  --radius:        14px;
  --skygge:        0 4px 14px rgba(0, 0, 0, 0.18);
  --mellemrum-1:   4px;
  --mellemrum-2:   8px;
  --mellemrum-3:   16px;
  --mellemrum-4:   24px;
}

/* Lys tema — standard for de fleste (matchMedia 'prefers-color-scheme: light'
   sætter data-theme="light" i layout.php's tema-init); uden match/JS forbliver
   siden på det mørke :root ovenfor, samme fallback-retning som portal.html. */
:root[data-theme="light"] {
  --bg:            #ffffff;
  --flade:         #f7f7f8;
  --flade-2:       #f2f2f2;
  --tekst:         #1a1a1a;
  --tekst-dæmpet:  #666666;
  --tekst-svag:    #888888;
  --accent:        #4f8ef7;
  --kant:          #e5e5e5;
  --ok:            #27ae60;
  --fejl:          #c0392b;
  --paa-accent:    #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--tekst);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 64px; /* plads til fane-linjen i bunden (mobil) */
}

a { color: var(--accent); }

/* Fokus-ringe overalt — tastatur-/skærmlæser-brugere skal altid kunne se hvor
   fokus er (AP-7.md Skal 2: "kontrast ≥ 4.5:1"). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Global formular-baseline (designløft, 2026-09-17): login og "Tilføj
   ønske" m.fl. var HELT ustylede rå browser-felter — den enkelt største
   kilde til at sitet ikke hang visuelt sammen. Sætter kun farve/kant/radius/
   font, INGEN width/display — rører derfor ikke admin-tabellernes inline-
   redigeringsrækker (modules/admin/pages/medlemmer.php), som er afhængige af
   feltenes naturlige størrelse side om side. Placeret FØR de mere specifikke
   kort-/knap-regler nedenfor, så de stadig vinder ved lige specificitet. */
.bb-indhold input:not([type="checkbox"]):not([type="radio"]),
.bb-indhold select,
.bb-indhold textarea {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--kant);
  border-radius: 8px;
  background: var(--flade-2);
  color: var(--tekst);
}
.bb-indhold input:focus, .bb-indhold select:focus, .bb-indhold textarea:focus {
  border-color: var(--accent);
}
.bb-indhold label { font-weight: 600; font-size: 13px; color: var(--tekst-dæmpet); }
.bb-indhold button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--paa-accent);
  cursor: pointer;
}
.bb-indhold button:hover { opacity: 0.9; }

.bb-ok { color: var(--ok); }
.bb-fejl { color: var(--fejl); }

/* ── Login (designløft): centreret kort i stedet for løse felter i toppen ── */
.bb-auth-wrap { display: flex; justify-content: center; padding-top: var(--mellemrum-4); }
.bb-auth-kort {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: var(--mellemrum-4);
  width: 100%;
  max-width: 360px;
}
.bb-auth-kort input { width: 100%; }
.bb-auth-sekundaer { font-size: 13px; color: var(--tekst-dæmpet); }

/* ── Top-linje (AP-7) ── */

.bb-top {
  order: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--mellemrum-3) var(--mellemrum-3);
  border-bottom: 1px solid var(--kant);
  background: var(--flade);
  position: sticky;
  top: 0;
  z-index: 20;
}

.bb-husstand { font-weight: 600; }
.bb-login-link { font-size: 14px; font-weight: 600; }

.bb-avatar-wrap { position: relative; }

.bb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--paa-accent);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-avatar-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: var(--mellemrum-2) 0;
  display: flex;
  flex-direction: column;
}

.bb-avatar-navn {
  padding: var(--mellemrum-1) var(--mellemrum-3) var(--mellemrum-2);
  font-weight: 600;
  border-bottom: 1px solid var(--kant);
  margin-bottom: var(--mellemrum-1);
}

.bb-avatar-punkt {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--mellemrum-2) var(--mellemrum-3);
  border: none;
  background: none;
  color: var(--tekst);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.bb-avatar-punkt:hover { background: var(--flade-2); }
.bb-avatar-punkt--fare { color: var(--fejl); }

/* ── Indhold ── */

.bb-indhold {
  order: 3;
  flex: 1;
  padding: var(--mellemrum-3);
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

/* ── Fane-linje: bund på mobil (≤700px), top/statisk på desktop ── */

.bb-faner {
  order: 2;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  border-top: 1px solid var(--kant);
  background: var(--flade);
  z-index: 20;
}

.bb-fane {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  padding: var(--mellemrum-2) var(--mellemrum-1);
  text-decoration: none;
  color: var(--tekst-dæmpet);
  font-size: 12px;
}

.bb-fane-ikon { font-size: 18px; line-height: 1; }
.bb-fane.aktiv { color: var(--accent); font-weight: 600; }

/* Gæst på den offentlige ønske-tavle (ingen session): fane-linjen udelades
   server-side (layout.php's $_visFaner), så det reserverede rum i bunden skal
   ikke stå tomt på mobil. */
body.bb-uden-faner { padding-bottom: 0; }

@media (min-width: 701px) {
  body { padding-bottom: 0; }
  .bb-faner {
    position: static;
    border-top: none;
    border-bottom: 1px solid var(--kant);
    justify-content: center;
    gap: var(--mellemrum-4);
  }
  .bb-fane {
    flex: none;
    flex-direction: row;
    padding: var(--mellemrum-2) var(--mellemrum-1);
    font-size: 14px;
  }
  .bb-fane-ikon { font-size: 15px; }
}

/* ── Kiosk-tilstand (?layout=kiosk eller app_slug='kiosk') ──
   Ingen top-/fane-linje (udelades server-side i layout.php); større skrift,
   kort-gitteret fylder skærmen. Den fulde kiosk-side (enheds-login, iPad) er
   AP15/17 — dette er kun visnings-tilstanden. */

body.bb-kiosk {
  font-size: 18px;
  padding-bottom: 0;
}
body.bb-kiosk .bb-indhold {
  max-width: none;
  padding: var(--mellemrum-4);
  display: flex;
  flex-direction: column;
}

/* Hjem-dashboardet (designløft 2026-09-18, Albert: "udnytter at placere
   boksene på en bedre måde" på store skærme) får mere plads end den delte
   960px — :has() undgår at skulle give SIDEN sin egen klasse (aktivFane er
   'hjem' for BÅDE dashboardet og den offentlige forside, se index.php's
   rute-tabel, så en klasse på <body> ville ramme begge). Kiosk uændret,
   har allerede sin egen regel ovenfor. */
.bb-indhold:has(.hj-grid) { max-width: 1400px; }

/* ── Hjem: kort-stak (AP-7) ── */

.hj-status-bar {
  background: var(--flade-2);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: var(--mellemrum-2) var(--mellemrum-3);
  margin-bottom: var(--mellemrum-3);
  font-size: 14px;
  color: var(--tekst-dæmpet);
}

.hj-tom { color: var(--tekst-dæmpet); }

.hj-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mellemrum-3);
  /* dense: når et 2-kolonne "stor"-kort (se .hj-kort--stor) efterlader et
     hul, rykker et senere LILLE kort op og fylder det i stedet for at lade
     pladsen stå tom til næste række — designløft 2026-09-18, Albert:
     "udnytter at placere boksene på en bedre måde". Kortenes egen orden i
     DOM'en (og dermed tastatur-/skærmlæser-rækkefølgen) er uændret, kun det
     VISUELLE flow pakkes tættere. */
  grid-auto-flow: dense;
}

@media (min-width: 701px) {
  .hj-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  /* Designløft: brud på den ensartede kasse-væg — de to kort med reelt mest
     indhold (musik-zoner, to kamera-billeder) spænder 2 kolonner. Kun
     visuelt, se hjKortRegistry()'s 'stoerrelse'. */
  .hj-kort--stor { grid-column: span 2; }
}

/* Brede skærme (designløft 2026-09-18): .bb-indhold:has(.hj-grid) giver
   dashboardet plads til flere kolonner end den delte 960px-grænse — uden
   denne regel ville auto-fit alligevel kun kunne mønstre 3-4 smalle kolonner
   inden i den gamle grænse. minmax hæves samtidig, så kortene ikke ender
   for skrabede/smalle på en bred skærm. */
@media (min-width: 1400px) {
  .hj-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* Kiosk: fast 3×2-gitter der fylder skærmen (AP-7.md Skal 3e) — rør IKKE,
   jf. feedback_ipad_dashboard_aldrig_ringere. Hero-spændet ovenfor gælder
   ALDRIG kiosk-gitteret. */
body.bb-kiosk .hj-grid {
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--mellemrum-4);
}
body.bb-kiosk .hj-kort--stor { grid-column: auto; grid-row: auto; }

.hj-kort {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: var(--mellemrum-3);
  display: flex;
  flex-direction: column;
  gap: var(--mellemrum-2);
}

.hj-kort--skjult { display: none; }
.hj-kort--fallback { border-color: var(--tekst-svag); }

.hj-kort-head {
  display: flex;
  align-items: center;
  gap: var(--mellemrum-2);
}

.hj-kort-ikon { font-size: 20px; }
.hj-kort-titel { font-weight: 600; flex: 1; }

.hj-kort-nav { display: flex; gap: var(--mellemrum-1); }
.hj-kort-nav button {
  border: 1px solid var(--kant);
  background: var(--flade-2);
  color: var(--tekst-dæmpet);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.hj-kort-nav button:hover { color: var(--tekst); }

.hj-kort-krop { color: var(--tekst); }
.hj-kort-tekst { margin: 0; }
.hj-kort-sub { margin: 0; font-size: 12px; color: var(--tekst-dæmpet); }
.hj-kort-fallback-tekst { margin: 0; font-size: 13px; color: var(--tekst-svag); font-style: italic; }

/* ── Familie (AP-7): read-only medlemsliste ── */

.bb-fam-sub { color: var(--tekst-dæmpet); font-size: 13px; }

.bb-fam-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mellemrum-3);
}

.bb-fam-kort {
  width: 96px;
  text-align: center;
}

.bb-fam-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paa-accent);
  font-weight: 600;
  overflow: hidden;
}
.bb-fam-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bb-fam-navn { font-size: 13px; font-weight: 600; }
.bb-fam-type { font-size: 11px; color: var(--tekst-dæmpet); }

/* ── "Gå til Hjem"-bar på den offentlige forside for en logget ind bruger (AP-7 Skal 6) ── */

.bb-gaa-til-hjem {
  background: var(--flade-2);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: var(--mellemrum-2) var(--mellemrum-3);
  margin-bottom: var(--mellemrum-3);
  font-size: 14px;
}
.bb-gaa-til-hjem a { font-weight: 600; text-decoration: none; }

/* ── Ønskeliste (AP-3) — struktur, tokeniseret i AP-7 (samme farver, ingen nye) ── */

.bb-oen-sub { color: var(--tekst-dæmpet); font-size: 13px; }

.bb-oen-mosaik {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mellemrum-3);
  margin: var(--mellemrum-3) 0;
}

.bb-oen-ansigt {
  text-decoration: none;
  color: inherit;
  text-align: center;
  width: 84px;
}

.bb-oen-ansigt.aktiv .bb-oen-cirkel { outline: 3px solid var(--accent); }

.bb-oen-cirkel {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paa-accent);
  font-weight: 600;
  overflow: hidden;
}

.bb-oen-cirkel img { width: 100%; height: 100%; object-fit: cover; }

.bb-oen-navn { font-size: 13px; font-weight: 600; }
.bb-oen-antal { font-size: 11px; color: var(--tekst-svag); }

.bb-oen-nav { font-size: 13px; color: var(--tekst-dæmpet); }

.bb-oen-tavle { border-top: 1px solid var(--kant); padding-top: var(--mellemrum-2); margin-top: var(--mellemrum-3); }
.bb-oen-tavle h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.bb-oen-rediger { font-size: 12px; font-weight: normal; }
.bb-oen-tom { color: var(--tekst-svag); font-size: 13px; }

.bb-oen-kort-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mellemrum-2);
}

.bb-oen-kort {
  width: 160px;
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: var(--mellemrum-2);
  /* designløft 2026-09-18: køb-knappen sad i forskellig højde i samme række,
     fordi titlens længde skubbede alt under den — status+knap låst til
     bunden af kortet i stedet, ligegyldigt hvor lang titlen er. */
  display: flex;
  flex-direction: column;
}

.bb-oen-kort.opfyldt { opacity: 0.5; }

.bb-oen-foto {
  width: 100%;
  height: 100px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 6px;
}

.bb-oen-foto-tom {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flade-2);
  font-size: 28px;
}

.bb-oen-kort h3 { font-size: 14px; margin: 4px 0; }
.bb-oen-pris { font-size: 13px; color: var(--tekst-dæmpet); }
.bb-oen-link { display: inline-block; font-size: 12px; margin-top: 4px; }

.bb-oen-status { font-size: 12px; color: var(--tekst-svag); margin-top: auto; padding-top: 6px; }
.bb-oen-status.koebt { color: var(--ok); font-weight: 600; }

.bb-oen-koeb-form { display: flex; gap: 4px; margin-top: 6px; }
.bb-oen-koeb-form input { flex: 1; min-width: 0; font-size: 12px; }

.bb-oen-fejl { color: var(--fejl); }
.bb-oen-ok { color: var(--ok); }

/* ── "Mine ønsker": redigerings-kort (designløft 2026-09-18, afløser en rå
   tabel med mini-formularer i hver celle — samme kort-sprog som resten af
   sitet, se .bb-oen-kort/.hj-kort). Flere <form> pr. kort er stadig separate
   POSTs (functions.php uændret) — .bb-oen-inline gøres visuelt "usynlig" som
   boks (display:contents) så dens ene knap bare flyder med i aktions-rækken,
   ikke fordi formularerne er slået sammen. ── */
.bb-oen-rediger-liste { display: flex; flex-direction: column; gap: var(--mellemrum-3); margin-bottom: var(--mellemrum-4); }

.bb-oen-rediger-kort {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: var(--mellemrum-3);
  display: flex;
  flex-direction: column;
  gap: var(--mellemrum-3);
}
.bb-oen-rediger-kort.opfyldt { opacity: 0.6; }

.bb-oen-rediger-top { display: flex; gap: var(--mellemrum-3); align-items: flex-start; }
/* Visnings-blokken er et flex-barn uden egen bredde-hensigt — uden dette
   bliver den kun så bred som sit indhold ("shrink-to-fit"). Samme fælde gjaldt
   tidligere redigerings-formularen her, dengang den lå i toppen af kortet. */
.bb-oen-rediger-top > .bb-oen-rediger-visning { flex: 1; min-width: 0; }

.bb-oen-rediger-visning h3 { margin: 0 0 4px; font-size: 16px; }
.bb-oen-rediger-meta { display: flex; gap: var(--mellemrum-3); flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--tekst-dæmpet); }
.bb-oen-rediger-meta span:first-child { font-weight: 600; color: var(--tekst); }
.bb-oen-rediger-beskrivelse { margin: 6px 0 0; font-size: 13px; color: var(--tekst-dæmpet); }

/* Redigering er skjult bag et tryk (designløft 2026-09-18, Albert: kortene
   skal først og fremmest vise ønskerne pænt — redigering er en handling man
   opsøger, ikke noget der skal fylde hele kortet hele tiden). Native
   <details>, ingen JS nødvendig. */
.bb-oen-rediger-detaljer { border-top: 1px solid var(--kant); padding-top: var(--mellemrum-2); }
.bb-oen-rediger-detaljer summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tekst-dæmpet); }
.bb-oen-rediger-detaljer[open] summary { color: var(--accent); margin-bottom: var(--mellemrum-2); }
.bb-oen-rediger-detaljer form { margin-top: var(--mellemrum-3); }
.bb-oen-rediger-gem { margin-top: var(--mellemrum-3); }

.bb-oen-rediger-foto {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 8px; background-size: cover; background-position: center;
  border: 1px solid var(--kant);
}
.bb-oen-rediger-foto-tom { display: flex; align-items: center; justify-content: center; background: var(--flade-2); font-size: 24px; }

.bb-oen-rediger-felter { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--mellemrum-3); }
.bb-oen-rediger-felter label { display: block; }
.bb-oen-rediger-felter input, .bb-oen-rediger-felter select { width: 100%; }
.bb-oen-billede-raekke { display: flex; gap: 6px; }
.bb-oen-billede-raekke input { flex: 1; min-width: 0; }

.bb-oen-rediger-aktioner {
  display: flex; flex-wrap: wrap; gap: var(--mellemrum-2); align-items: center;
  padding-top: var(--mellemrum-2); border-top: 1px solid var(--kant);
}
.bb-oen-inline { display: contents; }
.bb-oen-rediger-aktioner .bb-oen-sekundaer {
  background: var(--flade-2); color: var(--tekst); border: 1px solid var(--kant);
}
.bb-oen-rediger-aktioner .bb-oen-slet { background: transparent; color: var(--fejl); border: 1px solid var(--fejl); }

.bb-oen-tilfoej-kort { margin-bottom: var(--mellemrum-4); }
.bb-oen-vaelger label { font-weight: 600; }

/* ── Generelt: hidden-attributten skal ALTID vinde (fandt 2026-09-12: .bb-avatar-menu{display:flex}
   overstyrede den, så avatar-menuen stod åben ved indlæsning) ── */
[hidden] { display: none !important; }

/* ── Hjem-kort, kroppe (AP-15 — kort.js' markup: musik/robot-rækker, mini-knapper, kameraer) ── */
.hj-kort-krop .hj-mini-btn,
.hj-kort-krop .hj-kort-knap {
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  padding: 4px 8px;
  border: 1px solid var(--kant);
  border-radius: 6px;
  background: var(--flade-2);
  color: var(--tekst);
  cursor: pointer;
}
.hj-kort-krop .hj-mini-btn { padding: 3px 7px; min-width: 30px; }
.hj-kort-krop .hj-kort-knap { margin: 6px 6px 0 0; }
.hj-kort-krop .hj-mini-btn:hover:not(:disabled),
.hj-kort-krop .hj-kort-knap:hover:not(:disabled) { border-color: var(--accent); }
.hj-kort-krop button:disabled { opacity: 0.45; cursor: default; }

.hj-musik-zone, .hj-robot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--kant);
}
.hj-musik-zone:first-child, .hj-robot-row:first-child { border-top: none; padding-top: 0; }
.hj-musik-navn, .hj-robot-navn { font-weight: 600; font-size: 13px; }
.hj-musik-titel, .hj-robot-status {
  grid-column: 1;
  font-size: 12px;
  color: var(--tekst-dæmpet);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hj-musik-knapper, .hj-robot-knapper {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Port fra appen (2026-10-14): lås-historik, musik-gruppering, robot-rum.
   Kun eksisterende tokens, ingen nye farver. ── */
.hj-laas-hist { margin-top: var(--mellemrum-3); border-top: 1px solid var(--kant); padding-top: var(--mellemrum-2); }
.hj-laas-hist-label { text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--tekst-svag); }
.hj-laas-hist-tekst { font-weight: 600; font-size: 14px; }

label.hj-musik-navn { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.hj-musik-vaelg { margin: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.hj-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0 5px;
}
.hj-musik-gruppe, .hj-rum { margin-top: var(--mellemrum-3); border-top: 1px solid var(--kant); padding-top: var(--mellemrum-2); }
.hj-musik-gruppe-knapper { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.hj-musik-gruppe-knapper .hj-kort-knap { margin: 0; }
.hj-kort-krop .hj-kort-knap--accent { background: var(--accent); border-color: var(--accent); color: var(--paa-accent); }
.hj-kort-krop .hj-kort-knap--accent:hover:not(:disabled) { border-color: var(--tekst); }

.hj-rum-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.hj-kort-krop .hj-rum-chip { padding: 5px 10px; }
.hj-kort-krop .hj-rum-chip.aktiv { background: var(--accent); border-color: var(--accent); color: var(--paa-accent); }

/* ── AP-19: PIN-elevation-boks (erstatter midlertidigt et korts krop, se
   kort.js's visPinBoks()) — ingen nye farver, samme tokens som resten. ── */
.hj-kort-fejl { color: var(--fejl); font-size: 12px; margin: 4px 0; }
.hj-pin-boks { display: flex; flex-direction: column; gap: var(--mellemrum-2); align-items: flex-start; }
.hj-pin-input {
  font: inherit;
  font-size: 16px;
  letter-spacing: 2px;
  padding: 6px 10px;
  border: 1px solid var(--kant);
  border-radius: 6px;
  background: var(--flade-2);
  color: var(--tekst);
  width: 120px;
}
.hj-pin-input:focus { border-color: var(--accent); }

.hj-kamera { margin-bottom: 8px; }
.hj-kamera-navn { font-size: 12px; color: var(--tekst-dæmpet); margin-bottom: 3px; }
.hj-kamera-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: var(--flade-2);
}