/* Turbølla, felles designlag.

   Forsiden og sveipesiden hadde hver sin kopi av de samme tokenene og de
   samme knappene. To kopier glir fra hverandre: sveipesiden hadde
   allerede en annen knapperadius og en annen aktivfarge enn forsiden.
   Her ligger det som skal være likt, og bare det. Alt som hører til én
   side blir liggende i den sidas egen stil.

   Fargesystemet, så det ikke blir tilfeldig igjen:

     coral   det du har valgt i filteret
     lime    dine egne ting: favoritter, besøkt, kontoen din
     sol     advarsler og ting som venter på deg

   Reglene over gjelder begge sidene. Står du og lurer på hvilken farge
   noe skal ha, er spørsmålet hvem som eier tilstanden. */

:root{
  --bunn:#0C0A22;
  --flate:rgba(25,18,67,.55);
  --flate2:rgba(25,18,67,.85);
  --glod:#573FD6;
  --coral:#FF5E5B;
  --lime:#C9F24C;
  --sol:#FFC531;
  --paakoral:#12102E;
  --tekst:#F4F2FF;
  --dempet:#A9A3D0;
  --svak:#8D86BE;
  --kant:rgba(244,242,255,.09);
  --kanthover:rgba(255,94,91,.55);
  --disp:'Bricolage Grotesque',ui-rounded,system-ui,'Segoe UI',sans-serif;
  --brod:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Avstander. Sju trinn holder, og da blir de faktisk brukt. */
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:24px; --s6:34px; --s7:48px;

  /* Rundinger. Små flater får liten radius, store får stor. */
  --r1:12px; --r2:18px; --r3:26px;

  /* Bunnlinja på mobil. Sidene trenger målet til padding-bottom. */
  --bunnlinje:62px;
}

*,*::before,*::after{ box-sizing:border-box }

body{
  margin:0;background:var(--bunn);color:var(--tekst);
  font-family:var(--brod);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

a{ color:var(--lime) }

/* ------------------------------------------------------------- knapper */

.knapp{
  display:inline-flex;align-items:center;gap:8px;background:var(--flate);
  border:1px solid var(--kant);border-radius:999px;padding:11px 20px;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--tekst);
  cursor:pointer;transition:border-color .2s,background .2s,filter .2s;
  min-height:44px;white-space:nowrap;text-decoration:none;
}
.knapp:hover{ border-color:var(--kanthover) }
.knapp:focus-visible{ outline:3px solid var(--coral);outline-offset:3px }
.knapp.primer{
  background:var(--coral);border-color:var(--coral);color:var(--paakoral);
  font-weight:700;
}
.knapp.primer:hover{ filter:brightness(1.08) }
.knapp.min{ border-color:rgba(201,242,76,.4);color:var(--lime) }
.knapp svg{ width:17px;height:17px;flex:0 0 auto }
.knapp[disabled]{ opacity:.5;cursor:default }

/* --------------------------------------------------------------- piller */

.pille{
  background:transparent;border:1px solid var(--kant);border-radius:999px;
  padding:8px 15px;font-family:inherit;font-size:14px;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s;
  color:var(--dempet);min-height:38px;display:inline-flex;align-items:center;
  gap:7px;text-decoration:none;
}
.pille:hover{ border-color:var(--kanthover);color:var(--tekst) }
.pille:focus-visible{ outline:3px solid var(--coral);outline-offset:2px }
.pille .ant{ font-size:12px;color:var(--svak);font-variant-numeric:tabular-nums }
.pille.paa{
  background:var(--coral);border-color:var(--coral);color:var(--paakoral);
  font-weight:700;
}
.pille.paa .ant{ color:rgba(18,16,46,.66) }
.pille.tom{ opacity:.34;cursor:default }
.pille.tom:hover{ border-color:var(--kant);color:var(--dempet) }
/* Lime er dine egne lister, ikke filtervalg. */
.pille.min{ border-color:rgba(201,242,76,.4);color:var(--lime) }
.pille.min.paa{ background:var(--lime);border-color:var(--lime);color:var(--paakoral) }
.pille.min.paa .ant{ color:rgba(18,16,46,.66) }

/* ----------------------------------------------------------- skjemafelt */

input[type=text],input[type=password],input[type=search]{
  font-family:inherit;font-size:16px;padding:11px 14px;border-radius:var(--r1);
  border:1px solid var(--kant);background:rgba(0,0,0,.25);color:var(--tekst);
  min-width:0;
}
input[type=text]:focus-visible,input[type=password]:focus-visible,
input[type=search]:focus-visible{ outline:3px solid var(--coral);outline-offset:2px }

/* ------------------------------------------------------- slør og dialog */

.slor{
  position:fixed;inset:0;background:rgba(6,5,20,.82);
  backdrop-filter:blur(3px);display:none;z-index:70;
}
.slor.paa{ display:grid;place-items:center;padding:20px }
.dialog{
  background:var(--flate2);border:1px solid var(--kant);
  border-radius:var(--r3);padding:24px;max-width:400px;width:100%;
}
.dialog h2{ font-family:var(--disp);margin:0 0 6px;font-size:22px }
.dialog p{ color:var(--dempet);font-size:13.5px;margin:0 0 14px }
.dialog label{ display:block;font-size:13px;color:var(--svak);margin:12px 0 5px }
.dialog input{ width:100% }
.melding{ font-size:13px;color:var(--sol);margin:10px 0 0;min-height:1.2em }

/* ------------------------------------------------- bildestripe med sveip */

.strip{
  display:flex;overflow-x:auto;overflow-y:hidden;height:100%;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{ display:none }
.strip>div{ flex:0 0 100%;scroll-snap-align:center;height:100% }

.prikker{
  position:absolute;left:0;right:0;bottom:8px;display:flex;
  justify-content:center;gap:5px;pointer-events:none;
}
.prikker i{
  width:6px;height:6px;border-radius:50%;background:rgba(244,242,255,.45);
  transition:background .2s,transform .2s;
}
.prikker i.paa{ background:#fff;transform:scale(1.35) }

/* ------------------------------------------------------- bunnlinje mobil

   Fire mål, alltid innen rekkevidde for tommelen. Den vises bare på
   smale skjermer: på desktop er alt synlig uansett, og da er en fast
   linje bare noe som spiser høyde. */

.bunnlinje{ display:none }

@media(max-width:860px){
  .bunnlinje{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(12,10,34,.93);backdrop-filter:blur(10px);
    border-top:1px solid var(--kant);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .bunnlinje a,.bunnlinje button{
    appearance:none;border:0;background:none;font-family:inherit;
    color:var(--svak);text-decoration:none;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 4px 8px;font-size:10.5px;letter-spacing:.04em;
    min-height:var(--bunnlinje);
  }
  .bunnlinje svg{ width:21px;height:21px }
  .bunnlinje .paa{ color:var(--lime) }
  .bunnlinje .teller2{ position:absolute;transform:translate(16px,-4px) }
  body{ padding-bottom:calc(var(--bunnlinje) + env(safe-area-inset-bottom,0)) }
}

/* Teller som henger på en knapp, brukt både i filterknappen og bunnlinja. */
.teller2{
  display:inline-grid;place-items:center;min-width:19px;height:19px;
  margin-left:7px;padding:0 5px;border-radius:999px;background:var(--coral);
  color:var(--paakoral);font-size:11.5px;font-weight:800;
}
.teller2[hidden]{ display:none }

/* --------------------------------------------------------------- hjelp */

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

/* Alle bevegelser av, ikke bare bakgrunnen. Den gamle regelen dekket to
   animasjoner, mens kortene fortsatt hoppet og arket fortsatt gled inn. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}