@layer components {
  .scenarios {
    display: grid;
    gap: 1.5rem;

    .run-list {
      max-inline-size: none;
    }
  }

  .scenario-warning {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-inline-start: 3px solid var(--destructive);
    background: color-mix(in oklab, var(--destructive) 8%, transparent);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    text-wrap: pretty;
  }

  .scenario-form {
    display: grid;
    gap: 1rem;
  }

  .scenario-form__group {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  .choice-list {
    display: grid;
    gap: 0.25rem;
  }

  .choice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 2.75rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;

    &:hover {
      background: var(--accent);
    }

    &:has(:checked) {
      border-color: var(--primary);
      background: color-mix(in oklab, var(--primary) 6%, transparent);
    }

    &:has(:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    input {
      accent-color: var(--primary);
      inline-size: 1rem;
      block-size: 1rem;
      margin: 0;
    }
  }

  /* Fields for one customer source or step action show only while it is checked. */
  .scenario-customer__fields,
  .scenario-customer__only,
  .scenario-step-form__settings > [data-for] {
    display: none;
    gap: 1rem;
  }

  .scenario-customer:has(input[value="given"]:checked) :is(.scenario-customer__fields, .scenario-customer__only)[data-for~="given"],
  .scenario-customer:has(input[value="lookup"]:checked) .scenario-customer__fields[data-for~="lookup"],
  .scenario-customer:has(input[value="person"]:checked) .scenario-customer__fields[data-for~="person"],
  .scenario-customer:has(input[value="step"]:checked) .scenario-customer__fields[data-for~="step"],
  .scenario-step-form:has(input[value="create_customer"]:checked) [data-for~="create_customer"],
  .scenario-step-form:has(input[value="find_customer"]:checked) [data-for~="find_customer"],
  .scenario-step-form:has(input[value="book_next_slot"]:checked) [data-for~="book_next_slot"],
  .scenario-step-form:has(input[value="cancel_run_bookings"]:checked) [data-for~="cancel_run_bookings"],
  .scenario-step-form:has(input[value="cancel_customer_bookings"]:checked) [data-for~="cancel_customer_bookings"] {
    display: grid;
  }

  /* A suite's live or simulated fields show only while that mode is checked. */
  .scenario-suite-form__mode {
    display: none;
    gap: 1rem;
  }

  .scenario-suite-form:has(input[value="live"]:checked) .scenario-suite-form__mode[data-mode="live"],
  .scenario-suite-form:has(input[value="simulated"]:checked) .scenario-suite-form__mode[data-mode="simulated"] {
    display: grid;
  }

  .scenario-world {
    display: grid;
    gap: 1.25rem;
    container-type: inline-size;
  }

  .scenario-world__section {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  /* One row per thing in the world: stacked when narrow, side by side as the form widens. */
  .scenario-world__row {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  @container (width >= 24rem) {
    .scenario-world__row {
      grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    }

    /* Names, emails and failure kinds read in full across two columns. */
    .scenario-world__field--wide {
      grid-column: span 2;
    }
  }

  .scenario-world__field {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .scenario-world__days {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));

    legend {
      margin-block-end: 0.25rem;
    }
  }

  .scenario-world__day {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.75rem;
    font-size: var(--text-sm);
    cursor: pointer;

    input {
      accent-color: var(--primary);
      inline-size: 1rem;
      block-size: 1rem;
      margin: 0;
    }
  }

  .scenario-step-form__settings {
    display: grid;
    gap: 1rem;
  }

  /* The query reads the wrapper, since an element cannot query its own size. */
  .scenario-phases-frame {
    container-type: inline-size;
  }

  .scenario-phases {
    display: grid;
    gap: 1rem;
  }

  @container (width >= 40rem) {
    .scenario-phases {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .scenarios .run__header {
    flex-wrap: wrap;
  }

  .scenario-phase {
    display: grid;
    gap: 0.5rem;
    align-content: start;
  }

  .scenario-phase__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .scenario-phase__title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
  }

  /* Kept in its place, and read as skipped. */
  .scenario-step--disabled .run__agent {
    color: var(--muted-foreground);
    text-decoration: line-through;
  }

  .scenario-step__actions {
    display: flex;
    gap: 0.25rem;
    margin-inline-start: auto;
  }

  .scenario-step-results {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .scenario-step-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }

  .scenario-step-result--error {
    border-color: color-mix(in oklab, var(--destructive) 50%, var(--border));
  }

  .scenario-step-result__phase {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .scenario-step-result__value {
    flex-basis: 100%;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
  }

  .scenario-results {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .scenario-result {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
  }

  .scenario-result__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-size: var(--text-sm);

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
      border-radius: var(--radius-lg);
    }
  }

  .scenario-result__title {
    font-weight: 600;
  }

  .scenario-result__body {
    display: grid;
    gap: 1rem;
    padding: 0 1rem 1rem;
  }

  .scenario-transcript {
    max-block-size: min(70dvh, 48rem);
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
  }

  .scenario-judgment {
    display: grid;
    gap: 0.25rem;
    font-size: var(--text-sm);

    p {
      margin: 0;
      text-wrap: pretty;
    }
  }

  .scenario-bookings {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: var(--text-sm);
  }

  .scenario-trend {
    display: flex;
    align-items: end;
    gap: 0.25rem;
    block-size: 6rem;
    padding-block-end: 0.25rem;
    border-block-end: 1px solid var(--border);
  }

  .scenario-trend__bar {
    flex: 1 1 0;
    max-inline-size: 2rem;
    min-block-size: 2px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--primary);
    transition: opacity 150ms ease-out;

    &:hover {
      opacity: 0.8;
    }
  }

  .scenario-trend__bar--empty {
    background: var(--muted);
  }
}