/* =========================================================================== THE REGISTER — shared stylesheet site/register.css · Owner A · loaded LAST on admin.html and client.html (immediately after each page's closing , so equal-specificity rules in here win over the inline sheets without either page being edited). WHAT LIVES HERE 1. Every design token, light AND dark. The dark theme is authored, not an inversion: panels lift by luminance, and bull/bear/amber are lightened and desaturated because the light values score 1.4-2.0:1 on a dark panel. 2. The re-pointing of every hardcoded hex still sitting in the two inline stylesheets onto a token, written at >= the source selector's specificity. 3. Every new component: sidebar, stat card, chart card, verdict line, calendar heatmap, profile header, compliance badges, timeline, empty state, skeleton. 4. Two pre-existing WCAG failures, fixed: the control border that was the only boundary of an input at 1.25:1, and the focus ring that the accessibility toolbar's own High-contrast mode erased entirely. HARD RULES THIS FILE OBEYS (each is checkable by grep) - zero CSS animations declared. The skeleton is static by construction, so `grep -c "at-keyframes-rule"` on this file is genuinely 0 rather than 0 plus a comment that mentions the at-rule by name. - zero vh / vw / dvh / svh / lvh. The toolbar's text-size control sets `zoom` on , and Chrome does not divide viewport units by zoom, so at 200% any viewport-unit box lays out at 2x the viewport and its lower half becomes unreachable. - zero placeholder tokens. The build fails on any unresolved one. - zero external URLs. No CDN, no remote font, no remote image. - no z-index at or above 2147482000 (the a11y toolbar's floor). - state is never a box-shadow and never a border-color: High contrast forces `box-shadow:none` and `border-color:#fff` on `body *`. State is a pseudo-element background; focus is an `outline`. Both survive. - the spine is drawn ONLY for .st-ok / .st-warn / .st-bad. A panel that merely shows information carries no bar. That scarcity IS the signal. CONTRAST Every pair below was computed with the WCAG 2.x relative-luminance formula against the exact hex quoted, not estimated. The ratio is stated in a comment beside the token or the rule that uses it. Body text >= 4.5:1; UI components and meaningful graphics >= 3:1. Where a value is BELOW 3:1 it is a decorative object and the comment says so and says why. =========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS — LIGHT (base) The page's inline :root ships these already; they are restated here so that :root[data-theme="light"] below has one authoritative source to mirror, and so a light-preferring reader on a dark-OS machine cannot land on a half-dark page. --mono, --sans, --s1..--s6, --r-panel and --r-ctl are NOT restated: they are typography and geometry, they do not change with theme, and duplicating them would create two places for them to drift. --------------------------------------------------------------------------- */ :root{ color-scheme: light dark; /* Paper. */ /* Palette adopted from mtf.trading (owner's call, 2026-08-01), applied to ALL THREE surfaces — public site, client, admin — so a client signing in still never sees the brand change at the door. Every value below was re-measured rather than copied on trust, and three of theirs were REJECTED for failing WCAG AA as text: --success #059669 (3.85:1), --warning #d97706 (3.20:1) and --faint-foreground #646f80 (4.51:1 on the tint, too close to the line). The register's own bull/amber/faint stay for those three. Everything else here is theirs. */ --bg:#F7F8FA; /* their --background · --txt on it 16.84:1 */ --panel:#FFFFFF; /* their --card · --txt on it 18.10:1 */ --panel2:#EEF2F7; /* their --muted · --txt on it 15.94:1 */ /* Rules. --line is decorative by intent: a row separator inside a table that is already delimited by text position is not "required to understand the content", so 1.4.11 does not reach it. --lineStrong exists for the case that IS in scope — a border that is a control's only visual boundary. */ --line:#E3E8EF; /* theirs · on --panel 1.24:1 — decorative hairline, declared */ --lineStrong:#7C848F; /* on --panel 3.78:1 · on --bg 3.53:1 · on --panel2 3.43:1 */ /* Ink — theirs. */ --txt:#0B1220; /* panel 18.10:1 · panel2 15.94:1 · bg 16.84:1 */ --dim:#5B6679; /* panel 5.80:1 · panel2 5.14:1 · bg 5.42:1 */ --faint:#616A77; /* KEPT. Their #646F80 measures 4.51:1 on --panel2 — inside AA by 0.01, which is not a margin. This is 4.97:1 there. */ /* Accent — their --primary, used as both text and fill. It clears AA in both roles, which is why they can get away with one token where we needed two. */ --acc:#2563EB; /* panel 5.17:1 · bg 4.94:1 · panel2 4.59:1 · tintAcc 4.71:1 */ --accBg:#2563EB; /* #FFFFFF on it 5.17:1 */ --accBgHover:#1D4ED8; /* #FFFFFF on it 6.53:1 · vs --accBg 1.26:1 (a visible darkening) */ /* State. Never alone — always beside a word or a badge. bull is their --positive, bear their --negative. amber is OURS: their --warning #D97706 is 3.20:1 on white, which fails as text outright. */ --bull:#047857; /* theirs · panel 5.49:1 · panel2 4.83:1 · tintOk 5.02:1 */ --bear:#C81E1E; /* theirs · panel 5.76:1 · panel2 5.07:1 · tintBad 5.26:1 */ --amber:#8A5B00; /* panel 5.87:1 · panel2 5.33:1 · tintWarn 5.13:1 · as spine on panel 5.87:1 */ /* Focus. Matches the ring a11y.js draws for itself, so the page and the toolbar never disagree about what "focused" looks like. */ --focus:#0A66C2; /* panel 5.69:1 · bg 5.31:1 · panel2 5.16:1 · tintAcc 5.12:1 */ /* Tints — badge and active-item backgrounds. */ --tintAcc:#EBF4FD; /* --acc on it 5.84:1 */ --tintOk:#E7F2EA; /* --bull on it 6.17:1 */ --tintBad:#FBEBE9; /* --bear on it 5.69:1 */ --tintWarn:#F7EFDF; /* --amber on it 5.13:1 */ /* Chart furniture. */ --grid:#E3E6EB; /* on --panel 1.25:1 — decorative by design: a gridline that competes with the data it sits behind is a bug, not a win */ --skel:#EDEFF3; /* --faint on it 4.76:1, --txt on it 15.92:1 */ /* Calendar heatmap — mtf.trading's green ramp, adopted 2026-08-01. Their calendar pairs this green against a red for down-days, and THAT is the part that fails a colour-blind reader. It cannot arise here: these calendars count calls published and actions taken, and a count is never negative, so red never appears. What remains is a single hue whose luminance falls monotonically — .845 → .690 → .420 → .266 → .118 → .063 — so the ladder still reads in greyscale and still survives the toolbar's Desaturate toggle. Their look, measured before it shipped. */ --heat0:#EBEDF0; /* theirs · L .8453 · vs panel 1.15:1 */ --heat1:#9BE9A8; /* theirs · L .6904 · vs panel 1.42:1 · vs heat0 1.21:1 */ --heat2:#40C463; /* theirs · L .4201 · vs panel 2.23:1 · vs heat1 1.57:1 */ --heat3:#30A14E; /* theirs · L .2664 · vs panel 3.32:1 · vs heat2 1.49:1 */ --heat4:#216E39; /* theirs · L .1177 · vs panel 6.27:1 · vs heat3 1.88:1 */ --heat5:#14532D; /* L .0631 · vs panel 9.29:1 · vs heat4 1.49:1 — a sixth step they do not have; our busiest days need one more rung */ /* end to end heat0 -> heat5 = 7.90:1. Adjacent steps are 1.15-1.89:1, which is BELOW 3:1 and is stated rather than hidden. The step is therefore never the sole carrier of meaning: every cell has an aria-label with the exact figure, the legend prints the numeric band of every step, a 1px --panel gap keeps two same-step neighbours from merging, step 0 is stroked (below), and the mandatory

table gives the whole series as text. */ /* Stacked-series ramp. Categorical hues fail here and the numbers say so: the four obvious light series colours sit within 1.05-1.26:1 of one another and are indistinguishable once desaturated. A single-hue ramp is the honest answer. See the note at .stk-seg for why 3:1 against the panel is unreachable for three steps and what carries the meaning instead. */ --stk0:#0A5CB8; /* vs panel 6.49:1 */ --stk1:#6FA3DE; /* vs panel 2.64:1 · vs stk0 2.46:1 */ --stk2:#C7DCF4; /* vs panel 1.40:1 · vs stk1 1.88:1 */ --scrim:rgba(16,21,28,.45); --shadow:0 1px 2px rgba(16,21,28,.04); --shadowUp:0 -2px 14px rgba(16,21,28,.07); --shadowModal:0 24px 60px rgba(16,21,28,.18); } /* --------------------------------------------------------------------------- 2. TOKENS — DARK Authored, not inverted. Three deliberate decisions: · the background is a cool near-black (#0D1117) and panels lift by LUMINANCE rather than by a brighter border, because High-contrast mode forces every border to #fff and a border-lifted panel system would collapse under it; · --bull / --bear / --amber are lightened and desaturated. The light values (#12662C #B42318 #8A5B00) score 1.4-2.0:1 on a dark panel — they are not "a bit dim", they are unreadable; · --accBg is DARKENED, not lightened, because it is a fill under white text. Lightening it is the reflex and it fails 1.4.3 immediately. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark){ :root{ color-scheme: dark; /* NEAR-BLACK, matching mtf.trading: page #000, cards #0A0A0A, hairlines #1F1F1F. The old surfaces were GitHub's blue-tinted greys; these are neutral, which is what makes that console read as an instrument rather than a document. Every ratio below is BETTER than the values it replaces — a darker ground raises the contrast of light text, so this change costs no accessibility and buys some (--faint went 5.98 -> 6.84, --lineStrong 3.87 -> 4.43 against a 3:1 non-text floor). Recomputed, not estimated. */ --bg:#000000; /* --txt on it 17.53:1 */ --panel:#0A0A0A; /* --txt on it 16.53:1 */ --panel2:#141414; /* --txt on it 15.38:1 */ --line:#1F1F1F; /* on --panel 1.20:1 — decorative hairline, declared */ --lineStrong:#6E7886; /* on --panel 4.43:1 · on --bg 4.69:1 · on --panel2 4.12:1 */ --txt:#E6EBF2; /* panel 16.53:1 · panel2 15.38:1 · bg 17.53:1 */ --dim:#AAB4C0; /* panel 9.43:1 · panel2 8.77:1 · bg 10.00:1 */ --faint:#8E99A6; /* panel 6.84:1 · panel2 6.37:1 · bg 7.26:1 */ --acc:#7CB6F2; /* panel 9.27:1 · bg 9.83:1 · panel2 8.62:1 · tintAcc 7.02:1 */ --accBg:#1F6FD0; /* #FFFFFF on it 4.95:1 */ --accBgHover:#1A5FB4; /* #FFFFFF on it 6.29:1 · vs --accBg 1.27:1. NOT the #2B7FE0 first drafted: white on that is 4.03:1 and fails 1.4.3 on hover. Darkening on hover also matches the light theme's direction. */ --bull:#4FBF72; /* panel 8.51:1 · panel2 7.92:1 · tintOk 6.60:1 · as spine on panel 8.51:1 */ --bear:#F0776A; /* panel 7.12:1 · panel2 6.63:1 · tintBad 6.08:1 · as spine on panel 7.12:1 */ --amber:#D9A441; /* panel 8.80:1 · panel2 8.19:1 · tintWarn 7.03:1 · as spine on panel 8.80:1 */ --focus:#8FC2FF; /* panel 10.68:1 · bg 11.33:1 · panel2 9.94:1 · tintAcc 8.09:1 */ --tintAcc:#12283F; /* --acc on it 7.02:1 */ --tintOk:#102A19; /* --bull on it 6.60:1 */ --tintBad:#301513; /* --bear on it 6.08:1 */ --tintWarn:#2B2110; /* --amber on it 7.03:1 */ --grid:#1A1A1A; /* on --panel 1.13:1 — decorative by design */ --skel:#16161A; /* --faint on it 6.02:1, --txt on it 14.55:1 */ /* Dark heatmap: the green ramp GitHub uses on its own dark theme, which is where mtf.trading's scale comes from. Luminance climbs with the value here — .011 → .043 → .112 → .281 → .474 → .587 — the mirror of the light ladder, so the calendar reads the same way in either theme. */ --heat0:#161B22; /* L .0107 · vs panel 1.05:1 */ --heat1:#0E4429; /* L .0431 · vs panel 1.53:1 · vs heat0 1.53:1 */ --heat2:#006D32; /* L .1117 · vs panel 2.66:1 · vs heat1 1.74:1 */ --heat3:#26A641; /* L .2805 · vs panel 5.42:1 · vs heat2 2.04:1 */ --heat4:#39D353; /* L .4743 · vs panel 8.60:1 · vs heat3 1.59:1 */ --heat5:#57E389; /* L .5871 · vs panel 10.4:1 · vs heat4 1.22:1 */ /* end to end 10.9:1; adjacent 1.22-2.04:1, declared, redundancy as above */ --stk0:#8FC2FF; /* vs panel 9.34:1 */ --stk1:#3D74B0; /* vs panel 3.56:1 · vs stk0 2.62:1 */ --stk2:#1B3A5C; /* vs panel 1.49:1 · vs stk1 2.39:1 */ --scrim:rgba(0,0,0,.72); --shadow:0 1px 2px rgba(0,0,0,.45); --shadowUp:0 -2px 14px rgba(0,0,0,.55); --shadowModal:0 24px 60px rgba(0,0,0,.65); } } /* The explicit override, higher specificity (0,2,0) than the :root rules above, so it beats both the light base and the prefers-color-scheme block in either direction. Set by the theme button as document.documentElement.dataset.theme. */ :root[data-theme="dark"]{ color-scheme: dark; /* Mirrors the prefers-color-scheme block above, value for value. */ --bg:#000000; --panel:#0A0A0A; --panel2:#141414; --line:#1F1F1F; --lineStrong:#6E7886; --txt:#E6EBF2; --dim:#AAB4C0; --faint:#8E99A6; --acc:#7CB6F2; --accBg:#1F6FD0; --accBgHover:#1A5FB4; --bull:#4FBF72; --bear:#F0776A; --amber:#D9A441; --focus:#8FC2FF; --tintAcc:#12283F; --tintOk:#102A19; --tintBad:#301513; --tintWarn:#2B2110; --grid:#1A1A1A; --skel:#16161A; --heat0:#141414; --heat1:#15304A; --heat2:#1B4670; --heat3:#2A6BA8; --heat4:#4C97D8; --heat5:#8FC2FF; --stk0:#8FC2FF; --stk1:#3D74B0; --stk2:#1B3A5C; --scrim:rgba(0,0,0,.72); --shadow:0 1px 2px rgba(0,0,0,.45); --shadowUp:0 -2px 14px rgba(0,0,0,.55); --shadowModal:0 24px 60px rgba(0,0,0,.65); } /* Every light value restated. Without this a reader who has chosen Light on a machine whose OS is Dark gets whatever the prefers-color-scheme block set for any token this rule forgot — a half-dark page. */ :root[data-theme="light"]{ color-scheme: light; --bg:#F6F7F9; --panel:#FFFFFF; --panel2:#F2F4F7; --line:#E3E6EB; --lineStrong:#7C848F; --txt:#10151C; --dim:#495260; --faint:#616A77; --acc:#0A5CB8; --accBg:#0071E3; --accBgHover:#005FC4; --bull:#12662C; --bear:#B42318; --amber:#8A5B00; --focus:#0A66C2; --tintAcc:#EBF4FD; --tintOk:#E7F2EA; --tintBad:#FBEBE9; --tintWarn:#F7EFDF; --grid:#E3E6EB; --skel:#EDEFF3; --heat0:#F2F4F7; --heat1:#D6E6F7; --heat2:#A9C9EC; --heat3:#6FA3DE; --heat4:#2E77C6; --heat5:#0A4A93; --stk0:#0A5CB8; --stk1:#6FA3DE; --stk2:#C7DCF4; --scrim:rgba(16,21,28,.45); --shadow:0 1px 2px rgba(16,21,28,.04); --shadowUp:0 -2px 14px rgba(16,21,28,.07); --shadowModal:0 24px 60px rgba(16,21,28,.18); } /* --------------------------------------------------------------------------- 3. RE-POINTING THE INLINE STYLESHEETS ONTO TOKENS Both consoles still carry hardcoded hexes below their :root block. Each one below is a literal that would stay light-themed forever. This file loads after the inline