.practice-workspace,
.practice-workspace * {
  box-sizing: border-box;
  min-width: 0;
}

.practice-workspace {
  display: grid;
  gap: var(--space-4, 16px);
  max-width: 100%;
  padding: var(--space-4, 16px);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-radius: var(--radius-md, 10px);
  background: var(--surface-subtle, var(--bg-card, #fff));
  color: var(--text-primary, #1a1a2e);
  font-size: 14px;
}

.practice-workspace :is(input, select, textarea, button) {
  max-width: 100%;
  min-height: var(--control-height, 40px);
  font: inherit;
}

.practice-workspace :is(input, select, textarea, button):focus-visible {
  outline: 3px solid var(--primary, #e31937);
  outline-offset: 2px;
}

.practice-workspace :is(input, select, textarea, button):disabled {
  cursor: not-allowed;
  opacity: .58;
}

.practice-workspace .btn-primary:hover { transform: none; }

.practice-workspace :is(p, li, label, dt, dd, .capability-banner) { font-size: 14px; }
.practice-workspace > h3 { margin: 0; font-size: 20px; line-height: 1.3; }

.practice-workspace :is(.practice-workspace__banner, #practiceViewState, #practiceTranscript, #practiceReport) {
  margin: 0;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-color: currentColor;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  overflow-wrap: anywhere;
}

#practiceViewState:is(
  [data-status="error"],
  [data-status="unauthorized"],
  [data-status="externally_blocked"]
) {
  background: #fff1f2;
  color: #9f1239;
}

#practiceViewState:is(
  [data-status="empty"],
  [data-status="not_configured"]
) {
  background: #fff7ed;
  color: #9a3412;
}

.practice-workspace [data-status="cleared"] {
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  color: var(--text-secondary, #64748b);
}

#practiceEvidence {
  display: grid;
  gap: var(--space-2, 8px);
  margin: 0;
  padding-left: 20px;
}

@media (max-width: 640px) {
  .practice-workspace :is(input, select, textarea, button) { min-height: var(--control-height-touch, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .practice-workspace, .practice-workspace * { transition-duration: 0s !important; animation-duration: 0s !important; }
}
