@layer components {
  /* A favorite's star is filled in the wait colour; the row's one has its tooltip above it, shown on hover and focus. */
  .favorite-star[data-favorite="true"] { color: var(--jx-wait); }
  .favorite-star-wrap { display: inline-flex; }
  .favorite-tip {
    display: none; z-index: 40; width: 120px; height: 28px; place-items: center; border-radius: 6px; pointer-events: none;
    white-space: nowrap; background: var(--foreground); color: var(--background); font-size: 13px; line-height: 1;
  }
  /* Fixed and anchored to its star: the sidebar's scroll box would clip an absolute one. Without anchoring the label alone names the star. */
  @supports (anchor-name: --x) {
    .favorite-tip { position: fixed; bottom: anchor(top); left: anchor(center); margin-bottom: 12px; translate: -50% 0; }
    .favorite-star:focus-visible + .favorite-tip { display: grid; }
    /* A tap hovers too, and iOS Safari drops the click of a tap whose hover reveals content: a real hover only. */
    @media (hover: hover) { .favorite-star:hover + .favorite-tip { display: grid; } }
  }
  .favorite-star--header { color: var(--muted-foreground); }
  .favorite-star--header[data-favorite="true"] { color: var(--jx-wait); }

  /* The drop zone: a dashed outline in the accent, soft accent ground. */
  .nav-drop-zone {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 10px; border: 1px dashed var(--jx-accent);
    border-radius: 8px; background: var(--jx-accent-soft); color: var(--jx-accent); font-size: 13px; font-weight: 500;
  }
  .nav-drop-zone[hidden] { display: none; }
  .nav-drop-zone svg { color: inherit; }

  /* The marker between two favorites takes no room: a 8 px circle and a 2 px line, drawn over the gap. */
  .nav-drop-marker { position: relative; z-index: 1; height: 8px; margin: -4px 0; list-style: none; pointer-events: none; }
  .nav-drop-marker::before {
    content: ""; position: absolute; inset: 0 auto auto 0; box-sizing: border-box; width: 8px; height: 8px;
    border: 1.5px solid var(--jx-accent); border-radius: 999px;
  }
  .nav-drop-marker::after { content: ""; position: absolute; inset: 3px 0 auto 8px; height: 2px; background: var(--jx-accent); }

  /* While a row is dragged: the row stays behind faded, a lifted copy follows the pointer. */
  .is-drag-origin { opacity: 0.35; }
  .is-nav-dragging, .is-nav-dragging * { cursor: grabbing; user-select: none; }
  .sidebar-entry.nav-drag-ghost {
    position: fixed; top: 0; left: 0; z-index: 60; border-radius: 6px; pointer-events: none;
    background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lifted);
  }
  .nav-drag-ghost .nav-row-actions { display: flex; }
  .nav-drag-ghost .nav-row-action[hidden] { display: inline-flex; }
  .nav-drag-ghost .favorite-tip { display: none; }
}