/* =============================================================================
   GL-SHELL — 3-Pane Band Command Center shell
   Phase B: Center workspace + Right context panel
   Loaded only by index-dev.html — production index.html is untouched.
   ============================================================================= */

/* ── Shell wrapper ─────────────────────────────────────────────────────────── */
#gl-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  position: relative;
}
/* Desktop: fixed-height shell — each column scrolls independently */
@media (min-width: 901px) {
  #gl-shell {
    height: calc(100vh - 52px); /* viewport minus topbar */
    overflow: hidden;           /* children are the scroll containers */
  }
  /* Hide footer on desktop — shell is the full workspace */
  #gl-shell ~ footer { display: none; }
  /* Prevent body scroll — only column internals scroll */
  html, body { overflow: hidden; height: 100vh; }
}

/* ── Left rail (Milestone 4 Phase 2) ───────────────────────────────────────── */
#gl-left-rail {
  width: 168px;
  flex-shrink: 0;
  background: var(--bg-card, #1e293b);
  border-right: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: width 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
#gl-left-rail::-webkit-scrollbar { width: 4px; }
#gl-left-rail::-webkit-scrollbar-track { background: transparent; }
#gl-left-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
#gl-left-rail::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Collapsed state */
#gl-shell.gl-shell--nav-collapsed #gl-left-rail {
  width: 56px;
}
#gl-shell.gl-shell--nav-collapsed .gl-rail-item {
  justify-content: center;
  padding: 8px 0;
  width: calc(100% - 8px);
  margin: 1px 4px;
}

/* Toggle button */
.gl-rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  background: none;
  border: none;
  color: var(--text-dim, #475569);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.gl-rail-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f1f5f9);
}

/* Section */
.gl-rail-section {
  margin-bottom: 4px;
}
/* Home item — visually separated from section groups */
.gl-rail-item--home {
  margin-bottom: 4px;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gl-rail-section-title {
  font-size: 0.6em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.35);
  padding: 10px 16px 3px;
  white-space: nowrap;
  overflow: hidden;
}
#gl-shell.gl-shell--nav-collapsed .gl-rail-section-title {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
/* Chevron rotates when section is open */
details[open] > .gl-rail-section-title .gl-rail-chevron {
  transform: rotate(90deg);
}

/* Nav item */
.gl-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 12px);
  margin: 1px 6px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted, #94a3b8);
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
}
.gl-rail-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f1f5f9);
}
.gl-rail-item--active {
  background: var(--accent-glow, rgba(99, 102, 241, 0.15));
  color: var(--accent-light, #818cf8);
}

/* Icon */
.gl-rail-icon {
  font-size: 1.15em;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Label — hidden when collapsed */
.gl-rail-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
}
#gl-shell.gl-shell--nav-collapsed .gl-rail-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* ── Mode Switcher Bar ──────────────────────────────────────────────────────── */
.gl-mode-bar {
  display: flex;
  gap: 2px;
  padding: 8px 8px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.gl-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim, #64748b);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.gl-mode-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted, #94a3b8);
}
.gl-mode-btn--active {
  background: var(--accent-glow, rgba(102,126,234,0.15));
  color: var(--accent-light, #818cf8);
}
.gl-mode-icon { font-size: 1.2em; line-height: 1; }
.gl-mode-label { font-size: 0.6em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* Collapsed rail: hide mode labels, keep icons */
#gl-shell.gl-shell--nav-collapsed .gl-mode-bar { flex-direction: column; padding: 4px; }
#gl-shell.gl-shell--nav-collapsed .gl-mode-btn { flex-direction: row; padding: 6px; }
#gl-shell.gl-shell--nav-collapsed .gl-mode-label { display: none; }

/* REMOVED: play mode rail title hiding — modes don't gate visibility */

/* Mobile: mode bar in hamburger menu is handled separately */
@media (max-width: 900px) {
  .gl-mode-bar { display: none; } /* hidden in rail; shown in hamburger overlay */
}

/* ── Center workspace inside the shell ─────────────────────────────────────── */
/*
   .main-content normally has max-width:960px; margin:0 auto (from app-shell.css).
   Inside #gl-shell it must be a flex child that shrinks when the panel opens,
   so we override the centering and let the flex layout take over.
*/
#gl-shell > .main-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: flex-basis 0.3s cubic-bezier(0.32, 0, 0, 1);
}
/* Centered canvas inside shell — keeps content readable on wide screens */
#gl-shell > .main-content > .app-page {
  max-width: var(--content-max, 1100px);
  margin: 0 auto;
  padding: 16px 20px;
}
/* Home pulls its content up — the band-identity header doesn't need the full top
   pad, and tightening it gets the quick-action row above the fold (Drew 2026-06-18). */
#gl-shell > .main-content > #page-home { padding-top: 4px; }
/* Stage Plot is a spatial canvas — it benefits from every pixel of width, so it
   opts out of the readable-width cap and fills the workspace. (Other pages keep
   the cap; forms/lists read better constrained.) */
#gl-shell > .main-content > #page-stageplot {
  max-width: none;
}
/* Desktop: override min-height so center workspace scrolls within shell */
@media (min-width: 901px) {
  #gl-shell > .main-content {
    min-height: 0;       /* let flex height control, not min-height */
    height: 100%;        /* definite height so overflow-y: auto scrolls with mouse wheel */
  }
}

/* ── Right context panel ───────────────────────────────────────────────────── */
#gl-right-panel {
  /* Hidden by default — zero width, overflow clipped */
  width: 0;
  flex-shrink: 0;
  overflow: hidden;

  /* Visual treatment */
  background: var(--bg-card, #1e293b);
  border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));

  /* Layout */
  display: flex;
  flex-direction: column;

  /* Animate open/close */
  transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Panel open — triggered by class on #gl-shell */
#gl-shell.gl-shell--panel-open #gl-right-panel {
  width: 420px;
}

/* ── Panel internals ───────────────────────────────────────────────────────── */
.gl-rp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.15);
  min-height: 44px;
  position: relative;   /* establish stacking context */
  z-index: 60;          /* above sd-header z-index:50 — keeps ✕ always clickable */
}

.gl-rp-title {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #475569);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin-right: 8px;
}

.gl-rp-close-btn {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.gl-rp-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

.gl-rp-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Isolate stacking context so sd-header sticky positioning cannot
     escape this container and paint over .gl-rp-header above it. */
  isolation: isolate;
  /* Thin scrollbar consistent with app-shell.css */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.gl-rp-content::-webkit-scrollbar { width: 4px; }
.gl-rp-content::-webkit-scrollbar-track { background: transparent; }
.gl-rp-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* ── Desktop: hide hamburger when rail is visible ─────────────────────────── */
@media (min-width: 901px) {
  .hamburger { display: none; }
}

/* ── Medium screens: toggle is visible (rail can be expanded/collapsed) ── */

/* ── Medium screens: cap panel width to protect center workspace ───────────── */
@media (max-width: 1199px) and (min-width: 901px) {
  #gl-shell.gl-shell--panel-open #gl-right-panel {
    width: 360px; /* narrower than desktop 420px to give center workspace more room */
  }
}

/* ── Mobile: hide left rail, panel overlays instead of pushing ────────────── */
@media (max-width: 900px) {
  #gl-left-rail {
    display: none;
  }
  #gl-right-panel {
    position: fixed;
    right: 0;
    top: 0;              /* full-screen overlay — intentionally covers topbar */
    bottom: 0;
    height: 100%;
    width: 0;
    z-index: 1100;       /* above topbar (z≈1000) — panel is a true full-screen sheet on mobile */
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  }

  #gl-shell.gl-shell--panel-open #gl-right-panel {
    /* Full-screen on phones (2026-06-15, Drew): the old 92vw/right:0 left an
       8vw sliver of the page behind on the left AND clipped the card on the
       right. A phone has no room for a master-detail peek — use the whole
       screen so nothing is cut off. */
    width: 100vw;
    max-width: none;
  }

  /* On mobile the center workspace does NOT compress — panel overlays */
  #gl-shell > .main-content {
    transition: none;
  }

  /* Clear the iOS status bar / notch so the song title + ✕ close in the header
     aren't hidden under it (was top:0 with no safe-area inset → "no way to ESC"
     because the ✕ sat under the clock). The header background fills the strip. */
  .gl-rp-header {
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  /* Larger tap target for close button on mobile */
  .gl-rp-close-btn {
    padding: 8px 16px;
    font-size: 1em;
  }

}

/* ── Overlay root — top-level stacking context for persistent UI ──────────── */
#gl-overlay-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
}

/* ── Now Playing bar (Milestone 4 Phase 3) ────────────────────────────────── */
/* Critical layout styles are inline on the HTML element (stacking fix).
   These rules handle show/hide and visual refinements only. */
#gl-now-playing.gl-np--visible {
  display: flex !important; /* override inline styles which don't set display */
}

.gl-np-song {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
}
.gl-np-song:hover .gl-np-title {
  color: var(--text, #f1f5f9);
}

.gl-np-icon {
  font-size: 1.1em;
  flex-shrink: 0;
}

.gl-np-title {
  font-weight: 700;
  font-size: 0.85em;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.gl-np-meta {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--text-dim, #475569);
  white-space: nowrap;
  flex-shrink: 0;
}

.gl-np-action {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #818cf8;
  font-size: 0.72em;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.gl-np-action:hover {
  background: rgba(99, 102, 241, 0.25);
}

.gl-np-close {
  background: none;
  border: none;
  color: var(--text-dim, #475569);
  cursor: pointer;
  font-size: 1.05em;
  line-height: 1;
  flex-shrink: 0;
  /* Finger-sized tap target (was padding:4px ≈ 24px — too small, and jammed at
     the screen edge so it was nearly impossible to hit, Drew 2026-06-15). The
     negative right margin lets the 44px hit area reach the corner. */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -6px;
  transition: color 0.15s;
}
.gl-np-close:hover {
  color: var(--text, #f1f5f9);
}

/* Offset shell content so it doesn't sit behind the bar */
#gl-shell.gl-shell--now-playing {
  padding-bottom: 48px;
}

/* Mobile: compact Now Playing bar */
@media (max-width: 900px) {
  #gl-now-playing {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .gl-np-meta { display: none; }
  .gl-np-action { padding: 4px 10px; font-size: 0.68em; }
  /* Even bigger on touch — the ✕ was the hardest control on the bar to hit. */
  .gl-np-close { min-width: 48px; min-height: 48px; font-size: 1.2em; }
}


/* ── Legibility floor · Batch 1 (2026-06-14) ──────────────────────────────────
   The band's named pain: X's and help dots too small to read/tap. Bump the
   close/dismiss buttons + help icons to a readable glyph in a finger-sized
   target. em + !important so it lands on EVERY device (desktop / iPad / iPhone)
   regardless of inline styles, and on touch where it hurts most.
   Audit: 02_GrooveLinx/specs/legibility_audit_2026-06-14.md */
.wb-close, .sd-rp-close, .mt-wiz-close, .pm-picker-close, .home-banner__dismiss {
  font-size: 1.1em !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
/* Delete-on-object controls live in tighter contexts — bump, but modestly. */
.sp-del, .hl-asset-del {
  font-size: 0.82em !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
/* The 15px multitrack help dot → a comfortable, readable target. */
.mt-help-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: 0.82em !important;
}