/* GRO-CODE app styles. Component rules take every colour from the tokens in tokens.css. */
/* ---------- shell ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{touch-action:manipulation}   /* taps act at once: no double-tap zoom on the small controls */
input,select,textarea{min-width:0;max-width:100%;box-sizing:border-box}   /* a field never widens its row */
body{margin:0;background:var(--sbg);color:var(--sfg);font-family:var(--body);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{height:100%;display:flex;flex-direction:column}
#screen{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;grid-template-columns:minmax(0,1fr);overscroll-behavior:contain;padding:calc(10px + var(--sat)) max(16px,var(--sar)) 24px max(16px,var(--sal));display:grid;gap:14px;align-content:start;max-width:560px;width:100%;margin:0 auto}
#screen:focus{outline:none}
.p-tabs{flex:none;border-top:1px solid var(--sline);background:var(--scard);display:flex;padding:8px max(6px,var(--sar)) calc(10px + var(--sab)) max(6px,var(--sal))}
.p-tab{all:unset;flex:1;display:grid;justify-items:center;align-content:center;gap:4px;cursor:pointer;color:var(--smuted);font:600 10px var(--display);letter-spacing:.12em;text-transform:uppercase;border-radius:12px;padding:4px 0;min-height:44px}
.p-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.p-tab.on{color:var(--sfocus)}
.p-tab:focus-visible{outline:2px solid var(--sfocus)}
.p-toast{position:fixed;left:50%;bottom:calc(96px + var(--sab));transform:translate(-50%,8px);opacity:0;background:var(--sfg);color:var(--sbg);font-size:12px;padding:8px 13px;border-radius:999px;pointer-events:none;white-space:nowrap;transition:opacity .25s,transform .25s;z-index:4}
.p-toast.on{opacity:1;transform:translate(-50%,0)}
.p-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px;min-width:0}
.wordmark{font:700 17px var(--display);letter-spacing:.18em;color:var(--sfg);display:flex;align-items:center;gap:8px}
.growpill{all:unset;cursor:pointer;font:600 10.5px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--smuted);border:1px solid var(--sline);border-radius:999px;padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:62%;min-width:0;overflow:hidden;text-overflow:ellipsis}
.growpill:focus-visible{outline:2px solid var(--sfocus)}
.pg-title{font:700 26px/1 var(--display);letter-spacing:.02em;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pg-title span{font:600 11px var(--display);letter-spacing:.14em;color:var(--smuted);text-transform:uppercase;white-space:nowrap}
.back{all:unset;cursor:pointer;font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--smuted);display:flex;align-items:center;gap:6px;min-height:32px}
.back:focus-visible{outline:2px solid var(--sfocus)}
.back::before{content:'‹';font-size:18px;line-height:1}
.phaseline{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.phstrip{display:flex;gap:2px;height:7px}
.phstrip.mini{height:5px}
.phstrip i{flex:1;border-radius:2px;opacity:.4}
.phstrip i.past{opacity:.75}
.phstrip i.cur{opacity:1;box-shadow:0 0 0 2px var(--sbg),0 0 0 3.5px var(--sfg)}
.phstrip.mini i.cur{box-shadow:0 0 0 1.5px var(--scard),0 0 0 2.5px var(--sfg)}
.hdr2{display:flex;justify-content:space-between;align-items:center;gap:10px}
.phtxt{font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--smuted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phtxt b{color:var(--sfg)}
.seg{display:inline-flex;flex:none;border:1px solid var(--sline);border-radius:999px;padding:2px;gap:2px;background:var(--sinset)}
.seg.wide{display:flex;width:100%}
.seg.wide button{flex:1;text-align:center}
.seg button{all:unset;cursor:pointer;font:600 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:999px;color:var(--smuted);min-height:28px;box-sizing:border-box}
.seg button.on{background:var(--sfg);color:var(--sbg)}
.seg button:focus-visible{outline:2px solid var(--sfocus)}
.envline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.envline div{background:var(--sinset);border-radius:11px;padding:8px 4px;text-align:center;min-width:0}
.envline b{display:block;font:700 17px var(--display);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.envline span{font:600 9.5px var(--display);letter-spacing:.12em;color:var(--smuted);text-transform:uppercase}
.banner{background:var(--scard);border:1px solid var(--sline);border-left:3px solid var(--sfocus);border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.4;display:flex;justify-content:space-between;align-items:center;gap:10px}
.banner b{font-weight:600}
/* ---------- recipe (the shared day detail) ---------- */
.recipe{grid-template-columns:minmax(0,1fr);background:var(--scard);border:1px solid var(--sline);border-radius:18px;padding:12px 14px 6px;display:grid}
.recipe h4{display:flex;justify-content:space-between;align-items:baseline;font:600 12px var(--display);letter-spacing:.14em;color:var(--smuted);gap:8px}
.recipe h4 span{font-family:var(--body);letter-spacing:0;text-transform:none;font-weight:500;color:var(--sfg);font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-head{font-size:12px;color:var(--smuted);padding:4px 0 8px;border-bottom:1px solid var(--sline);margin-bottom:2px;font-variant-numeric:tabular-nums}
.rc-head b{color:var(--sfg);font-weight:600}
.step{all:unset;display:grid;grid-template-columns:24px minmax(0,1fr);gap:11px;align-items:start;padding:10px 2px;border-bottom:1px solid var(--sline);cursor:pointer;color:var(--sfg)}
.step:last-of-type{border-bottom:none}
.step:focus-visible{box-shadow:0 0 0 2px var(--sfocus);border-radius:8px}
.step .box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--smuted);margin-top:1px;display:grid;place-items:center}
.step .box svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.step.done .box{background:var(--c-water);border-color:var(--c-water)}
.step.done .box svg{opacity:1}
.step .t{font-size:13.5px;font-weight:500;line-height:1.3}
.step .t small{display:block;font-weight:400;font-size:11.5px;color:var(--smuted)}
.step .n{font:600 10.5px var(--display);letter-spacing:.14em;color:var(--smuted);margin-right:6px}
.step.done .t{color:var(--smuted);text-decoration:line-through;text-decoration-color:var(--sline)}
.step ul{list-style:none;margin:5px 0 0;padding:0;display:grid;gap:3px;font-size:12.5px;color:var(--smuted)}
.step ul li{display:flex;justify-content:space-between;gap:8px;align-items:center}
.step ul li span{display:flex;align-items:center;gap:7px;min-width:0}
.step ul li i{display:inline-block;width:9px;height:9px;border-radius:2.5px;flex:none}
.step ul li b{color:var(--sfg);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;line-height:1.15}
.step ul li b small{display:block;font-weight:400;font-size:10.5px;color:var(--smuted)}
.step.done ul{opacity:.55}
.rc-done{background:var(--c-water);color:#fff;border-radius:13px;padding:11px 14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;font-size:13px;gap:10px;margin:8px 0 6px}
.rc-done button{all:unset;cursor:pointer;font:600 11px var(--display);letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:4px 10px}
.rc-done button:focus-visible{outline:2px solid #fff}
.rc-next{font-size:12px;color:var(--smuted);text-align:center;padding:8px 0 6px}
.card{background:var(--scard);border:1px solid var(--sline);border-radius:18px;padding:13px 15px;font-size:13px;color:var(--smuted);line-height:1.45}
.card h4{font:600 12px var(--display);letter-spacing:.14em;color:var(--smuted);margin-bottom:4px}
.card b{color:var(--sfg);font-weight:600}
.rd{display:flex;align-items:center;gap:8px;padding:6px 0 2px;font-size:12.5px;color:var(--smuted)}
.rd input{width:64px;font:600 15px var(--body);font-variant-numeric:tabular-nums;color:var(--sfg);background:var(--sinset);border:1.5px solid var(--sline);border-radius:9px;padding:5px 8px;text-align:right;-moz-appearance:textfield}
.rd input::-webkit-outer-spin-button,.rd input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rd input:focus-visible{outline:none;border-color:var(--sfocus)}
.rd em{font-style:normal;margin-left:auto;font-variant-numeric:tabular-nums}
.rd em.hi{color:var(--c-hmy);font-weight:600}
.btn-s{all:unset;cursor:pointer;font:600 11px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--sfocus);color:var(--sbg);justify-self:start}
.btn-s.sec{background:transparent;color:var(--smuted);border:1px solid var(--sline)}
.btn-s:focus-visible{outline:2px solid var(--sfocus)}

/* ---------- List (the spine) ---------- */
.lg-sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lg-sum b{font:700 28px/1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-sum b small{font-size:14px;color:var(--smuted);margin-left:3px}
.lg-sum span{font:600 10.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--smuted);text-align:right}
.lg{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.lg-row{all:unset;display:grid;grid-template-columns:46px minmax(0,1fr) 86px;align-items:center;gap:10px;padding:8px 10px;border-radius:13px;cursor:pointer;color:var(--sfg);border:1px solid transparent}
.lg-row:focus-visible{box-shadow:0 0 0 2px var(--sfocus)}
.lg-row.today{background:var(--scard);border-color:var(--sline)}
.lg-row.sel{background:var(--scard);border-color:var(--sfg)}
.lg-row.rest{opacity:.62}
.lg-day{display:grid;line-height:1.05}
.lg-day b{font:700 15px var(--display);letter-spacing:.1em}
.lg-row.today .lg-day b::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--sfocus);margin-left:5px;vertical-align:2px}
.lg-day span{font-size:11px;color:var(--smuted);font-variant-numeric:tabular-nums}
.lg-track{display:grid;gap:3px;min-width:0}
.lg-bar{position:relative;height:12px;border-radius:3px;background:var(--sinset);overflow:hidden}
.lg-bar i{position:absolute;top:0;bottom:0;width:1px;background:var(--sline)}
.lg-bar i.t25{left:25%}.lg-bar i.t50{left:50%}.lg-bar i.t75{left:75%}
.lg-fill{position:absolute;inset:0 auto 0 0;background:var(--c-water);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.lg-band{position:absolute;top:0;bottom:0;background:var(--c-water);opacity:.28;border-radius:3px}
.lg-pt{position:absolute;top:1px;bottom:1px;width:3px;margin-left:-1.5px;background:var(--sfg);border-radius:2px;opacity:.55}
.lg-pt.soak{width:7px;margin-left:-3.5px;background:var(--c-water);opacity:1}
.lg-pt.read{opacity:1;width:5px;margin-left:-2.5px;background:var(--sfocus)}
.lg-comp{display:flex;height:4px;border-radius:2px;overflow:hidden;gap:1px}
.lg-comp i{display:block;min-width:1px}
.lg-row.rest .lg-bar{background:transparent;border:1px dashed var(--sline);height:10px}
.lg-row.rest .lg-bar i{display:none}
.lg-val{text-align:right;line-height:1.1}
.lg-val b{font:700 16px var(--display);font-variant-numeric:tabular-nums;display:block;letter-spacing:.02em;white-space:nowrap}
.lg-val span{font:600 9.5px var(--display);letter-spacing:.1em;color:var(--smuted);text-transform:uppercase;white-space:nowrap}
.lg-val span.feed,.lg-val span.soak,.lg-val span.soakfeed{color:var(--c-water)}
.lg-val span.logged{color:var(--sfocus)}
.lg-val span i{display:inline-block;width:6px;height:6px;transform:rotate(45deg);margin:0 4px 1px 0}
.lg-detail{margin:0 0 4px}
.lg-soil{background:var(--scard);border:1px solid var(--sline);border-radius:16px;padding:12px 14px;display:grid;gap:8px}
.lg-soil h4{font:600 12px var(--display);letter-spacing:.14em;color:var(--smuted);display:flex;justify-content:space-between;gap:8px}
.lg-soil h4 span{font-family:var(--body);letter-spacing:0;text-transform:none;font-weight:400;font-size:11px;text-align:right}
.lg-soil svg{width:100%;height:auto;display:block}
.lg-soil .lab{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font:600 10px var(--display);letter-spacing:.1em;color:var(--smuted);text-align:center}
.tt-band{fill:var(--c-water);opacity:.16}
.tt-edge{stroke:var(--c-water);stroke-width:1;opacity:.6;stroke-dasharray:3 3}
.tt-proj{fill:none;stroke:var(--smuted);stroke-width:1.6;stroke-dasharray:4 3;stroke-linejoin:round}
.tt-read{fill:none;stroke:var(--sfocus);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.tt-soak{fill:var(--c-water);stroke:var(--scard);stroke-width:1.5}
.tt-dot{fill:var(--sfocus);stroke:var(--scard);stroke-width:1.5}
.tt-today{stroke:var(--sfocus);stroke-width:1.2;opacity:.6}
.tt-lab{font:600 9.5px var(--display);fill:var(--smuted);letter-spacing:.06em}
.tt-foot{font-size:11.5px;color:var(--smuted);line-height:1.4}
.tt-foot b{color:var(--sfg);font-weight:600}
.ws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ws div{background:var(--sinset);border-radius:11px;padding:8px 6px;text-align:center;min-width:0}
.ws b{display:block;font:700 17px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.ws span{font:600 9.5px var(--display);letter-spacing:.1em;color:var(--smuted);text-transform:uppercase}

/* ---------- Ring (instrument) ---------- */
.ring-wrap{position:relative;width:100%;max-width:338px;margin:0 auto;aspect-ratio:1}
.ring{width:100%;height:100%;display:block}
.r-scale{fill:none;stroke:var(--sline);stroke-width:1}
.r-scale.full{stroke:var(--smuted);stroke-dasharray:2 3;opacity:.9}
.r-lab{font:600 11.5px var(--display);letter-spacing:.1em;fill:var(--smuted)}
.rd-seg.today .r-lab{fill:var(--sfg)}
.r-needle{stroke:var(--sfocus);stroke-width:1.2;opacity:.95}
.r-tip{fill:var(--sfocus)}
.r-sweep{fill:var(--sfocus);opacity:.08}
.rd-seg{cursor:pointer;outline:none}
.r-hit{fill:transparent}
.rd-seg:focus-visible .r-hit{fill:var(--sfg);fill-opacity:.08}
.r-sel{fill:none;stroke:var(--sfg);stroke-width:1.5}
.r-ph{fill:none}
.r-here{fill:var(--sfg);stroke:var(--sbg);stroke-width:2}
.r-blade{fill:var(--c-water)}
.r-bandfill{fill:var(--c-water);opacity:.28}
.r-pt{fill:var(--sfg);opacity:.6}
.r-pt.soak{fill:var(--c-water);opacity:1}
.r-pt.read{fill:var(--sfocus);opacity:1}
.r-rest{fill:none;stroke:var(--smuted);stroke-width:2;stroke-dasharray:2.5 3.5;opacity:.7}
.r-track{fill:var(--sinset)}
.r-comp{stroke:var(--sbg);stroke-width:.7}
.hub{position:absolute;inset:0;margin:auto;width:33%;height:33%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;gap:1px}
.hb-day{font:600 10.5px var(--display);letter-spacing:.16em;color:var(--smuted)}
.hb-big{font:700 38px/1 var(--display);letter-spacing:-.01em;color:var(--sfg);font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-big small{font-size:17px;margin-left:2px;color:var(--smuted);letter-spacing:0}
.hb-type{font:600 9.5px var(--display);letter-spacing:.12em;padding:2px 8px;border-radius:999px;background:var(--sinset);color:var(--sfg);text-transform:uppercase}
.hb-type.feed{background:var(--c-water);color:#fff}
.hb-type.logged{background:var(--sfocus);color:var(--sbg)}
.hb-sub{font-size:10.5px;color:var(--smuted);line-height:1.2}
.hb-date{font:700 30px/1 var(--display);letter-spacing:.01em;color:var(--sfg)}
.hb-date small{display:block;font-size:11px;letter-spacing:.16em;color:var(--smuted);margin-top:2px}
.hb-row{display:flex;gap:8px;font:600 10px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--smuted);margin-top:4px}
.hb-row b{color:var(--sfg)}
.r-key{display:flex;flex-wrap:wrap;gap:4px 11px;justify-content:center;font-size:11px;color:var(--smuted);margin-top:-8px}
.r-key i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}

/* ---------- Quick start ---------- */
.qs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.qs-prog{font:600 11px var(--display);letter-spacing:.16em;color:var(--smuted);text-transform:uppercase;display:flex;justify-content:space-between}
.qs-h{font:700 26px/1.05 var(--display);letter-spacing:.02em;text-wrap:balance}
.qs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qs-card{all:unset;cursor:pointer;background:var(--scard);border:1.5px solid var(--sline);border-radius:14px;padding:12px 8px;display:grid;gap:3px;text-align:center}
.qs-card.on{border-color:var(--sfg)}
.qs-card:focus-visible{outline:2px solid var(--sfocus)}
.qs-card b{font:700 15px var(--display);letter-spacing:.06em;text-transform:uppercase}
.qs-card span{font-size:11px;color:var(--smuted)}
.qs-lab{font:600 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--smuted)}
.qs-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.qs-chip{all:unset;cursor:pointer;font:600 13px var(--display);letter-spacing:.06em;padding:7px 12px;border-radius:999px;border:1.5px solid var(--sline);background:var(--scard);font-variant-numeric:tabular-nums}
.qs-chip.on{background:var(--sfg);color:var(--sbg);border-color:var(--sfg)}
.qs-chip em{font-style:normal;font-size:9.5px;letter-spacing:.1em;margin-left:5px;opacity:.75}
.qs-chip:focus-visible{outline:2px solid var(--sfocus)}
.qs-in{font:600 15px var(--body);font-variant-numeric:tabular-nums;color:var(--sfg);background:var(--scard);border:1.5px solid var(--sline);border-radius:10px;padding:6px 8px;width:92px;text-align:right}
.qs-in:focus-visible{outline:2px solid var(--sfocus);border-color:var(--sfocus)}
.qs-row{display:flex;justify-content:space-between;align-items:center;background:var(--scard);border:1px solid var(--sline);border-radius:12px;padding:6px 6px 6px 14px;font-size:13.5px;gap:8px}
.qs-row>span{min-width:0}
.qs-stepper{display:flex;align-items:center;gap:4px}
.qs-stepper button{all:unset;cursor:pointer;width:32px;height:32px;border-radius:9px;background:var(--sinset);display:grid;place-items:center;font-size:18px;color:var(--sfg)}
.qs-stepper button:focus-visible{outline:2px solid var(--sfocus)}
.qs-stepper input{width:64px;text-align:center;font:700 16px var(--display);font-variant-numeric:tabular-nums;color:var(--sfg);background:transparent;border:none;border-bottom:1.5px solid var(--sline);padding:4px 2px;-moz-appearance:textfield}
.qs-stepper input::-webkit-outer-spin-button,.qs-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qs-stepper input:focus-visible{outline:none;border-bottom-color:var(--sfocus)}
.qs-total{font:600 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--smuted);text-align:center;padding:2px 0;line-height:1.5}
.qs-total b{color:var(--sfg)}
.qs-nav{display:flex;justify-content:space-between;gap:8px;padding-top:4px}
.qs-btn{all:unset;cursor:pointer;font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;border-radius:999px;color:var(--smuted);border:1px solid var(--sline);text-align:center}
.qs-btn.pri{background:var(--sfocus);color:var(--sbg);border-color:var(--sfocus);flex:1}
.qs-btn:focus-visible{outline:2px solid var(--sfocus)}
.qs-styles{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.qs-style{all:unset;cursor:pointer;background:var(--scard);border:1.5px solid var(--sline);border-radius:14px;padding:11px 14px;display:grid;gap:3px}
.qs-style.on{border-color:var(--sfg)}
.qs-style:focus-visible{outline:2px solid var(--sfocus)}
.qs-style b{font:700 14px var(--display);letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:8px}
.qs-style b em{font:600 9.5px var(--display);letter-spacing:.12em;font-style:normal;background:var(--sfocus);color:var(--sbg);border-radius:999px;padding:2px 8px;white-space:nowrap}
.qs-style span{font-size:12px;color:var(--smuted);line-height:1.35}
.qs-banner{background:var(--sfocus);color:var(--sbg);border-radius:14px;padding:11px 14px;font-size:12.5px;line-height:1.4;display:grid;gap:6px}
.qs-banner button{all:unset;cursor:pointer;font:600 10.5px var(--display);letter-spacing:.12em;text-transform:uppercase;justify-self:start;border:1px solid currentColor;border-radius:999px;padding:3px 9px}
.qs-banner button:focus-visible{outline:2px solid currentColor}
.qs-note{font-size:12px;color:var(--smuted);line-height:1.4}

/* ---------- Spaces ---------- */
.sp-room{font:600 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--smuted);display:flex;justify-content:space-between;padding:4px 2px 0}
.sp-card{all:unset;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;background:var(--scard);border:1px solid var(--sline);border-radius:16px;padding:12px 14px;color:var(--sfg)}
.sp-card.live{border-color:var(--sfg)}
.sp-card:focus-visible{outline:2px solid var(--sfocus)}
.sp-head{display:grid;gap:1px}
.sp-head b{font:700 17px var(--display);letter-spacing:.04em}
.sp-head span{font-size:12px;color:var(--smuted)}
.sp-job{font-size:13px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sp-job b{font:600 10px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--smuted)}
.sp-job em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.sp-job em.feed{color:var(--c-water)}
.sp-tags{display:flex;flex-wrap:wrap;gap:4px}
.sp-tags i{font:600 9.5px var(--display);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--smuted);border:1px solid var(--sline);border-radius:999px;padding:2px 7px}
.sp-new{all:unset;cursor:pointer;display:grid;place-items:center;border:1.5px dashed var(--sline);border-radius:16px;padding:14px;font:600 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--smuted)}
.sp-new:focus-visible{outline:2px solid var(--sfocus)}

/* ---------- Cycle plan ---------- */
.pl-head{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.pl-head b{font:700 24px/1 var(--display);letter-spacing:.02em}
.pl-head span{font-size:12px;color:var(--smuted)}
.pl-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.pl-style{all:unset;cursor:pointer;text-align:center;font:600 10px var(--display);letter-spacing:.08em;text-transform:uppercase;padding:9px 2px;border-radius:11px;background:var(--sinset);color:var(--smuted)}
.pl-style.on{background:var(--sfg);color:var(--sbg)}
.pl-style:focus-visible{outline:2px solid var(--sfocus)}
.pl-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.pl-tile{background:var(--scard);border:1px solid var(--sline);border-radius:14px;padding:10px 12px;min-width:0}
.pl-tile b{display:block;font:700 22px/1.1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-tile b small{font-size:13px;color:var(--smuted);margin-left:2px}
.pl-tile span{font:600 9.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--smuted)}
.pl-table{background:var(--scard);border:1px solid var(--sline);border-radius:16px;padding:10px 14px 6px;display:grid}
.pl-table h4{font:600 12px var(--display);letter-spacing:.14em;color:var(--smuted);display:grid;grid-template-columns:minmax(0,1fr) 74px 74px;gap:8px;padding:4px 0 6px;border-bottom:1px solid var(--sline)}
.pl-table h4 span{text-align:right;font-weight:600}
.pl-row{display:grid;grid-template-columns:minmax(0,1fr) 74px 74px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--sline);font-size:13px}
.pl-row:last-child{border-bottom:none}
.pl-row .nm{display:flex;align-items:center;gap:8px;min-width:0}
.pl-row .nm i{width:10px;height:10px;border-radius:3px;flex:none}
.pl-row .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-row b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}
.pl-row small{color:var(--smuted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-size:12px}
.pl-notes{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pl-note{background:var(--scard);border:1px solid var(--sline);border-left:3px solid var(--sfocus);border-radius:12px;padding:9px 12px;font-size:12.5px;line-height:1.4;color:var(--sfg)}
.pl-note b{font:600 10px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--smuted);display:block;margin-bottom:2px}
.pl-foot{font-size:11.5px;color:var(--smuted);text-align:center;line-height:1.4}

/* ---------- Soil Bank ---------- */
.sb-acc{grid-template-columns:minmax(0,1fr);background:var(--scard);border:1px solid var(--sline);border-radius:16px;padding:12px 14px;display:grid;gap:9px}
.sb-head{display:flex;justify-content:space-between;gap:8px;align-items:start}
.sb-head b{font:700 17px var(--display);letter-spacing:.04em;display:block}
.sb-head span{font-size:12px;color:var(--smuted)}
.sb-state{font:600 9.5px var(--display);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:3px 8px;white-space:nowrap;background:var(--sinset);color:var(--smuted)}
.sb-state.ready{background:var(--c-reup);color:#fff}
.sb-state.charged{background:var(--sfocus);color:var(--sbg)}
.sb-bal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.sb-bal div{text-align:center;min-width:0}
.sb-bal i{display:block;height:28px;background:var(--sinset);border-radius:4px;position:relative;overflow:hidden}
.sb-bal i::after{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--h);background:var(--sfocus);opacity:.85}
.sb-bal i.neg::after{background:var(--c-reup)}
.sb-bal span{font:600 10px var(--display);letter-spacing:.1em;color:var(--smuted)}
.sb-rec{border:1px solid var(--c-reup);border-radius:12px;padding:9px 12px;display:grid;gap:5px}
.sb-rec h4{font:600 11px var(--display);letter-spacing:.14em;color:var(--c-reup)}
.sb-line{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.sb-line span{display:flex;align-items:center;gap:7px;min-width:0}
.sb-line span i{display:inline-block;width:9px;height:9px;border-radius:2.5px;flex:none}
.sb-line b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;line-height:1.15}
.sb-line b small{display:block;font-weight:400;font-size:10.5px;color:var(--smuted)}
.sb-charge{height:8px;border-radius:4px;background:var(--sinset);overflow:hidden}
.sb-charge i{display:block;height:100%;width:0;background:var(--c-reup);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.sb-charge i.full{width:100%;background:var(--sfocus)}
.sb-foot{font-size:11.5px;color:var(--smuted)}

/* ---------- Settings ---------- */
.st-group{grid-template-columns:minmax(0,1fr);background:var(--scard);border:1px solid var(--sline);border-radius:16px;display:grid}
.st-group h4{font:600 11px var(--display);letter-spacing:.14em;color:var(--smuted);padding:10px 14px 4px}
.st-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--sline);font-size:13.5px}
.st-row span{min-width:0}
.st-row span small{display:block;font-size:11.5px;color:var(--smuted)}
.st-row em{font-style:normal;color:var(--smuted);font-size:12.5px;white-space:nowrap}
.tog{all:unset;cursor:pointer;width:40px;height:24px;border-radius:999px;background:var(--sline);position:relative;flex:none;transition:background .2s}
.tog::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tog.on{background:var(--sfocus)}
.tog.on::after{transform:translateX(16px)}
.tog:focus-visible{outline:2px solid var(--sfocus);outline-offset:2px}

/* ---------- logo slots, week navigation, steering ---------- */
.logo-gc{width:24px;height:24px;display:block;flex:none;background:var(--sbrand);-webkit-mask:var(--logo-gc) center/contain no-repeat;mask:var(--logo-gc) center/contain no-repeat}
.logo-hpo{width:24px;height:24px;display:block;flex:none;background:var(--sfg);-webkit-mask:var(--logo-hpo) center/contain no-repeat;mask:var(--logo-hpo) center/contain no-repeat}
.lockup{display:flex;align-items:center;gap:12px;padding:4px 0 2px}
.lockup .logo-gc{width:56px;height:56px}
.lockup .logo-hpo{width:44px;height:44px;margin-left:auto}
.lockup b{font:700 22px var(--display);letter-spacing:.16em;display:block;line-height:1}
.lockup span{font-size:11.5px;color:var(--smuted);display:block;margin-top:3px}

/* ---------- app-only ---------- */
.logo-gc{width:24px;height:24px;display:block;flex:none;background:var(--sbrand);-webkit-mask:var(--logo-gc) center/contain no-repeat;mask:var(--logo-gc) center/contain no-repeat}
.logo-hpo{width:24px;height:24px;display:block;flex:none;background:var(--sfg);-webkit-mask:var(--logo-hpo) center/contain no-repeat;mask:var(--logo-hpo) center/contain no-repeat}
.lockup{display:flex;align-items:center;gap:12px;padding:4px 0 2px}
.lockup .logo-gc{width:56px;height:56px}
.lockup .logo-hpo{width:44px;height:44px;margin-left:auto}
.lockup b{font:700 22px var(--display);letter-spacing:.16em;display:block;line-height:1}
.lockup span{font-size:11.5px;color:var(--smuted);display:block;margin-top:3px}
.phstrip button{all:unset;cursor:pointer;flex:1;border-radius:2px;opacity:.4;min-width:0;min-height:7px;position:relative}
.phstrip button::after{content:'';position:absolute;left:0;right:0;top:-9px;bottom:-9px}   /* a 25px tap target on a 7px segment */
.phstrip button.past{opacity:.75}
.phstrip button.cur{opacity:1;box-shadow:0 0 0 2px var(--sbg),0 0 0 3.5px var(--sfg)}
.phstrip button.view{opacity:1;box-shadow:0 0 0 2px var(--sbg),0 0 0 3.5px var(--sfocus)}
.phstrip button:focus-visible{outline:2px solid var(--sfocus);outline-offset:3px}
.wkchip{all:unset;cursor:pointer;flex:none;font:600 9.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sfocus);border:1px solid var(--sfocus);border-radius:999px;padding:3px 8px;margin-left:auto;white-space:nowrap}
.phtxt{flex:1 1 auto}
.wkchip:focus-visible{outline:2px solid var(--sfocus)}
.envline.steer div{background:transparent;border:1px solid var(--sline)}
.envline.act{all:unset;cursor:pointer;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
.envline.act:focus-visible{outline:2px solid var(--sfocus);border-radius:11px}
.envline.act div{background:var(--sinset);border-radius:11px;padding:8px 4px;text-align:center;min-width:0}
.envline.act div.ok b{color:var(--c-hsg)}
.envline.act div.near b{color:var(--c-hbal)}
.envline.act div.off b{color:var(--c-hmy)}
.lg-row{grid-template-columns:46px minmax(0,1fr) 86px 22px}
.lg-done{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--sline);display:grid;place-items:center;justify-self:end;box-sizing:border-box}
.lg-done svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.lg-done.on{background:var(--sfocus);border-color:var(--sfocus)}
.lg-done.on svg{opacity:1}
.lg-done.na{visibility:hidden}
.rc-next{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.rc-next button{all:unset;cursor:pointer;font:600 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sfocus);border:1px solid var(--sfocus);border-radius:999px;padding:4px 10px;white-space:nowrap}
.rc-next button:focus-visible{outline:2px solid var(--sfocus)}
.env-ed{grid-template-columns:minmax(0,1fr);background:var(--scard);border:1px solid var(--sline);border-radius:16px;padding:10px 14px 12px;display:grid;gap:4px}
.env-ed h4{font:600 12px var(--display);letter-spacing:.14em;color:var(--smuted);display:flex;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid var(--sline);margin-bottom:4px;text-transform:uppercase}
.env-ed h4 span{font-family:var(--body);letter-spacing:0;text-transform:none;font-weight:400;font-size:11px}
.env-ed label{display:grid;grid-template-columns:minmax(0,1fr) 84px 44px;align-items:center;gap:8px;font-size:13px}
.env-ed input{font:600 15px var(--body);font-variant-numeric:tabular-nums;color:var(--sfg);background:var(--sinset);border:1.5px solid var(--sline);border-radius:9px;padding:5px 8px;text-align:right;-moz-appearance:textfield;width:100%}
.env-ed input::-webkit-outer-spin-button,.env-ed input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.env-ed input:focus-visible{outline:none;border-color:var(--sfocus)}
.env-ed em{font-style:normal;color:var(--smuted);font-size:12px}
.env-foot{font-size:11.5px;color:var(--smuted);line-height:1.4;padding-top:6px}
.step.ro{cursor:default}
.step.ro .box{opacity:.35}
.qs-in.wide{flex:1;width:auto;min-width:0;text-align:left}
.qs-or{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--smuted);margin-left:auto}
.st-num{display:flex;align-items:center;gap:6px}
.st-num input,.st-row select,.st-row input[type=date]{font:600 14px var(--body);font-variant-numeric:tabular-nums;color:var(--sfg);background:var(--sinset);border:1.5px solid var(--sline);border-radius:9px;padding:6px 8px;max-width:150px}
.st-num input{width:92px;text-align:right;-moz-appearance:textfield}
.st-num input::-webkit-outer-spin-button,.st-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-num em{font-style:normal;color:var(--smuted);font-size:12px}
.st-row select:focus-visible,.st-row input:focus-visible{outline:none;border-color:var(--sfocus)}
.st-row.weeks{flex-direction:column;align-items:stretch}
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.wk-grid label{display:grid;gap:3px;font:600 9.5px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--smuted)}
.wk-grid input{font:600 14px var(--body);color:var(--sfg);background:var(--sinset);border:1.5px solid var(--sline);border-radius:9px;padding:5px 8px;width:100%;text-align:center}
.days{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.chipday{all:unset;cursor:pointer;font:600 10.5px var(--display);letter-spacing:.08em;padding:5px 7px;border-radius:999px;border:1.5px solid var(--sline);color:var(--smuted);min-width:34px;text-align:center}
.chipday.on{background:var(--sfg);color:var(--sbg);border-color:var(--sfg)}
.chipday:focus-visible{outline:2px solid var(--sfocus)}
.pctv{min-width:52px;text-align:center;font:700 15px var(--display);font-variant-numeric:tabular-nums}
.btn-s.danger{background:var(--c-hmy);color:#fff}
.btn-s[disabled]{opacity:.5;cursor:default}
.sb-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.sb-two div{background:var(--sinset);border-radius:11px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px 10px}
.sb-two h5{flex-basis:100%;margin:0;font:600 10px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--smuted)}
.sb-two span{font:600 9.5px var(--display);letter-spacing:.1em;color:var(--smuted);display:grid;text-align:center}
.sb-two span b{font:700 14px var(--display);color:var(--sfg);font-variant-numeric:tabular-nums}
@media (min-width:700px){#screen{padding-top:calc(24px + var(--sat))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (pointer:coarse){input,select,textarea{font-size:16px!important}}   /* iOS zooms the page in on any smaller field */