/* Sneaky component anatomy (consolidation Phase D).
 *
 * Loaded on Sneaky requests only (inc/sneaky-components.php), after the shell.
 * Consolidation, not redesign: the existing families (sxl hubs, Helper
 * directory and profile, Learn, detail pages) keep their markup and
 * behaviour; this file gives them one hero, one card, one filter bar, one
 * field and one empty state, all from design-system.css tokens.
 *
 * Layout inside the hubs follows the space the main column actually has
 * (container queries), not the viewport: the 280px sidebar made viewport
 * breakpoints wrong between 981 and 1200px.
 *
 *  1. Hero      2. Section heads   3. Cards      4. Grids (containers)
 *  5. Filter bar and fields        6. Empty state
 *  7. Hub trio  8. Helper directory   9. Detail pages
 */

/* 1. Hero ------------------------------------------------------------------
 * Canonical: pale card (kicker pill, ink H1, one lead, ≤1 primary action);
 * hubs add the dark contextual panel; detail pages use the compact variant. */
body.sh-shell :is(.sxl-hero, .sh-helper-directory-hero, .sh-detail-hero) {
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius-card);
	box-shadow: var(--sh-shadow-card);
}
body.sh-shell :is(.sh-helper-directory-hero, .sh-detail-hero) {
	background: var(--sh-hero-bg);
	color: var(--sh-ink);
}
body.sh-shell :is(.sxl-kicker, .sh-detail-kicker, .sh-helper-directory-hero .sh-helper-directory-kicker) {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	padding: 6px 10px;
	border-radius: var(--sh-radius-pill);
	background: var(--sh-sky);
	color: var(--sh-on-sky);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
}

/* Hub hero: keep copy and contextual panel side by side down to 768px (it
 * used to stack at 980, so the hero alone filled the first tablet screen). */
@media (min-width: 768px) and (max-width: 980px) {
	body.sh-shell .sxl-hero { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); }
}
@media (max-width: 767px) {
	body.sh-shell .sxl-hero-panel { gap: 8px; padding: 16px 18px; }
	body.sh-shell .sxl-hero-panel strong { font-size: 20px; }
}

/* Detail hero (exercise, food; assessment banner below). */
body.sh-shell .sh-detail-hero {
	display: grid;
	gap: 8px;
	box-sizing: border-box;
	width: min(var(--sh-width), 100%);
	margin: 22px auto 20px;
	padding: clamp(18px, 3vw, 30px);
}
body.sh-shell .sh-detail-hero h1 {
	max-width: 30ch;
	margin: 2px 0 0;
	color: var(--sh-ink);
	font-size: clamp(30px, 4.2vw, 50px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: 0;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
body.sh-shell .sh-detail-hero.is-long-title h1 {
	max-width: 46ch;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.16;
}
@media (max-width: 767px) {
	body.sh-shell .sh-detail-hero.is-long-title h1 { font-size: 19px; line-height: 1.24; }
}
body.sh-shell .sh-detail-hero p { margin: 0; color: var(--sh-copy); font-size: 15px; line-height: 1.5; }

/* Learn article hero: an image hero is a legitimate variant (articles carry
 * real featured images); only its frame joins the token system. */
body.sh-shell.single-post .single-hub-hero {
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius-card);
	box-shadow: var(--sh-shadow-card);
}

/* 2. Section heads --------------------------------------------------------- */
body.sh-shell :is(.sxl-section-head, .sh-helper-directory-results-heading) :is(h2, h3) {
	color: var(--sh-ink);
	font-size: clamp(21px, 2.2vw, 24px);
	font-weight: 900;
	line-height: 1.12;
}

/* 3. Cards -----------------------------------------------------------------
 * One anatomy: optional media, kicker, title, ≤2-line summary, meta row,
 * footer actions. Legitimate variants keep their own content (Helper
 * portrait + actions, exercise thumbnail + levels, food macro row, article
 * Helper byline, assessment time/what it measures). */
body.sh-shell :is(.sxl-card > a, .sxl-support-card, .sneaky-blog-card, .single-hub-card, .is-helper-directory #ai-pros-grid .ai-pro-card, .sxl-ai-section #ai-pros-grid .ai-pro-card) {
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius-card);
	background: #fff;
	box-shadow: var(--sh-shadow-card);
}
body.sh-shell .sneaky-blog-card { overflow: hidden; }
body.sh-shell :is(.sxl-card > a, .sxl-support-card, .single-hub-card, .sneaky-blog-card):hover {
	border-color: var(--sh-teal);
	box-shadow: var(--sh-shadow-lift);
}
body.sh-shell :is(.sxl-card > a, .sxl-support-card):focus-visible { outline: 3px solid var(--sh-focus); outline-offset: 3px; }
body.sh-shell :is(.sxl-card-body strong, .sxl-support-body strong, .sneaky-blog-card-title) {
	color: var(--sh-ink);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
/* Very long record names (USDA foods run to 170 characters) stay scannable;
 * the full name is on the detail page and in the link text. */
body.sh-shell :is(.sxl-card-body strong, .sxl-support-body strong) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
body.sh-shell :is(.sxl-card-meta) { border-top-color: var(--sh-line); }

/* 4. Grids follow their container ------------------------------------------ */
body.sh-shell .sxl-main { container: sxl-main / inline-size; }
body.sh-shell :is(.sxl-section, .sxl-after > section) { container: sxl-section / inline-size; }
body.sh-shell .sxl-main .sxl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container sxl-main (max-width: 699px) { body.sh-shell .sxl-main .sxl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container sxl-main (max-width: 459px) { body.sh-shell .sxl-main .sxl-grid { grid-template-columns: minmax(0, 1fr); } }
/* Wide sections keep each hub's own column count (Assess 4, Train/Eat 3 support
 * cards); food and Helper rows show four wherever each card still gets ≥250px. */
body.sh-shell .sxl-section .sxl-support-grid.sxl-food-grid,
body.sh-shell .sxl-ai-section #ai-pros-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container sxl-section (max-width: 1039px) {
	body.sh-shell .sxl-section .sxl-support-grid.sxl-food-grid,
	body.sh-shell .sxl-ai-section #ai-pros-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container sxl-section (max-width: 819px) {
	body.sh-shell .sxl-section .sxl-support-grid,
	body.sh-shell .sxl-section .sxl-support-grid.sxl-food-grid,
	body.sh-shell .sxl-ai-section #ai-pros-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sxl-section (max-width: 519px) {
	body.sh-shell .sxl-section .sxl-support-grid,
	body.sh-shell .sxl-section .sxl-support-grid.sxl-food-grid,
	body.sh-shell .sxl-ai-section #ai-pros-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 5. Filter bar and fields ------------------------------------------------
 * One bar: search first, up to three selects, Clear as a secondary action.
 * Fluid by the bar's real width; never fixed column minimums. */
body.sh-shell .sxl-main .sxl-search {
	grid-template-columns: minmax(0, 2fr) repeat(var(--sxl-filter-selects, 3), minmax(0, 1fr)) auto;
	align-items: end;
}
body.sh-shell .sxl-main .sxl-eat-search { --sxl-filter-selects: 1; }
body.sh-shell .sxl-main .sxl-assess-search { --sxl-filter-selects: 2; }
/* Narrower main column: search on its own row, then the selects share
 * whatever the Clear action leaves (a flex row, so no empty grid tracks). */
@container sxl-main (max-width: 819px) {
	body.sh-shell .sxl-main .sxl-search { display: flex; flex-wrap: wrap; }
	body.sh-shell .sxl-main .sxl-search > * { flex: 1 1 170px; }
	body.sh-shell .sxl-main .sxl-search > .sxl-search-field { flex-basis: 100%; }
	body.sh-shell .sxl-main .sxl-search > button { flex: 0 0 auto; }
}
@container sxl-main (max-width: 459px) {
	body.sh-shell .sxl-main .sxl-search > * { flex-basis: 100%; }
	body.sh-shell .sxl-main .sxl-search > button { flex: 1 1 100%; width: 100%; }
}
body.sh-shell :is(.sxl-field input, .sxl-field select, .sh-helper-directory-search input, .sneaky-blog-controls :is(input, select), .sh-search-form input[type=search]) {
	box-sizing: border-box;
	min-height: var(--sh-control-h);
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius-control);
	background-color: #fff;
	color: var(--sh-ink);
}
body.sh-shell .sxl-field select { padding-right: 30px; text-overflow: ellipsis; }
/* Clear is secondary: outline teal, never a coloured pill competing with results. */
body.sh-shell .sxl-search > button {
	min-height: var(--sh-control-h);
	border: 1px solid var(--sh-teal);
	background: #fff;
	color: var(--sh-teal);
	box-shadow: none;
}
body.sh-shell .sxl-search > button:hover { background: var(--sh-sky-soft); color: var(--sh-teal-dark); transform: none; box-shadow: none; }
/* Phones: 16px controls (iOS zooms on focus below 16px). */
@media (max-width: 767px) {
	body.sh-shell :is(.sxl-field input, .sxl-field select, .sh-helper-directory-search input, .sneaky-blog-controls :is(input, select), .sh-search-form input[type=search]) { font-size: 16px; }
	/* The control stays 16px (that is what iOS checks); long hints fit at 14px. */
	body.sh-shell :is(.sxl-field input, .sh-helper-directory-search input, .sneaky-blog-controls input, .sh-search-form input[type=search])::placeholder { font-size: 14px; }
}

/* 6. Empty state: what happened, one suggestion, one action. */
body.sh-shell :is(.sxl-empty, .sh-helper-directory-empty, .sneaky-blog-empty, .sh-empty) {
	box-sizing: border-box;
	padding: clamp(22px, 4vw, 34px);
	border: 1px dashed var(--sh-line);
	border-radius: var(--sh-radius-card);
	background: var(--sh-surface-soft);
	color: var(--sh-copy);
	text-align: center;
}
body.sh-shell :is(.sxl-empty, .sh-helper-directory-empty, .sneaky-blog-empty, .sh-empty) strong { display: block; color: var(--sh-ink); font-size: 18px; font-weight: 900; }

/* 7. Hub trio: one width, one frame -----------------------------------------
 * Train and Eat used calc(100vw - 32px) and hung 40px out of the content box
 * at 1440 while Assess fitted; the three are now the same width. */
body.sh-shell .sxl-wrap { box-sizing: border-box; width: min(var(--sh-width), 100%); margin-left: auto; margin-right: auto; }
body.sh-shell :is(.sxl-hero, .sxl-layout, .sxl-section, .sxl-side-box) { border-color: var(--sh-line); border-radius: var(--sh-radius-card); }

/* 8. Helper directory -----------------------------------------------------
 * The directory hero joins the canonical pale hero; the legacy category
 * carousel duplicated the category chips (same taxonomy, same in-place
 * filter, competing show/hide state) and is not shown on the directory
 * landing — category pages keep it as "Browse other categories". */
body.sh-shell .sh-helper-directory-hero { padding: clamp(22px, 4vw, 38px); text-align: left; }
body.sh-shell .sh-helper-directory-hero :is(h1, h2) {
	margin: 8px 0 10px;
	color: var(--sh-ink);
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 900;
	line-height: 1;
}
body.sh-shell .sh-helper-directory-hero > p { max-width: 64ch; color: var(--sh-copy); font-size: 15px; line-height: 1.55; }
body.sh-shell .sh-helper-directory-orientation { margin-top: 20px; }
body.sh-shell .sh-helper-directory-orientation span {
	border: 1px solid var(--sh-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.82);
	color: var(--sh-copy);
}
body.sh-shell .sh-helper-directory-orientation strong { color: var(--sh-ink); }
body.sh-shell :is(.sh-helper-directory-controls, .sh-helper-directory-team) { border-radius: var(--sh-radius-card); }
body.sh-shell .sh-helper-directory-controls { border-color: var(--sh-line); box-shadow: var(--sh-shadow-card); }
@media (min-width: 768px) {
	body.sh-shell .sh-helper-directory-filters { flex-wrap: wrap; overflow-x: visible; }
}
body.sh-shell #ai-pro-listing.is-helper-directory > :is(#ai-categories-title-bar, #ai-categories) { display: none !important; }
body.sh-shell .google-login-wrap { box-sizing: border-box; width: min(var(--sh-width), calc(100% - 32px)); margin-left: auto; margin-right: auto; }
/* Helper cards: three columns only where a card gets ≥300px. */
body.sh-shell #ai-pro-listing.is-helper-directory { container: sh-directory / inline-size; }
@container sh-directory (max-width: 1019px) {
	body.sh-shell .is-helper-directory #ai-pros-grid:not(.slick-initialized) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sh-directory (max-width: 599px) {
	body.sh-shell .is-helper-directory #ai-pros-grid:not(.slick-initialized) { grid-template-columns: minmax(0, 1fr); }
}

/* 9. Detail pages ---------------------------------------------------------
 * The Helper profile is the anchor: breadcrumb, then a hero that names the
 * thing, then main content beside a quiet sidebar. Content is not moved or
 * removed; only the title gains the hero and the frames share tokens. */
body.sh-shell.single-exercise .single-exercise-hub { margin-top: 0; }
body.sh-shell.single-food .sf-grid { box-sizing: border-box; max-width: calc(var(--sh-width) + 40px); }
body.sh-shell.single-food .sh-food-hero { width: min(var(--sh-width), calc(100% - 40px)); }
@media (max-width: 900px) {
	body.sh-shell.single-food .sf-grid { max-width: calc(var(--sh-reading) + 32px); }
	body.sh-shell.single-food .sh-food-hero { width: min(var(--sh-reading), calc(100% - 32px)); }
}
body.sh-shell.single-food .sh-food-hero .nf-food-name { margin-bottom: 0; }

/* Assessment banner → compact detail hero: the Helper illustration becomes a
 * media panel beside an ink title instead of a dimmed background behind it. */
body.sh-shell.single-health-assessment .single-assessment-content > .wp-block-cover.banner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(120px, 34%);
	align-items: stretch;
	min-height: 0 !important;
	padding: 0;
	border: 1px solid var(--sh-line) !important;
	border-radius: var(--sh-radius-card) !important;
	background: var(--sh-hero-bg);
	box-shadow: var(--sh-shadow-card);
	overflow: hidden;
}
body.sh-shell.single-health-assessment .single-assessment-content > .wp-block-cover.banner > .wp-block-cover__background { display: none; }
body.sh-shell.single-health-assessment .single-assessment-content > .wp-block-cover.banner > .wp-block-cover__image-background {
	position: static !important;
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	height: 100%;
	min-height: 140px;
	object-fit: cover;
}
body.sh-shell.single-health-assessment .single-assessment-content > .wp-block-cover.banner > .wp-block-cover__inner-container {
	display: grid;
	align-content: center;
	gap: 8px;
	grid-column: 1;
	grid-row: 1;
	width: auto;
	max-width: none;
	padding: clamp(18px, 3vw, 30px);
	color: var(--sh-ink);
}
body.sh-shell.single-health-assessment .single-assessment-content > .wp-block-cover.banner > .wp-block-cover__inner-container::before {
	content: "Health check";
	display: inline-flex;
	width: fit-content;
	padding: 6px 10px;
	border-radius: var(--sh-radius-pill);
	background: var(--sh-sky);
	color: var(--sh-on-sky);
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}
body.sh-shell.single-health-assessment .single-assessment-content > .wp-block-cover.banner h1 {
	margin: 0;
	color: var(--sh-ink) !important;
	font-size: clamp(30px, 4.2vw, 50px) !important;
	font-weight: 900;
	line-height: 1.04;
	text-align: left !important;
}

/* Detail-page Helper grids ("Ask an AI Pro" on exercise and food): fluid columns with a 240px floor.
 * The legacy fixed 4–6 equal columns crushed cards to 200px beside the
 * exercise sidebar. (Which Helpers appear, and whether the wall stays, is
 * Phase E's contextual-journey work; Phase D only fixes the card anatomy.) */
body.sh-shell :is(.ea-ai-pros, .single-food-after) #ai-pros-grid:not(.slick-initialized) {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
	gap: 14px;
}
/* Phones keep the compact two-up Helper card where each still gets ≥160px
 * (actions stacked), so the wall does not double the page; narrower columns
 * fall to one. Phase E decides whether the wall stays at all. */
@media (max-width: 599px) {
	body.sh-shell :is(.ea-ai-pros, .single-food-after) #ai-pros-grid:not(.slick-initialized) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)) !important; gap: 10px; }
}
/* Card actions never exceed the card (width:100% + padding was content-box). */
body.sh-shell .ai-pro-card :is(.sh-helper-card-actions > *, .sh-helper-profile-link, .add-to-chat-button) { box-sizing: border-box; max-width: 100%; }
/* Helper profile "Learn" cards: three only where each gets ≥200px. */
body.sh-shell .ai-pro-profile-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

/* Helper category pages already follow the canonical anatomy (pale hero +
 * count panel, portrait cards, journey sidebar); they join the frame tokens. */
body.sh-shell :is(.ai-tax-hero, .ai-tax-helper-card, .ai-tax-content-card, .ai-tax-side-box) {
	border-color: var(--sh-line);
	border-radius: var(--sh-radius-card);
}

/* Compact Helper card for narrow hub sections (phones): portrait beside the
 * name instead of stacked, summary and categories clamped to two lines (full
 * text stays in the card and its title), actions in one row. Same content,
 * about half the height of the stacked card. */
@container sxl-section (max-width: 519px) {
	body.sh-shell .sxl-ai-section #ai-pros-grid .ai-pro-card { display: flex; flex-direction: column; gap: 8px; height: auto !important; min-height: 0 !important; padding: 14px; text-align: left; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .sh-helper-card-head { display: flex; align-items: center; gap: 12px; text-align: left; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .sh-helper-card-head img { flex: 0 0 56px; width: 56px !important; height: 56px !important; margin: 0 !important; border-radius: 50%; object-fit: cover; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .ai-pro-overlay { position: static !important; display: flex; flex-direction: column; gap: 8px; height: auto !important; padding: 0 !important; opacity: 1 !important; background: transparent !important; text-align: left; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .ai-pro-overlay :is(p, .sh-helper-card-category) { display: -webkit-box; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .sh-helper-card-actions { display: flex; gap: 8px; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .ai-pro-overlay { align-items: stretch !important; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .ai-pro-overlay > * { align-self: stretch; width: 100%; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .ai-pro-overlay :is(p, .sh-helper-card-category) { text-align: left !important; }
	body.sh-shell .sxl-ai-section #ai-pros-grid .sh-helper-card-actions > :is(a, button) {
		display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center;
		min-height: 42px; margin: 0; padding: 8px 12px; border: 1px solid var(--sh-teal); border-radius: var(--sh-radius-pill);
		font-size: 14px; font-weight: 900; line-height: 1.1; white-space: nowrap; text-decoration: none; box-shadow: none;
	}
	body.sh-shell .sxl-ai-section #ai-pros-grid .sh-helper-card-actions > a { background: var(--sh-action); color: var(--sh-on-action); }
	body.sh-shell .sxl-ai-section #ai-pros-grid .sh-helper-card-actions > button { background: #fff; color: var(--sh-teal); }
}
body.sh-shell .sxl-ai-section .google-login-wrap { width: auto; margin-left: 0; margin-right: 0; }
body.sh-shell.single-health-assessment .single-assessment-content > .wp-block-cover.banner > .wp-block-cover__inner-container > * { justify-self: stretch; width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
/* style.css sizes the food title with !important; the hero steps must match it to apply. */
body.sh-shell.single-food .sh-food-hero .nf-food-name { font-size: clamp(30px, 4.2vw, 50px) !important; line-height: 1.04 !important; }
body.sh-shell.single-food .sh-food-hero.is-long-title .nf-food-name { font-size: clamp(22px, 2.6vw, 32px) !important; line-height: 1.16 !important; }
@media (max-width: 767px) {
	body.sh-shell.single-food .sh-food-hero.is-long-title .nf-food-name { font-size: 19px !important; line-height: 1.24 !important; }
}

/* 10. Next step (consolidation Phase E) --------------------------------------
 * One restrained next-step system: ≤1 primary (teal pill) and ≤2 secondary
 * (text links), optional one-line context and a truthful note. "block" sits
 * under a result or after an article; "inline" lives inside a detail hero. */
body.sh-shell .sh-next { box-sizing: border-box; display: grid; gap: 10px; color: var(--sh-ink); }
body.sh-shell .sh-next--block {
	margin: 18px 0;
	padding: clamp(16px, 2.6vw, 22px);
	border: 1px solid var(--sh-line);
	border-left: 4px solid var(--sh-teal);
	border-radius: var(--sh-radius-card);
	background: var(--sh-surface-soft);
}
body.sh-shell .sh-next--inline { margin-top: 10px; }
body.sh-shell .sh-next-head { display: grid; gap: 6px; }
body.sh-shell .sh-next-kicker {
	display: inline-flex; width: fit-content; padding: 6px 10px;
	border-radius: var(--sh-radius-pill); background: var(--sh-sky); color: var(--sh-on-sky);
	font-size: 12px; font-weight: 900; line-height: 1;
}
body.sh-shell .sh-next-context { margin: 0; color: var(--sh-copy); font-size: 15px; line-height: 1.5; }
body.sh-shell .sh-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
body.sh-shell .sh-next-primary {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--sh-control-h); padding: 10px 20px;
	border-radius: var(--sh-radius-pill); background: var(--sh-action); color: var(--sh-on-action) !important;
	font-size: 15px; font-weight: 900; line-height: 1.1; text-decoration: none !important;
}
body.sh-shell .sh-next-primary:hover { background: var(--sh-action-hover); }
body.sh-shell .sh-next-secondary { display: flex; flex-wrap: wrap; gap: 6px 18px; }
body.sh-shell .sh-next-secondary a {
	display: inline-flex; align-items: center; min-height: 32px;
	color: var(--sh-teal) !important; font-size: 15px; font-weight: 800;
	text-decoration: underline !important; text-underline-offset: 3px;
}
body.sh-shell :is(.sh-next-primary, .sh-next-secondary a):focus-visible { outline: 3px solid var(--sh-focus); outline-offset: 3px; }
body.sh-shell .sh-next-note { margin: 0; color: var(--sh-muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 480px) {
	body.sh-shell .sh-next--block .sh-next-primary { width: 100%; }
}
/* Hub Helper rows: four Helpers of the hub's own category plus "Browse all" — no wall. */
body.sh-shell .sxl-ai-section #ai-pros-grid .ai-pro-card:nth-child(n+5) { display: none !important; }
/* Assessment results: the result container is a flex column that lifts the result
 * panel above the recalculation form (order -2); the next step follows the result. */
/* (Phase F: result anatomy order lives in section 11.) */

/* 11. Phase F — results, creators, homepage, food basis, missing images ----- */

/* Assessment result anatomy (visual order; markup and maths unchanged):
 * result (value, classification, meaning) → next step → result-derived
 * recommendations → optional AI explanation → recalculation form. The next step
 * stays directly under the meaning (Phase E contract) rather than after the lists. */
body.sh-shell.single-health-assessment [class^="single-test-"] > :where(.bmi-result, .pushups-result, .situps-result, .squats-result, .plank-result, .balance-result, .sit-and-reach-result, .backtouch-result, .resting-hr-result, .walk-result, .water-result, .calipers-result, .girth-result),
body.sh-shell.single-health-assessment .sau-has-result .sau-result-panel { order: -6; }
body.sh-shell.single-health-assessment [class^="single-test-"] > .sh-next { order: -5; }
body.sh-shell.single-health-assessment [class^="single-test-"] > [id$="-recommendations-container"] { order: -4; }
body.sh-shell.single-health-assessment [class^="single-test-"] > [id$="-ai-report-container"] { order: -3; }
body.sh-shell.single-health-assessment [class^="single-test-"]:has(> .reanimate-canonical-result) > form,
body.sh-shell.single-health-assessment .sau-has-result form { order: -2; }

/* Creators: the explanation is an optional disclosure; the task comes first. */
body.sh-shell .sh-how {
	box-sizing: border-box;
	margin: 0 0 18px;
	padding: 0;
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius-card);
	background: var(--sh-surface-soft);
}
body.sh-shell .sh-how > summary {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
	min-height: var(--sh-control-h); padding: 10px 16px;
	cursor: pointer; list-style: none; color: var(--sh-ink); font-weight: 900;
}
body.sh-shell .sh-how > summary::-webkit-details-marker { display: none; }
body.sh-shell .sh-how > summary::after { content: "+"; margin-left: auto; color: var(--sh-teal); font-size: 20px; line-height: 1; }
body.sh-shell .sh-how[open] > summary::after { content: "−"; }
body.sh-shell .sh-how > summary:focus-visible { outline: 3px solid var(--sh-focus); outline-offset: 2px; border-radius: var(--sh-radius-card); }
body.sh-shell .sh-how > :not(summary) { padding: 0 16px 16px; }
body.sh-shell .sh-how-title { font-size: 16px; }
/* Narrow screens: the planner/builder before the link sidebar. */
@media (max-width: 980px) {
	body.sh-shell :is(.rrc-page-layout, .rep-page-layout) { display: flex; flex-direction: column; }
	body.sh-shell :is(.rrc-page-sidebar, .rep-page-sidebar) { order: 2; }
}

/* Homepage joins the shell width (it hung 40px outside the content box at 1280/1440). */
body.sh-shell .shp-home { box-sizing: border-box; width: min(var(--sh-width), 100%); margin-left: auto; margin-right: auto; }

/* Food: the basis is stated where the numbers are. */
body.sh-shell.single-food .fa-basis-note {
	margin: 0 0 16px; padding: 10px 14px;
	border: 1px solid var(--sh-line); border-left: 4px solid var(--sh-teal); border-radius: 10px;
	background: var(--sh-surface-soft); color: var(--sh-ink); font-size: 15px; line-height: 1.45;
}
body.sh-shell.single-food .fa-article caption.fa-basis-caption {
	caption-side: top; padding: 0 0 8px; text-align: left;
	color: var(--sh-ink); font-size: 14px; font-weight: 900;
}

/* Missing images (local uploads that 404, blocked remote files): an intentional image-less surface, never a broken icon. */
body.sh-shell .sh-img-missing { background: var(--sh-hero-bg) !important; }
body.sh-shell .sh-img-missing > img.sh-img-broken { display: none !important; }
body.sh-shell.single-post .single-hub-hero.sh-img-missing { background: var(--sh-panel-bg) !important; }

/* 12. Phase F accessibility: primary controls reach 44px. */
body.sh-shell :is(.rghp-assessment-link, .nf-qty-btn, .sneaky-blog-pagination button) { box-sizing: border-box; min-height: 44px; min-width: 44px; }
body.sh-shell .rghp-assessment-link { display: inline-flex; align-items: center; justify-content: center; }

/* 13. Phase F creators on phones: the hero side panel shrinks to its label and link so the task starts sooner (nothing removed). */
@media (max-width: 767px) {
	body.sh-shell :is(.rrc-page-hero-card, .rep-page-hero-card) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 18px !important; }
	body.sh-shell :is(.rrc-page-hero-card, .rep-page-hero-card) :is(strong, p) { display: none; }
}

/* 14. Phase F generated eating plan: canonical action colour (sky behind white text failed contrast); the summary tiles repeated the hero figures. */
body.sh-shell .rep-view-action-button { background: var(--sh-action) !important; border-color: var(--sh-action) !important; color: var(--sh-on-action) !important; }
body.sh-shell .rep-view-action-button:hover { background: var(--sh-action-hover) !important; }
body.sh-shell .rep-view-summary { display: none; }