/*
 * Access-word gate — ТЗ §15.1.
 *
 * Deliberately not the admin theme. The gate must not hint that a Verify portal is behind it, and
 * an attacker who can see that a page loads `admin.css`, the Manrope webfont and the orange accent
 * has learned exactly that. So this file is standalone and neutral: system fonts only (no font
 * request to fingerprint), greyscale only (no accent), no logo, no wordmark, no icon, no link.
 *
 * It is also the whole stylesheet for that page — small enough to read in one screen, which is the
 * point: there is nothing in here to reverse-engineer.
 */

:root {
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1f2226;
  background: #f4f5f6;
}

.g {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px;
}

.g-box {
  width: 100%;
  max-width: 320px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dcdfe3;
  border-radius: 6px;
}

.g-msg {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 14px;
  color: #7a2b26;
  background: #f7ecec;
  border: 1px solid #e3c9c7;
  border-radius: 4px;
}

.g-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

/*
 * 44px tall and 16px of type, both deliberate: the touch floor the rest of the portal holds to
 * (ТЗ §26.3), and the size below which iOS Safari zooms the whole page when the field takes focus.
 * The `font-size` has to come after the `font` shorthand, which resets it to the body's 15px.
 */
.g-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 10px;
  font: inherit;
  font-size: 16px;
  color: inherit;
  background: #ffffff;
  border: 1px solid #c8ccd2;
  border-radius: 4px;
}

.g-input:focus-visible {
  outline: 2px solid #4a5059;
  outline-offset: 1px;
}

.g-btn {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 16px;
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background: #3a3f47;
  border: 1px solid #3a3f47;
  border-radius: 4px;
  cursor: pointer;
}

.g-btn:hover {
  background: #2c3037;
}

.g-btn:focus-visible {
  outline: 2px solid #1f2226;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #e6e8ea;
    background: #1b1d20;
  }

  .g-box {
    background: #24272b;
    border-color: #34383d;
  }

  .g-input {
    color: inherit;
    background: #1b1d20;
    border-color: #41464c;
  }

  .g-msg {
    color: #f0cfcd;
    background: #3a2a29;
    border-color: #56403e;
  }

  .g-btn {
    color: #1b1d20;
    background: #d8dbde;
    border-color: #d8dbde;
  }

  .g-btn:hover {
    background: #eceef0;
  }

  /*
   * Both focus rings have to be re-stated here. The light ones are near-black, and `outline-offset`
   * puts them on the box rather than on the control they belong to — #1f2226 on the dark #24272b box
   * is 1.06:1, an invisible ring on the only submit control this page has (WCAG 2.4.7), and #4a5059
   * is 1.84:1 there, under the 3:1 of 1.4.11. #d8dbde is 10.79:1 on the box and 12.15:1 on the
   * field, so the ring reads wherever the offset lands it.
   */
  .g-input:focus-visible,
  .g-btn:focus-visible {
    outline-color: #d8dbde;
  }
}