/**
 * Substitution Engine vanilla SSR frontend.
 * Every rule is scoped to the server-selected target root.
 */

/* One token block for the whole vanilla frontend. The page sheets
   (vanilla-cards, vanilla-spoke, vanilla-hub) read these and never redefine
   them, so a palette change lands here and nowhere else. The tokens hang off
   [data-subeng-root] rather than :root because the plugin owns the content
   area, not the theme's page.

   The direction is FitnessVolt editorial: near-black headings in the site's own
   condensed display face, body copy in the system stack, hairlines instead of
   boxes, and one red spent on primary actions and match strength. The teal,
   sky and amber families the v1 artboards carried are gone; the names those
   sheets still read (--subeng-text, --subeng-muted, --subeng-border and the
   rest) are kept below as aliases onto this palette, so a sheet this lane does
   not own degrades to the brand colours rather than to nothing. */
[data-subeng-root] {
    /* Palette: five neutrals and two reds. Literal hex, never an alias of an
       alias: the contrast contract reads these as text and a colour a reader
       actually sees should not need two var() lookups to audit. */
    --subeng-ink: #191c20;
    --subeng-body: #3c434a;
    --subeng-caption: #6b7280;
    --subeng-hairline: #e0e0e0;
    --subeng-page: #ffffff;
    --subeng-band: #f8f9fa;
    --subeng-accent: #dd0119;
    --subeng-accent-deep: #b00114;
    /* The match percentage and nothing else. */
    --subeng-emphasis: #dd0119; /* #ff184e measured 3.82:1 on white; the accent red passes AA */

    /* The red tint ramp, declared once. Two were built: the body map shaded at
       #ea6f79/#f4b5bb and the coverage bars at #ee7d88/#f2a0a8, so the same data
       read at different weights in two places on the same site. These are
       #dd0119 at 55%, 30% and 12% over white, which is the direction's own
       formula, and the page sheets alias their r2/r3/r4 onto them. */
    --subeng-r2: #ec7380;
    --subeng-r3: #f4a7ae;
    --subeng-r4: #fbe4e6;

    /* Type, stated in px. The theme root is responsive, 16px on a desktop and
       15px at 390, so a rem scale drifts under whoever builds against it: a rem
       clamp in vanilla-spoke.css measured 32px where the board said 22px and
       flattened H1 against H2. These are absolute on purpose and are restated
       once at phone width.

       17px body and #3c434a are deliberate, and they are deliberately NOT the
       theme's 16px/--body-fsize and #282828/--body-fcolor. They are what the
       committed direction tabulates, this frontend is a tool the reader works in
       rather than an article they read through, and the extra point buys a
       result card's one explanatory sentence at a size that competes with the
       title above it. A later reader who measures the article beside it will see
       a point of difference: that is the decision, not a drift, and changing it
       is a direction change, not a fix. The same goes for the -0.01em on H1 and
       H2 below, which the theme leaves at normal. */
    --subeng-h1: 40px;
    --subeng-h2: 28px;
    --subeng-h3: 20px;
    --subeng-text-body: 17px;
    --subeng-text-small: 15px;
    --subeng-text-caption: 13px;
    --subeng-measure: 68ch;
    /* One headline measure, not three. The hub clamped its H1 at 24ch, the
       equipment page at 20ch and the progression page at 22ch, so "What your
       equipment can train" hyphen-broke at 1440 while the exemplar article's own
       H1 runs 807px at the same size. 40ch is that measure; the phone column is
       narrower than 40ch anyway, so nothing needs a second value. */
    --subeng-headline-measure: 40ch;
    --subeng-font-heading: "Encode Sans Condensed", "Segoe UI", Arial, sans-serif;
    /* The theme's body family first, the system stack behind it. Hardcoding the
       system stack rendered plugin prose in a different typeface from the article
       prose around it, which is the "embedded third-party widget" verdict at the
       type layer: the live theme sets --body-family to 'Oxygen'. The fallback is
       kept in full so a page rendered outside the theme still costs no request.
       --subeng-font-heading stays literal because it already matches the theme's
       --h1-family exactly and the site loads that face on every page. */
    --subeng-font-body: var(--body-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

    /* 8px base. 8 inside a chip, 16 inside a card, 24 between cards, 48 between
       sections on a phone and 64 on a desktop. */
    --subeng-s1: 8px;
    --subeng-s2: 16px;
    --subeng-s3: 24px;
    --subeng-s6: 48px;
    --subeng-s8: 64px;

    /* 8px on cards and buttons, 4px on media, 999px on the one equipment chip.
       Nothing else is round. */
    --subeng-radius-card: 8px;
    --subeng-radius-media: 4px;
    --subeng-radius-pill: 999px;
    /* The only shadow in the system. It belongs to the featured card and is
       declared here so a second surface cannot invent its own. */
    --subeng-shadow-featured: 0 2px 8px rgb(0 0 0 / 6%);

    /* Near-black, not the ink text colour: the ring has to clear 3:1 against
       the red submit button and the ink only reaches 2.85. */
    --subeng-focus: #0c0a09;
    --subeng-danger-bg: #fff2f2;
    --subeng-danger-border: #c73535;
    /* The amber family is retired, but a warning still has to look unlike a
       note. Ink, not grey: grey on the band read as the same block as every
       hairline-bounded section, and a second red would have been read as a
       second error. Two sheets outside this lane still ask for these two. */
    --subeng-warning-bg: #f8f9fa;
    --subeng-warning-border: #191c20;

    /* Names the sheets this lane does not own still read. They are aliases, so
       the palette above stays the one source of truth. */
    --subeng-bg: #ffffff;
    --subeng-surface: #f8f9fa;
    --subeng-border: #e0e0e0;
    --subeng-border-strong: #c9ccd0;
    --subeng-text: #191c20;
    --subeng-muted: #6b7280;
    --subeng-accent-hover: #b00114;
    --subeng-accent-soft: #fbe4e6;
    /* The palette has no green and the accent means "act on this", so a
       confirmation reads in ink. Red here would have made the swap page's
       "Saved" line look like a failure. One consumer: vanilla-swap.css. */
    --subeng-success: #191c20;
    --subeng-stone-50: #f8f9fa;
    --subeng-stone-100: #f8f9fa;
    --subeng-stone-200: #e0e0e0;
    --subeng-stone-300: #e0e0e0;
    --subeng-stone-400: #6b7280;
    --subeng-stone-500: #6b7280;
    --subeng-stone-600: #3c434a;
    --subeng-stone-700: #3c434a;
    --subeng-stone-900: #191c20;
    --subeng-stone-950: #0c0a09;
    --subeng-font-display: "Encode Sans Condensed", "Segoe UI", Arial, sans-serif;
    --subeng-display-font: "Encode Sans Condensed", "Segoe UI", Arial, sans-serif;
    --subeng-radius-control: 8px;

    width: min(100%, 76rem);
    margin-inline: auto;
    color: var(--subeng-body);
    background: var(--subeng-page);
    font-family: var(--subeng-font-body);
    font-size: var(--subeng-text-body);
    line-height: 1.65;
}

@media (max-width: 30rem) {
    [data-subeng-root] {
        --subeng-h1: 30px;
        --subeng-h2: 22px;
        --subeng-h3: 18px;
        --subeng-text-body: 16px;
        --subeng-text-small: 15px;
        --subeng-text-caption: 13px;
    }
}

[data-subeng-root] h1,
[data-subeng-root] h2,
[data-subeng-root] h3,
[data-subeng-root] h4 {
    color: var(--subeng-ink);
    font-family: var(--subeng-font-heading);
    font-weight: 700;
}

/* Letter-spacing on the two largest sizes only. Below H2 it closes the gaps
   faster than it tightens the word. */
[data-subeng-root] h1,
[data-subeng-root] h2 {
    letter-spacing: -0.01em;
}

[data-subeng-root] h1 {
    font-size: var(--subeng-h1);
    line-height: 1.2;
}

[data-subeng-root] h2 {
    font-size: var(--subeng-h2);
    line-height: 1.25;
}

[data-subeng-root] h3 {
    font-size: var(--subeng-h3);
    line-height: 1.3;
}

[data-subeng-root],
[data-subeng-root] * {
    box-sizing: border-box;
}

[data-subeng-root] .subeng-exercise-media img {
    display: block;
    max-width: min(100%, 22.5rem);
    height: auto;
    margin-block-start: var(--subeng-s1);
    border-radius: var(--subeng-radius-media);
}

[data-subeng-root] .subeng-exercise-media,
[data-subeng-root] .subeng-exercise-instructions,
[data-subeng-root] .subeng-exercise-notes {
    margin-block-start: var(--subeng-s1);
}

[data-subeng-root] .subeng-app-header {
    margin-block-end: var(--subeng-s3);
}

[data-subeng-root] .subeng-breadcrumbs {
    margin-block-end: var(--subeng-s2);
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
}

[data-subeng-root] .subeng-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-subeng-root] .subeng-breadcrumbs li + li::before {
    margin-inline-end: 0.35rem;
    content: "/";
}

[data-subeng-root] .subeng-breadcrumbs a,
[data-subeng-root] .subeng-share-fallback a {
    color: var(--subeng-body);
    text-underline-offset: 0.15em;
}

[data-subeng-root] .subeng-breadcrumbs [aria-current="page"] {
    color: var(--subeng-ink);
    font-weight: 600;
}

/* The negative top margin here used to close the gap under the shell header.
   The page renderers own that region now, so it would pull this line up over
   their closing note instead. */
[data-subeng-root] .subeng-share-fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--subeng-s1);
    margin-block: var(--subeng-s2) var(--subeng-s3);
}

[data-subeng-root] .subeng-share-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--subeng-s1);
}

[data-subeng-root] .subeng-share-action {
    min-height: 44px;
    padding: 0.45rem 0.75rem;
    color: var(--subeng-accent);
    background: var(--subeng-page);
    font-weight: 600;
    cursor: pointer;
}

[data-subeng-root] .subeng-share-action:hover {
    color: var(--subeng-accent-deep);
    border-color: var(--subeng-accent-deep);
}

[data-subeng-root] .subeng-account {
    display: grid;
    gap: var(--subeng-s2);
    margin-block: 0 var(--subeng-s3);
    padding-block: var(--subeng-s2);
    border-block: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-account h3,
[data-subeng-root] .subeng-account h4,
[data-subeng-root] .subeng-account p {
    margin: 0;
}

[data-subeng-root] .subeng-account dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--subeng-s2);
    margin: 0;
}

[data-subeng-root] .subeng-account dt {
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
    font-weight: 500;
}

[data-subeng-root] .subeng-account dd {
    margin: 0.25rem 0 0;
    color: var(--subeng-ink);
    font-family: var(--subeng-font-heading);
    font-size: var(--subeng-h3);
    font-weight: 700;
}

[data-subeng-root] .subeng-account__badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--subeng-s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-subeng-root] .subeng-account__badges li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding-block: var(--subeng-s1);
    border-block-start: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-account__badges span {
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
}

[data-subeng-root] .subeng-account a {
    color: var(--subeng-accent);
    font-weight: 600;
    text-underline-offset: 0.15em;
}

[data-subeng-root] .subeng-app-header h2,
[data-subeng-root] .subeng-results h3,
[data-subeng-root] .subeng-result-card h4 {
    margin-block: 0 var(--subeng-s1);
    color: var(--subeng-ink);
    text-wrap: balance;
}

[data-subeng-root] .subeng-app-header p,
[data-subeng-root] .subeng-help {
    max-width: var(--subeng-measure);
    margin-block: 0.35rem 0;
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
}

[data-subeng-root] .subeng-search-form {
    display: grid;
    gap: var(--subeng-s2);
}

[data-subeng-root] .subeng-field {
    position: relative;
    display: grid;
    gap: 0.45rem;
}

[data-subeng-root] .subeng-search-suggestions {
    position: absolute;
    z-index: 20;
    top: 100%;
    inset-inline: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--subeng-ink);
    border-radius: var(--subeng-radius-card);
    background: var(--subeng-page);
}

[data-subeng-root] .subeng-search-suggestions[hidden] {
    display: none;
}

[data-subeng-root] .subeng-search-suggestion {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    border: 0;
    border-block-end: 1px solid var(--subeng-hairline);
    border-radius: 0;
    color: var(--subeng-ink);
    background: var(--subeng-page);
    text-align: start;
    cursor: pointer;
}

[data-subeng-root] .subeng-search-suggestion:last-child {
    border-block-end: 0;
}

[data-subeng-root] .subeng-search-suggestion:hover,
[data-subeng-root] .subeng-search-suggestion[role="option"][aria-selected="true"] {
    color: var(--subeng-ink);
    background: var(--subeng-band);
}

[data-subeng-root] .subeng-field > label,
[data-subeng-root] .subeng-fieldset legend {
    color: var(--subeng-ink);
    font-size: var(--subeng-text-small);
    font-weight: 700;
}

[data-subeng-root] .subeng-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

[data-subeng-root] input[type="search"],
[data-subeng-root] select,
[data-subeng-root] button {
    min-height: 44px;
    border: 1px solid var(--subeng-ink);
    border-radius: var(--subeng-radius-card);
    font: inherit;
}

[data-subeng-root] input[type="search"],
[data-subeng-root] select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    color: var(--subeng-ink);
    background: var(--subeng-page);
}

/* The design keeps four quick equipment chips visible and folds the rest of
   the list, the training preference and the availability opt-in behind one
   disclosure. render_search_form() builds it; this styles it. */
[data-subeng-root] .subeng-choice-more {
    padding-block-end: var(--subeng-s1);
    border-block-start: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-choice-more > summary {
    color: var(--subeng-ink);
    font-size: var(--subeng-text-small);
    font-weight: 700;
}

[data-subeng-root] .subeng-choice-more__count {
    margin-inline-start: 0.2rem;
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
    font-weight: 500;
}

[data-subeng-root] .subeng-choice-more > .subeng-fieldset,
[data-subeng-root] .subeng-choice-more > .subeng-field {
    margin-block-start: var(--subeng-s1);
}

[data-subeng-root] .subeng-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--subeng-s1);
    margin-block-start: var(--subeng-s1);
}

[data-subeng-root] .subeng-choice {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: var(--subeng-s1);
    padding: 0.45rem 0.25rem;
    color: var(--subeng-ink);
    font-size: var(--subeng-text-small);
    cursor: pointer;
}

[data-subeng-root] .subeng-choice--wide {
    max-width: 55rem;
}

[data-subeng-root] .subeng-choice input {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    accent-color: var(--subeng-accent);
}

[data-subeng-root] .subeng-submit {
    justify-self: start;
    min-width: 10rem;
    min-height: 44px;
    padding: 0 1.4rem;
    border: 0;
    border-radius: var(--subeng-radius-card);
    color: #ffffff;
    background: var(--subeng-accent);
    font-size: var(--subeng-text-small);
    font-weight: 600;
    cursor: pointer;
}

[data-subeng-root] .subeng-submit:hover {
    background: var(--subeng-accent-deep);
}

/* Standalone links and disclosure summaries are tap targets, not prose links.
   Measured at 390px on the hub results page they came in at 21 to 24px, so the
   minimum is stated here once rather than per component. Links that sit inside
   a sentence are deliberately left alone. */
[data-subeng-root] .subeng-directory-card > a,
[data-subeng-root] .subeng-share-fallback > a,
[data-subeng-root] .subeng-result-list-note > a,
[data-subeng-root] .subeng-spoke__methodology > a,
[data-subeng-root] .subeng-field > a,
[data-subeng-root] .subeng-account > p > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
}

[data-subeng-root] .subeng-setup-choices > summary,
[data-subeng-root] .subeng-choice-more > summary {
    min-height: 44px;
    padding-block: 0.6rem;
    cursor: pointer;
}

[data-subeng-root] :focus-visible {
    outline: 3px solid var(--subeng-focus);
    outline-offset: 3px;
}

/* A message is marked by a rule on its leading edge, at the system's one
   non-hairline weight. It was 3px, which is a width nothing else in the system
   uses and which reads as a UI-kit side tab rather than as an editorial rule. */
[data-subeng-root] .subeng-message {
    margin-block: var(--subeng-s2);
    padding: var(--subeng-s2);
    border-inline-start: 2px solid;
    border-radius: var(--subeng-radius-media);
}

[data-subeng-root] .subeng-message h3 {
    margin-block-start: 0;
}

[data-subeng-root] .subeng-message--error {
    border-color: var(--subeng-danger-border);
    background: var(--subeng-danger-bg);
}

[data-subeng-root] .subeng-message--warning {
    border-color: var(--subeng-warning-border);
    background: var(--subeng-warning-bg);
}

[data-subeng-root] .subeng-results {
    margin-block-start: var(--subeng-s3);
}

[data-subeng-root] .subeng-selected,
[data-subeng-root] .subeng-empty,
[data-subeng-root] .subeng-equipment-insight {
    margin-block: var(--subeng-s2);
    padding-block: var(--subeng-s2);
    border-block: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-equipment-insight h3,
[data-subeng-root] .subeng-equipment-insight p {
    margin-block: 0 var(--subeng-s1);
}

[data-subeng-root] .subeng-equipment-insight ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--subeng-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-subeng-root] .subeng-equipment-insight li {
    display: grid;
    gap: 0.15rem;
    padding-block-start: var(--subeng-s1);
    border-block-start: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-equipment-insight span {
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
}

[data-subeng-root] .subeng-progression {
    margin-block: var(--subeng-s3);
    padding-block: var(--subeng-s2);
    border-block: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-progression-meta {
    margin-block: 0.35rem var(--subeng-s2);
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
}

[data-subeng-root] .subeng-progression-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--subeng-s3);
}

[data-subeng-root] .subeng-progression-column {
    min-width: 0;
    padding-block-start: var(--subeng-s2);
    border-block-start: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-progression-column ul {
    display: grid;
    gap: var(--subeng-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-subeng-root] .subeng-progression-column li {
    display: grid;
    gap: 0.2rem;
}

[data-subeng-root] .subeng-progression-column a {
    color: var(--subeng-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-underline-offset: 0.15em;
}

[data-subeng-root] .subeng-progression-column span,
[data-subeng-root] .subeng-progression-column small {
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
}

[data-subeng-root] .subeng-result-list {
    display: grid;
    gap: var(--subeng-s3);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-subeng-root] .subeng-directory {
    margin-block-end: var(--subeng-s6);
}

[data-subeng-root] .subeng-directory-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0 var(--subeng-s6);
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-directory-card {
    display: grid;
    align-content: start;
    gap: 0.15rem;
    min-width: 0;
    padding-block: var(--subeng-s2);
    border-block-end: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-directory-card a {
    color: var(--subeng-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-underline-offset: 0.15em;
}

[data-subeng-root] .subeng-directory-card span {
    color: var(--subeng-caption);
    font-size: var(--subeng-text-caption);
}

[data-subeng-root][aria-busy="true"] .subeng-search-form {
    opacity: 0.72;
}

[data-subeng-root] .subeng-result-card {
    padding-block: var(--subeng-s2);
    border-block-end: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-result-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--subeng-s2);
}

[data-subeng-root] .subeng-result-card a,
[data-subeng-root] .subeng-selected a {
    color: var(--subeng-ink);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.15em;
}

[data-subeng-root] .subeng-result-card a:hover,
[data-subeng-root] .subeng-selected a:hover {
    color: var(--subeng-accent);
}

/* The match figure is the one place the second red is spent. */
[data-subeng-root] .subeng-match {
    flex: 0 0 auto;
    color: var(--subeng-emphasis);
    font-size: var(--subeng-text-small);
    font-weight: 600;
}

[data-subeng-root] .subeng-result-facts {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    gap: 0.35rem var(--subeng-s2);
    margin-block: var(--subeng-s2);
    font-size: var(--subeng-text-small);
}

[data-subeng-root] .subeng-result-facts dt {
    color: var(--subeng-ink);
    font-weight: 700;
}

[data-subeng-root] .subeng-result-facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

[data-subeng-root] .subeng-explanation {
    padding-block-start: var(--subeng-s1);
    border-block-start: 1px solid var(--subeng-hairline);
}

[data-subeng-root] .subeng-explanation summary {
    min-height: 44px;
    padding-block: 0.55rem;
    font-weight: 700;
    cursor: pointer;
}

[data-subeng-root] .subeng-explanation ul {
    margin-block-end: 0;
}

@media (max-width: 40rem) {
    [data-subeng-root] .subeng-choice-grid {
        grid-template-columns: 1fr;
    }

    [data-subeng-root] .subeng-submit {
        width: 100%;
    }

    [data-subeng-root] .subeng-result-card__heading {
        align-items: stretch;
        flex-direction: column;
    }

    [data-subeng-root] .subeng-match {
        align-self: flex-start;
    }

    [data-subeng-root] .subeng-result-facts {
        grid-template-columns: 1fr;
    }

    [data-subeng-root] .subeng-result-facts dd + dt {
        margin-block-start: var(--subeng-s1);
    }

    [data-subeng-root] .subeng-progression-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-subeng-root],
    [data-subeng-root] * {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

/* The body figures. Shared by the hub and the spoke, so they belong to the
   base sheet rather than to either page's own. They used to live in
   vanilla-hub.css, which loads last in a serial dependency chain, and until
   it arrived the inline SVG had no size at all: the figure painted at zero,
   the page grew when the stylesheet landed, the scrollbar appeared and the
   whole shell moved sideways. The markup now also carries width and height,
   so this is the second of the two fixes rather than the only one.
   Ramp: one hue, four steps. #dd0119 at full, then the same red at 55%, 30%
   and 12% flattened over white, so the figure carries no second colour and no
   transparency a print or forced-colors pass has to resolve. */
[data-subeng-root] .subeng-body { display:flex; gap:var(--subeng-s3); justify-content:center; padding-block:var(--subeng-s2) }
[data-subeng-root] .subeng-body__figure { display:flex; flex-direction:column; gap:var(--subeng-s1); align-items:center; margin:0; min-width:0 }
[data-subeng-root] .subeng-body__figure figcaption { color:var(--subeng-caption); font-size:var(--subeng-text-caption); font-weight:700; letter-spacing:.08em; text-transform:uppercase }
[data-subeng-root] .subeng-body__svg { display:block; width:100%; max-width:8.5rem; height:auto }
[data-subeng-root] .subeng-body__outline { stroke:#c9ccd0 }
[data-subeng-root] .subeng-body__muscle { fill:#f0f1f3 }
[data-subeng-root] .subeng-body__region { fill:var(--subeng-body-band,#f0f1f3) }
[data-subeng-root] .subeng-body__region--dn { --subeng-body-band:#f0f1f3 }
/* The one ramp, declared once at the top of this file. These four were the body
   map's own steps and the equipment sheet's coverage bars had four others, so
   the same data shaded at two weights on one site. */
[data-subeng-root] .subeng-body__region--d3 { --subeng-body-band:var(--subeng-accent) }
[data-subeng-root] .subeng-body__region--d2 { --subeng-body-band:var(--subeng-r2) }
[data-subeng-root] .subeng-body__region--d1 { --subeng-body-band:var(--subeng-r3) }
[data-subeng-root] .subeng-body__region--d0 { --subeng-body-band:var(--subeng-r4) }
[data-subeng-root] a.subeng-body__region:is(:hover,:focus-visible) { --subeng-body-band:#b00114 }

/* The copy says "tap a region", so the region has to look tappable. */
[data-subeng-root] a.subeng-body__region {
    cursor: pointer;
}

@media (forced-colors: active) {
    [data-subeng-root] .subeng-message,
    [data-subeng-root] .subeng-account,
    [data-subeng-root] .subeng-account__badges li,
    [data-subeng-root] .subeng-equipment-insight,
    [data-subeng-root] .subeng-equipment-insight li {
        border: 1px solid CanvasText;
    }

    [data-subeng-root] .subeng-submit,
    [data-subeng-root] .subeng-match {
        color: ButtonText;
        background: ButtonFace;
        forced-color-adjust: auto;
    }
}

/* ===========================================================================
   SEARCH FORM AND EQUIPMENT FILTER
   One block, at the end of the sheet, so the form lane and the token lane can
   work on the same file. Every selector here is under .subeng-search-form,
   .subeng-search, .subeng-submit, .subeng-choice or .subeng-filter. Colours
   are literal hex behind a var() fallback, so these rules are correct before
   and after the token block above is renamed.
   =========================================================================== */

/* The form is not a card. A bordered, filled panel wrapped around the one
   control every reader came for is the most product-UI element on the page,
   and hairlines separate here rather than enclose. */
[data-subeng-root] .subeng-search-form {
    position: relative;
    display: grid;
    gap: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

[data-subeng-root] .subeng-search {
    display: grid;
    gap: 8px;
}

/* The placeholder and the caption under the input carry the instruction, so
   the label is for assistive technology only. It stays a real label rather
   than becoming an aria-label, and it is out of flow so the submit button can
   be positioned against the top of this field on desktop. */
[data-subeng-root] .subeng-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* search.js appends the suggestion listbox to the input's parent, and
   .subeng-search-suggestions is absolutely positioned against it with
   top: 100%. So this element is the positioned one, and it never hides its
   overflow, or the listbox would be clipped by a 56px shell. */
[data-subeng-root] .subeng-search__shell {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    border: 1px solid var(--subeng-ink, #191c20);
    border-radius: 8px;
    background: #ffffff;
}

[data-subeng-root] .subeng-search__shell input[type="search"] {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 17px;
}

/* The ring is drawn on the shell, which is the control a reader sees, instead
   of inside its border where it reads as a second box. */
[data-subeng-root] .subeng-search__shell:focus-within {
    outline: 3px solid var(--subeng-focus, #191c20);
    outline-offset: 2px;
}

[data-subeng-root] .subeng-search__shell input[type="search"]:focus-visible {
    outline: none;
}

[data-subeng-root] .subeng-search__help {
    max-width: 68ch;
    margin: 0;
    color: var(--subeng-caption, #6b7280);
    font-size: 13px;
    line-height: 1.45;
}

[data-subeng-root] .subeng-search__suggest,
[data-subeng-root] .subeng-filter .subeng-fieldset {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

[data-subeng-root] .subeng-submit {
    justify-self: start;
    min-width: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--subeng-accent, #dd0119);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

[data-subeng-root] .subeng-submit:hover {
    background: var(--subeng-accent-hover, #b30115);
}

/* The filter is one disclosure. The markup ships it closed, which is the phone
   state: below the submit, under a 44px summary. */
[data-subeng-root] .subeng-filter__panel {
    padding: 0;
    border: 0;
    border-block-start: 1px solid var(--subeng-hairline, #e0e0e0);
    border-radius: 0;
    background: transparent;
}

[data-subeng-root] .subeng-filter__summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding-block: 8px;
    color: var(--subeng-ink, #191c20);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

/* A summary laid out as a flex row loses its native marker, and a row that
   opens something has to look like it does. */
[data-subeng-root] .subeng-filter__summary::-webkit-details-marker {
    display: none;
}

[data-subeng-root] .subeng-filter__summary::after {
    width: 8px;
    height: 8px;
    margin-block-end: 3px;
    margin-inline-start: auto;
    border-inline-end: 2px solid currentcolor;
    border-block-end: 2px solid currentcolor;
    transform: rotate(45deg);
    content: "";
}

[data-subeng-root] .subeng-filter__panel[open] > .subeng-filter__summary::after {
    margin-block: 3px 0;
    transform: rotate(-135deg);
}

/* equipment.js appends its own clear control to the first fieldset it finds,
   which is this one. It arrives styled as a share action, so it reads as a
   second red button beside the submit. One accent, one primary action: here it
   is the caption-weight undo it actually is. */
[data-subeng-root] .subeng-filter [data-subeng-equipment-clear] {
    justify-self: start;
    min-height: 44px;
    margin-block-start: 8px;
    padding: 0;
    border: 0;
    color: var(--subeng-caption, #6b7280);
    background: transparent;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

[data-subeng-root] .subeng-filter__state {
    color: var(--subeng-caption, #6b7280);
    font-size: 13px;
    font-weight: 500;
}

[data-subeng-root] .subeng-filter__body {
    display: grid;
    gap: 16px;
    padding-block-end: 8px;
}

[data-subeng-root] .subeng-filter legend {
    padding: 0;
    color: var(--subeng-ink, #191c20);
    font-size: 13px;
    font-weight: 700;
}

[data-subeng-root] .subeng-filter .subeng-help {
    margin-block: 4px 0;
    color: var(--subeng-caption, #6b7280);
    font-size: 13px;
}

[data-subeng-root] .subeng-filter .subeng-choice-more {
    padding: 0;
    border: 0;
    border-block-start: 1px solid var(--subeng-hairline, #e0e0e0);
    border-radius: 0;
    background: transparent;
}

[data-subeng-root] .subeng-choice-grid--chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 8px;
}

/* The one round thing in the equipment controls. */
[data-subeng-root] .subeng-choice--chip {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--subeng-hairline, #e0e0e0);
    border-radius: 999px;
    background: #ffffff;
    font-size: 15px;
}

[data-subeng-root] .subeng-choice--chip input {
    accent-color: var(--subeng-accent, #dd0119);
}

/* The tick is the state that must survive :has() being unsupported, which is
   why accent-color above is not decoration. This is the second signal. */
[data-subeng-root] .subeng-choice--chip:has(input:checked) {
    border-color: var(--subeng-ink, #191c20);
    background: var(--subeng-band, #f8f9fa);
}

@media (max-width: 30rem) {
    [data-subeng-root] .subeng-search__shell input[type="search"] {
        font-size: 16px;
    }

    /* P0. The primary action is under the input and above the filter at every
       width; here it is also in the flow, full width, and 48px tall. The
       source order in render_search_form() is what guarantees the position, so
       this rule changes size only. */
    [data-subeng-root] .subeng-search-form > .subeng-submit {
        position: static;
        width: 100%;
        min-height: 48px;
    }
}

@media (min-width: 30.0625rem) {
    [data-subeng-root] .subeng-search__shell input[type="search"] {
        padding-inline-end: 11rem;
    }

    /* The button sits inside the input shell. The form is the positioned
       ancestor and the query field is its first child with no padding above
       it, so 6px from the top of the form is 6px from the top of the shell. A
       page sheet that gives this form padding has to re-state this rule. */
    [data-subeng-root] .subeng-search-form > .subeng-submit {
        position: absolute;
        top: 6px;
        inset-inline-end: 6px;
        height: 44px;
        min-height: 44px;
    }

    /* From here up the filter is a rail, not a disclosure, so the summary goes
       and the body is shown whether or not the details carries [open]. Two
       rules for one job, because engines hide a closed details in two
       different ways: by hiding its children, which the first rule overrides,
       and through the ::details-content pseudo-element, which the second one
       makes visible. Every engine does one or the other, and both were
       measured in Chrome at 1440 on the hub and on a muscle route.
       Read this before changing either rule: the summary above is hidden
       here, so an engine that honours neither leaves a desktop reader with no
       filter and no control to open one. Whoever removes the reveal removes
       the `display: none` in the same edit. */
    [data-subeng-root] .subeng-filter__summary {
        display: none;
    }

    [data-subeng-root] .subeng-filter__panel > .subeng-filter__body {
        display: grid;
    }

    [data-subeng-root] .subeng-filter__panel::details-content {
        content-visibility: visible;
    }
}