/* ─────────────────────────────────────────────────────────────────────
 * V2/styles/sidebar.css
 * Floating sidebar — verbatim port of sidebar-standalone_updated.html
 * Token substitution (reference → V2):
 *   --glass-frosted / --glass-ground → --g-frosted / --g-ground
 *   --glass-border / --glass-border-strong → --g-border / --g-border-strong
 *   --shadow-glass  → --sh-2
 *   --glass-inset-top / -bottom → --g-inset-top / --g-inset-bottom
 *   --glass-focus   → --g-focus
 *   --glass-solid   → --g-solid
 *   --shadow-glow-teal → --sh-glow-teal
 *   --mono          → var(--font-mono)
 *   --sans          → var(--font-body)
 * data-module values adapted: assess→compete, find→opp
 * ───────────────────────────────────────────────────────────────────── */

/* ── Icon system tokens (per-theme, scoped to .sidebar-nav) ── */
[data-theme="dark"] .sidebar-nav {
  --icon-muted:        rgba(255,255,255,0.35);
  --icon-muted-strong: rgba(255,255,255,0.6);
  --icon-active:       #ffffff;
  --icon-active-glow:  rgba(255,255,255,0.4);
  --icon-bg-solid:     #0B1221;
  --sb-bg:            linear-gradient(180deg, var(--g-frosted), var(--g-ground));
  --sb-border:        var(--g-border-strong);
  --sb-shadow:
    var(--sh-2),
    inset 0 1px 0 var(--g-inset-top),
    inset 0 -1px 0 var(--g-inset-bottom);
  --sb-divider:       var(--g-border);
  --sb-section:       rgba(255,255,255,0.35);
  --sb-label:         rgba(255,255,255,0.88);
  --sb-sub:           rgba(255,255,255,0.45);
  --sb-tooltip-bg:    var(--g-solid);
  --sb-tooltip-color: #fff;
  --sb-pin-hover:     var(--g-ground);
}
[data-theme="light"] .sidebar-nav, .sidebar-nav {
  --icon-muted:        rgba(15,23,42,0.35);
  --icon-muted-strong: rgba(15,23,42,0.65);
  --icon-active:       #0f172a;
  --icon-active-glow:  rgba(15,23,42,0.2);
  --icon-bg-solid:     #ffffff;
  --sb-bg:            linear-gradient(180deg, var(--g-frosted), var(--g-ground));
  --sb-border:        var(--g-border-strong);
  --sb-shadow:
    var(--sh-2),
    inset 0 1px 0 var(--g-inset-top),
    inset 0 -1px 0 var(--g-inset-bottom);
  --sb-divider:       var(--g-border);
  --sb-section:       rgba(15,23,42,0.4);
  --sb-label:         rgba(15,23,42,0.88);
  --sb-sub:           rgba(15,23,42,0.45);
  --sb-tooltip-bg:    var(--g-solid);
  --sb-tooltip-color: #0f172a;
  --sb-pin-hover:     var(--g-ground);
}

/* Light-mode icon strength boost */
[data-theme="light"] .sidebar-item:not(.active) .ciq-ring,
[data-theme="light"] .sidebar-item:not(.active) .ciq-axis {
  opacity: 0.85;
  stroke: rgba(15,23,42,0.78);
}
[data-theme="light"] .sidebar-item:not(.active) .eiq-bridge,
[data-theme="light"] .sidebar-item:not(.active) .eiq-edge {
  opacity: 0.9;
  stroke: rgba(15,23,42,0.75);
}
[data-theme="light"] .sidebar-item:not(.active) .eiq-node,
[data-theme="light"] .sidebar-item:not(.active) .eiq-node-r {
  fill: rgba(15,23,42,0.7);
}
[data-theme="light"] .sidebar-item:not(.active) .ws-bracket {
  stroke: rgba(15,23,42,0.85);
  stroke-width: 6;
}

/* ── Hide on mobile (bottom-bar takes over) ── */
@media (max-width: 768px) {
  .sidebar-nav { display: none !important; }
}

/* ── Sidebar shell — compact floating vertical capsule ── */
.sidebar-nav {
  position: fixed;
  top: 50%;
  left: 8px;
  right: auto;
  transform: translate(0, -50%);
  width: 56px;
  max-height: min(320px, 50vh);
  z-index: 55;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
  padding: 3px 2px;
  gap: 0;
  background: var(--sb-bg);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--sb-border);
  border-radius: 20px;
  box-shadow: var(--sb-shadow);
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1),
              border-radius 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  animation: sidebar-entrance 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both,
             sb-glow-pulse 0.8s ease 1.0s both;
  font-family: var(--font-body);
}
.sidebar-nav.sb-revealed { animation: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 35%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  transition: background 1.2s ease;
}
.sidebar-nav:hover::before {
  background: linear-gradient(190deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 30%, transparent 55%);
}
.sidebar-nav > *:not(.sidebar-active-pill) { position: relative; z-index: 1; }
.sidebar-active-pill { z-index: 0 !important; }

/* Entrance animations */
@keyframes sidebar-entrance {
  0%   { opacity: 0; transform: translate(-30px, -50%); }
  65%  { opacity: 1; transform: translate(4px, -50%); }
  100% { opacity: 1; transform: translate(0, -50%); }
}
@keyframes sb-icon-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.sidebar-nav:not(.sb-revealed) .sidebar-item,
.sidebar-nav:not(.sb-revealed) .sidebar-divider,
.sidebar-nav:not(.sb-revealed) .sidebar-section-title {
  animation: sb-icon-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(3)  { animation-delay: 0.35s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(4)  { animation-delay: 0.42s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(5)  { animation-delay: 0.50s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(6)  { animation-delay: 0.58s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(7)  { animation-delay: 0.66s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(8)  { animation-delay: 0.74s; }
.sidebar-nav:not(.sb-revealed) .sidebar-divider            { animation-delay: 0.30s; }
.sidebar-nav:not(.sb-revealed) .sidebar-section-title      { animation-delay: 0.32s; }

@keyframes sb-glow-pulse {
  0%   { box-shadow: var(--sb-shadow); }
  50%  { box-shadow: var(--sb-shadow), 0 0 22px rgba(13,148,136,0.25), 0 0 6px rgba(13,148,136,0.15); }
  100% { box-shadow: var(--sb-shadow); }
}
[data-theme="dark"] .sidebar-nav:not(.sb-revealed) {
  animation: sidebar-entrance 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both,
             sb-glow-pulse-dark 0.8s ease 1.0s both;
}
@keyframes sb-glow-pulse-dark {
  0%   { box-shadow: var(--sb-shadow); }
  50%  { box-shadow: var(--sb-shadow), 0 0 24px rgba(94,234,212,0.20), 0 0 8px rgba(94,234,212,0.12); }
  100% { box-shadow: var(--sb-shadow); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-nav { animation: none !important; opacity: 1; transform: translate(0, -50%); }
  .sidebar-nav .sidebar-item,
  .sidebar-nav .sidebar-divider,
  .sidebar-nav .sidebar-section-title { animation: none !important; opacity: 1; transform: none; }
}

/* Expanded: hover + pinned */
.sidebar-nav:hover:not(.pinned),
.sidebar-nav.pinned {
  width: 200px;
  z-index: 56;
  border-radius: 14px;
  max-height: min(440px, 70vh);
}

/* ── Morphing active pill ── */
.sidebar-active-pill {
  position: absolute;
  left: 1px; right: 1px;
  top: 0; height: 0;
  border-radius: 18px;
  pointer-events: none;
  background-color: rgba(13,148,136,0.08);
  border: 1.5px solid rgba(13,148,136,0.18);
  transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.3s cubic-bezier(0.22, 1.0, 0.36, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
/* CTK 2026-05-12: pill bg/border bumped so the active-module highlight
   reads cleanly against the navy sidebar in collapsed view. Previously
   used `var(--g-focus)` (~8-10% teal) + a 22-28% border — too faint;
   users saw the brighter 22x22 icon-square pseudo-glow and read THAT
   as the "active highlight," which only hugs the icon and not the text
   label below ("doesn't hug the module / looks messy"). Bumping to
   ~16% light / ~22% dark bg with a 0.42-0.55 teal border makes the
   pill the dominant active affordance, so the highlight cleanly hugs
   the FULL button (icon + label). */
[data-theme="light"] .sidebar-active-pill {
  background: rgba(13,143,134,0.16);
  border-color: rgba(13,143,134,0.55);
  box-shadow:
    0 0 22px rgba(13,143,134,0.18),
    inset 0 1px 0 rgba(255,255,255,0.55);
}
[data-theme="dark"] .sidebar-active-pill {
  background: rgba(61,187,176,0.22);
  border-color: rgba(61,187,176,0.55);
  box-shadow:
    0 0 22px rgba(61,187,176,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
/* Active pill heartbeat */
.sidebar-active-pill { animation: sidebar-pill-heartbeat 2.6s ease-in-out infinite; }
@keyframes sidebar-pill-heartbeat {
  0%, 100% {
    box-shadow: 0 1px 4px rgba(var(--pill-rgb, 13,148,136), 0.08);
    border-color: rgba(var(--pill-rgb, 13,148,136), 0.22);
  }
  50% {
    box-shadow: 0 1px 14px rgba(var(--pill-rgb, 13,148,136), 0.22),
                0 0 0 1px rgba(var(--pill-rgb, 13,148,136), 0.05);
    border-color: rgba(var(--pill-rgb, 13,148,136), 0.34);
  }
}
[data-theme="dark"] .sidebar-active-pill { animation: sidebar-pill-heartbeat-dark 2.6s ease-in-out infinite; }
@keyframes sidebar-pill-heartbeat-dark {
  0%, 100% {
    box-shadow: 0 0 12px rgba(13,148,136,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
    border-color: rgba(61,187,176,0.28);
  }
  50% {
    box-shadow: 0 0 22px rgba(13,148,136,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
    border-color: rgba(61,187,176,0.44);
  }
}

/* ── Dividers & section titles ── */
.sidebar-divider {
  flex-shrink: 0;
  height: 1px;
  margin: 3px 4px;
  border: none;
  background: var(--sb-divider);
  opacity: 0.6;
}
.sidebar-section-title {
  font-size: 7.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sb-section);
  font-family: var(--font-mono);
  padding: 2px 1px;
  margin: 0;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.25;
  opacity: 0.6;
  max-width: 100%;
  box-sizing: border-box;
}
.sidebar-nav:hover .sidebar-section-title,
.sidebar-nav.pinned .sidebar-section-title {
  font-size: 7.5px;
  text-align: left;
  padding: 2px 6px;
  opacity: 1;
}

/* ── Sidebar items ── */
.sidebar-item {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 3px 1px;
  border: none; background: none; cursor: pointer;
  border-radius: 6px;
  color: var(--sb-label);
  text-align: center; font-family: inherit;
  white-space: nowrap; overflow: visible;
  text-decoration: none;
  transition: background 0.2s ease, gap 0.25s ease, max-height 0.25s ease;
  min-width: 44px;
}
.sidebar-item-name {
  display: block;
  font-size: 7.5px; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: -0.015em;
  color: var(--sb-label); line-height: 1.2;
  white-space: normal;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: center;
  transition: color 0.2s ease;
}
.sidebar-item.active .sidebar-item-name { color: var(--sb-label); font-weight: 700; }
/* Active-state outer glow halo — NOT-DONE-6C iter2 (CTK directive 2026-05-11):
 * Prior iteration used a tight halo with spread radius (0 0 22px 3px) that
 * read as wrapping only the icon container. CTK reviewed and flagged the
 * geometry as too tight. Per V1 sidebar-standalone_updated.html lines
 * 537-573 (.sidebar-active-pill + --shadow-glow-teal), the glow is a soft
 * 30px blur with NO spread — extending well past the item bounds so the
 * halo visibly encompasses the full sidebar-item (icon + label). We apply
 * the V1 box-shadow/border values verbatim (CSS var resolutions from V1):
 *   --shadow-glow-teal light: 0 0 30px rgba(13,143,134,0.06)
 *   --shadow-glow-teal dark:  0 0 30px rgba(61,187,176,0.15)
 *   --glass-inset-top light:  rgba(255,255,255,0.85)
 *   --glass-inset-top dark:   rgba(255,255,255,0.10)
 *   --glass-focus light: rgba(13,143,134,0.06)
 *   --glass-focus dark:  rgba(88,239,224,0.08)
 * The pill (.sidebar-active-pill) still provides the JS-positioned active
 * background fill; the item's box-shadow provides the standalone halo so
 * the visual reads even when the pill is mid-transition. */
.sidebar-item.active {
  border-radius: 12px;
  box-shadow:
    0 0 30px rgba(13,143,134,0.06),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
[data-theme="dark"] .sidebar-item.active {
  box-shadow:
    0 0 30px rgba(61,187,176,0.15),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.sidebar-nav:hover .sidebar-item,
.sidebar-nav.pinned .sidebar-item {
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 6px 8px;
  max-height: 72px;
  overflow: hidden;
}
.sidebar-nav:hover .sidebar-item-name,
.sidebar-nav.pinned .sidebar-item-name { display: none; }
.sidebar-item:hover:not(.active) { background: var(--sb-pin-hover); }

/* ── Icon container ──
 * NOT-DONE-6C V1 parity (CTK 2026-05-11): the prior NOT-DONE-3 fix sized
 * the container to 44×32 to fill "click-target dead air"; visual review
 * showed this drifted from V1 spec. V1 sidebar-standalone_updated.html
 * line 651 defines the icon container at 22×22 with border-radius 5px.
 * Reverting to that V1 baseline so the icon container matches the SVG.
 * Click target remains the parent .sidebar-item button (28+ effective
 * via its row padding); active glow now wraps the whole item via the
 * .sidebar-item.active outer glow halo below + the morphing pill.
 */
.sidebar-item-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  background: rgba(13,148,136,0.06);
  border: 1px solid rgba(13,148,136,0.12);
  border-radius: 5px;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.35),
    0 1px 2px rgba(15,23,42,0.04);
  transition: background 0.25s cubic-bezier(0.32,0.72,0,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}
.sidebar-item-icon svg { width: 22px; height: 22px; display: block; overflow: visible; }
.sidebar-item:hover:not(.active) .sidebar-item-icon {
  background: rgba(13,148,136,0.11);
  border-color: rgba(13,148,136,0.22);
}
.sidebar-item.active .sidebar-item-icon {
  background: linear-gradient(180deg, rgba(13,148,136,0.20), rgba(13,148,136,0.12));
  border-color: rgba(13,148,136,0.32);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.55),
    inset 0 -0.5px 0 rgba(13,148,136,0.22),
    0 2px 8px rgba(13,148,136,0.20);
}
[data-theme="dark"] .sidebar-item-icon {
  background: rgba(13,148,136,0.20);
  border-color: rgba(13,148,136,0.32);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.10),
    0 1px 2px rgba(0,0,0,0.25);
}
[data-theme="dark"] .sidebar-item:hover:not(.active) .sidebar-item-icon {
  background: rgba(13,148,136,0.28);
  border-color: rgba(13,148,136,0.42);
}
[data-theme="dark"] .sidebar-item.active .sidebar-item-icon {
  background: linear-gradient(180deg, rgba(13,148,136,0.32), rgba(13,148,136,0.20));
  border-color: rgba(13,148,136,0.44);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.16),
    inset 0 -0.5px 0 rgba(13,148,136,0.32),
    0 2px 8px rgba(13,148,136,0.28);
}

/* ── Per-module accent overrides ─────────────────────────────────────────
 * NOT-DONE-6C V1 parity (CTK 2026-05-11): the per-module backplate
 * overrides (compete=amber, opp=blue) drifted from V1 spec. V1 uses a
 * single neutral teal backplate for ALL modules; module identity reads
 * via the glyph stroke/fill alone, not the container fill. Reverted to
 * teal-only backplate. The glyph-color overrides below (SVG class
 * targeting on .ws-*/.ciq-*/.eiq-*) remain — they paint the inside SVG,
 * not the container, and V1 has the same glyph-color treatment.
 */

/* WhitespaceIQ glyph color overrides — pull from blue accent on hover/active */
.sidebar-item[data-module="opp"] .ws-inner    { fill: var(--teal); opacity: 0.18; }
.sidebar-item[data-module="opp"] .ws-scan-line{ stroke: var(--teal); }
.sidebar-item[data-module="opp"] .ws-dot      { fill: var(--teal); }
.sidebar-item[data-module="opp"].active .ws-inner { fill: var(--teal); opacity: 0.32; }
.sidebar-item[data-module="opp"]:hover:not(.active) .ws-inner { opacity: 0.26; }
[data-theme="dark"] .sidebar-item[data-module="opp"] .ws-inner       { opacity: 0.28; }
[data-theme="dark"] .sidebar-item[data-module="opp"].active .ws-inner{ opacity: 0.46; }

/* ── Text content (only visible expanded) ── */
.sidebar-item-content {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; overflow: hidden;
  opacity: 0; max-width: 0; max-height: 0;
  transition: opacity 0.2s ease 0.08s, max-width 0.25s ease, max-height 0.25s ease;
}
.sidebar-nav:hover .sidebar-item-content,
.sidebar-nav.pinned .sidebar-item-content { opacity: 1; max-width: 186px; max-height: 60px; }

.sidebar-item-label {
  font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--sb-label);
}
.sidebar-item-label .iq { font-weight: 800; color: inherit; }

/* ── Description sub-label — insight-chip style (CTK port: revealed on hover/pin) ── */
.sidebar-item-desc {
  font-size: 9px;
  font-weight: 500;
  font-family: var(--font-body);
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: normal;
  color: rgba(13,148,136,0.92);
  background: rgba(13,148,136,0.08);
  border-radius: 4px;
  padding: 0;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.22s ease 0.1s, max-height 0.28s ease, margin-top 0.22s ease, padding 0.22s ease;
}
.sidebar-nav:hover .sidebar-item-desc,
.sidebar-nav.pinned .sidebar-item-desc {
  opacity: 1;
  max-height: 56px;
  margin-top: 5px;
  padding: 4px 6px;
}
[data-theme="dark"] .sidebar-nav:hover .sidebar-item-desc,
[data-theme="dark"] .sidebar-nav.pinned .sidebar-item-desc {
  color: rgba(94,234,212,0.88);
  background: rgba(94,234,212,0.08);
}
[data-theme="light"] .sidebar-nav:hover .sidebar-item-desc,
[data-theme="light"] .sidebar-nav.pinned .sidebar-item-desc {
  color: rgba(13,100,90,0.72);
}
.sidebar-item-sub {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Context pills ── */
.sb-context {
  display: flex; justify-content: center; gap: 3px;
  padding: 0 2px;
  overflow: hidden;
  max-height: 14px;
}
.sb-context-tag {
  font-size: 6.5px; font-weight: 700; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--teal); opacity: 0.8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 58px; line-height: 1;
}
.sb-context { display: none; }

/* ── External link arrow ── */
.sidebar-item-external {
  flex-shrink: 0; margin-left: auto;
  color: var(--sb-label);
  opacity: 0; width: 0; overflow: hidden;
  transition: opacity 0.2s ease 0.12s, width 0.25s ease;
}
.sidebar-nav:hover .sidebar-item-external,
.sidebar-nav.pinned .sidebar-item-external { opacity: 0.4; width: 12px; }

/* ── Tooltips ── */
.sidebar-item-tooltip {
  display: none;
  position: absolute;
  left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 6px 10px;
  background: var(--sb-tooltip-bg);
  color: var(--sb-tooltip-color);
  font-size: 10px; font-weight: 600; line-height: 1.35;
  border-radius: 7px;
  white-space: normal; max-width: min(260px, 70vw); text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: none; z-index: 100;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-item-tooltip::before {
  content: '';
  position: absolute;
  left: -4px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--sb-tooltip-bg);
}
@media (hover: hover) and (pointer: fine) {
  .sidebar-item:hover .sidebar-item-tooltip {
    display: block; opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* ── Footer & pin ── */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 3px;
  flex-shrink: 0;
}
.sidebar-nav:hover .sidebar-footer,
.sidebar-nav.pinned .sidebar-footer { margin-top: auto; }
.sidebar-pin-btn {
  display: flex; align-items: center; gap: 4px;
  min-width: 22px; min-height: 22px;
  padding: 3px 5px;
  border: none; background: none; cursor: pointer;
  color: var(--sb-sub); font-family: inherit;
  font-size: 11px; font-weight: 500;
  border-radius: 7px;
  white-space: nowrap; overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease;
}
.sidebar-pin-btn:hover { background: var(--sb-pin-hover); color: var(--sb-label); }
.sidebar-pin-btn svg { flex-shrink: 0; }
.sidebar-pin-btn .pin-icon { fill: none; stroke: var(--icon-muted-strong); transition: transform 0.25s ease, stroke 0.25s ease; transform-origin: 12px 12px; }
.sidebar-pin-btn.is-pinned { background: var(--sb-pin-hover); color: var(--sb-label); }
.sidebar-pin-btn.is-pinned .pin-icon { transform: rotate(20deg); stroke: var(--sb-label); }
.sidebar-pin-label { opacity: 0; transition: opacity 0.2s ease 0.08s; }
.sidebar-nav:hover .sidebar-pin-label,
.sidebar-nav.pinned .sidebar-pin-label { opacity: 1; }

/* ════════════════════════════════════════════════════
   ANIMATED SVG GLYPHS — WhitespaceIQ / CompeteIQ / PartnerIQ / ExploreIQ
   ════════════════════════════════════════════════════ */

/* WhitespaceIQ */
.ws-bracket   { stroke: var(--icon-muted-strong); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: stroke 0.3s; }
.ws-inner     { fill: var(--teal); opacity: 0.14; transition: fill 0.3s, opacity 0.3s; }
.ws-scan-line { stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.ws-dot       { fill: var(--teal); opacity: 0.55; transition: opacity 0.3s; }
.ws-frame-g   { transform-box: fill-box; transform-origin: 50% 50%; }
[data-theme="dark"] .ws-inner { opacity: 0.24; }
[data-theme="dark"] .sidebar-item.active .ws-inner { opacity: 0.42; }

.sidebar-item.active .ws-bracket   { stroke: var(--icon-active); }
.sidebar-item.active .ws-inner     { fill: var(--teal); opacity: 0.28; }
.sidebar-item.active .ws-scan-line { animation: ws-scan 2.8s ease-in-out infinite; }
.sidebar-item.active .ws-dot       { opacity: 1; }
.sidebar-item.active .ws-dot-1     { animation: ws-dot-pulse 2.8s ease infinite 0.2s; }
.sidebar-item.active .ws-dot-2     { animation: ws-dot-pulse 2.8s ease infinite 0.8s; }
.sidebar-item.active .ws-dot-3     { animation: ws-dot-pulse 2.8s ease infinite 1.4s; }
.sidebar-item.active .ws-frame-g   { animation: ws-frame-breathe 2.8s ease-in-out infinite; }

@keyframes ws-scan          { 0%,100% { opacity: 0; transform: translateY(-16px); } 15% { opacity: 0.8; } 50% { opacity: 0.9; transform: translateY(16px); } 85% { opacity: 0.8; } }
@keyframes ws-dot-pulse     { 0%,100% { opacity: 0.25; r: 2.5; } 40%,60% { opacity: 1; r: 3.5; } }
@keyframes ws-frame-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

.sidebar-item[data-module="opp"]:hover:not(.active) .ws-scan-line { animation: ws-scan-hover 1s ease-out 1; }
.sidebar-item[data-module="opp"]:hover:not(.active) .ws-dot-1     { animation: ws-dot-hover 1s ease-out 1; }
@keyframes ws-scan-hover { 0% { opacity: 0; transform: translateY(-16px); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes ws-dot-hover  { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* CompeteIQ */
/* CompeteIQ glyph — target + competitor blips. Uses --mod-accent
 * (amber #d97706) on the active item; muted neutral when inactive. */
.ciq-ring   { fill: none; stroke: var(--icon-muted-strong); opacity: 0.55; transition: stroke 0.3s, opacity 0.3s; }
.ciq-tick   { stroke: var(--icon-muted-strong); opacity: 0.45; transition: stroke 0.3s, opacity 0.3s; }
.ciq-axis   { stroke: var(--icon-muted-strong); opacity: 0.15; transition: stroke 0.3s; }
.ciq-center { fill: var(--icon-muted-strong); transition: fill 0.3s; }
.ciq-blip   { fill: var(--icon-muted-strong); opacity: 0.55; transition: opacity 0.3s, fill 0.3s; }
.ciq-sweep  { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.ciq-beam   { stroke: var(--icon-muted-strong); stroke-linecap: round; }
.ciq-wedge  { fill: var(--icon-muted-strong); }

.sidebar-item.active .ciq-sweep  { opacity: 1; animation: ciq-spin 2.4s linear infinite; }
.sidebar-item.active .ciq-blip   { animation: ciq-blip-pulse 2.4s ease infinite; }
.sidebar-item.active .ciq-blip-1 { animation-delay: 0.3s; }
.sidebar-item.active .ciq-blip-2 { animation-delay: 1.0s; }
.sidebar-item.active .ciq-blip-3 { animation-delay: 1.7s; }
.sidebar-item[data-module="compete"].active .ciq-ring   { stroke: var(--teal); opacity: 0.95; }
.sidebar-item[data-module="compete"].active .ciq-tick   { stroke: var(--teal); opacity: 0.85; }
.sidebar-item[data-module="compete"].active .ciq-center { fill:   var(--teal); filter: drop-shadow(0 0 4px rgba(94,234,212,0.5)); }
.sidebar-item[data-module="compete"].active .ciq-blip   { fill:   var(--teal); opacity: 0.9; }
.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-ring   { stroke: var(--teal); opacity: 0.7; }
.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-tick   { stroke: var(--teal); opacity: 0.6; }
.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-center { fill:   var(--teal); }
.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-blip   { fill:   var(--teal); opacity: 0.7; }
@keyframes ciq-blip-pulse { 0%,100% { opacity: 0.45; transform: scale(1); } 35%,55% { opacity: 1; transform: scale(1.18); } }

@keyframes ciq-spin { to { transform: rotate(360deg); } }
@keyframes ciq-blip { 0%,100% { opacity: 0.2; } 35%,55% { opacity: 1; } }

.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-sweep { opacity: 1; animation: ciq-sweep-hover 1s cubic-bezier(0.22,1,0.36,1) 1; }
@keyframes ciq-sweep-hover { 0% { transform: rotate(0deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: rotate(200deg); opacity: 0; } }

/* PartnerIQ */
.piq-shake      { fill: var(--teal, #0d9488); transition: fill 0.3s; transform-box: fill-box; transform-origin: 50% 65%; }
.piq-ring-track { fill: none; stroke: var(--icon-muted); stroke-width: 2; opacity: 0; }
.piq-ring-prog  { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: 56.5; opacity: 0; }
.piq-fill       { fill: var(--teal); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.piq-check      { fill: none; stroke: rgba(11,15,26,0.9); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; }
.piq-pulse      { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0; }

.sidebar-item.active .piq-shake      { fill: var(--teal, #0d9488); animation: piq-spin 4s cubic-bezier(0.34,1.56,0.64,1) infinite; }
.sidebar-item.active .piq-ring-track { animation: piq-track 4s ease-in-out infinite; }
.sidebar-item.active .piq-ring-prog  { animation: piq-ring-draw 4s ease-in-out infinite; }
.sidebar-item.active .piq-fill       { animation: piq-fill-anim 4s ease-in-out infinite; }
.sidebar-item.active .piq-check      { animation: piq-check-anim 4s ease-in-out infinite; }
.sidebar-item.active .piq-pulse      { animation: piq-pulse-anim 4s ease-in-out infinite; }

@keyframes piq-spin       { 0%   { transform: rotate(-180deg) scale(0.6); opacity: 0; } 22%  { transform: rotate(15deg) scale(1.05); opacity: 1; } 30%  { transform: rotate(-5deg) scale(1); } 38%,88%  { transform: rotate(0deg) scale(1); opacity: 1; } 95%,100% { transform: rotate(0deg) scale(0.9); opacity: 0; } }
@keyframes piq-track      { 0%,25% { opacity: 0; } 32%,82% { opacity: 0.3; } 90%,100% { opacity: 0; } }
@keyframes piq-ring-draw  { 0%,28% { stroke-dashoffset: 56.5; opacity: 0; } 35% { stroke-dashoffset: 56.5; opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 68%,82% { stroke-dashoffset: 0; opacity: 1; } 90%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes piq-fill-anim  { 0%,62% { opacity: 0; transform: scale(0); } 68% { opacity: 1; transform: scale(1.1); } 74%,82% { opacity: 1; transform: scale(1); } 90%,100% { opacity: 0; transform: scale(0); } }
@keyframes piq-check-anim { 0%,66% { opacity: 0; stroke-dashoffset: 20; } 74%,82% { opacity: 1; stroke-dashoffset: 0; } 90%,100% { opacity: 0; stroke-dashoffset: 20; } }
@keyframes piq-pulse-anim { 0%,68% { r: 9; opacity: 0; } 74% { r: 9; opacity: 0.4; } 84% { r: 18; opacity: 0; } 86%,100% { r: 18; opacity: 0; } }

.sidebar-item[data-module="strategy"]:hover:not(.active) .piq-shake     { fill: var(--icon-active); animation: piq-spin-hover 1.2s cubic-bezier(0.34,1.56,0.64,1) 1; }
.sidebar-item[data-module="strategy"]:hover:not(.active) .piq-ring-prog { animation: piq-ring-hover 1.2s ease-out 1; }
@keyframes piq-spin-hover { 0% { transform: rotate(-90deg) scale(0.8); opacity: 0.5; } 40% { transform: rotate(8deg) scale(1.05); opacity: 1; } 60% { transform: rotate(-3deg) scale(1); } 100% { transform: rotate(0deg) scale(1); opacity: 1; } }
@keyframes piq-ring-hover { 0% { stroke-dashoffset: 56.5; opacity: 0; } 30% { opacity: 0.8; } 100% { stroke-dashoffset: 20; opacity: 0; } }

/* ExploreIQ — knowledge graph clusters */
.eiq-node    { fill: var(--icon-muted-strong); transition: fill 0.3s; }
.eiq-node-r  { fill: var(--icon-muted-strong); transition: fill 0.3s; }
.eiq-edge    { stroke: var(--icon-muted-strong); stroke-width: 1.2; opacity: 0.22; fill: none; transition: stroke 0.3s; }
.eiq-edge-r  { stroke: var(--icon-muted-strong); stroke-width: 1.2; opacity: 0.22; fill: none; transition: stroke 0.3s; }
.eiq-bridge  { stroke: var(--icon-muted-strong); stroke-linecap: round; opacity: 0.35; fill: none; transition: stroke 0.3s; }
.eiq-pulse   { fill: var(--teal); opacity: 0; }
.eiq-cluster-l, .eiq-cluster-r { transform-box: fill-box; }

.sidebar-item.active .eiq-node-r,
.sidebar-item:hover  .eiq-node-r  { fill: var(--teal); }
.sidebar-item.active .eiq-edge-r,
.sidebar-item:hover  .eiq-edge-r  { stroke: var(--teal); opacity: 0.35; }
.sidebar-item.active .eiq-bridge,
.sidebar-item:hover  .eiq-bridge  { stroke: var(--teal); }
.sidebar-item.active .eiq-cluster-l { animation: eiq-slide-l 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-cluster-r { animation: eiq-slide-r 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-bridge-1  { animation: eiq-flash-1 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-bridge-2  { animation: eiq-flash-2 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-bridge-3  { animation: eiq-flash-3 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-pulse     { animation: eiq-center-pulse 3.2s ease-in-out infinite; }

@keyframes eiq-slide-l      { 0%,100% { transform: translate(10px,0); } 30%,70% { transform: translate(0,0); } }
@keyframes eiq-slide-r      { 0%,100% { transform: translate(-10px,0); } 30%,70% { transform: translate(0,0); } }
@keyframes eiq-flash-1      { 0%,20% { opacity: 0; stroke-dashoffset: 20; } 35%,65% { opacity: 0.9; stroke-dashoffset: 0; } 80%,100% { opacity: 0; stroke-dashoffset: -20; } }
@keyframes eiq-flash-2      { 0%,28% { opacity: 0; stroke-dashoffset: 20; } 42%,65% { opacity: 0.85; stroke-dashoffset: 0; } 80%,100% { opacity: 0; stroke-dashoffset: -20; } }
@keyframes eiq-flash-3      { 0%,36% { opacity: 0; stroke-dashoffset: 20; } 48%,65% { opacity: 0.8; stroke-dashoffset: 0; } 80%,100% { opacity: 0; stroke-dashoffset: -20; } }
@keyframes eiq-center-pulse { 0%,25% { opacity: 0; r: 0; } 40% { opacity: 0.55; r: 12; } 65% { opacity: 0.35; r: 20; } 80%,100% { opacity: 0; r: 26; } }

/* Idle breathing */
.sidebar-item:not(.active) .sidebar-item-icon {
  animation: dashiq-breathe 4.2s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
.sidebar-item[data-module="strategy"]:not(.active) .sidebar-item-icon { animation-delay: 0s; }
.sidebar-item[data-module="compete"]:not(.active)  .sidebar-item-icon { animation-delay: 1.4s; }
.sidebar-item[data-module="opp"]:not(.active)      .sidebar-item-icon { animation-delay: 0.7s; }
@keyframes dashiq-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.035); opacity: 1; }
}
.sidebar-item:hover:not(.active) .sidebar-item-icon { animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar-active-pill { transition: none !important; }
  .sidebar-nav { transition: width 0s, max-height 0s !important; }
  .sidebar-item.active .piq-shake,
  .sidebar-item.active .piq-ring-track,
  .sidebar-item.active .piq-ring-prog,
  .sidebar-item.active .piq-fill,
  .sidebar-item.active .piq-check,
  .sidebar-item.active .piq-pulse,
  .sidebar-item.active .ciq-sweep,
  .sidebar-item.active .ciq-blip,
  .sidebar-item.active .ws-scan-line,
  .sidebar-item.active .ws-dot,
  .sidebar-item.active .ws-frame-g,
  .sidebar-item.active .eiq-cluster-l,
  .sidebar-item.active .eiq-cluster-r,
  .sidebar-item.active .eiq-bridge,
  .sidebar-item.active .eiq-pulse { animation: none !important; }
  .sidebar-item:not(.active) .sidebar-item-icon,
  .sidebar-active-pill { animation: none !important; }
}

/* ── Tablet breakpoint ── */
@media (max-width: 1023px) and (min-width: 769px) {
  .sidebar-nav {
    left: 5px;
    width: 48px;
    padding: 3px 2px;
    border-radius: 14px;
  }
  .sidebar-item-icon { width: 20px; height: 20px; }
  .sidebar-item-icon svg { width: 20px; height: 20px; }
  .sidebar-item-name { font-size: 8.5px; letter-spacing: -0.02em; }
}

/* ════════════════════════════════════════════════════════════
   Sidebar (sb2) — Threaded Spine + Active Card · Sagmeister 2026-06-16
   ────────────────────────────────────────────────────────────
   Production implementation of the C5 ("NEW HYBRID") pattern from
   sidebar-redesigns.html. User directive: "it should work and move
   like the Threaded Spine + Active Card".

   Anatomy
   ────────
   · Always-on labeled rail — 216px wide at rest. No collapse mode;
     no hover-expand. The rail is a known fixture, not a surprise.
   · Threaded spine — a thin vertical line runs through the icon
     column behind every row, with a teal pulse traveling top-to-
     bottom continuously. The rail reads as ONE connected system,
     not four independent buttons.
   · Inactive row — icon tile + module name on a single line.
   · Active row — blooms into a teal card: icon + name top row,
     module's question on the next line, then a teal context pill
     with a glowing dot showing the live workspace anchor.

   Color
   ──────
   The sidebar is brand chrome → ALWAYS TEAL. Module identity
   lives on the top-nav active tab + the panel content (those
   rules are NOT scoped to #sidebar-nav.sb2 so they're untouched).
   --accent      = teal #0d9488 (border/glow — saturation reads)
   --accent-tint = teal #0d9488 light / #2dd4bf dark (fill — luma reads)
   ════════════════════════════════════════════════════════════ */

/* ── Collapsed-by-default rail ─────────────────────────────────────────
   2026-06-16 (CTK): The sb2 rail was always-on at 216px. Users requested
   it default to a compact icon column and expand on hover / when pinned.
   Collapsed = 64px (icons + spine only). Expanded = 216px (the full
   "Threaded Spine + Active Card" treatment).

   The rail floats above content; main content reserves only the
   collapsed-width clearance so hover-expand does NOT cause layout shift
   (the expanded rail overlays the panel). Pinning the rail still keeps
   it at 216px without overlay — same padding offset, content shifts. */
#sidebar-nav.sb2{
  position:fixed!important; left:16px!important; top:50%!important;
  transform:translateY(-50%)!important; opacity:1!important; z-index:120;
  animation:none !important;
  width:42px!important; min-width:42px!important; max-width:42px!important;
  height:auto!important; max-height:calc(100vh - 32px);
  display:flex; flex-direction:column; gap:4px;
  padding:6px 5px!important; border-radius:14px; overflow:visible;
  background:linear-gradient(180deg, var(--g-frosted), var(--g-ground))!important;
  border:1px solid var(--g-border-strong)!important;
  box-shadow:var(--sh-3), inset 0 1px 0 var(--g-inset-top)!important;
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  transition:
    width .26s cubic-bezier(0.32, 0.72, 0, 1),
    min-width .26s cubic-bezier(0.32, 0.72, 0, 1),
    max-width .26s cubic-bezier(0.32, 0.72, 0, 1),
    padding .26s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius .26s cubic-bezier(0.32, 0.72, 0, 1);
}
#sidebar-nav.sb2.pinned{
  width:42px!important; min-width:42px!important; max-width:42px!important;
  padding:6px 5px!important;
  border-radius:14px;
}
/* Section labels never show (rail never expands) — collapse their box so
   they don't add phantom vertical space inside the capsule. */
#sidebar-nav.sb2 .sb2-sec{ padding:0!important; max-height:0!important; opacity:0!important; }
/* Neutralize legacy `.sidebar-item` rules — the items carry BOTH `sb2-item`
   and `sidebar-item` classes, and the legacy min-width:44px overflowed the
   slim rail, making the active/hover highlight box stick out wider than the
   capsule. Keep every item (and its highlight) inside the rail. */
#sidebar-nav.sb2 .sb2-item.sidebar-item{ min-width:0!important; width:100%!important; box-sizing:border-box!important; }
#sidebar-nav.sb2 .sb2-item.active::after{ right:-6px!important; }
/* Active row should read as the SAME centered tile as the others, just
   brighter — drop its separate outer card background/border so all four
   rows share one identical, centered footprint (no nested double-box that
   reads as "misaligned"). The node tile keeps its active highlight. */
#sidebar-nav.sb2 .sb2-item.active{ background:transparent!important; border-color:transparent!important; box-shadow:none!important; }
/* Content reserves the COLLAPSED width only; expanded state overlays the
   panel during hover. When pinned, the rail stays open and content keeps
   its left padding (still 96px — close enough that the expansion reads
   as a docked panel rather than an overlay). */
/* Slim floating rail — reserves exactly its own footprint so panels never
   sit under it. Collapsed rail = 46px at left:16 (→ ~72px clearance).
   Pinned rail expands to 216px and docks (→ ~240px clearance). */
@media (min-width:769px){ #chrome-main.chrome-main{ padding-left:66px!important; } }
@media (min-width:769px){ #sidebar-nav.sb2.pinned ~ #chrome-main.chrome-main,
                          #sidebar-nav.sb2.pinned + * #chrome-main.chrome-main{ padding-left:240px!important; } }

/* ════ Threaded spine ════
   The connective line. Sits behind the icon column, runs floor-to-
   ceiling of the rail's content area, with a teal pulse traveling
   along it. Math:
   · Collapsed (64px rail, 8px padding): icon tile is centered in the
     ~48px content area → spine centered at left:31.
   · Expanded (216px rail, 12px padding): item-padding-left(8) +
     node-half(17) = 25 from item edge; +12 rail padding = 37 from
     rail edge → spine just left of icon center at left:35.
   Track current state via the parent :hover / .pinned selectors so the
   spine glides into position as the rail expands. */
.sb2 .sb2-spine{
  display:block !important;
  position:absolute;
  left:21px;
  top:18px;            /* clear of the first sb2-sec header */
  bottom:48px;         /* clear of the sidebar-footer pin button */
  width:2px;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    var(--g-border-strong) 12%,
    var(--g-border-strong) 88%,
    transparent 100%);
  z-index:0;
  overflow:visible;
  transition:left .26s cubic-bezier(0.32, 0.72, 0, 1);
}
#sidebar-nav.sb2.pinned .sb2-spine{ left:21px; }
.sb2 .sb2-spine .sb2-pulse{
  display:block !important;
  position:absolute;
  left:50%;
  width:6px; height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:var(--teal, #0d9488);
  box-shadow:
    0 0 10px var(--teal, #0d9488),
    0 0 4px var(--teal, #0d9488);
  animation:sb2-spine-travel 4.2s ease-in-out infinite;
}
[data-theme="dark"] .sb2 .sb2-spine .sb2-pulse{
  background:#2dd4bf;
  box-shadow:
    0 0 12px #2dd4bf,
    0 0 4px #2dd4bf;
}
@keyframes sb2-spine-travel{
  0%   { top: 0%;   opacity: 0; }
  10%  {            opacity: 1; }
  90%  {            opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ════ Color tokens — sidebar is teal chrome ════ */
#sidebar-nav.sb2,
#sidebar-nav.sb2 .sb2-item,
.sb2 .sb2-item[data-module="strategy"],
.sb2 .sb2-item[data-module="compete"],
.sb2 .sb2-item[data-module="opp"],
.sb2 .sb2-item[data-module="exploreiq"]{
  --accent:#0d9488;
  --accent-tint:#0d9488;
}
[data-theme="dark"] #sidebar-nav.sb2,
[data-theme="dark"] #sidebar-nav.sb2 .sb2-item{
  --accent-tint:#2dd4bf;
}

/* ════ Section labels ════
   Hidden when collapsed (rail too narrow to read); fade in on expand. */
.sb2 .sb2-sec{
  font-family:var(--font-mono);
  font-size:8px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint);
  padding:10px 8px 5px;
  text-align:left;
  opacity:0;
  max-height:0;
  overflow:hidden;
  position:relative; z-index:1;
  transition:opacity .2s ease, max-height .26s ease, padding .26s ease;
}
#sidebar-nav.sb2.pinned .sb2-sec{
  opacity:.85;
  max-height:32px;
}
/* When collapsed, the divider replaces the labeled section header so the
   spine still gets a visual "Schema" break between modules and ExploreIQ. */
.sb2 .sb2-div{
  height:1px;
  background:var(--g-border);
  margin:8px 6px;
  position:relative; z-index:1;
}

/* ════ Item shell — center-aligned & icon-only when collapsed;
       blooms to labeled row + active card when expanded ════ */
.sb2 .sb2-mini{ display:none !important; }

.sb2 .sb2-item{
  position:relative; z-index:2;
  display:flex; flex-direction:row;
  align-items:center; justify-content:center;
  gap:0; width:100%;
  padding:5px 0;
  background:transparent;
  border:1px solid transparent;
  border-radius:13px;
  cursor:pointer;
  color:var(--text-muted);
  text-align:left;
  transition:
    background .16s var(--ease-out),
    border-color .16s var(--ease-out),
    box-shadow .2s var(--ease-out),
    color .16s var(--ease-out),
    padding .22s var(--ease-out),
    gap .22s var(--ease-out),
    justify-content .22s var(--ease-out);
}
#sidebar-nav.sb2.pinned .sb2-item{
  justify-content:flex-start;
  gap:11px;
  padding:7px 8px;
}
.sb2 .sb2-item:hover:not(.active){
  background:var(--g-focus);
  color:var(--text);
}
.sb2 .sb2-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ════ Icon tile — sits ON the spine and masks it just enough that
       the line appears to thread through every icon ════ */
.sb2 .sb2-node{
  width:28px; height:28px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:11px;
  /* CTK 2026-06-21: rest icons are box-free — no chip per icon. The old
     8%-teal chip made EVERY section look highlighted; now only the active
     module shows a tile (.sb2-item.active), so the glyph reads as just a
     glyph at rest and the "you are here" state is unambiguous. */
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  color:var(--icon-muted-strong);
  position:relative; z-index:2;
  transition:
    background .2s var(--ease-out),
    border-color .2s var(--ease-out),
    box-shadow .2s var(--ease-out),
    color .2s var(--ease-out);
}
.sb2 .sb2-node svg{ width:22px; height:22px; display:block; }
.sb2 .sb2-item:hover:not(.active) .sb2-node{
  color:var(--text);
  border-color:color-mix(in srgb, var(--accent) 38%, var(--g-border));
}

/* ════ Body — hidden when collapsed, revealed on hover/pin ════ */
.sb2 .sb2-body{
  display:flex; flex-direction:column;
  min-width:0; flex:1 1 auto;
  opacity:0; overflow:hidden;
  max-width:0; max-height:0;
  gap:0;
  transition:opacity .18s ease, max-width .26s ease, max-height .26s ease;
}
#sidebar-nav.sb2.pinned .sb2-body{
  opacity:1; overflow:visible;
  max-width:160px; max-height:220px;
  transition:opacity .2s ease .08s, max-width .26s ease, max-height .26s ease;
}
.sb2 .sb2-nm{
  font-family:var(--font-body);
  font-size:13px; font-weight:600;
  letter-spacing:-.005em;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  opacity:1;
  transition:color .2s var(--ease-out), font-size .18s var(--ease-out), font-weight .18s var(--ease-out);
}

/* ════ Collapsed-state tooltip ════
   When the rail is collapsed the user only sees icons; a small tooltip
   on hover surfaces the module name + (if active) the live context.
   Anchored to the item; hidden once the rail expands (the bloomed active
   card supersedes it). */
.sb2 .sb2-item .sb2-tip{
  position:absolute;
  left:calc(100% + 14px); top:50%;
  transform:translateY(-50%) translateX(-4px);
  display:flex; flex-direction:column; gap:3px;
  padding:8px 12px;
  background:var(--g-solid);
  color:var(--text);
  font-family:var(--font-body);
  border:1px solid var(--g-border-strong);
  border-radius:10px;
  font-size:12px; font-weight:600;
  white-space:nowrap;
  box-shadow:var(--sh-2);
  opacity:0; pointer-events:none;
  z-index:200;
  transition:opacity .14s ease, transform .14s ease;
}
.sb2 .sb2-item .sb2-tip::before{
  content:''; position:absolute;
  left:-5px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-right:5px solid var(--g-border-strong);
}
.sb2 .sb2-tip-ctx{
  font-family:var(--font-mono);
  font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
}
[data-theme="dark"] .sb2 .sb2-tip-ctx{ color:#5eead4; }
.sb2 .sb2-tip-kbd{
  font-family:var(--font-mono);
  font-size:10px; font-weight:600;
  color:var(--text-faint);
  padding:1px 5px;
  border:1px solid var(--g-border);
  border-radius:4px;
  margin-left:6px;
}
@media (hover:hover) and (pointer:fine){
  #sidebar-nav.sb2:not(:hover):not(.pinned) .sb2-item:hover .sb2-tip{
    opacity:1; transform:translateY(-50%) translateX(0);
  }
}

/* ════ Active state — collapsed gets a tile-only highlight + a small
       teal indicator pip on the right edge; expanded blooms into the
       full card with question + context pill ════ */
.sb2 .sb2-item.active{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent-tint) 16%, transparent),
    color-mix(in srgb, var(--accent-tint) 4%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:13px;
  box-shadow:
    inset 0 1px 0 var(--g-inset-top),
    0 1px 4px color-mix(in srgb, var(--accent-tint) 16%, transparent);
}
/* Active indicator pip — sits on the right edge of the rail when
   collapsed so the user can see "you are here" without expanding.
   Hidden on expand (the bloomed card subsumes it). */
.sb2 .sb2-item.active::after{
  content:'';
  position:absolute;
  right:-9px; top:50%;
  width:3px; height:18px;
  margin-top:-9px;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  opacity:.85;
  transition:opacity .2s ease;
}
[data-theme="dark"] .sb2 .sb2-item.active::after{
  background:#5eead4;
  box-shadow:0 0 10px #5eead4;
}
#sidebar-nav.sb2.pinned .sb2-item.active::after{ opacity:0; }

#sidebar-nav.sb2.pinned .sb2-item.active{
  align-items:flex-start;
  padding:11px 12px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent-tint) 22%, transparent),
    color-mix(in srgb, var(--accent-tint) 4%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 var(--g-inset-top),
    0 1px 4px color-mix(in srgb, var(--accent-tint) 12%, transparent);
}
.sb2 .sb2-item.active .sb2-node{
  /* CTK 2026-06-21 (ref newbuild-live.jpeg): the active highlight is a
     rounded-SQUARE chip around the ICON only — the label sits below it,
     unboxed. Matches the reference; the whole-item tile is removed below. */
  color:var(--accent);
  background:linear-gradient(180deg, rgba(94,234,212,0.18), rgba(94,234,212,0.06));
  border-color:rgba(94,234,212,0.5);
  border-radius:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 0 16px rgba(94,234,212,0.20);
}
[data-theme="dark"] .sb2 .sb2-item.active .sb2-node{ color:#5eead4; }
.sb2 .sb2-item.active .sb2-nm{
  font-size:14px; font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
  white-space:normal;
  padding-top:7px;     /* lift baseline so name reads centered to the icon */
  line-height:1.15;
}

/* ════ Question — rendered only on the active row (React-gated) ════ */
.sb2 .sb2-q{
  display:block;
  font-family:var(--font-body);
  font-size:11.5px; font-weight:400;
  line-height:1.45;
  color:var(--text-muted);
  margin-top:8px;
  white-space:normal; overflow-wrap:break-word;
  opacity:1; max-height:none;
}

/* ════ Context pill — accent-colored, glowing dot, baseline aligned ════ */
.sb2 .sb2-ctx{
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
  margin-top:9px;
  padding:0;
  background:transparent;
  border:none;
  opacity:1;
}
[data-theme="dark"] .sb2 .sb2-item.active .sb2-ctx{ color:#5eead4; }
.sb2 .sb2-ctx i{
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  box-shadow:
    0 0 8px var(--accent),
    0 0 3px var(--accent);
}
[data-theme="dark"] .sb2 .sb2-ctx i{
  background:#5eead4;
  box-shadow:
    0 0 9px #5eead4,
    0 0 3px #5eead4;
}

/* ════ Suppress legacy entrance/transform on sb2 ════ */
#sidebar-nav.sb2 .sidebar-item,
#sidebar-nav.sb2 .sb2-item{
  animation:none !important;
  overflow:visible !important;
  transform:none !important;
}

/* ════ Footer / pin ════
   Pin no longer toggles a width change (rail is always-on), but the
   button still renders. Keep it quiet at the bottom of the rail. */
.sb2 .sidebar-footer{
  margin-top:auto;
  padding-top:10px;
  display:flex; justify-content:flex-start;
  position:relative; z-index:1;
}
#sidebar-nav.sb2 .sidebar-pin-btn{ opacity:.7; }
#sidebar-nav.sb2 .sidebar-pin-btn:hover{ opacity:1; }
#sidebar-nav.sb2 .sidebar-pin-label{ opacity:1 !important; }

/* ════ Tablet — slimmer collapsed rail, same anatomy ════ */
@media (max-width:1023px) and (min-width:769px){
  #sidebar-nav.sb2{
    width:40px!important; min-width:40px!important; max-width:40px!important;
    padding:7px 4px!important;
  }
  #sidebar-nav.sb2.pinned{
    width:188px!important; min-width:188px!important; max-width:188px!important;
    padding:10px!important;
  }
  #chrome-main.chrome-main{ padding-left:64px!important; }
  .sb2 .sb2-spine{ left:19px; }
  #sidebar-nav.sb2.pinned .sb2-spine{ left:31px; }
  .sb2 .sb2-item{ padding:6px 0; }
  #sidebar-nav.sb2.pinned .sb2-item{ padding:6px 7px; gap:10px; }
  #sidebar-nav.sb2.pinned .sb2-item.active{ padding:11px 11px; }
}

@media (prefers-reduced-motion: reduce){
  #sidebar-nav.sb2,
  #sidebar-nav.sb2 *{ transition:none !important; animation:none !important; }
  .sb2 .sb2-spine .sb2-pulse{ display:none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   HARD CONSTRAINT — the rail must NEVER widen over content. It stays a
   slim icon column that reserves exactly its own footprint, so panels are
   never overlapped on any page. Pin persists the choice but does not
   expand the rail; module names remain available via the hover tooltip.
   ════════════════════════════════════════════════════════════════════ */
#sidebar-nav.sb2.pinned{
  width:42px!important; min-width:42px!important; max-width:42px!important;
  padding:6px 5px!important; border-radius:14px!important;
}
#sidebar-nav.sb2.pinned .sb2-spine{ left:21px!important; }
#sidebar-nav.sb2.pinned .sb2-sec{ opacity:0!important; max-height:0!important; padding:0!important; }
#sidebar-nav.sb2.pinned .sb2-item{ justify-content:center!important; gap:0!important; padding:7px 0!important; }
#sidebar-nav.sb2.pinned .sb2-item.active{ align-items:center!important; padding:7px 0!important; }
#sidebar-nav.sb2.pinned .sb2-item.active::after{ opacity:.85!important; }
#sidebar-nav.sb2.pinned .sb2-body{ opacity:0!important; max-width:0!important; max-height:0!important; overflow:hidden!important; }
@media (min-width:769px){
  #sidebar-nav.sb2.pinned ~ #chrome-main.chrome-main,
  #sidebar-nav.sb2.pinned + * #chrome-main.chrome-main{ padding-left:66px!important; }
}
@media (max-width:1023px) and (min-width:769px){
  #sidebar-nav.sb2.pinned{ width:40px!important; min-width:40px!important; max-width:40px!important; padding:7px 4px!important; }
  #sidebar-nav.sb2.pinned .sb2-spine{ left:19px!important; }
  #sidebar-nav.sb2.pinned ~ #chrome-main.chrome-main{ padding-left:64px!important; }
}

/* ════════════════════════════════════════════════════════════════════
   ALWAYS-LABELED RAIL (CTK 2026-06-19)
   Per design: every module shows its NAME under the icon at all times —
   no hover, no pin. Converts the slim icon-only sb2 rail into a vertical
   icon-over-name column. Last block in the file so it wins over the
   icon-only "HARD CONSTRAINT" rules above. Both default + .pinned states.
   ════════════════════════════════════════════════════════════════════ */
#sidebar-nav.sb2,
#sidebar-nav.sb2.pinned{
  width:60px!important; min-width:60px!important; max-width:60px!important;
  padding:7px 4px!important; border-radius:16px!important;
  align-items:stretch!important;
}
#sidebar-nav.sb2 .sb2-item,
#sidebar-nav.sb2.pinned .sb2-item{
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:5px 3px!important;
  text-align:center!important;
}
#sidebar-nav.sb2 .sb2-body,
#sidebar-nav.sb2.pinned .sb2-body{
  opacity:1!important; overflow:visible!important;
  max-width:none!important; max-height:none!important;
  flex:0 0 auto!important; align-items:center!important;
}
#sidebar-nav.sb2 .sb2-nm,
#sidebar-nav.sb2.pinned .sb2-nm{
  font-size:8px!important; font-weight:600!important;
  line-height:1.12!important; text-align:center!important;
  white-space:nowrap!important;
  max-width:none!important; overflow:visible!important; text-overflow:clip!important;
}
#sidebar-nav.sb2 .sb2-item.active .sb2-nm{ font-size:8px!important; padding-top:0!important; }
/* the narrow rail can't fit the active question/context pill — name only */
#sidebar-nav.sb2 .sb2-q,
#sidebar-nav.sb2 .sb2-ctx,
#sidebar-nav.sb2.pinned .sb2-q,
#sidebar-nav.sb2.pinned .sb2-ctx{ display:none!important; }
/* section headers ("Module" / "Schema") visible + centered */
#sidebar-nav.sb2 .sb2-sec,
#sidebar-nav.sb2.pinned .sb2-sec{
  opacity:.55!important; max-height:13px!important;
  padding:3px 0 1px!important; text-align:center!important;
  letter-spacing:.12em!important;
}
/* names are always shown now, so the hover tooltip is redundant */
#sidebar-nav.sb2 .sb2-tip{ display:none!important; }
/* active row stays a centered tile like the others */
#sidebar-nav.sb2 .sb2-item.active,
#sidebar-nav.sb2.pinned .sb2-item.active{
  /* CTK 2026-06-21 (ref): NO whole-item tile — active item is the same
     height as inactive ones; only the icon chip (.sb2-node above) carries
     the highlight, label below stays unboxed. */
  align-items:center!important; padding:5px 3px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
}
#sidebar-nav.sb2 .sb2-item.active .sb2-nm{ color:var(--teal)!important; }
#sidebar-nav.sb2 .sb2-item.active::after,
#sidebar-nav.sb2.pinned .sb2-item.active::after{ display:none!important; }
/* spine threads up the centered icon column */
#sidebar-nav.sb2 .sb2-spine,
#sidebar-nav.sb2.pinned .sb2-spine{ left:50%!important; transform:translateX(-50%); }
#sidebar-nav.sb2 .sb2-node{ width:30px!important; height:30px!important; }
#sidebar-nav.sb2 .sb2-node svg{ width:20px!important; height:20px!important; }
/* main content clears the wider rail (left:16 + 100 width ≈ 116) */
@media (min-width:769px){
  #chrome-main.chrome-main,
  #sidebar-nav.sb2.pinned ~ #chrome-main.chrome-main,
  #sidebar-nav.sb2.pinned + * #chrome-main.chrome-main{ padding-left:92px!important; }
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED ACTIVE-GLYPH ACCENT (CTK 2026-06-21)
   Every active module icon uses the canonical teal accent so it matches
   the active tile — no per-module amber (CompeteIQ) / blue (WhitespaceIQ)
   / muted-gray (ExploreIQ) divergence. PartnerIQ + CompeteIQ are already
   teal via their own rules; this catches WhitespaceIQ brackets + the
   ExploreIQ graph so all four modules read as one accent.
   ════════════════════════════════════════════════════════════════════ */
#sidebar-nav.sb2 .sb2-item[data-module="opp"].active .ws-bracket{ stroke: var(--teal) !important; }
#sidebar-nav.sb2 .sb2-item[data-module="exploreiq"].active .eiq-node,
#sidebar-nav.sb2 .sb2-item[data-module="exploreiq"].active .eiq-node-r{ fill: var(--teal) !important; }
#sidebar-nav.sb2 .sb2-item[data-module="exploreiq"].active .eiq-edge,
#sidebar-nav.sb2 .sb2-item[data-module="exploreiq"].active .eiq-edge-r,
#sidebar-nav.sb2 .sb2-item[data-module="exploreiq"].active .eiq-bridge{ stroke: var(--teal) !important; }

/* ════════════════════════════════════════════════════════════════════
   LIGHT-MODE GLYPH CONTRAST (CTK 2026-06-21, v3 — perfected)
   Inactive sidebar glyphs are hairline strokes at 0.45–0.55 base opacity →
   wash out on the light rail. In light mode only: force solid dark ink at full
   opacity on every glyph part, THICKEN the CompeteIQ rings/ticks so the
   hairlines read at 20px, and keep the WhitespaceIQ inner square a subtle fill
   (not a heavy dark block). html[data-theme] for max specificity over the base.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ciq-ring,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ciq-tick,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ciq-axis,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ws-bracket,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ws-scan-line,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .eiq-edge,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .eiq-edge-r,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .eiq-bridge {
  stroke: rgba(15,23,42,0.85) !important; opacity: 1 !important;
}
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ciq-center,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ciq-blip,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ws-dot,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .eiq-node,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .eiq-node-r {
  fill: rgba(15,23,42,0.85) !important; opacity: 1 !important;
}
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ws-inner {
  fill: rgba(15,23,42,0.85) !important; opacity: 0.16 !important;
}
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ciq-ring,
html[data-theme="light"] #sidebar-nav .sb2-item:not(.active) .ciq-tick {
  stroke-width: 4.5 !important;
}