.setvo-brand{display:inline-flex;align-items:center;gap:10px;font-size:30px;font-weight:750;letter-spacing:-1.5px;color:inherit;line-height:1.1;vertical-align:middle}.setvo-brand img{display:block;max-width:180px;height:36px;object-fit:contain}.setvo-brand.small-brand{font-size:24px}.brand-period{color:#c4f66a}.setvo-brand-icon{width:31px;height:30px;display:flex;align-items:center;gap:3px;transform:rotate(-18deg)}.setvo-brand-icon i{background:#c4f66a;width:7px;border-radius:3px;height:19px}.setvo-brand-icon i:nth-child(2){height:30px}.setvo-brand-icon i:nth-child(3){height:24px} body.setvo-marketing{background:#0b0d0c!important}.setvo-landing{--lime:#c4f66a;--ink:#0b0d0c;--dim:#959d95;background:var(--ink);color:#f2f4ee;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;overflow:hidden;min-height:100vh}.setvo-landing *{box-sizing:border-box}.setvo-landing button{font:inherit;cursor:pointer}.setvo-landing a{color:inherit;text-decoration:none}.setvo-landing button:focus-visible,.setvo-landing a:focus-visible,.setvo-landing summary:focus-visible{outline:2px solid var(--lime);outline-offset:5px}.setvo-landing h1,.setvo-landing h2,.setvo-landing h3,.setvo-landing p{margin:0}.setvo-landing em{font-style:normal;color:var(--lime)}.landing-nav,.landing-hero,.landing-section,.landing-privacy,.landing-faq,.landing-footer,.landing-principles{width:min(1160px,calc(100% - 80px));margin:auto}.landing-nav{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242824}.landing-nav nav{display:flex;gap:36px}.landing-nav nav button,.landing-link,.footer-links button{background:none;border:0;color:#c0c8bf;padding:10px 0}.landing-nav nav button:hover,.landing-link:hover{color:var(--lime)}.landing-btn{background:var(--lime);color:#172010;border:1px solid var(--lime);border-radius:12px;padding:17px 24px;display:inline-flex;align-items:center;justify-content:center;gap:30px;font-weight:650!important;font-size:16px;transition:transform .2s,background .2s}.landing-btn:hover{background:#d8ff9a;transform:translateY(-2px)}.landing-btn.small{padding:12px 18px;border-radius:10px;font-size:14px;gap:20px}.landing-btn span{font-size:22px;line-height:1}.landing-hero{min-height:740px;padding-top:86px;padding-bottom:90px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px}.landing-eyebrow{font-size:11px;letter-spacing:2px;font-weight:650;color:var(--lime);display:flex;align-items:center;gap:9px;margin-bottom:24px}.landing-eyebrow>span{width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 16px #c4f66675}.hero-copy h1{font-size:clamp(54px,6.4vw,89px);letter-spacing:-5px;line-height:1.02;font-weight:720}.hero-lead{max-width:438px;font-size:18px;line-height:1.75;color:#9da69c;margin-top:27px!important}.hero-actions{display:flex;align-items:center;gap:27px;margin-top:33px}.landing-link{display:inline-flex;align-items:center;gap:16px;font-size:14px;font-weight:600}.hero-footnote{font-size:12px;color:#7e897d;margin-top:18px!important}.hero-tags{display:flex;gap:18px;margin-top:44px;color:#b5bfb2;font-size:11px}.hero-tags span:before{content:'\2713';color:var(--lime);margin-right:6px}.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}.hero-orbit{position:absolute;width:470px;height:470px;border:1px solid #27301f;border-radius:50%;pointer-events:none}.orbit-one{transform:rotate(-22deg) scaleX(1.12);border-color:#263221;background:radial-gradient(ellipse,#c4f66a0c,transparent 65%)}.orbit-two{width:370px;height:370px;border-style:dashed;border-color:#303a28;transform:rotate(28deg) scaleX(1.35)}.preview-phone{background:#101411;width:286px;border:1px solid #4b5346;border-radius:38px;padding:19px 18px 9px;z-index:1;transform:rotate(7deg);box-shadow:0 0 0 5px #161b16,0 0 0 6px #292f26,0 32px 70px #0009}.phone-status{display:flex;justify-content:space-between;font-size:11px;color:#d1d9cc;margin:0 6px 26px}.phone-heading{display:flex;flex-direction:column;gap:6px}.phone-overline{font-size:8px;color:#8a9687;letter-spacing:1.5px}.phone-heading strong{font-size:30px;letter-spacing:-1.4px}.phone-dot{display:inline-block;width:8px;height:8px;background:var(--lime);border-radius:50%;margin-left:10px}.phone-subtitle{font-size:10px;color:#7d8c79}.phone-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:23px 0;padding:12px 0;background:#192018;border-radius:10px}.phone-metrics div{display:flex;flex-direction:column;align-items:center;gap:2px}.phone-metrics div+div{border-left:1px solid #2a3426}.phone-metrics b{font-size:17px;letter-spacing:-.5px}.phone-metrics b>span{font-size:11px;color:#84917c}.phone-metrics div>span{font-size:7px;color:#889582;letter-spacing:1px}.preview-exercise{display:flex;gap:11px;align-items:center}.preview-exercise>div:last-child{display:flex;flex-direction:column;gap:4px}.preview-exercise small{font-size:7px;color:#9aa991;letter-spacing:1px}.preview-exercise strong{font-size:14px}.preview-exercise span{font-size:8px;color:#899780}.preview-lift-icon{width:41px;height:44px;background:#23321d;border-radius:10px;display:flex;justify-content:center;align-items:center;gap:3px;transform:rotate(-3deg)}.preview-lift-icon i{width:6px;height:22px;background:var(--lime);border-radius:2px}.preview-lift-icon i:nth-child(2){width:12px;height:5px}.preview-sets{margin:18px 0}.preview-sets>div{display:grid;grid-template-columns:.65fr 1fr 1fr .65fr;align-items:center;text-align:center;gap:10px;font-size:11px;min-height:38px;border-bottom:1px solid #252d21}.preview-sets .sets-heading{font-size:8px;color:#819177;min-height:23px;border:0;letter-spacing:1px}.set-complete b{color:#cedbc4}.set-check{background:#273a20;color:#bde87e;border-radius:5px;height:24px;display:flex;justify-content:center;align-items:center}.set-current{background:#1a2315;border-radius:5px}.set-current b{color:var(--lime)}.set-current .set-check{background:#c4f66a;color:#172010}.preview-rest{display:flex;gap:12px;align-items:center;background:#1b2416;padding:13px 10px;border-radius:10px;border:1px solid #314024}.rest-ring{border:2px solid var(--lime);border-left-color:#485c33;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;font-size:13px;color:var(--lime)}.preview-rest div{display:flex;flex-direction:column;gap:3px}.preview-rest strong{font-size:11px}.preview-rest div span{font-size:8px;color:#88957d}.phone-bottom{display:flex;justify-content:space-around;margin:22px 0 15px;font-size:8px;color:#6a7762}.phone-active{color:var(--lime)}.home-indicator{height:3px;width:76px;background:#8b9483;border-radius:5px;margin:0 auto}.preview-badge{position:absolute;z-index:3;bottom:58px;left:-8px;background:#e1ead6;border:1px solid #f2f6eb;color:#182211;border-radius:13px;padding:14px 18px;display:flex;gap:12px;align-items:center;box-shadow:0 12px 40px #0004;transform:rotate(-4deg)}.preview-badge>span{width:35px;height:35px;background:#c2dda3;border-radius:10px;display:grid;place-items:center;font-size:27px}.preview-badge div{display:flex;flex-direction:column;gap:3px}.preview-badge strong{font-size:12px}.preview-badge small{font-size:9px;color:#5b6c4e}.visual-caption{position:absolute;top:6px;right:-3px;font-size:8px;letter-spacing:1.2px;line-height:1.9;color:#a6b299;transform:rotate(7deg)}.visual-caption span{font-size:10px;color:#627059;letter-spacing:0}.preview-disclaimer{position:absolute;bottom:-17px;right:10px;font-size:8px;color:#67745b;letter-spacing:1.5px;display:none;}.landing-principles{border-top:1px solid #2c3229;border-bottom:1px solid #2c3229;display:grid;grid-template-columns:repeat(3,1fr);padding:27px 0;gap:20px}.landing-principles div{display:flex;gap:18px;align-items:center;color:#c3cabe;font-size:13px}.landing-principles b{font-size:10px;color:#6f805c;font-weight:500}.landing-section{padding:108px 0}.section-intro{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:38px}.section-intro h2,.landing-privacy h2,.landing-install h2{font-size:48px;line-height:1.15;letter-spacing:-2px;font-weight:650}.section-intro h2 span{color:#7f8b76}.section-intro>p{max-width:320px;color:#8e9a85;font-size:14px;line-height:1.8}.feature-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:17px}.feature-card{background:#141914;border:1px solid #2a3227;border-radius:18px;padding:29px 26px;min-height:310px;position:relative;overflow:hidden}.feature-number{font-size:9px;letter-spacing:1.8px;color:#92a57b}.feature-card h3{font-size:23px;line-height:1.2;letter-spacing:-.8px;margin-top:24px}.feature-card p{font-size:13px;line-height:1.8;color:#89977f;margin-top:13px}.mini-week{display:flex;justify-content:space-between;gap:6px;margin-top:35px}.mini-week>span{background:#1b2218;border-radius:7px;min-width:26px;width:12%;height:44px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:6px;font-size:9px;color:#75876a}.mini-week .active-day{background:#344a23;color:#d4edb2}.mini-week i{width:3px;height:3px;background:currentColor;border-radius:50%}.mini-numbers{display:flex;gap:24px;justify-content:center;align-items:center;margin-top:26px}.mini-numbers b{font-size:38px;line-height:1;font-weight:500;color:#d2e3bb;letter-spacing:-1px}.mini-numbers small{font-size:8px;color:#819b6a;display:block;text-align:center;letter-spacing:1px;margin-top:8px}.mini-numbers>span{color:#566d43}.mini-bars{height:84px;display:flex;align-items:flex-end;gap:10px;margin-top:20px;padding:0 10px}.mini-bars i{flex:1;background:#2d4020;border-radius:4px 4px 0 0;max-width:30px}.mini-bars i:last-child{background:var(--lime)}.landing-privacy{display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:90px;border-top:1px solid #2a3227;padding:92px 70px 100px}.privacy-emblem{height:250px;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse,#bfdc6930,transparent 65%)}.privacy-emblem:before,.privacy-emblem:after{content:'';position:absolute;width:205px;height:205px;border:1px solid #344329;border-radius:50%}.privacy-emblem:after{width:155px;height:155px;border-style:dashed;transform:rotate(14deg)}.privacy-emblem>span{font-size:55px;color:var(--lime);border:2px solid #75904f;border-radius:18px 18px 40px 40px;width:86px;height:100px;text-align:center;box-shadow:0 0 60px #8dad5820}.landing-privacy p{margin-top:20px;color:#a1ae94;font-size:15px;line-height:1.85}.landing-privacy .privacy-small{font-size:12px;color:#7d8c70}.landing-privacy .landing-link{margin-top:15px;color:var(--lime)}.landing-install{text-align:center;background:#151c10;border-top:1px solid #2f3f20;border-bottom:1px solid #2f3f20;padding:80px 24px}.landing-install .landing-eyebrow{justify-content:center}.landing-install h2{font-size:65px;letter-spacing:-3px}.landing-install>p{max-width:475px;margin:22px auto 0;color:#98a789;font-size:15px;line-height:1.8}.landing-install .setvo-install-compact{display:flex;justify-content:center;color:#c4f66a}.landing-install .btn{color:#14200c;background:var(--lime);border-radius:12px;min-height:52px;padding:0 30px}.landing-install .install-fine{font-size:11px;max-width:330px;color:#7e936b}.landing-faq{max-width:780px;padding:90px 0}.landing-faq h2{font-size:34px;letter-spacing:-1px;margin-bottom:30px}.landing-faq details{border-bottom:1px solid #2d3527}.landing-faq summary{list-style:none;cursor:pointer;padding:21px 0;display:flex;align-items:center;justify-content:space-between;font-size:15px;gap:15px}.landing-faq summary::-webkit-details-marker{display:none}.landing-faq summary>span{color:var(--lime);font-size:21px;font-weight:300}.landing-faq details[open] summary>span{transform:rotate(45deg)}.landing-faq details p{font-size:14px;color:#91a082;line-height:1.8;padding:0 25px 22px 0}.landing-footer{border-top:1px solid #2c3326;padding:44px 0 35px;display:flex;justify-content:space-between;gap:30px}.landing-footer p{font-size:12px;color:#7e8c71;margin-top:17px}.landing-footer>div:last-child{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:18px}.landing-footer>div:last-child>a{font-size:15px;color:#c6d6b5}.footer-links{display:flex;align-items:center;gap:20px;font-size:11px;color:#899a7a}.footer-links button{font-size:11px;padding:0}.landing-footer small{font-size:10px;color:#6d7c60}.landing-skip{position:fixed;left:20px;top:-100px;background:var(--lime);color:#13200b!important;padding:12px;z-index:100}.landing-skip:focus{top:10px}.setvo-ad{border:1px solid var(--separator);border-radius:15px;padding:12px 15px;margin:0 0 18px;background:var(--surface-1)}.setvo-ad>small{font-size:9px;letter-spacing:1.5px;opacity:.55;display:block;margin-bottom:8px}.setvo-ad a,.setvo-ad>div{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}.setvo-ad img{width:100%;max-height:220px;object-fit:contain;border-radius:8px}.setvo-ad strong{font-size:17px}.setvo-ad a>span{font-size:13px;opacity:.8}.setvo-ad a>b{font-size:12px;color:var(--acc)}.site-field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;font-size:13px}.site-field input,.site-field textarea{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--separator);border-radius:9px;background:var(--surface-2);color:var(--label-1);font:inherit;font-size:16px}.site-field textarea{min-height:76px;resize:vertical}.brand-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.brand-upload{border:1px solid var(--separator);border-radius:12px;padding:13px;min-width:0}.brand-upload-preview{height:65px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:#e6e9e3;margin:10px 0}.brand-upload-preview.dark{background:#11170e}.brand-upload-preview img{max-width:100%;max-height:55px;object-fit:contain}.brand-upload input{font-size:12px;max-width:100%}.storage-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.storage-metrics div{background:var(--surface-2);border-radius:10px;padding:12px;text-align:center}.storage-metrics b{font-size:23px;display:block}.storage-metrics span{font-size:11px;opacity:.65}.setvo-mode-note{border:1px solid var(--separator);background:var(--surface-2);border-radius:12px;padding:15px;margin-bottom:18px;font-size:13px;line-height:1.7}.setvo-mode-note p{margin:0 0 8px}.setvo-admin-login{max-width:450px;padding:50px 20px;margin:auto}.setvo-admin-login .setvo-brand{margin-bottom:30px}.setvo-boot{min-height:70vh;display:grid;place-items:center} @media(min-width:1400px){.landing-hero{min-height:780px}.hero-visual{transform:scale(1.05)}} @media(max-width:1000px){.landing-nav,.landing-hero,.landing-section,.landing-privacy,.landing-faq,.landing-footer,.landing-principles{width:calc(100% - 48px)}.landing-hero{gap:20px;padding-top:70px}.hero-copy h1{font-size:64px;letter-spacing:-3.5px}.hero-tags{flex-wrap:wrap;gap:10px}.hero-visual{transform:scale(.88);transform-origin:center right}.hero-lead{font-size:16px}.feature-card{padding:23px 20px}.feature-card h3{font-size:21px}.landing-privacy{padding:70px 30px;gap:35px}} @media(max-width:700px){.landing-nav,.landing-hero,.landing-section,.landing-privacy,.landing-faq,.landing-footer,.landing-principles{width:calc(100% - 40px)}.landing-nav{height:85px}.landing-nav nav{display:none}.landing-nav .setvo-brand{font-size:27px}.landing-nav .landing-btn.small{padding:10px 13px;font-size:12px;gap:14px}.landing-hero{grid-template-columns:1fr;padding-top:56px;padding-bottom:55px;gap:40px;min-height:0}.hero-copy h1{font-size:clamp(52px,13.8vw,75px);letter-spacing:-3.5px}.landing-eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:21px}.hero-lead{font-size:16px;line-height:1.75;margin-top:23px!important;max-width:410px}.hero-actions{gap:24px;margin-top:26px}.landing-btn{padding:15px 20px;font-size:14px;gap:25px}.hero-footnote{font-size:11px}.hero-tags{margin-top:26px;font-size:10px;gap:15px}.hero-visual{transform:none;min-height:540px;margin:0 auto;width:min(100%,390px)}.preview-phone{width:258px;padding:17px 16px 8px;border-radius:32px;transform:rotate(5deg)}.hero-orbit{width:320px;height:320px}.orbit-two{width:260px;height:260px}.phone-status{margin-bottom:20px}.phone-heading strong{font-size:28px}.phone-metrics{margin:19px 0}.preview-badge{left:-4px;bottom:42px;padding:12px 13px}.preview-badge strong{font-size:11px}.visual-caption{right:-3px;top:2px;font-size:7px}.preview-disclaimer{bottom:0;right:0;font-size:7px;display:none;}.landing-principles{gap:15px;padding:23px 0}.landing-principles div{flex-direction:column;gap:8px;align-items:flex-start;font-size:11px;line-height:1.6}.landing-principles b{font-size:9px}.landing-section{padding:62px 0}.section-intro{display:block;margin-bottom:26px}.section-intro h2,.landing-privacy h2{font-size:36px;letter-spacing:-1.5px}.section-intro>p{font-size:13px;margin-top:20px}.feature-grid{grid-template-columns:1fr;gap:12px}.feature-card{min-height:230px;padding:25px}.feature-card h3{margin-top:15px;font-size:23px}.feature-card p{max-width:280px}.mini-week{max-width:320px;margin-top:24px}.mini-numbers{justify-content:flex-start;margin-left:15px}.mini-bars{max-width:280px;padding:0;height:60px}.landing-privacy{grid-template-columns:1fr;padding:25px 0 60px;gap:20px}.privacy-emblem{height:200px;max-width:250px;width:100%;margin:auto}.privacy-emblem:before{width:170px;height:170px}.privacy-emblem:after{width:135px;height:135px}.landing-privacy p{font-size:14px}.landing-install{padding:65px 24px}.landing-install h2{font-size:48px;letter-spacing:-2px}.landing-install>p{font-size:14px}.landing-faq{padding:60px 0}.landing-faq h2{font-size:29px}.landing-faq summary{font-size:14px;padding:20px 0}.landing-faq details p{font-size:13px}.landing-footer{padding:35px 0 30px;flex-direction:column;gap:35px}.landing-footer>div:last-child{align-items:flex-start;text-align:left;gap:16px}.brand-upload-grid{grid-template-columns:1fr}.storage-metrics{grid-template-columns:1fr 1fr}.brand-upload input{font-size:14px}} @media(prefers-reduced-motion:reduce){.setvo-landing *{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* Admin dashboard — operator-facing, English-only. Sits on top of the app's tokens; nothing here is used outside views/Admin.jsx and views/AdminCoach.jsx. The page is looked at maybe twice a year, so every card says what it is for in a sentence and every state is a word, not a colour to decode. */ .adm-intro{color:var(--label-2);font-size:14px;line-height:1.45;margin:-6px 0 16px} /* one sentence under a card heading that says what the card is for */ .adm-lead{color:var(--label-2);font-size:13px;line-height:1.45;margin:2px 0 12px} /* status pill: a word and a colour, never a paragraph */ .adm-pill{ display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px; font-size:12.5px;font-weight:600;letter-spacing:-.004em;line-height:1.5;white-space:nowrap; background:var(--surface-2);color:var(--label-2) } .adm-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .adm-pill.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)} .adm-pill.warn{background:color-mix(in srgb,var(--yellow) 18%,transparent);color:var(--yellow)} .adm-pill.bad{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)} .adm-pill.acc{background:var(--acc-soft);color:var(--acc)} /* the one-line "what state is this in" under the card title */ .adm-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--label-2);margin:4px 0 14px;line-height:1.4} /* numbered setup steps: a
per step, so a finished step folds away */ .adm-step{border-top:var(--hair) solid var(--sep);padding:2px 0} .adm-step:first-of-type{border-top:0} .adm-step>summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 0; -webkit-tap-highlight-color:transparent } .adm-step>summary::-webkit-details-marker{display:none} .adm-step>summary:active{opacity:.7} .adm-num{ width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center; font-size:13px;font-weight:700;background:var(--surface-3);color:var(--label) } .adm-step.done .adm-num{background:var(--acc);color:var(--on-acc)} .adm-step.todo .adm-num{background:var(--surface-3);color:var(--label-2)} .adm-step-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .adm-step-t b{font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.25} .adm-step-t span{font-size:13px;color:var(--label-2);line-height:1.3} .adm-step>summary .chev{color:var(--label-3);font-size:14px;transition:transform .18s ease;flex:none} .adm-step[open]>summary .chev{transform:rotate(90deg)} .adm-step-b{padding:2px 0 14px 38px} @media (max-width:380px){.adm-step-b{padding-left:0}} /* a dim explainer that reads like a sentence, not a footnote */ .adm-hint{font-size:13px;color:var(--label-2);line-height:1.45;margin:6px 0 10px} .adm-hint code{font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px} /* provider chips grouped under a small heading */ .adm-group{margin:0 0 12px} .adm-group-t{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label-3);margin:0 0 7px} .adm-chips{display:flex;flex-wrap:wrap;gap:8px} .adm-chips .chip{min-height:38px;display:inline-flex;align-items:center;gap:7px} .adm-chip-key{ font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:1px 6px;border-radius:999px; background:var(--acc-soft);color:var(--acc) } .chip.on .adm-chip-key{background:rgba(0,0,0,.18);color:inherit} /* label + control pairs inside a step */ .adm-field{display:flex;flex-direction:column;gap:6px;margin:0 0 10px} .adm-field>label{font-size:13px;font-weight:600;color:var(--label-2)} /* Inside a card the app's default field colour is the card's own colour, so the box was invisible and the placeholder floated in space. One shade up, and a size that is readable without iOS zooming into it. */ .adm-field .field{width:100%;background:var(--surface-2);font-size:16px;min-height:44px} .adm-select{ width:100%;min-height:44px;padding:10px 38px 10px 12px;border-radius:var(--r);border:0; background:var(--surface-2);color:var(--label);font-size:15px;appearance:none;-webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--label-2) 50%),linear-gradient(135deg,var(--label-2) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat } .adm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .adm-actions .btn{min-height:44px} /* inline result box under the Test button */ .adm-result{ margin-top:10px;padding:10px 12px;border-radius:var(--r);font-size:13.5px;line-height:1.45; background:var(--surface-2);color:var(--label) } .adm-result.ok{background:color-mix(in srgb,var(--green) 14%,transparent)} .adm-result.bad{background:color-mix(in srgb,var(--red) 14%,transparent)} .adm-result b{display:block;margin-bottom:2px} /* advanced / activity folds */ .adm-fold{border-top:var(--hair) solid var(--sep);margin-top:4px} .adm-fold>summary{ list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px; min-height:48px;padding:6px 0;font-size:15px;font-weight:600;letter-spacing:-.012em } .adm-fold>summary::-webkit-details-marker{display:none} .adm-fold>summary .chev{color:var(--label-3);font-size:14px;transition:transform .18s ease} .adm-fold[open]>summary .chev{transform:rotate(90deg)} .adm-fold-b{padding:0 0 12px} .adm-kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:var(--hair) solid var(--sep);font-size:14px} .adm-kv:last-child{border-bottom:0} .adm-kv .k{color:var(--label-2);flex:none} .adm-kv .v{text-align:right;min-width:0;overflow-wrap:anywhere} /* the two daily-limit numbers: a real field, not the browser's white default box */ .adm-kv .v input{ width:84px;min-height:40px;padding:6px 10px;text-align:right;font-size:16px;font-weight:600; border:0;border-radius:10px;background:var(--surface-2);color:var(--label);outline:none; -moz-appearance:textfield;appearance:textfield } .adm-kv .v input::-webkit-outer-spin-button,.adm-kv .v input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .adm-kv .v input:focus{box-shadow:inset 0 0 0 2px var(--acc)} .adm-log{display:flex;flex-direction:column} .adm-log-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:var(--hair) solid var(--sep);font-size:13.5px} .adm-log-row:last-child{border-bottom:0} .adm-log-row .when{color:var(--label-3);font-size:12px;flex:none} /* users list rows with a copy affordance for invite codes */ .adm-code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;letter-spacing:.08em; background:var(--surface-2);padding:4px 9px;border-radius:8px;font-size:14px } .adm-iconbtn{width:44px;height:44px;border-radius:12px;font-size:17px} .adm-empty{color:var(--label-3);font-size:13.5px;padding:10px 2px} /* ---------- the Coach before setup: a pitch, not a form ---------- */ .adm-hero{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:6px 2px 2px} .adm-hero-av{ width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px; background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 55%,var(--teal))); color:var(--on-acc);margin-bottom:8px;box-shadow:0 8px 24px -8px color-mix(in srgb,var(--acc) 55%,transparent) } .adm-hero h2{margin:0 0 4px;font-size:22px;letter-spacing:-.022em} .adm-hero p{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--label-2)} .adm-hero-feats{display:grid;gap:10px;margin-bottom:18px} .adm-hero-feats>div{display:flex;gap:11px;align-items:flex-start} .adm-hero-feats .icn{color:var(--acc);font-size:18px;flex:none;margin-top:2px} .adm-hero-feats span{font-size:13.5px;line-height:1.45;color:var(--label-2)} .adm-hero-feats b{color:var(--label);font-weight:600} .adm-hero .btn{width:100%} /* ---------- setup progress ---------- */ .adm-progress{height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:0 0 10px} .adm-progress i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width var(--med) var(--ease)} /* ---------- provider chips: clearly idle vs. clearly chosen ---------- */ .adm-chips .chip{ background:var(--surface-2);border:1.5px solid transparent;color:var(--label); font-weight:500;text-transform:none } .adm-chips .chip.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);font-weight:600} .adm-chips .chip:active{transform:scale(.97)} /* a finished step's summary reads as a receipt, not a control */ .adm-step.done>summary .adm-step-t span{color:var(--acc)} /* ============================================================================ Setvo — design system ---------------------------------------------------------------------------- Rebuilt around four rules, each aimed at a specific "generated" tell in the previous sheet: 1. ONE TYPE SCALE, MOSTLY REGULAR WEIGHT. The old sheet set font-weight 700/800 on nearly every element, which flattens hierarchy — when everything shouts, position is the only cue left. Here weight carries meaning: 600 for a title, 400 for its content, and size does the rest. 2. A NEUTRAL SURFACE RAMP. Cards are near-neutral greys a few points apart, not saturated blue-greys. Colour is spent only on the accent and on status. 3. HAIRLINES, NOT BORDERS. Separators are sub-pixel and inset past the icon rail, so a list reads as one object instead of a stack of outlined boxes. 4. MOTION THAT ACKNOWLEDGES, NOT ANIMATES. Presses scale ~2%, transitions run 140–220ms on an ease-out curve. Nothing bounces or slides for decoration. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { /* surfaces — dark is the default */ --bg: #000000; --bg-el: #0e0e10; /* elevated backdrop (sheets, bars) */ --surface: #1c1c1e; /* card / grouped-list fill */ --surface-2: #2c2c2e; /* pressed + nested fill */ --surface-3: #3a3a3c; /* controls (segmented track, switch off) */ /* text */ --label: #ffffff; --label-2: rgba(235,235,245,.60); --label-3: rgba(235,235,245,.32); --label-4: rgba(235,235,245,.18); /* lines */ --sep: rgba(84,84,88,.60); --sep-op: rgba(84,84,88,.34); /* for edges sitting over blur */ --hair: .5px; /* system palette (iOS dark values) */ --blue:#0a84ff; --green:#30d158; --red:#ff453a; --orange:#ff9f0a; --yellow:#ffd60a; --teal:#40c8e0; --indigo:#5e5ce6; --pink:#ff375f; --purple:#bf5af2; --mint:#63e6e2; --brown:#ac8e68; --grey:#8e8e93; /* accent (per-account, synced) */ --acc: var(--green); --acc-2:#248a3d; --on-acc:#000000; --acc-soft: color-mix(in srgb, var(--acc) 16%, transparent); --acc-line: color-mix(in srgb, var(--acc) 38%, transparent); /* geometry */ --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-card:14px; --pad:16px; --icon-stroke:1.7; /* motion */ --ease:cubic-bezier(.32,.72,0,1); --fast:140ms; --med:220ms; --sab:env(safe-area-inset-bottom,0px); --sat:env(safe-area-inset-top,0px); } :root[data-theme="light"] { --bg: #f2f2f7; --bg-el: #f7f7fa; --surface: #ffffff; --surface-2: #ececef; --surface-3: #e3e3e8; --label: #000000; --label-2: rgba(60,60,67,.60); --label-3: rgba(60,60,67,.30); --label-4: rgba(60,60,67,.16); --sep: rgba(60,60,67,.29); --sep-op: rgba(60,60,67,.20); --blue:#007aff; --green:#34c759; --red:#ff3b30; --orange:#ff9500; --yellow:#ffcc00; --teal:#30b0c7; --indigo:#5856d6; --pink:#ff2d55; --purple:#af52de; --mint:#00c7be; --brown:#a2845e; --grey:#8e8e93; --acc-2:#248a3d; --on-acc:#ffffff; } /* accents — Apple's system colours, so a recolour never looks off-system */ :root[data-accent="lime"] { --acc:var(--green); --acc-2:#248a3d; --on-acc:#000 } :root[data-accent="sky"] { --acc:var(--blue); --acc-2:#0060df; --on-acc:#fff } :root[data-accent="orange"]{ --acc:var(--orange); --acc-2:#c76b00; --on-acc:#000 } :root[data-accent="violet"]{ --acc:var(--purple); --acc-2:#8944ab; --on-acc:#fff } :root[data-accent="pink"] { --acc:var(--pink); --acc-2:#d70036; --on-acc:#fff } :root[data-accent="red"] { --acc:var(--red); --acc-2:#d70015; --on-acc:#fff } :root[data-accent="teal"] { --acc:var(--teal); --acc-2:#0071a4; --on-acc:#000 } :root[data-accent="gold"] { --acc:var(--yellow); --acc-2:#b25000; --on-acc:#000 } /* Label colour on a filled accent button is picked per accent by measured contrast, not by taste. Button text is 17px/600, so the AA bar is 3:1 (large text). White on the light-theme green is 2.22:1 and on teal 2.57:1 — both fail, and green is the DEFAULT accent, so every primary button in light mode was failing. Black scores 9.46 / 8.16 there. Blue, purple, pink and red keep white (3.5–4.1:1), which both passes and matches the platform convention. */ :root[data-theme="light"][data-accent="lime"], :root[data-theme="light"][data-accent="teal"] { --on-acc:#000 } :root[data-theme="light"][data-accent="sky"], :root[data-theme="light"][data-accent="violet"], :root[data-theme="light"][data-accent="pink"], :root[data-theme="light"][data-accent="red"] { --on-acc:#fff } /* ---------------------------------------------------------------- reset -- */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{ font-size:16px;background:var(--bg);overscroll-behavior:none;overflow-x:clip; -webkit-text-size-adjust:100%; } body{ background:var(--bg);color:var(--label); font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,system-ui,sans-serif; font-size:17px;line-height:1.29;letter-spacing:-.01em; min-height:100vh;min-height:100dvh;overscroll-behavior-y:none;overflow-x:clip; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; touch-action:manipulation; font-variant-numeric:tabular-nums; } button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;letter-spacing:inherit} input,select,textarea{font:inherit;color:var(--label);letter-spacing:inherit} img{max-width:100%} a{color:var(--acc);text-decoration:none} :focus{outline:none} :focus-visible{outline:2.5px solid var(--acc);outline-offset:2px;border-radius:6px} button,.chip,.tile,.item,.wday,.cal-d,.swatch,.hm-c,.lrow,.seg button,.stp button,.sld {-webkit-user-select:none;user-select:none} /* icons inherit colour and optical size from their context */ .icn{ width:1em;height:1em;flex:none;display:block; fill:none;stroke:currentColor;stroke-width:var(--icon-stroke); stroke-linecap:round;stroke-linejoin:round; } @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}} /* ------------------------------------------------------------ type scale -- */ .t-large {font-size:34px;line-height:1.06;font-weight:700;letter-spacing:-.028em} .t-title {font-size:28px;line-height:1.12;font-weight:700;letter-spacing:-.024em} .t-title2 {font-size:22px;line-height:1.18;font-weight:700;letter-spacing:-.021em} .t-head {font-size:17px;line-height:1.29;font-weight:600;letter-spacing:-.012em} .t-body {font-size:17px;line-height:1.29;font-weight:400;letter-spacing:-.012em} .t-callout{font-size:16px;line-height:1.31;font-weight:400;letter-spacing:-.009em} .t-sub {font-size:15px;line-height:1.33;font-weight:400;letter-spacing:-.006em} .t-foot {font-size:13px;line-height:1.38;font-weight:400;letter-spacing:-.001em} .t-cap {font-size:12px;line-height:1.33;font-weight:400;letter-spacing:0} .muted{color:var(--label-2)} .dim{color:var(--label-3)} .small{font-size:13px;line-height:1.38} .accent{color:var(--acc)} .capitalize{text-transform:capitalize} /* exercise names and body-part/equipment terms arrive lowercase from the dataset, so tags and chips capitalise by default. Anything that is a unit or a sentence opts back out — blanket-capitalising turned "60 kg" into "60 Kg" and a whole hint into Title Case. The compound selectors are needed: .tag/.chip come later in this file and would otherwise win on source order. */ .nocap,.tag.nocap,.chip.nocap{text-transform:none} /* ---------------------------------------------------------------- layout -- */ #app{ padding:calc(var(--sat) + 8px) var(--pad) calc(88px + var(--sab)); max-width:560px;margin:0 auto; } /* Keep the last workout controls clear of the mobile overlays without adding a second screenful of blank scroll space. The stacked rest timer needs the larger reserve. */ body.resting #app{padding-bottom:calc(206px + var(--sab))} .workout-end-spacer{height:0} @keyframes viewfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} #app.vfade{animation:viewfade var(--med) var(--ease)} /* sync banner: one line for a signed-in user whose changes are not on the server yet */ .sync-banner{ display:flex;align-items:center;gap:9px;width:100%;text-align:left; margin:0 0 12px;padding:9px 12px;border-radius:var(--r); background:color-mix(in srgb,var(--yellow) 16%,var(--surface));color:var(--label);font-size:13px;line-height:1.35; } .sync-banner.off{background:color-mix(in srgb,var(--label-3) 18%,var(--surface))} .sync-banner .icn,.sync-banner svg{flex:none;font-size:16px;color:var(--label-2)} /* large title, the way a nav bar does it */ .hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0 18px} /* The title block gives way, the button on the right never does: a flex item will not shrink below its longest word, so "Упражнения" at 34px or "Hi Bartholomew_Jones" used to push the gear / "By muscle" past the screen edge. Two things follow from letting it shrink. Below 420px — every phone width we test — the title drops a step to 30px, because the 95 to 125px the Library button leaves the Polish and Russian titles is less than half of "Ćwiczenia" or "Упражнения" at 34px and they came apart into three lines; at 30px all 14 packs take two at most. And a word that still does not fit is broken with overflow-wrap:break-word, which moves the whole word to the next line first and breaks it only if it does not fit there either — `anywhere` broke "Bartholomew_Jones" mid-word even at 412px, where a line of its own was waiting for it. hyphens:auto goes with them: the hyphen costs a character's worth of width in a box this tight, and that is what turned "Упражнения" into "Упра / жнен / ия". */ .hdr>div{min-width:0} .hdr>.btn{flex:none} .hdr h1{font-size:34px;line-height:1.06;font-weight:700;letter-spacing:-.028em;overflow-wrap:break-word} @media (max-width:420px){.hdr h1{font-size:30px}} .hdr .sub{color:var(--label-2);font-size:15px;letter-spacing:-.006em;margin-top:4px} .iconbtn{ width:36px;height:36px;border-radius:50%;flex:none; background:var(--surface);color:var(--label); display:flex;align-items:center;justify-content:center;font-size:18px; transition:background var(--fast),transform var(--fast); } .iconbtn:active{background:var(--surface-2);transform:scale(.92)} /* invisible hit-area extension: these look right at their size but fall short of a finger-sized target, so the pseudo element widens what the tap lands on without changing the painted box. Segmented buttons sit flush against each other, so they only grow vertically or the neighbour would steal the edge of the tap. */ .iconbtn,.chip,.seg button,.helpbtn{position:relative} .iconbtn::before,.chip::before,.seg button::before,.helpbtn::before{content:'';position:absolute;inset:-6px} .seg button::before{inset:-6px 0} .iconbtn.on-ss{background:var(--acc-soft);color:var(--acc)} .iconbtn:disabled{opacity:.32} h4.sec{ font-size:13px;font-weight:400;letter-spacing:-.004em;color:var(--label-2); text-transform:none;margin:22px 0 8px;padding:0 4px; } .card h2{ font-size:13px;font-weight:400;letter-spacing:-.004em;color:var(--label-2); text-transform:none;margin:0 0 12px; } .divider{height:var(--hair);background:var(--sep);margin:14px 0;border:0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .row{display:flex;align-items:center;gap:12px} .row.between{justify-content:space-between} /* The body-weight card header (Home and Stats): title on the left, Goal + Log on the right. In German the title and the two buttons ("Ziel", "+ Eintragen") outgrow a 320px card by about 55px, so the button pair may drop to a second line — still flush right, hence the auto margin. */ .bw-head{flex-wrap:wrap;row-gap:8px} .bw-head>.row{margin-left:auto} /* ----------------------------------------------------------------- card -- */ .card{ background:var(--surface);border-radius:var(--r-card); padding:16px;margin-bottom:12px; } .card .big{font-size:30px;font-weight:600;letter-spacing:-.026em;line-height:1.1} /* ------------------------------------------------------ inset group list -- */ .sect{margin-bottom:22px} .sect-t{ font-size:13px;font-weight:400;color:var(--label-2); letter-spacing:-.004em;padding:0 4px 7px;display:block; } .sect-b{background:var(--surface);border-radius:var(--r-card);overflow:hidden} .sect-f{font-size:13px;color:var(--label-2);padding:7px 4px 0;line-height:1.38} .lrow{ display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:11px 14px;min-height:46px;position:relative;color:var(--label); background:none; } /* hairline starts after the icon rail so the list reads as one object */ .lrow+.lrow::before{ content:'';position:absolute;left:14px;right:0;top:0;height:var(--hair);background:var(--sep); } .lrow:has(.lrow-i)+.lrow:has(.lrow-i)::before{left:55px} .lrow.tap:active{background:var(--surface-2)} .lrow-i{ width:29px;height:29px;border-radius:7px;flex:none;font-size:18px; display:flex;align-items:center;justify-content:center; background:var(--tint,var(--acc));color:#fff; } /* The title column never shrinks below its own longest word. With a basis of 0 and min-width:0 it only got what a capped value left over, and on a 320px phone "Progression" (96px) was painted over by "Linear progression" in a 37px box; min-width:auto — the flex default — is exactly the floor that case wants. A fixed 104px floor fixed that row and starved the rest: the backfill sheet's Date and Start-time rows have nothing but the title to give, so the floor shoved their fixed-width .timef off a 320px screen, and a short title like "Routine" (63px) took 104px away from the value beside it until "Freies Training" ellipsised. Asking only for the longest word takes nothing a row did not already owe the title. .lrow-t does not ellipsise on purpose — long settings titles wrap onto a second line — and the value next to it shrinks and ellipsises instead (below). */ .lrow-m{flex:1;min-width:auto;display:flex;flex-direction:column;gap:1px} .lrow-t{font-size:17px;letter-spacing:-.012em;line-height:1.25} .lrow-s{font-size:13px;color:var(--label-2);line-height:1.3} /* flex:none would let a long value ("Follow the routine (Linear progression)") run straight through the title next to it, since the title's column only holds out for its longest word. Letting the value shrink and ellipsise instead keeps the two out of each other's way. The cap is max-width, not flex-basis: .lrow-m is flex:1, so its basis is 0 and it absorbs none of the shrink — a long value would otherwise take the whole row and squeeze the title to 21px. A basis of 45% fixes that but reserves the space even for "3", costing the title 141px on the rows that need it most. A cap does neither. */ .lrow-v{color:var(--label-2);font-size:17px;letter-spacing:-.012em;flex:0 1 auto;max-width:55%;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right} .lrow-c{color:var(--label);font-size:15px;flex:none;--icon-stroke:2.4} .lrow-k{color:var(--acc);font-size:17px;flex:none;--icon-stroke:2.4} .lrow.danger,.lrow.danger .lrow-t{color:var(--red)} /* The Stats exercise name gets its own line so long names cannot run into the title. Two columns only — label/value on the left, chevron on the right — so this is for rows WITHOUT an icon. `.lrow-i` is not placed here; on a row that has one it would auto-place into the grid and push the layout around. Give it a leading column before using this anywhere else. */ .lrow.lrow-stack-value{ display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto; } .lrow.lrow-stack-value .lrow-m{grid-column:1;grid-row:1} .lrow.lrow-stack-value .lrow-v{grid-column:1;grid-row:2;width:100%;max-width:none;text-align:left} .lrow.lrow-stack-value .lrow-c{grid-column:2;grid-row:1 / span 2;align-self:center} /* an (i) before a row's control: painted small and dim so the control stays the loud thing, but with a finger-sized target like everything else — the padding is the hit area and the vertical negative margin keeps it from making the row taller. The horizontal ones pull the hit area back under the row's own 12px gap instead of adding to it. */ .helpbtn{ color:var(--label-3);font-size:16px;background:none;line-height:0;flex:none; margin:-11px -2px -11px -4px;padding:11px 4px; } .helpbtn:active{color:var(--label)} /* -------------------------------------------------------------- buttons -- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%; padding:14px 18px;border-radius:var(--r);font-size:17px;font-weight:600; letter-spacing:-.012em;background:var(--surface-2);color:var(--label); transition:transform var(--fast) var(--ease),background var(--fast),opacity var(--fast); } .btn .icn{font-size:19px} .btn:active{transform:scale(.975)} .btn.primary{background:var(--acc);color:var(--on-acc)} .btn.primary:active{background:var(--acc-2)} .btn.tinted{background:var(--acc-soft);color:var(--acc)} .btn.danger{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)} .btn.ghost,.btn.plain{background:none;color:var(--acc);font-weight:400} .btn.ghost:active,.btn.plain:active{background:var(--surface-2)} .btn.sm{padding:8px 14px;width:auto;font-size:15px;border-radius:var(--r-sm);gap:5px} .btn.sm .icn{font-size:16px} .btn.xs{padding:5px 10px;width:auto;font-size:13px;border-radius:7px;gap:4px} .btn:disabled{opacity:.32;pointer-events:none} /* ----------------------------------------------------------- tab bar ----- */ /* Nearly opaque, and deliberately so. At the old 72% the page read straight through the bar and the labels had to compete with whatever was scrolling behind them — nobody needs to read the content under a navigation bar. 94% keeps a hint of movement behind the glass without letting text through. The blur is also down from 24px to 10px: this is a fixed element, so the WebView recomposites the blurred region on every scroll frame, and on Android that is the single most expensive thing on the screen. See @supports below for the no-blur case. */ #tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:50; display:flex;justify-content:space-around;align-items:flex-end; padding:7px 6px calc(6px + var(--sab)); background:color-mix(in srgb,var(--bg-el) 94%,transparent); -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px); border-top:var(--hair) solid var(--sep-op); } :root[data-theme="light"] #tabbar{background:rgba(249,249,251,.94)} #tabbar button{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; color:var(--label-3);font-size:10px;font-weight:500;letter-spacing:.005em;padding-top:3px; transition:color var(--fast); } /* The inactive tint is semi-transparent, so wherever two strokes cross inside an icon (the calendar's hangers over its frame, the divider's caps on its sides) the alpha doubled up and the icon read as a stack of loose layers. Carrying the fade on the instead of in the stroke colour flattens the icon first and fades it as one shape — and it does that for every icon, not just this one. */ #tabbar button .icn{font-size:25px;--icon-stroke:1.65;color:var(--label)} #tabbar button.on{color:var(--acc)} #tabbar button.on .icn{--icon-stroke:2;color:inherit;opacity:1} #tabbar button.start{margin-top:-24px} #tabbar button.start .cir{ width:52px;height:52px;border-radius:50%;background:var(--acc);color:var(--on-acc); display:flex;align-items:center;justify-content:center;position:relative; box-shadow:0 6px 18px -4px color-mix(in srgb,var(--acc) 55%,transparent); transition:transform var(--fast) var(--ease); } #tabbar button.start:active .cir{transform:scale(.93)} #tabbar button.start .cir .icn{font-size:26px;--icon-stroke:2;color:inherit;opacity:1} #tabbar button.start span{color:var(--acc);font-weight:600} /* `.cir` is itself a , so the label rules above and below reach it too and outrank the `.cir` block — which is how the running state ended up painting an orange play glyph onto an orange disc. Both states restate their own colour. The disc is orange in either theme, so its glyph is black, not `--on-acc`. */ #tabbar button.start .cir{color:var(--on-acc)} #tabbar button.start.rec .cir{background:var(--orange);color:#000;box-shadow:0 6px 18px -4px color-mix(in srgb,var(--orange) 55%,transparent)} #tabbar button.start.rec span{color:var(--orange)} #tabbar button.start.rec .cir::after{ content:'';position:absolute;inset:0;border-radius:50%; border:2px solid var(--orange);animation:ping 1.9s var(--ease) infinite; } @keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}} /* NOTE on every backdrop-filter pair in this file: the -webkit- line comes first and the standard property last, which is the order a prefixed/standard pair wants — whichever is written last wins in the cascade, and that should be the standard name. Where backdrop-filter is genuinely unsupported there is no glass either — only the alpha, and the page shows through unblurred, which is the worst of both. Older Android WebViews never had it, and "reduce transparency" accessibility settings drop it. Those surfaces go fully opaque instead. Keep this in sync with the rules above. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #tabbar{background:var(--bg-el)} :root[data-theme="light"] #tabbar{background:#f9f9fb} #timer{background:var(--surface)} #toast{background:var(--surface-2)} } /* ------------------------------------------------------------ week strip -- */ .week{display:flex;justify-content:space-between;gap:4px} .wday{ flex:1;text-align:center;padding:8px 2px 9px;border-radius:10px; background:none;border:none;transition:background var(--fast); } .wday .lbl{font-size:11px;color:var(--label-3);font-weight:500;text-transform:uppercase;letter-spacing:.03em} .wday .num{font-size:17px;font-weight:400;margin:4px 0;letter-spacing:-.012em} .wday .dot{width:5px;height:5px;border-radius:50%;background:transparent;margin:0 auto} .wday .dot.plan{background:var(--label-3)} .wday .dot.ovr{background:var(--orange)} .wday .dot.done{background:var(--acc)} .wday:active{background:var(--surface-2)} .wday.today .num{ background:var(--acc);color:var(--on-acc);font-weight:600; width:31px;height:31px;border-radius:50%;display:flex;align-items:center; justify-content:center;margin:2px auto; } /* ----------------------------------------------------------------- list -- */ .list{display:flex;flex-direction:column;gap:8px} .item{ display:flex;align-items:center;gap:12px;background:var(--surface); border-radius:var(--r-card);padding:10px 12px;min-height:60px; transition:background var(--fast);text-align:left;width:100%; } .item:active{background:var(--surface-2)} .routine-list{position:relative} .routine-drag-row{touch-action:pan-y;-webkit-touch-callout:none;position:relative;transition:transform var(--fast) var(--ease)} .routine-list.is-reordering{user-select:none;-webkit-user-select:none} .routine-list.is-reordering .routine-drag-row{transition:none} .routine-drag-row.is-dragging{z-index:2;pointer-events:none} .routine-drag-row.is-dragging .item{box-shadow:0 10px 28px rgba(0,0,0,.22);background:var(--surface-2)} .routine-drop-indicator{ position:absolute;left:6px;right:6px;height:3px;border-radius:99px; background:var(--acc);transform:translateY(-50%);pointer-events:none;z-index:3; } .thumb{width:50px;height:50px;border-radius:9px;object-fit:cover;background:#fff;flex:none} /* exercise pictures are decoration inside tappable rows/cards: no save-image callout on a long press and no drag ghost when a scroll starts on the picture */ .thumb,.exmedia img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none} .thumb-x{ display:flex;align-items:center;justify-content:center;font-size:21px; background:var(--surface-2);color:var(--label-2); } .item .tt{font-size:16px;font-weight:400;line-height:1.25;letter-spacing:-.009em} .item .ss{color:var(--label-2);font-size:13px;margin-top:2px} .item .grow{flex:1;min-width:0} .chev{color:var(--label);flex:none;font-size:15px;--icon-stroke:2.4} .tag{ display:inline-flex;align-items:center;gap:3px;background:var(--surface-2); color:var(--label-2);border-radius:6px;padding:3px 7px;font-size:12px; font-weight:500;text-transform:capitalize; } .tag.acc{background:var(--acc-soft);color:var(--acc)} /* favourite marker (issue #6): a small yellow star glued to the exercise name — distinct from the accent "chosen" tag at the row's end, which means "already in a routine or the log" */ .fav-star{color:var(--yellow);font-size:12px;display:inline-block;margin-right:5px;vertical-align:-1px} .fav-btn{margin-top:-4px} .fav-btn.on{color:var(--yellow)} /* ---------------------------------------------------------------- chips -- */ .chips{ display:flex;gap:7px;overflow-x:auto;padding:4px 4px 6px; /* room for a chip's focus outline inside a sheet (#162) */ scrollbar-width:none; } .chips::-webkit-scrollbar{display:none} /* horizontal strips: keep a sideways overscroll from chaining to the page and leave a margin when a chip is scrolled into view. The chip row also claims the horizontal axis (touch-action:pan-x): on a phone a slightly diagonal swipe along the chips used to hand the gesture to the page, which scrolled down instead. The row is 32px tall, so losing a vertical scroll that happens to start on it costs nothing; the ~130px heatmap wrap keeps both axes, there the trade-off goes the other way. The chips contain both axes: once a strip is at its end, a diagonal drag must not chain into the page either. */ .chips,.hm-wrap{overscroll-behavior-x:contain;scroll-padding-inline:16px} .chips{touch-action:pan-x;overscroll-behavior:contain} /* The chip hit-area (.chip::before, inset:-6px) must not poke out of the strip vertically: overflow-x:auto makes overflow-y auto as well, and that 6px of positioned overflow gave the 32px row a 36px scroll height — a diagonal swipe, wheel or drag then scrolled the whole row up by 4px and left it there. Vertical slop is clipped by the strip anyway. */ .chips .chip::before{top:0;bottom:0} .chip{ flex:none;padding:6px 13px;border-radius:99px;background:var(--surface); font-size:14px;font-weight:400;color:var(--label);text-transform:capitalize; letter-spacing:-.006em;transition:background var(--fast),color var(--fast); } .chip:active{background:var(--surface-2)} .chip.on{background:var(--acc);color:var(--on-acc);font-weight:500} .chip.on .dim{color:color-mix(in srgb,var(--on-acc) 62%,transparent)} /* On a phone these rows scroll by swipe. On a pointer device lib/hchips.js lets you click-drag anywhere on the row to pull it along; a grab cursor on rows that actually overflow (data-xscroll, set by hchips.js on hover) is the hint. */ @media (hover:hover) and (pointer:fine){ .chips[data-xscroll]{cursor:grab} } /* while a drag is in flight: no text selection, grabbing cursor everywhere (the `*` rule outweighs button{cursor:pointer} so it holds even over a chip) */ body.chips-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none} body.chips-dragging *{cursor:inherit} /* =========================== CONTROLS ==================================== */ /* --- text field --- */ .field,.input{ width:100%;background:var(--surface);border:none;border-radius:var(--r); padding:13px 15px;font-size:17px;letter-spacing:-.012em;outline:none; transition:box-shadow var(--fast); } .field::placeholder,.input::placeholder{color:var(--label-3)} .field:focus,.input:focus{box-shadow:inset 0 0 0 2px var(--acc)} .field.area,textarea.input{min-height:92px;resize:vertical;line-height:1.42} .exnote{ background:var(--surface);border-radius:var(--r);padding:13px 15px; line-height:1.45;white-space:pre-wrap;font-size:15px;margin-bottom:10px;color:var(--label-2); } /* --- search field --- */ .searchf{position:relative;display:flex;align-items:center} .searchf .lead{ position:absolute;left:11px;font-size:16px;color:var(--label-3); pointer-events:none;--icon-stroke:2.1;z-index:1; } .searchf .field{padding-left:35px;padding-right:36px;background:var(--surface-2);border-radius:10px} :root[data-theme="light"] .searchf .field{background:rgba(118,118,128,.12)} .searchf .clear{ position:absolute;right:8px;width:22px;height:22px;border-radius:50%; background:var(--label-3);color:var(--bg);display:flex;align-items:center; justify-content:center;font-size:11px;--icon-stroke:3; } /* legacy .search wrapper */ .search{position:relative} .search .input{padding-left:35px;background:var(--surface-2);border-radius:10px} :root[data-theme="light"] .search .input{background:rgba(118,118,128,.12)} .search>svg{ position:absolute;left:11px;top:50%;transform:translateY(-50%);z-index:1; width:16px;height:16px;stroke:var(--label-3);fill:none;stroke-width:2.1;stroke-linecap:round; } /* --- switch --- */ .sw{ width:51px;height:31px;border-radius:99px;background:var(--surface-3); flex:none;padding:2px;display:flex;align-items:center; transition:background var(--med) var(--ease); } .sw .knob{ width:27px;height:27px;border-radius:50%;background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16); transition:transform var(--med) var(--ease),width var(--fast) var(--ease); } .sw.on{background:var(--acc)} .sw.on .knob{transform:translateX(20px)} .sw:active .knob{width:31px} .sw.on:active .knob{transform:translateX(16px)} .sw:disabled{opacity:.4} /* --- segmented control --- */ /* flex, not grid: an absolutely-positioned child of a GRID container is placed into a grid area, so the sliding thumb resolved top/bottom against the wrong box and overflowed the track. A flex container leaves abspos children on the padding box, which is what the thumb needs. */ .seg{ position:relative;display:flex; background:var(--surface-3);border-radius:9px;padding:2px;isolation:isolate; } .seg>button{flex:1 1 0;min-width:0} :root[data-theme="light"] .seg{background:rgba(118,118,128,.12)} .seg-sel{ position:absolute;z-index:0;top:2px;bottom:2px;left:2px; width:calc((100% - 4px)/var(--n)); transform:translateX(calc(100% * var(--i))); background:var(--surface);border-radius:7px; box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.06); transition:transform var(--med) var(--ease); } :root[data-theme="light"] .seg-sel{background:#fff} .seg button{ position:relative;z-index:1;padding:6px 8px;font-size:14px;font-weight:500; letter-spacing:-.006em;color:var(--label);display:flex;align-items:center; justify-content:center;gap:5px;min-height:30px;transition:opacity var(--fast); } .seg button .icn{font-size:16px} .seg button:not(.on){color:var(--label-2);font-weight:400} .seg button:active{opacity:.5} /* sitting in a list row: shrink to content instead of filling the row. The control never shrinks below its labels, so a row whose title and control do not both fit — most translated packs at 390px: "Übungs-Animationen" against "Voll · Klein · Aus" — wraps the control onto its own line under the title instead of painting it over the title. */ .seg-inline{flex:none;min-width:132px;max-width:100%;margin-left:auto} .lrow:has(.seg-inline){flex-wrap:wrap} .lrow:has(.seg-inline) .lrow-m{min-width:min(150px,100%)} .seg-range{margin-bottom:10px} .seg-inline button{padding:5px 10px;font-size:13px;min-height:28px} .seg-inline button .icn{font-size:14px} /* native time input, restyled to sit in a row like a value label */ .timef{ background:var(--surface-2);border:none;border-radius:8px;padding:6px 10px; font-size:16px;color:var(--label);outline:none;font-variant-numeric:tabular-nums; } /* A date or time field is as wide as the browser draws it and will not give way, and neither will the title beside it once that is down to its longest word: the Polish "Godzina rozpoczęcia" plus the clock leaves a 320px row 17px short, and the field then hangs over the edge of the card with its picker icon. Such a row wraps the field onto a line of its own under the title instead, still flush right — the same way a row carrying an inline segmented control does. */ .lrow:has(.timef){flex-wrap:wrap} .lrow>.timef{margin-left:auto} .timef::-webkit-calendar-picker-indicator{filter:invert(.5)} :root[data-theme="light"] .timef::-webkit-calendar-picker-indicator{filter:none} /* --- stepper --- */ .stp-w{display:flex;flex-direction:column;gap:6px;min-width:0} .stp-l{font-size:13px;color:var(--label-2);text-align:center} .stp{ display:flex;align-items:center;background:var(--surface-2); border-radius:10px;overflow:hidden;min-width:0; } .stp button{ width:40px;height:44px;flex:none;color:var(--label);font-size:16px; display:flex;align-items:center;justify-content:center; transition:background var(--fast);--icon-stroke:2.2; } .stp button:active{background:var(--surface-3)} .stp .val{ flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:3px;padding:0 2px; align-self:stretch; } .stp .val i{font-style:normal;font-size:12px;color:var(--label-2);flex:none} .stp .num{ width:100%;min-width:0;text-align:center;background:none;border:none;outline:none; font-size:17px;font-weight:500;letter-spacing:-.012em;padding:0; -moz-appearance:textfield;appearance:textfield; /* the field is the whole height of the stepper, not just its 18px text line, so a tap anywhere between the two buttons focuses it */ height:100%;min-height:40px;cursor:text; } .stp .num::-webkit-inner-spin-button{display:none} .stp.invalid{box-shadow:inset 0 0 0 1px var(--red)} /* --- slider --- */ .sld{position:relative;height:32px;display:flex;align-items:center;cursor:pointer;touch-action:none} .sld-track{ position:absolute;left:0;right:0;height:6px;border-radius:99px; background:var(--surface-3);overflow:hidden; } .sld-fill{display:block;height:100%;background:var(--acc);border-radius:99px} .sld-knob{ position:absolute;width:26px;height:26px;border-radius:50%;background:#fff; transform:translateX(-50%); box-shadow:0 4px 10px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.16); transition:transform var(--fast) var(--ease); } .sld.dragging .sld-knob{transform:translateX(-50%) scale(1.14)} /* --- checkbox --- */ .chk,.ck{ width:30px;height:30px;border-radius:50%;flex:none;position:relative; display:flex;align-items:center;justify-content:center; background:none;box-shadow:inset 0 0 0 1.8px var(--label-4);color:transparent; transition:background var(--fast),box-shadow var(--fast),color var(--fast),transform var(--fast); } .chk .icn{font-size:16px;--icon-stroke:2.6} /* 30px is the right look next to a stepper but a poor target: extend the tap area to 44px without painting it; the left side stays shorter so the stepper's + button keeps its edge */ .chk::before,.ck::before{content:'';position:absolute;inset:-7px -7px -7px -4px} .chk.on{background:var(--acc);box-shadow:none;color:var(--on-acc)} .chk:active,.ck:active{transform:scale(.9)} .ck svg{ width:16px;height:16px;stroke:transparent;fill:none;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--fast); } .ck.on{background:var(--acc);box-shadow:none} .ck.on svg{stroke:var(--on-acc)} /* ------------------------------------------------------------- workout --- */ /* Workout header. In list mode it is pinned: pulled up over #app's top padding so it sits flush with the screen edge from the first pixel, and given the page's own ground plus a light blur so the rows scrolling underneath read as underneath. */ .whdr.stick{ position:sticky;top:0;z-index:20; margin:calc(-1 * (var(--sat) + 8px)) calc(-1 * var(--pad)) 6px; padding:calc(var(--sat) + 8px) var(--pad) 0; background:color-mix(in srgb,var(--bg) 94%,transparent); -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px); } .whdr.stick .hdr{margin-bottom:12px} .whdr.stick .wprog{margin-bottom:10px} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .whdr.stick{background:var(--bg)} } .wprog{height:4px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-bottom:16px} .wprog i{display:block;height:100%;background:var(--acc);border-radius:99px;transition:width var(--med) var(--ease)} .exmedia{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;margin-bottom:12px} .exmedia img{width:100%;height:320px;object-fit:contain;display:block} .exmedia .gifhint,.exmedia .giftoggle{ position:absolute;bottom:9px;display:inline-flex;align-items:center;gap:4px; background:rgba(0,0,0,.45);color:#fff;border-radius:99px;padding:5px 11px; font-size:12px;font-weight:500; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } .exmedia .gifhint{right:9px} .exmedia .giftoggle{left:9px} .exmedia .gifhint .icn,.exmedia .giftoggle .icn{font-size:13px} /* superset: both exercises are on screen together, so the animations have to give way — at 180px you had to scroll a full screen between two exercises done back-to-back */ .exmedia.compact img{height:120px} .exmedia.mini img{height:84px} /* both the animation and the still failed to load: a neutral tile instead of the browser's broken-image glyph; same heights as the picture so the card does not jump. tap retries. */ .exmedia.broken{background:var(--surface-2)} .exmedia-x{width:100%;height:320px;display:flex;align-items:center;justify-content:center;color:var(--label-3);font-size:34px} .exmedia.compact .exmedia-x{height:120px} .exmedia.mini .exmedia-x{height:84px} .sethead{ display:flex;align-items:center;gap:8px;padding:0 0 6px; font-size:11px;color:var(--label-3);font-weight:500;text-transform:uppercase;letter-spacing:.045em; } .sethead .n-sp{width:24px;flex:none} .sethead .w-sp{flex:1.4;text-align:center} .sethead .r-sp{flex:1;text-align:center} .sethead .eff-sp{text-align:center} .sethead .ck-sp{width:30px;flex:none} .setrow{display:flex;align-items:center;gap:8px;padding:7px 0;position:relative} .setrow+.setrow::before{ content:'';position:absolute;left:32px;right:0;top:0;height:var(--hair);background:var(--sep); } .setph{margin:8px 0 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px} .setph::after{content:'';flex:1;height:1px;background:var(--sep)} .setsep{height:1px;background:var(--sep);margin:9px 0} /* the per-side wrapper carries its own .n (the set number in front of the L/R rows) */ .setrow .n,.setrow-side>.n{ width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--label-2); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex:none; position:relative;padding:0;border:0;font-family:inherit;cursor:pointer; transition:background var(--fast),color var(--fast); } .setrow .stp.w{flex:1.4;min-width:0} .setrow .stp.r{flex:1;min-width:0} /* The number outranks the buttons in every set row, not only the ones with an effort column that #235 covered: a 320 px phone left 0–6 px for the reps number and showed 102.5 as "102", and the cardio row's 10.5 km/h read "10" at 368 px (QA C2, C21, C24). The field reserves the widest value it shows at its font — "227.5" kg, "100" reps or "10.5" km/h (`--num`, incl. the field's 4 px padding and 2 px against font rounding) — and the two buttons give up width first, down to an 18 px floor, before anything is clipped. The cell itself is never narrower than number + two floors, so the row's flex hands a starving cell width from the others instead of clipping its buttons. */ .setrow .stp button{width:32px;height:40px} /* Only the weight/reps buttons: `.effcell-stp` is a `.stp` too, and its value is a `