/* ══════════════════════════════════════════════════════════════════════════ oai-a.css. TODAY [1] and COMPARE [2], repaired after the openai-scale.css type jump. Owns ONLY those two views. Edits no existing stylesheet; instrument.css and today.css are untouched and are overridden from here. Type, spacing, colour and alignment only. No copy, no number, no layout meaning. Every epistemic label ("3 of 11", "premium is a lower bound", "no fill feed, our gap", "not read, our gap, not their silence", "Not shown, not dropped", "we looked, the venue has none") is load bearing and this file only ever makes MORE room for one, never less. ══════════════════════════════════════════════════════════════════════════ */ /* ══ 1. THE TODAY HERO READS IN ONE DIRECTION ══════════════════════════════ * MEASURED on the mirror at 1440x1000 before this file: .td-kpi is a two * column grid, so .td-say ("ETH took the most option premium in the last 24 * hours.") sits at x=151 and the 76px .td-n ("$1.81M") sits at x=983 with * text-align:right, its right edge at 1289. The claim and the figure it * belongs to are 832px apart and pull the eye in opposite directions, and * .td-nu ("51.7% of the $3.50M we saw, across 814 fills") is right aligned * under the number while the sentence it qualifies is left aligned across the * row. Three nodes, three reading origins. * * today.css already puts them in the right DOM ORDER: .td-say, then .td-fig * holding .td-n then .td-nu. So the fix is not to move anything, it is to stop * splitting them into columns. Collapsing to one column gives exactly the * stack the owner asked for, in source order: * claim, then number, then qualifier, all from the same left edge. * ─────────────────────────────────────────────────────────────────────────── */ html body .view[data-view="today"] .td-kpi { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-items: start !important; /* 16px, two units. The claim and its figure are one thought, so they get less air between them than the 32px that separates sections below. */ gap: 16px !important; } /* The figure column stops being a right hand column. */ html body .view[data-view="today"] .td-fig { text-align: left !important; width: 100% !important; max-width: 100% !important; } /* today.css pushes .td-nu with margin-left:auto above 900px, which is what right aligned it. Cancelled: the qualifier line hangs off the same left edge as the claim and the number. */ html body .view[data-view="today"] .td-nu { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; /* 38ch at 14px measured 306px wide inside the old narrow column and forced the sentence into 3 lines. On a full width row it wants a reading measure, not a column width. 62ch holds it to one line at 1440 and two at 900. */ max-width: 62ch !important; margin-top: 8px !important; } /* The number no longer has a 306px column to fit inside, so the clamp can stop fighting for width. Left aligned, tabular, unchanged in size. */ html body .view[data-view="today"] .td-n { text-align: left !important; } /* ══ 2. THE WINDOW CELL LOSES ITS BORDER ═══════════════════════════════════ * MEASURED: .td-p--bad carries `outline: 1px solid var(--neg)` (today.css:256) * around a 284x69 cell. --neg is not one of the five brand values * (bg #0c0a08, ink #f8f4f0, muted #9b8e82, accent #ff7a1a, line #302a23), so a * salmon rectangle was the single loudest mark on a 1440px page while carrying * one word and one figure, less than any of the three cells beside it. * * The outline goes. The cell keeps its place in the 1px grid and keeps its * value colour, because that colour is the section refusing its own headline * and is a meaning, not a flourish. Removing the box removes the shouting * without removing the statement. * ─────────────────────────────────────────────────────────────────────────── */ html body .view[data-view="today"] .td-p--bad { outline: 0 !important; outline-offset: 0 !important; border: 0 !important; box-shadow: none !important; } /* ══ 3. SECTION RHYTHM ON AN 8px SCALE ═════════════════════════════════════ * MEASURED between the Today sections before this file: .td-kpi bottom 204 to * .td-prov top 230, .td-prov bottom 301 to .td-winbox top 327, .td-winbox * bottom 418 to .td-brk top 444. Three gaps, all 26px, none of them on any * scale. 26px is also too tight now that the base is 14px and body line height * is 1.55: the leading inside a block is 22px, so a 26px gap between blocks is * barely a line, and the four sections read as one wall. * * 32px, four units. Whitespace BETWEEN sections. Nothing is added inside the * provenance strip or inside a list row, which stay dense on purpose. * ─────────────────────────────────────────────────────────────────────────── */ html body .view[data-view="today"] .panel.td { display: flex !important; flex-direction: column !important; row-gap: 32px !important; } /* The two list columns under the break are a dense surface, not a section stack: they keep their own internal spacing and only gain air from the 32px above them. */ html body .view[data-view="today"] .td-brk { margin-top: 0 !important; } /* ══ 4. THE TWO BOTTOM RIGHT CARDS STACK WITH REAL AIR ═════════════════════ * MEASURED at 1440x1000 and at 390x844: the tour card .ob ends 16px above the * analytics notice, and the notice ends 16px above the viewport floor. Three * stacked edges all at 16px read as one crowded block in the corner rather * than two separate things, and 16px is the same value as the gutter, so * nothing tells the eye they are unrelated. * * analytics.js already measures the notice and writes --m-notice-h (measured * 67px at both widths), so the stack itself is sound. Two changes: * a) the separation goes to 40px, five units, so the two cards are plainly * two cards; * b) a 72px floor under --m-notice-h, because that variable is written ONCE * when the notice is appended. openai-scale.css loads after it and * reflows the notice, so a value captured before that reflow can be * short, and a short value is the one case that puts the tour card back * on top of the notice. The floor makes an understated measurement * impossible to collide with. The 86px fallback in analytics.js is above * the floor and still wins when the variable is missing entirely. * ─────────────────────────────────────────────────────────────────────────── */ html.m-has-notice body .ob { bottom: calc(max(var(--m-notice-h, 86px), 72px) + 40px) !important; } /* ══ 5. COMPARE: SECTION RHYTHM AND THE CARD GRID ══════════════════════════ * The Compare view survived the type jump without clipping (checked every leaf * node on both views for scrollWidth over clientWidth: zero hits), so nothing * here is a repair of broken text. It is the same 8px rhythm as Today, applied * to the three bands the view is built from: the picker context, the band * panel, and the 11 venue cards. * * The venue cards each end in an epistemic line ("no fill feed, our gap", * "book not read, our choice", "quoted on request, nothing rests", * "we looked, the venue has none"). At 14px those lines are now taller than * they were at 12px, so the card foot gets room rather than a tighter leading. * ─────────────────────────────────────────────────────────────────────────── */ html body .view[data-view="overview"] .ov-ctx { margin-bottom: 32px !important; } /* NOT DONE, and deliberately. A sweep of every leaf node on Compare for scrollWidth over clientWidth returned only the .sc-l spans, which sit at clientWidth 1 by design: grid.js carries both a short `head` and a long `label` per column and collapses the long one at desk width. That is a responsive label pattern, not type overflow, so nothing here widens or unwraps it. The epistemic feet on the 11 venue cards ("no fill feed, our gap", "book not read, our choice", "quoted on request, nothing rests", "we looked, the venue has none") were measured intact at 14px at both 1440 and 390 and needed no rescue. */