/* JNPT NutriCoach — Styles */


:root{
  --green:#1D9E75;--green-dark:#0F6E56;--green-light:#E1F5EE;--green-text:#085041;
  --brand:#E8161B;--brand-dark:#B30E12;--brand-light:#FDE8E8;
  --red:#E24B4A;--red-light:#FCEBEB;--red-text:#791F1F;
  --blue:#185FA5;--blue-light:#E6F1FB;--blue-text:#0C447C;
  --amber:#EF9F27;--amber-light:#FAEEDA;--amber-text:#633806;
  --purple:#534AB7;--purple-light:#EEEDFE;--purple-text:#3C3489;
  --bg:#F5F5F4;--surface:#FFFFFF;--surface2:#F5F5F4;--border:#E5E5E3;
  --text:#1A1A18;--text2:#6B6B67;--text3:#9B9B97;
  --r:8px;--r-sm:6px;--r-lg:12px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
.app{display:flex;min-height:100vh;padding-top:env(safe-area-inset-top)}

/* SIDEBAR */
.sb{width:220px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-logo{padding:16px 16px 14px;border-bottom:1px solid var(--border);background:#0A0A0A}
.sb-logo-img{height:38px;display:block}
.sb-logo span{font-size:11px;color:#C9C9C7;display:block;margin-top:6px;letter-spacing:.3px}
.sb-section{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;padding:12px 16px 4px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 16px;cursor:pointer;font-size:13px;color:var(--text2);transition:background .1s;border-left:2px solid transparent}
.nav-item:hover{background:var(--bg);color:var(--text)}
.nav-item.active{background:var(--brand-light);color:var(--brand-dark);font-weight:500;border-left-color:var(--brand)}
.nav-item i{font-size:15px;flex-shrink:0}
.sb-bottom{margin-top:auto;padding:12px 16px;border-top:1px solid var(--border)}
.view-toggle{display:flex;gap:5px}
.vbtn{flex:1;padding:5px 8px;border:1px solid var(--border);background:transparent;border-radius:var(--r-sm);font-size:11px;cursor:pointer;color:var(--text2);font-family:inherit;transition:all .1s}
.vbtn.active{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:500}

/* MAIN */
.main{flex:1;overflow-y:auto;padding:24px;max-width:100%}
.page{display:none}.page.active{display:block;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.page-header{margin-bottom:20px}
.page-header h2{font-size:20px;font-weight:600;letter-spacing:-.3px}
.page-header p{font-size:13px;color:var(--text2);margin-top:2px}

/* GRID */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:14px}
.card-sm{background:var(--surface2);border-radius:var(--r);padding:12px 14px}
.card-title{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.stat-num{font-size:22px;font-weight:600;letter-spacing:-.5px}
.stat-sub{font-size:11px;color:var(--text2);margin-top:2px}

/* FORMS */
label{font-size:12px;color:var(--text2);display:block;margin-bottom:4px}
input[type=text],input[type=number],input[type=email],input[type=password],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-size:13px;font-family:inherit;
  transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green)}
.form-row{margin-bottom:12px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.form-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}

/* BUTTONS */
.btn{padding:8px 16px;border:1px solid var(--border);border-radius:var(--r-sm);background:transparent;color:var(--text);font-size:13px;cursor:pointer;font-family:inherit;transition:all .12s;font-weight:500}
.btn:hover{background:var(--bg)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-icon{padding:5px 8px}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:500}
.badge-green{background:var(--green-light);color:var(--green-text)}
.badge-red{background:var(--red-light);color:var(--red-text)}
.badge-blue{background:var(--blue-light);color:var(--blue-text)}
.badge-amber{background:var(--amber-light);color:var(--amber-text)}
.badge-purple{background:var(--purple-light);color:var(--purple-text)}
.badge-gray{background:var(--surface2);color:var(--text2)}
.badge-ww{background:var(--green-light);color:var(--green-text)}
.badge-coles{background:var(--red-light);color:var(--red-text)}
.badge-aldi{background:var(--blue-light);color:var(--blue-text)}
.badge-mingle{background:var(--green-light);color:var(--green-text)}
.badge-raw{background:var(--amber-light);color:var(--amber-text)}

/* PROGRESS */
.progress{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;margin:6px 0}
.progress-fill{height:100%;border-radius:3px;background:var(--green);transition:width .4s}
.macro-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.macro-label{width:50px;font-size:12px;color:var(--text2)}
.macro-bar{flex:1;height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
.macro-fill{height:100%;border-radius:3px;transition:width .35s}
.macro-val{width:38px;text-align:right;font-size:12px;color:var(--text2)}

/* LISTS */
.list-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.list-row:last-child{border-bottom:none}

/* TABS */
/* A tab row is one fixed-height line that scrolls sideways when it overflows.
   The active underline is an inset shadow rather than a border with a negative
   margin, so overflow clipping can never shave it off. */
.tabs{display:flex;align-items:stretch;gap:2px;height:37px;box-sizing:border-box;flex-shrink:0;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:0 14px;font-size:13px;line-height:1;white-space:nowrap;cursor:pointer;color:var(--text2);font-weight:500;transition:color .1s;box-shadow:inset 0 -2px 0 transparent}
.tab.active{color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}
.tab:hover{color:var(--text)}

/* PILLS */
.pill-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pill{padding:5px 12px;border:1px solid var(--border);border-radius:20px;font-size:12px;cursor:pointer;color:var(--text2);font-weight:500;transition:all .1s}
.pill.active{background:var(--green);color:#fff;border-color:var(--green)}
.store-pill{padding:4px 11px;border-radius:20px;font-size:12px;cursor:pointer;font-weight:500;border:1px solid var(--border);color:var(--text2);transition:all .1s}
.store-pill.active-all,.store-pill.active-generic{background:var(--green);color:#fff;border-color:var(--green)}
.store-pill.active-woolworths{background:var(--green);color:#fff;border-color:var(--green)}
.store-pill.active-coles{background:var(--red);color:#fff;border-color:var(--red)}
.store-pill.active-aldi{background:var(--blue);color:#fff;border-color:var(--blue)}
.store-pill.active-mingle{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.store-pill.active-condiment{background:var(--purple);color:#fff;border-color:var(--purple)}

/* SEARCH */
.search-wrap{position:relative;margin-bottom:8px}
.search-wrap input{padding-left:34px}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:15px;pointer-events:none}
.search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:15px;cursor:pointer;display:none}
.search-clear:hover{color:var(--text)}
.results-panel{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;margin-bottom:12px;max-height:320px;overflow-y:auto;box-shadow:var(--shadow)}
.results-section-label{padding:6px 12px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;background:var(--surface2);border-bottom:1px solid var(--border);position:sticky;top:0;display:flex;align-items:center;gap:6px}
.result-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.result-item:last-child{border-bottom:none}
.result-item:hover{background:var(--bg)}
.result-name{font-size:13px;font-weight:500;flex:1}
.result-sub{font-size:11px;color:var(--text2)}
.result-cal{font-size:12px;font-weight:600;color:var(--green);white-space:nowrap}

/* SELECTED FOOD */
.sel-food-card{background:var(--surface2);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;border:1px solid var(--green);border-left:3px solid var(--green)}
.macro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.macro-box{background:var(--surface);border-radius:var(--r-sm);padding:8px;text-align:center}
.macro-box-val{font-size:15px;font-weight:600}
.macro-box-lbl{font-size:10px;color:var(--text2);margin-top:1px}

/* STREAK */
.streak-card{background:var(--surface2);border-radius:var(--r);padding:11px 13px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.streak-num{font-size:24px;font-weight:700;color:var(--green);min-width:34px}
.streak-dots{display:flex;gap:4px;margin-top:4px}
.sdot{width:10px;height:10px;border-radius:50%;background:var(--surface);border:1px solid var(--border)}
.sdot.hit{background:var(--green);border-color:var(--green)}
.sdot.miss{background:var(--red-light);border-color:#F09595}
.sdot.today{background:var(--green);border-color:var(--green);outline:2px solid var(--green-light)}

/* DONUT */
.donut-wrap{display:flex;align-items:center;gap:14px}

/* WEIGHT CHART */
.chart-svg{width:100%;overflow:visible}

/* BANNER */
.banner{border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px}
.banner-amber{background:var(--amber-light);color:var(--amber-text);border:1px solid #FAC775}
.banner-green{background:var(--green-light);color:var(--green-text);border:1px solid #A5DFCC}
.banner-blue{background:var(--blue-light);color:var(--blue-text);border:1px solid #A3C8F0}
.banner-amber{background:var(--amber-light);color:var(--amber-text);border:1px solid #F0CE8A}
.banner-gray{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}

/* RATING STARS */
.star-row{display:flex;gap:5px}
.star{font-size:20px;cursor:pointer;color:var(--border);transition:color .1s}
.star.on{color:var(--amber)}

/* COACH FEEDBACK */
.coach-note{background:var(--surface2);border-left:3px solid var(--green);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 13px;font-size:13px;margin-top:8px}

/* AI */
.ai-output{background:var(--surface2);border-radius:var(--r);padding:14px;font-size:13px;line-height:1.75;min-height:80px}
.typing::after{content:'▋';animation:blink .7s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* SPINNER */
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* ONBOARDING */
.onboard-wrap{display:none;min-height:100vh;align-items:center;justify-content:center;background:var(--bg);padding:24px}
/* Onboarding goal/activity selection cards */
.ob-goal-card{
  padding:14px;border:2px solid var(--border);border-radius:var(--r);
  cursor:pointer;transition:border-color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;background:var(--surface);
}
.ob-goal-card:active{background:var(--surface2)}
.ob-goal-card.active{border-color:var(--brand);background:var(--brand-light)}
.onboard-logo-wrap{background:#0A0A0A;border-radius:var(--r);padding:16px;margin-bottom:4px;text-align:center}
.onboard-logo-img{height:46px;display:inline-block}
.onboard-step{font-size:12px;color:var(--text2);margin-bottom:24px}
.onboard-steps-bar{display:flex;gap:4px;margin-bottom:24px}
.ostep{flex:1;height:3px;border-radius:2px;background:var(--border)}
.ostep.done{background:var(--brand)}
.ostep.active{background:var(--brand);opacity:.5}

/* AVATAR */
.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}

/* MEAL DB */
.meal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:8px;overflow:hidden}

/* MEALS TAB — lazy list
   The meal database renders in batches of 12. Skeletons stand in for the first
   batch so the list never flashes empty on a slow phone, and the sentinel at
   the foot of the list is both the loading indicator and the scroll trigger
   that pulls in the next batch. */
.meal-skeleton{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:8px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.sk-block{background:var(--surface2);border-radius:var(--r-sm);animation:skPulse 1.2s ease-in-out infinite}
.sk-thumb{width:48px;height:48px;border-radius:var(--r);flex-shrink:0}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.sk-line{height:11px}
.sk-line.w70{width:70%}
.sk-line.w40{width:40%}
.meal-sentinel{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0 18px;font-size:12px;color:var(--text3)}
.meal-sentinel i{font-size:14px;animation:spin .9s linear infinite}
@keyframes skPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .sk-block,.meal-sentinel i{animation:none}
}
.meal-row:hover{background:var(--bg)}

/* TOGGLE */
.rc-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px}
.rc-opt{padding:5px 14px;font-size:12px;cursor:pointer;color:var(--text2);transition:background .1s;background:transparent;font-weight:500}
.rc-opt.active{background:var(--green);color:#fff}

/* Weight chart range buttons */
.wt-range{font-size:11px;font-weight:600;padding:4px 10px;border-radius:14px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--text2);transition:all .12s}
.wt-range:hover{border-color:var(--brand);color:var(--brand)}
.wt-range.active{background:var(--brand);border-color:var(--brand);color:#fff}
#wt-chart{width:100%;display:block}

/* RESPONSIVE */
@media(max-width:768px){
  /* iOS Safari zooms the whole page in when you focus a control whose text is
     under 16px. That is what clipped the Send button and the Profile tab off
     the right-hand edge, and it scaled visualViewport out from under the
     keyboard measurements. 16px is the threshold, so controls hit it exactly
     on phones and keep their compact size everywhere else.

     !important because several controls carry their own inline font-size, and
     one missed control is one more screen that jumps. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select,textarea{font-size:16px !important}

  /* ── Layout: hide sidebar, use bottom nav instead ── */
  .sb{display:none}
  .main{padding:16px 16px calc(80px + env(safe-area-inset-bottom));max-width:100%}
  .app{display:block}

  /* ── Bottom navigation bar ── */
  .bottom-nav{
    display:flex!important;
    position:fixed;bottom:0;left:0;right:0;
    height:calc(60px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--surface);
    border-top:1px solid var(--border);
    z-index:600;
    align-items:stretch;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;cursor:pointer;
    color:var(--text3);transition:color .15s;
    font-size:10px;font-weight:500;letter-spacing:.2px;
    padding:8px 4px 10px;border:none;background:none;
    -webkit-tap-highlight-color:transparent;
  }
  /* Six tabs on a 360px phone leaves ~60px each, so the label must not wrap */
  .bn-item{min-width:0;font-size:9.5px;padding:8px 2px 10px}
  .bn-item span:not([id$="-dot"]),
  .bn-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bn-item i{font-size:21px;line-height:1;display:block}
  /* The conversation is a chat screen, not a scrolling document.

     iOS does not shrink the layout viewport for the keyboard — it shrinks the
     *visual* viewport and scrolls the page to reveal the focused input. Left
     alone that drags the whole thread off-screen and strands the fixed tab bar
     out over the keys. So the page is pinned to the visual viewport instead:
     the keyboard takes room away from the message list and the composer stays
     where it is. --app-vh / --app-vtop are kept in step by
     syncMessagesViewport() in dashboard.js. */
  body.msg-open{overflow:hidden}
  #page-messages.active{
    /* top rather than a transform: a transformed ancestor is one of the ways
       iOS Safari stops an overflow:auto descendant from scrolling, and that
       descendant is the conversation. */
    position:fixed;left:0;right:0;top:var(--app-vtop,0px);z-index:500;
    height:100vh;height:var(--app-vh,100dvh);
    display:flex;flex-direction:column;
    margin:0;padding:16px 16px calc(60px + env(safe-area-inset-bottom));
    background:var(--bg);overflow:hidden;
  }
  #page-messages .page-header{flex:none;margin-bottom:12px}
  #page-messages .card{
    flex:1;min-height:0;height:auto;margin:0;
    display:flex;flex-direction:column;
  }
  #page-messages #msg-page-list{
    flex:1;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* The conversation owns vertical drags; the page behind it must not take
       them, and must not rubber-band when the thread hits its end. */
    touch-action:pan-y;overscroll-behavior:contain;
  }
  #page-messages .msg-composer{flex:none}
  /* With the keyboard up, its own inset replaces the tab bar's */
  body.kb-open #page-messages.active{padding-bottom:0}
  body.kb-open .bottom-nav{display:none!important}
  .bn-item.active{color:var(--brand)}
  .bn-item.active i{color:var(--brand)}

  /* ── Grids collapse to single column on small screens ── */
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .g2.keep-2{grid-template-columns:1fr 1fr}

  /* ── Cards and rows: comfortable touch targets ── */
  .card{padding:14px}
  .list-row{padding:12px 0;min-height:44px}
  .btn,.btn-sm{min-height:44px;padding:10px 18px;font-size:14px}
  .btn-sm{min-height:36px;padding:7px 14px;font-size:13px}
  input[type=range]{height:32px}

  /* ── Meal cards: compact collapsed row ── */
  .meal-row{padding:12px}

  /* ── Page headers: tighter on mobile ── */
  .page-header{margin-bottom:14px}
  .page-header h2{font-size:20px}

  /* ── Form rows stack vertically ── */
  .form-row-2,.form-row-4{grid-template-columns:1fr}

  /* ── Tabs: scroll sideways only ──
     overflow-x:auto alone is not enough: with overflow-y left at its default
     of visible, the spec computes it to auto, and the row picks up a stray
     vertical scroll of a pixel or two. Pinning overflow-y:hidden is what stops
     the row drifting up and down under a thumb. */
  .tabs{overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}

  /* ── Daily check-in popup ── */
  .checkin-popup{
    position:fixed;inset:0;z-index:700;
    background:rgba(0,0,0,0.45);
    display:flex;align-items:flex-end;
    backdrop-filter:blur(2px);
  }
  .checkin-popup-card{
    background:var(--surface);
    border-radius:20px 20px 0 0;
    width:100%;
    max-height:88vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 -4px 24px rgba(0,0,0,.15);
  }
  .checkin-popup-handle{
    width:36px;height:4px;
    background:var(--border);
    border-radius:2px;
    margin:0 auto 0;
  }
  /* Step dots */
  .ci-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--border);transition:background .25s,transform .25s;
  }
  .ci-dot.active{background:var(--brand);transform:scale(1.25);}
  .ci-dot.done{background:var(--green);}
  /* Score buttons */
  .ci-score-btn{
    flex:1;padding:10px 2px;border-radius:6px;
    border:1.5px solid var(--border);
    background:none;font-size:14px;font-weight:600;
    color:var(--text2);cursor:pointer;
    transition:border-color .15s,background .15s,color .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .ci-score-btn.active{
    border-color:var(--brand);
    background:var(--brand);color:#fff;
  }

  /* ── Home screen: today summary + week plan stacked ── */
  .home-today-card{margin-bottom:14px}
  .home-ring-wrap{display:flex;justify-content:center;margin-bottom:16px}

  /* ── Meal log screen: search bar prominent at top ── */
  .log-search-top{margin-bottom:12px}
}

/* Bottom nav hidden on desktop */
.bottom-nav{display:none}

/* Mobile top bar — shows on mobile, hidden on desktop */
.mobile-top-bar{ display:none !important; }
@media(max-width:768px){
  .mobile-hide-header{display:none}
}

/* Barcode scanner scanning line animation */
@keyframes scanline{0%{top:10%}50%{top:88%}100%{top:10%}}

/* Food page action buttons */
.food-action-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 12px;background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r);cursor:pointer;text-align:center;
  transition:border-color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.food-action-btn:active{background:var(--surface2);border-color:var(--brand)}
.food-action-btn.active{border-color:var(--brand);background:var(--brand-light)}

/* MFP-style meal log sections */
.meal-log-section{background:var(--surface);border-radius:var(--r);border:1px solid var(--border);margin-bottom:10px;overflow:hidden}
.meal-log-section-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.meal-log-add-btn{display:flex;align-items:center;gap:6px;padding:10px 14px;color:var(--brand);font-size:13px;font-weight:600;cursor:pointer;border:none;border-top:1px solid var(--border);background:none;width:100%;text-align:left;-webkit-tap-highlight-color:transparent}
.meal-log-add-btn:active{background:var(--brand-light)}
.meal-log-entry{display:flex;align-items:center;padding:9px 14px;border-top:1px solid var(--border);gap:10px}

/* Food panel — expands inline below the action buttons */
.food-panel{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r);margin-bottom:14px;
  overflow:hidden;
}
.food-panel-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--border);
  font-size:14px;font-weight:700;background:var(--surface2);
}
.food-panel-header .food-panel-close{
  background:none;border:none;font-size:18px;cursor:pointer;
  color:var(--text3);padding:2px 4px;line-height:1;
}
.food-panel > div:last-child{padding:12px 14px 0}

/* Food search results */
.food-result-item{
  display:flex;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--border);cursor:pointer;gap:10px;
  -webkit-tap-highlight-color:transparent;transition:background .1s;
}
.food-result-item:active,.food-result-item.active{background:var(--brand-light)}
.food-result-item.active{border-radius:var(--r-sm) var(--r-sm) 0 0;border-bottom-color:transparent}

/* Inline food selector — expands directly below the tapped result */
.food-inline-sel{border-radius:0 0 var(--r-sm) var(--r-sm);margin-bottom:2px;overflow:hidden}
.food-result-item:last-child{border-bottom:none}

/* Meal list items in the food panel */
.food-meal-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.food-meal-item:last-child{border-bottom:none}

/* Check-in number buttons */
.ci-num-btn{
  flex:1;height:36px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface2);
  color:var(--text2);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .12s;
  -webkit-tap-highlight-color:transparent;
}
.ci-num-btn:hover{border-color:var(--brand);color:var(--brand)}
.ci-num-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* MISC */
.hidden{display:none!important}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.text-amber{color:var(--amber)}
.text-blue{color:var(--blue)}
.text-muted{color:var(--text2)}
.mb-0{margin-bottom:0}
.mb-8{margin-bottom:8px}
.mb-14{margin-bottom:14px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.flex{display:flex}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-8{gap:8px}.gap-12{gap:12px}
.fw-600{font-weight:600}
.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-18{font-size:18px}

/* ══════════════════════════════════════════════════════════════════════════
   2026 REDESIGN COMPONENTS
   Shared pieces for the calm card-based layout: settings rows, day pills,
   segmented controls, chat bubbles and the profile landing page.
   ══════════════════════════════════════════════════════════════════════════ */

/* Settings-style tappable rows (Profile landing, and anywhere a value + chevron
   reads better than a form) */
.rows-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin:0 4px 7px}
.rows-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:14px}
.row-nav{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;border-bottom:1px solid var(--border);background:var(--surface);width:100%;border-left:none;border-right:none;border-top:none;text-align:left;font-family:inherit;-webkit-tap-highlight-color:transparent}
.row-nav:last-child{border-bottom:none}
.row-nav:active{background:var(--surface2)}
.row-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px}
.row-ic i{font-size:17px}
.row-body{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:600;line-height:1.25;color:var(--text)}
.row-sub{font-size:12px;color:var(--text2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-chev{color:var(--text3);font-size:16px;flex-shrink:0}

/* Sub-view back header (Profile detail screens) */
.subview-head{display:flex;align-items:center;gap:10px;padding:2px 2px 14px}
.subview-back{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);flex-shrink:0;font-size:17px;-webkit-tap-highlight-color:transparent}
.subview-title{font-size:19px;font-weight:800;letter-spacing:-.3px}

/* Segmented control (Plan tab) */
.seg{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px;gap:3px;margin-bottom:14px}
.seg-btn{flex:1;min-width:0;padding:8px 4px;border:none;border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;background:none;color:var(--text2);display:flex;align-items:center;justify-content:center;gap:5px;-webkit-tap-highlight-color:transparent}
.seg-btn i{font-size:15px}
.seg-btn.on{background:var(--brand);color:#fff}

/* Chat bubbles (Messages) */
.bubble{max-width:82%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.5;margin-bottom:6px;word-wrap:break-word}
.bubble-coach{background:var(--surface2);border:1px solid var(--border);border-bottom-left-radius:5px;margin-right:auto}
.bubble-me{background:var(--brand);color:#fff;border-bottom-right-radius:5px;margin-left:auto}
.bubble-time{font-size:10.5px;color:var(--text3);margin:0 4px 10px}
.bubble-day{text-align:center;font-size:11px;color:var(--text3);margin:6px 0 12px}

/* Meal filter pills (Meals tab) — keeps the .tab class the JS toggles */
.meal-pills{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;margin-bottom:14px;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.meal-pills::-webkit-scrollbar{display:none}
.meal-pills .tab{flex:0 0 auto;padding:7px 14px;border:1px solid var(--border);border-radius:20px;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer;background:var(--surface);box-shadow:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.meal-pills .tab.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:none}

/* Page heading used by the redesigned tabs */
.tab-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px 12px}
.tab-head h2{font-size:22px;font-weight:800;letter-spacing:-.3px}

/* Round avatar chip with initials */
.init-avatar{border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}

/* Toast ──
   Mirrors the coach portal's toast. z-index sits above the login overlay
   (9999) so the age-gate and terms messages are visible over it. */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:11px 22px;border-radius:10px;font-size:13px;font-weight:500;z-index:10000;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18);max-width:calc(100vw - 32px);text-align:center}
#toast.show{opacity:1}

/* Adaptive target cards — the morning banner, the evening card, the Sunday
   summary. They arrive rather than appearing: a card that pops into a screen
   someone is already reading is startling, and this one is asking a question. */
@keyframes adaptive-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.adaptive-in{animation:adaptive-in 200ms ease-out}
@media (prefers-reduced-motion:reduce){
  .adaptive-in{animation:none}
}

/* On/off switch — the barcode scanner preference in Profile › Preferences */
.nc-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.nc-switch-label{font-size:13px;font-weight:600}
.nc-switch{position:relative;flex-shrink:0;display:inline-flex}
.nc-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.nc-switch-track{display:block;width:44px;height:26px;border-radius:13px;background:var(--border);transition:background .15s}
.nc-switch-thumb{display:block;width:22px;height:22px;margin:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.nc-switch input:checked + .nc-switch-track{background:var(--green)}
.nc-switch input:checked + .nc-switch-track .nc-switch-thumb{transform:translateX(18px)}
.nc-switch input:focus-visible + .nc-switch-track{outline:2px solid var(--brand);outline-offset:2px}