/* Fuel Log. One phone column; one grey panel for the day; hairline meals; bottom sheets for logging.
   Brand: white and charcoal with one red accent, Poppins titles, DM Sans body, DM Mono labels. */
:root{
  --bg:#FFFFFF; --panel:#F4F4F2; --panel-2:#EBEBE7; --line:#E6E6E2; --track:#E3E3DE;
  --ink:#27272C; --ink-2:#686872; --ink-3:#A2A2A9;
  --accent:#D2402F; --accent-soft:#FBE9E6;
  --good:#4E8A5E; --good-2:#8DBE98; --good-soft:#E4F0E6;
  --c-p:#D2402F; --c-c:#27272C; --c-f:#A2A2A9; --c-fb:#4E8A5E; --c-o:#CDCDC6;
  --sheet:#FFFFFF; --scrim:rgba(21,27,31,.42); --toast-bg:#151B1F; --toast-fg:#FFFFFF;
  --shadow:0 -10px 40px rgba(21,27,31,.14);
  --f-display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --f-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gut:max(16px, env(safe-area-inset-left,0px));
  --gutr:max(16px, env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not(.pub-light){
    --bg:#121719; --panel:#1C2428; --panel-2:#253036; --line:#273136; --track:#2B353B;
    --ink:#EEEEEA; --ink-2:#A6A9AE; --ink-3:#6F787E;
    --accent:#EB6450; --accent-soft:#3A2522;
    --good:#7DBB8B; --good-2:#4D7C59; --good-soft:#1E3225;
    --c-p:#EB6450; --c-c:#EEEEEA; --c-f:#7F888E; --c-fb:#7DBB8B; --c-o:#47535A;
    --sheet:#182024; --scrim:rgba(0,0,0,.6); --toast-bg:#EEEEEA; --toast-fg:#121719;
    --shadow:0 -10px 40px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html.locked body{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.38}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.muted{color:var(--ink-2)} .small{font-size:13px} .pad-t{padding-top:14px}
.link{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* splash + login */
.splash,.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px var(--gutr) 24px var(--gut);text-align:center}
.mark{width:56px;height:56px;color:var(--ink)}
.login h1{font-family:var(--f-display);font-weight:700;font-size:30px;text-transform:uppercase;letter-spacing:.04em;margin:18px 0 6px}
.login-form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;margin-top:22px}
.login-form input{height:52px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);padding:0 16px;font-size:16px;outline:none}
.login-form input:focus{border-color:var(--ink)}
.err{color:var(--accent);margin:4px 0 0;font-size:14px}

/* page */
.page{max-width:540px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr);padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.head-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:6px 0}
.wordmark{font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.sync{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--good)}
.sync.wait i{background:var(--ink-3);animation:pulse 1.1s ease-in-out infinite}
.sync.bad i{background:var(--accent)}
@keyframes pulse{50%{opacity:.3}}
.day-nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;padding-block:10px 14px}
.day-text{text-align:center;min-width:0}
h1{font-family:var(--f-display);font-weight:700;font-size:27px;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;margin:0;text-wrap:balance}
.day-text p{margin:3px 0 0;color:var(--ink-2);font-size:14px}
.nav-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}
.view-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:12px 16px}

/* fuel panel */
.fuel{background:var(--panel);border-radius:22px;padding:18px 18px 8px;display:flex;flex-direction:column;gap:14px}
.fuel-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.left-num{display:flex;flex-direction:column}
.big{font-family:var(--f-display);font-weight:600;font-size:46px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.big-lbl{font-size:14px;color:var(--ink-2);margin-top:6px}
.left-num.over .big,.left-num.over .big-lbl{color:var(--accent)}
.eq{display:flex;gap:20px;margin:0}
.eq div{display:flex;flex-direction:column;align-items:flex-end}
.eq dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.eq dd{margin:2px 0 0;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.gauge{position:relative;height:14px;border-radius:7px;background:var(--track);overflow:hidden;display:flex}
.gauge .seg{height:100%;transition:width .35s ease}
.goal-mark{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--panel)}
.c-p{background:var(--c-p)} .c-c{background:var(--c-c)} .c-f{background:var(--c-f)} .c-fb{background:var(--c-fb)} .c-o{background:var(--c-o)}
.sw{display:inline-block;width:8px;height:8px;border-radius:2px;flex:none}
.macs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.mac{min-width:0}
.mac-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.mac-name{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500}
.mac-val{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.mac-val b{color:var(--ink)}
.bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden;margin-top:6px}
.bar span{display:block;height:100%;border-radius:3px;transition:width .35s ease}
.mac-note{font-size:12px;color:var(--ink-2);margin-top:4px;font-variant-numeric:tabular-nums}
.mac.hit .mac-note{color:var(--good);font-weight:500}
.mac.over .mac-note{color:var(--accent)}
.micro-link{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:12px 0 10px;font-size:13.5px;color:var(--ink-2);text-align:left}
.micro-link b{color:var(--ink)}

/* log bar */
.logbar{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.logbar-top{display:flex;align-items:center;gap:10px;min-width:0}
.logbar-top .mono{color:var(--ink-2);flex:none}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.chips.compact .chip{padding:5px 11px;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.search-btn{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink-3);text-align:left;font-size:15px}
.search-btn .ic{color:var(--ink-2)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 4px 12px;border-radius:16px;background:var(--panel);font-size:12.5px;font-weight:700;min-width:0}
.tile .ic{width:24px;height:24px}
.tile:active{background:var(--panel-2)}

/* meals */
.meals{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.meal{border:1px solid var(--line);border-radius:18px;padding:12px 14px 6px;background:var(--bg)}
.meal .entries li + li .entry{border-top:1px solid var(--line)}
.meal .empty{margin:4px 0 8px}
.meal-head{display:flex;align-items:center;gap:10px}
.meal-head h2,.w-top h2,.nsec h2,.chart-head h2,.sec-title{font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0}
.meal-head h2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meal-kcal{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.add-btn{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:7px 12px 7px 9px;border-radius:999px;background:var(--panel)}
.add-btn .ic{width:16px;height:16px;stroke-width:2.2}
.entries{list-style:none;margin:6px 0 0;padding:0}
.entry{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 0}
.e-main{flex:1;min-width:0;display:flex;flex-direction:column}
.e-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-sub{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-kcal{font-weight:700;font-variant-numeric:tabular-nums}
.empty{margin:6px 0 0;font-size:13px;color:var(--ink-3)}
.skel{height:12px;border-radius:6px;background:var(--track);margin-top:12px;width:55%;animation:pulse 1.2s ease-in-out infinite}
.water{border-top:1px solid var(--line);padding-block:16px 6px;display:flex;flex-direction:column;gap:10px}
.w-top{display:flex;justify-content:space-between;align-items:baseline}
.w-val{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums} .w-val b{color:var(--ink)}
.pips{display:flex;gap:4px}
.pip{flex:1;height:8px;border-radius:4px;background:var(--track)} .pip.on{background:var(--ink-2)}
.w-btns{display:flex;gap:8px}
.w-btns button{height:42px;border-radius:12px;border:1.5px solid var(--line);font-weight:500;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.w-minus{width:48px} .w-plus{flex:1}
.starter{font-size:13px;color:var(--ink-2);margin:18px 0 0}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bg);border-top:1px solid var(--line);padding-left:var(--gut);padding-right:var(--gutr);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs-in{max-width:540px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;color:var(--ink-3);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;position:relative}
.tab[aria-current="page"]{color:var(--ink)}
.tab[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:50%;width:22px;height:2px;margin-left:-11px;background:var(--accent);border-radius:2px}

/* toast */
.toast{position:fixed;z-index:80;left:50%;transform:translateX(-50%);bottom:calc(74px + env(safe-area-inset-bottom,0px));width:min(508px, calc(100% - 32px));background:var(--toast-bg);color:var(--toast-fg);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.25);animation:up .2s ease}
.toast span{flex:1;min-width:0}
.toast button{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--toast-fg)}
html.locked .toast{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}
@keyframes up{from{transform:translate(-50%,10px);opacity:0}}

/* sheets */
.sheet-layer{position:fixed;inset:0;z-index:40}
.scrim{position:absolute;inset:0;background:var(--scrim);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--sheet);border-radius:22px 22px 0 0;box-shadow:var(--shadow);max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;animation:rise .24s cubic-bezier(.2,.8,.2,1)}
.sheet.full{top:0;max-height:none;border-radius:0}
@keyframes rise{from{transform:translateY(40px);opacity:.4}}
.grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:9px auto 0;flex:none}
.sh-body{overflow-y:auto;overscroll-behavior:contain;padding:4px var(--gutr) calc(18px + env(safe-area-inset-bottom,0px)) var(--gut);max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px;min-height:0}
.sh-head{display:flex;align-items:center;gap:8px;padding-top:6px;position:sticky;top:-4px;background:var(--sheet);z-index:2;padding-bottom:4px}
.sh-title{flex:1;min-width:0}
.sh-top{position:sticky;top:-4px;z-index:3;background:var(--sheet);display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.sh-top .sh-head{position:static}
.sh-head h3{font-family:var(--f-display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.02em;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-sub{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.icon-btn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none}
.icon-btn.sm{width:38px;height:38px;border-radius:12px;color:var(--ink-2);background:var(--panel)}
.search{display:flex;align-items:center;gap:10px;height:50px;padding:0 6px 0 16px;border-radius:999px;border:1.5px solid var(--line)}
.search:focus-within{border-color:var(--ink)}
.search .ic{color:var(--ink-2)}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px;height:100%}
.search input::-webkit-search-cancel-button{display:none}
.clear{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}
.ai-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 14px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:700}
.ai-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-row em{font-style:normal;opacity:.7}
.tag{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:5px;background:var(--panel-2);color:var(--ink-2);vertical-align:1px}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.frow{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:16px;padding:4px 6px 4px 0}
.frow-main{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left;padding:10px 4px 10px 14px}
.frow-name{font-weight:500;font-size:15.5px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.frow-sub{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.plus{width:46px;height:46px;border-radius:50%;background:var(--bg);display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.plus .ic{width:22px;height:22px;stroke-width:2.2}
.plus.done{background:var(--good);color:#fff}
.plus.del{color:var(--ink-2)} .plus.del .ic{width:19px;height:19px;stroke-width:1.8}
.repeat{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border-radius:14px;background:var(--panel);font-weight:500}
.repeat span{flex:1;min-width:0} .repeat small{display:block;color:var(--ink-2);font-size:12.5px;font-weight:400}
.seg-ctl{display:inline-flex;background:var(--panel);border-radius:999px;padding:3px;align-self:flex-start;flex-wrap:wrap;gap:2px;max-width:100%}
.seg-ctl.wide{display:flex;align-self:stretch} .seg-ctl.wide button{flex:1}
.seg-ctl button{font-size:13px;font-weight:500;padding:7px 14px;border-radius:999px;color:var(--ink-2)}
.seg-ctl button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.link-btn{align-self:center;color:var(--ink-2);font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:8px}

/* amount editor */
.am-food{display:flex;flex-direction:column;gap:3px}
.am-name{font-weight:700;font-size:18px;line-height:1.3}
.am-sub{font-size:13px;color:var(--ink-2)}
.am-data{font-size:12px;color:var(--ink-3);margin-top:2px}
.defs{font-size:13px;color:var(--ink-2);margin-top:6px}
.defs summary{cursor:pointer;font-weight:500}
.defs ul{padding-left:18px;margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.am-row{display:flex;gap:8px}
.am-input{width:40%;min-width:0;height:56px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);padding:0 14px;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;outline:none}
.am-input:focus{border-color:var(--ink)}
.am-unit{flex:1;min-width:0;height:56px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);padding:0 12px;font-size:16px}
.am-unit.static{display:flex;align-items:center;color:var(--ink-2)}
.qchips{display:flex;gap:6px;flex-wrap:wrap}
.am-macros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--panel);border-radius:16px;padding:12px 6px}
.am-macros div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.am-macros b{font-family:var(--f-display);font-weight:600;font-size:20px;font-variant-numeric:tabular-nums}
.am-macros span{font-size:11.5px;color:var(--ink-2)}
.am-micros{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.am-micros li{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line);min-width:0}
.am-micros li span:first-child{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-micros li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.am-micros em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.am-micros li.nodata span:last-child{color:var(--ink-3)}
.sh-foot{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));background:var(--sheet);padding-top:10px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));margin-bottom:calc(-18px - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);z-index:2}
.foot-row{display:flex;gap:8px}
.btn{height:52px;border-radius:14px;font-weight:700;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:15px}
.btn.sm{height:38px;padding:0 14px;font-size:13.5px;border-radius:11px}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.ghost{border:1.5px solid var(--line)}
.btn.danger{border:1.5px solid var(--accent);color:var(--accent)}
.btn.grow{flex:1;min-width:0} .btn.full{width:100%;margin-top:18px}
.btn .ic{width:18px;height:18px}

/* AI review */
.echo{margin:0;font-style:italic;color:var(--ink-2)}
.preview{display:block;max-width:100%;max-height:200px;border-radius:16px;object-fit:cover}
.thinking{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:14px}
.dots{display:inline-flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}
.skel-card{height:86px;border-radius:16px;background:var(--panel);animation:pulse 1.4s ease-in-out infinite} .skel-card.dim{opacity:.55}
.err-box{margin:0;padding:12px 14px;border-radius:12px;background:var(--accent-soft);font-size:14px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.said{display:flex;flex-direction:column;gap:6px;background:var(--panel);border-radius:14px;padding:10px 12px}
.said .mono{color:var(--ink-2)}
.said textarea{border:0;background:transparent;resize:none;font-size:16px;outline:none;width:100%}
.said .btn{align-self:flex-start}
.review{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rv{border:1.5px solid var(--line);border-radius:16px;padding:10px 10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.rv.nomatch{border-style:dashed}
.rv-top{display:flex;align-items:flex-start;gap:8px}
.rv-said{flex:1;font-weight:700;font-size:15.5px}
.rv-match{display:flex;align-items:center;gap:8px;text-align:left;width:100%;background:var(--panel);border-radius:12px;padding:9px 10px;font-size:13.5px;min-width:0}
.rv-food{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-match .ic{width:16px;height:16px;color:var(--ink-2)}
.rv-pick{display:flex;flex-direction:column;gap:6px}
.rv-pick input{height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:0 12px;font-size:16px;outline:none}
.rv-pick ul{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto}
.rv-pick li button{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.rv-pick li em{font-style:normal;color:var(--ink-2);font-size:12px}
.rv-amt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rv-amt input{width:80px;height:42px;border-radius:11px;border:1.5px solid var(--line);background:var(--bg);padding:0 10px;font-size:16px;font-weight:700;outline:none;font-variant-numeric:tabular-nums}
.rv-amt span{color:var(--ink-2)}
.rv-n{margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums}

/* full-screen sheets: voice and barcode */
.full-body{display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top,0px)}
.full-head{display:flex;align-items:center;justify-content:space-between;padding:6px var(--gutr) 6px var(--gut);flex:none}
.full-head .mono{color:var(--ink-2)} .full-head span:last-child{width:46px}
.voice-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 24px;text-align:center}
.mic-btn{width:120px;height:120px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;position:relative}
.mic-btn .ic{width:42px;height:42px;stroke-width:1.6}
.mic-btn.recording{background:var(--accent);color:#fff}
.mic-btn.recording::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--accent);opacity:.35;transform:scale(var(--ring,1));transition:transform .08s linear}
.mic-btn.working{animation:pulse 1s ease-in-out infinite}
.voice-state{font-family:var(--f-display);font-weight:600;font-size:20px;margin:6px 0 0;font-variant-numeric:tabular-nums}
.voice-hint{color:var(--ink-2);margin:0;max-width:300px}
.voice-type{display:flex;align-items:center;gap:10px;margin:0 var(--gutr) calc(16px + env(safe-area-inset-bottom,0px)) var(--gut);padding:0 6px 0 14px;height:52px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink-2)}
.voice-type input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px;color:var(--ink)}
.scan{background:#000;color:#fff}
.scan .full-head .mono{color:rgba(255,255,255,.75)} .scan .icon-btn{color:#fff}
.cam{position:relative;flex:1;min-height:0;overflow:hidden}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-frame{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cam-frame i{width:min(88vw,400px);height:min(52vw,230px);transition:border-color .15s,box-shadow .15s;border-radius:18px;box-shadow:0 0 0 2000px rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.9)}
.cam-state{position:absolute;left:0;right:0;bottom:18px;text-align:center;margin:0;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.scan-foot{background:var(--sheet);color:var(--ink);padding:14px var(--gutr) calc(16px + env(safe-area-inset-bottom,0px)) var(--gut);display:flex;flex-direction:column;gap:12px;flex:none}
.nf p{margin:0 0 10px;font-size:14px}
.manual-code{display:flex;gap:8px}
.manual-code input{flex:1;min-width:0;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:0 12px;font-size:16px;outline:none;font-variant-numeric:tabular-nums}
.manual-code .btn{height:44px}

/* forms */
.qgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.qgrid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qf{display:flex;flex-direction:column;gap:5px;min-width:0}
.qf.wide{grid-column:1/-1}
.qf > span:first-child{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.qf > input,.inwrap,.filter{height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:0 12px;font-size:16px;outline:none;min-width:0;width:100%;font-variant-numeric:tabular-nums}
.qf > input:focus,.inwrap:focus-within,.filter:focus{border-color:var(--ink)}
.inwrap{display:flex;align-items:center;padding:0 12px 0 0}
.inwrap input{flex:1;min-width:0;border:0;background:transparent;height:100%;padding:0 12px;font-size:16px;outline:none;font-variant-numeric:tabular-nums}
.inwrap em{font-style:normal;color:var(--ink-3);font-size:13px}
.toggle{display:flex;align-items:center;gap:10px;font-size:14px}
.toggle input{width:20px;height:20px;accent-color:var(--ink)}
.note{margin:0;font-size:13px;color:var(--ink-2);background:var(--panel);border-radius:12px;padding:10px 12px}
.ff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ff-basis{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.panel{list-style:none;margin:0;padding:0;border:1.5px solid var(--ink);border-radius:14px;overflow:hidden}
.panel li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 6px 4px 12px;border-bottom:1px solid var(--line);font-size:14px}
.panel li:last-child{border-bottom:0}
.panel li.sub span:first-child{padding-left:14px;color:var(--ink-2)}
.pv{display:flex;align-items:center;gap:6px}
.pv input{width:86px;height:38px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg);text-align:right;padding:0 8px;font-size:16px;outline:none;font-variant-numeric:tabular-nums}
.pv input:focus{border-color:var(--ink)}
.pv em{font-style:normal;width:30px;color:var(--ink-3);font-size:12.5px}

/* nutrients */
.nsec{margin-top:22px}
.nsec h2{margin-bottom:8px}
.energy{background:var(--panel);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px}
.energy > div:first-child{font-size:15px;color:var(--ink-2)} .energy b{color:var(--ink);font-size:18px}
.split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sp{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:12px;background:var(--bg)}
.sp span{font-size:12px;color:var(--ink-2)} .sp b{font-size:18px} .sp em{font-style:normal;font-size:11px;color:var(--ink-3)}
.sp.good b{color:var(--good)}
.nlist{list-style:none;margin:0;padding:0}
.nrow{padding:10px 0;border-bottom:1px solid var(--line)}
.nrow-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.nrow-name{font-weight:500;font-size:14.5px;min-width:0}
.nrow-val{font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.nrow-val b{color:var(--ink);margin-left:4px}
.nbar{position:relative;height:7px;border-radius:4px;background:var(--track);margin-top:7px}
.nbar span{display:block;height:100%;border-radius:4px;background:var(--ink-3);transition:width .35s ease}
.nbar i{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink-2);border-radius:1px}
.nrow.good .nbar span{background:var(--good-2)} .nrow.best .nbar span{background:var(--good)} .nrow.over .nbar span{background:var(--accent)}
.nrow.best .nrow-val b,.nrow.good .nrow-val b{color:var(--good)} .nrow.over .nrow-val b{color:var(--accent)}
.nrow-meta{font-size:12px;color:var(--ink-3);margin-top:5px;font-variant-numeric:tabular-nums}
.warn{color:var(--accent);font-weight:500} .miss{color:var(--ink-3)} .fine{color:var(--ink-3)}
.legend-p{margin-top:18px;line-height:2}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 5px 0 10px;vertical-align:-1px}
.lg:first-child{margin-left:0}
.lg.low{background:var(--ink-3)} .lg.good{background:var(--good-2)} .lg.best{background:var(--good)} .lg.over{background:var(--accent)}

/* trends */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:var(--panel);border-radius:16px;padding:14px}
.stat .mono{color:var(--ink-2)}
.sv{font-family:var(--f-display);font-weight:600;font-size:27px;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.ss{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.chart-block{margin-top:22px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.legend{display:flex;gap:4px 12px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.chart{width:100%;height:auto;display:block}
.ch-axis{fill:var(--ink-3);font-family:var(--f-mono);font-size:9.5px}
.ch-today{fill:var(--ink);font-weight:500}
.ch-goal{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3}
.ch-base{stroke:var(--line);stroke-width:1}
.b-good{fill:var(--good);background:var(--good)} .b-over{fill:var(--accent);background:var(--accent)} .b-under{fill:var(--c-f);background:var(--c-f)} .b-none{fill:var(--track)}

/* settings */
.block{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.block p{margin:0}
.sources{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:6px}

@media (max-width:370px){ .big{font-size:40px} .tile{font-size:11.5px;padding:12px 2px 10px} .qgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

.fill-box{background:var(--panel);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.fill-box p{margin:0;color:var(--ink-2)} .fill-box b{color:var(--ink)} .fill-box .link{align-self:flex-start}
.am-micros li.est span:last-child{color:var(--ink-2);font-style:italic}
.rv-inc{display:flex;align-items:flex-start;gap:10px;min-width:0}
.rv-inc > span{display:flex;flex-direction:column;min-width:0}
.rv-meta{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rv-inc input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin-top:2px}
.rv.off{opacity:.5}
.rv-top .rv-n{margin-left:0;white-space:nowrap;color:var(--ink-2)}

.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border-radius:14px;padding:12px 14px}
.switch-row span{display:flex;flex-direction:column;gap:2px} .switch-row small{font-size:12.5px;color:var(--ink-2)}
.switch-row input{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:15px;background:var(--track);position:relative;flex:none;cursor:pointer;transition:background .2s}
.switch-row input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch-row input:checked{background:var(--good)} .switch-row input:checked::after{transform:translateX(20px)}

.meal-edit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.meal-edit li{display:flex;align-items:center;gap:6px}
.meal-edit input{flex:1;min-width:0;height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:0 12px;font-size:16px;outline:none}
.meal-edit input:focus{border-color:var(--ink)}

.pcalc{background:var(--panel);border-radius:16px;padding:12px 14px 10px;display:flex;flex-direction:column;gap:10px}
.pcalc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.pcalc-head span{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pcalc .inwrap{background:var(--bg)}
.pcalc p{margin:0}

/* accounts */
.login-sub{max-width:320px;text-align:center;margin:0}
.auth-seg{align-self:center;margin-top:22px}
.login-note{max-width:320px;text-align:center;margin:12px 0 0}
.login .link-btn{margin-top:10px}
.welcome{margin-top:14px;background:var(--panel);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;border-left:4px solid var(--good)}
.welcome p{margin:0;color:var(--ink-2);font-size:14px}
.acct-box{display:flex;flex-direction:column;gap:8px;background:var(--panel);border-radius:16px;padding:12px 14px}
.acct-box p{margin:0;font-size:14px;color:var(--ink-2)}
.acct-box input{height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:0 12px;font-size:16px;outline:none}
.acct-box input:focus{border-color:var(--ink)}
.acct-box .btn{align-self:flex-start}
.inline-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-row .inwrap{flex:1;min-width:140px;height:40px;background:var(--bg)}
.share-link,.temp-pw code{font-family:var(--f-mono);font-size:13px;background:var(--bg);border-radius:10px;padding:9px 12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.temp-pw{background:var(--accent-soft);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.temp-pw p{margin:0;font-size:14px}
.temp-pw code{font-size:15px;font-weight:500}
.urow{flex-direction:column;align-items:stretch;padding:4px 10px 10px 0;gap:4px}
.urow .frow-sub{white-space:normal}
.urow-act{display:flex;gap:8px;padding-left:14px;flex-wrap:wrap}
.fix-note{font-size:13px}
.fill-box .btn-row{margin-top:2px}

/* recipes */
.rc-import{background:var(--panel);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.rc-import .mono{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.rc-import p{margin:0}
.rc-box{display:flex;flex-direction:column;gap:8px}
.rc-box textarea,.rc-box input{border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:10px 12px;font-size:16px;outline:none;font-family:inherit;color:inherit;resize:vertical}
.rc-box input{height:46px}
.rc-box textarea:focus,.rc-box input:focus{border-color:var(--ink)}
.rc-box .btn{align-self:flex-start}
.rc-h{font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:20px 0 8px}
.rc-add{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.rc-add .search{position:static}
.rv-pick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;background:var(--panel);border-radius:14px;padding:4px}
.rv-pick-list li{padding:0}
.rv-pick-list li.muted{padding:10px 12px}
.rv-pick-list button{width:100%;text-align:left;display:flex;flex-direction:column;padding:10px 12px;border-radius:10px}
.rv-pick-list button:active{background:var(--bg)}
.rv-pick-list em{font-style:normal;font-size:12.5px;color:var(--ink-2)}
.rc-sum{margin-top:16px;background:var(--panel);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.rc-sum-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.rc-sum-head span{font-size:13px;color:var(--ink-2)}
.rc-sum .am-macros{margin:0;background:var(--bg)}
.rc-sum p{margin:0}
.link-pair{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}

/* saved meals */
.meal-save{display:block;margin:6px 0 0 auto;font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
.mi-unit{height:42px;border-radius:11px;border:1.5px solid var(--line);background:var(--bg);padding:0 8px;font-size:15px;max-width:150px;color:inherit}
.mi-brand{display:block;font-size:12.5px;font-weight:400;color:var(--ink-2)}
.danger-text{color:var(--accent)}
.ok-note{color:var(--ink);background:var(--bg);border-radius:10px;padding:8px 10px}
.warn-note{color:var(--accent);background:var(--accent-soft);border-radius:10px;padding:8px 10px;font-weight:500}

/* scanner */
.cam video{transform-origin:center;transition:transform .2s}
.cam-frame.hit i{border-color:var(--good);box-shadow:0 0 0 2000px rgba(0,0,0,.45),0 0 0 4px var(--good)}
.zoom-row{position:absolute;left:50%;transform:translateX(-50%);bottom:56px;display:flex;gap:6px;background:rgba(0,0,0,.45);padding:4px;border-radius:999px}
.zoom-row button{min-width:44px;height:36px;border-radius:999px;color:#fff;font-weight:700;font-size:14px}
.zoom-row button[aria-pressed="true"]{background:#fff;color:#111}
.icon-btn.torch.on{background:#ffd60a;color:#111}
.meal-tot{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.meal-tot b{font-size:12.5px;font-weight:500;color:var(--ink)}
.meal-tot span{font-size:11px;color:var(--ink-2)}

/* sheets: swipe and done */
.sheet{touch-action:pan-y;will-change:transform}
.grab{width:44px;height:5px;margin:8px auto 2px}
.done-foot{margin-top:auto}
.btn.full-w{width:100%}

/* keyboard: sheets live in the visible area above the iPhone keyboard */
.sheet-layer{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%)}
.sheet{max-height:calc(var(--vvh,100dvh) * .92)}
html.kb .sheet{max-height:calc(var(--vvh,100dvh) - 6px);border-radius:16px 16px 0 0}
html.kb .done-foot,html.kb .grab{display:none}
html.kb .sh-body{padding-bottom:12px}
html.kb .sh-foot{padding-bottom:10px;margin-bottom:-12px;bottom:-12px}

/* supermarket products in search */
.prod-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:8px 2px 0}
.prod-head .mono{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.prod-head em{font-style:normal;font-size:12px;color:var(--ink-3)}
.dots.sm i{width:5px;height:5px}

.link-card{background:var(--panel);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.link-card p{margin:0}
.link-tip{margin:10px 2px 0}

.dish-row span{display:flex;flex-direction:column;gap:2px;text-align:left}
.dish-row small{font-weight:400;font-size:12.5px;opacity:.8}
.ai-row.ghosted{background:var(--panel);color:var(--ink)}
.ai-row.ghosted em{color:var(--ink-2)}
.dish-row span{white-space:normal}

/* ranked nutrients on the food sheet */
.mic-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px}
.mic-head b{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mic-head span{font-size:12px;color:var(--ink-3)}
ol.am-micros{counter-reset:none}
.am-micros.ranked li{position:relative;padding-bottom:9px}
.mbar{position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:2px;background:var(--track);overflow:hidden}
.mbar b{display:block;height:100%;background:var(--good);border-radius:2px}
.am-micros.ranked li.est .mbar b{opacity:.55}
.am-micros li > span:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.am-micros li > span:first-child{flex:1;min-width:0}

/* top 3 nutrients per meal */
.meal-top{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px}
.meal-top span{font-size:11.5px;color:var(--ink-2);background:var(--panel);border-radius:999px;padding:4px 9px;font-variant-numeric:tabular-nums;white-space:nowrap}
.meal-top b{font-weight:600;color:var(--good)}

/* swipe to delete */
.sw-row{position:relative;overflow:hidden;touch-action:pan-y}
.sw-del{position:absolute;top:0;right:0;bottom:0;width:88px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:flex-end;padding-right:18px;transition:width .15s ease}
.sw-row.arm .sw-del{width:100%}
.sw-inner{position:relative;z-index:1;background:var(--bg);will-change:transform}
.frow-li{border-radius:16px;list-style:none}
.frow-li .sw-inner.frow{border-radius:16px}
.entries .sw-row{list-style:none}
.sw-inner.frow{background:var(--panel)}

/* food sheet: log right under the amount */
.am-act{display:flex;flex-direction:column;gap:10px;padding:2px 0 6px}
.am-act .foot-row{display:flex;gap:8px}
.fill-box .fb-title{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* add sheet: what is already in this meal */
.in-meal{border:1px solid var(--line);border-radius:16px;padding:2px 12px;background:var(--bg)}
.in-meal-head{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 0;flex-wrap:wrap}
.in-meal-head .im-t{flex:1;min-width:0;font-size:14px;color:var(--ink-2)} .in-meal-head .im-t b{color:var(--ink)}
.in-meal-head .im-n{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.in-meal-head .ic{width:18px;height:18px;color:var(--ink-2)}
.in-meal .entries{margin:0 0 4px}
.in-meal .entries li + li .entry{border-top:1px solid var(--line)}
.in-meal .entry{padding:8px 0}

/* day summary */
.sum-btn{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;padding:11px 12px;border-radius:12px;background:var(--bg);font-size:13.5px;font-weight:600;text-align:left}
.sum-btn .ic{width:17px;height:17px;color:var(--good)}
.eve-card{margin-top:14px;display:flex;align-items:center;gap:10px;padding:14px 12px 14px 16px;border-radius:18px;background:var(--ink);color:var(--bg);cursor:pointer}
.eve-card div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.eve-card span{font-size:13px;opacity:.8}
.eve-card .icon-btn{color:var(--bg)}
.ds-score{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ds-score div,.ds-score button{border:0;font:inherit;color:inherit;cursor:pointer;background:var(--panel);border-radius:14px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;border-top:4px solid var(--good)}
.ds-score .near{border-top:4px solid #C9A227} .ds-score .low{border-top:4px solid var(--accent)}
.ds-score b{font-family:var(--f-display);font-size:26px;font-weight:700}
.ds-score span{font-size:12px;color:var(--ink-2)}
.ds-h{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:12px 0 4px;display:flex;align-items:center;gap:8px}
.ds-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.ds-h.good::before{background:var(--good)} .ds-h.near::before{background:#C9A227} .ds-h.low::before{background:var(--accent)}
.ds-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ds-row{position:relative;padding:8px 0 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.ds-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.ds-name{color:var(--ink)} .ds-val{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap} .ds-val b{color:var(--ink);margin-left:4px}
.ds-tip{font-size:12.5px;color:var(--ink-2)}
.ds-row .mbar{position:static;margin-top:4px}
.ds-row.near .mbar b{background:#C9A227} .ds-row.low .mbar b{background:var(--accent)}
.am-micros li.over span:last-child{color:var(--accent)}
.eve-card .icon-btn{background:transparent;color:var(--bg)}
.sum-btn span{flex:1} .sum-btn em{font-style:normal;font-weight:400;font-size:12.5px;color:var(--ink-2)} .sum-btn .ic:last-child{color:var(--ink-2)}

/* Day summary: voice catch-up and notification */
.ds-voice{display:flex;align-items:center;gap:12px;width:100%;margin:2px 0 14px;padding:14px;border-radius:16px;background:var(--ink);color:var(--bg);text-align:left}
.ds-voice b{display:block;font-size:15.5px;font-weight:700}
.ds-voice em{display:block;font-style:normal;font-size:12.5px;opacity:.75;margin-top:2px;line-height:1.35}
.ds-mic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff}
.ds-mic svg{width:22px;height:22px}
.notify-card{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:16px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.notify-card b{display:block;font-size:14px} .notify-card span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.notify-card .err{grid-column:1/-1;margin:0}
.notify .btn svg{width:18px;height:18px}
.notify-on{display:flex;flex-direction:column;gap:10px}
.notify-on select{width:100%;font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.note-box{background:var(--panel);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.45}
.rv-meal{font:inherit;font-size:13px;font-weight:600;padding:5px 8px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);max-width:42%;margin-left:auto}
.rv-top{gap:8px}
.foot-lbl{margin:0 0 6px;font-size:11px;color:var(--ink-2)}
.stub-note{color:var(--ink-3);font-size:12px;margin-left:2px}
.dish-row.low{background:var(--panel);color:var(--ink);margin-top:10px}
.dish-row.low small{color:var(--ink-2)}
/* Amount against the person's own NRV target */
.am-micros.wide{grid-template-columns:1fr}
.am-micros.wide li{font-size:13.5px}
i.ref{font-style:normal;color:var(--ink-3)}
.ds-val i.ref,.nrow-val i.ref{color:var(--ink-3)}
.ref-note{margin-top:8px;line-height:1.45}

/* Thin bar pinned to the top once the calorie card scrolls away */
.left-bar{position:fixed;left:0;right:0;top:0;z-index:15;display:block;width:100%;text-align:left;padding:calc(env(safe-area-inset-top,0px) + 7px) var(--gutr) 0 var(--gut);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-110%);transition:transform .22s ease;pointer-events:none}
.left-bar.on{transform:none;pointer-events:auto}
.lb-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;max-width:540px;margin:0 auto;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.lb-kcal b{font-family:var(--f-display);font-size:16px;font-weight:700;color:var(--ink)}
.lb-macs{display:flex;gap:10px;white-space:nowrap}
.lb-macs span{display:inline-flex;align-items:center;gap:4px}
.lb-macs .sw{width:7px;height:7px;border-radius:50%;display:inline-block}
.left-bar .lb-over,.left-bar .lb-over b{color:var(--accent)}
.lb-track{display:block;height:3px;margin:6px auto 0;max-width:540px;background:var(--track);border-radius:2px;overflow:hidden;margin-bottom:7px}
.lb-track b{display:block;height:100%;background:var(--ink);border-radius:2px}
.lb-track b.over{background:var(--accent)}
@media (prefers-reduced-motion:reduce){.left-bar{transition:none}}
.lb-macs em{font-style:normal;color:var(--ink-3);font-size:12px}

/* Meal chips wrap so every meal shows (no hidden chips off the right edge) */
.chips{flex-wrap:wrap;overflow:visible}

/* Search, scan or speak straight from each meal */
.meal-add{display:flex;gap:8px;margin:8px 0 8px}
.ma-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:21px;background:var(--panel);color:var(--ink-2);font-size:14px;text-align:left}
.ma-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ma-search .ic{width:18px;height:18px;flex:none}
.ma-ic{flex:none;width:42px;height:42px;border-radius:50%;background:var(--panel);display:grid;place-items:center;color:var(--ink)}
.ma-ic .ic{width:20px;height:20px}
.ma-search:active,.ma-ic:active{background:var(--panel-2)}

/* Your own nutrient targets */
.nrv-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--panel);text-align:left}
.nrv-toggle span{display:flex;flex-direction:column;gap:2px} .nrv-toggle small{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.nrv-toggle .ic{width:18px;height:18px;flex:none}
.nrv-edit{margin-top:6px}
.nrv-list{list-style:none;margin:0;padding:0}
.nrv-list li{display:grid;grid-template-columns:1fr 118px 32px;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.nl-name{font-size:14px;display:flex;flex-direction:column;min-width:0}
.nl-name small{font-size:12px;color:var(--ink-3)}
.nrv-list li.on .nl-name small{color:var(--good)}
.nrv-list .inwrap{display:flex;align-items:center;gap:4px;background:var(--panel);border-radius:10px;padding:0 10px}
.nrv-list .inwrap input{width:100%;min-width:0;font:inherit;font-size:16px;padding:8px 0;border:0;background:transparent;color:var(--ink);text-align:right}
.nrv-list .inwrap em{font-style:normal;font-size:12px;color:var(--ink-3)}
.nl-sp{width:32px}
/* Meal photo: dish name, ingredients or one dish */
.rv-dish{margin:10px 0 0;font-family:var(--f-display);font-weight:600;font-size:16px}
.rv-mode{margin-top:10px}
.sh-body .preview{max-height:180px;width:100%;object-fit:cover}

/* Swipe sideways to change day */
.page.swiping > :not(.left-bar){transform:translateX(var(--swx,0px));transition:none}
.page.swiping.settle > :not(.left-bar){transition:transform .2s ease}
@keyframes dayInL{from{transform:translateX(-26px);opacity:.35}to{transform:none;opacity:1}}
@keyframes dayInR{from{transform:translateX(26px);opacity:.35}to{transform:none;opacity:1}}
.page.day-in-l > :not(.left-bar){animation:dayInL .26s ease}
.page.day-in-r > :not(.left-bar){animation:dayInR .26s ease}
.day-hint{position:fixed;top:46%;z-index:25;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(-50%) scale(.92);transition:opacity .15s,transform .15s;pointer-events:none}
.day-hint.on{opacity:.5}
.day-hint.go{opacity:1;transform:translateY(-50%) scale(1)}
.day-hint.l{left:14px} .day-hint.r{right:14px}
@media (prefers-reduced-motion:reduce){.page.day-in-l > *,.page.day-in-r > *{animation:none}}
.ai-row.low{background:var(--panel);color:var(--ink);margin-top:10px}
.ai-row.low em{color:var(--ink-3)}

/* Optimal (specialised) targets and the "why" panel on the Nutrients tab */
em.spec{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A5A00;background:#F5E7B8;border-radius:6px;padding:2px 6px;vertical-align:2px;margin-left:4px}
@media (prefers-color-scheme:dark){:root:not(.pub-light) em.spec{color:#F5D978;background:#3A3218}}
.nrow{position:relative}
.nrow-hit{position:absolute;inset:0;width:100%;background:transparent;border:0;padding:0;cursor:pointer}
.nrow-more-hint{float:right;color:var(--ink-2);font-weight:600}
.nrow-more{position:relative;margin-top:10px;display:flex;flex-direction:column;gap:10px}
.nm-sec{background:var(--panel);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.5}
.nm-sec h5{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.nm-sec p{margin:4px 0}
.nm-sec.opt{border:1px solid #E8D48C}
.nm-rule{color:var(--ink-2)}
.nm-list{margin:0;padding-left:16px}
.nm-list li{margin:3px 0}
.nm-quote{margin:6px 0;padding:2px 0 2px 10px;border-left:3px solid var(--line);color:var(--ink-2);font-size:13px}
.nm-gl,.nm-src{font-size:12px;color:var(--ink-3)}
.nm-src a{color:var(--ink-2)}
.nrow-hit{z-index:1}
.nrow-more{z-index:2}
/* Keep the tab bar on the visible bottom edge even when iPhone leaves the layout short after the keyboard */
.tabs{bottom:var(--fixb,0px)}

/* Review rows: the food being logged leads; what was said sits above it, small */
.rv-said{flex:1;font-weight:500;font-size:13px;color:var(--ink-2);line-height:1.35}
.rv-said .mono{font-size:10.5px;color:var(--ink-3);margin-right:4px}
.rv-food{font-weight:700;font-size:15px;color:var(--ink)}
.rv-close{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7A5A00;background:#F5E7B8;border-radius:6px;padding:2px 6px;margin-right:6px;vertical-align:1px}
@media (prefers-color-scheme:dark){:root:not(.pub-light) .rv-close{color:#F5D978;background:#3A3218}}
.rv.weak .rv-match{box-shadow:inset 0 0 0 1.5px #E8D48C}
.rv-warn{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.rv-alt{display:flex;flex-direction:column;gap:6px}
.rv-alt .ai-row{margin-top:0;white-space:normal}
.rv-alt .ai-row span{white-space:normal}
.rv-alt .link-btn{align-self:flex-start;font-size:13px}
.rv-match .rv-food{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.steps{margin:6px 0 4px;padding-left:20px;font-size:13.5px;line-height:1.5}
.steps li{margin:6px 0}
.steps a{color:var(--ink)}

/* Calories and macros lead the Nutrients tab: how far from the goal, then the AMDR split. */
.mrow .nrow-meta b{font-weight:600;color:var(--ink-2)} .mrow.over .nrow-meta b{color:var(--accent)} .mrow.best .nrow-meta b,.mrow.good .nrow-meta b{color:var(--good)}
.split-head{font-size:12px;color:var(--ink-3);margin:14px 0 8px}

/* Tells you when vitamins and minerals were estimated from the closest match. */
.match-note{margin:10px 0 2px;padding:10px 12px;border-radius:12px;background:var(--panel);font-size:13px;line-height:1.4;color:var(--ink-2)}
.match-note p{margin:0} .match-note b{color:var(--ink)} .match-note .link{margin-top:4px;font-size:13px}

/* Hold and drag foods or whole meals to another meal. */
.meals .entry,.meals .meal-head{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
body.dragging{-webkit-user-select:none;user-select:none;cursor:grabbing}
body.dragging .tabs{visibility:hidden}
.drag-src{opacity:.35;transition:opacity .15s}
.drag-ghost{position:fixed;left:0;top:0;z-index:300;pointer-events:none;max-width:76vw;padding:10px 14px;border-radius:14px;background:var(--ink);color:var(--bg);box-shadow:0 14px 34px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:2px;transform-origin:30px 30px;animation:ghostIn .16s ease-out}
.drag-ghost b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drag-ghost span{font-size:12px;opacity:.75}
.drag-ghost.over{box-shadow:0 0 0 3px var(--good),0 14px 34px rgba(0,0,0,.28)}
@keyframes ghostIn{from{opacity:0;scale:.9}to{opacity:1;scale:1.03}}
.drag-tray{position:fixed;left:0;right:0;bottom:0;z-index:250;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.08);animation:trayUp .18s ease-out}
.drag-tray .mono{display:block;font-size:11px;color:var(--ink-3);margin-bottom:8px}
.dt-chips{display:flex;flex-wrap:wrap;gap:8px}
.dt-chip{padding:11px 16px;border-radius:999px;border:1.5px dashed var(--line-2,var(--line));font-size:14px;color:var(--ink);background:var(--panel)}
.dt-chip.drop-on{border-style:solid;border-color:var(--good);background:var(--good);color:#fff}
.meal.drop-on{outline:2px dashed var(--good);outline-offset:4px;border-radius:16px}
@keyframes trayUp{from{transform:translateY(100%)}to{transform:none}}
.move-row svg{color:var(--ink)}

/* Raw, uncooked or cooked: tags on food rows and the weighing line on the food sheet. */
.tag.prep{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.tag.prep.cooked{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.prep-line{margin-top:8px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.prep-line p{margin:0} .prep-line b{color:var(--ink)} .prep-line .link{margin-top:4px;font-size:13px;text-align:left}

/* Settings: Save sits in its own bar pinned to the top, with the button in the right corner. Content scrolls under the
   bar instead of next to the button, so a tap meant for a field or icon cannot land on Save. It only shows when there
   is something to save. */
.save-bar{position:fixed;z-index:70;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.06);animation:fabIn .18s ease-out}
.save-bar-in{max-width:540px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px var(--gutr,16px) 8px var(--gut,16px)}
.sb-note{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.sb-note i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.save-fab{display:inline-flex;align-items:center;gap:6px;padding:9px 16px 9px 13px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);
  font:600 14px/1 var(--f-body,inherit);cursor:pointer}
.save-fab svg{width:16px;height:16px}
.save-fab:active{transform:scale(.97)}
@keyframes fabIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Sheet content never squashes: when the keyboard shortens a sheet, its body scrolls instead. (The nutrition panel has
   overflow hidden, so as a flex item it could shrink to nothing and hide the field being typed in.) */
.sh-body > *{flex-shrink:0}

.link-note{margin:0;padding:10px 12px;border-radius:12px;background:var(--panel);font-size:13px;line-height:1.4;color:var(--ink-2)}
.link-note b{display:block;color:var(--ink);font-family:var(--f-mono);font-size:12px;margin-bottom:2px}

/* Everything pinned to the bottom follows the visible bottom of the screen (see trackViewport). */
.sheet-layer{bottom:var(--fixb,0px)}
.drag-tray{bottom:var(--fixb,0px)}
.toast{bottom:calc(74px + env(safe-area-inset-bottom,0px) + var(--fixb,0px))}

/* Top nutrients on each meal: the amount, then its share of your daily target. */
.meal-top i{font-style:normal;color:var(--ink-3);margin-left:2px}

/* Day summary: the three counts jump to their section. */
.ds-score button{border-top:4px solid var(--good);-webkit-tap-highlight-color:transparent}
.ds-score button.near{border-top-color:#C9A227} .ds-score button.low{border-top-color:var(--accent)}
.ds-score button:active{transform:scale(.97)}
.ds-score button:disabled{cursor:default;opacity:.55}
.ds-score button span::after{content:" ↓";color:var(--ink-3)}
.ds-score button:disabled span::after{content:""}
.ds-h{scroll-margin-top:10px}

/* Supplements */
.supp-block .supp-quick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.supp-quick .chip svg{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.supp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.supp-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.supp-list li > button:first-child{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit}
.supp-list b{display:block;font-weight:600;font-size:15px}
.supp-list small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.tag.daily{background:var(--good-soft);color:var(--good)}
.supp-presets{display:flex;flex-wrap:wrap;gap:6px}
.qchips.wd .chip{min-width:46px}
.panel .iu{display:block;font-size:11px;color:var(--ink-3);padding-left:0}
.panel .pv .icon-btn.sm{margin-left:2px}

/* Nutrient overview sheet */
.ni-today{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;background:var(--panel);border-radius:12px;padding:10px 12px;font-size:14px;font-variant-numeric:tabular-nums}
.ni-today > span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);width:100%}
.ni-today em{font-style:normal;color:var(--ink-2);font-size:13px}
.ni-sec h4{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:6px 0 6px}
.ni-sum{margin:0 0 8px;font-size:15px;line-height:1.5}
.ni-fn{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:1.5}
.ni-fn b{font-weight:600}
.ni-ref{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin-left:2px;border-radius:9px;background:var(--panel-2);color:var(--ink-2);font-size:11px;font-weight:600;text-decoration:none;vertical-align:1px}
.ni-srcs{margin:10px 0 4px;padding-left:20px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.ni-srcs li{margin:3px 0}
.ni-srcs a{color:var(--ink)}
.ni-foods{list-style:none;margin:6px 0 4px;padding:0}
.ni-foods li{border-bottom:1px solid var(--line)}
.ni-foods button{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;text-align:left;padding:9px 0;color:var(--ink)}
.ni-rank{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);text-align:right}
.ni-name{font-size:14px;line-height:1.3;min-width:0;display:flex;flex-direction:column;gap:3px}
.ni-sub{display:flex;flex-wrap:wrap;gap:4px}
.ni-val{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ni-val b{font-size:13.5px;font-weight:600}
.ni-val em{font-style:normal;font-size:12px;color:var(--ink-2)}
.ni-targets .nrow-more{margin-top:0}
.ds-row .nrow-hit{z-index:1}
.am-micros li.tap,.ds-list ~ .am-micros li.tap{cursor:pointer}
.am-micros li.tap:active{background:var(--panel)}

/* Unit note under the amount (volume weights, egg sizes) */
.unit-note{margin:-4px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}

/* Step-by-step meal and recipe builder, food finder and amount pages */
.sh-body.tall{min-height:calc(var(--vvh, 100dvh) * .78)}
.ff-find{display:flex;flex-direction:column;gap:8px}
.ff-lbl{margin:4px 0 0;font-size:10.5px;color:var(--ink-2)}
.find-list{list-style:none;margin:0;padding:0}
.find-list li{border-bottom:1px solid var(--line)}
.find-list button{width:100%;text-align:left;display:flex;flex-direction:column;gap:3px;padding:11px 2px;color:var(--ink)}
.find-list button:active{background:var(--panel)}
.fl-name{font-size:15px;line-height:1.3}
.fl-name small{color:var(--ink-2);font-size:13px}
.fl-sub{font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ff-qty{display:flex;flex-direction:column;gap:12px}
.step-list{list-style:none;margin:0;padding:0}
.step-list li{border-bottom:1px solid var(--line)}
.step-list button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;text-align:left;padding:11px 2px;color:var(--ink)}
.step-list button:disabled{opacity:1}
.step-list .sl-name{font-size:15px;line-height:1.3;grid-column:1}
.step-list .sl-name small{color:var(--ink-2)}
.step-list .sl-sub{font-size:12.5px;color:var(--ink-2);grid-column:1}
.step-list .sl-sub i{font-style:normal;color:var(--ink-3)}
.step-list .sl-kcal{grid-column:2;grid-row:1 / span 2;align-self:center;font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;display:flex;flex-direction:column;align-items:flex-end}
.step-list .sl-kcal small{font-weight:400;font-size:11px;color:var(--ink-2)}
.step-list li.nomatch .sl-name{color:var(--ink-2)}
.add-step{align-self:stretch;justify-content:center;gap:6px}
.step-tot{margin:0 0 8px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:center}
.row-qty{display:inline-flex;align-items:center;gap:6px}
.row-qty input{width:72px}
.row-qty select{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 6px;background:var(--bg);color:var(--ink);max-width:120px}

/* MyFitnessPal recipes */
.mfp-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.5}
.mfp-bm{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px}
.mfp-bm a.btn{cursor:grab;text-decoration:none}
.mfp-list .mfp-row{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;row-gap:2px;padding:11px 2px;align-items:start}
.mfp-list .mfp-row input{grid-row:1 / span 2;margin-top:3px}
.egg-chips{align-items:center}
.egg-chips .mono{font-size:10.5px;color:var(--ink-2);margin-right:2px;flex:none}

/* Page background and cards. A soft grey gradient sits behind the page, and each block (the day panel, every meal,
   the tiles, settings panels, nutrient lists) is a white card on it, so blocks stand apart instead of running into one.
   Each meal's Add food button carries the one red accent, so logging is the thing that stands out. */
:root{--page-a:#F4F4F1;--page-b:#E5E5E0;--card:#FFFFFF;--card-sh:0 1px 2px rgba(21,27,31,.05),0 6px 18px rgba(21,27,31,.06)}
@media (prefers-color-scheme: dark){:root:not(.pub-light){--page-a:#0F1416;--page-b:#0A0E10;--card:#161D21;--card-sh:0 0 0 1px #243036}}
html,body{background:var(--page-b)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--page-a) 0%,var(--page-b) 70%)}
.page :is(.fuel,.meal,.tile,.note,.stat,.energy,.switch-row,.pcalc,.welcome,.acct-box,.nrv-toggle,.repeat,.water,.frow,.sw-inner.frow){background:var(--card);border-color:transparent;box-shadow:var(--card-sh)}
.page .water{border-top:0;border-radius:18px;padding:14px 14px 8px;margin-top:10px}
.page .fuel .sum-btn{background:var(--panel)}
.page .search-btn{background:var(--card);border-color:transparent;box-shadow:var(--card-sh)}
.page .logbar .chip:not([aria-pressed="true"]){background:var(--card);border-color:transparent}
.page .seg-ctl{background:rgba(39,39,44,.07)}
.page .seg-ctl button[aria-pressed="true"]{background:var(--card)}
.page .nsec .nlist{background:var(--card);border-radius:18px;padding:2px 14px;box-shadow:var(--card-sh)}
.page .nsec .nlist > li:last-child{border-bottom:0}
.page .meal-top span{background:var(--panel)}
.ma-search{background:var(--accent-soft);color:var(--accent);font-weight:600}
.ma-search .ic{color:var(--accent)}
.ma-search:active{background:color-mix(in srgb,var(--accent-soft) 80%,var(--accent) 20%)}
/* The supplements card sits outside the meal list, so it gets its own gap from the last meal. */
.page .supp-block{margin-top:14px;padding-bottom:12px}
/* Five action tiles: Barcode, Voice, Meal scan, Quick add, Recipe */
.tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tile{font-size:11.5px;padding:13px 2px 11px;gap:6px}
.tile span{white-space:nowrap}
/* Create: recipe or saved meal */
.create-opt{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border-radius:16px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.create-opt:active{background:var(--panel)}
.create-opt .co-ic{width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.create-opt .co-ic .ic{width:22px;height:22px}
.create-opt .co-txt{display:flex;flex-direction:column;gap:3px}
.create-opt .co-txt b{font-size:16px}
.create-opt .co-txt span{font-size:13px;line-height:1.4;color:var(--ink-2)}
.create-opt > .ic{color:var(--ink-3)}
/* Bottom bar: five places, Create in the middle with the red accent; the action tiles go back to four. */
.tabs-in{grid-template-columns:repeat(5,1fr)}
.tab-create{color:var(--accent)}
.tab-create .tc-ic{width:38px;height:26px;margin:-3px 0;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center}
.tab-create .tc-ic .ic{width:18px;height:18px;stroke-width:2.2}
.tab-create:active .tc-ic{filter:brightness(.92)}
.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tile{font-size:12.5px;padding:14px 4px 12px;gap:7px}
/* MyFitnessPal import rows: the checkbox in the first column, name and details in the second. */
.mfp-list .mfp-row .sl-name,.mfp-list .mfp-row .sl-sub{grid-column:2}
.mfp-list .mfp-row .sl-name{font-weight:600}
.mfp-list .mfp-row input{grid-column:1;width:20px;height:20px;accent-color:var(--ink)}

/* Nutrient overview: each section is a dropdown, closed until tapped. */
details.ni-sec{border-bottom:1px solid var(--line)}
details.ni-sec > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent}
details.ni-sec > summary::-webkit-details-marker{display:none}
details.ni-sec > summary h4{margin:0}
details.ni-sec > summary svg{width:18px;height:18px;color:var(--ink-2);transition:transform .2s ease;flex:none}
details.ni-sec[open] > summary svg{transform:rotate(180deg)}
details.ni-sec > summary:active h4{color:var(--ink-2)}
.ni-sec-body{padding:0 0 14px}
.ni-today + details.ni-sec{margin-top:6px}

/* Search sheets (Add food, and the food finder in meals, recipes and photo review): the sheet keeps its full height
   and the title and search bar are pinned, so the search bar stays put while results change below it. */
.sh-body.fixh{flex:1 1 auto}
.sheet:has(> .sh-body.fixh){height:calc(var(--vvh,100dvh) * .92)}
html.kb .sheet:has(> .sh-body.fixh){height:calc(var(--vvh,100dvh) - 6px)}
/* The meal as a dropdown in the title */
.meal-pick{position:relative;display:inline-flex;align-items:center;gap:2px;color:var(--accent)}
.meal-pick .ic{width:16px;height:16px;flex:none}
.meal-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;-webkit-appearance:none;appearance:none;cursor:pointer;border:0}
.sh-body.fixh{padding-top:0}
.sh-body.fixh .sh-top{top:0;padding-top:4px}
/* The red delete layer only exists while a row is being swiped, so it never shows at a card's rounded corners. */
.sw-del{visibility:hidden;transition:width .15s ease,visibility 0s .22s}
.sw-row:is(.swiping,.open,.arm) .sw-del{visibility:visible;transition:width .15s ease,visibility 0s}

/* Tab bar colours: each tab has its own muted colour, matched to what it does. Today is amber (the day), Nutrients
   green (vitamins and minerals), Create the brand red (the main action), Trends blue (charts), Settings slate. Icons
   always show their colour; the open tab also colours its label and sits on a soft tint of its colour. */
:root{--t-today:#C7871A;--t-nutrients:#4E8A5E;--t-trends:#3D74B0;--t-settings:#6C6F7D}
@media (prefers-color-scheme: dark){:root:not(.pub-light){--t-today:#E7B04D;--t-nutrients:#7DBB8B;--t-trends:#7AA7DB;--t-settings:#A3A7B4}}
.tab-today{--tc:var(--t-today)} .tab-nutrients{--tc:var(--t-nutrients)} .tab-trends{--tc:var(--t-trends)} .tab-settings{--tc:var(--t-settings)}
.tab .tb-ic{width:38px;height:26px;margin:-3px 0;border-radius:9px;display:grid;place-items:center;color:var(--tc,var(--ink-3));transition:background-color .15s ease}
.tab .tb-ic .ic{width:20px;height:20px}
.tab[aria-current="page"]{color:var(--tc,var(--ink))}
.tab[aria-current="page"] .tb-ic{background:color-mix(in srgb, var(--tc) 14%, transparent)}
.tab[aria-current="page"] .tb-ic .ic{stroke-width:2.1}
.tab[aria-current="page"]::before{background:var(--tc,var(--accent))}
.tab:not([aria-current="page"]) .tb-ic{opacity:.85}
.tab:active .tb-ic{background:color-mix(in srgb, var(--tc) 10%, transparent)}

/* Food sources. Each verified source has its own tinted tag (AFCD green, USDA blue, chain menus amber, supermarket
   labels teal) and the food name ends with a green tick. Unverified sources keep the plain grey tag. */
:root{--s-a:#2F7D4F;--s-u:#2F67A8;--s-c:#A6651A;--s-store:#1F7680;--tick:#2E8B57}
@media (prefers-color-scheme: dark){:root:not(.pub-light){--s-a:#7DBB8B;--s-u:#86AEE0;--s-c:#E2A65A;--s-store:#6CC0C8;--tick:#5DBB84}}
.src-tag{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.src-tag .ic{width:10px;height:10px;stroke-width:2.2}
.src-a{--sc:var(--s-a)} .src-u{--sc:var(--s-u)} .src-c{--sc:var(--s-c)} .src-store{--sc:var(--s-store)}
.src-tag:is(.src-a,.src-u,.src-c,.src-store){color:var(--sc);background:color-mix(in srgb, var(--sc) 12%, transparent)}
.vtick{width:13px;height:13px;display:inline-block;vertical-align:-1.5px;margin-left:5px;flex:none}
.vtick circle{fill:var(--tick)} .vtick path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nm-rest{color:var(--ink-2);font-weight:400}
.am-name .nm-rest{font-weight:500}
.src-btn{display:inline;padding:0;vertical-align:baseline}
.src-btn .src-tag{text-decoration:underline dotted;text-underline-offset:2px}
.src-intro{display:flex;gap:8px;align-items:flex-start;margin:4px 0 12px;color:var(--ink-2);font-size:14px;line-height:1.45}
.src-intro .vtick{margin:3px 0 0;width:15px;height:15px}
.src-dbname{margin:0 0 14px;padding:9px 12px;border-radius:10px;background:var(--panel);font-size:13.5px;color:var(--ink-2)}
.src-dbname b{color:var(--ink);font-weight:500}
.src-list{list-style:none;margin:0 0 14px;padding:0}
.src-li{display:flex;gap:12px;align-items:flex-start;padding:10px 8px;border-radius:12px}
.src-li.on{background:var(--panel)}
.src-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:var(--sc,var(--ink-2));background:color-mix(in srgb, var(--sc,var(--ink-3)) 13%, transparent)}
.src-ic .ic{width:17px;height:17px}
.src-txt{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.src-txt b{color:var(--ink);font-size:14.5px;font-weight:600;display:flex;align-items:center}
.nm-end{white-space:nowrap}

/* Recipes and meals: the two ways to make one side by side, then everything you made, newest first. */
.lib-new{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 14px}
.create-opt.mini{grid-template-columns:1fr;gap:8px;padding:12px;align-items:start}
.create-opt.mini .co-ic{width:34px;height:34px;border-radius:11px}
.create-opt.mini .co-ic .ic{width:18px;height:18px}
.create-opt.mini .co-txt b{font-size:15px}
.create-opt.mini .co-txt span{font-size:12.5px;line-height:1.35}
.lib-search{margin-bottom:10px}
.lib-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.lib-to{font-size:13px;color:var(--ink-2);margin-left:auto}
.lib-row .frow-name{display:flex;align-items:center;gap:8px;-webkit-line-clamp:unset}
.lib-kind{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent)}
.lib-kind .ic{width:14px;height:14px}
.lib-kind.k-meal{background:color-mix(in srgb, var(--t-trends) 14%, transparent);color:var(--t-trends)}
.lib-row .frow-sub b{color:var(--ink);font-weight:600}
.lib-what{color:var(--ink-3)}
.lib-empty{padding:16px;border-radius:16px;background:var(--panel);margin:0 0 14px;font-size:14px;color:var(--ink-2)}
.lib-empty p{margin:0 0 6px} .lib-empty b{color:var(--ink)}

/* Builder search (recipes and saved meals): scan a barcode from the search bar, and the ways to add a food that no
   search finds, as MyFitnessPal offers them. */
.search .scan-in{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;flex:none;color:var(--ink);background:var(--panel)}
.search .scan-in .ic{width:20px;height:20px;color:var(--ink)}
.ff-tools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.ff-tool{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink)}
.ff-tool .ic{width:17px;height:17px;color:var(--ink-2)}
.ff-tool:active{background:var(--panel)}
.ff-none{margin:14px 0 4px;padding:14px;border-radius:14px;background:var(--panel);font-size:14px;color:var(--ink-2)}
.ff-none p{margin:0} .ff-none b{color:var(--ink)}
.ff-none .ff-tools{margin-bottom:0} .ff-none .ff-tool{background:var(--bg)}
.ff-foot{margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.find-list button[aria-busy="true"]{opacity:.55}

/* Sharing: from a diary meal and from each recipe or saved meal; a shared one opens with what is in it. */
.meal-acts{display:flex;justify-content:flex-end;gap:14px;margin-top:6px}
.meal-acts .meal-save{margin:0;display:inline-flex;align-items:center;gap:5px}
.meal-acts .meal-save .ic{width:15px;height:15px}
.lib-share{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--ink-2);margin-right:2px}
.lib-share .ic{width:18px;height:18px}
.lib-share:active{background:var(--panel-2)}
.sh-tot{margin:2px 0 12px;font-size:14px;color:var(--ink-2)} .sh-tot b{color:var(--ink);font-size:16px}
.sh-items{list-style:none;margin:0 0 12px;padding:0}
.sh-items li{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.sh-items li em{font-style:normal;color:var(--ink-2);font-size:13px;white-space:nowrap}
.share-url{width:100%;height:46px;border-radius:12px;border:1.5px solid var(--line);padding:0 12px;font-size:14px;background:var(--panel)}

/* Update log in Settings, and a dot on the Settings tab until it has been seen. */
.updates .sec-title{display:block}
.upd-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;margin:0;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}
.upd-t{display:flex;align-items:center;gap:8px} .upd-toggle .ic{width:18px;height:18px;flex:none;color:var(--ink-2)}
.upd-peek{margin:6px 0 0;font-size:13px;color:var(--ink-3)}
.updates.open .upd-toggle{margin-bottom:12px}
.new-pill{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--accent);color:#fff}
.upd{margin:0 0 12px}
.upd-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.upd-head b{font-size:15px} .upd-head span{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.upd ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.45}
.upd li{margin:0 0 6px}
.tb-ic{position:relative}
.tab-dot{position:absolute;top:2px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
/* Why SaadPal */
.why-lead{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink)}
.why-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.why-list li{display:flex;gap:12px;align-items:flex-start}
.why-list li>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.why-list b{font-size:15px;font-weight:700}
.why-list li>span:last-child>span{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.why-ic{flex:none;width:36px;height:36px;border-radius:11px;background:var(--panel);display:grid;place-items:center;color:var(--ink)}
.why-ic .ic{width:19px;height:19px}
.why-tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.why-tbl th,.why-tbl td{padding:9px 4px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.why-tbl thead th{font-size:11.5px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line)}
.why-tbl thead th.me{color:var(--accent);font-weight:700}
.why-tbl tbody th{text-align:left;font-weight:500;color:var(--ink);width:36%;padding-left:0}
.why-tbl td.me{background:var(--accent-soft)}
.why-tbl thead th.me{background:var(--accent-soft);border-radius:10px 10px 0 0}
.why-tbl tbody tr:last-child td.me{border-radius:0 0 10px 10px}
.why-tbl tbody tr:last-child th,.why-tbl tbody tr:last-child td{border-bottom:0}
.why-tbl .ic{width:17px;height:17px;vertical-align:middle}
.why-tbl .why-y{color:var(--good);stroke-width:2.6}
.why-tbl .why-n{color:var(--ink-3)}
.why-tbl em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;color:var(--ink-2)}
/* Compact Today: one-row header, a shorter hero card and tighter logging controls */
.head-day{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 10px}
.head-day .day-text{text-align:left;min-width:0}
.head-day .day-text h1{font-size:26px;line-height:1.1;margin:0}
.head-day .day-text p{margin:1px 0 0;font-size:13px}
.dh-side{display:flex;align-items:center;gap:2px;flex:none}
.dh-side .sync{margin-right:6px}
.head-day .nav-btn{width:38px;height:38px}
.page .fuel{padding:14px 14px 6px;gap:10px;border-radius:20px}
.page .fuel .fuel-top{align-items:center;flex-wrap:nowrap}
.page .fuel .left-num{flex-direction:row;align-items:baseline;gap:7px;min-width:0}
.page .fuel .big{font-size:34px}
.page .fuel .big-lbl{margin-top:0;font-size:13.5px;white-space:nowrap}
.page .fuel .eq{gap:14px}
.page .fuel .eq dd{font-size:15px}
.page .fuel .gauge{height:10px;border-radius:5px}
.macs.macs-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px}
.macs-4 .mac{display:flex;flex-direction:column}
.macs-4 .mac-name{font-size:12px;gap:5px;color:var(--ink-2)}
.macs-4 .mac-name .sw{width:7px;height:7px}
.macs-4 .mac-val{font-size:12px;margin-top:2px}
.macs-4 .mac-val b{font-size:14.5px}
.macs-4 .bar{height:5px;margin-top:5px}
.macs-4 .mac-note{font-size:11.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fuel-links{display:flex;align-items:stretch;border-top:1px solid var(--line);margin-top:2px}
.fuel-links .micro-link{flex:1;min-width:0;border-top:0;padding:10px 6px 8px 0;font-size:13px}
.fuel-links .micro-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fuel-links .sum-btn,.page .fuel .fuel-links .sum-btn{flex:none;width:auto;margin:0;padding:10px 0 8px 12px;border-left:1px solid var(--line);border-radius:0;background:none;font-size:13px;gap:6px}
.fuel-links .ic{width:16px;height:16px;flex:none}
.eve-card{margin-top:10px;padding:10px 8px 10px 14px;border-radius:16px}
.eve-card b{font-size:14px} .eve-card span{font-size:12.5px}
.logbar{margin-top:12px;gap:8px}
.logbar .chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:24px}
.page .search-btn{height:44px;font-size:14.5px}
.page .tiles{gap:6px}
.page .tile{padding:9px 2px 8px;gap:4px;border-radius:14px;font-size:12px}
.page .tile .ic{width:21px;height:21px}
.meals{margin-top:14px;gap:8px}
.page .meal{padding:10px 12px 4px}
@media (max-width:370px){ .page .fuel .big{font-size:30px} .page .fuel .eq{gap:10px} .page .fuel .eq dd{font-size:14px} .macs.macs-4{gap:0 8px} .macs-4 .mac-val b{font-size:13.5px} }
@media (max-width:385px){ .fuel-links .sum-btn .ic:first-child{display:none} .fuel-links .sum-btn{padding-left:10px} }
.why-note{background:var(--panel);border-radius:16px;padding:14px 16px 12px;font-size:14.5px;line-height:1.5}
.why-note p{margin:0}
.why-note>p:first-child{font-weight:600}
.why-aim-h{margin-top:10px!important;color:var(--ink-2)}
.why-note ol{margin:4px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.why-note li::marker{color:var(--accent);font-weight:700}
.why-sign{margin-top:10px!important;font-family:var(--f-display);font-weight:600}
.why-tbl tbody tr:first-child th{font-weight:700}
/* SaadPal title in the Today header, beside the sync dot */
.sync.brand{gap:7px}
.sync.brand .wordmark{font-size:12px;letter-spacing:.16em;color:var(--ink);font-weight:700}
.head-day .day-text h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){ .head-day .day-text h1{font-size:23px} .sync.brand .wordmark{font-size:11px;letter-spacing:.13em} }
/* Why SaadPal: each benefit in its own colour */
:root{--t-share:#8A5CB8}
@media (prefers-color-scheme: dark){:root:not(.pub-light){--t-share:#B596D9}}
.why-ic{color:var(--c,var(--ink));background:color-mix(in srgb, var(--c,var(--ink)) 13%, transparent)}
.why-list a{color:var(--accent);font-weight:600;white-space:nowrap}
/* Recipes is a plain tab now (Today is in the middle) */
.tab-create{--tc:var(--accent);color:var(--ink-3)}
.tab-create[aria-current="page"]{color:var(--tc)}

/* Familiar type: the phone's own font (San Francisco on iPhone, Roboto on Android), in sentence case, with no
   spaced-out capitals or typewriter labels. */
:root{--f-sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--f-display:var(--f-sys);--f-body:var(--f-sys);--f-mono:var(--f-sys)}
body{font-family:var(--f-sys)}
.mono,.wordmark,.sync,h1,.eq dt,.meal-head h2,.w-top h2,.nsec h2,.chart-head h2,.sec-title,.tab,.sh-head h3,.sh-sub,.tag,.qf > span:first-child,.rc-import .mono,.rc-h,.prod-head .mono,.mic-head b,.fill-box .fb-title,.ds-h,em.spec,.nm-sec h5,.rv-close,.ni-today > span,.ni-sec h4,.new-pill,.login h1,.sync.brand .wordmark,.why-tbl em,.lb-row{text-transform:none;letter-spacing:normal}
.mono{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
h1{font-size:28px;letter-spacing:-.01em}
.head-day .day-text h1{font-size:28px}
.login h1{font-size:30px}
.meal-head h2,.w-top h2,.nsec h2,.chart-head h2,.sec-title{font-size:17px;font-weight:700}
.rc-h,.ds-h,.ni-sec h4,.mic-head b{font-size:15px;font-weight:700}
.nm-sec h5{font-size:13px;font-weight:600}
.tab{font-size:10.5px;font-weight:500}
.sh-head h3{font-size:19px}
.sh-sub{font-size:12.5px}
.tag{font-size:10.5px;font-weight:600}
.eq dt{font-size:12px;font-weight:500}
.sync{font-size:11.5px;font-weight:500}
.wordmark,.sync.brand .wordmark{font-size:14px;font-weight:800}
.new-pill,em.spec,.rv-close{font-size:10.5px}
.qf > span:first-child,.rc-import .mono,.prod-head .mono,.fill-box .fb-title,.ni-today > span{font-size:12.5px;font-weight:500}
.ff-lbl{font-size:13px;font-weight:600}
.why-tbl em{font-size:11.5px;font-weight:500}
@media (max-width:380px){ .head-day .day-text h1{font-size:25px} .sync.brand .wordmark{font-size:13px} }
/* Forgot password and the reset screen */
.ok-note{margin:4px 0 0;padding:10px 12px;border-radius:12px;background:var(--good-soft);color:var(--ink);font-size:14px;text-align:left;line-height:1.4}
.show-pw{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);text-align:left}
.show-pw input{width:18px;height:18px;margin:0}
/* Search history: a food you picked for these letters before */
.tag.tag-pick{display:inline-flex;align-items:center;gap:3px;background:color-mix(in srgb, var(--t-today) 16%, transparent);color:color-mix(in srgb, var(--t-today) 70%, var(--ink))}
.tag.tag-pick .ic{width:10px;height:10px;stroke-width:2.4}
/* Add food as its own page (like MyFitnessPal's): a light grey page, white cards, and red for what you tap */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sheet.pg{background:var(--page-a);padding-top:env(safe-area-inset-top,0px);animation:pgin .26s cubic-bezier(.2,.8,.2,1)}
.sheet.full.pg:has(> .sh-body.fixh){height:auto}
@keyframes pgin{from{transform:translateX(42px);opacity:.4}}
.sheet.pg .sh-top,.sheet.pg .sh-foot{background:var(--page-a)}
.pg-head{display:grid;grid-template-columns:40px 1fr 40px;gap:6px;padding-top:4px}
.pg-head .back{background:transparent;color:var(--ink)}
.pg-head .back .ic{width:24px;height:24px}
.pg-head .sh-title{text-align:center}
.pg-head h3{font-family:var(--f-sys);text-transform:none;letter-spacing:0;font-size:18px;font-weight:700}
.pg-head .sh-sub{text-transform:none;letter-spacing:0;font-family:var(--f-sys);font-size:12.5px}
.sheet.pg .search{background:var(--card);border-color:transparent;box-shadow:var(--card-sh)}
.sheet.pg :is(.frow,.sw-inner.frow,.tile,.repeat,.in-meal){background:var(--card);border-color:transparent;box-shadow:var(--card-sh)}
.ff-tabs{display:flex;border-bottom:1px solid var(--line)}
.ff-tabs button{flex:1;padding:10px 2px 9px;font-size:14px;font-weight:600;color:var(--ink-2);border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ff-tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:350px){.ff-tabs button{font-size:12.5px}}
.list-h{font-size:16px;font-weight:700;margin:6px 0 -2px}
.create-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:14px;background:var(--card);box-shadow:var(--card-sh);color:var(--accent);font-weight:600;font-size:15px}
.create-row .ic{width:20px;height:20px;stroke-width:2.2}
/* Red on white: tiles and add buttons carry the accent everywhere */
.tile,.tile .ic{color:var(--accent)}
.plus{color:var(--accent)}
.sheet.pg .plus{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent)}
.plus.done,.sheet.pg .plus.done{color:#fff;box-shadow:none}
/* A shared link opened before signing in */
.share-wait{width:100%;max-width:340px;margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--panel);display:flex;flex-direction:column;gap:10px;text-align:left}
.share-wait p{margin:0}
.share-wait .sw-t{font-size:15.5px}
.share-wait a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.sheet.pg .sh-head{background:transparent}
.share-wait{background:var(--card);box-shadow:var(--card-sh)}
.share-wait .btn{padding:0 10px;white-space:nowrap;font-size:15px;height:46px}
/* Day summary on Nutrients: always there, even after closing the evening card on Today */
.sum-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:10px;padding:13px 12px 13px 14px;border-radius:16px;background:var(--card);box-shadow:var(--card-sh)}
.sum-card > .ic{width:20px;height:20px;color:var(--accent);flex:none}
.sum-card span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sum-card b{font-size:15px} .sum-card small{font-size:12.5px;color:var(--ink-2)}
.sum-card > .ic:last-child{color:var(--ink-2);width:18px;height:18px}
/* The Add food page is pinned to the screen itself, not to the visible-area reading, which iPhone's home screen app
   can leave short and shifted after the keyboard closes. Only with the keyboard up does it follow the visible area. */
.sheet.full.pg{position:fixed;top:0;left:0;right:0;bottom:var(--fixb,0px);max-height:none;border-radius:0}
html.kb .sheet.full.pg{top:var(--vvt,0px);bottom:auto;border-radius:0}
html.kb .sheet.full.pg:has(> .sh-body.fixh){height:var(--vvh,100%)}
/* Similar products under a loosely named voice item */
.rv-sim{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:8px;align-items:center;padding-bottom:2px}
.rv-sim::-webkit-scrollbar{display:none}
.rv-sim .mono{font-size:11px;color:var(--ink-2);flex:none}
.rv-sim button{flex:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;padding:7px 11px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--accent);font-weight:500}
.rv-sim button em{font-style:normal;color:var(--ink-2);margin-left:5px;font-size:11.5px}
/* Plus: a pop, a ring and a small burst when a food is added */
.plus{position:relative;overflow:visible}
@keyframes plusPop{0%{transform:scale(1)}35%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes burstRing{from{transform:scale(.7);opacity:.9}to{transform:scale(1.6);opacity:0}}
@keyframes burstDots{from{transform:scale(.35);opacity:1}to{transform:scale(1.05);opacity:0}}
.plus.done{animation:plusPop .38s cubic-bezier(.3,1.6,.5,1)}
.plus.done::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--good);animation:burstRing .5s ease-out forwards;pointer-events:none}
.plus.done::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;
  box-shadow:0 -32px 0 0 var(--accent),23px -23px 0 0 var(--good),32px 0 0 0 var(--accent),23px 23px 0 0 var(--good),0 32px 0 0 var(--accent),-23px 23px 0 0 var(--good),-32px 0 0 0 var(--accent),-23px -23px 0 0 var(--good);
  animation:burstDots .55s ease-out forwards}
@media (prefers-reduced-motion: reduce){.plus.done,.plus.done::before,.plus.done::after{animation:none}.plus.done::before,.plus.done::after{display:none}}
/* Add to home screen guide */
.inst-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.inst-steps li{display:flex;flex-direction:column;gap:10px}
.inst-t{display:flex;gap:10px;align-items:flex-start}
.inst-t p{margin:0;font-size:16px;line-height:1.4}
.inst-t small{display:block;color:var(--ink-2);font-size:13.5px;margin-top:3px}
.inst-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center;margin-top:1px}
.inst-steps img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.inst-done{margin:0;padding:14px;border-radius:14px;background:var(--panel);font-size:15px}
.inst-card{margin-top:10px;display:flex;align-items:center;gap:12px;padding:10px 8px 10px 12px;border-radius:16px;background:var(--card);box-shadow:var(--card-sh);cursor:pointer}
.inst-card img{width:40px;height:40px;border-radius:10px;flex:none}
.inst-card div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.inst-card b{font-size:14.5px} .inst-card span{font-size:12.5px;color:var(--ink-2)}
.inst-card .icon-btn{background:transparent}
/* The SaadPal mark (SP in the progress ring) on sign-in and the splash */
.login .mark,.splash .mark{width:88px;height:88px}
.inst-card img{border:1px solid var(--line)}
/* Usage dashboard (admin) */
.u-page{gap:14px}
.sheet.pg .u-page .sh-top{padding-bottom:8px}
.u-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.u-me{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.u-me input{width:16px;height:16px;margin:0}
.u-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:620px){.u-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.u-kpi{background:var(--card);box-shadow:var(--card-sh);border-radius:14px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.u-kpi b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-kpi span{font-size:13px;color:var(--ink)}
.u-kpi small{font-size:12px;color:var(--ink-2)}
.u-card{background:var(--card);box-shadow:var(--card-sh);border-radius:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.u-card h4{margin:0;font-size:15.5px;font-weight:700}
.u-card p{margin:0}
.u-chart{display:flex;flex-direction:column;gap:6px}
.u-chart svg{width:100%;height:110px;display:block;overflow:visible;cursor:pointer}
.u-read{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.u-read b{color:var(--ink);font-size:16px;margin-right:4px}
.u-bar{fill:color-mix(in srgb, var(--accent) 55%, var(--card))}
.u-bar.on{fill:var(--accent)}
.u-base{stroke:var(--line);stroke-width:1}
.u-axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-2)}
.u-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.u-lt{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.u-ln{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-lt b{font-variant-numeric:tabular-nums;flex:none}
.u-track{height:6px;border-radius:3px;background:var(--panel);margin-top:4px;overflow:hidden}
.u-track i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.u-list small{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.u-ret{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.u-ret li{background:var(--panel);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}
.u-ret b{font-size:20px;font-variant-numeric:tabular-nums}
.u-ret span{font-size:12.5px} .u-ret small{font-size:11.5px;color:var(--ink-2)}
.u-sort{height:40px;border-radius:12px;border:1px solid var(--line);background:var(--bg);padding:0 10px;font-size:14px}
.u-card .filter{flex:1;min-width:150px;height:40px}
.u-users{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.u-users li + li{border-top:1px solid var(--line)}
.u-user{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:8px;width:100%;text-align:left;padding:10px 0;align-items:center}
.u-user .ic{grid-row:1 / span 2;grid-column:2;width:18px;height:18px;color:var(--ink-2)}
.u-un{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0}
.u-un small{color:var(--ink-2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.u-us{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.u-sess,.u-ev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.u-sess li{display:flex;flex-direction:column;gap:1px;font-size:14px}
.u-sess span{font-size:12.5px;color:var(--ink-2)}
.u-ev li{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:13px}
.u-ev time{color:var(--ink-2);font-variant-numeric:tabular-nums}
.privacy-note{margin:4px 2px 0}
.u-page .u-ctl .seg-ctl button{padding:7px 12px;font-size:13px}
.u-page .u-ctl{flex-wrap:nowrap}
.u-page .sh-top .pg-head{padding-top:2px}
/* Messages over a screen: a small pill at the bottom left, never over the top of the screen */
html.locked .toast.mini,.toast.mini{top:auto;left:16px;right:auto;transform:none;bottom:calc(env(safe-area-inset-bottom,0px) + 96px + var(--fixb,0px));width:auto;max-width:calc(100% - 32px);padding:8px 14px;border-radius:999px;font-size:13.5px;gap:10px}
.toast.mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-foot .undo-mini{flex:none;width:auto;padding:0 16px;gap:6px;animation:fade .2s ease}
.done-foot .undo-mini .ic{width:16px;height:16px;transform:scaleX(-1)}
.done-foot .undo-mini + .btn{flex:1;width:auto}
.done-foot:has(.undo-mini){flex-direction:row;align-items:stretch;gap:8px}
.done-foot .undo-mini{height:auto;min-height:52px}
.sheet.pg .plus.done{background:var(--good)}
/* Repeat yesterday: hold to see the meal first */
.ma-rep,.repeat{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.ma-rep{color:var(--accent);background:var(--accent-soft)}
.peek-layer{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,18,20,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .18s ease}
.peek{width:100%;max-width:420px;max-height:min(78vh,600px);overflow:hidden;background:var(--card);border-radius:22px;padding:16px 16px 14px;box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:10px;animation:peekIn .32s cubic-bezier(.2,1.35,.4,1);transform-origin:50% 70%}
@keyframes peekIn{from{transform:scale(.86) translateY(18px);opacity:0}}
@media (prefers-reduced-motion: reduce){.peek,.peek-layer{animation:none}}
.peek-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.peek-h b{font-size:17px} .peek-h span{font-size:13px;color:var(--ink-2)}
.peek-list{list-style:none;margin:0 -16px;padding:0 16px;display:flex;flex-direction:column;overflow:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
.peek-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.peek-list li span{display:flex;flex-direction:column;min-width:0}
.peek-list li b{font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek-list li small{font-size:12.5px;color:var(--ink-2)}
.peek-list li em{font-style:normal;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;flex:none}
.peek-tot{font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:9px}
.peek-tot b{color:var(--ink)}
/* Hazard box: protein, carbs and fat that do not match the calories */
.hazard{--hz:#F2B705;--hz-ink:#3D2E00;--hz-bg:#FFF6D6;position:relative;display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:11px 12px 11px 22px;border-radius:12px;background:var(--hz-bg);color:var(--hz-ink);border:1.5px solid var(--hz);font-size:13.5px;line-height:1.4;overflow:hidden;animation:hzIn .35s ease}
.hazard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(-45deg,var(--hz) 0 6px,#1F1F1F 6px 12px)}
.hazard .hz-ic{flex:none;font-size:20px;line-height:1.1}
.hazard p{margin:0} .hazard b{display:block;font-size:14.5px;margin-bottom:2px}
@keyframes hzIn{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.hazard{animation:none}}
@media (prefers-color-scheme: dark){:root:not(.pub-light) .hazard{--hz-bg:#3A3010;--hz-ink:#FBE7A6}}
/* Feedback and bug reports */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fb-row{gap:12px}
.fb-row-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.fb-row-ic svg{width:20px;height:20px}
.fb-sheet{display:flex;flex-direction:column;gap:12px}
.fb-kinds{width:100%} .fb-kinds button{flex:1}
.fb-text textarea{width:100%;box-sizing:border-box;min-height:140px;resize:vertical;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;font-size:16px;line-height:1.45;background:var(--panel);color:var(--ink)}
.fb-text textarea:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--card,#fff)}
.fb-add{align-self:flex-start}
.fb-img{display:flex;align-items:center;gap:12px}
.fb-img img{width:72px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.fb-ctx{font-size:13px;color:var(--ink-2)}
.fb-ctx summary{cursor:pointer;padding:4px 0}
.fb-ctx dl{margin:6px 0 0;display:flex;flex-direction:column;gap:4px}
.fb-ctx dl div{display:flex;gap:10px} .fb-ctx dt{flex:none;width:112px;color:var(--ink-3)} .fb-ctx dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--ink-2)}
.fb-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:18px 8px 6px}
.fb-done p{margin:0;max-width:320px}
.fb-tick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--good-soft);color:var(--good);animation:peekIn .4s cubic-bezier(.2,1.35,.4,1)}
.fb-tick svg{width:30px;height:30px}
.adm-btns{display:flex;flex-wrap:wrap;gap:8px}
.fb-badge{margin-left:6px;background:var(--accent);color:#fff;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600}
.fb-page .fb-alerts{font-size:13px;color:var(--ink-2);background:var(--panel);border-radius:12px;padding:10px 12px;margin:4px 0 12px}
.fb-empty{text-align:center;padding:30px 0}
.fb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fb-item{background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.fb-item.is-done{opacity:.62}
.fb-item.is-hl{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.fb-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fb-kind{font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--panel);color:var(--ink-2)}
.fb-kind.k-bug{background:var(--accent-soft);color:var(--accent)}
.fb-kind.k-idea{background:var(--good-soft);color:var(--good)}
.fb-when{font-size:12.5px;color:var(--ink-3)}
.fb-who{margin:0;font-size:14px} .fb-who span{color:var(--ink-2);font-size:13px}
.fb-msg{margin:0;white-space:pre-wrap;font-size:15px;line-height:1.45}
.fb-shot{align-self:flex-start;padding:0;border:0;background:none;cursor:zoom-in}
.fb-shot img{max-width:140px;max-height:200px;border-radius:10px;border:1px solid var(--line);display:block}
.fb-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.fb-big{max-width:100%;max-height:90vh;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);animation:peekIn .3s cubic-bezier(.2,1.35,.4,1)}
.fb-acts a.btn{text-decoration:none;color:var(--ink)}
/* New address card and steps */
.moved-card{border:1.5px solid var(--accent)}
.moved-steps{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:14px}
.moved-steps li{line-height:1.45} .moved-steps li b{display:block;margin-bottom:4px}
.moved-steps .btn{margin-top:4px}
.moved-wait{display:block;margin-top:4px;color:var(--accent);font-weight:500}
/* Comparison table: competitor columns say "free plan"; notes and sources under it */
.why-tbl thead th small{display:block;font-weight:500;font-size:10.5px;color:var(--ink-3);margin-top:1px}
.why-tbl em{font-family:inherit;font-size:11.5px;letter-spacing:0;line-height:1.25;display:inline-block}
.why-fine{font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:10px}
.why-fine ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:5px}
.why-fine details{margin-top:8px} .why-fine summary{cursor:pointer;font-weight:600;color:var(--ink)}
.why-fine ol{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.why-fine a{color:var(--accent);overflow-wrap:anywhere}
/* Sign-up page: Why SaadPal under the form */
.su-why{width:100%;max-width:420px;margin:30px 0 24px;padding-top:22px;border-top:1px solid var(--line);text-align:left}
.su-why h2{font-size:21px;margin:0 0 8px;font-weight:700}
.su-why > p{margin:0 0 10px;line-height:1.5}
.su-why .su-why-cap{font-weight:600;margin:16px 0 4px}
.su-why .su-why-sign{margin-top:12px;font-weight:600}
.su-why .btn.full-w{margin-top:14px}