diff --git a/docs/assets/panel-redesign/panel/components.html b/docs/assets/panel-redesign/panel/components.html
index 015ba9b..403bdfa 100644
--- a/docs/assets/panel-redesign/panel/components.html
+++ b/docs/assets/panel-redesign/panel/components.html
@@ -84,7 +84,7 @@
         <dl class="sp-facts">
           <div><dt>list</dt><dd>page_head, then full-width boxes: the add form first, the table second. <a href="out-domains.html">Example</a></dd></div>
           <div><dt>detail</dt><dd>page_head, then <code>columns</code>: <code>is-3</code> side menu + <code>is-9</code> boxes. <a href="out-domain.html">Example</a></dd></div>
-          <div><dt>cards</dt><dd>page_head, then <code>columns sp-cards</code>: two <code>is-6</code> stacks of numbered boxes read in rows, odd on the left and even on the right, each stack closed up. On a phone the boxes come in the order of their numbers. The two stacks under this box are laid out so. <a href="health.html">Example</a></dd></div>
+          <div><dt>cards</dt><dd>page_head, then <code>columns sp-cards</code>: two <code>is-6</code> stacks of numbered boxes read in rows, odd on the left and even on the right, each stack closed up. On a phone the boxes come in the order of their numbers: each box carries <code>data-order</code>, its own number, up to twelve. The two stacks under this box are laid out so. <a href="health.html">Example</a></dd></div>
           <div><dt>form</dt><dd>page_head, then boxes in equal <code>columns</code>, one submit row under them. <a href="out-app.html">Example</a></dd></div>
           <div><dt>signed out</dt><dd>The split brand / form screen, no navbar. <a href="login.html">Example</a></dd></div>
         </dl>
@@ -93,7 +93,7 @@
 
     <div class="columns sp-cards">
       <div class="column is-6">
-        <div class="box">
+        <div class="box" data-order="1">
           <div class="sp-box-head"><span class="sp-no">01</span><h2>postmark</h2><div class="sp-end">Worst status of the page's checks</div></div>
           <div class="sp-box-body">
             <div class="buttons">
@@ -105,7 +105,7 @@
           </div>
         </div>
 
-        <div class="box">
+        <div class="box" data-order="3">
           <div class="sp-box-head"><span class="sp-no">03</span><h2>status_tag</h2><div class="sp-end">One mapping, one function</div></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Status</th><th>Tag</th><th>Bulma classes</th></tr></thead>
@@ -122,7 +122,7 @@
       </div>
 
       <div class="column is-6">
-        <div class="box">
+        <div class="box" data-order="2">
           <div class="sp-box-head"><span class="sp-no">02</span><h2>box · box_head</h2><div class="sp-end">The end slot: a note, a tag, a link or a filter form</div><a class="sp-help" href="help.html#checks" title="Optional: the section's Help topic"><i class="ti ti-help-circle"></i></a></div>
           <div class="sp-box-body"><p class="mb-2">The <i class="ti ti-help-circle"></i> after the end slot is <code>sp-help</code>: an optional link to the section's topic on the Help page. It replaces today's help drawer.</p><p>box_body — padded content. A <code>table</code> or a run of <code>sp-record</code> blocks sits directly in the box, without box_body.</p></div>
           <div class="sp-box-foot"><span>box_foot — a legend, paging</span><span class="sp-end">end slot</span></div>
diff --git a/docs/assets/panel-redesign/panel/health.html b/docs/assets/panel-redesign/panel/health.html
index 5733063..2bcb056 100644
--- a/docs/assets/panel-redesign/panel/health.html
+++ b/docs/assets/panel-redesign/panel/health.html
@@ -76,7 +76,7 @@
 
     <div class="columns sp-cards">
       <div class="column is-6">
-        <div class="box" id="processes">
+        <div class="box" id="processes" data-order="1">
           <div class="sp-box-head"><span class="sp-no">01</span><h2>Processes</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Program</th><th>State</th><th>Detail</th></tr></thead>
@@ -89,7 +89,7 @@
             </tbody>
           </table></div>
         </div>
-        <div class="box" id="sender-check">
+        <div class="box" id="sender-check" data-order="3">
           <div class="sp-box-head"><span class="sp-no">03</span><h2>Sender check</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div><a class="sp-help" href="help.html#sender-check" title="What is checked and what these numbers are for"><i class="ti ti-help-circle"></i></a></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Period</th><th>Panel not answering</th><th>Connections turned away</th><th>Messages deferred</th></tr></thead>
@@ -103,7 +103,7 @@
             <p class="sp-muted">The panel holds each message's <code>From:</code> against the application that sends it. While the panel does not answer, Postfix answers the sending application with a temporary error instead of accepting mail unchecked, and the application tries again later. Time is counted only while Postfix itself was running; ≈ marks a period with a start at which that could not be asked, and its time is at most what is shown. Counted since <span class="sp-mono">2026-10-13</span>.</p>
           </div>
         </div>
-        <div class="box" id="hostname">
+        <div class="box" id="hostname" data-order="5">
           <div class="sp-box-head"><span class="sp-no">05</span><h2>Hostname and reverse DNS</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div><a class="sp-help" href="help.html#rdns" title="Forward and reverse DNS"><i class="ti ti-help-circle"></i></a></div>
           <div class="sp-box-body">
             <dl class="sp-facts">
@@ -112,7 +112,7 @@
             </dl>
           </div>
         </div>
-        <div class="box" id="machine">
+        <div class="box" id="machine" data-order="7">
           <div class="sp-box-head"><span class="sp-no">07</span><h2>Machine</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div><a class="sp-help" href="help.html#checks" title="What these readings mean"><i class="ti ti-help-circle"></i></a></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Resource</th><th>Usage</th><th>Detail</th></tr></thead>
@@ -125,7 +125,7 @@
         </div>
       </div>
       <div class="column is-6">
-        <div class="box" id="sockets">
+        <div class="box" id="sockets" data-order="2">
           <div class="sp-box-head"><span class="sp-no">02</span><h2>Milter sockets</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Milter</th><th>State</th></tr></thead>
@@ -137,7 +137,7 @@
             </tbody>
           </table></div>
         </div>
-        <div class="box" id="certificate">
+        <div class="box" id="certificate" data-order="4">
           <div class="sp-box-head"><span class="sp-no">04</span><h2>TLS certificate</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div><a class="sp-help" href="help.html#certificate" title="When it warns and what to do"><i class="ti ti-help-circle"></i></a></div>
           <div class="sp-box-body">
             <dl class="sp-facts">
@@ -149,7 +149,7 @@
             <p class="mt-4 sp-muted">Postfix still serves the certificate above. A renewed one is waiting in the mounted file; Postfix takes it up at its next check for a renewal, at most a day after it was mounted.</p>
           </div>
         </div>
-        <div class="box" id="notification-mail">
+        <div class="box" id="notification-mail" data-order="6">
           <div class="sp-box-head"><span class="sp-no">06</span><h2>Notification mail</h2><div class="sp-end"><span class="tag is-warning is-light">warn</span></div><a class="sp-help" href="help.html#notifications" title="What the panel sends and what makes it arrive"><i class="ti ti-help-circle"></i></a></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Record</th><th>State</th></tr></thead>
@@ -162,7 +162,7 @@
             <p class="sp-muted">Sent from <span class="sp-mono">postmaster@mail.example.org</span>. What to publish is under <a href="settings.html#notification-mail">Settings</a>.</p>
           </div>
         </div>
-        <div class="box" id="configuration">
+        <div class="box" id="configuration" data-order="8">
           <div class="sp-box-head"><span class="sp-no">08</span><h2>Configuration</h2><div class="sp-end">Safe to run at any time</div></div>
           <div class="sp-box-body">
             <p class="mb-3">Regenerates the OpenDKIM and Postfix configuration from the database and reloads both daemons. Use it after editing the files by hand, after restoring a backup, or when the running configuration looks out of step with the domain and application lists. It does not touch the queue or the TLS certificate.</p>
diff --git a/docs/assets/panel-redesign/panel/src/components.html b/docs/assets/panel-redesign/panel/src/components.html
index 48d726d..96152b9 100644
--- a/docs/assets/panel-redesign/panel/src/components.html
+++ b/docs/assets/panel-redesign/panel/src/components.html
@@ -18,7 +18,7 @@
         <dl class="sp-facts">
           <div><dt>list</dt><dd>page_head, then full-width boxes: the add form first, the table second. <a href="out-domains.html">Example</a></dd></div>
           <div><dt>detail</dt><dd>page_head, then <code>columns</code>: <code>is-3</code> side menu + <code>is-9</code> boxes. <a href="out-domain.html">Example</a></dd></div>
-          <div><dt>cards</dt><dd>page_head, then <code>columns sp-cards</code>: two <code>is-6</code> stacks of numbered boxes read in rows, odd on the left and even on the right, each stack closed up. On a phone the boxes come in the order of their numbers. The two stacks under this box are laid out so. <a href="health.html">Example</a></dd></div>
+          <div><dt>cards</dt><dd>page_head, then <code>columns sp-cards</code>: two <code>is-6</code> stacks of numbered boxes read in rows, odd on the left and even on the right, each stack closed up. On a phone the boxes come in the order of their numbers: each box carries <code>data-order</code>, its own number, up to twelve. The two stacks under this box are laid out so. <a href="health.html">Example</a></dd></div>
           <div><dt>form</dt><dd>page_head, then boxes in equal <code>columns</code>, one submit row under them. <a href="out-app.html">Example</a></dd></div>
           <div><dt>signed out</dt><dd>The split brand / form screen, no navbar. <a href="login.html">Example</a></dd></div>
         </dl>
@@ -27,7 +27,7 @@
 
     <div class="columns sp-cards">
       <div class="column is-6">
-        <div class="box">
+        <div class="box" data-order="1">
           <div class="sp-box-head"><span class="sp-no">01</span><h2>postmark</h2><div class="sp-end">Worst status of the page's checks</div></div>
           <div class="sp-box-body">
             <div class="buttons">
@@ -39,7 +39,7 @@
           </div>
         </div>
 
-        <div class="box">
+        <div class="box" data-order="3">
           <div class="sp-box-head"><span class="sp-no">03</span><h2>status_tag</h2><div class="sp-end">One mapping, one function</div></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Status</th><th>Tag</th><th>Bulma classes</th></tr></thead>
@@ -56,7 +56,7 @@
       </div>
 
       <div class="column is-6">
-        <div class="box">
+        <div class="box" data-order="2">
           <div class="sp-box-head"><span class="sp-no">02</span><h2>box · box_head</h2><div class="sp-end">The end slot: a note, a tag, a link or a filter form</div><a class="sp-help" href="help.html#checks" title="Optional: the section's Help topic"><i class="ti ti-help-circle"></i></a></div>
           <div class="sp-box-body"><p class="mb-2">The <i class="ti ti-help-circle"></i> after the end slot is <code>sp-help</code>: an optional link to the section's topic on the Help page. It replaces today's help drawer.</p><p>box_body — padded content. A <code>table</code> or a run of <code>sp-record</code> blocks sits directly in the box, without box_body.</p></div>
           <div class="sp-box-foot"><span>box_foot — a legend, paging</span><span class="sp-end">end slot</span></div>
diff --git a/docs/assets/panel-redesign/panel/src/health.html b/docs/assets/panel-redesign/panel/src/health.html
index c646be1..c23bc0d 100644
--- a/docs/assets/panel-redesign/panel/src/health.html
+++ b/docs/assets/panel-redesign/panel/src/health.html
@@ -10,7 +10,7 @@
 
     <div class="columns sp-cards">
       <div class="column is-6">
-        <div class="box" id="processes">
+        <div class="box" id="processes" data-order="1">
           <div class="sp-box-head"><span class="sp-no">01</span><h2>Processes</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Program</th><th>State</th><th>Detail</th></tr></thead>
@@ -23,7 +23,7 @@
             </tbody>
           </table></div>
         </div>
-        <div class="box" id="sender-check">
+        <div class="box" id="sender-check" data-order="3">
           <div class="sp-box-head"><span class="sp-no">03</span><h2>Sender check</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div><a class="sp-help" href="help.html#sender-check" title="What is checked and what these numbers are for"><i class="ti ti-help-circle"></i></a></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Period</th><th>Panel not answering</th><th>Connections turned away</th><th>Messages deferred</th></tr></thead>
@@ -37,7 +37,7 @@
             <p class="sp-muted">The panel holds each message's <code>From:</code> against the application that sends it. While the panel does not answer, Postfix answers the sending application with a temporary error instead of accepting mail unchecked, and the application tries again later. Time is counted only while Postfix itself was running; ≈ marks a period with a start at which that could not be asked, and its time is at most what is shown. Counted since <span class="sp-mono">2026-10-13</span>.</p>
           </div>
         </div>
-        <div class="box" id="hostname">
+        <div class="box" id="hostname" data-order="5">
           <div class="sp-box-head"><span class="sp-no">05</span><h2>Hostname and reverse DNS</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div><a class="sp-help" href="help.html#rdns" title="Forward and reverse DNS"><i class="ti ti-help-circle"></i></a></div>
           <div class="sp-box-body">
             <dl class="sp-facts">
@@ -46,7 +46,7 @@
             </dl>
           </div>
         </div>
-        <div class="box" id="machine">
+        <div class="box" id="machine" data-order="7">
           <div class="sp-box-head"><span class="sp-no">07</span><h2>Machine</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div><a class="sp-help" href="help.html#checks" title="What these readings mean"><i class="ti ti-help-circle"></i></a></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Resource</th><th>Usage</th><th>Detail</th></tr></thead>
@@ -59,7 +59,7 @@
         </div>
       </div>
       <div class="column is-6">
-        <div class="box" id="sockets">
+        <div class="box" id="sockets" data-order="2">
           <div class="sp-box-head"><span class="sp-no">02</span><h2>Milter sockets</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Milter</th><th>State</th></tr></thead>
@@ -71,7 +71,7 @@
             </tbody>
           </table></div>
         </div>
-        <div class="box" id="certificate">
+        <div class="box" id="certificate" data-order="4">
           <div class="sp-box-head"><span class="sp-no">04</span><h2>TLS certificate</h2><div class="sp-end"><span class="tag is-success is-light">ok</span></div><a class="sp-help" href="help.html#certificate" title="When it warns and what to do"><i class="ti ti-help-circle"></i></a></div>
           <div class="sp-box-body">
             <dl class="sp-facts">
@@ -83,7 +83,7 @@
             <p class="mt-4 sp-muted">Postfix still serves the certificate above. A renewed one is waiting in the mounted file; Postfix takes it up at its next check for a renewal, at most a day after it was mounted.</p>
           </div>
         </div>
-        <div class="box" id="notification-mail">
+        <div class="box" id="notification-mail" data-order="6">
           <div class="sp-box-head"><span class="sp-no">06</span><h2>Notification mail</h2><div class="sp-end"><span class="tag is-warning is-light">warn</span></div><a class="sp-help" href="help.html#notifications" title="What the panel sends and what makes it arrive"><i class="ti ti-help-circle"></i></a></div>
           <div class="table-container"><table class="table is-fullwidth">
             <thead><tr><th>Record</th><th>State</th></tr></thead>
@@ -96,7 +96,7 @@
             <p class="sp-muted">Sent from <span class="sp-mono">postmaster@mail.example.org</span>. What to publish is under <a href="settings.html#notification-mail">Settings</a>.</p>
           </div>
         </div>
-        <div class="box" id="configuration">
+        <div class="box" id="configuration" data-order="8">
           <div class="sp-box-head"><span class="sp-no">08</span><h2>Configuration</h2><div class="sp-end">Safe to run at any time</div></div>
           <div class="sp-box-body">
             <p class="mb-3">Regenerates the OpenDKIM and Postfix configuration from the database and reloads both daemons. Use it after editing the files by hand, after restoring a backup, or when the running configuration looks out of step with the domain and application lists. It does not touch the queue or the TLS certificate.</p>
diff --git a/docs/assets/panel-redesign/panel/theme.css b/docs/assets/panel-redesign/panel/theme.css
index 0848097..b2bbbae 100644
--- a/docs/assets/panel-redesign/panel/theme.css
+++ b/docs/assets/panel-redesign/panel/theme.css
@@ -272,20 +272,25 @@ code { background: var(--sp-well); color: var(--sp-ink); border-radius: 3px; pad
   .sp-cards { display: flex; flex-direction: column; padding-inline: .75rem; }
   .sp-cards > .column { display: contents; }
   .sp-cards .box { margin-bottom: 1.5rem; }
-  .sp-cards > .column:first-child > .box:nth-child(1) { order: 1; }
-  .sp-cards > .column:first-child > .box:nth-child(2) { order: 3; }
-  .sp-cards > .column:first-child > .box:nth-child(3) { order: 5; }
-  .sp-cards > .column:first-child > .box:nth-child(4) { order: 7; }
-  .sp-cards > .column:last-child > .box:nth-child(1) { order: 2; }
-  .sp-cards > .column:last-child > .box:nth-child(2) { order: 4; }
-  .sp-cards > .column:last-child > .box:nth-child(3) { order: 6; }
-  .sp-cards > .column:last-child > .box:nth-child(4) { order: 8; }
+  .sp-cards [data-order="1"] { order: 1; }
+  .sp-cards [data-order="2"] { order: 2; }
+  .sp-cards [data-order="3"] { order: 3; }
+  .sp-cards [data-order="4"] { order: 4; }
+  .sp-cards [data-order="5"] { order: 5; }
+  .sp-cards [data-order="6"] { order: 6; }
+  .sp-cards [data-order="7"] { order: 7; }
+  .sp-cards [data-order="8"] { order: 8; }
+  .sp-cards [data-order="9"] { order: 9; }
+  .sp-cards [data-order="10"] { order: 10; }
+  .sp-cards [data-order="11"] { order: 11; }
+  .sp-cards [data-order="12"] { order: 12; }
 }
 
 /* cards: two stacks of boxes that are read in rows - the odd ones on the left,
    the even ones on the right, each stack closed up so a short box leaves no
    gap beside a tall one. On a phone the stacks dissolve and the boxes come in
-   the order of their numbers (the rules above). */
+   the order of their numbers: each box carries data-order, its own number (the
+   rules above, up to twelve), wherever it stands in its stack. */
 
 /* sheet: what does not fit a table row, opened over the page from the row's
    tag. It is the browser's own popover (the tag is a button with