/* MDAT & BOA card — the utilization filter, the BOA tick on the bar, and the summary rail (ISH-660, ISH-682, ISH-706, ISH-707, ISH-716, ISH-721, ISH-725, ISH-730). ⚠️ THE TWO HOSTS DIVERGE AGAIN, AND THE SPLIT IS NOT WHERE ANY EARLIER PASS LEFT IT. As of ISH-730: analytics.html (Sales Report, MDAT & BOA by Broker) — .mdat-split, .mdat-rail, and a rail holding BOTH cards: Utilization mix + Watchlist. Plus the chips. broker.html (broker detail, MDAT & BOA by Company) — chips and the table, nothing else. No .mdat-split, no rail, no mix, no watchlist, and no Above/At/Below tally anywhere on the page. So .mdat-split, .mdat-rail, .rail-*, .mix-* and .watch-* are ANALYTICS-ONLY, and .util-chip*, .mdat-main, .mdat-head-text, .mdat-caption, .chart-boa-tick and .chart-col-headers are SHARED. ⚠️ Do not delete the analytics-only rules as dead just because broker.html stopped using them — that page renders the markup and would render it UNSTYLED, silently, with no error to catch it. Check BOTH hosts before touching anything here. (Write class globs with commas, not slashes: a `.rail-*` immediately followed by a `/` closes this comment and the file stops parsing.) The churn is worth reading once, because five of the six passes below shipped and were then reversed, and each left comments behind claiming to describe the current state. The underlying complaint was always the same — the card named Above/At/Below twice, ~300px apart — and it has been resolved in both directions on both hosts: ISH-682 rail (mix + watchlist) added to broker.html, matching analytics.html ISH-706 broker.html: rail dropped, counts folded onto the chips ISH-707 analytics.html: opposite call — the mix BECOMES the filter, chips deleted ISH-716 broker.html: Watchlist restored by request, chips kept ISH-721 analytics.html: chips restored, mix deleted — hosts converge ISH-725 BOTH: mix restored as a readout, chip counts deleted, rail split out of the card ISH-730 broker.html: mix AND watchlist removed by request — hosts diverge again (Variants are deleted rather than left defined-but-unused, on the same reasoning each time — an orphan invites the next person to reach for it. Gone for good: .mdat-split .is-full, ISH-706's no-rail variant, which lost its host to ISH-716; and the counted chip's .has-count, .uc-dot and .uc-n, which lost both hosts to ISH-725. The .mix-* block was deleted by ISH-721 and RESTORED by ISH-725 — it is live again on analytics.html, so it is the one thing here that came back.) Shared because this card now exists on two pages: the Sales Report's MDAT & BOA by Broker and broker detail's MDAT & BOA by Company. The rules started inline in analytics.html; ISH-682 ported the card to broker.html and, per AGENTS.md, a component used by more than one page gets one stylesheet rather than a second copy. Both hosts link this file. What is NOT here: the card's older shared pieces (.chart-row, .chart-label, .chart-bar, .chart-bar-wrap, .status-badge) which each page still defines inline and which differ between them in small deliberate ways. Unifying those is a bigger job than this change, and doing it halfway would be worse than leaving them. .chart-col-headers DID move here (ISH-701). It was listed above as one of the pieces that "differ between them in small deliberate ways" — it did not: the two copies were character for character identical, and ISH-701 rewrites the header into a table head that has to stay identical, so a second copy is now a liability rather than a deliberate divergence. ONE RULE EACH HOST STILL OWNS: `.chart-bar-wrap { overflow: visible }`. It belongs to that page's own track rule rather than here, and it is load-bearing for the tick — see the .chart-boa-tick comment below. Every var() resolves on both hosts: --card-bg / --text-secondary / --nav-bg / --green / --red come from css/tokens.css, and --border / --border-light / --radius-lg / --text / --text-label from each page's own :root. Audited per host. */ /* ========================================================================== ISH-660. MDAT & BOA card: table left, utilization summary right. ⚠️ ANALYTICS.HTML ONLY as of ISH-730 — broker.html dropped its rail and no longer renders .mdat-split at all. Not dead code: deleting this leaves the Sales Report's rail unstyled. Everything from here down to .rail-empty is in that same position. ========================================================================== */ .mdat-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; } /* Below this the rail would squeeze the bars into uselessness, so it drops under the table instead. */ @media (max-width: 1100px) { .mdat-split { grid-template-columns: minmax(0, 1fr); } } .mdat-main { min-width: 0; } .mdat-rail { display: flex; flex-direction: column; gap: 1rem; } .rail-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem 1rem; } .rail-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; } .rail-tag { font-size: 0.5625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red); background: rgba(166, 38, 38, 0.1); padding: 0.15rem 0.4rem; border-radius: 4px; } /* ISH-725. The rail's cards sit BESIDE the chart card, not inside it. .mdat-split used to be the chart card's own inner grid (.analytics-card > .mdat-split > .mdat-main + .mdat-rail), which put bordered rail cards inside a bordered chart card — a box in a box. It is now the OUTER grid: the chart card and the rail are siblings, so the page reads as three containers (chart | mix | watchlist) rather than one containing two. See the .mdat-split rule above; the columns are unchanged, only what sits in them. ⚠️ .mdat-main STAYS, inside the card, even though the card could now be the containing block itself. ISH-701's invariant is that the column header and the rows share one containing block — deleting the wrapper would still satisfy that, but its test asserts the header is inside .mdat-main by name, and the wrapper costs nothing. This is why .mdat-main is SHARED while .mdat-split is not: broker.html kept the wrapper when ISH-730 took its rail and its split away. */ /* ISH-725. Restored from before ISH-707, verbatim rather than re-authored. The mix has been three things: a READOUT beside the chip filter (ISH-660/682), then the FILTER itself with button rows and a clear control (ISH-707), then deleted outright (ISH-721 on analytics.html, ISH-706 on broker.html). It is a readout again, so these are the pre-ISH-707 rules — .mix-row is a plain div, not a button, and there is no .mix-clear, no .is-selected, no :disabled state. The chips are the filter. ⚠️ Do not restore the ISH-707 interactive variant on top of this. Two controls for the same three buckets, ~300px apart, is the exact complaint this whole run of issues began with. ⚠️ ONE HOST as of ISH-730: analytics.html. broker.html has no mix — and, since ISH-725 had already taken the counts off the chips, no Above/At/Below tally at all. That is the decided end state there, not an unfinished removal. */ .rail-sub { font-size: 0.75rem; color: var(--text-label); margin-top: 0.1rem; } /* Stacked utilization split. Colours are the same three the per-row .status-badge and the GAP column already use — aggregated, not a new palette. Segments flex on their own counts, so an empty bucket takes NO width rather than a sliver that overstates it. */ .mix-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; margin: 0.7rem 0 0.75rem; background: #ececec; } .mix-seg-above { background: var(--green); } .mix-seg-at { background: #c9c9c9; } .mix-seg-below { background: var(--red); } .mix-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; padding: 0.2rem 0; } .mix-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .mix-count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .watch-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--border-light); } .watch-row:first-child { border-top: none; } .watch-name { font-size: 0.8125rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The deep link to broker.html. analytics.html's rows ARE brokers, so its watchlist links; broker detail's were platform companies and never did — and as of ISH-730 that page has no watchlist at all, so this rule has exactly one host. */ .watch-name a { color: inherit; text-decoration: none; } .watch-name a:hover { color: var(--red); text-decoration: underline; } .watch-meta { font-size: 0.6875rem; color: var(--text-label); margin-top: 0.1rem; } .watch-gap { margin-left: auto; font-size: 0.8125rem; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } .rail-empty { font-size: 0.75rem; color: var(--text-label); font-style: italic; padding: 0.4rem 0; } /* Utilization filter chips. Multi-select, so these are toggles rather than a segmented control — see the markup comment for why that distinction was kept. */ .util-chips { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .util-chip { font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: #ffffff; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; white-space: nowrap; /* ISH-706. Was implicitly inline-block, for a chip that then held a colour dot and a count pill needing to sit on the text's centre line. Those are gone (ISH-725), so this is a no-op for a label-only chip on both hosts — kept because it is the correct display for the box either way, and re-adding a badge later should not have to rediscover it. */ display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.15s, color 0.15s, border-color 0.15s; } .util-chip:hover:not(.is-active):not(:disabled) { border-color: #999999; color: var(--text); } .util-chip.is-active { background: var(--nav-bg); border-color: var(--nav-bg); color: #ffffff; font-weight: 700; } /* ========================================================================== ISH-725. The chips are PLAIN again — no counts, no colour dots. ISH-706 put a tally and a dot on each chip and deleted the Utilization mix card that had carried them; ISH-721 did the same on the other host. ISH-725 reverses both: the counts and the proportion bar live in the restored mix card (see .mix-* above), and the chips go back to being just the filter. The .has-count / .uc-dot / .uc-n rules are deleted rather than left behind — nothing renders them now, and an orphan invites the next person to reach for it. Recover them from history if the counts are ever wanted back on the chip. ⚠️ ONE PIECE OF ISH-706 SURVIVES ON PURPOSE: the empty-bucket disable below. It never needed the count to be VISIBLE on the chip — only computed. Without it "At" and "Below" look identical to a populated bucket at zero and clicking either blanks the table with nothing on screen saying why. That guard now carries different weight per host (ISH-730). On analytics.html the mix card still supplies the "why" — a 0 beside that bucket — and the guard only stops the click. On broker.html the mix is gone and the chips are plain, so the dimmed chip is the ONLY signal that a bucket is empty. Weakening it there (dimming without `disabled`, or dropping it as cosmetic) loses the signal outright rather than duplicating one. ========================================================================== */ /* A bucket with no rows in the period. Disabled in the markup as well as dimmed, so the filter cannot be driven into a table that is guaranteed to be empty — which is what "At" and "Below" both did at zero before this. */ .util-chip.is-empty, .util-chip:disabled { opacity: 0.45; cursor: not-allowed; } /* ISH-660. BOA as a tick on the bar. The track is full-width, so the tick can sit PAST the bar's end — exactly the below-utilization case worth spotting, and the thing the old layout (a BOA number two columns away) left entirely to the reader. ⚠️ This needs `overflow: visible` on `.chart-bar-wrap`, which each host sets in its own track rule. The tick's `top: -2px; bottom: -2px` makes it 4px taller than the 14px track, so `overflow: hidden` clips that overhang and the tick stops reading as a tick. It is NOT about horizontal overhang: the tick is positioned against the full track and clamped to 100%, so it never needs to leave it sideways. (The comment here used to say the opposite — that the wrap kept `overflow: hidden` and the tick stayed inside it — which was already untrue of analytics.html when ISH-682 read it. Corrected rather than copied.) */ .chart-boa-tick { position: absolute; top: -2px; bottom: -2px; width: 2.5px; border-radius: 1px; background: var(--nav-bg); transform: translateX(-50%); pointer-events: none; } /* ========================================================================== ISH-701. The card reads as a table: a captioned head, ruled rows, and a GAP column carrying the MDAT − BOA arithmetic the reader was doing by eye. ========================================================================== */ /* One line under the card title saying what the bar and the tick are. The card header is a space-between flex row (title group left, util chips right), so the caption cannot be a sibling of the title without landing beside the chips — it goes in a column wrapper with the title group instead. */ .mdat-head-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .mdat-caption { font-size: 0.8125rem; color: var(--text-label); } /* Column header row above the scrollable chart — reuses the exact same column classes as the data rows so widths line up automatically. ⚠️ THE HEADER MUST BE A CHILD OF .mdat-main, NOT A SIBLING OF .mdat-split. Reusing the column classes only lines the header up with the rows if the two share a containing block. analytics.html had the header outside .mdat-split, so it measured against the full card while the rows measured against the card minus the 300px rail, and every label sat ~320px right of its column (ISH-701). Nothing in CSS can catch that — the widths are all correct, the box they are laid out in is not. padding-right matches .chart-rows' own scrollbar gutter for the same reason: without it the right-aligned BOA/GAP headers sit 0.35rem out from their values. The rule is `.chart-row.chart-col-headers`, not `.chart-col-headers`, because both hosts declare `.chart-row { height: 24px }` in a