/* Modern's rail is rendered as accordion groups.  Keep that markup intact and
   only switch it to an icon rail on desktop when the visitor asks for it. */
@media (min-width: 992px) {
  .vf-modern-rail-toggle {
    width: 100%;
    min-height: 38px;
    margin: 0 0 10px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line, #e5e9f0);
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #172033);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  .vf-modern-rail-toggle:hover { background: #f4f8fc; color: #075fc2; }

  body.vf-modern-rail-collapsed .vf-modern-rail-row { grid-template-columns: 76px minmax(0, 1fr) !important; }
  body.vf-modern-rail-collapsed .vf-modern-rail-column,
  body.vf-modern-rail-collapsed .vf-modern-rail-column > .theiaStickySidebar { width: 76px !important; }
  body.vf-modern-rail-collapsed .vf-modern-rail-column { flex: 0 0 76px !important; max-width: 76px !important; }
  body.vf-modern-rail-collapsed .vf-modern-rail-column .vf-rail { padding-inline: 8px !important; overflow: visible !important; }
  body.vf-modern-rail-collapsed .vf-modern-rail-column .vf-rail .card-body { padding: 10px 6px !important; }

  body.vf-modern-rail-collapsed .vf-modern-rail-toggle {
    width: 46px;
    margin-inline: auto;
    padding: 0;
  }
  body.vf-modern-rail-collapsed .vf-modern-rail-toggle span { display: none; }

  body.vf-modern-rail-collapsed .vf-rail-create { margin-bottom: 10px; }
  body.vf-modern-rail-collapsed .vf-rail-create-btn {
    width: 46px;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
  }
  body.vf-modern-rail-collapsed .vf-rail-create-btn > span,
  body.vf-modern-rail-collapsed .vf-rail-create-btn .fa-chevron-down { display: none; }
  body.vf-modern-rail-collapsed .vf-rail-create-menu {
    z-index: 1302;
    inset-inline-start: 56px;
    inset-inline-end: auto;
    width: 220px;
  }

  body.vf-modern-rail-collapsed .vf-rail-primary-group,
  body.vf-modern-rail-collapsed .vf-rail-tools-group {
    position: relative;
    width: 46px;
    margin: 5px auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.vf-modern-rail-collapsed .vf-rail-primary-category,
  body.vf-modern-rail-collapsed .vf-rail-category {
    width: 46px;
    min-height: 46px;
    padding: 0 !important;
    justify-content: center;
    gap: 0;
    border-radius: 10px;
  }
  body.vf-modern-rail-collapsed .vf-rail-primary-category-label,
  body.vf-modern-rail-collapsed .vf-rail-category-label,
  body.vf-modern-rail-collapsed .vf-rail-primary-category > .fa-chevron-down,
  body.vf-modern-rail-collapsed .vf-rail-category > .fa-chevron-down { display: none; }
  body.vf-modern-rail-collapsed .vf-rail-primary-category .vf-rail-icon,
  body.vf-modern-rail-collapsed .vf-rail-category .vf-rail-icon { margin: 0; }
  body.vf-modern-rail-collapsed .vf-rail-primary-group > .vf-rail-list,
  body.vf-modern-rail-collapsed .vf-rail-tools-group > .vf-rail-tools-grid { display: none !important; }

  body.vf-modern-rail-collapsed .vf-rail-primary-group:hover > .vf-rail-list,
  body.vf-modern-rail-collapsed .vf-rail-primary-group.is-open > .vf-rail-list {
    display: grid !important;
    position: absolute !important;
    z-index: 1301 !important;
    top: 0;
    left: 58px;
    width: 252px;
    max-height: calc(100vh - 104px);
    overflow: auto;
    padding: 8px !important;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(16, 24, 40, .18);
  }
  body.vf-modern-rail-collapsed .vf-rail-primary-group > .vf-rail-list .vf-rail-link {
    min-height: 40px;
    padding: 4px 7px;
    font-size: 13px;
  }
  body.vf-modern-rail-collapsed .vf-rail-primary-group > .vf-rail-list .vf-rail-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border: 1px solid #e1e6ee !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.vf-modern-rail-collapsed .vf-rail-tools-group:hover > .vf-rail-tools-grid,
  body.vf-modern-rail-collapsed .vf-rail-tools-group.is-open > .vf-rail-tools-grid {
    display: grid !important;
    position: absolute !important;
    z-index: 1301 !important;
    top: 0;
    left: 58px;
    width: 252px;
    max-height: calc(100vh - 104px);
    overflow: auto;
    padding: 8px !important;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(16, 24, 40, .18);
  }
  body.vf-modern-rail-collapsed .vf-rail-tools-group > .vf-rail-tools-grid .vf-rail-tool { display: flex !important; }

  body.night-mode.vf-modern-rail-collapsed .vf-modern-rail-toggle,
  body.night-mode.vf-modern-rail-collapsed .vf-rail-primary-group > .vf-rail-list,
  body.night-mode.vf-modern-rail-collapsed .vf-rail-tools-group > .vf-rail-tools-grid { background: #151922; border-color: #30394a; }
}

/* The Home feed deliberately uses a highly-specific grid shell.  These rules
   must meet that selector so the icon rail can also reclaim the page width. */
@media (min-width: 1200px) {
  html body.vf-page-index.vf-view-default.vf-modern-rail-collapsed #vf-main-content .vf-newsfeed-shell.vf-home-look-neighborhood > .vf-modern-rail-row {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }
  html body.vf-page-index.vf-view-default.vf-modern-rail-collapsed #vf-main-content .vf-newsfeed-shell.vf-home-look-neighborhood > .vf-modern-rail-row > .vf-modern-rail-column {
    width: 76px !important;
    max-width: 76px !important;
    flex: 0 0 76px !important;
  }
  html body.vf-page-index.vf-view-default.vf-modern-rail-collapsed #vf-main-content .vf-newsfeed-shell.vf-home-look-neighborhood > .vf-modern-rail-row > .vf-modern-rail-column > .theiaStickySidebar {
    width: 76px !important;
  }
  html body.vf-page-index.vf-view-default.vf-modern-rail-collapsed #vf-main-content .vf-newsfeed-shell.vf-home-look-neighborhood > .vf-modern-rail-row > .vf-modern-rail-column .vf-rail {
    padding-inline: 8px !important;
  }
}