/* Trainer-branded public pages (landing, booking, confirmations) and the client app. Mobile first. Tokens come from tokens.css; --acc and --on-acc are set per trainer. */
.tp{--acc:var(--c-volt);--on-acc:#0B0D0F;min-height:100vh;min-height:100dvh;background:var(--c-base);color:var(--c-white);font-family:var(--f-body);-webkit-text-size-adjust:100%}
.tp *{box-sizing:border-box}
.tp a{color:var(--acc)}
.tp-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--c-line);position:sticky;top:0;background:rgba(11,13,15,.94);backdrop-filter:blur(8px);z-index:5}
.tp-top .tp-name{font-family:var(--f-head);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:20px;line-height:1;color:var(--c-white);text-decoration:none}
.tp-top img{height:36px;max-width:120px;border-radius:8px;background:#fff;padding:3px;object-fit:contain}
.tp-top .tp-sp{flex:1}
.tp-wrap{max-width:760px;margin:0 auto;padding:22px 16px 56px}
.tp-hero{padding:28px 0 8px}
.tp h1{font-family:var(--f-head);text-transform:uppercase;font-weight:800;font-size:clamp(36px,9vw,58px);line-height:.98;margin:0 0 12px;letter-spacing:.01em}
.tp h2{font-family:var(--f-head);text-transform:uppercase;font-weight:800;font-size:26px;margin:28px 0 10px;line-height:1.05}
.tp .lead{color:var(--c-steel);font-size:17px;line-height:1.55;margin:0 0 20px;max-width:56ch}
.tp-card{background:var(--c-raised);border:1px solid var(--c-line);border-radius:18px;padding:20px 18px;margin:0 0 14px}
.tp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:12px;border:1.5px solid var(--c-line);background:var(--c-raised-2);color:var(--c-white);font:700 15px/1 var(--f-body);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.tp-btn.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.tp a.tp-btn.pri{color:var(--on-acc)}
.tp-btn:focus-visible,.tp input:focus-visible,.tp select:focus-visible,.tp textarea:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.tp-row{display:flex;gap:10px;flex-wrap:wrap}
.tp-svc{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tp-svc li{padding:14px 16px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-raised);display:flex;justify-content:space-between;gap:10px;align-items:center}
.tp-svc small{color:var(--c-steel)}
.tp label.pf{display:block;font-weight:600;font-size:14.5px;margin:0 0 14px}
.tp label.pf>span{display:block;margin-bottom:6px}
.tp input[type=text],.tp input[type=email],.tp input[type=tel],.tp input[type=date],.tp input[type=number],.tp select,.tp textarea{width:100%;min-height:50px;border:1.5px solid var(--c-line);border-radius:12px;padding:10px 14px;font:inherit;font-size:16px;background:var(--c-raised-2);color:var(--c-white)}
.tp textarea{min-height:96px}
.tp-days{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-snap-type:x proximity}
.tp-day{flex:0 0 auto;min-width:64px;padding:10px 8px;border-radius:12px;border:1.5px solid var(--c-line);background:var(--c-raised);color:var(--c-white);text-align:center;text-decoration:none;font-weight:700;scroll-snap-align:start}
.tp-day small{display:block;font-weight:500;color:var(--c-steel);font-size:12px}
.tp-day.on{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}.tp-day.on small{color:var(--on-acc)}
.tp-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.tp-slot{min-height:48px;border-radius:12px;border:1.5px solid var(--c-line);background:var(--c-raised-2);color:var(--c-white);font:700 15px var(--f-body);cursor:pointer}
.tp-slot:hover,.tp-slot:focus-visible{border-color:var(--acc)}
.tp-err{background:#3a1114;border:1px solid #7a2630;color:#ffd7db;padding:10px 14px;border-radius:12px;margin:0 0 14px}
.tp-ok{background:#10240f;border:1px solid #2f6a2a;color:#d7ffd0;padding:10px 14px;border-radius:12px;margin:0 0 14px}
.tp-note{color:var(--c-steel);font-size:13px}
.tp-foot{margin-top:36px;padding-top:16px;border-top:1px solid var(--c-line);color:var(--c-steel);font-size:12.5px}
.tp-foot a{color:var(--c-steel)}
.tp .sets{display:grid;gap:8px}
@media (min-width:700px){.tp-wrap{padding-top:34px}}
.tp-mono{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--acc);color:var(--on-acc);font:800 20px var(--f-head)}
/* client app */
.pw-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.pw-stats>div{background:var(--c-raised);border:1px solid var(--c-line);border-radius:16px;padding:14px 16px}
.pw-stats b{display:block;font:800 34px/1 var(--f-head);color:var(--acc)}.pw-stats span{color:var(--c-steel);font-size:13px}
.pw-sec{font:800 15px var(--f-head);text-transform:uppercase;letter-spacing:.08em;color:var(--c-steel);margin:20px 0 8px}
.pw-exh{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.pw-exh b{font-size:18px}
.pw-set{display:grid;grid-template-columns:28px 1fr 1fr 52px;gap:8px;align-items:center;padding:4px 0}
.pw-set .pw-n{color:var(--c-steel);font-weight:700;text-align:center}
.pw-set input[type=text],.pw-set input:not([type=checkbox]){width:100%;min-height:48px;border:1.5px solid var(--c-line);border-radius:12px;background:var(--c-raised-2);color:var(--c-white);font:600 17px var(--f-body);padding:0 12px;text-align:center}
.pw-ok{position:relative;display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--c-line);border-radius:12px;background:var(--c-raised-2);cursor:pointer}
.pw-ok input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.pw-ok span{width:22px;height:22px;border-radius:6px;border:2px solid var(--c-steel)}
.pw-ok:has(input:checked){background:var(--acc);border-color:var(--acc)}.pw-ok:has(input:checked) span{border-color:var(--on-acc);background:var(--on-acc);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.pw-ok:has(input:focus-visible){outline:3px solid var(--c-white);outline-offset:2px}
.pw-set.saved input:not([type=checkbox]){border-color:var(--acc)}.pw-set.err input{border-color:var(--c-bad)}
.pw-tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:rgba(20,24,29,.97);border-top:1px solid var(--c-line);padding-bottom:env(safe-area-inset-bottom);z-index:9}
.pw-tabs a{flex:1;text-align:center;padding:16px 8px;color:var(--c-steel);text-decoration:none;font:700 14px var(--f-body);text-transform:uppercase;letter-spacing:.06em;min-height:52px}
.pw-tabs a[aria-current=page]{color:var(--acc);box-shadow:inset 0 3px 0 var(--acc)}

/* layer 4: progress, habits, chat */
.pg-scale{display:flex;gap:8px}.pg-scale label{flex:1}.pg-scale input{position:absolute;opacity:0}.pg-scale span{display:block;text-align:center;padding:12px 0;border:1px solid #2A323B;border-radius:10px;background:#14181D;color:#F5F7FA;font-weight:700;min-height:44px}.pg-scale input:checked+span{background:#C6FF00;color:#0B0D0F;border-color:#C6FF00}.pg-scale input:focus-visible+span{outline:2px solid #F5F7FA;outline-offset:2px}
.pg-habit{display:flex;gap:12px;align-items:center;margin:0 0 10px}.pg-tick{flex:0 0 44px;width:44px;height:44px;border-radius:12px;border:2px solid #9AA6B2;background:transparent;color:#0B0D0F;font-size:22px;font-weight:900;cursor:pointer}.pg-tick[aria-pressed=true]{background:#C6FF00;border-color:#C6FF00}
.pg-meas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.pg-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.pg-photos a{display:block;color:inherit;text-decoration:none}.pg-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:#1C2229;display:block}.pg-photos span{display:block;font-size:12px;color:#9AA6B2;margin-top:2px}
.pg-macros{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}.pg-macros div{text-align:center;background:#1C2229;border-radius:10px;padding:10px 4px}.pg-macros b{display:block;font-size:18px}
.pg-thread{display:flex;flex-direction:column;gap:10px;margin:12px 0}.pg-msg{max-width:88%;padding:10px 14px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere}.pg-msg span{display:block;font-size:11px;margin-top:4px;opacity:.75}.pg-msg.me{align-self:flex-end;background:#C6FF00;color:#0B0D0F}.pg-msg.them{align-self:flex-start;background:#1C2229;color:#F5F7FA}
.pg-bars{display:inline-flex;align-items:flex-end;gap:3px;height:28px;vertical-align:middle;margin:0 12px 0 6px}.pg-bars i{display:block;width:8px;background:#C6FF00;border-radius:2px}.pg-trend{margin-bottom:10px}
.pw-tabs a{font-size:13px}
.tp-logo{height:36px;width:36px;border-radius:9px;object-fit:cover;display:block;background:#1C2229}

.tp-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tp-check{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--c-line);border-radius:10px;background:var(--c-raised-2);cursor:pointer;font-weight:500;font-size:14px}
.tp-check input{width:18px;height:18px;margin:0;accent-color:var(--acc,var(--c-volt))}
/* Trainer page hero: a soft accent glow and a rise-in. Stops under reduced motion. */
.tp-hero{position:relative}.tp-wrap,.tp{overflow-x:clip}
.tp-hero::before{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc,var(--c-volt)) 26%,transparent),transparent 65%);filter:blur(30px);pointer-events:none;animation:tpOrb 14s ease-in-out infinite alternate}
.tp-hero h1,.tp-hero .lead,.tp-hero .tp-row{position:relative;opacity:0;animation:tpUp .8s cubic-bezier(.2,.7,.2,1) forwards}
.tp-hero .lead{animation-delay:.18s}.tp-hero .tp-row{animation-delay:.32s}
@keyframes tpUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tpOrb{from{transform:translate(0,0)}to{transform:translate(-50px,40px) scale(1.1)}}
.tp-btn{position:relative;overflow:hidden}
.tp-btn::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:38%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewX(-18deg) translateX(-140%);opacity:0;pointer-events:none}
.tp-btn:hover::after{animation:tpGlint .8s ease forwards}
@keyframes tpGlint{0%{opacity:0;transform:skewX(-18deg) translateX(-140%)}15%{opacity:1}100%{opacity:0;transform:skewX(-18deg) translateX(480%)}}
@media (prefers-reduced-motion:reduce){.tp-hero::before,.tp-btn::after{animation:none!important;display:none}.tp-hero h1,.tp-hero .lead,.tp-hero .tp-row{opacity:1;animation:none}}