/**
 * Substitution progression page, vanilla SSR frontend. Load after vanilla.css.
 *
 * FitnessVolt editorial, not product UI: condensed display headings in near
 * black, body in the system stack, one accent (the masthead red) on the primary
 * button, the current day and the ready state. Panels are hairline-separated
 * sections, never outlined boxes, so the ladder reads as one page.
 *
 * Type in px, because the theme root is responsive and a rem scale drifts:
 * H1 40/30, H2 28/22, H3 20/18, body 17/16, caption 13. Radius 8 on controls,
 * 4 on media. No shadows, light theme only.
 *
 * Tokens hang off the app root, so a rule here outranks a theme rule like
 * .entry-content ul on specificity rather than on load order. 390px first: one
 * ladder column, all fourteen days without scrolling, no fixed bars because the
 * footer carries an ad banner. Both widen at 900px.
 *
 * 13 KB raw budget, asserted in tests/php/progression-page-contract-test.php.
 */

[data-subeng-root] .subeng-prog {
    /* Namespaced names, aliased values. vanilla.css owns the palette; six page
       sheets restating the same five hexes made a brand change a six-file edit
       that drifts on the first one missed. */
    --subeng-prog-ink:var(--subeng-ink,#191c20);
    --subeng-prog-body:var(--subeng-body,#3c434a);
    --subeng-prog-muted:var(--subeng-caption,#6b7280);
    --subeng-prog-line:var(--subeng-hairline,#e0e0e0);
    --subeng-prog-accent:var(--subeng-accent,#dd0119);
    --subeng-prog-display:var(--subeng-font-display, "Encode Sans Condensed", "Segoe UI", Arial, sans-serif);
    --subeng-prog-text:var(--subeng-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    display:grid;
    gap:48px;
    color:var(--subeng-prog-body);
    font-family:var(--subeng-prog-text);
    font-size:16px;
    line-height:1.6;
}

.subeng-prog__head { display:grid; gap:12px; padding-block:24px 8px }
/* The exemplar's category badge, not loose red caps. */
.subeng-prog .subeng-prog__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; text-transform:uppercase }
/* One headline measure across the frontend. This was 22ch, the hub 24ch and
   the equipment page 20ch: three values for one rule, and "Progression ladder
   for the Pull-up" wrapped badly here because of it. */
.subeng-prog .subeng-prog__title { max-width:var(--subeng-headline-measure,40ch); margin:0; color:var(--subeng-prog-ink); font-family:var(--subeng-prog-display); font-size:30px; font-weight:700; letter-spacing:-.01em; line-height:1.2 }
/* The lede is the same role on every page, so it is the same size. Hardcoded
   at 16px it read a point smaller here and on the equipment page than on the
   hub, and it stopped following the phone step. */
.subeng-prog .subeng-prog__lede { max-width:var(--subeng-measure,68ch); margin:0; font-size:var(--subeng-text-body,17px); line-height:1.65 }

.subeng-prog__panel { display:grid; gap:12px; padding-block-start:16px; border-block-start:1px solid var(--subeng-prog-line) }
.subeng-prog .subeng-prog__section-title { margin:0; color:var(--subeng-prog-ink); font-family:var(--subeng-prog-display); font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.25 }
.subeng-prog .subeng-prog__section-note { max-width:68ch; margin:0; font-size:16px; line-height:1.65 }
.subeng-prog .subeng-prog__column-title { margin:8px 0 0; color:var(--subeng-prog-ink); font-family:var(--subeng-prog-display); font-size:18px; font-weight:700 }

.subeng-prog .subeng-prog__form { display:grid; gap:12px; margin:0; padding:0; border:0; background:none }
.subeng-prog .subeng-prog__field { display:grid; gap:6px; min-width:0 }
.subeng-prog .subeng-prog__field > label { color:var(--subeng-prog-ink); font-size:13px; font-weight:600 }
.subeng-prog .subeng-prog__field input { min-height:44px; padding:0 16px; border:1px solid var(--subeng-prog-ink); border-radius:8px; background:#fff; color:var(--subeng-prog-ink); font-family:inherit; font-size:17px }
.subeng-prog .subeng-prog__help { margin:0; color:var(--subeng-prog-muted); font-size:13px; font-weight:500; line-height:1.45 }

.subeng-prog .subeng-prog__button,
.subeng-prog .subeng-prog__form .subeng-submit {
    display:inline-flex; min-height:44px; align-items:center; justify-content:center;
    padding:0 22px; border:0; border-radius:8px;
    background:var(--subeng-prog-accent); color:#fff;
    font-family:inherit; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
}
.subeng-prog .subeng-prog__button--quiet { border:1px solid var(--subeng-prog-line); background:#fff; color:var(--subeng-prog-ink) }
.subeng-prog .subeng-prog__button[hidden] { display:none }
.subeng-prog .subeng-prog__button:disabled { opacity:.55; cursor:not-allowed }
.subeng-prog .subeng-prog__cta { margin:0 }

.subeng-prog .subeng-prog__suggestions { display:grid; gap:0; margin:0; padding:0; border-block-start:1px solid var(--subeng-prog-line); list-style:none }
.subeng-prog .subeng-prog__suggestions li { border-block-end:1px solid var(--subeng-prog-line) }
.subeng-prog .subeng-prog__suggestions a,
.subeng-prog .subeng-prog__link { display:inline-flex; min-height:44px; align-items:center; color:var(--subeng-prog-ink); font-size:17px; font-weight:700 }
.subeng-prog .subeng-prog__link { color:var(--subeng-prog-accent); font-size:15px; font-weight:600 }

.subeng-prog__columns { display:grid; gap:24px }
.subeng-prog__column { display:grid; gap:8px; align-content:start; min-width:0 }
.subeng-prog .subeng-prog__column-note { margin:0; color:var(--subeng-prog-muted); font-size:13px; font-weight:500; line-height:1.45 }

.subeng-prog .subeng-prog__cards { display:grid; gap:0; margin:0; padding:0; border-block-start:1px solid var(--subeng-prog-line); list-style:none }
.subeng-prog__card { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:start; padding-block:14px; border-block-end:1px solid var(--subeng-prog-line) }
/* The reader's own exercise takes the featured tier's 2px ink rule. */
.subeng-prog__card--current { border-block-start:2px solid var(--subeng-prog-ink); padding-block-start:14px }
.subeng-prog__card-body { display:grid; gap:4px; min-width:0 }
.subeng-prog .subeng-prog__card-title { margin:0; color:var(--subeng-prog-ink); font-family:var(--subeng-prog-display); font-size:17px; font-weight:700; line-height:1.3 }
.subeng-prog .subeng-prog__card-title a { color:var(--subeng-prog-ink); text-decoration:none }
.subeng-prog .subeng-prog__card-title a:hover { color:var(--subeng-prog-accent) }
.subeng-prog .subeng-prog__card-note { margin:0; color:var(--subeng-prog-muted); font-size:13px; font-weight:500; line-height:1.45 }

.subeng-prog__media { position:relative; overflow:hidden; border-radius:4px; background:#f8f9fa }
.subeng-prog .subeng-prog__image { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover }
/* A real link, so the page plays with scripting off. images.js hides it. */
.subeng-prog .subeng-prog__play { position:absolute; inset:0; display:flex; min-height:44px; align-items:center; justify-content:center; text-decoration:none }
.subeng-prog .subeng-prog__play::before { content:""; width:26px; height:26px; border:1px solid var(--subeng-prog-line); border-radius:999px; background:rgb(255 255 255 / 92%) }
.subeng-prog .subeng-prog__play::after { content:""; position:absolute; width:9px; height:9px; clip-path:polygon(15% 0%, 100% 50%, 15% 100%); background:var(--subeng-prog-accent) }
.subeng-prog .subeng-prog__play-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.subeng-prog [data-subeng-playing="true"] .subeng-prog__play { display:none }

.subeng-prog .subeng-prog__chips { display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0; color:var(--subeng-prog-muted); font-size:13px; font-weight:500; list-style:none }
.subeng-prog__chip + .subeng-prog__chip::before { content:"· "; color:var(--subeng-prog-line) }

.subeng-prog .subeng-prog__fields { display:grid; gap:12px; margin:0; padding:0; border:0 }
.subeng-prog .subeng-prog__fields[disabled] { opacity:.7 }
.subeng-prog .subeng-prog__fields legend { padding:0; color:var(--subeng-prog-muted); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.subeng-prog .subeng-prog__log-form { display:grid; gap:16px; justify-items:start }
.subeng-prog .subeng-prog__fields .subeng-submit { width:100% }
.subeng-prog .subeng-prog__status { margin:0; color:var(--subeng-prog-body); font-size:13px; font-weight:500; line-height:1.45 }
.subeng-prog .subeng-prog__status:empty { display:none }
.subeng-prog .subeng-prog__readiness { margin:0; padding-inline-start:12px; border-inline-start:1px solid var(--subeng-prog-line); color:var(--subeng-prog-body); font-size:16px; line-height:1.6 }
.subeng-prog [data-subeng-readiness="ready"] { border-inline-start:2px solid var(--subeng-prog-accent); color:var(--subeng-prog-ink); font-weight:600 }
.subeng-prog .subeng-prog__history ul { display:grid; gap:0; margin:0; padding:0; border-block-start:1px solid var(--subeng-prog-line); list-style:none }
.subeng-prog .subeng-prog__history li { padding-block:12px; border-block-end:1px solid var(--subeng-prog-line); font-size:16px }
.subeng-prog__log-form[aria-busy="true"] { opacity:.8 }

.subeng-prog .subeng-prog__stats { display:flex; flex-wrap:wrap; gap:0 32px; margin:0; border-block-start:1px solid var(--subeng-prog-line) }
.subeng-prog__stat { display:flex; gap:8px; align-items:baseline; padding-block:12px }
.subeng-prog .subeng-prog__stat dt { margin:0; color:var(--subeng-prog-muted); font-size:13px; font-weight:500 }
.subeng-prog .subeng-prog__stat dd { margin:0; color:var(--subeng-prog-ink); font-family:var(--subeng-prog-display); font-size:20px; font-weight:700; line-height:1.3 }

/* All fourteen days fit 390px. A strip that scrolls hides the filled end,
   which is the only part carrying information. */
.subeng-prog .subeng-prog__calendar { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:2px; margin:0; padding:0; list-style:none }
.subeng-prog__day { position:relative; display:grid; gap:2px; align-content:center; justify-items:center; min-height:44px; padding:4px 1px; border:1px solid var(--subeng-prog-line); border-radius:4px; background:#fff }
/* 13px is the caption step. 11px was below the scale and it labels a day. */
.subeng-prog__day-weekday { display:none; color:var(--subeng-prog-muted); font-size:13px; font-weight:700; text-transform:uppercase }
.subeng-prog__day-number { color:var(--subeng-prog-ink); font-family:var(--subeng-prog-display); font-size:13px; font-weight:700; line-height:1 }
.subeng-prog .subeng-prog__day-state { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.subeng-prog [data-subeng-day-state="streak"] { border-color:var(--subeng-prog-accent); background:var(--subeng-prog-accent) }
.subeng-prog [data-subeng-day-state="streak"] .subeng-prog__day-weekday,
.subeng-prog [data-subeng-day-state="streak"] .subeng-prog__day-number { color:#fff }
.subeng-prog [aria-current="date"] { border-color:var(--subeng-prog-ink) }

.subeng-prog .subeng-prog__badges { display:grid; gap:0; margin:0; padding:0; border-block-start:1px solid var(--subeng-prog-line); list-style:none }
.subeng-prog__badge { display:grid; gap:4px; padding-block:14px; border-block-end:1px solid var(--subeng-prog-line) }
.subeng-prog__badge-name { color:var(--subeng-prog-ink); font-family:var(--subeng-prog-display); font-size:17px; font-weight:700 }
.subeng-prog__badge--locked .subeng-prog__badge-name { color:var(--subeng-prog-muted) }
.subeng-prog__badge-rule { color:var(--subeng-prog-body); font-size:16px; line-height:1.6 }
.subeng-prog__badge-date { color:var(--subeng-prog-muted); font-size:13px; font-weight:500 }

.subeng-prog a { color:var(--subeng-prog-ink) }
.subeng-prog a:hover { color:var(--subeng-prog-accent) }
/* The shared focus token, not the ink: the ring has to clear 3:1 against the
   red submit and the ink only reaches 2.85. */
.subeng-prog a:focus-visible,
.subeng-prog button:focus-visible,
.subeng-prog input:focus-visible { outline:3px solid var(--subeng-focus,#0c0a09); outline-offset:2px }

@media (min-width: 620px) {
    .subeng-prog .subeng-prog__calendar { gap:4px }
    .subeng-prog__day { gap:2px; border-radius:8px }
    .subeng-prog__day-weekday { display:block }
    .subeng-prog .subeng-prog__form { grid-template-columns:minmax(0,1fr) auto; align-items:end }
    .subeng-prog .subeng-prog__fields { grid-template-columns:repeat(2,minmax(0,1fr)) }
    .subeng-prog .subeng-prog__fields legend,
    .subeng-prog .subeng-prog__fields .subeng-submit { grid-column:1 / -1 }
    .subeng-prog .subeng-prog__fields .subeng-submit { width:auto; justify-self:start }
    .subeng-prog .subeng-prog__badges { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px }
}

@media (min-width: 900px) {
    .subeng-prog { gap:64px }
    .subeng-prog .subeng-prog__title { font-size:40px }
    .subeng-prog .subeng-prog__section-title { font-size:28px }
    .subeng-prog .subeng-prog__lede,
    .subeng-prog .subeng-prog__section-note,
    .subeng-prog .subeng-prog__readiness,
    .subeng-prog__badge-rule { font-size:17px }
    .subeng-prog__columns { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; align-items:start }
    .subeng-prog__card { grid-template-columns:96px minmax(0,1fr) }
}

@media (prefers-reduced-motion: reduce) {
    .subeng-prog * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

@media (forced-colors: active) {
    .subeng-prog__card,
    .subeng-prog__day { border:1px solid CanvasText }
    .subeng-prog [data-subeng-day-state="streak"] { background:Highlight }
    .subeng-prog [data-subeng-day-state="streak"] .subeng-prog__day-weekday,
    .subeng-prog [data-subeng-day-state="streak"] .subeng-prog__day-number { color:HighlightText; forced-color-adjust:none }
    .subeng-prog .subeng-prog__button,
    .subeng-prog .subeng-prog__form .subeng-submit { border:1px solid ButtonText }
}