:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  --bg: #f7f8fa;
  --panel: #fff;
  --text: #202c38;
  --muted: #526272;
  --line: #c6cfd7;
  --accent: #205c8f;
  --error: #a22525;
  --tint: #eaf2fa;
}
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 46rem; padding: 1rem; background: var(--bg); color: var(--text); }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
a { color: var(--accent); text-underline-offset: .2em; }
.brand { font-size: 1.4rem; font-weight: 750; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .7rem; }
nav a { display: inline-block; padding: .65rem 0; }
.checkbox { display: flex; align-items: center; gap: .7rem; }
.checkbox input { width: 1.3rem; }
.recovery strong { font-size: 1.35rem; overflow-wrap: anywhere; }
form + form { margin-top: .7rem; }
h1 { margin-bottom: .35rem; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.25; }
h2 { font-size: 1.3rem; margin-top: 1.5rem; }
h3 { font-size: 1rem; line-height: 1.5; margin: 0 0 .6rem; }
.intro, .muted, .help, small, footer { color: var(--muted); }
fieldset { min-width: 0; margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); }
legend { padding: 0 .4rem; font-weight: 650; }
label { display: block; margin: .65rem 0 .25rem; font-weight: 550; }
input, select, button { font: inherit; min-height: 2.85rem; border: 1px solid var(--line); border-radius: .4rem; }
input, select { width: 100%; padding: .55rem .65rem; color: var(--text); background: var(--panel); }
button { padding: .6rem .9rem; color: var(--accent); background: var(--panel); cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .55; cursor: wait; }
.primary { background: var(--accent); color: var(--panel); border-color: var(--accent); font-weight: 650; }
.quiet { font-size: .9rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bounds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.form-actions button { flex: 1 1 14rem; }
.help { font-size: .85rem; }
.weight-unit { font-weight: 650; margin-bottom: .4rem; }
.hint { color: var(--accent); font-size: .9rem; }
.error { color: var(--error); font-weight: 550; }
.error:empty { display: none; }
.notice { padding: .8rem 1rem; background: var(--tint); border-left: 3px solid var(--accent); border-radius: .25rem; }
.box-list { list-style: none; padding: 0; }
.box-list li { margin: .4rem 0; }
.swatch { display: inline-block; width: .9rem; height: .9rem; border: 1px solid var(--muted); border-radius: .2rem; margin-right: .5rem; }
.order { padding-left: 1.5rem; }
.order li { margin: .5rem 0; }
.step { margin: 1rem 0; padding: .85rem; background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; }
.rig { display: block; width: 100%; height: auto; overflow: visible; }
.rig .handle { fill: var(--muted); }
.rig .sleeve { fill: var(--line); }
.rig .collar { fill: #37424c; stroke: var(--muted); stroke-width: 1; }
.rig .connector { fill: var(--accent); }
.rig .touched { fill: var(--tint); stroke: var(--accent); stroke-opacity: .45; stroke-width: 1; }
.rig .plate { stroke: #28323d; stroke-width: 1; }
.rig text { fill: var(--text); font-family: system-ui, sans-serif; }
.rig .rig-label { font-size: 18px; }
.rig .connector-label { font-size: 16px; }
.rig.barbell .rig-label { font-size: 26px; }
.rig.barbell .connector-label { font-size: 22px; }
.rig .plate-label { fill: #15202b; font-size: 10px; }
.rig .inactive { opacity: .48; }
.asymmetry { color: var(--muted); font-size: .9rem; }
.same-round { font-weight: 650; padding: 1rem; background: var(--tint); border-radius: .5rem; }
.totals { border-top: 1px solid var(--line); margin-top: 1.5rem; }
footer { margin-top: 2.5rem; padding: 1rem 0; font-size: .85rem; }
.calculate-wait { display: none; }
#planner-form.htmx-request .calculate-idle { display: none; }
#planner-form.htmx-request .calculate-wait { display: inline; }
#planner-form.htmx-request .calculate { opacity: 1; }
.solve-status { color: var(--accent); font-weight: 650; }
#workout:has(#planner-form.htmx-request) #plan-area { opacity: .4; }
.spinner {
  display: inline-block; width: 1em; height: 1em; margin-right: .5em;
  vertical-align: -.1em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #161c23; --panel: #202832; --text: #e3e9ef; --muted: #a9b8c6; --line: #536171; --accent: #9acbfa; --error: #ffaaaa; --tint: #2b3d50; }
}
@media (min-width: 40rem) { body { padding: 1.5rem; } fieldset { padding: 1.25rem; } }