/* RESI auth surfaces — the splash modal and the pages behind it.
 *
 * One stylesheet for all of them so a change to the sign-in box does not have to be made four
 * times and get made three. The modal and the standalone pages share the same .authbox.
 *
 * Type here runs 30% below the site scale: this is a utility surface sitting on a page whose
 * subject is the mark, and it should not compete with it. Input text is the exception, held at
 * 16px on touch, because iOS Safari zooms the whole page when a field smaller than that is focused
 * and the visitor then has to pinch their way back out.
 */

:root {
  /* 0.77, not 0.7: 30% below the site scale put field labels at 7.7px, which reads on a good
     screen and disappears on a poor one. Ten per cent back. */
  --auth-scale: 0.77;
  --auth-ui:   calc(var(--t-ui) * var(--auth-scale));
  --auth-cap:  calc(var(--t-caption) * var(--auth-scale));
  --auth-meta: calc(var(--t-meta) * var(--auth-scale));
  --auth-radius: 6px;
}

/* ---------- the trigger, on the splash ---------- */
.login { position: relative; }

.login__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 500 var(--auth-ui)/1 var(--font-sans);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--auth-radius);
  padding: 0.62rem 0.95rem; cursor: pointer;
  min-height: 38px;               /* still a comfortable target at this type size */
  transition: opacity var(--dur) var(--ease);
}
.login__btn:hover { opacity: 0.82; }
.login__btn svg { width: 11px; height: 11px; }

/* ---------- the box, wherever it lives ---------- */
.authbox {
  background: var(--ink); color: var(--paper);
  border-radius: var(--auth-radius);
  padding: 1.35rem 1.3rem 1.2rem;
  width: 21rem; max-width: calc(100vw - 2.5rem);
}

.authbox h1, .authbox h2 {
  margin: 0 0 0.9rem;
  font: 600 var(--auth-cap)/1.3 var(--font-sans);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

.authbox .field { margin: 0 0 0.75rem; }
.authbox .field label {
  display: block; margin: 0 0 0.25rem;
  font: 500 var(--auth-cap)/1 var(--font-sans);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}
.authbox .field input {
  width: 100%; color: var(--paper); background: transparent;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius: 0; padding: 0.42rem 0;
  font: 400 var(--auth-ui)/1.4 var(--font-sans);
  -webkit-text-fill-color: var(--paper);   /* Safari autofill otherwise paints it dark on dark */
}
.authbox .field input:focus { outline: none; border-bottom-color: var(--paper); }
.authbox .field input::placeholder { color: color-mix(in srgb, var(--paper) 34%, transparent); }
/* Chrome's autofill yellow is unreadable here; the inset shadow repaints the well. */
.authbox .field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40rem var(--ink) inset;
  -webkit-text-fill-color: var(--paper);
}
/* Touch keyboards zoom anything under 16px. Desktop keeps the smaller setting. */
@media (pointer: coarse) { .authbox .field input { font-size: 16px; } }

.authbox .field--pw { position: relative; }
.authbox .field--pw input { padding-right: 3rem; }
.authbox .peek {
  position: absolute; right: 0; bottom: 0.2rem;
  background: none; border: 0; cursor: pointer; padding: 0.3rem 0.1rem;
  font: 500 var(--auth-cap)/1 var(--font-sans);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  min-height: 30px;
}
.authbox .peek:hover { color: var(--paper); }

.authbox .msg {
  margin: 0.5rem 0 0; min-height: 1.1em;
  font: 400 var(--auth-meta)/1.45 var(--font-sans);
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.authbox .msg--bad { color: #f0a3a1; }        /* coral, lifted to read on black */
.authbox .msg--ok  { color: var(--paper); }

.authbox .go {
  width: 100%; margin-top: 0.85rem; min-height: 38px;
  font: 600 var(--auth-ui)/1 var(--font-sans);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--paper); border-radius: var(--auth-radius);
  padding: 0.7rem 1rem; cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.authbox .go:disabled { opacity: 0.45; cursor: default; }

.authbox .foot {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 0.85rem; padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.authbox .foot a, .authbox .foot button {
  background: none; border: 0; padding: 0.15rem 0; cursor: pointer;
  font: 400 var(--auth-meta)/1.4 var(--font-sans);
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  text-decoration: none;                      /* house rule: no underlines */
}
.authbox .foot a:hover, .authbox .foot button:hover { color: var(--paper); }

.authbox .note {
  margin: 0 0 0.9rem;
  font: 400 var(--auth-meta)/1.55 var(--font-sans);
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.authbox .back {
  background: none; border: 0; padding: 0; margin-top: 0.85rem; cursor: pointer;
  font: 400 var(--auth-meta)/1 var(--font-sans);
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  text-decoration: none; display: inline-block;
}
.authbox .back:hover { color: var(--paper); }

/* ---------- centred, not pinned ---------- */
.modal {
  position: fixed; inset: 0; z-index: 40;
  display: none; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.modal[data-open] { display: flex; }
.modal__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(2px);
}
.modal .authbox {
  position: relative;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.65);
  animation: authIn 0.24s var(--ease);
}
@keyframes authIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal .authbox { animation: none; } }

.modal__close {
  position: absolute; top: 0.55rem; right: 0.6rem;
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 1.1rem; padding: 0.25rem 0.4rem;
  color: color-mix(in srgb, var(--paper) 50%, transparent);
}
.modal__close:hover { color: var(--paper); }

/* ---------- standalone pages ---------- */
.authpage {
  min-height: 100svh; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
  background: var(--paper); color: var(--ink); font-family: var(--font-sans);
}
.authpage .authbox { box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.5); }
.authpage .wrap { text-align: center; }
.authpage .home {
  display: inline-block; margin-top: 1.1rem;
  font: 400 var(--auth-meta)/1 var(--font-sans);
  color: var(--grey); text-decoration: none;
}
.authpage .home:hover { color: var(--ink); }