/* ══════════════════════════════════════════════════════════════════════════
   BEHOVSANALYSEN — steg 2:s demo
   ──────────────────────────────────────────────────────────────────────────
   Bara det som är nytt. Chrome (sidomeny, toppfält), knappar, piller,
   paneler, KPI-kortens ram, kursorlagret och toasts kommer från crmdemo.css:
   .crmd-app sätter --d-*-variablerna och all den stilen gäller här också.
   Måtten är designpixlar mot samma 1440x900-yta — JS skalar hela ytan.

   ALLT SOM ANIMERAS gör det med opacity och transform (staplarnas bredd är
   undantaget: den ÄR mätvärdet, och en scaleX hade sträckt siffran med sig).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Paletten: skärmen dras mot sajtens marinblå ────────────────────────
   crmdemo håller demoskärmen nästan neutralt svart (#050A18) för att den ska
   läsa som en självlysande yta i ett mörkt rum. Den effekten behålls här —
   ytan ligger fortfarande MÖRKARE än sidans --bg (#060c34) — men hela stegen
   flyttas mot blått så demot känns som en del av Solutra och inte som ett
   inklistrat skärmklipp. Övertoningarna är samma sorts ljus som sidans egen
   bakgrund, bara svagare eftersom det här är ett gränssnitt, inte en kuliss.

   Endast scopat till behovsdemot (.bd-app): laptopdemon på /tjanster äger sin
   egen palett, och de två ska bytas tillsammans om de ska bytas alls. */
#behovs-yta.crmd-yta{background:#050B28}
.crmd-app.bd-app{
  --d-bg:#050B28;
  --d-panel:#0B133C;
  --d-panel2:#111C4C;
  --d-linje:rgba(130,165,255,.15);
  --d-linje2:rgba(130,165,255,.08);
  --d-txt2:rgba(232,240,255,.58);
  --d-txt3:rgba(232,240,255,.36);
  background:
    radial-gradient(1100px 620px at 20% -12%, rgba(79,195,255,.10), transparent 62%),
    radial-gradient(820px 560px at 98% 6%, rgba(92,141,255,.12), transparent 62%),
    radial-gradient(900px 700px at 60% 108%, rgba(92,141,255,.07), transparent 66%),
    var(--d-bg);
}
/* Sidomenyn får sajtens djupare panelton så kantglöden längs den läser som
   samma ljus som ligger i hjältens bakgrund. */
.bd-app .cd-sido{background:#08103A}

/* .cd-yta har egen padding och .cd-vy likaså; för en ensam vy blir det dubbelt
   och kostade 22 px höjd och 52 px bredd som högerspalten behöver. */
.bd-app .cd-yta{padding:0}
.bd-vy{position:absolute; inset:0; padding:22px 26px; display:flex; flex-direction:column}
/* Demon får inte vara beroende av sidans globala reset. Utan den gäller två
   saker som spräcker varje höjdbudget här inne:
     1. h2 och p ärver webbläsarens egna marginaler (20,75 px respektive 13),
        vilket växte vyhuvudet med ~34 px.
     2. box-sizing är content-box, så en panel med height:250px och 26 px
        padding blir 278 — och fyra sådana i rad sköt ut fotraden ur griden.
   Båda nollas för hela demoträdet, så måtten i den här filen är de mått som
   faktiskt gäller. */
.bd-app,.bd-app *,.bd-app *::before,.bd-app *::after{box-sizing:border-box}
.bd-vy h2,.bd-vy p,.bd-vy b,.bd-vy small{margin:0}
.bd-vy .cd-vyh p{margin-top:5px}

.bd-gnista{
  display:inline-grid; place-items:center;
  width:22px; height:22px; vertical-align:-4px;
  color:#8FB4FF;
  filter:drop-shadow(0 0 7px rgba(76,141,255,.6));
}
.bd-vy .cd-vyh h2{display:flex; align-items:center; gap:8px}

/* ── Griden: analys till vänster, panelen till höger ──────────────────── */
.bd-grid{
  display:grid;
  grid-template-columns:1fr 332px;
  gap:22px;
  flex:1; min-height:0;
}
.bd-vanster{display:flex; flex-direction:column; min-height:0}
.bd-hoger{display:flex; flex-direction:column; gap:12px; min-height:0}
/* Höjdbudgeten i högerspalten är tight (663 px för fyra paneler). overflow
   hindrar att ett kort som inte får plats ritas ovanpå panelen under —
   hellre klippt kant än överlappande innehåll. */
.bd-hoger > .cd-panel{overflow:hidden}

.bd-panelh{display:flex; flex-direction:column; gap:3px; margin-bottom:10px}
.bd-panelh b{font-size:14px; font-weight:700; letter-spacing:-.01em}
.bd-panelh small{font-size:11.5px; line-height:1.5; color:var(--d-txt2)}

/* ── Företagsraden med startknappen ──────────────────────────────────── */
.bd-foretag{
  display:flex; align-items:center; gap:16px;
  height:92px; padding:0 18px;
  margin-bottom:16px; flex:none;
}
.bd-foretag-f{flex:1; min-width:0}
.bd-foretag-f small{display:block; font-size:11.5px; color:var(--d-txt2); margin-bottom:7px}
.bd-foretag-v{
  display:flex; align-items:center; gap:9px;
  height:40px; padding:0 13px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--d-linje);
  color:var(--d-txt2);
}
.bd-foretag-v b{font-size:13.5px; font-weight:600; color:var(--d-txt)}

.bd-start{position:relative; height:44px; padding:0 20px; font-size:13.5px; flex:none}
.bd-start-ik{display:inline-flex; transition:opacity .2s ease}
.bd-start.laddar .bd-start-ik,.bd-start.klar .bd-start-ik{opacity:0; position:absolute}
.bd-start-bock{display:none}
.bd-start.klar .bd-start-bock{display:inline-flex}

/* Spinnern ersätter plusikonen medan analysen kör — knappen byts aldrig ut,
   den morfar. Samma grepp som formulärdemots skicka-knapp i steg 1. */
.bd-spinner{
  display:none;
  width:15px; height:15px; flex:none;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.32);
  border-top-color:#fff;
  animation:bd-snurr .72s linear infinite;
}
.bd-start.laddar .bd-spinner{display:block}
@keyframes bd-snurr{to{transform:rotate(360deg)}}

/* ── Flikraden ───────────────────────────────────────────────────────── */
.bd-flikrad{
  display:flex; align-items:center; gap:4px;
  margin-bottom:16px; flex:none;
  padding:4px;
  border-radius:11px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--d-linje2);
}
.bd-flikrad .cd-flik{
  height:30px; padding:0 13px;
  display:inline-flex; align-items:center;
  border-radius:8px;
  font-size:12px; font-weight:500; color:var(--d-txt2);
}
.bd-flikrad .cd-flik.on{background:rgba(47,107,255,.16); color:#9CC0FF; font-weight:600}

/* ── Sammanfattningen ────────────────────────────────────────────────── */
.bd-sammanfattning{padding:16px 18px; flex:1; min-height:0; display:flex; flex-direction:column}

.bd-kpirad{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; flex:none}

/* Korten VÄNTAR synliga och dämpade — strukturen finns i produkten innan
   analysen körts, det är bara värdena som saknas. Ett kort som är helt
   osynligt lämnar ett hål och får vyn att se trasig ut i akt 1. */
.bd-kpi{
  height:106px; padding:14px 15px 0;
  opacity:.3; transform:translateY(10px) scale(.985);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.bd-kpi.inne{opacity:1; transform:none}
.bd-kpi .cd-kpi-n{margin:9px 0 0 45px; font-size:27px}
.bd-kpi-u{margin:3px 0 0 45px; font-size:11px; color:var(--d-txt2)}
.cd-kpi--gron .cd-kpi-ic{background:rgba(34,197,94,.13); border-color:rgba(34,197,94,.26); color:#5BE08C}

.bd-tva{display:grid; grid-template-columns:1fr 1fr; gap:14px; flex:1; min-height:0}
.bd-under{
  padding:13px 14px;
  border-radius:11px;
  background:rgba(255,255,255,.022);
  border:1px solid var(--d-linje2);
  min-height:0;
}
.bd-underh{font-size:12.5px; font-weight:700; margin-bottom:10px}

/* ── Nyckelinsikterna ────────────────────────────────────────────────── */
.bd-nyckel{display:flex; align-items:flex-start; gap:9px; padding:7px 0}
.bd-nyckel + .bd-nyckel{border-top:1px solid var(--d-linje2)}
.bd-nyckel-ic{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  border-radius:8px;
  background:rgba(47,107,255,.12);
  border:1px solid rgba(47,107,255,.22);
  color:#8FB4FF;
}
.bd-nyckel-t{flex:1; min-width:0}
.bd-nyckel-t b{display:block; font-size:11.5px; font-weight:600; line-height:1.3}
.bd-nyckel-t small{display:block; font-size:10.5px; line-height:1.4; color:var(--d-txt2); margin-top:2px}

.bd-badge{
  flex:none;
  display:inline-flex; align-items:center;
  height:19px; padding:0 8px;
  border-radius:7px;
  font-size:10px; font-weight:600; white-space:nowrap;
}
.bd-badge--hog{background:rgba(240,81,122,.14); color:#FF8AA8; border:1px solid rgba(240,81,122,.26)}
.bd-badge--med{background:rgba(245,165,36,.13); color:#E8A34A; border:1px solid rgba(245,165,36,.24)}
.bd-badge--lag{background:rgba(47,107,255,.14); color:#8FB4FF; border:1px solid rgba(47,107,255,.24)}

/* ── Behov per kategori ──────────────────────────────────────────────── */
.bd-katlista{display:flex; flex-direction:column; gap:11px}
.bd-kat{
  display:grid;
  grid-template-columns:104px 1fr 38px 74px;
  align-items:center; gap:10px;
  opacity:.32; transform:translateX(-6px);
  transition:opacity .42s ease, transform .42s cubic-bezier(.16,1,.3,1);
}
.bd-kat.inne{opacity:1; transform:none}
.bd-kat-n{font-size:11.5px; color:var(--d-txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bd-kat-spar{
  height:7px; border-radius:5px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.bd-kat-fyll{
  display:block; height:100%; width:0;
  border-radius:5px;
  background:linear-gradient(90deg,var(--d-bla),var(--d-bla2));
}
.bd-kat-fyll--lila{background:linear-gradient(90deg,var(--d-lila),#A98BFF)}
.bd-kat-v{font-size:11.5px; font-weight:600; text-align:right}
.bd-kat .bd-badge{justify-self:end}

/* ── AI-insikterna ───────────────────────────────────────────────────── */
.bd-aipanel{padding:12px 13px; flex:1; min-height:0}
.bd-ai{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.028);
  border:1px solid var(--d-linje2);
  opacity:.26; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.bd-ai + .bd-ai{margin-top:7px}
.bd-ai.inne{opacity:1; transform:none}
.bd-ai-ic{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  border-radius:8px;
  background:rgba(47,107,255,.13);
  border:1px solid rgba(47,107,255,.24);
  color:#8FB4FF;
}
.bd-ai-t b{display:block; font-size:11.5px; font-weight:600; line-height:1.25}
.bd-ai-t small{display:block; font-size:10.5px; line-height:1.38; color:var(--d-txt2); margin-top:2px}

.bd-ai--lila .bd-ai-ic{background:rgba(124,77,255,.14); border-color:rgba(124,77,255,.26); color:#B9A2FF}
/* Amber betyder samma sak här som i sajtens rörelsesystem: detta kräver en
   människa. Därför pulserar bara det kortet, och långsamt. */
.bd-ai--amber .bd-ai-ic{background:rgba(245,165,36,.14); border-color:rgba(245,165,36,.28); color:#F0AE55}
.bd-ai--amber.inne.pulsar{animation:bd-amber 1900ms cubic-bezier(.65,0,.35,1) infinite}
@keyframes bd-amber{0%,100%{border-color:rgba(245,165,36,.30)}50%{border-color:rgba(245,165,36,.06)}}

/* ── Analysstatus ────────────────────────────────────────────────────── */
.bd-status{padding:12px 13px; flex:none}
.bd-statusrad{display:flex; align-items:center; margin-bottom:9px}
.bd-prick{
  width:6px; height:6px; flex:none;
  border-radius:50%;
  background:currentColor;
}
.bd-prick--puls{animation:bd-puls 1150ms cubic-bezier(.65,0,.35,1) infinite}
@keyframes bd-puls{0%,100%{opacity:1}50%{opacity:.25}}
.bd-statusspar{height:4px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden}
.bd-statusspar i{
  display:block; height:100%; width:0;
  border-radius:3px;
  background:linear-gradient(90deg,var(--d-bla),var(--d-bla2));
}
.bd-statustid{display:block; margin-top:7px; font-size:10.5px; color:var(--d-txt2)}

/* ── Nästa steg ──────────────────────────────────────────────────────── */
.bd-nastapanel{padding:11px 13px; flex:none}
.bd-steg{
  display:flex; align-items:flex-start; gap:9px;
  padding:3px 0;
  opacity:.26; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.bd-steg.inne{opacity:1; transform:none}
.bd-steg-n{
  width:20px; height:20px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(47,107,255,.16);
  border:1px solid rgba(47,107,255,.3);
  font-size:10px; font-weight:700; color:#9CC0FF;
}
.bd-steg-t b{display:block; font-size:11.5px; font-weight:600; line-height:1.3}
.bd-steg-t small{display:block; font-size:10.5px; line-height:1.4; color:var(--d-txt2); margin-top:2px}

/* ── Avslutningskortet ───────────────────────────────────────────────── */
.bd-cta{padding:11px 13px; flex:none; background:linear-gradient(150deg,rgba(47,107,255,.13),rgba(11,18,36,.6))}
.bd-cta b{display:block; font-size:12.5px; font-weight:700}
.bd-cta small{display:block; font-size:10.5px; line-height:1.4; color:var(--d-txt2); margin:4px 0 9px}
.bd-boka{height:34px; width:100%; justify-content:center; font-size:12.5px}

/* ── Reducerad rörelse ───────────────────────────────────────────────
   JS visar slutläget direkt; här stängs bara de pågående looparna av. */
@media (prefers-reduced-motion:reduce){
  .bd-kpi,.bd-kat,.bd-ai,.bd-steg{opacity:1; transform:none; transition:none}
  .bd-spinner,.bd-prick--puls,.bd-ai--amber.inne.pulsar{animation:none}
}