---
name: passon-reviewer-to-bob-pass2-v1
title: Passon — Reviewer to Bob — Pass 2 ratified items — v1
type: passon
state: in-flight
workstream: mtg-artefact
date: 2026-06-01
related-ids: [Bob, The-Reviewer, The-Vault-v0.47, WCAG-2.1-AA]
aliases: [Reviewer-Bob Passon Pass 2]
---

# Passon — Reviewer → Bob — Pass 2 ratified items

**From:** The Reviewer (seventh shore position)
**To:** Bob the Builder
**Via:** Paul (ratified 2026-06-01 ~17:41 UTC — *"yes to all your questions"*)
**Build under audit:** `The_Vault_v0.47_banner_swap_2026-06-01_1626.html`
**Target build:** `The_Vault_v0.49_pass2_fixes_2026-06-01_[HHMM].html` (assuming Pass 1 ships as v0.48 first).

Five open questions ratified by Paul; eleven items across the queue. **Ten are yours to implement.** One image-compression item Paul may do himself.

---

## RATIFIED CALLS FROM PAUL

1. **Phone breakpoint:** add `@media (max-width: 480px)`; stack the five-panel strip to **2 columns**; bump small fonts to ≥0.75rem; bump dialog control-button padding.
2. **Accent text colour:** ship a darker bronze for text-on-light-bg use; keep `--accent #b08a3e` for everything else (borders, dark-band foregrounds, decorative trim).
3. **Focus-visible outline colour on light surfaces:** `--dark-band #141414`; keep `--accent` for focus rings on dark-band surfaces (ticker, footer, dark plates).
4. **Image compression:** compress the inline JPEG payloads (cover, tunnel backdrop, Defending-the-Gap visual). Target ~50% size reduction with no perceptual change at rendered dimensions.
5. **Doc-modal:** migrate to native `<dialog>` + `showModal()` matching the chat-dialog pattern.

---

## ITEMS FOR YOU TO IMPLEMENT IN v0.49

### B1 — Reduced-motion handling. 🔴

Add this block to the CSS, after the existing `@media print` rules:

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none !important; }
}
```

Outcome: vestibular-sensitive visitors see a static room when their OS pref is set. WCAG 2.3.3.

### B2 — New `--accent-text` token; rewrite link-text colour. 🔴

Add to `:root`:

```css
--accent-text: #7a5e22;   /* AA on --bg; deeper bronze for text */
```

Verify against `--bg #f5f3ee` — the target ratio is ≥4.5:1. If `#7a5e22` doesn't hit it, darken until it does. Then rewrite the following rules to use `var(--accent-text)` instead of `var(--accent)` as the foreground colour:

- `.doc-modal-body a { color: var(--accent-text); }`
- `.doc-modal-body .wikilink { color: var(--accent-text); }`
- `.book-gate-text a { color: var(--accent-text); }`
- `.site-footer a { color: var(--accent-text); }`
- `.dg-link { color: var(--accent-text); }`
- `.toc-back-link { color: var(--accent-text) !important; }`
- `.book-back-floating { color: var(--accent-text); }` (if applies to text-on-light)
- `.wander-link { color: var(--accent-text); }`
- `.book-toc a:hover, .book-toc a:focus { color: var(--accent-text); }`
- `.book-toc a.toc-chapter:hover .toc-ttl, .book-toc a.toc-chapter:focus .toc-ttl { color: var(--accent-text); }`
- `.doc-item button.doc-item-row:hover .doc-title, .doc-item button.doc-item-row:focus .doc-title { color: var(--accent-text); }`
- Any other `color: var(--accent)` rule where the text sits on `--bg`, `--offwhite`, or white surfaces. Sweep the CSS once.

**Keep `--accent` (gold) for:**
- All borders and border-left accents.
- All foregrounds on `--dark-band` surfaces (ticker text, datasafe `--accent` numbers, footer `--accent` labels, dark-plate `.footer-cl`, `.fn-closing strong`, etc.).
- Decorative caps tags (`.panel-tag`, `.top5-tag`, `.role-column-tag`, `.dg-tag`, `.cl-num` — these are short uppercase labels read as decoration alongside the content text; acceptable under the 1.4.3 incidental exemption, but if you want belt-and-braces, swap them to `--accent-text` too).
- Hover background fills, button accent fills.
- Letter badges on dark backgrounds (already against `--dark-band`).

Outcome: every content text instance meets WCAG AA 4.5:1.

### B3 — Focus-visible outline on light surfaces. 🔴

Change:

```css
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
```

to:

```css
*:focus-visible { outline: 2px solid var(--dark-band); outline-offset: 2px; }
```

If you want gold focus on dark surfaces preserved, add a scoped rule:

```css
.ticker *:focus-visible,
.site-footer *:focus-visible,
.fn-closing *:focus-visible,
.threshold-para *:focus-visible,
.anchor-block *:focus-visible,
.ds-headline *:focus-visible {
  outline-color: var(--accent);
}
```

Outcome: focus rings meet WCAG 2.2 SC 1.4.11 (3:1 non-text contrast) on every surface.

### B4 — Phone breakpoint at 480px. 🔴

Add a new `@media (max-width: 480px)` block. Recommended contents:

```css
@media (max-width: 480px) {
  /* Five-panel strip: stack from 5-column to 2-column */
  .pyramid-row-3 { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
  .pyramid-btn-small { padding: 0.85rem 0.7rem !important; }
  .pyramid-btn-small .vft-panel-title { font-size: 0.85rem !important; }
  .pyramid-btn-small .vft-panel-sub { font-size: 0.72rem !important; }
  .pyramid-btn .door-letter,
  .pyramid-btn .vft-panel-letter { font-size: 0.62rem !important; top: 0.4rem !important; left: 0.5rem !important; }

  /* Dialog control buttons: 44×44 minimum touch targets */
  .chat-dialog-close { padding: 0.5rem 0.75rem !important; font-size: 1.85rem !important; }
  .chat-dialog-nav { padding: 0.7rem 1rem !important; font-size: 0.78rem !important; }
  .doc-modal-close { padding: 0.5rem 0.75rem !important; font-size: 1.75rem !important; }

  /* Ticker: slow further on small screens */
  .ticker-track { animation-duration: 150s; }

  /* Numbers tables: wrap each in horizontal-scroll container */
  .ds-table { font-size: 0.82rem; }
}
```

Outcome: phone rendering is purpose-tuned. Doors stay 3-column from 800px breakpoint downward (already in place); five-panel strip stacks to 2 at 480px. Touch targets meet 44×44 on the dialog controls.

### B5 — Touch-target padding on dialog controls (desktop too). 🟡

For consistency, raise the dialog control padding across all breakpoints:

```css
.chat-dialog-close { padding: 0.4rem 0.6rem; font-size: 1.85rem; }
.chat-dialog-nav { padding: 0.55rem 0.95rem; font-size: 0.75rem; }
.doc-modal-close { padding: 0.4rem 0.6rem; font-size: 1.75rem; }
```

Outcome: ≥44×44 on desktop pointer too; consistent across breakpoints.

### B6 — Migrate doc-modal to native `<dialog>`. 🟡

Replace the current `<div class="doc-modal" hidden role="dialog" aria-modal="true">` markup with:

```html
<dialog class="doc-dialog" id="doc-dialog" aria-labelledby="doc-dialog-title">
  <header class="doc-dialog-header">
    <h3 id="doc-dialog-title">Document</h3>
    <button type="button" class="doc-dialog-close" aria-label="Close (Esc)">×</button>
  </header>
  <div class="doc-dialog-body" id="doc-dialog-body" tabindex="0"></div>
</dialog>
```

Replace the open / close JS with `showModal()` / `close()` matching the chat-dialog pattern. Reuse the chat-dialog CSS structure (`position: fixed; inset: 0; margin: auto; width: min(820px, 88vw); max-height: 90vh; flex-direction: column;`). Native dialog handles focus management, Tab trap, ESC close, and focus return on close.

Outcome: one modal pattern across the build. Keyboard users get parity inside Documents and inside Chats.

### B7 — Print stylesheet: force `<details>` open in print. 🟡

Add to the `@media print` block (or as a new print block):

```css
@media print {
  details { display: block; }
  details > *:not(summary) { display: block !important; }
  summary { font-weight: 700; padding: 0.5rem 0; border-bottom: 1px solid #ccc; }
  .panel-collapse-summary > .panel-open-affordance { display: none; }
  .chat-dialog, .doc-dialog, .doc-modal { display: none !important; }
}
```

Outcome: printing the page yields the full room in reading order with panel summaries acting as headings; any open modal is hidden in print to avoid layout surprises.

### B8 — Skip-link target. 🟡

Change:

```html
<a href="#book" class="skip-link">Skip to The Book</a>
```

to:

```html
<a href="#main" class="skip-link">Skip to main content</a>
```

And add `id="main"` to the existing `<main>` element (already in the source — just needs the id).

Outcome: skip-link serves all keyboard-first visitors, not only those heading for the book.

### B9 — Image compression. 🟡 *(Bob OR Paul)*

Compress the three inline JPEG payloads:

- The cover image (currently inline as `.book-cover-face` background and probably preload).
- The tunnel-archway backdrop (`.threshold-backdrop` background-image).
- The Defending-the-Gap visual (`.dg-visual img` src).

Target: ~70–80% JPEG quality, sized to rendered dimensions × 2 for retina. Should cut the 8.5 MB inline payload to ~4–5 MB. Use any image tool (ImageMagick, Squoosh, Photoshop, Affinity Photo).

Outcome: faster first paint on mobile data; no perceptual quality loss at rendered sizes.

### B10 — Cover image alt-text. 🟡 *(deferred to Pass 3)*

Hold current `aria-label="Mind the Gap book cover"` until Pass 3. The voice-and-copy pass will propose a stronger description Paul or Curator supplies.

---

## DEPENDENCIES

- B1–B8: ship in v0.49 immediately after v0.48 (Pass 1 fixes) is built.
- B9 (image compression): can run in parallel — affects payload size, not CSS / structure.
- B10 (alt-text): waits for Pass 3.
- Pass 3 (voice and copy) opens on Paul's nod separately.

---

## METHOD DISCIPLINE NOTES (for Bob's session journal)

- **Propose-don't-impose preserved.** All five open questions ratified by Paul before this PASS-ON was filed. Bob implements the ratified calls; no silent decisions.
- **Token strategy holds the register.** `--accent-text` separate from `--accent` keeps the gold register intact visually while closing the AA contrast gap. Single-source change to a single CSS variable.
- **One modal pattern across the build.** The doc-modal migration to native `<dialog>` resolves a pattern divergence flagged in Pass 2.
- **Filing convention.** New build at `The_Vault_v0.49_pass2_fixes_2026-06-01_[HHMM].html`. Session journal at the existing convention.

---

## SOURCES

- `Reviewer_Findings_Pass2_MobileAccessibility_v1_2026-06-01_1735.md` — the full Pass 2 audit.
- `Journal_011_Reviewer_Pass2_2026-06-01_1740.md` — Reviewer's session close.
- `The_Vault_v0.47_banner_swap_2026-06-01_1626.html` — the build audited.
- WCAG 2.1 AA — SC 1.4.3 (contrast normal text), 1.4.11 (non-text contrast), 2.3.3 (animation), 2.5.5 (target size, AAA but standard practice), 2.4.1 (skip-link).

---

*— The Reviewer · 2026-06-01 17:42 UTC*

#state/in-flight #workstream/mtg-artefact #type/passon #pass-2 #the-reviewer #bob #wcag