/* 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 ---------- */
/* An icon, not a labelled button: outline at rest, filled on hover, with a small pill underneath
   naming it. Two states share one footprint — a keyhole when signed out, a figure when signed in —
   so the corner does not shift when somebody's session changes. */
.login { position: relative; display: inline-flex; }

.login__btn {
  appearance: none; background: none; border: 0; padding: 0;
  width: var(--login-box); height: var(--login-box);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); text-decoration: none; line-height: 0;
}
/* [hidden] is display:none in the UA stylesheet, and ANY author `display` beats it. Without this
   both states rendered at once, side by side. */
.login__btn[hidden] { display: none; }

.login__icon {
  height: var(--login-icon); width: auto; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* Both icons are drawn right up to their viewBox edge, and a stroke is painted CENTRED on the
     path, so half of it falls outside. An SVG viewport clips at its edge by default, which shaved a
     flat side off the artwork. This is why the keyhole looked cropped, and it would have happened
     to any icon drawn to its own bounds. */
  overflow: visible;
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
.login__btn:hover .login__icon,
.login__btn:focus-visible .login__icon { fill: var(--ink); stroke: var(--ink); }

/* The figure is a SILHOUETTE, and a silhouette has no outline to draw: stroking it at this size
   traces the inside edge of every fold in the coat and reads as a scribble, not a man. So it is
   filled at rest and simply strengthens on hover. Same gesture as the keyhole — quiet, then
   definite — carried by tone instead of by fill, because that is what the artwork supports. */
/* Full strength, not held back until hover. The keyhole is an invitation and can afford to be
   quiet; this one is a statement that you are signed in, and a faded version of that reads as a
   disabled control rather than a restrained one. */
.login__icon--admin { fill: var(--ink); stroke: none; opacity: 1; }
.login__btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* Centred on .login, not on the button, so it sits under the middle of whichever icon is showing
   even though the keyhole and the figure are different widths. */
.login__pill {
  position: absolute; top: calc(100% + 0.4rem); left: 50%;
  transform: translate(-50%, -2px);
  background: var(--ink); color: var(--on-dark);
  font: 600 0.62rem/1 var(--font-sans);            /* 10% down from the caption size */
  letter-spacing: 0; text-transform: none;
  padding: 0.5em 0.85em; border-radius: 999px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.login__btn:hover .login__pill,
.login__btn:focus-visible .login__pill { opacity: 1; transform: translate(-50%, 0); }

/* A label that appears on hover says nothing on a device that cannot hover: a phone gets the icon
   and no clue what it opens until it has already opened it. Keyed on the input rather than on the
   width, because a touchscreen laptop has exactly the same problem at any size. */
@media (hover: none) {
  .login__pill { opacity: 1; transform: translate(-50%, 0); }
}

/* Signed in, the pill stays out. It carries the person's name rather than a label for the control,
   which is information about who you are signed in AS: worth nothing if you have to hover to find
   it, and the one thing worth saying when two people share a machine. */
.login__btn--admin .login__pill { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .login__icon, .login__pill { transition: none; } }

/* ---------- 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: var(--paper);
}

.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: var(--paper);
}
.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: var(--paper); }
/* 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: var(--paper);
  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: var(--paper);
}
.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: var(--paper);
  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: var(--paper);
}
.authbox .back {
  background: none; border: 0; padding: 0; margin-top: 0.85rem; cursor: pointer;
  font: 400 var(--auth-meta)/1 var(--font-sans);
  color: var(--paper);
  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: var(--paper);
}
.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(--ink); text-decoration: none;
}
.authpage .home:hover { color: var(--ink); }