has 42px of room and wants 100 - "Falcons" drew as "F...". epl's "Coventry City" does the same
at 1440. 95_chrome.css line 173 asks for ellipsis, which is the clip the vet counts.
TWO MOVES, both measured: the crest and the padding give way first (they cost the reader nothing), and then
109_frame2.py steps the NAME's own size down until it fits - never an ellipsis, never a lost letter.
============================================================================================================ */
@media (min-width:900px){
/* !! A WORD IS NEVER BROKEN AND NEVER ELLIPSISED. "Coventry City" takes two lines at the space; what decides
the SIZE is the longest single word, and `overflow-wrap:normal` is what makes scrollWidth report it - with
break-word the browser hyphen-less-ly split it into "Coventr / y City" (shots/w17a/after4/
soccer_epl_call_1150.png) and with nowrap the two-word club shrank to the floor for no reason.
109_frame2.py steps var(--bbch-nm) down until this box stops overflowing, so the clip never happens. */
.obt-page .obt-app.bbch-game .obt-stage .bbch-side .tm b{
font-size:var(--bbch-nm,26px) !important;
white-space:normal !important;overflow-wrap:normal !important;word-break:normal !important;hyphens:none;
overflow:hidden !important;text-overflow:clip !important;max-height:2.3em}
/* the record line under the name yields the same way. */
.obt-page .obt-app.bbch-game .obt-stage .bbch-side .bbch-rec{overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:900px) and (max-width:1339px){
/* 1150: 14px of crest and 16px of padding hand the name 72px instead of 42 - and no word is touched. */
.obt-page .obt-app.bbch-game .obt-stage .bbch-side{padding:8px 8px !important;gap:8px !important}
.obt-page .obt-app.bbch-game .obt-stage .bbch-side .tm{gap:8px !important}
.obt-page .obt-app.bbch-game .obt-stage .bbch-side .tm img,
.obt-page .obt-app.bbch-game .obt-stage .obt-wsid.v39.bbhd[data-bbch] .hr1 .tm img{
width:30px !important;height:30px !important}
.obt-page .obt-app.bbch-game .obt-stage .bbch-side .tm .ph{width:30px !important;height:30px !important}
}
/* THE VERB DROPS ITS PAY WORDS BEFORE IT DROPS A LETTER.
MEASURED at 1150: .bbch-act.solid is 110px of box around 139px of "Track it - $10 gets $21.50" - 29px cut,
mid-word. 109_frame2.py sets data-bbch-fit="short" when the words do not fit and the button then reads
"Track it"; the price is two rows above it in the band and inside the pick card, so nothing is lost. */
@media (min-width:900px){
.obt-page .obt-app.bbch-game #obtStage .r9-tabs.r9-stops .bbch-act{
overflow:visible !important;text-overflow:clip !important}
}
/* !! AND NOT ONE PIXEL MORE THAN THAT. The first cut of this section also wrote
".bbch-act[data-bbch-fit='short']{max-width:none !important}" - to let the short button size itself - and
MEASURED (tools/_w17a_p8.js, nfl at 1150, 17 samples over two seconds) it built a loop out of nothing:
10 samples "Track it - $10 gets $21.50" max-width 112px
7 samples "Track it" max-width none
The block reads the cap off max-width, so the moment it wrote fit="short" this rule took the cap away, the
next tick measured against the parent's 170px instead, decided the long words fitted, and the one after that
put the cap back. The camera caught whichever half of the loop it landed on - shots/w17a/after6 and after7
both show "ck it - $10 gets $21" clipped at both ends in a view whose probe read 61px. "Track it" is 61px
against a 112px cap: it never needed the rule. A measurement must never move the thing it measures. */
/* !! AND THE SHEET REPAIR MUST STAND DOWN. 103_rail.py re-injects the chain's swallowed tail unless it can find
a rule carrying "bbch-hd" in the LAST 40 RULES of some parsed sheet. Adding ANY sheet after 95_chrome.css
pushes that rule out of the window - MEASURED (tools/_w17a_p7.js): with this file appended, w29.css parses
1,706 rules with bbch-hd among them and #bbchSheetFix was injected ANYWAY, 54 duplicate rules of 92-97,
fetched and appended after load. It is harmless-looking and it is not: it is a second copy of every rule in
the tail, arriving asynchronously. The guard's own words are "it stands down by itself the moment the file is
fixed, because then the rules are already in a sheet and the probe finds them" - so this file ends with a
real rule on .bbch-hd, inside that window, and the probe finds it. This will matter on PROD the moment this
sheet is minted, not only on a bench: the same 40-rule window applies there. */
.obt-page .obt-app.bbch-game .obt-deck .bbch-hd{letter-spacing:0;text-transform:none}
/* ============================================================================================================
4. OUR CALL IS NOT PRINTED IN THE BAND (package item 5)
The band printed "our call: Falcons to win $34.50". That is OUR PREDICTION FOR THE OUTCOME, and the gating
law (CONSOLE_V2_BRIEF section 3) makes it subscriber-only; the mockup has no such line at any stop; and
W16B's pick card now carries it in full ("HIGH - about 63 in 100. The price needs 47."), which is the
condition W16A_STATUS section 7 set for retiring it.
The node is not deleted - 109_frame2.py empties it for a GUEST (a hidden node is still in the DOM, and the
gating law is about what leaves the server and what the page holds, not only about what is painted), and the
sheet hides it for everybody so the band reads as the mockup draws it. Cutting it from the payload is W16D.
============================================================================================================ */
.obt-page .obt-app.bbch-game .obt-stage .obt-wsid.bbhd[data-bbch] .obt-callline,
.obt-page .obt-app.bbch-game .obt-stage .obt-wsid.bbhd[data-bbch] .bbch-call{display:none !important}
/* ============================================================================================================
5. THE RAIL'S GAME ROW IS THE MOCKUP'S TWO LINES (package item 4)
MEASURED (tools/_w17a_p4.js, nfl at 1440 and 1150, 28 rows): the row is 86px tall and carries, in order,
.obt-gch a RED "In play" pill (rgb(196,61,61)), the word "gap", and a star button that is ALREADY 0x0
.obt-gside x2, each a 7px RED dot, a 20px crest, the club name, and a price chip ALREADY 0x0
The prototype's row is one line "Away @ Home" and one faint line under it, no pills, no dots, no red tags,
the open game marked by a club-colour edge (shots/w17a/before/proto_pick_1440.png).
!! NO-LOSS, CHECKED PART BY PART BEFORE ANYTHING WAS HIDDEN. The star and the price chips are measured at
0x0 at both widths TODAY - hiding their parents takes nothing off the screen. The red dot's fact ("a key
player is out") and the "gap" word are NOT dropped: 109_frame2.py writes both into the faint line as plain
words, where a phone reader can read them - a title= attribute never reaches a phone at all, so this is more
of the fact on screen, not less.
The row keeps its click, its .sel class and its data-ev, so the board's own handlers, bench_tap_test and
rail_settings_test read exactly what they read before.
============================================================================================================ */
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm]{
display:block;padding:9px 10px 9px 12px;min-height:0;border-left:3px solid transparent;
border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm] > .obt-gch,
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm] > .obt-gside,
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm] > .obt-cells,
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm] > .obt-crowdtick{display:none !important}
/* !! AND THIS LINE WRAPS TOO. The first cut held it to one line with an ellipsis and desk_law_test counted it
on all five MLB views at 1600: ".bbch-gm 'Boston Red Sox 2 @ Texas Rangers 4' dx7 dy0 w206" - seven pixels
over, and an ellipsis is exactly the clip this package spent the afternoon removing from the band. Two lines
at the space, words never broken; a short name still takes one. */
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm] > .bbch-gm{
display:block;font-family:var(--ui);font-size:13px;font-weight:600;line-height:1.25;color:var(--ink);
white-space:normal;overflow-wrap:normal;word-break:normal;
overflow:hidden;text-overflow:clip;max-height:2.6em;text-transform:none;letter-spacing:0}
/* the faint line WRAPS rather than ellipsises: a clipped line is what the vet counts, and the rail is 207px
wide at 1150 - "in play, apps disagree" does not fit on one. Two lines is the ceiling. */
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm] > .bbch-gs{
display:block;margin-top:2px;font-family:var(--ui);font-size:12px;font-weight:400;line-height:1.3;
color:var(--ink-faint,#6f7a8c);white-space:normal;overflow:hidden;text-overflow:clip;
max-height:2.6em;text-transform:none;letter-spacing:0}
/* the open game, in the club's own colour - the one colour the mockup uses here. --tc is the scene engine's
single measurement (BBCol.pick against the real ground); when a club's hex fails contrast it returns '' and
the mark falls back to ink, exactly as every other --tc surface does. */
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm].sel{
border-left-color:var(--tc,var(--ink)) !important;background:var(--bbch-selbg,rgba(255,255,255,.05))}
html[data-theme="light"] .obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm].sel{
--bbch-selbg:rgba(0,0,0,.045)}
/* the heading rows 103_rail injects keep their own hairline above this one. */
.obt-page .obt-app.bbch-game .obt-deck #obtRows .obt-row[data-bbch-gm]:last-child{border-bottom:0}
/* ============================================================================================================
6. THE PRICE RADAR'S AXIS IS OVER THE FLOOR (package item 6; gate.sh phone F4, 20 failures)
The 9px is written into the host's own chartSvg() as a font-size ATTRIBUTE, so no stylesheet can clear the
gate (tools/phone_metrics.py:305 reads getAttribute('font-size') before the computed size). The fix is in
109_frame2.py, on the two string literals. This block is the second half: the label is a NUMBER, so it reads
in the console's one typeface with tabular figures rather than the browser's monospace fallback.
============================================================================================================ */
.obt-page .obt-app .gf-radar svg text{font-family:var(--ui) !important;font-variant-numeric:tabular-nums}
/* ============================================================================================================
7. THE FILLED VERB IS READABLE IN THE LIGHT THEME (package item 9: "capture and LOOK; W16A never reported
light theme or 320")
MEASURED (tools/_w17a_p9.js, nfl at 1150, both themes): `--page` IS NOT DEFINED at :root in EITHER theme, so
95_chrome.css's "color:var(--page,#0f1118)" always resolves to the fallback, #0f1118.
dark background #E8EDF5 text #0f1118 - about 16:1, right
light background #111827 text #0f1118 - about 1.05:1, INVISIBLE
shots/w17a/after12/nfl_call_1150_light.png shows it: a dark slab where the console's one verb should be, on
every stop and at every width. The ground in the light theme is white, so the filled button's words are
white; nothing else about the button moves.
The SAME arithmetic hits src/08_cta.css's .r9cta (measured in the same probe: background #111827, text
#0f1118) - that file is W17B's and the one-line edit is in this package's asks, not written here, because a
host sheet reaching into a scene sheet is the fight this lane keeps losing.
============================================================================================================ */
html[data-theme="light"] .obt-page .obt-app.bbch-game #obtStage .r9-tabs.r9-stops .bbch-act.solid,
html[data-theme="light"] .obt-page .obt-app.bbch-game .bbch-ptrack{color:#fff !important}
/* 98_w19b.css - [W19B 2026-09-19, marker BB_W19B_CSS_V115] the rail's per-league game count and the band's
city + last-ten line, plus the Conditions row of four icon-over-label columns.
HEADER COMMENT WARNING, LEARNED THE HARD WAY (103_rail.py's long note): this comment closes ONCE, at the end
of this paragraph, and no prose sits outside it. A second close-comment anywhere in a host css file makes the
parser swallow every rule after it, to the end of the CHAIN - which is how 92_stops2 and 93_hostfield were
dead on prod for a day without a single gate seeing it.
WHAT IS HERE
1 .bbwb-n the rail's "4 games" - the faint ink, beside the league name, never a pill.
2 .bbwb-sub the band's "Pittsburgh - won 6 of the last 10" under the club name, at the 12 px desktop /
13 px phone floor, the club's own colour only on the club name the host already colours.
Conditions' four icon-over-label columns are NOT here: that is an ORGAN, so its rules live with the organ in
src/01j_stop.css and ride the scene bundle. Host chrome in the host chain, organ styling in the organ sheet -
the same rule in two sheets is the drift that made the console disagree with itself.
Every rule is scoped to .obt-app.bbch-game, so a board screen with no game open is untouched. */
/* ---- 1. the rail count ------------------------------------------------------------------------------------- */
.obt-app.bbch-game .obt-lgs .obt-lg .bbwb-n {
display: block;
font: 400 12px/1.25 var(--ui, inherit);
color: var(--ink-faint, #8a93a3);
letter-spacing: 0;
margin-top: 2px;
white-space: nowrap;
}
.obt-app.bbch-game .obt-lgs .obt-lg.on .bbwb-n { color: var(--ink-dim, #b7bfcc); }
/* ---- 2. the band's city + record ---------------------------------------------------------------------------- */
.obt-app.bbch-game .bbch-side .bbwb-sub,
.obt-app.bbch-game .hr1 > .tm .bbwb-sub {
display: block;
font: 400 12px/1.3 var(--ui, inherit);
color: var(--ink-faint, #8a93a3);
margin-top: 3px;
max-width: 22ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 820px) {
.obt-app.bbch-game .bbch-side .bbwb-sub,
.obt-app.bbch-game .hr1 > .tm .bbwb-sub { font-size: 13px; max-width: 16ch; }
}
/* 99_w20a.css - [W20A 2026-09-19, marker BB_W20A_CSS_V121] the perfection pass's own sheet: a visible focus ring on
everything, the off-screen live region the console speaks through, and the phone's 44 px tap floor on the two
control rows that were measured under it.
HEADER COMMENT WARNING (98_w19b's note, and it is real): this comment closes ONCE, here, and no prose sits outside
it. A second close-comment anywhere in a host css file makes the parser swallow every rule to the end of the CHAIN.
WHAT IS HERE, AND WHY EACH RULE EXISTS - every one measured by a tool in this package, none of it decoration.
1 :focus-visible tools/keys_test.py K6. The keyboard reader could not see where they were: the Ask box paints
`outline: none` with nothing in its place, and it is not the only one. A ring in the reading
ink, two px, offset two - a hairline, not a glow, and never a colour that carries meaning.
:focus-visible (not :focus) so a MOUSE press never paints a ring, which is why the rings were
turned off in the first place.
3 .r9-say tools/keys_test.py K7. Outside a live game the app held no live region at all, so every stop
tap rewrote the middle of the page and told a screen reader nothing. src/04_engine.js E.say()
writes one short sentence into this element; it must be READ but never SEEN, so it is the
standard off-screen clip - not display:none and not visibility:hidden, either of which takes
it out of the accessibility tree and back to silence.
3 the 44 px floor tools/every_control_test.py TAP at 390. Raising a control's own min-height is the honest fix;
nothing here changes a font size, a colour or a layout at desktop widths.
Every rule is scoped inside .obt-app so no other page on the site is touched. */
/* ---- 1. THE FOCUS RING ------------------------------------------------------------------------------------- */
.obt-app :focus-visible,
.obt-app .obt-row:focus-visible,
.r9-modal :focus-visible {
outline: 2px solid var(--ink, #e7ecf5);
outline-offset: 2px;
border-radius: 4px;
}
/* the ring must survive the sheets that turn outlines off wholesale */
.obt-app button:focus-visible,
.obt-app a:focus-visible,
.obt-app summary:focus-visible,
.obt-app select:focus-visible,
.obt-app input:focus-visible,
.obt-app textarea:focus-visible,
.obt-app [tabindex]:focus-visible {
outline: 2px solid var(--ink, #e7ecf5);
outline-offset: 2px;
}
/* ---- 2. THE LIVE REGION: read, never seen ------------------------------------------------------------------ */
.obt-app .r9-say {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* ---- 3. THE PHONE'S 44 px TAP FLOOR ------------------------------------------------------------------------ */
@media (max-width: 800px) {
.obt-app .r9-stops .r9-stop,
.obt-app .obt-lgs .obt-lg,
.obt-app .obt-ico,
.obt-app .r9-morechip,
.obt-app .r9-morelink,
.obt-app .r9d-chip,
.obt-app .tg {
min-height: 44px;
}
/* a control that is only narrow, not short, gets its width from its own padding - never a fixed width, which
would break the rows these sit in at 320 px. */
.obt-app .obt-ico,
.obt-app .r9c-down {
min-width: 44px;
}
}
/* 100_w21a.css - [W21A 2026-09-19, marker BB_W21A_CSS_V128] THE HOST'S LAST OLD-DESIGN SURFACES, AND THE PHONE'S
PHANTOM SCREENS.
Mint: python tools/mint_host_css.py tools/host_css/100_w21a.css BB_W21A_CSS_V128 (last in the chain, after 99_w20a.css)
EVERYTHING HERE WAS MEASURED, NOT GUESSED. The measurements are in round10w/W21A_STATUS.md and came from
tools/_w21a_probe.py (a computed-style scan of every painted element inside #obtApp, at 390 and 1440, on the
board screen and on a game screen) and tools/_w21a_hit.py (document.elementsFromPoint over every rail league
button). Each section below names the number it was written against.
SECTION 1 the phone's phantom screens - the root cause of W20A's "DEAD x36 on button.obt-lg"
SECTION 2 one typeface: --mono stops existing on the console
SECTION 3 the phone market row (Winner / Line / Total / Players) - mono + accent blue + a glow + 28px taps
SECTION 4 the rail league row - the mockup's plain row, sentence case, 44px on the phone
SECTION 5 the rest of the computed-style sweep: radii > 12px, the one gradient, the two header glows
SECTION 6 the site's email capture sheet never covers the console
ICP LAW: this file writes no words. DESIGN LAW: it exists to keep it. GATING LAW: it shows and hides nothing
that depends on who is reading - every rule here is true for a guest and a subscriber alike. */
/* ================================================================================================================
1. THE PHONE'S PHANTOM SCREENS. (measured 2026-09-19, tools/_w21a_hit.py, nfl 390)
At 390 the three deck columns are ALL absolutely positioned at top:0 of .obt-deck and the phone shows one at a
time by sliding the others away:
screen .obt-lgs (leagues) .obt-gamescol (the board) .obt-stagecol (the game)
board x=0 z=2 x=0 z=auto pt=48px x=398 z=5 (slid off to the right)
game x=0 z=2 x=0 z=auto pt=48px x=0 z=6 (opaque, full height, on top)
So on a GAME screen the league strip and the whole board list are still laid out at x=0, full size, under an
opaque panel. document.elementsFromPoint on the centre of the first three league buttons returns
IMG.bbh-cr / SPAN.bbh-tm - the GAME HEAD - and never the button. That is the whole of W20A's finding 3: the
nineteen rail leagues are not dead, they are BURIED, and every press a reader (or a test, or a screen reader's
activation) aims at them lands on the game behind. Same for every row of the board list.
The fix is the honest one: a screen the phone has left is INERT. visibility:hidden takes a subtree out of
hit-testing, out of the accessibility tree and out of the tab order in one property, and changes not one pixel
here because an opaque column is already painted over it. Nothing moves, nothing is deleted, and the moment
data-scr flips back the screen is live again.
The hook is the HOST'S OWN screen attribute (#obtApp[data-scr], written by setScr() - 'board' | 'game' |
'module'), not a class this wave invented, so it is true even when the scene engine has not loaded. When the
attribute is absent nothing matches and the console behaves exactly as it does today.
================================================================================================================ */
@media (max-width: 899px) {
#obtApp[data-scr="game"] .obt-lgs,
#obtApp[data-scr="game"] .obt-gamescol,
#obtApp[data-scr="module"] .obt-lgs,
#obtApp[data-scr="module"] .obt-gamescol { visibility: hidden; pointer-events: none; }
/* and symmetrically: on the board screen the game column is slid off the right edge (measured x=398 at 390),
so its controls are equally unreachable and equally focusable. */
#obtApp[data-scr="board"] .obt-stagecol { visibility: hidden; pointer-events: none; }
/* a child that must stay alive while its screen is away says so; nothing does today, and this is the seam for
it when something does. */
#obtApp .obt-col .bb-keepalive { visibility: visible; }
}
/* ================================================================================================================
2. ONE TYPEFACE. (measured: 6 mono surfaces at 390, 0 at 1440 after the stops were rebuilt)
The v1 host stylesheet sets font-family:var(--mono) on 40+ rules (.obt-lg, .obt-chip, .obt-cell, .obt-day,
.obt-tile .tl, .obt-mkt2 buttons, .obt-ctl, the drawer's selects ...). Chasing them one at a time is how a
surface gets missed. --mono is defined once, on :root, by assets/bb-core-rest.css
(--ui:'Geist','Inter',sans-serif; --mono:'JetBrains Mono',monospace) - so re-pointing it INSIDE the console
retires every one of them at once, in one line, with no !important and with no effect on any other page of the
site (the console lives in .obt-page).
Numerals keep their alignment: font-variant-numeric:tabular-nums is untouched, and Geist has tabular figures. */
.obt-page { --mono: var(--ui); }
/* ================================================================================================================
3. THE PHONE MARKET ROW. (owner, 19 Sep: the row at the top of the phone renders in a monospace face with an
accent blue. Measured at 390: button.on font-family "JetBrains Mono", color rgb(127,220,255),
text-shadow 0 0 8px rgba(56,199,255,.6) - a GLOW - and the two arrows are 28x28, under the 44px tap floor.)
The mockup's look: one segmented group behind a single hairline, sentence case, the chosen market inked rather
than lit.
THE ROW IS PAINTED BY THREE RULES, NOT ONE. Measured: the strip on screen at 390 is
`.obt-build .obt-mksel.m2 button`, the one inside the tile row is `.obt-mkt2 .obt-mksel.m2 button`, and the same
look is repeated by `.obt-seg button.on` (the odds-format pair) and `.obt-focus .obt-fb.on` (the focus chips) -
all four ending in `color:#7FDCFF; background:#0C1E38; border-color:#38C7FF; text-shadow:0 0 8px rgba(56,199,255,.6)`.
Fixing only the one the owner pointed at would leave the other three to be found again tomorrow, so the whole
family is written here: a chosen segment is INKED, never LIT. */
.obt-page .obt-mksel.m2 {
gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto;
}
.obt-page .obt-mksel.m2 button {
font-family: var(--ui); font-size: 14px; letter-spacing: normal; text-transform: none; font-weight: 500;
color: var(--ink-dim); background: transparent;
border: 0; border-right: 1px solid var(--line); border-radius: 0;
min-height: 44px; padding: 0 14px; text-shadow: none;
}
.obt-page .obt-mksel.m2 button:last-child { border-right: 0; }
.obt-page .obt-mksel.m2 button.on,
.obt-page .obt-seg button.on,
.obt-page .obt-focus .obt-fb.on {
color: var(--ink); background: var(--panel-2); border-color: var(--line);
font-weight: 600; text-shadow: none;
}
.obt-page .obt-seg button, .obt-page .obt-focus .obt-fb {
font-family: var(--ui); letter-spacing: normal; text-transform: none; text-shadow: none;
}
@media (max-width: 899px) { .obt-page .obt-seg button { min-height: 44px; } }
.obt-page .obt-mkt2 .mn {
width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 8px;
}
.obt-page .obt-mkt2 .mn:hover { border-color: var(--line-strong, var(--line)); color: var(--ink); }
/* "<- -> walk the markets" is a keyboard hint, at 9.3px, on a phone with no keyboard: it goes away under 900px
and comes back at the desktop floor. */
.obt-page .obt-mkt2 .mh { font-family: var(--ui); font-size: 12px; }
@media (max-width: 899px) { .obt-page .obt-mkt2 .mh { display: none; } }
/* ---- 3b. THE SAME BLUE, EVERYWHERE ELSE IT IS PAINTED ON THE PHONE'S BOARD SCREEN --------------------------------
Measured 2026-09-19 at 390 on the board screen, AFTER 3 was in (tools/_w21a_shot.py "blue" pass): the chosen
state is still drawn in #38C7FF / #7FDCFF / rgb(96,165,250) on six more surfaces. Each is listed with the
selector that paints it, and each needs .obt-page in front of it only because the host's own rule already
carries three classes.
.obt-lg.on the open league border-color #38C7FF
.obt-seg the market group's frame border #38C7FF
.obt-day .on / .obt-days .on the day chips ("All days") colour rgb(96,165,250) + blue border
.obt-tabs the board's own bottom bar blue frame and blue words
.obt-tilescol the tile column's left edge blue rule
#obtCoach2 the old tour's button blue frame
The law: the chosen thing is INKED (ink on panel-2, a hairline in --line), the club colour is the only colour,
and colour that means win or loss lives only inside a proof strip. */
.obt-page .obt-lg.on { border-color: var(--line-strong, var(--line)); background: var(--panel-2); color: var(--ink); }
.obt-page .obt-seg { border-color: var(--line); }
.obt-page .obt-tabs { border-color: var(--line); }
.obt-page .obt-tabs button, .obt-page .obt-tabs a { color: var(--ink-dim); font-family: var(--ui); }
.obt-page .obt-tabs button.on, .obt-page .obt-tabs a.on { color: var(--ink); border-color: var(--line); }
.obt-page .obt-day button.on, .obt-page .obt-days button.on, .obt-page .obt-dayrow button.on,
.obt-page .obt-daysel button.on {
color: var(--ink); background: var(--panel-2); border-color: var(--line); text-shadow: none;
}
.obt-page .obt-tilescol { border-left-color: var(--line); }
/* and the two lens rows that carry the same chosen-market word one more time - traced 2026-09-19 to
`.obt-lens button.on` (inside .obt-stagehead) and `.obt-glens button.on` (inside .obt-tilescol), both painting
rgb(11,114,168). Three places say "Winner" on one phone screen; all three now say it the same way. */
.obt-page .obt-lens button.on, .obt-page .obt-glens button.on {
color: var(--ink); background: var(--panel-2); border-color: var(--line); text-shadow: none;
}
.obt-page .obt-lens button, .obt-page .obt-glens button {
font-family: var(--ui); letter-spacing: normal; text-transform: none;
}
.obt-page #obtCoach2 { border-color: var(--line); }
/* ================================================================================================================
4. THE RAIL LEAGUE ROW. (measured at 390: .obt-lg font-family "JetBrains Mono", text-transform:uppercase,
letter-spacing .03em, height 44, radius 6. The 44px and the 6px were already right; the face and the caps were
not, and uppercase turns "Cricket" into "CRICKET", which is not how the mockup or a reader writes it.) */
.obt-page .obt-lg {
font-family: var(--ui); font-size: 14px; letter-spacing: normal; text-transform: none;
border-radius: 8px;
}
@media (max-width: 899px) { .obt-page .obt-lg { min-height: 44px; } }
@media (min-width: 900px) { .obt-page .obt-lg { min-height: 36px; } }
/* the count block 113 writes beside a league name stays quieter than the name itself, in the same face */
.obt-page .obt-lg .bbrb-n, .obt-page .obt-lg small { font-family: var(--ui); color: var(--ink-faint); }
/* ================================================================================================================
5. THE REST OF THE SWEEP. (every remaining hit of the computed-style scan, 1440 and 390, board + game,
guest + sub. The scan flags: any border-radius > 12px outside .r9cta, any gradient outside .r9cta, any
box-shadow with 12px+ of blur outside .r9cta, any accent-blue text that is not a link.)
button.r9c-down 50% 34x34 - a round icon button reads as a pill; the law is 8px
button.snd 50% 30x30 - the same, and under the tap floor
div.box 20px 271x46 - the composer box
div.obt-tilescol linear-gradient(rgb(2,6,12), rgb(1,4,9)) - a gradient between two near-blacks: flat it
.obt-wsid.bbhd / .obt-wsid.phh box-shadow 0 10px 16px -10px rgba(0,0,0,.65) - the sticky head's soft glow,
replaced by the hairline the rest of the console uses
button#obtCoach2 rgb(96,165,250) mono - the old first-visit tour's own button (block 110 retires the tour
itself; until it does, it must at least not be the one blue mono word on the
phone)
================================================================================================================ */
.obt-page .r9c-down, .obt-page .snd { border-radius: 8px; }
/* the chat send button's 50% is written by round9/src/09_chat.css line 126 as `.r9o-in .box button.snd` and again
at line 186 behind #obtStage, so the host layer needs the same reach to say 8px. src is not edited from here. */
.obt-page #obtStage .r9o-in .box button.snd,
.obt-page .r9o-in .box button.snd,
.obt-page #obtStage .r9o-ph .r9o-in .box button.snd { border-radius: 8px; }
.obt-page .snd { min-width: 44px; min-height: 44px; }
.obt-page .box { border-radius: 8px; }
.obt-page .obt-tilescol { background-image: none; background-color: #02060C; }
/* the head's shadow is written by round9/src/scenes.css line 141 as `#obtStage .obt-wsid.v39{...}` - an id
selector, so a host rule needs the id too. src is W21B's tree and is not edited from here; this is the host
layer doing its own job on top of it, which is what the host layer is for. */
.obt-page #obtStage .obt-wsid.v39,
.obt-page .obt-wsid.bbhd, .obt-page .obt-wsid.phh {
box-shadow: none; border-bottom: 1px solid var(--line);
}
.obt-page #obtCoach2 { font-family: var(--ui); color: var(--ink-dim); text-transform: none; letter-spacing: normal; }
/* ================================================================================================================
6. THE SITE'S EMAIL CAPTURE SHEET NEVER COVERS THE CONSOLE. (W20A finding 5 / owner item 1: on a phone, to a
guest, in the first viewport, "Tomorrow's pick - free, in your inbox" sits over the pane.)
The sheet is assets/bb-core.js's .bbcap-sheet (position:fixed; z-index:9500; bottom:12px), raised at 55% scroll
depth, once a session. On every other page of the site it is right and it stays. On /odds it is a SECOND door
stacked in front of the reader's first pane, before any value, and it covers the bottom bar - which breaks the
one-door-per-pane rule outright.
The master script is never edited (that is the law). Block 122 puts .bb-odds-page on only on this page
and removes the node if the sheet is ever inserted; this rule is the belt to that brace, so the sheet cannot
paint for even one frame between insertion and the next scheduler pass. The INLINE capture card
() is deliberately untouched - the console does not use it, and if a page ever does,
it is a card in the flow, not a layer over it. */
body.bb-odds-page .bbcap-sheet { display: none !important; }
/* 101_emptyframe.css - [integrator 2026-09-19, marker BB_EMPTYFRAME_CSS_V130] THE NEW FRAME WITH NO GAME OPEN.
Rides block 125 (BB_CHROMEALWAYS_V129): on a desktop .bbch-game is now on before / without a game, and three pieces of
the version-one frame were still standing in that state (MEASURED on the bench, ncaab = a league with no priced games):
the mono "start here / find anything / walk the steps" foot of the right column (#obtRailFoot), the previous / next
view arrows over an empty stage (.obt-tnav), and the operating system's white scrollbar on the league rail. */
.obt-app.bbch-game #obtRailFoot{display:none!important}
.obt-app.bbch-game .obt-stagehead .obt-tnav{display:none!important}
.obt-app.bbch-game #obtStage>.obt-empty{font-family:var(--ui);font-size:15px;line-height:1.5;color:var(--ink-dim);padding:48px 24px;text-align:left;max-width:520px}
.obt-app.bbch-game .obt-lgs,.obt-app.bbch-game #obtRail,.obt-app.bbch-game .obt-rows{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.obt-app.bbch-game .obt-lgs::-webkit-scrollbar,.obt-app.bbch-game #obtRail::-webkit-scrollbar,.obt-app.bbch-game .obt-rows::-webkit-scrollbar{width:6px;height:6px;background:transparent}
.obt-app.bbch-game .obt-lgs::-webkit-scrollbar-thumb,.obt-app.bbch-game #obtRail::-webkit-scrollbar-thumb,.obt-app.bbch-game .obt-rows::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
/* the rail's game count sat against the league name on prod ("NFL29 games") */
.obt-app.bbch-game .bbwb-n{margin-left:8px}
/* 102_w23a.css - [W23A 2026-09-20, marker BB_W23A_CSS_V136] the carried reds, in css: the one focus ring that was
still missing, the bypass control that lets a keyboard reader reach the five stops without walking the pane, the
1150 px tile that was cutting its own legend, and the designed empty-league state's own furniture.
HEADER COMMENT WARNING (98_w19b's note, carried by every sheet since, and it is real): this comment closes ONCE,
here, and no prose sits outside it. A second close-comment anywhere in a host css file makes the parser swallow
every rule to the end of the CHAIN.
WHAT IS HERE, AND WHAT MEASURED IT - nothing decorative, every rule has a gate behind it.
1 the Ask box's ring tools/keys_test.py K6, 2 failures, nfl + mlb at 1440. MEASURED with
tools/_w23a_probe.py rings: exactly ONE focusable thing on the whole page paints no ring -
TEXTAREA in #obtTiles, "Ask about this game", computed `outline: none 3px`, box-shadow
none. W20A wrote the ring rule scoped to `.obt-app`; the composer sets `outline:none` on
itself from the chat sheet and wins on specificity. Written here against the element
itself, with the same two-px reading-ink hairline every other control gets.
2 .r9-skip tools/keys_test.py K1. MEASURED at 390 (tools/_w23a_bar.py): 47 focusable things sit
between the three bet dropdowns and the five stops, and the stops are the host's own
`position:fixed` bottom bar LATER in the document. WCAG 2.4.1's answer to a block like
that is a bypass control, so src/04_engine.js renders one as the first thing in the pane.
It must be READ but never SEEN until it holds the keyboard - the standard off-screen clip,
not display:none (which would take it out of the accessibility tree and make it a lie).
3 the 1150 legend tools/vet_fix_test.py item 6, nfl Matchup + Player at 1150. MEASURED: `.bc[data-organ=
playcall] .bb` is 224 px of content in a 168 px box inside a 191 px column - the tile is
doored (the reader can open the whole reading), but a legend that wraps to five lines in a
191 px cell is a cut picture on the way there. Tightened for 1150-1319 only; the 12 px
desktop floor is respected - 12 px is the floor, not a suggestion.
4 the empty league host block 128. The designed state for a league with no games: what is on next, the three
leagues with the most games right now, and the Ask column showing its intro instead of a
black void. Inks and hairlines, 8 px radii, 44 px taps, one typeface. */
/* ---- 1. THE ONE RING THAT WAS MISSING ------------------------------------------------------------------------ */
#obtTiles textarea:focus-visible,
.obt-tiles textarea:focus-visible,
.obt-page textarea:focus-visible,
.obt-app textarea:focus-visible,
#obtApp textarea:focus-visible {
outline: 2px solid var(--ink, #e7ecf5);
outline-offset: 2px;
border-radius: 8px;
}
/* ---- 2. THE BYPASS CONTROL ----------------------------------------------------------------------------------- */
/* MEASURED (tools/_w23a_q.py nfl 390): the first cut of this rule was a bare `.r9-skip` (specificity 0-1-0) and the
button rendered 342 x 44 and fully visible inside the pane - the console's own button rules beat it. A control
that is meant to be invisible until it holds the keyboard has to out-specify the sheet it sits in, so the id the
pane is anchored on is in the selector. It is still ONE rule, not an !important. */
/* MEASURED TWICE. (a) a bare `.r9-skip` selector lost to the console's own button rules and the control rendered
342 x 44 fully visible in the pane (tools/_w23a_q.py), so the id the pane is anchored on is in the selector.
(b) the one-pixel `clip` hide - the usual visually-hidden recipe - made `tools/desk_law_test.py` count 30 CLIPPED
TEXTS, one per tab view, and it was right to: a box whose scrollWidth is larger than its clientWidth is a cut
sentence, and a gate cannot be asked to tell a deliberate one from an accident. The off-screen hide is used
instead: full size, no overflow, nothing clipped, still read by a screen reader and still focusable. */
#obtStage .r9-skip,
.obt-bento .r9-skip,
.r9-skip {
position: absolute;
left: -9999px;
top: auto;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
overflow: visible;
white-space: nowrap;
font: inherit;
background: none;
color: inherit;
}
#obtStage .r9-skip:focus-visible,
#obtStage .r9-skip:focus,
.obt-bento .r9-skip:focus,
.r9-skip:focus-visible,
.r9-skip:focus {
position: static;
left: auto;
width: auto;
height: auto;
min-height: 44px;
margin: 0 0 8px;
padding: 10px 14px;
overflow: visible;
font-family: var(--ui);
font-size: 14px;
color: var(--ink, #e7ecf5);
background: var(--panel-2, #0b1119);
border: 1px solid var(--line, #1e2836);
border-radius: 8px;
outline: 2px solid var(--ink, #e7ecf5);
outline-offset: 2px;
}
/* ---- 3. THE 1150 px TILE THAT CUT ITS OWN LEGEND ------------------------------------------------------------- */
@media (min-width: 1150px) and (max-width: 1319px) {
#obtStage .r9-pane .bc .r9-legend,
#obtStage .r9-pane .bc .r9-legend * {
font-size: 12px;
line-height: 1.25;
}
#obtStage .r9-pane .bc .r9-legend {
margin-top: 4px;
gap: 4px;
}
/* the drawing above it gives the legend the room, rather than the legend being cut: a shorter picture in a
narrow column is still the whole picture. */
#obtStage .r9-pane .bc[data-organ="playcall"] svg,
#obtStage .r9-pane .bc[data-organ="gstyle"] svg,
#obtStage .r9-pane .bc[data-organ="drives"] svg {
max-height: 92px;
}
}
/* ---- 4. THE DESIGNED EMPTY LEAGUE ---------------------------------------------------------------------------- */
.obt-empty2 {
display: block;
padding: 20px 18px 24px;
font-family: var(--ui);
color: var(--ink, #e7ecf5);
}
.obt-empty2 h2 {
margin: 0 0 6px;
font-size: 19px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.obt-empty2 p {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.45;
color: var(--ink-2, #9fb0c4);
}
.obt-empty2 .obt-e2next {
margin: 0 0 18px;
padding: 12px 14px;
border: 1px solid var(--line, #1e2836);
border-radius: 8px;
background: var(--panel-2, #0b1119);
font-size: 14px;
line-height: 1.45;
}
.obt-empty2 .obt-e2next b {
font-weight: 600;
}
.obt-empty2 .obt-e2lab {
margin: 0 0 8px;
font-size: 13px;
color: var(--ink-2, #9fb0c4);
}
.obt-empty2 .obt-e2row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.obt-empty2 .obt-e2go {
min-height: 44px;
padding: 10px 14px;
font-family: var(--ui);
font-size: 14px;
color: var(--ink, #e7ecf5);
background: var(--panel-2, #0b1119);
border: 1px solid var(--line, #1e2836);
border-radius: 8px;
cursor: pointer;
text-transform: none;
letter-spacing: 0;
}
.obt-empty2 .obt-e2go:hover {
border-color: var(--ink-2, #9fb0c4);
}
.obt-empty2 .obt-e2go .obt-e2n {
color: var(--ink-2, #9fb0c4);
}
/* BB_W23B_CSS_V137 - HOST SURFACES IN LIGHT THEME ONLY (package W23B, 2026-09-20).
=====================================================================================================================
WHY THIS FILE EXISTS, and why it is a NEW numbered file rather than an edit to 10_topbar.css or 99_w20a.css: the
host-block law - a change ships as a new numbered file, never as an edit to one that is already minted and live.
WHAT IT FIXES. PROD, 19 Sep (remaining list item 34, the owner's own screen): "LIGHT THEME BROKEN for a light-OS
guest: nav words invisible, Track it verbs black blobs, r9pd-blur not blurred." Every light rule on this console -
including 10_topbar.css:8, the only place the host's own inks are re-stated - is written against
html[data-theme="light"], the stamp the TOGGLE writes. A reader whose operating system is light and who has never
touched the toggle carries NO attribute at all, so none of those rules match, and the site's light page tokens sit
underneath chrome coloured for a dark page. Near-black ink on a near-white ground is fine; near-white ink on it is
the "invisible nav words", and a var(--ink) button with a var(--bg) label is the "black blob".
THE THREE-STATE CONTRACT, from here on, everywhere: an explicit stamp wins in BOTH directions, and the system
preference answers only when there is no stamp. So every rule below is written twice - once for
html[data-theme="light"], once for @media (prefers-color-scheme:light) on a root with no dark stamp - and
html[data-theme="dark"] is never touched, which is what keeps the pinned dark default exactly as it is today.
Measured by tools/light_theme_test.py: contrast >= 4.5:1 for text and >= 3:1 for marks, on every stop, at 1440 and
390, guest and subscriber, in both light states.
SCOPE: light only. Not one byte of this file applies to a dark reader.
===================================================================================================================== */
/* ---- 1. THE CONSOLE'S OWN CHROME: the rail, the band, the stop tabs, the More row, the You panel -------------------
These carry their colour from --ink / --ink-faint / --line, which the host restates per component. Where a
component never restated them, it inherited the dark page's values. They are restated here, once, for the whole
terminal shell, so a word can never be painted in the colour of the ground it sits on. */
html[data-theme="light"] #obtApp,
html[data-theme="light"] .obt-rail,
html[data-theme="light"] .obt-band,
html[data-theme="light"] .obt-stops,
html[data-theme="light"] .obt-more,
html[data-theme="light"] .obt-you{
--ink:#10131A;--ink-dim:#3C4657;--ink-faint:#5C6880;--line:#D9DEE8;--panel:#FFFFFF;--page:#F6F7FA;
color:var(--ink);
}
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]) #obtApp,
:root:not([data-theme="dark"]) .obt-rail,
:root:not([data-theme="dark"]) .obt-band,
:root:not([data-theme="dark"]) .obt-stops,
:root:not([data-theme="dark"]) .obt-more,
:root:not([data-theme="dark"]) .obt-you{
--ink:#10131A;--ink-dim:#3C4657;--ink-faint:#5C6880;--line:#D9DEE8;--panel:#FFFFFF;--page:#F6F7FA;
color:var(--ink);
}
/* the topbar rule the host already ships (10_topbar.css:8) only matches the stamp; the system-light reader needs
the same values and gets them here, with the same !important the original carries so the order cannot decide it. */
:root:not([data-theme="dark"]) .obt-top{--ink:#0f1118;--ink-faint:#606C80;--page:#ffffff;--line:#e3e7ee;background:#fff!important}
:root:not([data-theme="dark"]) .tb-menu{--page:#ffffff;--line:#e3e7ee;background:#fff}
}
/* ---- 2. THE NAV WORDS. The rail's league names and the stop tabs are the "invisible nav words": a rail item at rest
is --ink-faint and the one in focus is --ink, and on a light ground both were being handed the dark page's pale
values. Stated, not inherited. The focus ring is stated with them: a keyboard reader on a light page had a white
ring on white. */
html[data-theme="light"] .obt-rail .obt-lg,
html[data-theme="light"] .obt-stops button{color:#3C4657}
html[data-theme="light"] .obt-rail .obt-lg.on,
html[data-theme="light"] .obt-stops button.on,
html[data-theme="light"] .obt-stops button[aria-selected="true"]{color:#10131A}
html[data-theme="light"] .obt-rail .obt-lg:focus-visible,
html[data-theme="light"] .obt-stops button:focus-visible{outline:2px solid #1D4FD8;outline-offset:1px}
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]) .obt-rail .obt-lg,
:root:not([data-theme="dark"]) .obt-stops button{color:#3C4657}
:root:not([data-theme="dark"]) .obt-rail .obt-lg.on,
:root:not([data-theme="dark"]) .obt-stops button.on,
:root:not([data-theme="dark"]) .obt-stops button[aria-selected="true"]{color:#10131A}
:root:not([data-theme="dark"]) .obt-rail .obt-lg:focus-visible,
:root:not([data-theme="dark"]) .obt-stops button:focus-visible{outline:2px solid #1D4FD8;outline-offset:1px}
}
/* ---- 3. "TRACK IT" AND EVERY OTHER FILLED VERB. The pattern that made the blobs is background:var(--ink) with
color:var(--bg) - correct on dark, where --ink is near-white and --bg near-black, and near-black on near-black the
moment the tokens swap. The fill stays the ink (that is the design: one solid, no gradient outside .r9cta) and the
LABEL becomes white, which is the only value that reads on it in either theme. */
html[data-theme="light"] .obt-verb,
html[data-theme="light"] .ub.u-slip,
html[data-theme="light"] .obt-band .obt-track{background:#10131A;color:#FFFFFF;border-color:#10131A}
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]) .obt-verb,
:root:not([data-theme="dark"]) .ub.u-slip,
:root:not([data-theme="dark"]) .obt-band .obt-track{background:#10131A;color:#FFFFFF;border-color:#10131A}
}
/* ---- 4. THE CREST FALLBACK'S GROUND. K.crest now swaps a 404 crest for the club-colour shield (src/00b_kit2.js,
this package) - the two new leagues, EFL Championship and Brazil Serie A, have no logo file and were printing the
browser's own broken-image glyph. On a light page a pale club colour needs a hairline under it or the shield
disappears into the panel; on dark it never did. */
html[data-theme="light"] .r9-shd,
html[data-theme="light"] .r9-sw{filter:drop-shadow(0 0 0 #D9DEE8)}
html[data-theme="light"] .r9-sw{box-shadow:inset 0 0 0 1px rgba(16,19,26,.18)}
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]) .r9-sw{box-shadow:inset 0 0 0 1px rgba(16,19,26,.18)}
}
/* ---- 5. THE HOST'S OWN SCRIMS AND FILMS. Anything built as a white film over a dark panel is invisible over a white
one; anything built as a black scrim over a dark page punches a hole in a light one. Both are restated. */
html[data-theme="light"] .obt-scrim,
html[data-theme="light"] .bb-scrim{background:rgba(24,28,36,.48)}
html[data-theme="light"] .obt-card,
html[data-theme="light"] .obt-drawer{background:#FFFFFF;border-color:#D9DEE8;color:#10131A}
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]) .obt-scrim,
:root:not([data-theme="dark"]) .bb-scrim{background:rgba(24,28,36,.48)}
:root:not([data-theme="dark"]) .obt-card,
:root:not([data-theme="dark"]) .obt-drawer{background:#FFFFFF;border-color:#D9DEE8;color:#10131A}
}
/* ---- 6. THE SECOND-RANK WORDS IN THE CHROME. tools/light_theme_test.py, first run, nfl at 1440, SYSTEM light:
"switches" in the rail head read 3.5:1 on white and the topbar's own date and initials read 1.06:1 - dark ink on
the dark ground the topbar was still painting, because 10_topbar.css:8 only matches the stamp. --ink-faint is a
dark-page value: it is the right RELATIVE weight and the wrong absolute one the moment the ground turns white.
Every faint word in the chrome is stated at a value that clears 4.5:1 on #FFF, and keeps its rank by being
lighter than --ink, not by being close to the ground. */
html[data-theme="light"] .obt-rail .obt-sw,
html[data-theme="light"] .obt-rail .obt-hd,
html[data-theme="light"] .obt-rail small,
html[data-theme="light"] .obt-top .tb-date,
html[data-theme="light"] .obt-top .tb-me,
html[data-theme="light"] .obt-band small{color:#4A566B}
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]) .obt-rail .obt-sw,
:root:not([data-theme="dark"]) .obt-rail .obt-hd,
:root:not([data-theme="dark"]) .obt-rail small,
:root:not([data-theme="dark"]) .obt-top .tb-date,
:root:not([data-theme="dark"]) .obt-top .tb-me,
:root:not([data-theme="dark"]) .obt-band small{color:#4A566B}
/* the topbar's own words: the stamp rule paints the ground white and the ink near-black; without the stamp the
ground stayed dark and the ink went near-black with it. Both halves, together, or neither. */
:root:not([data-theme="dark"]) .obt-top,
:root:not([data-theme="dark"]) .obt-top *{color:#0f1118}
:root:not([data-theme="dark"]) .obt-top a,
:root:not([data-theme="dark"]) .obt-top button{color:#0f1118}
}
/* 104_w25a.css - [W25A 2026-09-20] BB_W25A_CSS_V144
TWO THINGS THE FRAME OWED, BOTH MEASURED, NEITHER OF THEM A NEW LOOK.
1. THE REPAINT DOES NOT RE-FADE. W24A landed `r9-re` on a pane that is the SAME game and the SAME stop rendered
again (src/04_engine.js, "A REPAINT IS NOT AN ARRIVAL") and its comment ends "css 104 turns the animation off
for it" - css 104 was never written, so the class has been inert on prod. It is written here, with the
redrawn-tile class E.redrawCell puts on a tile it replaces in place. What it cures was measured by
tools/_w24a_focuswalk.py: with a live tick running, 37 of 45 controls in the pane could not take the keyboard,
because `.bc{animation:obtIn .26s ease both}` was restarting on every tile on every rebuild and a tile in the
opacity-0 phase of that animation is not a rendered box. It is also half of what the owner calls the refresh.
The fade is right the first time a reading appears and wrong every time after.
2. THE 13 px TEXT FLOOR, BELT AND BRACES. Each organ's own stylesheet has been lifted (07_you.css, 09_chat.css,
01m_livestate.css, 01u_livecon.css), but the shared card rules in scenes.css set `.r9o-body .src` and
`.r9o-foot` to 11 px for any context the phone scope does not cover, and scenes.css is appended to the head
by the scene loader, so it is LATER in the cascade than this file. These selectors are id-anchored and so win
on specificity rather than on order, which is the only way a floor can be a floor. Sizes only - no colour, no
weight, no family, no spacing: nothing here changes the look of a single line, only whether it can be read.
LAWS: one typeface, inks and hairlines untouched, no pill / glow / gradient, no new colour, no markup. */
#obtStage .r9-five.r9-re .bc,
#obtStage .r9-five .bc.r9-re,
#obtStage .obt-bento.r9-re .bc { animation: none !important; }
#obtStage .r9o-body .src,
#obtStage .r9o-body .dim,
#obtStage .r9o-body .src.cites .srch,
#obtStage .r9o-foot,
#obtTiles .r9o-body .src,
#obtTiles .r9o-body .dim,
#obtTiles .r9o-body .src.cites .srch,
#obtTiles .r9o-foot { font-size: 13px; }
#obtStage .r9-livestrip .r9lv-c,
#obtStage .r9-livestrip .r9lv-mark,
#obtStage .r9lc-rests,
#obtStage .r9lc-why { font-size: 13px; }
/* ------------------------------------------------------------------------------------------------------------------
3. THE GAMES RAIL'S STICKY DAY HEADER.
SEEN BY THE INTEGRATOR on list #20 at 1440: the rail's sticky day header ("Monday, Sep 14") and the game row under
it paint over each other - the row's second line shows through and above the header as the list scrolls.
MEASURED ON THE BENCH FIRST (tools/_w25a_probe3.py nfl 1440), because a fix for a cause that is not there is worse
than no fix:
.obt-day background rgb(21, 23, 31) position sticky z-index 3
.obt-row position static z-index auto height 52
The header already HAS an opaque ground, so the ground is not the hole. What is left is the layer: z-index 3 is
beaten by anything in the list that makes its own stacking context (a transform, a filter, an opacity under 1, a
positioned crest), and a row that wins the layer paints straight over a sticky header whatever its background is.
So the header is lifted clear of the rows rather than given a ground it already has, and the list is told to stop
a keyboard-scrolled row underneath it. No colour, no token, no markup: if the cause on prod is the layer this
closes it, and if it is not, nothing about the look has changed and the bench says so either way. */
#obtRows .obt-day { z-index: 6; }
#obtRows { scroll-padding-top: 2.4em; }
/* ------------------------------------------------------------------------------------------------------------------
4. THE BAND'S CITY / VENUE + RECORD LINE SITS UNDER THE CLUB NAME, NOT BESIDE IT.
LOOKED AT (shots/w22a/w25a_after_nfl_call_1440_sub.png, the first capture after block 132 seated the line):
`.bbch-side` is a flex ROW of [crest][name], so a third child lands BESIDE the name and steals its width - the
band read "Falco won 3 of the l..." with the away club's own name clipped to five letters and the home club's
clipped to "S". 98_w19b.css already gives this line its type and its ellipsis and says `display:block`, which a
flex row ignores; what it needs is a line of its own. One declaration on the side, one on the line:
the side is allowed to wrap and the line takes a whole row of it. Nothing else about the band moves. */
#obtStage .bbch-side { flex-wrap: wrap; }
#obtStage .bbch-side .bbwb-sub,
#obtStage .hr1 > .tm .bbwb-sub { flex: 0 0 100%; width: 100%; display: block; }
/* LOOKED AT again (w25a_after2): the home side reads "Acrisure Stadium - won 3 of th..." - 98_w19b.css caps this
line at 22ch, which was written when it carried a CITY ("Detroit") and not a ground name. The venue plus the
record needs more room on a desktop; the phone keeps its own 16ch cap, where a shorter line is the right one. */
@media (min-width: 821px) {
#obtStage .bbch-side .bbwb-sub,
#obtStage .hr1 > .tm .bbwb-sub { max-width: 34ch; }
}
/* BB_W25B_CSS_V145 [2026-09-20, W25B ask 3, integrator] LIGHT THEME, the host hero band: a club name sat in faint ink ON the club's own
colour ('Sydney Swans' on #ED171F measured 1.55:1 in the stamped light state; even full ink on that red is 4.26:1, under the 4.5
floor). In light the club colour stays on the 3 px tick beside the name and never behind it (the pattern .bbcv-tm i already uses);
the name takes full ink on the page ground. Dark is untouched. */
html[data-theme="light"] .obt-stage .bbh .bbch-side{background:none}
html[data-theme="light"] .obt-stage .bbh-tm b{color:var(--ink)}