Run the two checks the audit had and never used

runAll() did not include the contrast check — it simply wasn't in the list — and
touch targets sat behind an opt-in flag nothing passed. So "the audit is clean"
has meant nine checks rather than eleven for a long run of rounds, and the two
left out are the two whose faults a dealer meets in a dim room with their thumb.
Both were written, tested, and then never called; the contrast checker was built
across two rounds and every sweep since has been silent about colour.

The standalone runner had a second version of the same hole: the 44px rule
stands itself down where `hover: hover` says there's a pointer, and a headless
desktop browser is a pointer, so a single pass had never measured a touch target
at any viewport. It now runs every viewport twice, once with a mouse and once
with a thumb.

A check that decides it doesn't apply now says so, rather than reporting an empty
offenders list — which reads exactly like a pass.

Faded text is measured instead of filed as unchecked. `opacity` on a box fades
the box and its text together onto whatever is behind it, so a dimmed seat is not
grey text on a dark puck: it is a faded puck and faded text both landing on the
page. Both halves are composited that way now. Two exemptions remain and both say
so out loud: a disabled control, which WCAG itself excuses, and a link inside a
sentence, whose size is set by the line it sits in.

What running them found, and this round fixes:

  - the chair number on every seat: #8a8a8a at 9px, 3.39:1 once the empty seat's
    fade is composited, on the label that answers "which seat is that?";
  - Quick Split's amount field at 37px tall and its delete button at 30px across,
    on a page whose targets had never been measured;
  - and on a 360x640 phone with the bar grown by a side pot, the bottom seat
    sitting 38px inside it.

That last one brings back a cap this project measured and rejected once: capping
the felt to the room left fixed the six-seat ring and broke the nine-seat one.
That trade was real then and isn't now — seats are spaced by distance around the
rim rather than by angle, so a shorter felt no longer piles them up. Re-measured
across 30 combinations of five phone sizes and 2 to 12 seats: every one clean
except twelve seats at 360x640, where a 240px felt and a 64px puck cannot both be
true. Where the rim can't give each seat a puck's width, the pucks come down a
size, measured from the rim itself rather than from a media query.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -208,6 +208,7 @@
         <button class="dealerChip" type="button" title="Make this seat the dealer button">D</button>
         <span class="blindBadge sbBadge">SB</span>
         <span class="blindBadge bbBadge">BB</span>
+        <span class="blindBadge strBadge" title="Straddled — the action comes back to this seat">STR</span>
         <div class="seatPuckName"></div>
         <div class="seatPuckCards"></div>
         <div class="seatPuckTotal"></div>
@@ -360,6 +361,23 @@
             </p>
         </section>
 
+        <section class="ruling" data-short="Straddle">
+            <h3>A straddle is a blind raise</h3>
+            <p>
+                The player left of the big blind may put out twice it before the cards,
+                without looking. It is a blind bet, not a raise made in turn, so it does
+                three things at once: everyone else acts first, the minimum raise becomes
+                twice the straddle, and the straddler still has the option when the
+                action comes back — they may raise even if nobody raised into them.
+            </p>
+            <p>
+                Re-straddles carry on to the left, each doubling again, and stop before
+                the small blind. Tap <em>Straddle</em> on the deal prompt and the tool
+                posts it, puts the right player on the clock and prices the raise;
+                the seat wears an <em>STR</em> badge for the hand.
+            </p>
+        </section>
+
         <section class="ruling" data-short="Short all-in">
             <h3>A short all-in doesn't reopen the betting</h3>
             <p>

JoshHeaps.Net/wwwroot/css/casino/holdem.css

@@ -586,12 +586,16 @@ button,
     box-shadow: 0 0 0 2px rgba(9, 255, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
 }
 
+/* The chair number is 9px, and on an empty seat it is 9px behind a 0.7 fade: #8a8a8a
+   came out at 3.39:1 once the fade was composited, for the label a dealer reads to
+   answer "which seat is seat 6?". Lifted until it passes with a little to spare —
+   measured 4.5:1 at #a5a5a5 exactly, so it sits above that. */
 .seatChairNumber {
     position: absolute;
     top: 2px;
     left: 6px;
     font-size: 0.58rem;
-    color: #8a8a8a;
+    color: #aeaeae;
 }
 
 .seatPuckName {
@@ -796,6 +800,19 @@ button,
     color: #241a05;
 }
 
+/* The straddle. It takes the big blind's slot on the puck, which is free by
+   construction: the chain starts left of the big blind and stops short of the small
+   one, so no seat ever wears two of these.
+
+   Violet rather than a third shade of gold or blue, because the badge a dealer is
+   looking for mid-hand is the one telling them where the action comes back to.
+   Dark text on the light end of the ramp, measured 5.76:1 against the darker stop. */
+.strBadge {
+    left: 22px;
+    background: linear-gradient(180deg, #cbaaf0, #a97fd6);
+    color: #1b1030;
+}
+
 /* A blind the dealer named by hand rather than one the button handed out. Without
    the ring the table just looks like it's put the blinds in the wrong place. */
 .blindBadge.blindManual {
@@ -2893,14 +2910,45 @@ body.hasActionBar #toastHost {
 }
 
 @media (max-width: 700px) {
-    /* The narrow layout already had an answer for the bar: it reserves the bar's height
-       as scroll room below the table, and a phone is a thing you scroll. Capping the
-       felt here as well was measured and rejected — at 360x640 it took the table from
-       321px to 226px, which fixed the six-seat ring but broke the nine-seat one, two
-       covered seats traded for two seats whose centre landed on a neighbour. The cap is
-       for the wide layout, which never consulted the bar's height at all. */
+    /* The cap lives here now, and the reason it didn't is worth keeping.
+
+       It was measured and rejected once: at 360x640 it took the table from 321px to
+       226px, which fixed the six-seat ring but broke the nine-seat one — two covered
+       seats traded for two seats whose centre landed on a neighbour. The narrow layout
+       fell back on reserving the bar's height as scroll room, on the grounds that a
+       phone is a thing you scroll.
+
+       That trade was real then and isn't now: seats are spaced by distance around the
+       rim rather than by angle, so a shorter felt no longer piles them up. Re-measured
+       at 360x640 with the bar grown by a side pot, where the bottom seat sat 38px
+       inside it: capped, the felt is 240px and the ring clears the bar by 50, with the
+       audit clean at 6, 9 and 10 seats. Scroll room is not an answer for a seat that is
+       covered rather than merely below the fold. */
     #pokerTableWrap {
-        max-width: none;
+        max-width: calc(var(--feltRoomPx, 100vh) / var(--feltAspect));
+    }
+
+    /* A felt small enough that the rim can't give each seat its own puck width. Set
+       from the measured rim in render.js rather than from the window, because the
+       question is how much table there is per player, which no media query can see:
+       nine seats on a 240px felt get 72px of rim each and the puck is 76 across. */
+    .seatsTight .seat {
+        width: 58px;
+        min-height: 38px;
+        padding: 3px 4px;
+    }
+
+    .seatsTight .seatPuckName {
+        margin-top: 0.35rem;
+        font-size: 0.62rem;
+    }
+
+    .seatsTight .seatPuckStack {
+        font-size: 0.55rem;
+    }
+
+    .seatsTight .seatPuckCards {
+        font-size: 0.58rem;
     }
 
     /* Stacked, with the action that ends the hand furthest from a stray thumb. */
@@ -3520,6 +3568,38 @@ textarea:focus-visible {
     font-weight: 600;
 }
 
+/* The straddle rides on the deal row, so it must not take half of it: .actionBtn is
+   flex: 1 and would have split the row evenly with the button the dealer presses every
+   hand. It sizes to its own words instead, and stays quiet next to the green one —
+   choosing a straddle is the exception, dealing is the rule. */
+.actionBtn.actionStraddle {
+    flex: 0 1 auto;
+    background: linear-gradient(180deg, #33304a, #24223a);
+    border-color: #4b4770;
+    color: #e6e1ff;
+    font-size: 0.82rem;
+    padding-left: 0.7rem;
+    padding-right: 0.7rem;
+}
+
+.actionBtn.actionStraddleOff {
+    background: linear-gradient(180deg, #2e2e2e, #232323);
+    border-color: #4a4a4a;
+    color: #dcdcdc;
+}
+
+/* Three buttons across a 360px phone is a squeeze, and the two ways out are both
+   worse than this one. Letting the row wrap put the deal button on its own line and
+   made the bar 64px taller — measured at 360x640, that is the bottom seat three fifths
+   behind the bar, and this layout deliberately doesn't shrink the felt to suit (see the
+   max-width: none override, where capping it was tried and rejected). Letting flex
+   squash freely took the deal button to 84px with its label over three lines.
+   A floor of 7rem keeps the label to two lines and the row to one, so arming a straddle
+   costs no felt at all. */
+.dealPromptButtons .actionDeal {
+    min-width: 7rem;
+}
+
 /* The quieter half of the deal prompt: things the deal is about to do that a dealer
    would otherwise only discover afterwards. */
 .dealPromptLine.dealPromptAside {

JoshHeaps.Net/wwwroot/css/casino/quicksplit.css

@@ -148,9 +148,13 @@ button,
     color: #8f8f8f;
 }
 
+/* 37px tall, on the field a dealer types every amount into. The touch rule has been
+   44px everywhere else since the round that set it; this page never got measured for
+   it, because the audit only ran the target check when asked and nothing asked. */
 .unevenAmount {
     flex: 1;
     min-width: 0;
+    min-height: 46px;
     background: none;
     border: none;
     outline: none;
@@ -180,10 +184,12 @@ button,
     color: #ffd6d6;
 }
 
+/* 30px across, and it deletes a player's entry — the one control on the row where a
+   near miss costs something. The amount field beside it gives up the 16px. */
 .unevenRemoveBtn {
     flex: none;
-    width: 30px;
-    height: 44px;
+    width: 46px;
+    height: 46px;
     border: none;
     background: none;
     /* Was #6a6a6a — 3.66:1, the worst on the page, on a control that deletes a

JoshHeaps.Net/wwwroot/js/casino/holdem/actionBar.js

@@ -89,6 +89,10 @@ const ActionBar = {
         document.documentElement.style.setProperty(
             "--feltRoomPx",
             `${this.feltRoomFor(window.innerHeight, barHeight, topInDocument)}px`);
+        // The felt has just changed size, so how much rim each seat gets has changed
+        // with it. Told rather than left to be noticed on the next render, which on a
+        // bar that grew mid-hand could be several actions away.
+        if (typeof Render !== "undefined" && Render.updateSeatDensity) Render.updateSeatDensity();
     },
 
     // Anything to act on? A hand with nobody dealt in doesn't get a bar — and that
@@ -592,6 +596,43 @@ const ActionBar = {
     // by itself the instant the previous hand ended, which meant blinds were committed
     // while people were still sitting down — and the blind badges would drift away from
     // the money already posted as seats changed. Now the dealer says when.
+    // ", Dee straddles $4" — read out as part of what goes in before the cards, because
+    // that is what it is. Two of them read as "Dee straddles $4, Eve $8": the second
+    // name doesn't need the verb again, and the bar has no room for it.
+    straddleClause(preview) {
+        const straddles = preview.straddles || [];
+        if (straddles.length === 0) return "";
+        const name = i => HoldemState.displayName(this.state.seats[i], i);
+        const [first, ...rest] = straddles;
+        return `, ${name(first.index)} straddles ${Money.format(first.amount)}` +
+            rest.map(s => `, ${name(s.index)} ${Money.format(s.amount)}`).join("");
+    },
+
+    // Turning it on, doubling it, and calling it off. Heads-up there is no seat left of
+    // the big blind to straddle from, so nothing is offered rather than a button that
+    // would do nothing.
+    straddleButtons(preview) {
+        const on = (preview.straddles || []).length;
+        const max = preview.maxStraddles || 0;
+        if (max <= 0) return [];
+
+        const buttons = [];
+        const nextAmount = Money.format(this.state.bigBlind * Math.pow(2, on + 1));
+        if (on < max) {
+            buttons.push(this.button(
+                on === 0 ? `Straddle ${nextAmount}` : `Re-straddle ${nextAmount}`,
+                "actionStraddle",
+                () => this.commit(on === 0 ? "the straddle" : "the re-straddle",
+                    () => { this.state.straddleCount = on + 1; })));
+        }
+        if (on > 0) {
+            buttons.push(this.button("No straddle", "actionStraddle actionStraddleOff",
+                () => this.commit("calling the straddle off",
+                    () => { this.state.straddleCount = 0; })));
+        }
+        return buttons;
+    },
+
     renderDealPrompt() {
         const wrap = document.createElement("div");
         wrap.className = "dealPrompt";
@@ -689,11 +730,14 @@ const ActionBar = {
         // A dead small blind is a hand with only one blind in it. Saying "nobody posts
         // the small blind" out loud is the whole point — a dealer who reads a preview
         // with a blind missing and isn't told why will assume the tool has lost track.
-        line.textContent = preview.deadSmallBlind
+        const blinds = document.createElement("span");
+        blinds.textContent = (preview.deadSmallBlind
             ? `No small blind this hand, ${name(preview.bbIndex)} posts ${Money.format(preview.bigBlind)}`
             : `${name(preview.sbIndex)} posts ${Money.format(preview.smallBlind)}, ` +
-              `${name(preview.bbIndex)} posts ${Money.format(preview.bigBlind)}` +
-              `${preview.headsUp ? " · heads-up" : ""}${preview.manual ? " · blinds set by hand" : ""}`;
+              `${name(preview.bbIndex)} posts ${Money.format(preview.bigBlind)}`) +
+            this.straddleClause(preview) +
+            `${preview.headsUp ? " · heads-up" : ""}${preview.manual ? " · blinds set by hand" : ""}`;
+        line.appendChild(blinds);
         wrap.appendChild(line);
 
         // Why a position is missing. Both of these are the dead button rule doing its
@@ -767,7 +811,12 @@ const ActionBar = {
         }
 
         const row = document.createElement("div");
-        row.className = "actionButtons";
+        row.className = "actionButtons dealPromptButtons";
+        // Beside the deal button rather than on a line of its own. Measured at 390x844:
+        // its own line cost 44px of felt on every deal prompt, straddle or no straddle,
+        // and this row is already there and already 44px tall. It reads in the order it
+        // happens, too — say the straddle, then deal.
+        this.straddleButtons(preview).forEach(button => row.appendChild(button));
         row.appendChild(this.button("Post blinds & deal", "actionDeal", () => {
             this.commit("dealing the hand", () => Betting.beginHand(this.state));
         }));

JoshHeaps.Net/wwwroot/js/casino/holdem/betting.js

@@ -93,9 +93,60 @@ const Betting = {
             satOut,
             smallBlind: this.round(state.smallBlind || 0),
             bigBlind: this.round(state.bigBlind || 0),
+            // What the straddles will be if the hand is dealt as it stands, and how
+            // many more this table could take.
+            straddles: this.straddleSeats(state),
+            maxStraddles: this.maxStraddles(state),
         };
     },
 
+    // ---- Straddles ----
+    //
+    // A straddle is a blind raise put out before the cards, by the player left of the
+    // big blind, for twice it. It buys the last word before the flop: everyone else
+    // acts first, and the straddler still has the option when it comes back round even
+    // if nobody raised. Re-straddles carry on left, each doubling again.
+    //
+    // Home games run them constantly and a dealer has to get three things right at
+    // once — the amount, who is first to act, and what the minimum raise becomes. The
+    // tool used to do none of them, so a dealer's only way through was to deal, have
+    // the straddler "raise" to $4, and hand the action to the wrong player.
+
+    // How many straddles this table could take. Everyone but the two blinds can put
+    // one out; heads-up that is nobody, which is the right answer — the button is
+    // already the small blind and there is no seat left of the big blind to straddle
+    // from.
+    maxStraddles(state) {
+        return Math.max(0, this.liveSeats(this.tableAsDealt(state)).length - 2);
+    },
+
+    // Who straddles and for how much, walking left from the big blind and doubling.
+    // Asked of the table as it will be dealt, so a seat about to be sat out for having
+    // no chips is never handed a straddle it can't post.
+    straddleSeats(state, count = state.straddleCount) {
+        const wanted = Math.min(Math.max(0, Number(count) || 0), this.maxStraddles(state));
+        if (wanted <= 0) return [];
+
+        const dealt = this.tableAsDealt(state);
+        const buttonIndex = HoldemState.buttonSeatForDeal(dealt);
+        const asDealt = buttonIndex === dealt.dealerSeatIndex
+            ? dealt
+            : { ...dealt, dealerSeatIndex: buttonIndex };
+        const { bbIndex } = HoldemState.getBlindSeats(asDealt);
+        if (bbIndex === null) return [];
+
+        const straddles = [];
+        let index = bbIndex;
+        let amount = this.round((Number(state.bigBlind) || 0) * 2);
+        for (let n = 0; n < wanted; n++) {
+            index = this.nextToAct(asDealt, index);
+            if (index === null || index === bbIndex) break;
+            straddles.push({ index, amount });
+            amount = this.round(amount * 2);
+        }
+        return straddles;
+    },
+
     // Does handing this seat chips also put them back in the game?
     //
     // At a real table those are one event, and here they were two: a busted player got
@@ -475,6 +526,7 @@ const Betting = {
             state.currentBet = 0;
             state.actingSeatIndex = null;
             state.postedBlinds = null;
+            state.postedStraddles = [];
             return;
         }
 
@@ -505,17 +557,35 @@ const Betting = {
         // from one who has just walked up and had the blinds go past them.
         state.dealtLastHand = state.seats.filter(p => p.inHand).map(p => p.id);
 
-        state.currentBet = this.round(Math.max(
-            sbIndex === null ? 0 : this.committed(state.seats[sbIndex]),
-            this.committed(state.seats[bbIndex])));
-        state.lastRaiseSize = bb || 0;
+        // Straddles go out after the blinds and before the cards, each one left of the
+        // last. Posted here rather than left to the dealer to fake as a raise, because
+        // a raise from that seat would hand the action to the wrong player.
+        const straddles = this.straddleSeats(state);
+        straddles.forEach(({ index, amount }) => this.putIn(state, index, amount));
+        state.postedStraddles = straddles.map(({ index }) => index);
+
+        state.currentBet = this.round(state.seats.reduce(
+            (most, player) => Math.max(most, this.committed(player)), 0));
+        // A straddle is a blind raise, so what has to be matched to raise again is the
+        // straddle itself, not the big blind underneath it: $2 blinds with a $4
+        // straddle make the next raise $8, the same way the $2 blind makes it $4.
+        // Left alone, the minimum would come out at $6 and the dealer would be talked
+        // out of it by every player at the table.
+        state.lastRaiseSize = straddles.length > 0 ? state.currentBet : (bb || 0);
 
         // Heads-up the button is the small blind and acts first before the flop; with
         // three or more it's the seat after the big blind. Either way, a blind big
         // enough to put that player all-in leaves them nothing to decide.
+        //
+        // A straddle moves that seat along: first to act is left of the last straddler,
+        // and the straddler keeps the option, which falls out of nobody having acted
+        // yet.
+        const lastPosted = straddles.length > 0
+            ? straddles[straddles.length - 1].index
+            : bbIndex;
         state.actingSeatIndex = headsUp
             ? (this.stackOf(state, state.seats[sbIndex]) > this.EPSILON_CHIPS ? sbIndex : this.nextToAct(state, sbIndex))
-            : this.nextToAct(state, bbIndex);
+            : this.nextToAct(state, lastPosted);
     },
 
     // What a pot-sized raise actually is, as a "raise to" total.

JoshHeaps.Net/wwwroot/js/casino/holdem/render.js

@@ -137,6 +137,34 @@ const Render = {
     RING_STEPS: 720,
     ringCache: {},
 
+    // How much rim each seat gets, in pixels. Ramanujan's approximation for an
+    // ellipse's perimeter, which is well inside a pixel at these sizes.
+    rimPerSeat(count) {
+        const wrap = document.getElementById("pokerTableWrap");
+        if (!wrap || !count) return Infinity;
+        const box = wrap.getBoundingClientRect();
+        const a = (box.width * 44) / 100;
+        const b = (box.height * 42) / 100;
+        if (!a || !b) return Infinity;
+        const perimeter = Math.PI * (3 * (a + b) - Math.sqrt((3 * a + b) * (a + 3 * b)));
+        return perimeter / count;
+    },
+
+    // A puck is 76px across. Under about that much rim each, neighbours start covering
+    // each other's middles, and a tap meant for one player lands on the next — so the
+    // pucks come down a size rather than the table pretending it has room it hasn't.
+    SEAT_ROOM_PX: 88,
+
+    // Called on every render and again whenever the felt is resized — the action bar
+    // growing mid-hand shortens the table, and the seats have to answer that without
+    // waiting for the next render to come along.
+    updateSeatDensity() {
+        const layer = document.getElementById("seatsLayer");
+        if (!layer || !this.state) return;
+        layer.classList.toggle("seatsTight",
+            this.rimPerSeat(this.state.seatCount) < this.SEAT_ROOM_PX);
+    },
+
     // The angles that cut the rim into `count` equal lengths, starting at the top.
     // Every seat on a ring wants the same answer, so it is worked out once per shape
     // and kept — the ring only changes when the table is resized or the window is.
@@ -245,6 +273,7 @@ const Render = {
     renderSeats() {
         const layer = document.getElementById("seatsLayer");
         layer.innerHTML = "";
+        this.updateSeatDensity();
         const template = document.getElementById("seatTemplate");
         const { dealerIndex, sbIndex, bbIndex, manual: manualBlinds } = HoldemState.getBlindSeats(this.state);
         // A button on an empty chair normally means the table has drifted and wants
@@ -310,6 +339,14 @@ const Render = {
             sbBadge.classList.toggle("blindManual", !!manualBlinds && index === sbIndex);
             bbBadge.classList.toggle("blindManual", !!manualBlinds && index === bbIndex);
 
+            // A straddle is a blind too, and the seat wearing it is the one the action
+            // comes back to. Marked from what the deal actually posted rather than from
+            // the count, so the badge can't outlive the chips it stands for — before
+            // the cards there is nothing out there yet.
+            const straddleBadge = node.querySelector(".strBadge");
+            const straddled = (this.state.postedStraddles || []).includes(index);
+            straddleBadge.classList.toggle("visible", this.state.bettingOpen && straddled);
+
             this.updatePuckContent(node, player, index);
             node.classList.toggle("seatSelected", index === this.selectedSeatIndex);
 

JoshHeaps.Net/wwwroot/js/casino/holdem/state.js

@@ -100,6 +100,14 @@ const HoldemState = {
             // the big blind rather than waiting for it. Cleared every hand: it's a
             // decision about one deal, not a standing arrangement.
             postingIn: [],
+            // How many straddles are on for the hand about to be dealt. A straddle is
+            // announced hand by hand, so this is cleared with every other one-deal
+            // decision rather than standing until somebody turns it off.
+            straddleCount: 0,
+            // Which seats actually put a straddle out when the hand was dealt, so the
+            // felt can badge them. Read off the deal rather than worked out again
+            // later, the same way the posted blinds are.
+            postedStraddles: [],
             // Set when somebody leaves out of the blinds and the rotation has to hold
             // to the seats to keep the big blind moving one player at a time. The
             // button then sits on the chair they vacated, and no small blind is posted.
@@ -201,6 +209,11 @@ const HoldemState = {
             // asking the whole table to post.
             if (!Array.isArray(parsed.dealtLastHand)) parsed.dealtLastHand = [];
             if (!Array.isArray(parsed.postingIn)) parsed.postingIn = [];
+            // None on is the right reading of a save from before straddles existed:
+            // whatever is in front of those players is already in their committed
+            // chips, and nothing is owed on top of it.
+            if (!(Number(parsed.straddleCount) > 0)) parsed.straddleCount = 0;
+            if (!Array.isArray(parsed.postedStraddles)) parsed.postedStraddles = [];
 
             // A table saved before dealing and betting were separate has no flag, and
             // guessing false would show "deal the hand" over a hand already in
@@ -643,6 +656,10 @@ const HoldemState = {
         // Posting to come in is a decision about one deal. Carrying it forward would
         // charge somebody an extra big blind every hand for the rest of the night.
         state.postingIn = [];
+        // So is a straddle. It is announced hand by hand at a table, and a straddle
+        // that stayed on would take chips off somebody who never said the word.
+        state.straddleCount = 0;
+        state.postedStraddles = [];
         state.seats.forEach(p => {
             p.folded = false;
             p.cards = ["", ""];

tests/holdem/README.md

@@ -36,7 +36,22 @@ enough not to trigger iOS zoom, that nothing important is covered or off-screen
 no way to scroll to it, that no grid column has collapsed to nothing, and that no
 text is painted outside its box. It runs over the table, all five overlays and Quick
 Split, at thirteen viewports from a 360px phone to a 1600px desktop and the same
-phones on their side.
+phones on their side — each viewport twice, once with a mouse and once with a thumb.
+
+That last part, and two of those checks, are newer than this paragraph claiming them.
+`runAll()` did not include the contrast check at all, and touch targets sat behind an
+opt-in flag nothing passed, so "the audit is clean" meant nine checks rather than
+eleven for a long run of rounds. Both were written and tested and simply never called.
+The mouse/thumb pair matters for the same reason: the 44px rule stands itself down
+where `hover: hover` says there is a pointer, and a headless desktop browser is a
+pointer, so a single pass had never measured a touch target at any viewport. Between
+them they found a 9px seat label at 3.39:1, a 37px-tall amount field and a 30px delete
+button on Quick Split.
+
+A check that decides it doesn't apply says so in the output rather than reporting no
+offenders, which reads identically to a pass. The same goes for the two exemptions
+that exist: a disabled control, which WCAG itself excuses, and a link inside a
+sentence, whose size is set by the line it sits in.
 
 Deliberately not in CI: the unit suite is dependency-free and runs in a second, while
 this one needs a browser and a running site. Run it after any change that adds or

tests/holdem/auditContrast.test.js

@@ -0,0 +1,108 @@
+// The sums the contrast check runs on, tested away from a browser.
+//
+// The check itself needs a page to look at, but the arithmetic underneath it doesn't —
+// and the arithmetic is the part that decides whether a real fault is reported or
+// waved through. Faded text used to be filed as "not checked" rather than measured;
+// this is the compositing that replaced that.
+const test = require("node:test");
+const { describe } = require("node:test");
+const assert = require("node:assert");
+const LayoutAudit = require("./uiAudit");
+
+const WHITE = { r: 255, g: 255, b: 255, a: 1 };
+const BLACK = { r: 0, g: 0, b: 0, a: 1 };
+const PAGE = { r: 28, g: 28, b: 28, a: 1 };      // the felt page behind everything
+const PUCK = { r: 44, g: 44, b: 44, a: 1 };      // a seat's own background
+
+describe("the ratio itself", () => {
+    test("black on white is the full 21:1, either way round", () => {
+        assert.ok(Math.abs(LayoutAudit.contrastRatio(BLACK, WHITE) - 21) < 0.01);
+        assert.ok(Math.abs(LayoutAudit.contrastRatio(WHITE, BLACK) - 21) < 0.01);
+    });
+
+    test("a colour against itself is 1:1", () => {
+        assert.ok(Math.abs(LayoutAudit.contrastRatio(PUCK, PUCK) - 1) < 0.001);
+    });
+});
+
+describe("text on a box that is being faded", () => {
+    // opacity on a box fades the box and its text together onto whatever is behind
+    // it — so a dimmed seat is not grey text on a dark puck, it is a faded puck and
+    // faded text both landing on the page.
+    const fade = alpha => ({ alpha, behind: PAGE });
+
+    test("at full strength nothing is composited", () => {
+        const painted = LayoutAudit.asPainted(WHITE, PUCK, { alpha: 1, behind: PAGE });
+        assert.deepEqual(painted.fg, WHITE);
+        assert.deepEqual(painted.bg, PUCK);
+    });
+
+    test("fading moves both the text and its background, not just the text", () => {
+        const painted = LayoutAudit.asPainted(WHITE, PUCK, fade(0.7));
+        assert.ok(painted.fg.r < WHITE.r, "the text dims");
+        assert.ok(painted.bg.r < PUCK.r, "and so does what it sits on");
+        assert.ok(painted.bg.r > PAGE.r, "but not all the way to the page");
+    });
+
+    test("which is what stops a fade being reported as a fault it isn't", () => {
+        // Dimming light text on a dark puck over a dark page costs contrast, but far
+        // less than measuring the faded text against the *unfaded* puck would claim.
+        const honest = LayoutAudit.asPainted(WHITE, PUCK, fade(0.7));
+        const wrong = { fg: LayoutAudit.over({ ...WHITE, a: 0.7 }, PUCK), bg: PUCK };
+        assert.ok(LayoutAudit.contrastRatio(honest.fg, honest.bg) >
+            LayoutAudit.contrastRatio(wrong.fg, wrong.bg));
+    });
+
+    test("a fade all the way out lands everything on the page behind", () => {
+        const painted = LayoutAudit.asPainted(WHITE, PUCK, fade(0));
+        assert.deepEqual(painted.fg, PAGE);
+        assert.deepEqual(painted.bg, PAGE);
+    });
+
+    test("with nothing known to be behind it, the fade is left alone", () => {
+        // Better to measure the unfaded pair than to invent a backdrop.
+        const painted = LayoutAudit.asPainted(WHITE, PUCK, { alpha: 0.5, behind: null });
+        assert.deepEqual(painted.fg, WHITE);
+        assert.deepEqual(painted.bg, PUCK);
+    });
+});
+
+describe("a fade makes small grey text worse, which is the fault it went looking for", () => {
+    // Deliberately not asserting a particular CSS colour here: the page's own greys are
+    // measured in the browser, against the real gradients, where they live. What this
+    // pins is the direction — that dimming a box costs its text contrast, which is why
+    // filing faded text as "not checked" hid faults rather than avoiding false ones.
+    test("the same grey scores lower once its box is dimmed", () => {
+        const grey = LayoutAudit.parseColour("rgb(138, 138, 138)");
+        const solid = LayoutAudit.asPainted(grey, PUCK, { alpha: 1, behind: PAGE });
+        const dimmed = LayoutAudit.asPainted(grey, PUCK, { alpha: 0.7, behind: PAGE });
+        assert.ok(LayoutAudit.contrastRatio(dimmed.fg, dimmed.bg) <
+            LayoutAudit.contrastRatio(solid.fg, solid.bg));
+    });
+
+    test("and a lighter grey scores higher at the same fade", () => {
+        const at = colour => {
+            const painted = LayoutAudit.asPainted(LayoutAudit.parseColour(colour), PUCK, { alpha: 0.7, behind: PAGE });
+            return LayoutAudit.contrastRatio(painted.fg, painted.bg);
+        };
+        assert.ok(at("rgb(174, 174, 174)") > at("rgb(138, 138, 138)"));
+    });
+});
+
+describe("reading a colour off the page", () => {
+    test("rgb and rgba both come back as numbers", () => {
+        assert.deepEqual(LayoutAudit.parseColour("rgb(1, 2, 3)"), { r: 1, g: 2, b: 3, a: 1 });
+        assert.deepEqual(LayoutAudit.parseColour("rgba(1, 2, 3, 0.5)"), { r: 1, g: 2, b: 3, a: 0.5 });
+    });
+
+    test("a gradient gives up every stop, because text could be over any of them", () => {
+        const stops = LayoutAudit.gradientStops("linear-gradient(rgb(203, 170, 240), rgb(169, 127, 214))");
+        assert.equal(stops.length, 2);
+        assert.deepEqual(stops[0], { r: 203, g: 170, b: 240, a: 1 });
+        assert.deepEqual(stops[1], { r: 169, g: 127, b: 214, a: 1 });
+    });
+
+    test("no background image, no stops", () => {
+        assert.deepEqual(LayoutAudit.gradientStops("none"), []);
+    });
+});

tests/holdem/runUiAudit.js

@@ -68,57 +68,74 @@ async function main() {
     }
 
     const browser = await chromium.launch();
-    const page = await browser.newPage();
     const failures = [];
     const warnings = [];
     let checks = 0;
 
-    for (const [width, height, label] of VIEWPORTS) {
-        await page.setViewportSize({ width, height });
+    // Twice over: once with a mouse, once with a thumb. The 44px rule stands itself
+    // down where `hover: hover` says there's a pointer, and a headless desktop browser
+    // is a pointer — so a single pass here has never once measured a touch target,
+    // however many viewports it visited. The phone-sized ones are exactly the pass that
+    // needs it.
+    for (const touch of [false, true]) {
+        const context = await browser.newContext(touch
+            ? { hasTouch: true, isMobile: true, deviceScaleFactor: 3 }
+            : {});
+        const page = await context.newPage();
+        const hand = touch ? "touch" : "mouse";
 
-        await page.goto(`${BASE}/Casino/TexasHoldem`);
-        await page.evaluate(seedTable);
-        await page.goto(`${BASE}/Casino/TexasHoldem`);
-        await page.click("#nextHandBtn");
-        await page.waitForTimeout(300);
-        await page.evaluate(() => document.querySelectorAll("details.sidebarPanel").forEach(d => { d.open = true; }));
-        await page.addScriptTag({ path: AUDIT });
+        for (const [width, height, rawLabel] of VIEWPORTS) {
+            const label = `${rawLabel} · ${hand}`;
+            await page.setViewportSize({ width, height });
 
-        const table = await page.evaluate(() => LayoutAudit.runAll());
-        checks++;
-        if (!table.clean) failures.push({ where: `table · ${label} ${width}x${height}`, offenders: table.failed.flatMap(f => f.offenders) });
-        table.warnings.forEach(w => warnings.push(`${label}: ${w}`));
+            await page.goto(`${BASE}/Casino/TexasHoldem`);
+            await page.evaluate(seedTable);
+            await page.goto(`${BASE}/Casino/TexasHoldem`);
+            await page.click("#nextHandBtn");
+            await page.waitForTimeout(300);
+            await page.evaluate(() => document.querySelectorAll("details.sidebarPanel").forEach(d => { d.open = true; }));
+            await page.addScriptTag({ path: AUDIT });
 
-        for (const [name, open] of OVERLAYS) {
-            await page.evaluate(open);
-            await page.waitForTimeout(180);
+            const table = await page.evaluate(() => LayoutAudit.runAll());
             checks++;
-            const result = await page.evaluate(() => {
-                const overlay = [...document.querySelectorAll("[id$='Overlay']")].find(o => !o.hidden);
-                if (!overlay) return { offenders: [] };
-                return LayoutAudit.occlusion(`#${overlay.id} button, #${overlay.id} a, #${overlay.id} input`);
-            });
-            await page.evaluate(() => document.querySelectorAll("[id$='Overlay']").forEach(o => { o.hidden = true; }));
-            if (result.offenders.length) failures.push({ where: `${name} · ${label} ${width}x${height}`, offenders: result.offenders });
-        }
-    }
+            if (!table.clean) failures.push({ where: `table · ${label} ${width}x${height}`, offenders: table.failed.flatMap(f => f.offenders) });
+            table.warnings.forEach(w => warnings.push(`${label}: ${w}`));
 
-    for (const [width, height, label] of VIEWPORTS.filter((_, i) => i % 4 === 0)) {
-        await page.setViewportSize({ width, height });
-        await page.goto(`${BASE}/Casino/TexasHoldem/QuickSplit`);
-        await page.evaluate(() => {
-            const button = [...document.querySelectorAll("button")].find(b => /all.?in/i.test(b.textContent));
-            if (button) button.click();
-        });
-        await page.addScriptTag({ path: AUDIT });
-        checks++;
-        const result = await page.evaluate(() => LayoutAudit.runAll({ occlusionSelector: "main button, main a, main input" }));
-        if (!result.clean) failures.push({ where: `quick split · ${label} ${width}x${height}`, offenders: result.failed.flatMap(f => f.offenders) });
+            for (const [name, open] of OVERLAYS) {
+                await page.evaluate(open);
+                await page.waitForTimeout(180);
+                checks++;
+                const result = await page.evaluate(() => {
+                    const overlay = [...document.querySelectorAll("[id$='Overlay']")].find(o => !o.hidden);
+                    if (!overlay) return { offenders: [] };
+                    return LayoutAudit.occlusion(`#${overlay.id} button, #${overlay.id} a, #${overlay.id} input`);
+                });
+                await page.evaluate(() => document.querySelectorAll("[id$='Overlay']").forEach(o => { o.hidden = true; }));
+                if (result.offenders.length) failures.push({ where: `${name} · ${label} ${width}x${height}`, offenders: result.offenders });
+            }
+        }
+
+        for (const [width, height, rawLabel] of VIEWPORTS.filter((_, i) => i % 4 === 0)) {
+            const label = `${rawLabel} · ${hand}`;
+            await page.setViewportSize({ width, height });
+            await page.goto(`${BASE}/Casino/TexasHoldem/QuickSplit`);
+            await page.evaluate(() => {
+                const button = [...document.querySelectorAll("button")].find(b => /all.?in/i.test(b.textContent));
+                if (button) button.click();
+            });
+            await page.addScriptTag({ path: AUDIT });
+            checks++;
+            const result = await page.evaluate(() => LayoutAudit.runAll({ occlusionSelector: "main button, main a, main input" }));
+            if (!result.clean) failures.push({ where: `quick split · ${label} ${width}x${height}`, offenders: result.failed.flatMap(f => f.offenders) });
+            result.warnings.forEach(w => warnings.push(`quick split · ${label}: ${w}`));
+        }
+
+        await context.close();
     }
 
     await browser.close();
 
-    console.log(`${checks} audits across ${VIEWPORTS.length} viewports`);
+    console.log(`${checks} audits across ${VIEWPORTS.length} viewports, with a mouse and with a thumb`);
     warnings.forEach(w => console.log(`  note: ${w}`));
     if (failures.length === 0) {
         console.log("clean");

tests/holdem/straddle.test.js

@@ -0,0 +1,188 @@
+// The straddle: a blind raise put out before the cards by the player left of the big
+// blind, for twice it.
+//
+// Home games run them constantly, and it is three rules at once — the amount, who is
+// first to act, and what the minimum raise becomes. Faking one by dealing and having
+// the straddler "raise" gets the last of those right and the other two wrong.
+const test = require("node:test");
+const { describe } = require("node:test");
+const assert = require("node:assert");
+const { Betting, HoldemState, makeTable, chipsOnTable } = require("./load");
+
+// Six seats, everyone in, button on seat 0: small blind seat 1, big blind seat 2,
+// straddle seat 3.
+const table = (straddles = 0, extra = {}) => {
+    const state = makeTable({ seatCount: 6, stack: 200, smallBlind: 1, bigBlind: 2, dealerSeatIndex: 0, ...extra });
+    state.straddleCount = straddles;
+    return state;
+};
+
+const dealt = (straddles = 0, extra = {}) => {
+    const state = table(straddles, extra);
+    Betting.beginHand(state);
+    return state;
+};
+
+describe("what goes in the middle", () => {
+    test("the seat left of the big blind puts out twice it", () => {
+        const state = dealt(1);
+        assert.deepEqual(state.seats.map(p => p.committed), [0, 1, 2, 4, 0, 0]);
+    });
+
+    test("a re-straddle doubles again, one seat further round", () => {
+        const state = dealt(2);
+        assert.deepEqual(state.seats.map(p => p.committed), [0, 1, 2, 4, 8, 0]);
+    });
+
+    test("none of it comes from anywhere but the straddler's stack", () => {
+        const before = chipsOnTable(table(2));
+        assert.equal(chipsOnTable(dealt(2)), before);
+    });
+
+    test("the felt is told who straddled, not left to work it out", () => {
+        assert.deepEqual(dealt(2).postedStraddles, [3, 4]);
+        assert.deepEqual(dealt(0).postedStraddles, []);
+    });
+});
+
+describe("who is on the clock", () => {
+    test("action starts left of the straddler, not left of the big blind", () => {
+        assert.equal(dealt(0).actingSeatIndex, 3, "without a straddle it is the seat after the big blind");
+        assert.equal(dealt(1).actingSeatIndex, 4);
+        assert.equal(dealt(2).actingSeatIndex, 5);
+    });
+
+    test("the straddler still has the option when it comes back to them", () => {
+        const state = dealt(1);
+        // Everyone calls the straddle round to the big blind.
+        [4, 5, 0, 1, 2].forEach(seat => {
+            assert.equal(state.actingSeatIndex, seat, `expected seat ${seat} to be up`);
+            Betting.call(state, seat);
+        });
+        assert.equal(state.actingSeatIndex, 3, "back to the straddler");
+        assert.equal(Betting.toCall(state, state.seats[3]), 0, "nothing to call");
+        assert.equal(Betting.isStreetComplete(state), false, "and the street isn't over until they say so");
+    });
+
+    test("the straddler checking closes it", () => {
+        const state = dealt(1);
+        [4, 5, 0, 1, 2].forEach(seat => Betting.call(state, seat));
+        Betting.check(state, 3);
+        assert.equal(Betting.isStreetComplete(state), true);
+        assert.equal(state.actingSeatIndex, null);
+    });
+
+    test("the big blind acts in turn, not last", () => {
+        const state = dealt(1);
+        Betting.call(state, 4);
+        Betting.call(state, 5);
+        Betting.call(state, 0);
+        Betting.call(state, 1);
+        assert.equal(state.actingSeatIndex, 2, "the big blind is up before the straddler");
+        assert.equal(Betting.toCall(state, state.seats[2]), 2, "and owes the difference to the straddle");
+    });
+});
+
+describe("what it costs to raise", () => {
+    test("the minimum raise is twice the straddle, not the straddle plus a blind", () => {
+        // $2 blinds, $4 straddle: the next raise is to $8. Measured off the big blind
+        // instead it comes out at $6, and every player at the table would argue.
+        assert.equal(Betting.minRaiseTo(dealt(1)), 8);
+        assert.equal(Betting.minRaiseTo(dealt(2)), 16);
+        assert.equal(Betting.minRaiseTo(dealt(0)), 4);
+    });
+
+    test("what the table owes is measured off the straddle", () => {
+        const state = dealt(1);
+        assert.equal(state.currentBet, 4);
+        assert.equal(Betting.toCall(state, state.seats[4]), 4, "a fresh player calls the straddle");
+        assert.equal(Betting.toCall(state, state.seats[1]), 3, "the small blind owes the rest");
+        assert.equal(Betting.toCall(state, state.seats[2]), 2, "so does the big blind");
+        assert.equal(Betting.toCall(state, state.seats[3]), 0, "the straddler is already good");
+    });
+
+    test("a raise over the straddle is a raise, and the straddler can still re-raise", () => {
+        const state = dealt(1);
+        Betting.raiseTo(state, 4, 12);
+        assert.equal(state.currentBet, 12);
+        assert.equal(Betting.minRaiseTo(state), 20, "twice again over a raise of eight");
+        assert.equal(state.seats[3].hasActed, false, "the straddler has not acted yet");
+    });
+});
+
+describe("how many a table can take", () => {
+    test("everyone but the two blinds", () => {
+        assert.equal(Betting.maxStraddles(table(0)), 4);
+        assert.equal(Betting.maxStraddles(table(0, { seatCount: 3, seated: [0, 1, 2] })), 1);
+    });
+
+    test("heads-up, none — there is no seat left of the big blind to straddle from", () => {
+        const heads = table(1, { seatCount: 6, seated: [0, 1] });
+        assert.equal(Betting.maxStraddles(heads), 0);
+        assert.deepEqual(Betting.straddleSeats(heads), []);
+        Betting.beginHand(heads);
+        assert.deepEqual(heads.seats.map(p => p.committed), [1, 2, 0, 0, 0, 0]);
+    });
+
+    test("asking for more than the table has stops at the last seat", () => {
+        const state = table(0, { seatCount: 4, seated: [0, 1, 2, 3] });
+        state.straddleCount = 99;
+        assert.equal(Betting.straddleSeats(state).length, 2);
+        Betting.beginHand(state);
+        assert.deepEqual(state.seats.map(p => p.committed), [8, 1, 2, 4]);
+        assert.equal(state.actingSeatIndex, 1, "round to the small blind, who is first to act");
+    });
+
+    test("a seat with no chips is never handed one", () => {
+        const state = table(1);
+        state.seats[3].stack = 0;
+        // Seat 3 is sat out for the deal, so the straddle passes to seat 4.
+        assert.deepEqual(Betting.straddleSeats(state), [{ index: 4, amount: 4 }]);
+    });
+});
+
+describe("what it doesn't outlive", () => {
+    test("the hand it was called for", () => {
+        const state = dealt(1);
+        HoldemState.startNextHand(state);
+        assert.equal(state.straddleCount, 0, "nobody straddles again by accident");
+        assert.deepEqual(state.postedStraddles, []);
+    });
+
+    test("but it survives the button being pushed around before the deal", () => {
+        // repostBlinds takes every posted chip back and deals again; a straddle that
+        // vanished there would have been paid once and never returned.
+        const state = dealt(1);
+        const before = chipsOnTable(state);
+        Betting.repostBlinds(state);
+        assert.deepEqual(state.seats.map(p => p.committed), [0, 1, 2, 4, 0, 0]);
+        assert.equal(chipsOnTable(state), before);
+    });
+
+    test("a table saved before straddles existed reads as having none", () => {
+        const parsed = JSON.parse(JSON.stringify(makeTable({ seatCount: 6 })));
+        delete parsed.straddleCount;
+        delete parsed.postedStraddles;
+        const migrated = HoldemState.migrate(parsed);
+        assert.equal(migrated.straddleCount, 0);
+        assert.deepEqual(migrated.postedStraddles, []);
+    });
+});
+
+describe("what the dealer is shown before dealing", () => {
+    test("the straddles that are coming, and how many more it could take", () => {
+        const preview = Betting.blindPreview(table(1));
+        assert.deepEqual(preview.straddles, [{ index: 3, amount: 4 }]);
+        assert.equal(preview.maxStraddles, 4);
+    });
+
+    test("and the preview matches what dealing actually does", () => {
+        const state = table(2);
+        const preview = Betting.blindPreview(state);
+        Betting.beginHand(state);
+        assert.deepEqual(preview.straddles.map(s => s.index), state.postedStraddles);
+        preview.straddles.forEach(({ index, amount }) => {
+            assert.equal(state.seats[index].committed, amount, `seat ${index + 1}`);
+        });
+    });
+});

tests/holdem/uiAudit.js

@@ -393,6 +393,37 @@ const LayoutAudit = {
         }
     },
 
+    // How much of this element actually reaches the screen, and what is behind the
+    // thing doing the fading.
+    //
+    // `opacity` on a box fades the whole box — its text and its own background together
+    // — onto whatever sits behind that box. So a dimmed seat is not "grey text on a
+    // dark puck"; it is a faded puck and faded text both landing on the felt. Both
+    // halves have to be composited the same way or the number means nothing.
+    fading(el) {
+        let alpha = 1;
+        let outermost = null;
+        for (let node = el; node; node = node.parentElement) {
+            const own = parseFloat(getComputedStyle(node).opacity);
+            if (own < 0.99) {
+                alpha *= own;
+                outermost = node;
+            }
+        }
+        if (!outermost) return { alpha: 1, behind: null };
+        return { alpha, behind: this.backgroundCandidates(outermost.parentElement || document.body)[0] || null };
+    },
+
+    // The two colours as the screen actually shows them, once the fading is applied.
+    asPainted(fgRaw, bg, fade) {
+        const solid = fgRaw.a === 1 ? fgRaw : this.over(fgRaw, bg);
+        if (fade.alpha >= 0.99 || !fade.behind) return { fg: solid, bg };
+        return {
+            fg: this.over({ ...solid, a: solid.a * fade.alpha }, fade.behind),
+            bg: this.over({ ...bg, a: bg.a * fade.alpha }, fade.behind),
+        };
+    },
+
     contrast({ minimum = 4.5, largeMinimum = 3, selector = null } = {}) {
         const offenders = [];
         const unmeasured = [];
@@ -426,12 +457,17 @@ const LayoutAudit = {
             // exempt — there's nothing to read at zero — but anything in between is
             // reported as unmeasured rather than passed over in silence, because a
             // number nobody checked is not the same as a number that's fine.
-            const opacity = parseFloat(style.opacity);
-            if (opacity <= 0.02) return;
-            const faded = opacity < 0.99 ||
-                [...this.ancestors(el)].some(a => parseFloat(getComputedStyle(a).opacity) < 0.99);
-            if (faded) {
-                unmeasured.push(`${this.describe(el)} :: faded (opacity ${opacity}), contrast not checked`);
+            const fade = this.fading(el);
+            if (fade.alpha <= 0.02) return;
+
+            // A control that is switched off is the one exemption WCAG itself grants —
+            // an inactive component has no contrast requirement, which is why every
+            // toolkit dims them. Said out loud rather than skipped in silence: this is
+            // the only exemption in here, and the moment a dimmed thing turns out to be
+            // live it stops applying.
+            const off = el.closest("[disabled], [aria-disabled='true']");
+            if (off) {
+                unmeasured.push(`${this.describe(el)} :: disabled control, exempt from AA`);
                 return;
             }
             // aria-hidden used to exempt text here, on the grounds that decoration
@@ -459,8 +495,8 @@ const LayoutAudit = {
             // The kindest reading available: best contrast across every candidate.
             let best = 0;
             candidates.forEach(bg => {
-                const fg = fgRaw.a === 1 ? fgRaw : this.over(fgRaw, bg);
-                best = Math.max(best, this.contrastRatio(fg, bg));
+                const painted = this.asPainted(fgRaw, bg, fade);
+                best = Math.max(best, this.contrastRatio(painted.fg, painted.bg));
             });
 
             const sizePx = parseFloat(style.fontSize);
@@ -543,6 +579,17 @@ const LayoutAudit = {
             .filter(el => el.type !== "color")
             .filter(el => !(exempt && el.matches(exempt)))
             .forEach(el => {
+                // A link inside a sentence is the one target WCAG itself carves out:
+                // its size is set by the line it sits in, and padding a word out to
+                // 44px would break the paragraph around it. The rule is about controls
+                // a thumb goes hunting for, not words in prose. Said out loud, and
+                // narrow — display:inline, and real text either side of it.
+                if (el.tagName === "A" && getComputedStyle(el).display === "inline" &&
+                    el.parentElement &&
+                    [...el.parentElement.childNodes].some(n => n.nodeType === 3 && n.textContent.trim())) {
+                    unmeasured.push(`${this.describe(el)} :: link inside a sentence, sized by the line`);
+                    return;
+                }
                 // A control inside a scrolling sheet can sit below its container's
                 // visible area while still having a viewport rect. elementFromPoint at
                 // its centre then returns the sheet, effectiveTarget gives up, and the
@@ -674,6 +721,20 @@ const LayoutAudit = {
 
     // ---- Runner ----
 
+    // Every check this file knows how to make, every time.
+    //
+    // Two of them used not to be here. Contrast was simply missing from the list, and
+    // touch targets sat behind an opt-in flag nobody passed — so "the audit is clean"
+    // has meant nine checks rather than eleven, and the two left out are the two whose
+    // faults a dealer meets in a dim room with their thumb. Both were written, tested
+    // and then never run: the contrast checker was built across two rounds and every
+    // sweep since has been silent about colour.
+    //
+    // A check that decides it can't apply here says so out loud rather than reporting
+    // an empty offenders list, which reads as a pass. touchTargets stands itself down
+    // on a mouse-driven browser — that is right, a 24px control is fine with a cursor
+    // on it — but "not measured" and "measured and fine" are different answers and the
+    // runner now prints which one it got.
     runAll(options = {}) {
         const checks = [
             this.touchAction(),
@@ -686,8 +747,9 @@ const LayoutAudit = {
             this.fieldFontSize(),
             this.seatOwnership(),
             this.oneDealerButton(),
+            this.contrast(options.contrast),
+            this.touchTargets(options.minimumTarget, options.touchTargets),
         ];
-        if (options.includeTouchTargets) checks.push(this.touchTargets(options.minimumTarget));
 
         return {
             viewport: `${innerWidth}x${innerHeight}`,
@@ -695,8 +757,13 @@ const LayoutAudit = {
             // Things worth knowing that aren't faults — see occlusion() on toasts.
             // Controls a check couldn't probe go here too: not a fault, but not a pass
             // either, and a silent skip is how faults hide.
-            warnings: checks.flatMap(c => [...(c.warnings || []), ...(c.unmeasured || [])]),
-            passed: checks.filter(c => c.offenders.length === 0).map(c => c.name),
+            warnings: checks.flatMap(c => [
+                ...(c.warnings || []),
+                ...(c.unmeasured || []),
+                ...(c.skipped ? [`${c.name}: not run here — ${c.skipped}`] : []),
+            ]),
+            passed: checks.filter(c => !c.skipped && c.offenders.length === 0).map(c => c.name),
+            skipped: checks.filter(c => c.skipped).map(c => c.name),
             clean: checks.every(c => c.offenders.length === 0),
         };
     },