/* ─────────────────────────────────────────────────────────────────────
 * Corevo — sektionen "Händelser i realtid" (3D-scen + lista)
 *
 * Allt hämtas ur Tesla-tokens i corevo-marketing.html. Inga nya hex.
 * Sektionen är mörk (Carbon Dark) eftersom scenen är mörk — det är
 * sidans enda mörka kapitel efter heron, och det ger scenen luft.
 * ──────────────────────────────────────────────────────────────────── */

.flow {
  position: relative;
  background: var(--fg);
  color: var(--bg);
  padding-block: var(--section-y-desktop);
  overflow: hidden;
}

.flow-head {
  display: grid;
  gap: var(--space-3);
  max-width: 58ch;
  margin-bottom: var(--space-12);
}
.flow-head h2 { color: var(--bg); }
.flow-head .offer-eyebrow { color: rgba(255, 255, 255, 0.62); }
.flow-head p { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.82); }

.flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

/* ── Scenen ─────────────────────────────────────────────────────── */
.flow-stage {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.flow-canvas-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--fg);
  aspect-ratio: 16 / 11;
}
.flow-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Bildtexten står UNDER scenen, inte ovanpå den: ett överlägg mitt i
   ringen skulle täcka just det den beskriver. */
.flow-stage figcaption {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.62);
  max-width: 60ch;
}

/* Utan WebGL: scenen faller bort och sektionen blir en ren lista. */
.flow[data-gl="off"] .flow-stage { display: none; }
.flow[data-gl="off"] .flow-grid { grid-template-columns: minmax(0, 640px); }

/* ── Enhetsväljare ──────────────────────────────────────────────── */
.flow-side { display: grid; gap: var(--space-5); }

.flow-chips-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
.flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.flow-chips button {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font: 500 var(--text-base)/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard);
}
.flow-chips button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.58);
  color: var(--bg);
}
.flow-chips button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.flow-chips button[aria-pressed="true"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}
.flow-chips button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.flow-status { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.62); }

/* ── Händelselistan ─────────────────────────────────────────────── */
/* Listan reserverar sin fulla höjd från start så sidan inte hoppar när
   händelser landar — men ytan är tom, inte en grå platta. */
.flow-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-content: start;
  min-height: 400px;
}
.flow-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.flow-row.is-in { opacity: 1; transform: none; }
.flow-row-time {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.52);
  font-variant-numeric: tabular-nums;
}
.flow-row-main { display: grid; gap: 2px; min-width: 0; }
.flow-row-main b { font-weight: 500; color: var(--bg); }
.flow-row-main span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-row-detail {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.flow-list:not(:empty) + 
.flow-foot {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.52);
}
.flow-foot a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  transition: color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.flow-foot a:hover { color: var(--bg); box-shadow: inset 0 -1px 0 var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .flow-row { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1024px) {
  .flow { padding-block: var(--section-y-tablet); }
  .flow-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .flow-canvas-wrap { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .flow { padding-block: var(--section-y-phone); }
  .flow-canvas-wrap { aspect-ratio: 1 / 1; }
  .flow-row { grid-template-columns: 48px minmax(0, 1fr); }
  .flow-row-detail { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════════
 * Hero — entrén. Namnkort som följer produkterna i 3D.
 * ═══════════════════════════════════════════════════════════════ */
.hero-figure { display: none; }
.hero[data-gl="off"] .hero-figure { display: flex; }
.hero[data-gl="off"] .hero-cards, .hero[data-gl="off"] .hero-hint { display: none; }
.hero-cards { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-card {
  position: absolute; left: 0; top: 0;
  display: grid; gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(23, 26, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bg);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  translate: 0 8px;
  transition: opacity var(--motion-base) var(--ease-standard),
    translate var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard);
  pointer-events: auto;
}
.hero-card.is-in { opacity: calc(1 - var(--hero-leave, 0) * 1.6); translate: 0 calc(var(--hero-leave, 0) * -24px); }
.hero-card b { font-weight: 500; font-size: var(--text-base); }
.hero-card span { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.72); }
.hero-card:hover { background: rgba(23, 26, 32, 0.92); border-color: rgba(255, 255, 255, 0.6); }
.hero-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hero-hint {
  position: absolute; left: 0; right: 0; bottom: var(--space-8);
  z-index: 2; margin: 0; text-align: center;
  font-size: var(--text-sm); color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
@media (max-width: 1024px) {
  .hero-inner { grid-template-areas: "copy" "actions" "figure"; min-height: 0; padding-bottom: 46vh; }
  .hero-card { display: none; }
  .hero-hint { bottom: var(--space-12); }
}
@media (max-width: 767px) {
  .hero-hint { display: none; }
  .hero-inner { padding-bottom: 42vh; }
}

/* ═══════════════════════════════════════════════════════════════════
 * Simuleringar (AI-kyl, parfymautomat): scen + kontrollpanel
 * ═══════════════════════════════════════════════════════════════ */
.offer-media.sim {
  width: 100%;
  min-width: 0;
  margin: 0;
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.sim-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.sim-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.sim-fallback { display: none; place-items: center; height: 100%; padding: var(--space-6); }
.sim-fallback img { max-height: 100%; width: auto; }
.offer[data-gl="off"] .sim-stage canvas { display: none; }
.offer[data-gl="off"] .sim-fallback { display: grid; }
.offer[data-gl="off"] .sim-panel { display: none; }
.offer[data-gl="off"] .offer-media figcaption { display: none; }

.sim-panel { display: grid; gap: var(--space-4); }
.sim-status { margin: 0; min-height: 40px; font-size: var(--text-base); color: var(--fg); }
.sim-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); counter-reset: step; }
.sim-steps li { display: contents; }
.sim-steps .btn { min-width: 0; width: auto; padding-inline: var(--space-5); }
.sim-steps .btn:disabled { opacity: 0.38; cursor: default; }
.sim-steps li.is-done .btn-secondary { color: var(--muted); }
.sim-steps li.is-now .btn-secondary { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.sim-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: var(--space-2);
}
.sim-pick[hidden] { display: none; }
.sim-pick button {
  display: grid; justify-items: center; gap: 2px;
  padding: var(--space-2);
  min-height: 44px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: 500 var(--text-sm)/1.2 var(--font-body);
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard);
}
.sim-pick button img { width: 44px; height: 44px; object-fit: contain; }
.sim-pick button small { color: var(--muted); font-weight: 400; }
.sim-pick button:hover { border-color: var(--fg); background: var(--surface); }
.sim-pick button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sim-pick button:disabled { opacity: 0.35; cursor: default; }

.sim-cart { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; border-radius: var(--radius-sm); overflow: hidden; }
.sim-cart[hidden] { display: none; }
.sim-cart li { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--surface); font-size: var(--text-sm); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sim-cart li.sum { font-weight: 500; color: var(--fg); }

.sim-scents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.sim-scents button {
  display: grid; gap: 2px; text-align: left;
  padding: var(--space-2) var(--space-3);
  min-height: 52px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--text-sm)/1.25 var(--font-body);
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}
.sim-scents button b { font-weight: 500; font-size: var(--text-base); }
.sim-scents button span { color: var(--muted); }
.sim-scents button:hover { border-color: var(--fg); background: var(--surface); }
.sim-scents button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.sim-scents button[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.78); }
.sim-scents button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sim-scents button:disabled:not([aria-pressed="true"]) { opacity: 0.4; cursor: default; }

/* CTA:n tänds först när simuleringen är klar — då är frågan naturlig. */
.sim-cta {
  display: grid; gap: var(--space-3); justify-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--fg);
  color: var(--bg);
  opacity: 0; translate: 0 8px; pointer-events: none; height: 0; padding-block: 0; overflow: hidden;
  transition: opacity var(--motion-base) var(--ease-standard), translate var(--motion-base) var(--ease-standard);
}
.sim-cta.is-in { opacity: 1; translate: 0 0; pointer-events: auto; height: auto; padding-block: var(--space-4); }
.sim-cta p { margin: 0; font-size: var(--text-base); color: rgba(255, 255, 255, 0.86); max-width: 40ch; }

@media (max-width: 767px) {
  .sim-stage { aspect-ratio: 1 / 1; }
  .sim-scents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-steps .btn { flex: 1 1 100%; }
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card, .sim-cta { transition: none; }
}

/* ── Scen-entré ────────────────────────────────────────────────────────
   Varje 3D-scen (kyl, parfym, flöde, trappa) anländer med samma rörelse
   som produkterna i heron: lyfts ur "golvet" med en svag skala, i sidans
   egen kurva. Klassen sätts av gl-core när scenen först blir synlig. */
.sim-stage, .flow-canvas-wrap, .process-stage {
  opacity: 0;
  translate: 0 28px;
  scale: 0.97;
  transition: opacity 600ms var(--ease-standard), translate 600ms var(--ease-standard), scale 600ms var(--ease-standard);
}
.sim-stage.gl-in, .flow-canvas-wrap.gl-in, .process-stage.gl-in { opacity: 1; translate: 0 0; scale: 1; }
[data-gl="off"] .sim-stage, [data-gl="off"] .flow-canvas-wrap, [data-gl="off"] .process-stage { opacity: 1; translate: 0 0; scale: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sim-stage, .flow-canvas-wrap, .process-stage { opacity: 1; translate: 0 0; scale: 1; transition: none; }
}

/* Telefonfältet i kontaktformuläret. */
.field label small { font-weight: 400; color: var(--muted); margin-left: var(--space-1); }

/* ═══════════════════════════════════════════════════════════════════
 * Mini-scener: "Har du en idé" och Zentum
 *
 * Mindre än simuleringarna (de är stöd till texten, inte huvudnumret),
 * men samma grepp: canvas + flikar + en statusrad som säger vad man
 * ser. Utan WebGL faller de tillbaka på typografifiguren som stod här
 * innan — sektionen blir aldrig tom.
 * ═══════════════════════════════════════════════════════════════ */
.mini-stage {
  margin: 0;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}
.mini-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0f1216;
  opacity: 0;
  scale: 0.985;
  transition: opacity var(--motion-base) var(--ease-standard), scale var(--motion-base) var(--ease-standard);
}
.mini-canvas-wrap.gl-in { opacity: 1; scale: 1; }
.mini-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
/* Zentum-scenen har ljus bakgrund — matcha ramen så kanten inte lyser. */
#gl-zentum { background: var(--surface); }
.mini-stage:has(#gl-zentum) .mini-canvas-wrap { background: var(--surface); }

/* Modulnamnen i idéscenen ligger i DOM ovanpå canvas: skarp text och
   läsbar för skärmläsare, i stället för text ritad i WebGL. */
.idea-labels { position: absolute; inset: 0; pointer-events: none; }
.idea-label {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -140%;
  font: 500 var(--text-sm) / 1 var(--font-body);
  color: var(--bg);
  background: rgba(23, 26, 32, 0.72);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-standard);
}

.mini-fallback { display: none; }
.offer[data-gl="off"] .mini-canvas-wrap,
.offer[data-gl="off"] .mini-tabs,
.offer[data-gl="off"] .mini-stage figcaption { display: none; }
.offer[data-gl="off"] .mini-fallback { display: block; }

.mini-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mini-tabs button {
  font: 500 var(--text-sm) / 1.2 var(--font-body);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard),
              background-color var(--motion-base) var(--ease-standard);
}
.mini-tabs button:hover { color: var(--fg); border-color: var(--border); }
.mini-tabs button[aria-pressed="true"] {
  color: var(--accent-on);
  background: var(--accent);
  border-color: var(--accent);
}
.mini-tabs button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mini-stage figcaption {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--muted);
  min-height: 2.6em;
  text-align: left;
}
@media (max-width: 767px) {
  .mini-canvas-wrap { aspect-ratio: 1 / 1; }
}