/* ==========================================================================================
   Ads Arsenal on Plain Platinum, v1 (2026-10-15, aa2-224). Accent: PETROL.
   The family system Search Arsenal and Conversion Arsenal ship, re-valued onto AA's own token
   and class names (handoff design_handoff_aa_plain_platinum, README §5). Linked AFTER
   design/styles.css and app.css on every page (src/http/shell.ts headDocument), so every old
   token name still resolves and only values change.
   Light is the default; dark follows the device unless data-theme says otherwise (the theme
   door in the top bar and the Settings choice write localStorage 'aa-theme').
   Ratios are WCAG 2 on the ground named (light: on #FFFFFF unless stated; dark: on #161719).
   Fonts are self-hosted (public/fonts, all SIL OFL 1.1): no font CDN, ever (family rule).
   ========================================================================================== */
@font-face{font-family:"Inter";src:url("../fonts/inter-var-c0360431.woff2?v=fffa241492f3") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2?v=fffa241492f3") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Noto Sans Mono";src:url("../fonts/noto-sans-mono-400.woff2?v=fffa241492f3") format("woff2");font-weight:400;font-display:swap}
:root{
  /* ---- type: Inter body, Archivo display, mono only for refs/hashes/evidence keys. 12px floor. ---- */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-mono:"Noto Sans Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --text-2xs:12px; --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:16px; --text-lg:17px;
  --text-xl:22px; --text-2xl:34px; --text-3xl:38px; --text-4xl:48px; --text-5xl:48px;
  --leading-tight:1.05; --leading-snug:1.4; --leading-normal:1.5; --leading-relaxed:1.55;
  --tracking-tighter:-.03em; --tracking-tight:-.011em; --tracking-wide:0; --tracking-wider:0; --tracking-label:0; --tracking-brand:0;

  /* ---- shape: 8 controls, 12 cards, 16 dialogs, pills fully round ---- */
  --radius-xs:4px; --radius-sm:8px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-full:999px;
  --pill-h:22px; --pill-px:8px; --pill-radius:999px; --pill-fs:12px; --pill-tracking:0;

  /* ---- motion: arrives quickly, settles without bouncing ---- */
  --duration-fast:100ms; --duration:150ms; --duration-slow:200ms;
  --ease-standard:cubic-bezier(.23,1,.32,1); --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);

  /* ---- base ramps. blue-* now carries petrol so stray var(--blue-*) refs follow the accent;
          violet-* is retired family-wide and resolves to graphite. ---- */
  --blue-50:#E2F1F3; --blue-100:#C9E6EA; --blue-200:#A9D6DC; --blue-300:#7FC1CB; --blue-400:#2AA5B5;
  --blue-500:#0B7285; --blue-600:#095E6E; --blue-700:#084C59; --blue-800:#0E3A43; --blue-900:#0E2A2F;
  --violet-50:#F4F6F8; --violet-100:#ECEEF1; --violet-300:#CACCD0; --violet-500:#6E7074; --violet-600:#525457; --violet-700:#3C434D;

  /* ---- neutrals, hue 258 (the shield's platinum) ---- */
  --bg-app:#F4F6F8;          /* grouped ground */
  --surface-1:#FFFFFF;       /* card */
  --surface-2:#F4F6F8;       /* hover row */
  --surface-3:#ECEEF1;       /* pressed, table head fill */
  --surface-sunken:#ECEEF1; --surface-inset:#FAFCFE; --surface-overlay:#FFFFFF;
  --border-subtle:#DCDEE1;   /* hairline, decorative */
  --border-default:#DCDEE1;
  --border-strong:#84888D;   /* control boundary: 3.57 white, 3.29 bg, 3.07 surface-3 / accent-subtle (step 6: handoff #868A8F was 2.99 on the table head) */
  --text-primary:#1A1C1E;    /* 17.09 on white, 15.78 on bg */
  --text-secondary:#525457;  /* 7.60 / 7.01 */
  --text-muted:#6A6C70;      /* 5.26 white / 4.86 bg / 4.53 on surface-3 + rail / 4.54 accent-subtle (step 6: handoff #6E7074 was 4.27 on the table head + rail) */
  --text-faint:#6A6C70;      /* faint retired: nothing below 4.5 */
  --text-disabled:#868A8F;   /* 3.47, disabled labels only */
  --text-inverse:#FFFFFF;

  /* ---- ACCENT: petrol. Interaction only: buttons, active nav, links, focus, selection, chart series. ---- */
  --accent:#0B7285;          /* fill; white on it 5.59; 5.59 on white as a control edge */
  --accent-hover:#095E6E;    /* white on it 7.2 */
  --accent-active:#084C59;
  --accent-fg:#FFFFFF;
  --accent-text:#0A6170;     /* links/labels: 7.12 on white, 6.57 on bg, 6.2 on accent-subtle-bg */
  --accent-subtle-bg:#E2F1F3;
  --accent-subtle-border:#A9D6DC;
  --accent-ring:color-mix(in srgb,#0B7285 35%,transparent);
  --focus:#0B7285;           /* 2px outline, 2px offset */

  /* ---- status: always a word + a shape + a colour. Colour follows the goal, not the sign. ---- */
  --success:#15803D; --success-text:#147A3A;   /* fill 5.02 on white; text 5.42 white / 4.66 on surface-3 + every soft tint (step 6) */
  --success-bg:color-mix(in oklab,#15803D 9%,#FFFFFF); --success-border:color-mix(in oklab,#15803D 30%,#FFFFFF);
  --warning:#8A5A06; --warning-text:#8A5A06;   /* 5.92: partial data, pacing off, medium confidence */
  --warning-bg:color-mix(in oklab,#C4870E 12%,#FFFFFF); --warning-border:color-mix(in oklab,#C4870E 38%,#FFFFFF);
  --danger:#C7342B; --danger-text:#B02D25;     /* 5.31 / 6.3: away from goal, nothing else */
  --danger-bg:color-mix(in oklab,#C7342B 9%,#FFFFFF); --danger-border:color-mix(in oklab,#C7342B 30%,#FFFFFF);
  /* needs_investigation: an open question. Graphite + open ring (shape) + the words. Not violet, not the accent. */
  --investigate:#525457; --investigate-text:#525457;   /* 7.60 */
  --investigate-bg:color-mix(in oklab,#1A1C1E 4%,#FFFFFF); --investigate-border:#84888D;
  --stable-bg:var(--surface-2); --stable-border:var(--border-default); --stable-text:var(--text-secondary);
  /* gap (aa2-224): the creative tile's 'stable' ribbon was yellow; stable is not a state hue, so it is the control line (3.47 light / 3.26 dark as a graphic) */
  --stable:var(--border-strong);

  /* ---- rail: dimmer than content; active = tint + 2px bar ---- */
  --rail-bg:#ECEEF1; --rail-border:#DCDEE1; --rail-item:#525457; --rail-item-hover-bg:#E2E5E9;
  --rail-item-active:#0A6170; --rail-item-active-bg:#E2F1F3; --rail-bar:#0B7285;

  /* ---- dataviz ---- */
  --chart-grid:#ECEEF1; --chart-axis:#6A6C70;
  --chart-line:#0B7285; --chart-area:color-mix(in srgb,#0B7285 12%,transparent);
  --chart-compare:#B9C3D4;   /* compared window, dashed */
  --chart-good:#15803D; --chart-bad:#C7342B; --chart-neutral:#B9C3D4;
  --heat-0:#E2F1F3; --heat-1:#B5DCE2; --heat-2:#7FC1CB; --heat-3:#3E9CAA; --heat-4:#0B7285; --heat-5:#084C59;
  --heat-best:#15803D; --heat-worst:#C7342B;
  /* platform facets stay the platforms' own colours, as 8px squares only */
  --platform-meta:#0866FF; --platform-google:#1A73E8; --platform-tiktok:#10121A;

  /* ---- elevation ---- */
  --shadow-xs:0 0 0 1px rgba(32,38,52,.08);
  --shadow-sm:0 0 0 1px rgba(32,38,52,.08),0 1px 2px rgba(32,38,52,.06);
  --shadow-md:0 0 0 1px rgba(32,38,52,.08),0 4px 8px -4px rgba(32,38,52,.08),0 16px 24px -8px rgba(32,38,52,.10);
  --shadow-lg:0 0 0 1px rgba(32,38,52,.08),0 8px 16px -4px rgba(32,38,52,.08),0 24px 32px -8px rgba(32,38,52,.12);
  --shadow-focus:0 0 0 3px var(--accent-ring);

  /* ---- family devices ---- */
  --rule:linear-gradient(90deg,#9CA5B2,#5F6875 40%,#AEB6C1 70%,#6F7784);   /* darkest stop 5.21 on bg */
  --metal-text:linear-gradient(180deg,#1A1C1E 0%,#2E343D 55%,#4A515C 100%);
  --metal-control:linear-gradient(180deg,#5F6876 0%,#3C434D 48%,#2B313A 52%,#4A515C 100%);  /* chrome pill, white ink 9.99 */
  --metal-ink:#FFFFFF;
  --btn-edge:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(20,24,30,.25);
  --btn-ghost-grad:linear-gradient(180deg,#FFFFFF 0%,#F1F3F6 100%);
  --btn-ghost-edge:inset 0 1px 0 #FFFFFF,0 0 0 1px #84888D,0 1px 2px rgba(20,24,30,.10);
  --chrome-edge:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.25);
  /* Capstone mark: the family's product colours (Travis 2026-10-15, Reed's family-marks.css; SA's live marks.css carries
     the same values), so every Arsenal's switcher shows all three alike (aa2-224, operator 2026-10-16). Search Cartridge
     Brass blade (#B07D22, 3.62 on white), Ads Petrol left leg (#0E6475, 6.78), Conversion Graphite right leg (#1A1C1E,
     17.09). Graphite has no hue, so the Conversion mark turns the rule over: its A is silver (--mark-conv-base, decorative)
     and its leg ink by day, white at night (.cap-conversion). Marks only: brass is not the caution amber. */
  --mark-base:#2E343D; --mark-ads:#0E6475; --mark-search:#B07D22; --mark-conv:#1A1C1E; --mark-conv-base:#9CA5B2;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg-app:#0D0E10; --surface-1:#161719; --surface-2:#1D1E20; --surface-3:#232427;
  --surface-sunken:#131416; --surface-inset:#131416; --surface-overlay:#1D1E20;
  --border-subtle:#252729; --border-default:#2C2E31;
  --border-strong:#6E7176;   /* 3.66 surface, 3.94 bg, 3.02+ on surface-3 and every soft tint (step 6: handoff #66696E was 2.69-2.82 there) */
  --text-primary:#EEF0F3;    /* 15.71 on surface */
  --text-secondary:#CACCD0;  /* 11.15 */
  --text-muted:#9C9FA2;      /* 6.74 */
  --text-faint:#9C9FA2; --text-disabled:#7C8086; --text-inverse:#0D0E10;

  --accent:#2AA5B5;          /* fill; #0D0E10 on it 6.6; 6.1 on surface as an edge */
  --accent-hover:#4CBCCA; --accent-active:#8ADDE6;
  --accent-fg:#0D0E10;
  --accent-text:#5CC8D4;     /* 9.2 on surface, 7.6 on accent-subtle-bg */
  --accent-subtle-bg:#0E2A2F; --accent-subtle-border:#1E5560;
  --accent-ring:color-mix(in srgb,#2AA5B5 45%,transparent);
  --focus:#5CC8D4;

  --success:#3BD38A; --success-text:#3BD38A;   /* 9.29 */
  --success-bg:color-mix(in oklab,#3BD38A 12%,#161719); --success-border:color-mix(in oklab,#3BD38A 36%,#161719);
  --warning:#F5B445; --warning-text:#F5B445;   /* 9.82 */
  --warning-bg:color-mix(in oklab,#F5B445 12%,#161719); --warning-border:color-mix(in oklab,#F5B445 36%,#161719);
  --danger:#FF7A6E; --danger-text:#FF7A6E;     /* 7.06 */
  --danger-bg:color-mix(in oklab,#FF7A6E 12%,#161719); --danger-border:color-mix(in oklab,#FF7A6E 36%,#161719);
  --investigate:#CACCD0; --investigate-text:#CACCD0;   /* 11.15 */
  --investigate-bg:color-mix(in oklab,#EEF0F3 4%,#161719); --investigate-border:#6E7176;

  --rail-bg:#131416; --rail-border:#252729; --rail-item:#CACCD0; --rail-item-hover-bg:#1D1E20;
  --rail-item-active:#5CC8D4; --rail-item-active-bg:#0E2A2F; --rail-bar:#2AA5B5;

  --chart-grid:#252729; --chart-axis:#9C9FA2;
  --chart-line:#2AA5B5; --chart-area:color-mix(in srgb,#2AA5B5 14%,transparent);
  --chart-compare:#3A4150;
  --chart-good:#3BD38A; --chart-bad:#FF7A6E; --chart-neutral:#3A4150;
  --heat-0:#11292D; --heat-1:#154550; --heat-2:#1B6573; --heat-3:#2A8E9E; --heat-4:#4CBCCA; --heat-5:#8ADDE6;
  --heat-best:#3BD38A; --heat-worst:#FF7A6E;

  /* in the dark, lighter means higher; black shadows only on floating layers */
  --shadow-xs:inset 0 1px rgba(255,255,255,.06);
  --shadow-sm:inset 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.05);
  --shadow-md:0 0 0 1px rgba(255,255,255,.08),inset 0 1px rgba(255,255,255,.06),0 16px 40px -8px rgba(0,0,0,.45);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.08),inset 0 1px rgba(255,255,255,.06),0 24px 56px -8px rgba(0,0,0,.55);

  --rule:linear-gradient(90deg,#E9EDF2,#8E96A2 40%,#D5DAE1 70%,#9CA5B2);   /* darkest stop 6.47 on bg */
  --metal-text:linear-gradient(180deg,#FFFFFF 0%,#E6EAEF 50%,#AEB6C1 100%);
  --metal-control:linear-gradient(180deg,#F6F7F9 0%,#DCE1E7 48%,#C2C9D2 52%,#E6EAEF 100%);  /* dark ink 10.65 */
  --metal-ink:#16181B;
  --btn-edge:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.5);
  --btn-ghost-grad:linear-gradient(180deg,#2A2C30 0%,#1D1E21 100%);
  --btn-ghost-edge:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px #6E7176,0 1px 2px rgba(0,0,0,.4);
  --chrome-edge:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.45);
  --mark-base:#C9CED6; --mark-ads:#5DB8CC; --mark-search:#D4A24C; --mark-conv:#F4F6F8; --mark-conv-base:#5F6875;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg-app:#0D0E10; --surface-1:#161719; --surface-2:#1D1E20; --surface-3:#232427;
    --surface-sunken:#131416; --surface-inset:#131416; --surface-overlay:#1D1E20;
    --border-subtle:#252729; --border-default:#2C2E31;
    --border-strong:#6E7176;   /* 3.66 surface, 3.94 bg, 3.02+ on surface-3 and every soft tint (step 6) */
    --text-primary:#EEF0F3;    /* 15.71 on surface */
    --text-secondary:#CACCD0;  /* 11.15 */
    --text-muted:#9C9FA2;      /* 6.74 */
    --text-faint:#9C9FA2; --text-disabled:#7C8086; --text-inverse:#0D0E10;
  
    --accent:#2AA5B5;          /* fill; #0D0E10 on it 6.6; 6.1 on surface as an edge */
    --accent-hover:#4CBCCA; --accent-active:#8ADDE6;
    --accent-fg:#0D0E10;
    --accent-text:#5CC8D4;     /* 9.2 on surface, 7.6 on accent-subtle-bg */
    --accent-subtle-bg:#0E2A2F; --accent-subtle-border:#1E5560;
    --accent-ring:color-mix(in srgb,#2AA5B5 45%,transparent);
    --focus:#5CC8D4;
  
    --success:#3BD38A; --success-text:#3BD38A;   /* 9.29 */
    --success-bg:color-mix(in oklab,#3BD38A 12%,#161719); --success-border:color-mix(in oklab,#3BD38A 36%,#161719);
    --warning:#F5B445; --warning-text:#F5B445;   /* 9.82 */
    --warning-bg:color-mix(in oklab,#F5B445 12%,#161719); --warning-border:color-mix(in oklab,#F5B445 36%,#161719);
    --danger:#FF7A6E; --danger-text:#FF7A6E;     /* 7.06 */
    --danger-bg:color-mix(in oklab,#FF7A6E 12%,#161719); --danger-border:color-mix(in oklab,#FF7A6E 36%,#161719);
    --investigate:#CACCD0; --investigate-text:#CACCD0;   /* 11.15 */
    --investigate-bg:color-mix(in oklab,#EEF0F3 4%,#161719); --investigate-border:#6E7176;
  
    --rail-bg:#131416; --rail-border:#252729; --rail-item:#CACCD0; --rail-item-hover-bg:#1D1E20;
    --rail-item-active:#5CC8D4; --rail-item-active-bg:#0E2A2F; --rail-bar:#2AA5B5;
  
    --chart-grid:#252729; --chart-axis:#9C9FA2;
    --chart-line:#2AA5B5; --chart-area:color-mix(in srgb,#2AA5B5 14%,transparent);
    --chart-compare:#3A4150;
    --chart-good:#3BD38A; --chart-bad:#FF7A6E; --chart-neutral:#3A4150;
    --heat-0:#11292D; --heat-1:#154550; --heat-2:#1B6573; --heat-3:#2A8E9E; --heat-4:#4CBCCA; --heat-5:#8ADDE6;
    --heat-best:#3BD38A; --heat-worst:#FF7A6E;
  
    /* in the dark, lighter means higher; black shadows only on floating layers */
    --shadow-xs:inset 0 1px rgba(255,255,255,.06);
    --shadow-sm:inset 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.05);
    --shadow-md:0 0 0 1px rgba(255,255,255,.08),inset 0 1px rgba(255,255,255,.06),0 16px 40px -8px rgba(0,0,0,.45);
    --shadow-lg:0 0 0 1px rgba(255,255,255,.08),inset 0 1px rgba(255,255,255,.06),0 24px 56px -8px rgba(0,0,0,.55);
  
    --rule:linear-gradient(90deg,#E9EDF2,#8E96A2 40%,#D5DAE1 70%,#9CA5B2);   /* darkest stop 6.47 on bg */
    --metal-text:linear-gradient(180deg,#FFFFFF 0%,#E6EAEF 50%,#AEB6C1 100%);
    --metal-control:linear-gradient(180deg,#F6F7F9 0%,#DCE1E7 48%,#C2C9D2 52%,#E6EAEF 100%);  /* dark ink 10.65 */
    --metal-ink:#16181B;
    --btn-edge:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.5);
    --btn-ghost-grad:linear-gradient(180deg,#2A2C30 0%,#1D1E21 100%);
    --btn-ghost-edge:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px #6E7176,0 1px 2px rgba(0,0,0,.4);
    --chrome-edge:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.45);
    --mark-base:#C9CED6; --mark-ads:#5DB8CC; --mark-search:#D4A24C; --mark-conv:#F4F6F8; --mark-conv-base:#5F6875;
    color-scheme:dark;
  }
}

/* ==========================================================================================
   THEME (README §5.2): the door in the top bar, the Settings choice.
   ========================================================================================== */
/* The theme door: SA's .theme-door box. Named for where it goes; the matching half shows.
   --text-secondary on the top bar 7.60 light / 11.15 dark; the edge --border-strong 3.47 / 3.26 (non-text, 1.4.11). */
.aa-themedoor{display:inline-flex;align-items:center;flex:none;min-height:28px;padding:3px 10px;background:none;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-secondary);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.aa-themedoor:hover{color:var(--text-primary);border-color:var(--accent)}
.aa-themedoor>span{display:inline-flex;align-items:center;gap:6px}
.aa-themedoor svg{width:16px;height:16px;flex:none}
.aa-themedoor__to-light{display:none!important}
:root[data-theme="dark"] .aa-themedoor__to-dark{display:none!important}
:root[data-theme="dark"] .aa-themedoor__to-light{display:inline-flex!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .aa-themedoor__to-dark{display:none!important}
  :root:not([data-theme="light"]) .aa-themedoor__to-light{display:inline-flex!important}
}
html:not(.aa-js) .aa-themedoor,html:not(.aa-js) .aa-themeopts,html:not(.aa-js) .aa-js-only{display:none}
.aa-js-only{display:contents}
/* Settings: Light / Dark / System, SA's .theme-opt segmented control. Selected = accent fill (accent-fg on it 5.59 / 6.6). */
.aa-themeopts{display:inline-flex;align-self:flex-start;gap:2px;padding:2px;border-radius:var(--radius-full);background:var(--surface-3);box-shadow:var(--shadow-xs)}
.aa-themeopt{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text-secondary);padding:6px 14px;border-radius:var(--radius-full);cursor:pointer;min-height:32px}
.aa-themeopt:hover{color:var(--text-primary)}
.aa-themeopt.on{color:var(--accent-fg);background:var(--accent)}
@media (max-width:720px){.aa-themedoor{min-height:44px;padding:6px 12px}.aa-themeopt{min-height:44px;padding:8px 16px}}

/* ==========================================================================================
   COMPONENT MOVES: existing .aa-* classes re-cut to the Plain Platinum anatomy.
   Fold these into the matching blocks of public/design/components.css (or append as a
   "Plain Platinum" section after it). Order of rollout in README §5.
   ========================================================================================== */
body{font-family:var(--font-sans);font-feature-settings:"cv05" 1,"cv08" 1;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
.tnum,.num{font-feature-settings:"tnum" 1,"cv05" 1,"cv08" 1;font-variant-numeric:tabular-nums lining-nums}
h1,h2,h3{text-wrap:balance} p{text-wrap:pretty}

/* links: accent text, 2px-offset underline; classed anchors (rail items, crumbs, trace) opt out */
a:not([class]){color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:not([class]):hover{color:var(--accent-hover)}
.aa-rail__item,.aa-crumb,.aa-insight__trace,.aa-status-strip a,.aa-cpline a{text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- Button: every button has a body (two-tone of its own colour, lit top edge), pill ---- */
.aa-btn{border:0;border-radius:var(--radius-full);height:40px;padding:0 18px;font-size:14px;font-weight:600;
  transition:filter var(--duration-fast),transform var(--duration-fast),box-shadow var(--duration-fast)}
.aa-btn--sm{height:32px;padding:0 14px;font-size:13px;border-radius:var(--radius-full)}
.aa-btn--lg{height:48px;font-size:15px}
.aa-btn--icon{width:40px;padding:0}
.aa-btn--icon.aa-btn--sm{width:32px}
.aa-btn:active{transform:scale(.97)}
.aa-btn:focus-visible{box-shadow:none;outline:2px solid var(--focus);outline-offset:2px}
.aa-btn[disabled],.aa-btn--disabled{opacity:1;background:var(--surface-2);color:var(--text-disabled);box-shadow:var(--shadow-xs)}
.aa-btn--primary,.aa-btn--primary:hover{color:var(--accent-fg);box-shadow:var(--btn-edge);
  background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 86%,white) 0%,var(--accent) 55%,color-mix(in oklab,var(--accent) 84%,black) 100%)}
.aa-btn--primary:hover{filter:brightness(1.06)}
.aa-btn--secondary,.aa-btn--secondary:hover{background:var(--btn-ghost-grad);color:var(--text-primary);box-shadow:var(--btn-ghost-edge);border:0}
.aa-btn--secondary:hover{filter:brightness(1.03)}
.aa-btn--ghost{color:var(--text-secondary)}
.aa-btn--danger,.aa-btn--danger:hover{color:#FFFFFF;box-shadow:var(--btn-edge);
  background:linear-gradient(180deg,color-mix(in oklab,#C7342B 86%,white) 0%,#C7342B 55%,color-mix(in oklab,#C7342B 84%,black) 100%)}
:root[data-theme="dark"] .aa-btn--danger{color:#FFFFFF}
/* the chrome pill: ONE hero action per page (Link selected accounts, Run diagnosis). Never on a row, never destructive. */
.aa-btn--chrome,.aa-btn--chrome:hover{background:var(--metal-control);color:var(--metal-ink);box-shadow:var(--chrome-edge);border:0}
.aa-btn--chrome:hover{filter:brightness(1.03)}

/* ---- Panels: the platinum rule painted inside the rounded corner, no border ---- */
.aa-card,.aa-table__wrap,.aa-trace-block,.aa-auth__form-card{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  background:var(--rule) top/100% 3px no-repeat,var(--surface-1)}
.aa-card--interactive:hover{border:0;box-shadow:var(--shadow-md)}
/* §8.3: the rule cap first, then the right-edge scroll fade (local + scroll layers: a shadow only while there is more to the right) */
.aa-table__wrap{background:
  var(--rule) top/100% 3px no-repeat,
  linear-gradient(to left,var(--surface-1) 40%,transparent) right center/32px 100% no-repeat local,
  linear-gradient(to left,color-mix(in srgb,var(--text-primary) 14%,transparent),transparent) right center/14px 100% no-repeat scroll,
  var(--surface-1)}
.aa-empty,.aa-dormant{border-radius:var(--radius-lg);border-color:var(--border-strong)}

/* ---- Page title: Archivo condensed 800 in metal, platinum rule under it ---- */
.aa-pagehead{position:relative;padding-bottom:15px}
.aa-pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--rule)}
.aa-pagehead h1,.aa-auth__title{font-family:var(--font-display);font-stretch:75%;font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.02em;
  background:var(--metal-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.aa-section__title{font-family:var(--font-display);font-stretch:75%;font-weight:800;font-size:22px;line-height:1.2}

/* ---- Insight card: a list item, not a panel. State in a 3px inset bar. ---- */
.aa-insight{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);gap:12px}
.aa-insight--action{box-shadow:inset 3px 0 0 var(--accent),var(--shadow-sm)}
.aa-insight--investigate{box-shadow:inset 3px 0 0 var(--investigate),var(--shadow-sm)}
.aa-insight__title{font-size:17px;font-weight:600;letter-spacing:-.012em}
.aa-insight__narrative{font-size:15px;line-height:1.5}
.aa-insight__meta .aa-tag{flex:none;max-width:none}
.aa-insight__meta .aa-pill__label{overflow:visible}
.aa-insight__action{border-radius:var(--radius-md);flex-wrap:wrap;align-items:center}
.aa-insight__action-body{flex:1 1 320px}
.aa-insight__action>.aa-btn{flex:none}
.aa-insight__trace{font-family:var(--font-sans);font-size:13px}
.aa-insight__expand{font-size:13px}
.aa-insight__kind{font-size:12px;color:var(--text-muted)}

/* ---- Pills: 22px, 12px text. Open question = open ring, not a dot. ---- */
.aa-badge,.aa-conf,.aa-hyp{font-size:12px;letter-spacing:0;font-weight:600}
.aa-tag,.aa-pbadge{font-size:12px;letter-spacing:0;border-radius:6px}
.aa-badge--investigate .aa-badge__dot{background:transparent;border:1.5px solid currentColor;width:8px;height:8px;box-sizing:border-box}
.aa-hyp--undecidable{border-style:dashed}
.aa-tab__count,.aa-rail__badge{font-size:12px;min-width:20px;height:20px}

/* ---- Retired: uppercase micro-labels with wide tracking. Sentence case, 13px 500, meta ink. ---- */
.aa-kpi__label,.aa-table th,.aa-rail__section,.aa-insight__cluster,.aa-trace-block__head{
  text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--text-muted)}
.aa-table th{font-weight:600}
.aa-table{font-size:14px}
.aa-meta-strip{font-family:var(--font-sans);font-size:13px}

/* ---- KPI: Archivo 600 figures, tabular ---- */
.aa-kpi__value{font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aa-kpi__value--sm{font-size:22px}
.aa-trend{font-size:13px}

/* ---- Inputs: control line clears 3:1; focus = accent outline ---- */
.aa-input,.aa-select select{border-color:var(--border-strong);border-radius:var(--radius-sm);height:40px;font-size:14px}
.aa-input:focus,.aa-select select:focus{box-shadow:none;border-color:var(--focus);outline:2px solid var(--focus);outline-offset:1px}
.aa-check__box{border-color:var(--border-strong)}
.aa-field__hint{font-size:13px}

/* ---- Tabs ---- */
.aa-tabs{border-bottom-color:var(--border-subtle)}
.aa-tab{font-size:14px;color:var(--text-secondary)}
.aa-tab--active{color:var(--text-primary);font-weight:600}

/* ---- Rail: sidebar on --rail-bg, active = tint + 2px bar (never colour alone), Capstone brand ---- */
.aa-rail{height:auto;align-self:stretch}
.aa-rail__item{font-size:14px}
.aa-rail__item--active{box-shadow:inset 2px 0 0 var(--rail-bar)}
/* ---- Capstone fills by class (when shell.ts inlines the mark) ---- */
.mark-base{fill:var(--mark-base)} .mark-ads{fill:var(--mark-ads)}

/* ---- Auth: no glow (retired), app-icon ground, chrome submit ---- */
.aa-auth__brand{background:#0F1115}
.aa-auth__glow{display:none}

/* ---- Motion ---- */
@media (prefers-reduced-motion:reduce){.aa-btn:active{transform:none}*{transition-duration:120ms!important;animation:none!important}}

/* ==========================================================================================
   MARKS (README §5.4): the Capstone in the rail as the family switcher, the endorsed lockup
   on the auth panel and the public documents. Shapes in src/http/marks.ts; fills by class.
   The switcher is SA's (sa-components.css "Family switcher" + marks.css) on AA's tokens, with
   the family 12px floor and sentence case applied to its item words and the lock label.
   ========================================================================================== */
/* the siblings' parts in the family's colours (tokens in :root; marks only, never UI here); the Conversion mark's A is silver */
.mark-search{fill:var(--mark-search)} .mark-conv{fill:var(--mark-conv)}
.cap-conversion .mark-base{fill:var(--mark-conv-base)}
.capstone{display:block;flex:none;width:24px;height:24px}
.aa-rail__brand{display:block;height:auto;min-height:var(--topbar-height);padding:12px 12px 10px;border-bottom:1px solid var(--rail-border)}
.family{display:flex;flex-direction:column;gap:6px}
.family-current{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;background:none;
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;
  transition:border-color var(--duration),background var(--duration)}
.family-current:hover{border-color:var(--border-strong);background:var(--rail-item-hover-bg)}
.family-current[aria-expanded="true"]{border-color:var(--accent)}
.family-current .brand-mark{width:24px;height:24px}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15}
.brand-name{font-family:var(--font-display);font-stretch:100%;font-size:14px;font-weight:600;letter-spacing:.005em;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-by{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:0;color:var(--text-muted);white-space:nowrap}
.brand-by .shield{display:block;width:8px;height:12px;flex:none}
.family-chev{margin-left:auto;flex:none;color:var(--text-muted);transition:transform var(--duration) var(--ease-out)}
.family-current[aria-expanded="true"] .family-chev{transform:rotate(180deg)}
/* aa2-224 polish: the menu is a real dropdown (operator saw the in-flow list with no surface of its own, reading as
   transparent): an opaque overlay surface with the floating-layer elevation, in both themes, over the rail below it. */
.family{position:relative}
.family-menu{display:none;flex-direction:column;gap:2px;position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  padding:4px;background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.family-menu.open{display:flex}
.family-menu a.family-item:hover{background:var(--surface-2)}
.family-item{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 9px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:13px;color:var(--rail-item);text-decoration:none;overflow:hidden}
a.family-item:hover{background:var(--rail-item-hover-bg);color:var(--text-primary)}
.family-item .capstone{width:18px;height:18px}
.family-item .fi-word{font-family:var(--font-display);font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.family-item.locked{color:var(--text-muted);cursor:not-allowed}
.family-item .lock{margin-left:auto;color:var(--text-muted);display:inline-flex;flex:none}
.family-item .lock-label{font-size:12px;font-weight:500;color:var(--text-muted);margin-left:5px;flex:none}
.family-item.active{border-color:var(--border-subtle);background:var(--rail-item-active-bg);color:var(--text-primary);box-shadow:inset 2px 0 0 var(--rail-bar)}
.family-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* The endorsed lockup: ADS / ARSENAL by Battle Bridge (SA's .lockup). */
.lockup{display:inline-flex;align-items:center;gap:14px}
.lockup .lk-mark{width:44px;height:44px}
.lk-text{display:flex;flex-direction:column;line-height:1}
.lk-name{display:flex;flex-direction:column;gap:4px;font-family:var(--font-display);font-stretch:75%;text-transform:uppercase;color:var(--text-primary)}
.lk-p{font-size:26px;font-weight:800;letter-spacing:.005em}
.lk-f{font-size:12px;font-weight:600;letter-spacing:.3em;font-stretch:100%;color:var(--text-muted)}
.lk-by{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.lk-by .bb-lockup{display:block;width:36px;height:22px;flex:none}
/* the auth brand panel is the app-icon ground in both themes: dark-ground platinum, light ink */
.aa-auth__brand{--mark-base:#C9CED6;--mark-ads:#5DB8CC;--text-primary:#EEF0F3;--text-muted:#9C9FA2;--accent-text:#5CC8D4;--accent-hover:#8ADDE6}   /* links on #0F1115: 9.6 */
.aa-doc__brand{justify-content:center}

/* ==========================================================================================
   CHARTS (README §5.5): one series in --chart-line, nulls are gaps (views-performance.ts
   trendChart plots by calendar day and breaks the path), heatmap on --heat-0..5 with the
   best / worst windows outlined in --heat-best / --heat-worst (components.ts daypartHeatmap).
   ========================================================================================== */
.aa-trendchart{display:block}
.aa-trendchart__axis{display:flex;justify-content:space-between;margin-top:var(--space-2);font-size:12px}
.aa-heat__axis{font-size:12px}
.aa-heat__callout{font-size:13px}

/* ==========================================================================================
   GAP SWEEP (aa2-224 brief item 2): elements the handoff does not name, moved to the nearest
   system equivalent. Each line names the gap; the full list + decisions is in the mission RESULT.
   ========================================================================================== */
/* insight titles are list-item titles in the body face (Inter 17 600); Archivo stays on page / section titles */
.aa-insight__title{font-family:var(--font-sans);letter-spacing:-.011em}
/* the ⓘ popover title was an uppercase tracked micro-label */
.aa-popover__title{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--text-muted)}
/* the tooltip: dark in both themes was keyed on [data-theme] only, so the system-dark twin missed it */
.aa-tipbox{background:#1A1C1E;color:#EEF0F3}
:root[data-theme="dark"] .aa-tipbox{background:var(--surface-3);color:var(--text-primary);border:1px solid var(--border-default);box-shadow:var(--shadow-md)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aa-tipbox{background:var(--surface-3);color:var(--text-primary);border:1px solid var(--border-default);box-shadow:var(--shadow-md)}}
/* the checkbox tick sits on the accent fill: accent-fg (white light 5.59 / ink dark 6.6), was #fff or gray-950 by [data-theme] only */
.aa-check__box svg,[data-theme="dark"] .aa-check input:checked+.aa-check__box svg{color:var(--accent-fg)}
/* old 3px --shadow-focus halos -> the family focus outline */
.aa-check input:focus-visible+.aa-check__box,.aa-memberlist:focus-visible,[data-results-heading]:focus-visible,[data-reports-results] .error:focus-visible{
  box-shadow:none;outline:2px solid var(--focus);outline-offset:2px}
/* the detail switch in the top bar: SA's segmented control (same anatomy as the Settings theme choice) */
.aa-detailtoggle{border-radius:var(--radius-full);background:var(--surface-3);padding:2px;gap:2px;border:0;box-shadow:var(--shadow-xs)}
.aa-detailtoggle button{border-radius:var(--radius-full);font-size:13px;font-weight:600;padding:4px 12px}
.aa-detailtoggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
/* policy links + the auth host line had inline gray-500 styles (shell.ts) */
.aa-policylinks{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) 0 0;font-size:12px;color:var(--text-muted)}
.aa-policylinks a{color:var(--text-muted)}
.aa-policylinks a:hover{color:var(--accent-text)}
.aa-auth__host{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.aa-auth__sub{color:#CACCD0}   /* on the app-icon ground #0F1115: 11.9 */
/* the creative copy quote: a quoted block, not a state bar; the bar becomes the inset rule */
.aa-cr-quote{border-left:0;box-shadow:inset 3px 0 0 var(--border-default);border-radius:var(--radius-sm)}

/* ==========================================================================================
   SPACING PASS (aa2-224 brief item 4). Phone widths (<= 720px): the shell had no small-screen
   layout at all (the 232px rail left a 94px content column at 390). The rail stacks above the
   page as a bar: the family switcher, then the nav as one scrolling row, the footer as a row.
   ========================================================================================== */
@media (max-width:720px){
  .aa-shell{flex-direction:column;height:auto;min-height:100vh;overflow:visible}
  .aa-rail{width:auto;height:auto;border-right:0;border-bottom:1px solid var(--rail-border);overflow:visible;position:relative;z-index:30}
  .aa-rail__brand{min-height:0;border-bottom:0;padding:10px 12px 6px}
  .aa-rail__nav{flex-direction:row;flex:none;overflow-x:auto;padding:4px 12px 8px;gap:4px;scrollbar-width:none}
  .aa-rail__nav::-webkit-scrollbar{display:none}
  .aa-rail__item{flex:none;white-space:nowrap;min-height:40px}
  .aa-rail__item--active{box-shadow:inset 0 -2px 0 var(--rail-bar)}
  .aa-rail__footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:6px 12px 8px}
  .aa-rail__logout .aa-rail__item{width:auto}
  .aa-rail__footer .aa-policylinks{padding:0}
  .aa-main{min-width:0}
  .aa-topbar{height:auto;min-height:var(--topbar-height);flex-wrap:wrap;padding:8px 16px;row-gap:8px}
  .aa-content{overflow:visible;padding:16px}
  .aa-pagehead h1{font-size:28px;overflow-wrap:anywhere}
  .aa-pagehead__title{min-width:0;max-width:100%}
  .aa-input,.aa-select select{min-width:0;max-width:100%}
  /* inline flex rows in the views (button rows, header rows) wrap instead of pushing the page wide */
  .aa-content [style*="display:flex"]{flex-wrap:wrap}
  .aa-content [style*="display:flex"]>*,.aa-section,.aa-card{min-width:0;max-width:100%}
  .aa-tabs{overflow-x:auto;scrollbar-width:none}
  .aa-insight__evidence{overflow-x:auto}
  /* the 24-hour daypart grid fits a phone: 8px cells, 2px gaps (GD SpyGuy property at 390 ran 88px wide) */
  .aa-heat{gap:2px;grid-template-columns:auto repeat(24,minmax(8px,1fr))}
  .aa-heat__cell{min-width:8px}
  .aa-tab{flex:none;white-space:nowrap}
  .aa-content__inner>*{min-width:0;max-width:100%}
}
/* mono is for refs, hashes and evidence keys only: data figures (table numbers, KPI values, the range window) use Inter tnum */
.num.mono,.aa-kpi__value.mono,[data-aa-range-window]{font-family:var(--font-sans);font-feature-settings:"tnum" 1,"cv05" 1,"cv08" 1;font-variant-numeric:tabular-nums lining-nums}
/* the KPI figure wraps rather than running past its cell ("Proj $47k / $42k" at 1280) */
.aa-kpi__value{overflow-wrap:anywhere}
/* the headline row took --text-2xl, which is now the 34px page-title size: KPI figures are 30 (handoff §7) */
.aa-kpi--headline .aa-kpi__value{font-size:30px}
.aa-kpirow--secondary .aa-kpi__value{font-size:17px}
/* a table's sr-only labels are absolutely placed: the wrap must be their containing block, or they escape the
   wrap's scroll clip and widen the page (.aa-content is the nearest positioned ancestor otherwise) */
.aa-table__wrap{position:relative}

/* REVIEW-1 folds */
/* L5: the status strip and checkpoint trail links keep no underline (opt-out line at the top of COMPONENT MOVES) */
/* L6: the rail scrolls rather than clipping Log out on short or zoomed viewports */
@media (min-width:721px){.aa-rail{overflow-y:auto}}   /* phone: the stacked bar never scrolls, so the switcher dropdown can float over the page */
/* M1: a sibling that does not open from here makes no plan claim */
.family-item.unlinked{color:var(--text-muted);cursor:default}
/* L4: metal titles are background-clipped text, which print drops: print them in plain ink */
@media print{.aa-pagehead h1,.aa-auth__title{background:none;color:#1A1C1E;-webkit-text-fill-color:#1A1C1E}}

/* ==========================================================================================
   aa2-224 POLISH (operator 2026-10-16). Dividers, spacing sweep, pagination chrome, upload
   controls. Each block names the operator item it answers.
   ========================================================================================== */
/* Item 4, dividers: the panel cap and the page-title rule already match the pack exactly (3px, same stops). The 1px grey
   hairlines that split a card into parts (the Performance card's KPI rows, the property tile KPIs, settings section breaks)
   take the platinum rule too, at 2px (the pack's round-2 edge weight), so a divider inside a panel reads as the same device
   as the cap above it (pack SPEC: the rule goes "over any module that needs to be told apart from a card"). */
.aa-kpirow--secondary,.aa-prop__kpis{border-top:0;background:var(--rule) top/100% 2px no-repeat}
.aa-set-divider{border:0;height:2px;border-radius:1px;background:var(--rule)}

/* Item 3, budget pacing (operator: the tile broke its card or wrapped). KPI figures are nowrap, so a long figure ran
   past the tile at 1280 (five tiles). Each headline-row tile is now a size container and its figure scales to the tile,
   capped at the 30px KPI size; the projection ("Proj $4.6k / $6k", the longest figure) scales on its own, tighter
   curve. The verdict and the settling note wrap as whole units, never mid-phrase. */
.aa-kpirow:not(.aa-kpirow--secondary)>.aa-kpi{container-type:inline-size}
.aa-kpirow:not(.aa-kpirow--secondary)>.aa-kpi>.aa-kpi__value{font-size:min(30px,15cqi)}
.aa-kpi__value .aa-pace{font-size:min(30px,11cqi);white-space:nowrap}
.aa-kpi__sub [data-forecast-flag]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 6px;max-width:100%}
.aa-pace__note{white-space:nowrap}
/* Item 3, Other organizations (super-admin dashboard): the org header row ("Log in as", "Archive…") sat flush on the
   table card below it. A rhythm gap separates the header from its card, and the buttons wrap as a group on a phone. */
.aa-orghead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.aa-orghead>.aa-section__title{margin:0;min-width:0}
/* Item 3, settings + uploads. The secondary controls under a settings form ("Clear my choice", "Confirm", "Read again")
   were bare ghost text floating under the primary button, inset by the pill padding: they get the ghost-pill body so they
   line up as buttons on the card edge. */
.aa-set-row--links{gap:var(--space-2) var(--space-3)}
.aa-set-row--links .aa-btn--ghost{background:var(--btn-ghost-grad);box-shadow:var(--btn-ghost-edge);color:var(--text-primary)}
/* File inputs (Creative upload, Report branding logo) were the browser's raw control squeezed into a 40px text box.
   The field grows to fit and the picker button is the family's ghost pill. */
input[type="file"].aa-input{height:auto;min-height:44px;padding:5px 8px 5px 5px;line-height:1.4;font-size:13px;color:var(--text-secondary);cursor:pointer;max-width:100%}
input[type="file"].aa-input::file-selector-button{height:32px;margin-right:12px;padding:0 14px;border:0;border-radius:var(--radius-full);
  background:var(--btn-ghost-grad);box-shadow:var(--btn-ghost-edge);color:var(--text-primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
input[type="file"].aa-input:hover::file-selector-button{filter:brightness(1.03)}
/* Report branding's two colour fields: a label that wraps ("Secondary colour" in the narrow hub card) no longer drops its
   input below its neighbour's */
.aa-set-grid--end{align-items:end}
/* Item 3, smooshed pills: inside tables every badge may wrap, so the dashboard's two-word state pills broke onto two
   lines in their narrow columns ("Not / set" in KPI, "23% / under" in Budget pacing). Those state words hold one line;
   every other table pill keeps wrapping (a blanket nowrap would widen narrow tables into a scrollbar: review L5). The
   dashboard's projection figure is a data figure: Inter tnum, not mono (views-portfolio). */
.aa-table [data-kpi-unset] .aa-badge,.aa-table [data-kpi-unset] .aa-pill__label,
.aa-table [data-forecast-flag] .aa-badge:not(.aa-badge--long),.aa-table [data-forecast-flag] .aa-badge:not(.aa-badge--long) .aa-pill__label{white-space:nowrap}

/* ==========================================================================================
   NARROW DESKTOP (aa2-204, operator 2026-10-16: page-level sideways scroll on an 11-inch screen).
   Rule: .aa-content never scrolls sideways (swept on GD data at 1024-1366, light + dark; the rendered census pins
   1024 / 1280 / 1360 / 1440, and the document at 390). Rows that ran
   past it wrap; a table gives up width in this order before its own wrap scrolls (the last resort):
   cell padding, secondary text, status pills wrap inside their border, the name row stacks its badges,
   the portfolio's Open column goes (the name links to the same page). The table rules key on the
   table's own width (.aa-dt is a size container), so 1280 and up keep the 10-16 layouts; a phone's tables are
   narrower still and take the same rules (less sideways scroll inside their cards, no Open button).
   ========================================================================================== */
@media (min-width:721px){
  /* page-head button rows (Property page: up to five buttons) and tab strips (Creative, Settings) wrap */
  .aa-pagehead [style*="display:flex"]{flex-wrap:wrap}
  .aa-pagehead>*{min-width:0;max-width:100%}
  .aa-pagehead h1{overflow-wrap:anywhere}
  .aa-tabs{flex-wrap:wrap}
}
@media (min-width:721px) and (max-width:1199px){
  .aa-table th,.aa-table td{padding-left:10px;padding-right:10px}
  .aa-settings .aa-table td.mono,.aa-settings .aa-table td .mono{overflow-wrap:anywhere}
}
/* 60-64rem (a 1280 window, rail open): cell padding only; Inter 4.1's slightly wider figures cost the Property overview 3px there */
@container (max-width:64rem){
  .aa-dt .aa-table th,.aa-dt .aa-table td{padding-left:12px;padding-right:12px}
}
@container (max-width:60rem){
  .aa-dt__primary{min-width:9rem}
  .aa-dt .aa-table th,.aa-dt .aa-table td{padding-left:10px;padding-right:10px}
  .aa-dt .aa-namerow{flex-wrap:wrap;row-gap:2px}
  .aa-dt .aa-namerow__name{white-space:normal;overflow-wrap:anywhere}
  .aa-dt .aa-table td.num .aa-note{white-space:normal}
  /* the pacing verdict and "Not set" keep their one line (10-16 polish rule above); other status pills wrap */
  .aa-dt__status .aa-badge,.aa-dt__status .aa-badge .aa-pill__label{white-space:normal}
  .aa-dt__status .aa-badge:not(.aa-badge--long){max-width:18ch}
  /* ...but a one-line pacing verdict may not be capped narrower than its words ("not enough data yet") */
  .aa-dt__status [data-forecast-flag] .aa-badge:not(.aa-badge--long){max-width:none}
  .aa-dt:has([data-portfolio-row]) .aa-dt__actions{display:none}
  .aa-dt .aa-set-cell--fixed{flex-wrap:wrap;white-space:normal;min-width:0}
}
/* an insight's proposed action can quote an unbroken ad name ("IC_GaryOwen_1024_…"): the body shrinks with its row and the name breaks */
.aa-insight__action-body{min-width:0;overflow-wrap:anywhere}
/* a phone's breadcrumb line (topbar wrapped, 358px): the crumbs shrink to an ellipsis (full text in title) instead of
   pushing the page wide ("Dashboard › Settings › <a long Property name> › Settings") */
@media (max-width:720px){.aa-topbar .aa-crumb:not(.aa-crumb--current){flex-shrink:1;min-width:3ch}}