/* ============================================================
   NEXTRUM — STARTSIDAN

   Laddas bara av index.html och en/index.html, och SIST:
     nextrum.css → home → cinema → start

   Allt här gäller startsidans scroll, från manifestet och nedåt.
   Hero är orörd med flit — Leo 2026-09-25: "jag vill bevara heron
   för den gillar jag".

   Rörelsen hänger på html.nx-sr, som nextrum-start.js sätter när
   det finns rörelse att visa (NXMotion.tier är full eller lite).
   Inget startläge här gömmer något utan den klassen. Laddar inte
   skriptet står sidan i sitt slutläge, fullt läsbar — samma regel
   som html[data-motion] i cinema, av samma skäl.

   ALL RÖRELSE ÄR ÖVERGÅNGAR, INTE SCROLLRÄKNING (2026-09-25, andra
   varvet). Första versionen räknade om korten, orden och bladet för
   varje bildruta medan man scrollade, och studievyns lutning skrev
   CSS-variabler som tvingade fram en omräkning av hela fönstrets stil
   vid varje musrörelse. Leo: "alla animationer måste se mer smooth ut
   och inte laggiga". Nu sätter skriptet EN klass när något kommer in
   i bild, och resten är transition på opacity, transform, translate
   och scale — det webbläsaren kör på grafikkortet, oavsett vad
   huvudtråden håller på med. Bandet är en Web Animation av samma
   skäl. Lägg inte tillbaka något som skriver stil per bildruta.
   ============================================================ */

/* ============================================================
   1. KORTEN

   Papperet (#F2EDE3) bodde här medan det bara gällde startsidan.
   Sedan 2026-09-25 är det hela sajtens och står i nextrum-cinema.css.
   Kvar här är det som bara startsidan använder.
   ============================================================ */
:root{
  /* Korten: en nyans LJUSARE än papperet, inte mörkare. En mörkare
     yta på ljus botten läser som ett hål; en ljusare läser som ett
     blad som ligger ovanpå. */
  --kort:#FBF8F2;
  --kort-kant:rgba(46,42,32,.08);
  --kort-sk:0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(46,42,32,.04),
            0 22px 44px -30px rgba(46,42,32,.30);

  /* Fjädern: går en hårsmån förbi målet och tillbaka. Det är det som
     gör en kolumn "bubblig" i stället för mekanisk. */
  --fjader:cubic-bezier(.34,1.46,.64,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kort:var(--pap-2);
    --kort-kant:rgba(239,230,214,.09);
    --kort-sk:0 1px 0 rgba(239,230,214,.04) inset, 0 22px 44px -30px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --kort:var(--pap-2);
  --kort-kant:rgba(239,230,214,.09);
  --kort-sk:0 1px 0 rgba(239,230,214,.04) inset, 0 22px 44px -30px rgba(0,0,0,.7);
}

/* ============================================================
   2. BUBBLAN — kolumnen runt en text

   Mjuk kant, stor radie, ett blad som ligger en millimeter ovanför
   papperet. Kanten är en gradient: lera i det övre vänstra hörnet
   som tonar ut till nästan ingenting. En hel kant i en färg hade
   ritat en ruta; den här ritar ett ljus som faller på bladet.

   Två bakgrunder på samma element — ytan klippt till padding-box och
   gradienten till border-box — så att kanten är en riktig kant och
   inte ett pseudoelement som måste hållas i takt med radien.
   ============================================================ */
.nx-bubbla{
  position:relative;
  padding:clamp(24px,2.6vw,34px);
  border-radius:clamp(24px,2.4vw,32px);
  border:1px solid transparent;
  background:
    linear-gradient(var(--kort),var(--kort)) padding-box,
    linear-gradient(145deg,
      color-mix(in srgb,var(--acc) 38%,transparent),
      color-mix(in srgb,var(--bl) 9%,transparent) 38%,
      color-mix(in srgb,var(--bl) 6%,transparent)) border-box;
  box-shadow:var(--kort-sk);
}
/* Lyftets skugga ligger i ett eget lager som bara tonas in. En
   box-shadow som animeras ritas om för varje bildruta; opaciteten på
   ett färdigritat lager kostar ingenting. isolation:isolate och
   z-index:-1 håller lagret bakom texten men i bladets eget lager. */
.nx-bubbla{isolation:isolate}
.nx-bubbla::after{
  content:"";position:absolute;inset:-1px;z-index:-1;
  border-radius:inherit;pointer-events:none;
  box-shadow:0 38px 70px -40px rgba(46,42,32,.40);
  opacity:0;
  transition:opacity .45s var(--e-ut);
}
.bu-fig{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:14px;
  background:color-mix(in srgb,var(--acc) 10%,transparent);
  margin-bottom:clamp(16px,1.8vw,22px);
}
.bu-fig svg{
  width:20px;height:20px;
  fill:none;stroke:var(--acc-lugn);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ============================================================
   3. MANIFESTET

   Rubrikens ord tonar fram ett i taget när rubriken kommer in i bild,
   och de två kolumnerna stiger efter.

   Det låg ett blad här förut, som gled upp över filmens underkant med
   rundade hörn. Leo 2026-09-25: "den vita sektionen konstig när man
   scrollar" och "konstigt på hero bilden i hörnen". Hörnen visade
   filmen, men sidorna under filmens kant visade papperet — bladet
   fick axlar. Det är borttaget, och heron slutar rakt som förut.
   ============================================================ */

/* Ordfyllnaden. --n är ordets plats i rubriken och sätts av skriptet
   en gång; det enda som sedan händer är en klass. */
html.nx-sr [data-ordfyll] .nx-ord{
  opacity:.14;
  transition:opacity .9s var(--e-mjuk);
  transition-delay:calc(var(--n,0) * 70ms);
}
html.nx-sr [data-ordfyll].nx-fylld .nx-ord{opacity:1}

/* De två kolumnerna runt texten. Samma bredd och samma mellanrum som
   läxhjälpskortet under, så att de tre bladen står i en och samma
   rutnätslinje. */
.nx-manifest-fot,
.nx-ide.tva{
  max-width:1000px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
.nx-manifest-fot{margin-top:clamp(44px,6vw,84px)}
.nx-manifest-fot .nx-bubbla p{max-width:none;font-size:1.02rem;line-height:1.6}
@media (max-width:760px){
  .nx-manifest-fot,
  .nx-ide,.nx-ide.tva{grid-template-columns:minmax(0,1fr)}
}

/* Läxhjälpskortet. cinemas regler väger (0,2,0) i sina media-
   frågor — :last-child och paddingen — så båda klasserna står med. */
.nx-ide-sp.nx-bubbla{
  border:1px solid transparent;
  padding:clamp(24px,2.6vw,34px);
}
.nx-ide-sp.nx-bubbla .id-fig{
  width:42px;height:42px;border-radius:14px;border:0;
  background:color-mix(in srgb,var(--acc) 10%,transparent);
}
.nx-ide-sp.nx-bubbla .id-fig svg{stroke:var(--acc-lugn)}

/* Bladen lyfter med en fjäder när man för musen över dem. translate,
   inte transform: data-stig äger transform på dem. */
@media (hover:hover) and (pointer:fine){
  .nx-manifest .nx-bubbla:hover{translate:0 -5px}
  .nx-manifest .nx-bubbla:hover::after{opacity:1}
}

/* ============================================================
   4. HÅLLPUNKTERNA — fyra kolumner, 1 till 4

   Den man för musen över kommer fram, de andra drar sig tillbaka,
   krymper och blir grå. :has() gör det utan en rad skript: listan
   vet att något i den är under pekaren.

   Nedtoningen är filter:opacity(), inte egenskapen opacity. Listan
   bar förut data-stig på varje punkt, och den regeln väger (0,3,1)
   på opacity och transform — en nedtoning där hade aldrig syntes.
   data-stig sitter nu på listan i stället, och punkterna har inget
   annat system som slåss om samma egenskaper.
   ============================================================ */
.nx-holdpunkter{
  border-top:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
@media (max-width:1100px){.nx-holdpunkter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.nx-holdpunkter{grid-template-columns:minmax(0,1fr)}}

.nx-holdpunkter > li{
  border-bottom:1px solid transparent;
  padding:clamp(24px,2.4vw,32px);
  transform-origin:50% 60%;
  transition:
    scale .55s var(--fjader),
    filter .4s var(--e),
    translate var(--tryck-tid) var(--e-ut);
}
/* Tvätten i cinema är till kolumner UTAN egen yta. De här är blad,
   och en tvätt som bleder ut runt ett blad blir en gloria. */
.nx-holdpunkter > li::before{content:none}

.hp-topp{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:clamp(18px,2vw,26px);
}
.hp-topp .hp-mark{margin-bottom:0}
.hp-nr{
  font-size:clamp(2.8rem,4.2vw,4rem);
  font-weight:800;letter-spacing:-.06em;line-height:.8;
  color:var(--ln-2);
  font-variant-numeric:tabular-nums;
  transition:color .35s var(--e);
}

@media (hover:hover) and (pointer:fine){
  .nx-holdpunkter:has(> li:hover) > li{
    scale:.955;
    filter:grayscale(1) opacity(.5);
  }
  .nx-holdpunkter:has(> li:hover) > li:hover{
    scale:1.055;
    filter:none;
    z-index:2;
  }
  .nx-holdpunkter > li:hover::after{opacity:1}
  .nx-holdpunkter > li:hover .hp-nr{color:var(--acc)}
}
/* På pekskärm finns ingen pekare. Där tänds den punkt man har mitt
   i skärmen (en spalt) eller den man tryckt på (två spalter), och
   skriptet sätter .har-pa på listan när det gäller. */
.nx-holdpunkter.har-pa > li:not(.pa){
  scale:.965;
  filter:grayscale(1) opacity(.55);
}
.nx-holdpunkter.har-pa > li.pa{scale:1.02}
.nx-holdpunkter.har-pa > li.pa::after{opacity:1}
.nx-holdpunkter.har-pa > li.pa .hp-nr{color:var(--acc)}

/* ============================================================
   5. STUDIEHJÄLPARNA — kommer in i bild

   Korten stiger upp ett i taget när raden kommer in i bild: en
   rörelse, en kurva, ingen vridning och inget porträtt som poppar.
   Leo: "Bilderna på möt våra studiehjälpare ska in ploppa ser
   konstigt ut". Porträttets studs är borta; kortet och allt i det
   kommer som en enhet.

   transform, inte translate: hovern i cinema äger translate, och
   två system på samma egenskap slåss (se TRYCKBARA YTOR där). Hela
   övergångslistan står här, för den här regeln väger mer än cinemas
   och ersätter den.
   ============================================================ */
.sc-card{
  border-radius:clamp(24px,2.2vw,30px);
  background:var(--kort);
  border-color:var(--kort-kant);
  box-shadow:var(--kort-sk);
}
html.nx-sr .showcase .sc-card{
  opacity:0;
  transform:translate3d(0,56px,0) scale(.965);
  transition:
    opacity .8s var(--e-mjuk),
    transform 1.1s var(--e-ut),
    translate var(--tryck-tid,.38s) var(--e-ut),
    box-shadow var(--tryck-tid,.38s) var(--e-ut),
    border-color var(--tryck-tid,.38s) var(--e),
    background-color var(--tryck-tid,.38s) var(--e);
  transition-delay:calc(var(--n,0) * 120ms),calc(var(--n,0) * 120ms),0s,0s,0s,0s;
}
html.nx-sr .showcase .sc-card.nx-in{opacity:1;transform:none}

/* ============================================================
   6. TRYGG HJÄLP — det rullande bandet

   Utan skript är det samma dragbara rad som förut. Med skript får
   bandet klassen .pa, raden kopieras på båda sidor och glider
   långsamt åt höger. Förflyttningen skrivs som transform av
   nextrum-start.js; här står bara formen.

   overflow:clip och inte hidden. hidden gör bandet till en
   scrollbehållare, och ett scrollIntoView (förr på kortet man
   tryckte på) hade då scrollat bandet i sidled OVANPÅ vår
   transform, och kortet hade hoppat. clip klipper utan att gå att
   scrolla. Samma klippning gjorde att en utfällning under ett kort
   bara syntes till hälften, och därför finns ingen utfällning.

   Kanterna tonas med två pseudoelement i ytans färg, inte med
   mask-image. En mask över något som rör sig måste räknas om för
   varje bildruta i Safari; två stilla gradienter ovanpå kostar
   ingenting.

   Ingen pausknapp (Leo 2026-09-25: "ta bort play funktionen").
   Bandet stannar under pekaren och när man drar i det.
   ============================================================ */
.nx-band{position:relative;margin-top:clamp(8px,1vw,14px)}
.nx-band:not(.pa) .nx-drag{
  max-width:var(--w-bred);margin-inline:auto;padding-inline:var(--m);
  /* Utan den snäpper första kortet till kanten och paddingen
     scrollas bort direkt. */
  scroll-padding-inline:var(--m);
}
.nx-band.pa{
  overflow:hidden;overflow:clip;
  padding-block:16px 22px;
  touch-action:pan-y;
  cursor:grab;
}
.nx-band.pa::before,.nx-band.pa::after{
  content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:clamp(28px,7vw,110px);pointer-events:none;
}
.nx-band.pa::before{left:0;background:linear-gradient(90deg,var(--pap-2),transparent)}
.nx-band.pa::after{right:0;background:linear-gradient(270deg,var(--pap-2),transparent)}
.nx-band.pa.drar{cursor:grabbing}
.nx-band.pa .nx-drag{
  position:relative;
  overflow:visible;scroll-snap-type:none;
  width:max-content;margin:0;padding:0;
  will-change:transform;
}
.nx-band .nx-drag > li{
  flex:0 0 clamp(262px,24vw,340px);
  border-top:0;padding-top:0;
}
.nx-band .nx-drag > li::before{content:none}
.nx-band .dr-kort{
  border-radius:clamp(22px,2vw,28px);
  border-color:var(--kort-kant);
  background:var(--kort);
  box-shadow:var(--kort-sk);
  transition:border-color .25s var(--e),background .25s var(--e),translate .45s var(--fjader);
}
@media (hover:hover) and (pointer:fine){
  .nx-band .dr-kort:hover{translate:0 -4px}
}

/* ============================================================
   7. "VI BYGGER NÄSTA GENERATION TILLSAMMANS" — större

   Sidans största mening efter manifestets. Samma ordfyllnad som där,
   så att de två bär samma röst.
   ============================================================ */
.nx-statement{
  border-top:0;
  margin-top:clamp(72px,9vw,140px);
  padding-top:0;
  text-align:center;
}
.nx-statement p{
  font-size:clamp(2.5rem,7.4vw,6.6rem);
  /* 1,04 och inte ,93. Med ,93 nuddade g:et i "generation" ordet
     under (Leo: "G på generation nuddar tillsammans"). Svensk text
     har dessutom å, ä och ö ovanpå — raden behöver luft åt båda
     hållen. */
  line-height:1.04;letter-spacing:-.05em;font-weight:800;
  max-width:13ch;margin-inline:auto;
  text-wrap:balance;
}
.nx-statement p em{font-style:normal;color:var(--acc)}

/* ============================================================
   8. STUDIEVYN — en illustration man kan röra vid

   Byggd efter föräldravyn som den ser ut i dag: sidomenyn,
   hälsningen, Tider att svara på, I siffror, bokningen som ett
   FÖRSLAG, passlistan med betalningen, NexLäx (Fas 23.2: serien, XP,
   banan och vägen, där Uppgifter och Min utveckling stod förut) och
   chatten. Allt är exempel och står så under.

   Sektionerna ligger ovanpå varandra i samma rutnätscell. Höjden är
   alltså den högsta sektionens, och ett byte ändrar ingenting i
   sidan runt omkring — det som står ovanför det man trycker på får
   inte byta höjd av trycket (CLAUDE.md, fälla 4).

   Två rörelser, på två element, så att de aldrig slåss:
     .sd-rum      reser sig när vyn kommer in i bild — en transition
     .sd-fonster  lutar mot pekaren — skriptet skriver dess transform
   Lutningen skrevs förut som CSS-variabler på .sd-rum. En variabel
   ärvs, så varje musrörelse räknade om stilen för vartenda element i
   fönstret; det var en stor del av det som hackade. En transform
   ärvs inte.
   ============================================================ */
.nx-sd{
  position:relative;
  margin-top:clamp(38px,4.6vw,64px);
  perspective:1900px;
  perspective-origin:50% 30%;
}
/* INTE transform-style:preserve-3d. Med det träffade Chrome inte
   knapparna i sidomenyn så fort fönstret lutade: elementFromPoint gav
   .sd-app, alltså föräldern, och ett klick på Mina lektioner gjorde
   ingenting. Menyn är en rullbar behållare, och det är den
   kombinationen som går sönder. Utan 3D-kontexten ritas fönstret som
   ett platt lager med en perspektivlutning, och träffytan är den man
   ser. Notisernas djup (translateZ) försvinner; deras parallax står
   kvar. */
.sd-rum{position:relative}
html.nx-sr .sd-rum{
  opacity:0;
  transform:translate3d(0,70px,0) rotateX(16deg) scale(.95);
  transform-origin:50% 0;
  transition:opacity .9s var(--e-mjuk),transform 1.4s var(--e-ut);
}
html.nx-sr .nx-sd.nx-in .sd-rum{opacity:1;transform:none}
.sd-fonster{
  position:relative;
  border-radius:clamp(18px,2vw,26px);
  background:var(--kort);
  border:1px solid var(--kort-kant);
  box-shadow:0 2px 6px rgba(28,24,18,.05),0 60px 120px -50px rgba(28,24,18,.42);
  overflow:hidden;
  color:var(--bl);
  font-size:.9rem;
}
.sd-bar{
  display:flex;align-items:center;gap:7px;
  padding:12px 16px;
  border-bottom:1px solid var(--ln);
  background:var(--pap-2);
}
.sd-bar i{width:10px;height:10px;border-radius:50%;background:var(--ln-2);flex:none}
.sd-bar span{
  margin-left:10px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;color:var(--bl-3);
  background:var(--kort);border:1px solid var(--ln);border-radius:100px;
  padding:5px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sd-app{
  display:grid;
  grid-template-columns:clamp(176px,15vw,212px) minmax(0,1fr);
  height:clamp(540px,46vw,620px);
}

/* --- sidomenyn --- */
.sd-sido{
  position:relative;
  display:flex;flex-direction:column;gap:2px;
  padding:16px 10px;
  border-right:1px solid var(--ln);
  background:var(--pap);
  overflow:auto;scrollbar-width:none;
}
.sd-sido::-webkit-scrollbar{display:none}
.sd-sido button{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:12px;
  font-size:.84rem;font-weight:500;letter-spacing:-.01em;
  color:var(--bl-2);text-align:left;white-space:nowrap;
  cursor:pointer;
  transition:background .25s var(--e),color .25s var(--e),box-shadow .25s var(--e);
}
.sd-sido button svg{
  width:17px;height:17px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.sd-sido button:hover{background:color-mix(in srgb,var(--bl) 5%,transparent);color:var(--bl)}
.sd-sido button[aria-current="true"]{
  background:var(--kort);color:var(--bl);font-weight:600;
  box-shadow:0 1px 2px rgba(28,24,18,.06),0 6px 16px -10px rgba(28,24,18,.25);
}
.sd-sido button[aria-current="true"] svg{stroke:var(--acc)}
.sd-sido-rubrik{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bl-3);padding:14px 11px 5px;
}
.sd-bricka{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--acc);color:var(--acc-ink);
  font-size:10px;font-weight:700;font-style:normal;
  transition:scale .4s var(--fjader),opacity .3s var(--e);
}
.sd-bricka.bytt{scale:0;opacity:0}

/* --- ytan och sektionerna --- */
.sd-yta{position:relative;display:grid;min-width:0;min-height:0;overflow:hidden}
.sd-sek{
  position:relative;
  grid-area:1/1;min-height:0;min-width:0;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  padding:clamp(18px,2.2vw,28px);
  opacity:0;visibility:hidden;translate:0 12px;
  transition:opacity .25s var(--e),translate .35s var(--e),visibility 0s linear .25s;
}
.sd-sek.pa{
  opacity:1;visibility:visible;translate:0 0;
  transition:opacity .45s var(--e) .06s,translate .6s var(--e-ut) .06s,visibility 0s;
}
.sd-sek.pa .sd-in{
  animation:sd-in .6s var(--e-ut) both;
  animation-delay:calc(var(--i,0) * 70ms + 110ms);
}
@keyframes sd-in{from{opacity:0;translate:0 14px;scale:.985}}

.sd-topp{margin-bottom:16px}
.sd-topp h4{font-size:1.28rem;font-weight:700;letter-spacing:-.03em}
.sd-topp p{margin-top:4px;color:var(--bl-2);font-size:.84rem;line-height:1.5;max-width:56ch}

.sd-stack{display:grid;gap:12px}
.sd-tva{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sd-box{
  background:var(--pap);
  border:1px solid var(--ln);
  border-radius:18px;
  padding:14px 16px;
  min-width:0;
}
.sd-box h5{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin:0 0 12px;
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--bl-3);
}
.sd-box h5 em{font-style:normal;color:var(--acc-lugn)}

.sd-knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border-radius:100px;
  background:var(--acc);color:var(--acc-ink);
  font-size:.82rem;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;position:relative;
  transition:background .2s var(--e),scale .2s var(--e),opacity .2s var(--e);
}
.sd-knapp:hover{background:var(--acc-lugn)}
.sd-knapp:active{scale:.96}
.sd-knapp.spok{background:transparent;color:var(--bl);border:1px solid var(--ln-2)}
.sd-knapp.spok:hover{border-color:var(--bl);background:transparent}
.sd-knapp[disabled]{opacity:.45;cursor:default}
/* Knappen tänker: texten tonar, tre prickar pulserar. */
.sd-knapp.tanker{color:transparent}
.sd-knapp.tanker::after{
  content:"";position:absolute;inset:0;margin:auto;width:28px;height:6px;
  background:
    radial-gradient(circle,var(--acc-ink) 2.6px,transparent 3px) 0 50%/10px 6px repeat-x;
  animation:sd-tanker .9s linear infinite;
}
@keyframes sd-tanker{50%{opacity:.35}}

/* Något som byter läge: .fore står tills händelsen kommit, .efter
   efter. Båda texterna ligger i markupen, så att engelskan är
   engelsk — generatorn översätter aldrig ett skript. */
[data-sd-byt] .efter{display:none}
[data-sd-byt].bytt .fore{display:none}
[data-sd-byt].bytt .efter{display:inline;animation:sd-pop .5s var(--fjader) both}
@keyframes sd-pop{0%{opacity:0;scale:.7}100%{opacity:1;scale:1}}

/* --- hälsningen --- */
.sd-hej{
  position:relative;overflow:hidden;
  border-radius:20px;
  padding:18px 20px;
  background:
    radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--lera-l) 45%,transparent),transparent 55%),
    radial-gradient(90% 120% at 0% 100%,color-mix(in srgb,var(--mossa-l) 30%,transparent),transparent 60%),
    #2E2A20;
  color:#EFE6D6;
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;
}
.sd-hej small{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#B3A88F;
}
.sd-hej b{display:block;margin-top:6px;font-size:1.5rem;font-weight:700;letter-spacing:-.035em;line-height:1.05}
.sd-hej p{margin-top:5px;font-size:.8rem;color:#CFC5B1}
.sd-hej-kort{display:flex;gap:8px;flex-wrap:wrap}
.sd-hej-kort span{
  display:flex;flex-direction:column;gap:2px;
  padding:9px 12px;border-radius:14px;
  background:rgba(239,230,214,.08);border:1px solid rgba(239,230,214,.14);
  font-size:.74rem;color:#CFC5B1;
}
.sd-hej-kort span b{margin:0;font-size:.8rem;color:#EFE6D6;letter-spacing:-.01em}

/* --- tider att svara på --- */
.sd-svara{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .5s var(--e-ut),opacity .35s var(--e);
}
.sd-svara > div{min-height:0;overflow:hidden}
.sd-svara.bytt{grid-template-rows:0fr;opacity:0}
.sd-svar-rad{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sd-svar-rad p{flex:1 1 200px;font-size:.84rem;line-height:1.45;color:var(--bl-2)}
.sd-svar-rad p b{color:var(--bl)}
.sd-svar-knappar{display:flex;gap:6px}
.sd-klart-rad{
  display:none;align-items:center;gap:10px;
  font-size:.84rem;color:var(--bl-2);
}
.sd-klart-rad.bytt{display:flex;animation:sd-pop .5s var(--fjader) both}

/* --- I siffror --- */
.sd-tal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sd-tal div{
  padding:10px 10px 11px;border-radius:14px;
  background:var(--kort);border:1px solid var(--ln);
}
.sd-tal b{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.sd-tal b small{font-size:.8rem;font-weight:700;margin-left:2px;letter-spacing:0}
.sd-tal span{display:block;margin-top:6px;font-size:.7rem;color:var(--bl-3);line-height:1.25}

/* --- staplarna --- */
.sd-staplar{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
  align-items:end;height:112px;
}
.sd-staplar div{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.sd-staplar i{
  display:block;width:100%;max-width:26px;
  height:calc(var(--h) * .8%);min-height:3px;
  border-radius:7px 7px 3px 3px;
  background:color-mix(in srgb,var(--bl) 16%,transparent);
  transform-origin:bottom;
}
.sd-staplar div:last-child i{background:var(--acc)}
.sd-sek.pa .sd-staplar i{animation:sd-stapel .9s var(--fjader) both;animation-delay:calc(var(--n) * 80ms + 350ms)}
@keyframes sd-stapel{from{scale:1 0}}
.sd-staplar span{font-family:var(--f-mono);font-size:9px;color:var(--bl-3);letter-spacing:.06em;text-transform:uppercase}

/* --- fördelningen --- */
.sd-fordelning{display:flex;height:12px;border-radius:100px;overflow:hidden;gap:2px}
.sd-fordelning i{flex:var(--v);transform-origin:left}
.sd-sek.pa .sd-fordelning i{animation:sd-dela .9s var(--e-ut) both;animation-delay:calc(var(--n) * 120ms + 400ms)}
@keyframes sd-dela{from{scale:0 1}}
.sd-f-bra{background:var(--mossa)}
.sd-f-mitt{background:var(--ockra)}
.sd-f-folj{background:var(--acc)}
.sd-legend{margin-top:12px;display:grid;gap:6px}
.sd-legend span{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--bl-2)}
.sd-legend span i{width:9px;height:9px;border-radius:3px;flex:none}
.sd-legend span b{margin-left:auto;font-variant-numeric:tabular-nums}

/* --- bokningen --- */
.sd-boka{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;align-items:start}
.sd-kal-topp{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sd-kal-topp b{font-size:.95rem;letter-spacing:-.02em}
.sd-kal-topp span{font-size:.9rem;color:var(--bl-3);letter-spacing:.3em}
.sd-kal-v,.sd-kal-dagar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sd-kal-v span{text-align:center;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:var(--bl-3);text-transform:uppercase;padding-bottom:4px}
.sd-kal-dagar button{
  position:relative;
  aspect-ratio:1;border-radius:11px;
  font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--bl);cursor:pointer;
  transition:background .2s var(--e),color .2s var(--e),scale .35s var(--fjader);
}
.sd-kal-dagar button:hover:not([disabled]){background:color-mix(in srgb,var(--bl) 6%,transparent)}
.sd-kal-dagar button[disabled]{color:var(--ln-2);cursor:default}
.sd-kal-dagar button.idag{box-shadow:inset 0 0 0 1px var(--ln-2)}
.sd-kal-dagar button.pass::after{
  content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:var(--mossa);
}
.sd-kal-dagar button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink);scale:1.08}

.sd-form{position:relative;transition:opacity .3s var(--e)}
.sd-form .sd-grupp{margin-top:10px}
.sd-form .sd-grupp > span{
  display:block;margin-bottom:6px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--bl-3);
}
.sd-form-dag{font-size:.95rem;font-weight:700;letter-spacing:-.02em;min-height:1.4em}
.sd-form-dag .fore{font-weight:500;color:var(--bl-3);font-size:.85rem}
.sd-form:not(.bytt) .sd-grupp,
.sd-form:not(.bytt) .sd-knapp{opacity:.4;pointer-events:none}
.sd-form .sd-knapp{margin-top:14px;width:100%}
.sd-chips{display:flex;flex-wrap:wrap;gap:5px}
.sd-chips button{
  padding:6px 11px;border-radius:100px;
  border:1px solid var(--ln-2);
  font-size:.76rem;font-weight:500;color:var(--bl-2);
  cursor:pointer;
  transition:background .2s var(--e),border-color .2s var(--e),color .2s var(--e),scale .3s var(--fjader);
}
.sd-chips button:hover{border-color:var(--bl);color:var(--bl)}
.sd-chips button[aria-pressed="true"]{background:var(--bl);border-color:var(--bl);color:var(--pap)}
.sd-chips button:active{scale:.94}

/* Förslaget är skickat: ett lager som växer fram ur knappen. */
.sd-skickat{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:18px;
  border-radius:inherit;background:var(--pap);
  opacity:0;visibility:hidden;scale:.96;
  transition:opacity .35s var(--e),scale .5s var(--fjader),visibility 0s linear .35s;
}
.sd-skickat.bytt{opacity:1;visibility:visible;scale:1;transition-delay:0s}
.sd-skickat b{font-size:1rem;letter-spacing:-.02em}
.sd-skickat p{font-size:.8rem;color:var(--bl-2);max-width:26ch;line-height:1.45}

/* Bocken ritas: strecket går från 0 till hel längd. */
.sd-bock{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--mossa) 16%,transparent)}
.sd-bock svg{width:22px;height:22px;fill:none;stroke:var(--mossa);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sd-bock path{stroke-dasharray:1;stroke-dashoffset:1}
.bytt > .sd-bock path,.sd-flyt.syns .sd-bock path{animation:sd-rita .6s var(--e-ut) .15s forwards}
@keyframes sd-rita{to{stroke-dashoffset:0}}
.sd-bock.liten{width:26px;height:26px}
.sd-bock.liten svg{width:14px;height:14px}

/* --- passlistan --- */
.sd-flikar{display:flex;gap:4px;margin-bottom:12px;padding:4px;border-radius:100px;background:var(--pap-2);width:fit-content}
.sd-flikar button{
  padding:6px 13px;border-radius:100px;font-size:.78rem;font-weight:500;color:var(--bl-2);cursor:pointer;
  transition:background .25s var(--e),color .25s var(--e),box-shadow .25s var(--e);
}
.sd-flikar button[aria-pressed="true"]{background:var(--kort);color:var(--bl);font-weight:600;box-shadow:0 1px 2px rgba(28,24,18,.08)}
.sd-panel{display:none}
.sd-panel.pa{display:block;animation:sd-in .45s var(--e-ut) both}

.sd-rad{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--ln);
}
.sd-rad:last-child{border-bottom:0}
.sd-datum{
  width:42px;padding:5px 0;border-radius:12px;text-align:center;
  background:var(--kort);border:1px solid var(--ln);line-height:1.05;
}
.sd-datum b{display:block;font-size:1rem;letter-spacing:-.03em}
.sd-datum small{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bl-3)}
.sd-rad-text b{display:block;font-size:.84rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-rad-text small{display:block;margin-top:2px;font-size:.74rem;color:var(--bl-3)}
.sd-lage{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;border:1px solid var(--ln-2);color:var(--bl-3);
  white-space:nowrap;
}
.sd-lage.varm{border-color:var(--acc-line);color:var(--acc-lugn);background:var(--acc-soft)}
.sd-lage.gron,.sd-lage.bytt{border-color:color-mix(in srgb,var(--mossa) 40%,transparent);color:var(--mossa);background:color-mix(in srgb,var(--mossa) 10%,transparent)}
/* En rad som finns först när något hänt: den fälls ut, den står inte
   och väntar tom. */
.sd-rad.sd-ny{display:none}
.sd-rad.sd-ny.bytt{display:grid;animation:sd-fall .55s var(--fjader) both}
@keyframes sd-fall{from{opacity:0;translate:0 -10px;scale:.97}}

.sd-mal{font-size:.84rem;line-height:1.55;color:var(--bl-2)}
.sd-mal b{color:var(--bl)}
.sd-plansteg{margin-top:12px;display:grid;gap:7px}
.sd-plansteg span{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--bl-2)}
.sd-plansteg span i{
  width:16px;height:16px;border-radius:50%;flex:none;border:1.5px solid var(--ln-2);
  display:grid;place-items:center;
}
.sd-plansteg span.gjort i{background:var(--mossa);border-color:var(--mossa)}
.sd-plansteg span.gjort i::after{content:"";width:6px;height:3px;border:solid var(--pap);border-width:0 0 1.6px 1.6px;rotate:-45deg;translate:0 -1px}
.sd-plansteg span.gjort{color:var(--bl-3);text-decoration:line-through;text-decoration-color:var(--ln-2)}
.sd-rapport p{font-size:.84rem;line-height:1.6;color:var(--bl-2)}
.sd-rapport .sd-lage{display:inline-block;margin-bottom:10px}

/* --- NexLäx (Fas 23.2) ---
   Samma bark som toppen i den riktiga vyn (nextrum-uppgifter.css,
   .nl-topp), i mindre skala. Rundturen trycker Fortsätt: .sd-nl och
   vägens två rader får .bytt, och talen byter med .fore och .efter.
   Mätaren skalas, den ritas inte om (CSS rör sig, skriptet sätter
   klasser: avsnittet om startsidan i CLAUDE.md). */
.sd-nl{
  display:grid;gap:12px;
  padding:16px;border-radius:18px;
  background:
    radial-gradient(110% 70% at 6% 0%, var(--nt-glod), transparent 55%),
    linear-gradient(180deg, var(--nt), var(--nt-2));
  color:var(--nt-fg);
}
.sd-nl-stat{display:flex;flex-wrap:wrap;gap:8px}
.sd-nl-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:100px;
  background:rgba(239,230,214,.07);border:1px solid var(--nt-ln);
  font-size:.74rem;color:var(--nt-mut);
}
.sd-nl-pill b{font-size:.9rem;font-weight:750;color:var(--nt-fg);font-variant-numeric:tabular-nums}
.sd-nl-pill svg{width:15px;height:15px;fill:currentColor}
.sd-nl-laga svg{color:var(--lera-l)}
.sd-nl-xp svg{color:var(--ockra)}
.sd-nl-bana{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sd-nl-bana b{font-size:.9rem;font-weight:650}
.sd-nl-bana strong{font-size:1.2rem;font-weight:750;font-variant-numeric:tabular-nums}
.sd-nl-mat{display:block;height:8px;border-radius:100px;background:rgba(239,230,214,.12);overflow:hidden}
.sd-nl-mat i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--mossa-l),var(--ockra));
  transform-origin:left;scale:.42 1;transition:scale .9s var(--e-ut) .2s;
}
.sd-nl.bytt .sd-nl-mat i{scale:.5 1}
.sd-nl-cta{
  display:grid;gap:3px;justify-items:start;
  padding:12px 14px;border-radius:14px;
  background:rgba(239,230,214,.06);border:1px solid var(--nt-ln);
}
.sd-nl-cta small{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--lera-l)}
.sd-nl-cta b{font-size:.92rem;font-weight:650}
.sd-nl-cta span{font-size:.74rem;color:var(--nt-mut)}
.sd-nl-cta .sd-knapp{margin-top:8px}
.sd-nl-cta .sd-knapp svg{width:12px;height:12px;fill:currentColor}
.sd-nl.bytt .sd-nl-cta .sd-knapp{display:none}
.sd-nl-klar{display:none;align-items:center;gap:10px;margin:0;font-size:.8rem;font-weight:600;color:var(--nt-fg)}
.sd-nl.bytt .sd-nl-klar{display:flex;animation:sd-pop .5s var(--fjader) both}
.sd-nl.bytt .sd-nl-klar .sd-bock path{animation:sd-rita .6s var(--e-ut) .15s forwards}
.sd-nl-omr{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--ln);
}
.sd-nl-omr:last-child{border-bottom:0}
.sd-nl-omr > i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--pap-2);color:var(--bl-3)}
.sd-nl-omr > i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sd-nl-omr > i span{display:grid}
.sd-nl-omr b{font-size:.84rem;font-weight:600}
.sd-nl-omr em{font-style:normal;font-size:.74rem;color:var(--bl-3)}
.sd-nl-omr.klart > i,.sd-nl-omr.aktuellt.bytt > i{background:var(--mossa);color:var(--pap)}
.sd-nl-omr.aktuellt > i,.sd-nl-omr.nasta.bytt > i{background:var(--acc);color:var(--acc-ink)}
.sd-nl-omr.aktuellt > i svg,.sd-nl-omr.nasta.bytt > i svg{fill:currentColor;stroke:none}
.sd-nl-omr.aktuellt.bytt > i svg{fill:none;stroke:currentColor}
.sd-nl-omr.klart em,.sd-nl-omr.aktuellt.bytt em{color:var(--mossa);font-weight:600}
.sd-nl-omr.aktuellt em,.sd-nl-omr.nasta.bytt em{color:var(--acc);font-weight:600}
.sd-nl-omr.last{opacity:.6}

/* --- chatten --- */
.sd-chatt{display:flex;flex-direction:column;height:100%;min-height:0}
.sd-chatt-topp{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--ln)}
.sd-chatt-topp picture,.sd-chatt-topp img{width:36px;height:36px;border-radius:50%;display:block;object-fit:cover}
.sd-chatt-topp b{display:block;font-size:.9rem}
.sd-chatt-topp small{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--bl-3)}
.sd-chatt-topp small i{width:7px;height:7px;border-radius:50%;background:var(--mossa)}
.sd-trad{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 2px;display:flex;flex-direction:column;gap:7px;scrollbar-width:none}
.sd-trad::-webkit-scrollbar{display:none}
.sd-bubbla{
  max-width:78%;padding:9px 13px;border-radius:18px 18px 18px 6px;
  background:var(--pap-2);font-size:.84rem;line-height:1.45;
  align-self:flex-start;
}
.sd-bubbla.egen{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--acc);color:var(--acc-ink)}
.sd-sek.pa .sd-bubbla{animation:sd-bubbla .5s var(--fjader) both;animation-delay:calc(var(--i) * .55s + .2s)}
@keyframes sd-bubbla{from{opacity:0;translate:0 10px;scale:.9}}
.sd-bubbla.egen{transform-origin:right bottom}
.sd-bubbla{transform-origin:left bottom}
/* Skriver-prickarna syns en stund och försvinner när svaret kommer. */
.sd-skriver{
  align-self:flex-start;display:flex;gap:4px;padding:11px 13px;border-radius:18px 18px 18px 6px;
  background:var(--pap-2);
}
.sd-skriver i{width:6px;height:6px;border-radius:50%;background:var(--bl-3);animation:sd-hopp 1s var(--e) infinite}
.sd-skriver i:nth-child(2){animation-delay:.15s}
.sd-skriver i:nth-child(3){animation-delay:.3s}
@keyframes sd-hopp{0%,60%,100%{translate:0 0;opacity:.5}30%{translate:0 -4px;opacity:1}}
.sd-skriver.svar{display:none}
.sd-skriver.svar.bytt{display:flex}
.sd-skriver.svar.klar{display:none}
.sd-bubbla.sd-sen{display:none}
.sd-bubbla.sd-sen.bytt{display:block;animation:sd-bubbla .5s var(--fjader) both}
.sd-snabb{display:flex;gap:6px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--ln)}
.sd-snabb.bytt{display:none}
.sd-snabb button{
  padding:7px 12px;border-radius:100px;border:1px solid var(--ln-2);
  font-size:.78rem;color:var(--bl-2);cursor:pointer;background:var(--kort);
  transition:border-color .2s var(--e),color .2s var(--e),scale .3s var(--fjader);
}
.sd-snabb button:hover{border-color:var(--bl);color:var(--bl)}
.sd-snabb button:active{scale:.95}
.sd-skrivfalt{
  margin-top:10px;display:flex;align-items:center;gap:8px;
  padding:9px 9px 9px 14px;border-radius:100px;border:1px solid var(--ln);background:var(--kort);
  font-size:.8rem;color:var(--bl-3);
}
.sd-skrivfalt i{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--acc);display:grid;place-items:center}
.sd-skrivfalt i svg{width:13px;height:13px;fill:none;stroke:var(--acc-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --- betalningen --- */
.sd-betala{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.sd-betala .sd-knapp{grid-column:1/-1}
.sd-belopp{font-size:1.1rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sd-betald{
  display:none;align-items:center;gap:10px;
  font-size:.84rem;color:var(--bl-2);
}
.sd-betald.bytt{display:flex;animation:sd-pop .5s var(--fjader) both}
.sd-betala.bytt{display:none}
.sd-kortrad{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.74rem;color:var(--bl-3)}
.sd-kortrad svg{width:26px;height:18px;flex:none}

/* --- flytande lager: notiser som svävar framför fönstret --- */
.sd-flyt{
  position:absolute;z-index:8;
  display:flex;align-items:center;gap:10px;
  padding:11px 14px 11px 11px;border-radius:18px;
  background:color-mix(in srgb,var(--kort) 92%,transparent);
  border:1px solid var(--kort-kant);
  box-shadow:0 24px 50px -24px rgba(28,24,18,.45),0 2px 6px rgba(28,24,18,.06);
  font-size:.8rem;line-height:1.3;color:var(--bl);
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--e);
}
.sd-flyt b{display:block;font-size:.82rem;letter-spacing:-.01em}
.sd-flyt small{display:block;font-size:.72rem;color:var(--bl-3)}
.sd-flyt.syns{opacity:1;animation:sd-flyt-in .7s var(--fjader) both}
@keyframes sd-flyt-in{from{translate:0 18px;scale:.85}}
.sd-flyt-h{right:clamp(-26px,-2vw,-10px);top:18%}
.sd-flyt-v{left:clamp(-26px,-2vw,-10px);bottom:14%}
.sd-flyt .sd-bock{width:30px;height:30px;flex:none}
.sd-flyt .sd-bock svg{width:15px;height:15px}
.sd-flyt-ikon{
  width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 12%,transparent);
}
.sd-flyt-ikon svg{width:16px;height:16px;fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --- rundturens pekare --- */
.sd-pekare{
  position:absolute;left:0;top:0;z-index:9;
  width:26px;height:26px;margin:-4px 0 0 -5px;
  pointer-events:none;
  opacity:0;
  transform:translate(var(--px,60%),var(--py,70%));
  transition:transform .6s cubic-bezier(.5,0,.2,1),opacity .4s var(--e);
  filter:drop-shadow(0 4px 8px rgba(28,24,18,.35));
}
.sd-pekare.syns{opacity:1}
.sd-pekare svg{width:100%;height:100%;display:block}
.sd-pekare path{fill:#2E2A20;stroke:#FBFAF7;stroke-width:1.6;stroke-linejoin:round}
.sd-pekare::after{
  content:"";position:absolute;left:5px;top:4px;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:2px solid var(--acc);opacity:0;scale:.3;
}
.sd-pekare.klick::after{animation:sd-klick .5s var(--e-ut)}
@keyframes sd-klick{0%{opacity:.9;scale:.3}100%{opacity:0;scale:1.3}}

.sd-under{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(18px,2vw,26px);
}
.sd-under .nx-bildtext{margin-top:0}

/* --- smalare skärmar --- */
@media (max-width:1100px){
  .sd-tal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sd-tal div:nth-child(n+4){display:none}
}
@media (max-width:900px){
  .sd-flyt{display:none}
  .sd-boka{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .sd-app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:600px}
  .sd-sido{
    flex-direction:row;gap:4px;padding:8px;
    border-right:0;border-bottom:1px solid var(--ln);
    overflow-x:auto;
  }
  .sd-sido-rubrik{display:none}
  .sd-sido button{padding:8px 12px;flex:none}
  .sd-sido button svg{display:none}
  .sd-sido .sd-bricka{margin-left:4px}
  .sd-tva{grid-template-columns:minmax(0,1fr)}
  .sd-sek{padding:16px}
  .sd-hej b{font-size:1.3rem}
}

/* ============================================================
   9. SÅ KAN ETT PASS SE UT — bilderna kommer in

   Varje foto stiger upp och tonar fram, och bilden inuti glider från
   lite för nära till rätt avstånd. Förut öppnades de som ridåer med
   clip-path, som webbläsaren ritar om bildruta för bildruta på ett
   stort foto. translate, scale och opacity körs på grafikkortet.

   Parallaxen i NXFin äger transform på ramen. Här används de fristående
   egenskaperna translate och scale, som läggs TILL transform i stället
   för att ersätta den — de två systemen rör alltså inte varandra.
   ============================================================ */
html.nx-sr .nx-vagg-grid figure{
  opacity:0;
  translate:0 64px;
  scale:.96;
  transition:opacity 1s var(--e-mjuk),translate 1.3s var(--e-ut),scale 1.3s var(--e-ut);
}
html.nx-sr .nx-vagg-grid .v2{transition-delay:.12s}
html.nx-sr .nx-vagg-grid .v4{transition-delay:.1s}
html.nx-sr .nx-vagg-grid figure .nx-img{
  scale:1.16;
  transition:opacity .7s var(--e-mjuk),scale 1.8s var(--e-ut);
}
html.nx-sr .nx-vagg-grid figure.nx-in{opacity:1;translate:0 0;scale:1}
html.nx-sr .nx-vagg-grid figure.nx-in .nx-img{scale:1}

/* ============================================================
   10. DE MÖRKA YTORNA — Bli studiehjälpare och Nästa steg

   Barken och skenet bor i cinema (DE MÖRKA YTORNA), för de gäller
   hela sajten sedan 2026-09-25. Här står bara det som är startsidans:
   att innehållet glider upp när ytan kommer in i bild.

   Ytorna går kant i kant. En första version lade dem som rundade
   kort på papperet och lät hela kortet växa in (scale .965 → 1). Leo:
   "där man scrollar är de vit runt, ta bort de från kanterna". Papperet
   syntes både runt korten och vid kanterna medan de växte, så nu står
   ytan still och det är innehållet som rör sig: translate på barnen,
   som webbläsaren kör själv. Klassen är .nx-framme, satt av
   mörkaYtor() — inte .nx-in, för den klassen tänder varje .nx-rad-i
   inuti på en gång (cinemas radmask är en ättlingsregel).
   ============================================================ */
html.nx-sr .nx-mork.nx-sek > *,
html.nx-sr .nx-mork.nx-final-cinema > *{
  translate:0 44px;
  transition:translate 1.1s var(--e-ut);
}
html.nx-sr .nx-mork.nx-framme > *{translate:0 0}

/* ---------- stegen i ansökan: samma 1–4 som hållpunkterna ----------
   Leo: "stegen 1,2,3,4 ska ha samma funktion som de andra 1,2,3,4
   lite högre upp". Samma regler, samma fjäder, samma skript
   (hållpunkter() i nextrum-start.js tar båda listorna). */
.nx-apply-flow{gap:clamp(12px,1.4vw,18px)}
.nx-apply-flow > .nx-apply-step{
  position:relative;
  border-radius:clamp(20px,2vw,26px);
  padding:clamp(22px,2.2vw,30px);
  background:rgba(239,230,214,.05);
  border-color:rgba(239,230,214,.12);
  transform-origin:50% 60%;
  transition:
    scale .55s var(--fjader),
    filter .4s var(--e),
    background-color .35s var(--e),
    border-color .35s var(--e);
}
.nx-apply-step em{
  font-family:inherit;font-size:clamp(2.6rem,3.8vw,3.6rem);
  font-weight:800;letter-spacing:-.06em;line-height:.8;
  color:rgba(239,230,214,.22);
  margin-bottom:clamp(16px,1.8vw,22px);
  font-variant-numeric:tabular-nums;
  transition:color .35s var(--e);
}
@media (hover:hover) and (pointer:fine){
  .nx-apply-flow:has(> .nx-apply-step:hover) > .nx-apply-step{
    scale:.955;
    filter:grayscale(1) opacity(.5);
  }
  .nx-apply-flow:has(> .nx-apply-step:hover) > .nx-apply-step:hover{
    scale:1.055;
    filter:none;
    z-index:2;
    background-color:rgba(239,230,214,.09);
    border-color:rgba(239,230,214,.22);
  }
  .nx-apply-step:hover em{color:var(--lera-l)}
}
.nx-apply-flow.har-pa > .nx-apply-step:not(.pa){
  scale:.965;
  filter:grayscale(1) opacity(.55);
}
.nx-apply-flow.har-pa > .nx-apply-step.pa{
  scale:1.02;
  background-color:rgba(239,230,214,.09);
  border-color:rgba(239,230,214,.22);
}
.nx-apply-flow.har-pa > .nx-apply-step.pa em{color:var(--lera-l)}

/* ============================================================
   11. RÖSTER — brevet, tills det finns riktiga omdömen

   Tre tomma platshållare stod här förut, randiga och grå. De var
   ärliga men sa till en förälder att ingen använt oss än. Nu står ett
   brev från de två som driver Nextrum, i samma blad som manifestet
   och läxhjälpskortet, med väggcitatets citattecken (.nx-vagg-ord i
   cinema) så att det läses som något någon sagt.

   Rutnätet fyller sig självt. Brevet tar hela raden, och ett riktigt
   omdöme (blockquote.nx-rost utan -brev) hamnar under det, upp till
   tre i bredd. minmax(min(100%,300px),1fr) och inte 1fr: 1fr räknar
   innehållets minsta bredd som spaltens, och då kan ett långt ord
   trycka ut sidan i sidled på en telefon.
   ============================================================ */
.nx-roster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(40px,5vw,64px);
}
.nx-rost{margin:0;display:flex;flex-direction:column}
/* Tecknet är utsmyckning. Andra värdet är dess text för skärmläsare,
   alltså ingen; en webbläsare som inte kan syntaxen behåller det
   första och läser tecknet, som den alltid gjort. */
.nx-rost::before{
  content:"”";
  content:"”" / "";
  display:block;
  font-size:clamp(2.6rem,4vw,3.6rem);
  line-height:.62;
  color:var(--acc-lugn);
  margin-bottom:clamp(10px,1.2vw,16px);
}
.nx-rost p{
  font-size:1.06rem;line-height:1.5;letter-spacing:-.015em;
  color:var(--bl);text-wrap:pretty;
}
.nx-rost a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.nx-rost cite{
  display:block;font-style:normal;
  margin-top:auto;padding-top:clamp(20px,2.4vw,30px);
  font-size:.95rem;line-height:1.4;
}
.nx-rost cite b{display:block;font-weight:600;letter-spacing:-.018em;color:var(--bl)}
.nx-rost cite span{display:block;color:var(--bl-3)}

/* Brevet: hela raden, så att kanterna linjerar med rubriken till
   vänster och ingressens regel till höger, och en textrad som går att
   läsa i ett svep. */
.nx-rost-brev{
  grid-column:1/-1;
  padding:clamp(26px,4.4vw,60px);
}
.nx-rost-brev p,.nx-rost-brev cite{font-style:italic}
.nx-rost-brev::before{font-size:clamp(3rem,5.2vw,4.6rem)}
.nx-rost-brev p{
  font-size:clamp(1.14rem,1.9vw,1.5rem);
  line-height:1.46;letter-spacing:-.02em;font-weight:500;
  max-width:58ch;
}

/* ============================================================
   12. REDUCERAD RÖRELSE
   nx-sr sätts aldrig i det läget, så startlägena ovan gäller inte.
   Det som är kvar är det som rör sig av sig självt.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .nx-holdpunkter > li,
  .nx-holdpunkter:has(> li:hover) > li,
  .nx-apply-flow > .nx-apply-step,
  .nx-apply-flow:has(> .nx-apply-step:hover) > .nx-apply-step{scale:none !important}
  .sd-rum,.sd-fonster{transform:none !important}
  .sd-nl-mat i{transition:none}
}