/* Weight tracking PWA — exact styles from the Claude Design prototype.
   Source of truth: ../../design/extracted.template.html (<style> block) + design tokens. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root{
  /* accent — Tafel Zoetermeer (per-tenant overridable) */
  --ac:#F26A1F; --ac-deep:#C2470E; --ac-soft:#FFF1E6; --ac-border:#FBD3B0; --ac-ink:#5A1F02;
  /* motion */
  --dur-1:80ms; --dur-2:160ms; --dur-3:240ms; --dur-4:380ms; --dur-5:560ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-snap:cubic-bezier(0.2,0.9,0.1,1.05);
  --ease-in-out:cubic-bezier(0.87,0,0.13,1);
  --ease-in:cubic-bezier(0.7,0,0.84,0);
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{background:#FAFAF7;font-family:'General Sans',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
/* On wider screens show the app as a centered phone-column on a warm canvas; on
   mobile the body matches the app so there's no stray frame around the edges. */
@media (min-width:460px){ body{background:#E8E6DF;} }

@keyframes pop{0%{transform:scale(1);}45%{transform:scale(1.18);}100%{transform:scale(1);}}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes scanY{0%{top:8%;}100%{top:88%;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes riseIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes screenIn{from{opacity:0;}to{opacity:1;}}
@keyframes cardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes growX{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.001ms!important;transition-duration:0.001ms!important;}}

/* App shell — the phone-inner, full-screen as a real mobile web app (no bezel). */
/* height (niet alleen min-height): anders groeit de shell mee met een lange
   pagina en zakt de bottom-nav onder de vouw. */
.app{
  position:relative; max-width:430px; margin:0 auto; height:100dvh;
  background:#FAFAF7; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 0 60px rgba(27,26,23,0.06);
}
/* min-height:0 laat dit flex-item krimpen tot onder zijn inhoud, zodat de
   pagina hierbinnen scrollt in plaats van de nav weg te duwen. */
.scrollarea{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;}
.scrollarea::-webkit-scrollbar{width:0;height:0;}
/* Pagina komt op met een pure opacity-fade — geen transform, dus niets beweegt/schokt. */
.scrollarea > div:not([style*="absolute"]){animation:screenIn var(--dur-3) var(--ease-out) both;}

.stagger > *{animation:cardIn var(--dur-4) var(--ease-out) both;}
.stagger > *:nth-child(1){animation-delay:40ms;}
.stagger > *:nth-child(2){animation-delay:100ms;}
.stagger > *:nth-child(3){animation-delay:160ms;}
.stagger > *:nth-child(4){animation-delay:220ms;}
.stagger > *:nth-child(5){animation-delay:280ms;}
.stagger > *:nth-child(6){animation-delay:340ms;}

button{transition:transform var(--dur-1) var(--ease-snap),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out);}
button:active{transform:scale(0.96);}
.lift{transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out);}
.lift:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(27,26,23,0.08),0 1px 2px rgba(27,26,23,0.04);border-color:#D6D2C7;}
.lift:active{transform:translateY(0) scale(0.985);}
.bar-fill{transform-origin:left center;animation:growX var(--dur-5) var(--ease-out) both;}
input{transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);}
input:not([inputmode="decimal"]):focus{border-color:var(--ac,#F26A1F)!important;box-shadow:0 0 0 3px rgba(242,106,31,0.22)!important;}
a{color:inherit;text-decoration:none;}

/* overlays anchored to the app column */
.overlay{position:fixed;inset:0;z-index:30;max-width:430px;margin:0 auto;}
.toast-wrap{position:fixed;top:24px;left:0;right:0;z-index:45;max-width:430px;margin:0 auto;padding:0 16px;}

/* Géén cross-document view-transitions: de snapshot-compositing veroorzaakt op iOS
   Safari een zichtbare schok bij paginaovergangen. De .scrollarea-fade hierboven
   verzorgt de overgang. */

/* Active bottom-nav tab gets a subtle spring-lift. */
[data-nav-link][aria-current="page"] svg{transform:translateY(-2px) scale(1.08);transition:transform var(--dur-3) var(--ease-spring);}

/* New feed messages fading in when they arrive via polling. */
.feed-msg.is-new{animation:cardIn var(--dur-3) var(--ease-out) both;}

/* Confetti canvas for the weigh-in celebration — above content, never blocks taps. */
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;}

/* Goal-reached banner. */
@keyframes feestPop{0%{opacity:0;transform:scale(0.9) translateY(6px);}60%{transform:scale(1.02);}100%{opacity:1;transform:scale(1) translateY(0);}}
.feest-banner{animation:feestPop var(--dur-4) var(--ease-spring) both;}