/* Shared application header + navigation drawer. Rendered by app-header.js on every page.
   Layout: [leading 40px] [brand] ........ [trailing] */
body.app-page>.vq-header{
  position:relative;z-index:20;box-sizing:border-box;
  display:flex;align-items:center;
  width:100%;height:var(--vq-header-height);min-height:var(--vq-header-height);
  min-width:0; /* #105: a long name, tagline and Share at 130% text shrink the name, never widen the page's column */
  margin:0;padding:0 var(--vq-gutter);
  border:0;border-bottom:var(--vq-border);border-radius:0;
  background:var(--vq-paper);box-shadow:none;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.vq-header-leading{display:flex;min-width:0;flex:1 1 auto;align-items:center;gap:var(--vq-space-2)}
.vq-header-trailing{display:flex;flex:0 0 auto;align-items:center;gap:var(--vq-space-2)}

.vq-header-action{
  display:grid;flex:0 0 40px;width:40px;height:40px;margin-left:-8px;place-items:center;
  border:0;border-radius:50%;padding:0;background:transparent;color:var(--vq-ink);
  text-decoration:none;cursor:pointer;
}
.vq-header-action:hover{background:var(--vq-surface-tint)}
span.vq-header-action{cursor:default}
span.vq-header-action:hover{background:transparent}
/* Share (#105): the right corner; the icon lines up with the bar's edge (like the back arrow on the left). Beside the
   avatar or a text action it sits just left of it. */
.vq-header-share{
  display:grid;flex:0 0 var(--vq-tap);width:var(--vq-tap);height:var(--vq-tap);place-items:center;
  border:0;border-radius:50%;padding:0;background:transparent;color:var(--vq-ink);cursor:pointer;
}
.vq-header-share:last-child{margin-right:calc(-1 * var(--vq-space-2))}
.vq-header-share:hover{background:var(--vq-surface-tint)}
.vq-header-action svg,.vq-header-share svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.vq-header-brand{
  overflow:hidden;color:var(--vq-ink);
  font:var(--vq-weight-bold) var(--vq-text-header)/1.1 var(--vq-font);letter-spacing:var(--vq-tracking-tight);
  text-decoration:none;text-overflow:ellipsis;white-space:nowrap;
}
.vq-header-brand:has(+ .vq-header-tagline){flex:0 0 auto}
.vq-header-tagline{
  min-width:0;overflow:hidden;color:var(--vq-ink-muted);
  font:var(--vq-weight-medium) var(--vq-text-header-sm)/1.1 var(--vq-font);
  text-overflow:ellipsis;white-space:nowrap;
}
/* Live (owner, 2026-10-11, WhatsApp-style; live.js): the child's name with her status in place of the brand, for a
   family member viewing her; .vq-presence is the same status line on Your family's cards. */
.vq-header.has-who .vq-header-brand{display:none}
.vq-header-who{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;min-width:0}
.vq-header-who b{overflow:hidden;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-header-sm)/1.2 var(--vq-font);text-overflow:ellipsis;white-space:nowrap}
.vq-presence{display:flex;align-items:center;gap:var(--vq-space-1);min-width:0;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.3 var(--vq-font)}
.vq-presence[hidden]{display:none}
.vq-presence>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vq-presence>i{display:none;flex:0 0 auto;width:var(--vq-space-2);height:var(--vq-space-2);border-radius:var(--vq-radius-pill);background:currentColor}
.vq-presence[data-tone="live"]{color:var(--vq-success);font-weight:var(--vq-weight-bold)}
.vq-presence[data-tone="test"]{color:var(--vq-warning);font-weight:var(--vq-weight-bold)}
.vq-presence[data-tone="live"]>i,.vq-presence[data-tone="test"]>i{display:block;animation:vq-presence-pulse 1.2s ease-in-out infinite alternate}
.vq-presence[data-tone="live"]>span::after{content:"";animation:vq-presence-dots 1.5s steps(4) infinite}
@keyframes vq-presence-pulse{from{opacity:1}to{opacity:.3}}
@keyframes vq-presence-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.vq-presence>i{animation:none}.vq-presence[data-tone="live"]>span::after{animation:none;content:"…"}}
.vq-header-label{
  color:var(--vq-ink-muted);
  font:var(--vq-weight-medium) var(--vq-text-header-xs)/1 var(--vq-font);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.vq-header-text{display:inline-grid;min-height:var(--vq-tap);place-items:center;padding:0 var(--vq-space-2);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-header-sm)/1 var(--vq-font);text-decoration:none;cursor:pointer}
.vq-header-text[hidden]{display:none}
.vq-header-avatar{
  display:grid;width:34px;height:34px;place-items:center;
  border:0;border-radius:50%;padding:0;
  background:var(--vq-surface);color:var(--vq-ink);
  font:var(--vq-weight-bold) var(--vq-text-header-sm)/1 var(--vq-font);
  border:var(--vq-border);box-shadow:none;cursor:pointer;
}
.vq-header :focus-visible,.site-drawer button:focus-visible{outline:3px solid var(--vq-focus);outline-offset:2px}

/* Navigation drawer */
.site-drawer{position:fixed;inset:0;z-index:1000;width:100vw;height:100dvh;isolation:isolate}
.site-drawer[hidden]{display:none}
.site-drawer-scrim{position:fixed;inset:0;border:0;background:var(--vq-scrim);backdrop-filter:blur(2px)}
.site-drawer aside{
  position:fixed;top:0;bottom:0;left:0;box-sizing:border-box;
  display:flex;flex-direction:column;width:min(85vw,360px);height:100dvh;
  padding:max(var(--vq-space-5),env(safe-area-inset-top)) var(--vq-space-4) max(var(--vq-space-4),env(safe-area-inset-bottom));
  background:var(--vq-paper);border-right:var(--vq-border);box-shadow:none;
  animation:vq-drawer-enter .22s ease-out;
}
body.site-drawer-open{overflow:hidden}
@keyframes vq-drawer-enter{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.site-drawer aside>header{display:grid;grid-template-columns:48px minmax(0,1fr) 40px;align-items:center;gap:var(--vq-space-3);padding-bottom:var(--vq-space-4);border-bottom:1px solid var(--vq-line)}
.site-drawer-avatar{display:grid;width:48px;height:48px;place-items:center;border:var(--vq-border);border-radius:50%;background:var(--vq-surface);color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1 var(--vq-font)}
.site-drawer header>div:nth-child(2){display:grid;min-width:0;gap:var(--vq-space-1)}
.site-drawer header strong{overflow:hidden;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-md)/1.2 var(--vq-font);text-overflow:ellipsis;white-space:nowrap}
.site-drawer header small{color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.2 var(--vq-font)}
.site-drawer-close{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:50%;padding:0;background:var(--vq-surface-tint);color:var(--vq-ink);cursor:pointer}
.site-drawer-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.site-drawer nav{margin-top:var(--vq-space-4)}
.site-drawer nav button{display:flex;width:100%;min-height:var(--vq-tap);align-items:center;gap:var(--vq-space-3);border:0;border-radius:var(--vq-radius-md);padding:0 var(--vq-space-4);background:transparent;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font);cursor:pointer}
.site-drawer nav button.is-active{background:var(--vq-surface-tint);color:var(--vq-accent)}
.site-drawer nav button svg,.site-account-logout svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.site-drawer nav button.is-danger{color:var(--vq-danger)}
.site-drawer-section-label{margin:var(--vq-space-4) var(--vq-space-4) var(--vq-space-2);padding-top:var(--vq-space-4);border-top:1px solid var(--vq-line);color:var(--vq-ink-subtle);font:var(--vq-weight-bold) var(--vq-text-xs)/1 var(--vq-font);letter-spacing:.12em;text-transform:uppercase}
.site-account-logout{display:flex;width:100%;margin-top:auto;align-items:center;justify-content:flex-start;gap:var(--vq-space-3);border:0;border-radius:var(--vq-radius-md);padding:var(--vq-space-4);background:var(--vq-surface-muted);color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-sm)/1 var(--vq-font);cursor:pointer}
.site-account-logout:hover{background:var(--vq-surface-tint);color:var(--vq-ink)}
.site-drawer-note{margin:var(--vq-space-3) 0 0;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.4 var(--vq-font)}
.site-drawer-version{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--vq-space-2);margin:var(--vq-space-3) 0 0;color:var(--vq-ink-subtle);font:var(--vq-weight-medium) var(--vq-text-xs)/1.3 var(--vq-font);font-variant-numeric:tabular-nums}
/* Update status (app-shell.js): green tick + "Up to date", an "Update" button, or nothing when it can't tell. */
.site-drawer-update{display:inline-flex;min-height:var(--vq-tap);align-items:center;gap:var(--vq-space-2);color:var(--vq-ink);font-weight:var(--vq-weight-bold)}
.site-drawer-update svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.site-drawer-update[data-state="latest"] svg circle{fill:var(--vq-success);stroke:none}
.site-drawer-update[data-state="latest"] svg path{stroke:var(--vq-paper);stroke-width:2.6}
.site-drawer-update button{display:inline-flex;min-height:var(--vq-tap);align-items:center;gap:var(--vq-space-2);border:0;padding:0;background:transparent;color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-xs)/1 var(--vq-font);cursor:pointer}
.site-drawer-update button span{text-decoration:underline;text-underline-offset:3px}
.site-drawer-update button:disabled{color:var(--vq-ink-subtle);cursor:default}
.site-drawer-update button:disabled span{text-decoration:none}
/* Theme choice in the drawer: System / Light / Dark. */
/* Waiting (#33): one indeterminate bar along the bottom of the header, a toast after 10 s (app-header.js), and busy
   buttons. */
.vq-busy{position:absolute;left:0;right:0;bottom:calc(-3 * var(--vq-border-width));height:calc(2 * var(--vq-border-width));overflow:hidden;background:var(--vq-accent-soft)}
.vq-busy::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:var(--vq-accent);animation:vq-busy 1.2s ease-in-out infinite}
@keyframes vq-busy{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.is-busy{position:relative;cursor:progress}
.is-busy::after{content:"";display:inline-block;width:1em;height:1em;margin-left:var(--vq-space-2);vertical-align:-0.15em;border:var(--vq-border-width) solid currentColor;border-right-color:transparent;border-radius:var(--vq-radius-pill);animation:vq-spin .8s linear infinite}
@keyframes vq-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vq-busy::before{animation:none;width:100%;opacity:.6}.is-busy::after{animation:none}}