/* Shared left-rail app nav (matches home shell items) */
.vapp-nav{display:flex;flex-direction:column;gap:2px;margin:0 0 16px;}
.vapp-nav-item{display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:500;color:#334155;text-decoration:none;transition:background .12s,color .12s;}
.vapp-nav-item:hover{background:#f6edff;color:#6b3fa0;}
.vapp-nav-item.is-active{background:#f3ecff;color:#7c3aed;font-weight:800;}
.vapp-nav-ic{width:20px;height:20px;object-fit:contain;flex:0 0 20px;display:inline-block;}
.vapp-nav-item{padding-left:14px;}

/* Content rail width on social/events/snaps (header width is handled globally
   in style.css). Content-width unification handled separately. */
body#motorsonline-social .container.primary,
body#custom.file-events .container.primary,
body#custom.file-feed .container.primary{
  max-width:var(--vrool-content-width) !important;
  width:100% !important;
  padding-left:16px !important;
  padding-right:16px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Reserve the scrollbar gutter so the fixed header rail and the scrolled body
   rail center on the same width. */
html{scrollbar-gutter:stable;}

/* Tighten the vertical gap between the fixed header and the content on the
   app-shell pages (social / events / snaps). Collapses the stacked top
   padding of .content + .container.primary + the page wrapper. */
body#motorsonline-social > .content,
body#custom.file-events > .content,
body#custom.file-feed > .content {
  padding-top: 6px !important;
}
body#motorsonline-social .container.primary,
body#custom.file-events .container.primary,
body#custom.file-feed .container.primary {
  padding-top: 0 !important;
}
.spd-wrap, .ev-wrap {
  padding-top: 8px !important;
}

/* Left rail: top-align it with the content. The rail is a grid item spanning
   two rows; with position:sticky it picked up a ~54px downward offset (sticky
   inset on a multi-row grid item), leaving a gap above the nav. Static keeps it
   flush with the hero/content top. */
.ev-left, .spd-left {
  position: static !important;
  align-self: start !important;
}

/* ─── Expandable nav group (AI Tools, etc.) ─── */
.vapp-nav-group{display:flex;flex-direction:column;}
.vapp-nav-toggle{border:none;background:none;cursor:pointer;width:100%;text-align:left;font:inherit;}
.vapp-nav-toggle .vapp-nav-arrow{margin-left:auto;transition:transform .2s;color:#94a3b8;flex-shrink:0;}
.vapp-nav-toggle.is-open .vapp-nav-arrow{transform:rotate(180deg);color:#7c3aed;}
.vapp-nav-children{display:none !important;flex-direction:column;gap:1px;padding-left:16px;}
.vapp-nav-children.is-open{display:flex !important;}
.vapp-nav-child{font-size:13px;padding:7px 12px;}
.vapp-nav-child .vapp-nav-ic{width:18px;height:18px;flex:0 0 18px;}