design: overview-head - the mockup's sentence, made from the cards

The owner's "1" (2026-10-17), shown both: Overview's head says what the
mockup says - "Mail is flowing. One thing needs attention." - and is made
from the cards as the panel's is. Its lead is what the panel can write: each
card that is not fine, linked, with its value ("TLS certificate: expires in
12 days."), instead of a sentence the cards do not hold ("has not renewed
yet").

The states the panel writes from it: all fine, "Mail is flowing. Nothing
needs attention."; a warning, "Mail is flowing. One thing needs attention."
(or "N things need"); a failure, "Mail may not be flowing. One thing needs
attention." - a failed card is Postfix, a socket, a queue that cannot be
read, which can stop mail.

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

docs/assets/panel-redesign/panel/overview.html

@@ -70,7 +70,7 @@
       <div class="sp-grow">
         <p class="sp-kicker">mail.example.org</p>
         <h1 class="title is-3">Mail is flowing. One thing needs attention.</h1>
-        <p class="sp-lead">The TLS certificate expires in 12 days and has not renewed yet.</p>
+        <p class="sp-lead"><a href="health.html">TLS certificate</a>: expires in 12 days.</p>
       </div>
       <div class="sp-muted sp-small">Updated 14:02:31<br>refreshes on its own</div>
     </div>

docs/assets/panel-redesign/panel/src/overview.html

@@ -4,7 +4,7 @@
       <div class="sp-grow">
         <p class="sp-kicker">mail.example.org</p>
         <h1 class="title is-3">Mail is flowing. One thing needs attention.</h1>
-        <p class="sp-lead">The TLS certificate expires in 12 days and has not renewed yet.</p>
+        <p class="sp-lead"><a href="health.html">TLS certificate</a>: expires in 12 days.</p>
       </div>
       <div class="sp-muted sp-small">Updated 14:02:31<br>refreshes on its own</div>
     </div>