/* ════════════════════════════════════════════════════════════════════════
 * fretly-inspector.css — styling for the app-wide Inspect overlay.
 *
 * Module: assets/js/fretly-inspector.js (window.FretlyInspector.open).
 * Single class prefix: `.fly-inspect-`.
 *
 * Visual contract:
 *   • full-screen translucent backdrop (clicks outside → close)
 *   • white card centered, capped at ~96vw × ~92vh
 *   • header strip: title · mode tabs · display toggle · open page · ×
 *   • body: prev (←) · fretboard card · next (→) · sub-label below
 *
 * Theming: uses the host site's CSS custom properties when present,
 * falling back to literal colours so the overlay still renders sanely
 * on pages that don't define them.
 * ════════════════════════════════════════════════════════════════════════ */

.fly-inspect-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 18, 14, 0.55);
  z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-xl);
}
.fly-inspect-dialog {
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #d8d4c8);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.28));
  width: min(78.5714rem, 96vw);    /* ~1100 px */
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.fly-inspect-header {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-w, 1px) solid var(--border, #e1ddd2);
  background: var(--surface-2, #f8f5ef);
  flex: 0 0 auto;
}
.fly-inspect-title {
  font-family: 'Source Serif Pro', 'Palatino Linotype', Georgia, serif;
  font-style: italic; font-size: var(--font-lg);
  color: var(--text, #2a2a2a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* T31 — Slash classification badge.  Sits next to the chord title
   when a slash bass is present.  Sans-serif, lowercase, small so it
   reads as an attribute rather than part of the chord name. */
.fly-inspect-class-badge {
  display: inline-block;
  margin-left: var(--space-sm);
  padding: 1px var(--space-xs);
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
  background: var(--surface-2, #f0f0f0);
  border: var(--border-w, 1px) solid var(--border, #ccc);
  border-radius: var(--radius-xs, 3px);
  vertical-align: 2px;
}
.fly-inspect-class-badge--inversion { color: var(--accent, #336); border-color: var(--accent, #336); }
.fly-inspect-class-badge--promoted  { color: #b85a00; border-color: #b85a00; }
.fly-inspect-class-badge--polychord { color: #6a3aa0; border-color: #6a3aa0; }

/* Mode tabs (Full · Fingerings, etc.) */
.fly-inspect-tabs {
  display: flex; gap: 2px;
  padding: 2px;
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #d8d4c8);
  border-radius: var(--radius-md, 6px);
  margin-left: var(--space-sm);
}
.fly-inspect-tab {
  font-size: var(--font-sm); font-weight: var(--weight-semibold);
  color: var(--text-2, #555);
  background: transparent;
  border: 0;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.fly-inspect-tab:hover { color: var(--accent, #c85a1a); }
.fly-inspect-tab.is-active {
  background: var(--accent, #c85a1a);
  color: #fff;
}

/* Header buttons — Notes/Intervals · Connections · Greys.  All built
   on canonical .uid-btn so they pick up the app-wide button styling.
   Compact override — inspector header packs many controls in one row,
   so toggles are shorter than the default .uid-btn padding. */
.fly-inspect-toggle.uid-btn {
  padding: var(--space-xs) var(--space-md);
  min-width: 6rem;     /* ~84 px */
  font-size: var(--font-sm);
}
/* Disabled state — Connections when there are no connection lines to
   draw in the current view.  Greyed out, no hover affordance. */
.fly-inspect-toggle.uid-btn:disabled {
  opacity: 0.45;
  cursor: default;
  background: var(--surface-2, #f8f5ef);
  color: var(--text-3, #999);
  border-color: var(--border, #d8d4c8);
}

/* Vertical separator between header sections (mode tabs · Display ·
   Connections · Greys).  Thin, low-contrast, full-control-height. */
.fly-inspect-sep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: var(--border, #d8d4c8);
  margin: var(--space-xs) 2px;
}

.fly-inspect-openpage {
  font-size: var(--font-sm); color: var(--accent, #c85a1a);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm, 4px);
  border: var(--border-w, 1px) solid transparent;
  margin-left: auto;
}
.fly-inspect-openpage:hover {
  background: var(--surface, #fff);
  border-color: var(--border, #d8d4c8);
  text-decoration: underline;
}
.fly-inspect-close {
  width: var(--ctl-h-md); height: var(--ctl-h-md);
  border: 0; background: transparent;
  font-size: var(--font-2xl); line-height: 1;
  color: var(--text-2, #666);
  cursor: pointer; border-radius: var(--radius-md, 6px);
}
.fly-inspect-close:hover {
  background: var(--surface, #fff);
  color: var(--text, #2a2a2a);
}

/* ── Sub-type pill row (level 2) ───────────────────────────────────── */
/* Visible only when current mode has sub-types (Fingerings, Voicings,
   Arpeggios).  Hidden in Full mode.  Per-pill click → switches sub-type
   and resets prev/next position to 0. */
.fly-inspect-subbar {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--border-w, 1px) solid var(--border, #e1ddd2);
  background: var(--surface, #fff);
  flex: 0 0 auto;
}
.fly-inspect-subpill {
  font-size: var(--font-sm); font-weight: var(--weight-medium);
  color: var(--text-2, #555);
  background: var(--surface-2, #f8f5ef);
  border: var(--border-w, 1px) solid var(--border, #d8d4c8);
  border-radius: var(--radius-full, 999px);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: background var(--t-fast, .12s), color var(--t-fast, .12s), border-color var(--t-fast, .12s);
}
.fly-inspect-subpill:hover {
  border-color: var(--accent, #c85a1a);
  color: var(--accent, #c85a1a);
}
.fly-inspect-subpill.is-active {
  background: var(--accent, #c85a1a);
  color: #fff;
  border-color: var(--accent, #c85a1a);
}

/* ── Body: nav · board · nav · sub-label ─────────────────────────── */
.fly-inspect-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  flex: 1 1 auto;
  min-height: 0;            /* allow card to shrink */
}
.fly-inspect-nav-btn {
  width: 2.5714rem; height: 4.2857rem;    /* ~36 x ~60 px */
  align-self: center;
  font-size: var(--font-2xl); line-height: 1;
  color: var(--text-2, #666);
  background: var(--surface-2, #f8f5ef);
  border: var(--border-w, 1px) solid var(--border, #d8d4c8);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
}
.fly-inspect-nav-btn:hover {
  color: var(--accent, #c85a1a);
  border-color: var(--accent, #c85a1a);
}
.fly-inspect-board {
  position: relative;
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-lg);
  min-height: 14.2857rem;     /* ~200 px */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fly-inspect-svg {
  display: block;
  width: 100%;
  height: auto;
}
.fly-inspect-hint {
  position: absolute;
  bottom: var(--space-sm); left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-sm); color: var(--text-3, #999);
  font-style: italic;
  pointer-events: none;
}
.fly-inspect-sublabel {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--text-2, #666);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  min-height: 1.4em;
}