/* =========================================================
   Account form primitives  —  shared by BOTH account sheets
   ---------------------------------------------------------
   The portal (account-portal.css) and the auth cards
   (account-auth.css) never load together, but a few controls
   belong to both: anything src/js/account-portal.js injects
   runs on either family, so its styling can't live in one of
   them. Those pieces live here and both families load this
   file.

   Deliberately small. Field, card and message styling stay
   in their own sheets — the auth card is liquid glass over a
   radial wash and the portal card is a flat pane on the
   elevation ladder, and collapsing the two would cost both
   of them what makes them read as different rooms.
   ========================================================= */

/* ── Password field ──
   The wrapper, the eye and the caps-lock line are injected by
   account-portal.js around any input carrying data-portal-reveal, so every
   password field in the account area behaves the same way without six
   pages repeating the markup. With JS off the input renders untouched. ── */

.portal-password {
  position: relative;
  display: block;
}

/* Keep the typed value clear of the eye. */
.portal-password input {
  padding-right: 2.9rem;
}

.portal-password__toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;

  /* Reset the global `button` rule in m072224.css (margin-top: 2rem,
     font-size: 1.25rem, uppercase) — see docs/gotchas.md. */
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.88rem;
  text-transform: none;
  line-height: 1;

  background: none;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;

  transition: color 140ms ease, background 140ms ease;
}

/* `* { color: var(--c3) }` matches the <i> DIRECTLY, so it never inherits
   the button's colour — the same trap cta.css documents for .btn-icon. */
.portal-password__toggle i {
  color: inherit;
  pointer-events: none;
}

.portal-password__toggle:hover,
.portal-password__toggle:focus-visible {
  background: var(--tv-surface-hover);
  color: rgba(248, 250, 255, 0.94);
}

.portal-password__toggle:focus-visible {
  outline: 2px solid var(--tv-line-strong);
  outline-offset: 1px;
}

/* Caps lock is the commonest reason a correct password is rejected. Say so
   before the round trip rather than after it. Amber, not red — nothing has
   gone wrong yet. */
.portal-password__caps {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  color: rgba(226, 180, 90, 0.94);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}

.portal-password__caps[hidden] {
  display: none;
}

.portal-password__caps::before {
  content: "\f071"; /* fa-triangle-exclamation */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.72rem;
  color: inherit;
}