/* Training (2026-11-07): the gym's equipment, plate chips, "machine taken?" swap, reason chips, record stamp, rest
   alert. Tokens only (public/gv/tokens.css); components from components.css (.chip, .iv, .stamp, .notice, .toggle).
   Loaded by both layouts after the surface CSS. Classes start with .tr-. */

/* ---------- the reason chip (member session, exercise page, coach) ---------- */
.tr-why{max-width:100%}
.tr-why>b{overflow:hidden;text-overflow:ellipsis}
.tr-why.up>.ic,.floor .tr-why.up>svg.ic,.desk .tr-why.up>svg.ic{color:var(--ok)}
.tr-why.down>.ic,.floor .tr-why.down>svg.ic,.desk .tr-why.down>svg.ic{color:var(--warn)}
.tr-why.same{box-shadow:inset 0 0 0 1px var(--line-2)}

/* ---------- plate chips: ≈ total, the bar, one side's plates, ×2 ---------- */
.tr-plates{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:32px;font-variant-numeric:tabular-nums}
.tr-bar{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 9px 0 7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:calc(13.5px*var(--k));color:var(--text-2)}
.tr-bar>.ic,.floor .tr-bar>svg.ic{width:18px;height:18px;color:var(--muted)}
.tr-bar b{font-weight:650;color:var(--text-hi)}
.tr-pls{display:inline-flex;align-items:center;gap:5px}
.tr-pl{display:inline-flex;align-items:center;gap:3px;font-size:calc(14px*var(--k));color:var(--text-hi)}
.tr-pl::before{content:"";width:8px;height:var(--h,24px);border-radius:3px;background:var(--text-hi);box-shadow:inset -2px 0 0 var(--line-2)}
.tr-pl b{font-weight:650}
.tr-each{font-size:calc(13px*var(--k));font-weight:650;color:var(--text-2);padding:2px 7px;border-radius:6px;background:var(--sunken)}
.tr-near{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 12px;border-radius:999px;border:1.5px dashed var(--line-2);background:none;color:var(--text-hi);font:inherit;font-weight:650;font-size:calc(14px*var(--k));cursor:pointer}
span.tr-near{min-height:28px;padding:0 9px}
.tr-near:hover{border-style:solid}
.tr-near:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- member session (views/app/session.ejs) ---------- */
.fx-ex>.tr-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;min-width:0}
.tr-whybox:empty,.tr-platebox:empty{display:none}
.tr-meta:not(:has(.tr-why)):not(:has(.tr-plates)):not(:has(.tr-swapb)){display:none}
.tr-whybox,.tr-platebox{display:inline-flex;min-width:0;max-width:100%}
.tr-swapb{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:100%;padding:0 14px 0 12px;border-radius:999px;border:1.5px solid var(--line-2);background:none;color:var(--text-2);font:inherit;font-size:calc(14px*var(--k));font-weight:600;cursor:pointer}
.tr-swapb b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.tr-swapb>.ic,.floor .tr-swapb>svg.ic{width:18px;height:18px;color:var(--text-2);flex:none}
.tr-swapb:hover{border-color:var(--text)}
.tr-swapb.on{border-style:dashed;color:var(--text-hi)}
.tr-swapb:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tr-from{display:inline-flex;align-items:center;gap:3px;color:var(--muted);white-space:nowrap}
.tr-from>.ic,.floor .tr-from>svg.ic{width:13px;height:13px}
[dir="rtl"] .tr-swapb>.ic,[dir="rtl"] .tr-from>.ic{transform:scaleX(-1)}
/* a set that beat the member's best: the stamp's double ring on its chip */
.fx-ex>.set-row.tr-pr{border-color:var(--ink-stamp);box-shadow:inset 0 0 0 1.5px var(--page),inset 0 0 0 3px var(--ink-stamp)}
.fx-ex>.set-row.tr-pr .fx-chip{color:var(--text-hi);font-weight:650}
/* the record stamp lands over the tap zone and the rest ring */
.tr-stampbox{position:fixed;inset-inline:0;top:calc(110px + env(safe-area-inset-top,0px));z-index:12;display:flex;justify-content:center;pointer-events:none;opacity:0;transition:opacity .35s var(--ease-out)}
.tr-stampbox.on{opacity:1}
.tr-stampbox .stamp{--rot:-8deg;background:var(--page)}
.tr-stampbox .stamp b{font-size:26px}
[dir="rtl"] .tr-stampbox .stamp{--rot:8deg}
/* the end of a rest: two soft pulses of the "now" colour (under 3 a second) */
.tr-flash{position:fixed;inset:0;z-index:40;background:var(--live);opacity:0;pointer-events:none}
.tr-flash.on{animation:tr-flash 1.2s linear}
@keyframes tr-flash{0%,50%,100%{opacity:0}20%,70%{opacity:.42}}
@media (prefers-reduced-motion:reduce){.tr-flash.on{animation:none;opacity:.3}.tr-stampbox{transition:none}}
/* the swap sheet */
.tr-altlist .tr-alt{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.tr-altlist .tr-alt>svg.ic{width:20px;height:20px;color:var(--text-2);flex:none}
#tr-alts h2{display:flex;align-items:center;gap:8px}
#tr-alts h2 svg.ic{width:22px;height:22px}

/* ---------- member exercise page, receipt, Moi ---------- */
.tr-next{margin-top:2px}
.tr-explates{margin-top:6px}
.mb-wr-lines .tr-from{font-size:12px;margin-inline-start:4px}
.tr-kinds{display:inline-flex;gap:4px;flex-wrap:wrap;margin-inline-start:6px;vertical-align:1px}
.tr-kind{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink-2)}
[dir="rtl"] .tr-kind{letter-spacing:0;text-transform:none;font-size:12px}
.tr-ra{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tr-switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--text-2);cursor:pointer;border-radius:10px}
.tr-switch:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tr-switch-i{display:inline-flex;gap:6px}
.tr-switch-i svg.ic{width:20px;height:20px}
.tr-switch[aria-checked="false"] .tr-switch-i{opacity:.45}

/* ---------- the gym's equipment (views/programs/equipment.ejs) ---------- */
.tr-eqstats{margin:4px 0 2px}
.tr-eqnote{margin-bottom:6px;max-width:640px}
.tr-eq{display:grid;gap:22px}
.tr-eqsec{display:grid;gap:10px;min-width:0}
.tr-eqh{align-items:center;justify-content:flex-start;gap:12px;min-height:44px;margin:0}
.tr-eqh>span:first-child{font-size:calc(13px*var(--k));font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
[dir="rtl"] .tr-eqh>span:first-child{letter-spacing:0;text-transform:none;font-size:14px}
.tr-eqchips{flex-wrap:wrap}
.tr-eqchips .chip .tr-tick,.tr-platepick .chip .tr-tick{display:none;width:16px;height:16px}
.tr-eqchips .chip:has(input:checked) .tr-tick{display:block}
.tr-eqchips .chip .n{font-weight:600}
.tr-eqchips .chip:has(input:checked) .n{background:rgba(255,255,255,.2);color:inherit}
.tr-eqsec[disabled] .chip{cursor:default;opacity:.8}
.tr-eqgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px;align-items:start}
.tr-platepick{flex-wrap:wrap}
.tr-platechip{gap:8px;padding:0 14px 0 10px}
.tr-disc{display:block;width:var(--d,24px);height:var(--d,24px);border-radius:50%;border:2.5px solid currentColor;box-shadow:inset 0 0 0 calc(var(--d,24px)/2 - 5px) transparent;position:relative;flex:none}
.tr-disc::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%;background:currentColor}
.tr-other{max-width:220px}
.tr-bars{display:grid;gap:8px}
.tr-barrow{display:grid;grid-template-columns:24px minmax(0,1fr) 128px;align-items:center;gap:10px;min-height:48px}
.tr-barrow>svg.ic{width:22px;height:22px;color:var(--text-2)}
.tr-barrow.is-off{color:var(--muted)}
.tr-barrow.is-off>svg.ic{color:var(--muted)}
.tr-barn{font-weight:600}
.tr-kg{display:flex;align-items:center;gap:6px}
.tr-kg .input{min-width:0;text-align:end}
.tr-kg>span{color:var(--muted);font-weight:600}
.tr-dbrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tr-eqbar{justify-content:flex-end}
.tr-eqbar .primary{margin-inline-start:auto}

/* ---------- the programme editor (views/programs/edit.ejs, public/programs.js) ---------- */
.tr-progbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--sunken)}
.tr-pf{display:grid;gap:4px;min-width:0}
.tr-pf .co-fl,.tr-pe .co-fl{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.tr-pf .co-fl svg.ic,.tr-pe .co-fl svg.ic{width:15px;height:15px}
.tr-pf select.co-in{min-width:150px;background:var(--panel)}
.tr-pfn .co-in,.tr-pfn .co-unit{width:92px;background:var(--panel)}
.tr-pfn .co-unit .co-in{width:100%;background:transparent}
.tr-progbar>details.info{align-self:center}
.tr-progbar[data-rule="none"] .tr-pfn{display:none}
.co-ex>.tr-pe{grid-column:3/5;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;min-width:0}
.tr-f-alt{min-width:0;max-width:300px;flex:1 1 220px}
.tr-altrow{display:flex;align-items:center;gap:4px;min-width:0}
.tr-altpick{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;flex:1;padding:0 10px 0 4px;border-radius:8px;border:1.5px dashed var(--line-2);background:none;color:var(--text);font:inherit;font-size:calc(14px*var(--k));font-weight:600;cursor:pointer;text-align:start}
.tr-altpick:hover{border-style:solid}
.tr-altn{display:flex;align-items:center;gap:8px;min-width:0}
.tr-altn>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-altn.none{color:var(--text-2);padding-inline-start:6px}
.tr-altn .co-thumb{width:36px;height:36px}
.tr-altn .co-thumb .pic{width:36px;height:36px}
.tr-f-rule{width:170px}
.tr-f-step{width:104px}
.tr-rulechip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:calc(13.5px*var(--k));font-weight:600;color:var(--text-2);align-self:center}
.tr-rulechip svg.ic{width:16px;height:16px;color:var(--ok)}
.tr-rulechip.none svg.ic{color:var(--muted)}
.tr-marks{display:inline-flex;gap:4px;vertical-align:middle}
.tr-marks .iv.icon>svg.ic{width:16px;height:16px;color:var(--muted)}
.co-exname .tr-marks{display:flex;margin-top:2px}
@container (max-width:680px){
  .co-ex>.tr-pe{grid-column:1/-1}
  .co-ex:not(.open)>.tr-pe{display:none}
  .tr-f-rule,.tr-f-alt{flex:1 1 100%;max-width:none;width:auto}
}
/* the picker: what the gym cannot do is muted with a lock, behind the "In the gym" chip */
.co-pick.tr-na{opacity:.62}
.co-exli.tr-na .co-expic{opacity:.55}
.co-exli.tr-na .tag.lock svg.ic{width:13px;height:13px}
.tr-namark svg.ic{width:13px;height:13px;vertical-align:-2px;margin-inline-end:4px}
.tr-availchip svg.ic{width:16px;height:16px}

/* ---------- coach: next targets of a member (views/programs/member.ejs) ---------- */
.tr-coachnext{display:grid;gap:8px}
.tr-nextrows .r{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.tr-nn{display:flex;align-items:center;gap:10px;min-width:0}
.tr-nn b{font-weight:600;overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){
  .tr-eqgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .tr-barrow{grid-template-columns:24px minmax(0,1fr) 112px}
  .tr-dbrow{gap:8px}
  .tr-progbar{padding:10px}
  .tr-pf select.co-in{min-width:0;width:100%}
  .tr-pf:first-child{flex:1 1 60%}
  .tr-pfn .co-in,.tr-pfn .co-unit{width:84px}
}