/* Entrén på #/logga-in: omloppens, världarnas och remsans stil, ur entrén i DriveSpace @ 26cbc0b (worlds.css), alla
   under .inloggning. Bara tokens, och nyckelbilderna har prefixet world-. Kopplingslinjerna tänds vid hover och fokus
   (data-world-tand); förlagans inritning vid kortets bekräftelse följer inte med. */

/* ---------- Omloppsfältet: banorna, löparna och kopplingslinjerna ---------- */
.inloggning .orbital-field { position: absolute; z-index: -1; top: -130px; bottom: -90px; left: -22px; right: -22px; pointer-events: none; overflow: hidden; }
.inloggning .orbital-field svg { display: block; width: 100%; height: 100%; }
.inloggning .orbital-field [data-world-line] { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.inloggning .orbit-line { stroke: var(--linje-pa-mork); }
.inloggning .orbit-line.world-inre { stroke: var(--hover-ljus); }
/* Löparen är ett streck per båge, i fas över hela varvet. inloggning-varldar.js sätter start, varv och streck i px. */
.inloggning .orbit-traveler { --ambient-duration: var(--hjalte-omlopp-1); stroke: var(--text-dampad-pa-mork); stroke-linecap: round; stroke-dasharray: var(--world-streck) calc(var(--world-varv) - var(--world-streck)); animation: world-omlopp var(--ambient-duration) linear infinite; }
.inloggning .orbit-traveler.world-inre { --ambient-duration: var(--hjalte-omlopp-2); stroke-opacity: .65; animation-direction: reverse; }
.inloggning .orbital-field[data-world-vilar] .ambient { animation-play-state: paused; }
.inloggning .orbit-connector { stroke: var(--text-dampad-pa-mork); stroke-opacity: 0; transition: stroke-opacity var(--t-normal) var(--kurva); }
.inloggning .connector-base { stroke-dasharray: 4 6; }
.inloggning .orbital-field[data-world-tand="base"] .connector-base,
.inloggning .orbital-field[data-world-tand="space"] .connector-space { stroke-opacity: .6; }
@keyframes world-omlopp { from { stroke-dashoffset: var(--world-start); } to { stroke-dashoffset: calc(var(--world-start) - var(--world-varv)); } }

/* ---------- Världarna ---------- */
/* Världarna står fast i radens överkant, så att märkena och deras frizon inte flyttar sig när
   kortet växer mellan inloggningens steg. */
.inloggning .world { --world-skala: .23; --world-steg: min(50px, (100cqi - 118px) / 2); position: relative; display: flex; flex-direction: column; align-items: flex-start; align-self: start; justify-self: center; width: 240px; max-width: 100%; min-width: 0; margin-top: var(--s-12); color: var(--text); text-align: left; animation: world-in var(--hjalte-ankomst-varld) var(--kurva) both; }
.inloggning .world-base { animation-delay: var(--hjalte-ankomst-bas); }
.inloggning .world-space { animation-delay: var(--hjalte-ankomst-space); }
.inloggning .world[data-world-framme] { animation: none; }
@keyframes world-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.inloggning .world-visual { position: relative; flex: none; width: 100%; height: 152px; margin-bottom: var(--s-6); container-type: inline-size; }
.inloggning .world-symbol { position: absolute; display: block; max-width: none; }
/* DriveBase: tre dokumentplattor i trappa längs husvinkeln (31,1°) mot symbolen. Plattorna lutar inte.
   Steget räknas ur bildens bredd (100cqi): trappan slutar 8 px före symbolens frizon, och 118 px är
   plattan 40, luften 8, frizonen 14 och symbolen 56. Högst 50 px; i en smal värld lägger sig
   plattorna på varandra som en bunt. */
.inloggning .world-base .world-symbol { top: 48px; right: 0; width: 56px; height: 56px; }
.inloggning .world-platta { position: absolute; display: grid; place-items: center; width: 40px; height: 30px; border: 1.5px solid var(--linje-pa-mork); border-radius: var(--r-s); background: var(--yta-mork); color: var(--text-dampad-pa-mork); }
.inloggning .world-platta .icon { width: 16px; height: 16px; }
.inloggning .world-platta--1 { left: 0; top: 31px; }
.inloggning .world-platta--2 { left: var(--world-steg); top: calc(31px + var(--world-steg) * .6032); }
.inloggning .world-platta--3 { left: calc(var(--world-steg) * 2); top: calc(31px + var(--world-steg) * 1.2065); }
/* DriveSpace: gruppbanan runt symbolen ligger utanför symbolens kvadratiska frizon (rutan plus en
   fjärdedel av diametern, 48 px från mitten): banans inre kant ligger 72,5 px ut och kvadratens hörn
   67,9 px. Mittpunkt (74, 76). Fyra prickar på banan vid ±31,1° från vågrätt, radie 73,25.
   Prickens kant i sidans färg bryter banan där pricken sitter. */
.inloggning .world-bana { position: absolute; left: 0; top: 2px; width: 148px; height: 148px; border: 1.5px solid var(--linje-pa-mork); border-radius: 50%; }
.inloggning .world-space .world-symbol { top: 44px; left: 42px; width: 64px; height: 64px; }
.inloggning .world-prick { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--linje-mellan); box-shadow: 0 0 0 3px var(--yta-mork); }
.inloggning .world-prick--1 { left: 132.72px; top: 109.84px; }
.inloggning .world-prick--2 { left: 7.28px; top: 109.84px; }
.inloggning .world-prick--3 { left: 7.28px; top: 34.16px; }
.inloggning .world-prick--4 { left: 132.72px; top: 34.16px; }

/* Ordmärkena i samma skala per viewBox-enhet. Frizonen är en versalhöjd, 98 enheter i skala. */
.inloggning .world-wordmark { display: block; flex: none; height: auto; max-width: none; }
.inloggning .world-base .world-wordmark { width: calc(597.24px * var(--world-skala)); }
.inloggning .world-space .world-wordmark { width: calc(682.78px * var(--world-skala)); }
.inloggning .world-status { margin-top: var(--s-6); }
.inloggning .world h2 { margin-top: var(--s-4); font-size: 25px; font-weight: var(--vikt-rubrik); line-height: 1.18; letter-spacing: var(--spacing-rubrik-liten); text-wrap: balance; }
.inloggning .world > p { margin-top: var(--s-3); color: var(--text-dampad); font-size: var(--fs-bas); line-height: 1.5; text-wrap: pretty; }
.inloggning .world .text-button { margin-top: var(--s-2); gap: var(--s-2); font-size: var(--fs-s); font-weight: var(--vikt-fet); }

/* ---------- Produktremsan under 961 px ---------- */
.inloggning .world-strip { display: none; }
.inloggning .world-remsa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
/* Plattan har täckande yta, så att ingen bana syns genom den eller i småsymbolens frizon. Hover
   läggs som en inre skugga ovanpå ytan, som kan tona. Symbol och namn på första raden,
   statuspillret under; en rad där plattan har hela bredden. */
.inloggning .world-remsa-lank { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "symbol namn" "status status"; align-items: center; gap: var(--s-2) var(--s-3); min-height: var(--klickyta); height: 100%; padding: var(--s-2) var(--s-3); border: 1.5px solid var(--linje-pa-mork); border-radius: var(--r-m); background-color: var(--yta-mork); box-shadow: inset 0 0 0 100vmax transparent; color: var(--text); transition: box-shadow var(--t-snabb) var(--kurva); }
.inloggning .world-remsa-lank:hover { box-shadow: inset 0 0 0 100vmax var(--hover-ljus); }
.inloggning .world-remsa-lank:focus-visible { outline: var(--fokus-bredd) solid var(--fokus); outline-offset: var(--fokus-avstand); }
.inloggning .world-remsa-symbol { grid-area: symbol; width: 24px; height: 24px; }
.inloggning .world-remsa-namn { grid-area: namn; font-size: var(--fs-bas); font-weight: var(--vikt-fet); line-height: 1.2; }
.inloggning .world-remsa-lank .inloggning-status { grid-area: status; justify-self: start; }

/* Under 1200 px är ytterkolumnen för smal för att DriveBase-världen ska stå mitt i den. Världen står då
   mot sidans kant och lämnar 32 px mot kortet utöver gridets mellanrum: symbolens frizon (14) och
   luften (16) plus 2. Kopplingslinjen syns då längs hela mellanrummet, minst 26 px. DriveSpace-världen
   speglar den, så att båda står lika långt från sidans kant och har samma luft mot kortet. */
@media (max-width: 1199px) {
  .inloggning .world { width: min(240px, 100% - 32px); }
  .inloggning .world-base { justify-self: start; }
  .inloggning .world-space { justify-self: end; }
}

@media (max-width: 960px) {
  .inloggning .world { display: none; }
  .inloggning .orbit-connector { visibility: hidden; }
  .inloggning .orbital-field { left: -40px; right: -40px; }
  .inloggning .world-strip { display: block; width: 100%; max-width: 470px; margin: 0 auto var(--s-2); }
}

@media (max-width: 760px) {
  .inloggning .orbital-field { left: calc(50% - 475px); right: auto; width: 950px; top: -90px; bottom: -60px; }
}

@media (max-width: 480px) {
  .inloggning .orbital-field { left: calc(50% - 400px); width: 800px; top: -60px; bottom: 0; }
  .inloggning .world-remsa { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 390px) and (max-width: 480px) {
  .inloggning .world-remsa-lank { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "symbol namn status"; }
}