/* ===== fn-markers — shared security marker control =====
   Single source of truth for the favorite / pin / note marker icons. Used by the watchlist
   table and any external module (e.g. market-ticker) so the markers always render identically.
   Ported 1:1 from the original .wl-marker rules in watchlists.css.

   IMPORTANT: the icon size targets the generated `.lucide` <svg>, NOT the `<i>` element —
   lucide.createIcons() replaces <i data-lucide> with <svg class="lucide …">, so an `i` selector
   would be dropped and the icon would fall back to lucide's 24px default. */
.fn-markers { display: inline-flex; gap: 4px; }
.fn-marker {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: var(--fn-border-width) solid transparent; border-radius: 6px;
    color: var(--fn-text-tertiary); cursor: pointer; transition: color .14s, border-color .14s;
}
.fn-marker:hover { color: var(--fn-text); border-color: var(--fn-border); }
.fn-marker .lucide { width: 14px; height: 14px; }
.fn-marker.on-fav { color: var(--fn-cat-gold); }
.fn-marker.on-pin { color: var(--fn-cat-teal); }
.fn-marker.on-note { color: var(--fn-cat-purple); }