@layer components {
  .authentication {
    color-scheme: dark;
    --ink: #edf4f7;
    --muted: #a5bbc6;
    --accent: #75d7e2;
    --line: #304956;
    --danger: #ffaaaa;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--ink);
    background: radial-gradient(ellipse at top, #153c4e 0, #0b202c 55%, #081821 100%);
    display: flow-root;
  }

  .authentication .auth-shell { margin: clamp(2rem, 8vh, 6rem) auto; }
  .authentication .auth-brand { margin-bottom: 2.5rem; }
  .authentication .auth-brand img { display: block; max-width: 100%; height: auto; }
  .authentication .auth-card {
    background: #112c3a;
    border-color: var(--line);
    box-shadow: 0 24px 64px #00000030;
  }
  .authentication .auth-card input:not([type=submit]) {
    background: #0b202c;
    color: var(--ink);
    border-color: #587380;
  }
  .authentication .auth-card input::placeholder { color: var(--muted); opacity: 1; }
  .authentication .auth-card input:autofill {
    box-shadow: 0 0 0 1000px #0b202c inset;
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
  }
  .authentication .button {
    appearance: none;
    min-height: 44px;
    font-size: 1.05rem;
    background: linear-gradient(180deg, #89dfe7 0%, #75d7e2 48%, #63c6d3 100%);
    border: 1px solid #4cabb9;
    border-top-color: #b0edf2;
    border-bottom-color: #3993a3;
    border-radius: 6px;
    color: #103843;
    /* Paired shadows give the label a subtle engraved, letterpress finish. */
    text-shadow: 0 -1px 1px #00344245, 0 1px 0 #e1fcff80;
    box-shadow: inset 0 1px 0 #efffff66, inset 0 -1px 0 #287f9026,
      0 2px 3px #00000024, 0 5px 12px #00000014;
    transition: box-shadow 140ms ease, border-color 140ms ease, transform 100ms ease;
  }
  .authentication .button:hover {
    background: linear-gradient(180deg, #9ae7ee 0%, #84dfe8 48%, #70d0dc 100%);
    border-color: #76cbd6;
    border-top-color: #c6f5f8;
    border-bottom-color: #4eabba;
    box-shadow: inset 0 1px 0 #efffff80, inset 0 -1px 0 #287f9026,
      0 2px 4px #00000026, 0 6px 16px #00000020;
  }
  .authentication .button:active {
    background: linear-gradient(180deg, #60c1ce 0%, #77d5df 100%);
    border-color: #4195a4;
    box-shadow: inset 0 2px 4px #124b5b40, inset 0 -1px 0 #e1fcff40,
      0 1px 2px #00000020;
    transform: translateY(1px);
  }
  .authentication .button:focus-visible { outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) {
    .authentication .button { transition: none; }
    .authentication .button:active { transform: none; }
  }
  .authentication .flash { background: #173d35; border-color: #427b69; color: #d3f3e5; }
  .authentication .flash--alert { background: #442a30; border-color: #975b65; color: #ffd4d9; }
  .authentication .field_with_errors input { border-color: var(--danger); }
  .authentication .skip-link:focus { background: #112c3a; color: var(--accent); }
}