:root{
  --bg:#EDEEE5; --panel:#F7F7F1; --ink:#24261F; --ink-soft:#6B6E60; --line:#D9DACB;
  --green:#4B6B4B; --green-dim:#DCE4D6;
  --carb:#C89B3C; --carb-dim:#F2E5C4;
  --fiber:#2E8B7A; --fiber-dim:#D6EAE5;
  --protein:#3E6B8A; --protein-dim:#DAE6EC;
  --fat:#B5533C; --fat-dim:#F2DAD2;
  --danger:#A83B32; --radius:3px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; min-height:100vh; padding:24px 20px 60px;}
.wrap{max-width:1200px; margin:0 auto;}

header{display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
h1{font-family:'Fraunces',serif; font-weight:700; font-size:2.1rem; margin:0; letter-spacing:-0.01em;}
h1 span{color:var(--green); font-style:italic; font-weight:600;}
.tag{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em;}
.disclaimer{font-size:0.76rem; color:var(--ink-soft); max-width:480px; line-height:1.45; font-style:italic;}

/* tabs */
.tabbar{display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--line);}
.tabbtn{background:none; border:none; font-family:'Fraunces',serif; font-size:1.02rem; padding:9px 16px 11px; cursor:pointer; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabbtn.active{color:var(--ink); border-bottom-color:var(--green); font-weight:600;}
.tabbtn:hover{color:var(--ink);}
.tabpanel{display:none;}
.tabpanel.active{display:block;}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 20px;}
.panel h2{font-family:'Fraunces',serif; font-size:1.15rem; margin:0 0 4px; display:flex; align-items:baseline; gap:8px;}
.panel h2 .num{color:var(--green); font-family:'IBM Plex Mono',monospace; font-size:0.85rem;}
.subtext{font-size:0.78rem; color:var(--ink-soft); margin:0 0 14px;}

input[type=text], input[type=number], input[type=date], select{
  font-family:'Inter',sans-serif; font-size:0.85rem; border:1px solid var(--line); background:#fff;
  border-radius:var(--radius); padding:8px 10px; color:var(--ink);
}
textarea{font-family:'Inter',sans-serif; font-size:0.85rem; border:1px solid var(--line);
  background:#fff; border-radius:var(--radius); padding:8px 10px; color:var(--ink);
  width:100%; resize:vertical;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--green); outline-offset:1px;}
button{font-family:'Inter',sans-serif; font-weight:600; font-size:0.82rem; border:1px solid var(--ink); background:var(--ink); color:#fff; border-radius:var(--radius); padding:8px 14px; cursor:pointer;}
button:hover{background:#000;}
button.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
button.ghost:hover{border-color:var(--ink); background:#fff;}
button.small{padding:4px 9px; font-size:0.72rem;}
button:disabled{opacity:0.4; cursor:not-allowed;}
button:disabled:hover{background:var(--ink);}
button.active-toggle{background:var(--green); border-color:var(--green);}
button:focus-visible{outline:2px solid var(--green); outline-offset:2px;}

/* ===== TRACK TAB ===== */
.trackhead{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px;}
.datenavgroup{display:flex; gap:2px; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; padding:2px;}
.datenavgroup input[type="date"]{border:none; background:transparent; flex:0 0 auto; width:auto; padding:6px 8px;}
.datenavgroup button{border:none; border-radius:0; background:transparent; color:var(--ink); padding:6px 10px; margin:0; font-weight:600; cursor:pointer;}
.datenavgroup button:hover{background:#fff;}
.rangegroup{display:flex; gap:4px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.rangegroup button{border:none; border-radius:0; background:#fff; color:var(--ink);}
.rangegroup button.active-toggle{background:var(--green); color:#fff;}
.modegroup{display:flex; gap:4px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:10px; width:fit-content;}
.modegroup button{border:none; border-radius:0; background:#fff; color:var(--ink);}
.modegroup button.active-toggle{background:var(--green); color:#fff;}
.trackgrid{display:grid; grid-template-columns:1fr 1.3fr; gap:20px;}
@media (max-width:920px){ .trackgrid{grid-template-columns:1fr;} }

.logsearchrow{display:flex; gap:8px; margin-bottom:8px;}
.logsearchrow input{flex:1;}
/* flex-start so the grams box and Add button keep their own height when the
   food picker expands into a list during a search */
.addtolog{display:flex; gap:8px; margin-bottom:10px; align-items:flex-start;}
.addtolog select{flex:1;}
.addtolog input{width:72px;}
.logrows{border-top:1px solid var(--line);}
.logrow{display:flex; justify-content:space-between; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); gap:8px;}
.logrow .lname{font-size:0.85rem; font-weight:600;}
.logrow .lgrams{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--ink-soft);}
.logrow .lmacro{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--ink-soft); opacity:0.75; margin-top:2px;}
.logrow .rm{cursor:pointer; color:var(--danger); font-size:1rem; border:none; background:none; font-weight:700; padding:2px 6px;}
.emptylog{color:var(--ink-soft); font-size:0.85rem; padding:14px 4px; font-style:italic;}

.totals{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0;}
.totalcard{border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; background:#fff;}
.totalcard .lbl{font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
.totalcard .val{font-family:'IBM Plex Mono',monospace; font-size:1.2rem; font-weight:600; margin-top:2px;}
.totalcard.accent-carb .val{color:var(--carb);}
.totalcard.accent-fiber .val{color:var(--fiber);}
.totalcard.accent-protein .val{color:var(--protein);}
.totalcard.accent-fat .val{color:var(--fat);}
.totalcard.accent-fat{background:var(--fat-dim); border-color:var(--fat);}
.fatbreak{display:flex; gap:10px; margin:6px 0 4px; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--ink-soft);}
.fatbreak span b{color:var(--ink);}

/* meal builder preview — mirrors the dashboard totals */
.mealtotals{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:2px 0 6px;}
@media (max-width:620px){ .mealtotals{grid-template-columns:repeat(2,1fr);} }
.mealtotals .totalcard{padding:7px 9px;}
.mealtotals .totalcard .lbl{font-size:0.6rem;}
.mealtotals .totalcard .val{font-size:0.95rem;}
.mealmicros{display:grid; grid-template-columns:repeat(3,1fr); gap:0 14px; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--ink-soft);}
@media (max-width:620px){ .mealmicros{grid-template-columns:repeat(2,1fr);} }
.mealmicros .mrow{display:flex; justify-content:space-between; align-items:baseline; gap:8px; border-bottom:1px dotted var(--line); padding:3px 0;}
.mealmicros .mrow b{color:var(--ink); font-weight:600; white-space:nowrap;}
.mealsub{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--ink-soft); margin-top:8px;}
.mealsechead{font-family:'IBM Plex Mono',monospace; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin:12px 0 2px;}
/* inside the modal the box sits low — open tooltips upward so they aren't clipped */
.mealpreviewbox .infobox{top:auto; bottom:100%; margin:0 0 6px; width:240px;}
.mealpreviewbox .mrow:nth-child(-n+3) .infobox{top:100%; bottom:auto; margin:6px 0 0;}

/* info tooltips (totals cards + nutrient table) */
.hasinfo{position:relative; cursor:help;}
.hasinfo .lbl{border-bottom:1px dotted var(--ink-soft);}
.infolabel{border-bottom:1px dotted var(--ink-soft); cursor:help;}
.infobox{display:none; position:absolute; top:100%; left:0; margin-top:6px; width:260px; max-width:75vw; background:#242621; color:#f4f1e8; padding:11px 13px; border-radius:8px; font-size:0.68rem; line-height:1.5; font-family:'IBM Plex Mono',monospace; text-transform:none; letter-spacing:normal; box-shadow:0 8px 24px rgba(0,0,0,0.35); z-index:80; white-space:normal; max-height:60vh; overflow-y:auto;}
.hasinfo:hover .infobox, .infolabel:hover .infobox{display:block;}
.infobox .ttitle{display:block; font-family:'Fraunces',serif; font-size:0.88rem; color:#fff; margin-bottom:5px;}
.infobox p{margin:4px 0;}
.infobox b{color:#8fd18a;}
.targettable td{position:relative;}

/* chart */
.chartwrap{margin-top:6px;}
.chartcontrols{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.chartcontrols select{font-size:0.75rem;}
.chart{display:flex; align-items:flex-end; gap:5px; height:130px; border-bottom:1px solid var(--ink); padding:0 2px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.bar{width:100%; background:var(--green); border-radius:2px 2px 0 0; min-height:2px;}
.bar-label{font-family:'IBM Plex Mono',monospace; font-size:0.6rem; color:var(--ink-soft); margin-top:4px; writing-mode:vertical-rl; transform:rotate(180deg); max-height:40px;}

/* nutrient target table */
.targettable{width:100%; border-collapse:collapse; margin-top:8px; font-size:0.82rem;}
.targettable th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:0.65rem; text-transform:uppercase; color:var(--ink-soft); padding:4px 6px; border-bottom:1px solid var(--ink);}
.targettable td{padding:6px 6px; border-bottom:1px solid var(--line); vertical-align:middle;}
.targettable .tval{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; white-space:nowrap;}
.tbarbg{background:#fff; border:1px solid var(--line); border-radius:2px; height:8px; width:100%; overflow:hidden; min-width:70px;}
.tbarfill{height:100%; border-radius:2px;}
.pct-ok{color:var(--green);}
.pct-mid{color:#8a6a1f;}
.pct-low{color:var(--danger);}

/* hydration */
.hydration-box{margin:14px 0; border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:#fff;}
.hydro-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:8px; flex-wrap:wrap;}
.hydro-head h3{font-family:'Fraunces',serif; font-size:1rem; margin:0;}
.hydro-total{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:0.85rem; color:var(--protein);}
.hydro-quickrow{display:flex; gap:6px; align-items:center; margin-top:10px; flex-wrap:wrap;}
.hydro-quickrow input{width:70px;}
.hydro-entries{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.hydro-chip{display:inline-flex; align-items:center; gap:4px; background:var(--protein-dim); color:var(--protein); font-family:'IBM Plex Mono',monospace; font-size:0.72rem; padding:3px 4px 3px 9px; border-radius:12px;}
.hydro-chip .rm{cursor:pointer; color:var(--protein); font-size:0.9rem; border:none; background:none; font-weight:700; padding:0 5px;}

/* insulin */
.insulin-box{margin-top:16px; border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:#fff;}
.insulin-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.insulin-head h3{font-family:'Fraunces',serif; font-size:1rem; margin:0;}
.insulin-level{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:0.85rem; padding:3px 10px; border-radius:2px;}
.lvl-low{background:var(--fiber-dim); color:var(--fiber);}
.lvl-moderate{background:var(--carb-dim); color:#8a6a1f;}
.lvl-high{background:var(--fat-dim); color:var(--danger);}
.insulin-note{font-size:0.74rem; color:var(--ink-soft); line-height:1.5;}

/* ===== DATABASE TAB ===== */
.searchrow{display:flex; gap:8px; margin-bottom:12px;}
.searchrow input{flex:1;}
.foodlist{max-height:560px; overflow-y:auto; border-top:1px solid var(--line);}
.cat-head{display:flex; justify-content:space-between; align-items:center; margin:16px 0 2px; padding:4px 4px 5px; border-bottom:2px solid var(--line); font-size:0.72rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft);}
.cat-head:first-child{margin-top:4px;}
.cat-head .cat-count{font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:0;}
.fooditem{display:flex; justify-content:space-between; align-items:center; padding:9px 4px; border-bottom:1px solid var(--line); gap:8px;}
.fooditem:hover{background:var(--green-dim);}
.food-main{display:flex; flex-direction:column; gap:1px; min-width:0;}
.food-name{font-size:0.87rem; font-weight:600;}
.food-meta{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--ink-soft);}
.custom-flag{font-size:0.6rem; font-family:'IBM Plex Mono',monospace; color:var(--green); border:1px solid var(--green); border-radius:2px; padding:0 4px; margin-left:6px;}
.food-actions{display:flex; gap:5px; flex-shrink:0; align-items:center;}
.star-btn{background:none; border:none; color:var(--carb); font-size:1.05rem; line-height:1; cursor:pointer; padding:2px 4px; font-weight:400;}
.star-btn.is-fav{color:var(--carb);}
.star-btn:not(.is-fav){color:var(--line);}
.star-btn:hover{color:var(--carb);}
#favFilterBtn.active-toggle{background:var(--carb); border-color:var(--carb); color:#fff;}

/* modal */
.overlay{position:fixed; inset:0; background:rgba(36,38,31,0.5); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.overlay.open{display:flex;}
.modal{background:var(--panel); border:1px solid var(--ink); border-radius:var(--radius); padding:22px; width:100%; max-width:540px; max-height:88vh; overflow-y:auto;}
.modal h3{font-family:'Fraunces',serif; margin:0 0 14px;}
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.formgrid.tri{grid-template-columns:1fr 1fr 1fr;}
.formgrid .full{grid-column:1/-1;}
.formgrid label{font-size:0.7rem; color:var(--ink-soft); display:block; margin-bottom:3px; font-family:'IBM Plex Mono',monospace;}
.formgrid input, .formgrid select{width:100%;}
.modal-actions{display:flex; justify-content:space-between; margin-top:16px;}
.usda-box{background:var(--green-dim); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:14px;}
.usda-box>label{font-size:0.7rem; color:var(--ink-soft); display:block; margin-bottom:6px; font-family:'IBM Plex Mono',monospace;}
.usda-searchrow{display:flex; gap:8px;}
.usda-searchrow input{flex:1;}
.usda-status{font-size:0.76rem; color:var(--ink-soft); margin-top:6px; min-height:1em;}
.usda-results{max-height:180px; overflow-y:auto; margin-top:6px;}
.usda-result{padding:7px 8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); font-size:0.82rem; cursor:pointer; margin-bottom:5px;}
.usda-result:hover{border-color:var(--green); background:#fff;}
.usda-result .rtype{font-size:0.68rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; margin-left:6px;}
.usda-result-macros{font-size:0.72rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; margin-top:3px;}
.modal-actions .right{display:flex; gap:8px;}
details{margin-top:14px; border-top:1px solid var(--line); padding-top:10px;}
details summary{cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--green); margin-bottom:10px;}

/* ===== PROFILE TAB ===== */
.profileform{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:520px;}
.profileform label{font-size:0.72rem; color:var(--ink-soft); display:block; margin-bottom:4px; font-family:'IBM Plex Mono',monospace;}
.profileform input, .profileform select{width:100%;}
.savedmark{font-size:0.75rem; color:var(--green); margin-left:10px; font-family:'IBM Plex Mono',monospace; opacity:0; transition:opacity 0.3s;}
.savedmark.show{opacity:1;}
.reftable{width:100%; border-collapse:collapse; margin-top:18px; font-size:0.82rem; max-width:560px;}
.reftable th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:0.65rem; text-transform:uppercase; color:var(--ink-soft); padding:5px 6px; border-bottom:1px solid var(--ink);}
.reftable td{padding:5px 6px; border-bottom:1px solid var(--line);}

/* ===== MEALS ===== */
.ingredientrow{display:flex; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line);}
.ingredientrow select{flex:1;}
.ingredientrow input{width:70px;}
.ingredientrow .rm{cursor:pointer; color:var(--danger); font-size:1rem; border:none; background:none; font-weight:700; padding:2px 6px;}
.mealpreviewbox{margin-top:16px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);}

/* ===== GUIDE ===== */
.guidegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-top:12px;}
.guidecard{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:#fff;}
.guidecard h4{font-family:'Fraunces',serif; font-size:0.92rem; margin:0 0 6px; color:var(--green);}
.guidecard p{font-size:0.78rem; line-height:1.5; margin:0; color:var(--ink);}
.guidecard .gcat{font-family:'IBM Plex Mono',monospace; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:3px; display:block;}

footer{margin-top:30px; text-align:center; font-size:0.72rem; color:var(--ink-soft);}

/* ===== OFFLINE / SYNC INDICATOR ===== */
.sync-pill{
  position:fixed; left:16px; bottom:16px; z-index:200; display:none;
  border:1.5px solid var(--line); background:var(--panel); color:var(--ink);
  padding:7px 12px; border-radius:999px; font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem; font-weight:600; box-shadow:0 4px 14px rgba(36,38,31,.12);
}
.sync-pill.warn{border-color:var(--carb); color:var(--carb);}
/* Permanent data-loss warning: same visual language as the sync pill, but its
   own corner so the two never overlap. NEVER cleared by syncNow(); the user
   dismisses it with the x. */
.sync-pill.data-loss{
  left:auto; right:16px; bottom:16px;
  display:none; align-items:center; gap:8px; max-width:min(360px,90vw);
  border-color:var(--danger); color:var(--danger);
}
.sync-pill.data-loss.show{display:flex;}
.data-loss-close{
  border:none; background:none; color:inherit; cursor:pointer;
  font-size:0.9rem; font-weight:800; line-height:1; padding:0 0 0 2px;
}
/* Calm, actionable notice for a new SW version — distinct from the red
   data-loss warning above. Stacked over syncPill's corner (not dataLossPill's)
   so a routine update never reads as an alarm. */
.sync-pill.update{
  display:none; bottom:60px; cursor:pointer;
  border-color:var(--green); color:var(--green);
}
.sync-pill.update.show{display:flex;}

/* ===== SUMMARY ===== */
.tracksummary{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:14px;}
.tracksummary > div{background:var(--panel); padding:8px 10px; display:flex; flex-direction:column; gap:1px;}
.tracksummary .lbl{font-family:'IBM Plex Mono',monospace; font-size:0.56rem; text-transform:uppercase;
  letter-spacing:0.07em; color:var(--ink-soft);}
.tracksummary .val{font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.2;}
.tracksummary .val small{font-size:0.68rem; font-weight:400; color:var(--ink-soft);}

/* ===== PHONE ===== */
@media (max-width:699px){
  body{padding:12px 12px 78px;}
  header{flex-direction:column; align-items:center; gap:4px; text-align:center;}
  h1{font-size:1.4rem;}
  .disclaimer{display:none;}
  .tabbar{position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0;
    background:var(--panel); border-top:1px solid var(--line); border-bottom:none;
    padding:6px 2px calc(6px + env(safe-area-inset-bottom)); gap:0;}
  .tabbtn{flex:1; font-size:0.62rem; font-family:'Inter',sans-serif; font-weight:600;
    padding:8px 2px; border-bottom:none; min-height:44px;}
  .tabbtn.active{color:var(--green); border-bottom:none;}
  .trackhead{gap:8px;}
  .trackhead .rangegroup{width:100%;}
  .trackhead .rangegroup button{flex:1;}
  #exportCsvBtn, #exportCsvAllBtn{flex:1; margin-left:0 !important;}
  .datenavgroup{width:100%; justify-content:space-between;}
  .trackgrid, .trackgrid > .panel, .addtolog, .addtolog select, .addtolog input{min-width:0;}
  /* The tab bar is fixed to the bottom on phones, so a pill anchored at
     bottom:16px sits on top of it and eats the taps — losing signal would
     otherwise strand the user on whatever tab they were on. Lift every pill
     clear of the bar; the update pill keeps its 44px stack offset. */
  .sync-pill,
  .sync-pill.data-loss{bottom:calc(70px + env(safe-area-inset-bottom));}
  .sync-pill.update{bottom:calc(114px + env(safe-area-inset-bottom));}
  /* Two across, with Calories spanning the row — the phone Totals layout from
     the spec. Without this the three columns fall to their min-content floor. */
  .totals{grid-template-columns:1fr 1fr;}
  .totals #card-calories{grid-column:1 / -1;}
}

.subnav{display:none;}
@media (max-width:699px){
  .subnav{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px;}
  .subnav button{font-family:'Fraunces',serif; font-size:0.95rem; background:none; border:none;
    padding:8px 14px 10px; color:var(--ink-soft); border-bottom:2px solid transparent;
    margin-bottom:-1px; min-height:42px;}
  .subnav button.active-sub{color:var(--ink); font-weight:600; border-bottom-color:var(--green);}
  .subview{display:none;}
  .subview.showing{display:block;}
}

.nutgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:5px;}
@media (max-width:699px){ .nutgrid{grid-template-columns:repeat(3,1fr);} }
/* cursor:pointer, not help: the gauge tooltip opens on click (see the
   .gauge.open handler in app.js) and there is no :hover rule for it, so
   cursor:help promised desktop a hover tooltip that never appeared. Adding
   hover instead was rejected — 21 gauges in a tight grid would flicker
   tooltips as the pointer crossed them. */
.gauge{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:5px 6px 6px; display:flex; flex-direction:column; gap:3px; min-width:0;
  position:relative; cursor:pointer;}
.gauge .g-top{display:flex; justify-content:space-between; align-items:flex-start; gap:4px;}
.gauge .g-n{font-size:0.63rem; font-weight:600; line-height:1.25; overflow-wrap:anywhere; min-width:0;}
.gauge .g-p{font-family:'IBM Plex Mono',monospace; font-size:0.66rem; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1; flex:0 0 auto;}
.gauge .g-v{font-family:'IBM Plex Mono',monospace; font-size:0.55rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gauge .g-b{height:4px; background:var(--line); border-radius:99px; overflow:hidden;}
.gauge .g-b i{display:block; height:100%; border-radius:99px;}
.gauge.limit{border-style:dashed;}
.gauge.open .infobox{display:block;}
.gauge .g-p.pct-ok{color:var(--green);}
.gauge .g-p.pct-mid{color:var(--carb);}
.gauge .g-p.pct-low{color:var(--danger);}

/* The gauge tooltip still carried the table-era `width:260px; left:0`, but a
   gauge is ~101px wide on a phone and ~151px on desktop, so every column but
   the first pushed the box past the viewport and gave the whole page a
   horizontal scrollbar. Both rules are scoped to `.gauge .infobox` so the
   totals-card and recipe-preview tooltips keep the geometry they always had. */
@media (min-width:700px){
  /* Last column of the 4-up grid: anchor to the gauge's right edge so the box
     grows inward instead of off the panel. */
  .nutgrid .gauge:nth-child(4n) .infobox{left:auto; right:0;}
}
@media (max-width:699px){
  /* No column is wide enough to hang a 260px box off, so span the viewport
     with a 12px margin and sit above the fixed tab bar. */
  .gauge .infobox{position:fixed; left:12px; right:12px; width:auto; max-width:none;
    top:auto; bottom:calc(70px + env(safe-area-inset-bottom)); margin:0;}
}

/* ===== DATABASE / MEALS / GUIDE / PROFILE / MODAL — PHONE ===== */
@media (max-width:699px){
  .searchrow{flex-wrap:wrap;}
  .searchrow input{flex:1 1 100%;}
  .fooditem{flex-direction:column; align-items:flex-start; gap:6px;}
  .food-actions{width:100%; justify-content:flex-end;}
  .profileform{grid-template-columns:1fr;}
  .overlay{padding:0;}
  .modal{max-width:none; border-radius:0; max-height:100vh; min-height:100vh;}
  .formgrid.tri{grid-template-columns:1fr 1fr;}
  .usda-searchrow{flex-wrap:wrap;}
  .usda-searchrow input{flex:1 1 100%;}
}