/* ══════════════════════════════════════════════════════════════════════════════════════════ COMMAND BAR v2 — one band, at every viewport, in every game state ══════════════════════════════════════════════════════════════════════════════════════════ CEO, 18 Aug: "rebuild this from scratch - you are fucking up the patch." Correct. The bar has collapsed into stacked bands three times now (CEO-70, CEO-76, and again at week 11), and each time it was nudged by eye rather than held to a contract. This file owns the bar's LAYOUT outright, and `tools/cmdbar_spec.js` is the contract it has to satisfy. ── THE CAUSE, measured, one line out of a DOM dump at week 11 ───────────────────────────── div.hud-group.hud-primary [610,128 221x123] flex/WRAP Four stats needing ~311px of track, inside a 221px box, with `flex-wrap:wrap`. They wrapped onto three rows; three rows of stats is what forces the bar to 144px; 144px of stacked stats is what the CEO has photographed three times. It was never a spacing problem — it is a wrapping container that was never told it must not wrap. ── WHY IT ONLY SHOWS UP LATER IN A RUN ─────────────────────────────────────────────────── Week 1 carries cash/reputation/clients/week. Week 11 adds cred, valuation, time, wahwahs and wahcoins. The bar is fine on a fresh save and breaks on a real one, which is exactly why every previous fix "worked" when it was checked. The spec therefore tests week 1 AND week 11. ── THE MODEL ───────────────────────────────────────────────────────────────────────────── One row, never wrapping, three zones: [ identity ] [ readouts ————— flexible, clips before it wraps ] [ actions ] Identity and actions are fixed and always fully visible. The readout strip is the only elastic member, because it is the only one whose contents legitimately grow during a season. When space runs short the SECONDARY controls shed their text labels before anything wraps — losing a word is recoverable, losing the layout is not. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── 1 · the bar is a single row. Nothing in it may wrap, ever. ──────────────────────────── */ html body .topbar{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:10px !important; height:auto !important; min-height:0 !important; padding:8px 14px !important; overflow:hidden !important; /* a clip is a bug you can see; a wrap is one you cannot */ } /* ── 2 · the readout strip — the elastic member, and the one that was wrapping ───────────── ⛔ `flex:1 1 auto` on the groups was WRONG and the spec caught it: it let both groups shrink to ~100px while their `flex:0 0 auto` children kept their natural size, so the children spilled outside their own boxes and the two groups' readouts interleaved on top of each other. One band with the numbers overlapping is not a fix, it is the same defect lying flatter. The groups size to their CONTENT (`flex:0 0 auto`). The elastic member is the ROW around them, which is the only thing that should absorb slack. */ html body .topbar > .row{ flex:1 1 auto !important; min-width:0 !important; flex-wrap:nowrap !important; align-items:center !important; gap:14px !important; /* last line of defence: if a future state adds a readout nobody budgeted for, it gets clipped at the edge of its own zone rather than drawn on top of the controls next door. A clip is a bug you can see in one screenshot; an overlap reads as a broken app. */ overflow:hidden !important; } html body .topbar .hud-group, html body .topbar .hud-group.hud-primary, html body .topbar .hud-group.hud-secondary{ /* shrink-and-clip, not grow-and-spill. `flex:0 0 auto` with `overflow:visible` let the group keep its natural width and paint its readouts straight over the sign-in control next door — visible in a 1920 screenshot as SIGN IN sitting on top of the WEEK figure. Allowing the group to SHRINK (`0 1 auto`) and clip its own overflow keeps every readout inside its own zone. */ flex:0 1 auto !important; min-width:0 !important; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:16px !important; overflow:hidden !important; } html body .topbar .hud-group > .stat{flex:0 0 auto !important} html body .topbar .spacer{flex:0 1 8px !important; min-width:0 !important} html body .topbar > .row.is-signedout{flex:0 0 auto !important; flex-wrap:nowrap !important} /* ⛔ NINE READOUTS DO NOT FIT ONE ROW, and pretending otherwise is what produced every previous version of this bug. Week 11 carries cash · reputation · clients · week · cred · valuation · time · wahwahs · wahcoins, alongside identity and seven controls. Something has to give, and the choice is between losing the LAYOUT or losing some READOUTS from this one surface. So the secondary group appears only where it genuinely fits. Nothing is deleted and no value becomes unreachable: cred, valuation, wahwahs and wahcoins are all read from their own panels (the CFO sheet and the store), which is where a player goes to act on them anyway. The command bar keeps the four a player steers by every single week. */ /* ⛔ NO BREAKPOINT. The second readout group is hidden at EVERY width, and that is the whole point of this change. I first tried to find a width where it fits: 1500 failed, 1700 failed, 1900 failed — because nine readouts plus identity plus seven labelled controls exceed any realistic bar. Every "it fits above X" is a threshold waiting to be crossed by one more stat next season, which is precisely how this bug returned three times. So there is no threshold to get wrong. The command bar carries the four readouts a player steers by every week — cash, reputation, clients, week. Cred, valuation, wahwahs and wahcoins are read in the CFO sheet and the store, where a player goes to act on them anyway. Nothing is deleted and nothing becomes unreachable. */ html body .topbar .hud-group.hud-secondary{display:none !important} /* ── 3 · the readouts themselves: two tight lines, so one band is ~64px not 144px ────────── */ html body .topbar .stat{ display:flex !important; flex-direction:column !important; justify-content:center !important; gap:1px !important; padding:0 !important; margin:0 !important; white-space:nowrap !important; } html body .topbar .stat b{font-size:15px !important; line-height:1.15 !important} html body .topbar .stat span{font-size:10px !important; line-height:1.15 !important; letter-spacing:.12em !important} html body .topbar .stat.stat-hero b{font-size:18px !important} /* ── 4 · the actions never wrap and never shrink below a tap target ──────────────────────── */ html body .topbar .tb-btn, html body .topbar > button{flex:0 0 auto !important; min-height:40px !important; white-space:nowrap !important} html body .topbar > .row.is-signedout{flex:0 0 auto !important; flex-wrap:nowrap !important} /* ── 5 · SHEDDING ORDER. Below 1500px the secondary actions drop their word and keep their icon; the connection sentence goes first because it is the only purely informational string in a row of controls. Nothing here changes what anything DOES. ────────────────── */ /* ⛔ `.who` goes at EVERY width, not just narrow ones — the spec caught it colliding with the readouts at 1680. "offline · connection" is the one purely informational sentence in a row of controls, and it sits directly beside a Sign in button that already states the same fact. A duplicate sentence is not worth the 195px that was pushing the readouts into it. */ html body .topbar .who{display:none !important} /* ⛔ ICON-ONLY AT EVERY WIDTH, and this is the decision the whole rebuild turns on. The words STORE / CFO / COO / FEED / LEAGUE cost about 165px of the bar. That 165px is the difference between four readouts fitting and the bar either wrapping (the original bug) or clipping "Clients" to "CLI" and losing the week entirely (measured in a 1920 screenshot two minutes ago). A label you can infer from an icon is worth less than a number you cannot. Every button keeps its accessible name, so nothing is lost to a screen reader or a tooltip — only to sighted redundancy. Consistent at all widths on purpose: a bar that changes shape at a breakpoint is a bar with a breakpoint left to regress. */ html body .topbar .tb-btn:not(.tb-endweek) > span:not([aria-hidden]){ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; } html body .topbar .tb-btn:not(.tb-endweek){padding-left:13px !important; padding-right:13px !important} /* ⛔ 1280 IS THE TIGHT END, and the spec found the last casualty there: the WEEK readout was being clipped. Clipping a number is information loss, which this spec fails on deliberately — it is the failure mode that let "one clean band" hide a missing figure earlier today. So at the narrow end the width comes out of DECORATION, in order of how little it costs: the wordmark shrinks, the identity line tightens, and the gaps close. The four readouts are the last thing to give, because they are the only reason the bar exists. */ @media (max-width:1379px){ html body .topbar .brandmark{max-width:104px !important; overflow:hidden !important} html body .topbar .stat.stat-id{max-width:118px !important} html body .topbar .hud-group{gap:11px !important} html body .topbar{gap:8px !important; padding-left:10px !important; padding-right:10px !important} html body .topbar > .row{gap:10px !important} html body .topbar .tb-btn:not(.tb-endweek){padding-left:10px !important; padding-right:10px !important} }