/* css/add-menu.css
 *
 * Universal "+ Add" menu — icon grid (1-2 word label under each icon).
 * NO text input anywhere. NO JSON anywhere. Point-and-click WYSIWYG.
 *
 * Phase B / Wave 16.B.10. Loaded alongside /css/mobile-tokens.css so
 * --tap-target-min (44px AAA floor) is available.
 *
 * Two mount modes:
 *   1. Mobile (≤1024px) — wrapped in .add-menu-overlay + .add-menu-card,
 *      driven by the BottomSheet primitive (kind='modal'). Centered card.
 *   2. Desktop — .add-menu-overlay.add-menu-overlay-desktop wraps the
 *      menu; menu is fixed-positioned by JS near the click point.
 *
 * LABEL: PILOT-READY — needs hardware verification on iOS Safari +
 * Android Chrome before PRODUCTION-READY.
 */

/* Overlay (mobile path): full-screen scrim that the BottomSheet
   primitive uses as both backdrop and click-outside target. */
.add-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  /* BottomSheet primitive flips this .open class to show. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}
.add-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop overlay: NO scrim — just an invisible click-catcher layer.
   The menu itself supplies the visible chrome (floating popover). */
.add-menu-overlay-desktop {
  background: transparent;
  opacity: 1;
  pointer-events: auto;
  /* Don't intercept hover / wheel on underlying UI — only swallow
     mousedown via the JS handler. */
}
.add-menu-overlay-desktop > .add-menu {
  pointer-events: auto;
}

/* The card (mobile only) — visually contains the menu grid. */
.add-menu-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  max-width: 360px;
  width: calc(100vw - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

/* The menu itself — the icon grid. */
.add-menu {
  display: grid;
  /* data-cols set by JS: 2 or 3 columns. */
  gap: 12px;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  min-width: 240px;
  max-width: 360px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.add-menu[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.add-menu[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Inside a .add-menu-card the menu is borderless / shadowless — the
   card owns the chrome. */
.add-menu-card > .add-menu {
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

/* Each item: big icon on top, 1-2 word label under it. Square-ish,
   minimum 56×56 (above the 44px AAA tap floor + room for the label). */
.add-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: var(--tap-target-min, 44px);
  min-height: 72px;
  padding: 10px 6px;
  background: #f6f7fb;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: #111;
  text-align: center;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
}

.add-menu-item:hover {
  background: #eceff5;
}
.add-menu-item:active {
  transform: scale(0.97);
}

/* Visible 3px focus ring — keyboard and a11y users see exactly
   where focus is. */
.add-menu-item:focus {
  outline: none;
}
.add-menu-item:focus-visible {
  outline: 3px solid #2E5090;
  outline-offset: 2px;
  background: #eef2fb;
  border-color: #2E5090;
}

.add-menu-icon {
  font-size: 32px;
  line-height: 1;
  /* Emoji rendering varies by OS — bigger floor on mobile per
     Apple's HIG (28pt+ for "primary symbol"). */
}

.add-menu-label {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  line-height: 1.2;
  /* Allow 2 words to wrap to two lines without clipping. */
  white-space: normal;
  word-break: keep-all;
}

/* Mobile bump — bigger icons + slightly bigger label on phones. */
@media (max-width: 1024px) {
  .add-menu-item {
    min-height: 80px;
    padding: 12px 6px;
  }
  .add-menu-icon {
    font-size: 36px;
  }
  .add-menu-label {
    font-size: 14px;
  }
}

/* Print: never show the menu in printed output. */
@media print {
  .add-menu,
  .add-menu-overlay,
  .add-menu-card {
    display: none !important;
  }
}

/* Reduced motion — drop the open-fade transition. */
@media (prefers-reduced-motion: reduce) {
  .add-menu-overlay,
  .add-menu-item {
    transition: none !important;
  }
}