/* "Give it the whole iceberg" demo.
   Drawn like the iceberg figure in this post (inline-1.svg): cream sky, navy
   sea, a white tip and a blue mass. Like that figure it keeps its own palette
   in both themes. The agent's plan sits above the waterline; enterprise
   context sits in the mass.

   Two radio inputs hold the state, so it works without JavaScript; everything
   after them reacts through `#wl-ent:checked ~ *`.

   The reveal plays one cause at a time: fact 1 clears in the mass, then the
   step it changes; fact 2, then the two steps it cancels, each saying why;
   fact 3, then its step. Each piece carries its start time in `--wl-at`, and only the
   transitions on the enterprise state use it. Going back uses the plain,
   quicker ones, so everything resets at once. */

.wl-demo {
  --wl-sky: #f3efe8;
  --wl-sea: #1f4f70;
  --wl-mass: #3d7598;
  --wl-ice: #d9e6ee;
  --wl-ink: #1f4f70;
  --wl-muted: #4a5a66;
  --wl-no: #a8473e;
  --wl-yes: #2b7258;
  background: var(--wl-sky);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  color: #1b1d21;
  margin: var(--space-6) auto;
  max-width: 42rem;
  overflow: hidden;
  position: relative;
}

.wl-demo__state {
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

/* ─── Controls ─────────────────────────────────────────────── */

.wl-controls {
  display: flex;
  justify-content: center;
  padding: 0.85rem 1rem 0.25rem;
}

/* one pill holding two buttons. Team context alone: its half is filled.
   Add enterprise context: the pill's outline turns navy and wraps both, team
   context's half stays outlined and enterprise context's half fills, so it
   reads as one "team + enterprise" button. Choosing team context again drops
   enterprise context and fills team context. */
.wl-switch {
  background: #ffffff;
  border: 2px solid rgba(31, 79, 112, 0.18);
  border-radius: var(--radius-pill);
  display: inline-flex;
  overflow: hidden;
  transition: border-color 180ms ease;
}

/* button grammar from .app-card__cta */
.wl-switch label {
  align-items: center;
  border-radius: var(--radius-pill);
  color: var(--wl-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 600;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.7rem 1.1rem;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.wl-switch label:hover {
  color: var(--wl-ink);
}

#wl-team:checked ~ .wl-controls label[for="wl-team"],
#wl-ent:checked ~ .wl-controls label[for="wl-ent"] {
  background: var(--wl-sea);
  color: #ffffff;
}

#wl-ent:checked ~ .wl-controls .wl-switch {
  border-color: var(--wl-sea);
}

#wl-ent:checked ~ .wl-controls label[for="wl-team"] {
  color: var(--wl-sea);
}

#wl-team:focus-visible ~ .wl-controls label[for="wl-team"],
#wl-ent:focus-visible ~ .wl-controls label[for="wl-ent"] {
  outline: 2px solid var(--wl-sea);
  outline-offset: -4px;
}

/* ─── Sky: the agent's plan, above the waterline ───────────── */

.wl-sky {
  padding: 0.75rem 1rem 0.75rem;
  position: relative;
}

.wl-sky__label {
  color: var(--wl-ink);
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* a 2 × 2 grid, read in the order the facts arrive: 1, 2, 2, 3.
   Positioned so the steps paint over the tip, which sits under them. */
.wl-plan {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.5rem auto 0;
  max-width: 34rem;
  position: relative;
  z-index: 1;
}

.wl-step--check { grid-area: 1 / 1; }
.wl-step--table { grid-area: 1 / 2; }
.wl-step--upload { grid-area: 2 / 1; }
.wl-step--nightly { grid-area: 2 / 2; }

/* the reveal's timeline: a step changes every 1250ms, each 450ms after
   the fact behind it clears (both ② steps share one fact) */
.wl-fact--1 { --wl-at: 0ms; }
.wl-step--check { --wl-at: 450ms; }
.wl-fact--2 { --wl-at: 1250ms; }
.wl-step--table { --wl-at: 1700ms; }
.wl-step--upload { --wl-at: 2950ms; }
.wl-fact--3 { --wl-at: 3750ms; }
.wl-step--nightly { --wl-at: 4200ms; }
.wl-caption { --wl-at: 4450ms; }

/* see-through, so the tip shows behind the steps it holds up */
.wl-step {
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 79, 112, 0.18);
  border-radius: 0.7rem;
  column-gap: 0.6rem;
  display: grid;
  font-size: 0.92rem;
  grid-template-columns: 1.2rem 1fr;
  line-height: 1.3;
  padding: 0.45rem 0.75rem;
  transition: border-color 300ms ease;
}

.wl-step__icon {
  color: var(--wl-ink);
  display: grid;
  font-weight: 700;
  justify-items: center;
}

/* what a step used to say, struck through above what it says now */
.wl-was {
  color: var(--wl-muted);
  display: block;
  font-size: 0.78rem;
  text-decoration: line-through;
}

/* numbers that tie each fact in the mass to the steps it changes */
.wl-badge {
  align-items: center;
  background: var(--wl-yes);
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  height: 1.2rem;
  justify-content: center;
  letter-spacing: 0;
  width: 1.2rem;
}

/* two versions of a line, stacked in one cell and cross-faded;
   visibility keeps the hidden one out of the accessibility tree */
.wl-swap {
  align-items: center;
  display: grid;
}

.wl-swap > span {
  grid-area: 1 / 1;
  transition:
    opacity 400ms ease,
    visibility 0s;
}

.wl-swap__ent {
  opacity: 0;
  visibility: hidden;
}

#wl-ent:checked ~ * .wl-swap__team {
  opacity: 0;
  transition:
    opacity 400ms ease var(--wl-at, 0ms),
    visibility 0s calc(var(--wl-at, 0ms) + 400ms);
  visibility: hidden;
}

#wl-ent:checked ~ * .wl-swap__ent {
  opacity: 1;
  transition:
    opacity 400ms ease var(--wl-at, 0ms),
    visibility 0s var(--wl-at, 0ms);
  visibility: visible;
}

/* steps the agent keeps, changed by what it now knows */
#wl-ent:checked ~ * .wl-step--keep {
  border-color: var(--wl-yes);
  transition: border-color 300ms ease var(--wl-at);
}

/* steps it cancels: struck through in red, with the reason underneath */
#wl-ent:checked ~ * .wl-step--drop {
  border-color: var(--wl-no);
  border-style: dashed;
  transition: border-color 300ms ease var(--wl-at);
}

.wl-badge--no {
  background: var(--wl-no);
}

.wl-why {
  color: var(--wl-no);
  display: block;
  font-size: 0.8rem;
}

/* the tip sits on the waterline behind the plan, so the steps rest on it
   just above the water. Out of flow, it adds no height. Its base matches
   the top of the mass. */
.wl-tip {
  bottom: 0;
  height: auto;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 20%;
}

/* ─── Sea: enterprise context, in the mass below the waterline ─ */

.wl-sea {
  background: var(--wl-sea);
  border-top: 2px dashed var(--wl-ice);
  position: relative;
}

.wl-sea__label {
  color: var(--wl-ice);
  font-size: 0.8rem;
  left: 1rem;
  position: absolute;
  top: 0.5rem;
}

.wl-mass {
  background: var(--wl-mass);
  clip-path: polygon(40% 0, 60% 0, 75% 8%, 87% 27%, 88% 62%, 75% 85%, 50% 100%, 25% 85%, 12% 62%, 13% 27%, 25% 8%);
  color: #ffffff;
  display: grid;
  gap: 0.85rem;
  padding: 2.6rem 22% 4rem;
  text-align: center;
}

.wl-mass__label {
  color: var(--wl-ice);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wl-fact {
  display: block;
  filter: blur(4px);
  font-weight: 600;
  line-height: 1.3;
  opacity: 0.35;
  transition:
    filter 300ms ease,
    opacity 300ms ease;
}

.wl-fact__tag {
  align-items: center;
  color: var(--wl-ice);
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.4rem;
  justify-content: center;
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
  text-transform: uppercase;
}

.wl-fact .wl-badge {
  background: var(--wl-ice);
  color: var(--wl-sea);
}

#wl-ent:checked ~ * .wl-fact {
  filter: none;
  opacity: 1;
  transition:
    filter 600ms ease var(--wl-at),
    opacity 600ms ease var(--wl-at);
}

/* ─── Caption ──────────────────────────────────────────────── */

.wl-caption {
  color: var(--wl-muted);
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  text-align: center;
}

/* phones: labels share the row and may wrap inside their pill */
@media (max-width: 30rem) {
  .wl-switch {
    width: 100%;
  }

  .wl-switch label {
    flex: 1 1 0;
    line-height: 1.2;
    padding: 0.6rem 0.75rem;
    text-align: center;
  }

  .wl-sea__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-demo *,
  .wl-demo *::before,
  .wl-demo *::after {
    transition: none !important;
  }
}