/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR V2 — S-TIER PASS, Template 2 left menu (M2-PATCHES.md §82/§83)
   Lived at the tail of smart-forum-premium.css through §82 v1–v5; extracted
   verbatim into its own layer so it can be toggled (§83). Gated by General
   Settings → "Sidebar V2" (option sf_sidebar_v2) in
   class-smart-forum-public.php: DEFAULT-ON like sf_premium_design — anything
   but an explicit 'no' loads it — NOT fail-closed like lagoon/dark, by
   Marc's call ("default ships ON to V2"). With the toggle off this file is
   never requested and premium.css renders byte-for-byte as before §82
   existed (min twin reproduced at its exact pre-§82 96707 bytes).
   Depends on the premium handle: it retunes premium's "── 5. LEFT SIDEBAR
   RHYTHM" and must print after it. Order vs lagoon/dark is irrelevant —
   everything below rides the --sfp-* tokens (dark re-points them) and the
   admin-DB vars (§30 / lagoon re-point those); no accent literals, so the
   lagoon-contracts inventory never sees this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dividers become fading hairlines. Full-bleed gainsboro cuts chop the rail
   into shelves; a fade that dies before the edges reads as air. border-image
   also swallows the two gainsboro literals style-2 never re-tinted
   (smart-forum-public.css :4028 first-menu-item, :4048 border-bottom-page-list)
   plus the base :4030/:4031 pair. Only the bottom border has width on these,
   so the gradient paints nowhere else. */
#sf-primary .sf-menu-style-2 .sf-w-sidebar .sf-sb-menu-link,
#sf-primary .sf-menu-style-2 .sf-circle-community.sf-this-first-menu-item,
#sf-primary .sf-menu-style-2 .sf-circle-community.sf-show-border-bottom-page-list,
#sf-primary .sf-menu-style-2 .sf-links-menu-divider,
#sf-primary .sf-menu-style-2 .sf-sb-menu-link.sf-feed-community-menu-first .sf-feed-community-menu,
#sf-primary .sf-menu-style-2 .sf-sb-menu-link.sf-feed-community-menu-second .sf-community-list {
  border-image: linear-gradient(90deg, transparent, var(--sfp-border) 14%, var(--sfp-border) 86%, transparent) 1 !important;
}

/* Rhythm — the top group floated in a 20px void; tighten its lead-in. */
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-w-sidebar .sf-sb-menu-link {
  padding-top: 14px !important;
}

/* Group-header rows (v4 — scope narrowed): the row-pill treatment now lives
   ONLY on the lower link groups (NAV TOOLS / RESOURCES, inside
   .sf-links-menu-divider). The middle category strip (CONVERSATION/SINGING/
   VIP) deliberately falls back to its stock airy spacing — with chips above
   and tiles below, the quiet strip is what balances the composition
   (user-called: "maybe the groups can remain closer to before"). */
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-links-menu-divider .sf-bg-c-sidebar .sf-circle-community {
  padding: 2px 12px !important;
}
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-links-menu-divider .sf-bg-c-sidebar .sf-sidebar-menu-category-btn {
  padding: 9px 8px !important;
  border-radius: 8px !important;
  transition: background var(--sfp-speed) !important;
}
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-links-menu-divider .sf-bg-c-sidebar .sf-sidebar-menu-category-btn:hover {
  background: var(--sfp-accent-soft) !important;
}
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-links-menu-divider .sf-bg-c-sidebar:first-of-type .sf-circle-community { padding-top: 8px !important; }

/* Icon chips — the sidebar's new signature. Primary nav icons sit in 30px
   soft-rounded tiles: quiet canvas-tint at rest, accent-soft wash on hover,
   solid accent when active. Active glyph is --sfp-surface, not #fff, so dark
   mode (light accent on dark surface) inverts correctly for free. This is
   what separates primary nav from the quiet sub-links below it. */
#sf-primary .sf-w-sidebar a.sf-menu-link-text { padding: 7px 10px !important; gap: 12px !important; }
#sf-primary .sf-w-sidebar a.sf-menu-link-text i {
  width: 30px !important; height: 30px; min-width: 30px !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sfp-canvas-tint);
  border-radius: 9px;
  font-size: 13px !important;
  color: var(--sfp-ink-3) !important;
  transition: background var(--sfp-speed), color var(--sfp-speed), transform var(--sfp-speed) var(--sfp-ease) !important;
}
#sf-primary .sf-w-sidebar a.sf-menu-link-text:hover i {
  background: var(--sfp-accent-soft);
  color: var(--sfp-accent) !important;
  transform: scale(1.06);
}
#sf-primary .sf-w-sidebar a.sf-menu-link-text.sf-active-link i {
  background: var(--sfp-accent) !important;
  color: var(--sfp-surface) !important;
  box-shadow: 0 4px 10px -2px var(--sfp-accent-mid);
}

/* Category rows — chevron pulled in off the edge, dropped to ink-4 like the
   eyebrow it belongs to, accent on row hover, and it finally answers the
   accordion: base style-2 pins the border-drawn arrow at rotate(-45deg)
   (down) forever because :291 blanks the \f106 glyph swap. Spin it to
   pointing-up when the group is open. */
#sf-primary .sf-menu-style-2 .sf-menu-show-category-only .sf-sidebar-menu-category-btn .sf-menu-accordion {
  right: 2px;
}
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-menu-show-category-only .sf-sidebar-menu-category-btn .sf-menu-accordion i {
  border-color: var(--sfp-ink-4);
  transition: transform .28s var(--sfp-ease), border-color var(--sfp-speed);
}
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-menu-show-category-only .sf-sidebar-menu-category-btn:hover .sf-menu-accordion i {
  border-color: var(--sfp-accent);
}
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-menu-show-category-only .sf-circle-community.sf-show-sub-menu .sf-sidebar-menu-category-btn .sf-menu-accordion i {
  transform: rotate(135deg);
}
#sf-primary .sf-sidebar-menu-category-btn h3.sf-text-current a { transition: color var(--sfp-speed) !important; }

/* Active pill — soft→mid accent gradient with a hairline -mid ring; enough
   presence to anchor the whole rail, still all tint, no raw accent fill. */
#sf-primary .sf-standard-layout-v2__sidebar a.sf-menu-link-text.sf-active-link {
  background: linear-gradient(135deg, var(--sfp-accent-soft), var(--sfp-accent-mid)) !important;
  box-shadow: inset 0 0 0 1px var(--sfp-accent-mid) !important;
}
#sf-primary .sf-w-sidebar .sf-community-list a.sf-active-link {
  box-shadow: inset 0 0 0 1px var(--sfp-accent-mid) !important;
}

/* Group rail — the 3px full-height bar thins to 2px and dies at both ends.
   Color still rides --sf-left-menu-active-border-color so the §30 blurple
   tint and lagoon's blue re-point both keep flowing through it. */
#sf-primary .sf-community-menu-column.sf-menu-style-2 .sf-community-list-wrapper ul.sf-community-list:before {
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--sf-left-menu-active-border-color) 18%, var(--sf-left-menu-active-border-color) 82%, transparent);
}

/* Sub-items — 2px lean-in on hover. Restates the "── 5" transition list plus
   transform; reduced-motion is already flattened globally (:865). */
#sf-primary .sf-w-sidebar .sf-community-list li a {
  transition: background var(--sfp-speed), color var(--sfp-speed), transform var(--sfp-speed) var(--sfp-ease) !important;
}
#sf-primary .sf-w-sidebar .sf-community-list li a:hover { transform: translateX(2px); }

/* Keyboard pass — token focus ring on every sidebar link. */
#sf-primary .sf-w-sidebar a:focus-visible {
  outline: none !important;
  box-shadow: var(--sfp-shadow-focus) !important;
}

/* Mini-chips (v3, user-asked): the 30px primary chips made the sub-rows read
   minuscule, so forums and link-list items speak the same tile language one
   size down — 24px, radius 7. Hierarchy now lives in tile size instead of
   icon-vs-no-icon. Primary .sf-menu-link-text rows ("Latest from Marc" lives
   inside a .sf-community-list li) are excluded — they keep the 30px chip. */
#sf-primary .sf-w-sidebar .sf-community-list li a:not(.sf-menu-link-text) {
  font-size: 14px !important;
  padding: 5px 10px !important;
}
#sf-primary .sf-w-sidebar .sf-community-list li a:not(.sf-menu-link-text) i {
  width: 24px !important; height: 24px; min-width: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--sfp-canvas-tint);
  border-radius: 7px;
  font-size: 11px !important;
  color: var(--sfp-ink-3) !important;
  transition: background var(--sfp-speed), color var(--sfp-speed) !important;
}
#sf-primary .sf-w-sidebar .sf-community-list li a:not(.sf-menu-link-text):hover i {
  background: var(--sfp-accent-soft);
  color: var(--sfp-accent) !important;
}
#sf-primary .sf-w-sidebar .sf-community-list li a:not(.sf-menu-link-text).sf-active-link i {
  background: var(--sfp-accent) !important;
  color: var(--sfp-surface) !important;
}

/* Forum rows carry a term-coloured DOT (inline style from the admin's
   category colour), not an <i>. The span itself becomes the 24px tile: an
   inset surface wash knocks the inline colour back to a tint, and ::after
   re-draws the raw colour as an 8px core — background-color:inherit on a
   pseudo-element reads the originating span's inline value, so every forum
   tile self-tints to its own category colour with zero PHP. */
#sf-primary .sf-w-sidebar .sf-community-list a span.sf-community-dot {
  width: 24px !important; height: 24px !important;
  border-radius: 7px !important;
  position: relative;
  opacity: 1;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 24px color-mix(in srgb, var(--sfp-surface) 84%, transparent);
}
#sf-primary .sf-w-sidebar .sf-community-list a span.sf-community-dot::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 999px;
  background-color: inherit;
}

/* Rows with neither an <i> nor a dot: NO ghost tile (v5). Short-titled
   forums ship emoji bullets at the head of their names — a fallback tile
   next to an emoji doubles the leading glyph (user screenshot, 2026-08-18).
   The emoji IS the icon; let it stand alone. */