/* ═══════════════════════════════════════════════════════════════════════════
   TEAMILLUSTRATIONEN

   Tre spalter på desktop: vem teamet är, hur det arbetar (stegen), och vad
   det lämnar ifrån sig. Läsordningen är hela poängen — vänster svarar på
   "vem", mitten på "hur", höger på "vad får vi".

   Under 1080 px faller den till en spalt i samma ordning. Panelerna staplas
   aldrig ovanpå varandra: bara den aktiva har höjd, resten är utanför flödet.
   ═══════════════════════════════════════════════════════════════════════════ */

.teamlag{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.35fr) minmax(0,.92fr);
  gap:1.1rem;align-items:stretch;
}
@media(max-width:1080px){.teamlag{grid-template-columns:1fr;gap:1rem}}

.tkol{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;min-width:0;
}

/* ── Vänster: vem teamet är ───────────────────────────────────────────────── */
.tetikett{
  display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g1);margin-bottom:1rem;
}
.tetikett i{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--g1) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--g1) 45%,transparent);
  font-style:normal;font-size:.72rem;color:#fff;
}
.tkol h3{color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-.025em;
  line-height:1.15;margin-bottom:.7rem}
.tkol > p{font-size:.93rem;line-height:1.65;color:var(--muted)}

/* ── Mitten: stegen ───────────────────────────────────────────────────────── */
.trubrik{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g1);margin-bottom:1.1rem}

.tsteg-lista{display:flex;flex-direction:column;gap:.5rem}
.tsteg{
  position:relative;display:flex;align-items:flex-start;gap:.85rem;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:rgba(255,255,255,.02);border:1px solid var(--line);
  border-radius:14px;padding:.85rem .95rem;overflow:hidden;
  transition:background .22s var(--ease-out-soft),border-color .22s var(--ease-out-soft);
}
.tsteg:hover{background:rgba(255,255,255,.045)}
.tsteg.on{background:rgba(92,141,255,.1);border-color:rgba(122,156,255,.55)}

.tsteg-nr{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem;font-weight:700;
  color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line2);
  transition:color .22s,background .22s,border-color .22s;
}
.tsteg.on .tsteg-nr{color:#fff;background:color-mix(in srgb,var(--g1) 28%,transparent);
  border-color:color-mix(in srgb,var(--g1) 60%,transparent)}
.tsteg-txt{min-width:0;display:flex;flex-direction:column;gap:.2rem}
.tsteg-txt b{color:#fff;font-size:.97rem;font-weight:700;line-height:1.25}
.tsteg-txt small{font-size:.85rem;line-height:1.5;color:var(--muted)}

/* Mätaren: fylls över exakt den tid steget står kvar (--tsteg-tid från JS).
   Ligger som en hårfin linje längst ned i kortet, inte som en förloppsindikator
   någon ska titta på — den ska kännas, inte läsas. */
.tsteg-mat{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(255,255,255,.06);opacity:0}
.tsteg.on .tsteg-mat{opacity:1}
.tsteg-mat i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--g1),var(--g2))}
.tsteg.on .tsteg-mat i{animation:tstegFyll var(--tsteg-tid,3800ms) linear forwards}
@keyframes tstegFyll{from{width:0}to{width:100%}}
/* Har besökaren tagit över styrningen är mätaren en lögn — då släcks den. */
.manuell .tsteg-mat{opacity:0}

/* Källrad under stegen: var informationen kommer ifrån. */
.tkallor{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line2)}
.tkallor-h{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.7rem}
.tkallor-rad{display:flex;flex-wrap:wrap;gap:.4rem}
.tkalla{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px solid var(--line2);
  border-radius:999px;padding:.3rem .7rem}
.tkalla b{color:#fff;font-weight:600}

/* ── Höger: vad teamet lämnar ifrån sig ───────────────────────────────────── */
.tscener{position:relative;flex:1;min-height:0;display:grid;grid-template:1fr/1fr}
.tscen{
  grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(0,8px,0);
  transition:opacity .42s var(--ease-out-soft),transform .52s var(--ease-solutra),
             visibility 0s linear .42s;
}
.tscen.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .42s var(--ease-out-soft),transform .52s var(--ease-solutra),
             visibility 0s linear 0s}

.tpost{display:flex;align-items:center;gap:.7rem;padding:.6rem .2rem;
  border-bottom:1px solid var(--line2)}
.tpost:last-child{border-bottom:0}
.tpost-ini{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.74rem;font-weight:700;color:#fff;
  background:color-mix(in srgb,var(--g2) 26%,transparent);
  border:1px solid color-mix(in srgb,var(--g2) 50%,transparent)}
.tpost-txt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tpost-txt b{color:#fff;font-size:.88rem;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpost-txt small{font-size:.78rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmarke{margin-left:auto;flex:0 0 auto;font-size:.68rem;font-weight:700;
  padding:.2rem .5rem;border-radius:999px;
  color:var(--motion-gron,#62d39a);
  background:color-mix(in srgb,var(--motion-gron,#62d39a) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--motion-gron,#62d39a) 40%,transparent)}
.tmarke.ny{color:var(--g1);background:color-mix(in srgb,var(--g1) 16%,transparent);
  border-color:color-mix(in srgb,var(--g1) 40%,transparent)}

.tscen-h{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.tscen-h b{color:#fff;font-size:.95rem;font-weight:700}
.tlista{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-top:.2rem}
.tlista li{position:relative;padding-left:1.1rem;font-size:.86rem;line-height:1.5;color:var(--muted)}
.tlista li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:var(--g1)}
.tnot{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line2);
  font-size:.78rem;color:var(--faint)}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKNADSPOSITION: rollerna, utkastet och måtten

   Allt här är scopat till .teamlag--marknad. Illustrationen används även på
   prospekteringssidan, och den ska inte ändras av att den här sidan får mer
   att visa upp.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rollerna teamet ersätter ─────────────────────────────────────────────
   Egen rad under de tre spalterna, i full bredd. Kolumnantalet är EXPLICIT
   (3/2/1) och inte auto-fit: sex rutor ska alltid bryta jämnt, och auto-fit
   landade på fem plus en ensam på 1440 — en ensam ruta på sista raden läses
   som att någon glömt något. 3x2, 2x3 och 1x6 går alla jämnt upp. */
.troller{margin-top:1.1rem;padding:1.4rem 1.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:20px}
.troller-h{font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--g1);margin-bottom:1rem}
.troller-lista{list-style:none;display:grid;gap:.55rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.troller-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.troller-lista{grid-template-columns:1fr}}

.troll{display:flex;align-items:center;gap:.7rem;
  padding:.6rem .7rem;border-radius:12px;min-width:0;
  background:rgba(255,255,255,.025);border:1px solid var(--line2)}
.troll-ini{flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.68rem;font-weight:700;color:#fff;
  background:color-mix(in srgb,var(--g1) 24%,transparent);
  border:1px solid color-mix(in srgb,var(--g1) 48%,transparent)}
/* Namnet får aldrig brytas till två rader: rutorna ligger sida vid sida och
   en enda tvåradig titel gör hela raden högre än de andra. Underraden klipps
   i stället med ellips, den är en precisering och inte bärande. */
.troll-txt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.troll-txt b{color:#fff;font-size:.85rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.troll-txt small{font-size:.75rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Live-pricken: rollen är BEMANNAD just nu. Två lager, en fast prick och en
   ring som andas ut. Bara opacity och transform, så den kostar ingenting att
   låta gå: pulsen ligger på ::after och rör aldrig layouten. Fasförskjutningen
   (--i) gör att de sex inte blinkar i takt, vilket skulle läsa som en
   förloppsindikator i stället för som sex roller som arbetar var för sig. */
.troll-puls{position:relative;margin-left:auto;flex:0 0 auto;
  width:7px;height:7px;border-radius:50%;
  background:var(--motion-gron,#62d39a)}
.troll-puls::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--motion-gron,#62d39a);opacity:0;
  animation:trollPuls 3.4s ease-out infinite;
  animation-delay:calc(var(--i,0) * .42s)}
@keyframes trollPuls{
  0%{opacity:.75;transform:scale(.5)}
  55%,100%{opacity:0;transform:scale(1.25)}
}
.troller-fot{margin-top:1rem;font-size:.82rem;line-height:1.55;color:var(--muted)}
.troller-fot b{color:#fff;font-weight:700}

/* ── Det aktiva steget ────────────────────────────────────────────────────
   En gradientkant längs vänsterkanten i stället för enbart en bakgrund.
   Kanten sitter på ::before och inte på border-left: en border hade flyttat
   innehållet 3 px i sidled varje gång steget byttes, och den ryckningen syns
   tydligt när takten går av sig själv. */
.teamlag--marknad .tsteg::before{content:"";position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--g1),var(--g2));
  opacity:0;transform:scaleY(.4);transform-origin:50% 50%;
  transition:opacity .28s var(--ease-out-soft),transform .38s var(--ease-solutra)}
.teamlag--marknad .tsteg.on::before{opacity:1;transform:none}

/* ── Utkastet: det teamet faktiskt lämnar ifrån sig ───────────────────── */
.tutkast{border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.028);padding:.9rem .95rem;overflow:hidden}
.tutkast-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.tutkast-ini{flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.68rem;font-weight:700;color:#fff;
  background:color-mix(in srgb,var(--g2) 26%,transparent);
  border:1px solid color-mix(in srgb,var(--g2) 50%,transparent)}
.tutkast-namn{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tutkast-namn b{color:#fff;font-size:.85rem;font-weight:700}
.tutkast-namn small{font-size:.74rem;color:var(--faint)}
.tutkast-txt{font-size:.85rem;line-height:1.6;color:var(--text);margin:0 0 .8rem}

/* Bildplatsen: en antydan om att det finns en bild, inte en påhittad bild.
   Tre band i palettens blå, inget motiv. Att rita upp ett fejkat foto här
   hade varit ett löfte om en bild vi inte visat. */
.tutkast-bild{height:52px;border-radius:10px;overflow:hidden;
  display:flex;gap:3px;
  background:linear-gradient(135deg,rgba(92,141,255,.16),rgba(155,140,255,.1))}
.tutkast-bild i{flex:1;background:linear-gradient(180deg,
  rgba(255,255,255,.07),transparent 70%)}
.tutkast-fot{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.tutkast-fot span{font-size:.7rem;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line2);
  border-radius:999px;padding:.22rem .55rem}

/* ── Måtten i slutsteget ──────────────────────────────────────────────── */
.tmatt{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.9rem}
.tmatt-rad{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line2)}
.tmatt-rad:last-child{border-bottom:0}
.tmatt-namn{font-size:.82rem;color:var(--muted);line-height:1.4}
.tmatt-tal{flex:0 0 auto;color:#fff;font-weight:800;font-size:1.15rem;
  font-variant-numeric:tabular-nums}
.tmatt-tal.bra{color:var(--motion-gron,#62d39a)}

@media (prefers-reduced-motion: reduce){
  .tscen{transition:none}
  .tsteg-mat{display:none}
  .troll-puls::after{animation:none}
  .teamlag--marknad .tsteg::before{transition:none}
}