/* Release rings — Deploy › Manage › Releases
 *
 * Globally loaded rather than page-scoped: the board mixes classes from the
 * assets board (ud-*) with the deploy sheet (dep-*), and a page sheet would only
 * be a fourth place to look for the same widget.
 *
 * Two columns: decide *who* on the left, read the ladder on the right. The
 * ladder is vertical because the arrows between rings are the point — they carry
 * the wait each ring imposes on the one below it.
 */

.dep-rings__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-space-3);
  justify-content: space-between;
}

.dep-rings__controls {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
}

.dep-rings__scope { display: inline-flex; gap: var(--cs-space-2); }

.dep-rings__cols {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--cs-space-6);
  align-items: start;
}

@media (max-width: 860px) {
  .dep-rings__cols { grid-template-columns: 1fr; }
}

.dep-rings__side,
.dep-rings__ladder {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
  min-width: 0;
}

/* ── Left column ───────────────────────────────────────────────────────── */

.dep-guide {
  border: 1px solid var(--cs-neutral-200);
  border-radius: var(--cs-radius-md);
  background: var(--cs-neutral-50);
  padding: var(--cs-space-3);
}

.dep-guide__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--cs-neutral-800);
}

.dep-guide__steps {
  margin: var(--cs-space-3) 0 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
  font-size: 0.8125rem;
  color: var(--cs-neutral-600);
}

.dep-pending {
  border: 1px solid var(--cs-neutral-200);
  border-radius: var(--cs-radius-md);
  padding: var(--cs-space-3);
}

.dep-pending__row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  font-size: 0.8125rem;
  color: var(--cs-neutral-700);
  padding: 2px 0;
}

.dep-pending__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

/* One colour per ladder, used by the dot here and by the ring pulse below, so
   "blue is the agent, violet is policy" is learnable in one glance. */
.dep-pending__dot[data-rollout="agent"]  { background: var(--cs-blue-600); }
.dep-pending__dot[data-rollout="policy"] { background: #7c3aed; }

.dep-picker {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.dep-picker__seg {
  display: inline-flex;
  border: 1px solid var(--cs-neutral-200);
  border-radius: var(--cs-radius-md);
  overflow: hidden;
}

.dep-picker__seg-btn {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  font-size: 0.8125rem;
  color: var(--cs-neutral-600);
  cursor: pointer;
}

.dep-picker__seg-btn--active {
  background: var(--cs-blue-600);
  color: #fff;
  font-weight: 600;
}

.dep-picker__row { display: flex; gap: var(--cs-space-2); }
.dep-picker__search { flex: 1; min-width: 0; }

.dep-results { max-height: 420px; overflow-y: auto; }

/* ── Chips and results ─────────────────────────────────────────────────── */

.ud-entity-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cs-neutral-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* A lane is half the width of a policy column, so the assets board's fixed
   three-across would cram a hostname into nothing. Same chip, fewer per row. */
.dep-ring .ud-policy-column__chips {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.ud-policy-chip__link .dep-kind { flex: none; }

.dep-kind {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--cs-radius-sm);
  flex: none;
}

.dep-kind--user  { background: var(--cs-info-bg);    color: var(--cs-blue-700); }
.dep-kind--group { background: #ede9fe;              color: #6d28d9; }

/* ── The ladder ────────────────────────────────────────────────────────── */

.dep-arrow {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding-left: var(--cs-space-4);
  color: var(--cs-neutral-500);
  font-size: 0.75rem;
}

.dep-arrow__line { font-size: 1rem; line-height: 1; }
.dep-arrow__delay { font-variant-numeric: tabular-nums; }

.dep-arrow__gear {
  border: 0;
  background: transparent;
  color: var(--cs-neutral-400);
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--cs-radius-sm);
}

.dep-arrow__gear:hover { color: var(--cs-blue-600); background: var(--cs-neutral-100); }

/* Delivering right now. The ring pulses in its ladder's colour; a ring
   delivering both alternates between the two, which is why "both" is its own
   keyframe rather than two animations fighting over one property. */
.dep-ring[data-rollout="agent"]  { animation: dep-pulse-agent 1.8s ease-in-out infinite; }
.dep-ring[data-rollout="policy"] { animation: dep-pulse-policy 1.8s ease-in-out infinite; }
.dep-ring[data-rollout="both"]   { animation: dep-pulse-both 3.6s ease-in-out infinite; }

@keyframes dep-pulse-agent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); }
}

@keyframes dep-pulse-policy {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35); }
}

@keyframes dep-pulse-both {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  25%      { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); }
  50%      { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  75%      { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .dep-ring[data-rollout] { animation: none; }
  .dep-ring[data-rollout="agent"]  { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35); }
  .dep-ring[data-rollout="policy"] { box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.35); }
  .dep-ring[data-rollout="both"]   { box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.35); }
}

/* ── Break glass ───────────────────────────────────────────────────────── */

.dep-pause-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-3);
  padding: var(--cs-space-3) var(--cs-space-4);
  margin-bottom: var(--cs-space-4);
  border: 1px solid var(--cs-error);
  border-radius: var(--cs-radius-md);
  background: var(--cs-error-bg);
  color: #991b1b;
  font-size: 0.8125rem;
}