/*
 * IM Dashboard stylesheet.
 *
 * Order: tokens → base → shell → components → legacy page styles → print.
 * New pages (brand page, client capability page) use only the component
 * classes; the legacy section keeps the earlier /rank, /overview, admin and
 * form pages working until each is rebuilt.
 */

/* Tokens ----------------------------------------------------------------- */
/* Colour scheme plumbing: layout.php sets data-theme only for an explicit
 * light/dark choice; without it the device setting wins. Print is light. */
@font-face {
    font-family: "Geist";
    src: url("fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }
@media print { :root { color-scheme: light; } }
:root {
    color-scheme: light dark;
    --ink: light-dark(#25212b, #fffef9);
    --ink-2: light-dark(#4f4857, #d6cfda);
    --ink-3: light-dark(#6e6674, #beb6c2);
    --ink-soft: light-dark(#6e6674, #beb6c2);
    --paper: light-dark(#fcfaf7, #17151a);
    --surface: light-dark(#ffffff, #211e24);
    --line: light-dark(#e8e0e5, #3d3641);
    --line-2: light-dark(#d9cfd6, #4a4250);
    --mint: light-dark(#ebe5ff, #342b52);
    --mint-strong: light-dark(#c9bcff, #4b3d7a);
    --green: light-dark(#6d4aff, #a48bff);
    --green-dark: light-dark(#5a37f0, #c8b9ff);
    --green-ink: light-dark(#5a37f0, #c8b9ff);
    --orange: light-dark(#e86f8c, #e86f8c);
    --orange-ink: light-dark(#6d4aff, #a48bff);
    --blue: light-dark(#23b2ef, #23b2ef);
    --good: light-dark(#1f7a4d, #7fd6a4); --good-bg: light-dark(#e3f3ea, #212c2a);
    --warn: light-dark(#9a6200, #e5b83c); --warn-bg: light-dark(#fff2d6, #33281f);
    --bad: light-dark(#b3341e, #f2a9a2); --bad-bg: light-dark(#fdece7, #372123);
    --neutral: light-dark(#5b6664, #b5b0ac); --neutral-bg: light-dark(#eef0ec, #2a292e);
    --info: light-dark(#2a5f9e, #8fb8ec); --info-bg: light-dark(#e6eef8, #222836);
    --on-brand: light-dark(#ffffff, #17151a);
    --on-warn: light-dark(#ffffff, #25212b);
    --on-brand-soft: light-dark(#ebe5ff, #2a1f55);
    --muted: light-dark(#6e6674, #beb6c2);
    --surface-2: light-dark(#f6f1f5, #2a252d);
    --print-paper: #fff;
    --print-ink: #000;
    --print-line: #bbb;
    --shadow-color-soft: light-dark(rgba(23, 61, 45, .03), rgba(0, 0, 0, .25));
    --shadow-color-savebar: light-dark(rgb(23 61 45 / 15%), rgba(0, 0, 0, .35));
    --shadow-color-rail: light-dark(#18201f0a, rgba(0, 0, 0, .25));
    --row-hover: light-dark(#f6f1f5, #2a252d);
    --status-bad: light-dark(#c0392b, #e88f84);
    --report-ink-3: light-dark(#5f5963, #b3adb8);
    --report-surface: light-dark(#f6f1f5, #2a252d);
    --report-line: light-dark(#d9cfd6, #4a4250);
    --report-hover: light-dark(#f6f1f5, #2a252d);
    --report-evidence: light-dark(#f6f1f5, #2a252d);
    --chart-track: light-dark(#e7ebe6, #2a252d);
    --chart-citation: light-dark(#205e85, #4f7ba6);
    --chart-other: light-dark(#a9b3ad, #9a938a);
    --chart-none: light-dark(#c6cec8, #4e4a52);
    --chart-unknown: light-dark(#f1d7ad, #4a4020);
    --chart-top20: light-dark(#9fb8c9, #3d5a73);
    --chart-beyond20: light-dark(#c9c0a4, #57503a);
    --chart-not-measured: light-dark(#e2ded3, #35322b);
    --chart-note: light-dark(#8c5b16, #d9a45f);
    --chart-amber: light-dark(#94610c, #d9a400);
    --chart-potential: light-dark(#8a3f73, #d08ab8);
    --progress-info: light-dark(#64736e, #9a958c);
    --microcopy: light-dark(#6e6674, #a7a1ab);
    --form-optional: light-dark(#6e6674, #a7a1ab);
    --field-border: light-dark(#948592, #7a7180);
    --field-border-hover: light-dark(#879d8e, #8a8478);
    --field-readonly-bg: light-dark(#f6f1f5, #2a252d);
    --field-hint: light-dark(#6e6674, #a7a1ab);
    --field-error: light-dark(#ad3b31, #f2a9a2);
    --success-border: light-dark(#c9bcff, #4b3d7a);
    --flash-border: light-dark(#c9bcff, #4b3d7a);
    --flash-error-ink: light-dark(#7e2d27, #f2a9a2);
    --flash-error-bg: light-dark(#fbe9e3, #2f2024);
    --flash-error-border: light-dark(#efc6b9, #6e3535);
    --flash-warn-ink: light-dark(#70511f, #e5b83c);
    --flash-warn-bg: light-dark(#fff2d7, #2d2623);
    --flash-warn-border: light-dark(#f0d8a1, #6b5426);
    --detail-border: light-dark(#e8e0e5, #3d3641);
    --setup-done-bg: light-dark(#dcefe1, #202827);
    --setup-done-ink: light-dark(#1b5f35, #7fd6a4);
    --setup-next-bg: light-dark(#fff0cc, #2e261f);
    --setup-next-ink: light-dark(#785300, #e5b83c);
    --setup-blocked-bg: light-dark(#eceff0, #29282e);
    --setup-blocked-ink: light-dark(#586267, #b5b0ac);
    --kv-signal-bg: light-dark(#f6f1f5, #2a252d);
    --kv-mention-ink: light-dark(#205743, #7fd6a4);
    --kv-mention-bg: light-dark(#e5f1e9, #212729);
    --kv-mention-border: light-dark(#d1e6d8, #2f5a44);
    --kv-citation-ink: light-dark(#205577, #8fb8ec);
    --kv-citation-bg: light-dark(#e8f1f7, #212630);
    --kv-citation-border: light-dark(#d2e3ef, #2e4f6e);
    --kv-no-ink: light-dark(#606861, #b5b0ac);
    --kv-no-bg: light-dark(#f1f3f0, #2a292d);
    --kv-no-border: light-dark(#e5e8e2, #4a4648);
    --kv-unknown-ink: light-dark(#79550b, #e5b83c);
    --kv-unknown-bg: light-dark(#fcf4d9, #2e2620);
    --kv-unknown-border: light-dark(#eaddb5, #6b5426);
    --kv-failed-ink: light-dark(#962e2e, #f2a9a2);
    --kv-failed-bg: light-dark(#fbeaea, #332026);
    --kv-failed-border: light-dark(#efcdcd, #6e3535);
    --track-mention: light-dark(#164d82, #7fb3e8);
    --track-link: light-dark(#287452, #6fce9e);
    --track-border: light-dark(#d6dee7, #3a4350);
    --track-muted: light-dark(#536273, #a7b3c2);
    --track-focus: light-dark(#b45309, #e8a04c);
    --track-notice-border: light-dark(#416586, #5b87ad);
    --track-notice-bg: light-dark(#eef4f8, #262933);
    --track-error-border: light-dark(#a2312a, #e88f84);
    --track-error-bg: light-dark(#fff2ee, #342125);
    --track-field-border: light-dark(#788a9e, #6b7584);
    --track-ink: light-dark(#182b40, #dbe5f0);
    --track-grid: light-dark(#dae2e9, #3d3a44);
    --track-own-bg: light-dark(#f0f5fa, #26303a);
    --track-detail-border: light-dark(#7195b6, #4a6a8a);
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
    /* Sticky workspace top bar height (from 801px); sticky content clears it. */
    --topbar-h: 76px;
    /* Collapsed phone rail height (≤800px .workspace-rail, sticky on workspace pages); sticky content clears it. */
    --rail-phone-h: 69px;
    /* One row of sticky section tabs (.subnav; from 801px it sits below the top bar); content below it clears both. */
    --subnav-h: 55px;
    --t-xs: .75rem; --t-sm: .8125rem; --t-base: .9375rem; --t-md: 1.0625rem; --t-lg: 1.375rem; --t-xl: 1.75rem; --t-2xl: 2.25rem;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --shadow: 0 1px 2px light-dark(rgba(23, 61, 45, .06), rgba(0, 0, 0, .3)), 0 8px 24px light-dark(rgba(23, 61, 45, .05), rgba(0, 0, 0, .28));
    --max: 1200px;
    --font: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Motion: durations and easing for the "Motion" section near the end. */
    --m-ease-out: cubic-bezier(.16, 1, .3, 1);
    --m-dur-hover: 160ms;
    --m-dur-reveal: 600ms;
    --m-dur-reveal-move: 800ms;
    --m-dur-draw: 900ms;
    --m-dur-theme: 280ms;
    --m-stagger: 60ms;
    --m-shift: 12px;
    --m-clear: transparent;
    --kicker-num: var(--muted);
    --index-ink: var(--muted);
    --index-active: var(--ink);
    --index-mark: var(--green);
    /* Lime fill only on dark paper; on light paper the brand ink (--green-ink) carries it. */
    --live-dot: light-dark(#5a37f0, #dfff57);
    --live-dot-edge: light-dark(rgba(37, 33, 43, .25), rgba(223, 255, 87, 0));
    --live-ring: light-dark(rgba(90, 55, 240, .32), rgba(223, 255, 87, .4));
    /* Public intro reel at / (the "Intro" section). Near-black paper in dark. */
    --intro-paper: light-dark(#fcfaf7, #0d0c0f);
    --intro-glass: light-dark(rgba(252, 250, 247, .82), rgba(13, 12, 15, .72));
    --intro-rim:
        0 0 0 1px light-dark(rgba(109, 74, 255, 0), rgba(164, 139, 255, .2)),
        0 -14px 48px -26px light-dark(rgba(109, 74, 255, 0), rgba(35, 178, 239, .5));
    --intro-shadow: 0 8px 24px light-dark(rgba(44, 31, 48, .08), rgba(0, 0, 0, .25));
    --intro-powder: light-dark(#ebe5ff, #342b52);
    --intro-kicker: var(--green);
    --intro-payoff-a: var(--green);
    --intro-payoff-b: light-dark(#214e9c, #23b2ef);
    --intro-backdrop-rim-a: light-dark(rgba(109, 74, 255, .26), rgba(164, 139, 255, .92));
    --intro-backdrop-rim-b: light-dark(rgba(35, 178, 239, .22), rgba(35, 178, 239, .86));
    --intro-backdrop-star: light-dark(rgba(37, 33, 43, .16), rgba(223, 255, 87, .55));
    --intro-ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --intro-spring: linear(0, .042, .1462, .2846, .4353, .5825, .7158, .829, .9197, .9877, 1.0351, 1.0646, 1.0796,
        1.0835, 1.0796, 1.0707, 1.059, 1.0464, 1.0341, 1.0231, 1.0138, 1.0063, 1.0007, .9969, .9945, .9933, .993,
        .9934, .9942, .9951, .9962, .9972, .9981, .9989, .9995, 1);
    --intro-dur-pop: 180ms;
    --intro-dur-modal: 220ms;
    --intro-dur-sheet: 400ms;
    --intro-dur-reveal: 900ms;
    --intro-dur-reveal-move: 1100ms;
    --intro-stagger: 70ms;
    --intro-shift: 28px;
    --intro-blur: 8px;
    /* Brand hero and pastel number cards. */
    --im-powder: light-dark(#ebe5ff, #342b52);
    --im-sky: light-dark(#dceaf7, #24394b);
    --im-sage: light-dark(#cfe8dc, #244036);
    --im-butter: light-dark(#f8e8ad, #4a4020);
    --hero-ring-track: color-mix(in srgb, var(--muted) 20%, transparent);
    --hero-ring-value: var(--green);
    --hero-glow: var(--green);
    --hero-chip-bg: color-mix(in srgb, var(--surface) 72%, transparent);
    --hero-icon-box: color-mix(in srgb, var(--surface) 78%, transparent);
    --on-pastel-ink: var(--ink-2);
    --on-pastel-accent: var(--green-ink);
    /* Shell (Tern R2b): rail logo, top bar, avatar. */
    --im-lime: light-dark(#dfff57, #dfff57);
    --im-cyan: light-dark(#23b2ef, #23b2ef);
    --im-dark: light-dark(#171816, #111210);
    --rail-wordmark: var(--info);
    --rail-logo-mark: var(--im-cyan);
    --topbar-bg: color-mix(in srgb, var(--paper) 92%, transparent);
    --avatar-bg: var(--im-lime);
    --avatar-ink: var(--im-dark);
    /* AI layout B: quiet comparison bars, derived from the current theme's ink. */
    --aivs-bar-track: color-mix(in srgb, var(--ink) 10%, var(--m-clear));
    --aivs-bar-rival: color-mix(in srgb, var(--ink) 48%, var(--m-clear));
}

/* light-dark() fallback (B-101): a browser without light-dark() would drop every colour token,
   so it gets the light palette instead. Generated from the light argument of each token above;
   scripts/test-feature-colour-token-fallback.php keeps the two in step. */
@supports not (color: light-dark(white, black)) {
    :root {
        color-scheme: light;
        --ink: #25212b;
        --ink-2: #4f4857;
        --ink-3: #6e6674;
        --ink-soft: #6e6674;
        --paper: #fcfaf7;
        --surface: #ffffff;
        --line: #e8e0e5;
        --line-2: #d9cfd6;
        --mint: #ebe5ff;
        --mint-strong: #c9bcff;
        --green: #6d4aff;
        --green-dark: #5a37f0;
        --green-ink: #5a37f0;
        --orange: #e86f8c;
        --orange-ink: #6d4aff;
        --blue: #23b2ef;
        --good: #1f7a4d;
        --good-bg: #e3f3ea;
        --warn: #9a6200;
        --warn-bg: #fff2d6;
        --bad: #b3341e;
        --bad-bg: #fdece7;
        --neutral: #5b6664;
        --neutral-bg: #eef0ec;
        --info: #2a5f9e;
        --info-bg: #e6eef8;
        --on-brand: #ffffff;
        --on-warn: #ffffff;
        --on-brand-soft: #ebe5ff;
        --muted: #6e6674;
        --surface-2: #f6f1f5;
        --shadow-color-soft: rgba(23, 61, 45, .03);
        --shadow-color-savebar: rgb(23 61 45 / 15%);
        --shadow-color-rail: #18201f0a;
        --row-hover: #f6f1f5;
        --status-bad: #c0392b;
        --report-ink-3: #5f5963;
        --report-surface: #f6f1f5;
        --report-line: #d9cfd6;
        --report-hover: #f6f1f5;
        --report-evidence: #f6f1f5;
        --chart-track: #e7ebe6;
        --chart-citation: #205e85;
        --chart-other: #a9b3ad;
        --chart-none: #c6cec8;
        --chart-unknown: #f1d7ad;
        --chart-top20: #9fb8c9;
        --chart-beyond20: #c9c0a4;
        --chart-not-measured: #e2ded3;
        --chart-note: #8c5b16;
        --chart-amber: #94610c;
        --chart-potential: #8a3f73;
        --progress-info: #64736e;
        --microcopy: #6e6674;
        --form-optional: #6e6674;
        --field-border: #948592;
        --field-border-hover: #879d8e;
        --field-readonly-bg: #f6f1f5;
        --field-hint: #6e6674;
        --field-error: #ad3b31;
        --success-border: #c9bcff;
        --flash-border: #c9bcff;
        --flash-error-ink: #7e2d27;
        --flash-error-bg: #fbe9e3;
        --flash-error-border: #efc6b9;
        --flash-warn-ink: #70511f;
        --flash-warn-bg: #fff2d7;
        --flash-warn-border: #f0d8a1;
        --detail-border: #e8e0e5;
        --setup-done-bg: #dcefe1;
        --setup-done-ink: #1b5f35;
        --setup-next-bg: #fff0cc;
        --setup-next-ink: #785300;
        --setup-blocked-bg: #eceff0;
        --setup-blocked-ink: #586267;
        --kv-signal-bg: #f6f1f5;
        --kv-mention-ink: #205743;
        --kv-mention-bg: #e5f1e9;
        --kv-mention-border: #d1e6d8;
        --kv-citation-ink: #205577;
        --kv-citation-bg: #e8f1f7;
        --kv-citation-border: #d2e3ef;
        --kv-no-ink: #606861;
        --kv-no-bg: #f1f3f0;
        --kv-no-border: #e5e8e2;
        --kv-unknown-ink: #79550b;
        --kv-unknown-bg: #fcf4d9;
        --kv-unknown-border: #eaddb5;
        --kv-failed-ink: #962e2e;
        --kv-failed-bg: #fbeaea;
        --kv-failed-border: #efcdcd;
        --track-mention: #164d82;
        --track-link: #287452;
        --track-border: #d6dee7;
        --track-muted: #536273;
        --track-focus: #b45309;
        --track-notice-border: #416586;
        --track-notice-bg: #eef4f8;
        --track-error-border: #a2312a;
        --track-error-bg: #fff2ee;
        --track-field-border: #788a9e;
        --track-ink: #182b40;
        --track-grid: #dae2e9;
        --track-own-bg: #f0f5fa;
        --track-detail-border: #7195b6;
        --shadow: 0 1px 2px rgba(23, 61, 45, .06), 0 8px 24px rgba(23, 61, 45, .05);
        --live-dot: #5a37f0;
        --live-dot-edge: rgba(37, 33, 43, .25);
        --live-ring: rgba(90, 55, 240, .32);
        --intro-paper: #fcfaf7;
        --intro-glass: rgba(252, 250, 247, .82);
        --intro-rim: 0 0 0 1px rgba(109, 74, 255, 0), 0 -14px 48px -26px rgba(109, 74, 255, 0);
        --intro-shadow: 0 8px 24px rgba(44, 31, 48, .08);
        --intro-powder: #ebe5ff;
        --intro-payoff-b: #214e9c;
        --intro-backdrop-rim-a: rgba(109, 74, 255, .26);
        --intro-backdrop-rim-b: rgba(35, 178, 239, .22);
        --intro-backdrop-star: rgba(37, 33, 43, .16);
        --im-powder: #ebe5ff;
        --im-sky: #dceaf7;
        --im-sage: #cfe8dc;
        --im-butter: #f8e8ad;
        --im-lime: #dfff57;
        --im-cyan: #23b2ef;
        --im-dark: #171816;
    }
}

/* Base ------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; color: var(--ink); background: var(--paper); font: var(--t-base)/1.5 var(--font); }
a { color: var(--green); text-underline-offset: .15em; }
a:hover { color: var(--green-ink); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { margin-bottom: .5rem; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: var(--t-2xl); font-weight: 800; }
h2 { font-size: var(--t-lg); font-weight: 700; }
h3 { font-size: var(--t-md); font-weight: 700; }
button, input, select { font: inherit; color: inherit; }
button, .button, .btn { cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
.container { width: min(var(--max), calc(100% - var(--s-6))); margin-inline: auto; }
.narrow { max-width: 720px; }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 10; padding: .7rem 1rem; color: var(--on-brand); background: var(--green-ink); border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.eyebrow { margin: 0 0 var(--s-1); color: var(--orange-ink); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-sm); }
.mono { font-family: var(--mono); font-size: var(--t-sm); }

/* Shell: header, navigation, footer ------------------------------------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.nav-shell { display: flex; align-items: center; gap: var(--s-5); min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); font-size: 1rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 26px; height: 26px; color: var(--on-brand); background: var(--green); border-radius: 7px; font-size: 1rem; line-height: 1; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); margin-left: auto; font-size: var(--t-sm); }
.site-nav a:not(.button) { padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; text-decoration: none; }
.site-nav a:not(.button):hover { background: var(--paper); color: var(--ink); }
.site-nav a:not(.button)[aria-current="page"] { background: var(--mint); color: var(--green-ink); font-weight: 700; }
.nav-note { margin-left: auto; color: var(--ink-3); font-size: var(--t-sm); }
.nav-logout { display: inline; margin: 0; }
.link-button { padding: 0; color: var(--ink-2); background: none; border: 0; font-size: inherit; }
.link-button:hover { color: var(--green-ink); }

/* Compact signed-in header (≤800px): one row of brand, current website and
   Menu. Desktop keeps the inline account nav; the theme switch lives only
   in Account. -------------------------------------------------------------- */
.site-current { flex: 1 1 auto; min-width: 0; overflow: hidden; margin-left: auto; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.site-menu { position: relative; flex: none; margin-left: auto; }
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu-panel, .brand-actions-panel { position: absolute; top: calc(100% + var(--s-2)); right: 0; z-index: 6; display: grid; gap: var(--s-1); min-width: 230px; padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.site-menu-panel a, .brand-actions-panel a { display: flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.site-menu-panel a:hover, .brand-actions-panel a:hover { background: var(--paper); color: var(--ink); }
.site-menu-panel a[aria-current="page"] { background: var(--mint); color: var(--green-ink); font-weight: 700; }
.site-menu-panel form { margin: 0; padding: var(--s-2) var(--s-3); }
.site-menu-panel .meta { padding: 0 var(--s-3); }
.site-current, .site-menu { display: none; }
@media (max-width: 800px) {
    body.has-workspace .nav-shell { flex-wrap: nowrap; gap: var(--s-3); }
    body.has-workspace .site-nav { display: none; }
    body.has-workspace .site-current, body.has-workspace .site-menu { display: block; }
}

/* Colour theme preference: /account radios only (the header switch is removed) */
.theme-section fieldset { margin: 0 0 var(--s-4); padding: 0; border: 0; }
.theme-section legend { margin-bottom: .45rem; padding: 0; font-size: .9rem; font-weight: 750; }
.theme-section .check { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; margin: 0; font-size: var(--t-sm); font-weight: 500; }
.theme-section .check input, .field .check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
@media (max-width: 600px) { .theme-section .check { min-height: 44px; } }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .72rem 1.15rem; color: var(--on-brand); background: var(--green); border: 1px solid var(--green); border-radius: 9px; font-weight: 700; text-decoration: none; transition: background .16s ease, transform .16s ease, border-color .16s ease; }
.button:hover { color: var(--on-brand); background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); }
.button-small { min-height: 38px; padding: .45rem .85rem; font-size: .88rem; }
.site-footer { padding: var(--s-6) 0; color: var(--ink-3); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; }
.footer-inner a { color: inherit; }

/* Page layout ------------------------------------------------------------ */
.page { padding-block: var(--s-6) var(--s-7); }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.page-head h1 { margin-bottom: 0; }
.lede { margin: var(--s-1) 0 0; color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.stack > * + * { margin-top: var(--s-6); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.section-head h2, .section-head h3 { margin-bottom: 0; }
.meta { margin: 0; color: var(--ink-3); font-size: var(--t-sm); }
.subnav { position: sticky; top: 0; z-index: 5; display: flex; gap: var(--s-1); overflow-x: auto; margin: 0 0 var(--s-5); padding: var(--s-2) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.subnav a { flex: none; padding: var(--s-1) var(--s-3); border-radius: 999px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.subnav a:hover { background: var(--surface); color: var(--green-ink); box-shadow: inset 0 0 0 1px var(--line-2); }
/* Selected view: the segmented control's filled state, so it reads at 3:1 against the bar (B-106). */
.subnav a[aria-current="true"], .subnav a[aria-current="page"] { background: var(--green); color: var(--on-brand); box-shadow: none; }
.print-head { display: none; }

/* Components ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-4); color: var(--on-brand); background: var(--green); border: 1px solid var(--green); border-radius: var(--radius-sm); font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.btn:hover { color: var(--on-brand); background: var(--green-ink); border-color: var(--green-ink); }
.btn-secondary { color: var(--ink); background: var(--surface); border-color: var(--line-2); }
.btn-secondary:hover { color: var(--ink); background: var(--paper); border-color: var(--ink-3); }
.segmented { display: inline-flex; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.segmented a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--s-3); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.segmented a + a { border-left: 1px solid var(--line); }
.segmented a[aria-current="true"] { color: var(--on-brand); background: var(--green); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.filter-field { display: grid; gap: var(--s-1); color: var(--ink-2); font-size: var(--t-sm); }
.filter-field input, .filter-field select { min-height: 36px; padding: 0 var(--s-3); color: var(--ink); background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius-sm); font-size: var(--t-base); }
.filter-field input:focus, .filter-field select:focus { border-color: var(--green); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-body { padding: var(--s-4) var(--s-5); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }
.kpi { padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.kpi .label { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kpi .value { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--t-xl); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .hint { display: block; color: var(--ink-3); font-size: var(--t-sm); }
.badge { display: inline-flex; align-items: center; gap: .35em; padding: .1em .55em; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.badge::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.badge-plain::before { display: none; }
.badge-good { color: var(--good); background: var(--good-bg); }
.badge-warn { color: var(--warn); background: var(--warn-bg); }
.badge-bad { color: var(--bad); background: var(--bad-bg); }
.badge-neutral { color: var(--neutral); background: var(--neutral-bg); }
.badge-info { color: var(--info); background: var(--info-bg); }
.delta { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-up { color: var(--good); }
.delta-down { color: var(--bad); }
.delta-flat, .delta-none { color: var(--ink-3); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 25px var(--shadow-color-soft); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th, .table td { padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table thead th { border-top: 0; color: var(--ink-3); background: var(--paper); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.table tbody th { font-weight: 600; }
.table tbody tr:hover { background: var(--row-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table .url { display: inline-block; max-width: 28ch; overflow: hidden; color: var(--ink-2); font-family: var(--mono); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.table .muted { color: var(--ink-3); }
.sticky-first th:first-child, .sticky-first td:first-child { position: sticky; left: 0; background: var(--surface); }
.sticky-first thead th:first-child { background: var(--paper); }
.row-link { display: block; color: inherit; font-weight: 600; }
.row-link:hover { color: var(--green-ink); }
.pos { display: inline-block; min-width: 2.2em; padding: .05em .4em; border-radius: 6px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.pos-top3 { color: var(--good); background: var(--good-bg); }
.pos-top10 { color: var(--green-ink); background: var(--mint); }
.pos-page2 { color: var(--neutral); background: var(--neutral-bg); }
.pos-none { color: var(--ink-3); }
.spark { display: block; width: 96px; height: 24px; }
.spark path { fill: none; stroke: var(--green); stroke-width: 1.5; }
.spark .fill { fill: var(--mint); stroke: none; }
/* Overview "Last 30 days": the same sparkline stretched across the card at a fixed height; the line keeps its weight and gap markers stay round. */
.brief-trend .spark { width: 100%; height: 120px; margin-top: var(--s-2); }
.brief-trend .spark path:not(.fill) { vector-effect: non-scaling-stroke; stroke-width: 2; }
.brief-trend .spark .gap { r: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-4); color: var(--ink-2); font-size: var(--t-xs); }
.legend i { display: inline-block; width: 14px; height: 0; margin-right: .4em; border-top: 2px solid var(--green); vertical-align: middle; }
.legend i.dash { border-top-style: dashed; border-color: var(--orange); }
.matrix td { text-align: center; }
.matrix thead th:not(:first-child) { text-align: center; }
.chip { display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 .3em; border-radius: 6px; font-size: var(--t-xs); font-weight: 800; }
.chip-good { color: var(--good); background: var(--good-bg); }
.chip-neutral { color: var(--neutral); background: var(--neutral-bg); }
.empty { padding: var(--s-6); color: var(--ink-2); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; }
.empty strong { display: block; margin-bottom: var(--s-1); color: var(--ink); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-sm); }
.gap-list { margin: 0; padding: 0; list-style: none; }
.gap-list li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.gap-list li:first-child { border-top: 0; }
.gap-list .why { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.gap-list .why strong { color: var(--ink); }
.gap-list .badges { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--s-1); }
/* End this client (app/views/admin/client-end.php): each step's status label sits in a column sized to its content
   beside the step's title, so it keeps to one line; at 760px and below it moves under the title. The shared .gap-list
   grid put the label in the stretching column: a bar across the card at 1920, one letter per line at 390. The label
   keeps accessibility.css's reflow (it may still wrap where even its own line does not fit). */
.end-steps li { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.end-steps li > .badge { justify-self: start; }
@media (max-width: 760px) {
    .end-steps li { grid-template-columns: minmax(0, 1fr); }
    .end-steps li > strong { order: 1; }
    .end-steps li > .badge { order: 2; }
    .end-steps li > .why { order: 3; }
}
.note { margin: 0; padding: var(--s-3) var(--s-4); color: var(--ink-2); background: var(--surface); border-left: 3px solid var(--orange); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--t-sm); }
.fact-list { display: grid; grid-template-columns: fit-content(35%) minmax(0, 1fr); gap: var(--s-1) var(--s-4); margin: 0; font-size: var(--t-sm); }
.fact-list dt { min-width: 0; overflow-wrap: anywhere; color: var(--ink-3); }
.fact-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.fact-line { margin: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--t-sm); }

/* Brand pages: shared contract for the staff and client brand surface ---- */
.brand-page { min-width: 0; }
.brand-page section[id] { scroll-margin-top: 76px; }
.brand-brief { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.brand-brief-copy { min-width: 0; flex: 1 1 240px; }
.brand-overview-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); }
.brand-overview-kpis .kpi { padding: var(--s-3) var(--s-4); }
.brand-sections { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-5); padding: var(--s-2) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand-sections a { flex: none; padding: var(--s-1) var(--s-3); border-radius: 999px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand-sections a:hover, .brand-sections a[aria-current="true"] { background: var(--surface); color: var(--green-ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.brand-disclosure { min-width: 0; margin-top: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.brand-disclosure > summary { min-height: 44px; padding: var(--s-2) var(--s-3); color: var(--ink); font-size: var(--t-sm); font-weight: 700; cursor: pointer; touch-action: manipulation; border-radius: var(--radius-sm); }
.brand-disclosure > summary::marker { color: var(--green); }
.brand-disclosure > summary::-webkit-details-marker { color: var(--green); }
.brand-disclosure > summary:hover { color: var(--green-ink); }
.brand-disclosure[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.brand-disclosure-body { min-width: 0; overflow-x: auto; padding: var(--s-3); }
.brand-disclosure-body > :first-child { margin-top: 0; }
.brand-disclosure-body > :last-child { margin-bottom: 0; }
.brand-feed-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.brand-empty, .brand-page .empty { padding: var(--s-3) var(--s-4); color: var(--ink-2); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius-sm); font-size: var(--t-sm); text-align: left; }
.brand-empty strong, .brand-page .empty strong { display: block; margin-bottom: var(--s-1); color: var(--ink); font-size: var(--t-base); }
.brand-empty { margin: 0; }

/* Portfolio and evidence boards ----------------------------------------- */
.portfolio-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.portfolio-kpis .kpi { padding: var(--s-3) var(--s-4); }
.portfolio-summary-scope { margin-top: var(--s-2); }
/* /rank attention presets: the same chip treatment as the brand page's quick filters. */
.rank-attention-presets { display: flex; flex-wrap: wrap; gap: 7px; margin: var(--s-2) 0; }
.rank-attention-presets a { display: inline-flex; align-items: center; gap: .35em; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; text-decoration: none; }
.rank-attention-presets a:hover { border-color: var(--mint-strong); color: var(--green-ink); }
.rank-attention-presets a[aria-current="true"] { border-color: var(--green); background: var(--mint); color: var(--green-ink); }
@media (max-width: 760px) {
    .rank-attention-presets a { min-height: 44px; }
}
.portfolio-heading { margin-top: var(--s-5); align-items: start; }
.portfolio-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); width: min(100%, 400px); }
.portfolio-search input { width: 100%; min-width: 0; }
.portfolio-sort { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--t-sm); }
.portfolio-sort summary { width: fit-content; padding-block: var(--s-1); cursor: pointer; }
.portfolio-sort .actions { padding-top: var(--s-2); }
.portfolio-sort .filter-field { flex: 1; }
.portfolio-key { margin-bottom: var(--s-3); }
.portfolio .cell-movement { min-width: 108px; }
.portfolio .cell-movement .delta { display: block; font-size: var(--t-xs); }
.portfolio .cell-name { min-width: 190px; }
.portfolio .row-link { padding-block: var(--s-1); }
.portfolio-domain { display: block; font-weight: 400; }
.portfolio td, .portfolio th { vertical-align: middle; }
.portfolio .cell-checked { white-space: nowrap; }
.portfolio .cell-trend { min-width: 112px; }
.portfolio .cell-targets { min-width: 152px; font-size: var(--t-sm); }
/* Staff attention panel: compact per-brand source states beside work buckets. */
.attention-panel { margin: 0 0 var(--s-5); }
.attention-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.attention-list > li { grid-template-columns: 1fr; }
.attention-sources { margin-top: var(--s-1); }
.attention-sources > summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-size: var(--t-sm); color: var(--ink-2); }
.attention-sources > summary .badge { margin-inline-start: .25em; }
.attention-source { display: block; margin-top: var(--s-1); }
/* /today feed line in warning tone (R17): app/views/today.php emits feed-<tone>. */
.feed-warn::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-inline-end: .4em; border-radius: 999px; background: var(--warn); vertical-align: .05em; }
.feed-warn + .meta { color: var(--ink-2); overflow-wrap: anywhere; }
@media (min-width: 900px) { .attention-list > li { grid-template-columns: 1fr auto; } .attention-list .why { grid-column: 1; } }
.cell-targets span, .cell-targets a, .ranking-target .url { display: block; }
/* Both lines are one phrase each; wrapping mid-phrase made the column unreadable. */
.portfolio .cell-targets span, .portfolio .cell-targets a { white-space: nowrap; }
.cell-targets a { padding-block: var(--s-2); }
.target-review-link { color: var(--warn); font-weight: 700; }
.ranking-scope { margin-bottom: var(--s-3); }
.brand-actions > summary, .brand-section-menu > summary { min-height: 36px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
.brand-breadcrumb { margin: 0 0 var(--s-1); font-size: var(--t-sm); font-weight: 600; }
.brand-breadcrumb a { color: var(--ink-2); text-decoration: none; }
.brand-breadcrumb a:hover { color: var(--green-ink); text-decoration: underline; }
.brand-toolbar { flex-wrap: nowrap; }
details.brand-actions, details.brand-actions[open] { position: relative; flex: none; }
details.brand-actions > summary { list-style: none; justify-content: space-between; }
details.brand-actions > summary::-webkit-details-marker { display: none; }
details.brand-actions > summary::marker { content: ""; }
.brand-actions-chevron { flex: none; color: var(--ink-3); }
details.brand-actions[open] .brand-actions-chevron { transform: rotate(180deg); }
details.brand-actions > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.brand-actions-panel a { white-space: nowrap; }
@media (max-width: 480px) {
    .brand-toolbar { flex-wrap: wrap; }
    .brand-toolbar > .segmented { flex: 1 1 100%; }
    .brand-toolbar > .segmented a { flex: 1; justify-content: center; }
    details.brand-actions, details.brand-actions[open] { flex: 1 1 100%; }
    details.brand-actions > summary { width: 100%; }
    .brand-actions-panel { left: 0; right: 0; min-width: 0; }
}
.brand-section-menu[open] { flex-basis: 100%; }
.brand-sections:has(.brand-section-menu[open]) { position: static; }
.brand-section-menu > div { display: flex; flex-wrap: wrap; gap: var(--s-1); padding-top: var(--s-2); }
.brand-movement-note { font-size: var(--t-sm); color: var(--ink-2); }
.brand-movement-note > summary { width: fit-content; min-height: 36px; padding-block: var(--s-2); cursor: pointer; }
.filter-field { min-width: 0; max-width: 100%; }
.filter-field select { max-width: 100%; }
.filter-grow { flex: 1; }
.audit-totals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-sm); }
.audit-execution-kpis .value { display: block; overflow-wrap: anywhere; }
.audit-execution-kpis .value-summary { font-size: var(--t-md); }
.audit-table th:first-child { min-width: 220px; max-width: 290px; }
.audit-table td:nth-child(4) { min-width: 220px; }
/* The inventory row's identity is its URL, so it wraps in full instead of
   running into the brand name and its exclusion label on one clipped line. */
.ca-inventory-table th[scope="row"] > * { display: block; }
.ca-inventory-table th[scope="row"] .url { max-width: none; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.audit-detail summary, .evidence-summary summary { cursor: pointer; font-weight: 600; }
.audit-detail .fact-list { grid-template-columns: 1fr; font-weight: 400; }
.audit-detail dd { overflow-wrap: anywhere; }
.evidence-summary pre { max-height: 28rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); }

/* Site audit: three questions and the details */
.site-audit, #audit-issues, #audit-progress, #crawl-details, .sa-issue { scroll-margin-top: 76px; }
.sa { display: grid; gap: 28px; }
.sa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.sa-head h2 { margin: 0; }
.sa-fresh { margin: 0; font-size: 14px; color: var(--ink-2); }
.sa-banner { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--warn); background: var(--surface); }
.sa-banner::before { content: ""; grid-row: span 2; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--warn); }
.sa-banner p { margin: 0; }
.sa-banner-title { font-weight: 650; color: var(--ink); }
.sa-banner-body { font-size: 14px; color: var(--ink-2); }
.sa-step { display: grid; gap: 14px; min-width: 0; }
.sa-step-head { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; }
.sa-step-num { grid-row: span 2; font: 600 12px/1 var(--mono); color: var(--kicker-num); letter-spacing: .04em; }
.sa-step-head h3 { margin: 0; font-size: 20px; }
.sa-step-head p { margin: 0; font-size: 14px; color: var(--muted); }
.sa-summary { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--ink-2); }
.sa-summary strong { font-size: 22px; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
/* Issue register: one disclosure per issue; a grid, never a scroll box. */
.sa-register { display: grid; gap: 8px; }
.sa-issue { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sa-issue > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 92px minmax(0, 1fr) 120px 150px 18px; gap: 12px; align-items: center; padding: 12px 16px; }
.sa-issue > summary::-webkit-details-marker { display: none; }
.sa-issue > summary::after { content: "⌄"; color: var(--muted); justify-self: end; }
.sa-issue[open] > summary::after { content: "⌃"; }
.sa-issue[open] > summary { border-bottom: 1px solid var(--line); }
.sa-issue-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sa-count { font-variant-numeric: tabular-nums; text-align: right; }
.sa-count strong { font-size: 18px; color: var(--ink); }
.sa-count span { display: block; font-size: 12px; color: var(--muted); }
.sa-change { font-size: 13px; color: var(--ink-2); text-align: right; }
.sa-change .is-up { color: var(--bad); font-weight: 600; }
.sa-change .is-down { color: var(--good); font-weight: 600; }
.sa-issue-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; padding: 16px; }
.sa-issue-body h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sa-issue-body p { margin: 0; font-size: 14px; color: var(--ink-2); }
.sa-urls { grid-column: 1 / -1; min-width: 0; }
.sa-urls ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sa-urls li { font: 13px/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.sa-urls .sa-more { margin-top: 6px; font-size: 13px; color: var(--green); }
.sa-urls .audit-pagination { margin-top: 10px; }
/* Staff "Show all" list: per-URL HTTP status and a New / Came back badge. */
.sa-urls .sa-url-status { margin-left: 6px; color: var(--muted); font: 12px/1.5 var(--font); font-variant-numeric: tabular-nums; }
.sa-urls .badge { margin-left: 6px; vertical-align: 1px; font-family: var(--font); }
.sa-prio { display: inline-block; justify-self: start; padding: 2px 9px; border-radius: 999px; font: 600 12px/1.6 var(--font); border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface-2); }
.sa-prio.is-high { border-color: var(--bad); color: var(--bad); background: var(--surface); }
.sa-passed { margin: 0; font-size: 14px; color: var(--muted); }
.sa-passed strong { color: var(--ink-2); }
/* Did it work */
.sa-progress { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 16px; }
.sa-chart, .sa-cleared { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; }
.sa-chart h4, .sa-cleared h4 { margin: 0 0 4px; font-size: 15px; }
.sa-chart .meta, .sa-cleared .meta { margin: 0 0 10px; }
/* Staff fixed / new / not rechecked line under the net sentence. */
.sa-chart .sa-net-split { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sa-chart svg { display: block; width: 100%; height: auto; }
.sa-chart .ax { stroke: var(--line); stroke-width: 1; }
.sa-chart .ax-label { fill: var(--muted); font: 11px var(--font); }
.sa-chart .ln-total { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; }
.sa-chart .pt-total { fill: var(--green); }
.sa-chart .pt-label { fill: var(--ink); font: 600 12px var(--font); }
.sa-chart .pt-partial { fill: var(--surface); stroke: var(--warn); stroke-width: 2; }
.sa-chart .is-narrow { display: none; }
.sa-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.sa-legend li::before { content: ""; display: inline-block; width: 14px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 3px solid var(--green); }
.sa-legend .is-partial::before { width: 9px; height: 9px; border: 2px solid var(--warn); border-radius: 50%; }
.sa-big { font-size: 34px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.sa-cleared dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0 0; font-size: 14px; }
.sa-cleared dt { color: var(--ink-2); }
.sa-cleared dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sa-empty { padding: 22px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--surface); }
.sa-empty strong { display: block; margin-bottom: 4px; color: var(--ink); }
.sa-empty p { margin: 0; font-size: 14px; color: var(--ink-2); }
/* Crawl details: one collapsed region */
.sa-details { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sa-details > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--ink); }
.sa-details > summary span { font-weight: 400; color: var(--muted); margin-left: 8px; }
.sa-details-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; padding: 4px 16px 18px; border-top: 1px solid var(--line); }
.sa-details-body > div { min-width: 0; }
.sa-details-body h4 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sa-details-body dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.sa-details-body dt { color: var(--muted); }
.sa-details-body dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sa-history { grid-column: 1 / -1; }
.table-wrap > .sa-history-table { min-width: 560px; }
/* Check-scoped caption under the Recent crawls heading. */
.sa-history .meta { margin: 0 0 6px; }
/* Phones: each recent crawl is a stacked card, every value labelled from its
   data-label; nothing hidden, no sideways scroll. */
@media (max-width: 480px) {
    .table-wrap > .table.sa-history-table { min-width: 0; }
    .sa-history-table, .sa-history-table tbody { display: block; }
    .sa-history-table thead { display: none; }
    .sa-history-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
    .sa-history-table tbody tr:first-child { border-top: 0; }
    .sa-history-table th, .sa-history-table td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere; }
    .sa-history-table th[data-label="Date"] { font-weight: 700; }
    .table-wrap > .table.sa-history-table .num { text-align: left; }
    .sa-history-table [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
}
@media (max-width: 760px) {
    .sa-issue > summary { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 6px 10px; }
    .sa-issue > summary .sa-prio { grid-column: 1 / -1; }
    .sa-issue > summary .sa-change { grid-column: 1 / 3; text-align: left; }
    .sa-issue-body { grid-template-columns: 1fr; }
    .sa-progress { grid-template-columns: 1fr; }
    .sa-chart .is-wide { display: none; }
    .sa-chart .is-narrow { display: block; }
    .sa-details-body { grid-template-columns: minmax(0, 1fr); }
}

/* Site audit Overview: the default Site Audit view. Plain
   counts, one zero-based line per priority, fixed/new bars, top issues and
   cards. Wide/narrow SVGs switch like .sa-chart. */
#audit-overview, #audit-trend, #audit-top-issues, #audit-coverage-summary, #audit-performance-summary { scroll-margin-top: 76px; }
.sa-views { margin: 0; }
.sa-overview { display: grid; gap: 22px; min-width: 0; }
/* Wide screens: the trend takes two thirds beside the top issues (like
   .sa-progress), so its fixed-size SVG text is not scaled up across the page. */
@media (min-width: 1100px) {
    .sa-overview { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
    .sa-overview > * { grid-column: 1 / -1; }
    .sa-overview > .sa-ov-trend { grid-column: 1; }
    .sa-overview > .sa-ov-issues { grid-column: 2; }
}
.sa-ov-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Clients get three tiles (no high-priority tile): three equal columns, not a gap. */
@media (min-width: 641px) { .sa-ov-tiles:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sa-ov-tile { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 14px; color: var(--ink-2); }
.sa-ov-tile strong { display: block; font-size: 26px; font-weight: 650; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.sa-ov-change { margin: 0; font-size: 15px; color: var(--ink); }
.sa-ov-trend, .sa-ov-issues { display: grid; gap: 12px; min-width: 0; }
.sa-ov-head h3 { margin: 0; font-size: 20px; }
.sa-ov-head p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.sa-ov-chart { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; }
.sa-ov-chart svg { display: block; width: 100%; height: auto; }
.sa-ov-chart .is-narrow { display: none; }
.sa-ov-chart .ax { stroke: var(--line); stroke-width: 1; }
.sa-ov-chart .ax-label { fill: var(--muted); font: 11px var(--font); }
.sa-ov-chart .ov-row-label { fill: var(--ink-2); font: 600 12px var(--font); }
.sa-ov-chart .ov-none { fill: var(--muted); font: 12px var(--font); }
.sa-ov-chart .pt-label { fill: var(--ink); font: 600 12px var(--font); }
.sa-ov-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; }
.sa-ov-row[data-priority="high"] .ln { stroke: var(--bad); }
.sa-ov-row[data-priority="high"] .pt { fill: var(--bad); }
.sa-ov-row[data-priority="medium"] .ln { stroke: var(--orange); }
.sa-ov-row[data-priority="medium"] .pt { fill: var(--orange); }
.sa-ov-row[data-priority="low"] .ln { stroke: var(--blue); }
.sa-ov-row[data-priority="low"] .pt { fill: var(--blue); }
.sa-ov-row[data-priority="info"] .ln { stroke: var(--neutral); }
.sa-ov-row[data-priority="info"] .pt { fill: var(--neutral); }
.sa-ov-chart .sa-ov-fixed { fill: var(--good); }
.sa-ov-chart .sa-ov-new { fill: var(--warn); }
.sa-ov-chart .sa-ov-gap { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 4 3; }
.sa-ov-chart .ov-gap-label { fill: var(--muted); font: 11px var(--font); }
.sa-ov-chart .sa-ov-series-mark { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.sa-ov-chart .ov-series-label { fill: var(--ink-3); font: 11px var(--font); }
.sa-ov-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.sa-ov-legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.sa-ov-legend .is-fixed::before { background: var(--good); }
.sa-ov-legend .is-new::before { background: var(--warn); }
.sa-ov-numbers summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sa-ov-numbers .table-wrap { margin-top: 8px; }
.sa-ov-numbers td { text-align: right; font-variant-numeric: tabular-nums; }
.sa-ov-note, .sa-ov-series, .sa-ov-caveat, p.sa-ov-gap { margin: 0; font-size: 13px; color: var(--ink-2); }
.sa-ov-note::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: middle; border: 2px solid var(--warn); border-radius: 50%; }
.sa-ov-issues ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Compact rows by default: the list sits in the side column on wide screens
   and full width only between 761px and 1099px, where it gets four columns. */
.sa-ov-issues li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; }
.sa-ov-issues li a .sa-prio { grid-column: 1 / -1; justify-self: start; }
.sa-ov-issues li a .sa-change { grid-column: 1 / -1; text-align: left; }
@media (min-width: 761px) and (max-width: 1099px) {
    .sa-ov-issues li a { grid-template-columns: 92px minmax(0, 1fr) 120px 150px; gap: 12px; }
    .sa-ov-issues li a .sa-prio, .sa-ov-issues li a .sa-change { grid-column: auto; }
    .sa-ov-issues li a .sa-change { text-align: right; }
}
.sa-ov-issues li a:hover, .sa-ov-issues li a:focus-visible { border-color: var(--line-2); }
.sa-ov-issues li a:hover .sa-issue-name { text-decoration: underline; }
.sa-ov-more { margin: 0; font-size: 14px; }
.sa-ov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Staff with Work off have two cards (no "What to fix first"). */
.sa-ov-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-ov-card { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sa-ov-card h3 { margin: 0 0 4px; font-size: 15px; }
.sa-ov-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
.sa-ov-card strong { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sa-ov-card .no-print { margin-top: 6px; }
@media (max-width: 760px) {
    .sa-ov-cards { grid-template-columns: minmax(0, 1fr); }
    .sa-ov-cards.is-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .sa-ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sa-ov-chart .is-wide { display: none; }
    .sa-ov-chart .is-narrow { display: block; }
}
@media print {
    .sa-ov-chart .is-wide { display: block; }
    .sa-ov-chart .is-narrow { display: none; }
    .sa-ov-numbers::details-content { display: block; content-visibility: visible; }
    .sa-ov-tile, .sa-ov-chart, .sa-ov-card, .sa-ov-issues li a { box-shadow: none; border-color: var(--print-line); break-inside: avoid; }
}
/* Site Audit portfolio board (/evidence/site-audit) and brand Overview card */
.sa-pf-summary { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
.sa-pf-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.sa-pf-last { margin: 0; font-size: 14px; color: var(--ink-2); }
.sa-pf-state { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 12px/1.6 var(--font); background: var(--good-bg); color: var(--good); }
.sa-pf-state.is-partial { background: var(--warn-bg); color: var(--warn); }
.sa-pf-state.is-late { background: var(--bad-bg); color: var(--bad); }
.sa-pf-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 14px; color: var(--ink-2); }
.sa-pf-facts strong { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sa-pf-change { margin: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sa-pf-empty { margin: 0; font-size: 14px; color: var(--ink-2); }
.sa-pf-empty strong { display: block; color: var(--ink); }
.sa-pf-spark { display: block; width: 120px; height: 28px; }
.sa-pf-spark .sa-pf-line { fill: none; stroke: var(--bad); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sa-pf-spark .sa-pf-dot { fill: var(--bad); }
.sa-pf-spark.is-neutral .sa-pf-line { stroke: var(--muted); }
.sa-pf-spark.is-neutral .sa-pf-dot { fill: var(--muted); }
.sa-pf-trend { display: grid; gap: 2px; }
.sa-pf-trend-caption { margin: 0; font-size: 12px; color: var(--muted); }
.sa-pf-card { display: grid; gap: 6px; align-self: stretch; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.sa-pf-card p { margin: 0; }
.sa-pf-card h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* Site Audit board order: filter chips, attention groups and the one "why it sits here" line. */
.sa-pf-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-5); }
.sa-pf-chips a { flex: none; padding: var(--s-1) var(--s-3); border-radius: 999px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-2); }
.sa-pf-chips a:hover { background: var(--surface); color: var(--green-ink); }
.sa-pf-chips a[aria-current="page"] { background: var(--green); color: var(--on-brand); box-shadow: none; }
.sa-pf-count { font-variant-numeric: tabular-nums; opacity: .8; }
.sa-pf-group + .sa-pf-group { margin-top: var(--s-6); }
.sa-pf-group-title { margin: 0 0 var(--s-3); color: var(--muted); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sa-pf-why { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.sa-board .workspace-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (max-width: 420px) {
    .sa-pf-trend { align-self: stretch; }
    .sa-pf-spark { width: 100%; }
}
/* Site Audit board only (.sa-board): search and Apply on one row, summary
   strip as a 2×2 grid, so the first card starts higher on phones. */
@media (max-width: 480px) {
    .sa-board .filter-bar { flex-wrap: nowrap; }
    .sa-board .filter-bar .filter-field { flex: 1 1 0; min-width: 0; }
    .sa-board .filter-bar .btn { flex: none; }
    .sa-board .sa-pf-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
}

/* Site audit issue explorer --------------------------------------------- */
.audit-subject { margin: var(--s-2) 0 var(--s-3); color: var(--ink-2); font: var(--t-xs)/1.65 var(--mono); overflow-wrap: anywhere; }
.audit-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); }
@media (max-width: 560px) {
    .site-audit > .kpis .kpi:last-child { grid-column: 1 / -1; }
}

/* Site Audit crawl (/evidence/site-audit/crawl): the daily crawl list and its confirm pages. */
.crawl-list .site-name { display: block; color: var(--ink); font-weight: 650; }
.crawl-list .site-domain { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.crawl-list .cell-note { display: block; margin-top: var(--s-1); color: var(--ink-3); font-size: var(--t-xs); white-space: normal; }
.crawl-list .cell-url .mono { font-size: var(--t-xs); overflow-wrap: anywhere; }
.crawl-list .cell-action { text-align: right; white-space: nowrap; }
.crawl-list .cell-action .cell-note { max-width: 18ch; margin-left: auto; text-align: right; }
.crawl-list .btn { min-height: 32px; }
.crawl-archived-body { padding: 0 var(--s-4) var(--s-4); border-top: 1px solid var(--line); }
.crawl-archived-body .table-wrap { margin-top: var(--s-3); }
.crawl-confirm { max-width: 760px; }

/* Phone: one card per website, every value labelled, nothing scrolls sideways (the Site Audit history pattern). */
@media (max-width: 600px) {
    .table-wrap > .table.crawl-list { min-width: 0; }
    .crawl-list thead { display: none; }
    .crawl-list tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
    .crawl-list tbody tr:first-child { border-top: 0; }
    .crawl-list th, .crawl-list td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .crawl-list [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .crawl-list .cell-site, .crawl-list .cell-url, .crawl-list .cell-action { grid-column: 1 / -1; }
    .crawl-list .cell-action { text-align: left; white-space: normal; }
    .crawl-list .cell-action .cell-note { max-width: none; margin-left: 0; text-align: left; }
    .crawl-list .cell-action .btn { width: 100%; justify-content: center; min-height: 44px; }
    /* The change log reads as one card per change too, instead of scrolling sideways. */
    .table-wrap > .table.crawl-log { min-width: 0; }
    .crawl-log thead { display: none; }
    .crawl-log tr { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
    .crawl-log tbody tr:first-child { border-top: 0; }
    .crawl-log th, .crawl-log td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .crawl-log.table th:first-child { position: static; }
    .crawl-log [data-label]::before { content: attr(data-label) " "; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
}

/* Client brand list and filter options ------------------------------------ */
.client-portfolio-actions { margin: var(--s-3) 0 0; }
details.work-filter-options { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2) var(--s-3); }
details.work-filter-options > summary { display: inline-flex; align-items: center; gap: .5em; min-height: 36px; padding: 0 var(--s-3); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
details.work-filter-options > summary::-webkit-details-marker { display: none; }
details.work-filter-options > summary::after { content: ""; flex: none; width: .4em; height: .4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.work-filter-options[open] > summary { color: var(--green-ink); border-color: var(--green); }
.work-filter-options[open] > summary::after { transform: rotate(225deg); }
.work-filter-options-body { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2) var(--s-3); }
/* Staff score board: a quartet stays together; unavailable is never drawn as zero. */
.score-board .subnav { position: static; margin-bottom: var(--s-2); }
.score-overview { border-bottom: 1px solid var(--line); padding-bottom: var(--s-3); }
.score-overview > summary { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; min-height: 44px; color: var(--ink-2); font-size: var(--t-sm); cursor: pointer; }
.score-overview > summary::-webkit-details-marker { display: none; }
.score-summary-hint { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.score-explanation { max-width: 78ch; padding-top: var(--s-3); }
.score-explanation p + p { margin-top: var(--s-2); }
.score-filters { margin-top: var(--s-4); gap: var(--s-3); }
.score-filters .filter-field { min-width: 0; }
.score-filters input, .score-filters select { max-width: 100%; min-height: 44px; }
.score-filters .work-filter-options > summary { min-height: 44px; }
.score-filters .work-filter-options-body { padding-top: var(--s-2); }
.score-results-head { margin: var(--s-4) 0 var(--s-3); }
.score-list { display: grid; gap: var(--s-2); }
.score-row { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.score-row > summary { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(390px, 1.4fr) minmax(155px, .6fr) 62px; gap: var(--s-4); align-items: center; padding: var(--s-2) var(--s-4); min-height: 104px; cursor: pointer; list-style: none; }
.score-row > summary::-webkit-details-marker { display: none; }
.score-row > summary:hover { background: var(--green-soft); }
.score-row > summary:focus-visible, .score-overview > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.score-subject, .score-status { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.score-subject > strong { line-height: 1.25; overflow-wrap: anywhere; }
.score-url { color: var(--ink-3); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-status .badge { align-self: flex-start; white-space: normal; }
.score-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; gap: var(--s-2); align-items: stretch; }
.score-value { display: flex; flex-direction: column; justify-content: flex-start; text-align: center; padding: var(--s-1) 2px; min-width: 0; }
.score-label, .score-value dt { font-size: var(--t-xs); line-height: 1.2; min-height: 2.4em; color: var(--ink-2); }
.score-value strong, .score-value dd { margin: 0; font-size: 2rem; line-height: 1.15; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.score-value-target strong, .score-value-target dd { color: var(--green-ink); }
.score-value-potential { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--paper); }
.score-qualifier { font-size: .6875rem; line-height: 1.3; color: var(--ink-3); margin-top: 2px; }
.score-toggle { display: flex; gap: var(--s-1); align-items: center; justify-content: center; min-height: 44px; font-size: var(--t-sm); font-weight: 600; color: var(--green-ink); }
.score-toggle > span:last-child { transition: transform .15s; }
.score-row[open] .score-toggle > span:last-child { transform: rotate(180deg); }
.score-detail { padding: var(--s-4); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.score-full-url { margin-bottom: var(--s-4); }
.score-detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-5); }
.score-detail-grid > section { min-width: 0; }
.score-detail .note { margin-bottom: var(--s-4); }
.score-detail details > summary, .score-selection details > summary { min-height: 44px; cursor: pointer; padding-block: var(--s-3); }
.score-history-list { display: grid; gap: var(--s-2); padding-left: var(--s-4); }
.score-history-list li > a { margin-right: var(--s-3); }
.score-selected-values { max-width: 36rem; margin-block: var(--s-4); }
@media (max-width: 1250px) {
    .score-row > summary { grid-template-columns: minmax(150px, 1fr) minmax(320px, 1.4fr) 62px; gap: var(--s-3); }
    .score-status { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
    .score-toggle { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
    .score-board .page-head .lede { font-size: var(--t-sm); }
    .score-filters > .filter-field { flex: 1 1 42%; }
    .score-filters > .filter-grow { flex-basis: 100%; }
    .score-filters > .filter-field select { width: 100%; }
    .score-row > summary { grid-template-columns: minmax(0, 1fr) 62px; gap: var(--s-2); padding: var(--s-3); }
    .score-subject { grid-column: 1; }
    .score-values { grid-column: 1 / -1; grid-row: 2; }
    .score-value strong, .score-value dd { font-size: 1.75rem; }
    .score-toggle { grid-column: 2; grid-row: 1; }
    .score-status { grid-row: 3; }
    .score-detail { padding: var(--s-3); }
    .score-detail-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
    .score-summary-hint { margin-left: 0; }
}
@media (max-width: 22.4375em) {
    .score-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
    .score-row { break-inside: avoid; }
    .score-row > summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
    .score-toggle { display: none; }
    .score-status { grid-column: 1 / -1; }
}
/* SEO → Content Overview, one brand: answer, slim score strip, one ranked comparison table.
   No inner scroller: at 1150px and below Status and Saved move into Details; at 760px and below each row stacks. */
.workspace-main > .container.cov-page { max-width: 1280px; }
.cov-answer { max-width: 70ch; font-size: var(--t-md); color: var(--ink); }
.cov-answer strong { font-weight: 800; }
.cs-strip { margin-top: var(--s-4); }
.cs-strip-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-2); }
.cs-strip-title h2 { margin: 0; font-size: var(--t-base); }
.cs-strip-title .meta { margin: 0; }
.cs-strip-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.cs-strip-kpis .kpi { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label label" "value hint"; align-items: baseline; column-gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); }
.cs-strip-kpis .kpi .label { grid-area: label; }
.cs-strip-kpis .kpi .value { grid-area: value; margin: 0; font-size: var(--t-lg); }
.cs-strip-kpis .kpi .hint { grid-area: hint; font-size: var(--t-xs); }
.cov-compare { margin-top: var(--s-5); }
.cov-compare-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-2); }
.cov-compare-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; }
.cov-compare-head .meta { margin: var(--s-1) 0 0; }
.cov-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2); }
.cov-field { display: grid; gap: var(--s-1); color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; }
.cov-field input, .cov-field select { min-height: 36px; padding: 0 var(--s-3); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 400; background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius-sm); }
.cov-field-grow input { width: 16rem; }
.cov-filters .btn { min-height: 36px; }
.cov-about { margin-bottom: var(--s-3); }
.cov-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 25px var(--shadow-color-soft); }
.cov-table { table-layout: fixed; }
.cov-col-num { width: 8.5rem; }
.cov-col-gap { width: 9.5rem; }
.cov-col-saved { width: 7rem; }
.cov-table th, .cov-table td { padding: var(--s-2) var(--s-3); vertical-align: baseline; }
.cov-table thead th { padding-block: var(--s-3) var(--s-2); }
.cov-table thead th:first-child, .cov-table tbody th { padding-left: var(--s-4); }
.cov-table tbody th { font-weight: 400; }
.cov-table td strong { font-size: var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.cov-you strong { color: var(--green-ink); }
.cov-avg strong, .cov-best strong, .cov-potential strong { font-weight: 600; color: var(--ink-2); }
.cov-gap span, .cov-potential span { color: var(--ink-3); font-size: var(--t-xs); }
.cov-gap.cov-behind strong, .cov-gap.cov-behind span { color: var(--warn); }
.cov-gap.cov-ahead strong { color: var(--good); }
.cov-table .cov-saved { color: var(--ink-3); font-size: var(--t-xs); white-space: nowrap; }
/* Page cell: keyword, short path and a native Details disclosure on one line;
   the summary sits in reserved space at the right and the opened body flows below. */
.cov-subject { position: relative; min-width: 0; padding-right: 5rem; }
.cov-kw { margin-right: var(--s-3); font-weight: 700; color: var(--ink); }
.cov-path { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; color: var(--ink-3); font-family: var(--mono); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.cov-more { margin-right: -5rem; }
.cov-more > summary { position: absolute; top: 0; right: 0; color: var(--green-ink); font-size: var(--t-xs); font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; }
.cov-more > summary::-webkit-details-marker { display: none; }
.cov-more > summary::after { content: " ⌄"; }
.cov-more[open] > summary::after { content: " ⌃"; }
.cov-more > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: var(--radius-sm); }
.cov-more-body { display: grid; gap: var(--s-2); max-width: 72ch; margin-top: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--t-sm); }
.cov-more-body p { margin: 0; }
.cov-more-body .score-full-url { overflow-wrap: anywhere; }
.cov-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-2) var(--s-4); margin: 0; }
.cov-facts dt { color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; }
.cov-facts dd { margin: 0; }
.cov-foot { margin-top: var(--s-2); }
.cov-ops > summary .meta { font-weight: 400; }
@media (max-width: 1150px) {
    .cov-col-saved { width: 0; }
    .cov-table .cov-saved { display: none; }
}
/* Two-line rows also while the 264px rail is shown and the main column is too narrow for the
   fixed number columns (about 1120px wide and below, down to the 800px rail breakpoint). */
@media (max-width: 760px), (min-width: 801px) and (max-width: 1120px) {
    .cs-strip-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-strip-kpis .kpi .hint { display: none; }
    .cs-strip-title .meta { font-size: var(--t-xs); }
    .cov-filters { width: 100%; }
    .cov-field-grow { flex: 1 1 10rem; }
    .cov-field-grow input { width: 100%; }
    .cov-field select { max-width: 11rem; }
    .cov-table, .cov-table tbody { display: block; }
    .cov-table colgroup, .cov-table thead { display: none; }
    .cov-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
    .cov-table tbody tr:first-child { border-top: 0; }
    .cov-table th, .cov-table td { padding: 0; border: 0; }
    .cov-table tbody th { flex: 1 0 100%; padding: 0; }
    .cov-path { display: none; }
    .cov-more[open] .cov-more-body { margin-bottom: var(--s-1); }
    .cov-table .cov-best { display: none; }
    .cov-you, .cov-avg { color: var(--ink-3); font-size: var(--t-sm); }
    .cov-avg::before { content: "vs "; }
    .cov-avg::after { content: " avg"; }
    .cov-gap { margin-left: auto; }
}
@media print {
    .cov-table-wrap { box-shadow: none; }
    .cov-table tr { break-inside: avoid; }
}
/* Staff scored coverage: keep wide comparisons inside their own scroller. */
#content-coverage { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#content-coverage .table-wrap { max-width: 100%; }
#content-coverage .coverage-matrix th, #content-coverage .coverage-matrix td { min-width: 10rem; white-space: normal; }
#content-coverage .coverage-matrix td:nth-child(2), #content-coverage .coverage-matrix td:nth-child(3) { min-width: 14rem; }
#content-coverage .coverage-matrix th:nth-child(4), #content-coverage .coverage-matrix td:nth-child(4) { min-width: 4rem; white-space: nowrap; }
#content-coverage .coverage-rating { width: 15rem; max-width: 100%; text-align: left; }
#content-coverage .coverage-rating summary { padding-block: var(--s-2); }
#content-coverage .coverage-rating a { text-decoration: underline; }
#content-coverage .coverage-quote { margin: 0 0 var(--s-3); }
#content-coverage .coverage-quote blockquote { margin: var(--s-1) 0 0; padding-left: var(--s-3); border-left: 2px solid var(--line-2); }
#content-coverage .coverage-quote p { margin-bottom: 0; }
@media (max-width: 600px) {
    #content-coverage .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #content-coverage .kpi { min-width: 0; padding: var(--s-3); }
    #content-coverage .card-body { padding: var(--s-3); }
    #content-coverage .coverage-rating summary { min-height: 44px; }
}

[data-ca-events] { overflow-wrap: anywhere; }
/* Responsive ------------------------------------------------------------- */
@media (max-width: 760px) {
    h1 { font-size: var(--t-xl); }
    .legend { flex-direction: column; gap: var(--s-1); }
    .table-wrap > .table { min-width: 600px; }
    /* Feed health's twelve-column brand table: at 600px every column shrinks to
       its narrowest and rows grow to 200px+; keep desktop widths and scroll. */
    .table-wrap > .feed-health-coverage { min-width: 96rem; }
    .table .url { max-width: 22ch; }
    .portfolio thead { display: none; }
    .portfolio tr { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
    .portfolio td, .portfolio th { display: block; padding: 0; border: 0; }
    .portfolio td[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
    .portfolio .cell-name, .portfolio .cell-targets { grid-column: 1 / -1; }
    .portfolio-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-kpis .kpi { padding: var(--s-2); }
    .portfolio-kpis .value { font-size: var(--t-lg); }
    .portfolio-tools { width: 100%; }
    .portfolio .cell-movement { grid-column: 1 / -1; display: flex; gap: var(--s-3); margin-top: var(--s-1); }
}
@media (max-width: 600px) {
    .container { width: min(var(--max), calc(100% - 2rem)); }
    .nav-shell { flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding-block: var(--s-2); }
    .site-nav { width: 100%; margin-left: 0; }
    .site-nav .nav-logout { margin-left: auto; }
}

@media (max-width: 760px) {
    .portfolio-wrap > .portfolio { display: block; min-width: 0; }
    .portfolio tbody { display: block; }
    .portfolio .cell-name { min-width: 0; }
    .portfolio td.num { text-align: left; }
    .portfolio .cell-trend { min-width: 0; }
}
@media (max-width: 600px) {
    .filter-bar .filter-field { flex: 1 1 100%; }
    .filter-bar .filter-field select { width: 100%; }
    .audit-table th:first-child { min-width: 160px; max-width: 190px; }
}

@media (max-width: 760px) {
    .brand-brief { margin-bottom: var(--s-3); }
    .brand-overview-kpis .kpi { padding: var(--s-2) var(--s-3); }
    .brand-overview-kpis .value { font-size: var(--t-lg); }
    .brand-sections { position: static; display: flex; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .brand-section-menu > summary { min-height: 44px; display: flex; align-items: center; }
    .brand-section-menu > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
    .brand-sections a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; white-space: normal; text-align: center; }
    .brand-page section[id] { scroll-margin-top: 0; }
}

.system-nav { margin-inline: auto; margin-top: var(--s-4); margin-bottom: 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.system-menu > summary { display: none; }
.system-groups { display: grid; gap: var(--s-2); }
.system-group { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.system-group > .eyebrow { min-width: 120px; margin: 0; font-size: var(--t-xs); }
.system-group > div { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.system-nav a, .account-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: var(--s-2) var(--s-3); border-radius: 7px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.system-home { justify-self: start; }
.system-nav a:hover, .account-jump a:hover, .system-nav a[aria-current] { color: var(--green-ink); background: var(--mint); }
.system-nav a[aria-current] { box-shadow: inset 0 0 0 1px var(--mint-strong); }
.system-areas { display: grid; gap: var(--s-5); }
.system-areas > section > h2 { margin-bottom: var(--s-3); font-size: var(--t-md); }
.system-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.system-cards h3 { margin-bottom: var(--s-2); font-size: var(--t-md); }
/* System -> Usage (/admin/usage): glance tiles, per-day bars and the count tables. */
.usage-page .page-head .meta { margin-top: var(--s-1); }
.usage-note { background: var(--info-bg); border-color: var(--line-2); }
.usage-note p { margin: 0; }
.usage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 var(--s-5); padding: 0; list-style: none; }
.usage-tile { padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.usage-tile h2 { margin: 0 0 var(--s-2); font-size: var(--t-base); }
.usage-tile p { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--t-sm); }
.usage-tile p.usage-big { margin: 0; color: var(--ink); font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.usage-staff { display: grid; gap: var(--s-1); margin: 0; }
.usage-staff div { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-1); border-bottom: 1px solid var(--line); }
.usage-staff dt { color: var(--ink-2); }
.usage-staff dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.usage-staff dd .meta { font-weight: 400; }
.usage-panel { margin-bottom: var(--s-5); }
.usage-charts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
.usage-charts > *, .usage-rules > * { min-width: 0; }
.usage-charts figure { margin: 0; }
.usage-charts figcaption { margin-bottom: var(--s-1); font-size: var(--t-sm); font-weight: 600; }
.usage-chart-plot { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); height: 120px; }
.usage-chart-ticks { position: relative; margin: 0; padding: 0; list-style: none; color: var(--ink-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.usage-chart-ticks li { position: absolute; right: var(--s-2); line-height: 1; transform: translateY(-50%); }
.usage-chart-ticks li:nth-child(1) { top: 1px; }
.usage-chart-ticks li:nth-child(2) { top: 50%; }
.usage-chart-ticks li:nth-child(3) { top: calc(100% - 1px); }
.usage-chart-bars { display: block; width: 100%; height: 100%; }
.usage-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.usage-bar-open { fill: var(--chart-citation); }
.usage-bar-staff { fill: var(--green); }
.usage-bar-zero { fill: var(--ink-3); }
.usage-bar-none { fill: var(--chart-not-measured); opacity: .55; }
.usage-chart-days { display: grid; margin: var(--s-1) 0 0 2.2rem; color: var(--ink-3); font-size: var(--t-xs); }
.usage-chart-days-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.usage-chart-days-28 { grid-template-columns: repeat(28, minmax(0, 1fr)); }
.usage-chart-days-90 { grid-template-columns: repeat(90, minmax(0, 1fr)); }
.usage-chart-days span { justify-self: center; white-space: nowrap; }
.usage-legend { margin-top: var(--s-3); }
.usage-key { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: -1px; }
.usage-key-open { background: var(--chart-citation); }
.usage-key-staff { background: var(--green); }
.usage-key-none { background: var(--chart-not-measured); opacity: .55; }
.usage-section { margin-bottom: var(--s-5); }
.usage-table .usage-n { font-variant-numeric: tabular-nums; }
.usage-table .usage-sub { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; white-space: nowrap; }
.usage-table th[scope="row"] .usage-sub { white-space: normal; }
.usage-table td.usage-off { color: var(--ink-3); font-size: var(--t-sm); white-space: nowrap; }
.usage-table thead .usage-group > * { padding-bottom: 0; color: var(--ink-3); background: var(--paper); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-align: center; text-transform: uppercase; border-bottom: 0; }
.usage-table thead .usage-group > * + * { border-left: 1px solid var(--line); }
.usage-table tfoot :is(th, td) { border-top: 2px solid var(--line-2); }
.usage-table tr.usage-weekend :is(th, td) { background: var(--surface-2); }
.usage-days tbody th { white-space: nowrap; }
.usage-rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.usage-rules h2 { margin: 0 0 var(--s-2); font-size: var(--t-base); }
.usage-rules ul { margin: 0; padding-left: var(--s-5); color: var(--ink-2); font-size: var(--t-sm); }
.usage-rules li + li { margin-top: var(--s-1); }
@media (max-width: 760px) {
    .usage-charts, .usage-rules { grid-template-columns: 1fr; }
    .usage-tile p.usage-big { font-size: 1.6rem; }
    .usage-chart-days .usage-day-minor { visibility: hidden; }
}
.account-jump { display: flex; flex-wrap: wrap; gap: var(--s-1); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
/* Account: one left-aligned column of calm sections, like the System pages. */
.account-page .account-jump, .account-page .confirm-identity-panel, .account-page .stack { max-width: 720px; }
.account-page .stack { margin-top: var(--s-5); }
.account-page .section-head h2 { font-size: var(--t-lg); }
.account-page .stack > section > p { max-width: 65ch; overflow-wrap: anywhere; }
.account-page .form-card { padding: 0; border: 0; box-shadow: none; background: none; max-width: 640px; }
.account-page .form-card > .btn { margin-top: var(--s-2); }
.account-page .account-email { margin: 0 0 var(--s-1); }
.account-page .account-email dt { margin-bottom: .45rem; font-size: .9rem; font-weight: 750; }
.account-page .account-email dd { margin: 0; overflow-wrap: anywhere; }
.account-page .account-flashes { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.account-page .tech-details-preference { margin-top: var(--s-5); }
/* The one confirm step renders as a compact strip under the jump nav. */
.account-page .confirm-identity-panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin-top: var(--s-4); padding: var(--s-3) var(--s-4); }
.account-page .confirm-identity-panel p { margin: 0; }
.account-page .confirm-identity-panel .eyebrow { flex-basis: 100%; }
.system-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.account-page h2[id] { scroll-margin-top: 90px; }
.operations-disclosure { border-block: 1px solid var(--line); padding-block: var(--s-2); }
.operations-disclosure > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); min-height: 44px; cursor: pointer; font-weight: 700; }
.operations-disclosure > summary::before { content: '+'; color: var(--green-ink); }
.operations-disclosure[open] > summary::before { content: '−'; }
@media (max-width: 800px) {
    .system-menu > summary { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); cursor: pointer; font-size: var(--t-sm); }
    .system-menu > summary strong { margin-left: auto; }
    .system-groups { padding-top: var(--s-3); }
    .system-group { display: grid; gap: var(--s-1); }
    .system-group > div { display: grid; }
    .system-nav a { min-height: 44px; }
    .system-cards { grid-template-columns: minmax(0, 1fr); }
    .account-jump a { padding-inline: var(--s-2); min-height: 44px; }
}
fieldset.field { min-width: 0; margin: 0 0 1.2rem; padding: 0; border: 0; }
.field legend { padding: 0; margin-bottom: .45rem; font-size: .9rem; font-weight: 750; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s-2); }
.field .check { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; margin: 0; font-size: var(--t-sm); font-weight: 500; }
@media (max-width: 600px) { .field .check { min-height: 44px; } }

/* Feed health */
.status-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.status-card { padding: 1.3rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); box-shadow: var(--shadow); }
.status-card h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.status-card.status-ok { border-left-color: var(--green); }
.status-card.status-warn { border-left-color: var(--orange); }
.status-card.status-bad { border-left-color: var(--status-bad); }

.status-facts { display: grid; gap: .45rem; margin: 0; }
.status-facts div { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.status-facts dt { color: var(--ink-soft); }
.status-facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 600px) { .status-facts div { flex-direction: column; gap: .1rem; } .status-facts dd { text-align: left; } }

/* Saved report surfaces */
.report-snapshot-note { padding: var(--s-4); margin-bottom: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius-sm); }
.report-selection { margin-top: var(--s-2); overflow-wrap: anywhere; }

/* GSC collection receipts retain readable scope and payload digests. */
#gsc-occurrences .mono, #gsc-registry .mono, #gsc-worker .mono { overflow-wrap: anywhere; }
/* Account personal links, sessions and People directory ------------------ */
.personal-link-section, .session-section, .people-page { min-width: 0; }
.personal-link-section .form-card, .session-section .form-card { min-width: 0; }
.personal-link-section input[type="text"], .session-section input[type="text"], .people-page input[type="text"], .people-page select { width: 100%; min-width: 0; max-width: 100%; }
#personal-link-issued .form-card, #personal-link-issued .field { min-width: 0; }
#issued-personal-link { font-family: var(--mono); font-size: var(--t-sm); overflow-wrap: anywhere; }
.people-actions { display: grid; gap: var(--s-3); min-width: min(340px, 72vw); }
.people-form { display: grid; gap: var(--s-2); min-width: 0; padding: var(--s-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.people-form .filter-field { min-width: 0; }
.people-form .check { display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0; font-size: var(--t-sm); font-weight: 500; overflow-wrap: anywhere; }
.people-form .check input, .session-section .check input, .tracking-confirm input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); }
.people-page .table-wrap { max-width: 100%; }
.people-page th, .people-page td { overflow-wrap: anywhere; }
.people-manage { min-width: 0; max-width: 100%; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.people-manage > summary { min-height: 44px; padding: var(--s-2) var(--s-3); color: var(--ink); font-size: var(--t-sm); font-weight: 700; cursor: pointer; touch-action: manipulation; border-radius: var(--radius-sm); }
.people-manage > summary::marker { color: var(--green); }
.people-manage > summary::-webkit-details-marker { color: var(--green); }
.people-manage > summary:hover { color: var(--green-ink); }
.people-manage[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.people-manage .people-actions { min-width: 0; padding: var(--s-3); }
.session-section .check { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .personal-link-section .table-wrap > .table { min-width: 620px; }
    .people-page .table-wrap > #people-table { min-width: 0; }
    #people-table, #people-table tbody { display: block; }
    #people-table thead { display: none; }
    #people-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
    #people-table tbody tr:first-child { border-top: 0; }
    #people-table th, #people-table td { display: block; min-width: 0; max-width: 100%; padding: 0; border: 0; overflow-wrap: anywhere; }
    #people-table th[data-label="Account"], #people-table td[data-label="Manage"] { grid-column: 1 / -1; }
    #people-table td[data-label]::before, #people-table th[data-label="Account"]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    #people-table th[data-label="Account"] { font-size: var(--t-base); font-weight: 700; }
    .table-wrap > #content-model-history-table { min-width: 0; }
    #content-model-history-table, #content-model-history-table tbody { display: block; }
    #content-model-history-table thead { display: none; }
    #content-model-history-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
    #content-model-history-table tbody tr:first-child { border-top: 0; }
    #content-model-history-table td { display: block; min-width: 0; max-width: 100%; padding: 0; border: 0; overflow-wrap: anywhere; }
    #content-model-history-table td[data-label="Model"] { grid-column: 1 / -1; }
    #content-model-history-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .people-manage { max-width: 100%; }
    .people-manage .people-actions { min-width: 0; padding: var(--s-3); }
    .people-actions { min-width: 0; }
    .people-form { padding: var(--s-2) var(--s-3); }
    .personal-link-section .panel, .session-section .panel { padding: var(--s-4) var(--s-3); }
}

.form-section.signin-section { padding: clamp(1.5rem, 4vw, 3rem) 0 3rem; }
.signin-section .form-heading { margin-bottom: 1.25rem; text-align: left; }
.signin-section .form-heading h1 { margin-inline: 0; font-size: clamp(2rem, 4vw, 2.6rem); }
.signin-section .form-card { padding: clamp(1.25rem, 3vw, 1.75rem); }
.signin-alternative { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.signin-alternative p { font-size: .9rem; }
.password-toggle { min-height: 36px; margin-top: .25rem; }
.signin-setup { margin-block: 1rem; }
/* Workspace navigation: one brand scope, one task hierarchy. ------------ */
.has-workspace .nav-shell { width: min(1680px, calc(100% - 48px)); }
/* The rail column's surface and edge are painted on the layout so they run the full page height while the rail itself stays sticky. */
.workspace-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; width: 100%; margin: 0; padding-right: 32px; align-items: start; background: linear-gradient(to right, var(--surface) 0 263px, var(--line) 263px 264px, transparent 264px); }
/* 57px is the signed-in header height, so the pinned foot is visible without scrolling. */
.workspace-rail { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 24px; height: calc(100dvh - 57px); min-height: 0; padding: 22px 16px 18px; overflow: auto; scrollbar-width: thin; }
.workspace-scope { padding: 0; }
.workspace-scope .eyebrow { display: block; margin: 0 10px 8px; color: var(--ink-3); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scope-picker { position: relative; }
.scope-picker > summary, .scope-fixed { display: flex; align-items: center; justify-content: flex-start; gap: 11px; min-height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-size: .875rem; font-weight: 600; cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.scope-fixed { cursor: default; }
.scope-picker > summary::-webkit-details-marker, .workspace-menu > summary::-webkit-details-marker { display: none; }
.scope-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.scope-mark-sm { width: 30px; height: 30px; border-radius: 9px; font-size: .625rem; }
.scope-text { display: grid; gap: 2px; min-width: 0; }
.scope-text strong { font-weight: 600; overflow-wrap: break-word; }
.scope-text span { color: var(--ink-3); font-size: .75rem; font-weight: 400; overflow-wrap: break-word; }
/* The closed card is two rows: avatar, name and chevron, then the domain across
   the full card width, ellipsised only when it cannot fit. The 49px indent is
   the 38px avatar plus the 11px row gap, aligning the domain under the name. */
.scope-picker > summary { flex-wrap: wrap; row-gap: 2px; }
.scope-picker > summary .scope-text { flex: 1 1 0; }
.scope-picker > summary .scope-text strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-domain-row { flex: 1 1 100%; min-width: 0; margin-left: 49px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: .75rem; }
/* Grid items default to the width of their longest unbroken run, which would
   force a long domain to overflow instead of wrapping after its dots. */
.scope-options .scope-text > * { min-width: 0; }
.scope-chevron { flex: 0 0 auto; margin-left: auto; color: var(--ink-3); }
.scope-picker[open] .scope-chevron { transform: rotate(180deg); }
.scope-options { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.scope-search { display: grid; gap: 6px; padding: 4px; color: var(--ink-2); font-size: .75rem; }
.scope-search input { width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--field-border); border-radius: 6px; }
.scope-options ul { display: grid; gap: 4px; max-height: 40dvh; overflow-y: auto; margin: 4px 0 0; padding: 0; list-style: none; }
.scope-options a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 9px; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.scope-options a strong { display: block; font-size: .75rem; font-weight: 600; }
.scope-options a .scope-text span { display: block; font-size: .625rem; color: var(--ink-3); }
.scope-options a .scope-mark { color: var(--surface); overflow-wrap: normal; }
.scope-options a:hover, .scope-options a[aria-current] { background: var(--mint); }
.workspace-menu > summary { display: none; }
.workspace-group-label { margin: 0 10px 6px; color: var(--ink-3); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.workspace-links { display: grid; gap: 5px; }
.workspace-links > a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; color: var(--ink-3); border: 0; border-radius: var(--radius-sm); text-decoration: none; font-size: .875rem; font-weight: 500; }
.workspace-links > a:hover { color: var(--ink); background: var(--surface-2); }
.workspace-links > a[aria-current="page"],
.workspace-links > a[aria-current="true"] { color: var(--ink); background: var(--mint); font-weight: 600; }
.workspace-submenu { margin: 0; }
.workspace-submenu > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; color: var(--ink-3); border: 0; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500; cursor: pointer; list-style: none; }
.workspace-submenu > summary::-webkit-details-marker { display: none; }
.workspace-submenu > summary:hover { color: var(--ink); background: var(--surface-2); }
.workspace-submenu > summary[aria-current="true"] { color: var(--ink); background: var(--mint); font-weight: 600; }
.workspace-submenu > .workspace-links { margin-top: 5px; padding-left: 12px; }
@media (max-width: 800px) {
    .workspace-submenu { grid-column: 1 / -1; }
    .workspace-submenu > summary { justify-content: center; min-height: 44px; padding: 9px; font-size: .8125rem; text-align: center; }
    .workspace-submenu > .workspace-links { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; padding-left: 0; }
}
.workspace-scope-note { margin: auto 0 0; padding: 0 10px; font-size: .75rem; line-height: 1.45; color: var(--ink-3); }
.workspace-main { min-width: 0; }
.workspace-main > .container { width: 100%; max-width: none; }
.workspace-main .page { padding-block: 28px 48px; }
.workspace-main .page-head { align-items: start; }
.workspace-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.workspace-cards .card-body { display: flex; flex-direction: column; align-items: start; gap: 8px; }
.workspace-cards .actions { margin-top: auto; }
/* Cards whose bodies are genuinely different lengths: equal height would leave
   the shorter card mostly empty beside a long list. */
.workspace-cards-start { align-items: start; }
.workspace-cards h2, .workspace-cards h3 { overflow-wrap: anywhere; }
.measurement-details { margin-top: 32px; border-top: 1px solid var(--line-2); padding-top: 20px; }
.measurement-details > summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-weight: 700; }
.workspace-main .ai-workspace { background: transparent; }
.has-workspace .site-nav a, .has-workspace .nav-logout button { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 800px) {
    .has-workspace .nav-shell { width: calc(100% - 32px); gap: 8px; flex-wrap: wrap; padding-block: 8px; }
    .has-workspace .site-nav { gap: 0; }
    .has-workspace .site-nav a:not(.button) { padding-inline: 8px; }
    .workspace-layout { display: block; width: 100%; padding-right: 0; background: none; }
    .workspace-rail { top: 0; z-index: 5; gap: 8px; height: auto; padding: 10px 16px; max-height: none; overflow: visible; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 3px 10px var(--shadow-color-rail); }
    .workspace-scope .eyebrow, .workspace-scope-note, .workspace-group-label { display: none; }
    /* The collapsed rail stays shorter than the 140px section scroll margin below, so anchors clear it. */
    .scope-picker > summary, .scope-fixed { min-height: 44px; padding: 6px 12px; }
    .scope-picker > summary .scope-text :is(strong, span) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .scope-options { top: calc(100% + 6px); }
    .scope-options ul { max-height: 50dvh; }
    .workspace-menu > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); list-style: none; cursor: pointer; }
    .workspace-menu > summary strong { flex: 1; text-align: right; color: var(--green-ink); }
    .workspace-menu > summary > span:first-child { font-size: .75rem; color: var(--ink-2); }
    .workspace-links { margin-top: 8px; gap: 5px; }
    .workspace-menu > .workspace-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .workspace-links > a { justify-content: center; min-height: 44px; padding: 9px; font-size: .8125rem; text-align: center; }
    .workspace-main { padding: 0 16px; }
    .workspace-main .page { padding-block: 24px 36px; }
    .workspace-main .page-head { gap: 16px; }
    /* The phone rail already sticks to the top; a second sticky row would slide over it. */
    .workspace-main .subnav { position: static; }
    /* Site Audit tabs wrap instead of clipping "Performance" behind a sideways scroll. */
    .audit-subviews[aria-label="Site Audit views"] { flex-wrap: wrap; overflow-x: visible; }
    .btn, .brand-actions > summary, .brand-section-menu > summary { min-height: 44px; }
    .workspace-main section[id], .workspace-main article[id] { scroll-margin-top: 140px; }
}
@media (max-width: 620px) {
    .workspace-menu > .workspace-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print {
    .workspace-layout { display: block; width: 100%; background: none; }
    .workspace-main { padding: 0; }
    .workspace-main .page { padding: 0; }
}

/* Content page detail ---------------------------------------------------- */
.content-review-sub { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.content-review-heading { margin-bottom: var(--s-5); }
.content-review-heading h1 { max-width: 32ch; margin-bottom: var(--s-2); font-size: clamp(1.55rem, 2.7vw, 2.25rem); }
.content-review-back { display: inline-block; margin-bottom: var(--s-4); font-size: var(--t-sm); }
.content-review-page-meta { margin: 0; color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.content-review-context { margin-bottom: var(--s-4); }
.content-review-context h2 { font-size: var(--t-lg); }
.content-review-subject-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-3); margin: var(--s-3) 0; }
.content-review-subject-form .field { min-width: 0; margin: 0; }
.content-review-subject-form select { width: 100%; min-width: 0; max-width: 100%; }
.content-review-versions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 0; }
.content-review-versions > div { min-width: 0; padding-top: var(--s-2); border-top: 1px solid var(--line); }
.content-review-versions dt { font-size: var(--t-xs); color: var(--ink-3); }
.content-review-versions dd { margin: var(--s-1) 0 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
.content-review-details { margin: 0; }
.content-review-details > summary { padding: var(--s-3) var(--s-4); cursor: pointer; font-weight: 700; }
.content-review-details > summary:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: -3px; }
.content-review-details > .card-body { border-top: 1px solid var(--line); }
.content-review-page .btn { min-height: 44px; }
.content-review-page :is(input, textarea, button, summary) { scroll-margin-block: 5rem 8rem; }
.content-review-list { margin: 0; padding-left: 1.2em; font-size: var(--t-sm); overflow-wrap: anywhere; }
.content-review-list li + li { margin-top: var(--s-1); }
.content-review-page section[id], .content-review-page article[id] { scroll-margin-top: 5rem; }
.content-review-events { padding: 0; }
@media (max-width: 760px) {
    .content-review-subject-form { grid-template-columns: minmax(0, 1fr); }
    .content-review-subject-form .btn { justify-self: start; }
    .content-review-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-review-table-wrap > table.content-review-table { display: block; width: 100%; min-width: 0; }
    .content-review-table tbody { display: block; }
    .content-review-table thead { display: none; }
    .content-review-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
    .content-review-table td, .content-review-table th { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .content-review-table th[data-label] { grid-column: 1 / -1; }
    .content-review-table td[data-label]::before, .content-review-table th[data-label]::before { content: attr(data-label) " "; display: block; color: var(--ink-3); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
    .content-review-table td.num { text-align: left; }
}
@media (max-width: 480px) { .content-review-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); } .content-review-versions > div { padding-top: var(--s-2); } .content-review-context { margin-bottom: var(--s-3); } .content-review-subject-form { gap: var(--s-2); } }

/* Rank tracking catalogue and rank work ---------------------------------- */
.tracking-page, .rank-keyword-page { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.tracking-page > section, .rank-keyword-page > :is(section, details) { padding-block: var(--s-4); }
.tracking-page td > .meta { display: block; }
.tracking-page .table .actions a, .rank-work-action { display: inline-flex; align-items: center; min-height: 36px; }
.tracking-page .table-wrap { max-width: 100%; }
.tracking-page :is(th, td) { overflow-wrap: anywhere; }
.tracking-page .cell-url { font-family: var(--mono); font-size: var(--t-xs); word-break: break-word; }
.tracking-page > .meta { max-width: 75ch; }
/* Keywords manager: positions, movement and target match on every row; a tray meters the day's tasks. */
.manager-filters { margin-bottom: var(--s-2); }
.manager-count { margin-bottom: var(--s-2); }
.manager-table th[scope="row"] .meta { display: block; font-weight: 400; }
.manager-table th[scope="row"] .badge { margin-left: 2px; }
.manager-table .num .delta { display: block; font-size: var(--t-xs); }
.manager-target { min-width: 0; max-width: 34ch; }
.manager-target .badge { display: inline-flex; margin-bottom: 2px; }
.manager-target .cell-url { display: block; }
.manager-actions .actions { flex-wrap: nowrap; }
.manager-tray { position: sticky; bottom: var(--s-2); z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.manager-tray p { margin: 0; font-size: var(--t-sm); }
.manager-tray-summary { flex: 1 1 14rem; font-weight: 700; }
.manager-tray-bar { flex: 1 1 10rem; height: 10px; }
.manager-tray[data-state="error"] .manager-tray-summary, .manager-tray[data-state="over"] .manager-tray-summary { color: var(--bad); }
.manager-tray[data-state="checking"] .manager-tray-meter { opacity: .6; }
@media (max-width: 600px) {
    /* One card per keyword, so nothing scrolls sideways and Edit/Archive stay in reach. */
    .manager-wrap { overflow: visible; }
    /* .table-wrap > .table sets a 600px floor for scrolling tables; cards need none. */
    .table-wrap > .manager-table, .manager-table tbody { display: block; width: 100%; min-width: 0; }
    .manager-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .manager-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
    .manager-table :is(th, td) { min-width: 0; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere; }
    .manager-table .cell-url { word-break: break-all; }
    .manager-table .tracking-tick { grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
    .manager-table th[scope="row"] { grid-column: 2 / -1; }
    .manager-table td[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; }
    .manager-table td.num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
    .manager-table td.num .delta { display: inline; }
    .manager-target, .manager-actions { grid-column: 2 / -1; max-width: none; }
    .manager-actions .actions { flex-wrap: wrap; }
    .manager-actions .actions a { min-height: 36px; }
}
@media (max-width: 600px) {
    /* Client access: one card per link, so the table never runs past the screen and Replace/Revoke stay in reach. */
    .table-wrap > .client-links-table, .client-links-table tbody { display: block; width: 100%; min-width: 0; }
    .client-links-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .client-links-table tr { display: grid; gap: var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--line); }
    .client-links-table tr:last-child { border-bottom: 0; }
    .sticky-first > .client-links-table :is(th, td) { position: static; min-width: 0; padding: 0; border: 0; background: none; text-align: left; overflow-wrap: anywhere; }
    .client-links-table [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; }
    .client-links-table form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
    .client-links-table input[type="text"] { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
}
.tracking-reason { max-width: 75ch; padding: var(--s-2) var(--s-3); background: var(--surface); border-left: 3px solid var(--line-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; overflow-wrap: anywhere; }
.tracking-editor { min-width: 0; }
.tracking-editor .form-card { display: grid; gap: var(--s-3); min-width: 0; max-width: 720px; }
.tracking-editor .field { min-width: 0; margin-bottom: 0; }
.tracking-editor .field input:not([type="checkbox"]):not([type="radio"]), .tracking-editor .field select, .tracking-editor .field textarea { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.tracking-editor .meta { max-width: 65ch; overflow-wrap: anywhere; }
.tracking-decisions { display: grid; gap: var(--s-3); min-width: 0; margin-top: var(--s-4); }
.tracking-decisions .form-card { display: grid; gap: var(--s-2); min-width: 0; max-width: 720px; }
.tracking-confirm { display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0; min-height: 36px; margin: 0; font-size: var(--t-sm); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .tracking-editor .form-card, .tracking-decisions .form-card { max-width: 100%; }
}

/* Frozen client briefings ------------------------------------------------ */
.saved-report { --ink-3: var(--report-ink-3); width: min(1100px, calc(100% - 32px)); margin-block: 40px; padding: 48px 56px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 4px; font-size: 1rem; overflow-wrap: anywhere; }
.saved-report .eyebrow { color: var(--green); font-size: .72rem; letter-spacing: .12em; }
.report-cover { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.report-cover-top, .report-cover-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.report-cover-top { margin-bottom: 24px; }
.report-saved-label { color: var(--ink-soft); font-size: .75rem; }
.report-cover h1 { max-width: 24ch; margin-bottom: 8px; font-size: 2.5rem; line-height: 1.12; letter-spacing: -.035em; }
.report-subtitle { margin-bottom: 24px; color: var(--ink-2); font-size: 1.25rem; }
.report-dates { margin: 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.7; overflow-wrap: anywhere; }
.saved-report h2 { font-size: 1.5rem; line-height: 1.25; }
.saved-report h3 { font-size: 1.0625rem; }
.saved-report .btn, .report-contents a { min-height: 44px; }
.report-summary { margin-block: 32px 20px; padding: 28px 32px; background: var(--report-surface); border-radius: 8px; }
.report-summary h2 { margin-block: 8px 16px; }
.report-lead { max-width: 64ch; margin-bottom: 10px; font-size: 1.125rem; line-height: 1.6; }
.report-support { color: var(--ink-soft); font-size: .875rem; line-height: 1.65; }
.report-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 18px; padding-top: 20px; border-top: 1px solid var(--report-line); }
.report-metrics dt { color: var(--ink-2); font-size: .8125rem; }
.report-metrics dd { margin: 4px 0 0; font-size: 2.25rem; line-height: 1.3; font-weight: 750; font-variant-numeric: tabular-nums; }
.report-metrics dd small { color: var(--ink-soft); font-size: 1rem; font-weight: 500; }
.report-metrics .report-metric-hint { margin: 3px 0 0; color: var(--ink-soft); font-size: .75rem; font-weight: 400; }
.report-comparison { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--report-line); color: var(--ink-2); font-size: .875rem; }
.report-contents { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.report-contents a { display: inline-flex; align-items: center; color: var(--green); font-size: .8125rem; font-weight: 600; text-decoration-thickness: 1px; }
.report-update { margin-bottom: 40px; }
.report-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 22px; }
.report-editorial > div + div { border-left: 2px solid var(--line); padding-left: 28px; }
.report-editorial p { white-space: normal; line-height: 1.7; }
.report-work-group { margin-top: 24px; }
.report-work-group ul { padding-left: 20px; }
.report-work-group li { margin-block: 12px; }
.report-work-group li > .meta { display: block; margin-top: 3px; }
.report-evidence > section { margin-block: 36px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.saved-report .card, .saved-report .kpi { box-shadow: none; }
.saved-report .section-head { align-items: start; }
.saved-report .meta { line-height: 1.65; }
.report-signal-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0; color: var(--ink-soft); font-size: .8125rem; }
.report-signal-legend b { color: var(--ink); }
.report-question-head, .report-question > summary { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px; gap: 12px; align-items: center; }
.report-question-head { padding: 10px 20px 10px 40px; color: var(--ink-soft); font-size: .75rem; border-bottom: 1px solid var(--line-2); }
.report-question-head > :not(:first-child) { text-align: right; }
.report-question { border-bottom: 1px solid var(--line); }
.report-question > summary { position: relative; padding: 18px 20px 18px 40px; min-height: 64px; cursor: pointer; list-style: none; }
.report-question > summary::marker { content: ''; }
.report-question > summary::-webkit-details-marker { display: none; }
.report-question > summary::before { content: '+'; position: absolute; left: 14px; color: var(--green); font-size: 1.2rem; font-weight: 600; }
.report-question[open] > summary::before { content: '−'; }
.report-question > summary:hover { background: var(--report-hover); }
.report-question[open] > summary { background: var(--report-surface); }
.report-question-title { font-size: .9375rem; font-weight: 650; }
.report-question-total { text-align: right; font-variant-numeric: tabular-nums; font-size: .875rem; }
.report-question-total > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.report-question-evidence { padding: 20px; background: var(--report-evidence); }
.report-surface-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 16px; font-size: .8125rem; }
.report-surface-table th, .report-surface-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.report-surface-table th:first-child { width: 44%; }
.report-surface-table thead th { color: var(--ink-soft); font-size: .75rem; }
.report-surface-table small { display: block; color: var(--ink-soft); font-size: .75rem; margin-top: 3px; }
.report-signal { font-weight: 700; }
.report-signal[data-tone="yes"] { color: var(--good); }
.report-signal[data-tone="no"] { color: var(--ink-2); }
.report-ai-coverage { margin-block: 20px 8px; }
.report-details { padding-top: 28px; border-top: 2px solid var(--line); margin-top: 44px; font-size: .875rem; }
.report-details > p { color: var(--ink-soft); }
.saved-report .brand-disclosure { margin-top: 12px; box-shadow: none; }
.saved-report .report-snapshot-note { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.report-coverage { margin: 0; }
.report-coverage > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.report-coverage dt { font-weight: 650; }
.report-coverage dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 700px) {
    .saved-report { width: 100%; margin-block: 0; padding: 28px 20px; border-inline: 0; }
    .report-cover-top, .report-cover-bottom { align-items: start; flex-wrap: wrap; }
    .report-cover-top { gap: 6px; margin-bottom: 22px; }
    .report-cover h1 { font-size: 1.875rem; }
    .report-subtitle { font-size: 1.0625rem; }
    .report-summary { padding: 22px 18px; margin-top: 24px; }
    .report-metrics { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
    .report-metrics > div { display: grid; grid-template-columns: 1fr auto; align-items: center; }
    .report-metrics dd { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 1.875rem; }
    .report-metrics .report-metric-hint { grid-column: 1; grid-row: 2; font-size: .75rem; }
    .report-contents { gap: 0 16px; margin-bottom: 24px; }
    .report-editorial { grid-template-columns: 1fr; gap: 18px; }
    .report-editorial > div + div { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid var(--line); }
    .report-question-head { display: none; }
    .report-question > summary { grid-template-columns: 1fr 1fr; padding: 16px 12px 16px 30px; gap: 12px 16px; }
    .report-question > summary::before { left: 7px; top: 14px; }
    .report-question-title { grid-column: 1 / -1; }
    .report-question-total { text-align: left; }
    .report-question-total > span { position: static; width: auto; height: auto; clip-path: none; margin-right: 8px; color: var(--ink-soft); font-size: .75rem; }
    .report-question-evidence { padding: 16px 4px; }
    .report-surface-table th, .report-surface-table td { padding: 10px 6px; }
    .report-surface-table th:first-child { width: 40%; }
    .report-coverage > div { grid-template-columns: 1fr; gap: 4px; }
}

/* AI visibility graph: fluid SVG bars, no scripts and no inline styles, so
   the same component serves staff, the client capability and frozen reports. */
/* The cited-domain panel holds five fixed rows, so it gets a capped track and
   the presence bars absorb every surplus pixel. A fraction column here grew
   with the viewport and starved the bars it sat beside. */
.aiv-chart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: var(--s-5); margin: var(--s-4) 0 var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-4); }
.chart-head h3 { margin: 0; font-size: var(--t-md); }
.chart-head p { margin: 0; color: var(--ink-2); font-size: var(--t-xs); }
.chart-kpis { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 var(--s-2); }
.chart-kpis > span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--t-xs); }
.chart-kpis strong { color: var(--ink); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.chart-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--t-sm); }
.chart-table thead th { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-xs); font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.chart-table tbody th { padding: 8px 10px 8px 0; font-weight: 650; text-align: left; overflow-wrap: anywhere; }
.chart-table tbody td { padding: 8px 0; }
.chart-table tbody tr + tr th, .chart-table tbody tr + tr td { border-top: 1px solid var(--line); }
.chart-table th:first-child { width: 38%; }
.aiv-chart-domains th:first-child { width: 55%; }
.aiv-chart-domains tbody tr.is-owned th { color: var(--green); }
.chart-cell { display: flex; align-items: center; gap: var(--s-2); }
.chart-signal { display: none; }
/* A fixed figure column keeps every bar track the same width, so bars stay
   comparable across rows instead of ending wherever the label does. */
.chart-cell b { flex: none; min-width: 3.4em; font-variant-numeric: tabular-nums; text-align: right; }
.chart-bar { flex: 1 1 auto; min-width: 0; display: block; width: 100%; height: 12px; border-radius: 3px; overflow: hidden; }
.chart-bar .c-track { fill: var(--chart-track); }
.chart-bar .c-mention { fill: var(--green); }
.chart-bar .c-citation { fill: var(--chart-citation); }
.chart-bar .c-other { fill: var(--chart-other); }
.chart-bar .c-no { fill: var(--chart-none); }
.chart-bar .c-unknown { fill: var(--chart-unknown); }
.chart-bar .c-top3 { fill: var(--green); }
.chart-bar .c-top10 { fill: var(--mint-strong); }
.chart-bar .c-top20 { fill: var(--chart-top20); }
.chart-bar .c-beyond20 { fill: var(--chart-beyond20); }
.chart-bar .c-not_found { fill: var(--chart-none); }
.chart-bar .c-not_measured { fill: var(--chart-not-measured); }
.chart-table td em { display: block; margin-top: 3px; color: var(--chart-note); font-size: var(--t-xs); font-style: normal; }
.aiv-chart-tag { display: inline-block; padding: 1px 6px; border-radius: 99px; background: var(--mint); color: var(--green-ink); font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--t-xs); }
.chart-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; }
.chart-legend .k-mention { background: var(--green); }
.chart-legend .k-citation { background: var(--chart-citation); }
.chart-legend .k-no { background: var(--chart-none); }
.chart-legend .k-unknown { background: var(--chart-unknown); }
/* Rank position bands reuse the whole component; only the card is its own,
   because this chart has no side panel. */
.rank-bands { margin: var(--s-4) 0 var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rank-bands .chart-table th:first-child { width: 32%; }
.rank-bands .chart-table th:last-child { width: 22%; }
.rank-bands .chart-table td + td { padding-left: var(--s-5); }
.rank-bands .chart-table td .delta { margin-right: 6px; font-variant-numeric: tabular-nums; }
.rank-bands .chart-table td .muted { color: var(--ink-3); font-size: var(--t-xs); }
.rank-bands .chart-table tbody th a { color: inherit; text-decoration: none; }
.rank-bands .chart-table tbody th a:hover { color: var(--green-ink); text-decoration: underline; }
.rank-bands .chart-table tbody tr[aria-current="true"] th { color: var(--green); font-weight: 800; }
.rank-bands .chart-days { margin: var(--s-3) 0 0; }
.rank-bands .chart-days > summary { color: var(--ink-2); font-size: var(--t-xs); cursor: pointer; }
.rank-bands .chart-days .table-wrap { margin-top: var(--s-3); }
/* The shared table stacks one row at a time below 1150px; the card follows it
   rather than keeping a second breakpoint of its own. */
@media (max-width: 1149px) {
    .rank-bands { padding: var(--s-4); }
    .rank-bands .chart-table tbody td + td { margin-top: var(--s-1); padding-left: 0; }
}
/* How rankings moved: im_chart_line() drawn wide and narrow, CSS shows one at
   the site-audit progress breakpoint. Classes only; colours are chart tokens. */
.rank-trend { margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rank-trend .chart-head h2 { margin: 0; font-size: var(--t-md); }
.rank-trend-answer { margin: var(--s-2) 0 var(--s-3); color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.rank-trend-ranges { display: inline-flex; overflow: hidden; margin: 0 0 var(--s-3); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.rank-trend-ranges a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--s-3); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.rank-trend-ranges a + a { border-left: 1px solid var(--line); }
.rank-trend-ranges a[aria-current="page"] { color: var(--on-brand); background: var(--green); }
.rank-trend-chart { min-width: 0; margin: 0; }
.chart-line { display: block; width: 100%; max-width: 100%; height: auto; }
.chart-line .c-axis { stroke: var(--line); stroke-width: 1; }
.chart-line .c-axis-label { fill: var(--muted); font: 11px var(--font); }
.chart-line .c-band.c-top3 { fill: var(--mint-strong); }
.chart-line .c-band.c-top10 { fill: var(--mint); }
.chart-line .c-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-line .c-point { fill: var(--green); }
.chart-line .c-point-label { fill: var(--ink); font: 600 12px var(--font); }
.chart-line .c-marker { stroke-width: 1.5; }
.chart-line .m-incomplete { fill: var(--surface); stroke: var(--warn); stroke-width: 2; }
.chart-line .m-added { fill: var(--good); stroke: var(--surface); }
.chart-line .m-archived { fill: var(--chart-other); stroke: var(--surface); }
.chart-line.is-narrow { display: none; }
.rank-trend-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: var(--s-2) 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--t-xs); }
.rank-trend-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rank-trend-legend li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--line); }
.rank-trend-legend .is-line::before { height: 3px; border-radius: 2px; background: var(--green); }
.rank-trend-legend .is-top3::before { background: var(--mint-strong); }
.rank-trend-legend .is-top10::before { background: var(--mint); }
.rank-trend-legend .is-incomplete::before { border: 2px solid var(--warn); border-radius: 50%; background: var(--surface); }
/* The chart draws added as an up triangle and archived as a down triangle; the legend matches. */
.rank-trend-legend .is-added::before { border-radius: 0; background: var(--good); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rank-trend-legend .is-archived::before { border-radius: 0; background: var(--chart-other); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.rank-trend-crossings { display: grid; gap: 4px; margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); overflow-wrap: anywhere; }
.rank-trend-crossings li > span { color: var(--ink-2); }
.rank-trend-crossings li[data-direction="entered"] > span { color: var(--good); }
.rank-trend-crossings li[data-direction="left"] > span { color: var(--bad); }
.rank-trend-crossings .rank-trend-more { color: var(--ink-3); font-size: var(--t-xs); }
/* One keyword over time: desktop solid, mobile dashed, "Not in top N" in its own lane. */
.chart-line path.c-line-desktop { stroke: var(--green); }
.chart-line path.c-line-mobile { stroke: var(--chart-citation); stroke-width: 2; stroke-dasharray: 7 4; }
.chart-line circle.c-line-desktop { fill: var(--green); stroke: none; }
/* Mobile points are rings, so a mobile reading on the same position as desktop still shows. */
.chart-line circle.c-line-mobile { fill: var(--surface); stroke: var(--chart-citation); stroke-width: 2; }
.rank-keyword-readings > summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-weight: 700; }
.chart-line .c-floor { fill: var(--chart-not-measured); }
.chart-line .c-floor-label { fill: var(--ink-2); }
.chart-line .c-floor-mark.c-line-desktop { fill: var(--green); }
.chart-line .c-floor-mark.c-line-mobile { fill: var(--chart-citation); }
.chart-line .c-guide { stroke: var(--chart-note); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-line .m-page { fill: var(--chart-note); stroke: var(--surface); }
.rank-trend-legend .is-desktop::before { height: 3px; background: var(--green); }
.rank-trend-legend .is-mobile::before { height: 0; border-top: 3px dashed var(--chart-citation); border-radius: 0; background: none; }
.rank-trend-legend .is-floor::before { height: 8px; background: var(--chart-not-measured); }
.rank-trend-legend .is-page::before { width: 10px; height: 10px; border-radius: 0; background: var(--chart-note); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rank-trend-legend .is-gap::before { display: none; }
.rank-keyword-answers { display: grid; gap: 2px; margin: var(--s-2) 0 var(--s-3); padding: 0; list-style: none; color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.rank-keyword-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-3) var(--s-5); margin-top: var(--s-3); }
.rank-keyword-pages h3 { margin: 0 0 var(--s-2); font-size: var(--t-sm); }
.rank-keyword-changes { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); overflow-wrap: anywhere; }
.rank-keyword-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.rank-keyword-link:hover { text-decoration-color: currentColor; }
/* Staff map packs (local listings) beside the organic result, never merged into it. */
.rank-pack-summary { margin: var(--s-3) 0; padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); }
.rank-pack-summary h3 { margin: 0 0 var(--s-2); font-size: var(--t-sm); }
.rank-pack-summary p { margin: var(--s-1) 0 0; }
.rank-pack-counts { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.rank-pack-counts strong { font-variant-numeric: tabular-nums; }
.rank-pack-filter { margin-left: var(--s-1); }
.rank-pack-col { white-space: nowrap; }
.rank-pack { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-pack-in { color: var(--good); }
.rank-pack-out { color: var(--warn); }
.rank-pack-no_pack, .rank-pack-unchecked { color: var(--muted); font-weight: 400; }
.rank-pack.is-match { text-decoration: underline; text-underline-offset: 3px; }
.rank-pack-where { display: block; color: var(--muted); font-size: var(--t-xs); white-space: normal; }
.rank-pack-members { margin-top: var(--s-2); }
.rank-pack-members .url { display: block; max-width: none; white-space: normal; overflow-wrap: anywhere; }
.rank-pack-members .is-own th, .rank-pack-members .is-own td { background: var(--good-bg); }
.rank-pack-strip { display: flex; flex-wrap: wrap; gap: 2px; margin: var(--s-2) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); line-height: 1; }
.rank-pack-strip li { width: 1.1em; text-align: center; }
.rank-pack-strip .is-in { color: var(--good); }
.rank-pack-strip .is-out { color: var(--warn); }
.rank-pack-strip .is-no_pack, .rank-pack-strip .is-gap { color: var(--muted); }
/* Staff Rankings: the map pack and Google AI Overviews summaries side by side,
   stacked on phones; the AI Overview column wraps its longer readings. */
.rank-summaries { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-3) 0; }
.rank-summaries > .rank-pack-summary { min-width: 0; margin: 0; }
.table .rank-ai-col { white-space: normal; min-width: 9.5rem; }
/* The keyword page's device columns hold scrolling tables; without this the
   tables' phone width floor widens the whole page at 390. */
.rank-keyword-pages > * { min-width: 0; }
@media (max-width: 760px) {
    .rank-summaries { grid-template-columns: 1fr; }
}
/* System -> Search responses (/admin/responses) */
.break-anywhere { overflow-wrap: anywhere; }
.response-request { margin: var(--s-2) 0 0; padding: var(--s-3); max-height: 24rem; overflow: auto; font: var(--t-sm)/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--neutral-bg); border-radius: var(--radius, 6px); }
@media (max-width: 760px) {
    .rank-trend { padding: var(--s-4); }
    .chart-line.is-wide { display: none; }
    .chart-line.is-narrow { display: block; }
}
.aiv-chart-share { margin: var(--s-2) 0 var(--s-3); color: var(--ink-2); font-size: var(--t-sm); }
.aiv-chart-share strong { color: var(--ink); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.chart-note { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--t-xs); }
/* Side by side only while the bars can still afford it. Below that the panels
   stack, which measures wider bars than a cramped two-column row.
   Measured on the deployed capability page, whose sidebar takes 312px before
   the card starts: side by side the narrowest bar is 208px at 1920, 168 at
   1600, 137 at 1500, 119 at 1440 and 106 at 1400 — under the 140px floor from
   about 1510 down. Stacked, the same page measures 230px at 1399. The
   threshold is therefore 1549, not the viewport width the card would afford
   without a sidebar. */
@media (max-width: 1549px) {
    .aiv-chart { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-4); }
    .aiv-chart-side { padding-top: var(--s-4); border-top: 1px solid var(--line); }
}
/* Narrower still: read one row at a time. Two full-width bars beat two
   squeezed columns, and every figure keeps its own label.
   Measured stacked on the deployed capability page: 193px at 1280, 137 at
   1100, 114 at 1024 and 106 at 1000 while the columns hold, against 557px the
   moment the rows become blocks. A three-column table crosses the 140px floor
   at about 1110, so the switch belongs at 1149, not 999. */
@media (max-width: 1149px) {
    .chart-table, .chart-table tbody, .chart-table tbody tr, .chart-table tbody th, .chart-table tbody td { display: block; }
    .chart-table thead { display: none; }
    .chart-table tbody tr { padding: var(--s-3) 0; }
    .chart-table tbody tr + tr { border-top: 1px solid var(--line); }
    .chart-table tbody th, .chart-table tbody td { width: auto; padding: 0; border: 0; }
    .chart-table tbody th { padding-bottom: var(--s-2); }
    .chart-table tbody td + td { margin-top: var(--s-2); }
    .chart-signal { display: block; margin-bottom: 3px; color: var(--ink-2); font-size: var(--t-xs); }
    .aiv-chart-domains tbody tr { padding: var(--s-2) 0; }
    .aiv-chart-domains tbody th { padding-bottom: 5px; overflow-wrap: break-word; }
    .aiv-chart-domains .chart-signal { display: none; }
}
@media print {
    .aiv-chart { break-inside: avoid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 10px; box-shadow: none; }
    .chart-bar { height: 9px; }
}

/* Public homepage -------------------------------------------------------- */
.is-home .site-header { border-top: 3px solid var(--orange); }
.is-home .site-nav a[href="/login"] { font-weight: 700; }
.is-home .site-nav a, .home-footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.home-footer-nav { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.home { overflow-wrap: break-word; }
.home-cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .72rem 1.15rem; color: var(--green-ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; font-weight: 700; text-decoration: none; }
.home-cta-secondary:hover { color: var(--green-ink); background: var(--mint); border-color: var(--green); }
.home-faq { margin-top: clamp(2rem, 4vw, 3.5rem); }
.home-faq details { margin-top: var(--s-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.home-faq summary { min-height: 44px; padding: var(--s-3) var(--s-4); font-weight: 700; cursor: pointer; }
.home-faq details p { margin: 0; padding: 0 var(--s-4) var(--s-4); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
    html:has(body.is-home) { scroll-behavior: auto; }
    .is-home .button, .is-home .home-cta-secondary { transition: none; }
}

/* Legacy page styles — retired page by page as the rebuild lands ------- */
.button-wide { width: 100%; }
.button-quiet { color: var(--green); background: transparent; border-color: transparent; }
.button-quiet:hover { color: var(--green-dark); background: var(--mint); border-color: var(--mint); }
.microcopy { color: var(--microcopy); font-size: .8rem; }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }


.form-section { padding: clamp(4rem, 8vw, 7rem) 0 8rem; }.form-wrap { max-width: 600px; }.form-wrap-compact { max-width: 520px; }.form-heading { margin-bottom: 2rem; text-align: center; }.form-heading h1 { margin-inline: auto; font-size: clamp(2.4rem, 6vw, 4rem); }.form-heading p:not(.eyebrow) { color: var(--ink-soft); }.form-card { padding: clamp(1.4rem, 4vw, 2.4rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.field { margin-bottom: 1.2rem; }.field label { display: block; margin-bottom: .45rem; font-size: .9rem; font-weight: 750; }.optional { color: var(--form-optional); font-size: .78rem; font-weight: 500; }.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; min-height: 48px; padding: .65rem .75rem; color: var(--ink); background: var(--surface); border: 1px solid var(--field-border); border-radius: 8px; }.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--field-border-hover); }.field input[readonly] { color: var(--ink-soft); background: var(--field-readonly-bg); }.field-hint { margin: .38rem 0 0; color: var(--field-hint); font-size: .76rem; }.form-footer { margin: 1.25rem 0 0; color: var(--ink-soft); text-align: center; font-size: .87rem; }
.field textarea { min-height: 96px; font: inherit; resize: vertical; }
.flash-stack { padding-top: 1rem; }.flash { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; color: var(--green-dark); background: var(--mint); border: 1px solid var(--flash-border); border-radius: 9px; font-size: .9rem; }.flash-error, .flash-danger { color: var(--flash-error-ink); background: var(--flash-error-bg); border-color: var(--flash-error-border); }.flash-warning { color: var(--flash-warn-ink); background: var(--flash-warn-bg); border-color: var(--flash-warn-border); }.flash-dismiss { padding: 0 .25rem; color: inherit; background: none; border: 0; font-size: 1.35rem; line-height: 1; }
.panel { padding: clamp(1.4rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }.panel h2 { font-size: 1.75rem; }.panel > p { max-width: 600px; color: var(--ink-soft); }
.detail-list { margin: 1.5rem 0 2rem; }.detail-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--detail-border); }.detail-list dt { color: var(--ink-soft); }.detail-list dd { margin: 0; font-weight: 750; text-transform: capitalize; }
@media (max-width: 600px) { .container { width: min(var(--max), calc(100% - 2rem)); }.section { padding-block: 4.5rem; }.form-section { padding-bottom: 5rem; }.footer-inner { align-items: start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.expandable-json { margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.expandable-json summary { padding: var(--s-2) var(--s-3); color: var(--ink-2); font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.expandable-json pre { margin: 0; padding: 0 var(--s-3) var(--s-3); max-height: 24rem; overflow: auto; font-size: var(--t-xs); white-space: pre-wrap; word-break: break-word; }
.alert { margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* Read-only client-view banner: pinned to the top of main content on every page while a view is open. */
.view-as-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); padding: var(--s-2) var(--s-4); color: var(--ink); background: var(--warn-bg); border-bottom: 1px solid var(--warn); font-size: var(--t-sm); font-weight: 600; }
.view-as-banner form { margin: 0; }
.alert-error { color: var(--flash-error-ink); background: var(--flash-error-bg); border-color: var(--flash-error-border); }
.alert-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }

/* Spacing utilities follow component margins. */
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }

/* Print: the printable per-brand report is the brand page with its controls hidden. */
@page { size: A4; margin: 16mm 14mm; }
@media print {
    body { background: var(--print-paper); color: var(--print-ink); }
    .site-header, .site-footer, .subnav, .actions, .filter-bar, .pager, .segmented, .no-print, .flash-stack, .skip-link, .section-head a { display: none !important; }
    .container { width: 100%; }
    .page { padding: 0; }
    .card, .kpi, .table-wrap, .empty { box-shadow: none; border-color: var(--print-line); break-inside: avoid; }
    section { break-inside: avoid; margin-bottom: 10mm; }
    .print-head { display: flex; justify-content: space-between; gap: var(--s-4); margin-bottom: 8mm; padding-bottom: 4mm; border-bottom: 2px solid var(--print-ink); }
    .table { table-layout: fixed; }
    .table-wrap > .table { min-width: 0; }
    .table :is(th, td), .table .nowrap, .table .badge { white-space: normal; overflow-wrap: anywhere; }
    #content-coverage .coverage-matrix :is(th, td):nth-child(n) { min-width: 0; white-space: normal; }
    .table .url { max-width: none; white-space: normal; overflow-wrap: anywhere; }
    a { color: inherit; text-decoration: none; }
    .sticky-first th:first-child, .sticky-first td:first-child { position: static; }
    :is(.matrix, .coverage-matrix), :is(.matrix, .coverage-matrix) tbody { display: block; }
    :is(.matrix, .coverage-matrix) thead { display: none; }
    :is(.matrix, .coverage-matrix) tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); break-inside: avoid; }
    :is(.matrix, .coverage-matrix) tbody th { grid-column: 1 / -1; background: var(--paper); }
    :is(.matrix, .coverage-matrix) th, :is(.matrix, .coverage-matrix) td { white-space: normal; overflow-wrap: anywhere; text-align: left; }
    :is(.matrix, .coverage-matrix) td::before { content: attr(data-label); display: block; font-weight: 700; margin-bottom: .3em; }
    .brand-sections { display: none !important; }
    /* Print must expose closed-panel evidence with no JavaScript. Modern
       Chromium and Firefox hide closed panels through ::details-content, so
       this author rule re-opens that box; engines without the pseudo-element
       drop the unknown selector and still print each summary as a plain
       heading with every open panel intact. */
    :is(.brand-disclosure, .audit-detail, .sa-details, .sa-issue)::details-content { display: block; content-visibility: visible; }
    .brand-disclosure > .brand-disclosure-body { display: block; overflow: visible; content-visibility: visible; }
    :is(.sa-details > .sa-details-body, .sa-issue > .sa-issue-body) { display: grid; overflow: visible; content-visibility: visible; }
    .brand-page, .brand-disclosure .table-wrap, .sa-details .table-wrap { overflow: visible; }
    .brand-disclosure, .brand-empty, .brand-page .empty { box-shadow: none; border-color: var(--print-line); }
    .brand-disclosure { break-inside: auto; }
    .brand-disclosure > summary { list-style: none; cursor: default; break-after: avoid; border-bottom: 1px solid var(--print-line); }
    .brand-disclosure > summary::marker { content: ""; }
    .brand-disclosure > summary::-webkit-details-marker { display: none; }
    .brand-empty { break-inside: avoid; }
    .rank-bands, .aiv-chart { break-inside: avoid; }
    body { font-size: 11pt; }
}
/* Saved briefings print as documents, with every native disclosure expanded. */
@media print {
    .saved-report { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; font-size: 10pt; }
    .saved-report section { break-inside: auto; }
    .saved-report h2 { font-size: 16pt; break-after: avoid; }
    .report-cover h1 { font-size: 25pt; }
    .report-cover { padding-bottom: 14px; }
    .report-summary { margin-block: 18px; padding: 18px; break-inside: avoid; }
    .report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-metrics > div { display: block; }
    .report-editorial { grid-template-columns: 1fr 1fr; }
    .saved-report .report-question::details-content { display: block; content-visibility: visible; }
    .report-question > summary { grid-template-columns: minmax(0, 1fr) 100px 100px; padding: 10px 8px; break-after: avoid; background: var(--report-surface); }
    .report-question > summary::before { display: none; }
    .report-question-title { grid-column: auto; }
    .report-question-total { text-align: right; }
    .report-question-total > span { display: block; position: static; clip-path: none; width: auto; height: auto; margin: 0; }
    .report-question-total strong { white-space: nowrap; }
    .report-question-evidence { display: block; content-visibility: visible; padding: 8px; }
    .report-surface-table { break-inside: avoid; font-size: 9pt; }
    .report-surface-table th, .report-surface-table td { padding: 6px 8px; }
    .report-surface-table small { font-size: 8pt; }
    .report-surface-table .report-signal:is([data-tone="yes"], [data-tone="no"]) + small { display: none; }
    .report-cover, .report-work-group li { break-inside: avoid; }
    .report-questions { break-inside: auto; }
    .saved-report .report-question { break-inside: avoid; }
    .report-question-head { display: none; }
    .report-coverage > div { grid-template-columns: 130px 1fr; }
}

/* Portfolio sparkline: unmeasured windows are hollow markers, never a measured zero. */
.spark .gap { fill: none; stroke: var(--orange); stroke-width: 1.2; stroke-dasharray: 2 1.5; }

/* ---- wave1-honest ---- */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; margin-left: .35em; padding: .1em .45em; color: var(--on-warn); background: var(--warn); border-radius: 999px; font-size: var(--t-xs); font-weight: 700; line-height: 1.2; }
/* ---- wave1-explain ---- */
.aivt-explain table { min-width: 38rem; }
.aivt-explain h3 { margin-top: 1rem; }
.aivt-explain ul { padding-left: 1.25rem; }
.aivt-explain li { margin: .55rem 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .aivt-explain table { min-width: 34rem; } }

/* ---- wave1-brand ---- */
.brand-setup-page .form-card { max-width: 48rem; }
.brand-setup-preview { max-width: 58rem; }
.brand-setup-checklist { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; max-width: 58rem; counter-reset: setup-step; }
.brand-setup-row { background: var(--paper); border: 1px solid var(--line); border-radius: .6rem; padding: 1rem 1.2rem; counter-increment: setup-step; }
.brand-setup-row-head { align-items: baseline; display: flex; gap: .7rem; }
.brand-setup-row-head h2 { font-size: 1.05rem; margin: 0; }
.brand-setup-row-head::before { color: var(--muted); content: counter(setup-step); font-weight: 700; }
.brand-setup-state { border-radius: 999px; font-size: .75rem; font-weight: 700; padding: .2rem .55rem; text-transform: uppercase; }
.brand-setup-done .brand-setup-state { background: var(--setup-done-bg); color: var(--setup-done-ink); }
.brand-setup-next .brand-setup-state { background: var(--setup-next-bg); color: var(--setup-next-ink); }
.brand-setup-blocked .brand-setup-state { background: var(--setup-blocked-bg); color: var(--setup-blocked-ink); }
.brand-setup-row p { margin: .55rem 0 0; }
.brand-setup-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.5rem; }
/* ---- brand pause / resume (Setup Collection panel, Pause, Resume, Restore) ---- */
.collection-chip { display: inline-flex; align-items: center; gap: var(--s-1); border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; vertical-align: middle; }
.collection-chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.collection-chip.is-on { background: var(--good-bg); color: var(--good); }
.collection-chip.is-paused { background: var(--warn-bg); color: var(--warn); }
.collection-chip.is-archived { background: var(--surface-2); color: var(--muted); }
.page-head h1 .collection-chip { margin-left: var(--s-2); }
.collection-panel { max-width: 58rem; margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.collection-panel.is-paused { border-color: var(--warn); }
.collection-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.collection-panel-head h2 { margin: 0; font-size: 1.15rem; }
.collection-panel-head p { margin: var(--s-1) 0 0; color: var(--ink-2); }
.collection-panel .btn { white-space: nowrap; }
.collection-feeds { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.collection-feeds li { display: grid; grid-template-columns: 12rem 8rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.collection-feeds strong { font-weight: 600; color: var(--ink); }
.collection-feeds li > span:last-child { color: var(--ink-2); }
.collection-state { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; }
.collection-state.is-on { color: var(--good); }
.collection-state.is-stop, .collection-state.is-held { color: var(--warn); }
.collection-state.is-keep { color: var(--ink-2); }
.collection-state.is-none { color: var(--muted); }
.collection-columns { max-width: 72rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-4) 0 var(--s-5); }
.collection-col { min-width: 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.collection-col.is-stop { border-top: 3px solid var(--warn); }
.collection-col.is-keep, .collection-col.is-back { border-top: 3px solid var(--good); }
.collection-col h2 { margin: 0 0 var(--s-1); font-size: 1.05rem; }
.collection-col > p { margin: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--t-sm); }
.collection-col ul { margin: 0; padding: 0; list-style: none; }
.collection-col li { padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); }
.collection-col li strong { display: block; color: var(--ink); font-weight: 600; }
.collection-confirm { max-width: 640px; }
.collection-confirm.collection-restore { max-width: 58rem; }
.collection-confirm .field { margin-bottom: var(--s-3); }
.collection-confirm textarea { width: 100%; min-height: 4.5rem; }
.collection-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-3); }
.collection-cost { margin: var(--s-3) 0; }
.collection-cost .table th, .collection-cost .table td, .collection-cost .table thead th,
.archive-review .table th, .archive-review .table td, .archive-review .table thead th { white-space: normal; }
.collection-cost.table-wrap > .table, .archive-review.table-wrap > .table { min-width: 0; }
.collection-callout + .section { margin-top: var(--s-4); }
.collection-cost td.is-over { color: var(--bad); font-weight: 700; }
.collection-cost td.is-ok { color: var(--good); font-weight: 600; }
.collection-callout { max-width: 58rem; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--good); background: var(--surface); border-radius: var(--radius); }
.collection-callout p { margin: 0; }
.collection-options { margin: var(--s-3) 0; padding: 0; border: 0; }
.collection-options legend { font-weight: 600; margin-bottom: var(--s-2); }
.collection-option { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); font-weight: 400; }
.collection-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.collection-option strong { display: block; color: var(--ink); }
.collection-option span { color: var(--ink-2); }
.collection-option-note { padding: var(--s-3) 0 0; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.btn:disabled, .btn[disabled] { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); border-color: var(--line-2); cursor: not-allowed; }
@media (max-width: 760px) {
    .collection-columns { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
    .collection-col { padding: var(--s-3) var(--s-4); }
    .collection-panel { padding: var(--s-3) var(--s-4); }
    .collection-panel-head .btn { width: 100%; justify-content: center; }
    .collection-feeds li { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-2); }
    .collection-feeds li > span:last-child { grid-column: 1 / -1; }
    .collection-cost thead { display: none; }
    .collection-cost table, .collection-cost tbody, .collection-cost tr, .collection-cost th, .collection-cost td { display: block; width: auto; }
    .collection-cost tr { padding: var(--s-2) 0; border-top: 1px solid var(--line); }
    .collection-cost th, .collection-cost td { border: 0; padding: 2px var(--s-3); }
    .collection-cost td::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 500; }
    .archive-review thead { display: none; }
    .archive-review table, .archive-review tbody, .archive-review tr, .archive-review th, .archive-review td { display: block; width: auto; }
    .archive-review tr { padding: var(--s-2) 0; border-top: 1px solid var(--line); }
    .archive-review tr:first-child { border-top: 0; }
    .archive-review th, .archive-review td { border: 0; padding: 2px var(--s-3); }
}
/* ---- wave1-bulk ---- */
.tracking-headroom { padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tracking-headroom h2 { margin-top: 0; }
.tracking-headroom p { max-width: 75ch; }
.tracking-headroom .alert { margin-bottom: 0; }
.tracking-headroom .alert-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.tracking-safety { color: var(--good); font-weight: 700; }
/* ---- wave2-airuns ---- */
.aivt-run-status { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.aivt-run-status h3 { margin-top: 0; }
.ai-collections-page .table-wrap { overflow-x: auto; }
.ai-collections-page table { min-width: 78rem; }
.ai-collections-page .badge { white-space: nowrap; }
.ai-collections-page td, .ai-collections-page th { vertical-align: top; }
.ai-cadence-enrol { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.ai-tools-grid td.num, .ai-tools-grid th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-collections-page .ai-tools-grid td, .ai-collections-page .ai-tools-grid th { vertical-align: middle; }
.ai-tools-grid tbody th small.ai-tools-hold { display: block; font-weight: 400; }
.ai-tools-grid tfoot th, .ai-tools-grid tfoot td { font-weight: 600; white-space: nowrap; }
.ai-tools-bulk { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; min-width: 0; max-width: 100%; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); }
.ai-tools-bulk legend { font-weight: 700; padding: 0 var(--s-1); }
.ai-tools-bulk label { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; min-width: 0; margin: 0; }
.ai-tools-bulk input[type="radio"] { width: auto; margin: 0; }
/* Firefox gives a fieldset min-content width: the long tool names in the select pushed it 5px past a 390px page (#702 proof). */
.ai-tools-bulk select { width: auto; min-width: 0; max-width: 100%; }
.ai-tools-review-actions + section { margin-top: var(--s-5); }
.ai-tools-bulk .meta { flex-basis: 100%; margin: 0; }
.ai-tools-review-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }
/* ---- wave2-identity ---- */
.brand-identity-page, .brand-archive-page { max-width: 1000px; }
.brand-identity-preview, .archive-preview { margin-top: var(--s-5); }
.brand-archived-banner { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.brand-archived-banner form { margin: 0; }

/* Intro ------------------------------------------------------------------
   The public introduction at / (app/views/home.php, anonymous visitors only):
   five short looping demos of the product over a static dotted backdrop,
   with illustrative example data. Every rule is scoped to .intro-reel. Hiding
   and moving need html[data-motion] (motion.js: reduced motion off and
   IntersectionObserver present) and .intro-reel[data-intro-ready] (intro.js
   ran), and sit under @media screen, so no-JS, reduced motion and print show
   each demo's finished state. intro.js only sets state: data-seen on reveal
   groups, data-live/data-step/data-at on [data-scene], --chars/--after on
   typed lines, --sy on the root; this CSS does the moving. */
body.is-home:has(.intro-reel) { background: var(--intro-paper); }
.is-home:has(.intro-reel) .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--intro-glass);
    backdrop-filter: saturate(1.4) blur(12px);
}
.is-home:has(.intro-reel) .site-footer { position: relative; z-index: 1; }
.intro-reel {
    --intro-gutter: clamp(1rem, 4vw, 2.5rem);
    --intro-rail: 0px;
    --intro-side: max(var(--intro-gutter), var(--intro-rail));
    --intro-stage-max: 60rem;
    --intro-scene-pad: clamp(5rem, 12vh, 9rem);
    overflow-x: clip;
}
/* The canvas is drawn once by intro.js and sits behind the reel's content. */
.intro-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.intro-probe { position: absolute; width: 0; height: 0; overflow: hidden; }
.intro-content { position: relative; z-index: 1; }
@media (min-width: 1100px) {
    .intro-reel { --intro-rail: 12.5rem; }
    .intro-reel .section-index {
        display: block;
        position: fixed;
        top: 50%;
        right: clamp(.75rem, 1.4vw, 1.5rem);
        z-index: 40;
        padding: var(--s-2);
        background: var(--intro-glass);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        transform: translateY(-50%);
        backdrop-filter: blur(10px);
    }
    .intro-reel .section-index ol { position: static; }
}

/* Type: mono kicker, tight display headline, gradient payoff line. */
.intro-reel .kicker {
    display: inline-flex;
    align-items: baseline;
    gap: .6em;
    margin: 0 0 var(--s-3);
    color: var(--intro-kicker);
    font: 500 var(--t-xs)/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.intro-reel .kicker b { color: var(--kicker-num); font-weight: 500; }
.intro-reel .display { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
.intro-reel .display .payoff { display: block; }
.intro-reel .payoff { color: var(--intro-payoff-a); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .intro-reel .payoff {
        color: var(--m-clear);
        background: linear-gradient(100deg, var(--intro-payoff-a) 8%, var(--intro-payoff-b) 92%);
        -webkit-background-clip: text;
        background-clip: text;
    }
}
.intro-reel .caret {
    display: inline-block;
    width: .55em;
    height: 1.1em;
    vertical-align: text-bottom;
    background: var(--ink);
}

/* First-view reveal: data-reveal="N" staggers the Nth child of a group. */
.intro-reel [data-reveal] {
    transition:
        opacity var(--intro-dur-reveal) var(--m-ease-out),
        transform var(--intro-dur-reveal-move) var(--m-ease-out),
        filter var(--intro-dur-reveal) var(--m-ease-out);
}
.intro-reel [data-reveal="1"] { transition-delay: var(--intro-stagger); }
.intro-reel [data-reveal="2"] { transition-delay: calc(2 * var(--intro-stagger)); }
.intro-reel [data-reveal="3"] { transition-delay: calc(3 * var(--intro-stagger)); }
.intro-reel [data-reveal="4"] { transition-delay: calc(4 * var(--intro-stagger)); }
.intro-reel [data-reveal="5"] { transition-delay: calc(5 * var(--intro-stagger)); }

.intro-reel :is(section, article)[id] { scroll-margin-top: 4.5rem; }
.intro-reel .hero,
.intro-reel .scene,
.intro-reel .outro {
    width: min(var(--intro-stage-max), 100% - 2 * var(--intro-side));
    margin-inline: auto;
    text-align: center;
}
.intro-reel .hero { padding-block: clamp(3.5rem, 9vh, 6.5rem) clamp(4rem, 9vh, 6rem); }
.intro-reel .scene { padding-block: var(--intro-scene-pad); }
.intro-reel .outro { padding-block: var(--intro-scene-pad) clamp(6rem, 14vh, 10rem); }
.intro-reel :is(.hero, .scene) .kicker { display: flex; justify-content: center; }
.intro-reel :is(.hero, .scene, .outro) > :is(.kicker, .display, .ctas, .hero-note) { max-width: 46rem; margin-inline: auto; }
.intro-reel .hero .display { font-size: clamp(2.75rem, 6vw, 5.25rem); }
.intro-reel :is(.scene, .outro) .display { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.intro-reel .lede {
    max-width: 60ch;
    margin: var(--s-5) auto 0;
    color: var(--muted);
    font-size: var(--t-md);
    line-height: 1.55;
}
.intro-reel .hero-note { margin-top: var(--s-4); color: var(--muted); font-size: var(--t-sm); }
/* Reel pause toggle (B-102): a quiet text button; intro.js shows it only when the reel can move. */
.intro-reel .intro-pause { margin: var(--s-3) 0 0; text-align: center; }
.intro-reel .intro-pause .link-button { min-height: 44px; color: var(--muted); font-size: var(--t-sm); text-decoration: underline; text-underline-offset: .15em; }
.intro-reel .intro-pause .link-button[aria-pressed="true"] { color: var(--ink); }
.intro-reel .footnote { margin: var(--s-5) 0 0; color: var(--muted); font-size: var(--t-sm); }
.intro-reel .ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
}
@media (max-width: 520px) {
    .intro-reel .ctas > * { flex: 1 1 100%; }
}
.intro-reel .hero-reveal { margin-top: clamp(2.5rem, 6vh, 4rem); }
.intro-reel .hero-stage { max-width: 52rem; margin-inline: auto; }
.intro-reel .stage-wrap { margin-top: clamp(2.5rem, 6vh, 4rem); }
.intro-reel .stage {
    position: relative;
    overflow: clip;
    margin-inline: auto;
    padding: clamp(1rem, 2.4vw, 1.75rem);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--intro-shadow), var(--intro-rim);
}
.intro-reel .stage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
    margin: 0 0 var(--s-4);
}
.intro-reel .label-chip {
    display: inline-flex;
    padding: .2rem .6rem;
    color: var(--neutral);
    background: var(--neutral-bg);
    border-radius: 999px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.35;
}
.intro-reel .stage-title,
.intro-reel .mono-label,
.intro-reel .run-label {
    margin: 0;
    color: var(--muted);
    font: 500 var(--t-xs)/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.intro-reel .ico { flex: none; width: 1em; height: 1em; }
.intro-reel .pill {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.3;
}
.intro-reel .pill-lg { padding: .4rem .85rem; font-size: var(--t-sm); }
.intro-reel .pill-good { color: var(--good); background: var(--good-bg); }
.intro-reel .pill-warn { color: var(--warn); background: var(--warn-bg); }
.intro-reel .pill-bad { color: var(--bad); background: var(--bad-bg); }
.intro-reel .pill-neutral { color: var(--neutral); background: var(--neutral-bg); }
.intro-reel .chip {
    display: inline-flex;
    gap: .15em;
    padding: .1rem .45rem;
    border-radius: 6px;
    font: 600 var(--t-sm)/1.3 var(--mono);
}
.intro-reel .chip-warn { color: var(--warn); background: var(--warn-bg); }
.intro-reel .num { font: 600 var(--t-base)/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.intro-reel .run { margin-bottom: var(--s-4); }
.intro-reel .run-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
    margin-bottom: var(--s-2);
}
.intro-reel .status {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    color: var(--ink-2);
    font-size: var(--t-sm);
}
.intro-reel .ico-good { color: var(--good); }
.intro-reel .progress { height: 6px; overflow: hidden; background: var(--surface-2); border-radius: 999px; }
.intro-reel .progress-fill {
    display: block;
    height: 100%;
    background: var(--green);
    border-radius: inherit;
    transform-origin: left center;
}
.intro-reel .swap { display: inline-grid; align-items: center; justify-items: start; max-width: 100%; }
.intro-reel .swap > * {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--intro-dur-modal) var(--m-ease-out), visibility var(--intro-dur-modal);
}
.intro-reel .report-title { margin: var(--s-3) 0 var(--s-1); font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.02em; }
.intro-reel .report-meta { margin: 0 0 var(--s-2); color: var(--muted); font-size: var(--t-sm); }
.intro-reel .report-h {
    margin: var(--s-5) 0 var(--s-2);
    color: var(--muted);
    font: 600 var(--t-xs)/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.intro-reel .report-list { display: grid; gap: var(--s-2); margin: 0; padding-left: 1.2rem; }
.intro-reel .report-work { padding-left: 0; list-style: none; }
.intro-reel .report-work .pill { margin-right: .35rem; vertical-align: .08em; }
.intro-reel .report-note {
    margin: var(--s-5) 0 0;
    padding-top: var(--s-4);
    color: var(--muted);
    border-top: 1px dashed var(--line-2);
    font-size: var(--t-sm);
}
.intro-reel .rank-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.intro-reel .rank-table :is(th, td) {
    padding: .7rem .6rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}
.intro-reel .rank-table thead th {
    color: var(--muted);
    font: 500 var(--t-xs)/1.3 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.intro-reel .rank-table tbody th { color: var(--ink); font-weight: 600; }
.intro-reel .rank-table tbody tr:last-child > * { border-bottom: 0; }
.intro-reel .rank-table tbody tr:nth-child(2) { --r: 1; }
.intro-reel .rank-table tbody tr:nth-child(3) { --r: 2; }
.intro-reel .rank-table tbody tr:nth-child(4) { --r: 3; }
.intro-reel .rank-table tbody tr:nth-child(5) { --r: 4; }
.intro-reel .rank-table td:nth-of-type(2) { --c: 1; }
.intro-reel .rank-table td:nth-of-type(3) { --c: 2; }
.intro-reel .rank-table td:nth-of-type(4) { --c: 3; }
.intro-reel .cell { display: inline-grid; max-width: 100%; }
.intro-reel .cell > * { grid-area: 1 / 1; }
.intro-reel .ph {
    align-self: center;
    justify-self: start;
    width: 1.8rem;
    height: .8rem;
    visibility: hidden;
    background: var(--line);
    border-radius: 4px;
}
.intro-reel .rank-table td:last-child .ph { width: 7.5rem; }
.intro-reel .tp { display: grid; gap: 2px; }
.intro-reel .tp-url { color: var(--ink); font: 500 var(--t-sm)/1.3 var(--mono); overflow-wrap: anywhere; }
.intro-reel .tp-note { color: var(--muted); font-size: var(--t-xs); }
.intro-reel .tp-note.is-warn { color: var(--warn); font-weight: 600; }
@media (max-width: 760px) {
    .intro-reel .rank-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .intro-reel .rank-table,
    .intro-reel .rank-table tbody,
    .intro-reel .rank-table tr,
    .intro-reel .rank-table th,
    .intro-reel .rank-table td { display: block; }
    .intro-reel .rank-table tbody { display: grid; gap: var(--s-3); }
    .intro-reel .rank-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-3);
        padding: var(--s-4);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }
    .intro-reel .rank-table tbody :is(th, td) { padding: 0; border: 0; }
    .intro-reel .rank-table tbody th { grid-column: 1 / -1; font-size: var(--t-base); }
    .intro-reel .rank-table td:last-child { grid-column: 1 / -1; }
    .intro-reel .rank-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--muted);
        font: 500 var(--t-xs)/1.3 var(--mono);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
}
.intro-reel .ai-body { display: grid; gap: var(--s-4); }
.intro-reel .ai-question {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-self: start;
    gap: .3rem .6rem;
    margin: 0;
    padding: .6rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 600;
}
.intro-reel .ai-answer { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); }
.intro-reel .ai-answer-text {
    position: relative;
    min-height: 3.2em;
    margin: var(--s-2) 0 0;
    font-size: var(--t-md);
    line-height: 1.6;
}
.intro-reel .answer-line { display: block; width: fit-content; max-width: 100%; }
.intro-reel .ai-answer-text .caret { position: absolute; top: .25em; left: 0; visibility: hidden; }
.intro-reel .brand-mention {
    padding: 0 .15em;
    color: inherit;
    background: var(--intro-powder);
    border-radius: 4px;
    font-weight: 600;
    transition: background-color var(--intro-dur-sheet) var(--m-ease-out);
}
.intro-reel .ai-cites {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.intro-reel .cite {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    max-width: 100%;
    padding: .35rem .75rem;
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: var(--t-sm);
}
.intro-reel .cite-src { font-family: var(--mono); overflow-wrap: anywhere; }
.intro-reel .ai-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}
.intro-reel .tally {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    color: var(--ink-2);
    font-size: var(--t-sm);
    font-weight: 600;
}
.intro-reel .tally-dots { display: inline-flex; gap: 4px; }
.intro-reel .tally-dots span { width: .6rem; height: .6rem; border: 1px solid var(--line-2); border-radius: 50%; }
.intro-reel .tally-dots .on { background: var(--green); border-color: var(--green); }
.intro-reel .ai-compare { margin: 0; }
@media (min-width: 761px) {
    .intro-reel .answer-line[data-type] { white-space: nowrap; }
}
.intro-reel .crawl-count {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    color: var(--muted);
    font-size: var(--t-sm);
}
.intro-reel .reel {
    display: inline-block;
    height: 1.25em;
    overflow: hidden;
    color: var(--ink);
    font: 700 var(--t-lg)/1.25 var(--mono);
    font-variant-numeric: tabular-nums;
}
.intro-reel .reel-track { display: flex; flex-direction: column; transform: translateY(-6.25em); }
.intro-reel .reel-track > span { display: block; height: 1.25em; text-align: right; }
.intro-reel .issues {
    display: grid;
    gap: var(--s-2);
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
}
.intro-reel .issue {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    padding: .75rem var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.intro-reel .issue .pill { justify-self: start; }
.intro-reel .issue-name { font-weight: 600; }
.intro-reel .issue-eg { color: var(--muted); font: 500 var(--t-xs)/1.4 var(--mono); overflow-wrap: anywhere; }
.intro-reel .crawl-badge { margin: var(--s-4) 0 0; }
@media (max-width: 760px) {
    .intro-reel .issue { grid-template-columns: auto minmax(0, 1fr); }
    .intro-reel .issue-eg { grid-column: 1 / -1; }
}
.intro-reel .avatar {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--green-ink);
    background: var(--intro-powder);
    border-radius: 50%;
    font-size: var(--t-xs);
    font-weight: 700;
}
.intro-reel .r-sig,
.intro-reel .r-done,
.intro-reel .r-next { --d: 90ms; }
.intro-reel .r-done:nth-child(2),
.intro-reel .r-next:nth-child(2) { --d: 240ms; }
.intro-reel .cite:nth-child(2) { --d: 180ms; }
@keyframes intro-shimmer { 50% { opacity: .45; } }
@keyframes intro-reel { from { transform: none; } to { transform: translateY(-6.25em); } }
/* The app's .chip is a fixed-size count chip; the reel's chips size to text. */
.intro-reel .chip { min-width: 0; height: auto; place-items: initial; }
/* The ghost call to action is the app's .home-cta-secondary. */
.intro-reel .home-cta-secondary { text-decoration: none; }
/* Native FAQ disclosures: the .home-faq look in a narrow, left-aligned column. */
.intro-reel .home-faq { margin-top: 0; }
.intro-reel .intro-faq { max-width: 46rem; margin: var(--s-5) auto 0; text-align: left; }
/* Without the scene clock, each exclusive state shows its final member. */
.intro-reel:not([data-intro-ready]) .swap > .is-final,
:root:not([data-motion]) .intro-reel .swap > .is-final { visibility: visible; opacity: 1; }
@keyframes intro-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes intro-blink { 50% { opacity: 0; } }

/* Scene motion: only while motion is allowed and intro.js runs the reel. */
@media screen {
    [data-motion] .intro-reel[data-intro-ready] [data-reveal-group]:not([data-seen]) [data-reveal] {
        opacity: 0;
        transform: translateY(var(--intro-shift));
        filter: blur(var(--intro-blur));
    }
    /* Off-screen scenes pause; reduced motion never reaches this gate. */
    [data-motion] .intro-reel[data-intro-ready] [data-scene]:not([data-live]) *,
    [data-motion] .intro-reel[data-intro-ready] [data-scene]:not([data-live]) *::before,
    [data-motion] .intro-reel[data-intro-ready] [data-scene]:not([data-live]) *::after { animation-play-state: paused !important; }
    [data-motion] .intro-reel[data-intro-ready] .intro-backdrop { transform: translate3d(0, calc(var(--intro-sy, 0) * -18px), 0); }
    /* Scroll-linked lift: the hero stage settles flat as the page scrolls. */
    [data-motion] .intro-reel[data-intro-ready] .lift {
        --lift: clamp(0, calc(var(--intro-sy, 0) * 1.6), 1);
        transform: perspective(1400px) rotateX(calc((1 - var(--lift)) * 12deg)) scale(calc(.94 + var(--lift) * .06));
        transform-origin: 50% 0;
    }
    [data-motion] .intro-reel[data-intro-ready] .caret { animation: intro-blink 1s steps(1) infinite; }
    [data-motion] .intro-reel[data-intro-ready] :is(
        .report-h,
        .r-sig,
        .r-done,
        .r-next,
        .cite,
        .tally,
        .ai-compare,
        .issue,
        .crawl-badge
    ) {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity var(--intro-dur-pop) var(--m-ease-out), transform var(--intro-dur-pop) var(--m-ease-out);
    }
    [data-motion] .intro-reel[data-intro-ready] :is(.crawl-badge, .ai-compare) { transform: scale(.92); transform-origin: left center; }
    [data-motion] .intro-reel[data-intro-ready] :is(
        .report-scene[data-at~="1"] :is(.r-h-changed, .r-sig:nth-child(1)),
        .report-scene[data-at~="2"] .r-sig:nth-child(2),
        .report-scene[data-at~="3"] .r-sig:nth-child(3),
        .report-scene[data-at~="4"] :is(.r-h-done, .r-done),
        .report-scene[data-at~="5"] :is(.r-h-next, .r-next),
        .ai-scene[data-at~="3"] .cite,
        .ai-scene[data-at~="4"] .tally,
        .ai-scene[data-at~="5"] .ai-compare,
        .audit-scene[data-at~="2"] .issue:nth-child(1),
        .audit-scene[data-at~="3"] .issue:nth-child(2),
        .audit-scene[data-at~="4"] .issue:nth-child(3),
        .audit-scene[data-at~="5"] .crawl-badge
    ) {
        opacity: 1;
        transform: none;
        transition: opacity var(--intro-dur-sheet) var(--m-ease-out), transform var(--intro-dur-sheet) var(--intro-spring);
        transition-delay: var(--d, 0ms);
    }
    [data-motion] .intro-reel[data-intro-ready] .report-scene[data-step="4"] .r-pill-verified { animation: intro-pop var(--intro-dur-sheet) var(--intro-spring) 260ms both; }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene .progress-fill { transform: scaleX(0); transition: transform var(--intro-dur-modal) var(--m-ease-out); }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene[data-at~="1"] .progress-fill { transform: scaleX(.6); transition: transform 2400ms var(--intro-ease-in-out); }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene[data-at~="2"] .progress-fill { transform: scaleX(.9); }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene[data-at~="3"] .progress-fill { transform: none; transition-duration: var(--intro-dur-sheet); }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene .ph { visibility: visible; transition: opacity var(--intro-dur-pop) var(--m-ease-out); }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene[data-step="1"] .ph { animation: intro-shimmer 1.2s var(--intro-ease-in-out) infinite; }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene .val {
        opacity: 0;
        transform: translateY(.5em);
        transition: opacity var(--intro-dur-pop) var(--m-ease-out), transform var(--intro-dur-pop) var(--m-ease-out);
    }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene :is(.pill, .chip).val { transform: scale(.85); }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene[data-at~="2"] .val {
        opacity: 1;
        transform: none;
        transition: opacity var(--intro-dur-sheet) var(--m-ease-out), transform var(--intro-dur-sheet) var(--intro-spring);
        transition-delay: calc(var(--r, 0) * 110ms + var(--c, 0) * 70ms);
    }
    [data-motion] .intro-reel[data-intro-ready] .rank-scene[data-at~="2"] .ph { opacity: 0; transition-delay: calc(var(--r, 0) * 110ms + var(--c, 0) * 70ms); }
    [data-motion] .intro-reel[data-intro-ready] .ai-scene[data-step="0"] .ai-question { animation: intro-pop var(--intro-dur-sheet) var(--intro-spring) 150ms both; }
    [data-motion] .intro-reel[data-intro-ready] .ai-scene[data-step="0"] .caret { visibility: visible; }
    [data-motion] .intro-reel[data-intro-ready] .ai-scene .answer-line { clip-path: inset(0 100% 0 0); }
    [data-motion] .intro-reel[data-intro-ready] .ai-scene[data-at~="1"] .answer-line {
        clip-path: inset(0 0 0 0);
        animation: intro-type calc(var(--chars) * 22ms) steps(var(--chars), end) calc(var(--after, 0) * 22ms) both;
    }
    [data-motion] .intro-reel[data-intro-ready] .ai-scene:not([data-at~="2"]) .brand-mention { background-color: var(--m-clear); }
    @media (max-width: 760px) {
        [data-motion] .intro-reel[data-intro-ready] .ai-scene .answer-line { clip-path: none; opacity: 0; }
        [data-motion] .intro-reel[data-intro-ready] .ai-scene[data-at~="1"] .answer-line {
            clip-path: none;
            opacity: 1;
            animation: intro-rise var(--intro-dur-reveal) var(--m-ease-out) both;
        }
        [data-motion] .intro-reel[data-intro-ready] .ai-scene[data-at~="1"] .answer-line + .answer-line { animation-delay: 900ms; }
    }
    [data-motion] .intro-reel[data-intro-ready] .audit-scene .progress-fill { transform: scaleX(0); transition: transform var(--intro-dur-modal) var(--m-ease-out); }
    [data-motion] .intro-reel[data-intro-ready] .audit-scene[data-at~="1"] .progress-fill { transform: none; transition: transform 2400ms var(--intro-ease-in-out); }
    [data-motion] .intro-reel[data-intro-ready] .audit-scene:not([data-at~="1"]) .reel-track { transform: none; }
    [data-motion] .intro-reel[data-intro-ready] .audit-scene[data-at~="1"] .reel-track { animation: intro-reel 2400ms steps(5, end) both; }
}

@media print {
    .intro-backdrop, .intro-reel .section-index { display: none !important; }
    .intro-reel .payoff { color: var(--print-ink); background: none; }
    .intro-reel .swap > .is-final { visibility: visible; opacity: 1; }
}

/* Shell (Tern R2b) ----------------------------------------------------------
   Desktop: the rail carries the logo and menu icons and the main column opens
   with the top bar. Phones (<=800px) keep the compact site header, the rail
   becomes one drop-down, and the top bar keeps only the breadcrumb and pill. */
.rail-logo, .rail-product { display: none; }
.nav-icon { width: 18px; height: 18px; flex: none; }
.workspace-links > a, .workspace-submenu > summary > span:first-child { gap: 11px; }
.workspace-submenu > summary > span:first-child { display: inline-flex; align-items: center; }
.menu-brand { display: none; }
.menu-switch { display: none !important; }
.rail-foot { display: grid; gap: 14px; margin-top: auto; }
.rail-foot .workspace-scope-note { margin: 0; }
.rail-help > summary { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink-3); font-size: .875rem; font-weight: 500; list-style: none; cursor: pointer; }
.rail-help > summary::-webkit-details-marker { display: none; }
.rail-help > summary:hover { color: var(--ink); background: var(--surface-2); }
.rail-help > p { margin: 4px 12px 0; color: var(--ink-3); font-size: .75rem; line-height: 1.5; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.topbar-title { flex: 1 1 auto; min-width: 0; }
.topbar-crumb ol { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; line-height: 1.35; }
.topbar-crumb li { overflow-wrap: anywhere; }
.topbar-crumb li + li::before { content: "/"; margin-right: 6px; color: var(--ink-3); font-weight: 500; }
.topbar-subline { margin: 2px 0 0; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.topbar-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 11px; border-radius: 999px; background: var(--im-butter); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.topbar-account { position: relative; }
.topbar-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-ink); font-size: 12px; font-weight: 700; list-style: none; cursor: pointer; }
.topbar-avatar::-webkit-details-marker { display: none; }
.topbar-account-panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: grid; gap: 4px; min-width: 220px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.topbar-account-panel > a, .topbar-account-panel .link-button { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .875rem; }
.topbar-account-panel > a:hover, .topbar-account-panel .link-button:hover { background: var(--surface-2); }
.topbar-account-panel > a[aria-current] { background: var(--mint); font-weight: 600; }
.topbar-account-panel .meta { margin: 0; padding: 4px 10px; overflow-wrap: anywhere; }
/* Header colour theme switch (Auto / Light / Dark), in both account menus. */
.theme-switch { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--line); }
.theme-switch fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.theme-switch legend { margin: 0 0 6px; padding: 0; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; }
.theme-switch-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.theme-switch-options label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: 0 6px; border-radius: calc(var(--radius-sm) - 2px); color: var(--ink-2); cursor: pointer; font-size: var(--t-sm); font-weight: 600; }
.theme-switch-options label:hover { color: var(--ink); }
.theme-switch-options label:has(input:checked) { color: var(--on-brand); background: var(--green); box-shadow: none; }
.theme-switch-options label:has(input:focus-visible) { outline: 2px solid var(--orange-ink); outline-offset: 1px; }
.theme-switch-options input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme-switch .link-button { margin-top: 4px; }
@media (min-width: 801px) {
    .has-topbar > .site-header { display: none; }
    .has-topbar .workspace-rail { height: 100dvh; gap: 22px; }
    .has-topbar .rail-logo { display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 8px 18px; border-bottom: 1px solid var(--line); color: var(--rail-wordmark); font-size: 19px; font-weight: 500; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; }
    .has-topbar .rail-logo svg { display: block; width: 22px; height: 22px; flex: none; color: var(--rail-logo-mark); }
    .has-topbar .rail-product { display: block; margin: -12px 8px 0; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
    .has-topbar .workspace-scope .eyebrow { display: none; }
    /* The layout's 32px column gap sits left of main, its padding right of it; the bar spans both. */
    .topbar { position: sticky; top: 0; z-index: 30; min-height: var(--topbar-h); margin: 0 -32px 0 -32px; padding: 14px 32px; border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(8px); }
    /* Section tabs stick just below the bar, not under it (.brand-sections also carries .subnav). */
    .has-topbar .subnav { top: var(--topbar-h); }
    /* Focus Not Obscured (B-105): focus and anchor scrolling stop below the sticky bar. The bar
       offset now comes from scroll-padding, so the per-target margins that stood in for it reset
       and targets land where they did before (just below the bar); .aivs-page in ai-shared.css
       keeps only var(--s-5). Content review controls keep their 5rem/8rem focus margins.
       Both sit behind one :has() test so a browser without it keeps the old margins. */
    @supports selector(:has(*)) {
        html:has(> body.has-topbar) { scroll-padding-top: calc(var(--topbar-h) + var(--s-2)); }
        /* A page with section tabs clears them too: they stick just below the bar. */
        html:has(> body.has-topbar .subnav) { scroll-padding-top: calc(var(--topbar-h) + var(--subnav-h) + var(--s-2)); }
        .has-topbar :is(.site-audit, #audit-issues, #audit-progress, #crawl-details, .sa-issue, #audit-overview, #audit-trend, #audit-top-issues, #audit-coverage-summary, #audit-performance-summary),
        .has-topbar .brand-page section[id],
        .has-topbar .account-page h2[id],
        .has-topbar .content-review-page :is(section[id], article[id]) { scroll-margin-top: 0; }
    }
}
@media (max-width: 800px) {
    .workspace-rail > .rail-foot, .workspace-rail > .workspace-scope { display: none; }
    .menu-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: .8125rem; font-weight: 600; }
    .menu-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .workspace-menu > summary > .menu-brand { font-size: .8125rem; color: var(--ink); }
    .workspace-menu > .workspace-links { grid-template-columns: minmax(0, 1fr); }
    .workspace-menu .workspace-links > a { justify-content: flex-start; text-align: left; }
    .workspace-menu .workspace-submenu > summary { justify-content: space-between; text-align: left; }
    .menu-switch { display: flex !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; }
    .topbar { padding: 12px 0 0; }
    .topbar-subline, .topbar-account { display: none; }
}
@media (max-width: 620px) {
    .workspace-menu > .workspace-links { grid-template-columns: minmax(0, 1fr); }
}

/* Brand hero (Tern R2b) -----------------------------------------------------
   Staff brand Overview and staff full report: powder average-position card
   with a round chart, then three pastel number cards. */
.brand-standing > .section-head { margin-bottom: 18px; }
.brand-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
    gap: 26px;
    overflow: hidden;
    padding: 30px;
    border-radius: var(--radius-lg);
    background: var(--im-powder);
    color: var(--ink);
}
.brand-hero::after { content: ""; position: absolute; right: -84px; top: -104px; width: 300px; height: 300px; border-radius: 50%; background: var(--hero-glow); opacity: .14; pointer-events: none; }
.brand-hero-copy, .brand-score { position: relative; z-index: 1; }
.brand-hero-copy:only-child { grid-column: 1 / -1; }
.brand-hero-eyebrow { margin: 0; color: var(--on-pastel-accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.brand-hero-title { max-width: 590px; margin: 12px 0 0; font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; }
.brand-hero-text { max-width: 620px; margin: 13px 0 0; color: var(--on-pastel-ink); font-size: 15px; line-height: 1.55; }
.brand-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.brand-proof li { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--hero-chip-bg); color: var(--ink); font-size: 12px; }
.brand-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; margin: 0; }
.brand-ring { position: relative; width: 184px; height: 184px; }
.brand-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.brand-ring-track { fill: none; stroke: var(--hero-ring-track); stroke-width: 9; }
.brand-ring-value { fill: none; stroke: var(--hero-ring-value); stroke-width: 9; stroke-linecap: round; }
.brand-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.brand-ring-label strong { font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.brand-ring-label span { margin-top: 7px; color: var(--on-pastel-ink); font-size: 12px; }
.brand-score figcaption { color: var(--on-pastel-ink); font-size: 12px; text-align: center; }
.brand-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; }
.brand-metric { min-width: 0; min-height: 170px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.brand-metric p { margin: 0; }
.pastel-powder { background: var(--im-powder); }
.pastel-sky { background: var(--im-sky); }
.pastel-sage { background: var(--im-sage); }
.brand-metric-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand-metric-head h3 { margin: 0; color: var(--on-pastel-ink); font-size: 13px; font-weight: 600; line-height: 1.3; }
.brand-icon-box { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); background: var(--hero-icon-box); color: var(--ink); }
.brand-icon-box svg { width: 18px; height: 18px; }
.brand-metric .brand-metric-value { margin-top: 18px; font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.brand-metric .brand-hint { margin-top: 10px; color: var(--on-pastel-ink); font-size: 13px; line-height: 1.45; }
#overview .brand-metrics + .kpis { margin-top: 18px; }
@media (max-width: 800px) {
    .brand-hero { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    .brand-score { min-height: 210px; }
    .brand-metrics { grid-template-columns: minmax(0, 1fr); }
    .brand-metric { min-height: 0; }
}

/* Overview glance (staff Overview tab) -------------------
   Three staff tiles above the shared client answer. Token colours only; the
   sparkline is SVG classes, never style="". */
.ovg { margin: 0 0 var(--s-5); }
.ovg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 var(--s-3); }
.ovg-head h2 { margin: 0; font-size: var(--t-lg); }
.ovg-head .ovr-status-tag { margin-right: 0; }
.ovg-note { margin: 0; color: var(--ink-3); font-size: var(--t-xs); }
.ovg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.ovg-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ovg-tile-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.ovg-kicker { margin: 0; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ovg-fresh { margin: 0; color: var(--ink-3); font-size: var(--t-xs); }
.ovg-value { margin: 0; color: var(--ink); font-size: var(--t-2xl); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.ovg-value small { margin-left: 4px; color: var(--ink-3); font-size: var(--t-base); font-weight: 500; letter-spacing: 0; }
.ovg-word { font-size: var(--t-lg); line-height: 1.2; letter-spacing: -.01em; }
.ovg-sub { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.ovg-delta { margin: 0; color: var(--ink-3); font-size: var(--t-sm); font-weight: 600; }
.ovg-delta[data-dir="down"] { color: var(--bad); }
.ovg-delta[data-dir="up"] { color: var(--good); }
.ovg-link { margin-top: auto; padding-top: 4px; font-size: var(--t-sm); font-weight: 600; }
.ovg-spark { display: block; width: 100%; height: 46px; overflow: visible; }
.ovg-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ovg-area { fill: var(--mint); fill-opacity: .55; }
.ovg-gap { stroke: var(--chart-amber); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (max-width: 1000px) {
    .ovg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .ovg-tiles { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
    .ovg-value { font-size: var(--t-xl); }
    .ovg-word { font-size: var(--t-md); }
}

/* SEO → Content auditor (JJ, 21-10-2026): status line, Pages to improve groups, Google rank,
   Couldn't score, Recent attempts and the all-brands Content score by brand table. Builds on the
   cov-* comparison table above; tokens only. */
.mk-status { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--t-sm); }
.mk-status strong { color: var(--ink); }
.mk-table .mk-group th { padding: var(--s-4) var(--s-4) var(--s-2); background: var(--surface-2); border-top: 1px solid var(--line); }
.mk-table tbody:first-of-type .mk-group th { border-top: 0; }
.mk-group-title { display: block; color: var(--ink); font-size: var(--t-base); font-weight: 700; }
.mk-group-note { display: block; max-width: 90ch; margin-top: var(--s-1); color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.mk-count { display: inline-block; min-width: 1.6em; padding: 0 var(--s-1); color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mk-brand { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; }
.mk-flag { margin-right: var(--s-2); vertical-align: baseline; }
.mk-finding { display: -webkit-box; margin: var(--s-1) 0 0; overflow: hidden; color: var(--ink-2); font-size: var(--t-xs); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mk-finding span { color: var(--ink-3); font-weight: 700; }
.mk-finding span::after { content: " · "; font-weight: 400; }
.mk-note, .mk-other p { margin: 0; }
.mk-other { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.mk-other > p { flex: 1 0 100%; }
.mk-other-action { display: inline; margin: 0; }
.mk-check-action { margin: var(--s-2) 0 0; }
.mk-other-action .link-button { color: var(--green-ink); font-weight: 700; text-decoration: underline; cursor: pointer; }
.mk-findings { display: grid; gap: var(--s-2); margin: 0; padding-left: var(--s-4); }
.mk-findings p { margin: var(--s-1) 0 0; color: var(--ink-2); }
.mk-col-rank { width: 8.5rem; }
.cov-gap.mk-close strong, .cov-gap.mk-close span { color: var(--ink-2); }
.cov-gap.mk-held strong, .cov-gap.mk-held span { color: var(--ink-3); }
.mk-rank strong { font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.mk-rank-note { display: block; color: var(--warn); font-size: var(--t-xs); }
.mk-rank-none { color: var(--ink-3); font-size: var(--t-xs); }
.mk-more { display: grid; gap: var(--s-3); margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mk-more dt { font-weight: 700; }
.mk-more dd { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--t-sm); }
.mk-section { margin-top: var(--s-6); }
.mk-section > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.mk-section > .meta { margin: var(--s-1) 0 var(--s-3); }
.mk-fail-table { table-layout: fixed; }
.mk-fail-table th, .mk-fail-table td { padding: var(--s-2) var(--s-3); vertical-align: baseline; font-size: var(--t-sm); }
.mk-fail-table thead th:first-child, .mk-fail-table tbody th { width: 30%; padding-left: var(--s-4); font-weight: 400; }
.mk-fail-table .mk-act { color: var(--ink); font-weight: 700; }
.mk-fail-table .mk-wait { color: var(--ink-3); }
.mk-recent { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mk-recent li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.mk-recent li:first-child { border-top: 0; }
.mk-recent time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mk-recent .mk-ok { color: var(--good); }
.mk-recent .mk-bad { color: var(--warn); }
.mk-recent .mk-wait { color: var(--ink-3); }
.mk-brand-table th, .mk-brand-table td { padding: var(--s-2) var(--s-3); vertical-align: baseline; }
.mk-brand-table thead th:first-child, .mk-brand-table tbody th { padding-left: var(--s-4); }
.mk-brand-table td strong { font-variant-numeric: tabular-nums; }
.mk-sub { display: block; font-size: var(--t-xs); }
.mk-stale { display: block; color: var(--warn); font-size: var(--t-xs); }
/* Desktop just above the two-line breakpoint (1121–1150px): Saved is hidden and the rank column
   stays, so the number columns narrow instead (hiding a middle column would shift every column after it). */
@media (min-width: 1121px) and (max-width: 1150px) {
    .mk-table .cov-col-num { width: 6rem; }
    .mk-table .cov-col-gap { width: 8rem; }
    .mk-col-rank { width: 6.5rem; }
}
/* Two-line comparison rows: the same breakpoints as the cov-table rules above. */
@media (max-width: 760px), (min-width: 801px) and (max-width: 1120px) {
    .mk-table .mk-group { display: block; padding: 0; }
    .mk-table .mk-group th { display: block; padding: var(--s-3) var(--s-3) var(--s-2); }
    .mk-finding { flex: 1 0 100%; }
    .mk-table td.mk-rank { order: 5; }
    .mk-table td.mk-rank strong { font-size: var(--t-sm); }
    .mk-table td.mk-rank strong::before { content: "Google "; color: var(--ink-3); font-weight: 400; }
    .mk-rank-note { display: none; }
    .mk-flag { font-size: var(--t-xs); }
}
/* Phone */
@media (max-width: 760px) {
    /* The Content views pills wrap instead of scrolling out of sight. */
    .audit-subviews { position: static; flex-wrap: wrap; overflow-x: visible; }
    .mk-fail-table, .mk-fail-table tbody, .mk-fail-table tr, .mk-fail-table th, .mk-fail-table td { display: block; width: auto; }
    .mk-fail-table thead { display: none; }
    .mk-fail-table tr { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
    .mk-fail-table tbody tr:first-child { border-top: 0; }
    .mk-fail-table th, .mk-fail-table td { padding: 0; border: 0; }
    .mk-fail-table thead th:first-child, .mk-fail-table tbody th { width: auto; padding-left: 0; }
    .mk-fail-table td::before { content: attr(data-label) ": "; color: var(--ink-3); font-weight: 700; }
    .mk-fail-table .cov-path { display: none; }
    .mk-recent li { grid-template-columns: 1fr; gap: 0; padding: var(--s-2) var(--s-3); }
    .mk-brand-table, .mk-brand-table tbody { display: block; }
    .mk-brand-table thead { display: none; }
    .mk-brand-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
    .mk-brand-table tbody tr:first-child { border-top: 0; }
    .mk-brand-table th, .mk-brand-table td, .mk-brand-table td.num { padding: 0; border: 0; text-align: left; }
    .mk-brand-table tbody th { flex: 1 0 100%; padding: 0; }
    .mk-brand-table td::before { content: attr(data-label) " "; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
    .mk-brand-table td.mk-serp { display: none; }
    .mk-brand-table .mk-sub { display: inline; margin-left: var(--s-1); }
    .mk-brand-table .mk-sub::before { content: "· "; }
}
@media print {
    .mk-table tr, .mk-fail-table tr { break-inside: avoid; }
}

/* Content workspace ------------------------------------------------------
   Page-centred content workspace (JJ, 23-10-2026: "Build it as shown"; design lineage
   decision 67, sources/content-workspace/workspace-mockup.css). Tokens only. */
.cw-return { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 28px; font-size: var(--t-xs); }
.cw-return a { color: var(--ink-2); text-decoration: none; }
.cw-return a:hover { text-decoration: underline; }
.cw-kicker { font-family: var(--mono); color: var(--green-ink); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
.cw-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cw-heading h1 { font-size: 36px; letter-spacing: -.045em; margin: 0 0 8px; max-width: 820px; }
.cw-heading p { color: var(--ink-2); margin-bottom: 0; }
.cw-heading-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; font-size: var(--t-xs); }
.cw-heading-tools details { position: relative; }
.cw-heading-tools summary { cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.cw-popover { position: absolute; top: 30px; right: 0; width: 230px; z-index: 2; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.cw-popover a { display: block; margin: 7px 0; }
.cw-popover p { font-size: var(--t-xs); }
.cw-context { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--t-xs); color: var(--ink-2); }
.cw-context b { color: var(--green-ink); font-weight: 550; }
.cw-context svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--green-ink); }
.cw-context > span { min-width: 0; }
.cw-context a { white-space: nowrap; margin-left: auto; }
.cw-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 16px; }
.cw-section-head h2 { font-size: 20px; letter-spacing: -.035em; margin-bottom: 5px; }
.cw-section-head p { margin: 0; color: var(--ink-3); font-size: var(--t-xs); }
.cw-section-head a { font-size: var(--t-xs); white-space: nowrap; }
.cw-path { font-size: 11px; color: var(--ink-3); overflow-wrap: anywhere; }
/* Pages / Reports / Settings tabs and the report switch (seo-audit-navigation.php). */
.subnav.cw-tabs { gap: 26px; padding: var(--s-2) 0 0; }
.subnav.cw-tabs a { padding: 0 0 13px; border-radius: 0; font-size: var(--t-sm); font-weight: 500; border-bottom: 2px solid transparent; }
.subnav.cw-tabs a:hover { background: none; box-shadow: none; color: var(--green-ink); }
.subnav.cw-tabs a[aria-current="page"], .subnav.cw-tabs a[aria-current="true"] { background: none; color: var(--green-ink); font-weight: 650; border-bottom-color: var(--green); }
.cw-report-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-5); }
.cw-report-switch a { border-radius: 999px; padding: 7px 13px; color: var(--ink-2); border: 1px solid var(--line); text-decoration: none; font-size: var(--t-xs); }
.cw-report-switch a:hover { border-color: var(--line-2); color: var(--green-ink); }
.cw-report-switch a[aria-current="page"] { background: var(--mint); border-color: var(--mint-strong); color: var(--green-ink); font-weight: 600; }
.cw-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 8px; font-size: 10px; line-height: 1.5; font-weight: 550; border-radius: 6px; background: var(--neutral-bg); color: var(--neutral); }
.cw-badge.cw-warn { color: var(--warn); background: var(--warn-bg); }
.cw-disclosure { padding: 18px 0; border-top: 1px solid var(--line); margin-top: 24px; font-size: 13px; }
.cw-disclosure > summary { cursor: pointer; font-weight: 550; }
.cw-disclosure p, .cw-disclosure li { color: var(--ink-2); }
.cw-disclosure p { margin: 14px 0 0; }
.cw-disclosure ul { padding-left: 20px; }
.cw-anchor { display: block; scroll-margin-top: 96px; }
.cw-empty { text-align: center; padding: 55px 40px; max-width: 900px; margin: 30px auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.cw-empty-icon { display: grid; place-items: center; background: var(--mint); color: var(--green-ink); border-radius: var(--radius); width: 58px; height: 58px; margin: 0 auto 22px; }
.cw-empty-icon svg { width: 26px; height: 26px; }
.cw-empty h2 { font-size: 27px; margin-bottom: 14px; letter-spacing: -.04em; }
.cw-empty > p { color: var(--ink-2); max-width: 570px; margin: 0 auto 24px; font-size: 14px; line-height: 1.75; }
.cw-empty .cw-button { margin-bottom: 14px; }
.cw-empty .cw-button svg { width: 16px; height: 16px; }
.cw-empty .cw-support { font-size: 11px; color: var(--ink-3); margin-bottom: 0; }
.cw-work-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; margin-top: 26px; }
.cw-work-main { display: grid; gap: 24px; min-width: 0; }
.cw-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 26px; min-width: 0; }
.cw-panel h2 { font-size: 20px; letter-spacing: -.035em; }
.cw-panel p { color: var(--ink-2); font-size: 13px; }
.cw-score-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.cw-score-heading p { margin-bottom: 0; color: var(--ink-3); font-size: 11px; }
.cw-score-heading h2 { margin-bottom: 5px; }
.cw-score-bar { display: grid; grid-template-columns: 125px minmax(0, 1fr) 44px; gap: 15px; align-items: center; margin-top: 17px; }
.cw-score-bar span { font-size: 12px; color: var(--ink-2); }
.cw-score-bar strong { font-size: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.cw-score-bar progress { width: 100%; height: 10px; border: none; border-radius: 999px; overflow: hidden; appearance: none; background: var(--line); color: var(--ink-3); accent-color: var(--ink-3); }
.cw-score-bar progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.cw-score-bar progress::-webkit-progress-value { background: var(--ink-3); border-radius: 999px; }
.cw-score-bar progress::-moz-progress-bar { background: var(--ink-3); border-radius: 999px; }
.cw-score-bar.cw-own span, .cw-score-bar.cw-own strong { color: var(--green-ink); font-weight: 650; }
.cw-score-bar.cw-own progress { color: var(--green); accent-color: var(--green); }
.cw-score-bar.cw-own progress::-webkit-progress-value { background: var(--green); }
.cw-score-bar.cw-own progress::-moz-progress-bar { background: var(--green); }
.cw-score-status { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11px; }
.cw-findings { list-style: none; counter-reset: finding; padding: 0; margin: 24px 0 0; display: grid; gap: 22px; }
.cw-findings > li { position: relative; padding-left: 40px; counter-increment: finding; }
.cw-findings > li::before { content: counter(finding, decimal-leading-zero); position: absolute; top: 2px; left: 0; color: var(--green-ink); font: 11px var(--mono); }
.cw-findings h3 { font-size: 14px; margin: 0 0 7px; letter-spacing: -.015em; }
.cw-findings p { margin-bottom: 8px; line-height: 1.6; }
.cw-findings details { margin-top: 10px; font-size: 11px; }
.cw-findings summary { color: var(--green-ink); cursor: pointer; }
.cw-findings blockquote { margin: 12px 0; padding: 10px 14px; border-left: 2px solid var(--mint-strong); background: var(--surface-2); color: var(--ink-2); }
.cw-findings details a { overflow-wrap: anywhere; }
.cw-side { display: grid; gap: 18px; }
.cw-side .cw-panel { padding: 22px; }
.cw-side h2 { font-size: 16px; }
.cw-side p { line-height: 1.7; }
.cw-status-line { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 18px; font-size: 11px; color: var(--ink-3); }
/* Brand-scoped Content overview (mockup index.html). */
.cw-overview-return a::before { content: "← "; }
.cw-hero { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 30px 32px; margin-top: 22px; background: var(--im-powder); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cw-hero h2 { font-size: 30px; letter-spacing: -.04em; max-width: 710px; margin: 0 0 10px; }
.cw-hero p { margin: 0; color: var(--ink-2); max-width: 700px; font-size: var(--t-sm); }
.cw-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 18px; border: 1px solid var(--green); border-radius: var(--radius-sm); background: var(--green); color: var(--on-brand); font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.cw-button:hover { background: var(--green-dark); color: var(--on-brand); }
.cw-overview .cs-strip { margin: 20px 0 34px; }
.cw-overview .cs-strip-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.cw-overview .cs-strip-kpis .kpi { display: block; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.cw-overview .cs-strip-kpis .label { display: block; font-size: 12px; color: var(--ink-2); }
.cw-overview .cs-strip-kpis .value { display: block; margin: 7px 0 1px; font-size: 28px; font-weight: 700; letter-spacing: -.04em; }
.cw-overview .cs-strip-kpis .hint { margin-top: 3px; color: var(--ink-3); font-size: 11px; }
.cw-priority-list { display: grid; gap: 12px; }
.cw-priority { display: grid; grid-template-columns: minmax(0, 1fr) 260px 160px; align-items: center; gap: 26px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cw-priority h3 { margin: 8px 0 5px; font-size: 18px; }
.cw-priority h3 a { color: var(--ink); text-decoration: none; }
.cw-priority h3 a:hover { text-decoration: underline; }
.cw-finding { color: var(--ink-2); font-size: 13px; margin: 13px 0 0; }
.cw-finding span { color: var(--ink-3); margin-right: 6px; }
.cw-compare-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.cw-compare-mini dt { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.cw-compare-mini dd { margin: 5px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.cw-compare-mini > div:first-child dd { color: var(--green-ink); }
.cw-priority-end { display: grid; gap: 10px; justify-items: end; text-align: right; }
.cw-priority-end strong { color: var(--warn); font-size: 13px; font-weight: 550; }
.cw-priority-end a { font-size: 12px; font-weight: 600; text-decoration: none; }
.cw-priority-end a.cw-quiet { font-weight: 400; color: var(--ink-3); }
.cw-overview .cw-disclosure { padding: 18px 0; margin-top: 24px; border-top: 1px solid var(--line); font-size: 13px; }
.cw-overview .cw-disclosure > summary { cursor: pointer; font-weight: 550; }
.cw-overview .cw-disclosure > p { color: var(--ink-2); margin: 14px 0 0; }
.cw-overview .cw-disclosure > .cov-compare, .cw-overview .cw-disclosure > .mk-section { margin-top: var(--s-5); }
.cw-overview .cw-disclosure.cov-ops { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; background: none; padding-left: 0; padding-right: 0; }
@media (max-width: 1200px) {
    .cw-work-grid { grid-template-columns: minmax(0,1fr) 280px; gap: 18px; }
    .cw-priority { grid-template-columns: minmax(0,1fr) 220px; gap: 20px; }
    .cw-priority-end { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: left; }
}
@media (max-width: 1000px) {
    .cw-work-grid { grid-template-columns: minmax(0,1fr); }
    .cw-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cw-hero { flex-direction: column; align-items: flex-start; }
    .cw-priority { grid-template-columns: minmax(0,1fr); }
    .cw-priority-end { grid-column: auto; }
    .cw-overview .cs-strip-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .cw-return { font-size: 11px; gap: 10px 18px; margin-bottom: 24px; }
    .cw-heading { display: block; }
    .cw-heading h1 { font-size: 29px; letter-spacing: -.04em; }
    .cw-heading p { font-size: 12px; line-height: 1.65; }
    .cw-heading-tools { margin-top: 20px; justify-content: flex-start; }
    .cw-heading-tools .cw-popover { left: 0; right: auto; }
    .cw-empty { margin: 24px 0; padding: 32px 21px; }
    .cw-empty h2 { font-size: 24px; }
    .cw-empty > p { font-size: 13px; }
    .cw-empty .cw-button { width: 100%; }
    .cw-context { font-size: 11px; padding: 12px; align-items: flex-start; margin: 20px 0; }
    .cw-context a { display: none; }
    .cw-section-head h2 { font-size: 20px; }
    .cw-section-head p { font-size: 11px; line-height: 1.65; }
    .cw-work-grid { margin-top: 22px; gap: 18px; }
    .cw-work-main { gap: 18px; }
    .cw-work-main .cw-panel { padding: 22px; }
    .cw-score-heading { display: block; margin-bottom: 22px; }
    .cw-score-heading .cw-badge { margin-top: 12px; }
    .cw-score-bar { grid-template-columns: 92px minmax(0,1fr) 40px; gap: 9px; margin-top: 16px; }
    .cw-score-bar span { font-size: 10px; }
    .cw-score-bar strong { font-size: 19px; }
    .cw-panel h2 { font-size: 19px; }
    .cw-panel p { font-size: 12px; }
    .cw-score-status { font-size: 10px; gap: 8px 16px; }
    .cw-findings { gap: 22px; margin-top: 22px; }
    .cw-findings > li { padding-left: 29px; }
    .cw-findings h3 { font-size: 13px; }
    .cw-findings > li::before { font-size: 10px; }
    .cw-side { grid-template-columns: minmax(0,1fr); }
    .cw-side .cw-panel { padding: 22px; }
    .cw-side h2 { font-size: 17px; }
    .subnav.cw-tabs { gap: 24px; }
    .subnav.cw-tabs a { font-size: 12px; }
    .cw-hero { padding: 24px 22px; gap: 22px; }
    .cw-hero h2 { font-size: 25px; }
    .cw-hero p { font-size: 12px; line-height: 1.7; }
    .cw-hero .cw-button { width: 100%; }
    .cw-overview .cs-strip { margin: 14px 0 28px; }
    .cw-overview .cs-strip-kpis { gap: 10px; }
    .cw-overview .cs-strip-kpis .kpi { padding: 16px; }
    .cw-overview .cs-strip-kpis .value { font-size: 25px; }
    .cw-overview .cs-strip-kpis .label { font-size: 11px; }
    .cw-priority { padding: 20px; gap: 18px; }
    .cw-finding { font-size: 12px; }
    .cw-compare-mini { max-width: 320px; }
    .cw-priority-end { border-top: 1px solid var(--line); padding-top: 16px; }
    .cw-priority-end strong, .cw-priority-end a { font-size: 11px; }
    .cw-status-line { font-size: 10px; }
}
@media print { .cw-work-grid { grid-template-columns: minmax(0, 1fr); } }
/* Content workspace end */

/* Outreach ---------------------------------------------------------------
   Staff Outreach queue (/brands/{id}/outreach, /outreach). Tokens only; the
   workflow list sits beside the queue on desktop and becomes a labelled
   select at narrow widths, with no horizontal page scroll. */
.outreach-board { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 1.25rem; }
.outreach-workflow-select { display: none; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.outreach-workflow-select select { min-width: 0; max-width: 100%; }
.outreach-workflow-nav { display: grid; gap: 1rem; }
.outreach-workflow-group h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.4rem; }
.outreach-workflow-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.outreach-workflow-group a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 0.5rem; color: var(--ink); text-decoration: none; }
.outreach-workflow-group a[aria-current="page"] { background: var(--surface-2); font-weight: 600; }
.outreach-count { font-variant-numeric: tabular-nums; text-align: right; }
.outreach-count small { display: block; color: var(--muted); font-weight: 400; font-size: 0.75rem; }
.outreach-count.is-zero { color: var(--muted); }
.outreach-queue { min-width: 0; display: grid; gap: 1rem; }
.outreach-queue-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.outreach-queue-head h2 { margin: 0; }
.outreach-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.outreach-status { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.outreach-status a { padding: 0.3rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); text-decoration: none; }
.outreach-status a[aria-current="page"] { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
.outreach-toggles { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.outreach-items { display: grid; gap: 0.75rem; }
.outreach-card { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface); padding: 1rem; display: grid; gap: 0.45rem; min-width: 0; overflow-wrap: anywhere; }
.outreach-card h2, .outreach-card h3 { margin: 0; font-size: 1.05rem; }
.outreach-card p { margin: 0; }
.outreach-card-top { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; }
.outreach-type { color: var(--muted); }
.outreach-state { font-weight: 600; color: var(--ink-2); }
.outreach-host { color: var(--muted); font-size: 0.9rem; }
.outreach-timing { font-weight: 600; color: var(--ink-2); font-size: 0.9rem; }
.outreach-note { color: var(--ink-2); font-size: 0.9rem; }
.outreach-ratings { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.outreach-ratings li { border: 1px solid var(--line); border-radius: 0.5rem; background: var(--surface); padding: 0.35rem 0.6rem; font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.outreach-inline { display: inline; }
.outreach-panel { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface); margin-top: 0.75rem; }
.outreach-panel > summary, .outreach-details > summary, .outreach-secondary > summary { cursor: pointer; padding: 0.6rem 0.9rem; }
.outreach-panel-body { padding: 0 0.9rem 0.9rem; display: grid; gap: 0.6rem; min-width: 0; }
.outreach-panel-body blockquote { margin: 0; padding-left: 0.75rem; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.outreach-facts { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0; }
.outreach-facts dt { color: var(--muted); }
.outreach-facts dd { margin: 0; min-width: 0; }
.outreach-sources { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; overflow-wrap: anywhere; }
[data-research-allowances] > .card + .card { margin-top: var(--s-5); }
[data-research-allowances] .field { max-width: 32rem; }
[data-research-allowances] td .meta { display: block; }
.outreach-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.outreach-input-grid label { display: grid; gap: 0.3rem; }
.outreach-error { color: var(--bad); background: var(--bad-bg); padding: 0.5rem 0.75rem; border-radius: 0.5rem; margin: 0; }
.outreach-empty { color: var(--muted); padding: 1rem 0; }
.outreach-section-title { margin: 0.75rem 0 0; font-size: 0.95rem; }
.outreach-section-title small { color: var(--muted); font-weight: 400; }
.outreach-secondary form { display: grid; gap: 0.5rem; padding: 0 0.9rem 0.9rem; }
.outreach-secondary fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
@media (max-width: 760px) {
    .outreach-board { grid-template-columns: minmax(0, 1fr); }
    .outreach-workflow-nav { display: none; }
    .outreach-workflow-select { display: flex; }
    .outreach-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Changes that held ---------------------------------------------------------
   Staff Overview panel and the all-brands /held page. Each check is one
   labelled chip; the words carry the meaning and colour only repeats it. */
.held { display: grid; gap: var(--s-3); margin-block: var(--s-5); }
.held h3 { margin: var(--s-2) 0 0; font-size: var(--t-base); }
.held-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.held-head h2 { margin: 0; }
.held-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.held-fresh, .held-note { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.held-note { max-width: 72ch; }
.held-filters { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-4); }
.held-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.held-count { padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.held-count strong { display: block; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.held-count span { display: block; color: var(--ink-2); font-size: var(--t-sm); }
.held-count.is-loss strong { color: var(--bad); }
.held-count.is-gain strong { color: var(--good); }
.held-list { display: grid; margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.held-row { display: grid; grid-template-columns: minmax(9rem, 1.1fr) minmax(14rem, 2fr) minmax(16rem, 2.2fr) minmax(8rem, 0.9fr); gap: var(--s-2) var(--s-4); align-items: start; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.held-row:first-child { border-top: 0; }
.held-list.is-brand .held-row { grid-template-columns: minmax(14rem, 2fr) minmax(16rem, 2.2fr) minmax(8rem, 0.9fr); }
.held-row-head { padding-block: var(--s-2); color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.held-brand a, .held-what strong { font-weight: 600; }
.held-brand .meta, .held-what .meta, .held-when .meta, .held-what strong, .held-when strong { display: block; }
.held-trail { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin: 0; padding: 0; list-style: none; }
.held-trail li { display: grid; justify-items: center; gap: 2px; min-width: 3.5rem; }
.held-day { min-height: 1em; color: var(--ink-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.held-chip { display: inline-block; padding: 2px var(--s-2); border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.held-chip.is-in { color: var(--good); background: var(--good-bg); border-color: transparent; }
.held-chip.is-out { color: var(--bad); background: var(--bad-bg); border-color: transparent; }
.held-chip.is-unknown, .held-chip.is-next { color: var(--ink-2); background: transparent; border-style: dashed; border-color: var(--line-2); font-weight: 500; }
.held-chip.is-next { color: var(--ink-3); }
.held-show-all { border-top: 1px solid var(--line); }
.held-show-all > details > summary { cursor: pointer; padding: var(--s-2) var(--s-4); color: var(--green); font-size: var(--t-sm); font-weight: 600; }
.held-show-all .held-list { border: 0; border-radius: 0; background: transparent; }
.held-show-all .held-list > .held-row:first-child { border-top: 1px solid var(--line); }
.held-more { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.held-more > summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 600; }
.held-more-body { display: grid; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
.held-left { margin: 0; padding-left: var(--s-5); color: var(--ink-2); }
.held-left li + li { margin-top: var(--s-1); }
.held-empty { padding: var(--s-4); color: var(--ink-2); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.held-empty strong { display: block; margin-bottom: var(--s-1); color: var(--ink); }
.held-page .held-more { margin-block: var(--s-4); }
@media (max-width: 760px) {
    .held-row, .held-list.is-brand .held-row { grid-template-columns: 1fr; }
    .held-row-head { display: none; }
    .held-counts { grid-template-columns: 1fr 1fr; }
    .held-count strong { font-size: 1.4rem; }
}
@media print {
    .held-more { break-inside: avoid; }
}
/* Motion ------------------------------------------------------------------
   R1 brand report treatment, driven by assets/motion.js. Hiding is scoped to
   html[data-motion], which motion.js sets only when reduced motion is off and
   IntersectionObserver exists, so no-JS, reduced motion, print and the
   scriptless capability page always show every final state. Only the full
   report's [data-report-sections] container and the client portal's
   [data-reveal-sections] containers (portal pages and staff module pages;
   every direct child is a group) are touched; tables never move. Kickers and
   the index are report-only. */

/* Numbered kickers: the section's own h2 keeps its text; the number matches
   its entry in the section index (both count rendered sections in DOM order).
   Site audit keeps its approved .sa-head, so it is listed beside .section-head. */
[data-report-sections] { counter-reset: report-section; }
[data-report-sections] > section[id] { counter-increment: report-section; }
[data-report-sections] > section[id] > :is(.section-head, .sa-head) h2::before {
    content: counter(report-section, decimal-leading-zero) / "";
    display: inline-block;
    margin-right: .75em;
    vertical-align: .2em;
    color: var(--kicker-num);
    font: 500 var(--t-xs)/1.4 var(--mono);
    letter-spacing: .14em;
}

/* First-view reveal: each group's direct children rise in once. A group is a
   report's top-level section[id] or any direct child of [data-reveal-sections].
   The group box itself never fades or moves; at rest transform is none so
   sticky descendants keep their own scroll container. */
[data-motion] :is([data-report-sections] > section[id], [data-reveal-sections] > *) > * {
    transition: opacity var(--m-dur-reveal) var(--m-ease-out), transform var(--m-dur-reveal-move) var(--m-ease-out);
}
[data-motion] :is([data-report-sections] > section[id], [data-reveal-sections] > *):not([data-seen]) > * { opacity: 0; transform: translateY(var(--m-shift)); }
[data-motion] :is([data-report-sections] > section, [data-reveal-sections] > *)[data-seen] > :nth-child(2) { transition-delay: var(--m-stagger); }
[data-motion] :is([data-report-sections] > section, [data-reveal-sections] > *)[data-seen] > :nth-child(3) { transition-delay: calc(2 * var(--m-stagger)); }
[data-motion] :is([data-report-sections] > section, [data-reveal-sections] > *)[data-seen] > :nth-child(n+4) { transition-delay: calc(3 * var(--m-stagger)); }

/* Charts draw once when their section is first seen; final geometry is the
   server's. Stacked bar segments grow together from the bar's left edge. */
[data-motion] :is([data-report-sections], [data-reveal-sections]) svg.chart-bar rect:not(.c-track) {
    transform-box: view-box;
    transform-origin: 0 50%;
    transition: transform var(--m-dur-draw) var(--m-ease-out);
}
[data-motion] :is([data-report-sections] > section, [data-reveal-sections] > *):not([data-seen]) svg.chart-bar rect:not(.c-track) { transform: scaleX(0); }
/* Rank trend line: drawn once from left to right; the server's path is final.
   pathLength="100" on every run makes one dash length fit any run. */
[data-motion] :is([data-report-sections], [data-reveal-sections]) svg.chart-line .c-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--m-dur-draw) var(--m-ease-out);
}
@media screen {
    [data-motion] :is([data-report-sections] > section, [data-reveal-sections] > *):not([data-seen]) svg.chart-line .c-line { stroke-dashoffset: 100; }
}
/* Brand hero arc: the server's stroke-dashoffset is final; unseen, the arc is empty. */
[data-motion] :is([data-report-sections], [data-reveal-sections]) .brand-ring-value { transition: stroke-dashoffset 1200ms var(--m-ease-out) 280ms; }
@media screen {
    [data-motion] :is([data-report-sections] > section, [data-reveal-sections] > *):not([data-seen]) .brand-ring-value { stroke-dashoffset: 100; }
}

/* Count-up: the server text node never changes; while counting, its glyphs are
   transparent and an aria-hidden overlay paints the frame value. */
:is(.kpi .value, .brand-count)[data-count-frame] { position: relative; -webkit-text-fill-color: var(--m-clear); }
:is(.kpi .value, .brand-count)[data-count-frame]::after {
    content: attr(data-count-frame) / "";
    position: absolute;
    inset: 0;
    -webkit-text-fill-color: currentColor;
    white-space: nowrap;
    pointer-events: none;
}

/* Live state: a pulsing dot before text that already states active work. */
.live-dot {
    display: inline-block;
    flex: none;
    width: .5rem;
    height: .5rem;
    margin-right: .4em;
    vertical-align: .08em;
    border-radius: 50%;
    background: var(--live-dot);
    box-shadow: inset 0 0 0 1px var(--live-dot-edge), 0 0 0 0 var(--live-ring);
}
@media (prefers-reduced-motion: no-preference) {
    .live-dot { animation: im-live 1.8s var(--m-ease-out) infinite; }
    /* The intro reel's pause toggle (B-102) stops the pulse too; intro.js sets the attribute. */
    .intro-reel[data-intro-paused] .live-dot { animation: none; }
}
@keyframes im-live {
    0% { box-shadow: inset 0 0 0 1px var(--live-dot-edge), 0 0 0 0 var(--live-ring); }
    70%, 100% { box-shadow: inset 0 0 0 1px var(--live-dot-edge), 0 0 0 .5rem var(--m-clear); }
}

/* Section index: a sticky right rail from 1280px; below that the existing
   .brand-sections pill subnav keeps doing navigation. */
.section-index { display: none; }
@media (min-width: 1280px) {
    [data-report-sections]:has(> .section-index) { position: relative; padding-right: 228px; }
    [data-report-sections] > .section-index {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 188px;
        margin: 0;
    }
    .section-index-label,
    .section-index ol { position: sticky; }
    /* Stuck entries sit below the sticky top bar and the report's section tabs, never under them. */
    .section-index-label { top: calc(var(--topbar-h) + var(--subnav-h) + var(--s-5)); }
    .section-index ol { top: calc(var(--topbar-h) + var(--subnav-h) + var(--s-5) + 2rem); }
}
.section-index-label { margin: 0 0 10px .8rem; color: var(--index-ink); font: 500 var(--t-xs)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.section-index ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.section-index a {
    position: relative;
    display: grid;
    grid-template-columns: 1.7rem auto;
    align-items: center;
    padding: .35rem .6rem .35rem .8rem;
    color: var(--index-ink);
    font: 500 var(--t-xs)/1.3 var(--mono);
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 8px;
    transition: color var(--m-dur-hover) var(--m-ease-out);
}
.section-index b { font-weight: 500; }
.section-index a::before {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: var(--index-mark);
    transform: scaleY(0);
    transition: transform var(--m-dur-hover) var(--m-ease-out);
}
.section-index a:hover,
.section-index a[aria-current="true"] { color: var(--index-active); }
.section-index a[aria-current="true"]::before { transform: scaleY(1); }

/* Theme switch on Account: a short colour crossfade instead of a hard swap.
   motion.js adds the class only when reduced motion is off and removes it
   after the fade. Colour properties only. */
:root.theme-fading,
:root.theme-fading *,
:root.theme-fading *::before,
:root.theme-fading *::after {
    transition:
        background-color var(--m-dur-theme) var(--m-ease-out),
        color var(--m-dur-theme) var(--m-ease-out),
        border-color var(--m-dur-theme) var(--m-ease-out),
        outline-color var(--m-dur-theme) var(--m-ease-out),
        fill var(--m-dur-theme) var(--m-ease-out),
        stroke var(--m-dur-theme) var(--m-ease-out) !important;
}

/* Reduced motion: no pulse and no index transitions, even without JS. */
@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
    .section-index a, .section-index a::before { transition: none; }
}

/* Print: no index, no kickers, no animation, every state final. */
@media print {
    .section-index { display: none !important; }
    [data-report-sections] { padding-right: 0 !important; }
    [data-report-sections] > section[id] > .section-head h2::before { content: none; }
    :is([data-report-sections] > section[id], [data-reveal-sections] > *) > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    :is([data-report-sections], [data-reveal-sections]) svg.chart-bar rect { transform: none !important; clip-path: none !important; transition: none !important; }
    :is([data-report-sections], [data-reveal-sections]) .brand-ring-value { transition: none !important; }
    :is(.kpi .value, .brand-count)[data-count-frame] { -webkit-text-fill-color: currentColor; }
    :is(.kpi .value, .brand-count)[data-count-frame]::after { content: none; }
    .brand-hero::after { content: none; }
    .live-dot { animation: none; }
}

/* Direction C Overview: the same AI answer for staff, clients and read-only links.
   Shared score/bar primitives live in ai-shared.css; all colours use root tokens. */
.ova-overview,
.ova-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); min-width: 0; }
.ova-overview > *,
.ova-answer > * { min-width: 0; }
.ova-overview .aivs-card { margin: 0; padding: var(--s-5); min-width: 0; }
.ova-overview h2 { margin: 0 0 var(--s-2); font-size: var(--t-lg); }
.ova-overview .meta { margin: var(--s-1) 0 0; }
.ova-answer .aivs-kicker { margin: 0 0 var(--s-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ova-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
/* Staff status line (approved direction A): one staff-only line above the shared answer; amber only on a client mismatch. */
.ovr-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--t-sm); color: var(--ink-2); }
.ovr-status-tag { display: inline-flex; align-items: center; margin-right: 14px; padding: 3px 9px; border-radius: 999px; background: var(--im-butter); color: var(--ink); font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ovr-status-fact { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; padding: 0 14px; border-left: 1px solid var(--line-2); }
.ovr-status-tag + .ovr-status-fact { padding-left: 0; border-left: 0; }
.ovr-status-fact > span { color: var(--ink-3); }
.ovr-status-fact > strong { color: var(--ink); font-weight: 600; }
.ovr-status-warn { background: var(--warn-bg); border-color: var(--flash-warn-border); }
.ovr-status-warn .ovr-status-fact > strong { color: var(--flash-warn-ink); }
@media (max-width: 800px) {
    .ovr-status { display: grid; gap: 6px; padding: 12px 14px; }
    .ovr-status-tag { justify-self: start; margin: 0 0 2px; }
    .ovr-status-fact,
    .ovr-status-tag + .ovr-status-fact { padding: 0; border-left: 0; }
}
.ova-note { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--warn); background: var(--surface-2); color: var(--ink-2); }
.ova-note > :first-child { margin-top: 0; }
.ova-note > :last-child { margin-bottom: 0; }
.ova-withheld-note { margin: 0; }
.ova-withheld-note .aivs-score-line { margin: 0; }
.ova-gaps { display: grid; gap: var(--s-3); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.ova-gaps > li { margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); overflow-wrap: anywhere; }
.ova-answer > p { margin: 0; }
.ova-cites-more { margin-top: var(--s-3); }
.ova-cites-more[open] .aivs-bars { margin-top: var(--s-3); }
.ova-overview .aivs-how { margin: 0; padding: var(--s-4) var(--s-5); }
.ova-overview .aivs-how > summary { cursor: pointer; }
.ova-overview .aivs-how > summary h2 { display: inline; margin: 0; font-size: var(--t-md); }
.ova-overview > .brand-standing { margin-top: var(--s-2); }
.ova-secondary { margin: 0; padding: var(--s-4) var(--s-5); }
.ova-secondary > summary { cursor: pointer; }
.ova-secondary > summary h2 { display: inline; margin: 0; font-size: var(--t-md); }
.ova-secondary-body { margin-top: var(--s-5); }
/* Overview AI card in the tiles' anatomy (JJ, 22-10 and 23-10-2026): kicker and freshness, tile-size number, change,
   facts, one link. Tile width; on tracked pages it leads a row of three with competitors and cited sites, lined up
   with the glance tiles. .aivs-page h2 (ai-shared.css) outranks .ovg-kicker, so the kicker restates the tiles' values. */
.aivs-card.ova-tilecard { display: flex; flex-direction: column; gap: 8px; padding: var(--s-4); border-radius: var(--radius-lg); }
.ova-tilecard .ovg-tile-head { margin: 0; }
.ova-tilecard h2.ovg-kicker { margin: 0; font-size: var(--t-xs); font-weight: 700; line-height: 1.3; letter-spacing: .06em; }
.ova-tile-main,
.ova-tile-facts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ova-tile-facts { flex: 1; }
.ova-tilecard .aivs-score-num { display: block; margin: 0; line-height: 1.05; }
.ova-tilecard .aivs-score-num strong { color: var(--ink); font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.ova-tilecard .aivs-score-line { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
@media (min-width: 1001px) {
    .ova-answer > .ova-tilecard { width: calc((100% - 2 * var(--s-3)) / 3); }
    .ova-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
    .ova-grid .aivs-bar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 2rem; }
}
@media (max-width: 800px) {
    .ova-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .ova-overview .aivs-card { padding: var(--s-4); }
    .ova-gaps > li { padding: var(--s-3); }
}
/* All-brands Overview — approved direction C, AI rows before source/work detail. */
.workspace-main > .all-brands-overview { max-width: var(--max); }
.all-brands-overview .all-brands-attention { padding: var(--s-5); margin: 0 0 var(--s-5); }
.all-brands-attention > h2,
.all-brands-heading { margin: 0 0 var(--s-3); font-size: var(--t-lg); }
.all-brands-ai-attention { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.all-brands-ai-attention > li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line-2); }
.all-brands-ai-attention > li:last-child { border-bottom: 0; }
.all-brands-sources > summary,
.all-brands-card-tools > summary { min-height: 44px; padding-block: var(--s-3); color: var(--ink-2); font-size: var(--t-sm); cursor: pointer; }
.all-brands-sources > .meta { margin: var(--s-2) 0 var(--s-3); }
.all-brands-sources .attention-list { margin-bottom: 0; box-shadow: none; }
.all-brands-cards { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.all-brands-card { margin: 0; padding: var(--s-5); min-width: 0; overflow-wrap: anywhere; }
.all-brands-card h2 { margin: 0 0 var(--s-2); font-size: var(--t-lg); }
.all-brands-card .meta { margin: var(--s-1) 0 0; }
.all-brands-ai { margin: var(--s-3) 0 0; }
.all-brands-ai-line { margin: 0; font-size: var(--t-md); }
.all-brands-client { display: inline-block; margin: var(--s-2) 0 0; padding: 2px var(--s-2); border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.all-brands-pill { display: inline-block; padding: 2px var(--s-2); border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: var(--t-xs); font-weight: 600; vertical-align: middle; }
.all-brands-pill-off { background: var(--neutral-bg); color: var(--ink-2); }
.all-brands-status { margin: var(--s-1) 0 0; }
.all-brands-card-tools { margin: var(--s-2) 0 0; }
.all-brands-card-tools[open] > summary { margin-bottom: var(--s-2); }
.all-brands-card-tools .actions { margin: var(--s-3) 0 0; gap: var(--s-2) var(--s-3); }
@media (max-width: 800px) {
    .all-brands-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .all-brands-overview .all-brands-attention,
    .all-brands-card { padding: var(--s-4); }
}

/* Staff technical details: native, initially closed, and never printed. */
.tech-details {
    min-width: 0;
    max-width: 100%;
    margin: var(--s-4) 0;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    color: var(--ink);
    background: var(--surface-2);
}
.tech-details > summary {
    min-height: 44px;
    padding: var(--s-3) var(--s-4);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.tech-details > summary::marker { color: var(--ink-2); }
.tech-details > summary:hover { background: var(--mint); }
.tech-details > summary:focus-visible {
    outline: 3px solid var(--orange-ink);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
.tech-details[open] > summary { border-bottom: 1px solid var(--line); }
.tech-details > :not(summary) { min-width: 0; max-width: calc(100% - var(--s-4) * 2); margin: var(--s-4); }
.tech-details :is(p, li, dd, code, pre) { overflow-wrap: anywhere; }
.tech-details :is(code, pre) { font-family: var(--mono); font-size: var(--t-sm); }
.tech-details pre { white-space: pre-wrap; }
.tech-details .table-wrap { max-width: 100%; overflow-x: auto; }
.tech-details > .table-wrap { max-width: calc(100% - var(--s-4) * 2); }
.tech-details .table-wrap:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
.tech-details table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tech-details caption { padding: var(--s-3); color: var(--ink-2); text-align: left; caption-side: top; }
.tech-details :is(th, td) { vertical-align: top; overflow-wrap: anywhere; }
.tech-details th { font-weight: 600; }
.tech-details-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.tech-details-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.tech-details-control strong { margin-inline-start: var(--s-1); color: var(--ink); }
.tech-details-control button { min-height: 44px; }
.rankings-update-status { max-width: 100%; white-space: normal; }
.rankings-update-status .live-dot { flex: none; }
@media print {
    .tech-details, .tech-details-control, .tech-details-preference { display: none !important; }
    /* Plain measurement explanations stay in the printed result even when closed on screen. */
    .aivs-how::details-content { display: block; content-visibility: visible; }
    .aivs-how > :not(summary) { display: block; overflow: visible; content-visibility: visible; }
    .aivs-how > summary { list-style: none; cursor: default; break-after: avoid; }
    .aivs-how > summary::marker { content: ""; }
    .aivs-how > summary::-webkit-details-marker { display: none; }
}

/* Search Console fix options (app/views/brand/gsc-fix-card.php). Ported from the
   approved 20-10-2026 mockup (mock.css, search-console.css); tokens only. Pairs
   with .badge*, .btn, .brand-disclosure, .table-wrap, .table, .meta, .sa-pf-card. */
.gsc-fix { display: grid; gap: var(--s-3); min-width: 0; margin: 0 0 var(--s-3); scroll-margin-top: var(--s-4); }
.gsc-fix > * { margin: 0; }

/* Shared notice banner (R10, R16) */
.gsc-fix-notice {
    display: grid;
    gap: var(--s-1);
    overflow-wrap: anywhere;
    padding: var(--s-3) var(--s-4);
    color: var(--ink);
    background: var(--warn-bg);
    border: 1px solid var(--flash-warn-border);
    border-left: 4px solid var(--warn);
    border-radius: var(--radius-sm);
    font-size: var(--t-sm);
}
.gsc-fix-notice strong { font-size: var(--t-base); }
.gsc-fix-notice p { margin: 0; color: var(--ink-2); }
.gsc-fix-notice-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.gsc-fix-notice .gsc-fix-fix { margin-top: var(--s-2); background: var(--surface); }
.gsc-fix-notice .gsc-fix-tech { margin-top: var(--s-1); }

/* Full problem card (R1, R5, R6) */
.gsc-fix-card {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.gsc-fix-card > * { margin: 0; }
.gsc-fix-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.gsc-fix-card-head > * { margin: 0; }
.gsc-fix-card-head h3 { font-size: var(--t-md); line-height: 1.3; }
.gsc-fix-why { display: grid; gap: var(--s-1); color: var(--ink-2); font-size: var(--t-sm); }
.gsc-fix-why p { margin: 0; }
.gsc-fix-why b { color: var(--ink); }
.gsc-fix-why-other { margin: 0; color: var(--ink-3); font-size: var(--t-sm); }

/* Recommended fix: the one region with a filled action */
.gsc-fix-fix {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
}
.gsc-fix-fix > * { margin: 0; }
.gsc-fix-kicker { color: var(--green-ink); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gsc-fix-title { font-size: var(--t-base); font-weight: 700; }
.gsc-fix-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--s-2) var(--s-4);
    margin: 0;
}
.gsc-fix-facts div { min-width: 0; }
.gsc-fix-facts dt { color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gsc-fix-facts dd { margin: 2px 0 0; color: var(--ink); font-size: var(--t-sm); }
.gsc-fix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; }
.gsc-fix-actions .meta { margin: 0; }
/* "An admin can do this" / operator note: shown in place of a button (R12, R18) */
.gsc-fix-admin-note {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: var(--s-1) var(--s-3);
    color: var(--ink-2);
    background: var(--surface);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-sm);
    font-size: var(--t-sm);
    font-weight: 600;
}

/* Steps for the owner (R13, KTD5): readonly textarea in an open disclosure */
.gsc-fix-card .brand-disclosure, .gsc-fix-fix .brand-disclosure { margin-top: 0; }
.gsc-fix-steps-body { display: grid; gap: var(--s-2); }
.gsc-fix-steps textarea {
    display: block;
    width: 100%;
    min-height: 11rem;
    padding: var(--s-3);
    color: var(--ink);
    background: var(--field-readonly-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    font: var(--t-sm)/1.5 var(--mono);
    resize: vertical;
}
/* No access email set (R18): message and who acts in place of the copy action */
.gsc-fix-no-email { display: grid; justify-items: start; gap: var(--s-2); }
.gsc-fix-no-email p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

/* Other ways to fix: options table (R5-R7) */
.gsc-fix-options { min-width: 0; }
.gsc-fix-options th[scope="row"] { min-width: 11rem; }
.gsc-fix-options th[scope="row"] span { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.gsc-fix-cell-expires, .gsc-fix-cell-ready { white-space: nowrap; }
.gsc-fix-option-recommended { color: var(--green-ink); font-size: var(--t-xs); font-weight: 700; }
.gsc-fix-expiry-note, .gsc-fix-unbuilt { display: block; margin-top: var(--s-1); font-size: var(--t-xs); white-space: normal; }
.gsc-fix-cell-ready .gsc-fix-unbuilt { max-width: 16rem; }
.gsc-fix-option-steps { min-width: 12rem; font-size: var(--t-sm); }
.gsc-fix-option-steps > summary { color: var(--green-ink); font-weight: 600; cursor: pointer; }
.gsc-fix-option-steps > p { margin: var(--s-1) 0 0; }

/* Technical details: the only place technical names appear (R8) */
.gsc-fix-tech { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.gsc-fix-tech .brand-disclosure-body { display: grid; gap: var(--s-2); }
.gsc-fix-tech p, .gsc-fix-tech ul { margin: 0; }
.gsc-fix-tech code { font: var(--t-xs)/1.4 var(--mono); overflow-wrap: anywhere; }

/* Short Overview card (R2): always paired with .sa-pf-card */
.gsc-fix-short { min-width: 0; }
.gsc-fix-short > * { margin: 0; }
.gsc-fix-short-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.gsc-fix-short p { color: var(--ink-2); font-size: var(--t-sm); }
.gsc-fix-short-fix b { color: var(--ink); }
.gsc-fix-short a.gsc-fix-more { color: var(--green-ink); font-size: var(--t-sm); font-weight: 600; }

/* Narrow screens: the options table stacks into labelled rows */
@media (max-width: 640px) {
    .gsc-fix-card { padding: var(--s-4); }
    .gsc-fix-options thead { display: none; }
    .gsc-fix-options, .gsc-fix-options tbody, .gsc-fix-options tr, .gsc-fix-options th, .gsc-fix-options td { display: block; width: 100%; }
    .gsc-fix-options tr { padding: var(--s-2) 0; border-top: 1px solid var(--line); }
    .gsc-fix-options tr:first-child { border-top: 0; }
    .gsc-fix-options th, .gsc-fix-options td { padding: var(--s-1) var(--s-3); border-top: 0; }
    .gsc-fix-options th[scope="row"] { min-width: 0; }
    /* The general .table-wrap > .table 600px floor would clip the stacked rows. */
    .table-wrap > .gsc-fix-options { min-width: 0; }
    .gsc-fix-options td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--ink-3);
        font-size: var(--t-xs);
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .gsc-fix-cell-expires, .gsc-fix-cell-ready { white-space: normal; }
    .gsc-fix-actions .btn { width: 100%; justify-content: center; }
}

/* Account connections: frame */
/* Workspace pages render the flash stack inside main, below the top bar: it spans the main
   column and lines up with the page content (main's own gutter), never a centred 1200px box. */
.workspace-main > .flash-stack { width: 100%; max-width: none; margin-inline: 0; padding-top: var(--s-4); }

/* Staff content drafts: native links and forms remain usable without scripts. */
[data-draft-detail] > .card, [data-draft-detail] > details, [data-drafts-board] > .card { margin-block: var(--s-4); }
[data-draft-detail] .card, [data-drafts-board] > .card { padding: var(--s-4) var(--s-5); }
.drafts-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-4); margin-block: var(--s-4); }
.drafts-grid > .card { min-width: 0; }
.drafts-table-wrap { max-width: 100%; overflow-x: auto; }
.drafts-board { min-width: 820px; }
.drafts-board th, .drafts-board td { vertical-align: top; }
.drafts-url { overflow-wrap: anywhere; word-break: break-word; }
.drafts-preserve { white-space: pre-wrap; overflow-wrap: anywhere; }
.drafts-warning { color: var(--warn); }
.drafts-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.drafts-facts dt { color: var(--ink-3); font-size: var(--t-sm); }
.drafts-facts dd { margin: 0; overflow-wrap: anywhere; }
.drafts-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.drafts-reading { max-width: 76ch; line-height: 1.7; overflow-wrap: anywhere; }
.drafts-reading table { display: block; max-width: 100%; overflow-x: auto; }
.drafts-search-preview { max-width: 70ch; border-inline-start: 3px solid var(--line-2); padding-inline-start: var(--s-4); }
.drafts-search-preview > strong { color: var(--green-ink); font-size: var(--t-lg); }
.drafts-section-editor, .drafts-diff, .drafts-regenerate { border-block-start: 1px solid var(--line); margin-block-start: var(--s-4); padding-block: var(--s-3); }
.drafts-section-editor > summary, .drafts-close > summary { cursor: pointer; font-weight: 650; }
.drafts-section-editor form, .drafts-close form { margin-block-start: var(--s-3); }
.drafts-diff ins, .drafts-facts ins { color: var(--good); background: var(--good-bg); text-decoration: underline; }
.drafts-diff del, .drafts-facts del { color: var(--bad); background: var(--bad-bg); }
.drafts-note-list, .drafts-check-list { padding-inline-start: var(--s-4); }
.drafts-check { border-inline-start: 3px solid var(--line-2); margin-block: var(--s-3); padding: var(--s-3); list-style: none; }
.drafts-check-pass { border-color: var(--good); }
.drafts-check-warn, .drafts-check-review { border-color: var(--warn); }
.drafts-check-block { border-color: var(--bad); }
.drafts-check-not_checked { border-color: var(--neutral); }
.drafts-check blockquote { margin-inline: 0; }
@media (max-width: 760px) {
    .drafts-grid, .drafts-facts { grid-template-columns: minmax(0, 1fr); }
    .drafts-actions { flex-direction: column; }
    [data-draft-detail] .btn { white-space: normal; }
    /* Drafting pages: each page stacks into one block with its On/Off beside the keyword, so nothing scrolls sideways. */
    .drafts-pages-table thead { display: none; }
    .drafts-pages-table, .drafts-pages-table tbody { display: block; width: 100%; }
    .drafts-pages-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--s-2); border-top: 1px solid var(--line); }
    .drafts-pages-table.drafts-pages-choose tr { grid-template-columns: auto minmax(0, 1fr) auto; }
    .drafts-pages-table tr:first-child { border-top: 0; }
    .drafts-pages-table td { padding: var(--s-1) var(--s-3); border-top: 0; overflow-wrap: anywhere; }
    .drafts-pages-table .drafts-pages-box { grid-row: 1; grid-column: 1; }
    .drafts-pages-table .drafts-pages-keyword { grid-row: 1; grid-column: 1; font-weight: 600; }
    .drafts-pages-choose .drafts-pages-keyword { grid-column: 2; }
    .drafts-pages-table .drafts-pages-state { grid-row: 1; grid-column: -2; text-align: right; font-weight: 700; }
    .drafts-pages-table .drafts-pages-meta { grid-column: 1 / -1; }
    .drafts-pages-choose .drafts-pages-meta { grid-column: 2 / -1; }
    .drafts-pages-table td[data-label]::before { color: var(--ink-3); content: attr(data-label) " "; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .drafts-pages-table .drafts-pages-state::before { display: block; }
}

/* SEO Citations (staff, release citations_v1): page tabs, setup profile rows and competitor lists. */
.citations-panel { margin-top: var(--s-6); }
.citations-panel > h2 { margin-bottom: var(--s-2); }
.citations-panel > .meta, .citations-panel > .citations-facts, .citations-panel > .alert, .citations-panel > .table-wrap { margin-bottom: var(--s-4); }
.citations-answer { margin: 0 0 var(--s-4); font-size: var(--t-lg); font-weight: 650; }
.citations-setup-prompt p { margin: var(--s-2) auto 0; max-width: 60ch; }
.citations-facts { display: grid; gap: var(--s-2) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0; }
.citations-facts > div { min-width: 0; }
.citations-facts dt { color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.citations-facts dd { margin: var(--s-1) 0 0; }
.citations-list { margin: 0; padding-left: 1.1rem; }
.citations-url { overflow-wrap: anywhere; }
.citations-history { margin: 0 0 var(--s-4); }
.citations-history > summary { cursor: pointer; font-weight: 650; }
.citations-history-version { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.citations-history-version h3 { margin: 0 0 var(--s-2); font-size: var(--t-sm); }
.citations-profile-form, .citations-editor .form-card { display: grid; gap: var(--s-4); min-width: 0; max-width: 64rem; }
.citations-profile-form h3 { margin: 0; }
.citations-rows { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.citations-rows > legend { padding: 0; margin-bottom: var(--s-1); font-size: .9rem; font-weight: 750; }
.citations-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-2) var(--s-3); min-width: 0; margin: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.citations-row > legend { padding: 0 var(--s-1); color: var(--ink-2); font-size: var(--t-sm); font-weight: 700; }
.citations-row .field { min-width: 0; margin: 0; }
.citations-row-wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); }
.citations-row-wide > label:not(.check), .citations-row-wide > input { flex: 1 1 100%; }
.citations-row-label { flex: 1 1 100%; margin-bottom: .2rem; font-size: .9rem; font-weight: 750; }
.citations-form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.table-wrap > .citations-pages, .table-wrap > .citations-offices { min-width: 0; }
.citations-editor { margin-top: var(--s-5); }
.citations-editor > h3 { margin: 0 0 var(--s-2); }
.citations-editor > .meta, .citations-editor > .alert { margin-bottom: var(--s-3); }
.citations-overlaps { margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius-sm); }
.citations-overlaps h4 { margin: 0 0 var(--s-1); }
/* Agent work: read-only operational cards, using the shared token layer. */
.agent-work-lane-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.agent-work-lane-grid > *, .agent-work .card { min-width: 0; }
.agent-work-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin: var(--s-4) 0; }
.agent-work-facts > div { min-width: 0; }
.agent-work-facts dt { color: var(--ink-2); font-size: var(--t-sm); }
.agent-work-facts dd { margin: var(--s-1) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.agent-work-links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.agent-work-events { display: grid; gap: var(--s-4); padding-inline-start: var(--s-5); }
.agent-work-events li { padding-inline-start: var(--s-2); }
.agent-work-events p { margin: 0 0 var(--s-2); }
.agent-work > .section { padding: var(--s-5) 0; }
.agent-work .subnav { flex-wrap: wrap; }
.agent-work .notice { padding: var(--s-3) var(--s-4); border-inline-start: 3px solid var(--orange-ink); background: var(--surface-2); }
.agent-work .tech-details-body { overflow-wrap: anywhere; }
@media (max-width: 800px) {
    .agent-work-lane-grid { grid-template-columns: minmax(0, 1fr); }
    /* Three short columns fit a phone; the generic 600px table floor clipped the binding column. */
    .agent-work .table-wrap > .agent-work-workers { min-width: 0; }
    .agent-work .agent-work-workers thead th { white-space: normal; }
    /* With technical details on, a fourth column squeezed every value to a letter per
       line at phone width: each worker becomes a stacked row and its details span it. */
    .agent-work .agent-work-workers-technical, .agent-work .agent-work-workers-technical tbody { display: block; }
    .agent-work .agent-work-workers-technical thead { display: none; }
    .agent-work .agent-work-workers-technical tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
    .agent-work .agent-work-workers-technical tbody tr:first-child { border-top: 0; }
    .agent-work .agent-work-workers-technical :is(th, td) { display: block; min-width: 0; max-width: 100%; padding: 0; border: 0; overflow-wrap: anywhere; }
    .agent-work .agent-work-workers-technical th[scope="row"], .agent-work .agent-work-workers-technical td[data-label="Details"] { grid-column: 1 / -1; }
    .agent-work .agent-work-workers-technical td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
}
@media (max-width: 420px) {
    .agent-work-facts { grid-template-columns: minmax(0, 1fr); }
}
/* Citations reads (plan U8): answer line, question and fix cards, coverage strip, office grid and database table. */
.citations-dates { margin: calc(-1 * var(--s-3)) 0 var(--s-4); }
.citations-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--s-4); }
.citations-card { min-width: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.citations-card-low { border-style: dashed; }
.citations-card h3 { margin: 0 0 var(--s-1); font-size: var(--t-sm); }
.citations-card-subject { margin: 0 0 var(--s-1); font-weight: 650; overflow-wrap: anywhere; }
.citations-listings { display: grid; gap: var(--s-3); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.citations-listing { min-width: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.citations-listing p { margin: 0 0 var(--s-1); }
.citations-listing-source { font-weight: 650; overflow-wrap: anywhere; }
.citations-observed { display: grid; gap: var(--s-1); margin: 0 0 var(--s-1); font-size: var(--t-sm); }
.citations-observed > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s-2); }
.citations-observed dt { color: var(--ink-3); }
.citations-observed dd { margin: 0; overflow-wrap: anywhere; }
.citations-coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--s-3); margin: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.citations-coverage > div { min-width: 0; }
.citations-coverage dt { color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.citations-coverage dd { margin: var(--s-1) 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.citations-grid th[scope="col"], .citations-grid th[scope="row"] { white-space: normal; }
.citations-grid th[scope="row"] { min-width: 12rem; }
.citations-grid-host, .citations-grid-office { display: block; overflow-wrap: anywhere; }
.citations-grid-type, .citations-grid-address { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; text-transform: none; }
.citations-grid-brand th[scope="row"] { font-weight: 750; }
.citations-cell { min-width: 8rem; }
.citations-cell-symbol { font-weight: 800; }
.citations-cell-fix .citations-cell-symbol { color: var(--bad); }
.citations-cell-details_verified .citations-cell-symbol { color: var(--good); }
.citations-cell-note { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.citations-legend { margin-top: var(--s-4); }
.citations-legend .legend { margin: var(--s-2) 0; padding: 0; list-style: none; }
.citations-views { position: static; margin-bottom: var(--s-3); }
.citations-view-count { font-variant-numeric: tabular-nums; opacity: .8; }
.citations-filters { margin-bottom: var(--s-4); }
.citations-result-count { margin-bottom: var(--s-2); }
.citations-table th[scope="row"] { min-width: 10rem; overflow-wrap: anywhere; }
.citations-matches { white-space: nowrap; }
/* ---- prospects (Prospect snapshot, 25-10-2026) ---- */
.prospect-banner { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.prospect-pill { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--info-bg); color: var(--info); }
.prospect-layout { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; margin-top: var(--s-4); }
.prospect-layout > * { min-width: 0; }
@media (max-width: 1100px) { .prospect-layout { grid-template-columns: minmax(0, 1fr); } }
.prospect-snapshot, .prospect-kept { padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.prospect-snapshot h2, .prospect-kept h2 { margin-top: 0; }
.prospect-kept { margin-top: var(--s-5); }
.prospect-kept dl { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .45rem 1rem; margin: 0; }
.prospect-kept dt { font-weight: 600; }
.prospect-kept dd { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .prospect-kept dl { grid-template-columns: minmax(0, 1fr); } .prospect-kept dd { margin-bottom: .4rem; } }
.prospect-score-row { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.prospect-score-row .brand-score { margin: 0; }
.prospect-subhead { margin-top: var(--s-5); }
.prospect-table td, .prospect-table th { vertical-align: top; }
.prospect-table .meta { display: block; margin-top: .15rem; }
.prospect-unknown { color: var(--muted); font-weight: 600; }
.prospect-portfolio-line { margin: .4rem 0 0; }
.prospect-expiry { margin: .5rem 0 0; }


/* AI checks: health and progress (/ai-visibility/checks; app/views/ai-visibility/checks.php). */
.om-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.om-page > *, .om-panel > *, .om-card > * { min-width: 0; }
.om-head h1 { margin: 0 0 var(--s-1); }
.om-eyebrow { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.om-lede { margin: 0; color: var(--ink-2); max-width: 70ch; }
.om-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.om-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.om-card h2, .om-card h3 { margin: 0; font-size: 1rem; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.om-card p { margin: 0; }
.om-big { font-size: 1.35rem; font-weight: 700; }
.om-note { margin: 0; color: var(--muted); font-size: .875rem; }
.om-why { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.om-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.om-badge.is-good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.om-badge.is-bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.om-badge.is-warn { background: var(--warn-bg); color: var(--ink); border-color: transparent; }
.om-badge.is-info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.om-badge.is-muted { color: var(--muted); }
.om-bar { display: block; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.om-bar .om-seg.is-good { fill: var(--good); }
.om-bar .om-seg.is-info { fill: var(--info); }
.om-bar .om-seg.is-neutral { fill: var(--line-2); }
.om-bar .om-seg.is-muted { fill: var(--line); }
.om-seg.is-good, .om-dot.is-good { background: var(--good); }
.om-seg.is-info, .om-dot.is-info { background: var(--info); }
.om-seg.is-neutral, .om-dot.is-neutral { background: var(--line-2); }
.om-seg.is-muted, .om-dot.is-muted { background: var(--line); }
.om-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: .85rem; color: var(--ink-2); }
.om-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.om-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-3); }
.om-panel h2 { margin: 0; font-size: 1.1rem; }
.om-panel-head { display: grid; gap: var(--s-1); }
details.om-panel { display: block; }
details.om-panel > * + * { margin-top: var(--s-3); }
.om-panel .table-wrap { max-width: 100%; }
.om-more > summary { cursor: pointer; font-weight: 600; }
.om-att-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.om-att { border-left: 3px solid var(--line-2); padding-left: var(--s-3); }
.om-att.is-warn { border-left-color: var(--warn); }
.om-att.is-info { border-left-color: var(--info); }
.om-att span { display: block; color: var(--ink-2); font-size: .9rem; }
.om-matrix td, .om-matrix th { vertical-align: top; }
.om-src { font-weight: 600; font-size: .85rem; }
.om-src.is-omp { color: var(--good); }
.om-src.is-dfs { color: var(--ink-2); }
.om-src.is-run { color: var(--info); }
.om-src.is-none { color: var(--muted); font-weight: 500; }
.om-date { color: var(--ink-2); font-size: .85rem; }
.om-cell-warn { box-shadow: inset 3px 0 0 var(--warn); }
.om-next { white-space: nowrap; }
tr.is-bad th, tr.is-bad td { background: var(--bad-bg); }
@media (max-width: 900px) {
  .om-status { grid-template-columns: 1fr; }
}

/* AI checks: Usage tab (/ai-visibility/checks?tab=usage). Meters are SVG: no inline style. */
.om-tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); }
.om-tabs a { padding: var(--s-2) var(--s-3); color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.om-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.om-who { margin: 0; }
.om-left { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: var(--s-2); }
.om-window { color: var(--muted); font-weight: 500; font-size: .85rem; }
.om-admin { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px dashed var(--line-2); color: var(--muted); }
.om-allow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.om-meter { display: block; width: 100%; height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.om-meter .om-meter-fill { opacity: .45; }
.om-meter .om-meter-fill.is-ok { fill: var(--good); }
.om-meter .om-meter-fill.is-warn { fill: var(--warn); }
.om-meter .om-meter-fill.is-bad { fill: var(--bad); }
.om-meter .om-meter-mine { fill: var(--ink-2); }
.om-accts summary { cursor: pointer; font-size: .875rem; color: var(--ink-2); }
.om-accts ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-1); }
.om-accts li { display: grid; grid-template-columns: 8rem 1fr 3rem; gap: var(--s-2); align-items: center; font-size: .85rem; }
.om-callout { border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); }
.om-callout.is-bad { background: var(--bad-bg); border-color: transparent; color: var(--ink); }
.om-callout.is-good { background: var(--good-bg); border-color: transparent; color: var(--ink); }
.om-callout.is-warn { background: var(--warn-bg); border-color: transparent; color: var(--ink); }
.om-readings th[scope="row"] { font-weight: 500; min-width: 16rem; }