/* TWG Triad widget (v2).
   Light card. Three rows — Facility / Workforce / Software — with
   each arm's deliverable named. A 6s scan lights the active arm's
   dot + label in turn; the other two sit quiet at a reduced
   opacity. No SVG stage, no curved paths, no halo. Simple and
   clean, matching the calm-row vocabulary of integration-matrix and
   workforce-pipeline. CSS-only; reduced-motion parks all three
   rows quietly lit. */

.widget-twg-triad {
  --wtt-teal: var(--brand-teal);
  --wtt-blue: var(--brand-blue);
  --wtt-surface: var(--color-card, #fff);
  --wtt-fg: var(--color-foreground);
  --wtt-muted: var(--color-muted-foreground);
  --wtt-line: var(--color-border);
  --wtt-panel: color-mix(in srgb, var(--wtt-fg) 3%, var(--wtt-surface));
  --wtt-cycle: 6s; /* overridden per-instance inline */

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

.widget-twg-triad__card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.875rem 0.875rem 1rem;
  background: var(--wtt-surface);
  border: 1px solid var(--wtt-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(--wtt-fg);
}

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

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

.widget-twg-triad__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(--wtt-fg);
}

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

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

/* --- Three arm rows --------------------------------------------- */

.widget-twg-triad__arms {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.widget-twg-triad__arm {
  display: grid;
  grid-template-columns: auto minmax(7rem, auto) 1fr;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: var(--wtt-panel);
  border: 1px solid color-mix(in srgb, var(--wtt-fg) 9%, transparent);
  border-radius: var(--radius-md);
  min-width: 0;
  /* Quiet rest state: arm sits at ~65% opacity so the active arm
     pops when it lights up. Active-arm keyframe brings it back to
     full and applies a subtle teal wash. */
  opacity: 0.65;
  animation: wtt-arm-active var(--wtt-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wtt-cycle));
}

@keyframes wtt-arm-active {
  /* 33.33% of cycle per arm. 3% fade-in, 25% hold, 5% fade-out,
     rest quiet. */
  0%, 3%    { opacity: 0.65; background: var(--wtt-panel); border-color: color-mix(in srgb, var(--wtt-fg) 9%, transparent); }
  6%, 28%   {
    opacity: 1;
    background: color-mix(in srgb, var(--wtt-teal) 4%, var(--wtt-surface));
    border-color: color-mix(in srgb, var(--wtt-teal) 22%, transparent);
  }
  33.33%    { opacity: 0.65; background: var(--wtt-panel); border-color: color-mix(in srgb, var(--wtt-fg) 9%, transparent); }
  100%      { opacity: 0.65; background: var(--wtt-panel); border-color: color-mix(in srgb, var(--wtt-fg) 9%, transparent); }
}

/* --- Arm dot ----------------------------------------------------- */

.widget-twg-triad__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wtt-fg) 16%, transparent);
  flex-shrink: 0;
  animation: wtt-dot-active var(--wtt-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wtt-cycle));
}

@keyframes wtt-dot-active {
  0%, 3% {
    background: color-mix(in srgb, var(--wtt-fg) 16%, transparent);
    box-shadow: none;
  }
  6%, 28% {
    background: var(--wtt-teal);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--wtt-teal) 18%, transparent),
      0 0 12px color-mix(in srgb, var(--wtt-teal) 45%, transparent);
  }
  33.33%, 100% {
    background: color-mix(in srgb, var(--wtt-fg) 16%, transparent);
    box-shadow: none;
  }
}

/* --- Arm label + deliverable ------------------------------------ */

.widget-twg-triad__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wtt-muted);
  white-space: nowrap;
  animation: wtt-label-active var(--wtt-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wtt-cycle));
}

@keyframes wtt-label-active {
  0%, 3%       { color: var(--wtt-muted); }
  6%, 28%      { color: var(--wtt-teal); }
  33.33%, 100% { color: var(--wtt-muted); }
}

.widget-twg-triad__deliverable {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.01em;
  color: var(--wtt-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-self: end;
}

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

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

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

@media (max-width: 480px) {
  .widget-twg-triad__arm {
    grid-template-columns: auto 1fr;
    row-gap: 0.25rem;
  }
  .widget-twg-triad__deliverable {
    grid-column: 2;
    justify-self: start;
    font-size: var(--fs-sm);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .widget-twg-triad__tag-dot,
  .widget-twg-triad__arm,
  .widget-twg-triad__dot,
  .widget-twg-triad__label {
    animation: none;
  }
  /* All three arms sit at a calm resting state with teal-tinted
     dots so the diagram reads "three active arms" without motion. */
  .widget-twg-triad__arm { opacity: 1; }
  .widget-twg-triad__dot {
    background: color-mix(in srgb, var(--wtt-teal) 40%, transparent);
  }
  .widget-twg-triad__label {
    color: color-mix(in srgb, var(--wtt-teal) 50%, var(--wtt-muted));
  }
}