/* Intent Flow widget.
   Light card. Three-stage horizontal flow (INTENT → TRANSLATE → PLACE)
   that dramatizes Amalgamy's runtime behavior. Each stage crossfades
   through 3 matched cycles over a 9s loop. A compliance-gate pill
   fires between stages 2 and 3; on the third cycle the gate reads
   BLOCKED and Stage 3's placement cell stays empty, selling the
   "compliance is a gate, not a review" claim.

   Matches the vocabulary of stage-path + sovereign-enclave +
   workforce-pipeline: white card, tinted inner panel, mono labels,
   brand teal accents, soft shadow stack. CSS-only. */

.widget-intent-flow {
  --wif-teal: var(--brand-teal);
  --wif-blue: var(--brand-blue);
  --wif-surface: var(--color-card, #fff);
  --wif-fg: var(--color-foreground);
  --wif-muted: var(--color-muted-foreground);
  --wif-line: var(--color-border);
  --wif-panel: color-mix(in oklch, var(--wif-fg) 3%, var(--wif-surface));
  --wif-cycle: 9s; /* overridden per-instance inline */

  --wif-gate-passed: var(--wif-teal);
  /* Warm red for the blocked state. Uses oklch mix against brand
     tokens to stay on palette. */
  --wif-gate-blocked: oklch(0.62 0.19 24);

  min-width: 0;
  width: 100%;
}

.widget-intent-flow__card {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  padding: 0.875rem 0.875rem 0.75rem;
  background: var(--wif-surface);
  border: 1px solid var(--wif-line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgb(16 17 20 / 4%),
    0 10px 28px -14px rgb(16 17 20 / 14%),
    0 22px 48px -24px rgb(16 17 20 / 10%);
  color: var(--wif-fg);
  --color-foreground: var(--wif-fg);
  --color-muted-foreground: var(--wif-muted);
  --color-border: var(--wif-line);
}

/* --- Head row ----------------------------------------------------- */

.widget-intent-flow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.125rem 0.25rem;
}

.widget-intent-flow__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wif-fg);
}

.widget-intent-flow__tag-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--wif-teal);
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--wif-teal) 35%, var(--wif-surface)),
    0 0 10px color-mix(in oklch, var(--wif-teal) 45%, transparent);
  animation: wif-tag-breathe 2.6s ease-in-out infinite;
}

.widget-intent-flow__status {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wif-muted);
}

/* --- Stage layout -------------------------------------------------
   Vertical flow: INTENT → TRANSLATE → PLACE stacked top-to-bottom so
   each stage gets the widget's full horizontal width. Horizontal
   three-column layout squeezed the TRANSLATE tokens and the PLACE
   silicon node into ellipses; going vertical solves that without
   having to shorten copy. Arrows between stages rotate 90° CW to
   point down. */

.widget-intent-flow__stage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.125rem 1.25rem;
  background: var(--wif-panel);
  border: 1px solid color-mix(in oklch, var(--wif-fg) 9%, transparent);
  border-radius: var(--radius-md);
}

/* Each column is a logical chamber. No outer card — content cards
   below (intent quote, constraint tokens, place node) already carry
   the visual weight; wrapping those in another card burned horizontal
   space so content truncated. The label row + content sit on the
   tinted stage panel directly; vertical rhythm + the arrows between
   columns are what separate the stages. */
.widget-intent-flow__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.widget-intent-flow__col-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--wif-teal) 55%, var(--wif-muted));
}

/* Arrows hidden. The vertical stack + stage labels already carry
   the "flow" reading; the ↓ glyphs were adding clutter. Markup is
   left in the PHP so the keyframes + element are available if we
   want to reintroduce arrows later. */
.widget-intent-flow__arrow {
  display: none;
}

/* --- Frames (per-cycle crossfades) -------------------------------
   Each stage has a `__frames` wrapper containing 3 absolutely-
   positioned cycle frames. At any given moment one frame is visible;
   the others are hidden. Delays derive from --i (0, 1, 2) so frame i
   holds during cycle i of the overall loop. */

.widget-intent-flow__frames {
  position: relative;
}

/* Per-stage heights: INTENT and PLACE are single-line chips;
   TRANSLATE stacks three constraint tokens so needs more vertical
   room. Setting these explicitly (instead of a shared min-height)
   keeps the vertical flow compact on INTENT and PLACE while the
   constraint stage stays comfortable. */
.widget-intent-flow__frames--intent,
.widget-intent-flow__frames--place {
  min-height: 2.75rem;
}

.widget-intent-flow__frames--constraints {
  min-height: 5.5rem;
}

.widget-intent-flow__intent-frame,
.widget-intent-flow__constraints-frame,
.widget-intent-flow__place-frame,
.widget-intent-flow__gate-frame {
  position: absolute;
  opacity: 0;
  animation: wif-frame-fade var(--wif-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wif-cycle));
}

/* Intent / constraints / place frames stretch to fill their chamber.
   Gate frames set their own position rule (top, left) since they sit
   on a narrower pill, not a full-width card. */
.widget-intent-flow__intent-frame,
.widget-intent-flow__constraints-frame,
.widget-intent-flow__place-frame {
  inset: 0;
}

@keyframes wif-frame-fade {
  /* 33.33% of cycle per frame. 4% fade-in, 24% hold, 5% fade-out,
     rest hidden. Same window shape as sovereign-enclave + stage-path
     so the site's motion language stays coherent. */
  0%     { opacity: 0; transform: translateY(3px); }
  4%     { opacity: 1; transform: translateY(0); }
  28%    { opacity: 1; transform: translateY(0); }
  33.33% { opacity: 0; transform: translateY(-3px); }
  100%   { opacity: 0; transform: translateY(-3px); }
}

/* --- Stage 1: INTENT (typed quote) -------------------------------- */

.widget-intent-flow__intent-frame {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3125rem;
  padding: 0.875rem 1rem;
  /* srgb interpolation for teal + white (or teal + near-neutral
     line) — oklch drifts the hue to ~340° (magenta) when one side
     is achromatic. See .gate-frame--passed for the gate-chip case. */
  background: color-mix(in srgb, var(--wif-teal) 3%, var(--wif-surface));
  border: 1px solid color-mix(in srgb, var(--wif-teal) 16%, var(--wif-line));
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--wif-fg);
}

.widget-intent-flow__intent-quote {
  color: color-mix(in oklch, var(--wif-teal) 85%, var(--wif-fg));
  letter-spacing: -0.005em;
}

.widget-intent-flow__intent-caret {
  display: inline-block;
  width: 2px;
  height: 1.0625rem;
  background: var(--wif-teal);
  margin-left: 0.1875rem;
  animation: wif-caret-blink 1s steps(2, jump-none) infinite;
}

@keyframes wif-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Stage 2: TRANSLATE (constraint tokens) ---------------------- */

.widget-intent-flow__constraints-frame {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.widget-intent-flow__constraint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: -0.005em;
  padding: 0.3125rem 0.5625rem;
  background: color-mix(in srgb, var(--wif-teal) 4%, var(--wif-surface));
  border: 1px solid color-mix(in srgb, var(--wif-teal) 22%, var(--wif-line));
  border-radius: var(--radius-sm);
  color: var(--wif-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Stagger the three tokens within a frame so they "type in" one
     at a time. Each token delays additionally by 0.15s × its --k. */
  opacity: 0;
  animation: wif-token-pop var(--wif-cycle) ease-out infinite;
  animation-delay: calc(
    (var(--i) / 3) * var(--wif-cycle)
    + (var(--k, 0) * 0.15s)
  );
}

@keyframes wif-token-pop {
  /* Each token: quick slide-in right at the start of its frame's
     visible window, then hold with the frame. */
  0%     { opacity: 0; transform: translateX(-4px); }
  5%     { opacity: 1; transform: translateX(0); }
  28%    { opacity: 1; transform: translateX(0); }
  33.33% { opacity: 0; transform: translateX(4px); }
  100%   { opacity: 0; }
}

/* --- Compliance gate pill (sits beneath Stage 2) ----------------- */

/* Gate pill sits below the constraint tokens and above the PLACE
   row ("compliance gate decides whether placement happens"). Chip
   is left-aligned so it reads as a stamped verdict on the
   constraints above it, not a floating centered badge. Uses grid
   stacking so all 3 gate-frames occupy the same cell — the first
   frame's natural height drives the container, so whichever chip is
   currently visible contributes its full height to layout. No
   absolute positioning, no overlap with the PLACE row below. */
.widget-intent-flow__gate {
  display: grid;
  grid-template-columns: min-content;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px dashed color-mix(in oklch, var(--wif-fg) 10%, transparent);
}

.widget-intent-flow__gate-frame {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.6875rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Grid-stacked: all 3 chips share cell row 1 / column 1 so they
   overlap in-flow (each chip contributes its natural height to the
   container — unlike absolute positioning, which silently lets the
   chip escape the parent and overlap the next row). */
.widget-intent-flow__gate .widget-intent-flow__gate-frame {
  grid-row: 1;
  grid-column: 1;
  position: static;
}

/* Mix tinted backgrounds against `transparent`, NOT against the
   white surface. `color-mix(in oklch, <teal>, white)` hits a
   well-known oklch bug where white's undefined hue causes the
   interpolated hue to wander — in Chrome it lands on ~342° (pink)
   for teal-teal inputs, which makes the PASSED chip read red. Mixing
   against transparent produces a clean semi-transparent tint that
   the white stage panel shows through naturally. Same pattern as
   the stage-map number pills. */
.widget-intent-flow__gate-frame--passed {
  background: color-mix(in oklch, var(--wif-gate-passed) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--wif-gate-passed) 30%, transparent);
  color: var(--wif-gate-passed);
}

.widget-intent-flow__gate-frame--blocked {
  background: color-mix(in oklch, var(--wif-gate-blocked) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--wif-gate-blocked) 35%, transparent);
  color: var(--wif-gate-blocked);
}

.widget-intent-flow__gate-dot {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

/* --- Stage 3: PLACE (silicon node or blocked) -------------------- */

.widget-intent-flow__place-frame {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: color-mix(in srgb, var(--wif-teal) 3%, var(--wif-surface));
  border: 1px solid color-mix(in srgb, var(--wif-teal) 20%, var(--wif-line));
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--wif-fg);
  white-space: nowrap;
  overflow: hidden;
}

.widget-intent-flow__place-frame--empty {
  background: color-mix(in srgb, var(--wif-gate-blocked) 5%, var(--wif-surface));
  border-color: color-mix(in srgb, var(--wif-gate-blocked) 28%, var(--wif-line));
  color: var(--wif-gate-blocked);
  justify-content: center;
}

.widget-intent-flow__place-node {
  color: color-mix(in oklch, var(--wif-teal) 85%, var(--wif-fg));
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-intent-flow__place-check {
  color: var(--wif-teal);
  font-size: 1rem;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

.widget-intent-flow__place-empty {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

/* Arrow pulse mirrors the frame window so the flow reads as
   "moving forward" rather than static. `rotate(90deg)` has to live
   inside every keyframe because CSS animations override non-animated
   transforms — without it, the base rotation is discarded and the
   arrow reads horizontal even after vertical-flow layout kicks in.
   `translateX(2px)` after the rotation nudges along the arrow's
   new local X axis (visually down), which is the push direction
   we want. */
@keyframes wif-arrow-pulse {
  0%     { color: color-mix(in oklch, var(--wif-teal) 30%, var(--wif-muted)); transform: rotate(90deg) translateX(0); }
  10%    { color: var(--wif-teal); transform: rotate(90deg) translateX(2px); }
  22%    { color: var(--wif-teal); transform: rotate(90deg) translateX(0); }
  33.33% { color: color-mix(in oklch, var(--wif-teal) 30%, var(--wif-muted)); transform: rotate(90deg) translateX(0); }
  100%   { color: color-mix(in oklch, var(--wif-teal) 30%, var(--wif-muted)); transform: rotate(90deg) translateX(0); }
}

/* --- Meter strip --------------------------------------------------- */

.widget-intent-flow__meters {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.8fr;
  gap: 0.5rem;
  padding: 0.5rem 0.375rem 0;
  border-top: 1px solid color-mix(in oklch, var(--wif-fg) 9%, transparent);
}

.widget-intent-flow__meter {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.25rem 0.375rem;
  min-width: 0;
}

.widget-intent-flow__meter-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wif-muted);
  white-space: nowrap;
}

.widget-intent-flow__meter-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--wif-teal);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Shared tag-dot breathe -------------------------------------- */

@keyframes wif-tag-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 3px color-mix(in oklch, var(--wif-teal) 35%, var(--wif-surface)),
      0 0 10px color-mix(in oklch, var(--wif-teal) 45%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in oklch, var(--wif-teal) 22%, var(--wif-surface)),
      0 0 16px color-mix(in oklch, var(--wif-teal) 60%, transparent);
  }
}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 540px) {
  /* Stage panel is already vertical at every width; only the meter
     strip needs to drop from 3-col to 1-col on very narrow viewports
     so labels + values stay on single lines. */
  .widget-intent-flow__meters {
    grid-template-columns: 1fr;
  }
}

/* --- Reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .widget-intent-flow__tag-dot,
  .widget-intent-flow__arrow,
  .widget-intent-flow__intent-caret,
  .widget-intent-flow__intent-frame,
  .widget-intent-flow__constraints-frame,
  .widget-intent-flow__constraint,
  .widget-intent-flow__place-frame,
  .widget-intent-flow__gate-frame {
    animation: none;
  }
  /* Park every stage on its first frame (cycle 0 = "fastest"). */
  .widget-intent-flow__intent-frame,
  .widget-intent-flow__constraints-frame,
  .widget-intent-flow__place-frame,
  .widget-intent-flow__gate-frame {
    opacity: 0;
    transform: none;
  }
  .widget-intent-flow__intent-frame:first-child,
  .widget-intent-flow__constraints-frame:first-child,
  .widget-intent-flow__place-frame:first-child,
  .widget-intent-flow__gate-frame:first-child {
    opacity: 1;
  }
  .widget-intent-flow__constraint { opacity: 1; transform: none; }
  .widget-intent-flow__arrow { color: var(--wif-teal); }
}