/* fretly-chrome.css — shared sidebar chrome: FretlyPanel (.fly-panel-*) +
 * FretlyTree (.fly-tree-*).  Tokenised; no fixed colours.  Mounted by
 * assets/js/shared/fretly-panel.js + fretly-tree.js.
 * See project_panel_treelist_unification. */

/* ── Panel shell ──────────────────────────────────────────────────────── */
.fly-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background: var(--surface);
  border-right: var(--border-w, 1px) solid var(--border);
}
.fly-panel--right { border-right: 0; border-left: var(--border-w, 1px) solid var(--border); }

.fly-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
}
.fly-panel__title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-1); }
.fly-panel__bulk { margin-left: auto; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; padding: 2px 4px; }
.fly-panel__bulk:hover { text-decoration: underline; }
.fly-panel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-3); cursor: pointer;
}
.fly-panel__btn:hover { background: var(--surface-2); color: var(--text-1); }
.fly-panel__btn.is-active { color: var(--accent); }
.fly-panel__btn svg { width: 17px; height: 17px; }

.fly-panel__search { padding: 0 var(--space-sm) var(--space-xs); position: relative; }
.fly-panel__search input {
  width: 100%; height: 30px; padding: 0 26px 0 var(--space-sm);
  font: inherit; font-size: 13px; color: var(--text-1);
  background: var(--surface-2); border: var(--border-w,1px) solid var(--border);
  border-radius: var(--radius-sm);
}
.fly-panel__search input:focus { outline: none; border-color: var(--accent); }
.fly-panel__search-clear {
  position: absolute; right: calc(var(--space-sm) + 5px); top: 15px; transform: translateY(-50%);
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: transparent; color: var(--text-3);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.fly-panel__search-clear:hover { color: var(--text-1); }

.fly-panel__body { flex: 1; min-height: 0; overflow: auto; padding-bottom: var(--space-sm); }

/* Collapsed: body + search + title removed; header keeps the toggle only. */
.fly-panel.is-collapsed { width: auto; }
.fly-panel.is-collapsed .fly-panel__body,
.fly-panel.is-collapsed .fly-panel__search,
.fly-panel.is-collapsed .fly-panel__title { display: none; }

/* Section eyebrow (e.g. INSPECTOR / LAYERS / Suites). */
.fly-eyebrow {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
  padding: var(--space-md) var(--space-sm) var(--space-2xs);
}

/* ── Tree ─────────────────────────────────────────────────────────────── */
.fly-tree { display: flex; flex-direction: column; }
.fly-tree:focus { outline: none; }

.fly-tree__row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px var(--space-sm);
  padding-left: calc(var(--space-sm) + var(--fly-depth, 0) * 16px);
  font-size: 13px; color: var(--text-2);
  border-radius: var(--radius-sm); cursor: pointer; user-select: none;
}
.fly-tree__row:hover { background: var(--surface-2); }
.fly-tree__row.is-active {
  background: var(--surface-2); color: var(--text-1);
}
.fly-tree__row.is-folder { font-weight: 500; color: var(--text-1); }
.fly-tree__row.is-match .fly-tree__label { color: var(--accent); }

.fly-tree__icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-3); }
.fly-tree__row.is-folder .fly-tree__icon { color: var(--accent); }
.fly-tree__icon svg { width: 16px; height: 16px; display: block; }

.fly-tree__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Public free-sample rows — the ONE positive accent (owner 2026-07-13).
   Draws attention to the selectable sample scales (Major, Melodic Minor)
   while the rest of the catalogue is faded. Set only when the tree opts in
   (accentSamples) AND publicLocksActive() AND the row isn't locked. */
.fly-tree__row--sample {
  position: relative;
  background: var(--accent-bg, rgba(200, 90, 26, .09));
  color: var(--accent, #c85a1a);
  font-weight: 600;
}
.fly-tree__row--sample::before {
  content: "";
  position: absolute;
  left: 2px; top: 5px; bottom: 5px;
  width: 3px; border-radius: 999px;
  background: var(--accent, #c85a1a);
}
.fly-tree__row--sample .fly-tree__label { color: var(--accent, #c85a1a); font-weight: 600; }
.fly-tree__row--sample .fly-tree__icon  { color: var(--accent, #c85a1a); }
.fly-tree__row--sample:hover            { background: var(--accent-bg, rgba(200, 90, 26, .15)); }
.fly-tree__row--sample.is-active        { background: var(--accent-bg, rgba(200, 90, 26, .17)); color: var(--accent, #c85a1a); }

/* Group header row — a COLLAPSIBLE section header. */
.fly-tree__row--group {
  cursor: pointer; padding-left: var(--space-sm); gap: 4px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
  margin-top: var(--space-xs);
}
.fly-tree__row--group:hover { background: var(--surface-2); }
.fly-tree__group-count { margin-left: auto; padding-left: 8px; color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }