/* auth
   Sign in, password reset, and the branded panel beside them.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- sign in ----------------
   The front door of the same instrument. Its only ornament is bands of light
   — the thing this product exists to control. No stock photography. */
.auth { background: var(--surface); }

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 44%) 1fr;
  min-height: 100vh;
}
@media (max-width: 820px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { min-height: 210px; }
}

.auth-brand {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding: 44px;
  display: flex;
  flex-direction: column;
  /* Identity sits low, where the light has fallen away — so the ornament
     never competes with the words. */
  justify-content: flex-end;
  gap: 22px;
}

/* Slats: full-bleed bands of light, brightest at the top and falling away —
   a shade closing downward. The panel's only ornament. */
.auth-slats {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  padding-top: 8px;
  pointer-events: none;
}
.auth-slats span {
  display: block;
  height: 5px;
  background: var(--signal);
  flex-shrink: 0;
}

/* Chrome's autofill overrides our field colours; pin them back. */
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--ink);
}

.auth-brand-inner, .auth-brand-foot { position: relative; z-index: 1; }
.auth-logo { max-height: 40px; max-width: 200px; display: block; margin-bottom: 20px; }
.auth-wordmark {
  font: 600 26px var(--ui);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.auth-wordmark em { font-style: normal; color: var(--signal); }

.auth-tagline {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  max-width: 30ch;
  margin: 0;
}
.auth-brand-foot {
  font: 400 12px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}
.auth-form { width: 100%; max-width: 348px; }
.auth-title {
  font: 500 26px var(--ui);
  letter-spacing: -0.025em;
  margin: 8px 0 24px;
}
.auth-lede { color: var(--ink-2); font-size: 14.5px; margin: -14px 0 22px; }
.auth-form .field { margin-bottom: 16px; }
.auth-form input[type=email],
.auth-form input[type=password] { padding: 10px 12px; }

/* --- showing a password --- */
/* The button sits INSIDE the field's box rather than beside it: a control
   next to the input reads as a second field, and this is part of the one it
   belongs to. The right padding is added only once JavaScript has put a
   button there to need it. */
.password-field { position: relative; }
.password-field .has-reveal input,
.field.has-reveal .password-field input { padding-right: 42px; }
.password-reveal {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: grid; place-items: center;
  width: 40px; padding: 0; border: 0; background: none;
  color: var(--ink-3); cursor: pointer;
}
/* `background: none` is load-bearing, not tidiness. The global
   `button:hover` (line ~196) paints EVERY button's background #000, so
   without this the eye becomes a black tile and the darker icon vanishes
   into it — the change of colour happens, and nobody can see it. Same trap
   as .reporter-button and .ap-send. */
.password-reveal:hover { background: none; color: var(--ink); }
/* `display: block` beats the browser's own `[hidden] { display: none }`, so
   the hidden icon has to be hidden again explicitly — otherwise both eyes
   stack inside the button. */
.password-reveal svg { display: block; }
.password-reveal svg[hidden] { display: none; }
.password-reveal:focus-visible {
  outline: 2px solid var(--signal); outline-offset: -2px; border-radius: var(--r);
}

.auth-links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.auth-links a { color: var(--ink-2); text-decoration: none; }
.auth-links a:hover { color: var(--signal); }