/* Styles for assets/js/formcheck.js — the live field validation and the
   show/hide password control.
 *
 * Its own file because the auth card renders under two different stylesheets:
 * landing.css on the public pages (/login, the home page) and style.css inside
 * the signed-in app. Putting these rules in either one left the other without
 * them, which is exactly how the eye ended up rendering underneath the password
 * box instead of inside it.
 *
 * Every override is written twice, plainly: once for the app and once with the
 * `.tv` prefix the public pages need. landing.css styles inputs as
 * `.tv .field input` — two classes and an element — so a single-class rule here
 * loses to it no matter which file loads first. Stating both is duller than a
 * specificity trick and survives someone reordering the stylesheets. */

/* ---- the message ----------------------------------------------------------
   No reserved space until there is something to say: a permanently blank line
   under every input makes a form look sparse and shoves the submit button
   around as you type. */
.fc-msg { display: none; margin: 6px 0 0; font-size: .78rem; line-height: 1.45; }
.fc-msg.show { display: block; }
.fc-msg.err, .tv .fc-msg.err { color: #C0392B; }

/* ---- the invalid field ---------------------------------------------------- */
.field.fc-invalid input,
.field.fc-invalid .fc-pw > input,
.tv .field.fc-invalid input,
.tv .field.fc-invalid .fc-pw > input { border-color: #E0736A; }

.field.fc-invalid input:focus,
.tv .field.fc-invalid input:focus {
  border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.14);
}

/* ---- show / hide password -------------------------------------------------- */
.fc-pw { position: relative; display: block; }
/* Room for the button, so a long password never runs underneath it. */
.fc-pw > input, .tv .field .fc-pw > input { padding-right: 46px; }

.fc-eye {
  position: absolute; top: 0; right: 0; height: 100%; width: 44px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: #7B888F; font-size: .95rem; line-height: 1;
  transition: color .15s ease;
}
.fc-eye:hover { color: #0B1015; }
.fc-eye:focus-visible { outline: 2px solid #25A8CB; outline-offset: -3px; border-radius: 8px; }
/* The button is inside a label, so a click would otherwise also focus the input
   and re-fire the label's default behaviour. */
.fc-eye i { pointer-events: none; }

/* ---- the form's own answer ------------------------------------------------
   "Incorrect email or password" used to arrive as a toast: it appeared in a
   corner, faded after a few seconds, and left the form looking untouched. On
   the one screen where people are already unsure whether they typed something
   wrong, the answer has to stay on the form until they change something.

   Written twice like everything else here — the auth card renders under
   landing.css on /login and the home page, and under style.css inside the app. */
.fc-alert, .tv .fc-alert {
  display: none;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: .88rem;
  line-height: 1.5;
  text-align: left;
}
.fc-alert.show, .tv .fc-alert.show { display: flex; gap: 9px; align-items: flex-start; }
.fc-alert i, .tv .fc-alert i { margin-top: .15em; flex: 0 0 auto; }

.fc-alert.err,  .tv .fc-alert.err  { background: #FDF2F1; border-color: #F0C4BF; color: #A5291B; }
.fc-alert.warn, .tv .fc-alert.warn { background: #FFF8EC; border-color: #F2DDB4; color: #8A5A08; }
.fc-alert.ok,   .tv .fc-alert.ok   { background: #F0FAF5; border-color: #BFE3D0; color: #12805A; }

/* The button says what it is doing, and cannot be pressed twice. Every failed
   press used to burn one of the ten tries the login throttle allows. */
.btn[data-busy], .tv .btn[data-busy] { opacity: .72; cursor: progress; }