/* Apple polish (round 11). Universal rules apply to every skin (type, icons, radii, spacing, motion, sheets, banners);
   colour and background tweaks are Classic-only so each skin keeps its own themes and art. Loaded after glass.css. */
:root{--sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,sans-serif;--sfd:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro",system-ui,sans-serif;
  --r-s:10px;--r-m:16px;--r-l:22px;--spring:cubic-bezier(.32,.72,0,1);
  --sysGreen:#30d158;--sysBlue:#0a84ff;--sysOrange:#ff9f0a;--sysRed:#ff453a;--label2:rgba(235,235,245,.6);--label3:rgba(235,235,245,.3);--sep:rgba(84,84,88,.6)}
body[data-mode=light]{--sysGreen:#34c759;--sysBlue:#007aff;--sysOrange:#ff9500;--sysRed:#ff3b30;--label2:rgba(60,60,67,.6);--label3:rgba(60,60,67,.3);--sep:rgba(60,60,67,.29)}
html,body{font-family:var(--sf);letter-spacing:-.01em}
body[data-skin=classic]{--ac:var(--sysGreen);--warn:var(--sysOrange);--bad:var(--sysRed);--mut:var(--label2)}
/* Dynamic-Type-like scale: Large Title 34/41 bold, Title2 22, Headline 17 semibold, Body 17, Subhead 15, Footnote 13, Caption 12 */
h1,.logHead h1{font:700 34px/41px var(--sfd);letter-spacing:.01em}
.petName{font:700 34px/41px var(--sfd)!important;letter-spacing:.01em}
.eyebrow,.muted.tiny,small{font-size:13px;letter-spacing:0}
.card h2,.card h3,.cardHd,.sec h2{font:600 17px/22px var(--sf)}
/* numbers: tabular, SF Display, no glow */
.big,.hero .big,#heroNum,.mac b,.ddMh .k,.ddQ b,.xpN,.streak,#boardCount,.k{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.big,#heroNum{font-family:var(--sfd);font-weight:700;letter-spacing:-.02em}
.top *,.tabs *,.hero .big,#heroNum,.delta,h1,h2,.meLvl,.lvl,.card b{text-shadow:none!important}
/* radii: 3 steps, continuous-feel (larger radius + matching inner radii) */
.card,.hero{border-radius:var(--r-l)!important}
.mac,.ddMeal,.tile,.gc,.skinTile,.histDay{border-radius:var(--r-m)!important}
.ddQ,.ddB,.ddX,input,textarea,.bigIn{border-radius:var(--r-s)!important}
/* 8pt grid */
.card,.hero{padding:16px!important;margin-bottom:16px!important}
.macros{gap:8px!important}
.ddList{gap:8px}
/* one shadow language, no glows */
body[data-skin=classic] .card,body[data-skin=classic] .hero{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 8px 24px rgba(0,0,0,.18)!important}
body[data-skin=classic][data-mode=dark]{background:#000!important;background-image:radial-gradient(120% 60% at 50% -10%,rgba(48,209,88,.10),transparent 60%)!important}
.primary,.snackBtn{box-shadow:none!important}
/* press feel: every tappable scales, spring back */
button,.tile,.mac,.ddMh,[role=button]{transition:transform .35s var(--spring),opacity .2s}
button:active,.mac:active,[role=button]:active{transform:scale(.96)}
/* tab bar: SF-Symbol line icons, 10pt labels, tinted selection */
.tabs button{font:500 10px/12px var(--sf)!important;color:var(--label2)!important;gap:2px}
.tabs button.on{color:var(--ac)!important}
.tabs svg{width:26px;height:26px;display:block;margin:0 auto 2px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs .logTab{box-shadow:none!important}
.tabs .logTab svg{width:24px;height:24px;stroke:var(--on-ac,#000);stroke-width:2.4}
/* banners instead of pill toasts (all skins) */
.toast{border-radius:var(--r-l)!important;padding:14px 16px!important;font:600 15px/20px var(--sf)!important;width:min(358px,calc(100vw - 32px));text-align:left;
  background:color-mix(in srgb,var(--card2) 78%,transparent)!important;color:var(--tx);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:.5px solid rgba(255,255,255,.12)!important;box-shadow:0 10px 30px rgba(0,0,0,.35)!important}
#toasts,.toasts{top:calc(env(safe-area-inset-top) + 8px)!important;bottom:auto!important}
/* sheets: grabber + large detent */
.sheetBody{border-radius:var(--r-l) var(--r-l) 0 0!important}
.sheetBody::before{content:'';display:block;width:36px;height:5px;border-radius:3px;background:var(--label3);margin:-8px auto 12px}
/* chips & segmented: iOS segmented look */
.ddChips{background:rgba(118,118,128,.24);border-radius:9px;padding:2px;gap:0}
.ddChips button{flex:1;min-height:32px!important;border:0!important;border-radius:7px!important;background:none!important;font:600 13px var(--sf)!important;padding:0 6px!important}
.ddChips button.on{background:rgba(99,99,102,.9)!important;color:#fff!important;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.ddChips{min-height:36px}
.ddMeals button{min-height:44px;font:500 15px var(--sf)}
/* tap highlight + selection */
*{-webkit-tap-highlight-color:transparent}
.tabs,.top,button{-webkit-user-select:none;user-select:none}
@media (prefers-reduced-motion:reduce){button,.tile,.mac{transition:none}button:active{transform:none}}
.sheetBody{animation-timing-function:var(--spring)!important;animation-duration:.45s!important}
.sheetBg{background:rgba(0,0,0,.4)!important}
.tabs .logTab span{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.25)!important}
.tabs .logTab svg{margin:0}
.ddChips button{position:relative}.ddChips button::after{content:'';position:absolute;inset:-6px 0}

/* ---- round 11: next wins ---- */
/* toned-down glows everywhere: one soft neutral shadow instead of coloured halos */
body{--glow:rgba(0,0,0,.22)}
.meLvl{box-shadow:inset 0 1px 0 rgba(255,255,255,.3)!important;border-radius:var(--r-m)!important}
.chip.on,.chips button.on{box-shadow:none!important}
/* line icons */
.sfi{width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bigIn .ic .sfi{width:28px;height:28px;color:var(--ac)}
.ddB .sfi{width:20px;height:20px}
.stat b .sfi{color:var(--ac);margin-right:2px}
/* empty states: one icon, one line, one action */
.emptyState{padding:32px 16px!important}
.emptyState .em .sfi{width:44px;height:44px;color:var(--mut);stroke-width:1.5}
.emptyState b{font:600 17px/22px var(--sf)}
.emptyState p{font-size:15px;line-height:20px;max-width:300px;margin:0 auto}
/* decorative skin fonts stay in skin art; chrome headings use SF in every skin */
body .arcTitle,body .gcTx b,body .pbTx b,body .arcLock b,body .gcPlay{font-family:var(--sfd)!important;letter-spacing:0!important}
body .arcTitle{font-size:34px!important;font-weight:700!important;line-height:41px!important}
body .gcTx b,body .pbTx b,body .arcLock b{font-size:17px!important;font-weight:600!important;line-height:22px!important}
/* large titles that collapse into a compact nav bar */
#navBar{position:fixed;left:0;right:0;top:0;z-index:30;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;text-align:center;font:600 17px/22px var(--sf);color:var(--tx);
  background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:.5px solid var(--line);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .3s var(--spring)}
body.navCompact #navBar{opacity:1;transform:none}
body.navCompact .top{opacity:0;pointer-events:none}
.top{transition:opacity .2s}
.logHead h1{transition:opacity .2s}
body.navCompact .view.active .logHead h1{opacity:0}
/* sheet detents + grabber (all sheets) */
.sheetBody{max-height:calc(100dvh - env(safe-area-inset-top) - 10px);overflow-y:auto;overscroll-behavior:contain;transition:height .45s var(--spring),transform .45s var(--spring)}
.sheetBody[data-detent=medium]{height:58dvh}
.sheetBody[data-detent=large]{height:calc(100dvh - env(safe-area-inset-top) - 10px)}
.sheetBody.dragging,#v-log.dragging{transition:none!important}
.grab{position:sticky;top:-20px;height:28px;margin:-20px -16px 0;display:flex;justify-content:center;align-items:center;touch-action:none;cursor:grab;z-index:2}
.grab::before{content:'';width:36px;height:5px;border-radius:3px;background:var(--label3)}
.sheetBody::before{display:none!important}
/* add-food is presented as a sheet over the dashboard (medium / large detent) */
#logDim{position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .3s}
body[data-view=log] #logDim{opacity:1;pointer-events:auto}
body[data-view=log] #v-log{position:fixed;left:0;right:0;bottom:0;z-index:39;max-width:520px;margin:0 auto;background:var(--bg);border-radius:var(--r-l) var(--r-l) 0 0;
  padding:0 16px calc(env(safe-area-inset-bottom) + 16px);scroll-padding-bottom:calc(env(safe-area-inset-bottom) + 8px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -10px 40px rgba(0,0,0,.35);
  top:calc(env(safe-area-inset-top) + 10px);transition:top .45s var(--spring),transform .45s var(--spring);animation:sheetUp .45s var(--spring)}
body[data-view=log] #v-log[data-detent=medium]{top:38dvh}
body[data-view=log] #v-log > .grab{position:sticky;top:0;margin:0 -16px 4px;background:inherit;height:24px}
body[data-view=log][data-pv] main > .view[data-was]{display:block}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
body[data-skin=classic] #v-log{background:var(--glassSheet,rgba(20,22,30,.82));-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%)}
/* matched transitions */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-group(petHero),::view-transition-group(gameCard){animation-duration:.42s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .sheetBody,#v-log,#navBar{transition:none!important;animation:none!important}}
@media (prefers-reduced-transparency:reduce){#navBar,.toast,body[data-skin=classic] #v-log{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--card2)!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#navBar,.toast,body[data-skin=classic] #v-log{background:var(--card2)!important}}

/* modal sheets sit over the tab bar (iOS): .sheet z40 > #v-log z39 > #logDim z38 > .tabs */

/* ===== Round 13 (first-run test fixes) ===== */
/* 5) pinned verdict + Log footer at the bottom of the add-food sheet */
#logFoot{position:sticky;bottom:0;z-index:3;margin:12px -16px 0;padding:10px 16px calc(env(safe-area-inset-bottom) + 12px);background:var(--bg);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
#logFoot[hidden]{display:none}
#logFoot .verdict{margin:0;padding:10px 12px}
#logFoot .verdict span{display:block}
#logFoot #logIt{width:100%;min-height:50px}
#logFoot #logIt:disabled{opacity:1;background:var(--card2);color:var(--mut);box-shadow:none;cursor:not-allowed}
.verdict.pend{background:color-mix(in srgb,var(--warn) 14%,var(--card));border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.verdict.pend .vi{background:var(--warn);color:#111}
body[data-view=log] #v-log:has(#logFoot:not([hidden])){padding-bottom:0}
body[data-skin=classic] #logFoot{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}
@media (prefers-reduced-transparency:reduce){body[data-skin=classic] #logFoot{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body[data-skin=classic] #logFoot{background:var(--bg)}}
/* 5) the grabber header is opaque so scrolled rows (RE-LOG) never show through it */
body[data-view=log] #v-log > .grab{background:var(--bg);z-index:3}
body[data-skin=classic][data-view=log] #v-log > .grab{background:color-mix(in srgb,var(--bg) 92%,transparent)}
/* 1/2) unknown foods: kcal + optional macros */
.unkRow{border-bottom:1px solid var(--line);padding-bottom:8px}
.unkRow .it.unk{border-bottom:0}
.unkMac{display:flex;align-items:center;gap:6px;padding:0 0 2px}
.unkMac .tiny{flex:0 0 auto;margin-right:2px}
.unkMac label{flex:1;min-width:0}
.unkMac input{width:100%;min-height:44px;padding:8px 10px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--card2);color:var(--tx);font:500 15px var(--sf)}
.muQ{font-style:normal;color:var(--warn);font-size:.8em;margin-left:1px}
.muNote{margin:6px 2px 0;font-size:12px;color:color-mix(in srgb,var(--mut) 60%,var(--tx))}
.muNote:before{content:"ⓘ ";}
#macNote[hidden]{display:none}
/* 6) banners sit below the XP header; tap/swipe to dismiss */
#toasts,.toasts{top:var(--toastTop,calc(env(safe-area-inset-top) + 8px))!important}
.toast{pointer-events:auto;cursor:pointer;touch-action:none}
/* 8) light mode: AA contrast for the Daily Plate + Wrap-up; per-skin hue kept */
body[data-mode=light] .tile small{color:color-mix(in srgb,var(--mut) 45%,var(--tx))}
body[data-mode=light] .tile span{filter:grayscale(.35);opacity:1}
body[data-mode=light] .tile:not(.lit){border-color:color-mix(in srgb,var(--mut) 35%,var(--line))}
body[data-mode=light] #closeDay{color:color-mix(in srgb,var(--mut) 45%,var(--tx));opacity:1}
/* 8) segmented controls: the selected segment is unmistakable in every skin and mode */
.seg button.on{font-weight:700;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ac) 70%,transparent),0 1px 3px rgba(0,0,0,.22)!important}
body:not([data-skin=bass]) .seg button.on{color:var(--tx)!important}
body:not([data-skin=bass]) .seg button:not(.on){color:color-mix(in srgb,var(--mut) 80%,var(--tx))}
.welcome .logo img{width:72px;height:72px;border-radius:22%;display:block;margin:0 auto;box-shadow:0 6px 18px rgba(0,0,0,.25)}
#camSub{white-space:normal;overflow:visible;text-overflow:clip}