/* build-line.css — the styles build-line.js needs, wherever it lands.
 *
 * This ships WITH the script rather than living in each app's own stylesheet,
 * because the pages that need it do not share one. cbprospect's footer is its
 * own; cbnight's ported election pages still wear cbloom's, styled by
 * vendored loom.css that is not ours to edit. A rule set that travels with the
 * behaviour works on both without a fork.
 *
 * The whole job is one thing: `#footer` is a fixed-height flex ROW in every
 * one of those stylesheets, so an appended child lands beside the buttons and
 * squashes them. Making it a column, with the height free, puts the line
 * underneath where it belongs.
 */

/* The class is added by the script rather than matched with `:has()` — the
   element that needs styling is the one the script already has a handle on,
   and an explicit marker says "the build line is mounted here" to anyone
   reading the DOM. */
#footer.has-build-line {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  /* gap: 0 is load-bearing: the kit's .shell-foot gaps its ROW contents, and
     in column mode that same gap pushes the two rows apart — past the
     min-height below, which is what the live-log panel's bottom is anchored
     to. The rows' own padding is the separation; the panel must meet the
     footer's top edge exactly. */
  gap: 0;
  height: auto;
  /* Two rows, so taller than the shell's one-row --shell-foot-h. Declared HERE,
     where it is owned (cbapex#176): this read cbprospect's own `--pr-foot-h`,
     a token that one app defines and fourteen do not, so the kit depended on
     an app's sheet and the other fourteen painted the fallback. cbprospect's
     live-log panel anchors to the same number and can read this token. */
  --shell-foot-stacked-h: 4.2rem;
  min-height: var(--shell-foot-stacked-h);
  padding-top: 0;
  padding-bottom: 0;
}
/* Air between the pills and the build line (operator, 2026-10-12: "a few more
   pixels of gap between pills and the footer line"). 0.3rem = ~5px; the
   stacked height above grew by the same so the two rows keep their slack and
   the live-log panel still meets the footer's top edge. */
#footer.has-build-line .pr-foot-build {
  margin-top: 0.3rem;
}

/* Quieter than the row above it, and NOT uppercase: this is a machine string —
   a commit hash, a timestamp — and letterspaced caps make a hash unreadable,
   which is the one thing anyone reads this line in order to copy. */
.pr-foot-build {
  /* The shell's gutter, not cbprospect's `--pr-gutter` (which IS var(--shell-gutter)
     in that app and nothing in the other fourteen). */
  padding: 0 var(--shell-gutter, 1rem) 0.3rem;
  text-align: center;
  font-family: var(--ax-mono, ui-monospace, monospace);
  font-size: var(--ax-fs-micro, 0.6875rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted, var(--subdued, #8b7a92));
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The line is a button (2026-09-07): a tap opens the Build dialog. */
.pr-foot-build[role="button"] {
  cursor: pointer;
  border-radius: 4px;
  /* A line you tap takes the link floor, 24px (WCAG 2.5.8; APEX-COMPOSE Q0.5).
     It was 18. Line height, not padding, so the ellipsis still works. */
  line-height: 1.5rem;
  padding-bottom: 0;
}
.pr-foot-build[role="button"]:focus-visible {
  outline: 2px solid var(--accent, #ff8100);
  outline-offset: 2px;
  opacity: 1;
}