/* Entrén på #/logga-in: kärnans stil, ur entrén i DriveSpace @ 26cbc0b (login.css).
   Varje regel står under rotelementet .inloggning, utom färgschemat, bakgrunden och scrollmarginalen, som står på
   html[data-vy="inloggning"] och släpper när routern byter vy. Typsnitten kommer från Google Fonts-länken i
   index.html, så ingen @font-face står här. Modulernas stil står i inloggning-intro.css, -varldar.css och -landning.css. */

/* ---------- Sidan bakom entrén ---------- */
/* Marinblå och mörk under hela entrén, också body, som bas.css annars ger plattformens ljusa bakgrund.
   Scrollmarginalen är sidhuvudets höjd plus 16 px: ankarhopp, scrollIntoView och tabbning lägger aldrig fokus
   under det fasta sidhuvudet (WCAG 2.4.11). */
html[data-vy="inloggning"], html[data-vy="inloggning"] body { background: var(--yta-mork); color-scheme: dark; }
html[data-vy="inloggning"] { scroll-padding-top: 88px; }
@media (max-width: 760px) { html[data-vy="inloggning"] { scroll-padding-top: 80px; } }

/* ---------- Entréns tokens ---------- */
/* Bara de lokala värdena (spec beslut 6). --pal-text är navy, och de åtta namn som tokens.css räknar ut ur --pal-text
   på :root skrivs om här, eftersom en ny --pal-text på roten inte når dem. Övriga namn läses ur tokens.css, också
   --font-text, --font-rubrik och --r-m, där entrén avvek provisoriskt och plattformens värden gäller.
   --spacing-rubrik-liten avviker från tokens.css -.02em, där glyferna nuddar i 800 vid 17 till 40 px, och
   hjältens eget lager (--hjalte-*) behåller omloppens, ankomstens och väntelägets tider. */
.inloggning {
  --pal-text: #151E3F;
  --text: var(--pal-text);
  --accent-text: var(--pal-text);
  --accent-2-text: var(--pal-text);
  --platta-korall-text: var(--pal-text);
  --platta-gron-text: var(--pal-text);
  --platta-bla-text: var(--pal-text);
  --platta-vit-text: var(--pal-text);
  --status-kontur: var(--pal-text);
  --spacing-rubrik-liten: .004em;
  --hjalte-omlopp-1: 32s;
  --hjalte-omlopp-2: 43s;
  --hjalte-ankomst-rubrik: .8s;
  --hjalte-ankomst-kort: .85s;
  --hjalte-ankomst-varld: 1.1s;
  --hjalte-ankomst-bas: .12s;
  --hjalte-ankomst-space: .25s;
  --hjalte-vanteomlopp: .64s;
  min-width: 320px;
  font-family: var(--font-text);
  font-synthesis: none;
  color: var(--text-pa-mork);
}

/* ---------- Återställningen mot bas.css ---------- */
/* bas.css gäller globalt och sätter radavstånd, tabellsiffror, rubrikstorlekar, listor och svg-visning som entrén
   inte räknade med. Blocket ger samma beräknade stil inuti roten som entrén utan bas.css. Rubrikernas typsnitt
   följer bas.css, och bas.css fokusringar står kvar. */
.inloggning { line-height: normal; font-variant-numeric: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.inloggning *::before, .inloggning *::after { box-sizing: content-box; }
.inloggning :where(h4, h5, h6, ul, ol, dl, dd, figure, blockquote) { margin: revert; }
.inloggning :where(ul[class], ol[class]) { list-style: revert; padding: revert; }
.inloggning :where(svg, video, canvas) { display: revert; max-width: revert; }
.inloggning :where(svg) { flex: revert; }
.inloggning :where(button, input, select, textarea) { font: revert; color: revert; letter-spacing: revert; }
.inloggning :where(h1, h2, h3, h4) { font-weight: revert; font-size: revert; line-height: revert; letter-spacing: revert; text-wrap: revert; }
.inloggning :where(p) { text-wrap: revert; }
.inloggning :where(b, strong, small) { font-weight: revert; font-size: revert; }
.inloggning :where(a) { text-decoration-thickness: revert; text-underline-offset: revert; }
.inloggning a:hover { text-decoration-thickness: revert; }
.inloggning ::selection { background: revert; color: revert; }

@media (prefers-reduced-motion: reduce) {
  .inloggning { --t-snabb: 0ms; --t-normal: 0ms; --t-lugn: 0ms; }
}

/* ---------- Grunden ---------- */
.inloggning, .inloggning * { box-sizing: border-box; }
.inloggning button, .inloggning input { font: inherit; }
.inloggning button { cursor: pointer; color: inherit; border: 0; }
/* Avstängt utan opacitet (spec 3.2): färgerna står vid knapparna nedan. En upptagen knapp behåller sina. */
.inloggning button:disabled, .inloggning button[aria-disabled=true]:not([aria-busy=true]) { cursor: default; }
.inloggning button[aria-busy=true] { position: relative; overflow: hidden; opacity: 1; cursor: progress; }
.inloggning button, .inloggning a, .inloggning input, .inloggning summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.inloggning button, .inloggning input, .inloggning summary { scroll-margin-block: 28px; }
.inloggning a { color: inherit; text-decoration: none; }
.inloggning img { display: block; max-width: 100%; }
.inloggning h1, .inloggning h2, .inloggning h3, .inloggning p { margin: 0; }
.inloggning h1, .inloggning h2, .inloggning h3 { letter-spacing: var(--spacing-rubrik); }
/* Fokusringen (spec 3.2): 3 px med 3 px avstånd. --fokus är vit på den mörka sidan och navy i kortet, dialogen
   och utforskaren, genom omfången i inloggning-komponenter.css. */
.inloggning button:focus-visible, .inloggning a:focus-visible, .inloggning summary:focus-visible { outline: var(--fokus-bredd) solid var(--fokus); outline-offset: var(--fokus-avstand); }
.inloggning [hidden] { display: none !important; }
.inloggning .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.inloggning .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.inloggning .icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; background: transparent; border-radius: var(--r-s); }
.inloggning .icon-button:hover { background: var(--hover-ljus); }
.inloggning .text-button { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 6px 0; background: none; font-size: var(--fs-s); font-weight: var(--vikt-mellan); }
.inloggning .text-button:hover { text-decoration: underline; text-underline-offset: 5px; }
.inloggning .text-button .icon { width: 17px; height: 17px; }

/* ---------- Sidhuvudet (spec 3.1) ---------- */
/* Fast högst upp, genomskinligt överst. När sidan rullats förbi 8 px sätter kärnan data-scrolled: bakgrunden byts
   direkt och den nedre kanten tonar in. Ingen oskärpa. */
.inloggning .site-header { position: sticky; top: 0; z-index: var(--z-sticky); height: 72px; border-bottom: 1px solid transparent; transition: border-color var(--t-normal) var(--kurva); }
.inloggning .site-header[data-scrolled="true"] { background: var(--yta-mork); border-bottom-color: var(--linje-pa-mork); }
.inloggning .header-inner { max-width: 1560px; height: 100%; margin: auto; padding: 0 5%; display: flex; align-items: center; gap: var(--s-4); }
.inloggning .brand { display: flex; align-items: center; min-height: var(--klickyta); flex: none; }
.inloggning .brand img { width: 188px; height: auto; }
.inloggning .site-header .inloggning-chip { flex: none; }
.inloggning .header-nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.inloggning .header-nav a, .inloggning .header-help { display: inline-flex; align-items: center; min-height: var(--klickyta); padding: 0 var(--s-3); border-radius: var(--r-s); color: var(--text-dampad); font-size: var(--fs-s); font-weight: var(--vikt-mellan); }
.inloggning .header-nav a:hover, .inloggning .header-help:hover { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.inloggning .header-help { gap: var(--s-2); background: none; flex: none; }
.inloggning .header-help .icon { width: 18px; height: 18px; }
/* Logga in, kompakt: syns bara när kortet är helt ur bild (kortvakten i inloggning.js) och tonar in där rörelse är tillåten. */
.inloggning .site-login { display: inline-flex; align-items: center; justify-content: center; min-width: var(--klickyta); min-height: var(--klickyta); padding: 0 var(--s-4); border-radius: var(--r-m); background: var(--pal-vit); color: var(--pal-navy); font-size: var(--fs-s); font-weight: var(--vikt-fet); white-space: nowrap; flex: none; }
.inloggning .site-login:not([hidden]) { animation: site-login-in var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .inloggning .site-login:hover { background: var(--yta-mjuk); }
}
.inloggning .site-header :is(a, button):focus-visible { outline: var(--fokus-bredd) solid var(--fokus); outline-offset: var(--fokus-avstand); }
/* Fokus i sidhuvudet ska inte rulla sidan. Med scroll-padding-top räknas sidhuvudets egna kontroller som dolda,
   och utan marginalen rullade webbläsaren upp sidan omkring 458 px för varje tabbstopp i sidhuvudet. Marginalen
   flyttar kontrollens rullruta lika långt ned som scroll-padding-top, så att den alltid ligger i synfältet, oavsett
   hur hög kontrollen är (prövat också med 48 px). */
.inloggning .site-header :is(a, button) { scroll-margin-block: -88px 88px; }

/* ---------- Hjälten ---------- */
.inloggning .hero { position: relative; max-width: 1440px; margin: auto; padding: 4px 48px 0; isolation: isolate; overflow: clip; }
.inloggning .hero-heading { text-align: center; position: relative; z-index: 1; animation: headline-in var(--hjalte-ankomst-rubrik) var(--kurva) both; }
/* Rethink Sans 800, uppmätt i Chromium: vid -.006em har paren gg .016 em, rm .035 em och vä .033 em luft.
   Den tidigare -.045em låter glyferna nudda i 800 (R5). */
.inloggning .hero-heading h1 { font-size: clamp(40px, 4.2vw, 56px); font-weight: var(--vikt-rubrik); line-height: 1.04; letter-spacing: -.006em; }
.inloggning .hero-heading p { color: var(--text-dampad); font-size: var(--fs-bas); line-height: var(--radavstand); margin: 14px auto 0; max-width: 480px; text-wrap: balance; }
.inloggning .hero-stage { position: relative; margin-top: 26px; padding-bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 480px) minmax(0, 1fr); align-items: center; gap: 44px; isolation: isolate; }

/* ---------- Kortet (spec 3.2) ---------- */
/* Skuggan ritas i navy med alfa, eftersom kortet ligger ovanpå (M8). Fokusringen kommer från grundregeln, där
   omfånget .pa-ljus gör --fokus navy. */
.inloggning .auth-card { color-scheme: light; background: var(--yta); color: var(--text); border-radius: var(--r-l); padding: 26px 38px 22px; box-shadow: 0 30px 90px var(--pal-navy-a55); min-width: 0; position: relative; z-index: 2; animation: card-in var(--hjalte-ankomst-kort) var(--kurva) both; }
.inloggning .auth-card { scroll-margin-top: 24px; }
.inloggning .auth-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: var(--fs-s); color: var(--text-dampad); }
.inloggning .auth-card-top > span { display: inline-flex; align-items: center; gap: 8px; }
.inloggning .auth-card-top .icon { width: 16px; height: 16px; }
/* Stegraden: plattor 24 × 24 och en linje på 2 px bakom dem. Fyllnaden skalas från vänster till aktivt steg
   (data-steg 0 eller 1, Kod blir aldrig aktiv) på --t-lugn. Stegen har vit botten, så linjen syns bara mellan dem,
   och fyllnaden slutar bakom nästa platta. Kärnan byter steg i samma rad, så att övergången hinner synas. */
.inloggning .step-track { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; padding: 0; margin: 0; list-style: none; }
.inloggning .step-track::before { content: ''; position: absolute; inset-inline: 0; top: calc(50% - 1px); height: 2px; background: var(--linje); }
.inloggning .step-fill { position: absolute; inset-inline: 0; top: calc(50% - 1px); height: 2px; background: var(--primar); transform-origin: left center; transform: scaleX(0); transition: transform var(--t-lugn) var(--kurva); }
.inloggning .step-track[data-steg="1"] .step-fill { transform: scaleX(.5); }
.inloggning .step-track[data-steg="2"] .step-fill { transform: scaleX(1); }
.inloggning .step-track li { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-2); background: var(--yta); font-size: var(--fs-s); white-space: nowrap; }
.inloggning .step-track li:not(:first-child) { padding-left: var(--s-2); }
.inloggning .step-track li:not(:last-child) { padding-right: var(--s-2); }
.inloggning .step-track b { width: 24px; height: 24px; border: 1.5px solid var(--linje-falt); border-radius: var(--r-s); display: grid; place-items: center; background: var(--yta); font-size: var(--fs-s); font-weight: var(--vikt-fet); line-height: 1; }
.inloggning .step-track li[aria-current] { color: var(--text); font-weight: var(--vikt-fet); }
.inloggning .step-track li[aria-current] b { background: var(--primar); color: var(--primar-text); border-color: var(--primar); }
.inloggning .step-track li.done b { background: var(--yta-mjuk-2); border-color: var(--yta-mjuk-2); color: var(--text); }
.inloggning .step-track .icon { width: 14px; height: 14px; }
/* Märkningen Kommande (spec beslut 10): Kod i stegraden och Microsoftknappen. Dämpad, och steget blir aldrig aktivt.
   I stegraden står märkningen under Kod, högerställd, eftersom raden inte rymmer den bredvid på 390 px. Den tar
   ingen egen luft: under Kod ligger högerkanten av kortets rubrik, och båda stegens rubriker är korta, så märkningen
   överlappar ingen text (p7 prövar det på 390 och 1440). */
.inloggning .inloggning-kommande { display: inline-flex; align-items: center; padding: 1px 6px; border: 1px solid var(--linje); border-radius: var(--r-s); color: var(--text-dampad); font-size: var(--fs-s); font-weight: var(--vikt-mellan); line-height: 1.3; white-space: nowrap; }
.inloggning .step-track li[data-kommande] { color: var(--text-dampad); }
.inloggning .step-track li[data-kommande] .inloggning-kommande { position: absolute; top: calc(100% + 4px); right: 0; padding: 0 var(--s-1); font-size: var(--fs-2xs); font-weight: var(--vikt-normal); }
.inloggning .branch-label { color: var(--text); font-weight: var(--vikt-fet); }
.inloggning .auth-body { min-height: 360px; }
.inloggning .auth-view { animation: form-enter var(--t-normal) var(--kurva) both; }
.inloggning .auth-view[data-direction=back] { animation-name: form-back; }
/* I 800 nuddar glyferna varandra med -.04em (R5), så kortets och dialogens rubriker spärras med --spacing-rubrik-liten. */
.inloggning .auth-view h2 { font-size: 33px; font-weight: var(--vikt-rubrik); line-height: 1.13; letter-spacing: var(--spacing-rubrik-liten); }
.inloggning .auth-view h2:focus { outline: none; }
.inloggning .auth-intro { font-size: var(--fs-bas); color: var(--text-dampad); line-height: var(--radavstand); margin-top: 10px; margin-bottom: 20px; }
.inloggning .form-label { display: block; font-size: var(--fs-s); font-weight: var(--vikt-fet); margin-bottom: 8px; }
.inloggning .input-shell { position: relative; }
.inloggning .input-shell > .icon { position: absolute; left: 15px; top: 18px; width: 18px; height: 18px; color: var(--text-dampad); pointer-events: none; }
.inloggning .text-input { display: block; height: 55px; width: 100%; background: var(--yta); color: var(--text); border: 1px solid var(--linje-falt); border-radius: var(--r-m); font-size: var(--fs-bas); padding: 0 14px; transition: border-color var(--t-snabb) var(--kurva); }
.inloggning .text-input.has-icon { padding-left: 44px; }
.inloggning .text-input::placeholder { color: var(--text-dampad); opacity: 1; }
/* Fältets fokus (spec 3.2): ringen 3 px med 3 px avstånd och kanten i --primar. */
.inloggning .text-input:focus-visible { outline: var(--fokus-bredd) solid var(--fokus); outline-offset: var(--fokus-avstand); border-color: var(--primar); }
/* Felet (M6), K3:s mönster: mörk kant som bär 3:1, en korallring på 3 px och fokus utflyttad till 5 px. Inget rött. */
.inloggning .text-input[aria-invalid=true] { border-color: var(--status-kontur); box-shadow: 0 0 0 3px var(--fel); }
.inloggning .text-input[aria-invalid=true]:focus-visible { outline-offset: 5px; }
.inloggning .password-input { padding-right: 89px; }
.inloggning .password-toggle { position: absolute; right: 5px; top: 5px; min-width: 76px; height: 44px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--yta-mjuk); border-radius: var(--r-xs); font-size: var(--fs-s); font-weight: var(--vikt-fet); }
.inloggning .password-toggle .icon { width: 18px; height: 18px; }
/* Feltexten i navy med korallrutan 11 × 11 före, som K3 (komponenter.css 500-518). Rutans radie är K3:s 3 px. */
.inloggning .field-error { display: flex; align-items: start; gap: var(--s-2); font-size: var(--fs-s); font-weight: var(--vikt-mellan); line-height: 1.4; margin-top: 10px; color: var(--text); }
.inloggning .field-error::before { content: ''; flex: none; width: 11px; height: 11px; margin-top: .3em; border: 1.5px solid var(--status-kontur); border-radius: calc(var(--r-xs) / 2); background: var(--fel); }
.inloggning .field-hint { font-size: var(--fs-s); line-height: 1.45; color: var(--text-dampad); margin-top: 10px; }
.inloggning .caps-hint { font-size: var(--fs-s); margin-top: 8px; font-weight: var(--vikt-fet); }
.inloggning .primary, .inloggning .secondary { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-m); font-size: var(--fs-m); font-weight: var(--vikt-fet); padding: 12px 18px; width: 100%; position: relative; overflow: hidden; transition: background-color var(--t-snabb) var(--kurva), transform var(--t-snabb) var(--kurva); }
.inloggning .primary { color: var(--primar-text); background-color: var(--primar); border: 1px solid transparent; }
.inloggning .primary > .icon { width: 18px; height: 18px; transition: transform var(--t-normal) var(--kurva); }
/* Hover och tryck lägger --hover-ljus över primärknappen, som K3. */
@media (hover: hover) {
  .inloggning .primary:hover:not([aria-disabled=true]) { background-image: linear-gradient(var(--hover-ljus), var(--hover-ljus)); }
  .inloggning .primary:hover:not([aria-disabled=true]) > .icon { transform: translateX(3px); }
  .inloggning .secondary:hover:not([aria-disabled=true]) { background-color: var(--yta-mjuk); }
}
.inloggning .primary:is(:active, .is-pressed):not([aria-disabled=true]), .inloggning .secondary:is(:active, .is-pressed):not([aria-disabled=true]) { transform: translateY(1px); }
.inloggning .primary:is(:active, .is-pressed):not([aria-disabled=true]) { background-image: linear-gradient(var(--hover-ljus), var(--hover-ljus)), linear-gradient(var(--hover-ljus), var(--hover-ljus)); }
.inloggning .secondary:is(:active, .is-pressed):not([aria-disabled=true]), .inloggning .password-toggle:is(:active, .is-pressed) { background-color: var(--yta-mjuk-2); }
.inloggning .secondary { color: var(--primar); background-color: var(--yta); border: 1px solid var(--linje-falt); }
/* Avstängt (spec 3.2): palettens färger utan opacitet. Länkknappar byter bara textfärg. aria-busy behåller sina färger. */
.inloggning :is(.primary, .secondary):is(:disabled, [aria-disabled=true]):not([aria-busy=true]) { background: var(--avstangd-bg); color: var(--avstangd-text); border-color: var(--avstangd-kant); }
.inloggning .text-button:is(:disabled, [aria-disabled=true]):not([aria-busy=true]) { color: var(--avstangd-text-pa-mork); text-decoration: none; }
.inloggning :is(.pa-ljus, .inloggning-kort, dialog) .text-button:is(:disabled, [aria-disabled=true]):not([aria-busy=true]) { color: var(--avstangd-text); }
.inloggning .login-form .primary { margin-top: 16px; justify-content: space-between; }
/* Väntelinjen i en upptagen knapp går 800 ms per varv, som i v2. K3 har ingen tid för en loop. */
.inloggning .loading-line { position: absolute; height: 2px; width: 36%; background: var(--yta-mjuk-2); left: 0; bottom: 0; animation: loading-line calc(var(--t-lugn) * 2.5) var(--kurva) infinite; }
.inloggning .divider { display: flex; gap: 13px; align-items: center; font-size: var(--fs-s); color: var(--text-dampad); margin: 14px 0; }
.inloggning .divider::before, .inloggning .divider::after { content: ''; height: 1px; flex: 1; background: var(--linje); }
.inloggning .ms-mark { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; flex: none; }
.inloggning .ms-mark i { width: 7px; height: 7px; background: currentColor; }
/* Microsoftknappen: texten är ett eget element på en rad. Märkningen Kommande står efter texten, och under 481 px på
   knappens överkant (se den smala brytpunkten), eftersom ikonen, texten och märkningen inte ryms på en rad där. */
.inloggning .inloggning-microsoft__text { white-space: nowrap; }
.inloggning .invitation { font-size: var(--fs-s); border-top: 1px solid var(--linje); margin-top: 14px; padding-top: 4px; }
.inloggning .invitation summary { min-height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; }
.inloggning .invitation summary::-webkit-details-marker { display: none; }
.inloggning .invitation summary .icon { width: 16px; height: 16px; transition: transform var(--t-normal) var(--kurva); }
.inloggning .invitation[open] summary .icon { transform: rotate(45deg); }
.inloggning .invitation p { color: var(--text-dampad); font-size: var(--fs-s); line-height: 1.6; padding-bottom: 10px; }
/* Demoraden under kortets kropp, bara i demoläget (spec beslut 13): raden och knapparna för Leo och Anna. Texten och
   knappgruppen är två flexposter. Där gruppen och minst 10rem text ryms står texten på två rader bredvid knapparna,
   annars står knapparna på en egen rad under texten. Gruppen bryts aldrig, så Leo och Anna står alltid tillsammans. */
.inloggning .inloggning-demorad { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); color: var(--text-dampad); font-size: var(--fs-s); line-height: 1.4; text-wrap: balance; margin-top: 12px; }
.inloggning .inloggning-demorad__text { flex: 1 1 10rem; }
.inloggning .inloggning-demorad__knappar { display: flex; flex: none; gap: 7px; }
.inloggning .inloggning-demorad .text-button { color: var(--text); font-weight: var(--vikt-fet); text-decoration: underline; text-underline-offset: 4px; }
/* "Bara för Drive-teamet" (spec 3.2), som K3:s inloggning: linje 2 px ovanför. */
.inloggning .auth-only { display: flex; align-items: flex-start; gap: var(--s-3); margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--linje); color: var(--text-dampad); font-size: var(--fs-m); line-height: 1.45; }
.inloggning .auth-only .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--text); }
.inloggning .email-chip { display: flex; align-items: center; gap: 9px; background: var(--yta-mjuk); padding: 12px 13px; border-radius: var(--r-m); margin-bottom: 20px; min-width: 0; }
.inloggning .email-chip > .icon { width: 15px; height: 15px; flex: none; }
.inloggning .email-chip > span { font-size: var(--fs-s); overflow-wrap: anywhere; flex: 1; }
.inloggning .method-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; margin-top: 9px; }
.inloggning .method-actions .text-button { justify-content: start; }
.inloggning .back-action { margin-top: 10px; color: var(--text-dampad); }
.inloggning .mail-preview { margin: 22px 0; background: var(--yta-mjuk); border: 1px solid var(--linje); border-radius: var(--r-m); padding: 21px; }
.inloggning .mail-preview > .icon { width: 25px; height: 25px; }
.inloggning .mail-preview h3 { font-size: 17px; line-height: 1.3; letter-spacing: var(--spacing-rubrik-liten); margin-top: 14px; }
.inloggning .mail-preview p { font-size: var(--fs-s); color: var(--text-dampad); line-height: 1.6; margin-top: 8px; overflow-wrap: anywhere; }
.inloggning .mail-address { font-size: var(--fs-s); font-weight: var(--vikt-fet); margin-top: 9px; overflow-wrap: anywhere; }
.inloggning .sent-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 9px; margin-top: 8px; }

/* ---------- Scenfoten (spec 3.2) ---------- */
/* Länken till introt och rörelseknappen. Raden #motion-hint syns bara vid minskad rörelse. */
.inloggning .stage-footer { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 8px 0 38px; gap: var(--s-3) var(--s-7); }
.inloggning .stage-footer a { color: var(--text-dampad); font-size: var(--fs-s); display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--klickyta); }
.inloggning .stage-footer a .icon { width: 16px; height: 16px; }
.inloggning .motion-control { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--klickyta); padding: 0 var(--s-4) 0 var(--s-3); border: 1.5px solid var(--linje-pa-mork); border-radius: var(--r-rund); background: transparent; color: var(--text-dampad); font-size: var(--fs-s); font-weight: var(--vikt-mellan); }
.inloggning .motion-control .icon { width: 16px; height: 16px; }
.inloggning .motion-control[aria-pressed="true"] { background: var(--hover-ljus); color: var(--text); }
@media (hover: hover) {
  .inloggning .motion-control:not([aria-disabled="true"]):hover { border-color: var(--linje-mellan); }
}
.inloggning .motion-hint { color: var(--text-dampad); font-size: var(--fs-s); }
.inloggning .stage-footer :is(a, button):focus-visible { outline: var(--fokus-bredd) solid var(--fokus); outline-offset: var(--fokus-avstand); }

/* ---------- Rörelsekontraktet ---------- */
/* data-motion och data-ambient står på roten (kärnans updateMotion): engångsrörelse, tider under paus och inträde
   vid skroll. */
.inloggning[data-ambient="paused"] .ambient { animation-play-state: paused !important; }
.inloggning[data-motion="paused"] :is(.auth-view, .loading-line) { animation: none; }
.inloggning[data-motion="paused"] :is(.primary, .secondary, .primary > .icon) { transition: none; transform: none; }
.inloggning[data-motion="paused"] [data-motion-item] { animation: none !important; transition: none !important; }
.inloggning[data-motion="paused"] { --t-snabb: 0ms; --t-normal: 0ms; --t-lugn: 0ms; }
.inloggning [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--t-lugn) var(--kurva), transform var(--t-lugn) var(--kurva); }
.inloggning [data-reveal].is-revealed, .inloggning[data-motion="paused"] [data-reveal] { opacity: 1; transform: none; }

/* ---------- Dialogen (spec 3.7) ---------- */
/* En ljus ö med --skym bakom och skugga i navy med alfa. Ingången går på --t-normal och bär data-motion-item
   (openDialog i inloggning.js), så att den står still vid paus och minskad rörelse. */
.inloggning dialog { color-scheme: light; color: var(--text); background: var(--yta); border: 0; border-radius: var(--r-l); padding: 35px; max-width: 470px; width: calc(100% - 36px); max-height: calc(100dvh - 48px); box-shadow: 0 20px 90px var(--pal-navy-a55); }
.inloggning dialog::backdrop { background: var(--skym); }
.inloggning dialog[open] { animation: card-in var(--t-normal) var(--kurva); }
.inloggning dialog h2 { font-size: 29px; font-weight: var(--vikt-rubrik); line-height: 1.2; letter-spacing: var(--spacing-rubrik-liten); padding-right: 20px; }
.inloggning dialog p { font-size: var(--fs-bas); color: var(--text-dampad); line-height: 1.65; margin-top: 16px; }
.inloggning dialog .icon-button { position: absolute; right: 12px; top: 12px; }
.inloggning dialog .secondary { margin-top: 26px; }
.inloggning dialog .icon-button:hover { background: var(--yta-mjuk); }

@keyframes headline-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes form-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes form-back { from { opacity: 0; } to { opacity: 1; } }
@keyframes loading-line { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
@keyframes site-login-in { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 1600px) {
  .inloggning .hero { padding-top: 30px; }
  .inloggning .hero-stage { margin-top: 38px; gap: 64px; }
  .inloggning .auth-card { padding: 32px 42px 26px; }
}

@media (max-width: 1150px) {
  .inloggning .hero { padding-inline: 36px; }
  .inloggning .hero-stage { grid-template-columns: minmax(0, 1fr) 440px minmax(0, 1fr); gap: 26px; }
  .inloggning .auth-card { padding-inline: 32px; }
}

@media (max-width: 960px) {
  .inloggning .header-inner { padding-inline: 32px; }
  .inloggning .brand img { width: 160px; }
  /* Under 961 px ryms inte märket, chipet, ankarlänkarna, Hjälp och Logga in på en rad.
     Chipet viker när Logga in visas, så att sidhuvudet aldrig flödar över. */
  .inloggning .site-header:has(.site-login:not([hidden])) .inloggning-chip { display: none; }
  .inloggning .hero { padding-inline: 28px; }
  .inloggning .hero-heading h1 { font-size: 48px; }
  .inloggning .hero-stage { grid-template-columns: minmax(0, 470px); justify-content: center; gap: 0; }
  .inloggning .auth-card { padding-inline: 35px; }
}

@media (max-width: 760px) {
  .inloggning .site-header { height: 64px; }
  .inloggning .site-header :is(a, button) { scroll-margin-block: -80px 80px; }
  .inloggning .header-nav { display: none; }
  .inloggning .header-help { margin-left: auto; }
  .inloggning .hero-stage { grid-template-columns: minmax(0, 470px); justify-content: center; gap: 0; }
}

@media (max-width: 480px) {
  .inloggning .header-inner { padding-inline: 20px; gap: var(--s-3); }
  /* Märket tar det som blir över när Hjälp och Logga in ryms: 120 px vid 320 och 151 px från 351 px. */
  .inloggning .brand img { width: clamp(120px, 100vw - 200px, 151px); }
  .inloggning .site-header .inloggning-chip { display: none; }
  .inloggning .header-help { width: var(--klickyta); padding: 0; justify-content: center; }
  .inloggning .header-help span { display: none; }
  .inloggning .site-login { padding-inline: var(--s-3); }
  .inloggning .hero { padding: 12px 20px 0; }
  .inloggning .hero-heading h1 { font-size: 41px; line-height: 1.04; }
  .inloggning .hero-heading p { max-width: 340px; }
  .inloggning .hero-stage { margin-top: 26px; padding-bottom: 14px; }
  .inloggning .auth-card { padding: 24px 22px 20px; }
  .inloggning .auth-card-top { margin-bottom: 18px; }
  .inloggning .auth-view h2 { font-size: 30px; }
  .inloggning .auth-intro { margin-bottom: 20px; }
  .inloggning .auth-body { min-height: 352px; }
  .inloggning .text-input { height: 54px; }
  .inloggning .primary, .inloggning .secondary { min-height: 52px; padding-inline: 15px; }
  /* Märkningen Kommande sitter på Microsoftknappens överkant, högerställd, så att texten får hela raden. Knappen visar
     aldrig väntelinjen (spec beslut 10), så den behöver ingen klippning. */
  .inloggning .secondary[data-action="microsoft"] { overflow: visible; }
  .inloggning .secondary[data-action="microsoft"] .inloggning-kommande { position: absolute; top: 0; right: var(--s-4); transform: translateY(-50%); padding: 0 var(--s-1); background: var(--yta); font-size: var(--fs-2xs); font-weight: var(--vikt-normal); }
  .inloggning .divider { margin: 16px 0; }
  .inloggning .invitation { margin-top: 16px; }
  .inloggning .stage-footer { flex-direction: column; gap: var(--s-2); padding: 4px 0 26px; }
  .inloggning .email-chip { margin-bottom: 18px; gap: 7px; }
  .inloggning .method-actions { gap: 0 8px; }
  .inloggning .mail-preview { padding: 18px; }
  .inloggning .step-track, .inloggning .step-track li { gap: var(--s-1); }
  .inloggning .step-track li:not(:first-child) { padding-left: var(--s-1); }
  .inloggning .step-track li:not(:last-child) { padding-right: var(--s-1); }
  .inloggning dialog { padding: 32px 25px; }
  .inloggning dialog h2 { font-size: 26px; }
}

/* Vid 320 px ryms plattorna och etiketterna i 14 px bara utan luft runt stegen. Under 361 px når rubriken in under
   Kod, så där får stegraden luft under sig för märkningen Kommande. */
@media (max-width: 360px) {
  .inloggning .step-track li:not(:first-child), .inloggning .step-track li:not(:last-child) { padding-inline: 0; }
  .inloggning .step-track { margin-bottom: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .inloggning *, .inloggning *::before, .inloggning *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  /* Omloppen fryses där de står, i stället för att tidslinjen pressas ihop. */
  .inloggning .ambient { animation-duration: var(--ambient-duration) !important; animation-iteration-count: infinite !important; animation-play-state: paused !important; }
  .inloggning .primary:active, .inloggning .secondary:active, .inloggning .primary.is-pressed, .inloggning .secondary.is-pressed { transform: none !important; }
}