/* ==========================================================================
   Acceso: login y registro.

   Una sola hoja para las dos pantallas. Antes login.css traia sus propios tokens
   y signup.ejs traia los suyos dentro de un <style nonce> en la propia plantilla,
   de modo que el mismo boton, el mismo campo y el mismo color de borde eran
   distintos en cada pagina y no habia forma de saber cual mandaba. Al haber dos
  Interfaces con la misma funcion, son una sola, con un vocabulario de componentes
   compartido.

   Clara, no oscura como la landing. Estas dos pantallas se usan a diario y durante
   horas; el fondo oscuro de la marca se queda para la pagina publica. Lo que se
   mantiene es la paleta y la tipografia, para que entrar al panel no parezca
   entrar a otro producto.
   ========================================================================== */

:root {
  /* Paleta: la misma que la landing, aclarada. */
  --ink: #12201a;
  --ink-2: #2c332c;
  --muted: #5f6b64;
  --faint: #8b958f;
  --line: #e2e6e3;
  --line-strong: #cbd2cd;
  --surface: #fff;
  --ground: #f4f6f4;
  --brass: #a8834a;
  --brass-soft: #c5a059;
  --danger: #a4342c;
  --danger-bg: #fbf1f0;
  --ok: #1f6b4a;
  --ok-bg: #eef7f2;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(18, 32, 26, .05), 0 12px 32px -12px rgba(18, 32, 26, .18);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- the shell ---------------------------------------------------------- */

.auth {
  width: 100%;
  max-width: 27rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.75rem, 5vw, 2.75rem);
}

.auth--wide { max-width: 34rem; }

/* --- identity ----------------------------------------------------------- */

.auth__brand {
  text-align: center;
  margin-bottom: 1.75rem;
}

.auth__mark {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brass-soft);
  font-size: 1.1rem;
}

/* The tenant's own host, resolved from the database and never from the Host
   header. See src/utils/siteHost.js. */
.auth__host {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.2;
  word-break: break-word;
}

.auth__sub {
  margin: .35rem 0 0;
  font-size: .875rem;
  color: var(--muted);
}

/* --- messages ----------------------------------------------------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  text-align: left;
}

.notice i { margin-top: .15rem; flex: none; }
.notice--error { background: var(--danger-bg); border-color: #f0d8d5; color: var(--danger); }
.notice--ok { background: var(--ok-bg); border-color: #cfe6da; color: var(--ok); }

.notice--error.shake { animation: shake .32s var(--ease); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.hidden { display: none !important; }

/* --- fields ------------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }

.field > label,
.field-label {
  display: block;
  margin-bottom: .4rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.control {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.control::placeholder { color: var(--faint); }

.control:hover { border-color: #a9b3ac; }

.control:focus {
  outline: none;
  border-color: var(--brass);
  /* A ring and not just a colour change: a field you can see is focused matters
     more than one that looks tidy. */
  box-shadow: 0 0 0 3px rgba(197, 160, 89, .22);
}

.control[aria-invalid='true'] { border-color: var(--danger); }

/* An input with an icon: the text is inset so it does not run under the glyph. */
.control-wrap { position: relative; }

.control-wrap .control { padding-left: 2.6rem; }

.control-wrap__icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: .9rem;
  pointer-events: none;
}

/* --- the subdomain pair ------------------------------------------------- */

.subdomain {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.subdomain:focus-within {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, .22);
}

.subdomain .control {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.subdomain__suffix {
  display: flex;
  align-items: center;
  padding: 0 .8rem;
  background: var(--ground);
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
  white-space: nowrap;
  user-select: none;
}

.hint {
  margin: .4rem 0 0;
  font-size: .8rem;
  color: var(--faint);
}

.divider {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* --- the 2FA code ------------------------------------------------------- */

/* Six digits read as one token, so the spaces go in with letter-spacing and the
   field is a single input: six boxes need six focus calls to fill in. */
.code .control {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .55em;
  text-align: center;
  padding-left: .55em;
  /* The letter-spacing adds a trailing gap that shifts the text left of centre. */
  text-indent: .55em;
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: .85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #f6f4ef;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .12s var(--ease),
              opacity .2s var(--ease);
}

.btn:hover { background: #1c2f26; }
.btn:active { transform: translateY(1px); }

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.btn:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* While a request is in flight the label is replaced by a spinner, so the width
   has to be reserved or the button jumps. */
.btn__spin {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- footer links ------------------------------------------------------- */

.auth__links {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .875rem;
}

.auth__links a { color: var(--muted); }
.auth__links a:hover { color: var(--ink); text-decoration: underline; }

.auth__foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}