/* ═══════════════════════════════════════════════════════════════════
   Scale Explorer — Route-scoped styles
   All selectors scoped under #route-scale-explorer.
   IDs prefixed with se- to avoid collisions with other routes.
   Global reset, :root variables, and body rule live in site.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Full-width, full-height override for Scale Explorer ── */
.page-wrap:has(#route-scale-explorer.active) {
  padding: 0 !important; max-width: none !important; overflow: hidden !important;
  height: 100vh !important;
  display: flex !important; flex-direction: column !important;
}
html:has(#route-scale-explorer.active) body,
html:has(#route-scale-explorer.active) body.has-admin-sidebar { overflow: hidden !important; height: 100vh !important; }

/* ── Viewport-filling flex layout: header + controls pinned, main fills rest ── */
#route-scale-explorer { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }

/* ── App Shell ── */
#route-scale-explorer #se-app-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
#route-scale-explorer #se-app-header h1 { font-size: 18px; font-weight: 700; white-space: nowrap; padding-left: 0 !important; }
@media (max-width: 1100px) {
  #route-scale-explorer #se-app-header .subtitle { display: none; }
  #route-scale-explorer .ctrl-group .ctrl-pair label { display: none; }
  #route-scale-explorer .ctrl-group { flex-wrap: nowrap; }
  #route-scale-explorer .btn-group button { font-size: 11px; padding: 3px 7px; }
  #route-scale-explorer .se-ctrl-cell { padding: 6px 10px; }
  #route-scale-explorer .se-ctrl-label { font-size: 9px; margin-bottom: 5px; }
  #route-scale-explorer .ctrl-group input[type=range] { width: 70px; }
}
@media (max-width: 800px) {
  body.has-admin-sidebar #route-scale-explorer #se-app-header { padding-left: 44px; }
}
#route-scale-explorer #se-app-header .subtitle { color: var(--text-2); font-size: 13px; white-space: nowrap; }
#route-scale-explorer .ctrl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
#route-scale-explorer .ctrl-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
#route-scale-explorer .ctrl-group select { min-width: 0; }
#route-scale-explorer .ctrl-group .ctrl-pair { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
#route-scale-explorer .ctrl-group label { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
#route-scale-explorer .ctrl-group select,
#route-scale-explorer .ctrl-group input[type=range] { font-size: 13px; }
#route-scale-explorer .ctrl-group select { padding: 4px 24px 4px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 10px; cursor: pointer; font-family: var(--font); font-weight: 500; color: var(--text); transition: border-color .15s; }
#route-scale-explorer .ctrl-group select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(232,135,74,0.15); }
#route-scale-explorer .ctrl-group input[type=range] { width: 120px; accent-color: var(--accent); }
#route-scale-explorer .ctrl-group .val-badge { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; min-width: 22px; text-align: center; }

/* ── Cardinality Tabs ── */
#route-scale-explorer .card-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
#route-scale-explorer .card-tabs button { font-size: 12px; font-weight: 600; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; transition: all .15s; white-space: nowrap; }
#route-scale-explorer .card-tabs button:hover { background: var(--surface-2); }
#route-scale-explorer .card-tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Toggle Buttons ── */
#route-scale-explorer .btn-group { display: flex; gap: 0; }
#route-scale-explorer .btn-group button { font-size: 12px; padding: 4px 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; }
#route-scale-explorer .btn-group button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
#route-scale-explorer .btn-group button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
#route-scale-explorer .btn-group button:not(:first-child) { border-left: none; }
#route-scale-explorer .btn-group button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#route-scale-explorer .btn-group button.active + button { border-left-color: var(--accent); }
#route-scale-explorer .btn-group button:disabled { opacity: 0.4; cursor: default; }

/* ── Display Toggle Button ── */
#route-scale-explorer .se-display-toggle { font-size: 12px; padding: 4px 0; width: 70px; text-align: center; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; font-family: inherit; transition: all .15s; }
#route-scale-explorer .se-display-toggle:hover { background: var(--surface-2); color: var(--text); }

/* ── Key select trigger (Key & Display cell) ──
   scale-explorer.js's buildKeySelect() runs the native <select> through
   shared/music-page/select-popover.js's enhanceNativeSelect(), which hides
   the <select> and inserts a sibling `.fly-select-trigger` <button> in its
   place. That class ships with NO base styling of its own — every other
   surface that uses it (theory.css `.theory-selector-bar`,
   scale-collection-page.css `.scp-ctrl-cell`) gives it a local rule; the
   Explorer never did, so it fell back to the browser's default <button>
   chrome instead of matching the pill look every sibling `.se-ctrl-cell`
   control uses. Reuses the SAME tokens as `.se-display-toggle` right above
   / `.btn-group` buttons / `.se-filter-btn` — no new hardcoded sizing. */
#route-scale-explorer .ctrl-group .fly-select-trigger { font-size: 12px; padding: 4px 10px; min-width: 56px; text-align: left; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s; }
#route-scale-explorer .ctrl-group .fly-select-trigger:hover { background: var(--surface-2); color: var(--text); }

/* ── Controls Grid ── */
/* 7 cells: ScaleSearch(1), Summary(2), Key&Display(3), Uniqueness(4),
   Perspective(5), Filters(6), Fingerings(7) — Fingerings added
   SCALES-ADVANCED-PHASE-A-SPEC-2026-07-03 Item 4 (post-pivot); every
   nth-child order/border rule below was re-audited (not just appended
   to) so the 7th cell reflows cleanly at both breakpoints instead of
   double-bordering or landing on an orphan row. */
#route-scale-explorer .se-ctrl-grid { display: grid; grid-template-columns: repeat(7, auto); gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
#route-scale-explorer .se-ctrl-cell { padding: 8px 14px; border-right: 1px solid var(--border); border-bottom: none; overflow: hidden; min-width: 0; }
#route-scale-explorer .se-ctrl-cell:last-child { border-right: none; }

@media (max-width: 1100px) {
  /* Row 1: Key&Display(3), Uniqueness(4), Perspective(5)
     Row 2: Fingerings(7), ScaleSearch(1), Summary(2)
     Row 3: Filters(6) — alone, left-aligned */
  #route-scale-explorer .se-ctrl-grid { grid-template-columns: repeat(3, 1fr); }
  #route-scale-explorer .se-ctrl-cell:nth-child(1) { order: 5; } /* Scale Search → row 2 middle */
  #route-scale-explorer .se-ctrl-cell:nth-child(2) { order: 6; } /* Summary → row 2 right */
  #route-scale-explorer .se-ctrl-cell:nth-child(3) { order: 1; } /* Key & Display → row 1 left */
  #route-scale-explorer .se-ctrl-cell:nth-child(4) { order: 2; } /* Uniqueness → row 1 middle */
  #route-scale-explorer .se-ctrl-cell:nth-child(5) { order: 3; } /* Perspective → row 1 right */
  #route-scale-explorer .se-ctrl-cell:nth-child(6) { order: 7; } /* Filters → row 3 left */
  #route-scale-explorer .se-ctrl-cell:nth-child(7) { order: 4; } /* Fingerings → row 2 left */
  #route-scale-explorer .se-ctrl-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  #route-scale-explorer .se-ctrl-cell:nth-child(5) { border-right: none; } /* Perspective = end of row 1 */
  #route-scale-explorer .se-ctrl-cell:nth-child(2) { border-right: none; } /* Summary = end of row 2 */
  #route-scale-explorer .se-ctrl-cell:nth-child(3) { border-bottom: none; }
  #route-scale-explorer .se-ctrl-cell:nth-child(4) { border-bottom: none; }
  #route-scale-explorer .se-ctrl-cell:nth-child(6) { border-right: none; border-bottom: none; } /* Filters = end of row 3 (only cell) */
}
@media (max-width: 600px) {
  /* Row 1: Key&Display(3), Uniqueness(4); Row 2: Perspective(5), Fingerings(7);
     Row 3: Filters(6), ScaleSearch(1); Row 4: Summary(2) — alone, left-aligned */
  #route-scale-explorer .se-ctrl-grid { grid-template-columns: repeat(2, 1fr); }
  #route-scale-explorer .se-ctrl-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  #route-scale-explorer .se-ctrl-cell:nth-child(3) { order: 1; }
  #route-scale-explorer .se-ctrl-cell:nth-child(4) { order: 2; }
  #route-scale-explorer .se-ctrl-cell:nth-child(5) { order: 3; }
  #route-scale-explorer .se-ctrl-cell:nth-child(7) { order: 4; }
  #route-scale-explorer .se-ctrl-cell:nth-child(6) { order: 5; }
  #route-scale-explorer .se-ctrl-cell:nth-child(1) { order: 6; }
  #route-scale-explorer .se-ctrl-cell:nth-child(2) { order: 7; }
  /* Right column loses right border */
  #route-scale-explorer .se-ctrl-cell:nth-child(4) { border-right: none; }
  #route-scale-explorer .se-ctrl-cell:nth-child(7) { border-right: none; }
  #route-scale-explorer .se-ctrl-cell:nth-child(1) { border-right: none; }
  /* Last row (Summary alone) loses bottom border; row-3 pair keeps it */
  #route-scale-explorer .se-ctrl-cell:nth-child(2) { border-right: none; border-bottom: none; }
}
#route-scale-explorer .se-ctrl-label { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
#route-scale-explorer .se-ctrl-toggle { display: flex; align-items: center; gap: 6px; padding: 0; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-2); font-family: var(--font); transition: color .15s; }
#route-scale-explorer .se-ctrl-toggle:hover { color: var(--accent); }
#route-scale-explorer .se-ctrl-toggle .chevron { display: inline-block; transition: transform .2s; font-size: 10px; }
#route-scale-explorer .se-ctrl-toggle .chevron.open { transform: rotate(90deg); }

/* ── Filter Button ── */
#route-scale-explorer .se-filter-btn { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; font-family: var(--font); transition: all .15s; white-space: nowrap; }
#route-scale-explorer .se-filter-btn:hover { background: var(--surface-2); color: var(--text); }
#route-scale-explorer .se-filter-btn.has-filters { background: rgba(232,135,74,0.1); border-color: var(--accent); color: var(--accent); }
#route-scale-explorer .se-filter-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
#route-scale-explorer .se-filter-badge { background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 8px; min-width: 16px; text-align: center; line-height: 16px; }

/* ── Filter Drawer (slide-out from right) ── */
#route-scale-explorer .se-filter-drawer { position: absolute; top: 0; right: 0; width: 320px; height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -4px 0 12px rgba(0,0,0,0.06); transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; z-index: 10; }
#route-scale-explorer .se-filter-drawer.open { transform: translateX(0); }
#route-scale-explorer .se-filter-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
#route-scale-explorer .se-filter-drawer-header h3 { font-size: 14px; font-weight: 700; margin: 0; }
#route-scale-explorer .se-filter-match { font-size: 11px; font-weight: 500; color: var(--text-3); margin-left: 8px; }
#route-scale-explorer .se-filter-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-3); line-height: 1; padding: 2px 4px; }
#route-scale-explorer .se-filter-close:hover { color: var(--text); }
#route-scale-explorer .se-filter-drawer-body { padding: 16px; }
#route-scale-explorer .se-filter-section { margin-bottom: 20px; }
#route-scale-explorer .se-filter-section:last-child { margin-bottom: 0; }
#route-scale-explorer .se-filter-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* Note count checkboxes */
#route-scale-explorer .se-note-checks { display: flex; flex-wrap: wrap; gap: 4px; }
#route-scale-explorer .se-note-check { display: flex; align-items: center; }
#route-scale-explorer .se-note-check input { display: none; }
#route-scale-explorer .se-note-check label { font-size: 11px; font-weight: 600; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; transition: all .15s; user-select: none; }
#route-scale-explorer .se-note-check input:checked + label { background: var(--accent); color: #fff; border-color: var(--accent); }
#route-scale-explorer .se-note-check label:hover { background: var(--surface-2); }
#route-scale-explorer .se-note-check input:checked + label:hover { background: #d47a42; }

/* Quick-select links */
#route-scale-explorer .se-quick-sel { display: flex; gap: 8px; margin-top: 8px; }
#route-scale-explorer .se-quick-sel button { font-size: 10px; color: var(--accent); background: none; border: none; cursor: pointer; font-family: var(--font); text-decoration: underline; padding: 0; }
#route-scale-explorer .se-quick-sel button:hover { color: var(--text); }

/* Range controls in filter */
#route-scale-explorer .se-filter-range { display: flex; align-items: center; gap: 8px; }
#route-scale-explorer .se-filter-range input[type=range] { flex: 1; accent-color: var(--accent); max-width: 160px; }
#route-scale-explorer .se-filter-range-label { font-size: 11px; color: var(--text-2); }
#route-scale-explorer .se-filter-hint { font-size: 10px; color: var(--text-3); margin-top: 4px; }

/* Toggle switch */
#route-scale-explorer .se-filter-toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 11px; color: var(--text-2); }
#route-scale-explorer .se-toggle-switch { position: relative; width: 34px; height: 18px; flex-shrink: 0; display: inline-block; }
#route-scale-explorer .se-toggle-switch input { display: none; }
#route-scale-explorer .se-toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 9px; cursor: pointer; transition: .2s; }
#route-scale-explorer .se-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: .2s; }
#route-scale-explorer .se-toggle-switch input:checked + .se-toggle-slider { background: var(--accent); }
#route-scale-explorer .se-toggle-switch input:checked + .se-toggle-slider::before { transform: translateX(16px); }

/* Filter actions */
#route-scale-explorer .se-filter-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
#route-scale-explorer .se-filter-reset { font-size: 11px; font-weight: 600; padding: 5px 14px; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); background: var(--surface); color: var(--text-2); border: 1px solid var(--border); }
#route-scale-explorer .se-filter-reset:hover { background: var(--surface-2); }
#route-scale-explorer .se-filter-result { font-size: 11px; color: var(--text-2); margin-left: auto; }

@media (max-width: 860px) {
  #route-scale-explorer .se-filter-drawer { width: 280px; }
}

/* ── Summary Table ── */
#route-scale-explorer #se-summary { padding: 4px 20px 16px; overflow-x: auto; border-bottom: 1px solid var(--border); }
#route-scale-explorer #se-summary.collapsed { display: none; }
#route-scale-explorer #se-summary table { width: 100%; border-collapse: collapse; font-size: 12px; }
#route-scale-explorer #se-summary th,
#route-scale-explorer #se-summary td { padding: 4px 10px; text-align: right; border-bottom: 1px solid var(--border); }
#route-scale-explorer #se-summary th { font-weight: 600; color: var(--text-2); text-align: right; }
#route-scale-explorer #se-summary th:first-child,
#route-scale-explorer #se-summary td:first-child { text-align: left; }
#route-scale-explorer #se-summary tr.active-row { background: rgba(242,169,59,0.12); font-weight: 600; }
#route-scale-explorer #se-summary tr:hover { background: rgba(242,169,59,0.06); cursor: pointer; }
#route-scale-explorer #se-summary .total-row { font-weight: 700; border-top: 2px solid var(--border); }
#route-scale-explorer .card-name-col { min-width: 80px; color: var(--text-2); font-style: italic; font-weight: 400 !important; }

/* ── Body wrapper: holds #se-summary (JS-injected), #se-main, and the filter drawer.
   This is the positioning context for .se-filter-drawer so the drawer (position:absolute,
   top:0, bottom:0) overlaps BOTH the summary table and the main pane instead of being
   anchored only to #se-main (which starts below the summary). ── */
#route-scale-explorer #se-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ── Main Content: Split Layout ── */
#route-scale-explorer #se-main { display: flex; flex: 1; min-height: 0; overflow: hidden; }
#route-scale-explorer #se-list-pane { flex: 0 0 280px; border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface); transition: flex-basis .25s ease, width .25s ease, opacity .2s ease; min-width: 0; }
#route-scale-explorer #se-detail-pane { flex: 1; overflow-y: auto; padding: var(--sp-5); background: var(--bg); transition: flex .25s ease; }

/* ── List Pane Collapse Button (inside search bar, matches admin sidebar pattern) ── */
#route-scale-explorer .se-list-collapse-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid var(--border); cursor: pointer; color: var(--text-2); transition: all .15s; flex-shrink: 0; padding: 0; }
#route-scale-explorer .se-list-collapse-btn:hover { background: var(--surface-2); color: var(--text); }
#route-scale-explorer .se-list-collapse-btn svg { width: 16px; height: 16px; }

/* ── Collapsed state ── */
#route-scale-explorer #se-main.list-collapsed #se-list-pane { flex-basis: 0; width: 0; overflow: hidden; opacity: 0; border-right: none; }

@media (max-width: 860px) {
  #route-scale-explorer #se-main { flex-direction: column; }
  #route-scale-explorer #se-list-pane { flex: none !important; flex-basis: auto !important; width: auto !important; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); opacity: 1 !important; overflow-y: auto !important; }
  #route-scale-explorer #se-main.list-collapsed #se-list-pane { max-height: 0; border-bottom: none; padding: 0; }
  /* On mobile, hide the desktop collapse button (Scale Search bar handles it) */
  #route-scale-explorer .se-list-collapse-btn { display: none !important; }
}

/* ── Scale List ── */
#route-scale-explorer #se-search-bar { padding: 6px 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; }
#route-scale-explorer #se-search-input { flex: 1; padding: 5px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg,#fff); color: var(--text); outline: none; font-family: inherit; }
#route-scale-explorer #se-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232,135,74,0.15); }
#route-scale-explorer #se-search-input::placeholder { color: var(--text-3); }
#route-scale-explorer #se-search-clear { background: none; border: none; font-size: 18px; color: var(--text-3); cursor: pointer; padding: 0 4px; line-height: 1; }
#route-scale-explorer #se-search-clear:hover { color: var(--text); }
#route-scale-explorer .search-match { background: var(--accent-bg, rgba(232,135,74,0.12)); }
#route-scale-explorer .list-header { padding: 8px 12px; font-size: 12px; color: var(--text-2); font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 39px; z-index: 2; }

/* ── Scale Items — two-row layout ── */
#route-scale-explorer .scale-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--surface-2); border-left: 3px solid transparent; cursor: pointer; font-size: 13px; transition: background .1s; }
#route-scale-explorer .scale-item:hover { background: var(--accent-bg, rgba(232,135,74,0.08)); }
#route-scale-explorer .scale-item.selected { background: var(--accent-bg-hover, rgba(232,135,74,0.15)); border-left-color: var(--accent); }
#route-scale-explorer .si-row1 { display: flex; align-items: center; gap: 6px; }
#route-scale-explorer .si-row2 { display: flex; align-items: center; gap: 6px; }
#route-scale-explorer .scale-item .si-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#route-scale-explorer .scale-item .si-unnamed { color: var(--text-2); font-style: italic; }
#route-scale-explorer .scale-item .si-pcs { color: var(--text-3); font-size: 10px; font-family: var(--font-mono, 'SF Mono', 'Consolas', monospace); }
#route-scale-explorer .scale-item .si-steps { color: var(--text-3); font-size: 10px; margin-left: auto; white-space: nowrap; font-family: var(--font-mono, 'SF Mono', 'Consolas', monospace); }
#route-scale-explorer .scale-item .si-badge { font-size: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0 6px; color: var(--text-2); white-space: nowrap; }
#route-scale-explorer .scale-item .si-card-badge { font-size: 9px; font-weight: 700; padding: 0 5px; min-width: 18px; text-align: center; }
#route-scale-explorer .list-empty { padding: 20px; text-align: center; color: var(--text-2); font-size: 13px; }
#route-scale-explorer .list-more { display: block; width: 100%; padding: 8px; background: none; border: none; border-top: 1px solid var(--border); color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; }
#route-scale-explorer .list-more:hover { background: var(--accent-bg, rgba(232,135,74,0.08)); }

/* ══════════════════════════════════════════════════════════════════
   DETAIL PANE — card-based layout matching app-wide patterns
   ══════════════════════════════════════════════════════════════════ */

/* ── Detail Header ── */
#route-scale-explorer .detail-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-2); font-size: 14px; }
#route-scale-explorer .detail-header { margin-bottom: var(--panel-gap, 16px); }
#route-scale-explorer .detail-header-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
#route-scale-explorer .detail-header h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; white-space: nowrap; }
#route-scale-explorer .detail-header .dh-sub { color: var(--text-2); font-size: 13px; white-space: nowrap; }
#route-scale-explorer .detail-header .dh-spacer { flex: 1; min-width: 0; }
#route-scale-explorer .dh-aka { margin-top: 6px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
#route-scale-explorer .dh-aka .aka-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; color: var(--text-3); margin-right: 4px; }
#route-scale-explorer .dh-aka .aka-name { display: inline-block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; margin: 1px 3px 1px 0; font-size: 11px; }

/* ── Edit Names (admin) — pencil toggle ── */
#route-scale-explorer .se-edit-names-btn { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text-3); padding: 2px 4px; line-height: 1; border-radius: var(--r-sm); transition: color .15s, background .15s; }
#route-scale-explorer .se-edit-names-btn:hover,
#route-scale-explorer .se-edit-names-btn.active { color: var(--accent); background: var(--accent-bg, rgba(232,135,74,0.1)); }
#route-scale-explorer .se-admin-names-panel { margin-top: 8px; }
#route-scale-explorer .admin-names-edit { padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12px; }
#route-scale-explorer .admin-names-edit textarea { width: 100%; min-height: 50px; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; padding: 6px; font-family: inherit; resize: vertical; background: var(--surface); color: var(--text); }
#route-scale-explorer .admin-names-edit button { margin-top: 4px; padding: 3px 12px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; font-weight: 600; }

/* ── Action Bar ── */
#route-scale-explorer .se-action-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
#route-scale-explorer .se-action-bar:empty { display: none; }
#route-scale-explorer .se-action-bar .se-action-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background .15s; }
#route-scale-explorer .se-action-bar .se-action-link:hover { background: var(--surface-2); }
#route-scale-explorer .se-action-bar .se-action-link svg { width: 13px; height: 13px; }

/* ── Card — shared panel style matching .boards-area / .info-panel ── */
#route-scale-explorer .se-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; margin-bottom: var(--panel-gap, 16px); }
#route-scale-explorer .se-card-title { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2, 8px) var(--sp-5, 20px); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); }
#route-scale-explorer .se-card-label { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
#route-scale-explorer .se-card-body { padding: var(--sp-4, 16px) var(--sp-5, 20px); }
#route-scale-explorer .se-card-body--flush { padding: 0; overflow-x: auto; }

/* ── Clear custom selection button ── */
#route-scale-explorer .se-clear-btn { padding: 4px 14px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; }
#route-scale-explorer .se-clear-btn:hover { background: var(--accent-bg, rgba(232,135,74,0.1)); color: var(--accent); }

/* ── Fretboard Card (full width) ── */
#route-scale-explorer .se-fretboard-card { overflow: hidden; }
#route-scale-explorer .se-fretboard-wrap { padding: var(--sp-3, 12px) var(--sp-4, 16px); overflow-x: auto; }
#route-scale-explorer .se-fretboard-wrap svg { display: block; width: 100%; height: auto; }

/* ── Circle + Properties row ── */
#route-scale-explorer .se-circle-props-row { display: flex; flex-wrap: wrap; gap: var(--panel-gap, 16px); align-items: stretch; margin-bottom: var(--panel-gap, 16px); }
#route-scale-explorer .se-circle-props-row .se-props-card { flex: 0 0 auto; min-width: 0; margin-bottom: 0; }
#route-scale-explorer .se-circle-props-row .se-modes-card { flex: 1 1 500px; min-width: 0; margin-bottom: 0; }

/* ── Circle card (beside properties) ── */
#route-scale-explorer .se-circle-card { flex: 0 0 auto; width: 220px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--sp-3); }
#route-scale-explorer .se-circle-card svg { width: 100%; max-width: 200px; height: auto; }

@media (max-width: 560px) {
  #route-scale-explorer .se-circle-props-row .se-props-card { flex: 1 1 100%; }
  #route-scale-explorer .se-circle-props-row .se-modes-card { flex: 1 1 100%; }
  #route-scale-explorer .se-circle-card { width: auto; max-width: 220px; }
}

/* ── Info Table ── */
#route-scale-explorer .info-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
#route-scale-explorer .info-tbl th { text-align: left; color: var(--text-2); font-weight: 600; padding: 5px 12px 5px 0; white-space: nowrap; width: 130px; border-bottom: 1px solid var(--surface-2); }
#route-scale-explorer .info-tbl td { padding: 5px 0; font-family: var(--font-mono, 'SF Mono', 'Consolas', monospace); font-weight: 500; border-bottom: 1px solid var(--surface-2); }

/* ── Modes Table ── */
#route-scale-explorer .modes-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
#route-scale-explorer .modes-tbl th { text-align: left; padding: 5px 10px; color: var(--text-2); font-weight: 600; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
#route-scale-explorer .modes-tbl td { padding: 5px 10px; border-bottom: 1px solid var(--surface-2); }
#route-scale-explorer .modes-tbl .mt-name { font-weight: 600; }
#route-scale-explorer .modes-tbl .mt-name-text { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#route-scale-explorer .modes-tbl .mt-unnamed { color: var(--text-2); font-style: italic; }
#route-scale-explorer .modes-tbl .mt-formula { font-family: var(--font-mono, 'SF Mono', 'Consolas', monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#route-scale-explorer .modes-tbl .mt-pcs { font-family: var(--font-mono, 'SF Mono', 'Consolas', monospace); color: var(--text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#route-scale-explorer .modes-tbl tbody tr { cursor: pointer; transition: background .1s; }
#route-scale-explorer .modes-tbl tbody tr:hover { background: var(--accent-bg, rgba(232,135,74,0.06)); }
#route-scale-explorer .modes-tbl tr.mt-current { background: var(--accent-bg-hover, rgba(232,135,74,0.15)); }
#route-scale-explorer .modes-tbl .mt-degree { color: var(--text-2); width: 24px; text-align: center; }
#route-scale-explorer .modes-tbl .mt-aka { font-size: 10px; color: var(--text-3); line-height: 1.3; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════
   Relations Panel — all .rel-* classes are defined in the shared
   /assets/css/relations-panel.css.  Both the SE route and the Scales
   route under v2 consume the same vocabulary, so DO NOT duplicate
   those rules here.  Keeping the SE-specific selector prefix is no
   longer needed: the classes are specific enough on their own, and
   collisions are audited in the shared file.

   See: assets/css/relations-panel.css
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   FINGERINGS ctrl-cell submenu — Round 2 rework (2026-07-03 owner
   desktop-review verdict: "Implement fingerings exactly the way it is
   in Scales; in a submenu"). This cell is injected entirely by
   assets/js/scale-page/advanced-fingerings-graft.js (ONLY in Advanced
   mode — see that module's docblock), not present in the static
   partial. The trigger button + integrated dropdown panel reuse the
   EXACT `.spg-fpop-trigger` / `.spg-fpop-trigger-label` /
   `.spg-fpop-panel--integrated` / `.spg-fpop-inner` classes
   scale-page.css already defines for page.js's own FingeringsPopover
   (loaded app-wide, not per-route) — no rules for those classes here,
   see scale-page.css. Only the option-tab row itself (`.se-fpop-tabs`/
   `.se-fpop-tab`) is new: it plays the same role as InlineCollectionStrip's
   `.spg-strip-tabs`/`.spg-strip-tab` on the Scales page, reimplemented
   minimally here since InlineCollectionStrip is hard-coupled to a
   ScalePageState this classic-IIFE file doesn't have (see module
   docblock). Disabled-tab treatment matches the Scales page's own
   `.spg-strip-tab:disabled` (opacity/cursor), not a new invention. ── */
#route-scale-explorer .se-fpop-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#route-scale-explorer .se-fpop-tab {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); cursor: pointer;
  white-space: nowrap; font-family: var(--font); transition: all .15s;
}
#route-scale-explorer .se-fpop-tab:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
#route-scale-explorer .se-fpop-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#route-scale-explorer .se-fpop-tab:disabled { opacity: 0.4; cursor: default; }

/* ROUND-4 ADDENDUM 2026-07-04 — empty-band fix. `#se-advanced-fingerings-
   host` is `.se-card` (line ~281 below) — full card chrome (background/
   border/shadow/margin) EVEN WHEN EMPTY. It's frequently whole-empty:
   `_buildPanelsShell()` DOM-moves `.spg-adv-modemap-host` OUT to right
   after `.se-circle-props-row` (the common case), and the Tablature
   panel only mounts when `_renderTabPanel` decides `applicable` — so with
   Full Fretboard selected (no Tablature) the host has zero children.
   `advanced-fingerings-graft.js` toggles `.spg-adv-fg-host--empty`
   (via `_updateHostEmptyState()`) after every mutation of the host's
   child list; collapse it here rather than relying on `:empty` (comment
   nodes/whitespace would defeat that selector — see the JS docblock). */
#route-scale-explorer .spg-adv-fg-host--empty { display: none; }

/* ── Fretboard-card swap (main-area takeover, like the Scales page) ──
   `.spg-adv-fg-swap` is a sibling of Explorer's native
   `#se-fretboard-container` inside the SAME `.se-fretboard-card` — the
   graft toggles which one is visible (display:none on the other) rather
   than moving/rebuilding the card itself, so Explorer's own resize
   handler (which redraws #se-fretboard-container by id, unaware of the
   swap) never touches a detached node. Card content (toolbar + board)
   is built via the SAME shared/music-page/area-card.js primitives the
   Scales page's FingeringArea uses (`.spg-area-card`/`.spg-area-card-*`
   rules already live in scale-page.css, loaded app-wide — no duplicate
   rules needed here). */
#route-scale-explorer .spg-adv-fg-swap { display: none; }
#route-scale-explorer .spg-adv-fg-swap .spg-area-card { border: none; box-shadow: none; padding: 0; }

/* ══════════════════════════════════════════════════════════════════
   ADVANCED / LAB / GHOST NOTES chrome cells — ADDENDUM 2026-07-03 (4th),
   owner directive "Don't use 2 control menus — integrate the needed
   parts into the Scale Explorer one." Injected by
   assets/js/scale-page/advanced-chrome-cells-graft.js — ONLY while
   Advanced mode is active on the Scales page (never in the standalone
   ?route=scale-explorer route's static 7-cell grid, so no nth-child
   renumbering of the base cells is needed — these three simply land as
   extra trailing grid items, sized like every other `.se-ctrl-cell` via
   the base rules above; `repeat(7, auto)` only names the first 7 explicit
   tracks, additional items still lay out fine via the grid's default
   implicit `auto`-sized columns). `.se-ctrl-cell--adv-chrome` groups all
   three for shared treatment without re-touching the base cells' own
   nth-child rules (which stay scoped to the FIRST 7 children — Search /
   Summary / Key&Display / Uniqueness / Perspective / Filters / Fingerings
   — and are therefore unaffected by cells 8-10 existing or not). ── */
/* The base desktop rule (`grid-template-columns: repeat(7, auto)`,
   line 75) only names 7 explicit tracks — with the 3 chrome cells
   present that's 10 total, which would otherwise keep extending row 1
   horizontally past the viewport instead of wrapping (CSS grid's default
   `grid-auto-flow: row` adds implicit AUTO-sized columns to the SAME row,
   it does not wrap). Scoped via `:has()` so this only applies when the
   graft cells actually exist (Advanced mode) — the standalone route's
   static 7-cell grid never matches this selector and keeps its
   single-row `repeat(7, auto)` layout completely unchanged. Switches to
   an auto-fit/wrap track list so the extra 3 cells flow onto a second
   row instead of overflowing the viewport at desktop widths, matching
   the SAME "wrap internally, edges stay put" philosophy the 1100px/600px
   breakpoints already use for the base 7 cells. */
/* Round-3 (2026-07-03, owner desktop review — item 6, "tighten the
   ctrl-bar toolbar to one compact row at desktop width"). The PREVIOUS
   fix here (`repeat(auto-fit, minmax(140px, 1fr))`, `:has()`-scoped) let
   the grid sprawl into two sparse rows at desktop width once the
   Fingerings + 3 chrome cells + the 2 new Scales/Collection icon cells +
   the Summary-icon reposition (11 cells total post-Round-3) were all
   present — exactly the owner complaint. Tightened to a single compact
   row: `minmax(0, auto)` tracks (content-sized, no artificial 140px
   floor) + reduced cell padding, so 11 narrow cells fit on one row at
   real desktop widths instead of wrapping. Scoped under
   `.spg-root--advanced` (the SAME class `page.js`'s
   `_applyAdvancedExplorerHost()` toggles on entry/exit — an ANCESTOR of
   `#route-scale-explorer` once DOM-moved into `.spg-view-advanced`, see
   scale-collection-page.css's own `.spg-root--advanced` rules) so this
   NEVER applies on the standalone `?route=scale-explorer` route — that
   node is never a descendant of `.spg-root--advanced`, so its static
   7-cell `repeat(7, auto)` single-row desktop layout (line 75 above) and
   its own ≤1100px/≤600px breakpoint reflow rules are completely
   untouched, exactly as before this pass. */
.spg-root--advanced #route-scale-explorer .se-ctrl-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  column-gap: 0;
}
.spg-root--advanced #route-scale-explorer .se-ctrl-cell {
  padding: 6px 10px;
}

/* Owner 2026-07-08: SUMMARY sits directly LEFT of the Collection icon
   cell. CSS `order` (grid items honour it) is the AUTHORITATIVE
   ordering — the two grafts (sidepanes / chrome-cells) mount via
   independent dynamic imports, so DOM insertion order between their
   cells is a race; `order` isn't. Scoped to advanced; the standalone
   route keeps native source order. Also: the Summary open-state ▶
   chevron is visually dropped (owner: "Remove the little arrow") but
   kept in the DOM for scale-explorer.js's wireControls() toggling. */
.spg-root--advanced #route-scale-explorer #se-ctrl-summary { order: 98; }
.spg-root--advanced #route-scale-explorer #se-ctrl-collection-pane { order: 99; }
.spg-root--advanced #route-scale-explorer .se-ctrl-cell--icon-only .chevron { display: none; }

#route-scale-explorer .se-ctrl-cell--adv-chrome:last-child { border-right: none; }

/* ── Advanced Mode Map + All Known Names panels (owner 2026-07-08) ──
   Both render as REGULAR cards in the detail flow (advanced-fingerings-
   graft.js `_buildPanelsShell`): the Mode Map panel brings its own card
   chrome, All Known Names is a native `.se-card`. No extra wrapper
   chrome, no extra expander (owner: "no extra top level expand/collapse.
   Just the card itself… same format, same distance to objects above and
   below"). `display: contents` keeps the settings-toggle wrappers out
   of layout so both cards inherit the exact sibling-card margin rhythm.
   NOTE for refreshPanelVisibility (area-card.js): it sets inline
   `display: '' | 'none'` on `.spg-panel-host` — '' falls back to these
   `contents` rules, so the toggles keep working. */
.spg-adv-panels-host { display: contents; }
.spg-adv-panels-host > .spg-panel-host { display: contents; }
/* The Mode Map host is the flow child once the wrappers collapse —
   give it the shared card gap so its distance to the cards above and
   below matches every `.se-card` (margin-bottom: var(--panel-gap)). */
.spg-adv-panels-host .spg-adv-modemap-host { margin-bottom: var(--panel-gap, 16px); }

/* Lock chip sits inline next to the ADVANCED switch (NOT the whole
   cell) — same fix/rationale as the normal-mode ctrl-shell's
   `.scp-ctrl-cell[data-ctrl-key="advanced"] .fg-lock-chip` rule
   (scale-page.css): `_buildAdvancedCell`'s DOM here is also label /
   switch / optional chip in a block/stack layout matching every sibling
   `.se-ctrl-cell`; only the chip itself goes inline-flex. */
#route-scale-explorer #se-ctrl-advanced .fg-lock-chip {
  display: inline-flex;
  margin-left: var(--space-xs);
  vertical-align: middle;
}

@media (max-width: 1100px) {
  #route-scale-explorer .se-ctrl-cell--adv-chrome { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  #route-scale-explorer .se-ctrl-cell--adv-chrome:last-child { border-right: none; border-bottom: none; }
}
@media (max-width: 600px) {
  #route-scale-explorer .se-ctrl-cell--adv-chrome { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  #route-scale-explorer .se-ctrl-cell--adv-chrome:nth-child(odd) { border-right: none; }
  #route-scale-explorer .se-ctrl-cell--adv-chrome:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════════════
   ROUND-4 ADDENDUM 2026-07-04 — ≤1100px cell-order scramble fix.
   Root cause: the STANDALONE-route narrow-width rules above (lines
   79-116) are `#route-scale-explorer .se-ctrl-cell:nth-child(N)`,
   UNSCOPED by `.spg-root--advanced` — written for the standalone route's
   fixed 7-cell static markup (Search/Summary/Key&Display/Uniqueness/
   Perspective/Filters + the long-removed static Fingerings cell, see the
   "7 cells" comment at line 69). In Advanced mode the grid holds 10-11
   cells in a DIFFERENT DOM order (Scales-icon/Key&Display/FINGERINGS/
   Uniqueness/Perspective/Filters/Summary-icon/Ghost/Lab/Advanced/
   Collection-icon — see advanced-sidepanes-graft.js + advanced-chrome-
   cells-graft.js + advanced-fingerings-graft.js insertion-order
   docblocks), so `nth-child(1)`...`nth-child(7)` match the WRONG cells
   entirely — e.g. `nth-child(7)` here is Ghost Notes, not the old
   Fingerings cell, so it get `order:4` for no reason. CSS has no
   "not-descendant-of" combinator to exclude `.spg-root--advanced` from
   the OLD rules directly, so instead: cancel the exact properties those
   rules set (`order`, `border-right`, `border-bottom` — nothing else),
   scoped under `.spg-root--advanced`, so Advanced mode's ≤1100px/≤600px
   cells fall back to pure DOM-order flow with the SAME uniform border
   treatment the desktop `.spg-root--advanced` cells already get (line
   437-439 `padding`, base rule line 76 `border-right`). This does NOT
   reorder anything — every declaration below is `unset`/the SAME
   base-rule value, not a new `order` value — Fix 2's brief explicitly
   forbids introducing new order tricks here. The standalone route is
   untouched: it's never a `.spg-root--advanced` descendant, so none of
   this ever matches there and its own nth-child order/border rules keep
   working exactly as before this addendum.
   Practically moot in the common case now (Fix 1's hamburger popover
   DOM-moves the grid's cells out entirely at ≤1100px, so the grid is
   usually empty at this width — see advanced-explorer-host.js
   `toggleControlsPopover()`), but kept as defense-in-depth for the
   moment between entering Advanced mode and the user opening the
   popover (the grid is still live-rendered, just off-screen-cramped,
   during that window) and for anyone re-adding an always-visible narrow
   ctrl-bar later. ══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .spg-root--advanced #route-scale-explorer .se-ctrl-cell {
    order: unset !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: none !important;
  }
  .spg-root--advanced #route-scale-explorer .se-ctrl-cell:last-child {
    border-right: none !important;
  }
}
@media (max-width: 600px) {
  .spg-root--advanced #route-scale-explorer .se-ctrl-cell {
    order: unset !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: none !important;
  }
  .spg-root--advanced #route-scale-explorer .se-ctrl-cell:last-child {
    border-right: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SCALES / COLLECTION edge icon cells + SUMMARY icon-only — Round-3
   (2026-07-03, owner desktop review — items 3, 4, 5). Injected/relocated
   by assets/js/scale-page/advanced-sidepanes-graft.js, ONLY while
   Advanced mode is active (never on the standalone route — that module
   never mounts there). `.scp-ctrl-toggle` / `.scp-panel-ico` are the
   SAME classes page.js's own edge icon buttons use (scale-collection-
   page.css, loaded app-wide) — reused verbatim, not copied; only the
   `.se-ctrl-cell` sizing context below is new (Explorer's grid cell
   shell differs from `.scp-ctrl-cell--edge`'s flex-shell sizing). ── */
#route-scale-explorer #se-ctrl-scales-pane .scp-ctrl-toggle,
#route-scale-explorer #se-ctrl-collection-pane .scp-ctrl-toggle {
  height: 28px;
  min-height: 0;
}
/* Collection sidepanel REMOVED from advanced mode (owner 2026-07-13):
   hide the toggle cell + the pane host so it is fully off. */
#route-scale-explorer #se-ctrl-collection-pane,
#route-scale-explorer #se-advanced-collection-host { display: none !important; }

#route-scale-explorer #se-ctrl-collection-pane .scp-ctrl-toggle--right {
  width: 100%;
  justify-content: flex-end;
}

/* SUMMARY icon-only (item 5) — the cell keeps its native `.se-ctrl-label`
   "Summary" text node in the DOM (untouched, for a11y/consistency with
   every sibling cell's label-then-control stack) but the trigger BUTTON
   itself becomes icon+chevron only (see advanced-sidepanes-graft.js
   `_relocateAndIconifySummaryCell()` — the `#se-summary-bar-btn` id and
   its `.chevron` child, both read by scale-explorer.js's `wireControls()`,
   are preserved unchanged; only the button's inner content is swapped for
   an icon). `title="Show summary table"` carries the accessible name. */
#route-scale-explorer .se-ctrl-cell--icon-only #se-summary-bar-btn {
  gap: 4px;
}
#route-scale-explorer .se-ctrl-cell--icon-only .scp-panel-ico {
  width: 20px;
  height: 20px;
}