fix(website): make the airport band readable on a tablet and guard what it claims

Final-review pass over the compatibility airport diagram.

The plate was unreadable between 768px and ~1000px. `.ap-svg` is
`width: 100%`, so the 1000-unit drawing scales with its container: at a
768px viewport that container is ~707px, the plate renders at 0.71, and
callsigns land at 6.0px with gate ids at 5.3px. The HTML gate list now
takes over at `max-width: 1023px` rather than 767px, so tablets get the
readable list instead of a shrunken chart — not a sideways scroll, which
the spec rules out for this band. A new e2e case at 900px proves it, and
fails against the old breakpoint.

Three guards that could not see their own subject:

- The band's whole accessibility rests on `.airport-stack` being hidden
  visually (clip-path) and never with `display: none` — the plate is
  aria-hidden, so the five provider names and the "never talks to them"
  claim exist nowhere else in the DOM. Nothing asserted it. A style
  contract now pins the desktop rule, positively and negatively.
- The "never talks to them" test read `container.textContent` unscoped,
  so the aria-hidden plate satisfied it. Deleting the stack's off-airport
  label left all ten tests green while the claim vanished from the phone
  form. It is scoped to `.airport-stack` now, like its neighbour.
- The off-airport row itself was uncounted, and the e2e's margin check
  walks a NodeList that passes when empty. Deleting the whole provider
  row left both suites green. The counts sit beside the other
  `toHaveCount` assertions.

`MS AGENT FWK` is an abbreviation a 38px stand forces, but it was also
what the phone list and every screen reader got. `Gate.long` carries the
whole name; the plate keeps the short one.

Also: the chart id lost a double space, the spec doc's field extents and
B6 size now match the code, `TPL` is recorded as a real assigned IATA
code the way `AL-0059` was, and four plate fills stop hardcoding
`--color-ink` / `--color-signal` as literals. Every rendered colour is
unchanged — verified in the browser.

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

Author: blove

apps/website/e2e/home-airport.spec.ts

@@ -5,6 +5,7 @@ import {
   GATES_B,
   MAIN,
   NEAT,
+  PROVIDERS,
   VIEW,
 } from '../src/lib/airport-diagram';
 
@@ -290,6 +291,13 @@ test.describe('homepage airport diagram', () => {
     await expect(page.locator(`${PLATE} [data-main-terminal]`)).toHaveCount(1);
     await expect(page.locator(`${PLATE} .ap-taxiway`)).toHaveCount(3);
     await expect(page.locator(`${PLATE} .ap-furniture`)).toHaveCount(1);
+    // The off-airport row is the section's central argument rendered as
+    // geometry — the five providers sit OUTSIDE the neat line because
+    // Threadplane never talks to them. Check 6 below measures where they are
+    // drawn, and a walk over an empty NodeList reports no issues, so without
+    // these two counts deleting the whole row leaves both suites green.
+    await expect(page.locator(`${PLATE} .ap-off`)).toHaveCount(1);
+    await expect(page.locator(`${PLATE} > image`)).toHaveCount(PROVIDERS.length);
 
     await plate.scrollIntoViewIfNeeded();
     await expect(plate).toBeVisible();
@@ -324,6 +332,41 @@ test.describe('homepage airport diagram', () => {
     expect(drawn.bottom).toBeLessThanOrEqual(VIEW.height);
   });
 
+  test('hands a tablet the gate list rather than a plate at 0.7 scale', async ({ page }) => {
+    // `.ap-svg` is width:100%/height:auto, so the 1000-unit plate scales with
+    // its container: at a 768px viewport that container is ~707px, the plate
+    // renders at 0.71, and callsigns land at 6.0px with gate ids at 5.3px.
+    // The other two cases here test 1440 and 390 and straddle the hole
+    // entirely, which is how it survived review. The stack therefore takes
+    // over at 1023px, not the usual 767px — and never as a sideways scroll,
+    // which the spec rules out for this band.
+    await page.setViewportSize({ width: 900, height: 900 });
+    await page.goto('/');
+    await page.locator('#compatibility').scrollIntoViewIfNeeded();
+
+    await expect(page.locator('.airport-figure')).toBeHidden();
+
+    // toBeVisible() is not enough on its own: on desktop the stack is hidden
+    // by clip-path at 1px square, which Playwright still calls visible. Its
+    // laid-out width is what says the list is the form a tablet actually gets.
+    const stack = page.locator('.airport-stack');
+    await expect(stack).toBeVisible();
+    const box = await stack.boundingBox();
+    expect(box, 'the accessible stack is not laid out at all').not.toBeNull();
+    expect(
+      box?.width ?? 0,
+      'the gate list is still clipped to its 1px visually-hidden box at 900px'
+    ).toBeGreaterThan(200);
+
+    await expect(stack.locator('.airport-stack-gates li')).toHaveCount(
+      STAND_COUNT
+    );
+    const wide = await page.evaluate(
+      () => document.documentElement.scrollWidth > window.innerWidth
+    );
+    expect(wide, 'no horizontal page scroll on a tablet').toBe(false);
+  });
+
   test('lists the same gates on a phone instead of scrolling the drawing sideways', async ({
     page,
   }) => {

apps/website/src/components/landing/Compatibility.spec.tsx

@@ -28,7 +28,7 @@ describe('Compatibility', () => {
     expect(stack, 'the accessible stack is gone').toBeTruthy();
     const list = within(stack as HTMLElement);
     for (const g of [...GATES_A, ...GATES_B]) {
-      expect(list.getAllByText(g.name).length).toBeGreaterThan(0);
+      expect(list.getAllByText(g.long ?? g.name).length).toBeGreaterThan(0);
     }
     for (const p of PROVIDERS) {
       expect(list.getAllByText(p.name).length).toBeGreaterThan(0);
@@ -47,6 +47,26 @@ describe('Compatibility', () => {
     expect(container.querySelectorAll('[data-concourse]').length).toBe(CONCOURSES.length);
   });
 
+  it('spells out in the list the name the stand had to abbreviate', () => {
+    // `MS AGENT FWK` exists because a 38px stand has room for nothing longer.
+    // The list has room, and it is what a screen reader hears, so the two
+    // surfaces get different strings on purpose — which is the whole reason
+    // `Gate.long` exists and the only thing that keeps it from rotting.
+    const { container } = render(<Compatibility />);
+    const stack = container.querySelector('.airport-stack');
+    expect(stack, 'the accessible stack is gone').toBeTruthy();
+    const abbreviated = [...GATES_A, ...GATES_B].filter((g) => g.long);
+    expect(abbreviated.length, 'no gate carries a long form any more').toBeGreaterThan(0);
+    for (const g of abbreviated) {
+      const list = within(stack as HTMLElement);
+      expect(list.getAllByText(g.long as string).length).toBeGreaterThan(0);
+      expect(list.queryByText(g.name), `the stack still shows "${g.name}"`).toBeNull();
+      // ...and the plate still draws the short one, or the abbreviation was
+      // simply a bug rather than a constraint.
+      expect(container.querySelector(`[data-stand="${g.gate}"]`)?.textContent).toContain(g.name);
+    }
+  });
+
   it('shows both adapters as the two concourses', () => {
     // Read off the stack, for the reason above — the plate is aria-hidden, so
     // matching the package names there proves nothing about what is announced.
@@ -92,8 +112,17 @@ describe('Compatibility', () => {
   it('says Threadplane never talks to model providers, not that it never sees them', () => {
     // never-SEES is a data claim the docs do not support; never-TALKS-TO is
     // structural. This is the same failure mode #1067 had to correct.
+    //
+    // The positive half is scoped to .airport-stack, for the same reason as
+    // the gate-name test above: the plate carries this sentence too, as an
+    // aria-hidden <text>, so an unscoped read of container.textContent stays
+    // green while the claim disappears from the phone form and from every
+    // accessible surface the band has. The negative half stays unscoped —
+    // "never sees" must not appear anywhere in the section, drawn or spoken.
     const { container } = render(<Compatibility />);
-    expect(container.textContent).toMatch(/never talks to them/i);
+    const stack = container.querySelector('.airport-stack');
+    expect(stack, 'the accessible stack is gone').toBeTruthy();
+    expect(within(stack as HTMLElement).getByText(/never talks to them/i)).toBeTruthy();
     expect(container.textContent).not.toMatch(/never sees/i);
   });
 
@@ -107,8 +136,9 @@ describe('Compatibility', () => {
 
   it('ships a phone form driven by the same gate table as the plate', () => {
     // A seven-stand rotated airfield has no 390px form. The precedent is
-    // .arch-stack: hide the figure under 768px and show an HTML list built
-    // from the same data, never a sideways scroll.
+    // .arch-stack: hide the figure below the breakpoint (1024px here, not the
+    // usual 768px — see landing.css) and show an HTML list built from the same
+    // data, never a sideways scroll.
     const { container } = render(<Compatibility />);
     expect(container.querySelector('.airport-figure')).toBeTruthy();
     const stack = container.querySelector('.airport-stack');

apps/website/src/components/landing/Compatibility.tsx

@@ -330,7 +330,10 @@ export function Compatibility() {
                       loading="lazy"
                       decoding="async"
                     />
-                    <span>{g.name}</span>
+                    {/* The plate draws `name` because a 38px stand has room for
+                        nothing longer. This list has room, and it is what a
+                        screen reader hears, so it spells the name out. */}
+                    <span>{g.long ?? g.name}</span>
                   </li>
                 ))}
               </ul>

apps/website/src/lib/airport-diagram.ts

@@ -107,6 +107,13 @@ export interface Gate {
   readonly gate: string;
   readonly src: string;
   readonly name: string;
+  /**
+   * The unabbreviated name, when the 38px stand forced a short one. The plate
+   * always draws `name`; the HTML stack — the band's only accessible content,
+   * and its whole phone form — draws `long ?? name`, so a screen reader is
+   * never handed an abbreviation that exists purely for the drawing.
+   */
+  readonly long?: string;
   /** Optical height. Deliberately per-mark; see the spec test. */
   readonly s: number;
   /** Optical width, for a wordmark that is not square: always `s * WIDE_RATIO`. */
@@ -123,7 +130,14 @@ export const GATES_B: readonly Gate[] = [
   { gate: 'B2', src: '/logos/runtimes/crewai.svg', name: 'CREWAI', s: 22, x: 380 },
   { gate: 'B3', src: '/logos/runtimes/mastra.svg', name: 'MASTRA', s: 16, x: 492 },
   { gate: 'B4', src: '/logos/runtimes/pydantic.svg', name: 'PYDANTIC AI', s: 21, x: 604 },
-  { gate: 'B5', src: '/logos/runtimes/microsoft.svg', name: 'MS AGENT FWK', s: 19, x: 716 },
+  {
+    gate: 'B5',
+    src: '/logos/runtimes/microsoft.svg',
+    name: 'MS AGENT FWK',
+    long: 'MICROSOFT AGENT FRAMEWORK',
+    s: 19,
+    x: 716,
+  },
   // The AWS wordmark is not square, so it is the one mark sized by width. Both
   // numbers are written literally like every other value in this table; the
   // spec checks the pair against WIDE_RATIO, and WIDE_RATIO against the file.
@@ -210,6 +224,6 @@ export const PLANE_PATH = 'M4 34.5 58 6 40 58l-11.5-16.5L36 22 20 37.5z';
 
 export const EYEBROW = 'AIRPORT DIAGRAM';
 export const HEADLINE = 'Every stack has a gate.';
-export const CHART_ID = ['THREADPLANE INTL  (TPL)', 'ANGULAR · LANGGRAPH & AG-UI'] as const;
+export const CHART_ID = ['THREADPLANE INTL (TPL)', 'ANGULAR · LANGGRAPH & AG-UI'] as const;
 export const DISCLAIMER =
   'Compatibility, not endorsement — no company here is claimed as a customer.';

apps/website/src/styles/landing.css

@@ -2096,7 +2096,8 @@
 }
 .ap-apron {
   fill: none;
-  stroke: rgba(10, 10, 10, 0.3);
+  stroke: var(--color-ink);
+  stroke-opacity: 0.3;
   stroke-width: 1;
   stroke-dasharray: 3 4;
 }
@@ -2123,7 +2124,8 @@
   font-size: 8px;
   font-weight: 700;
   letter-spacing: 0.14em;
-  fill: rgba(255, 175, 0, 0.66);
+  fill: var(--color-signal);
+  fill-opacity: 0.66;
 }
 .ap-conc {
   fill: url(#ap-hatch);
@@ -2151,7 +2153,8 @@
   font-size: 8px;
   font-weight: 700;
   letter-spacing: 0.06em;
-  fill: rgba(10, 10, 10, 0.78);
+  fill: var(--color-ink);
+  fill-opacity: 0.78;
   paint-order: stroke;
   stroke: var(--color-signal);
   stroke-width: 3px;
@@ -2178,7 +2181,8 @@
   font-size: 8.5px;
   font-weight: 700;
   letter-spacing: 1px;
-  fill: rgba(10, 10, 10, 0.74);
+  fill: var(--color-ink);
+  fill-opacity: 0.74;
 }
 
 /* Margin */
@@ -2239,14 +2243,15 @@
   margin: 0;
 }
 
-/* Phone form: the same gates as an HTML list, driven by the same data.
+/* Narrow form: the same gates as an HTML list, driven by the same data.
  * The plate is hidden here instead of scrolled sideways — the .arch-stack
  * precedent from the architecture diagram.
  *
  * VISUALLY hidden on desktop, never `display: none`. The plate is
  * aria-hidden, and the five provider names exist ONLY in this list, so
  * display:none would leave the whole band with no accessible content on
- * desktop. Same idiom as .stage-skip above. */
+ * desktop. Same idiom as .stage-skip above, and pinned by a style contract
+ * in style-contracts.spec.ts because nothing else can see it break. */
 .airport-stack {
   position: absolute;
   width: 1px;
@@ -2256,7 +2261,13 @@
   clip-path: inset(50%);
   white-space: nowrap;
 }
-@media (max-width: 767px) {
+/* 1023px, not the 767px this band's siblings use. `.ap-svg` is width:100%, so
+ * the 1000-unit plate scales with its container: at a 768px viewport that
+ * container is ~707px and the plate renders at 0.71, putting callsigns at 6.0px
+ * and gate ids at 5.3px. Everything from 768 to ~1000px was a chart nobody
+ * could read. A min-width plus a scrolling container is the other way out and
+ * the spec rules it out for this band, so tablets get the list. */
+@media (max-width: 1023px) {
   .airport-figure {
     display: none;
   }

apps/website/src/styles/style-contracts.spec.ts

@@ -470,6 +470,48 @@ describe('style contracts', () => {
     });
   });
 
+  /**
+   * The compatibility band's accessibility rests entirely on one CSS idiom,
+   * and nothing else in the repo can see it break. The plate is
+   * `aria-hidden="true"`, so `.airport-stack` is the section's only accessible
+   * content — and the five model-provider names and the "never talks to them"
+   * claim exist nowhere else in the DOM. Switch the desktop rule to
+   * `display: none` and every unit test and every e2e case stays green while a
+   * screen reader hears an empty section. A review of this band already caught
+   * exactly that once.
+   */
+  describe('landing.css airport stack is hidden visually, never removed', () => {
+    const css = loadStylesheet('landing.css');
+    const desktop = baseDeclarationsFor(css, '.airport-stack');
+    const narrow = mediaBlock(css, '(max-width: 1023px)');
+
+    it('hides the desktop stack with the clip-path idiom', () => {
+      // Asserted positively first so the `not.toMatch` below cannot pass
+      // against an empty string if the rule is ever renamed away.
+      expect(desktop, '.airport-stack has no rule outside a media query').not.toBe('');
+      expect(desktop).toMatch(/position:\s*absolute/);
+      expect(desktop).toMatch(/clip-path:\s*inset\(50%\)/);
+      expect(desktop).toMatch(/width:\s*1px/);
+    });
+
+    it('never takes the stack out of the accessibility tree', () => {
+      expect(desktop).not.toMatch(/display:\s*none/);
+      expect(desktop).not.toMatch(/visibility:\s*hidden/);
+    });
+
+    /**
+     * The plate and the stack must swap at the same width, or one viewport
+     * band gets both or neither. 1023px rather than the usual 767px is
+     * measured: `.ap-svg` is `width: 100%`, so at 768px the 1000-unit plate
+     * renders at ~0.71 and its callsigns land at 6px.
+     */
+    it('swaps the plate for the stack at one breakpoint', () => {
+      expect(declarationsFor(narrow, '.airport-figure')).toMatch(/display:\s*none/);
+      expect(declarationsFor(narrow, '.airport-stack')).toMatch(/position:\s*static/);
+      expect(declarationsFor(narrow, '.airport-stack')).toMatch(/clip-path:\s*none/);
+    });
+  });
+
   describe('landing.css stage act', () => {
     const css = loadStylesheet('landing.css');
 

docs/superpowers/specs/2026-09-08-compatibility-airport-diagram-design.md

@@ -62,7 +62,7 @@ A single SVG, `viewBox="0 0 1000 536"`.
   The frame does **not** rotate.
 - **Airfield group rotated −3.5°** about `(500, 230)`. Nothing on a real plate is
   axis-aligned, and this is the single cheapest signal that it is a chart rather
-  than a flowchart. Extents are held to x 44–944, y 58–419 so no rotated corner
+  than a flowchart. Extents are held to x 56–944, y 58–419 so no rotated corner
   crosses the neat line.
 - **Runways** 09L-27R (y 58, h 11) and 09R-27L (y 408, h 11): solid ink bars with
   knocked-out yellow designators.
@@ -93,7 +93,12 @@ else's, ink is ours.**
 | B3 | `/logos/runtimes/mastra.svg` | MASTRA | 16 |
 | B4 | `/logos/runtimes/pydantic.svg` | PYDANTIC AI | 21 |
 | B5 | `/logos/runtimes/microsoft.svg` | MS AGENT FWK | 19 |
-| B6 | `/logos/providers/bedrock.svg` | AWS STRANDS | 12 × 30 |
+| B6 | `/logos/providers/bedrock.svg` | AWS STRANDS | 12 × 20 |
+
+`MS AGENT FWK` is an abbreviation the 38px stand forces. It is the plate's
+label only: `Gate.long` carries `MICROSOFT AGENT FRAMEWORK` and the HTML stack
+renders `long ?? name`, so the phone list and every screen reader get the whole
+name — the one the band this replaced used.
 
 **Sizes are per-mark and non-negotiable.** One shared `height` reads wrong: Mastra
 is wide and heavy, Anthropic is a narrow wedge, Microsoft is a dense square. These
@@ -142,11 +147,19 @@ this problem shape.
 - **`src/styles/landing.css`** — the `.compatibility-*` block (currently ~lines
   2007–2075) is replaced.
 
-## 4. Mobile
+## 4. Narrow viewports
+
+Copies the `arch-stack` precedent, but at `@media (max-width: 1023px)` rather
+than the usual 767px: the SVG figure is hidden and an HTML gate list is shown,
+grouped by concourse, driven by the same exported gate table. Never a sideways
+scroll.
 
-Copies the `arch-stack` precedent verbatim: at `@media (max-width: 767px)` the
-SVG figure is hidden and an HTML gate list is shown, grouped by concourse, driven
-by the same exported gate table. Never a sideways scroll.
+The wider breakpoint is measured, not a preference. `.ap-svg` is `width: 100%`,
+so the 1000-unit plate scales with its container: at a 768px viewport the
+container is ~707px and the plate renders at 0.71, putting callsigns at 6.0px and
+gate ids at 5.3px. Everything between 768 and ~1000px is a chart nobody can read,
+so tablets get the list instead. A `min-width` plus a scrolling container is
+ruled out above.
 
 A seven-stand rotated airfield has no 390px form. This is a real share of the
 work, not a detail.
@@ -190,5 +203,9 @@ items and one accessible-named list per group — none of which will exist.
   in today's homepage set, and there is no mark for it. Today's set is kept.
 - **The band gets taller** than the 634px it replaces, and sits directly above
   `EnterpriseArchitecture` — two large technical figures back to back. Accepted.
+- **`TPL` is a real assigned IATA code** (Draughon-Miller Central Texas
+  Regional, Temple, TX), borrowed for the fictional `THREADPLANE INTL` because
+  the initials fit; it is recorded here rather than left to be discovered, the
+  same way `AL-0059` was.
 - **The control tower symbol is not built.** It was drawn and offered (T2); T1
   was chosen. Available if the plate later reads as under-furnished.