/**
 * Substitution hub, vanilla SSR frontend. Load after vanilla.css.
 *
 * Tokens hang off the app root. A rule styling a ul, li, p, heading, link,
 * details or figure carries .subeng-hub too, so two tokens out-rank a theme
 * rule like .entry-content ul on specificity rather than on stylesheet order.
 * The .subeng-body figures are shown by the spoke as well as the hub, so they
 * live in vanilla.css, the base sheet: this one loads last in a serial
 * dependency chain, and a figure whose only size came from here painted at
 * zero until it arrived, which shifted the whole page.
 *
 * The page is an article with a search box at the top: left-aligned headline,
 * hairline rules instead of boxes, one red for primary actions and one for the
 * match figure. There is no hero band, no outlined tile and no second accent.
 * Ramp: the one declared in vanilla.css, #dd0119 at full and three tints of
 * it. This sheet used to carry its own steps and they did not match the
 * equipment sheet's, so one body map and one set of coverage bars shaded the
 * same data at two different weights.
 */

/* Namespaced names, aliased values. vanilla.css owns the palette and says so in
   its own header; six page sheets restating the same five hexes made a brand
   change a seven-file edit that drifts on the first one missed. The ramp is the
   same story with a sharper edge: the body map shaded at #ea6f79/#f4b5bb and
   the coverage bars at #ee7d88/#f2a0a8, so the same data read at two weights on
   one site. Both now read the one ramp declared in vanilla.css. */
[data-subeng-root] .subeng-hub {
    --subeng-hub-ink:var(--subeng-ink,#191c20);
    --subeng-hub-body:var(--subeng-body,#3c434a);
    --subeng-hub-caption:var(--subeng-caption,#6b7280);
    --subeng-hub-line:var(--subeng-hairline,#e0e0e0);
    --subeng-hub-accent:var(--subeng-accent,#dd0119);
    --subeng-hub-deep:var(--subeng-accent-deep,#b00114);
    --subeng-hub-r2:var(--subeng-r2,#ec7380);
    --subeng-hub-r3:var(--subeng-r3,#f4a7ae);
    --subeng-hub-r4:var(--subeng-r4,#fbe4e6);
    --subeng-hub-heading:var(--subeng-font-heading,"Encode Sans Condensed","Segoe UI",Arial,sans-serif);
    color:var(--subeng-hub-body);
    font-family:var(--subeng-font-body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
}

/* SubEng_Nav. One list, two shapes: a 52px tab strip here and the same strip
   scrolling sideways on a phone, so the four links are never in the DOM twice.
   The current tab is marked by a 2px accent underline that overlays the strip's
   own hairline rather than sitting above it. */
[data-subeng-root] .subeng-nav__list { display:flex; flex-wrap:wrap; gap:0 var(--subeng-s3,24px); margin:0 0 var(--subeng-s3,24px); padding:0; border-block-end:1px solid #e0e0e0; list-style:none }
[data-subeng-root] .subeng-nav__link { display:inline-flex; height:52px; min-height:44px; margin-block-end:-1px; gap:.45rem; align-items:center; border-block-end:2px solid transparent; color:#3c434a; font-size:15px; font-weight:600; text-decoration:none }
[data-subeng-root] .subeng-nav__link:hover { color:#dd0119 }
[data-subeng-root] .subeng-nav__link--current { border-block-end-color:#dd0119; color:#191c20 }
[data-subeng-root] .subeng-nav__icon { display:none; width:20px; height:20px }
[data-subeng-root] .subeng-nav__label { overflow-wrap:anywhere }
[data-subeng-root] .subeng-nav__badge { display:inline-flex; min-width:1.25rem; padding:0 .3rem; justify-content:center; border-radius:4px; background:var(--subeng-accent,#dd0119); color:#fff; font-size:13px; font-weight:700; line-height:1.25rem }

/* The hero. A left-aligned headline over a search box needs no container to
   explain it, so the band, the centred column and the tinted fill are gone. */
.subeng-hub__hero { display:flex; flex-direction:column; align-items:flex-start; gap:var(--subeng-s2,16px) }
.subeng-hub__hero--compact { gap:var(--subeng-s1,8px); margin-block-end:var(--subeng-s3,24px) }
/* The eyebrow is the exemplar's category badge: a solid red pill with a white
   label, the way "EXERCISE GUIDES" reads in the live fold. As bare red caps it
   was seven more pieces of loose accent text on pages that already spend the
   accent on the submit and the current tab. */
.subeng-hub .subeng-hub__eyebrow { display:inline-block; align-self:start; width:fit-content; margin:0; padding:0; background:none; color:#6b7280; font-size:13px; font-weight:700; letter-spacing:.06em; line-height:1.45; text-transform:uppercase }
/* One headline measure for the whole frontend. The hub clamped at 24ch, the
   equipment page at 20ch and the progression page at 22ch, three values for one
   rule, and "What your equipment can train" hyphen-broke at 1440 while the
   exemplar article's own H1 runs the full 807px. */
.subeng-hub .subeng-hub__title { max-width:var(--subeng-headline-measure,40ch); margin:0; font-family:var(--subeng-hub-heading); font-size:var(--subeng-h1,40px); font-weight:700; letter-spacing:-.01em; line-height:1.2 }
.subeng-hub .subeng-hub__lede { max-width:var(--subeng-measure,68ch); margin:0; color:var(--subeng-hub-body); font-size:var(--subeng-text-body,17px); line-height:1.65 }
.subeng-hub .subeng-hub__notice { margin:0; padding:.7rem .9rem; border-inline-start:2px solid var(--subeng-hub-accent); background:#fff }
.subeng-hub__hero .subeng-hub__notice,
.subeng-hub__hero .subeng-message,
.subeng-hub__hero .subeng-empty { width:100%; text-align:start }

/* The form. Its internals belong to the form lane; what is here is placement:
   the input first, the red submit second, every filter after them. That order
   is the phone P0 fix, and it is scoped to the clean hub so the "choose the
   exercise you meant" fieldset is never pushed below the button that submits
   it. */
.subeng-hub__form { width:100%; margin-block-start:var(--subeng-s1,8px) }
.subeng-hub__form .subeng-search-form { position:relative; gap:var(--subeng-s2,16px) }
.subeng-hub[data-subeng-hub="clean"] .subeng-hub__form .subeng-search-form > * { order:3 }
.subeng-hub[data-subeng-hub="clean"] .subeng-hub__form .subeng-search-form > .subeng-field { order:1 }
.subeng-hub[data-subeng-hub="clean"] .subeng-hub__form .subeng-search-form > .subeng-submit { order:2 }
.subeng-hub__form .subeng-field:first-of-type { gap:0; margin:0 }
[data-subeng-root] .subeng-nav__hidden,
.subeng-hub__form .subeng-field:first-of-type > label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.subeng-hub__form #subeng-query { height:56px; padding:0 13rem 0 1rem; border:1px solid #191c20; border-radius:8px; background:#fff; font-size:17px }
.subeng-hub__form .subeng-submit { position:absolute; top:4px; inset-inline-end:4px; width:auto; min-width:0; height:48px; padding-inline:22px }
.subeng-hub__form .subeng-search-suggestions { top:3.75rem }
.subeng-hub__form .subeng-help { margin-block:.4rem 0; color:var(--subeng-hub-caption); font-size:13px }

/* 48px between sections on a phone and 64 on a desktop, with the separating
   hairline in the middle of the gap: half above it, half below. */
.subeng-hub__section { display:grid; gap:var(--subeng-s2,16px); margin-block-start:var(--subeng-s3,24px); padding-block-start:var(--subeng-s3,24px); border-block-start:1px solid var(--subeng-hub-line) }
.subeng-hub__section-head { display:flex; flex-direction:column; gap:var(--subeng-s1,8px) }
.subeng-hub__section-main { min-width:0 }
.subeng-hub .subeng-hub__section-title { margin:0; font-family:var(--subeng-hub-heading); font-size:var(--subeng-h2,28px); font-weight:700; letter-spacing:-.01em; line-height:1.25 }
.subeng-hub .subeng-hub__section-note { max-width:52ch; margin:0; color:var(--subeng-hub-caption); font-size:13px; font-weight:500; line-height:1.45 }
.subeng-hub__results .subeng-hub__section-note { max-width:68ch; margin-block:.4rem 1rem }
/* The results region's one line: what the list is and how it is ordered. It
   replaced an H2 that restated the H1's subject and a caption under it, which
   together cost about 430px of an 844px phone fold before the first card. */
.subeng-hub .subeng-hub__results-count { max-width:var(--subeng-measure,68ch); margin:0 0 var(--subeng-s2,16px); color:var(--subeng-hub-body); font-size:var(--subeng-text-body,17px); line-height:1.65 }

/* One row shape for every list on the page: most searched, constraints,
   presets and muscle groups. The link is stretched over the whole row, so the
   tap target is the row height and not the 20px of text inside it. */
.subeng-hub .subeng-hub__rows { display:grid; gap:0 var(--subeng-s6,48px); margin:0; padding:0; list-style:none; border-block-start:1px solid var(--subeng-hub-line) }
.subeng-hub__row { position:relative; display:flex; gap:var(--subeng-s2,16px); align-items:center; min-height:44px; padding-block:var(--subeng-s2,16px); border-block-end:1px solid var(--subeng-hub-line) }
.subeng-hub__row-media { display:block; width:96px; height:72px; flex:0 0 96px; overflow:hidden; border-radius:4px }
.subeng-hub__row-media img { display:block; width:100%; height:100%; object-fit:cover }
.subeng-hub__row-text { display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1 1 auto }
.subeng-hub__row-go { flex:0 0 auto; margin-inline-start:auto; color:var(--subeng-hub-caption); font-size:20px; font-weight:700; line-height:1 }
.subeng-hub__row:hover .subeng-hub__row-go { color:var(--subeng-hub-accent) }
.subeng-hub .subeng-hub__tile-link { display:block; color:var(--subeng-hub-ink); font-family:var(--subeng-hub-heading); font-size:17px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; text-decoration:none }
.subeng-hub .subeng-hub__tile-link::after { position:absolute; inset:0; content:"" }
.subeng-hub__row:hover .subeng-hub__tile-link { color:var(--subeng-hub-accent) }
.subeng-hub__tile-eyebrow { color:var(--subeng-hub-caption); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.subeng-hub__tile-note,
.subeng-hub__tile-count { color:var(--subeng-hub-caption); font-size:13px; font-weight:500; line-height:1.45 }

/* Browse by muscle: the figure in the red tint ramp beside the same rows. */
.subeng-hub__muscles { display:grid; gap:var(--subeng-s3,24px) }
.subeng-hub__muscle-list { display:flex; flex-direction:column; gap:var(--subeng-s2,16px) }
.subeng-hub .subeng-hub__legend { display:flex; flex-wrap:wrap; gap:var(--subeng-s2,16px); margin:0; color:var(--subeng-hub-caption); font-size:13px }
.subeng-hub__legend-key { display:inline-flex; gap:.4rem; align-items:center }
.subeng-hub__swatch { width:10px; height:10px }
.subeng-hub__swatch--d3 { background:var(--subeng-hub-accent) }
.subeng-hub__swatch--d2 { background:var(--subeng-hub-r2) }
.subeng-hub__swatch--d1 { background:var(--subeng-hub-r3) }

/* How we rank: one bar whose widths are the published weights, then the
   numbers under it. Same four-step ramp as the figure. */
.subeng-hub__bar { height:10px; margin-block-end:var(--subeng-s2,16px); overflow:hidden; border-radius:4px; background:var(--subeng-hub-r4) }
.subeng-hub__bar svg { display:block; width:100%; height:100% }
.subeng-hub__bar-seg--1 { fill:var(--subeng-hub-accent) }
.subeng-hub__bar-seg--2 { fill:var(--subeng-hub-r2) }
.subeng-hub__bar-seg--3 { fill:var(--subeng-hub-r3) }
.subeng-hub .subeng-hub__weights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--subeng-s2,16px); margin:0; padding:0; list-style:none }
.subeng-hub .subeng-hub__weight { display:flex; flex-direction:column; gap:.15rem }
.subeng-hub__weight-percent { color:var(--subeng-hub-ink); font-family:var(--subeng-hub-heading); font-size:20px; font-weight:700; line-height:1.3 }
.subeng-hub__weight-label { color:var(--subeng-hub-caption); font-size:13px; font-weight:500; overflow-wrap:anywhere }

/* Everything past the fourth row of a long section. The phone hub is the entry
   page for 87% of readers and the one page the rebuild lengthened; four rows say
   what a section is, and the rest are one tap away and still in the document. */
.subeng-hub .subeng-hub__rows-more > summary { display:flex; min-height:44px; align-items:center; border-block-end:1px solid var(--subeng-hub-line); color:var(--subeng-hub-ink); font-size:15px; font-weight:600; cursor:pointer }
.subeng-hub .subeng-hub__rows-more > summary:hover { color:var(--subeng-hub-accent) }
.subeng-hub .subeng-hub__rows-more .subeng-hub__rows { border-block-start:0 }
.subeng-hub .subeng-hub__more { margin:var(--subeng-s2,16px) 0 0 }
/* In-body links read in ink with a hairline underline, and turn red on hover and
   focus. Red on every link, every eyebrow and every disclosure alongside twelve
   affiliate buttons is the accent spent on eight things, which is the complaint
   the direction was written to answer. */
.subeng-hub .subeng-hub__more a,
.subeng-hub .subeng-hub__filter-action,
.subeng-hub .subeng-hub__deeper a { display:inline-flex; min-height:44px; align-items:center; border-block-end:1px solid var(--subeng-hub-line); color:var(--subeng-hub-ink); font-size:15px; font-weight:600 }
.subeng-hub .subeng-hub__filter-action:hover,
.subeng-hub .subeng-hub__more a:hover,
.subeng-hub .subeng-hub__deeper a:hover,
.subeng-hub .subeng-hub__filter-action:focus-visible,
.subeng-hub .subeng-hub__more a:focus-visible,
.subeng-hub .subeng-hub__deeper a:focus-visible { border-block-end-color:var(--subeng-hub-accent); color:var(--subeng-hub-accent) }

.subeng-hub .subeng-hub__filter-bar { display:flex; flex-wrap:wrap; gap:.4rem var(--subeng-s3,24px); align-items:center; justify-content:space-between; margin-block:.4rem var(--subeng-s2,16px); padding-block:var(--subeng-s1,8px); border-block:1px solid var(--subeng-hub-line) }
.subeng-hub .subeng-hub__filter-text { margin:0; font-size:15px; line-height:1.5 }
.subeng-hub__filter-label { color:var(--subeng-hub-caption); font-weight:600 }
.subeng-hub .subeng-hub__filter-actions { display:flex; gap:var(--subeng-s3,24px); margin:0; font-size:15px }

/* The source exercise's own photograph, above the ranked list. Its geometry is
   the card sheet's, because the image markup is the card's; what is here is
   placement. */
.subeng-hub__lead-media { margin-block:var(--subeng-s2,16px) }
.subeng-hub .subeng-hub__original { margin-block-end:var(--subeng-s3,24px) }
.subeng-hub .subeng-hub__original > summary { min-height:44px; padding-block:.6rem; color:var(--subeng-hub-ink); font-size:15px; font-weight:700; cursor:pointer }
.subeng-hub .subeng-hub__original > summary:hover { color:var(--subeng-hub-accent) }
.subeng-hub .subeng-hub__result-list { margin:0; padding:0; list-style:none }
.subeng-hub .subeng-hub__results--empty { padding-block:var(--subeng-s2,16px); border-block:1px solid var(--subeng-hub-line) }
.subeng-hub .subeng-hub__results--empty .subeng-hub__filter-actions { flex-wrap:wrap; gap:.4rem var(--subeng-s3,24px) }
.subeng-hub__result + .subeng-hub__result { margin-block-start:var(--subeng-s3,24px) }
.subeng-hub .subeng-hub__deeper { margin:var(--subeng-s3,24px) 0 0; padding-block-start:var(--subeng-s2,16px); border-block-start:1px solid var(--subeng-hub-line); font-weight:600 }

.subeng-hub__faq-item { padding-block:var(--subeng-s2,16px); border-block-end:1px solid var(--subeng-hub-line) }
.subeng-hub .subeng-hub__faq-question { margin:0 0 .4rem; font-family:var(--subeng-hub-heading); font-size:var(--subeng-h3,20px); font-weight:700; line-height:1.3 }
.subeng-hub .subeng-hub__faq-answer { max-width:68ch; margin:0; color:var(--subeng-hub-body); font-size:var(--subeng-text-body,17px); line-height:1.65 }

@media (min-width: 40rem) {
    .subeng-hub .subeng-hub__rows { grid-template-columns:repeat(2,minmax(0,1fr)) }
    /* Beside the body figure the rows are already in a narrow column. */
    .subeng-hub__muscle-list .subeng-hub__rows { grid-template-columns:minmax(0,1fr) }
    .subeng-hub .subeng-hub__weights { grid-template-columns:repeat(4,minmax(0,1fr)) }
    .subeng-hub__muscles { grid-template-columns:minmax(0,18rem) minmax(0,1fr); gap:var(--subeng-s6,48px); align-items:start }
}

@media (min-width: 64rem) {
    /* One column, not a 300px label gutter beside it. The two-column section put
       a red eyebrow, a 28px H2 and a 13px note in a column that stayed empty for
       the whole height of the section, which is a documentation-site pattern the
       exemplar article does not have: it is what the critique measured as the
       grey voids at 1440, and it is what forced the H1 clamps that made the
       headlines hyphen-break. The head sits above the content it heads. */
    .subeng-hub__section { margin-block-start:var(--subeng-s6,48px); padding-block-start:var(--subeng-s3,24px) }
    .subeng-hub .subeng-hub__section-note { max-width:var(--subeng-measure,68ch); font-size:var(--subeng-text-body,17px); font-weight:400; line-height:1.65 }
    .subeng-hub .subeng-hub__weights { grid-template-columns:repeat(6,minmax(0,1fr)) }
    /* The equipment filter moves into a 320px right rail so it never stands
       between the reader and the submit. The form lane marks the fieldset it
       wants there with data-subeng-form-rail; until it does, the form stays one
       column and the submit keeps its place inside the input. */
    .subeng-hub .subeng-hub__form .subeng-search-form:has([data-subeng-form-rail]) { grid-template-columns:minmax(0,1fr) 320px; column-gap:var(--subeng-s8,64px); align-items:start }
    .subeng-hub .subeng-hub__form .subeng-search-form:has([data-subeng-form-rail]) > :not([data-subeng-form-rail]) { grid-column:1 }
    .subeng-hub .subeng-hub__form [data-subeng-form-rail] { grid-column:2; grid-row:1 / span 6 }
    /* The submit stays inside the input with the rail present, the way the
       progression page's hero already behaves. Made static it dropped below the
       field and sat alone in a wide empty band, so two hero forms on one site
       behaved two ways. It is absolute against the form, so with the rail there
       its inline end has to clear the rail and the column gap rather than the
       form's own edge. */
    .subeng-hub .subeng-hub__form .subeng-search-form:has([data-subeng-form-rail]) > .subeng-submit { inset-inline-end:calc(320px + var(--subeng-s8,64px) + 4px) }
}

/* Phones keep the same strip at the top of the plugin's content, scrolling
   sideways when four labels do not fit. Never a fixed bar: the site shows an ad
   banner anchored to the footer on phones and a fixed bar would cover it. */
@media (max-width: 39.99rem) {
    [data-subeng-root] .subeng-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:-1rem; padding-inline:1rem }
    [data-subeng-root] .subeng-nav::-webkit-scrollbar { display:none }
    [data-subeng-root] .subeng-nav__list { display:flex; gap:.25rem; margin:0 0 var(--subeng-s3,24px); padding:0; min-width:max-content }
    [data-subeng-root] .subeng-nav__link { height:52px; min-height:44px; padding:0 .7rem; white-space:nowrap }
    [data-subeng-root] .subeng-nav__icon { display:block }
}

@media (max-width: 30rem) {
    .subeng-hub__form #subeng-query { padding-inline:1rem }
    .subeng-hub__form .subeng-submit { position:static; width:100%; height:48px }
    .subeng-hub__form .subeng-search-suggestions { top:3.75rem }
    .subeng-hub__row-media { width:64px; height:48px; flex:0 0 64px }
    /* 28 rows on this page. At 16px of padding each they added roughly 450px to
       a phone scroll, which is the height complaint the critique measured, so
       the row keeps its 44px target and spends less around it. */
    .subeng-hub__row { padding-block:var(--subeng-s1,8px) }
}