/* Desktop layout across all pages. The mobile cascade is deliberately untouched. */
@media (min-width: 851px) {
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,30vw) minmax(0,1fr);gap:20px;padding-inline:24px}
  .topbar .brand{grid-column:1;grid-row:1;justify-self:start;order:0}
  .topbar .search-box{grid-column:2;grid-row:1;order:0;width:100%;max-width:none;margin:0;box-sizing:border-box}
  .topbar .top-actions{grid-column:3;grid-row:1;order:0;justify-self:end;margin:0;min-width:0;justify-content:flex-end}
  .desktop-sidebar-tools>*+*{margin-top:22px}
  .desktop-sidebar-tools{margin-top:22px;min-width:0}
  body .app-layout {
    --desktop-story-height: 176px;
    max-width: none;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    padding-inline: 24px;
  }
  body .app-layout > #sidebar {
    position: sticky;
    top: var(--desktop-sidebar-top,100px);
    align-self: start;
    margin-top: 0;
    min-width: 0;
  }
  body .app-layout > #aside { display: none; }
  body[data-page="home"] #sidebar .sidebar-profile {
    height: var(--desktop-story-height);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }
  body[data-page="home"] #sidebar .side-nav {
    margin-top: 56px;
    padding-top: 0;
    padding-bottom: 0;
  }
  body #sidebar .side-nav button { position: relative; }
  body[data-page="home"] #sidebar .aside-calendar { margin-top: 22px; }
  body[data-page="home"] #main > #storyFeed {
    height: var(--desktop-story-height);
    box-sizing: border-box;
    width: calc(100% + 48px);
    max-width: none;
    margin: 0 -24px 0 -24px;
    justify-content: flex-start;
    border-radius: 0;
    padding-inline: 0 24px;
  }
}
@media(min-width:851px) and (max-width:1100px){.topbar{gap:12px}.topbar .top-actions{gap:4px}.topbar .top-actions .icon-btn{width:32px;height:36px;flex-shrink:0}.topbar .brand img{width:130px}.topbar .user-chip{max-width:80px;padding-inline:5px}}