/* MANOUKE DISPLAY PROFILE v6 */
.grille-display-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}
.grille-display-toolbar .grille-view-switcher { margin: 0; }
.viewer-display-preferences-toggle {
  padding: 7px 11px;
  border: 1px solid #d7c8b5;
  border-radius: 9px;
  background: rgba(255,255,255,.72);
  color: #5a4632;
  font: 700 12px/1 Inter, "Segoe UI", sans-serif;
  cursor: pointer;
}
.viewer-display-preferences-toggle:hover,
.viewer-display-preferences-toggle[aria-expanded="true"] { background: #f7ead7; }
.viewer-display-preferences-panel {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  width: min(780px, 100%);
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #dfd2c1;
  border-radius: 10px;
  background: rgba(255,255,255,.82);
}
.viewer-display-preferences-panel[hidden] { display: none !important; }
.viewer-display-setting { display: flex; align-items: center; gap: 8px; }
.viewer-display-setting-label { color: #6b5a46; font-size: 12px; font-weight: 700; }
.viewer-display-choice { display: inline-flex; gap: 3px; padding: 2px; border-radius: 8px; background: #f3eee7; }
.viewer-display-choice button {
  padding: 5px 8px; border: 0; border-radius: 6px; background: transparent;
  color: #5a4632; font: 600 11px/1 Inter, "Segoe UI", sans-serif; cursor: pointer;
}
.viewer-display-choice button.is-active { background: #f0d9b5; box-shadow: inset 0 0 0 1px rgba(90,70,50,.14); }
.viewer-display-preferences-status { flex: 1 1 220px; color: #766b60; font-size: 11px; }
.viewer-display-preferences-status.is-saving { opacity: .7; }
.viewer-display-preferences-status.is-error { color: #9c3b32; }

body[data-viewer-bar-size="compact"] {
  --manouke-classic-bar-height: 44px;
  --manouke-classic-bar-height-mobile: 44px;
  --manouke-grille-bar-min-height: 108px;
  --manouke-grille-bar-padding: 4px;
}
body[data-viewer-bar-size="normal"] {
  --manouke-classic-bar-height: 62px;
  --manouke-classic-bar-height-mobile: 58px;
  --manouke-grille-bar-min-height: 150px;
  --manouke-grille-bar-padding: 6px;
}
body[data-viewer-bar-size="large"] {
  --manouke-classic-bar-height: 90px;
  --manouke-classic-bar-height-mobile: 82px;
  --manouke-grille-bar-min-height: 203px;
  --manouke-grille-bar-padding: 8px;
}

/* Grille card must follow the scaled SVG instead of keeping the old 150px box. */
#viewerGrillePane .bar {
  min-height: var(--manouke-grille-bar-min-height, 150px);
  padding: var(--manouke-grille-bar-padding, 6px);
}

body[data-viewer-chord-size="small"] {
  --manouke-classic-chord-size: 13px;
  --manouke-classic-chord-size-mobile: 12px;
  --manouke-classic-symbol-size: 16px;
  --manouke-classic-symbol-size-mobile: 15px;
}
body[data-viewer-chord-size="normal"] {
  --manouke-classic-chord-size: 15px;
  --manouke-classic-chord-size-mobile: 14px;
  --manouke-classic-symbol-size: 19px;
  --manouke-classic-symbol-size-mobile: 18px;
}
body[data-viewer-chord-size="large"] {
  --manouke-classic-chord-size: 18px;
  --manouke-classic-chord-size-mobile: 17px;
  --manouke-classic-symbol-size: 23px;
  --manouke-classic-symbol-size-mobile: 22px;
}

@media (max-width: 600px) {
  .viewer-display-preferences-panel { align-items: stretch; }
  .viewer-display-setting { justify-content: space-between; width: 100%; }
}
@media print {
  .viewer-display-preferences-toggle,
  .viewer-display-preferences-panel { display: none !important; }
}


/* =========================================================
   BARS PER ROW
   ---------------------------------------------------------
   Auto preserves each renderer's native responsive behavior.
   Fixed counts only control row breaks. Bar size remains the
   authority for the actual physical size of Grille SVG cards.
========================================================= */
body[data-viewer-bars-per-row="2"] #viewerGrillePane .bar-grid,
body[data-viewer-bars-per-row="4"] #viewerGrillePane .bar-grid,
body[data-viewer-bars-per-row="6"] #viewerGrillePane .bar-grid,
body[data-viewer-bars-per-row="8"] #viewerGrillePane .bar-grid {
  display: grid;
  grid-auto-flow: row;
  align-items: start;
  justify-content: start;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 3px;
}
body[data-viewer-bars-per-row="2"] #viewerGrillePane .bar-grid { grid-template-columns: repeat(2, max-content); }
body[data-viewer-bars-per-row="4"] #viewerGrillePane .bar-grid { grid-template-columns: repeat(4, max-content); }
body[data-viewer-bars-per-row="6"] #viewerGrillePane .bar-grid { grid-template-columns: repeat(6, max-content); }
body[data-viewer-bars-per-row="8"] #viewerGrillePane .bar-grid { grid-template-columns: repeat(8, max-content); }

body[data-viewer-bars-per-row="2"] .classic-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-viewer-bars-per-row="4"] .classic-bars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-viewer-bars-per-row="6"] .classic-bars { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body[data-viewer-bars-per-row="8"] .classic-bars { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* Fixed desktop choices get a safe mobile fallback instead of micro-bars. */
@media (max-width: 760px) {
  body[data-viewer-bars-per-row="4"] #viewerGrillePane .bar-grid,
  body[data-viewer-bars-per-row="6"] #viewerGrillePane .bar-grid,
  body[data-viewer-bars-per-row="8"] #viewerGrillePane .bar-grid {
    grid-template-columns: repeat(2, max-content);
  }
  body[data-viewer-bars-per-row="4"] .classic-bars,
  body[data-viewer-bars-per-row="6"] .classic-bars,
  body[data-viewer-bars-per-row="8"] .classic-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  body[data-viewer-bars-per-row="2"] #viewerGrillePane .bar-grid,
  body[data-viewer-bars-per-row="4"] #viewerGrillePane .bar-grid,
  body[data-viewer-bars-per-row="6"] #viewerGrillePane .bar-grid,
  body[data-viewer-bars-per-row="8"] #viewerGrillePane .bar-grid {
    grid-template-columns: max-content;
  }
  body[data-viewer-bars-per-row="2"] .classic-bars,
  body[data-viewer-bars-per-row="4"] .classic-bars,
  body[data-viewer-bars-per-row="6"] .classic-bars,
  body[data-viewer-bars-per-row="8"] .classic-bars {
    grid-template-columns: 1fr;
  }
}