/* MY BUSINESS — /my-account/. Editorial rather than admin-console: sections carry the hierarchy, so the screen needs no card wall to look organised. THE HEADER COMMENT HERE USED TO SAY "Tokens come from tokens.css; nothing here re-declares a colour that already has a name." That was false. Six names this file asked for — --bbn-brown, --bbn-line, --bbn-teal, --bbn-cream, --bbn-gold, --bbn-muted — were defined in tokens.css, in this repository, and on the live page: nowhere. Every one fell through to a hardcoded fallback frozen before the token system existed, so the screen painted a stale palette while claiming to be on the shared one. Settled by measurement, not assumption: tools/member-tests/theme-variable-probe.mjs read all six on live /my-account/ in a signed-in browser, at :root and scoped to .mybiz, and every one came back empty while the canonical tokens all resolved. Each is now mapped by the job it does, not by nearest hex. */ .mybiz{max-width:860px;margin:0 auto;padding:0 16px 64px;font-family:var(--bbn-font);color:var(--bbn-text)} .mybiz__loading,.mybiz__err{font-size:var(--bbn-size-body);padding:24px 0} .mybiz__err{color:var(--bbn-error)} /* ---- THE SHARED PAGE HEADER ------------------------------------------------ The same band every other Portal view carries: a restrained --bbn-surface-connected wash, a --bbn-brand-deep structural edge, a compact heading and the explanatory copy inside it. Not a hero — the padding is the Portal's own, and the measure is reserved with padding rather than max-width so the fill runs the full column instead of stopping mid-band where the text ends. Same technique, same numbers, as member-journey.css; this file does not invent a second version of it. */ .mybiz__head{ background:var(--bbn-surface-connected); border-left:4px solid var(--bbn-brand-deep); border-radius:0 var(--bbn-radius) var(--bbn-radius) 0; padding:12px 20px 13px; padding-right:max(20px, calc(100% - 62ch)); margin:0 -20px 16px; } .mybiz__title{ margin:0 0 5px; font-size:var(--bbn-size-page-title); font-weight:var(--bbn-weight-title); letter-spacing:-.01em; line-height:var(--bbn-leading-tight); } .mybiz__lede{margin:0;font-size:var(--bbn-size-page-intro);line-height:var(--bbn-leading-body);max-width:none} /* Sits below the header band now rather than inside it: two tinted blocks nested read as one muddy region, and this is a warning with its own surface. */ .mybiz__note{margin:0 0 20px;padding:10px 12px;border-left:3px solid var(--bbn-accent); background:var(--bbn-warning-surface);font-size:13.5px;line-height:1.5;max-width:62ch} /* One message region, announced. Three states that must never be confused for one another. Each now takes the semantic pair for the state it reports rather than a brand tint that happened to read as "something good happened". */ .mybiz__msg{margin:16px 0 0;font-size:14px;line-height:1.5;min-height:0} .mybiz__msg--ok{padding:10px 12px;background:var(--bbn-success-surface);border-left:3px solid var(--bbn-success)} .mybiz__msg--err{padding:10px 12px;background:var(--bbn-error-surface);border-left:3px solid var(--bbn-error);color:var(--bbn-error)} .mybiz__sec{padding:28px 0 4px;border-bottom:1px solid var(--bbn-border)} .mybiz__sec:last-of-type{border-bottom:0} /* Section headings take the Portal's section size and weight, and a brand tick, so the screen reads with the same hierarchy as every other view rather than as a flat run of bold lines. */ .mybiz__h2{margin:0 0 4px;font-size:var(--bbn-size-section);font-weight:var(--bbn-weight-section); letter-spacing:-.01em;padding-left:11px;position:relative} /* HEADING COLOUR IS PINNED, NOT INHERITED. Neither heading here ever declared a colour, so both took whatever the theme gives that tag. That was invisible while the sections were

— the theme's h2 colour happens to equal --bbn-text — and became visible the moment they stepped down to

, which the theme paints #05222E, a blue-black among brown text. Caught by the production probe, not locally, because only the live page has the theme. Both are now stated at matched specificity so the tag they use cannot decide their colour again. */ .mybiz .mybiz__title, .mybiz .mybiz__h2{color:var(--bbn-text)} .mybiz__h2::before{content:"";position:absolute;left:0;top:.28em;width:3px;height:.85em; border-radius:2px;background:var(--bbn-brand)} .mybiz__help{display:block;margin:4px 0 0;font-size:var(--bbn-size-meta);line-height:1.5; color:var(--bbn-text-muted);max-width:60ch} /* Two columns on a wide screen, one on a phone. Textareas and the name span the full width because a short box teaches people to write short answers. */ .mybiz__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin-top:18px} .mybiz__row{display:flex;flex-direction:column;gap:6px;min-width:0} .mybiz__row:has(textarea),.mybiz__row--check{grid-column:1/-1} .mybiz__row label{font-size:13px;font-weight:var(--bbn-weight-strong)} .mybiz__req{color:var(--bbn-error)} .mybiz__row input[type=text],.mybiz__row input[type=url],.mybiz__row input[type=email], .mybiz__row input[type=tel],.mybiz__row select,.mybiz__row textarea{ font:var(--bbn-weight-body) var(--bbn-size-body)/1.45 var(--bbn-font);color:inherit;padding:10px 12px; border:1px solid var(--bbn-border);border-radius:var(--bbn-radius);background:var(--bbn-surface); width:100%;box-sizing:border-box} .mybiz__row textarea{resize:vertical;min-height:96px} .mybiz__row--check{flex-direction:row;align-items:flex-start;gap:10px;flex-wrap:wrap} .mybiz__row--check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto} .mybiz__row--check label{font-weight:400;font-size:14px;line-height:1.45} .mybiz__row--check .mybiz__help{flex-basis:100%;margin-left:28px} :where(.mybiz) :is(input,select,textarea,button,a):focus-visible{ outline:3px solid var(--bbn-focus-inner);outline-offset:0; box-shadow:0 0 0 6px var(--bbn-focus-ring)} .mybiz__actions{padding:24px 0 4px} /* box-sizing IS LOAD-BEARING, not tidiness. The ≤720px rule below sets width:100% on this button, and under the default content-box that 100% is the CONTENT width — the 20px of side padding is then added on top, pushing the element 40px past its container and giving the whole screen a horizontal scrollbar at 360px. Measured: 26px of document overflow, caused by the quiet SourceBBN/Documents links. The inputs above already carry border-box for the same reason; the button was the one control that missed it. */ .mybiz__btn{display:inline-block;box-sizing:border-box; background:var(--bbn-brand);color:var(--bbn-text-on-brand); font:var(--bbn-weight-strong) 14px var(--bbn-font);padding:11px 20px;border:0; border-radius:var(--bbn-radius);cursor:pointer;text-decoration:none;min-height:var(--bbn-target-min)} .mybiz__btn[disabled]{opacity:var(--bbn-disabled-opacity);cursor:default} .mybiz__btn--quiet{background:var(--bbn-surface-subtle);color:var(--bbn-brand); border:1px solid var(--bbn-border)} /* A LIVE CONTRAST FAILURE, FOUND BY THE PROBE AND NOT REPRODUCIBLE LOCALLY. Both quiet buttons — "Manage your capability profile" and "Open documents" — are elements, and the WordPress theme styles links gold. Its selector outranks a single class, so production painted #C6A664 on the canvas: 2.17:1, against the 4.5 those 14px labels need. The local harness does not load the theme, so every screenshot showed the intended green and the defect was invisible until a signed-in browser measured the computed value. Raising specificity to element+class is what makes the plugin's own colour win. The primary button is a