/* Studio 2 display skins — Classic | Studio. Layout tokens only; palette matches main.css. */

:root,
[data-display='classic'],
[data-display='studio'] {
  --display-bg: #09090b;
  --display-fg: #e4e4e7;
  --display-muted: #a1a1aa;
  --display-border: rgba(255, 255, 255, 0.1);
  --display-amber: #fbbf24;
  --display-amber-fg: #09090b;
  --display-radius: 8px;
  --display-focus: rgba(252, 211, 77, 0.5);
}

[data-display='classic'] {
  --chrome-gap: 0.5rem;
  --rail-h: 2.25rem;
  --card-pad: 0.75rem;
  --display-type-title: 1.75rem;
  --display-type-body: 0.875rem;
}

[data-display='studio'] {
  --chrome-gap: 1rem;
  --rail-h: 3rem;
  --card-pad: 1rem;
  --display-type-title: 1.875rem;
  --display-type-body: 0.9375rem;
}

[data-display] .display-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: var(--rail-h);
}

[data-display] .display-rail__seg {
  min-height: var(--rail-h);
  border-radius: var(--display-radius);
  border: 1px solid var(--display-border);
  padding: 0.5rem 1rem;
  font-size: var(--display-type-body);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

[data-display] .display-rail__seg:focus-visible {
  box-shadow: 0 0 0 2px var(--display-focus);
}

[data-display] .display-rail__seg[aria-pressed='true'],
[data-display] .display-rail__seg[data-active='true'] {
  border-color: var(--display-amber);
  background: var(--display-amber);
  color: var(--display-amber-fg);
}

[data-display] .display-rail__seg:disabled,
[data-display] .display-rail__seg[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

[data-display='studio'] .display-rail__seg {
  font-weight: 600;
  padding: 0.625rem 1.25rem;
}

[data-display] .display-cta {
  border-radius: calc(var(--display-radius) + 4px);
  background: var(--display-amber);
  color: var(--display-amber-fg);
  font-weight: 600;
}

[data-display] .display-cta:focus-visible {
  box-shadow: 0 0 0 2px var(--display-focus);
}