/* Sign-in pages (docs/ui-redesign.md WP6): login, code_auth, languageSelect, set_password.
   Loaded by views/partial/bare_head.ejs after theme.css. Tokens only, so light and dark both work.
   Layout: main.pf-auth > .pf-auth__card(--wide) > .pf-auth__brand + page content; footer.pf-auth__foot. */

body.pf.pf-authpage { min-height: 100vh; background: var(--pf-surface); }
body.pf .pf-auth {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 100vh; min-height: 100dvh; padding: 32px 16px 24px;
}
body.pf .pf-auth__card {
  position: relative; width: min(400px, 100%); padding: 28px 28px 24px;
  background: var(--pf-bg); border: 1px solid var(--pf-line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 8px 24px rgba(15, 27, 45, .06);
}
body.pf.darkmode .pf-auth__card { box-shadow: none; }
body.pf .pf-auth__card--wide { width: min(880px, 100%); }
body.pf .pf-auth__card::before { content: ""; display: block; height: 2px; margin: -28px -28px 26px; border-radius: 12px 12px 0 0; background: var(--pf-brand-gradient); }
body.pf .pf-auth__brand { display: flex; justify-content: center; margin-bottom: 22px; }
body.pf .pf-auth__brand img { height: 40px; width: auto; }
body.pf .pf-auth__title { margin: 0 0 4px; text-align: center; font: 700 20px/1.3 var(--pf-font-display); letter-spacing: -0.2px; color: var(--pf-ink); }
body.pf .pf-auth__lead { margin: 0 0 18px; text-align: center; color: var(--pf-mute); }
body.pf .pf-auth__lead + .pf-auth__lead { margin-top: -14px; }
body.pf .pf-auth__field { display: grid; gap: 6px; margin-bottom: 14px; }
body.pf .pf-auth__field > label { margin: 0; }
body.pf .pf-auth__section { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--pf-line); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-mute); }
body.pf .pf-auth .form-control { height: 38px; font-size: 14px; }
body.pf .pf-auth .btn-block, body.pf .pf-auth .btn-lg { height: 38px; font-size: 14px; }
body.pf .pf-auth .alert { margin-bottom: 14px; }
body.pf .pf-auth .alert .close { float: inline-end; margin-inline-start: 8px; }
body.pf .pf-auth__error { margin: 8px 0; color: var(--pf-red); }
body.pf .pf-auth__error:empty { display: none; }
body.pf ul.pf-auth__error { padding-inline-start: 18px; }
body.pf .pf-auth__alt { margin: 14px 0 0; text-align: center; color: var(--pf-mute); }

/* password with show/hide button */
body.pf .pf-auth__pw { position: relative; }
body.pf .pf-auth__pw > .form-control { padding-inline-end: 40px; }
body.pf .pf-auth__eye {
  position: absolute; top: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: var(--pf-radius); background: transparent; color: var(--pf-mute); cursor: pointer;
}
body.pf .pf-auth__eye:hover { background: var(--pf-surface); color: var(--pf-ink); }
body.pf .form-control.invalid-input { border-color: var(--pf-red); box-shadow: 0 0 0 1px var(--pf-red); }

/* 2FA code */
body.pf .otp-input-group { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
body.pf .pf-auth .otp-input {
  flex: 1 1 0; min-width: 0; max-width: 48px; height: 52px; padding: 0; text-align: center; text-transform: uppercase;
  font: 600 20px/1 var(--pf-font-ui);
}
body.pf #resendLink.disabled { pointer-events: none; color: var(--pf-mute); text-decoration: none; }
body.pf #timerText { min-height: 1.45em; margin: 6px 0 0; text-align: center; }
body.pf .pf-auth__back { margin-top: 14px; text-align: center; }
[dir="rtl"] body.pf .pf-auth__field input[dir="ltr"]:placeholder-shown { direction: rtl; }
[dir="rtl"] body.pf .pf-auth__backarrow { display: inline-block; transform: scaleX(-1); }

/* language choice */
body.pf .pf-lang-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
body.pf .pf-lang-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 14px 8px 12px;
  border: 1px solid var(--pf-line-strong); border-radius: var(--pf-radius-panel); background: var(--pf-bg);
  color: var(--pf-ink); font: 600 13px/1.2 var(--pf-font-ui); cursor: pointer;
}
body.pf .pf-lang-grid button:hover { background: var(--pf-surface); border-color: var(--pf-live); }
body.pf .pf-lang-grid img { height: 32px; width: auto; border: 1px solid var(--pf-line); border-radius: 4px; }
body.pf .pf-lang-grid button[aria-current="true"] { border-color: var(--pf-live); background: var(--pf-select); box-shadow: var(--pf-ring); }

/* language picker (bare_head.ejs): flag + code in the card's top end corner, list through pf.js menu */
body.pf .pf-auth__lang { position: absolute; top: 12px; inset-inline-end: 12px; }
body.pf .pf-auth__langbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 8px;
  border: 1px solid var(--pf-line); border-radius: var(--pf-radius); background: var(--pf-bg);
  color: var(--pf-ink-2); font: 600 12px/1 var(--pf-font-ui); letter-spacing: .03em; cursor: pointer;
}
body.pf .pf-auth__langbtn:hover, body.pf .pf-auth__langbtn[aria-expanded="true"] { background: var(--pf-surface); border-color: var(--pf-line-strong); color: var(--pf-ink); }
body.pf .pf-auth__langbtn:focus-visible { outline: none; border-color: var(--pf-live); box-shadow: var(--pf-ring); }
body.pf .pf-auth__langbtn img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
body.pf .pf-auth__langbtn .mdi { font-size: 14px; line-height: 1; color: var(--pf-mute); }
body.pf #pfAuthLangMenu { min-width: 200px; max-height: 600px; }

/* set password */
body.pf .pf-auth__cols { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); align-items: start; }
body.pf .pf-auth__rules { margin: 0; }
body.pf .pf-auth__rules h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
body.pf .pf-auth__rules ul { margin: 0; padding-inline-start: 18px; }
@media (max-width: 719.98px) {
  body.pf .pf-auth__cols { grid-template-columns: minmax(0, 1fr); }
}

body.pf .pf-auth__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 12px; color: var(--pf-mute); }
body.pf .pf-auth__foot a { color: inherit; }
body.pf .pf-auth__foot a:hover { color: var(--pf-ink); }

@media (max-width: 479.98px) {
  body.pf .pf-auth { justify-content: flex-start; padding: 20px 16px; }
  body.pf .pf-auth__card { padding: 22px 18px 18px; }
  body.pf .pf-auth__card::before { margin: -22px -18px 22px; }
  body.pf .pf-auth__lang { top: 8px; inset-inline-end: 8px; }
  body.pf .pf-auth__langbtn { gap: 5px; padding: 0 6px; }
  body.pf .pf-auth__langbtn .mdi { display: none; }
}