/* =================================================================================
   AFTERBEAT — merkevarelag
   =================================================================================
   Lastes ETTER style.css og overstyrer utseendet. Grunnen til at det ligger for
   seg: style.css eies av dev-konsollen og endres hyppig av andre. Et eget lag kan
   endre hele uttrykket uten aa roere en eneste regel de jobber i.

   Uttrykket kommer fra moodboardet, ikke fra en generisk moerk mal:
   neon i moerket, lys som beveger seg, speilende gulv, volumetrisk lys.
   Derfor: levende bakgrunn i stedet for flat sort, gloedende kanter i stedet for
   1px-streker, og stor typografi med gradient paa det ordet som betyr noe.

   Mobil forst. Desktop er ikke en strukket telefon: den faar sidemeny, bredere
   rutenett og roligere flater, men samme spraak.
   ================================================================================= */

:root{
  --neon-1:#FF3D8A;   /* magenta  -- primaer */
  --neon-2:#8B5CF6;   /* lilla    -- sekundaer */
  --neon-3:#4CC9FF;   /* cyan     -- kaldt motlys */
  --neon-4:#39E6C0;   /* mint     -- bekreftelse */
  --edge:linear-gradient(135deg,var(--neon-1),var(--neon-2) 55%,var(--neon-3));
  --glow-1:0 0 24px color-mix(in srgb, var(--neon-1) 40%, transparent);
  --glow-2:0 0 40px color-mix(in srgb, var(--neon-2) 34%, transparent);
  --r-lg:18px; --r-md:14px; --r-sm:10px;
}

/* ---- levende bakgrunn ------------------------------------------------------------
   Tre neon-skyer som driver sakte, pluss et fint korn. Flat sort er billig; dette
   gir rommet dybde uten aa ta oppmerksomhet fra innholdet. */
body::before{
  content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 32% at 18% 22%, color-mix(in srgb, var(--neon-1) 34%, transparent), transparent 62%),
    radial-gradient(34% 30% at 82% 14%, color-mix(in srgb, var(--neon-2) 32%, transparent), transparent 62%),
    radial-gradient(42% 34% at 62% 88%, color-mix(in srgb, var(--neon-3) 20%, transparent), transparent 62%);
  filter:blur(40px);
  animation:ab-drift 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes ab-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.07)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03)}
}
/* Kornet demper banding i gradientene og gir flatene tekstur. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }

/* ---- typografi ------------------------------------------------------------------- */
.su-title,.home-brand,.su-brand{letter-spacing:-.02em}
.su-title{
  font-size:clamp(28px,7vw,44px);line-height:1.05;font-weight:700;margin-bottom:8px;
}
.su-lede{font-size:clamp(14px,3.4vw,16px);color:var(--ink-2);max-width:46ch}

/* ---- knapper ---------------------------------------------------------------------- */
.btn-primary,.su-next{
  background:var(--edge);color:#150A1C;border:0;border-radius:999px;
  font-weight:700;letter-spacing:.01em;box-shadow:var(--glow-1);
  transition:transform .12s ease,box-shadow .2s ease,filter .2s ease;
}
.btn-primary:hover,.su-next:hover{filter:brightness(1.07);box-shadow:var(--glow-1),var(--glow-2)}
.btn-primary:active,.su-next:active{transform:translateY(1px) scale(.985)}
.su-next{min-height:52px;padding:0 34px;font-size:15px}
.su-back{min-height:52px;border-radius:999px;border-color:var(--hair-2);background:rgba(255,255,255,.03)}

/* ---- kort med gloedende kant -------------------------------------------------------
   Kanten er en gradient bak et innfelt panel, ikke en border. En 1px-strek forsvinner
   i moerket; en gradientkant gir kortet en form. */
.su-card,.home-card,.br-card,.join-room{
  position:relative;background:linear-gradient(180deg,#1b1533,#141024);
  border:1px solid transparent;border-radius:var(--r-md);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease;
}
.su-card::before,.home-card::before,.br-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 40%);
}
.su-card:hover,.home-card:hover,.br-card:hover{transform:translateY(-3px)}
.su-card.is-on,.home-card:hover,.br-card:hover{
  box-shadow:0 14px 40px rgba(0,0,0,.5),var(--glow-1);
}
.su-card.is-on::before,.home-card:hover::before,.br-card:hover::before{background:var(--edge)}
.su-card-name{font-size:15px;letter-spacing:-.01em}

/* Valgt-merket er en fylt sirkel med gloed, ikke en grå hake. */
.su-check{background:var(--edge);box-shadow:var(--glow-1);width:26px;height:26px;font-weight:700}

/* Fotokortene i miljovelgeren viser en utsnitt av 360-panoramaet: 400 % bredde
   betyr at en fjerdedel av bildet er synlig -- omtrent synsfeltet til et vanlig
   kamera. Hele panoramaet i ett kort ser ut som et rom brettet ut flatt. */
.su-shot{
  background-size:400% auto;background-position:50% 50%;background-repeat:no-repeat;
}

/* ---- stegmeny: logoens slag ---------------------------------------------------------- */
.su-step-n{background:rgba(255,255,255,.16)}
.su-step.is-done .su-step-n{background:color-mix(in srgb, var(--neon-1) 70%, transparent)}
.su-step.is-on{border-color:var(--edge)}
.su-step.is-on .su-step-n{background:var(--edge);box-shadow:var(--glow-1)}

.su-top,.su-foot{
  background:linear-gradient(180deg, color-mix(in srgb, var(--ground) 92%, transparent), transparent);
  backdrop-filter:blur(10px);border:0;
}
.su-foot{
  background:linear-gradient(0deg, color-mix(in srgb, var(--ground) 96%, transparent), transparent);
  border-top:1px solid rgba(255,255,255,.06);
}
/* Veiviseren maa vaere ugjennomsiktig. Bakgrunnsskyene ligger bak SIDEN (z -2),
   saa en gjennomsiktig veiviser viser panelet under, ikke bakgrunnen. Den faar
   derfor sitt eget lag med samme uttrykk. */
.setup{
  background:
    radial-gradient(46% 34% at 16% 12%, color-mix(in srgb, var(--neon-1) 26%, transparent), transparent 66%),
    radial-gradient(42% 32% at 86% 8%, color-mix(in srgb, var(--neon-2) 24%, transparent), transparent 66%),
    radial-gradient(52% 40% at 60% 96%, color-mix(in srgb, var(--neon-3) 14%, transparent), transparent 66%),
    var(--ground);
}
/* Samme grunn for de andre fullskjermsflatene. */
.home,.browse{
  background:
    radial-gradient(46% 34% at 20% 8%, color-mix(in srgb, var(--neon-1) 26%, transparent), transparent 66%),
    radial-gradient(44% 34% at 84% 16%, color-mix(in srgb, var(--neon-2) 24%, transparent), transparent 66%),
    var(--ground);
}

/* ---- navigasjon --------------------------------------------------------------------
   MOBIL: en flytende pille, ikke en flat listelinje langs kanten. Den ligger over
   innholdet, naaes med tommelen, og markerer valget med gloed i stedet for farge alene. */
body[data-device="phone"] .ab-nav{
  left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
  height:62px;padding:6px;border-radius:999px;
  background:color-mix(in srgb, #150F28 82%, transparent);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  backdrop-filter:blur(18px) saturate(1.2);
}
body[data-device="phone"]{--pad-bunn:calc(84px + env(safe-area-inset-bottom,0px));padding-bottom:var(--pad-bunn)}
body[data-device="phone"] .nav-btn{border-radius:999px}
body[data-device="phone"] .nav-btn.is-on{
  background:color-mix(in srgb, var(--neon-1) 16%, transparent);
  color:#fff;
}
body[data-device="phone"] .nav-btn.is-on svg{filter:drop-shadow(0 0 8px var(--neon-1))}

/* ---- niva 2: stedene inne i valgt kategori ------------------------------------------
   Denne menyen VAR en fastlaast venstre sidemeny. Layouten ble flyttet opp i
   headeren, rett under kategoriene (se kommentaren i style.css), men skinnet ble
   igjen: en egen moerk flate, en border-RIGHT, blur, og en aktiv-markor som var
   en loddrett stolpe i venstremargen. En hoyrekant og et venstremerke gir bare
   mening for en stolpe. Resultatet var at niva 2 ikke sa ut som niva 2 av noe --
   det sa ut som en fremmed komponent limt inn under kategoriene.

   Na deler de to nivaene sprak: samme venstrekant, samme skriftfamilie, ingen
   flate rundt noen av dem. Niva 1 eier understreken, niva 2 eier pillen, og
   niva 2 er ett hakk mindre og lysere. Telefon er unntatt -- der er dette en
   flytende bunnlinje, et bevisst annet monster. */
body[data-device="desktop"] .ab-nav,
body[data-device="tablet"] .ab-nav{
  background:none;border:0;box-shadow:none;backdrop-filter:none;
  position:static;padding:0;margin:2px 0 0;max-width:none;
  flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px;
}
body[data-device="desktop"] .nav-btn,
body[data-device="tablet"] .nav-btn{
  position:static;padding:5px 11px;border-radius:999px;border:0;
  font-size:12px;gap:7px;color:var(--ink-3);
}
body[data-device="desktop"] .nav-btn svg,
body[data-device="tablet"] .nav-btn svg{width:15px;height:15px}
body[data-device="desktop"] .nav-btn:hover,
body[data-device="tablet"] .nav-btn:hover{color:var(--ink-2);background:var(--hair-2)}
body[data-device="desktop"] .nav-btn.is-on,
body[data-device="tablet"] .nav-btn.is-on{
  color:var(--ink);background:color-mix(in srgb, var(--accent) 16%, transparent);
}
body[data-device="desktop"] .nav-btn.is-on svg,
body[data-device="tablet"] .nav-btn.is-on svg{color:var(--accent)}
/* Stolpen i venstremargen hoerte til sidemenyen. */
body[data-device="desktop"] .nav-btn.is-on::before{content:none}

/* ---- startflaten ---------------------------------------------------------------------- */
.home-brand{font-size:clamp(30px,9vw,46px);font-weight:700;letter-spacing:.06em}
.home-lede{font-size:clamp(15px,4vw,18px);color:var(--ink-2)}
.home-card{padding:22px 18px;border-radius:var(--r-lg)}
.hc-icon{
  font-size:26px;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--neon-2) 18%, transparent);
  border:1px solid rgba(255,255,255,.08);margin-bottom:4px;
}
.hc-title{font-size:19px;letter-spacing:-.01em}
.home-watch{
  align-self:center;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);color:var(--ink-2);
}
.home-watch:hover{border-color:var(--neon-1);color:#fff}

/* ---- seerforsiden ---------------------------------------------------------------------- */
.br-card{border-radius:var(--r-md)}
.br-live{background:var(--neon-1);box-shadow:var(--glow-1);letter-spacing:.12em}
.br-title{font-size:15px}
.br-btn{border-radius:999px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.br-btn:hover{border-color:var(--neon-1);color:#fff}

/* ---- seer-overlegget --------------------------------------------------------------------- */
.lv-live{box-shadow:var(--glow-1);letter-spacing:.12em}
.lv-rail-btn{background:color-mix(in srgb, #150F28 62%, transparent);border-color:rgba(255,255,255,.1)}
.lv-rail-btn:hover{border-color:var(--neon-1)}
.lv-send{box-shadow:var(--glow-1)}
.lv-vote.is-mine{box-shadow:var(--glow-1)}

/* ---- mobil forst: stoerre trykkflater, mindre ramme --------------------------------------- */
@media (max-width:719px){
  .su-body{padding:4px 14px 18px}
  .su-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .su-grid-fx{grid-template-columns:1fr}
  .su-card-name{padding:9px 11px 0}
  .su-card-body{padding:2px 11px 11px}
  .su-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px))}
  .su-next{flex:1 1 auto}
  .su-back{flex:0 0 auto;padding:0 20px}
  .panel{border-radius:var(--r-md)}
  .home-cards{gap:10px}
  .home-card{padding:16px 14px}
  .hc-icon{width:44px;height:44px;font-size:22px}
}

/* Paneler: samme kantspraak som kortene, saa flatene henger sammen. */
.panel{
  background:linear-gradient(180deg,#191331,#131022);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.panel-hd h2::before{box-shadow:var(--glow-1)}

/* Admin-siden: flere verktoy stablet i ETT panel, ikke spredt i menyen. Hver
   faar sin egen overskrift + skillelinje, saa det fortsatt leses som separate
   verktoy -- bare samlet ett sted. */
.admin-section{padding-top:22px;margin-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.admin-section:first-of-type{padding-top:0;margin-top:18px;border-top:0}
.admin-section .panel-hd h2{font-size:15.5px}

/* ---- scenen: kameraet ER skjermen ---------------------------------------------------
   Etter oppsettet skal ikke dansen vaere ett element i en liste med tjue knapper.
   De faa handlingene man bruker MENS man danser ligger flytende over bildet; resten
   er ett trykk unna i et ark. */
/* data-tab="dance", ikke data-nav="Dans": navId() i ui.js utleder panel-id-en
   fra data-nav, saa etiketten er ogsaa identiteten. Da flytter en omdoeping
   CSS-kroken under foettene paa disse reglene. data-tab staar stille. */
body.stage-mode section[data-tab="dance"] > .panel-hd,
body.stage-mode section[data-tab="dance"] .camera-stats,
body.stage-mode section[data-tab="dance"] .joint-confidence,
/* #session-note stakk opp i bunnkanten som to halve bokstaver. Den hoerer til
   arket, ikke til scenen -- den vises igjen naar man aapner «Mer». */
body.stage-mode:not(.sheet-open) #session-note,
/* Var skjult her da den het «Ny runde». Na er den veien til veiviseren, og
   den skal staa oeverst i arket. */
body.stage-mode:not(.sheet-open) .su-restart{display:none}
body.stage-mode.sheet-open #session-note{display:block}
body.stage-mode section[data-tab="dance"]{padding:0;border:0;background:transparent;box-shadow:none}
body.stage-mode .camera-grid{display:block;margin:0}
/* --stage-top og --stage-bottom settes av syncStageBox() i start.js, som maaler
   headeren og bunnmenyen i stedet for aa gjette. Fallback-verdiene her er de
   gamle faste tallene, saa scenen fortsatt har en fornuftig hoeyde i det ene
   bildet for maalingen har rukket aa kjore. */
body.stage-mode #camera-view{
  width:100%;aspect-ratio:auto;
  height:calc(100dvh - var(--stage-top, 98px) - var(--stage-bottom, 52px));
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.08);
}

/* ---- spilltypen paa scenen ----------------------------------------------------------
   Battle og «Ov mot en utfordring» var egne sider. Det de gjor er et kort steg
   for du danser -- lim inn en utfordring, eller tast en kode -- og da skal
   kameraet bli staaende mens du gjor det. Bryteren ligger over bildet, oeverst
   til venstre; raden med Oppsett/Send live/Opptak ligger nederst til hoyre. */
body.stage-mode .stage-modes{
  position:absolute;left:12px;top:12px;right:12px;z-index:40;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  pointer-events:none;
}
body.stage-mode .stage-modes > *{pointer-events:auto}
.sm-pick{
  display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:color-mix(in srgb, #150F28 70%, transparent);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);
}
.sm-btn{
  border:0;cursor:pointer;border-radius:999px;padding:6px 14px;background:none;
  font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--ink-2);
  -webkit-tap-highlight-color:transparent;transition:background .15s ease,color .15s ease;
}
.sm-btn:hover{color:var(--ink)}
.sm-btn.is-on{background:var(--brand-gradient);color:#160821}
.sm-body{
  width:min(560px,100%);padding:14px;border-radius:var(--r-lg);
  background:color-mix(in srgb, #150F28 84%, transparent);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  max-height:56dvh;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
}
.sm-body[hidden]{display:none}
.sm-body .beatmap-editor{min-height:88px}
/* Illustrasjonen i tom-tilstanden var tegnet for en full side (560x260). I en
   stripe over kamerabildet tar den nesten hele panelet -- her er den pynt, ikke
   innhold. */
.sm-body .ab-art,.sm-body canvas,.sm-body img{max-height:96px;object-fit:cover;width:100%}
/* Utenfor scenen er stripa vanlig innhold, ikke et overlegg. */
.stage-modes{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:10px 0}

/* ---- scenen paa telefon -------------------------------------------------------------
   To ting var galt her.

   Headeren tok 111 px -- 14 % av skjermen -- til et animert moenster og et stort
   logo-felt, mens man danser. Paa telefon ligger navigasjonen uansett i
   bunnmenyen; det eneste headeren maa beholde er merket og Dans/Se paa-bryteren.

   Og #camera-view sluttet 59 px NEDENFOR bunnmenyen. Raden med Oppsett, Opptak,
   Fullskjerm og Mer henger i bunnen av kameraruta, saa de to nederste knappene
   laa bak menyen og kunne ikke trykkes. #ab-nav er fixed, 62 px hoy, 10 px fra
   bunnen -- --stage-bottom er de to pluss litt luft. */
/* Scenen fyller vinduet. At siden likevel kunne scrolle 42 px gjorde at
   headeren skled og bildet hoppet ved en tilfeldig sveip -- arket har sin egen
   overflow-y og trenger ikke at siden bak kan flytte seg. */
body.stage-mode{overflow:hidden}

body.stage-mode[data-device="phone"] header.mast{
  padding:calc(5px + env(safe-area-inset-top,0px)) 0 5px;
}
body.stage-mode[data-device="phone"] .mast-pattern{display:none}
body.stage-mode[data-device="phone"] .brand-logo{
  width:24px;height:24px;border-radius:7px;box-shadow:none;
}
body.stage-mode[data-device="phone"] .brand-word{font-size:13px;letter-spacing:.1em}

.stage-rail{
  position:absolute;right:10px;bottom:12px;z-index:40;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.stage-btn{
  display:flex;align-items:center;gap:8px;cursor:pointer;border-radius:999px;
  padding:9px 14px;color:var(--ink-2);
  background:color-mix(in srgb, #150F28 68%, transparent);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);
  font-family:var(--display);font-size:12.5px;font-weight:600;
  transition:border-color .14s ease,color .14s ease,transform .1s ease;
}
.stage-btn:hover{border-color:var(--neon-1);color:#fff}
.stage-btn:active{transform:scale(.95)}
.sb-icon{font-size:15px;line-height:1}
.stage-btn.is-live{border-color:var(--neon-1);color:#fff;box-shadow:var(--glow-1)}

/* Sidepanelet blir arket. Samme kontroller, ikke en kopi. */
/* body.app-mode section[data-tab="dance"] .camera-side (style.css) setter
   position:absolute og har hoyere spesifisitet (0-3-1) enn en ren klassevelger.
   Arket ble derfor aldri fixed: det la seg i flyten og dyttet scenen ut av
   skjermen. Foerste forsok var body.app-mode.stage-mode foran -- men app-mode
   settes bare paa telefon, saa paa nettbrett og desktop traff regelen ingenting
   og arket ble staaende static, 1600 px hoyt, med scenen skjovet ned under.
   #camera-side gir (1-2-0): vinner uten aa vaere avhengig av app-mode. */
body.stage-mode #camera-side.stage-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  max-height:74dvh;overflow-y:auto;
  padding:8px 16px calc(96px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#1b1533,#120e21);
  border-top:1px solid rgba(255,255,255,.1);border-radius:22px 22px 0 0;
  box-shadow:0 -18px 50px rgba(0,0,0,.6);
  transform:translateY(102%);transition:transform .24s cubic-bezier(.2,.8,.3,1);
}
body.stage-mode #camera-side.stage-sheet.is-open{transform:none}
.sheet-grip{
  display:block;width:44px;height:5px;border-radius:3px;margin:2px auto 12px;
  background:rgba(255,255,255,.22);border:0;cursor:pointer;padding:0;
}
body[data-device="desktop"].stage-mode #camera-side.stage-sheet{
  left:auto;right:16px;bottom:16px;width:340px;border-radius:var(--r-lg);
  max-height:76dvh;padding-bottom:18px;
}

/* ---- toppen: en app-header, ikke en artikkeltittel -----------------------------------
   "Scoremotoren, ikke en illustrasjon av den" er en overskrift for et QA-verktoy.
   Den spiste 285 px av skjermen for innholdet begynte, paa hver eneste flate. Admin
   beholder den; de andre rollene faar en smal header med logo og modus. */
body[data-role]:not([data-role="admin"]) .mast h1,
body[data-role]:not([data-role="admin"]) .lede,
body[data-role]:not([data-role="admin"]) .mast .eyebrow,
body[data-role]:not([data-role="admin"]) .mast-sep,
body[data-role]:not([data-role="admin"]) .role-hint{display:none}
/* padding-block, ikke shorthanden `padding:12px 0`. Shorthanden nullet ogsaa
   venstre/hoyre, og den slaar `padding-left:var(--pad)` i regelen for den festede
   baren lenger nede paa spesifisitet (0,3,1 mot 0,2,2). Den negative margen der
   overlevde derimot -- saa baren ble 24 px bredere enn skjermen i hver side, hele
   dokumentet fikk vannrett rulling, og logoen la seg utenfor venstre kant. */
body[data-role]:not([data-role="admin"]) .mast{
  padding-block:12px;margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body[data-role]:not([data-role="admin"]) .mast-top{margin:0}
body[data-role]:not([data-role="admin"]) .brand-logo{width:32px;height:32px;border-radius:9px}
body[data-role]:not([data-role="admin"]) .brand-word{font-size:16px;letter-spacing:.13em;color:var(--ink)}
body[data-role]:not([data-role="admin"]) .brand-word b{
  background:var(--edge);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Statuslampen er nyttig, men trenger ikke byggenummer og "afterbeat-core, live". */
body[data-role]:not([data-role="admin"]) .mast-top > .src,
/* Elementet heter .build-stamp. Denne regelen sto med .build og traff derfor
   ingenting -- byggestempelet har staatt i headeren for alle hele tiden. Det er
   utviklerinfo: den hoerer hjemme i admin-visningen og i bunnen av forsiden
   (se #lp-foot-meta i ui.js), ikke over dansescenen paa en telefon. */
body[data-role]:not([data-role="admin"]) .mast-top > .build-stamp{display:none}
/* Samme sak i bunnen: «Server: backend/afterbeat-server · Kjerne: core/ · Regel:
   docs/UI-DEV-LOOP.md» er stier inn i repoet. Den sto skjult i app-modus, men
   full bredde viste den for alle -- ogsaa for en som bare ser paa en sending.
   Barnevelger, saa veiviserens egen <footer> (.su-foot) ikke rammes. */
body[data-role]:not([data-role="admin"]) > footer{display:none}

/* ---- moduset: en bryter i headeren, ikke et menyvalg ---------------------------------
   Dans/Se paa/Lag dans er de store stedene i appen. De hoerer hjemme ved siden av
   logoen -- en kompakt, segmentert kontroll -- ikke oeverst i menyen, som gjorde
   menyen til to lister stablet oppaa hverandre. Se buildModeSwitch() i ui.js. */
.mode-switch{
  display:inline-flex;gap:2px;margin-left:auto;padding:3px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--hair);
}
.mode-switch-btn{
  display:flex;align-items:center;gap:6px;cursor:pointer;border:0;border-radius:999px;
  background:none;color:var(--ink-3);font-family:var(--display);font-size:12.5px;font-weight:600;
  padding:7px 13px;-webkit-tap-highlight-color:transparent;transition:color .15s ease;
}
.mode-switch-btn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode-switch-btn:hover{color:var(--ink-2)}
.mode-switch-btn.is-on{color:#fff;background:var(--brand-gradient);box-shadow:0 2px 12px color-mix(in srgb, var(--accent) 45%, transparent)}
.mode-switch-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
body[data-device="phone"] .mode-switch-btn .nav-label{display:none}
body[data-device="phone"] .mode-switch-btn{padding:8px}

/* ---- overkategoriene: i headeren, over den spesialiserte menyen ----------------------
   Logo, saa disse -- se renderCategoryTabs() i ui.js. Understreking, ikke en
   pille som moduset (mode-switch): to ulike slags valg skal ikke se like ut.
   Vises kun naar rollen faktisk har mer enn én kategori (categoriesOf().length > 1). */
.nav-categories{
  display:flex;flex-wrap:wrap;gap:4px 18px;width:100%;
  padding:10px 0 0;margin-top:4px;border-top:1px solid var(--hair);
}
.nav-cat-btn{
  background:none;border:0;cursor:pointer;color:var(--ink-3);
  font-family:var(--display);font-size:13px;font-weight:600;
  padding:6px 2px 9px;border-bottom:2px solid transparent;
  -webkit-tap-highlight-color:transparent;transition:color .15s ease,border-color .15s ease;
}
.nav-cat-btn:hover{color:var(--ink-2)}
.nav-cat-btn.is-on{color:var(--ink);border-bottom-color:var(--accent)}
.nav-cat-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- den spesialiserte menyen: stedene inne i aktiv kategori -------------------------
   Se renderSpecializedMenu() i ui.js. Paa telefon tar bunnlinja det den har
   plass til; resten ligger bak "Mer" -- sjelden noedvendig naa, siden en
   kategori sjelden er stoerre enn fem steder. */
.ab-nav{display:flex;flex-direction:column;gap:2px}
/* Telefon manglet. Kolonne er utgangspunktet her, og bade nettbrett og desktop
   fikk row tilbake -- men ikke telefonen, som er den ene formen kommentaren over
   faktisk beskriver. Bunnlinja stablet derfor knappene loddrett: «Dans» var
   synlig, «Ov mot en utfordring» og «Battle» laa nedenfor skjermkanten, og
   toppen av den andre stakk opp som to halve bokstaver under menyen. */
body[data-device="phone"] .ab-nav{flex-direction:row;align-items:center}
body[data-device="tablet"] .ab-nav{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px}

/* "Mer"-arket paa telefon. */
.nav-more-back{position:fixed;inset:0;z-index:140;background:rgba(6,3,14,.5);backdrop-filter:blur(2px)}
.nav-more-back[hidden]{display:none}
.nav-more-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:145;
  padding:8px 12px calc(96px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#1b1533,#120e21);
  border-top:1px solid rgba(255,255,255,.1);border-radius:22px 22px 0 0;
  box-shadow:0 -18px 50px rgba(0,0,0,.6);
  transform:translateY(102%);transition:transform .24s cubic-bezier(.2,.8,.3,1);
  display:flex;flex-direction:column;gap:2px;
}
.nav-more-sheet.is-open{transform:none}
.nav-more-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:2px 0 8px;padding:0 12px;
}
.nav-more-sheet .nav-btn{justify-content:flex-start;padding:12px 14px;border-radius:12px;font-size:14px}
.nav-more-sheet .nav-btn.is-on{background:color-mix(in srgb, var(--neon-1) 14%, transparent);color:#fff}

/* ---- de nye stedene ------------------------------------------------------------------- */
.place-lede{color:var(--ink-2);font-size:14px;max-width:62ch;margin:0 0 16px}
.place-sub{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:22px 0 10px}
.place-actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.place-field{display:flex;flex-direction:column;gap:5px}
.place-field .su-input{width:130px;text-align:center;font-family:var(--mono);font-size:20px;letter-spacing:.2em}
.place-hint{font-size:12.5px;color:var(--ink-3);margin:8px 0 0;max-width:62ch}
.place-empty{font-size:13.5px;color:var(--ink-3);margin:10px 0 0}
.place-empty[hidden]{display:none}
.place-list{display:flex;flex-direction:column;gap:8px}
.place-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:var(--r-sm);
  background:linear-gradient(180deg,#1b1533,#141024);
  border:1px solid rgba(255,255,255,.07);color:var(--ink);
  font-family:var(--display);font-size:14px;font-weight:600;
}
.place-row:hover{border-color:var(--neon-1)}
.place-row-static{cursor:default}
.place-row-static:hover{border-color:rgba(255,255,255,.07)}
.pr-rank{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;background:color-mix(in srgb, var(--neon-2) 22%, transparent);
}
.pr-main{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-meta{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-weight:400}
.sending-grid,.settings-grid,.rec-slot{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.rec-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}

/* ---- luft: faerre kasser, mer plass ---------------------------------------------
   Alt laa i kasse-i-kasse: et panel med ramme, med en gruppe med ramme, med kort
   med ramme. Utenfor admin faar seksjonene ingen egen ramme -- overskriften og
   luften rundt gjor jobben. */
body[data-role]:not([data-role="admin"]) main > section[data-roles]{
  background:none;border:0;box-shadow:none;padding:8px 0 40px;
}
body[data-role]:not([data-role="admin"]) .panel-hd{margin-bottom:14px}
body[data-role]:not([data-role="admin"]) .panel-hd h2{
  font-size:clamp(22px,5vw,30px);font-weight:700;letter-spacing:-.02em;padding-left:0;
}
body[data-role]:not([data-role="admin"]) .panel-hd h2::before{display:none}
body[data-device="desktop"] main{padding:0 34px}
body[data-device="tablet"] main{padding:0 20px}
main{gap:0}

/* Grupper inne i en seksjon skal ikke ha ramme heller. */
body[data-role]:not([data-role="admin"]) .scene-picker,
body[data-role]:not([data-role="admin"]) .cam-devices{
  background:none;border:0;padding:0;
}
.sending-grid,.settings-grid{gap:16px}
.settings-grid > *,.sending-grid > *{max-width:520px}
.hud-label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}

/* ---- grafikk: figurer som danser -------------------------------------------------
   Ikke fotografier -- vi har ingen, og skal ikke finne paa noen. Dette er den
   SAMME tegnekoden som scenen bruker, saa grafikken er appens eget uttrykk. */
.ab-art{
  display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.07);
}
.art-wide{max-width:560px;margin:0 0 14px}
.home-hero{margin:2px 0 10px}
.home-hero .ab-art{
  border-radius:var(--r-lg);
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 60px color-mix(in srgb, var(--neon-2) 22%, transparent);
}
.place-empty{display:flex;flex-direction:column;gap:0;align-items:flex-start}

/* Tomtilstandene er ikke bare tekst lenger: figuren staar over, teksten under. */
#battle-empty,#board-empty,#rec-empty{max-width:560px}

/* Stedene faar luft mellom delene i stedet for rammer rundt dem. */
.place-actions{margin:18px 0 6px}
.place-sub{margin-top:30px}
.place-list{gap:10px}
/* Ekte klipp og tegnet figur skal ligge i samme ramme, saa bytte ikke rykker. */
.ab-art{object-fit:cover;aspect-ratio:19/10;background:#0d0819}
.home-hero .ab-art{aspect-ratio:19/10}

/* ---- kvittering -------------------------------------------------------------------
   Handlinger som ikke gir noe svar foles som om de ikke skjedde, og da trykker
   folk en gang til. */
.ab-toast{
  position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,12px);z-index:400;
  padding:11px 18px;border-radius:999px;max-width:min(92vw,420px);text-align:center;
  background:color-mix(in srgb, #1b1533 92%, transparent);
  border:1px solid var(--neon-1);box-shadow:var(--glow-1);
  color:var(--ink);font-family:var(--display);font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.ab-toast.is-on{opacity:1;transform:translate(-50%,0)}
body[data-device="desktop"] .ab-toast{bottom:28px}

/* ---- koden: kopier og del ------------------------------------------------------- */
.code-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.code-actions .btn-ghost{border-radius:999px;padding:8px 16px;font-size:12.5px}
.live-code{
  border-color:var(--neon-1);
  background:linear-gradient(180deg, color-mix(in srgb, var(--neon-1) 14%, transparent), transparent);
}
.live-code-digits{font-size:44px;letter-spacing:.28em}

/* ---- rammesjekk i oppsettet ------------------------------------------------------- */
.su-frame-ok{
  margin:0;font-size:13.5px;font-weight:600;color:var(--neon-4);
  display:flex;align-items:center;gap:8px;
}
.su-frame-ok::before{content:"✓";font-size:15px}
.su-frame-ok[hidden]{display:none}
/* Meldingen ligger naa oppaa bildet i steget, ikke i panelet bak. */
.su-cam-view .preflight-msg{bottom:12px}

/* ---- tomtilstander med en vei videre ---------------------------------------------- */
.empty-cta{margin-top:14px;min-height:44px;padding:0 22px;border-radius:999px;align-self:flex-start}
.place-empty{gap:2px}

/* ---- flere klipp med overgang -----------------------------------------------------
   To lag oppaa hverandre. Det som vises har opacity 1, det andre 0, og byttet er
   en overtoning. Et hardt kutt mellom to klipp er et rykk. */
.ab-rotator{position:relative;width:100%;aspect-ratio:19/10;border-radius:var(--r-lg);overflow:hidden}
/* Opaciteten styres av Web Animations i art.js, ikke av en CSS-overgang: der
   faar vi et lofte om naar overgangen er ferdig, og kan rydde opp presist. */
.ab-rotator .ab-art{
  position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;
  opacity:0;
}
.home-hero .ab-rotator{
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 60px color-mix(in srgb, var(--neon-2) 22%, transparent);
  border:1px solid rgba(255,255,255,.07);
}
@media (prefers-reduced-motion:reduce){
  .ab-rotator .ab-art{transition:none}
}

/* =================================================================================
   Startflaten som landingsside
   =================================================================================
   Var tre kort midt paa en tom flate. Naa en hel side: header med meny, hero med
   video i full bredde, valgene, det som sendes NAA, hvordan man gjor det, og en
   bunn. Samme valg i menyen og i kortene -- ett sted i koden, saa de ikke kan
   komme i utakt. */
/* .home er nå vanlig sideinnhold under den delte header.mast + #ab-nav, ikke
   et eget fastlåst fullskjermlag med sin egen header/meny -- se
   buildNav()/buildHome() i ui.js og body[data-role="home"] i style.css. */
/* Kolonne med footeren nederst: er siden kortere enn skjermen, skal footeren
   fortsatt ligge i bunnen og ikke midt paa. */
.home{
  display:flex;flex-direction:column;min-height:100dvh;
  background:
    radial-gradient(60% 50% at 25% 8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    radial-gradient(60% 50% at 78% 18%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 70%),
    var(--ground);
}
.home-inner{display:contents}

.lp-logo{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.14em;color:var(--ink-2)}
.lp-logo b{background:var(--edge);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-logo-sm{font-size:15px}

/* ---- headeren: en ekte meny som folger skjermen ---------------------------------------
   Festing og bakgrunn fantes bare under body.app-mode, altsaa paa telefon. Paa
   nettbrett og desktop rullet headeren bort, og forsiden hadde ikke engang en
   meny -- bare logoen, fordi buildNav() avbrot naar rollen «home» ikke matcher
   noen paneler.
   Selve baren gaar i full bredde (samme --pad-triks som banneret) mens radene
   inni holder seg innenfor samme maalebredde som resten av siden. En festet bar
   med max-width ville latt innholdet rulle forbi i sidekantene. */
body[data-role] header.mast{
  position:sticky;top:0;z-index:60;
  max-width:none;
  margin-left:calc(-1 * var(--pad));
  margin-right:calc(-1 * var(--pad));
  padding-left:var(--pad);padding-right:var(--pad);
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--hair);
}
/* Ikke moensteret: det ligger absolutt og skal daekke hele baren. */
body[data-role] header.mast > :not(.mast-pattern){
  max-width:1100px;margin-left:auto;margin-right:auto;width:100%;
}
/* Beat-teppet av til fordel for menyen. Moensteret ble tegnet (style.css, "headeren
   blir logoen selv") for en app-header som BARE var logoen. Den headeren finnes ikke
   lenger: naa staar #ab-nav paa samme rad, og to lag animert boelgestrek under fire
   knapper i --ink-2 gjoer dem uleselige paa telefon. Samme valg er allerede tatt for
   stage-mode lenger oppe. Der headeren ikke har meny, staar teppet igjen. */
body.app-mode[data-role] .mast-pattern{display:none}
/* Med --pad paa 0 i app-modus gaar baren riktig i kant, men da gir
   `padding-inline:var(--pad)` den heller ingen luft. Telefonen faar sin egen,
   samme 14 px som body.app-mode .mast alltid har ment. */
body.app-mode[data-role] header.mast{padding-inline:14px}
/* Menyknappene paa forsiden er lenker, ikke knapper -- samme utseende. */
.nav-cat-btn{text-decoration:none;display:inline-block}

/* Menyen paa samme rad som logoen.
   Knappene forsvant: 13 px i den svakeste tekstfargen (--ink-3), 2 px mellom
   dem, ingen flate og ingen ramme -- den eneste markoren var en understrek som
   paa forsiden ikke er aktiv i det hele tatt. De sto som fire smaa etiketter,
   ikke som noe man trykker paa. Na har de pusterom, hoyere kontrast og en flate
   naar man er over dem eller staar der. */
body[data-role] .mast-top{gap:12px;flex-wrap:nowrap}
body[data-role] #nav-categories{
  border-top:0;padding:0;margin:0 0 0 18px;width:auto;flex:1 1 auto;min-width:0;
  gap:4px;overflow-x:auto;scrollbar-width:none;
  /* .nav-categories setter flex-wrap:wrap. Uten denne vant wrap over overflow-x:
     knappene brakk til to linjer i stedet for aa rulle, headeren vokste til 99 px,
     og "Gear" havnet alene paa rad to. Rulling er det regelen over mener. */
  flex-wrap:nowrap;
}
body[data-role] #nav-categories::-webkit-scrollbar{display:none}
body[data-role] #nav-categories .nav-cat-btn{
  padding:7px 13px;border-radius:999px;border-bottom:0;
  font-size:13.5px;color:var(--ink-2);white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
body[data-role] #nav-categories .nav-cat-btn:hover{background:var(--hair-2);color:var(--ink)}
body[data-role] #nav-categories .nav-cat-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
body[data-role] #nav-categories .nav-cat-btn.is-on{
  color:var(--ink);background:color-mix(in srgb, var(--accent) 20%, transparent);
}
/* Pilen trenger plass innenfor pillen. */
body[data-role] #nav-categories .nav-cat-btn.har-meny{padding-right:24px}
body[data-role] #nav-categories .nav-cat-btn.har-meny::after{right:11px}
/* Et hakk mellom merket og menyen, saa de ikke leses som én klump. */
body[data-role] #nav-categories::before{
  content:"";flex:none;align-self:center;width:1px;height:18px;
  background:var(--hair-2);margin-right:14px;
}
body[data-role] #nav-categories::-webkit-scrollbar{display:none}
.nav-cat{position:relative;flex:none}
/* Kategorier med mer enn én side faar en pil: da er knappen ogsaa en meny. */
.nav-cat-btn.har-menu,.nav-cat-btn.har-meny{padding-right:16px}
.nav-cat-btn.har-meny::after{
  content:"";position:absolute;right:4px;top:50%;width:5px;height:5px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.7;
}
.nav-cat-btn.har-meny{position:relative}

/* Niva 2 som nedtrekk, forankret til sin egen kategori. */
body[data-device="desktop"] .nav-cat > #ab-nav,
body[data-device="tablet"] .nav-cat > #ab-nav{
  position:absolute;top:calc(100% + 6px);left:0;z-index:70;
  flex-direction:column;align-items:stretch;gap:2px;
  min-width:190px;padding:6px;margin:0;
  background:color-mix(in srgb, #1b1533 96%, transparent);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);backdrop-filter:blur(14px);
}
body[data-device="desktop"] .nav-cat > #ab-nav .nav-btn,
body[data-device="tablet"] .nav-cat > #ab-nav .nav-btn{
  justify-content:flex-start;border-radius:8px;padding:8px 10px;width:100%;
}
#ab-nav[hidden]{display:none}

/* ---- hero ----
   Full bredde. Banneret er det eneste paa forsiden som skal gaa helt ut i
   kantene; resten av seksjonene beholder sidepaddingen. Negativ marg paa
   nøyaktig --pad, ikke 100vw: vw teller med rullefeltet og gir vannrett scroll. */
.home > .lp-hero{
  margin-left:calc(-1 * var(--pad));
  margin-right:calc(-1 * var(--pad));
  /* .home > * setter width:100% lenger nede i fila. Med fast bredde spiste den
     negative hoyremargen ingenting, saa banneret naadde venstre kant men ikke
     hoyre. Barnevelgeren her gir nok vekt til at auto vinner. */
  width:auto;
  border-radius:0;
}
/* ---- hero ---- */
.lp-hero{position:relative;min-height:min(74dvh,620px);display:flex;align-items:flex-end;overflow:hidden}
/* Teksten i heroen rullerer med klippene (se SALG i ui.js). Hver linje toner inn
   nedenfra saa byttet leses som et bytte, ikke som en tekst som plutselig staar
   der. Roligere bevegelse: da staar den stille. */
.lp-rot{max-width:760px}
.lp-rot.is-inn .lp-h1,.lp-rot.is-inn .lp-sub{animation:lp-rot-inn .5s ease both}
.lp-rot.is-inn .lp-sub{animation-delay:.06s}
@keyframes lp-rot-inn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lp-rot.is-inn .lp-h1,.lp-rot.is-inn .lp-sub{animation:none}
}
.lp-hero .home-hero,.lp-hero .ab-rotator{position:absolute;inset:0;margin:0;border-radius:0}
.lp-hero .ab-rotator{aspect-ratio:auto;height:100%}
.lp-hero .home-hero .ab-art{border-radius:0;border:0;box-shadow:none;height:100%;object-fit:cover}
/* Teksten maa kunne leses oppaa video som skifter. Et lag som moerkner nedover
   gir kontrast uten aa gjemme bildet. */
.lp-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ground) 55%, transparent) 0%,
             transparent 30%, color-mix(in srgb, var(--ground) 82%, transparent) 88%, var(--ground) 100%);
}
.lp-hero-inner{position:relative;z-index:2;padding:0 22px 40px;max-width:760px}
.lp-h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(34px,7.4vw,68px);margin:0 0 12px;color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.lp-sub{color:var(--ink-2);font-size:clamp(14px,2.4vw,17px);line-height:1.5;margin:0 0 20px;max-width:52ch}
.lp-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lp-cta-main{min-height:52px;padding:0 30px;border-radius:999px;font-size:15px}
.lp-cta-alt{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14px}
.lp-cta-alt:hover{color:var(--neon-1)}

/* ---- seksjoner ---- */
.lp-sec{padding:44px 22px;max-width:1100px;margin:0 auto}
.lp-sec-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.lp-h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,3.4vw,28px);margin:0 0 16px}
.lp-sec-hd .lp-h2{margin:0}
.lp-count{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--neon-1)}
.lp-empty{color:var(--ink-3);font-size:14px;margin:0;max-width:56ch}
.lp-empty[hidden]{display:none}
/* ---- de tre hovedomraadene -----------------------------------------------------
   Ikke tre bokser med et ikon i, men tre flater med et ekte bilde bak seg. Bildet
   i bunnen, en gradient over det saa teksten er lesbar uansett hvor lyst bildet
   er, og teksten oppaa igjen. */
.lp-areas{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px}
.la{
  position:relative;display:block;width:100%;text-align:left;padding:0;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);
  background:#0d0819;overflow:hidden;cursor:pointer;color:var(--ink);
  aspect-ratio:4/5;box-shadow:0 14px 40px rgba(0,0,0,.45);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s ease,box-shadow .22s ease;
}
.la:hover,.la:focus-visible{
  transform:translateY(-4px);border-color:color-mix(in srgb, var(--neon-1) 60%, transparent);
  box-shadow:0 20px 54px rgba(0,0,0,.55),var(--glow-1);
}
.la:focus-visible{outline:2px solid var(--neon-1);outline-offset:3px}

.la-media{position:absolute;inset:0;display:block}
.la-media img,.la-media canvas,.la-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.la:hover .la-media img,.la:hover .la-media canvas{transform:scale(1.05)}

/* Gradienten er ikke pynt: uten den lander hvit tekst paa et lyst parti i bildet.
   Ett jevnt dempende lag over hele flaten, og et tyngre under teksten. */
.la-scrim{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,4,16,.62) 0%, rgba(8,4,16,.12) 34%, rgba(8,4,16,.80) 72%, rgba(8,4,16,.96) 100%),
    radial-gradient(120% 70% at 50% 100%, color-mix(in srgb, var(--neon-2) 26%, transparent), transparent 70%);
}

.la-body{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  height:100%;padding:18px 18px 20px;
}
/* Merkelappen ligger i flyten og skyver resten ned, den er ikke plassert absolutt.
   Absolutt plassering ser riktig ut helt til teksten under vokser -- da la
   tittelen seg oppaa den paa smale skjermer. */
.la-kicker{
  margin-bottom:auto;
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.la-n{
  font-style:normal;color:#150A1C;background:var(--edge);box-shadow:var(--glow-1);
  border-radius:999px;padding:3px 8px;font-weight:700;letter-spacing:.06em;
}
.la-k{font-style:normal}
.la-title{
  font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(24px,2.6vw,32px);color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.7);
}
.la-desc{font-size:13.5px;line-height:1.45;color:rgba(240,236,250,.82);max-width:34ch}

.la-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.la-point{
  font-size:11.5px;line-height:1;padding:6px 9px;border-radius:999px;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
}
.la-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font-family:var(--display);font-weight:700;font-size:14px;color:#fff;
}
.la-go svg{width:17px;height:17px;transition:transform .2s ease}
.la:hover .la-go svg{transform:translateX(4px)}
.la-go-t{font-style:normal}

@media (max-width:900px){
  .lp-areas{grid-template-columns:1fr;gap:12px}
  /* Ingen fast hoyde: innholdet er like hoyt uansett hvor bredt kortet er, og et
     paatvunget forhold klemte teksten ut av flaten. Bildet ligger absolutt bak og
     dekker uansett hvor hoyt kortet blir. */
  .la{aspect-ratio:auto;min-height:264px}
  .la-kicker{margin-bottom:14px}
  .la-desc{max-width:44ch}
}
@media (prefers-reduced-motion:reduce){
  .la,.la-media img,.la-media canvas,.la-go svg{transition:none}
  .la:hover{transform:none}
  .la:hover .la-media img,.la:hover .la-media canvas{transform:none}
}

/* ---- live nå ---- */
.lp-live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lp-live-card{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  border-radius:var(--r-md);background:linear-gradient(180deg,#1b1533,#141024);
  border:1px solid rgba(255,255,255,.07);transition:transform .14s ease,border-color .14s ease;
}
.lp-live-card:hover{transform:translateY(-3px);border-color:var(--neon-1)}
.lc-thumb{
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  background:
    radial-gradient(70% 90% at 30% 20%, hsl(var(--h) 85% 60% / .5), transparent 70%),
    radial-gradient(70% 90% at 80% 80%, hsl(calc(var(--h) + 60) 85% 55% / .4), transparent 70%),
    #0d0819;
}
.lc-live{
  position:absolute;top:8px;left:8px;background:var(--neon-1);color:#fff;
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.12em;
  padding:3px 7px;border-radius:5px;box-shadow:var(--glow-1);
}
.lc-code{font-family:var(--mono);font-size:22px;color:rgba(255,255,255,.3);letter-spacing:.1em}
.lc-title{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);
  padding:10px 12px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:2px 12px 12px}

/* ---- slik gjør du det ---- */
/* Punktlisten under «Hva er AFTERBEAT?». Innholdet kommer fra buildHome() slik
   at antall milj0er telles fra chipsene og ikke staar skrevet i en tekst som maa
   vedlikeholdes ved siden av. */
.lp-punkter{
  list-style:none;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 18px;
}
.lp-punkter li{
  position:relative;padding-left:18px;font-size:13.5px;color:var(--ink-2);line-height:1.5;
}
.lp-punkter li::before{
  content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--brand-gradient);
}
#lp-om .lp-sub{margin:0;max-width:60ch}

/* Privat/offentlig som et valg, ikke en avkryssing. */
.send-valg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--hair)}
.send-btn{
  border:0;cursor:pointer;border-radius:999px;padding:6px 16px;background:none;
  font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--ink-3);
  transition:background .15s ease,color .15s ease;
}
.send-btn:hover{color:var(--ink-2)}
.send-btn.is-on{background:var(--brand-gradient);color:#160821}
.send-note{margin:2px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* ---- «Du velger selv» -------------------------------------------------------
   Sto som tre kort med sytten graa ord i. «17 miljoer» var en paastand rett over
   sytten navn du ikke kunne se -- og et miljo er et sted du skal danse i, saa det
   eneste som svarer paa om du vil danse der, er hvordan det ser ut.

   Bildene fantes fra for: plakatene til video-miljoene ligger lokalt, og de
   fotograferte bruker den samme nedskaleringen som miljovelgeren. De tegnede
   tegner seg selv. */
.lp-valg{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;margin-top:22px;align-items:start;
}
.lp-valg-kort{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0;
}
/* Miljokortet er hovedsaken i seksjonen og faar hele bredden. */
.lp-kort-bred{grid-column:1 / -1}
.lp-kort-hd{display:flex;align-items:baseline;gap:10px}
.lp-valg-hd{margin:0;font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink)}
/* Tallet er poenget, ikke pynt: det er stort fordi det er svaret. */
.lp-kort-tall{
  margin-left:auto;font-family:var(--display);font-size:26px;font-weight:700;
  line-height:1;background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lp-valg-d{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}

.lp-gruppe{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:12px}
.lp-valg-gruppe{
  font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
.lp-gruppe-under{font-size:12px;color:var(--ink-3)}

/* Flisene. `auto-fill` og ikke `auto-fit`: med fire igjen paa siste rad skal de
   beholde stoerrelsen sin i stedet for aa blaase seg opp til halve bredden.

   132px, ikke 150: paa en 375px-telefon er det 307px igjen inne i kortet, og to
   fliser paa 150 pluss mellomrom er 310. Tre piksler for mye ga EN kolonne --
   sytten fliser i full bredde under hverandre, en halv meter rulling for aa
   komme forbi en seksjon som skulle gi oversikt. */
.lp-fliser{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
}
.lp-flis{margin:0;min-width:0}
.lp-flis-bilde{
  position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--hair);
  display:grid;place-items:center;
}
.lp-flis-bilde img,
.lp-flis-bilde canvas{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Et 360-panorama er buet i sin helhet, og strukket over en flis leser det som
   et oppbrettet rom -- «Taket» ble en graa flate. Miljovelgeren viser en
   fjerdedel av bredden (PHOTO_SLICE i app.js), altsaa omtrent synsfeltet til et
   vanlig kamera. Samme utsnitt her, saa forsiden og velgeren viser det samme
   stedet paa samme maate.

   object-fit:cover viser allerede omtrent 80 % av bredden i en 16:10-flis, saa
   det som gjenstaar er 0,8 / 0,25. */
.lp-flis-bilde img.er-panorama{transform:scale(3.2);transform-origin:50% 50%}
.lp-flis-bilde.er-tung{
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(139,92,246,.30), transparent 70%),
    linear-gradient(180deg, rgba(255,61,138,.10), rgba(10,4,22,.6));
  padding:12px;
}
.lp-flis-tung{
  font-size:11.5px;line-height:1.45;color:var(--ink-2);text-align:center;
}
.lp-flis-navn{
  margin-top:6px;font-family:var(--display);font-size:12.5px;font-weight:600;
  color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Effektene: fire brytere. Det ene som betyr noe er hvilken som staar paa. */
.lp-fx,.lp-se{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.lp-fx-rad{
  display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-top:1px solid var(--hair);font-size:13.5px;color:var(--ink-2);
}
.lp-fx-rad:first-child{border-top:0}
.lp-fx-navn{font-family:var(--display);font-weight:600}
.lp-fx-status{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-3);
}
.lp-fx-rad.er-paa .lp-fx-status{
  color:var(--ink);padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--neon-1) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--neon-1) 50%, transparent);
}

/* Hvem som ser paa: tre tilstander som betyr helt forskjellige ting. De sto som
   tre lange etiketter i en pilleliste, der de brakk midt i ordene. */
.lp-se-rad{
  display:grid;grid-template-columns:auto auto;gap:2px 8px;
  padding:10px 2px;border-top:1px solid var(--hair);
}
.lp-se-rad:first-child{border-top:0}
.lp-se-navn{
  font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--ink);
  justify-self:start;
}
.lp-se-merke{
  justify-self:start;align-self:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink);
  padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--neon-1) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--neon-1) 50%, transparent);
}
.lp-se-hva{grid-column:1 / -1;font-size:12.5px;color:var(--ink-3);line-height:1.5}

.lp-valg-hvordan{
  margin:auto 0 0;padding-top:12px;border-top:1px solid var(--hair);
  font-size:12.5px;color:var(--ink-3);line-height:1.5;
}
.lp-valg-lede{margin:0;max-width:62ch}

.lp-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.lp-steps li{display:flex;flex-direction:column;gap:6px}
.lp-num{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;font-weight:600;color:#150A1C;
  background:var(--edge);box-shadow:var(--glow-1);margin-bottom:4px;
}
.lp-steps b{font-size:15.5px;color:var(--ink)}
.lp-steps span:not(.lp-num){font-size:13.5px;color:var(--ink-3);line-height:1.5}

/* ---- bunn ---- */
/* ---- footeren --------------------------------------------------------------
   Den var merket alene. En bunn skal si hvor man kan gaa videre, og for et spill
   som staar paa kameraet hoerer det ogsaa hjemme her hva som faktisk skjer med
   bildet. Full bredde, som headeren -- samme --pad-triks. */
.home > .lp-foot{
  margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));width:auto;
  /* Helt ned: opphever body sin bunnpadding, som ellers la 80 px sidebakgrunn
     under footeren. margin-top:auto skyver den til bunnen paa korte sider. */
  margin-top:auto;margin-bottom:calc(-1 * var(--pad-bunn));
  padding:36px var(--pad) calc(28px + var(--pad-bunn));
  background:color-mix(in srgb, #0c0818 88%, transparent);
  border-top:1px solid var(--hair);
  display:block;
}
/* --pad har to roller: body sin sidepadding (som margen over opphever) OG
   innrykket til innholdet. Paa desktop er begge 24 px, saa én variabel holdt.
   I app-modus er sidepaddingen 0 -- og da ble innrykket her 0 ogsaa, saa
   footerteksten la seg klemt mot begge skjermkanter. Regelen over har hoeyere
   spesifisitet enn `.lp-foot` sine 22 px, saa gutteren maa settes her.
   14 px er landingssidens egen mobilgutter, samme som .lp-sec og
   .lp-hero-inner under 719 px. Margen blir staaende paa 0. */
body.app-mode .home > .lp-foot{padding-inline:14px}
.lf-inner{
  max-width:1100px;margin:0 auto;display:grid;gap:28px;
  grid-template-columns:minmax(220px,1fr) 2fr;align-items:start;
}
.lf-lede{margin:8px 0 0;color:var(--ink-3);font-size:13.5px;line-height:1.55;max-width:34ch}
.lf-kolonner{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px}
.lf-kol{display:flex;flex-direction:column;gap:7px}
.lf-kol-hd{
  margin:0 0 2px;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.lf-lenke{color:var(--ink-2);text-decoration:none;font-size:13.5px}
.lf-lenke:hover{color:var(--accent)}
.lf-bunn{
  max-width:1100px;margin:26px auto 0;padding-top:18px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:12.5px;color:var(--ink-3);
}
.lf-personvern{max-width:60ch}
@media (max-width:700px){
  .lf-inner{grid-template-columns:1fr;gap:22px}
}

.lp-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:26px 22px calc(30px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,255,255,.07);margin-top:20px;
}
.lp-foot-meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

@media (max-width:719px){
  .lp-hero{min-height:58dvh}
  .lp-hero-inner{padding:0 14px 28px}
  .lp-sec{padding:32px 14px}
  .lp-cta-main{width:100%;justify-content:center}
}
/* Barna av .home krympet til innholdet i stedet for aa fylle bredden. Eksplisitt
   bredde er uansett riktig her: seksjonene skal fylle, og max-width styrer
   hvor brede de faktisk blir. */
.home > *{width:100%}
.lp-hero,.lp-foot{width:100%}

/* ---- klar-flaten: de to valgene man faktisk endrer rett før start -------------
   Knappene er LÅNT fra oppsettet, ikke kopiert, så de må tåle å stå på en smalere
   flate enn de er tegnet for. Derfor bare størrelse og plass her -- ingen egen
   utgave av selve knappene. */
.klar-valg{
  display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px;
  margin:4px 0 2px;text-align:left;
}
.klar-felt{
  display:flex;flex-direction:column;min-width:0;
  border:1px solid rgba(255,255,255,.09);border-radius:12px;
  background:rgba(255,255,255,.03);overflow:hidden;
}
.klar-felt + .klar-felt{margin-top:-1px}
/* Hodet er en knapp, og den skal se ut som en: hele bredden, navnet til venstre,
   det valgte til hoyre, og en vinkel som snur naar feltet er aapent. */
.klar-felt-hd{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;cursor:pointer;padding:10px 12px;text-align:left;
  font-family:var(--display);font-size:13px;font-weight:600;color:var(--ink-2);
}
.klar-felt-hd:hover{color:#fff}
.klar-felt-hd:focus-visible{outline:2px solid var(--neon-1);outline-offset:-2px}
.klar-felt-navn{flex:none}
.klar-felt-sum{
  flex:1 1 auto;min-width:0;text-align:right;
  font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.klar-felt-hd::after{
  content:"";flex:none;width:7px;height:7px;margin-left:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease;
}
.klar-felt.er-aapen .klar-felt-hd{color:#fff}
.klar-felt.er-aapen .klar-felt-hd::after{transform:rotate(-135deg) translate(-2px,-2px)}
.klar-felt:not(.er-aapen) .klar-felt-inn{display:none}
.klar-felt-inn{display:flex;flex-direction:column;gap:6px;min-width:0;padding:2px 12px 12px}
/* Miljølisten er lang. Her får den en høyde og ruller, i stedet for å skyve
   Start-knappen ut av skjermen. */
/* Kortet maa ha en BESTEMT bredde, ikke krympe rundt innholdet. I app-modus
   ruller chip-radene sidelengs (style.css:736), og en rad bredere enn skjermen
   dro hele kortet med seg ut over kanten -- 420 px paa en 375 px skjerm. Med en
   bestemt bredde ruller raden inni kortet i stedet, slik den skal. */
/* Kortet kan bli hoyere enn kameravisningen naar et felt er aapent. Ren
   sentrering klipper da TOPPEN -- overskriften forsvant bak modusvelgeren.
   «safe» sentrerer bare naar det er plass og faller tilbake til start ellers,
   og overflow-y gir resten en rullestripe i stedet for aa flyte utenfor. */
.klar{overflow-y:auto;align-items:safe center}
.klar-inner{width:100%;min-width:0}
.klar-valg,.klar-felt,.klar-felt-inn{min-width:0;max-width:100%}
.klar-felt-inn .lyd-kilder{flex-wrap:wrap}
.klar-felt-inn .scene-picker{max-height:132px;overflow-y:auto;padding-right:4px;max-width:100%}
/* .scene-picker er en flex-kolonne. Med en tak-hoyde KRYMPER radene i stedet for
   aa flyte over -- chipsene ble ti piksler hoye streker uten tekst. flex:none gir
   dem hoyden sin tilbake, og da ruller beholderen slik den skal. */
.klar-felt-inn .scene-picker > *{flex:none}
.klar-felt-inn .scene-chip{min-height:0;padding:6px 10px;font-size:12px}
.klar-felt-inn .scene-chip canvas{display:none}
.klar-felt-inn .lyd-btn{padding:7px 11px;font-size:12px}
.klar-felt-inn .lyd-note:empty{display:none}
@media (max-width:719px){
  .klar-valg{max-width:none}
  .klar-felt-inn .scene-picker{max-height:104px}
}

/* ---- rettigheter paa lyden ----------------------------------------------------
   Ikke en feilmelding. Den sier hva som skjer med OPPTAKET, og den staar der du
   velger musikken -- ikke som en overraskelse etter at du har danset. */
.lyd-rett{
  margin:2px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3);
  border-left:2px solid rgba(255,255,255,.14);padding-left:9px;
}
.lyd-rett:empty{display:none}
.lyd-rett.er-ok{border-left-color:color-mix(in srgb, var(--ok, #39E6C0) 70%, transparent)}
.lyd-rett.er-stille{border-left-color:var(--warn)}
.lyd-rett-egen{display:flex;align-items:center;gap:7px;font-size:12px;margin-top:2px}
.lyd-rett-egen[hidden]{display:none}
.rec-stille{
  flex-basis:100%;margin:2px 0 0;font-size:11.5px;color:var(--warn);
  font-family:var(--mono);
}

/* ---- katalogen ------------------------------------------------------------------
   Musikkvelgeren. Den skal se ut som en spilleliste, ikke som et skjema: tittel,
   artist, og et lite lisensmerke som bare er tydelig naar det betyr noe. */
.katalog{display:flex;flex-direction:column;gap:8px;min-width:0}
.katalog[hidden]{display:none}
/* Sjangerknappene ruller vannrett i stedet for aa brekke til to linjer. Feltet
   staar i en trang kolonne, og en knapperad som plutselig blir dobbelt saa hoy
   dytter alt under seg. */
.kat-sjangre{
  display:flex;gap:5px;min-width:0;
  overflow-x:auto;scrollbar-width:none;padding-bottom:1px;
}
.kat-sjangre::-webkit-scrollbar{display:none}
.kat-chip{
  flex:none;cursor:pointer;
  padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:var(--ink-3);font-family:var(--display);font-size:11.5px;font-weight:600;
  white-space:nowrap;transition:color .12s ease, background .12s ease;
}
.kat-chip:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.kat-chip.is-on{
  color:var(--ink);
  background:color-mix(in srgb, var(--neon-1) 22%, transparent);
  border-color:color-mix(in srgb, var(--neon-1) 55%, transparent);
}
.kat-chip:focus-visible{outline:2px solid var(--neon-1);outline-offset:2px}
.kat-sok{display:flex;gap:6px;min-width:0}
.kat-sok input{flex:1 1 auto;min-width:0}
.kat-status{margin:0;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.kat-status:empty{display:none}
.kat-status.er-feil{color:var(--warn)}
.kat-liste{
  display:flex;flex-direction:column;gap:2px;
  max-height:186px;overflow-y:auto;scrollbar-width:thin;
}
.kat-rad{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 9px;align-items:center;
  padding:6px 10px 6px 6px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid transparent;color:var(--ink);
}
.kat-rad:hover,
.kat-rad:focus-within{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.kat-rad.er-spiller{
  background:rgba(255,255,255,.09);
  border-color:color-mix(in srgb, var(--neon-1) 40%, transparent);
}

/* Velg-knappen dekker hele raden via ::after, og smakebit-knappen ligger over
   den. Slik kan begge treffes: du kan hore paa et spor uten aa velge det. */
.kat-velg{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1px;min-width:0;
  text-align:left;cursor:pointer;font-family:var(--display);
  background:none;border:0;padding:0;color:inherit;
}
.kat-velg::after{content:"";position:absolute;inset:0;border-radius:10px}
.kat-velg:focus-visible{outline:none}
.kat-velg:focus-visible::after{outline:2px solid var(--neon-1);outline-offset:-2px}
.kat-tittel{
  min-width:0;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kat-artist{
  min-width:0;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Smakebiten. Nesten usynlig til du er i naerheten av raden -- tjue tydelige
   avspillingsknapper er en verktoylinje, ikke en spilleliste. */
.kat-prov{
  position:relative;z-index:1;
  width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer;
  opacity:.38;transition:opacity .12s ease, background .12s ease;
}
.kat-rad:hover .kat-prov,
.kat-rad:focus-within .kat-prov{opacity:1}
.kat-rad.er-spiller .kat-prov{
  opacity:1;background:color-mix(in srgb, var(--neon-1) 22%, transparent);
  border-color:color-mix(in srgb, var(--neon-1) 55%, transparent);
}
.kat-prov:focus-visible{outline:2px solid var(--neon-1);outline-offset:2px}
/* Naar det ikke finnes en peker aa sveipe med, er knappen den ENESTE veien til
   en smakebit. Da skal den ikke gjemme seg. */
@media (hover: none){ .kat-prov{opacity:.75} }
/* Trekanten og firkanten er tegnet, ikke skrevet: et tegn fra en skrifttype
   rendres ulikt paa hver plattform og staar nesten aldri i senter. */
.kat-ikon{
  width:9px;height:10px;margin-left:1px;background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.kat-rad.er-spiller .kat-ikon{
  width:8px;height:8px;margin-left:0;border-radius:1px;clip-path:none;
}
.kat-rad.er-laster .kat-ikon{animation:kat-puls 900ms ease-in-out infinite}
@keyframes kat-puls{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.kat-rad.er-laster .kat-ikon{animation:none}}
/* Lisensmerket er nesten usynlig naar alt er greit, og tydelig naar det ikke er
   det. Et merke paa hver rad ville vaert stoy; et merke bare der det betyr noe
   er informasjon. */
.kat-lisens{
  /* Kolonnen MAA staa. Med bare grid-row auto-plasseres merket i kolonne 1 og
     dytter tittelen ut til hoyre -- da leser raden baklengs. */
  grid-column:3;align-self:center;justify-self:end;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--ink-3);opacity:.55;
}
.kat-lisens.er-begrenset{
  color:var(--warn);opacity:1;
  border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius:5px;padding:2px 5px;
}

/* Sporkreditten over scenen. Diskret, men lesbar mot bade morkt gulv og hvit
   lyskjegle -- derfor skygge og ikke en boks som daekker bildet. */
.spor-kreditt{
  position:absolute;left:12px;bottom:10px;z-index:6;margin:0;pointer-events:none;
  font-family:var(--display);font-size:12px;font-weight:600;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 3px rgba(10,4,22,.9), 0 0 10px rgba(10,4,22,.7);
  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.spor-kreditt:empty{display:none}