/* Comfortable controls and purposeful feedback; all colors follow the theme. */
body{line-height:1.6}
h1,h2,h3{letter-spacing:0;line-height:1.3;text-wrap:balance}
.field{margin-bottom:20px}
.field label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-2);line-height:1.5}
.input,select.input,textarea.input{min-height:50px;border:1px solid var(--border-2);border-radius:var(--r-sm);background-color:var(--surface);transition:border-color .16s ease,box-shadow .16s ease}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);background-color:var(--surface)}
.field:focus-within label{color:var(--gold-deep)}
.input[aria-invalid=true]{border-color:var(--danger)}
.field-error{grid-column:1/-1;margin:4px 0 8px;font-size:13px;color:var(--danger-text);line-height:1.5}
.wk .set-in[aria-invalid=true]{border-color:var(--danger-text)}
.wk .field-error{color:var(--danger-text)}
textarea.input{min-height:110px;line-height:1.7}
.input:disabled{opacity:.65;cursor:not-allowed}
.seg{overflow-x:auto;scrollbar-width:none}
.seg button{min-height:44px;white-space:nowrap}
.range-seg button{min-height:40px}
.chip,.icon-btn{min-height:44px}
.btn{min-height:44px}
.btn:disabled{cursor:wait}
.btn:active:not(:disabled){transform:scale(.98)}
.tabbar a{min-height:54px;font-size:12px}
.profile-shortcut{text-decoration:none}

/* Reading remains stable; only route entry and the explanatory map move. */
.page-in{animation:none}
.page-in>.rv{opacity:1;transform:none;animation:none;transition:none}
.mm-animation-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.mm-animation-head .btn{font-size:12px;flex-shrink:0;min-height:44px}
.mm-description{text-align:center;margin:12px 0 4px;line-height:1.7;color:var(--text)}
.mm-wrap .mm-svg{max-width:320px}
.mm-wrap .mm-svg path[stroke]{stroke:var(--text-2);stroke-opacity:.65}
.mm-wrap .mm-svg .mm-p{animation:muscle-primary 3.6s ease-in-out infinite}
.mm-wrap .mm-svg .mm-s{animation:muscle-support 3.6s ease-in-out infinite;animation-delay:0s}
.mm-wrap.mm-still .mm-svg .mm-p,.mm-wrap.mm-still .mm-svg .mm-s,.mm-wrap.mm-still .mm-svg .bf-p,.mm-wrap.mm-still .mm-svg .bf-s{animation:none;opacity:1;transform:none}
.mm-offscreen .mm-svg .mm-p,.mm-offscreen .mm-svg .mm-s,.mm-hidden .mm-svg .mm-p,.mm-hidden .mm-svg .mm-s,
.mm-offscreen .mm-svg .bf-p,.mm-offscreen .mm-svg .bf-s,.mm-hidden .mm-svg .bf-p,.mm-hidden .mm-svg .bf-s{animation-play-state:paused}
@keyframes muscle-primary{0%,100%{opacity:.65;transform:scale(1)}20%,36%{opacity:1;transform:scale(1.045)}60%{opacity:.7;transform:scale(1)}}
@keyframes muscle-support{0%,34%,100%{opacity:.55;transform:scale(1)}58%,72%{opacity:1;transform:scale(1.025)}}
.food-result{width:100%;text-align:start;color:var(--text);font:inherit;gap:10px;background:transparent;border:0;border-bottom:1px solid var(--border);cursor:pointer}
.food-result>div{min-width:0}
.food-result b{overflow-wrap:anywhere;line-height:1.6}
.food-result:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;background:var(--accent-tint)}
.food-result:hover{background:var(--surface-2)}
.food-source{margin:0 0 16px;font-size:13px;color:var(--text-2)}
.food-source summary{cursor:pointer;padding:8px 0;min-height:44px}
#fpkList[aria-busy=true]{opacity:.6;transition:opacity .12s ease}
@media(prefers-reduced-motion:no-preference){
 .sheet{animation:gentle-sheet-in .28s cubic-bezier(.2,.7,.2,1)}
 @keyframes gentle-sheet-in{from{opacity:.5;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
 .mm-wrap .mm-svg .mm-p,.mm-wrap .mm-svg .mm-s{animation:none!important;opacity:1;transform:none;will-change:auto}
}
.tabbar a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px}
.sync-status{display:flex;align-items:center;gap:8px;padding:9px 12px;margin:10px 0;color:var(--wk-text-2,var(--text-2));font-size:13px;border:1px solid var(--border);border-radius:12px}
/* an author `display` beats the UA rule for [hidden], so say it here */
.sync-status[hidden]{display:none}
.sync-status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0}
.sync-status.pending::before{background:var(--warning)}
.local-drafts{background:var(--accent-tint);border:0;margin-bottom:18px}
@media(hover:hover){
 .seg button:not(.active):hover{color:var(--text-2)}
}
@media(prefers-reduced-motion:no-preference){
 .sync-status{animation:save-feedback .22s ease-out}
 .seg button.active{animation:selection-feedback .2s ease-out}
 .field:focus-within label{transition:color .18s ease}
 @keyframes save-feedback{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
 @keyframes selection-feedback{from{opacity:.7}to{opacity:1}}
}

/* ===== 3D exercise motion (js/motion.js) ===== */
.mo [hidden]{display:none!important}
.mo-stage{position:relative;height:340px;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 75% at 50% 35%,var(--surface) 0%,var(--surface-2) 72%)}
.mo-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.mo-stage canvas.gm-drag{cursor:grabbing}
.mo-load{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--text-3)}
.mo-load span{display:inline-flex;gap:8px;align-items:center}
.mo-load span::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--accent);animation:mo-spin .7s linear infinite}
@keyframes mo-spin{to{transform:rotate(360deg)}}
.mo-phase,.mo-rep,.mo-hint{position:absolute;pointer-events:none;font-size:12px;font-weight:600;border-radius:999px}
.mo-phase{top:10px;right:10px;display:inline-flex;gap:6px;align-items:center;padding:4px 10px;background:var(--surface);color:var(--text);box-shadow:var(--sh-sm)}
.mo-phase i{width:8px;height:8px;border-radius:50%;background:var(--text-3);transition:background-color .2s ease}
.mo-phase.work i{background:var(--danger-vivid)}
.mo-rep{top:10px;left:10px;padding:4px 9px;color:var(--text-3);background:var(--surface);font-variant-numeric:tabular-nums}
.mo-rep:empty{display:none}
.mo-hint{bottom:10px;left:50%;translate:-50% 0;padding:3px 10px;font-weight:500;color:var(--text-3);background:var(--surface);white-space:nowrap;transition:opacity .4s ease}
.mo-stage.touched .mo-hint{opacity:0}
.mo-ctl{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.mo-seg{display:inline-flex;gap:14px;border-bottom:1px solid var(--border)}
.mo-seg button{padding:4px 0 8px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text-3);cursor:pointer}
.mo-seg button[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.mo-btns{display:flex;gap:6px}
.mo-btn{height:34px;min-width:34px;padding:0 10px;border-radius:var(--r-xs);border:1px solid var(--border);background:var(--surface);color:var(--text);
  font:inherit;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mo-btn svg{width:15px;height:15px}
.mo-btn[aria-pressed="true"][data-mo-slow]{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
/* the grip tabs over the stage: one per grip, a sliding card under the chosen one */
.mo-tabs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-bottom:10px;padding:3px;border-radius:var(--r-sm);background:var(--surface-2);touch-action:pan-y;user-select:none}
.mo-tabs button{position:relative;z-index:1;display:grid;gap:1px;justify-items:center;min-height:44px;padding:5px 4px;border:0;border-radius:calc(var(--r-sm) - 3px);background:none;font:inherit;color:var(--text-3);cursor:pointer;transition:color .2s ease}
.mo-tabs b{font-size:13.5px;font-weight:700}
.mo-tabs small{font-size:11px;font-weight:500}
.mo-tabs button[aria-selected="true"]{color:var(--text)}
.mo-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mo-opts{display:grid;gap:6px;margin-bottom:10px}
.mo-opts .mo-tabs{margin-bottom:0}
.mo-tabs-ink{position:absolute;top:3px;bottom:3px;inset-inline-start:calc(3px + (100% - 6px) * var(--i, 0) / var(--n, 1));width:calc((100% - 6px) / var(--n, 1));border-radius:calc(var(--r-sm) - 3px);background:var(--surface);box-shadow:var(--sh-sm);transition:inset-inline-start .25s ease}
.mo-cue{margin-top:12px;background:var(--surface-2);border-radius:var(--r-sm);padding:10px 13px;min-height:72px}
.mo-cue small{display:block;font-size:12px;font-weight:700;color:var(--text-3)}
.mo-cue p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--text)}
.mo-h{margin:14px 0 6px;font-size:13.5px;font-weight:700;color:var(--text)}
.mo-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:mo}
.mo-steps li{counter-increment:mo;display:grid;grid-template-columns:22px 1fr;gap:4px 8px;padding:7px 9px;border-radius:var(--r-sm);font-size:13px;color:var(--text-2);transition:background-color .25s ease}
.mo-steps li::before{content:counter(mo);grid-row:span 2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--text-3)}
.mo-steps li b{color:var(--text);font-size:12.5px}
.mo-steps li.on{background:var(--accent-tint)}
.mo-steps li.on::before{background:var(--accent-fill);color:#fff}
.mo-miss{margin:0;padding:0 18px 0 0;font-size:13px;color:var(--text-2);display:grid;gap:4px}
.mo-offer{margin-bottom:10px}
@media (prefers-reduced-motion:reduce){ .mo-load span::before{animation:none} .mo-tabs-ink{transition:none} }