/* ═══════════════════════════════════════════════════════════════════════════
   LAPTOPEN PÅ MOBIL — kompaktvyn i skärmglaset

   Under 1000px visades förut en telefon i stället för datorn. Skälet var
   riktigt: laptopens skärmglas får 228 px på en vanlig telefon, och
   CRM-demon är ritad på en 1440 px yta. Skalan blir 0,158, och även med
   kamerans zoomtak på 2,2 landar 13 px brödtext på 4,5 px. Ingen zoom
   räddar det.

   MEN DATORN ÄR RÄTT BILD. En öppen laptop med ett system i drift säger
   "operativsystem"; en telefon säger "app". Lösningen är därför inte att
   krympa desktopdemon utan att RITA EN EGEN VY i den storlek som faktiskt
   finns.

   YTAN ÄR 220x144 OCH DET ÄR RÄKNAT, INTE VALT. Glaset är 69,84 % av
   ramens bredd och ramen har bildens proportion 1240:1046, vilket ger
   aspekten 1,533. Vid 375 px viewport blir glaset 228 px, alltså fit 1,04
   mot en 220-yta — i praktiken 1:1. Då renderas 11 px text som 11,4 och
   ingenting är nedskalat till oläslighet. Ritade jag på 240 skulle samma
   text landa på 10,5; på 200 blir raderna för korta för namnen.

   INGEN KAMERA OCH INGEN KURSOR. Desktopdemon har båda för att en 1440-yta
   måste beskäras för att kunna läsas. Den här ytan ÄR läsbar i sin helhet,
   och en fantomkursor hade blivit en 6 px pil. Ren CSS med tre akter, och
   JS som bara byter akt och räknar två tal.
   ═══════════════════════════════════════════════════════════════════════════ */

.lm {
  /* Akttiden bor här, inte i JS. js/laptopmobil.js läser ut den så att de
     två aldrig kan säga olika saker. Tre akter x 5,2s = 15,6s varv. */
  --lm-akt-tid: 5200ms;
  position: absolute;
  left: 0; top: 0;
  width: 220px; height: 144px;
  transform-origin: 0 0;
  transform: scale(var(--lm-fit, 1));
  display: none;                     /* slås på av media-regeln i index.html */
  flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', 'Montserrat', system-ui, sans-serif;
  color: #eaf0ff;
  background: linear-gradient(180deg, #080f30, #060b22);
  user-select: none;
}

/* ── Topplisten ──────────────────────────────────────────────────────────
   Ligger kvar genom alla tre akterna. Det är den som gör att vyn läses som
   ETT system man tittar in i, inte tre bilder efter varandra. */
.lm-topp {
  flex: none;
  height: 17px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 7px;
  border-bottom: 1px solid rgba(130, 165, 255, .13);
  background: rgba(255, 255, 255, .022);
}
.lm-marke { width: 9px; height: 9px; flex: none; color: #6f9bff; }
.lm-titel { font-size: 8px; font-weight: 700; letter-spacing: .11em; color: #9fb0e0; }
.lm-live {
  margin-left: auto; display: flex; align-items: center; gap: 3px;
  font-size: 7px; font-weight: 600; letter-spacing: .08em; color: #62d39a;
}
.lm-live i {
  width: 4px; height: 4px; border-radius: 50%; background: #62d39a;
  box-shadow: 0 0 5px rgba(98, 211, 154, .9);
  animation: lm-blink 2.1s ease-in-out infinite;
}
@keyframes lm-blink { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* ── Aktytan ─────────────────────────────────────────────────────────────
   Akterna ligger ovanpå varandra; bara den aktiva har opacity. Att de
   ligger kvar i flödet i stället för att växlas med display är avsiktligt:
   höjden ska aldrig hoppa mellan akterna. */
.lm-yta { position: relative; flex: 1; min-height: 0; }
.lm-akt {
  position: absolute; inset: 0;
  padding: 7px 7px 5px;
  display: flex; flex-direction: column;
  opacity: 0;
  transition: opacity .42s ease;
  pointer-events: none;
}
.lm[data-akt="1"] .lm-akt--leads,
.lm[data-akt="2"] .lm-akt--auto,
.lm[data-akt="3"] .lm-akt--over { opacity: 1; }

/* Aktens etikett — samma plats i alla tre, så ögat vet var det ska titta. */
.lm-rubrik {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em;
  color: #8fa2d6; margin-bottom: 6px;
}
.lm-rubrik b { font-size: 9.5px; font-weight: 700; color: #d8e2ff; letter-spacing: .02em; }

/* ── Akt 1: leads ────────────────────────────────────────────────────── */
.lm-rader { display: flex; flex-direction: column; gap: 4px; }
.lm-rad {
  display: flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(130, 165, 255, .12);
}
.lm-av {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 7.5px; font-weight: 700;
  background: rgba(92, 141, 255, .18); border: 1px solid rgba(92, 141, 255, .35);
  color: #a8c2ff;
}
.lm-namn { font-size: 11.5px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-poang {
  margin-left: auto; flex: none;
  min-width: 22px; height: 15px; padding: 0 5px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.lm-poang--hog { background: rgba(98, 211, 154, .16); border: 1px solid rgba(98, 211, 154, .4); color: #7ee0aa }
.lm-poang--med { background: rgba(245, 165, 36, .16); border: 1px solid rgba(245, 165, 36, .4); color: #f0b463 }
.lm-poang--lag { background: rgba(240, 81, 122, .16); border: 1px solid rgba(240, 81, 122, .4); color: #ff90ac }

/* Raderna faller in en i taget. Animationen startar om varje gång akten
   blir aktiv, eftersom regeln bara matchar då. */
.lm[data-akt="1"] .lm-rad {
  animation: lm-rad-in .5s cubic-bezier(.2, .8, .3, 1) backwards;
  animation-delay: calc(.18s + var(--i) * .2s);
}
@keyframes lm-rad-in {
  from { opacity: 0; transform: translateX(-10px) }
  to   { opacity: 1; transform: none }
}

/* ── Akt 2: automatiseringen ─────────────────────────────────────────── */
.lm-steg { display: flex; flex-direction: column; gap: 3px; position: relative; }
/* Linjen som binder ihop stegen. Dras uppifrån och ned i takt med bockarna. */
.lm-steg::before {
  content: ""; position: absolute; left: 9px; top: 14px; bottom: 12px; width: 1.5px;
  background: linear-gradient(180deg, #4f8dff, rgba(79, 141, 255, .15));
  transform-origin: top; transform: scaleY(0);
}
.lm[data-akt="2"] .lm-steg::before {
  animation: lm-linje 1.5s cubic-bezier(.4, 0, .3, 1) .35s backwards forwards;
}
@keyframes lm-linje { from { transform: scaleY(0) } to { transform: scaleY(1) } }

.lm-stegrad { display: flex; align-items: center; gap: 8px; height: 27px; }
.lm-bock {
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(98, 211, 154, .16); border: 1.5px solid rgba(98, 211, 154, .5);
  color: #7ee0aa; z-index: 1;
}
.lm-bock svg { width: 10px; height: 10px; }
.lm-stegtxt b { display: block; font-size: 11px; font-weight: 600; letter-spacing: -.01em }
.lm-stegtxt small { display: block; font-size: 8.5px; color: #8fa2d6; margin-top: .5px }

.lm[data-akt="2"] .lm-stegrad {
  animation: lm-steg-in .45s cubic-bezier(.2, .8, .3, 1) backwards;
  animation-delay: calc(.3s + var(--i) * .55s);
}
@keyframes lm-steg-in {
  from { opacity: 0; transform: translateY(7px) }
  to   { opacity: 1; transform: none }
}

/* ── Akt 3: översikten ───────────────────────────────────────────────── */
.lm-tal {
  display: flex; align-items: baseline; gap: 6px;
}
.lm-tal b {
  font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.lm-upp {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 9.5px; font-weight: 700; color: #7ee0aa;
}
.lm-etik { font-size: 8.5px; color: #8fa2d6; margin-top: 2px }

.lm-staplar {
  margin-top: auto; display: flex; align-items: flex-end; gap: 4px; height: 38px;
}
.lm-stapel {
  flex: 1; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #5c8dff, rgba(92, 141, 255, .35));
  transform-origin: bottom; transform: scaleY(0);
  height: calc(var(--h) * 1%);
}
/* both, inte bara backwards. Med enbart backwards föll staplarna tillbaka
   till sitt grundläge scaleY(0) när animationen tagit slut — de växte upp
   och försvann igen, och akten stod tom i fyra sekunder. */
.lm[data-akt="3"] .lm-stapel {
  animation: lm-stapel .55s cubic-bezier(.2, .85, .3, 1) both;
  animation-delay: calc(.5s + var(--i) * .075s);
}
@keyframes lm-stapel { from { transform: scaleY(0) } to { transform: scaleY(1) } }
.lm[data-akt="3"] .lm-tal {
  animation: lm-rad-in .55s cubic-bezier(.2, .8, .3, 1) .12s backwards;
}

/* ── Reducerad rörelse ───────────────────────────────────────────────────
   Akt 3 står kvar: den bär resultatet, alltså det vyn finns för att visa.
   Inget rör sig, ingenting växlar. */
@media (prefers-reduced-motion: reduce) {
  .lm *, .lm *::before, .lm *::after { animation: none !important; transition: none !important }
  .lm .lm-akt { opacity: 0 }
  .lm .lm-akt--over { opacity: 1 }
  .lm-stapel { transform: none }
  .lm-steg::before { transform: scaleY(1) }
}