/* =========================================================
   Alignment layer — one rhythm for every panel, card, button
   and menu. Loads after the theme sheets and before mobile.css.
   ========================================================= */

/* Panels and section headings. */
.panel { padding: 22px 22px 24px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.section-heading > div { min-width: 0; }
.panel .eyebrow { margin: 0 0 6px; }
.panel h2 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.help-text, .riff-help { margin: 0 0 14px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.section-heading .help-text { margin: 0; max-width: 46%; text-align: right; }
.riff-summary { margin: 10px 0 0; }

/* Tool cards: the same box everywhere. */
.mode-nav, .neighbours, .chord-tools, .strings-row, .maps-bar, .fret-focus-tool, .neck-view-tool, .audio-tool, .midi-card,
.scale-notes-block, .key-controls-card {
  padding: 14px 16px;
  border: 1px solid rgba(240, 168, 60, .24);
  border-radius: 13px;
  background: rgba(9, 13, 26, .55);
  margin: 0 0 12px;
}
.fret-tools { display: grid; gap: 12px; margin: 0 0 12px; align-items: stretch; }
.fret-tools > * { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.strings-row { margin: 0 0 12px; }
.maps-bar-below { margin: 12px 0 0; }
.pattern-guide-actions { margin-top: 12px; padding: 14px 0 0; }

/* Card copy: heading + one line, identical everywhere. */
.fret-tool-copy, .strings-copy, .maps-copy, .chord-tools-copy, .pattern-guide-copy, .scale-notes-heading > div { display: grid; gap: 4px; }
.fret-tool-copy strong, .strings-copy strong, .maps-copy strong, .chord-tools-copy strong, .pattern-guide-copy strong,
.scale-notes-heading strong, .mode-nav-heading strong, .neighbours .mode-nav-heading strong, .key-group-heading strong {
  font-size: .86rem; letter-spacing: .04em; color: var(--text); font-family: inherit;
}
.fret-tool-copy span, .strings-copy span, .maps-copy span, .chord-tools-copy span:not(.chord-name-active), .pattern-guide-copy span,
.scale-notes-heading span, .neighbours-hint, .key-group-heading span, .diatonic-heading { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.dock-label, .control-label, .quick-action-label, .fret-focus-label {
  display: block; margin: 0 0 6px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.fret-focus-label { display: inline-block; margin: 0; }

/* Controls inside cards: 40px tall, 10px radius, same paddings. */
.text-button, .secondary-button, .primary-button, .small-tool-button, .audio-toggle, .segmented .text-button, .sighting-chip, .string-toggle {
  min-height: 40px; border-radius: 10px; font-size: .8rem;
}
.text-button, .secondary-button, .small-tool-button { padding: 0 14px; }
.primary-button { padding: 0 18px; }
.segmented { border-radius: 10px; }
.segmented .text-button { border-radius: 0; min-width: 48px; }
.compact-chord-select .star-select-trigger, .compact-star-select .star-select-trigger, .dock-select .star-select-trigger,
.riff-style-select .star-select-trigger, .key-root-select .star-select-trigger, .midi-input-select .star-select-trigger, .preset-select .star-select-trigger {
  min-height: 40px; border-radius: 10px; padding: 0 10px 0 12px; font-size: .84rem;
}
.control-grid .star-select-trigger { min-height: 46px; }

/* Rows of controls line up on one baseline. */
.note-action-buttons, .chord-tools-controls, .strings-controls, .sighting-actions, .riff-actions, .audio-controls, .neck-view-controls,
.fret-focus-controls, .range-row, .quick-action-group, .midi-row, .maps-slots, .key-controls, .dock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.riff-actions { display: flex; }
.key-controls, .riff-controls { align-items: flex-end; gap: 12px 18px; }
.riff-controls { display: flex; flex-wrap: wrap; margin: 0 0 14px; }
.quick-actions { margin-top: 14px; }
.scale-notes-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.scale-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; color: var(--muted); font-size: .76rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.note-chip { min-height: 44px; min-width: 50px; }
.string-toggle { min-width: 56px; }

/* Grids of option cards share one gap and one card style. */
.mode-nav-buttons, .neighbour-list, .diatonic-row, .key-list, .sighting-results { gap: 8px; }
.mode-btn, .neighbour-btn, .diatonic-btn, .key-option, .sighting-result, .riff-chip, .map-slot { border-radius: 10px; }
.mode-nav-heading { margin-bottom: 10px; }
.neighbours .mode-nav-heading { align-items: baseline; }

/* Harmony panel spacing. */
.harmony-panel .mode-nav, .harmony-panel .neighbours { margin-bottom: 12px; }
.harmony-panel .chord-tools { margin-bottom: 0; }

/* Helm rows sit on one line height. */
.text-button.helm-tool, .helm-select .star-select-trigger { min-height: 38px; border-radius: 9px; }

/* The Control Center rail and flyouts. */
.dock-row .text-button { min-height: 38px; }
.dock-field { margin: 0 0 10px; }


/* Flow strip: the page in six steps, each a link. */
.flow-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.flow-strip a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px;
  border: 1px solid rgba(240, 168, 60, .26); border-radius: 999px; background: rgba(9, 13, 26, .55);
  color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-decoration: none;
}
.flow-strip a small { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(240, 168, 60, .18); color: var(--brass-bright); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .78rem; }
.flow-strip a:hover { border-color: var(--brass-bright); color: var(--text); }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* Help button: top right of the header, and in the Control Center rail. */
.hero { position: relative; }
.help-button {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px;
  border: 1px solid rgba(240, 168, 60, .45); border-radius: 999px; background: rgba(9, 13, 26, .7);
  color: var(--brass-bright); font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-decoration: none;
  box-shadow: 0 0 14px rgba(240, 168, 60, .18);
}
.help-button span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #f2d48a, #b88d3f); color: #10131f; font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.help-button:hover { border-color: var(--brass-bright); background: rgba(240, 168, 60, .12); }
.dock-link { text-decoration: none; }
@media (max-width: 760px) { .help-button { position: static; margin-bottom: 12px; } }