/* Glas: ett lyxigare lager ovanpå grunden. Frostat glas, en levande bakgrund, fjädrande tryck och
   mjuka övergångar. Allt här kan stängas av för den som valt mindre rörelse i telefonen. */

:root {
  --glas: rgba(255, 255, 255, .56);
  --glas-tat: rgba(255, 255, 255, .78);
  --glas-kant: rgba(255, 255, 255, .8);
  --glas-blur: blur(22px) saturate(175%);
  --glans: inset 0 1px 0 rgba(255, 255, 255, .7);
  --djup-skugga: 0 2px 6px rgba(42, 27, 77, .05), 0 18px 44px rgba(42, 27, 77, .11);
  --fjader: cubic-bezier(.22, 1.35, .36, 1);
  --mjuk: cubic-bezier(.2, .8, .2, 1);
  --r: 26px;
}
body.natt {
  --glas: rgba(52, 34, 104, .38);
  --glas-tat: rgba(40, 26, 84, .82);
  --glas-kant: rgba(255, 255, 255, .1);
  --glans: inset 0 1px 0 rgba(255, 255, 255, .09);
  --djup-skugga: 0 2px 6px rgba(0, 0, 0, .25), 0 22px 50px rgba(0, 0, 0, .38);
}

/* ---------- Levande bakgrund (aurora) ---------- */
body::before {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 12%, rgba(160, 132, 219, .38), transparent 70%),
    radial-gradient(34% 30% at 88% 28%, rgba(244, 201, 160, .30), transparent 70%),
    radial-gradient(46% 40% at 55% 98%, rgba(110, 79, 191, .22), transparent 70%);
  filter: blur(24px);
  animation: aurora 28s var(--mjuk) infinite alternate;
}
body.natt::before {
  background:
    radial-gradient(40% 34% at 14% 8%, rgba(110, 79, 191, .5), transparent 70%),
    radial-gradient(34% 30% at 92% 34%, rgba(224, 85, 140, .16), transparent 70%),
    radial-gradient(48% 42% at 50% 104%, rgba(74, 47, 133, .6), transparent 70%);
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(4%, -3%, 0) scale(1.1) rotate(4deg); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.05) rotate(-3deg); }
}

/* ---------- Typografi ---------- */
.stor { font-weight: 800; letter-spacing: -.035em; }
.mellan { letter-spacing: -.025em; }
.halsning h1 { background: linear-gradient(120deg, var(--text) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Glaskort ---------- */
.kort, .lada, .appsteg {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-kant);
  box-shadow: var(--glans), var(--djup-skugga);
  border-radius: var(--r);
}
.kort.halo { background: color-mix(in srgb, var(--halo) 70%, transparent); }
body.natt .kort.halo { background: rgba(160, 132, 219, .12); }
.kort.mork, .lada {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(160, 132, 219, .35), transparent 55%),
    linear-gradient(160deg, rgba(74, 47, 133, .95), rgba(42, 27, 77, .96) 55%, rgba(24, 14, 48, .97));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 56px rgba(42, 27, 77, .32);
}
.appsteg { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.bildkort { border-radius: var(--r); box-shadow: 0 24px 56px rgba(42, 27, 77, .28); }
.bildkort::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .08); }


/* ---------- Fjädrande tryck ---------- */
:is(.kort.lank, .bildkort, .knapp, .ikonknapp, .chip, .uppgift, .val, .q-rutor button, .q-portratt button, .q-bildkort button,
  .q-ikonkort button, .q-piller button, .bildval button, .l-kvall, .l-fas, .l-coach, .flikar a, .q-koppar button, .q-nattlinje-knappar button) {
  transition: transform .45s var(--fjader), box-shadow .3s var(--mjuk), background .25s, border-color .25s, color .25s, opacity .25s;
  -webkit-tap-highlight-color: transparent;
}
:is(.kort.lank, .bildkort, .knapp, .ikonknapp, .chip, .val, .q-rutor button, .q-portratt button, .q-bildkort button,
  .q-ikonkort button, .q-piller button, .bildval button, .l-kvall, .l-fas, .q-koppar button, .q-nattlinje-knappar button):active {
  transform: scale(.955); transition-duration: .09s;
}
.uppgift:active { transform: scale(.985); transition-duration: .09s; }

/* ---------- Knappar ---------- */
.knapp { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 26px rgba(42, 27, 77, .26); }
.knapp.lila, .q-portratt-etikett {
  background: linear-gradient(135deg, #8A6BE6 0%, #6E4FBF 45%, #4A2F85 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 30px rgba(110, 79, 191, .42);
}
.knapp.ljus { background: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0, 0, 0, .14); }
.knapp.kontur { background: var(--glas); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); box-shadow: inset 0 0 0 1px var(--glas-kant), 0 6px 16px rgba(42, 27, 77, .08); }
.ikonknapp { background: var(--glas); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); border-color: var(--glas-kant); box-shadow: var(--glans), 0 6px 16px rgba(42, 27, 77, .08); }

/* ---------- Toppen: blir frostat glas när man scrollar ---------- */
.sida > .topp { position: sticky; top: 0; z-index: 40; margin: calc(-18px - var(--sakert-over)) -18px 18px; padding: calc(10px + var(--sakert-over)) 18px 10px; transition: background .3s, box-shadow .3s; }
body.skrollad .sida > .topp {
  background: var(--glas-tat); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
  box-shadow: 0 1px 0 var(--linje), 0 10px 30px rgba(42, 27, 77, .06);
}

/* ---------- Flikraden: flytande glaskapsel med en lysande pill som glider ---------- */
.flikar {
  background: var(--glas-tat); border: 1px solid var(--glas-kant); border-radius: 32px;
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 24px 60px rgba(42, 27, 77, .24);
  view-transition-name: flikar;
}
body.natt .flikar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .5); }
.flikar a { z-index: 1; }
.flikar a[aria-current="page"] { background: none; color: var(--text); }
.flikar a[aria-current="page"] svg { animation: hopp .55s var(--fjader); color: var(--accent); }
.flik-pill {
  position: absolute; top: 8px; bottom: 8px; left: 8px; width: calc((100% - 16px) / 5); border-radius: 24px; z-index: 0;
  background: linear-gradient(160deg, rgba(160, 132, 219, .26), rgba(110, 79, 191, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(110, 79, 191, .14), 0 6px 16px rgba(110, 79, 191, .18);
  transform: translateX(calc(var(--fran, 0) * 100%));
  transition: transform .55s var(--fjader);
}
body.natt .flik-pill { background: linear-gradient(160deg, rgba(160, 132, 219, .3), rgba(110, 79, 191, .2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px rgba(0, 0, 0, .3); }
@keyframes hopp { 0% { transform: scale(1); } 35% { transform: scale(1.28) translateY(-2px); } 100% { transform: scale(1); } }

/* ---------- Uppgifter: rutan fylls med en fjäder ---------- */
.uppgift .ruta { width: 30px; height: 30px; border-width: 2px; background: var(--glas); }
.uppgift.klar .ruta { background: linear-gradient(135deg, #8A6BE6, #6E4FBF); border-color: transparent; box-shadow: 0 6px 16px rgba(110, 79, 191, .45); animation: bock-in .55s var(--fjader); }
@keyframes bock-in { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1.05); } }

/* ---------- Ark: glid upp med en fjäder, bakgrunden suddas ---------- */
.ark-bakgrund { background: rgba(15, 8, 32, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ark { background: var(--glas-tat); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glas-kant); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 -20px 60px rgba(42, 27, 77, .25); animation: arkupp .55s var(--fjader); }

/* ---------- Partiklar och konfetti ---------- */
.gnista { position: fixed; z-index: 300; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; animation: gnista .7s var(--mjuk) forwards; }
@keyframes gnista { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.konfetti { position: fixed; z-index: 300; top: -12px; width: 9px; height: 14px; border-radius: 3px; pointer-events: none; animation: konfetti var(--tid, 2.6s) cubic-bezier(.25, .6, .4, 1) forwards; }
@keyframes konfetti { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .9; } }
.dagen-klar { animation: glod 1.6s var(--mjuk); }
@keyframes glod { 0% { box-shadow: var(--glans), var(--djup-skugga); } 30% { box-shadow: 0 0 0 4px rgba(160, 132, 219, .5), 0 0 60px rgba(160, 132, 219, .6); } 100% { box-shadow: var(--glans), var(--djup-skugga); } }

/* ---------- Övergångar mellan vyer ---------- */
@keyframes vy-ut { to { opacity: 0; transform: scale(.985); } }
@keyframes vy-in { from { opacity: 0; transform: translateY(14px) scale(.99); } }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Idag: hero med dagsring ---------- */
.idag-hero { margin-bottom: 26px; }
.idag-hero-rad { display: flex; align-items: center; gap: 14px; }
.idag-hero .stor { font-size: 38px; line-height: 1.02; }
.idag-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 13px 7px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: var(--text-2);
  background: var(--glas); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); border: 1px solid var(--glas-kant); box-shadow: var(--glans), 0 4px 14px rgba(42, 27, 77, .07); }
.idag-chip svg { width: 16px; height: 16px; color: var(--accent); }
.dagsring { position: relative; width: 104px; height: 104px; flex: none; filter: drop-shadow(0 10px 22px rgba(110, 79, 191, .28)); }
.dagsring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-spar { fill: none; stroke: var(--linje-2); stroke-width: 9; opacity: .7; }
.ring-bage { fill: none; stroke: url(#ringfarg); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--fjader); }
.dagsring-mitt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dagsring-mitt b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.dagsring-mitt small { font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.dagsring.full { animation: ringpuls 1.4s var(--mjuk); filter: drop-shadow(0 0 22px rgba(201, 179, 255, .75)); }
@keyframes ringpuls { 30% { transform: scale(1.08); } }
.fasband span { height: 6px; background: color-mix(in srgb, var(--linje-2) 70%, transparent); }
.fasband span i { background: linear-gradient(90deg, #A084DB, #6E4FBF); box-shadow: 0 0 10px rgba(160, 132, 219, .7); }

/* ---------- Appkortet: två rutor ---------- */
.appsteg-rutnat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.appruta { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px; border-radius: 20px; color: inherit; font: inherit; cursor: pointer;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.appruta b { font-size: 15px; line-height: 1.2; margin-top: 8px; }
.appruta small { color: #CDBFEA; font-size: 12.5px; }
.appruta .appsteg-ikon { background: rgba(255, 255, 255, .16); }
.appruta.klar .appsteg-ikon { background: linear-gradient(135deg, #A084DB, #6E4FBF); box-shadow: 0 6px 14px rgba(110, 79, 191, .5); }
.appruta.av { opacity: .6; cursor: default; }
.appruta:active { transform: scale(.96); }

/* ---------- Saga som en levande orb ---------- */
.saga-orb { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #E9DDFF 18%, #A084DB 55%, #4A2F85 100%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 10px 26px rgba(110, 79, 191, .45); }
.saga-orb i { position: absolute; inset: -30%; border-radius: 45%; mix-blend-mode: screen; opacity: .75; animation: orbsnurr 9s linear infinite; }
.saga-orb i:nth-child(1) { background: radial-gradient(circle at 30% 30%, rgba(229, 143, 181, .9), transparent 50%); }
.saga-orb i:nth-child(2) { background: radial-gradient(circle at 70% 60%, rgba(138, 107, 230, .9), transparent 50%); animation-duration: 12s; animation-direction: reverse; }
.saga-orb i:nth-child(3) { background: radial-gradient(circle at 50% 80%, rgba(244, 201, 160, .7), transparent 45%); animation-duration: 15s; }
@keyframes orbsnurr { to { transform: rotate(360deg); } }
.saga-namn { font-weight: 750; font-size: 15px; margin-bottom: 3px; }
.saga-namn span { font-weight: 500; color: var(--text-3); margin-left: 6px; font-size: 13.5px; }
.saga-rad { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; line-height: 1.45; color: var(--text-2); margin: 0; }

/* ---------- Lektionen som bildkort ---------- */
.lektionskort { min-height: 230px; }
.lektionskort p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lektion-tid { position: absolute; top: 16px; right: 16px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .25); }

/* ---------- Uppgifter som glasrader ---------- */
.uppgift { border-top: 0; padding: 12px; margin: 0 -8px 6px; border-radius: 18px; transition: background .25s, transform .45s var(--fjader); }
.uppgift:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.uppgift.klar .uppgift-text b { color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-decoration-thickness: 2px; }

/* Sömnfönstret: stora siffror med gradient. */
.fonsterkort .klockor { background: linear-gradient(120deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Molnen från Pätches hemsida ----------
   Samma målade moln som i butiken: lila på dagen, nattmoln på kvällen. Bakgrunden ligger fast
   bakom allt, glaset ovanpå suddar dem lite. */
body { background-color: #F6F2FE; }
body.natt { background-color: #130A2A; }
body::after {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url(/img/moln/bakgrund.webp) center bottom / cover no-repeat;
  animation: molndrift 70s ease-in-out infinite alternate;
}
body.natt::after { background-image: url(/img/moln/bakgrund-natt.webp); }
@keyframes molndrift { from { transform: scale(1.04) translateX(-1.5%); } to { transform: scale(1.04) translateX(1.5%); } }
@media (min-width: 700px) { body::after { background-image: url(/img/moln/sektion.webp); } body.natt::after { background-image: url(/img/moln/sektion-natt.webp); } }
body::before { opacity: .7; }

/* Headern: molnremsan från butikens header när man scrollar. */
body.skrollad .sida > .topp { background: url(/img/moln/topp.webp) center / cover, var(--glas-tat); }
body.natt.skrollad .sida > .topp { background: url(/img/moln/sektion-natt.webp) center 20% / cover, var(--glas-tat); }

/* Ljuslila kort: moln nerifrån, som recensionskorten i butiken. */
.kort.halo { background: url(/img/moln/kort-a.webp) center bottom / 100% auto no-repeat, #F4EFFD; }
body.natt .kort.halo { background: url(/img/moln/sektion-natt.webp) center bottom / cover no-repeat, #1E1240; }

/* Mörka kort: nattmolnen i kanterna under färgen. */
.kort.mork, .lada {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(160, 132, 219, .28), transparent 55%),
    linear-gradient(180deg, rgba(42, 27, 77, .55), rgba(24, 14, 48, .35) 60%, rgba(24, 14, 48, .1)),
    url(/img/moln/sektion-natt.webp) center bottom / cover no-repeat, #1E1240;
}

/* Arken: moln längst ner. */
.ark { background: url(/img/moln/kort-a.webp) center bottom / 100% auto no-repeat, var(--glas-tat); }
body.natt .ark { background: url(/img/moln/sektion-natt.webp) center bottom / cover no-repeat, var(--glas-tat); }

@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ---------- Sömnljud ---------- */
.sl-hero { display: flex; align-items: center; gap: 16px; margin: 6px 0 10px; }
.sl-hero-text { flex: 1; min-width: 0; }
.sl-status { color: var(--text-3); font-weight: 600; font-size: 15px; margin-top: 6px; }
.sl-spela-ram { position: relative; width: 96px; height: 96px; flex: none; display: grid; place-items: center; }
.sl-spela-ram i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(160, 132, 219, .5); opacity: 0; }
body.sl-spelar .sl-spela-ram i { animation: sl-puls 3.2s var(--mjuk) infinite; }
body.sl-spelar .sl-spela-ram i:nth-child(2) { animation-delay: 1.6s; }
@keyframes sl-puls { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.sl-spela { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 0; color: #fff; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, #A084DB, #6E4FBF 50%, #4A2F85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 34px rgba(110, 79, 191, .5);
  transition: transform .45s var(--fjader); }
.sl-spela:active { transform: scale(.92); }
.sl-spela svg { width: 32px; height: 32px; }
.sl-spela.pa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 6px rgba(160, 132, 219, .18), 0 14px 44px rgba(160, 132, 219, .7); }
.sl-rubrik { margin: 4px 2px 10px; }

.sl-blandningar { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 8px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.sl-blandningar::-webkit-scrollbar { display: none; }
.sl-blandning { flex: none; width: 150px; min-height: 96px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; text-align: left; padding: 14px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); color: #fff; cursor: pointer; font: inherit;
  background: linear-gradient(180deg, rgba(42, 27, 77, .2), rgba(24, 14, 48, .65)), url(/img/moln/sektion-natt.webp) center / cover, #1E1240;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 26px rgba(42, 27, 77, .25); transition: transform .45s var(--fjader); }
.sl-blandning:active { transform: scale(.95); }
.sl-blandning b { font-size: 15.5px; line-height: 1.2; }
.sl-blandning small { color: #CDBFEA; font-size: 12.5px; line-height: 1.3; }

.sl-rutnat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sl-ruta { position: relative; display: grid; justify-items: center; gap: 8px; padding: 16px 6px 14px; border-radius: 22px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--glas); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); border: 1px solid var(--glas-kant); box-shadow: var(--glans), 0 6px 18px rgba(42, 27, 77, .07);
  transition: transform .45s var(--fjader), background .3s, box-shadow .3s, color .3s; }
.sl-ruta:active { transform: scale(.93); }
.sl-ikon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); transition: background .3s, color .3s, transform .5s var(--fjader); }
.sl-ikon svg { width: 25px; height: 25px; }
.sl-namn { font-size: 13px; font-weight: 650; line-height: 1.2; text-align: center; }
.sl-ruta.pa { color: #fff; background: linear-gradient(160deg, #8A6BE6, #5B3DA8 60%, #3B2672); border-color: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 26px rgba(110, 79, 191, .45); }
.sl-ruta.pa .sl-ikon { color: #fff; background: rgba(255, 255, 255, .18); transform: scale(1.06); }
.sl-eq { position: absolute; top: 12px; right: 12px; display: none; gap: 2px; align-items: flex-end; height: 12px; }
.sl-eq i { width: 3px; border-radius: 2px; background: currentColor; animation: sl-eq 1s ease-in-out infinite alternate; }
.sl-eq i:nth-child(2) { animation-delay: .3s; } .sl-eq i:nth-child(3) { animation-delay: .6s; }
@keyframes sl-eq { from { height: 3px; } to { height: 12px; } }
body.sl-spelar .sl-ruta.pa .sl-eq, .sl-eq.pa { display: flex; }
.sl-eq.pa { position: static; height: 18px; gap: 3px; color: #CDBFEA; } .sl-eq.pa i { width: 4px; }

.sl-brus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sl-brusknapp { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; cursor: pointer; font: inherit; font-weight: 650; font-size: 14.5px; color: var(--text);
  background: var(--glas); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); border: 1px solid var(--glas-kant); box-shadow: var(--glans), 0 6px 18px rgba(42, 27, 77, .07); transition: transform .45s var(--fjader), background .3s, color .3s; }
.sl-brusknapp svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.sl-brusknapp:active { transform: scale(.95); }
.sl-brusknapp.pa { color: #fff; background: linear-gradient(160deg, #8A6BE6, #5B3DA8 60%, #3B2672); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px rgba(110, 79, 191, .4); }
.sl-brusknapp.pa svg { color: #fff; }

.sl-mix { display: grid; gap: 14px; }
.sl-reglage { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; font-weight: 650; font-size: 14.5px; }
.sl-reglage input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; outline: none;
  background: linear-gradient(90deg, #A084DB, #6E4FBF) 0 / var(--v, 50%) 100% no-repeat, color-mix(in srgb, var(--linje-2) 80%, transparent); }
.sl-reglage input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(42, 27, 77, .3), 0 0 0 1px rgba(42, 27, 77, .06); }
.sl-reglage input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(42, 27, 77, .3); }
.sl-timer { flex-wrap: wrap; }
.sl-fot { font-size: 13.5px; text-align: center; padding: 4px 12px; }

/* Kortet på Kvällen. */
.sl-kort-ikon { width: 48px; height: 48px; border-radius: 15px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; flex: none; }

/* ---------- Beskärning av profilbilden ---------- */
.beskar-ram { position: relative; width: min(280px, 100%); aspect-ratio: 1; margin: 6px auto; border-radius: 24px; overflow: hidden; background: #1E1240; touch-action: none; }
.beskar-duk { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.beskar-ram::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 69.5%, rgba(15, 8, 32, .55) 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); border-radius: inherit; }
.beskar-reglage { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-weight: 700; font-size: 20px; }
.beskar-zoom { flex: 1; accent-color: var(--accent); }

/* Första raden i ett kort utan rubrik ska inte ha en linje ovanför sig. */
.kort > :is(a, button):first-child, .ark .stapel > p + :is(a, button) { border-top: 0 !important; }

/* ---------- Flytande glas i flikraden ----------
   Linsen böjer innehållet bakom sig (SVG-filtret i ui.js). Webbläsare utan stöd för url() i
   backdrop-filter faller tillbaka på det frostade glaset ovan. */
.flikar { touch-action: none; user-select: none; -webkit-user-select: none; }
.flikar.drar .flik-pill {
  transition: transform .12s ease-out;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: url(#lins-flik) saturate(160%) brightness(1.06); backdrop-filter: url(#lins-flik) saturate(160%) brightness(1.06);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .5), inset 1px 0 1px rgba(255, 255, 255, .4), inset -1px 0 1px rgba(255, 255, 255, .4),
    0 12px 28px rgba(42, 27, 77, .22), 0 2px 6px rgba(42, 27, 77, .12);
}
body.natt .flikar.drar .flik-pill { background: rgba(255, 255, 255, .06); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .45), inset 0 -1px 1px rgba(255, 255, 255, .2), 0 12px 28px rgba(0, 0, 0, .45); }
.flikar.drar a { transition: color .15s, transform .3s var(--fjader); }
.flikar.drar a.under { color: var(--text); transform: scale(1.18); }
.flikar.drar a[aria-current="page"]:not(.under) { color: var(--text-3); }

/* ---------- Flikbyte som sidor bredvid varandra ----------
   Bara sidans innehåll glider. Bakgrunden och menyn står still. Nästa sida tar vid precis där
   fingret släppte (--svep), så att det ser ut som en enda lång rad av sidor. */
html, body { overscroll-behavior: none; }
.sida { view-transition-name: sida; }
::view-transition-group(sida) { animation: none; }
::view-transition-old(flikar) { animation: none; opacity: 0; }
::view-transition-new(flikar) { animation: none; }
::view-transition-old(sida) { animation: .18s var(--mjuk) both vy-ut; }
::view-transition-new(sida) { animation: .38s var(--mjuk) both vy-in; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
html[data-riktning] ::view-transition-old(sida) { animation: .36s cubic-bezier(.25, .8, .25, 1) both sida-ut-h; }
html[data-riktning] ::view-transition-new(sida) { animation: .36s cubic-bezier(.25, .8, .25, 1) both sida-in-h; }
html[data-riktning="vanster"] ::view-transition-old(sida) { animation-name: sida-ut-v; }
html[data-riktning="vanster"] ::view-transition-new(sida) { animation-name: sida-in-v; }
@keyframes sida-ut-h { from { transform: translateX(var(--svep, 0px)); } to { transform: translateX(-100vw); } }
@keyframes sida-in-h { from { transform: translateX(calc(100vw + var(--svep, 0px))); } to { transform: none; } }
@keyframes sida-ut-v { from { transform: translateX(var(--svep, 0px)); } to { transform: translateX(100vw); } }
@keyframes sida-in-v { from { transform: translateX(calc(-100vw + var(--svep, 0px))); } to { transform: none; } }

/* ---------- Sviten ---------- */
.svitkort { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px 14px; border-radius: 22px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--glas); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); border: 1px solid var(--glas-kant); box-shadow: var(--glans), 0 8px 22px rgba(42, 27, 77, .08);
  transition: transform .45s var(--fjader); }
.svitkort:active { transform: scale(.97); }
.svit-laga { position: relative; width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; color: var(--text-3);
  background: color-mix(in srgb, var(--text-3) 12%, transparent); transition: background .5s, color .5s, box-shadow .5s; }
.svit-laga svg { width: 26px; height: 26px; }
.svitkort.tand .svit-laga, .svit-ark-topp .svit-laga, .svit-fest .svit-laga { color: #fff; background: radial-gradient(circle at 50% 80%, #FFC48A 0%, #E58FB5 45%, #8A6BE6 100%);
  box-shadow: 0 0 0 4px rgba(229, 143, 181, .18), 0 8px 22px rgba(229, 143, 181, .5); }
.svitkort.tand .svit-laga svg { animation: flamma 1.6s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes flamma { 0% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08, 1.12) rotate(2deg); } 100% { transform: scale(.97, 1.04) rotate(-1deg); } }
.svitkort.tands .svit-laga { animation: tandning 1.1s var(--fjader); }
@keyframes tandning { 0% { transform: scale(.6); filter: brightness(2); } 45% { transform: scale(1.35); } 100% { transform: scale(1); filter: none; } }
.svit-mitt { flex: 1; min-width: 0; }
.svit-rad { display: flex; align-items: baseline; gap: 6px; }
.svit-tal { font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.svit-rad span { font-weight: 700; font-size: 14.5px; }
.svit-text { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 3px; line-height: 1.3; }
.svit-vecka { display: flex; gap: 4px; flex: none; }
.svit-prick { width: 20px; height: 28px; border-radius: 8px; display: grid; place-items: end center; padding-bottom: 3px; font-style: normal;
  background: color-mix(in srgb, var(--text-3) 12%, transparent); }
.svit-prick span { font-size: 9.5px; font-weight: 800; color: var(--text-3); }
.svit-prick.pa { background: linear-gradient(180deg, #E58FB5, #8A6BE6); box-shadow: 0 3px 10px rgba(138, 107, 230, .35); }
.svit-prick.pa span { color: #fff; }
.svit-prick.idag:not(.pa) { box-shadow: inset 0 0 0 1.5px var(--accent); animation: idagpuls 2s ease-in-out infinite; }
@keyframes idagpuls { 50% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } }
.svit-ark-topp { display: flex; align-items: center; gap: 14px; }
.svit-laga.stor { width: 60px; height: 60px; border-radius: 20px; } .svit-laga.stor svg { width: 34px; height: 34px; }
.svit-laga.jatte { width: 96px; height: 96px; border-radius: 32px; margin: 4px auto 0; animation: tandning 1.1s var(--fjader); } .svit-laga.jatte svg { width: 54px; height: 54px; }
.svit-beloningar { display: grid; gap: 8px; }
.svit-beloning { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--text-3) 8%, transparent); opacity: .7; }
.svit-beloning b { display: block; font-size: 15px; } .svit-beloning small { color: var(--text-3); font-size: 12.5px; }
.svit-beloning-dag { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--text-3); background: color-mix(in srgb, var(--text-3) 12%, transparent); }
.svit-beloning.las-upp { opacity: 1; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.svit-beloning.las-upp .svit-beloning-dag { color: #fff; background: linear-gradient(135deg, #E58FB5, #8A6BE6); }
.sl-markning { align-self: flex-start; margin-bottom: auto; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: rgba(255, 255, 255, .18); }
.sl-markning svg { width: 13px; height: 13px; display: block; }
.sl-blandning.beloning { background: linear-gradient(180deg, rgba(229, 143, 181, .25), rgba(24, 14, 48, .6)), url(/img/moln/sektion-natt.webp) center / cover, #1E1240; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1.5px rgba(229, 143, 181, .45), 0 10px 26px rgba(138, 107, 230, .35); }
.sl-blandning.last { cursor: default; filter: grayscale(.7); opacity: .55; }
.svitkort { flex-wrap: wrap; }
.svit-vecka { width: 100%; gap: 6px; margin-top: 2px; }
.svit-prick { flex: 1; width: auto; height: 30px; border-radius: 10px; }
.svit-prick span { font-size: 10.5px; }

/* Fasbandet: delen man är i nu är bredare och lyser, så att toppen visar just den delens framsteg. */
.fasband { align-items: center; }
.fasband span.nu { flex: 4; height: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.fasband span:not(.nu) { opacity: .7; }

/* Arken: helt täckande botten, så att molnbilden inte syns som en skarv mot det genomskinliga. */
.ark { background: url(/img/moln/kort-a.webp) center bottom / 100% auto no-repeat, #F6F2FE; }
body.natt .ark { background: url(/img/moln/sektion-natt.webp) center bottom / 100% auto no-repeat, #1A0F36; }

/* ---------- Berättelser (som Instagram) ---------- */
.berattelser { display: flex; gap: 14px; overflow-x: auto; margin: 18px -18px 4px; padding: 4px 18px 6px; scrollbar-width: none; }
.berattelser::-webkit-scrollbar { display: none; }
.berattelse { flex: none; display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--text); transition: transform .45s var(--fjader); }
.berattelse:active { transform: scale(.92); }
.berattelse-ring { width: 70px; height: 70px; border-radius: 50%; padding: 3px; display: grid; place-items: center;
  background: conic-gradient(from 210deg, #F4C9A0, #E58FB5, #A084DB, #6E4FBF, #F4C9A0); box-shadow: 0 6px 18px rgba(138, 107, 230, .3); }
.berattelse.sett .berattelse-ring { background: color-mix(in srgb, var(--text-3) 30%, transparent); box-shadow: none; }
.berattelse-bild { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 3px solid var(--bg, #F6F2FE); background: var(--yta); }
body.natt .berattelse-bild { border-color: #170D2E; }
.berattelse-bild > * { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.berattelse-bild .saga-orb { box-shadow: none; }
.berattelse-namn { font-size: 12px; font-weight: 650; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-ikon { display: grid !important; place-items: center; color: #fff; background: linear-gradient(135deg, #A084DB, #6E4FBF); }
.bv-ikon svg { width: 28px; height: 28px; }
.bv-ikon.laga { background: radial-gradient(circle at 50% 80%, #FFC48A 0%, #E58FB5 45%, #8A6BE6 100%); }

/* Visningen i helskärm. */
.bv { position: fixed; inset: 0; z-index: 400; color: #fff; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  animation: bv-in .32s var(--fjader); transition: transform .2s; }
.bv.bv-ut { animation: bv-ut .26s ease forwards; }
@keyframes bv-in { from { opacity: 0; transform: scale(.92); } }
@keyframes bv-ut { to { opacity: 0; transform: scale(.94); } }
.bv-bakgrund { position: absolute; inset: 0; background: radial-gradient(120% 70% at 20% 10%, rgba(160, 132, 219, .55), transparent 60%), url(/img/moln/bakgrund-natt.webp) center bottom / cover, #130A2A; }
.bv[data-typ="fakta"] .bv-bakgrund { background: radial-gradient(120% 70% at 80% 0%, rgba(229, 143, 181, .45), transparent 60%), url(/img/moln/sektion-natt.webp) center / cover, #1E1240; }
.bv[data-typ="kvall"] .bv-bakgrund { background: linear-gradient(180deg, rgba(19, 10, 42, .2), rgba(19, 10, 42, .85)), var(--bv-bild, url(/img/moln/bakgrund-natt.webp)) center / cover; }
.bv-topp { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + var(--sakert-over)) 12px 0; z-index: 2; }
.bv-staplar { display: flex; gap: 4px; }
.bv-staplar span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.bv-staplar i { display: block; height: 100%; background: #fff; transform-origin: left; }
.bv-rad { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.bv-huvud { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.bv-liten-bild { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; }
.bv-liten-bild > * { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bv-liten-bild .bv-ikon svg { width: 18px; height: 18px; }
.bv-stang { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.bv-yta { position: absolute; inset: 0; display: grid; align-items: center; padding: calc(90px + var(--sakert-over)) 28px calc(60px + var(--sakert-under)); }
.bv-sida { display: grid; gap: 14px; }
.bv-sida.bv-in > * { animation: bv-text .5s var(--mjuk) both; }
.bv-sida.bv-in > *:nth-child(2) { animation-delay: .06s; } .bv-sida.bv-in > *:nth-child(3) { animation-delay: .12s; } .bv-sida.bv-in > *:nth-child(4) { animation-delay: .18s; }
@keyframes bv-text { from { opacity: 0; transform: translateY(16px); } }
.bv-etikett { font-size: 14px; font-weight: 700; color: #E5D9FA; letter-spacing: .01em; }
.bv-sida h2 { font-size: 38px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.bv-sida p { font-size: 22px; line-height: 1.38; font-weight: 500; color: #F4EEFF; }
.bv-sida .knapp { justify-self: start; margin-top: 8px; }
.bv-vecka { display: flex; gap: 8px; margin-top: 6px; }
.bv-vecka i { flex: 1; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.bv-vecka i.pa { background: linear-gradient(90deg, #E58FB5, #A084DB); box-shadow: 0 0 12px rgba(229, 143, 181, .7); }

/* ---------- Flödet ---------- */
.flode { margin-top: 30px; }
.flode-rubrik { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 0 2px 14px; }
.flode-inlagg .vem { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.flode-inlagg .avatar, .flode-inlagg .saga-orb.liten { width: 40px; height: 40px; flex: none; }
.flode-text { font-size: 16px; line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.flode-inlagg .atgarder { margin-top: 12px; flex-wrap: wrap; }
.flode-svara { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text-3); font-weight: 650; font-size: 14px; padding: 8px 6px; }
.flode-svara svg { width: 18px; height: 18px; }
.flode-fakta p { font-size: 20px; line-height: 1.4; font-weight: 600; margin-top: 8px; color: #F4EEFF; }
.flode-fakta .ovanfor { display: inline-flex; align-items: center; gap: 6px; }
.flode-fakta .ovanfor svg { width: 16px; height: 16px; }
.flode-fraga h3 { font-size: 22px; line-height: 1.25; margin-top: 4px; }
.flode-fraga { display: flex; flex-direction: column; }
.kort.flode-inlagg { padding: 18px; border: 1px solid var(--glas-kant); }

/* ---------- Flödet i helskärm (en sida i taget) ---------- */
.fl-vy { position: fixed; inset: 0; z-index: 60; background: #130A2A; color: #fff; }
.fl { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.fl::-webkit-scrollbar { display: none; }
.fl-vakt { height: 1px; }
.fl-sida { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: flex; align-items: center; isolation: isolate;
  background: radial-gradient(120% 70% at 15% 10%, rgba(160, 132, 219, .45), transparent 60%), url(/img/moln/bakgrund-natt.webp) center bottom / cover, #130A2A; }
.fl-fakta { background: radial-gradient(120% 70% at 85% 5%, rgba(229, 143, 181, .4), transparent 60%), url(/img/moln/sektion-natt.webp) center / cover, #1E1240; }
.fl-tanke { background: radial-gradient(100% 60% at 50% 30%, rgba(160, 132, 219, .55), transparent 70%), #1A0F36; }
.fl-ljud { background: radial-gradient(120% 70% at 20% 90%, rgba(244, 201, 160, .3), transparent 60%), url(/img/moln/bakgrund-natt.webp) center / cover, #1A0F36; }
.fl-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fl-lektion::after, .fl-kvall::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19, 10, 42, .15), rgba(19, 10, 42, .85) 75%); }
.fl-innehall { width: 100%; padding: calc(80px + var(--sakert-over)) 76px calc(60px + var(--sakert-under)) 24px; display: grid; gap: 16px; align-content: center; }
.fl-lektion .fl-innehall, .fl-kvall .fl-innehall { align-content: end; align-self: stretch; }
.fl-etikett { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #E5D9FA; }
.fl-etikett svg { width: 18px; height: 18px; }
.fl-stor { font-size: 27px; line-height: 1.32; font-weight: 650; letter-spacing: -.015em; }
.fl-text { font-size: 21px; line-height: 1.45; font-weight: 500; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
.fl-rubrik { font-size: 36px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.fl-innehall p { color: #F1EAFE; }
.fl-innehall .knapp { justify-self: start; }
.fl-vem { display: flex; align-items: center; gap: 12px; }
.fl-vem .avatar, .fl-vem .saga-orb { width: 46px; height: 46px; flex: none; }
.fl-vem b { display: block; font-size: 16px; } .fl-vem small { color: #CDBFEA; font-size: 13px; }
.fl-medalj { display: grid; justify-items: center; text-align: center; gap: 8px; }
.fl-medalj img { filter: drop-shadow(0 18px 40px rgba(160, 132, 219, .55)); animation: medalj-in .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.fl-medalj b { font-size: 24px; }
/* Knapparna till höger, som i TikTok. */
.fl-knappar { position: absolute; right: 12px; bottom: calc(110px + var(--sakert-under)); display: grid; gap: 18px; justify-items: center; }
.fl-knappar .atgarder { display: grid; gap: 18px; margin: 0; }
.fl-knappar button, .fl-knappar a { display: grid !important; justify-items: center; gap: 4px; background: none; border: 0; color: #fff !important; font: inherit; font-size: 11.5px !important; font-weight: 700; text-decoration: none; cursor: pointer; padding: 0 !important; max-width: 64px; text-align: center; }
.fl-knappar svg { width: 30px !important; height: 30px !important; padding: 11px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fl-knappar button.aktiv svg { background: linear-gradient(135deg, #E58FB5, #8A6BE6); }
.fl-stang { position: fixed; z-index: 61; top: calc(14px + var(--sakert-over)); left: 14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fl-stang svg { width: 20px; height: 20px; }
.fl-titel { position: fixed; z-index: 61; top: calc(24px + var(--sakert-over)); left: 0; right: 0; text-align: center; font-weight: 800; font-size: 16px; pointer-events: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }

/* Vägen in till flödet från Idag. */
.flode-ikon { background: linear-gradient(135deg, #E58FB5, #8A6BE6 60%, #4A2F85) !important; }
.lank-berattelse { text-decoration: none; }
.lank-berattelse .berattelse-ring { background: conic-gradient(from 0deg, #E58FB5, #8A6BE6, #F4C9A0, #E58FB5); animation: ringsnurr 6s linear infinite; }
@keyframes ringsnurr { to { filter: hue-rotate(360deg); } }
.flode-oppna { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--accent); font-weight: 700; font-size: 14px; }
.flode-oppna svg { width: 16px; height: 16px; }
.flode-start { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; border-radius: 22px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, rgba(229, 143, 181, .9), rgba(138, 107, 230, .95) 55%, rgba(74, 47, 133, .95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 34px rgba(138, 107, 230, .4); transition: transform .45s var(--fjader); }
.flode-start:active { transform: scale(.97); }
.flode-start b { display: block; font-size: 17px; } .flode-start small { color: #F4EEFF; font-size: 13px; }
.flode-start-ikon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); flex: none; }
.flode-start-ikon svg { width: 22px; height: 22px; }
.fl-nytt { position: fixed; z-index: 62; top: calc(70px + var(--sakert-over)); left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; border: 0; font: inherit; font-weight: 700; font-size: 14px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #E58FB5, #8A6BE6); box-shadow: 0 10px 30px rgba(138, 107, 230, .5); animation: fl-nytt-in .5s var(--fjader); }
@keyframes fl-nytt-in { from { transform: translate(-50%, -30px); opacity: 0; } }
.fl-svar { display: grid; gap: 8px; max-height: 30vh; overflow-y: auto; }
.fl-svar div { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--text-3) 10%, transparent); font-size: 14.5px; }
.fl-svar b { display: block; font-size: 13px; color: var(--text-3); }
.fl-dela-knapp { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); }
/* Arket rullar med fingret även när det är högre än skärmen. */
.ark { overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.ark-bakgrund { touch-action: pan-y; }

/* Inget får sticka ut i sidled. Då blir sidan bredare än skärmen och telefonen räknar om allt,
   så att menyn hoppar (det hände när ringarna kring spelaknappen pulserade). */
html, body { overflow-x: clip; }
@keyframes sl-puls { 0% { transform: scale(.88); opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } }
.sl-om { align-self: center; color: var(--text-3); }
.sl-kallor { display: grid; gap: 12px; }
.sl-kallor div { display: grid; gap: 2px; font-size: 14px; }
.sl-kallor a { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-kallor small { color: var(--text-3); font-size: 12.5px; }
.sl-mix[hidden] { display: none; }
.sl-om { display: block; margin: 0 auto; }

/* Spola i sömnhypnosen: en större yta att träffa och en knopp när man drar. */
.spolbar { position: relative; cursor: pointer; touch-action: none; }
.spolbar::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.spolbar i { position: relative; }
.spolbar i::after { content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); transform: scale(0); transition: transform .25s var(--fjader); }
.spolbar.drar i::after, .spolbar:hover i::after { transform: scale(1); }
.spolbar.drar i { transition: none !important; }
.forlopp .bar.spolbar { overflow: visible; }