.mock-scenario-sheet {
  padding-bottom: calc(var(--space-5) + var(--inset-safe-bottom));
}

.mock-scenario-heading button,
.mock-state-banner button {
  display: grid;
  width: var(--control-min-size);
  height: var(--control-min-size);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.mock-scenario-grid {
  display: grid;
  gap: var(--space-2);
}

.mock-scenario-grid > button {
  display: grid;
  min-height: 64px;
  grid-template-columns: var(--control-min-size) minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  text-align: left;
}

.mock-scenario-grid > button > span:first-child {
  display: grid;
  width: var(--control-min-size);
  height: var(--control-min-size);
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-bg-surface);
  color: var(--color-brand-emphasis);
}

.mock-scenario-grid > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: var(--space-0-5);
}

.mock-scenario-grid strong {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.mock-scenario-grid small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.mock-scenario-grid > button.is-selected {
  border-color: var(--color-brand);
  background: var(--color-selection-soft);
  color: var(--color-brand-emphasis);
}

.mock-scenario-check {
  opacity: 0;
  color: var(--color-brand-emphasis);
  transform: scale(0.72);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.mock-scenario-grid > button.is-selected .mock-scenario-check {
  opacity: 1;
  transform: scale(1);
}

.mock-scenario-reset {
  display: inline-flex;
  min-height: var(--control-min-size);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
}

.mock-state-overlay {
  position: absolute;
  inset: calc(var(--header-height) + var(--inset-safe-top)) 0 calc(var(--nav-height) + var(--inset-safe-bottom));
  z-index: 19;
  display: grid;
  padding: var(--space-8);
  place-content: center;
  place-items: center;
  gap: var(--space-3);
  background: var(--color-surface-translucent);
  color: var(--color-text-primary);
  text-align: center;
  opacity: 0;
  transform: translateY(var(--space-2));
  pointer-events: none;
  transition: opacity var(--motion-exit) var(--ease-standard), transform var(--motion-exit) var(--ease-standard);
  backdrop-filter: blur(12px);
}

.mock-state-overlay[hidden],
.mock-state-banner[hidden] {
  display: none;
}

.mock-state-overlay.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mock-state-overlay > svg {
  width: 36px;
  height: 36px;
  color: var(--color-brand-emphasis);
}

.mock-state-overlay h2 {
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
}

.mock-state-overlay p {
  max-width: 300px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.mock-state-overlay .primary-button {
  width: auto;
  min-width: 136px;
  margin-top: var(--space-2);
}

.mock-state-spinner {
  display: none;
  width: 34px;
  height: 34px;
  border: 3px solid var(--color-focus);
  border-top-color: var(--color-brand-emphasis);
  border-radius: var(--radius-circle);
  animation: mock-spin var(--motion-spinner) linear infinite;
}

.mock-state-overlay.is-loading .mock-state-spinner {
  display: block;
}

.mock-state-overlay.is-loading > svg {
  display: none;
}

.mock-state-banner {
  position: absolute;
  top: calc(var(--header-height) + var(--inset-safe-top) + var(--space-3));
  right: var(--page-gutter);
  left: var(--page-gutter);
  z-index: 21;
  display: grid;
  min-height: 64px;
  grid-template-columns: 28px minmax(0, 1fr) var(--control-min-size);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
  box-shadow: var(--elevation-raised);
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-3)));
  transition: opacity var(--motion-exit) var(--ease-standard), transform var(--motion-exit) var(--ease-standard);
}

.mock-state-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mock-state-banner > svg {
  color: var(--color-brand-emphasis);
}

.mock-state-banner > span {
  display: grid;
  gap: var(--space-0-5);
}

.mock-state-banner small {
  color: var(--color-text-secondary);
}

@keyframes mock-spin {
  to { transform: rotate(360deg); }
}