/* CIIIC fork: layout rules for the shared CIIIC navigation bar (ciiic-shell).
   The element is loaded in client/index.html; everything about how the app
   makes room for it lives here, in the fork CSS seam, so no core stylesheet
   has to be patched. Every rule is gated on `html.has-ciiic-shell`, which
   client/app.js sets only on logged-in admin views — present, notes, public
   share, follow and embed keep the stock layout. */

ciiic-shell {
  display: none;
}
html.has-ciiic-shell ciiic-shell {
  display: block;
}

/* The shell is a sticky, in-flow 52px bar. The editor route locks the app to a
   full-viewport (100vh) layout that assumes it owns the whole height, so
   without reserving the shell's height the editor is 52px too tall and the
   bottom of its topbar/columns is clipped out of view. */
html.has-ciiic-shell {
  --ciiic-shell-height: 52px;
}
html.has-ciiic-shell.is-editor .layout {
  height: calc(100vh - var(--ciiic-shell-height) - var(--ps-topbar-height));
  height: calc(100dvh - var(--ciiic-shell-height) - var(--ps-topbar-height));
}
@media (min-width: 821px) {
  html.has-ciiic-shell.is-editor #app,
  html.has-ciiic-shell.is-editor .editor-shell {
    height: calc(100vh - var(--ciiic-shell-height));
    height: calc(100dvh - var(--ciiic-shell-height));
  }
}

/* The list/home routes (has-sidebar layout) render a `position: fixed` topbar
   and sidebar pinned to the viewport top. Fixed positioning ignores the in-flow
   shell above #app, so both end up underneath it — the shell (z-index 900) then
   covers the search bar and toggles. Push them down by the shell height. The
   grid content is in normal flow and is already shifted, so it needs no
   offset. */
html.has-ciiic-shell .app-shell.has-sidebar > .topbar {
  top: var(--ciiic-shell-height);
}
html.has-ciiic-shell .app-shell.has-sidebar > .app-sidebar {
  top: calc(var(--ps-topbar-height, 60px) + var(--ciiic-shell-height));
}

/* Trim the 100vh min-heights by the shell height so the reserved shell row
   doesn't add a phantom 52px of scroll below the fold on the list view. */
html.has-ciiic-shell .app-shell.has-sidebar {
  min-height: calc(100vh - var(--ciiic-shell-height));
  min-height: calc(100dvh - var(--ciiic-shell-height));
}
html.has-ciiic-shell .app-shell.has-sidebar > .presentation-grid-content {
  min-height: calc(
    100vh - var(--ps-topbar-height, 60px) - var(--ciiic-shell-height)
  );
  min-height: calc(
    100dvh - var(--ps-topbar-height, 60px) - var(--ciiic-shell-height)
  );
}