/* trainer.css — the trainer's screen (trainer upgrade step 1; trainerRoom.js).
 *
 * The owner's picks: his own scene on top (a stand-in from the Gym's art until the
 * painted corner, step 6), the sauna's smoked glass tinted gym green over it (sauna.css
 * .sp-panel), STATS | LIBRARY | SETUP. Room colours: lift green, cardio purple, sauna
 * orange, mobility blue — the same ones the calendars use. No dashed borders (B58).
 *
 * Motion rule, same as art.css: every animation sits inside
 * `prefers-reduced-motion: no-preference`; outside it the screen is a still picture.
 */

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

.tr-screen {
  --lift: #4f8f53; --cardio: #8a5bb8; --sauna: #c96f4a; --mobility: #4a7fa5; --missed: #b5523a; --gold: #e8b04a;
  --fg: #f8f3e4; --sub: #e7c99a; --dim: rgba(248, 243, 228, .62); --row: rgba(240, 230, 200, .07);
  --rowbd: 1px solid rgba(240, 230, 200, .18); --track: rgba(240, 230, 200, .13);
  position: relative; min-height: 100vh; background: #22362c;
  margin: calc(-1 * env(safe-area-inset-top)) 0 0; padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}

/* ---- the scene: the Gym's back wall, 216 art px of it; the panel slides over it ---- */
.tr-scene { position: sticky; top: 0; container-type: inline-size; }
.tr-view {
  --art-px: calc(100cqw / 256); position: relative; height: calc(216 * var(--art-px)); overflow: hidden;
  background: #22362c no-repeat 0 calc(-156 * var(--art-px)) / 100% auto; image-rendering: pixelated;
}
.tr-coach {
  position: absolute; z-index: 2; left: calc(9 * var(--art-px)); top: calc(73 * var(--art-px));
  width: calc(72 * var(--art-px)); height: calc(118 * var(--art-px));
  background-repeat: no-repeat; background-size: calc(288 * var(--art-px)) calc(118 * var(--art-px)); image-rendering: pixelated;
}
.tr-coach[data-frame="1"] { background-position: calc(-72 * var(--art-px)) 0; }
.tr-coach[data-frame="2"] { background-position: calc(-144 * var(--art-px)) 0; }
.tr-coach[data-frame="3"] { background-position: calc(-216 * var(--art-px)) 0; }
/* a trophy shelf on the wall — the third one glints */
.tr-shelf { position: absolute; left: calc(14 * var(--art-px)); top: calc(26 * var(--art-px)); width: calc(63 * var(--art-px)); height: calc(4 * var(--art-px));
  background: #8a5a35; box-shadow: 0 calc(1.5 * var(--art-px)) 0 #5a3a22; }
.tr-shelf span { position: absolute; bottom: 100%; width: calc(9 * var(--art-px)); height: calc(12 * var(--art-px)); background: #d9a640; box-shadow: inset calc(-2 * var(--art-px)) 0 0 #a57a22; }
.tr-shelf span::before { content: ''; position: absolute; left: 22%; right: 22%; top: calc(-4 * var(--art-px)); height: calc(4 * var(--art-px)); background: inherit; }
.tr-shelf span:nth-child(1) { left: calc(5 * var(--art-px)); }
.tr-shelf span:nth-child(2) { left: calc(20 * var(--art-px)); height: calc(16 * var(--art-px)); }
.tr-shelf span:nth-child(3) { left: calc(34 * var(--art-px)); background: #b9c2c9; box-shadow: inset calc(-2 * var(--art-px)) 0 0 #8a939a; }
.tr-dust { position: absolute; width: 3px; height: 3px; background: rgba(255, 255, 255, .75); opacity: 0; pointer-events: none; }
/* his bubble: tucked against him, well clear of the right-hand wall */
.tr-bubble {
  position: absolute; z-index: 3; left: 30%; width: 45%; top: calc(68 * 100cqw / 256); padding: 7px 9px;
  color: #3a2c23; background: #fffdf3; border: 2px solid #3a2c23; box-shadow: 3px 3px 0 rgba(10, 18, 12, .35);
  font-size: 12px; font-weight: 800; line-height: 1.3;
}
.tr-bubble::after { content: ''; position: absolute; left: -10px; top: 18px; width: 10px; height: 10px; background: #fffdf3;
  border-top: 2px solid #3a2c23; border-left: 2px solid #3a2c23; transform: skewY(-35deg); }
.tr-bubble b { display: block; color: #3e7a43; }
.tr-bubble small { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(58, 44, 35, .18);
  font-size: 10.5px; color: #7a6a5c; }
.tr-back { z-index: 6; }

/* ---- the glass panel ---- */
.tr-panel {
  position: relative; z-index: 4; margin: -64px 8px 0; color: var(--fg);
  background: linear-gradient(180deg, rgba(22, 38, 30, .60), rgba(14, 26, 20, .80));
  -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15);
  border: 2px solid #0f1a14; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(200, 240, 210, .18), 4px 4px 0 rgba(4, 8, 6, .55);
}
.tr-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-bottom: var(--rowbd); }
.tr-title { flex: 1; font-size: 13px; font-weight: 900; letter-spacing: 2px; }
.tr-date { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--sub); }
.tr-tabs { position: relative; display: flex; height: 32px; margin: 8px 10px 0; background: var(--track); border: var(--rowbd); border-radius: 999px; }
.tr-tab { position: relative; z-index: 1; flex: 1; padding: 0; font: inherit; font-size: 10.5px; font-weight: 900; letter-spacing: 1.5px;
  color: var(--dim); background: none; border: 0; }
.tr-tab.on { color: #10170f; }
.tr-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(100% / 3 - 2px); border-radius: 999px; background: var(--sub); }
.tr-body { padding: 10px 10px 14px; }
.tr-pane[hidden] { display: none; }

.tr-lbl { display: flex; justify-content: space-between; align-items: center; min-height: 22px; margin: 14px 0 6px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sub); }
.tr-pane > .tr-lbl:first-child, .tr-quest + .tr-lbl { margin-top: 0; }
.tr-quest + .tr-lbl { margin-top: 10px; }
.tr-lbl em { font-style: normal; letter-spacing: .5px; text-transform: none; color: var(--dim); }
.tr-row { background: var(--row); border: var(--rowbd); border-radius: 4px; padding: 8px; }
.tr-rows { display: flex; flex-direction: column; gap: 6px; }
.tr-dim { font-size: 10.5px; font-weight: 700; color: var(--dim); }
.tr-btn { flex: 0 0 auto; padding: 7px 11px; font: inherit; font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #3a2c23; background: #c9975b;
  border: 2px solid #3a2c23; border-radius: 4px; box-shadow: inset 0 2px 0 #ddb07a, inset 0 -3px 0 #8a5a35, 2px 2px 0 rgba(0, 0, 0, .35); }
.tr-btn:active, .tr-tool:active { transform: translateY(1px); }

/* 6A — the quest card */
.tr-quest { display: flex; gap: 10px; align-items: center; background: rgba(232, 176, 74, .14); border-color: var(--gold); }
.tr-qmark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; height: 30px; font-size: 20px; font-weight: 900;
  color: #3a2c23; background: #f2c94c; border: 2px solid #3a2c23; box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.tr-qtx { flex: 1; min-width: 0; font-size: 12px; font-weight: 900; }
.tr-qtx b { display: block; } .tr-qtx small { display: block; font-size: 10.5px; font-weight: 700; color: var(--dim); }

/* ✎ across from "This week" */
.tr-pen { width: 26px; height: 22px; padding: 0; font: inherit; font-size: 12px; font-weight: 900; line-height: 1; color: #3a2c23; background: #c9975b;
  border: 2px solid #3a2c23; border-radius: 3px; box-shadow: inset 0 -2px 0 #8a5a35; }
.tr-pen.on { width: auto; padding: 0 7px; font-size: 9.5px; letter-spacing: 1px; color: var(--fg); background: var(--lift); border-color: #1d2f1f;
  box-shadow: inset 0 -2px 0 #3a6b3e; }

/* 5C — the rings */
.tr-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tr-rings > .tr-ring:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tr-ring { position: relative; display: flex; gap: 8px; align-items: center; min-height: 62px; min-width: 0; }
.tr-ring.off { opacity: .4; }
.tr-ringsvg { flex: 0 0 auto; width: 46px; height: 46px; }
.tr-ringsvg circle { fill: none; stroke-width: 7; }
.tr-track { stroke: var(--track); }
.tr-fill.lift { stroke: var(--lift); } .tr-fill.cardio { stroke: var(--cardio); }
.tr-fill.sauna { stroke: var(--sauna); } .tr-fill.mobility { stroke: var(--mobility); }
.tr-ringtx { min-width: 0; }
.tr-ringtx small { display: block; font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--sub); }
.tr-ringtx > b { font-size: 17px; }
.tr-ringtx > b i { font-style: normal; font-size: 12px; color: var(--dim); }
.tr-fixed { display: block; margin-top: 2px; font-size: 9px; font-weight: 800; color: var(--dim); }
.tr-step { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
.tr-step b { min-width: 18px; text-align: center; font-size: 14px; }
.tr-stepb { width: 24px; height: 24px; padding: 0; font: inherit; font-size: 14px; font-weight: 900; line-height: 1; color: #3a2c23; background: #c9975b;
  border: 2px solid #3a2c23; border-radius: 3px; box-shadow: inset 0 -2px 0 #8a5a35; }
.tr-sw { position: absolute; top: 6px; right: 6px; width: 30px; height: 16px; padding: 0; background: rgba(240, 230, 200, .15); border: 2px solid #0f1a14; border-radius: 0; }
.tr-sw::after { content: ''; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; background: #a9a08f; }
.tr-sw.on { background: var(--lift); } .tr-sw.on::after { left: 15px; background: var(--fg); }
/* 9C — the trophy a room is still waiting to earn */
.tr-trophy { flex: 0 0 auto; width: 30px; height: 30px; margin: 0 8px; background:
  linear-gradient(var(--track), var(--track)) 7px 2px / 16px 14px no-repeat, linear-gradient(var(--track), var(--track)) 12px 16px / 6px 6px no-repeat,
  linear-gradient(var(--track), var(--track)) 7px 22px / 16px 5px no-repeat; }
.tr-go { margin-left: auto; padding: 4px 8px; font-size: 10px; }

/* 4D — the year, always inside the panel */
.tr-seg { display: flex; margin: -2px 0 8px; border: var(--rowbd); border-radius: 4px; overflow: hidden; }
.tr-seg button { flex: 1; padding: 6px 0; font: inherit; font-size: 9.5px; font-weight: 900; letter-spacing: 1px; color: var(--dim); background: var(--row); border: 0; }
.tr-seg button + button { border-left: var(--rowbd); }
.tr-seg button.on { color: #10170f; background: var(--sub); }
.tr-hgroup + .tr-hgroup { margin-top: 8px; }
.tr-months { display: grid; margin: 0 0 2px 13px; font-size: 7.5px; font-weight: 900; color: var(--dim); }
.tr-months span { white-space: nowrap; overflow: hidden; }
.tr-hrow { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 4px; }
.tr-hkey { display: grid; grid-template-rows: repeat(7, 1fr); gap: 1.5px; font-size: 7px; font-weight: 900; line-height: 1; color: var(--sub); align-items: center; }
.tr-heat { display: grid; gap: 1.5px; min-width: 0; }
.tr-heat i { aspect-ratio: 1; min-width: 0; background: var(--track); cursor: pointer; }
.tr-heat i.l { background: var(--lift); } .tr-heat i.r { background: var(--mobility); } .tr-heat i.m { background: var(--missed); }
.tr-heat i.f { background: rgba(240, 230, 200, .05); }
.tr-heat i.out { background: transparent; cursor: default; }
.tr-heat i.t { box-shadow: inset 0 0 0 1.5px var(--gold); }
.tr-heat i.sel { box-shadow: inset 0 0 0 1.5px #fff; }
.tr-readout { display: flex; gap: 4px; align-items: baseline; margin-top: 6px; font-size: 10.5px; font-weight: 800; color: var(--dim); }
.tr-readout b { flex: 1; min-width: 0; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-readst { flex: 0 0 auto; margin-left: auto; }

/* highlights — P1 to choose, S1 to show */
.tr-hic { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  background: var(--c); border: 2px solid #0f1a14; }
.tr-hic img { max-width: 80%; max-height: 80%; image-rendering: pixelated; }
.tr-hic i { display: block; }
.tr-hic.bests { --c: var(--gold); } .tr-hic.consistent { --c: var(--mobility); } .tr-hic.gains, .tr-hic.volume { --c: var(--lift); }
.tr-hic.cardio { --c: var(--cardio); } .tr-hic.sauna { --c: var(--sauna); }
.tr-hic.bests i { width: 70%; height: 70%; background: #fff6d8;
  clip-path: polygon(50% 0, 63% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 37% 35%); }
.tr-hic.consistent i { width: 60%; height: 55%; background: linear-gradient(#f8f3e4 0 0) 0 0 / 100% 22% no-repeat,
  linear-gradient(90deg, #f8f3e4 0 26%, transparent 26% 37%, #f8f3e4 37% 63%, transparent 63% 74%, #f8f3e4 74%) 0 100% / 100% 60% no-repeat; }
.tr-hic.gains i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #f8f3e4; }
.tr-hic.volume i { width: 60%; height: 60%; background: linear-gradient(#f8f3e4 0 0) 0 100% / 26% 45% no-repeat,
  linear-gradient(#f8f3e4 0 0) 50% 100% / 26% 75% no-repeat, linear-gradient(#f8f3e4 0 0) 100% 100% / 26% 100% no-repeat; }
.tr-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.tr-pickt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 8px; font: inherit;
  font-size: 10px; font-weight: 900; letter-spacing: .5px; color: var(--dim); background: var(--row); border: var(--rowbd); border-radius: 4px; }
.tr-pickt .tr-hic { width: 24px; height: 24px; filter: grayscale(1) brightness(.7); }
.tr-pickt em { position: absolute; top: -6px; right: -6px; display: none; width: 18px; height: 18px; font-style: normal; font-size: 11px; line-height: 14px;
  text-align: center; color: #10170f; background: var(--sub); border: 2px solid #0f1a14; border-radius: 50%; }
.tr-pickt.on { color: var(--fg); background: rgba(240, 230, 200, .14); }
.tr-pickt.on .tr-hic { filter: none; } .tr-pickt.on em { display: block; }
.tr-pickt.bests.on { border-color: var(--gold); } .tr-pickt.consistent.on { border-color: var(--mobility); }
.tr-pickt.gains.on, .tr-pickt.volume.on { border-color: var(--lift); } .tr-pickt.cardio.on { border-color: var(--cardio); }
.tr-pickt.sauna.on { border-color: var(--sauna); }
.tr-none { padding: 8px; text-align: center; }
.tr-hlc { border-left: 4px solid var(--c, var(--lift)); }
.tr-hlc.bests { --c: var(--gold); } .tr-hlc.consistent { --c: var(--mobility); } .tr-hlc.cardio { --c: var(--cardio); } .tr-hlc.sauna { --c: var(--sauna); }
.tr-hlch { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--sub); }
.tr-hlch .tr-hic { width: 18px; height: 18px; }
.tr-hlr { display: grid; grid-template-columns: minmax(0, 1fr) auto 78px; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 11.5px; font-weight: 800; }
.tr-hlr + .tr-hlr { border-top: 1px solid rgba(240, 230, 200, .1); }
.tr-hlr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-hlr b { font-size: 13px; }
.tr-hlr small { text-align: right; font-size: 9.5px; font-weight: 800; color: var(--dim); }
.tr-hlr small.up { color: #6fbf6a; }

/* LIBRARY (step 2) — the list in the glass, a movement as a wooden sheet */
.tr-search { width: 100%; margin-bottom: 8px; padding: 9px 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--fg);
  background: rgba(240, 230, 200, .08); border: var(--rowbd); border-radius: 4px; -webkit-appearance: none; appearance: none; }
.tr-search::placeholder { color: var(--dim); }
.tr-search:focus { outline: none; border-color: var(--sub); }
.tr-chips { display: flex; gap: 6px; margin-bottom: 8px; }
.tr-chip { display: flex; align-items: center; gap: 6px; padding: 5px 9px; font: inherit; font-size: 10.5px; font-weight: 900; color: var(--fg);
  background: var(--row); border: var(--rowbd); border-radius: 3px; }
.tr-chip small { font-size: 9.5px; color: var(--dim); }
.tr-chip.on { color: #10170f; background: var(--sub); border-color: var(--sub); }
.tr-chip.on small { color: #5a4a35; }
.tr-lib { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; color: var(--fg); text-align: left; }
.tr-libtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-libtx b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-libtx span { font-size: 10px; font-weight: 700; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-lib em { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 900; color: var(--sub); }
.tr-chev { flex: 0 0 auto; font-style: normal; font-size: 18px; font-weight: 900; color: var(--sub); }
.tr-lib:active { background: rgba(240, 230, 200, .14); }
/* the movement's sheet (gymplates.css frame) */
.tr-mvsheet .gp-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tr-mvtop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tr-mvcell { padding: 8px; background: #fffaf0; border: 2px solid #3a2c23; border-radius: 4px; box-shadow: 2px 2px 0 rgba(58, 44, 35, .22); }
.tr-mvcell small { display: block; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #7a6a5c; }
.tr-mvcell b { display: block; margin-top: 3px; font-size: 13px; }
.tr-mvfacts { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin-top: 12px; font-size: 12px; }
.tr-mvfacts .k { font-weight: 800; color: #7a6a5c; }
.tr-mvfacts .v { font-weight: 800; color: #3a2c23; }
.tr-mvcues { margin-top: 10px; padding: 8px; font-size: 11.5px; line-height: 1.45; font-weight: 700; color: #5a4a3a; background: #f0e8da; border-radius: 3px; }
.tr-mvacts { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-mvacts .gp-pq { height: 34px; }
.tr-mvmerge { width: 100%; height: 36px; margin-top: 14px; }
.tr-mvpick { display: flex; flex-direction: column; gap: 5px; max-height: 50vh; overflow-y: auto; }
.tr-mvopt { display: flex; flex-direction: column; gap: 2px; padding: 8px; font: inherit; color: #3a2c23; text-align: left; background: #fffaf0;
  border: 2px solid rgba(58, 44, 35, .4); border-radius: 3px; }
.tr-mvopt b { font-size: 12.5px; } .tr-mvopt span { font-size: 10px; font-weight: 700; color: #7a6a5c; }
.tr-mvask { padding: 10px; background: #fbe9e2; border: 2px solid #c0442e; border-radius: 4px; }
.tr-mvask b { font-size: 13px; }
.tr-mvask p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; font-weight: 700; }
.tr-mvaskrow { display: flex; gap: 8px; margin-top: 10px; }
.tr-mvaskrow .gp-pq { flex: 1; height: 38px; }

/* SETUP → CIRCUIT: the circuit cards (C3), in the gym's wooden sheet */
.tr-cc { margin-bottom: 7px; padding: 9px; background: #fffaf0; border: 2px solid #3a2c23; border-radius: 4px; box-shadow: 2px 2px 0 rgba(58, 44, 35, .22); }
.tr-cc.lift { --c: #4f8f53; } .tr-cc.mobility { --c: #4a7fa5; }
.tr-cch { display: flex; align-items: center; gap: 8px; }
.tr-cch b { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-cch small { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #7a6a5c; }
.tr-ccpen { flex: 0 0 auto; width: 32px; height: 28px; padding: 0; font: inherit; font-size: 14px; font-weight: 900; color: #3a2c23; background: #d9a76b;
  border: 2px solid #3a2c23; border-radius: 4px; box-shadow: inset 0 -3px 0 #b07a4a; }
.tr-ccpen:active { transform: translateY(1px); }
.tr-ccdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 7px; }
.tr-ccdays button { height: 26px; padding: 0; font: inherit; font-size: 10px; font-weight: 900; color: #a99a88; background: #f0e8da;
  border: 1.5px solid rgba(58, 44, 35, .3); border-radius: 2px; }
.tr-ccdays button.on { color: #fff; background: var(--c); border-color: #3a2c23; }
.tr-ccdays button:active { transform: translateY(1px); }
.tr-cctip { margin-top: 10px; text-align: center; }
/* step 5: new circuits, delete an unused added one, and "which workout?" on a two-workout day */
.tr-ccnew { width: 100%; height: 36px; margin: 0 0 4px; }
.tr-ccdel { width: 100%; height: 34px; margin-top: 8px; }
.gw-pick { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 7px; padding: 10px; font: inherit; color: #3a2c23; text-align: left;
  background: #fffaf0; border: 2px solid #3a2c23; border-radius: 4px; box-shadow: 2px 2px 0 rgba(58, 44, 35, .22); }
.gw-pick b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-pick span { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #7a6a5c; }
.gw-pick i { flex: 0 0 auto; font-style: normal; font-size: 18px; font-weight: 900; color: #8a5a35; }
.gw-pick.done span { color: #3e7a43; }
.gw-pick:active { transform: translateY(1px); }
/* step 4: tap a lift circuit's name to rename it; the one-time Short-names offer */
.tr-ccname { flex: 1; min-width: 0; padding: 0; font: inherit; font-size: 13.5px; font-weight: 800; text-align: left; color: #3a2c23;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: 0;
  text-decoration: underline; text-decoration-color: rgba(58, 44, 35, .3); text-underline-offset: 3px; }
.tr-ccrnline { display: flex; align-items: center; gap: 6px; }
.tr-ccrnline input { flex: 1; min-width: 0; padding: 6px 8px; font: inherit; font-size: 14px; font-weight: 800; color: #3a2c23; background: #fff;
  border: 2px solid #c96f4a; border-radius: 3px; }
.tr-ccrnline input:focus { outline: none; }
.tr-ccrnline em { flex: 0 0 auto; font-style: normal; font-size: 10px; font-weight: 800; color: #7a6a5c; }
.tr-ccrnline em.full { color: #c96f4a; }
.tr-ccrnline .gp-pq { flex: 0 0 auto; height: 32px; }
.tr-ccerr { min-height: 0; margin-top: 4px; font-size: 10.5px; font-weight: 800; color: #c0442e; }
.tr-ccerr:empty { display: none; }
.tr-ccoffer { margin-bottom: 10px; padding: 10px; background: #f7e2a8; border: 2px solid #3a2c23; border-radius: 4px; box-shadow: 2px 2px 0 rgba(58, 44, 35, .22); }
.tr-ccoffer b { display: block; font-size: 13px; }
.tr-ccoffer span { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; color: #5a3f2a; }
.tr-ccofferrow { display: flex; gap: 8px; margin-top: 8px; }
.tr-ccofferrow .gp-pq { flex: 1; height: 34px; }

/* LIBRARY + SETUP (7A) */
.tr-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-tool { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 4px 10px; font: inherit; color: #3a2c23; background: #c9975b;
  border: 2px solid #3a2c23; border-radius: 4px; box-shadow: inset 0 2px 0 #ddb07a, inset 0 -3px 0 #8a5a35, 2px 2px 0 rgba(0, 0, 0, .35); }
.tr-tool .g { font-size: 22px; line-height: 1; }
.tr-tool b { font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.tr-tool small { font-size: 9.5px; font-weight: 800; color: #5a3f2a; }
.tr-more { display: block; width: 100%; margin-top: 10px; padding: 6px; font: inherit; font-size: 10.5px; font-weight: 800; color: var(--dim);
  background: none; border: 0; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .tr-thumb { transition: left .25s cubic-bezier(.2, .9, .3, 1.1); }
  .tr-fill { transition: stroke-dasharray .9s cubic-bezier(.2, .8, .3, 1); }
  .tr-bubble small { transition: opacity .35s; }
  .tr-bubble small.out { opacity: 0; }
  @keyframes trDust { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -70px); } }
  .tr-dust { animation: trDust 5s linear infinite; }
  @keyframes trGlint { 0%, 70% { filter: none; } 80% { filter: brightness(1.6); } 90% { filter: brightness(1.2); } }
  .tr-shelf span.new { animation: trGlint 2.4s steps(4) infinite; }
  @keyframes trBob { 50% { transform: translateY(-3px); } }
  .tr-qmark { animation: trBob 1.6s steps(2) infinite; }
  .tr-pickt { transition: transform .1s; }
  .tr-pickt:active { transform: scale(.96); }
}