/* ============================================================
   journey.css — Momentum Milestones styles, carved from
   milestones main@80892ac and scoped under .mj (M1, MERGE-PLAN).
   All upstream root-level custom properties now live on .mj —
   custom properties inherit downward, and the generic token names
   (--bg, --panel, --text, --green, …) can no longer clobber the host
   theme. Post-merge they are remapped to the Training brand (indigo
   accent, matched neutrals). html/body base rules are
   folded onto the .mj container; keyframes are prefixed mj-.
   ============================================================ */
/* Momentum Milestones — white design system */
.mj{
  /* Post-merge palette: the Milestones module now wears the Training brand.
     Neutrals + shadow match styles.css :root exactly so cards read as one app.
     The legacy `--green*` var names are kept (85 call sites) but REPOINTED to
     the Training indigo accent — every interactive/brand surface follows.
     Genuine completion states use the separate `--done*` green below, so
     "interactive = indigo, success = green" holds across both halves. */
  --bg:#F6F7FB; --panel:#FFFFFF; --panel2:#F1F2F6; --raise:#E7E9EF;
  --line:#E7E9EF; --line2:#D7DAE3;
  --text:#13151A; --muted:#6B7280; --dim:#9AA1B0;
  --green:#4F6BFF; --green-ink:#2B3D91;   /* was Milestones gold → Training accent */
  --green-dim:rgba(79,107,255,.14); --green-line:rgba(79,107,255,.5);
  --on-accent:#fff;                        /* text on an accent fill (was #000 on gold) */
  --done:#16A34A; --done-ink:#15803D; --done-dim:#E7F8EE; --done-line:rgba(22,163,74,.42);
  --amber:#D97706; --amber-dim:rgba(217,119,6,.1); --red:#DC2626; --red-dim:rgba(220,38,38,.08);
  --radius:14px;
  --shadow:0 1px 2px rgba(16,18,30,.04), 0 8px 24px rgba(16,18,30,.06);
}
.mj, .mj *{margin:0;padding:0;box-sizing:border-box}

.mj{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mj ::selection{background:var(--green); color:var(--on-accent)}
.mj button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
.mj a{color:var(--green-ink)}
.mj input, .mj select, .mj textarea{
  font:inherit; color:var(--text); background:#fff;
  border:1px solid var(--line2); border-radius:10px; padding:10px 12px; width:100%;
  outline:none; transition:border-color .15s;
}
.mj input:focus, .mj select:focus, .mj textarea:focus{border-color:var(--green-line)}
.mj input:disabled, .mj select:disabled, .mj textarea:disabled{background:var(--panel2); color:var(--muted); opacity:1; -webkit-text-fill-color:var(--muted)}
.mj label{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
.mj .field{margin-bottom:16px}
.mj .boot{padding:80px; text-align:center; color:var(--dim)}

.mj .card, .mj .phase, .mj .pane, .mj .kpi, .mj .wcard, .mj .pipeline, .mj .sumcard, .mj .goalwrap, .mj .banner, .mj .ratepanel, .mj .paycard, .mj .modal{box-shadow:var(--shadow)}

/* ---------- chrome ---------- */
.mj .topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 28px; height:64px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(252,252,250,.9); backdrop-filter:blur(12px); z-index:50;
}
.mj .brand{display:flex; align-items:center; gap:10px; white-space:nowrap; cursor:pointer}
.mj .brand .sq{width:12px; height:12px; border-radius:3px; background:var(--green)}
.mj .brand .word{font-weight:800; letter-spacing:.18em; font-size:15px}
.mj .brand .sub{font-weight:300; letter-spacing:.3em; font-size:11px; color:var(--muted); text-transform:uppercase}
.mj .who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); white-space:nowrap}
.mj .modechip{font-size:10px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line2); border-radius:999px; padding:3px 10px; color:var(--dim)}
.mj .modechip.live{border-color:var(--green-line); color:var(--green-ink); background:var(--green-dim)}
.mj .shell{max-width:1180px; margin:0 auto; padding:32px 28px 80px}
.mj .footnote{text-align:center; color:var(--dim); font-size:11px; margin-top:48px; line-height:1.7; max-width:880px; margin-left:auto; margin-right:auto}

.mj .kicker{font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--dim); margin-bottom:8px}
.mj h1.page{font-size:26px; font-weight:700; letter-spacing:-.01em}
.mj .pagemeta{color:var(--muted); font-size:13px; margin-top:4px}
.mj .headrow{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}

.mj .btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green); color:var(--on-accent); font-weight:700; font-size:14px;
  border-radius:10px; padding:11px 20px; transition:transform .1s, box-shadow .15s;
}
.mj .btn:hover{box-shadow:0 6px 18px rgba(79,107,255,.35)}
.mj .btn:active{transform:scale(.98)}
.mj .btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line2); font-weight:500}
.mj .btn.ghost:hover{border-color:var(--green-line); box-shadow:none}
.mj .btn.small{padding:7px 14px; font-size:13px}
.mj .btn[disabled]{opacity:.4; cursor:not-allowed; box-shadow:none}
.mj .linkish{font-size:12.5px; color:var(--dim); text-decoration:underline}
.mj .linkish:hover{color:var(--muted)}

/* ---------- login ---------- */
.mj .login{max-width:420px; margin:80px auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow)}
.mj .login h1{font-size:20px; margin:14px 0 6px}
.mj .login p{color:var(--muted); font-size:13.5px; margin-bottom:20px}
.mj .login .or{text-align:center; color:var(--dim); font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin:18px 0}

/* ---------- roster ---------- */
.mj .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px}
@media (max-width:780px){ .mj .kpis{grid-template-columns:repeat(2,1fr)} }
.mj .kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.mj .kpi .n{font-size:28px; font-weight:800; letter-spacing:-.02em}
.mj .kpi .l{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:4px}
.mj .kpi .n.green{color:var(--green-ink)} .mj .kpi .n.amber{color:var(--amber)} .mj .kpi .n.red{color:var(--red)}

.mj .stagehead{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:26px 0 12px}
.mj .pipeline{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.mj .pipehead, .mj .piperow{
  display:grid; grid-template-columns:1.5fr 1.1fr 1.4fr 1fr 1.4fr .6fr;
  gap:12px; align-items:center; padding:13px 20px;
}
.mj .pipehead{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--line)}
.mj .piperow{border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; font-size:13.5px}
.mj .piperow:last-child{border-bottom:none}
.mj .piperow:hover{background:var(--panel2)}
.mj .cname{font-weight:600; display:flex; align-items:center; gap:10px}
.mj .cname .since{display:block; font-size:11px; color:var(--dim); font-weight:400}
.mj .avatar{width:32px; height:32px; border-radius:10px; background:var(--raise); display:grid; place-items:center; font-size:15px; flex:0 0 32px}
.mj .phchip{font-size:11px; color:var(--muted); border:1px solid var(--line2); border-radius:6px; padding:3px 8px; white-space:nowrap; justify-self:start}
.mj .mini{display:flex; align-items:center; gap:10px}
.mj .minibar{flex:1; height:5px; background:var(--panel2); border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.mj .minifill{display:block; height:100%; background:var(--green); border-radius:999px}
.mj .mini .pct{font-size:11.5px; color:var(--muted); width:32px; text-align:right}
.mj .status{font-size:12px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.mj .dot{width:7px; height:7px; border-radius:50%}
.mj .dot.g{background:var(--green)} .mj .dot.a{background:var(--amber)} .mj .dot.r{background:var(--red)} .mj .dot.x{background:var(--line2)}
.mj .nexta{font-size:12.5px; color:var(--muted)}
.mj .openlink{font-size:12px; color:var(--green-ink); justify-self:end}
@media (max-width:880px){ .mj .pipehead{display:none} .mj .piperow{grid-template-columns:1fr 1fr; row-gap:8px} }

/* ---------- weekly digest ---------- */
.mj .weekwrap{display:grid; grid-template-columns:1.15fr 1fr; gap:14px; margin-bottom:8px}
@media (max-width:880px){ .mj .weekwrap{grid-template-columns:1fr} }
.mj .wcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.mj .wcard .wh{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; gap:10px}
.mj .wcard .wt{font-size:13px; font-weight:700; letter-spacing:.04em}
.mj .wcard .wg{font-size:10.5px; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.mj .digest{list-style:none; font-size:13px; color:var(--muted)}
.mj .digest li{display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); line-height:1.45}
.mj .digest li:last-child{border:none}
.mj .digest .dd{flex:0 0 38px; font-size:10.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; padding-top:2px}
.mj .digest b{color:var(--text); font-weight:600}
.mj .digest .warn{color:var(--amber)}
.mj .dayhead{display:flex; gap:5px; margin-left:102px; margin-bottom:4px}
.mj .dayhead span{width:22px; text-align:center; font-size:9px; color:var(--dim); text-transform:uppercase}
.mj .strips{display:flex; flex-direction:column; gap:9px}
.mj .strip{display:flex; align-items:center; gap:10px}
.mj .strip .sn{flex:0 0 92px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mj .days{display:flex; gap:5px}
.mj .daychip{width:22px; height:22px; border-radius:6px; background:var(--panel2); border:1px solid var(--line)}
.mj .daychip.a{background:var(--green-dim); border-color:var(--green-line)}
.mj .daychip.s{background:var(--green); border-color:var(--green)}
.mj .daychip.f{opacity:.3}
.mj .legend{display:flex; gap:14px; margin-top:14px; font-size:10.5px; color:var(--dim)}
.mj .legend span{display:flex; align-items:center; gap:5px}
.mj .legend .daychip{width:12px; height:12px; border-radius:4px}

/* ---------- client page ---------- */
.mj .banner{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin-bottom:20px; flex-wrap:wrap}
.mj .banner .avatar{width:44px; height:44px; font-size:20px; border-radius:12px}
.mj .banner .nm{font-weight:700; font-size:18px}
.mj .banner .dt{font-size:12.5px; color:var(--muted)}
.mj .banner .spacer{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.mj .alertchip{font-size:12px; color:var(--amber); border:1px solid rgba(196,134,10,.35); border-radius:999px; padding:4px 12px; background:var(--amber-dim)}

.mj .tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto}
.mj .tabs button{padding:11px 16px; font-size:13.5px; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap}
.mj .tabs button.on{color:var(--text); border-bottom-color:var(--green); font-weight:600}

.mj .progresswrap{margin:4px 0 20px}
.mj .progressbar{height:8px; background:var(--panel2); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.mj .progressfill{height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#3651D9,var(--green)); box-shadow:0 0 14px rgba(79,107,255,.3); transition:width .7s cubic-bezier(.22,1,.36,1)}
.mj .progressmeta{display:flex; justify-content:space-between; margin-top:8px; font-size:13px; color:var(--muted)}
.mj .progressmeta b{color:var(--text); font-weight:600}

.mj .cols{display:grid; grid-template-columns:380px 1fr; gap:24px; align-items:start}
@media (max-width:880px){ .mj .cols{grid-template-columns:1fr} }
/* Reset every property the host's dark coach-sidebar `.side` (styles.css) leaks in via the
   class-name collision — background (the black bands), position:sticky/fixed, height:100vh,
   width:248px, left:-260px, padding, colour — so the journey checklist stays in normal grid flow. */
.mj .side{display:flex; flex-direction:column; gap:14px; background:transparent; color:var(--text); position:static; top:auto; left:auto; width:auto; height:auto; min-height:0; padding:0}
.mj .phase{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.mj .phase.current{border-color:var(--green-line)}
.mj .phasehead{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; cursor:pointer; user-select:none}
.mj .phasehead .pt{font-size:13px; font-weight:700; letter-spacing:.04em}
.mj .phasehead .ps{font-size:11px; color:var(--dim); margin-top:1px}
.mj .phasehead .pc{font-size:11px; color:var(--muted); white-space:nowrap}
.mj .phasehead .pc.done{color:var(--done-ink)}
.mj .chev{color:var(--dim); transition:transform .2s; font-size:11px; margin-left:6px}
.mj .phase.open .chev{transform:rotate(180deg)}
.mj .items{display:none; border-top:1px solid var(--line)}
.mj .phase.open .items{display:block}
.mj .item{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 16px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--muted); transition:background .12s}
.mj .item:last-child{border-bottom:none}
.mj .item:hover{background:var(--panel2)}
.mj .item.selected{background:var(--panel2); color:var(--text); box-shadow:inset 2px 0 0 var(--green)}
.mj .item.locked{color:var(--dim)}
.mj .item .ic{flex:0 0 18px; height:18px; display:grid; place-items:center}
.mj .item .t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mj .ownerdot{flex:0 0 auto; font-size:9px; letter-spacing:.1em; color:var(--dim); border:1px solid var(--line2); border-radius:4px; padding:1px 5px; text-transform:uppercase}
.mj .circle{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);display:block}
.mj .tickwrap{width:18px;height:18px;border-radius:50%;background:var(--done);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.mj .skipwrap{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--amber);color:var(--amber);display:grid;place-items:center;font-size:10px;font-weight:800}
.mj .lock{color:var(--dim); font-size:12px}

.mj .pane{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px; min-height:380px}
.mj .pane .crumb{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; display:flex; justify-content:space-between; gap:10px; align-items:center}
.mj .pane h2{font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px}
.mj .pane .desc{color:var(--muted); font-size:14px; margin-bottom:20px; max-width:560px}
.mj .badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:4px 11px; margin-bottom:18px; border:1px solid var(--line2); color:var(--muted)}
.mj .badge.done{border-color:var(--done-line); color:var(--done-ink); background:var(--done-dim)}
.mj .badge.waiting{border-color:rgba(196,134,10,.4); color:var(--amber)}
.mj .badge.skipped{border-color:rgba(196,134,10,.45); color:var(--amber); background:var(--amber-dim)}
.mj .badge.flag{border-color:rgba(220,38,38,.4); color:var(--red); background:var(--red-dim)}
.mj .formgrid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; max-width:640px}
.mj .formgrid .full{grid-column:1/-1}
@media (max-width:680px){ .mj .formgrid{grid-template-columns:1fr} }
.mj .coachnote{background:var(--panel2); border:1px solid var(--line2); border-left:3px solid var(--green); border-radius:10px; padding:16px 18px; max-width:640px; color:var(--muted); font-size:14px; white-space:pre-line; margin-bottom:16px}
.mj .sigwrap{max-width:640px; margin:4px 0 16px}
.mj .sighead{display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.mj .sigpad{display:block; width:100%; height:auto; aspect-ratio:760/220; background:#fff; border:1px dashed var(--line2); border-radius:10px; touch-action:none; cursor:crosshair}
.mj .engresults{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.mj .engstat{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.mj .engstat .n{font-size:22px; font-weight:700}
.mj .engstat .n.acc{color:var(--green)}
.mj .engstat .l{font-size:11px; color:var(--muted); margin-top:2px}
.mj .engtbl{overflow-x:auto; margin-bottom:14px}
.mj .engtbl table{width:100%; border-collapse:collapse; font-size:13px}
.mj .engtbl th{text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:0 10px 6px 0; font-weight:500}
.mj .engtbl td{padding:6px 10px 6px 0; border-top:1px solid var(--line)}
.mj .engform{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.mj .engform label{display:block; font-size:11px; color:var(--muted); margin-bottom:4px}
.mj .engmult{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:360px}
.mj .engpatrow{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.mj .engpat{display:flex; flex-direction:column; gap:3px}
.mj .engpat span{font-size:11px; text-align:center}
.mj .engpat select{font-size:11px; padding:5px 4px; border:1px solid var(--line2); border-radius:8px; background:#fff; width:100%}
.mj .subtabs{display:inline-flex; gap:4px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:4px; margin-bottom:16px}
.mj .subtab{font-size:13px; font-weight:600; padding:7px 16px; border-radius:8px; border:0; background:transparent; color:var(--muted); cursor:pointer}
.mj .subtab.on{background:#fff; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.mj .cwtbl{overflow-x:auto}
.mj .cwtbl table{width:100%; border-collapse:collapse; font-size:13px; min-width:520px}
.mj .cwtbl th{text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:0 8px 6px 0; font-weight:500}
.mj .cwtbl td{padding:5px 8px 5px 0; border-top:1px solid var(--line)}
.mj .cwd{font-weight:600; white-space:nowrap}
.mj .cwin{width:72px; border:1px solid var(--line2); border-radius:8px; padding:6px 8px; font-size:13px}
.mj .cwact{text-align:right; white-space:nowrap}
.mj .lnk{background:none; border:0; color:var(--muted); font-size:11px; cursor:pointer; padding:2px 4px}
.mj .lnk:hover{color:var(--text)}
.mj .cwact .lnk + .lnk{margin-left:8px}
.mj .calnav{display:flex; align-items:center; gap:8px}
.mj .caltitle{min-width:130px; text-align:center; font-weight:600; font-size:13px; color:var(--text)}
.mj .calnav .lnk{font-size:18px; line-height:1}
.mj .calgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.mj .calhd{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); text-align:center; padding-bottom:2px}
.mj .calcell{min-height:62px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); padding:5px 6px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:1px; transition:border-color .12s}
.mj .calcell:hover{border-color:var(--line2)}
.mj .calcell.empty{border:0; background:transparent; cursor:default; min-height:0}
.mj .calcell.ovr{background:rgba(124,242,55,.14); border-color:rgba(124,242,55,.55)}
.mj .calcell.sel{border-color:var(--text)}
.mj .caltop{display:flex; align-items:center; justify-content:space-between; gap:4px}
.mj .cald{font-size:11px; color:var(--muted)}
.mj .calovrtag{font-size:8px; color:#4a9c1f; text-transform:uppercase; letter-spacing:.04em}
.mj .calk{font-size:13px; font-weight:700; color:var(--text)}
.mj .calcarb{font-size:10px; color:var(--muted)}
.mj .caldots{display:flex; flex-wrap:wrap; gap:2px; margin-top:auto}
.mj .caldot{width:6px; height:6px; border-radius:50%; display:inline-block}
.mj .callegend{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px}
.mj .callg{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted)}
.mj .caltoggle{display:inline-flex; gap:2px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:2px; margin-right:6px}
.mj .caltoggle button{font-size:11px; padding:4px 10px; border:0; background:transparent; color:var(--muted); border-radius:6px; cursor:pointer}
.mj .caltoggle button.on{background:#fff; color:var(--text)}
.mj .cwtpl{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.mj .tplsel{font-size:12px; padding:5px 8px; border:1px solid var(--line2); border-radius:8px; background:#fff; color:var(--text); max-width:170px}
.mj .yearwrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.mj .ymlabel{font-size:11px; font-weight:600; color:var(--muted); margin-bottom:4px}
.mj .ygrid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.mj .ycell{position:relative; aspect-ratio:1; border:1px solid var(--line); border-radius:3px; cursor:pointer; padding:0}
.mj .ycell.empty{border:0; background:transparent!important; cursor:default}
.mj .ycell.ovr{border-color:var(--text); border-width:1.5px}
.mj .ydot{position:absolute; top:1px; right:1px; width:4px; height:4px; border-radius:50%}
.mj .srcchips{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:-8px 0 18px}
.mj .srclabel{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.mj .srcchip{font-size:11px; border:1px solid var(--line2); border-radius:999px; padding:3px 10px; color:var(--muted); background:#fff; transition:all .12s}
.mj .srcchip:hover{border-color:var(--green-line); color:var(--text)}
.mj .recs{background:var(--green-dim); border:1px solid var(--green-line); border-radius:12px; padding:14px 18px; max-width:640px; margin-bottom:18px; font-size:13px}
.mj .recs .rt{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-ink); margin-bottom:8px; font-weight:800}
.mj .recs ul{margin-left:16px; color:var(--text)}
.mj .recs li{padding:2.5px 0; line-height:1.5}
.mj .recs li b{color:var(--green-ink)}
.mj .skiprow{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); display:flex; gap:16px; flex-wrap:wrap}
.mj .skiprow button{font-size:12.5px; color:var(--dim)}
.mj .skiprow button:hover{color:var(--amber)}
.mj .mailbtn{font-size:12.5px; color:var(--green-ink)}
.mj table.meas{border-collapse:collapse; max-width:640px; width:100%; margin-bottom:18px}
.mj table.meas th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
.mj table.meas td{padding:7px 10px; border-bottom:1px solid var(--line); font-size:14px; color:var(--muted)}
.mj table.meas td input{padding:7px 10px; border-radius:8px; max-width:120px}
.mj table.meas td.val{color:var(--text); font-weight:600}
.mj .delta{color:var(--green-ink); font-size:12px; font-weight:700}
.mj .delta.bad{color:var(--amber)}
.mj .phototiles{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.mj .tile{width:140px; height:178px; border:1.5px dashed var(--line2); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--dim); font-size:12px; letter-spacing:.08em; text-transform:uppercase; transition:all .15s; background:var(--panel2)}
.mj .tile:hover{border-color:var(--green-line); color:var(--muted)}
.mj .tile.up{border:1.5px solid var(--green-line); background:var(--green-dim); color:var(--green-ink)}
.mj .tile .big{font-size:26px}
.mj .tile{position:relative; overflow:hidden}
.mj label.tile{cursor:pointer}
.mj .tile .tshot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mj .tile .big, .mj .tile .tcap{position:relative; z-index:1}
.mj .tile.shot .big.ok{position:absolute; top:6px; right:6px; font-size:15px; width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%; background:var(--green-line); color:#04210a; z-index:2; font-weight:700}
.mj .tile.shot .tcap{position:absolute; left:0; right:0; bottom:0; padding:6px 0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.6)); color:#fff; z-index:2}
.mj .agreementbox{max-width:640px; height:160px; overflow:auto; background:var(--panel2); border:1px solid var(--line2); border-radius:10px; padding:16px; font-size:13px; color:var(--muted); margin-bottom:16px; line-height:1.6}
.mj .agreementbox h4{color:var(--text); font-size:13px; margin:10px 0 4px}
.mj .signedstamp{border:1px dashed var(--green-line); background:var(--green-dim); border-radius:10px; padding:14px 18px; max-width:640px; color:var(--green-ink); font-size:14px}
.mj .signedstamp .sig{font-size:22px; font-style:italic; font-weight:600; color:var(--text); margin-bottom:2px}

/* ---------- goal track / master plan ---------- */
.mj .goalwrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px 28px; margin-bottom:20px}
.mj .goalhead{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px}
.mj .goalhead .gt{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.mj .goalhead .gd{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.mj .pill{border:1px solid var(--line2); border-radius:12px; padding:12px 18px; color:var(--muted); font-size:14px; transition:all .15s; background:var(--panel2); min-width:64px; text-align:center}
.mj .pill small{display:block; font-size:10.5px; color:var(--dim); margin-top:2px; letter-spacing:.04em}
.mj .pill:hover{border-color:var(--green-line)}
.mj .pill.on{border-color:var(--green); color:var(--text); background:var(--green-dim)}
.mj .pill.on small{color:var(--green-ink)}
.mj .pill.mini{padding:5px 12px; font-size:11.5px; min-width:0; border-radius:999px}
.mj .gstats{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.mj .gchip{font-size:11.5px; border:1px solid var(--line2); color:var(--muted); border-radius:999px; padding:4px 11px}
.mj .gchip.hot{border-color:var(--green-line); color:var(--green-ink); background:var(--green-dim)}
.mj .gchip.late{color:var(--amber); border-color:rgba(196,134,10,.45)}
.mj .track{position:relative; height:58px; margin:14px 10px 0}
.mj .track.editable{cursor:crosshair}
.mj .tline{position:absolute; top:9px; left:0; right:0; height:2px; background:var(--line2)}
.mj .tfill{position:absolute; top:9px; left:0; height:2px; background:var(--green); box-shadow:0 0 8px rgba(79,107,255,.4)}
.mj .tnode{position:absolute; top:0; transform:translateX(-50%); text-align:center; cursor:pointer}
.mj .tnode .nd{width:20px; height:20px; border-radius:50%; background:var(--panel2); border:2px solid var(--line2); margin:0 auto; display:grid; place-items:center; font-size:10px; color:#000; font-weight:800}
.mj .tnode.done .nd{background:var(--green); border-color:var(--green)}
.mj .tnode.goal .nd{border-color:var(--green-ink); background:#fff; color:var(--green-ink); font-size:11px}
.mj .tnode.late .nd{border-color:var(--amber); color:var(--amber); background:#fff; font-size:11px}
.mj .tnode.selms .nd{box-shadow:0 0 0 4px var(--green-dim)}
.mj .tnode .nl{font-size:10px; color:var(--dim); margin-top:7px; white-space:nowrap}
.mj .tnode.done .nl, .mj .tnode.goal .nl{color:var(--muted)}
.mj .tpin{position:absolute; top:-18px; transform:translateX(-50%); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-ink); text-align:center; font-weight:700}
.mj .tpin:after{content:''; display:block; width:1px; height:16px; background:var(--green-ink); margin:2px auto 0}
.mj .blocksep{position:absolute; top:-2px; width:1px; height:26px; background:var(--line2)}
.mj .blocklabel{position:absolute; top:38px; transform:translateX(-50%); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); white-space:nowrap}
.mj .mshint{margin-top:18px; font-size:11.5px; color:var(--dim)}
.mj .msstrip{margin-top:18px; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:13px; color:var(--muted)}
.mj .msstrip b{color:var(--text)}
.mj .msbtns{display:flex; align-items:flex-end; gap:8px}
.mj .msbtns .btn{padding:9px 14px; font-size:13px}
.mj .planpanel{margin-top:18px; border-top:1px dashed var(--line); padding-top:16px}
.mj .blockrow{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap}
.mj .blockrow input{padding:8px 10px; font-size:13px; flex:1; min-width:120px}
.mj .blockrow input.wks{max-width:80px; flex:0}
.mj .checkrow{display:grid; grid-template-columns:1.4fr .5fr 1.6fr auto; gap:8px; align-items:center; margin-bottom:8px}
@media (max-width:680px){ .mj .checkrow{grid-template-columns:1fr 1fr} }
.mj .checkrow input{padding:8px 10px; font-size:13px}
.mj .wh{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; gap:10px; flex-wrap:wrap}
.mj .wt{font-size:13px; font-weight:700; letter-spacing:.04em}
.mj .wg{font-size:10.5px; color:var(--dim); letter-spacing:.08em; text-transform:uppercase}
.mj .optlabel{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:10px}

/* ---------- presentation ---------- */
.mj .pcols{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start}
@media (max-width:880px){ .mj .pcols{grid-template-columns:1fr} }
.mj .optgroup{margin-bottom:26px}
.mj .pills{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.mj .custwk{width:90px}
.mj .changelink{font-size:11px; color:var(--dim); text-decoration:underline; letter-spacing:.04em; padding:4px}
.mj .changelink:hover{color:var(--muted)}
.mj .paycards{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:680px){ .mj .paycards{grid-template-columns:1fr} }
.mj .paycard{text-align:left; border:1px solid var(--line2); border-radius:14px; padding:16px 18px; background:var(--panel2); transition:all .15s}
.mj .paycard:hover{border-color:var(--green-line)}
.mj .paycard.on{border-color:var(--green); background:var(--green-dim)}
.mj .paycard .pt2{font-weight:700; font-size:14px; margin-bottom:3px}
.mj .paycard .pd{font-size:12px; color:var(--muted); line-height:1.5}
.mj .paycard .pp{font-size:18px; font-weight:800; margin-top:8px}
.mj .paycard.on .pp{color:var(--green-ink)}
.mj .savetag{display:inline-block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--done-ink); background:var(--done-dim); border-radius:5px; padding:2px 7px; margin-left:8px; font-weight:800}
.mj .sumcard{background:var(--panel); border:1px solid var(--green-line); border-radius:var(--radius); padding:24px; position:sticky; top:88px}
.mj .sumcard .sl{display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); padding:7px 0; border-bottom:1px solid var(--line)}
.mj .sumcard .sl b{color:var(--text); font-weight:600}
.mj .sumcard .tot{display:flex; justify-content:space-between; align-items:baseline; padding:14px 0 4px}
.mj .sumcard .tot .n{font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--green-ink)}
.mj .sumcard .per{font-size:12px; color:var(--muted); text-align:right}
.mj .inc{list-style:none; margin:14px 0 18px; font-size:13px; color:var(--muted)}
.mj .inc li{padding:4px 0 4px 22px; position:relative}
.mj .inc li:before{content:'✓'; position:absolute; left:0; color:var(--green-ink); font-weight:800}
.mj .mhl{color:var(--green-ink); font-weight:700}
.mj .finey{font-size:11px; color:var(--dim); margin-top:10px; line-height:1.6}

/* ---------- blood panel ---------- */
.mj .bloodgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; max-width:920px; margin-bottom:18px}
.mj .marker{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.mj .marker label{margin-bottom:4px; font-size:10px}
.mj .marker .rng{font-size:10px; color:var(--dim); margin-top:4px}
.mj .marker input{padding:7px 9px; font-size:13.5px}
.mj .marker.flag{border-color:rgba(196,134,10,.5); background:var(--amber-dim)}
.mj .marker.flag .rng{color:var(--amber); font-weight:600}
.mj .bloodhead{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.mj .grouplabel{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); grid-column:1/-1; margin-top:6px}
/* ---- blood advice (rule-based interpretation) ---- */
.mj .bpadvice{max-width:920px; margin-top:6px; border-top:1px solid var(--line); padding-top:16px}
.mj .bpadvice .rt{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:800; margin-bottom:14px}
.mj .advgroup{margin-bottom:16px}
.mj .advgh{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.mj .advcount{color:var(--amber); letter-spacing:.02em; text-transform:none; font-size:11.5px; font-weight:600}
.mj .advrow{background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:10px; padding:11px 14px; margin-bottom:8px}
.mj .advrow.high{border-left-color:var(--red)}
.mj .advm{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:5px}
.mj .advm b{font-size:14px}
.mj .advval{font-size:12px; color:var(--muted)}
.mj .advtxt{font-size:13px; color:var(--text); line-height:1.5; margin-top:3px}
.mj .advlbl{display:inline-block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-right:6px}
.mj .advinrange{font-size:12.5px; color:var(--muted); margin:4px 0; line-height:1.6}
.mj .advinrange .advlbl{color:var(--green-ink)}
.mj .advfoot{font-size:11.5px; color:var(--dim); margin-top:12px; line-height:1.5}
/* ---- marker trends (sparklines) ---- */
.mj .tgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:12px}
.mj .tcard{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.mj .tcard.flag{border-color:rgba(196,134,10,.5)}
.mj .tcard.open{grid-column:1/-1; background:var(--panel)}
.mj .tcard-top{cursor:pointer}
.mj .tcard-h{display:flex; align-items:center; justify-content:space-between; gap:8px}
.mj .tcard-l{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.mj .tcard-v{margin:3px 0 5px}
.mj .tcard-v b{font-size:20px; letter-spacing:-.01em}
.mj .tu{font-size:11px; color:var(--dim)}
.mj .tlab{font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:999px; font-weight:700; white-space:nowrap}
.mj .tlab.good{color:var(--green-ink); background:var(--green-dim)}
.mj .tlab.bad{color:var(--red); background:var(--red-dim)}
.mj .tlab.flat{color:var(--dim); background:var(--raise)}
.mj .spark{display:block; width:100%; height:auto; overflow:visible}
.mj .spark.big{margin-top:2px}
.mj .spk-val{font-size:9px; fill:var(--muted)}
.mj .spk-ax{font-size:8.5px; fill:var(--dim)}
.mj .tcard-meta{font-size:10.5px; color:var(--dim); margin-top:5px; text-transform:none; letter-spacing:0}
.mj .tcard-exp{margin-top:10px; border-top:1px solid var(--line); padding-top:12px}
.mj .tcard-rows{margin-top:10px; font-size:12.5px; color:var(--muted); max-width:420px}
.mj .tcard-rows>div{display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--line)}
.mj .tcard-rows>div:last-child{border:none}
.mj .tcard-rows .tr-out span:last-child{color:var(--amber); font-weight:600}
.mj .panelrow{display:flex; justify-content:space-between; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin-bottom:8px; background:var(--panel); cursor:pointer; font-size:13.5px}
.mj .panelrow:hover{border-color:var(--green-line)}
.mj .flagpill{font-size:10.5px; color:var(--amber); border:1px solid rgba(196,134,10,.4); background:var(--amber-dim); border-radius:999px; padding:2px 9px}

/* ---------- email windows ---------- */
.mj .modal-back{position:fixed; inset:0; background:rgba(20,20,15,.45); z-index:90; display:grid; place-items:center; padding:20px}
.mj .modal{background:var(--panel); border:1px solid var(--line); border-radius:16px; max-width:680px; width:100%; max-height:88vh; overflow:auto; padding:26px}
.mj .modal h3{font-size:16px; margin-bottom:4px}
.mj .modal .sub{font-size:12px; color:var(--muted); margin-bottom:18px}
.mj .modal .actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.mj .tplrow{display:flex; justify-content:space-between; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin-bottom:8px; background:var(--panel); font-size:13.5px}
.mj .tplrow:hover{border-color:var(--green-line)}
.mj .tplrow .tk{color:var(--dim); font-size:11px}

/* ---------- data tab ---------- */
.mj .datagrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.mj .datacard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.mj .datacard .dn{font-size:22px; font-weight:800; letter-spacing:-.02em}
.mj .datacard .dl{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:3px}
.mj .datacard .dm{font-size:12px; color:var(--muted); margin-top:8px}

/* ---------- v2: milestone list, charts, body comp, toggles ---------- */
.mj .mslist{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.mj .mslisthead{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.mj .msrow{display:grid;grid-template-columns:24px 1.4fr 1fr 72px 72px 20px;gap:8px;align-items:center;padding:5px 0}
.mj .msrow.on{background:var(--green-dim);border-radius:8px}
.mj .msrow input{padding:7px 9px;font-size:13px}
.mj .msrow .msr-wk{display:flex;align-items:center;gap:4px}.mj .msrow .msr-wk input{width:46px}.mj .msrow .msr-wk small{color:var(--dim);font-size:10px}
.mj .msr-date{font-size:11.5px;color:var(--muted);white-space:nowrap}
.mj .msdot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);background:#fff;font-size:11px;font-weight:800;cursor:pointer;display:grid;place-items:center;color:var(--amber)}
.mj .msdot.hit{background:var(--done);border-color:var(--done);color:#fff}
.mj .msdot.late{border-color:var(--amber);color:var(--amber)}
@media (max-width:680px){.mj .msrow{grid-template-columns:24px 1fr 56px 20px}.mj .msr-target, .mj .msr-date{display:none}}
.mj .anchortog{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;flex:0 0 auto}
.mj .anchortog button{padding:6px 12px;font-size:12px;color:var(--muted);background:#fff}
.mj .anchortog button.on{background:var(--green);color:var(--on-accent);font-weight:700}
.mj .chart{width:100%;height:auto;display:block;overflow:visible}
.mj .chartempty{color:var(--dim);font-size:12px;padding:24px 0;text-align:center}
.mj .chartrow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:680px){.mj .chartrow{grid-template-columns:1fr}}
.mj .lab2{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:4px 0 6px}
.mj .chartleg{display:flex;gap:14px;font-size:11px;color:var(--muted);margin-top:6px}
.mj .chartleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.mj .marker.jp7{border-color:var(--green-line);background:var(--green-dim)}
.mj .marker .pnum{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--green);color:#04210a;font-size:9px;font-weight:800;vertical-align:middle}
.mj .imp-ta{width:100%;font-family:ui-monospace,Menlo,Monaco,monospace;font-size:12px;white-space:pre;overflow:auto;min-height:150px}
.mj .imp-prev{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.mj .imp-sum{font-size:13px;font-weight:600;margin-bottom:8px}
.mj .imp-warn{color:var(--amber);font-weight:500}

/* ---------- toast ---------- */
.mj #toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:#0E1016; color:#fff; border:1px solid #2A2F3C; border-radius:12px; padding:12px 20px; font-size:13.5px; opacity:0; pointer-events:none; transition:all .25s; z-index:99; box-shadow:0 8px 30px rgba(0,0,0,.25); max-width:90vw}
.mj #toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.mj #toast b{color:var(--green)}
.mj .hidden{display:none!important}

/* ---------- nutrition recall (meal builder) ---------- */
.mj .recall{margin-top:10px}
.mj .rmeal{border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px; background:#fff}
.mj .rmeal-h{display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap}
.mj .rmeal-name{flex:1; min-width:120px; max-width:220px; font-weight:600; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:14px}
.mj .rmeal-time{width:120px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:13px}
.mj .rmeal-k{margin-left:auto; font-weight:700; color:var(--gtext,#1e6600); font-size:14px}
.mj .ritem{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.mj .rcat{width:92px; padding:6px; border:1px solid var(--line); border-radius:8px; font-size:12px; text-transform:capitalize}
.mj .rpick-wrap{position:relative; flex:1; min-width:180px}
.mj .rpick-btn{width:100%; text-align:left; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; font-size:13px; display:flex; justify-content:space-between; align-items:center; gap:6px}
.mj .rpick-btn:hover{border-color:var(--green)}
.mj .rqty{width:64px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:13px}
.mj .rmac{font-size:11px; min-width:150px}
.mj .rx{border:none; background:none; color:var(--dim); cursor:pointer; font-size:14px; padding:2px 6px}
.mj .rx:hover{color:var(--red,#cc2222)}
.mj .rmeal-tot{font-size:12px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.mj .rtotals{margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:10px; background:#f7f7f7; font-size:14px}
.mj .ritem-ro{display:flex; justify-content:space-between; font-size:13px; padding:3px 0}
.mj .commslog{margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#f7f7f7}
.mj .commslog-h{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#666); margin-bottom:8px}
.mj .commsrow{display:flex; align-items:baseline; gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:13px}
.mj .commsrow:first-of-type{border-top:none}
.mj .commsd{min-width:64px; color:var(--dim); font-size:12px}
.mj .commss{flex:1; min-width:0}
.mj .commsch{font-size:11px}
.mj .dim{color:var(--dim)}
.mj .rpick-dd{position:absolute; z-index:40; top:calc(100% + 4px); left:0; width:340px; max-width:88vw; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.15); padding:8px}
.mj .rpick-dd input#rpickq{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:13px; margin-bottom:6px}
.mj .rpick-list{max-height:220px; overflow-y:auto}
.mj .rpick-row{display:flex; justify-content:space-between; width:100%; text-align:left; padding:7px 8px; border:none; background:none; cursor:pointer; font-size:13px; border-radius:6px}
.mj .rpick-row:hover{background:#f2f2f2}
.mj .rpick-offrow{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 4px; border-top:1px solid var(--line)}
.mj .rpick-offname{font-size:13px}
.mj .store{display:inline-block; font-size:10px; background:var(--gbg,rgba(100,200,40,.12)); color:var(--gtext,#1e6600); padding:1px 5px; border-radius:8px; margin-left:4px}
.mj .daytabs{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px}
.mj .daytab{padding:6px 13px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted)}
.mj .daytab:hover{border-color:var(--green)}
.mj .daytab.on{background:#1a1a1a; color:#fff; border-color:#1a1a1a}

/* ---------- movement screening ---------- */
.mj .mscreen{display:flex; flex-direction:column; gap:10px}
.mj .msintro{font-size:12.5px; color:var(--muted); margin:0 2px 2px}
.mj .msprog{margin:2px 2px 4px}
.mj .msprog-t{font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:6px}
.mj .msbar{height:6px; background:#e7e7e2; border-radius:99px; overflow:hidden}
.mj .msbar-f{height:100%; background:var(--green); border-radius:99px; transition:width .25s}
.mj .mstest{border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden}
.mj .mstest-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; cursor:pointer; user-select:none}
.mj .mstest-hl{min-width:0}
.mj .mstest-name{font-weight:800; font-size:17px; letter-spacing:-.015em; color:var(--text)}
.mj .mstest.open .mstest-name{color:var(--green-ink)}
.mj .mstest-sum{font-size:11.5px; color:var(--dim); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px}
.mj .mstest-hr{display:flex; align-items:center; gap:9px; flex:0 0 auto}
.mj .mscount{font-size:11px}
.mj .mscount.has{background:var(--green-dim); color:var(--green-ink); border:1px solid var(--green-line); padding:2px 9px; border-radius:999px; font-weight:700}
.mj .mscount.clean{color:#4a9c1f; font-weight:700}
.mj .mscount.none{color:var(--dim)}
.mj .mschev{color:var(--dim); font-size:12px; transition:transform .2s; display:inline-block}
.mj .mstest.open .mschev{transform:rotate(180deg)}
.mj .mstest-b{padding:0 14px 14px; border-top:1px solid var(--line)}
.mj .mshow{display:inline-flex; align-items:center; gap:6px; margin:12px 0; padding:5px 11px; font-size:12px; color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:999px; font-weight:600}
.mj .msproto{font-size:12.5px; color:var(--muted); background:var(--panel2); border-radius:8px; padding:10px 12px; margin-bottom:10px; line-height:1.55}
.mj .msobs{padding:10px 12px; border:1px solid var(--line); border-left:3px solid transparent; border-radius:12px; background:var(--panel); margin-bottom:8px}
.mj .msobs.lvl-mild{border-left-color:#CA8A04; background:rgba(202,138,4,.10)}
.mj .msobs.lvl-mod{border-left-color:var(--amber); background:rgba(217,119,6,.08)}
.mj .msobs.lvl-sev{border-left-color:var(--red); background:rgba(220,38,38,.07)}
.mj .msf{display:block; font-size:13.5px; font-weight:600; color:var(--text)}
.mj .msc{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.mj .mssev{display:flex; gap:6px; margin-top:9px}
.mj .mspill{flex:1; padding:6px 0; font-size:12px; font-weight:600; color:var(--muted); background:var(--panel); border:1px solid var(--line2); border-radius:999px; text-align:center}
.mj .mspill.on[data-sev=mild]{background:rgba(202,138,4,.18); color:#854D0E; border-color:rgba(202,138,4,.55)}
.mj .mspill.on[data-sev=mod]{background:rgba(217,119,6,.15); color:#854D0E; border-color:rgba(217,119,6,.5)}
.mj .mspill.on[data-sev=sev]{background:rgba(220,38,38,.13); color:#991B1B; border-color:rgba(220,38,38,.5)}
.mj .msside{display:flex; align-items:center; gap:6px; margin-top:8px}
.mj .msside-l{font-size:11px; color:var(--dim); margin-right:2px}
.mj .mssidebtn{padding:5px 13px; font-size:12px; font-weight:600; color:var(--muted); background:var(--panel); border:1px solid var(--line2); border-radius:999px}
.mj .mssidebtn.on{background:#1a1a1a; color:#fff; border-color:#1a1a1a}
.mj .msclean{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); background:none; border:1px dashed var(--line2); border-radius:999px; padding:6px 12px; font-weight:600}
.mj .msclean.on{color:#4a9c1f; border-color:#9fd17f; border-style:solid; background:rgba(74,156,31,.07)}
.mj .msobs-ro{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text); padding:4px 0}
.mj .mscorr{border:1px solid var(--green-line); background:var(--green-dim); border-radius:12px; padding:13px 14px}
.mj .mscorr-h{display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:13px; margin-bottom:10px}
.mj .mscorr-h .c{font-size:11px; color:var(--green-ink); font-weight:700}
.mj .mscorr-row{display:flex; align-items:flex-start; gap:9px; padding:7px 0; border-top:1px solid var(--line)}
.mj .mscorr-row:first-child{border-top:none}
.mj .msdot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:4px}
.mj .msdot.lvl-mild{background:#CA8A04} .mj .msdot.lvl-mod{background:var(--amber)} .mj .msdot.lvl-sev{background:var(--red)}
.mj .mscorr-f{flex:1; font-size:13px; font-weight:600; color:var(--text)}
.mj .mscorr-sub{display:block; font-size:11.5px; font-weight:400; color:var(--muted); margin-top:1px}
.mj .msprio{font-size:10px; font-weight:700; color:#991B1B; background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.3); padding:2px 7px; border-radius:999px; flex:0 0 auto}
.mj .mschips{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line)}
.mj .mschip{font-size:11.5px; color:#4a4a44; background:var(--panel); border:1px solid var(--line2); border-radius:999px; padding:4px 10px}
.mj .mi-i{display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--line2); color:var(--dim); font-size:9px; font-style:italic; font-weight:700; text-transform:none; margin-left:5px; vertical-align:middle; line-height:1; cursor:pointer}
.mj .mi-i:hover{border-color:var(--green-line); color:var(--green-ink)}
.mj .mi-info{margin-top:6px; font-size:11.5px; line-height:1.45; color:var(--muted); background:var(--panel2); border-radius:8px; padding:7px 9px}

/* ============================================================
   MOBILE-FIRST LAYER  (added for the phone app)
   Desktop (>760px) is intentionally untouched. The app bar,
   bottom nav and sheets live in the DOM at all sizes but are
   shown only on phones; <=760px overrides reflow dense desktop
   surfaces into a first-class mobile experience.
   ============================================================ */
.mj{
  --bnav-h:62px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
}
/* hidden on desktop — only the phone layout shows these */
.mj .appbar, .mj .bnav{display:none}
.mj .mobile-only{display:none}

@media (max-width:760px){
  /* ---------- chrome swap ---------- */
  .mj .topbar{display:none}
  .mj .desktop-only{display:none!important}
  .mj .mobile-only{display:block}

  .mj .appbar{
    display:flex; align-items:center; gap:11px;
    position:sticky; top:0; z-index:60;
    padding:calc(var(--safe-top) + 9px) 14px 9px; min-height:52px;
    background:rgba(246,246,243,.82); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
  }
  .mj .appbar .ab-back{flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--text); background:var(--panel); border:1px solid var(--line)}
  .mj .appbar .ab-back:active{background:var(--panel2)}
  .mj .appbar .ab-title{flex:1; min-width:0; font-weight:700; font-size:16px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .mj .appbar .ab-title small{display:block; font-weight:400; font-size:11px; color:var(--muted); letter-spacing:0; margin-top:1px}
  .mj .appbar .ab-act{flex:0 0 auto; display:flex; gap:8px; align-items:center}
  .mj .appbar .ab-logo{height:21px; display:block}
  .mj .appbar .modechip{display:none}

  .mj .shell{max-width:none; margin:0; padding:16px 16px calc(var(--bnav-h) + var(--safe-bottom) + 26px)}
  .mj .footnote{margin-top:26px; padding:0 4px}

  /* in-client desktop bits replaced by the mobile chrome */
  .mj .tabs{display:none}
  .mj .client-back{display:none}

  /* ---------- type / containers ---------- */
  .mj h1.page{font-size:22px}
  .mj .kicker{margin-bottom:6px}
  .mj .headrow{margin-bottom:18px; gap:12px}
  .mj .pane{padding:18px 15px; border-radius:16px; min-height:0}
  .mj .pane h2{font-size:18px}
  .mj .wcard{padding:15px}
  .mj .banner{padding:14px 15px; gap:11px; border-radius:16px; margin-bottom:16px}
  .mj .banner .avatar{width:40px; height:40px; font-size:18px}
  .mj .banner .nm{font-size:16px}
  .mj .progresswrap{margin:2px 0 16px}

  /* single-column everything dense */
  .mj .weekwrap, .mj .cols, .mj .pcols, .mj .paycards, .mj .chartrow, .mj .formgrid, .mj .engresults{grid-template-columns:1fr!important}
  .mj .checkrow{grid-template-columns:1fr 1fr}
  .mj .engmult{grid-template-columns:repeat(3,1fr)}

  /* ---------- KPI cards ---------- */
  .mj .kpis{grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px}
  .mj .kpi{padding:14px 15px; border-radius:14px}
  .mj .kpi .n{font-size:23px}

  /* ---------- pipeline → tappable cards ---------- */
  .mj .stagehead{margin:18px 0 10px}
  .mj .pipeline{background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; display:flex; flex-direction:column; gap:10px}
  .mj .piperow{
    display:grid; grid-template-columns:1fr auto;
    grid-template-areas:"name open" "phase stat" "bar bar" "next next";
    gap:7px 12px; align-items:center;
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:14px 15px; box-shadow:var(--shadow); font-size:14px;
  }
  .mj .piperow:hover{background:var(--panel)}
  .mj .piperow:active{background:var(--panel2)}
  .mj .piperow>.cname{grid-area:name; font-size:15px}
  .mj .piperow>.openlink{grid-area:open; align-self:center}
  .mj .piperow>.phchip{grid-area:phase; justify-self:start}
  .mj .piperow>.status{grid-area:stat; justify-self:end}
  .mj .piperow>.mini{grid-area:bar}
  .mj .piperow>.nexta{grid-area:next}
  .mj .piperow>.nexta:before{content:"Next: "; color:var(--dim)}

  /* ---------- body-comp / blood marker grids ---------- */
  .mj .bloodgrid{grid-template-columns:repeat(2,1fr); gap:8px; max-width:none}
  .mj .bloodhead{gap:10px}
  .mj .bloodhead .field input{width:100%!important}
  .mj .datagrid{grid-template-columns:repeat(2,1fr); gap:10px}
  .mj .datacard{padding:14px 15px}
  .mj .datacard .dn{font-size:19px}
  .mj .tgrid{grid-template-columns:1fr}
  .mj .bloodgrid .marker input{padding:9px 10px; font-size:15px}

  /* tables stay readable via horizontal scroll */
  .mj .engtbl, .mj .cwtbl{ -webkit-overflow-scrolling:touch }
  .mj table.meas{display:block; overflow-x:auto; white-space:nowrap}

  /* goal track / presentation */
  .mj .goalwrap{padding:18px 15px}
  .mj .track{margin:14px 4px 0}
  .mj .sumcard{position:static; padding:18px 16px}
  .mj .pills{gap:8px}
  .mj .pill{padding:11px 14px; min-width:58px}

  /* inputs: comfortable tap targets, no iOS zoom on focus */
  .mj input, .mj select, .mj textarea{font-size:16px; padding:12px 13px}
  .mj .btn{padding:12px 18px}
  .mj .btn.small{padding:9px 14px}
  .mj label{font-size:11px}

  /* ---------- modals become bottom sheets ---------- */
  .mj .modal-back{align-items:flex-end; padding:0}
  .mj .modal{
    max-width:none; width:100%; border-radius:20px 20px 0 0;
    max-height:90vh; padding:10px 17px calc(20px + var(--safe-bottom));
    box-shadow:0 -10px 40px rgba(20,20,15,.22);
    animation:mj-sheetup .3s cubic-bezier(.22,1,.36,1);
  }
  .mj .modal:before{content:""; display:block; width:38px; height:4px; border-radius:99px; background:var(--line2); margin:6px auto 16px}
  .mj .modal .actions{position:sticky; bottom:0; background:var(--panel); padding-top:12px; margin-top:14px}
  .mj .modal .actions .btn{flex:1; justify-content:center}
}
@keyframes mj-sheetup{from{transform:translateY(100%)} to{transform:translateY(0)}}

/* ============================================================
   BOTTOM NAV + CAPTURE FAB  (phone only)
   ============================================================ */
@media (max-width:760px){
  .mj .bnav{
    display:flex; align-items:flex-end; justify-content:space-around;
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    height:calc(var(--bnav-h) + var(--safe-bottom));
    padding:0 6px var(--safe-bottom);
    background:rgba(246,246,243,.92); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid var(--line);
  }
  .mj .bnav-item{
    flex:1 1 0; height:var(--bnav-h); background:none; border:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--dim); font-size:10px; font-weight:600; letter-spacing:.02em; min-width:0;
  }
  .mj .bnav-item .ic{width:23px; height:23px; display:block}
  .mj .bnav-item .ic svg{width:23px; height:23px; display:block; stroke-width:1.9}
  .mj .bnav-item.on{color:var(--text)}
  .mj .bnav-item.on .ic{color:var(--green-ink)}
  .mj .bnav-item span.lbl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .mj .bnav-fab{flex:0 0 auto; align-self:center; transform:translateY(-16px); z-index:1}
  .mj .bnav-fab button{
    width:58px; height:58px; border-radius:50%; background:var(--green); color:var(--on-accent);
    display:grid; place-items:center; border:3px solid var(--bg);
    box-shadow:0 8px 20px rgba(79,107,255,.42), 0 2px 6px rgba(0,0,0,.14);
  }
  .mj .bnav-fab button svg{width:26px;height:26px;stroke-width:2.4}
  .mj .bnav-fab button:active{transform:scale(.93)}
}

/* ---------- capture / more sheet content ---------- */
.mj .sheet-h{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:2px 0 2px}
.mj .sheet-sub{font-size:12.5px; color:var(--muted); margin-bottom:14px}
.mj .sheet-grp{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:14px 2px 8px}
.mj .sheet-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mj .sheet-act{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;
  background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:15px 14px; min-height:84px;
  color:var(--text); font-weight:600; font-size:14px;
}
.mj .sheet-act:active{background:var(--raise)}
.mj .sheet-act .ic{width:24px; height:24px; color:var(--green-ink)}
.mj .sheet-act .ic svg{width:24px;height:24px;stroke-width:1.9}
.mj .sheet-act small{font-weight:400; font-size:11.5px; color:var(--muted); line-height:1.4}
.mj .sheet-list{display:flex; flex-direction:column; gap:2px}
.mj .sheet-row{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:none; border:0; padding:14px 6px; border-bottom:1px solid var(--line); color:var(--text); font-size:15px; font-weight:500}
.mj .sheet-row:last-child{border-bottom:0}
.mj .sheet-row:active{background:var(--panel2)}
.mj .sheet-row .ic{width:22px; height:22px; color:var(--muted); flex:0 0 22px}
.mj .sheet-row .ic svg{width:22px;height:22px;stroke-width:1.9}
.mj .sheet-row.on{color:var(--green-ink); font-weight:700}
.mj .sheet-row.on .ic{color:var(--green-ink)}
.mj .sheet-row .chev{margin-left:auto; color:var(--dim)}

/* ============================================================
   MOBILE-FIRST LAYER · pass 2 — dense surfaces & safety
   ============================================================ */
@media (max-width:760px){
  /* stop any stray element forcing a horizontal scroll of the page */
  .mj .shell{overflow-x:hidden}
  .mj .pane, .mj .wcard, .mj .goalwrap, .mj .banner, .mj .sumcard, .mj .login{max-width:100%}

  /* client banner: name already lives in the app bar — keep meta + actions, trim weight */
  .mj .banner{align-items:center}
  .mj .banner .spacer{margin-left:auto}

  /* nutrition recall / meal builder */
  .mj .rmeal{padding:11px}
  .mj .rmeal-name{max-width:none; min-width:0; flex:1 1 100%}
  .mj .rmeal-time{width:auto; flex:1}
  .mj .ritem{gap:7px}
  .mj .rpick-wrap{flex:1 1 100%; min-width:0}
  .mj .rcat{width:84px}
  .mj .rqty{width:72px}
  .mj .rmac{min-width:0; flex:1 1 100%}
  .mj .rpick-dd{width:300px; max-width:86vw}

  /* carb-cycling calendar: tighten cells so a week fits a phone */
  .mj .calgrid{gap:4px}
  .mj .calcell{min-height:52px; padding:4px 5px; border-radius:7px}
  .mj .calk{font-size:12px}
  .mj .calcarb, .mj .calovrtag{font-size:9px}
  .mj .calhd{font-size:9px}
  .mj .caltitle{min-width:96px; font-size:12px}
  .mj .yearwrap{grid-template-columns:1fr}

  /* engine / pattern editors scroll rather than crush */
  .mj .engpatrow{display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .mj .engpat{flex:0 0 64px}
  .mj .engform{grid-template-columns:1fr 1fr}

  /* presentation: make the running total a clear, full-width summary */
  .mj .pcols{gap:18px}
  .mj .sumcard{border-color:var(--green-line); box-shadow:0 -2px 0 0 var(--green) inset, var(--shadow)}
  .mj .sumcard .tot .n{font-size:26px}
  .mj .paycard{padding:14px 15px}

  /* milestone list rows already collapse; give the dots room */
  .mj .msrow{gap:7px}
  .mj .msdot{width:26px; height:26px}

  /* signature pad fits the sheet */
  .mj .sigpad{aspect-ratio:320/150}

  /* template / panel rows: comfortable tap height */
  .mj .tplrow, .mj .panelrow{padding:14px 15px}

  /* movement screening: full-width severity pills */
  .mj .mstest-sum{max-width:160px}
}

/* very small phones */
@media (max-width:360px){
  .mj .bnav-item .lbl{font-size:9px}
  .mj .sheet-actions{grid-template-columns:1fr}
  .mj .kpi .n{font-size:21px}
}

/* ---------- mobile touch niceties ---------- */
@media (max-width:760px){
  
  .mj button, .mj a, .mj .piperow, .mj .item, .mj .sheet-row, .mj .sheet-act{ -webkit-tap-highlight-color:transparent }
  
  /* keep the brand selectable text crisp; avoid long-press callouts on controls */
  .mj .bnav, .mj .appbar, .mj .btn, .mj .bnav-item{ -webkit-touch-callout:none; user-select:none }
}

/* ============================================================
   MOBILE-FIRST · pass 3 — Journey master-detail + Sales sticky total
   ============================================================ */
.mj .pane-back{display:none}
.mj .saletotbar{display:none}
@media (max-width:1024px){
  /* Journey: tap a step -> focused detail with a Back button (no scrolling to find it).
     Raised from 760->1024 for the host-embed: the coach shell's sidebar narrows the usable
     width, so collapse the side-by-side layout to the single-column tap-through view sooner. */
  .mj .jrny .cols{grid-template-columns:1fr}
  .mj .jrny .cols .pane{display:none}
  .mj .jrny.show-detail > .wcard{display:none}      /* hide notes card in detail view */
  .mj .jrny.show-detail .cols .side{display:none}
  .mj .jrny.show-detail .cols .pane{display:block}
  .mj .pane-back{
    display:inline-flex; align-items:center; gap:6px; margin:0 0 14px;
    padding:9px 14px 9px 11px; font-size:13.5px; font-weight:600; color:var(--text);
    background:var(--panel2); border:1px solid var(--line2); border-radius:999px;
  }
  .mj .pane-back svg{width:16px; height:16px; stroke-width:2.2}
  .mj .pane-back:active{background:var(--raise)}

  /* Sales: compact sticky total so the price stays in view while you toggle options */
  .mj .saletotbar{
    display:flex; align-items:center; gap:12px;
    position:sticky; bottom:calc(var(--bnav-h) + var(--safe-bottom) + 8px); z-index:40;
    margin:12px 0 0; padding:11px 14px;
    background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid var(--green-line); border-radius:16px; box-shadow:0 8px 24px rgba(20,20,15,.16);
  }
  .mj .saletotbar .stb-l{display:flex; flex-direction:column; line-height:1.12; flex:1; min-width:0}
  .mj .saletotbar .stb-cap{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
  .mj .saletotbar .stb-n{font-size:21px; font-weight:800; color:var(--green-ink); letter-spacing:-.02em}
  .mj .saletotbar .stb-sub{font-size:11.5px; color:var(--muted)}
  .mj .saletotbar .btn{flex:0 0 auto; padding:11px 16px}
  .mj .pcols .sumcard > .btn{display:none}   /* sticky bar carries the CTA; avoid a duplicate */
}

/* personality profile (ported from milestones feature/personality-profile) — .mj-scoped */
.mj .pers .pers-lens{display:flex;gap:8px;margin:10px 0 18px;flex-wrap:wrap}
.mj .pers-len{font:inherit;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;background:#fff;color:var(--muted);cursor:pointer}
.mj .pers-len.on{border-color:var(--green-line);background:var(--green-dim);color:var(--green-ink);font-weight:600}
.mj .pers-q{padding:14px 0;border-bottom:1px solid var(--line)}
.mj .pers-qt{font-size:15px;margin-bottom:12px;line-height:1.45}
.mj .pers-scale{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.mj .pers-end{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);min-width:62px}
.mj .pers-end:last-child{text-align:right}
.mj .pers-dot{border-radius:50%;border:2px solid var(--line2);background:#fff;cursor:pointer;padding:0;transition:transform .08s,background .08s,border-color .08s}
.mj .pers-dot:hover{transform:scale(1.12)}
.mj .pers-dot.v3,.mj .pers-dot.v-3{width:30px;height:30px}
.mj .pers-dot.v2,.mj .pers-dot.v-2{width:25px;height:25px}
.mj .pers-dot.v1,.mj .pers-dot.v-1{width:21px;height:21px}
.mj .pers-dot.v0{width:17px;height:17px}
.mj .pers-dot.v1,.mj .pers-dot.v2,.mj .pers-dot.v3{border-color:var(--green-line)}
.mj .pers-dot.v-1,.mj .pers-dot.v-2,.mj .pers-dot.v-3{border-color:#d8a36a}
.mj .pers-dot.v1.on,.mj .pers-dot.v2.on,.mj .pers-dot.v3.on{background:var(--green);border-color:var(--green)}
.mj .pers-dot.v0.on{background:var(--dim);border-color:var(--dim)}
.mj .pers-dot.v-1.on,.mj .pers-dot.v-2.on,.mj .pers-dot.v-3.on{background:var(--amber);border-color:var(--amber)}
.mj .btn:disabled{opacity:.5;cursor:not-allowed}
.mj .pers-result{padding-top:6px}
.mj .pers-type{text-align:center;margin:8px 0 18px}
.mj .pers-code{font-size:13px;letter-spacing:.3em;color:var(--green-ink);font-weight:700}
.mj .pers-nick{font-size:28px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.mj .pers-fam{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.mj .pers-axes{margin:18px 0}
.mj .pers-axis{margin-bottom:14px}
.mj .pers-axis-h{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.mj .pers-axis-pct{color:var(--green-ink);font-weight:600}
.mj .pers-bar{height:8px;background:var(--raise);border-radius:999px;overflow:hidden}
.mj .pers-bar-fill{height:100%;background:var(--green);border-radius:999px}
.mj .pers-axis-poles{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:4px}
.mj .pers-axis-poles .on{color:var(--text);font-weight:600}
.mj .pers-profile{font-size:15px;line-height:1.55;margin:14px 0}
.mj .pers-cols{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0}
.mj .pers-col{flex:1;min-width:200px}
.mj .pers-col-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mj .pers-col ul{margin:0;padding-left:18px}
.mj .pers-col li{margin-bottom:5px;font-size:14px;line-height:1.4}
.mj .pers-coach{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px}
.mj .pers-coach p{margin:0;font-size:14px;line-height:1.5}
.mj .pers-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* lifestyle log table (Lifestyle tab) — compact, horizontally scrollable, edit-row highlight */
.mj .lltable{width:100%; font-size:13px}
.mj .lltable th, .mj .lltable td{white-space:nowrap; padding:8px 10px}
.mj tr.ll-editing td{background:var(--green-dim)}

/* nutritional diary — free-text food log + AI macro estimate (.mj-scoped) */
.mj .diary textarea{width:100%; min-height:180px; font:inherit; font-size:14px; line-height:1.6; resize:vertical}
.mj .diary-text-ro{white-space:pre-wrap; font-size:13.5px; line-height:1.6; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px}
.mj .diary-est{margin-top:14px; padding:14px 16px; background:var(--green-dim); border:1px solid var(--green-line); border-radius:14px}
.mj .de-h{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--green-ink); margin-bottom:10px}
.mj .de-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.mj .de-cell{display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; color:var(--muted)}
.mj .de-cell input{font:inherit; font-size:18px; font-weight:800; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; width:100%}
.mj .de-cell .de-u{position:absolute; visibility:hidden}
.mj .de-items{margin-top:12px; font-size:12.5px}
.mj .de-items summary{cursor:pointer; color:var(--muted); font-weight:650}
.mj .de-item{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-top:1px solid var(--line)}
.mj .de-ass{margin-top:10px; font-size:11.5px; color:var(--muted); line-height:1.5}
@media (max-width:680px){ .mj .de-grid{grid-template-columns:repeat(2,1fr)} }

/* Body-weight: tapped-point readout + full weigh-in list */
.wpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.wpick b{font-size:17px;letter-spacing:-.01em}
.wpick span{font-size:12.5px;color:var(--muted);font-weight:600}
.wpick .wpick-d.up{color:#b45309}
.wpick .wpick-d.dn{color:#3f6212}
.wpick .wpick-src{font-size:11px;color:var(--dim)}
.wlist{max-height:340px;overflow-y:auto;margin-top:10px;border:1px solid var(--line);border-radius:10px}
.wlist table{width:100%;border-collapse:collapse;font-size:13px}
.wlist th{position:sticky;top:0;background:var(--card,#fff);z-index:1}
.wlist td.up{color:#b45309}
.wlist td.dn{color:#3f6212}

/* ---------- recipes ---------- */
.mj .rx-top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.mj .rx-top-actions{display:flex; gap:8px; flex-shrink:0}
.mj .rx-filters{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.mj .rx-tagbar{display:flex; flex-wrap:wrap; gap:6px}
.mj .rx-tag{font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--line2); background:transparent; color:var(--muted); cursor:pointer}
.mj .rx-tag.on{background:var(--text); color:#fff; border-color:var(--text)}
.mj span.rx-tag{cursor:default}
.mj .rx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.mj .rx-card{display:block; width:100%; text-align:left; background:var(--panel2,#F7F8FB); border:1px solid var(--line); border-radius:12px; padding:13px 14px; cursor:pointer}
.mj .rx-card:hover{border-color:var(--line2)}
.mj .rx-card-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px}
.mj .rx-name{font-weight:700; font-size:14px}
.mj .rx-macros{font-size:12.5px; color:var(--muted)}
.mj .rx-macros b{color:var(--text); font-size:15px}
.mj .rx-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.mj .rx-empty{text-align:center; padding:34px 18px; color:var(--muted); font-size:13.5px}
.mj .rx-head{display:grid; grid-template-columns:1fr 100px 110px; gap:10px; align-items:end; margin-bottom:12px}
.mj .rx-items{margin:14px 0 8px}
.mj .rx-row{display:grid; grid-template-columns:1fr 86px 96px 74px 34px; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); position:relative}
.mj .rx-row-bad{background:rgba(224,179,65,.07)}
.mj .rx-food{text-align:left; background:none; border:1px solid transparent; border-radius:8px; padding:6px 8px; cursor:pointer; font-size:13px; display:flex; flex-direction:column; gap:1px; min-width:0}
.mj .rx-food:hover{border-color:var(--line2)}
.mj .rx-unmatched{color:#8a6d1f; font-weight:600}
.mj .rx-raw{font-size:11px}
.mj .rx-qty, .mj .rx-cat{font-size:12.5px; padding:6px 8px}
.mj .rx-kcal{font-size:12px; text-align:right}
.mj .rx-pick{grid-column:1/-1; border:1px solid var(--line2); border-radius:10px; padding:10px; margin:4px 0 8px; background:var(--panel)}
.mj .rx-picklist{max-height:210px; overflow:auto; margin:8px 0}
.mj .rx-warn{background:rgba(224,179,65,.13); border:1px solid rgba(224,179,65,.4); border-radius:10px; padding:11px 13px; font-size:12.5px; line-height:1.5; margin-top:12px}
.mj .rx-totals{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.mj .rx-tot-col{flex:1; min-width:150px; background:var(--panel2,#F7F8FB); border:1px solid var(--line); border-radius:10px; padding:11px 13px; display:flex; flex-direction:column; gap:2px}
.mj .rx-tot-col b{font-size:20px; letter-spacing:-.02em}
.mj .rx-tot-col span:last-child{font-size:12px; color:var(--muted)}
.mj .rx-assume{margin-top:14px; font-size:12.5px; color:var(--muted); line-height:1.55}
.mj .rx-assume ul{margin:6px 0 0 18px}
/* Narrow: the 5-column ingredient row can't hold its shape, so let it wrap instead of
   forcing a grid-area map that would fight the optional inline picker row. */
@media (max-width:720px){
  .mj .rx-head{grid-template-columns:1fr}
  .mj .rx-row{display:flex; flex-wrap:wrap; gap:6px}
  .mj .rx-row > .rx-food{flex:1 1 100%}
  .mj .rx-row > .rx-qty{flex:0 0 84px}
  .mj .rx-row > .rx-cat{flex:0 0 96px}
  .mj .rx-row > .rx-kcal{flex:1 1 auto}
  .mj .rx-pick{flex:1 1 100%}
}
/* recipe → meal picker, inside the weekly meal plan */
.mj .rmeal-add{display:flex; gap:8px; flex-wrap:wrap}
.mj .rmeal-rx{font-size:12px; color:var(--muted); background:var(--panel2,#F7F8FB); border:1px solid var(--line); border-radius:8px; padding:7px 10px; margin:6px 0; line-height:1.45}
.mj .prx{border:1px solid var(--line2); border-radius:10px; padding:11px; margin:8px 0; background:var(--panel)}
.mj .prx-rem{font-size:12.5px; color:var(--muted); padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--line)}
.mj .prx-list{max-height:280px; overflow:auto}
.mj .prx-row{display:grid; grid-template-columns:1fr 74px auto auto 1fr auto; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px}
.mj .prx-row:last-child{border-bottom:none}
.mj .prx-name{display:flex; flex-direction:column; gap:1px; min-width:0}
.mj .prx-name .dim{font-size:11.5px}
.mj .prx-tot{font-size:12px; text-align:right}
@media (max-width:720px){
  .mj .prx-row{display:flex; flex-wrap:wrap}
  .mj .prx-name{flex:1 1 100%}
  .mj .prx-tot{flex:1 1 100%; text-align:left}
}