/* Training instruments: shared chassis, distinct functional assemblies. */
.wb-training {
    position:relative; min-width:0; padding:10px 10px 4px; color:var(--wb-text); background:var(--wb-surface);
    border:2px solid var(--wb-brass-shadow); border-left-width:6px;
    box-shadow:inset 0 2px var(--wb-brass),inset 2px 0 var(--wb-bg),inset 0 -3px var(--wb-bg),0 4px var(--wb-bg);
    font:400 14px/1.4 var(--wb-font-text); font-synthesis:none; overflow-wrap:anywhere;
}
.wb-training::before,.wb-training::after { content:"";position:absolute;left:-6px;width:6px;height:8px;background:var(--wb-brass);border:2px solid var(--wb-brass-shadow);box-shadow:inset 0 1px var(--wb-highlight);pointer-events:none; }
.wb-training::before {top:12px;} .wb-training::after {bottom:12px;}
.wb-training__header {display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;border-bottom:2px solid var(--wb-divider);padding-bottom:8px;font:700 12px/1.4 var(--wb-font-label);color:var(--wb-text-muted);}
.wb-training__status { --card-signal:var(--wb-success); }
.wb-training[data-status="unaffordable"] .wb-training__status { --card-signal:var(--wb-text-muted); }
.wb-training[data-status="max"] .wb-training__status { --card-signal:var(--wb-brass); }
.wb-training__nameplate {margin:12px 0;min-height:0;border-left:3px solid var(--wb-brass);padding-left:10px;}
.wb-training h3 {font:400 20px/1.25 var(--wb-font-title);margin:0;}
.wb-training__instrument {display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:stretch;margin-bottom:10px;}
.wb-training figure {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:8px 4px;background:var(--wb-bg);border:2px solid var(--wb-divider);box-shadow:inset 2px 2px var(--wb-panel),inset -2px -2px var(--wb-brass-shadow);}
.wb-training__art {width:96px;height:88px;flex:none;}
.wb-training figcaption {font:700 10px/1.3 var(--wb-font-label);color:var(--wb-text-muted);text-align:center;margin-top:6px;letter-spacing:.03em;}
.wb-training__readout {min-width:0;background:var(--wb-panel);padding:12px 8px;border-top:2px solid var(--wb-bg);border-bottom:2px solid var(--wb-divider);display:flex;flex-direction:column;justify-content:center;gap:8px;}
.wb-training__readout>span:first-child {font:700 12px/1.3 var(--wb-font-label);color:var(--wb-text-secondary);}
.wb-training__readout strong {font:400 28px/1.1 var(--wb-font-numeric);font-variant-numeric:tabular-nums;color:var(--wb-lungs);}
.wb-training__readout small {font-size:16px;color:var(--wb-text-secondary);}
.wb-training__subvalue {min-height:40px;font:400 14px/1.4 var(--wb-font-text);color:var(--wb-text);}
.wb-training__next {display:grid;grid-template-columns:1fr;gap:4px 10px;padding:10px 12px;background:var(--wb-surface-raised);border-left:3px solid var(--wb-brass);min-height:110px;}
.wb-training__next>span:first-child {font:700 12px/1.4 var(--wb-font-label);color:var(--wb-text-secondary);}
.wb-training__next strong {font:400 20px/1.2 var(--wb-font-numeric);text-align:left;min-height:24px;}
.wb-training__next>span:last-child {grid-column:1/-1;min-height:40px;color:var(--wb-text-secondary);}
.wb-training__details {margin:4px 0;}
.wb-training__details summary {min-height:48px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--wb-text-secondary);font-size:14px;}
.wb-training__details summary::before {content:"+";font:400 20px var(--wb-font-numeric);color:var(--wb-brass);}
.wb-training__details[open] summary::before {content:"−";}
.wb-training__details p {margin:0 0 12px;line-height:1.5;}
.wb-training__checkout {display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,1fr);gap:10px;align-items:stretch;min-height:96px;border-top:2px solid var(--wb-divider);padding-top:10px;}
.wb-training__price {display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;}
.wb-training__price span {font:700 12px/1.4 var(--wb-font-label);color:var(--wb-text-muted);}
.wb-training__price strong {font:400 20px/1.2 var(--wb-font-numeric);font-variant-numeric:tabular-nums;overflow-wrap:normal;min-height:48px;}
#shop-content .wb-training button {align-self:center;min-height:56px;min-width:48px;padding:8px 8px;border:2px solid var(--wb-brass);background:var(--wb-button-primary);color:var(--wb-text);box-shadow:inset 0 2px var(--wb-button-primary-hover),0 3px var(--wb-bg);font:700 16px/1.2 var(--wb-font-label);cursor:pointer;touch-action:manipulation;}
#shop-content .wb-training button:not([aria-disabled="true"]):hover {background:var(--wb-button-primary-hover);}
#shop-content .wb-training button:not([aria-disabled="true"]):active {background:var(--wb-button-primary-pressed);box-shadow:inset 0 2px var(--wb-bg);transform:translateY(2px);}
#shop-content .wb-training button[aria-disabled="true"] {background:var(--wb-disabled);color:var(--wb-text-secondary);border-color:var(--wb-border);box-shadow:inset 0 2px var(--wb-divider);cursor:default;}
.wb-training :is(button,summary):focus-visible,.wb-training:focus-visible {outline:3px solid var(--wb-focus);outline-offset:2px;}
/* Keep one line for transaction feedback to avoid changing card height on purchase. */
.wb-training__feedback {margin:0;min-height:20px;color:var(--wb-text-secondary);font:400 14px/20px var(--wb-font-text);}
.wb-training[data-feedback="purchase"] .wb-training__feedback {color:var(--wb-text);}
.wb-training[data-feedback="denied"] .wb-training__feedback {color:var(--wb-warning);}
@media (min-width:360px) { .wb-training__instrument {grid-template-columns:128px minmax(0,1fr);} }
@media (prefers-reduced-motion:reduce) {#shop-content .wb-training button:not([aria-disabled="true"]):active {transform:none;} }

.wb-training__instrument--throat .wb-training__readout strong {color:var(--wb-warning);}
.wb-training__instrument--munchies .wb-training__readout strong {color:var(--wb-brass);}
.wb-training__buff {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;margin-bottom:10px;border:2px solid var(--wb-divider);background:var(--wb-panel);}
.wb-training__buff span {font:700 12px/1.4 var(--wb-font-label);color:var(--wb-text-secondary);}
.wb-training__buff strong {font:400 28px/1 var(--wb-font-numeric);font-variant-numeric:tabular-nums;}
.wb-training[data-active="true"] .wb-training__buff {border-left:4px solid var(--wb-success);}
.wb-training[data-active="false"] .wb-training__buff strong {color:var(--wb-text-muted);}
/* Bolted upper edge, recessed counter and calibrated resistance rack. */
.wb-training__fasteners {position:absolute;inset:4px;pointer-events:none;}
.wb-training__fasteners i {position:absolute;right:0;width:8px;height:8px;border-right:2px solid var(--wb-brass);}
.wb-training__fasteners i:first-child {top:0;border-top:2px solid var(--wb-brass);}
.wb-training__fasteners i:last-child {bottom:0;border-bottom:2px solid var(--wb-brass-shadow);}
.wb-training__readout {border-right:2px solid var(--wb-brass-shadow);box-shadow:inset 2px 0 var(--wb-bg);}
.wb-training__readout strong {position:relative;align-self:flex-start;display:flex;align-items:baseline;gap:4px;max-width:100%;padding:4px 6px;border-left:2px solid var(--wb-divider);border-bottom:2px solid var(--wb-divider);background:var(--wb-bg);}
/* One recessed level instrument; only the accent and tick mode vary. */
.wb-training__progress {
    --progress-accent:var(--wb-lungs);
    position:relative;min-width:0;margin:0 0 10px;padding:8px 10px 10px;
    border:2px solid var(--wb-brass-shadow);background:var(--wb-bg);
    box-shadow:inset 0 1px var(--wb-brass),inset 2px 0 var(--wb-panel),0 2px var(--wb-panel);
}
.wb-training__progress--throat {--progress-accent:var(--wb-warning);}
.wb-training__progress-header {display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:28px;color:var(--wb-text-secondary);font:700 12px/1.4 var(--wb-font-label);}
.wb-training__progress-header strong {margin-left:4px;font:400 20px/1.2 var(--wb-font-numeric);font-variant-numeric:tabular-nums;color:var(--wb-text);}
.wb-training__progress-track {position:relative;height:24px;border:1px solid var(--wb-border);background:var(--wb-bg);}
.wb-training__progress-fill {position:absolute;inset:0 auto 0 0;width:calc(var(--progress-ratio) * 100%);background:var(--progress-accent);box-shadow:inset 0 2px var(--wb-highlight),inset 0 -3px var(--wb-brass-shadow);}
.wb-training__progress-fill::after {content:"";position:absolute;inset:0 0 0 auto;width:calc(100% / var(--progress-level));border-right:1px solid var(--wb-bg);}
.wb-training__progress-ticks {position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--progress-ticks),minmax(0,1fr));pointer-events:none;}
.wb-training__progress-tick {position:relative;min-width:0;}
.wb-training__progress[data-mode="continuous"] .wb-training__progress-tick:not(:last-child) {border-right:1px solid var(--wb-bg);}
.wb-training__progress[data-mode="continuous"] .wb-training__progress-tick::after {content:"";position:absolute;right:0;top:0;width:1px;height:6px;background:var(--wb-border);}
.wb-training__progress[data-mode="segmented"] .wb-training__progress-tick:not(:last-child) {border-right:3px solid var(--wb-bg);}
.wb-training__progress[data-mode="segmented"] .wb-training__progress-tick::after {content:"";position:absolute;inset:0;border:1px solid var(--wb-border);}
.wb-training__progress[data-mode="segmented"] .is-current::after {border:2px solid var(--wb-highlight);box-shadow:inset 0 0 0 1px var(--wb-bg);}
.wb-training__progress[data-mode="segmented"] .is-next::after {border-style:dashed;border-color:var(--wb-text-secondary);}
@keyframes training-level-step {from {background:var(--wb-highlight);}to {background:transparent;}}
.wb-training[data-feedback="purchase"] .wb-training__progress-fill::after {animation:training-level-step 350ms steps(3,end) 1;}
@media (prefers-reduced-motion:reduce) {.wb-training[data-feedback="purchase"] .wb-training__progress-fill::after {animation:none;}}
@keyframes training-confirm {0%,50% {border-color:var(--wb-success);}100% {border-color:var(--wb-brass-shadow);}}
@keyframes training-register {from {outline:2px solid var(--wb-success);outline-offset:2px;}to {outline:2px solid transparent;outline-offset:2px;}}
.wb-training[data-training-card="munchies"][data-feedback="purchase"] {animation:training-confirm 600ms steps(2,end) 1;}
.wb-training[data-training-card="munchies"][data-feedback="purchase"] :is(.wb-training__readout,.wb-training__buff) {animation:training-register 400ms steps(2,end) 1;}
@media (prefers-reduced-motion:reduce) {.wb-training,.wb-training * {animation:none;transition:none;}}
@media (prefers-reduced-motion:reduce) {
    .wb-training[data-training-card="munchies"][data-feedback="purchase"],.wb-training[data-training-card="munchies"][data-feedback="purchase"] :is(.wb-training__readout,.wb-training__buff) {animation:none;}
}
/* A landscape drawer is a workbench: readings left, offer and controls right. */
@media (min-width:640px) and (max-width:1023px) and (max-height:500px) {
    .wb-training {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;align-items:start;}
    .wb-training__header {grid-column:1/-1;grid-row:1;}
    .wb-training__nameplate {grid-column:1;grid-row:2;margin:10px 0;}
    .wb-training__instrument {grid-column:1;grid-row:3;margin-bottom:0;}
    .wb-training__next {grid-column:2;grid-row:2;margin-top:10px;}
    .wb-training__checkout {grid-column:2;grid-row:3;}
    .wb-training__details {grid-column:2;grid-row:4;}
    .wb-training__progress,.wb-training__buff {grid-column:1;grid-row:4;align-self:center;margin:8px 0;}
    .wb-training__feedback {grid-column:1/-1;grid-row:5;}
}