/* ─────────────────────────────────────────────────────────────────
   panel-community.css
   Phase 1.1 SCAFFOLD (2026-05-11) — Community Board Hub.

   Most of the panel's UI lives inside the Next.js page at
   /community (Tailwind-styled). This file only carries the small
   set of overrides needed so the 🌍 Community topbar pill matches
   the look of #navDashboard / #navDevices / #navBoards and gets a
   subtle hover state.

   LABEL: PROTOTYPE.
   ───────────────────────────────────────────────────────────────── */

#navCommunity {
  /* Inherit .topbar-nav-link sizing + colors — only add what's not
     in the base class. Keep this small so we don't fight builder.css.
     The emoji 🌍 ships in the HTML text node so screen readers
     announce it. */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

#navCommunity:hover,
#navCommunity:focus-visible {
  /* Slight green tint on hover to telegraph "community" without
     competing with the active-tab amber. Focus-visible outline is
     inherited from base styles. */
  background: rgba(34, 197, 94, 0.08);
  border-radius: 6px;
}

/* When the community panel is the active panel (future: panel-router
   sets data-active-panel="community" on body), highlight the pill.
   Harmless if the attribute is never set — selector simply matches
   nothing. */
body[data-active-panel="community"] #navCommunity {
  background: rgba(34, 197, 94, 0.15);
  border-radius: 6px;
  font-weight: 600;
}