/* ═══════════════════════════════════════════════════════════════════════════
   Plugin mode — everything here applies only under `html.plugin`, which is set
   when the app is loaded as index.html#plugin (see plugin.html).

   Target: a 1200x900 window with no scrolling. The app's own responsive rules
   already handle the width, so this file only buys back vertical space.

   At 1200x900 the column measures 927px: 18 padding + 36 topbar + 16 gap +
   837 content + 20 padding. The 27px overflow is all chrome, so it comes out
   of padding and gaps — the neck, suggestion cards and progression slots keep
   their size, since those carry the actual information.
   ═══════════════════════════════════════════════════════════════════════════ */

.plugin body { overflow: hidden; } /* a plugin window never scrolls its host canvas */

/* Outer shell: -6px top, -8px bottom, -6px row gap. */
.plugin .app {
  padding: 12px 16px 12px;
  gap: 10px 16px;
}

/* Between the four stacked sections: -4px x3. */
.plugin .main { gap: 10px; }

/* Panel chrome: -4px top and -6px bottom on each of the three panels. */
.plugin .instrument-panel { padding: 10px 14px 8px; }
.plugin .suggest-panel,
.plugin .progression-panel { padding: 10px 14px 10px; }
.plugin .sidebar { padding: 12px 12px 12px; }

/* The chord bar sits tight under the board. */
.plugin .chord-bar { margin-top: 6px; gap: 10px; }

/* Transport: the tallest row of chrome for the least information. */
.plugin .transport { padding: 8px 14px; gap: 16px; }
.plugin .play-btn { width: 48px; height: 48px; }
.plugin .play-btn svg { width: 22px; height: 22px; }
.plugin .loop-btn { width: 38px; height: 38px; border-radius: 10px; }
.plugin .transport .btn { height: 36px; padding: 0 18px; }
.plugin .v-divider.tall { height: 32px; }

/* Headers: a little less air above each panel's content. */
.plugin .panel-head { margin-bottom: 8px; }

/* Keep the board from being the thing that overflows on a short window. */
.plugin .board-scroll { padding-bottom: 2px; }