/* PopMenu (static/popmenu.js): every ⋯ / dropdown menu. On phones a bottom
   sheet above the bottom nav; wider, beside its button, flipped up / left
   when it would run off the window (CLAUDE.md §8b, Phone layout rules). */
.pm-menu {
  position: fixed; z-index: 2000; background: var(--card, #fff); border: 1px solid var(--line, #e2dbcb);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; min-width: 200px; max-width: 320px;
  max-height: calc(100vh - 16px); overflow: auto;
}
.pm-menu button, .pm-menu a {
  display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 14.5px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink, #1d2b21); margin: 0; text-decoration: none;
}
.pm-menu button:hover, .pm-menu a:hover { background: var(--gl, #eef5ec); }
.pm-menu small { display: block; color: var(--ink3, #7c857f); font-size: 12px; font-weight: 400; }
.pm-menu .pm-danger { color: #b4361c; }
.pm-sep { height: 1px; background: var(--line2, #efe9dc); margin: 4px 6px; }

/* a page's own absolutely positioned dropdown, flipped on desktop */
.pm-up { top: auto !important; bottom: calc(100% + 4px) !important; }
.pm-left { right: auto !important; left: 0 !important; }

.pm-shade { position: fixed; inset: 0; background: rgba(20, 30, 22, .35); z-index: 1999; }
/* the phone sheet: !important because pages style their menus inline */
.pm-sheet {
  position: fixed !important; display: block !important; left: 0 !important; right: 0 !important; top: auto !important;
  bottom: var(--pm-nav, 0px) !important; width: auto !important; min-width: 0 !important; max-width: none !important;
  max-height: calc(100vh - var(--pm-nav, 0px) - 56px) !important; overflow: auto !important; margin: 0 !important;
  z-index: 2000 !important; transform: none !important; visibility: visible !important;
  border-radius: 16px 16px 0 0 !important; border: 0 !important; box-shadow: 0 -8px 28px rgba(0,0,0,.18) !important;
  background: var(--card, #fff) !important; color: var(--ink, #1d2b21) !important;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important; animation: pm-up .16s ease-out;
}
.pm-sheet::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: #d9d2c2; margin: 0 auto 8px; }
.pm-sheet > button, .pm-sheet > a, .pm-sheet > label { min-height: 46px; font-size: 15.5px !important; }
@keyframes pm-up { from { translate: 0 24px; opacity: .4; } to { translate: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pm-sheet { animation: none; } }