/* Running-instance card. See static/components/instance_card.js. */

.instance-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--panel-padding);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.instance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.instance-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--success);
  margin-bottom: var(--space-2);
}

.instance-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
}

/* Destroy reuses the Ready dot instead of a second caption under the
   actions. Attention while it is working, danger if the wait has stalled. */
.instance-head .eyebrow.is-destroying { color: var(--attention); }
.instance-head .eyebrow.is-destroying .instance-dot {
  background: var(--attention);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--attention) 20%, transparent);
  animation: rc-instance-dot-pulse 1.2s var(--ease-out) infinite;
}
.instance-head .eyebrow.is-stalled { color: var(--danger); }
.instance-head .eyebrow.is-stalled .instance-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent);
}

@keyframes rc-instance-dot-pulse {
  50% { transform: scale(0.7); opacity: 0.55; }
}

.instance-title {
  font-size: var(--text-xl);
  margin: 0;
  overflow-wrap: anywhere;
}

.instance-identity {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.instance-meta {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.instance-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.instance-logs {
  margin: 0;
  padding: var(--space-4);
  max-height: 420px;
  overflow: auto;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}


/* RADEON-INTERNAL-RECONCILED
   SSH bootstrap state. A left rule rather than a filled banner: the card already
   has a surface and a border, and a second box inside it reads as a second card.
   The rule is --attention while it is working and --danger when it has failed,
   which is the only colour either state needs.

   While pending, the command block below is dimmed and its text is not selectable
   -- the command is real but does not work yet, and dimming alone still invites a
   copy. Full opacity returns the moment the stage clears, on the same poll. */
.ssh-block { margin-top: var(--space-4); }

.ssh-stage {
  border-left: 2px solid var(--attention);
  padding: 0 0 0 var(--space-3);
  margin-bottom: var(--space-3);
}
.ssh-stage.is-failed { border-left-color: var(--danger); }

.ssh-stage-head {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.ssh-stage-body,
.ssh-stage-detail {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.ssh-stage-detail {
  font-family: var(--font-mono);
  word-break: break-word;
}

.ssh-block.is-pending .access-card { opacity: .55; }
.ssh-block.is-pending .access-card code { user-select: none; }

.ssh-hostkey-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-subtle);
}
.ssh-hostkey-hint code {
  font-family: var(--font-mono);
  word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
  .ssh-stage { transition: none; }
  .instance-head .eyebrow.is-destroying .instance-dot { animation: none; }
}

@media (max-width: 640px) {
  .instance-actions { flex-direction: column; width: 100%; }
  .instance-actions .btn, .instance-actions > span { width: 100%; }
}