/* /geoshred-banks-and-presets/ — MIDI Bank Select & Program reference
   for every GeoShred setlist. Mirrors the feature-comparison page chrome:
   light fold background, container, display font for title. The table
   styles preserve the original WP layout (orange-bordered note box,
   alternating row tint, uppercase h3 section headers). */

.bp-page {
  background: var(--mf-fold-light);
  color: var(--mf-text-primary);
  min-height: calc(100vh - var(--mf-header-height));
}

.bp-inner {
  max-width: var(--mf-container-width);
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.bp-title {
  font-family: var(--mf-font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mf-text-white);
  margin: 0;
}

.bp-subtitle {
  font-family: var(--mf-font-body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--mf-text-meta);
  margin: 0.5rem 0 0;
}

/* ---------- Table wrapper ---------- */

.mf-banks-tables {
  margin-top: 2rem;
}

.mf-banks-tables p.mf-banks-note {
  background: var(--mf-bg-alt);
  border-left: 4px solid var(--mf-accent-orange);
  padding: 0.85rem 1.2rem;
  margin: 0 0 1.75rem;
  font-family: var(--mf-font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mf-text-meta);
}

.mf-banks-tables p.mf-banks-note a {
  color: var(--mf-accent-orange);
  text-decoration: none;
}

.mf-banks-tables p.mf-banks-note a:hover {
  color: var(--mf-accent-orange-hover);
  text-decoration: underline;
}

.mf-banks-tables p.mf-banks-summary {
  margin: 0 0 1.5rem;
  font-family: var(--mf-font-body);
  font-size: 0.9rem;
  color: var(--mf-text-meta);
}

.mf-banks-tables h3 {
  margin: 2rem 0 0.75rem;
  font-family: var(--mf-font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--mf-text-white);
  scroll-margin-top: calc(var(--mf-header-height) + 16px);
}

.mf-banks-tables h3 .mf-banks-h3-bank {
  display: inline-block;
  margin-left: 0.625rem;
  font-family: var(--mf-font-mono);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--mf-text-meta);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

/* "Download CSV" affordance on the Setlist Bank Numbers h3 — small
   bordered chip to the right of the title (inherits the h3's uppercase),
   same sharp-cornered orange family as the site buttons. */
.mf-banks-tables h3 .mf-banks-csv {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.35em 0.8em;
  border: 1px solid rgba(255, 107, 0, 0.55);
  font-family: var(--mf-font-body);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mf-accent-orange);
  text-decoration: none;
  vertical-align: 0.2em;
}

.mf-banks-tables h3 .mf-banks-csv:hover {
  background: var(--mf-accent-orange);
  color: var(--mf-text-white);
}

/* ---------- Tables ---------- */

.mf-banks-tables table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-family: var(--mf-font-body);
  font-size: 0.95rem;
}

.mf-banks-tables th,
.mf-banks-tables td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--mf-border-light);
  text-align: left;
  vertical-align: baseline;
}

.mf-banks-tables thead th {
  background: var(--mf-bg-alt);
  font-weight: 700;
  border-bottom: 1px solid var(--mf-border-strong);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.82rem;
  color: var(--mf-text-white);
}

.mf-banks-tables tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.02);
}

.mf-banks-tables tbody tr:hover td {
  background: rgba(128, 203, 196, 0.07);
}

.mf-banks-tables td a {
  color: var(--mf-accent-teal);
  text-decoration: none;
}

.mf-banks-tables td a:hover {
  text-decoration: underline;
}

.mf-banks-tables .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-family: var(--mf-font-mono);
}

.mf-banks-tables .bank {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 9em;
  font-family: var(--mf-font-mono);
}

/* Per-preset MIDI-mappings pages: all of a row's GeoShred controllers
   share one cell, spaced by a fixed margin — separate columns would
   size to the widest cell per column across the whole table, opening a
   huge gap after the first controller in every other row. */
.mf-banks-tables td.mf-map-targets {
  width: 100%;
}

.mf-banks-tables td.mf-map-targets .mf-map-t {
  display: inline-block;
  margin-right: 2.5em;
  white-space: nowrap;
}

.mf-banks-tables td.mf-map-targets .mf-map-t:last-child {
  margin-right: 0;
}

/* Inside effect:controller, the effect (namespace) part is teal and
   the controller name stays white (orange in MPE rows) — a clear
   two-colour split, and teal is never a link inside these cells. */
.mf-banks-tables td.mf-map-targets .mf-map-eff {
  color: var(--mf-accent-teal);
}

/* KeyY:KeyZ rows are MPE controllers on the Member Channels (all other
   rows ride the Manager Channel) — orange to set them apart. */
.mf-banks-tables tr.mf-map-mpe td,
.mf-banks-tables .mf-map-mpe-note {
  color: var(--mf-accent-orange);
}

.mf-banks-tables .mf-banks-user {
  margin-left: 0.4rem;
  opacity: 0.55;
  font-size: 0.85em;
}

@media (max-width: 700px) {
  .bp-inner { padding: 36px 14px 72px; }
  .mf-banks-tables { font-size: 0.88em; }
  .mf-banks-tables th,
  .mf-banks-tables td { padding: 8px 8px; }
  .mf-banks-tables .bank { width: 7em; }
}