/* ============================================================
   Kit — menu.css   (reusable parts: dropdown + menu + the
   resource-center building blocks)
     .bp-dropdown            a select button (label + chevron)
     .bp-menu                a popup / inline list of items
     .bp-menu__item          a row (.is-selected = tint + check)
     .bp-section             a small section label
     .bp-option              a full-width option row (resource
                             center: "Join the academy", etc.)
   Behaviour (open/close, select) is in menu.js.
   ============================================================ */

/* ---------- dropdown button ---------- */
.bp-dropdown { position: relative; width: 100%; }
/* the trigger reads like a secondary button, sized like the input field */
.bp-dropdown__btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 34px; padding: 0 14px;          /* CTA height matches nav/menu buttons (was 40) */
  border: 1px solid #dcdcdc;
  border-radius: var(--bp-radius-btn); corner-shape: squircle;
  background: linear-gradient(180deg, #ffffff, #f7f7f7);
  box-shadow: 0 1px 2px rgba(10, 13, 18, .05);
  font: inherit; font-size: 14px; font-weight: 500;    /* = nav-item weight (was 600) */
  color: var(--bp-surface-foreground); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.bp-dropdown__btn:hover { background: linear-gradient(180deg, #ffffff, #f1f1f1); border-color: #cfcfcf; }
/* optional leading icon in the trigger (e.g. a calendar on a date range, a storefront on a
   client picker) — sits before the value, muted to match the chevron */
.bp-dropdown__ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--bp-surface-muted); }
.bp-dropdown__ic svg { width: 100%; height: 100%; display: block; }
.bp-dropdown__val { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-dropdown__chev { flex: none; color: var(--bp-surface-muted); transition: transform .2s ease; }
.bp-dropdown__chev svg { width: 18px; height: 18px; display: block; }
.bp-dropdown.is-open .bp-dropdown__chev { transform: rotate(180deg); }
.bp-dropdown.is-open .bp-dropdown__btn {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px var(--bp-accent-tint);
}

/* ---------- the menu ---------- */
.bp-menu {
  --bp-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background: var(--bp-surface);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius-btn); corner-shape: squircle;
  box-shadow: var(--bp-shadow);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;   /* a little space between rows */
}
.bp-menu--pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 5; max-height: 296px; overflow-y: auto;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.bp-dropdown.is-open .bp-menu--pop { opacity: 1; transform: translateY(0); pointer-events: auto; }

.bp-menu__item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px;
  border: none; border-radius: var(--bp-radius-btn); corner-shape: squircle;   /* same radius as the menu buttons */
  background: transparent;
  font: inherit; font-size: 14px; font-weight: 500;   /* = nav-item weight (was 600); selected rows can bold via a host class */
  color: var(--bp-surface-foreground); text-align: left; cursor: pointer;
  transition: background .12s ease;
}
.bp-menu__item:hover { background: var(--bp-menu-hover, #f7f7f7); }
/* optional leading icon (for action menus: Rename / Save / Archive, etc.) — tips on hover,
   the same icon motion the nav rows use (keyframe from nav-item.css) */
.bp-menu__ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--bp-surface-muted); transform-origin: 50% 80%; }
.bp-menu__ic svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .bp-menu__item:hover .bp-menu__ic { animation: bp-navicon-tip .8s ease-in-out 1; }
}
.bp-menu__label { flex: 1; min-width: 0; }
/* selected/hover check: reveals flush-right (an OUTLINE ring on hover, a filled accent
   disc once selected), matching the chat choice rows. Requires a .bp-checkmark child. */
.bp-menu__check {
  flex: none; margin-left: 4px;
  width: 0; opacity: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  transition: width .22s var(--bp-ease-emphasized, ease), opacity .16s ease, margin .22s ease;
}
.bp-menu__item:hover:not(.is-selected) .bp-menu__check,
.bp-menu__item.is-selected .bp-menu__check { width: 20px; opacity: 1; margin-left: 8px; }
/* the check RESTS as an outline ring and only fills to the accent disc when the row is
   selected, so revealing it on hover doesn't flash from the filled disc to an outline */
.bp-menu__item .bp-checkmark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bp-border-strong); }
.bp-menu__item .bp-checkmark::after { background: var(--bp-surface-muted); }
.bp-menu__item.is-selected .bp-checkmark { background: var(--bp-accent); box-shadow: none; }
.bp-menu__item.is-selected .bp-checkmark::after { background: var(--bp-accent-foreground); }
.bp-menu__item.is-selected { background: var(--bp-accent-tint); }

/* ---------- resource-center building blocks ---------- */
.bp-section {
  font-size: 12px; line-height: 18px; font-weight: 600;
  color: var(--bp-surface-muted);
  padding: 0 4px; margin: 6px 0 2px;
}
.bp-option {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius);
  background: var(--bp-surface);
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--bp-surface-foreground); text-align: left; cursor: pointer;
  transition: background .12s ease;
}
.bp-option:hover { background: color-mix(in srgb, #101010 4%, var(--bp-surface)); }   /* neutral hover (rule 4) */
.bp-option__icon { margin-left: auto; flex: none; color: var(--bp-surface-muted); }
.bp-option__icon svg { width: 16px; height: 16px; display: block; }

/* ---------- small size: a 32px trigger for compact toolbars ---------- */
.bp-dropdown--sm .bp-dropdown__btn { height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }
.bp-dropdown--sm .bp-dropdown__chev { display: grid; place-items: center; }
.bp-dropdown--sm .bp-dropdown__chev svg { width: 16px; height: 16px; }
.bp-dropdown--sm .bp-menu__item { padding: 9px 10px; font-size: 13px; }
.bp-dropdown--sm .bp-menu__check { width: 16px; height: 16px; }