/* ============================================================================
 * mode-map.css — the Mode Map staircase panel (scale page).
 * Refines the hand-drawn reference: clean grid, design-token spacing/type,
 * tinted diatonic vs chromatic columns, a stepped highlight band per mode,
 * and colour-coded diatonic chord chips.  All sizing in rem via tokens so
 * it honours the user's Interface-size + density prefs.
 * ========================================================================== */

.mode-map {
  padding: 0; overflow: hidden;
  /* Shared design tokens — declared on the panel root so BOTH the grid
     cells AND the overlaid SVG staircase (siblings) inherit them.  (When
     these lived on .mode-map-grid the SVG path couldn't see --mm-stair,
     so its stroke fell back to none and the line disappeared.) */
  --mm-grid-line:  color-mix(in srgb, var(--border, #e1ddd2) 70%, transparent);
  --mm-stair:      var(--text, #1a1a1a);
  --mm-chrom-bg:   color-mix(in srgb, var(--border, #e1ddd2) 10%, transparent);
}

/* ── Collapsible header ─────────────────────────────────────────────── */
.mode-map-header {
  display: flex; align-items: baseline; gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: 0; background: transparent;
  cursor: pointer; text-align: left;
  font: inherit; color: var(--text, #2a2a2a);
}
.mode-map-caret {
  font-size: var(--font-xs); color: var(--text-3, #b8b3a3);
  transform: rotate(-90deg); transition: transform var(--t-fast, .12s);
}
.mode-map-header.is-open .mode-map-caret { transform: none; }
.mode-map-title { font-weight: var(--weight-bold); font-size: var(--font-md, 15px); }
.mode-map-sub   { font-size: var(--font-sm); color: var(--text-2, #777); font-weight: 400; }

.mode-map-body {
  padding: 0 var(--space-lg) var(--space-lg);
  overflow-x: auto;            /* wide grids scroll horizontally, not the page */
}

/* ── Grid ───────────────────────────────────────────────────────────── */
.mode-map-grid {
  display: grid;
  /* 4 info columns sized to content, then N equal chromatic columns. */
  /* 4 info columns, a spacer column (breathing room between the 7th
     column and the first interval), then N equal chromatic columns. */
  grid-template-columns:
    auto auto auto auto
    var(--mm-gap-col, 0.7rem)
    repeat(var(--mm-cols, 24), minmax(2.1rem, 1fr));
  align-items: stretch;
  gap: 0;
  min-width: max-content;
  /* Base size for the whole table so mode names / chords are never smaller
     than the interval numbers. */
  font-size: var(--font-base, 1rem);
}

/* Header cells. */
.mode-map-grid .mm-h {
  font-weight: var(--weight-semibold, 600);
  color: var(--text-3, #999);
  text-align: center;
  padding: var(--space-2xs) 0 var(--space-xs);
}
.mode-map-grid .mm-h.mm-info { font-size: var(--font-xs); text-align: left; padding-left: var(--space-xs); }
/* Column header interval labels match the body cell size (not smaller). */
.mode-map-grid .mm-h.mm-col {
  box-sizing: border-box;
  border-top:  1px solid var(--mm-grid-line);   /* close the grid at the top */
  border-left: 1px solid var(--mm-grid-line);
  display: flex; align-items: center; justify-content: center;
  /* Match the body cells — the chromatic header row must not be smaller
     than the degree numbers / info fields below it. */
  font-size: var(--font-base, 1rem);
}
/* Right-most header cell closes the grid's top-right corner. */
.mode-map-grid .mm-h.mm-col:last-child { border-right: 1px solid var(--mm-grid-line); }
.mode-map-grid .mm-col.is-diatonic  { color: var(--text, #2a2a2a); font-weight: var(--weight-bold); }
.mode-map-grid .mm-col.is-chromatic { color: var(--text-3, #c4bfb2); }
.mode-map-grid .mm-octave-line { border-left-width: 2px; border-left-color: var(--text-3, #b8b3a3); }

/* Info (left) cells — gridded to match the chromatic grid. */
.mode-map-grid .mm-cell {
  box-sizing: border-box;
  border: 1px solid var(--mm-grid-line);
  padding: var(--space-xs) var(--space-sm);
  display: flex; align-items: center;
}
/* Header info cells share the same top/left border so the whole table
   (info columns + chromatic grid) reads as one continuous grid. */
.mode-map-grid .mm-h.mm-info {
  box-sizing: border-box;
  border-top:  1px solid var(--mm-grid-line);
  border-left: 1px solid var(--mm-grid-line);
}
.mode-map-grid .mm-h.mm-info--num { border-left: 1px solid var(--mm-grid-line); }
.mode-map-grid .mm-info {
  white-space: nowrap;
  padding-left: var(--space-xs); padding-right: var(--space-sm);
}
.mode-map-grid .mm-info--num { color: var(--text-3, #999); justify-content: center; padding-right: var(--space-xs); }
/* Modes + chords at least as large as the interval numbers — and bolder. */
.mode-map-grid .mm-name  { font-weight: var(--weight-bold, 700); }
.mode-map-grid .mm-chord { font-weight: var(--weight-bold, 700); }

/* Clickable mode names + chord chips. */
.mode-map-grid .mm-info.is-clickable { cursor: pointer; }
.mode-map-grid .mm-name.is-clickable:hover { color: var(--accent, #c85a1a); }
.mode-map-grid .mm-chord.is-clickable:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Diatonic chord chips — colour-coded by quality. */
.mode-map-grid .mm-chord {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold, 600);
}
.mm-chord--maj     { color: #1b6e3c; }
.mm-chord--dom     { color: #9a6212; }
.mm-chord--min     { color: #2b5d8a; }
.mm-chord--dim     { color: #9a2f2f; }
.mm-chord--halfdim { color: #7a3ca0; }
.mm-chord--minmaj,
.mm-chord--augmaj,
.mm-chord--aug     { color: #8a5a12; }
.mm-chord--sus,
.mm-chord--other   { color: var(--text-2, #777); }

/* ── Graph-paper grid (thin) ────────────────────────────────────────────
   Every chromatic position is a thin-bordered cell.  The BOLD staircase is
   NOT drawn here — it's a single continuous SVG <path> overlaid on top
   (.mode-map-stair), so its corners are perfect and never interrupted by a
   cell joint. */
.mode-map-gridwrap { position: relative; width: max-content; }
.mode-map-stair {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
}
.mode-map-stair-path {
  fill: none;
  stroke: var(--mm-stair);
  stroke-width: 3;
  stroke-linejoin: miter;
  stroke-linecap: square;
}

.mode-map-grid .mm-gridcell {
  box-sizing: border-box;
  /* All four sides so the grid is fully closed on every outer edge
     (top/right/bottom/left), not just internally. */
  border: 1px solid var(--mm-grid-line);
  min-height: 2.2rem;
  font-size: var(--font-base, 1rem);
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold, 600);
  color: var(--text, #2a2a2a);
}
.mode-map-grid .mm-gridcell.is-chromatic { background: var(--mm-chrom-bg); }

/* Degree labels inside cells (interior stays clean white like the original). */
.mode-map-grid .mm-gridcell.is-root   { color: var(--accent, #c85a1a); font-weight: var(--weight-bold); }
.mode-map-grid .mm-gridcell.is-octave { color: var(--text-3, #b8b3a3); }

/* ════════════════════════════════════════════════════════════════════
 * Modern Mode Map styles (.mm2) — zones / dots / steps / strips.
 * Admin-selected app-wide (FretlyDisplayConfig.modeMapStyle); palettes
 * come from scale-page/mode-map-styles.js via per-grid CSS variables
 * (--mm2-root / --mm2-nat / --mm2-alt / --mm2-oct) + per-row inline
 * band colors.  The staircase shape emerges from the bands / dots /
 * blocks themselves — no grid borders, no SVG outline.
 * ════════════════════════════════════════════════════════════════════ */

/* Strip the graph-paper chrome. */
.mode-map-grid.mm2 .mm-h.mm-col,
.mode-map-grid.mm2 .mm-h.mm-info,
.mode-map-grid.mm2 .mm-cell { border: 0; }
.mode-map-grid.mm2 {
  row-gap: 0;
  /* Admin-tunable column width (--mm2-colw) — roomier default than
     the classic grid.  --mm2-gridline (admin color+opacity, set by
     the renderer) feeds every guide + row separator below. */
  grid-template-columns:
    auto auto auto auto
    var(--mm-gap-col, 0.7rem)
    repeat(var(--mm-cols, 24), minmax(var(--mm2-colw, 2.4rem), 1fr));
}

/* Faint row separators — the full-row backdrop owns them (it spans
   info columns + spacer + chromatic area, so it's ALSO the gap-free
   hover target for the whole row). */
.mode-map-grid.mm2 .mm2-rowback {
  border-top: 1px solid var(--mm2-gridline, color-mix(in srgb, var(--mm-grid-line) 60%, transparent));
  z-index: 0;
}
/* Info cells sit ABOVE the full-row backdrop so mode-name + chip
   clicks still land (backdrop is appended later in DOM order). */
.mode-map-grid.mm2 .mm-cell { position: relative; z-index: 2; }

/* Column guides — subtle per-style column separation (one element per
   chromatic column, spanning all mode rows; painted beneath bands,
   blocks, dots and the row backdrop). */
/* --mm-grid-line is already translucent (70% of --border).  The
   admin-resolved --mm2-gridline (color × opacity) wins when set;
   otherwise each style falls back to its theme default. */
.mm2-colguide { border-left: 1px solid transparent; }
.mm2--zones  .mm2-colguide { border-left-color: var(--mm2-gridline, var(--mm-grid-line)); }
.mm2--dots   .mm2-colguide { border-left-style: dotted;
                             border-left-color: var(--mm2-gridline, var(--mm-grid-line)); }
.mm2--strips .mm2-colguide { border-left-color: var(--mm2-gridline, color-mix(in srgb, var(--mm-grid-line) 75%, transparent)); }
/* Steps: piano-key metaphor — accidental columns (b2 b3 b5 b6 b7) get a
   whisper of shading instead of lines; blocks read against the rhythm. */
.mm2--steps  .mm2-colguide.is-acc { background: var(--mm2-gridline, color-mix(in srgb, var(--mm-grid-line) 45%, transparent)); }
/* Octave boundary — stronger line, ADMIN OPT-IN (the renderer only
   tags .is-octave when modeMapOctaveDivider is on). */
.mm2--zones  .mm2-colguide.is-octave,
.mm2--dots   .mm2-colguide.is-octave,
.mm2--steps  .mm2-colguide.is-octave,
.mm2--strips .mm2-colguide.is-octave {
  border-left: 2px solid var(--mm2-gridline, color-mix(in srgb, var(--text-3, #b8b3a3) 70%, transparent));
  border-left-style: solid;
  background: transparent;
}

/* Hover focus — JS dims every other row's [data-r] items. */
.mode-map-grid.mm2 [data-r] { transition: opacity var(--t-fast, .12s) ease; }

/* Degree dots (fretboard vocabulary): root = accent fill, naturals =
   dark fill, altered-vs-Major = hollow, closing octave = ghost ring. */
.mode-map-grid.mm2 .mm2-cell {
  display: flex; align-items: center; justify-content: center;
  padding: var(--mm2-cellpad, 0.7rem) 0;     /* admin "row spacing" */
  position: relative; z-index: 2;
}
.mm2-dot {
  width: 1.9rem; height: 1.9rem; border-radius: var(--radius-full, 999px);
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  font-size: var(--font-xs); font-weight: var(--weight-semibold, 600);
  font-variant-numeric: tabular-nums; line-height: 1;
  background: var(--mm2-nat, #444441); color: #fff;
}
.mm2-dot.is-alt {
  background: var(--surface, #fff);
  border: 2px solid var(--mm2-alt, #444441);
  color: var(--mm2-alt, #444441);
}
.mm2-dot.is-root { background: var(--mm2-root, #d85a30); border: 0; color: #fff; }
.mm2-dot.is-oct {
  background: transparent;
  border: 1.5px solid var(--mm2-oct, #b4b2a9);
  color: var(--mm2-oct, #b4b2a9);
}

/* Zones — rounded tinted octave band behind the dots. */
.mm2-band {
  border: 1px solid transparent;            /* colors inlined per row */
  border-radius: var(--radius-full, 999px);
  margin: calc(var(--mm2-cellpad, 0.7rem) * 0.5) 0.1rem;
  z-index: 1;
}

/* Steps — interval-width blocks (W = wide, H = narrow). */
.mm2-step {
  margin: calc(var(--mm2-cellpad, 0.7rem) * 0.75) 1px;
  padding: 0 0.55rem;
  border: 1px solid transparent;            /* colors inlined per row */
  border-radius: var(--radius-sm, 6px);
  display: flex; align-items: center;
  font-size: var(--font-sm); font-weight: var(--weight-semibold, 600);
  font-variant-numeric: tabular-nums;
  color: var(--text, #2a2a2a);
  box-sizing: border-box; z-index: 1;
  min-height: 1.9rem;
}
.mm2-step.is-root {
  background: var(--mm2-root, #d85a30);
  border-color: var(--mm2-root, #d85a30);
  color: #fff;
}

/* Strips — one-string fretboard: fret lines + a string through the
   middle; dots sit ON the string (z-index above). */
.mm2-fret {
  position: relative; z-index: 1; box-sizing: border-box;
  margin: calc(var(--mm2-cellpad, 0.7rem) * 0.65) 0;
  border-right: 2px solid var(--mm2-fretline, var(--mm-grid-line));
}
.mm2-fret.is-nut { border-left: 4px solid var(--mm2-fretline, var(--mm-grid-line)); }
.mm2-fret::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; height: 2px; margin-top: -1px;
  background: var(--mm2-fretline, var(--mm-grid-line));
}

/* Chord chips become soft pills in the modern styles.  Chip COLORS
   (bg + text per chord quality) come from the active color scheme —
   inlined by the renderer from mode-map-styles.js `chips` palettes. */
.mode-map-grid.mm2 .mm-chip {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: var(--radius-full, 999px);
  font-size: var(--font-sm);
  line-height: 1.5;
  /* Uniform pill geometry so the Triad + 7th columns read as one
     matched chip set (short symbols don't shrink the pill). */
  min-width: 2.6rem;
  text-align: center;
  box-sizing: border-box;
}
.mode-map-grid.mm2 .mm-chord.is-clickable:hover .mm-chip {
  outline: 1px solid var(--accent, #c85a1a);
}
.mode-map-grid.mm2 .mm-chord.is-clickable:hover { text-decoration: none; }

/* ── Fingering diagrams (under the staircase) ───────────────────────── */
.mode-map-guitar { margin-top: var(--space-xl); }
.mm-fing-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); }
.mm-fing-tab {
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--font-sm); font-weight: var(--weight-semibold, 600);
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-full, 999px);
  background: var(--surface, #fff); color: var(--text-2, #777);
  cursor: pointer; transition: background var(--t-fast, .12s), color var(--t-fast, .12s);
}
.mm-fing-tab:hover { border-color: var(--accent, #c85a1a); }
.mm-fing-tab.is-on {
  background: var(--accent, #c85a1a); border-color: var(--accent, #c85a1a); color: #fff;
}
.mm-fing-tint {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  margin-left: var(--space-md);
  font-size: var(--font-sm); color: var(--text-2, #777); cursor: pointer; user-select: none;
}
.mm-fing-tint input { cursor: pointer; }
.mm-fing-ppos-ctrls { display: flex; gap: var(--space-lg); margin-bottom: var(--space-md); align-items: center; }
.mm-fing-step { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.mm-fing-step-lbl {
  font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3, #b8b3a3); margin-right: var(--space-2xs);
}
.mm-fing-step-btn {
  width: 1.6rem; height: 1.6rem; line-height: 1;
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-sm, 6px); background: var(--surface, #fff);
  cursor: pointer; font-size: var(--font-md);
}
.mm-fing-step-btn:hover { border-color: var(--accent, #c85a1a); }
.mm-fing-step-val { min-width: 1.6em; text-align: center; font-weight: var(--weight-semibold, 600); }

/* Stacked sections (Show-all) with a boxed header per the reference. */
.mm-fing-sections { display: flex; flex-direction: column; gap: var(--space-xl); }
.mm-fing-section-title {
  display: inline-block;
  font-size: var(--font-sm); font-weight: var(--weight-bold, 700);
  color: var(--text, #2a2a2a);
  padding: var(--space-2xs) var(--space-md);
  margin-bottom: var(--space-md);
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2, #f8f5ef);
}

/* Borderless, left-flowing diagrams (FretlyDiagram) with a small centred
   title above each — matches the printed reference's "Guitar patterns". */
.mm-fing-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-md);
  align-items: flex-start;
}
.fly-diagram {
  width: 8.5rem;
  border: 0; background: transparent; padding: 0;
  border-radius: var(--radius-sm, 6px);
}
.fly-diagram.is-clickable { cursor: pointer; }
.fly-diagram.is-clickable:hover .fly-diagram-board {
  outline: 2px solid var(--accent, #c85a1a); outline-offset: 3px;
  border-radius: var(--radius-sm, 6px);
}
.fly-diagram-title {
  font-size: var(--font-xs); font-weight: var(--weight-semibold, 600);
  color: var(--text-2, #555); margin-bottom: var(--space-2xs); text-align: center;
  letter-spacing: .02em;
}
.fly-diagram-board { display: flex; justify-content: center; }
.fly-diagram-svg { display: block; max-width: 100%; height: auto; }
.fly-diagram-empty { font-size: var(--font-sm); color: var(--text-3, #b8b3a3); padding: var(--space-sm); }
/* Diagrams are rendered by the app's shared ChordDiagramPicker.drawMini
   (same renderer as Diagram Sheets) — no bespoke diagram styling here. */
.mm-fing-board { display: flex; justify-content: center; }
.mm-fing-svg { display: block; max-width: 100%; height: auto; }
.mm-fing-note { font-size: var(--font-sm); color: var(--text-2, #777); font-style: italic; padding: var(--space-sm); }