/* ── Menu browser (Menu view) ──────────────────────────────────────── */
/* Two panes: a scrollable item list on the left, the picked item's
   entity tree on the right. The tree uses native <details>/<summary> for
   click-through expand/collapse — no JS for the toggles themselves. */
/* Scope banner: names whose menu is shown — a concept's global menu vs one
   location's — so the browser is never ambiguous about what it's listing. */
.menu-scope {
  margin: 0 0 .75rem; padding: .5rem .75rem;
  background: rgba(124,58,237,.12); border: 1px solid var(--border);
  border-radius: .5rem; color: var(--purple-lite);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}

.menu-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.menu-items {
  flex: 0 0 15rem; position: sticky; top: 4.5rem;
  max-height: calc(100vh - 6rem); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: .25rem .5rem .75rem;
}
.menu-hdr { font-size: .85rem; font-weight: 600; color: var(--muted); margin: .75rem .3rem .5rem; }

/* Collapsible item groups (with-constraints / standalone). Prominent, sticky
   header with a disclosure caret and a count pill; the caret rotates open. */
.menu-section { margin: .4rem 0 .2rem; }
.menu-section > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: .5rem; padding: .5rem .5rem; margin: 0 -.25rem;
  border-radius: .5rem; position: sticky; top: 0; z-index: 1;
  background: var(--card);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text);
}
.menu-section > summary::-webkit-details-marker { display: none; }
.menu-section > summary::before {
  content: "▸"; display: inline-block; width: .85rem; color: var(--dim);
  font-size: .9rem; transition: transform .12s;
}
.menu-section[open] > summary::before { transform: rotate(90deg); }
.menu-section > summary:hover { color: var(--purple-lite); }
.menu-section-count {
  margin-left: auto; font-size: .7rem; font-weight: 600; line-height: 1;
  padding: .2rem .45rem; border-radius: 999px; letter-spacing: 0;
  background: rgba(124,58,237,.16); color: var(--purple-lite);
}
.menu-section-body { padding-top: .15rem; }
.menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; color: var(--text);
  font-size: .88rem; padding: .4rem .55rem; border-radius: .5rem; margin: 1px 0;
}
.menu-item:hover:not(.active) { background: #161619; }
.menu-item.active { background: #1d1d22; border-color: var(--border); font-weight: 600; }
.menu-detail { flex: 1 1 auto; min-width: 0; }
#menu-tree {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.25rem 1.25rem;
}
.menu-tree-item > h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .15rem; }
.menu-node { margin: .1rem 0; }
.menu-node .kids { margin-left: 1rem; padding-left: .85rem; border-left: 1px solid var(--border-soft); }
.menu-opt { padding: .18rem 0; font-size: .9rem; }
.menu-cst > summary {
  cursor: pointer; list-style: none; padding: .3rem 0;
  font-size: .9rem; font-weight: 600;
}
.menu-cst > summary::-webkit-details-marker { display: none; }
.menu-cst > summary::before {
  content: "▸"; display: inline-block; width: 1rem; color: var(--dim);
  transition: transform .12s;
}
.menu-cst[open] > summary::before { transform: rotate(90deg); }
.menu-cst > summary:hover { color: var(--purple-lite); }
.menu-hint { color: var(--dim); font-weight: 400; font-size: .78rem; margin-left: .35rem; }
.menu-desc { color: var(--dim); font-size: .8rem; margin: .05rem 0 .1rem; }
.badge {
  display: inline-block; font-size: .68rem; font-weight: 600;
  padding: .05rem .4rem; border-radius: .4rem; margin-left: .4rem;
  background: rgba(124,58,237,.18); color: var(--purple-lite); vertical-align: middle;
}