/* landing/assets/app-ui.css
   TOKEN MIRROR of src/ui/theme.ts — if the app theme changes, update here.
   Replica classes mirror the app's real components (src/ui/workoutDay/styles.ts,
   meal cards, LogSessionScreen, TrainingScreen calendar). Mockups on the landing
   page are built ONLY from these classes — never screenshots. */
:root{
  --ink:#0B1220; --forest:#001F63; --forest-soft:#16357E;
  --bone:#F5F6F8; --paper:#FFFFFF;
  --lime:#1E66FF; --green:#35C98A; --violet:#7C6BF5; --cardio:#1E66FF;
  --danger:#E5484D; --amber:#F5A623;
  --muted:#4B5563; --muted-soft:#9AA3B2;
  --line:rgba(11,18,32,.10); --card-border:#E7EBF1; --tile:#F7F9FC; --track:#EAEEF4;
}
/* the ONE mockup chrome (spec: paper frame, bone screen) */
.app-frame{background:var(--paper);border:1px solid var(--card-border);border-radius:26px;box-shadow:0 24px 64px rgba(11,18,32,.10);padding:14px;width:100%}
.app-screen{background:var(--bone);border-radius:18px;padding:14px;color:var(--ink)}
/* day card (M1) */
.au-title{font:700 16px var(--disp);color:var(--forest);margin-bottom:12px}
.au-toggle{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:8px}
.au-cb{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--muted-soft);display:flex;align-items:center;justify-content:center;color:#fff;font:800 11px var(--body);flex:none}
.au-cb.on-g{background:var(--green);border-color:var(--green)}
.au-cb.on-b{background:var(--cardio);border-color:var(--cardio)}
.au-cb.on-v{background:var(--violet);border-color:var(--violet)}
.au-dot{width:8px;height:8px;border-radius:4px;flex:none}
.au-tlabel{font:600 14px var(--body)}
.au-badge{font:600 11px var(--body);margin-left:auto;flex-shrink:1;text-align:right}
.au-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 8px 4px}
.au-chip{font:600 11.5px var(--body);color:var(--muted);border:1px solid var(--card-border);border-radius:999px;padding:5px 10px;background:var(--paper)}
.au-chip.on{background:rgba(30,102,255,.13);border-color:var(--cardio);color:var(--cardio)}
.au-sect{font:600 11.5px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px}
.au-prog{display:flex;align-items:center;gap:12px;border:1px solid var(--card-border);border-left:3px solid var(--green);border-radius:12px;padding:12px;background:#FBFDFC}
.au-pname{font:600 14px var(--body);color:var(--ink)}
.au-psub{font:600 11.5px var(--body);color:var(--green);margin-top:2px}
.au-plink{margin-left:auto;font:600 12.5px var(--body);color:var(--lime)}
.au-comment{background:var(--bone);border-left:3px solid var(--violet);border-radius:12px;padding:10px;margin-top:10px}
.au-cwho{font:800 10px var(--body);color:var(--violet);margin-bottom:3px}
.au-cbody{font:500 13px var(--body)}
.au-actions{display:flex;gap:10px;margin-top:14px}
.au-btn{flex:1;text-align:center;font:600 14px var(--body);padding:12px 0;border-radius:999px}
.au-cancel{border:1px solid var(--line);color:var(--muted)}
.au-save{background:var(--lime);color:#fff;font-family:var(--disp);font-weight:700}
/* meal card + AI badge (M2) */
.au-meal{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--card-border);border-radius:14px;padding:10px}
.au-thumb{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,#E8EDF5,#F4F7FB);flex:none;object-fit:cover}
.au-mname{font:600 13.5px var(--body)}
.au-mtime{font:500 11px var(--body);color:var(--muted-soft)}
.au-ai{display:inline-block;font:700 10.5px var(--body);color:var(--lime);background:rgba(30,102,255,.12);border-radius:7px;padding:3px 8px;margin-top:5px}
/* correction thread (M3) */
.au-fix{background:var(--paper);border:1px solid var(--card-border);border-radius:14px;padding:12px}
.au-fixrow{font:600 13px var(--body)}
.au-fixrow s{color:var(--muted-soft);font-weight:500}
.au-fixrow b{color:var(--green)}
.au-note{background:var(--bone);border-left:3px solid var(--lime);border-radius:12px;padding:10px;margin-top:10px}
.au-nwho{font:800 10px var(--body);color:var(--lime);margin-bottom:3px}
/* set rows (M4) */
.au-ex{font:600 13.5px var(--body);margin-bottom:6px}
.au-ex small{font:500 11px var(--body);color:var(--muted-soft)}
.au-set{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--card-border);border-radius:10px;padding:8px 11px;margin-bottom:6px;font:500 13px var(--body)}
.au-set .hint{margin-left:auto;font:500 11px var(--body);color:var(--muted-soft)}
.au-set .done{color:var(--green);font-weight:800}
/* calendar (M5) */
.au-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.au-cal .wd{font:600 9.5px var(--body);color:var(--muted-soft);text-align:center;padding-bottom:3px}
.au-cell{aspect-ratio:1;background:var(--paper);border:1px solid var(--card-border);border-radius:9px;padding:4px;position:relative;font:600 10.5px var(--body)}
.au-cell.sel{border:1.5px solid var(--lime)}
.au-cell.dim{background:var(--bone);color:var(--muted-soft)}
.au-cell .dots{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:center;gap:2.5px}
.au-cell .d{width:5px;height:5px;border-radius:3px}
/* roster (M6) */
.au-client{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--card-border);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.au-ava{width:34px;height:34px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;font:700 13px var(--disp);flex:none}
.au-rn{font:600 13px var(--body)}
.au-rs{font:500 11px var(--body);color:var(--muted)}
.au-rs.ok{color:var(--green)} .au-rs.warn{color:var(--amber)}
/* motion budget: ≤1 moment per mockup */
@keyframes au-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.au-animate{animation:au-in .5s ease .6s both}
@media (prefers-reduced-motion: reduce){.au-animate{animation:none}}

/* ===== client HOME screen replica (hero phone) — mirrors the app's home ===== */
.phone{width:322px;background:#0B1220;border-radius:34px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.phone .screen{background:var(--bone);border-radius:26px;overflow:hidden;padding:15px;color:var(--ink)}
.ch-card{background:var(--paper);border:1px solid var(--card-border);border-radius:14px;padding:15px;margin-bottom:12px}
.ch-head{display:flex;align-items:center;gap:7px;font:700 13px var(--disp);color:var(--ink)}
.ch-head .chev{margin-left:auto;color:var(--muted-soft);font:600 12px var(--body)}
.ch-stats{display:flex;gap:10px;margin-top:13px}
.ch-stat{flex:1}
.ch-stat .lab{display:flex;align-items:center;gap:4px;font:600 9.5px var(--body);color:var(--muted)}
.ch-stat .lab .d{width:6px;height:6px;border-radius:3px}
.ch-stat .val{font:700 15px var(--disp);color:var(--ink);margin:3px 0 4px}
.ch-stat .val small{font:600 10px var(--body);color:var(--muted-soft)}
.ch-track{height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.ch-track i{display:block;height:100%;border-radius:3px}
.ch-streak{font:600 10.5px var(--body);color:var(--amber);margin-top:12px}
.ch-nut{display:flex;gap:16px;align-items:center;margin-top:13px}
.ch-ring{width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--lime) 87%,var(--track) 0);display:flex;align-items:center;justify-content:center;flex:none}
.ch-ring .in{width:72px;height:72px;border-radius:50%;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ch-ring .kc{font:700 17px var(--disp)}
.ch-ring .of{font:600 9.5px var(--body);color:var(--muted-soft)}
.ch-macros{flex:1;display:flex;flex-direction:column;gap:11px}
.ch-m .top{display:flex;justify-content:space-between;font:600 10.5px var(--body);color:var(--muted);margin-bottom:3px}
.ch-coach{display:flex;align-items:center;gap:9px}
.ch-coach .ava{width:30px;height:30px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;font:700 11px var(--disp);flex:none}
.ch-coach .t{font:700 12px var(--body)}
.ch-coach .s{font:500 9.5px var(--body);color:var(--muted-soft)}
.ch-coach .badge{margin-left:auto;width:18px;height:18px;border-radius:9px;background:var(--lime);color:#fff;font:700 10px var(--body);display:flex;align-items:center;justify-content:center}
.ch-btns{display:flex;gap:8px;margin-top:2px}
.ch-btn{flex:1;text-align:center;font:700 11.5px var(--body);border-radius:10px;padding:10px 0}
.ch-btn.dark{background:var(--forest);color:#fff}
.ch-btn.light{background:var(--paper);border:1px solid var(--card-border);color:var(--ink)}

/* ===== FAITHFUL replicas (extracted specs) ===== */
/* real client/coach meal card — NutritionScreen.tsx:141-150 / CoachClientDetailScreen.tsx:306-324 */
.rm-card{display:flex;align-items:center;gap:13px;padding:10px;background:var(--paper);border:1px solid var(--card-border);border-radius:18px;box-shadow:0 6px 16px rgba(16,32,64,.05);color:var(--ink)}
.rm-thumb{width:54px;height:54px;border-radius:13px;flex:none;background:var(--forest);display:flex;align-items:center;justify-content:center}
.rm-info{flex:1;min-width:0}
.rm-name{font:600 14px var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-sub{font:500 11.5px var(--body);color:var(--muted);margin-top:3px}
.rm-badge{display:inline-block;font:600 10.5px var(--body);color:var(--forest);background:rgba(30,102,255,.18);border-radius:6px;padding:2px 7px;margin-top:5px}
.rm-kcal{text-align:right}
.rm-kcal .n{font:600 14px var(--disp);color:var(--ink)}
.rm-kcal .u{font:500 10px var(--body);color:var(--muted-soft)}
.rm-chat{display:flex;align-items:center;gap:5px}
/* real set-logging exercise card — LogSessionScreen.tsx:374-429 */
.rx-card{background:var(--paper);border:1px solid var(--card-border);border-radius:18px;padding:12px;box-shadow:0 6px 16px rgba(16,32,64,.05);color:var(--ink)}
.rx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rx-name{font:600 15px var(--body);color:var(--ink)}
.rx-count{font:500 12px var(--body);color:var(--muted-soft)}
.rx-last{font:500 11px var(--body);color:var(--muted-soft);margin:-2px 0 8px}
.rx-cols{display:flex;gap:8px;align-items:center;margin-bottom:4px;font:600 10px var(--body);color:var(--muted-soft);text-transform:uppercase}
.rx-cols .c1{width:38px;text-align:center}.rx-cols .cf{flex:1;text-align:center}.rx-cols .c2{width:34px;text-align:center}
.rx-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.rx-num{width:38px;text-align:center;flex:none}
.rx-num .n{font:600 13px var(--body);color:var(--ink)}
.rx-num .t{font:500 9.5px var(--body);color:var(--muted-soft)}
.rx-in{flex:1;min-width:0;background:var(--bone);border:1px solid var(--card-border);border-radius:12px;padding:7px 8px;font:500 13.5px var(--body);color:var(--ink);text-align:center}
.rx-in.empty{color:var(--muted-soft)}
.rx-chk{width:34px;display:flex;justify-content:center;flex:none}
.rx-chk .c{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--green);display:flex;align-items:center;justify-content:center;font:700 14px var(--body);color:#fff}
.rx-chk .c.on{background:var(--green)}
.rx-add{font:600 12.5px var(--body);color:var(--lime);margin-top:2px}
/* real thread bubble (client sees coach) — ThreadScreen.tsx:204-214 */
.rt-author{font:600 11px var(--body);color:var(--muted);margin:0 0 3px 4px}
.rt-bubble{background:var(--forest);color:#EAF1FF;border-radius:18px;border-bottom-left-radius:6px;padding:10px 14px;font:500 13.5px var(--body);line-height:19px;max-width:88%;display:inline-block}
.rt-time{font:400 10.5px var(--body);color:var(--muted-soft);margin:3px 4px}

/* thread: coach's own message (light-blue, right) — ThreadScreen.tsx:210 */
.rt-right{display:flex;flex-direction:column;align-items:flex-end}
.rt-bubble.mine{background:rgba(30,102,255,.32);color:var(--ink);border-bottom-left-radius:18px;border-bottom-right-radius:6px}
/* day header — components.tsx:409-426 */
.rd-head{display:flex;align-items:center;gap:9px;margin:2px 0 8px}
.rd-head .tick{width:7px;height:7px;border-radius:4px;background:var(--lime);flex:none}
.rd-head .lab{font:600 13.5px var(--disp);color:var(--ink);letter-spacing:-.2px}
.rd-head .ln{flex:1;height:1px;background:var(--line)}
.rd-head .meta{font:500 11.5px var(--body);color:var(--muted)}
/* two-phone row */
.scr-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;justify-items:center;align-items:start}
@media(max-width:820px){.scr-row{grid-template-columns:1fr;gap:32px}}
.rm-card + .rm-card{margin-top:10px}

/* photo variant of the meal thumb (photo-present state) */
.rm-thumb.photo{background:none}
.rm-thumb.photo img{width:54px;height:54px;border-radius:13px;object-fit:cover;display:block}
/* AddMealScreen replica — AddMealScreen.tsx:198-226 */
.am-eyebrow{font:500 12px var(--body);color:var(--muted)}
.am-title{font:600 20px var(--disp);color:var(--ink);letter-spacing:-.5px;margin:2px 0 12px}
.am-preview{width:100%;height:150px;border-radius:18px;border:1px solid var(--card-border);object-fit:cover;display:block}
.am-card{background:var(--paper);border:1px solid var(--card-border);border-radius:18px;padding:13px;display:flex;flex-direction:column;gap:11px;margin-top:12px;box-shadow:0 6px 16px rgba(16,32,64,.05)}
.am-tag{font:600 10.5px var(--body);color:var(--forest);background:rgba(30,102,255,.3);border-radius:6px;padding:3px 8px;align-self:flex-start}
.am-label{font:600 12px var(--body);color:var(--ink);margin-bottom:5px}
.am-input{background:var(--bone);border:1px solid var(--card-border);border-radius:12px;padding:10px 12px;font:500 13px var(--body);color:var(--ink)}
.am-row{display:flex;gap:10px}
.am-row>div{flex:1}
.am-save{background:var(--lime);color:#fff;border-radius:999px;padding:13px 0;text-align:center;font:600 13.5px var(--disp);margin-top:12px}

/* thread composer — ThreadScreen.tsx:227,240 */
.rt-composer{display:flex;gap:8px;align-items:center;margin-top:14px}
.rt-input{flex:1;background:var(--bone);border:1px solid var(--card-border);border-radius:18px;padding:11px 14px;font:500 12.5px var(--body);color:var(--muted-soft)}
.rt-send{background:var(--lime);color:#fff;border-radius:999px;padding:11px 18px;font:600 13px var(--disp)}

/* nutrition pair: identical phone heights; bottom bars pinned */
.scr-row .screen{height:560px;display:flex;flex-direction:column}
.scr-row .am-save{margin-top:auto}
.scr-row .rt-composer{margin-top:auto}

/* TrainingScreen replica — TrainingScreen.tsx:446-476 */
.tr-goals{display:flex;gap:8px}
.tr-goal{flex:1;background:var(--paper);border:1px solid var(--card-border);border-radius:14px;padding:10px;box-shadow:0 6px 16px rgba(16,32,64,.05)}
.tr-goal .hd{display:flex;align-items:center;gap:5px;font:600 10.5px var(--body);color:var(--muted)}
.tr-goal .hd .d{width:7px;height:7px;border-radius:4px}
.tr-goal .n{font:600 18px var(--disp);color:var(--forest);margin:4px 0 7px}
.tr-goal .n small{font:500 11px var(--body);color:var(--muted-soft)}
.tr-goal .tk{height:5px;background:var(--track);border-radius:3px;overflow:hidden}
.tr-goal .tk i{display:block;height:100%;border-radius:3px}
.tr-streak{font:600 11px var(--body);color:var(--muted);text-align:center;margin-top:10px}
.tr-nav{display:flex;align-items:center;justify-content:space-between;margin:12px 0 2px}
.tr-nav .ar{font:500 12px var(--body);color:var(--muted-soft)}
.tr-nav .ml{font:600 14px var(--disp);color:var(--forest)}
.tr-hint{font:500 10px var(--body);color:var(--muted-soft);text-align:right;margin-bottom:5px}
.tr-week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
.tr-week span{text-align:center;font:600 9.5px var(--body);color:var(--muted-soft)}
.tr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.tr-cell{aspect-ratio:1;background:var(--paper);border:1px solid var(--card-border);border-radius:10px;padding:3px 4px;position:relative;font:600 11px var(--body);color:var(--ink)}
.tr-cell.other{background:var(--bone);color:var(--muted-soft)}
.tr-cell.today{border:1.5px solid var(--lime)}
.tr-cell.future{opacity:.4}
.tr-cell .dts{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:center;gap:2.5px}
.tr-cell .dt{width:6px;height:6px;border-radius:3px}
/* LogSessionScreen header — LogSessionScreen.tsx:383-388 */
.ls-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.ls-title{font:600 19px var(--disp);color:var(--forest);letter-spacing:-.5px}
.ls-finish{background:var(--green);color:#fff;border-radius:999px;padding:7px 14px;font:600 12px var(--disp)}
.ls-progress{font:500 12px var(--body);color:var(--muted);margin-bottom:6px}
.ls-muscle{font:600 11px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:12px 0 7px}
.rx-card + .ls-muscle{margin-top:14px}

/* three-phone row */
.scr-row.three{grid-template-columns:repeat(3,1fr)}
.scr-row.three .phone{width:100%;max-width:322px}
@media(max-width:900px){.scr-row.three{grid-template-columns:1fr}}
/* screen header (Eyebrow + title) — components.tsx:632 + screen titles */
.sc-eyebrow{font:500 9px var(--body);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted-soft)}
.sc-title{font:600 19px var(--disp);color:var(--forest);letter-spacing:-.5px;margin:2px 0 10px}
/* program builder replica — CoachProgramBuilderScreen.tsx:183-212 */
.pb-name{background:var(--paper);border:1px solid var(--card-border);border-radius:12px;padding:10px 12px;font:600 13px var(--body);color:var(--ink);margin-bottom:12px}
.pb-item{background:var(--paper);border:1px solid var(--card-border);border-radius:18px;padding:11px;margin-bottom:9px;box-shadow:0 6px 16px rgba(16,32,64,.05)}
.pb-head{display:flex;align-items:center;gap:9px}
.pb-info{flex:1;min-width:0}
.pb-exname{font:600 12.5px var(--body);color:var(--ink)}
.pb-tag{font:500 10.5px var(--body);color:var(--muted-soft);margin-top:2px}
.pb-move{font:600 13px var(--body);color:var(--forest);padding:0 3px}
.pb-move.off{color:var(--track)}
.pb-x{font:600 13px var(--body);color:var(--danger);padding:0 4px}
.pb-fields{display:flex;flex-wrap:wrap;column-gap:7px;row-gap:5px;margin-top:8px}
.pb-f{flex:1 1 64px;min-width:58px}
.pb-lab{font:600 10px var(--body);color:var(--muted);margin:6px 0 4px}
.pb-in{background:var(--bone);border:1px solid var(--card-border);border-radius:12px;padding:7px 9px;font:500 12px var(--body);color:var(--ink)}
.pb-in.ph{color:var(--muted-soft)}
.pb-add{background:var(--paper);border:1px solid rgba(11,18,32,.16);border-radius:999px;padding:10px 0;text-align:center;font:600 12.5px var(--disp);color:var(--forest);margin-top:2px}
.pb-actions{display:flex;gap:9px;margin-top:14px}
.pb-cancel{flex:1;border:1px solid var(--line);border-radius:999px;padding:12px 0;text-align:center;font:600 12.5px var(--body);color:var(--muted)}
.pb-save{flex:1;background:var(--lime);border-radius:999px;padding:12px 0;text-align:center;font:600 12.5px var(--disp);color:#fff}

/* coach roster replica — CoachClientListScreen.tsx */
.rl-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rl-eyebrow{font:500 11px var(--body);color:var(--muted)}
.rl-title{font:600 19px var(--disp);color:var(--forest);letter-spacing:-.5px;margin-top:2px}
.rl-me{width:30px;height:30px;border-radius:15px;background:var(--forest);color:var(--lime);display:flex;align-items:center;justify-content:center;font:600 13px var(--disp);margin-left:auto;flex:none}
.rl-pill{background:var(--paper);border:1px solid rgba(11,18,32,.16);border-radius:999px;padding:10px 0;text-align:center;font:600 12.5px var(--disp);color:var(--forest);margin-bottom:11px}
.rl-row{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--card-border);border-radius:18px;padding:11px;margin-bottom:10px;box-shadow:0 6px 16px rgba(16,32,64,.05)}
.rl-ava{width:40px;height:40px;border-radius:20px;background:var(--forest);color:var(--lime);display:flex;align-items:center;justify-content:center;font:600 17px var(--disp);flex:none}
.rl-info{flex:1;min-width:0}
.rl-namerow{display:flex;align-items:center;gap:6px}
.rl-name{font:600 13px var(--body);color:var(--ink)}
.rl-badge{min-width:18px;height:18px;border-radius:9px;background:var(--lime);color:#fff;font:700 10px var(--body);display:flex;align-items:center;justify-content:center;padding:0 5px}
.rl-meta{font:500 10.5px var(--body);color:var(--muted);margin-top:3px}
.rl-chev{margin-left:auto;color:var(--muted-soft);font:600 15px var(--body)}