/* 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. The report's dark mode is handled by the body.theme-dark override below. */
.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-top: 12px;
    border-top: 1px solid var(--sa-divider);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--sa-faint);
}

.audit-disclaimer strong {
    font-weight: 600;
    color: var(--sa-muted);
}

.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);
}

.audit-checklist .audit-summary-box {
    margin: 4px 0 26px;
    padding: 14px 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1f2937;
    background: var(--assisto-action-bg, #fcf7ee);
    border-left: 3px solid var(--assisto-primary, #1d9e75);
    border-radius: 4px;
}

/* "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;
}

.audit-checklist .audit-check-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--sa-card-border);
    border-radius: 6px;
}

/* Empty checkbox (unchecked by default); the tick is hidden until the item is verified. Interactive in the
   modal (a <button>), a static <span> tick in the report panel. */
.audit-checklist .audit-checkbox {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    padding: 2px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: var(--sa-card-bg);
    border: 1.5px solid var(--sa-card-border);
    border-radius: 4px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

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

.audit-checklist .audit-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;
}

/* Verified state: filled check + struck-through, muted title. */
.audit-checklist .audit-check-item.is-verified .audit-checkbox {
    background: var(--assisto-primary, #1d9e75);
    border-color: var(--assisto-primary, #1d9e75);
}

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

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

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

/* Regular weight: "normal" in every font (Roboto Regular, and not Thiccboi's SemiBold-at-500), so the
   titles read clean rather than bold on every surface. Hierarchy comes from the badges + checkbox, not weight. */
.audit-checklist .audit-check {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
}

/* 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: #95b0aa; }
.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: #d80162; }

/* "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);
}

/* Per-item "See detail" disclosure (native <details>): the rationale is revealed only when opened. */
.audit-checklist .audit-detail {
    margin-top: 8px;
}

.audit-checklist .audit-detail-toggle {
    display: inline-flex;
    align-items: center;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--assisto-primary, #1d9e75);
}

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

.audit-checklist .audit-detail-toggle:hover {
    text-decoration: underline;
}

.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;
}

.audit-checklist .audit-rationale {
    margin-top: 6px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--sa-muted);
}

.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 embedded in the rationale text. Plain inline link (no chip border, background,
   or severity badge) so it matches the report view's narrative citations. */
.audit-checklist .audit-cite--inline {
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    white-space: nowrap;
    color: var(--assisto-primary, #1d9e75);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.audit-checklist a.audit-cite--inline:hover {
    text-decoration: underline;
}

/* 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: #95b0aa; }
.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: #d80162; }

.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;
}

.report-selfaudit .sa-help {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sa-faint);
}

.report-selfaudit .sa-beta-note {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--sa-faint);
}

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

/* Report dark mode: the modal / panel live outside .trends-dashboard, so restate the dark tokens here. */
body.theme-dark .audit-modal,
body.theme-dark .audit-checklist {
    --sa-card-bg: #1e2226;
    --sa-card-border: #33383d;
    --sa-text: #eef1f3;
    --sa-muted: #cdd3d7;
    --sa-faint: #aeb5ba;
    --sa-divider: #2c3137;
    --sa-surface: rgba(255, 255, 255, 0.05);
    --sa-danger: #e8705f;
}