/* AppBlocks · Menu (shared block "menu") — header button + dropdown-panel
 * styling. Companion to menu.js (see its header for the JS API).
 *
 * Extracted 2026-09-03, verbatim, from errands-planner's real header CSS
 * (index.html, then lines 262-292) — the owner's best-of-breed pick.
 * Colors/shape come from the app's own theme tokens, which both apps
 * already define under the same names (--card, --ink, --field,
 * --shadow-lift), so nothing here is hardcoded to one app's palette.
 *
 * #auth-btn is deliberately NOT part of the uniform 40px-square set below
 * — it's its own pill shape, and gets a completely different shape once
 * .auth-circle is applied (signed-in state, injected by
 * AuthFlow.renderAuthBtn). Real bug fixed here (screenshot-verified):
 * #auth-btn's height must be a fixed 40px like the other header buttons,
 * not derived from padding+line-height alone (was shorter).
 */
#menu-btn, #offline-toggle, #lang-sel {
  width: 40px; height: 40px; padding: 0; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(0,0,0,.20);
  border: none; color: #fff; border-radius: 10px; cursor: pointer; font-family: inherit;
  font-size: 20.5px; line-height: 1;
}
#lang-sel { font-size: 22px; }
/* Stamped by menu.js's renderLangPanel(): the button shows the active
 * language CODE in letters (e.g. "EN") — never a globe or flag icon. */
#lang-sel.lang-code-only { font-size: 15px; font-weight: 800; }

#offline-toggle { line-height: 0; }
#offline-toggle .wifi-off { display: none; }
#offline-toggle.forced-offline .wifi-on { display: none; }
#offline-toggle.forced-offline .wifi-off { display: inline; }
#offline-toggle.forced-offline { background: rgba(255,100,100,.30); color: #fff; }

#auth-btn {
  background: rgba(0,0,0,.20); border: none; color: #fff; font-size: 15px; font-weight: 700;
  border-radius: 10px; padding: 0 12px; cursor: pointer; font-family: inherit; flex-shrink: 0;
  height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
#auth-btn.auth-circle {
  width: 32px; height: 32px; border-radius: 16px; padding: 0; background: #fff;
  color: var(--brand-deep); font-size: 17.5px; font-weight: 800; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#auth-btn.auth-circle img { width: 100%; height: 100%; object-fit: cover; }

.menu-panel {
  position: absolute; left: 20px; top: 64px; background: var(--card);
  border-radius: 14px; box-shadow: var(--shadow-lift); padding: 8px;
  display: none; flex-direction: column; min-width: 170px; z-index: 31;
}
/* menu.js sets fixed left/right/top inline once anchorPanel() runs
 * (see its header — measures the real button rect, opens away from the
 * near viewport edge); the absolute left/top above is only the pre-JS
 * fallback position so a panel is never fully unstyled before anchor. */
.menu-panel.open { display: flex; }
.menu-panel a {
  padding: 10px 12px; border-radius: 9px; color: var(--ink);
  text-decoration: none; font-size: 15.5px; font-weight: 700;
}
.menu-panel a:hover { background: var(--field); }