/* Navigation drawer/tree presentation, shared by CIC, Mainframe and Musix.
 * Geometry, safe-area placement, modal state and authorization stay with hosts.
 * Colors consume the same light/dark semantic tokens as the CIC reference.
 * Module disclosure behavior and public filtering stay in their existing models. */
#navigation-drawer {
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--surface-overlay);
  color: var(--ink);
}
#navigation-drawer[hidden] { display: none; }
#navigation-drawer > header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: var(--control-min-h);
  margin: 0;
  padding: .55rem .65rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-overlay);
}
#navigation-drawer > header h2 { margin: 0; color: var(--accent); font-size: .95rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
#navigation-drawer .close { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: .2rem; background: var(--control-surface); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
#navigation-drawer .close:hover { border-color: var(--accent); color: var(--accent); }
#navigation-drawer-body { min-height: 0; flex: 1 1 auto; }
#navigation-drawer #shell-modules { order: 1; flex: 0 0 auto; border: 0; padding: .65rem; }
#navigation-drawer #shared-navigation,
#navigation-drawer #app-navigation,
#navigation-drawer .navigation-tools { order: 2; flex: 0 0 auto; margin: 0 .65rem; border-top: 1px solid var(--line); }
#navigation-drawer .shell-modules__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
#navigation-drawer .shell-modules__note { margin: .2rem 0; color: var(--muted); font-size: .66rem; }
#navigation-drawer .nav-tree-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 .6rem; }
#navigation-drawer .nav-tree-actions button { padding: .35rem .6rem; border: 1px solid var(--line); background: var(--control-surface); color: var(--ink); font-family: inherit; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
#navigation-drawer .nav-tree-actions button:hover { background: var(--accent-subtle); }
#navigation-drawer .nav-tree-actions button[disabled] { opacity: .5; cursor: not-allowed; }
#navigation-drawer .nav-tree-note { flex: 1 1 100%; color: var(--muted); font-size: .66rem; }
#navigation-drawer .nav-module { padding: .45rem .5rem; border: 1px solid var(--line); background: var(--surface-subtle); }
#navigation-drawer .nav-module.active,
#navigation-drawer .nav-module.is-current { border-color: var(--accent); }
#navigation-drawer .nav-module-title { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .45rem .5rem; border: 1px solid transparent; border-radius: .2rem; background: transparent; color: var(--ink); text-align: left; font-family: inherit; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
#navigation-drawer .nav-module-title:hover,
#navigation-drawer .nav-module-title.active { background: var(--accent); color: var(--field-surface); }
#navigation-drawer .nav-module-title[disabled] { cursor: default; }
#navigation-drawer .nav-twisty { flex: 0 0 auto; font-size: .7rem; opacity: .8; }
#navigation-drawer .nav-module-panel[hidden] { display: none; }
#navigation-drawer .nav-module.is-closed { margin-bottom: .2rem; }
#navigation-drawer .nav-pages { list-style: none; display: grid; gap: .15rem; margin: .3rem 0 0 .6rem; padding: 0 0 0 .6rem; border-left: 2px solid var(--line); }
#navigation-drawer .nav-pages :is(button,a) { display: block; width: 100%; padding: .4rem .5rem; border: 1px solid transparent; border-radius: .2rem; background: transparent; color: var(--ink); text-align: left; text-decoration: none; font-family: inherit; font-size: .68rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
#navigation-drawer .nav-pages :is(button,a):hover,
#navigation-drawer .nav-pages [aria-current]:not([aria-current="false"]) { border-color: var(--line); background: var(--accent-subtle); color: var(--accent); }
#navigation-drawer .nav-module-open { font-weight: 700; }
#navigation-drawer .nav-pages .nav-preferences { width: auto; border: 0; padding: .3rem .5rem; color: var(--muted); font-size: .6rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
#navigation-drawer .nav-preferences:hover { color: var(--accent); }
#navigation-drawer :is(.close,.nav-module-title,.nav-tree-actions button,.nav-pages button,.nav-pages a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }