/* The way back. The masthead carries it too, but the client page is the
   one you land on and the one you have to leave. */
.back {
  margin: var(--s6) 0 calc(var(--s3) * -1);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.back a { color: var(--ink-3); text-decoration: none; }
.back a:hover { color: var(--ink); }

/* The admin pages and the account pages. Same tokens, same measure, same rules as the site -
   this is a back office, not a second product, and it costs nothing to
   let it look like the thing it administers.

   Loaded only on /admin, so the public pages carry none of it. */

.grid {
  width: 100%;
  margin: var(--s3) 0 0;
  border-collapse: collapse;
  font-size: 14px;
}

.grid th,
.grid td {
  padding: var(--s1) var(--s2) var(--s1) 0;
  text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
}

.grid th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule);
}

/* Money and counts line up on their last digit or they cannot be read
   against each other. */
.grid__num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.token {
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
}

.quiet { margin-left: var(--s2); font-size: 13px; color: var(--ink-3); }

.field { display: block; margin: var(--s3) 0 0; }

.field label {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field select {
  width: 100%;
  max-width: 320px;
  padding: var(--s1) 0;
  border: 0;
  border-bottom: 2px solid var(--rule);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: 400 14px/1.5 var(--mono);
}

/* Focus in our own ink rather than the browser's blue. Not outline:
   none alone - a field you cannot see you are in is worse than a blue
   ring - the rule darkens instead, which is the page's own vocabulary
   for "this one". */
.field input:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* The field a refusal was about: the rule in full ink, the way focus
   marks "this one". Not the accent - it means one thing in this product,
   and "wrong" is not it - and not a colour at all: the word above the
   form says what is wrong, this only says where. */
.field [aria-invalid="true"] { border-bottom-color: var(--ink); border-bottom-width: 3px; }

.hint { display: block; margin-top: var(--s1); font-size: 12px; color: var(--ink-3); }

.row { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); }

/* button_to wraps each button in a form of its own, so the buttons are
   grandchildren of the row, not children. */
.row form { margin: 0; }

input[type='submit'],
.row button,
.row form button {
  margin-top: var(--s3);
  padding: var(--s1) var(--s3);
  border: 1.5px solid var(--rule-hard);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.row button,
.row form button { margin-top: 0; }

/* The two that cannot be undone by pressing them again. Not in the
   accent: that colour means one thing in this product and "destructive"
   is not it - the back office shares the palette, so it shares the rule.
   What warns here is the word and the confirmation, not a hue. */
.row .danger,
.row form .danger { border-width: 2px; }

/* What a form got wrong, said before the fields rather than beside them:
   there are two fields and a list above them is read first. */
.errors {
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3);
  border-left: 2px solid var(--rule-hard);
  list-style: none;
  font-size: 14px;
}

.errors li { margin: 0; padding: 0; }
.errors li::before { content: none; }

/* The row of state filters over the client list. Reads as one line of
   prose rather than as tabs: it is a list of words with counts, and the
   one in force is the one that is not a link. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: var(--s3) 0 0;
  font-size: 13px;
}

.filters a { color: var(--ink-3); }
.filters a:hover { color: var(--ink); }
.filters strong { font-weight: 500; }