html,
body {
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* The site half of the bar's breadcrumb, which collapses once the page has
   moved so what stays pinned over a long scroll is whose page you are reading.
   Collapsed by width rather than hidden, so it slides back out from behind the
   mark on the way up rather than appearing.

   Here rather than as a pair of utilities swapped in by the controller: two
   max-width utilities on one element are settled by the order the stylesheet
   generated them in, not by which one was added last, so the collapsed one
   quietly loses. */
.app-navbar-crumb {
  max-width: 10rem;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 300ms ease, margin 300ms ease, opacity 300ms ease;
}

/* The gap beside the name goes with it, so the separator ends up against the
   mark rather than floating in the space the name used to hold. */
.app-navbar[data-scrolled] .app-navbar-crumb {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}

/* The screen you are on, which does the opposite of the site name above: it is
   collapsed while the page is at the top and slides out as the wordmark slides
   away. One trade rather than two moves, so the bar keeps roughly the width it
   had and nothing jumps.

   The negative margin is the row's own `gap-2` cancelled, so a collapsed leaf
   leaves no gap hanging off the place beside it. Tied to `--spacing` rather
   than written as a number, because the gap it is undoing is.

   Width, not `display`, for the same reason the site name is: a thing that is
   not there cannot slide, and a crumb that appears is a crumb that flickers on
   every small scroll near the threshold. */
.app-navbar-leaf {
  max-width: 0;
  margin-left: calc(var(--spacing, 0.25rem) * -2);
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 300ms ease, margin 300ms ease, opacity 300ms ease;
  /* The leaf is the only thing in the row that gives way. The place beside it
     is capped instead of shrunk, and the mark is a mark; a title is a sentence
     and is the one crumb here with whole words to spare. */
  flex-shrink: 20;
}

.app-navbar[data-scrolled] .app-navbar-leaf {
  max-width: 24rem;
  margin-left: 0;
  opacity: 1;
}

/* The band on a post you just wrote. It says "this is the one you just made",
   which stops being worth saying about as fast as you can read it, so it fades
   back to the card's own fill on its own rather than sitting there until the
   next page load. The server only draws it inside the same window, so a reload
   past that point never starts the animation at all.

   It fades to nothing rather than to a fill, because the column it sits in has
   none: a row is white, and the band is the one thing on the page that is not. */
@keyframes post-flag-fade {
  to {
    background-color: transparent;
  }
}

.post-flag {
  animation: post-flag-fade 1s ease-in 30s forwards;
}