/* Entrén på #/logga-in: introts stil, ur entrén i DriveSpace @ 26cbc0b (intro.css), alla regler under .inloggning.
   Rubrikblocket, utforskaren med flikar, panel, stegare och fot, och scenernas slutbild per steg.
   Scenens yta har tre fasta lägen, 234, 304 och 440 px bred och 300 px hög. Varje element som följer
   med mellan stegen har därför ett exakt läge per steg här (spec 4.1).
   Stegens rörelser är korta Web Animations i inloggning-intro.js mellan slutlägena här, och visningens knapp
   har en framstegsring. Utan rörelse visas slutläget direkt, så inget här väntar på en animation. */

/* ---------- Sektionen och rubrikblocket ---------- */
.inloggning .discovery {
  max-width: calc(1120px + 2 * var(--marginal));
  margin: 0 auto;
  padding: var(--s-10) var(--marginal) 0;
}
.inloggning .intro-huvud {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
.inloggning .intro-huvud h2 {
  color: var(--text);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem);
  font-weight: var(--vikt-rubrik);
  line-height: 1.08;
  letter-spacing: var(--spacing-rubrik-liten);
}
.inloggning .intro-ingress {
  max-width: 34rem;
  color: var(--text-dampad);
  font-size: var(--fs-bas);
  line-height: 1.6;
}

/* ---------- Utforskaren ---------- */
.inloggning .explorer {
  color-scheme: light;
  color: var(--text);
  background: var(--yta);
  border-radius: var(--r-l);
  padding: var(--s-3);
}

/* Flikarna: K3:s segmentflikar med den valda plattan bakom texten (M12). Två lika kolumner utan
   mellanrum, så att translateX(100%) lägger plattan exakt under den andra fliken. */
.inloggning .intro-flikar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
}
.inloggning .intro-flikplatta {
  grid-area: 1 / 1;
  border-radius: var(--r-m);
  background: var(--primar);
  pointer-events: none;
  transform: translateX(0);
  transition: transform var(--t-normal) var(--kurva);
}
.inloggning .explorer[data-intro-produkt="space"] .intro-flikplatta { transform: translateX(100%); }
/* Under 420 px står innehållet i mitten. Luckan 6 px håller texten utanför symbolens frizon och ger symbolen
   minst 9 px till flikens kant vid 320 px, så att fokusringen (3 px innanför kanten) står 6 px från den. */
.inloggning .intro-flikar .inloggning-flik {
  position: relative;
  z-index: 1;
  grid-row: 1;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: var(--s-1);
  white-space: nowrap;
  text-align: left;
  transition: color var(--t-normal) var(--kurva), background-color var(--t-snabb) var(--kurva);
}
.inloggning .intro-flikar .inloggning-flik[data-product="base"] { grid-column: 1; }
.inloggning .intro-flikar .inloggning-flik[data-product="space"] { grid-column: 2; }
.inloggning .intro-flikar .inloggning-flik[aria-selected="true"],
.inloggning .intro-flikar .inloggning-flik[aria-selected="true"]:hover { background: transparent; }
.inloggning .intro-flikar .inloggning-flik:focus-visible { outline: var(--fokus-bredd) solid var(--fokus); outline-offset: -3px; }
/* Ovald flik visar den navy småsymbolen och vald flik den vita, utan bricka. Symbolens frizon, en fjärdedel
   av diametern eller 6 px, rymmer då bara den valda plattan. Bytet tonar på plattans tid. */
.inloggning .intro-flikmarke {
  display: grid;
  flex: none;
  width: 24px;
  height: 24px;
}
.inloggning .intro-flikmarke img {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  transition: opacity var(--t-normal) var(--kurva);
}
.inloggning .intro-flikmarke-vit,
.inloggning .intro-flikar .inloggning-flik[aria-selected="true"] .intro-flikmarke-navy { opacity: 0; }
.inloggning .intro-flikar .inloggning-flik[aria-selected="true"] .intro-flikmarke-vit { opacity: 1; }
.inloggning .intro-flik-text { display: grid; min-width: 0; }
.inloggning .intro-fliknamn {
  font-size: var(--fs-m);
  font-weight: var(--vikt-fet);
  line-height: 1.2;
}
.inloggning .intro-flikrad {
  display: none;
  color: var(--text-dampad);
  font-size: var(--fs-s);
  font-weight: var(--vikt-normal);
  line-height: 1.3;
}
.inloggning .intro-flikar .inloggning-flik[aria-selected="true"] .intro-flikrad { color: var(--text-dampad-pa-mork); }

/* Panelen: text över scen, två kolumner från 961 px (spec beslut 34). Panelen är behållaren som avgör
   scenens största bredd. */
.inloggning .intro-panel {
  container: intro-panel / inline-size;
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-5);
}
.inloggning .intro-text {
  min-width: 0;
  padding-inline: var(--s-1);
}
.inloggning .intro-rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}
.inloggning .intro-raknare {
  color: var(--text-dampad);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  font-variant-numeric: tabular-nums;
}
.inloggning .intro-etapp {
  margin-top: var(--s-3);
  color: var(--text-dampad);
  font-size: var(--fs-s);
  line-height: 1.5;
}
.inloggning .intro-text h3 {
  margin-top: var(--s-5);
  font-size: 1.75rem;
  font-weight: var(--vikt-rubrik);
  line-height: 1.12;
  letter-spacing: var(--spacing-rubrik-liten);
}
.inloggning .intro-brod {
  max-width: 34rem;
  margin-top: var(--s-3);
  color: var(--text-dampad);
  font-size: var(--fs-bas);
  line-height: 1.6;
}

/* Stegaren (M13): plattor förbundna av ett spår som fylls fram till aktivt steg. Raden är flex,
   så att .intro-spela får samma lucka efter .intro-nasta. Bredden med den knappen är prövad
   från 320 px. */
.inloggning .intro-stegare {
  --intro-steglucka: var(--s-2);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--intro-steglucka);
  margin-top: var(--s-6);
}
.inloggning .intro-stegspar {
  position: absolute;
  left: calc(var(--klickyta) / 2);
  top: calc(50% - 1px);
  width: calc(2 * (var(--klickyta) + var(--intro-steglucka)));
  height: 2px;
  border-radius: 1px;
  background: var(--linje);
}
.inloggning .intro-stegfyllnad {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primar);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-lugn) var(--kurva);
}
.inloggning .explorer[data-intro-steg="1"] .intro-stegfyllnad { transform: scaleX(.5); }
.inloggning .explorer[data-intro-steg="2"] .intro-stegfyllnad { transform: scaleX(1); }
.inloggning .intro-steg,
.inloggning .intro-nasta,
.inloggning .intro-spela {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--klickyta);
  height: var(--klickyta);
  padding: 0;
  border: 1.5px solid var(--linje-falt);
  border-radius: var(--r-s);
  background: var(--yta);
  color: var(--text);
  font-size: var(--fs-bas);
  font-weight: var(--vikt-fet);
  line-height: 1;
  transition: background-color var(--t-snabb) var(--kurva), border-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva);
}
.inloggning .intro-steg[data-intro-lage="passerad"] {
  border-color: var(--yta-mjuk-2);
  background: var(--yta-mjuk-2);
}
.inloggning .intro-steg[aria-pressed="true"] {
  border-color: var(--primar);
  background: var(--primar);
  color: var(--primar-text);
}
.inloggning .intro-steg:not([aria-pressed="true"]):hover { background: var(--yta-mjuk); }
.inloggning .intro-nasta:hover,
.inloggning .intro-spela:hover {
  border-color: var(--primar);
  background: var(--primar);
  color: var(--primar-text);
}
.inloggning .explorer :is(.intro-steg, .intro-nasta, .intro-spela, .intro-till-login):focus-visible {
  outline: var(--fokus-bredd) solid var(--fokus);
  outline-offset: var(--fokus-avstand);
}
/* Visningens knapp (beslut 46): samma platta som nästa-knappen, ikonen pausa eller spela, och runt ikonen
   en framstegsring som dekor. JS sätter --intro-framsteg (0 till 1) medan visningen går. Cirkeln har
   pathLength 1, så att streckets längd är andelen. Ringen står still när visningen hålls eller är pausad. */
.inloggning .intro-spela .icon { width: 16px; height: 16px; }
.inloggning .intro-spela-ikon { display: grid; }
.inloggning .intro-spela-ring {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  margin: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: butt;
  pointer-events: none;
}
.inloggning .intro-spela-ring circle {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--intro-framsteg, 0));
}

/* Foten. */
.inloggning .intro-fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-6);
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-1) 0;
  border-top: 1.5px solid var(--linje);
}
.inloggning .intro-fot-text {
  color: var(--text-dampad);
  font-size: var(--fs-s);
  line-height: 1.5;
}
.inloggning .explorer .intro-till-login {
  gap: var(--s-2);
  color: var(--text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
}

/* ---------- Scenen (spec 4) ---------- */
.inloggning .intro-scen {
  container: intro-scen / inline-size;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 272px;
  min-width: 0;
  padding: 11px;
  border-radius: var(--r-l);
  background: var(--yta-mjuk);
  overflow: clip;
  pointer-events: none;
}
/* Scenen omsluter sin yta: största bredden är ytans läge plus utfyllnaden och högst 16 px luft, vald efter
   panelens bredd. Ytan fyller då sin plats i stället för att stå i ett tomt fält. Lägena 481 px och uppåt
   står under Bredder. */
@container intro-panel (min-width: 326px) {
  .inloggning .intro-scen { max-width: 342px; }
}
.inloggning .intro-scen-yta {
  /* Läge S, 234 px. Ett kort och elementet som står på dess plats läser samma mått. */
  --intro-b: 234px;
  --intro-kund-bredd: 86px;
  --intro-ws-bredd: 56px;
  --intro-fraga-top: 7px;
  --intro-svar-indrag: 0px;
  --intro-mapp-x: 0px;
  --intro-mapp-b: 234px;
  --intro-mapp-top: 33px;
  --intro-etikett-indrag: 8px;
  --intro-brief-x: 92px;
  --intro-brief-top: 56px;
  --intro-brief-radie: var(--r-s);
  --intro-tid-b: 84px;
  --intro-tid-h: 188px;
  --intro-bubbla-top: 14px;
  --intro-bubbla-max: 200px;
  --intro-agent-top: 83px;
  --intro-agent-b: 234px;
  --intro-foto-x: 0px;
  --intro-foto-y: 12px;
  --intro-foto-b: 150px;
  --intro-foto-h: 100px;
  --intro-ren-x: 0px;
  --intro-ren-y: 122px;
  --intro-ren-b: 234px;
  --intro-pdf-x: 27px;
  --intro-pdf-b: 180px;
  --intro-korg-x: 0px;
  --intro-korg-b: 234px;
  /* Steg 3. Fotot och renskriften står i sidans två spalter, mitt mellan sidhuvudet och sidfoten, med sidan
     i sitt läge före utkorgen. Skalan är spaltens bredd delad med elementets bredd. Renskriftens rader börjar
     13,5 px in och deras första streck 62 px ned, så att strecken och fotot står i samma överkant.
     Slutbilden lägger sidans rörelse ovanpå: 24 px ned och skalan 0,92 kring sidans överkant, mitt på
     (spec 4.3). Sidlagret bär den, så att fotot, renskriften och WS 2 följer sidan utan egen räkning. */
  --intro-spalt-y: 92px;
  --intro-fs-s: .4;
  --intro-rs-s: .391304;
  --intro-rs-x: 105.22px;
  --intro-rs-y: 67.74px;
  --intro-sida-y: 24px;
  --intro-sida-s: .92;
  --intro-pdf-mitt: calc(var(--intro-pdf-x) + var(--intro-pdf-b) / 2);
  position: relative;
  width: var(--intro-b);
  height: 300px;
  margin-inline: auto;
}
@container intro-scen (min-width: 304px) {
  .inloggning .intro-scen-yta {
    --intro-b: 304px;
    --intro-fraga-top: 24px;
    --intro-mapp-b: 304px;
    --intro-etikett-indrag: 16px;
    --intro-brief-x: 100px;
    --intro-brief-top: 73px;
    --intro-brief-radie: var(--r-l);
    --intro-tid-b: 88px;
    --intro-tid-h: 154px;
    --intro-bubbla-top: 24px;
    --intro-bubbla-max: 260px;
    --intro-agent-top: 74px;
    --intro-agent-b: 280px;
    --intro-foto-y: 6px;
    --intro-foto-b: 168px;
    --intro-foto-h: 112px;
    --intro-ren-y: 128px;
    --intro-ren-b: 304px;
    --intro-pdf-x: 52px;
    --intro-pdf-b: 200px;
    --intro-korg-b: 304px;
    --intro-spalt-y: 88px;
    --intro-fs-s: .428571;
    --intro-rs-s: .3213;
    --intro-rs-x: 143.16px;
    --intro-rs-y: 68.08px;
  }
}
@container intro-scen (min-width: 440px) {
  .inloggning .intro-scen-yta {
    --intro-b: 440px;
    --intro-fraga-top: 34px;
    --intro-svar-indrag: 32px;
    --intro-mapp-x: 70px;
    --intro-mapp-b: 300px;
    --intro-brief-x: 128px;
    --intro-tid-b: 112px;
    --intro-bubbla-top: 24px;
    --intro-agent-top: 76px;
    --intro-agent-b: 340px;
    --intro-foto-y: 90px;
    --intro-foto-b: 180px;
    --intro-foto-h: 120px;
    --intro-ren-x: 192px;
    --intro-ren-y: 67px;
    --intro-ren-b: 248px;
    --intro-pdf-x: 120px;
    --intro-pdf-b: 200px;
    --intro-korg-x: 40px;
    --intro-korg-b: 360px;
    --intro-fs-s: .4;
    --intro-rs-s: .402715;
    --intro-rs-x: 210.06px;
    --intro-rs-y: 63.03px;
  }
}

/* Gemensamt i scenen. Kort som .inloggning-kort (M8) med 14 px utfyllnad: innehållet börjar 15,5 px in. */
.inloggning .intro-scen .inloggning-kort { padding: 14px; }
.inloggning .intro-huvudrad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  min-height: 28px;
}
.inloggning .intro-huvudrad--bryt {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.inloggning .intro-plats { flex: none; height: 28px; }
.inloggning .intro-plats--kund { width: var(--intro-kund-bredd); }
.inloggning .intro-plats--ws { width: var(--intro-ws-bredd); }
.inloggning .intro-streck {
  display: block;
  height: 8px;
  margin-top: 8px;
  border-radius: 4px;
  background: var(--yta-mjuk-2);
  transform-origin: left center;
}
.inloggning .intro-streck--kort { width: 68%; }
.inloggning .intro-huvudrad + .intro-streck { margin-top: 12px; }
.inloggning .intro-glyf {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Grupperna. Bara stegets huvudgrupp syns. Det som kommer väntar till höger, det som lämnat till vänster. */
.inloggning .intro-grupp {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(16px);
}
.inloggning .intro-grupp[data-intro-aktiv] { opacity: 1; transform: none; }
.inloggning .intro-scen:is([data-art="base-2"], [data-art="base-3"]) [data-intro-grupp="fraga"],
.inloggning .intro-scen[data-art="base-3"] [data-intro-grupp="mapp"],
.inloggning .intro-scen:is([data-art="space-2"], [data-art="space-3"]) [data-intro-grupp="lage"] { transform: translateX(-16px); }
.inloggning .intro-scen[data-art="space-3"] [data-intro-grupp="foto"] { opacity: 1; transform: none; }
/* Innan steget spelats första gången väntar bilden osynlig, så att uppspelningen bygger den i stället för
   att blinka bort den. Under paus och minskad rörelse spelas inget, och slutbilden syns direkt. */
.inloggning:not([data-motion="paused"]) .intro-scen:not([data-intro-spelad]) :is([data-intro-aktiv], .intro-kund, .intro-ws) { opacity: 0; }

/* Chipen som följer med: samma nod i alla tre stegen, med läget per steg. */
.inloggning .intro-kund,
.inloggning .intro-ws {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  justify-content: center;
}
.inloggning .intro-kund { width: var(--intro-kund-bredd); }
.inloggning .intro-ws { width: var(--intro-ws-bredd); }
.inloggning .intro-scen[data-art="base-1"] .intro-kund { transform: translate(15.5px, calc(var(--intro-fraga-top) + 15.5px)); }
.inloggning .intro-scen[data-art="base-2"] .intro-kund { transform: translate(calc(var(--intro-mapp-x) + 15.5px), calc(var(--intro-mapp-top) + 15.5px)); }
.inloggning .intro-scen[data-art="base-3"] .intro-kund { transform: translate(calc(var(--intro-brief-x) + 15.5px), calc(var(--intro-brief-top) + 15.5px)); }
.inloggning .intro-scen[data-art="space-1"] .intro-ws { transform: translate(15.5px, calc(var(--intro-agent-top) + 53.5px)); }
.inloggning .intro-scen[data-art="space-2"] .intro-ws { transform: translate(calc(var(--intro-foto-x) + 8px), calc(var(--intro-foto-y) + 8px)); }
/* I slutbilden följer WS 2 sidan in i utkorgen men skalas inte, så att chipets text står kvar i 13 px.
   Chipet står i sidlagret (space-3 nedan) på sin plats i sidhuvudet, och skalan 1 / 0,92 kring chipets mitt
   tar ut sidans skala. */
.inloggning .intro-scen[data-art="space-3"] .intro-ws {
  transform: translate(calc(var(--intro-pdf-x) + 15.5px), 19.5px) scale(calc(1 / var(--intro-sida-s)));
}

/* base-1: frågan och svaret med källor. */
.inloggning .intro-g-fraga {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--intro-fraga-top);
}
.inloggning .intro-fragetext {
  margin-top: 8px;
  font-size: var(--fs-bas);
  font-weight: var(--vikt-fet);
  line-height: 1.35;
}
.inloggning .intro-svar { margin-left: var(--intro-svar-indrag); }
/* Källorna står på en rad från läge M (304 px). Chipen är satta i DM Sans (spec beslut 6) och blev 6 och 8 px
   bredare än i förlagan, så att två källor fyllde hela raden i läge M och den andra bröts till en rad under den fasta
   ytan. Luckan och chipens sidoutfyllnad är därför tätare här, så att raden har omkring 10 px kvar, och raden bryts
   inte från läge M: ett chip som blir några pixlar bredare går in i kortets utfyllnad i stället för att göra kortet
   högre. Läge S (234 px) har inte plats för två källor och bryter som i förlagan. */
.inloggning .intro-kallor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.inloggning .intro-kallor .inloggning-chip { padding-inline: 8px; }
@container intro-scen (min-width: 304px) {
  .inloggning .intro-kallor { flex-wrap: nowrap; }
}

/* base-2: mappen Kund A med filerna och klassningens etiketter. Etiketterna är det AI gör, så varje
   etikett är ett AI-chip (beslut 22). Etiketten står under sin platta i alla tre lägena. */
.inloggning .intro-mapp {
  position: absolute;
  left: var(--intro-mapp-x);
  top: var(--intro-mapp-top);
  width: var(--intro-mapp-b);
  border-top-left-radius: 0;
}
.inloggning .intro-mapp::before {
  content: "";
  position: absolute;
  left: -1.5px;
  top: -14px;
  width: 104px;
  height: 16px;
  border: 1.5px solid var(--linje);
  border-bottom: 0;
  border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--yta);
}
.inloggning .intro-filer {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.inloggning .intro-fil {
  display: grid;
  justify-items: start;
  gap: 4px;
}
.inloggning .intro-filplatta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px 0 6px;
  border-radius: var(--r-xs);
  background: var(--yta-mjuk-2);
  color: var(--text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  line-height: 1;
}
.inloggning .intro-filplatta::before {
  content: "";
  flex: none;
  width: 10px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.inloggning .intro-fil > .inloggning-chip--ai { margin-left: var(--intro-etikett-indrag); }

/* base-3: tidslinjen bredvid klientbriefingen, och Word-kortet som tas fram ur den. */
.inloggning .intro-tidslinje {
  position: absolute;
  left: 0;
  top: var(--intro-brief-top);
  width: var(--intro-tid-b);
  height: var(--intro-tid-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.inloggning .intro-tidslinje-linje {
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1.5px;
  background: var(--linje-mellan);
  transform-origin: center top;
}
.inloggning .intro-punkt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  font-size: var(--fs-s);
  font-weight: var(--vikt-mellan);
  line-height: 1.2;
}
.inloggning .intro-prick {
  flex: none;
  width: 11.5px;
  height: 11.5px;
  border-radius: 50%;
  background: var(--primar);
}
.inloggning .intro-briefing {
  position: absolute;
  left: var(--intro-brief-x);
  right: 0;
  top: var(--intro-brief-top);
  border-radius: var(--intro-brief-radie);
}
.inloggning .intro-korttitel {
  margin-top: 10px;
  font-size: var(--fs-m);
  font-weight: var(--vikt-fet);
  line-height: 1.3;
}
.inloggning .intro-korttitel + .intro-streck { margin-top: 10px; }
.inloggning .intro-scen .intro-word {
  position: absolute;
  right: 12px;
  bottom: -32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-s);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
}
.inloggning .intro-word .icon { width: 16px; height: 16px; }
.inloggning .intro-word .intro-bock {
  width: 18px;
  height: 18px;
  stroke: var(--ok);
  stroke-width: 2;
  /* Bockens bana är 19,8 enheter lång. Rörelsen ritar den med stroke-dashoffset från 20 till 0. */
  stroke-dasharray: 20;
}

/* space-1: din fråga och agentens svar, talen räknade i kod. */
.inloggning .intro-bubbla {
  position: absolute;
  right: 0;
  top: var(--intro-bubbla-top);
  max-width: var(--intro-bubbla-max);
  padding: 10px 14px;
  border-radius: var(--r-l) var(--r-l) var(--r-s) var(--r-l);
  background: var(--primar);
  color: var(--primar-text);
  font-size: var(--fs-m);
  font-weight: var(--vikt-mellan);
  line-height: 1.3;
}
.inloggning .intro-agent {
  position: absolute;
  left: 0;
  top: var(--intro-agent-top);
  width: var(--intro-agent-b);
}
.inloggning .intro-lagerader {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.inloggning .intro-lagerad {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: var(--fs-s);
  font-weight: var(--vikt-mellan);
  line-height: 1.3;
}
.inloggning .intro-lagerad b { font-weight: var(--vikt-fet); }
.inloggning .intro-kod {
  display: flex;
  width: fit-content;
  margin-top: 10px;
}

/* space-2: fotot av A3-arket och renskriften. Renskriftens kort ritas av ::before, så att ramen kan
   tona ut när texten flyttar in i PDF-sidan. */
.inloggning .intro-foto {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--intro-foto-b);
  height: var(--intro-foto-h);
  border: 1.5px solid var(--linje);
  border-radius: var(--r-s);
  background: var(--yta-beige);
  transform-origin: 0 0;
  transform: translate(var(--intro-foto-x), var(--intro-foto-y));
}
.inloggning .intro-handstil {
  position: absolute;
  left: 10px;
  top: 42px;
  width: calc(100% - 20px);
  height: calc(100% - 52px);
  overflow: visible;
  fill: none;
  stroke: var(--linje-stark);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inloggning .intro-handstil path { vector-effect: non-scaling-stroke; }
.inloggning .intro-renskrift {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--intro-ren-b);
  height: 166px;
  padding: 13.5px;
  transform-origin: 0 0;
  transform: translate(var(--intro-ren-x), var(--intro-ren-y));
}
.inloggning .intro-renskrift::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--linje);
  border-radius: var(--r-l);
  background: var(--yta);
}
.inloggning .intro-renskrift > * { position: relative; }
.inloggning .intro-renskrift-chip {
  display: grid;
  align-items: center;
  justify-items: start;
  min-height: 32px;
  margin-bottom: 10px;
}
.inloggning .intro-renskrift-chip > * { grid-area: 1 / 1; }
.inloggning .intro-godkant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
}
/* Rösten i Rethink Sans kursiv (spec beslut 7). Roten ger DM Sans, så typsnittet sätts här. */
.inloggning .intro-rost {
  color: var(--text);
  font-family: var(--font-rubrik);
  font-size: var(--fs-s);
  font-style: italic;
  font-weight: var(--vikt-mellan);
  line-height: 1.5;
  white-space: nowrap;
}
.inloggning .intro-rost + .intro-rost { margin-top: 4px; }
.inloggning .intro-rost::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  width: var(--intro-rost-streck, 80%);
  height: 8px;
  border-radius: 4px;
  background: var(--linje-mellan);
  opacity: 0;
}
.inloggning .intro-rost:nth-of-type(1) { --intro-rost-streck: 76%; }
.inloggning .intro-rost:nth-of-type(2) { --intro-rost-streck: 72%; }
.inloggning .intro-rost:nth-of-type(3) { --intro-rost-streck: 96%; }
.inloggning .intro-rost:nth-of-type(4) { --intro-rost-streck: 64%; }
.inloggning .intro-olasligt {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--yta-mjuk);
  text-decoration: underline dashed 1.5px var(--linje-falt);
  text-underline-offset: 3px;
}
.inloggning .intro-scen[data-art="space-2"] .intro-utkast { opacity: 0; }
.inloggning .intro-scen[data-art="space-2"] .intro-godkant { opacity: 1; }

/* space-3: PDF-sidan i Drives form i utkorgen. Fotot och renskriften står i sidans spalter. Sidans text
   sätts så att den står i 13 px efter skalan 0,92.
   Sidan, fotot, renskriften och WS 2 står i sidlagret, som bär sidans rörelse in i utkorgen som en enhet
   (spec 4.1, en grupp som rör sig som en enhet räknas som ett element). Utkorgens bakre del ligger före
   lagret och den främre efter, så att sidan glider ned mellan dem. Utkorgen syns bara i space-3. */
.inloggning .intro-utkorg-bak {
  position: absolute;
  left: var(--intro-korg-x);
  top: 176px;
  width: var(--intro-korg-b);
  height: 124px;
  border-radius: var(--r-l);
  background: var(--yta-mjuk-2);
}
.inloggning .intro-utkorg-bak,
.inloggning .intro-scen .intro-utkorg { opacity: 0; }
.inloggning .intro-scen[data-art="space-3"] :is(.intro-utkorg-bak, .intro-utkorg) { opacity: 1; }
.inloggning .intro-sidlager {
  position: absolute;
  inset: 0;
  transform-origin: var(--intro-pdf-mitt) 0;
}
.inloggning .intro-pdf {
  position: absolute;
  left: var(--intro-pdf-x);
  top: 0;
  width: var(--intro-pdf-b);
  height: 236px;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  border: 1.5px solid var(--linje);
  border-radius: var(--r-s);
  background: var(--yta);
}
/* Sidhuvudet och sidfoten i ett block, så att de tonar in som en enhet efter sidans ram. */
.inloggning .intro-pdf-innehall {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.inloggning .intro-pdf .inloggning-chip { font-size: calc(var(--fs-xs) / var(--intro-sida-s)); }
.inloggning .intro-pdf::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 6.5px 6.5px 0 0;
  background: var(--primar);
}
.inloggning .intro-pdf-fot {
  padding-top: 6px;
  border-top: 1.5px solid var(--linje);
  color: var(--text-dampad);
  font-size: calc(var(--fs-xs) / var(--intro-sida-s));
  font-weight: var(--vikt-mellan);
  line-height: 1.3;
}
.inloggning .intro-scen .intro-utkorg {
  position: absolute;
  left: var(--intro-korg-x);
  top: 232px;
  width: var(--intro-korg-b);
  height: 68px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 0 14px;
}
.inloggning .intro-utkorg-titel,
.inloggning .intro-utkorg-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-s);
  line-height: 1.4;
}
.inloggning .intro-utkorg-titel { font-weight: var(--vikt-fet); }
.inloggning .intro-utkorg-rad { font-weight: var(--vikt-mellan); }
.inloggning .intro-vantar {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--status-okant);
  border-radius: 50%;
}
/* Slutbilden: sidlagret har glidit 24 px ned och skalats till 0,92 kring sidans överkant, mitt på, och sidan
   ligger i utkorgen. Fotot och renskriften står i sidans spalter, räknat i lagret före utkorgen. */
.inloggning .intro-scen[data-art="space-3"] .intro-sidlager { transform: translateY(var(--intro-sida-y)) scale(var(--intro-sida-s)); }
.inloggning .intro-scen[data-art="space-3"] .intro-foto {
  transform: translate(calc(var(--intro-pdf-x) + 15.5px), var(--intro-spalt-y)) scale(var(--intro-fs-s));
}
.inloggning .intro-scen[data-art="space-3"] .intro-renskrift {
  transform: translate(var(--intro-rs-x), var(--intro-rs-y)) scale(var(--intro-rs-s));
}
.inloggning .intro-scen[data-art="space-3"] :is(.intro-renskrift-chip, .intro-rost-text),
.inloggning .intro-scen[data-art="space-3"] .intro-renskrift::before { opacity: 0; }
.inloggning .intro-scen[data-art="space-3"] .intro-rost::after { opacity: 1; }

/* ---------- Bredder ---------- */
/* Raden under namnet får plats från 420 px. Symbolen står 12 px från plattans kant och från texten, så att
   fokusringen på vald flik, 3 px innanför kanten, ligger 9 px från symbolen och utanför frizonen. */
@media (min-width: 420px) {
  .inloggning .intro-flikar .inloggning-flik {
    justify-content: flex-start;
    gap: var(--s-3);
    padding: 6px var(--s-4) 6px var(--s-3);
  }
  .inloggning .intro-flikrad { display: block; }
}

@media (min-width: 481px) {
  .inloggning .discovery { padding-top: var(--s-14); }
  .inloggning .explorer { padding: var(--s-6); }
  .inloggning .intro-flikar { width: fit-content; max-width: 100%; }
  .inloggning .intro-text { padding-inline: 0; }
  .inloggning .intro-stegare { --intro-steglucka: var(--s-4); }
  .inloggning .intro-fot { padding-inline: 0; }
  .inloggning .intro-scen { padding: var(--s-5); }
}

/* Staplad utforskare: scenen är ytan plus 2 × 20 px och högst 16 px luft, i mitten under texten. */
@media (min-width: 481px) and (max-width: 960.98px) {
  .inloggning .intro-scen { max-width: 290px; }
  @container intro-panel (min-width: 344px) {
    .inloggning .intro-scen { max-width: 360px; }
  }
  @container intro-panel (min-width: 480px) {
    .inloggning .intro-scen { max-width: 496px; }
  }
}

@media (min-width: 961px) {
  .inloggning .discovery { padding-top: var(--s-16); }
  .inloggning .explorer { padding: var(--s-8); }
  .inloggning .intro-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-12);
    margin-top: var(--s-6);
  }
  .inloggning .intro-text h3 { font-size: 1.9375rem; }
  .inloggning .intro-stegare { --intro-steglucka: var(--s-5); }
  .inloggning .intro-nasta { margin-left: var(--s-2); }
  /* Två kolumner: scenens kolumn är (panelen − 48 px) / 2, och L-ytan får plats när panelen är 1008 px. */
  .inloggning .intro-scen { justify-self: end; max-width: 360px; }
  @container intro-panel (min-width: 1008px) {
    .inloggning .intro-scen { max-width: 496px; }
  }
}