/* ============================================================
   fretly-list.css — Fretly List System (shared chrome)
   ------------------------------------------------------------
   Single source of truth for collection/list/tree chrome shared
   across the SCP sidebars (.scp-list-*), the grid panes, and
   FretlyOrganizer (.fly-org-*).

   Phase 1 (2026-06-12) — ADDITIVE, zero visual change:
     1. Tree indentation via the `--depth` custom property
        (written by JS) + --list-indent-base/-step tokens from
        fretly-tokens.css.  Replaces JS-inline paddingLeft so
        density/theming can reach indentation.
     2. Canonical count badge `.fly-count-badge` — declarations
        match the legacy .scp-list-count pill exactly; legacy
        rules remain until every emitter is swapped.

   Load order: AFTER scale-collection-page.css and
   fretly-organizer.css (equal-specificity overrides here win).

   Later phases migrate breadcrumbs (.scp-crumb / .fly-org-crumb)
   and the unified row spec into this file.  Other tree surfaces
   still on inline indent (follow-ups): sheet-builder.js,
   interval-stacker.js, scale-collection-page/tree-pane.js,
   shared/item-list-pane-base.js.
   ============================================================ */

/* ── Tree indentation ──────────────────────────────────────────
   JS writes `--depth` per row (collection-list-pane-base.js,
   fretly-organizer.js sidebar).  Rows without --depth resolve to
   depth 0 = plain base inset, identical to the old inline px. */

/* Scoped to [data-depth] so rows that DON'T opt in (e.g. the bare
   .scp-list-row link rows in chord-page/page.js, item-list-pane's
   inline-padded rows) keep their legacy padding untouched. */
.scp-list-row[data-depth] {
  padding-left: calc(var(--list-indent-base) + var(--depth, 0) * var(--list-indent-step));
}

/* Organizer sidebar historically used an 8 px base (vs SCP's 6). */
.fly-org-sidebar {
  --list-indent-base: 0.5714rem;  /* 8 px */
}
.fly-org-side-entry[data-depth] {
  padding-left: calc(var(--list-indent-base) + var(--depth, 0) * var(--list-indent-step));
}

/* ── Phase 1 follow-up surfaces (2026-06-12) ───────────────────
   Same [data-depth] opt-in; per-surface base/step overrides keep
   the converted px values BYTE-IDENTICAL (root font = 14 px):
     Sheet Builder      12 + 16·depth   → base .8571rem step 1.1429rem
     Interval Stacker   24 + 16·depth   → base 1.7143rem step 1.1429rem
                        root item 12 px → base .8571rem (own class)
     SCP tree pane       8 + 16·depth   → base .5714rem step 1.1429rem
     item-list-pane      6 / 20 px      → DEFAULT tokens (6 + 14·depth) */

.sb-folder-item[data-depth] {
  --list-indent-base: 0.8571rem;
  --list-indent-step: 1.1429rem;
  padding-left: calc(var(--list-indent-base) + var(--depth, 0) * var(--list-indent-step));
}

.is-folder-item[data-depth] {
  --list-indent-base: 1.7143rem;
  --list-indent-step: 1.1429rem;
  padding-left: calc(var(--list-indent-base) + var(--depth, 0) * var(--list-indent-step));
}
.is-folder-item--root[data-depth] {
  --list-indent-base: 0.8571rem;   /* the fixed 12 px "All Stacks" inset */
}

.scp-tree-row[data-depth] {
  --list-indent-base: 0.5714rem;
  --list-indent-step: 1.1429rem;
  padding-left: calc(var(--list-indent-base) + var(--depth, 0) * var(--list-indent-step));
}

/* ── Count badge (canonical pill) ──────────────────────────────
   Matches the legacy .scp-list-count exactly.  New emitters use
   ONLY this class; legacy emitters carry both during migration. */

.fly-count-badge {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2, #f7f6f3);
  border-radius: var(--radius-full, 999px);
  padding: 1px 7px;
  color: var(--text-3, #888);
}


/* ── Breadcrumb (canonical, owner pick 2026-06-12) ─────────────────
   ONE crumb style app-wide: the scale/chord pages' QUIET TEXT look
   (.scp-crumb — small grey path, hover = accent text, current = dark
   + semibold, no pill background).  The Suites organizer's crumbs
   (.fly-org-crumb, previously accent pills with hover backgrounds)
   adopt it here — this file loads AFTER fretly-organizer.css, so
   equal-specificity overrides below win.  New surfaces use this
   vocabulary; don't add private crumb styling. */
.fly-org-crumb {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: var(--text-2, #555);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms;
}
.fly-org-crumb:hover {
  background: transparent;
  color: var(--accent, #e8853c);
}
.fly-org-crumb.is-current {
  color: var(--text, #1a1a18);
  font-weight: 600;
  cursor: default;
}
.fly-org-crumb--root { font-weight: 500; }
.fly-org-crumb.is-current.fly-org-crumb--root { font-weight: 600; }
.fly-org-crumb-sep {
  color: var(--text-3, #bbb);
  font-weight: 400;
}
.fly-org-breadcrumb {
  font-size: 12px;
  gap: 6px;
}


/* ── Collection pane → renewed .fly-panel chrome (owner 2026-06-19) ────
   The right Collection pane (.scp-shell-list--coll) adopts the LEFT
   list's calm renewed chrome so both sidebars read identically:
     · quiet transparent header, 14px/600 title (was a surface-2 band)
     · borderless rows, neutral hover + neutral active (NO orange bar)
     · plain right-aligned count text (was a surface-2 pill)
     · uppercase group headers in the muted tone
   Values mirror fretly-chrome.css (.fly-panel / .fly-tree).  CSS only —
   the pane's DOM/JS (tabs, multi-type tree, one-search via the main
   view Filter) is unchanged, per the 2026-06-12 Fretly List System
   agreement (sidebar = pure navigation, one search).  These selectors
   are MORE specific than the legacy .scp-list-* rules, so they win
   regardless of load order. */

/* Header — quiet, matches .fly-panel__header. */
.scp-shell-list--coll .scp-list-titlebar {
  background: transparent;
  border-bottom: 0;
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
}
.scp-shell-list--coll .scp-list-titlebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #1a1a18);
  letter-spacing: 0;
}

/* Rows — borderless, neutral hover, neutral active (drop the orange
   bar + orange tint; match .fly-tree__row). */
.scp-shell-list--coll .scp-list-row {
  border-left: 0;
  border-bottom: 0;
  /* NB: set top/bottom/right ONLY — never the `padding` shorthand, which
     would clobber the depth-driven `padding-left` from the
     `.scp-list-row[data-depth]` rule above and flatten the indentation
     (owner 2026-06-19: "subcategories not indented like the left panel"). */
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: var(--space-sm);
  font-size: 13px;
  color: var(--text-2, #555);
}
.scp-shell-list--coll .scp-list-row:hover {
  background: var(--surface-2);
}
.scp-shell-list--coll .scp-list-row--active {
  background: var(--surface-2);
  border-left-color: transparent;
  color: var(--text-1, #1a1a18);
  font-weight: 500;
}

/* Group / section headers — match .fly-tree__row--group. */
.scp-shell-list--coll .scp-list-row--section .scp-list-name {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--text-3, #888);
  font-weight: 500;
}

/* Count — plain right-aligned text, no pill (match .fly-tree__group-count). */
.scp-shell-list--coll .scp-list-count {
  background: transparent;
  border-radius: 0;
  padding: 0 0 0 8px;
  margin-left: auto;
  color: var(--text-3, #888);
  font-weight: 500;
}

/* ── Hierarchy "type ladder" (owner 2026-06-19) ───────────────────────
   Three visually distinct tiers so a top category ("3 notes") never
   reads the same as its sub-content ("Narrow"):
     · SECTION  (depth 0) — caps + muted (set above) PLUS a hairline
       divider + breathing room above, so each section is its own block.
     · CATEGORY (depth 1) — semibold + dark, a clear primary item.
     · SUB-CONTENT (depth ≥ 2 folders + leaves) — regular weight, muted.
   Levels keyed off the row's data-depth (set in collection-list-pane-base).
   Calm by design: no heavy tree connectors. */

/* Section blocks — divider + space above (skipped on the first row). */
.scp-shell-list--coll .scp-list-row--section {
  margin-top: var(--space-sm);
  padding-top: 10px;
  border-top: 1px solid var(--border, #e0ddd5);
}
.scp-shell-list--coll .scp-list-rows > .scp-list-row--section:first-child {
  margin-top: 0;
  padding-top: var(--space-xs);
  border-top: 0;
}

/* Top category (depth 1) — regular weight (owner 2026-06-19: "remove
   bold, it messes up the feel").  Distinguished from sub-content by the
   darker tone + its one-step-shallower indent, not by weight. */
.scp-shell-list--coll .scp-list-row[data-depth="1"] .scp-list-name {
  font-weight: 400;
  color: var(--text-1, #1a1a18);
}

/* Sub-content (depth ≥ 2 folders + leaves) — regular weight, muted. */
.scp-shell-list--coll .scp-list-row[data-depth="2"] .scp-list-name,
.scp-shell-list--coll .scp-list-row[data-depth="3"] .scp-list-name,
.scp-shell-list--coll .scp-list-row[data-depth="4"] .scp-list-name {
  font-weight: 400;
  color: var(--text-2, #555);
}

/* ── Organizer-grade grid management (Fretly List System Phase 3, 2026-07-10)
   ──────────────────────────────────────────────────────────────────────
   Shared affordances the CollectionGridPane wires onto folder + leaf
   cards/rows across the scale + chord panes: a ⋯ menu button, multi-select
   highlight, drag-to-folder feedback, and the inline-rename input.  Chrome
   only — capability-gated in JS, so pages without mutations show none of it. */

/* ⋯ "More actions" button — top-right of a card, inline on a row.  Hidden
   until hover / focus / selection to keep the gallery calm. */
.scp-card,
.scp-leaf-card,
.scp-folder-row { position: relative; }

.scp-node-menu-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-2, #555);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background-color .12s ease;
}
.scp-folder-row .scp-node-menu-btn { top: 50%; transform: translateY(-50%); }

.scp-card:hover .scp-node-menu-btn,
.scp-leaf-card:hover .scp-node-menu-btn,
.scp-folder-row:hover .scp-node-menu-btn,
.scp-node-menu-btn:focus-visible,
.is-selected > .scp-node-menu-btn {
  opacity: 1;
}
.scp-node-menu-btn:hover { background: var(--surface-2, #eee); color: var(--text-1, #1a1a18); }

/* Multi-select highlight — a calm accent ring + tint, no layout shift. */
.scp-card.is-selected,
.scp-leaf-card.is-selected,
.scp-folder-row.is-selected {
  box-shadow: inset 0 0 0 2px var(--accent, #c8811e);
  background: color-mix(in srgb, var(--accent, #c8811e) 8%, transparent);
}

/* Drag-to-folder — the card under the pointer lights up as the drop target;
   the dragged card dims. */
.scp-card.scp-drop-over,
.scp-folder-row.scp-drop-over {
  box-shadow: inset 0 0 0 2px var(--accent, #c8811e);
  background: color-mix(in srgb, var(--accent, #c8811e) 16%, transparent);
}
.scp-card.is-dragging,
.scp-leaf-card.is-dragging,
.scp-folder-row.is-dragging { opacity: .5; }

/* Inline rename input — sits in place of the folder name text. */
.scp-rename-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--text-1, #1a1a18);
  padding: 1px 4px;
  border: 1px solid var(--accent, #c8811e);
  border-radius: var(--radius-sm, 5px);
  background: var(--surface-1, #fff);
}
.scp-rename-input:focus { outline: none; }