/* ═══════════ MAIN LAYOUT ═══════════ */
.app-layout{display:flex;height:calc(100vh - var(--topbar-h))}

/* ═══════════ SIDEBAR ═══════════ */
.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border-light);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:width 0.3s}
.sidebar-section{padding:1rem 1rem 0.5rem}
.sidebar-section-title{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--ink-muted);margin-bottom:0.6rem;display:flex;align-items:center;justify-content:space-between}
.sidebar-list{list-style:none;padding:0 0.5rem;overflow-y:auto;flex:1}
.sidebar-item{padding:0.6rem 0.75rem;border-radius:var(--radius-sm);cursor:pointer;
  display:flex;align-items:center;gap:0.6rem;transition:all var(--transition);
  font-size:0.85rem;color:var(--ink-soft);margin-bottom:2px}
.sidebar-item:hover{background:var(--surface-active);color:var(--ink)}
.sidebar-item.active{background:var(--fk-noun-bg);color:var(--amber-dark);font-weight:600}
/* Nested board rows (drill children) — a ↳ connector + a left guide line so
   it reads as "lives under the board above" (Luke 2026-06-10). */
.sidebar-item--nested{border-left:2px solid var(--fk-noun-bg,#FFE8B0);margin-left:2px}
.sidebar-item-nest{color:var(--ink-muted);font-size:0.95rem;flex-shrink:0;opacity:0.75;margin-right:-2px}
/* 🗺/🗑 per-row actions, hover-reveal, name-priority + sync dot MOVED to
   /css/board-list-panel.css (My Boards rail rework 2026-06-11, owned by
   /js/builder/board-list-panel.js). The old display-toggling reveal block
   that lived here was superseded by the opacity-fade + right-edge-gradient
   pattern there. */
/* Expand/collapse twirl for boards that HAVE drill-downs (default collapsed). */
.sidebar-item-twirl{width:18px;height:18px;flex-shrink:0;border:none;background:transparent;color:var(--ink-soft,#666);font:700 11px/1 system-ui;cursor:pointer;padding:0;border-radius:4px}
.sidebar-item-twirl:hover{background:var(--surface-active,#eee);color:var(--ink,#111)}
.sidebar-item-twirl--leaf{cursor:default;visibility:hidden}
.sidebar-item-icon{font-size:1.2rem;width:24px;text-align:center;flex-shrink:0}
.sidebar-item-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.sidebar-item-count{font-size:0.7rem;color:var(--ink-muted);background:var(--bg);
  padding:0.1rem 0.45rem;border-radius:10px;flex-shrink:0}
.sidebar-new-btn{margin:0.75rem;padding:0.65rem;border-radius:var(--radius-md);
  border:2px dashed var(--border);color:var(--ink-muted);font-weight:600;font-size:0.85rem;
  transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:0.4rem}
.sidebar-new-btn:hover{border-color:var(--amber);color:var(--amber);background:var(--fk-noun-bg)}
.sidebar-divider{height:1px;background:var(--border-light);margin:0.5rem 1rem}
.sidebar-templates{padding:0 0.5rem}
.sidebar-dash-links{padding:0 0.5rem}
.sidebar-dash-link{display:block;padding:0.55rem 0.75rem;border-radius:var(--radius-sm);
  font-size:0.8rem;font-weight:600;color:var(--ink-muted);text-decoration:none;
  transition:all var(--transition);margin-bottom:2px}
.sidebar-dash-link:hover{background:var(--surface-active);color:var(--amber-dark)}
.template-item{padding:0.5rem 0.75rem;border-radius:var(--radius-sm);cursor:pointer;
  display:flex;align-items:center;gap:0.5rem;transition:all var(--transition);
  font-size:0.8rem;color:var(--ink-muted);margin-bottom:2px}
.template-item:hover{background:var(--surface-active);color:var(--ink)}
.template-item-icon{font-size:1.1rem}
.template-item-meta{font-size:0.65rem;color:var(--ink-muted);margin-left:auto}
/* Category filter chip row above the templates list. Compact, wraps,
   horizontal-scrollable on narrow sidebars. The active chip uses the
   amber accent so the user can see at a glance which filter is on. */
.template-cat-bar{display:flex;flex-wrap:wrap;gap:0.25rem;padding:0 0.5rem 0.4rem}
.template-cat-chip{padding:0.25rem 0.55rem;border-radius:999px;
  background:var(--surface-active);color:var(--ink-muted);
  font-size:0.7rem;font-weight:600;cursor:pointer;border:1px solid transparent;
  white-space:nowrap;transition:all var(--transition)}
.template-cat-chip:hover{color:var(--ink);border-color:var(--ink-muted)}
.template-cat-chip.active{background:var(--amber);color:#fff;border-color:var(--amber)}
.template-cat-chip-count{opacity:0.7;margin-left:0.2rem;font-weight:400}
.template-search{display:block;width:calc(100% - 1rem);margin:0 0.5rem 0.5rem;
  padding:0.4rem 0.6rem;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--surface-active);
  color:var(--ink);font-size:0.75rem;outline:none}
.template-search:focus{border-color:var(--amber)}
.template-empty{padding:0.75rem;text-align:center;font-size:0.7rem;
  color:var(--ink-muted);font-style:italic}

/* ─── Sidebar template inline search results (2026-05-28) ────────
   Compact cards rendered below #templateSearch as the user types.
   Built for density — sidebar is narrow (~280px). Each row is a
   ~52px-tall anchor that opens the template detail page in the
   panel router. */
.sidebar-template-results{margin:0 0.5rem 0.5rem;
  max-height:50vh;overflow-y:auto}
.sidebar-template-results[hidden]{display:none}
.sidebar-tpl-list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px}
.sidebar-tpl-card{display:flex;align-items:center;gap:0.5rem;
  padding:0.4rem 0.5rem;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid transparent;
  color:var(--ink);text-decoration:none;cursor:pointer;
  transition:background 100ms ease,border-color 100ms ease}
.sidebar-tpl-card:hover{background:var(--surface-active);
  border-color:var(--amber)}
.sidebar-tpl-card:focus-visible{outline:2px solid var(--amber);
  outline-offset:1px}
.sidebar-tpl-icon{font-size:1.4rem;line-height:1;flex-shrink:0;
  width:1.6rem;text-align:center}
.sidebar-tpl-body{display:flex;flex-direction:column;gap:2px;
  min-width:0;flex:1}
.sidebar-tpl-name{font-size:0.78rem;font-weight:600;
  color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sidebar-tpl-meta{font-size:0.65rem;color:var(--ink-muted)}
.sidebar-tpl-empty{padding:0.75rem 0.5rem;text-align:center}
.sidebar-tpl-empty-emoji{font-size:1.5rem;margin-bottom:0.25rem}
.sidebar-tpl-empty-msg{font-size:0.72rem;color:var(--ink-muted);
  margin-bottom:0.4rem}
.sidebar-tpl-empty-cta,.sidebar-tpl-see-all{display:block;
  padding:0.45rem 0.5rem;text-align:center;font-size:0.7rem;
  color:var(--amber);text-decoration:none;
  border-top:1px solid var(--surface-active);margin-top:0.25rem}
.sidebar-tpl-empty-cta:hover,.sidebar-tpl-see-all:hover{
  text-decoration:underline}