/* shadcn/ui "Maia" look (Stone + Emerald) layered over styles.css. Tokens live in /melon-shell.css. */
:root {
  --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;
}

/* Export options: PNG size and background, print. */
.export-option {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.export-label {
  color: var(--m-muted-fg);
  font-size: 12px;
  font-weight: 500;
}

.export-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.export-chips .mt-chip {
  flex: 1 1 auto;
}

.export-chips .mt-chip.is-active {
  border-color: var(--m-primary);
  background: var(--m-primary-soft);
  color: var(--m-primary-soft-fg);
}

.export-note {
  margin: 0;
  color: var(--m-muted-fg);
  font-size: 12px;
  line-height: 1.4;
}

.set-columns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--m-muted-fg);
  font-size: 13px;
}

.set-columns select {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  background: var(--m-input-bg);
  color: var(--m-fg);
  font: inherit;
}

.set-actions {
  flex-wrap: wrap;
  align-items: center;
}

.export-panel {
  overflow: auto;
}

/* Dark mode: the chord diagrams are drawn in greys on transparent; inverted they turn white on the
 * dark panels. Only the on-screen previews – exports and prints keep the dark-on-light drawing. */
[data-theme="dark"] .svg-preview svg,
[data-theme="dark"] .mt-browser-variant-preview svg,
[data-theme="dark"] .set-item-preview svg {
  filter: invert(1);
}