/* menu.css — the hamburger inside Famille + its sheet (famille-in-app, 2026-09-03). TOKENS ONLY.
   The button is the everyday app's #menuBtn (app-everyday.html .iconbtn: a 34px circle, hairline
   border, card surface, 18px ink glyph at stroke 1.7) said again in this app's tokens — same
   glyph, same corner, so the thumb that learned it in the app finds it here. It sits in .sbar
   (base.css), which already carries the notch safe-area. */
.menu-btn {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--btn-shadow); cursor: pointer;
}
.menu-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.menu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.menu-btn:active { transform: translateY(1px); }

/* ── Top bar B (2026-09-03): the app's bar, re-said in tokens ────────────────────────────────
   app-everyday.html .top: sticky, paper at 86 % over a 14px blur, hairline below, 34px controls.
   .sbar (base.css) already carries the notch safe-area; this block gives it the app's body. */
.sbar {
  position: sticky; top: 0; z-index: 20; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  background: var(--bar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* the island — the app's .loc: pin in teal, 13px 600 ink. A label here, not a picker. */
.sbar-loc { display: flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font); color: var(--ink); }
.sbar-loc svg { width: 15px; height: 15px; stroke: var(--school); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the avatar — the app's #topAvatar: the three accents in a conic sweep, white ring, the initial. */
.sbar-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; padding: 0;
  background: conic-gradient(from 200deg, var(--school), var(--voice), var(--sport), var(--school));
  border: 2px solid var(--surface); box-shadow: var(--btn-shadow);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-on-school); font: 700 14px/1 var(--font); cursor: pointer;
}
.sbar-avatar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The sheet: one full-width primary action, the return. `.btn` is inline-flex (base.css), so
   width + justify-content centre the glyph and the label together — the same trick .sheet .done
   uses in modals.css. */
.sheet-menu .menu-back { margin-top: 18px; width: 100%; justify-content: center; padding: 13px; }
.sheet-menu .menu-back svg { width: 16px; height: 16px; }
.sheet-menu .menu-note { margin-top: 12px; }