/* /shared/audit-content.css * * Canonical audit-section styles for the shared audit renderer * (/shared/audit-content.js). Extracted from _templates/entity-audit.html * (the approved canonical presentation, chq-redesign-2026-06 slice 5a) and * namespaced under mra- so pages that still carry their legacy audit CSS can * preview the shared renderer without style bleed. Pages provide the design * tokens (--color-*); this file defines none. */ /* CORE score cards */ .mra-scorecard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2.5rem 0; } .mra-score-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.5rem 1rem 1.25rem; text-align: center; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; } .mra-score-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.06); } .mra-score-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; } .mra-score-card.mra-score-low::after { background: var(--color-danger); } .mra-score-card.mra-score-med::after { background: var(--color-warning); } .mra-score-card.mra-score-high::after { background: var(--color-success); } .mra-ring-wrap { position: relative; width: 88px; height: 88px; margin: 0 auto 12px; } .mra-ring-bg, .mra-ring-fg { fill: none; stroke-width: 5; stroke-linecap: round; } .mra-ring-bg { stroke: var(--color-border); } .mra-ring-fg { transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); transform: rotate(-90deg); transform-origin: center; } .mra-score-val { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.375rem; } .mra-score-val span { font-size: .75rem; opacity: .4; font-weight: 400; } .mra-score-low .mra-ring-fg { stroke: var(--color-danger); } .mra-score-low .mra-score-val { color: var(--color-danger); } .mra-score-med .mra-ring-fg { stroke: var(--color-warning); } .mra-score-med .mra-score-val { color: var(--color-warning); } .mra-score-high .mra-ring-fg { stroke: var(--color-success); } .mra-score-high .mra-score-val { color: var(--color-success); } /* Unscored pillar: no signal to read, which is not the same as scoring zero. Neutral throughout, so it cannot be mistaken for a bad result. */ .mra-score-card.mra-score-none::after { background: var(--color-border); } .mra-score-none .mra-ring-fg { stroke: transparent; } .mra-score-none .mra-score-val { color: var(--color-muted); } .mra-score-val-none { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } .mra-score-note { font-size: .6875rem; color: var(--color-muted); margin-top: .35rem; line-height: 1.4; } .mra-score-label { font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px; } .mra-score-pillar { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .9375rem; color: var(--color-heading); } /* Collapsible pillar sections */ .mra-collapsible { margin-bottom: .75rem; } .mra-collapsible-toggle { width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem; color: var(--color-heading); text-align: left; transition: all .2s ease; } .mra-collapsible-toggle:hover { border-color: var(--color-primary); box-shadow: 0 2px 10px rgba(0,202,138,.06); } .mra-collapsible-toggle .mra-arrow { transition: transform .3s ease; color: var(--color-primary); font-size: 1rem; } .mra-collapsible.open .mra-collapsible-toggle .mra-arrow { transform: rotate(180deg); } .mra-collapsible.open .mra-collapsible-toggle { border-radius: 12px 12px 0 0; } .mra-collapsible-content { max-height: 0; overflow: hidden; transition: max-height .4s ease; background: var(--color-surface); border: 0 solid var(--color-border); border-width: 0 1px; border-radius: 0 0 12px 12px; } .mra-collapsible.open .mra-collapsible-content { max-height: 5000px; border-width: 0 1px 1px 1px; } .mra-collapsible-content-inner { padding: 1.25rem; overflow: hidden; } /* Clear pillar: a pillar that turned up nothing. Sits in the same rhythm as the collapsibles (same margin, radius and border weight) so the four pillars read as one list, but carries no toggle and no hover affordance, because there is nothing behind it to open. */ .mra-clear { display: flex; gap: .875rem; align-items: flex-start; margin-bottom: .75rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-primary-light, var(--color-border)); border-radius: 12px; } .mra-clear-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,202,138,.12); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; margin-top: .1rem; } .mra-clear-body { min-width: 0; } .mra-clear-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem; color: var(--color-heading); margin: 0 0 .35rem; } .mra-clear-badge { display: inline-block; margin-left: .5rem; font-family: 'Inter', sans-serif; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: .15rem .45rem; border-radius: 4px; background: rgba(0,202,138,.1); color: #00B477; vertical-align: middle; } .mra-clear-text { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--color-body); } .mra-clear-fixed { margin: .6rem 0 0; font-size: .9375rem; line-height: 1.7; color: var(--color-body); } .mra-clear-fixed strong { color: var(--color-heading); } /* Incomplete assessments share layout, with no success colour or checkmark. */ .mra-unassessed { border-color: var(--color-border); } .mra-unassessed .mra-clear-icon, .mra-unassessed .mra-clear-badge { background: var(--color-bg, #f4f5f7); color: var(--color-body, #475569); } /* Tracker summary: ring + tiles above the findings list. Only the Visibility Audit renders these nodes; the other templates never emit them. */ .mra-tracker { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: .875rem; margin-bottom: 1.5rem; align-items: stretch; } .mra-tracker-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.25rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; } .mra-tracker-ringcard { padding: 1.1rem 1.4rem; } .mra-tracker-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; } .mra-tracker-ring svg { width: 96px; height: 96px; transform: rotate(-90deg); } .mra-ring-track, .mra-ring-done { fill: none; stroke-width: 9; stroke-linecap: round; } .mra-ring-track { stroke: var(--color-border); } .mra-ring-done { stroke: var(--color-primary); transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1); } .mra-tracker-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; color: var(--color-heading); } .mra-tracker-pct strong { font-size: 1.625rem; font-weight: 700; } .mra-tracker-pct span { font-size: .8125rem; opacity: .5; margin-left: 1px; } .mra-tracker-val { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 2.75rem; color: var(--color-heading); line-height: 1; letter-spacing: -0.02em; } .mra-tracker-card.is-todo .mra-tracker-val { color: var(--color-muted); } .mra-tracker-card.is-doing .mra-tracker-val { color: var(--color-info, #3B82F6); } .mra-tracker-card.is-done .mra-tracker-val { color: var(--color-success, #00CA8A); } .mra-tracker-label { font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); } @media (max-width: 860px) { .mra-tracker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mra-tracker-ringcard { grid-column: 1 / -1; flex-direction: row; gap: 1rem; } .mra-tracker-val { font-size: 2.25rem; } } /* Sticky while the findings are on screen. position:sticky is scoped to its containing block, so the bar rides down the findings section and releases on its own once the section ends. No scroll maths, no cleanup, and it cannot escape into the rest of the page. The host carries the stickiness rather than the bar itself, because the bar is replaced wholesale on every repaint. */ /* The host keeps its resting height even when the bar inside collapses (see measure() in the proposal template), so the shrink cannot shift layout and feed back into its own threshold. That leaves a taller-than-visible pinned box, which would swallow clicks on the findings beneath it, so only the bar itself accepts pointer events. */ #auditTrackerHost { position: sticky; top: .5rem; z-index: 60; pointer-events: none; } #auditTrackerHost .mra-tracker { pointer-events: auto; } /* Pinned: the same five cards collapse into one low bar. Numbers stay first and large enough to read at a glance, since the point is to watch Done climb while working, not to reproduce the panel. */ .mra-tracker.is-stuck { grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 6px 20px rgba(30,42,94,.10); overflow: hidden; } .mra-tracker.is-stuck .mra-tracker-card { flex-direction: row; align-items: baseline; justify-content: center; gap: .45rem; background: transparent; border: none; border-radius: 0; padding: .6rem .5rem; border-left: 1px solid var(--color-border); } .mra-tracker.is-stuck .mra-tracker-card:first-child { border-left: none; } .mra-tracker.is-stuck .mra-tracker-val { font-size: 1.25rem; } .mra-tracker.is-stuck .mra-tracker-label { font-size: .625rem; } .mra-tracker.is-stuck .mra-tracker-ringcard { align-items: center; padding: .45rem .9rem; } .mra-tracker.is-stuck .mra-tracker-ring { width: 34px; height: 34px; } .mra-tracker.is-stuck .mra-tracker-ring svg { width: 34px; height: 34px; } .mra-tracker.is-stuck .mra-ring-track, .mra-tracker.is-stuck .mra-ring-done { stroke-width: 12; } .mra-tracker.is-stuck .mra-tracker-pct strong { font-size: .8125rem; } .mra-tracker.is-stuck .mra-tracker-pct span { display: none; } @media (max-width: 860px) { /* Stays one row when pinned, unlike the resting panel: a two-row sticky bar eats a phone screen. The ring's word is the first thing to go. The right margin clears the fixed theme toggle, which sits at the same height and was clipping the Done count. Reserving the space beats raising z-index, which would bury a control the reader can still want. */ .mra-tracker.is-stuck { grid-template-columns: auto repeat(4, minmax(0, 1fr)); margin-right: 3.25rem; } .mra-tracker.is-stuck .mra-tracker-ringcard { grid-column: auto; } .mra-tracker.is-stuck .mra-tracker-ringcard .mra-tracker-label { display: none; } .mra-tracker.is-stuck .mra-tracker-val { font-size: 1.0625rem; } .mra-tracker.is-stuck .mra-tracker-card { padding: .5rem .25rem; gap: .3rem; } } @media (prefers-reduced-motion: no-preference) { .mra-tracker { transition: box-shadow .2s ease, background .2s ease; } } /* Per-finding control. Borrowed from the retired progress tracker's checkbox, which read well: a 2px border that fills solid in the state colour. Here the whole group takes the colour, so a scan down the page shows what is done without reading. */ .mra-track { display: inline-flex; gap: 2px; padding: 2px; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 10px; transition: border-color .2s ease; } .mra-track[data-state="in_progress"] { border-color: var(--color-info, #3B82F6); } .mra-track[data-state="complete"] { border-color: var(--color-success, #00CA8A); } .mra-track-btn { font-family: 'Inter', sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .01em; padding: .4rem .8rem; border: none; border-radius: 7px; background: transparent; color: var(--color-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .mra-track-btn:hover { color: var(--color-heading); background: var(--color-bg); } /* Pressed: solid fill in its own colour, white text. Unmistakable at a glance and it matches the swatch the border is already showing. */ .mra-track-btn.is-on { background: var(--color-muted); color: #fff; } .mra-track-btn.is-on:hover { background: var(--color-muted); color: #fff; } .mra-track-btn[data-status="in_progress"].is-on, .mra-track-btn[data-status="in_progress"].is-on:hover { background: var(--color-info, #3B82F6); color: #fff; } .mra-track-btn[data-status="complete"].is-on, .mra-track-btn[data-status="complete"].is-on:hover { background: var(--color-success, #00CA8A); color: #fff; } .mra-track-btn:focus-visible { outline: 2px solid var(--color-heading); outline-offset: 1px; } .mra-track.is-saving { opacity: .55; pointer-events: none; } /* Read-only: state without the offer to change it. */ .mra-track-ro { background: none; border: none; padding: 0; } .mra-track-chip { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: .2rem .5rem; border-radius: 4px; background: var(--color-border); color: var(--color-muted); } .mra-track-chip.is-in_progress { background: rgba(59,130,246,.12); color: var(--color-info, #3B82F6); } .mra-track-chip.is-complete { background: rgba(0,202,138,.12); color: #00B477; } /* Findings */ .mra-finding { display: flex; gap: .75rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; align-items: flex-start; border-bottom: 1px solid var(--color-border); } /* Finding and fix left, status right. The body must be able to shrink or a long unbroken URL in a fix pushes the status column off the card. */ .mra-finding-body { flex: 1 1 auto; min-width: 0; } .mra-finding-status { flex: 0 0 auto; margin-left: auto; padding-left: 1rem; padding-top: .1rem; } @media (max-width: 640px) { .mra-finding { flex-wrap: wrap; } /* Under the finding on a phone, indented past the severity icon so it still reads as belonging to that row. */ .mra-finding-status { width: 100%; margin-left: 0; padding-left: 1.875rem; padding-top: .75rem; } } .mra-finding:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .mra-finding-icon { font-size: 1.125rem; flex-shrink: 0; margin-top: .1rem; } .mra-finding > div { min-width: 0; overflow-wrap: break-word; } .mra-finding p { margin: 0; font-size: .9375rem; line-height: 1.7; } .mra-finding .highlight { font-weight: 600; color: var(--color-heading); } /* DIY fix accordion (nested inside findings) */ /* The fix accordion is the product. Someone paid $2,000 for what is behind this button, and it used to read as a small tertiary chip, quieter than the status control beside it. Now it is a solid full-strength button with the brand fill, so on a page of findings the thing to press is unmistakable. */ .mra-fix-accordion { margin-top: .9rem; margin-bottom: .5rem; } .mra-fix-toggle { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--color-primary); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .9375rem; padding: .55rem 1.1rem; border-radius: 10px; border: 2px solid var(--color-primary); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .mra-fix-toggle:hover { background: var(--color-primary-subtle); } .mra-fix-toggle:focus-visible { outline: 2px solid var(--color-heading); outline-offset: 2px; } /* Open, it is no longer the call to action: it becomes the header of the panel it revealed, so the eye moves to the instructions rather than back to it. */ .mra-fix-accordion.open .mra-fix-toggle { background: transparent; color: var(--color-muted); border-color: var(--color-border); } .mra-fix-accordion.open .mra-fix-toggle:hover { color: var(--color-heading); border-color: var(--color-muted); } .mra-fix-toggle .mra-fix-arrow { transition: transform .3s; font-size: .7rem; } .mra-fix-accordion.open .mra-fix-toggle .mra-fix-arrow { transform: rotate(90deg); } .mra-fix-content { max-height: 0; overflow: hidden; transition: max-height .4s ease; } .mra-fix-accordion.open .mra-fix-content { max-height: 2000px; } .mra-fix-content-inner { padding: .75rem 0 .25rem; overflow-wrap: break-word; word-break: break-word; } .mra-fix-content-inner p { font-size: .875rem; line-height: 1.7; margin-bottom: .5rem; } .mra-fix-content-inner code { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: .15rem .4rem; font-size: .8125rem; font-family: 'SF Mono', 'Fira Code', monospace; overflow-wrap: break-word; word-break: break-all; } .mra-fix-content-inner pre { background: var(--color-navy, #0E1A14); color: #E8F5EF; border-radius: 10px; padding: 1rem 1.25rem; margin: .75rem 0; overflow-x: auto; font-size: .8125rem; line-height: 1.6; max-width: 100%; box-sizing: border-box; } .mra-fix-content-inner pre code { background: none; border: none; padding: 0; color: inherit; white-space: pre-wrap; word-break: break-word; } /* Agent-authored fix HTML uses unprefixed content classes; scope them here. */ .mra-fix-content-inner .fix-step { display: flex; gap: .5rem; margin-bottom: .5rem; font-size: .875rem; } .mra-fix-content-inner .fix-step-num { flex-shrink: 0; width: 22px; height: 22px; background: var(--color-primary-subtle); color: var(--color-primary); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: .15rem; } .mra-fix-content-inner ol.step-list { padding-left: 1.25rem; margin: .5rem 0; } .mra-fix-content-inner ol.step-list li { font-size: .875rem; line-height: 1.7; margin-bottom: .4rem; } .mra-fix-content-inner ol { padding-left: 1.25rem; margin: .5rem 0; } .mra-fix-content-inner ul { padding-left: 1.25rem; margin: .5rem 0; list-style: disc; } /* ONE type scale for every block in a fix body. ul and ul li previously had no rules at all, while p, ol and ol li were each pinned to .875rem. The fix bodies are model-written, so whether a given fix arrives as

,

    or