/* Bismillah - static/ui/auth.css — the sign-in and sign-up pages
 * (en_template/login.html, register.html on ui/public_base.html), 2026-10-05.
 * COMMON file. Same x- design system as expertini-ui.css (tokens from :root
 * there); every rule here is scoped to .xa so nothing else changes.
 * Mobile first: one centred card, 16px side gutters, 46-48px controls,
 * 16px input text on phones (no iOS zoom on focus). No ads on these pages
 * (jobseeker_nav.AD_FREE_PATHS) — none may ever be added here.
 */
.xa{display:flex;justify-content:center;align-items:flex-start;padding:24px 16px 40px;
  min-height:min(calc(100vh - 120px),900px);
  background:radial-gradient(900px 420px at 50% -120px,rgba(37,99,235,.11),rgba(37,99,235,0) 70%),
             radial-gradient(600px 300px at 100% 100%,rgba(6,182,212,.07),rgba(6,182,212,0) 70%),var(--x-bg)}
@media (min-width:700px){.xa{padding:56px 24px 72px}}

.xa-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--x-border);border-radius:20px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 48px rgba(15,23,42,.08);padding:26px 20px 20px}
@media (min-width:480px){.xa-card{padding:34px 34px 26px}}

.xa .xa-logo{display:block;width:max-content;margin:0 auto 16px;line-height:0}
.xa .xa-logo img{height:32px;width:auto;max-width:none;display:block}
.xa .xa-h{font:700 22px/1.25 var(--x-f-disp);color:var(--x-text);text-align:center;margin:0 0 6px;letter-spacing:-.01em}
@media (min-width:480px){.xa .xa-h{font-size:24px}}
.xa .xa-sub{font-size:13.5px;line-height:1.5;color:var(--x-subtext);text-align:center;margin:0 0 18px}

/* Job seeker / Employer — a small segmented control */
.xa .xa-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 16px;background:#f1f5f9;border-radius:12px}
.xa .xa-seg__b{-webkit-appearance:none;appearance:none;border:0;background:transparent;border-radius:9px;min-height:38px;padding:7px 10px;
  display:flex;align-items:center;justify-content:center;gap:6px;font:500 13.5px var(--x-f-body);color:var(--x-text-3)!important;
  cursor:pointer;text-decoration:none!important;transition:background .15s,color .15s,box-shadow .15s}
.xa .xa-seg__b:hover{color:var(--x-text)!important}
.xa .xa-seg__b.is-on{background:#fff;color:var(--x-text)!important;box-shadow:0 1px 3px rgba(15,23,42,.14)}
.xa .xa-seg__b .x-ico{width:15px;height:15px}
.xa .xa-seg__b:focus-visible{outline:2px solid var(--x-primary);outline-offset:1px}

/* Google */
.xa .xa-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;padding:0 16px;
  border:1px solid #dadce0;border-radius:12px;background:#fff;color:#1f1f1f!important;font:500 14.5px var(--x-f-body);
  text-decoration:none!important;transition:background .15s,border-color .15s}
.xa .xa-google:hover{background:#f8fafc;border-color:#c4c9d1}
.xa .xa-google:focus-visible{outline:2px solid var(--x-primary);outline-offset:2px}
.xa .xa-google svg{width:18px;height:18px;flex:0 0 auto}
.xa .xa-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--x-subtext);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.xa .xa-or::before,.xa .xa-or::after{content:"";flex:1;height:1px;background:var(--x-border)}

/* fields */
.xa .xa-f{margin:0 0 14px}
.xa .xa-f>label{display:block;font:500 13px/1.3 var(--x-f-body);color:var(--x-text-2);margin:0 0 6px}
.xa .xa-in{position:relative}
.xa .xa-in input{display:block;width:100%;height:46px;margin:0;padding:0 14px;border:1px solid var(--x-border);border-radius:12px;
  background:#fff;font:400 16px var(--x-f-body);color:var(--x-text);outline:0;box-shadow:none;transition:border-color .15s,box-shadow .15s}
@media (min-width:700px){.xa .xa-in input{font-size:15px}}
.xa .xa-in input::placeholder{color:#94a3b8}
.xa .xa-in input:focus{border-color:var(--x-primary);box-shadow:var(--x-ring)}
.xa .xa-in--pw input{padding-right:50px}
.xa .xa-eye{position:absolute;right:3px;top:3px;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:transparent;
  color:var(--x-subtext);cursor:pointer;display:flex;align-items:center;justify-content:center}
.xa .xa-eye:hover{color:var(--x-primary);background:var(--x-tint)}
.xa .xa-eye:focus-visible{outline:2px solid var(--x-primary);outline-offset:-2px}
.xa .xa-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xa .xa-eye .xa-eye__off{display:none}
.xa .xa-eye[aria-pressed="true"] .xa-eye__on{display:none}
.xa .xa-eye[aria-pressed="true"] .xa-eye__off{display:block}

/* password rules (sign-up) — tick as they are met */
.xa .xa-rules{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.xa .xa-rules li{margin:0;padding:3px 9px;border-radius:99px;background:#f1f5f9;color:var(--x-text-3);font-size:11.5px;line-height:1.5}
.xa .xa-rules li.is-ok{background:#ecfdf5;color:#047857}
.xa .xa-rules li.is-ok::before{content:"\2713\00a0"}

.xa .xa-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:2px 0 16px;font-size:13.5px}
.xa .xa-check{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--x-text-2);font-weight:400;cursor:pointer}
.xa .xa-check input{width:17px;height:17px;margin:0;accent-color:var(--x-primary)}
.xa .xa-link{color:var(--x-primary)!important;font-weight:500;text-decoration:none}
.xa .xa-link:hover{text-decoration:underline}

.xa .xa-msg{margin:0 0 14px;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.45}
.xa .xa-msg--err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.xa .xa-msg--ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.xa .xa-msg a{color:inherit!important;font-weight:600;text-decoration:underline}
.xa [hidden]{display:none!important}

.xa .xa-submit{width:100%;height:48px;font-size:15px;font-weight:600!important;border-radius:12px}
.xa .xa-submit[disabled]{opacity:.75;cursor:progress;transform:none}
.xa .xa-spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:xa-spin .7s linear infinite}
.xa .xa-submit.is-busy .xa-spin{display:inline-block}
@keyframes xa-spin{to{transform:rotate(360deg)}}

.xa .xa-fine{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--x-subtext);text-align:center}
.xa .xa-switch{margin:18px 0 0;text-align:center;font-size:14px;color:var(--x-text-3)}
.xa .xa-trust{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin:16px 0 0;padding:14px 0 0;
  border-top:1px solid var(--x-border);font-size:12px;line-height:1.5;color:var(--x-subtext);text-align:left}
.xa .xa-trust .x-ico{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--x-success)}

/* the honeypot: off screen, never display:none (some bots skip hidden fields) */
.xa .xa-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}