/* ─────────────────────────────────────────────────────────────────
 * css/board-list-panel.css
 *
 * "My Boards" rail panel (2026-06-11 rework). Owned by
 * /js/builder/board-list-panel.js. Loads AFTER builder.css /
 * smart-templates.css so these rules win. SUPERSEDES:
 *   • builder.css's #myBoardsList display-toggling hover-reveal block
 *   • smart-templates.css's Wave 16.B.10 always-visible 🗑 square
 * (both removed at the source — see those files' pointer comments).
 *
 * Scoped to #myBoardsList so other .sidebar-item surfaces are
 * untouched.
 * ───────────────────────────────────────────────────────────────── */

/* ── Within-board drill rows (My Library tree, 2026-06-11 Luke) ────
   A board's drill-downs nest under it as lighter rows: ↳ + folder glyph
   + label, clickable to navigate the center into that sub-board. Visually
   subordinate to board rows so the hierarchy reads at a glance. */
#myBoardsList .sidebar-item--drill{
  font-size:0.82rem;
  color:var(--ink,#334155);
  cursor:pointer;
  min-height:34px;            /* a touch shorter than board rows */
  /* Vertical guide spine: a continuous line down the left of the nested
     block so the "these are inside the board" hierarchy is unmistakable
     (Gemini flagged the connectors as too faint). Stacked rows share the
     same inset offset → one unbroken rail. */
  box-shadow:inset 14px 0 0 -12px #94a3b8;
}
#myBoardsList .sidebar-item--drill .sidebar-item-name{
  font-weight:600;
}
#myBoardsList .sidebar-item--drill .sidebar-item-icon--drill{
  font-size:0.95rem;opacity:1;flex-shrink:0;
}
/* ↳ connector: medium slate so the parent→child link reads clearly against
   white (was --ink-muted, which the verifier called background-blending). */
#myBoardsList .sidebar-item--drill .sidebar-item-nest{
  color:var(--ink-soft);            /* slate-600 — clearly visible on white */
  font-weight:700;
  font-size:0.95rem;
  opacity:1;
}
#myBoardsList .sidebar-item--drill.active{
  /* same accent as a selected board so "where am I" is obvious */
  --blp-row-bg:var(--fk-noun-bg,#FFE8B0);
  color:var(--ink,#1f1f23);font-weight:600;
}
#myBoardsList .sidebar-item--drill.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:2px;background:var(--amber,#f59e0b);
}
#myBoardsList .sidebar-item--drill:hover{
  --blp-row-bg:var(--surface-active,#f0f0f4);
  color:var(--ink,#1f1f23);
}

/* ── Rows ──────────────────────────────────────────────────────── */
#myBoardsList .sidebar-item{
  position:relative;
  min-height:44px;            /* touch target floor */
  /* Row background as a var so the action gradient always matches the
     row's current surface (rest / hover / active tint). */
  --blp-row-bg:var(--surface,#fff);
}
#myBoardsList .sidebar-item:hover{--blp-row-bg:var(--surface-active,#f0f0f4)}
#myBoardsList .sidebar-item.active{--blp-row-bg:var(--fk-noun-bg,#FFE8B0)}
/* Active row = accent bar + tint (tint from builder.css .sidebar-item.active). */
#myBoardsList .sidebar-item.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:2px;background:var(--amber,#f59e0b);
}
/* Name is the priority: fills the row, ellipsizes, tooltip carries the
   full text (title attr set in JS). */
#myBoardsList .sidebar-item-name{flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#myBoardsList .sidebar-item-count{flex-shrink:0}

/* ── Sync dot (nothing when synced / ↻ pending / ⚠ blocked) ─────── */
#myBoardsList .sidebar-item-sync{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;font-size:0.75rem;line-height:1;border-radius:50%;
}
#myBoardsList .sidebar-item-sync--pending{color:var(--ink-muted,#9ca3af)}
#myBoardsList .sidebar-item-sync--blocked{
  border:none;cursor:pointer;padding:0;
  background:#fef3c7;color:#b45309;font-weight:700;
}
#myBoardsList .sidebar-item-sync--blocked:hover{background:#fde68a}

/* ── Desktop hover-reveal actions (🗺 🗑) ─────────────────────────
   Out of flow (absolute) so the NAME keeps its flex:1 width; the
   right-edge gradient keeps revealed icons readable over whatever
   they overlap. Revealed on row hover OR keyboard focus within. */
#myBoardsList .sidebar-item-actions{
  position:absolute;right:2px;top:0;bottom:0;
  display:flex;align-items:center;gap:2px;
  padding:0 4px 0 28px;
  background:linear-gradient(to right,transparent,var(--blp-row-bg) 26px);
  border-radius:0 var(--radius-sm,8px) var(--radius-sm,8px) 0;
  opacity:0;pointer-events:none;
  transition:opacity 120ms ease;
}
/* Resting/hover/focus rows: icon-only actions reveal over the right edge. */
#myBoardsList .sidebar-item:hover .sidebar-item-actions,
#myBoardsList .sidebar-item:focus-within .sidebar-item-actions{
  opacity:1;pointer-events:auto;
}
#myBoardsList .sidebar-item-map,
#myBoardsList .sidebar-item-del{
  flex-shrink:0;width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:none;background:transparent;border-radius:6px;
  font-size:0.95rem;line-height:1;cursor:pointer;padding:0;
}
#myBoardsList .sidebar-item-map:hover{background:var(--surface-active,#eef)}
#myBoardsList .sidebar-item-del:hover{background:#fef2f2;color:#b91c1c}
/* Text labels: hidden everywhere except inside the active-row bar below. */
#myBoardsList .sidebar-item-blabel,
#myBoardsList .board-notes-pill .bnp-label{display:none}

/* ── ACTIVE row = "name, then 3 buttons under it" (Luke 2026-06-11) ──
   The selected board breaks onto two lines: name on top, a labeled
   action bar (📝 Note · 🗺 Tree · 🗑 Delete) underneath — no ⋯ detour,
   no hover needed. The name (flex:1) fills line one; the .sidebar-item-row2
   wrapper takes flex-basis:100% so it drops to a single second line as one
   inflexible unit (no stray third line). The icon stays beside the name. */
/* Trailing-controls wrapper: a single, non-shrinking flex unit holding the
   sync dot + count/📝 pill + actions. At rest it groups them on the right of
   the one-line row (actions still overlay absolutely on hover, as before). */
#myBoardsList .sidebar-item-row2{
  display:flex;align-items:center;gap:4px;flex-shrink:0;min-width:0;
}
#myBoardsList .sidebar-item.active{
  flex-wrap:wrap;align-items:center;row-gap:6px;padding-bottom:8px;
}
/* row2 claims a full second line under the name. On a normal-width rail the
   three labeled buttons fit on that one line (the intended two-line layout).
   It MAY wrap internally on an unusually narrow rail — graceful degradation
   (buttons flow to a 3rd line, still usable) instead of clipping. row2 being
   a contained unit means only its own buttons wrap, predictably — never the
   stray sibling-wrap the earlier uncontained approach risked. (Codex.) */
/* 2026-06-12 (Luke): "put Note, Tree, Delete all on 1 row across" —
   the bar was ALLOWED to wrap on narrow rails, which dropped Note onto
   its own line. One row, always: nowrap + compact buttons that shrink
   (labels ellipsize) instead of wrapping. */
#myBoardsList .sidebar-item.active .sidebar-item-row2{
  flex-basis:100%;flex-wrap:nowrap;gap:4px;
}
#myBoardsList .sidebar-item.active .sidebar-item-row2 > *{
  flex-shrink:1;min-width:0;
}
#myBoardsList .sidebar-item.active .sidebar-item-blabel,
#myBoardsList .sidebar-item.active .board-notes-pill .bnp-label{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#myBoardsList .sidebar-item.active .sidebar-item-actions{
  position:static;opacity:1;pointer-events:auto;
  padding:0;background:none;gap:6px;border-radius:0;
}
/* Active-bar buttons: comfortable tap targets + visible text labels. */
#myBoardsList .sidebar-item.active .sidebar-item-map,
#myBoardsList .sidebar-item.active .sidebar-item-del,
#myBoardsList .sidebar-item.active .board-notes-pill{
  width:auto;min-height:36px;padding:0 8px;font-size:0.78rem;
  border:1px solid var(--border-light,#e5e7eb);
  background:var(--surface,#fff);font-size:0.82rem;font-weight:600;
}
#myBoardsList .sidebar-item.active .sidebar-item-blabel,
#myBoardsList .sidebar-item.active .board-notes-pill .bnp-label{display:inline}

/* 📝 board-notes pill (mounted by board-notes.js — not ours to wire).
   2026-06-11 (Luke): "the notes on the boards for parents … where did
   the rest go" — the pill carries a COUNT parents need to SEE. It was
   wrongly hover-gated like the destructive actions; notes are content,
   not chrome. ALWAYS visible. */
#myBoardsList .board-notes-pill{
  opacity:1;pointer-events:auto;
}

/* ── Touch ⋯ + popover ────────────────────────────────────────── */
#myBoardsList .sidebar-item-more{
  flex-shrink:0;min-width:40px;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:8px;
  font-size:1.1rem;font-weight:700;line-height:1;
  color:var(--ink-muted,#6b7280);cursor:pointer;padding:0;
}
#myBoardsList .sidebar-item-more:hover{background:var(--surface-active,#f0f0f4)}
.blp-popover{
  position:fixed;z-index:10000;min-width:170px;padding:4px;
  background:var(--surface,#fff);
  border:1px solid var(--border-light,#e5e7eb);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.blp-popover-item{
  display:flex;align-items:center;gap:8px;width:100%;
  min-height:44px;padding:0 12px;       /* 44px touch targets */
  border:none;background:transparent;border-radius:8px;
  font-size:0.9rem;color:var(--ink,#1f1f23);
  cursor:pointer;text-align:left;
}
.blp-popover-item:hover{background:var(--surface-active,#f0f0f4)}
.blp-popover-item--danger:hover{background:#fef2f2;color:#b91c1c}

/* ── Panel head: search + Select toggle + select bar ──────────────
   Search styled to MATCH the Templates search (smart-templates.css
   .template-search): pill shape, purple focus ring. */
.blp-head{padding:0 0 0.35rem}
.blp-search-row{display:flex;align-items:center;gap:0.4rem;margin:0 0.25rem 0.45rem}
.blp-search{
  flex:1 1 auto;min-width:0;
  padding:0.5rem 0.75rem;
  border:1.5px solid var(--ink-muted,#d4d4dd);
  border-radius:999px;
  font-size:13px;background:var(--surface,#fff);color:var(--ink,#1f1f23);
  outline:none;
}
.blp-search:focus{
  border-color:#7c5cff;
  box-shadow:0 0 0 3px rgba(124,92,255,0.15);
}
.blp-head-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:0.5rem;margin:0 0.35rem 0.25rem;min-height:22px;
}
.blp-search-count{font-size:0.7rem;color:var(--ink-muted,#6b7280)}
.blp-select-toggle{
  border:none;background:transparent;border-radius:6px;
  color:var(--amber-dark,#b45309);font-size:0.75rem;font-weight:600;
  cursor:pointer;padding:4px 8px;
}
.blp-select-toggle:hover{background:var(--surface-active,#f0f0f4)}
.blp-no-match{
  padding:0.75rem 0.5rem;text-align:center;
  font-size:0.72rem;color:var(--ink-muted,#6b7280);font-style:italic;
}

/* Slim select-mode bar: All · n selected · Delete · Cancel.
   (The standing "Start over" button is GONE — full wipe is Select all
   → Delete, with the existing confirm.) */
.blp-select-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;margin:0 0.25rem 0.35rem;
  border:1px solid var(--border-light,#e5e7eb);border-radius:8px;
  background:var(--bg,#fafafa);font-size:0.75rem;color:var(--ink-soft,#4b5563);
}
.blp-select-all-label{
  display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none;
}
.blp-select-all-label input{width:14px;height:14px;cursor:pointer}
.blp-select-count{flex:1;text-align:right;color:var(--ink-muted,#6b7280)}
.blp-select-delete{
  border:1px solid #fca5a5;background:#fee2e2;color:#b91c1c;
  font-size:0.72rem;font-weight:600;padding:3px 10px;border-radius:6px;cursor:pointer;
}
.blp-select-delete:disabled{
  border-color:var(--border-light,#e5e7eb);background:var(--surface,#fff);
  color:var(--ink-muted);cursor:not-allowed;
}
.blp-select-cancel{
  border:1px solid var(--border-light,#e5e7eb);background:var(--surface,#fff);
  color:var(--ink-soft,#4b5563);font-size:0.72rem;font-weight:600;
  padding:3px 10px;border-radius:6px;cursor:pointer;
}

/* ── A11y / motion ────────────────────────────────────────────── */
#myBoardsList .sidebar-item-map:focus-visible,
#myBoardsList .sidebar-item-del:focus-visible,
#myBoardsList .sidebar-item-more:focus-visible,
#myBoardsList .sidebar-item-sync--blocked:focus-visible,
.blp-search:focus-visible,
.blp-select-toggle:focus-visible,
.blp-select-delete:focus-visible,
.blp-select-cancel:focus-visible,
.blp-popover-item:focus-visible{
  outline:2px solid #7c5cff;outline-offset:1px;
}
@media (prefers-reduced-motion: reduce){
  #myBoardsList .sidebar-item-actions,
  #myBoardsList .board-notes-pill{transition:none}
}