/* ============================================================
   Tripi auth utility pages — forgot password, reset password,
   OTP sign-in. Standalone, on-brand with the login screen.
   ============================================================ */
*{box-sizing:border-box}
html{margin:0}
body.authp{
  margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:34px 18px;
  font-family:'Schibsted Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#16223f;
  background:radial-gradient(140% 120% at 50% -8%, #eef5fd 0%, #dcebfa 42%, #cadff5 100%);
}
.authp-card{
  width:100%;max-width:444px;background:#fff;border-radius:22px;padding:38px 34px 30px;
  box-shadow:0 32px 80px -26px rgba(8,24,64,.45), 0 2px 6px rgba(8,24,64,.06);
}
.authp-logo{display:block;height:46px;width:auto;margin:0 auto 22px}
.authp-card h1{font-size:24px;font-weight:800;text-align:center;margin:0 0 7px;letter-spacing:-.012em}
.authp-card h1 .accent{color:#0dbda6}
.authp-sub{font-size:15px;color:#5a6b86;text-align:center;margin:0 0 24px;line-height:1.5}
.authp-sub strong{color:#28324c;font-weight:600}

.authp-field{
  display:flex;align-items:center;gap:12px;background:#fafbfd;border:1.5px solid #e2e4ec;border-radius:13px;
  padding:0 15px;height:54px;margin-bottom:14px;
}
.authp-field:focus-within{border-color:#3b6bf0;box-shadow:0 0 0 3px rgba(59,107,240,.14)}
.authp-field .lead{width:20px;height:20px;color:#74799b;flex:none}
.authp-field input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:15.5px;font-weight:500;color:#1d2746}
.authp-field input::placeholder{color:#9aa4ba;font-weight:400}
.authp-field input:-webkit-autofill{-webkit-text-fill-color:#1d2746;-webkit-box-shadow:0 0 0 100px #fafbfd inset;transition:background-color 99999s ease-out 0s}
.authp-eye{flex:none;width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;color:#7c7fa1;display:grid;place-items:center}
.authp-eye svg{width:100%;height:100%}

.authp-otp{
  width:100%;border:1.5px solid #e2e4ec;border-radius:13px;background:#fafbfd;height:62px;margin-bottom:14px;
  text-align:center;font:inherit;font-size:26px;font-weight:700;letter-spacing:.42em;color:#16223f;padding-left:.42em;
}
.authp-otp:focus{outline:none;border-color:#3b6bf0;box-shadow:0 0 0 3px rgba(59,107,240,.14)}
.authp-otp::placeholder{color:#c2cbdc;letter-spacing:.42em}

.authp-btn{
  width:100%;height:54px;border:0;border-radius:13px;cursor:pointer;font:inherit;font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#2f6bff,#1740c8);box-shadow:0 14px 28px -10px rgba(23,64,200,.62);
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;transition:filter .12s,transform .04s;
}
.authp-btn:hover{filter:brightness(1.05)}
.authp-btn:active{transform:translateY(1px)}
.authp-btn svg{width:19px;height:19px}

.authp-links{margin-top:20px;text-align:center;font-size:14px;color:#5a6b86}
.authp-links a{color:#1f50d8;text-decoration:none;font-weight:600}
.authp-links a:hover{text-decoration:underline}
.authp-back{display:inline-flex;align-items:center;gap:6px;color:#5a6b86;font-weight:600}
.authp-back svg{width:15px;height:15px}
.authp-sep{height:1px;background:#eceef4;margin:20px 0}

.authp-flash{border-radius:11px;padding:11px 14px;font-size:14px;margin-bottom:18px;line-height:1.45}
.authp-flash-error,.authp-flash-danger{background:#fdecec;color:#b42318;border:1px solid #f6cfcf}
.authp-flash-ok,.authp-flash-success{background:#e9f8ef;color:#1f7a44;border:1px solid #c5ecd4}
.authp-flash-info,.authp-flash-warning{background:#eef4ff;color:#1f50d8;border:1px solid #cfe0ff}

.authp-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;color:#8a97ad;font-size:12.5px}
.authp-trust svg{width:16px;height:16px;color:#1f50d8}

.authp-invalid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.authp-invalid .badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#fdecec;color:#d8472f;margin-bottom:6px}
.authp-invalid .badge svg{width:30px;height:30px}

/* ---- self-hosted font (no external dependency) ---- */
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/SchibstedGrotesk.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}

/* ---- Create-an-account form (wide card) ---- */
.authp-card.wide{max-width:564px}
.authp-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px;text-align:left;margin-bottom:4px}
.fg{min-width:0}
.fg.full{grid-column:1 / -1}
.fg label{display:block;font-size:13px;font-weight:600;color:#3a4660;margin:0 0 6px}
.fg label .opt{color:#9aa4ba;font-weight:500}
.fg .authp-field{margin-bottom:0}
.authp-sel{position:relative}
.authp-sel select{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:15px;font-weight:500;color:#1d2746;appearance:none;-webkit-appearance:none;cursor:pointer;height:100%}
.authp-sel .chev{width:18px;height:18px;color:#7c7fa1;flex:none;pointer-events:none}
.fg textarea{width:100%;border:1.5px solid #e2e4ec;border-radius:13px;background:#fafbfd;padding:12px 15px;font:inherit;font-size:15px;font-weight:500;color:#1d2746;resize:vertical;min-height:86px;line-height:1.5}
.fg textarea:focus{outline:none;border-color:#3b6bf0;box-shadow:0 0 0 3px rgba(59,107,240,.14)}
.fg textarea::placeholder{color:#9aa4ba;font-weight:400}
.authp-card.wide form > .authp-btn{margin-top:22px}

/* ---- success state ---- */
.authp-success{text-align:center}
.authp-success .badge.ok{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#e9f8ef;color:#1f9d57;margin:2px auto 16px}
.authp-success .badge.ok svg{width:30px;height:30px}
.authp-success h1{margin-bottom:8px}
.authp-success .authp-btn{max-width:280px;margin:20px auto 0}

@media (max-width:540px){
  .authp-grid{grid-template-columns:1fr}
}

/* ---- account-request modal fragment ---- */
.authp-embed{max-width:none}
.authp-rg-pane{text-align:left}
.authp-rg-h{font-size:22px;font-weight:800;text-align:center;margin:2px 0 7px;letter-spacing:-.012em;color:#16223f}
.authp-rg-h .accent{color:#0dbda6}
.authp-embed .authp-sub{margin-bottom:20px}
.authp-errors{background:#fdecec;border:1px solid #f6cfcf;color:#b42318;border-radius:11px;padding:11px 14px;font-size:14px;margin-bottom:16px;line-height:1.5}
.authp-errors ul{margin:0;padding-left:18px}
.authp-errors li{margin:2px 0}
.authp-embed .authp-success{text-align:center;padding:14px 0 6px}