/* ==== styles/tokens.css ==== */
/* tokens.css: portalens fargbibliotek och typskala.
   De forsta blocken ar en kopia av prototyp/styles/tokens.css, varde for
   varde: portalen ska se ut som samma hus, och grinden P3b faller om ett
   delat token glider isar fran panelens. Portalens egna tokens star i det
   sista blocket. Den enda filen i portal/ med hexkoder. */

:root {
  /* Arbetsro: separata ytor for navigation, arbete och semantisk status.
     Panelens nav-tokens speglas har for P3b. Portalen har ingen sidomeny och
     laser dem inte an. */
  --canvas: #F7F3EC;
  --accent: #A34730;
  --sage-wash: #E8F0E8;
  --blue-wash: #E8EFF5;
  --nav-bg: #EEEAE2;
  --nav-text: #302820;
  --nav-muted: #746C60;
  --nav-line: #DAD4C9;
  --nav-active: #FFFCF7;
  --nav-hover: #F7F3EC;
  --nav-badge: #E3DCD0;
  --nav-brand-bg: #EEEAE2;
  --nav-expanded: 240px;
  --nav-collapsed: 76px;

  /* De atta tokens */
  --ink: #302820;
  --paper: #FFFFFF;
  --surface: #F3EFE8;
  --coral: #E2714E;
  --coral-wash: #FBEDE8;
  --umber: #31201B;
  --muted: #686157;
  --rule: #E2DCD2;

  /* Tva semantiska farger: bara som prick eller text, aldrig som yta */
  --gron: #3F6B4F;
  --rod: #A8402F;

  /* Knapptillstand ur artboard 12. Den avstangda ytan foljer prickskalans
     tredje steg: artboardens #A9A9A9 var panelens enda kalla gra och stack ut
     som en platta i den varma paletten. Prickskalan star langre ner i filen;
     egenskaper loses vid anvandning, sa ordningen spelar ingen roll. */
  --ink-hover: #3A3A3A;
  --avstangd: var(--prick-3);

  /* Prickarna i tillstandspillret. De morknar genom pipelinen; sex ar ink
     eftersom det da ar manniskans tur, sju ar muted. */
  --prick-1: #D9D6CF;
  --prick-2: #BDB9B0;
  --prick-3: #A8A49B;
  --prick-4: #8F8B83;
  --prick-5: #6E6A63;
  --prick-6: var(--ink);
  --prick-7: var(--muted);

  /* Overlaget bakom modalen. Ingen skugga finns i sprakat, men en modal
     behover skilja sig fran sidan under. */
  --overlay: rgba(26, 26, 26, 0.28);

  /* Tva familjer */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radier */
  --radie-kort: 10px;
  --radie-yta: 8px;
  --radie-pill: 6px;

  /* Avstand */
  --steg-1: 4px;
  --steg-2: 8px;
  --steg-3: 12px;
  --steg-4: 16px;
  --steg-5: 20px;
  --steg-6: 24px;
  --steg-7: 28px;

  /* Halvskalan: de matt som redan star som raa pixlar i komponenterna, sa
     att hantverkssvepet kan byta dem mot tokens utan att en pixel flyttar. */
  --steg-h1: 2px;
  --steg-h2: 6px;
  --steg-h3: 10px;
  --steg-h4: 14px;
  --steg-h5: 18px;

  /* Minsta tapyta pa 390, och den enda overgangen: kort nog att inte
     hinna uppfattas som en rorelse, lang nog att ta udden av ett byte. */
  --tapyta: 44px;
  --overgang: var(--rorelse-snabb) ease;

  /* Rorelsen: panelens tre tider in, en ut och tva kurvor, speglade har for
     P3b. Portalen laser dem inte an; introt gar pa --ease-ut i sista blocket. */
  --rorelse-snabb: 120ms;
  --rorelse-mjuk: 260ms;
  --rorelse-lugn: 480ms;
  --rorelse-ut: 180ms;
  --kurva-ut: cubic-bezier(0.22, 1, 0.36, 1);
  --kurva-in: cubic-bezier(0.55, 0, 1, 0.45);

  /* Skalets matt */
  --sidomeny: 240px;
  --sidmarginal: 48px;
  --radhojd: 44px;

  /* WhatsApp-forhandsvisningen har ett eget namnrum. Ingenting har kommer
     fran Meta: tapeten ar ett SVG-monster och bubblorna ar var egen palett.
     Vardena ar utgangslaget for task 3, som ager wa.css. */
  --wa-tapet: #EDE7DF;
  --wa-tapet-monster: #E3DCD2;
  --wa-in: #FFFFFF;
  --wa-ut: #F1EFE9;
  --wa-text: #1A1A1A;
  --wa-meta: #7C776E;
  --wa-rule: #DCD6CC;
  --wa-knapp: #1A1A1A;
  --wa-bredd: 380px;
}

/* ---- Portalen. Panelens tokens ovanfor star oforandrade. ----------------
   Kommentaren om --wa-* ovanfor ar panelens: dar ags de av wa.css och en
   task 3. I portalen finns ingen wa.css; samma tokens lases av telefon.css
   och telefon.js, som ritar telefonramen. */

:root {
  /* Bandet: umber som halo over ink, ordagrant artboard 12:s "dark band".
     Ett per sida, hogst. Texten pa bandet ar paper. Halons plats star i
     --band-x och --band-y: start.js flyttar dem mot pekaren pa roten, dar
     --band laser dem, och start.css later dem glida. 15 % 0 % ar artboardens.
     --band-muted ar reserverad for en sekundarrad pa bandet (muted mot ink
     ger bara 1,9:1) och anvands inte an. */
  --band-x: 15%;
  --band-y: 0%;
  --band: radial-gradient(ellipse at var(--band-x) var(--band-y), #31201B 0%, #1A1A1A 65%);
  --band-text: var(--paper);
  --band-muted: #B7B0AA;

  /* Portalens typskala: storre an panelens, samma tva familjer. */
  --t-hero: clamp(38px, 5.2vw, 64px);
  --t-vision: clamp(26px, 3vw, 40px);
  --t-sektion: 32px;
  --t-ingress: 18px;
  --t-brod: 16px;
  --t-liten: 13px;

  /* Kolumnen: en, vansterstalld, med luft som ravara. */
  --kolumn: 1120px;
  --textmatt: 620px;
  --kant: clamp(20px, 7vw, 112px);

  /* Introt: ease-out cubic, presentationsvideons standard. */
  --ease-ut: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Loginens egna toner. Delade tokens ovanfor andras inte. */
  --login-bg: #1A1A1A;
  --login-surface: #242221;
  --login-text: #FFFFFF;
  --login-muted: #B7B0AA;
  --login-soft: #D2C4B9;
  --login-rule: #81766E;
  --login-divider: #393431;
  --login-error: #F49C87;
  --login-success: #9DC5A7;
}

/* ==== styles/bas.css ==== */
/* bas.css: reset, fonter, typografi, fokusring, reduced motion.
   Byggd pa prototyp/styles/bas.css med tva skillnader: fonterna ligger
   lokalt (portalen gor inga anrop utanfor sig sjalv) och brodtexten ar
   16 px eftersom det har ar en sida som lases, inte ett verktyg som skannas. */

/* Fonterna: variabla woff2 for latin, hamtade fran Google Fonts och lagda
   har sa att ett besok inte lamnar nagot spar hos en tredje part. Inter bar
   vikterna 400 till 600, Newsreader 600 med optisk storlek 6 till 72. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-brod);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  max-width: 100%;
}

/* hidden-attributet vinner over varje display-regel i klasserna, annars
   slar .knapp { display: inline-flex } ut det och en dold knapp syns. */
[hidden] {
  display: none !important;
}

/* Lankar ar ink aven vid hover: coral finns bara i markets punkt, tva
   ganger per sida, och aldrig pa nagot som gar att klicka pa. */
a {
  color: var(--ink);
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button[disabled] {
  cursor: default;
}

/* Rubrikerna: Newsreader 600 med optisk storlek fran fonten sjalv. */
.serif {
  font-family: var(--serif);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}

/* Fokusringen: 2 px ink, 2 px offset, pa allt som gar att na med tangentbord. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Webblasare utan :focus-visible far samma ring pa :focus. */
:focus:not(:focus-visible) {
  outline: none;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* Bara for skarmlasare. */
.dold {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hoppa till innehallet: forsta elementet pa sidan, dolt tills det far
   fokus. Da star det som en inkknapp i ovre vanstra hornet. */
.hoppa:focus,
.hoppa:focus-visible {
  position: fixed;
  top: var(--steg-3);
  left: var(--steg-3);
  z-index: 40;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--steg-2) 14px;
  overflow: visible;
  clip: auto;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radie-yta);
  font-size: 13px;
  font-weight: 500;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== styles/portal.css ==== */
/* portal.css: det bada sidorna delar: kolumnen, sidhuvudet, sidfoten,
   knapparna, falten och market. Sidornas egna regler ligger i start.css,
   bank.css och login.css. Inga hexkoder, ingen skugga, ingen coral pa en
   knapp: coral finns bara i markets punkt. */

/* --- Kolumnen ------------------------------------------------------------ */
/* En vansterstalld kolumn med luft som ravara: 1120 px som tak, kanten
   vaxer med fonstret upp till 112 px. */

.kolumn {
  width: min(100% - 2 * var(--kant), var(--kolumn));
  margin-inline: auto;
}

/* --- Market -------------------------------------------------------------- */
/* Logotypen ur prototyp/assets: fyra staplar som faller och en liggande
   punkt i coral. Staplarna ar en inline-SVG i currentColor, sa att raden
   far sin farg av ytan den star pa. Ordmarket ar det ritade Ghostwriter,
   beskuret till assets/ghostwriter-wordmark-ink.png och lagt som bakgrund;
   den morka inloggningen och startsidans fot byter till -paper. Bada byggs
   av assets/bygg_ordmarke.py ur logotypfilen. En mask over currentColor
   hade gett en fil, men Chrome hamtar mask-image med CORS och nekar den
   over file://, som portalen oppnas. Hela raden skalas med --marke-h:
   staplarnas hojd, ordmarkets hojd och luften foljer logotypens lockup. */

.markesrad {
  --marke-h: 22px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--marke-h) * 0.45);
  min-height: var(--tapyta);
  color: var(--ink);
}

.markesrad:hover {
  color: var(--ink);
}

.marke {
  display: block;
  flex: none;
  height: var(--marke-h);
  width: auto;
}

.marke path {
  fill: currentColor;
}

.marke-punkt {
  fill: var(--coral);
}

.ordmarke {
  display: block;
  flex: none;
  height: calc(var(--marke-h) * 0.78);
  aspect-ratio: 1355 / 185;
  background: url("../assets/ghostwriter-wordmark-ink.png") center / contain no-repeat;
}

/* --- Sidhuvudet ---------------------------------------------------------- */

.sidhuvud-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--steg-4);
  min-height: 72px;
}

.avsandare {
  font-size: var(--t-liten);
  color: var(--muted);
  white-space: nowrap;
}

.sidhuvud-linje {
  height: 1px;
  background: var(--rule);
}

/* --- Knapparna ----------------------------------------------------------- */
/* Primar ar ink, sekundar ar paper med rule. Hover byter bara farg. */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--steg-2);
  min-height: var(--tapyta);
  padding: 0 18px;
  border-radius: var(--radie-yta);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}

.knapp-primar {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

.knapp-primar:hover:not([disabled]) {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
  color: var(--paper);
}

/* Avstangd primar: muted i stallet for avstangd-gratt, sa att texten
   ("Checking") klarar 4,5:1 mot paper. */
.knapp-primar[disabled] {
  background: var(--muted);
  border-color: var(--muted);
  color: var(--paper);
}

.knapp-sekundar {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
}

.knapp-sekundar:hover:not([disabled]) {
  background: var(--surface);
  color: var(--ink);
}

.knapp-sekundar[disabled] {
  color: var(--avstangd);
}

/* Lankknappen: ser ut som en lank, ar en knapp. */
.knapp-lank {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  border-radius: 2px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.knapp-lank:hover:not([disabled]) {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.knapp-lank[disabled] {
  color: var(--avstangd);
  text-decoration: none;
}

/* Ett block av knappar pa en rad, staplade pa smal skarm. */
.knapprad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--steg-3);
}

/* --- Falten -------------------------------------------------------------- */

.falt {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.falt-etikett {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.falt-inmatning {
  width: 100%;
  min-height: var(--tapyta);
  border: 1px solid var(--rule);
  border-radius: var(--radie-yta);
  padding: 10px var(--steg-3);
  background: var(--paper);
  font-size: 16px;
  color: var(--ink);
}

.falt-inmatning::placeholder {
  color: var(--muted);
}

.falt-inmatning:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

.falt-hjalp {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.falt-fel {
  font-size: 14px;
  color: var(--rod);
  line-height: 1.45;
}

/* --- Sidfoten ------------------------------------------------------------ */

.sidfot {
  padding: 56px 0 48px;
}

.sidfot-yta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--steg-6) 32px;
  align-items: end;
  border-top: 1px solid var(--rule);
  padding-top: 40px;
}

.sidfot-vanster {
  display: flex;
  align-items: flex-start;
  gap: var(--steg-5);
}

/* Sigillet: djup ur skillnaden mellan surface och paper, aldrig ur skugga. */
.sigill {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.sidfot-rader {
  font-size: var(--t-liten);
  line-height: 1.85;
  color: var(--ink);
  text-wrap: pretty;
}

/* Lanken ar 16 px text men tapytan ar 44: vertikal padding som tas
   tillbaka med negativ marginal, sa att raden inte flyttar sig. */
.sidfot-rader a {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.sidfot-rader a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.referens {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 899px) {
  .sidfot-yta {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 599px) {
  .knapprad {
    flex-direction: column;
    align-items: stretch;
  }

  .knapprad .knapp {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knapp {
    transition: none;
  }
}

/* ==== styles/telefon.css ==== */
/* telefon.css: telefonramen (.tel-*). Allt inne i ramen ritas ur --wa-*,
   aldrig ur sidans egna tokens, sa att de tva kan andras var for sig. Ingen
   skugga, ingen hexkod, ingen bild. */

.tel-ram {
  width: 100%;
  max-width: var(--wa-bredd);
  border: 1px solid var(--wa-rule);
  border-radius: var(--radie-kort);
  overflow: hidden;
  background: var(--wa-tapet);
  color: var(--wa-text);
  font-family: var(--sans);
}

/* --- Chattrubriken ------------------------------------------------------- */

.tel-rubrik {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--steg-3);
  background: var(--wa-in);
  border-bottom: 1px solid var(--wa-rule);
}

.tel-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-ut);
  color: var(--wa-meta);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tel-namnblock {
  min-width: 0;
}

.tel-namn {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.tel-underrad {
  font-size: 11px;
  color: var(--wa-meta);
  line-height: 1.3;
  margin-top: 1px;
}

/* --- Chattytan ----------------------------------------------------------- */

.tel-yta {
  position: relative;
  min-height: 180px;
  background: var(--wa-tapet);
}

.tel-tapet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--wa-tapet-monster);
  pointer-events: none;
}

.tel-flod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--steg-2);
  padding: var(--steg-3) 10px var(--steg-4);
  min-height: 180px;
}

/* --- Bubblorna ----------------------------------------------------------- */

.tel-bubbla {
  max-width: 86%;
  padding: var(--steg-2) 10px 6px;
  font-size: 13px;
  line-height: 1.45;
  border-radius: var(--radie-yta);
  overflow-wrap: anywhere;
}

.tel-in {
  align-self: flex-start;
  background: var(--wa-in);
  border-top-left-radius: var(--steg-1);
}

.tel-ut {
  align-self: flex-end;
  background: var(--wa-ut);
  border-top-right-radius: var(--steg-1);
}

.tel-stycke + .tel-stycke {
  margin-top: var(--steg-2);
}

.tel-meta {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--wa-meta);
  margin-top: var(--steg-1);
}

/* Punkten personen satt: coral, som i rosten. */
.tel-punkt {
  color: var(--coral);
}

/* Metaraden pa en utgaende bubbla: --wa-meta pa --wa-ut ger 3,9:1, under
   4,5. Tonen morknas med en femtedel --wa-text, fortfarande helt ur ramens
   egna tokens och utan ny hexkod (5,2:1 pa wa-ut). */
.tel-ut .tel-meta,
.tel-ut .tel-memo-tid {
  color: color-mix(in srgb, var(--wa-meta) 78%, var(--wa-text));
}

/* --- Rostmemot ----------------------------------------------------------- */
/* En spelknapp som bara ar en bild, staplar i fasta hojder och langden.
   Allt i bubblans text- och metafarg. */

.tel-memo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  padding: 2px 0 4px;
}

.tel-memo-spela {
  width: 22px;
  height: 22px;
  color: var(--wa-text);
}

.tel-memo-vag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
}

.tel-memo-stapel {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--wa-meta);
  transform: scaleY(var(--h));
}

.tel-memo-tid {
  font-size: 11px;
  color: var(--wa-meta);
}

/* --- Svarsknapparna ------------------------------------------------------ */
/* Bilder av WhatsApps svarsknappar under en bubbla: paper-rader i samma
   bredd som bubblan, inte klickbara. Gruppen haller ihop bubbla och rader. */

.tel-grupp {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 86%;
}

.tel-grupp-in {
  align-self: flex-start;
}

.tel-grupp-ut {
  align-self: flex-end;
}

.tel-grupp .tel-bubbla {
  max-width: none;
}

.tel-val {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tel-valrad {
  padding: 7px 10px;
  border-radius: var(--radie-yta);
  background: var(--wa-in);
  color: var(--wa-text);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

/* Den svarsknapp som gar att trycka pa: samma utseende, riktig knapp. */
.tel-valrad-knapp {
  appearance: none;
  border: 0;
  width: 100%;
  min-height: 34px;
  cursor: pointer;
  transition: background-color var(--overgang);
}

.tel-valrad-knapp:hover {
  background: var(--wa-ut);
}

/* --- Systemraden --------------------------------------------------------- */
/* Som WhatsApps datumremsa: liten, mitt i flodet, utan avsandare. */

.tel-system {
  align-self: center;
  margin: var(--steg-1) 0;
  padding: 4px 10px;
  border-radius: var(--radie-pill);
  background: var(--wa-ut);
  color: var(--wa-text);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

/* Tomraden: nar ingenting hant an. Ritas som en liten paper-ruta i ink,
   inte som gra text direkt pa tapeten: dar landar kontrasten under 4,5:1. */
.tel-tom {
  align-self: center;
  margin: auto;
  padding: var(--steg-2) var(--steg-3);
  border-radius: var(--radie-yta);
  background: var(--wa-in);
  color: var(--wa-text);
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

/* --- Skrivindikatorn ----------------------------------------------------- */

.tel-skriver {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 11px 12px;
  min-height: 34px;
}

.tel-prick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wa-meta);
  animation: tel-puls 900ms ease-in-out infinite;
}

.tel-prick:nth-child(2) { animation-delay: 150ms; }
.tel-prick:nth-child(3) { animation-delay: 300ms; }

@keyframes tel-puls {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .tel-prick {
    animation: none;
    opacity: 0.7;
  }

  .tel-valrad-knapp {
    transition: none;
  }
}

/* ==== styles/login.css ==== */
/* login.css: ett morkt, redaktionellt rum. Fargerna ags av tokens.css.
   Gemensam header och footer, horisontell rals och ett oppet formular.
   Tillstandsklasserna ags fortfarande av login.js. */

@property --band-x { syntax: "<percentage>"; inherits: true; initial-value: 15%; }
@property --band-y { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
html { transition: --band-x 900ms var(--ease-ut), --band-y 900ms var(--ease-ut); }

body.sida-login {
  color-scheme: dark;
  color: var(--login-text);
  background: var(--login-bg);
}
.sida-login::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 0% 100%, var(--umber), transparent 64%);
}
.sida-login::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 65% at var(--band-x) var(--band-y),
    color-mix(in srgb, var(--coral) 11%, transparent), transparent 85%);
  opacity: 0;
  transition: opacity 900ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sida-login:hover::after { opacity: 1; }
}
.sida-login :focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.sida-login ::selection { background: var(--coral); color: var(--login-bg); }
.sida-login .hoppa:focus { color: var(--login-bg); background: var(--login-text); }

/* Layout: rubriken och formularstarten delar axel pa desktop. */
.inlogg-sida {
  width: min(100% - 112px, 1328px);
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(56px, 8vw, 120px);
}
.panel-topp {
  grid-column: 1 / -1;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--login-divider);
}
.sida-login .markesrad { --marke-h: 24px; color: var(--login-text); }
.sida-login .ordmarke { background-image: url("../assets/ghostwriter-wordmark-paper.png"); }
.panel-avsandare { color: var(--login-muted); font-size: 14px; }
.band-panel {
  min-width: 0;
  padding: clamp(64px, 11vh, 112px) 0 70px clamp(0px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}
.panel-intro { width: 100%; }
.panel-rubrik {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.7vw, 68px);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.045em;
}
.panel-rubrik span, .panel-rubrik em { display: block; white-space: nowrap; }
.panel-rubrik em { color: var(--login-soft); font-weight: 400; letter-spacing: -.045em; }
.panel-tagline {
  margin-top: 32px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--login-muted);
  white-space: pre-line;
}
.inlogg {
  min-width: 0;
  padding: 70px clamp(0px, 2.6vw, 38px) 60px 0;
  display: grid;
  align-content: center;
  justify-items: center;
}
.inlogg-stapel { width: 100%; max-width: 400px; min-width: 0; }
.kort-inlogg { padding: 4px; background: transparent; border: 0; }
.kort-inlogg.kort-byter { overflow: hidden; transition: height 340ms var(--kurva-ut); }
.kort-rubrik {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 39px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.kort-rubrik:focus-visible { outline: none; }
.kort-under {
  margin-top: 12px;
  color: var(--login-muted);
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}
.kort-form { display: grid; gap: 22px; margin-top: 36px; }
.kort-fel:empty, .falt-fel:empty { display: none; }
.kort-lankar { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 18px; font-size: 13px; }
.kort-last { color: var(--login-text); }
.kort-tid { font-size: 46px; margin-top: 24px; }
.kort-notis { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--login-success); }
.kort-demo-rad { margin-top: 18px; font-size: 13px; }
.kontakt-adress { display: block; color: var(--login-text); user-select: all; overflow-wrap: anywhere; }

/* Falt: kanten och understrykningen svarar i coral, aldrig med layoutskifte. */
.sida-login .falt { gap: 9px; }
.sida-login .falt-etikett { color: var(--login-text); font-size: 13px; font-weight: 400; }
.falt-rubrikrad { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.falt-ram { position: relative; }
.sida-login .falt-inmatning {
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--login-rule);
  border-radius: 5px;
  background: color-mix(in srgb, var(--login-bg) 45%, transparent);
  color: var(--login-text);
  caret-color: var(--coral);
  font-size: 15px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.sida-login .falt-inmatning::placeholder { color: var(--login-muted); opacity: .85; }
.sida-login .falt-inmatning:hover { border-color: var(--login-soft); }
.sida-login .falt-inmatning:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-color: var(--coral);
  background: var(--login-surface);
}
.sida-login .falt-inmatning[aria-invalid="true"] { border-color: var(--login-error); }
.sida-login .falt-inmatning:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--login-surface) inset;
  -webkit-text-fill-color: var(--login-text);
  caret-color: var(--coral);
}
.sida-login .falt-med-knapp { padding-right: 52px; }
.sida-login .falt-hjalp { color: var(--login-muted); font-size: 12px; line-height: 1.6; }
.sida-login .falt-fel { color: var(--login-error); font-size: 13px; line-height: 1.6; }
.falt-ok {
  position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  display: none; color: var(--login-success); pointer-events: none;
}
.falt.ok .falt-ok { display: block; animation: pop-in 220ms var(--kurva-ut); }
.falt.ok .falt-inmatning { padding-right: 40px; }
.falt-ok svg { display: block; }
.falt-knapp {
  position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; border-radius: 3px; color: var(--login-muted);
  transition: color 180ms ease;
}
.falt-knapp:hover, .falt-knapp[aria-pressed="true"] { color: var(--coral); }
.visa-ikon, .visa-ikon svg { display: block; width: 20px; height: 20px; }

/* Knappar: ljus primar, coral underkant vid hover och fokus. */
.sida-login .knapp {
  position: relative; overflow: hidden; min-height: 52px; border-radius: 5px;
  font-size: 14px; font-weight: 500;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--kurva-ut);
}
.sida-login .knapp-primar {
  color: var(--login-bg); background: var(--login-text); border: 1px solid var(--login-text);
}
.sida-login .knapp-primar:hover:not([disabled]) {
  color: var(--login-bg); background: var(--login-text); border-color: var(--login-text);
}
.sida-login .knapp-primar::after {
  content: ""; position: absolute; height: 3px; bottom: 0; left: 0; right: 0;
  background: var(--coral); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--kurva-ut);
}
.sida-login .knapp-primar:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.sida-login .knapp-primar[disabled] { background: var(--login-soft); border-color: var(--login-soft); color: var(--login-bg); }
.sida-login .knapp-sekundar { background: transparent; border: 1px solid var(--login-rule); color: var(--login-text); }
.sida-login .knapp-sekundar:hover:not([disabled]) { background: var(--login-surface); border-color: var(--coral); color: var(--login-text); }
.sida-login .knapp-sekundar[disabled] { color: var(--login-muted); border-color: var(--login-divider); }
.sida-login .knapp:active:not([disabled]) { transform: translateY(1px); }
.kort-knapp { width: 100%; margin-top: 2px; }
.kort-knappar .knapp { flex: 1 1 auto; }
#logga-in::before {
  content: ""; position: absolute; right: 20px; width: 20px; height: 20px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 260ms var(--kurva-ut);
}
#logga-in:hover::before { translate: 3px 0; }
.knapp.vantar { cursor: progress; }
.sida-login .knapp-primar.vantar::after { animation: knapp-tid var(--vantar-ms, 480ms) linear both; }

.sida-login .knapp-lank {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--login-muted);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.sida-login .knapp-lank:is(:hover, :focus-visible):not([disabled]) {
  color: var(--login-text); text-decoration-color: var(--coral);
}
.sida-login .glomt-lank { font-size: 12px; margin-block: -8px; font-weight: 400; }
.sida-login .enhet-hoppa { color: var(--wa-text); }
.sida-login .enhet-hoppa:hover { color: var(--wa-text); }

/* Ralsen: tre numrerade stationer. Klar, aktiv och aria-current fran JS. */
.rals {
  counter-reset: station;
  display: flex;
  gap: 22px;
  width: 100%;
  max-width: 510px;
  margin-top: 82px;
}
.rals-steg { position: relative; flex: 1 1 0; min-width: 0; padding-top: 18px; counter-increment: station; }
.rals-steg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--login-rule);
}
.rals-steg::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--login-text); transform: scaleX(0); transform-origin: left;
  transition: transform 480ms var(--kurva-ut);
}
.rals-steg:is(.aktiv, .klar)::after { transform: scaleX(1); }
.rals-prick {
  position: absolute; top: -3px; left: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: var(--login-rule); z-index: 1;
  transition: background-color 260ms ease;
}
.rals-steg.aktiv .rals-prick { background: var(--coral); }
.rals-steg.klar .rals-prick { background: var(--login-text); }
.rals-namn { display: block; font-size: 11px; line-height: 1.5; color: var(--login-muted); }
.rals-namn::before { content: "0" counter(station); margin-right: 7px; font-variant-numeric: tabular-nums; }
.rals-steg:is(.aktiv, .klar) .rals-namn { color: var(--login-text); }
.rals-detalj { display: block; margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--login-muted); overflow-wrap: anywhere; }
.rals-detalj:empty { display: none; }

/* Faktorval och kodceller. Kodinputen ligger overst och ar riktig inmatning. */
.faktorval { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 12px; }
.faktor-rad {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  align-items: start; padding: 18px 16px; border: 1px solid var(--login-rule);
  border-radius: 5px; cursor: pointer; transition: border-color 180ms, background-color 180ms;
}
.faktor-rad:hover { border-color: var(--coral); }
.faktor-rad:has(input:checked) { border-color: var(--login-soft); background: var(--login-surface); }
.faktor-rad input {
  appearance: none; width: 18px; height: 18px; margin: 1px 0 0;
  border: 1.5px solid var(--login-muted); border-radius: 50%; background: transparent;
}
.faktor-rad input:checked { border-color: var(--coral); background: radial-gradient(circle, var(--coral) 36%, transparent 43%); }
.faktor-text { display: grid; gap: 5px; min-width: 0; }
.faktor-namn { font-size: 14px; line-height: 1.4; font-weight: 500; }
.faktor-under { font-size: 12px; line-height: 1.6; color: var(--login-muted); }
.kod { position: relative; }
.kod-falt {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  color: transparent; caret-color: transparent; opacity: .01;
  font-size: 24px; letter-spacing: 1.9em;
}
.sida-login .kod-falt:focus-visible { outline: none; }
.kod-celler { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cell {
  position: relative; height: 58px; display: grid; place-items: center;
  border: 1px solid var(--login-rule); border-radius: 5px;
  background: var(--login-surface); color: var(--login-text);
  font-size: 25px; font-weight: 400; font-variant-numeric: tabular-nums;
  transition: border-color 180ms;
}
.cell-fylld { border-color: var(--login-soft); animation: cell-pop 180ms var(--kurva-ut); }
.kod:focus-within .cell-aktiv { border-color: var(--coral); outline: 2px solid var(--coral); outline-offset: 3px; }
.kod:focus-within .cell-aktiv:empty::after { content: ""; width: 1px; height: 24px; background: var(--coral); animation: markor 1s steps(2, jump-none) infinite; }
.kod[data-fel] .cell { border-color: var(--login-error); }
.kod[data-fel] .kod-celler { animation: skaka 360ms ease; }
.kod-inaktiv .cell { border-style: dashed; opacity: .6; }
.betrodd { display: grid; gap: 2px; }
.betrodd-rad { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 13px; cursor: pointer; }
.betrodd-rad input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--coral); }
.betrodd-hjalp { padding-left: 28px; }
.kort-betrodd { padding: 14px; margin-top: 18px; border: 1px solid var(--login-rule); border-radius: 5px; font-size: 13px; line-height: 1.6; }

/* Inbjudan, demo och fot. */
.inlogg-under { margin: 26px 4px 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--login-muted); }
.inlogg-kontakt { margin-top: -4px; }
.sida-login .kontakt-lank { color: var(--login-text); font-weight: 400; }
.inlogg-under > .inlogg-rad:has([data-hand="demo-konton"]) { margin-top: 16px; }
.sida-login [data-hand="demo-konton"] { gap: 10px; font-weight: 400; }
[data-hand="demo-konton"]::after {
  content: ""; width: 8px; height: 8px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms;
}
[data-hand="demo-konton"][aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.demo { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; text-align: left;
  transition: grid-template-rows 320ms var(--kurva-ut), opacity 260ms, visibility 0s 320ms; }
.demo.oppen { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.demo-inre { min-height: 0; overflow: hidden; }
.demo-lista { margin-top: 10px; padding: 0 14px; border: 1px solid var(--login-rule); border-radius: 5px; background: var(--login-surface); }
.demo-rad { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 0; }
.demo-rad + .demo-rad { border-top: 1px solid var(--login-divider); }
.demo-avatar { flex: none; width: 34px; height: 34px; border: 1px solid var(--login-rule); border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.demo-info { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; }
.demo-namn { color: var(--login-text); font-size: 13px; }
.demo-meta { color: var(--login-muted); font-size: 11px; overflow-wrap: anywhere; }
.sida-login .demo-knapp { min-height: 44px; font-size: 12px; flex: 1 1 100%; }
.demo-los { margin-top: 10px; font-size: 12px; color: var(--login-muted); }
.login-fot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0 30px; color: var(--login-muted); font-size: 11px; line-height: 1.6; }

/* Demofaktorn finns i samma nod vid byte mellan mobil och desktop. */
.enhet { width: 100%; min-width: 0; }
.enhet:empty { display: none; }
.enhet-panel { max-width: 360px; margin-top: 34px; }
.enhet-mobil { display: none; margin-top: 28px; }
.enhet > * { animation: intro-upp 380ms var(--kurva-ut) both; }
body:not([data-lage="steg1"]):not([data-lage="steg1-fel"]):not([data-lage="glomt"]):not([data-lage="glomt-skickat"]):not([data-lage="last"]) .panel-intro { display: none; }
body:not([data-lage="steg1"]):not([data-lage="steg1-fel"]):not([data-lage="glomt"]):not([data-lage="glomt-skickat"]):not([data-lage="last"]) .rals { margin-top: 0; }
.auth { padding: 22px; border: 1px solid var(--login-rule); border-radius: 6px; background: var(--login-surface); color: var(--login-text); }
.auth-rubrik, .auth-epost, .auth-tid { font-size: 12px; color: var(--login-muted); line-height: 1.6; }
.auth-konto { margin-top: 20px; display: grid; gap: 2px; }
.auth-tjanst { font-size: 14px; }
.auth-epost { overflow-wrap: anywhere; }
.auth-rad { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.auth-kod { font-size: 34px; letter-spacing: .03em; font-weight: 400; }
.auth-tid { margin-top: 14px; }
.auth-ring { width: 36px; height: 36px; flex: none; transform: rotate(-90deg); }
.auth-ring circle { fill: none; stroke-width: 2; }
.auth-ring-bak { stroke: var(--login-rule); }
.auth-ring-fram { stroke: var(--coral); transition: stroke-dashoffset 1000ms linear; }
.auth-ring-fram.auth-ring-hopp { transition: none; }
.enhet-telefon, .enhet .tel-ram { position: relative; }
.enhet .tel-flod { padding-bottom: 48px; }
.enhet-hoppa { position: absolute !important; right: 12px; bottom: 4px; font-size: 12px !important; }
.steg-klar { display: grid; justify-items: start; gap: 14px; }
/* Sigillet ar logotypens platta: ljus, rundad, med market i ink. */
.klar-sigill { width: 58px; height: 58px; border-radius: 14px; background: var(--login-text); display: grid; place-items: center; color: var(--login-bg); animation: pop-in 260ms ease; }
.klar-sigill .marke { height: 22px; width: auto; }
.klar-sigill .marke-punkt { transform-box: fill-box; transform-origin: left center; animation: pop-in 220ms 200ms backwards; }
.klar-rubrik { font-size: 32px; margin-top: 14px; }
.klar-under { margin-top: 0; }
.klar-linje { display: block; width: 100%; height: 2px; margin-top: 8px; background: var(--login-rule); overflow: hidden; }
.klar-linje-fyll { display: block; height: 100%; background: var(--coral); transform-origin: left; animation: knapp-tid var(--navigera-ms, 600ms) linear both; }

/* Rorelsen ar kort, svarar pa handling och kan stangas av helt. */
@keyframes intro-upp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes knapp-tid { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cell-pop { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes markor { from { opacity: 1; } to { opacity: 0; } }
@keyframes skaka { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.panel-rubrik > * { animation: intro-upp 600ms var(--kurva-ut) backwards; }
.panel-rubrik > :nth-child(2) { animation-delay: 90ms; }
.panel-rubrik > :nth-child(3) { animation-delay: 180ms; }
.panel-tagline { animation: intro-upp 600ms 240ms var(--kurva-ut) backwards; }
.rals { animation: intro-upp 500ms 340ms var(--kurva-ut) backwards; }
.inlogg-stapel { animation: intro-upp 600ms 140ms var(--kurva-ut) backwards; }
.steg.steg-in, .steg.steg-in-bak { animation: intro-upp 320ms var(--kurva-ut) backwards; }
.kort-fel { animation: intro-upp 220ms var(--kurva-ut); }
.skakar { animation: skaka 320ms ease; }
.sida-login .marke-punkt { transform-box: fill-box; transform-origin: left center; transition: transform 260ms var(--kurva-ut); }
.sida-login .markesrad:hover .marke-punkt { transform: scaleX(1.3); }

@media (max-width: 1100px) and (min-width: 900px) {
  .inlogg-sida { width: calc(100% - 64px); column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(330px, 1fr); }
  .band-panel { padding-left: 0; }
  .panel-rubrik { font-size: 43px; }
  .inlogg { padding-right: 0; }
  .rals { gap: 14px; }
  .rals-namn { font-size: 10px; }
}
@media (max-width: 899px) {
  .inlogg-sida { width: min(100% - 48px, 560px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 0; }
  .panel-topp { min-height: 92px; }
  .sida-login .markesrad { --marke-h: 22px; }
  .panel-avsandare { font-size: 11px; }
  .band-panel { padding: 30px 0 0; }
  .panel-intro { display: none; }
  .rals { margin: 0; max-width: none; gap: 20px; }
  .rals-namn { font-size: 10px; }
  .rals-detalj { display: none; }
  .inlogg { padding: 46px 0 36px; align-content: start; }
  .inlogg-stapel { max-width: none; }
  .kort-rubrik { font-size: 36px; }
  .kort-form { margin-top: 30px; gap: 24px; }
  .sida-login .falt-inmatning { font-size: 16px; }
  .enhet-panel { display: none; }
  .enhet-mobil { display: block; }
  .enhet-mobil:empty { display: none; }
  .login-fot { padding: 20px 4px 26px; border-top: 1px solid var(--login-divider); display: block; font-size: 10px; }
  .login-fot p + p { margin-top: 6px; }
  .inlogg-under { margin-top: 24px; }
}
@media (max-width: 359px) {
  .inlogg-sida { width: calc(100% - 36px); }
  .sida-login .markesrad { --marke-h: 20px; }
  .panel-avsandare { font-size: 10px; }
  .rals { gap: 12px; }
  .rals-namn::before { display: block; margin-bottom: 3px; }
  .kort-rubrik { font-size: 33px; }
  .cell { height: 50px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html, .sida-login *, .sida-login *::before, .sida-login *::after, .sida-login::after {
    animation: none !important; transition: none !important;
  }
  .sida-login::after { display: none; }
  .sida-login .knapp:active:not([disabled]), .sida-login .markesrad:hover .marke-punkt { transform: none; }
  .klar-linje-fyll { transform: scaleX(1); }
}