/* The development gate.
 *
 * Nothing but a field and a button in the middle of a white page. No heading,
 * no wording, no colour, no logo, no label. It is a lock, not a page, and it
 * gives a stranger nothing to look at or learn from.
 *
 * Black on white throughout, deliberately: any colour here would be a hint
 * about whose site this is.
 *
 * Separate from site.css on purpose, so the gate never depends on the rest of
 * the stylesheet loading - and so nothing branded is pulled in alongside it.
 */

body.gate-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

.gate-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Both controls are plainly styled rather than left to the browser, because
   the default button on some systems is blue or grey and this page should
   carry no colour at all. */
.gate-form input,
.gate-form button {
  font-family: inherit;
  /* 16px exactly: iOS silently zooms the whole page when a field is smaller. */
  font-size: 16px;
  line-height: normal;
  color: #000000;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #000000;
  border-radius: 0;
  padding: 6px 10px;
  margin: 0;
  /* Stops the operating system imposing its own colour on the control. */
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.gate-form button {
  padding: 6px 16px;
  cursor: pointer;
}

.gate-form button:hover,
.gate-form button:focus {
  background-color: #f2f2f2;
  color: #000000;
}

.gate-form input:focus,
.gate-form button:focus {
  outline: 1px solid #000000;
  outline-offset: 1px;
}