/* ═══════════════════════════════════════════════════════════════════════════
   Plugin 2 — scoped to `html.plugin2`, which also carries `.plugin`, so this
   builds on the condensed 1200x900 layout rather than replacing it.

   The instrument selector moves into the fretboard toolbar, and the top bar
   gains a preset dropdown plus undo/redo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The tabs were the middle `auto` column of a 1fr auto 1fr grid; with them gone
   the brand and controls close the gap instead of straddling an empty track. */
.plugin2 .topbar { grid-template-columns: auto 1fr; }
.plugin2 .top-controls { justify-content: flex-end; }

/* The instrument group is the widest item in the toolbar, and the tabs are self-evident:
   drop its label so a capo readout or a 7-string neck doesn't push the toolbar onto
   a second row, which costs ~44px in a layout with no vertical headroom. */
.plugin2 #instrumentGroup .tool-label { display: none; }

/* Sized to the toolbar's other controls (30px) rather than the top bar's. */
.plugin2 .fb-toolbar .instrument-tabs { padding: 2px; }
.plugin2 .fb-toolbar .inst-tab {
  width: auto;
  height: 24px;
  padding: 0 10px;
  gap: 6px;
  font-size: 12px;
  border-radius: 6px;
}
.plugin2 .fb-toolbar .inst-tab svg { width: 15px; height: 15px; }

/* The new top-bar cluster, matching .top-controls' own rhythm. */
.plugin2 .plug2-group { display: flex; align-items: center; gap: 8px; }
/* Fixed width, not min-width: preset names vary from "Bottomless" to "Suspended
   Heartbreak", and the top bar shouldn't reflow every time one is picked. */
.plugin2 .preset-dd .dropdown-btn { height: 34px; width: 168px; }
.plugin2 #presetMenu { width: 272px; max-height: 420px; overflow-y: auto; }

/* Presets are chosen by name; the chords they make in the current key sit under it. */
.plugin2 #presetMenu .dd-pick { flex-direction: column; align-items: flex-start; gap: 2px; }
.plugin2 #presetMenu .dd-item-name { font-size: 13px; color: var(--text); max-width: 100%; }
.plugin2 #presetMenu .dd-item-sub {
  max-width: 100%;
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plugin2 #presetMenu .dd-item.active .dd-item-sub { color: rgba(255, 255, 255, .7); }

/* Disabled undo/redo must read as unavailable, not merely unhovered. */
.plugin2 #undoBtn:disabled,
.plugin2 #redoBtn:disabled { opacity: .38; cursor: default; }
.plugin2 #undoBtn:disabled:hover,
.plugin2 #redoBtn:disabled:hover { background: var(--panel-3); color: var(--text-2); }