/* ============================================================
   Kit — nav-item.css   (the menu button)
   ONE row component reused by every sidebar / sub-nav list, so
   icon rows and text-only rows share identical metrics. Equal
   visual padding all around: the label sits in a 20px line-box
   (same height as the icon), so an icon row and a text row are the
   same height and read balanced left/top/bottom.

   Markup:
     <a class="bp-nav-item is-current">
       <span class="bp-nav-item__icon" data-ic="home"></span>   (optional)
       <span class="bp-nav-item__label">Home</span>
       <span class="bp-nav-item__tail">…</span>                 (optional)
     </a>

   Colours come from --bp-nav-* knobs (neutral defaults; a theme or
   host can re-point them).
   ============================================================ */

.bp-nav-item {
  --nav-fg:        #191919;
  --nav-icon:      #a3a3a3;
  --nav-icon-on:   #3f3f3f;
  --nav-icon-dim:  #cbcbcb;
  --nav-hover:     #f7f7f7;   /* light neutral hover */
  --nav-outline:   #ececec;   /* selected: a faint outline, a hair darker than the fill */

  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 36px; padding: 8px 10px;
  border: none; background: transparent;
  border-radius: var(--bp-radius-btn, 16px); corner-shape: squircle;
  font-family: var(--bp-font, 'Inter', system-ui, sans-serif);
  font-size: 14px; font-weight: 500; color: var(--nav-fg);
  text-decoration: none; cursor: pointer; text-align: left;
  transition: background .12s ease, color .12s ease;
}
/* icon: 17px (a touch smaller than the 20px label-height); stroke bumped so the
   rendered line stays the SAME thickness as it was at 20px */
.bp-nav-item__icon { flex: none; width: 17px; height: 17px; display: grid; place-items: center; color: var(--nav-icon); transform-origin: 50% 80%; }
.bp-nav-item__icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.75; }
.bp-nav-item__icon .ic-dim { stroke: var(--nav-icon-dim); }
/* standard menu-icon hover: tip left ~30deg, pause a beat, fall back with a bounce */
@keyframes bp-navicon-tip {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(-30deg); }
  42%  { transform: rotate(-30deg); }
  66%  { transform: rotate(9deg); }
  80%  { transform: rotate(-4deg); }
  91%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .bp-nav-item:hover .bp-nav-item__icon { animation: bp-navicon-tip .8s ease-in-out 1; }
}
/* the label rides a 20px line-box so a text row matches an icon row's height */
.bp-nav-item__label { flex: 1; min-width: 0; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bp-nav-item__tail { flex: none; margin-left: auto; }

.bp-nav-item:hover { background: var(--nav-hover); }
.bp-nav-item:hover .bp-nav-item__icon { color: var(--nav-icon-on); }
/* selected: same fill as hover, plus a faint outline just barely darker than the fill */
.bp-nav-item.is-current { background: var(--nav-hover); box-shadow: inset 0 0 0 1px var(--nav-outline); color: var(--nav-fg); font-weight: 600; }
.bp-nav-item.is-current .bp-nav-item__icon { color: var(--nav-icon-on); }