feat(hub): audio_root wiring, mutually-exclusive players, Settings rework

Five related pieces of polish against the Music app and Settings, all
from the same conversation:

- Music app now requires audio_root, same as Videos requires video_root:
  an empty-state message until one is set, and grouping filtered to only
  what's under it (underAudioRoot, mirroring video-app.js's
  underVideoRoot). Wires the new audio_root/audio_root_ack pair through
  transport.js and group-page.js state the same way video_root already
  flows.
- Starting one player now stops the other — opening a film closes the
  music queue, starting a track closes the video modal. Both used to run
  at once, found live.
- Group Settings reworked: every section but a bare form (invite,
  pair-operator, approve-device) is now collapsible (CollapsibleSection);
  the uploads on/off button is a real toggle switch (ToggleSwitch,
  reused for TMDB/MusicBrainz's enabled switches too, each now with an
  icon + status badge in its header instead of a plain checkbox row);
  and shared directories, the Videos root picker, and the new Music root
  picker are merged into one "Directories" section (RootFolderRow) instead
  of three separate ones scattered down the page — the root pickers only
  show once their app is actually enabled.

1 files changed, 105 insertions, 0 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 38c38c8..b332f6f 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -1020,6 +1020,111 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   color: var(--text-secondary);
 }
 
+/* Collapsible settings sections (2026-08-24) — every section but a form
+   someone might be mid-typing into (invite, pair-operator, approve-device,
+   left as plain .settings-section blocks). Reuses .video-flat-chevron for
+   the rotate-on-open animation rather than declaring a near-duplicate. */
+.settings-collapsible-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.settings-collapsible-header .settings-heading { margin-bottom: 0; }
+.settings-collapsible-body { margin-top: 12px; }
+
+.settings-meta-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 600;
+  font-size: 1.1em;
+  color: var(--text);
+}
+.settings-meta-title .icon { width: 16px; height: 16px; }
+.settings-meta-badge {
+  font-size: 0.75em;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--bg-raised);
+  color: var(--text-dim);
+}
+.settings-meta-badge.on { background: var(--accent); color: #fff; }
+
+/* A modern on/off switch — replaces a checkbox or a "Turn on/off" button
+   wherever the setting is a straight binary. */
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  font-size: 0.9em;
+  color: var(--text);
+}
+.toggle-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle-switch-track {
+  position: relative;
+  width: 38px;
+  height: 21px;
+  border-radius: 11px;
+  background: var(--border);
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+.toggle-switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  transition: transform 0.15s;
+}
+.toggle-switch input:checked + .toggle-switch-track { background: var(--accent); }
+.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
+  transform: translateX(17px);
+}
+.toggle-switch input:focus-visible + .toggle-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
+.toggle-switch-disabled { opacity: 0.5; cursor: default; }
+
+/* A sub-block within a merged settings section (Directories: shared roots,
+   Videos root, Music root, all under one CollapsibleSection). */
+.settings-root-row { padding: 10px 0; }
+.settings-root-row + .settings-root-row { border-top: 1px solid var(--border); }
+.settings-root-row-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.settings-root-row-title .icon { width: 15px; height: 15px; color: var(--text-dim); }
+.settings-root-row-title h4 {
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
 .settings-select {
   padding: 6px 10px;
   border: 1px solid var(--border);