/* Sovereign Enclave widget.
   Light card. Three concentric rings (data, compute, people) with a
   cycling activation: each ring in turn gets a teal→blue gradient
   stroke + soft glow, while the LAST CHECK readout below crossfades
   to match. CSS-only. Reduced-motion parks every layer at 55% with
   the readout on the static "All layers · passed" string. */

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

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

.widget-sovereign-enclave__card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  /* Explicit single column. Without this, the grid's implicit auto
     column sizes to content; the stage row has only absolute children
     so its content width is 0 and the whole card collapses to the
     header/meters' intrinsic width. The other widgets don't hit this
     because their stages carry intrinsic-width content (7-column
     grid, 8×3 cell grid). */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  padding: 0.875rem 0.875rem 0.75rem;
  background: var(--wsen-surface);
  border: 1px solid var(--wsen-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(--wsen-fg);
  --color-foreground: var(--wsen-fg);
  --color-muted-foreground: var(--wsen-muted);
  --color-border: var(--wsen-line);
}

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

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

.widget-sovereign-enclave__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(--wsen-fg);
}

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

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

/* --- Stage: three concentric rings + a core pulse ------------------
   Layout uses absolute positioning with inset percentages so rings
   scale proportionally with the stage area. Each ring's ::before is
   a gradient-mask pseudo-border that fades in when that ring is the
   active layer in the cycle. Matches the same mask-composite trick
   used on .stage-map__card and .resource-rail__card hovers. */

.widget-sovereign-enclave__stage {
  position: relative;
  /* width:100% forces the stage to fill the grid track. Without it,
     width collapses to content (absolute children contribute 0) and
     aspect-ratio sizes off the tiny content box. */
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 22rem;
  margin-inline: auto;
  padding: 0.5rem;
  background: var(--wsen-panel);
  border: 1px solid color-mix(in oklch, var(--wsen-fg) 9%, transparent);
  border-radius: var(--radius-md);
}

.widget-sovereign-enclave__ring {
  position: absolute;
  border: 1px solid color-mix(in oklch, var(--wsen-fg) 12%, transparent);
  background: transparent;
  /* Animate border-color + box-shadow directly on the ring itself so
     the active state is a single clean stroke with a tight halo, not
     a stack of pseudo-element rings sitting 1px outside the border
     (which produced a visible double-line effect). */
  animation: wsen-ring-active var(--wsen-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wsen-cycle));
}

/* Outermost → innermost. Inset values distribute the rings evenly
   inside the stage padding. Border radius shrinks with the ring so
   corners stay visually consistent with the card's own radius feel. */
.widget-sovereign-enclave__ring--people {
  inset: 0.625rem;
  border-radius: 1.125rem;
}
.widget-sovereign-enclave__ring--compute {
  inset: 17%;
  border-radius: 0.875rem;
}
.widget-sovereign-enclave__ring--data {
  inset: 34%;
  border-radius: 0.625rem;
}

@keyframes wsen-ring-active {
  /* 33.33% of cycle per layer. Carve a short fade-in, a held bright
     window, and a short fade-out. Remaining 67% of the cycle the ring
     sits on its muted default so only one layer ever reads as active.
     Halo is a soft inner ring (0 0 0 2px) plus a blurred outer glow
     (0 0 22px). Kept tight so it stays visually attached to the ring
     rather than spraying into the stage panel. */
  0% {
    border-color: color-mix(in oklch, var(--wsen-fg) 12%, transparent);
    box-shadow: none;
  }
  4%, 28% {
    border-color: var(--wsen-teal);
    box-shadow:
      0 0 0 2px color-mix(in oklch, var(--wsen-teal) 14%, transparent),
      0 0 22px -4px color-mix(in oklch, var(--wsen-teal) 45%, transparent);
  }
  33.33%, 100% {
    border-color: color-mix(in oklch, var(--wsen-fg) 12%, transparent);
    box-shadow: none;
  }
}

/* Ring label pill: docked on the top edge of its ring. The inner label
   docks at roughly the 11-o'clock position so the labels stack left
   of the rings' right edges without overlapping as the stack nests. */
.widget-sovereign-enclave__ring-label {
  position: absolute;
  top: -0.55rem;
  left: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.4375rem;
  background: var(--wsen-surface);
  border: 1px solid color-mix(in oklch, var(--wsen-fg) 14%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wsen-muted);
  white-space: nowrap;
  transition: color 0.4s ease, border-color 0.4s ease;
  animation: wsen-label-active var(--wsen-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wsen-cycle));
}

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

@keyframes wsen-label-active {
  0%     { color: var(--wsen-muted); border-color: color-mix(in oklch, var(--wsen-fg) 14%, transparent); }
  4%     { color: var(--wsen-teal);  border-color: color-mix(in oklch, var(--wsen-teal) 35%, transparent); }
  28%    { color: var(--wsen-teal);  border-color: color-mix(in oklch, var(--wsen-teal) 35%, transparent); }
  33.33% { color: var(--wsen-muted); border-color: color-mix(in oklch, var(--wsen-fg) 14%, transparent); }
  100%   { color: var(--wsen-muted); border-color: color-mix(in oklch, var(--wsen-fg) 14%, transparent); }
}

/* Core pulse: small dot at the geometric center of the stage, always
   breathing to signal "policy running" even when no ring is actively
   flashing. */
.widget-sovereign-enclave__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background: var(--wsen-teal);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--wsen-teal) 22%, var(--wsen-surface)),
    0 0 14px color-mix(in oklch, var(--wsen-teal) 55%, transparent);
  animation: wsen-core-breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes wsen-core-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 0 4px color-mix(in oklch, var(--wsen-teal) 22%, var(--wsen-surface)),
      0 0 14px color-mix(in oklch, var(--wsen-teal) 55%, transparent);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow:
      0 0 0 6px color-mix(in oklch, var(--wsen-teal) 16%, var(--wsen-surface)),
      0 0 20px color-mix(in oklch, var(--wsen-teal) 65%, transparent);
  }
}

/* --- Detail panel: LAST CHECK readout that crossfades with rings --- */

.widget-sovereign-enclave__detail {
  position: relative;
  padding: 0.5rem 0.875rem 0.625rem;
  background: var(--wsen-panel);
  border: 1px solid color-mix(in oklch, var(--wsen-fg) 9%, transparent);
  border-radius: var(--radius-md);
  min-height: 2.75rem;
}

.widget-sovereign-enclave__detail-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--wsen-teal) 70%, var(--wsen-fg));
  margin-bottom: 0.1875rem;
}

.widget-sovereign-enclave__detail-frames {
  position: relative;
  min-height: 1rem;
}

.widget-sovereign-enclave__detail-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--wsen-fg);
  opacity: 0;
  animation: wsen-detail-fade var(--wsen-cycle) ease-in-out infinite;
  animation-delay: calc((var(--i) / 3) * var(--wsen-cycle));
}

@keyframes wsen-detail-fade {
  /* Mirror the ring windows: frame i is visible during the 33.33%
     block its ring is lit. Fade in/out aligned with the ring fade. */
  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); }
}

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

.widget-sovereign-enclave__meters {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 0.7fr;
  gap: 0.5rem;
  padding: 0.5rem 0.375rem 0;
  border-top: 1px solid color-mix(in oklch, var(--wsen-fg) 9%, transparent);
}

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

.widget-sovereign-enclave__meter-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wsen-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-sovereign-enclave__meter-value {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  color: var(--wsen-teal);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Shared tag-dot breathe (same keyframe shape as other widgets) - */

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

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

@media (max-width: 560px) {
  .widget-sovereign-enclave__stage {
    max-width: 18rem;
  }
  .widget-sovereign-enclave__ring-label {
    font-size: 0.5rem;
    padding: 0.0625rem 0.3125rem;
  }
  .widget-sovereign-enclave__meters {
    grid-template-columns: 1fr;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .widget-sovereign-enclave__tag-dot,
  .widget-sovereign-enclave__core,
  .widget-sovereign-enclave__ring,
  .widget-sovereign-enclave__ring-label,
  .widget-sovereign-enclave__detail-frame {
    animation: none;
  }
  /* All three rings sit on a soft teal stroke in parallel at reduced
     motion, no halo, so the diagram reads as "all layers, always on"
     without anything pulsing. */
  .widget-sovereign-enclave__ring {
    border-color: color-mix(in oklch, var(--wsen-teal) 35%, transparent);
  }
  .widget-sovereign-enclave__ring-label {
    color: var(--wsen-teal);
    border-color: color-mix(in oklch, var(--wsen-teal) 35%, transparent);
  }
  /* Only show the first readout; others stay hidden. */
  .widget-sovereign-enclave__detail-frame { opacity: 0; }
  .widget-sovereign-enclave__detail-frame:first-child { opacity: 1; }
}