/* Raised controls and recessed fields for Default designlab only. */
:root[data-look="original"]{
 --lab-light:color-mix(in srgb,var(--green) 10%,#fff);
 --lab-raised:inset 0 1px 0 color-mix(in srgb,var(--lab-light) 28%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--dark) 25%,transparent),0 1px 2px #0004,0 8px 24px -6px color-mix(in srgb,var(--green) 22%,transparent);
 --lab-recessed:inset 0 2px 4px color-mix(in srgb,var(--dark) 36%,transparent),inset 0 1px 2px #0003,0 1px 0 color-mix(in srgb,var(--lab-light) 16%,transparent);
 --lab-field:color-mix(in srgb,var(--paper) 94%,var(--dark));
}
:root[data-look="original"] button:not(.quiet):not(.nav-item):not(.exercise-drag-handle):not(.superset-info):not(.set-delete):not(#account-button):not(.corner-menu-toggle){box-shadow:var(--lab-raised);background-image:linear-gradient(to bottom,#ffffff0a,transparent 75%)}
:root[data-look="original"] :is(.surface:not(.pass-choice):not(.exercise),.session-head,.stat,dialog),
:root[data-look="original"] #exercise-list>.exercise-swipe>.exercise{box-shadow:var(--lab-raised)}
:root[data-look="original"] #exercise-list .superset-group-exercises .exercise{box-shadow:none}
:root[data-look="original"] :is(input:not([type="range"]):not([type="checkbox"]):not([type="file"]),textarea,select){background:var(--lab-field);box-shadow:var(--lab-recessed);color:var(--ink)}
:root[data-look="original"] .previous{background:var(--lab-field);box-shadow:var(--lab-recessed)}
:root[data-look="original"] button:not(.quiet):not(.nav-item):not(.exercise-drag-handle):not(.superset-info):not(.set-delete):not(#account-button):not(.corner-menu-toggle):active:not(:disabled){box-shadow:inset 0 2px 4px color-mix(in srgb,var(--dark) 30%,transparent),0 1px 2px #0003;transform:translateY(1px)}

/* Rest and logged-set feedback use the avatar palette, rather than fixed gold/green. */
:root[data-look="original"] :is(.exercise,.rest-bar){--success:var(--green);--success-soft:var(--soft);--warning:var(--green);--warning-soft:var(--soft)}
:root[data-look="original"] .set-table tr:is(.logged-work,.logged-warmup,.warmup-set,.drop-set){--set-color:var(--green);--set-tint:var(--soft)}

@media(max-width:520px){
 :root[data-look="original"] .set-rest{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 :root[data-look="original"] .set-rest-actions{width:100%;justify-content:flex-end}
 :root[data-look="original"] .set-table .set-state{overflow-wrap:anywhere;line-height:1.35}
}

/* Set status comes from the figures, not coloured row bands. */
:root[data-look="original"]{--lab-logged-ink:var(--muted);--lab-raised:inset 0 1px 0 color-mix(in srgb,var(--lab-light) 30%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--dark) 38%,transparent),0 2px 4px #0005,0 12px 28px -6px color-mix(in srgb,var(--green) 28%,transparent)}
:root[data-look="original"]:is([data-palette="graphite"],[data-palette="midnight"],[data-palette="plum"],[data-palette="neonlime"],[data-palette="neonpink"],[data-palette="electric"],[data-palette-mode="dark"]){--lab-logged-ink:color-mix(in srgb,var(--muted) 76%,var(--paper))}
:root[data-look="original"] #exercise-list .set-table tr:is(.completed,.next-set){background:transparent;box-shadow:none}
:root[data-look="original"] #exercise-list .set-table tr:is(.completed,.next-set)>td{border-color:transparent}
:root[data-look="original"] #exercise-list .set-table tr.next-set>td::before,:root[data-look="original"] #exercise-list .set-table tr.next-set>td::after{display:none;content:none}
:root[data-look="original"] #exercise-list .set-table tr.completed :is(.set-number,.set-state,input){color:var(--lab-logged-ink);-webkit-text-fill-color:var(--lab-logged-ink);text-shadow:none}
:root[data-look="original"] #exercise-list .set-table tr.next-set input{background:var(--dark);color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 0 6px #ffffff66,0 0 12px color-mix(in srgb,var(--green) 45%,transparent);font-weight:700}
:root[data-look="original"] #exercise-list .set-table tr.next-set .set-number{color:#fff;-webkit-text-fill-color:#fff;background:transparent;border-radius:0;min-width:0;padding:0;text-shadow:0 1px 2px var(--dark),0 0 3px var(--dark),0 0 6px #ffffff88,0 0 12px color-mix(in srgb,var(--green) 45%,transparent)}
:root[data-look="original"] #exercise-list .set-table tr.next-set .set-state{color:var(--ink)}
:root[data-look="original"] #exercise-list .exercise,:root[data-look="original"] #exercise-list .superset-group-exercises{border-color:transparent}

/* Superset links use the same raised and pressed states as other buttons. */
:root[data-look="original"] #exercise-list .exercise-link{border:0;border-image:none;border-radius:8px;background-color:var(--paper);color:var(--green)}
:root[data-look="original"] #exercise-list .exercise-link.linked{background-color:var(--soft);color:var(--green)}
:root[data-look="original"] #exercise-list .exercise-link.link-selected{background-color:var(--green);color:var(--on-accent,#fff)}

/* Every button lights upward in a shade taken from its own rendered colour. */
:root[data-look="original"] button{
 --lab-button-tint:color-mix(in srgb,var(--lab-button-colour,var(--green)) 68%,#fff);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--lab-button-tint) 38%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--dark) 38%,transparent),0 2px 4px #0004,0 -9px 25px -6px color-mix(in srgb,oklch(from var(--lab-button-glow-colour,var(--green)) l calc(c * 1.6) h) var(--lab-button-glow-strength,4.5%),transparent) !important;
}
:root[data-look="original"] button:active:not(:disabled){box-shadow:inset 0 2px 4px color-mix(in srgb,var(--dark) 35%,transparent),0 1px 2px #0003,0 -7px 20px -6px color-mix(in srgb,oklch(from var(--lab-button-glow-colour,var(--green)) l calc(c * 1.6) h) var(--lab-button-glow-strength,4.5%),transparent) !important}

/* Raised panels use the same colour-matched upper light as buttons. */
:root[data-look="original"] :is(.surface:not(.pass-choice):not(.exercise),.session-head,.stat,.set-rest,.rest-bar,dialog),
:root[data-look="original"] #exercise-list>.exercise-swipe>.exercise{
 --lab-surface-tint:color-mix(in srgb,var(--lab-surface-colour,var(--paper)) 68%,#fff);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--lab-surface-tint) 38%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--dark) 38%,transparent),0 2px 4px #0004,0 -9px 25px -6px color-mix(in srgb,oklch(from var(--lab-surface-tint) l calc(c * 2.2) h) 38%,transparent) !important;
}

/* Active numeric wells take their colour from the theme's action accent. */
:root[data-look="original"]{--lab-active-field:var(--green)}
:root[data-look="original"]:is([data-palette="graphite"],[data-palette="midnight"],[data-palette="plum"],[data-palette="neonlime"],[data-palette="neonpink"],[data-palette="electric"],[data-palette-mode="dark"]){--lab-active-field:color-mix(in srgb,var(--green) 42%,var(--dark))}
:root[data-look="original"] #exercise-list .set-table tr.next-set input{background:var(--lab-active-field);border-color:color-mix(in srgb,var(--green) 65%,var(--paper))}

/* Four colour choices, with swatches instead of avatar portraits. */
:root[data-look="original"] .colour-settings .avatar-options{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-look="original"] .colour-settings .avatar-option{min-height:124px;gap:12px}
.colour-preview{display:grid;grid-template-columns:2fr 1fr 1fr;width:100%;height:48px;border-radius:8px;overflow:hidden}
.colour-preview i{display:block}

/* A saved workout keeps its information panel, without an avatar or speech tail. */
.workout-recap{grid-template-columns:minmax(0,1fr)}
.recap-bubble::before{display:none;content:none}
.recap-bubble .recap-next{padding:12px 14px;border-radius:8px;background:var(--soft);color:var(--ink);margin-bottom:14px}
.recap-next strong{margin-left:6px}

/* Keep the raised face visible when an exercise opens, including inside supersets. */
:root[data-look="original"] #exercise-list .exercise.is-active>summary{
 --lab-active-face:color-mix(in srgb,var(--soft) 68%,#fff);
 background-image:linear-gradient(to bottom,#ffffff0d,transparent 75%);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--lab-active-face) 38%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--dark) 25%,transparent),0 3px 6px #0002;
}

/* Default uses a theme-coloured exchange icon; the sprite belongs to Synthwave. */
:root[data-look="original"] .exercise-swipe-actions .quick-switch-icon{width:32px;height:32px;flex:none}
:root[data-look="original"] .exercise-swipe-actions [data-quick-swap].is-armed{color:var(--on-accent,#fff)}

/* Add exercise uses depth instead of a pale perimeter border. */
:root[data-look="original"] #add-exercise{border-color:transparent}

/* A subtle top light gives the workout heading the same surface depth. */
:root[data-look="original"] .session-head{background-image:linear-gradient(to bottom,color-mix(in srgb,var(--green) 7%,#ffffff08),transparent 90%)}

/* Status messages belong to the selected Default palette. */
:root[data-look="original"] #notice{
 background-color:var(--paper);color:var(--ink);border:0;border-radius:12px;
 background-image:linear-gradient(to bottom,color-mix(in srgb,var(--green) 7%,transparent),transparent 90%);
 --lab-notice-light:color-mix(in srgb,var(--paper) 68%,#fff);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--lab-notice-light) 38%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--dark) 38%,transparent),0 2px 4px #0004,0 -9px 25px -6px color-mix(in srgb,oklch(from var(--lab-notice-light) l calc(c * 2.2) h) 38%,transparent);
 font-size:1rem;font-weight:600;
}

/* Only dark palettes use dark active fields; light palettes retain their accent. */
:root[data-look="original"]:is([data-palette="graphite"],[data-palette="midnight"],[data-palette="plum"],[data-palette="neonlime"],[data-palette="neonpink"],[data-palette="electric"],[data-palette-mode="dark"]) #exercise-list .set-table tr.next-set input{background:var(--dark);border-color:var(--line)}

/* Reorder handles remain generous touch targets without a visible button surface. */
:root[data-look="original"] button.exercise-drag-handle,
:root[data-look="original"] button.exercise-drag-handle:active:not(:disabled){background:transparent;border:0;box-shadow:none !important}

/* Superset state is carried by the link itself, rather than a filled button. */
:root[data-look="original"] #exercise-list .exercise-link:is(.linked,.link-selected){background-color:var(--paper);color:var(--green)}
:root[data-look="original"] #exercise-list .exercise-link:is(.linked,.link-selected)>svg{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--green) 80%,transparent)) drop-shadow(0 0 6px color-mix(in srgb,var(--green) 55%,transparent))}

/* Quiet controls share the superset link's raised face without perimeter strokes. */
:root[data-look="original"] #exercise-list .set-delete,
:root[data-look="original"] #inline-rest-add,
:root[data-look="original"] #exercise-list .exercise-tools button:is([data-swap],[data-remove]),
:root[data-look="original"] #session-pause{
 background-color:var(--paper);background-image:linear-gradient(to bottom,#ffffff0a,transparent 75%);border-color:transparent;
}
:root[data-look="original"] #exercise-list .set-delete{color:var(--green);border:0}
:root[data-look="original"] :is(.session-head,.work-aside .side-section){border-color:transparent}
:root[data-look="original"] #exercise-list .set-table tr[data-set] input[type="number"]{border-color:transparent}
:root[data-look="original"] #exercise-list .set-table input[type="number"]:focus-visible{outline:2px solid color-mix(in srgb,var(--green) 30%,transparent);outline-offset:1px}

/* Rest is a full-width dark strip at the bottom of its exercise card. */
:root[data-look="original"] #exercise-list .exercise-logger .set-rest{
 margin-inline:calc(-1 * var(--exercise-inset,20px));margin-bottom:-20px;
 width:calc(100% + 2 * var(--exercise-inset,20px));padding:18px var(--exercise-inset,20px);
 background:var(--dark);color:#fff;border:0;border-radius:0;box-shadow:none !important;
}
:root[data-look="original"] #exercise-list .set-rest-clock strong{color:#fff;-webkit-text-fill-color:#fff;background:none}
@media(max-width:680px){:root[data-look="original"] #exercise-list .exercise-logger .set-rest{margin-bottom:-16px}}

/* Inactive navigation picks up a restrained tint from the current palette. */
:root[data-look="original"] .sidebar .nav-item:not(.active){background-color:color-mix(in srgb,var(--green) 10%,var(--dark));border-color:transparent}
:root[data-look="original"] .sidebar .nav-item:not(.active):hover{background-color:color-mix(in srgb,var(--green) 18%,var(--dark))}

/* Warm-up and drop-set actions use the same borderless raised face as other controls. */
:root[data-look="original"] :is(#add-warmup,#add-drop-set),
:root[data-look="original"] :is(#add-warmup,#add-drop-set):hover{border-color:transparent;background-color:var(--paper)}

/* Recessed information panels sit a shade deeper than the surrounding card. */
:root[data-look="original"] #exercise-list .previous{background:color-mix(in srgb,var(--paper) 82%,var(--dark));border-color:transparent}

/* Keep the navigation focused on its destinations. */
:root[data-look="original"] .sidebar-bottom{display:none}

/* Weight records are gold without changing the set's recessed background. */
:root{--weight-record-gold:#805400}
:root:is([data-palette="graphite"],[data-palette="midnight"],[data-palette="plum"],[data-palette="neonlime"],[data-palette="neonpink"],[data-palette="electric"],[data-palette-mode="dark"],[data-look="synthwave"]){--weight-record-gold:#f3c969}
.weight-record-info{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--weight-record-gold);line-height:1.5}
.weight-record-info>svg{width:32px;height:32px;flex:none}
.weight-record-info strong{display:block}
.weight-record-info small{color:inherit}
:root #exercise-list .set-table tr.completed.weight-record :is(.set-number,.set-state,input){color:var(--weight-record-gold);-webkit-text-fill-color:var(--weight-record-gold);text-shadow:none;font-weight:700}

/* Rest follows the palette: soft accent on light themes, dark strip on dark themes. */
:root[data-look="original"]{--lab-rest-background:var(--soft);--lab-rest-ink:var(--green)}
:root[data-look="original"]:is([data-palette="graphite"],[data-palette="midnight"],[data-palette="plum"],[data-palette="neonlime"],[data-palette="neonpink"],[data-palette="electric"],[data-palette-mode="dark"]){--lab-rest-background:var(--dark);--lab-rest-ink:#fff}
:root[data-look="original"] #exercise-list .exercise-logger .set-rest{background:var(--lab-rest-background);color:var(--lab-rest-ink)}
:root[data-look="original"] #exercise-list .set-rest-clock strong{color:var(--lab-rest-ink);-webkit-text-fill-color:var(--lab-rest-ink)}

.template-save-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.template-save-info{display:grid;place-items:center;width:44px;min-height:44px;padding:10px;flex:none}
.template-save-info svg{width:20px;height:20px}
.template-save-help{flex-basis:100%;max-width:60ch;margin-top:4px;padding:12px 14px;border-radius:8px;background:var(--soft);color:var(--ink);font-size:.875rem;line-height:1.6}

/* A collapsed exercise keeps its weight-record trophy visible in the heading. */
.exercise-record-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;color:var(--weight-record-gold)}
.exercise-record-badge svg{width:24px;height:24px}
.exercise[open]>summary .exercise-record-badge{display:none}

.volume-record-info{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--weight-record-gold);line-height:1.5}
.volume-record-info>svg{width:32px;height:32px;flex:none}
.volume-record-info strong,.volume-record-scope{display:block}
.volume-record-info small{color:inherit}
.exercise-record-badges{display:inline-flex;align-items:center;gap:4px;flex:none}
.exercise[open]>summary .exercise-record-badges{display:none}
:root #exercise-list .set-table tr.completed.volume-record :is(.set-number,.set-state,input){color:var(--weight-record-gold);-webkit-text-fill-color:var(--weight-record-gold);text-shadow:none;font-weight:700}

/* Small, visible gold glyphs get a short glint, with no layout or background animation. */
:root{--record-gold-glint:color-mix(in srgb,var(--weight-record-gold) 85%,#fff)}
:root:is([data-palette="graphite"],[data-palette="midnight"],[data-palette="plum"],[data-palette="neonlime"],[data-palette="neonpink"],[data-palette="electric"],[data-palette-mode="dark"],[data-look="synthwave"]){--record-gold-glint:color-mix(in srgb,var(--weight-record-gold) 62%,#fff)}
:root :is(.weight-record-info,.volume-record-info),
:root #exercise-list .set-table tr.completed:is(.weight-record,.volume-record) :is(.set-number,.set-state,input){
 text-shadow:0 0 5px color-mix(in srgb,var(--weight-record-gold) 25%,transparent);
 animation:record-gold-glint 7s ease-in-out infinite;animation-play-state:paused;
}
:root :is(.weight-record-info,.volume-record-info).gold-in-view,
:root #exercise-list .set-table tr.completed:is(.weight-record,.volume-record) :is(.set-number,.set-state,input).gold-in-view{animation-play-state:running}
:root.gold-page-hidden :is(.weight-record-info,.volume-record-info),
:root.gold-page-hidden #exercise-list .set-table tr.completed:is(.weight-record,.volume-record) :is(.set-number,.set-state,input){animation-play-state:paused}
:root #exercise-list .set-table tr.completed:is(.weight-record,.volume-record) input:focus{animation:none}
.exercise-record-badge svg{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--weight-record-gold) 22%,transparent))}
@keyframes record-gold-glint{0%,40%,60%,100%{color:var(--weight-record-gold);-webkit-text-fill-color:var(--weight-record-gold)}49%,51%{color:var(--record-gold-glint);-webkit-text-fill-color:var(--record-gold-glint)}}
@media(prefers-reduced-motion:reduce){
 :root :is(.weight-record-info,.volume-record-info),
 :root #exercise-list .set-table tr.completed:is(.weight-record,.volume-record) :is(.set-number,.set-state,input){animation:none}
}

/* Workout recap: completed day first, gold records, next workout last. */
.recap-bubble .recap-greeting{display:flex;flex-direction:column;gap:4px}
.recap-greeting>span{font-size:.875rem;color:var(--muted);font-weight:400}
.recap-greeting>strong{font-size:1.8rem;color:var(--ink);line-height:1.2}
.recap-bubble li.recap-record{flex-direction:row;align-items:center;gap:12px;margin:0;padding:12px 0}
.recap-bubble li.recap-record :is(strong,span){color:inherit}
.recap-record>div{min-width:0;overflow-wrap:anywhere}
.recap-record>div>div{font-size:.875rem}
.recap-bubble .recap-next{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 0;padding:14px;background:var(--soft);color:var(--ink);border-radius:8px}
.recap-next>span{font-size:.875rem}
.recap-next>strong{font-size:1.2rem}

/* Optional record graphs stay static and local to the saved-workout recap. */
.recap-history{margin:12px 0 20px;padding:12px;border-radius:8px;background:var(--paper);color:var(--ink);-webkit-text-fill-color:var(--ink)}
.recap-history>summary{cursor:pointer;font-size:.875rem;line-height:1.5;color:var(--green)}
.recap-history>summary strong{font-weight:600}
.recap-history .recap-chart-note{margin:12px 0;color:var(--muted);font-size:.75rem}
.recap-history-chart{margin:16px 0 0;min-width:0}
.recap-history-chart figcaption{font-size:.8rem;color:var(--ink);margin-bottom:4px}
.recap-history-chart svg{display:block;width:100%;height:auto;overflow:visible}
.recap-history-chart text{font:11px 'Segoe UI',sans-serif;fill:var(--muted)}
.recap-chart-grid{stroke:var(--line);stroke-width:1;fill:none}
.recap-chart-line{stroke:var(--green);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.recap-chart-dot{fill:var(--green)}
.recap-chart-latest{fill:var(--weight-record-gold);stroke:var(--paper);stroke-width:1.5}
.recap-workout-record>div{min-width:0;overflow-wrap:anywhere}

/* Default exercise illustrations: one crossfade per deliberate row selection. */
.exercise-illustration{position:relative;display:block;width:156px;height:112px;flex:none;pointer-events:none}
.exercise-pose{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity .7s ease-in-out}
.exercise-pose.pose-first{opacity:1}.exercise-pose.pose-second{opacity:0}
.exercise-illustration.show-second .pose-first{opacity:0}.exercise-illustration.show-second .pose-second{opacity:1}
:root[data-look="original"] #exercise-list .exercise:has(.exercise-illustration)>summary{gap:16px;min-height:136px;padding:12px 20px}
:root:is([data-palette="midnight"],[data-palette="graphite"]) .exercise-pose{filter:brightness(1.12)}
@media(max-width:680px){
 .exercise-illustration{width:96px;height:90px}
 :root[data-look="original"] #exercise-list .exercise:has(.exercise-illustration)>summary{padding:12px;gap:8px;min-height:114px}
 :root[data-look="original"] #exercise-list .exercise:has(.exercise-illustration) summary h3{font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
 :root[data-look="original"] #exercise-list .exercise:has(.exercise-illustration) summary .exercise-drag-handle{width:36px;min-width:36px;padding:6px}
 :root[data-look="original"] #exercise-list .exercise:has(.exercise-illustration) summary .exercise-link{width:40px;min-width:40px}

}
@media(prefers-reduced-motion:reduce){.exercise-pose{transition:none}}

/* Synthwave uses its own neon illustrations with the same click-driven pose change. */
:root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration)>summary{min-height:136px;gap:16px;padding:12px 20px}
:root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration) summary .ex-name{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
:root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration) summary .ex-group-divider{display:none}
:root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration) summary h3{font-size:1.4rem;line-height:1.3}
:root[data-look="synthwave"] .exercise-pose{filter:none}
@media(max-width:680px){
 :root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration)>summary{padding:12px;gap:8px;min-height:114px}
 :root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration) summary h3{font-size:1.1rem;overflow-wrap:anywhere}
 :root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration) summary .exercise-drag-handle{width:36px;min-width:36px;padding:6px}
 :root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration) summary .exercise-link{width:40px;min-width:40px}
}

/* Right-hand controls read: trophies, reorder handle, superset link. */
.exercise>summary{position:relative}
.exercise:not([open])>summary>.exercise-record-badges{position:static;display:flex;gap:4px}

:root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration) summary h3{font-size:1.6rem}
@media(max-width:680px){
 :root[data-look="synthwave"] #exercise-list .exercise:has(.exercise-illustration) summary h3{font-size:1.25rem}
 :root[data-look="original"] #exercise-list .exercise:has(.exercise-illustration) summary h3{font-size:1.05rem}
}
@media(max-width:680px){
 :root #exercise-list .exercise:not([open]):has(.exercise-record-badges)>summary{gap:4px}
 .exercise:not([open])>summary>.exercise-record-badges{gap:2px}
 .exercise:not([open])>summary>.exercise-record-badges .exercise-record-badge{width:20px}
 .exercise:not([open])>summary>.exercise-record-badges svg{width:20px;height:20px}
}
/* Superset help is a plain information icon beside the heading. */
:root #exercise-list .superset-group-head .superset-info,
:root #exercise-list .superset-group-head .superset-info:is(:hover,:active,:focus){
 color:var(--green);background:transparent;background-image:none;border:0;border-image:none;box-shadow:none !important;filter:none;transform:none;
}
:root #exercise-list .superset-group-head .superset-info::before,
:root #exercise-list .superset-group-head .superset-info::after{content:none;display:none}
:root[data-look="synthwave"] #exercise-list .superset-group-head .superset-info{color:#35e7e0}

/* Fully logged exercises settle into a recessed surface. */
:root[data-look="original"] #exercise-list .exercise.is-complete,
:root[data-look="original"] #exercise-list .superset-group-exercises:has(.exercise):not(:has(.exercise:not(.is-complete))){
 box-shadow:inset 0 3px 7px color-mix(in srgb,var(--dark) 48%,transparent),inset 0 1px 2px #0003,0 1px 0 color-mix(in srgb,var(--green) 16%,transparent) !important;
 background-image:linear-gradient(to bottom,color-mix(in srgb,var(--dark) 9%,transparent),transparent 70%);
}
:root[data-look="original"] #exercise-list .exercise.is-complete>summary{
 background:transparent;box-shadow:none;
}
:root[data-look="synthwave"] #exercise-list .exercise.is-complete{
 box-shadow:inset 0 4px 9px #02011099,inset 0 -1px 1px #74b6bf30 !important;filter:none;
}
:root[data-look="synthwave"] #exercise-list .exercise.is-complete>summary{
 background:linear-gradient(to bottom,#02011040,transparent 75%);
 box-shadow:inset 0 3px 7px #02011080,inset 0 -1px 0 #74b6bf22;
}
:root[data-look="synthwave"] #exercise-list .exercise.is-complete::before{display:none;content:none}

/* Active exercise headings retain the palette surface and use its accent for light. */
:root[data-look="original"] #exercise-list .exercise.is-active:not(.is-complete)>summary{
 background-color:var(--paper);
 background-image:linear-gradient(to bottom,color-mix(in srgb,var(--green) 9%,transparent),transparent 85%);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--green) 24%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--dark) 25%,transparent),0 3px 6px #0002;
}

/* The workout overview uses a separate swatch from the selected palette. */
:root[data-look="original"] .session-head{background-color:var(--session-head-bg,var(--soft));color:var(--session-head-ink,var(--ink));background-image:linear-gradient(to bottom,color-mix(in srgb,var(--session-head-ink,var(--ink)) 5%,transparent),transparent 90%)}
:root[data-look="original"] .session-head :is(small,.eyebrow){color:var(--session-head-ink,var(--ink))}
:root[data-look="original"] .session-head .session-progress{background:color-mix(in srgb,var(--session-head-ink,var(--ink)) 18%,transparent)}
:root[data-look="original"] .session-head .session-progress>span{background:var(--session-head-ink,var(--green))}

/* Completed work settles into the page colour while retaining its recessed depth. */
:root[data-look="original"] #exercise-list .exercise.is-complete,
:root[data-look="original"] #exercise-list .superset-group-exercises:has(.exercise):not(:has(.exercise:not(.is-complete))){
 background-color:var(--bg);background-image:none;
}

/* The link button follows its exercise surface, including completed work. */
:root[data-look="original"] #exercise-list .exercise.is-complete>summary .exercise-link,
:root[data-look="original"] #exercise-list .exercise.is-complete>summary .exercise-link:is(.linked,.link-selected,:hover,:active){background-color:var(--bg)}

/* Polished gold keeps a fine dark edge; the brief glint is pure white. */
:root{--weight-record-gold:#e5ad25;--record-gold-glint:#ffffff}
:root:is([data-palette-mode="dark"],[data-look="synthwave"]){--weight-record-gold:#ffd45a;--record-gold-glint:#ffffff}
:root :is(.weight-record-info,.volume-record-info){
 --weight-record-gold:#ffd45a;
 color:var(--weight-record-gold);
 -webkit-text-stroke:.25px #684300;
 text-shadow:0 1px 1px #352000b3,0 0 6px #edb52666;
}
:root #exercise-list .set-table tr.completed:is(.weight-record,.volume-record) :is(.set-number,.set-state,input){
 text-shadow:0 1px 1px #35200099,0 0 5px #edb52655;
}
@keyframes record-gold-glint{
 0%,42%,58%,100%{color:var(--weight-record-gold);-webkit-text-fill-color:var(--weight-record-gold)}
 49%,51%{color:#ffffff;-webkit-text-fill-color:#ffffff;text-shadow:0 1px 1px #68430099,0 0 7px #ffffff99}
}

/* A masked colour layer tints only the illustration pixels in Default. */
:root[data-look="original"] .exercise-illustration{isolation:isolate}
:root[data-look="original"] .exercise-illustration::before,
:root[data-look="original"] .exercise-illustration::after{
 content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
 background:color-mix(in srgb,var(--illustration-tint,var(--green)) 78%,transparent);mix-blend-mode:color;
 mask-size:contain;mask-repeat:no-repeat;mask-position:center;
 transition:opacity .7s ease-in-out;
}
:root[data-look="original"] .exercise-illustration::before{mask-image:var(--exercise-pose-first);opacity:1}
:root[data-look="original"] .exercise-illustration::after{mask-image:var(--exercise-pose-second);opacity:0}
:root[data-look="original"] .exercise-illustration.show-second::before{opacity:0}
:root[data-look="original"] .exercise-illustration.show-second::after{opacity:1}
@media(prefers-reduced-motion:reduce){
 :root[data-look="original"] .exercise-illustration::before,
 :root[data-look="original"] .exercise-illustration::after{transition:none}
}

/* Raised exercise faces catch a lighter, hue-preserving light at the top. */
:root[data-look="original"] #exercise-list .exercise:not(.is-complete)>summary,
:root[data-look="original"] #exercise-list .exercise.is-active:not(.is-complete)>summary{
 background-image:linear-gradient(to bottom,oklch(from var(--paper) calc(l + .045) c h),transparent 85%);
}

/* Light palettes use a lighter themed well for the next set. */
:root[data-look="original"][data-palette-mode="light"] #exercise-list .set-table tr.next-set input{
 background:color-mix(in srgb,var(--paper) 85%,#ffffff);
 color:var(--ink);-webkit-text-fill-color:var(--ink);
 text-shadow:0 0 4px color-mix(in srgb,var(--illustration-tint,var(--green)) 18%,transparent);
 border-color:color-mix(in srgb,var(--green) 30%,var(--paper));
}

/* Main workout actions share the overview's palette swatch. */
:root[data-look="original"] #log-set,
:root[data-look="original"] #session-action.finish-workout{
 background-color:var(--session-head-bg,var(--green));
 color:var(--session-head-ink,var(--on-accent,#ffffff));
}

/* Gold record copy needs a dark, themed backing for reliable contrast. */
:root :is(.weight-record-info,.volume-record-info){
 padding:12px 14px;border-radius:8px;background:var(--dark);
 color:#ffd45a;--weight-record-gold:#ffd45a;
 -webkit-text-stroke:0;
 text-shadow:0 0 5px #edb52633;
}
:root :is(.weight-record-info,.volume-record-info) strong{font-weight:750;line-height:1.45}
:root :is(.weight-record-info,.volume-record-info) small{opacity:1}

/* Active superset links brighten and glow on the icon alone. */
:root[data-look="original"] #exercise-list .exercise-link:is(.linked,.link-selected)>svg{
 color:oklch(from var(--green) calc(l + .10) calc(c * 1.15) h);
 stroke-width:2.1;
 filter:drop-shadow(0 -1px 2px color-mix(in srgb,var(--illustration-tint,var(--green)) 70%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--illustration-tint,var(--green)) 65%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--illustration-tint,var(--green)) 28%,transparent));
}

/* Centered notices dim the page just like dialog overlays. */
#notice-backdrop{position:fixed;inset:0;z-index:1000;background:#0b1b146b}
#notice-backdrop[hidden]{display:none}
:root[data-look] #notice{z-index:1001}

/* A deeper inset edge keeps completed cards distinct from the matching page colour. */
:root[data-look="original"] #exercise-list .exercise.is-complete,
:root[data-look="original"] #exercise-list .superset-group-exercises:has(.exercise):not(:has(.exercise:not(.is-complete))){
 box-shadow:inset 0 5px 10px #00000070,inset 3px 0 7px #00000032,inset -2px 0 6px #00000026,inset 0 -1px 1px color-mix(in srgb,var(--ink) 20%,transparent),0 1px 0 color-mix(in srgb,var(--ink) 12%,transparent) !important;
}

/* Achievement tiers collect gold trophies; locked tiers remain quiet outlines. */
.achievement-trophies{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.achievement-trophy{display:block;width:26px;height:26px;flex:none;padding:3px;fill:none}
.achievement-trophy.is-locked{color:var(--muted);opacity:.6}
.achievement-trophy.is-earned{--weight-record-gold:#ffd45a;color:var(--weight-record-gold);background:var(--dark);border-radius:5px;filter:drop-shadow(0 1px 2px #00000033);animation:record-gold-glint 7s ease-in-out infinite;animation-play-state:paused}
.achievement-trophy.is-earned.gold-in-view{animation-play-state:running}
:root.gold-page-hidden .achievement-trophy.is-earned{animation-play-state:paused}
:root[data-look] .achievement-levels .unlocked{background:var(--dark);color:#ffd45a;text-shadow:0 0 4px #edb52633}
.achievement-levels .achievement-trophy{width:20px;height:20px;padding:1px}
@media(prefers-reduced-motion:reduce){.achievement-trophy.is-earned{animation:none}}

/* A completed superset has one recessed frame, without stacked shadows between members. */
:root[data-look="original"] #exercise-list .superset-group-exercises:has(.exercise):not(:has(.exercise:not(.is-complete))) .exercise.is-complete{
 box-shadow:inset 0 2px 5px #00000030,inset 2px 0 5px #00000020,inset -2px 0 5px #00000018,inset 0 -1px 1px color-mix(in srgb,var(--ink) 12%,transparent) !important;
}

/* Every completed exercise uses one shared recessed surface, standalone or linked. */
:root[data-look="original"]{
 --completed-surface:color-mix(in srgb,var(--bg) 96%,#000000);
 --completed-shadow:inset 0 5px 10px #00000070,inset 3px 0 7px #00000032,inset -2px 0 6px #00000026,inset 0 -1px 1px color-mix(in srgb,var(--ink) 20%,transparent),0 1px 0 color-mix(in srgb,var(--ink) 12%,transparent);
}
:root[data-look="original"] #exercise-list .exercise.is-complete,
:root[data-look="original"] #exercise-list .superset-group-exercises:has(.exercise):not(:has(.exercise:not(.is-complete))) .exercise.is-complete{
 background-color:var(--completed-surface);background-image:none;
 box-shadow:var(--completed-shadow) !important;
}
:root[data-look="original"] #exercise-list .superset-group-exercises:has(.exercise):not(:has(.exercise:not(.is-complete))){
 background-color:var(--completed-surface);box-shadow:none !important;
}
:root[data-look="original"] #exercise-list .exercise.is-complete>summary .exercise-link,
:root[data-look="original"] #exercise-list .exercise.is-complete>summary .exercise-link:is(.linked,.link-selected,:hover,:active){background-color:var(--completed-surface)}

/* Hide only the stacked bottom highlight at completed superset seams. */
:root[data-look="original"] #exercise-list .superset-group-exercises>.exercise-swipe:not(:last-child)>.exercise.is-complete{
 clip-path:inset(0 0 1px 0);
}
:root[data-look="original"] #exercise-list .superset-group-exercises>.exercise-swipe:has(>.exercise.is-complete)+.exercise-swipe:has(>.exercise.is-complete){
 border-top-color:transparent;
}

/* Cardio tracks time and machine values instead of weights and reps. */
.cardio-entries{display:grid;gap:14px}.cardio-entry{padding:12px 0;border-bottom:1px solid var(--line)}
.cardio-entry-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;color:var(--muted);font-size:.875rem}
.cardio-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.cardio-fields input{width:100%;min-width:0}
.cardio-entry.completed input{color:var(--muted)}
@media(max-width:480px){.cardio-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.cardio-fields>.field:only-child{grid-column:1 / -1}}

.set-logger-actions>#log-set:only-child{grid-column:1 / -1}

.cardio-pace{margin-top:12px;font-variant-numeric:tabular-nums}

.cardio-entry.cardio-record input{color:var(--weight-record-gold);-webkit-text-fill-color:var(--weight-record-gold);font-weight:700;text-shadow:0 0 4px #edb52644}
.exercise-record-badges:has(>:nth-child(3)){display:grid;grid-template-columns:repeat(2,auto)}

/* Active links shine almost white against light palettes. */
:root[data-look="original"][data-palette-mode="light"] #exercise-list .exercise-link:is(.linked,.link-selected)>svg{
 color:color-mix(in srgb,#ffffff 94%,var(--illustration-tint,var(--green)));
 filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--green) 65%,transparent)) drop-shadow(0 0 3px #ffffffff) drop-shadow(0 0 7px #ffffffbb) drop-shadow(0 0 12px color-mix(in srgb,var(--illustration-tint,var(--green)) 95%,transparent));
}

/* Workout recency sits in a small recessed gauge inside each Default card. */
:root[data-look="original"] .pass-card{padding-bottom:32px;min-height:156px}
:root[data-look="original"] .pass-card>.pass-recency-track{position:absolute;left:12px;right:12px;bottom:12px;height:8px;overflow:hidden;border-radius:4px;background:color-mix(in srgb,var(--paper) 78%,var(--dark));box-shadow:inset 0 2px 3px #00000040,0 1px 0 color-mix(in srgb,var(--ink) 12%,transparent);pointer-events:none}
:root[data-look="original"] .pass-recency-track>.pass-recency-fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:inherit;background:var(--green);background-image:linear-gradient(to bottom,#ffffff30,transparent 75%);box-shadow:inset 0 1px 0 #ffffff35}

/* Superset links keep their touch target while showing only the icon. */
:root[data-look="original"] #exercise-list button.exercise-link,
:root[data-look="original"] #exercise-list button.exercise-link:is(.linked,.link-selected,:hover,:active,:focus){
 background:none !important;border:0;border-image:none;
 box-shadow:none !important;transform:none;
}
:root[data-look="original"] #exercise-list button.exercise-link::before,
:root[data-look="original"] #exercise-list button.exercise-link::after{content:none;display:none}

.rested-plan-info{margin:0 0 24px}.rested-plan-info>p{margin-top:6px;max-width:65ch}.rested-muscles{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.rested-muscles>span{padding:10px 14px;background:var(--paper);border-radius:8px}.rested-muscles small{display:block;color:var(--muted);margin-top:3px}.pass-card.type-rested{min-width:0}

/* Collapse the sidebar before it crowds tablet-sized workspaces. */
@media(max-width:1150px){
 :root .sidebar,:root:not([data-look="original"]) .mobile-dock>.sidebar{display:none}
 :root .workspace{margin-left:0}
 :root #session-footer{left:0}
 :root:not([data-look="original"]){--look-nav-height:0px}
}

/* An opening in the dimmer leaves the expanded exercise interactive in its layout. */
#exercise-focus-shade{position:fixed;inset:0;z-index:800;pointer-events:none}
#exercise-focus-shade>svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
#exercise-focus-shade path{fill:rgb(11 27 20 / 15%);pointer-events:fill}
#exercise-focus-shade[hidden]{display:none}

.pass-duration{margin-bottom:20px}.pass-duration>.row{gap:10px;align-items:center}.pass-duration input{width:100%}.duration-scale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:2px}.pass-duration #duration-help{margin-top:8px;max-width:65ch}.duration-count{margin-top:4px;color:var(--ink)}

.pass-duration>summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-weight:650;color:var(--ink)}.pass-duration>summary::-webkit-details-marker{display:none}.pass-duration>summary svg{flex:none;transition:transform .15s}.pass-duration[open]>summary svg{transform:rotate(90deg)}.duration-settings{padding-top:8px}.duration-settings>.row{gap:10px;align-items:center}.pass-duration:not([open]){margin-bottom:8px}@media(prefers-reduced-motion:reduce){.pass-duration>summary svg{transition:none}}

.pass-duration>summary>*{pointer-events:none}

/* Vivid fills retain the source palette colour; text accents keep their contrast shade. */
:root[data-look="original"]{--lab-button-glow-colour:var(--accent)}
:root[data-look="original"] :is(button.primary,button.lime,.sidebar .nav-item.active){background-color:var(--accent);color:var(--on-accent)}
:root[data-look="original"] .sidebar .nav-item.active>span{color:var(--on-accent)}
:root[data-look="original"] .pass-recency-track>.pass-recency-fill{background-color:var(--accent)}
:root[data-look="original"] .pass-card.selected{border-color:var(--accent)}

/* The last-sets box opens a short history: a chart of recent sessions and all-time records. */
.previous[data-previous]{cursor:pointer}
:root .previous>.previous-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;min-height:0;margin:0;padding:0!important;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;color:inherit;font:inherit;line-height:inherit;text-align:left;text-transform:none;letter-spacing:normal;transform:none}
:root .previous>.previous-toggle::before,:root .previous>.previous-toggle::after{content:none!important}
.previous-toggle .eyebrow{display:block}
.previous-chevron{width:20px;height:20px;flex:none;margin-top:2px;color:var(--muted);transition:transform .2s}
.previous.is-expanded .previous-chevron{transform:rotate(180deg)}
.previous-more{cursor:default}
.previous-more .recap-history-chart{margin-top:12px}
.previous-empty{margin:12px 0 0;color:var(--muted);font-size:.8rem}
.previous-records{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.previous-records li{display:flex;align-items:flex-start;gap:8px;color:var(--weight-record-gold);line-height:1.4}
.previous-records svg{width:24px;height:24px;flex:none}
.previous-records small{display:block;color:var(--muted);font-size:.72rem}
.previous-records strong{display:block;font-size:.9rem;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.previous-chevron{transition:none}}