/* One viewport-anchored navigation rail for every page using shell(). */
html { scrollbar-gutter: stable; }
.platform-shell { --navigation-width: 232px; --platform-header-height: 72px; min-height: 100dvh; background: #fcfcff; }
.platform-shell.sidebar-collapsed { --navigation-width: 80px; }
.discovery-page .platform-shell { background: #f8f8fc; }
.platform-shell .header { position: sticky; top: 0; z-index: 60; height: var(--platform-header-height); background: #fff; border-bottom: 1px solid #eeedf4; }
.platform-shell .header .header-inner { display: flex; align-items: center; flex-wrap: nowrap; gap: 28px; width: 100%; max-width: none; height: 100%; margin: 0; padding: 0 22px; }
.platform-shell .header-identity { display: flex; align-items: center; flex-shrink: 0; gap: 12px; }
.platform-shell .header .brand { margin: 0; }
.platform-shell .header .brand img { width: 116px; height: auto; }
.platform-shell .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 9px; border-radius: 9px; }
.platform-shell .header .header-mobile-menu { display: none; }
.platform-shell .header .header-search { display: block; flex: 1; grid-column: auto; width: auto; max-width: 640px; margin: 0 auto; }
.platform-shell .header-search input { height: 42px; padding: 10px 44px 10px 17px; border-radius: 10px; background: #f5f5fc; font-size: 13px; }
.platform-shell .header .header-actions { display: flex; align-items: center; flex-shrink: 0; margin: 0; gap: 14px; }
.platform-shell .header-actions > .header-mobile-search { display: none; }
.platform-shell .header-actions > .header-settings,
.platform-shell .header-actions > .header-notifications { display: inline-flex; }
.platform-shell .header-actions .avatar { width: 32px; height: 32px; }
.platform-shell .platform-content { margin-left: var(--navigation-width); min-width: 0; }
.platform-shell .platform-content > .page { width: min(1160px, calc(100% - 64px)); min-height: calc(100dvh - 205px); margin: 0 auto; padding: 28px 0 48px; }
.platform-shell .footer-inner { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.platform-shell .feed-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; min-height: 0; align-items: start; }
.platform-shell .feed-layout.without-aside { display: block; max-width: 980px; margin: 0 auto; }
.platform-shell .feed-layout .dam-main { min-width: 0; max-width: none; margin: 0; padding: 0; }
.platform-shell .feed-layout .dam-right { padding-top: 0; }
.platform-shell .desktop-navigation {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 45;
  inset: var(--platform-header-height) auto 0 0;
  width: var(--navigation-width);
  height: auto;
  max-height: none;
  margin: 0;
  padding: 16px 14px;
  border: 0;
  border-right: 1px solid #eeedf4;
  border-radius: 0;
  background: #fff;
  overflow: visible;
}
.platform-shell .desktop-navigation nav { display: grid; position: static; gap: 2px; flex-shrink: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.platform-shell .desktop-navigation nav > a,
.platform-shell .desktop-navigation .navigation-more { display: flex; align-items: center; gap: 13px; min-height: 40px; padding: 8px 12px; border-radius: 9px; color: #58556b; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: left; }
.platform-shell .desktop-navigation nav > a svg,
.platform-shell .desktop-navigation .navigation-more svg { width: 20px; height: 20px; flex-shrink: 0; }
.platform-shell .desktop-navigation nav > a:hover,
.platform-shell .desktop-navigation .navigation-more:hover { background: #f5f2ff; color: #7354df; }
.platform-shell .desktop-navigation nav > a.active { color: #7454df; background: #efebff; font-weight: 700; }
.platform-shell .desktop-navigation nav > a[href="#/compose"] { justify-content: flex-start; margin: 8px 0 6px; background: #7455e4; color: #fff; }
.platform-shell .desktop-navigation .feed-nav-label { padding: 8px 12px 6px; font-size: 11px; line-height: 1.5; color: #9b94ab; }
.platform-shell .desktop-navigation .feed-left-bottom { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding: 12px 12px 0; font-size: 10px; line-height: 1.8; color: #aaa3b3; }
.platform-shell .desktop-navigation .feed-left-bottom small { font-size: 10px; }
.platform-shell .desktop-navigation .navigation-more { display: none; }
.platform-shell :focus-visible { outline: 2px solid #8964dc; outline-offset: 3px; }
/* The route manager focuses the main landmark after navigation.
   It is not an interactive control: avoid outlining the entire content area.
   Keep the visible focus ring on links, buttons, fields and other controls. */
.platform-shell .platform-content > main#main:focus,
.platform-shell .platform-content > main#main:focus-visible { outline: none; }


/* Collapsing the rail changes layout only, without repainting editor forms. */
.platform-shell.sidebar-collapsed .desktop-navigation { padding: 12px 8px; }
.platform-shell.sidebar-collapsed .desktop-navigation nav > a,
.platform-shell.sidebar-collapsed .desktop-navigation .navigation-more { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 2px; font-size: 10px; line-height: 1.2; text-align: center; }
.platform-shell.sidebar-collapsed .desktop-navigation [data-nav-group="personal"],
.platform-shell.sidebar-collapsed .desktop-navigation .feed-nav-label,
.platform-shell.sidebar-collapsed .desktop-navigation .feed-left-bottom { display: none; }
.platform-shell.sidebar-collapsed .desktop-navigation .navigation-more { display: flex; }

/* Short windows use the full-menu dialog for secondary links, never a nested scroller. */
@media (max-height: 879px) {
  .platform-shell .desktop-navigation [data-nav-group="personal"],
  .platform-shell .desktop-navigation .feed-nav-label { display: none; }
  .platform-shell .desktop-navigation .navigation-more { display: flex; }
}
@media (max-height: 659px) {
  .platform-shell .desktop-navigation .feed-left-bottom { display: none; }
  .platform-shell.sidebar-collapsed .desktop-navigation nav > a,
  .platform-shell.sidebar-collapsed .desktop-navigation .navigation-more { min-height: 44px; padding-block: 4px; gap: 2px; }
}
@media (max-height: 559px) {
  .platform-shell .desktop-navigation [data-nav-secondary="true"] { display: none; }
}
@media (pointer: coarse) {
  .platform-shell .desktop-navigation nav > a,
  .platform-shell .desktop-navigation .navigation-more { min-height: 44px; }
}
@media (min-width: 761px) and (max-width: 1240px) {
  .platform-shell .feed-layout { grid-template-columns: minmax(0, 1fr); max-width: 800px; margin: 0 auto; }
  .platform-shell .feed-layout .dam-right { display: none; }
  .platform-shell .feed-layout.without-aside { max-width: 980px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .platform-shell .platform-content > .page,
  .platform-shell .footer-inner { width: calc(100% - 40px); }
  .platform-shell .header .header-inner { gap: 20px; }
  .platform-shell .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px), (max-height: 439px) {
  .platform-shell .desktop-navigation,
  .platform-shell .sidebar-toggle { display: none; }
  .platform-shell .platform-content { margin-left: 0; }
  .platform-shell .header .header-mobile-menu { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; padding: 8px; }
}
@media (max-width: 760px) {
  .platform-shell { --platform-header-height: 64px; }
  .platform-shell .header .header-inner { gap: 8px; padding: 0 12px; }
  .platform-shell .header-identity { gap: 7px; }
  .platform-shell .header .brand img { width: 96px; }
  .platform-shell .header .header-search { display: none; }
  .platform-shell .header .header-actions { margin-left: auto; gap: 3px; }
  .platform-shell .header-actions > .header-settings { display: none; }
  .platform-shell .header-actions > .header-mobile-search,
  .platform-shell .header-actions > .header-notifications { display: inline-flex; min-width: 36px; min-height: 40px; padding: 8px; }
  .platform-shell .header-actions .avatar { width: 28px; height: 28px; }
  .platform-shell .platform-content > .page { width: calc(100% - 32px); padding: 24px 0 36px; }
  .dam-home-page .platform-shell .platform-content > .page { width: 100%; padding: 0; }
  .platform-shell .feed-layout { display: block; max-width: none; }
  .platform-shell .feed-layout .dam-main { padding: 18px 16px 36px; }
  .platform-shell .feed-layout .dam-right { display: none; }
  .platform-shell .footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .platform-shell .footer-inner { width: calc(100% - 32px); }
  .platform-shell .mobile-nav { display: flex; position: fixed; z-index: 50; inset: auto 0 0; padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); height: calc(64px + env(safe-area-inset-bottom)); background: #fffffffa; border-top: 1px solid #eeedf4; }
  .platform-shell .mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10px; color: #9891a6; }
  .platform-shell .mobile-nav a.active { color: #7454df; font-weight: 700; }
}
@media (max-width: 380px) {
  .platform-shell .header .header-inner { padding-inline: 8px; gap: 4px; }
  .platform-shell .header-identity { gap: 3px; }
  .platform-shell .header .brand img { width: 88px; }
  .platform-shell .header-actions > .header-notifications { display: none; }
}