.playground-shell {
  display: grid;
  gap: var(--sdf-space-lg);
  margin: var(--sdf-space-xl) 0 var(--sdf-space-3xl);
}

.playground-toolbar {
  align-items: end;
  background: var(--sdf-color-toolbar);
  border: 1px solid var(--sdf-color-border);
  border-radius: var(--sdf-radius-control);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sdf-space-md);
  padding: var(--sdf-space-md);
}

.playground-toolbar label {
  display: grid;
  gap: var(--sdf-space-2xs);
  margin: 0;
}

.playground-toolbar label > span,
.playground-editor > label {
  color: var(--sdf-color-muted);
  font-size: var(--sdf-font-size-label);
  font-weight: var(--sdf-font-weight-semibold);
}

.playground-toolbar select,
.playground-toolbar input[type="number"] {
  min-height: var(--sdf-height-control);
  border: 1px solid var(--sdf-color-control-border);
  border-radius: var(--sdf-radius-control);
  padding: var(--sdf-space-2xs) var(--sdf-space-sm);
}

.playground-toolbar input[type="number"] {
  width: 92px;
}

.playground-checkbox {
  align-items: center;
  display: flex !important;
  flex-direction: row;
  gap: var(--sdf-space-sm) !important;
  min-height: var(--sdf-height-control);
}

.playground-toolbar button {
  min-height: var(--sdf-height-control);
  border: 1px solid var(--sdf-color-primary);
  border-radius: var(--sdf-radius-control);
  background: var(--sdf-color-primary);
  color: var(--sdf-color-white);
  cursor: pointer;
  font-weight: var(--sdf-font-weight-semibold);
  padding: 5px var(--sdf-space-md);
}

.playground-toolbar button:disabled {
  background: var(--sdf-color-disabled);
  border-color: var(--sdf-color-disabled);
  cursor: wait;
}

.playground-toolbar button#playground-copy {
  background: var(--sdf-color-success);
  border-color: var(--sdf-color-success);
}

.playground-status {
  align-self: center;
  color: var(--sdf-color-muted);
  min-height: var(--sdf-height-status);
}

.playground-grid {
  display: grid;
  gap: var(--sdf-space-lg);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.playground-editor {
  display: grid;
  gap: var(--sdf-space-xs);
  margin: 0;
  min-width: 0;
}

.playground-editor textarea {
  min-height: var(--sdf-height-editor);
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--sdf-color-editor-border);
  border-radius: var(--sdf-radius-control);
  font-family: var(--sdf-font-family-mono);
  font-size: var(--sdf-font-size-code);
  line-height: 1.5;
  padding: var(--sdf-space-md);
  resize: vertical;
  tab-size: 4;
}

.playground-editor textarea:focus,
.playground-toolbar select:focus,
.playground-toolbar input:focus,
.playground-toolbar button:focus {
  outline: 3px solid var(--sdf-color-focus);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  .playground-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .playground-editor textarea {
    min-height: var(--sdf-height-editor-compact);
  }
}