/* Shared self-audit styles, loaded once per host (Server, Marketing, WASM client). Global (not Blazor
   scoped) on purpose: the checklist body is injected via innerHTML by the shared renderer
   (_content/Client.Library/scripts/self-audit.js) into BOTH the modal and the report view's inline panel,
   so these rules must reach content rendered outside any single component's scope.

   Tokens are defined on both .audit-modal (the modal chrome) and .audit-checklist (the body container, used
   standalone on the report view) so either renders correctly on every surface, including pages that don't
   carry the trends dashboard tokens. */
.audit-modal,
.audit-checklist {
    --sa-card-bg: #ffffff;
    --sa-card-border: #e5e7eb;
    --sa-text: #111827;
    --sa-muted: #1f2937;
    --sa-faint: #374151;
    --sa-divider: #f1f2f4;
    --sa-surface: rgba(127, 127, 127, 0.08);
    --sa-accent: #378ADD;
    --sa-danger: #c0392b;
}

/* Pin the widget to one consistent font on every surface, so the self-audit checklist looks identical
   whether it renders on the report view (whose page font is Thiccboi, with a shifted weight scale where
   500 = SemiBold), on marketing, or in the app. Without this the panel inherits each host's font and the
   same font-weight reads as a different boldness per surface. */
.audit-modal,
.audit-checklist,
.report-selfaudit {
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.audit-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.audit-modal.is-open {
    display: flex;
}

.audit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.audit-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 850px;
    max-height: 90vh;
    margin: auto;
    overflow: hidden;
    background: var(--sa-card-bg);
    color: var(--sa-text);
    border: 1px solid var(--sa-card-border);
    border-radius: 5px;
    padding: 1.75rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

@media (max-width: 480px) {
    .audit-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
    }
}

.audit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.audit-head h4 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

/* Sticky header actions: Export (revealed once a checklist exists) + Close, kept top-right above the
   scrolling body. */
.audit-head-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.audit-export-top[hidden] {
    display: none;
}

/* The header Export button — mirrors the standard secondary AButton. */
.audit-export-top {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.45rem 0.9rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    color: var(--assisto-primary, #0ba292);
    background: var(--sa-card-bg);
    border: 1px solid rgba(var(--assisto-primary-rgb, 11, 143, 129), 0.5);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.audit-export-top:hover {
    border-color: var(--assisto-primary, #0ba292);
    background: rgba(var(--assisto-primary-rgb, 11, 143, 129), 0.06);
}

.audit-export-top .self-audit-act-ico {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.audit-close {
    border: none;
    background: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--sa-muted);
}

.audit-help {
    margin: 10px 0 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sa-muted);
}

/* Persistent Beta / AI disclaimer, pinned below the scrolling body. */
.audit-disclaimer {
    flex: none;
    margin: 14px 0 0;
    padding: 9px 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #8a5a00;
    background: #fbf4e6;
    border: 1px solid rgba(185, 119, 14, 0.3);
    border-left: 3px solid #b9770e;
    border-radius: 6px;
}

.audit-disclaimer strong {
    font-weight: 700;
    color: #b9770e;
}

.audit-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
}

/* ---- Generated checklist body (injected via innerHTML by the shared renderer) ---- */
.audit-checklist .audit-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 0;
    font-size: 0.95rem;
    color: var(--sa-muted);
}

/* The app's ring spinner (mirrors Client.Library ALoader's .lds-ring) for the JS-rendered loading state. */
.audit-checklist .lds-ring {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 44px;
    color: var(--assisto-primary, #1d9e75);
}

.audit-checklist .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 44px;
    height: 44px;
    border: 4px solid currentColor;
    border-radius: 50%;
    animation: audit-lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}

.audit-checklist .lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.audit-checklist .lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.audit-checklist .lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes audit-lds-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.audit-checklist .audit-error {
    padding: 22px 0;
    font-size: 0.95rem;
    color: var(--sa-danger);
}

/* One-line "how this was built" methodology note, always visible at the very top of the checklist. */
.audit-checklist .audit-method {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--sa-text);
}

/* The citation-count inside the methodology note links to the citations list (opens the modal/overlay). */
.audit-checklist .audit-method-cites {
    color: var(--sa-accent, #378ADD);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* "X of N verified" progress indicator above the checklist. */
.audit-checklist .audit-progress {
    margin: 0 0 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sa-faint);
}

/* Each check is an outlined card (border only, no fill) with a checkbox, so it reads as a thing still to
   verify rather than something already done. */
.audit-checklist .audit-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The theme card. Verification lives on the individual steps (each with its own checkbox), so the card
   itself has no leading checkbox — its body fills the row. "Green ink" outline: a 2px ink border does
   the structural work (no shadow — the outline is the card's edge). */
.audit-checklist .audit-check-item {
    padding: 14px 18px;
    border: 2px solid #123530;
    border-radius: 14px;
    background: #fff;
}

.audit-checklist .audit-check-body {
    min-width: 0;
}

/* Theme title: dark green-grey, semi-bold — the card's heading (badges above it carry the severity;
   the title carries the subject). */
.audit-checklist .audit-check {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    color: #22332f;
}

/* Running "x / n" of steps verified, shown beside a multi-step theme title (derived from the steps —
   the card has no checkbox of its own). */
.audit-checklist .audit-item-count {
    margin-left: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sa-faint);
    white-space: nowrap;
}

/* The whole theme card once every step is ticked: a quiet "done" state (steps already strike through,
   so this just reinforces the card is complete). Derived in JS via refreshItem, never a stored flag. */
.audit-checklist .audit-check-item.is-verified {
    border-color: #123530;
    background: #f2faf8;
}

.audit-checklist .audit-check-item.is-verified .audit-check {
    color: var(--sa-faint);
}

/* The atomic steps beneath an item's theme title. Each is its own row with an independent checkbox, so a
   verifiable action sits on its own line and can be ticked off one at a time rather than as a run-on sentence. */
.audit-checklist .audit-steps {
    margin: 6px 0 0;
    padding-left: 0;
    list-style: none;
}

.audit-checklist .audit-step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--sa-muted);
    /* Full-bleed rows: cancel the card's 18px side padding so the zebra bands run
       edge-to-edge (matching the approved mockup), with roomy row padding. */
    margin: 0 -18px;
    padding: 16px 18px;
    border-radius: 0;
}

/* Zebra rows — alternate steps take the light green fill, so long lists scan row by row. */
.audit-checklist .audit-steps .audit-step:nth-child(odd) {
    background: #f2faf7;
}

/* The step text takes the flexible middle; the citation chips sit in their own trailing
   column so the tags align down the list instead of wrapping with the sentence. */
.audit-checklist .audit-step-text {
    flex: 1 1 auto;
    min-width: 0;
}

.audit-checklist .audit-step-tags {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: 1px;
}

/* The per-step F-tag column is HIDDEN for now (still rendered by self-audit.js, so deleting
   this one rule brings it back). The "Why flagged" block and the "What surveyors cited"
   expander carry the citation context instead. */
.audit-checklist .audit-step-tags {
    display: none;
}

/* Narrow screens: a side column would squeeze the text — let the chips flow underneath,
   indented past the checkbox so they read as part of the step. */
@media (max-width: 640px) {
    .audit-checklist .audit-step {
        flex-wrap: wrap;
    }

    .audit-checklist .audit-step-tags {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 28px;
        margin-top: 0;
    }
}

/* Per-step checkbox — the verification control for each atomic step (the checklist has no theme-level
   checkbox). Interactive <button> in the modal, a static <span> tick in the report panel. */
.audit-checklist .audit-step-checkbox {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    padding: 2px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: #fff;
    border: 2px solid #9fc4bb;
    border-radius: 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.audit-checklist .audit-step-checkbox:hover {
    border-color: var(--assisto-primary, #0ba292);
}

.audit-checklist .audit-step-checkbox svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.12s ease;
}

/* Per-step surveyor method tag (Observe / Record / Interview) — how an auditor verifies this step, set in a
   small uppercase pill before the action text. */
.audit-checklist .audit-step-method {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
    color: var(--sa-faint, #4b5563);
    background: transparent;
    border: 1px solid var(--sa-card-border, #dcebe6);
    cursor: help;
}

/* Outlined, per-method colours — clearly distinct from the FILLED teal F-tag chips: filled chip =
   citation tag (data), outlined pill = how to verify (method). */
.audit-checklist .audit-step-method.observe { color: #2f6f5e; border-color: rgba(47, 111, 94, 0.4); }
.audit-checklist .audit-step-method.record { color: #8a6d1f; border-color: rgba(138, 109, 31, 0.4); }
.audit-checklist .audit-step-method.interview { color: #5a4a86; border-color: rgba(90, 74, 134, 0.4); }

/* A verified step: solid Assisto-green check with a white tick + struck-through, muted text. */
.audit-checklist .audit-step.is-verified .audit-step-checkbox {
    background: var(--assisto-primary, #0ba292);
    border-color: var(--assisto-primary, #0ba292);
    color: #fff;
}

.audit-checklist .audit-step.is-verified .audit-step-checkbox svg {
    opacity: 1;
}

.audit-checklist .audit-step.is-verified .audit-step-text {
    text-decoration: line-through;
    color: var(--sa-faint);
}

/* Priority badges row above each item's title: the "Do this first" flag on the top item and the item's
   risk band, color-matched to SeverityTag (l1–l4). */
.audit-checklist .audit-priority {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.audit-checklist .audit-priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background-color: #95b0aa;
    cursor: help;   /* the band's CMS meaning is in the title tooltip (hover / focus) */
}

.audit-checklist .audit-priority-badge.l1 { background-color: #7f9b94; }
.audit-checklist .audit-priority-badge.l2 { background-color: #e9c403; }
.audit-checklist .audit-priority-badge.l3 { background-color: #e16b21; }
.audit-checklist .audit-priority-badge.l4 { background-color: #c0564f; }

/* "Do this first" flag on the top-ranked item — outlined in the brand accent so it reads as guidance
   rather than another severity band. */
.audit-checklist .audit-do-first-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--assisto-primary, #0ba292);
    background: rgba(var(--assisto-primary-rgb, 11, 143, 129), 0.12);
    border: 1px solid rgba(var(--assisto-primary-rgb, 11, 143, 129), 0.5);
}

/* "Failed in mock survey" flags, injected by survey-prep-list.js from the saved run (localStorage): an
   outlined item-level badge in the fail pink, and a small marker on each failed step. Outlined, not solid —
   the solid pink bands already mean severity, and this means "your own rehearsal caught it". */
.audit-checklist .audit-mockfail-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8c3a34;
    background: #fbe1df;
    border: none;
    cursor: help;
}

.audit-checklist .audit-step-mockfail {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8c3a34;
    background: #fbe1df;
    border: none;
    vertical-align: 1px;
    cursor: help;
}

/* Per-item "What surveyors cited" disclosure (native <details>): the evidence is revealed only when
   opened. The summary renders as a full-bleed footer strip flush with the card's bottom edge, but in
   the card's own quiet teal-mist family (the lime marker is reserved for the "why flagged" zone), so
   it reads as a secondary drill-down, not a call to action. */
.audit-checklist .audit-detail {
    margin: 16px -18px -14px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* The open body's children get the card gutter back (the details itself is full-bleed). */
.audit-checklist .audit-detail > :not(summary) {
    margin-left: 18px;
    margin-right: 18px;
}

.audit-checklist .audit-detail[open] {
    padding-bottom: 14px;
}

.audit-checklist .audit-detail-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: #f7fbfa;
    border-top: 1px solid #ecf4f1;
    color: #0B8F81;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Trailing "N findings" count — mirrors the why-block's reason count. */
.audit-checklist .audit-detail-count {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: #7f9b94;
    white-space: nowrap;
}

.audit-checklist .audit-detail-toggle::-webkit-details-marker {
    display: none;
}

/* The expand affordance: a chevron that rotates 90° (points down) when the disclosure is open. */
.audit-checklist .audit-detail-chevron {
    flex: none;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.audit-checklist .audit-detail[open] .audit-detail-chevron {
    transform: rotate(90deg);
}

.audit-checklist .audit-detail-toggle:hover {
    background: #ecf6f3;
}

.audit-checklist .audit-detail-hide {
    display: none;
}

.audit-checklist .audit-detail[open] .audit-detail-show {
    display: none;
}

.audit-checklist .audit-detail[open] .audit-detail-hide {
    display: inline;
}

/* Print: these disclosures are force-opened (report-nav.js), so the toggle should read as a heading, not an
   interactive "Hide" control — drop the chevron + count and show the descriptive "What surveyors cited"
   label instead of "Hide". */
@media print {
    .audit-checklist .audit-detail-chevron,
    .audit-checklist .audit-detail-count {
        display: none;
    }
    .audit-checklist .audit-detail[open] .audit-detail-show {
        display: inline;
    }
    .audit-checklist .audit-detail[open] .audit-detail-hide {
        display: none;
    }
    .audit-checklist .audit-detail {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* Keep each check row on one page, and don't leave a severity-band header orphaned at a page bottom. */
    .audit-checklist .audit-step {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .audit-checklist .audit-band-header {
        break-after: avoid;
        page-break-after: avoid;
    }
}

/* "Why this matters" disclosure: a one-line lead over a tight bulleted findings list (one fact + its
   citation pill per bullet), replacing the old single rationale paragraph. */
.audit-checklist .audit-why {
    margin: 6px 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 600;
    color: var(--sa-muted);
}

.audit-checklist .audit-findings {
    margin: 8px 0 0;
    padding-left: 4px;
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--sa-muted);
}

/* Each finding is a flex row (text | citation chips), which drops the native list marker —
   so the bullet is drawn as the row's first flex item instead. */
.audit-checklist .audit-findings li {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.audit-checklist .audit-findings li::before {
    content: "•";
    flex: none;
    color: var(--sa-muted);
}

.audit-checklist .audit-finding-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Citation chips in their own trailing column, aligned down the list (matches .audit-step-tags). */
.audit-checklist .audit-finding-tags {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: 1px;
}

@media (max-width: 640px) {
    .audit-checklist .audit-findings li {
        flex-wrap: wrap;
    }

    .audit-checklist .audit-finding-tags {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 18px;
        margin-top: 0;
    }
}

.audit-checklist .audit-cite {
    font-size: 0.78rem;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--sa-card-border);
    color: var(--sa-faint);
    white-space: nowrap;
}

/* ---- CMS Guidance (regulations + Critical Element Pathways) — mirrors the report's "Resources" box ---- */
.audit-checklist .audit-guidance {
    margin-top: 28px;
    padding: 1.25rem 1.5rem;
    background: var(--assisto-action-bg, #fcf7ee);
    border: 1px solid var(--assisto-action-bg-border, rgba(0, 0, 0, 0.12));
    border-radius: 4px;
    color: #1f2937;
}

.audit-checklist .audit-guidance-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.audit-checklist .audit-guidance-intro {
    margin: 0 0 0.75rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #374151;
}

.audit-checklist .audit-guidance-links {
    margin: 0;
    padding-left: 1.25rem;
}

.audit-checklist .audit-guidance-links li {
    margin-bottom: 0.4rem;
}

.audit-checklist .audit-guidance-links a {
    color: var(--assisto-blue, #2683d4);
    text-decoration: none;
}

.audit-checklist .audit-guidance-links a:hover {
    text-decoration: underline;
}

/* Small "opens in a new tab" glyph trailing each resource link. */
.audit-checklist .audit-ext-ico {
    width: 0.85em;
    height: 0.85em;
    margin-left: 2px;
    vertical-align: -1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Inline citation reference — the report theme's F-tag chip: teal-soft fill, focus-green tag text,
   monospace. (Was a plain teal text link; the chip makes tags scannable down a long list.) */
.audit-checklist .audit-cite--inline {
    display: inline-block;
    padding: 1px 8px;
    border: none;
    background: #e3f4f0;
    border-radius: 6px;
    white-space: nowrap;
    font-family: Consolas, 'Roboto Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--assisto-primary-focus, #0B8F81);
    text-decoration: none;
    cursor: pointer;
    vertical-align: 1px;
    transition: background-color 0.15s ease;
}

.audit-checklist .audit-cite--inline b {
    color: #0b6e63;
    font-weight: 700;
}

.audit-checklist a.audit-cite--inline:hover {
    background: #d5ede8;
    text-decoration: none;
}

/* Space adjacent citation pills apart when the model places [id:XXX] markers back-to-back. */
.audit-checklist .audit-cite--inline + .audit-cite--inline {
    margin-left: 0.3em;
}

/* Generate button: right-aligned in the form rather than full-width. */
.audit-checklist .audit-generate {
    align-self: flex-end;
}

/* End-of-modal marketing conversion CTA (revealed once a checklist exists). */
.audit-cta {
    margin-top: 24px;
    padding-top: 4px;
}

.audit-cta[hidden] {
    display: none;
}

.audit-checklist .audit-confirm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
}

.audit-checklist .audit-confirm-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--sa-muted);
}

/* ---- Instruction form (shown on open; the generation gate) ---- */
.audit-checklist .audit-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 6px 0 4px;
}

.audit-checklist .audit-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audit-checklist .audit-form-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sa-text);
}

.audit-checklist .audit-form-opt {
    font-weight: 400;
    color: var(--sa-faint);
}

.audit-checklist .audit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.audit-checklist .audit-chip {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--sa-muted);
    background: var(--sa-surface);
    border: 1px solid var(--sa-card-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.audit-checklist .audit-chip:hover {
    border-color: rgba(var(--assisto-primary-rgb, 29, 158, 117), 0.45);
    color: var(--sa-text);
}

.audit-checklist .audit-chip.is-active {
    color: var(--assisto-primary, #1d9e75);
    background: rgba(var(--assisto-primary-rgb, 29, 158, 117), 0.12);
    border-color: var(--assisto-primary, #1d9e75);
}

.audit-checklist .audit-field {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 11px 14px;
    color: var(--sa-text);
    background: var(--sa-card-bg);
    border: 1px solid var(--sa-card-border);
    border-radius: 5px;
    resize: vertical;
}

.audit-checklist .audit-field:focus {
    outline: none;
    border-color: var(--assisto-primary, #1d9e75);
}

/* ---- Refine bar (appended under a generated checklist) ---- */
.audit-checklist .audit-refine {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--sa-divider);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audit-checklist .audit-refine-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sa-text);
}

.audit-checklist .audit-refine-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.audit-checklist .audit-refine-input {
    flex: 1 1 auto;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 11px 14px;
    color: var(--sa-text);
    background: var(--sa-card-bg);
    border: 1px solid var(--sa-card-border);
    border-radius: 5px;
    resize: vertical;
}

.audit-checklist .audit-refine-input:focus {
    outline: none;
    border-color: var(--assisto-primary, #1d9e75);
}

/* Injected action buttons/links (Generate, Log in, Refine). Mirrors the app's standard AButton. */
.audit-checklist .self-audit-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    padding: 0.5rem 1.1rem;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.audit-checklist .self-audit-act:active {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}

.audit-checklist .self-audit-act-ico {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.audit-checklist .self-audit-act--ghost {
    box-shadow: none;
    border-color: rgba(var(--assisto-primary-rgb, 29, 158, 117), 0.5);
    background: var(--sa-card-bg);
    color: var(--assisto-primary, #1d9e75);
}

.audit-checklist .self-audit-act--ghost:hover {
    border-color: var(--assisto-primary, #1d9e75);
}

.audit-checklist .self-audit-act--solid {
    background: var(--assisto-primary, #1d9e75);
    color: #fff;
}

.audit-checklist .self-audit-act--solid:hover {
    background: var(--assisto-primary-focus, #1d9e75);
    filter: brightness(1.05);
}

/* Sign-up / log-in wall actions (limit reached or anonymous generation closed). */
.audit-checklist .audit-wall-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Turnstile challenge holder injected before an anonymous generation. */
.audit-checklist .audit-turnstile {
    min-height: 65px;
}

/* ---- "Citations used…" trigger (opens the citations overlay, or the host citations modal on the report view) ---- */
.audit-checklist .audit-cites-trigger {
    margin-top: 28px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.9rem 1rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    color: var(--sa-text);
    background: var(--sa-surface);
    border: 1px solid var(--sa-card-border);
    border-radius: 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.audit-checklist .audit-cites-trigger:hover {
    border-color: rgba(var(--assisto-primary-rgb, 11, 143, 129), 0.5);
}

.audit-checklist .audit-cites-trigger-arrow {
    flex: none;
    color: var(--assisto-primary, #0ba292);
}

.audit-checklist .audit-cites-trigger-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Citations overlay (a panel over the dialog, like the report's citations modal) — modal-only chrome ---- */
.audit-cites {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
}

.audit-cites.is-open {
    display: flex;
}

.audit-cites-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.audit-cites-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 680px;
    max-height: 86%;
    background: var(--sa-card-bg);
    color: var(--sa-text);
    border: 1px solid var(--sa-card-border);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.audit-cites-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--sa-divider);
}

.audit-cites-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.audit-cites-body {
    overflow-y: auto;
    padding: 2px 20px 18px;
}

/* Citation cards inside the overlay (JS-injected) — mirror the report's citation modal cards. */
.audit-cites-body .audit-cite-card {
    padding: 18px 0;
    border-bottom: 1px solid var(--sa-divider);
}

.audit-cites-body .audit-cite-card:last-child {
    border-bottom: none;
}

.audit-cites-body .audit-cite-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.audit-cites-body .audit-cite-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sa-text);
}

.audit-cites-body .audit-cite-card-tags {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.audit-cites-body .audit-cite-card-sev {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    color: #fff;
    background-color: #95b0aa;
}

.audit-cites-body .audit-cite-card-sev.l1 { background-color: #7f9b94; }
.audit-cites-body .audit-cite-card-sev.l2 { background-color: #e9c403; }
.audit-cites-body .audit-cite-card-sev.l3 { background-color: #e16b21; }
.audit-cites-body .audit-cite-card-sev.l4 { background-color: #c0564f; }

.audit-cites-body .audit-cite-card-ftag {
    font-weight: 600;
    color: var(--sa-muted);
    white-space: nowrap;
}

.audit-cites-body .audit-cite-card-label {
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--assisto-primary, #0ba292);
}

.audit-cites-body .audit-cite-card-summary {
    margin-top: 4px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sa-text);
    white-space: pre-wrap;
}

.audit-cites-body .audit-cite-card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--sa-muted);
}

.audit-cites-body .audit-cite-card-more {
    margin-left: auto;
    color: var(--assisto-primary, #0ba292);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.audit-cites-body .audit-cite-card-more:hover {
    text-decoration: underline;
}

/* ---- Report-view inline panel chrome (the static wrapper around the JS-rendered body) ---- */
.report-selfaudit .sa-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

/* The Beta / "not professional advice" notice — a full-width cream callout (soft amber full border, no
   left-stripe accent) so the responsibility disclaimer can't be skimmed past. Lives outside the intro's
   flex row (see the .razor) so it spans the whole panel, not the constrained left column. */
.report-selfaudit .sa-beta-note {
    display: block;
    margin: 0 0 18px;
    padding: 11px 15px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #6a5b23;
    background: #fffbea;
    border: 1px solid #efe2ac;
    border-radius: 11px;
}

.report-selfaudit .sa-beta-note strong {
    color: #6a5b23;
    font-weight: 700;
}

.report-selfaudit .sa-export {
    flex: none;
}

/* ---- Mobile: stack the report-panel intro and the risk-band legend ---- */
@media (max-width: 600px) {
    /* "Download audit tracker" drops below the intro text instead of squeezing it into a right column. */
    .report-selfaudit .sa-intro {
        flex-direction: column;
        align-items: stretch;
    }

    .report-selfaudit .sa-export {
        align-self: flex-start;
    }

    /* ---- Checklist readability on small screens ---- */
    /* Larger, looser step text and more air between steps so the dense, multi-line items don't crowd. */
    .audit-checklist .audit-step {
        font-size: 1rem;
        line-height: 1.65;
        gap: 11px;
        margin-top: 14px;
    }

    /* Bigger verify checkbox — easier to tap, and keeps pace with the larger text. */
    .audit-checklist .audit-step-checkbox {
        width: 21px;
        height: 21px;
        margin-top: 2px;
    }

    /* A touch more separation between the theme title and its steps. */
    .audit-checklist .audit-steps {
        margin-top: 10px;
    }

    /* Slightly larger theme titles to anchor each group. */
    .audit-checklist .audit-check {
        font-size: 1.05rem;
        line-height: 1.45;
    }

    /* The method tag (RECORD / OBSERVE / INTERVIEW) is set as a tiny inline pill; nudge it up a hair so it
       reads cleanly next to the bigger step text. */
    .audit-checklist .audit-step-method {
        font-size: 0.66rem;
    }
}

/* ---- Unified survey-prep list additions (rendered by self-audit.js for the survey-prep page only) ------- */

/* Severity-band section header between item groups (opts.groupBy === 'band'): a small uppercase label on the
   band's SeverityTag color, so the one list reads as IJ -> Serious -> Moderate -> Minimal -> ungraded. */
.audit-checklist .audit-band-header {
    margin: 10px 0 -4px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sa-faint, #6b7280);
}

.audit-checklist .audit-band-header.band-l4 { color: #c0564f; }
.audit-checklist .audit-band-header.band-l3 { color: #e16b21; }
.audit-checklist .audit-band-header.band-l2 { color: #b58a00; }
.audit-checklist .audit-band-header.band-l1 { color: #7f9b94; }

.audit-checklist .audit-band-grades {
    font-weight: 600;
    color: var(--sa-faint, #6b7280);
}

/* Why-chips beside the priority badge: the risk-engine factors ("Repeat", "Blind spot", ...) explaining why
   this item's area is flagged. Outlined (unlike the filled severity badge) so they read as reasons, not
   another severity scale. Tones mirror SignalTone. */
.audit-checklist .audit-why-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    color: #66790a;
    background: #f2f8d4;
    text-decoration: none;
    cursor: help;
}

.audit-checklist a.audit-why-chip { cursor: pointer; }
.audit-checklist a.audit-why-chip:hover { text-decoration: underline; }

/* Filled tint per tone (the "Marketing banner" chip palette) — critical soft red, severity/warning
   soft amber, info teal-soft; the default (above) is the lime-tinted "why" chip. */
.audit-checklist .audit-why-chip.tone-critical { color: #8c3a34; background: #fbe1df; }
.audit-checklist .audit-why-chip.tone-severity { color: #8a5c14; background: #fdf0d4; }
.audit-checklist .audit-why-chip.tone-warning  { color: #8a5c14; background: #fdf0d4; }
.audit-checklist .audit-why-chip.tone-info     { color: #0b7466; background: #e3f4f0; }
.audit-checklist .audit-why-chip.tone-neutral  { color: #5b6a66; background: #eef1f0; }

/* ---- "Why flagged" block: a collapsed full-bleed summary bar under the item title (chevron +
   label + the reason chips as a preview + count) that expands in place to one evidence row per
   factor — its chip beside the full templated sentence from the chip's tooltip. Lime-tinted zone,
   so it reads as "reasons", not severity. ---- */
.audit-checklist .audit-whyblock {
    margin: 9px -18px 20px;
    background: #fbfdf2;
    border-top: 1px solid #eef3d8;
    border-bottom: 1px solid #eef3d8;
}

.audit-checklist .audit-whyblock-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding: 9px 18px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    background: none;
    border: none;
    text-align: left;
    color: #66790a;
}

.audit-checklist .audit-whyblock-chevron {
    flex: none;
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #8ba014;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}

.audit-checklist .audit-whyblock.is-open .audit-whyblock-chevron {
    transform: rotate(90deg);
}

.audit-checklist .audit-whyblock-label {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.audit-checklist .audit-whyblock-minis {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.audit-checklist .audit-whyblock-count {
    margin-left: auto;
    font-weight: 600;
    color: #8ba014;
    white-space: nowrap;
}

.audit-checklist .audit-whyblock-body {
    display: none;
    padding: 2px 18px 12px;
}

.audit-checklist .audit-whyblock.is-open .audit-whyblock-body { display: block; }

.audit-checklist .audit-whyblock-row {
    display: flex;
    gap: 9px;
    align-items: baseline;
    margin-top: 7px;
    font-size: 0.87rem;
    line-height: 1.55;
    color: #374151;
}

.audit-checklist .audit-whyblock-row .audit-why-chip {
    flex: none;
    min-width: 104px;
    text-align: center;
}

/* Paper can't click: print the evidence rows expanded, without the toggle chrome. */
@media print {
    .audit-checklist .audit-whyblock-body { display: block; }
    .audit-checklist .audit-whyblock-chevron,
    .audit-checklist .audit-whyblock-count { display: none; }
}

/* "Also in <department> checklist" marker on an action-plan item that absorbed a department duplicate. */
.audit-checklist .audit-also-in {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--sa-faint, #6b7280);
}

.audit-checklist .audit-also-in a {
    color: var(--assisto-primary, #0b8f81);
    text-decoration: none;
}

.audit-checklist .audit-also-in a:hover { text-decoration: underline; }

/* Deep-linked item pulse (#item=<key>, e.g. arriving from mock-survey findings). */
.audit-checklist .audit-check-item.sp-item-flash {
    border-color: var(--assisto-primary, #0b8f81);
    box-shadow: 0 0 0 3px var(--assisto-primary-soft, rgba(11, 143, 129, 0.25));
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Per-item CMS reference ('item' guidance mode). It normally sits at the bottom of the "What
   surveyors cited" expander (.audit-detail-guidance); .audit-item-guidance is the standalone
   fallback line for items that have no expander to fold it into. */
.audit-checklist .audit-item-guidance {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--sa-faint, #6b7280);
}

.audit-checklist .audit-detail-guidance {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--sa-divider, #f1f2f4);
    font-size: 0.8rem;
    color: var(--sa-faint, #6b7280);
}

.audit-checklist .audit-item-guidance a,
.audit-checklist .audit-detail-guidance a {
    color: var(--sa-accent, #378ADD);
    text-decoration: none;
}

.audit-checklist .audit-item-guidance a:hover,
.audit-checklist .audit-detail-guidance a:hover { text-decoration: underline; }

/* ---- Mock survey day (/survey-prep/{guid}/mock-survey — shells in the page, content via mock-survey.js) -- */

.mock-survey .ms-stepper,
.mock-survey .ms-station,
.mock-survey .ms-resume-notice {
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Station stepper: five pills across the top; the active one is filled. */
.mock-survey .ms-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.mock-survey .ms-step-btn {
    appearance: none;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid #cfe3dd;
    background: #fff;
    color: #33403c;
    cursor: pointer;
}

.mock-survey .ms-step-btn:hover {
    background: #f2faf8;
}

.mock-survey .ms-step-btn.is-active {
    background: var(--assisto-primary, #0ba292);
    border-color: var(--assisto-primary, #0ba292);
    color: #fff;
    font-weight: 650;
}

.mock-survey .ms-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 999px;
    border: none;
    background: #e3f4f0;
    color: var(--assisto-primary-focus, #0B8F81);
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 3px;
}

.mock-survey .ms-step-btn.is-active .ms-step-num {
    background: #fff;
    color: var(--assisto-primary-focus, #0B8F81);
}

.mock-survey .ms-step-count {
    font-size: 0.72rem;
    opacity: 0.85;
    margin-left: 2px;
}

.mock-survey .ms-resume-notice {
    font-size: 0.88rem;
    color: var(--sa-faint, #4b5563);
    margin: 0 0 12px;
}

.mock-survey .ms-resume-notice a {
    color: var(--assisto-primary, #0b8f81);
}

/* Ruled section title — reuse the report theme's .rt-section-title (report-theme.css) so every mock
   survey station heading reads as one system with the report and Findings pages. */
.mock-survey .ms-station-title {
    display: inline-block;
    margin: 0.25rem 0 1rem;
    padding-bottom: 7px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rt-ink);
    border-bottom: 3px solid var(--rt-accent);
}

.mock-survey .ms-station p,
.mock-survey .ms-station-intro {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--rt-text-secondary, #3f524c);
}

.mock-survey .ms-station-intro {
    margin: 0 0 1rem;
}

.mock-survey .ms-scale {
    font-weight: 600;
}

.mock-survey .ms-brief-tips {
    margin: 10px 0;
    padding-left: 1.2rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--sa-muted, #374151);
}

.mock-survey .ms-brief-note {
    font-size: 0.82rem;
    color: var(--sa-faint, #6b7280);
}

.mock-survey .ms-continue,
.mock-survey .ms-print {
    appearance: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    margin-top: 16px;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid var(--assisto-primary, #0b8f81);
    background: var(--assisto-primary, #0b8f81);
    color: #fff;
    cursor: pointer;
}

.mock-survey .ms-continue:hover,
.mock-survey .ms-print:hover {
    filter: brightness(1.06);
}

/* Station lists: department groups of item cards, each step a row with the Pass/Fail/Skip segment. */
.mock-survey .ms-group-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sa-faint, #6b7280);
    margin: 18px 0 8px;
}

.mock-survey .ms-item {
    border: 1px solid #dcebe6;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(9, 80, 72, 0.05);
}

.mock-survey .ms-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: #22332f;
    margin-bottom: 4px;
}

/* Per-step F-tag pill — the citation(s) that make a step necessary, trailing its check text and opening the
   citation-detail modal (surveyPrepOpenCitation). Same teal-soft chip as the prep checklist's inline
   citation reference, so the two lists read as one system. */
.mock-survey .ms-cite {
    display: inline-block;
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: 6px;
    background: #e3f4f0;
    font-family: Consolas, 'Roboto Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--assisto-primary-focus, #0B8F81);
    text-decoration: none;
    cursor: pointer;
    vertical-align: 1px;
    transition: background-color 0.15s ease;
}
.mock-survey a.ms-cite:hover { background: #d5ede8; text-decoration: none; }
.mock-survey .ms-cite b { color: #0b6e63; font-weight: 700; }

.mock-survey .ms-band {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background: #95b0aa;
    margin-right: 4px;
    vertical-align: 2px;
}

.mock-survey .ms-band.l2 { background: #e9c403; }
.mock-survey .ms-band.l3 { background: #e16b21; }
.mock-survey .ms-band.l4 { background: #c0564f; }

.mock-survey .ms-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* Full-bleed zebra rows, matching the prep checklist: cancel the card's 18px side
       padding so the bands run edge-to-edge; no dividers. */
    margin: 0 -18px;
    padding: 14px 18px;
    border-top: none;
}

/* The item title is the card's first child, so the FIRST step is nth-child(2) —
   striping even children starts the zebra on the first row, like the checklist. */
.mock-survey .ms-item .ms-step:nth-child(even) {
    background: #f2faf7;
}

.mock-survey .ms-step-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--sa-muted, #374151);
}

/* Citation chips in their own column between the text and the Pass/Fail/Skip segment. */
.mock-survey .ms-step-tags {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: 1px;
}

@media (max-width: 640px) {
    .mock-survey .ms-step {
        flex-wrap: wrap;
    }

    .mock-survey .ms-step-tags {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 0;
    }
}

.mock-survey .ms-answers {
    display: inline-flex;
    flex: none;
    border: 1px solid #cfe3dd;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.mock-survey .ms-answer {
    appearance: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    padding: 5px 13px;
    border: none;
    background: transparent;
    color: #33403c;
    cursor: pointer;
}

.mock-survey .ms-answer + .ms-answer {
    border-left: 1px solid #cfe3dd;
}

.mock-survey .ms-answer-pass.is-active { background: #1d7a4f; color: #fff; }
.mock-survey .ms-answer-fail.is-active { background: #c0564f; color: #fff; }
.mock-survey .ms-answer-skip.is-active { background: #7f9b94; color: #fff; }

.mock-survey .ms-none {
    font-size: 0.92rem;
    color: var(--sa-faint, #6b7280);
}

/* Findings station. */
.mock-survey .ms-findings-totals {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 600;
    margin: 4px 0 18px;
}

.mock-survey .ms-total { color: var(--rt-text-secondary, #3f524c); }
.mock-survey .ms-total-pass { color: #1d7a4f; }
.mock-survey .ms-total-fail { color: #c0564f; }

.mock-survey .ms-findings-note {
    font-size: 0.84rem;
    color: var(--rt-text-secondary, #3f524c);
    line-height: 1.6;
    margin: 0 0 22px;
}

/* The "your fails are flagged in the prep checklist" pointer — the passive replacement for the old
   per-finding links that navigated away mid-read. */
.mock-survey .ms-findings-flag {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 22px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(192, 86, 79, 0.35);
    background: rgba(192, 86, 79, 0.06);
}

.mock-survey .ms-finding {
    border: 1px solid #dcebe6;
    border-left: 4px solid #c0564f;
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: #fff;
}

.mock-survey .ms-finding-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.mock-survey .ms-finding-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--rt-ink);
    margin: 0;
}

.mock-survey .ms-finding-sentence {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 6px 0 10px;
}

.mock-survey .ms-finding-steps {
    margin: 0 0 8px;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--rt-text-secondary, #3f524c);
}

.mock-survey .ms-link {
    font-size: 0.9rem;
    color: var(--assisto-primary, #0b8f81);
    text-decoration: none;
}

.mock-survey .ms-link:hover { text-decoration: underline; }

.mock-survey .ms-clear {
    border: 1px solid rgba(29, 158, 117, 0.4);
    background: rgba(29, 158, 117, 0.06);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.95rem;
}

.mock-survey .ms-findings-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

/* Print: the findings only (mock-survey.js sets html.ms-print-findings around window.print()). */
@media print {
    html.ms-print-findings body * { visibility: hidden; }
    html.ms-print-findings .ms-findings,
    html.ms-print-findings .ms-findings * { visibility: visible; }
    html.ms-print-findings .ms-findings { position: absolute; left: 0; top: 0; width: 100%; }
    html.ms-print-findings .ms-findings-actions { display: none; }
}

/* ---- One-time "saved only in this browser" notice (self-audit.js, ReportView panel's first checkbox click).
   Built in JS and appended to <body>, so it sits OUTSIDE .audit-checklist and can't inherit the --sa-* tokens
   scoped there — restate the few it uses on the overlay itself, with a dark-mode override below. */
.sa-local-notice {
    --sa-card-bg: #ffffff;
    --sa-card-border: #e5e7eb;
    --sa-text: #111827;
    --sa-muted: #374151;
    --sa-accent: #378ADD;
    position: fixed;
    inset: 0;
    z-index: 3000;                                  /* above the report chrome and the audit modal (2000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.sa-local-notice-card {
    width: 100%;
    max-width: 420px;
    background: var(--sa-card-bg);
    color: var(--sa-text);
    border: 1px solid var(--sa-card-border);
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.sa-local-notice-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--sa-text);
}

.sa-local-notice-body {
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--sa-muted);
}

.sa-local-notice-actions {
    display: flex;
    justify-content: flex-end;
}

.sa-local-notice-ok {
    appearance: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    background: var(--sa-accent);
    color: #ffffff;
    cursor: pointer;
}

.sa-local-notice-ok:hover { filter: brightness(0.95); }
.sa-local-notice-ok:focus-visible { outline: 2px solid var(--sa-accent); outline-offset: 2px; }