/* 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;
}