/* Family Vault front-end - tokens from DESIGN.md (imported Claude Design handoff).
   Visual values mirror the design exactly; layout is adapted from the fixed phone mock to a real
   mobile-first viewport. Inline styles in the rendered markup carry the per-element design values;
   this sheet holds resets, tokens, keyframes, and the responsive shell. */

:root{
  --accent:#2A5DB0; --accent-d:#234E96; --accent-t:#EAF1FB;
  --ink:#16202E; --muted:#5A6B7E; --muted2:#7A8896; --muted3:#8593A2; --muted4:#9AA6B4; --muted5:#A6B1BD;
  --page:#F4F6F9; --card:#FFFFFF;
  --safe-top:max(env(safe-area-inset-top), 14px);
  --safe-bot:max(env(safe-area-inset-bottom), 12px);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:#E7ECF1;
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
input{font-family:inherit;}

@keyframes vSpin{to{transform:rotate(360deg)}}
@keyframes vScan{0%{top:4%}50%{top:88%}100%{top:4%}}
@keyframes vPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes vToast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes vDot{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.25);opacity:1}}

.v-scroll::-webkit-scrollbar{width:0;height:0;}
.v-scroll{scrollbar-width:none;}

/* demo banner */
#fv-demobar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:#16202E;color:#fff;text-align:center;
  font:500 11.5px/1.4 'IBM Plex Sans';padding:6px 14px;
}

/* responsive mobile shell: the screens fill the viewport on a phone, centered+framed on desktop */
.fv-root{
  position:relative;
  width:100%;max-width:440px;margin:0 auto;
  min-height:100dvh;
  background:var(--page);
  overflow-x:hidden;
}
@media (min-width:520px){
  body{display:flex;justify-content:center;padding:24px 0;}
  .fv-root{
    min-height:min(880px, calc(100dvh - 48px));
    height:880px;
    border-radius:34px;overflow:hidden;
    box-shadow:0 30px 70px rgba(16,32,52,0.26),0 0 0 1px rgba(0,0,0,0.05);
  }
}

/* each screen is a flex column filling the shell */
.fv-screen{height:100%;min-height:100dvh;display:flex;flex-direction:column;}
@media (min-width:520px){ .fv-screen{min-height:0;height:100%;} }

/* honor the OS safe area / banner: push the first header down a touch */
.fv-pad-top{padding-top:calc(var(--safe-top) + 30px);}