*{box-sizing:border-box;margin:0;padding:0} /* [2026-05-29 perceived-speed bundle · Ship A] Universal button pressed-state. Browser applies :active INSTANTLY on tap/click, BEFORE the JS click handler fires. This guarantees visual feedback within one paint frame regardless of how long the handler takes to run. !important forces the rule past inline transform styles (the tile buttons use inline transform:translateY for hover). Gentle scale (0.97) + fast transition (0.06s) reads as tactile, not jumpy. */ button:active { transform: scale(0.97) !important; transition: transform 0.06s ease-out !important; } /* Tap-targets that aren't '; }).join(''); var customVal = (curVal === '__custom__') ? curCustom : ''; // Manage button: only for coach + P1 athlete var manageBtn = _tfCanManage() ? '' : ''; var html = '' + '

' + '

Tier Purpose

' + '✕' + '

' + '

Suggested

' + (focusLabels.length === 0 ? '

No suggested focuses — type your own below or add some via Manage.

' : '

'+chipsHtml+'

') + '

Or type your own

' + '' + '

' + '' + '' + '' + '

' + manageBtn; var bg = document.getElementById('tf-sheet-bg'); var sheet = document.getElementById('tf-sheet'); if(!bg || !sheet){ console.warn('Tier focus sheet DOM missing'); return; } sheet.innerHTML = html; bg.style.display = 'block'; // Animate in /* === BLOCK BREAK === */ @keyframes peSpin{to{transform:rotate(360deg)}} /* === BLOCK BREAK === */ /* ─── Testing tab: card list + bottom sheet (Phase 2.6 mobile polish) ──── */ .tt-card-row{ display:flex; align-items:center; gap:12px; padding:14px 14px 14px 16px; margin-bottom:8px; background:linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%); border:1px solid rgba(255,255,255,0.06); border-radius:13px; cursor:pointer; transition:border-color 0.15s, transform 0.12s ease, background 0.15s; -webkit-tap-highlight-color:transparent; position:relative; overflow:hidden; min-height:56px; box-sizing:border-box; } .tt-card-row[data-tested="1"]{ background:linear-gradient(180deg, rgba(0,214,143,0.06) 0%, rgba(0,214,143,0.015) 100%); border-color:rgba(0,214,143,0.22); } .tt-card-row:hover{ border-color:rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); } .tt-card-row[data-tested="1"]:hover{ border-color:rgba(0,214,143,0.42); } .tt-card-row:active{ transform:scale(0.985); } .tt-card-accent{ position:absolute; left:0; top:10%; bottom:10%; width:3px; border-radius:0 3px 3px 0; box-shadow:0 0 8px currentColor; } .tt-card-body{ flex:1; min-width:0; overflow:hidden; } .tt-card-name{ font-size:14px; font-weight:700; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.2px; line-height:1.25; } .tt-card-name.has{ font-weight:800; color:rgba(255,255,255,0.95); -webkit-text-fill-color:rgba(255,255,255,0.95); } .tt-card-date{ font-size:10px; font-weight:700; color:rgba(0,214,143,0.7); -webkit-text-fill-color:rgba(0,214,143,0.7); margin-top:3px; letter-spacing:.3px; } .tt-card-date.untested{ color:rgba(255,255,255,0.22); -webkit-text-fill-color:rgba(255,255,255,0.22); font-weight:600; } .tt-card-meta{ display:flex; align-items:baseline; gap:4px; flex-shrink:0; } .tt-card-val{ font-size:20px; font-weight:900; color:#00F5A0; -webkit-text-fill-color:#00F5A0; letter-spacing:-.4px; line-height:1; text-shadow:0 0 12px rgba(0,214,143,0.4); } .tt-card-unit{ font-size:10px; font-weight:800; color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:.5px; } .tt-card-check{ font-size:11px; margin-left:4px; color:var(--green); -webkit-text-fill-color:var(--green); } .tt-card-empty{ font-size:13px; font-weight:600; color:rgba(255,255,255,0.18); -webkit-text-fill-color:rgba(255,255,255,0.18); padding:0 6px; } .tt-card-chev{ font-size:16px; margin-left:6px; font-weight:500; color:rgba(255,255,255,0.22); -webkit-text-fill-color:rgba(255,255,255,0.22); line-height:1; } /* Today's Session pill row */ .tt-today-wrap{ margin-bottom:18px; padding:14px 14px 16px; background:linear-gradient(180deg, rgba(74,124,255,0.08) 0%, rgba(74,124,255,0.02) 100%); border:1px solid rgba(74,124,255,0.22); border-radius:14px; position:relative; overflow:hidden; } .tt-today-wrap::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, rgba(74,124,255,0.8), transparent); } .tt-today-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } .tt-today-lbl{ font-size:10px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; color:#4A7CFF; -webkit-text-fill-color:#4A7CFF; } .tt-today-lbl::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#4A7CFF; margin-right:8px; vertical-align:middle; box-shadow:0 0 10px rgba(74,124,255,0.8); animation:tt-pulse 2s ease-in-out infinite; } @keyframes tt-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} } .tt-today-sub{ font-size:10px; font-weight:700; color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); } .tt-today-scroll{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .tt-today-scroll::-webkit-scrollbar{ display:none; } .tt-today-pill{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 13px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.07); border-radius:11px; cursor:pointer; transition:all 0.15s; min-height:48px; -webkit-tap-highlight-color:transparent; } .tt-today-pill:hover,.tt-today-pill:active{ border-color:rgba(255,255,255,0.2); background:rgba(0,0,0,0.4); transform:translateY(-1px); } .tt-today-pill[data-tested="1"]{ border-color:rgba(0,214,143,0.35); background:rgba(0,214,143,0.06); } .tt-tier-badge{ font-size:9px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; padding:3px 7px; border-radius:5px; flex-shrink:0; line-height:1.1; } .tt-today-ex-name{ font-size:12px; font-weight:700; color:rgba(255,255,255,0.88); -webkit-text-fill-color:rgba(255,255,255,0.88); white-space:nowrap; letter-spacing:.2px; } .tt-today-pill-chk{ font-size:11px; font-weight:900; color:var(--green); -webkit-text-fill-color:var(--green); margin-left:2px; } /* PR Celebration (trophy + confetti) */ @keyframes ttPRTrophyEnter { 0% { transform:scale(0) rotate(0deg); } 55% { transform:scale(1.25) rotate(600deg); } 75% { transform:scale(0.92) rotate(690deg); } 90% { transform:scale(1.06) rotate(720deg); } 100% { transform:scale(1) rotate(720deg); } } @keyframes ttPRTrophyGlow { 0%,100% { filter:drop-shadow(0 0 30px rgba(255,200,40,0.85)) drop-shadow(0 0 60px rgba(255,200,40,0.5)); } 50% { filter:drop-shadow(0 0 50px rgba(255,215,60,1)) drop-shadow(0 0 100px rgba(255,200,40,0.75)); } } /* Shatter: bright flash, then trophy vanishes instantly (shards replace it) */ @keyframes ttPRTrophyShatter { 0% { transform:scale(1) rotate(720deg); opacity:1; filter:drop-shadow(0 0 60px rgba(255,240,160,1)) drop-shadow(0 0 120px rgba(255,215,80,1)); } 8% { transform:scale(1.3) rotate(720deg); opacity:1; filter:drop-shadow(0 0 120px rgba(255,255,220,1)) drop-shadow(0 0 200px rgba(255,230,120,1)) brightness(1.8); } 12% { transform:scale(1.35) rotate(720deg); opacity:0; } 100% { transform:scale(1.35) rotate(720deg); opacity:0; } } #tt-pr-celebration.tt-pr-show { opacity:1 !important; } #tt-pr-celebration.tt-pr-show #tt-pr-trophy { animation: ttPRTrophyEnter 0.85s cubic-bezier(0.34,1.56,0.64,1) forwards, ttPRTrophyGlow 1.4s ease-in-out 0.85s infinite; } #tt-pr-celebration.tt-pr-shatter #tt-pr-trophy { animation: ttPRTrophyShatter 0.6s cubic-bezier(0.4,0,0.6,1) forwards !important; } #tt-pr-celebration.tt-pr-shatter #tt-pr-label, #tt-pr-celebration.tt-pr-shatter #tt-pr-ex, #tt-pr-celebration.tt-pr-shatter #tt-pr-delta { opacity:0 !important; transform:translateY(-8px) !important; transition:opacity 0.28s ease, transform 0.28s ease !important; } #tt-pr-celebration.tt-pr-show #tt-pr-label, #tt-pr-celebration.tt-pr-show #tt-pr-ex, #tt-pr-celebration.tt-pr-show #tt-pr-delta { opacity:1; transform:translateY(0); } #tt-pr-celebration.tt-pr-show #tt-pr-label { transition-delay: 0.55s; } #tt-pr-celebration.tt-pr-show #tt-pr-ex { transition-delay: 0.65s; } #tt-pr-celebration.tt-pr-show #tt-pr-delta { transition-delay: 0.75s; } @keyframes ttPRConfettiFall { 0% { transform:translate(0,0) rotate(0deg); opacity:1; } 70% { opacity:1; } 100% { transform:translate(var(--tx), var(--ty)) rotate(var(--tr)); opacity:0; } } .tt-pr-particle { position:absolute; left:50%; top:45%; width:10px; height:10px; pointer-events:none; animation: ttPRConfettiFall 2.2s cubic-bezier(0.25,0.8,0.55,1) forwards; will-change:transform,opacity; } /* Shatter shards: chunky trophy pieces flying outward from trophy center */ @keyframes ttPRShardFly { 0% { transform:translate(0,0) rotate(0deg) scale(0.5); opacity:0; } 12% { transform:translate(calc(var(--tx) * 0.15), calc(var(--ty) * 0.15)) rotate(calc(var(--tr) * 0.15)) scale(1.1); opacity:1; } 100% { transform:translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(0.5); opacity:0; } } .tt-pr-shard { position:absolute; left:50%; top:42%; pointer-events:none; animation: ttPRShardFly 0.85s cubic-bezier(0.18,0.85,0.35,1) forwards; will-change:transform,opacity; line-height:1; text-shadow:0 0 14px rgba(255,230,120,1), 0 0 28px rgba(255,200,60,0.8); } /* Projected delta chip — live "vs last test" feedback while typing */ .tt-proj-row{ margin-bottom:12px; padding:11px 14px; background:linear-gradient(135deg, rgba(74,124,255,0.14), rgba(74,124,255,0.06)); border:1px solid rgba(74,124,255,0.32); border-radius:12px; display:flex; align-items:center; justify-content:center; gap:10px; transition:box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .tt-proj-row .tt-proj-arrow{ font-size:22px; font-weight:900; line-height:1; color:#7eb8f7; -webkit-text-fill-color:#7eb8f7; text-shadow:0 0 14px rgba(126,184,247,0.55); } .tt-proj-row .tt-proj-mag{ font-size:18px; font-weight:900; letter-spacing:-0.3px; color:#e8f0ff; -webkit-text-fill-color:#e8f0ff; } .tt-proj-row .tt-proj-tail{ font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); } /* Regression variant: red tint, no celebration */ .tt-proj-row.tt-proj-down{ background:linear-gradient(135deg, rgba(255,82,82,0.13), rgba(255,82,82,0.05)); border-color:rgba(255,82,82,0.32); } .tt-proj-row.tt-proj-down .tt-proj-arrow{ color:#ff8a8a; -webkit-text-fill-color:#ff8a8a; text-shadow:0 0 14px rgba(255,120,120,0.55); } /* Improvement variant: green */ .tt-proj-row.tt-proj-up{ background:linear-gradient(135deg, rgba(0,214,143,0.14), rgba(0,214,143,0.06)); border-color:rgba(0,214,143,0.34); } .tt-proj-row.tt-proj-up .tt-proj-arrow{ color:#4df0b8; -webkit-text-fill-color:#4df0b8; text-shadow:0 0 14px rgba(77,240,184,0.55); } /* Pulse: applied briefly to any preview row when its value changes */ @keyframes ttPreviewPulse{ 0% { box-shadow:0 0 0 0 rgba(255,255,255,0.00); } 30% { box-shadow:0 0 0 6px rgba(255,255,255,0.10), 0 0 24px rgba(74,124,255,0.35); } 100% { box-shadow:0 0 0 0 rgba(255,255,255,0.00); } } .tt-preview-pulse{ animation: ttPreviewPulse 0.45s ease-out; } /* Bottom sheet (record test) */ #tt-edit-sheet{ background:linear-gradient(180deg,#22304a 0%, #181818 55%, #141a2b 100%); border-radius:24px 24px 0 0; padding:10px 20px 30px; box-shadow:0 -16px 48px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06); position:fixed; bottom:0; left:0; right:0; z-index:99995; transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,0.72,0.3,1); max-width:480px; margin:0 auto; max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } #tt-edit-sheet::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,0.18); pointer-events:none; } #tt-edit-sheet::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent 0%, rgba(0,214,143,0.9) 50%, transparent 100%); pointer-events:none; } .tt-sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; margin:18px 0 16px; gap:14px; } .tt-sheet-title-wrap{ flex:1; min-width:0; } .tt-sheet-eyebrow{ font-size:9px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; color:rgba(0,214,143,0.8); -webkit-text-fill-color:rgba(0,214,143,0.8); margin-bottom:5px; } .tt-sheet-title{ font-size:18px; font-weight:900; color:#fff; -webkit-text-fill-color:#fff; letter-spacing:.2px; line-height:1.2; } .tt-sheet-tier{ display:inline-block; font-size:9px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; padding:3px 8px; border-radius:5px; margin-top:6px; } .tt-sheet-close{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; color:rgba(255,255,255,0.55); cursor:pointer; background:rgba(255,255,255,0.05); transition:all 0.15s; } .tt-sheet-close:hover,.tt-sheet-close:active{ background:rgba(255,255,255,0.12); color:#fff; -webkit-text-fill-color:#fff; } .tt-sheet-lbl{ font-size:8.5px; font-weight:900; letter-spacing:1.1px; text-transform:uppercase; color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); margin-bottom:5px; } .tt-sheet-input, .tt-sheet-select{ width:100%; box-sizing:border-box; background:rgba(0,0,0,0.35); border:1.5px solid rgba(255,255,255,0.08); border-radius:10px; padding:11px 12px; color:#fff; -webkit-text-fill-color:#fff; font-size:14px; font-weight:700; outline:none; transition:border-color 0.15s, box-shadow 0.15s; } .tt-sheet-input::placeholder{ color:rgba(255,255,255,0.25); } .tt-sheet-input:focus, .tt-sheet-select:focus{ border-color:rgba(0,214,143,0.5); box-shadow:0 0 0 3px rgba(0,214,143,0.1); } .tt-sheet-input.big{ font-size:22px; font-weight:900; padding:14px 14px; letter-spacing:-.5px; } .tt-sheet-input.mid{ font-size:17px; font-weight:900; padding:12px 12px; text-align:center; letter-spacing:-.3px; } .tt-sheet-save{ flex:1; padding:14px; border-radius:12px; border:none; background:linear-gradient(135deg, var(--green) 0%, #00b87a 100%); color:#000; -webkit-text-fill-color:#000; font-size:12px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; cursor:pointer; box-shadow:0 4px 18px rgba(0,214,143,0.4), inset 0 1px 0 rgba(255,255,255,0.3); transition:transform 0.12s, box-shadow 0.15s; -webkit-tap-highlight-color:transparent; } .tt-sheet-save:hover,.tt-sheet-save:active{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(0,214,143,0.55), inset 0 1px 0 rgba(255,255,255,0.4); } .tt-sheet-cancel{ flex:0 0 auto; padding:14px 20px; border-radius:12px; border:1.5px solid rgba(255,255,255,0.1); background:transparent; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; } .tt-sheet-cancel:hover,.tt-sheet-cancel:active{ border-color:rgba(255,255,255,0.2); color:#fff; -webkit-text-fill-color:#fff; } /* Delete trash icon — subtle red ghost button beside Save when baseline exists */ .tt-sheet-delete{ flex:0 0 auto; padding:14px 16px; border-radius:12px; border:1.5px solid rgba(255,59,59,0.25); background:rgba(255,59,59,0.04); color:rgba(255,107,107,0.75); -webkit-text-fill-color:rgba(255,107,107,0.75); font-size:16px; cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; font-family:inherit; } .tt-sheet-delete:hover,.tt-sheet-delete:active{ border-color:rgba(255,59,59,0.55); background:rgba(255,59,59,0.12); color:#ff6b6b; -webkit-text-fill-color:#ff6b6b; } /* Armed state — large red confirm button (fills space of Save) */ .tt-sheet-delete-confirm{ flex:1; padding:14px; border-radius:12px; border:none; background:linear-gradient(135deg, #FF3B3B 0%, #d62828 100%); color:#fff; -webkit-text-fill-color:#fff; font-size:12px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; cursor:pointer; box-shadow:0 4px 18px rgba(255,59,59,0.42), inset 0 1px 0 rgba(255,255,255,0.3); transition:transform 0.12s, box-shadow 0.15s; -webkit-tap-highlight-color:transparent; font-family:inherit; animation:tt-arm-pulse 1.4s ease-in-out infinite; } .tt-sheet-delete-confirm:hover,.tt-sheet-delete-confirm:active{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(255,59,59,0.55), inset 0 1px 0 rgba(255,255,255,0.4); } .tt-sheet-delete-confirm:disabled{ opacity:0.6; cursor:wait; animation:none; } @keyframes tt-arm-pulse{ 0%,100%{ box-shadow:0 4px 18px rgba(255,59,59,0.42), inset 0 1px 0 rgba(255,255,255,0.3); } 50% { box-shadow:0 4px 24px rgba(255,59,59,0.7), inset 0 1px 0 rgba(255,255,255,0.4); } } /* Inert watch-sync chip — future Apple Watch / Garmin integration */ /* Test Type trigger + picker (JS-driven, avoids iOS Safari transform+select bug) */ .tt-tt-trigger{ width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; background:rgba(0,0,0,0.35); border:1.5px solid rgba(255,255,255,0.08); border-radius:10px; padding:11px 12px; color:#fff; -webkit-text-fill-color:#fff; font-size:14px; font-weight:700; outline:none; cursor:pointer; text-align:left; font-family:inherit; -webkit-tap-highlight-color:transparent; transition:border-color 0.15s, background 0.15s; } .tt-tt-trigger:hover,.tt-tt-trigger:active{ border-color:rgba(0,214,143,0.5); background:rgba(0,0,0,0.45); } .tt-tt-trigger-val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tt-tt-trigger-chev{ font-size:12px; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); margin-left:8px; flex-shrink:0; } #tt-tt-picker{ background:linear-gradient(180deg,#22304a 0%, #181818 55%, #141a2b 100%); border-radius:24px 24px 0 0; padding:10px 18px 28px; box-shadow:0 -16px 48px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06); max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } #tt-tt-picker::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,0.18); } #tt-tt-picker::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, rgba(0,214,143,0.9), transparent); } .tt-tt-picker-head{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 14px; } .tt-tt-picker-title{ font-size:11px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; color:rgba(0,214,143,0.9); -webkit-text-fill-color:rgba(0,214,143,0.9); } .tt-tt-picker-close{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; color:rgba(255,255,255,0.55); -webkit-text-fill-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.05); cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; } .tt-tt-picker-close:hover,.tt-tt-picker-close:active{ background:rgba(255,255,255,0.12); color:#fff; -webkit-text-fill-color:#fff; } .tt-tt-cat{ font-size:9.5px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,0.42); -webkit-text-fill-color:rgba(255,255,255,0.42); margin:14px 2px 8px; padding-left:2px; } .tt-tt-cat:first-child{ margin-top:4px; } .tt-tt-grid{ display:flex; flex-wrap:wrap; gap:7px; } .tt-tt-chip{ flex:0 0 auto; padding:11px 14px; background:rgba(255,255,255,0.035); border:1.5px solid rgba(255,255,255,0.09); border-radius:10px; color:rgba(255,255,255,0.85); -webkit-text-fill-color:rgba(255,255,255,0.85); font-size:13px; font-weight:700; letter-spacing:.1px; cursor:pointer; font-family:inherit; transition:all 0.15s; -webkit-tap-highlight-color:transparent; min-height:44px; line-height:1.2; } .tt-tt-chip:hover,.tt-tt-chip:active{ border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.07); transform:translateY(-1px); } .tt-tt-chip.on{ background:linear-gradient(135deg, rgba(0,214,143,0.3) 0%, rgba(0,214,143,0.15) 100%); border-color:var(--green); color:#fff; -webkit-text-fill-color:#fff; box-shadow:0 0 18px rgba(0,214,143,0.35), inset 0 1px 0 rgba(0,214,143,0.4); font-weight:900; } .tt-watch-chip{ display:inline-flex; align-items:center; gap:6px; font-size:9px; font-weight:700; letter-spacing:.3px; padding:6px 10px; border-radius:8px; background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.14); color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); cursor:not-allowed; margin-top:6px; user-select:none; -webkit-tap-highlight-color:transparent; } .tt-watch-chip:hover{ border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); } .tt-watch-chip .tt-watch-ic{ font-size:11px; } .tt-watch-chip .tt-watch-soon{ font-size:7.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; padding:2px 5px; border-radius:3px; background:rgba(74,124,255,0.15); color:rgba(74,124,255,0.8); -webkit-text-fill-color:rgba(74,124,255,0.8); } /* ═════ [v185 Slice 1] TRAIN: Pills + Block Strip ═════ */ .tp { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:9px; padding:9px 10px; font-size:11px; font-weight:800; letter-spacing:.4px; color:rgba(255,255,255,0.55); -webkit-text-fill-color:rgba(255,255,255,0.55); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s, border-color .15s, transform .1s; min-height:36px; outline:none; } .tp.on { background:linear-gradient(135deg,rgba(74,124,255,0.22),rgba(155,93,229,0.18)); border-color:rgba(74,124,255,0.5); color:#fff; -webkit-text-fill-color:#fff; box-shadow:0 2px 10px rgba(74,124,255,0.18); } .tp:active { transform:scale(0.98); } #block-strip::-webkit-scrollbar { display:none; } #block-strip { scrollbar-width:none; } /* ═════ [v185 Slice 2.3] Athletic block cards — Whoop / Nike-adjacent ═════ Phase title is the star; single orange accent bar signals "training energy" without pigeon-holing any coach type. + New tile keeps its dashed-green signature (unambiguous create-affordance). */ .block-card { flex:0 0 auto; /* [2026-05-20] Slight width bump so full block label fits in 2 lines without ellipsis truncation. Pat directive: "Dom — 4-Week ..." is tacky; render the whole label cleanly within the card boundary. */ min-width:160px; max-width:210px; background:#161616; border:1px solid rgba(255,255,255,0.07); border-radius:2px; padding:13px 15px 13px 17px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .18s, background .18s, transform .12s cubic-bezier(0.2,0.8,0.2,1), box-shadow .22s; text-align:left; color:#fff; -webkit-text-fill-color:#fff; position:relative; overflow:hidden; } /* Left accent bar — persistent, brightens when active */ .block-card::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 2px 2px 0; background:#FF6B35; opacity:0.5; transition:opacity .18s, box-shadow .22s, top .22s, bottom .22s; } .block-card:active { transform:scale(0.97); } .block-card.on { background:#1d1d1d; border-color:rgba(255,107,53,0.5); box-shadow:none; } .block-card.on::before { opacity:1; top:8px; bottom:8px; box-shadow:0 0 10px rgba(255,107,53,0.7); } .block-card .bc-name { /* [2026-05-20] Smaller font + 2-line wrap so "Dom — 4-Week Golf Block" (and similar long labels) renders whole within the card. Pat directive: "the writing don't have to be that big". Wraps cleanly via line-clamp; any label that STILL overflows 2 lines truncates with ellipsis. */ font-family:'Oswald','Helvetica Neue',sans-serif; font-size:14px; font-weight:600; text-transform:uppercase; color:rgba(255,255,255,0.82); -webkit-text-fill-color:rgba(255,255,255,0.82); margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2; letter-spacing:.4px; line-height:1.2; word-break:break-word; } .block-card.on .bc-name { color:#fff; -webkit-text-fill-color:#fff; } .block-card .bc-meta { font-size:10px; font-weight:800; color:rgba(255,255,255,0.38); -webkit-text-fill-color:rgba(255,255,255,0.38); letter-spacing:.9px; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .block-card.on .bc-meta { color:rgba(255,255,255,0.62); -webkit-text-fill-color:rgba(255,255,255,0.62); } /* [Ship A — 2026-05-23] Block kebab menu — Archive / Delete / Set Active. The ⋯ button lives top-right of each block card. Click bubbling stops at the kebab so it doesn't fire setActiveBlock(). The popover is portaled to body via inline positioning (avoids overflow:hidden clipping at the block-strip parent). */ .block-card .bc-kebab { position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:6px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.55); -webkit-text-fill-color:rgba(255,255,255,0.55); font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .12s, color .12s, border-color .12s; z-index:2; } .block-card .bc-kebab:hover { background:rgba(255,255,255,0.10); color:#fff; -webkit-text-fill-color:#fff; border-color:rgba(255,255,255,0.18); } .block-card.on .bc-kebab { color:rgba(255,255,255,0.78); -webkit-text-fill-color:rgba(255,255,255,0.78); } .block-card.archived { opacity:0.5; } .block-card.archived .bc-name::after { content:' · archived'; font-size:9px; font-weight:700; letter-spacing:.5px; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); text-transform:uppercase; } /* [Ship B — 2026-05-23] Block card modification marker. When the block has an active modificationOverlay for today's date, the card gets a purple gradient border + glow + ⚡ DAY badge top-right (replacing the kebab position when both are present). Auto-clears at midnight when overlay.applies_to_date != today. */ .block-card.has-modification { border-color:rgba(155,93,229,0.65); box-shadow: 0 0 0 1px rgba(155,93,229,0.45), 0 6px 22px rgba(155,93,229,0.30), inset 0 1px 0 rgba(255,255,255,0.05); } .block-card.has-modification::before { background:#9B5DE5; opacity:0.95; box-shadow:0 0 10px rgba(155,93,229,0.65); } .block-card.has-modification.on { background:linear-gradient(135deg,rgba(155,93,229,0.18),rgba(75,123,255,0.06)); border-color:rgba(155,93,229,0.80); box-shadow: 0 0 0 1px rgba(155,93,229,0.55), 0 6px 24px rgba(155,93,229,0.36), inset 0 1px 0 rgba(255,255,255,0.06); } .block-card .bc-mod-badge { position:absolute; top:8px; right:38px; /* sits to the left of the kebab (kebab is at right:8px, width:24px, gap:6px = 38px) */ display:inline-flex; align-items:center; gap:3px; background:linear-gradient(135deg,rgba(155,93,229,0.28),rgba(75,123,255,0.12)); border:1px solid rgba(155,93,229,0.65); color:#fff; -webkit-text-fill-color:#fff; font-size:9px; font-weight:900; letter-spacing:.05em; padding:3px 6px; border-radius:5px; line-height:1; z-index:2; pointer-events:none; } .block-card .bc-mod-badge .bc-mod-icon { font-size:10px; line-height:1; } /* Popover anchored to body, positioned dynamically by _bdShowBlockMenu */ #bc-menu-popover { position:fixed; z-index:99998; background:linear-gradient(180deg,#1a1a24 0%,#0e0e16 100%); border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:6px; box-shadow:0 14px 38px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4); display:none; flex-direction:column; gap:2px; min-width:170px; backdrop-filter:blur(12px); } #bc-menu-popover .bc-mi { display:flex; align-items:center; gap:9px; background:transparent; border:none; color:rgba(255,255,255,0.80); -webkit-text-fill-color:rgba(255,255,255,0.80); font-size:12px; font-weight:700; padding:9px 11px; border-radius:7px; cursor:pointer; text-align:left; width:100%; transition:background .12s, color .12s; } #bc-menu-popover .bc-mi:hover { background:rgba(255,255,255,0.08); color:#fff; -webkit-text-fill-color:#fff; } #bc-menu-popover .bc-mi.danger { color:#FF6B35; -webkit-text-fill-color:#FF6B35; } #bc-menu-popover .bc-mi.danger:hover { background:rgba(255,107,53,0.12); } #bc-menu-popover .bc-mi-icon { font-size:14px; line-height:1; width:18px; text-align:center; flex-shrink:0; } #bc-show-archived-toggle { display:none; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:6px; cursor:pointer; margin-left:8px; transition:color .12s, border-color .12s; } #bc-show-archived-toggle:hover { color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.20); } /* + New tile keeps its distinct create-affordance identity */ .block-card.new { display:flex; align-items:center; justify-content:center; gap:6px; min-width:108px; max-width:124px; padding:10px; background:rgba(0,214,143,0.06); border:1.5px dashed rgba(0,214,143,0.4); color:var(--green); -webkit-text-fill-color:var(--green); font-size:11px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; border-radius:14px; } .block-card.new::before { display:none; } .block-card.new:active { background:rgba(0,214,143,0.12); border-color:rgba(0,214,143,0.7); } /* ═════ [v185 Slice 2] New Block bottom sheet ═════ */ #nb-sheet .nb-card { background:#141826; border-top-left-radius:20px; border-top-right-radius:20px; padding:14px 20px 28px 20px; border-top:1px solid rgba(255,255,255,0.08); box-shadow:0 -8px 32px rgba(0,0,0,0.6); max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } .nb-grip { width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,0.2); margin:0 auto 14px auto; } .nb-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; } .nb-eyebrow { font-size:9px; font-weight:900; letter-spacing:.9px; text-transform:uppercase; color:rgba(74,124,255,0.85); -webkit-text-fill-color:rgba(74,124,255,0.85); margin-bottom:4px; } .nb-title { font-size:20px; font-weight:900; color:#fff; -webkit-text-fill-color:#fff; letter-spacing:-0.3px; } .nb-close { width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:18px; color:rgba(255,255,255,0.55); -webkit-text-fill-color:rgba(255,255,255,0.55); cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:8px; } .nb-close:active { background:rgba(255,255,255,0.06); } .nb-lbl { font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); margin-bottom:7px; } .nb-input { width:100%; box-sizing:border-box; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:12px 14px; font-size:14px; font-weight:700; color:#fff; -webkit-text-fill-color:#fff; color-scheme:dark; outline:none; transition:border-color .15s; font-family:inherit; } .nb-input:focus { border-color:rgba(74,124,255,0.5); } /* [v185 Slice 2.2.1] Faded placeholder — clearly a hint, not a value */ .nb-input::placeholder { color:rgba(255,255,255,0.22); -webkit-text-fill-color:rgba(255,255,255,0.22); font-weight:500; opacity:1; /* Firefox default is 0.54 — normalize across browsers */ } .nb-input::-webkit-input-placeholder { color:rgba(255,255,255,0.22); -webkit-text-fill-color:rgba(255,255,255,0.22); font-weight:500; } .nb-input::-moz-placeholder { color:rgba(255,255,255,0.22); font-weight:500; opacity:1; } .nb-len-row { display:flex; gap:6px; flex-wrap:wrap; } .nb-len-chip { flex:1 1 calc((100% - 36px) / 7); min-width:44px; padding:10px 0; border-radius:9px; background:rgba(255,255,255,0.04); border:1.5px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); -webkit-text-fill-color:rgba(255,255,255,0.7); font-size:14px; font-weight:900; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s, color .15s, transform .1s; user-select:none; -webkit-user-select:none; } .nb-len-chip:active { transform:scale(0.95); } .nb-len-chip.on { background:linear-gradient(135deg,rgba(74,124,255,0.28),rgba(155,93,229,0.2)); border-color:rgba(74,124,255,0.65); color:#fff; -webkit-text-fill-color:#fff; box-shadow:0 2px 10px rgba(74,124,255,0.22); } .nb-len-unit { font-size:9px; font-weight:700; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); margin-top:9px; letter-spacing:.5px; text-transform:uppercase; text-align:center; } .nb-actions { display:flex; gap:10px; margin-top:22px; } .nb-btn { flex:1; padding:13px 0; border-radius:10px; font-size:12px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; -webkit-tap-highlight-color:transparent; border:none; outline:none; transition:background .15s, transform .1s, box-shadow .15s; font-family:inherit; } .nb-btn:active { transform:scale(0.98); } .nb-btn.cancel { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.65); -webkit-text-fill-color:rgba(255,255,255,0.65); border:1px solid rgba(255,255,255,0.08); } .nb-btn.create { background:linear-gradient(135deg,#4A7CFF,#9B5DE5); color:#fff; -webkit-text-fill-color:#fff; box-shadow:0 4px 14px rgba(74,124,255,0.35); } /* [v185 Slice 2] Empty-state card shown when a non-legacy block is selected */ #block-empty-state { background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:32px 20px; text-align:center; margin-top:10px; } #block-empty-state .bes-icon { font-size:40px; margin-bottom:12px; opacity:0.35; } #block-empty-state .bes-meta { font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:rgba(74,124,255,0.85); -webkit-text-fill-color:rgba(74,124,255,0.85); margin-bottom:6px; } #block-empty-state .bes-title { font-size:15px; font-weight:900; color:#fff; -webkit-text-fill-color:#fff; margin-bottom:4px; letter-spacing:-0.2px; } #block-empty-state .bes-start { font-size:10px; font-weight:700; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); margin:6px 0 14px; letter-spacing:.4px; } #block-empty-state .bes-copy { font-size:11px; line-height:1.55; color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); max-width:300px; margin:0 auto; } /* ═════ [v185 Slice 3b] Block Day view — athletic, Whoop-adjacent ═════ */ .bd-wrap { margin-top:8px; } .bd-dtabs { display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px; } .bd-dtabs::-webkit-scrollbar { display:none; } .bd-dtab { flex:1 1 0; min-width:44px; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:8px 4px; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s, transform .12s cubic-bezier(0.2,0.8,0.2,1); color:rgba(255,255,255,0.55); -webkit-text-fill-color:rgba(255,255,255,0.55); font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; user-select:none; -webkit-user-select:none; } .bd-dtab:active { transform:scale(0.96); } .bd-dtab.on { background:linear-gradient(135deg,rgba(255,107,53,0.15),rgba(255,107,53,0.04)); border-color:rgba(255,107,53,0.45); color:#fff; -webkit-text-fill-color:#fff; box-shadow:0 0 0 1px rgba(255,107,53,0.28), 0 3px 10px rgba(255,107,53,0.18); } .bd-dtab-label { font-size:9px; font-weight:700; color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); margin-top:2px; text-transform:none; letter-spacing:0; } .bd-dtab.on .bd-dtab-label { color:rgba(255,107,53,0.85); -webkit-text-fill-color:rgba(255,107,53,0.85); } /* [Slice 7 P5] Schedule editor gear chip — narrower, dimmer, action-style */ .bd-dtab-sched { flex:0 0 36px; min-width:36px; color:rgba(255,255,255,0.32); -webkit-text-fill-color:rgba(255,255,255,0.32); font-size:14px; } .bd-dtab-sched:hover { color:rgba(255,255,255,0.7); -webkit-text-fill-color:rgba(255,255,255,0.7); border-color:rgba(255,255,255,0.18); } /* [2026-06-10] Multi-week grid view */ .bd-grid-toggle { margin-left:auto; background:rgba(255,107,53,0.12) !important; border-color:rgba(255,107,53,0.4) !important; color:#FF6B35 !important; -webkit-text-fill-color:#FF6B35 !important; font-weight:800; white-space:nowrap; } .bd-grid-hint { font-size:10px; color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); letter-spacing:.3px; margin:6px 2px 10px; } .bd-grid-day { margin:0 0 48px; } .bd-grid-day-head { font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.2px; color:#fff; -webkit-text-fill-color:#fff; text-transform:none; margin:10px 0 10px; padding:6px 0 6px 11px; border-radius:0; background:transparent; border-left:3px solid var(--orange); } .bd-grid-day-focus { font-size:0.82em; font-weight:500; letter-spacing:.2px; color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); } .bd-grid-compare { font-size:11px; font-weight:800; letter-spacing:.3px; color:#FF6B35; -webkit-text-fill-color:#FF6B35; background:rgba(255,107,53,0.08); border:1px solid rgba(255,107,53,0.25); border-radius:8px; padding:8px 11px; margin:2px 2px 12px; } .bd-grid-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid rgba(255,255,255,0.08); border-radius:10px; background:#101010; padding-bottom:6px; } .bd-grid { display:grid; min-width:max-content; } .bd-grid-cell { padding:4px 9px; border-bottom:1px solid rgba(255,255,255,0.05); font-size:11px; line-height:1.2; min-width:0; } /* green separators ONLY between week columns; labels/tier headers stay clean */ .bd-grid-x, .bd-grid-empty-cell, .bd-grid-whead { border-right:1.5px solid rgba(0,214,143,0.4); } .bd-grid-corner, .bd-grid-rowlabel { border-right:1px solid rgba(255,255,255,0.09); } .bd-grid-corner { position:sticky; left:0; top:0; z-index:4; background:#141414; font-family:'Oswald','Helvetica Neue',sans-serif; font-weight:600; letter-spacing:1px; font-size:10.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); border-bottom:2px solid var(--orange); } .bd-grid-whead { position:sticky; top:0; z-index:2; background:#141414; font-family:'Oswald','Helvetica Neue',sans-serif; font-weight:600; letter-spacing:1px; text-align:center; font-size:11px; padding:5px 9px; text-transform:uppercase; font-variant-numeric:tabular-nums; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); border-bottom:2px solid var(--orange); } .bd-grid-tier { position:sticky; left:0; z-index:1; background:#161616; display:flex; align-items:center; font-weight:900; letter-spacing:.5px; text-transform:uppercase; font-size:10px; padding:0; color:#fff; -webkit-text-fill-color:#fff; } /* [2026-06-15] Constrain the header's controls to the first (172px) column so the "+ Add" button right-aligns flush above the × delete column. */ .bd-grid-tier-inner { display:flex; align-items:center; gap:8px; width:172px; box-sizing:border-box; padding:5px 9px; } .bd-grid-tier-lbl { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bd-grid-tier-edit { cursor:pointer; } .bd-grid-tier-pencil { font-size:9px; opacity:0.32; flex-shrink:0; } .bd-grid-tier-edit:hover .bd-grid-tier-pencil { opacity:0.85; } .bd-grid-tier-addex { cursor:pointer; font-size:9px; font-weight:900; letter-spacing:.3px; text-transform:none; color:rgba(0,214,143,0.75); -webkit-text-fill-color:rgba(0,214,143,0.75); border:1px solid rgba(0,214,143,0.4); border-radius:4px; padding:1px 6px; margin-left:auto; flex-shrink:0; } .bd-grid-tier-addex:hover { color:rgba(0,214,143,1); -webkit-text-fill-color:rgba(0,214,143,1); background:rgba(0,214,143,0.12); } .bd-grid-rl-del { margin-left:auto; flex-shrink:0; padding:0 3px; font-size:13px; font-weight:900; line-height:1; cursor:pointer; color:rgba(255,82,82,0.3); -webkit-text-fill-color:rgba(255,82,82,0.3); transition:color .12s; } .bd-grid-rl-del:hover { color:rgba(255,82,82,0.95); -webkit-text-fill-color:rgba(255,82,82,0.95); } .bd-grid-ss { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:16px; padding:0 5px; font-size:9px; font-weight:900; line-height:1; letter-spacing:.2px; border-radius:4px; border:1px solid transparent; } .bd-grid-ss-solo { color:rgba(255,255,255,0.34); -webkit-text-fill-color:rgba(255,255,255,0.34); border-color:rgba(255,255,255,0.13); background:rgba(255,255,255,0.04); min-width:16px; padding:0 4px; } .bd-grid-rl-nm { line-height:1.2; min-width:0; } .bd-grid-rowlabel { position:sticky; left:0; z-index:1; background:#181818; display:flex; align-items:center; gap:7px; font-weight:700; font-size:10.5px; color:rgba(255,255,255,0.85); -webkit-text-fill-color:rgba(255,255,255,0.85); } .bd-grid-x { cursor:pointer; position:relative; display:flex; flex-direction:column; justify-content:center; } .bd-grid-x:active { background:rgba(255,255,255,0.05); } .bd-grid-x-ssrow { display:flex; align-items:center; margin-bottom:3px; } .bd-grid-del { position:absolute; top:1px; right:5px; font-size:14px; font-weight:900; line-height:1; cursor:pointer; padding:0 2px; color:rgba(255,82,82,0.38); -webkit-text-fill-color:rgba(255,82,82,0.38); transition:color .12s; } .bd-grid-del:hover { color:rgba(255,82,82,0.95); -webkit-text-fill-color:rgba(255,82,82,0.95); } .bd-grid-x-switch { background:rgba(255,184,0,0.07); box-shadow:inset 2px 0 0 #FFB800; } .bd-grid-x-name { font-weight:800; font-size:9px; margin-bottom:1px; letter-spacing:.1px; line-height:1.1; color:#FFB800; -webkit-text-fill-color:#FFB800; text-align:left; } .bd-grid-x-rx { color:rgba(255,255,255,0.82); -webkit-text-fill-color:rgba(255,255,255,0.82); font-size:11px; } .bd-grid-empty-cell { cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:rgba(0,214,143,0.5); -webkit-text-fill-color:rgba(0,214,143,0.5); transition:color .12s; } .bd-grid-empty-cell:hover { color:rgba(0,214,143,0.95); -webkit-text-fill-color:rgba(0,214,143,0.95); } /* [2026-06-18] Conditioning grid — read-only cells (no editing). Same green week separators as the lifting grid; filled cells show the prescription, off-phase weeks show a muted dash. */ .bd-cond-cell { border-right:1.5px solid rgba(0,214,143,0.4); display:flex; align-items:center; } .bd-cond-cell-off { border-right:1.5px solid rgba(0,214,143,0.4); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.16); -webkit-text-fill-color:rgba(255,255,255,0.16); } /* coach/P1 can tap a cell to override this athlete's prescription for that week */ .bd-cond-cell-edit { cursor:pointer; } .bd-cond-cell-edit:active { background:rgba(255,255,255,0.05); } /* an edited (overridden) cell — gold left bar, like the lift grid's undulation marker */ .bd-cond-cell-edited { box-shadow:inset 2px 0 0 #FFB800; } .bd-cond-cell-edited .bd-grid-x-rx { color:#FFD480; -webkit-text-fill-color:#FFD480; } .bd-grid-empty { font-size:11px; padding:14px; color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); } /* [2026-06-11] Version History / Restore modal */ .bd-hist-btn { color:rgba(255,184,0,0.85) !important; -webkit-text-fill-color:rgba(255,184,0,0.85) !important; border-color:rgba(255,184,0,0.3) !important; } #bd-history-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.72); display:flex; align-items:center; justify-content:center; padding:20px; } .bd-hist-card { width:100%; max-width:440px; max-height:80vh; display:flex; flex-direction:column; background:#161616; border:1px solid rgba(255,255,255,0.12); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.6); overflow:hidden; } .bd-hist-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; } .bd-hist-title { font-size:15px; font-weight:900; color:#fff; -webkit-text-fill-color:#fff; letter-spacing:.3px; } .bd-hist-close { font-size:16px; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); cursor:pointer; padding:4px 8px; } .bd-hist-sub { font-size:11px; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); padding:0 18px 12px; } .bd-hist-list { overflow-y:auto; padding:0 12px 14px; } .bd-hist-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 8px; border-bottom:1px solid rgba(255,255,255,0.06); } .bd-hist-when { font-size:12.5px; font-weight:800; color:rgba(255,255,255,0.9); -webkit-text-fill-color:rgba(255,255,255,0.9); } .bd-hist-reason { font-size:10.5px; color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); margin-top:2px; } .bd-hist-restore { background:rgba(255,107,53,0.14); border:1px solid rgba(255,107,53,0.4); border-radius:8px; color:#FF6B35; -webkit-text-fill-color:#FF6B35; font-size:11px; font-weight:800; letter-spacing:.3px; padding:7px 14px; cursor:pointer; flex-shrink:0; white-space:nowrap; } .bd-hist-restore:hover { background:rgba(255,107,53,0.24); } .bd-hist-empty { font-size:12px; color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); text-align:center; padding:24px 12px; } .bd-hist-ckpt { width:100%; background:rgba(0,214,143,0.12); border:1px solid rgba(0,214,143,0.4); border-radius:9px; color:#00D68F; -webkit-text-fill-color:#00D68F; font-size:12px; font-weight:800; letter-spacing:.4px; padding:10px; cursor:pointer; } .bd-hist-ckpt:hover { background:rgba(0,214,143,0.2); } /* [2026-06-11] Delete prompt — this week vs all weeks */ #bd-del-overlay, #bd-ss-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; padding:24px; } .bd-del-card { width:100%; max-width:340px; background:#181818; border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,0.6); } .bd-del-title { font-size:15px; font-weight:900; color:#fff; -webkit-text-fill-color:#fff; margin-bottom:6px; } .bd-del-sub { font-size:12px; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); margin-bottom:16px; } .bd-del-btns { display:flex; flex-direction:column; gap:9px; } .bd-del-btn { padding:12px; border-radius:9px; font-size:13px; font-weight:800; cursor:pointer; border:1px solid; text-align:center; } .bd-del-week { background:rgba(255,107,53,0.12); border-color:rgba(255,107,53,0.4); color:#FF6B35; -webkit-text-fill-color:#FF6B35; } .bd-del-all { background:rgba(255,82,82,0.12); border-color:rgba(255,82,82,0.45); color:#FF5252; -webkit-text-fill-color:#FF5252; } .bd-del-cancel { background:transparent; border-color:rgba(255,255,255,0.15); color:rgba(255,255,255,0.6); -webkit-text-fill-color:rgba(255,255,255,0.6); } .bd-ss-weekgrid { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:3px 0 2px; } .bd-ss-wkbtn { width:32px; height:30px; border-radius:7px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.78); -webkit-text-fill-color:rgba(255,255,255,0.78); font-size:12px; font-weight:800; cursor:pointer; } .bd-ss-wkbtn:hover { background:rgba(255,107,53,0.18); border-color:rgba(255,107,53,0.5); color:#FF6B35; -webkit-text-fill-color:#FF6B35; } /* [2026-06-11] Undulation hint in empty grid cells — what the slot runs that week */ .bd-grid-alt-cell { padding:6px 8px !important; } .bd-grid-alt { font-size:9.5px; font-style:italic; line-height:1.2; color:rgba(255,255,255,0.34); -webkit-text-fill-color:rgba(255,255,255,0.34); } /* Day header */ .bd-day-head { display:flex; align-items:baseline; justify-content:space-between; padding:12px 2px 10px 2px; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:12px; } .bd-day-title { font-size:13px; font-weight:900; color:rgba(255,255,255,0.92); -webkit-text-fill-color:rgba(255,255,255,0.92); letter-spacing:-0.2px; } .bd-day-meta { font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:rgba(255,255,255,0.38); -webkit-text-fill-color:rgba(255,255,255,0.38); } /* Tier rows */ .bd-tier { background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.05); border-radius:12px; padding:12px 14px; margin-bottom:10px; transition:border-color .15s, background .15s; } .bd-tier-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .bd-tier-head-left { display:flex; align-items:center; gap:9px; min-width:0; flex:1; } .bd-tier-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 6px currentColor; } .bd-tier-id { font-size:11px; font-weight:900; color:rgba(255,255,255,0.95); -webkit-text-fill-color:rgba(255,255,255,0.95); letter-spacing:.5px; } .bd-tier-label { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,0.42); -webkit-text-fill-color:rgba(255,255,255,0.42); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bd-tier-add { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:none; outline:none; background:rgba(255,107,53,0.1); border:1px solid rgba(255,107,53,0.35); border-radius:8px; color:#FF6B35; -webkit-text-fill-color:#FF6B35; font-size:16px; font-weight:900; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, transform .12s cubic-bezier(0.2,0.8,0.2,1); flex:0 0 auto; line-height:1; } .bd-tier-add:active { transform:scale(0.92); background:rgba(255,107,53,0.2); } /* Tier body — empty states */ .bd-tier-empty { font-size:11px; font-weight:700; color:rgba(255,255,255,0.28); -webkit-text-fill-color:rgba(255,255,255,0.28); font-style:italic; padding:6px 2px 2px 17px; letter-spacing:.2px; } .bd-tier-prompt { display:flex; align-items:center; gap:8px; padding:10px 2px 4px 17px; color:rgba(255,107,53,0.78); -webkit-text-fill-color:rgba(255,107,53,0.78); font-size:11px; font-weight:800; letter-spacing:.5px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .15s; } .bd-tier-prompt:active { color:#FF6B35; -webkit-text-fill-color:#FF6B35; } .bd-tier-prompt-icon { font-size:14px; font-weight:900; opacity:0.7; } /* Future-week placeholder */ .bd-future-week { background:rgba(0,0,0,0.22); border:1px dashed rgba(255,255,255,0.1); border-radius:12px; padding:28px 20px; text-align:center; margin-top:4px; } .bd-future-week-title { font-size:12px; font-weight:900; color:rgba(255,255,255,0.6); -webkit-text-fill-color:rgba(255,255,255,0.6); margin-bottom:6px; letter-spacing:.4px; text-transform:uppercase; } .bd-future-week-copy { font-size:11px; line-height:1.5; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); max-width:280px; margin:0 auto; } /* ═════ [v185 Slice 2.1] Optional label cue + Custom length ═════ */ .nb-lbl-opt { font-size:9px; font-weight:600; color:rgba(255,255,255,0.25); -webkit-text-fill-color:rgba(255,255,255,0.25); letter-spacing:.3px; text-transform:none; margin-left:5px; } /* Custom-length chip — text label "Custom"; slightly wider to fit */ .nb-len-chip.nb-len-custom { min-width:66px; font-size:11px; letter-spacing:.4px; color:rgba(255,255,255,0.55); -webkit-text-fill-color:rgba(255,255,255,0.55); } .nb-len-chip.nb-len-custom.on { color:#fff; -webkit-text-fill-color:#fff; } .nb-custom-help { font-size:9px; font-weight:700; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); letter-spacing:.5px; text-transform:uppercase; text-align:center; margin-top:8px; } /* ═════ [v185 Slice 3c] Quick Program Sheet + Exercise Picker + programmed rows ═════ */ /* Programmed exercise row inside a tier */ .bd-ex { display:flex; align-items:center; gap:10px; background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.04); border-radius:9px; padding:9px 11px; margin-top:6px; } .bd-ex-chain { font-size:10px; opacity:0.55; flex-shrink:0; width:14px; text-align:center; } .bd-ex-body { flex:1; overflow:hidden; } .bd-ex-name { font-size:12.5px; font-weight:800; color:rgba(255,255,255,0.92); -webkit-text-fill-color:rgba(255,255,255,0.92); letter-spacing:-0.1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bd-ex-rx { /* [2026-05-18] Pat directive: gray sub-line felt weak / dull / didn't pop. Bumped opacity 0.48 → 0.78, size 10.5px → 11.5px, added tabular-nums for clean numeric alignment, slight letter-spacing bump. Still subordinate to the exercise name (bold 14px @ 0.92) but reads as intentional metadata not afterthought. */ font-size:11.5px; font-weight:700; color:rgba(255,255,255,0.78); -webkit-text-fill-color:rgba(255,255,255,0.78); margin-top:3px; letter-spacing:.25px; font-variant-numeric:tabular-nums; } .bd-ex-btn { font-size:10px; font-weight:800; letter-spacing:.3px; padding:6px 10px; border-radius:7px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); color:rgba(255,255,255,0.6); -webkit-text-fill-color:rgba(255,255,255,0.6); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s; } .bd-ex-btn:active { background:rgba(255,255,255,0.1); } .bd-ex-btn.del { padding:6px 9px; font-size:13px; line-height:1; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); } .bd-ex-btn.del:active { color:#ff6b6b; -webkit-text-fill-color:#ff6b6b; background:rgba(255,107,107,0.12); } /* [Slice 7 P4] Exercise name row — wraps badge + name horizontally */ .bd-ex-name-row { display:flex; align-items:center; } .bd-ex-name-row .bd-ex-name { flex:1; min-width:0; } /* [Slice 7 P5] Rest-note row in expanded detail panel */ .bd-ex-rest-note { display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 12px; border-radius:8px; background:rgba(255,184,0,0.05); border:1px dashed rgba(255,184,0,0.28); font-size:11px; font-weight:600; letter-spacing:.2px; color:#FFB800; -webkit-text-fill-color:#FFB800; } .bd-ex-rest-note.empty { color:rgba(255,184,0,0.32); -webkit-text-fill-color:rgba(255,184,0,0.32); background:rgba(255,184,0,0.025); border-color:rgba(255,184,0,0.16); font-style:italic; font-weight:500; } .bd-ex-rest-note.editable .bd-ex-rest-text { cursor:pointer; flex:1; -webkit-tap-highlight-color:transparent; } .bd-ex-rest-note.editable .bd-ex-rest-text:active { color:rgba(255,184,0,0.7); -webkit-text-fill-color:rgba(255,184,0,0.7); } .bd-ex-rest-icon { font-size:13px; flex-shrink:0; opacity:0.85; } /* [2026-05-18] Rest-time-in-chevron enhancement — richer display */ .bd-ex-rest-body { flex:1; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-width:0; } .bd-ex-rest-time { font-size:14px; font-weight:900; letter-spacing:0.3px; color:#FFB800; -webkit-text-fill-color:#FFB800; flex-shrink:0; } .bd-ex-rest-rec-tag { display:inline-block; font-size:8px; font-weight:900; letter-spacing:0.6px; color:rgba(255,184,0,0.55); -webkit-text-fill-color:rgba(255,184,0,0.55); background:rgba(255,184,0,0.10); border:1px solid rgba(255,184,0,0.20); border-radius:3px; padding:1px 4px; flex-shrink:0; text-transform:uppercase; line-height:1.1; position:relative; top:-1px; } .bd-ex-rest-meta { font-size:10.5px; font-weight:600; letter-spacing:0.15px; color:rgba(255,184,0,0.72); -webkit-text-fill-color:rgba(255,184,0,0.72); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bd-ex-rest-note.empty .bd-ex-rest-time { color:rgba(255,184,0,0.32); -webkit-text-fill-color:rgba(255,184,0,0.32); } .bd-ex-rest-note.empty .bd-ex-rest-meta { color:rgba(255,184,0,0.32); -webkit-text-fill-color:rgba(255,184,0,0.32); font-style:italic; } .bd-ex-rest-note.editable .bd-ex-rest-body { cursor:pointer; -webkit-tap-highlight-color:transparent; } .bd-ex-rest-note.editable .bd-ex-rest-body:active { opacity:0.7; } .bd-ex-rest-start { flex-shrink:0; background:linear-gradient(135deg, #FFB800, #FF8C42); border:none; border-radius:8px; color:#1a0f00; -webkit-text-fill-color:#1a0f00; font-size:10px; font-weight:900; letter-spacing:0.6px; padding:6px 10px; cursor:pointer; text-transform:uppercase; box-shadow:0 2px 6px rgba(255,184,0,0.25); transition:transform 0.08s, box-shadow 0.12s; } .bd-ex-rest-start:active { transform:translateY(1px); box-shadow:0 1px 3px rgba(255,184,0,0.20); } .bd-ex-rest-start:hover { box-shadow:0 3px 9px rgba(255,184,0,0.32); } /* [Slice 7 P4] Superset action link inside expanded detail panel */ .bd-ex-ss-action { margin-top:10px; padding:8px 12px; border-radius:8px; background:rgba(59,130,246,0.06); border:1px dashed rgba(59,130,246,0.32); color:#60A5FA; -webkit-text-fill-color:#60A5FA; font-size:11px; font-weight:700; letter-spacing:.3px; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .12s, border-color .12s; } .bd-ex-ss-action:active { background:rgba(59,130,246,0.14); border-color:rgba(59,130,246,0.55); } .bd-ex-ss-action.linked { background:rgba(255,107,107,0.05); border-color:rgba(255,107,107,0.28); color:rgba(255,107,107,0.78); -webkit-text-fill-color:rgba(255,107,107,0.78); } .bd-ex-ss-action.linked:active { background:rgba(255,107,107,0.13); border-color:rgba(255,107,107,0.50); } /* [Slice 7 P4] Visible connector between linked exercises in a tier */ .bd-ss-connector { display:flex; align-items:center; justify-content:center; height:18px; margin:-2px 0; position:relative; pointer-events:none; } .bd-ss-connector.clickable { pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; } .bd-ss-connector::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); background:currentColor; opacity:0.30; } .bd-ss-connector-chip { position:relative; z-index:1; width:22px; height:22px; border-radius:50%; background:#161B22; border:2px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; line-height:1; color:currentColor; -webkit-text-fill-color:currentColor; transition: transform .08s, background .12s; } .bd-ss-connector.clickable:active .bd-ss-connector-chip { transform: scale(0.88); background:rgba(255,255,255,0.08); } /* Exercise row — expansion wrapper (universal tap-to-expand) */ .bd-ex-wrapper { margin-top:6px; } .bd-ex-wrapper > .bd-ex { margin-top:0; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-radius .15s ease; } .bd-ex-wrapper.open > .bd-ex { border-radius:9px 9px 0 0; border-bottom-color:transparent; } .bd-ex-chevron { width:18px; height:18px; flex-shrink:0; margin:0 2px 0 6px; position:relative; transition:transform .25s ease; } .bd-ex-chevron::before { content:''; position:absolute; top:50%; left:50%; width:8px; height:8px; border-right:2px solid rgba(255,255,255,0.55); border-bottom:2px solid rgba(255,255,255,0.55); transform:translate(-50%,-70%) rotate(45deg); transition:border-color .2s ease; } .bd-ex-wrapper.open .bd-ex-chevron { transform:rotate(180deg); } .bd-ex-wrapper.open .bd-ex-chevron::before { border-right-color:#FF6B35; border-bottom-color:#FF6B35; } .bd-ex-expand { max-height:0; overflow:hidden; transition:max-height .3s ease; } .bd-ex-wrapper.open .bd-ex-expand { max-height:900px; } .bd-ex-detail-list { padding:8px 12px 10px; background:rgba(0,0,0,0.28); border-left:1px solid rgba(255,255,255,0.04); border-right:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04); border-radius:0 0 9px 9px; } .bd-ex-detail-row { display:grid; grid-template-columns: 44px 56px 66px 42px 1fr; column-gap:10px; row-gap:0; align-items:baseline; font-size:10.5px; color:rgba(255,255,255,0.62); -webkit-text-fill-color:rgba(255,255,255,0.62); padding:3px 0; font-weight:600; letter-spacing:.2px; } .bd-ex-detail-row .label { color:rgba(255,255,255,0.38); -webkit-text-fill-color:rgba(255,255,255,0.38); font-weight:700; } .bd-ex-detail-row .reps { white-space:nowrap; } .bd-ex-detail-row .wt { color:#FF6B35; -webkit-text-fill-color:#FF6B35; font-weight:800; white-space:nowrap; } .bd-ex-detail-row .pct { color:#9B5DE5; -webkit-text-fill-color:#9B5DE5; font-weight:700; white-space:nowrap; } .bd-ex-detail-row .act { color:#00D68F; -webkit-text-fill-color:#00D68F; font-weight:700; white-space:nowrap; } /* ═══════════════════════════════════════════════════════════════════ */ /* [Slice 7 P3 — REBUILD #2] Smart Timer Drawer */ /* ═══════════════════════════════════════════════════════════════════ */ #v185-timer-pill { position:fixed; right:18px; bottom:18px; z-index: 950; height:46px; padding: 0 18px; border-radius: 23px; background: linear-gradient(135deg, #10B981 0%, #059669 100%); color:#fff; -webkit-text-fill-color:#fff; border: none; font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(16,185,129,0.40), 0 2px 6px rgba(0,0,0,0.25); user-select:none; -webkit-user-select:none; transition: transform .12s, box-shadow .12s; } #v185-timer-pill:active { transform: scale(0.96); box-shadow: 0 3px 10px rgba(16,185,129,0.30); } #v185-timer-pill::before { content: "⏱"; font-size: 16px; margin-right: 6px; vertical-align: -1px; } #v185-drawer-overlay { position: fixed; inset: 0; z-index: 951; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity .18s; } #v185-drawer-root.open #v185-drawer-overlay { opacity: 1; pointer-events: auto; } #v185-drawer { position: fixed; right: 18px; bottom: 76px; z-index: 952; width: 320px; max-width: calc(100vw - 36px); background: #161B22; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35); transform: translateY(20px) scale(0.96); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; } #v185-drawer-root.open #v185-drawer { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .v185-drawer-head { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); } .v185-drawer-title { font-size: 14px; font-weight: 800; color: #fff; -webkit-text-fill-color:#fff; letter-spacing: 0.5px; } .v185-drawer-close { background: transparent; border: none; color: rgba(255,255,255,0.55); -webkit-text-fill-color:rgba(255,255,255,0.55); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .v185-drawer-close:active { background: rgba(255,255,255,0.08); } .v185-drawer-section { padding: 14px 18px; } .v185-drawer-section-lbl { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.42); -webkit-text-fill-color: rgba(255,255,255,0.42); margin-bottom: 8px; } .v185-drawer-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0 18px; } .v185-time-display { font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; -webkit-text-fill-color:#fff; text-align: center; letter-spacing: 1px; padding: 6px 0 10px; } .v185-time-display.running { color: #FBBF24; -webkit-text-fill-color:#FBBF24; } .v185-rest-exname { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.66); -webkit-text-fill-color: rgba(255,255,255,0.66); text-align: center; margin-bottom: -2px; } .v185-rest-why { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.42); -webkit-text-fill-color: rgba(255,255,255,0.42); text-align: center; padding: 0 8px 10px; line-height: 1.35; } .v185-btn-row { display: flex; gap: 8px; } .v185-btn { flex: 1; height: 38px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; cursor: pointer; transition: background .12s, border-color .12s; } .v185-btn.primary { background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: #fff; -webkit-text-fill-color:#fff; } .v185-btn.primary:active { transform: scale(0.97); } .v185-btn.ghost { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); -webkit-text-fill-color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.12); } .v185-btn.ghost:active { background: rgba(255,255,255,0.12); } /* Inline color spans inside .bd-ex-rx summary line */ .bd-ex-rx-wt { color:#FF6B35; -webkit-text-fill-color:#FF6B35; font-weight:800; } .bd-ex-rx-pct { color:#9B5DE5; -webkit-text-fill-color:#9B5DE5; font-weight:700; } /* Toggle row (switch style) */ .qp-toggle-row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:12px 14px; margin-bottom:16px; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; } .qp-toggle-row:active { background:rgba(255,255,255,0.06); } .qp-toggle-text { flex:1; } .qp-toggle-label { font-size:12px; font-weight:800; color:rgba(255,255,255,0.85); -webkit-text-fill-color:rgba(255,255,255,0.85); letter-spacing:.2px; } .qp-toggle-hint { font-size:9.5px; font-weight:600; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); margin-top:2px; letter-spacing:.3px; } .qp-switch { width:38px; height:22px; border-radius:12px; background:rgba(255,255,255,0.08); position:relative; flex-shrink:0; transition:background .2s; } .qp-switch::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.5); transition:left .2s, background .2s; } .qp-toggle-row.on .qp-switch { background:#E0601F; } .qp-toggle-row.on .qp-switch::after { left:18px; background:#fff; } /* Weight Mode chip row (Slice 3.x+) — Absolute / %1RM / AMRAP */ .qp-mode-row { display:flex; gap:8px; margin-bottom:10px; } .qp-mode-chip { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:11px 8px; text-align:center; font-size:12px; font-weight:800; letter-spacing:.3px; color:rgba(255,255,255,0.65); -webkit-text-fill-color:rgba(255,255,255,0.65); cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; transition:background .15s, border-color .15s, color .15s; } .qp-mode-chip:active { background:rgba(255,255,255,0.08); } .qp-mode-chip.on { background:#E0601F; border-color:rgba(255,255,255,0.2); color:#EAEAEA; -webkit-text-fill-color:#EAEAEA; text-shadow:0 1px 2px rgba(0,0,0,0.4); box-shadow:0 2px 8px rgba(255,107,53,0.25); } .qp-mode-chip.disabled { opacity:0.4; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); } /* Exercise Picker Sheet */ #qpp-sheet .nb-card { max-height:85vh; display:flex; flex-direction:column; padding-bottom:16px; } .qpp-search { width:100%; box-sizing:border-box; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:11px 14px; font-size:13px; font-weight:600; color:#fff; -webkit-text-fill-color:#fff; outline:none; margin-bottom:12px; color-scheme:dark; } .qpp-search:focus { border-color:rgba(255,107,53,0.5); } .qpp-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:2px; min-height:180px; max-height:60vh; } .qpp-cat { font-size:9.5px; font-weight:900; letter-spacing:.9px; text-transform:uppercase; color:rgba(255,107,53,0.85); -webkit-text-fill-color:rgba(255,107,53,0.85); margin:10px 2px 6px; padding-bottom:4px; border-bottom:1px solid rgba(255,107,53,0.12); } .qpp-cat:first-child { margin-top:0; } .qpp-row { display:flex; align-items:baseline; justify-content:space-between; padding:10px 10px; border-radius:8px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .1s; } .qpp-row:active { background:rgba(255,255,255,0.06); } .qpp-row-name { font-size:13px; font-weight:700; color:rgba(255,255,255,0.92); -webkit-text-fill-color:rgba(255,255,255,0.92); } .qpp-row-meta { font-size:9.5px; font-weight:700; color:rgba(255,255,255,0.3); -webkit-text-fill-color:rgba(255,255,255,0.3); letter-spacing:.4px; text-transform:uppercase; } .qpp-empty { text-align:center; padding:30px 10px; font-size:12px; font-weight:600; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); } /* ═════ [Phase B Session 2] Master Sheet Deploy modal ═════ */ #msd-sheet .nb-card { max-height:90vh; display:flex; flex-direction:column; padding-bottom:16px; } .msd-meta { font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); margin-top:-12px; margin-bottom:14px; } .msd-toolbar { display:flex; align-items:center; justify-content:space-between; padding:6px 2px 10px; margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,0.06); } .msd-count { font-size:11px; font-weight:800; letter-spacing:.5px; color:rgba(255,255,255,0.55); -webkit-text-fill-color:rgba(255,255,255,0.55); } .msd-link { font-size:11px; font-weight:800; letter-spacing:.4px; color:#FF6B35; -webkit-text-fill-color:#FF6B35; cursor:pointer; padding:4px 6px; border-radius:6px; -webkit-tap-highlight-color:transparent; } .msd-link:active { background:rgba(255,107,53,0.08); } .msd-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:2px; min-height:200px; max-height:58vh; } .msd-row { display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .12s; border:1px solid transparent; } .msd-row:active { background:rgba(255,255,255,0.04); } .msd-row.on { background:rgba(255,107,53,0.08); border-color:rgba(255,107,53,0.28); } .msd-check { width:22px; height:22px; flex-shrink:0; border:1.5px solid rgba(255,255,255,0.25); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#fff; -webkit-text-fill-color:#fff; background:transparent; transition:all .12s; } .msd-row.on .msd-check { background:#FF6B35; border-color:#FF6B35; } .msd-row.on .msd-check::after { content:'✓'; } .msd-body { flex:1; min-width:0; } .msd-name { font-size:13.5px; font-weight:800; color:rgba(255,255,255,0.95); -webkit-text-fill-color:rgba(255,255,255,0.95); line-height:1.2; } .msd-sub { font-size:10px; font-weight:700; letter-spacing:.4px; color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); margin-top:3px; text-transform:uppercase; } .msd-status { font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:3px 8px; border-radius:6px; flex-shrink:0; white-space:nowrap; } .msd-status.replace { background:rgba(255,184,0,0.12); color:#FFB800; -webkit-text-fill-color:#FFB800; border:1px solid rgba(255,184,0,0.3); } .msd-status.fresh { background:rgba(0,214,143,0.1); color:#00D68F; -webkit-text-fill-color:#00D68F; border:1px solid rgba(0,214,143,0.25); } .msd-status.other { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.08); } .msd-footer { padding-top:12px; margin-top:8px; border-top:1px solid rgba(255,255,255,0.06); display:flex; gap:8px; } .msd-btn { flex:1; padding:13px 16px; border-radius:10px; font-size:12.5px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; border:1px solid transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all .12s; } .msd-btn.cancel { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1); color:rgba(255,255,255,0.6); -webkit-text-fill-color:rgba(255,255,255,0.6); } .msd-btn.confirm { background:linear-gradient(135deg,#FF6B35,#FF8855); color:#fff; -webkit-text-fill-color:#fff; box-shadow:0 4px 14px rgba(255,107,53,0.3); } .msd-btn.confirm:disabled { opacity:0.32; cursor:not-allowed; box-shadow:none; } .msd-btn.done { background:rgba(0,214,143,0.15); border-color:rgba(0,214,143,0.4); color:#00D68F; -webkit-text-fill-color:#00D68F; } /* Stage 2: per-athlete deploy progress + missing baselines */ .msd-prog-row { padding:12px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); margin-bottom:8px; } .msd-prog-head { display:flex; align-items:center; gap:10px; } .msd-prog-icon { width:24px; height:24px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; } .msd-prog-icon.spin { border:2px solid rgba(255,255,255,0.15); border-top-color:#FF6B35; animation:msd-spin 0.7s linear infinite; } @keyframes msd-spin { to { transform:rotate(360deg); } } .msd-prog-icon.ok { background:rgba(0,214,143,0.15); color:#00D68F; -webkit-text-fill-color:#00D68F; } .msd-prog-icon.warn { background:rgba(255,184,0,0.15); color:#FFB800; -webkit-text-fill-color:#FFB800; } .msd-prog-icon.err { background:rgba(255,82,82,0.15); color:#FF5252; -webkit-text-fill-color:#FF5252; } .msd-prog-body { flex:1; min-width:0; } .msd-prog-name { font-size:13px; font-weight:800; color:rgba(255,255,255,0.95); -webkit-text-fill-color:rgba(255,255,255,0.95); } .msd-prog-detail { font-size:10.5px; font-weight:700; color:rgba(255,255,255,0.45); -webkit-text-fill-color:rgba(255,255,255,0.45); margin-top:3px; } .msd-prog-detail.warn { color:#FFB800; -webkit-text-fill-color:#FFB800; } .msd-prog-detail.err { color:#FF5252; -webkit-text-fill-color:#FF5252; } .msd-missing-list { margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,184,0,0.18); } .msd-missing-row { display:flex; align-items:center; gap:8px; padding:6px 0; } .msd-missing-name { flex:1; min-width:0; font-size:11.5px; font-weight:700; color:rgba(255,255,255,0.78); -webkit-text-fill-color:rgba(255,255,255,0.78); } .msd-missing-input { width:72px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,184,0,0.3); border-radius:6px; color:#fff; -webkit-text-fill-color:#fff; font-size:12px; font-weight:800; padding:5px 8px; text-align:center; outline:none; color-scheme:dark; } .msd-missing-input:focus { border-color:#FFB800; } .msd-missing-save { background:rgba(255,184,0,0.18); border:1px solid rgba(255,184,0,0.4); border-radius:6px; color:#FFB800; -webkit-text-fill-color:#FFB800; font-size:10px; font-weight:900; letter-spacing:.4px; padding:5px 9px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .msd-missing-resolved { font-size:10.5px; font-weight:800; color:#00D68F; -webkit-text-fill-color:#00D68F; letter-spacing:.3px; } /* ═════ [v185 Slice 3d] Per-Set Editor ═════ */ /* Pattern input row — text field + Apply (→) button */ .pse-pattern-row { display:flex; gap:8px; align-items:stretch; } .pse-pattern-row .nb-input { flex:1; } .pse-apply-btn { width:44px; flex-shrink:0; border-radius:10px; background:linear-gradient(135deg,rgba(255,107,53,0.6),rgba(255,107,53,0.35)); border:1px solid rgba(255,107,53,0.5); color:#fff; -webkit-text-fill-color:#fff; font-size:18px; font-weight:900; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, transform .1s, opacity .15s; font-family:inherit; padding:0; } .pse-apply-btn:active { transform:scale(0.94); } .pse-apply-btn:disabled { opacity:0.3; cursor:default; background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); } /* Pattern status line — single line under the input */ .pse-status { font-size:10px; font-weight:700; margin-top:7px; letter-spacing:.3px; min-height:14px; } .pse-status.baseline { color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); } .pse-status.ok { color:rgba(0,214,143,0.85); -webkit-text-fill-color:rgba(0,214,143,0.85); } .pse-status.err { color:rgba(255,107,107,0.85); -webkit-text-fill-color:rgba(255,107,107,0.85); } .pse-status.modified { color:rgba(255,180,0,0.75); -webkit-text-fill-color:rgba(255,180,0,0.75); } /* Sets grid */ .pse-grid { display:flex; flex-direction:column; gap:6px; } .pse-row { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.05); border-radius:9px; padding:8px 10px; } .pse-row-num { width:22px; flex-shrink:0; font-size:11px; font-weight:900; color:rgba(255,107,53,0.85); -webkit-text-fill-color:rgba(255,107,53,0.85); text-align:center; } .pse-row-reps, .pse-row-weight { flex:1; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.07); border-radius:7px; padding:8px 10px; font-size:13px; font-weight:800; color:#fff; -webkit-text-fill-color:#fff; outline:none; text-align:center; color-scheme:dark; font-family:inherit; min-width:0; } .pse-row-reps:focus, .pse-row-weight:focus { border-color:rgba(255,107,53,0.5); } .pse-row-label { font-size:9px; font-weight:700; color:rgba(255,255,255,0.35); -webkit-text-fill-color:rgba(255,255,255,0.35); letter-spacing:.4px; text-transform:uppercase; width:30px; flex-shrink:0; text-align:center; } /* [v185 Slice 4f] REPS label — orange gradient pill matching active week-chip style (.bd-week.on). Elevates reps as primary prescription axis. */ .pse-row-label-reps { flex-shrink:0; padding:5px 8px; width:42px; text-align:center; font-size:9px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; background:linear-gradient(135deg,rgba(255,107,53,0.22),rgba(255,107,53,0.06)); border:1px solid rgba(255,107,53,0.55); border-radius:6px; color:#FF6B35; -webkit-text-fill-color:#FF6B35; box-shadow:0 2px 8px rgba(255,107,53,0.15); user-select:none; -webkit-user-select:none; } /* [v185 Slice 4f] Unit label (lb/%) — further muted to 30% opacity to enforce visual hierarchy: reps = primary, weight units = secondary. */ .pse-row-label-unit { color:rgba(255,255,255,0.3); -webkit-text-fill-color:rgba(255,255,255,0.3); width:24px; } .pse-row-del { width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:6px; background:rgba(255,75,75,0.08); border:1px solid rgba(255,75,75,0.28); color:rgba(255,107,107,0.75); -webkit-text-fill-color:rgba(255,107,107,0.75); font-size:12px; font-weight:700; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s, border-color .15s; } .pse-row-del:hover, .pse-row-del:active { background:rgba(255,75,75,0.18); border-color:rgba(255,75,75,0.55); color:#ff6b6b; -webkit-text-fill-color:#ff6b6b; } .pse-add-row { margin-top:2px; padding:10px; border-radius:9px; background:rgba(0,214,143,0.06); border:1px dashed rgba(0,214,143,0.35); color:rgba(0,214,143,0.85); -webkit-text-fill-color:rgba(0,214,143,0.85); font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s; } .pse-add-row:active { background:rgba(0,214,143,0.14); } /* ═══════════════════════════════════════════════════════════════════ [Slice 6] Multi-Week Programming — Program across weeks stack view ═══════════════════════════════════════════════════════════════════ */ /* "Program across weeks ↓" escalation link, shown below apply-all toggle */ .pse-week-escalate { display:block; margin-top:10px; padding:9px 12px; text-align:center; border-radius:7px; background:linear-gradient(135deg,rgba(155,93,229,0.10),rgba(255,107,53,0.06)); border:1px dashed rgba(155,93,229,0.38); color:rgba(192,127,255,0.9); -webkit-text-fill-color:rgba(192,127,255,0.9); font-size:11.5px; font-weight:900; letter-spacing:.45px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s, color .15s, transform .08s; user-select:none; -webkit-user-select:none; } .pse-week-escalate:hover, .pse-week-escalate:active { background:linear-gradient(135deg,rgba(155,93,229,0.20),rgba(255,107,53,0.12)); border-color:rgba(155,93,229,0.65); color:#c07fff; -webkit-text-fill-color:#c07fff; } .pse-week-escalate:active { transform:translateY(1px); } /* "Unify across weeks ↑" collapse link at top of multi-week body */ .pse-week-collapse-row { margin-top:4px; margin-bottom:10px; } .pse-week-collapse { display:inline-block; padding:6px 12px; border-radius:14px; background:rgba(74,124,255,0.08); border:1px solid rgba(74,124,255,0.3); color:rgba(74,124,255,0.85); -webkit-text-fill-color:rgba(74,124,255,0.85); font-size:10.5px; font-weight:800; letter-spacing:.4px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s; } .pse-week-collapse:hover, .pse-week-collapse:active { background:rgba(74,124,255,0.16); border-color:rgba(74,124,255,0.55); color:#4A7CFF; -webkit-text-fill-color:#4A7CFF; } /* Pagination tabs: [Wk 1-4] [Wk 5-8] ... shown when block > 4 weeks */ .pse-week-window-tabs { display:flex; gap:6px; margin-bottom:12px; padding:4px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.05); border-radius:9px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .pse-week-window-tab { flex:1; min-width:72px; padding:8px 10px; text-align:center; font-size:11px; font-weight:900; letter-spacing:.4px; color:rgba(255,255,255,0.5); -webkit-text-fill-color:rgba(255,255,255,0.5); border-radius:7px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s; white-space:nowrap; } .pse-week-window-tab:hover { color:rgba(255,255,255,0.75); -webkit-text-fill-color:rgba(255,255,255,0.75); } .pse-week-window-tab.active { background:#E0601F; color:#EAEAEA; -webkit-text-fill-color:#EAEAEA; text-shadow:0 1px 2px rgba(0,0,0,0.4); box-shadow:0 2px 8px rgba(255,107,44,0.35); } /* Week stack — 4 vertical cards */ .pse-week-stack { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; } /* A single week card — left stripe + body */ .pse-week-card { display:flex; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:10px; overflow:hidden; } /* Left-edge colored stripe with WK label. Uses brand gradient per sovereignty-app aesthetic. Matches tier-dot language. */ .pse-week-stripe { flex-shrink:0; width:36px; background:#E0601F; color:#EAEAEA; -webkit-text-fill-color:#EAEAEA; text-shadow:0 1px 2px rgba(0,0,0,0.4); font-size:10px; font-weight:900; letter-spacing:.8px; text-align:center; padding:12px 0; writing-mode:vertical-rl; text-orientation:mixed; display:flex; align-items:center; justify-content:center; min-height:120px; } /* Card body contains exercise header + grid + actions */ .pse-week-body { flex:1; min-width:0; padding:12px 14px 14px; } /* Exercise header row inside a week card (picker affordance) */ .pse-week-ex { font-size:14px; font-weight:900; color:#fff; -webkit-text-fill-color:#fff; margin-bottom:10px; line-height:1.3; } .pse-week-ex .pse-ex-swap, .pse-week-ex .pse-ex-pick { display:inline-block; } /* Per-week sets grid wrapper */ .pse-week-grid { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; } /* Empty-state message when no sets yet */ .pse-week-empty { padding:10px 0; text-align:center; font-size:11px; font-weight:700; color:rgba(255,255,255,0.3); -webkit-text-fill-color:rgba(255,255,255,0.3); letter-spacing:.3px; } /* Copy to all weeks button (Week 1 card only) */ .pse-week-copy-btn { display:block; margin-top:10px; padding:9px 12px; text-align:center; border-radius:8px; background:linear-gradient(135deg,rgba(255,107,53,0.12),rgba(155,93,229,0.12)); border:1px solid rgba(255,107,53,0.45); color:#FF9555; -webkit-text-fill-color:#FF9555; font-size:11px; font-weight:900; letter-spacing:.5px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s, color .15s; } .pse-week-copy-btn:hover, .pse-week-copy-btn:active { background:linear-gradient(135deg,rgba(255,107,53,0.22),rgba(155,93,229,0.22)); border-color:rgba(255,107,53,0.7); color:#FFB080; -webkit-text-fill-color:#FFB080; } /* [2026-06-06] Two side-by-side copy options per week card (this block / all). */ .pse-week-copy-row { display:flex; gap:8px; margin-top:10px; } .pse-week-copy-row .pse-week-copy-btn { flex:1; margin-top:0; min-width:0; } /* AMRAP chip for reps field */ .pse-row-amrap { flex:1; text-align:center; padding:8px 10px; background:rgba(155,93,229,0.15); border:1px solid rgba(155,93,229,0.4); border-radius:7px; font-size:11px; font-weight:900; color:#c07fff; -webkit-text-fill-color:#c07fff; letter-spacing:.5px; cursor:pointer; -webkit-tap-highlight-color:transparent; } /* Compact AMRAP toggle chip — shown in numeric rows, inline with reps. Inactive state (numeric row); tap to convert the row to AMRAP (chip disappears, replaced by the full .pse-row-amrap pill above). */ /* AMRAP toggle chip (inactive state) — 26×26 square displaying ∞ symbol. Lives in numeric rows; tap flips row to AMRAP (replaced by .pse-row-amrap). */ .pse-row-amrap-btn { flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:rgba(155,93,229,0.04); border:1px dashed rgba(155,93,229,0.35); border-radius:7px; font-size:14px; font-weight:900; line-height:1; color:rgba(192,127,255,0.6); -webkit-text-fill-color:rgba(192,127,255,0.6); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s, color .15s; user-select:none; -webkit-user-select:none; } .pse-row-amrap-btn:hover, .pse-row-amrap-btn:active { background:rgba(155,93,229,0.16); border-color:rgba(155,93,229,0.6); color:#c07fff; -webkit-text-fill-color:#c07fff; } /* Testing link (shown when ramp + no baseline) */ .pse-testing-link { color:rgba(74,124,255,0.9); -webkit-text-fill-color:rgba(74,124,255,0.9); text-decoration:underline; cursor:pointer; -webkit-tap-highlight-color:transparent; } /* ═════ [v185 Slice 3.x] Week picker strip + PSE exercise swap ═════ */ /* Week strip — horizontal scrollable row of week chips above day tabs */ #bd-weekstrip { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 10px 2px; margin-bottom:2px; } #bd-weekstrip::-webkit-scrollbar { display:none; } #bd-weekstrip { scrollbar-width:none; } .bd-week { flex:0 0 auto; min-width:54px; padding:7px 12px; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.05); border-radius:8px; font-size:10px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; text-align:center; color:rgba(255,255,255,0.4); -webkit-text-fill-color:rgba(255,255,255,0.4); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s, border-color .15s, transform .1s; user-select:none; -webkit-user-select:none; } .bd-week:active { transform:scale(0.96); } .bd-week.on { background:linear-gradient(135deg,rgba(74,124,255,0.22),rgba(74,124,255,0.06)); border-color:rgba(74,124,255,0.55); color:#fff; -webkit-text-fill-color:#fff; box-shadow:0 2px 8px rgba(74,124,255,0.15); } /* PSE: make the exercise name in the sheet header clickable for swap */ .pse-ex-swap { cursor:pointer; -webkit-tap-highlight-color:transparent; position:relative; padding-right:20px; display:inline-block; transition:color .15s; } .pse-ex-swap::after { content:'⇄'; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:14px; font-weight:700; opacity:0.4; color:rgba(255,107,53,0.8); -webkit-text-fill-color:rgba(255,107,53,0.8); transition:opacity .15s; } .pse-ex-swap:hover::after, .pse-ex-swap:active::after { opacity:1; } .pse-ex-swap:active { color:rgba(255,107,53,0.85); -webkit-text-fill-color:rgba(255,107,53,0.85); } /* [Slice 5] Pick-an-exercise affordance — shown when PSE opens in new-mode with no exercise selected. Reads as a prompt, not a label. */ .pse-ex-pick { cursor:pointer; -webkit-tap-highlight-color:transparent; color:rgba(74,124,255,0.85); -webkit-text-fill-color:rgba(74,124,255,0.85); font-style:italic; transition:color .15s; } .pse-ex-pick:hover, .pse-ex-pick:active { color:#4A7CFF; -webkit-text-fill-color:#4A7CFF; } /* [Ship — Inline Rename] Small ✎ pill next to PSE title. Renames the display string (ex.n) without nuking the library link (exerciseId stays intact). Scope toggle inside the handler: this cell vs all instances in block. */ .pse-ex-rename { cursor:pointer; -webkit-tap-highlight-color:transparent; display:inline-block; margin-left:8px; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:700; color:rgba(255,184,0,0.6); -webkit-text-fill-color:rgba(255,184,0,0.6); background:rgba(255,184,0,0.08); border:1px solid rgba(255,184,0,0.22); transition:all .15s; vertical-align:middle; line-height:1; } .pse-ex-rename:hover, .pse-ex-rename:active { color:#FFB800; -webkit-text-fill-color:#FFB800; background:rgba(255,184,0,0.18); border-color:rgba(255,184,0,0.55); }