fix: mobile drawer width, group dividers and sidebar form layout

- Drawer uses the M3 width (up to 360px) so the appearance picker fits;
  segmented buttons get equal widths and swatches no longer shrink.
- Dividers separate the drawer groups, so section headings no longer
  read as nav items.
- Sidebar forms in the drawer (e.g. activity filters) line up with the
  nav labels, fields stack under their label, checkbox rows align.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tonalmine/stylesheets/components.css

@@ -501,12 +501,11 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
   letter-spacing: var(--md-sys-typescale-label-medium-tracking);
 }
 /* M3 segmented button */
-.nm-segmented { display: flex; margin-block-end: 12px; }
+.nm-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-block-end: 12px; } /* equal segments */
 .nm-segmented button {
-  flex: 1;
   border-radius: 0;
   block-size: 32px;
-  padding-inline: 12px;
+  padding-inline: 8px;
   border: 1px solid var(--md-sys-color-outline);
   background: transparent;
   color: var(--md-sys-color-on-surface);
@@ -519,8 +518,9 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
 .nm-segmented button:hover { background-image: var(--nm-state-hover); }
 .nm-segmented button[aria-pressed="true"] { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
 /* Color swatches: the selected one gets a ring */
-.nm-swatches { display: flex; gap: 8px; }
+.nm-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
 .nm-swatch {
+  flex-shrink: 0;
   inline-size: 28px;
   block-size: 28px;
   padding: 0;