/* 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: 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.85rem;
    line-height: 1.5;
    color: var(--sa-muted);
}

/* 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. */
.audit-checklist .audit-check-item {
    padding: 14px 16px;
    border: 1px solid var(--sa-card-border);
    border-radius: 6px;
}

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

/* 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: var(--assisto-primary, #1d9e75);
    background: rgba(var(--assisto-primary-rgb, 11, 143, 129), 0.04);
}

.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: 8px;
    align-items: flex-start;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--sa-muted);
    margin-top: 4px;
}

/* 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: 16px;
    height: 16px;
    margin-top: 2px;
    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-step-checkbox:hover {
    border-color: var(--assisto-primary, #1d9e75);
}

.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: 0 6px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
    color: var(--sa-faint);
    background: var(--sa-card-bg);
    border: 1px solid var(--sa-card-border);
    cursor: help;
}

.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: filled check + struck-through, muted text. */
.audit-checklist .audit-step.is-verified .audit-step-checkbox {
    background: var(--assisto-primary, #1d9e75);
    border-color: var(--assisto-primary, #1d9e75);
}

.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: #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: 16px;
}

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

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

/* "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: 18px;
    list-style: disc;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--sa-muted);
}

.audit-checklist .audit-findings li {
    margin-top: 4px;
}

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

/* The Beta / "not professional advice" notice — a full-width standout amber callout (matching the export
   banner and CMS-guidance box palette) 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: 9px 12px;
    font-size: 0.82rem;
    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;
}

.report-selfaudit .sa-beta-note strong {
    color: #b9770e;
    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;
    }
}

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

/* The amber disclaimer callout, toned for dark surfaces (the light #fbf4e6 fill would glare). */
body.theme-dark .report-selfaudit .sa-beta-note,
body.theme-dark .audit-disclaimer {
    color: #e8c98a;
    background: rgba(185, 119, 14, 0.12);
    border-color: rgba(232, 201, 138, 0.3);
    border-left-color: #d9a441;
}

body.theme-dark .report-selfaudit .sa-beta-note strong,
body.theme-dark .audit-disclaimer strong {
    color: #f0d399;
}

/* CMS Guidance box: the base rule pins a light/cream palette (matching the report's "Resources" box),
   which glares on dark surfaces — restate it for dark mode so it sits flush with the rest of the panel. */
body.theme-dark .audit-checklist .audit-guidance {
    background: var(--sa-surface);
    border-color: var(--sa-card-border);
    color: var(--sa-text);
}

body.theme-dark .audit-checklist .audit-guidance-title {
    color: var(--sa-text);
}

body.theme-dark .audit-checklist .audit-guidance-intro {
    color: var(--sa-muted);
}

/* Lighten the resource links so they stay legible against the dark fill. */
body.theme-dark .audit-checklist .audit-guidance-links a {
    color: #6db1ec;
}