/**
 * Equipment page, vanilla SSR frontend. Load after vanilla.css.
 *
 * The spec is the old app's My Equipment tab, live on fitnessvolt.com
 * (frontend/src/App.tsx, components/equipment/InlineEquipmentSetup, GymScoreHero,
 * MuscleHeatmap, ROITable, ROICard, BudgetFilter, SynergyCallout), translated
 * from its Tailwind classes. Colours read vanilla.css tokens; the old stone-400
 * overline and the white-on-amber buttons fail AA, so each is one step darker.
 *
 * A rule styling a ul, li, p, heading, link or details carries two class
 * tokens so it outranks a theme rule like .entry-content ul on specificity.
 * Phone first. No fixed bars: the footer carries an ad banner.
 */

[data-subeng-root] .subeng-equipment {
    --subeng-eq-ink:var(--subeng-ink);
    --subeng-eq-body:var(--subeng-body);
    --subeng-eq-soft:var(--subeng-soft);
    --subeng-eq-muted:var(--subeng-caption);
    --subeng-eq-line:var(--subeng-hairline);
    --subeng-eq-line2:var(--subeng-hairline-strong);
    --subeng-eq-band:var(--subeng-band);
    --subeng-eq-fill:var(--subeng-fill);
    --subeng-eq-accent:var(--subeng-accent);
    --subeng-eq-deep:var(--subeng-accent-deep);
    --subeng-eq-tint:var(--subeng-accent-soft);
    --subeng-eq-sky:var(--subeng-link);
    --subeng-eq-sky-deep:var(--subeng-link-deep);
    --subeng-eq-sky-tint:var(--subeng-faq-bg);
    --subeng-eq-amber-bg:var(--subeng-original-bg);
    --subeng-eq-amber-fill:var(--subeng-original-media);
    --subeng-eq-amber-line:var(--subeng-original-border);
    --subeng-eq-amber-ink:var(--subeng-original-ink);
    --subeng-eq-amber-text:var(--subeng-original-label);
    --subeng-eq-card-shadow:0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 2px -1px rgb(0 0 0 / 5%);
    --subeng-eq-display:var(--subeng-font-display, "Outfit", system-ui, sans-serif);
    display:flex;
    flex-direction:column;
    gap:32px;
    padding-block:16px 8px;
    color:var(--subeng-eq-body);
    font-family:var(--subeng-font-body);
    font-size:15px;
    line-height:1.6;
}
/* 0,2,0: above the theme's anchor rule, below every component's own. */
[data-subeng-root] .subeng-equipment :where(a) { color:var(--subeng-eq-accent); text-decoration:none }
[data-subeng-root] .subeng-equipment :where(a:hover) { color:var(--subeng-eq-deep) }
.subeng-equipment__icon { flex:0 0 auto; display:block }
.subeng-equipment__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* Header: text-display-lg over a stone-500 sentence. */
.subeng-equipment__hero { display:flex; flex-direction:column; gap:8px; margin-block-end:-8px }
.subeng-equipment .subeng-equipment__title { margin:0; color:var(--subeng-eq-ink); font-family:var(--subeng-eq-display); font-size:clamp(28px, 7vw, 36px); font-weight:700; letter-spacing:-.03em; line-height:1.15 }
.subeng-equipment .subeng-equipment__lede { max-width:68ch; margin:0; color:var(--subeng-eq-muted); font-size:16px; line-height:1.6 }

/* Boards: a display heading and a stone-500 sentence over the body. */
.subeng-equipment__section { display:flex; flex-direction:column; gap:24px; min-width:0 }
.subeng-equipment__section-head { display:flex; flex-direction:column; gap:8px }
.subeng-equipment__section-main { display:flex; flex-direction:column; gap:16px; min-width:0 }
.subeng-equipment .subeng-equipment__section-title { margin:0; color:var(--subeng-eq-ink); font-family:var(--subeng-eq-display); font-size:clamp(26px, 6vw, 36px); font-weight:700; letter-spacing:-.03em; line-height:1.15 }
.subeng-equipment .subeng-equipment__section-note { max-width:68ch; margin:0; color:var(--subeng-eq-muted); font-size:16px; line-height:1.6 }

/* The old white card. */
.subeng-equipment__card { padding:24px; border:1px solid var(--subeng-eq-line); border-radius:16px; background:#fff; box-shadow:var(--subeng-eq-card-shadow) }
.subeng-equipment .subeng-equipment__overline { margin:0 0 12px; padding:0; color:var(--subeng-eq-muted); font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1.4; text-transform:uppercase }
.subeng-equipment .subeng-equipment__presets-label { margin:0 0 16px; color:var(--subeng-eq-soft); font-size:14px; line-height:1.5 }
.subeng-equipment .subeng-equipment__grid-help,
.subeng-equipment .subeng-equipment__hint,
.subeng-equipment .subeng-equipment__provenance,
.subeng-equipment .subeng-equipment__disclosure,
.subeng-equipment .subeng-equipment__showing,
.subeng-equipment .subeng-equipment__empty,
.subeng-equipment .subeng-equipment__empty-note { max-width:68ch; margin:0; color:var(--subeng-eq-muted); font-size:13px; line-height:1.5 }
.subeng-equipment .subeng-equipment__grid-help { margin-block:-4px 16px }
.subeng-equipment .subeng-equipment__showing { font-size:14px }
.subeng-equipment__form-grid { display:flex; flex-direction:column; gap:24px }

/* Quick setup presets: 2px stone tiles, name over what it holds. */
.subeng-equipment .subeng-equipment__presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__preset { display:flex; margin:0 }
.subeng-equipment .subeng-equipment__preset-link { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:4px; min-height:44px; padding:14px 16px; border:2px solid var(--subeng-eq-line); border-radius:16px; background:#fff; text-decoration:none; transition:border-color .2s, background-color .2s }
.subeng-equipment .subeng-equipment__preset-link:hover { border-color:var(--subeng-r3); background:var(--subeng-eq-tint) }
.subeng-equipment__preset-label { color:var(--subeng-eq-ink); font-family:var(--subeng-eq-display); font-size:14px; font-weight:600; line-height:1.3 }
.subeng-equipment__preset-note { color:var(--subeng-eq-muted); font-size:12px; line-height:1.6 }
.subeng-equipment .subeng-equipment__preset--current .subeng-equipment__preset-link { border-color:var(--subeng-eq-accent); background:var(--subeng-eq-tint) }

/* Select your equipment: square tiles, drawing over a short label. */
.subeng-equipment__fieldset { min-width:0; margin:0; padding:0; border:0 }
.subeng-equipment .subeng-equipment__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__chip { position:relative; display:flex; min-width:0; margin:0 }
.subeng-equipment__chip-input { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.subeng-equipment .subeng-equipment__chip-label { position:relative; display:flex; flex:1; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:16px 8px; border:2px solid var(--subeng-eq-line); border-radius:16px; background:#fff; color:var(--subeng-eq-soft); font-size:12px; font-weight:600; line-height:1.25; text-align:center; cursor:pointer; transition:border-color .2s, background-color .2s }
.subeng-equipment .subeng-equipment__chip-label:hover { border-color:var(--subeng-eq-line2); background:var(--subeng-eq-band) }
.subeng-equipment__chip-icon { width:40px; height:40px; object-fit:contain; transition:transform .2s }
.subeng-equipment__chip-icon--blank { display:grid; place-items:center; border-radius:50%; background:var(--subeng-eq-fill); color:var(--subeng-eq-muted); font-family:var(--subeng-eq-display); font-size:18px; font-weight:700 }
.subeng-equipment__chip-text { min-width:0; overflow-wrap:anywhere }
.subeng-equipment__chip-input:checked + .subeng-equipment__chip-label { border-color:var(--subeng-eq-accent); background:var(--subeng-eq-tint); color:var(--subeng-eq-deep); box-shadow:var(--subeng-eq-card-shadow) }
.subeng-equipment__chip-input:checked + .subeng-equipment__chip-label .subeng-equipment__chip-icon { transform:scale(1.1) }
.subeng-equipment__chip-input:checked + .subeng-equipment__chip-label::after { position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; background:var(--subeng-eq-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; content:"" }
.subeng-equipment__chip-input:focus-visible + .subeng-equipment__chip-label { outline:3px solid var(--subeng-focus); outline-offset:2px }

/* Summary footer: the selected and unlocks pills, the button on the right. */
.subeng-equipment__result { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:space-between; padding-block-start:20px; border-block-start:1px solid var(--subeng-eq-line) }
.subeng-equipment .subeng-equipment__counter { display:flex; flex-wrap:wrap; gap:12px; margin:0 }
.subeng-equipment__pill { display:inline-flex; min-height:40px; gap:8px; align-items:center; padding:8px 12px; border-radius:12px; background:var(--subeng-eq-fill); color:var(--subeng-eq-ink); font-size:14px; font-weight:600 }
.subeng-equipment__pill .subeng-equipment__icon { color:var(--subeng-eq-muted) }
.subeng-equipment__pill--unlocks { background:var(--subeng-eq-sky-tint); color:var(--subeng-eq-sky) }
.subeng-equipment__pill--unlocks [data-subeng-counter-unlocks] { display:inline-block }
.subeng-equipment__pill--unlocks [data-subeng-counter-unlocks]::first-letter { text-transform:uppercase }
.subeng-equipment__actions { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center }
.subeng-equipment .subeng-equipment__actions .subeng-submit { display:inline-flex; min-height:44px; align-items:center; justify-content:center; margin:0; padding:0 20px; border:0; border-radius:12px; background:var(--subeng-eq-accent); color:#fff; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer }
.subeng-equipment .subeng-equipment__actions .subeng-submit:hover { background:var(--subeng-eq-deep) }
.subeng-equipment .subeng-equipment__reset { display:inline-flex; min-height:44px; align-items:center; color:var(--subeng-eq-muted); font-size:14px; font-weight:600 }
.subeng-equipment .subeng-equipment__hint { flex-basis:100%; max-width:none }

/* Account equipment: a quiet card under the picker; equipment.js rebuilds it. */
.subeng-equipment__save { display:flex; flex-direction:column; gap:10px; padding:20px 24px; border:1px solid var(--subeng-eq-line); border-radius:16px; background:var(--subeng-eq-band) }
.subeng-equipment .subeng-equipment__save h3 { margin:0; color:var(--subeng-eq-ink); font-family:var(--subeng-eq-display); font-size:16px; font-weight:700 }
.subeng-equipment .subeng-equipment__save p { max-width:68ch; margin:0; color:var(--subeng-eq-body); font-size:14px; line-height:1.6 }
.subeng-equipment .subeng-equipment__save ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__save li { margin:0; padding:6px 12px; border:1px solid var(--subeng-eq-line); border-radius:12px; background:#fff; font-size:13px }
.subeng-equipment__save .subeng-fieldset { min-width:0; margin:0; padding:0; border:0 }
.subeng-equipment__save .subeng-fieldset > legend { color:var(--subeng-eq-muted); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.subeng-equipment__save > div:last-of-type,
.subeng-equipment__save .subeng-choice-grid { display:flex; flex-wrap:wrap; gap:8px }
.subeng-equipment__save .subeng-choice { padding:8px 12px; border:2px solid var(--subeng-eq-line); border-radius:12px; background:#fff; font-size:13px; font-weight:600 }
.subeng-equipment__save .subeng-choice:has(input:checked) { border-color:var(--subeng-eq-accent); background:var(--subeng-eq-tint); color:var(--subeng-eq-deep) }
.subeng-equipment .subeng-equipment__save .subeng-share-action,
.subeng-equipment .subeng-equipment__outline { display:inline-flex; min-height:44px; align-items:center; padding:0 16px; border:1px solid var(--subeng-eq-line2); border-radius:12px; background:#fff; color:var(--subeng-eq-accent); font-size:14px; font-weight:600; text-decoration:none }
.subeng-equipment .subeng-equipment__text-link { display:inline-flex; min-height:44px; align-items:center; font-size:14px; font-weight:600 }

/* Gym Score: the old dark card, ring left, stat tiles right. */
.subeng-equipment__scorecard { --ring-a:var(--subeng-stone-500); --ring-b:var(--subeng-stone-300); display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; padding:24px; border-radius:24px; background:linear-gradient(145deg,var(--subeng-stone-900) 0%,var(--subeng-stone-800) 50%,var(--subeng-stone-900) 100%); color:var(--subeng-stone-400); box-shadow:0 4px 6px -1px rgb(0 0 0 / 7%), 0 2px 4px -2px rgb(0 0 0 / 7%) }
.subeng-equipment__scorecard--elite { --ring-a:var(--subeng-amber-500); --ring-b:var(--subeng-red-600) }
.subeng-equipment__scorecard--complete { --ring-a:var(--subeng-sky-500); --ring-b:var(--subeng-emerald-700) }
.subeng-equipment__scorecard--building { --ring-a:var(--subeng-violet-500); --ring-b:var(--subeng-violet-600) }
.subeng-equipment__ring-a { stop-color:var(--ring-a) }
.subeng-equipment__ring-b { stop-color:var(--ring-b) }
.subeng-equipment__ring-track { stroke:rgb(255 255 255 / 8%) }
.subeng-equipment__score { display:flex; gap:20px; align-items:center; min-width:0 }
.subeng-equipment__ring { position:relative; flex:0 0 112px; width:112px; height:112px }
.subeng-equipment__ring-svg { display:block }
.subeng-equipment .subeng-equipment__score-value { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; color:#fff; font-family:var(--subeng-eq-display); font-size:36px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1 }
.subeng-equipment__score-scale { margin-block-start:4px; color:var(--subeng-stone-400); font-family:var(--subeng-font-body); font-size:10px; font-weight:600; letter-spacing:0 }
.subeng-equipment__score-info { display:flex; flex-direction:column; gap:6px; min-width:0 }
.subeng-equipment__score-head { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center }
.subeng-equipment .subeng-equipment__score-title { margin:0; color:#fff; font-family:var(--subeng-eq-display); font-size:clamp(26px, 6vw, 36px); font-weight:700; letter-spacing:-.03em; line-height:1.15 }
.subeng-equipment__score-level { padding:4px 12px; border-radius:999px; background:linear-gradient(90deg,var(--subeng-stone-600),var(--subeng-stone-500)); color:#fff; font-size:12px; font-weight:700 }
.subeng-equipment__score-level--elite { background:linear-gradient(90deg,var(--subeng-amber-700),var(--subeng-orange-700)) }
.subeng-equipment__score-level--complete { background:linear-gradient(90deg,var(--subeng-sky-700),var(--subeng-emerald-700)) }
.subeng-equipment__score-level--building { background:linear-gradient(90deg,var(--subeng-violet-700),var(--subeng-violet-700)) }
.subeng-equipment .subeng-equipment__unlocks { margin:0; color:var(--subeng-stone-200); font-size:14px; font-weight:600 }
.subeng-equipment .subeng-equipment__scorecard .subeng-equipment__section-note { color:var(--subeng-stone-400); font-size:13px; line-height:1.5 }
.subeng-equipment .subeng-equipment__stats { display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__stat { --tile:var(--subeng-sky-400); display:flex; gap:12px; align-items:center; margin:0; padding:12px 16px; border:1px solid rgb(255 255 255 / 10%); border-radius:16px; background:rgb(255 255 255 / 5%) }
.subeng-equipment .subeng-equipment__stat--strengths { --tile:var(--subeng-violet-400); border-color:rgb(139 92 246 / 20%); background:rgb(139 92 246 / 10%) }
.subeng-equipment .subeng-equipment__stat--gaps { --tile:var(--subeng-amber-400); border-color:rgb(245 158 11 / 20%); background:rgb(245 158 11 / 10%) }
.subeng-equipment__stat-icon { display:grid; width:40px; height:40px; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--tile) 20%, transparent); color:var(--tile) }
.subeng-equipment__stat-text { display:flex; flex-direction:column }
.subeng-equipment__stat-label { color:var(--subeng-stone-400); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.subeng-equipment__stat-value { color:#fff; font-family:var(--subeng-eq-display); font-size:20px; font-weight:800; line-height:1.2 }
.subeng-equipment__stat--strengths .subeng-equipment__stat-value,
.subeng-equipment__stat--gaps .subeng-equipment__stat-value { color:var(--tile) }
.subeng-equipment .subeng-equipment__share { display:inline-flex; min-height:44px; gap:10px; align-items:center; padding:0 20px; border-radius:12px; background:linear-gradient(90deg,var(--subeng-amber-700),var(--subeng-orange-700)); color:#fff; font-size:14px; font-weight:600; text-decoration:none }
.subeng-equipment .subeng-equipment__share:hover { color:#fff; filter:brightness(1.08) }

/* Muscle coverage: the old heatmap header, bar, figure and analysis column. */
.subeng-equipment__section--coverage { gap:20px }
.subeng-equipment__coverage-head { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:flex-end; justify-content:space-between }
.subeng-equipment__section--coverage .subeng-equipment__section-title { font-size:24px }
.subeng-equipment__section--coverage .subeng-equipment__section-note { font-size:14px }
.subeng-equipment__overall-box { max-width:240px; text-align:right }
.subeng-equipment .subeng-equipment__overall-figure { margin:0; color:var(--subeng-eq-ink); font-family:var(--subeng-eq-display); font-size:30px; font-weight:700; line-height:1.1 }
.subeng-equipment .subeng-equipment__overall { margin:0; color:var(--subeng-eq-muted); font-size:12px; line-height:1.45 }
.subeng-equipment__overall-bar { display:block; height:12px; overflow:hidden; border-radius:999px; background:var(--subeng-eq-fill) }
.subeng-equipment__overall-bar svg { display:block; width:100%; height:100% }
.subeng-equipment__overall-bar--elite .subeng-equipment__bar-value { fill:var(--subeng-amber-500) }
.subeng-equipment__overall-bar--building .subeng-equipment__bar-value { fill:var(--subeng-r2) }
.subeng-equipment__overall-bar--starting .subeng-equipment__bar-value { fill:var(--subeng-r3) }
.subeng-equipment .subeng-equipment__notice { margin:0; padding:12px; border:1px solid var(--subeng-eq-amber-line); border-radius:12px; background:var(--subeng-eq-amber-bg); color:var(--subeng-eq-amber-ink); font-size:14px }
.subeng-equipment__coverage { display:grid; gap:24px; align-items:start }
.subeng-equipment__coverage-main { display:flex; flex-direction:column; gap:16px; min-width:0 }
.subeng-equipment .subeng-equipment__legend { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:0; color:var(--subeng-eq-soft); font-size:12px }
.subeng-equipment__legend-label { color:var(--subeng-eq-muted) }
.subeng-equipment__legend-key { display:inline-flex; gap:6px; align-items:center }
.subeng-equipment__swatch { width:12px; height:12px; border-radius:2px }
.subeng-equipment__swatch--d3 { background:var(--subeng-eq-accent) }
.subeng-equipment__swatch--d2 { background:var(--subeng-r2) }
.subeng-equipment__swatch--d1 { background:var(--subeng-r3) }
.subeng-equipment__swatch--d0 { background:var(--subeng-r4); outline:1px solid var(--subeng-eq-line); outline-offset:-1px }
.subeng-equipment__diagram { max-width:560px; width:100% }
.subeng-equipment__diagram .subeng-body { padding:0 }
.subeng-equipment .subeng-equipment__muscle-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__muscle-chips li { margin:0 }
.subeng-equipment .subeng-equipment__muscle-chip { display:inline-flex; min-height:44px; align-items:center; padding:8px 14px; border:1px solid var(--subeng-eq-line); border-radius:8px; background:var(--subeng-eq-band); color:var(--subeng-eq-body); font-size:14px; font-weight:500; text-decoration:none }
.subeng-equipment .subeng-equipment__muscle-chip:hover { background:var(--subeng-eq-fill); color:var(--subeng-eq-ink) }
.subeng-equipment .subeng-equipment__muscles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__muscle { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; align-items:baseline; margin:0; padding-block:8px }
.subeng-equipment__muscle-name { min-width:0 }
.subeng-equipment .subeng-equipment__muscle-link { color:var(--subeng-eq-ink); font-family:var(--subeng-eq-display); font-size:14px; font-weight:700; text-decoration:none }
.subeng-equipment a.subeng-equipment__muscle-link::after { position:absolute; inset:0; content:"" }
.subeng-equipment__muscle-value { color:var(--subeng-eq-body); font-size:12px; font-weight:600 }
.subeng-equipment__muscle-count { grid-column:1 / -1; grid-row:3; color:var(--subeng-eq-muted); font-size:12px }
.subeng-equipment__bar { grid-column:1 / -1; grid-row:2; display:block; height:8px; overflow:hidden; border-radius:999px }
.subeng-equipment__bar svg { display:block; width:100%; height:100% }
.subeng-equipment__bar-track { fill:var(--subeng-eq-fill) }
.subeng-equipment__bar-value { fill:var(--subeng-eq-accent) }

/* Analysis: amber warning, numbered fixes, gap tiles. */
.subeng-equipment__gaps { display:flex; flex-direction:column; gap:16px; min-width:0 }
.subeng-equipment .subeng-equipment__analysis-label { display:flex; gap:8px; align-items:center; margin:0; color:var(--subeng-eq-body); font-size:14px; font-weight:600 }
.subeng-equipment__analysis-label .subeng-equipment__icon { color:var(--subeng-eq-muted) }
.subeng-equipment__gap-alert { display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--subeng-eq-amber-line); border-radius:12px; background:var(--subeng-eq-amber-bg); color:var(--subeng-amber-500) }
.subeng-equipment .subeng-equipment__gaps-title { margin:0; color:var(--subeng-eq-amber-ink); font-family:inherit; font-size:14px; font-weight:600; line-height:1.4 }
.subeng-equipment .subeng-equipment__gap-alert .subeng-equipment__gaps-note { margin:2px 0 0; color:var(--subeng-eq-amber-text); font-size:12px; line-height:1.45 }
.subeng-equipment .subeng-equipment__gaps-note { margin:0; color:var(--subeng-eq-muted); font-size:12px; line-height:1.45 }
.subeng-equipment__gaps .subeng-equipment__overline { margin:0 }
.subeng-equipment .subeng-equipment__fills { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; counter-reset:fill }
.subeng-equipment .subeng-equipment__fill { position:relative; display:flex; flex-direction:column; gap:2px; margin:0; padding:12px 12px 12px 56px; border:1px solid var(--subeng-eq-line); border-radius:8px; background:var(--subeng-eq-band); counter-increment:fill }
.subeng-equipment .subeng-equipment__fill::before { position:absolute; top:12px; left:12px; display:grid; width:32px; height:32px; place-items:center; border-radius:8px; background:var(--subeng-eq-line); color:var(--subeng-eq-soft); font-size:14px; font-weight:700; content:counter(fill) }
.subeng-equipment .subeng-equipment__fill:first-child { border-color:var(--subeng-r4); background:var(--subeng-eq-tint) }
.subeng-equipment .subeng-equipment__fill:first-child::before { background:var(--subeng-eq-accent); color:#fff }
.subeng-equipment__fill-name { color:var(--subeng-eq-ink); font-size:14px; font-weight:600 }
.subeng-equipment__fill-covers { color:var(--subeng-eq-muted); font-size:12px; line-height:1.45 }
.subeng-equipment__fill-unlocks { color:var(--subeng-eq-accent); font-size:12px; font-weight:700 }
.subeng-equipment .subeng-equipment__gap-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__gap-tiles li { display:flex; margin:0 }
.subeng-equipment .subeng-equipment__gap-tile { display:flex; flex:1; min-height:44px; gap:6px; align-items:center; justify-content:space-between; padding:8px; border:1px solid var(--subeng-eq-line); border-radius:8px; background:var(--subeng-eq-band); color:var(--subeng-eq-body); font-size:14px; font-weight:500; text-decoration:none }
.subeng-equipment .subeng-equipment__gap-tile:hover { background:var(--subeng-eq-fill); color:var(--subeng-eq-ink) }
.subeng-equipment__gap-value { padding:2px 6px; border-radius:4px; background:var(--subeng-emerald-100); color:var(--subeng-emerald-700); font-size:12px; font-weight:600 }
.subeng-equipment__gap-value--none { background:var(--subeng-eq-line); color:var(--subeng-eq-soft) }

/* Power Combo: the old amber callout. */
.subeng-equipment .subeng-equipment__combos { display:grid; gap:16px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__combo { display:flex; flex-direction:column; gap:8px; margin:0; padding:20px; border:1px solid var(--subeng-eq-amber-line); border-radius:16px; background:linear-gradient(135deg,var(--subeng-eq-amber-bg),var(--subeng-orange-50)) }
.subeng-equipment__combo-head { display:flex; gap:8px; align-items:center }
.subeng-equipment__combo-icon { display:grid; width:32px; height:32px; place-items:center; border-radius:8px; background:linear-gradient(135deg,var(--subeng-amber-400),var(--subeng-orange-500)); color:#fff }
.subeng-equipment .subeng-equipment__combo-name { margin:0; color:var(--subeng-eq-amber-ink); font-family:var(--subeng-eq-display); font-size:16px; font-weight:700 }
.subeng-equipment .subeng-equipment__combo-note { margin:0; color:var(--subeng-eq-amber-text); font-size:14px; line-height:1.6 }
.subeng-equipment .subeng-equipment__combo-count { margin:0; color:var(--subeng-eq-amber-ink); font-size:14px; font-weight:700 }

/* Best Equipment to Buy Next: filter bar, then one card per piece. */
.subeng-equipment__card--roi { display:flex; flex-direction:column; gap:16px; padding:16px }
.subeng-equipment__controls { display:flex; flex-direction:column; gap:16px; padding-block-end:16px; border-block-end:1px solid var(--subeng-eq-fill) }
.subeng-equipment__filter { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.subeng-equipment__filter-label { display:inline-flex; flex-basis:100%; gap:6px; align-items:center; color:var(--subeng-eq-muted); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase }
.subeng-equipment .subeng-equipment__filter-link { display:inline-flex; min-height:44px; gap:8px; align-items:center; padding:8px 12px; border:1px solid var(--subeng-eq-line); border-radius:12px; background:#fff; color:var(--subeng-eq-soft); font-size:14px; font-weight:500; text-decoration:none; transition:border-color .2s }
.subeng-equipment .subeng-equipment__filter-link:hover { border-color:var(--subeng-eq-line2); color:var(--subeng-eq-ink) }
.subeng-equipment__filter-count { margin-inline-start:4px; padding:2px 6px; border-radius:999px; background:var(--subeng-eq-fill); font-size:12px; font-weight:600 }
.subeng-equipment .subeng-equipment__filter-link--current { border-color:var(--subeng-eq-line2); background:var(--subeng-eq-fill); color:var(--subeng-eq-ink); outline:2px solid var(--subeng-stone-400); outline-offset:1px }
.subeng-equipment .subeng-equipment__filter-link--budget.subeng-equipment__filter-link--current { border-color:var(--subeng-r4); background:var(--subeng-eq-tint); color:var(--subeng-eq-deep); outline-color:var(--subeng-r2) }
.subeng-equipment .subeng-equipment__filter-link--mid_tier.subeng-equipment__filter-link--current { border-color:var(--subeng-sky-200); background:var(--subeng-eq-sky-tint); color:var(--subeng-eq-sky-deep); outline-color:var(--subeng-sky-400) }
.subeng-equipment .subeng-equipment__filter-link--advanced.subeng-equipment__filter-link--current { border-color:var(--subeng-eq-amber-line); background:var(--subeng-eq-amber-bg); color:var(--subeng-eq-amber-text); outline-color:var(--subeng-amber-400) }
.subeng-equipment .subeng-equipment__filter-link--current .subeng-equipment__filter-count { background:rgb(255 255 255 / 60%) }

.subeng-equipment .subeng-equipment__roi { display:grid; gap:20px; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__roi-row { position:relative; display:flex; flex-direction:column; gap:16px; margin:0; padding:20px; overflow:hidden; border:1px solid var(--subeng-eq-line); border-radius:16px; background:#fff; box-shadow:0 1px 2px 0 rgb(0 0 0 / 5%) }
/* The owner's best_value row: the old top pick, a 2px accent border and the corner ribbon. */
.subeng-equipment .subeng-equipment__roi-row--best { padding:19px; border:2px solid var(--subeng-eq-accent); box-shadow:var(--subeng-shadow-featured, 0 6px 20px rgb(4 120 87 / 10%)) }
[data-subeng-root] .subeng-equipment .subeng-equipment__ribbon { position:absolute; top:18px; right:-34px; width:136px; margin:0; padding:4px 0; border-radius:0; background:linear-gradient(90deg,var(--subeng-eq-accent),var(--subeng-eq-deep)); color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; text-align:center; text-transform:uppercase; transform:rotate(45deg) }
.subeng-equipment__roi-head { display:flex; gap:16px; align-items:flex-start; padding-inline-end:48px }
.subeng-equipment__rank { display:grid; flex:0 0 48px; height:48px; place-items:center; border-radius:12px; background:var(--subeng-eq-fill); color:var(--subeng-eq-soft); font-family:var(--subeng-eq-display); font-size:18px; font-weight:700 }
.subeng-equipment__roi-row--best .subeng-equipment__rank { background:linear-gradient(135deg,var(--subeng-eq-accent),var(--subeng-eq-deep)); color:#fff }
.subeng-equipment__roi-title { display:flex; flex-direction:column; gap:6px; min-width:0 }
.subeng-equipment .subeng-equipment__roi-name { margin:0; color:var(--subeng-eq-ink); font-family:var(--subeng-eq-display); font-size:18px; font-weight:700; line-height:1.25 }
.subeng-equipment .subeng-equipment__roi-pills { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; margin:0; padding:0; list-style:none; font-size:12px }
.subeng-equipment .subeng-equipment__tier { margin:0; padding:2px 8px; border:1px solid var(--subeng-violet-200); border-radius:999px; background:var(--subeng-violet-100); color:var(--subeng-violet-700) }
.subeng-equipment .subeng-equipment__tier--budget { border-color:var(--subeng-sky-200); background:var(--subeng-sky-100); color:var(--subeng-sky-700) }
.subeng-equipment .subeng-equipment__tier--advanced { border-color:var(--subeng-eq-amber-line); background:var(--subeng-eq-amber-fill); color:var(--subeng-eq-amber-text) }
.subeng-equipment .subeng-equipment__space { margin:0; color:var(--subeng-eq-muted) }
.subeng-equipment .subeng-equipment__roi-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 }
.subeng-equipment__roi-stat { padding:12px 6px; border-radius:12px; background:var(--subeng-eq-band); text-align:center }
.subeng-equipment .subeng-equipment__roi-stat dt { margin:0 0 2px; color:var(--subeng-eq-muted); font-size:12px; line-height:1.3 }
.subeng-equipment .subeng-equipment__roi-stat dd { margin:0; color:var(--subeng-eq-ink); font-family:var(--subeng-eq-display); font-size:15px; font-weight:700; line-height:1.3 }
.subeng-equipment .subeng-equipment__roi-stat--unlocks { background:var(--subeng-eq-tint) }
.subeng-equipment .subeng-equipment__roi-stat--unlocks dt { color:var(--subeng-eq-accent) }
.subeng-equipment .subeng-equipment__roi-stat--unlocks dd { color:var(--subeng-eq-deep) }
.subeng-equipment .subeng-equipment__roi-stat--cost { background:var(--subeng-eq-sky-tint) }
.subeng-equipment .subeng-equipment__roi-stat--cost dt { color:var(--subeng-eq-sky) }
.subeng-equipment .subeng-equipment__roi-stat--cost dd { color:var(--subeng-eq-sky-deep) }
.subeng-equipment .subeng-equipment__roi-buy { margin:0 }
/* The one revenue surface: the old amber deal button, darkened for AA. */
.subeng-equipment .subeng-equipment__buy { display:flex; width:100%; min-height:44px; gap:8px; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; background:var(--subeng-eq-amber-fill); color:var(--subeng-eq-amber-text); font-size:14px; font-weight:600; text-align:center; text-decoration:none }
.subeng-equipment .subeng-equipment__buy:hover { background:var(--subeng-eq-amber-line); color:var(--subeng-eq-amber-ink); text-decoration:none }
.subeng-equipment .subeng-equipment__roi-row--best .subeng-equipment__buy { background:linear-gradient(90deg,var(--subeng-amber-700),var(--subeng-orange-700)); color:#fff }
.subeng-equipment .subeng-equipment__roi-row--best .subeng-equipment__buy:hover { color:#fff; filter:brightness(1.08) }
.subeng-equipment__buy .subeng-equipment__icon:last-child { opacity:.6 }
.subeng-equipment .subeng-equipment__roi-targets { margin:0; color:var(--subeng-eq-muted); font-size:12px; line-height:1.45 }
.subeng-equipment .subeng-equipment__roi-samples summary { display:flex; min-height:44px; align-items:center; color:var(--subeng-eq-accent); font-size:13px; font-weight:600; cursor:pointer }
.subeng-equipment .subeng-equipment__roi-sample-list { display:grid; margin:0; padding:0; list-style:none }
.subeng-equipment .subeng-equipment__roi-sample-list li { margin:0 }
.subeng-equipment .subeng-equipment__roi-sample-list a { display:inline-flex; min-height:44px; align-items:center; font-size:14px }

@media (min-width: 40rem) {
    .subeng-equipment .subeng-equipment__presets { grid-template-columns:repeat(3,minmax(0,1fr)) }
    .subeng-equipment .subeng-equipment__grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
    .subeng-equipment__card--roi { padding:24px }
    .subeng-equipment__controls { flex-flow:row wrap; align-items:flex-end; justify-content:space-between }
    .subeng-equipment__filter--sort .subeng-equipment__filter-label { flex-basis:auto }
    .subeng-equipment .subeng-equipment__roi-stat dd { font-size:16px }
    .subeng-equipment .subeng-equipment__combos { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (min-width: 48rem) {
    .subeng-equipment .subeng-equipment__grid { grid-template-columns:repeat(6,minmax(0,1fr)) }
    .subeng-equipment__scorecard { padding:32px }
    .subeng-equipment__score { gap:24px }
}

@media (min-width: 64rem) {
    .subeng-equipment__coverage { grid-template-columns:minmax(0,2fr) minmax(0,1fr) }
}

@media (max-width: 30rem) {
    .subeng-equipment__card { padding:16px }
    .subeng-equipment .subeng-equipment__preset-link { padding:12px }
    .subeng-equipment .subeng-equipment__chip-label { padding:12px 4px }
    .subeng-equipment__scorecard { padding:20px }
    .subeng-equipment__ring { flex-basis:96px; width:96px; height:96px }
    .subeng-equipment__ring-svg { width:96px; height:96px }
    .subeng-equipment .subeng-equipment__score-value { font-size:30px }
    .subeng-equipment .subeng-equipment__stats { width:100% }
    .subeng-equipment .subeng-equipment__stat { flex:1 1 40% }
    .subeng-equipment__overall-box { text-align:left }
    .subeng-equipment .subeng-equipment__roi-row { padding:16px }
    .subeng-equipment .subeng-equipment__roi-row--best { padding:15px }
    .subeng-equipment .subeng-equipment__roi-stat dt { font-size:11px }
}

@media (forced-colors: active) {
    .subeng-equipment__chip-input:checked + .subeng-equipment__chip-label { border:3px solid CanvasText }
    .subeng-equipment .subeng-equipment__filter-link--current { border:3px solid CanvasText }
    .subeng-equipment__bar-value { fill:CanvasText }
}