/* =====================================================================
   HvaSkjer – «Kveldslys» (v1)
   Et visuelt lag oppå style.css / web.css / activities.css.
   Ingen funksjoner er endret: denne fila bytter bare fonter, farger,
   form og plassering. Fjern <link> til revamp.css for å gå tilbake.

   Idé: byen i skumringen – når ting skjer. Dyp indigo natt,
   gatelykt-gult som eneste aksentfarge, plakat-typografi.
   ===================================================================== */

/* ---------- Fonter (OFL, lagt i vendor/) ---------- */
@font-face{font-family:"Instrument Sans";src:url(vendor/instrumentsans-regular.woff) format("woff");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(vendor/instrumentsans-bold.woff) format("woff");font-weight:600 900;font-style:normal;font-display:swap}
/* (no italic Instrument Sans file is shipped – the browser slants the regular face instead of a failed download) */


/* De gamle familienavnene pekes til de nye filene, så ALT som fortsatt ber om
   Fredoka / Outfit / Inter (kartetiketter, knapper, gamle regler) får ny typografi. */
@font-face{font-family:"Fredoka";src:url(vendor/outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Outfit";src:url(vendor/instrumentsans-regular.woff) format("woff");font-weight:100 500;font-display:swap}
@font-face{font-family:"Outfit";src:url(vendor/instrumentsans-bold.woff) format("woff");font-weight:600 900;font-display:swap}
@font-face{font-family:"Inter";src:url(vendor/instrumentsans-regular.woff) format("woff");font-weight:100 500;font-display:swap}
@font-face{font-family:"Inter";src:url(vendor/instrumentsans-bold.woff) format("woff");font-weight:600 900;font-display:swap}

@font-face{font-family:"HS Display";src:url(vendor/outfit.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
html:root{
  --ks-natt:#15143a;      /* bakgrunn */
  --ks-skumring:#1d1c4a;  /* flater */
  --ks-dyp:#27265e;       /* hevede flater */
  --ks-kant:#34336f;      /* linjer */
  --ks-lykt:#7a4dff;      /* aksent: logo-lilla (fyll) */
  --ks-lykt-ink:#ffffff;  /* tekst på lilla */
  --ks-rosa:#ff5c8a;      /* merkevare-rosa, bare små ting */

  --display:"HS Display","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ks-radius-l:26px; --ks-radius-m:18px; --ks-radius-s:12px;
  --ks-ease:cubic-bezier(.2,.8,.2,1);

  /* lys modus (dagslys) */
  --ink:#151a3a; --muted:#5b6188; --bg:#eff0f8; --surface:#ffffff; --soft:#e5e9f4;
  --line:#dde2f0; --border:#cdd3e6; --header-bg:rgba(238,241,248,.86);
  --on-ink:#ffffff; --shadow:0 18px 40px -22px rgba(21,26,58,.35);
  --pink:#5a1ee6; --pink-2:#5a1ee6; --dream-lilac:#5a1ee6;
  --accent-soft:#ece5ff; --accent-ink:#4a16c4;
  --ks-accent-fill:var(--ks-lykt); --ks-accent-text:#5a1ee6;
  font-family:var(--body);
}
html:root[data-theme=dark]{ --accent:var(--ks-lykt);
  --ink:#eef0ff; --muted:#a3a8d0; --bg:var(--ks-natt); --surface:var(--ks-skumring); --soft:var(--ks-dyp);
  --line:#2a2960; --border:var(--ks-kant); --header-bg:rgba(21,20,58,.78);
  --on-ink:#121633; --map-bg:#141938; --shadow:0 22px 50px -24px rgba(0,0,0,.7);
  --pink:#b9a3ff; --pink-2:#b9a3ff; --dream-lilac:#b9a3ff;
  --accent-soft:rgba(122,77,255,.2); --accent-ink:#b9a3ff;
  --ks-accent-text:#b9a3ff;
}
@media (prefers-color-scheme: dark){ html:root:not([data-theme=light]){ --muted:#a3a8d0 } }
html[data-theme=dark] body{ --muted:#a3a8d0 }

/* ---------- Grunnlag ---------- */
html body, html:root body button, html:root body input, html:root body select, html:root body textarea{
  font-family:var(--body) !important;
}
html body{ font-feature-settings:"ss01","cv11"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html:root body h1, html:root body h2, html:root body h3, html:root body .display,
html:root body .dialog-heading h2, html:root body .act-hero h2, html:root body .event-feed-head h2,
html:root body .home-search-head h2, html:root body .search-engine-head h2, html:root body .cal-head h1,
html:root body .cal-nav h2, html:root body .sheet-title h2{
  font-family:var(--display) !important; letter-spacing:-.02em !important;
}
html[data-theme=dark]{ background-color:var(--ks-natt) !important }
html.web-build:root body{ background:transparent !important }
html[data-theme=dark] body::after{ opacity:.08 !important }
html:root body ::selection{ background:var(--ks-lykt); color:var(--ks-lykt-ink) }
html:root body :focus-visible{ outline:2.5px solid var(--ks-lykt) !important; outline-offset:3px !important; }

/* Boot-dekke i samme natt-blå (ingen blink av gammel farge) */
html.intro-pending, html.intro-pending body, #hsaBootVeil{ background:var(--ks-natt) !important }
html.web-build.intro-pending:root body{ background:var(--ks-natt) !important }
html:root body #brandIntro.bi-css{ background:var(--ks-natt) !important }
html[data-theme=light] body #brandIntro.bi-css{ background:#eff0f8 !important }

/* ---------- Ordmerket ---------- */
 html:root body .first-place-brand > span{
  font-family:var(--display) !important; font-weight:700 !important; letter-spacing:-.045em !important;
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:var(--ink) !important;
}
html:root body .brand-icon img{ border-radius:10px }

/* ---------- Topplinje ---------- */
html:root body .app-header{
  background:var(--header-bg) !important;
  backdrop-filter:blur(18px) saturate(1.3) !important; -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent) !important;
  box-shadow:none !important;
}
html:root body .icon-button{ border-radius:14px !important; color:var(--ink) !important }
html:root body .icon-button:hover{ background:var(--soft) !important }

/* Stedvelger i toppen: tilbake på alle sider unntatt forsiden (der står «Bytt sted» i overskriften).
   Da er det alltid ett trykk for å bytte sted – også på kart, aktiviteter og plan. */
html.web-build:root body:not([data-view=home]) .app-header #locationBtn{ display:inline-flex !important }
html:root body .location-pill{
  height:38px !important; padding:0 14px 0 12px !important; gap:7px !important;
  border-radius:999px !important; border:1px solid var(--border) !important;
  background:var(--surface) !important; box-shadow:none !important;
  font:600 13.5px/1 var(--body) !important; color:var(--ink) !important;
}
html:root body .location-pill .dot{ color:var(--ks-accent-text) !important; font-size:8px !important }
html:root body .account-btn{
  height:38px !important; border-radius:999px !important; border:1px solid var(--border) !important;
  background:transparent !important; color:var(--ink) !important; font-weight:600 !important; box-shadow:none !important;
}
html:root body .account-btn:hover{ background:var(--soft) !important }

/* ---------- Hovedmeny (desktop: segmentert, mobil: dokk) ---------- */
html:root body .tabbar{
  background:color-mix(in srgb,var(--surface) 88%,transparent) !important;
  border:1px solid var(--border) !important;
  box-shadow:0 20px 50px -28px rgba(0,0,0,.65) !important;
  backdrop-filter:blur(20px) saturate(1.3) !important; -webkit-backdrop-filter:blur(20px) saturate(1.3) !important;
  padding:5px !important; gap:4px !important;
}
html:root body .tabbar button{
  color:var(--muted) !important; background:transparent !important;
  font-weight:600 !important; letter-spacing:0 !important; border-radius:16px !important;
  transform:none !important; transition:background .25s var(--ks-ease),color .25s var(--ks-ease) !important;
}
html:root body .tabbar button::before{ display:none !important }
html:root body .tabbar button .ico{ filter:none !important; animation:none !important }
html:root body .tabbar button:hover{ color:var(--ink) !important; background:var(--soft) !important }
html:root body .tabbar button[aria-current=page]{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important;
}
html:root body .tabbar button[aria-current=page] .ico{ filter:none !important; transform:none !important }
html:root body .tabbar button[aria-current=page] .ico .duo{ fill-opacity:.28 !important }
html:root body .tabbar .badge{ background:var(--ks-rosa) !important; color:#fff !important }

@media (max-width:767px){
  html:root body .tabbar{
    left:10px !important; right:10px !important; bottom:calc(10px + var(--safe-bottom)) !important;
    height:64px !important; border-radius:24px !important;
  }
  html:root body .tabbar button{ font-size:11px !important; gap:3px !important; border-radius:19px !important }
  html:root body .tabbar button .ico{ width:22px !important; height:22px !important }
}
@media (min-width:768px){
  html:root body .tabbar{ border-radius:20px !important }
}

/* ---------- Forsiden: plakat-overskriften ---------- */
html:root body .home-hello{ padding-top:clamp(18px,4vh,44px) !important }
html:root body .home-hello .headline-row{ align-items:flex-end !important; gap:14px !important }
html:root body #helloTitle{
  font-family:var(--display) !important; font-weight:700 !important;
  font-size:16px !important; line-height:1 !important; letter-spacing:-.055em !important;
  display:block !important; text-align:center !important; color:var(--ink) !important; overflow:visible !important;
}
/* «Hva skjer» står allerede i logoen oppe til venstre – her bare for skjermlesere */
html:root body #helloTitle .sr-only{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important }
html:root body #helloTitle .where, html:root body #helloTitle .where em, html:root body #helloTitle .where .i{
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:var(--ink) !important; font-style:normal !important; filter:none !important; text-shadow:none !important;
}
html:root body #helloTitle .where{ font-size:clamp(54px,7.4vw,108px) !important; line-height:.92 !important; letter-spacing:-.045em !important; font-weight:600 !important; padding-bottom:.06em }
html:root body #helloTitle .where .q{
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:var(--ks-accent-text) !important; margin-left:.02em;
}
html:root body .headline-location{
  height:42px !important; padding:0 16px 0 13px !important; border-radius:999px !important;
  background:transparent !important; border:1.5px solid var(--border) !important; box-shadow:none !important;
  color:var(--ink) !important; font:600 14px/1 var(--body) !important; margin-bottom:.55em !important;
  transition:border-color .2s, background .2s !important;
}
html:root body .headline-location:hover{ border-color:var(--ks-accent-text) !important; background:var(--accent-soft) !important }
html:root body .headline-location [data-icon], html:root body .headline-location .ico{ color:var(--ks-accent-text) !important }
@media (max-width:650px){
  html:root body .home-hello .headline-row{ flex-direction:column !important; align-items:center !important; gap:12px !important }
  html:root body .home-hello .headline-row #helloTitle{ max-width:100% !important }
  html:root body .headline-location{ margin-bottom:0 !important; height:38px !important }
}

/* ---------- Søk + «Overrask meg» ---------- */
html:root body .home-discovery{ gap:10px !important; margin-top:clamp(14px,2.4vh,26px) !important }
html:root body .home-ask{
  background:var(--surface) !important; border:1.5px solid var(--border) !important;
  border-radius:20px !important; box-shadow:none !important; min-height:60px !important;
  transition:border-color .2s, box-shadow .2s !important;
}
html:root body .home-ask:focus-within{ border-color:var(--ks-accent-text) !important; box-shadow:0 0 0 4px var(--accent-soft) !important }
html:root body .home-ask .guide-mark{ background:transparent !important; border:0 !important; color:var(--muted) !important; box-shadow:none !important }
html:root body .home-ask-field{
  font-family:var(--body) !important; font-weight:500 !important; font-size:16.5px !important; letter-spacing:0 !important;
  color:var(--ink) !important;
}
html:root body .home-ask-field::placeholder{ color:var(--muted) !important; opacity:1 }
html:root body .home-ask button[type=submit]{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important;
  border-radius:14px !important; width:44px !important; height:44px !important;
  font-weight:700 !important; box-shadow:none !important; border:0 !important;
}

/* ---------- Karusellen ---------- */
html:root body .g-slide, html:root body .glide-track > *{ border-radius:var(--ks-radius-l) !important }
html:root body .g-slide .slide-title, html:root body .glide-track h3, html:root body .glide-track strong{
  font-family:var(--display) !important; letter-spacing:-.02em !important;
}
html:root body .slide-when, html:root body .g-slide .slide-when{
  background:#fff !important; color:#151a3a !important; font:700 12px/1 var(--body) !important;
  border-radius:999px !important; letter-spacing:0 !important;
}
html:root body .glide-arrow{
  background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--ink) !important;
  box-shadow:var(--shadow) !important; border-radius:999px !important;
}
html:root body .glide-arrow:hover{ border-color:var(--ks-accent-text) !important }

/* ---------- Arrangementslisten ---------- */
html:root body .event-feed-head h2{ font-size:clamp(22px,2.4vw,30px) !important; font-weight:700 !important }
html:root body .event-feed-head small{ color:var(--muted) !important; font-weight:500 !important }
html:root body .event-grid > *{
  border-radius:var(--ks-radius-m) !important; border:1px solid var(--line) !important;
  background:var(--surface) !important; box-shadow:none !important; overflow:hidden;
  transition:border-color .2s var(--ks-ease), transform .3s var(--ks-ease) !important;
}
html:root body .event-grid > *:hover{ border-color:color-mix(in srgb,var(--ks-lykt) 60%,var(--border)) !important; transform:translateY(-2px) }
html:root body .event-grid strong, html:root body .event-grid h3{
  font-family:var(--display) !important; font-weight:700 !important; letter-spacing:-.015em !important;
}

/* ---------- Brikker, faner, segmenter ---------- */
html:root body .chip, html:root body .chips button, html:root body .segments button, html:root body .map-regions button,
html:root body .partner-kinds button, html:root body .quick-pills-row .pill, html:root body .account-tabs button{
  border-radius:999px !important; font-weight:600 !important; letter-spacing:0 !important;
}
html:root body .segments button[aria-selected=true], html:root body .segments button.on,
html:root body .map-regions button[aria-pressed=true], html:root body .map-regions button.on, html:root body .map-regions button.active,
html:root body .partner-kinds button[aria-pressed=true], html:root body .account-tabs button[aria-selected=true]{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important; border-color:transparent !important;
  box-shadow:none !important;
}
html:root body .map-regions{ border-radius:999px !important }

/* ---------- Knapper ---------- */
html:root body button.primary, html:root body a.primary, html:root body .search-main-cta{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important;
  border-radius:14px !important; font-weight:700 !important; box-shadow:none !important; border:0 !important;
  background-image:none !important;
}
html:root body button.primary:hover, html:root body a.primary:hover{ filter:brightness(1.06) }
html:root body button.ghost{ border-radius:14px !important }
html:root body .surprise-btn{
  background:transparent !important; border:1.5px solid var(--border) !important; color:var(--ink) !important;
  border-radius:999px !important; box-shadow:none !important; font-weight:600 !important;
}

/* ---------- Dialoger og ark ---------- */
html:root body dialog, html:root body .chat-panel, html:root body .bottom-sheet{
  background:var(--surface) !important; color:var(--ink) !important;
  border:1px solid var(--border) !important;
}
html:root body dialog{ border-radius:var(--ks-radius-l) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,.6) !important }
html:root body dialog::backdrop{ background:rgba(10,12,32,.55) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
html:root body .dialog-heading h2{ font-size:24px !important; font-weight:700 !important }
html:root body .close{
  border-radius:999px !important; background:var(--soft) !important; color:var(--ink) !important; border:0 !important;
}
html:root body .field input, html:root body .field textarea, html:root body .field select,
html:root body .account-form input, html:root body .account-form textarea, html:root body .place-search{
  border-radius:var(--ks-radius-s) !important; border:1.5px solid var(--border) !important; background:var(--bg) !important;
}
html:root body .field input:focus, html:root body .field textarea:focus, html:root body .account-form input:focus,
html:root body .account-form textarea:focus{ border-color:var(--ks-accent-text) !important; outline:none !important; box-shadow:0 0 0 4px var(--accent-soft) !important }

/* Aktiviteter-panelet */
html:root body .act-hero h2 em{ font-style:normal !important; color:var(--ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important }

/* Kalender */
html:root body .cal-panel, html:root body .cal-day-panel, html:root body .cal-favs > *{ border-radius:var(--ks-radius-l) !important }
html:root body .cal-grid [aria-current=date], html:root body .cal-grid .today, html:root body .cal-grid button.is-today{
  background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important;
}
html:root body .cal-today{ border-radius:999px !important; font-weight:600 !important }

/* Overskrifter med versaler-etikett → rolig setningsform */
html:root body .search-section h3, html:root body .set-group h3, html:root body .home-search-head small,
html:root body .nearby-partners-head small, html:root body .first-place-kicker, html:root body #locationDialog .place-recent small{
  text-transform:none !important; letter-spacing:0 !important; font-weight:600 !important; font-size:13px !important; color:var(--muted) !important;
  font-family:var(--body) !important;
}

/* Kart-kontroller */
html:root body .leaflet-bar a{ background:var(--surface) !important; color:var(--ink) !important; border-color:var(--border) !important }
html:root body .map-fab{ background:var(--ks-lykt) !important; color:var(--ks-lykt-ink) !important; box-shadow:var(--shadow) !important }
html[data-theme=dark] body .leaflet-tile{ filter:invert(1) hue-rotate(195deg) brightness(.86) contrast(.9) saturate(.7) !important }

/* Bunntekst */
html:root body .home-about{ color:var(--muted) !important; font-size:13px !important }
html:root body .home-about b{ color:var(--ink) !important; font-weight:600 !important }
html:root body .home-about a{ color:var(--ks-accent-text) !important }

/* Respekter «redusert bevegelse» */
@media (prefers-reduced-motion:reduce){
  html:root body .event-grid > *, html:root body .tabbar button{ transition:none !important }
  html:root body .event-grid > *:hover{ transform:none !important }
}

/* ---------- Justeringer etter første gjennomgang ---------- */
/* Karusell: større, tydeligere titler */
html:root body .g-slide .slide-body h3{
  font-family:var(--display) !important; font-weight:700 !important; letter-spacing:-.03em !important;
  font-size:clamp(19px,1.7vw,24px) !important; line-height:1.05 !important; text-wrap:balance;
}
html:root body .g-slide .slide.title-long .slide-body h3{ font-size:clamp(17px,1.45vw,21px) !important }
html:root body .g-slide .slide.title-very-long .slide-body h3{ font-size:clamp(15px,1.25vw,18px) !important }
html:root body .g-slide .slide-place b{ font-weight:600 !important }
html:root body .card-body h3, html:root body .card-body strong{ text-wrap:balance }

/* «Bytt sted» beholder teksten også på smal skjerm */
html.web-build:root body .headline-location>span:last-child{ display:inline !important }
html:root body .headline-location{ width:auto !important; min-width:0 !important }

/* Små etiketter i kalender/favoritter: setningsform i stedet for versaler */
html:root body .cal-head small, html:root body .fav-head small{
  text-transform:none !important; letter-spacing:0 !important; font-weight:600 !important;
}

/* Mobil: gi stedvelgeren plass i toppen */
@media (max-width:520px){
  html:root body .location-pill{ max-width:44vw !important }
}
/* Min side (account.html) */
html:root body > header, html:root body header.top{ background:var(--header-bg) !important; border-bottom-color:var(--line) !important }
/* Lys modus: mykere glød bak karusellen, renere flate */
html[data-theme=light]:root body .hero-glow{ opacity:.35 !important }
html[data-theme=light]:root body{ --ks-lykt:#601ffb }

/* ---------- Utforsk-kartet svakt i bakgrunnen ---------- */
html.web-build:root body #bgMap{ display:block !important; z-index:-1 !important }
html.web-build:root body #bgMap.ready{ opacity:.22 !important; filter:saturate(.6) !important }
html.web-build[data-theme=light]:root body #bgMap.ready{ opacity:.18 !important }
html.web-build:root body #bgMap .leaflet-control-attribution{ display:none !important }

/* ---------- Kart: tydeligere stedsinfo øverst i boblen ---------- */
html:root body .pop-venue-head{ align-items:flex-start !important; gap:14px !important; padding:4px 2px 14px !important; margin-bottom:2px !important; border-bottom:1px solid var(--line) !important }
html:root body .pop-venue-img{ width:64px !important; height:64px !important; flex:0 0 64px !important; border-radius:16px !important; box-shadow:0 6px 18px -8px rgba(0,0,0,.5) !important }
html:root body .pop-venue-info{ gap:5px !important; min-width:0 }
html:root body .pop-venue-title{ font-family:"HS Display",var(--font-display,inherit) !important; font-size:20px !important; line-height:1.15 !important; font-weight:750 !important; letter-spacing:-.01em !important; white-space:normal !important; color:var(--ink) !important; text-decoration:none !important }
html:root body a.pop-venue-link{ display:inline-flex; align-items:baseline; gap:6px; border-radius:6px; text-decoration:underline !important; text-decoration-color:color-mix(in srgb, var(--ks-accent-text, #b9a3ff) 55%, transparent) !important; text-underline-offset:4px; text-decoration-thickness:2px }
html:root body a.pop-venue-link:hover, html:root body a.pop-venue-link:focus-visible{ color:var(--ks-accent-text, #b9a3ff) !important; text-decoration-color:currentColor !important; outline:none }
html:root body .pop-venue-ext{ font-size:14px; font-weight:700; color:var(--ks-accent-text, #b9a3ff) }
html:root body .pop-venue-sub{ display:flex !important; align-items:center; gap:5px; font-size:13.5px !important; white-space:normal !important; color:var(--muted) !important }
html:root body .pop-venue-sub svg, html:root body .pop-venue-sub .ico{ width:14px; height:14px; flex:0 0 14px; opacity:.8 }
html:root body .pop-venue-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px }
html:root body .pop-venue-count{ font-size:12.5px !important; font-weight:700 !important; padding:4px 10px; border-radius:99px; background:color-mix(in srgb, var(--ks-accent-text, #b9a3ff) 16%, transparent); color:var(--ks-accent-text, #b9a3ff) !important }
html:root body a.pop-venue-web{ font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:99px; border:1px solid var(--line); color:var(--ink) !important; text-decoration:none !important }
html:root body a.pop-venue-web:hover{ border-color:var(--ks-accent-text, #b9a3ff); color:var(--ks-accent-text, #b9a3ff) !important }
html:root body .pop-venue-also{ font-size:12px; color:var(--muted) }
html[data-theme=light]:root body .pop-venue-ext, html[data-theme=light]:root body .pop-venue-count{ color:#5a1ee6 !important }

/* ---------- Kino: «+7 visninger» og alle visninger i detaljvisningen ---------- */
html:root body .shows-note{ font-weight:700; color:var(--ks-accent-text, #b9a3ff) }
html:root body .showtimes{ margin:18px 0 6px }
html:root body .showtimes h3{ font-size:17px; margin:0 0 10px; display:flex; align-items:center; gap:8px }
html:root body .showtimes h3 small{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--soft); color:var(--muted) }
html:root body .showtimes-day{ display:grid; grid-template-columns:110px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--line) }
html:root body .showtimes-day > span{ font-size:13.5px; font-weight:700; color:var(--muted); padding-top:7px }
html:root body .showtimes-day > div{ display:flex; flex-wrap:wrap; gap:6px }
html:root body .showtime{ display:inline-flex; flex-direction:column; align-items:center; min-width:62px; padding:6px 10px; border-radius:12px; background:var(--soft); color:var(--ink) !important; text-decoration:none !important; line-height:1.15 }
html:root body .showtime b{ font-size:15px }
html:root body .showtime small{ font-size:10.5px; color:var(--muted); text-transform:capitalize }
html:root body a.showtime:hover{ outline:2px solid var(--ks-accent-text, #b9a3ff) }
html:root body .showtime[aria-current]{ background:var(--accent, #7a4dff); color:#fff !important }
html:root body .showtime[aria-current] small{ color:#ffffffcc }
@media (max-width:480px){ html:root body .showtimes-day{ grid-template-columns:1fr; gap:4px } html:root body .showtimes-day > span{ padding-top:0 } }

/* ---------- Kart: kompakt stedsinfo på mobil, så listen i boblen får plassen ---------- */
@media (max-width:640px){
  html:root body .pop-venue-head{ gap:10px !important; padding:0 0 8px !important }
  html:root body .pop-venue-img{ width:42px !important; height:42px !important; flex:0 0 42px !important; border-radius:12px !important; box-shadow:none !important }
  html:root body .pop-venue-info{ gap:3px !important }
  html:root body .pop-venue-title{ font-size:16px !important }
  html:root body .pop-venue-ext{ font-size:12px }
  html:root body .pop-venue-sub{ font-size:12px !important }
  html:root body .pop-venue-sub svg, html:root body .pop-venue-sub .ico{ width:12px; height:12px; flex-basis:12px }
  html:root body .pop-venue-count, html:root body a.pop-venue-web{ font-size:11.5px !important; padding:2px 8px !important }
  html:root body .pop-venue-also{ display:none }
  html:root body .pop-follows{ display:none !important }
  html:root body .pop-list{ max-height:min(52vh, 420px) !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
}

/* ---------- Ytelse ved scrolling ----------
   Målt: nettleseren brukte mesteparten av hver frame på «Layerize» – tusenvis av egne grafikklag fordi små,
   gjentatte elementer (kategori-ikoner på hvert kort, kartnåler, hurtigknapper) var merket will-change og/eller
   hadde backdrop-filter. Slike effekter hører bare hjemme på noen få store, faste flater. */
html:root body .quick button .q-ico, html:root body .nearby-thumb .bubble,
html:root body .cal-dots i, html:root body .tabbar button .ico, html:root body .icon-button .ico,
html:root body .bpin-drop, html:root body .bubble, html:root body .card-media .bubble, html:root body .slide-cat, html:root body .brand-icon{ will-change:auto !important }
html:root body .card-media .bubble, html:root body .slide-cat, html:root body .slide-cat .bubble{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important }
html:root body .card-media .bubble{ background:rgba(255,255,255,.9) !important }
/* Bare én uskarp flate om gangen: toppfelt og fanelinje får en lett, billig uskarphet */
html:root body .app-header, html:root body .tabbar{ backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important }
/* Lange lister: kort utenfor skjermen tegnes ikke før de nesten er synlige */
html:root body .nearby-item, html:root body #eventGrid > .card, html:root body #resultsGrid > .card{ content-visibility:auto; contain-intrinsic-size:auto 96px }
html:root body #eventGrid > .card, html:root body #resultsGrid > .card{ contain-intrinsic-size:auto 300px }
/* Bakgrunnskartet: eget, statisk lag – ikke filtrer det på nytt mens innholdet scroller */
html.web-build:root body #bgMap.ready{ filter:none !important; transform:translateZ(0) }
/* Rulleflater: ikke la scrollen «lekke» videre til siden bak */
html:root body #homeView, html:root body .sheet-content, html:root body dialog, html:root body .pop-list, html:root body .map-cats-body{ overscroll-behavior:contain }
html.web-build #filterDialog form{ scroll-behavior:auto !important }

/* ---------- Lesbarhet: små tekster skal ha minst 4.5:1 kontrast (WCAG AA) ----------
   Målt med et skript over alle visninger, mørkt og lyst tema, mobil og PC. */
/* 1) Kategorietikett («Kino», «Konsert» …): kategorifargen lysnet i mørkt tema, mørknet i lyst – tydelig og større */
html:root body .cat-label{ font-size:13.5px !important; font-weight:800 !important; letter-spacing:.01em;
  color:color-mix(in srgb, var(--c) 42%, #fff) !important; padding:4px 10px 4px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--c) 22%, transparent); border:1px solid color-mix(in srgb, var(--c) 45%, transparent) }
html:root body .cat-label svg, html:root body .cat-label .ico{ width:16px !important; height:16px !important }
html[data-theme=light]:root body .cat-label{ color:color-mix(in srgb, var(--c) 70%, #000) !important; background:color-mix(in srgb, var(--c) 12%, transparent) }
/* 2) Hvit tekst på lys lilla knapp → mørk tekst */
html[data-theme=dark]:root body #homeSearchAll, html[data-theme=dark]:root body .cal-find, html[data-theme=dark]:root body .cal-pill{ color:#160f2e !important }
html:root body #applyFilters.primary{ color:#fff !important }
html:root body #applyFilters.primary:disabled{ opacity:.72 !important }
html[data-theme=dark]:root body #homeSearchAll .ico, html[data-theme=dark]:root body .cal-find .ico{ color:#160f2e !important }
html[data-theme=dark]:root body small.why{ color:#c4b5ff !important }
/* 3) Små hjelpetekster */
html:root body .interest-count{ color:color-mix(in srgb, var(--ink) 78%, transparent) !important }
html:root body .act-group-all{ color:color-mix(in srgb, var(--group-c, var(--ink)) 45%, #fff) !important; font-weight:750 }
html[data-theme=light]:root body .act-group-all{ color:color-mix(in srgb, var(--group-c, var(--ink)) 62%, #000) !important }
html[data-theme=light]:root body .card .why, html[data-theme=light]:root body small.why{ color:#5a1ee6 !important }
html:root body .showtime small{ color:color-mix(in srgb, var(--ink) 85%, transparent) !important; font-size:11px !important }
html:root body .showtime[aria-current] small{ color:#fff !important }
/* Generelt: dempet tekst litt lysere i mørkt tema, så «små og grå» tekster blir lesbare */
html[data-theme=dark]:root body{ --muted:#b7b3d6 }
html[data-theme=dark]:root body .pop-item-text small, html[data-theme=dark]:root body .nearby-info p, html[data-theme=dark]:root body .card-body small:not(.why):not(.when){ color:#c3bfe0 !important }

/* ---------- Intro: større HvaSkjer-logo ---------- */
html:root body #brandIntro .bi-mark{ width:clamp(150px, 40vw, 200px) !important; height:clamp(150px, 40vw, 200px) !important; border-radius:clamp(38px, 10vw, 52px) !important; box-shadow:0 26px 60px -24px rgba(96,31,251,.55) !important }
html:root body #brandIntro .bi-where{ font-size:clamp(40px, 11vw, 64px) !important }
html:root body #brandIntro .bi-stage{ gap:clamp(18px, 4vh, 30px) !important }

/* ---------- Mobil: ryddig toppfelt (ingen «Min side» oppå logoen) ---------- */
@media (max-width:560px){
  html:root body .app-header{ gap:6px !important }
  html:root body .app-header .brand{ flex:0 1 auto; min-width:0 }
  html:root body .header-actions{ margin-left:auto !important; gap:6px !important; flex:0 1 auto; min-width:0; display:flex !important; align-items:center }
  /* Min side / Logg inn: bare ikonet – navnet står i menyen og på knappens skjermleser-etikett */
  html:root body #accountBtn{ width:40px !important; min-width:40px !important; height:40px !important; padding:0 !important; justify-content:center !important; margin-right:0 !important; border-radius:50% !important; flex:0 0 40px }
  html:root body #accountBtn > span, html:root body #accountBtn #accountLabel{ display:none !important }
  html:root body #accountBtn svg{ width:20px !important; height:20px !important }
  html:root body #locationBtn{ min-width:0 !important; max-width:34vw !important; flex:0 1 auto }
}
@media (max-width:380px){
  html:root body #locationBtn{ max-width:44vw !important }
}
@media (max-width:440px){
  /* Når stedsknappen vises (kart/aktiviteter), får den plassen – logo-ikonet alene identifiserer appen */
  html:root body:not([data-view=home]) #locationBtn{ max-width:46vw !important }
}

/* ---------- Forsidesøk: nedtrekksliste med treff mens du skriver ---------- */
html:root body #homeAskForm{ position:relative; overflow:visible !important }
html:root body .home-suggest{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:10px; box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
  max-height:min(62vh, 520px); overflow-y:auto; overscroll-behavior:contain }
html:root body .home-suggest[hidden]{ display:none !important }
html:root body .hs-head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:4px 6px 8px }
html:root body .hs-head strong{ font-size:14px }
html:root body .hs-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12px; color:var(--muted) }
html:root body .hs-tags b{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--soft); color:var(--ink) }
html:root body .hs-note{ margin:0 6px 8px; font-size:12.5px; color:var(--muted) }
html:root body .hs-list{ display:grid; gap:2px }
html:root body .hs-row{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; width:100%; padding:9px 8px; border-radius:14px }
html:root body .hs-row:hover, html:root body .hs-row:focus-visible{ background:var(--soft); outline:none }
html:root body .hs-ico{ flex:0 0 36px; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--c, #7a4dff) 24%, transparent); color:color-mix(in srgb, var(--c, #7a4dff) 40%, #fff) }
html:root body .hs-ico svg{ width:18px; height:18px }
html:root body .hs-gem-ico{ --c:#d4a72c; font-size:16px }
html:root body .hs-txt{ display:flex; flex-direction:column; min-width:0; gap:2px }
html:root body .hs-txt b{ font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink) }
html:root body .hs-txt small{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html:root body .hs-empty{ margin:4px 6px 6px; font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:6px }
html:root body .hs-empty button{ all:unset; cursor:pointer; padding:4px 10px; border-radius:99px; background:var(--soft); color:var(--ink); font-size:13px; font-weight:600 }
html:root body .hs-foot{ display:flex; gap:8px; padding:10px 2px 2px; margin-top:6px; border-top:1px solid var(--line) }
html:root body .hs-all{ flex:1; height:44px; border:0; border-radius:14px; background:var(--accent, #7a4dff) !important; color:#fff !important; font:700 15px/1 inherit; cursor:pointer }
html:root body .hs-map{ height:44px; padding:0 16px; border:1px solid var(--line); border-radius:14px; background:transparent; color:var(--ink); font:600 14px/1 inherit; cursor:pointer }
html[data-theme=light]:root body .hs-ico{ color:color-mix(in srgb, var(--c, #7a4dff) 75%, #000) }
@media (max-width:560px){ html:root body .home-suggest{ max-height:56vh; border-radius:18px; padding:8px } html:root body .hs-row{ padding:8px 6px } }

/* ================= Forsiden: mer levende og overbevisende ================= */
/* Større slides på PC (fire store kort i stedet for fem små) */
@media (min-width:900px){
  html:root body[data-view=home] #heroSwiper{ height:min(62vh, 520px) !important; min-height:380px !important }
  html:root body .g-slide .slide-body h3{ font-size:clamp(22px, 1.9vw, 30px) !important }
  html:root body .g-slide .slide-place b{ font-size:14px !important }
}
/* Sterkere reservebilde når arrangøren ikke har bilde: kategorifarget gradient + stort ikon */
html:root body .slide-art{ background:
    radial-gradient(90% 70% at 85% 8%, color-mix(in srgb, var(--c) 70%, #fff 8%) 0%, transparent 62%),
    radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--c) 55%, #0c0a1f) 0%, transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--c) 88%, #120c2c) 0%, color-mix(in srgb, var(--c) 38%, #0c0a1f) 100%) !important }
html:root body .slide-art > .ico, html:root body .slide-art > svg.ico{ color:rgba(255,255,255,.26) !important; width:66% !important; height:66% !important; stroke-width:1.4 !important; filter:drop-shadow(0 6px 24px rgba(0,0,0,.25)) }
html:root body .g-slide .slide-art .art-venue, html:root body .card-media .slide-art .art-venue, html:root body .row-media .slide-art .art-venue{ display:none !important }
/* Statusmerke på slides: «Få billetter», «Gratis», «Premiere», «Starter om 40 min» */
html:root body .slide-flag{ position:absolute; z-index:3; top:52px; left:14px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.01em;
  background:#fff; color:#160f2e; box-shadow:0 6px 18px -6px rgba(0,0,0,.45); pointer-events:none }
html:root body .slide-flag.flag-free{ background:#3ddc84; color:#06261a }
html:root body .slide-flag.flag-few, html:root body .slide-flag.flag-sold{ background:#ffb23e; color:#2b1600 }
html:root body .slide-flag.flag-premiere{ background:linear-gradient(100deg,#f078a4,#9b82e8); color:#fff }
html:root body .slide-flag.flag-soon{ background:#ff5a5f; color:#fff }

/* «I kveld: 14 ting · 3 gratis · 2 for barn» + hurtigvalg */
html:root body .home-pulse{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:14px auto 6px; padding:0 16px; max-width:900px; text-align:center }
html:root body .pulse-line{ margin:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 8px; font-size:16px; color:var(--ink) }
html:root body .pulse-line b{ font-weight:800 }
html:root body .pulse-line i{ font-style:normal; color:var(--muted) }
html:root body .pulse-line button{ all:unset; cursor:pointer; font-weight:700; color:var(--ks-accent-text, #b9a3ff); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent) }
html:root body .pulse-line button:hover, html:root body .pulse-line button:focus-visible{ text-decoration-color:currentColor }
html:root body .pulse-dot{ width:9px; height:9px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 0 #3ddc8488; animation:hsPulse 2.2s ease-out infinite; margin-right:2px }
@keyframes hsPulse{ 0%{ box-shadow:0 0 0 0 #3ddc8477 } 70%{ box-shadow:0 0 0 10px #3ddc8400 } 100%{ box-shadow:0 0 0 0 #3ddc8400 } }
@media (prefers-reduced-motion:reduce){ html:root body .pulse-dot{ animation:none } }
html:root body .pulse-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
html:root body .pulse-chip{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 8px 0 16px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 80%, transparent); font-weight:700; font-size:14.5px; color:var(--ink); transition:border-color .15s, background .15s }
html:root body .pulse-chip small{ min-width:22px; height:26px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; font-size:12px; font-weight:800; background:var(--soft); color:var(--ink) }
html:root body .pulse-chip:hover, html:root body .pulse-chip:focus-visible{ border-color:var(--ks-accent-text, #b9a3ff); background:var(--accent-soft, color-mix(in srgb, #7a4dff 18%, transparent)) }
@media (max-width:560px){
  html:root body .pulse-chips{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; width:100%; padding-bottom:4px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent) }
  html:root body .pulse-chips::-webkit-scrollbar{ display:none }
  html:root body .pulse-chip{ flex:0 0 auto; height:38px; font-size:14px }
  html:root body .pulse-line{ font-size:15px }
}

/* Temarader */
html:root body .home-rows{ max-width:1400px; margin:18px auto 8px; padding:0 max(16px, calc((100% - 1400px)/2)) }
html:root body .home-row{ margin:22px 0 6px }
html:root body .home-row header{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 12px }
html:root body .home-row h2{ margin:0; font-size:clamp(22px, 2.2vw, 30px); letter-spacing:-.02em }
html:root body .home-row header small{ color:var(--muted); font-size:13.5px }
html:root body .row-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto }
html:root body .row-nav{ all:unset; cursor:pointer; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); font-size:20px; line-height:1; color:var(--ink) }
html:root body .row-all{ all:unset; cursor:pointer; height:36px; padding:0 14px; border-radius:999px; background:var(--soft); font-weight:700; font-size:13.5px; color:var(--ink); display:inline-flex; align-items:center }
html:root body .row-nav:hover, html:root body .row-all:hover{ outline:2px solid var(--ks-accent-text, #b9a3ff) }
html:root body .row-scroll{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(200px, 22vw, 290px); gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 12px; overscroll-behavior-x:contain; scrollbar-width:thin }
html:root body .row-scroll{ cursor:grab; user-select:none }
html:root body .row-scroll.is-dragging{ cursor:grabbing; scroll-snap-type:none }
html:root body .row-card{ all:unset; box-sizing:border-box; cursor:pointer; scroll-snap-align:start; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:var(--surface); border:1px solid var(--line); transition:transform .15s, border-color .15s }
html:root body .row-card:hover, html:root body .row-card:focus-visible{ transform:translateY(-2px); border-color:var(--ks-accent-text, #b9a3ff); outline:none }
html:root body .row-media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; isolation:isolate; --c:#7a4dff }
html:root body .row-media .slide-art, html:root body .row-media .slide-img{ transform:none !important; left:0 !important; right:0 !important; width:100% !important }
html:root body .row-media > .bubble{ position:absolute; left:10px; bottom:10px; z-index:2; width:32px; height:32px; background:rgba(255,255,255,.92) !important }
html:root body .row-flag{ position:absolute; top:10px; left:10px; z-index:2; font-style:normal; font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:999px; background:#3ddc84; color:#06261a }
html:root body .row-body{ display:flex; flex-direction:column; gap:3px; padding:11px 13px 13px; min-width:0 }
html:root body .row-when{ font-size:12.5px; font-weight:700; color:var(--ks-accent-text, #b9a3ff) }
html:root body .home-row-startingSoon .row-when{
  display:inline-flex;
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-ink);
}
html:root body .row-when.is-imminent,
html:root body .home-row-startingSoon .row-when.is-imminent{
  display:inline-flex;
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  background:color-mix(in srgb,#ff8a3d 20%,var(--surface));
  color:color-mix(in srgb,#ff7a24 82%,var(--ink));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#ff8a3d 34%,transparent);
}
html:root body .row-body strong{ font-size:15.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink) }
html:root body .row-where{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:560px){ html:root body .row-scroll{ grid-auto-columns:72vw } html:root body .row-nav{ display:none } html:root body .home-row header small{ display:none } }

/* Kart-teaser */
html:root body .map-teaser{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:block; width:100%; height:200px; margin:26px 0 8px; border-radius:22px; overflow:hidden; color:var(--ink);
  background:radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, #7a4dff 30%, transparent), transparent 60%), var(--surface); border:1px solid var(--line) }
html:root body .map-teaser svg{ position:absolute; inset:0; width:100%; height:100%; color:var(--ink) }
html:root body .mt-copy{ position:absolute; left:20px; bottom:18px; display:flex; flex-direction:column; gap:3px; padding:12px 16px; border-radius:16px; background:color-mix(in srgb, var(--bg, #120f2a) 78%, transparent); backdrop-filter:blur(6px) }
html:root body .mt-copy small{ font-size:12.5px; color:var(--muted); font-weight:700 }
html:root body .mt-copy b{ font-size:18px }
html:root body .mt-go{ font-size:13.5px; font-weight:700; color:var(--ks-accent-text, #b9a3ff) }
html:root body .map-teaser:hover, html:root body .map-teaser:focus-visible{ border-color:var(--ks-accent-text, #b9a3ff); outline:none }

/* Tillitslinje */
html:root body .home-trust{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; margin:26px auto 4px; padding:0 16px; font-size:14px; color:var(--muted); text-align:center }
html:root body .home-trust b{ color:var(--ink) }
html:root body .trust-dot{ width:8px; height:8px; border-radius:50%; background:#3ddc84 }

/* Forsidens rekkefølge (enkel kolonne): overskrift → søk → «i kveld» → karusell → temarader → alle → tillit */
html:root body[data-view=home] #homeView#homeView{ display:flex !important; flex-direction:column !important; align-items:stretch !important; grid-template-areas:none !important }
html:root body[data-view=home] #homeView#homeView > .hero, html:root body[data-view=home] #homeView#homeView > #homeRows, html:root body[data-view=home] #homeView#homeView > .event-feed{ width:100% !important; max-width:100% !important; box-sizing:border-box }
html:root body[data-view=home] #homeView#homeView > *{ grid-area:auto !important; width:auto }
html:root body[data-view=home] #homeView#homeView > .home-hello{ order:1 !important }
html:root body[data-view=home] #homeView#homeView > .home-discovery{ order:2 !important }
html:root body[data-view=home] #homeView#homeView > #homePulse{ order:3 !important }
html:root body[data-view=home] #homeView#homeView > .hero{ order:4 !important }
html:root body[data-view=home] #homeView#homeView > #homeRows{ order:5 !important }
html:root body[data-view=home] #homeView#homeView > .event-feed{ order:6 !important }
html:root body[data-view=home] #homeView#homeView > #homeStatus{ order:7 !important }
html:root body[data-view=home] #homeView#homeView > #homeTrust{ order:8 !important }
html:root body[data-view=home] #homeView#homeView > .home-about{ order:9 !important }
/* Karusellen får plass til hele kortet (tittel og sted nederst) */
html.web-build:root body.pc-web .hero, html:root body[data-view=home] .hero{ height:auto !important; min-height:0 !important; overflow:visible !important }
html:root body[data-view=home] #heroSwiper{ overflow:hidden !important }
html:root body[data-view=home] .hero{ display:flow-root !important }
html:root body[data-view=home] .hero > #heroSwiper{ position:relative !important; top:auto !important; margin-bottom:0 !important }
html:root body .home-pulse{ width:100%; box-sizing:border-box; min-width:0 }
html:root body .pulse-chips{ max-width:100%; min-width:0 }
@media (max-width:560px){
  html:root body .map-teaser{ height:180px }
  html:root body .mt-copy{ left:12px; right:auto; top:12px; bottom:auto; padding:10px 12px }
  html:root body .mt-copy b{ font-size:16px }
}
/* Kart-teaser: ekte minikart (samme kartfliser og nåler som Kart) */
html:root body .map-teaser{ height:240px !important; background:var(--surface) !important }
html:root body .map-teaser .mt-map{ position:absolute; inset:0; z-index:0; background:var(--soft) }
html:root body .map-teaser .mt-map .leaflet-container, html:root body .map-teaser .mt-map{ cursor:pointer !important }
html:root body .map-teaser .mt-copy{ z-index:2 }
html:root body .map-teaser::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, color-mix(in srgb, var(--bg, #fff) 55%, transparent), transparent 55%) }
@media (max-width:560px){ html:root body .map-teaser{ height:200px !important } }
/* «Nullstill kart» – flytende knapp nederst på kartet når noe er filtrert */
html:root body #mapView .map-reset{ position:absolute; z-index:1200; left:50%; transform:translateX(-50%); bottom:calc(var(--tabbar-h, 64px) + 150px); display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px 0 14px; border:0; border-radius:999px; cursor:pointer;
  background:var(--accent, #7a4dff); color:#fff; font:700 14.5px/1 inherit; box-shadow:0 12px 28px -10px rgba(40,10,120,.55) }
html:root body #mapView .map-reset span{ font-size:18px; line-height:1 }
html:root body #mapView .map-reset[hidden]{ display:none !important }
@media (min-width:900px){ html:root body #mapView .map-reset{ bottom:32px } }
/* Søkefeltet og nedtrekkslisten skal alltid ligge over karusellen */
html:root body[data-view=home] #homeView#homeView > .home-discovery{ position:relative !important; z-index:300 !important }
html:root body[data-view=home] #homeView#homeView > #homePulse{ position:relative; z-index:2 }
html:root body[data-view=home] #homeView#homeView > .hero{ position:relative; z-index:1 }
html:root body .home-suggest{ z-index:310 !important }
/* «Har vi ikke deg på kartet?» – rolig lenke oppe til venstre der det er ledig plass (plassert av placeMapJoin) */
/* Samme rolige lenke øverst til venstre på forsiden */
@media (max-width:899px){
  html:root body #mapView .map-reset{ left:auto !important; right:10px !important; transform:none !important; bottom:auto !important; top:96px !important; height:36px; padding:0 12px 0 10px; font-size:13px; gap:6px }
  html:root body #mapView .map-reset span{ font-size:16px }
}

/* ================= Aktiviteter: kompakte valg ================= */
/* «Populært nå» */
html:root body #filterDialog .interest-popular{ margin:4px 0 22px }
html:root body #filterDialog .interest-popular h4{ margin:0 0 10px; font-size:15px; font-weight:800; letter-spacing:.01em; color:var(--muted); text-transform:none }
html:root body #filterDialog .interest-pop-row{ display:flex; flex-wrap:wrap; gap:10px }
html:root body #filterDialog .interest-pop{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 8px 0 10px; border-radius:16px;
  background:color-mix(in srgb, var(--group-c) 14%, var(--surface)); border:1.5px solid color-mix(in srgb, var(--group-c) 34%, transparent); color:var(--ink); font-size:15px }
html:root body #filterDialog .interest-pop .interest-art{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--group-c) 24%, transparent); color:color-mix(in srgb, var(--group-c) 70%, #000) }
html[data-theme=dark]:root body #filterDialog .interest-pop .interest-art{ color:color-mix(in srgb, var(--group-c) 45%, #fff) }
html:root body #filterDialog .interest-pop .interest-art svg{ width:17px; height:17px }
html:root body #filterDialog .interest-pop b{ font-weight:700 }
html:root body #filterDialog .interest-pop small{ min-width:26px; height:26px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; font-size:12.5px; font-weight:800; background:var(--surface); color:var(--ink) }
html:root body #filterDialog .interest-pop[aria-pressed=true]{ background:var(--group-c); border-color:var(--group-c); color:#fff }
html:root body #filterDialog .interest-pop[aria-pressed=true] .interest-art{ background:rgba(255,255,255,.22); color:#fff }

/* Grupper: valg som piller som brytes over linjer i stedet for store kort */
html:root body #filterDialog#filterDialog .interest-grid{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; grid-template-columns:none !important }
html:root body #filterDialog#filterDialog .interest-tile{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex !important; flex-direction:row !important; align-items:center; gap:8px; width:auto !important; min-height:0 !important; height:42px; padding:0 6px 0 8px !important; border-radius:14px !important;
  background:var(--surface) !important; border:1px solid color-mix(in srgb, var(--group-c) 26%, var(--line)) !important; box-shadow:none !important; color:var(--ink); font-size:14.5px; transition:background .15s, border-color .15s }
html:root body #filterDialog#filterDialog .interest-tile::before, html:root body #filterDialog#filterDialog .interest-tile::after{ display:none !important }
html:root body #filterDialog#filterDialog .interest-tile .interest-art{ position:static !important; width:28px !important; height:28px !important; border-radius:9px !important; display:grid !important; place-items:center; margin:0 !important; background:color-mix(in srgb, var(--group-c) 16%, transparent) !important; color:color-mix(in srgb, var(--group-c) 72%, #000) !important }
html[data-theme=dark]:root body #filterDialog#filterDialog .interest-tile .interest-art{ color:color-mix(in srgb, var(--group-c) 45%, #fff) !important }
html:root body #filterDialog#filterDialog .interest-tile .interest-art svg{ width:16px !important; height:16px !important }
html:root body #filterDialog#filterDialog .interest-tile strong{ font-size:14.5px !important; font-weight:650 !important; margin:0 !important; white-space:nowrap }
html:root body #filterDialog#filterDialog .interest-tile .interest-count{ grid-column:auto !important; margin:0 !important; min-width:24px; height:24px; padding:0 7px; border-radius:999px; display:inline-grid !important; place-items:center; font-size:12px !important; font-weight:800 !important; background:var(--soft) !important; color:var(--ink) !important }
html:root body #filterDialog#filterDialog .interest-tile:hover{ border-color:var(--group-c) !important; background:color-mix(in srgb, var(--group-c) 7%, var(--surface)) !important }
html:root body #filterDialog#filterDialog .interest-tile[aria-pressed=true]{ background:var(--group-c) !important; border-color:var(--group-c) !important; color:#fff !important }
html:root body #filterDialog#filterDialog .interest-tile[aria-pressed=true] .interest-art{ background:rgba(255,255,255,.22) !important; color:#fff !important }
html:root body #filterDialog#filterDialog .interest-tile[aria-pressed=true] strong{ color:#fff !important }
html:root body #filterDialog#filterDialog .interest-tile[aria-pressed=true] .interest-count{ background:rgba(255,255,255,.25) !important; color:#fff !important }
html:root body #filterDialog#filterDialog .interest-tile.is-quiet{ opacity:.6 }
/* Tomme valg skjules til man ber om dem */
html:root body #filterDialog#filterDialog .interest-grid:not(.show-quiet) .interest-tile.is-hidden-quiet{ display:none !important }
html:root body #filterDialog .interest-more{ all:unset; cursor:pointer; height:42px; padding:0 12px; border-radius:14px; font-size:13px; font-weight:600; color:var(--muted); border:1px dashed var(--line) }
html:root body #filterDialog .interest-more:hover{ color:var(--ink); border-color:var(--group-c) }
/* Gruppeoverskriftene litt roligere og tettere */
html:root body #filterDialog#filterDialog .interest-group{ margin:0 0 22px !important }
html:root body #filterDialog#filterDialog .act-group-head{ margin-bottom:10px !important }
html:root body #filterDialog#filterDialog .act-group-orb{ width:34px !important; height:34px !important; border-radius:11px !important }
html:root body #filterDialog#filterDialog .act-group-orb svg{ width:18px !important; height:18px !important }
html:root body #filterDialog#filterDialog .act-group-head h4{ font-size:19px !important }
@media (max-width:560px){
  html:root body #filterDialog .interest-pop{ height:44px; font-size:14px; gap:8px }
  html:root body #filterDialog#filterDialog .interest-tile{ height:40px; font-size:14px }
}
/* Hopp-til-gruppe-pillene under søket fjernet (rot) */
html:root body #filterDialog #actJump, html:root body #filterDialog .act-jump{ display:none !important }
html:root body #filterDialog#filterDialog .interest-tile > *{ position:static !important; inset:auto !important; transform:none !important; margin:0 !important; align-self:center !important }
html:root body #filterDialog#filterDialog .interest-tile strong{ order:1 } html:root body #filterDialog#filterDialog .interest-tile .interest-art{ order:0 } html:root body #filterDialog#filterDialog .interest-tile .interest-count{ order:2 }
@media (max-width:560px){
  html:root body #filterDialog .interest-pop-row{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px 4px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent) }
  html:root body #filterDialog .interest-pop-row::-webkit-scrollbar{ display:none }
  html:root body #filterDialog .interest-pop{ flex:0 0 auto }
  html:root body #filterDialog#filterDialog .interest-grid{ gap:7px !important }
}
html:root body #filterDialog#filterDialog #interestGroups{ grid-template-columns:minmax(0,1fr) !important; min-width:0 }
html:root body #filterDialog#filterDialog #interestGroups > *{ min-width:0; max-width:100% }

/* ---------- Lesbarhet på kort + større logo og Beta ---------- */
/* Temarader, «Alle arrangementer» og søkekort: større skrift (PC litt større enn mobil) */
html:root body .row-when{ font-size:14px !important }
html:root body .row-body strong{ font-size:18px !important; line-height:1.25 !important }
html:root body .row-where{ font-size:14.5px !important }
html:root body .row-body{ gap:4px !important; padding:13px 15px 15px !important }
html:root body .card-body small.when, html:root body .card-body .when{ font-size:14px !important }
html:root body .card-body strong{ font-size:17.5px !important; line-height:1.25 !important }
html:root body .card-body > small:last-child{ font-size:14px !important }
html:root body .home-search-copy small{ font-size:13.5px !important } html:root body .home-search-copy strong{ font-size:17px !important } html:root body .home-search-copy em{ font-size:14px !important }
html:root body .nearby-info h4{ font-size:16.5px !important } html:root body .nearby-info p{ font-size:14px !important }
html:root body .pop-item-text strong{ font-size:16px !important } html:root body .pop-item-text small{ font-size:13.5px !important }
html:root body .hs-txt b{ font-size:16px !important } html:root body .hs-txt small{ font-size:13.5px !important }
@media (max-width:560px){
  html:root body .row-when{ font-size:13.5px !important }
  html:root body .row-body strong{ font-size:17px !important }
  html:root body .row-where{ font-size:14px !important }
  html:root body .card-body strong{ font-size:16.5px !important }
}
/* Større HvaSkjer-logo og tydeligere Beta */
html:root body .app-header .brand-icon{ width:44px !important; height:44px !important; border-radius:13px !important }
@media (max-width:560px){
  html:root body .app-header .brand-icon{ width:40px !important; height:40px !important; border-radius:12px !important }
}

/* ---------- Bytt sted: myk retur til forsiden ---------- */
html:root body #homeView.hs-arrive .home-hello, html:root body #homeView.hs-arrive .hero, html:root body #homeView.hs-arrive #homeRows{ animation:hsArrive .6s cubic-bezier(.2,.8,.2,1) both }
html:root body #homeView.hs-arrive .hero{ animation-delay:.06s } html:root body #homeView.hs-arrive #homeRows{ animation-delay:.12s }
@keyframes hsArrive{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---------- Lokale perler som lever: status, bilde, hva skjer, sesong ---------- */
html:root body .gem-popup.gem-live{ display:flex; flex-direction:column; gap:2px }
html:root body .gem-live .gem-img{ margin:-14px -20px 8px; height:140px; overflow:hidden; border-radius:14px 14px 0 0; background:color-mix(in srgb,var(--ink) 6%,transparent) }
html:root body .gem-live .gem-img img{ width:100%; height:100%; object-fit:cover; display:block }
html:root body .gem-live h3 a{ color:inherit !important; text-decoration:none }
html:root body .gem-live h3 a i{ font-style:normal; font-size:.75em; opacity:.6 }
html:root body .gem-status-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 2px }
html:root body .gem-status, html:root body .gem-flag, html:root body .gem-st{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:12.5px; font-weight:800; font-style:normal; background:color-mix(in srgb,var(--ink) 8%,transparent); color:var(--ink) }
html:root body .gem-status::before, html:root body .gem-flag::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.8 }
html:root body .s-open, html:root body .s-always{ background:#dff5e7 !important; color:#11743a !important }
html:root body .s-closing{ background:#fff1d6 !important; color:#8a5300 !important }
html:root body .s-closed, html:root body .s-season{ background:#eceef3 !important; color:#4b5163 !important }
html:root body .s-gone{ background:#fde4e4 !important; color:#a12828 !important }
html:root body .s-unknown{ background:color-mix(in srgb,var(--ink) 6%,transparent) !important; color:var(--muted) !important }
html:root body .gem-st{ padding:1px 7px; font-size:11.5px }
html[data-theme=dark] body .s-open, html[data-theme=dark] body .s-always{ background:#163d27 !important; color:#8de3ad !important }
html[data-theme=dark] body .s-closing{ background:#4a3410 !important; color:#ffd28a !important }
html[data-theme=dark] body .s-closed, html[data-theme=dark] body .s-season{ background:#2a2e38 !important; color:#c3c8d6 !important }
html:root body .gem-dist, html:root body .gem-fans{ font-size:12.5px; font-weight:700; color:var(--muted) }
html:root body .gem-offers{ margin:6px 0 !important; padding:7px 10px; border-radius:10px; background:color-mix(in srgb,#e8a84c 16%,transparent); font-size:13.5px }
html:root body .gem-note{ font-size:14px }
html:root body .gem-events{ display:flex; flex-direction:column; gap:4px; margin:6px 0; padding:8px; border-radius:12px; background:color-mix(in srgb,#8f6bff 9%,transparent) }
html:root body .gem-events > b{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#6b47e6 }
html[data-theme=dark] body .gem-events > b{ color:#b9a4ff }
html:root body .gem-events button{ display:flex; gap:8px; align-items:baseline; text-align:left; border:0; background:var(--surface,#fff); color:var(--ink); border-radius:9px; padding:7px 9px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer }
html:root body .gem-events button span{ flex:none; font-size:12px; font-weight:800; color:#6b47e6 }
html:root body .gem-events .gem-ev-all{ justify-content:center; background:transparent; color:#6b47e6 }
html:root body .gem-more{ margin:6px 0; font-size:13.5px }
html:root body .gem-more summary{ cursor:pointer; font-weight:800; padding:6px 0 }
html:root body .gem-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin:4px 0 6px }
html:root body .gem-week div{ text-align:center; padding:4px 2px; border-radius:8px; background:color-mix(in srgb,var(--ink) 5%,transparent) }
html:root body .gem-week div.today{ outline:2px solid #8f6bff }
html:root body .gem-week dt{ font-size:11px; font-weight:800; text-transform:capitalize }
html:root body .gem-week dd{ margin:0; font-size:11px; line-height:1.25 }
html:root body .gem-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:2px }
html:root body .gem-foot small{ font-size:11.5px; color:var(--muted) }
html:root body .gem-report-btn{ border:0; background:none; color:var(--muted); font:inherit; font-size:12px; font-weight:800; text-decoration:underline; cursor:pointer; padding:4px 0 }
html:root body .gem-report textarea{ width:100%; box-sizing:border-box; border-radius:10px; border:1px solid var(--border); padding:8px; font:inherit; font-size:14px; background:var(--surface,#fff); color:var(--ink) }
html:root body .gem-report div{ display:flex; justify-content:flex-end; gap:6px; margin-top:6px }
html:root body .gem-report button{ border:0; border-radius:9px; padding:7px 12px; font:inherit; font-weight:800; cursor:pointer; background:color-mix(in srgb,var(--ink) 8%,transparent); color:var(--ink) }
html:root body .gem-report button[type=submit]{ background:#6b47e6; color:#fff }
html:root body .gem-report-ok{ font-weight:800; color:#11743a !important }
/* pins: open = green dot, closed/out of season = faded, events this week = count badge */
html:root body .gem-pin-emoji{ transform:rotate(-45deg); font-size:16px; line-height:1 }
html:root body .gem-pin.st-closed, html:root body .gem-pin.st-season, html:root body .gem-pin.st-gone{ opacity:.55; filter:grayscale(.75) drop-shadow(0 4px 6px rgba(0,0,0,.18)) }
html:root body .gem-pin-open{ position:absolute; left:-2px; top:-2px; width:12px; height:12px; border-radius:50%; background:#22b45a; border:2px solid #fff; box-shadow:0 0 0 3px rgba(34,180,90,.25) }
html:root body .gem-pin-badge.ev{ background:#6b47e6; color:#fff; font-size:10px; font-weight:900; width:18px; height:18px }
/* home row */
html:root body .gem-card .gem-media{ display:grid; place-items:center; background:linear-gradient(150deg,color-mix(in srgb,var(--g) 30%,#fff),color-mix(in srgb,var(--g) 70%,#2b1f55)) }
html:root body .gem-card .gem-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
html:root body .gem-card .gem-media-ico{ font-size:40px }
html:root body .gem-card .gem-flag{ position:absolute; left:10px; bottom:10px; padding:3px 9px; font-size:12px }
html:root body .gem-card .gem-daily{ position:absolute; left:10px; top:10px; background:#6b47e6 !important; color:#fff !important }
html:root body .gem-row h2{ display:flex; align-items:center; gap:6px }
/* «Om stedet» i stedskortet – ett sted = én pin */
html:root body .pop-gem{ margin:10px 0 4px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb,#e8a84c 11%,transparent); border:1px solid color-mix(in srgb,#e8a84c 26%,transparent) }
html:root body .pop-gem-top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px }
html:root body .pop-gem-kicker{ font-size:11.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:color-mix(in srgb,#c07a12 85%,var(--ink)) }
html[data-theme=dark] body .pop-gem-kicker{ color:#f2c27a }
html:root body .pop-gem-note{ margin:6px 0 2px !important; font-size:14px; line-height:1.4; color:var(--ink) }
html:root body .pop-gem .gem-more{ margin:4px 0 0 }
html:root body .pop-gem .gem-foot{ margin-top:4px }
html:root body .bpin-place{ position:absolute; left:-6px; top:-6px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10px; color:#fff; background:#e8a84c; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.2); z-index:3 }

/* ================= Stedssiden + kortet nederst i kartet ================= */
html:root body .place-peek{ position:absolute; z-index:850; left:12px; right:12px; bottom:calc(var(--tabbar-h, 84px) + 54px); max-width:460px; margin:0 auto;
  background:var(--surface,#fff); color:var(--ink); border-radius:22px; padding:10px 14px 14px; box-shadow:0 18px 50px -12px rgba(30,20,70,.35), 0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent);
  transform:translateY(24px); opacity:0; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s }
html:root body .place-peek.show{ transform:none; opacity:1 }
@media (min-width:768px){ html:root body .place-peek{ left:auto; right:24px; bottom:28px; width:400px } }
html:root body .pp-grab{ display:block; width:38px; height:4px; border-radius:4px; margin:0 auto 8px; background:color-mix(in srgb,var(--ink) 18%,transparent) }
html:root body .pp-close{ position:absolute; right:10px; top:10px; width:30px; height:30px; border-radius:50%; border:0; background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink); font-size:18px; cursor:pointer }
html:root body .pp-head{ display:flex; gap:12px; align-items:center; cursor:pointer; padding-right:34px }
html:root body .pp-img{ position:relative; flex:none; width:58px; height:58px; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(150deg,#efe9ff,#d9cbff) }
html:root body .pp-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
html:root body .pp-img i{ font-style:normal; font-size:26px }
html:root body .pp-copy{ display:flex; flex-direction:column; gap:3px; min-width:0 }
html:root body .pp-copy small{ font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html:root body .pp-copy strong{ font-size:18px; line-height:1.2 }
html:root body .pp-copy .gem-status{ align-self:flex-start; font-size:12px; padding:2px 8px }
html:root body .pp-next{ display:flex; flex-direction:column; gap:5px; margin:10px 0 0 }
html:root body .pp-next button{ display:flex; gap:10px; align-items:baseline; text-align:left; border:0; border-radius:12px; padding:8px 10px; background:color-mix(in srgb,#8f6bff 8%,transparent); color:var(--ink); font:inherit; cursor:pointer }
html:root body .pp-next span{ flex:none; font-size:12.5px; font-weight:800; color:#6b47e6 }
html:root body .pp-next b{ font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html:root body .pp-note{ margin:8px 0 0; font-size:14px; color:var(--muted) }
html:root body .pp-open{ width:100%; margin-top:10px; min-height:44px; border:0; border-radius:14px; background:#6b47e6; color:#fff; font:inherit; font-size:15px; font-weight:800; cursor:pointer }
html[data-theme=dark] body .pp-next span{ color:#b9a4ff }

html:root body dialog.place-dialog{ padding:0; border:0; margin:0; width:100%; max-width:100%; height:100%; max-height:100%; background:var(--bg,#f6f5fb); color:var(--ink); overflow-y:auto; overscroll-behavior:contain }
html:root body dialog.place-dialog::backdrop{ background:rgba(20,14,40,.35) }
html:root body dialog.place-dialog[open]{ animation:placeIn .32s cubic-bezier(.2,.8,.2,1) }
@keyframes placeIn{ from{ transform:translateY(40px); opacity:0 } to{ transform:none; opacity:1 } }
@media (min-width:768px){
  html:root body dialog.place-dialog{ left:auto; right:0; top:0; width:min(480px,100%); box-shadow:-20px 0 60px -20px rgba(30,20,70,.35) }
  @keyframes placeIn{ from{ transform:translateX(60px); opacity:0 } to{ transform:none; opacity:1 } }
}
html:root body .place-hero{ position:relative; height:210px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(150deg,color-mix(in srgb,var(--g) 35%,#fff),color-mix(in srgb,var(--g) 75%,#2b1f55)) }
html:root body .place-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
html:root body .place-hero-ico{ font-size:60px }
html:root body .place-close, html:root body .place-share{ position:absolute; top:max(12px, env(safe-area-inset-top)); border:0; cursor:pointer; background:rgba(255,255,255,.92); color:#1b1530; box-shadow:0 4px 14px rgba(0,0,0,.18); font:inherit; font-weight:800 }
html:root body .place-close{ right:12px; width:40px; height:40px; border-radius:50%; font-size:22px }
html:root body .place-share{ left:12px; height:40px; padding:0 14px; border-radius:999px; font-size:14px }
html:root body .place-body{ padding:16px 18px 40px; display:flex; flex-direction:column; gap:10px }
html:root body .place-kicker{ font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:color-mix(in srgb,#c07a12 85%,var(--ink)) }
html:root body .place-body h2{ margin:0; font-size:27px; line-height:1.15 }
html:root body .place-badges{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
html:root body .place-count{ padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:800; background:color-mix(in srgb,#8f6bff 14%,transparent); color:#5b37d6 }
html:root body .place-actions{ display:flex; flex-wrap:wrap; gap:8px }
html:root body .place-actions a, html:root body .place-actions .follow-btn{ flex:1 1 auto; min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 14px; border-radius:12px; font-weight:800; font-size:14px; text-decoration:none }
html:root body .place-actions a{ background:var(--ink); color:var(--on-ink, #fff) !important }
html:root body .place-sec{ margin-top:8px }
html:root body .place-sec h3{ margin:0 0 8px; font-size:18px; display:flex; align-items:center; gap:8px }
html:root body .place-sec h3 small{ font-size:13px; padding:1px 8px; border-radius:999px; background:color-mix(in srgb,var(--ink) 8%,transparent) }
html:root body .place-day{ margin:10px 0 4px; font-size:12.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:#6b47e6 }
html[data-theme=dark] body .place-day{ color:#b9a4ff }
html:root body .place-ev{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; border:0; border-radius:14px; padding:10px 12px; margin:0 0 6px; background:var(--surface,#fff); color:var(--ink); font:inherit; cursor:pointer; box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent) }
html:root body .place-ev-time{ flex:none; min-width:50px; font-size:14px; font-weight:900; color:#6b47e6 }
html:root body .place-ev-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }
html:root body .place-ev-copy strong{ font-size:16px; line-height:1.25 }
html:root body .place-ev-copy small{ font-size:13px; color:var(--muted) }
html:root body .place-ev > i{ font-style:normal; font-size:20px; color:var(--muted) }
html:root body .place-more{ width:100%; min-height:42px; border:0; border-radius:12px; background:color-mix(in srgb,#8f6bff 12%,transparent); color:#5b37d6; font:inherit; font-weight:800; cursor:pointer }
html:root body .place-empty{ margin:0; color:var(--muted); font-size:14.5px }
html:root body .place-note{ margin:0 0 8px; font-size:15.5px; line-height:1.5 }
html:root body .place-hours{ padding:10px 12px; border-radius:14px; background:var(--surface,#fff) }
html:root body .place-hours > b{ display:block; margin-bottom:6px; font-size:14.5px }
html:root body .place-hours p{ margin:6px 0 0; font-size:13.5px; color:var(--muted) }
html:root body .place-addr{ margin:10px 0; font-size:14px; color:var(--muted) }
html:root body .place-mini{ position:relative; height:150px; border-radius:16px; overflow:hidden; cursor:pointer; background:#e7e4f2 }
html:root body .place-mini-map{ position:absolute; inset:0 }
html:root body .place-mini > span{ position:absolute; right:10px; bottom:10px; z-index:500; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.95); color:#1b1530; font-size:13px; font-weight:800 }
html:root body .place-mini-pin span{ display:block; width:22px; height:22px; border-radius:50%; background:#6b47e6; border:3px solid #fff; box-shadow:0 0 0 6px rgba(107,71,230,.25) }
html:root body .place-foot{ margin-top:6px }
html:root body .detail-venue-link{ border:0; background:none; padding:0; font:inherit; font-weight:800; color:#6b47e6; cursor:pointer; text-align:left; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
html[data-theme=dark] body .detail-venue-link{ color:#b9a4ff }
html:root body .detail-venue-link i{ font-style:normal; text-decoration:none }
@media (min-width:768px){ html:root body dialog.place-dialog{ inset:0 0 0 auto !important; height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; margin:0 !important } }
@media (max-width:767px){ html:root body dialog.place-dialog{ inset:0 !important; width:100vw !important; height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; margin:0 !important } }
html:root body dialog.place-dialog::backdrop{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(20,14,40,.22) !important }
/* stedssiden må kunne scrolles (globale dialog-regler setter overflow:hidden) */
html:root body dialog#placeDialog.place-dialog{ overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; touch-action:pan-y !important; overscroll-behavior:contain }
html:root body dialog#placeDialog .place-hero{ background-color:#2b1f55 }
html:root body dialog#placeDialog .place-hero img{ object-fit:cover; background:#fff }
html:root body .gem-card .gem-media img, html:root body .pp-img img{ background:#fff }
/* Intro: bare logoen + «i Larvik» i logoens lilla (ikke «HvaSkjer» to ganger) */
html:root body #brandIntro .bi-where, html:root body #brandIntro .bi-where .i, html:root body #brandIntro .bi-where em, html:root body #brandIntro .bi-where .q{
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:#601ffb !important; -webkit-text-fill-color:#601ffb !important }
html:root body #brandIntro .bi-where .i{ font-weight:700 !important; opacity:.85 }
html:root[data-theme=dark] body #brandIntro .bi-where, html:root[data-theme=dark] body #brandIntro .bi-where *{ color:#a98bff !important; -webkit-text-fill-color:#a98bff !important }
/* lange arrangementskort må kunne scrolles på mobil */
html:root body dialog#detailDialog{ overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y }
/* Slides litt mindre (skarpere bilder), men fortsatt større enn kortene under */
@media (min-width:900px){ html:root body[data-view=home] #heroSwiper{ height:min(52vh, 430px) !important; min-height:340px !important } }
@media (max-width:899px){ html:root body[data-view=home] #heroSwiper{ height:min(46vh, 380px) !important; min-height:330px !important } }
/* Hover-boble i kartet (bare mus, bare når pinnen står alene) */
html:root body .place-tip{ position:absolute; z-index:820; width:280px; transform:translateY(-100%) translateY(6px); opacity:0; pointer-events:none; display:flex; gap:10px; padding:10px; border-radius:16px; background:var(--surface,#fff); color:var(--ink); box-shadow:0 16px 40px -12px rgba(30,20,70,.35), 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent); transition:opacity .16s, transform .16s }
html:root body .place-tip.show{ opacity:1; transform:translateY(-100%) }
html:root body .place-tip.below{ transform:translateY(-6px) } html:root body .place-tip.below.show{ transform:none }
html:root body .pt-img{ position:relative; flex:none; width:72px; height:72px; border-radius:12px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(150deg,#efe9ff,#d9cbff) }
html:root body .pt-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff }
html:root body .pt-img i{ font-style:normal; font-size:28px }
html:root body .pt-body{ display:flex; flex-direction:column; gap:3px; min-width:0 }
html:root body .pt-body strong{ font-size:15px; line-height:1.2 }
html:root body .pt-body .gem-status{ align-self:flex-start; font-size:11.5px; padding:1px 7px }
html:root body .pt-body small{ font-size:12.5px; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
html:root body .pt-body small b{ color:#6b47e6 }
html:root body .pt-body em{ font-style:normal; font-size:11.5px; color:var(--muted) }

/* ================= Forsiden: ryddigere toppfelt ================= */
/* overskrift mindre, «Bytt sted» som tydelig pille under, sentrert søk med «Overrask meg» inni */
html:root body .home-hello .headline-row, html.web-build:root body .home-hello .headline-row{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:14px !important }
html:root body #helloTitle .where{ font-size:clamp(44px,5.4vw,78px) !important }
html:root body .home-hello .headline-row #helloTitle{ max-width:100% !important }
html:root body .home-hello .headline-row .headline-location, html.web-build:root body .home-hello .headline-row .headline-location{
  width:auto !important; min-width:0 !important; height:46px !important; padding:0 18px 0 15px !important; margin:0 !important; gap:8px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:999px !important; border:1.5px solid color-mix(in srgb,#601ffb 35%,transparent) !important;
  background:color-mix(in srgb,#601ffb 9%,var(--surface)) !important; color:var(--ink) !important;
  font:700 16px/1 var(--body) !important; box-shadow:0 6px 18px -10px rgba(96,31,251,.45) !important }
html:root body .home-hello .headline-row .headline-location > span:not([data-icon]){ display:inline !important }
html:root body .home-hello .headline-row .headline-location [data-icon]{ width:19px !important; height:19px !important; color:#601ffb !important }
html:root body .home-hello .headline-row .headline-location > i{ font-style:normal; font-size:12px; color:#601ffb; margin-left:2px }
html:root body .home-hello .headline-row .headline-location:hover{ background:color-mix(in srgb,#601ffb 16%,var(--surface)) !important; border-color:#601ffb !important; transform:translateY(-1px) }
html[data-theme=dark] body .home-hello .headline-row .headline-location [data-icon], html[data-theme=dark] body .home-hello .headline-row .headline-location > i{ color:#b9a4ff !important }

html:root body .home-discovery, html.web-build:root body.pc-web .home-discovery{ display:flex !important; flex-direction:column !important; align-items:center !important; width:100% !important }
html:root body .home-discovery .home-ask, html.web-build:root body.pc-web[data-view=home] .home-ask{ width:min(720px,100%) !important; max-width:720px !important; margin:0 auto !important; box-sizing:border-box !important; display:flex !important; align-items:center !important }
html:root body .home-ask .home-ask-field{ flex:1 1 auto !important; min-width:0 !important }
html[data-theme=dark] body .home-ask .home-surprise.in-bar{ color:#d5c8ff !important; background:color-mix(in srgb,#9d7bff 18%,transparent) !important }
html[data-theme=dark] body .home-ask .home-surprise.in-bar span{ color:#b9a4ff }
@media (max-width:560px){
  html:root body #helloTitle .where{ font-size:clamp(40px,11.5vw,54px) !important }
  html:root body .home-hello .headline-row .headline-location{ height:42px !important; font-size:15px !important }
}
/* the old separate button is gone – make sure nothing reserves space for it */
html:root body #homeAskForm .guide-mark{ order:0 !important }
html:root body #homeAskForm .home-ask-field{ order:1 !important }
html:root body #homeAskForm button[type=submit]{ order:3 !important; flex:none !important }
@media (max-width:899px){ html:root body .home-discovery{ padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important } }

/* Compact map tip beside the brand; replaces the floating map overlay. */
html:root body .app-header .brand-icon{width:48px!important;height:48px!important;border-radius:14px!important}
@media (max-width:700px){
  html:root body .app-header .brand-icon{width:44px!important;height:44px!important;border-radius:13px!important}
}

/* Mobile WebView: a slightly smaller carousel with more legible supporting text. */
@media (max-width:599px){
  html:root body[data-view=home] #heroSwiper{height:min(46vh,380px)!important;min-height:330px!important}
  html:root body[data-view=home] .g-slide .slide-body{padding:16px 20px 26px!important}
  html:root body[data-view=home] .g-slide .slide-top{top:18px!important;left:18px!important;right:18px!important}
  html:root body[data-view=home] .g-slide .slide-when{font-size:13.5px!important;padding:7px 11px!important}
  html:root body[data-view=home] .g-slide .slide-cat{font-size:13px!important}
  html:root body[data-view=home] .g-slide .slide-place,
  html:root body[data-view=home] .g-slide .slide-place b{font-size:13px!important;line-height:1.3!important}
  html:root body[data-view=home] .event-feed .card-body small,
  html:root body .results-grid .card-body small{font-size:11px!important;line-height:1.35!important}
  html:root body[data-view=home] #homeView#homeView > .event-feed{width:auto!important;max-width:none!important;margin-left:10px!important;margin-right:10px!important;min-width:0!important}
  html:root body[data-view=home] .event-feed .event-grid{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html:root body[data-view=home] .event-feed .card{width:100%!important;max-width:100%!important;min-width:0!important}
}

/* Header hierarchy: brand -> current city -> account. Search becomes the first page row. */
html.web-build:root body[data-view=home] .app-header #locationBtn{display:inline-flex!important;order:1;flex:0 1 auto!important;max-width:180px!important;height:42px!important}
html.web-build:root body[data-view=home] .app-header #locationBtn .dot{display:none!important}
html.web-build:root body[data-view=home] .app-header #locationBtn::before{content:'i';font-weight:600;color:var(--muted)}
html.web-build:root body[data-view=home] .app-header #accountBtn{order:2}
html.web-build:root body[data-view=home] .app-header #themeBtn{order:3}
html.web-build:root body[data-view=home] #homeView#homeView > .home-hello{display:none!important}
html.web-build:root body[data-view=home] #homeView#homeView > .home-discovery{order:1!important;margin-top:12px!important;margin-bottom:8px!important}
html.web-build:root body[data-view=home] #homeView#homeView > #homePulse{order:2!important}
html.web-build:root body[data-view=home] #homeView#homeView > .hero{order:3!important}
html.web-build:root body[data-view=home] #heroLocationBtn{display:none!important}
@media (min-width:900px){html.web-build:root body[data-view=home] .app-header #locationBtn{margin-left:8px!important}}
@media (max-width:899px){
  html.web-build:root body[data-view=home] .app-header #locationBtn{max-width:34vw!important;height:40px!important;padding-inline:9px!important}
  html.web-build:root body[data-view=home] #homeView#homeView > .home-discovery{margin-top:8px!important}
}

/* Brand cluster: larger mark, Beta beneath the wordmark, selected town alongside. */
html:root{--header-h:64px}
html:root body .app-header{justify-content:flex-start!important}
html:root body .app-header .brand{display:grid!important;grid-template-columns:54px auto;grid-template-rows:auto auto;column-gap:10px;row-gap:0;align-items:center;flex:0 0 auto!important}
html:root body .app-header .brand-icon{grid-column:1;grid-row:1 / 3;width:54px!important;height:54px!important;border-radius:16px!important}
html:root body .app-header > #locationBtn.brand-location{display:inline-flex!important;order:initial!important;flex:0 1 auto!important;max-width:170px!important;margin-left:10px!important;padding-inline:10px!important;background:transparent!important;border:0!important;box-shadow:none!important;font-weight:750!important}
html:root body .app-header > #locationBtn.brand-location .dot{display:none!important}
html:root body .app-header > #locationBtn.brand-location::before{content:'i';font-weight:600;color:var(--muted)}
html:root body .app-header .header-actions{margin-left:auto!important;flex:0 0 auto!important}
@media (max-width:700px){
  html:root{--header-h:60px}
  html:root body .app-header .brand{grid-template-columns:48px auto;column-gap:7px}
  html:root body .app-header .brand-icon{width:48px!important;height:48px!important;border-radius:14px!important}
  html:root body .app-header > #locationBtn.brand-location{max-width:27vw!important;margin-left:5px!important;padding-inline:5px!important;font-size:12px!important}
  html:root body .app-header #accountBtn{width:40px!important;padding:0!important;justify-content:center!important;margin-right:0!important}
  html:root body .app-header #accountBtn span{display:none!important}
}
@media (max-width:370px){
  html:root body .app-header .brand{grid-template-columns:44px auto;column-gap:5px}
  html:root body .app-header .brand-icon{width:44px!important;height:44px!important}
  html:root body .app-header > #locationBtn.brand-location{max-width:24vw!important;margin-left:3px!important}
}

/* The square artwork already contains the name: no duplicate wordmark or Beta text. */
html:root body .app-header .brand{display:flex!important;align-items:center!important;min-width:auto!important}
html:root body .app-header > #locationBtn.brand-location{max-width:260px!important;min-height:48px!important;margin-left:12px!important;padding-inline:12px!important;font-family:var(--display)!important;font-size:20px!important;font-weight:700!important;letter-spacing:-.025em!important;color:var(--ink)!important}
html:root body .app-header > #locationBtn.brand-location::before{font-size:.82em;font-weight:600!important}
html:root body .app-header > #locationBtn.brand-location > span:last-child{font-size:14px!important;margin-left:2px;color:var(--muted)}
@media (max-width:700px){
  html:root body .app-header > #locationBtn.brand-location{max-width:38vw!important;min-height:44px!important;margin-left:6px!important;padding-inline:6px!important;font-size:17px!important}
}
@media (max-width:370px){html:root body .app-header > #locationBtn.brand-location{max-width:34vw!important;font-size:15.5px!important;margin-left:4px!important}}

/* One interaction accent. Category and status colours remain semantic. */
html:root{
  --accent:#6332ff;
  --pink:#6332ff;
  --pink-2:#6332ff;
  --dream-lilac:#6332ff;
  --ks-lykt:#6332ff;
  --ks-accent-fill:#6332ff;
  --ks-accent-text:#5422e8;
  --accent-soft:#eee9ff;
  --accent-ink:#5422e8;
}
html:root[data-theme=dark]{
  --accent:#a98bff;
  --pink:#a98bff;
  --pink-2:#a98bff;
  --dream-lilac:#a98bff;
  --ks-lykt:#8f68ff;
  --ks-accent-fill:#8f68ff;
  --ks-accent-text:#c0adff;
  --accent-soft:rgba(143,104,255,.2);
  --accent-ink:#d4c8ff;
}

/* Carousel date/time uses the same highlight language as dates elsewhere. */
html:root body .slide-when,
html:root body .g-slide .slide-when{
  background:var(--accent-soft)!important;
  color:var(--accent-ink)!important;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)!important;
  font-size:14.5px!important;
  line-height:1.1!important;
  padding:8px 13px!important;
}
html:root body .slide-when.live,
html:root body .g-slide .slide-when.live{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:var(--accent)!important;
}
@media (max-width:599px){
  html:root body .slide-when,html:root body .g-slide .slide-when{font-size:15px!important;padding:8px 12px!important}
}

/* The selected town is primary context, not secondary metadata. */
html:root body .app-header > #locationBtn.brand-location{max-width:320px!important;font-family:var(--display)!important;font-size:26px!important;font-weight:750!important;letter-spacing:-.035em!important}
html:root body .app-header > #locationBtn.brand-location::before{font-family:var(--display)!important;font-size:1em!important;font-weight:750!important;color:var(--ink)!important}
@media (min-width:701px){
  html:root body .app-header > #locationBtn.brand-location{flex:0 0 auto!important;max-width:none!important;overflow:visible!important;white-space:nowrap!important}
  html:root body .app-header > #locationBtn.brand-location #locationText{max-width:none!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important}
}
@media (max-width:700px){html:root body .app-header > #locationBtn.brand-location{max-width:42vw!important;font-size:22px!important}}
@media (max-width:370px){html:root body .app-header > #locationBtn.brand-location{max-width:38vw!important;font-size:19px!important}}

/* Quiet quick filters: neutral by default, purple only when active. */
html:root body .pulse-chips{gap:7px!important}
html:root body .pulse-chip{
  height:34px!important;
  padding:0 7px 0 11px!important;
  border-radius:12px!important;
  border-color:color-mix(in srgb,var(--line) 78%,transparent)!important;
  background:color-mix(in srgb,var(--soft) 72%,var(--surface))!important;
  color:var(--muted)!important;
  font-size:13.5px!important;
  font-weight:650!important;
  gap:7px!important;
  box-shadow:none!important;
}
html:root body .pulse-chip small{
  min-width:20px!important;
  height:22px!important;
  padding:0 6px!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--surface) 82%,transparent)!important;
  color:var(--muted)!important;
  font-size:11px!important;
}
html:root body .pulse-chip:hover,
html:root body .pulse-chip:focus-visible{background:var(--accent-soft)!important;color:var(--accent-ink)!important;border-color:color-mix(in srgb,var(--accent) 28%,var(--line))!important}
html:root body .pulse-chip[aria-pressed=true],
html:root body .pulse-chip.active,
html:root body .pulse-chip:active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
html:root body .pulse-chip[aria-pressed=true] small,
html:root body .pulse-chip.active small,
html:root body .pulse-chip:active small{background:rgba(255,255,255,.2)!important;color:#fff!important}

/* Build 56 splash: one stable location line beneath a softly rounded logo. */
html:root body #brandIntro.bi-boot .bi-mark{border-radius:24%!important;overflow:hidden!important}
html:root body #brandIntro.bi-boot .bi-line{display:block!important;text-align:center}
html:root body #brandIntro.bi-boot .bi-where,
html:root body #brandIntro.bi-boot .bi-where .i,
html:root body #brandIntro.bi-boot .bi-where em{
  color:var(--ink)!important;
  -webkit-text-fill-color:currentColor!important;
  background:none!important;
}
html:root body #brandIntro.bi-boot .bi-where{display:block!important;font:800 clamp(21px,5.8vw,26px)/1.1 var(--display)!important;letter-spacing:-.025em!important}
html:root body #brandIntro.bi-boot .bi-where .i{font-weight:650!important;opacity:.76}

/* Build 57: make the selected town unmistakable without turning it into a button. */
html:root body .app-header > #locationBtn.brand-location{
  max-width:none!important;
  min-height:52px!important;
  margin-left:16px!important;
  padding:4px 15px!important;
  overflow:visible!important;
  white-space:nowrap!important;
  font-family:var(--display)!important;
  font-size:31px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-.04em!important;
  color:var(--ink)!important;
  text-shadow:0 3px 14px color-mix(in srgb,var(--ks-accent) 25%,transparent)!important;
}
html:root body .app-header > #locationBtn.brand-location::before{
  font:700 .88em/1 var(--display)!important;
  color:var(--ink)!important;
  opacity:.82;
}
html:root body .app-header > #locationBtn.brand-location #locationText{
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
html:root body .app-header > #locationBtn.brand-location > span:last-child{
  margin-left:5px!important;
  font-size:15px!important;
  color:var(--ks-accent-text)!important;
  text-shadow:none!important;
}
@media (max-width:700px){
  html.web-build:root body[data-view=home] .app-header > #locationBtn.brand-location,
  html:root body .app-header > #locationBtn.brand-location{
    flex:1 1 auto!important;
    max-width:52vw!important;
    min-height:48px!important;
    margin-left:8px!important;
    padding:3px 8px!important;
    overflow:hidden!important;
    font-size:24px!important;
    letter-spacing:-.035em!important;
  }
  html:root body .app-header > #locationBtn.brand-location #locationText{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
}
@media (max-width:370px){
  html.web-build:root body[data-view=home] .app-header > #locationBtn.brand-location,
  html:root body .app-header > #locationBtn.brand-location{max-width:48vw!important;margin-left:5px!important;padding-inline:5px!important;font-size:21px!important}
}

/* Beta mark beside the selected place. */

/* Keep the badge as its own header item so it never overlaps a long place name. */
html:root body .app-header > .header-beta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  margin-left:8px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:11px;
  background:linear-gradient(135deg,#8f68ff 0%,#6332ff 55%,#d45fc0 120%);
  color:#fff;
  font-family:var(--body);
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:.12em;
  text-shadow:0 1px 2px rgba(25,10,72,.4);
  box-shadow:0 8px 22px -10px rgba(111,69,255,.9),inset 0 1px 0 rgba(255,255,255,.24);
  transform:rotate(-2deg);
}
@media (max-width:700px){
  html:root body .app-header > .header-beta{min-height:25px;margin-left:4px;padding:0 8px;border-radius:9px;font-size:10px}
}
@media (max-width:390px){
  html:root body .app-header > .header-beta{margin-left:2px;padding-inline:6px;font-size:9px}
}

/* Build 58: compact landing-page introduction video. */
html:root body[data-view=home] #homeView#homeView > .home-video-entry{
  order:2!important;
  width:auto!important;
  align-self:flex-start!important;
  margin:14px 0 4px max(16px,calc((100% - 1400px)/2 + 16px))!important;
  padding:0!important;
}
@media (min-width:900px){
  html:root body[data-view=home] #homeView#homeView > .home-video-entry{
    position:absolute!important;
    top:24px!important;
    left:max(28px,calc((100% - 1400px)/2 + 28px))!important;
    z-index:350!important;
    margin:0!important;
  }
}
@media (max-width:599px){
  html:root body[data-view=home] #homeView#homeView > .home-video-entry{align-self:center!important;margin:12px auto 4px!important}
}



/* Build 72: the drawn coastline is back on the splash. Draws once from first paint (1.5 s),
   sits behind the logo, and the splash leaves as soon as the line is complete. */
html:root body #brandIntro.bi-boot .bi-coast{
  display:block!important;
  position:absolute!important;left:50%!important;top:50%!important;
  width:min(94vw,64vh)!important;height:auto!important;
  transform:translate(-50%,-50%)!important;
  opacity:.5!important;animation:none!important;pointer-events:none;
}
html:root body #brandIntro.bi-boot .bi-coast path{
  fill:none!important;
  stroke:color-mix(in srgb,#9b82e8 72%,var(--ink))!important;
  stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:none!important;
  stroke-dasharray:1 1!important;stroke-dashoffset:1;
  animation:hsaCoastDraw 1.5s cubic-bezier(.35,.15,.3,1) .1s forwards!important;
}
html:root body #brandIntro.bi-boot .bi-stage{position:relative!important;z-index:1}
html.bi-still:root body #brandIntro.bi-boot .bi-coast path{animation:none!important;stroke-dashoffset:0!important}
@keyframes hsaCoastDraw{to{stroke-dashoffset:0}}
html:root body #brandIntro.bi-boot .bi-coast-cv{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;opacity:.5!important;pointer-events:none}
html:root body #brandIntro.bi-boot.bi-cw .bi-coast{display:none!important}


/* ===== Build 73: front page tidy-up ===== */
/* BETA sits under the logo. */
html:root body .app-header > .brand-stack{
  position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
html:root body .app-header .brand-stack .brand-icon{width:42px!important;height:42px!important;border-radius:12px!important}
html:root body .app-header .brand-stack > .header-beta{
  display:inline-flex;align-items:center;justify-content:center;
  margin:3px 0 0!important;min-height:0!important;height:15px;padding:0 7px!important;
  border:1px solid rgba(255,255,255,.35);border-radius:6px!important;
  background:linear-gradient(135deg,#8f68ff 0%,#6332ff 55%,#d45fc0 120%);color:#fff;
  font:900 9px/1 var(--body)!important;letter-spacing:.14em!important;
  box-shadow:0 5px 14px -6px rgba(111,69,255,.9);transform:rotate(-2deg);position:relative;z-index:2;
}
@media (max-width:700px){
  html:root body .app-header .brand-stack .brand-icon{width:38px!important;height:38px!important;border-radius:11px!important}
  html:root body .app-header .brand-stack > .header-beta{height:14px;margin-top:2px!important;font-size:8px!important;padding:0 6px!important}
}

/* «i Larvik»: bigger, with the old pink → purple gradient on the town name. */
html:root body .app-header > #locationBtn.brand-location{font-size:40px!important;margin-left:18px!important;min-height:56px!important}
html:root body .app-header > #locationBtn.brand-location::before{font-size:.62em!important;opacity:.85;margin-right:.18em}
html:root body .app-header > #locationBtn.brand-location #locationText{
  padding:0 .04em .08em 0;
  background:linear-gradient(100deg,#f078a4 0%,#c77fd0 45%,#9b82e8 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 4px 18px rgba(240,120,164,.28));
}
@media (max-width:700px){
  html.web-build:root body[data-view=home] .app-header > #locationBtn.brand-location,
  html:root body .app-header > #locationBtn.brand-location{font-size:31px!important;max-width:60vw!important;margin-left:10px!important}
}
@media (max-width:370px){
  html.web-build:root body[data-view=home] .app-header > #locationBtn.brand-location,
  html:root body .app-header > #locationBtn.brand-location{font-size:26px!important;max-width:58vw!important}
}

/* «Overrask meg» is the last chip in the row under the search bar. */
html:root body .pulse-chip.pulse-surprise{
  gap:6px!important;
  background:linear-gradient(100deg,color-mix(in srgb,#f078a4 22%,var(--surface)),color-mix(in srgb,#9b82e8 26%,var(--surface)))!important;
  border-color:color-mix(in srgb,#9b82e8 45%,transparent)!important;
}
html:root body .pulse-chip.pulse-surprise > span:first-child{color:#f3a6c4;font-size:13px}
html[data-theme=light] body .pulse-chip.pulse-surprise > span:first-child{color:#c2457a}

/* «Logg inn her for å gi oss tips» – right side, under the account button (front page only). */
html:root body .tip-login{
  position:absolute;z-index:1100;top:calc(var(--header-h,60px) + var(--safe-top,0px) + 10px);right:16px;
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,#9b82e8 50%,transparent);
  background:color-mix(in srgb,#9b82e8 16%,var(--surface));color:var(--ink);
  font:700 13px/1 var(--body);white-space:nowrap;cursor:pointer;
}
html:root body .tip-login > span:first-child{color:#f078a4}
html:root body .tip-login:hover{background:color-mix(in srgb,#9b82e8 28%,var(--surface))}
html:root body .tip-login[hidden],html:root body:not([data-view=home]) .tip-login{display:none!important}
@media (min-width:1101px){ html:root body .tip-login{top:calc(var(--header-h,64px) + var(--safe-top,0px) + 28px);right:max(24px,calc((100% - 1400px)/2 + 24px))} }
@media (max-width:1100px){
  /* not enough room beside the search bar: give the button its own line above it */
  html.web-build:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
  html:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery{margin-top:46px!important}
}

/* Place picker: fylker first, tap one to see «Hele …» and its towns. */
html:root body #placeRegions .region-toggle{
  all:unset;box-sizing:border-box;width:100%;cursor:pointer;
  display:flex!important;align-items:center;gap:10px;padding:14px 16px!important;margin:0!important;border-radius:16px;
  background:color-mix(in srgb,var(--surface) 82%,#9b82e8 10%);border:1px solid color-mix(in srgb,#9b82e8 22%,transparent);
}
html:root body #placeRegions .region-toggle:hover{background:color-mix(in srgb,var(--surface) 70%,#9b82e8 20%)}
html:root body #placeRegions .region-toggle:focus-visible{outline:2px solid #9b82e8;outline-offset:2px}
html:root body #placeRegions .region-toggle h3{margin:0!important;flex:1 1 auto;font-size:17px}
html:root body #placeRegions .region-toggle small{color:var(--muted)}
html:root body #placeRegions .region-chev{font-style:normal;color:#b9a4ff;transition:transform .2s ease}
html:root body #placeRegions .region-block.open .region-chev{transform:rotate(180deg)}
html:root body #placeRegions .region-block.open .region-toggle{border-color:color-mix(in srgb,#9b82e8 55%,transparent)}
html:root body #placeRegions .region-body{padding:10px 2px 4px}
html:root body #placeRegions .region-body[hidden]{display:none!important}
html:root body #placeRegions .region-block{margin-bottom:8px}


/* ===== Build 74: sleeker header ===== */
/* Logo: bigger, at the far left, slightly tipped, hanging over the header's bottom line like a sticker. */
html:root body .app-header > .brand-stack{
  align-self:flex-start!important;margin:7px 4px 0 -2px!important;
  transform:rotate(-6deg);transform-origin:50% 40%;
  transition:transform .35s cubic-bezier(.2,.9,.25,1.2);z-index:5;
}
html:root body .app-header > .brand-stack:hover{transform:rotate(-2deg) scale(1.04)}
html:root body .app-header .brand-stack .brand-icon{
  width:72px!important;height:72px!important;border-radius:21px!important;
  animation:none!important;filter:none!important;transform:none!important;
  box-shadow:0 14px 30px -12px rgba(96,31,251,.75),0 0 0 2px color-mix(in srgb,#fff 14%,transparent)!important;
}
html:root body .app-header .brand-stack .brand-icon::after{display:none!important}
html:root body .app-header .brand-stack .brand-icon img{border-radius:inherit!important}
html:root body .app-header .brand-stack > .header-beta{
  margin-top:-9px!important;height:17px;padding:0 9px!important;font-size:9.5px!important;border-radius:7px!important;
  transform:rotate(3deg)!important;
  background:linear-gradient(100deg,#f078a4,#9b82e8)!important;border-color:rgba(255,255,255,.45)!important;
  box-shadow:0 6px 16px -6px rgba(240,120,164,.8)!important;
}
@media (max-width:700px){
  html:root body .app-header > .brand-stack{margin:6px 2px 0 -2px!important}
  html:root body .app-header .brand-stack .brand-icon{width:58px!important;height:58px!important;border-radius:17px!important}
  html:root body .app-header .brand-stack > .header-beta{height:15px;margin-top:-8px!important;font-size:8.5px!important;padding:0 7px!important}
}

/* Place name: takes all the free room; app.js shrinks it only when a name doesn't fit. */
html:root body .app-header > #locationBtn.brand-location,
html.web-build:root body[data-view=home] .app-header > #locationBtn.brand-location{
  flex:1 1 auto!important;min-width:0!important;max-width:none!important;margin-left:10px!important;justify-content:flex-start!important;
}
@media (min-width:1101px){
  /* leave the centred tab bar alone */
  html:root body .app-header > #locationBtn.brand-location,
  html.web-build:root body[data-view=home] .app-header > #locationBtn.brand-location{max-width:calc(50% - 300px)!important}
}
@media (max-width:700px){
  html:root body .app-header > #locationBtn.brand-location,
  html.web-build:root body[data-view=home] .app-header > #locationBtn.brand-location{font-size:32px!important;margin-left:6px!important;padding-inline:4px!important}
}

/* Search bar: as wide as the header (same side margins), with the tip button on its own line above it. */
html:root body[data-view=home] #homeView#homeView > .home-discovery{
  width:auto!important;max-width:none!important;margin-left:max(16px,var(--safe-left,0px))!important;margin-right:max(16px,var(--safe-right,0px))!important;
  align-self:stretch!important;
}
html:root body[data-view=home] #homeView .home-discovery .home-ask,
html.web-build:root body.pc-web[data-view=home] #homeView .home-ask{width:100%!important;max-width:none!important}
@media (min-width:701px){
  html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-left:24px!important;margin-right:24px!important}
}
html:root body .tip-login{top:calc(var(--header-h,60px) + var(--safe-top,0px) + 12px)!important;right:16px!important}
@media (min-width:701px){ html:root body .tip-login{right:24px!important} }
html.web-build:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
html:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery{margin-top:50px!important}
/* Build 74b: much bigger logo; BETA sits fully underneath it. Search drops below the overhang. */
html:root body .app-header .brand-stack .brand-icon{width:100px!important;height:100px!important;border-radius:28px!important}
html:root body .app-header .brand-stack > .header-beta{margin-top:7px!important;height:18px;font-size:10px!important;padding:0 10px!important;transform:rotate(2deg)!important}
html:root body .app-header > .brand-stack{margin:8px 6px 0 -2px!important}
html.web-build:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
html:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-top:76px!important}
@media (max-width:700px){
  html:root body .app-header .brand-stack .brand-icon{width:76px!important;height:76px!important;border-radius:22px!important}
  html:root body .app-header .brand-stack > .header-beta{margin-top:6px!important;height:16px;font-size:9px!important;padding:0 8px!important}
  html:root body .app-header > .brand-stack{margin:7px 2px 0 -2px!important}
  html.web-build:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
  html:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
  html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-top:58px!important}
}
/* Search bar edges line up with the header's own side padding (12px phone / 24px desktop). */
html:root body[data-view=home] #homeView#homeView > .home-discovery{padding-left:0!important;padding-right:0!important;margin-left:12px!important;margin-right:12px!important}
@media (min-width:701px){
  html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-left:calc(24px - var(--hv-pad,28px))!important;margin-right:calc(24px - var(--hv-pad,28px))!important}
}
@media (min-width:701px){
  /* page padding varies by layout (0/24/28px), so line up with the screen edge directly */
  html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-left:calc(24px - (100vw - 100%) / 2)!important;margin-right:calc(24px - (100vw - 100%) / 2)!important}
}
/* Keep the search clear of the big logo even when the tip button is hidden (login unavailable). */
html.web-build:root body[data-view=home] #homeView#homeView > .home-discovery,
html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-top:76px!important}
@media (max-width:700px){
  html.web-build:root body[data-view=home] #homeView#homeView > .home-discovery,
  html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-top:58px!important}
}


/* ===== Build 75: desktop row — «i Larvik» | search under Hjem…Min plan | tip button ===== */
html.nav-top:root body[data-view=home] #homeView#homeView > .home-discovery{
  position:relative!important;display:block!important;height:66px;
  margin-top:18px!important;margin-left:calc(0px - (100vw - 100%) / 2)!important;margin-right:calc(0px - (100vw - 100%) / 2)!important;
}
html.nav-top:root body[data-view=home] #homeView .home-discovery > #homeAskForm{
  position:absolute!important;top:0;left:var(--nav-l,30%)!important;width:var(--nav-w,40%)!important;max-width:none!important;margin:0!important;height:66px;
}
html.nav-top:root body[data-view=home] .home-discovery > #locationBtn.brand-location{
  position:absolute!important;top:50%;transform:translateY(-50%);
  left:150px;right:calc(100% - var(--nav-l,30%) + 18px);width:auto!important;max-width:none!important;min-width:0!important;
  display:flex!important;align-items:center;justify-content:flex-start!important;gap:0;margin:0!important;padding:0 4px!important;
  height:auto!important;min-height:60px!important;border:0!important;background:none!important;box-shadow:none!important;
  font-family:var(--display)!important;font-size:48px!important;font-weight:800!important;letter-spacing:-.04em!important;line-height:1.05!important;
  color:var(--ink)!important;white-space:nowrap!important;overflow:hidden!important;cursor:pointer;
}
html.nav-top:root body[data-view=home] .home-discovery > #locationBtn .dot{display:none!important}
html.nav-top:root body[data-view=home] .home-discovery > #locationBtn::before{
  content:'i';flex:0 0 auto;font:700 .6em/1 var(--display);color:var(--ink);opacity:.85;margin-right:.2em;
}
html.nav-top:root body[data-view=home] .home-discovery > #locationBtn #locationText{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .04em .1em 0;
  background:linear-gradient(100deg,#f078a4 0%,#c77fd0 45%,#9b82e8 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 4px 18px rgba(240,120,164,.28));
}
html.nav-top:root body[data-view=home] .home-discovery > #locationBtn > span:last-child{flex:0 0 auto;font-size:16px!important;margin-left:8px;color:var(--ks-accent-text,#b9a4ff)}
html.nav-top:root body[data-view=home] .home-discovery > .tip-login{
  position:absolute!important;top:50%!important;transform:translateY(-50%);right:24px!important;
  left:auto!important;
}
html.nav-top.web-build:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
html.nav-top.web-build:root body[data-view=home] #homeView#homeView > .home-discovery,
html.nav-top:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery{margin-top:18px!important}

/* «Velg sted» search dropdown */
html:root body #locationDialog .place-search-wrap{position:relative;z-index:20}
html:root body #locationDialog .place-suggest{
  position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:min(360px,52vh);overflow-y:auto;padding:6px;
  border-radius:16px;border:1px solid color-mix(in srgb,#9b82e8 40%,transparent);
  background:color-mix(in srgb,var(--surface) 96%,#9b82e8 4%);box-shadow:0 22px 50px -18px rgba(0,0,0,.6);
}
html:root body #locationDialog .place-suggest[hidden]{display:none!important}
html:root body #locationDialog .place-suggest [role=option]{
  all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;
  padding:10px 12px;border-radius:11px;color:var(--ink);
}
html:root body #locationDialog .place-suggest [role=option] b{font-size:15px;font-weight:750}
html:root body #locationDialog .place-suggest [role=option] small{grid-row:2;color:var(--muted);font-size:12px}
html:root body #locationDialog .place-suggest [role=option] i{grid-row:1 / 3;grid-column:2;align-self:center;font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
html:root body #locationDialog .place-suggest [role=option][aria-selected=true],
html:root body #locationDialog .place-suggest [role=option]:hover{background:color-mix(in srgb,#9b82e8 20%,transparent)}
html:root body #locationDialog .place-suggest-empty{margin:0;padding:12px;color:var(--muted);font-size:13px}


/* ===== Build 76: «i Larvik» floats beside the logo, across the header line, using all the room up to the tab bar ===== */
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location{
  position:absolute!important;z-index:6;left:146px!important;right:calc(100% - var(--nav-l,40%) + 20px)!important;
  top:22px!important;height:76px!important;min-height:0!important;width:auto!important;max-width:none!important;min-width:0!important;
  display:flex!important;align-items:center;justify-content:flex-start!important;margin:0!important;padding:0 6px!important;
  border:0!important;background:none!important;box-shadow:none!important;overflow:hidden!important;
  font-family:var(--display)!important;font-size:58px!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1.1!important;
  color:var(--ink)!important;white-space:nowrap!important;
  filter:drop-shadow(0 10px 22px rgba(10,6,40,.45));
}
html.nav-top[data-theme=light]:root body[data-view=home] .app-header > #locationBtn.brand-location{filter:drop-shadow(0 8px 18px rgba(96,31,251,.16))}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location .dot{display:none!important}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location::before{
  content:'i';flex:0 0 auto;font:700 .55em/1 var(--display)!important;color:var(--ink)!important;opacity:.85;margin-right:.22em;
}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location #locationText{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .05em .1em 0;
}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location > span:last-child{flex:0 0 auto;font-size:17px!important;margin-left:10px;color:var(--ks-accent-text,#b9a4ff)!important;text-shadow:none!important}


/* ===== Build 77 ===== */
/* Place name: no clipped glow box – the glow spreads freely, and a soft gaussian halo sits behind the name
   (it also melts the header's bottom line where the name crosses it). */
html:root body .app-header > #locationBtn.brand-location{overflow:visible!important;isolation:isolate}
html:root body .app-header > #locationBtn.brand-location #locationText{filter:drop-shadow(0 4px 16px rgba(240,120,164,.32))!important}
html:root body .app-header > #locationBtn.brand-location::after{
  content:'';position:absolute;z-index:-1;inset:-4px -22px -4px -14px;border-radius:50%;
  background:radial-gradient(ellipse at 45% 50%,var(--header-bg,#15143a) 0%,color-mix(in srgb,var(--header-bg,#15143a) 70%,transparent) 48%,transparent 74%);
  filter:blur(12px);pointer-events:none;
}
html:root body:not([data-view=home]) .app-header > #locationBtn.brand-location::after{display:none}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location{overflow:visible!important;filter:none!important}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location::after{inset:-2px -30px -2px -24px}

/* ---------- Phone front page (tab bar at the bottom) ---------- */
@media (max-width:899px){
  /* carousel is swiped on phones: the arrows only got in the way, stacked on the left card */
  html:root body .glide-arrow{display:none!important}
  /* logo a touch smaller so the tip row and search sit higher */
  html:root body .app-header .brand-stack .brand-icon{width:66px!important;height:66px!important;border-radius:19px!important}
  html:root body .app-header > .brand-stack{margin:6px 0 0 -2px!important}
  html:root body .app-header .brand-stack > .header-beta{margin-top:5px!important;height:15px;font-size:8.5px!important}
  html:root body:not(.pc-web) .app-header > #locationBtn.brand-location{font-size:34px!important;margin-left:8px!important}
  /* tip button: compact, tucked in the gap right of the logo */
  html:root body .tip-login{top:calc(var(--header-h,56px) + var(--safe-top,0px) + 10px)!important;right:12px!important;height:30px;padding:0 12px;font-size:12.5px;gap:6px}
  html.web-build:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
  html:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
  html.web-build:root body[data-view=home] #homeView#homeView > .home-discovery,
  html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-top:48px!important;margin-bottom:4px!important}
  html:root body[data-view=home] #homeView .home-discovery .home-ask{min-height:56px!important;height:56px!important}
  /* quick chips: line up with the search bar and fade out at the right edge, so «Overrask meg» reads as «scroll for more» */
  html:root body .home-pulse{margin-top:10px!important;padding:0!important}
  html:root body .pulse-chips{
    padding:0 12px!important;scroll-padding-inline:12px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  }
  html:root body .pulse-chips::after{content:'';flex:0 0 28px}
}

/* ===== Build 78: the big overhanging logo is a front-page thing only.
   On Kart, Aktiviteter and Min plan it fits inside the header (BETA still under it), so it never covers
   the fylke bar, the category panel or other page content. ===== */
html:root body:not([data-view=home]) .app-header > .brand-stack{align-self:center!important;margin:0 4px 0 0!important;transform:rotate(-4deg)}
html:root body:not([data-view=home]) .app-header .brand-stack .brand-icon{width:38px!important;height:38px!important;border-radius:11px!important;box-shadow:0 6px 16px -8px rgba(96,31,251,.7)!important}
html:root body:not([data-view=home]) .app-header .brand-stack > .header-beta{margin-top:2px!important;height:12px;padding:0 5px!important;font-size:7px!important;border-radius:4px!important;letter-spacing:.12em!important}
@media (max-width:899px){
  html:root body:not([data-view=home]) .app-header .brand-stack .brand-icon{width:34px!important;height:34px!important;border-radius:10px!important}
}

/* «Verdt et besøk» on the map: same look and behaviour as Kategorier */
html:root body #mapCats .map-gems-section{margin-top:10px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
html:root body #mapCats .map-gems-section > p{display:none}
html:root body #mapCats .map-gems-head{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:0 8px;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:12px}
html:root body #mapCats .map-gems-head:hover{background:var(--soft)}
html:root body #mapCats .map-gems-head b{font-size:15px;font-weight:800}
html:root body #mapCats .map-gems-head small{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
html:root body #mapCats .map-gems-head i{font-style:normal;font-size:16px;color:var(--muted);transition:transform .25s}
html:root body #mapCats .map-gems-head[aria-expanded=false] i{transform:rotate(-90deg)}
html:root body #mapCats .map-gems-ico{display:grid;place-items:center;width:22px;height:22px;color:#f3b84c;font-size:15px;background:none!important}
html:root body #mapCats .map-gems-body{padding-top:4px}
html:root body #mapCats .map-gems-body[hidden]{display:none!important}

/* Splash (build 78): much bigger logo, the place name in the pink → purple gradient, like the header. */
html:root body #brandIntro.bi-boot .bi-stage{gap:clamp(16px,3vh,26px)!important}
html:root body #brandIntro.bi-boot .bi-mark{width:clamp(124px,34vw,176px)!important;height:clamp(124px,34vw,176px)!important;border-radius:28%!important;transform:rotate(-5deg);box-shadow:0 26px 60px -24px rgba(96,31,251,.7)!important}
html:root body #brandIntro.bi-boot .bi-where{font:800 clamp(44px,12vw,72px)/1.1 var(--display)!important;letter-spacing:-.045em!important;filter:drop-shadow(0 8px 24px rgba(240,120,164,.3))}
html:root body #brandIntro.bi-boot .bi-where .i{font-size:.55em!important;font-weight:700!important;opacity:.85;margin-right:.15em}
html:root body #brandIntro.bi-boot .bi-where em{
  padding:0 .04em .08em 0;
  background:linear-gradient(100deg,#f078a4 0%,#c77fd0 45%,#9b82e8 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;
}
html:root body #brandIntro.bi-boot .bi-coast-cv{opacity:.55!important}
html:root body #brandIntro.bi-boot .bi-mark{animation:hsaLogoIn .42s cubic-bezier(.2,1.2,.3,1) .03s both!important}
@keyframes hsaLogoIn{from{opacity:0;transform:scale(.86) rotate(-11deg)}to{opacity:1;transform:rotate(-5deg)}}


/* ===== Build 79 ===== */
/* «i Larvik» sits inside the header bar on the desktop front page (same 58px size), centred vertically. */
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location{
  top:0!important;bottom:0!important;height:auto!important;margin:auto 0!important;
}
html:root body .app-header > #locationBtn.brand-location.loc-no-i::before{display:none!important}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location::after{inset:2px -30px 2px -24px}

/* Right side: tip, account and settings as one neat group. */
html:root body .app-header .header-actions{
  display:flex!important;align-items:center;gap:2px!important;padding:4px!important;margin-left:auto;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.6);
}
html:root body .app-header .header-actions > button{
  height:36px!important;min-height:36px!important;margin:0!important;border:0!important;border-radius:999px!important;
  background:transparent!important;box-shadow:none!important;color:var(--ink)!important;
}
html:root body .app-header .header-actions > button[hidden]{display:none!important}
html:root body[data-view=map] .app-header .header-actions > #filterBtn.map-only:not([hidden]){display:inline-flex!important}
html:root body .app-header .header-actions > button:hover{background:var(--soft)!important}
html:root body .app-header .header-actions > #themeBtn{width:36px!important;min-width:36px!important;padding:0!important;justify-content:center}
html:root body .app-header .header-actions > #accountBtn{padding:0 14px 0 11px!important;gap:7px!important;font-size:13.5px!important;font-weight:700!important}
html:root body .app-header .header-actions > #accountBtn.signed-in{background:color-mix(in srgb,#9b82e8 22%,transparent)!important}
html:root body .app-header .header-actions > .tip-login{
  position:static!important;transform:none!important;display:inline-flex!important;align-items:center;gap:7px;
  padding:0 14px 0 12px!important;font:700 13px/1 var(--body)!important;white-space:nowrap;
  background:linear-gradient(100deg,color-mix(in srgb,#f078a4 20%,transparent),color-mix(in srgb,#9b82e8 22%,transparent))!important;
}
html:root body .app-header .header-actions > .tip-login[hidden]{display:none!important}
html:root body .app-header .header-actions > .tip-login .tip-star{color:#f078a4}
/* separators between the items */
html:root body .app-header .header-actions > button:not([hidden]) + button:not([hidden])::before{
  content:'';position:absolute;left:-2px;top:9px;bottom:9px;width:1px;background:color-mix(in srgb,var(--line) 90%,transparent);
}
html:root body .app-header .header-actions > button{position:relative}
/* narrower desktops: shorter tip label */
/* phones / tablets: icon-only group */
@media (max-width:899px){
  html:root body .app-header .header-actions{padding:3px!important}
  html:root body .app-header .header-actions > button{height:34px!important;min-height:34px!important}
  html:root body .app-header .header-actions > .tip-login{width:34px;padding:0!important;justify-content:center}
  html:root body .app-header .header-actions > .tip-login #tipLoginLabel{display:none}
  html:root body .app-header .header-actions > .tip-login .tip-star{font-size:15px}
  html:root body .app-header .header-actions > #accountBtn{width:34px!important;min-width:34px!important;padding:0!important;justify-content:center}
  html:root body .app-header .header-actions > #accountBtn #accountLabel{display:none!important}
  html:root body .app-header .header-actions > #themeBtn{width:34px!important;min-width:34px!important}
  /* the tip row under the header is gone: search moves up */
  html.web-build:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
  html:root body[data-view=home]:has(.tip-login:not([hidden])) #homeView#homeView > .home-discovery,
  html.web-build:root body[data-view=home] #homeView#homeView > .home-discovery,
  html:root body[data-view=home] #homeView#homeView > .home-discovery{margin-top:40px!important}
}

/* Quick chips under the search: quiet, neutral capsules so they don't compete with the search bar. */
html:root body .pulse-chip,
html:root body .pulse-chip.pulse-surprise{
  background:color-mix(in srgb,var(--ink) 4%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--ink) 9%,transparent)!important;
  color:color-mix(in srgb,var(--ink) 72%,transparent)!important;
  box-shadow:none!important;font-weight:600!important;
}
html:root body .pulse-chip small{background:none!important;color:color-mix(in srgb,var(--ink) 45%,transparent)!important;padding:0 0 0 2px!important;min-width:0!important}
html:root body .pulse-chip:hover,
html:root body .pulse-chip:focus-visible{background:color-mix(in srgb,var(--ink) 9%,transparent)!important;color:var(--ink)!important;border-color:color-mix(in srgb,var(--ink) 16%,transparent)!important}
html:root body .pulse-chip.pulse-surprise > span:first-child{color:color-mix(in srgb,#f078a4 70%,var(--ink))!important}

/* long place names on two lines inside the header */
html:root body .app-header > #locationBtn.brand-location.loc-2l #locationText{
  display:block!important;white-space:normal!important;line-height:1.02!important;max-height:2.2em;overflow:hidden!important;text-overflow:clip!important;
  padding-bottom:.06em;
}
html:root body .app-header > #locationBtn.brand-location.loc-2l::before{align-self:center}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location{top:6px!important;bottom:-4px!important}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location.loc-2l{top:2px!important;bottom:0!important}

/* Build 79b: the place name hangs a little over the header's bottom edge (depth) and floats gently. */
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location{top:16px!important;bottom:-14px!important}
html.nav-top:root body[data-view=home] .app-header > #locationBtn.brand-location.loc-2l{top:12px!important;bottom:-10px!important}
html:root body:not(.pc-web)[data-view=home] .app-header > #locationBtn.brand-location{margin-top:18px!important}
html:root body .app-header > #locationBtn.brand-location #locationText{
  filter:drop-shadow(0 4px 14px rgba(240,120,164,.30)) drop-shadow(0 10px 12px rgba(8,5,30,.45))!important;
}
html[data-theme=light]:root body .app-header > #locationBtn.brand-location #locationText{
  filter:drop-shadow(0 4px 14px rgba(240,120,164,.25)) drop-shadow(0 8px 10px rgba(60,30,140,.16))!important;
}
html:root body[data-view=home] .app-header > #locationBtn.brand-location{animation:hsaPlaceFloat 5.5s ease-in-out infinite}
@keyframes hsaPlaceFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){html:root body .app-header > #locationBtn.brand-location{animation:none!important}}
html.reduce-motion:root body .app-header > #locationBtn.brand-location{animation:none!important}

/* ===== Build 80: «Gi oss tips» – bigger button, note form without login ===== */
html:root body .app-header .header-actions > .tip-login{
  height:40px!important;min-height:40px!important;padding:0 18px 0 15px!important;gap:8px!important;
  font:750 14.5px/1 var(--body)!important;
  background:linear-gradient(100deg,color-mix(in srgb,#f078a4 30%,transparent),color-mix(in srgb,#9b82e8 32%,transparent))!important;
}
html:root body .app-header .header-actions > .tip-login .tip-star{font-size:16px}
html:root body .app-header .header-actions > .tip-login:hover{background:linear-gradient(100deg,color-mix(in srgb,#f078a4 42%,transparent),color-mix(in srgb,#9b82e8 44%,transparent))!important}
html:root body .app-header .header-actions > .tip-login #tipLoginLabel{display:inline!important}
@media (max-width:899px){
  html:root body .app-header .header-actions > .tip-login{width:auto!important;height:34px!important;min-height:34px!important;padding:0 12px 0 10px!important;gap:5px!important;font-size:13px!important}
  html:root body .app-header .header-actions > .tip-login #tipLoginLabel{display:inline!important}
}
@media (max-width:389px){
  html:root body .app-header .header-actions > .tip-login{width:34px!important;padding:0!important;justify-content:center}
  html:root body .app-header .header-actions > .tip-login #tipLoginLabel{display:none!important}
}
html:root body #tipDialog{max-width:min(520px,calc(100vw - 24px))}
html:root body #tipDialog .tip-kicker{display:block;color:#f3a6c4;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
html:root body #tipDialog .field textarea{min-height:140px;resize:vertical}
html:root body #tipDialog .tip-count{display:block;text-align:right;color:var(--muted);font-size:11.5px;margin-top:4px}

/* ===== Build 80 follow-up: one large brand mark across every app view =====
   Keep the original header box; the sticker may overhang it, as it does on Home. */
html:root body:not([data-view=home]) .app-header > .brand-stack{
  align-self:flex-start!important;margin:8px 6px 0 -2px!important;transform:rotate(-6deg)!important;
}
html:root body:not([data-view=home]) .app-header .brand-stack .brand-icon{
  width:100px!important;height:100px!important;border-radius:28px!important;
  box-shadow:0 14px 30px -12px rgba(96,31,251,.75),0 0 0 2px color-mix(in srgb,#fff 14%,transparent)!important;
}
html:root body:not([data-view=home]) .app-header .brand-stack > .header-beta{
  margin-top:7px!important;height:18px!important;padding:0 10px!important;font-size:10px!important;border-radius:7px!important;letter-spacing:.08em!important;
}
/* Only the two dense work surfaces receive clearance for the overhanging sticker.
   Utforsk: the map (and its region row Vestfold/Oslo/…, Kategorier and search) starts just below the whole
   sticker incl. its BETA tag (≈138px from the top on desktop), so nothing on the map sits under the logo. */
html:root body[data-view=map] #mapView{top:calc(var(--header-h) + var(--safe-top) + 84px)!important}
html:root body[data-view=mine] #mineView{padding-top:44px!important}

/* Desktop theme shortcuts stay beside “Gi oss tips”, now compacted to Light/Dark. */
.desktop-theme-switch{display:none}
@media (min-width:900px){
  html:root body .desktop-theme-switch{position:static;display:inline-flex;order:1;flex:0 0 auto;gap:1px;padding:2px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,transparent)}
  html:root body .desktop-theme-switch button{min-height:26px;padding:0 8px;border-radius:999px;color:var(--muted);font-size:11px;font-weight:750}
  html:root body .desktop-theme-switch button:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
  html:root body .desktop-theme-switch button[aria-pressed=true]{color:var(--ks-lykt-ink);background:var(--ks-lykt)}
  html:root body .app-header .header-actions > .tip-login{order:2}
  html:root body .app-header .header-actions > #accountBtn{order:3}
  html:root body .app-header .header-actions > #themeBtn{display:inline-flex!important;order:4}
  /* Keep filtering on Utforsk, but separate it visually from the account/theme cluster. */
  html:root body[data-view=map] .app-header .header-actions > #filterBtn.map-only:not([hidden]){
    display:inline-flex!important;position:fixed!important;top:calc(var(--header-h) + var(--safe-top) + 12px);right:16px;
    width:40px!important;min-width:40px!important;height:40px!important;border:1px solid var(--border)!important;
    border-radius:50%!important;background:var(--surface)!important;box-shadow:var(--shadow)!important;z-index:1190;
  }
}
@media (max-width:899px){
  html:root body:not([data-view=home]) .app-header > .brand-stack{margin:6px 0 0 -2px!important}
  html:root body:not([data-view=home]) .app-header .brand-stack .brand-icon{width:66px!important;height:66px!important;border-radius:19px!important}
  html:root body:not([data-view=home]) .app-header .brand-stack > .header-beta{margin-top:5px!important;height:15px!important;padding:0 8px!important;font-size:8.5px!important}
  html:root body[data-view=map] #mapView{top:calc(var(--header-h) + var(--safe-top) + 40px)!important}
  html:root body[data-view=mine] #mineView{padding-top:32px!important}
  /* Preserve the requested floating home-only tip button below the header. */
  html:root body[data-view=home] .app-header .header-actions > .tip-login{position:absolute!important;top:calc(var(--header-h) + var(--safe-top) + 8px)!important;right:max(12px,var(--safe-right,0px))!important;width:auto!important;padding:0 12px!important;z-index:1100}
  html:root body[data-view=home] .app-header .header-actions > .tip-login #tipLoginLabel{display:inline!important}
  html:root body:not([data-view=home]) .app-header .header-actions > .tip-login{display:none!important}
}
html:root body #tipDialog .tip-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
html:root body #tipDialog .tip-msg{margin:6px 0 0;padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:600}
html:root body #tipDialog .tip-msg.success{background:color-mix(in srgb,#3ddc84 18%,transparent);color:var(--ink)}
html:root body #tipDialog .tip-msg.error{background:color-mix(in srgb,#ff5a5f 18%,transparent);color:var(--ink)}
html:root body #tipDialog .dialog-actions .primary{min-width:130px}

/* Aktiviteter: a cleaner hero with a more useful, prominent place control. */
html.web-build:root body #filterDialog .act-hero h2{margin-top:0!important;margin-bottom:14px!important}
html:root body #filterDialog .act-location-row{display:flex;align-items:center;margin:0 0 4px}
html:root body #filterDialog .act-location{
  min-height:44px!important;margin:0!important;padding:0 17px 0 14px!important;gap:8px!important;
  border:1px solid color-mix(in srgb,var(--ks-lykt) 42%,var(--border))!important;
  background:color-mix(in srgb,var(--ks-lykt) 14%,var(--surface))!important;
  box-shadow:0 12px 28px -20px color-mix(in srgb,var(--ks-lykt) 70%,transparent),inset 0 1px rgba(255,255,255,.08)!important;
  font:750 17px/1 var(--body)!important;
}
html:root body #filterDialog .act-location [data-icon]{width:19px!important;height:19px!important}
html:root body #filterDialog .act-location i{font-size:13px!important;margin-left:2px}
html:root body #filterDialog .act-location:hover{background:color-mix(in srgb,var(--ks-lykt) 22%,var(--surface))!important}
/* The header sticker remains unclipped above the app chrome. */
html:root body .app-header{overflow:visible!important}
html:root body .app-header>.brand-stack{z-index:1305!important}
@media (max-width:639px){
  html:root body #filterDialog .act-location{min-height:40px!important;padding:0 14px 0 12px!important;font-size:15.5px!important}
  html:root body #filterDialog .act-location [data-icon]{width:17px!important;height:17px!important}
}

/* Aktiviteter keeps its original top edge. While it is open, lift the header stacking
   context above the surface so the complete logo and BETA badge can float over it. */
html.web-build:root body:has(#filterDialog.nav-visible[open]) .app-header{
  z-index:1600!important;
  overflow:visible!important;
}
html.web-build:root body:has(#filterDialog.nav-visible[open]) .app-header>.brand-stack{
  position:relative!important;
  z-index:1605!important;
  overflow:visible!important;
}

/* Keep the selected place as prominent as it is on the front page in every main view.
   Available width, rather than typography, adapts around navigation and account controls. */
html.web-build:root body[data-view] .app-header > #locationBtn.brand-location,
html.nav-top.web-build:root body[data-view] .app-header > #locationBtn.brand-location{
  min-width:0!important;
  max-width:calc(50% - 300px)!important;
  overflow:hidden!important;
  font-size:58px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
}
html.web-build:root body[data-view] .app-header > #locationBtn.brand-location #locationText,
html.web-build:root body[data-view] .app-header > #locationBtn.brand-location.loc-2l #locationText,
html.nav-top.web-build:root body[data-view] .app-header > #locationBtn.brand-location #locationText,
html.nav-top.web-build:root body[data-view] .app-header > #locationBtn.brand-location.loc-2l #locationText{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media (max-width:1100px) and (min-width:900px){
  html.web-build:root body[data-view] .app-header > #locationBtn.brand-location,
  html.nav-top.web-build:root body[data-view] .app-header > #locationBtn.brand-location{max-width:240px!important}
}
@media (max-width:899px){
  html.web-build:root body[data-view] .app-header > #locationBtn.brand-location,
  html.nav-top.web-build:root body[data-view] .app-header > #locationBtn.brand-location{
    flex:1 1 auto!important;
    max-width:none!important;
    margin-left:8px!important;
    padding-inline:4px!important;
    font-size:34px!important;
  }
}

/* Header room (set by home-row.js when the tab bar sits in the header and space runs out):
   the right-hand group compacts step by step instead of sliding under the tab bar. */
html:root body .app-header.hdr-c1 .header-actions > #accountBtn{width:36px!important;min-width:36px!important;padding:0!important;justify-content:center!important}
html:root body .app-header.hdr-c1 .header-actions > #accountBtn #accountLabel{display:none!important}
html:root body .app-header.hdr-c2 .header-actions > .tip-login{width:40px!important;min-width:40px!important;padding:0!important;justify-content:center!important}
html:root body .app-header.hdr-c2 .header-actions > .tip-login #tipLoginLabel{display:none!important}
html:root body .app-header.hdr-c3 .desktop-theme-switch{display:none!important}

/* «Obs!» notice on the landing page (front page only, closable) */


/* «Obs!» is a small blocking pop-up: the page waits until it is closed with the big «Lukk» (or ✕). */
html:root body dialog.obs-modal{
  position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 32px));max-width:none;height:fit-content;
  padding:26px 22px 20px;border-radius:24px;border:1px solid color-mix(in srgb,#9b82e8 40%,transparent);
  background:color-mix(in srgb,var(--surface,#1d1b44) 94%,#9b82e8 6%);color:var(--ink);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.75);text-align:center;
}
html:root body dialog.obs-modal::backdrop{background:rgba(10,8,30,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
html[data-theme=light]:root body dialog.obs-modal::backdrop{background:rgba(40,30,90,.32)}
html:root body dialog.obs-modal[open]{animation:obsIn .32s cubic-bezier(.2,.9,.25,1.1)}
@keyframes obsIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
html:root body dialog.obs-modal .obs-badge{display:inline-block;padding:4px 12px;border-radius:9px;font:900 13px/1.2 var(--body);letter-spacing:.05em;color:#fff;background:linear-gradient(100deg,#f078a4,#9b82e8)}
html:root body dialog.obs-modal p{margin:14px 4px 20px;font-size:16px;line-height:1.5;font-weight:600;color:color-mix(in srgb,var(--ink) 90%,transparent)}
html:root body dialog.obs-modal .obs-lukk{
  display:block;width:100%;min-height:54px;border:0;border-radius:16px;cursor:pointer;
  background:linear-gradient(100deg,#f078a4,#9b82e8);color:#fff;font:800 18px/1 var(--body);letter-spacing:.01em;
  box-shadow:0 14px 30px -14px rgba(240,120,164,.8);
}
html:root body dialog.obs-modal .obs-lukk:hover{filter:brightness(1.06)}
html:root body dialog.obs-modal .obs-lukk:focus-visible{outline:3px solid #fff;outline-offset:3px}
html:root body dialog.obs-modal .obs-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);font-size:15px}
html:root body dialog.obs-modal .obs-x:hover{background:color-mix(in srgb,var(--ink) 16%,transparent)}
@media (prefers-reduced-motion:reduce){html:root body dialog.obs-modal[open]{animation:none}}
/* Aktiviteter open: the header is lifted above the panel (for the logo), so lift the tab bar above the header
   too – otherwise it sits under the header's frosted glass and looks blurred/gone. */
html.web-build:root body:has(#filterDialog.nav-visible[open]) .tabbar{z-index:1610!important}

/* Arrangørsiden: lenke i «Meld inn et arrangement» */
html:root body #submitDialog .org-cta{display:flex;align-items:center;justify-content:center;min-height:46px;margin:2px 0 12px;padding:0 14px;border-radius:14px;text-decoration:none;font-weight:800;text-align:center}