/* ============================================================
   NEXTRUM — LANDNINGSSIDORNA (laxhjalp-*)
   Stegen som ritas fram, platserna som en linje och ämnets färg.
   Rörelsen står i nextrum-landning.js (GSAP). Utan skriptet, och med
   reducerad rörelse, står allt här färdigt: linjen dragen, stegen
   tända. Inget göms i CSS; det döljs bara av skriptet som visar det.
   Inga hexkoder: färgerna är cinemas tokens.
   ============================================================ */

/* Ämnets färg (2026-10-28): ämnessidorna sätter data-lp-amne på main.
   På papperet den mörka tonen, i mörkt läge den ljusa (-l), som
   ämnesfärgerna på bark. */
[data-lp-amne="ma"]{--lp-f:var(--amne-ma)}
[data-lp-amne="sv"]{--lp-f:var(--amne-sv)}
[data-lp-amne="en"]{--lp-f:var(--amne-en)}
[data-lp-amne="no"]{--lp-f:var(--amne-no)}
[data-lp-amne="so"]{--lp-f:var(--amne-so)}
[data-lp-amne="ms"]{--lp-f:var(--amne-ms)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-lp-amne="ma"]{--lp-f:var(--amne-ma-l)}
  :root:not([data-theme="light"]) [data-lp-amne="sv"]{--lp-f:var(--amne-sv-l)}
  :root:not([data-theme="light"]) [data-lp-amne="en"]{--lp-f:var(--amne-en-l)}
  :root:not([data-theme="light"]) [data-lp-amne="no"]{--lp-f:var(--amne-no-l)}
  :root:not([data-theme="light"]) [data-lp-amne="so"]{--lp-f:var(--amne-so-l)}
  :root:not([data-theme="light"]) [data-lp-amne="ms"]{--lp-f:var(--amne-ms-l)}
}
:root[data-theme="dark"] [data-lp-amne="ma"]{--lp-f:var(--amne-ma-l)}
:root[data-theme="dark"] [data-lp-amne="sv"]{--lp-f:var(--amne-sv-l)}
:root[data-theme="dark"] [data-lp-amne="en"]{--lp-f:var(--amne-en-l)}
:root[data-theme="dark"] [data-lp-amne="no"]{--lp-f:var(--amne-no-l)}
:root[data-theme="dark"] [data-lp-amne="so"]{--lp-f:var(--amne-so-l)}
:root[data-theme="dark"] [data-lp-amne="ms"]{--lp-f:var(--amne-ms-l)}

/* Listan med vad passen går ut på: siffrorna i ämnets färg. */
[data-lp-amne] .nx-list em{color:var(--lp-f)}

/* ---------- Så går det till: tre steg på en skena ----------
   Skenan fylls när man scrollar (scrub), och varje steg tänds när
   fyllningen når det (klassen lp-tand). Ordningen ger färgen (n:te
   steget färg n), utom på en ämnessida, där ämnet gör det. */
.lp-steg{position:relative;padding-left:58px}
.lp-steg-spar{
  position:absolute;left:21px;top:22px;bottom:22px;width:2px;
  background:var(--line);border-radius:2px;overflow:hidden;
}
.lp-steg-fyll{
  position:absolute;inset:0;
  background:var(--lp-f,var(--acc));
  transform-origin:50% 0;
}
.lp-steg ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,2.6vw,30px)}
.lp-steg li{position:relative;min-height:44px}
.lp-steg li:nth-child(1){--f:var(--amne-ma)}
.lp-steg li:nth-child(2){--f:var(--amne-en)}
.lp-steg li:nth-child(3){--f:var(--amne-no)}
.lp-steg-nr{
  position:absolute;left:-58px;top:0;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  font:600 .82rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;
  color:var(--pap);background:var(--lp-f,var(--f));
  border:2px solid var(--lp-f,var(--f));
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),scale .35s var(--ease);
}
.lp-steg b{display:block;font-size:1.06rem;font-weight:600;letter-spacing:-.02em;padding-top:10px}
.lp-steg p{margin-top:6px;color:var(--muted);line-height:1.6}
.nx-text .lp-steg-mer,.lp-steg-mer{margin-top:clamp(26px,3vw,34px)}
/* Med skriptet: släckt tills fyllningen når steget. */
.lp-rorelse .lp-steg li:not(.lp-tand) .lp-steg-nr{
  background:var(--pap);color:var(--muted);border-color:var(--line);scale:.86;
}

/* ---------- Var vi matchar elever: platserna som en linje ----------
   Som en linjekarta: en linje, en station per plats. På en dator
   vågrät med namnen snett under, på en telefon lodrät med namnen
   bredvid. Det är ingen riktig linje i SL:s nät, bara en bild. */
.lp-linje{position:relative;margin-top:clamp(24px,3vw,34px)}
.lp-linje-spar{
  position:absolute;background:var(--acc);border-radius:6px;
  left:9px;top:12px;bottom:12px;width:6px;transform-origin:50% 0;
}
.lp-linje ol{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:4px}
.lp-linje li{display:flex;align-items:center;gap:16px;min-height:34px}
.lp-linje i{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--pap);border:5px solid var(--acc);
  box-sizing:border-box;
}
.lp-linje li > span{font-size:.95rem;line-height:1.3;color:var(--fg)}
.lp-linje li:first-child i,.lp-linje li:last-child i{background:var(--acc)}

@media (min-width:861px){
  /* Linjen slutar mitt i sista pricken: sista stationen står i sista
     n:tedelen, med pricken 12 px in (--n sätts av generatorn). */
  .lp-linje-spar{left:12px;right:calc(100% / var(--n,8) - 12px);top:9px;bottom:auto;width:auto;height:6px;transform-origin:0 50%}
  .lp-linje ol{display:flex;justify-content:space-between;gap:0}
  .lp-linje li{
    flex:1 1 0;min-width:0;flex-direction:column;align-items:flex-start;gap:0;
    min-height:0;height:clamp(118px,11vw,140px);
  }
  .lp-linje li > span{
    display:block;white-space:nowrap;margin:12px 0 0 10px;
    rotate:32deg;transform-origin:0 0;
  }
}

/* ---------- Flikarna (2026-10-28) ----------
   Vad passen går ut på (ämnes-, stadie- och onlinesidan) och Var passen
   hålls (områdessidorna). Skriptet bygger raden; utan det står panelerna
   som lista och stycken. Panelerna delar rutnätscell, så behållaren är
   lika hög som den högsta och inget under den hoppar vid bytet. */
.lp-flikrad{
  position:relative;display:flex;gap:4px;width:max-content;max-width:100%;
  padding:4px;border-radius:100px;background:var(--surface);border:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;
  margin-bottom:clamp(20px,2.4vw,28px);
}
.lp-flikrad::-webkit-scrollbar{display:none}
.lp-flik{
  position:relative;z-index:1;flex:none;
  min-height:44px;padding:0 18px;border:0;border-radius:100px;background:none;
  font:inherit;font-size:.92rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  color:var(--muted);cursor:pointer;
  transition:color .3s var(--ease),scale .2s var(--ease);
}
.lp-flik:hover{color:var(--fg)}
.lp-flik:active{scale:.96}
.lp-flik[aria-selected="true"]{color:var(--pap)}
.lp-flik:focus-visible{outline:2px solid var(--lp-f,var(--acc));outline-offset:2px}
.lp-flikpil{
  position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:100px;
  background:var(--lp-f,var(--fg));
  transition:translate .45s cubic-bezier(.3,1.35,.5,1),width .45s cubic-bezier(.3,1.35,.5,1);
}
.lp-flikrad:not(.lp-klar) .lp-flikpil{transition:none}
@media (prefers-reduced-motion:reduce){.lp-flikpil,.lp-flik{transition:none}}

.lp-flikar-pa{display:grid}
.lp-flikar-pa > [data-lp-flik]{grid-area:1/1}
.lp-flikar-pa > [data-lp-flik]:not(.lp-vald){visibility:hidden}
/* Listan som flikar: en rad i taget, utan listans streck, i ett kort. */
.nx-list.lp-flikar-pa > li,
.nx-list.lp-flikar-pa > li:last-child{
  border:1px solid var(--line);border-radius:22px;background:var(--surface);
  padding:clamp(20px,2.6vw,30px);
}
.nx-list.lp-flikar-pa b{font-size:1.15rem}
.nx-list.lp-flikar-pa p{font-size:1rem}
.lp-plats.lp-flikar-pa > [data-lp-flik] p + p{margin-top:1em}
.nx-text .lp-plats-not{margin:0 0 clamp(16px,2vw,20px)}

/* ---------- Ljuset över korten ----------
   Följer musen (skriptet skriver --mx och --my på kortet), i ämnets färg
   på en ämnessida. Bara med mus. */
@media (hover:hover) and (pointer:fine){
  .nx-omr-kort{position:relative;isolation:isolate}
  .nx-omr-kort::before{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--lp-f,var(--acc)) 16%,transparent),transparent 70%);
    opacity:0;transition:opacity .3s var(--ease);
  }
  .nx-omr-kort:hover::before{opacity:1}
  /* Stationerna svarar på musen. */
  .lp-linje i{transition:background .2s var(--ease),scale .25s var(--ease)}
  .lp-linje li:hover i{background:var(--acc);scale:1.18}
  .lp-linje li:hover > span{color:var(--acc-text,var(--acc))}
}

/* ---------- Lästråden ----------
   Hur långt man kommit på sidan, överst över sidhuvudet. Skriptet skapar
   den bara när rörelsen är på. */
.lp-las{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:801;pointer-events:none;
  background:var(--lp-f,var(--orange));transform-origin:0 50%;
}