/* movement.css — the shared movement row (movementRow.js) for the Lift session, the circuit
 * editor and Mobility (owner, 2026-10-24/25, five rounds of live mockups).
 *
 * Two skins, set on the host: `.mv-cream` (the wooden sheets — the plates / cardio /
 * circuit look) and `.mv-glass` (the sauna's see-through panel, Mobility). Colours are the
 * skin's palette tokens with their values as fallbacks, like the sheets beside it. No
 * dashed borders (B58). The only animations — the open row's glowing picture and the
 * muscles blinking on the body — sit inside `prefers-reduced-motion: no-preference`.
 */

[class*="mv-"], [class*="mv-"]::before, [class*="mv-"]::after, .mv, .mv * { box-sizing: border-box; }

/* ---------------- the row ---------------- */
.mv-rows { display: flex; flex-direction: column; gap: 7px; }
.mv { position: relative; border-radius: 4px; }
.mv-bar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 6px 8px; font: inherit; text-align: left;
  color: inherit; background: none; border: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
.mv-bar:focus-visible { outline: 2px solid #f6d24a; outline-offset: -2px; }
.mv-n { position: relative; flex: 0 0 24px; align-self: stretch; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mv-pic { position: relative; flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; }
.mv-pic > .gp-glyph { transform: scale(.52); }
.mv-pic > .gp-machtile { width: 38px; height: 22px; }
.mv-pic > img { max-width: 40px; max-height: 42px; image-rendering: pixelated; pointer-events: none; }
.mv-pic.none::before { content: '—'; font-size: 14px; }
.mv-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mv-name { font-size: 13px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }   /* the WHOLE name, however long */
.mv-tag { margin-left: 6px; padding: 0 4px; font-size: 8px; letter-spacing: .5px; vertical-align: 2px; border-radius: 2px; }
.mv-pres { font-size: 10.5px; font-weight: 700; }
.mv-chev { flex: 0 0 auto; font-size: 12px; font-weight: 900; }

/* the order you did it: a slanted red rubber stamp over the number (owner's S2) */
.mv-stamp { position: absolute; left: 50%; top: 50%; padding: 1px 3px; transform: translate(-50%, -50%) rotate(-10deg);
  font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #b33a2a; white-space: nowrap;
  border: 2px solid #b33a2a; border-radius: 2px; background: rgba(255, 255, 255, .35);
  -webkit-mask-image: repeating-linear-gradient(35deg, #000 0 3px, rgba(0, 0, 0, .55) 3px 4px);
  mask-image: repeating-linear-gradient(35deg, #000 0 3px, rgba(0, 0, 0, .55) 3px 4px); }

/* the OPEN, not-yet-done row: its picture glows (owner's M3 — no orange border) */
.mv.cur .mv-pic { box-shadow: 0 0 0 2px #f6d24a, 0 0 8px 3px rgba(246, 210, 74, .7); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes mvGlow { 0%, 100% { box-shadow: 0 0 0 2px #f6d24a, 0 0 6px 2px rgba(246, 210, 74, .6); } 50% { box-shadow: 0 0 0 2px #f6d24a, 0 0 12px 5px rgba(246, 210, 74, .9); } }
  .mv.cur .mv-pic { animation: mvGlow 1.4s ease-in-out infinite; }
}

/* ---------------- the drawer ---------------- */
.mv-drawer { padding: 0 8px 10px; }
.mv-drawer[hidden] { display: none; }
.mv-tabs { display: flex; margin: 0 -8px 8px; }
.mv-tab { flex: 1; height: 32px; padding: 0; font: inherit; font-size: 10.5px; font-weight: 900; letter-spacing: 1.3px; background: none; border: 0; cursor: pointer; }
.mv-tips { margin: 0 0 8px; font-size: 11px; line-height: 1.45; white-space: pre-line; }
.mv-ooo { margin: 0 0 8px; font-size: 10px; font-weight: 900; color: #c0442e; }
.mv-sticky { margin: 2px 2px 10px; padding: 8px 10px 9px; font-size: 11.5px; line-height: 1.4; color: #4a3a1c; background: #f6e27a;
  box-shadow: 2px 3px 0 rgba(58, 44, 35, .25); white-space: pre-line; }
.mv-sticky b { display: block; font-size: 8.5px; letter-spacing: 1.2px; color: #8a6d1c; }
.mv-addnote { display: block; width: 100%; margin-top: 8px; padding: 8px; font: inherit; font-size: 12px; font-weight: 800; border-radius: 4px; cursor: pointer; }
.mv-note { display: block; width: 100%; min-height: 46px; margin-top: 8px; padding: 7px 8px; font: inherit; font-size: 12px; line-height: 1.4; border-radius: 4px; resize: vertical; }
.mv-empty { padding: 8px 0; font-size: 11px; font-style: italic; }
.mv-cap { font-size: 9.5px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; }

/* the TV */
.mv-video { display: flex; flex-direction: column; }
.mv-tv { position: relative; width: 100%; height: 124px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font: inherit; color: #e8c48f; background: #1a110b; border-radius: 3px; cursor: pointer; }
.mv-tv.off { cursor: default; }
.mv-tvimg { width: 50px; height: 44px; image-rendering: pixelated; pointer-events: none; }
.mv-tv.off .mv-tvimg { opacity: .35; }
.mv-tvlbl { font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.mv-iframe { width: 100%; aspect-ratio: 16 / 9; border: 3px solid var(--tol-wood-dark, #8a5a35); border-radius: 3px; background: #000; }
.mv-link { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mv-linktx { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-linkin { flex: 1; min-width: 0; padding: 6px 8px; font: inherit; font-size: 12px; border-radius: 4px; }
.mv-ico { flex: 0 0 34px; height: 32px; padding: 0; font: inherit; font-size: 15px; font-weight: 900; border-radius: 4px; cursor: pointer; }

/* ---------------- HISTORY: the climb + every workout (owner's HA) ---------------- */
.mv-climb { margin-bottom: 4px; }
.mv-chart { position: relative; height: 104px; margin: 14px 12px 4px; }
.mv-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mv-chart polyline { fill: none; stroke-width: 3; }
.mv-pt { position: absolute; z-index: 1; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; font: inherit; font-size: 8.5px; font-weight: 900; color: #fff;
  border: 2px solid var(--tol-umber, #3a2c23); border-radius: 50%; cursor: pointer; background: #a99a88; }
.mv-pt.up { background: #4f8f53; } .mv-pt.dn { background: #c0442e; }
.mv-pt.on { box-shadow: 0 0 0 3px #fff4c8, 0 0 0 5px #f6d24a; }
.mv-clab { display: flex; justify-content: space-between; padding: 0 2px; font-size: 8.5px; font-weight: 800; }
.mv-older { margin-top: 3px; font-size: 9px; text-align: right; }
.mv-hlist { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 4px 2px 2px; margin-top: 6px; scroll-behavior: smooth; }
.mv-hrow { padding: 7px 8px; border-radius: 4px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.mv-hhead { display: flex; align-items: center; gap: 8px; }
.mv-hhead b { font-size: 12px; }
.mv-hhead small { margin-left: auto; font-size: 9.5px; font-weight: 800; text-align: right; }
.mv-verdict { flex: 0 0 auto; padding: 3px 6px; font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #fff; border-radius: 3px; background: #a99a88; }
.mv-verdict.up { background: #4f8f53; } .mv-verdict.dn { background: #c0442e; }
.mv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mv-chips span { padding: 2px 5px; font-size: 11px; font-weight: 900; border-radius: 3px; }
.mv-hnote { margin-top: 4px; font-size: 10.5px; font-style: italic; }

/* ---------------- the set rows (Lift ENTRY + the editor's preview) ----------------
   T2: each number is a little wooden plaque; a warm-up's is grey (owner, 2026-10-25).
   D6e: a drop's plaque grows tall over both lines; the drop's boxes are terracotta. */
.mv-sets { display: flex; flex-direction: column; gap: 6px; }
.mv-set { display: flex; align-items: center; gap: 6px; }
.mv-plaque { flex: 0 0 28px; width: 28px; height: 28px; align-self: center; display: flex; align-items: center; justify-content: center; padding: 0;
  font: inherit; font-size: 11px; font-weight: 900; color: var(--tol-umber, #3a2c23); cursor: pointer;
  background: #c9975b; border: 2px solid var(--tol-umber, #3a2c23); border-radius: 3px;
  box-shadow: inset 0 2px 0 #ddb07a, inset 0 -2px 0 #8a5a35; text-shadow: 0 1px 0 rgba(255, 233, 196, .55);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.mv-set.warm .mv-plaque { color: #fff; background: #8f8a83; box-shadow: inset 0 2px 0 #b3aea6, inset 0 -2px 0 #66625c; text-shadow: none; }
.mv-set.cur .mv-plaque { box-shadow: inset 0 2px 0 #ddb07a, inset 0 -2px 0 #8a5a35, 0 0 0 2px #fffaf0, 0 0 0 4px var(--tol-umber, #3a2c23); }
.mv-set.extra { opacity: .6; }
.mv-set.has-drop { display: grid; grid-template-columns: 28px 1fr; gap: 4px 6px; align-items: stretch; }
.mv-set.has-drop .mv-plaque { grid-row: span 2; height: auto; align-self: stretch; }
.mv-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mv-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; }
.mv-field input { width: 100%; min-width: 0; height: 32px; padding: 4px 6px; font: inherit; font-size: 13px; font-weight: 800; border-radius: 3px; }
.mv-field small { flex: 0 0 auto; font-size: 9.5px; }
.mv-line.drop input { border-color: #c96f4a !important; }
.mv-line.drop small { color: #c96f4a; }
.mv-set.warm input { color: #7a756e; }
.mv-set .gs-field.offstack input { color: #c0442e; }

/* =================================================================== CREAM */
.mv-cream .mv { color: var(--tol-umber, #3a2c23); background: #fffaf0; border: 2px solid var(--tol-umber, #3a2c23); box-shadow: 2px 2px 0 rgba(58, 44, 35, .22); }
.mv-cream .mv.done { background: #d8ecc9; border-color: #4f8f53; }
.mv-cream .mv-n, .mv-cream .mv-chev { color: #a99a88; }
.mv-cream .mv-pic { background: #efe4d2; border: 2px solid rgba(58, 44, 35, .35); }
.mv-cream .mv-pic.none::before { color: #a99a88; }
.mv-cream .mv-pres { color: #7a6a5c; }
.mv-cream .mv.done .mv-pres, .mv-cream .mv.done .mv-n { color: #3f6f43; }
.mv-cream .mv-tag { color: #fff; background: #a99a88; }
.mv-cream .mv-bar.open { border-bottom: 2px solid rgba(58, 44, 35, .14); }
.mv-cream .mv-tabs { border-bottom: 2px solid rgba(58, 44, 35, .14); }
.mv-cream .mv-tab { color: #a99a88; }
.mv-cream .mv-tab.on { color: var(--tol-umber, #3a2c23); box-shadow: inset 0 -3px 0 var(--tol-terracotta, #c96f4a); }
.mv-cream .mv-tips { color: #5a4636; }
.mv-cream .mv-tv { border: 3px solid var(--tol-wood-dark, #8a5a35); box-shadow: 2px 2px 0 rgba(58, 44, 35, .3); }
.mv-cream .mv-linktx { color: var(--tol-wood-dark, #8a5a35); }
.mv-cream span.mv-linktx { color: #a99a88; }
.mv-cream .mv-linkin, .mv-cream .mv-note { color: var(--tol-umber, #3a2c23); background: #fff; border: 2px solid rgba(58, 44, 35, .4); }
.mv-cream .mv-ico { color: var(--tol-umber, #3a2c23); background: #e8c48f; border: 2px solid var(--tol-umber, #3a2c23); box-shadow: inset 0 -3px 0 #b07a4a; }
.mv-cream .mv-ico.ok { color: #fff; background: #4f8f53; box-shadow: inset 0 -3px 0 #3a6b3e; }
.mv-cream .mv-addnote { color: #7a6a5c; background: #fffaf0; border: 2px solid rgba(58, 44, 35, .3); }
.mv-cream .mv-empty, .mv-cream .mv-cap, .mv-cream .mv-clab, .mv-cream .mv-older, .mv-cream .mv-field small { color: #a99a88; }
.mv-cream .mv-chart polyline { stroke: var(--tol-umber, #3a2c23); }
.mv-cream .mv-hrow { background: #fffaf0; border: 2px solid rgba(58, 44, 35, .3); }
.mv-cream .mv-hrow.sel { background: #fff4c8; border-color: var(--tol-umber, #3a2c23); box-shadow: 0 0 0 2px #f6d24a; }
.mv-cream .mv-hhead small { color: #a99a88; }
.mv-cream .mv-chips span { color: var(--tol-umber, #3a2c23); background: #fff; border: 2px solid rgba(58, 44, 35, .35); }
.mv-cream .mv-chips span.up { color: #2f5e33; background: #e6f0dc; border-color: #7fae83; }
.mv-cream .mv-chips span.dn { color: #8e2f1f; background: #f7dccf; border-color: #c96f4a; }
.mv-cream .mv-chips span.w { color: #a99a88; background: #f6eee4; border-color: rgba(58, 44, 35, .2); }
.mv-cream .mv-hnote { color: #5a4636; }
.mv-cream .mv-field input { color: var(--tol-umber, #3a2c23); background: #fffaf0; border: 2px solid var(--tol-umber, #3a2c23); }
.mv-cream .mv-field input::placeholder { color: rgba(58, 44, 35, .35); font-weight: 700; }
.mv-cream .mv-set.warm input { border-color: #8f8a83; }
/* the box you're typing in: yellow, so it never reads as a drop's terracotta box (owner, 2026-10-25) */
.mv-cream input:focus, .mv-cream textarea:focus { outline: none; background: #fff4c8 !important; border-color: var(--tol-umber, #3a2c23) !important; box-shadow: 0 0 0 2px #f6d24a; }
.mv-cream input[readonly], .mv-cream textarea[readonly] { color: #6d5848; background: #f3ece0; box-shadow: none; }

/* =================================================================== GLASS */
.mv-glass .mv { color: #f8f3e4; background: rgba(255, 220, 180, .06); border: 1.5px solid rgba(255, 220, 180, .16); }
.mv-glass .mv.done { background: rgba(74, 127, 165, .38); border-color: rgba(143, 183, 212, .65); }
.mv-glass .mv-n, .mv-glass .mv-chev, .mv-glass .mv-pres { color: #e7b98a; }
.mv-glass .mv.done .mv-pres, .mv-glass .mv.done .mv-n { color: #cfe2f0; }
.mv-glass .mv-stamp { color: #ff8f7a; border-color: #ff8f7a; background: rgba(40, 22, 14, .35); }
.mv-glass .mv-tag { color: #2a1a10; background: #e7b98a; }
.mv-glass .mv-bar.open { border-bottom: 1px solid rgba(255, 220, 180, .14); }
.mv-glass .mv-tabs { border-bottom: 1px solid rgba(255, 220, 180, .18); }
.mv-glass .mv-tab { color: #e7b98a; }
.mv-glass .mv-tab.on { color: #f8f3e4; box-shadow: inset 0 -3px 0 #c96f4a; }
.mv-glass .mv-tips { color: #e7d3bd; }
.mv-glass .mv-tv { border: 2px solid #8a5a35; }
.mv-glass .mv-linktx { color: #e7b98a; }
.mv-glass .mv-linkin, .mv-glass .mv-note { color: #f8f3e4; background: rgba(255, 220, 180, .08); border: 1.5px solid rgba(255, 220, 180, .3); }
.mv-glass .mv-note::placeholder, .mv-glass .mv-linkin::placeholder { color: rgba(231, 185, 138, .7); }
.mv-glass .mv-ico { color: #f8f3e4; background: #3d271a; border: 1.5px solid #1f140d; box-shadow: inset 0 1px 0 rgba(255, 210, 160, .2), 0 2px 0 rgba(0, 0, 0, .4); }
.mv-glass .mv-ico.ok { background: #3a5a40; }
.mv-glass .mv-addnote { color: #e7b98a; background: rgba(255, 220, 180, .06); border: 1.5px solid rgba(255, 220, 180, .2); }
.mv-glass .mv-empty, .mv-glass .mv-cap, .mv-glass .mv-clab, .mv-glass .mv-older { color: #e7b98a; }
.mv-glass .mv-chart polyline { stroke: #e7b98a; }
.mv-glass .mv-pt { border-color: #1f140d; }
.mv-glass .mv-hrow { background: rgba(255, 220, 180, .06); border: 1.5px solid rgba(255, 220, 180, .16); }
.mv-glass .mv-hrow.sel { background: rgba(246, 210, 74, .18); border-color: #f6d24a; }
.mv-glass .mv-hhead small { color: #e7b98a; }
.mv-glass .mv-chips span { color: #f8f3e4; background: rgba(255, 220, 180, .08); border: 1.5px solid rgba(255, 220, 180, .3); }
.mv-glass .mv-chips span.up { color: #d7f0d0; background: rgba(79, 143, 83, .35); border-color: #7fae83; }
.mv-glass .mv-chips span.dn { color: #ffd9cf; background: rgba(192, 68, 46, .35); border-color: #e0856a; }
.mv-glass .mv-hnote { color: #e7d3bd; }
.mv-glass input:focus, .mv-glass textarea:focus { outline: none; border-color: #f6d24a !important; box-shadow: 0 0 0 2px rgba(246, 210, 74, .6); }
.mv-glass textarea[readonly] { opacity: .75; }

/* =================================================================== THE LIFT SESSION
   gymSession.js in the wooden sheet (owner, 2026-10-24: Lift matches the plates / cardio /
   circuit sheets). It is a page, not an overlay, so the sheet sits in the flow. */
.gs-sheet { position: relative; margin: 2px -4px 16px; color: var(--tol-umber, #3a2c23); font-weight: 700; }
.gs-sheet .gs-plaque { height: auto; min-height: 52px; }
.gs-title { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.gs-title .gp-title { font-size: 14px; letter-spacing: 1.5px; overflow-wrap: break-word; }
.gs-title .gs-date { font-size: 9.5px; font-weight: 900; letter-spacing: 1.2px; color: #6b4a2c; }
.gs-sheet .gs-saved { color: #2f5e33; }
.gs-sheet .gs-pencil.on { color: var(--tol-cream, #f8f3e4); background: var(--tol-umber, #3a2c23); }
.gs-sheet .gs-card { padding: 10px 10px 14px; }
.gs-sheet .gs-status { margin: 0 0 8px; border-radius: 3px; }
.gs-sheet .gs-status.todo { color: #7a6a5c; background: #efe4d2; border-color: rgba(58, 44, 35, .25); }
.gs-sheet .gs-tools { display: flex; gap: 8px; margin: 0; }
.gs-sheet .gs-tools .gp-pq, .gs-sheet .gs-gymwrap { flex: 1; }
.gs-sheet .gs-tool { width: 100%; height: 36px; font-size: 12px; }
.gs-sheet .gs-muscles { margin-top: 10px; padding: 8px; background: #fffaf0; border: 2px solid rgba(58, 44, 35, .3); border-radius: 4px; box-shadow: none; }
.gs-musbox { position: relative; }
.gs-musflash { position: absolute; inset: 0; pointer-events: none; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes gsMusFlash { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  .gs-musflash { animation: gsMusFlash 1.1s steps(2, end) infinite; }
}
.gs-sheet .gs-list { margin: 0; gap: 7px; }
.gs-sheet .gs-ex { overflow: visible; }
.gs-sheet .mv-drawer { padding: 0 8px 10px; }
.gs-sheet .gs-set.warm { opacity: 1; }
.gs-sheet .gp-eqrow { margin: 0 0 6px; }
.gs-sheet .gs-addset { display: block; width: 100%; height: 34px; margin-top: 8px; font-size: 12px; border-radius: 4px; }
.gs-sheet .gs-complete { display: block; width: 100%; height: 40px; margin-top: 8px; padding: 0; font-size: 13px; border-radius: 4px; }
.gs-sheet .gs-reopen { color: #2f5e33; background: #fffaf0; border-color: #4f8f53; box-shadow: none; }
.gs-sheet .gs-note { margin-top: 8px; border-radius: 4px; }
.gs-sheet .gs-sessionnote { display: block; width: 100%; min-height: 54px; margin-top: 12px; background: #fff; border: 2px solid rgba(58, 44, 35, .4); box-shadow: none; }
.gs-sheet .gs-finish { display: block; width: 100%; height: 46px; margin: 10px 0 0; font-size: 14px; border-radius: 4px; }
.gs-sheet .gs-finish.done { background: #4f8f53; }
/* the refill line: a quiet text button under the sets */
.gs-refillwrap { position: relative; margin-top: 6px; }
.gs-sheet .gs-refill { width: 100%; height: 28px; padding: 0 8px; font: inherit; font-size: 10.5px; font-weight: 800; color: #7a6a5c; text-align: left;
  background: none; border: 0; border-radius: 0; cursor: pointer; }
/* the loaded bar / machine: tap it to load (B4 + K1) */
.gs-loadpic { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 8px; padding: 6px 6px 4px; font: inherit;
  color: inherit; cursor: pointer; background: #efe4d2; border: 2px solid var(--tol-umber, #3a2c23); border-radius: 4px; }
.gs-loadart { width: 100%; height: 108px; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.gs-loadart svg { width: 100%; height: 100%; }
.gs-loadcap { display: flex; justify-content: space-between; width: 100%; font-size: 10px; font-weight: 900; color: var(--tol-wood-dark, #8a5a35); }
.gs-loadcap b { font-size: 13px; color: var(--tol-umber, #3a2c23); }
/* the pin stack, its add-ons pinned to the picture's top-right corner (B2) */
.gs-reelwrap { position: relative; }
.gs-onart { position: absolute; z-index: 4; top: 18px; right: 8px; flex-direction: column; margin: 0; }
.gs-onart .gp-addtog { min-width: 50px; height: 30px; color: #e8dcc4; background: linear-gradient(#5a5652, #2f2d2b 80%); border: 2px solid #17120f;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15); }
.gs-onart .gp-addtog.on { color: #fff; background: linear-gradient(#e0855e, #a5512f 80%); box-shadow: 0 0 0 2px #fffaf0, 0 0 10px #ff9a6b; }