/* ============================================================ M5 — accessibility fixes (UNCONDITIONAL) + "Editorial Field Labels" restyle (flag-gated, default ON) — Sol correction 2026-07-12 TWO layers, deliberately separated: LAYER A — accessibility, UNCONDITIONAL. Scoped under body.ap-m5-a11y, which is STATIC MARKUP on the tag in index.html — not added by JS — so every rule here applies on every load, in every flag state, even if every script on the page fails. The scope class exists only to keep each override at the same specificity the rules were verified at (body. …), never to gate them. ?apM5Editorial=0 has NO effect on this layer. A1. Contrast token remaps (WCAG AA) A2. Label suffix ink (the failing red asterisk) A3. Auth screen contrast + dead Microsoft SSO removal A4. Visible :focus-visible rings A5. Mobile input/touch-target usability A6. Remove-glyph contrast (pipeline + My People) A7. Mobile login cleanup (Americana brand header, fictitious mock-row removal) — per Sol 2026-07-12, ONLY the editorial typography + pipeline layout may sit behind the escape hatch, so this cleanup (and its contrast wins) is unconditional. LAYER B — editorial restyle, FLAG-GATED (apM5Editorial, DEFAULT ON; ?apM5Editorial=0 / localStorage.ap_m5_editorial='0' disables). Scoped under body.ap-m5-editorial, added by ap-m5-editorial.js only when the flag is on. The escape hatch may disable ONLY what lives here: B1. Editorial Field Labels — the mono/uppercase/navy treatment B2. Mobile pipeline — stacked single-column list (Option A) ============================================================ */ /* ════════ LAYER A — accessibility (unconditional) ════════ */ /* ---------- A1. contrast token remaps ---------- --amx-ink-3 (#7A8090) is 3.95:1 on white — fails AA for the mono eyebrows, hints and column counts that use it. Remap to the existing EP muted ink (#586273, 6.2:1). --a4-faint (#6B7A95, 4.35:1) remaps to the existing --a4-muted (#5A6A85, 5.4:1). Token-level so every consumer (masthead eyebrows, act1 hint, pipeline counts, .apx-faint) passes at once — same cascade trick the amx theme itself uses. */ body.ap-m5-a11y { --amx-ink-3: var(--ep-muted, #586273); --a4-faint: var(--a4-muted, #5A6A85); } /* ---------- A2. label suffix ink ---------- Inline-colored suffix spans ("*", "(optional)") follow the label ink so the red-on-white 4.1:1 asterisk can't fail contrast inside a label — whatever ink the label currently carries (default or editorial). */ body.ap-m5-a11y .auth-label span, body.ap-m5-a11y .amx-fld-label span { color: inherit !important; font-weight: inherit !important; } /* ---------- A3. auth screen — contrast + dead SSO ---------- */ /* #718096 / #A0AEC0 / #CBD5E0 grays on white fail AA — lift the passing grays that already exist in the palette (--gray-600 / --gray-500). */ body.ap-m5-a11y .auth-card-sub { color: var(--gray-600, #4B5563); } body.ap-m5-a11y .auth-testimonial-quote { color: var(--gray-600, #4B5563); } body.ap-m5-a11y .auth-testimonial-role { color: var(--gray-500, #6B7280); } body.ap-m5-a11y .auth-card > div[style*="#CBD5E0"] { color: var(--gray-500, #6B7280) !important; } /* red links + error text: #E53E3E is 4.1:1 — use the palette's --error-dark */ body.ap-m5-a11y #authScreen a[data-ap-auth-action] { color: var(--error-dark, #B91C1C) !important; } body.ap-m5-a11y .auth-error { color: var(--error-dark, #B91C1C); } /* Americana hero small print: rgba(255,255,255,.42) on navy is 3.6:1 */ body.ap-m5-a11y .amx-trust-meta, body.ap-m5-a11y .amx-trust-meta a { color: rgba(255,255,255,0.72); } /* the fictitious-data stamp at .30 alpha is ~1.9:1 — keep the stamp look but at an alpha that clears 4.5:1 on the white doc card */ body.ap-m5-a11y .amx-watermark span { color: rgba(178,34,52,0.85); border-color: rgba(178,34,52,0.85); } /* app footer copyright renders at opacity .7 (3.6:1 on the canvas) */ body.ap-m5-a11y .main > div[style*="opacity:0.7"] { opacity: 1 !important; color: var(--a4-muted, #5A6A85) !important; } /* dead SSO: the disabled "Continue with Microsoft" button goes nowhere — remove it (and its note + the now-pointless "or" divider) from the card */ body.ap-m5-a11y .amx-ms-btn, body.ap-m5-a11y .amx-ms-note, body.ap-m5-a11y .amx-divider { display: none !important; } /* ---------- A4. visible focus rings ---------- Component-level ":focus { outline:none }" rules (amx fields, EP field overrides, global search) out-specificity the app-wide :focus-visible ring, so keyboard users get only a 1px border-color change. Restore a clear ring — navy to match the EP focus treatment; !important + late load order beats the EP "outline:0 !important" of equal specificity. */ body.ap-m5-a11y .amx-act1-name:focus-visible, body.ap-m5-a11y .amx-fld:focus-visible, body.ap-m5-a11y #researchName:focus-visible, body.ap-m5-a11y #researchNotes:focus-visible, body.ap-m5-a11y .global-search:focus-visible, body.ap-m5-a11y .auth-input:focus-visible, body.ap-m5-a11y .search-input:focus-visible, body.ap-m5-a11y .filter-select:focus-visible, body.ap-m5-a11y .settings-input:focus-visible { outline: 2px solid var(--ep-navy, #1B2A52) !important; outline-offset: 2px !important; } /* white ring on the navy mobile "More" sheet (red-on-navy is ~2.1:1) */ body.ap-m5-a11y .more-menu-item:focus-visible, body.ap-m5-a11y .mobile-nav-btn:focus-visible, body.ap-m5-a11y .nav-item:focus-visible, body.ap-m5-a11y .logout-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.85) !important; outline-offset: -2px; } /* ---------- A5. mobile input / touch-target usability ---------- */ @media (max-width: 768px) { /* 16px inputs stop iOS focus-zoom jumping the layout; the forgot/register links get a real touch target (they are 13px text) */ body.ap-m5-a11y .auth-input { font-size: 16px; } body.ap-m5-a11y #authScreen a[data-ap-auth-action] { display: inline-block; padding: 8px 6px; font-size: 14px !important; } } /* ---------- A6. remove-glyph contrast ---------- The ✕ remove glyphs fail AA at any width: pipeline cards use #CBD5E0 (1.8:1), the My People rows (CRM cards + M9 research table) inline #CBD5E0/#C2C8D0 — lift the passing gray from the palette. !important beats the inline style. */ body.ap-m5-a11y [data-ap-pipeline-action="remove"], body.ap-m5-a11y [data-ap-crm-action="remove-person"] { color: var(--gray-500, #6B7280) !important; } /* ---------- A7. mobile login cleanup ---------- */ @media (max-width: 768px) { /* the mobile brand header still shows the retired consumer look (red gradient + fake "Hot Lead" rows) above the Americana card — settle it onto the Americana navy and drop the fictitious mock rows (whose low-alpha text also failed AA on the gradient) */ body.ap-m5-a11y .auth-mobile-brand { background: var(--amx-navy, #1B2A52); animation: none; padding: 32px 24px 24px; } body.ap-m5-a11y .auth-mobile-brand::before { display: none; } body.ap-m5-a11y .auth-mobile-brand-name span { background: none; -webkit-background-clip: initial; -webkit-text-fill-color: currentColor; color: #fff; } body.ap-m5-a11y .auth-mobile-brand-tagline { opacity: 0.85; font-weight: 400; } body.ap-m5-a11y .auth-mobile-mock { display: none; } body.ap-m5-a11y .auth-panel { padding: 24px 20px 40px; } } /* ════════ LAYER B — editorial restyle (flag-gated) ════════ */ /* ---------- B1. Editorial Field Labels ---------- The locked Editorial Precision label voice — IBM Plex Mono, uppercase, tracked, navy (lifted verbatim from body.ep-theme .amx-anchors::before in ap-editorial-precision.css). Applied to the research anchors, the research context/depth labels, modal form labels and the auth labels. !important where the EP layer already pins size/color with !important (equal specificity — this file loads after it, so order wins). */ body.ap-m5-editorial .amx-fld-label, body.ap-m5-editorial .amx-research-context label, body.ap-m5-editorial .amx-research-depth-head label, body.ap-m5-editorial .form-label, body.ap-m5-editorial .auth-label { font-family: var(--ep-mono, 'IBM Plex Mono', ui-monospace, monospace) !important; font-size: 10.5px !important; letter-spacing: .13em !important; text-transform: uppercase !important; color: var(--ep-navy, #1B2A52) !important; font-weight: 600 !important; } /* ---------- B2. mobile pipeline — stacked list (Option A) ---------- The board div/columns ALWAYS carry .amx-pipeline-board/.amx-pipeline-col (permanent markup in ap-americana-pipeline.js / ap-pipeline.js — the keyboard-reachability a11y wiring in ap-m5-editorial.js keys on them unconditionally). Only this LAYOUT keys on the flag class, so ?apM5Editorial=0 restores the horizontal board without ever touching accessibility. Card metrics lifted from the app's existing mobile card patterns (.church-card mobile: 14px padding; .data-table mobile cards: 10px radius, 8px stack gap). */ @media (max-width: 768px) { body.ap-m5-editorial .amx-pipeline-board { flex-direction: column !important; overflow-x: visible !important; gap: 12px !important; padding-bottom: 8px !important; } body.ap-m5-editorial .amx-pipeline-board .amx-pipeline-col { min-width: 0 !important; max-width: none !important; width: 100%; } body.ap-m5-editorial .amx-pipeline-board [data-ap-pipeline-action="open-detail"] { padding: 14px !important; margin-bottom: 8px !important; border-radius: 10px !important; } } /* ---------- A7. county cards: keyboard operability ---------- The five county grids (#countyGrid, #bizCountyGrid, #npCountyGrid, #refCountyGrid, #groupCountyGrid) render each county as a click-handled

. Mouse users could load a county; keyboard users could not reach one AT ALL. axe reported this indirectly as `scrollable-region-focusable` on the grid — the grid was unreachable because nothing inside it could hold focus. The cards now carry role="button" tabindex="0" (ap-a11y-keyboard.js bridges Enter/Space onto the existing delegated click), which fixes the underlying hole and satisfies the axe rule as a consequence rather than by silencing it. A focus ring is not optional here: tabindex="0" without a visible ring would hand keyboard users focus they cannot SEE, which is a worse defect than the one being fixed. Navy matches the A4 ring above; the cards sit on white/tinted-loaded backgrounds where navy stays legible. outline-offset is negative so the ring hugs the card inside the scroll container instead of being clipped at the grid's overflow edge. */ body.ap-m5-a11y .county-card:focus-visible { outline: 2px solid var(--ep-navy, #1B2A52) !important; outline-offset: -2px !important; } /* ---------- A8. keyboard-scrollable regions ---------- A scroll container whose contents are non-interactive (e.g. the Manager Portal's team research activity list) needs tabindex=0 so a keyboard user can scroll it — axe's scrollable-region- focusable. tabindex without a visible ring hands keyboard users focus they cannot see, so .ap-kb-scroll carries the same navy ring. Inset so it hugs the region inside its own overflow. */ body.ap-m5-a11y .ap-kb-scroll:focus-visible { outline: 2px solid var(--ep-navy, #1B2A52) !important; outline-offset: -2px !important; } /* ---------- A9. EP top-nav interactive elements: visible focus ---------- The brand link (.ep-brand, the AdvisorProspect logotype), the account-menu button (#epAvatar), and the top-nav links are keyboard-reachable but the EP theme gives them no clear focus ring. A keyboard user needs to SEE where focus is (WCAG 2.4.7). Navy ring, offset so it sits clear of the element rather than being clipped. */ body.ap-m5-a11y .ep-brand:focus-visible, body.ap-m5-a11y #epAvatar:focus-visible, body.ap-m5-a11y .ep-nav > a:focus-visible, body.ap-m5-a11y .ep-acct-menu a:focus-visible, body.ap-m5-a11y .ep-acct-menu button:focus-visible { outline: 2px solid var(--ep-navy, #1B2A52) !important; outline-offset: 2px !important; border-radius: 4px; }