Finish the affordance rule, and lift the client page's first exhibit

Two gaps the last pass left, found by measuring every route rather than
assuming the sweep had covered them.

THE AFFORDANCE RULE WAS INCOMPLETE on the one page that promises interaction.
`/dashboard` is the door card labelled "Explore it / Interactive", and its range
slider (the fuel and FX shock, the most interactive control in the project)
reported `cursor: default`. Gotcha 73's rule named `button, summary, [role=tab],
[role=button]` and stopped there.

Recharts marks are worse, because they are raw SVG and inherit nothing from an
element selector. Clicking a bar on the dashboard filters every other exhibit on
the page, which makes it the most useful and least discoverable interaction
here; 24 clickable shapes reported a mix of pointer and default because Recharts
sets it inconsistently. `.clickable-marks` goes on the series and cascades, and
the test now counts onClick series against marked ones so the next chart cannot
quietly ship inert.

Verified: slider pointer, all 24 marked shapes pointer. Bars still reporting
default belong to series with no onClick, which is correct.

THE CLIENT PAGE led with a scope note instead of evidence. `unit_spread` (RASK
4.99 against CASK 5.00, inverted, and the sharpest number in the project) sat
below an 88-word paragraph explaining what the page is not. The exhibit is now
directly under the headline figures it explains, the scope note follows the
evidence rather than blocking it, and it is a two-column is/is-not list because
the point of it is what is ABSENT and absence reads faster from a list.

First visual moved from 30% to 19% of page height, which is 0.64 screens at the
viewport a reader actually uses.

Both audit metrics were also wrong, and gotcha 77 records why. `main p` counts
paragraphs inside hidden exhibit tab panels, which is exactly where this project
puts detail: /company measured 18 paragraphs over 40 words and has ONE once
hidden and in-panel prose is excluded. And "first visual as a percentage of page
height" falls when a page gets longer, which is the opposite of an improvement.
The same layout read 30%, 21% and 19% across three viewports. Measure in screens.

/dashboard framing, whose first chart sits 40% down a short page, is deliberately
left: the page is arranged awkwardly rather than broken, and the slider was the
part that was actually broken.

204 tests, unchanged. Gotchas 77 and 78.

Author: DogInfantry

CLAUDE.md

@@ -678,6 +678,22 @@ Every one of these cost real time or produced a wrong published number.
     branches where failures outnumber passes is two. Neither is three. The rule that yields
     three is `fails > 0 && fails >= holds`, and it is now computed and rendered rather than
     typed, the way `web/app/methodology` renders `pivots.length`.
+77. **Two ways the "wall of text" audit measures itself wrong, and both were used here.**
+    First, `document.querySelectorAll('main p')` counts paragraphs inside exhibit TAB PANELS,
+    which are `hidden` and are exactly where this project intends detail to live. `/company`
+    measured 18 paragraphs over 40 words; filtering to visible, non-tabpanel prose it was
+    **one**. Filter with `getBoundingClientRect()` and `closest('[role="tabpanel"]')`.
+    Second, **"first visual as a percentage of page height" is not a reading experience**: it
+    falls when the page gets longer, which is the opposite of an improvement. Measure it in
+    SCREENS from the top, and measure at the viewport a reader actually uses. The same
+    `/company` figure read 30%, 21% and 19% across three viewports while the layout was
+    identical, and the honest number was 0.64 screens.
+78. **Recharts marks inherit no cursor from element selectors, because they are raw SVG.**
+    A `<Bar onClick=...>` is clickable and looks inert, and on the dashboard clicking a bar
+    filters every other exhibit, so it is the most useful and least discoverable interaction
+    in the project. `.clickable-marks` on the series cascades to the shapes; a test counts
+    `onClick` series against marked ones. Gotcha 73 covered `button` and missed both this and
+    `input[type="range"]`, which is the one slider on the site.
 40. **The `.recon` table class sets `white-space: nowrap` on mobile.** Any new table reusing it
     for prose cells explodes horizontally: the option tables hit 1300px on a 335px screen. The
     `.options` class overrides it.

tests/test_delivery.py

@@ -365,8 +365,39 @@ def test_interactive_elements_keep_a_pointer_cursor():
     css = (Path(__file__).resolve().parent.parent / "web" / "app" / "globals.css").read_text(
         encoding="utf-8"
     )
-    block = re.search(r"button,\s*summary,\s*\[role=\"tab\"\],\s*\[role=\"button\"\]\s*\{[^}]*\}", css)
+    block = re.search(r"button,\s*summary,[^{]*\{[^}]*\}", css)
     assert block and "cursor: pointer" in block.group(0), (
-        "globals.css no longer gives buttons, summaries and tabs a pointer cursor. "
+        "globals.css no longer gives interactive elements a pointer cursor. "
         "See gotcha 73."
     )
+
+    # The first version of this rule covered buttons and tabs and missed the one
+    # control on the site that is a slider: the fuel and FX shock on the
+    # dashboard, which reported `cursor: default` while being the most
+    # interactive thing in the project. Every control type the app actually uses
+    # is named here so the next one added is a failing test rather than a dead
+    # -feeling widget nobody notices.
+    selector = block.group(0)
+    for control in ('input[type="range"]', "select", "label"):
+        assert control in selector, (
+            f"{control} is not covered by the interactive cursor rule. "
+            "A control that does not change the cursor reads as decoration."
+        )
+
+    # Recharts draws marks as raw SVG, so a series with an onClick inherits
+    # nothing from element selectors.
+    assert ".clickable-marks" in css, (
+        "the .clickable-marks rule is gone, so Recharts series with an onClick "
+        "handler no longer signal that they are clickable"
+    )
+
+    dashboard = (
+        Path(__file__).resolve().parent.parent / "web" / "app" / "dashboard" / "page.tsx"
+    ).read_text(encoding="utf-8")
+    series_with_click = dashboard.count("onClick={(d) =>")
+    marked = dashboard.count('className="clickable-marks"')
+    assert marked >= series_with_click, (
+        f"{series_with_click} chart series take a click but only {marked} are marked "
+        "`clickable-marks`. Clicking a bar filters every exhibit on the page, which "
+        "is worth nothing if the reader cannot tell it is clickable."
+    )

web/app/company/page.tsx

@@ -63,9 +63,8 @@ export default function Company() {
           IndiGo is buying long-haul capacity from a position with no margin cushion
         </h1>
         <p className="mt-5 text-[17px] leading-relaxed text-ink/75">
-          {brief.decision} The rest of this case argues about where those aircraft should fly.
-          This page is about the business that has to carry them, and its central fact is that in{" "}
-          {spread.year} unit cost sat above unit revenue.
+          The rest of this case argues where the aircraft should fly. This page is the business
+          that has to carry them, and its central fact is one number.
         </p>
       </header>
 
@@ -85,21 +84,47 @@ export default function Company() {
         ))}
       </section>
 
-      {/* Scope, stated rather than left for a reader to discover by absence. */}
-      <section className="mt-12 border-l-2 border-ink bg-wash py-5 pl-5 pr-4">
+      {/* The hero exhibit, directly under the numbers it explains. It used to sit
+          below the scope box, which put the page's first visual 30% of the way
+          down: the same defect the answer page had, on the page a reader reaches
+          second. The scope note matters and is now BELOW the evidence rather than
+          in front of it. */}
+      <section aria-label="The spread" className="mt-14">
+        <h2 className="max-w-[34ch] font-serif text-[clamp(1.4rem,2.6vw,2rem)] font-semibold">
+          Unit cost sat above unit revenue in {spread.year}
+        </h2>
+        <div className="mt-8">
+          <RegisteredExhibit id="unit_spread" />
+        </div>
+      </section>
+
+      {/* Scope, stated rather than left for a reader to discover by absence.
+          It was one 88-word paragraph and is now a list, because the point of it
+          is what is absent, and absence is read from a list far faster than from
+          a sentence. */}
+      <section className="mt-16 border-l-2 border-ink bg-wash py-5 pl-5 pr-4">
         <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-grey">
           What this page is, and is not
         </p>
-        <p className="mt-3 max-w-[74ch] text-[14.5px] leading-relaxed">
-          A profit and loss, unit economics and capital scale view, built entirely from figures
-          IndiGo has published and this project has verified against the primary document.{" "}
-          <strong>
-            There is no balance sheet, no return on invested capital, no cost of capital and no
-            financing plan.
-          </strong>{" "}
-          Not because they would be uninteresting, but because none of the inputs has cleared this
-          project&rsquo;s assumption gate, and a page that mixes verified figures with plausible
-          ones is worse than a page that stops. {brief.not_this}
+        <div className="mt-4 grid gap-x-10 gap-y-4 sm:grid-cols-2">
+          <div>
+            <p className="text-[13px] font-semibold">It is</p>
+            <p className="mt-1 text-[14px] leading-relaxed text-ink/75">
+              Profit and loss, unit economics and capital scale, every figure verified against
+              IndiGo&rsquo;s own primary filings.
+            </p>
+          </div>
+          <div>
+            <p className="text-[13px] font-semibold text-red">It is not</p>
+            <p className="mt-1 text-[14px] leading-relaxed text-ink/75">
+              A balance sheet, a return on invested capital, a cost of capital or a financing
+              plan. None of those inputs clears the assumption gate.
+            </p>
+          </div>
+        </div>
+        <p className="mt-4 max-w-[74ch] text-[13px] leading-relaxed text-grey">
+          A page that mixes verified figures with plausible ones is worse than a page that
+          stops. {brief.not_this}
         </p>
       </section>
 
@@ -109,12 +134,10 @@ export default function Company() {
             Can it earn?
           </h2>
           <p className="mt-3 max-w-[68ch] text-[15px] leading-relaxed text-ink/75">
-            The first branch of the driver tree, and the one that fails. Unit revenue minus unit
-            cost times capacity is the whole profit identity for an airline, and the first term is
-            negative.
+            The first branch of the driver tree, and the one that fails. The spread above is the
+            first term of the profit identity; these two say why it moved.
           </p>
           <div className="mt-10 space-y-16">
-            <RegisteredExhibit id="unit_spread" />
             <RegisteredExhibit id="margin_ladder" />
             <RegisteredExhibit id="cost_stack" />
           </div>

web/app/dashboard/page.tsx

@@ -196,7 +196,12 @@ export default function Dashboard() {
                   {...TOOLTIP}
                   formatter={(v, n) => `${Number(v).toFixed(1)}% of ${n === "share_pct" ? "passengers" : "revenue"}`}
                 />
-                <Bar dataKey="share_pct" isAnimationActive={false} onClick={(d) => toggle((d as unknown as { region: string }).region)}>
+                <Bar
+                  dataKey="share_pct"
+                  isAnimationActive={false}
+                  className="clickable-marks"
+                  onClick={(d) => toggle((d as unknown as { region: string }).region)}
+                >
                   {shown.map((c) => (
                     <Cell key={c.region} fill={fill(c.region)} cursor="pointer" />
                   ))}
@@ -231,6 +236,7 @@ export default function Dashboard() {
                 <Scatter
                   data={economicCorridors.filter((c) => isOn(c.region))}
                   isAnimationActive={false}
+                  className="clickable-marks"
                   onClick={(d) => toggle((d as unknown as { region: string }).region)}
                 >
                   {economicCorridors
@@ -285,7 +291,12 @@ export default function Dashboard() {
                 <XAxis dataKey="region" {...AXIS} interval={0} angle={-25} textAnchor="end" height={64} />
                 <YAxis {...AXIS} width={48} unit="kg" />
                 <Tooltip {...TOOLTIP} formatter={(v) => `${Number(v).toFixed(1)} kg per passenger`} />
-                <Bar dataKey="kg_per_pax" isAnimationActive={false} onClick={(d) => toggle((d as unknown as { region: string }).region)}>
+                <Bar
+                  dataKey="kg_per_pax"
+                  isAnimationActive={false}
+                  className="clickable-marks"
+                  onClick={(d) => toggle((d as unknown as { region: string }).region)}
+                >
                   {shown
                     .filter((c) => c.kg_per_pax !== null)
                     .map((c) => (

web/app/globals.css

@@ -72,11 +72,27 @@ h3 {
 @layer base {
   button,
   summary,
+  label,
+  select,
+  input[type="range"],
+  input[type="checkbox"],
+  input[type="radio"],
   [role="tab"],
   [role="button"] {
     cursor: pointer;
   }
 
+  /* Recharts draws its marks as raw SVG, so a bar with an `onClick` inherits
+     nothing from the rules above. On the dashboard, clicking a bar filters every
+     other exhibit on the page, which is the most useful interaction in the whole
+     project and the least discoverable: 24 clickable bars reported a mix of
+     `pointer` and `default` because Recharts sets it inconsistently. The class
+     goes on the series and cascades to the shapes it renders. */
+  .clickable-marks,
+  .clickable-marks * {
+    cursor: pointer;
+  }
+
   a {
     color: inherit;
     text-decoration: underline;