/* abc-gui — base stylesheet. Scoped under .abc-gui-root.
 *
 * Theme tokens are exposed as CSS custom properties so a host can override
 * individual values and so dark mode (toggled via `.abc-gui-dark`) is a
 * pure CSS concern. Layout is stable: the score and properties pane have
 * fixed sizes to prevent UI jumping; the raw-text view sits below the two
 * and spans the full width. The root fills its host and scrolls
 * vertically when its content overflows.
 */

.abc-gui-root {
  /* Light theme tokens. Dark mode overrides these below. */
  --abc-bg: #fafafa;
  --abc-surface: #ffffff;
  --abc-surface-2: #f0f0f0;
  --abc-border: #ddd;
  --abc-border-strong: #ccc;
  --abc-text: #222;
  --abc-text-muted: #888;
  --abc-text-subtle: #555;
  --abc-btn-bg: #ffffff;
  --abc-btn-bg-hover: #eef;
  --abc-btn-text: #222;
  --abc-btn-active-bg: #d5e4ff;
  --abc-btn-active-border: #6b8fd6;
  --abc-selection-bg: #3b82f6;
  --abc-selection-text: #ffffff;
  --abc-score-fill: #111;
  --abc-score-stroke: #111;
  --abc-note-selected: #1659c7;
  --abc-panel-pane-width: 336px;
  --abc-score-pane-width: 560px;
  --abc-pane-height: 360px;
  --abc-control-size: 24px;
  --abc-control-size-compact: 28px;
  --abc-scrollbar-thumb: #b7bcc7;
  --abc-scrollbar-track: #eceff4;

  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--abc-text);
  background: var(--abc-bg);
  border: 1px solid var(--abc-border-strong);
  border-radius: 6px;
  /* Fill the host element — the embedder controls the outer sizing, we just
   * grow to match and scroll inside when needed. */
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  container-type: inline-size;
}

.abc-gui-dark {
  --abc-bg: #1e1f22;
  --abc-surface: #26282c;
  --abc-surface-2: #2c2f34;
  --abc-border: #3a3d42;
  --abc-border-strong: #4a4e54;
  --abc-text: #e4e6ea;
  --abc-text-muted: #8a8f97;
  --abc-text-subtle: #aab0b9;
  --abc-btn-bg: #2c2f34;
  --abc-btn-bg-hover: #3a3f47;
  --abc-btn-text: #e4e6ea;
  --abc-btn-active-bg: #2d4576;
  --abc-btn-active-border: #5380d6;
  --abc-selection-bg: #4f7dd6;
  --abc-selection-text: #ffffff;
  --abc-score-fill: #e4e6ea;
  --abc-score-stroke: #e4e6ea;
  --abc-scrollbar-thumb: #58606b;
  --abc-scrollbar-track: #24272c;
  /* Pre-inverted so that after the SVG-wide `filter: invert(1)
   * hue-rotate(180deg)` in dark mode, the selection reads as a bright
   * blue in the rendered score. */
  --abc-note-selected: #ff8679;
}

.abc-gui-toolbar-host {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: var(--abc-surface-2);
  border-bottom: 1px solid var(--abc-border);
  flex-shrink: 0;
}

.abc-gui-status-host {
  display: flex;
  align-items: stretch;
  padding: 0;
  background: var(--abc-surface-2);
  border-top: 1px solid var(--abc-border);
  flex-shrink: 0;
}

.abc-gui-statusbar {
  width: 100%;
}

.abc-gui-status-row {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.abc-gui-status-group {
  display: contents;
}

.abc-gui-status-item {
  flex: 1 1 0;
  min-width: 0;
  height: var(--abc-control-size);
  padding: 0 6px;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--abc-border);
  border-radius: 0;
  color: var(--abc-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.abc-gui-status-item:first-child {
  border-left: 1px solid var(--abc-border);
}

.abc-gui-status-item:hover { background: var(--abc-btn-bg-hover); }
.abc-gui-status-item:disabled {
  opacity: 0.7;
  cursor: default;
}

.abc-gui-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.abc-gui-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px 4px;
  background: var(--abc-surface);
  border: 1px solid var(--abc-border);
  border-radius: 4px;
}

.abc-gui-btn {
  min-width: var(--abc-control-size);
  height: var(--abc-control-size);
  padding: 0 5px;
  font-size: 13px;
  line-height: 1;
  background: var(--abc-btn-bg);
  border: 1px solid var(--abc-border-strong);
  border-radius: 3px;
  cursor: pointer;
  color: var(--abc-btn-text);
}
.abc-gui-btn:hover { background: var(--abc-btn-bg-hover); }
.abc-gui-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.abc-gui-btn.active {
  background: var(--abc-btn-active-bg);
  border-color: var(--abc-btn-active-border);
}

/* Body: score + panel side-by-side. Both flex to consume all remaining
 * height so the root host fills without overflowing. */
.abc-gui-body {
  display: flex;
  gap: 8px;
  padding: 8px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.abc-gui-score-host {
  /* Let panes grow/shrink to fill the row: score ~60%, panel ~40% */
  flex: 1 1 60% !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  background: var(--abc-surface);
  border: 1px solid var(--abc-border);
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
  overflow: auto !important;
  cursor: pointer;
}

/* The SVG abcjs emits inside the score host sometimes carries an inline
 * width/height matching the rendered content. That's fine — the host
 * scrolls — but we also want to guarantee the SVG isn't constrained to
 * `width: 100%` of a shrunken host in narrow layouts. */
.abc-gui-score-host > svg {
  display: block;
  max-width: none;
}

.abc-gui-panel-host {
  /* Fixed-width panel sized for: label + 7 square buttons + gaps + padding.
   * 70 (label) + 7*28 (buttons) + 7*4 (gaps) + 2*8 (padding) ≈ 310 → 320. */
  flex: 0 0 var(--abc-panel-pane-width) !important;
  width: var(--abc-panel-pane-width) !important;
  height: auto !important;
  min-width: 0;
  background: var(--abc-surface);
  border: 1px solid var(--abc-border);
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* Theme-aware scrollbars for dark/light modes. */
.abc-gui-root,
.abc-gui-score-host,
.abc-gui-panel-host,
.abc-gui-raw-host,
.abc-gui-raw-view-textarea {
  scrollbar-color: var(--abc-scrollbar-thumb) var(--abc-scrollbar-track);
}

.abc-gui-root::-webkit-scrollbar,
.abc-gui-score-host::-webkit-scrollbar,
.abc-gui-panel-host::-webkit-scrollbar,
.abc-gui-raw-host::-webkit-scrollbar,
.abc-gui-raw-view-textarea::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.abc-gui-root::-webkit-scrollbar-track,
.abc-gui-score-host::-webkit-scrollbar-track,
.abc-gui-panel-host::-webkit-scrollbar-track,
.abc-gui-raw-host::-webkit-scrollbar-track,
.abc-gui-raw-view-textarea::-webkit-scrollbar-track {
  background: var(--abc-scrollbar-track);
}

.abc-gui-root::-webkit-scrollbar-thumb,
.abc-gui-score-host::-webkit-scrollbar-thumb,
.abc-gui-panel-host::-webkit-scrollbar-thumb,
.abc-gui-raw-host::-webkit-scrollbar-thumb,
.abc-gui-raw-view-textarea::-webkit-scrollbar-thumb {
  background: var(--abc-scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid var(--abc-scrollbar-track);
}

.abc-gui-root::-webkit-scrollbar-thumb:hover,
.abc-gui-score-host::-webkit-scrollbar-thumb:hover,
.abc-gui-panel-host::-webkit-scrollbar-thumb:hover,
.abc-gui-raw-host::-webkit-scrollbar-thumb:hover,
.abc-gui-raw-view-textarea::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.92);
}

/* Wrapper that holds body + raw host. Fills remaining space after toolbar.
 * container-type: size lets children use cqh units (% of this element's
 * definite height) in narrow mode so max-height caps work correctly. */
.abc-gui-content-host {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

/* Raw view is pinned below the score+panel row and spans the full width. */
.abc-gui-raw-host {
  display: flex;
  flex-direction: column;
  margin: 0 8px 8px 8px;
  background: var(--abc-surface);
  border: 1px solid var(--abc-border);
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
  max-height: 40%;
}

.abc-gui-raw-host[hidden] {
  display: none !important;
}

/* Narrow: stack panes vertically. Toolbar is pinned; content-host scrolls
 * so the toolbar never scrolls away. Each pane is capped at half the
 * available height (root height minus toolbar). */
@container (max-width: 780px) {
  .abc-gui-root {
    overflow: hidden;
  }
  .abc-gui-toolbar-host {
    width: auto;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .abc-gui-content-host {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .abc-gui-body {
    width: auto;
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-direction: column;
    overflow: visible;
  }
  .abc-gui-score-host,
  .abc-gui-panel-host {
    /* Two stacked panes must fit inside content-host including body
     * vertical padding (8+8) and inter-pane gap (8): 24px total. */
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    max-height: calc((100cqh - 24px) / 2);
    overflow: auto !important;
  }
  .abc-gui-raw-host {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-height: calc(50cqh - 8px);
    overflow: auto;
  }
  .abc-gui-raw-view-textarea {
    height: auto;
    max-height: 100%;
  }
  .abc-gui-score-host > svg {
    position: static !important;
    height: auto !important;
  }
}
@media (max-width: 780px) {
  .abc-gui-root {
    overflow: hidden;
  }
  .abc-gui-toolbar-host {
    width: auto;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .abc-gui-content-host {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .abc-gui-body {
    width: auto;
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-direction: column;
    overflow: visible;
  }
  .abc-gui-score-host,
  .abc-gui-panel-host {
    /* Two stacked panes must fit inside content-host including body
     * vertical padding (8+8) and inter-pane gap (8): 24px total. */
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    max-height: calc((100cqh - 24px) / 2);
    overflow: auto !important;
  }
  .abc-gui-raw-host {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-height: calc(50cqh - 8px);
    overflow: auto;
  }
  .abc-gui-raw-view-textarea {
    height: auto;
    max-height: 100%;
  }
  .abc-gui-score-host > svg {
    position: static !important;
    height: auto !important;
  }
}

.abc-gui-panel-empty {
  color: var(--abc-text-muted);
  font-style: italic;
}

.abc-gui-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--abc-border);
}
.abc-gui-panel-header-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.abc-gui-kind { font-weight: 600; }
.abc-gui-range {
  color: var(--abc-text-muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.abc-gui-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
  min-width: 0;
}

.abc-gui-sep {
  border: none;
  border-top: 1px solid var(--abc-border);
  margin: 8px 0 4px;
}

.abc-gui-label {
  min-width: 70px;
  color: var(--abc-text-subtle);
  font-size: 13px;
}

.abc-gui-readout {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  font-family: ui-monospace, Menlo, monospace;
}

.abc-gui-muted {
  color: var(--abc-text-muted);
  font-size: 12px;
}

.abc-gui-input {
  font: inherit;
  height: var(--abc-control-size);
  padding: 3px 6px;
  border: 1px solid var(--abc-border-strong);
  border-radius: 3px;
  background: var(--abc-btn-bg);
  color: var(--abc-text);
  box-sizing: border-box;
  min-width: 0;
  font-size: 13px;
}
.abc-gui-input-small { width: 50px; flex: 0 0 50px; }
.abc-gui-input-flex { flex: 1 1 0; min-width: 0; }

.abc-gui-input-invalid {
  color: #a33;
  border-color: #d8a8a8;
}
.abc-gui-dark .abc-gui-input-invalid {
  color: #ff8a8a;
  border-color: #6b3a3a;
}

.abc-gui-section-title {
  margin: 8px 0 2px;
  font-weight: 600;
  font-size: 12px;
  color: var(--abc-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.abc-gui-chord-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 0;
}

.abc-gui-chord-tab {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  background: var(--abc-surface-2);
  color: var(--abc-text-subtle);
  min-width: var(--abc-control-size);
}

.abc-gui-chord-tab.abc-gui-active {
  background: var(--abc-surface);
  border-color: var(--abc-border-strong);
  border-bottom-color: var(--abc-surface);
  color: var(--abc-text);
  z-index: 1;
}

.abc-gui-chord-tab-add {
  margin-left: 4px;
  color: #080;
  border-color: var(--abc-border-strong);
}
.abc-gui-dark .abc-gui-chord-tab-add { color: #7cd17c; }

.abc-gui-chord-pane {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--abc-border-strong);
  border-radius: 0 3px 3px 3px;
  background: var(--abc-surface);
  margin-bottom: 6px;
}

.abc-gui-chord-note-remove {
  color: #a33;
  border-color: #d8a8a8;
  margin-top: 4px;
  align-self: flex-start;
}
.abc-gui-chord-note-remove:hover { background: #fbecec; }
.abc-gui-dark .abc-gui-chord-note-remove {
  color: #ff8a8a;
  border-color: #6b3a3a;
}
.abc-gui-dark .abc-gui-chord-note-remove:hover { background: #3b2626; }

.abc-gui-deco-row { flex-wrap: nowrap; overflow: visible; }
.abc-gui-deco-row.abc-gui-deco-extra { margin-top: 0; }
.abc-gui-binding-row { flex-wrap: nowrap; }

@container (max-width: 600px) {
  .abc-gui-toolbar-host { padding: 4px; gap: 4px; }
  .abc-gui-status-host { padding: 0; }
  .abc-gui-group { padding: 2px; }
  .abc-gui-btn {
    min-width: var(--abc-control-size-compact);
    height: var(--abc-control-size-compact);
    padding: 0 4px;
  }
  .abc-gui-status-item {
    height: var(--abc-control-size-compact);
    padding: 0 4px;
  }
  .abc-gui-input { height: var(--abc-control-size-compact); }
  .abc-gui-row { gap: 6px; }
  .abc-gui-body { padding: 6px; gap: 6px; }
  .abc-gui-score-host,
  .abc-gui-panel-host {
    flex-basis: auto !important;
    height: auto !important;
    max-height: calc((100cqh - 18px) / 2);
  }
  .abc-gui-raw-host {
    flex-basis: auto;
    height: auto;
    max-height: calc(50cqh - 8px);
  }
  .abc-gui-panel-host, .abc-gui-raw-host, .abc-gui-score-host { padding: 6px; }
}
@media (max-width: 600px) {
  .abc-gui-toolbar-host { padding: 4px; gap: 4px; }
  .abc-gui-status-host { padding: 0; }
  .abc-gui-group { padding: 2px; }
  .abc-gui-btn {
    min-width: var(--abc-control-size-compact);
    height: var(--abc-control-size-compact);
    padding: 0 4px;
  }
  .abc-gui-status-item {
    height: var(--abc-control-size-compact);
    padding: 0 4px;
  }
  .abc-gui-input { height: var(--abc-control-size-compact); }
  .abc-gui-row { gap: 6px; }
  .abc-gui-body { padding: 6px; gap: 6px; }
  .abc-gui-score-host,
  .abc-gui-panel-host {
    flex-basis: auto !important;
    height: auto !important;
    max-height: calc((100cqh - 18px) / 2);
  }
  .abc-gui-raw-host {
    flex-basis: auto;
    height: auto;
    max-height: calc(50cqh - 8px);
  }
  .abc-gui-panel-host, .abc-gui-raw-host, .abc-gui-score-host { padding: 6px; }
}

.abc-gui-prefix {
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--abc-border);
}

.abc-gui-raw {
  /* Row is rendered inline with label + input; separator above provides spacing. */
}
.abc-gui-raw-input {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}

.abc-gui-raw-view-textarea {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: 140px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  padding: 6px;
  border: 1px solid var(--abc-border-strong);
  border-radius: 3px;
  background: var(--abc-btn-bg);
  color: var(--abc-text);
  resize: vertical;
}

.abc-gui-raw-view-textarea::selection {
  background: var(--abc-selection-bg);
  color: var(--abc-selection-text);
}
.abc-gui-raw-view-textarea::-moz-selection {
  background: var(--abc-selection-bg);
  color: var(--abc-selection-text);
}
.abc-gui-raw-view-textarea:not(:focus)::selection {
  background: var(--abc-selection-bg);
  color: var(--abc-selection-text);
}

/* In dark mode, invert the abcjs SVG instead of rewriting fill/stroke on
 * every path. abcjs uses a mix of filled glyphs, stroked stems, and text;
 * blanket `fill`/`stroke` overrides break that nuance (notes become
 * hairline outlines instead of solid shapes). A hue-preserving invert
 * turns the black-on-white default into light-on-dark while keeping
 * relative contrast intact, and it also handles the sheet background
 * where abcjs draws a white rect behind the staff. */
.abc-gui-dark .abc-gui-score-host {
  /* Force text/elements to render black before inverting to bright white */
  color: #000;
}
.abc-gui-dark .abc-gui-score-host svg {
  filter: invert(1) hue-rotate(180deg);
  background: transparent;
}

/* Selected element highlight — must come AFTER the dark mode overrides so
 * the selection color wins. In dark mode the SVG is inverted (see above),
 * so the inverse of our desired accent is used as the raw fill; after the
 * parent `filter: invert` the user sees the accent color. */
.abc-gui-selected,
.abc-gui-selected * {
  fill: var(--abc-note-selected) !important;
  stroke: var(--abc-note-selected) !important;
}

/* abcjs marks slur/tie arcs as selectable SVG groups and focuses them on
 * click, which paints the browser's default focus outline (an orange
 * box). We handle selection ourselves and deliberately ignore arc clicks,
 * so suppress that focus ring. */
.abc-gui-score-host svg [data-name="slur"],
.abc-gui-score-host svg [data-name="tie"],
.abc-gui-score-host svg .abcjs-slur,
.abc-gui-score-host svg .abcjs-tie {
  outline: none !important;
}
.abc-gui-score-host svg [data-name="slur"]:focus,
.abc-gui-score-host svg [data-name="tie"]:focus,
.abc-gui-score-host svg .abcjs-slur:focus,
.abc-gui-score-host svg .abcjs-tie:focus,
.abc-gui-score-host svg [data-name="slur"]:focus-visible,
.abc-gui-score-host svg [data-name="tie"]:focus-visible,
.abc-gui-score-host svg .abcjs-slur:focus-visible,
.abc-gui-score-host svg .abcjs-tie:focus-visible {
  outline: none !important;
}