/* Xtreme Gym demos: shared tokens and pieces. Look-only mockups, not app code. */
:root {
  --display: "Montserrat", "Archivo", system-ui, sans-serif; --stretch: 100%; --stretch-btn: 100%; --track: -.02em;
  --text: "Archivo", system-ui, sans-serif;
  --num: "Chakra Petch", "Archivo", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f0f0; --surface: #FFFFFF; --surface-2: #e8e8e8;
  --ink: #101010; --ink-2: #525252; --line: #d0d0d0;
  --cobalt: #f6c400; --cobalt-2: #8c600e; --on-cobalt: #FFFFFF; --link: #f6c400;
  --ok: #13804A; --ok-2: #0E6439; --ok-tint: #E2F2E9;   /* the green: progression, and what moves on (as the phone's) */
  --flag: #8A4200; --flag-bg: #FFEDCC; --flag-line: #D9902B;
  --ghost: rgba(16, 16, 16, .10); --plate: #D9E9F8; --scrim: rgba(240, 240, 240, .78);
  --m-body: #e3e3e3; --m-rest: #c6c6c6; --m-pri: #f6c400; --m-sec: #f6efd3; --m-sec-ink: #f6c400; --m-hover: #101010; --m-glow: rgba(246, 196, 0, .5);
  --logo-filter: none; --logo-blend: multiply;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e0e; --surface: #1d1d1d; --surface-2: #282828;
  --ink: #f6f6f6; --ink-2: #bbbbbb; --line: #3c3c3c;
  --cobalt: #f6c400; --cobalt-2: #9f7517; --on-cobalt: #FFFFFF; --link: #ffe88c;
  --ok: #1A8F55; --ok-2: #136B40; --ok-tint: #14301F;
  --flag: #FFC164; --flag-bg: #2C200D; --flag-line: #8A5A12;
  --ghost: rgba(246, 246, 246, .12); --plate: #D9E9F8; --scrim: rgba(14, 14, 14, .78);
  --m-body: #333333; --m-rest: #525252; --m-pri: #ffde5c; --m-sec: #272727; --m-sec-ink: #ffeb9d; --m-hover: #FFFFFF; --m-glow: rgba(246, 196, 0, .7);
  --logo-filter: invert(1); --logo-blend: screen;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 var(--text); background: var(--bg); color: var(--ink); scrollbar-color: var(--line) transparent; }
::selection { background: var(--cobalt); color: #fff; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The poster voice: wide, heavy, leaning forward. Whole headlines lean, never single words. */
[data-font="archivo-wide"] { --display: "Archivo", system-ui, sans-serif; --stretch: 125%; --stretch-btn: 112%; --track: -.012em; }
[data-font="archivo"] { --display: "Archivo", system-ui, sans-serif; --stretch: 100%; --stretch-btn: 100%; --track: -.01em; }
.display { font-family: var(--display); font-stretch: var(--stretch); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .98; letter-spacing: var(--track); text-wrap: balance; }
.num { font-family: var(--num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cond { font-family: var(--display); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Ghost type: the outlined giant letters from the posters, always decorative. */
.ghost { position: absolute; font-family: var(--display); font-stretch: var(--stretch); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ghost); pointer-events: none; user-select: none; white-space: nowrap; }

/* Slanted buttons: the lean of the type, cut into the control. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; border: 0; cursor: pointer; padding: .95em 1.6em; background: var(--ink); color: var(--bg); font: italic 800 1rem/1 var(--display); font-stretch: var(--stretch-btn); text-transform: uppercase; letter-spacing: .02em; clip-path: polygon(.75em 0, 100% 0, calc(100% - .75em) 100%, 0 100%); transition: transform .16s var(--ease), background-color .16s, filter .16s; }
.btn:hover { transform: translateX(3px); }
.btn:active { transform: translateX(1px) scale(.985); }
/* A slanted button cuts an outline drawn around it, and one drawn inside it reads as a white box in the button:
   the focus underlines its words instead. */
.btn:focus-visible { outline: 0; text-decoration: underline 2px; text-underline-offset: 5px; }
.btn.pri { background: var(--cobalt); color: var(--on-cobalt); }
.btn.pri:hover { background: var(--cobalt-2); }
.btn.sub { background: var(--surface-2); color: var(--ink); }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* Grain for cobalt fields, so the flat colour reads as printed, not as a web gradient. */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: soft-light; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Body map: one renderer, three path sets (wb.js). */
.body-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.b-out, .b-inert { fill: var(--m-body); }
.b-m { fill: var(--m-rest); stroke: var(--m-body); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .18s var(--ease), filter .9s var(--ease), opacity .3s var(--ease); transform-box: fill-box; transform-origin: center; }
.b-m[data-s="secondary"] { fill: var(--hatch, var(--m-sec)); }
.b-m[data-s="primary"] { fill: var(--m-pri); filter: drop-shadow(0 0 var(--g, 5px) var(--m-glow)); }
.is-pick .b-m { cursor: pointer; }
.is-pick .b-m.hov, .is-pick .b-m:focus-visible { stroke: var(--m-hover); stroke-width: 2.5; outline: none; }
.is-pick .b-m.hov:not([data-s="primary"]):not([data-s="secondary"]) { fill: color-mix(in srgb, var(--m-pri) 35%, var(--m-rest)); }
.b-m.just { animation: mpop .42s var(--ease); }
@keyframes mpop { 0% { transform: scale(1.14); filter: drop-shadow(0 0 calc(var(--g, 5px) * 2.6) var(--m-glow)) brightness(1.5); } 100% { transform: scale(1); } }

/* Demo chrome: clearly not part of the product. */
.demo-bar { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 20px; background: #080808; color: #efefef; font: 500 13px/1.3 var(--text); }
.demo-bar b { font-weight: 700; }
.demo-bar a { color: #ffeb9d; }
.demo-bar .seg { display: inline-flex; border: 1px solid #4a4a4a; }
.demo-bar .seg button { background: transparent; border: 0; padding: 6px 12px; cursor: pointer; color: #d6d6d6; }
.demo-bar .seg button[aria-pressed="true"] { background: #efefef; color: #080808; font-weight: 700; }
.demo-bar .grow { flex: 1; }

/* ================= v2: the pieces every screen shares ================= */
@view-transition { navigation: auto; }
[data-theme="light"] { --bad: #B3261E; }
[data-theme="dark"] { --bad: #FF8A80; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); }
input, select, textarea { font: inherit; color: inherit; caret-color: var(--cobalt); }
a { color: inherit; }

/* The sidebar: closed by default. A thin rail on the left edge opens it when the pointer gets near, or when pressed. */
.wbrail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; width: 20px; border: 0; padding: 0; background: none; cursor: pointer; }
.wbrail::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ink); transform-origin: left; transition: transform .2s var(--ease), background-color .2s; }
.wbrail i { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 20px; height: 76px; margin-top: -38px; background: var(--ink); clip-path: polygon(0 0, 100% 12px, 100% calc(100% - 12px), 0 100%); transition: background-color .2s; }
.wbrail svg { width: 11px; height: 11px; fill: var(--bg); }
.wbrail:hover::before, .wbrail:focus-visible::before, .wbrail:hover i, .wbrail:focus-visible i { background: var(--cobalt); }
.wbrail:hover::before { transform: scaleX(1.6); }
.wbrail:focus-visible { outline-offset: -3px; }
.wbside { position: fixed; left: 0; top: 0; bottom: 0; z-index: 46; width: 288px; max-width: 86vw; display: flex; flex-direction: column; padding: 0; background: var(--surface); border-right: 2px solid var(--ink); transform: translateX(-103%); visibility: hidden; transition: transform .34s var(--ease), visibility 0s .34s; }
.wbside.open { transform: none; visibility: visible; transition: transform .34s var(--ease); box-shadow: 40px 0 70px -40px rgba(8, 8, 8, .55); }
.wbside-list { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 20px 0 14px; }
.wbside-list > * { flex: none; }
.wbside-brand { display: flex; align-items: center; gap: 8px; padding: 0 20px 12px; font-size: 14px; text-decoration: none; }
.wbside-brand img { width: 34px; height: 34px; object-fit: cover; object-position: 50% 36%; filter: var(--logo-filter); mix-blend-mode: var(--logo-blend); }
.wbside a { text-decoration: none; }
.wbside li a { display: block; padding: 7px 20px; transition: background-color .12s; }
.wbside li a:hover, .wbside li a:focus-visible { background: var(--surface-2); outline-offset: -3px; }
.wbside li b { font-weight: 600; }
.wbside li small { display: block; font-size: 12.5px; color: var(--ink-2); }
.wbside-nav b { font: italic 900 19px/1.25 var(--display) !important; text-transform: uppercase; letter-spacing: -.01em; }
.wbside-nav a[aria-current] { box-shadow: inset 5px 0 0 var(--cobalt); color: var(--link); }
.wbside-list > .btn { margin: 10px 20px 6px; align-self: flex-start; }
.wbside h2 { margin: 16px 20px 2px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.wbside-me { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: var(--surface); font-size: 13.5px; }
.wbside-me button { border: 0; background: none; padding: 4px 0 2px; margin-left: 12px; cursor: pointer; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; }
.wbside-me button[aria-pressed="true"] { color: var(--ink); border-bottom-color: currentColor; }
.wbside-me > span:first-child { display: grid; justify-items: start; min-width: 0; }
.wbside-me [data-out] { margin: 0; padding: 0; font-size: 12.5px; font-weight: 500; }

/* Actions lean, all of them, at one height. The outline is a second slanted layer. */
.tb { --sl: 8px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; white-space: nowrap; padding: 0 16px; border: 0; background: var(--line); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 13.5px; text-decoration: none; clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%); transition: background-color .15s, color .15s, transform .16s var(--ease); }
/* A star just marked as favourite pops (WB.pop). */
.pop svg { animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-14deg); } 70% { transform: scale(.9) rotate(4deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pop svg { animation: none; } }
.tb::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--surface); clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%); transition: background-color .15s; }
.tb:hover { background: var(--ink); transform: translateX(2px); }
.tb:hover::before { background: var(--surface-2); }
.tb:focus-visible { outline-offset: -5px; }
.tb svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.tb.danger:hover { background: var(--bad); color: var(--bad); }
.tb.lg { height: 52px; padding: 0 26px; font-size: 15px; --sl: 11px; }
a.btn { text-decoration: none; }
.btn.lg { height: 52px; padding: 0 30px; font-size: 15px; }
.btn.sm { height: 36px; padding: 0 20px; font-size: 12.5px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.btn[disabled] { background: var(--line); color: var(--ink-2); cursor: default; transform: none; }
.txt { border: 0; background: none; padding: 4px 2px; cursor: pointer; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.txt:hover { color: var(--ink); text-decoration-color: currentColor; }

/* The assistant's line: one black slanted band, with its action as a light piece set inside. */
.cmd { --lean: 18px; position: relative; display: flex; align-items: stretch; height: 64px; padding: 0 var(--lean) 0 calc(var(--lean) + 10px); background: var(--ink); color: var(--bg); clip-path: polygon(var(--lean) 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%); }
.cmd > svg { width: 20px; height: 20px; fill: currentColor; align-self: center; flex: none; }
.cmd input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--bg); font: 500 18px/1 var(--text); padding: 0 14px; caret-color: var(--bg); }
.cmd input::placeholder { color: color-mix(in srgb, var(--bg) 64%, transparent); font-style: italic; }
.cmd button { position: relative; isolation: isolate; flex: none; border: 0; background: none; cursor: pointer; padding: 0 28px; color: var(--ink); font: italic 800 15px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; }
.cmd button::before { content: ""; position: absolute; inset: 9px 0; z-index: -1; background: var(--surface); transform: skewX(-15.7deg); transition: background-color .15s; }
.cmd button:hover::before { background: var(--cobalt); }
.cmd button:hover { color: var(--on-cobalt); }
.cmd button svg { width: 13px; height: 13px; fill: currentColor; }
.cmd button:focus-visible { outline: none; color: var(--on-cobalt); text-decoration: underline; text-underline-offset: 4px; }
.cmd button:focus-visible::before { background: var(--cobalt); }
.cmd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--m-pri); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.cmd:focus-within::after { transform: scaleX(1); }

/* Tags and fields are square. */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); color: var(--ink); font: 700 12px/1.4 var(--text); font-stretch: 82%; text-transform: uppercase; letter-spacing: .05em; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.chip.pri { background: var(--cobalt); color: var(--on-cobalt); }
.chip.off { background: transparent; color: var(--ink-2); border-color: var(--line); }
.chip.off:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.field { width: 100%; border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; font-size: 16px; outline: none; transition: border-color .15s; }
.field:focus { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--cobalt); }
.field::placeholder { color: var(--ink-2); }

/* A day's focus: the share of its exercises that goes to each muscle. */
.wb { display: flex; gap: 2px; height: 22px; }
.wb span { background: var(--cobalt); color: var(--on-cobalt); font: 700 11.5px/22px var(--text); font-stretch: 85%; padding: 0 6px; white-space: nowrap; overflow: hidden; min-width: 0; }
.wb.thin { height: 6px; }
.wb.thin span { padding: 0; }
.wkbar { display: inline-flex; gap: 2px; vertical-align: middle; }
.wkbar i { width: 9px; height: 13px; background: var(--line); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.wkbar.dy i.on { background: var(--cobalt); }   /* the days of the week are blue */
[data-theme="dark"] .wkbar.dy i.on { background: var(--link); }
/* A day done in part: its mark filled as far as its share. The days' marks are wider, so half of one reads as half. */
.wkbar.dy i { width: 14px; }
.wkbar.dy i.part { background: linear-gradient(90deg, var(--cobalt) var(--f), var(--line) var(--f)); }
[data-theme="dark"] .wkbar.dy i.part { background: linear-gradient(90deg, var(--link) var(--f), var(--line) var(--f)); }
.wkbar i.on { background: var(--ok); }   /* the weeks are green, like everything about progression */
.ini { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; background: var(--ink); color: var(--bg); font: italic 800 12.5px/1 var(--display); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
/* A group is green wherever it shows, like "Grupal": what a person follows by being in a group. */
.ini.g { background: var(--ok); color: #fff; font: 700 12.5px/1 var(--num); }
.ini.g svg { width: 15px; height: 15px; fill: currentColor; }
.gtag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1.5px solid var(--ok); color: var(--ok); font: 700 11.5px/1 var(--text); white-space: nowrap; vertical-align: 1px; }
.gtag svg { width: 10px; height: 10px; fill: currentColor; }
/* A routine's warnings (v1.2.0, WB.warnMark): the flag, amber, in Rutinas and Personas; its tip shows at once. */
.wbwarn { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px 0 -4px 6px; vertical-align: middle; background: #F2A33A; color: #1F1300; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); transition: transform .12s, background-color .15s; }
.wbwarn svg { width: 14px; height: 14px; fill: currentColor; }
.wbwarn:hover, .wbwarn:focus-visible { background: #FFBE5C; outline: 0; }
.wbwarn:active { transform: scale(.92); }
.wbwarn-tip { position: fixed; z-index: 90; max-width: 260px; padding: 7px 10px; background: var(--ink); color: var(--bg); font: 700 12.5px/1.3 var(--text); pointer-events: none; white-space: nowrap; }

/* Dialogs */
/* A dialog arrives instead of appearing: the shade fades in, the window rises and settles, and what is inside it
   follows a beat behind, top to bottom. It leaves the same way, faster (WB.shut and the dialogs' close). */
.modal { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: none; place-items: center; padding: 24px; }
.modal.open { display: grid; animation: shade-in .26s ease-out both; }
.modal.open > .dlg { animation: dlg-in .46s var(--ease) both; }
.modal.open > .dlg > * { animation: dlg-item .5s var(--ease) both; }
.modal.open > .dlg > :nth-child(2) { animation-delay: .04s; } .modal.open > .dlg > :nth-child(3) { animation-delay: .08s; } .modal.open > .dlg > :nth-child(4) { animation-delay: .12s; }
.modal.open > .dlg > :nth-child(5) { animation-delay: .16s; } .modal.open > .dlg > :nth-child(n+6) { animation-delay: .2s; }
.modal.shut { pointer-events: none; animation: shade-out .2s ease-in both; }
.modal.shut > .dlg { animation: dlg-out .2s ease-in both; }
.modal.shut > .dlg > * { animation: none; }
@keyframes shade-in { from { background-color: transparent; } }
@keyframes shade-out { to { background-color: transparent; } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(22px) scale(.965); } 60% { opacity: 1; } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes dlg-item { from { opacity: 0; transform: translateY(8px); } }
.dlg { width: 560px; max-width: 100%; max-height: 100%; overflow: auto; background: var(--surface); border: 2px solid var(--ink); padding: 24px; box-shadow: 0 30px 60px -24px rgba(8, 8, 8, .6); }
.dlg h2 { font-size: 21px; margin-bottom: 8px; }
.dlg > p { color: var(--ink-2); margin-bottom: 16px; }
.dlg footer { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 16px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.credit { font-size: 12px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* A button under the pointer still glides its few pixels: without it the step reads as a jump. */
  .btn, .tb, .gen, .gen > svg:last-child { transition-duration: .16s !important; }
  /* Dialogs still fade, without moving: an abrupt cut is what reduced motion is meant to avoid too. */
  .modal.open, .modal.shut { animation-duration: .18s !important; }
  .modal.open > .dlg { animation-name: fade-only !important; animation-duration: .18s !important; }
  .modal.shut > .dlg { animation-name: fade-away !important; animation-duration: .16s !important; }
}
@keyframes fade-only { from { opacity: 0; } }
@keyframes fade-away { to { opacity: 0; } }

/* ================= v3: the field, the wall and the assistant's button ================= */
[data-theme="light"] { --h1: #f6f0d6; --h2: #efe1a9; --h3: #e2cb6f; --h4: #d3b53b; --h5: #9e700f; }
[data-theme="dark"] { --h1: #424242; --h2: #967931; --h3: #d2b541; --h4: #ffe16b; --h5: #fff3c2; }
/* One rule for every gym: a weak step takes its stripes from a step above, toned toward the resting muscle so they don't
   outshine the solid steps, and its ground from the resting muscle, so the scale reads weak to strong with any brand.
   Set here so a stage's own --h1..--h5 count. */
.body-svg, .heat-key { --h1-ink: color-mix(in srgb, var(--h3) 55%, var(--m-rest)); --h2-ink: color-mix(in srgb, var(--h5) 80%, var(--m-rest)); --h1-ground: var(--m-rest); --h2-ground: color-mix(in srgb, var(--h1) 35%, var(--m-rest)); }
.b-m[data-s="h1"] { fill: var(--hatch-1, var(--h1)); } .b-m[data-s="h2"] { fill: var(--hatch-2, var(--h2)); } .b-m[data-s="h3"] { fill: var(--h3); } .b-m[data-s="h4"] { fill: var(--h4); } .b-m[data-s="h5"] { fill: var(--h5); }
/* The glow grows with the step: none at the weakest, as much as a main muscle at the strongest. */
.b-m[data-s="h2"] { filter: drop-shadow(0 0 calc(var(--g, 5px) * .2) var(--m-glow)); } .b-m[data-s="h3"] { filter: drop-shadow(0 0 calc(var(--g, 5px) * .4) var(--m-glow)); } .b-m[data-s="h4"] { filter: drop-shadow(0 0 calc(var(--g, 5px) * .7) var(--m-glow)); } .b-m[data-s="h5"] { filter: drop-shadow(0 0 var(--g, 5px) var(--m-glow)); }
.heat-key { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.heat-key i { display: flex; }
.heat-key i b { width: 22px; height: 10px; }
.heat-key i b { --ink-s: var(--h4); --ground-s: var(--h4); background: repeating-linear-gradient(130deg, var(--ink-s) 0 calc(5px * var(--w, 1)), var(--ground-s) 0 5px); }
.heat-key i b:nth-child(1) { --ink-s: var(--h1-ink); --ground-s: var(--h1-ground); --w: .24; } .heat-key i b:nth-child(2) { --ink-s: var(--h2-ink); --ground-s: var(--h2-ground); --w: .52; } .heat-key i b:nth-child(3) { --ink-s: var(--h3); --ground-s: var(--h3); } .heat-key i b:nth-child(5) { --ink-s: var(--h5); --ground-s: var(--h5); }
[data-theme="light"] { --wall-blend: multiply; --wall-fill: #fff; --wall-ink: #cecece; --wall-on: #f7f0d3; --wall-on-ink: #ddcb84; --spot: rgba(255, 255, 255, .17);
  --slab: linear-gradient(168deg, #f6c400 0%, #f6c400 46%, #80540a 100%); --slab-line: #875b0c; }
[data-theme="dark"] { --wall-blend: screen; --wall-fill: #000; --wall-ink: #383838; --wall-on: #5c4017; --wall-on-ink: #eacb50; --spot: rgba(255, 232, 140, .2);
  --slab: linear-gradient(168deg, #f6c400 0%, #c0961a 46%, #784f0d 100%); --slab-line: #8e620f; }

/* The field: pale where the trainer reads, and a cobalt slab cut on the lean of the type (12 degrees), running off
   the top, the right and the bottom. A stripe rides the cut. */
:root { --cut-w: 58vw; --lean-x: 21.26vh; }
@media (max-width: 1100px) { :root { --cut-w: 41vw; } }
.backdrop { position: fixed; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; pointer-events: none; background: var(--bg); }
.cut { position: fixed; top: 0; right: 0; bottom: 0; width: var(--cut-w); clip-path: polygon(var(--lean-x) 0, 100% 0, 100% 100%, 0 100%); }
.slab-bg { background: radial-gradient(60vh 70vh at 58% 50%, var(--spot), transparent 70%), var(--slab); }
.stripe { position: absolute; top: 0; bottom: 0; right: calc(var(--cut-w) - var(--lean-x) + 8px); width: calc(var(--lean-x) + 9px); background: var(--ink); clip-path: polygon(var(--lean-x) 0, calc(var(--lean-x) + 9px) 0, 9px 100%, 0 100%); }

/* The wall: lanes of giant type across the whole screen. wb.js moves them: a steady drift, and one shared beat. */
.wall { --edge: calc((100vw - var(--cut-w)) * .978 + 20.8vh); --wall-mask: linear-gradient(102deg, rgba(0, 0, 0, .15) calc(var(--edge) - 12px), rgba(0, 0, 0, .7) calc(var(--edge) + 2px));
  position: absolute; inset: 0; mix-blend-mode: var(--wall-blend); -webkit-mask-image: var(--wall-mask); mask-image: var(--wall-mask); }
.wall-tilt { position: absolute; left: 50%; top: 50%; width: calc(100vw + 18vh); height: calc(100vh + 16vw); display: flex; flex-direction: column; transform: translate(-50%, -50%) rotate(-8deg); }
.lane { position: relative; flex: 1 1 0; min-height: 0; container-type: size; }
.lane.thin { flex-grow: .24; }
.lane-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; backface-visibility: hidden; }
@keyframes drift { to { transform: translate3d(-50%, 0, 0); } }
.lane-copy { flex: none; display: flex; align-items: center; height: 100%; font-size: 82cqh; color: var(--wall-ink); }
.lane.thin .lane-copy { font-size: 50cqh; }
.lane .w { flex: none; padding: 0 .16em; font: italic 900 1em/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; text-rendering: geometricPrecision; color: var(--wall-fill); -webkit-text-stroke: 2px var(--wall-ink); paint-order: stroke fill; transition: color .7s var(--ease), -webkit-text-stroke-color .7s var(--ease); }
.lane .w.on { color: var(--wall-on); -webkit-text-stroke-color: var(--wall-on-ink); }
.lane .n { flex: none; font: 700 1em/1 var(--num); white-space: nowrap; padding: 0 2.4em; }
.lane .g { flex: none; width: .42em; height: .42em; margin: 0 .2em; fill: currentColor; }
.lane.thin .g { width: .9em; height: .9em; margin: 0 2.4em; }
.lane .hatch { width: 1.1em; background: repeating-linear-gradient(-62deg, currentColor 0 .05em, transparent .05em .15em); clip-path: polygon(.16em 0, 100% 0, calc(100% - .16em) 100%, 0 100%); }
.lane.thin .hatch { width: 2.6em; }

/* The assistant's button. The AI is always a named action; its text line opens only after this is pressed. */
.gen { position: relative; display: inline-flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); height: clamp(84px, 12.5vh, 108px); padding: 0 clamp(30px, 3.4vw, 56px) 0 clamp(26px, 3vw, 48px); border: 0; cursor: pointer; text-align: left; text-decoration: none; background: var(--cobalt); color: var(--on-cobalt); clip-path: polygon(28px 0, 100% 0, calc(100% - 28px) 100%, 0 100%); transition: background-color .18s, transform .22s var(--ease); }
.gen:hover { background: var(--cobalt-2); transform: translateX(5px); }
.gen:active { transform: translateX(2px) scale(.99); }
.gen:focus-visible { outline: 0; } .gen:focus-visible b { text-decoration: underline 3px; text-underline-offset: 5px; }
.gen > svg { flex: none; width: 34px; height: 34px; fill: currentColor; }
.gen > svg:last-child { width: 22px; height: 22px; margin-left: 18px; transition: transform .25s var(--ease); }
.gen:hover > svg:last-child { transform: translateX(5px); }
.gen b { display: block; font: italic 900 clamp(26px, 2.5vw, 38px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.gen small { display: block; margin-top: 7px; font-size: 15.5px; line-height: 1.2; color: color-mix(in srgb, var(--on-cobalt) 82%, transparent); white-space: nowrap; }
/* What the assistant picked up from the text, as it is typed. */
.heard { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; }
.heard { min-height: 30px; align-items: center; }
.heard li { display: flex; align-items: center; gap: 7px; color: var(--ink-2); }
.heard li svg { width: 12px; height: 12px; fill: currentColor; }
.heard li.ok { padding: 5px 11px; background: var(--ink); color: var(--bg); font-weight: 600; animation: rise .3s var(--ease); }
.heard li.miss { margin-left: 4px; }
/* The body. One figure, taller than the screen, standing whole on the cobalt side: it never crosses the cut.
   wb.js turns it around and moves it up and down. */
.stage, .half { position: fixed; inset: 0; pointer-events: none; }
.stage { z-index: 1; transition: opacity .25s; }
/* One body for the cobalt side, wherever it stands: the big one of the start screen and the two of "Generar
   rutina" share these colours. */
.on-slab { clip-path: polygon(calc(100vw - var(--cut-w) + var(--lean-x)) 0, 100% 0, 100% 100%, calc(100vw - var(--cut-w)) 100%); }
.on-slab, .pair {
  --m-body: var(--fig-body); --m-rest: var(--fig-rest); --m-pri: #fff; --m-sec: var(--fig-rest); --m-sec-ink: rgba(255, 255, 255, .88); }
[data-theme="light"] .stage { --fig-body: #eccd53; --fig-rest: #fae076; }
[data-theme="dark"] .stage { --fig-body: #f2d04a; --fig-rest: #ffe26f; }
.on-slab, .pair { --h1: color-mix(in srgb, #fff 18%, var(--fig-rest)); --h2: color-mix(in srgb, #fff 38%, var(--fig-rest)); --h3: color-mix(in srgb, #fff 58%, var(--fig-rest)); --h4: color-mix(in srgb, #fff 80%, var(--fig-rest)); --h5: #fff; }
/* It stands a little left of the middle of the cobalt side, clear of the cut. When the wheel moves it up, it also
   slides right at the lean of the cut (.2126 = --lean-x over the screen's height), so the gap to the cut never
   changes. Its size leaves room for that slide on the right. */
.rig { --H: min(165vh, 92vw, (var(--cut-w) - var(--lean-x) * .55 - 10vw) * 2.075); position: absolute; left: calc(100vw - var(--cut-w) / 2 + var(--lean-x) / 4 - 3vw); top: max(0px, (100vh - var(--H)) / 2); height: var(--H); aspect-ratio: 680 / 1411; transform: translate(calc(-50% - var(--y, 0px) * .2126), var(--y, 0px)); will-change: transform; }
.fig { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.fig.on { opacity: 1; }
.flip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 16px; border: 0; cursor: pointer; pointer-events: auto; background: #fff; color: #7a500b; font: italic 800 13px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); transition: background-color .15s; }
.flip:hover { background: #fff8dc; }
.flip:focus-visible { outline: 3px solid #7a500b; outline-offset: -6px; }
.flip svg { width: 15px; height: 15px; fill: currentColor; }
.stage .b-m { stroke-width: 1.2; transition: fill .4s var(--ease), filter .9s var(--ease), opacity .3s var(--ease); }
.on-slab .b-m, .pair .b-m { stroke: var(--slab-line); }
.on-slab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36vh; background: linear-gradient(transparent, rgba(96, 58, 7, .9)); }
/* Where the body is a hero or a preview, a lit muscle pops without the glow. */
@keyframes mflat { 0% { transform: scale(1.12); } }
.stage .b-m.just, .focus .b-m.just { animation-name: mflat; }

/* ================= v4: pieces added in round 8 ================= */
/* A soft halo of the page colour behind a block of content: the moving type fades out before it reaches it. */
.halo { position: relative; isolation: isolate; }
.halo::before { content: ""; position: absolute; inset: -44px -70px; z-index: -1; background: var(--bg); filter: blur(42px); opacity: .82; pointer-events: none; }
/* The way back is always in the same place: top left. */
.back { position: fixed; top: 20px; left: 40px; z-index: 6; }
.back svg { transform: scaleX(-1); }
/* Waiting for the assistant. */
.loader { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--bg); animation: show .2s both; }
@keyframes show { from { opacity: 0; } }
.loader-wall { position: absolute; inset: 0; -webkit-mask-image: none !important; mask-image: none !important; opacity: .55; }
.loader-box { position: relative; display: grid; justify-items: center; gap: 18px; width: min(420px, 80vw); transition: opacity .32s var(--ease), transform .42s var(--ease), filter .32s; }
/* A question in the middle of the wait (WB.loader .hold): the wait steps back, still there, and the question rises
   over it; answered, the wait comes forward again. */
.loader-wall { transition: opacity .4s var(--ease); }
.loader.asks .loader-wall { opacity: .2; }
.loader.asks .loader-box { opacity: 0; transform: translateY(-18px) scale(.95); filter: blur(6px); }
.loader.asks + .modal, .loader.asks ~ .modal { background: transparent; }
.loader-box::before { content: ""; position: absolute; inset: -60px -90px; z-index: -1; background: var(--bg); filter: blur(40px); }
.loader-box img { width: 132px; height: 132px; object-fit: cover; object-position: 50% 36%; filter: var(--logo-filter) contrast(1.4); mix-blend-mode: var(--logo-blend); }
.loader-box b { font-size: clamp(20px, 2.2vw, 28px); text-align: center; }
.loader-bar { width: 100%; height: 12px; background: var(--line); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.loader-bar i { display: block; height: 100%; background: var(--cobalt); transform-origin: left; animation: fillbar linear both; }
[data-theme="dark"] .loader-bar i { background: var(--m-pri); }
@keyframes fillbar { from { transform: scaleX(0); } }
/* Marking muscles: one pair of bodies and a switch. */
.wbmk { display: grid; grid-template-columns: auto minmax(0, 440px); justify-content: center; align-items: center; gap: clamp(20px, 4vw, 52px); text-align: left; }
.wbmk-see { text-align: center; }
.wbmk .duo { display: flex; justify-content: center; gap: clamp(8px, 1.4vw, 20px); height: clamp(240px, 46vh, 460px); }
.wbmk .duo > span { height: 100%; aspect-ratio: 680 / 1411; }
.wbmk .b-m.up { stroke: var(--ink); stroke-width: 2.6; }
.wbmk .b-m.down { stroke: var(--ink-2); stroke-width: 1.6; stroke-dasharray: 4 3; }
.wbmk .b-m.just { animation-name: mflat; }
.key3 { margin-top: 10px; }
.key3 i b { width: 16px; }
.key3 i:nth-of-type(1) b { --ink-s: var(--h2-ink); --ground-s: var(--h2-ground); --w: .52; } .key3 i:nth-of-type(2) b { --ink-s: var(--h5); --ground-s: var(--h5); } .key3 i:nth-of-type(3) b { --ink-s: var(--h1-ink); --ground-s: var(--h1-ground); --w: .24; outline: 1px dashed var(--ink-2); }
.wbmk-sw { display: inline-flex; gap: 2px; }
.wbmk-sw button { min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 15px; text-align: left; transition: border-color .15s, background-color .15s, color .15s; }
.wbmk-sw button small { display: block; font-weight: 400; font-size: 12.5px; opacity: .8; }
.wbmk-sw button:hover { border-color: var(--ink); }
.wbmk-sw button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.wbmk-said { min-height: 4.6em; margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.wbmk-said b { color: var(--ink); }
.wbmk-rank { min-height: 3.1em; margin: 8px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 760px) { .wbmk { grid-template-columns: minmax(0, 1fr); } .wbmk .duo { height: 240px; } }

/* Entering a routine. The press sweeps the cover in on the page pressed, with whose it is rising; the editor opens
   already under it (`.kept`, nothing moves), so the routine is put together behind it; and it is swept away to the
   right over the finished screen (the moment between blocks on the phone). After a routine is generated the same
   cover sweeps in first. Not shown with motion paused. */
.enter { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 40px; color: #fff; text-align: center; overflow: hidden; }
.enter.in { animation: enter-in .55s var(--ease) both; }
.enter.out { animation: enter-out .5s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes enter-in { from { clip-path: polygon(0 0, 0 0, -30% 100%, 0 100%); } to { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); } }
@keyframes enter-out { from { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); } to { clip-path: polygon(130% 0, 130% 0, 100% 100%, 100% 100%); } }
.enter-in { position: relative; display: grid; justify-items: center; gap: 14px; max-width: min(1100px, 92vw); }
.enter h2 { font-size: clamp(38px, 6.4vw, 104px); line-height: .96; text-wrap: balance; }
.enter h2 span { display: inline-block; margin: 0 .12em; animation: enter-word .6s var(--ease) both; animation-delay: calc(var(--k) * 90ms + var(--d, 0s)); }
.enter p { font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; opacity: .9; animation: enter-word .55s var(--ease) both; animation-delay: calc(.28s + var(--d, 0s)); }
.enter.in { --d: .3s; }
.enter.press { --d: .08s; }
.enter.kept h2 span { animation: none; }
.enter.kept .enter-st i { animation: none; transform: skewX(-17deg); }
@keyframes enter-word { from { opacity: 0; transform: translateY(34px); } }
/* What the cover is for, said from the first frame to the last: the routine is loading. */
.enter .enter-load { position: absolute; left: 0; right: 0; bottom: clamp(28px, 7vh, 64px); display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 15px; font-weight: 600; letter-spacing: .01em; opacity: .92; animation: none; }
.enter-load .veil-bars { display: flex; gap: 5px; margin: 0; }
.enter-load .veil-bars i, [data-theme="dark"] .enter-load .veil-bars i { width: 22px; height: 7px; background: #fff; transform: skewX(-28deg); animation: enter-bars 1.05s ease-in-out infinite; }
.enter-load .veil-bars i:nth-child(2) { animation-delay: .16s; } .enter-load .veil-bars i:nth-child(3) { animation-delay: .32s; }
@keyframes enter-bars { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.enter-st { position: absolute; inset: 0; pointer-events: none; }
.enter-st i { position: absolute; top: -8%; width: clamp(18px, 2vw, 30px); transform: skewX(-17deg) translateY(-125%); animation: enter-drop .85s var(--ease) both; animation-delay: calc(var(--k) * 100ms + .1s); }
@keyframes enter-drop { to { transform: skewX(-17deg); } }
.enter-st i:nth-child(1) { --k: 0; right: 7vw; height: 34%; background: rgba(255, 255, 255, .22); }
.enter-st i:nth-child(2) { --k: 1; right: 10.500vw; height: 25%; background: #fff; }
.enter-st i:nth-child(3) { --k: 2; right: 14vw; height: 16%; background: #101010; }
.enter-st i:nth-child(n + 4) { top: auto; bottom: -8%; transform: skewX(-17deg) translateY(125%); }
.enter-st i:nth-child(4) { --k: 3; left: 7vw; height: 30%; background: #101010; }
.enter-st i:nth-child(5) { --k: 4; left: 10.500vw; height: 19%; background: #fff; }


/* ================= v5: pieces added in round 9 ================= */
/* A dialog over everything else (wb.js pop). */
.wbtop { z-index: 90; }
.wbwide { width: 920px; }
.wbwide > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.wbwide > header p { color: var(--ink-2); }
/* "Rutina nueva": the two ways, as on the start screen, and the small third one. */
.wbnew { width: 520px; }
.wbnew .gen { display: flex; width: 100%; height: 84px; margin-top: 6px; padding: 0 26px; clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.wbnew .gen b { font-size: 22px; }
.wbnew .gen small { font-size: 14px; white-space: normal; }
.wbnew .gen > svg { width: 24px; height: 24px; }
.wbnew .gen > svg:last-child { width: 16px; height: 16px; margin-left: auto; }
.gen.ink { background: var(--ink); color: var(--bg); }
.gen.ok { background: var(--ok); color: #fff; } .gen.ok:hover { background: var(--ok-2); } .gen.ok small { color: color-mix(in srgb, #fff 86%, transparent); }
.gen.ink:hover { background: color-mix(in srgb, var(--ink) 80%, var(--cobalt)); }
.gen.ink small { color: color-mix(in srgb, var(--bg) 82%, transparent); }
[data-theme="dark"] .gen.ink { background: var(--surface-2); color: var(--ink); }
[data-theme="dark"] .gen.ink:hover { background: var(--line); }
[data-theme="dark"] .gen.ink small { color: var(--ink-2); }
.wbnew footer { justify-content: space-between; }
/* The rows of "Generar rutina" (wb.js genForm). The label and its control sit on one centre line. */
.gopt { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 12px; align-items: center; padding: clamp(6px, 1.15vh, 10px) 0; border-top: 1px solid var(--line); }
.gopt > b { font: italic 900 14px/1.3 var(--display); text-transform: uppercase; }
.gopt > b small { display: block; margin-top: 1px; font: 400 12.5px/1.3 var(--text); text-transform: none; color: var(--ink-2); }
.gopt > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* "Para el asistente": the trainer's own words, in a box with the button that says what is worth telling. */
.gtell { align-items: start; grid-template-rows: auto 1fr; }
.gopt [data-g-tog] .pill { padding: 6px 11px; }
.gtell > b { padding-top: 10px; }
.gopt > div.gabout { display: block; position: relative; grid-area: 1 / 2 / 3 / 3; padding: 10px 12px; border: 1.5px dashed var(--line); background: var(--bg); cursor: text; transition: border-color .15s; }
.gabout:focus-within { border-color: var(--link); border-style: solid; }
.gabout textarea { display: block; width: 100%; padding: 0; border: 0; background: none; outline: 0; resize: none; font: 14.5px/1.5 var(--text); color: var(--ink); }
.gabout textarea::placeholder { color: var(--ink-2); }
.gtell > .ginfo { grid-area: 2 / 1; justify-self: start; padding: 0 13px; }
.ginfo svg { color: var(--link); }
.gtips { width: 540px; }
.gtips ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; list-style: square; font-size: 14.5px; line-height: 1.45; }
.gtips li::marker { color: var(--link); }
.gtips .gtips-n { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }
.pill { min-height: 36px; padding: 6px 13px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 14.5px; transition: border-color .15s, background-color .15s, color .15s; }
.pill:hover, .pill:focus-visible { border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill.n { min-width: 44px; font: 700 17px/1 var(--num); }
.gopt .field { min-height: 36px; min-width: 0; padding: 6px 12px; font-size: 14.5px; }
.gopt .gnote { margin-left: 6px; font-size: 13px; color: var(--ink-2); }
/* "Énfasis": the muscles and the progression, two buttons on one line. Each says what is set, cut short if long. */
.gopt > div.gtwo { flex-wrap: nowrap; gap: 8px; }
.gtwo .tb { flex: 0 1 auto; min-width: 0; padding: 0 14px; }
.gtwo .tb span { overflow: hidden; text-overflow: ellipsis; }
.gtwo .tb.on { color: var(--link); }
.gtwo .tb.on::before { background: color-mix(in srgb, var(--cobalt) 10%, var(--surface)); }
.gopt .gset { display: contents; }
.gopt .gset[data-g="absPick"]:not(:empty)::before { content: ""; width: 1px; height: 26px; margin: 0 6px; background: var(--line); }
/* What can be left alone: a dashed line over its row and a dashed tag under its name. Nothing required has either. */
.gopt.opt { border-top-style: dashed; }
.optional { display: inline-block; width: fit-content; margin-top: 4px; padding: 1px 7px 2px; border: 1px dashed currentColor; font: 600 11.5px/1.3 var(--text); text-transform: none; letter-spacing: .01em; color: var(--ink-2); vertical-align: middle; }
.gopt > b small.optional { display: block; margin-top: 4px; font: 600 11.5px/1.3 var(--text); }
h2 .optional { margin: 0 0 0 8px; vertical-align: 4px; }
.wbmk-sw button small.optional { display: block; margin-top: 3px; font-size: 11px; }
.wk-o { width: 74px !important; text-align: center; font: 700 16px/1 var(--num) !important; }
.wk-o::placeholder { font: 500 14px/1 var(--text); }
.favs button { display: block; width: 100%; padding: 12px 6px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; transition: color .15s, transform .3s var(--ease); }
.favs button:hover, .favs button:focus-visible { color: var(--link); transform: translateX(8px); }
.favs b { display: block; font: italic 900 18px/1.3 var(--display); text-transform: uppercase; }
.favs small { color: var(--ink-2); font-size: 13.5px; }
/* An exercise as a moving picture: start and end, one at a time, never one over the other (wb.js frames). */
.frames { position: relative; display: block; }
.frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.frames img + img { visibility: hidden; }
.frames.play img, .alt:hover .frames img { animation: frame-a 1.5s steps(1) infinite; }
.frames.play img + img, .alt:hover .frames img + img { animation-name: frame-b; }
@keyframes frame-a { 0%, 100% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes frame-b { 0%, 100% { visibility: hidden; } 50% { visibility: visible; } }
@media (max-width: 860px) { .gopt { grid-template-columns: 1fr; gap: 4px; } }
/* Sharing a routine (wb.js share). The card is a picture on its own backing, so a screenshot of it is clean;
   the link and the buttons are outside it. The card is white in both themes: it is made to be sent. */
.wbshare { width: 420px; text-align: center; }
.wbshare-card { padding: 18px; background: var(--surface-2); }
.wbshare-card canvas { display: block; width: min(300px, 100%); height: auto; margin: 0 auto; background: #fff; }
.wbshare-do { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.wbshare-said { min-height: 2.9em; margin: 10px 0 0 !important; font-size: 13.5px; text-wrap: balance; }
.wbshare-link { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.wbshare-link code { flex: 1; min-width: 0; padding: 9px 10px; background: var(--surface-2); font: 500 13px/1.2 var(--text); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.wbshare footer { justify-content: center; flex-wrap: wrap; }

/* A priority, from 1 (the day's main work) to 5, in the colours of the body's heat map. */
.pr { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; background: var(--h5); color: #fff; font: 700 13px/1 var(--num); font-style: normal; }
.pr[data-p="2"] { background: var(--h4); } .pr[data-p="3"] { background: var(--h3); color: var(--ink); } .pr[data-p="4"] { background: var(--h2); color: var(--ink); } .pr[data-p="5"] { background: var(--h1); color: var(--ink); }
[data-theme="dark"] .pr[data-p="1"] { color: #0e0e0e; } [data-theme="dark"] .pr:is([data-p="3"], [data-p="4"], [data-p="5"]) { color: #fff; }

/* ---- The catalogue: the body is the filter. One piece (WB.catalog), shown on the Ejercicios screen and in the
   editor's full-screen pop-up. */
.cat { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; }
.cat-side { position: sticky; top: var(--cat-top, 68px); align-self: start; }
.cat .duo { display: grid; grid-template: minmax(0, 1fr) / 1fr 1fr; gap: 4px; height: 300px; }
.cat .duo > span { min-height: 0; }
.cat-side h2 { font-size: 17px; margin-top: 14px; min-height: 2.1em; }
.cat-side p { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; min-height: 2.9em; }
.cat .eq { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cat-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 36px; margin: 20px 0 10px; scroll-margin-top: 16px; }
.cat-bar [data-cat-back] svg { transform: scaleX(-1); }
.cat .count { color: var(--ink-2); font-size: 14px; }
.cat .count b { font: 700 17px/1 var(--num); color: var(--ink); margin-right: 4px; }
.cat h3.fam { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 10px; font: italic 900 18px/1 var(--display); text-transform: uppercase; }
.cat .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cat .fam + .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.xt { display: block; padding: 0 0 10px; border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .15s, transform .2s var(--ease); }
button.xt { cursor: pointer; }
.xt:hover, .xt:focus-visible, .xt:focus-within { border-color: var(--ink); transform: translateY(-3px); }
/* The picture sits inside the card with room on every side and under it, before the name: a photo or the gym's mark
   never touches the card's edge. */
.xt img { display: block; width: calc(100% - 20px); aspect-ratio: 1; margin: 10px 10px 10px; object-fit: contain; padding: 0; }
.xt b { display: block; padding: 0 10px; font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.xt small { display: block; padding: 3px 10px 0; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.chip.hidc i { margin-left: 6px; font: 700 12px/1 var(--num); font-style: normal; opacity: .75; }
.xt .tb { height: 28px; margin: 8px 10px 0; padding: 0 12px; font-size: 12.5px; --sl: 6px; }
.xt .tb svg { width: 11px; height: 11px; }
.xt.off { opacity: .45; }
.xt[hidden] { display: none; }
/* The last place of a muscle's two rows when it has more: the same size as a tile, and it opens them all. */
.xt.more { cursor: pointer; border-style: dashed; border-color: var(--ink-2); background: none; }
.xt.more > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1; color: var(--link); }
.xt.more svg { width: 34px; height: 34px; fill: currentColor; transition: transform .25s var(--ease); }
.xt.more:hover svg, .xt.more:focus-visible svg { transform: translateX(6px); }
.xt.more [data-left] { padding: 0; font: 700 26px/1 var(--num); color: var(--ink); }
.xt.off b::after { content: " · no hay"; font-weight: 400; }
/* Pages: every number when there are few, so how many are left can be read at a glance. */
/* What is archived (two months unused), at the foot of its list, folded. */
.arch { margin-top: 14px; border-top: 2px solid var(--ink); }
.arch > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font: italic 900 17px/1 var(--display); text-transform: uppercase; }
.arch > summary::-webkit-details-marker { display: none; }
.arch > summary .n { font: 700 13px/1 var(--num); font-style: normal; padding: 4px 7px; background: var(--surface-2); color: var(--ink-2); }
.arch > summary small { font: 500 13.5px/1.3 var(--text); font-style: normal; text-transform: none; color: var(--ink-2); }
.arch > summary svg { width: 13px; height: 13px; margin-left: auto; fill: var(--ink-2); transform: rotate(90deg); transition: transform .2s var(--ease); }
.arch[open] > summary svg { transform: rotate(-90deg); }
.arch > div { padding-bottom: 12px; opacity: .82; }
.pager { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* Every button of the pager leans, the page numbers too; the page on screen is filled. */
.pager .pn { min-width: 42px; padding: 0 12px; font: 700 14px/1 var(--num); }
.pager .pn[aria-current], .pager .pn[aria-current]::before { background: var(--ink); color: var(--bg); }
.pager .tb { height: 34px; padding: 0 14px; font-size: 13px; }
.pager .tb[disabled] { opacity: .4; pointer-events: none; }
.pager span { min-width: 20px; text-align: center; color: var(--ink-2); font: 700 14px/1 var(--num); }
@media (max-width: 860px) {
  .cat { grid-template-columns: 1fr; }
  .cat-side { position: static; }
  .cat .fam + .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pager { margin-left: 0; }
}

/* The way back to the start screen: a small arrow before a screen's title. */
.home { display: inline-grid; place-items: center; width: .82em; height: .82em; min-width: 30px; min-height: 30px; margin-right: .28em; border: 1px solid transparent; color: var(--ink-2); vertical-align: -.06em; transition: color .15s, border-color .15s, transform .2s var(--ease); }
.home svg { width: 46%; height: 46%; fill: currentColor; transform: scaleX(-1); }
.home:hover, .home:focus-visible { color: var(--ink); border-color: var(--ink); transform: translateX(-3px); }
/* Clearing every filter of the catalogue at once. */
.cat .eq .cat-clear { height: 26px; margin-left: 6px; padding: 0 12px; font-size: 12.5px; --sl: 6px; }
.cat .eq .cat-clear svg { width: 9px; height: 9px; }
.cat-side p b { color: var(--ink); }

/* Muscles as filters: the main one solid, a support one striped, as on the body. */
.chip.mus { border-color: transparent; }
.chip.mus svg { width: 9px; height: 9px; margin-left: 6px; fill: currentColor; }
.chip.mus.main, .chip.mus.main[aria-pressed="true"] { background: var(--m-pri); color: var(--on-cobalt); }
.chip.mus.sup, .chip.mus.sup[aria-pressed="true"] { background: color-mix(in srgb, var(--m-pri) 42%, var(--surface-2)); color: var(--ink); }
.cat .eq { min-height: 30px; }
.cat .eq { margin-top: 0; }
.eq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; margin-top: 12px; }
.eq-row .cat-clear { height: 26px; margin: 0; padding: 0 12px; font-size: 12.5px; --sl: 6px; }
.eq-row .cat-clear:disabled { opacity: .35; cursor: default; }
.cat-side h2 { font-size: 24px; }
.cat-side p { font-size: 15.5px; }
.said-k { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink); font-weight: 600; }
.said-k b { color: var(--ink-2); font-weight: 600; }
.said-k i { flex: none; width: 14px; height: 14px; }
.said-k i.main { background: var(--m-pri); }
.said-k i.sup { background: repeating-linear-gradient(130deg, var(--m-sec-ink) 0 2px, var(--m-sec) 0 5px); }
.said-h { display: block; margin-top: 6px; font-size: 13.5px; }
/* Making an exercise of the gym's own (wb.js makeExercise). */
.dlg.wbnx { width: 760px; }
.wbnx-in { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; margin-top: 14px; }
.wbnx-in label { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; }
.wbnx-in label small { font-weight: 400; color: var(--ink-2); }
.wbnx-in .wbmk-sw { margin: 18px 0 8px; }
.wbnx-in p { min-height: 4.2em; font-size: 14px; color: var(--ink-2); }
.wbnx-in p b { color: var(--ink); }
.wbnx-in input[type="file"] { font: 500 13.5px/1.3 var(--text); color: var(--ink-2); }
.wbnx-in .duo { display: grid; grid-template: minmax(0, 1fr) / 1fr 1fr; gap: 4px; height: 280px; }
.wbnx-in .duo > span { min-height: 0; }
/* "Cardio": a switch beside the muscle buttons, the same shape. On, it is filled like the chosen muscle button. */
.wbnx-in .wbnx-c { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
.wbnx-why { flex-basis: 100%; max-width: 60ch; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.wbnx-in > div:first-child { display: grid; gap: 16px; align-content: start; }
.wbnx-in > div:first-child > * { margin-top: 0; }
.wbnx-in p { min-height: 2.8em; }
.wbnx-files { display: inline-flex; flex-wrap: wrap; gap: 8px 10px; animation: rise .3s var(--ease); }
.wbnx-files[hidden] { display: none; }
/* The same dialog for the muscles of an exercise that exists: no name to type, no picture to choose. */
.wbnx-e .wbnx-in label { display: none; }
.wbnx-e .wbnx-in .wbmk-sw { margin-top: 0; }
/* "Agregar" and "Músculos" stay inside the card: side by side when they fit, "Músculos" under it when not. */
.xt-do { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding-right: 10px; }
.xt-do .txt { margin: 8px 0 0 10px; font-size: 12.5px; padding: 0 2px; white-space: nowrap; }
/* Where an exercise has no picture: the gym's mark, small and quiet. */
img.nopic { object-fit: contain !important; background: #101010 !important; }
/* Choosing a file: our button, and the file's name beside it. */
.wbfile { display: inline-flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.wbfile input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wbfile .tb { flex: none; }
.wbfile:focus-within .tb, .wbfile:hover .tb { background: var(--ink); }
.wbfile em { font-style: normal; font-size: 13px; color: var(--ink-2); min-width: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbfile.has em { color: var(--ink); font-weight: 600; }
.wbnx-pic { display: grid; gap: 8px; }
/* What it is done with (v0.97.0): small chips under the name; the ones the assistant asks about lit in cobalt. */
.wbnx-eq { display: grid; gap: 6px; margin-top: 14px; }
.wbnx-eq > b { font-size: 13.5px; font-weight: 600; }
.wbnx-eq > div { display: flex; flex-wrap: wrap; gap: 5px; }
.wbnx-eq .chip.pri { background: transparent; color: var(--cobalt); border-color: var(--cobalt); }
.wbnx-pic b { font-weight: 600; font-size: 13.5px; }
.wbnx-pic small { font-weight: 400; color: var(--ink-2); }
/* A cardio exercise has no muscles: marked as cardio, the dialog has nothing to mark them with. */
.wbnx .duo { transition: opacity .35s var(--ease), filter .35s var(--ease); }
.wbnx.cardio .duo { opacity: .3; filter: blur(3px) grayscale(1); pointer-events: none; }
.wbnx-in input[aria-invalid="true"] { border-color: var(--bad); outline: 1px solid var(--bad); }
/* The pictures of a new exercise: three buttons in a row (the phone, the start, the end); a file's name shows once chosen. */
.wbnx-in .wbnx-pic { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wbnx-pic > b { flex: 0 0 100%; }
.wbnx-in label.wbfile { display: inline-flex; gap: 8px; font-weight: 400; }
.wbnx-pic .wbfile:not(.has) em { display: none; }
.wbnx-in .wbnx-c { display: block; margin-left: 0; }
/* A switch: off or on, said by where its square is. */
.wbtog { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font: 700 15px/1 var(--text); color: var(--ink); vertical-align: middle; }
.wbtog i { position: relative; flex: none; width: 44px; height: 24px; border: 1px solid var(--ink-2); background: var(--surface); transition: background-color .2s, border-color .2s; }
.wbtog i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--ink-2); transition: transform .2s var(--ease), background-color .2s; }
.wbtog[aria-checked="true"] i { background: var(--cobalt); border-color: var(--cobalt); }
.wbtog[aria-checked="true"] i::after { transform: translateX(20px); background: var(--on-cobalt); }
.wbtog:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wbnx-e .wbnx-pic { display: none; }
/* The pictures of an exercise: the code to scan at the left; at the right, what to do and the way from this computer. */
.dlg.wbph { width: 760px; }
.wbph-link { display: flex; gap: 8px; margin-bottom: 14px; }
.wbph-link .field { flex: 1; min-width: 0; font-size: 13px; }
.wbph-link .tb { flex: none; }
.wbph-in { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; margin-top: 12px; align-items: start; }
.wbph-qr canvas { display: block; width: 230px; height: 230px; border: 1px solid var(--line); }
.wbph-in p { color: var(--ink-2); font-size: 14.5px; margin-bottom: 12px; }
.wbph-in p b { color: var(--ink); }
.wbph-wait { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.wbph-wait .veil-bars { display: flex; gap: 4px; }
.wbph-wait .veil-bars i { width: 20px; height: 7px; background: var(--cobalt); transform: skewX(-28deg); animation: wbph 1.05s ease-in-out infinite; }
.wbph-wait .veil-bars i:nth-child(2) { animation-delay: .16s; } .wbph-wait .veil-bars i:nth-child(3) { animation-delay: .32s; }
.wbph-wait.ok { color: var(--link); } .wbph-wait.ok .veil-bars i { animation: none; }
@keyframes wbph { 0%, 100% { opacity: .16; } 40% { opacity: 1; } }
.wbph-up { display: grid; gap: 8px; justify-items: start; }
.wbph-up .btn { margin-top: 4px; }
.wbph-miss { min-height: 1.4em; margin: 8px 0 0 !important; font-size: 13px !important; }
/* A button that has to be held: it fills from the left while it is pressed, and lets go empties it. */
.wbhold { position: relative; isolation: isolate; overflow: hidden; height: 40px; padding: 0 18px; border: 2px solid var(--bad); background: var(--surface); color: var(--bad); font-weight: 800; font-size: 14px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.wbhold i { position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bad) 30%, var(--surface)); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.wbhold.on i { transform: scaleX(1); transition: transform var(--ms) linear; }

.wbnx footer .lead { margin-right: auto; color: var(--flag); font-size: 13px; }
@media (max-width: 760px) { .wbnx-in { grid-template-columns: 1fr; } }

/* An exercise's right-click menu (wb.js exMenu): add it to a block, preferred, hidden. "Agregar a" opens its blocks
   at the side. */
.exm { position: fixed; left: 0; top: 0; z-index: 95; min-width: 236px; padding: 4px; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 18px 36px -16px rgba(8, 8, 8, .55); animation: rise .16s var(--ease); }
.exm > p { padding: 6px 10px 7px; margin-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exm ul { list-style: none; margin: 0; padding: 0; }
.exm li { position: relative; }
.exm button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 9px 10px; cursor: pointer; text-align: left; font: 500 14px/1.2 var(--text); color: var(--ink); white-space: nowrap; }
.exm button[disabled] { color: var(--ink-2); cursor: default; }
.exm button[disabled] svg { fill: var(--ok); }
.exm button:not([disabled]):hover, .exm button:focus-visible, .exm .sub:hover > button { background: var(--surface-2); outline: 0; }
.exm button svg { width: 14px; height: 14px; fill: var(--link); flex: none; }
.exm button.exm-del { color: var(--bad); }
.exm button.exm-del svg { fill: var(--bad); }
.exm button .ch { margin-left: auto; width: 10px; height: 10px; fill: var(--ink-2); }
.exm .sub > ul { display: none; position: absolute; left: calc(100% + 4px); top: -6px; min-width: 210px; max-height: 60vh; overflow: auto; padding: 4px; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 18px 36px -16px rgba(8, 8, 8, .55); }
.exm.left .sub > ul { left: auto; right: calc(100% + 4px); }
.exm .sub:hover > ul, .exm .sub.open > ul { display: block; animation: exm-in .18s var(--ease); }
@keyframes exm-in { from { opacity: 0; transform: translateX(-8px); } }
.exm.left .sub > ul { animation-name: exm-in-l; }
@keyframes exm-in-l { from { opacity: 0; transform: translateX(8px); } }
.exm:focus { outline: 0; }
.exm .sub > ul li:last-child button { border-top: 1px solid var(--line); margin-top: 3px; font-weight: 700; }
/* The assistant asking (WB.askPanel). The options are cards to choose from; the trainer's own words have a box of
   their own, below and apart, that says "Su respuesta" when it is the answer; more context, when there is room for it,
   has a dashed edge: it adds to the choice, it is not one. */
.wbask { width: 680px; }
.wbask > p { margin-bottom: 14px; }
.wbask-said { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--link); background: var(--surface-2); font-size: 15px; }
.wbask-said small { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.wbask-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wbask-opts.many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wbask-o { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 11px 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s var(--ease); }
.wbask-o:hover { border-color: var(--ink-2); }
.wbask-o:active { transform: scale(.985); }
.wbask-o > i, .wbask-own > i { flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--ink-2); transition: background-color .15s, border-color .15s; }
.wbask-o > i::after, .wbask-own > i::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--on-cobalt); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease); }
.wbask-o b { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.wbask-o small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.wbask-o[aria-pressed="true"] { border-color: var(--link); background: color-mix(in srgb, var(--cobalt) 8%, var(--surface)); }
.wbask-o[aria-pressed="true"] > i, .wbask-own.on > i { background: var(--cobalt); border-color: var(--cobalt); }
.wbask-o[aria-pressed="true"] > i::after, .wbask-own.on > i::after { transform: rotate(45deg) scale(1); }
.wbask-fields { display: grid; gap: 14px; }
.wbask-fl { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; }
.wbask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wbask-c { height: 34px; padding: 0 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 13.5px var(--text); cursor: pointer; }
.wbask-c[aria-pressed="true"] { border-color: var(--link); background: color-mix(in srgb, var(--cobalt) 10%, var(--surface)); color: var(--link); }
.wbask-c:last-child { color: var(--ink-2); border-style: dashed; }
.wbask-in { display: flex; align-items: center; gap: 8px; max-width: 360px; border: 1.5px solid var(--line); background: var(--bg); padding: 0 12px; }
.wbask-in input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; outline: 0; font: 600 15px var(--text); color: var(--ink); }
.wbask-in em { font-style: normal; color: var(--ink-2); font-size: 13.5px; }
.wbask-in:focus-within { border-color: var(--link); }
.wbask-own, .wbask-extra { display: block; margin-top: 18px; padding: 12px 14px 14px; border: 2px solid var(--line); background: var(--bg); cursor: text; transition: border-color .18s, background-color .18s; }
/* Under a list of options the box of one's own words is one more of them: the same box and the same mark, right
   below, and marked as soon as something is written in it. Alone (no options) it is only a field. */
.wbask-own:not(.alone) { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; padding: 11px 12px; border: 1.5px solid var(--line); background: var(--surface); }
.wbask-own > span { display: block; flex: 1; min-width: 0; }
.wbask-own.alone { margin-top: 4px; } .wbask-own.alone > i { display: none; }
.wbask-extra { border-style: dashed; border-width: 1.5px; margin-top: 12px; }
.wbask-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.wbask-h b { font-size: 14.5px; }
.wbask-h small { font-size: 12.5px; color: var(--ink-2); }
.wbask-own.on { border-color: var(--link); background: color-mix(in srgb, var(--cobalt) 8%, var(--surface)); }
.wbask-own textarea, .wbask-extra textarea { display: block; width: 100%; padding: 0; border: 0; background: none; outline: 0; resize: vertical; font: 15px/1.5 var(--text); color: var(--ink); }
.wbask-own textarea::placeholder, .wbask-extra textarea::placeholder { color: var(--ink-2); opacity: .8; }
.wbask-own:focus-within { border-color: var(--link); }
.wbask footer { flex-wrap: wrap; margin-top: 20px; }
.wbask-skip { margin-right: auto; }
.wbask-miss { margin: 0 auto 0 0; font-size: 13.5px; color: var(--bad); }
.wbask-skip + .wbask-miss { margin-left: 0; }
@media (max-width: 640px) { .wbask-opts, .wbask-opts.many { grid-template-columns: 1fr; } }
/* "¿Para quién es?" in a dialog (WB.pickWho): a search field and the names under it, groups first. */
.wbwho { width: 520px; }
.wbwho-f { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 16px; padding: 0 14px; border: 2px solid var(--ink); background: var(--bg); }
.wbwho-f svg { flex: none; width: 18px; height: 18px; fill: var(--ink-2); }
.wbwho-f input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font: 600 16px var(--text); color: var(--ink); }
.wbwho-f input::placeholder { font-weight: 400; color: var(--ink-2); }
.wbwho-l { height: 300px; overflow: auto; border: 2px solid var(--ink); border-top: 0; }
.wbwho-l p { padding: 10px 14px 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.wbwho-l button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); }
.wbwho-l button[aria-selected="true"], .wbwho-l button:hover { background: var(--surface-2); }
.wbwho-l b { display: block; font: italic 900 17px/1.15 var(--display); text-transform: uppercase; }
.wbwho-l small { display: block; font-size: 12.5px; color: var(--ink-2); }
.wbwho-l .ini svg { width: 14px; height: 14px; fill: currentColor; }
.wbwho-l .new .ini { background: var(--cobalt); color: var(--on-cobalt); }
/* "Rutina independiente" where a person is chosen. It is not a person, so it never looks like one: a dashed box
   across the whole width, no initials, and all of what it says. */
.indep { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 18px; border: 1.5px dashed var(--ink-2); background: none; cursor: pointer; text-align: left; color: var(--ink); transition: border-color .15s, background-color .15s; }
.indep > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: currentColor; }
.indep b { display: block; font: 700 16px/1.3 var(--text); }
.indep small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); white-space: normal; }
.indep:hover, .indep:focus-visible, .indep[aria-pressed="true"], .indep[aria-selected="true"] { border-style: solid; border-color: var(--link); background: var(--surface-2); }
/* A hidden or preferred exercise in the catalogue says so on its picture. */
.xt { position: relative; }
.xtag { position: absolute; left: 6px; top: 6px; padding: 2px 6px; background: var(--ink); color: var(--bg); font: 700 11px/1.4 var(--text); font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.xtag.like { background: var(--link); color: #fff; }

/* ================= v0.88.0: the muscles the assistant proposes for each day (wb.js musclePlan) ================= */
.mplan { width: 1040px; }
.mp-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.mp-days li { display: grid; align-content: start; gap: 6px; padding: 14px 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mp-days h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.mp-days h3 small { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--link); }
.mp-days li.same h3 small { color: var(--ink-2); font-weight: 600; }
.mp-days b { font: italic 900 19px/1.15 var(--display); text-transform: uppercase; }
.mp-b { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; gap: 4px; height: 190px; margin: 4px 0 8px; }
.mp-b > div { height: 100%; min-height: 0; }
.mp-days p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.mp-days .mp-was { padding-top: 6px; border-top: 1px solid var(--line); }
.mp-days li.same .mp-b { opacity: .55; }
.mp-n { margin-top: 12px; font-weight: 700; }
@media (max-width: 760px) { .mp-days { grid-template-columns: 1fr 1fr; } .mp-b { height: 150px; } }
/* "¿Sigue igual?": each entry a band between rules, its words first, how long ago under them, its four answers in the
   chips "Antes de armarla" uses; "Cambió" opens a box for how it is now. */
.hck { width: 620px; }
.hck > p { color: var(--ink-2); }
.hck-l { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.hck-l li { display: grid; gap: 6px; padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.hck-l li > b { font: 700 16.5px/1.35 var(--text); color: var(--ink); text-wrap: pretty; }
.hck-l li > small { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.hck-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hck-a .wbask-c:last-child { color: var(--ink); border-style: solid; }   /* "Cambió" is an answer, not the dashed "No sé" */
.hck-w { display: grid; gap: 6px; margin-top: 4px; animation: rise .28s var(--ease) both; }
.hck-w[hidden] { display: none; }
.hck-w span, .hl-add label span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.hck-w textarea, .hl-add textarea { display: block; width: 100%; padding: 9px 11px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: 15px/1.45 var(--text); resize: vertical; transition: border-color .15s; }
.hck-w textarea:focus, .hl-add textarea:focus { outline: 0; border-color: var(--link); }

/* The record: what applies now, then every line, newest first, the date in its own column. */
.hlog { width: 760px; }
.hl-b { display: grid; gap: 22px; max-height: min(52vh, 520px); overflow: auto; overscroll-behavior: contain; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.hl-b h3 { margin-bottom: 8px; font: italic 900 15px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.hl-e { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 62ch; }
.hl-now, .hl-rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.hl-now li { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.hl-now b { font: 700 15.5px/1.35 var(--text); }
.hl-now small, .hl-rows small { font-size: 13px; color: var(--ink-2); }
.hl-rows li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hl-rows time { font: 600 13px/1.5 var(--num); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hl-rows span { display: grid; gap: 2px; }
.hl-rows b { font: 600 14.5px/1.4 var(--text); }
.hl-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 18px; }
.hl-add label { display: grid; gap: 6px; }
.hlog footer .hl-x { margin-right: auto; }
@media (max-width: 640px) { .hl-rows li { grid-template-columns: 1fr; gap: 2px; } .hl-add { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hck-w { animation: none; } }