/* AI Kent – prospekteringsguide
   Levande bakgrund i mittCRM-grönt, glaspanel med en fråga i taget. */

.kent {
  --k-ink: #001a00;
  --k-deep: #003300;
  --k-brand: #066b38;
  --k-emerald: #0a8f4a;
  --k-leaf: #52bd52;
  --k-mint: #85d185;
  --k-mist: #dcf2dc;
  --k-pale: #b8e5b8;
  --k-lime: #9fdc6a;
  --k-line: rgba(220, 242, 220, 0.2);
  --k-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Helskärm: ligger direkt i <body> via content_for :takeover och täcker
     sidomeny och toppmeny. Scrollar själv om innehållet blir högre än skärmen. */
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(3.5rem, 7vh, 5rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(160deg, #004d00 0%, #002a00 55%, var(--k-ink) 100%);
  color: #fff;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
}

.kent-layout {
  margin: 0;
  background: #002a00;
}

/* Sidan bakom ska inte scrolla medan guiden är öppen */
body:has(> .kent) { overflow: hidden; }

/* ── Bakgrund ─────────────────────────────────────────────────────────── */

.kent__aurora {
  position: fixed;
  inset: -25%;
  z-index: -2;
  filter: blur(60px) saturate(160%);
}

.kent__blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.kent__blob--1 {
  width: 58%;
  left: -6%;
  top: 4%;
  background: radial-gradient(circle at 35% 35%, var(--k-emerald), transparent 66%);
  animation: kent-drift-a 48s ease-in-out infinite alternate;
}

.kent__blob--2 {
  width: 46%;
  right: -4%;
  top: -6%;
  background: radial-gradient(circle, var(--k-leaf), transparent 62%);
  opacity: 0.95;
  animation: kent-drift-b 60s ease-in-out infinite alternate;
}

.kent__blob--3 {
  width: 64%;
  left: 22%;
  bottom: -22%;
  background: radial-gradient(circle, var(--k-brand), transparent 62%);
  animation: kent-drift-c 72s ease-in-out infinite alternate;
}

.kent__blob--4 {
  width: 32%;
  left: 52%;
  top: 30%;
  background: radial-gradient(circle, var(--k-mint), transparent 60%);
  opacity: 0.75;
  animation: kent-drift-d 54s ease-in-out infinite alternate;
}

/* Vinjett och ett svagt korn ovanpå färgerna. Kornet motverkar banding i
   gradienterna men ska inte synas som pixlar på stora skärmar med låg upplösning. */
.kent::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 13, 0, 0.45) 100%);
  background-blend-mode: overlay, normal;
  opacity: 0.9;
}

@keyframes kent-drift-a {
  to { transform: translate(28%, 18%) scale(1.15); }
}
@keyframes kent-drift-b {
  to { transform: translate(-32%, 26%) scale(0.85); }
}
@keyframes kent-drift-c {
  to { transform: translate(-18%, -30%) scale(1.2); }
}
@keyframes kent-drift-d {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-60%, 40%) scale(1.3); }
  100% { transform: translate(30%, -35%) scale(0.9); }
}

/* ── Stäng ────────────────────────────────────────────────────────────── */

.kent__close {
  position: fixed;
  top: clamp(0.9rem, 2vw, 1.4rem);
  right: clamp(0.9rem, 2vw, 1.4rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.kent__close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.kent kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid currentColor;
  border-radius: 0.3rem;
  font-family: inherit;
  font-size: 0.65rem;
  line-height: 1.4;
  opacity: 0.6;
}

/* ── Rubrik ───────────────────────────────────────────────────────────── */

.kent__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  text-align: center;
}

/* Orben centreras på namnet, inte på hela hero-blocket */
.kent__brand {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
}

.kent__tagline {
  margin: 0.9rem 0 0;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(220, 242, 220, 0.7);
  transition: margin 0.6s var(--k-ease), font-size 0.6s var(--k-ease);
}

.kent.is-started .kent__tagline {
  margin-top: 0.4rem;
  font-size: 0.8rem;
}

.kent__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(3.75rem, 12vw, 8.5rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.055em;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 26, 0, 0.25), 0 4px 40px rgba(0, 26, 0, 0.55);
  transition: font-size 0.6s var(--k-ease);
}

/* ── Orb ──────────────────────────────────────────────────────────────
   Röstläges-ljus bakom titeln. Lager som byter form och snurrar i olika,
   udda takter så att rörelsen aldrig upprepar sig synligt. */

.kent__orb {
  --orb: clamp(10rem, 24vw, 15rem);
  position: absolute;
  z-index: 0;
  opacity: 0.4;
  filter: blur(14px);
  width: var(--orb);
  aspect-ratio: 1;
  pointer-events: none;
  transition: width 0.6s var(--k-ease);
}

.kent.is-started .kent__orb { --orb: clamp(6rem, 12vw, 8rem); }

.kent__orb > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: transform, border-radius;
}

.kent__orb-halo {
  inset: -35% !important;
  background: radial-gradient(circle, rgba(82, 189, 82, 0.35), rgba(10, 143, 74, 0.12) 50%, transparent 70%);
  filter: blur(24px);
  animation: kent-halo 9.5s ease-in-out infinite alternate;
}

/* Kroppen: en mörkare, mättad grön sfär som resten lyser inuti */
.kent__orb-layer--1 {
  background: radial-gradient(circle at 35% 30%, var(--k-emerald), var(--k-brand) 55%, transparent 80%);
  filter: blur(10px);
  animation:
    kent-morph-a 12.1s ease-in-out infinite,
    kent-orbit 16.4s linear infinite;
}

/* Virvlande band som snurrar åt olika håll */
.kent__orb-layer--2 {
  inset: 4%;
  background: conic-gradient(from 0deg, transparent 0 10%, var(--k-leaf) 22%, transparent 38%, var(--k-lime) 55%, transparent 70%, var(--k-mint) 85%, transparent);
  mix-blend-mode: screen;
  opacity: 0.75;
  filter: blur(9px);
  animation:
    kent-morph-b 8.8s ease-in-out infinite,
    kent-orbit 13.1s linear infinite reverse;
}

.kent__orb-layer--3 {
  inset: 10%;
  background: conic-gradient(from 140deg, transparent 0 15%, var(--k-mint) 30%, transparent 45%, var(--k-emerald) 62%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0.6;
  filter: blur(6px);
  animation:
    kent-morph-c 14.9s ease-in-out infinite,
    kent-orbit 7.0s linear infinite;
}

.kent__orb-layer--4 {
  inset: 22%;
  background: radial-gradient(circle at 40% 60%, var(--k-lime), var(--k-leaf) 45%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: blur(10px);
  animation:
    kent-morph-a 6.7s ease-in-out infinite reverse,
    kent-jitter 4.1s ease-in-out infinite alternate;
}

.kent__orb-core {
  inset: 36% !important;
  background: radial-gradient(circle, rgba(184, 229, 184, 0.35), rgba(133, 209, 133, 0.15) 45%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(8px);
  animation: kent-pulse 5.2s ease-in-out infinite;
}

/* När Kent drar igång: orben blir större och mer intensiv */
.kent.is-launching .kent__orb > span,
.kent.is-working .kent__orb > span { animation-duration: 3s, 2.4s; }
.kent.is-launching .kent__orb,
.kent.is-working .kent__orb { scale: 1.15; opacity: 0.6; transition: scale 0.8s var(--k-ease), opacity 0.8s var(--k-ease); }

@keyframes kent-morph-a {
  0%   { border-radius: 50%; scale: 1; }
  20%  { border-radius: 58% 42% 63% 37% / 45% 60% 40% 55%; scale: 1.06; }
  45%  { border-radius: 38% 62% 44% 56% / 62% 38% 58% 42%; scale: 0.94; }
  70%  { border-radius: 64% 36% 52% 48% / 40% 57% 43% 60%; scale: 1.09; }
  100% { border-radius: 50%; scale: 1; }
}
@keyframes kent-morph-b {
  0%   { border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; translate: 0 0; }
  33%  { border-radius: 62% 38% 40% 60% / 38% 62% 45% 55%; translate: 6% -4%; }
  66%  { border-radius: 40% 60% 55% 45% / 60% 40% 62% 38%; translate: -5% 5%; }
  100% { border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; translate: 0 0; }
}
@keyframes kent-morph-c {
  0%, 100% { border-radius: 50%; scale: 1; }
  25% { border-radius: 40% 60% 70% 30% / 50% 30% 70% 50%; scale: 1.12; }
  50% { border-radius: 65% 35% 45% 55% / 35% 65% 35% 65%; scale: 0.9; }
  75% { border-radius: 35% 65% 60% 40% / 60% 45% 55% 40%; scale: 1.05; }
}
@keyframes kent-orbit {
  to { rotate: 360deg; }
}
@keyframes kent-jitter {
  0%   { translate: 0 0; }
  30%  { translate: -7% 4%; }
  55%  { translate: 5% -6%; }
  80%  { translate: 3% 7%; }
  100% { translate: -4% -3%; }
}
@keyframes kent-pulse {
  0%, 100% { scale: 0.85; opacity: 0.7; }
  18% { scale: 1.1; opacity: 1; }
  34% { scale: 0.92; opacity: 0.8; }
  52% { scale: 1.18; opacity: 1; }
  76% { scale: 0.95; opacity: 0.75; }
}
@keyframes kent-halo {
  from { scale: 0.9; opacity: 0.7; }
  to   { scale: 1.15; opacity: 1; }
}

.kent.is-started .kent__title { font-size: clamp(2.25rem, 5vw, 3.25rem); }

/* ── Panel ────────────────────────────────────────────────────────────── */

.kent__panel {
  width: min(100%, 46rem);
  margin-top: clamp(1.5rem, 5vh, 3rem);
  margin-bottom: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--k-line);
  border-radius: 1.75rem;
  background: rgba(0, 26, 0, 0.42);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Stegindikator ────────────────────────────────────────────────────── */

.kent__progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.kent__progress-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(220, 242, 220, 0.55);
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
}
.kent__progress-item:disabled { cursor: default; }

.kent__progress-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 0.4s var(--k-ease);
}
.kent__progress-item.is-done .kent__progress-bar,
.kent__progress-item.is-current .kent__progress-bar { background: var(--k-mint); }
.kent__progress-item.is-current { color: #fff; font-weight: 600; }
.kent__progress-item:not(:disabled):not(.is-current):hover { color: #fff; }

/* ── Steg ─────────────────────────────────────────────────────────────── */

.kent__step.is-active { animation: kent-step-forward 0.45s var(--k-ease); }
.kent[data-direction="backward"] .kent__step.is-active { animation-name: kent-step-backward; }

@keyframes kent-step-forward {
  from { opacity: 0; transform: translateX(24px); }
}
@keyframes kent-step-backward {
  from { opacity: 0; transform: translateX(-24px); }
}

.kent__question {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.kent__hint {
  margin: 0.5rem 0 1.4rem;
  max-width: 58ch;
  color: rgba(220, 242, 220, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
}

.kent__label {
  display: block;
  margin: 1.4rem 0 0.6rem;
  color: var(--k-mist);
  font-size: 0.85rem;
  font-weight: 600;
}
.kent__hint + .kent__label { margin-top: 0; }

.kent__optional {
  margin-left: 0.35rem;
  color: rgba(220, 242, 220, 0.55);
  font-weight: 400;
}

/* ── Fält ─────────────────────────────────────────────────────────────── */

.kent .kent__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.85rem 1.05rem;
  border: 1px solid rgba(220, 242, 220, 0.24);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  color: #fff;
  caret-color: var(--k-mint);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.kent .kent__input::placeholder { color: rgba(255, 255, 255, 0.42); }
.kent .kent__input:focus {
  outline: none;
  border-color: var(--k-mint);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(133, 209, 133, 0.22);
}
.kent .kent__input--lg { padding: 1.05rem 1.2rem; font-size: 1.25rem; }
.kent .kent__input--brief { min-height: 15rem; font-size: 0.92rem; line-height: 1.6; resize: vertical; }
.kent textarea.kent__input { resize: vertical; }

.kent.has-error .kent__step.is-active [data-kent-required] {
  border-color: #ffb4a8;
  box-shadow: 0 0 0 4px rgba(255, 180, 168, 0.2);
}

/* ── Chips ────────────────────────────────────────────────────────────── */

.kent__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kent__chips--suggest { margin-top: 1rem; }

.kent__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(220, 242, 220, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.kent__chip:hover { background: rgba(255, 255, 255, 0.12); }
.kent__chip:active { transform: scale(0.96); }

.kent__chip[aria-pressed="true"] {
  border-color: var(--k-mist);
  background: var(--k-mist);
  color: var(--k-deep);
  font-weight: 600;
}
.kent__chip[aria-pressed="true"]::before {
  content: "";
  width: 0.7rem;
  height: 0.4rem;
  margin-top: -0.2rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.kent__chip--ghost {
  border-style: dashed;
  color: rgba(220, 242, 220, 0.85);
}

/* ── Brief ────────────────────────────────────────────────────────────── */

.kent__brief-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kent__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--k-mint);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.kent__meta {
  margin: 0.8rem 0 0;
  color: rgba(220, 242, 220, 0.7);
  font-size: 0.82rem;
  line-height: 1.5;
}
.kent__meta strong { color: #fff; }

/* ── Knappar ──────────────────────────────────────────────────────────── */

.kent__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.kent__error {
  flex: 1;
  margin: 0;
  color: #ffc9bf;
  font-size: 0.85rem;
}

.kent__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.kent__btn[hidden] { display: none; }
.kent__btn:active { transform: scale(0.97); }

.kent__btn--ghost {
  border-color: rgba(220, 242, 220, 0.3);
  background: transparent;
  color: #fff;
}
.kent__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

.kent__btn--next { background: #fff; color: var(--k-deep); }
.kent__btn--next:hover { background: var(--k-mist); }

.kent__btn--go {
  padding: 0.9rem 1.6rem;
  background: linear-gradient(135deg, var(--k-mint), var(--k-leaf));
  color: var(--k-ink);
  font-weight: 700;
  box-shadow: 0 14px 40px -12px rgba(82, 189, 82, 0.85);
}
.kent__btn--go:hover { box-shadow: 0 18px 50px -10px rgba(133, 209, 133, 0.95); }

.kent :focus-visible {
  outline: 2px solid var(--k-mint);
  outline-offset: 3px;
}

/* ── Sökvyn (runs#live) ───────────────────────────────────────────────── */

.kent a.kent__btn { text-decoration: none; }

/* Samma bredd som guiden, så att panelen inte krymper när sökningen startar */
.kent__panel--live {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 20rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.kent__panel--live .kent__hint { margin-inline: auto; }

.kent__eyebrow {
  margin: 0 0 0.4rem;
  color: var(--k-mint);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kent__status { margin-top: 0.4rem; }

.kent__status-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: rgba(220, 242, 220, 0.8);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.kent__bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.kent__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--k-leaf), var(--k-mint));
  transition: width 0.8s var(--k-ease);
}
/* Ett mjukt ljus som glider över stapeln medan Kent arbetar */
.kent.is-working .kent__bar > span {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) 0 0 / 40% 100% no-repeat,
    linear-gradient(90deg, var(--k-leaf), var(--k-mint));
  animation: kent-bar-glint 1.8s ease-in-out infinite;
}
@keyframes kent-bar-glint {
  from { background-position: -40% 0, 0 0; }
  to   { background-position: 140% 0, 0 0; }
}

.kent__update {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.55rem;
  margin: 1.4rem 0 0;
  color: #fff;
  font-size: 0.95rem;
  animation: kent-arrive 0.5s var(--k-ease);
}
.kent__update i { color: var(--k-mint); font-size: 0.8rem; }

.kent__found-count {
  margin: 0.35rem 0 0;
  color: rgba(220, 242, 220, 0.6);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

@keyframes kent-arrive {
  from { opacity: 0; transform: translateY(6px); }
}

.kent--live .kent__footer { justify-content: center; }
.kent__link--muted { color: rgba(220, 242, 220, 0.6); }
.kent__link--muted:hover { color: #fff; }

/* ── Mobil och rörelse ────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .kent__progress-label { display: none; }
  .kent__progress-item.is-current .kent__progress-label { display: block; white-space: nowrap; }
  .kent__footer { flex-wrap: wrap; }
  .kent__error { flex-basis: 100%; }
  .kent__btn--next, .kent__btn--go { margin-left: auto; }
  .kent__btn kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kent__blob,
  .kent__orb > span,
  .kent__step.is-active,
  .kent__update,
  .kent.is-working .kent__bar > span { animation: none; }
  .kent__title,
  .kent__tagline { transition: none; }
}