/* Tailwind v4 — utilities only (no preflight: never reset WP admin styles). */
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

/*
 * Design language: Signal.
 *
 * This used to be Google's palette wearing a different name — Google Blue 700
 * as the working colour, the Gemini gradient for identity, Google Sans in the
 * font stack. It looked competent and looked like everybody else, which is a
 * poor trade for a product that has to be recognisable in a screenshot.
 *
 * The identity now: deep indigo as the working colour, a signal amber as the
 * one accent, graphite ink, and a cool paper canvas. Indigo because the field
 * is crowded with blue (Rank Math, SEOPress, Ahrefs) and orange (Semrush) and
 * purple-pink (Yoast); amber because a score needs a warm counterweight to a
 * cold primary, and because it is the colour of a thing being highlighted.
 *
 * That was the old identity. The plugin now sits inside wp-admin rather than
 * beside it, so the primary is core's own #2271b1 and the "gradient" is a flat
 * ramp of it: the wordmark, the score ring and the hero beam all read as one
 * blue. Amber survives only as a status colour, which is what it always was.
 *
 * No font is loaded from a third party. Naming Google Sans in a stack that
 * then silently falls back is dishonest, and fetching a font from Google is a
 * GDPR problem on a plugin sold into the DACH market.
 *
 * Corners are cut, not curved. Nothing is a pill and nothing exceeds 8px —
 * see the radius tokens below. The only circle left in the product is the
 * score ring, which is a chart rather than a container.
 */

#airanksuite-root {
	/* Canvas & surfaces — neutral grey, no hue. The lavender-tinted canvas
	   made every screenshot read as "purple app"; the reference look (Semrush,
	   and the tier of tools it defines) keeps the canvas colourless so the
	   only colour on screen is the data's. */
	/* Canvas one step deeper than before: white cards need ground to stand on,
	   and the old near-white field left them barely lifted. */
	/* WordPress admin values, so the plugin sits on the same ground as every
	   core screen instead of floating on a canvas of its own. #f0f0f1 is the
	   admin body, #dcdcde the hairline core draws around boxes, #1d2327 the
	   heading ink, #50575e the body ink, #646970 the muted one. */
	/* A canvas with a trace of the brand in it instead of core's neutral grey,
	   and borders a shade cooler. Cards read as objects on a desk. */
	/*
	 * PHASE 2 — Back to WordPress.
	 *
	 * The identity pass gave the plugin its own typeface, its own violet and
	 * softer, rounder surfaces so it would stop looking like every other SEO
	 * plugin. It worked, and it was the wrong goal: the people who use this
	 * are WordPress administrators, and what reads to a designer as identity
	 * reads to them as "some SaaS dashboard has been dropped into my admin".
	 * Familiar wins. The typeface is the admin's own, the working colour is
	 * core's blue, the radii are core's, and the violet survives only as an
	 * accent on the score ring. Tokens only, as before; every rule can go back.
	 */
	--ars-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
		Cantarell, 'Helvetica Neue', sans-serif;

	--ars-canvas: #f0f0f1;
	--ars-surface: #ffffff;
	--ars-surface-2: #f6f7f7;
	--ars-surface-3: #eeeff0;
	--ars-border: #c3c4c7;

	/* Ink — WordPress admin greys. */
	--ars-ink: #1d2327;
	--ars-ink-2: #50575e;
	--ars-ink-3: #646970;

	/* Violet — the working colour, lifted towards the Semrush register:
	/* WordPress admin blue (#2271b1) with core's own hover (#135e96) and its
	   focus/link family. A plugin whose primary control is violet announces
	   that it was built somewhere else; the whole point of this pass is that
	   it was not. */
	/* One violet, the website's own. WordPress blue was the safe answer and
	   it is exactly why the product had no colour of its own — the same blue
	   is core's, Yoast's and Rank Math's. #5b48e8 is the text-safe step down
	   (5.1:1 on white); the fill keeps the full #6753ff. */
	--ars-brand: #2271b1;
	--ars-brand-hover: #135e96;
	--ars-brand-ink: #2271b1;
	--ars-brand-tonal: #f0f6fc;
	--ars-brand-tonal-ink: #0a4b78;

	/* The admin chrome the plugin now sits inside. These are core's own
	   values, named once here so the native register below asks for a role
	   ("core's hairline") instead of repeating a hex twenty times. */
	--ars-wp-line: #c3c4c7;
	--ars-wp-canvas: #f0f0f1;
	--ars-wp-field-line: #8c8f94;
	--ars-wp-button-bg: #f6f7f7;
	--ars-wp-notice-info: #72aee6;

	/* Filled controls follow the admin colour scheme the user picked.
	   WordPress paints its own primary buttons with --wp-admin-theme-color,
	   which is red on Sunrise and green on Ectoplasm; a plugin whose buttons
	   stay blue there is the one thing on the screen that did not get the
	   memo. Links stay on the brand token, because core keeps links blue in
	   every scheme — a pale scheme colour on white is unreadable as text. */
	/* No longer var(--wp-admin-theme-color): a filled button that turns green
	   on Ectoplasm belongs to WordPress, and this one has to belong to us. */
	--ars-brand-fill: #2271b1;
	--ars-brand-fill-hover: #135e96;
	--ars-brand-2: #72aee6;

	/* Signal amber — the one accent, and the only warm colour that is not a
	   status. Used on the score ring's far stop and nowhere it could be
	   mistaken for a warning. */
	--ars-accent: #f0a325;
	--ars-accent-tonal: #fff5dc;

	/* Identity gradient — a flat ramp of the brand blue. It stays a gradient
	   token so the ring and the wordmark keep one code path; what changed is
	   that both stops are now the same colour the buttons are. */
	--ars-grad: linear-gradient(135deg, #2271b1, #72aee6);
	--ars-grad-soft: linear-gradient(135deg, #f0f6fc, #f6f7f7);

	/* Status. Green pulled towards the teal-green every analytics tool uses
	   for a positive delta; red kept warm but not neon. */
	/*
	 * The status trio, taken from the website so the whole product is one
	 * system. A cool, vivid violet beside an earthy sage green and a muddy
	 * ochre is what "the colours do not harmonise" means: the primary was
	 * updated and the statuses were left in the register they had when the
	 * primary was WordPress blue.
	 *
	 * Only the *graphic* values move. The inks below stay dark, because they
	 * sit on the tonal backgrounds and have to clear 4.5:1 — a bar and a word
	 * are not the same problem, and the suite checks both.
	 */
	--ars-good: #12a150;
	--ars-good-tonal: #e6f6ee;
	--ars-warning: #c98400;
	--ars-warning-tonal: #fff7d6;
	--ars-serious: #e0393f;
	--ars-serious-tonal: #fdecea;

	/* Radius scale — one step rounder across the board. 8px cards and 6px
	   controls are the reference register; still no pills. */
	/* One step softer across the board — the register of the current SaaS
	   tier. Cards at 12 read as objects; controls at 8 stay serious. */
	--ars-r-xs: 3px;
	--ars-r-sm: 4px;
	--ars-r-md: 4px;
	--ars-r-lg: 6px;
	--ars-r-xl: 8px;

	/* Elevation nearly gone: the reference look is border-defined, flat, and
	   lets density do the separating. The far layer survives only on true
	   overlays (menus, dialogs). */
	--ars-e1: 0 1px 2px rgb(22 22 30 / 0.04);
	--ars-e2: 0 1px 3px rgb(22 22 30 / 0.06);
	--ars-e3: 0 4px 16px rgb(22 22 30 / 0.10);

	/* Tonal containers, one step deeper than the old pastels. The originals
	   were pale enough to read as paper rather than as colour. */
	--ars-c-blue: #ece9ff;
	--ars-c-blue-ink: #4c37cc;
	--ars-c-green: #dff3e8;
	--ars-c-green-ink: #0f7a4d;
	--ars-c-yellow: #fff1cc;
	--ars-c-yellow-ink: #9a5a0a;
	--ars-c-red: #fbdcd8;
	--ars-c-red-ink: #c02b21;
	--ars-c-violet: #eee1fd;
	--ars-c-violet-ink: #6a3fc0;

	/* Series palette walks the identity gradient and adds one cool green, so
	   every chart on every screen is drawn from the same four hues and none of
	   them can be confused with a status colour. */
	--ars-series-1: #6753ff;
	--ars-series-2: #12a150;
	--ars-series-3: #f0a325;
	--ars-series-4: #8b7bff;

	/* Hairlines inside components. These were referenced all over the sheet
	   and never defined, so every var(--ars-line) border silently fell back
	   to currentcolor — which is why the metric grids drew in near-black
	   while the cards drew in grey. Defined once, the whole app rules with
	   the same pencil. */
	--ars-line: var(--ars-border);
	--ars-line-soft: #edecf5;

	/* The canvas wash: a barely-there neutral tint at the top of the app,
	   gone within one screen (the dark theme tints it with the brand). */
	--ars-wash: rgb(0 0 0 / 0.02);

	/* Solid emphasis — near-black in light, a lighter blue in dark. Used for
	   the filled "solid" tier of controls; the primary button is brand. */
	--ars-solid: #171717;
	--ars-solid-hover: #000000;
	--ars-solid-ink: #ffffff;
	/* Outline-button hairlines — a touch stronger than card borders. */
	--ars-btn-border: #ddddea;
	--ars-btn-border-hover: #c6c5d9;
	/* --- State tokens (1.0 design system) --- */
	/* Text-on-tonal status inks. The base status colours (--ars-good etc.)
	   stay for bars and charts; anything that renders as TEXT on a tonal
	   background uses the -ink variant, which holds 4.5:1 (WCAG AA). These
	   are the values the post-list pills always used. */
	--ars-good-ink: #0f7a4d;
	--ars-warning-ink: #9a5a0a;
	--ars-serious-ink: #c02b21;
	/* Info is blue: violet stays reserved for the brand. */
	--ars-info: #0b57d0;
	--ars-info-ink: #0b57d0;
	--ars-info-tonal: #e8f1fd;
	/* Text on a brand-filled control. */
	--ars-on-brand: #ffffff;
	/* One focus ring for the whole product, brand-coloured. */
	--ars-focus-ring: 0 0 0 3px rgb(34 113 177 / 0.28);
	--ars-disabled-bg: #e3e6ea;
	--ars-disabled-ink: #8a8d94;
	/* Previously referenced but never defined — pinned at the values that
	   actually rendered (or should have): */
	--ars-border-strong: #c8c9d0;
	--ars-c-amber: #fdf1de;
	--ars-c-amber-ink: #9a5a0a;
	--ars-c-teal-ink: #0f7a4d;
	--ars-c-green-bg: #dff3e8;
	--ars-c-green-line: #b7e4cc;
	--ars-wire: #8a8d94;
	--ars-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
	--ars-font-display: inherit;
	--ars-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--ars-shadow-card: 0 1px 1px rgb(22 22 30 / 0.03), 0 8px 24px -16px rgb(22 22 30 / 0.18);
	/* Code blocks are always dark (one dark, shared): */
	--ars-code-bg: #1f2430;
	--ars-code-ink: #d5dae5;
	/* Progress tracks, selected-card wash, meter knob: */
	--ars-track: #d5dbe4;
	--ars-select-bg: #f1efff;
	--ars-knob: #ffffff;

	color: var(--ars-ink);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
		Arial, sans-serif;
	font-size: 13.5px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

#airanksuite-root * {
	box-sizing: border-box;
}

/* ---------- Dark theme ----------
 * Opt-in (data-theme="dark" on the root, driven by the header toggle), so a
 * light wp-admin is never flipped without asking. The whole product is drawn
 * from the tokens above, so the theme is a palette swap: same layout, same
 * borders-do-the-work philosophy, tuned for a dark canvas. Brand and status
 * hues are lightened for contrast on a dark surface; tonal containers become
 * deep tints of their hue rather than pale washes. */
#airanksuite-root[data-theme='dark'],
body.airanksuite-dark {
	--ars-canvas: #131218;
	--ars-wp-line: #35353b;
	--ars-wp-canvas: #141416;
	--ars-wp-field-line: #4a4a52;
	--ars-wp-button-bg: #2b2b30;
	--ars-wp-notice-info: #6cb2ff;
	--ars-brand-fill: var(--wp-admin-theme-color, #3582c4);
	--ars-brand-fill-hover: var(--wp-admin-theme-color-darker-10, #4f94d4);
	--ars-surface: #1b1a22;
	--ars-surface-2: #212029;
	--ars-surface-3: #2a2934;
	--ars-border: #34333f;

	--ars-ink: #ececef;
	--ars-ink-2: #a9abb3;
	/* Tertiary/meta text: raised from #74767f (~3.7:1) to clear WCAG AA (>=4.5:1)
	   on the dark surfaces it sits on — it carries small helper and meta labels. */
	--ars-ink-3: #8d8f97;

	/* The violet, lifted for a dark ground. #9c8dff carries 7.4:1 on the dark
	   surface; the full #6753ff is kept for fills, where white sits on it. */
	--ars-brand: #72aee6;
	--ars-brand-hover: #9ec2e6;
	--ars-brand-ink: #72aee6;
	--ars-brand-tonal: #1a2a3a;
	--ars-brand-tonal-ink: #9ec2e6;
	--ars-brand-2: #4f94d4;
	--ars-brand-fill: #2271b1;
	--ars-brand-fill-hover: #3582c4;
	--ars-select-bg: #1a2a3a;

	--ars-accent: #f0a325;
	--ars-accent-tonal: #3a2c12;

	--ars-grad: linear-gradient(135deg, #2271b1, #72aee6);
	--ars-grad-soft: linear-gradient(135deg, #1a2a3a, #212c3a);

	--ars-good: #34c98d;
	--ars-good-tonal: #16302132;
	--ars-warning: #e6a24a;
	--ars-warning-tonal: #3a2e1332;
	--ars-serious: #f2685d;
	--ars-serious-tonal: #3a201d32;

	--ars-e1: 0 1px 2px rgb(0 0 0 / 0.30);
	--ars-e2: 0 1px 3px rgb(0 0 0 / 0.40);
	--ars-e3: 0 8px 28px rgb(0 0 0 / 0.55);

	--ars-c-blue: #232a52;
	--ars-c-blue-ink: #9fa8ff;
	--ars-c-green: #143528;
	--ars-c-green-ink: #4bd299;
	--ars-c-yellow: #3a2c12;
	--ars-c-yellow-ink: #f0b657;
	--ars-c-red: #3a201d;
	--ars-c-red-ink: #f4867b;
	--ars-c-violet: #2a2350;
	--ars-c-violet-ink: #c3acff;

	--ars-series-1: #9c8dff;
	--ars-series-2: #b3a4fb;
	--ars-series-3: #e8a33d;
	--ars-series-4: #2fc39c;

	--ars-line: #30313b;
	--ars-line-soft: #26262f;

	--ars-solid: #3582c4;
	--ars-solid-hover: #4f94d4;
	--ars-solid-ink: #ffffff;
	--ars-btn-border: #3a3b46;
	--ars-btn-border-hover: #474956;
	/* --- State tokens (1.0 design system), dark --- */
	--ars-good-ink: #34c98d;
	--ars-warning-ink: #e6a24a;
	--ars-serious-ink: #f2685d;
	--ars-info: #6cb2ff;
	--ars-info-ink: #8ec2ff;
	--ars-info-tonal: #20304a;
	--ars-on-brand: #17123a;
	--ars-focus-ring: 0 0 0 3px rgb(157 134 240 / 0.35);
	--ars-disabled-bg: #2b2b30;
	--ars-disabled-ink: #8d8f97;
	--ars-border-strong: #474956;
	--ars-c-amber: #3a2c12;
	--ars-c-amber-ink: #f0b657;
	--ars-c-teal-ink: #4bd299;
	--ars-c-green-bg: #143528;
	--ars-c-green-line: #2c5c44;
	--ars-wire: #8d8f97;
	--ars-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
	--ars-shadow-card: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -16px rgb(0 0 0 / 0.55);
	--ars-code-bg: #16181f;
	--ars-code-ink: #c9cedb;
	--ars-track: #3a3b46;
	--ars-select-bg: #20304a;
	--ars-knob: #e6e6ea;

	--ars-wash: rgb(143 116 242 / 0.08);

	color-scheme: dark;
}

/* Headings.
 *
 * Tailwind's utilities live in `layer(utilities)`, and an unlayered rule beats
 * a layered one no matter how weak its selector. WordPress admin styles are
 * unlayered — so `h1 { font-size: 2em; margin: .67em 0 }
` was quietly winning
 * over every `text-[19px] m-0` in the app. The page title rendered at 27px
 * with 18px margins it never asked for, and every card title carried an
 * invisible .83em gap under it. That is most of the "why does everything look
 * loose and slightly wrong" in this UI.
 *
 * These rules are unlayered and carry ID specificity, so they win instead.
 */
#airanksuite-root h1,
#airanksuite-root h2,
#airanksuite-root h3,
#airanksuite-root h4,
#airanksuite-root h5,
#airanksuite-root h6 {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	letter-spacing: -0.01em;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
}

/* The one heading that is the page. */
#airanksuite-root .ars-page-title {
	font-size: 22px;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ars-ink);
}

/* The whole admin app is one floating surface: a tonal rail on the left,
   a cool paper canvas on the right. */
#airanksuite-root .ars-app {
	background: var(--ars-surface);
	border-radius: var(--ars-r-xl);
	overflow: clip;
	box-shadow: var(--ars-e3);
}

/* The rail is a white pane against the deeper canvas — the sidebar register
   of the current SaaS tier — separated by a hairline, not a colour. */
#airanksuite-root .ars-rail {
	background: var(--ars-surface);
	border-inline-end: 1px solid var(--ars-border);
}

#airanksuite-root .ars-main {
	background: linear-gradient(180deg, var(--ars-wash), transparent 260px), var(--ars-canvas);
}

/* A card is an object, not a lighter patch of the page.
   Shadow alone at this contrast level (white on #f8fafd) does not define an
   edge — from a metre away the screen reads as one undifferentiated field,
   which is most of what makes an interface look cheap. A hairline gives the
   edge, the shadow gives the lift, and the two together let the canvas go a
   step deeper without the cards dissolving into it. */
#airanksuite-root .ars-card {
	background: var(--ars-surface);
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	/* Two shadows: a hairline-tight one that defines the edge, and a long soft
	   one that lifts the card off the deeper canvas. This is the visible
	   difference between "white rectangle" and "object on a desk". */
	box-shadow: 0 1px 2px rgb(22 22 30 / 0.05), 0 10px 28px -14px rgb(22 22 30 / 0.14);
	transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms ease;
}

/* The header zone of a card: icon, title, action, then a rule.
   Without the rule the title floats in the same space as the content and the
   card has no internal structure — every enterprise tool draws this line. */
#airanksuite-root .ars-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ars-border);
}
#airanksuite-root .ars-card-body {
	padding: 18px;
}
#airanksuite-root .ars-card-head + .ars-card-body {
	padding-top: 16px;
}

/* A tinted square holding the card's icon. Small, quiet, and the only colour
   in the header — enough to make a stack of cards scannable by shape. */
#airanksuite-root .ars-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: var(--ars-r-md);
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}

/* The one surface that carries identity: a whisper of the brand gradient
   behind the score, so the focal point of the app is not another white box. */
#airanksuite-root .ars-hero {
	position: relative;
	/* A beam rather than a blob: a soft diagonal band crossing the card, which
	   is a shape somebody can recognise again. A radial smudge behind the
	   score just looked like a rendering artefact. */
	background:
		var(--ars-surface);
	/* Same construction as a card — hairline, 6px, one elevation. The hero
	   used to be borderless at 8px, so the one surface that carries the
	   product's identity was also the one that did not match anything
	   around it. */
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	box-shadow: var(--ars-e1);
	overflow: hidden;
}
#airanksuite-root .ars-hero::after {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--ars-grad);
	opacity: 0.55;
}

/* Gemini gradient text — for the one headline that carries identity. */
#airanksuite-root .ars-grad-text {
	background: var(--ars-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Buttons: Google pills ---------- */

#airanksuite-root .ars-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--ars-r-md);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 500;
	font-size: 13px;
	/* 9px/20px was a marketing-site button. In a dense tool the control should
	   be the size of the text plus a comfortable target, not a slab. */
	padding: 7px 15px;
	line-height: 1.45;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 150ms ease, box-shadow 150ms ease, border-color 150ms ease,
		transform 90ms ease;
	white-space: nowrap;
}
#airanksuite-root .ars-btn:active:not(:disabled) {
	transform: translateY(0.5px);
}

#airanksuite-root .ars-btn-primary {
	background: var(--ars-brand);
	color: var(--ars-on-brand);
}
#airanksuite-root .ars-btn-primary:disabled {
	background: var(--ars-disabled-bg);
	color: var(--ars-disabled-ink);
	cursor: default;
	box-shadow: none;
}
#airanksuite-root .ars-btn-ghost:hover {
	background: rgb(34 113 177 / 0.05);
	border-color: var(--ars-btn-border-hover);
}
#airanksuite-root .ars-btn-ghost:disabled {
	color: var(--ars-ink-3);
	cursor: default;
	background: transparent;
}

/* Tonal button — Google's "filled tonal" */
#airanksuite-root .ars-btn-tonal {
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}
#airanksuite-root .ars-btn-tonal:hover {
	box-shadow: 0 1px 2px rgb(60 64 67 / 0.3);
}

#airanksuite-root .ars-btn-danger {
	background: transparent;
	border-color: #c4c7cc;
	color: var(--ars-serious);
}
#airanksuite-root .ars-btn-danger:hover {
	background: rgb(197 34 31 / 0.06);
}

/* ---------- Right-to-left ----------
 *
 * The sheet is written in logical properties, so Arabic and Hebrew mirror
 * themselves: padding-inline, margin-inline, border-inline, text-align:
 * start/end and inset-inline all follow the document direction. What logical
 * properties cannot mirror is a transform or a drawn glyph, and that is what
 * this block is for — a toggle knob that slides, and every chevron that points
 * somewhere. WordPress sets dir="rtl" on <html> for RTL locales; the app also
 * honours an explicit dir on its own root so a preview can flip without the
 * whole admin.
 */
#airanksuite-root:dir(rtl) .ars-switch.is-on::after {
	transform: translateX(-17px);
}
/* Chevrons, carets and arrow glyphs point the other way. Mirroring the icon
   rather than the layout keeps one SVG for both directions. */
#airanksuite-root:dir(rtl) .ars-scorerow-caret,
#airanksuite-root:dir(rtl) .ars-grid-pager button,
#airanksuite-root:dir(rtl) .ars-nav-item.is-back svg,
#airanksuite-root:dir(rtl) .ars-crumb-sep {
	transform: scaleX(-1);
}
/* Numbers stay left-to-right inside an RTL sentence — a version string or a
   score read backwards is a bug, not a translation. */
#airanksuite-root:dir(rtl) .t-num,
#airanksuite-root:dir(rtl) .tabular-nums,
#airanksuite-root:dir(rtl) .ars-mono,
#airanksuite-root:dir(rtl) .ars-url,
#airanksuite-root:dir(rtl) code {
	direction: ltr;
	text-align: start;
	unicode-bidi: isolate;
}
/* The shimmer sweeps the other way so it still reads as "left to right along
   the text" for a reader whose text runs the other way. */
#airanksuite-root:dir(rtl) .ars-pageskel-bar,
#airanksuite-root:dir(rtl) .ars-pageskel-block,
#airanksuite-root:dir(rtl) .ars-grid-skeleton td span {
	animation-direction: reverse;
}

/* ---------- Page skeleton ----------
   The shape of the page that is coming, shimmering — so the layout lands
   where the placeholder was instead of jumping in from a one-word card. */
#airanksuite-root .ars-pageskel-bar,
#airanksuite-root .ars-pageskel-block {
	border-radius: var(--ars-r-lg);
	background: linear-gradient(90deg, var(--ars-surface-3) 25%, var(--ars-surface-2) 50%, var(--ars-surface-3) 75%);
	background-size: 200% 100%;
	animation: ars-shimmer 1.3s ease-in-out infinite;
}
#airanksuite-root .ars-pageskel-bar { height: 44px; }
#airanksuite-root .ars-pageskel-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
#airanksuite-root .ars-pageskel-block { height: 180px; }
#airanksuite-root .ars-pageskel-block.is-tall { height: 260px; }
@media (prefers-reduced-motion: reduce) {
	#airanksuite-root .ars-pageskel-bar, #airanksuite-root .ars-pageskel-block { animation: none; }
}

/* The routing editor's unsaved-changes bar. Explicit save beats autosave the
   moment a screen has more than one control worth changing together. */
#airanksuite-root .ars-routing-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding: 10px 12px;
	border: 1px solid var(--ars-brand);
	border-radius: var(--ars-r-lg);
	background: var(--ars-brand-tonal);
}

/* ---------- AI review card ----------
   Original, change, editable proposal, receipt. Everything a reviewer needs
   to decide, on one card, and only Apply writes. */
#airanksuite-root .ars-review {
	display: grid;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--ars-brand);
	border-radius: var(--ars-r-lg);
	background: var(--ars-brand-tonal);
}
#airanksuite-root .ars-review-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
#airanksuite-root .ars-review-field {
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border-radius: var(--ars-r-md);
	background: var(--ars-surface);
	border: 1px solid var(--ars-border);
}
#airanksuite-root .ars-review-orig,
#airanksuite-root .ars-review-diff {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-diff-add {
	background: var(--ars-good-tonal);
	color: var(--ars-good);
	border-radius: 3px;
	padding: 0 2px;
}
#airanksuite-root .ars-diff-del {
	background: var(--ars-serious-tonal);
	color: var(--ars-serious);
	text-decoration: line-through;
	border-radius: 3px;
	padding: 0 2px;
}
#airanksuite-root .ars-review-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 11px;
	color: var(--ars-ink-3);
}

#airanksuite-root .ars-review-field.is-applied {
	opacity: 0.7;
}
#airanksuite-root .ars-alt-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 8px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-md);
	background: var(--ars-surface);
}
#airanksuite-root .ars-alt-row img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface-2);
}

#airanksuite-root .ars-copilot-group {
	display: grid;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface);
}
#airanksuite-root .ars-copilot-rank {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--ars-brand);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}

/* ---------- Let AI do ----------
   A to-do list with a button per row, not a feature grid: the count on the
   right is the reason the row exists, and it going to zero is the receipt. */
#airanksuite-root .ars-letai {
	display: grid;
	gap: 18px;
}
#airanksuite-root .ars-letai-group {
	display: grid;
	gap: 6px;
}
#airanksuite-root .ars-letai-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ars-border);
}
#airanksuite-root .ars-letai-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface);
}
#airanksuite-root .ars-letai-row.is-disabled {
	opacity: 0.6;
}
#airanksuite-root .ars-letai.is-compact .ars-letai-row {
	padding: 7px 10px;
}
#airanksuite-root .ars-letai-cell {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
#airanksuite-root .ars-letai-open {
	display: grid;
	justify-items: end;
	line-height: 1.15;
	text-align: end;
}
#airanksuite-root .ars-letai-open strong {
	font-size: 17px;
	font-weight: 700;
	color: var(--ars-ink);
}
#airanksuite-root .ars-letai-open span {
	font-size: 10.5px;
	color: var(--ars-ink-3);
	white-space: nowrap;
}
#airanksuite-root .ars-letai-open.is-clear {
	font-size: 12px;
	font-weight: 600;
	color: var(--ars-good);
}
#airanksuite-root .ars-letai-route {
	font-size: 10.5px;
	color: var(--ars-ink-3);
	background: var(--ars-surface-2);
	padding: 1px 6px;
	border-radius: var(--ars-r-sm);
	justify-self: start;
}

/* The briefing, verbatim. Monospace so headings and numbered rules read as
   the structure they are. */
#airanksuite-root .ars-briefing {
	margin: 0;
	padding: 12px 14px;
	max-height: 420px;
	overflow: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--ars-ink-2);
	background: var(--ars-surface-2);
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
}

/* ---------- AI keyword suggestions ---------- */
#airanksuite-root .ars-kwsuggest {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
#airanksuite-root .ars-kwchip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 8px 5px 11px;
	border: 1px solid var(--ars-border);
	border-radius: 999px;
	background: var(--ars-surface);
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
#airanksuite-root .ars-kwchip:hover:not(:disabled) {
	border-color: var(--ars-brand);
	background: var(--ars-brand-tonal);
	transform: translateY(-1px);
}
#airanksuite-root .ars-kwchip:disabled {
	cursor: default;
	opacity: 0.65;
}
#airanksuite-root .ars-kwchip-word {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ars-ink);
}

/* ---------- Site analyzer: tables and areas ---------- */
#airanksuite-root .ars-barometer-delta {
	font-size: 11px;
	font-weight: 700;
	margin-inline-start: 4px;
	vertical-align: middle;
}
#airanksuite-root .ars-analyzer-table {
	display: grid;
	gap: 2px;
}
#airanksuite-root .ars-analyzer-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 70px 70px 56px 56px 80px;
	gap: 10px;
	align-items: center;
	padding: 7px 10px;
	border-radius: var(--ars-r-md);
	border: 1px solid transparent;
	background: transparent;
	font-size: 12.5px;
	color: var(--ars-ink);
	text-align: start;
	width: 100%;
	cursor: default;
}
#airanksuite-root .ars-analyzer-table.is-pages .ars-analyzer-row {
	grid-template-columns: minmax(0, 1fr) 90px 56px 56px 60px;
}
#airanksuite-root .ars-analyzer-row > span,
#airanksuite-root .ars-analyzer-row > a {
	min-width: 0;
}
#airanksuite-root .ars-analyzer-row > span:not(:first-child),
#airanksuite-root .ars-analyzer-row > a:not(:first-child) {
	text-align: end;
}
#airanksuite-root .ars-analyzer-row.is-head {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
	border-bottom: 1px solid var(--ars-border);
	border-radius: 0;
}
#airanksuite-root button.ars-analyzer-row {
	cursor: pointer;
}
#airanksuite-root button.ars-analyzer-row:hover {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-analyzer-row.is-active {
	background: var(--ars-brand-tonal);
	border-color: var(--ars-brand);
}
#airanksuite-root .ars-analyzer-row:nth-child(even):not(.is-head):not(.is-active) {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-analyzer-area {
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface);
}
@media (max-width: 720px) {
	#airanksuite-root .ars-analyzer-row {
		grid-template-columns: minmax(0, 1fr) 56px 56px;
	}
	#airanksuite-root .ars-analyzer-row > *:nth-child(2),
	#airanksuite-root .ars-analyzer-row > *:nth-child(3),
	#airanksuite-root .ars-analyzer-row > *:nth-child(6) {
		display: none;
	}
}

/* ---------- SEO data vendors ----------
   Cards, not a settings table: each one is a separate commercial account with
   its own key, its own bill and its own failure mode, and a table would imply
   they are interchangeable rows of one thing. */
#airanksuite-root .ars-vendor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 14px;
}
#airanksuite-root .ars-vendor-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-vendor-metric {
	display: grid;
	gap: 1px;
	min-width: 0;
}
#airanksuite-root .ars-vendor-metric-n {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
#airanksuite-root .ars-vendor-metric-l {
	font-size: 10.5px;
	color: var(--ars-ink-3);
	line-height: 1.3;
}

#airanksuite-root .ars-serp-list {
	display: grid;
	gap: 2px;
}
#airanksuite-root .ars-serp-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	border-radius: var(--ars-r-md);
	border: 1px solid transparent;
}
#airanksuite-root .ars-serp-row:nth-child(odd) {
	background: var(--ars-surface-2);
}
/* The whole point of the list: find yourself in it at a glance. */
#airanksuite-root .ars-serp-row.is-mine,
#airanksuite-root .ars-serp-row.is-mine:nth-child(odd) {
	background: var(--ars-brand-tonal);
	border-color: var(--ars-brand);
}
#airanksuite-root .ars-serp-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--ars-ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-serp-title:hover {
	color: var(--ars-brand);
	text-decoration: underline;
}
#airanksuite-root .ars-serp-url {
	font-size: 11.5px;
	color: var(--ars-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#airanksuite-root .ars-trendcard {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 12px 14px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface);
	min-width: 0;
}
#airanksuite-root .ars-trendcard-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

/* The nav filter, with a way out of an empty result. */
#airanksuite-root .ars-jump-wrap { position: relative; }
#airanksuite-root .ars-jump-wrap .ars-jump { width: 100%; padding-inline-end: 26px; }
#airanksuite-root .ars-jump::-webkit-search-cancel-button { display: none; }
#airanksuite-root .ars-jump-clear {
	position: absolute;
	inset-inline-end: 6px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: var(--ars-ink-3);
	font-size: 11px;
	line-height: 1;
	padding: 4px;
	cursor: pointer;
	border-radius: 999px;
}
#airanksuite-root .ars-jump-clear:hover { color: var(--ars-serious); background: var(--ars-surface-3); }

/* "Let AI do" — the headline feature, dressed as one. */
#airanksuite-root .ars-letai-card {
	border-color: color-mix(in srgb, var(--ars-brand) 35%, var(--ars-line));
	background:
		var(--ars-surface);
}
#airanksuite-root .ars-letai-card.is-live {
	box-shadow: 0 1px 3px rgba(22, 22, 30, 0.05), 0 0 0 1px color-mix(in srgb, var(--ars-brand) 22%, transparent);
}
#airanksuite-root .ars-letai-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	color: #fff;
	background: var(--ars-brand);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--ars-brand) 34%, transparent);
}
#airanksuite-root .ars-letai-title { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#airanksuite-root .ars-letai-count {
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--ars-brand);
	color: #fff;
}

/* Word-count bands: one readable row each, not a five-column wall. */
#airanksuite-root .ars-bands { display: grid; gap: 2px; }
#airanksuite-root .ars-band {
	display: grid;
	grid-template-columns: 10px minmax(120px, auto) 62px 44px minmax(0, 1fr);
	gap: 10px;
	align-items: baseline;
	padding: 6px 8px;
	border-radius: var(--ars-r-sm);
	font-size: 12.5px;
}
#airanksuite-root .ars-band:nth-child(odd) { background: var(--ars-surface-2); }
#airanksuite-root .ars-band.is-zero { opacity: 0.5; }
#airanksuite-root .ars-band-swatch { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
#airanksuite-root .ars-band-label { font-weight: 600; color: var(--ars-ink); }
#airanksuite-root .ars-band-n { text-align: end; font-weight: 700; }
#airanksuite-root .ars-band-pct { text-align: end; color: var(--ars-ink-3); }
#airanksuite-root .ars-band-note-text { font-size: 11.5px; color: var(--ars-ink-3); line-height: 1.45; }
@media (max-width: 720px) {
	#airanksuite-root .ars-band { grid-template-columns: 10px minmax(0, 1fr) 56px 40px; }
	#airanksuite-root .ars-band-note-text { grid-column: 2 / -1; }
}
#airanksuite-root .ars-empty-band {
	padding: 14px;
	border: 1px dashed var(--ars-line);
	border-radius: var(--ars-r-lg);
	font-size: 12.5px;
	color: var(--ars-ink-3);
	text-align: center;
}

/* Local SEO: the completeness head. A bar of required fields beats a column
   of red badges — it shows how much is left, not only that something is. */
#airanksuite-root .ars-local-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 22px;
	align-items: center;
}
@media (max-width: 640px) {
	#airanksuite-root .ars-local-head { grid-template-columns: 1fr; }
}
#airanksuite-root .ars-local-bar {
	display: flex;
	gap: 3px;
	height: 8px;
}
#airanksuite-root .ars-local-seg {
	flex: 1 1 0;
	border-radius: 999px;
	background: var(--ars-surface-3);
	transition: background 200ms ease;
}
#airanksuite-root .ars-local-seg.is-ok { background: var(--ars-good); }

/* ---------- Autopilot: the safety level ----------
   Four cards rather than a segmented control, because each option needs a
   sentence and the difference between them is the difference between a
   proposal and a live edit. */
#airanksuite-root .ars-levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 10px;
}
#airanksuite-root .ars-level {
	display: grid;
	gap: 5px;
	align-content: start;
	text-align: start;
	/* A grid item defaults to min-width:auto, so a nowrap badge inside makes
	   the card wider than its column and the text runs across the next card.
	   German says "KEINE LIVE-SCHREIBVORGÄNGE" where English says "no live
	   writes" — three times the width, and the layout broke on it. */
	min-width: 0;
	overflow-wrap: break-word;
	padding: 13px 14px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface);
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
#airanksuite-root .ars-level:hover { transform: translateY(-1px); border-color: var(--ars-brand); }
#airanksuite-root .ars-level.is-active {
	border-color: var(--ars-brand);
	background: var(--ars-brand-tonal);
	box-shadow: inset 0 0 0 1px var(--ars-brand);
}
#airanksuite-root .ars-level.is-writing.is-active {
	border-color: var(--ars-warning);
	background: var(--ars-warning-tonal);
	box-shadow: inset 0 0 0 1px var(--ars-warning);
}
#airanksuite-root .ars-level-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-width: 0;
}
#airanksuite-root .ars-level-name { font-size: 13.5px; font-weight: 650; min-width: 0; }
#airanksuite-root .ars-level-tag {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--ars-good-tonal);
	color: var(--ars-good);
	/* Wraps rather than overflows: on a narrow column a two-line badge is
	   ugly, a badge lying across the next card is broken. */
	white-space: normal;
	line-height: 1.35;
	max-width: 100%;
}
#airanksuite-root .ars-level-tag.is-writing { background: var(--ars-warning-tonal); color: var(--ars-warning); }
#airanksuite-root .ars-level-one { font-size: 12px; font-weight: 600; color: var(--ars-ink); }
#airanksuite-root .ars-level-detail { font-size: 11.5px; line-height: 1.5; color: var(--ars-ink-2); }
#airanksuite-root .ars-level-policy {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-warning-tonal);
	border: 1px solid var(--ars-warning);
}

/* The failure screen. Deliberately calm and readable: it appears at the worst
   moment, and a red wall of monospace makes a cache problem look like data
   loss. */
#airanksuite-root .ars-boundary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 22px 24px;
	margin: 8px 0;
	border: 1px solid var(--ars-line, #e6e7eb);
	border-radius: 16px;
	background: var(--ars-surface, #fff);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ars-ink, #16161e);
}
#airanksuite-root .ars-boundary-mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ars-warning-tonal, #fef7e0);
	color: var(--ars-warning, #b06000);
	font-weight: 800;
	font-size: 17px;
}
#airanksuite-root .ars-boundary-detail {
	margin: 6px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--ars-surface-2, #f7f7f9);
	color: var(--ars-ink-2, #5b5e6b);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* ---------- Dashboard masthead ----------
   The first thing on the first screen: a score, the sentence that explains it,
   and four counters that are each a door. Everything here is repeated further
   down the page, so nothing has to be taken on trust. */
#airanksuite-root .ars-hero {
	display: grid;
	/* The headline needs room to be a sentence, not a column of single words.
	   Below this the stats drop to their own row rather than squeezing it. */
	grid-template-columns: auto minmax(26rem, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 22px 24px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-xl, 18px);
	background:
		var(--ars-surface);
}
@media (max-width: 1320px) {
	#airanksuite-root .ars-hero { grid-template-columns: auto minmax(0, 1fr); }
	#airanksuite-root .ars-hero-stats {
		grid-column: 1 / -1;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	#airanksuite-root .ars-hero {
		grid-template-columns: 1fr;
		justify-items: start;
		gap: 16px;
	}
	#airanksuite-root .ars-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#airanksuite-root .ars-hero-title { font-size: 18px; }
}
#airanksuite-root .ars-hero-ring { display: grid; place-items: center; }
#airanksuite-root .ars-hero-body { display: grid; gap: 8px; min-width: 0; }
#airanksuite-root .ars-hero-badge {
	justify-self: start;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--ars-surface-3);
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-hero-badge.is-good { background: var(--ars-good-tonal); color: var(--ars-good); }
#airanksuite-root .ars-hero-badge.is-warning { background: var(--ars-warning-tonal); color: var(--ars-warning); }
#airanksuite-root .ars-hero-badge.is-bad { background: var(--ars-serious-tonal); color: var(--ars-serious); }
#airanksuite-root .ars-hero-title {
	margin: 0;
	font-size: 21px;
	font-weight: 640;
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: var(--ars-ink);
	text-wrap: balance;
}
#airanksuite-root .ars-hero-why {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ars-ink-2);
	max-width: 68ch;
}
#airanksuite-root .ars-hero-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}
#airanksuite-root .ars-hero-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
#airanksuite-root .ars-hero-stat {
	display: grid;
	gap: 1px;
	justify-items: start;
	padding: 9px 13px;
	min-width: 116px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-md, 10px);
	background: color-mix(in srgb, var(--ars-surface) 72%, transparent);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color 140ms ease, transform 140ms ease;
}
#airanksuite-root .ars-hero-stat:hover { border-color: var(--ars-brand); transform: translateY(-1px); }
#airanksuite-root .ars-hero-stat-l { font-size: 11px; color: var(--ars-ink-3); }
/* The sentence under a counter: what it counts, so nobody has to guess whether
   "Open findings" means this run or all of them. Wide enough to read, capped so
   a four-across row stays a row. */
#airanksuite-root .ars-hero-stat-h { font-size: 11px; line-height: 1.45; color: var(--ars-ink-3);
	opacity: .85; margin-top: 3px; max-width: 30ch; }
#airanksuite-root .ars-hero-ring-note { margin: 8px 0 0; max-width: 30ch; text-align: center;
	line-height: 1.5; }
@media (max-width: 782px) {
	#airanksuite-root .ars-hero-stat-h { max-width: none; }
	#airanksuite-root .ars-hero-ring-note { max-width: none; }
}

/* The three trend cards, as one band rather than three loose boxes. */
#airanksuite-root .ars-trendband {
	display: grid;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-trendband-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

/* A single reading: the number, not an apology for the missing line. */
#airanksuite-root .ars-firstread {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 16px;
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface-2);
	border: 1px dashed var(--ars-line);
}
#airanksuite-root .ars-firstread-v {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* ---------- Site analyzer: barometer + spread ----------
   The barometer is the one place a needle is the right instrument: it reads
   as a measurement of a whole thing, which is exactly what a site average is.
   The spread beside it exists because an average hides shape — forty perfect
   pages and forty terrible ones average to "fine". */
#airanksuite-root .ars-barometer {
	display: grid;
	justify-items: center;
	gap: 2px;
	min-width: 150px;
}
#airanksuite-root .ars-barometer svg {
	width: 150px;
	height: 88px;
	display: block;
}
#airanksuite-root .ars-barometer-read {
	display: grid;
	justify-items: center;
	gap: 1px;
	margin-top: -4px;
}
#airanksuite-root .ars-barometer-value {
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
#airanksuite-root .ars-barometer-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-barometer-verdict {
	font-size: 12.5px;
	font-weight: 600;
}

#airanksuite-root .ars-spread {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	align-items: end;
	height: 92px;
	padding: 8px 10px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-spread-col {
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: center;
	gap: 3px;
	height: 100%;
	min-width: 0;
}
#airanksuite-root .ars-spread-n {
	font-size: 11px;
	font-weight: 700;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-spread-bar {
	width: 100%;
	max-width: 34px;
	align-self: end;
	border-radius: var(--ars-r-sm) var(--ars-r-sm) 0 0;
	transition: height 600ms cubic-bezier(0.2, 0, 0, 1);
}
#airanksuite-root .ars-spread-label {
	font-size: 10px;
	color: var(--ars-ink-3);
	white-space: nowrap;
}

/* ---------- Dashboard module grid ----------
   Two columns — GEO and SEO — each headed by a tinted band, one tile per
   module: icon tile, name, one line of purpose, instant switch, Settings link.
   A switched-off module dims rather than disappears, so the map of the
   product stays complete. */
#airanksuite-root .ars-module-band {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 10px 14px;
	border-radius: var(--ars-r-md);
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}
#airanksuite-root .ars-module-band.is-seo {
	background: var(--ars-c-blue);
	color: var(--ars-c-blue-ink);
}
#airanksuite-root .ars-module-tile {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface);
	transition: opacity 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
#airanksuite-root .ars-module-tile:hover {
	border-color: var(--ars-btn-border-hover);
	box-shadow: 0 6px 18px -10px rgb(22 22 30 / 0.18);
}
#airanksuite-root .ars-module-tile.is-off {
	opacity: 0.6;
}
#airanksuite-root .ars-module-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}
#airanksuite-root .ars-module-tile.is-off .ars-module-icon {
	background: var(--ars-surface-3);
	color: var(--ars-ink-3);
}

/* ---------- Migration vendor cards ----------
   The SEOPress-style plugin grid: artwork, name, evidence line, one action.
   The icon is the card's anchor; a source we have no artwork for gets a
   tinted initial tile rather than an empty square. */
#airanksuite-root .ars-vendor-card {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 18px 14px 14px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface);
	transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
#airanksuite-root .ars-vendor-card:hover {
	border-color: var(--ars-btn-border-hover);
	box-shadow: 0 6px 18px -8px rgb(22 22 30 / 0.18);
	transform: translateY(-1px);
}
#airanksuite-root .ars-vendor-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
}
#airanksuite-root .ars-vendor-icon svg {
	width: 100%;
	height: 100%;
}
#airanksuite-root .ars-vendor-icon.is-small { width: 24px; height: 24px; border-radius: 6px; }
#airanksuite-root .ars-vendor-icon.is-small .ars-vendor-icon { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
#airanksuite-root .ars-vendor-icon.is-initial {
	color: #fff;
	font-size: 19px;
	font-weight: 700;
}

/* ---------- Charts: entrance ----------
   The line draws itself in and the area fades up under it — one beat, once,
   when a chart appears. pathLength=1 on the SVG path makes the dash math
   trivial and identical for every series length. */
#airanksuite-root .ars-chart-line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: ars-draw 700ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
#airanksuite-root .ars-chart-area {
	opacity: 0;
	animation: ars-fadeup 500ms ease 250ms forwards;
}
@keyframes ars-draw {
	to { stroke-dashoffset: 0; }
}
@keyframes ars-fadeup {
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	#airanksuite-root .ars-chart-line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
	#airanksuite-root .ars-chart-area { animation: none; opacity: 1; }
}

/* ---------- DataGrid: the enterprise table ----------
   One component for every large dataset. Server-paged, so the browser never
   holds more than one page; the chrome around the table — search, chips, live
   total, pager — is where the design earns its keep. Tokens only: correct in
   light, dark and RTL (logical properties throughout). */

#airanksuite-root .ars-grid {
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface);
	overflow: hidden;
}

#airanksuite-root .ars-grid-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 12px;
	border-block-end: 1px solid var(--ars-line-soft);
}

#airanksuite-root .ars-grid-search {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-inline: 10px;
	height: 30px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-md);
	background: var(--ars-surface-2);
	color: var(--ars-ink-3);
	min-width: 220px;
	transition: border-color 150ms ease, background 150ms ease;
}
#airanksuite-root .ars-grid-search:focus-within {
	border-color: var(--ars-brand);
	background: var(--ars-surface);
}
#airanksuite-root .ars-grid-search input {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	flex: 1;
	font-size: 12.5px;
	color: var(--ars-ink);
}
#airanksuite-root .ars-grid-search input:focus {
	outline: none;
}

#airanksuite-root .ars-grid-reset {
	border: 0;
	background: none;
	color: var(--ars-brand);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 6px;
}

#airanksuite-root .ars-grid-total {
	margin-inline-start: auto;
	font-size: 12px;
	color: var(--ars-ink-3);
	font-variant-numeric: tabular-nums;
}

#airanksuite-root .ars-grid-scroll {
	overflow-x: auto;
	max-height: 70vh;
	overflow-y: auto;
}
#airanksuite-root .ars-grid-table {
	width: 100%;
}
/* The header stays put while ten thousand rows scroll under it. */
#airanksuite-root .ars-grid-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--ars-surface-2);
}

#airanksuite-root .ars-grid-sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}
#airanksuite-root .ars-grid-sort:hover {
	color: var(--ars-brand);
}
#airanksuite-root .ars-grid-caret {
	color: var(--ars-brand);
}

#airanksuite-root .ars-grid-table tbody tr:hover td {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-grid-actions {
	text-align: end;
	white-space: nowrap;
}

/* Loading: shimmer bars in place of rows, so the table keeps its shape. */
#airanksuite-root .ars-grid-skeleton td span {
	display: block;
	height: 10px;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--ars-surface-3) 25%, var(--ars-surface-2) 50%, var(--ars-surface-3) 75%);
	background-size: 200% 100%;
	animation: ars-shimmer 1.2s ease-in-out infinite;
}
@keyframes ars-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	#airanksuite-root .ars-grid-skeleton td span { animation: none; }
}

/* Empty and error live inside the table, not instead of it. */
#airanksuite-root .ars-grid-state {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 34px 16px;
	text-align: center;
	color: var(--ars-ink-2);
	font-size: 13px;
}

#airanksuite-root .ars-grid-footer {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 12px;
	border-block-start: 1px solid var(--ars-line-soft);
	font-size: 12px;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-grid-perpage {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
#airanksuite-root .ars-grid-perpage select {
	min-height: 26px !important;
	padding: 2px 22px 2px 8px !important;
	font-size: 12px !important;
}
#airanksuite-root .ars-grid-range {
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-grid-pager {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-grid-pager button {
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface);
	color: var(--ars-ink);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}
#airanksuite-root .ars-grid-pager button:hover:not(:disabled) {
	background: var(--ars-surface-2);
	border-color: var(--ars-btn-border-hover);
}
#airanksuite-root .ars-grid-pager button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Header theme toggle — a quiet square icon button, same register as a chip. */
#airanksuite-root .ars-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-md);
	background: var(--ars-surface);
	color: var(--ars-ink-2);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
#airanksuite-root .ars-theme-toggle:hover {
	background: var(--ars-surface-2);
	color: var(--ars-ink);
	border-color: var(--ars-btn-border-hover);
}
/* Text-bearing header chip (the /llms.txt link) — same register as the icon
   toggle, sized by its label. */
#airanksuite-root .ars-header-chip {
	width: auto;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Inputs: M3 outlined ---------- */

#airanksuite-root input[type='text'],
#airanksuite-root input[type='password'],
#airanksuite-root input[type='number'],
#airanksuite-root input[type='date'],
#airanksuite-root input[type='datetime-local'],
#airanksuite-root select,
#airanksuite-root textarea {
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-md);
	padding: 7px 11px;
	font-size: 13px;
	font-family: inherit;
	/* WP admin ships `select { line-height: 2 }
`, which made every select
	   16px taller than the input beside it — a form where the two halves of a
	   row sit on different baselines. One line-height for every control. */
	line-height: 1.45;
	background: var(--ars-surface);
	color: var(--ars-ink);
	width: 100%;
	max-width: 100%;
	margin: 0;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* A select that looks exactly like a text input is a lie: nothing says it
   opens. WP draws its own caret with a background-image, which our background
   rule wipes, so the chevron is rebuilt here out of two gradients — no asset,
   no hard-coded colour, and it inherits the field's ink. */
#airanksuite-root select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 34px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}
#airanksuite-root select:disabled {
	color: var(--ars-ink-3);
	background-color: var(--ars-surface-2);
	cursor: default;
}
#airanksuite-root input:hover,
#airanksuite-root select:hover,
#airanksuite-root textarea:hover {
	border-color: var(--ars-btn-border-hover);
}
#airanksuite-root input:focus,
#airanksuite-root select:focus,
#airanksuite-root textarea:focus {
	outline: none;
	border-color: var(--ars-brand);
	box-shadow: var(--ars-focus-ring);
}
#airanksuite-root input[type='checkbox'] {
	accent-color: var(--ars-brand);
}

/* Keyboard focus: one brand ring for everything that doesn't bring its own.
   :where() keeps specificity at zero, so any component focus rule wins. */
#airanksuite-root :where(:focus-visible) {
	outline: 2px solid var(--ars-brand);
	outline-offset: 2px;
}
#airanksuite-root :where(input, select, textarea):focus-visible {
	outline: none; /* these carry the --ars-focus-ring box-shadow instead */
}

#airanksuite-root .ars-mono {
	font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}

/* ---------- Navigation: light rail with pill states ---------- */

#airanksuite-root .ars-nav {
	background: transparent;
}

#airanksuite-root .ars-nav-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	text-align: start;
	border: 0;
	border-radius: var(--ars-r-md);
	padding: 7px 14px;
	white-space: nowrap;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ars-ink-2);
	background: transparent;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}
#airanksuite-root .ars-nav-item svg {
	color: var(--ars-ink-3);
	transition: color 120ms ease;
}
#airanksuite-root .ars-nav-item:hover {
	background: var(--ars-surface-3);
	color: var(--ars-ink);
}
#airanksuite-root .ars-nav-item:hover svg {
	color: var(--ars-ink);
}
/* The active item carries a rail, the same 3px mark every active thing in
   this product carries — a KPI tile, an enabled module, a notice. A flat
   tonal block said "selected" and nothing else; the rail ties the navigation
   to the rest of the system and survives when the tonal fill is too pale to
   read on a bright screen. */
/* The active destination is filled with the working colour — one violet pill
   in the rail says "you are here" from across the room, the way the current
   tier's sidebars do. The 3px system rail stays on tonal things elsewhere. */
#airanksuite-root .ars-nav-item.is-active {
	position: relative;
	background: var(--ars-solid);
	color: var(--ars-solid-ink);
	font-weight: 600;
	box-shadow: 0 2px 8px rgb(34 113 177 / 0.28);
}
#airanksuite-root .ars-nav-group {
	padding: 10px 16px 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}

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

#airanksuite-root .ars-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
/* The header row is a band, not a line of grey text. Uppercase micro type
   with real tracking on a tinted ground is what separates a data table from
   a list of divs, and it holds up when the table scrolls under it. */
#airanksuite-root .ars-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	text-align: start;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
	background: var(--ars-surface-2);
	padding: 9px 14px;
	border-bottom: 1px solid var(--ars-border);
	white-space: nowrap;
}
#airanksuite-root .ars-table th:first-child {
	border-top-left-radius: var(--ars-r-sm);
}
#airanksuite-root .ars-table th:last-child {
	border-top-right-radius: var(--ars-r-sm);
}
/* The first cell of a row is its name. Giving it weight means the eye can
   run down the left edge and find a row without reading every column. */
#airanksuite-root .ars-table tbody td:first-child {
	font-weight: 500;
	color: var(--ars-ink);
}
/* Numeric columns.
   `#airanksuite-root .ars-table th` carries ID specificity, so a Tailwind
   `.text-right` utility on a <th> loses to it and the header stays left while
   the cell goes right — which is exactly the misalignment this class exists to
   stop. One class, applied to both th and td, keeps a column honest. */
#airanksuite-root .ars-table th.is-num,
#airanksuite-root .ars-table td.is-num {
	text-align: end;
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-table th.is-num > button {
	justify-content: flex-end;
	width: 100%;
}
/* Small fixed columns so a two-row table and a fifty-row table have the same
   geometry — a layout that reflows with the data reads as broken. */
#airanksuite-root .ars-table th.is-narrow,
#airanksuite-root .ars-table td.is-narrow {
	width: 92px;
}
#airanksuite-root .ars-table th.is-mid,
#airanksuite-root .ars-table td.is-mid {
	width: 120px;
}
#airanksuite-root .ars-table td.is-muted {
	color: var(--ars-ink-3);
	font-size: 12px;
}

/* ---------- Drawer ---------- */

#airanksuite-root .ars-drawer {
	position: fixed;
	/* Flush to the top of the admin bar and to the bottom of the window: every
	   pixel of height is editing room, and a floating panel that leaves a gap
	   at both ends buys nothing but a shorter form. */
	top: 32px;
	inset-inline-end: 0;
	bottom: 0;
	/* One width for every tab. The sheet used to widen itself for schema and
	   keywords, which meant the frame jumped as you clicked through the tabs —
	   the reference tools never move the frame under the reader. */
	width: min(1080px, 97vw);
	background: var(--ars-surface);
	border: 0;
	border-inline-start: 1px solid var(--ars-border);
	border-radius: 0;
	box-shadow: -8px 0 24px rgb(60 64 67 / 0.12);
	z-index: 9999;
	/* The sheet itself never scrolls. Header, tab strip and action bar are
	   fixed frames; only .ars-sheet-body moves. Two scrollbars in one panel
	   is what made the old drawer feel endless. */
	overflow: hidden;
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	/* One explicit column that can shrink to nothing. Without it the
	   drawer's implicit column is sized by its content: the sheet body's
	   min-content (a 776px suggestion row plus the 340px rail) made the
	   column 1116px inside a 1078px drawer, so the header chips, the tab
	   strip and the whole rail were drawn past the edge and clipped. Seen
	   on setupco.ae at a 1111px viewport, 3 September; reproduced locally. */
	grid-template-columns: minmax(0, 1fr);
}
#airanksuite-root .ars-drawer > * {
	min-width: 0;
}
@media screen and (max-width: 782px) {
	#airanksuite-root .ars-drawer {
		top: 46px;
		inset-inline-start: 0;
		width: auto;
	}
}

/* Wide sheet: schema and keyword editing are two-dimensional and cramp badly
   in a single column, so those tabs claim more of the window automatically. */
#airanksuite-root .ars-drawer.is-wide {
	width: min(1080px, 97vw);
}
/* Maximised by explicit request: for a long FAQ or a deep schema graph the
   sheet becomes the workspace. */
#airanksuite-root .ars-drawer.is-max {
	width: 100vw;
	inset-inline-start: 0;
	border-inline-start: 0;
}

#airanksuite-root .ars-sheet-head {
	padding: 14px 16px 10px;
	border-bottom: 1px solid var(--ars-border);
	background: var(--ars-surface);
}
#airanksuite-root .ars-sheet-tabs {
	display: flex;
	/* Wrap rather than scroll: a hidden-overflow tab strip means tabs that
	   exist but cannot be seen, which is worse than a second row. */
	flex-wrap: wrap;
	gap: 2px;
	padding: 0 10px;
	border-bottom: 1px solid var(--ars-border);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-sheet-tabs::-webkit-scrollbar {
	display: none;
}
#airanksuite-root .ars-sheet-tab {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 9px 11px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ars-ink-3);
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 120ms ease, border-color 120ms ease;
}
#airanksuite-root .ars-sheet-tab:hover {
	color: var(--ars-ink);
}
#airanksuite-root .ars-sheet-tab[aria-selected='true'] {
	color: var(--ars-brand);
	border-bottom-color: var(--ars-brand);
	background: var(--ars-surface);
}
#airanksuite-root .ars-sheet-tab .ars-pip {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 2px 5px;
	border-radius: var(--ars-r-xs);
	background: var(--ars-c-red);
	color: var(--ars-c-red-ink);
}
/* The body is two columns on every tab, always.
   Only one tab used to be split, so the panel changed shape whenever
   somebody switched tab — the form jumped from half width to full and back,
   which is the single most disorienting thing an editing surface can do. */
#airanksuite-root .ars-sheet-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}
#airanksuite-root .ars-sheet-main {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 18px 22px;
	scroll-behavior: smooth;
	min-width: 0;
}
/* The rail scrolls independently, so a long check list never pushes the
   snippet preview off the screen. */
#airanksuite-root .ars-sheet-rail {
	display: grid;
	overflow-x: hidden;
	align-content: start;
	gap: 16px;
	padding: 14px 16px 22px;
	border-inline-start: 1px solid var(--ars-border);
	background: var(--ars-surface-2);
	overflow-y: auto;
	overscroll-behavior: contain;
	min-width: 0;
}
@media (max-width: 1100px) {
	/* Below this the rail costs more than it gives: the form gets too narrow
	   to type a meta description in. One column, rail first. */
	#airanksuite-root .ars-sheet-body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		overflow-y: auto;
	}
	#airanksuite-root .ars-sheet-rail {
		order: -1;
		border-inline-start: 0;
		border-bottom: 1px solid var(--ars-border);
		overflow: visible;
	}
	#airanksuite-root .ars-sheet-main {
		overflow: visible;
	}
}
#airanksuite-root .ars-sheet-foot {
	padding: 10px 16px;
	border-top: 1px solid var(--ars-border);
	background: var(--ars-surface);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Optimize splits into fields + live preview once there is room for both.
   A single 880px column of form fields is mostly empty space to the right of
   every input, and the preview is the thing that makes the fields make sense. */
#airanksuite-root .ars-sheet-split {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr);
}
@media screen and (min-width: 1180px) {
	#airanksuite-root .ars-drawer.is-wide .ars-sheet-split,
	#airanksuite-root .ars-drawer.is-max .ars-sheet-split,
	#airanksuite-root .ars-sheet-split {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}
#airanksuite-root .ars-sheet-aside {
	position: sticky;
	top: 0;
	align-self: start;
}

/* Compact score chips replace the two oversized score cards. */
#airanksuite-root .ars-scorechip {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 8px;
	border-radius: var(--ars-r-xs);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
#airanksuite-root .ars-scorechip b {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* ---------- Scrollbars ----------

   A scrollbar is a control, and a control that is visible when it is not
   needed is clutter. On a Mac with "always show scrollbars" every horizontal
   container in this app drew a fat grey bar under itself — under the tab
   strip, under every table — which is the single ugliest thing on the screen
   and says nothing at all.

   So: nothing shows a scrollbar at rest. The ones that genuinely can overflow
   get a thin thumb that appears on hover, over the content rather than
   pushing it. Everything else is rebuilt not to scroll in the first place. */
#airanksuite-root ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
#airanksuite-root ::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: var(--ars-r-md);
	transition: background 160ms ease;
}
#airanksuite-root ::-webkit-scrollbar-track {
	background: transparent;
}
#airanksuite-root *:hover::-webkit-scrollbar-thumb,
#airanksuite-root *:focus-within::-webkit-scrollbar-thumb {
	background: var(--ars-btn-border-hover);
}
#airanksuite-root ::-webkit-scrollbar-thumb:hover {
	background: #aeb6c4;
}
/* Firefox has no hover hook, so it gets the thin overlay permanently. */
@supports (scrollbar-width: thin) {
	#airanksuite-root .ars-table-wrap,
	#airanksuite-root .ars-scroll {
		scrollbar-width: thin;
		scrollbar-color: var(--ars-btn-border-hover) transparent;
	}
}
/* Containers that must never show one, because they are laid out not to
   overflow: the tab strip and the chip rows. */
#airanksuite-root .ars-noscroll {
	overflow: visible;
	scrollbar-width: none;
}
#airanksuite-root .ars-noscroll::-webkit-scrollbar {
	display: none;
}

/* ---------- Elegance layer ---------- */

/* Pages glide in instead of popping. */
/* Opacity only, no transform.
   A transform on an element makes it the containing block for every
   position:fixed descendant. The 240ms entrance left `transform: matrix(1,0,0,1,0,0)`
   resolved on the view wrapper, so the drawer — which is fixed to the viewport
   by design — was being sized and positioned against the page content instead.
   On a short table that made the editing panel a few hundred pixels tall.
   The 6px rise was not worth a class of bug this hard to see. */
@keyframes ars-view-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#airanksuite-root .ars-view {
	animation: ars-view-in 240ms cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
	#airanksuite-root .ars-view {
		animation: none;
	}
}

/* Cards do not respond to the cursor.
   They used to lift on hover, which is right for something clickable and
   wrong for a settings panel: on a page of nine cards the entire screen
   twitches as the pointer crosses it, and nothing was ever going to happen
   if you clicked. Only tiles that actually navigate keep a hover state. */
#airanksuite-root .ars-card,
#airanksuite-root .ars-hero {
	transition: border-color 180ms ease;
}

/* Quick-jump field in the rail: Gemini's search pill. */
#airanksuite-root .ars-jump {
	width: 100%;
	border: 0 !important;
	border-radius: var(--ars-r-md) !important;
	background: rgb(255 255 255 / 0.75) !important;
	padding: 8px 16px !important;
	font-size: 12.5px !important;
	color: var(--ars-ink);
	box-shadow: inset 0 0 0 1px rgb(60 64 67 / 0.08);
	transition: background 150ms ease, box-shadow 150ms ease;
}
#airanksuite-root .ars-jump:focus {
	background: var(--ars-surface) !important;
	box-shadow: inset 0 0 0 2px var(--ars-brand) !important;
	outline: none !important;
}
#airanksuite-root .ars-jump::placeholder {
	color: var(--ars-ink-3);
}

/* Visible keyboard focus everywhere, invisible for mouse users. */
#airanksuite-root .ars-btn:focus-visible,
#airanksuite-root .ars-nav-item:focus-visible {
	outline: 2px solid var(--ars-brand);
	outline-offset: 2px;
}

/* Drawer entrance + scrim behind it. */
/*
 * The panel fades and lifts. It does not slide in from the right any more.
 *
 * It used to animate `translateX(24px)` → `none`, and measured on a live site
 * the computed transform was still `matrix(1,0,0,1,24,0)` long after the 220ms
 * were up: the animation was stranded on its first frame. A stranded frame of
 * a horizontal slide pushes a fixed, right-anchored panel 24px past the window
 * — the right edge and everything in it fall off the screen, which is exactly
 * what was reported.
 *
 * Treating the symptom would mean `animation-fill-mode: forwards`, and that
 * does nothing when the frame it is stuck on is the *first* one. So the
 * horizontal movement is gone. Opacity and a 6px lift read as the same gesture
 * and cannot move the panel sideways, whatever the animation does or fails to
 * do.
 */
@keyframes ars-drawer-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
#airanksuite-root .ars-drawer {
	animation: ars-drawer-in 220ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
#airanksuite-root .ars-scrim {
	position: fixed;
	inset: 0;
	background: rgb(31 31 31 / 0.28);
	backdrop-filter: blur(1.5px);
	z-index: 9998;
	border: 0;
	padding: 0;
	cursor: pointer;
	animation: ars-view-in 180ms ease;
}

/* Tables: calmer rows, aligned numbers. */
#airanksuite-root .ars-table td {
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-table tbody tr:hover td:first-child {
	color: var(--ars-brand);
}

/* ---------- KPI tiles ---------- */

/* These used to be solid pastel blocks. A row of four saturated pastels is
   the single most template-looking thing an admin screen can do: the colour
   fills the whole object, so it stops being information and becomes
   decoration, and the number — the only thing anybody came for — has to
   compete with its own background.

   Now the tile is white like every other surface, and the tone appears only
   as a rail down the left edge, a 5% wash and the label colour. Same
   semantics, a tenth of the noise, and the figure reads first. */
/* The tile, flattened.

   It used to be a raised, tinted, 104px-tall card with a coloured wash and a
   drop shadow, and a row of four filled a third of the screen. Six numbers cost
   two screenfuls, which is the opposite of what somebody checking a site wants:
   they came to spot the one that moved, and that only works when the numbers
   are close enough to compare in one look.

   So the card became a cell — flat, hairline border, no shadow, no wash, and a
   third less height. The coloured rail stays, because it is the only part that
   was doing work: it says what the tile is about without spending a word on it.
   Every screen using KpiTile gets this at once, which is the point. */
#airanksuite-root .ars-tile {
	position: relative;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-md, 10px);
	padding: 11px 14px 12px 15px;
	display: flex;
	flex-direction: column;
	min-height: 74px;
	font-family: inherit;
	background: var(--ars-surface);
	overflow: hidden;
	transition: border-color 160ms ease, background 160ms ease;
}
/* The rail. Left rather than top: a vertical edge is read as belonging to the
   whole tile, a top edge is read as a progress bar. */
#airanksuite-root .ars-tile::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: currentColor;
	opacity: 0.9;
}
/* The wash, kept under everything. 5% is deliberately almost invisible: it
   should register as warmth, not as a colour field. */
/* The wash is gone. At four tiles it read as warmth; at six in a tighter grid
   it read as six different backgrounds, and the numbers stopped being the
   loudest thing on the row. The rail alone carries the colour now. */
#airanksuite-root .ars-tile::after {
	content: none;
}
#airanksuite-root .ars-tile > * {
	position: relative;
	z-index: 1;
}
#airanksuite-root .ars-tile.is-plain::after {
	opacity: 0;
}
#airanksuite-root .ars-tile.is-plain::before {
	background: #c4ccda;
	opacity: 1;
}
#airanksuite-root .ars-tile.is-clickable {
	cursor: pointer;
}
#airanksuite-root .ars-tile.is-clickable:hover {
	transform: translateY(-2px);
	box-shadow: var(--ars-e3);
	border-color: #cfd6e4;
}
#airanksuite-root .ars-tile.is-clickable:active {
	transform: translateY(0);
}
#airanksuite-root .ars-tile.is-clickable:focus-visible {
	outline: 2px solid var(--ars-brand);
	outline-offset: 2px;
}

/* Section label above a tile group. */
#airanksuite-root .ars-tile-group {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
	margin-bottom: 2px;
}

/* ---------- Analytical overview: filter bar, segmented control, rank bars ---------- */

/* Scope selects: two controls that hold ten post types and fourteen
   languages in one line, where two chip rows needed four. */
#airanksuite-root .ars-scopebar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
#airanksuite-root .ars-scope {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
#airanksuite-root .ars-scope-label {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ars-ink-3);
	white-space: nowrap;
}
#airanksuite-root .ars-scope select {
	max-width: 260px;
	font-size: 12.5px;
	padding-block: 5px;
}

#airanksuite-root .ars-filterbar {
	position: sticky;
	top: 32px; /* clears the WP admin bar */
	z-index: 5;
	padding: 10px 14px;
	border-radius: var(--ars-r-lg);
	background: color-mix(in srgb, var(--ars-surface) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border: 1px solid var(--ars-border);
	box-shadow: 0 1px 2px rgb(60 64 67 / 0.08);
}

#airanksuite-root .ars-seg {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 3px;
	border-radius: var(--ars-r-md);
	background: var(--ars-surface-2);
	gap: 2px;
}
#airanksuite-root .ars-seg-item {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	padding: 7px 14px;
	border-radius: var(--ars-r-md);
	background: transparent;
	color: var(--ars-ink-2);
	transition: background 160ms ease, color 160ms ease;
}
#airanksuite-root .ars-seg-item:hover {
	background: var(--ars-surface-3);
}
#airanksuite-root .ars-seg-item.is-active {
	background: var(--ars-brand);
	color: #fff;
	box-shadow: 0 1px 2px rgb(34 113 177 / 0.3);
}
#airanksuite-root .ars-seg-item.is-active:hover {
	background: var(--ars-brand);
}

#airanksuite-root .ars-rankrow {
	display: grid;
	/* The bar used to be a fixed 130px no matter how wide the card was, so on
	   a 900px card a two-word label like "Rank Math" left 600px of nothing
	   between the name and its bar. The bar takes its share of the width now:
	   the comparison is the point of the row, not the label. */
	grid-template-columns: minmax(0, 1fr) minmax(140px, 0.9fr) 74px;
	align-items: center;
	gap: 12px;
	padding: 5px 8px;
	border-radius: var(--ars-r-sm);
	transition: background 140ms ease;
}
#airanksuite-root .ars-rankrow.is-clickable {
	cursor: pointer;
}
#airanksuite-root .ars-rankrow.is-clickable:hover {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-rankrow-label {
	font-size: 12.5px;
	color: var(--ars-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-rankrow-track {
	height: 8px;
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface-3);
	overflow: hidden;
	display: block;
}
#airanksuite-root .ars-rankrow-fill {
	display: block;
	height: 100%;
	border-radius: var(--ars-r-sm);
	transition: width 420ms cubic-bezier(0.2, 0, 0, 1);
}
#airanksuite-root .ars-rankrow-value {
	font-size: 12.5px;
	font-weight: 600;
	text-align: end;
	white-space: nowrap;
	color: var(--ars-ink);
}

@media (max-width: 782px) {
	#airanksuite-root .ars-filterbar {
		position: static;
		border-radius: var(--ars-r-lg);
	}
	#airanksuite-root .ars-rankrow {
		grid-template-columns: minmax(0, 1fr) 70px 64px;
	}
}

/* ---------- Prompt tracker cells ---------- */

#airanksuite-root .ars-cell {
	position: relative;
	display: inline-block;
	width: 13px;
	height: 22px;
	border-radius: var(--ars-r-sm);
	flex: 0 0 auto;
	transition: transform 140ms cubic-bezier(0.2, 0, 0, 1);
}
#airanksuite-root .ars-cell:hover {
	transform: scaleY(1.14);
}
/* A citation is a different kind of win than a mention — it gets its own mark. */
#airanksuite-root .ars-cell-dot {
	position: absolute;
	left: 50%;
	bottom: 3px;
	width: 4px;
	height: 4px;
	margin-inline-start: -2px;
	border-radius: var(--ars-r-xs);
	background: var(--ars-surface);
	opacity: 0.9;
}

/* ---------- Shell: a rail that can get out of the way ---------- */

#airanksuite-root .ars-app-wide {
	grid-template-columns: 232px 1fr;
}
#airanksuite-root .ars-app-mini {
	grid-template-columns: 60px 1fr;
}
@media (max-width: 782px) {
	#airanksuite-root .ars-app-wide,
	#airanksuite-root .ars-app-mini {
		grid-template-columns: 1fr;
	}
}

/* The logo doubles as the collapse control — one affordance, no extra chrome. */
#airanksuite-root .ars-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 6px 8px 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	color: inherit;
	border-radius: var(--ars-r-md);
}
#airanksuite-root .ars-brand:hover .ars-brand-mark {
	box-shadow: 0 3px 14px rgb(34 113 177 / 0.45);
	transform: translateY(-1px);
}
/* The logo tile wears the identity gradient — the third and final allowed
   appearance of the ramp (wordmark, score ring, and this mark). A soft brand
   glow instead of a grey drop shadow: the one place the product is allowed to
   look lit from within. */
#airanksuite-root .ars-brand-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--ars-grad);
	color: #fff;
	box-shadow: 0 2px 10px rgb(34 113 177 / 0.35);
	transition: box-shadow 150ms ease, transform 150ms ease;
}
#airanksuite-root .ars-brand-mark svg {
	color: #fff;
}

#airanksuite-root .ars-rail.is-mini .ars-brand {
	justify-content: center;
	padding: 6px 0 10px;
}
#airanksuite-root .ars-rail.is-mini .ars-nav-item {
	justify-content: center;
	padding: 9px 0;
	gap: 0;
}
/* Collapsed, a group heading would be unreadable — a hairline says the same. */
#airanksuite-root .ars-nav-rule {
	height: 1px;
	margin: 7px 10px 5px;
	background: var(--ars-border);
}
#airanksuite-root .ars-nav-group:first-child,
#airanksuite-root .ars-nav-rule:first-child {
	margin-top: 0;
}

/* ---------- Header: one line, no decoration ---------- */

/* The masthead. Taller than a toolbar because it carries two lines — the
   group the page belongs to, and the page — and a hairline rather than a
   shadow so it reads as part of the frame rather than as a floating bar. */
#airanksuite-root .ars-header {
	min-height: 70px;
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ars-border);
	background: var(--ars-surface);
}

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

   Everything used to be 13.5px with the occasional inline jump to 27px. That
   is not a hierarchy, it is a body font with exceptions — the eye has nothing
   to climb. Five steps, each with its own weight, tracking and line-height,
   because a display number and a caption need opposite treatment: the number
   wants tight tracking and no leading, the caption wants the reverse.
   -------------------------------- */

#airanksuite-root .t-display {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
#airanksuite-root .t-title {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
}
#airanksuite-root .t-body {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ars-ink-2);
}
#airanksuite-root .t-caption {
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--ars-ink-3);
}
/* Small-caps section label: the only place letterspacing earns its keep. */
#airanksuite-root .t-overline {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}
/* Numerals only: tabular so a column of figures lines up, and tight so a big
   number reads as one shape rather than as separate digits. */
#airanksuite-root .t-num {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* ---------- Entrance ----------

   Content arrives instead of appearing. The stagger is small on purpose: long
   enough to read as one motion, short enough that nobody waits for it.
   ------------------------------- */

@keyframes ars-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

#airanksuite-root .ars-view > * {
	animation: ars-rise 340ms cubic-bezier(0.2, 0, 0, 1) both;
}
#airanksuite-root .ars-view > *:nth-child(1) { animation-delay: 0ms; }
#airanksuite-root .ars-view > *:nth-child(2) { animation-delay: 40ms; }
#airanksuite-root .ars-view > *:nth-child(3) { animation-delay: 80ms; }
#airanksuite-root .ars-view > *:nth-child(4) { animation-delay: 120ms; }
#airanksuite-root .ars-view > *:nth-child(n + 5) { animation-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
	#airanksuite-root .ars-view > *,
	#airanksuite-root .ars-tile,
	#airanksuite-root .ars-card {
		animation: none !important;
		transition: none !important;
	}
}

@keyframes ars-sweep {
	from {
		stroke-dasharray: 0 10000;
	}
}

/* ---------- Radius utilities ----------
   Tailwind's rounded-* scale tops out far rounder than this product wants, so
   the classes used in markup map onto the token scale instead. One place to
   change if the shape language ever moves again.
   -------------------------------------- */

#airanksuite-root .ars-r-sm { border-radius: var(--ars-r-sm); }
#airanksuite-root .ars-r-md { border-radius: var(--ars-r-md); }
#airanksuite-root .ars-r-lg { border-radius: var(--ars-r-lg); }
#airanksuite-root .ars-r-xl { border-radius: var(--ars-r-xl); }
#airanksuite-root .ars-r-sm-top { border-radius: var(--ars-r-sm) var(--ars-r-sm) 0 0; }

/* ---------- Page shell ----------
   Every screen used to pick its own cap — 720, 860, 880, 900, 980, 1060,
   1180 — so Search Console, Indexing and Analytics, three adjacent items in
   one nav group, each ended at a different x. One measure for all of them;
   prose and single fields are narrowed at the element, not at the page.
   -------------------------------- */
#airanksuite-root .ars-page {
	display: grid;
	gap: 20px;
	max-width: 1060px;
}
/* Long-form copy under a heading. Anything past ~85 characters is a paragraph
   the eye loses its place in. */
#airanksuite-root .ars-prose {
	max-width: 88ch;
}

/* ---------- Card grid ----------
   A fixed 3-column grid holding 11 choices leaves a hole in the bottom-right,
   and a hole reads as a card that failed to render. Wrapping flex instead:
   the last row's cards share the leftover width, so every row is complete
   whatever the count. `--min` sets the point at which a column is dropped.
   ------------------------------- */
#airanksuite-root .ars-cardgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
#airanksuite-root .ars-cardgrid > * {
	flex: 1 1 var(--min, 250px);
	min-width: 0;
}

/* ---------- Filter chips ----------
   The same "pick one of these" control had grown three costumes: the bordered
   Tabs strip, the tonal Segmented control, and a hand-rolled solid-blue chip
   row on Site Audit, Sitemap and AI Engine. One chip, used everywhere a filter
   narrows a list.
   ---------------------------------- */
#airanksuite-root .ars-chipbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
#airanksuite-root .ars-chip {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-md);
	background: var(--ars-surface);
	color: var(--ars-ink-2);
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	padding: 7px 12px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#airanksuite-root .ars-chip:hover {
	background: var(--ars-surface-2);
	border-color: var(--ars-ink-3);
}
#airanksuite-root .ars-chip.is-active {
	background: var(--ars-brand-tonal);
	border-color: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
	font-weight: 600;
}
#airanksuite-root .ars-chip-count {
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-chip.is-active .ars-chip-count {
	color: var(--ars-brand-tonal-ink);
	opacity: 0.7;
}

/* ---------- URLs in tables ----------
   `word-break: break-all` was splitting "does-not-exist" as "does-n / ot-exist"
   and turning a one-line row into two. A URL is an identifier: show one line,
   clip it, and keep the whole thing in the title attribute.
   ------------------------------------ */
#airanksuite-root .ars-url {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: normal;
}
/* A nowrap cell with no cap contributes its full text length to the table's
   intrinsic width and pushes the last column outside the card. Any cell
   holding one gets a ceiling; this is the backstop when a call site forgets. */
#airanksuite-root .ars-table td:has(> .ars-url) {
	max-width: 360px;
}

/* Keeps a badge or a button from wrapping inside a table cell — a two-line
   "no reply" pill is what a 92px column does to an unprotected badge. */
#airanksuite-root .ars-table td.is-action,
#airanksuite-root .ars-table th.is-action {
	text-align: end;
	white-space: nowrap;
	width: 1%;
}
#airanksuite-root .ars-table td.is-action > * {
	white-space: nowrap;
}

/* A row of buttons in a table's last column: right-edge aligned across every
   row, whether the row has one action or three. */
#airanksuite-root .ars-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}

/* Compact reorder / remove control for list rows. */
#airanksuite-root .ars-move {
	width: 24px;
	height: 24px;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface);
	color: var(--ars-ink-2);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
#airanksuite-root .ars-move:hover:not(:disabled) {
	background: var(--ars-surface-2);
	border-color: var(--ars-ink-3);
}
#airanksuite-root .ars-move:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ---------- Selection cards (provider picker, pack picker) ---------- */
/* A grid of choices where each card must read as one tap target: quiet by
   default, a brand hairline down the left edge when chosen. No shadows on
   the resting state — a wall of floating cards is noise, not hierarchy. */
#airanksuite-root .ars-pick {
	position: relative;
	/* Flex column, not block. A <button> vertically centres its anonymous
	   content box, so in a row stretched by a three-line neighbour the card
	   with a one-line note had its title pushed ~8px down — two headings in
	   the same row on two different baselines, in every pick grid in the
	   product (modes, packs, markets, providers, engines). */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	text-align: start;
	padding: 10px 12px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface);
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
#airanksuite-root .ars-pick:hover {
	border-color: var(--ars-ink-3);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-pick.is-active {
	border-color: var(--ars-brand);
	background: color-mix(in srgb, var(--ars-brand) 5%, white);
	box-shadow: inset 3px 0 0 var(--ars-brand);
}
#airanksuite-root .ars-pick-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}
#airanksuite-root .ars-pick-note {
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-pick.is-active .ars-pick-note {
	color: var(--ars-ink-2);
}

/* Region/scope tag used inside pick cards. */
#airanksuite-root .ars-tag {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 2px 5px;
	border-radius: var(--ars-r-xs);
	line-height: 1;
	white-space: nowrap;
}

/* ---------- Disclosure ("mehr Infos" without leaving the page) ---------- */
#airanksuite-root .ars-disclosure {
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-disclosure > summary {
	list-style: none;
	cursor: pointer;
	padding: 8px 11px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ars-ink-2);
	display: flex;
	align-items: center;
	gap: 7px;
	user-select: none;
}
#airanksuite-root .ars-disclosure > summary::-webkit-details-marker {
	display: none;
}
#airanksuite-root .ars-disclosure > summary::before {
	content: '';
	width: 0;
	height: 0;
	border-inline-start: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 140ms ease;
	flex: none;
}
#airanksuite-root .ars-disclosure[open] > summary::before {
	transform: rotate(90deg);
}
#airanksuite-root .ars-disclosure[open] > summary {
	color: var(--ars-ink);
	border-bottom: 1px solid var(--ars-border);
}
#airanksuite-root .ars-disclosure-body {
	padding: 11px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ars-ink-2);
	background: var(--ars-surface);
}
#airanksuite-root .ars-disclosure-body p:first-child {
	margin-top: 0;
}
#airanksuite-root .ars-disclosure-body p:last-child {
	margin-bottom: 0;
}

/* A table that is wider than its card should scroll inside the card rather
   than push the whole admin page sideways. One wrapper, so the behaviour is
   the same on every screen instead of whichever page remembered to add
   overflow-x. */
#airanksuite-root .ars-table-wrap {
	overflow-x: auto;
	max-width: 100%;
}

/* Sticky save bar.
   A settings screen with five tabs cannot put its save button at the bottom of
   one of them — that button is then invisible from four of the five, and the
   person who filled in the Hours tab has no idea their work is unsaved. It
   sits above the WordPress admin footer and below any drawer. */
#airanksuite-root .ars-savebar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
	padding: 10px 14px;
	background: var(--ars-surface);
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-md);
	box-shadow: var(--ars-e2);
}

/* Front-end helpers for the Local SEO shortcodes. Deliberately minimal — the
   theme owns typography; this only stops the markup collapsing into a wall. */
.airanksuite-hours {
	border-collapse: collapse;
}
.airanksuite-hours th,
.airanksuite-hours td {
	text-align: start;
	padding: 2px 12px 2px 0;
	font-weight: inherit;
}
.airanksuite-hours tr.airanksuite-hours-special th {
	font-weight: 600;
}
.airanksuite-open-now::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-inline-end: 6px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: baseline;
}
.airanksuite-open-now.is-open {
	color: #188038;
}
.airanksuite-open-now.is-closed {
	color: #c5221f;
}
.airanksuite-services {
	list-style: none;
	margin: 0;
	padding: 0;
}
.airanksuite-services li {
	padding: 6px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.airanksuite-service-price {
	float: right;
	font-variant-numeric: tabular-nums;
}
.airanksuite-service-desc {
	display: block;
	opacity: 0.75;
	font-size: 0.9em;
}

/* A chip holding the user's own words — a town, a language, a URL.
   Distinct from .ars-tag on purpose: .ars-tag is a system label and shouts in
   uppercase, which is right for "REQUIRED" and wrong for "Abu Dhabi" and
   actively destructive for a case-sensitive URL. */
#airanksuite-root .ars-chip-tag {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	padding: 3px 4px 3px 8px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface-2);
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-chip-tag.is-suggestion {
	border-style: dashed;
	background: transparent;
	color: var(--ars-ink-3);
	cursor: pointer;
	padding-inline-end: 8px;
}
#airanksuite-root .ars-chip-tag.is-suggestion:hover {
	color: var(--ars-brand);
	border-color: var(--ars-brand);
}

/* ---------- Tab bar ---------- */

#airanksuite-root .ars-tabbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--ars-border);
	margin-bottom: 2px;
}
#airanksuite-root .ars-tab:focus-visible {
	outline: 2px solid var(--ars-brand);
	outline-offset: -2px;
}
/* A count beside a tab label, so "Problems 5" is legible without opening it. */
#airanksuite-root .ars-tab-count {
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 5px;
	border-radius: var(--ars-r-xs);
	background: var(--ars-surface-3);
	color: var(--ars-ink-3);
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-tab.is-active .ars-tab-count {
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}

/* ---------- Page masthead ---------- */

/* The page title used to be 20px of text floating above the content with
   nothing under it. A masthead with a rule, the section it belongs to, and a
   right-hand slot for page-level actions is what makes a screen feel like
   part of an application rather than a settings page. */
#airanksuite-root .ars-masthead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--ars-border);
	margin-bottom: 18px;
}

/* ---------- Data density inside a flush card ---------- */

/* A table that fills its card should not also carry the card's padding — the
   header band then meets the card's own rule and the two read as one edge. */
#airanksuite-root .ars-card > .ars-table-wrap > .ars-table th:first-child,
#airanksuite-root .ars-card > .ars-table-wrap > .ars-table td:first-child {
	padding-inline-start: 18px;
}
#airanksuite-root .ars-card > .ars-table-wrap > .ars-table th:last-child,
#airanksuite-root .ars-card > .ars-table-wrap > .ars-table td:last-child {
	padding-inline-end: 18px;
}
#airanksuite-root .ars-card > .ars-table-wrap > .ars-table th {
	border-radius: 0;
}

/* ---------- Empty state ---------- */

/* "No results" as a grey sentence in the corner of a big white box is the
   cheapest-looking thing in any admin screen. Centre it, give it a mark, and
   say what to do next. */
#airanksuite-root .ars-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 30px 24px;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-empty-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 4px;
	border-radius: var(--ars-r-md);
	background: var(--ars-surface-2);
	border: 1px solid var(--ars-border);
	color: var(--ars-ink-3);
}

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

/* The switch.
   It was a 40x22 box with a square knob that also changed size when it moved,
   so the "on" state read as a different component rather than as the same one
   in another position. Now one knob, one size, one travel — and a track that
   stays a rounded rectangle rather than becoming a pill, because nothing in
   this product is a pill. */
#airanksuite-root .ars-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 38px;
	height: 21px;
	border-radius: var(--ars-r-md);
	background: #dbe1ea;
	border: 1px solid #c3ccd9;
	cursor: pointer;
	transition: background 160ms cubic-bezier(0.2, 0, 0, 1), border-color 160ms ease;
}
#airanksuite-root .ars-switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 15px;
	height: 15px;
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface);
	box-shadow: 0 1px 2px rgb(60 64 67 / 0.28);
	transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
}
#airanksuite-root .ars-switch.is-on {
	background: var(--ars-brand);
	border-color: var(--ars-brand);
}
#airanksuite-root .ars-switch.is-on::after {
	transform: translateX(17px);
}
#airanksuite-root .ars-switch.is-disabled {
	opacity: 0.45;
	cursor: default;
}
#airanksuite-root .ars-switch:focus-visible {
	outline: 2px solid var(--ars-brand);
	outline-offset: 2px;
}

/* Field labels. Every form in the product used a bare <label>; giving them one
   weight and one colour is the difference between a form and a pile of text. */
#airanksuite-root label {
	color: var(--ars-ink);
}

/* The disclosure used on a dozen screens. It read as a grey box with a
   triangle; a caret that turns and a hover state make it read as a control. */
#airanksuite-root .ars-disclosure > summary::before {
	content: '\25B8';
	display: inline-block;
	font-size: 10px;
	color: var(--ars-ink-3);
	transition: transform 160ms ease;
}
#airanksuite-root .ars-disclosure[open] > summary::before {
	transform: rotate(90deg);
}
#airanksuite-root .ars-disclosure > summary:hover {
	color: var(--ars-ink);
}
#airanksuite-root .ars-disclosure[open] > summary {
	border-bottom: 1px solid var(--ars-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Head meta

   A tag list is a table of two columns where one column is arbitrary-length
   text. Grid rather than <table> so the value can truncate without the key
   column collapsing, and so the expanded row can span the full width.
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-head-strip {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 10px 12px;
	border: 1px solid var(--ars-border);
	border-radius: 6px;
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-head-stat {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
#airanksuite-root .ars-head-stat b {
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
#airanksuite-root .ars-head-stat span {
	font-size: 11.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-head-stat.is-bad b {
	color: var(--ars-serious);
}
#airanksuite-root .ars-head-stat.is-warn b {
	color: var(--ars-warning);
}

#airanksuite-root .ars-head-group {
	border: 1px solid var(--ars-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--ars-surface);
}
#airanksuite-root .ars-head-group-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	background: var(--ars-surface-2);
	border-bottom: 1px solid var(--ars-border);
}
#airanksuite-root .ars-head-rows {
	display: grid;
}
#airanksuite-root .ars-head-row + .ars-head-row {
	border-top: 1px solid var(--ars-border);
}
#airanksuite-root .ars-head-row-main {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 7px 12px;
	border: 0;
	background: transparent;
	text-align: start;
	cursor: pointer;
	font: inherit;
}
#airanksuite-root .ars-head-row-main:hover {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-head-key {
	font-size: 12px;
	font-weight: 600;
	color: var(--ars-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-head-val {
	font-size: 12px;
	color: var(--ars-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--ars-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
#airanksuite-root .ars-head-len {
	font-size: 11px;
	color: var(--ars-ink-3);
}
/* A missing required tag is the only status worth colouring the whole row. */
#airanksuite-root .ars-head-row.is-missing {
	background: color-mix(in srgb, var(--ars-c-red) 55%, transparent);
}
#airanksuite-root .ars-head-row-body {
	display: grid;
	gap: 8px;
	padding: 2px 12px 12px 12px;
	border-top: 1px dashed var(--ars-border);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-head-code {
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--ars-surface-3);
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-head-pre {
	margin: 0;
	padding: 10px 12px;
	border-radius: 4px;
	background: var(--ars-ink);
	color: var(--ars-border);
	font-size: 11.5px;
	line-height: 1.65;
	overflow: auto;
	max-height: 260px;
	white-space: pre-wrap;
	word-break: break-word;
	tab-size: 2;
}
#airanksuite-root .ars-head-pre.is-tall {
	max-height: 460px;
}
/* Inside a flush card the block spans the full width, so its own corners
   would poke past the card's. */
#airanksuite-root .ars-card.is-flush .ars-head-pre {
	border-radius: 0;
}

#airanksuite-root .ars-head-issue {
	display: flex;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 5px;
	border: 1px solid var(--ars-border);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-head-issue.is-error {
	background: var(--ars-c-red);
	border-color: transparent;
}
#airanksuite-root .ars-head-issue.is-warn {
	background: var(--ars-c-yellow);
	border-color: transparent;
}
#airanksuite-root .ars-head-issue-mark {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	background: rgb(255 255 255 / 0.7);
}
#airanksuite-root .ars-head-issue.is-error .ars-head-issue-mark {
	color: var(--ars-c-red-ink);
}
#airanksuite-root .ars-head-issue.is-warn .ars-head-issue-mark {
	color: var(--ars-c-yellow-ink);
}

#airanksuite-root .ars-head-drift {
	display: grid;
	gap: 4px;
	padding: 9px 12px;
	border: 1px solid var(--ars-border);
	border-radius: 5px;
	background: var(--ars-surface);
}
#airanksuite-root .ars-head-drift-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
}
#airanksuite-root .ars-head-drift-row code {
	font-size: 11.5px;
	color: var(--ars-ink-2);
	word-break: break-word;
}
#airanksuite-root .ars-linkbtn {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--ars-brand);
}

@media (max-width: 900px) {
	#airanksuite-root .ars-head-row-main {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 2px;
	}
	#airanksuite-root .ars-head-val {
		grid-column: 1 / -1;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Snippets
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-snip-head {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border: 1px solid var(--ars-border);
	border-radius: 8px;
	background: var(--ars-surface);
	box-shadow: var(--ars-e1);
}
#airanksuite-root .ars-snip-stats {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
#airanksuite-root .ars-snip-stat {
	display: grid;
	line-height: 1.15;
}
#airanksuite-root .ars-snip-stat b {
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-snip-stat span {
	font-size: 11px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-snip-stat.is-live b {
	color: var(--ars-good, var(--ars-good));
}
#airanksuite-root .ars-snip-stat.is-bad b {
	color: var(--ars-serious);
}
#airanksuite-root .ars-snip-actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

#airanksuite-root .ars-snip-list {
	display: grid;
}
#airanksuite-root .ars-snip-row + .ars-snip-row {
	border-top: 1px solid var(--ars-border);
}
#airanksuite-root .ars-snip-row.is-open {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-snip-row-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-inline-end: 12px;
}
#airanksuite-root .ars-snip-row-main {
	display: grid;
	grid-template-columns: 14px auto minmax(0, 1fr) auto auto auto auto;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: 0;
	background: transparent;
	text-align: start;
	font: inherit;
	cursor: pointer;
}
#airanksuite-root .ars-snip-row-main:hover {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-snip-caret {
	color: var(--ars-ink-3);
	font-size: 10px;
}
#airanksuite-root .ars-snip-type {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 3px;
	min-width: 40px;
	text-align: center;
}
#airanksuite-root .ars-snip-name {
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-snip-note {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--ars-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-snip-meta {
	font-size: 11.5px;
	color: var(--ars-ink-3);
	white-space: nowrap;
}
#airanksuite-root .ars-snip-row-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
#airanksuite-root .ars-snip-body {
	display: grid;
	gap: 12px;
	padding: 4px 12px 16px 12px;
	border-top: 1px dashed var(--ars-border);
}

/* A dot rather than a badge: forty rows of "active" badges is a wall of
   green, and the eye stops reading it. */
#airanksuite-root .ars-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ars-good);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ars-good) 18%, transparent);
}

#airanksuite-root .ars-snip-chain {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 10px 14px;
	border-bottom: 1px solid var(--ars-border);
}
#airanksuite-root .ars-snip-chain-node {
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}
#airanksuite-root .ars-snip-chain-arrow {
	color: var(--ars-ink-3);
	font-size: 11px;
}

#airanksuite-root .ars-code-wrap {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	border: 1px solid var(--ars-border);
	border-radius: 5px;
	overflow: hidden;
	background: var(--ars-ink);
}
#airanksuite-root .ars-code-gutter {
	display: grid;
	align-content: start;
	padding: 10px 0;
	background: #14161c;
	color: #5a6070;
	font: 11.5px/1.6 var(--ars-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	text-align: end;
	overflow: hidden;
	user-select: none;
}
#airanksuite-root .ars-code-gutter span {
	padding-inline-end: 10px;
}
#airanksuite-root textarea.ars-code-area {
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 10px 12px;
	background: transparent;
	color: var(--ars-border);
	font-size: 11.5px;
	line-height: 1.6;
	tab-size: 4;
	white-space: pre;
	resize: vertical;
	box-shadow: none;
}
#airanksuite-root textarea.ars-code-area:focus {
	outline: 0;
	box-shadow: none;
	background: #1c1f28;
}

#airanksuite-root .ars-lib-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}
#airanksuite-root .ars-lib-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	border: 1px solid var(--ars-border);
	border-radius: 8px;
	background: var(--ars-surface);
}
#airanksuite-root .ars-lib-code {
	margin: 0;
	padding: 9px 10px;
	border-radius: 4px;
	background: var(--ars-ink);
	color: #cfd3e4;
	font-size: 10.5px;
	line-height: 1.55;
	max-height: 116px;
	overflow: hidden;
	white-space: pre;
}

#airanksuite-root .ars-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	border: 1px solid var(--ars-border);
	border-radius: 5px;
	background: var(--ars-surface);
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-search input {
	border: 0;
	background: transparent;
	box-shadow: none;
	min-width: 200px;
	padding: 5px 0;
}
#airanksuite-root .ars-search input:focus {
	outline: 0;
	box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   The operations floor

   Motion rule for everything below: it only moves when something is actually
   happening. `.is-live` means an engine can answer; `.is-busy` and `.is-on`
   mean the agent reported work on that node this poll. A dashboard that
   animates identically whether or not anything is running trains people to
   stop looking at it.
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-floor {
	position: relative;
	padding: 20px 18px 16px;
	background:
		var(--ars-surface-2);
	color: var(--ars-ink);
	overflow: hidden;
}
#airanksuite-root .ars-floor.is-dark {
	padding: 26px 18px;
}
#airanksuite-root .ars-floor-off {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 14px;
	margin-bottom: 14px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface);
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-floor-off > .ars-btn { margin-inline-start: auto; }
/* The unpowered diagram: same geometry as the live one, drained of colour, so
   connecting a key changes the palette and not the layout. */
#airanksuite-root .ars-floor-desks.is-dark { opacity: 0.72; }
#airanksuite-root .ars-desk.is-dark {
	border-style: dashed;
	background: transparent;
}
#airanksuite-root .ars-desk.is-dark .ars-desk-eng {
	background: var(--ars-surface-3);
	color: var(--ars-ink-3);
	border-color: transparent;
}
/* The supply rail gets a heading, so the chips read as one group with a state
   rather than as an unlabelled row of buttons. */
#airanksuite-root .ars-circuits-wrap {
	margin-bottom: 16px;
	padding: 12px 12px 14px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: color-mix(in srgb, var(--ars-surface) 70%, transparent);
}
#airanksuite-root .ars-floor-rail-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
#airanksuite-root .ars-circuits-wrap .ars-circuits { margin-bottom: 0; }
#airanksuite-root .ars-floor-off-mark {
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--ars-btn-border-hover);
}
#airanksuite-root .ars-floor-off .font-semibold {
	color: var(--ars-ink);
}

/* The bus bar. Dim when nothing is connected; a slow travelling highlight the
   moment one engine has a key. */
#airanksuite-root .ars-floor-bus {
	position: relative;
	height: 3px;
	border-radius: 2px;
	background: var(--ars-border);
	overflow: hidden;
	margin-bottom: 16px;
}
#airanksuite-root .ars-floor.is-live .ars-floor-bus {
	background: var(--ars-brand);
	box-shadow: 0 0 14px rgb(34 113 177 / 0.18);
}
#airanksuite-root .ars-floor-bus-flow {
	position: absolute;
	inset: 0;
	background: var(--ars-brand-tonal);
	width: 22%;
	transform: translateX(-30%);
	opacity: 0;
}
#airanksuite-root .ars-floor.is-live .ars-floor-bus-flow {
	opacity: 1;
	animation: ars-bus 3.4s linear infinite;
}
@keyframes ars-bus {
	from {
		transform: translateX(-30%);
	}
	to {
		transform: translateX(460%);
	}
}

#airanksuite-root .ars-floor-engines {
	display: grid;
	/* auto-fill, not auto-fit: with a single connected engine auto-fit would
	   stretch one card across the whole floor and it would read as a banner
	   rather than as one node among several. */
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}
#airanksuite-root .ars-eng {
	position: relative;
	padding: 10px 12px 11px;
	border: 1px solid var(--ars-border);
	border-radius: 7px;
	background: linear-gradient(180deg, #ffffff, #ffffff);
}
#airanksuite-root .ars-eng.is-default {
	border-color: var(--ars-brand-ink);
}
/* The lead-in from the bus above. */
#airanksuite-root .ars-eng-lead {
	position: absolute;
	top: -17px;
	inset-inline-start: 22px;
	width: 1px;
	height: 17px;
	background: var(--ars-border);
}
#airanksuite-root .ars-floor.is-live .ars-eng-lead {
	background: var(--ars-brand);
}
#airanksuite-root .ars-eng-head {
	display: flex;
	align-items: center;
	gap: 7px;
}
#airanksuite-root .ars-eng-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ars-btn-border-hover);
	flex: none;
}
#airanksuite-root .ars-floor.is-live .ars-eng-dot {
	background: #1fa06a;
	box-shadow: 0 0 0 3px rgb(31 160 106 / 0.15);
}
#airanksuite-root .ars-eng.is-busy .ars-eng-dot {
	background: var(--ars-accent);
	box-shadow: 0 0 0 3px rgb(232 163 61 / 0.22);
	animation: ars-pulse 1.1s ease-in-out infinite;
}
@keyframes ars-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 3px rgb(232 163 61 / 0.22);
	}
	50% {
		box-shadow: 0 0 0 7px rgb(232 163 61 / 0.05);
	}
}
#airanksuite-root .ars-eng-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ars-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-eng-flag {
	margin-inline-start: auto;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ars-brand);
}
#airanksuite-root .ars-eng-model {
	margin-top: 2px;
	font-size: 10.5px;
	color: var(--ars-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-eng-load {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 10.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-eng-load-bar {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: var(--ars-border);
	overflow: hidden;
}
#airanksuite-root .ars-eng-load-bar span {
	display: block;
	height: 100%;
	background: var(--ars-brand);
	transition: width 400ms cubic-bezier(0.2, 0, 0, 1);
}

#airanksuite-root .ars-floor-desks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
}
#airanksuite-root .ars-desk {
	min-width: 0;
	overflow: hidden;
	padding: 9px 11px 10px;
	border: 1px solid var(--ars-surface-3);
	border-radius: 7px;
	background: rgb(22 22 30 / 0.02);
	transition: border-color 240ms ease, background 240ms ease;
}
#airanksuite-root .ars-desk.is-active {
	border-color: var(--ars-brand);
	background: rgb(109 92 240 / 0.09);
}
#airanksuite-root .ars-desk-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}
#airanksuite-root .ars-desk-name {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-desk-hint {
	font-size: 10px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-desk-jobs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 3px;
}
/* Two lines, not two columns. Side by side, the engine name was the thing
   that got clipped — and "which engine" is the question this whole panel
   exists to answer, so it is the one thing that must stay readable. */
#airanksuite-root .ars-desk-jobs li {
	display: grid;
	gap: 1px;
	padding: 4px 0;
	border-top: 1px solid rgb(22 22 30 / 0.04);
}
#airanksuite-root .ars-desk-jobs li:first-child {
	border-top: 0;
}
#airanksuite-root .ars-desk-job {
	min-width: 0;
	font-size: 11.5px;
	color: var(--ars-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-desk-jobs li.is-on .ars-desk-job {
	color: var(--ars-brand-ink);
	font-weight: 600;
}
/* The wire: colour identifies which engine the job is patched into. */
#airanksuite-root .ars-desk-eng {
	position: relative;
	justify-self: start;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ars-wire, var(--ars-ink-3));
	padding-inline-start: 12px;
}
#airanksuite-root .ars-desk-eng::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 8px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	opacity: 0.7;
}
#airanksuite-root .ars-desk-eng.is-cold {
	color: var(--ars-ink-3);
	text-decoration: line-through;
}
#airanksuite-root .ars-desk-jobs li.is-on .ars-desk-eng::before {
	opacity: 1;
	box-shadow: 0 0 6px currentColor;
}

#airanksuite-root .ars-floor-now {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 9px 12px;
	border-radius: 6px;
	background: var(--ars-surface-2);
	border: 1px solid var(--ars-surface-3);
	min-height: 38px;
}
#airanksuite-root .ars-floor-now.is-on {
	border-color: var(--ars-brand);
	background: var(--ars-brand-tonal);
}
#airanksuite-root .ars-floor-now-mark {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ars-accent);
	flex: none;
	animation: ars-pulse 1.1s ease-in-out infinite;
}
#airanksuite-root .ars-floor-now-text {
	font-size: 12.5px;
	/* Was #dfe3f2 — a near-white meant for a dark panel, printed on the pale
	   lavender strip of the light theme, where it could not be read at all. */
	color: var(--ars-ink);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-floor-now-text.is-idle {
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-floor-now-time {
	margin-inline-start: auto;
	font-size: 11.5px;
	color: var(--ars-brand-tonal-ink);
	flex: none;
}

/* Somebody who has asked their system not to animate things means it. */
#airanksuite-root .ars-floor.is-still .ars-floor-bus-flow,
#airanksuite-root .ars-floor.is-still .ars-eng-dot,
#airanksuite-root .ars-floor.is-still .ars-floor-now-mark {
	animation: none;
}

/* ── Routing table ─────────────────────────────────────────────────────── */

#airanksuite-root .ars-routing {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--ars-border);
}
#airanksuite-root .ars-routing-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
#airanksuite-root .ars-routing-head p {
	max-width: 62ch;
}
#airanksuite-root .ars-routing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 8px;
}
#airanksuite-root .ars-routing-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px;
	align-items: center;
	gap: 12px;
	padding: 9px 11px;
	border: 1px solid var(--ars-border);
	border-radius: 6px;
	background: var(--ars-surface);
}
#airanksuite-root .ars-routing-row select {
	width: 100%;
}
#airanksuite-root .ars-trait {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--ars-surface-3);
	color: var(--ars-ink-3);
}

@media (max-width: 782px) {
	#airanksuite-root .ars-routing-row {
		grid-template-columns: minmax(0, 1fr);
	}
	#airanksuite-root .ars-snip-row-main {
		grid-template-columns: 14px auto minmax(0, 1fr) auto;
		row-gap: 4px;
	}
	#airanksuite-root .ars-snip-meta:nth-of-type(n + 2) {
		display: none;
	}
}

/* The rail is a fixed 340px next to a flexible column, so anything inside it
   that will not wrap — a long URL in the SERP preview, a slug full of percent
   escapes — pushes past the edge and gets clipped. Nothing in a preview is
   worth horizontal scrolling. */
#airanksuite-root .ars-sheet-rail > * {
	min-width: 0;
	max-width: 100%;
}
#airanksuite-root .ars-sheet-rail :where(a, code, span, div, p) {
	overflow-wrap: anywhere;
}
/* Every grid inside the rail gets an explicit single track that can shrink
   to nothing. An implicit `auto` track is sized from its content, and on a
   long slug or a long title WebKit let it grow past the rail, so the whole
   column was drawn 500px wide and cut off at the edge (Nami's screenshot,
   3 September). minmax(0, 1fr) cannot exceed the container in any engine. */
#airanksuite-root .ars-sheet-rail .grid,
#airanksuite-root .ars-sheet-rail {
	grid-template-columns: minmax(0, 1fr);
}
#airanksuite-root .ars-sheet-rail .grid > * {
	min-width: 0;
	max-width: 100%;
}
/* The preview frames fill the rail rather than asking for 560px of it. */
#airanksuite-root .ars-sheet-rail .ars-frame {
	width: 100%;
	max-width: 100% !important;
	box-sizing: border-box;
}
/* The view switch has four options and 300px; smaller pads, so it stays on
   one line in the rail instead of breaking into two ragged rows. */
#airanksuite-root .ars-sheet-rail .ars-seg-item {
	padding: 6px 9px;
	font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Content library — type tabs and per-type health
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-typebar {
	display: flex;
	align-items: stretch;
	gap: 2px;
	flex-wrap: wrap;
	padding: 3px;
	border: 1px solid var(--ars-border);
	border-radius: 8px;
	background: var(--ars-surface);
	box-shadow: var(--ars-e1);
}
#airanksuite-root .ars-typetab {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 12px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	cursor: pointer;
	font: inherit;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-typetab:hover {
	background: var(--ars-surface-2);
	color: var(--ars-ink);
}
#airanksuite-root .ars-typetab.is-active {
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}
#airanksuite-root .ars-typetab-label {
	font-size: 12.5px;
	font-weight: 600;
}
#airanksuite-root .ars-typetab-count {
	font-size: 11px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-typetab.is-active .ars-typetab-count {
	color: inherit;
	opacity: 0.72;
}
/* A type with work outstanding gets a mark, not a number: the number is on
   the health strip below and repeating it here would be noise. */
#airanksuite-root .ars-typetab-dot {
	position: absolute;
	top: 5px;
	inset-inline-end: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ars-warning);
}

#airanksuite-root .ars-typehealth {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 13px 16px;
	border: 1px solid var(--ars-border);
	border-radius: 8px;
	background: var(--ars-surface);
	box-shadow: var(--ars-e1);
}
#airanksuite-root .ars-typehealth-main {
	display: grid;
	gap: 5px;
	min-width: 240px;
	flex: 1;
}
#airanksuite-root .ars-typehealth-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--ars-surface-3);
	overflow: hidden;
	max-width: 420px;
}
#airanksuite-root .ars-typehealth-bar span {
	display: block;
	height: 100%;
	background: var(--ars-grad);
	transition: width 380ms cubic-bezier(0.2, 0, 0, 1);
}
#airanksuite-root .ars-typehealth-figs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
#airanksuite-root .ars-healthfig {
	display: grid;
	gap: 1px;
	padding: 7px 11px;
	border: 1px solid var(--ars-border);
	border-radius: 6px;
	background: var(--ars-surface-2);
	cursor: pointer;
	font: inherit;
	text-align: start;
	min-width: 84px;
}
#airanksuite-root .ars-healthfig:hover:not(:disabled) {
	border-color: var(--ars-brand);
}
#airanksuite-root .ars-healthfig:disabled {
	cursor: default;
	opacity: 0.55;
}
#airanksuite-root .ars-healthfig b {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1;
}
#airanksuite-root .ars-healthfig span {
	font-size: 10.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-healthfig.is-bad b {
	color: var(--ars-serious);
}
#airanksuite-root .ars-healthfig.is-warn b {
	color: var(--ars-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Full page report
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-report-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--ars-border);
	border-radius: 8px;
	background: var(--ars-surface);
}
#airanksuite-root .ars-report-head.is-green {
	border-inline-start: 3px solid var(--ars-good);
}
#airanksuite-root .ars-report-head.is-amber {
	border-inline-start: 3px solid var(--ars-warning);
}
#airanksuite-root .ars-report-head.is-red {
	border-inline-start: 3px solid var(--ars-serious);
}
#airanksuite-root .ars-report-score {
	display: flex;
	align-items: baseline;
	gap: 1px;
	flex: none;
}
#airanksuite-root .ars-report-score b {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}
#airanksuite-root .ars-report-score span {
	font-size: 14px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-report-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--ars-surface-3);
	overflow: hidden;
	max-width: 420px;
}
#airanksuite-root .ars-report-bar span {
	display: block;
	height: 100%;
	background: var(--ars-grad);
	transition: width 420ms cubic-bezier(0.2, 0, 0, 1);
}

#airanksuite-root .ars-report-group {
	border: 1px solid var(--ars-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--ars-surface);
}
#airanksuite-root .ars-report-group-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	background: var(--ars-surface-2);
	border-bottom: 1px solid var(--ars-border);
}
#airanksuite-root .ars-report-tally {
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ars-good);
}
#airanksuite-root .ars-report-tally.is-bad {
	color: var(--ars-serious);
}

#airanksuite-root .ars-report-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 12px;
}
#airanksuite-root .ars-report-row + .ars-report-row {
	border-top: 1px solid var(--ars-border);
}
/* A failure is the thing worth seeing, so it keeps full contrast and a passing
   row steps back. Colouring every row would make the list unreadable. */
#airanksuite-root .ars-report-row.is-pass {
	opacity: 0.72;
}
#airanksuite-root .ars-report-mark {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 700;
	background: var(--ars-c-red);
	color: var(--ars-c-red-ink);
}
#airanksuite-root .ars-report-row.is-pass .ars-report-mark {
	background: var(--ars-c-green);
	color: var(--ars-c-green-ink);
}
#airanksuite-root .ars-report-weight {
	font-size: 7px;
	letter-spacing: 1px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-report-value {
	display: inline-block;
	margin-top: 4px;
	max-width: 100%;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--ars-surface-2);
	color: var(--ars-ink-2);
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* Word-count band legend: a swatch, the count, and what the band means — a
   colour key with no explanation just moves the question one step. */
#airanksuite-root .ars-band-notes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
	margin-top: 14px;
}
#airanksuite-root .ars-band-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
#airanksuite-root .ars-band-swatch {
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: 3px;
	border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Site-wide area map

   Replaces the row-per-page heat map, which stopped meaning anything above
   about fifty pages: you were looking at a sample and could not tell. Seven
   rows, whole site, each one clickable down to the pages behind it.
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-areamap {
	display: grid;
}
#airanksuite-root .ars-arearow {
	display: grid;
	grid-template-columns: 52px 200px minmax(80px, 1fr) 200px 16px;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 16px;
	border: 0;
	border-top: 1px solid var(--ars-border);
	background: transparent;
	font: inherit;
	text-align: start;
	cursor: pointer;
}
#airanksuite-root .ars-arearow:first-child {
	border-top: 0;
}
#airanksuite-root .ars-arearow:hover:not(:disabled) {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-arearow:disabled {
	cursor: default;
	opacity: 0.6;
}
#airanksuite-root .ars-arearow.is-open {
	background: var(--ars-brand-tonal);
}
#airanksuite-root .ars-area-score {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	text-align: end;
	letter-spacing: -0.02em;
}
#airanksuite-root .ars-arearow.is-good .ars-area-score {
	color: var(--ars-good);
}
#airanksuite-root .ars-arearow.is-warn .ars-area-score {
	color: var(--ars-warning);
}
#airanksuite-root .ars-arearow.is-bad .ars-area-score {
	color: var(--ars-serious);
}
#airanksuite-root .ars-arearow.is-none .ars-area-score {
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-area-label {
	display: grid;
	min-width: 0;
}
#airanksuite-root .ars-area-label b {
	font-size: 13px;
	font-weight: 600;
}
#airanksuite-root .ars-area-label span {
	font-size: 11.5px;
	color: var(--ars-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* The distribution, not the average. Two sites can average 62 with completely
   different problems: one where every page is mediocre, one where most are
   fine and forty are broken. Only the second is worth an afternoon. */
#airanksuite-root .ars-area-bar {
	display: flex;
	height: 10px;
	border-radius: 5px;
	overflow: hidden;
	background: var(--ars-surface-3);
}
#airanksuite-root .ars-area-bar i {
	display: block;
	flex-basis: 0;
}
#airanksuite-root .ars-area-bar i.is-bad {
	background: #d1495b;
}
#airanksuite-root .ars-area-bar i.is-warn {
	background: #e2952b;
}
#airanksuite-root .ars-area-bar i.is-good {
	background: #2b7a4b;
}
#airanksuite-root .ars-area-bar i.is-none {
	background: var(--ars-surface-3);
}
#airanksuite-root .ars-area-counts {
	font-size: 11.5px;
	color: var(--ars-ink-3);
	text-align: end;
}
#airanksuite-root .ars-area-counts b {
	color: var(--ars-ink);
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-area-caret {
	color: var(--ars-ink-3);
	font-size: 10px;
}

@media (max-width: 960px) {
	#airanksuite-root .ars-arearow {
		grid-template-columns: 44px minmax(0, 1fr) 16px;
		row-gap: 6px;
	}
	#airanksuite-root .ars-area-bar,
	#airanksuite-root .ars-area-counts {
		grid-column: 2 / 3;
		text-align: start;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Google rich result eligibility

   Required and recommended are deliberately different colours and different
   sections. Every structured-data tool on the market shows both as errors,
   which produces a screen of red nobody can prioritise — one of these means
   the page is not eligible at all, the other means the result renders with
   less in it.
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-rr-stat {
	display: grid;
	gap: 1px;
	padding: 12px 14px;
	border: 1px solid var(--ars-border);
	border-radius: 8px;
	background: var(--ars-surface);
	box-shadow: var(--ars-e1);
}
#airanksuite-root .ars-rr-stat b {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-rr-stat span {
	font-size: 11.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-rr-stat.is-bad b {
	color: var(--ars-serious);
}

#airanksuite-root .ars-rr-row + .ars-rr-row {
	border-top: 1px solid var(--ars-border);
}
#airanksuite-root .ars-rr-main {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	background: transparent;
	text-align: start;
	font: inherit;
	cursor: pointer;
}
#airanksuite-root .ars-rr-main:hover {
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-rr-caret {
	color: var(--ars-ink-3);
	font-size: 10px;
}
#airanksuite-root .ars-rr-about {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-rr-count {
	font-size: 12px;
	color: var(--ars-ink-2);
	white-space: nowrap;
}
#airanksuite-root .ars-rr-body {
	display: grid;
	gap: 14px;
	padding: 4px 14px 16px 40px;
	background: var(--ars-surface-2);
	border-top: 1px dashed var(--ars-border);
}
#airanksuite-root .ars-rr-props {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 6px;
}
#airanksuite-root .ars-rr-prop {
	display: grid;
	gap: 1px;
	padding: 7px 10px;
	border: 1px solid var(--ars-border);
	border-inline-start: 3px solid var(--ars-ink-3);
	border-radius: 5px;
	background: var(--ars-surface);
}
#airanksuite-root .ars-rr-prop.is-required {
	border-inline-start-color: var(--ars-serious);
}
#airanksuite-root .ars-rr-prop code {
	justify-self: start;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ars-ink);
	background: transparent;
	padding: 0;
}
#airanksuite-root .ars-rr-prop span {
	font-size: 11px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-rr-prop em {
	margin-top: 3px;
	font-size: 11.5px;
	font-style: normal;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-rr-sample {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI crawler controls

   The evidence sits on the row with the switch, because "block ByteDance" is
   a guess until you can see that it fetched four thousand pages last week.
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-crawl-region {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 9px 14px;
	background: var(--ars-surface-2);
	border-top: 1px solid var(--ars-border);
	border-bottom: 1px solid var(--ars-border);
}
#airanksuite-root .ars-crawl-region b {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
#airanksuite-root .ars-crawl-region span {
	font-size: 11.5px;
	color: var(--ars-ink-3);
	min-width: 0;
}
#airanksuite-root .ars-crawl-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 100px 120px;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
}
#airanksuite-root .ars-crawl-row + .ars-crawl-row {
	border-top: 1px solid var(--ars-border);
}
/* A crawler still arriving after being disallowed is the one thing on this
   screen worth interrupting somebody for. */
#airanksuite-root .ars-crawl-row.is-defiant {
	background: var(--ars-c-red);
}
#airanksuite-root .ars-crawl-meta {
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-crawl-meta b {
	color: var(--ars-ink);
	font-weight: 600;
}
#airanksuite-root .ars-crawl-spark {
	min-width: 0;
	opacity: 0.85;
}
#airanksuite-root .ars-crawl-switch {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

@media (max-width: 782px) {
	#airanksuite-root .ars-crawl-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	#airanksuite-root .ars-crawl-spark {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Small screens

   The plugin is used on a phone more often than the desktop layout suggests:
   an editor checks a page score on the train, a client is shown the dashboard
   over lunch. Below 782px — WordPress's own admin breakpoint, so the plugin
   changes shape at the same moment the rest of wp-admin does — this becomes an
   app rather than a squeezed desktop.

   Three rules:
   - Navigation is a sheet, not a stacked column. Thirty destinations above the
     content is a scroll, not a menu.
   - Nothing needs a horizontal drag except a table, and tables say so.
   - Touch targets are 40px. A 24px switch works with a mouse and not with a
     thumb, and this interface is full of switches.
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-nav-toggle {
	display: none;
	width: 38px;
	height: 38px;
	flex: none;
	margin-inline-start: -6px;
	border: 1px solid var(--ars-border);
	border-radius: 8px;
	background: var(--ars-surface);
	cursor: pointer;
	position: relative;
}
#airanksuite-root .ars-nav-toggle span {
	position: absolute;
	inset: 50% 10px auto 10px;
	height: 2px;
	border-radius: 1px;
	background: var(--ars-ink);
	box-shadow: 0 -6px 0 var(--ars-ink), 0 6px 0 var(--ars-ink);
}
#airanksuite-root .ars-nav-scrim {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 98;
	border: 0;
	background: rgb(16 18 26 / 0.42);
	cursor: pointer;
}

@media (max-width: 782px) {
	#airanksuite-root .ars-nav-toggle {
		display: block;
	}

	/* The rail becomes an off-canvas sheet. `visibility` rather than
	   `display` so it animates, and so a keyboard cannot tab into a menu
	   that is not on screen. */
	#airanksuite-root .ars-rail {
		position: fixed;
		top: 32px;
		bottom: 0;
		inset-inline-start: 0;
		z-index: 99;
		width: min(300px, 86vw);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--ars-surface);
		border-inline-end: 1px solid var(--ars-border);
		box-shadow: 0 0 40px rgb(16 18 26 / 0.18);
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), visibility 240ms;
	}
	#airanksuite-root .ars-app.is-nav-open .ars-rail {
		transform: none;
		visibility: visible;
	}
	#airanksuite-root .ars-app.is-nav-open .ars-nav-scrim {
		display: block;
	}
	/* The rail is a sheet even when the desktop preference says "mini", so the
	   icon-only width must not survive the breakpoint. */
	#airanksuite-root .ars-rail.is-mini {
		width: min(300px, 86vw);
	}
	#airanksuite-root .ars-rail.is-mini .ars-nav-item span,
	#airanksuite-root .ars-rail.is-mini .ars-nav-group {
		display: revert;
	}

	#airanksuite-root .ars-header {
		padding-inline-start: 12px;
		padding-inline-end: 12px;
	}
	#airanksuite-root .ars-page,
	#airanksuite-root .ars-main > * {
		padding-inline-start: 12px;
		padding-inline-end: 12px;
	}

	/* Thumbs, not cursors. */
	#airanksuite-root .ars-nav-item {
		min-height: 42px;
	}
	#airanksuite-root button,
	#airanksuite-root .ars-chip,
	#airanksuite-root .ars-seg-item {
		min-height: 36px;
	}
	#airanksuite-root input,
	#airanksuite-root select,
	#airanksuite-root textarea {
		/* 16px stops iOS zooming the whole page on focus, which is the single
		   most disorienting thing a mobile form can do. */
		font-size: 16px;
		min-height: 40px;
	}

	/* Every KPI row in the product is a 4-up grid. Two-up is readable on a
	   phone; four-up is four illegible columns. */
	#airanksuite-root .ars-page .grid.sm\:grid-cols-2,
	#airanksuite-root .ars-page .lg\:grid-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Tables scroll, and show that they do rather than clipping silently.
	   The min-width only applies inside a scroll container — an unwrapped
	   table would otherwise widen the whole page and take the layout with it. */
	#airanksuite-root .ars-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#airanksuite-root .ars-table-wrap .ars-table {
		min-width: 560px;
	}
	/* Belt and braces: nothing in the app may set the page width. A grid item
	   defaults to min-width:auto, so one wide child — a table, a chip row, a
	   long URL — silently stretches the whole shell past the viewport. */
	#airanksuite-root .ars-app,
	#airanksuite-root .ars-main,
	#airanksuite-root .ars-card,
	#airanksuite-root .ars-page {
		min-width: 0;
		max-width: 100%;
	}
	#airanksuite-root .ars-typebar {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	#airanksuite-root .ars-typebar::-webkit-scrollbar {
		display: none;
	}

	/* The page drawer is the whole screen. A 96vw panel with a 4vw sliver of
	   the list behind it is neither one thing nor the other. */
	#airanksuite-root .ars-drawer,
	#airanksuite-root .ars-drawer.is-wide,
	#airanksuite-root .ars-drawer.is-max {
		width: 100vw;
		inset-inline-start: 0;
	}
	#airanksuite-root .ars-sheet-tabs {
		overflow-x: auto;
		scrollbar-width: none;
	}
	#airanksuite-root .ars-sheet-tabs::-webkit-scrollbar {
		display: none;
	}
	#airanksuite-root .ars-sheet-foot {
		flex-wrap: wrap;
		gap: 8px;
	}

	#airanksuite-root .ars-card-head {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	#airanksuite-root .ars-typehealth,
	#airanksuite-root .ars-snip-head,
	#airanksuite-root .ars-head-strip {
		gap: 12px;
	}
	#airanksuite-root .ars-snip-actions {
		margin-inline-start: 0;
		width: 100%;
	}
	#airanksuite-root .ars-lib-grid,
	#airanksuite-root .ars-routing-grid,
	#airanksuite-root .ars-rr-props {
		grid-template-columns: minmax(0, 1fr);
	}
	#airanksuite-root .ars-rr-main {
		grid-template-columns: 14px minmax(0, 1fr);
		row-gap: 6px;
	}
	#airanksuite-root .ars-rr-count,
	#airanksuite-root .ars-rr-body {
		grid-column: 1 / -1;
	}
	#airanksuite-root .ars-rr-body {
		padding-inline-start: 14px;
	}
	#airanksuite-root .ars-floor-engines,
	#airanksuite-root .ars-floor-desks {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A phone in portrait. One column for everything, including the pairs that
   still just about worked at 782px. */
@media (max-width: 600px) {
	#airanksuite-root .ars-page .grid.sm\:grid-cols-2,
	#airanksuite-root .ars-page .lg\:grid-cols-4,
	#airanksuite-root .ars-page .sm\:grid-cols-3,
	#airanksuite-root .ars-page .lg\:grid-cols-2 {
		grid-template-columns: minmax(0, 1fr);
	}
	#airanksuite-root .ars-page-title {
		font-size: 17px;
	}
	#airanksuite-root .ars-typehealth-figs {
		width: 100%;
	}
	#airanksuite-root .ars-healthfig {
		flex: 1;
	}
}

/* Internal authority. Normalised to the strongest page on this site, so it is
   shown as a bar — a bare number invites comparison against another site,
   where the same figure would mean something else entirely. */
#airanksuite-root .ars-auth {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	justify-content: flex-end;
	min-width: 84px;
}
#airanksuite-root .ars-auth-bar {
	display: block;
	width: 46px;
	height: 6px;
	border-radius: 3px;
	background: var(--ars-surface-3);
	overflow: hidden;
}
#airanksuite-root .ars-auth-bar i {
	display: block;
	height: 100%;
	background: var(--ars-grad);
}
#airanksuite-root .ars-auth b {
	font-size: 11.5px;
	min-width: 22px;
	text-align: end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   The floor, continued: circuits and clockwork

   Same rule as the rest of this panel — nothing animates unless the thing it
   represents is actually doing something. A dark circuit is genuinely dark, a
   stopped gear is genuinely stopped, and neither pretends otherwise to look
   busy.
   ═════════════════════════════════════════════════════════════════════════ */

#airanksuite-root .ars-circuits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}
#airanksuite-root .ars-circuit {
	position: relative;
	display: grid;
	gap: 1px;
	padding: 9px 11px 10px;
	border: 1px solid var(--ars-surface-3);
	border-radius: 7px;
	background: rgb(22 22 30 / 0.02);
	text-align: start;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 200ms ease, background 200ms ease;
}
#airanksuite-root .ars-circuit:hover {
	border-color: var(--ars-btn-border-hover);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-circuit.is-core {
	border-color: #cabdf7;
}
/* The LED. Grey glass when dark — not a red error, because a disconnected
   integration is a choice far more often than it is a fault. */
#airanksuite-root .ars-circuit-led {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ars-btn-border-hover);
}
#airanksuite-root .ars-circuit.is-live .ars-circuit-led {
	background: #1fa06a;
	box-shadow: 0 0 0 3px rgb(31 160 106 / 0.15), 0 0 10px rgb(70 208 127 / 0.5);
}
#airanksuite-root .ars-circuit.is-core.is-live .ars-circuit-led {
	background: var(--ars-brand-2);
	box-shadow: 0 0 0 3px rgb(139 92 240 / 0.2), 0 0 12px rgb(139 92 240 / 0.55);
}
#airanksuite-root .ars-circuit-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--ars-ink);
	padding-inline-end: 14px;
}
#airanksuite-root .ars-circuit.is-live .ars-circuit-name {
	color: var(--ars-ink);
}
#airanksuite-root .ars-circuit-detail {
	font-size: 10.5px;
	color: var(--ars-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#airanksuite-root .ars-floor-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 258px;
	gap: 12px;
	align-items: start;
}

/* ── Clockwork ─────────────────────────────────────────────────────────── */

#airanksuite-root .ars-clock {
	padding: 10px 12px 12px;
	border: 1px solid var(--ars-surface-3);
	border-radius: 7px;
	background: rgb(22 22 30 / 0.02);
}
#airanksuite-root .ars-clock-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
#airanksuite-root .ars-clock-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-clock-flag {
	font-size: 10px;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--ars-surface-2);
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-clock-flag.is-bad {
	background: rgb(242 84 91 / 0.18);
	color: var(--ars-serious);
}
#airanksuite-root .ars-clock-flag.is-warn {
	background: rgb(255 194 61 / 0.16);
	color: var(--ars-accent);
}
#airanksuite-root .ars-clock-gears {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}
#airanksuite-root .ars-gear {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr);
	gap: 9px;
	align-items: start;
}
#airanksuite-root .ars-gear-wheel {
	width: 12px;
	height: 12px;
	margin-top: 2px;
	border-radius: 50%;
	border: 2px dotted var(--ars-btn-border-hover);
}
#airanksuite-root .ars-gear-wheel.is-turning {
	border-color: var(--ars-brand);
	animation: ars-gear 6s linear infinite;
}
@keyframes ars-gear {
	to {
		transform: rotate(360deg);
	}
}
#airanksuite-root .ars-gear.is-late .ars-gear-wheel {
	border-style: solid;
	border-color: var(--ars-serious);
	animation: none;
}
#airanksuite-root .ars-gear.is-off .ars-gear-wheel {
	border-color: var(--ars-border);
}
#airanksuite-root .ars-gear-name {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ars-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-gear.is-off .ars-gear-name {
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-gear-when {
	display: block;
	font-size: 10.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-gear.is-late .ars-gear-when {
	color: var(--ars-serious);
}
#airanksuite-root .ars-clock-note {
	margin: 10px 0 0;
	font-size: 10.5px;
	line-height: 1.55;
	color: var(--ars-ink-3);
}

#airanksuite-root .ars-floor.is-still .ars-gear-wheel {
	animation: none;
}

@media (max-width: 1100px) {
	#airanksuite-root .ars-floor-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Verdict, Empty, Board, Panel
   ────────────────────────────────────────────────────────────────────────────
   The four pieces every screen is now built from. They exist so that a screen
   is not a stack of equally-weighted cards: the verdict outranks everything,
   the board is the ranked middle, the empty state is a real state rather than
   white space, and the panel is where configuration goes so it stops competing
   with the report it configures.
   ───────────────────────────────────────────────────────────────────────── */

#airanksuite-root .ars-verdict {
	display: grid;
	grid-template-columns: 4px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 16px;
	padding: 16px 18px 16px 0;
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface);
	border: 1px solid var(--ars-line);
	overflow: hidden;
}
#airanksuite-root .ars-verdict-mark {
	align-self: stretch;
	border-radius: 4px 0 0 4px;
	background: var(--ars-ink-3);
}
#airanksuite-root .ars-verdict.is-good .ars-verdict-mark { background: var(--ars-c-green-ink); }
#airanksuite-root .ars-verdict.is-warning .ars-verdict-mark { background: var(--ars-c-amber-ink, var(--ars-accent)); }
#airanksuite-root .ars-verdict.is-bad .ars-verdict-mark { background: var(--ars-c-red-ink); }
#airanksuite-root .ars-verdict.is-neutral .ars-verdict-mark { background: var(--ars-brand); }

#airanksuite-root .ars-verdict-body { min-width: 0; padding-inline-start: 18px; }
#airanksuite-root .ars-verdict-text {
	margin: 0;
	/* Large enough that nothing else on the page competes with it, small
	   enough that a two-clause sentence still fits on one line at 990px. */
	font-size: 16px;
	font-weight: 640;
	line-height: 1.35;
	letter-spacing: -0.012em;
	color: var(--ars-ink);
}
#airanksuite-root .ars-verdict-why {
	margin: 5px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ars-ink-2);
	max-width: 92ch;
}
#airanksuite-root .ars-verdict-action { flex-shrink: 0; }

#airanksuite-root .ars-empty {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 26px 22px;
	text-align: start;
}
#airanksuite-root .ars-empty.is-compact { padding: 16px 18px; }
#airanksuite-root .ars-empty-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 10px;
	background: var(--ars-surface-2);
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-empty-text { min-width: 0; flex: 1; }
#airanksuite-root .ars-empty-title {
	font-size: 13px;
	font-weight: 620;
	color: var(--ars-ink);
}
#airanksuite-root .ars-empty-body {
	margin: 3px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ars-ink-2);
	max-width: 78ch;
}

#airanksuite-root .ars-board { list-style: none; margin: 0; padding: 0; }
#airanksuite-root .ars-board-row + .ars-board-row { border-top: 1px solid var(--ars-line-soft, var(--ars-line)); }
#airanksuite-root .ars-board-hit {
	display: grid;
	/* 34ch rather than 22: every real check name was truncating, and a board
	   whose rows all end in an ellipsis cannot be scanned, which is the only
	   thing a board is for. */
	grid-template-columns: minmax(0, 34ch) minmax(70px, 1fr) auto;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 9px 4px;
	border: 0;
	background: none;
	text-align: start;
	font: inherit;
	color: inherit;
	cursor: default;
}
#airanksuite-root .ars-board-row.is-clickable .ars-board-hit { cursor: pointer; }
#airanksuite-root .ars-board-row.is-clickable:hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-board-label {
	font-size: 12.5px;
	color: var(--ars-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-board-track {
	height: 8px;
	border-radius: 999px;
	background: var(--ars-surface-2);
	overflow: hidden;
}
#airanksuite-root .ars-board-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--ars-brand);
	transition: width 240ms ease;
}
#airanksuite-root .ars-board-value {
	font-size: 12.5px;
	font-weight: 620;
	color: var(--ars-ink);
	min-width: 8ch;
	text-align: end;
}
#airanksuite-root .ars-board-unit {
	margin-inline-start: 4px;
	font-weight: 500;
	color: var(--ars-ink-3);
}

/* The settings panel.

   Configuration used to sit at the top of the screen it configures, which is
   backwards: an API key is typed once and then read never, while the report
   under it is read every week. Collapsed by default, it stops taking the first
   screenful — and it opens automatically when the thing it configures is not
   connected yet, because then it *is* the task. */
#airanksuite-root .ars-panel {
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface);
	overflow: hidden;
}
#airanksuite-root .ars-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 16px;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ars-ink);
	cursor: pointer;
	text-align: start;
}
#airanksuite-root .ars-panel-head:hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-panel-title { font-size: 12.5px; font-weight: 620; }
#airanksuite-root .ars-panel-note {
	margin-inline-start: auto;
	font-size: 11.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-panel-caret {
	width: 14px;
	height: 14px;
	color: var(--ars-ink-3);
	transition: transform 160ms ease;
}
#airanksuite-root .ars-panel.is-open .ars-panel-caret { transform: rotate(90deg); }
#airanksuite-root .ars-panel-body {
	padding: 4px 16px 16px;
	border-top: 1px solid var(--ars-line-soft, var(--ars-line));
}

@media (max-width: 820px) {
	#airanksuite-root .ars-verdict {
		grid-template-columns: 4px minmax(0, 1fr);
		padding-inline-end: 16px;
		row-gap: 12px;
	}
	#airanksuite-root .ars-verdict-action { grid-column: 2; padding-inline-start: 18px; }
	#airanksuite-root .ars-board-hit { grid-template-columns: minmax(0, 1fr) auto; }
	#airanksuite-root .ars-board-track { display: none; }
}

/* The metric strip.

   Four tiles that are also the chart's controls. Previously the page showed
   four KPI tiles with sparklines and then, immediately below, two full charts
   plotting two of those same four series — the reader saw clicks twice before
   reaching anything new. Selecting a metric here draws it once, large. */
#airanksuite-root .ars-metricstrip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-bottom: 1px solid var(--ars-line);
}
#airanksuite-root .ars-metric {
	display: grid;
	gap: 2px;
	justify-items: start;
	padding: 14px 16px 13px;
	border: 0;
	border-inline-start: 1px solid var(--ars-line);
	border-bottom: 2px solid transparent;
	background: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease;
}
#airanksuite-root .ars-metric:first-child { border-inline-start: 0; }
#airanksuite-root .ars-metric:hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-metric.is-active {
	border-bottom-color: var(--ars-brand);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-metric-label {
	font-size: 10.5px;
	font-weight: 640;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-metric-value {
	font-size: 26px;
	font-weight: 660;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ars-ink);
}
#airanksuite-root .ars-metric-suffix {
	margin-inline-start: 2px;
	font-size: 14px;
	font-weight: 560;
	color: var(--ars-ink-3);
}

/* Coverage bar inside a table cell — how much of a post type is analysed. */
#airanksuite-root .ars-cov {
	display: block;
	width: 68px;
	height: 6px;
	border-radius: 999px;
	background: var(--ars-surface-2);
	overflow: hidden;
}
#airanksuite-root .ars-cov-fill { display: block; height: 100%; border-radius: 999px; }

#airanksuite-root .ars-mini {
	display: grid;
	gap: 1px;
	padding: 10px 12px;
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-mini-label {
	font-size: 10.5px;
	font-weight: 640;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-mini-value { font-size: 20px; font-weight: 660; line-height: 1.15; color: var(--ars-ink); }
#airanksuite-root .ars-mini-sub { font-size: 11px; color: var(--ars-ink-3); }

@media (max-width: 900px) {
	#airanksuite-root .ars-metricstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#airanksuite-root .ars-metric:nth-child(3) { border-inline-start: 0; }
	#airanksuite-root .ars-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--ars-line); }
}

/* Audit findings, grouped by rule.

   The flat table printed one row per page per failing rule, each repeating the
   same sentence of advice — ten pages missing internal links produced ten
   identical paragraphs. Nobody works down such a list anyway: you pick a
   problem and clear it everywhere. So the rule is the row, the advice appears
   once, and the pages fold out under it. */
#airanksuite-root .ars-issue {
	border: 1px solid var(--ars-line);
	border-inline-start: 3px solid var(--ars-ink-3);
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-surface);
	overflow: hidden;
}
#airanksuite-root .ars-issue.is-critical { border-inline-start-color: var(--ars-c-red-ink); }
#airanksuite-root .ars-issue.is-warning { border-inline-start-color: var(--ars-accent); }
#airanksuite-root .ars-issue.is-notice { border-inline-start-color: var(--ars-brand); }

#airanksuite-root .ars-issue-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto 16px;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	background: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
	color: var(--ars-ink);
}
#airanksuite-root .ars-issue-head:hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-issue-sev {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 5px;
	background: var(--ars-surface-2);
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-issue.is-critical .ars-issue-sev { background: var(--ars-c-red); color: var(--ars-c-red-ink); }
#airanksuite-root .ars-issue.is-warning .ars-issue-sev { background: var(--ars-c-amber, #fdf1de); color: var(--ars-c-amber-ink); }
#airanksuite-root .ars-issue.is-notice .ars-issue-sev { background: var(--ars-c-blue, var(--ars-brand-tonal)); color: var(--ars-brand); }
#airanksuite-root .ars-issue-label {
	font-size: 12.5px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-issue-count { font-size: 11.5px; color: var(--ars-ink-3); }
#airanksuite-root .ars-issue-caret { width: 14px; height: 14px; color: var(--ars-ink-3); transition: transform 160ms ease; }
#airanksuite-root .ars-issue.is-open .ars-issue-caret { transform: rotate(90deg); }

#airanksuite-root .ars-issue-body { padding: 0 14px 12px; }
#airanksuite-root .ars-issue-fix {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--ars-ink-2);
	max-width: 90ch;
}
#airanksuite-root .ars-issue-pages { list-style: none; margin: 0; padding: 0; }
#airanksuite-root .ars-issue-pages li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-top: 1px solid var(--ars-line-soft, var(--ars-line));
	font-size: 12px;
}
#airanksuite-root .ars-issue-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#airanksuite-root .ars-issue-detail { font-size: 11px; color: var(--ars-ink-3); }
#airanksuite-root .ars-issue-links { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; }

@media (max-width: 820px) {
	#airanksuite-root .ars-issue-pages li { grid-template-columns: minmax(0, 1fr); }
}

/* The setup index, and the sidebar entry that reaches it. */
#airanksuite-root .ars-setup-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
}
#airanksuite-root .ars-setup-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 15px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface);
	text-align: start;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
#airanksuite-root .ars-setup-card:hover {
	border-color: var(--ars-brand);
	background: var(--ars-surface-2);
	transform: translateY(-1px);
}
#airanksuite-root .ars-setup-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 9px;
	background: var(--ars-surface-2);
	color: var(--ars-brand);
}
#airanksuite-root .ars-setup-card:hover .ars-setup-icon { background: var(--ars-c-blue, var(--ars-brand-tonal)); }
#airanksuite-root .ars-setup-text { display: grid; gap: 2px; min-width: 0; }
#airanksuite-root .ars-setup-name { font-size: 13px; font-weight: 620; color: var(--ars-ink); }
#airanksuite-root .ars-setup-what { font-size: 11.5px; line-height: 1.5; color: var(--ars-ink-2); }

/* The setup hero: one reading, two doors. */
#airanksuite-root .ars-setup-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	padding: 20px 22px;
	border-radius: var(--ars-r-xl, 18px);
	border: 1px solid var(--ars-line);
	background:
		var(--ars-surface);
}
@media (max-width: 720px) {
	#airanksuite-root .ars-setup-hero { grid-template-columns: 1fr; }
}
#airanksuite-root .ars-setup-hero-ring { display: grid; place-items: center; }
#airanksuite-root .ars-setup-group { display: grid; gap: 2px; padding-inline-start: 2px; }
#airanksuite-root .ars-setup-card { position: relative; align-items: center; }
#airanksuite-root .ars-setup-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#airanksuite-root .ars-setup-status {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--ars-surface-3);
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-setup-status.is-good { background: var(--ars-good-tonal); color: var(--ars-good); }
#airanksuite-root .ars-setup-status.is-warning { background: var(--ars-warning-tonal, var(--ars-surface-3)); color: var(--ars-warning, var(--ars-ink-2)); }
#airanksuite-root .ars-setup-status.is-serious { background: var(--ars-serious-tonal); color: var(--ars-serious); }
#airanksuite-root .ars-setup-card.is-serious { border-color: color-mix(in srgb, var(--ars-serious) 40%, var(--ars-line)); }
#airanksuite-root .ars-setup-go {
	margin-inline-start: auto;
	color: var(--ars-ink-3);
	font-size: 18px;
	line-height: 1;
	transition: transform 140ms ease, color 140ms ease;
}
#airanksuite-root .ars-setup-card:hover .ars-setup-go { transform: translateX(3px); color: var(--ars-brand); }
[dir='rtl'] #airanksuite-root .ars-setup-go { transform: scaleX(-1); }
[dir='rtl'] #airanksuite-root .ars-setup-card:hover .ars-setup-go { transform: scaleX(-1) translateX(3px); }

#airanksuite-root .ars-nav-item.is-setup { color: var(--ars-ink-2); }
#airanksuite-root .ars-nav-item.is-back {
	color: var(--ars-brand);
	font-weight: 600;
}

/* The greeting, demoted.

   "Good morning, <site>" was 30px of gradient type at the top of the most-
   opened screen in the plugin, above a sentence that restated the score. It is
   a pleasantry, so it now reads as one, and the space it held went to the
   verdict — the thing somebody actually opened the dashboard to find out. */
#airanksuite-root .ars-greeting {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 560;
	letter-spacing: 0.02em;
	color: var(--ars-ink-3);
}

/* ScoreRow — the "Where this site is weak" line, as a shared instrument.

   Four answers in one scannable line: how bad, at what, how widespread, and
   whether it is worth an afternoon. Everything that ranks areas of a site uses
   it now, so the audit, the dashboard and the score breakdown read as the same
   instrument instead of three different ones. */
#airanksuite-root .ars-scorerow {
	display: grid;
	/* The bar is a reading, not a decoration: at full container width it was a
	   900px slab and the loudest thing on the screen. Fixed at 220px — the
	   width every list meter in the reference tier draws at — the label gets
	   the room and the row reads left-to-right like a sentence. */
	grid-template-columns: 40px minmax(0, 1fr) 220px auto 14px;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 8px;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
	border-radius: 8px;
}
#airanksuite-root .ars-scorerow.is-static { cursor: default; grid-template-columns: 40px minmax(0, 1fr) 220px auto; }
#airanksuite-root .ars-scorerow:not(.is-static):hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-scorerow + .ars-scorerow { border-top: 1px solid var(--ars-line-soft, var(--ars-line)); }

#airanksuite-root .ars-scorerow-score {
	font-size: 16px;
	font-weight: 660;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: end;
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-scorerow-score.is-good { color: var(--ars-c-green-ink); }
#airanksuite-root .ars-scorerow-score.is-mid { color: var(--ars-warning-ink); }
#airanksuite-root .ars-scorerow-score.is-bad { color: var(--ars-c-red-ink); }

#airanksuite-root .ars-scorerow-text { display: grid; gap: 1px; min-width: 0; }
#airanksuite-root .ars-scorerow-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ars-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#airanksuite-root .ars-scorerow-sub { font-size: 11px; color: var(--ars-ink-3); }

#airanksuite-root .ars-scorerow-bar {
	display: flex;
	height: 6px;
	border-radius: 999px;
	background: var(--ars-surface-2);
	overflow: hidden;
}
#airanksuite-root .ars-scorerow-bar > span { display: block; height: 100%; }
/* A hairline seam between severity segments, so the composition reads as
   counted parts rather than as a gradient. */
#airanksuite-root .ars-scorerow-bar > span + span { box-shadow: inset 1px 0 0 var(--ars-surface); }
#airanksuite-root .ars-scorerow-reach { font-size: 11.5px; color: var(--ars-ink-2); white-space: nowrap; }
#airanksuite-root .ars-scorerow-caret { width: 14px; height: 14px; color: var(--ars-ink-3); }

@media (max-width: 860px) {
	#airanksuite-root .ars-scorerow,
	#airanksuite-root .ars-scorerow.is-static { grid-template-columns: 40px minmax(0, 1fr) auto; }
	#airanksuite-root .ars-scorerow-bar { display: none; }
	#airanksuite-root .ars-scorerow-caret { display: none; }
}

/* A tracked question is a sentence, not a two-word area name. */
#airanksuite-root .ars-scorerow.is-wide { grid-template-columns: 40px minmax(0, 1fr) 220px auto 14px; }
#airanksuite-root .ars-scorerow.is-wide.is-static { grid-template-columns: 40px minmax(0, 1fr) 220px auto; }
#airanksuite-root .ars-scorerow.is-wide .ars-scorerow-label { white-space: normal; overflow: visible; }
#airanksuite-root .ars-scorerow.is-wide .ars-scorerow-sub { white-space: normal; }

/* MetricGrid — every headline number in one glance.

   The tiles this replaces gave each metric a card and a sentence, so six
   metrics took two screenfuls. Somebody checking a site wants them together so
   the one that moved stands out; the explanation belongs on hover. */
#airanksuite-root .ars-metrics {
	display: grid;
	grid-template-columns: repeat(var(--ars-metrics-cols, 3), minmax(0, 1fr));
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	overflow: hidden;
	background: var(--ars-surface);
}
#airanksuite-root .ars-metrics-cell {
	position: relative;
	display: grid;
	gap: 3px;
	align-content: start;
	padding: 13px 16px 15px;
	border-inline-end: 1px solid var(--ars-line);
	border-bottom: 1px solid var(--ars-line);
	background: none;
	font: inherit;
	color: inherit;
	text-align: start;
}
#airanksuite-root .ars-metrics-cell.is-clickable { cursor: pointer; }
#airanksuite-root .ars-metrics-cell.is-clickable:hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-metrics-cell.is-active { background: var(--ars-surface-2); }
#airanksuite-root .ars-metrics[data-columns="3"] .ars-metrics-cell:nth-child(3n),
#airanksuite-root .ars-metrics[data-columns="4"] .ars-metrics-cell:nth-child(4n) { border-inline-end: 0; }
#airanksuite-root .ars-metrics-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 560;
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-metrics-help {
	display: grid;
	place-items: center;
	width: 13px;
	height: 13px;
	border-radius: 999px;
	background: var(--ars-surface-2);
	color: var(--ars-ink-3);
	font-size: 9px;
	font-weight: 700;
	cursor: help;
}
#airanksuite-root .ars-metrics-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#airanksuite-root .ars-metrics-value {
	font-size: 27px;
	font-weight: 660;
	line-height: 1.12;
	letter-spacing: -0.022em;
	color: var(--ars-ink);
}
#airanksuite-root .ars-metrics-unit { margin-inline-start: 3px; font-size: 13px; font-weight: 560; color: var(--ars-ink-3); }
#airanksuite-root .ars-metrics-sub { font-size: 11px; color: var(--ars-ink-3); }
#airanksuite-root .ars-metrics-spark { display: block; margin-top: 4px; }
#airanksuite-root .ars-metrics-rule {
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	bottom: -1px;
	height: 2px;
	background: var(--ars-metric-accent, transparent);
}

#airanksuite-root .ars-donut {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	align-items: center;
	gap: 20px;
}
#airanksuite-root .ars-donut-svg { width: 148px; height: 148px; }
#airanksuite-root .ars-donut-value { font-size: 34px; font-weight: 680; fill: var(--ars-ink); }
#airanksuite-root .ars-donut-max { font-size: 12px; fill: var(--ars-ink-3); }
#airanksuite-root .ars-donut-legend { display: grid; gap: 2px; min-width: 0; }
#airanksuite-root .ars-donut-row {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	border-bottom: 1px solid var(--ars-line-soft, var(--ars-line));
	font-size: 12.5px;
}
#airanksuite-root .ars-donut-row:last-of-type { border-bottom: 0; }
#airanksuite-root .ars-donut-dot { width: 10px; height: 10px; border-radius: 3px; }
#airanksuite-root .ars-donut-name { color: var(--ars-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#airanksuite-root .ars-donut-count { font-weight: 660; }
#airanksuite-root .ars-donut-note { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--ars-ink-3); }

@media (max-width: 900px) {
	#airanksuite-root .ars-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#airanksuite-root .ars-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

/* =====================================================================
   The reference register.

   The tokens above moved the palette; these overrides move the posture.
   Everything Semrush-class tools agree on and this sheet still argued
   with: a flat, border-defined surface (no floating app, no card
   shadows), a white rail, dark primary buttons in the "Set up" mould,
   ink-coloured outline buttons, dark active tabs, and linked metric
   values in the working violet. Kept together at the end of the sheet
   so the diff against the old look is one readable block.
   ================================================================== */

/* The app sits on the page; it does not hover over it. */
#airanksuite-root .ars-app {
	box-shadow: none;
	border: 1px solid var(--ars-border);
}

/* White rail, hairline to the canvas — the reference sidebar. */
#airanksuite-root .ars-rail {
	background: var(--ars-surface);
	border-inline-end: 1px solid var(--ars-border);
}

/* Cards are border-defined and flat. */
#airanksuite-root .ars-card,
#airanksuite-root .ars-hero {
	box-shadow: none;
}

/* Primary action in the "Set up" mould: near-black, quiet, unmistakable.
   The violet stays for links, numbers and selection — where the reference
   products spend it — instead of on every button. */
#airanksuite-root .ars-btn-primary {
	background: var(--ars-solid);
	color: var(--ars-solid-ink);
}
/* Outline buttons carry ink, not brand — a row of violet buttons reads
   as five calls to action. */
#airanksuite-root .ars-btn-ghost {
	color: var(--ars-ink);
	border-color: var(--ars-btn-border);
	box-shadow: none;
}
#airanksuite-root .ars-btn-ghost:hover {
	background: var(--ars-surface-2);
	border-color: var(--ars-btn-border-hover);
	color: var(--ars-ink);
}

/* A clickable metric is a link, and a linked number wears the working
   violet — the single most recognisable habit of the reference look. */
#airanksuite-root .ars-metrics-cell.is-clickable .ars-metrics-value {
	color: var(--ars-brand);
}
#airanksuite-root .ars-metrics-cell.is-clickable:hover .ars-metrics-value {
	color: var(--ars-brand-hover);
}

/* Active tab is ink on ink, the way every tab bar in the reference tier
   draws it; violet stays out of the chrome. */
#airanksuite-root .ars-tab.is-active {
	color: var(--ars-ink);
	border-bottom-color: var(--ars-ink);
}
#airanksuite-root .ars-tab.is-active .ars-tab-count {
	background: var(--ars-surface-3);
	color: var(--ars-ink);
}

/* Nav selection: the filled violet pill (defined with the nav block above).
   The grey-block experiment is retired — against the white rail the grey
   said "hover", not "here", and the one filled pill is the wayfinding cue
   every current sidebar uses. */

/* A metric cell rendered as a <button> kept the user agent's 2px outset
   border on the two sides the component never set — with no preflight in
   wp-admin there is nothing else to remove it. The near-black separators
   every grid has carried since 0.85 were browser chrome, not design. */
#airanksuite-root .ars-metrics-cell {
	border-top: 0;
	border-inline-start: 0;
}

/* ---------- Advisor strip (the Copilot pattern) ---------- */

#airanksuite-root .ars-advisor {
	background: var(--ars-surface);
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	overflow: hidden;
}
#airanksuite-root .ars-advisor-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 6px 14px 6px 0;
}
#airanksuite-root .ars-advisor-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	text-align: start;
	padding: 10px 0 10px 16px;
	cursor: pointer;
}
#airanksuite-root .ars-advisor-head:disabled { cursor: default; }
#airanksuite-root .ars-advisor-dot {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--ars-ink-3);
}
#airanksuite-root .ars-advisor.is-good .ars-advisor-dot { background: var(--ars-good); }
#airanksuite-root .ars-advisor.is-warning .ars-advisor-dot { background: var(--ars-accent); }
#airanksuite-root .ars-advisor.is-bad .ars-advisor-dot { background: var(--ars-serious); }
#airanksuite-root .ars-advisor.is-neutral .ars-advisor-dot { background: var(--ars-brand); }
#airanksuite-root .ars-advisor-text {
	font-size: 13.5px;
	font-weight: 640;
	color: var(--ars-ink);
	/* Two lines, then ellipsis — not one.
	   This is the screen's conclusion, and a single-line clamp cut it mid-word
	   on any finding whose name is longer than a few words: "50 pages share one
	   fixable problem: Opening paragra…". A sentence that stops before its own
	   subject is worse than a sentence that wraps. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: pretty;
}
#airanksuite-root .ars-advisor-sub {
	font-size: 12px;
	color: var(--ars-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 0 1 auto;
	min-width: 0;
}
#airanksuite-root .ars-advisor-count {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-advisor-caret {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	color: var(--ars-ink-3);
	transition: transform 160ms ease;
}
#airanksuite-root .ars-advisor.is-open .ars-advisor-caret { transform: rotate(90deg); }
#airanksuite-root .ars-advisor-action { flex: 0 0 auto; }
#airanksuite-root .ars-advisor-body {
	border-top: 1px solid var(--ars-line-soft);
	padding: 12px 16px 14px;
}

/* ---------- Semi-circle gauge ---------- */

#airanksuite-root .ars-gauge { width: 150px; text-align: center; }
#airanksuite-root .ars-gauge svg { display: block; width: 100%; height: auto; }
#airanksuite-root .ars-gauge-value {
	font-size: 33px;
	font-weight: 680;
	letter-spacing: -0.02em;
	fill: var(--ars-ink);
}
#airanksuite-root .ars-gauge-max { font-size: 11px; fill: var(--ars-ink-3); }
#airanksuite-root .ars-gauge-delta { margin-top: 2px; }

/* ---------- Compact dimension rows beside the gauge ---------- */

#airanksuite-root .ars-scoreband {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 22px;
	align-items: center;
}
#airanksuite-root .ars-dimrow {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}
#airanksuite-root .ars-dimrow + .ars-dimrow { border-top: 1px solid var(--ars-line-soft); }
#airanksuite-root .ars-dimrow-label { font-size: 12.5px; color: var(--ars-ink-2); }
#airanksuite-root .ars-dimrow-track {
	height: 6px;
	border-radius: 999px;
	background: var(--ars-surface-3);
	overflow: hidden;
}
#airanksuite-root .ars-dimrow-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--ars-brand);
	transition: width 500ms cubic-bezier(0.2, 0, 0, 1);
}
#airanksuite-root .ars-dimrow-value {
	font-size: 13px;
	font-weight: 640;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

/* ---------- Engine rows: name, meter, number — no sub-cards ---------- */

#airanksuite-root .ars-engrows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 22px;
}
#airanksuite-root .ars-engrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px 40px;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
	border-radius: var(--ars-r-sm);
}
#airanksuite-root .ars-engrow:hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-engrow.is-active { background: var(--ars-surface-2); }
#airanksuite-root .ars-engrow-name {
	font-size: 12.5px;
	font-weight: 550;
	color: var(--ars-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#airanksuite-root .ars-engrow-track {
	height: 5px;
	border-radius: 999px;
	background: var(--ars-surface-3);
	overflow: hidden;
}
#airanksuite-root .ars-engrow-fill { display: block; height: 100%; border-radius: 999px; }
#airanksuite-root .ars-engrow-value {
	font-size: 12.5px;
	font-weight: 660;
	text-align: end;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
	#airanksuite-root .ars-engrows { grid-template-columns: minmax(0, 1fr); }
	#airanksuite-root .ars-scoreband { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

/* The advisor's sentence yields last: the muted explainer absorbs the
   truncation before the claim does. */
#airanksuite-root .ars-advisor-text { flex: 1 1 auto; min-width: 22ch; }
#airanksuite-root .ars-advisor-sub { flex: 1 1 0; }

/* Engine names deserve the room more than the meter does. */
#airanksuite-root .ars-engrow { grid-template-columns: minmax(0, 1fr) 54px 38px; gap: 10px; }

/* The category pill in a card's corner — the reference tools' way of saying
   which world a widget belongs to before you read its title. */
#airanksuite-root .ars-card-tag {
	display: inline-block;
	margin-bottom: 5px;
	padding: 3px 10px;
	border-radius: 6px;
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.01em;
	line-height: 1.4;
}

/* Room for a mark beside an engine's name. */
#airanksuite-root .ars-engrow-name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
#airanksuite-root .ars-engrow-name > svg { flex: none; }

/* Score chips in tables: tonal, dotted, quiet. */
#airanksuite-root .ars-scorepill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 44px;
	justify-content: center;
	padding: 3px 9px;
	border-radius: var(--ars-r-md);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.5;
}
#airanksuite-root .ars-scorepill-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.7; }
#airanksuite-root .ars-scorepill.is-good { background: var(--ars-good-tonal); color: var(--ars-good-ink); }
#airanksuite-root .ars-scorepill.is-mid { background: var(--ars-accent-tonal); color: var(--ars-warning-ink); }
#airanksuite-root .ars-scorepill.is-bad { background: var(--ars-serious-tonal); color: var(--ars-serious-ink); }

/* No orphaned corner: the circuit strip flexes, so a short last row stretches
   its cards across the full width instead of leaving dead canvas beside them. */
#airanksuite-root .ars-circuits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
#airanksuite-root .ars-circuit {
	flex: 1 1 175px;
	min-width: 150px;
}
#airanksuite-root .ars-priority-number {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: 0 0 26px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ars-ink-2);
	background: var(--ars-surface-3);
}
#airanksuite-root .ars-priority-number.is-warning { color: var(--ars-warning); background: var(--ars-warning-tonal); }
#airanksuite-root .ars-priority-number.is-bad { color: var(--ars-serious); background: var(--ars-serious-tonal); }

/* ---- Site Audit: area cards, wins bars, copilot idle ------------------ */
#airanksuite-root .ars-areagrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 1100px) { #airanksuite-root .ars-areagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #airanksuite-root .ars-areagrid { grid-template-columns: 1fr; } }
#airanksuite-root .ars-areacard {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 8px;
	align-items: start;
	padding: 12px 14px 12px 12px;
	border: 1px solid var(--ars-line);
	border-left-width: 4px;
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-surface);
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
#airanksuite-root .ars-areacard:hover { transform: translateY(-1px); box-shadow: var(--ars-shadow-sm, 0 2px 8px rgba(0,0,0,.06)); }
#airanksuite-root .ars-areacard.is-active { border-color: var(--ars-brand); box-shadow: 0 0 0 2px var(--ars-brand-tonal); }
#airanksuite-root .ars-areacard.is-bad { border-left-color: var(--ars-c-red-ink); }
#airanksuite-root .ars-areacard.is-mid { border-left-color: var(--ars-accent); }
#airanksuite-root .ars-areacard.is-good { border-left-color: var(--ars-c-green-ink); }
#airanksuite-root .ars-areacard-score {
	grid-row: 1 / span 2;
	align-self: center;
	min-width: 44px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}
#airanksuite-root .ars-areacard.is-bad .ars-areacard-score { color: var(--ars-c-red-ink); }
#airanksuite-root .ars-areacard.is-mid .ars-areacard-score { color: var(--ars-accent); }
#airanksuite-root .ars-areacard.is-good .ars-areacard-score { color: var(--ars-c-green-ink); }
#airanksuite-root .ars-areacard-body { display: grid; gap: 3px; min-width: 0; }
#airanksuite-root .ars-areacard-label { font-size: 13.5px; font-weight: 600; color: var(--ars-ink); }
#airanksuite-root .ars-areacard-sub { font-size: 11.5px; color: var(--ars-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#airanksuite-root .ars-areacard-bar {
	display: flex;
	height: 6px;
	margin-top: 4px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--ars-surface-3);
}
#airanksuite-root .ars-areacard-bar > span { display: block; height: 100%; }
#airanksuite-root .ars-areacard-reach {
	grid-column: 2;
	justify-self: start;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ars-brand);
}
#airanksuite-root .ars-areacard-reach::after { content: ' →'; }
#airanksuite-root .ars-areacard-reach.is-clear { color: var(--ars-c-green-ink); }
#airanksuite-root .ars-areacard-reach.is-clear::after { content: ''; }

#airanksuite-root .ars-winbar {
	display: block;
	width: 120px;
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--ars-surface-3);
}
#airanksuite-root .ars-winbar > span { display: block; height: 100%; border-radius: 999px; }
@media (max-width: 640px) { #airanksuite-root .ars-winbar { display: none; } }

#airanksuite-root .ars-copilot-idle {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 12px;
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-brand-tonal);
	color: var(--ars-ink-2);
	font-size: 12.5px;
	line-height: 1.5;
}
#airanksuite-root .ars-copilot-idle-mark {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 8px;
	background: var(--ars-surface);
	color: var(--ars-brand);
}

/* ---- AI Crawlers: operator strip ------------------------------------- */
#airanksuite-root .ars-opstrip {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 8px;
}
@media (max-width: 1280px) { #airanksuite-root .ars-opstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { #airanksuite-root .ars-opstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#airanksuite-root .ars-optile {
	display: grid;
	gap: 2px;
	justify-items: start;
	padding: 10px 12px;
	border: 1px solid var(--ars-line);
	border-top: 3px solid var(--ars-ink-3);
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-surface);
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
	min-width: 0;
	transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
#airanksuite-root .ars-optile:hover { transform: translateY(-1px); box-shadow: var(--ars-shadow-sm, 0 2px 8px rgba(0,0,0,.06)); }
#airanksuite-root .ars-optile.is-active { box-shadow: 0 0 0 2px var(--ars-brand-tonal); border-color: var(--ars-brand); }
#airanksuite-root .ars-optile.is-seen { border-top-color: var(--ars-c-green-ink); }
#airanksuite-root .ars-optile.is-quiet { border-top-color: var(--ars-brand); }
#airanksuite-root .ars-optile.is-blocked { border-top-color: var(--ars-c-red-ink); }
#airanksuite-root .ars-optile-name { font-size: 13px; font-weight: 700; color: var(--ars-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#airanksuite-root .ars-optile-state { font-size: 11.5px; font-weight: 600; color: var(--ars-ink-2); }
#airanksuite-root .ars-optile.is-blocked .ars-optile-state { color: var(--ars-c-red-ink); }
#airanksuite-root .ars-optile-seen { font-size: 11px; color: var(--ars-ink-3); }
#airanksuite-root .ars-optile.is-seen .ars-optile-seen { color: var(--ars-c-green-ink); font-weight: 600; }

/* ---- Content: quiet empty type line, unscored tag -------------------- */
#airanksuite-root .ars-typeempty {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 16px;
	border: 1px dashed var(--ars-line);
	border-radius: var(--ars-r-md, 10px);
	font-size: 12.5px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-typeempty b { color: var(--ars-ink-2); font-weight: 600; }
#airanksuite-root .ars-tag-quiet { background: var(--ars-surface-3); color: var(--ars-ink-3); font-weight: 600; }

/* ---- Insights: data sources strip ------------------------------------ */
#airanksuite-root .ars-sources {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 10px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface);
}
#airanksuite-root .ars-sources-lead {
	align-self: center;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-source {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 8px;
	align-items: center;
	flex: 1 1 160px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-surface-2);
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color 140ms ease, background 140ms ease;
}
#airanksuite-root .ars-source:hover { border-color: var(--ars-brand); }
#airanksuite-root .ars-source.is-live { background: var(--ars-surface); }
#airanksuite-root .ars-source-dot { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 999px; background: var(--ars-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ars-accent) 18%, transparent); }
#airanksuite-root .ars-source.is-live .ars-source-dot { background: var(--ars-c-green-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ars-c-green-ink) 18%, transparent); }
#airanksuite-root .ars-source-label { font-size: 12.5px; font-weight: 600; color: var(--ars-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#airanksuite-root .ars-source-state { font-size: 11px; color: var(--ars-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#airanksuite-root .ars-source:not(.is-live) .ars-source-state { color: var(--ars-brand); font-weight: 600; }

/* ---- SEO data providers: one card shape, equal heights ---------------- */
#airanksuite-root .ars-provider-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: stretch;
}
@media (max-width: 1180px) { #airanksuite-root .ars-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { #airanksuite-root .ars-provider-grid { grid-template-columns: 1fr; } }
#airanksuite-root .ars-provider {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 10px;
	padding: 14px 16px 14px;
	border: 1px solid var(--ars-line);
	border-top: 3px solid var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-surface);
	min-width: 0;
	transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
#airanksuite-root .ars-provider:hover { border-color: var(--ars-btn-border-hover); box-shadow: 0 6px 18px -8px rgb(22 22 30 / 0.18); transform: translateY(-1px); }
#airanksuite-root .ars-provider.is-connected { border-top-color: var(--ars-c-green-ink); }
#airanksuite-root .ars-provider.is-open { border-color: var(--ars-brand); box-shadow: 0 0 0 2px var(--ars-brand-tonal); }
#airanksuite-root .ars-provider-head { display: flex; align-items: flex-start; gap: 10px; }
#airanksuite-root .ars-provider-mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: hsl(var(--mark-h) 55% 32%);
	background: hsl(var(--mark-h) 70% 92%);
}
[data-theme="dark"] #airanksuite-root .ars-provider-mark, .ars-dark #airanksuite-root .ars-provider-mark { color: hsl(var(--mark-h) 70% 80%); background: hsl(var(--mark-h) 40% 22%); }
#airanksuite-root .ars-provider-name { font-size: 14px; font-weight: 650; color: var(--ars-ink); }
#airanksuite-root .ars-provider-state { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--ars-surface-3); color: var(--ars-ink-3); }
#airanksuite-root .ars-provider-state.is-on { background: var(--ars-good-tonal); color: var(--ars-good); }
#airanksuite-root .ars-provider-caps { display: flex; gap: 6px; flex-wrap: wrap; }
#airanksuite-root .ars-provider-cap { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
#airanksuite-root .ars-provider-cap.is-metrics { color: var(--ars-brand); }
#airanksuite-root .ars-provider-cap.is-serp { color: var(--ars-accent); }
#airanksuite-root .ars-provider-docs { flex: none; font-size: 13px; color: var(--ars-ink-3); text-decoration: none; padding: 2px 6px; border-radius: 6px; }
#airanksuite-root .ars-provider-docs:hover { color: var(--ars-brand); background: var(--ars-brand-tonal); }
#airanksuite-root .ars-provider-blurb {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ars-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#airanksuite-root .ars-provider-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px dashed var(--ars-line); margin-top: auto; }

/* ---- Link checker: broken destinations ------------------------------- */
#airanksuite-root .ars-destlist { display: grid; }
#airanksuite-root .ars-dest {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: 10px;
	align-items: center;
	padding: 9px 16px;
	border-top: 1px solid var(--ars-line);
}
#airanksuite-root .ars-dest:first-child { border-top: 0; }
#airanksuite-root .ars-dest-url { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#airanksuite-root .ars-dest-pages { font-size: 12px; font-weight: 600; color: var(--ars-ink-2); white-space: nowrap; }
#airanksuite-root .ars-dest-actions { display: flex; gap: 4px; }
@media (max-width: 760px) {
	#airanksuite-root .ars-dest { grid-template-columns: auto minmax(0, 1fr); }
	#airanksuite-root .ars-dest-pages, #airanksuite-root .ars-dest-actions { grid-column: 2; }
}

/* Cards inside a stretched grid fill the row, so two-column pairs stay the
   same height whatever each one holds. */
#airanksuite-root .items-stretch > .ars-card { height: 100%; box-sizing: border-box; }

/* ---- AI Answer Simulation: work list + cited pages -------------------- */
#airanksuite-root .ars-worklist, #airanksuite-root .ars-citelist { display: grid; }
#airanksuite-root .ars-work {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 16px;
	border: 0;
	border-top: 1px solid var(--ars-line);
	background: transparent;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
	width: 100%;
}
#airanksuite-root .ars-work:first-child { border-top: 0; }
#airanksuite-root .ars-work:hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-work-score { min-width: 36px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
#airanksuite-root .ars-work-score.is-bad { color: var(--ars-c-red-ink); }
#airanksuite-root .ars-work-score.is-mid { color: var(--ars-accent); }
#airanksuite-root .ars-work-score.is-good { color: var(--ars-c-green-ink); }
#airanksuite-root .ars-work-body { display: grid; gap: 2px; min-width: 0; }
#airanksuite-root .ars-work-label { font-size: 13px; font-weight: 600; color: var(--ars-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#airanksuite-root .ars-work-sub { font-size: 11.5px; color: var(--ars-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#airanksuite-root .ars-work-go { color: var(--ars-ink-3); font-size: 18px; line-height: 1; }
#airanksuite-root .ars-cite {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 16px;
	border-top: 1px solid var(--ars-line);
	color: inherit;
	text-decoration: none;
}
#airanksuite-root .ars-cite:first-child { border-top: 0; }
#airanksuite-root .ars-cite:hover { background: var(--ars-surface-2); }
#airanksuite-root .ars-cite-url { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ars-brand); }
#airanksuite-root .ars-cite-n { font-size: 12px; font-weight: 600; color: var(--ars-ink-2); white-space: nowrap; }

/* ---- Local SEO: listings --------------------------------------------- */
#airanksuite-root .ars-place {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-surface);
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
}
#airanksuite-root .ars-place:hover { border-color: var(--ars-brand); background: var(--ars-brand-tonal); }
#airanksuite-root .ars-listing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#airanksuite-root .ars-listing-rating { display: grid; justify-items: end; gap: 2px; flex: none; }
#airanksuite-root .ars-listing-stars { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ars-accent); line-height: 1; }

/* ---- Developer: webhooks --------------------------------------------- */
#airanksuite-root .ars-eventgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 800px) { #airanksuite-root .ars-eventgrid { grid-template-columns: 1fr; } }
#airanksuite-root .ars-event {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 8px 10px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-surface);
	cursor: pointer;
}
#airanksuite-root .ars-event.is-on { border-color: var(--ars-brand); background: var(--ars-brand-tonal); }
#airanksuite-root .ars-event input { margin-top: 3px; }

/* A code block never widens its card: the pre scrolls inside, the grid cell
   stays at its share of the row. Grid items default to min-width:auto, which
   is what let a long line push the whole column past the page edge. */
#airanksuite-root .ars-card-body > *, #airanksuite-root .ars-card-body .grid > * { min-width: 0; }
#airanksuite-root .ars-card pre { max-width: 100%; }

/* ---- Content: selection bar + selected rows -------------------------- */
#airanksuite-root .ars-selbar {
	position: sticky;
	top: 8px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 8px 14px;
	border: 1px solid var(--ars-brand);
	border-radius: var(--ars-r-lg, 14px);
	background: var(--ars-brand-tonal);
	box-shadow: 0 6px 18px -10px rgb(22 22 30 / 0.3);
}
#airanksuite-root .ars-table tr.is-selected td { background: var(--ars-brand-tonal); }

/* ---- First-run: steps + previews ------------------------------------- */
#airanksuite-root .ars-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#airanksuite-root .ars-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	border: 1px solid var(--ars-line);
	border-radius: var(--ars-r-md, 10px);
	background: var(--ars-surface);
}
#airanksuite-root .ars-step.is-next { border-color: var(--ars-brand); box-shadow: 0 0 0 2px var(--ars-brand-tonal); }
#airanksuite-root .ars-step-n {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: var(--ars-surface-3);
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-step.is-done .ars-step-n { background: var(--ars-good-tonal); color: var(--ars-good); }
#airanksuite-root .ars-step.is-next .ars-step-n { background: var(--ars-brand); color: #fff; }
#airanksuite-root .ars-step-label { font-size: 13px; font-weight: 600; color: var(--ars-ink); }
#airanksuite-root .ars-step.is-done .ars-step-label { color: var(--ars-ink-2); text-decoration: line-through; text-decoration-color: var(--ars-ink-3); }
#airanksuite-root .ars-step-detail { font-size: 12px; color: var(--ars-ink-3); }
#airanksuite-root .ars-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { #airanksuite-root .ars-previews { grid-template-columns: 1fr; } }
#airanksuite-root .ars-preview {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px dashed var(--ars-line);
	border-radius: var(--ars-r-lg, 14px);
	background: color-mix(in srgb, var(--ars-surface) 60%, transparent);
}
#airanksuite-root .ars-preview-title { font-size: 13px; font-weight: 650; color: var(--ars-ink); }
#airanksuite-root .ars-preview-text { font-size: 12.5px; line-height: 1.5; color: var(--ars-ink-2); }
#airanksuite-root .ars-provider-mark.is-image { background: var(--ars-surface); border: 1px solid var(--ars-line); padding: 4px; box-sizing: border-box; }
#airanksuite-root .ars-provider-mark.is-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Content: signals + row actions --------------------------------- */
#airanksuite-root .ars-signals { display: inline-flex; gap: 2px; flex: none; }
#airanksuite-root .ars-signals i {
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: 4px;
	font-style: normal;
	font-size: 9px;
	font-weight: 800;
	background: var(--ars-surface-3);
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-signals i.is-on { background: var(--ars-good-tonal); color: var(--ars-good); }
#airanksuite-root .ars-rowmeta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
#airanksuite-root .ars-rowacts { display: inline-flex; gap: 8px; font-size: 11px; opacity: 0; transition: opacity 120ms ease; }
#airanksuite-root .ars-rowacts a { color: var(--ars-brand); text-decoration: none; font-weight: 600; }
#airanksuite-root .ars-table tr:hover .ars-rowacts { opacity: 1; }
#airanksuite-root .ars-hero-stat.is-active { border-color: var(--ars-brand); box-shadow: 0 0 0 2px var(--ars-brand-tonal); }

#airanksuite-root .ars-brand-mono { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; font-family: var(--ars-font-display); font-size: 19px; font-weight: 700; }
#airanksuite-root .ars-grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--ars-brand); }

/* ---- Semrush register overrides ------------------------------------- */
/* One typeface token, not a second stack that names a font nobody ships.
   This line asked for Inter, which is bundled nowhere, so it fell through to
   the system stack while the token above said something else. */
#airanksuite-root { font-family: var(--ars-font); }
#airanksuite-root .ars-page-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
#airanksuite-root .ars-hero {
	border-left: 1px solid var(--ars-border);
	background: var(--ars-surface);
	border-radius: 10px;
	padding: 24px 26px;
	box-shadow: 0 1px 1px rgb(22 22 30 / 0.03), 0 8px 24px -16px rgb(22 22 30 / 0.18);
}
#airanksuite-root .ars-hero-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
#airanksuite-root .ars-hero-badge { border-radius: 4px; letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 600; padding: 2px 8px; }
#airanksuite-root .ars-hero-stat { border-radius: 8px; background: var(--ars-surface); transition: border-color 140ms ease, box-shadow 140ms ease; }
#airanksuite-root .ars-btn { border-radius: 8px; font-weight: 600; min-height: 34px; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
#airanksuite-root .ars-btn-primary, #airanksuite-root .ars-btn.ars-btn-primary {
	background: var(--ars-solid);
	border-color: var(--ars-solid);
	color: var(--ars-solid-ink);
	box-shadow: 0 1px 2px rgb(22 22 30 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.06);
}
#airanksuite-root .ars-card {
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--ars-border) 80%, transparent);
	box-shadow: 0 1px 1px rgb(22 22 30 / 0.03), 0 8px 24px -16px rgb(22 22 30 / 0.18);
}
#airanksuite-root .ars-nav-item { border-radius: 8px; color: var(--ars-ink-2); font-weight: 500; }
#airanksuite-root .ars-nav-item svg { color: var(--ars-ink-3); }
#airanksuite-root .ars-nav-item:hover { background: var(--ars-surface-2); color: var(--ars-ink); }
#airanksuite-root .ars-nav-item.is-active { background: var(--ars-brand-tonal); color: var(--ars-brand-tonal-ink); font-weight: 600; box-shadow: none; }
#airanksuite-root .ars-nav-group { color: var(--ars-ink-3); font-size: 11px; letter-spacing: 0.06em; }
#airanksuite-root .ars-brand-mark { background: #171717; border-radius: 8px; }
#airanksuite-root .ars-brand-mono { font-family: inherit; font-size: 17px; }
#airanksuite-root .ars-grad-text { color: var(--ars-brand); }
#airanksuite-root .ars-metrics-value, #airanksuite-root .ars-metric-value, #airanksuite-root .t-num.font-bold { color: var(--ars-ink); }
#airanksuite-root .ars-verdict { border-radius: 8px; }
#airanksuite-root .ars-tabs [aria-selected="true"], #airanksuite-root .ars-tab.is-active { color: var(--ars-ink); border-color: var(--ars-ink); }
#airanksuite-root .ars-chip.is-active, #airanksuite-root .ars-chipbar .is-active { background: var(--ars-brand-tonal); color: var(--ars-brand-ink); }
#airanksuite-root .ars-hero::after, #airanksuite-root .ars-hero::before { display: none; }
#airanksuite-root .ars-hero { border-top: 1px solid var(--ars-border); }

/* Tables in the same register: quiet caps headers, calm row hover,
   tabular numerals everywhere a number sits in a column. */
#airanksuite-root .ars-table th {
	font-size: 10.5px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-table td.is-num, #airanksuite-root .ars-table .tabular-nums { font-variant-numeric: tabular-nums; }

/* The stand-in for a paid feature. Quiet, not a billboard: one badge, one
   sentence, one link — the same card language as everything around it. */
#airanksuite-root .ars-pro {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--ars-border);
	border-radius: 10px;
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-pro.is-compact { padding: 10px 12px; gap: 10px; }
#airanksuite-root .ars-pro-badge {
	flex: none;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}
#airanksuite-root .ars-pro-title { font-size: 13.5px; font-weight: 650; }
#airanksuite-root .ars-pro-text { margin: 2px 0 0; font-size: 12.5px; color: var(--ars-ink-2); }
#airanksuite-root .ars-pro-cta { margin-inline-start: auto; flex: none; }

/* ==========================================================================
   Native WordPress admin register
   --------------------------------------------------------------------------
   The plugin lives inside .wrap now, beside core's own screens, so its
   controls have to be core's controls. These rules come last on purpose:
   they are the layer that makes an application built as a SaaS product read
   as a WordPress plugin, and they must win over everything above.
   ========================================================================== */

/* The app no longer paints its own page: WordPress supplies the ground, the
   heading and the left menu. */
#airanksuite-root {
	background: transparent;
	font-size: 13px;
	color: var(--ars-ink-2);
}
.airanksuite-wrap #airanksuite-root { margin: 0; }
/* The in-app sidebar is gone — its job belongs to the admin menu, which is
   already on screen, already familiar, and already where a WordPress user
   looks. What is left is a single column of content. */
#airanksuite-root .ars-app,
#airanksuite-root .ars-app-wide,
#airanksuite-root .ars-app-mini {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	/* No pane of its own: the admin page IS the surface now. */
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}
/* A WordPress screen uses the width it is given; the 1060px column belonged to
   a layout that also had a 232px sidebar beside it. */
#airanksuite-root .ars-page { max-width: none; }
#airanksuite-root .ars-rail,
#airanksuite-root .ars-nav-scrim,
#airanksuite-root .ars-header { display: none !important; }
/* The content column carried a faint violet wash from the top — a brand
   gesture for an app that owned its whole window. WordPress owns this one,
   and the wash showed up as a tinted band above the first card. */
#airanksuite-root .ars-main {
	background: transparent;
	background-image: none;
}
#airanksuite-root .ars-view,
#airanksuite-root main.ars-view { padding: 0 !important; }
/* The app's own page title duplicates the WordPress <h1> above it. */
#airanksuite-root .ars-page-title { display: none; }

/* Tabs as core's nav-tab row. */
#airanksuite-root .ars-tabbar {
	border-bottom: 1px solid var(--ars-wp-line);
	padding: 0;
	margin: 0 0 16px;
	background: transparent;
	border-radius: 0;
}

/* Buttons: core's shape, size and weight. */
#airanksuite-root .ars-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--ars-brand);
	border-radius: 3px;
	background: var(--ars-wp-button-bg);
	color: var(--ars-brand);
	font-size: 13px;
	font-weight: 400;
	line-height: 2.15384615;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
}
#airanksuite-root .ars-btn:hover { background: var(--ars-wp-canvas); border-color: var(--ars-brand-hover); color: var(--ars-brand-hover); }
#airanksuite-root .ars-btn:focus-visible { outline: 2px solid var(--ars-brand); outline-offset: 0; box-shadow: 0 0 0 1px var(--ars-surface); }
#airanksuite-root .ars-btn-primary,
#airanksuite-root .ars-btn.ars-btn-primary {
	background: var(--ars-brand-fill);
	border-color: var(--ars-brand-fill);
	color: var(--ars-on-brand);
	box-shadow: none;
	transform: none;
}
#airanksuite-root .ars-btn-primary:hover {
	box-shadow: none;
	background: var(--ars-brand-fill-hover);
	border-color: var(--ars-brand-fill-hover);
	color: var(--ars-on-brand);
	transform: none;
}
#airanksuite-root .ars-btn:disabled { background: var(--ars-wp-button-bg); border-color: var(--ars-border); color: var(--ars-ink-3); cursor: default; }

/* Cards read as core's postbox: square-ish corners, one hairline, no lift. */
#airanksuite-root .ars-card,
#airanksuite-root .ars-hero {
	border: 1px solid var(--ars-border);
	border-radius: 4px;
	box-shadow: none;
	background: var(--ars-surface);
}
#airanksuite-root .ars-card-head { border-bottom: 1px solid var(--ars-border); }
/* Form fields: core's input, not a rounded app field. */
#airanksuite-root input[type='text'],
#airanksuite-root input[type='url'],
#airanksuite-root input[type='email'],
#airanksuite-root input[type='number'],
#airanksuite-root input[type='search'],
#airanksuite-root input[type='password'],
#airanksuite-root select,
#airanksuite-root textarea {
	border: 1px solid var(--ars-wp-field-line);
	border-radius: 3px;
	background: var(--ars-surface);
	color: var(--ars-ink);
	font-size: 14px;
	min-height: 30px;
	box-shadow: none;
}
#airanksuite-root input:focus,
#airanksuite-root select:focus,
#airanksuite-root textarea:focus {
	border-color: var(--ars-brand);
	box-shadow: 0 0 0 1px var(--ars-brand);
	outline: 2px solid transparent;
}
/* Tables as core's list table. */
#airanksuite-root .ars-table { border: 1px solid var(--ars-border); background: var(--ars-surface); border-radius: 4px; }
#airanksuite-root .ars-table th { background: var(--ars-wp-button-bg); color: var(--ars-ink); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; }

/* ---- Licence status table ------------------------------------------- */
#airanksuite-root .ars-lictable { display: grid; }
#airanksuite-root .ars-licrow {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	padding: 10px 16px;
	border-top: 1px solid var(--ars-line);
}
#airanksuite-root .ars-licrow:first-child { border-top: 0; }
#airanksuite-root .ars-licrow-l { font-size: 12.5px; color: var(--ars-ink-2); display: grid; gap: 1px; }
#airanksuite-root .ars-licrow-hint { font-size: 11px; color: var(--ars-ink-3); }
#airanksuite-root .ars-licrow-v { font-size: 13px; color: var(--ars-ink); }
@media (max-width: 720px) { #airanksuite-root .ars-licrow { grid-template-columns: 1fr; } }

/* ---- No coloured left edges -------------------------------------------
   A tinted rule down the left side of every card is somebody else's house
   style, and on a screen full of cards it turns the layout into a barcode.
   State is carried where it is already legible: in the number, the bar and
   the badge. Cards keep one neutral hairline on all four sides. */
#airanksuite-root .ars-areacard,
#airanksuite-root .ars-report-head.is-green,
#airanksuite-root .ars-report-head.is-amber,
#airanksuite-root .ars-report-head.is-red,
#airanksuite-root .ars-rr-prop,
#airanksuite-root .ars-rr-prop.is-required,
#airanksuite-root .ars-issue,
#airanksuite-root .ars-hero {
	border-inline-start: 1px solid var(--ars-border);
	border-left-width: 1px;
}
#airanksuite-root .ars-areacard.is-bad,
#airanksuite-root .ars-areacard.is-mid,
#airanksuite-root .ars-areacard.is-good,
#airanksuite-root .ars-issue.is-critical,
#airanksuite-root .ars-issue.is-warning,
#airanksuite-root .ars-issue.is-notice { border-inline-start-color: var(--ars-border); }
/* The provider and operator tiles wore the same trick on the top edge. */
#airanksuite-root .ars-provider,
#airanksuite-root .ars-provider.is-connected,
#airanksuite-root .ars-optile,
#airanksuite-root .ars-optile.is-seen,
#airanksuite-root .ars-optile.is-quiet,
#airanksuite-root .ars-optile.is-blocked { border-top: 1px solid var(--ars-border); }
/* Connected/seen now reads from a dot in the corner instead of an edge. */
#airanksuite-root .ars-provider.is-connected { box-shadow: inset 0 0 0 1px var(--ars-good-tonal); }
#airanksuite-root .ars-optile.is-seen .ars-optile-seen { color: var(--ars-good); }
/* The coloured 4px marker column is gone; the body takes the full width and
   the padding closes the gap the marker used to sit in. */
#airanksuite-root .ars-verdict { grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--ars-border); padding-inline-start: 18px; }
#airanksuite-root .ars-verdict .ars-verdict-mark { display: none; }
#airanksuite-root .ars-verdict.is-bad .ars-verdict-text { color: var(--ars-ink); }
#airanksuite-root .ars-step.is-next { box-shadow: none; border-color: var(--ars-ink-3); }

/* ---- Audit delta strip + sticky navigation --------------------------- */
#airanksuite-root .ars-delta-strip { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#airanksuite-root .ars-delta-strip > span { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--ars-surface-3); color: var(--ars-ink-2); }
#airanksuite-root .ars-delta-strip .is-new { background: var(--ars-serious-tonal); color: var(--ars-serious); }
#airanksuite-root .ars-delta-strip .is-fixed { background: var(--ars-good-tonal); color: var(--ars-good); }
/* The plugin's own navigation stays put while a long table scrolls: sticky
   under the WordPress admin bar, scrolling on its own if it is taller than
   the viewport. */
#airanksuite-root .ars-nav { position: sticky; top: 32px; max-height: calc(100vh - 32px); overflow-y: auto; align-self: flex-start; }
@media (max-width: 782px) { #airanksuite-root .ars-nav { top: 46px; max-height: calc(100vh - 46px); } }
#airanksuite-root .ars-accepted-rules { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- Sign in with Google ------------------------------------------- */
#airanksuite-root .ars-signin { display: grid; gap: 10px; justify-items: start; margin-bottom: 14px; }
#airanksuite-root .ars-google-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px 9px 12px;
	border: 1px solid #dadce0;
	border-radius: 6px;
	background: #fff;
	color: #1f1f1f;
	font: 600 14px/1 inherit;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
#airanksuite-root .ars-google-btn:hover { background: var(--ars-surface-2); border-color: var(--ars-border); }
#airanksuite-root .ars-google-btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- Setup checklist ----------
   One ordered sequence instead of twelve screens each reporting their own
   "not connected". Required steps read as work; optional ones read as offers. */
#airanksuite-root .ars-checklist { list-style: none; margin: 0; padding: 0; display: grid; }
#airanksuite-root .ars-checklist-item {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 10px 0;
	border-top: 1px solid var(--ars-border);
}
#airanksuite-root .ars-checklist-item:first-child { border-top: 0; }
#airanksuite-root .ars-checklist-mark {
	width: 22px; height: 22px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11.5px; font-weight: 600;
	border: 1px solid var(--ars-border-strong);
	color: var(--ars-ink-2);
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-checklist-mark.is-done { background: var(--ars-c-green-bg); border-color: var(--ars-c-green-line); color: var(--ars-c-green-ink); }
#airanksuite-root .ars-checklist-item.is-done .font-medium { color: var(--ars-ink-2); }
#airanksuite-root .ars-tier {
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
	padding: 1px 6px; border-radius: 999px; border: 1px solid var(--ars-border);
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-tier.is-required { color: var(--ars-ink); border-color: var(--ars-border-strong); }

/* ============================================================
   Setup wizard — SEOPress-class layout: a numbered step rail on
   the left, one working card on the right. The rail is a map,
   not a menu: every step is visible from the first second, done
   steps stay clickable, future steps wait their turn.
   ============================================================ */
#airanksuite-root .ars-wiz {
	min-height: 100vh;
	background: var(--ars-canvas);
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 28px;
	padding: 40px 44px 56px 36px;
	box-sizing: border-box;
	font-size: 13.5px;
	color: var(--ars-ink);
}
@media (max-width: 960px) {
	#airanksuite-root .ars-wiz { grid-template-columns: 1fr; padding: 24px 18px 40px; }
	#airanksuite-root .ars-wiz-rail { position: static; }
}

/* -- The rail -------------------------------------------------- */
#airanksuite-root .ars-wiz-rail { position: sticky; top: 40px; align-self: start; }
#airanksuite-root .ars-wiz-rail-title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
	color: var(--ars-ink);
}
#airanksuite-root .ars-wiz-steps { display: grid; gap: 2px; }
#airanksuite-root .ars-wiz-step {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 8px 7px 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--ars-ink-3);
	border-radius: var(--ars-r-sm);
}
#airanksuite-root .ars-wiz-step:hover { color: var(--ars-ink-2); }
#airanksuite-root .ars-wiz-step.is-active { color: var(--ars-ink); font-weight: 600; }
#airanksuite-root .ars-wiz-step.is-done { color: var(--ars-ink-2); }
#airanksuite-root .ars-wiz-step[disabled] { cursor: default; }
#airanksuite-root .ars-wiz-num {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--ars-brand-tonal);
	color: var(--ars-brand);
	flex: 0 0 auto;
	transition: background 160ms ease, color 160ms ease;
}
#airanksuite-root .ars-wiz-step.is-active .ars-wiz-num,
#airanksuite-root .ars-wiz-step.is-done .ars-wiz-num {
	background: var(--ars-brand);
	color: #fff;
}
#airanksuite-root .ars-wiz-step.is-done .ars-wiz-num svg { display: block; }

/* Sub-steps under the open group: a hairline with a moving accent. */
#airanksuite-root .ars-wiz-subs {
	margin: 2px 0 6px 12px;
	padding-left: 0;
	display: grid;
}
#airanksuite-root .ars-wiz-sub {
	position: relative;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
	padding: 7px 8px 7px 22px;
	color: var(--ars-ink-3);
	border-left: 2px solid var(--ars-border);
}
#airanksuite-root .ars-wiz-sub:hover { color: var(--ars-ink-2); }
#airanksuite-root .ars-wiz-sub.is-active {
	color: var(--ars-ink);
	font-weight: 600;
	border-left-color: var(--ars-brand);
}

/* -- The card -------------------------------------------------- */
#airanksuite-root .ars-wiz-card {
	background: var(--ars-surface);
	border-radius: 12px;
	box-shadow: var(--ars-shadow-card, 0 1px 2px rgba(20, 20, 24, 0.06), 0 8px 24px rgba(20, 20, 24, 0.05));
	padding: 40px 44px 32px;
	max-width: 1160px;
	min-height: 540px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
@media (max-width: 782px) {
	#airanksuite-root .ars-wiz-card { padding: 24px 20px; }
}
#airanksuite-root .ars-wiz-card h1 {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--ars-ink);
}
#airanksuite-root .ars-wiz-lede {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ars-ink-2);
	max-width: 72ch;
}
#airanksuite-root .ars-wiz-body { flex: 1 1 auto; }

/* Footer: Back on the left of the actions, primary on the right. */
#airanksuite-root .ars-wiz-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 32px;
}
#airanksuite-root .ars-wiz-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--ars-brand);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 8px 6px;
	margin-right: auto;
}
#airanksuite-root .ars-wiz-skip-link {
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--ars-brand);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 8px 6px;
}

/* Info callout: the SEOPress pattern — tinted panel, solid left bar. */
#airanksuite-root .ars-wiz-callout {
	display: block;
	background: var(--ars-brand-tonal);
	border-left: 4px solid var(--ars-brand);
	border-radius: 6px;
	padding: 14px 18px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ars-ink);
	margin: 0 0 22px;
}
#airanksuite-root .ars-wiz-callout.is-warning {
	background: var(--ars-accent-tonal);
	border-left-color: var(--ars-accent);
}
#airanksuite-root .ars-wiz-callout p { margin: 0; }
#airanksuite-root .ars-wiz-callout p + p { margin-top: 8px; }

/* Code chip inside running text: `[post]`-style token. */
#airanksuite-root .ars-wiz-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	background: var(--ars-surface-3, var(--ars-surface-2));
	border: 1px solid var(--ars-border);
	border-radius: 4px;
	padding: 1.5px 7px;
	color: var(--ars-ink);
}

/* Checkbox exclusion rows. */
#airanksuite-root .ars-wiz-checks { display: grid; gap: 4px; }
#airanksuite-root .ars-wiz-check { padding: 9px 4px; border-radius: var(--ars-r-sm); }
#airanksuite-root .ars-wiz-check > label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--ars-ink);
}
#airanksuite-root .ars-wiz-check input[type='checkbox'] { margin: 0; }
#airanksuite-root .ars-wiz-check-sub {
	margin: 4px 0 0 30px;
	font-size: 12.5px;
	color: var(--ars-ink-3);
	line-height: 1.5;
}

/* Migration source grid. */
#airanksuite-root .ars-wiz-sources {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
	margin-bottom: 6px;
}
#airanksuite-root .ars-wiz-source {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px;
	min-height: 84px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	background: color-mix(in srgb, var(--ars-brand) 4%, var(--ars-surface));
	cursor: pointer;
	font: inherit;
	text-align: left;
	color: var(--ars-ink);
	transition: border-color 140ms ease, background 140ms ease;
}
#airanksuite-root .ars-wiz-source:hover { border-color: var(--ars-border-strong, var(--ars-border)); }
#airanksuite-root .ars-wiz-source.is-selected {
	border-color: var(--ars-brand);
	background: var(--ars-brand-tonal);
}
#airanksuite-root .ars-wiz-source[disabled] {
	opacity: 0.45;
	cursor: default;
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-wiz-source .ars-vendor-icon { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; }
#airanksuite-root .ars-wiz-source-name { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
#airanksuite-root .ars-wiz-source-sub { font-size: 11.5px; color: var(--ars-ink-3); margin-top: 2px; }

/* Welcome: quote + count cards. */
#airanksuite-root .ars-wiz-hero {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 20px;
	margin-bottom: 22px;
}
@media (max-width: 900px) { #airanksuite-root .ars-wiz-hero { grid-template-columns: 1fr; } }
#airanksuite-root .ars-wiz-hero-card {
	border: 1px solid var(--ars-border);
	border-radius: 10px;
	padding: 22px 24px;
}
#airanksuite-root .ars-wiz-quote-mark { color: var(--ars-brand); margin-bottom: 10px; }
#airanksuite-root .ars-wiz-quote {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	margin: 0 0 14px;
	color: var(--ars-ink);
}
#airanksuite-root .ars-wiz-quote-by { font-weight: 700; }
#airanksuite-root .ars-wiz-quote-role { font-size: 12.5px; color: var(--ars-ink-3); margin-top: 2px; }
#airanksuite-root .ars-wiz-counts { display: grid; gap: 18px; align-content: center; }
#airanksuite-root .ars-wiz-count { display: flex; align-items: center; gap: 14px; }
#airanksuite-root .ars-wiz-count-icon {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--ars-brand-tonal);
	color: var(--ars-brand);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
#airanksuite-root .ars-wiz-count-num { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
#airanksuite-root .ars-wiz-count-label { font-size: 12.5px; color: var(--ars-ink-2); }

/* Upgrade / next-step strip. */
#airanksuite-root .ars-wiz-strip {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--ars-brand-tonal);
	border-radius: 10px;
	padding: 16px 20px;
	margin-bottom: 4px;
}
#airanksuite-root .ars-wiz-strip-text { flex: 1 1 auto; }
#airanksuite-root .ars-wiz-strip-title {
	font-weight: 700;
	color: var(--ars-brand);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
}
#airanksuite-root .ars-wiz-strip-sub { font-size: 12.5px; color: var(--ars-ink-2); line-height: 1.5; }

/* Drop zone for the configuration file. */
#airanksuite-root .ars-wiz-drop {
	border: 1.5px dashed color-mix(in srgb, var(--ars-brand) 35%, var(--ars-border));
	background: color-mix(in srgb, var(--ars-brand) 4%, var(--ars-surface));
	border-radius: 10px;
	padding: 40px 24px;
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 8px;
	margin-bottom: 20px;
	transition: border-color 140ms ease, background 140ms ease;
}
#airanksuite-root .ars-wiz-drop.is-over {
	border-color: var(--ars-brand);
	background: var(--ars-brand-tonal);
}
#airanksuite-root .ars-wiz-drop-icon { color: var(--ars-brand); }
#airanksuite-root .ars-wiz-drop-title { font-weight: 700; font-size: 14.5px; }
#airanksuite-root .ars-wiz-drop-sub { font-size: 12.5px; color: var(--ars-ink-3); }
#airanksuite-root .ars-wiz-drop-file {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ars-good-ink, var(--ars-good));
}

/* Ready!: the checklist. */
#airanksuite-root .ars-wiz-donelist {
	border: 1px solid var(--ars-border);
	border-radius: 10px;
	margin-bottom: 22px;
	overflow: hidden;
}
#airanksuite-root .ars-wiz-done {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	font-size: 13.5px;
}
#airanksuite-root .ars-wiz-done + .ars-wiz-done { border-top: 1px solid var(--ars-line-soft, var(--ars-border)); }
#airanksuite-root .ars-wiz-done-check {
	color: var(--ars-good);
	flex: 0 0 auto;
	display: grid;
	place-items: center;
}
#airanksuite-root .ars-wiz-done.is-off .ars-wiz-done-check { color: var(--ars-ink-3); }
#airanksuite-root .ars-wiz-done.is-off { color: var(--ars-ink-3); }

/* The completion rosette. */
#airanksuite-root .ars-wiz-rosette {
	float: right;
	margin: -6px 0 12px 18px;
	width: 92px;
	height: 92px;
	border-radius: 999px;
	border: 2px dashed var(--ars-good);
	color: var(--ars-good-ink, var(--ars-good));
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.35;
	transform: rotate(6deg);
}

/* ---- The notice, in core's shape ---------------------------------------
   WordPress states one thing the same way on every screen it ships: a white
   panel, a hairline, and four pixels of colour down the left edge. Matching
   it is not decoration — it is the difference between a message a user reads
   as the system speaking and one they read as an advert. */
#airanksuite-root .ars-notice {
	background: var(--ars-surface);
	border: 1px solid var(--ars-wp-line);
	border-left: 4px solid var(--ars-wp-notice-info);
	border-radius: 0;
	padding: 1px 12px;
	margin: 0;
	font-size: 13px;
	color: var(--ars-ink);
}
#airanksuite-root .ars-notice p { margin: 0.5em 0; padding: 2px; }
#airanksuite-root .ars-notice.is-error { border-left-color: var(--ars-serious); }
#airanksuite-root .ars-notice.is-warning { border-left-color: var(--ars-warning); }
#airanksuite-root .ars-notice.is-success { border-left-color: var(--ars-good); }
#airanksuite-root .ars-notice.is-info { border-left-color: var(--ars-wp-notice-info); }

/* ---- The tab row, connected to what is under it ------------------------
   A nav-tab row that floats above its content is a row of buttons. The one
   pixel of overlap is what makes the active tab and the panel one object. */
#airanksuite-root .ars-tabbar {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 0;
	padding-top: 3px;
	padding-inline: 0;
	box-shadow: none;
}
#airanksuite-root .ars-tabbar + * { margin-top: 0; }

/* ---- The group's screens, as core's nav-tab row -------------------------
   WordPress has exactly one way of saying "this area has several screens",
   and every plugin a user already trusts uses it. The row sits under the
   heading, the active tab merges with the page beneath it, and the rest read
   as links — no pills, no segmented control, no invention. */
#airanksuite-root .ars-grouptabs {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 0;
	/* Flush with the cards under it: the app's own view padding is zero here,
	   so any inset would leave the tabs floating right of their own content. */
	margin: 0 0 16px;
	padding: 9px 0 0;
	border-bottom: 1px solid var(--ars-wp-line);
	line-height: inherit;
}
#airanksuite-root .ars-grouptab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 4px -1px 0;
	padding: 5px 10px;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	background: transparent;
	color: var(--ars-brand);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.71428571;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
#airanksuite-root .ars-grouptab:hover { background: var(--ars-surface); color: var(--ars-brand-hover); }
#airanksuite-root .ars-grouptab:focus-visible { outline: 1px solid var(--ars-brand); outline-offset: -1px; }
#airanksuite-root .ars-grouptab.is-active {
	border-color: var(--ars-wp-line);
	border-bottom: 1px solid var(--ars-wp-canvas);
	background: var(--ars-wp-canvas);
	color: var(--ars-ink);
}
/* Locked screens stay in the row: the mark says why, the tab still opens. */
#airanksuite-root .ars-grouptab-pro {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 2px;
	background: var(--ars-warning-tonal);
	color: var(--ars-warning);
}
#airanksuite-root[data-theme='dark'] .ars-grouptabs { border-bottom-color: var(--ars-border); }
#airanksuite-root[data-theme='dark'] .ars-grouptab.is-active {
	border-color: var(--ars-border);
	border-bottom-color: var(--ars-canvas);
	background: var(--ars-canvas);
}
#airanksuite-root[data-theme='dark'] .ars-grouptab:hover { background: var(--ars-surface-2); }

/* ---- Second-level tabs, as core's subsubsub ----------------------------
   Two identical tab rows stacked read as two menus and rank neither. The
   group's screens are the tabs; a screen's own views are the row of links
   WordPress puts above every list table — same idea, visibly one level down.
   These rules come after the nav-tab block on purpose. */
#airanksuite-root .ars-tabbar {
	border-bottom: 0;
	margin: 0 0 12px;
	padding: 0;
	gap: 0 2px;
	align-items: center;
}
#airanksuite-root .ars-tab::after {
	content: '|';
	color: var(--ars-ink-3);
	margin-left: 8px;
	margin-right: 2px;
	font-weight: 400;
}
#airanksuite-root [role='tablist'] > .ars-tab:last-child::after { content: none; }
#airanksuite-root .ars-tab.is-active:hover { text-decoration: none; }

/* ---- The dark theme reaches the page it sits on ------------------------
   WordPress has no dark admin, so a dark plugin canvas inside a light one is
   a slab dropped on a grey table: the heading, the rule under it and the
   footer all stay bright while the content goes black. These rules paint the
   admin's own content column instead, and this stylesheet is enqueued only on
   this plugin's screens — nothing outside them can be reached from here. */
body.airanksuite-dark #wpcontent,
body.airanksuite-dark #wpbody,
body.airanksuite-dark #wpbody-content,
body.airanksuite-dark #wpfooter { background: var(--ars-canvas); }
body.airanksuite-dark .wrap > h1,
body.airanksuite-dark .wrap > h2,
body.airanksuite-dark .wrap .wp-heading-inline,
body.airanksuite-dark #wpfooter,
body.airanksuite-dark #wpfooter a { color: var(--ars-ink); }
body.airanksuite-dark .wrap > hr.wp-header-end { border-top-color: var(--ars-border); }
body.airanksuite-dark #screen-meta,
body.airanksuite-dark #screen-meta-links .show-settings {
	background: var(--ars-surface);
	border-color: var(--ars-border);
	color: var(--ars-ink-2);
}

/* ---- The upgrade card, free edition ------------------------------------
   One card on the dashboard, first thing on the page, selling the single
   feature the Pro tier exists for. Brand-blue left edge like a core notice,
   so it reads as part of WordPress — not as a foreign ad dropped on it. */
#airanksuite-root .ars-upsell {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: space-between;
	background: var(--ars-surface);
	border: 1px solid var(--ars-wp-line);
	border-inline-start: 4px solid var(--ars-brand);
	border-radius: 4px;
	padding: 14px 18px;
	flex-wrap: wrap;
}
#airanksuite-root .ars-upsell-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ars-brand);
	margin-bottom: 2px;
}
#airanksuite-root .ars-upsell-title { font-size: 15.5px; font-weight: 600; color: var(--ars-ink); }
#airanksuite-root .ars-upsell-text { margin: 4px 0 0; font-size: 13px; color: var(--ars-ink-2); max-width: 68ch; }
#airanksuite-root .ars-upsell-cta { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
#airanksuite-root .ars-upsell-price { font-size: 11.5px; color: var(--ars-ink-3); white-space: nowrap; }

/* Rich-result card head.
   Name and status badge share the left column and wrap between themselves;
   the field count holds its own column and never breaks. A plain flex row
   pushed "12 fields" outside the card as soon as a label or a translated
   badge ran long — German does that to nearly every badge. */
#airanksuite-root .ars-richhead {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
#airanksuite-root .ars-richhead-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}
#airanksuite-root .ars-richhead-count {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 11px;
	line-height: 18px;
	padding-top: 1px;
}

/* Wizard callout, success tone — the green twin of is-warning. */
#airanksuite-root .ars-wiz-callout.is-success {
	border-color: var(--ars-c-green);
	background: color-mix(in srgb, var(--ars-c-green) 18%, transparent);
}

/* The second line under a reach figure: why this row counts fewer pages
   than the row above it. */
#airanksuite-root .ars-scorerow-note {
	display: block;
	font-size: 11px;
	line-height: 1.35;
	margin-top: 2px;
	color: var(--ars-ink-3);
	font-weight: 400;
}

/* ============================================================
   0.0.7 — the polish pass
   ============================================================
   Everything below replaces a decision that made the plugin look like a
   WordPress screen from 2010 rather than a product. It is last in the file on
   purpose: these are overrides of our own earlier blocks, and the cascade is
   the mechanism. Each one names what it replaces and why.
   ============================================================ */

/* ---- Second-level tabs: a segmented control, not core's subsubsub ------
   They were drawn as core's list-table link row — blue text, pipe
   separators, bold when active. On a screen full of cards that reads as an
   unstyled fragment: the one element on the page that looks like it was
   forgotten. A segmented control says the same thing (one level down from
   the group tabs, pick one of a few views) and looks built.  */
#airanksuite-root .ars-tabbar {
	border-bottom: 0;
	margin: 0 0 14px;
	padding: 0;
	gap: 10px;
	align-items: center;
}
#airanksuite-root [role='tablist'] {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--ars-surface-2);
	border: 1px solid var(--ars-border);
	border-radius: 10px;
}
/* The pipe is gone with the pattern that needed it. */
#airanksuite-root .ars-tab::after,
#airanksuite-root [role='tablist'] > .ars-tab:last-child::after { content: none; }
#airanksuite-root .ars-tab:hover {
	background: rgb(22 22 30 / 0.05);
	color: var(--ars-ink);
	text-decoration: none;
}
#airanksuite-root .ars-tab.is-active,
#airanksuite-root .ars-tab[aria-selected='true'] {
	background: var(--ars-surface);
	color: var(--ars-ink);
	font-weight: 600;
	border: 0;
	box-shadow: 0 1px 2px rgb(22 22 30 / 0.10), 0 0 0 1px rgb(22 22 30 / 0.05);
}
#airanksuite-root .ars-tab.is-active:hover { background: var(--ars-surface); }
#airanksuite-root[data-theme='dark'] .ars-tab:hover { background: rgb(255 255 255 / 0.06); }
#airanksuite-root[data-theme='dark'] .ars-tab.is-active { box-shadow: 0 1px 2px rgb(0 0 0 / 0.4); }

/* ---- Rows inside a card sit on the card's own margin ------------------
   The checklist put its tick 25px from the card's left border while the card
   heading started at 18px plus the icon — so the list read as pasted in from
   somewhere else, flush against the edge. Rows get the head's padding, the
   separators still run the full width, and a row is a hover target because
   the whole row is a link's worth of information. */
#airanksuite-root .ars-checklist-item {
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 12px;
	padding: 13px 18px;
	transition: background 120ms ease;
}
#airanksuite-root .ars-checklist-item:hover { background: var(--ars-surface-2); }
/* A step's name is the row's title, not a blue link in a paragraph. */
#airanksuite-root .ars-checklist-item a {
	color: var(--ars-ink);
	text-decoration: none;
	font-weight: 600;
}
#airanksuite-root .ars-checklist-item a:hover {
	color: var(--ars-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}
#airanksuite-root .ars-checklist-item.is-done a { color: var(--ars-ink-2); font-weight: 500; }
#airanksuite-root .ars-checklist-mark { width: 24px; height: 24px; font-size: 12px; }

/* The tier badge is a footnote about the step, not a second title. */
#airanksuite-root .ars-tier {
	font-size: 9.5px;
	letter-spacing: .05em;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--ars-surface-2);
	border-color: transparent;
	color: var(--ars-ink-3);
	font-weight: 600;
	line-height: 1.5;
}
#airanksuite-root .ars-tier.is-required {
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
	border-color: transparent;
}

/* ---- Weakness rows: every row on the same grid -------------------------
   The fourth column was `auto`, so it was as wide as its own row's text —
   and the one row carrying an extra note ("7 pages are not counted here")
   made that column 400px, which squeezed its label column and slid its bar
   160px left of every other bar on the screen. One row visibly out of line
   in a list of seven reads as a broken layout, and it was one.

   Fixed tracks for the meter and the count, so no row can disagree with the
   others. The note wraps inside its own column instead of widening it. */
#airanksuite-root .ars-scorerow {
	grid-template-columns: 44px minmax(0, 1fr) 220px 250px 14px;
	padding: 11px 10px;
	min-height: 54px;
}
#airanksuite-root .ars-scorerow.is-static {
	grid-template-columns: 44px minmax(0, 1fr) 220px 250px;
}
#airanksuite-root .ars-scorerow-reach { text-align: end; }
#airanksuite-root .ars-scorerow-note {
	display: block;
	white-space: normal;
	margin-top: 3px;
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--ars-ink-3);
}
/* The score is a verdict, so it gets the shape of one. Bare coloured digits
   at three different colours down a column read as an error list. */
#airanksuite-root .ars-scorerow-score {
	justify-self: start;
	min-width: 36px;
	padding: 5px 0;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	background: var(--ars-surface-2);
	color: var(--ars-ink-2);
}
#airanksuite-root .ars-scorerow-score.is-good { background: var(--ars-c-green-bg); color: var(--ars-c-green-ink); }
#airanksuite-root .ars-scorerow-score.is-mid  { background: var(--ars-c-amber); color: var(--ars-c-amber-ink); }
#airanksuite-root .ars-scorerow-score.is-bad  { background: var(--ars-c-red, #fde8ea); color: var(--ars-c-red-ink); }
#airanksuite-root .ars-scorerow-bar { height: 7px; }
#airanksuite-root .ars-scorerow-label { font-size: 13px; }

/* ---- A connection, stated as one ---------------------------------------
   The Analytics panel opened with two empty ID fields and a "Find mine"
   button beside them, so the automatic path looked like the fallback and the
   form looked like the job. This is the strip Search Console has always had:
   what it is connected to, and the one control that changes it. */
#airanksuite-root .ars-connect {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px solid var(--ars-border);
	border-radius: 10px;
	background: var(--ars-surface-2);
}
#airanksuite-root .ars-connect.is-good {
	border-color: var(--ars-c-green-line);
	background: var(--ars-c-green-bg);
}
#airanksuite-root .ars-connect.is-good .t-caption { color: var(--ars-ink-2); }
#airanksuite-root .ars-connect > span { flex: none; }

/* ---- A progress bar that looks alive -----------------------------------
   6px of flat colour that only grows when a twenty-second slice finishes
   reads as a stopped bar, and a stopped bar reads as a crash. Taller, with
   moving stripes while the run is running, so watching it is reassuring
   rather than worrying. */
#airanksuite-root .ars-progress { display: grid; gap: 8px; }
#airanksuite-root .ars-progress-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	font-size: 13px; color: var(--ars-ink-2);
}
#airanksuite-root .ars-progress-pct { color: var(--ars-ink); font-weight: 650; font-size: 13px; }
#airanksuite-root .ars-progress-track {
	height: 10px;
	border-radius: 999px;
	background: var(--ars-surface-3);
	overflow: hidden;
}
#airanksuite-root .ars-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--ars-brand);
	background-image: linear-gradient(115deg,
		rgba(255,255,255,.22) 25%, transparent 25%,
		transparent 50%, rgba(255,255,255,.22) 50%,
		rgba(255,255,255,.22) 75%, transparent 75%);
	background-size: 22px 22px;
	animation: airanksuite-progress-stripes 900ms linear infinite;
	transition: width 350ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes airanksuite-progress-stripes { to { background-position: 22px 0; } }
/* Somebody who asked for less motion gets a plain bar that still grows. */
@media (prefers-reduced-motion: reduce) {
	#airanksuite-root .ars-progress-fill { animation: none; background-image: none; }
}

/* ============================================================
   PHASE 1 — Identity
   ============================================================
   Everything above this line was written to look like WordPress. That was a
   deliberate choice and it worked: the plugin stopped reading as a foreign
   object dropped into wp-admin. It also means it reads as nothing in
   particular — open three SEO plugins side by side and the screenshots are
   interchangeable.

   This block gives the product a face. Not by decorating: by changing the
   three things a person recognises before they read a word — the typeface,
   one colour, and the shape of a surface. They are the website's, so the
   plugin and airanksuite.com are visibly one product.

   Tokens only, at the end of the cascade. No selector above is edited, no
   markup moves, and every rule here can be undone by deleting this block.
   ============================================================ */

/* ---- The typeface -----------------------------------------------------
   The admin's own system stack, by the token above. The two @font-face
   blocks that bundled DM Sans here are gone: the token no longer names it,
   so they were 96 KB of woff2 declared for nothing on every admin screen.
   The upgrade screen still ships the face, on purpose — that page is the
   shop window and matches airanksuite.com. */

/*
 * Named elements, not `*`.
 *
 * Several blocks above repeat the system stack literally, so setting it on
 * the root alone would leave them behind. A universal selector would take the
 * monospace out of every code sample and every key in the developer screen,
 * which is a real regression for the sake of a shorter rule.
 */
#airanksuite-root,
#airanksuite-root button, #airanksuite-root input, #airanksuite-root select, #airanksuite-root textarea,
#airanksuite-root h1, #airanksuite-root h2, #airanksuite-root h3, #airanksuite-root h4, #airanksuite-root h5,
#airanksuite-root p, #airanksuite-root span, #airanksuite-root div, #airanksuite-root a, #airanksuite-root label,
#airanksuite-root li, #airanksuite-root td, #airanksuite-root th, #airanksuite-root dt, #airanksuite-root dd,
#airanksuite-root small, #airanksuite-root strong, #airanksuite-root b, #airanksuite-root em {
	font-family: var(--ars-font);
}
/* Anything that is meant to be monospace stays monospace. */
#airanksuite-root code, #airanksuite-root pre, #airanksuite-root kbd, #airanksuite-root samp,
#airanksuite-root code *, #airanksuite-root pre * {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* DM Sans has a true tabular set; numbers in a column stop dancing. */
#airanksuite-root .tabular-nums, #airanksuite-root .ars-num, #airanksuite-root .ars-metrics-value,
#airanksuite-root .ars-metric-value, #airanksuite-root .ars-hero-stat-v, #airanksuite-root .ars-scorerow-score,
#airanksuite-root table td, #airanksuite-root table th {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}
/* The tighter tracking was tuned for DM Sans. On the system stack it makes
   Segoe and San Francisco look pinched, so headings sit at the default. */
#airanksuite-root h1, #airanksuite-root h2, #airanksuite-root h3,
#airanksuite-root .ars-card-title, #airanksuite-root .ars-hero-title, #airanksuite-root .t-title {
	letter-spacing: 0;
}

/* Cards the way core draws a postbox: a hairline and one flat shadow, no
   violet cast, no long soft glow. A stack of them reads as WordPress. */
#airanksuite-root .ars-card {
	border-radius: var(--ars-r-lg);
	box-shadow: 0 1px 1px rgb(0 0 0 / 0.04);
}
#airanksuite-root[data-theme='dark'] .ars-card {
	box-shadow: 0 1px 1px rgb(0 0 0 / 0.4);
}

/* ============================================================
   PHASE 2 — Components
   ============================================================
   Phase 1 gave the product a face. This gives it hands: the controls a person
   touches all day. The register to beat is not WordPress' — it is the one
   every serious tool shares, where a field, a button and a row look like they
   were drawn by the same person on the same morning.

   Tokens only. No hex literal appears below, so the palette stays in one
   place and the ratchet in the suite keeps it there.
   ============================================================ */

/* ---- Fields -----------------------------------------------------------
   3px corners and core's grey hairline were the "look native" answer, and on
   a screen of 14px cards a 3px input is the one element that did not get the
   memo. Same radius family as everything else, a border from our own palette,
   and a focus ring instead of a 1px outline you have to hunt for. */
#airanksuite-root input[type='text'],
#airanksuite-root input[type='url'],
#airanksuite-root input[type='email'],
#airanksuite-root input[type='number'],
#airanksuite-root input[type='search'],
#airanksuite-root input[type='password'],
#airanksuite-root select,
#airanksuite-root textarea {
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-sm);
	background: var(--ars-surface);
	color: var(--ars-ink);
	font-size: 13.5px;
	min-height: 34px;
	padding: 6px 11px;
	transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
#airanksuite-root select { padding-inline-end: 28px; }
#airanksuite-root input::placeholder,
#airanksuite-root textarea::placeholder { color: var(--ars-ink-3); }
#airanksuite-root input:hover:not(:disabled),
#airanksuite-root select:hover:not(:disabled),
#airanksuite-root textarea:hover:not(:disabled) { border-color: var(--ars-btn-border-hover); }
#airanksuite-root input:focus,
#airanksuite-root select:focus,
#airanksuite-root textarea:focus {
	border-color: var(--ars-brand);
	box-shadow: var(--ars-focus-ring);
	outline: 2px solid transparent;
}
#airanksuite-root input:disabled,
#airanksuite-root select:disabled,
#airanksuite-root textarea:disabled {
	background: var(--ars-disabled-bg);
	color: var(--ars-disabled-ink);
	cursor: default;
}
/* A label should look like a label everywhere, not like body text in a form. */
#airanksuite-root label.block,
#airanksuite-root .ars-field-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ars-ink-2);
	letter-spacing: 0.002em;
}

/* ---- Buttons ----------------------------------------------------------
   One height, one radius, one motion. The primary carries a coloured shadow
   in its own hue, which is the cheapest way to make a filled button look
   placed rather than pasted; hover lifts it a hair, active puts it back. */
#airanksuite-root .ars-btn {
	min-height: 34px;
	border-radius: var(--ars-r-sm);
	font-weight: 600;
	font-size: 13px;
	padding: 7px 16px;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease,
		box-shadow 140ms ease, transform 90ms ease;
}
#airanksuite-root .ars-btn-primary {
	background: var(--ars-brand-fill);
	color: var(--ars-on-brand);
	box-shadow: 0 1px 2px rgb(24 22 46 / 0.16), 0 6px 16px -8px rgb(34 113 177 / 0.65);
}
#airanksuite-root .ars-btn-primary:hover:not(:disabled) {
	background: var(--ars-brand-fill-hover);
	box-shadow: 0 2px 4px rgb(24 22 46 / 0.18), 0 10px 22px -10px rgb(34 113 177 / 0.75);
	transform: translateY(-1px);
}
#airanksuite-root .ars-btn-primary:active:not(:disabled) { transform: translateY(0); }
#airanksuite-root .ars-btn-ghost {
	background: var(--ars-surface);
	border-color: var(--ars-btn-border);
	color: var(--ars-ink);
	box-shadow: 0 1px 1px rgb(24 22 46 / 0.04);
}
#airanksuite-root .ars-btn-ghost:hover:not(:disabled) {
	background: var(--ars-surface-2);
	border-color: var(--ars-btn-border-hover);
	color: var(--ars-ink);
}
#airanksuite-root .ars-btn-tonal {
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
	border-color: transparent;
}
#airanksuite-root .ars-btn-tonal:hover:not(:disabled) {
	background: var(--ars-brand-tonal);
	filter: brightness(0.97);
}
#airanksuite-root .ars-btn:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--ars-focus-ring);
}
/* A text button is still a button: it needs the same target and the same
   corner, or a row of "actions" reads as a paragraph with links in it. */
#airanksuite-root .ars-linkbtn {
	border-radius: var(--ars-r-sm);
	padding: 5px 8px;
	font-weight: 600;
	color: var(--ars-brand-ink);
	text-decoration: none;
	transition: background 120ms ease, color 120ms ease;
}
#airanksuite-root .ars-linkbtn:hover {
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
}

/* ---- Tables -----------------------------------------------------------
   The row separator was a hard-coded blue-grey that belonged to no palette.
   Rows get a hairline from the tokens, a calm hover, and the header keeps its
   quiet caps — but on the card's own surface, so a sticky header does not
   look like a second card sliding over the first. */
#airanksuite-root .ars-table th {
	background: var(--ars-surface);
	border-bottom: 1px solid var(--ars-border);
	padding: 11px 14px;
}
#airanksuite-root .ars-table td {
	vertical-align: middle;
	font-size: 13px;
	border-bottom: 1px solid var(--ars-line-soft);
	padding: 11px 14px;
}
#airanksuite-root .ars-table tbody tr {
	transition: background 110ms ease;
}
#airanksuite-root .ars-table tbody tr:hover {
	background: var(--ars-surface-2);
}

/* ---- The rail ---------------------------------------------------------
   The selected screen is the one thing on the page that should be
   unmistakable at a glance. A tinted pill with a violet edge does it without
   shouting, and the icon takes the brand colour with it. */
#airanksuite-root .ars-nav-item {
	border-radius: var(--ars-r-sm);
	font-weight: 500;
	padding: 8px 12px;
}
#airanksuite-root .ars-nav-item.is-active {
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
	font-weight: 650;
	box-shadow: inset 2px 0 0 var(--ars-brand);
}
#airanksuite-root .ars-nav-item.is-active svg {
	color: var(--ars-brand);
}
#airanksuite-root .ars-nav-item:hover:not(.is-active) { background: var(--ars-surface-2); }

/* ---- Badges and pills -------------------------------------------------
   Everything that labels a thing gets the same shape and the same weight, so
   a screen with six of them reads as one system rather than six decisions. */
#airanksuite-root .ars-badge,
#airanksuite-root .ars-chip,
#airanksuite-root .ars-pill {
	border-radius: 999px;
	font-weight: 650;
	letter-spacing: 0.01em;
}

/* ============================================================
   PHASE 3 — The screens people photograph
   ============================================================
   Identity and controls are settled. What is left is the handful of surfaces
   that carry the product's argument: the score, the upsell, an empty state,
   and the line on a chart. These are the frames that end up in a review, a
   tweet or a support ticket, and until now they were the same white card as
   everything else with a bigger number in them.

   Tokens only, as in phase 2.
   ============================================================ */

/* ---- The hero -----------------------------------------------------------
   A beam, not a blob. One soft diagonal of the brand crossing the card behind
   the ring: enough to say "this is the number that matters" and to make a
   screenshot of this plugin recognisable, without tinting the text it sits
   under. The pseudo-element carries it so no markup moves. */
#airanksuite-root .ars-hero {
	position: relative;
	border-radius: var(--ars-r-lg);
	overflow: hidden;
}
#airanksuite-root .ars-hero::before {
	content: '';
	position: absolute;
	inset: -40% auto -40% -10%;
	width: 62%;
	pointer-events: none;
	display: block;
	background: linear-gradient(
		112deg,
		rgb(34 113 177 / 0.10) 0%,
		rgb(139 123 255 / 0.05) 46%,
		transparent 78%
	);
}
#airanksuite-root[data-theme='dark'] .ars-hero::before {
	background: linear-gradient(
		112deg,
		rgb(156 141 255 / 0.16) 0%,
		rgb(122 104 255 / 0.07) 46%,
		transparent 78%
	);
}
#airanksuite-root .ars-hero > * { position: relative; }
/* The verdict above the number is the sentence a customer repeats. Give it
   the weight of a headline rather than of a card subtitle. */
#airanksuite-root .ars-hero-title {
	font-size: 19px;
	font-weight: 680;
	line-height: 1.28;
	letter-spacing: 0;
}
#airanksuite-root .ars-hero-why { font-size: 13.5px; line-height: 1.6; }
#airanksuite-root .ars-hero-stat-v {
	font-variant-numeric: tabular-nums;
	color: var(--ars-ink);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0;
}

/* ---- The upsell ---------------------------------------------------------
   A 4px left edge on a white card is what every plugin's advertisement looks
   like. This one is the product's own dark register — the same one the
   upgrade screen opens with — so the offer looks like part of the thing you
   already trust rather than a banner pasted on top of it. */
#airanksuite-root .ars-upsell {
	border: 0;
	border-radius: var(--ars-r-lg);
	padding: 20px 24px;
	background: var(--ars-grad);
	color: var(--ars-on-brand);
	box-shadow: 0 10px 30px -18px rgb(63 50 140 / 0.75);
}
/*
 * Every line, named.
 *
 * The first attempt coloured `h3`, `strong` and `p` — and the strip's
 * headline is a div, its price line a span. Both kept the ink they had on
 * white and turned into near-black text on a violet ground, which is the
 * worst contrast in the product on the one panel that is trying to sell
 * something. Class by class now, so nothing can inherit the old colour.
 */
#airanksuite-root .ars-upsell,
#airanksuite-root .ars-upsell-title,
#airanksuite-root .ars-upsell h3,
#airanksuite-root .ars-upsell strong { color: var(--ars-on-brand); }
#airanksuite-root .ars-upsell-title { font-size: 16.5px; font-weight: 680; letter-spacing: 0; }
#airanksuite-root .ars-upsell-kicker {
	color: rgb(255 255 255 / 0.74);
	font-weight: 700;
	letter-spacing: 0.1em;
}
#airanksuite-root .ars-upsell-text,
#airanksuite-root .ars-upsell p { color: rgb(255 255 255 / 0.86); }
#airanksuite-root .ars-upsell-price { color: rgb(255 255 255 / 0.74); }
#airanksuite-root .ars-upsell-cta { display: grid; gap: 8px; justify-items: end; text-align: end; }
#airanksuite-root .ars-upsell .ars-btn-primary {
	background: var(--ars-on-brand);
	color: var(--ars-brand-tonal-ink);
	box-shadow: 0 2px 10px rgb(24 22 46 / 0.28);
}
#airanksuite-root .ars-upsell .ars-btn-primary:hover:not(:disabled) {
	background: var(--ars-on-brand);
	filter: brightness(0.95);
}

/* ---- Empty states -------------------------------------------------------
   A dashed grey box is the visual language of "nothing here, and nobody
   thought about it". Same surface as a card, a tinted mark, and room to
   breathe — an empty screen is the first screen a new customer sees. */
#airanksuite-root .ars-empty-band {
	padding: 26px 20px;
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-r-lg);
	background: var(--ars-surface-2);
	color: var(--ars-ink-2);
	font-size: 13px;
	line-height: 1.6;
}
#airanksuite-root .ars-empty {
	padding: 30px 20px;
	border-radius: var(--ars-r-lg);
}

/* ---- Charts -------------------------------------------------------------
   The series colour is already the brand; what was missing is the ground
   under the line. A soft fade of the same hue turns a wire into a reading. */
#airanksuite-root .ars-chart-area,
#airanksuite-root .recharts-area-area {
	opacity: 0.9;
}
#airanksuite-root .ars-chart-grid line,
#airanksuite-root .recharts-cartesian-grid line {
	stroke: var(--ars-line-soft);
}

/* ---- Card headers -------------------------------------------------------
   The icon tile is the one place a card can carry the brand without the card
   becoming a coloured object. */
#airanksuite-root .ars-card-icon {
	background: var(--ars-brand-tonal);
	color: var(--ars-brand-tonal-ink);
	border-radius: var(--ars-r-sm);
}
#airanksuite-root .ars-card-title { font-size: 14.5px; font-weight: 660; }

/* ---- The page needs a margin ------------------------------------------
   `.ars-view { padding: 0 !important }
` was written when the app stopped
   painting its own window and handed the ground back to WordPress. It handed
   back the gutter with it: `.wrap` gives 2px on the left, so every card sat
   welded to the admin menu, and every row inside those cards inherited the
   squeeze. Reported four separate times, and each time I adjusted the row
   instead of the page it sits on.

   A symmetric gutter, and the content column gets its padding back. */
.airanksuite-wrap { margin: 12px 24px 0 20px; }
#airanksuite-root .ars-view,
#airanksuite-root main.ars-view { padding: 0 0 32px !important; }

/* Head and rows on the same left margin, so the tick under a heading lines up
   with the heading and not 10px to the left of it. */
#airanksuite-root .ars-card-head { padding: 15px 20px; }
#airanksuite-root .ars-card-body { padding: 18px 20px; }
#airanksuite-root .ars-checklist-item { padding: 14px 20px; }
#airanksuite-root .ars-table th,
#airanksuite-root .ars-table td { padding-inline: 20px; }
#airanksuite-root .ars-scorerow { padding-inline: 20px; }

@media (max-width: 782px) {
	.airanksuite-wrap { margin: 10px 12px 0 10px; }
	#airanksuite-root .ars-card-head,
	#airanksuite-root .ars-card-body,
	#airanksuite-root .ars-checklist-item { padding-inline: 14px; }
	#airanksuite-root .ars-table th,
	#airanksuite-root .ars-table td,
	#airanksuite-root .ars-scorerow { padding-inline: 14px; }
}

/* ---- A chart before it has a history ----------------------------------
   Not an empty box and not a flat line pretending to be a measurement: the
   same space, showing where the number stands or what it is made of. Both
   are readings of data that already exists on day one. */
#airanksuite-root .ars-trend-note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--ars-ink-3);
}

/* Full width, or the card is 200px of chart and 1700px of nothing. A flex
   container inside a grid cell shrinks to its content, and the band widths
   are percentages — so they resolved against almost zero.

   Scoped to .ars-bandscale, not .ars-gauge: the arc gauge wears that class
   too and is 150px wide by design, so this rule used to stretch it across
   the whole card. */
#airanksuite-root .ars-bandscale { padding: 6px 2px 2px; width: 100%; }
#airanksuite-root .ars-gauge-track,
#airanksuite-root .ars-gauge-scale { width: 100%; }
#airanksuite-root .ars-gauge-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
#airanksuite-root .ars-gauge-n {
	font-size: 40px;
	font-weight: 760;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-gauge-of { font-size: 14px; color: var(--ars-ink-3); font-weight: 500; }
#airanksuite-root .ars-gauge-zone {
	margin-inline-start: auto;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-gauge-track {
	position: relative;
	display: flex;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
}
#airanksuite-root .ars-gauge-band { display: block; height: 100%; }
#airanksuite-root .ars-gauge-mark {
	position: absolute;
	top: -4px;
	width: 4px;
	height: 20px;
	margin-inline-start: -2px;
	border-radius: 999px;
	box-shadow: 0 0 0 3px var(--ars-surface);
	transition: left 500ms cubic-bezier(0.2, 0, 0, 1);
}
#airanksuite-root .ars-gauge-scale {
	display: flex;
	margin-top: 7px;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-gauge-scale > span { text-align: center; }

#airanksuite-root .ars-comp { padding: 6px 2px 2px; width: 100%; }
#airanksuite-root .ars-comp-bar {
	display: flex;
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--ars-surface-3);
}
#airanksuite-root .ars-comp-bar > span { display: block; height: 100%; }
#airanksuite-root .ars-comp-bar > span + span { box-shadow: inset 1px 0 0 var(--ars-surface); }
#airanksuite-root .ars-comp-keys { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
#airanksuite-root .ars-comp-key { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12.5px; color: var(--ars-ink-3); }
#airanksuite-root .ars-comp-key i { width: 9px; height: 9px; border-radius: 3px; align-self: center; }
#airanksuite-root .ars-comp-key b {
	font-size: 17px;
	font-weight: 700;
	color: var(--ars-ink);
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}
#airanksuite-root .ars-comp-total { margin: 12px 0 0; font-size: 12px; color: var(--ars-ink-3); }

/* ---- Numbers, set properly -------------------------------------------
   The plugin is full of figures, and a figure that is not set is the fastest
   way to look amateur: mixed weights, no tabular alignment, a slash with a
   space on one side. Tabular numerals everywhere a number can change, tight
   tracking on the big ones, and a scale that is deliberately narrow — four
   sizes, not nine. Restrained, not decorative. */
#airanksuite-root .ars-num,
#airanksuite-root .t-num,
#airanksuite-root .ars-metrics-value,
#airanksuite-root .ars-metric-value,
#airanksuite-root .ars-hero-stat-v,
#airanksuite-root .ars-gauge-n,
#airanksuite-root .ars-comp-key b,
#airanksuite-root .ars-scorerow-score,
#airanksuite-root .ars-kpi-value {
	font-variant-numeric: tabular-nums lining;
	font-feature-settings: 'tnum' 1, 'lnum' 1;
	letter-spacing: 0;
	font-weight: 700;
}
/* A unit or a denominator is not the number. Same colour, lighter, smaller —
   so "1,084" and "30 %" read as one figure each rather than two. */
#airanksuite-root .ars-unit,
#airanksuite-root .ars-metrics-unit,
#airanksuite-root .ars-metric-unit {
	font-weight: 500;
	font-size: 0.62em;
	opacity: 0.62;
	letter-spacing: 0;
	margin-inline-start: 2px;
}

/* ---- One legend for a column of bars ----------------------------------
   A stacked bar is only a reading if the reader knows what the colours
   count. Stated once above the rows rather than seven times inside them,
   and on the page rather than in a tooltip — a tooltip is not an
   explanation, and a phone cannot show one at all. */
#airanksuite-root .ars-legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 0 0 12px;
	font-size: 12px;
	color: var(--ars-ink-3);
}
#airanksuite-root .ars-legend-label { color: var(--ars-ink-2); }
#airanksuite-root .ars-legend-key { display: inline-flex; align-items: center; gap: 6px; }
#airanksuite-root .ars-legend-key i { width: 10px; height: 6px; border-radius: 2px; }

/* ---- The per-page check list -----------------------------------------
   Small corrections, not a redesign: the weight dots get a key, the one
   action per row sits on the row's right edge instead of wherever the text
   above it happened to end, and a failed check carries a faint edge so the
   eye finds the three that matter in a list of fifteen. */
#airanksuite-root .ars-report-legend {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--ars-ink-3);
	white-space: nowrap;
}
#airanksuite-root .ars-report-fix {
	flex: none;
	margin-inline-start: auto;
	align-self: start;
}
#airanksuite-root .ars-report-row {
	position: relative;
	align-items: start;
}
#airanksuite-root .ars-report-row:not(.is-pass) {
	box-shadow: inset 2px 0 0 var(--ars-c-red-ink);
}
#airanksuite-root .ars-report-row.is-pass .ars-report-weight { opacity: 0.45; }

/* ---- The score spread, big enough to read ------------------------------
   92px of box minus a number and a label left about 50px of bar, so the
   difference between 125 pages and 32 pages was a centimetre. Taller, with
   the share under each range, and an empty range drawn as a neutral hairline
   instead of a red stub that reads as "a few bad pages". */
#airanksuite-root .ars-spread {
	height: 148px;
	padding: 12px 14px;
	gap: 10px;
}
#airanksuite-root .ars-spread-col { grid-template-rows: auto 1fr auto auto; gap: 4px; }
#airanksuite-root .ars-spread-n { font-size: 13px; font-weight: 700; color: var(--ars-ink); letter-spacing: 0; }
#airanksuite-root .ars-spread-bar { max-width: 46px; border-radius: var(--ars-r-sm) var(--ars-r-sm) 2px 2px; }
#airanksuite-root .ars-spread-bar.is-empty {
	height: 2px;
	background: var(--ars-border);
	border-radius: 999px;
}
#airanksuite-root .ars-spread-label { font-size: 10.5px; }
#airanksuite-root .ars-spread-share { font-size: 10.5px; color: var(--ars-ink-3); font-weight: 600; }

/* ---- Working, with no percentage to report ----------------------------
   A single request that answers when it is done has no progress to show, and
   a made-up percentage is a lie told with a straight face. The band slides;
   the number is absent because it does not exist. */
#airanksuite-root .ars-progress-track.is-indeterminate {
	margin-top: 14px;
	max-width: 320px;
}
#airanksuite-root .ars-progress-track.is-indeterminate .ars-progress-fill {
	width: 38%;
	animation: airanksuite-progress-slide 1150ms cubic-bezier(0.5, 0, 0.5, 1) infinite,
		airanksuite-progress-stripes 900ms linear infinite;
}
@keyframes airanksuite-progress-slide {
	0%   { transform: translateX(-105%); }
	100% { transform: translateX(275%); }
}
@media (prefers-reduced-motion: reduce) {
	#airanksuite-root .ars-progress-track.is-indeterminate .ars-progress-fill {
		width: 100%;
		animation: none;
		opacity: 0.5;
	}
}

/* ---- No bare brown on a white card ------------------------------------
   The amber ink clears 4.5:1 on the amber tonal, and it is the
   right choice there. As a large value on a white card it is mud — the one
   colour in the palette that does not survive being big. Every status value
   in a stat tile becomes a tonal chip instead: the ink goes back onto the
   background it was measured against, and the card gets a shape rather than
   a discoloured word. */
#airanksuite-root .ars-hero-stat-v.is-warn,
#airanksuite-root .ars-hero-stat-v.is-bad,
#airanksuite-root .ars-hero-stat-v.is-good {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: 0;
}
#airanksuite-root .ars-hero-stat-v.is-warn {
	background: var(--ars-warning-tonal);
	color: var(--ars-warning-ink);
}
#airanksuite-root .ars-hero-stat-v.is-bad {
	background: var(--ars-serious-tonal);
	color: var(--ars-serious-ink);
}
#airanksuite-root .ars-hero-stat-v.is-good {
	background: var(--ars-good-tonal);
	color: var(--ars-good-ink);
}
/* Same rule for the small status words that sit loose in a card. */
#airanksuite-root .ars-status-warn {
	background: var(--ars-warning-tonal);
	color: var(--ars-warning-ink);
	padding: 2px 9px;
	border-radius: 999px;
}

/* ---------- the AI at work, on the dashboard ---------------------------- */
/* Every value here is a token: the design guards refuse a raw hex outside the
   token block, and they are right to — a colour typed in place is a colour
   that stops matching the next time the palette moves. */
.ars-aiwork-head{display:flex;align-items:flex-start;gap:10px;font-size:15px;
  font-weight:600;letter-spacing:-.01em;color:var(--ars-ink)}
.ars-aiwork-dot{width:9px;height:9px;border-radius:99px;flex:none;margin-top:6px;
  background:var(--ars-ink-3)}
.ars-aiwork-head.is-good .ars-aiwork-dot{background:var(--ars-good)}
.ars-aiwork-head.is-warning .ars-aiwork-dot{background:var(--ars-warning)}
/* The pulse is the one piece of motion, and it exists only on the state that
   means work is genuinely in flight. An idle card must look idle. */
.ars-aiwork-head.is-good .ars-aiwork-dot{animation:ars-aiwork-pulse 1.8s ease-in-out infinite}
@keyframes ars-aiwork-pulse{0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.45;transform:scale(.82)}
}
.ars-aiwork-line{min-width:0}
.ars-aiwork-why{margin:0;font-size:13px;line-height:1.55;color:var(--ars-ink-2);max-width:74ch}

.ars-aiwork-bar{height:8px;border-radius:99px;background:var(--ars-canvas);
  border:1px solid var(--ars-border);overflow:hidden}
.ars-aiwork-bar i{display:block;height:100%;border-radius:99px;
  background:var(--ars-brand);transition:width .5s cubic-bezier(.22,1,.36,1)}

/* The lines come from a ring on each cell rather than from the container
   showing through 1px gaps: with three figures in a four-wide row the old way
   left a grey block where the fourth would have been, which reads as a cell
   that failed to load rather than as one that does not exist. */
/* Flex, not grid. A grid row that is not full leaves a block of container
   behind it, and a grey rectangle where a fourth figure would go reads as a
   cell that failed to load. Flex items stretch to fill whatever row they land
   in, so two, three or four figures all end flush. */
.ars-aiwork-figures{display:flex;flex-wrap:wrap;gap:1px;background:var(--ars-border);
  border:1px solid var(--ars-border);border-radius:10px;overflow:hidden}
.ars-aiwork-figures div{flex:1 1 150px;background:var(--ars-surface);padding:12px 14px;
  display:flex;flex-direction:column;gap:3px}
.ars-aiwork-figures span{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ars-ink-3)}
.ars-aiwork-figures strong{font-size:16px;font-weight:680;color:var(--ars-ink);
  font-variant-numeric:tabular-nums}

/* Each figure carries the sentence that says what it counts. Without it,
   "Spent today" answers neither "since when" nor "measured or guessed". */
.ars-aiwork-figures em{font-style:normal;font-size:11.5px;line-height:1.5;color:var(--ars-ink-3);
  max-width:34ch}

/* ---- The artery ---------------------------------------------------------
   One moving line with a stub dropping into every service below it, so the
   picture reads as current going somewhere rather than as a loading bar. It
   moves only while an engine can answer: the .is-live class is the switch, and
   a floor with no key stays completely still. */
.ars-vein{position:relative;height:3px;border-radius:2px;background:var(--ars-border);
  overflow:hidden;margin:2px 0 0}
.ars-floor.is-live .ars-vein{background:var(--ars-brand);
  box-shadow:0 0 14px rgb(34 113 177 / 0.18)}
.ars-vein-flow{position:absolute;inset:0;width:18%;background:var(--ars-brand-tonal);
  transform:translateX(-30%);opacity:0}
.ars-floor.is-live .ars-vein-flow{opacity:1;animation:ars-bus 3.4s linear infinite}
.ars-floor.is-still .ars-vein-flow{animation:none;opacity:.5;transform:none;width:100%}

/* Seven services never divide evenly into a grid, so the grid left one chip
   alone at the end of a row with two thirds of the width empty beside it.
   Wrapping flex lets the last row grow into the space instead: a full-width
   card reads as deliberate, a lone narrow one reads as a mistake. */
.ars-circuits-wrap .ars-circuits{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
.ars-circuits-wrap .ars-circuit{flex:1 1 168px;min-width:0}
.ars-circuit-stem{position:absolute;top:-9px;inset-inline-start:16px;width:2px;height:9px;
  background:var(--ars-border)}
.ars-floor.is-live .ars-circuit.is-live .ars-circuit-stem{background:var(--ars-brand)}
.ars-circuit{margin-top:9px}
.ars-circuit-powers{display:block;margin-top:5px;font-size:11.5px;line-height:1.5;
  color:var(--ars-ink-3)}
/* A dark service still says what it would power, in the same words, one shade
   quieter — the sentence is the reason to connect it. */
.ars-circuit:not(.is-live) .ars-circuit-powers{color:var(--ars-ink-4,var(--ars-ink-3));opacity:.75}

/* The floor without its clockwork: on the dashboard it is one sentence's worth
   of picture. The connections row stays — it is the half people ask for. */
.ars-floor.is-compact{padding:0;border:0;background:none}
.ars-floor.is-compact .ars-floor-body{grid-template-columns:1fr}
.ars-floor.is-compact .ars-circuits{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.ars-floor.is-compact .ars-floor-rail-label{margin-top:14px}

/* Responsive: two columns on a tablet, one on a phone, and the stub moves to
   the start edge so it still points at something. */
@media (max-width:782px){
  .ars-aiwork-figures div{flex:1 1 100%}
  .ars-aiwork-figures em{max-width:none}
  .ars-circuits-wrap .ars-circuit{flex-basis:150px}
}
@media (max-width:600px){
  .ars-circuits-wrap .ars-circuit{flex-basis:100%}
  .ars-circuit-stem{inset-inline-start:12px}
}

@media (prefers-reduced-motion: reduce){
  .ars-aiwork-head .ars-aiwork-dot{animation:none}
  .ars-aiwork-bar i{transition:none}
}

/* ---- A chart may use the whole card -------------------------------------
   The card's 20px gutter is right for text and wrong for a drawing that
   already carries its own axis inset. Six pixels left, so the line still
   clears the card's rounded corner, and the rest goes to the data. The
   legend and the peak pill above it keep the gutter, because those are
   text. */
#airanksuite-root .ars-chart-bleed { margin-inline: -14px; }
#airanksuite-root .ars-chart-bleed > div:first-child { margin-inline: 14px; }
@media (max-width: 600px) {
	#airanksuite-root .ars-chart-bleed { margin-inline: -8px; }
	#airanksuite-root .ars-chart-bleed > div:first-child { margin-inline: 8px; }
}

/* ===========================================================================
   Core's own geometry (0.2.46)
   ---------------------------------------------------------------------------
   The admin app already borrowed WordPress's typeface, its 13px body and its
   hairline. What still gave it away was the furniture: buttons a touch
   rounder and heavier than core's, a secondary button in a lilac that belongs
   to no admin colour scheme, and a second-level tab row drawn as pills.

   Nothing here invents a look. Every value is the one core uses, so the two
   sit together whichever colour scheme and whichever WordPress version is
   running: the accent arrives at runtime from the admin's own primary button
   (see theme.js), and the shapes below are core's.
   ======================================================================== */

#airanksuite-root .ars-btn {
	border-radius: 3px;
	font-weight: 500;
	min-height: 32px;
	padding: 4px 14px;
	line-height: 22px;
	box-shadow: none;
	/* Core's secondary: the accent as text and outline on a near-white
	   field. It reads as a button without competing with the primary. */
	background: var(--ars-wp-button-bg);
	border-color: var(--ars-brand);
	color: var(--ars-brand-ink);
}

#airanksuite-root .ars-btn:hover:not(:disabled) {
	background: #f0f0f1;
	border-color: var(--ars-brand-hover);
	color: var(--ars-brand-hover);
}

/* The ghost is the quiet one, so it keeps the hairline rather than the
   accent: three accent outlines in a row is a toolbar, not a hierarchy. */
#airanksuite-root .ars-btn.ars-btn-ghost {
	background: transparent;
	border-color: var(--ars-border);
	color: var(--ars-ink);
}

#airanksuite-root .ars-btn.ars-btn-ghost:hover:not(:disabled) {
	background: var(--ars-surface-2);
	border-color: var(--ars-wp-field-line);
	color: var(--ars-ink);
}

#airanksuite-root .ars-btn.ars-btn-primary {
	background: var(--ars-brand-fill);
	border-color: var(--ars-brand-fill);
	color: #fff;
}

#airanksuite-root .ars-btn.ars-btn-primary:hover:not(:disabled) {
	background: var(--ars-brand-fill-hover);
	border-color: var(--ars-brand-fill-hover);
	color: #fff;
}

/* Core's focus ring, which is a second outline rather than a glow. */
#airanksuite-root .ars-btn:focus-visible {
	outline: 2px solid var(--ars-brand);
	outline-offset: 1px;
	box-shadow: none;
}

/*
 * Second-level tabs, the way core writes a sub-list: text in the accent, the
 * current one in ink and bold, a hairline under the row. The pill version
 * carried its own border radius, its own fill and its own shadow, which made
 * the row the loudest thing on screens whose content was a table.
 */
#airanksuite-root .ars-tabbar {
	border-bottom: 1px solid var(--ars-wp-line);
	padding-bottom: 0;
	gap: 0;
}
#airanksuite-root .ars-tab {
	appearance: none;
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	position: relative;
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	margin-bottom: -1px;
	padding: 7px 12px;
	font-weight: 400;
	color: var(--ars-brand-ink);
	box-shadow: none;
}

#airanksuite-root .ars-tab:hover:not(.is-active) {
	background: var(--ars-surface-2);
	color: var(--ars-brand-hover);
}
#airanksuite-root .ars-tab.is-active {
	border-bottom-color: var(--ars-wp-canvas);
	border: 0;
	background: var(--ars-surface);
	border-color: var(--ars-wp-line);
	border-bottom: 1px solid var(--ars-surface);
	color: var(--ars-ink);
	font-weight: 600;
}

/* The card header is core's postbox header: the title at 14px/600 in ink,
   the rule under it, and nothing tinted behind it. */
#airanksuite-root .ars-card {
	border-radius: 8px;
}
#airanksuite-root .ars-card-head .t-title {
	letter-spacing: -0.005em;
	font-size: 14px;
	font-weight: 600;
	color: var(--ars-ink);
}

/* ===========================================================================
   The classic WordPress screen (0.2.49)
   ---------------------------------------------------------------------------
   Core's own measurements for the four things a person touches on every
   settings screen: the field, its label, its description, and the table of
   results. They are not approximations; each value is the one WordPress 6.4
   and 7.x compute, read off a core screen. Everything is expressed against
   the plugin's tokens where a token exists, so the dark theme keeps working.
   ======================================================================== */

/* --- Fields. Core is 40px tall, 2px round, 14px type, grey hairline. ----- */
#airanksuite-root input[type='text'],
#airanksuite-root input[type='url'],
#airanksuite-root input[type='email'],
#airanksuite-root input[type='number'],
#airanksuite-root input[type='search'],
#airanksuite-root input[type='password'],
#airanksuite-root select,
#airanksuite-root textarea {
	border: 1px solid var(--ars-wp-field-line);
	border-radius: 2px;
	background: var(--ars-surface);
	color: var(--ars-ink);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: none;
}

#airanksuite-root input[type='text'],
#airanksuite-root input[type='url'],
#airanksuite-root input[type='email'],
#airanksuite-root input[type='number'],
#airanksuite-root input[type='search'],
#airanksuite-root input[type='password'],
#airanksuite-root select {
	min-height: 40px;
	padding: 0 12px;
}

#airanksuite-root select {
	padding-inline-end: 24px;
}
#airanksuite-root textarea {
	line-height: 1.6;
	padding: 8px 12px;
}

/* Core's focus is a thicker border plus a ring of the same colour, which is
   what tells a keyboard user where they are. */
#airanksuite-root input:focus,
#airanksuite-root select:focus,
#airanksuite-root textarea:focus {
	border-color: var(--ars-brand);
	box-shadow: 0 0 0 1px var(--ars-brand);
	outline: 2px solid transparent;
}

/* --- The label above a field, and the description under it. ------------- */
#airanksuite-root .ars-field-label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ars-ink);
}

#airanksuite-root .ars-hint {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ars-ink-2);
}

/* --- Tables read as a WordPress list table: a hairline frame, a quiet
       header with a rule under it, and alternating rows. ----------------- */
#airanksuite-root .ars-table {
	border-collapse: collapse;
	width: 100%;
	background: var(--ars-surface);
}

#airanksuite-root .ars-table thead th {
	background: transparent;
	border-bottom: 1px solid var(--ars-wp-line);
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ars-ink);
	text-align: start;
}

#airanksuite-root .ars-table td {
	border-bottom: 1px solid var(--ars-wp-line);
	padding: 9px 10px;
	font-size: 13px;
	color: var(--ars-ink);
}

#airanksuite-root .ars-table tbody tr:nth-child(odd) {
	background: var(--ars-surface-2);
}

#airanksuite-root .ars-table tbody tr:hover {
	background: var(--ars-brand-tonal);
}
#airanksuite-root .ars-table tbody tr:last-child td {
	border-bottom: 0;
}

#airanksuite-root .ars-table-wrap {
	border: 1px solid var(--ars-wp-line);
	border-radius: 0;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	overflow: auto;
}

/* --- The notice. Core's shape exactly: no corner radius, no shadow, a
       four pixel edge, and a tint mixed from that edge so the dark theme
       gets a dark tint instead of a bright one. ------------------------- */
#airanksuite-root .ars-notice {
	border-radius: 0;
	box-shadow: none;
	border: 1px solid var(--ars-wp-line);
	border-inline-start-width: 4px;
	padding: 8px 12px;
	margin: 0;
}

#airanksuite-root .ars-notice.is-warning {
	background: color-mix(in srgb, var(--ars-warning) 8%, var(--ars-surface));
}

#airanksuite-root .ars-notice.is-error {
	background: color-mix(in srgb, var(--ars-serious) 8%, var(--ars-surface));
}

#airanksuite-root .ars-notice.is-success {
	background: color-mix(in srgb, var(--ars-good) 8%, var(--ars-surface));
}

#airanksuite-root .ars-notice.is-info {
	background: color-mix(in srgb, var(--ars-brand) 7%, var(--ars-surface));
}

#airanksuite-root .ars-notice p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}