/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEMSKÄRMEN — innehållet i laptopglaset på /system

   Helt statisk. Ingen JS, inga timers, ingen uppräkning, ingen kamera. Det
   som står i markupen är det besökaren ser, i samma sekund skärmen kommer i
   bild. Föregångaren (crmdemo.js + crmmobil.js + laptopmobil.js, cirka
   4 400 rader) spelade en tidsatt sekvens på en 1440x900-yta som en kamera
   zoomade runt i, vilket kapade ord i kanterna vid varje utsnitt.

   SKALAN LÖSES MED CONTAINER QUERIES, INTE MED transform:scale.
   Glaset är 69,84 % av ramens bredd och har fast aspekt, så dess pixelbredd
   varierar med fönstret. En skalad yta ändrar inte LAYOUT: gridspår behåller
   basbredden och överskjutet klipps åt höger, vilket är precis så de gamla
   avhuggna kanterna uppstod. Här sätter .sk i stället sin egen basstorlek ur
   containerbredden (cqw) och allt inuti mäts i em. Då är komponenten alltid
   ritad i skala 1 mot den bredd den faktiskt har, och ingenting kan hamna
   utanför.

   MOBIL: SKÄRMEN LÄMNAR GLASET. Under 760 px är glaset omkring 230 px brett.
   Kapacitetsraden är sektionens bevis och måste behålla sin storlek, vilket
   inte går på 230 px. .laptop-skarm går därför ur sitt absoluta läge och
   blir ett eget block under datorn, i full spaltbredd. Samma utbrytning som
   sajten hade före kompaktvyn, och den bärs helt av det här mediablocket.

   ORDNING: mobilblocket står SIST i filen med flit. Reglerna väger lika
   tungt som desktopreglerna, så källordningen avgör vem som vinner.
   ═══════════════════════════════════════════════════════════════════════════ */

.sk {
  /* Skärmen är ljus i en mörk sida: som en riktig bildskärm i drift. Alla
     tokens är valda mot den ljusa botten; kapacitetsraden är den enda mörka
     ytan och har egna, ljusa färger nedan. */
  --sk-bg: #dde0f4;
  --sk-panel: rgba(255, 255, 255, .74);
  --sk-linje: rgba(35, 64, 150, .22);
  --sk-linje2: rgba(35, 64, 150, .13);
  --sk-text: #16234f;
  --sk-dov: #5c6a94;
  --sk-blapp: #4da3ff;
  --sk-gron: #15803d;

  /* Basstorleken läses ur GLASETS bredd (containern är .laptop-skarm, se
     index.html). cqw på elementet som själv är container hade fallit
     tillbaka på viewporten — containerenheter läser närmaste FÖRÄLDER.
     Glasets aspekt är konstant (69,84 % av en 1240:1046-bild), så när
     stapeln ryms på en bredd ryms den på alla: höjden följer bredden.
     1,9 cqw mot ett glas på 530-720 px ger 10-13,7 px bastext. */
  font-size: clamp(7px, 1.9cqw, 14px);

  display: flex;
  gap: 1em;
  padding: .9em 1.1em;
  background: var(--sk-bg);
  color: var(--sk-text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.25;
  text-align: left;
}

/* ── Sidomenyn ───────────────────────────────────────────────────────────── */
.sk-sido {
  flex: 0 0 auto;
  width: 11.4em;
  display: flex;
  flex-direction: column;
  gap: .22em;
}
.sk-sido a,
.sk-sido span {
  display: flex;
  align-items: center;
  gap: .62em;
  padding: .62em .8em;
  border-radius: .62em;
  font-size: .92em;
  font-weight: 500;
  color: var(--sk-dov);
  text-decoration: none;
}
.sk-sido .pa {
  background: linear-gradient(180deg, #2f6df0, #1f56d6);
  color: var(--text);
  font-weight: 600;
}
.sk-sido svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ── Innehållsytan ───────────────────────────────────────────────────────── */
.sk-yta {
  flex: 1 1 auto;
  min-width: 0;               /* annars kan långa ord tvinga ut spalten */
  display: flex;
  flex-direction: column;
  gap: .5em;
}
/* Stapelns block får ALDRIG klämmas av flexen: en kapacitetsrad som kramas
   ihop klipper sitt eget tal, och det är värre än ett synligt spill som
   mätningen fångar. Ryms inte stapeln är det budgeten här som ska ändras. */
.sk-yta > * { flex-shrink: 0; }

.sk-topp b {
  display: block;
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-size: 1.32em;
  font-weight: 700;
  letter-spacing: -.01em;
}
.sk-topp small {
  display: block;
  margin-top: .12em;
  font-size: .86em;
  color: var(--sk-dov);
}

/* ── Kapacitetsraden. Sektionens bevis, och därför det enda i skärmen som
      får ta ljus och yta. ───────────────────────────────────────────────── */
.sk-kap {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(90, 150, 255, .55);
  border-radius: .75em;
  padding: .52em 1.05em .58em;
  background:
    radial-gradient(120% 180% at 88% 50%, rgba(56, 122, 235, .30), transparent 62%),
    linear-gradient(100deg, rgba(14, 28, 92, .95), rgba(10, 20, 70, .9));
  box-shadow: 0 0 0 1px rgba(80, 140, 255, .12) inset;
}
.sk-kap-e {
  display: block;
  font-size: .82em;
  font-weight: 600;
  letter-spacing: .07em;
  color: #b9c9ee;
}
.sk-kap-r {
  display: flex;
  align-items: baseline;
  gap: .42em;
  margin-top: .1em;
}
.sk-kap-r b {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-size: 2.95em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--sk-blapp);
}
.sk-kap-r span {
  font-size: 1.32em;
  font-weight: 600;
  color: #f4f7ff;   /* radens botten är mörk oavsett skärmens ljusa yta */
}
.sk-kap-f {
  display: block;
  margin-top: .2em;
  text-align: right;
  font-size: .84em;
  color: #a9b8e6;   /* raden är mörk; sidans dov-ton hade drunknat här */
}
/* Vågen är ren dekor och ligger under texten. Den tonar ut mot vänster så
   den aldrig konkurrerar med siffran. */
.sk-vag {
  position: absolute;
  right: 0; top: 0;
  width: 46%; height: 100%;
  opacity: .55;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 45%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
}

/* ── De fyra korten ──────────────────────────────────────────────────────── */
.sk-kort {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6em;
}
.sk-k {
  border: 1px solid var(--sk-linje2);
  border-radius: .6em;
  padding: .5em .7em .54em;
  background: var(--sk-panel);
}
.sk-k small {
  display: block;
  font-size: .86em;
  color: var(--sk-dov);
}
.sk-k b {
  display: block;
  margin-top: .2em;
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-size: 1.68em;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── De två panelerna ────────────────────────────────────────────────────── */
.sk-paneler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6em;
}
.sk-p {
  border: 1px solid var(--sk-linje2);
  border-radius: .6em;
  padding: .62em .75em;
  background: var(--sk-panel);
}
.sk-p > h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88em;
  font-weight: 600;
  margin-bottom: .3em;
}
.sk-rad {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .12em 0;
}
.sk-ik {
  flex: 0 0 auto;
  width: 1.85em; height: 1.85em;
  display: grid;
  place-items: center;
  border-radius: .5em;
  border: 1px solid rgba(47, 109, 240, .28);
  background: rgba(47, 109, 240, .12);
  color: #2f5fd0;
}
.sk-ik svg { width: 1.05em; height: 1.05em; }
.sk-rad-t { min-width: 0; flex: 1 1 auto; }
/* STORLEKARNA ÄR UPPMÄTTA MOT RADBRYTNINGEN, inte valda på känsla.
   Raderna stod först på .87/.75em, och då landade skärmens minsta text på
   7,9 px vid 1280 px fönster — under vad någon läser. Storlekarna är därför
   provade uppåt tills första raden bröt: .92/.84 bryter "Möte bokat med
   Svensk Bygg AB" och "Offert skickad till Nordvik Konsult". .9/.82 är
   sista steget före det och ger 8,6 px som minsta text.
   Ändras en textsträng här måste kombinationen mätas om. */
.sk-rad-t b {
  display: block;
  font-size: .9em;
  font-weight: 600;
  /* Namnen är korta och ska aldrig kapas; bryts hellre än klipps. */
  overflow-wrap: anywhere;
}
.sk-rad-t small {
  display: block;
  font-size: .82em;
  color: var(--sk-dov);
  overflow-wrap: anywhere;
}
.sk-aktiv {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .35em;
  font-size: .8em;
  color: var(--sk-gron);
}
.sk-aktiv i {
  width: .42em; height: .42em;
  border-radius: 50%;
  background: currentColor;
}

.sk-exempel {
  margin-top: auto;
  padding-top: .35em;
  text-align: right;
  font-size: .72em;
  color: #66719b;
}

/* ══ MOBIL ════════════════════════════════════════════════════════════════
   Skärmen lämnar glaset och blir ett eget block under datorn. Sidomenyn
   utgår, kapacitetsraden står överst i oförändrad storlek, korten går två
   och två, panelerna staplas, och aktivitetslistan kortas till två rader.
   Måste stå SIST: samma specificitet som reglerna ovan. */
@media (max-width: 760px) {
  /* .laptop-scen-prefixet är specificiteten, inte en avgränsning: sidans
     inbäddade <style> står EFTER den här filen i dokumentet, så en ensam
     .laptop-skarm (0-1-0) förlorar källordningen mot inline-regelns
     position:absolute oavsett mediavillkor. 0-2-0 vinner alltid. */
  .laptop-scen .laptop-skarm {
    position: static;
    container-type: normal;  /* size-containment kollapsar auto-höjd till noll */
    width: auto;
    height: auto;
    margin-top: 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--sk-linje);
    overflow: visible;
  }
  /* container-type:size (satt i index.html för cqw-skalan) kräver bestämd
     storlek. I flödet har blocket auto-höjd, och size containment hade då
     kollapsat den till noll. normal släpper containment; font-size i px
     nedan ersätter cqw-skalan. */
  .laptop-scen .skarm-app { position: static; }

  .sk {
    /* Ur containern och tillbaka till vanliga pixlar: blocket är nu lika
       brett som spalten, och då är rem rätt enhet igen. */
    font-size: clamp(11px, 3.15vw, 13.5px);
    display: block;
    padding: 1.05em 1.1em 1.15em;
    border-radius: 14px;
  }
  .sk-sido { display: none; }
  .sk-yta { gap: .85em; }

  /* Kapacitetsraden överst, före rubriken: den är beviset och ska mötas
     först när ytan är kort. */
  .sk-kap { order: -1; }
  .sk-kap-r b { font-size: 3.1em; }

  .sk-kort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-paneler { grid-template-columns: minmax(0, 1fr); }

  /* Aktivitet just nu: två rader räcker på en telefon. */
  .sk-p--akt .sk-rad:nth-child(n + 4) { display: none; }
}

/* Utskrift och reducerad rörelse behöver inga undantag: komponenten står
   redan stilla och har inga animationer att stänga av. */

/* ══ VÄXLINGEN BILD / HTML ═══════════════════════════════════════════════
   I GLASET ligger en bild (bilder/systemskarm.webp). Den är renderad i ett
   stycke och kan därför visa saker som inte går att bygga rimligt i markup:
   multiplikatorillustrationen, den isometriska navet, ikonuppsättningen.

   UNDER 760 PX TAR HTML-KOMPONENTEN ÖVER, av samma skäl som mobilblocket
   ovan finns: glaset är då omkring 230 px brett, och skalas bilden till
   spaltbredd blir dess text fyra pixlar hög. En bild kan inte flöda om.
   Komponenten kan, och gör det redan: korten två och två, panelerna
   staplade, aktivitetslistan kortad. Därför byts de i stället för att
   någon av dem tvingas göra bådas jobb.

   FÖLJDEN: exempeldatan skiljer sig mellan bild och komponent, och den
   som ändrar den ena måste ändra den andra. Ska de synkas är det
   komponenten som ska följa bilden, inte tvärtom.

   Bilden ligger direkt i .laptop-skarm och ärver därför glasets egen
   opacity-regi (.regi/.klar i index.html). Locket och animationen berörs
   inte av något här. */
.skarm-bild { display: block; }

/* 0-2-0 mot .sk:s 0-1-0: sidans inbäddade <style> står EFTER den här filen
   och skulle annars vinna på källordning. */
@media (min-width: 761px) {
  .laptop-scen .sk { display: none; }
}
@media (max-width: 760px) {
  .laptop-scen .skarm-bild { display: none; }
}