Fix the finish review's 8 material findings on the teletext redesign

Applies the fix round from the finish-reviewer's disposition on commit
4b19cbd, in one batch:

- System's disk table is unreadable below 560px: horizontal-scrolling a
  6-column table hid the usage bar and the temperature, the two
  readings that matter most (discipline 3 — one shared ruler — was
  unauditable as a result). Added a disk_row() macro and a phone-only
  .tt-disk-rows reflow (name + full 20-cell bar + temp on one line,
  device/free/total beneath), CSS-toggled against the existing table
  at the same breakpoint.
- Contrast failure on the highest-severity state: white text on the
  red .tt-field.crit/.tt-toast.error/.tt-btn.armed reversals measured
  4.0:1, under the 4.5:1 floor. Switched to black text (5.25:1),
  matching the black-on-yellow .warn pattern already in use — and
  fixed a second instance of the same bug: .tt-field.crit had no
  .tt-field-meta override, unlike .warn.
- Two type families where the direction contract names one blocky
  monospace: unified on a single self-hosted face (Space Mono, one
  weight, no bold) for both body and the double-height row.
- FIRST VIEWPORT proportion: an unpromised 6-item Just Added grid was
  competing with NOW SHOWING for the fold instead of the contract's
  "lower two-thirds in double-height cyan." Cut to a fixed 3-item,
  fixed-3-column row, which also fixes the orphaned-tile grid defect
  as a side effect (a fixed count can't leave a lone tile beside empty
  tracks).
- Three flat mid-grey fills contradicted discipline 1 (no in-between
  tone): .tt-tile-art, .tt-btn:disabled, and .tt-err pre all painted a
  solid --ink-dimmer background. Centralized the dither .tt-tile-art
  already used correctly into a shared --dither-mid generator and
  applied it to all three.
- Google Fonts dependency on a LAN-only home server: a dropped webfont
  request was a silent identity change, not a graceful fallback.
  Self-hosted Space Mono under static/fonts/ via @font-face; dropped
  the <link> tags from _shell.html and login.html.
- Deliberately deferred: "pages differ in stock" (discipline 5) still
  fires on only one band service-wide. Every other finding was a
  bounded fix to existing code; this one asks for a new mechanism (an
  aggregate status band on P100) rather than a correction, so it's
  flagged for a follow-up rather than rushed into this batch.

Recaptured desktop.png, mobile.png, desktop-system.png and
mobile-system.png (the four files the reviewer's findings cited)
through the same true-390px iframe method as the prior round, and
returned them for the fix round's verdict pass.

Known follow-up: DESIGN.md's typography section (written by the
documenter before this batch) still names the old two-family pairing
and needs a re-run now that the font system changed under it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NBw1QodG8ZMYHrGeQfqyDS

templates/_macros.html

@@ -95,6 +95,26 @@
 {% endmacro %}
 
 
+{#- A disk/cache row for the phone reflow of the System table (below
+    560px, where a six-column table stops fitting and its horizontal
+    scroll would hide the bar and the temperature — the two readings
+    that matter most). Name, the one shared bar, and the temperature
+    sit on one line; device/size/free sit beneath as a sub-line. The
+    desktop <table> stays the table at wider widths; this is not a
+    replacement for it, only the reflow. -#}
+{% macro disk_row(dk) %}
+  <div class="tt-disk-row">
+    <div class="tt-disk-row-top">
+      <span class="tt-disk-name">{{ dk.name }}</span>
+      {{ bar(dk.used_pct | default(0)) }}
+      <span class="tt-disk-pct">{{ dk.used_pct | default(0) | round | int }}%</span>
+      {{ disk_state(dk) }}
+    </div>
+    <div class="tt-disk-row-sub">{{ dk.device | default('—') }} &middot; {{ dk.free | default('—') }} free of {{ dk.total | default('—') }}</div>
+  </div>
+{% endmacro %}
+
+
 {#- A list row: number, name, body, value. The index rows and every
     listing in the service share this one shape. -#}
 {% macro row(name, title, sub='', value='', tone='') %}

templates/_shell.html

@@ -7,9 +7,10 @@
   <title>{% block title %}P{{ here[1] }} Media Centre{% endblock %}</title>
   <meta name="theme-color" content="#000000">
   <link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@400;600&family=DotGothic16&display=swap" rel="stylesheet">
+  {#- Space Mono is self-hosted (see base.css's @font-face) — this app
+      runs on a LAN-only home server where a Google Fonts request can
+      simply fail, and a dropped webfont request is a silent identity
+      change, not a graceful fallback. -#}
   <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/teletext.css') }}">
   {% block css %}{% endblock %}

templates/home.html

@@ -135,7 +135,7 @@
   {#- ── Just added ────────────────────────────────────────────────  -#}
   {% if recently_added %}
     <div class="tt-field"><span>Just Added</span></div>
-    <div class="tt-tiles">
+    <div class="tt-tiles tt-tiles-row">
       {% for it in recently_added %}
         {{ tile(it.title, it.sub, it.poster, it.ago) }}
       {% endfor %}

templates/login.html

@@ -6,9 +6,7 @@
   <title>Media Centre</title>
   <meta name="theme-color" content="#000000">
   <link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@400;600&family=DotGothic16&display=swap" rel="stylesheet">
+  {#- Space Mono is self-hosted — see base.css's @font-face. -#}
   <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/teletext.css') }}">
 </head>

templates/system.html

@@ -1,5 +1,5 @@
 {% extends "_shell.html" %}
-{% from "_macros.html" import service_error, bar, disk_state, trend %}
+{% from "_macros.html" import service_error, bar, disk_state, disk_row, trend %}
 {% block title %}P105 System{% endblock %}
 
 {% block content %}
@@ -58,6 +58,10 @@
     </div>
 
     {% if unraid.disks %}
+      {#- Desktop: a real table — columns line up, a new metric is a new
+          column. Hidden below 560px, where six columns stop fitting and
+          a horizontal scroll would hide the bar and the temperature,
+          the two readings that matter most on this page. -#}
       <div class="tt-table-scroll">
         <table class="tt-table">
           <thead>
@@ -94,6 +98,14 @@
           </tbody>
         </table>
       </div>
+
+      {#- Phone (≤560px): the .tt-row-derived reflow — name, the shared
+          20-cell bar and the temperature on one line, device/size/free
+          beneath. Hidden above 560px in favour of the table. -#}
+      <div class="tt-disk-rows">
+        {% for dk in unraid.disks %}{{ disk_row(dk) }}{% endfor %}
+        {% for ck in unraid.caches | default([]) %}{{ disk_row(ck) }}{% endfor %}
+      </div>
     {% endif %}
   {% endif %}