/* ══════════════════════════════════════ GLOBAL — Training Platform Themeable token system (4 layers) + legacy aliases. Themes are applied via attributes on : data-mode = light | dark (viewer preference) data-combo = cobalt|forest|ember|graphite|violet|teal|gold|ruby|diesel data-font = jakarta|sora|fraunces|mono|oswald|bricolage "diesel" is reserved for Joshua's platform (neon + mono + sharp corners). Trainers pick combo + font; viewers pick light/dark. Everything else (neutral scale, semantic colors, spacing, layout) is fixed. ══════════════════════════════════════ */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { font-size:calc(16px * var(--font-scale, 1)); -webkit-text-size-adjust:100%; } body { font-family:var(--font-family); background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background 0.3s, color 0.3s; } button { font-family:var(--font-family); cursor:pointer; } input,select,textarea { font-family:var(--font-family); } a { text-decoration:none; color:inherit; } /* ════════ LAYER 4 — shape, space, type scale (theme-independent) ════════ */ :root { --font-scale: 1; --font-mono: 'Space Mono', ui-monospace, monospace; --nav-h:60px; --bottom-h:68px; /* Default radii (soft, modern). The diesel preset overrides to sharp. */ --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px; /* ── LAYER 2 — semantic (fixed across all combos) ── */ --success:#1FB873; --success-soft:rgba(31,184,115,0.14); --warning:#E8A93B; --warning-soft:rgba(232,169,59,0.16); --danger:#E5544B; --danger-soft:rgba(229,84,75,0.14); --info:#4C8DFF; --info-soft:rgba(76,141,255,0.14); } /* ════════ LAYER 3 — neutral scale by mode ════════ */ html[data-mode="light"] { --bg:#F6F7F9; --surface-1:#FFFFFF; --surface-2:#F0F2F6; --surface-3:#E6E9F0; --n-border:rgba(16,24,40,0.10); --n-border-strong:rgba(16,24,40,0.18); --text:#131722; --text-muted:#4A5163; --text-dim:#7A8194; color-scheme:light; } html[data-mode="dark"], :root { --bg:#0E1117; --surface-1:#161B24; --surface-2:#1D2430; --surface-3:#27303D; --n-border:rgba(255,255,255,0.10); --n-border-strong:rgba(255,255,255,0.20); --text:#F2F4F8; --text-muted:#B9C0CE; --text-dim:#828B9C; color-scheme:dark; } /* ════════ LAYER 1 — curated color combos (accent), tuned per mode ════════ */ html[data-combo="cobalt"][data-mode="light"]{ --accent:#2E5BFF; --accent-hover:#2247D6; --accent-contrast:#FFFFFF; --accent-2:#0FA890; --accent-soft:rgba(46,91,255,0.12); } html[data-combo="cobalt"][data-mode="dark"], :root { --accent:#6E9BFF; --accent-hover:#5685F2; --accent-contrast:#0A1020; --accent-2:#2DE0BC; --accent-soft:rgba(110,155,255,0.18); } html[data-combo="forest"][data-mode="light"]{ --accent:#1E7A4D; --accent-hover:#176140; --accent-contrast:#FFFFFF; --accent-2:#8AAE2E; --accent-soft:rgba(30,122,77,0.12); } html[data-combo="forest"][data-mode="dark"]{ --accent:#46C285; --accent-hover:#37A972; --accent-contrast:#06140D; --accent-2:#B6D957; --accent-soft:rgba(70,194,133,0.18); } html[data-combo="ember"][data-mode="light"]{ --accent:#C8502A; --accent-hover:#A84122; --accent-contrast:#FFFFFF; --accent-2:#D99425; --accent-soft:rgba(200,80,42,0.12); } html[data-combo="ember"][data-mode="dark"]{ --accent:#F58050; --accent-hover:#E66B3C; --accent-contrast:#1A0E08; --accent-2:#FFC56B; --accent-soft:rgba(245,128,80,0.18); } html[data-combo="graphite"][data-mode="light"]{ --accent:#3A4150; --accent-hover:#2A303C; --accent-contrast:#FFFFFF; --accent-2:#8A93A6; --accent-soft:rgba(58,65,80,0.10); } html[data-combo="graphite"][data-mode="dark"]{ --accent:#C6CFE0; --accent-hover:#AEB8CC; --accent-contrast:#14181F; --accent-2:#7E8AA0; --accent-soft:rgba(198,207,224,0.16); } html[data-combo="violet"][data-mode="light"]{ --accent:#6B3FD4; --accent-hover:#5832B5; --accent-contrast:#FFFFFF; --accent-2:#B57BE8; --accent-soft:rgba(107,63,212,0.12); } html[data-combo="violet"][data-mode="dark"]{ --accent:#A284F2; --accent-hover:#8E6DEB; --accent-contrast:#120A24; --accent-2:#C9A8F5; --accent-soft:rgba(162,132,242,0.18); } html[data-combo="teal"][data-mode="light"]{ --accent:#0E8C8C; --accent-hover:#0A7373; --accent-contrast:#FFFFFF; --accent-2:#46C7B8; --accent-soft:rgba(14,140,140,0.12); } html[data-combo="teal"][data-mode="dark"]{ --accent:#3CCDCD; --accent-hover:#2BB6B6; --accent-contrast:#042020; --accent-2:#6FE0D2; --accent-soft:rgba(60,205,205,0.18); } html[data-combo="gold"][data-mode="light"]{ --accent:#9A7320; --accent-hover:#7E5E18; --accent-contrast:#FFFFFF; --accent-2:#C9A227; --accent-soft:rgba(154,115,32,0.12); } html[data-combo="gold"][data-mode="dark"]{ --accent:#E0B33C; --accent-hover:#CC9F2C; --accent-contrast:#1A1404; --accent-2:#F2D27A; --accent-soft:rgba(224,179,60,0.18); } html[data-combo="ruby"][data-mode="light"]{ --accent:#C81E4A; --accent-hover:#A81740; --accent-contrast:#FFFFFF; --accent-2:#F06A8B; --accent-soft:rgba(200,30,74,0.12); } html[data-combo="ruby"][data-mode="dark"]{ --accent:#EE5577; --accent-hover:#E03E65; --accent-contrast:#1A0610; --accent-2:#F79BB0; --accent-soft:rgba(238,85,119,0.18); } /* DIESEL — Joshua's exclusive preset: neon green + sharp corners + his charcoal. Color tuned for both modes; mono font + sharp radii applied here. */ html[data-combo="diesel"]{ --radius-sm:3px; --radius-md:4px; --radius-lg:6px; } html[data-combo="diesel"][data-mode="dark"]{ --accent:#00F57A; --accent-hover:#00d96c; --accent-contrast:#06140D; --accent-2:#FFD166; --accent-soft:rgba(0,245,122,0.16); /* preserve Josh's original charcoal surfaces exactly */ --bg:#1C1C1C; --surface-1:#242424; --surface-2:#2C2C2C; --surface-3:#333333; --text:#FFFFFF; --text-muted:#E0E0E0; --text-dim:#B8B8B8; --n-border:rgba(255,255,255,0.12); --n-border-strong:rgba(255,255,255,0.22); } html[data-combo="diesel"][data-mode="light"]{ --accent:#009E50; --accent-hover:#008343; --accent-contrast:#FFFFFF; --accent-2:#C79200; --accent-soft:rgba(0,158,80,0.12); } /* ════════ TYPEFACES (trainer-selectable) ════════ */ :root, html[data-font="jakarta"] { --font-family:'Plus Jakarta Sans', system-ui, sans-serif; --font-display:'Plus Jakarta Sans', system-ui, sans-serif; } html[data-font="sora"] { --font-family:'Sora', system-ui, sans-serif; --font-display:'Sora', system-ui, sans-serif; } html[data-font="fraunces"] { --font-family:'Plus Jakarta Sans', system-ui, sans-serif; --font-display:'Fraunces', Georgia, serif; } html[data-font="mono"] { --font-family:'Space Mono', ui-monospace, monospace; --font-display:'Space Mono', ui-monospace, monospace; } html[data-font="oswald"] { --font-family:'Plus Jakarta Sans', system-ui, sans-serif; --font-display:'Oswald', system-ui, sans-serif; } html[data-font="bricolage"]{ --font-family:'Plus Jakarta Sans', system-ui, sans-serif; --font-display:'Bricolage Grotesque', system-ui, sans-serif; } /* ════════ LEGACY ALIASES ════════ Existing component rules reference these older names; map them onto the new token system so the whole app re-themes without rewriting every rule. */ :root, html { --surface: var(--surface-1); --surface2: var(--surface-2); --surface3: var(--surface-3); --border: var(--n-border); --border-strong: var(--n-border-strong); --green: var(--accent); --green-text: var(--accent); --green-dim: var(--accent-soft); --green-border: var(--accent-soft); --red: var(--danger); --red-dim: var(--danger-soft); --gold: var(--accent-2); --blue: var(--info); } /* ── HIGH CONTRAST MODE ── (toggled via data-contrast="high" on ) */ html[data-contrast="high"] { --n-border:rgba(255,255,255,0.30); --n-border-strong:rgba(255,255,255,0.45); --text-muted:var(--text); } html[data-mode="light"][data-contrast="high"] { --n-border:rgba(16,24,40,0.35); --n-border-strong:rgba(16,24,40,0.55); } /* ── TEXT SIZE SCALE ── (set via data-textsize on ) */ html[data-textsize="large"] { --font-scale: 1.15; } html[data-textsize="xl"] { --font-scale: 1.30; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width:4px; height:4px; } ::-webkit-scrollbar-track { background:var(--surface); } ::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:2px; } /* ── NAV ── */ .nav, .client-nav { display:flex; align-items:center; justify-content:space-between; padding:0 1.25rem; height:var(--nav-h); border-bottom:1px solid var(--green-border); background:var(--bg); position:sticky; top:0; z-index:200; } .nav-brand { display:flex; flex-direction:column; line-height:1; } .nav-name { font-weight:700; font-size:1rem; letter-spacing:0.04em; color:var(--green); } .nav-sub { font-size:0.76rem; letter-spacing:0.14em; color:var(--text-dim); text-transform:uppercase; margin-top:0.2rem; } .nav-tag { font-size:0.70rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; background:var(--green-dim); color:var(--green); border:1px solid var(--green-border); padding:0.2rem 0.55rem; border-radius:var(--radius-sm); } .nav-lock-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.8rem; width:28px; height:28px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; } .nav-lock-btn:hover { border-color:var(--border-strong); color:var(--text); } /* ── PAGES ── */ .page, .cpage { display:none; padding:1.25rem; padding-bottom:2rem; animation:fadeIn 0.2s ease; } .page.active, .cpage.active { display:block; } .cpage { padding-bottom:calc(var(--bottom-h) + 1.5rem); } @keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} } /* ── PAGE HEADERS ── */ .page-header { margin-bottom:1.25rem; } .page-title { font-weight:700; font-size:1.5rem; letter-spacing:0.05em; line-height:1; } .accent { color:var(--green); } .green-bar { width:2rem; height:2px; background:var(--green); margin:0.5rem 0 0.85rem; } .page-subtitle { font-size:0.82rem; color:var(--text-dim); letter-spacing:0.06em; text-transform:uppercase; } .section-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:var(--green); margin-bottom:0.7rem; padding-bottom:0.35rem; border-bottom:1px solid var(--green-border); } .back-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.82rem; font-weight:700; letter-spacing:0.06em; padding:0.3rem 0.65rem; transition:all 0.15s; } .back-btn:hover { border-color:var(--green-border); color:var(--green); } /* ── BOTTOM NAV ── */ .bottom-nav { display:flex; position:fixed; bottom:0; left:0; right:0; height:var(--bottom-h); background:var(--bg); border-top:1px solid var(--green-border); z-index:200; align-items:stretch; } .cnav-btn { flex:1; background:none; border:none; color:var(--text-dim); font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.3rem; transition:color 0.15s; padding-bottom:env(safe-area-inset-bottom,0); } .cnav-btn.active { color:var(--green); } /* ── STAT CARDS ── */ .stats-row { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-bottom:1.25rem; } .stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.9rem; position:relative; overflow:hidden; } .stat-card::before { content:''; position:absolute; top:0;left:0; width:2px; height:100%; background:var(--green); } .stat-num { font-weight:700; font-size:1.8rem; letter-spacing:0.02em; color:var(--green); line-height:1; } .stat-label { font-size:0.70rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.12em; margin-top:0.3rem; } /* ── BADGES ── */ .badge { font-size:0.70rem; font-weight:700; padding:0.15rem 0.45rem; border-radius:var(--radius-sm); letter-spacing:0.08em; white-space:nowrap; text-transform:uppercase; } .badge-active { background:rgba(0,245,122,0.1); color:var(--green); border:1px solid var(--green-border); } .badge-new { background:rgba(102,170,255,0.1); color:var(--blue); border:1px solid rgba(102,170,255,0.25); } .badge-attention { background:rgba(255,209,102,0.1); color:var(--gold); border:1px solid rgba(255,209,102,0.25); } .badge-dim { background:var(--surface3); color:var(--text-dim); border:1px solid var(--border); } /* ── BUTTONS ── */ .btn-primary { background:var(--green); border:none; border-radius:var(--radius-sm); color:var(--bg); font-size:0.82rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.65rem 1.1rem; transition:opacity 0.15s; } .btn-primary:hover { opacity:0.85; } .btn-outline { background:none; border:1px solid var(--green-border); border-radius:var(--radius-sm); color:var(--green); font-size:0.82rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.65rem 1.1rem; transition:all 0.15s; } .btn-outline:hover { background:var(--green-dim); } .btn-danger { background:none; border:1px solid rgba(255,68,68,0.3); border-radius:var(--radius-sm); color:var(--red); font-size:0.82rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.65rem 1.1rem; transition:all 0.15s; } .btn-danger:hover { background:var(--red-dim); } .btn-row { display:flex; gap:0.55rem; margin-top:0.75rem; flex-wrap:wrap; } /* ── FORM ELEMENTS ── */ .builder-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.95rem; margin-bottom:0.8rem; } .form-group { margin-bottom:0.8rem; } .form-label { font-size:0.70rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-dim); display:block; margin-bottom:0.35rem; } .form-input, .form-select, .form-textarea { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:0.82rem; padding:0.55rem 0.75rem; transition:border-color 0.15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--green-border); } .form-select { appearance:none; } .form-textarea { resize:vertical; min-height:72px; line-height:1.6; } .form-input::placeholder, .form-textarea::placeholder { color:var(--text-dim); } .form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; } .form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.4rem; } .form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.4rem; } /* ── EXERCISE CARDS ── */ .exercise-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:0.55rem; overflow:hidden; transition:border-color 0.15s; } .exercise-card.ex-done { border-color:rgba(0,245,122,0.35); background:rgba(0,245,122,0.02); } .ex-header { display:flex; align-items:center; padding:0.75rem 0.85rem; gap:0.7rem; cursor:pointer; user-select:none; } .ex-check { width:24px; height:24px; border-radius:var(--radius-sm); border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; cursor:pointer; } .ex-check.checked { background:var(--green); border-color:var(--green); } .ex-check-inner { font-size:0.9rem; color:var(--bg); font-weight:700; opacity:0; } .ex-check.checked .ex-check-inner { opacity:1; } .ex-info { flex:1; min-width:0; } .ex-name { font-size:0.78rem; font-weight:700; letter-spacing:0.02em; } .exercise-card.ex-done .ex-name { color:var(--text-dim); } .ex-spec { font-size:0.80rem; color:var(--text-dim); margin-top:0.15rem; letter-spacing:0.03em; } .ex-equip-chip { font-size:0.70rem; font-weight:700; background:rgba(255,209,102,0.07); color:var(--gold); border:1px solid rgba(255,209,102,0.18); border-radius:var(--radius-sm); padding:0.1rem 0.4rem; display:inline-block; margin-top:0.22rem; letter-spacing:0.04em; } .ex-expand { font-size:0.80rem; color:var(--text-dim); transition:transform 0.15s; font-weight:700; } .ex-expand.open { transform:rotate(180deg); } .ex-details { display:none; padding:0 0.85rem 0.85rem; border-top:1px solid var(--border); } .ex-details.show { display:block; } .ex-detail-label { font-size:0.70rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--green); margin-top:0.85rem; margin-bottom:0.35rem; } .form-tip { font-size:0.76rem; color:var(--text-muted); line-height:1.75; } .alt-exercise { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.4rem 0.65rem; margin-bottom:0.3rem; font-size:0.76rem; color:var(--text-muted); } .set-label { font-size:0.72rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.6rem; display:block; } .set-log-row { margin-bottom:0.2rem; } .log-inputs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.4rem; margin-top:0.25rem; } .log-input { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:0.80rem; font-weight:700; padding:0.42rem 0.4rem; text-align:center; width:100%; } .log-input:focus { outline:none; border-color:var(--green-border); } .log-input::placeholder { color:var(--text-dim); } .log-input-label { font-size:0.76rem; font-weight:700; color:var(--text-dim); text-align:center; margin-top:0.2rem; text-transform:uppercase; letter-spacing:0.08em; } /* ── EX GRAPHIC LINK ── */ .ex-graphic { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.65rem 0.8rem; margin-top:0.75rem; display:flex; align-items:center; gap:0.7rem; transition:border-color 0.15s; } .ex-graphic:hover { border-color:var(--green-border); } .ex-graphic-thumb { width:44px; height:44px; border-radius:var(--radius-sm); background:var(--surface3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ex-graphic-text { flex:1; min-width:0; } .ex-graphic-label { font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); } .ex-graphic-name { font-size:0.80rem; font-weight:700; margin-top:0.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ex-graphic-source { font-size:0.72rem; color:var(--green); margin-top:0.1rem; letter-spacing:0.04em; } /* ── EQUIPMENT BANNER ── */ .equipment-banner { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.8rem 0.9rem; margin-bottom:0.9rem; } .equipment-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--gold); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.4rem; } .equipment-list { display:flex; flex-wrap:wrap; gap:0.35rem; } .equip-chip { background:rgba(255,209,102,0.07); border:1px solid rgba(255,209,102,0.2); border-radius:var(--radius-sm); padding:0.18rem 0.5rem; font-size:0.80rem; font-weight:700; color:var(--gold); letter-spacing:0.04em; } /* ── WORKOUT TAGS ── */ .workout-tag-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem; } .workout-tag { font-size:0.80rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; background:var(--green-dim); color:var(--green); border:1px solid var(--green-border); padding:0.2rem 0.6rem; border-radius:var(--radius-sm); } .rest-tag { font-size:0.80rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; background:rgba(102,170,255,0.08); color:var(--blue); border:1px solid rgba(102,170,255,0.2); padding:0.2rem 0.6rem; border-radius:var(--radius-sm); } .rest-day-card { background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-md); padding:2rem 1rem; text-align:center; color:var(--text-muted); font-size:0.80rem; line-height:1.8; margin-top:0.75rem; } /* ── COMPLETE WORKOUT BTN ── */ .complete-workout-btn { width:100%; background:var(--green); border:none; border-radius:var(--radius-md); color:var(--bg); font-size:0.82rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.9rem; margin-top:1rem; transition:opacity 0.15s; } .complete-workout-btn:hover { opacity:0.85; } .complete-workout-btn:disabled { opacity:0.5; cursor:default; } /* ── LIBRARY ── */ .library-filter { display:flex; gap:0.3rem; margin-bottom:0.9rem; overflow-x:auto; padding-bottom:0.15rem; scrollbar-width:none; } .library-filter::-webkit-scrollbar { display:none; } .filter-chip { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.5rem 0.7rem; min-height:40px; white-space:nowrap; transition:all 0.15s; } .filter-chip.active { background:var(--green-dim); border-color:var(--green-border); color:var(--green); } .filter-chip:hover:not(.active) { border-color:var(--border-strong); color:var(--text); } .lib-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.85rem 0.9rem; margin-bottom:0.5rem; transition:all 0.15s; } .lib-card:hover { background:var(--surface2); border-color:var(--border-strong); } .lib-name { font-size:0.8rem; font-weight:700; letter-spacing:0.02em; } .lib-tags { display:flex; gap:0.3rem; flex-wrap:wrap; margin-top:0.4rem; } .lib-tag { font-size:0.70rem; font-weight:700; background:var(--surface3); color:var(--text-dim); border-radius:var(--radius-sm); padding:0.12rem 0.4rem; letter-spacing:0.05em; text-transform:uppercase; } .lib-tag.muscle { background:rgba(102,170,255,0.08); color:var(--blue); } .lib-tag.equipment { background:rgba(255,209,102,0.07); color:var(--gold); } .lib-desc { font-size:0.76rem; color:var(--text-muted); margin-top:0.4rem; line-height:1.65; } .lib-graphic-link { display:inline-flex; align-items:center; gap:0.3rem; margin-top:0.55rem; font-size:0.80rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--green); border:1px solid var(--green-border); border-radius:var(--radius-sm); padding:0.22rem 0.55rem; transition:background 0.15s; } .lib-graphic-link:hover { background:var(--green-dim); } /* ── PORTAL HEADER ── */ .portal-header { background:var(--surface); border:1px solid var(--green-border); border-radius:var(--radius-md); padding:1.1rem; margin-bottom:1.1rem; position:relative; overflow:hidden; } .portal-header::after { content:''; position:absolute; bottom:-8px; right:-2px; font-weight:700; font-size:2.5rem; letter-spacing:0.08em; color:rgba(0,245,122,0.04); pointer-events:none; white-space:nowrap; } html[data-combo="diesel"] .portal-header::after { content:'DIESEL_JOSH'; } .welcome-text { font-size:0.70rem; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:var(--text-dim); } .portal-client-name { font-weight:700; font-size:1.5rem; letter-spacing:0.04em; line-height:1; margin-top:0.2rem; color:var(--green); } .portal-goal { font-size:0.82rem; color:var(--text-muted); margin-top:0.25rem; letter-spacing:0.04em; } .streak-row { display:flex; align-items:center; gap:0.5rem; margin-top:0.85rem; padding-top:0.85rem; border-top:1px solid var(--border); } .streak-text { font-size:0.82rem; color:var(--text-muted); } .streak-num { font-weight:700; color:var(--green); } /* ── FEEDBACK BANNER ── */ .feedback-banner { background:var(--green-dim); border:1px solid var(--green-border); border-radius:var(--radius-md); padding:0.85rem 0.9rem; margin-bottom:1rem; } .fb-label { font-size:0.70rem; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--green); margin-bottom:0.35rem; } .fb-text { font-size:0.78rem; color:var(--text-muted); line-height:1.7; } .fb-from { font-size:0.72rem; color:var(--text-dim); margin-top:0.4rem; } /* ── DAY TABS ── */ .day-tabs { display:flex; gap:0.3rem; margin-bottom:1rem; overflow-x:auto; padding-bottom:0.15rem; scrollbar-width:none; } .day-tabs::-webkit-scrollbar { display:none; } .day-tab { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.45rem 0.5rem; cursor:pointer; text-align:center; min-width:40px; flex-shrink:0; user-select:none; transition:all 0.15s; } .day-tab.active { background:var(--green-dim); border-color:var(--green-border); } .day-tab.done { border-color:rgba(0,245,122,0.4); background:rgba(0,245,122,0.04); } .d-name { font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); } .day-tab.active .d-name,.day-tab.active .d-num { color:var(--green); } .day-tab.done .d-name,.day-tab.done .d-num { color:var(--green); opacity:0.7; } .d-num { font-size:0.85rem; font-weight:700; margin-top:0.1rem; } .d-dot { width:3px; height:3px; border-radius:50%; margin:0.2rem auto 0; background:transparent; } .day-tab.done .d-dot,.day-tab.active .d-dot { background:var(--green); } /* ── PROGRESS ── */ .progress-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-bottom:1rem; } .progress-stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.8rem; position:relative; overflow:hidden; } .progress-stat::before { content:''; position:absolute; top:0;left:0; width:2px; height:100%; background:var(--green); opacity:0.5; } .progress-stat-num { font-weight:700; font-size:1.7rem; letter-spacing:0.02em; line-height:1; } .progress-stat-num.green { color:var(--green); } .progress-stat-num.gold { color:var(--gold); } .progress-stat-num.blue { color:var(--blue); } .progress-stat-label { font-size:0.76rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; margin-top:0.2rem; } .progress-chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; margin-bottom:1rem; } .chart-title { font-size:0.80rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; } .chart-subtitle { font-size:0.72rem; color:var(--text-dim); margin-bottom:0.85rem; } .chart-wrap { height:150px; position:relative; } .pr-row { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.7rem 0.9rem; display:flex; align-items:center; justify-content:space-between; margin-bottom:0.45rem; } .pr-name { font-size:0.82rem; font-weight:700; } .pr-sub { font-size:0.70rem; color:var(--text-dim); text-transform:uppercase; } .pr-val { font-weight:700; font-size:1.1rem; color:var(--green); } .pr-date { font-size:0.70rem; color:var(--text-dim); text-align:right; margin-top:0.1rem; } /* ── NUTRITION ── */ .macro-row { display:flex; align-items:center; gap:0.65rem; margin-bottom:0.5rem; } .macro-name { font-size:0.80rem; font-weight:700; color:var(--text-dim); width:55px; flex-shrink:0; text-transform:uppercase; } .macro-bar-bg { flex:1; height:3px; background:var(--surface3); border-radius:100px; overflow:hidden; } .macro-bar-fill { height:100%; border-radius:100px; } .macro-val { font-size:0.80rem; font-weight:700; color:var(--text-dim); width:52px; text-align:right; flex-shrink:0; } .meal-card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.7rem 0.85rem; margin-bottom:0.5rem; } .meal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem; } .meal-time { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--green); } .meal-cal { font-size:0.80rem; font-weight:700; color:var(--text-muted); } .meal-item { font-size:0.76rem; color:var(--text-muted); display:flex; justify-content:space-between; padding:0.1rem 0; } .meal-note { font-size:0.82rem; color:var(--text-dim); margin-top:0.4rem; border-top:1px solid var(--border); padding-top:0.4rem; line-height:1.65; } /* ── PORTAL LINK ── */ .link-card { background:var(--green-dim); border:1px solid var(--green-border); border-radius:var(--radius-sm); padding:0.85rem; } .link-url { font-size:0.82rem; font-weight:700; color:var(--green); word-break:break-all; line-height:1.6; } .link-hint { font-size:0.72rem; color:var(--text-dim); margin-top:0.5rem; line-height:1.7; text-transform:uppercase; letter-spacing:0.04em; } .copy-btn { background:var(--green); border:none; border-radius:var(--radius-sm); color:var(--bg); font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.3rem 0.7rem; margin-top:0.55rem; transition:opacity 0.15s; } .copy-btn:hover { opacity:0.85; } /* ── TOAST ── */ .toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--green); border-radius:var(--radius-sm); padding:0.55rem 1rem; font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--bg); opacity:0; transition:all 0.25s; pointer-events:none; white-space:nowrap; z-index:999; } .toast.visible { opacity:1; transform:translateX(-50%) translateY(0); } .toast.toast-error { background:var(--red); color:white; } .toast.toast-success { background:var(--green); } /* ── SPINNER ── */ .spinner-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.5rem 1rem; gap:0.75rem; } .spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--green); border-radius:50%; animation:spin 0.7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .spinner-msg { font-size:0.82rem; color:var(--text-dim); letter-spacing:0.06em; text-transform:uppercase; } /* ── EMPTY / ERROR STATES ── */ .empty-state { text-align:center; padding:2rem 1rem; font-size:0.76rem; color:var(--text-dim); line-height:1.8; } .error-state { text-align:center; padding:1.5rem; font-size:0.76rem; color:var(--red); background:var(--red-dim); border:1px solid rgba(255,68,68,0.2); border-radius:var(--radius-sm); } /* ══════════════════════════════════════ V2 ADDITIONS — UX Fixes ══════════════════════════════════════ */ /* ── REST TIMER BAR ── */ .rest-timer-bar { position:fixed; bottom:var(--bottom-h); left:0; right:0; background:var(--surface); border-top:1px solid var(--green-border); padding:0.65rem 1.25rem; display:flex; align-items:center; gap:0.75rem; z-index:250; animation:slideUp 0.2s ease; } @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} } .timer-label { font-size:0.80rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:0.12em; } .timer-time { font-size:1.2rem; font-weight:700; color:var(--text); letter-spacing:0.06em; flex:1; } .timer-skip { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.80rem; font-weight:700; padding:0.3rem 0.7rem; letter-spacing:0.06em; text-transform:uppercase; transition:all 0.15s; } .timer-skip:hover { border-color:var(--green-border); color:var(--green); } /* ── EXERCISE IMAGES INLINE ── */ .ex-images-row { display:flex; gap:0.5rem; margin-top:0.75rem; } .ex-img { width:50%; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); aspect-ratio:4/3; object-fit:cover; } /* ── LAST SESSION ── */ .last-session-row { display:flex; gap:0.35rem; flex-wrap:wrap; } .last-set-pill { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.2rem 0.5rem; font-size:0.72rem; color:var(--text-dim); } /* ── USE LAST BUTTON ── */ .set-log-header { display:flex; align-items:center; justify-content:space-between; } .use-last-btn { background:none; border:1px solid var(--green-border); border-radius:var(--radius-sm); color:var(--green); font-size:0.76rem; font-weight:700; padding:0.15rem 0.45rem; letter-spacing:0.04em; text-transform:uppercase; transition:all 0.15s; } .use-last-btn:hover { background:var(--green-dim); } .use-last-btn:disabled { color:var(--text-dim); border-color:var(--border); background:none; } /* ── FEEDBACK HISTORY ── */ .fb-history-btn { background:none; border:1px solid var(--green-border); border-radius:var(--radius-sm); color:var(--green); font-size:0.72rem; font-weight:700; padding:0.25rem 0.6rem; letter-spacing:0.04em; text-transform:uppercase; margin-top:0.6rem; transition:all 0.15s; } .fb-history-btn:hover { background:var(--green-dim); } .fb-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:600; display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity 0.2s; } .fb-overlay.open { opacity:1; pointer-events:all; } .fb-modal { background:var(--surface); border:1px solid var(--green-border); border-bottom:none; border-radius:var(--radius-md) var(--radius-md) 0 0; width:100%; max-height:70vh; display:flex; flex-direction:column; transform:translateY(100%); transition:transform 0.25s cubic-bezier(0.32,0.72,0,1); } .fb-overlay.open .fb-modal { transform:translateY(0); } .fb-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem 0.75rem; border-bottom:1px solid var(--border); flex-shrink:0; } .fb-modal-title { font-size:0.80rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--green); } .fb-modal-close { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.78rem; font-weight:700; width:28px; height:28px; display:flex; align-items:center; justify-content:center; } .fb-modal-body { overflow-y:auto; padding:1rem 1.1rem 1.5rem; } .fb-history-item { padding:0.75rem 0; border-bottom:1px solid var(--border); } .fb-history-item:last-child { border-bottom:none; } .fb-history-date { font-size:0.72rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem; } .fb-history-msg { font-size:0.80rem; color:var(--text-muted); line-height:1.7; } /* ── EMPTY PROGRAM STATE ── */ .empty-program { background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-md); padding:2.5rem 1.5rem; text-align:center; margin-top:1rem; } .empty-program-icon { font-size:2rem; color:var(--text-dim); margin-bottom:0.75rem; } .empty-program-text { font-size:0.78rem; color:var(--text-muted); line-height:1.8; } .empty-program-email { font-size:0.82rem; color:var(--text-dim); margin-top:0.75rem; } .empty-program-email a { color:var(--green); } /* ── LIBRARY V2 ── */ .lib-card-top { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; } .lib-in-program { font-size:0.76rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:0.08em; background:var(--green-dim); border:1px solid var(--green-border); border-radius:var(--radius-sm); padding:0.12rem 0.45rem; white-space:nowrap; flex-shrink:0; } .lib-tag.level { background:rgba(255,255,255,0.04); color:var(--text-dim); } .lib-instructions { margin-top:0.5rem; } .lib-step { font-size:0.82rem; color:var(--text-muted); line-height:1.7; padding:0.1rem 0; } .lib-step-num { color:var(--green); font-weight:700; margin-right:0.3rem; } .lib-images-row { display:flex; gap:0.5rem; margin-top:0.6rem; } .lib-img { width:50%; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); aspect-ratio:4/3; object-fit:cover; } /* ── PICKER V2: images in picker rows ── */ .picker-ex-row img.picker-thumb { width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--border); object-fit:cover; flex-shrink:0; background:var(--surface3); } /* ── TRAINER: exercise images in builder preview ── */ .ex-builder-img { width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--border); object-fit:cover; flex-shrink:0; background:var(--surface3); } /* ══════════════════════════════════════ V3 ADDITIONS ══════════════════════════════════════ */ /* ── ROUTINE PICKER ── */ .routine-picker { display:flex; gap:0.4rem; margin-bottom:1rem; overflow-x:auto; scrollbar-width:none; padding-bottom:0.15rem; } .routine-picker::-webkit-scrollbar { display:none; } .routine-pick-btn { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.65rem 0.85rem; cursor:pointer; text-align:left; min-width:120px; flex-shrink:0; transition:all 0.15s; font-family:var(--font-family); } .routine-pick-btn.active { background:var(--green-dim); border-color:var(--green-border); } .routine-pick-btn:hover:not(.active) { border-color:var(--border-strong); } .rpick-name { font-size:0.80rem; font-weight:700; letter-spacing:0.02em; color:var(--text); } .routine-pick-btn.active .rpick-name { color:var(--green); } .rpick-meta { font-size:0.70rem; color:var(--text-dim); margin-top:0.2rem; } /* ── SWAP EXERCISE ── */ .swap-list { display:flex; flex-direction:column; gap:0.35rem; } .swap-option { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.55rem 0.75rem; transition:border-color 0.15s; } .swap-option:hover { border-color:var(--border-strong); } .swap-option-name { font-size:0.82rem; font-weight:700; } .swap-option-meta { font-size:0.72rem; color:var(--text-dim); margin-top:0.1rem; } .swap-btn { background:none; border:1px solid var(--green-border); border-radius:var(--radius-sm); color:var(--green); font-family:var(--font-family); font-size:0.72rem; font-weight:700; padding:0.25rem 0.55rem; letter-spacing:0.06em; text-transform:uppercase; transition:all 0.15s; flex-shrink:0; white-space:nowrap; } .swap-btn:hover { background:var(--green-dim); } .swap-badge { font-size:0.76rem; font-weight:700; color:var(--gold); background:rgba(255,209,102,0.1); border:1px solid rgba(255,209,102,0.25); border-radius:var(--radius-sm); padding:0.08rem 0.35rem; letter-spacing:0.05em; text-transform:uppercase; vertical-align:middle; margin-left:0.35rem; } .exercise-card.swapped { border-color:rgba(255,209,102,0.3); } .undo-swap-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-family:var(--font-family); font-size:0.80rem; font-weight:700; padding:0.35rem 0.65rem; margin-top:0.65rem; display:block; width:100%; text-align:center; transition:all 0.15s; letter-spacing:0.04em; } .undo-swap-btn:hover { border-color:var(--green-border); color:var(--green); } /* ── TRAINER NOTE INLINE (client sees per-exercise) ── */ .trainer-note-inline { background:rgba(0,245,122,0.06); border:1px solid var(--green-border); border-radius:var(--radius-sm); padding:0.5rem 0.7rem; margin-top:0.75rem; font-size:0.76rem; color:var(--text-muted); line-height:1.6; } .trainer-note-icon { margin-right:0.25rem; } /* ── CLIENT NOTE TO COACH ── */ .client-note-section { margin-top:1rem; } .client-note-textarea { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-family); font-size:0.80rem; padding:0.6rem 0.8rem; resize:vertical; min-height:60px; line-height:1.6; margin-top:0.35rem; transition:border-color 0.15s; } .client-note-textarea:focus { outline:none; border-color:var(--green-border); } .client-note-textarea::placeholder { color:var(--text-dim); } /* ── BODY METRICS ── */ .metrics-list { display:flex; flex-direction:column; gap:0.5rem; } .metric-row { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.75rem 0.9rem; } .metric-date { font-size:0.72rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.35rem; } .metric-vals { display:flex; flex-wrap:wrap; gap:0.3rem; } .metric-pill { font-size:0.82rem; color:var(--text-muted); background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.15rem 0.45rem; } .metric-pill strong { color:var(--text); } .metric-notes { font-size:0.82rem; color:var(--text-dim); margin-top:0.35rem; } /* ── TRAINER: drag handle ── */ .drag-handle { cursor:grab; color:var(--text-dim); font-size:0.85rem; line-height:1; padding:0.2rem 0; flex-shrink:0; user-select:none; touch-action:none; } .drag-handle:active { cursor:grabbing; } .ex-builder-row.dragging { opacity:0.4; border-style:dashed; } .ex-builder-row.drag-over { border-color:var(--green-border); background:var(--green-dim); } /* ── TRAINER: exercise notes input ── */ .ex-note-row { margin-top:0.45rem; } .ex-note-input { width:100%; background:var(--surface3); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); font-family:var(--font-family); font-size:0.82rem; font-weight:400; padding:0.3rem 0.5rem; transition:border-color 0.15s; } .ex-note-input:focus { outline:none; border-color:var(--green-border); color:var(--text); } .ex-note-input::placeholder { color:var(--text-dim); } /* ── TRAINER: client note + substitution banners in reviews ── */ .client-note-banner { background:rgba(255,209,102,0.06); border:1px solid rgba(255,209,102,0.2); border-radius:var(--radius-sm); padding:0.65rem 0.8rem; margin-bottom:0.65rem; } .client-note-label { font-size:0.70rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:0.25rem; } .client-note-msg { font-size:0.80rem; color:var(--text-muted); line-height:1.7; } .subs-banner { background:rgba(255,209,102,0.04); border:1px solid rgba(255,209,102,0.15); border-radius:var(--radius-sm); padding:0.65rem 0.8rem; margin-bottom:0.65rem; } .subs-label { font-size:0.70rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:0.4rem; } .sub-row { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; padding:0.3rem 0; border-bottom:1px solid var(--border); } .sub-row:last-child { border-bottom:none; } .sub-original { font-size:0.76rem; color:var(--text-dim); text-decoration:line-through; } .sub-arrow { font-size:0.82rem; color:var(--text-dim); } .sub-replacement { font-size:0.76rem; font-weight:700; color:var(--text); } .sub-reason { font-size:0.80rem; color:var(--text-dim); width:100%; margin-top:0.15rem; } /* ── TRAINER: exercise builder image ── */ .ex-builder-img { width:36px; height:36px; border-radius:var(--radius-sm); border:1px solid var(--border); object-fit:cover; flex-shrink:0; background:var(--surface3); margin-top:0.15rem; } /* ══════════════════════════════════════ V4 — PROFILE PAGE + COLLAPSIBLE + DELTAS ══════════════════════════════════════ */ /* ── Collapsible sections ── */ .profile-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:0.55rem; overflow:hidden; } .profile-section-header { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0.9rem; cursor:pointer; transition:background 0.15s; user-select:none; font-size:0.85rem; font-weight:700; } .profile-section-header:hover { background:var(--surface2); } .collapse-count { font-size:0.78rem; font-weight:400; color:var(--text-muted); } .collapse-arrow { font-size:0.78rem; color:var(--text-muted); transition:transform 0.2s; } .collapse-arrow.open { transform:rotate(180deg); } .profile-section-body { padding:0 0.9rem 0.85rem; } .profile-section-body.collapsed { display:none; } /* ── Profile header card ── */ .profile-header-card { background:var(--surface); border:1px solid var(--green-border); border-radius:var(--radius-md); padding:1.1rem; margin-bottom:1.25rem; position:relative; overflow:hidden; } .profile-header-card::after { content:''; position:absolute; bottom:-8px; right:-2px; font-weight:700; font-size:2.2rem; letter-spacing:0.08em; color:rgba(0,245,122,0.04); pointer-events:none; } html[data-combo="diesel"] .profile-header-card::after { content:'DIESEL_JOSH'; } .profile-name { font-size:1.3rem; font-weight:700; color:var(--green); letter-spacing:0.04em; } .profile-detail { font-size:0.82rem; color:var(--text); margin-top:0.25rem; } .profile-actions { display:flex; gap:0.5rem; margin-top:0.85rem; flex-wrap:wrap; } /* ── Profile exercise rows ── */ .profile-ex-row { padding:0.5rem 0; border-bottom:1px solid var(--border); } .profile-ex-row:last-child { border-bottom:none; } .profile-ex-name { font-size:0.8rem; font-weight:700; } .profile-ex-spec { font-size:0.80rem; color:var(--text-muted); margin-top:0.15rem; } .profile-ex-note { font-size:0.78rem; color:var(--green); margin-top:0.2rem; } /* ── Profile workout log ── */ .profile-totals-row { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-bottom:1rem; } .profile-total { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.8rem; text-align:center; position:relative; overflow:hidden; } .profile-total::before { content:''; position:absolute; top:0; left:0; width:2px; height:100%; background:var(--green); } .profile-total-num { font-size:1.3rem; font-weight:700; color:var(--green); line-height:1; } .profile-total-label { font-size:0.80rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.25rem; } .profile-log-meta { font-size:0.76rem; color:var(--text-muted); margin-top:0.15rem; } .profile-log-exercise { padding:0.45rem 0; border-bottom:1px solid var(--border); } .profile-log-exercise:last-child { border-bottom:none; } .profile-log-exname { font-size:0.78rem; font-weight:700; margin-bottom:0.3rem; } /* ── Body metric deltas ── */ .deltas-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:0.85rem; } .delta-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.65rem 0.75rem; } .delta-name { font-size:0.76rem; font-weight:700; color:var(--text); letter-spacing:0.04em; margin-bottom:0.3rem; } .delta-from-start { font-size:0.78rem; font-weight:700; } .delta-from-start.up { color:var(--green); } .delta-from-start.down { color:var(--red); } .delta-from-last { font-size:0.82rem; color:var(--text-muted); margin-top:0.15rem; } .delta-from-last.up { color:rgba(0,245,122,0.6); } .delta-from-last.down { color:rgba(255,68,68,0.6); } /* ── Notes timeline ── */ .note-timeline-item { padding:0.75rem 0; border-bottom:1px solid var(--border); } .note-timeline-item:last-child { border-bottom:none; } .note-timeline-item.coach { border-left:2px solid var(--green); padding-left:0.75rem; } .note-timeline-item.client { border-left:2px solid var(--gold); padding-left:0.75rem; } .note-timeline-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.3rem; } .note-timeline-who { font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; } .note-timeline-item.coach .note-timeline-who { color:var(--green); } .note-timeline-item.client .note-timeline-who { color:var(--gold); } .note-timeline-date { font-size:0.82rem; color:var(--text-muted); } .note-timeline-msg { font-size:0.78rem; color:var(--text); line-height:1.7; } .note-workout-context { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.45rem 0.65rem; margin-top:0.45rem; } .note-ctx-label { font-size:0.76rem; font-weight:700; } .note-ctx-detail { font-size:0.82rem; color:var(--text-muted); margin-top:0.1rem; } /* ── MuscleWiki link button ── */ .wiki-link-btn { display:flex; align-items:center; gap:0.45rem; background:var(--green-dim); border:1px solid var(--green-border); border-radius:var(--radius-sm); padding:0.55rem 0.8rem; margin-top:0.75rem; color:var(--green); font-size:0.80rem; font-weight:700; letter-spacing:0.04em; text-decoration:none; transition:all 0.15s; } .wiki-link-btn:hover { background:rgba(0,245,122,0.15); } /* ── Custom exercise section in picker ── */ .picker-custom-section { border-top:1px solid var(--border); padding:0.85rem 1.1rem 1.5rem; flex-shrink:0; } .picker-custom-toggle { font-size:0.80rem; font-weight:700; color:var(--green); cursor:pointer; text-transform:uppercase; letter-spacing:0.06em; transition:color 0.15s; padding:0.3rem 0; } .picker-custom-toggle:hover { color:var(--text); } .picker-custom-form { margin-top:0.75rem; } .picker-custom-form .form-group { margin-bottom:0.6rem; } .picker-custom-form .form-textarea { min-height:50px; } /* ── Library subcategory + compound tags ── */ .lib-tag.sub { background:rgba(0,245,122,0.06); color:var(--green); } .lib-tag.compound { background:rgba(255,209,102,0.08); color:var(--gold); border-color:rgba(255,209,102,0.2); } .lib-count { font-size:0.82rem; color:var(--text-muted); margin-bottom:0.75rem; letter-spacing:0.04em; } /* ══════════════════════════════════════ PHASE 0 — Dashboard, Timeline, Effort Slider ══════════════════════════════════════ */ /* ── Client Dashboard hero ── */ .dash-hero { background:var(--surface); border:1px solid var(--green-border); border-radius:var(--radius-md); padding:1.25rem 1.1rem; margin-bottom:1rem; position:relative; overflow:hidden; } .dash-hero::after { content:''; position:absolute; top:0; right:0; width:90px; height:100%; background:linear-gradient(90deg, transparent, rgba(0,245,122,0.04)); } .dash-greeting { font-size:0.8rem; color:var(--text-muted); letter-spacing:0.02em; } .dash-name { font-size:1.6rem; font-weight:700; color:var(--green); letter-spacing:0.02em; margin-top:0.15rem; } .dash-stats-row { display:flex; gap:1.5rem; margin-top:1rem; } .dash-stat { display:flex; flex-direction:column; } .dash-stat-num { font-size:1.4rem; font-weight:700; color:var(--text); line-height:1; } .dash-stat-label { font-size:0.82rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.25rem; } .dash-cta { width:100%; background:var(--green); color:var(--accent-contrast); border:none; border-radius:var(--radius-md); padding:0.9rem; font-size:0.85rem; font-weight:700; letter-spacing:0.04em; display:flex; align-items:center; justify-content:center; gap:0.5rem; transition:opacity 0.15s; font-family:var(--font-family); } .dash-cta:hover { opacity:0.9; } /* ── Activity Timeline ── */ .timeline { display:flex; flex-direction:column; gap:0; position:relative; } .timeline::before { content:''; position:absolute; left:13px; top:8px; bottom:8px; width:1px; background:var(--border); z-index:0; } .tl-item { display:flex; gap:0.75rem; padding:0.65rem 0; position:relative; z-index:1; } .tl-icon { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--surface2); border:1px solid var(--border); color:var(--text-muted); } .tl-workout .tl-icon { color:var(--green); border-color:var(--green-border); background:var(--green-dim); } .tl-feedback .tl-icon { color:var(--gold); border-color:rgba(255,209,102,0.3); } .tl-achievement .tl-icon { color:var(--gold); border-color:var(--gold); background:rgba(255,209,102,0.1); } .tl-measurement .tl-icon { color:var(--blue); border-color:rgba(96,165,250,0.3); } .tl-body { flex:1; min-width:0; } .tl-top { display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem; } .tl-title { font-size:0.78rem; font-weight:700; color:var(--text); } .tl-date { font-size:0.80rem; color:var(--text-muted); flex-shrink:0; } .tl-detail { font-size:0.80rem; color:var(--text-muted); margin-top:0.15rem; line-height:1.5; word-break:break-word; } /* ── Nav badge (unread count) ── */ .cnav-badge { position:absolute; top:2px; right:50%; transform:translateX(14px); background:var(--green); color:var(--accent-contrast); font-size:0.70rem; font-weight:700; min-width:15px; height:15px; border-radius:8px; padding:0 4px; display:flex; align-items:center; justify-content:center; } .cnav-btn { position:relative; } /* ── Effort Slider (1-5 RPE replacement) ── */ .log-inputs-2 { grid-template-columns:1fr 1fr !important; } .effort-row { margin-top:0.75rem; padding-top:0.7rem; border-top:1px solid var(--border); } .effort-label-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; } .effort-title { font-size:0.80rem; font-weight:700; color:var(--text); letter-spacing:0.02em; } .effort-value { font-size:0.78rem; font-weight:700; color:var(--green); } .effort-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:var(--surface3); outline:none; cursor:pointer; margin:0.25rem 0; } .effort-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--green); border:3px solid var(--bg); cursor:pointer; box-shadow:0 0 0 1px var(--green); } .effort-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--green); border:3px solid var(--bg); cursor:pointer; box-shadow:0 0 0 1px var(--green); } .effort-scale { display:flex; justify-content:space-between; font-size:0.70rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.15rem; } /* ══════════════════════════════════════ Unread feedback + expandable timeline ══════════════════════════════════════ */ /* ── Unread coach feedback box (dashboard) ── */ .unread-box { background:rgba(0,245,122,0.08); border:1px solid var(--green); border-radius:var(--radius-md); padding:0.9rem 1rem; margin-bottom:1rem; } .unread-header { display:flex; align-items:center; gap:0.5rem; color:var(--green); font-size:0.82rem; font-weight:700; letter-spacing:0.03em; margin-bottom:0.6rem; } .unread-msg { padding:0.5rem 0; border-top:1px solid var(--green-border); } .unread-msg:first-of-type { border-top:none; } .unread-text { font-size:0.78rem; color:var(--text); line-height:1.6; } .unread-date { font-size:0.80rem; color:var(--text-muted); margin-top:0.2rem; } /* ── Expandable timeline items ── */ .tl-item { cursor:pointer; transition:background 0.12s; border-radius:var(--radius-sm); } .tl-item:hover { background:var(--surface); } .tl-item.expanded { background:var(--surface); } .tl-summary { font-size:0.80rem; color:var(--text-muted); margin-top:0.15rem; line-height:1.5; } .tl-chevron { align-self:center; color:var(--text-muted); font-size:0.78rem; transition:transform 0.2s; flex-shrink:0; } .tl-chevron.open { transform:rotate(180deg); } .tl-expand { max-height:0; overflow:hidden; transition:max-height 0.25s ease; } .tl-expand.open { max-height:2000px; padding-top:0.6rem; } .tl-has-feedback .tl-icon { box-shadow:0 0 0 2px var(--gold); } .tl-fb-flag { font-size:0.76rem; font-weight:700; color:var(--gold); background:rgba(255,209,102,0.12); border:1px solid rgba(255,209,102,0.3); border-radius:var(--radius-sm); padding:0.05rem 0.3rem; margin-left:0.4rem; letter-spacing:0.04em; vertical-align:middle; } .tl-feedback-block { background:rgba(255,209,102,0.06); border:1px solid rgba(255,209,102,0.2); border-radius:var(--radius-sm); padding:0.55rem 0.7rem; margin-bottom:0.6rem; } .tl-fb-label { font-size:0.70rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem; } .tl-fb-msg { font-size:0.82rem; color:var(--text-muted); line-height:1.7; } .tl-ex { padding:0.4rem 0; border-bottom:1px solid var(--border); } .tl-ex:last-child { border-bottom:none; } .tl-ex-name { font-size:0.82rem; font-weight:700; color:var(--text); margin-bottom:0.25rem; } .tl-ex-sets { display:flex; flex-wrap:wrap; gap:0.25rem; } .tl-set-pill { font-size:0.80rem; color:var(--text-muted); background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.1rem 0.4rem; } .tl-metric-grid { display:flex; flex-wrap:wrap; gap:0.3rem; } .tl-metric-pill { font-size:0.82rem; color:var(--text-muted); background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.15rem 0.45rem; } /* ── Client since line (Train header) ── */ .portal-since { font-size:0.76rem; color:var(--text-muted); margin-top:0.25rem; letter-spacing:0.02em; } /* ── Trainer profile: progress totals 4-up + PRs ── */ .profile-totals-row { display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; margin-bottom:1rem; } @media (min-width:480px) { .profile-totals-row { grid-template-columns:repeat(4,1fr); } } .profile-pr-list { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.75rem 0.9rem; } .profile-pr-label { font-size:0.80rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.5rem; } .profile-pr-row { display:flex; justify-content:space-between; align-items:center; padding:0.35rem 0; border-bottom:1px solid var(--border); } .profile-pr-row:last-child { border-bottom:none; } .profile-pr-name { font-size:0.82rem; font-weight:700; } .profile-pr-val { font-size:0.82rem; color:var(--green); font-weight:700; } .profile-pr-date { font-size:0.80rem; color:var(--text-muted); font-weight:400; margin-left:0.4rem; } .profile-pr-empty { font-size:0.78rem; color:var(--text-muted); padding:0.5rem 0; } .delta-sublabel { font-size:0.82rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin:0.75rem 0 0.5rem; } /* ══════════════════════════════════════ SETTINGS PANEL + display controls ══════════════════════════════════════ */ .nav-right { display:flex; align-items:center; gap:0.6rem; } .nav-gear { background:none; border:none; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-md); transition:color 0.15s, background 0.15s; } .nav-gear:hover { color:var(--green); background:var(--surface); } .settings-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.5rem 1rem; } .settings-group { padding:1rem 0; border-bottom:1px solid var(--border); } .settings-group:last-child { border-bottom:none; } .settings-label { font-size:0.95rem; font-weight:700; color:var(--text); margin-bottom:0.2rem; } .settings-desc { font-size:0.8rem; color:var(--text-dim); margin-bottom:0.75rem; line-height:1.5; } .setting-opts { display:flex; gap:0.5rem; flex-wrap:wrap; } .setting-opt { flex:1; min-width:90px; min-height:48px; padding:0.6rem 0.9rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-muted); font-family:var(--font-family); font-size:0.85rem; font-weight:700; cursor:pointer; transition:all 0.15s; } .setting-opt:hover { border-color:var(--border-strong); } .setting-opt.active { background:var(--green-dim); border-color:var(--green); color:var(--green-text); } .setting-toggle { display:flex; align-items:center; gap:0.65rem; background:none; border:none; cursor:pointer; font-family:var(--font-family); padding:0; min-height:48px; } .setting-toggle-track { width:52px; height:30px; border-radius:15px; background:var(--surface3); border:1px solid var(--border-strong); position:relative; transition:background 0.2s; flex-shrink:0; } .setting-toggle-thumb { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--text-muted); transition:transform 0.2s, background 0.2s; } .setting-toggle.on .setting-toggle-track { background:var(--green-dim); border-color:var(--green); } .setting-toggle.on .setting-toggle-thumb { transform:translateX(22px); background:var(--green); } .setting-toggle-label { font-size:0.85rem; font-weight:700; color:var(--text); } .settings-footer { font-size:0.78rem; color:var(--text-dim); margin-top:1rem; text-align:center; line-height:1.5; } /* ── WCAG AA tap targets (min 44px for primary, 40px for inline chips) ── */ .use-last-btn, .swap-btn { min-height:40px; } .routine-pick-btn { min-height:48px; } button.send-btn, .complete-workout-btn, .btn-primary, .btn-outline { min-height:48px; } .nav-lock-btn { min-width:44px; min-height:44px; } /* ══════════════════════════════════════ B2a — Admin dashboard, freeze, delete ══════════════════════════════════════ */ .admin-wrap { max-width:720px; margin:0 auto; padding:1.25rem 1rem 3rem; } .admin-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.25rem; } .admin-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; margin-bottom:1.5rem; } @media (min-width:480px) { .admin-metrics { grid-template-columns:repeat(4,1fr); } } .admin-metric { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.9rem; text-align:center; position:relative; overflow:hidden; } .admin-metric::before { content:''; position:absolute; top:0; left:0; width:2px; height:100%; background:var(--green); } .admin-metric-num { font-size:1.5rem; font-weight:700; color:var(--green-text); line-height:1; } .admin-metric-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.3rem; } .admin-roster { display:flex; flex-direction:column; gap:0.6rem; } .admin-trainer-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.9rem 1rem; } .admin-trainer-row.frozen { border-color:rgba(255,107,107,0.4); background:var(--red-dim); } .admin-trainer-name { font-size:0.95rem; font-weight:700; color:var(--text); } .admin-trainer-email { font-size:0.78rem; color:var(--text-dim); margin-top:0.15rem; } .admin-trainer-stats { font-size:0.74rem; color:var(--text-muted); margin-top:0.35rem; } .admin-frozen-tag { font-size:0.62rem; font-weight:700; color:var(--red); background:var(--red-dim); border:1px solid rgba(255,107,107,0.4); border-radius:var(--radius-sm); padding:0.1rem 0.4rem; margin-left:0.5rem; letter-spacing:0.04em; vertical-align:middle; } .admin-freeze-btn { flex-shrink:0; min-height:44px; padding:0.5rem 1rem; background:none; border:1px solid rgba(255,107,107,0.5); border-radius:var(--radius-md); color:var(--red); font-family:var(--font-family); font-size:0.8rem; font-weight:700; cursor:pointer; transition:all 0.15s; } .admin-freeze-btn:hover { background:var(--red-dim); } .admin-freeze-btn.unfreeze { border-color:var(--green-border); color:var(--green-text); } .admin-freeze-btn.unfreeze:hover { background:var(--green-dim); } .admin-note { font-size:0.78rem; color:var(--text-dim); margin-top:1.5rem; line-height:1.6; text-align:center; } /* Delete-workout button in timeline */ .tl-delete-btn { margin-top:0.75rem; width:100%; min-height:40px; background:none; border:1px solid rgba(255,107,107,0.4); border-radius:var(--radius-sm); color:var(--red); font-family:var(--font-family); font-size:0.74rem; font-weight:700; cursor:pointer; transition:all 0.15s; } .tl-delete-btn:hover { background:var(--red-dim); } /* Pause-client button active state */ .btn-warn-active { border-color:rgba(255,107,107,0.5) !important; color:var(--red) !important; } .profile-header-card.frozen { border-color:rgba(255,107,107,0.4); } /* ══════════════════════════════════════ Phase 2.1 — Note composers, templates ══════════════════════════════════════ */ .note-composer { margin-bottom:0.5rem; } .note-composer-input { width:100%; background:var(--surface2); border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--text); font-family:var(--font-family); font-size:0.88rem; padding:0.7rem 0.85rem; resize:vertical; min-height:60px; line-height:1.6; transition:border-color 0.15s; } .note-composer-input:focus { outline:none; border-color:var(--green); } .note-composer-input::placeholder { color:var(--text-dim); } .note-composer-btn { margin-top:0.5rem; width:100%; min-height:48px; background:var(--green); color:var(--accent-contrast); border:none; border-radius:var(--radius-md); font-family:var(--font-family); font-size:0.85rem; font-weight:700; letter-spacing:0.03em; cursor:pointer; transition:opacity 0.15s; } .note-composer-btn:hover { opacity:0.9; } .note-composer-btn:disabled { opacity:0.5; cursor:default; } /* Client note block inside a workout timeline entry */ .tl-note-block { background:rgba(127,184,255,0.06); border:1px solid rgba(127,184,255,0.2); border-radius:var(--radius-sm); padding:0.55rem 0.7rem; margin-bottom:0.6rem; } .tl-note-label { font-size:0.62rem; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem; } /* Template picker modal */ .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:500; display:flex; align-items:center; justify-content:center; padding:1rem; } .modal-box { background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:1.25rem; max-width:480px; width:100%; max-height:80vh; overflow-y:auto; } .modal-title { font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:0.3rem; } .modal-sub { font-size:0.8rem; color:var(--text-dim); margin-bottom:1rem; line-height:1.5; } .template-list { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1rem; } .template-row { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.7rem 0.85rem; } .template-name { font-size:0.9rem; font-weight:700; color:var(--text); } .template-meta { font-size:0.74rem; color:var(--text-muted); margin-top:0.15rem; } .template-row-actions { display:flex; align-items:center; gap:0.4rem; flex-shrink:0; } .template-apply { min-height:40px; padding:0.4rem 0.9rem; } .template-del { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-dim); width:36px; height:36px; cursor:pointer; font-size:0.85rem; transition:all 0.15s; } .template-del:hover { border-color:rgba(255,107,107,0.5); color:var(--red); } .modal-close { width:100%; min-height:44px; } /* ══════════════════════════════════════ Effort buttons (4-level single select), crown, validation ══════════════════════════════════════ */ .effort-group { margin-top:0.85rem; padding-top:0.75rem; border-top:1px solid var(--border); } .effort-group .effort-title { font-size:0.78rem; font-weight:700; color:var(--text); margin-bottom:0.5rem; } .effort-btns { display:grid; grid-template-columns:repeat(4,1fr); gap:0.4rem; } .effort-btn { min-height:48px; padding:0.5rem 0.3rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-muted); font-family:var(--font-family); font-size:0.76rem; font-weight:700; cursor:pointer; transition:all 0.15s; } .effort-btn:hover { border-color:var(--border-strong); } /* No highlight until chosen; selected state is clear green */ .effort-btn.selected { background:var(--green); border-color:var(--green); color:var(--accent-contrast); } /* Gold star — hidden until earned, matches 2D outline aesthetic */ .ex-star { display:none; margin-left:0.4rem; vertical-align:middle; line-height:0; filter:drop-shadow(0 0 2px rgba(255,209,102,0.5)); } .ex-star svg { display:block; } .ex-star.earned { display:inline-block; animation:starPop 0.4s ease; } @keyframes starPop { 0% { transform:scale(0) rotate(-20deg); opacity:0; } 60% { transform:scale(1.3) rotate(8deg); } 100% { transform:scale(1) rotate(0); opacity:1; } } /* Per-set target weight label */ .set-target { font-size:0.66rem; font-weight:700; color:var(--gold); margin-left:0.4rem; letter-spacing:0.03em; } /* Validation highlight when reps/weight missing on submit */ .exercise-card.needs-input { border-color:var(--red); box-shadow:0 0 0 1px var(--red); } /* Builder — target weight row + variable weight toggle */ .ex-weight-row { margin-top:0.5rem; } .ex-weight-toggle { display:inline-flex; align-items:center; gap:0.45rem; cursor:pointer; font-size:0.72rem; color:var(--text-muted); font-weight:700; min-height:36px; } .ex-weight-toggle input { width:16px; height:16px; accent-color:var(--green); } .ex-varwt-inputs { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.4rem; } .ex-singlewt { margin-top:0.4rem; max-width:160px; } .ex-targetwt-input, .ex-varwt-input { max-width:120px; } /* ══════════════════════════════════════ Phase 2.1b — Trainer profile card, affiliate links, routine template buttons, affiliate editor ══════════════════════════════════════ */ /* Add Routine row (two buttons side by side) */ .add-routine-row { display:flex; flex-wrap:wrap; gap:0.5rem; } .add-routine-row .add-routine-btn { flex:1; min-width:160px; } /* Per-routine Save as Template button */ .routine-save-tpl-btn { background:none; border:1px solid var(--green-border); border-radius:var(--radius-sm); color:var(--green-text); font-family:var(--font-family); font-size:0.7rem; font-weight:700; padding:0.35rem 0.6rem; min-height:36px; cursor:pointer; transition:all 0.15s; white-space:nowrap; } .routine-save-tpl-btn:hover { background:var(--green-dim); } /* Client-side trainer profile card */ .trainer-card { background:var(--surface); border:1px solid var(--green-border); border-radius:var(--radius-md); padding:1.1rem 1rem; } .trainer-card-name { font-size:1.15rem; font-weight:700; color:var(--green-text); } .trainer-card-tagline { font-size:0.82rem; color:var(--text-muted); margin-top:0.2rem; } .trainer-card-bio { font-size:0.85rem; color:var(--text-muted); line-height:1.7; margin-top:0.75rem; } .trainer-card-contact { display:flex; flex-direction:column; gap:0.4rem; margin-top:0.85rem; } .trainer-contact-link { color:var(--green-text); font-size:0.82rem; text-decoration:none; display:inline-flex; align-items:center; gap:0.4rem; min-height:36px; } .trainer-contact-link:hover { text-decoration:underline; } .trainer-pricing { margin-top:0.85rem; padding-top:0.85rem; border-top:1px solid var(--border); } .trainer-pricing-label { font-size:0.68rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.35rem; } .trainer-pricing-text { font-size:0.85rem; color:var(--text-muted); line-height:1.7; } /* Affiliate cards (client view) */ .affiliate-list { display:flex; flex-direction:column; gap:0.5rem; } .affiliate-card { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.85rem 1rem; text-decoration:none; transition:all 0.15s; } .affiliate-card:hover { border-color:var(--green-border); background:var(--green-dim); } .affiliate-brand { font-size:0.9rem; font-weight:700; color:var(--text); } .affiliate-offer { font-size:0.78rem; color:var(--text-muted); margin-top:0.15rem; line-height:1.5; } .affiliate-arrow { font-size:1.1rem; color:var(--green-text); flex-shrink:0; } /* Affiliate editor rows (trainer settings) */ .affiliate-edit-row { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:0.4rem; align-items:center; margin-bottom:0.5rem; } @media (max-width:600px) { .affiliate-edit-row { grid-template-columns:1fr 1fr; } .affiliate-edit-row .aff-del { grid-column:2; justify-self:end; } } /* ══════════════════════════════════════ Phase 2.2a — Session logging + package tracking ══════════════════════════════════════ */ /* Package block on trainer profile */ .pkg-block { margin-top:0.85rem; padding:0.75rem 0.85rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; } .pkg-block.pkg-low { border-color:rgba(255,107,107,0.45); background:var(--red-dim); } .pkg-count { display:flex; flex-direction:column; flex:1; min-width:120px; } .pkg-num { font-size:1.6rem; font-weight:700; color:var(--green-text); line-height:1; } .pkg-block.pkg-low .pkg-num { color:var(--red); } .pkg-label { font-size:0.72rem; color:var(--text-muted); margin-top:0.2rem; } .pkg-alert { font-size:0.74rem; font-weight:700; color:var(--red); width:100%; } .pkg-edit-btn { min-height:40px; flex-shrink:0; } /* Client-side low sessions alert */ .client-pkg-alert { background:var(--red-dim); border:1px solid rgba(255,107,107,0.45); border-radius:var(--radius-md); color:var(--red); font-size:0.82rem; font-weight:700; line-height:1.5; padding:0.75rem 0.9rem; margin-bottom:0.85rem; } /* Session blocks in trainer timeline */ .tl-session-block { background:rgba(0,245,122,0.05); border:1px solid var(--green-border); border-radius:var(--radius-sm); padding:0.55rem 0.7rem; margin-bottom:0.6rem; } .tl-session-label { font-size:0.62rem; font-weight:700; color:var(--green-text); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem; } .tl-private-block { background:rgba(255,209,102,0.06); border:1px solid rgba(255,209,102,0.3); border-radius:var(--radius-sm); padding:0.55rem 0.7rem; margin-bottom:0.6rem; } .tl-private-label { font-size:0.62rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem; } /* Session timeline item accent (both apps) */ .tl-item.tl-session .tl-icon, .tl-session .tl-icon { color:var(--green); } /* ══════════════════════════════════════ Phase 2.2b — Check-ins ══════════════════════════════════════ */ /* Client home prompt */ .checkin-prompt { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--green-dim); border:1px solid var(--green-border); border-radius:var(--radius-md); padding:0.85rem 1rem; margin-bottom:0.85rem; } .checkin-prompt-title { font-size:0.9rem; font-weight:700; color:var(--green-text); } .checkin-prompt-sub { font-size:0.78rem; color:var(--text-muted); margin-top:0.2rem; line-height:1.5; } .checkin-prompt-btn { flex-shrink:0; min-height:44px; padding:0.5rem 1rem; background:var(--green); color:var(--accent-contrast); border:none; border-radius:var(--radius-md); font-family:var(--font-family); font-size:0.8rem; font-weight:700; cursor:pointer; } .checkin-prompt-btn:hover { opacity:0.9; } /* Check-in modal fields */ .checkin-fields { display:flex; flex-direction:column; gap:1rem; margin-bottom:1rem; } .checkin-field-label { font-size:0.85rem; font-weight:700; color:var(--text); margin-bottom:0.5rem; } .checkin-scale-row { display:grid; grid-template-columns:repeat(5,1fr); gap:0.4rem; } .checkin-dot { min-height:48px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface2); color:var(--text-muted); font-family:var(--font-family); font-size:0.95rem; font-weight:700; cursor:pointer; transition:all 0.12s; } .checkin-dot:hover { border-color:var(--green-border); } .checkin-dot.selected { background:var(--green); border-color:var(--green); color:var(--accent-contrast); } .checkin-scale-ends { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--text-dim); margin-top:0.35rem; } /* Trainer config block */ .checkin-section-label { font-size:0.7rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; margin:1rem 0 0.5rem; } .checkin-config { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.85rem; margin-bottom:0.75rem; } .checkin-config-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.85rem; } .ci-cadence { display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; } .ci-hidden { display:none; } .checkin-config-save { margin-top:0.75rem; } /* Trainer latest check-in card */ .checkin-latest { background:var(--surface); border:1px solid var(--green-border); border-radius:var(--radius-md); padding:0.85rem; } .checkin-latest-label { font-size:0.7rem; font-weight:700; color:var(--green-text); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.6rem; } .checkin-latest-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:0.5rem; } .checkin-latest-item { background:var(--surface2); border-radius:var(--radius-sm); padding:0.5rem 0.6rem; display:flex; flex-direction:column; } .checkin-latest-topic { font-size:0.72rem; color:var(--text-muted); } .checkin-latest-val { font-size:1.3rem; font-weight:700; color:var(--green-text); line-height:1.1; } .checkin-latest-max { font-size:0.8rem; color:var(--text-dim); } .checkin-latest-comment { margin-top:0.6rem; font-size:0.82rem; color:var(--text-muted); font-style:italic; line-height:1.6; } /* Topics editor */ .ci-topics-list { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; } .ci-topic-opt { display:flex; align-items:center; gap:0.55rem; font-size:0.85rem; color:var(--text); cursor:pointer; min-height:40px; } .ci-topic-opt input { width:16px; height:16px; accent-color:var(--green); } .ci-topic-scale { font-size:0.72rem; color:var(--text-dim); } .ci-custom-label { font-size:0.72rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin:0.5rem 0; } .ci-custom-row { display:flex; gap:0.4rem; align-items:center; margin-bottom:0.4rem; } /* Timeline check-in block (both apps) */ .tl-ci-block { display:flex; flex-direction:column; gap:0.3rem; } .tl-ci-row { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-muted); } .tl-ci-val { font-weight:700; color:var(--green-text); } .tl-ci-comment { margin-top:0.4rem; font-size:0.82rem; font-style:italic; color:var(--text-muted); line-height:1.6; } /* ══════════════════════════════════════ Phase 2.3 — Alerts + progression ══════════════════════════════════════ */ /* Roster "NEW CLIENT ALERTS" badge */ .client-alert-badge { display:inline-block; margin-left:0.5rem; vertical-align:middle; font-size:0.56rem; font-weight:700; letter-spacing:0.06em; color:#fff; background:var(--red); border-radius:var(--radius-sm); padding:0.12rem 0.4rem; text-transform:uppercase; animation:alertPulse 2s ease-in-out infinite; } @keyframes alertPulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } } /* Alerts block on profile */ .alerts-block { background:var(--red-dim); border:1px solid rgba(255,107,107,0.45); border-radius:var(--radius-md); padding:0.85rem; margin-bottom:1rem; } .alerts-block-label { font-size:0.78rem; font-weight:700; color:var(--red); margin-bottom:0.6rem; } .alert-row { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.6rem 0.75rem; margin-bottom:0.45rem; } .alert-row:last-child { margin-bottom:0; } .alert-row.alert-high { border-left:3px solid var(--red); } .alert-row.alert-medium { border-left:3px solid var(--gold); } .alert-row-label { font-size:0.82rem; font-weight:700; color:var(--text); display:block; } .alert-row-detail { font-size:0.76rem; color:var(--text-muted); display:block; margin-top:0.15rem; line-height:1.5; } .alert-dismiss-btn { flex-shrink:0; min-height:40px; padding:0.35rem 0.7rem; background:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text-dim); font-family:var(--font-family); font-size:0.66rem; font-weight:700; letter-spacing:0.06em; cursor:pointer; transition:all 0.15s; } .alert-dismiss-btn:hover { border-color:var(--text-muted); color:var(--text); } /* Progression suggestions in review */ .prog-block { background:rgba(0,245,122,0.06); border:1px solid var(--green-border); border-radius:var(--radius-md); padding:0.8rem; margin-top:0.85rem; } .prog-label { font-size:0.78rem; font-weight:700; color:var(--green-text); } .prog-sub { font-size:0.74rem; color:var(--text-muted); margin:0.2rem 0 0.6rem; line-height:1.5; } .prog-row { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.55rem 0.7rem; margin-bottom:0.4rem; } .prog-row:last-child { margin-bottom:0; } .prog-ex-name { font-size:0.82rem; font-weight:700; color:var(--text); } .prog-inc { font-size:0.76rem; color:var(--green-text); font-weight:700; margin-left:0.5rem; } .prog-actions { display:flex; gap:0.4rem; flex-shrink:0; } .prog-approve, .prog-decline { min-height:40px; padding:0.35rem 0.8rem; border-radius:var(--radius-sm); font-family:var(--font-family); font-size:0.72rem; font-weight:700; cursor:pointer; border:1px solid var(--border-strong); background:none; transition:all 0.15s; } .prog-approve { border-color:var(--green-border); color:var(--green-text); } .prog-approve:hover { background:var(--green-dim); } .prog-decline { color:var(--text-dim); } .prog-decline:hover { border-color:var(--text-muted); color:var(--text); } .prog-applied { font-size:0.78rem; font-weight:700; color:var(--green-text); padding:0.4rem 0; } /* ══════════════════════════════════════ Phase 3 core — set complete, duration, warm/cool, achievements, story ══════════════════════════════════════ */ /* Set-complete button — rectangle that fills with color when selected, sits in the third column beside weight + reps */ .log-inputs-3 { grid-template-columns:2fr 2fr 1fr !important; align-items:start; } /* Set-done star: invisible until BOTH reps & weight are entered for a set, then a color-filled star inside a circle appears and briefly animates. Replaces the old manual COMPLETE button. */ .set-done-badge { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; color:var(--accent); } .set-done-badge .set-done-star { opacity:0; transform:scale(0.4); transition:opacity 0.2s ease, transform 0.2s ease; } .set-done-badge.done .set-done-star { opacity:1; transform:scale(1); } .set-done-badge.pop .set-done-star { animation:setDoneStar 0.5s ease-out; } @keyframes setDoneStar { 0% { transform:scale(0.2) rotate(-45deg); opacity:0; } 55% { transform:scale(1.28) rotate(10deg); opacity:1; } 100% { transform:scale(1) rotate(0deg); opacity:1; } } @media (prefers-reduced-motion: reduce) { .set-done-badge .set-done-star, .set-done-badge.done .set-done-star { transform:none; transition:opacity 0.15s ease; } .set-done-badge.pop .set-done-star { animation:none; } } /* Workout duration bar */ .workout-duration { display:flex; align-items:center; gap:0.5rem; margin:0.5rem 0 0.85rem; padding:0.5rem 0.75rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); font-size:0.78rem; color:var(--text-dim); } .workout-duration .wd-dot { width:8px; height:8px; border-radius:50%; background:var(--border-strong); } .workout-duration.running .wd-dot { background:var(--green); animation:wdPulse 1.5s ease-in-out infinite; } @keyframes wdPulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } } .workout-duration .wd-time { margin-left:auto; font-weight:700; color:var(--text); font-size:0.95rem; } /* Warm-up / cool-down — trainer builder */ .wc-block { background:var(--surface2); border:1px dashed var(--border-strong); border-radius:var(--radius-md); padding:0.7rem; margin:0.6rem 0; } .wc-label { font-size:0.7rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.4rem; } .wc-ex-list { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.4rem 0; } .wc-ex-pill { display:flex; align-items:center; gap:0.4rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.3rem 0.55rem; font-size:0.74rem; } .wc-ex-del { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:0.85rem; padding:0 0.1rem; } .wc-ex-del:hover { color:var(--red); } .wc-add-ex-btn { width:100%; min-height:38px; background:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text-muted); font-family:var(--font-family); font-size:0.72rem; font-weight:700; cursor:pointer; margin-top:0.3rem; } .wc-add-ex-btn:hover { border-color:var(--gold); color:var(--gold); } /* Warm-up / cool-down — client view */ .wc-client-block { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:0.6rem; overflow:hidden; } .wc-client-header { display:flex; align-items:center; justify-content:space-between; padding:0.7rem 0.85rem; cursor:pointer; } .wc-client-title { font-size:0.78rem; font-weight:700; color:var(--gold); letter-spacing:0.04em; } .wc-client-body { display:none; padding:0 0.85rem 0.75rem; } .wc-client-body.open { display:block; } .wc-client-text { font-size:0.82rem; color:var(--text-muted); line-height:1.6; white-space:pre-wrap; margin-bottom:0.5rem; } .wc-client-ex { font-size:0.8rem; padding:0.3rem 0; border-bottom:1px solid var(--border); } .wc-client-ex a { color:var(--green-text); text-decoration:none; } /* Home box badges */ .home-badges { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid var(--border); } .home-badge { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:var(--surface2); border:1px solid rgba(255,209,102,0.35); border-radius:50%; } /* Achievement shelf (Progress tab) */ .ach-shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:0.6rem; margin-bottom:1rem; } .ach-tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.7rem 0.5rem; text-align:center; } .ach-tile.earned { border-color:rgba(255,209,102,0.4); } .ach-tile.locked { opacity:0.4; filter:grayscale(1); } .ach-tile-glyph { display:flex; justify-content:center; margin-bottom:0.4rem; } .ach-tile-title { font-size:0.66rem; font-weight:700; color:var(--text); line-height:1.3; } .ach-tile-date { font-size:0.6rem; color:var(--gold); margin-top:0.2rem; } .ach-tile-locked { font-size:0.6rem; color:var(--text-dim); margin-top:0.2rem; text-transform:uppercase; letter-spacing:0.05em; } /* Achievement celebration overlay */ .ach-celebrate { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(10,10,10,0.92); opacity:0; transition:opacity 0.25s; padding:1.5rem; } .ach-celebrate.show { opacity:1; } .ach-celebrate-inner { background:linear-gradient(160deg,#1f1f1f,#141414); border:1px solid rgba(255,209,102,0.4); border-radius:var(--radius-lg); padding:2rem 1.5rem; max-width:380px; width:100%; text-align:center; position:relative; overflow:hidden; } .ach-celebrate-eyebrow { font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; } .ach-celebrate-badges { display:flex; flex-direction:column; gap:1.25rem; } .ach-celebrate-badge { display:flex; flex-direction:column; align-items:center; } .ach-celebrate-glyph { width:96px; height:96px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle,rgba(255,209,102,0.18),transparent 70%); border-radius:50%; margin-bottom:0.6rem; animation:achPop 0.5s ease; } @keyframes achPop { 0% { transform:scale(0) rotate(-15deg); } 60% { transform:scale(1.2) rotate(6deg); } 100% { transform:scale(1) rotate(0); } } .ach-celebrate-title { font-size:1.15rem; font-weight:700; color:#fff; letter-spacing:0.02em; } .ach-celebrate-desc { font-size:0.82rem; color:var(--text-muted); margin-top:0.3rem; line-height:1.5; } .ach-celebrate-brand { margin-top:1.5rem; font-size:0.68rem; color:var(--text-dim); letter-spacing:0.1em; text-transform:uppercase; } .ach-celebrate-actions { margin-top:1.25rem; display:flex; flex-direction:column; align-items:center; gap:0.75rem; } .ach-celebrate-hint { font-size:0.76rem; color:var(--text-muted); } .ach-celebrate-dismiss { min-height:46px; padding:0.6rem 2rem; background:var(--green); color:var(--accent-contrast); border:none; border-radius:var(--radius-md); font-family:var(--font-family); font-size:0.85rem; font-weight:700; cursor:pointer; } .ach-confetti { position:absolute; inset:0; pointer-events:none; } .ach-confetti span { position:absolute; top:-10px; left:calc(var(--i) * 5.5%); width:7px; height:7px; background:var(--gold); opacity:0.8; border-radius:1px; animation:achConfetti 2.4s linear infinite; animation-delay:calc(var(--i) * 0.12s); } .ach-confetti span:nth-child(even) { background:var(--green); } @keyframes achConfetti { 0% { transform:translateY(0) rotate(0); opacity:1; } 100% { transform:translateY(420px) rotate(360deg); opacity:0; } } /* Trainer profile achievements */ .tr-ach-row { display:flex; flex-wrap:wrap; gap:0.5rem; } .tr-ach-badge { display:flex; align-items:center; gap:0.4rem; background:var(--surface); border:1px solid rgba(255,209,102,0.3); border-radius:var(--radius-sm); padding:0.4rem 0.6rem; font-size:0.74rem; font-weight:700; } /* Timeline achievement entry */ .tl-ach-row { display:flex; align-items:center; gap:0.7rem; } .tl-ach-title { font-size:0.85rem; font-weight:700; color:var(--gold); } .tl-ach-desc { font-size:0.78rem; color:var(--text-muted); margin-top:0.1rem; } /* Progress Story */ .progress-story-btn { width:100%; min-height:48px; margin-bottom:1rem; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-contrast); border:none; border-radius:var(--radius-md); font-family:var(--font-family); font-size:0.85rem; font-weight:700; letter-spacing:0.03em; cursor:pointer; } .story-modal-box { max-width:440px; } .story-toggles { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; } .story-toggle { display:flex; align-items:center; gap:0.4rem; font-size:0.76rem; color:var(--text-muted); cursor:pointer; min-height:36px; padding:0 0.4rem; border:1px solid var(--border); border-radius:var(--radius-sm); } .story-toggle input { accent-color:var(--green); width:15px; height:15px; } .story-card { background:linear-gradient(160deg,#1c1c1c,#141414); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:1.25rem; } .story-card-header { text-align:center; border-bottom:1px solid var(--border); padding-bottom:0.85rem; margin-bottom:0.85rem; } .story-card-name { font-size:1.2rem; font-weight:700; color:#fff; } .story-card-sub { font-size:0.72rem; color:var(--gold); letter-spacing:0.05em; margin-top:0.25rem; } .story-section { margin-bottom:1rem; } .story-section-label { font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin-bottom:0.5rem; } .story-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; } .story-stat { background:var(--surface); border-radius:var(--radius-sm); padding:0.6rem; text-align:center; } .story-stat-num { font-size:1.3rem; font-weight:700; color:var(--green-text); line-height:1; } .story-stat-label { font-size:0.64rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.25rem; } .story-pr { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-muted); padding:0.3rem 0; border-bottom:1px solid var(--border); } .story-pr-val { font-weight:700; color:var(--text); } .story-badges { display:flex; flex-wrap:wrap; gap:0.4rem; } .story-badge { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; background:var(--surface); border:1px solid rgba(255,209,102,0.3); border-radius:50%; } /* ══════════════════════════════════════ PWA — install button + offline status pill ══════════════════════════════════════ */ .pwa-install-btn { position:fixed; left:50%; transform:translateX(-50%); bottom:76px; z-index:9000; background:var(--green); color:var(--accent-contrast); border:none; border-radius:var(--radius-md); font-family:var(--font-family); font-size:0.78rem; font-weight:700; letter-spacing:0.03em; padding:0.7rem 1.2rem; box-shadow:0 4px 16px rgba(0,0,0,0.4); cursor:pointer; transition:opacity 0.4s; } .pwa-status-pill { position:fixed; left:50%; transform:translateX(-50%); top:12px; z-index:9001; background:var(--warning); color:#1A1404; border-radius:999px; font-family:var(--font-family); font-size:0.7rem; font-weight:700; padding:0.45rem 0.95rem; box-shadow:0 4px 16px rgba(0,0,0,0.4); max-width:92vw; text-align:center; transition:opacity 0.5s; } .pwa-fade { opacity:0; pointer-events:none; } /* ══════════════════════════════════════ Display font on headings (themeable typeface system) Body text uses --font-family; prominent headings use --font-display so display faces (Oswald, Fraunces, Bricolage) read as intended. ══════════════════════════════════════ */ .page-title, .stat-num, .progress-stat-num, .profile-name, .dash-name, .nav-name, .loading-logo, .error-logo, .section-label, .story-card-name, .ach-celebrate-title, .checkin-latest-val, .pkg-num { font-family: var(--font-display); } /* ══════════════════════════════════════ Theme pickers (trainer Appearance + client mode toggle) ══════════════════════════════════════ */ .combo-picker, .font-picker, .mode-picker { display:flex; flex-wrap:wrap; gap:0.5rem; } .combo-chip { display:flex; align-items:center; gap:8px; padding:8px 14px 8px 9px; border-radius:var(--radius-pill, 999px); background:var(--surface-2); border:1px solid var(--border); cursor:pointer; font-family:var(--font-family); font-size:0.82rem; font-weight:600; color:var(--text-muted); transition:all .15s; min-height:42px; } .combo-chip:hover { border-color:var(--border-strong); color:var(--text); } .combo-chip.active { border-color:var(--text); color:var(--text); background:var(--surface-3); } .combo-dots { display:flex; } .combo-dot { width:15px; height:15px; border-radius:50%; border:1.5px solid var(--surface-1); margin-left:-5px; } .combo-dot:first-child { margin-left:0; } .opt-chip { font-family:var(--font-family); font-size:0.82rem; font-weight:600; padding:9px 16px; border-radius:var(--radius-pill, 999px); background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); cursor:pointer; transition:all .15s; min-height:42px; } .opt-chip:hover { border-color:var(--border-strong); color:var(--text); } .opt-chip.active { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); } /* Client-preferences toggles (trainer settings) */ .pref-toggle { display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0; font-size:0.85rem; color:var(--text-muted); cursor:pointer; line-height:1.4; } .pref-toggle input[type="checkbox"] { width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; } .pref-effort { text-align:center; } /* Admin — add trainer */ .admin-add-trainer { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; } .admin-add-steps { margin-top:0.85rem; padding-top:0.85rem; border-top:1px solid var(--border); } .admin-steps-title { font-size:0.85rem; font-weight:700; color:var(--accent); margin-bottom:0.5rem; } .admin-steps-list { margin:0 0 0.5rem 1.1rem; font-size:0.82rem; color:var(--text-muted); line-height:1.6; } .admin-steps-list li { margin-bottom:0.35rem; } .admin-steps-note { font-size:0.74rem; color:var(--text-dim); } /* ══════════════════════════════════════ v29 — Begin Workout, expanded warm/cool, admin actions, trainer sub ══════════════════════════════════════ */ /* Begin Workout button */ .begin-workout-btn { width:100%; min-height:50px; margin:0.5rem 0 0.5rem; cursor:pointer; background:var(--accent); color:var(--accent-contrast); border:none; border-radius:var(--radius-md); font-family:var(--font-family); font-size:0.9rem; font-weight:700; letter-spacing:0.04em; transition:all 0.15s; } .begin-workout-btn:hover { background:var(--accent-hover); } .begin-workout-btn.started, .begin-workout-btn:disabled { background:var(--surface-2); color:var(--text-dim); cursor:default; } /* Warm-up / cool-down expanded blocks */ .wc-client-block.expanded { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:0.75rem; overflow:hidden; } .wc-client-header-static { padding:0.7rem 0.85rem; border-bottom:1px solid var(--border); } .wc-client-header-static .wc-client-title { font-size:0.78rem; font-weight:700; color:var(--accent); letter-spacing:0.04em; } .wc-client-block.expanded .wc-client-body { padding:0.6rem 0.85rem 0.75rem; } .wc-ex-row { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; padding:0.5rem 0; border-bottom:1px solid var(--border); } .wc-ex-row:last-child { border-bottom:none; } .wc-ex-name { font-size:0.86rem; color:var(--text); } .wc-ex-name a { color:var(--text); } .wc-ex-demo { font-size:0.72rem; color:var(--accent); font-weight:600; } .wc-complete-btn { min-height:38px; padding:0 0.85rem; flex-shrink:0; cursor:pointer; background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-family:var(--font-family); font-size:0.68rem; font-weight:700; letter-spacing:0.05em; color:var(--text-muted); transition:all 0.15s; } .wc-complete-btn.done { background:var(--success); border-color:var(--success); color:#fff; } /* Block-level COMPLETE button for text-only warm-up / cool-down sections. */ .wc-block-complete-btn { display:block; width:100%; margin-top:0.6rem; } /* Routine meta line in the trainer builder (exercise count · est. time). */ .routine-meta-line { font-size:0.72rem; font-weight:700; letter-spacing:0.04em; color:var(--text-dim); margin-top:0.3rem; } /* Trainer card subtitle (name · city) */ .trainer-card-sub { font-size:0.8rem; color:var(--text-dim); margin-top:0.1rem; margin-bottom:0.3rem; } /* Admin trainer action buttons + closed roster */ .admin-trainer-actions { display:flex; gap:0.4rem; flex-shrink:0; } .admin-act-btn { min-height:36px; padding:0 0.7rem; cursor:pointer; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-family:var(--font-family); font-size:0.72rem; font-weight:700; color:var(--text-muted); transition:all 0.15s; } .admin-act-btn:hover { border-color:var(--accent); color:var(--accent); } .admin-act-btn.unfreeze { border-color:var(--success); color:var(--success); } .admin-act-btn.danger:hover { border-color:var(--danger); color:var(--danger); } .admin-roster-closed { opacity:0.7; } .admin-trainer-row.closed { border-left:3px solid var(--text-dim); } /* ══════════════════════════════════════ User Guide — open button + pop-up modal ══════════════════════════════════════ */ .guide-open-btn { margin-top:0.85rem; padding:0.5rem 0.9rem; cursor:pointer; background:var(--surface-2); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius-pill, 999px); font-family:var(--font-family); font-size:0.78rem; font-weight:700; transition:all 0.15s; } .guide-open-btn:hover { border-color:var(--accent); color:var(--accent); } .guide-overlay { position:fixed; inset:0; z-index:9500; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,0.55); opacity:0; transition:opacity 0.2s; padding:0; } .guide-overlay.show { opacity:1; } .guide-box { width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; transform:translateY(16px); transition:transform 0.2s; } .guide-overlay.show .guide-box { transform:translateY(0); } @media (min-width:600px){ .guide-overlay { align-items:center; padding:1.5rem; } .guide-box { border-radius:var(--radius-lg); } } .guide-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; } .guide-title { font-family:var(--font-display); font-size:1.2rem; font-weight:800; } .guide-intro { font-size:0.8rem; color:var(--text-muted); margin-top:0.2rem; } .guide-close { background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); width:34px; height:34px; border-radius:var(--radius-pill, 999px); cursor:pointer; font-size:0.9rem; flex-shrink:0; } .guide-close:hover { color:var(--text); border-color:var(--border-strong); } .guide-body { overflow-y:auto; padding:0.5rem 1.25rem 1.25rem; -webkit-overflow-scrolling:touch; } .guide-section { border-bottom:1px solid var(--border); } .guide-section-head { width:100%; display:flex; align-items:center; justify-content:space-between; padding:0.85rem 0; background:none; border:none; cursor:pointer; font-family:var(--font-display); font-size:0.95rem; font-weight:700; color:var(--text); text-align:left; } .guide-arrow { color:var(--text-dim); transition:transform 0.2s; } .guide-arrow.open { transform:rotate(180deg); } .guide-section-body { display:none; padding-bottom:0.5rem; } .guide-section-body.open { display:block; } .guide-item { padding:0.5rem 0 0.6rem; border-top:1px solid var(--border); } .guide-item:first-child { border-top:none; } .guide-item-h { font-size:0.85rem; font-weight:700; color:var(--accent); margin-bottom:0.2rem; } .guide-item-p { font-size:0.84rem; color:var(--text-muted); line-height:1.55; } /* ── Body measurements + progress photos (Slice 1) ── */ .body-media-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start} @media (min-width:680px){ .body-media-grid{grid-template-columns:1.3fr 1fr} } .progress-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px} .pp-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; aspect-ratio:3/4;border:1.5px dashed var(--border-strong);border-radius:12px;background:var(--surface2); color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;text-align:center} .pp-add .pp-plus{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-contrast); display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1} .pp-add.busy{pointer-events:none;opacity:.7} .pp-spin{width:22px;height:22px;border:3px solid var(--border-strong);border-top-color:var(--accent); border-radius:50%;animation:ppspin .8s linear infinite} @keyframes ppspin{to{transform:rotate(360deg)}} .pp-tile{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid var(--border)} .pp-tile img{width:100%;height:100%;object-fit:cover;display:block} .pp-date{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;font-weight:700;color:#fff; padding:6px 6px 4px;background:linear-gradient(transparent,rgba(0,0,0,.6))} .pp-del{position:absolute;top:5px;right:5px;width:22px;height:22px;border:none;border-radius:50%; background:rgba(15,19,28,.6);color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1} .pp-empty{grid-column:1/-1;color:var(--text-muted);font-size:12px;padding:8px 2px} .pp-prompt{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft); border:1px solid var(--accent);border-radius:10px;padding:8px 10px;margin-bottom:10px} /* ── Lightbox (v42) ── */ #ppLightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:lbFadeIn .15s ease} #ppLightbox img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.6);pointer-events:none} #ppLightbox button{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)} #ppLightbox button:hover{background:rgba(255,255,255,.28)} @keyframes lbFadeIn{from{opacity:0}to{opacity:1}} /* ── Message Coach FAB (v42 Slice 2) ── */ .msg-coach-fab { position:fixed; bottom:80px; right:16px; z-index:400; display:flex; align-items:center; gap:7px; background:var(--accent); color:var(--accent-contrast); border:none; border-radius:999px; padding:0.6rem 1.1rem; font-size:0.82rem; font-weight:700; letter-spacing:0.03em; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,0.25); transition:opacity 0.15s, transform 0.15s; } .msg-coach-fab:hover { opacity:0.9; transform:translateY(-1px); } .msg-coach-fab:active { transform:translateY(0); opacity:1; } /* ── Client message badge (v43) ── */ .client-msg-badge { display:inline-block; margin-left:0.4rem; vertical-align:middle; font-size:0.56rem; font-weight:700; letter-spacing:0.06em; color:#fff; background:var(--green); border-radius:var(--radius-sm); padding:0.12rem 0.4rem; text-transform:uppercase; animation:alertPulse 2s ease-in-out infinite; } /* ── Form-check video upload (client) — v43 Slice 3 ── */ .fc-upload-area { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed var(--border-strong); border-radius:var(--radius-lg); padding:1.75rem 1rem; cursor:pointer; transition:border-color 0.15s; margin-bottom:0.75rem; } .fc-upload-area:hover { border-color:var(--accent); } .fc-upload-label { font-size:0.9rem; font-weight:700; color:var(--text); } .fc-upload-hint { font-size:0.76rem; color:var(--text-muted); } .fc-progress { margin-bottom:0.75rem; } .fc-progress-bar-track { background:var(--surface2); border-radius:999px; height:6px; overflow:hidden; margin-bottom:0.4rem; } .fc-progress-bar { height:6px; background:var(--accent); border-radius:999px; width:0%; transition:width 0.3s ease; } .fc-progress-label { font-size:0.78rem; color:var(--text-muted); text-align:center; } /* ── Form-check video display (trainer) — v43 Slice 3 ── */ .badge-video { background:rgba(102,170,255,0.15); color:var(--blue); border:1px solid rgba(102,170,255,0.3); } .fc-video-block { margin-bottom:0.75rem; } .fc-video-label { font-size:0.7rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:0.5rem; } .fc-video-wrap { margin-bottom:0.5rem; } .fc-video-pending { font-size:0.74rem; color:var(--text-muted); margin-top:0.3rem; } /* ── Per-exercise form-check video link (v46) ── */ .fc-ex-row { margin-top:0.85rem; padding-top:0.75rem; border-top:1px solid var(--border); } .fc-ex-link { display:flex; align-items:center; gap:8px; width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text); padding:0.6rem 0.85rem; font-size:0.82rem; font-weight:600; cursor:pointer; transition:border-color 0.15s, background 0.15s; } .fc-ex-link:hover { border-color:var(--accent); } .fc-ex-link.attached { border-color:var(--green); color:var(--green); background:var(--accent-soft, var(--surface2)); } .fc-ex-progress { margin-top:0.5rem; } /* trainer: exercise label above each video */ .fc-video-ex { font-size:0.8rem; font-weight:700; color:var(--text); margin-bottom:0.35rem; } /* ── Video thumbnails + lightbox (v47) ── */ .fc-thumb-grid { display:flex; flex-wrap:wrap; gap:0.6rem; } .fc-thumb-item { width:140px; } .fc-thumb { position:relative; display:block; width:140px; aspect-ratio:16/9; border:none; padding:0; border-radius:8px; overflow:hidden; cursor:pointer; background:var(--surface2); } .fc-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .fc-thumb.fc-thumb-noimg { display:flex; align-items:center; justify-content:center; } .fc-thumb-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; background:rgba(0,0,0,0.32); transition:background 0.15s; } .fc-thumb:hover .fc-thumb-play { background:rgba(0,0,0,0.5); } .fc-thumb-pending { position:absolute; bottom:0; left:0; right:0; font-size:0.6rem; text-align:center; background:rgba(0,0,0,0.6); color:#fff; padding:2px; } #fcVideoLightbox { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; animation:lbFadeIn 0.15s ease; } .fc-lightbox-inner { width:min(92vw, 900px); aspect-ratio:16/9; } .fc-lightbox-inner iframe { width:100%; height:100%; border:none; border-radius:10px; } .fc-lightbox-close { position:absolute; top:16px; right:18px; background:rgba(255,255,255,0.15); border:none; color:#fff; font-size:20px; width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); } .fc-lightbox-close:hover { background:rgba(255,255,255,0.28); } /* ── Message Coach attachments (v47) ── */ .msg-attach-row { display:flex; gap:0.5rem; margin-bottom:0.5rem; } .msg-attach-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text); padding:0.5rem; font-size:0.78rem; font-weight:600; cursor:pointer; } .msg-attach-btn:hover { border-color:var(--accent); } .msg-attach-preview { display:flex; flex-direction:column; gap:0.35rem; } .msg-attach-chip { display:flex; align-items:center; justify-content:space-between; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.4rem 0.6rem; font-size:0.78rem; } .msg-attach-chip button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.8rem; } /* trainer: message photo thumbnails */ .msg-media-grid { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem; } .msg-photo-thumb { width:90px; height:90px; border:none; padding:0; border-radius:8px; overflow:hidden; cursor:pointer; } .msg-photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; } /* Message card badge + accent (v49) */ .badge-msg { background:rgba(0,200,120,0.12); color:var(--green); border:1px solid rgba(0,200,120,0.3); } .review-card.message-card { border-left:2px solid var(--green); } /* Clickable earned achievement badges (v49) */ .ach-tile.earned[data-ach-key], .home-badge[data-ach-key] { cursor:pointer; } .ach-tile.earned[data-ach-key]:hover { transform:translateY(-1px); transition:transform 0.12s; } .home-badge[data-ach-key]:hover { opacity:0.8; }