/* Lyst tema (Pers design 2026-07-23, farverampe 2026-07-27): baggrund #F8EFFC,
   hvide kort, sort tekst. Kort-elementernes lilla toner ligger ALLE på rampen
   mellem #8141C4 (mørkest) og #F8EFFC (lysest). Logo = public/logo.png. */
:root {
  --bg: #F8EFFC;       /* rampens lyseste punkt */
  --bg-2: #F3E7FB;     /* lys lavendel-flade inde i hvide kort */
  --card: #FFFFFF;
  --card-hi: #FCF8FE;
  --line: #E7D6F6;
  --text: #1B1826;
  --muted: #756F85;
  --accent: #9F6CD2;   /* lavendel — primær (rampe-midtpunkt) */
  --accent-2: #8141C4; /* rampens mørkeste — tekst/valg på lys bund */
  --lav-soft: #F1E2FA; /* sart lavendel-flade */
  --new: #2E9E63;
  --sales: #B98A1E;
  --warn: #D45B5B;
  --star: #C79A24;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(129, 65, 196, 0.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
h1, h2 { margin: 0; font-weight: 650; }

/* ---- Header: række 1 = logo + profil ---- */
/* Navigations-redesignet (2026-08-12): tre funktioner, tre niveauer.
   Brand-rækken og toolbaren RULLER VÆK - kun visnings-fanerne er sticky. */
.topbar {
  padding: 14px 0 10px;
  background: var(--bg);
}
/* Indholdet flugter med toolbar/listen (samme max-width + 22px-padding);
   baggrunden løber fortsat i fuld bredde (2026-08-06). */
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 1080px; margin: 0 auto; padding: 0 22px;
}
.logo {
  height: 22px; width: auto; display: block;
  user-select: none; -webkit-user-drag: none;
}
.profilebtn { color: var(--accent); }

/* ---- Knapper ---- */
.btn {
  border: 1px solid var(--line); background: var(--card);
  color: var(--text); padding: 8px 13px; border-radius: 10px;
  cursor: pointer; font-size: 13.5px; transition: 0.15s;
}
.btn:hover { background: var(--lav-soft); border-color: #D4BBEB; }
.btn-ghost { background: transparent; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650; }
.btn-primary:hover { filter: brightness(1.06); }

/* ---- Visnings-fanerne: appens primære navigation, ENESTE sticky element ---- */
.tabs {
  position: sticky; top: 0; z-index: 20;
  background: rgba(248, 239, 252, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.tabs-inner {
  display: flex; max-width: 1080px; margin: 0 auto; padding: 0 22px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs-inner::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto; text-align: center; padding: 10px 14px 12px;
  font: inherit; font-size: 14.5px; font-weight: 650; white-space: nowrap;
  color: var(--muted); background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--accent-2); }
.tab.aktiv { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Toolbar (IKKE sticky): Filtre-knap · søgefelt · layout-toggle ---- */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px 12px; max-width: 1080px; margin: 0 auto;
}
#search {
  flex: 1; min-width: 0; padding: 9px 14px; font: inherit;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 11px; outline: none;
}
#search::placeholder { color: var(--muted); opacity: 0.6; }
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(129, 65, 196, 0.15); }
.select {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  padding: 8px 12px; border-radius: 10px; font-size: 13.5px; cursor: pointer;
}
.select:hover { background: var(--lav-soft); }

/* Popover (spillesteder/genrer) */
.filterpop { position: relative; }
.popover {
  position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 6px;
  width: min(340px, 88vw); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 10px;
}
.popover-head { display: flex; gap: 6px; margin-bottom: 8px; }
.popover-head input {
  flex: 1; min-width: 0; padding: 7px 10px; font: inherit; font-size: 13px;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; outline: none;
}
.popover-head .btn { padding: 5px 9px; font-size: 12px; white-space: nowrap; }
.popover-list { max-height: 300px; overflow: auto; }
/* Det samlede filter-panel (2026-08-12): tre sektioner i ét - listerne holdes
   kortere, og panelet selv scroller hvis skærmen er lav. */
#filtrePop { width: min(380px, 92vw); max-height: min(76vh, 680px); overflow: auto; }
#filtrePop .popover-list { max-height: 200px; }
.fsektion {
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin: 4px 0 8px; padding-top: 10px; border-top: 1px solid var(--lav-soft);
}
.fsektion:first-child { border-top: 0; padding-top: 0; }
.vrow {
  display: flex; align-items: center; gap: 9px; padding: 6px 6px;
  border-radius: 8px; cursor: pointer; font-size: 13.5px;
}
.vrow:hover { background: var(--lav-soft); }
.vrow input { accent-color: var(--accent); }
.gcount { color: var(--muted); font-style: normal; font-size: 12px; }
/* "Vis kun"-genvej pr. række (2026-08-02): diskret, yderst til højre */
.vrow .kun {
  margin-left: auto; flex: none; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 700; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; cursor: pointer;
}
.vrow .kun:hover { color: var(--accent-2); border-color: var(--accent); background: var(--card); }
/* Genre-fokus ("Vis kun X", 2026-08-05): pil øverst i menuen + dæmpet fravalgsliste */
.fokuspil {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--lav-soft); border: 1px solid var(--accent); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 8px; font-size: 13.5px;
}
.vrow.daempet { opacity: 0.45; pointer-events: none; }

/* ---- Liste ---- */
.list { padding: 8px 22px 40px; max-width: 1080px; margin: 0 auto; }
.daygroup { margin-top: 22px; }
/* Gruppe-overskrifter (Per, 2026-08-07): større, CENTREREDE og markante —
   tung vægt + tæt spatiering som "display"-look i systemfonten (ingen
   webfonts: ingen npm/eksterne afhængigheder). Markeringen (antal/lytterkrav)
   står diskret efter i muted. */
.dayhead {
  position: sticky; top: 46px; z-index: 5; /* under fanerne (eneste sticky header-element) */
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  padding: 10px 2px; margin-bottom: 8px;
  font-size: 13px; color: var(--muted);
  background: var(--bg); text-align: center;
}
.dayhead b {
  color: var(--text); font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Kort: 16:9-hero → header (dato+navn) → meta-række → ikon-række */
.card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px; transition: 0.15s;
  box-shadow: 0 2px 10px rgba(129, 65, 196, 0.06);
}
.card { position: relative; overflow: hidden; } /* til hjørne-mærkatet */
.cardhead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.headtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.headtxt .name { margin: 0; }
/* Række 2: AI-resumé (egne ord fra describe.mjs — venue-prosa vises ALDRIG) */
.descr {
  margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Fold ud/ind (2026-08-02): kun tekster der FAKTISK er klippet får klik-adfærd
   (bindCards måler scrollHeight) — resten er passive som før. */
.descr.foldbar { cursor: pointer; }
.descr.foldbar:hover { color: var(--text); }
.descr.open { -webkit-line-clamp: unset; }
/* Lignende kunstnere bor i resuméets HALE (2026-08-06) — synlige ved fold-ud */
.descr .simtail { display: none; }
.descr.open .simtail { display: inline; color: var(--text); }
/* (.simrow udgik 2026-08-06 — lignende flyttede ind i resuméet) */

/* Skråt status-mærkat i hjørnet (Udsolgt/Venteliste/Aflyst…) — ikke et tag */
/* Status-PILLE i herolinjen (2026-09-10): afløser det skrå hjørnebånd -
   båndet lå oven på hero-billedet, og Spotifys overlay-forbud er eksplicit. */
.statuspill {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap;
}
.statuspill.sold, .statuspill.warn { background: var(--warn); }
.statuspill.newrib { background: var(--new); }
.statuspill.few { background: #E08A4E; }
.statuspill.wait { background: #C9A63A; }
.statuspill.extra { background: var(--accent); }

/* 16:9-hero øverst i kortet: AI-valgt udsnit via /api/crops (object-position) */
.hero {
  position: relative; margin: -12px -14px 2px;
  aspect-ratio: 16 / 9; background: var(--lav-soft);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder-hero (2026-07-31): kort uden billede — og døde billeder — får en
   dæmpet lavendel-flade med node-glyf, så hjertet altid har et hjørne at bo i */
.hero.noimg img { display: none; }
.hero.ph, .hero.noimg { background: linear-gradient(135deg, var(--lav-soft), #E0CCF1); }
.phglyph, .hero.noimg::after {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 46px; color: rgba(129, 65, 196, 0.2); pointer-events: none;
}
.hero.noimg::after { content: "♪"; }
/* ♥/✕-LAGET (Pers design 2026-09-10): heroen er REN som udgangspunkt. Ved
   hover (mus) / langt tryk (.vis-akt) lægger et mørkt fade-lag sig over
   billedet med et STORT hjerte i midten (kortets primære handling) og et
   diskret ✕ i nederste højre hjørne. Gemte/skjulte kort (.altid) viser
   knapperne UDEN fade-laget - tilstanden skal være synlig uden at mørkne
   kortet permanent. pointer-events slås fra når laget er skjult, ellers
   ville et tap midt på billedet ramme et usynligt hjerte.
   Licens-noten står i card() i app.js. */
.hero .kortakt {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  transition: opacity .18s, background-color .18s;
}
.card:hover .kortakt, .card.vis-akt .kortakt, .kortakt:focus-within { opacity: 1; background: rgba(24, 8, 40, 0.48); }
.card:hover .kortakt, .card.vis-akt .kortakt, .kortakt:focus-within, .kortakt.altid { pointer-events: auto; }
.kortakt.altid { opacity: 1; }
.kortakt .iconbtn.skjul {
  position: absolute; right: 8px; bottom: 8px; margin-left: 0;
  width: 26px; height: 26px; border-radius: 999px; font-size: 11px;
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5); color: #4a4a52;
}
.kortakt .iconbtn.skjul:hover { background: #fff; color: var(--warn); }
/* Spotify-attribution: første "knap" i handlingsrækken (Per, 2026-09-10) */
.actions .spotify-attr { display: inline-flex; align-items: center; line-height: 0; opacity: .85; }
.actions .spotify-attr:hover { opacity: 1; }
.heartbadge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; padding: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; line-height: 1; backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.9); color: var(--accent-2);
  border: 1px solid rgba(255, 255, 255, 0.9);
  transition: transform .12s, background-color .12s;
}
.heartbadge:hover { background: #fff; transform: translate(-50%, -50%) scale(1.07); }
.heartbadge.on { background: rgba(129, 65, 196, 0.95); color: #fff; border-color: transparent; }
.herobadge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.03em;
  padding: 4px 11px; border-radius: 999px; backdrop-filter: blur(6px);
}
.herobadge.t3 { background: rgba(241, 226, 250, 0.94); color: var(--accent-2); border: 1px solid #D4BBEB; }
/* Anbefalet-badget er en KNAP (2026-08-06): klik åbner forklaringsboksen */
button.herobadge { font-family: inherit; cursor: pointer; line-height: 1.2; }
button.herobadge:hover { background: #fff; border-color: var(--accent-2); }
.recpop {
  background: var(--lav-soft); border: 1px solid #D4BBEB; border-radius: 10px;
  padding: 8px 12px; font-size: 12.5px; font-style: italic; color: var(--muted);
  line-height: 1.45;
}
.recpop .whylead { font-style: normal; }

.card:hover { background: var(--card-hi); border-color: #D4BBEB; }
/* is-new-kanten udgik 2026-08-05 — NY vises som grøn status-pille (.statuspill.newrib) */
/* Farvede tier-kanter udgik med hjerte-modellen (2026-07-31) — kun skjulte
   kort markeres (dæmpet, ses i Gemte-listens bund). */
.card.is-skjult { opacity: 0.5; }

/* Anbefalingen er tekst: farvet styrke-indledning + begrundelses-sætninger */
.why { color: var(--muted); font-size: 12.5px; font-style: italic; line-height: 1.45; }
.whylead { color: var(--accent-2); font-style: normal; font-weight: 700; }
.bio { color: var(--text); font-size: 13px; line-height: 1.55; margin-top: 8px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.badge.price { background: rgba(46, 158, 99, 0.1); color: var(--new); border-color: rgba(46, 158, 99, 0.3); }
/* Info-panel + Spotify-afspiller: fuldbreddes-rækker nederst i kortet */
.card > .bio { width: 100%; margin-top: 0; }
.player { width: 100%; }
.player iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; }
/* Musik-tags: ÉT ensartet udseende — kun regel-match skiller sig ud via farve */
.badge.atag { background: var(--lav-soft); color: #5C4380; border-color: #E0CCF1; text-transform: lowercase; }
/* Anbefalet-badgen bor blandt tags m. EGEN farve (fyldt lilla) - klikbar */
button.badge.rec { background: var(--accent); border-color: var(--accent); color: #fff; font-family: inherit; font-weight: 700; cursor: pointer; }
button.badge.rec:hover { background: var(--accent-2); border-color: var(--accent-2); }
.badge.atag.hit { background: var(--lav-soft); color: var(--accent-2); border-color: var(--accent); }
/* Lyttertal: synligt men IKKE tag-udseende — ren tekst uden pille */
.badge.pop { background: none; border: none; color: var(--muted); padding: 3px 0 3px 6px; }
.badge.demand { font-weight: 700; }
.badge.demand.sold { background: rgba(212, 91, 91, 0.12); color: var(--warn); border-color: rgba(212, 91, 91, 0.35); }
.badge.demand.few { background: rgba(224, 138, 78, 0.14); color: #C06A2E; border-color: rgba(224, 138, 78, 0.4); }
.badge.demand.wait { background: rgba(185, 138, 30, 0.12); color: var(--sales); border-color: rgba(185, 138, 30, 0.35); }
.badge.demand.extra { background: var(--lav-soft); color: var(--accent-2); border-color: #D4BBEB; }

/* Nederste knap-række (2026-07-31): tekstknapper i små kapitaler. ♥ bor på
   heroen (heartbadge); ✕ Skjul er bevidst diskret (flugtvej, ikke feature). */
.textbtn {
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.08em; font-weight: 700;
  color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 13px; height: 30px; cursor: pointer;
}
.textbtn:hover { color: var(--text); border-color: #D4BBEB; }
.textbtn.infobtn.on, .textbtn.play.on { color: var(--accent-2); border-color: var(--accent); background: var(--lav-soft); }
/* ✕ Skjul: samme højde som tekstknapperne i rækken (Per, 2026-08-06) */
.iconbtn.skjul { color: var(--line); font-size: 12px; margin-left: auto; width: 30px; height: 30px; border-radius: 999px; }
.iconbtn.skjul:hover { color: var(--muted); }
.iconbtn.skjul.on { color: var(--warn); }

/* Dato-boks */
.datebox {
  width: 72px; height: 72px; flex: none; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--lav-soft); border: 1px solid #E0CCF1;
  border-radius: 12px; line-height: 1.1;
}
.datebox .wd { font-size: 10.5px; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.datebox .d { font-size: 27px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.datebox .m { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.cardmeta { min-width: 0; }
.name { font-size: 18px; font-weight: 750; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 3px; }
.name a { color: inherit; text-decoration: none; }
.name a:hover { text-decoration: underline; color: var(--accent-2); }
.venue { color: var(--muted); font-size: 13.5px; }
.support { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* Badge-rækken: alt venstrejusteret — anbefalingstekst først, så musik-tags */
/* Badge-rækken er ÉN linje - aldrig ombrud (Pers John Moods-fund 2026-09-10):
   tag-loftet i card() (3, eller 2 når Anbefalet-badgen er med) holder den
   inden for bredden, og overflow:hidden er sikkerhedsnettet ved lange navne. */
.badges { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; margin: 10px 0 8px; align-items: center; min-width: 0; }
.badges > * { flex: 0 0 auto; }
.bgrp { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pricetxt { color: var(--new); font-weight: 650; }
.badge {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--bg-2); color: var(--muted); border: 1px solid var(--line);
}
.badge.new { background: rgba(46, 158, 99, 0.1); color: var(--new); border-color: rgba(46, 158, 99, 0.3); }
.badge.rel { background: var(--lav-soft); color: var(--accent-2); border-color: #D4BBEB; }
/* Venners ♥ (Fase 2): samme lilla familie som rel, men med hjertet som signatur */
.badge.friends { background: var(--lav-soft); color: var(--accent-2); border-color: var(--accent); font-weight: 600; }
.badge.sales { background: rgba(185, 138, 30, 0.1); color: var(--sales); border-color: rgba(185, 138, 30, 0.3); }
.badge.warn { background: rgba(212, 91, 91, 0.1); color: var(--warn); border-color: rgba(212, 91, 91, 0.3); }

.actions { display: flex; align-items: center; gap: 6px; }
.iconbtn {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 16px;
  display: grid; place-items: center; transition: 0.15s; text-decoration: none;
}
.iconbtn:hover { color: var(--accent-2); border-color: #D4BBEB; background: var(--lav-soft); }
.ticket { color: var(--accent-2); }

/* ---- Tom / footer ---- */
.empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px; }

/* ---- Modal ---- */
.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(81, 33, 128, 0.35); backdrop-filter: blur(3px); padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 18px; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.field small { color: var(--muted); font-weight: 400; }
textarea {
  width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical;
}
.tagpick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow: auto; padding: 2px; }
.tag {
  font-size: 12.5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); user-select: none;
}
.tag.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.suggest-btn { float: right; font-size: 12px; padding: 3px 10px; }
/* Chip-input med autocomplete (kunstnere/genrer i relevans-indstillinger) */
/* Mail-toggles i Min profil (2026-08-12) */
.mailtoggle {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 8px 0; font-size: 13.5px; line-height: 1.45;
}
.mailtoggle input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }
.mailtoggle small { color: var(--muted); font-weight: 400; }

.chipinput {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2);
}
.chipinput input {
  flex: 1; min-width: 140px; border: none; background: none; outline: none;
  color: var(--text); font: inherit; padding: 4px;
}
.chipinput input:disabled { opacity: 0.6; }
.chipinput .tag.on::after { content: " ×"; font-weight: 400; opacity: 0.7; }
.suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  max-height: 220px; overflow: auto; box-shadow: var(--shadow);
}
.suggest div { padding: 8px 12px; cursor: pointer; font-size: 13.5px; }
.suggest div:hover, .suggest div.sel { background: var(--accent); color: #fff; }
.suggest .shint { color: var(--muted); font-size: 12px; float: right; }
.suggest div:hover .shint, .suggest div.sel .shint { color: rgba(255, 255, 255, 0.85); }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; margin-bottom: 8px; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.spotify-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
/* Profilmodalens sektions-overskrifter ("Din smag" / "Venner") + velkomst-banner */
.sektion {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-2); margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
}
.velkomst {
  background: var(--lav-soft); border: 1px solid #D4BBEB; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px; font-size: 14px; line-height: 1.5;
}
/* ---- Venner-sektionen i profilmodalen (Fase 2) ---- */
#cfgNavn {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font: inherit;
}
.memberlist {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 12px; margin-bottom: 10px; max-height: 180px; overflow: auto; font-size: 14px;
}
.memberlist .mrow { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.memberlist .mrow:last-child { border-bottom: none; }
.memberlist .ven-ok { color: var(--new); font-style: normal; font-size: 12.5px; font-weight: 600; }
.memberlist .muted { color: var(--muted); }
.invite-result { margin-top: 10px; font-size: 13px; color: var(--muted); }
/* Link + Kopiér-knap på samme række (Per, 2026-08-06 — mobil-venlig kopiering) */
.inviterow { display: flex; gap: 8px; margin-top: 6px; align-items: stretch; }
/* Tilføj ven via e-mail (model A, 2026-09-11 - afløser den fælles medlemsliste) */
.venemail { display: flex; gap: 8px; margin: 12px 0 8px; align-items: stretch; }
.venemail input { flex: 1; min-width: 0; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 10px; outline: none; }
.venemail input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(129, 65, 196, 0.15); }
.venemail button { flex: none; white-space: nowrap; }
.inviterow button { flex: none; white-space: nowrap; }
.invite-result input {
  flex: 1; min-width: 0; width: 100%; background: var(--lav-soft); border: 1px solid var(--accent);
  color: var(--accent-2); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px;
}
.spotify-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.spotify-status .ok { color: var(--new); font-weight: 600; }
.spotify-status .muted { color: var(--muted); font-size: 13px; }
.spotify-status .btn { padding: 6px 11px; font-size: 13px; }
.modal-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 560px) {
  .datebox { width: 62px; height: 62px; }
  /* KUN dag-overskriften afklæbes på mobil. `.card.is-relevant` stod her også
     (legacy fra dengang relevante kort var sticky) — men static fjernede
     kortets containing block, så det skrå bånd (.ribbon, right:-42px)
     undslap til SKÆRMENS højre hjørne og forskubbede hele designet på mobil
     (Pers fund 2026-08-06). Kortet SKAL forblive position: relative. */
  .dayhead { position: static; }
  /* Navigations-redesignet (2026-08-12): fanerne lidt tættere på mobil, og
     Filtre/☰ beholder naturlig bredde mens søgefeltet giver sig. */
  .tab { padding: 9px 10px 11px; font-size: 13.5px; }
  #filtreBtn, #viewToggle { flex: 0 0 auto; }
}

/* ---- Desktop-grid (Fase 4, 2026-08-03 — design-briefens retning: desktop er
   en GRID af de SAMME kort). Dag-grupperne bliver grid-containere: overskriften
   spænder hele rækken, kortene fylder kolonner på min. 330px. Kort i samme
   række strækkes til ens højde, og handlingsrækken skubbes i bund, så
   knapperne flugter på tværs. Mobilen (<720px) er urørt: én kolonne. */
@media (min-width: 720px) {
  .daygroup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 22px 20px; /* mere luft mellem kortene (Per, 2026-08-04) */
  }
  .dayhead { grid-column: 1 / -1; margin-bottom: 0; }
  .card { margin-bottom: 0; }
  .card .actions { margin-top: auto; }
}
/* Store skærme: giv gridet mere luft (op til 3-4 kolonner) */
@media (min-width: 1200px) {
  .list, .toolbar, .topbar-inner, .tabs-inner { max-width: 1360px; }
}

/* ---- Kompakt visning (2026-08-04): én skimbar række pr. koncert, der folder
   ud til det fulde kort ved klik. Grupperne er almindelige blokke (intet grid)
   — rækker i fuld bredde er netop pointen med at skimme. ---- */
.daygroup.kompakt { display: block; }
.crow {
  display: flex; width: 100%; align-items: baseline; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px; font: inherit; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; color: var(--text);
}
.crow:hover { background: var(--lav-soft); border-color: #D4BBEB; }
.crow[aria-expanded="true"] { border-color: var(--accent); }
.cdato { font-weight: 700; color: var(--accent-2); font-size: 12.5px; white-space: nowrap; min-width: 52px; }
.cnavn { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvenue { color: var(--muted); font-size: 12.5px; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chjerte { color: var(--accent); font-size: 13px; }
.crec { font-size: 12px; }
/* Det udfoldede kort under rækken: begrænset bredde, så heroen ikke eksploderer */
/* Udfoldet kort i kompakt visning: samme bredde som et grid-kort i detaljeret
   visning (Per, 2026-08-06: kortet skal se ens ud alle steder). */
.citem .card { max-width: 420px; margin: 2px 0 12px; }

/* Mobil (≤719px): dropdowns som BOTTOM-SHEET (2026-08-05 — tredje forsøg på
   klassen: hverken knap-ankring, række-ankring eller klemme holdt på alle
   telefoner). Fast forankret til skærmens bund kan arket pr. definition ikke
   ryge udenfor viewporten, og det er samtidig standard-mobilmønstret. */
@media (max-width: 719px) {
  .popover {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; margin: 0; z-index: 60;
    border-radius: 16px 16px 0 0; border-bottom: none;
    max-height: 70dvh; overflow: auto;
    box-shadow: 0 -8px 40px rgba(129, 65, 196, 0.25);
    /* lidt luft hele vejen rundt, så søgefelt/Vis alle ikke klæber til kanten */
    padding: 16px 16px max(14px, env(safe-area-inset-bottom));
  }
  .popover-head { margin-bottom: 12px; }
  .popover-list { max-height: none; }
}

/* ---- Farvel-fade + toast (2026-08-06): ♥ i Anbefalede fader kortet ud, og
   toasten fortæller hvor det blev af — i stedet for abrupt forsvinden. ---- */
.card.farvel, .citem.farvel {
  opacity: 0; transform: scale(0.97); pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
#toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60;
  transform: translateX(-50%) translateY(12px);
  background: var(--accent); color: #fff; padding: 10px 18px;
  border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(129, 65, 196, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#toast.vis { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Feedback (beta, 2026-08-06) ---- */
.field textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  resize: vertical; outline: none;
}
.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(129, 65, 196, 0.15); }
.foot a { color: var(--accent-2); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Koncert-tilknytning i feedback-modalen ("Meld fejl" på kortet, 2026-08-06) */
.fbkoncert {
  background: var(--lav-soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; margin: 0 0 10px;
}

/* BETA-mærke ved logoet (2026-08-06) — app-header + admin (login har sin egen kopi) */
.brand { display: flex; align-items: center; gap: 8px; }
.betamark {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-2); background: var(--lav-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; transform: translateY(-1px);
}

/* ---- Profilbilleder (2026-08-06): runde avatarer à la sociale platforme ---- */
.avatar {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; flex: none;
}
.avatar-init { color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.avatarstak { display: inline-flex; margin-right: 6px; }
.avatarstak .avatar { border: 1.5px solid #fff; box-sizing: content-box; }
.avatarstak .avatar + .avatar { margin-left: -7px; }
.badge.friends { display: inline-flex; align-items: center; padding: 2px 9px 2px 4px; }
.avatarrow { display: flex; align-items: center; gap: 10px; }
.avatar-stor { width: 56px; height: 56px; font-size: 22px; }
.mrow { display: flex; align-items: center; gap: 9px; }
.mrow .avatar { width: 24px; height: 24px; font-size: 11px; }
/* KUN navne-spannet må fylde — initial-avataren er også en <span> og blev
   strakt til en bred pille af det generelle flex: 1 (Pers fund på mobil,
   2026-08-06). */
.mrow > span:not(.avatar) { flex: 1; min-width: 0; }

/* ---- Dato-filter (2026-08-06): interval-søgning m. native date-inputs
   (forudvalgene udgik samme dag på Pers ønske — kun fra/til) ---- */
.datorange { display: flex; gap: 10px; }
.datorange label {
  flex: 1; min-width: 0; font-size: 12px; color: var(--muted);
  display: flex; flex-direction: column; gap: 4px;
}
.datorange input {
  font: inherit; font-size: 13px; padding: 8px 10px; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text);
}
.datorange input:focus { outline: none; border-color: var(--accent); }
.datofoot { margin-top: 10px; display: flex; justify-content: flex-end; }
/* Aktivt dato-filter fremhæves som genre-fokus ("man må aldrig glemme et filter") */
.select.aktiv { border-color: var(--accent); background: var(--lav-soft); color: var(--accent-2); font-weight: 600; }

/* ---- Venne-anmodninger (2026-08-06): prik på profil-ikonet + svarknapper ---- */
.profilebtn { position: relative; }
.profilebtn.anmodninger::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent-2); border: 2px solid var(--bg);
}
.mrow .svarknapper { display: flex; gap: 6px; flex: none; }
.mrow .svarknapper .btn { padding: 5px 10px; font-size: 12.5px; }
.mrow .anmodet { color: var(--muted); font-style: normal; font-size: 12.5px; flex: none; }
.mrow .vilvaere { color: var(--accent-2); font-style: normal; font-size: 11.5px; font-weight: 600; }