/* shadcn/ui "Maia" look (Stone + Emerald) layered over styles.css. Tokens live in /melon-shell.css. */
:root {
  color-scheme: light;
  --bg-top: var(--m-page);
  --bg-bottom: var(--m-page);
  --panel: var(--m-card);
  --text: var(--m-fg);
  --muted: var(--m-muted-fg);
  --line: var(--m-border);
  --accent: var(--m-primary);
  --accent-strong: var(--m-primary-hover);
  --chip: var(--m-card);
  --shadow: 0 0 0 1px var(--m-ring-line);
  --mt-line: var(--m-border);
  --mt-accent: var(--m-primary);
  --mt-accent-weak: var(--m-primary-soft);
  /* Read by /melon-support.js so the bottom bar matches. */
  --surface: color-mix(in srgb, var(--m-card) 88%, transparent);
  --border: var(--m-border);
}

body {
  background: var(--m-page);
  color: var(--m-fg);
  font-family: var(--m-font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: auto;
  max-width: 1440px;
  padding: 0 24px 72px;
  gap: 16px;
}

/* Keep the grid inside the viewport; the chord matrix scrolls on its own. */
.page,
.workspace {
  grid-template-columns: minmax(0, 1fr);
}

.workspace,
.workspace-top,
.workspace-lower {
  gap: 16px;
}

.workspace-top > *,
.workspace-lower > * {
  min-width: 0;
}

/* Three columns from 1100px instead of 1480px. */
@media (min-width: 1100px) {
  .workspace-lower {
    grid-template-columns: 240px minmax(0, 1fr) 220px;
  }

  .browser-variants-panel,
  .export-panel {
    width: auto;
    height: 560px;
  }
}

.mt-panel,
.diagram-stage {
  border: 0;
  border-radius: var(--m-radius-card);
  background: var(--m-card);
  box-shadow: 0 0 0 1px var(--m-ring-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mt-panel {
  padding: 18px;
}

.preset-title {
  display: none;
}

.preset-toolbar {
  display: flex;
}

.mt-button,
.mt-chip {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--m-border);
  border-radius: 999px;
  background: var(--m-input-bg);
  color: var(--m-fg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mt-button--compact,
.mt-chip {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.mt-button:hover,
.mt-button:focus-visible,
.mt-chip:hover {
  border-color: var(--m-border);
  background: var(--m-muted);
  color: var(--m-fg);
}

.mt-button:focus-visible,
.mt-chip:focus-visible,
.mt-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--m-focus);
}

.export-panel .mt-button:first-child {
  border-color: var(--m-primary);
  background: var(--m-primary);
  color: var(--m-primary-fg);
}

.export-panel .mt-button:first-child:hover {
  background: var(--m-primary-hover);
}

.mt-chip.is-active,
.mt-mode-chip.is-active,
.mt-browser-family-chip.is-active {
  border-color: var(--m-primary);
  background: var(--m-primary);
  color: var(--m-primary-fg);
}

.mt-preset-chip {
  border: 1px solid var(--m-border);
  border-radius: 999px;
  background: var(--m-input-bg);
  font-size: 13px;
  font-weight: 500;
}

.mt-preset-chip.is-tonic-related,
.mt-preset-chip.is-subdominant-related,
.mt-preset-chip.is-dominant-related {
  border-color: var(--m-border);
  background: var(--m-input-bg);
}

.mt-preset-chip:hover {
  background: var(--m-muted);
}

.mt-preset-chip.is-active,
.mt-preset-chip.is-active.is-tonic-related,
.mt-preset-chip.is-active.is-subdominant-related,
.mt-preset-chip.is-active.is-dominant-related {
  border-color: var(--m-primary);
  background: var(--m-primary);
  color: var(--m-primary-fg);
}

.mt-input {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--m-border);
  border-radius: 999px;
  background: var(--m-input-bg);
  font-size: 14px;
}

.mt-browser-result,
.mt-browser-variant,
.set-item {
  border: 0;
  border-radius: var(--m-radius-card);
  background: var(--m-muted);
}

.mt-browser-result:hover,
.mt-browser-variant:hover {
  background: color-mix(in srgb, var(--m-fg) 7%, var(--m-muted));
}

.mt-browser-result.is-active,
.mt-browser-variant.is-active,
.set-item.is-active {
  background: var(--m-primary-soft);
  color: var(--m-primary-soft-fg);
  box-shadow: inset 0 0 0 1px var(--m-primary);
}

.mt-browser-result-label,
.mt-browser-variant-label {
  font-weight: 600;
}