/**
 * Personas — the wizard step, the persona cards, the menu-bar lens, the folded
 * pill and the Home layer. Classes only, tokens only; JS hooks are data-aieo-*.
 *
 * The design brief is DESIGN-2026-09-03-PERSONAS-AESTHETICS.md §3: every class
 * here is named there. Quiet surfaces, one accent: hairline borders, no zebra,
 * no shadow deeper than a rule, 120 ms transitions. Colour is reserved for
 * state and for the persona's own edge bar.
 *
 * ⚠️ wp-admin is not our page. Anything that has to beat core's forms.css is
 * restated under `.wp-core-ui` (0,2,0) — the specificity lesson the control
 * layer paid for. Nothing here paints a bare `input`.
 *
 * @since 11.1.12
 */

/* ── The persona colour, one custom property per code ────────────────── */
/* Fallbacks restate the group accents the tokens resolve to (tokens.css). */
[data-persona="owner"]      { --aieo-persona-current: var(--aieo-persona-owner, #8C1B14); }
[data-persona="growth"]     { --aieo-persona-current: var(--aieo-persona-growth, #377A0A); }
[data-persona="content"]    { --aieo-persona-current: var(--aieo-persona-content, #C8420E); }
[data-persona="catalogue"]  { --aieo-persona-current: var(--aieo-persona-catalogue, #0A7591); }
[data-persona="operations"] { --aieo-persona-current: var(--aieo-persona-operations, #0F4FB3); }
[data-persona="tech"]       { --aieo-persona-current: var(--aieo-persona-tech, #FEAC03); }

/* ── The count: one typographic element, used in four places ─────────── */
.aieo-count {
	font-size: var(--aieo-count-fs, 12.5px);
	font-weight: var(--aieo-count-fw, 600);
	color: var(--aieo-muted-fg, #71717a);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ── The wizard: a horizontal stepper above a full-width panel ────────
 *
 * `.aieo-dmm-section.aieo-wizard`, two classes on purpose: the shared admin
 * sheet paints every `.aieo-dmm-section` as a wrapping flex box, and a bare
 * `.aieo-wizard` lost to it (measured: the box computed `display: flex` and
 * the panel wrapped UNDER the rail on every step but the first). The same
 * lesson as the table header alignment: a bare class cannot beat wp-admin
 * chrome; win on class count, never on load order.
 *
 * The rail is a ROW of numbered step buttons (operator, 2026-09-03), one after
 * the other, and the panel takes the whole width beneath it. */
.aieo-dmm-section.aieo-wizard {
	display: block;
}
/* The stepper, as the Rooster Panel draws its welcome: a centred single line
   of bubbles and short labels joined by short rules; done is green with a
   tick, the current bubble is filled, the rest are numbered and quiet. */
.aieo-dmm-section.aieo-wizard .aieo-wizard__rail {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin: 0 0 28px;
	padding: 0;
	white-space: nowrap;
}
.aieo-wizard__step { display: flex; align-items: center; }
.aieo-wizard__step + .aieo-wizard__step::before {
	content: "";
	width: 14px;
	height: 2px;
	margin: 0 2px;
	background: var(--aieo-border, #ececee);
	flex: none;
	border-radius: 2px;
}
.aieo-wizard__step.is-done + .aieo-wizard__step::before { background: var(--aieo-success, #22c55e); }
.aieo-wizard__step a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 2px;
	border-radius: 999px;
	color: var(--aieo-muted-fg, #71717a);
	text-decoration: none;
	font-size: var(--aieo-text-2xs, 11px);
	font-weight: 500;
	line-height: 1.2;
	transition: color 120ms ease;
}
.aieo-wizard__step a:hover { color: var(--aieo-foreground, #09090b); }
.aieo-wizard__step a:focus-visible { outline: 2px solid var(--aieo-primary, #3b82f6); outline-offset: 2px; }
.aieo-wizard__glyph {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--aieo-muted-fg, #71717a);
	background: var(--aieo-muted, #f4f4f5);
	transition: background 120ms ease, color 120ms ease;
}
/* States carry a glyph, never only a colour; never a red anything. */
.aieo-wizard__step.is-done .aieo-wizard__glyph    { color: var(--aieo-success-fg, #fff); background: var(--aieo-success, #22c55e); }
.aieo-wizard__step.is-skipped .aieo-wizard__glyph { color: var(--aieo-tone-muted, #a1a1aa); }
.aieo-wizard__step.is-current a                   { color: var(--aieo-primary, #3b82f6); font-weight: 600; }
.aieo-wizard__step.is-current .aieo-wizard__glyph { color: var(--aieo-primary-fg, #fff); background: var(--aieo-primary, #3b82f6); }
.aieo-wizard__label { min-width: 0; }

/* The step's icon tile, as the Panel's step card: a tinted square holding a
   line glyph of our own, drawn in the step's colour on an 8 % wash of it. */
.aieo-wizard__icon {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--aieo-wizard-tile, var(--aieo-primary, #3b82f6));
	background: color-mix(in srgb, var(--aieo-wizard-tile, var(--aieo-primary, #3b82f6)) 10%, var(--aieo-card, #fff));
	border: 1.2px solid color-mix(in srgb, var(--aieo-wizard-tile, var(--aieo-primary, #3b82f6)) 25%, var(--aieo-card, #fff));
}
@supports not (background: color-mix(in srgb, red 8%, white)) {
	.aieo-wizard__icon { background: var(--aieo-muted, #f4f4f5); border-color: var(--aieo-border, #ececee); }
}
.aieo-wizard__icon svg { width: 26px; height: 26px; display: block; }
/* Each step's tile takes the menu family it belongs to: the person = Home's
   black, the shop = Storefront green, what runs = Tools red, connections =
   Customers blue, what is on = Set Up amber — the rooster's run again. */
[data-aieo-wizard-panel="persona"]     { --aieo-wizard-tile: #212222; }
[data-aieo-wizard-panel="shape"]       { --aieo-wizard-tile: var(--aieo-persona-catalogue, #0A7591); }
[data-aieo-wizard-panel="overlaps"]    { --aieo-wizard-tile: #E8760F; }
[data-aieo-wizard-panel="connections"] { --aieo-wizard-tile: #1F6EE9; }
[data-aieo-wizard-panel="checklist"]   { --aieo-wizard-tile: var(--aieo-persona-tech, #FEAC03); }
.dark [data-aieo-wizard-panel="persona"] { --aieo-wizard-tile: #C9D1DA; }

.aieo-wizard__panel { min-width: 0; width: 100%; }
/* The head is one row: the tile on the left, the title and its lede beside it,
   the two centred on each other. */
.aieo-wizard__head { display: flex; align-items: center; gap: 18px; margin: 0 0 20px; }
.aieo-wizard__heading { min-width: 0; flex: 1 1 auto; }
.aieo-wizard__title { margin: 0 0 4px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.aieo-wizard__lede  { margin: 0; font-size: var(--aieo-text-base, 14px); color: var(--aieo-tone-secondary, #52525b); line-height: 1.5; }
.aieo-wizard__note  { margin: 0 0 12px; font-size: var(--aieo-text-xs, 12px); color: var(--aieo-muted-fg, #71717a); }

/* ── The six cards ───────────────────────────────────────────────────── */
.aieo-persona-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 16px;
}
@media (max-width: 900px) { .aieo-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .aieo-persona-grid { grid-template-columns: minmax(0, 1fr); } }

.aieo-persona-card {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	grid-template-rows: auto auto auto auto;
	column-gap: 10px;
	row-gap: 4px;
	padding: 14px 16px 12px 22px;
	border: 1.2px solid var(--aieo-border, #ececee);
	border-radius: 10px;
	background: var(--aieo-card, #fff);
	color: var(--aieo-card-fg, #09090b);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 120ms ease, background 120ms ease;
}
.aieo-persona-card:hover { border-color: var(--aieo-ring, #a1a1aa); }
/* The native checkbox does the accessibility work — space toggles, the label
   names it, the form posts it — and is drawn out of sight, never display:none,
   or the focus ring below could not exist. */
.aieo-persona-card__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.aieo-persona-card:has(.aieo-persona-card__input:focus-visible) {
	outline: 2px solid var(--aieo-primary, #3b82f6);
	outline-offset: 2px;
}
.aieo-persona-card__edge {
	position: absolute;
	inset: 0 auto 0 0;
	width: 8px;
	background: var(--aieo-persona-current, var(--aieo-border, #ececee));
}
.aieo-persona-card__icon     { grid-row: 1 / span 2; font-size: 20px; line-height: 1.2; }
.aieo-persona-card__eyebrow  { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aieo-muted-fg, #71717a); }
.aieo-persona-card__sentence { font-size: 16px; font-weight: 600; line-height: 1.35; }
.aieo-persona-card__blurb    { grid-column: 2; font-size: var(--aieo-text-xs, 12px); color: var(--aieo-tone-secondary, #52525b); line-height: 1.45; }
.aieo-persona-card__count    { grid-column: 2; margin-top: 4px; }
.aieo-persona-card__tick {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--aieo-primary-fg, #fff);
	background: var(--aieo-primary, #3b82f6);
	opacity: 0;
	transform: scale(.8);
	transition: opacity 120ms ease, transform 120ms ease;
}
/* Selected = wash AND border AND a tick. Colour never carries it alone. */
.aieo-persona-card.is-selected,
.aieo-persona-card:has(.aieo-persona-card__input:checked) {
	border-color: var(--aieo-primary, #3b82f6);
	box-shadow: inset 0 0 0 1px var(--aieo-primary, #3b82f6);
	background: color-mix(in srgb, var(--aieo-persona-current, #1E63CE) 8%, var(--aieo-card, #fff));
}
@supports not (background: color-mix(in srgb, red 8%, white)) {
	.aieo-persona-card.is-selected,
	.aieo-persona-card:has(.aieo-persona-card__input:checked) { background: var(--aieo-primary-soft, #dbeafe); }
}
.aieo-persona-card.is-selected .aieo-persona-card__tick,
.aieo-persona-card:has(.aieo-persona-card__input:checked) .aieo-persona-card__tick { opacity: 1; transform: none; }

.aieo-wizard__default {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--aieo-text-xs, 12px);
	color: var(--aieo-tone-secondary, #52525b);
}

/* ── Chips: the held personas, on the wizard, the lens and Home ───────── */
.aieo-persona-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; }
/* "Showing for:" sits on the chip's own centre line, no margin of its own. */
.aieo-persona-chips .aieo-wizard__note { margin: 0; line-height: 1; }
.aieo-persona-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: var(--aieo-text-xs, 12px);
	font-weight: 600;
	color: var(--aieo-foreground, #09090b);
	border: 1.2px solid color-mix(in srgb, var(--aieo-persona-current, #71717a) 35%, var(--aieo-card, #fff));
	background: color-mix(in srgb, var(--aieo-persona-current, #71717a) 8%, var(--aieo-card, #fff));
}
@supports not (background: color-mix(in srgb, red 8%, white)) {
	.aieo-persona-chip { border-color: var(--aieo-border, #ececee); background: var(--aieo-muted, #f4f4f5); }
}
.aieo-persona-chip__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--aieo-persona-current, #71717a); }

/* ── The first win (§3.7): one card, one button, nothing else ─────────── */
.aieo-firstwin {
	border: 1.2px solid var(--aieo-border, #ececee);
	border-left: 8px solid var(--aieo-persona-current, var(--aieo-primary, #3b82f6));
	border-radius: 10px;
	padding: 16px 20px;
	background: var(--aieo-card, #fff);
}
.aieo-firstwin__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aieo-muted-fg, #71717a); margin-bottom: 4px; }
.aieo-firstwin h4      { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.aieo-firstwin p       { margin: 0 0 12px; font-size: var(--aieo-text-base, 14px); color: var(--aieo-tone-secondary, #52525b); line-height: 1.5; }
.aieo-firstwin__after  { margin: 10px 0 0; font-size: var(--aieo-text-xs, 12px); color: var(--aieo-muted-fg, #71717a); }

/* ── The lens on the pill bar ────────────────────────────────────────── */
.aieo-lens__menu { min-width: 260px; padding: 10px 12px 12px; }
.aieo-lens__head { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aieo-muted-fg, #71717a); margin: 0 0 8px; }
.aieo-lens__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px;
	border-radius: var(--aieo-radius-md, 6px);
	font-size: var(--aieo-text-sm, 13px);
	color: var(--aieo-foreground, #09090b);
	cursor: pointer;
}
.aieo-lens__opt:hover { background: var(--aieo-accent, #f4f4f5); }
.aieo-lens__opt input { margin: 0; }
.aieo-lens__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1.2px solid var(--aieo-border, #ececee); }
.aieo-lens__pill .aieo-count { color: inherit; opacity: .75; margin-left: 4px; }
/* One extra chip before the caret so the pill says who it is showing for. */
.aieo-lens__pill .aieo-persona-chip__dot { display: inline-block; margin-right: 2px; }

/* The folded pill: the same pill component, muted, count inside. */
.aieo-pill--folded > .aieo-dmm-subtab { opacity: .78; }
.aieo-pill--folded .aieo-dmm-subtab-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ── Home with a persona held ────────────────────────────────────────── */
.aieo-home__start {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 20px;
	align-items: center;
	margin: 0 0 16px;
	padding: 16px 20px;
	border: 1.2px solid var(--aieo-border, #ececee);
	border-left: 8px solid var(--aieo-persona-current, var(--aieo-primary, #3b82f6));
	border-radius: 10px;
	background: var(--aieo-card, #fff);
}
.aieo-home__start h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.aieo-home__start p  { margin: 0; font-size: var(--aieo-text-sm, 13px); color: var(--aieo-tone-secondary, #52525b); line-height: 1.5; }
.aieo-home__start .aieo-persona-chips { margin: 0 0 6px; }
@media (max-width: 600px) { .aieo-home__start { grid-template-columns: minmax(0, 1fr); } }

/* "Everything else (N)" — a folded row; nothing looks removed. */
.aieo-fold { margin-top: 16px; }
.aieo-fold > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	border-radius: 20px;
	border: 1.2px solid var(--aieo-border, #ececee);
	background: var(--aieo-card, #fff);
	font-size: var(--aieo-text-sm, 13px);
	font-weight: 600;
	color: var(--aieo-tone-secondary, #52525b);
	margin-bottom: 16px;
	transition: background 120ms ease;
}
.aieo-fold > summary::-webkit-details-marker { display: none; }
.aieo-fold > summary:hover { background: var(--aieo-accent, #f4f4f5); }
.aieo-fold > summary::after { content: "▾"; font-size: 11px; opacity: .7; }
.aieo-fold[open] > summary::after { content: "▴"; }

/* ── Every step INSIDE the panel ─────────────────────────────────────── */
/* Actions as the Panel lays them out: skip on the left, Back and the primary
   on the right, above a hairline. The persona form's footer is the same row. */
.aieo-wizard__nav,
.aieo-wizard__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	padding-top: 20px;
	margin-top: 28px;
	border-top: 1.2px solid var(--aieo-border, #ececee);
}
.aieo-wizard__nav .aieo-wizard__right,
.aieo-wizard__footer .aieo-wizard__right { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.aieo-wizard__skip { font-size: var(--aieo-text-sm, 13px); color: var(--aieo-muted-fg, #71717a); text-decoration: none; }
.aieo-wizard__skip:hover { color: var(--aieo-foreground, #09090b); text-decoration: underline; }
/* A skip that SUBMITS (the persona step) looks exactly like a skip that links. */
.aieo-wizard__skip--button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--aieo-text-sm, 13px); }
.aieo-wizard__default { margin-top: 12px; }

/* The shape questions, in the wizard's own rhythm. */
.aieo-wizard__panel .aieo-gsu-form .aieo-gsu-q { margin-bottom: 16px; }
.aieo-wizard__panel .aieo-gsu-form legend { font-size: var(--aieo-text-base, 14px); }
.aieo-wizard__facts { margin: 0 0 12px; font-size: var(--aieo-text-xs, 12px); color: var(--aieo-muted-fg, #71717a); }

/* Embedded module screens (overlaps cards, the connections directory, the
   checklist stages) drop their page chrome: no card-in-card, no second h2. */
.aieo-wizard__panel .aieo-dmm-section,
.aieo-wizard__panel .aieo-dmm-card { border: 0; padding: 0; margin: 0 0 16px; background: transparent; box-shadow: none; }
.aieo-wizard__panel .aieo-dmm-section > h2,
.aieo-wizard__panel #aieo-card-overlaps-overview { display: none; }
.aieo-wizard__panel .aieo-dmm-card > h3 { margin-top: 0; font-size: 14px; }
.aieo-wizard__panel .aieo-ov-card { margin-bottom: 12px; }
.aieo-wizard__catalogue { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.aieo-wizard__catalogue li { padding: 3px 10px; border-radius: 999px; border: 1.2px solid var(--aieo-border, #ececee); font-size: var(--aieo-text-xs, 12px); color: var(--aieo-tone-secondary, #52525b); }

/* ── The closing screen's recommendations: cards, each a link ─────────── */
.aieo-wizard__recs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	margin: 0 0 8px;
}
.aieo-rec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 14px 20px;
	border: 1.2px solid var(--aieo-border, #ececee);
	border-left: 6px solid var(--aieo-persona-current, var(--aieo-primary, #3b82f6));
	border-radius: 10px;
	background: var(--aieo-card, #fff);
	color: var(--aieo-foreground, #09090b);
	text-decoration: none;
	transition: border-color 120ms ease, background 120ms ease;
}
.aieo-rec:hover { border-color: var(--aieo-ring, #a1a1aa); color: var(--aieo-foreground, #09090b); }
.aieo-rec:focus-visible { outline: 2px solid var(--aieo-primary, #3b82f6); outline-offset: 2px; }
.aieo-rec__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aieo-muted-fg, #71717a); }
.aieo-rec__label   { font-size: 15px; font-weight: 600; line-height: 1.35; }
.aieo-rec__why     { font-size: var(--aieo-text-xs, 12px); color: var(--aieo-tone-secondary, #52525b); line-height: 1.45; }

/* ── Inside the welcome modal ────────────────────────────────────────── */
#aieo-form .aieo-fb-card.is-wizard { width: 82vw; max-width: 1280px; max-height: 90vh; }
.aieo-wizard-host { min-height: 240px; }
.aieo-wizard-host[aria-busy="true"] { opacity: .6; transition: opacity 120ms ease; }
.aieo-wizard--modal .aieo-wizard__title { font-size: 18px; }
@media (max-width: 1100px) {
	.aieo-wizard--modal .aieo-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mobile: let the stepper wrap, as the Panel does ─────────────────── */
@media (max-width: 782px) {
	.aieo-dmm-section.aieo-wizard .aieo-wizard__rail { flex-wrap: wrap; white-space: normal; justify-content: flex-start; row-gap: 8px; }
}