/* The navigation row, shared by every admin page so the app cannot drift into
   looking like three different products.
   ---------------------------------------------------------------------------
   What was wrong before:

   • The settings pages put `flex: 1` on every link, so each one stretched to an
     equal share of the row. "Home" then occupied as much width as "How Letters
     works", which no longer fitted on one line and wrapped — so neighbouring
     buttons had different heights. Width must follow the label, never the row.
   • The guides used a single amber pill, the tutorial page used bare text links,
     and the settings pages used grey blocks. Same job, three appearances.
   • The build number sat inside the row as if it were a button.

   The rules here: one height whatever the label, width from content, never two
   lines, and exactly one amber button per page so the eye knows where "back" is.
   Everything else is quiet. */

/* A strict grid, not a wrapping flex row.
   Flex-wrap gave every button its own width, so a row ended wherever the words
   happened to run out — ragged in English and worse in German, where compound
   nouns are half again as long. Three equal columns means every button is the
   same width as every other, in every language, and two full rows with no gap.
   That only works if the count is a multiple of three, which is why the
   owner-only Customers link lives in the header instead. */
.actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 26px;
}

.actions a,
.back {
  /* The cell decides the width; the label never does. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  /* One line, always — this is what kept heights ragged. */
  white-space: nowrap;
  border-radius: 10px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.actions a:hover,
.back:hover {
  background: #24344a;
  border-color: #475569;
  color: #e8eef7;
}

.actions a:active,
.back:active {
  transform: translateY(1px);
}

.actions a:focus-visible,
.back:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* The one amber button on a page: the way back. Two would compete, and on the
   settings pages SAVE already owns that colour, so those rows have none. */
.actions a.primary {
  background: #fbbf24;
  border-color: #fbbf24;
  color: #0f172a;
  font-weight: 700;
}

.actions a.primary:hover {
  background: #fcd34d;
  border-color: #fcd34d;
  color: #0f172a;
}

/* The Customers page carries its back-link in the header rather than a row at
   the foot, so it keeps that position but wears the same pill. */
.back {
  gap: 7px;
}

/* Page title beside its owner-only link. */
.titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.titlerow h1 {
  margin: 0;
}
.ownerlink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ownerlink:hover {
  border-color: #475569;
  color: #cbd5e1;
}

/* Which build answered — kept, because "is that deployed?" has cost real time,
   but out of the button row and quiet enough to ignore. */
.buildline {
  margin-top: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #3d4a5f;
  user-select: text;
}

@media (max-width: 430px) {
  /* Narrow phones: two columns, three full rows. Still even, still no gap. */
  .actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .actions a {
    padding: 0 8px;
    font-size: 13.5px;
  }
}

/* The header back-link is not in the grid, so it keeps sizing to its words. */
.back {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
  .actions a {
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  }
}