Merge branch 'ui-rating': rating widget, issue section headers, ratings verdict column

docs/plans/briefs/ui-pass/handoff-rating.md

@@ -0,0 +1,167 @@
+# Task 2 handoff — rating widget, issue section headers, ratings-table verdict column
+
+Branch `ui-rating` in `/home/thallada/workspace/the-daily-epub-ui2`, dev port 3602.
+A previous agent (Codex) landed a partial pass as `0cdc302` before hitting a quota
+limit and never saw the rendered result; `main` was merged in afterwards
+(`bcbe158`). This pass kept the parts of that work that held up on screen, fixed
+the parts that did not, and finished the remaining items.
+
+## What changed
+
+### `src/web/tailwind.css`
+
+- **`.reader-section-heading`** — replaced Codex's sentence-case `text-xl` serif
+  heading with a serif **uppercase, letter-spaced section mark** on a double rule:
+  `border-t-[3px] border-double border-rule-strong pt-3 font-serif text-[1.05rem]
+  font-semibold uppercase leading-[1.2] tracking-[0.15em]`. `text-wrap: balance`
+  stays. (Rationale under *Design decisions*.)
+- **Rating buttons** — inactive labels are now `text-ink-2` (were `text-ink`) and
+  go to `text-ink` on hover, so the group recedes next to serif body copy.
+- **Rating button hit area** — the `::after` overlay went from `-inset-y-1` /
+  `-inset-y-1.5` (phone) to `-inset-y-1.5` / `-inset-y-2`. The pseudo is
+  positioned against the *padding* box, so the old values gave 37 px desktop /
+  41 px phone; the new values measure 41 px and 45 px (verified with
+  `elementFromPoint`), clearing the ≥ 40 px / ≥ 44 px rules in the shared brief.
+- **Rating focus ring** — `.rating button[data-label]:focus-visible { z-20
+  ring-offset-0 }`. In a segmented group the inherited `ring-offset-2` painted a
+  detached red box over the neighbouring buttons; hugging the segment reads as
+  one control.
+- **`.rating-note input`** — now a quiet bottom-hairline field everywhere
+  (`rounded-none border-x-0 border-t-0 border-b border-rule bg-transparent px-0
+  py-1 shadow-none focus:border-ink`) instead of a boxed input on reader/dashboard
+  pages and a *transparent* bottom border in tables.
+- **Table/list overrides** — `td .rating` / `.picks .rating` lost the
+  `max-w-[15rem]` cap (the cell now sets its own width) and gained `gap-y-1`;
+  table buttons use `px-1.5` so the group fits; `.picks .rating` gets `mt-2` so
+  the widget is not welded to the pick title.
+- **New `.rating-cell` block** — the ratings-table verdict cell is a one-column
+  grid, `w-[15rem]`, `gap-y-1.5`: row 1 is the segmented group with `clear`
+  pushed to the right edge (`ml-auto`), row 2 is the note field spanning the same
+  width. `min-h-0` on `.rating-actions` inside the cell top-aligns the group with
+  the row's article title (measured: 1 px apart).
+
+### `src/web/dashboard/ratings.rs`
+
+- Removed the now-dead `CurrentRow::verdict` field and its assignment (Codex
+  dropped `{{ row.verdict }}` from the template but left the field, which fails
+  `clippy -D warnings`). `badge` stays — it is still read by the "no embedding" /
+  "—" branch in the template.
+
+### `src/web/templates/world.html`, `src/web/templates/behind.html`
+
+- Added `reader-page` to the `<article>` so the polish item's
+  `text-wrap: balance` on reader headlines covers the World Briefing and Behind
+  the paper chapters too. (Deviation — see below.)
+
+### Kept from Codex's partial commit (verified on screen, unchanged)
+
+`_rating_widget.html` (`.rating-actions` wrapper, `clear`/`cleared` label spans,
+`placeholder="Add a note…"`), `article.html` / `issue_full.html` /
+`issue_public.html` (`reader-page`, `reader-section-heading`, `index-summary`,
+`mt-14` section spacing, colophon and The Brief on the same heading system),
+`dashboard/ratings.html` (badge dropped from the verdict cell, `rating-cell`
+class), the per-verdict tints, `.prose-body img` outline, `.prose-body p` /
+`.index-summary` `text-wrap: pretty`, and `active:scale-[0.96]` with named
+transition properties on `.btn` / `.btn-primary` / `.btn-danger`.
+
+### `src/web/static/app.css`
+
+Rebuilt from `tailwind.css` (Tailwind 4.3.3).
+
+## Design decisions
+
+- **Section headers: uppercase mark, not a bigger headline.** The brief asked for
+  both options to be screenshotted. A sentence-case serif `text-2xl` header
+  (`after-rating/sec/C.png`) is the same size as the article headlines directly
+  beneath it and reads as another story, which is the exact failure being fixed.
+  The uppercase, letter-spaced serif mark on a double rule
+  (`after-rating/sec/B.png`, `B2-*.png`) is unmistakably a section marker at a
+  glance and never competes with a headline — the newspaper convention the rest
+  of the design language is borrowing. It is also visibly *not* the old 0.72 rem
+  sans eyebrow: serif, ink-coloured, ~50 % larger, and sitting on the same double
+  rule as the masthead. No extra eyebrow was added; the header is already
+  uppercase, so a second uppercase line above it would be noise.
+- **`clear` stays `invisible`, not `[hidden]`.** It keeps its layout box, so
+  choosing a verdict does not shift the group sideways. `.rating:has(button
+  .active) button.clear` reveals it; the cleared state swaps the label to a muted
+  "cleared" with no underline, which doubles as the brief's "muted cleared state
+  in the group" for the ratings table.
+- **Verdict cell is `w-[15rem]`, not `w-[13rem]`.** 13 rem is 208 px; the three
+  labels plus `clear` measure ~219 px at `text-xs`/`px-1.5`, and the wider
+  "cleared" label needs ~237 px. 15 rem (240 px) fits both states with the
+  `clear`/`cleared` link flush right in each, so rows stay aligned whichever state
+  they are in. Shrinking the type to ~0.7 rem would have hit 13 rem but is too
+  small for a dense table that is otherwise 14 px.
+- **Note field shows a faint rule at rest.** The brief said "bottom-hairline only,
+  no box" *and* "only shows a border on focus"; Codex read that as a transparent
+  border, which left "Add a note…" floating with no affordance and no shared
+  baseline across rows. A `--rule` hairline that goes to `--ink` on focus keeps
+  the cell calm, gives the unit a base line, and still reads as quiet.
+- **`.prose-body h2`/`h3` left alone.** Checked against 1.0625 rem body copy
+  (`prose-heading-light.png`): `text-2xl` semibold over a hairline is already a
+  clear heading. The brief said to adjust only if weak.
+
+## Deviations
+
+- `world.html` and `behind.html` are not in this task's file list, but the polish
+  item asks for `text-wrap: balance` on reader-page headlines and those two are
+  reader pages. The change is one class per file and touches nothing else.
+- Verdict cell width 15 rem rather than the brief's example 13 rem (reason above).
+- Section header is `text-[1.05rem]` uppercase rather than `text-2xl`/`text-xl`
+  sentence case (reason above).
+
+## Verification
+
+Dev server on `127.0.0.1:3602` against this worktree's own copy of the dev DB
+(`dev/config.toml` was repointed from the main checkout's `dev/` to
+`the-daily-epub-ui2/dev/` so rating clicks could not touch the shared database;
+`dev/` is git-ignored).
+
+- `cargo fmt -- --check` — clean.
+- `cargo clippy --all-targets -- -D warnings` — clean.
+- `cargo test --lib web::` — 84 passed, 0 failed.
+- `cargo test` — 445 lib tests + all integration tests passed, 0 failed. (One
+  earlier run had a single flaky failure in
+  `config::tests::registry_validation_rejects_bad_roles_kinds_and_efforts`; it
+  passes in isolation and on re-run, and is unrelated to this change — the host
+  was building for three agents at once.)
+- `npm run css:check` — no diff (Tailwind 4.3.3 from the adjacent checkout's
+  `node_modules/.bin` via `PATH`; only read, never modified).
+- **Live JS handler** (`interact.mjs`): clicked loved → good → not-for-me → clear
+  → loved on `/issues/2026-09-02/articles/4`. `.active` and `aria-pressed` follow
+  every click, the tint switches, **0 page navigations**, console clean (no errors
+  or warnings). Also typed into the note field and confirmed it round-trips into
+  the ratings table's Note column.
+- **Hit areas** measured with `elementFromPoint`: 41 px desktop, 45 px phone.
+- **Top alignment** measured: verdict group top is 1 px from the article title top.
+
+### Screenshots
+
+Under `/tmp/claude-1000/-home-thallada-workspace-the-daily-epub/553c7d77-d8f4-44f8-a379-73cedea23814/scratchpad/after-rating/`:
+
+- `sec/B.png`, `sec/C.png`, `sec/B2-brief.png`, `sec/B2-colophon.png` — the
+  section-header variant comparison behind the decision above.
+- `wip/*` — Codex's partial state before this pass (the overflowing verdict cell
+  is `wip/ratings-cell-light.png`).
+- `final/` — the shipped result:
+  - `/` index card + section: `index-card-light`, `index-card-mobile`,
+    `index-card-mobile-dark`, `index-section-light`, `index-section-dark`,
+    `index-section-mobile`
+  - front-page heading system: `brief-light`, `brief-dark`, `colophon-light`,
+    `colophon-dark`
+  - anonymous issue page: `public-issue-light`, `public-issue-dark`
+  - chapter footer: `article-footer-light`, `article-footer-mobile`
+  - ratings table: `ratings-light`, `ratings-dark`, `ratings-mobile`,
+    `ratings-mobile-dark`, `ratings-cleared-light`, `ratings-cleared-dark`
+  - dashboard article widget: `dash-article-light`, `dash-article-dark`,
+    `dash-article-mobile`
+  - states: `rating-focus`, `rating-hover`, `overview-picks`
+  - polish checks: `prose-heading-light`, `prose-img-light`, `prose-img-dark`
+
+## Left open
+
+- Nothing from this brief. The dev server is left running on 3602 against
+  `the-daily-epub-ui2/dev/daily-epub.db`, which now holds 5 current verdicts
+  (loved / good / not-for-me / good / loved, one with a note) plus the extra
+  rating events those clicks appended — `rating_events` is append-only, so the
+  history is longer than the seeded baseline.

src/web/dashboard/ratings.rs

@@ -344,7 +344,6 @@ struct CurrentRow {
     feed_title: String,
     issue_date: String,
     badge: String,
-    verdict: String,
     widget: RatingWidget,
     when: String,
     source: String,
@@ -678,7 +677,7 @@ async fn build_current_rows(
                 .or_insert_with(|| feed_title_for(article.as_ref(), *feed_id));
         }
 
-        let (badge, verdict) = widget_label(&rating.label);
+        let (badge, _) = widget_label(&rating.label);
         if filters.label.as_deref().is_some_and(|label| label != badge) {
             continue;
         }
@@ -715,7 +714,6 @@ async fn build_current_rows(
             feed_title: rating.feed_title.clone(),
             issue_date: issue_date.clone(),
             badge: badge.to_string(),
-            verdict: verdict.to_string(),
             widget: RatingWidget {
                 article_id: rating.article_id,
                 issue_date,

src/web/tailwind.css

@@ -118,11 +118,12 @@
 
 @layer components {
   /* ---------- shared controls ---------- */
-  .btn, .button { @apply inline-flex min-h-10 items-center justify-center rounded-sm border border-rule-strong bg-transparent px-3 py-1.5 font-sans text-sm font-medium text-ink no-underline transition-colors duration-150 hover:bg-ink hover:text-paper focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-paper; }
-  .btn-primary { @apply inline-flex min-h-10 items-center justify-center rounded-sm border border-ink bg-ink px-3 py-1.5 font-sans text-sm font-medium text-paper no-underline transition-colors duration-150 hover:border-accent hover:bg-accent hover:text-paper focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-paper; }
+  .btn, .button { @apply inline-flex min-h-10 items-center justify-center rounded-sm border border-rule-strong bg-transparent px-3 py-1.5 font-sans text-sm font-medium text-ink no-underline duration-150 hover:bg-ink hover:text-paper focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-paper; transition-property:transform, background-color, color, border-color; }
+  .btn-primary { @apply inline-flex min-h-10 items-center justify-center rounded-sm border border-ink bg-ink px-3 py-1.5 font-sans text-sm font-medium text-paper no-underline duration-150 hover:border-accent hover:bg-accent hover:text-paper focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-paper; transition-property:transform, background-color, color, border-color; }
   .btn-quiet { @apply inline-flex min-h-9 items-center gap-1 rounded-sm border-0 bg-transparent px-2 py-1 font-sans text-sm text-muted underline decoration-rule underline-offset-4 hover:text-ink hover:decoration-accent; }
   .btn:disabled, .btn-primary:disabled, .btn-danger:disabled { @apply cursor-not-allowed border-rule bg-paper-2 text-muted hover:bg-paper-2 hover:text-muted; }
-  .btn-danger, button.danger { @apply inline-flex min-h-9 items-center justify-center rounded-sm border border-down bg-transparent px-2.5 py-1 font-sans text-sm font-medium text-down transition-colors duration-150 hover:bg-down hover:text-paper; }
+  .btn-danger, button.danger { @apply inline-flex min-h-9 items-center justify-center rounded-sm border border-down bg-transparent px-2.5 py-1 font-sans text-sm font-medium text-down duration-150 hover:bg-down hover:text-paper; transition-property:transform, background-color, color, border-color; }
+  .btn:active, .button:active, .btn-primary:active, .btn-danger:active, button.danger:active { transform:scale(0.96); }
 
   .badge { @apply inline-flex items-center whitespace-nowrap rounded-full px-2 py-0.5 font-sans text-xs font-medium leading-5 tabular-nums; color:var(--ink-2); background:color-mix(in oklab, var(--ink) 8%, transparent); }
   .badge.selected, .badge.loved, .badge.ok { color:var(--loved); background:color-mix(in oklab, var(--loved) 14%, transparent); }
@@ -140,10 +141,13 @@
 
   .prose-body { @apply text-[1.0625rem] leading-[1.72] text-ink; }
   .prose-body > * + * { @apply mt-5; }
-  .prose-body h2 { @apply mt-10 border-t border-rule pt-4 text-2xl font-semibold leading-[1.15] tracking-[-0.01em]; }
-  .prose-body h3 { @apply mt-8 text-xl font-semibold leading-tight; }
+  .prose-body p, .index-summary { text-wrap:pretty; }
+  .prose-body h2 { @apply mt-10 border-t border-rule pt-4 text-2xl font-semibold leading-[1.1] tracking-[-0.01em]; }
+  .prose-body h3 { @apply mt-8 text-xl font-semibold leading-[1.15] tracking-[-0.01em]; }
   .prose-body a { @apply text-ink underline decoration-rule underline-offset-4 hover:text-ink hover:decoration-accent; }
-  .prose-body img { @apply mx-auto my-7 block h-auto max-w-full rounded-sm text-center font-sans text-xs italic text-muted; }
+  .prose-body img { @apply mx-auto my-7 block h-auto max-w-full rounded-sm text-center font-sans text-xs italic text-muted; outline:1px solid oklch(0 0 0 / 0.1); outline-offset:-1px; }
+  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose-body img { outline-color:oklch(1 0 0 / 0.1); } }
+  :root[data-theme="dark"] .prose-body img { outline-color:oklch(1 0 0 / 0.1); }
   .prose-body pre { @apply max-w-full overflow-x-auto rounded-sm bg-paper-2 p-4 text-sm leading-relaxed; }
   .prose-body :not(pre) > code { @apply rounded-sm bg-paper-2 px-1 py-0.5 text-[0.9em]; }
   .prose-body blockquote { @apply my-7 border-l-2 border-rule-strong pl-5 text-ink-2; }
@@ -152,14 +156,28 @@
   .prose-body li::marker { color:var(--muted); }
   .prose-body li + li { @apply mt-2; }
 
-  .rating { @apply my-5 flex flex-wrap items-center font-sans text-sm; }
-  .rating-prompt { @apply mr-3 text-[0.72rem] uppercase tracking-[0.1em] text-muted; }
-  .rating button[data-label]:not(.clear) { @apply -ml-px min-h-10 rounded-none border-rule bg-transparent px-3 py-1.5 text-ink first:ml-0 first:rounded-l-sm last:rounded-r-sm hover:z-10 hover:border-ink hover:bg-paper-2; }
-  .rating button[data-label]:not(.clear).active { @apply z-10 border-ink bg-ink text-paper; }
-  .rating button.clear { @apply ml-2 min-h-10 border-0 bg-transparent px-2 text-muted underline decoration-rule underline-offset-4 hover:text-ink; }
-  .rating button.clear.active { @apply font-semibold text-ink; }
-  .rating-note { @apply mt-2 flex w-full max-w-md basis-full items-center gap-2 text-muted; }
-  .rating-note input { @apply flex-1; }
+  .reader-page :where(h1, h2, h3, h4), .reader-section-heading { text-wrap:balance; }
+  .reader-section-heading { @apply border-t-[3px] border-double border-rule-strong pt-3 font-serif text-[1.05rem] font-semibold uppercase leading-[1.2] tracking-[0.15em] text-ink; }
+
+  .rating { @apply my-5 flex flex-wrap items-center gap-x-3 font-sans text-xs; }
+  .rating-prompt { @apply font-serif text-[0.8rem] italic text-muted; }
+  .rating-actions { @apply flex min-h-10 items-center whitespace-nowrap; }
+  .rating button[data-label] { @apply relative h-8 text-xs duration-150; transition-property:transform, background-color, color, border-color; }
+  .rating button[data-label]::after { content:""; @apply absolute -inset-y-1.5 inset-x-0; }
+  .rating button[data-label]:active { transform:scale(0.96); }
+  .rating button[data-label]:focus-visible { @apply z-20 ring-offset-0; }
+  .rating button[data-label]:not(.clear) { @apply -ml-px rounded-none border-rule bg-transparent px-2 py-1 text-ink-2 first:ml-0 first:rounded-l-sm last:rounded-r-sm hover:z-10 hover:border-ink hover:bg-paper-2 hover:text-ink; }
+  .rating button.active[data-label="loved"] { @apply z-10 border-loved text-loved; background:color-mix(in oklab, var(--loved) 14%, transparent); }
+  .rating button.active[data-label="good"] { @apply z-10 border-good text-good; background:color-mix(in oklab, var(--good) 14%, transparent); }
+  .rating button.active[data-label="down"] { @apply z-10 border-down text-down; background:color-mix(in oklab, var(--down) 14%, transparent); }
+  .rating button.clear { @apply invisible ml-1.5 border-0 bg-transparent px-1 text-muted underline decoration-rule underline-offset-4 hover:text-ink; }
+  .rating:has(button[data-label]:not(.clear).active) button.clear, .rating button.clear.active { @apply visible; }
+  .rating button.clear.active { @apply no-underline; }
+  .rating-cleared-label { @apply hidden; }
+  .rating button.clear.active .rating-clear-label { @apply hidden; }
+  .rating button.clear.active .rating-cleared-label { @apply inline; }
+  .rating-note { @apply mt-2 flex w-full max-w-md basis-full items-center gap-2 text-[0.72rem] text-muted; }
+  .rating-note input { @apply min-w-0 flex-1 rounded-none border-x-0 border-t-0 border-b border-rule bg-transparent px-0 py-1 shadow-none focus:border-ink; }
 
   .flash { @apply my-4 border-l-4 border-accent bg-paper-2 px-4 py-3 font-sans text-sm; }
   .error { @apply border-l-4 border-down bg-paper-2 px-4 py-3 font-sans text-sm text-down; }
@@ -227,14 +245,19 @@
   tr.superseded > td { @apply text-muted; }
   tr.superseded a { @apply text-muted; }
 
-  /* the rating widget has to fit inside a table cell */
-  td .rating, .picks .rating { @apply my-1.5 max-w-[15rem] gap-y-1 text-xs; }
+  /* the rating widget has to fit inside a table cell or a dense list */
+  td .rating, .picks .rating { @apply my-0 max-w-none gap-y-1 text-xs; }
+  .picks .rating { @apply mt-2; }
   td .rating-prompt, .picks .rating-prompt { @apply hidden; }
-  td .rating button[data-label]:not(.clear), .picks .rating button[data-label]:not(.clear) { @apply min-h-8 px-2.5 py-1 text-xs; }
-  td .rating button.clear, .picks .rating button.clear { @apply ml-2 min-h-8 px-0 text-xs; }
-  td .rating-note { @apply mt-1 max-w-[15rem] gap-1.5 text-[0.7rem]; }
-  td .rating-note input { @apply px-1.5 py-0.5 text-xs; }
-  .picks .rating { @apply max-w-none; }
+  td .rating button[data-label]:not(.clear), .picks .rating button[data-label]:not(.clear) { @apply px-1.5 py-1 text-xs; }
+  td .rating button.clear, .picks .rating button.clear { @apply ml-1.5 px-0 text-xs; }
+  td .rating-note { @apply mt-0 max-w-none gap-1.5 text-[0.7rem]; }
+  td .rating-note-label { @apply sr-only; }
+  td .rating-note input { @apply text-xs; }
+  /* the ratings table's verdict cell: one column, buttons then note, nothing wraps */
+  .rating-cell .rating { @apply grid w-[15rem] grid-cols-1 gap-y-1.5; }
+  .rating-cell .rating-actions { @apply flex w-full min-h-0 items-center; }
+  .rating-cell .rating button.clear { @apply ml-auto; }
 
   pre.block, pre.preview, pre.journal { @apply overflow-auto whitespace-pre-wrap rounded-sm bg-paper-2 p-3 font-mono text-[0.8125rem] leading-relaxed; overflow-wrap:anywhere; }
   pre.block { @apply max-h-64; }
@@ -312,7 +335,9 @@
   }
   @media (max-width:40rem) {
     .kv { @apply block; } .kv dt { @apply mt-2; }
-    .rating { @apply items-stretch; } .rating-prompt, .rating-note { @apply basis-full; } .rating-prompt { @apply mb-2; }
+    .rating { @apply items-stretch; } .rating-prompt, .rating-note { @apply basis-full; } .rating-prompt { @apply mb-1; }
+    .rating-actions { @apply min-h-11; }
+    .rating button[data-label]::after { @apply -inset-y-2; }
     .filters label { @apply w-full; }
     .filters input, .filters select { @apply w-full; }
   }

src/web/templates/_rating_widget.html

@@ -3,9 +3,11 @@
   <input type="hidden" name="issue_date" value="{{ widget.issue_date }}">
   <input type="hidden" name="next" value="{{ widget.next }}">
   <span class="rating-prompt">Was this a good pick?</span>
+  <span class="rating-actions">
     <button type="submit" name="label" value="loved" data-label="loved"{% if widget.current == "loved" %} class="active" aria-pressed="true"{% else %} aria-pressed="false"{% endif %}>Loved it</button>
     <button type="submit" name="label" value="good" data-label="good"{% if widget.current == "good" %} class="active" aria-pressed="true"{% else %} aria-pressed="false"{% endif %}>Good</button>
     <button type="submit" name="label" value="down" data-label="down"{% if widget.current == "down" %} class="active" aria-pressed="true"{% else %} aria-pressed="false"{% endif %}>Not for me</button>
-{% if widget.show_note %}<label class="rating-note">Note <input name="note"></label>{% endif %}
-  <button class="clear{% if widget.current == "cleared" %} active{% endif %}" type="submit" name="label" value="cleared" data-label="cleared"{% if widget.current == "cleared" %} aria-pressed="true"{% else %} aria-pressed="false"{% endif %}>clear</button>
+    <button class="clear{% if widget.current == "cleared" %} active{% endif %}" type="submit" name="label" value="cleared" data-label="cleared"{% if widget.current == "cleared" %} aria-pressed="true"{% else %} aria-pressed="false"{% endif %}><span class="rating-clear-label">clear</span><span class="rating-cleared-label">cleared</span></button>
+  </span>
+{% if widget.show_note %}<label class="rating-note"><span class="rating-note-label">Note</span><input name="note" placeholder="Add a note…"></label>{% endif %}
 </form>

src/web/templates/article.html

@@ -1,5 +1,5 @@
 {% extends "layout.html" %}{% block ears %}<span class="sm:hidden">{{ toc.short_date }}</span><span class="hidden sm:inline">{{ toc.display_date }} · No. {{ toc.issue_number }}</span>{% endblock %}{% block content %}<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-[16rem_minmax(0,1fr)] lg:gap-x-10 lg:px-6 xl:grid-cols-[18rem_minmax(0,1fr)] xl:gap-x-14">{% include "_toc.html" %}
-<article class="mx-auto mt-10 w-full max-w-[68ch] px-4 sm:px-6 lg:mt-12 lg:px-0" data-toc-scroll>
+<article class="reader-page mx-auto mt-10 w-full max-w-[68ch] px-4 sm:px-6 lg:mt-12 lg:px-0" data-toc-scroll>
   <header><p class="font-sans text-[0.72rem] uppercase tracking-[0.12em] text-muted">Article</p><h1 class="mt-3 text-4xl font-semibold leading-[1.1] tracking-[-0.01em] sm:text-5xl"><a class="text-ink no-underline hover:text-accent" href="{{ source_url }}">{{ title }}</a></h1>{% match byline %}{% when Some with (byline) %}<p class="mt-5 font-sans text-sm font-medium text-ink-2">{{ byline }}</p>{% when None %}{% endmatch %}<p class="mt-1 font-sans text-sm text-muted">{{ meta_line }}</p>{% match why %}{% when Some with (why) %}<p class="mt-6 border-l-2 border-accent pl-3 italic text-ink-2">Why it's here: {{ why }}</p>{% when None %}{% endmatch %}{% match social_line %}{% when Some with (social) %}<p class="mt-4 font-sans text-sm text-muted">{{ social }}</p>{% when None %}{% endmatch %}{% match summary %}{% when Some with (summary) %}<p class="mt-7 text-xl italic leading-relaxed text-ink-2">{{ summary }}</p>{% when None %}{% endmatch %}{% if excerpt_only %}<p class="notice mt-6">Excerpt only — continue reading at the original site.</p>{% endif %}</header>
   <div class="prose-body mt-10 border-t border-rule pt-8">{{ body_html|safe }}</div>
   {% match discussion_html %}{% when Some with (discussion) %}<section class="discussion prose-body mt-12 border-t border-rule pt-6 [&_.comment-meta]:font-sans [&_.comment-meta]:text-sm [&_.comment-meta]:text-muted [&_blockquote.reply]:ml-6"><h2 class="mb-6 border-0 pt-0 text-2xl">Discussion</h2>{{ discussion|safe }}</section>{% when None %}{% endmatch %}

src/web/templates/behind.html

@@ -1,3 +1,3 @@
 {% extends "layout.html" %}{% block ears %}<span class="sm:hidden">{{ toc.short_date }}</span><span class="hidden sm:inline">{{ toc.display_date }} · No. {{ toc.issue_number }}</span>{% endblock %}{% block content %}<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-[16rem_minmax(0,1fr)] lg:gap-x-10 lg:px-6 xl:grid-cols-[18rem_minmax(0,1fr)] xl:gap-x-14">{% include "_toc.html" %}
-<article class="mx-auto mt-10 w-full max-w-[68ch] px-4 sm:px-6 lg:mt-12 lg:px-0"><header class="mb-9"><p class="font-sans text-[0.72rem] uppercase tracking-[0.12em] text-muted">Edition notes</p><h1 class="mt-2 text-4xl font-semibold leading-[1.1] tracking-[-0.01em] sm:text-5xl">Behind the paper</h1></header><section class="border-y border-rule py-6"><p>{{ summary_line }}</p><p class="mt-3">{{ admitted_line }}</p><p class="mt-3">{{ learned_line }}</p></section><section class="mt-10"><h2 class="border-t border-rule pt-2 font-sans text-[0.72rem] font-semibold uppercase tracking-[0.12em] text-muted">Near misses</h2><p class="mt-5 italic text-ink-2">Highest utility not selected.</p>{% if near_misses.is_empty() %}<p class="mt-4 text-muted">None recorded for this run.</p>{% else %}<ol class="mt-5 list-decimal space-y-3 pl-6">{% for near_miss in near_misses %}<li>{% if page.is_admin() %}<a class="text-ink decoration-rule hover:decoration-accent" href="/dashboard/articles/{{ near_miss.article_id }}">{{ near_miss.line }}</a>{% else %}{{ near_miss.line }}{% endif %}</li>{% endfor %}</ol>{% endif %}</section><p class="mt-10 border-l-2 border-rule pl-4 italic text-ink-2">{{ models_line }}</p><p class="mt-10 border-t border-rule pt-5 font-sans text-sm"><a href="{{ issue_href }}">← Back to this issue</a></p></article>
+<article class="reader-page mx-auto mt-10 w-full max-w-[68ch] px-4 sm:px-6 lg:mt-12 lg:px-0"><header class="mb-9"><p class="font-sans text-[0.72rem] uppercase tracking-[0.12em] text-muted">Edition notes</p><h1 class="mt-2 text-4xl font-semibold leading-[1.1] tracking-[-0.01em] sm:text-5xl">Behind the paper</h1></header><section class="border-y border-rule py-6"><p>{{ summary_line }}</p><p class="mt-3">{{ admitted_line }}</p><p class="mt-3">{{ learned_line }}</p></section><section class="mt-10"><h2 class="border-t border-rule pt-2 font-sans text-[0.72rem] font-semibold uppercase tracking-[0.12em] text-muted">Near misses</h2><p class="mt-5 italic text-ink-2">Highest utility not selected.</p>{% if near_misses.is_empty() %}<p class="mt-4 text-muted">None recorded for this run.</p>{% else %}<ol class="mt-5 list-decimal space-y-3 pl-6">{% for near_miss in near_misses %}<li>{% if page.is_admin() %}<a class="text-ink decoration-rule hover:decoration-accent" href="/dashboard/articles/{{ near_miss.article_id }}">{{ near_miss.line }}</a>{% else %}{{ near_miss.line }}{% endif %}</li>{% endfor %}</ol>{% endif %}</section><p class="mt-10 border-l-2 border-rule pl-4 italic text-ink-2">{{ models_line }}</p><p class="mt-10 border-t border-rule pt-5 font-sans text-sm"><a href="{{ issue_href }}">← Back to this issue</a></p></article>
 </div>{% endblock %}

src/web/templates/dashboard/ratings.html

@@ -62,7 +62,7 @@
 <thead><tr><th>Verdict</th><th>Article</th><th>When · by</th><th>Note</th><th>Age → decay</th><th class="num">Neighbour weight</th><th>Feed credit</th><th>In prompt</th><th>In rebuild</th><th>Used last run</th></tr></thead>
 <tbody>
 {% for row in current %}<tr>
-<td class="min-w-[13rem]"><span class="badge {{ row.badge }}">{{ row.verdict }}</span>{% let widget = row.widget %}{% include "_rating_widget.html" %}</td>
+<td class="rating-cell min-w-[13rem]">{% let widget = row.widget %}{% include "_rating_widget.html" %}</td>
 <td class="cell-wrap"><a href="/dashboard/articles/{{ row.article_id }}">{{ row.title }}</a><br><span class="meta text-xs">{{ row.feed_title }}{% if !row.issue_date.is_empty() %} · <a href="/issues/{{ row.issue_date }}">{{ row.issue_date }}</a>{% endif %}</span></td>
 <td class="cell-tight">{{ row.when }}<br><span class="meta text-xs">{{ row.source }} · <span class="by">{{ row.username }}</span></span></td>
 <td class="cell-wrap text-muted">{{ row.note }}</td>

src/web/templates/issue_full.html

@@ -1,13 +1,13 @@
 {% extends "layout.html" %}{% block ears %}<span class="sm:hidden">{{ toc.short_date }}</span><span class="hidden sm:inline">{{ toc.display_date }} · No. {{ toc.issue_number }}</span>{% endblock %}{% block content %}
 <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-[16rem_minmax(0,1fr)] lg:gap-x-10 lg:px-6 xl:grid-cols-[18rem_minmax(0,1fr)] xl:gap-x-14">{% include "_toc.html" %}
-<article class="mx-auto mt-10 w-full max-w-[68ch] px-4 sm:px-6 lg:mt-12 lg:px-0">
+<article class="reader-page mx-auto mt-10 w-full max-w-[68ch] px-4 sm:px-6 lg:mt-12 lg:px-0">
   <header class="mb-8 text-center"><p class="font-sans text-[0.72rem] uppercase tracking-[0.12em] text-muted">{{ display_date }} · No. {{ issue_number }}</p><p class="mt-2 font-sans text-sm text-muted">{{ stats_line }}</p></header>
-  <section aria-labelledby="brief-heading" data-toc-entry="/issues/{{ date }}"><h1 id="brief-heading" class="border-t border-rule pt-2 font-sans text-[0.72rem] font-semibold uppercase tracking-[0.12em] text-muted">The Brief</h1><div class="editorial prose-body mt-5 [&>p:first-child]:first-letter:float-left [&>p:first-child]:first-letter:mr-2 [&>p:first-child]:first-letter:mt-1 [&>p:first-child]:first-letter:font-serif [&>p:first-child]:first-letter:text-[4.6rem] [&>p:first-child]:first-letter:font-semibold [&>p:first-child]:first-letter:leading-[0.72]">{{ front_page_html|safe }}</div></section>
+  <section aria-labelledby="brief-heading" data-toc-entry="/issues/{{ date }}"><h1 id="brief-heading" class="reader-section-heading">The Brief</h1><div class="editorial prose-body mt-5 [&>p:first-child]:first-letter:float-left [&>p:first-child]:first-letter:mr-2 [&>p:first-child]:first-letter:mt-1 [&>p:first-child]:first-letter:font-serif [&>p:first-child]:first-letter:text-[4.6rem] [&>p:first-child]:first-letter:font-semibold [&>p:first-child]:first-letter:leading-[0.72]">{{ front_page_html|safe }}</div></section>
   {% if !downloads.is_empty() %}<div class="my-8 flex flex-wrap gap-2 border-y border-rule py-4">{% for download in downloads %}<a class="btn" href="{{ download.href }}">Download {{ download.label }} <span class="ml-1 text-muted">{{ download.size }}</span></a>{% endfor %}</div>{% endif %}
   <section class="mt-12" aria-labelledby="index-heading"><h2 id="index-heading" class="text-center text-3xl font-semibold leading-[1.1] tracking-[-0.01em]">In This Issue</h2>
-    {% for section in sections %}<section class="mt-10"><h3 class="border-t border-rule pt-2 font-sans text-[0.72rem] font-semibold uppercase tracking-[0.12em] text-muted">{{ section.name }}</h3><ul class="m-0 list-none p-0">{% for entry in section.entries %}<li class="border-b border-rule py-6" data-toc-entry="{{ entry.href }}"><h4 class="font-serif font-semibold leading-[1.1] tracking-[-0.01em] {% if entry.is_lead %}text-3xl{% else %}text-2xl{% endif %}"><a class="text-ink no-underline hover:text-accent" href="{{ entry.href }}">{{ entry.title }}</a></h4><p class="mt-2 font-sans text-sm text-muted">{{ entry.source }} · {{ entry.reading_minutes }} min read</p>{% if !entry.summary.is_empty() %}<p class="mt-4">{{ entry.summary }}</p>{% endif %}{% match entry.why %}{% when Some with (why) %}<p class="mt-4 border-l-2 border-accent pl-3 italic text-ink-2">Why it's here: {{ why }}</p>{% when None %}{% endmatch %}{% match entry.rating %}{% when Some with (widget) %}{% include "_rating_widget.html" %}{% when None %}{% endmatch %}</li>{% endfor %}</ul></section>{% endfor %}
+    {% for section in sections %}<section class="mt-14"><h3 class="reader-section-heading">{{ section.name }}</h3><ul class="m-0 list-none p-0">{% for entry in section.entries %}<li class="border-b border-rule py-6" data-toc-entry="{{ entry.href }}"><h4 class="font-serif font-semibold leading-[1.1] tracking-[-0.01em] {% if entry.is_lead %}text-3xl{% else %}text-2xl{% endif %}"><a class="text-ink no-underline hover:text-accent" href="{{ entry.href }}">{{ entry.title }}</a></h4><p class="mt-2 font-sans text-sm text-muted">{{ entry.source }} · {{ entry.reading_minutes }} min read</p>{% if !entry.summary.is_empty() %}<p class="index-summary mt-4">{{ entry.summary }}</p>{% endif %}{% match entry.why %}{% when Some with (why) %}<p class="mt-4 border-l-2 border-accent pl-3 italic text-ink-2">Why it's here: {{ why }}</p>{% when None %}{% endmatch %}{% match entry.rating %}{% when Some with (widget) %}{% include "_rating_widget.html" %}{% when None %}{% endmatch %}</li>{% endfor %}</ul></section>{% endfor %}
   </section>
   {% if has_world || has_behind %}<nav class="my-12 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-y border-rule py-4 text-center font-sans text-sm uppercase tracking-[0.08em]" aria-label="Issue chapters">{% if has_world %}<a class="text-ink no-underline hover:text-accent" href="/issues/{{ date }}/world">World Briefing</a>{% endif %}{% if has_world && has_behind %}<span class="text-muted" aria-hidden="true">·</span>{% endif %}{% if has_behind %}<a class="text-ink no-underline hover:text-accent" href="/issues/{{ date }}/behind">Behind the paper</a>{% endif %}</nav>{% endif %}
-  <footer id="colophon" class="mt-12 scroll-mt-6 border-t border-rule pt-2 font-sans text-sm leading-relaxed" data-toc-entry="/issues/{{ date }}#colophon"><h2 class="text-[0.72rem] font-semibold uppercase tracking-[0.12em] text-muted">Colophon</h2><p class="my-4 text-ink-2"><em>The Daily EPUB</em> is assembled every morning from a personal feed reader.</p><dl class="kv border-y border-rule py-4 text-xs sm:text-sm"><dt>Generated</dt><dd>{{ colophon.generated_at }}</dd><dt>Bulk model</dt><dd>{{ colophon.bulk_model }}</dd><dt>Editor model</dt><dd>{{ colophon.editor_model }}</dd><dt>Summaries model</dt><dd>{{ colophon.summaries_model }}</dd><dt>Entries considered</dt><dd>{% match colophon.entries_fetched %}{% when Some with (entries) %}{{ entries }}{% match colophon.feeds_seen %}{% when Some with (feeds) %} from {{ feeds }} feeds{% when None %}{% endmatch %}{% when None %}n/a{% endmatch %}</dd><dt>Candidates scored</dt><dd>{% match colophon.candidates %}{% when Some with (candidates) %}{{ candidates }}{% when None %}n/a{% endmatch %}</dd><dt>Articles selected</dt><dd>{{ colophon.article_count }} across {{ colophon.section_count }} sections</dd><dt>Words</dt><dd>{{ colophon.total_words }} · ~{{ colophon.reading_minutes }} min read</dd>{% for cost in colophon.provider_costs %}<dt>{{ cost.provider }} cost</dt><dd>{{ cost.cost }}</dd>{% endfor %}<dt>Total token cost</dt><dd>{% match colophon.cost_usd %}{% when Some with (cost) %}{{ cost }}{% when None %}n/a{% endmatch %}</dd><dt>Generator</dt><dd>{{ colophon.generator_version }}</dd></dl></footer>
+  <footer id="colophon" class="mt-14 scroll-mt-6 font-sans text-sm leading-relaxed" data-toc-entry="/issues/{{ date }}#colophon"><h2 class="reader-section-heading">Colophon</h2><p class="my-4 text-ink-2"><em>The Daily EPUB</em> is assembled every morning from a personal feed reader.</p><dl class="kv border-y border-rule py-4 text-xs sm:text-sm"><dt>Generated</dt><dd>{{ colophon.generated_at }}</dd><dt>Bulk model</dt><dd>{{ colophon.bulk_model }}</dd><dt>Editor model</dt><dd>{{ colophon.editor_model }}</dd><dt>Summaries model</dt><dd>{{ colophon.summaries_model }}</dd><dt>Entries considered</dt><dd>{% match colophon.entries_fetched %}{% when Some with (entries) %}{{ entries }}{% match colophon.feeds_seen %}{% when Some with (feeds) %} from {{ feeds }} feeds{% when None %}{% endmatch %}{% when None %}n/a{% endmatch %}</dd><dt>Candidates scored</dt><dd>{% match colophon.candidates %}{% when Some with (candidates) %}{{ candidates }}{% when None %}n/a{% endmatch %}</dd><dt>Articles selected</dt><dd>{{ colophon.article_count }} across {{ colophon.section_count }} sections</dd><dt>Words</dt><dd>{{ colophon.total_words }} · ~{{ colophon.reading_minutes }} min read</dd>{% for cost in colophon.provider_costs %}<dt>{{ cost.provider }} cost</dt><dd>{{ cost.cost }}</dd>{% endfor %}<dt>Total token cost</dt><dd>{% match colophon.cost_usd %}{% when Some with (cost) %}{{ cost }}{% when None %}n/a{% endmatch %}</dd><dt>Generator</dt><dd>{{ colophon.generator_version }}</dd></dl></footer>
 </article>
 </div>{% endblock %}

src/web/templates/issue_public.html

@@ -1,8 +1,8 @@
 {% extends "layout.html" %}{% block ears %}{% if empty %}<span>Morning edition</span>{% else %}<span class="sm:hidden">{{ issue.short_date }}</span><span class="hidden sm:inline">{{ issue.display_date }} · No. {{ issue.issue_number }}</span>{% endif %}{% endblock %}{% block content %}
-<article class="mx-auto mt-8 max-w-[68ch] px-4 sm:mt-12 sm:px-6">
+<article class="reader-page mx-auto mt-8 max-w-[68ch] px-4 sm:mt-12 sm:px-6">
 {% if empty %}<div class="py-16 text-center"><p class="font-sans text-[0.72rem] uppercase tracking-[0.12em] text-muted">Morning edition</p><h1 class="mt-3 text-4xl font-semibold leading-[1.1] tracking-[-0.01em]">No issue yet</h1><p class="mt-4 text-ink-2">The first issue has not been published.</p></div>{% else %}
   <header class="mb-10 text-center"><p class="font-sans text-[0.72rem] uppercase tracking-[0.12em] text-muted">{{ issue.display_date }} · No. {{ issue.issue_number }}</p><p class="mt-2 font-sans text-sm text-muted">{{ issue.stats_line }}</p><p class="mx-auto mt-5 max-w-[58ch] text-lg italic leading-relaxed text-ink-2">A personal morning paper, assembled daily; the selection is the reader's, the words are the authors'.</p></header>
   {% if !downloads.is_empty() %}<div class="mb-8 flex flex-wrap justify-center gap-2">{% for download in downloads %}<a class="btn" href="{{ download.href }}">{{ download.label }} <span class="ml-1 text-muted">{{ download.size }}</span></a>{% endfor %}</div>{% endif %}
-  {% for section in issue.sections %}<section class="mt-10"><h2 class="border-t border-rule pt-2 font-sans text-[0.72rem] font-semibold uppercase tracking-[0.12em] text-muted">{{ section.name }}</h2><div>{% for entry in section.entries %}<article class="border-b border-rule py-6{% if entry.is_lead %} pt-5{% endif %}"><h3 class="font-semibold leading-[1.1] tracking-[-0.01em] {% if entry.is_lead %}text-3xl{% else %}text-2xl{% endif %}"><a class="text-ink no-underline hover:text-accent" href="{{ entry.url }}">{{ entry.title }}</a></h3><p class="mt-2 font-sans text-sm leading-relaxed text-muted">{% match entry.author %}{% when Some with (author) %}{{ author }} · {% when None %}{% endmatch %}{{ entry.source }}{% if !entry.domain.is_empty() %} ({{ entry.domain }}){% endif %} · {{ entry.reading_minutes }} min</p>{% match entry.summary %}{% when Some with (summary) %}<p class="mt-4">{{ summary }}</p>{% when None %}{% endmatch %}{% match entry.why %}{% when Some with (why) %}<p class="mt-4 border-l-2 border-accent pl-3 italic text-ink-2">Why it's here: {{ why }}</p>{% when None %}{% endmatch %}{% if !entry.comment_links.is_empty() %}<p class="mt-3 flex flex-wrap gap-x-4 gap-y-1 font-sans text-sm text-muted">{% for link in entry.comment_links %}<a class="text-muted hover:text-accent" rel="noopener" target="_blank" href="{{ link.url }}">{{ link.label }}{% if !link.meta.is_empty() %}: {{ link.meta }}{% endif %}</a>{% endfor %}</p>{% endif %}</article>{% endfor %}</div></section>{% endfor %}
+  {% for section in issue.sections %}<section class="mt-14"><h2 class="reader-section-heading">{{ section.name }}</h2><div>{% for entry in section.entries %}<article class="border-b border-rule py-6{% if entry.is_lead %} pt-5{% endif %}"><h3 class="font-semibold leading-[1.1] tracking-[-0.01em] {% if entry.is_lead %}text-3xl{% else %}text-2xl{% endif %}"><a class="text-ink no-underline hover:text-accent" href="{{ entry.url }}">{{ entry.title }}</a></h3><p class="mt-2 font-sans text-sm leading-relaxed text-muted">{% match entry.author %}{% when Some with (author) %}{{ author }} · {% when None %}{% endmatch %}{{ entry.source }}{% if !entry.domain.is_empty() %} ({{ entry.domain }}){% endif %} · {{ entry.reading_minutes }} min</p>{% match entry.summary %}{% when Some with (summary) %}<p class="index-summary mt-4">{{ summary }}</p>{% when None %}{% endmatch %}{% match entry.why %}{% when Some with (why) %}<p class="mt-4 border-l-2 border-accent pl-3 italic text-ink-2">Why it's here: {{ why }}</p>{% when None %}{% endmatch %}{% if !entry.comment_links.is_empty() %}<p class="mt-3 flex flex-wrap gap-x-4 gap-y-1 font-sans text-sm text-muted">{% for link in entry.comment_links %}<a class="text-muted hover:text-accent" rel="noopener" target="_blank" href="{{ link.url }}">{{ link.label }}{% if !link.meta.is_empty() %}: {{ link.meta }}{% endif %}</a>{% endfor %}</p>{% endif %}</article>{% endfor %}</div></section>{% endfor %}
   <p class="mt-10 text-center font-sans text-sm"><a href="/issues">Browse the archive →</a></p>
 {% endif %}</article>{% endblock %}

src/web/templates/world.html

@@ -1,3 +1,3 @@
 {% extends "layout.html" %}{% block ears %}<span class="sm:hidden">{{ toc.short_date }}</span><span class="hidden sm:inline">{{ toc.display_date }} · No. {{ toc.issue_number }}</span>{% endblock %}{% block content %}<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-[16rem_minmax(0,1fr)] lg:gap-x-10 lg:px-6 xl:grid-cols-[18rem_minmax(0,1fr)] xl:gap-x-14">{% include "_toc.html" %}
-<article class="mx-auto mt-10 w-full max-w-[68ch] px-4 sm:px-6 lg:mt-12 lg:px-0"><header class="mb-9">{% match display_date %}{% when Some with (date) %}<p class="font-sans text-[0.72rem] uppercase tracking-[0.12em] text-muted">{{ date }}</p>{% when None %}{% endmatch %}<h1 class="mt-2 text-4xl font-semibold leading-[1.1] tracking-[-0.01em] sm:text-5xl">World Briefing</h1></header><div class="prose-body border-t border-rule pt-7">{{ body_html|safe }}</div><p class="mt-10 border-t border-rule pt-5 font-sans text-sm"><a href="{{ issue_href }}">← Back to this issue</a></p></article>
+<article class="reader-page mx-auto mt-10 w-full max-w-[68ch] px-4 sm:px-6 lg:mt-12 lg:px-0"><header class="mb-9">{% match display_date %}{% when Some with (date) %}<p class="font-sans text-[0.72rem] uppercase tracking-[0.12em] text-muted">{{ date }}</p>{% when None %}{% endmatch %}<h1 class="mt-2 text-4xl font-semibold leading-[1.1] tracking-[-0.01em] sm:text-5xl">World Briefing</h1></header><div class="prose-body border-t border-rule pt-7">{{ body_html|safe }}</div><p class="mt-10 border-t border-rule pt-5 font-sans text-sm"><a href="{{ issue_href }}">← Back to this issue</a></p></article>
 </div>{% endblock %}