/* Execution — the Run/Preview dialog and its environment picker.
   Tokens only: no literal colours, and spacing from the 4-pt scale (DESIGN-SYSTEM.md). */

.qp-run-launcher {
  display: inline-flex;
  gap: var(--qp-space-2);
}

.qp-run-dialog__loading {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-4);
}

/* A denial is information, not a crash: calm surface, readable, and it stays put. */
.qp-run-dialog__denial {
  display: flex;
  gap: var(--qp-space-3);
  align-items: flex-start;
  padding: var(--qp-space-3) var(--qp-space-4);
  margin-bottom: var(--qp-space-5);
  border: 1px solid var(--qp-fail-border);
  border-radius: var(--qp-radius-lg);
  background: var(--qp-fail-bg);
  color: var(--qp-fail);
}

.qp-run-dialog__denial-message {
  margin: 0;
  font-weight: var(--qp-weight-medium);
  line-height: var(--qp-leading-snug);
}

/* The confirmation an Administrator sees before door 2 (ADR-008 revised). Same shape as the §101 block but
   in the production tone, because this one is about what is *about to happen* rather than about policy.
   It had no styles at all until a browser pass showed the icon sitting on its own line. */
.qp-run-dialog__production-warning {
  padding: var(--qp-space-4);
  margin-bottom: var(--qp-space-5);
  border: 1px solid var(--qp-prod-border);
  border-radius: var(--qp-radius-lg);
  background: var(--qp-prod-bg);
  color: var(--qp-text);
}

.qp-run-dialog__production-warning header {
  display: flex;
  gap: var(--qp-space-2);
  align-items: center;
  color: var(--qp-prod);
}

.qp-run-dialog__production-warning h3 {
  margin: 0;
  font-size: var(--qp-text-md);
  font-weight: var(--qp-weight-semibold);
  letter-spacing: var(--qp-tracking-tight);
}

.qp-run-dialog__production-warning p {
  margin: var(--qp-space-2) 0 0;
  font-size: var(--qp-text-sm);
  line-height: var(--qp-leading-normal);
  color: var(--qp-text-muted);
}

.qp-run-dialog__production-warning strong {
  color: var(--qp-text);
  font-weight: var(--qp-weight-semibold);
}

/* §101: what a production-enabled suite shows instead of a Run button. */
.qp-run-dialog__production {
  padding: var(--qp-space-4);
  margin-bottom: var(--qp-space-5);
  border: 1px solid var(--qp-prod-border);
  border-radius: var(--qp-radius-lg);
  background: var(--qp-prod-bg);
  color: var(--qp-text);
}

.qp-run-dialog__production header {
  display: flex;
  gap: var(--qp-space-2);
  align-items: center;
  color: var(--qp-prod);
}

.qp-run-dialog__production h3 {
  margin: 0;
  font-size: var(--qp-text-md);
  font-weight: var(--qp-weight-semibold);
  letter-spacing: var(--qp-tracking-tight);
}

.qp-run-dialog__production p {
  margin: var(--qp-space-2) 0 0;
  font-size: var(--qp-text-sm);
  line-height: var(--qp-leading-normal);
  color: var(--qp-text-muted);
}

.qp-run-dialog__schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qp-space-4);
  margin: var(--qp-space-4) 0 0;
}

.qp-run-dialog__schedule dt {
  font-size: var(--qp-text-xs);

  /* muted, not subtle: this list sits inside the production panel, whose tinted background is darker than
     any ordinary surface. Subtle measures 4.36:1 there in dark mode — below AA — while muted is 6.09:1, and
     it is already what the sibling paragraph in the same panel uses. */
  color: var(--qp-text-muted);
}

.qp-run-dialog__schedule dd {
  margin: var(--qp-space-1) 0 0;
  font-size: var(--qp-text-sm);
  font-weight: var(--qp-weight-medium);
}

/* ── Form rhythm ───────────────────────────────────────────────────────────────────────────────────
   One container owns the vertical spacing, so no field has to guess its own bottom margin — which is how
   "Browsers" ended up sitting directly under the last environment option. */

.qp-run-form {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-5);
}

/* A locked environment reads as locked: dimmed, with the lock glyph and the short reason as a heading, and
   the authorizer's actionable sentence beneath it. The input is disabled, so everything here is
   presentation. */
.qp-run-form .qp-radio:has(input:disabled) {
  cursor: not-allowed;
  color: var(--qp-text-subtle);
}

.qp-run-form .qp-radio:has(input:disabled) .qp-choice__desc {
  color: var(--qp-text-subtle);
}

/* The sentence AUTHORIZATION §7 requires: what this principal *can* reach, and who to ask. Smaller and
   quieter than the heading above it, but real text in the page — never a title attribute, which neither a
   touch user nor a screen reader in browse mode ever sees. */
.qp-env__message {
  display: block;
  margin-top: var(--qp-space-1);
  font-size: var(--qp-text-xs);
  line-height: var(--qp-leading-snug);
  color: var(--qp-text-subtle);
  text-wrap: pretty;
}

.qp-run-form__browsers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qp-space-4) var(--qp-space-5);
}

/* Evidence is a different question from what runs, so it gets a rule and a heading rather than being two
   more fields in the same stack. */
.qp-run-form__section {
  padding-top: var(--qp-space-5);
  border-top: 1px solid var(--qp-border-subtle);
}

.qp-run-form__section-title {
  margin: 0 0 var(--qp-space-4);
  font-size: var(--qp-text-2xs);
  font-weight: var(--qp-weight-semibold);
  letter-spacing: var(--qp-tracking-caps);
  text-transform: uppercase;
  color: var(--qp-text-subtle);
}

.qp-run-form__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qp-space-4);
}

/* ── The denial's folded diagnostics ───────────────────────────────────────────────────────────────
   Only rendered for Errors.ViewTechnicalDetails, and closed until asked for. */

.qp-run-dialog__denial-body {
  min-width: 0;
}

.qp-run-dialog__details {
  margin-top: var(--qp-space-3);
  font-size: var(--qp-text-xs);
}

.qp-run-dialog__details summary {
  cursor: pointer;
  font-weight: var(--qp-weight-medium);
}

.qp-run-dialog__details summary:focus-visible {
  outline: 2px solid var(--qp-focus-ring);
  outline-offset: 2px;
  border-radius: var(--qp-radius-xs);
}

.qp-run-dialog__details dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--qp-space-1) var(--qp-space-3);
  margin: var(--qp-space-2) 0 0;
}

.qp-run-dialog__details dt {
  color: var(--qp-text-subtle);
  white-space: nowrap;
}

.qp-run-dialog__details dd {
  margin: 0;
  font-family: var(--qp-font-mono);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .qp-run-form__pair,
  .qp-run-dialog__schedule {
    grid-template-columns: 1fr;
  }
}