/* The strip under the editors: the pages a tool like this owes its user, the
   build number, and one line of the promise it makes.

   All four links are buttons rather than anchors, because none of them goes
   anywhere: Help opens the help dialog, and About, Disclaimer and Privacy open
   the preview note until the pages behind them are written. */

/* Three columns rather than the flex row this was, so the version sits in the
   middle of the strip and stays there: with 1fr on either side the centre
   column is centred on the footer itself, whatever the links and the promise
   happen to measure. Flex could not do that — space-between puts the middle
   item wherever its neighbours leave it. */
.appfoot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  /* The last item in .app's flex column. .workspace has flex: 1, so this keeps
     the height its content asks for and the editors give up the difference. */
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--colour-border-soft);
  font-size: 0.7rem;
  color: var(--colour-text-muted);
}

.appfoot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.appfoot__link {
  font-size: 0.7rem;
  line-height: 1.5;
}

/* Painted as the link it will be once there is a page behind it. Kept a
   <button> because it opens a dialog rather than going anywhere. */
.appfoot__link--button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--colour-accent-ink);
  font-family: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.appfoot__link--button:hover {
  color: var(--colour-accent-hover);
}

.appfoot__link--button:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Mono, like every other figure the interface states rather than describes, and
   never wrapped: "v0.5.0" broken across two lines would read as two numbers. */
.appfoot__version {
  margin: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

.appfoot__note {
  max-width: 46rem;
  margin: 0;
  text-align: right;
}

/* Three columns need room the narrow card does not have: the promise is a
   sentence, and squeezed into a third of a phone it becomes a column of single
   words. Stacked and left-aligned below this, in reading order. */
@media (max-width: 56rem) {
  .appfoot {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .appfoot__version,
  .appfoot__note {
    text-align: left;
  }
}

@media (max-width: 40rem) {
  .appfoot {
    padding: 0.9rem 1rem;
  }
}