feat(setup): drop the system disk's checkbox, group the rest under a divider

The system disk rendered as a checked-and-disabled checkbox, which reads
as "a choice that is locked". It isn't a choice at all — apps fall back
to it whatever happens — so it now carries no control, and is a <div>
rather than a <label> since there is nothing to label. A spacer keeps its
text aligned with the real checkboxes below.

An "Additional drives" divider separates the two kinds of row: above it
is where apps go regardless, below it is what you can opt into. It only
renders when there is something to divide, so the single-disk case is
still one card and a line of text.

Verified both states.

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

containers/libreportal/frontend/core/setup/css/setup-wizard.css

@@ -1315,8 +1315,9 @@ body.setup-wizard-open .eo-modal { z-index: 10000; }
 /* The system drive: ticked and non-interactive, because apps fall back to it
    and it therefore cannot be deselected. Kept at full opacity — unlike a
    refused drive, it is not a lesser option, it is the default one. */
+/* Not a choice, so not clickable and not dimmed: it is the default, not a
+   lesser option. Kept visually distinct from the selectable cards below. */
 .setup-storage-locked { opacity: 1; cursor: default; }
-.setup-storage-locked input[type=checkbox] { cursor: default; }
 .setup-storage-badge-ok {
   background: rgba(90, 220, 150, 0.18);
   color: #86ecb6;
@@ -1347,3 +1348,29 @@ body.setup-wizard-open .eo-modal { z-index: 10000; }
 }
 .setup-storage-meter-mid  > span { background: rgba(255, 206, 110, 0.9); }
 .setup-storage-meter-high > span { background: rgba(255, 138, 138, 0.95); }
+
+/* The system disk has no checkbox, so this keeps its text aligned with the
+   drives below that do. Same footprint as .setup-app input[type=checkbox]. */
+.setup-storage-spacer {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+/* Divider between "where apps go regardless" and "what you can opt into". */
+.setup-storage-divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 14px 2px 10px;
+  font-size: 0.78em;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.72;
+}
+.setup-storage-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.16);
+}

containers/libreportal/frontend/core/setup/js/setup-wizard.js

@@ -492,9 +492,20 @@ class SetupWizard {
 
     const title = o.locked ? 'System disk' : c.path;
 
+    // The system disk carries NO checkbox — not even a disabled one. Apps fall
+    // back to it whatever happens, so it is not a choice, and a control that
+    // can never change state reads as "locked option" rather than "this is
+    // simply where things go". It is a <div> for the same reason: a <label>
+    // with nothing to label is wrong. A spacer keeps the text aligned with the
+    // real checkboxes below it.
+    const control = o.locked
+      ? '<span class="setup-storage-spacer" aria-hidden="true"></span>'
+      : `<input type="checkbox" data-storage-path="${this.escapeHtml(c.path)}" ${refused ? 'disabled' : ''}>`;
+    const tag = o.locked ? 'div' : 'label';
+
     return `
-      <label class="setup-app setup-storage-card${refused ? ' setup-storage-disabled' : ''}${o.locked ? ' setup-storage-locked' : ''}">
+      <${tag} class="setup-app setup-storage-card${refused ? ' setup-storage-disabled' : ''}${o.locked ? ' setup-storage-locked' : ''}">
-        <input type="checkbox" ${o.locked ? 'checked disabled data-storage-system="1"' : `data-storage-path="${this.escapeHtml(c.path)}"`} ${refused ? 'disabled' : ''}>
+        ${control}
         <span class="setup-app-body">
           <span class="setup-app-name">${this.escapeHtml(title)} ${badge}</span>
           <span class="setup-app-desc">
@@ -503,7 +514,7 @@ class SetupWizard {
           </span>
         </span>
         <button type="button" class="setup-storage-details" data-storage-details="${this.escapeHtml(key)}">Details</button>
-      </label>`;
+      </${tag}>`;
   }
 
   renderStorage() {
@@ -515,6 +526,11 @@ class SetupWizard {
     if (this.storageSystem) {
       html += this._storageCard(this.storageSystem, 'system', { locked: true });
     }
+    // Separate the fixed fact from the actual choice: above the divider is
+    // where apps go regardless, below it is what you can opt into.
+    if (this.storageCandidates.length) {
+      html += '<div class="setup-storage-divider"><span>Additional drives</span></div>';
+    }
     html += this.storageCandidates.map((c, i) => this._storageCard(c, String(i), {})).join('');
     list.innerHTML = html;