Redesign Media Centre as a teletext broadcast information service

Replaces the neutral dark card-based theme with "Page 100": teletext's
locked eight colours at full saturation on pure black, numbered pages
reachable by typing the number (or the r/g/y/c fastext keys), and no
borders, boxes, or radius anywhere — grouping is carried by full-bleed
colour fields and row weight instead.

Chosen via the impeccable skill's replacement-world flow: seven visual
candidates derived from the audience's own world, a mandatory roll
assigned Ceefax/US-cable-guide teletext, six catalog challengers weighed
against it, and the user locked the assigned direction on the decision
page (seed aab4510e).

- New templates for all nine pages (home/watch/library/discover/
  requests/system/activity/login/settings) behind a shared _shell.html
  carrying the direction contract and _macros.html for the row/bar/tile
  vocabulary; deletes the old single-page dashboard.html and its
  dedicated stylesheets/script.
- static/css/base.css + teletext.css: the locked palette, a two-height
  type scale (Chivo Mono / DotGothic16), and the five disciplines the
  system is held to (no in-between tone, no enclosure, one shared bar
  ruler, trend only where real history exists, pages weighted by state).
- static/js/service.js: header clock, page-number jump, fastext keys,
  two-tap arm/confirm add, guarded live polling — replaces dashboard.js.
- app.py: nav_items now carry page numbers; fastext defaults added to
  the page-chrome context processor; version bumped to 2.0.0.
- DESIGN.md + .impeccable/design.json regenerated from the built world
  by the documenter pass; PRODUCT.md and CLAUDE.md updated to describe
  the new system in place of the retired one.
- Fixed a live bug found along the way: settings.html called
  url_for('dashboard'), an endpoint removed earlier in the branch, which
  would have 500'd the Settings page.
- Fixed a One-Ruler violation the finish review's recapture request
  surfaced: --bar-cells disagreed with the bar() macro's hardcoded cell
  count below the 760px breakpoint, so a fill could land mid-cell on a
  phone. Removed the mobile override; the ruler is now 20 cells at every
  width, matching the macro unconditionally.

Passed two inspection rounds (desktop + true-390px mobile, via an
iframe harness since macOS Chrome clamps --window-size) and a finish
review; QA screenshots and interview logs are gitignored as scratch,
not shipped in the repo.

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

templates/_shell.html

@@ -0,0 +1,69 @@
+{%- set here = (nav_items | selectattr('0', 'equalto', page) | list | first) or ('home', '100', 'Index', '/') -%}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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">
+  <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 %}
+</head>
+<body data-timezone="{{ timezone }}" data-url-base="{{ request.script_root }}"
+      data-pages='{{ nav_items | tojson }}'>
+<!--
+THESIS: Media Centre is a broadcast information service, not a dashboard. It
+refuses the bordered-card grid every self-hosted dashboard ships, this one
+included until now.
+OWN-WORLD: Teletext's locked eight colours at full saturation on pure black,
+phosphor bloom on double-height rows only, one blocky monospace at exactly two
+heights, a character-cell grid, and grouping carried by colour fields and row
+weight — never a border, never a box, never a radius.
+STORY: The visitor types or clicks a page number, reads the machine's state off
+colour alone, and leaves knowing whether anything needs them.
+FIRST VIEWPORT: P100. Double-height yellow masthead left, live clock right;
+seven numbered service rows each carrying a live figure in its status colour, so
+the index is the status page; NOW SHOWING fills the lower two-thirds in
+double-height cyan with progress as whole mosaic cells; fastext colour keys last.
+FORM: Ceefax teletext fused with the US cable guide channel; candidate 3 of 7;
+seed aab4510e.
+FINISH: unreviewed and undocumented is unfinished; this build ends with the
+finish review, the verdict, DESIGN.md, and every shipping raster carrying its
+provenance.
+-->
+
+  <header class="tt-head">
+    <span class="tt-head-num">P{{ here[1] }}</span>
+    <span class="tt-head-name">{{ here[2] }}</span>
+    <span class="tt-entry" id="page-entry" hidden aria-live="polite"></span>
+    <span class="tt-head-clock" id="head-clock"></span>
+  </header>
+
+  <main class="tt-page">
+    {% block content %}{% endblock %}
+  </main>
+
+  {#- Fastext: the four coloured keys. Each page names its own four, so the
+      keys always point somewhere useful from where you are. -#}
+  <nav class="fastext" aria-label="Fastext">
+    {% for cls, key, num, label, href in fastext %}
+    <a class="{{ cls }}" href="{{ request.script_root }}{{ href }}" data-key="{{ key }}">
+      <span>{{ num }} {{ label }}</span>
+    </a>
+    {% endfor %}
+  </nav>
+
+  <footer class="tt-foot">
+    <span>MEDIA CENTRE</span>
+    <span class="v">v{{ app_version }} &middot; {{ app_version_date }}</span>
+  </footer>
+
+  <script src="{{ url_for('static', filename='js/service.js') }}"></script>
+  {% block js %}{% endblock %}
+</body>
+</html>