/* ==========================================================================
   The footer bar, pinned to the bottom of the screen.

   Every corner of jeffraben.com grew its own footer — .site-footer on the
   BBQ trail, .app-footer in the shared chrome, .footer on the printer
   dashboard, one more inline on the concerts page — and the four are styled
   by four stylesheets that do not see each other. The BBQ trail does not
   load /css/style.css at all. So the behaviour lives in its own small file
   that each of them links, rather than as four copies drifting apart.

   Layout only, plus a background, because a fixed element without one is
   transparent and the page scrolls through the text. Colours come from each
   section's own tokens where they are set; the defaults below are the site
   palette, which all four happen to share.

   To use it: put .jr-pinned-page on <body> and .jr-footbar on the <footer>,
   with a .jr-footbar-inner wrapper holding one or two children.
   ========================================================================== */

.jr-pinned-page {
  /* The bar's height and the room kept clear for it are the same number, so
     they cannot drift apart. The extra gap stops the last line of the page
     from sitting against the rule, which reads as cut off even when nothing
     is hidden. */
  --jr-footbar: 46px;
  --jr-footbar-gap: 20px;
  padding-bottom: calc(var(--jr-footbar) + var(--jr-footbar-gap)
                       + env(safe-area-inset-bottom, 0px)) !important;
}

.jr-footbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  box-sizing: border-box;
  height: calc(var(--jr-footbar, 46px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  margin: 0;
  /* Clear of the iPhone home indicator. */
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background-color: var(--jr-footbar-bg, #efe5cf);
  background-image: var(--jr-footbar-grain, none);
  border-top: 2px solid var(--jr-footbar-rule, #3a322c);
  box-shadow: 0 -8px 24px rgba(50, 35, 15, 0.18);
  color: var(--jr-footbar-ink, #554e47);
  font-size: 13px;
  text-align: left;
}

.jr-footbar-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* Two lines would eat a line of page that the reserved strip does not know
   about, so neither half may wrap. */
.jr-footbar-inner > * {
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The build stamp is the half that must survive whole — it is the thing you
   read to know whether what you are looking at is live. */
.jr-footbar .site-version,
.jr-footbar .jr-version { flex: none; opacity: 1; }

/* What goes, and in what order, as the screen narrows: the descriptive
   sentence first, because the page itself already says where you are, then
   the date, which the commit beside it makes redundant for anyone checking a
   deploy. */
@media (max-width: 680px) {
  .jr-footbar .jr-longform { display: none; }
}
@media (max-width: 560px) {
  .jr-footbar .jr-when { display: none; }
}
@media (max-width: 380px) {
  .jr-pinned-page { --jr-footbar: 42px; }
  .jr-footbar { font-size: 12px; }
}

/* On paper there is no bar and nothing to keep clear of it. */
@media print {
  .jr-pinned-page { padding-bottom: 0 !important; }
  .jr-footbar { position: static; height: auto; box-shadow: none; }
}