/* /Pages/Audits/AuditDetail.razor.rz.scp.css */
/* ============================================================================
   Audit Detail — scoped styles. Blue + white, borderless.

   Design rule for this page: NO LINES. No card borders, no divider hairlines,
   no accent bars or stripes. Separation comes from three things only —
     1. a soft shadow lifting white cards off the canvas,
     2. a pale blue-grey fill (--wash) for panels nested inside a card,
     3. whitespace.
   Line-work at low contrast is what made the previous pass read as busy.

   Score tone is expressed once, as .tone-good / .tone-ok / .tone-warn /
   .tone-bad (set from ScoreToneClass() in the component), so a score can never
   render amber in one widget and orange in the next.

   Only the MudMenu POPOVER lives in the page's own style element — MudBlazor
   portals it to the document root, where ::deep cannot reach.
   ============================================================================ */

/* The app's base stylesheet does not set a global border-box, and several
   elements here combine width:100% with padding. */
.sa-ad[b-njxm82f2y2],
.sa-ad *[b-njxm82f2y2],
.sa-ad *[b-njxm82f2y2]::before,
.sa-ad *[b-njxm82f2y2]::after {
    box-sizing: border-box;
}

.sa-ad[b-njxm82f2y2] {
    /* ink */
    --ink-1: #0f1a2e;
    --ink-2: #3d4a61;
    --ink-3: #64728c;
    --ink-4: #94a0b5;

    /* brand */
    --brand: #2563FF;
    --brand-deep: #1C4CC4;
    --brand-tint: #eef3fc;
    --cyan: #06D6D1;

    /* structure — fills, never strokes */
    --surface: #ffffff;
    --wash: #f4f7fc;
    --wash-deep: #eaf0f9;
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
    /* Two-layer shadow: a tight contact shadow plus a wide soft one. This is
       what replaces card borders. */
    --shadow-card:
        0 1px 2px rgba(15, 26, 46, 0.04),
        0 12px 32px -18px rgba(13, 53, 128, 0.20);
    --shadow-lift:
        0 2px 6px rgba(15, 26, 46, 0.06),
        0 20px 44px -20px rgba(13, 53, 128, 0.28);

    --tone: #64748b;
    --tone-soft: rgba(100, 116, 139, 0.1);
    /* Darkened tone, for small text on a --tone-soft fill where the vivid
       --tone would not carry enough contrast. */
    --tone-ink: #475569;

    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 12px;
    /* Cap the reading width — uncapped, a wide monitor stretches every element
       apart and the page reads as empty rather than calm. */
    max-width: 1280px;
    width: 100%;
    margin-inline: auto;
    color: var(--ink-2);
}

/* Score tones. */
.tone-good[b-njxm82f2y2] { --tone: #17a34a; --tone-soft: #e9f7ee; --tone-ink: #0b7a44; }
.tone-ok[b-njxm82f2y2] { --tone: #d97706; --tone-soft: #fdf3e3; --tone-ink: #92580a; }
.tone-warn[b-njxm82f2y2] { --tone: #ea580c; --tone-soft: #fdefe6; --tone-ink: #9a3412; }
.tone-bad[b-njxm82f2y2] { --tone: #dc2626; --tone-soft: #fdeceb; --tone-ink: #b3132f; }

/* ============================================================
   Hero — one floating white card, no internal rules.
   ============================================================ */

.sa-ad-hero[b-njxm82f2y2] {
    position: relative;
    border-radius: var(--r-lg);
    padding: 18px 24px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

/* --- Toolbar row --- */

/* One row: back arrow + identity on the left, actions on the right. The
   identity used to sit on its own row underneath, which left a band of
   empty space beside the arrow. */
.sa-ad-hero-top[b-njxm82f2y2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sa-ad-crumbs[b-njxm82f2y2] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

/* BackButton is a child component, so its markup carries no scope attribute —
   ::deep re-anchors the rule on this component's own .sa-ad-crumbs element. */
.sa-ad-crumbs[b-njxm82f2y2]  .sa-back-btn {
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--r-sm) !important;
    border: 0 !important;
    background: var(--wash) !important;
    color: var(--ink-3) !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.sa-ad-crumbs[b-njxm82f2y2]  .sa-back-btn:hover {
    background: var(--brand-tint) !important;
    color: var(--brand) !important;
}

/* --- Actions --- */

.sa-ad-hero-actions[b-njxm82f2y2] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

/* Export and Share are both MudButtons now. Left to themselves they size to
   their own label, so they come out mismatched. A shared height and min-width makes them one control size, and
   centring keeps the label optically middled once the box is wider than the
   text. box-sizing matters here: MudBlazor sets its own, and without it the
   padding would be added ON TOP of the fixed height. */
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn,
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn .mud-button-root {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--r-sm) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none !important;
    padding: 0 16px !important;
    height: 36px !important;
    min-height: 36px !important;
    min-width: 118px !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Primary — the one solid fill on the page. */
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn-solid,
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn-solid .mud-button-root {
    background-color: var(--brand) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 255, 0.6) !important;
}

.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn-solid:hover:not(:disabled),
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn-solid .mud-button-root:hover:not(:disabled) {
    background-color: var(--brand-deep) !important;
}

/* Secondary — a soft tinted chip, not an outline. */
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn-ghost,
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn-ghost .mud-button-root {
    background-color: var(--wash) !important;
    color: var(--ink-2) !important;
}

.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn-ghost:hover:not(:disabled),
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn-ghost .mud-button-root:hover:not(:disabled) {
    background-color: var(--brand-tint) !important;
    color: var(--brand) !important;
}

.sa-ad-hero-actions[b-njxm82f2y2]  .mud-button-disabled,
.sa-ad-hero-actions[b-njxm82f2y2]  .sa-ad-btn.mud-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sa-ad-hero-actions[b-njxm82f2y2]  .mud-icon-root {
    font-size: 15px !important;
    width: 15px;
    height: 15px;
}

/* --- Identity + score --- */

.sa-ad-hero-info[b-njxm82f2y2] { min-width: 0; }

.sa-ad-title[b-njxm82f2y2] {
    margin: 0 0 7px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--ink-1);
    overflow-wrap: anywhere;
}

/* Meta row — soft filled chips, no outlines. */
.sa-ad-meta[b-njxm82f2y2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sa-ad-domain[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-tint);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.sa-ad-domain:hover[b-njxm82f2y2] { background: #e2ebfa; }
.sa-ad-domain svg[b-njxm82f2y2] { flex-shrink: 0; opacity: 0.7; }

.sa-ad-status[b-njxm82f2y2] {
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.sa-ad-status.is-done[b-njxm82f2y2] { background: #e9f7ee; color: #0b7a44; }
.sa-ad-status.is-failed[b-njxm82f2y2] { background: #fdeceb; color: #b3132f; }
.sa-ad-status.is-pending[b-njxm82f2y2] { background: #fdf3e3; color: #92580a; }

.sa-ad-meta-date[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-3);
    background: var(--wash);
    white-space: nowrap;
}

.sa-ad-meta-date svg[b-njxm82f2y2] { opacity: 0.55; flex-shrink: 0; }

.sa-ad-ring[b-njxm82f2y2] {
    position: relative;
    width: 168px;
    height: 168px;
    flex-shrink: 0;
}

.sa-ad-ring-svg[b-njxm82f2y2] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* Track sits on the tinted panel, so it is a wash of the tone, not grey. */
.sa-ad-ring-track[b-njxm82f2y2] {
    fill: none;
    stroke: rgba(15, 26, 46, 0.07);
    stroke-width: 7.5;
}

/* A measurement, not a light source — no glow. */
.sa-ad-ring-fill[b-njxm82f2y2] {
    fill: none;
    stroke: var(--tone);
    stroke-width: 7.5;
    stroke-linecap: round;
    stroke-dasharray: var(--sa-ad-circ);
    stroke-dashoffset: var(--sa-ad-circ);
    animation: sa-ad-ring-draw-b-njxm82f2y2 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s forwards;
}

@keyframes sa-ad-ring-draw-b-njxm82f2y2 {
    to { stroke-dashoffset: var(--sa-ad-offset); }
}

.sa-ad-ring-center[b-njxm82f2y2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.sa-ad-ring-value[b-njxm82f2y2] {
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
}

.sa-ad-ring-of[b-njxm82f2y2] {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ink-4);
}

/* White chip on the tinted panel — inverts the usual relationship, so the
   grade reads as a plate rather than another coloured blob. */
.sa-ad-grade[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    border-radius: var(--r-sm);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--tone-ink);
    background: var(--surface);
}

/* --- Hero notice (failed / pending, in place of the score module) --- */

/* Audit with no results - failed, cancelled, or still running.
   Replaces .sa-ad-notice, which capped at 420px and so left the notice as a narrow column of
   dense prose beside an empty half page. Full width, a short lead in place of the crawler's
   paragraph, and the next step as a button rather than a sentence.

   Tone is set once per variant as three custom properties and consumed everywhere below, so a
   variant is one line and the parts can never disagree about which colour they are. */
.sa-ad-stop[b-njxm82f2y2] {
    --stop-soft: var(--wash);
    --stop-line: var(--wash-deep);
    --stop-accent: var(--ink-3);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    padding: 26px 28px;
    border-radius: var(--r-lg);
    background: var(--stop-soft);
    border: 1px solid var(--stop-line);
}

/* warn: the website has to change something. info: it will likely pass on its own.
   error: something failed on our side. neutral: nothing is wrong (cancelled, running). */
.sa-ad-stop--warn[b-njxm82f2y2]    { --stop-soft: #fdf6e9; --stop-line: #f1ddb4; --stop-accent: #a8620a; }
.sa-ad-stop--info[b-njxm82f2y2]    { --stop-soft: var(--brand-tint); --stop-line: #d5e1f6; --stop-accent: var(--brand); }
.sa-ad-stop--error[b-njxm82f2y2]   { --stop-soft: #fdf1ef; --stop-line: #f2d2cc; --stop-accent: #b3382a; }
.sa-ad-stop--neutral[b-njxm82f2y2] { --stop-soft: var(--wash); --stop-line: var(--wash-deep); --stop-accent: var(--ink-3); }

.sa-ad-stop-icon[b-njxm82f2y2] {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--stop-accent);
    border: 1px solid var(--stop-line);
}
.sa-ad-stop-icon svg[b-njxm82f2y2] { width: 22px; height: 22px; }

.sa-ad-stop-body[b-njxm82f2y2] { display: grid; gap: 10px; min-width: 0; }

.sa-ad-stop-kicker[b-njxm82f2y2] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stop-accent);
}

.sa-ad-stop-title[b-njxm82f2y2] {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink-1);
    text-wrap: balance;
}

.sa-ad-stop-lead[b-njxm82f2y2] {
    margin: 0;
    max-width: 68ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

.sa-ad-stop-steps[b-njxm82f2y2] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: stop-step;
    display: grid;
    gap: 8px;
    max-width: 68ch;
}
.sa-ad-stop-steps li[b-njxm82f2y2] {
    counter-increment: stop-step;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
}
.sa-ad-stop-steps li[b-njxm82f2y2]::before {
    content: counter(stop-step);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border: 1px solid var(--stop-line);
    color: var(--stop-accent);
}

.sa-ad-stop-actions[b-njxm82f2y2] { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.sa-ad-stop-btn[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sa-ad-stop-btn--primary[b-njxm82f2y2] { background: var(--brand); color: #fff; }
.sa-ad-stop-btn--primary:hover:not(:disabled)[b-njxm82f2y2] { background: var(--brand-deep); }
.sa-ad-stop-btn--primary:disabled[b-njxm82f2y2] { opacity: 0.55; cursor: not-allowed; }
.sa-ad-stop-btn--ghost[b-njxm82f2y2] { background: var(--surface); color: var(--ink-1); border-color: var(--stop-line); }
.sa-ad-stop-btn--ghost:hover[b-njxm82f2y2] { border-color: var(--ink-4); }
.sa-ad-stop-btn:focus-visible[b-njxm82f2y2] { outline: 2px solid var(--cyan); outline-offset: 2px; }

.sa-ad-stop-details[b-njxm82f2y2] {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--stop-line);
    max-width: 68ch;
}
.sa-ad-stop-details summary[b-njxm82f2y2] {
    cursor: pointer;
    width: fit-content;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
}
.sa-ad-stop-details summary:hover[b-njxm82f2y2] { color: var(--ink-1); }
.sa-ad-stop-details summary:focus-visible[b-njxm82f2y2] { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.sa-ad-stop-details p[b-njxm82f2y2] { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 560px) {
    .sa-ad-stop[b-njxm82f2y2] { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
    .sa-ad-stop-btn[b-njxm82f2y2] { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .sa-ad-stop-btn[b-njxm82f2y2] { transition: none; }
}

/* "Audit view unavailable" — full-page state shown when the project has been
   deleted. Replaces the audit body rather than sitting above it: the audit is
   deliberately not viewable in this case, so the reader gets one clear message
   and one exit, not a page full of interactive data behind a warning stripe.
   Colours inlined rather than pulled from the .sa-ad token scope — this block
   is a sibling of .sa-ad, not a child, so those tokens don't cascade here. */
.sa-ad-unavailable[b-njxm82f2y2] {
    display: grid;
    place-items: center;
    min-height: 60vh;
    padding: 24px;
}

.sa-ad-unavailable-card[b-njxm82f2y2] {
    max-width: 520px;
    padding: 40px 44px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(15, 26, 46, 0.04),
        0 12px 32px -18px rgba(13, 53, 128, 0.20);
    text-align: center;
}

.sa-ad-unavailable-icon[b-njxm82f2y2] {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #eef1f6;
    color: #64728c;
}

.sa-ad-unavailable-title[b-njxm82f2y2] {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f1a2e;
}

.sa-ad-unavailable-body[b-njxm82f2y2] {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: #64728c;
}

.sa-ad-unavailable-btn[b-njxm82f2y2] {
    padding: 10px 22px;
    border: none;
    border-radius: 12px;
    background: #2563FF;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sa-ad-unavailable-btn:hover[b-njxm82f2y2] { background: #1C4CC4; }
.sa-ad-unavailable-btn:focus-visible[b-njxm82f2y2] { outline: 2px solid #2563FF; outline-offset: 2px; }

/* ============================================================
   Section scaffolding
   ============================================================ */

.sa-ad-block[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.sa-ad-block-head[b-njxm82f2y2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-left: 4px;
}

.sa-ad-block-title[b-njxm82f2y2] {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink-1);
}

.sa-ad-block-sub[b-njxm82f2y2] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
}

/* ============================================================
   Score composition — donut + legend. Arc length is the category's
   weight in the overall score; hue is category identity, matching the
   report. Health is carried by the legend badge, so the
   chart never relies on colour alone to say "good" or "bad".
   ============================================================ */

.sa-ad-chartcard[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 24px 14px;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.sa-ad-chart-title[b-njxm82f2y2] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-1);
}

.sa-ad-chart-sub[b-njxm82f2y2] {
    margin: 3px 0 6px;
    font-size: 12px;
    color: var(--ink-3);
}

/* ApexCharts renders its own markup, so the scope attribute never lands on it. */
.sa-ad-chartcard[b-njxm82f2y2]  .apexcharts-tooltip {
    border-radius: var(--r-sm) !important;
    border: 0 !important;
    box-shadow: 0 10px 28px -14px rgba(15, 26, 46, 0.4) !important;
    font-family: inherit !important;
}

.sa-ad-chart-empty[b-njxm82f2y2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 200px;
    padding: 16px;
    margin-bottom: 8px;
    border-radius: var(--r-md);
    background: var(--wash);
    color: var(--ink-4);
    text-align: center;
}

.sa-ad-chart-empty-title[b-njxm82f2y2] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-2);
    margin-top: 4px;
}

.sa-ad-chart-empty-sub[b-njxm82f2y2] {
    font-size: 12px;
    color: var(--ink-3);
    max-width: 34ch;
}

/* The donut now lives inside a titled .sa-ad-chartcard, so it drops its own
   card chrome — a card inside a card reads as a bug. */
.sa-ad-donutcard.is-plain[b-njxm82f2y2] {
    margin-top: 16px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@keyframes sa-ad-donut-in-b-njxm82f2y2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Six digits would still touch the ring, so a very large count steps down. */
.sa-ad-donut-score.is-long[b-njxm82f2y2] { font-size: 25px; }

/* The score used to be a bare number, which said nothing about its own units:
   82 next to "478 issues" reads as another count, and only the LOW/HIGH badge
   hinted otherwise. Number over a small caption is the pairing the donut centre
   already uses on this same card, so both headline numbers now label themselves
   the same way. The caption rides in the slack the 22px number leaves, so the
   row does not grow. */
.sa-ad-dl-scorebox[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* ============================================================
   AI executive summary
   ============================================================ */

.sa-ad-ai-badge[b-njxm82f2y2] {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand);
    background: var(--brand-tint);
}

.sa-ad-ai-body[b-njxm82f2y2] { padding: 0 24px 22px; }

.sa-ad-ai-stamp[b-njxm82f2y2] {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--ink-4);
}

/* Two columns instead of one long measure. A single column either ran to ~160
   characters a line (unreadable) or was capped and left half the panel blank —
   columns use the full width AND keep the line length comfortable. */
.sa-ad-legend-copy[b-njxm82f2y2] { margin-bottom: 4px; }

@media (min-width: 900px) {
    .sa-ad-legend-copy[b-njxm82f2y2] {
        column-count: 2;
        column-gap: 44px;
    }

    /* Never split a paragraph across the fold between columns. */
    .sa-ad-legend-copy p[b-njxm82f2y2] {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .sa-ad-legend-copy p:first-child[b-njxm82f2y2] { margin-top: 0; }
}

/* Small caps heading inside the legend body. */

.sa-ad-legend-what-title[b-njxm82f2y2] {
    display: block;
    margin: 18px 0 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.sa-ad-legend-scale[b-njxm82f2y2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Each range is a soft tinted chip rather than a ring on a line. */
.sa-ad-legend-item[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tone);
    background: var(--tone-soft);
}

.sa-ad-legend-item strong[b-njxm82f2y2] {
    color: var(--tone);
    font-weight: 700;
}

.sa-ad-legend-item .chip[b-njxm82f2y2] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: var(--tone);
    flex-shrink: 0;
}

/* ============================================================
   Entrance — a short staggered rise, killed by reduced-motion.
   ============================================================ */

.sa-ad > *[b-njxm82f2y2] {
    animation: sa-ad-rise-b-njxm82f2y2 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}

.sa-ad > *:nth-child(1)[b-njxm82f2y2] { animation-delay: 0.02s; }
.sa-ad > *:nth-child(2)[b-njxm82f2y2] { animation-delay: 0.09s; }
.sa-ad > *:nth-child(3)[b-njxm82f2y2] { animation-delay: 0.16s; }
.sa-ad > *:nth-child(4)[b-njxm82f2y2] { animation-delay: 0.23s; }
.sa-ad > *:nth-child(5)[b-njxm82f2y2] { animation-delay: 0.3s; }

@keyframes sa-ad-rise-b-njxm82f2y2 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
    /* Donut over the legend once the two columns get tight. */

    .sa-ad-donutcard[b-njxm82f2y2] { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
    .sa-ad-donut-legend[b-njxm82f2y2] { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-ad[b-njxm82f2y2] { gap: 18px; }
    .sa-ad-hero[b-njxm82f2y2] { padding: 18px; }
    .sa-ad-title[b-njxm82f2y2] { font-size: 24px; }

}

@media (max-width: 620px) {
    .sa-ad-hero-top[b-njxm82f2y2] { flex-direction: column; align-items: stretch; }
    .sa-ad-hero-actions[b-njxm82f2y2] { justify-content: flex-start; }
    .sa-ad-title[b-njxm82f2y2] { font-size: 22px; }

    .sa-ad-donut-legend[b-njxm82f2y2] { grid-template-columns: minmax(0, 1fr); }
    .sa-ad-donutcard[b-njxm82f2y2] { padding: 22px 18px; }
    .sa-ad-chartcard[b-njxm82f2y2] { padding: 20px 16px 12px; }

    .sa-ad-donut-wrap[b-njxm82f2y2] { width: 168px; height: 168px; }
    .sa-ad-donut-score[b-njxm82f2y2] { font-size: 27px; }

    .sa-ad-ring[b-njxm82f2y2] { width: 152px; height: 152px; }
    .sa-ad-ring-value[b-njxm82f2y2] { font-size: 46px; }

    .sa-ad-block-head[b-njxm82f2y2] { align-items: flex-start; }
}

/* ============================================================
   Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .sa-ad > *[b-njxm82f2y2] {
        animation: none;
    }

    /* The ring must still show its value, so jump straight to the end state. */
    .sa-ad-ring-fill[b-njxm82f2y2] {
        animation: none;
        stroke-dashoffset: var(--sa-ad-offset);
    }

    .sa-ad-disc-chev[b-njxm82f2y2],
.sa-ad-disc-icon[b-njxm82f2y2],
.sa-ad-domain[b-njxm82f2y2],
    /* The ported issue-list controls need the same treatment, or the
       chevrons and URL pills keep animating for a reader who asked the
       OS for no motion. */
    .sa-score-issues-group-chevron[b-njxm82f2y2],
.sa-score-rule-chevron[b-njxm82f2y2],
.sa-score-rule-url[b-njxm82f2y2],
.sa-score-rule-card[b-njxm82f2y2],
.sa-url-icon[b-njxm82f2y2],
.sa-url-go[b-njxm82f2y2],
.sa-evidence-url-pill[b-njxm82f2y2],
.sa-evidence-url-icon[b-njxm82f2y2],
.sa-evidence-url-arrow[b-njxm82f2y2] {
        transition: none;
    }

    .sa-evidence-url-pill:hover[b-njxm82f2y2] { transform: none; }
    .sa-evidence-url-pill:hover .sa-evidence-url-arrow[b-njxm82f2y2] { transform: none; }
}

/* ============================================================================
   CEO DASHBOARD LAYER
   The executive reading order: verdict → KPIs → trend → what's broken →
   what improved → what to do → (folded) technical evidence.

   Same house rules as the rest of this sheet: NO LINES. Separation is a soft
   shadow, a --wash or --tone-soft fill, or whitespace. Severity is expressed
   as a dot or a filled chip, never as a stripe or a rule.

   Every block reads --tone from a .tone-* class set in the component, so a
   score, its KPI card and its trend arrow can never disagree on colour.
   ============================================================================ */

/* Cards with nothing to grade (first audit, no comparison) sit on slate. */
.tone-neutral[b-njxm82f2y2] { --tone: #64748b; --tone-soft: #eef1f6; --tone-ink: #475569; }
/* Informational, not a verdict - used where a number is worth reading but is
   neither good nor bad on its own, e.g. a count of distinct issue types. */
.tone-info[b-njxm82f2y2] { --tone: #2563eb; --tone-soft: #e8f0fe; --tone-ink: #1d4ed8; }

/* ---------------------------------------------------------------------------
   1. EXECUTIVE SUMMARY
   --------------------------------------------------------------------------- */

.sa-ad-exec[b-njxm82f2y2] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 30px;
    align-items: center;
    padding: 26px 30px;
    border-radius: var(--r-lg);
    /* Flat, single colour. The tone used to bleed in from the score side and
       fade out under the text; it now fills the whole band evenly. The severity
       signal is unchanged - --tone-soft is still set per grade - only the fade
       is gone. */
    background: var(--tone-soft);
    box-shadow: var(--shadow-lift);
}

.sa-ad-exec-score[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sa-ad-exec-grade[b-njxm82f2y2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-ad-exec-health[b-njxm82f2y2] {
    font-size: 14px;
    font-weight: 700;
    color: var(--tone-ink);
    white-space: nowrap;
}

.sa-ad-exec-body[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Shared small-caps label. Used by every section that needs a category word
   above a headline. */
.sa-ad-kicker[b-njxm82f2y2] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
}

.sa-ad-exec-headline[b-njxm82f2y2] {
    margin: 9px 0 0;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--ink-1);
    text-wrap: balance;
}

.sa-ad-exec-narrative[b-njxm82f2y2] {
    margin: 11px 0 0;
    max-width: 72ch;
    font-size: 13.5px;
    line-height: 1.68;
    color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   2. KPI CARDS
   --------------------------------------------------------------------------- */

.sa-ad-kpis[b-njxm82f2y2] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

/* Four-up variant — the SEO feature coverage row reuses the KPI card so coverage
   reads on the same scale as the headline metrics. */
.sa-ad-kpis.is-four[b-njxm82f2y2] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sa-ad-kpi[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 17px 18px 16px;
    border-radius: var(--r-md);
    /* Flat, single colour, matching the band above. The wash used to sit at
       the top of the card and dissolve; the row still reads as a health strip
       because each card carries its own --tone-soft. */
    background: var(--tone-soft);
    box-shadow: var(--shadow-card);
}

.sa-ad-kpi-label[b-njxm82f2y2] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.sa-ad-kpi-value[b-njxm82f2y2] {
    margin-top: 9px;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--tone-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sa-ad-kpi-unit[b-njxm82f2y2] {
    margin-left: 2px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink-4);
}

.sa-ad-kpi-cap[b-njxm82f2y2] {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-3);
}

.sa-ad-kpi-delta[b-njxm82f2y2] {
    margin-top: 9px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.sa-ad-kpi-delta.is-up[b-njxm82f2y2] { color: #0b7a44; }
.sa-ad-kpi-delta.is-down[b-njxm82f2y2] { color: #b3132f; }
.sa-ad-kpi-delta.is-flat[b-njxm82f2y2],
.sa-ad-kpi-delta.is-muted[b-njxm82f2y2] { color: var(--ink-4); }

/* Verdict word ("Healthy" / "Critical") in the card's own tone — used where the
   bottom line is a status rather than a movement. */
.sa-ad-kpi-delta.is-tone[b-njxm82f2y2] {
    color: var(--tone-ink);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 10.5px;
}

/* ---------------------------------------------------------------------------
   3. PERFORMANCE TRENDS
   --------------------------------------------------------------------------- */

.sa-ad-trendgrid[b-njxm82f2y2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 16px;
    align-items: stretch;
}

.sa-ad-comparecard[b-njxm82f2y2] {
    /* Positioning context for the chart tooltip. */
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 24px 20px;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------------------
   7. TECHNICAL DETAIL — disclosures
   --------------------------------------------------------------------------- */

.sa-ad-disc[b-njxm82f2y2] {
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.sa-ad-disc-toggle[b-njxm82f2y2] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px 14px 18px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background 0.15s ease;
}

/* Stays white on hover. A --wash fill was the same blue-grey as the page
   canvas, so hovering read as the card vanishing rather than responding.
   The pill below carries the whole hover state instead. */
.sa-ad-disc-toggle:hover[b-njxm82f2y2] { background: var(--surface); }
.sa-ad-disc-toggle:hover .sa-ad-disc-icon[b-njxm82f2y2] { background: #e1eafb; }
.sa-ad-disc-toggle:hover .sa-ad-disc-cta[b-njxm82f2y2] { background: var(--brand); color: #fff; }

.sa-ad-disc-toggle:focus-visible[b-njxm82f2y2] {
    outline: 2px solid var(--brand);
    outline-offset: -3px;
    border-radius: var(--r-md);
}

.sa-ad-disc-icon[b-njxm82f2y2] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 12px;
    color: var(--brand);
    background: var(--brand-tint);
    transition: background 0.15s ease;
}

.sa-ad-disc-text[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sa-ad-disc-title[b-njxm82f2y2] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-1);
}

/* Says what is behind the row. Without it the panel is a title and an arrow,
   and there is no reason to believe opening it is worth the click. */
.sa-ad-disc-sub[b-njxm82f2y2] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-3);
}

/* A labelled pill, not a bare arrow. This is the whole point of the change:
   the affordance has to be readable, not inferred from a 16px chevron. */
.sa-ad-disc-cta[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 7px 11px 7px 13px;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.sa-ad-disc-chev[b-njxm82f2y2] {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sa-ad-disc.is-open .sa-ad-disc-chev[b-njxm82f2y2] { transform: rotate(180deg); }

.sa-ad-disc-body[b-njxm82f2y2] { padding: 2px 18px 20px; }

.sa-ad-disc-body .sa-ad-ai-body[b-njxm82f2y2] { padding: 0; }

/* The plain-English scoring copy lives in a disclosure now, not in the old
   its own wrapper any more, so it needs its own paragraph rhythm here. */
.sa-ad-disc-body .sa-ad-legend-copy p[b-njxm82f2y2] {
    margin: 0 0 11px;
    font-size: 13px;
    line-height: 1.68;
    color: var(--ink-2);
}

.sa-ad-disc-body .sa-ad-legend-copy p:last-of-type[b-njxm82f2y2] { margin-bottom: 0; }
.sa-ad-disc-body .sa-ad-legend-copy strong[b-njxm82f2y2] { color: var(--ink-1); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    /* .is-four is repeated at every breakpoint on purpose: it is a two-class
       selector, so the single-class rule beside it can never override it. */
    .sa-ad-kpis[b-njxm82f2y2],
    .sa-ad-kpis.is-four[b-njxm82f2y2] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sa-ad-trendgrid[b-njxm82f2y2] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .sa-ad-exec[b-njxm82f2y2] {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 22px;
        background: var(--tone-soft);
    }

    .sa-ad-exec-headline[b-njxm82f2y2] { font-size: 20px; }

}

@media (max-width: 620px) {
    .sa-ad-kpis[b-njxm82f2y2],
    .sa-ad-kpis.is-four[b-njxm82f2y2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sa-ad-kpi-value[b-njxm82f2y2] { font-size: 25px; }

    /* The pill's label is the affordance, so it stays. The icon chip is the
       part that can go — it is decoration, and the two lines of text need
       the width more than it does. */
    .sa-ad-disc-icon[b-njxm82f2y2] { display: none; }
    .sa-ad-disc-toggle[b-njxm82f2y2] { gap: 10px; padding: 13px 12px 13px 15px; }
    .sa-ad-disc-cta[b-njxm82f2y2] { padding: 6px 9px 6px 11px; font-size: 12px; }

}

/* ============================================================================
   ISSUES BY CATEGORY + TOP PRIORITY ACTIONS
   Lifted from the Score Breakdown page's inline <style> when that page was
   folded into this one — same spacing, same severity colours, same disclosure
   behaviour.

   These rules intentionally do NOT follow the borderless house style above:
   they are a lift of an existing, shipped component, and matching it exactly
   was the requirement. Keep them together in this block so the boundary
   between the two systems stays obvious.
   ============================================================================ */

/* Issues Section */
.sa-score-issues-section[b-njxm82f2y2] { margin-bottom: 24px; }
.sa-score-issues-header[b-njxm82f2y2] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sa-score-issues-group[b-njxm82f2y2] {
    background: white;
    border: 1px solid var(--sa-border, rgba(0,0,0,0.1));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.sa-score-issues-group-header[b-njxm82f2y2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.15s;
}
.sa-score-issues-group-header:hover[b-njxm82f2y2] { background: rgba(0,0,0,0.02); }
.sa-score-issues-group-left[b-njxm82f2y2] { display: flex; align-items: center; gap: 10px; }
.sa-score-issues-group-badge[b-njxm82f2y2] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; border-radius: 12px;
    font-size: 12px; font-weight: 700; padding: 0 6px;
}
.sa-score-issues-group-title[b-njxm82f2y2] { font-size: 14px; font-weight: 600; color: var(--sa-text-primary, #111827); }
.sa-score-issues-group-right[b-njxm82f2y2] { display: flex; align-items: center; gap: 12px; }

.sa-score-issues-group-chevron[b-njxm82f2y2] {
    transition: transform 0.2s;
    color: var(--sa-text-faint, #6b7280);
}
.sa-score-issues-group-chevron.open[b-njxm82f2y2] { transform: rotate(180deg); }

/* Rule-grouped issue cards (one card per unique RuleCode+Description, list of affected pages inside) */
.sa-score-issues-group-subcount[b-njxm82f2y2] {
    font-size: 12px; font-weight: 500;
    color: var(--sa-text-faint, #6b7280);
    margin-left: 6px;
}
.sa-score-rule-card[b-njxm82f2y2] {
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,0.04);
    transition: background 0.12s;
}
.sa-score-rule-card:hover[b-njxm82f2y2] { background: rgba(0,0,0,0.012); }
.sa-score-rule-header[b-njxm82f2y2] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 0;
    cursor: pointer; user-select: none;
}
.sa-score-rule-card.expanded .sa-score-rule-header[b-njxm82f2y2] { margin-bottom: 12px; }
.sa-score-rule-header-right[b-njxm82f2y2] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sa-score-rule-chevron[b-njxm82f2y2] { color: var(--sa-text-placeholder, #9ca3af); transition: transform 0.18s ease; flex-shrink: 0; }
.sa-score-rule-chevron.open[b-njxm82f2y2] { transform: rotate(180deg); }
.sa-score-rule-titlewrap[b-njxm82f2y2] { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; }
.sa-score-rule-title[b-njxm82f2y2] {
    font-size: 15px; font-weight: 700; line-height: 1.3;
    color: var(--sa-text-primary, #111827);
}
.sa-score-rule-cat-tag[b-njxm82f2y2] {
    display: inline-block; flex-shrink: 0;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--sa-text-secondary, #475569);
    background: rgba(0,0,0,0.05);
    padding: 3px 9px; border-radius: 8px;
}

.sa-score-rule-severity-dot[b-njxm82f2y2] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.sa-score-rule-count[b-njxm82f2y2] {
    font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 8px;
    white-space: nowrap;
}

.sa-score-rule-ai[b-njxm82f2y2] {
    padding: 10px 14px;
    background: rgba(37,99,235,0.04);
    border-left: 3px solid var(--sa-primary, #2563eb);
    border-radius: 0 8px 8px 0;
    font-size: 13px; color: var(--sa-text-secondary, #1e293b);
    line-height: 1.5; margin-bottom: 12px;
}
.sa-score-rule-ai-label[b-njxm82f2y2] {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--sa-primary, #2563eb);
    margin-bottom: 4px;
}
.sa-score-rule-pages[b-njxm82f2y2] {
    background: rgba(0,0,0,0.015);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 12px 14px;
}
.sa-score-rule-pages-label[b-njxm82f2y2] {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--sa-text-faint, #6b7280);
    margin-bottom: 8px;
}
.sa-score-rule-pages-info[b-njxm82f2y2] {
    font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--sa-text-placeholder, #9ca3af);
    margin-left: 4px;
}
.sa-score-rule-pages-list[b-njxm82f2y2] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sa-score-rule-pages-list li[b-njxm82f2y2] { padding: 0 0 4px; }
/* Evidence line under an affected URL — indented to the URL's text, quiet enough that the
   list still scans as a list of pages rather than a wall of prose. */
.sa-score-rule-evidence[b-njxm82f2y2] {
    margin: 1px 0 0 21px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--sa-text-muted, #6b7280);
    overflow-wrap: anywhere;
}
/* Also found on evidence styling */
.sa-score-rule-evidence-block[b-njxm82f2y2] {
    margin: 6px 0 4px 21px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sa-evidence-label[b-njxm82f2y2] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sa-text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 4px;
}
.sa-evidence-url-list[b-njxm82f2y2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sa-evidence-url-pill[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--sa-text-secondary, #334155);
    font-size: 11.5px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    max-width: 100%;
    word-break: break-all;
}
.sa-evidence-url-pill:hover[b-njxm82f2y2] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}
.sa-evidence-url-icon[b-njxm82f2y2] {
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.15s;
}
.sa-evidence-url-pill:hover .sa-evidence-url-icon[b-njxm82f2y2] {
    color: #1d4ed8;
}
.sa-evidence-url-text[b-njxm82f2y2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 450px;
}
.sa-evidence-url-arrow[b-njxm82f2y2] {
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.sa-evidence-url-pill:hover .sa-evidence-url-arrow[b-njxm82f2y2] {
    color: #1d4ed8;
    transform: translateX(2px);
}
.sa-evidence-url-more[b-njxm82f2y2] {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #1e293b;
    font-weight: 600;
    cursor: pointer;
}
.sa-evidence-url-more:hover[b-njxm82f2y2] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.sa-score-rule-url[b-njxm82f2y2] {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: 8px;
    color: var(--sa-text-secondary, #475569); text-decoration: none;
    font-size: 12.5px; line-height: 1.4;
    transition: background 0.12s, color 0.12s;
}
.sa-score-rule-url:hover[b-njxm82f2y2] { background: rgba(37,99,235,0.07); color: var(--sa-primary, #2563eb); }
.sa-url-icon[b-njxm82f2y2] { flex-shrink: 0; color: var(--sa-text-placeholder, #9ca3af); transition: color 0.12s; }
.sa-score-rule-url:hover .sa-url-icon[b-njxm82f2y2] { color: var(--sa-primary, #2563eb); }
.sa-url-text[b-njxm82f2y2] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.sa-url-go[b-njxm82f2y2] { flex-shrink: 0; opacity: 0; transition: opacity 0.12s; }
.sa-score-rule-url:hover .sa-url-go[b-njxm82f2y2] { opacity: 0.55; }
.sa-score-rule-toggle[b-njxm82f2y2] {
    margin-top: 4px;
    background: none; border: none;
    color: var(--sa-primary, #2563eb);
    font-size: 12px; font-weight: 600;
    cursor: pointer; padding: 4px 0;
}
.sa-score-rule-toggle:hover[b-njxm82f2y2] { text-decoration: underline; }

/* --- Donut arcs (Blazor-driven, since SVG takes no pseudo-elements) --- */

.sa-ad-donut-seg[b-njxm82f2y2] {
    transition: opacity 0.15s ease, stroke-width 0.15s ease;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Chart tooltip — shared by the score donut and the "Where the issues are"
   bars. Both position it from the pointer (inline left/top) and both tint it
   with the hovered series' own colour (inline --tip-bg), so the chip always
   says WHICH thing you are pointing at, not just what the number is.
   The positioned ancestor is the chart's own card.
   --------------------------------------------------------------------------- */
.sa-ad-charttip[b-njxm82f2y2] {
    position: absolute;
    /* left/top come from the component as inline styles — the pointer position
       inside the wrapper. These are the fallback for the pre-hover frame. */
    left: 50%;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    /* An absolutely-positioned flex box shrink-wraps to its narrowest possible
       width, which stacked every child onto its own line. max-content sizes it
       to the copy instead, with max-width as the ceiling. */
    width: max-content;
    max-width: 230px;
    padding: 8px 12px;
    border-radius: 12px;
    /* Set per hover from the arc's own colour; the literal is the pre-hover fallback. */
    background: var(--tip-bg, #0f1a2e);
    color: #ffffff;
    /* Sits above the cursor with the arrow pointing down at it. Only opacity
       is transitioned — easing the transform would make the chip visibly lag
       behind the pointer. */
    transform: translate(-50%, -100%) translateY(-13px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.13s ease;
}

.sa-ad-charttip.is-on[b-njxm82f2y2] { opacity: 1; }

.sa-ad-charttip[b-njxm82f2y2]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 8px;
    height: 8px;
    /* A pseudo-element cannot take an inline style, which is why the colour
       travels as a custom property rather than a style attribute. */
    background: var(--tip-bg, #0f1a2e);
    transform: translate(-50%, -50%) rotate(45deg);
}

.sa-ad-charttip-text[b-njxm82f2y2] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .sa-ad-donut-seg[b-njxm82f2y2],
    .sa-ad-charttip[b-njxm82f2y2] {
        transition: none;
    }
}

/* ============================================================================
   AI SUMMARY — LOCKED STATE
   Shown in place of the summary when the plan has no AI feature. A skeleton of
   THIS panel's own content fades into a wide promo band: copy and CTA left, a
   fanned stack of miniature cards right, previewing what the summary looks
   like. Light surfaces throughout, per the page's house style.
   ============================================================================ */

.sa-ad-lock-badge[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6d3bd4;
    background: #f1ecfd;
}

.sa-ad-lock[b-njxm82f2y2] {
    position: relative;
    padding-top: 4px;
}

/* Skeleton lines suggesting the write-up underneath. Fades out downward so the
   panel below reads as sitting on top of hidden content. */
.sa-ad-lock-teaser[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 4px 2px 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
    pointer-events: none;
    user-select: none;
}

.sa-ad-lock-head[b-njxm82f2y2] {
    width: 34%;
    height: 13px;
    border-radius: 4px;
    background: var(--wash-deep);
}

.sa-ad-lock-head.is-small[b-njxm82f2y2] { width: 26%; margin-top: 7px; }

.sa-ad-lock-line[b-njxm82f2y2] {
    width: 100%;
    height: 9px;
    border-radius: 4px;
    background: var(--wash);
}

.sa-ad-lock-line.is-short[b-njxm82f2y2] { width: 72%; }
.sa-ad-lock-line.is-mid[b-njxm82f2y2] { width: 88%; }

/* The promo band. Copy holds the left half at a size that can be read from
   across the room; the right half is a fanned stack of miniature cards standing
   in for the summary the reader cannot see yet. Light surfaces only — the
   colour comes from a pale violet wash behind the fan, not from a dark panel. */
.sa-ad-promo[b-njxm82f2y2] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    align-items: center;
    gap: 20px;
    margin-top: -34px;
    padding: 26px 28px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(112deg, var(--surface) 0%, var(--surface) 42%, #f3f0fe 74%, #e9f0fb 100%);
}

.sa-ad-promo-copy[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sa-ad-promo-title[b-njxm82f2y2] {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink-1);
}

.sa-ad-promo-sub[b-njxm82f2y2] {
    margin: 0 0 20px;
    max-width: 42ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}

.sa-ad-promo-cta[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(96deg, #7b45e0 0%, #5b46d6 100%);
    text-decoration: none;
    box-shadow: 0 10px 22px -12px rgba(91, 70, 214, 0.75);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.sa-ad-promo-cta:hover[b-njxm82f2y2] {
    filter: brightness(1.07);
    box-shadow: 0 14px 26px -12px rgba(91, 70, 214, 0.85);
}

.sa-ad-promo-cta:focus-visible[b-njxm82f2y2] {
    outline: 2px solid #5b46d6;
    outline-offset: 3px;
}

.sa-ad-promo-note[b-njxm82f2y2] {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--ink-3);
}

/* ---- the decorative fan -------------------------------------------------- */

.sa-ad-promo-art[b-njxm82f2y2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    pointer-events: none;
    user-select: none;
}

/* Soft colour blooms behind the fan, so the cards sit on light rather than on
   a flat block of violet. */
.sa-ad-promo-art[b-njxm82f2y2]::before {
    content: "";
    position: absolute;
    inset: -18% -6%;
    background:
        radial-gradient(42% 52% at 22% 32%, rgba(6, 214, 209, 0.20), transparent 70%),
        radial-gradient(46% 56% at 78% 66%, rgba(123, 69, 224, 0.22), transparent 72%);
    filter: blur(6px);
}

.sa-ad-art-card[b-njxm82f2y2] {
    position: relative;
    flex: none;
    width: 136px;
    padding: 12px 12px 13px;
    border-radius: 16px;
    background: var(--surface);
    box-shadow:
        0 1px 2px rgba(15, 26, 46, 0.05),
        0 18px 34px -18px rgba(13, 53, 128, 0.45);
}

.sa-ad-art-card + .sa-ad-art-card[b-njxm82f2y2] { margin-left: -26px; }

.sa-ad-art-card.is-1[b-njxm82f2y2] { transform: rotate(-7deg) translateY(12px); z-index: 1; }
.sa-ad-art-card.is-2[b-njxm82f2y2] { transform: rotate(-1deg) translateY(-14px); z-index: 2; }
.sa-ad-art-card.is-3[b-njxm82f2y2] { transform: rotate(6deg) translateY(16px); z-index: 3; }

.sa-ad-art-label[b-njxm82f2y2] {
    display: block;
    margin-bottom: 10px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
}

/* card 1 — a mini bar chart */
.sa-ad-art-bars[b-njxm82f2y2] {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 46px;
}

.sa-ad-art-bars span[b-njxm82f2y2] {
    flex: 1;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cyan) 0%, var(--brand) 100%);
}

/* card 2 — ranked fix rows */
.sa-ad-art-row[b-njxm82f2y2] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

.sa-ad-art-row:last-child[b-njxm82f2y2] { margin-bottom: 0; }

.sa-ad-art-dot[b-njxm82f2y2] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.sa-ad-art-dot.tone-bad[b-njxm82f2y2] { background: #e2445c; }
.sa-ad-art-dot.tone-warn[b-njxm82f2y2] { background: #f2a43a; }
.sa-ad-art-dot.tone-ok[b-njxm82f2y2] { background: #3a8ee6; }
.sa-ad-art-dot.tone-good[b-njxm82f2y2] { background: #23b07d; }

.sa-ad-art-bar[b-njxm82f2y2] {
    height: 7px;
    width: 100%;
    border-radius: 4px;
    background: var(--wash-deep);
}

.sa-ad-art-bar.is-short[b-njxm82f2y2] { width: 62%; }
.sa-ad-art-bar.is-mid[b-njxm82f2y2] { width: 80%; }

/* card 3 — score ring */
.sa-ad-art-score[b-njxm82f2y2] {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0 auto;
    width: 52px;
    height: 52px;
}

.sa-ad-art-score-num[b-njxm82f2y2] {
    position: absolute;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-1);
}

.sa-ad-art-caption[b-njxm82f2y2] {
    display: block;
    margin-top: 9px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #23b07d;
}

/* the small floating badge that ties the fan back to the feature */
.sa-ad-art-chip[b-njxm82f2y2] {
    position: absolute;
    top: 8px;
    left: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #6d3bd4;
    background: #ffffff;
    box-shadow: 0 8px 18px -10px rgba(13, 53, 128, 0.55);
}

/* Below this the fan has no room to read as a fan, so the band becomes a
   single column and the art drops away rather than shrinking to noise. */
@media (max-width: 900px) {
    .sa-ad-promo[b-njxm82f2y2] {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px;
    }

    .sa-ad-promo-title[b-njxm82f2y2] { font-size: 21px; }
    .sa-ad-promo-art[b-njxm82f2y2] { display: none; }
}

@media (max-width: 620px) {
    .sa-ad-promo[b-njxm82f2y2] { padding: 18px; }
    .sa-ad-promo-title[b-njxm82f2y2] { font-size: 19px; }
    .sa-ad-promo-sub[b-njxm82f2y2] { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .sa-ad-promo-cta[b-njxm82f2y2] { transition: none; }
}

/* ============================================================================
   RUN FACTS — inside the executive band
   Pages crawled / issues found / completed. Quiet by design: they sit under the
   verdict as supporting context, so the label is small and the value stops well
   short of the KPI cards' weight.
   ============================================================================ */

.sa-ad-exec-stats[b-njxm82f2y2] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 16px;
}

.sa-ad-exec-stat[b-njxm82f2y2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sa-ad-exec-stat-label[b-njxm82f2y2] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.sa-ad-exec-stat-value[b-njxm82f2y2] {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================================================
   WHERE THE ISSUES ARE
   One stacked bar per area. Bar length compares volume between areas; the
   segments inside compare urgency within one. Severity colours are the same
   red / orange / blue the issue bands below use, so the two agree.
   ============================================================================ */

.sa-ad-area-legend[b-njxm82f2y2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 16px;
}

.sa-ad-area-key[b-njxm82f2y2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* With pastel chips the label has to carry the severity, so each one takes
   the dark shade of its own hue. */
.sa-ad-area-key.is-critical[b-njxm82f2y2] { color: #b3132f; }
.sa-ad-area-key.is-warning[b-njxm82f2y2] { color: #9a3412; }
.sa-ad-area-key.is-minor[b-njxm82f2y2] { color: #1d4ed8; }

.sa-ad-area-chip[b-njxm82f2y2] {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 3px;
}

.sa-ad-area-chip.is-critical[b-njxm82f2y2] { background: #fecaca; }
.sa-ad-area-chip.is-warning[b-njxm82f2y2] { background: #fed7aa; }
.sa-ad-area-chip.is-minor[b-njxm82f2y2] { background: #c3dafe; }

.sa-ad-area-list[b-njxm82f2y2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sa-ad-area-row[b-njxm82f2y2] {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 56px;
    align-items: center;
    gap: 12px;
}

.sa-ad-area-name[b-njxm82f2y2] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-1);
}

/* The track is the full width of the worst area; the fill is this area's share
   of it, and the segments divide the fill. Two nested proportions, so a short
   bar still shows its own severity split at full resolution. */
.sa-ad-area-track[b-njxm82f2y2] {
    display: block;
    height: 22px;
    border-radius: 8px;
    background: var(--wash);
}

.sa-ad-area-fill[b-njxm82f2y2] {
    display: flex;
    gap: 2px;
    height: 100%;
    min-width: 6px;
    border-radius: 8px;
}

.sa-ad-area-seg[b-njxm82f2y2] {
    position: relative;
    display: block;
    height: 100%;
    min-width: 3px;
    transition: filter 0.13s ease;
}

.sa-ad-area-seg:first-child[b-njxm82f2y2] { border-radius: 8px 0 0 6px; }
.sa-ad-area-seg:last-child[b-njxm82f2y2] { border-radius: 0 6px 6px 0; }
.sa-ad-area-seg:only-child[b-njxm82f2y2] { border-radius: 8px; }
.sa-ad-area-seg:hover[b-njxm82f2y2] { filter: brightness(1.08); }

/* Pastel tints of the severity hues. At this lightness the fills sit very
   close to each other in luminance, so hue and the 2px surface gaps do the
   separating — which is why the track stays the blue-grey wash rather than
   white, and why each segment keeps a min-width. */
.sa-ad-area-seg.is-critical[b-njxm82f2y2] { background: #fecaca; }
.sa-ad-area-seg.is-warning[b-njxm82f2y2] { background: #fed7aa; }
.sa-ad-area-seg.is-minor[b-njxm82f2y2] { background: #c3dafe; }

.sa-ad-area-total[b-njxm82f2y2] {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
}

.sa-ad-area-note[b-njxm82f2y2] {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

@media (max-width: 620px) {
    .sa-ad-area-row[b-njxm82f2y2] { grid-template-columns: 62px minmax(0, 1fr) 46px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .sa-ad-area-seg[b-njxm82f2y2] { transition: none; }
}

/* =============================================================================
   FLAT-TONE CONTRAST FIX
   =============================================================================
   The band and the KPI cards used to fade to --surface, so their small labels
   ended up over white. Filling them with --tone-soft moves that text onto the
   tint, and #64728c (--ink-3) drops from 4.85:1 on white to 4.25-4.42:1 across
   the five tones - under the 4.5:1 minimum for text this size.

   #5d6a83 is the smallest darkening that clears it on every tone (worst case
   4.77:1 on .tone-bad's #fdeceb, 5.45:1 on white) and is visually almost
   indistinguishable from the original.

   Scoped to these two components, not the --ink-3 token: everywhere else in
   the page --ink-3 still sits on white, where it already passes.
   ========================================================================== */
.sa-ad-exec .sa-ad-kicker[b-njxm82f2y2],
.sa-ad-kpi-label[b-njxm82f2y2],
.sa-ad-kpi-cap[b-njxm82f2y2] {
  color: #5d6a83;
}

/* =============================================================================
   EXEC BAND + KPI CARDS: COOL SURFACE, TONE KEPT IN THE INK
   =============================================================================
   The surfaces were filled with --tone-soft, which is set from the score. On a
   good audit that painted the band and all four cards the same green, and five
   green panels stacked read as one green field rather than as a band with cards
   under it - the tint stopped carrying information because nothing contrasted
   with it.

   The fill is now a fixed cool blue from the brand family, and severity moves
   entirely into the ink, where it still reads: the ring, the grade pill, the
   "Excellent / Good / Poor" word and each card's HEALTHY/WARN label all keep
   --tone and --tone-ink. So a bad audit still shows red where it matters, and
   the page no longer changes its whole complexion with the score.

   The cards are plain white with a grey hairline - the tinted versions (blue,
   then cyan) both fought the band rather than sitting under it.

   Contrast, all passing:
     band #eaf1fb  headline 15.30  narrative 7.86  label 4.79  status >= 4.76
     card #ffffff  value    17.39  caption  8.93   label 5.45  status >= 5.32
   ========================================================================== */
.sa-ad-exec[b-njxm82f2y2] { background: #eaf1fb; }
/* White with a hairline instead of a tint. The two-layer --shadow-card is
   dropped with it: its own comment says the shadow is "what replaces card
   borders", so keeping both would state the card's edge twice. The band above
   keeps its tint and its lift, so the row still reads as subordinate to it. */
.sa-ad-kpi[b-njxm82f2y2] {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

@media (max-width: 860px) {
  .sa-ad-exec[b-njxm82f2y2] { background: #eaf1fb; }
}

/* =============================================================================
   AREA CARDS  +  SMALLER KPI ROW
   =============================================================================
   Four area cards sit directly under the verdict band, where the doughnut's
   legend used to be a scroll away. Each leads with the ISSUE COUNT, because
   that is the number that decides what a reader does next; the area score is
   already stated by the ring at the top of the page, so it rides underneath in
   small type with the weight.

   The KPI row below is stepped down to match: it is now the SECOND row of
   cards, and at its old 29px value it competed with the counts above it.
   ========================================================================== */

.sa-ad-areacards[b-njxm82f2y2] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.sa-ad-areacard[b-njxm82f2y2] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 15px 13px;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-md);
  background: #ffffff;
  overflow: hidden;
}

/* The area's identity colour, as an edge rather than a fill - the count below
   is already in that colour and a tinted card would say it a third time. */
.sa-ad-areacard-bar[b-njxm82f2y2] {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
}

.sa-ad-areacard-top[b-njxm82f2y2] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sa-ad-areacard-name[b-njxm82f2y2] {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-ad-areacard-badge[b-njxm82f2y2] {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The highlighted number. Tabular figures so the four counts line up. */
.sa-ad-areacard-count[b-njxm82f2y2] {
  margin-top: 7px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sa-ad-areacard-count em[b-njxm82f2y2] {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: #5d6a83;
}

/* margin-top:auto pins this line to the bottom edge, so the chevrons sit on one
   line across the row even when an area's name wraps to two. */
.sa-ad-areacard-meta[b-njxm82f2y2] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 5px;
  font-size: 11px;
  color: #5d6a83;
}

/* The "this filters the list below" affordance. Matches .sa-ad-vital-go and
   .sa-ad-feat-go — same 14px chevron, same rest opacity, same 2px nudge. */
.sa-ad-areacard-go[b-njxm82f2y2] {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--sa-primary, #1142ab);
  opacity: 0.8;
  transition: opacity .15s ease, transform .15s ease;
}
.sa-ad-areacard:hover:not(:disabled) .sa-ad-areacard-go[b-njxm82f2y2] {
  opacity: 1;
  transform: translateX(2px);
}
/* Active card keeps the same forward chevron as every other actionable card on
   the page — only brighter. It flipped 180° here at first, which made the arrow
   read as a different control rather than the same one switched on. The on/off
   state is already carried by the card's outline, aria-pressed and its title. */
.sa-ad-areacard.is-active .sa-ad-areacard-go[b-njxm82f2y2] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sa-ad-areacard-go[b-njxm82f2y2] { transition: none; }
}

/* --- KPI row: one step down, now that it is the second row --------------- */
.sa-ad-kpi[b-njxm82f2y2] { padding: 13px 14px 12px; }
.sa-ad-kpi-value[b-njxm82f2y2] { font-size: 22px; }
.sa-ad-kpi-unit[b-njxm82f2y2] { font-size: 12px; }
.sa-ad-kpi-label[b-njxm82f2y2] { font-size: 10px; }
.sa-ad-kpi-cap[b-njxm82f2y2] { font-size: 11px; }

/* --- The trend grid lost its second child when the doughnut went --------- */
.sa-ad-trendgrid[b-njxm82f2y2] { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1100px) {
  .sa-ad-areacards[b-njxm82f2y2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sa-ad-areacards[b-njxm82f2y2] { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   "WHERE THE ISSUES ARE" — COLUMN CHART, DARK BANDS
   =============================================================================
   Was a list of horizontal bars. Now vertical columns: height is the area's
   share of the worst area, and the severity bands stack inside each column.

   Order is deliberate. In the horizontal version the bands ran critical ->
   warning -> minor left to right; stacked, `flex-direction: column-reverse`
   puts critical at the BOTTOM, which is both where a column chart is read from
   and where the most urgent band should sit.

   The bands were #fecaca / #fed7aa / #c3dafe - pastels that carried almost no
   weight at column size and left the chart looking unfinished. They are now
   the dark ends of the same three hues, and #9f1239 is the same dark red the
   score composition and the PDF report moved to.
   ========================================================================== */

.sa-ad-area-cols[b-njxm82f2y2] {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.sa-ad-area-col[b-njxm82f2y2] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

/* The plot area. A fixed height is what makes the columns comparable at all. */
.sa-ad-area-col .sa-ad-area-track[b-njxm82f2y2] {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 74px;
  height: 168px;
  border-radius: 8px;
  background: #eef2f7;
  overflow: hidden;
}

.sa-ad-area-col .sa-ad-area-fill[b-njxm82f2y2] {
  display: flex;
  flex-direction: column-reverse;   /* critical lands at the bottom */
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.sa-ad-area-col .sa-ad-area-seg[b-njxm82f2y2] {
  width: 100%;
  border-radius: 0;
}
.sa-ad-area-col .sa-ad-area-seg:first-child[b-njxm82f2y2] { border-radius: 0 0 8px 8px; }
.sa-ad-area-col .sa-ad-area-seg:last-child[b-njxm82f2y2]  { border-radius: 8px 8px 0 0; }
.sa-ad-area-col .sa-ad-area-seg:only-child[b-njxm82f2y2]  { border-radius: 8px; }

/* Dark bands. */
.sa-ad-area-seg.is-critical[b-njxm82f2y2],
.sa-ad-area-chip.is-critical[b-njxm82f2y2] { background: #9f1239; }
.sa-ad-area-seg.is-warning[b-njxm82f2y2],
.sa-ad-area-chip.is-warning[b-njxm82f2y2]  { background: #b45309; }
.sa-ad-area-seg.is-minor[b-njxm82f2y2],
.sa-ad-area-chip.is-minor[b-njxm82f2y2]    { background: #1e3a8a; }

.sa-ad-area-col .sa-ad-area-total[b-njxm82f2y2] {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}

.sa-ad-area-col .sa-ad-area-name[b-njxm82f2y2] {
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  color: #5d6a83;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The legend keys carry the band colours as text; the pale originals were set
   for pale chips and are too light to sit beside the dark bands. */
.sa-ad-area-key.is-critical[b-njxm82f2y2] { color: #9f1239; }
.sa-ad-area-key.is-warning[b-njxm82f2y2]  { color: #b45309; }
.sa-ad-area-key.is-minor[b-njxm82f2y2]    { color: #1e3a8a; }

@media (max-width: 560px) {
  .sa-ad-area-cols[b-njxm82f2y2] { gap: 10px; }
  .sa-ad-area-col .sa-ad-area-track[b-njxm82f2y2] { height: 128px; }
  .sa-ad-area-col .sa-ad-area-total[b-njxm82f2y2] { font-size: 13px; }
  .sa-ad-area-col .sa-ad-area-name[b-njxm82f2y2] { font-size: 10.5px; }
}

/* =============================================================================
   AREA COLUMNS — SOLID, COUNT ONLY
   =============================================================================
   One bar per area, height proportional to the worst area. No severity split:
   three bands x four columns was twelve quantities to compare, which buried the
   single thing the chart answers - where the work is.

   THE TRACK LOSES ITS FILL. It was #eef2f7, which on a low column (Mobile with
   one issue) read as an empty box the bar had failed to fill, rather than as a
   short bar. A column chart has no container; the bar IS the mark.
   ========================================================================== */

.sa-ad-area-col .sa-ad-area-track[b-njxm82f2y2] {
  background: none;
  border-radius: 0;
  align-items: flex-end;
}

.sa-ad-area-col .sa-ad-area-fill[b-njxm82f2y2] {
  display: block;
  width: 100%;
  min-height: 3px;            /* a 1-in-1000 area still needs to be visible */
  border-radius: 8px 6px 0 0;
  background: #1e3a8a;
}

/* =============================================================================
   FEATURE LIST  +  TRENDS, SIDE BY SIDE
   =============================================================================
   The four feature checks were a card row across the full width and the trends
   chart a full-width block beneath, so four columns had 1200px of plot to sit
   in and looked marooned. Paired, each gets a sensible measure.

   The rows borrow the dashboard's Quick Actions shape - tinted icon tile, title
   over caption - with the metric added on the trailing edge, which that pattern
   does not have. The tint comes from the row's own tone class, so the icon says
   healthy/warn/bad before the number is read.
   ========================================================================== */

.sa-ad-split[b-njxm82f2y2] {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

/* =============================================================================
   VITALS STRIP
   =============================================================================
   Four whole-audit signals, directly under the area cards. Same card language as
   the area row above it so the two read as one block: hairline border, white
   ground, a tone-coloured edge down the left.

   Each card is three lines, and the order is deliberate - number, meaning,
   location. The last line carries the finding a reader can act on ("Technical
   carries 18 of them", "4 pages over 3s"), so it is the one that gets the
   chevron and opens the matching list below.
   ========================================================================== */

.sa-ad-vitals[b-njxm82f2y2] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.sa-ad-vital[b-njxm82f2y2] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px 13px 18px;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-md);
  background: #ffffff;
  /* NO overflow:hidden here. This element is position:relative, so it is the
     containing block for .sa-ad-vital-tip - and the tip sits entirely ABOVE the
     card, so clipping to the card's box made it render and then disappear. The
     tone bar rounds its own left corners instead of being clipped to them. */
}

/* The tone edge, matching the area cards above rather than a full tinted card -
   four filled panels in a row would out-shout the score at the top of the page. */
.sa-ad-vital-bar[b-njxm82f2y2] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tone);
  /* Was square, and clipped to the card's radius by overflow:hidden. That clip
     had to go (see above), so the bar carries the curve itself. */
  border-radius: var(--r-md) 0 0 var(--r-md);
}

.sa-ad-vital-hit[b-njxm82f2y2] {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
  cursor: pointer;
}

.sa-ad-vital.is-actionable:hover[b-njxm82f2y2] {
  /* Border only. The tinted fill washed the whole card in the tone colour on
     hover, which is a lot of red for simply pointing at it - and it fought the
     tooltip appearing above at the same moment. */
  border-color: var(--tone);
}
.sa-ad-vital:focus-within[b-njxm82f2y2] {
  outline: 2px solid var(--tone, #2563eb);
  outline-offset: 2px;
}
.sa-ad-vital-hit:focus-visible[b-njxm82f2y2] { outline: none; }

.sa-ad-vital-head[b-njxm82f2y2] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sa-ad-vital-label[b-njxm82f2y2] {
  /* Was 10px in #64748b, which put the card's own NAME below the caption under
     it (12px/600 in #334155) - the subtitle read louder than the title. Up in
     size and darkened past the caption so the three lines fall in the order
     they should: name, meaning, location. Tracking eased from 0.07em, since
     larger uppercase needs less of it to stay open. */
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #1e293b;
}

.sa-ad-vital-val[b-njxm82f2y2] {
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tone-ink);
}
.sa-ad-vital-val em[b-njxm82f2y2] {
  margin-left: 1px;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
}

/* What the number means - and when it is bad, why that matters. */
.sa-ad-vital-cap[b-njxm82f2y2] {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #334155;
}

/* Where the shortfall is. Muted, but not fine print: this is the line a reader
   acts on, so it keeps its own weight and carries the chevron. */
.sa-ad-vital-foot[b-njxm82f2y2] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
}

.sa-ad-vital-go[b-njxm82f2y2] {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--tone-ink);
  opacity: 0.8;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sa-ad-vital.is-actionable:hover .sa-ad-vital-go[b-njxm82f2y2] {
  opacity: 1;
  transform: translateX(2px);
}

/* Hover explanation.
   -----------------------------------------------------------------------------
   Every figure on these cards is SEO shorthand - "issue types", "2xx", a
   3-second threshold - and the person reading is a site owner, not an SEO. The
   card gives the number and where it is; this gives the meaning.

   A styled tip rather than the native title attribute: title waits about a
   second, cannot be read by touch, and renders in the OS font at the pointer
   rather than against the card it describes.

   The card is overflow:hidden so the meter can clip to its rounded corner,
   which would also clip this. The tip is therefore positioned against the
   STRIP, not the card, and the card drops its clipping only while hovered -
   there is no meter on these cards to be affected. */
.sa-ad-vital-tip[b-njxm82f2y2] {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 9px);
  z-index: 8;
  padding: 10px 13px;
  border-radius: 12px;
  background: #0f1a2e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 10px 26px rgba(15, 26, 46, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  pointer-events: none;
}

/* Focus-within as well as hover, or the explanation is mouse-only. */
.sa-ad-vital:hover .sa-ad-vital-tip[b-njxm82f2y2],
.sa-ad-vital:focus-within .sa-ad-vital-tip[b-njxm82f2y2] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Arrow, pointing up at the card that owns the tip. The tip is card-width
   (left:0/right:0 against the card), so dead centre is correct at every
   breakpoint - no per-column offsets needed. */
.sa-ad-vital-tip[b-njxm82f2y2]::after {
  content: "";
  position: absolute;
  /* Points UP at the card above it. */
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom-color: #0f1a2e;
}

/* Two-up rather than four-up before the split itself collapses: four of these at
   under ~1000px put the value on its own line and the cards stop lining up. */
@media (max-width: 1080px) {
  .sa-ad-vitals[b-njxm82f2y2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sa-ad-vitals[b-njxm82f2y2] { grid-template-columns: minmax(0, 1fr); }
}

.sa-ad-featlist[b-njxm82f2y2] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sa-ad-feat[b-njxm82f2y2] {
  display: grid;
  /* Fourth column is the chevron. It is rendered on every row, empty where there
     is nothing to jump to, so the four value columns stay aligned with each
     other rather than shifting by 14px depending on the audit. */
  grid-template-columns: auto minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-md);
  background: #ffffff;
  /* Anchors .sa-ad-feat-hit and the meter. */
  position: relative;
}

/* =============================================================================
   FEATURE ROW - THE GAP, AND THE WAY TO IT
   =============================================================================
   A coverage figure on its own is a dead end: "57%" names a shortfall without
   saying which pages are in it. Two things fix that, and neither adds height to
   a column that has to finish level with the chart beside it.

     - the meter, pinned inside the bottom edge, shows covered against missing;
     - the whole row is a hit area that opens the matching rule in Issues by
       Category, where the affected page list actually names them.
   ========================================================================== */

/* Stretched hit area. A real button, so it is focusable and announces itself;
   transparent and inset, so the row looks like the card it always was. Nothing
   else inside the row is interactive, so covering all of it costs nothing. */
.sa-ad-feat-hit[b-njxm82f2y2] {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
  cursor: pointer;
}

.sa-ad-feat.is-actionable:hover[b-njxm82f2y2] {
  border-color: var(--tone);
  background: var(--tone-soft);
}

/* The ring belongs on the card, not on the invisible button inside it. */
.sa-ad-feat:focus-within[b-njxm82f2y2] {
  outline: 2px solid var(--tone, #2563eb);
  outline-offset: 2px;
}
.sa-ad-feat-hit:focus-visible[b-njxm82f2y2] { outline: none; }

.sa-ad-feat-go[b-njxm82f2y2] {
  display: grid;
  place-items: center;
  color: var(--tone-ink);
  /* Was 0.45, which read as decoration rather than an affordance: on a screenshot
     the hovered row looked like the only clickable one and the other failing rows
     looked inert. Actionable rows have to announce themselves at rest. */
  opacity: 0.8;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sa-ad-feat-go svg[b-njxm82f2y2] { width: 14px; height: 14px; }
.sa-ad-feat.is-actionable:hover .sa-ad-feat-go[b-njxm82f2y2] {
  opacity: 1;
  transform: translateX(2px);
}

/* Coverage bar. Sits inside the bottom edge rather than on its own line, so the
   row keeps the height it had. The track is the tone at low alpha, the fill is
   the tone itself: the unfilled remainder IS the missing percentage, which is
   the thing the caption now also states in words. */
.sa-ad-feat-meter[b-njxm82f2y2] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--tone-soft);
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  overflow: hidden;
}
.sa-ad-feat-meter i[b-njxm82f2y2] {
  display: block;
  height: 100%;
  background: var(--tone);
}

.sa-ad-feat-ico[b-njxm82f2y2] {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--tone-soft);
  color: var(--tone-ink);
}
.sa-ad-feat-ico svg[b-njxm82f2y2] { width: 19px; height: 19px; }

.sa-ad-feat-body[b-njxm82f2y2] { min-width: 0; }

.sa-ad-feat-title[b-njxm82f2y2] {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}

.sa-ad-feat-cap[b-njxm82f2y2] {
  display: block;
  margin-top: 2px;
  /* Up from 11.5px, and darker: this line went from restating the headline
     figure to being the one sentence that says what is wrong. */
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #4a5568;
}
/* Padding-bottom clears the meter so a descender never touches it. */
.sa-ad-feat[b-njxm82f2y2] { padding-bottom: 14px; }

.sa-ad-feat-right[b-njxm82f2y2] { text-align: right; }

.sa-ad-feat-val[b-njxm82f2y2] {
  display: block;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--tone-ink);
}
.sa-ad-feat-val em[b-njxm82f2y2] {
  margin-left: 1px;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}

.sa-ad-feat-badge[b-njxm82f2y2] {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tone-ink);
}

/* The trends block is a card in its own right; inside the split it should not
   also carry the section's outer margin. */
.sa-ad-split-right > .sa-ad-block[b-njxm82f2y2] { margin-bottom: 0; }

@media (max-width: 1080px) {
  .sa-ad-split[b-njxm82f2y2] { grid-template-columns: minmax(0, 1fr); }
}

/* Both columns now open with the same header block, so their content starts on
   the same line. The trends side gets its gap from .sa-ad-block's own spacing;
   the feature list has no such wrapper, so it takes the gap here. The header is
   given a fixed min-height so a two-line subtitle on one side cannot push that
   column's cards down relative to the other. */
.sa-ad-split-left > .sa-ad-block-head[b-njxm82f2y2],
.sa-ad-split-right .sa-ad-block-head[b-njxm82f2y2] {
  min-height: 42px;
  margin-bottom: 14px;
}
.sa-ad-split-right > .sa-ad-block[b-njxm82f2y2] { padding-top: 0; }

/* The header's 14px margin was NOT the whole gap on the right: .sa-ad-block is a
   flex column with gap:13px, which stacks on top of the margin. So the chart card
   started 27px below its heading while the feature list started 14px below its
   own — the two columns' first cards sat on different lines. The block has exactly
   two children here, so the margin is the only spacing it needs. */
.sa-ad-split-right > .sa-ad-block[b-njxm82f2y2] { gap: 0; }

/* Equal-height columns. Both sides are cards ending on a hard edge, so a short
   feature list left a ragged step against the chart beside it. The rows share the
   slack instead of the column simply ending early — which is what the feature-row
   rules have assumed all along ("a column that has to finish level with the chart
   beside it"). */
.sa-ad-split[b-njxm82f2y2] { align-items: stretch; }

.sa-ad-split-left[b-njxm82f2y2],
.sa-ad-split-right[b-njxm82f2y2] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sa-ad-split-right > .sa-ad-block[b-njxm82f2y2],
.sa-ad-split-right > .sa-ad-block > .sa-ad-trendgrid[b-njxm82f2y2] { flex: 1 1 auto; }

.sa-ad-featlist[b-njxm82f2y2] { flex: 1 1 auto; }
/* Grow, never shrink below the row's natural height. */
.sa-ad-featlist > .sa-ad-feat[b-njxm82f2y2] { flex: 1 0 auto; }

/* Stacked, there is no neighbour to finish level with — let everything size to
   its content again. */
@media (max-width: 1080px) {
  .sa-ad-featlist > .sa-ad-feat[b-njxm82f2y2] { flex: 0 0 auto; }
}

/* =============================================================================
   ISSUES BY CATEGORY — AREA FILTER
   =============================================================================
   A native <select> rather than a MudSelect: this whole section is hand-written
   markup, and a Mud popover here would be the only one on the page. Native also
   gives keyboard and mobile behaviour for nothing.
   ========================================================================== */

.sa-score-issues-header[b-njxm82f2y2] { align-items: flex-start; }

.sa-issue-filter[b-njxm82f2y2] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sa-issue-filter-label[b-njxm82f2y2] {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d6a83;
}

.sa-issue-filter-select[b-njxm82f2y2] {
  appearance: none;
  padding: 7px 30px 7px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #ffffff;
  /* chevron, inlined so the control needs no extra element */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d6a83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-1);
  cursor: pointer;
}
.sa-issue-filter-select:hover[b-njxm82f2y2] { border-color: #cbd5e1; }
.sa-issue-filter-select:focus-visible[b-njxm82f2y2] {
  outline: 2px solid var(--sa-primary, #2563FF);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .sa-score-issues-header[b-njxm82f2y2] { flex-wrap: wrap; gap: 10px; }
  .sa-issue-filter[b-njxm82f2y2] { width: 100%; }
  .sa-issue-filter-select[b-njxm82f2y2] { flex: 1; }
}

/* =============================================================================
   AREA CARDS AS FILTER CONTROLS
   =============================================================================
   Each card filters the issue list at the foot of the page to its area and
   scrolls there. They are real <button>s, so keyboard and screen-reader
   behaviour comes for free; aria-pressed carries the on/off state, and the
   active card is outlined rather than tinted so the count keeps its own colour.
   ========================================================================== */

.sa-ad-areacard[b-njxm82f2y2] {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.sa-ad-areacard:hover:not(:disabled)[b-njxm82f2y2] {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px -12px rgba(13, 53, 128, .38);
}

.sa-ad-areacard:focus-visible[b-njxm82f2y2] {
  outline: 2px solid var(--sa-primary, #2563FF);
  outline-offset: 2px;
}

/* Inset ring rather than a thicker border: a 2px border would reflow the card
   by a pixel on selection and nudge the row. */
.sa-ad-areacard.is-active[b-njxm82f2y2] {
  border-color: var(--sa-primary, #2563FF);
  box-shadow: inset 0 0 0 1px var(--sa-primary, #2563FF);
}

/* An area with nothing in it still shows its zero - it just cannot be filtered to. */
.sa-ad-areacard:disabled[b-njxm82f2y2] {
  cursor: default;
  opacity: .7;
}

/* The jump target must clear the fixed app bar. */
#sa-issues[b-njxm82f2y2] { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  .sa-ad-areacard[b-njxm82f2y2] { transition: none; }
}

/* ── SCOPE NOTE — what the report does and does not cover ──────────────────
   Sits under the run's facts, in the same executive band, because it qualifies
   "Pages crawled" directly above it. Muted rather than a warning colour: a
   capped crawl is the plan working as sold, not a fault. */
.sa-ad-exec-scope[b-njxm82f2y2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--brand-1, #2563FF);
    border-radius: 0 8px 8px 0;
    background: rgba(37, 99, 255, 0.06);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}

.sa-ad-exec-scope strong[b-njxm82f2y2] {
    font-weight: 700;
    color: var(--ink-1);
}

.sa-ad-exec-scope .mud-icon-root[b-njxm82f2y2] {
    color: var(--brand-1, #2563FF);
    margin-top: 1px;
}
/* /Pages/Launch.razor.rz.scp.css */
/* Launch page — brand navy→cyan band over the site's existing surface tokens.
   Scoped to this page, so none of it can leak into the landing page's sa-* rules. */

.sa-launch[b-jlvw7dsv7r] { display: block; }

/* ---------- Launch band ---------- */
/* Deliberately dark regardless of theme: it is the brand gradient the live hero already uses. */
.sa-lx-band[b-jlvw7dsv7r] {
    background:
        radial-gradient(900px 460px at 50% -10%, rgba(0, 191, 212, 0.30), transparent 65%),
        linear-gradient(160deg, #071b47 0%, #0d3580 55%, #0a4a86 100%);
    color: #fff;
    /* Top padding clears the fixed nav bar, whose height is --sa-nav-height (76px) in
       premium.css. At a flat 64px the eyebrow pill rendered underneath it and was clipped. */
    padding: calc(var(--sa-nav-height, 76px) + 48px) 24px 84px;
}

.sa-lx-inner[b-jlvw7dsv7r] { max-width: 1120px; margin: 0 auto; text-align: center; }

/* ---------- Logo + radar ping ---------- */
.sa-lx-logo[b-jlvw7dsv7r] {
    position: relative;
    /* Block-level flex, not inline-flex: the parent is text-align:center, so an inline logo
       and the inline eyebrow pill below it shared a line and overlapped. */
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 30px;
    /* Its own stacking context, so the rings sit behind the lockup without needing a
       negative z-index that would push them behind the band's gradient entirely. */
    isolation: isolate;
}

.sa-lx-logo-img[b-jlvw7dsv7r] {
    position: relative; z-index: 1;
    height: 58px; width: auto; display: block;
    /* Lifts the white lockup off the navy rather than letting it sit flat on it. */
    filter: drop-shadow(0 4px 18px rgba(0, 191, 212, 0.45));
}

.sa-lx-ring[b-jlvw7dsv7r] {
    position: absolute; top: 50%; left: 50%;
    width: 120px; height: 120px; margin: -60px 0 0 -60px;
    border: 1px solid rgba(0, 191, 212, 0.55);
    border-radius: 50%;
    /* Decorative only — must never intercept a click aimed at the logo. */
    pointer-events: none;
    opacity: 0;
    animation: sa-lx-ping-b-jlvw7dsv7r 3.6s cubic-bezier(0.16, 0.8, 0.4, 1) infinite;
}
/* Staggered, so the rings read as successive sweeps rather than one thick pulse. */
.sa-lx-ring:nth-child(2)[b-jlvw7dsv7r] { animation-delay: 1.2s; }
.sa-lx-ring:nth-child(3)[b-jlvw7dsv7r] { animation-delay: 2.4s; }

@keyframes sa-lx-ping-b-jlvw7dsv7r {
    0%   { transform: scale(0.55); opacity: 0; }
    15%  { opacity: 0.75; }
    100% { transform: scale(2.4);  opacity: 0; }
}

.sa-lx-eyebrow[b-jlvw7dsv7r] {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: #00bfd4;
    background: rgba(0, 191, 212, 0.12);
    border: 1px solid rgba(0, 191, 212, 0.35);
    padding: 7px 15px; border-radius: 999px;
}

.sa-lx-pulse[b-jlvw7dsv7r] {
    width: 7px; height: 7px; border-radius: 50%; background: #00bfd4;
    box-shadow: 0 0 0 0 rgba(0, 191, 212, 0.7);
    animation: sa-lx-pulse-b-jlvw7dsv7r 2.4s infinite;
}
@keyframes sa-lx-pulse-b-jlvw7dsv7r {
    70%  { box-shadow: 0 0 0 9px rgba(0, 191, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 191, 212, 0); }
}

.sa-lx-band h1[b-jlvw7dsv7r] {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.05; letter-spacing: -0.035em; font-weight: 800;
    margin: 26px auto 0; max-width: 15ch; text-wrap: balance;
}
.sa-lx-accent[b-jlvw7dsv7r] {
    background: linear-gradient(100deg, #00bfd4, #7ee8f5);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.sa-lx-lede[b-jlvw7dsv7r] {
    margin: 20px auto 0; max-width: 56ch;
    font-size: 1.0625rem; line-height: 1.6; color: #b9cbe8;
}

.sa-lx-date[b-jlvw7dsv7r] {
    margin-top: 30px;
    font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #b9cbe8;
}
.sa-lx-date strong[b-jlvw7dsv7r] { color: #fff; font-weight: 700; }

/* ---------- Countdown ---------- */
.sa-lx-countdown[b-jlvw7dsv7r] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; max-width: 560px; margin: 18px auto 0;
}
.sa-lx-unit[b-jlvw7dsv7r] {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 18px 8px 14px;
}
.sa-lx-num[b-jlvw7dsv7r] {
    display: block;
    font-weight: 700; font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1;
    /* Inter rather than a mono webfont: index.html loads only Inter, so a JetBrains Mono stack
       would fall back silently to Consolas, and adding a second font request to every page of the
       portal for one page is a poor trade. Inter's tabular figures hold the column just as well -
       without them the digits change width every second and the row jitters. */
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.sa-lx-lbl[b-jlvw7dsv7r] {
    display: block; margin-top: 9px;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #b9cbe8;
}

/* ---------- Signup ---------- */
.sa-lx-signup[b-jlvw7dsv7r] { margin: 40px auto 0; max-width: 500px; }
.sa-lx-row[b-jlvw7dsv7r] { display: flex; gap: 10px; }

.sa-lx-sr[b-jlvw7dsv7r] {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.sa-lx-row input[b-jlvw7dsv7r] {
    flex: 1; min-width: 0;
    padding: 14px 17px; font: inherit; font-size: 15px; color: #fff;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
}
.sa-lx-row input[b-jlvw7dsv7r]::placeholder { color: rgba(255, 255, 255, 0.5); }
.sa-lx-row input:focus-visible[b-jlvw7dsv7r] {
    outline: 2px solid #00bfd4; outline-offset: 2px;
    background: rgba(255, 255, 255, 0.14);
}
.sa-lx-row input:disabled[b-jlvw7dsv7r] { opacity: 0.6; }

.sa-lx-btn[b-jlvw7dsv7r] {
    padding: 14px 26px; font: inherit; font-size: 15px; font-weight: 700;
    color: #04223f; white-space: nowrap; cursor: pointer;
    background: linear-gradient(135deg, #00bfd4, #4fd8e8);
    border: none; border-radius: 10px;
    transition: transform .16s ease, box-shadow .16s ease;
}
.sa-lx-btn:hover:not(:disabled)[b-jlvw7dsv7r] { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 191, 212, 0.32); }
.sa-lx-btn:focus-visible[b-jlvw7dsv7r] { outline: 2px solid #fff; outline-offset: 2px; }
.sa-lx-btn:disabled[b-jlvw7dsv7r] { opacity: 0.55; cursor: not-allowed; }

/* Collapsed until armed, so the layout does not reserve space for a widget that may never load. */
.sa-lx-turnstile[b-jlvw7dsv7r] { display: none; margin-top: 14px; }
.sa-lx-turnstile.is-armed[b-jlvw7dsv7r] { display: flex; justify-content: center; }

.sa-lx-fine[b-jlvw7dsv7r]  { margin-top: 12px; font-size: 13px; color: #b9cbe8; }
.sa-lx-error[b-jlvw7dsv7r] { margin-top: 12px; font-size: 13px; font-weight: 600; color: #ffd0d0; }

.sa-lx-done[b-jlvw7dsv7r] {
    display: inline-flex; align-items: center; gap: 11px;
    margin: 40px auto 0; padding: 15px 22px;
    background: rgba(0, 191, 212, 0.13);
    border: 1px solid rgba(0, 191, 212, 0.4);
    border-radius: 12px; color: #fff; font-size: 15px;
}
.sa-lx-done svg[b-jlvw7dsv7r] { color: #00bfd4; flex: none; }

/* ---------- Launched state ---------- */
.sa-lx-live[b-jlvw7dsv7r] { font-size: 1.0625rem; letter-spacing: 0; text-transform: none; color: #b9cbe8; }
.sa-lx-live strong[b-jlvw7dsv7r] { color: #00bfd4; }

.sa-lx-cta[b-jlvw7dsv7r] {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; flex-wrap: wrap; margin-top: 22px;
}
.sa-lx-btn-link[b-jlvw7dsv7r] { text-decoration: none; display: inline-block; }
.sa-lx-secondary[b-jlvw7dsv7r] { color: #b9cbe8; font-weight: 600; font-size: 15px; text-decoration: none; }
.sa-lx-secondary:hover[b-jlvw7dsv7r] { color: #fff; }

/* ---------- Example output ---------- */
.sa-lx-preview[b-jlvw7dsv7r] { margin-top: 48px; }
.sa-lx-preview-card[b-jlvw7dsv7r] {
    background: #fff; border: 1px solid #dde5f0; border-radius: 14px;
    padding: 30px 28px 24px;
}
.sa-lx-score[b-jlvw7dsv7r] { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.sa-lx-score h3[b-jlvw7dsv7r] { margin: 8px 0 0; font-size: 1.125rem; font-weight: 700; }
.sa-lx-score p[b-jlvw7dsv7r]  { margin: 6px 0 0; font-size: 0.9375rem; color: #5a6b87; max-width: 46ch; }

.sa-lx-counts[b-jlvw7dsv7r] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; margin-top: 26px;
}
.sa-lx-count[b-jlvw7dsv7r] {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; background: #f7f9fc;
    border: 1px solid #dde5f0; border-radius: 10px;
    /* Severity is carried by a left stripe, not by tinting the whole tile: four saturated
       blocks in a row would read as equally urgent, which is the opposite of the point. */
    border-left-width: 3px;
}
.sa-lx-count-critical[b-jlvw7dsv7r] { border-left-color: #d64545; }
.sa-lx-count-warn[b-jlvw7dsv7r]     { border-left-color: #d99a2b; }
.sa-lx-count-ok[b-jlvw7dsv7r]       { border-left-color: #2fa36b; }

.sa-lx-count-n[b-jlvw7dsv7r] { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #0b1a33; }
.sa-lx-count-l[b-jlvw7dsv7r] { font-size: 0.8125rem; color: #5a6b87; }

.sa-lx-preview-note[b-jlvw7dsv7r] { margin: 14px 0 0; font-size: 12px; color: #8496b3; font-style: italic; }

/* ---------- FAQ ---------- */
.sa-lx-faq[b-jlvw7dsv7r] { margin-top: 56px; max-width: 68ch; }
.sa-lx-faq h2[b-jlvw7dsv7r] {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px;
}
.sa-lx-faq details[b-jlvw7dsv7r] {
    border-bottom: 1px solid #dde5f0; padding: 16px 0;
}
.sa-lx-faq details:first-of-type[b-jlvw7dsv7r] { border-top: 1px solid #dde5f0; }
.sa-lx-faq summary[b-jlvw7dsv7r] {
    cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.sa-lx-faq summary[b-jlvw7dsv7r]::-webkit-details-marker { display: none; }
.sa-lx-faq summary[b-jlvw7dsv7r]::after {
    content: "+"; font-size: 20px; font-weight: 400; color: #1142ab; line-height: 1; flex: none;
}
.sa-lx-faq details[open] summary[b-jlvw7dsv7r]::after { content: "–"; }
.sa-lx-faq summary:focus-visible[b-jlvw7dsv7r] { outline: 2px solid #1142ab; outline-offset: 3px; border-radius: 4px; }
.sa-lx-faq details p[b-jlvw7dsv7r] { margin: 12px 0 0; font-size: 0.9375rem; color: #5a6b87; }

/* ---------- Features ---------- */
.sa-lx-section[b-jlvw7dsv7r] { max-width: 1120px; margin: 0 auto; padding: 76px 24px; }
.sa-lx-head[b-jlvw7dsv7r] { max-width: 62ch; }

.sa-lx-kicker[b-jlvw7dsv7r] {
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #1142ab;
}
.sa-lx-head h2[b-jlvw7dsv7r] {
    font-size: clamp(1.75rem, 3.4vw, 2.375rem); line-height: 1.15;
    letter-spacing: -0.025em; font-weight: 800; margin: 12px 0 0; text-wrap: balance;
}
.sa-lx-head p[b-jlvw7dsv7r] { margin: 14px 0 0; color: #5a6b87; }

/* 1px gap over a tinted background gives hairline dividers without four separate borders
   doubling up where the cards meet. */
.sa-lx-features[b-jlvw7dsv7r] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px; margin-top: 40px;
    background: #dde5f0; border: 1px solid #dde5f0; border-radius: 14px; overflow: hidden;
}
.sa-lx-feature[b-jlvw7dsv7r] { background: #fff; padding: 26px 24px 28px; }
.sa-lx-tag[b-jlvw7dsv7r] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px; letter-spacing: 0.1em; color: #00a5b8;
}
.sa-lx-feature h3[b-jlvw7dsv7r] { margin: 10px 0 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.sa-lx-feature p[b-jlvw7dsv7r]  { margin: 8px 0 0; font-size: 0.9375rem; color: #5a6b87; line-height: 1.6; }

.sa-lx-notice[b-jlvw7dsv7r] {
    margin-top: 44px; background: #fff;
    border: 1px solid #dde5f0; border-left: 3px solid #1142ab;
    border-radius: 0 14px 14px 0; padding: 22px 24px;
}
.sa-lx-notice h3[b-jlvw7dsv7r] { margin: 0; font-size: 1rem; font-weight: 700; }
.sa-lx-notice p[b-jlvw7dsv7r]  { margin: 7px 0 0; font-size: 0.9375rem; color: #5a6b87; }
.sa-lx-notice a[b-jlvw7dsv7r]  { color: #1142ab; font-weight: 600; text-decoration: none; }
.sa-lx-notice a:hover[b-jlvw7dsv7r] { text-decoration: underline; }

@media (max-width: 560px) {
    .sa-lx-countdown[b-jlvw7dsv7r] { grid-template-columns: repeat(2, 1fr); }
    .sa-lx-row[b-jlvw7dsv7r] { flex-direction: column; }
    .sa-lx-btn[b-jlvw7dsv7r] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sa-lx-pulse[b-jlvw7dsv7r] { animation: none; }
    .sa-lx-btn[b-jlvw7dsv7r] { transition: none; }
    /* Hidden rather than frozen: a stalled ring is a stray circle behind the logo with no
       explanation, which reads as a rendering fault. */
    .sa-lx-ring[b-jlvw7dsv7r] { display: none; }
}
/* /Pages/Reports/ReportList.razor.rz.scp.css */
/* ============================================================================
   Reports — scoped styles.

   The page is a list, so it is built as one: a single white card holding
   aligned rows, rather than a stack of individually bordered cards. Columns are
   a grid, so score, format, size and date line up down the page instead of
   drifting with the width of each project's name.

   Light surfaces only; separation comes from a soft shadow and a wash fill on
   hover, never from hairlines between rows.
   ============================================================================ */

.rpt[b-22ltc6wwb2],
.rpt *[b-22ltc6wwb2],
.rpt *[b-22ltc6wwb2]::before,
.rpt *[b-22ltc6wwb2]::after {
    box-sizing: border-box;
}

.rpt[b-22ltc6wwb2] {
    --ink-1: #0f1a2e;
    --ink-2: #3d4a61;
    --ink-3: #64728c;
    --ink-4: #94a0b5;

    --brand: #2563FF;
    --brand-deep: #1C4CC4;

    --surface: #ffffff;
    --wash: #f4f7fc;
    --wash-deep: #eaf0f9;
    --r-md: 14px;
    --r-sm: 10px;

    --shadow-card:
        0 1px 2px rgba(15, 26, 46, 0.04),
        0 12px 32px -18px rgba(13, 53, 128, 0.20);

    color: var(--ink-2);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.rpt-head[b-22ltc6wwb2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.rpt-title[b-22ltc6wwb2] {
    margin: 0 0 5px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink-1);
}

.rpt-sub[b-22ltc6wwb2] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3);
}

.rpt-sub b[b-22ltc6wwb2] {
    font-weight: 700;
    color: var(--ink-2);
}

/* ── Project filter ──────────────────────────────────────────────────────── */

.rpt-filter[b-22ltc6wwb2] {
    position: relative;
    min-width: 220px;
}

.rpt-filter-btn[b-22ltc6wwb2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-1);
    cursor: pointer;
    text-align: left;
}

.rpt-filter-btn svg[b-22ltc6wwb2] { flex: none; color: var(--ink-4); }
.rpt-filter-btn span[b-22ltc6wwb2] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-filter-btn:focus-visible[b-22ltc6wwb2] { outline: 2px solid var(--brand); outline-offset: 2px; }

.rpt-backdrop[b-22ltc6wwb2] { position: fixed; inset: 0; z-index: 1299; }

.rpt-menu[b-22ltc6wwb2] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 210px;
    max-width: calc(100vw - 32px);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1300;
    padding: 6px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow:
        0 2px 6px rgba(15, 26, 46, 0.08),
        0 20px 44px -16px rgba(13, 53, 128, 0.35);
}

.rpt-opt[b-22ltc6wwb2] {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-1);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-opt:hover[b-22ltc6wwb2] { background: var(--wash); }

.rpt-opt.is-selected[b-22ltc6wwb2] {
    background: #eef3fc;
    color: var(--brand);
    font-weight: 700;
}

/* ── The list ────────────────────────────────────────────────────────────── */

.rpt-list[b-22ltc6wwb2] {
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 18px;
}

/* One grid shared by every row, so the columns are true columns. */
.rpt-row[b-22ltc6wwb2] {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 88px 74px 96px 78px;
    align-items: center;
    gap: 16px;
    padding: 13px 18px;
    transition: background 0.12s ease;
}

.rpt-row:hover[b-22ltc6wwb2] { background: var(--wash-deep); }

/* Score chip. Text is darkened against the pale tints to clear WCAG AA — the
   brighter shades measured ~3.2–4.35:1 and were flagged. */
.rpt-score[b-22ltc6wwb2] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.rpt-score.good[b-22ltc6wwb2] { background: rgba(16, 185, 129, 0.12); color: #065f46; }
.rpt-score.avg[b-22ltc6wwb2]  { background: rgba(249, 115, 22, 0.12); color: #c2410c; }
.rpt-score.poor[b-22ltc6wwb2] { background: rgba(239, 68, 68, 0.12);  color: #b91c1c; }
.rpt-score.none[b-22ltc6wwb2] { background: var(--wash-deep);         color: #64728c; }

.rpt-main[b-22ltc6wwb2] { min-width: 0; }

.rpt-main h3[b-22ltc6wwb2] {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-main p[b-22ltc6wwb2] {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The three metadata cells are wrapped in .rpt-meta purely so they can be
   regrouped on small screens; display:contents lets them sit in the row grid
   as if the wrapper were not there. */
.rpt-meta[b-22ltc6wwb2] { display: contents; }

.rpt-fmt[b-22ltc6wwb2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: start;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rpt-fmt.pdf[b-22ltc6wwb2]  { background: rgba(239, 68, 68, 0.09);  color: #b91c1c; }
.rpt-fmt.html[b-22ltc6wwb2] { background: rgba(37, 99, 255, 0.09);  color: var(--brand); }
.rpt-fmt.json[b-22ltc6wwb2] { background: rgba(249, 115, 22, 0.10); color: #c2410c; }
.rpt-fmt.csv[b-22ltc6wwb2]  { background: rgba(16, 185, 129, 0.10); color: #047857; }

.rpt-size[b-22ltc6wwb2],
.rpt-date[b-22ltc6wwb2] {
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rpt-size[b-22ltc6wwb2] { text-align: right; }

.rpt-actions[b-22ltc6wwb2] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.rpt-actions button[b-22ltc6wwb2] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rpt-actions button:hover[b-22ltc6wwb2] {
    background: #eef3fc;
    color: var(--brand);
}

.rpt-actions button:focus-visible[b-22ltc6wwb2] { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Disabled action (used by "View audit" when the underlying project has been
   deleted). Cursor + hover suppressed so it reads as inert; the native `title`
   attribute still surfaces the reason on hover. */
.rpt-actions button:disabled[b-22ltc6wwb2] {
    color: var(--ink-4);
    cursor: not-allowed;
    opacity: 0.55;
}

.rpt-actions button:disabled:hover[b-22ltc6wwb2] {
    background: transparent;
    color: var(--ink-4);
}

/* Small red "!" marker used to flag deleted projects both in the row heading
   and inside the project-filter dropdown. Inline-block circle so it sits on
   the baseline without pushing the row height. */
.rpt-deleted-marker[b-22ltc6wwb2] {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    vertical-align: 1px;
    cursor: help;
}

/* Rows become two bands: identity on top, metadata on one line beneath. A
   six-column grid at phone width squeezes the project name to nothing. */
@media (max-width: 820px) {
    .rpt-row[b-22ltc6wwb2] {
        grid-template-columns: 46px minmax(0, 1fr) 78px;
        row-gap: 10px;
    }

    .rpt-meta[b-22ltc6wwb2] {
        display: flex;
        align-items: center;
        gap: 14px;
        grid-column: 2 / -1;
    }

    .rpt-size[b-22ltc6wwb2] { text-align: left; }
}

@media (max-width: 620px) {
    .rpt-title[b-22ltc6wwb2] { font-size: 21px; }
    .rpt-filter[b-22ltc6wwb2] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .rpt-row[b-22ltc6wwb2],
    .rpt-actions button[b-22ltc6wwb2] { transition: none; }
}
/* /Pages/Usage/Usage.razor.rz.scp.css */
/* ============================================================================
   Usage — scoped styles.

   This page is now the single home for consumption (the Settings Plan tab's
   copy was removed), so it carries the whole story: what you have spent this
   period, how much runway is left, and what past periods looked like.

   Two colour systems, deliberately separate:
     · ACCENT (--accent) identifies a meter — audits are blue, pages cyan,
       projects violet, seats amber. Identity only, never status.
     · TONE (.tone-ok / .tone-warn / .tone-danger) reports status. At 70% the
       bar and the percent pill leave the accent behind and go amber; at 90%
       red. A meter can therefore never look calm while it is nearly full.

   Surfaces stay light throughout, per the portal's house style — separation
   comes from soft shadows and a pale blue-grey wash, not from strokes.
   ============================================================================ */

.usg[b-wut9u4me3i],
.usg *[b-wut9u4me3i],
.usg *[b-wut9u4me3i]::before,
.usg *[b-wut9u4me3i]::after {
    box-sizing: border-box;
}

.usg[b-wut9u4me3i] {
    /* ink */
    --ink-1: #0f1a2e;
    --ink-2: #3d4a61;
    --ink-3: #64728c;
    --ink-4: #94a0b5;

    /* brand */
    --brand: #2563FF;
    --brand-deep: #1C4CC4;
    --cyan: #06D6D1;

    /* structure */
    --surface: #ffffff;
    --wash: #f4f7fc;
    --wash-deep: #eaf0f9;
    --r-lg: 18px;
    --r-md: 14px;
    --r-sm: 10px;

    --shadow-card:
        0 1px 2px rgba(15, 26, 46, 0.04),
        0 12px 32px -18px rgba(13, 53, 128, 0.20);

    color: var(--ink-2);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* Two passes of "still too dark" said the problem was the approach, not the
   shade — so the hero is now a LIGHT band: a pale brand tint with ink text,
   the way the rest of the portal works. Brand presence comes from the tint, the
   chip and the button rather than from a block of saturated colour. */
.usg-hero[b-wut9u4me3i] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 22px 26px;
    margin-bottom: 20px;
    border-radius: var(--r-lg);
    overflow: hidden;
    color: var(--ink-2);
    background: linear-gradient(118deg, #c3d9f7 0%, #b9d3f4 46%, #b3dfee 100%);
}

.usg-hero[b-wut9u4me3i]::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 214, 209, 0.22), transparent 70%);
    pointer-events: none;
}

/* The illustration sits BEHIND the right-hand block, as asked. It is scaled to
   `contain` so both panels stay whole inside the region rather than being
   clipped at the band's edge, and held at 38% — strong enough to read as a
   picture, light enough that the countdown and button keep their contrast. Its
   white panels actually lift the area behind the text slightly. */
/* Bar-chart backdrop behind the right-hand block. Faint on purpose: it is a
   texture the countdown and button sit on top of, not a picture to look at. */
.usg-hero[b-wut9u4me3i]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(52%, 500px);
    background: url('/usage-chart.svg') right center / contain no-repeat;
    opacity: 0.16;
    /* Dissolves before it reaches the plan details on the left. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    pointer-events: none;
}

.usg-hero-main[b-wut9u4me3i] { position: relative; z-index: 1; }

/* Page title, sitting on the page background above the band. */
.usg-pagetitle[b-wut9u4me3i] { margin-bottom: 16px; }

.usg-hero-row[b-wut9u4me3i] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.usg-hero-tag[b-wut9u4me3i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    background: #ffffff;
}

.usg-hero-tag svg[b-wut9u4me3i] { color: #d97706; }

.usg-hero-plan[b-wut9u4me3i] {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink-1);
}

.usg-hero-status[b-wut9u4me3i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
}

.usg-hero-status i[b-wut9u4me3i] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
}

/* --ink-2, not --ink-3: the mid tint is dark enough that the lighter muted ink
   drops to about 4:1, just under AA for this size. */
.usg-hero-meta[b-wut9u4me3i] {
    margin: 9px 0 0;
    font-size: 12.5px;
    color: var(--ink-2);
}

/* Solid brand fill. The previous translucent-white "glass" button on blue had
   almost no edge against its background and did not read as clickable at all. */
.usg-hero-btn[b-wut9u4me3i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    background: var(--brand);
    box-shadow: 0 8px 18px -10px rgba(13, 53, 128, 0.7);
    transition: background 0.15s ease;
}

.usg-hero-btn:hover[b-wut9u4me3i] { background: var(--brand-deep); }
.usg-hero-btn:focus-visible[b-wut9u4me3i] { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Right side answers "how long have I got", not "what does it cost" — this is a
   usage page, and price already has a home on /plans. The CTA lives here too,
   under the countdown that motivates it. */
.usg-hero-side[b-wut9u4me3i] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.usg-hero-big[b-wut9u4me3i] {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--brand-deep);
    font-variant-numeric: tabular-nums;
}

.usg-hero-big span[b-wut9u4me3i] {
    margin-left: 7px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink-3);
}

.usg-hero-cap[b-wut9u4me3i] {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-1);
}

/* ── Page header (permission / error states) ─────────────────────────────── */

.usg-head[b-wut9u4me3i] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.usg-title[b-wut9u4me3i] {
    margin: 0 0 5px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink-1);
}

.usg-sub[b-wut9u4me3i] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3);
}

.usg-sub b[b-wut9u4me3i] {
    font-weight: 700;
    color: var(--ink-2);
}

.usg-btn[b-wut9u4me3i] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: var(--brand);
    text-decoration: none;
    transition: background 0.15s ease;
}

.usg-btn:hover[b-wut9u4me3i] { background: var(--brand-deep); }
.usg-btn:focus-visible[b-wut9u4me3i] { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Secondary CTA — same shape, tinted rather than filled, so it never competes
   with "Manage plan" in the page header. */
.usg-btn.is-ghost[b-wut9u4me3i] {
    color: var(--brand);
    background: #eef3fc;
}

.usg-btn.is-ghost:hover[b-wut9u4me3i] { background: var(--wash-deep); }


/* ── Meters ──────────────────────────────────────────────────────────────── */

.usg-meters[b-wut9u4me3i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.usg-meter[b-wut9u4me3i] {
    position: relative;
    padding: 18px 18px 16px;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Hairline of accent along the top edge — the one place identity colour
   appears at full strength. */
.usg-meter[b-wut9u4me3i]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
}

.usg-meter.is-audits[b-wut9u4me3i]  { --accent: linear-gradient(90deg, #2563FF, #3b82f6); --accent-solid: #2563FF; --accent-soft: rgba(37, 99, 255, 0.10); }
.usg-meter.is-pages[b-wut9u4me3i]   { --accent: linear-gradient(90deg, #05A8A4, #06D6D1); --accent-solid: #05A8A4; --accent-soft: rgba(6, 214, 209, 0.13); }
.usg-meter.is-projects[b-wut9u4me3i]{ --accent: linear-gradient(90deg, #7c3aed, #9333ea); --accent-solid: #7c3aed; --accent-soft: rgba(124, 58, 237, 0.10); }
.usg-meter.is-seats[b-wut9u4me3i]   { --accent: linear-gradient(90deg, #d97706, #f59e0b); --accent-solid: #d97706; --accent-soft: rgba(245, 158, 11, 0.13); }

.usg-meter-top[b-wut9u4me3i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.usg-meter-icon[b-wut9u4me3i] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--accent-solid);
    background: var(--accent-soft);
}

.usg-meter-icon svg[b-wut9u4me3i] { width: 17px; height: 17px; }

/* Percent pill — tone, not accent. */
.usg-pct[b-wut9u4me3i] {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.tone-ok     .usg-pct[b-wut9u4me3i] { color: #047857; background: rgba(16, 185, 129, 0.12); }
.tone-warn   .usg-pct[b-wut9u4me3i] { color: #b45309; background: rgba(245, 158, 11, 0.14); }
.tone-danger .usg-pct[b-wut9u4me3i] { color: #be123c; background: rgba(225, 29, 72, 0.12); }

.usg-meter-num[b-wut9u4me3i] {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
}

.usg-meter-lim[b-wut9u4me3i] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-4);
    letter-spacing: 0;
    margin-left: 3px;
}

.usg-meter-label[b-wut9u4me3i] {
    margin: 3px 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
}

.usg-track[b-wut9u4me3i] {
    height: 6px;
    border-radius: 4px;
    background: var(--wash-deep);
    overflow: hidden;
}

.usg-track span[b-wut9u4me3i] {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--accent);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Past 70% the bar abandons its identity colour for the tone colour. */
.tone-warn   .usg-track span[b-wut9u4me3i] { background: linear-gradient(90deg, #f59e0b, #f97316); }
.tone-danger .usg-track span[b-wut9u4me3i] { background: linear-gradient(90deg, #e11d48, #dc2626); }

.usg-meter-foot[b-wut9u4me3i] {
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--ink-3);
}

.tone-danger .usg-meter-foot[b-wut9u4me3i] { color: #be123c; font-weight: 600; }

/* ── Insights row ────────────────────────────────────────────────────────── */

.usg-stats[b-wut9u4me3i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

/* Same anatomy as the meters above - a 34px tinted icon tile - so the two rows read as one
   system. These were the odd ones out: a 15px glyph set inside the label line, a size and
   treatment used nowhere else on the page, which is what made them look unfinished next to
   the meters. No accent bar on top: that stays the meters' mark, so they remain the primary
   row and these read as the summary beneath them. */
.usg-stat[b-wut9u4me3i] {
    --stat-solid: var(--brand);
    --stat-soft: rgba(17, 66, 171, 0.10);

    padding: 18px 18px 16px;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

/* Utilisation only. Days and audits remaining are neutral counts, and giving a countdown a
   warning colour would suggest a problem that isn't one. */
.usg-stat.tone-ok[b-wut9u4me3i]     { --stat-solid: #047857; --stat-soft: rgba(16, 185, 129, 0.12); }
.usg-stat.tone-warn[b-wut9u4me3i]   { --stat-solid: #b45309; --stat-soft: rgba(245, 158, 11, 0.14); }
.usg-stat.tone-danger[b-wut9u4me3i] { --stat-solid: #be123c; --stat-soft: rgba(225, 29, 72, 0.12); }

.usg-stat-head[b-wut9u4me3i] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.usg-stat-icon[b-wut9u4me3i] {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--stat-solid);
    background: var(--stat-soft);
}

.usg-stat-icon svg[b-wut9u4me3i] { width: 17px; height: 17px; }

.usg-stat-label[b-wut9u4me3i] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-2);
}

/* Matches .usg-meter-num exactly, so a figure reads at the same size in either row. */
.usg-stat-val[b-wut9u4me3i] {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
}

.usg-stat.tone-ok     .usg-stat-val[b-wut9u4me3i] { color: #047857; }
.usg-stat.tone-warn   .usg-stat-val[b-wut9u4me3i] { color: #b45309; }
.usg-stat.tone-danger .usg-stat-val[b-wut9u4me3i] { color: #be123c; }

.usg-stat-note[b-wut9u4me3i] {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-3);
}

/* ── Cards + tables ──────────────────────────────────────────────────────── */

.usg-card[b-wut9u4me3i] {
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 22px;
}

.usg-card-head[b-wut9u4me3i] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px 14px;
}

.usg-card-head h2[b-wut9u4me3i] {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink-1);
}

.usg-card-head p[b-wut9u4me3i] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
}

.usg-period[b-wut9u4me3i] {
    font-weight: 700;
    color: var(--ink-1);
}

/* ── Comparison table ────────────────────────────────────────────────────── */

.usg-scroll[b-wut9u4me3i] { overflow-x: auto; }

.usg-table[b-wut9u4me3i] {
    width: 100%;
    border-collapse: collapse;
}

/* --ink-4 on --wash measures about 2.3:1 — below AA for small text, and at
   11px uppercase the headings vanished into the strip. --ink-3 clears 4.5:1. */
.usg-table th[b-wut9u4me3i] {
    padding: 10px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--wash);
    white-space: nowrap;
}

.usg-table td[b-wut9u4me3i] {
    padding: 12px 20px;
    font-size: 13px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* Row separation is a fill on hover, never a hairline. It has to be --wash-deep
   rather than --wash: the header strip is already --wash, so a hovered row in
   the same value merged into it and the left column read as one grey block. */
.usg-table tbody tr[b-wut9u4me3i] { transition: background 0.12s ease; }
.usg-table tbody tr:hover[b-wut9u4me3i] { background: var(--wash-deep); }

.usg-feature[b-wut9u4me3i] {
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}

/* Numeric alignment for the Past Usage columns. Must out-specify `.usg-table th`,
   which sets text-align: left. */
.usg-table th.usg-mid[b-wut9u4me3i], .usg-table td.usg-mid[b-wut9u4me3i] { text-align: center; }
.usg-table th.usg-num[b-wut9u4me3i], .usg-table td.usg-num[b-wut9u4me3i] { text-align: right; }

/* Must out-specify `.usg-table th`, which sets text-align: left for the Feature
   heading — otherwise the plan headings sat left while their figures were
   centred, and every heading was offset from its own column. */
.usg-table th.usg-plan-col[b-wut9u4me3i],
.usg-table td.usg-plan-col[b-wut9u4me3i] {
    text-align: center;
}

.usg-plan-col[b-wut9u4me3i] {
    color: var(--ink-2);
}

/* The tenant's own column, raised so it can be found at a glance.

   It used to be marked by type alone - bold brand figures and a 3px cap - on the reasoning
   that a tint turns grey and a frame boxes the column in. Both hold, and the result was a
   column you had to hunt for. So it now takes a very light brand tint, hairline sides, and a
   soft shadow thrown outward.

   The body shadow is horizontal only: the negative spread keeps it off the top and bottom
   edges, so stacked rows join into one continuous column rather than a stack of boxes. Only
   the header takes the top cap and only the last row a bottom edge. The cells are positioned
   so the shadow paints over the neighbouring columns instead of under them, and the tint is
   translucent so a hovered row still shows through. */
.usg-table .usg-plan-col.is-current[b-wut9u4me3i] {
    position: relative;
    z-index: 1;
    color: var(--brand-deep);
    font-weight: 700;
    background: rgba(17, 66, 171, 0.05);
    box-shadow:
        inset 1px 0 0 rgba(17, 66, 171, 0.22),
        inset -1px 0 0 rgba(17, 66, 171, 0.22),
        -12px 0 20px -16px rgba(13, 53, 128, 0.45),
        12px 0 20px -16px rgba(13, 53, 128, 0.45);
}

.usg-table th.usg-plan-col.is-current[b-wut9u4me3i] {
    color: var(--brand-deep);
    background: #e8eefb;
    box-shadow:
        inset 0 3px 0 0 var(--brand),
        inset 1px 0 0 rgba(17, 66, 171, 0.22),
        inset -1px 0 0 rgba(17, 66, 171, 0.22),
        -12px 0 20px -16px rgba(13, 53, 128, 0.45),
        12px 0 20px -16px rgba(13, 53, 128, 0.45);
}

.usg-table tbody tr:last-child td.usg-plan-col.is-current[b-wut9u4me3i] {
    box-shadow:
        inset 1px 0 0 rgba(17, 66, 171, 0.22),
        inset -1px 0 0 rgba(17, 66, 171, 0.22),
        inset 0 -1px 0 rgba(17, 66, 171, 0.22),
        -12px 0 20px -16px rgba(13, 53, 128, 0.45),
        12px 0 20px -16px rgba(13, 53, 128, 0.45);
}

/* Filled rather than outlined. At 9px a thin outline pill read as a faint mark beside the plan
   name; a solid badge is the one filled element in the header, which is the point. */
.usg-plan-current[b-wut9u4me3i] {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: #ffffff;
    background: var(--brand);
}

/* The "Current" badge on the in-flight period row. */
.usg-now[b-wut9u4me3i] {
    margin-left: 9px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
    background: #eef3fc;
    white-space: nowrap;
}

/* ── Empty / denied states ───────────────────────────────────────────────── */

.usg-note[b-wut9u4me3i] {
    padding: 22px;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}

@media (max-width: 700px) {
    .usg-hero[b-wut9u4me3i] { padding: 20px; }
    .usg-hero-plan[b-wut9u4me3i] { font-size: 25px; }
    .usg-hero-big[b-wut9u4me3i] { font-size: 27px; }

    /* Stacked, the right column is no longer on the right — left-align it so it
       lines up with the plan details above rather than floating. */
    .usg-hero-side[b-wut9u4me3i] { align-items: flex-start; text-align: left; }

    /* Stacked, the artwork would sit under the plan details rather than beside
       the countdown. */
    .usg-hero[b-wut9u4me3i]::before { display: none; }
}

@media (max-width: 620px) {
    .usg-title[b-wut9u4me3i] { font-size: 21px; }
    .usg-table th[b-wut9u4me3i], .usg-table td[b-wut9u4me3i] { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .usg-track span[b-wut9u4me3i],
    .usg-btn[b-wut9u4me3i],
    .usg-table tbody tr[b-wut9u4me3i] { transition: none; }
}