/* The build label (dashboard spec B6.3): which build a page was served from,
   in the bottom-left corner of the app's own pages. The public pages draw
   nothing and carry the build in their head instead (B6.3g), so every rule
   here is a rule about an app page.

   Quiet at rest and legible when looked for: the faintest ink that still
   meets 4.5:1 on the ground under it, raised to the muted ink under the
   pointer. The label is not focusable, so there is no focus state to raise.

   It has the ground's own color as a background. Over empty ground that
   background does not show; over content scrolling past it, it keeps the
   label legible and the content behind it unprinted.

   The page's body face, inherited, so the product sets it in its body token
   and `/admin/` in Django's own. Tabular figures, so a new commit or date
   does not change its width.

   Where it sits, by page shape:
   - Wide, on every page but Mail: fixed to the corner. Content may scroll
     under it, and the end of every page and every scrolling region clears
     it, so nothing ends up beneath it.
   - `/admin/`: the only page that draws it outside a `.wb` wrapper, so the
     base rule below is the admin's ink and ground.
   - The shell with a rail: the corner is the rail at every scroll
     position, so it takes the navigation panel's inks and ground.
   - Mail: its own line under the reader.
   - From 68rem down, where the drafting page and Mail stop pinning to the
     viewport (workbench.css), the rail stacks below 60rem, and content
     runs close to the screen's edge: in the flow, at the end of the page. */

.wb-build {
  position: fixed;
  left: var(--space-2);
  bottom: var(--space-2);
  z-index: var(--z-sticky);
  margin: 0;
  padding: 0 var(--space-1);
  font-size: 0.6875rem;
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums;
  /* Outside a `.wb` wrapper, which is `/admin/` alone: tokens.css's muted
     ramp on the page ground. */
  color: var(--color-brand-500);
  background: var(--color-bg-primary);
}

.wb-build:hover { color: var(--color-text-secondary); }

/* The spoken form, which a screen reader is given and the eye never sees
   (B6.3c). The rule is here rather than taken from `globals.css`'s
   `.sr-only`, and the class is the label's own: `/admin/` carries this
   sheet and `tokens.css` and nothing else (`admin/base_site.html`), so a
   label that leaned on `globals.css` printed its spoken form beside its
   short one on every admin page. `clip-path` rather than the deprecated
   `clip`, and no `border` reset, which a span has nothing to reset. */
.wb-build-said {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Inside a `.wb` wrapper: the palette's own inks, on the workspace. */
.wb .wb-build {
  color: var(--ink-faint);
  background: var(--surface-workspace);
}

.wb .wb-build:hover { color: var(--ink-muted); }

/* Over the shell's rail (style spec 3e). */
.wb-shell:not(.wb-shell-reader) ~ .wb-build {
  color: var(--nav-ink-faint);
  background: var(--nav-surface);
}

.wb-shell:not(.wb-shell-reader) ~ .wb-build:hover { color: var(--nav-ink-muted); }

/* Narrow: the end of the page. `margin-top: auto` puts it at the foot of a
   `.wb` wrapper shorter than the screen, such as the sign-in page's. It sits
   under the shell rather than over the rail, so it takes the workspace's
   inks like everything else at the end. */
@media (max-width: 68rem) {
  .wb-build {
    position: static;
    width: fit-content;
    margin: auto 0 var(--space-2) var(--space-2);
  }

  .wb-shell:not(.wb-shell-reader) ~ .wb-build {
    color: var(--ink-faint);
    background: var(--surface-workspace);
  }

  .wb-shell:not(.wb-shell-reader) ~ .wb-build:hover { color: var(--ink-muted); }
}

/* Mail: a line of its own under the reader, at every width. On a wide
   screen Mail pins to the viewport (workbench.css, 68rem), and both its
   regions run to the bottom edge and scroll, so the corner always has a
   row in it. The line sits on the workspace ground the reader is already
   inset on. */
.wb-shell-reader ~ .wb-build {
  position: static;
  width: fit-content;
  margin: var(--space-1) 0 var(--space-2) var(--space-2);
}

@media print {
  .wb-build { display: none; }
}