/* The community's own bar (community-nav.mjs), under the site's header on every community page: community.html,
   briefs.html, compare.html, research.html. Research mode (html.research-mode, set before first paint from
   localStorage) adds the research pages and says briefs instead of challenges. */
.cnav { border-bottom: 1px solid var(--line); background: var(--sunk); }
.cnav-in { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.cnav-links { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cnav-links::-webkit-scrollbar { display: none; }
/* Links that run past the switch fade out rather than stop mid-word. */
.cnav-links { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 18px; }
.cnav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--muted); text-decoration: none; font: 600 13.5px var(--body); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .25s var(--out); }
.cnav a:hover { color: var(--fg); }
.cnav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--lime); }
.cnav a:first-child { padding-left: 0; }
.cnav-mode { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px 0 12px; background: none; border: 0; color: var(--muted); font: 600 12.5px var(--body); cursor: pointer; white-space: nowrap; }
.cnav-mode:hover { color: var(--fg); }
.cnav-mode i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgba(255,253,247,.16); transition: background-color .2s; }
.cnav-mode i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bright); transition: transform .25s var(--out); }
.cnav-mode[aria-checked="true"] { color: var(--fg); }
.cnav-mode[aria-checked="true"] i { background: var(--lime); }
.cnav-mode[aria-checked="true"] i::after { transform: translateX(14px); background: var(--deep); }
/* Research mode is paused for now (owner, 2026-11-04): the switch stays in the markup for when the research pages
   reopen, but it is hidden everywhere and the pages no longer restore the old stored preference. */
.cnav-mode { display: none !important; }
.research-only { display: none !important; }
.research-mode .research-only { display: revert !important; }
.research-mode .cnav a.research-only { display: inline-flex !important; }
.research-mode .play-only { display: none !important; }
/* A research page you are on stays in the bar with research mode off. */
.cnav a.research-only[aria-current="page"] { display: inline-flex !important; }
.top nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--lime); border-radius: 4px 4px 0 0; }
@media (max-width: 520px) { .cnav-word { display: none; } .cnav a { padding: 0 9px; font-size: 13px; } .cnav a:first-child { padding-left: 0; } .cnav-mode { gap: 8px; padding-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .cnav a, .cnav-mode i, .cnav-mode i::after { transition: none; } }