/* ============================================================
   MUIY — Chelation adherence · feature styles
   Built on the app's existing design tokens (assets/app.css).
   ============================================================ */

/* ---- Home daily check-in card ---- */
.checkin{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:17px 18px; margin-bottom:14px; box-shadow:var(--sh-sm); background:var(--surface); border:1.5px solid var(--hairline);}
.checkin-bar{position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--orange-2),var(--orange));}
.checkin-head{display:flex; align-items:center; gap:10px; margin-bottom:11px;}
.checkin-leaf{width:40px; height:40px; flex:none; border-radius:14px; background:var(--orange-wash); display:grid; place-items:center;}
.checkin-eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--orange);}
.checkin-q{font-size:16.5px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.25; text-wrap:pretty; margin-top:1px;}
.checkin-sub{font-size:12.5px; font-weight:600; color:var(--ink-2); margin-top:7px; line-height:1.45;}
.checkin-actions{display:flex; gap:9px; margin-top:13px;}
.checkin-take{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:15px; color:#fff; background:linear-gradient(150deg,var(--orange),var(--orange-2)); box-shadow:var(--sh-pop); border-radius:14px; padding:13px 14px; transition:transform .12s;}
.checkin-take:active{transform:scale(.97);}
.checkin-skip{flex:none; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--hairline-2); background:var(--surface-2); color:var(--ink-2); font-family:inherit; font-weight:800; font-size:14px; border-radius:14px; padding:13px 18px; cursor:pointer;}
.checkin-chips{display:flex; flex-direction:column; gap:8px; margin-top:13px;}
.checkin-chip{display:flex; align-items:center; gap:11px; width:100%; text-align:left; font-family:inherit; background:var(--surface-2); border:1.5px solid var(--hairline); border-radius:15px; padding:11px 13px; transition:.15s;}
.checkin-chip.done{background:var(--green-wash); border-color:transparent;}
.checkin-chip-leaf{width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center;}
.checkin-chip-mid{flex:1; min-width:0;}
.checkin-chip-n{font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
.checkin-chip-s{font-size:11.5px; font-weight:700; color:var(--ink-3); margin-top:1px;}
.checkin-chip-take{flex:none; width:34px; height:34px; border-radius:11px; border:none; cursor:pointer; display:grid; place-items:center; background:var(--orange); color:#fff;}
.checkin-chip-tick{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--green);}
.checkin-chip-undo{flex:none; border:none; background:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:12px; color:var(--ink-3);}
.checkin-done{display:flex; align-items:center; gap:11px; padding:3px 1px 1px;}
.checkin-done-tx{flex:1; min-width:0;}
.checkin-done-t{font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
.checkin-done-s{font-size:12.5px; font-weight:600; color:var(--ink-2); margin-top:2px; line-height:1.4;}
.checkin-link{display:inline-flex; align-items:center; gap:3px; margin-top:11px; font-size:13px; font-weight:800; color:var(--orange); background:none; border:none; cursor:pointer; font-family:inherit; padding:0;}

/* ---- today's doses card (Chelation tab) ---- */
.adh-today{margin-bottom:14px;}
.adh-today-k{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);}
.adh-today-h{font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-top:3px;}
.adh-today-prog{display:flex; align-items:baseline; font-weight:800; color:var(--orange); font-size:22px; letter-spacing:-.02em;}
.adh-today-prog-d{font-size:13px; color:var(--ink-3); font-weight:800;}
.dose-list{display:flex; flex-direction:column; margin-top:12px;}
.dose-row{display:flex; align-items:center; gap:12px; padding:12px 0;}
.dose-row + .dose-row{border-top:1.5px solid var(--hairline);}
.dose-leaf{width:38px; height:38px; flex:none; border-radius:13px; display:grid; place-items:center;}
.dose-mid{flex:1; min-width:0;}
.dose-name{font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
.dose-gen{font-size:10.5px; font-weight:800; color:var(--ink-3); background:var(--surface-2); padding:1px 6px; border-radius:6px; margin-left:4px; letter-spacing:.02em;}
.dose-meta{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--ink-3); margin-top:3px;}
.dose-actions{display:flex; gap:7px; flex:none;}
.dose-skip{border:1.5px solid var(--hairline-2); background:var(--surface-2); color:var(--ink-2); font-family:inherit; font-weight:800; font-size:12.5px; border-radius:11px; padding:8px 12px; cursor:pointer;}
.dose-take{display:flex; align-items:center; gap:5px; border:none; background:linear-gradient(150deg,var(--orange),var(--orange-2)); color:#fff; font-family:inherit; font-weight:800; font-size:12.5px; border-radius:11px; padding:8px 13px 8px 11px; cursor:pointer; box-shadow:0 6px 14px -8px rgba(252,107,5,.7); transition:transform .12s;}
.dose-take:active{transform:scale(.95);}
.dose-state{display:flex; align-items:center; gap:6px; border:none; font-family:inherit; font-weight:800; font-size:12.5px; border-radius:11px; padding:8px 12px; cursor:pointer; flex:none;}
.dose-state.taken{background:var(--green-wash); color:var(--success);}
.dose-state.skipped{background:var(--surface-2); color:var(--ink-3);}
.dose-state.pop{animation:dosePop .5s cubic-bezier(.22,1.4,.4,1);}
@keyframes dosePop{0%{transform:scale(.7); opacity:.4}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.adh-today-foot{display:flex; align-items:center; gap:11px; margin-top:13px; padding-top:13px; border-top:1.5px solid var(--hairline); font-size:13px; font-weight:700; color:var(--success); text-wrap:pretty;}

/* ---- skip sheet ---- */
.skip-opts{display:flex; flex-direction:column; gap:9px;}
.skip-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; cursor:pointer; font-family:inherit; background:var(--surface); border:1.5px solid var(--hairline-2); border-radius:15px; padding:14px 15px; font-weight:800; font-size:14.5px; color:var(--ink); transition:.15s; box-shadow:var(--sh-sm);}
.skip-opt.on{border-color:var(--orange); background:var(--orange-wash);}
.skip-tick{width:22px; height:22px; flex:none; border-radius:50%; border:2px solid var(--hairline-2); display:grid; place-items:center;}
.skip-opt.on .skip-tick{border-color:var(--orange); background:var(--orange);}

/* ---- streak card ---- */
.streak-card{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:17px 18px; margin-bottom:14px; box-shadow:var(--sh-sm);}
.streak-bar{position:absolute; left:0; top:0; bottom:0; width:5px;}
.streak-top{display:flex; align-items:center; gap:13px; margin-bottom:11px;}
.streak-lead{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;}
.streak-big{font-size:26px; font-weight:800; letter-spacing:-.025em; color:var(--ink); line-height:1.05; margin-top:2px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.streak-unit{font-size:13px; font-weight:800; color:var(--ink-2); letter-spacing:-.01em;}
.streak-line{margin:0; font-size:14px; font-weight:600; color:var(--ink); line-height:1.5; text-wrap:pretty;}
.streak-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px;}
.streak-best{font-size:11.5px; font-weight:800; color:var(--ink-3); white-space:nowrap;}

/* a floating sprite that drifts up when you log a dose */
.float-sprite{position:absolute; left:50%; bottom:120px; z-index:96; transform:translateX(-50%); pointer-events:none; animation:floatUp 1.5s cubic-bezier(.3,.7,.3,1) forwards;}
@keyframes floatUp{0%{opacity:0; transform:translate(-50%,20px) scale(.6)}25%{opacity:1; transform:translate(-50%,-6px) scale(1.06)}70%{opacity:1; transform:translate(-50%,-44px) scale(1)}100%{opacity:0; transform:translate(-50%,-82px) scale(.92)}}
@media (prefers-reduced-motion: reduce){ .float-sprite{display:none;} .dose-state.pop{animation:none;} }

/* ---- chelation tab tools row ---- */
.adh-tools{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:16px;}
.adh-tool{display:flex; flex-direction:column; align-items:center; gap:7px; background:var(--surface); border:1.5px solid var(--hairline); border-radius:18px; padding:13px 6px; cursor:pointer; font-family:inherit; transition:.15s;}
.adh-tool:active{transform:scale(.97);}
.adh-tool-leaf{width:40px; height:40px; border-radius:13px; display:grid; place-items:center;}
.adh-tool-l{font-size:11.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}

/* ---- insights sub-screen ---- */
.sub-back{display:inline-flex; align-items:center; gap:3px; border:none; background:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:13.5px; color:var(--ink-2); padding:0; margin-bottom:4px;}
.ins-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ins-metric{background:var(--surface); border:1.5px solid var(--hairline); border-radius:18px; padding:13px 14px;}
.ins-metric-k{font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
.ins-metric-v{font-size:24px; font-weight:800; letter-spacing:-.025em; color:var(--ink); margin-top:5px; line-height:1;}
.ins-metric-sub{font-size:11.5px; font-weight:700; color:var(--ink-2); margin-top:4px;}
.ins-pct{font-size:20px; font-weight:800; letter-spacing:-.02em;}
.ins-bar{height:12px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.ins-bar-fill{height:100%; border-radius:999px; transition:width .6s cubic-bezier(.22,1,.36,1);}
.wk-bars{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:96px;}
.wk-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%;}
.wk-track{flex:1; width:100%; max-width:26px; background:var(--surface-2); border-radius:8px; display:flex; align-items:flex-end; overflow:hidden;}
.wk-fill{width:100%; border-radius:8px; transition:height .5s cubic-bezier(.22,1,.36,1);}
.wk-lbl{font-size:10.5px; font-weight:800; color:var(--ink-3);}
.ins-leaf{width:38px; height:38px; flex:none; border-radius:13px; background:var(--sky-wash); display:grid; place-items:center;}
.ins-nudge{display:inline-flex; align-items:center; gap:5px; margin-top:11px; font-size:12.5px; font-weight:800; color:var(--orange); background:none; border:none; cursor:pointer; font-family:inherit; padding:0;}
.ins-disclaimer{font-size:11.5px; font-weight:600; color:var(--ink-3); text-align:center; line-height:1.5; margin:18px 8px 0; text-wrap:pretty;}

/* ---- reminders sheet ---- */
.rem-master{display:flex; align-items:center; gap:12px; padding:14px 15px; background:var(--surface-2); border-radius:16px; margin-bottom:6px;}
.rem-master-tx{flex:1; min-width:0;}
.rem-master-t{font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
.rem-master-d{font-size:12px; font-weight:600; color:var(--ink-2); margin-top:2px;}
.rem-body{transition:opacity .25s; padding-top:10px;}
.rem-body.off{opacity:.4; pointer-events:none;}
.rem-eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px;}
.rem-row,.rem-opt{display:flex; align-items:center; gap:12px; padding:11px 0;}
.rem-row + .rem-row{border-top:1px solid var(--hairline);}
.rem-row.muted{opacity:.55;}
.rem-leaf{width:36px; height:36px; flex:none; border-radius:12px; display:grid; place-items:center;}
.rem-leaf.soft{background:var(--surface-2); color:var(--ink-2);}
.rem-mid{flex:1; min-width:0;}
.rem-name{font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
.rem-sub{font-size:11.5px; font-weight:600; color:var(--ink-2); margin-top:2px;}
.rem-time{font-family:inherit; font-weight:800; font-size:13px; color:var(--orange); background:var(--orange-wash); border:none; border-radius:9px; padding:4px 8px; margin-top:5px; cursor:pointer;}
.rem-opt{border-top:1px solid var(--hairline);}
.rem-seg{display:flex; gap:3px; background:var(--surface-2); border:1.5px solid var(--hairline); border-radius:12px; padding:3px; flex:none;}
.rem-seg button{border:none; background:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:11.5px; color:var(--ink-2); padding:6px 9px; border-radius:9px;}
.rem-seg button.on{background:var(--surface); color:var(--orange); box-shadow:var(--sh-sm);}
.rem-future{display:flex; gap:9px; align-items:flex-start; margin-top:14px; padding:12px 13px; background:var(--sky-wash); border-radius:14px; font-size:12px; font-weight:600; color:var(--sky-deep); line-height:1.5; text-wrap:pretty;}
.rem-copy{margin-top:14px; padding:11px 13px; background:var(--surface-2); border-radius:14px; font-size:12px; font-weight:600; color:var(--ink-2); line-height:1.5;}
.rem-copy b{color:var(--ink); font-weight:800;}

/* ---- share sheet ---- */
.share-card{border:1.5px solid var(--hairline); border-radius:20px; overflow:hidden; box-shadow:var(--sh-sm);}
.share-head{display:flex; align-items:center; gap:11px; padding:14px 15px; background:var(--surface-2);}
.share-leaf{width:36px; height:36px; flex:none; border-radius:12px; background:var(--orange-wash); display:grid; place-items:center;}
.share-head > div{min-width:0;}
.share-t{font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em; white-space:nowrap;}
.share-d{font-size:11.5px; font-weight:700; color:var(--ink-3); margin-top:2px; white-space:nowrap;}
.share-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline);}
.share-grid > div{background:var(--surface); padding:13px 15px;}
.share-k{font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);}
.share-v{font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-top:5px;}
.share-v small{font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:0;}
.share-meds{padding:6px 15px 13px; background:var(--surface);}
.share-med{display:flex; align-items:center; gap:9px; padding:9px 0;}
.share-med + .share-med{border-top:1px solid var(--hairline);}
.share-med-dot{width:9px; height:9px; border-radius:999px; flex:none;}
.share-med-n{flex:1; font-size:13.5px; font-weight:800; color:var(--ink);}
.share-med-n small{font-size:10.5px; font-weight:800; color:var(--ink-3); margin-left:3px;}
.share-med-v{font-size:13px; font-weight:800; color:var(--ink-2);}

/* ---- narrative "journey" share card ---- */
.jcard{border:1.5px solid var(--hairline); border-radius:22px; overflow:hidden; box-shadow:var(--sh-sm); background:var(--surface);}
.jhead{padding:16px 17px 14px; background:var(--surface-2); border-bottom:1px solid var(--hairline);}
.jhead-row{display:flex; align-items:center; gap:11px;}
.jhead-leaf{width:38px; height:38px; flex:none; border-radius:13px; background:var(--green-wash); display:grid; place-items:center;}
.jhead-t{font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em;}
.jhead-d{font-size:12px; font-weight:700; color:var(--ink-3); margin-top:2px;}

/* headline insight banner — the 15-second read */
.jbanner{display:flex; gap:12px; padding:15px 17px; border-bottom:1px solid var(--hairline);}
.jbanner-ic{width:30px; height:30px; flex:none; border-radius:10px; display:grid; place-items:center; margin-top:1px;}
.jbanner-t{font-size:14.5px; line-height:1.52; font-weight:700; color:var(--ink); letter-spacing:-.01em; text-wrap:pretty;}
.jbanner-t b{font-weight:850;}

/* per-drug chelation rows */
.jmed{padding:11px 0;}
.jmed + .jmed{border-top:1px dashed var(--hairline);}
.jmed-top{display:flex; align-items:baseline; gap:8px;}
.jmed-name{font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
.jmed-abbr{font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.03em;}
.jmed-route{font-size:11.5px; font-weight:700; color:var(--ink-3); margin-left:auto; white-space:nowrap;}
.jmed-dose{font-size:13px; font-weight:600; color:var(--ink-2); margin-top:5px; line-height:1.45;}
.jmed-dose b{font-weight:800; color:var(--ink);}
.jdosepill{display:inline-block; font-size:10.5px; font-weight:800; padding:1.5px 8px; border-radius:999px; margin-left:7px; vertical-align:1px; letter-spacing:.01em;}
.jmed-adh{display:flex; align-items:center; gap:10px; margin-top:9px;}
.jmed-bar{flex:1; height:7px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.jmed-bar > i{display:block; height:100%; border-radius:999px;}
.jmed-pct{font-size:12.5px; font-weight:800; color:var(--ink-2); min-width:78px; text-align:right;}

/* share-channel chooser */
.jshare{margin-top:16px;}
.jshare-h{font-size:13px; font-weight:800; color:var(--ink-2); text-align:center; margin-bottom:13px;}
.jshare-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:12px;}
.jshare-opt{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border-radius:16px; border:1.5px solid var(--hairline); background:var(--surface); font-size:12.5px; font-weight:800; color:var(--ink-2); cursor:pointer; transition:border-color .15s, transform .15s;}
.jshare-opt:hover{border-color:var(--ink-3); transform:translateY(-1px);}
.jshare-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center;}
.jsec{padding:14px 17px;}
.jsec + .jsec{border-top:1px solid var(--hairline);}
.jsec-head{display:flex; align-items:center; gap:9px; margin-bottom:10px;}
.jsec-ic{width:24px; height:24px; flex:none; border-radius:8px; display:grid; place-items:center;}
.jsec-t{font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;}
.jbul{display:flex; align-items:flex-start; gap:10px; padding:5px 0;}
.jbul-dot{width:6px; height:6px; border-radius:999px; flex:none; margin-top:7.5px;}
.jbul-tx{font-size:14px; line-height:1.5; color:var(--ink); font-weight:600; text-wrap:pretty;}
.jbul-tx b{font-weight:800;}

/* help-with chips (patient voice, editable) */
.jhelp-hint{font-size:12px; color:var(--ink-3); font-weight:600; margin:-2px 0 10px;}
.jchips{display:flex; flex-wrap:wrap; gap:8px;}
.jchip{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px; border:1.5px solid var(--hairline); background:var(--surface); font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; transition:all .15s; text-align:left;}
.jchip:hover{border-color:var(--orange);}
.jchip.on{background:var(--orange-wash); border-color:var(--orange); color:var(--orange-deep, var(--orange));}
.jchip-tick{width:15px; height:15px; flex:none; border-radius:999px; border:1.5px solid var(--ink-3); display:grid; place-items:center;}
.jchip.on .jchip-tick{background:var(--orange); border-color:var(--orange);}
.jadd{display:flex; gap:8px; margin-top:11px;}
.jadd input{flex:1; min-width:0; padding:9px 13px; border-radius:12px; border:1.5px solid var(--hairline); background:var(--surface); font:inherit; font-size:13.5px; font-weight:600; color:var(--ink);}
.jadd input:focus{outline:none; border-color:var(--orange);}
.jadd-btn{flex:none; width:40px; border-radius:12px; border:1.5px solid var(--hairline); background:var(--surface-2); display:grid; place-items:center; cursor:pointer;}
.jadd-btn:hover{border-color:var(--orange);}