/*
 * AI-O design layer for the WordPress admin.
 *
 * Shared, verbatim, with AI-O Optimiser Free: one layer, one palette, both
 * plugins. Keep the two copies identical.
 *
 * The public design system (ai-o-ds.css) is built for a marketing page: a
 * display type scale that clamps up to 5.25rem, and spacing that runs to 5rem.
 * Dropping that into an admin screen would be wrong - admin panes are dense,
 * read at 13px, and sit inside someone else's chrome. So this takes the part
 * that carries the brand (the palette, the flat 1px/2px rules, the label
 * treatment, the flat-fill accent) and pairs it with a scale built for the
 * admin.
 *
 * Two rules that are not negotiable:
 *
 * 1. The accent is a FILL, never a text colour on light, and never carries
 *    white text. #ffffff on #1bc9a6 is 2.11:1 and fails WCAG AA. #201e1d on
 *    #1bc9a6 is 7.87:1. So the primary button is teal with ink text, which is
 *    the opposite of the WordPress default and is deliberate. Where the accent
 *    has to be text - a link - it uses --aio-accent-ink (#0e7c66, 5.13:1).
 *
 * 2. Everything is scoped to this plugin's own admin pages. Nothing here may
 *    leak into the rest of wp-admin.
 *
 * Every colour pair below was measured, not eyeballed. Ratios are in comments.
 */

/* Bundled locally. No external request is made for this font - see readme. */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("fonts/archivo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("fonts/archivo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.ai-o-optimiser-ui-system {
	/* Palette - taken verbatim from the public design system. */
	--aio-ground: #f3f2f2;
	--aio-paper: #ffffff;
	--aio-ink: #201e1d;          /* 16.60:1 on paper */
	--aio-muted: #6b6764;        /* 5.60:1 on paper, 5.01:1 on ground */
	--aio-hair: #d8d5d2;         /* 1px dividers - decorative, not a boundary */
	--aio-rule: #201e1d;         /* 2px section rules */
	--aio-accent: #1bc9a6;       /* FILL ONLY - ink on top, never white */
	--aio-accent-hover: #14b394;
	--aio-accent-ink: #0e7c66;   /* the accent when it must be text: 5.13:1 */

	/* Added for the admin: a border dark enough to be a real boundary.
	   --aio-hair is 1.46:1 on paper, which is fine for a divider but fails
	   the 3:1 that form controls need. This is 3.43:1 on paper, 3.07:1 on
	   ground. */
	--aio-line-strong: #8e8a84;

	/* Status. Tinted fill + ink text, so the text contrast never depends on
	   the hue: 12.8-14.3:1 in every case. The border carries the state at
	   4.4-5.1:1 against its own fill, and the label always says the state in
	   words as well, so colour is never the only signal. */
	--aio-accent-tint: #eafaf6; /* ink 15.42:1, accent-ink 4.76:1 */
	--aio-pass-fill: #d6f5ec;   --aio-pass-edge: #0e7c66;
	--aio-fail-fill: #f7dcd6;   --aio-fail-edge: #a33a22;
	--aio-warn-fill: #f9e8c9;   --aio-warn-edge: #8a5a00;
	--aio-idle-fill: #e6e3e0;   --aio-idle-edge: #8e8a84;

	/* Type - admin scale. No viewport clamps: a settings pane is not a page,
	   and it can be 340px wide next to an open sidebar. */
	--aio-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--aio-t-h1: 1.5rem;
	--aio-t-h2: 1.125rem;
	--aio-t-h3: 1rem;
	--aio-t-body: 0.8125rem;
	--aio-t-label: 0.6875rem;
	--aio-t-small: 0.75rem;

	/* Space - compressed from the public scale. */
	--aio-s1: 0.375rem;
	--aio-s2: 0.625rem;
	--aio-s3: 0.875rem;
	--aio-s4: 1.25rem;
	--aio-s5: 1.75rem;
	--aio-s6: 2.5rem;
}

/* ---- Ground ------------------------------------------------------------ */

body.ai-o-optimiser-ui-system #wpbody-content {
	background: var(--aio-ground);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap {
	font-family: var(--aio-font);
	color: var(--aio-ink);
	font-size: var(--aio-t-body);
	line-height: 1.55;
	padding-bottom: var(--aio-s6);
}

/* ---- Type -------------------------------------------------------------- */

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap h1,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap h2,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap h3 {
	font-family: var(--aio-font);
	color: var(--aio-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap h1 {
	font-size: var(--aio-t-h1);
	margin: 0 0 var(--aio-s4);
	padding-bottom: var(--aio-s3);
	border-bottom: 2px solid var(--aio-rule);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap h2 { font-size: var(--aio-t-h2); }
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap h3 { font-size: var(--aio-t-h3); }

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .description,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .ai-o-optimiser-card-sub,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap small {
	color: var(--aio-muted);
	font-size: var(--aio-t-small);
}

/* The label treatment is the most recognisable thing the design system does:
   small, uppercase, widely tracked, muted. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-card-label,
body.ai-o-optimiser-ui-system .ai-o-optimiser-signal-label,
body.ai-o-optimiser-ui-system .ai-o-optimiser-settings-group-heading {
	font-size: var(--aio-t-label);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	color: var(--aio-muted);
}

/* ---- Surfaces ---------------------------------------------------------- */

body.ai-o-optimiser-ui-system .ai-o-optimiser-panel,
body.ai-o-optimiser-ui-system .ai-o-optimiser-card,
body.ai-o-optimiser-ui-system .ai-o-optimiser-priority-panel,
body.ai-o-optimiser-ui-system .ai-o-optimiser-impact-summary,
body.ai-o-optimiser-ui-system .ai-o-optimiser-platform-context,
body.ai-o-optimiser-ui-system .ai-o-optimiser-signal-explainer,
body.ai-o-optimiser-ui-system .ai-o-optimiser-pro-hero,
body.ai-o-optimiser-ui-system .ai-o-optimiser-pro-more__item {
	background: var(--aio-paper);
	border: 1px solid var(--aio-hair);
	border-radius: 0;
	box-shadow: none;
	padding: var(--aio-s4);
}

/* Flat, square, hairline: the site has no rounded cards and no shadows, and
   the admin should not either. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .postbox,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .card {
	border-radius: 0;
	box-shadow: none;
	border-color: var(--aio-hair);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-card-value {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--aio-ink);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-card-value-small {
	font-size: var(--aio-t-h3);
	letter-spacing: -0.01em;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-brand-section,
body.ai-o-optimiser-ui-system .ai-o-optimiser-section-heading-row {
	border-color: var(--aio-hair);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-brand-section-top {
	border-top: 2px solid var(--aio-rule);
	padding-top: var(--aio-s4);
	margin-top: var(--aio-s5);
}

/* ---- Status badges ----------------------------------------------------- */

body.ai-o-optimiser-ui-system .ai-o-optimiser-badge {
	display: inline-block;
	font-size: var(--aio-t-label);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
	line-height: 1.4;
	padding: 0.15rem 0.5rem;
	border-radius: 0;
	border: 1px solid var(--aio-idle-edge);
	background: var(--aio-idle-fill);
	color: var(--aio-ink);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-pass,
body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-allowed {
	background: var(--aio-pass-fill);
	border-color: var(--aio-pass-edge);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-fail {
	background: var(--aio-fail-fill);
	border-color: var(--aio-fail-edge);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-warning,
body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-running {
	background: var(--aio-warn-fill);
	border-color: var(--aio-warn-edge);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-neutral,
body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-not-checked,
body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-context,
body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-other {
	background: var(--aio-idle-fill);
	border-color: var(--aio-idle-edge);
}

/* The three activity kinds are a classification, not a judgement, so they get
   the ink outline rather than a status colour. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-crawler,
body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-referral,
body.ai-o-optimiser-ui-system .ai-o-optimiser-badge-guidance {
	background: var(--aio-paper);
	border-color: var(--aio-ink);
	color: var(--aio-ink);
}

/* ---- Tables ------------------------------------------------------------ */

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .widefat {
	border: 1px solid var(--aio-hair);
	border-radius: 0;
	box-shadow: none;
	background: var(--aio-paper);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .widefat thead th,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .widefat thead td {
	background: var(--aio-paper);
	border-bottom: 2px solid var(--aio-rule);
	color: var(--aio-ink);
	font-size: var(--aio-t-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .widefat td,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .widefat th {
	border-bottom: 1px solid var(--aio-hair);
	color: var(--aio-ink);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .widefat.striped > tbody > :nth-child(odd),
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .striped > tbody > :nth-child(odd) {
	background: var(--aio-ground);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-table-url {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--aio-t-small);
	color: var(--aio-muted);
}

/* ---- Controls ---------------------------------------------------------- */

/* The accent is a fill with ink on top. This inverts the WordPress default of
   white-on-blue, because white on this teal is 2.11:1 and unusable. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .button-primary,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .button-primary:visited {
	background: var(--aio-accent);
	border-color: var(--aio-accent-ink);
	color: var(--aio-ink);          /* 7.87:1 */
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	font-weight: 700;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .button-primary:hover,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .button-primary:focus {
	background: var(--aio-accent-hover);
	border-color: var(--aio-accent-ink);
	color: var(--aio-ink);          /* 6.25:1 */
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .button,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .button-secondary {
	background: var(--aio-paper);
	border: 1px solid var(--aio-line-strong);   /* 3.43:1 - a real boundary */
	color: var(--aio-ink);
	border-radius: 0;
	box-shadow: none;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .button:hover {
	background: var(--aio-ground);
	border-color: var(--aio-ink);
	color: var(--aio-ink);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap input[type="text"],
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap input[type="url"],
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap input[type="number"],
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap input[type="email"],
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap input[type="search"],
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap select,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap textarea {
	border: 1px solid var(--aio-line-strong);
	border-radius: 0;
	box-shadow: none;
	color: var(--aio-ink);
	background: var(--aio-paper);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap a {
	color: var(--aio-accent-ink);   /* 5.13:1 on paper, 4.59:1 on ground */
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap a:hover {
	color: var(--aio-ink);
}

/* A visible focus ring that clears 3:1 against both surfaces, on top of - not
   instead of - whatever WordPress does. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap :focus-visible {
	outline: 2px solid var(--aio-accent-ink);
	outline-offset: 2px;
	box-shadow: none;
}

/* ---- Plugin shell ------------------------------------------------------ */

body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav {
	background: var(--aio-paper);
	border-bottom: 2px solid var(--aio-rule);
	font-family: var(--aio-font);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-brand {
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--aio-ink);
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-role {
	font-size: var(--aio-t-label);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--aio-muted);
}

/* ---- Pro screens ------------------------------------------------------- */

body.ai-o-optimiser-ui-system .ai-o-optimiser-pro-hook {
	font-size: var(--aio-t-h2);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--aio-ink);
	max-width: 34em;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-pro-cost {
	color: var(--aio-muted);
	max-width: 40em;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-pro-price {
	color: var(--aio-ink);
	font-weight: 700;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-pro-points li::marker {
	color: var(--aio-accent-ink);
}

/* ---- Motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap *,
	body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap *::before,
	body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---- Bridge: the plugin's own tokens --------------------------------------
 *
 * The admin was built on two earlier token sets (--ai-o-optimiser-* and --ai-o-optimiser-ui-*, with
 * --bcp-ai-* aliasing the second). Rather than write a competing rule for
 * every component, those variables are re-pointed at the AI-O palette here.
 * Anything already using them - including rules on screens not opened during
 * this pass - follows automatically, which is the whole reason to re-skin
 * through tokens instead of by hand.
 *
 * Radii go to 0 and shadows to none because the design system is flat and
 * square throughout; it has neither.
 *
 * Status colours are the measured set: every text value clears 4.5:1 on paper,
 * every fill takes ink text at 12.8:1 or better.
 */
body.ai-o-optimiser-ui-system,
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap {
	--ai-o-optimiser-accent: var(--aio-accent);
	--ai-o-optimiser-accent-dark: var(--aio-accent-ink);
	--ai-o-optimiser-text: var(--aio-ink);
	--ai-o-optimiser-muted: var(--aio-muted);
	--ai-o-optimiser-border: var(--aio-hair);
	--ai-o-optimiser-border-soft: var(--aio-hair);
	--ai-o-optimiser-surface: var(--aio-paper);
	--ai-o-optimiser-surface-soft: var(--aio-ground);
	--ai-o-optimiser-radius: 0;
	--ai-o-optimiser-shadow: none;
	--ai-o-optimiser-good: var(--aio-pass-edge);
	--ai-o-optimiser-bad: #a33a22;          /* 6.59:1 on paper */
	--ai-o-optimiser-warn: #8a5a00;         /* 5.93:1 on paper */

	--ai-o-optimiser-ui-accent: var(--aio-accent);
	--ai-o-optimiser-ui-accent-soft: var(--aio-accent-tint);
	--ai-o-optimiser-ui-text: var(--aio-ink);
	--ai-o-optimiser-ui-muted: var(--aio-muted);
	--ai-o-optimiser-ui-border: var(--aio-hair);
	--ai-o-optimiser-ui-border-strong: var(--aio-line-strong);
	--ai-o-optimiser-ui-surface: var(--aio-paper);
	--ai-o-optimiser-ui-surface-soft: var(--aio-ground);
	--ai-o-optimiser-ui-surface-muted: var(--aio-ground);
	--ai-o-optimiser-ui-radius: 0;
	--ai-o-optimiser-ui-radius-sm: 0;
	--ai-o-optimiser-ui-shadow: none;

	--ai-o-optimiser-ui-pass: var(--aio-pass-edge);
	--ai-o-optimiser-ui-pass-bg: var(--aio-pass-fill);
	--ai-o-optimiser-ui-pass-border: var(--aio-pass-edge);
	--ai-o-optimiser-ui-fail: #a33a22;
	--ai-o-optimiser-ui-fail-bg: var(--aio-fail-fill);
	--ai-o-optimiser-ui-fail-border: var(--aio-fail-edge);
	--ai-o-optimiser-ui-fail-strong: #8c2f1b;      /* 8.28:1 */
	--ai-o-optimiser-ui-fail-strongest: #701f0f;   /* 11.10:1 */
	--ai-o-optimiser-ui-warn: #8a5a00;
	--ai-o-optimiser-ui-warn-bg: var(--aio-warn-fill);
	--ai-o-optimiser-ui-warn-border: var(--aio-warn-edge);
	--ai-o-optimiser-ui-warn-strong: #734b00;      /* 7.68:1 */
	--ai-o-optimiser-ui-warn-strongest: #5c3c00;   /* 9.99:1 */
	--ai-o-optimiser-ui-running: var(--aio-accent-ink);
	--ai-o-optimiser-ui-running-bg: var(--aio-accent-tint);
	--ai-o-optimiser-ui-running-border: var(--aio-accent-ink);
	--ai-o-optimiser-ui-waiting: var(--aio-muted);
	--ai-o-optimiser-ui-waiting-bg: var(--aio-ground);
	--ai-o-optimiser-ui-waiting-border: var(--aio-line-strong);

	/* Paid-only token sets. Site Profile carried its own palette, and the
	   schema workspace its own glow. */
	--ai-o-optimiser-profile-accent: var(--aio-accent);
	--ai-o-optimiser-profile-accent-dark: var(--aio-accent-ink);
	--ai-o-optimiser-profile-text: var(--aio-ink);
	--ai-o-optimiser-profile-muted: var(--aio-muted);
	--ai-o-optimiser-profile-border: var(--aio-hair);
	--ai-o-optimiser-profile-border-soft: var(--aio-hair);
	--ai-o-optimiser-profile-soft: var(--aio-ground);
	--ai-o-optimiser-schema-glow: none;
	--ai-o-optimiser-schema-ink: var(--aio-ink);
	--ai-o-optimiser-schema-line: var(--aio-hair);
	--ai-o-optimiser-schema-soft: var(--aio-ground);
}

/* The one thing a token swap cannot carry: the old accent was dark blue and
   took white text, this one is a light teal that does not. White on #1bc9a6 is
   2.11:1. Ink on it is 7.87:1. So the text colour has to be set here, at a
   specificity that beats the existing three-class rule. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-ui-system .button.button-primary,
body.ai-o-optimiser-ui-system .ai-o-optimiser-ui-system .button-primary,
body.ai-o-optimiser-ui-system .ai-o-optimiser-ui-system input[type="submit"].button-primary,
body.ai-o-optimiser-ui-system .ai-o-optimiser-ui-system .button.button-primary:visited {
	background: var(--aio-accent);
	border: 2px solid transparent;
	color: var(--aio-ink);
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	font-weight: 700;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-ui-system .button.button-primary:hover,
body.ai-o-optimiser-ui-system .ai-o-optimiser-ui-system .button-primary:hover,
body.ai-o-optimiser-ui-system .ai-o-optimiser-ui-system .button-primary:focus,
body.ai-o-optimiser-ui-system .ai-o-optimiser-ui-system input[type="submit"].button-primary:hover {
	background: var(--aio-accent-hover);
	border-color: transparent;
	color: var(--aio-ink);
}

/* Square the shell the nav sits in. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-shell,
body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-shell .ai-o-optimiser-global-nav {
	border-radius: 0;
	box-shadow: none;
	border-color: var(--aio-hair);
}

/* ---- Square and flat, everywhere -----------------------------------------
 *
 * The design system has no rounded corners and no shadows anywhere. The admin
 * accumulated radii of 4, 7, 10, 12, 14 and 18px and a dozen shadow recipes
 * across four thousand lines, many behind !important. Chasing each one would
 * be a long diff that still missed some, so this states the rule once.
 *
 * A blanket !important is normally a smell. It earns its place here because
 * it expresses a design decision rather than patching a component, it is
 * scoped to this plugin's own admin pages, and every value it overrides is
 * itself !important. Images keep their own shape.
 */
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap *:not(img):not(svg):not(.ai-o-optimiser-keep-radius),
body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-shell,
body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-shell *:not(img):not(svg) {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Focus must survive the blanket above - it is the one shadow that matters. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap :focus-visible {
	outline: 2px solid var(--aio-accent-ink) !important;
	outline-offset: 2px;
}

/* ---- Nav crowding --------------------------------------------------------
 *
 * The nav and the "advanced admin area" notice share one flex row. The nav
 * carries min-width:0 and overflow-x:auto, so when the notice is long the nav
 * is the thing that shrinks and the last tab is cut in half - "Settings"
 * renders as "Set". Losing half a word from a navigation label is worse than
 * losing part of an explanatory sentence, so the priority is reversed: the nav
 * keeps its natural width and the notice yields.
 */
body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-main {
	flex: 0 0 auto;
	min-width: auto;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-main nav {
	overflow-x: visible;
	min-width: auto;
}

body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-shell .ai-o-optimiser-advanced-change-warning {
	flex: 1 1 12rem;
	min-width: 0;
}

/* Below the point where they cannot share a row, stack instead of truncating. */
@media (max-width: 1100px) {
	body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-shell .ai-o-optimiser-global-nav {
		flex-wrap: wrap;
		row-gap: 10px;
	}
	body.ai-o-optimiser-ui-system .ai-o-optimiser-global-nav-shell .ai-o-optimiser-global-nav-aside {
		margin-left: 0;
	}
}

/* ---- The user-agent column ----------------------------------------------
 *
 * User agents are long by nature, and this one column was pushing the log
 * table past the right edge of the pane on a 1280px screen, where it could not
 * be reached at all. It is truncated with the full string still available on
 * hover and to a screen reader, because the cell already carries a title
 * attribute. Nothing is lost - Export CSV gives the untruncated value.
 */
body.ai-o-optimiser-ui-system .ai-o-optimiser-wrap .ai-o-optimiser-ua-cell {
	max-width: 22rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--aio-t-small);
	color: var(--aio-muted);
}

/* The per-platform explainer on a large brand card. Two dozen AI companies
   are named on this dashboard and most readers will know four of them, so
   the top three say in a line what the platform is and how its activity
   reaches the site. Smaller cards carry the same text as a title attribute. */
body.ai-o-optimiser-ui-system .ai-o-optimiser-brand-explainer {
	margin: 0 0 var(--aio-s3);
	color: var(--aio-muted);
	font-size: var(--aio-t-small);
	line-height: 1.5;
	max-width: 46em;
}