/* public/css/auth.css
   ---------------------------------------------------------------------------
   Split sign-in shell: form on the left, marketing panel on the right.
   Loaded only by layouts/guest.blade.php, so nothing here can reach the app.

   Every colour, radius and font comes from root.css tokens. Fonts are set
   explicitly on input/button/select because those elements do NOT inherit the
   page family — that is the usual way a control drifts to a system font.
   Buttons change colour on hover and never move or resize. */

/* ---------------------------------------------------------------- shell -- */

.pf-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-gray-060);
  font-family: var(--font-body);
  color: var(--color-text);
}

.pf-auth__grid {
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* ------------------------------------------------------------ left card -- */

.pf-auth__panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  box-shadow: var(--shadow2);
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
}

.pf-auth__brand {
  display: block;
  margin-bottom: 44px;
}

.pf-auth__brand img {
  height: 68px;
  width: auto;
  object-fit: contain;
}

.pf-auth__title {
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}

.pf-auth__sub {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--color-gray-600);
  margin: 0 0 28px;
}

/* ---------------------------------------------------------------- form -- */

.pf-field {
  margin-bottom: 18px;
}

.pf-label {
  display: block;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 7px;
}

.pf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.pf-input::placeholder {
  color: var(--color-gray-350);
}

.pf-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--alpha-accent-20, rgba(25, 130, 196, .16));
}

/* Fixed country code. Nepal-only for now, so it is displayed, not chosen —
   a select here would only ever hold one option. */
.pf-phone {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-white);
  /* NOT overflow:hidden — that would clip the focus glow this box draws for
     the input inside it. The prefix carries its own rounded corners. */
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* The input inside has no border of its own, so the group carries the focus
   state for it — same treatment as a plain .pf-input. */
.pf-phone:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--primary-bright-soft, rgba(255, 138, 0, .16));
}

.pf-phone__cc {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-right: 1px solid var(--color-gray-200);
  border-radius: 9px 0 0 9px;
  background: var(--color-gray-060);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  flex: 0 0 auto;
}

/* Drawn flag, not the 🇳🇵 emoji — Windows ships no country-flag glyphs, so the
   emoji renders there as the letters "NP". An SVG looks the same everywhere. */
.pf-phone__flag {
  display: block;
  flex: 0 0 auto;
  width: 14px;
  height: auto;
}

/* One plain box for the ten local digits. It sits inside .pf-phone so the +977
   prefix and the field read as a single control, which is why it carries no
   border of its own — the group draws that. */
.pf-phone__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 0;
  border-radius: 0 9px 9px 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  outline: none;
}

.pf-phone__input::placeholder {
  color: var(--color-gray-350);
  font-weight: 400;
  letter-spacing: normal;
}

/* All ten in. A soft green edge, from the same success ramp the app already
   uses — this is a "done" state, not a brand one. */
.pf-phone.is-complete {
  border-color: var(--color-success-check-border);
}

.pf-phone.is-complete:focus-within {
  border-color: var(--state-palette-green);
  box-shadow: 0 0 0 3px var(--alpha-success-18, rgba(22, 131, 74, .18));
}

/* While a partial number is being entered, keep the container quiet. */
.pf-phone.is-filling {
  border-color: var(--color-gray-300);
}

/* ------------------------------------------------------------------ otp -- */

/* One block per digit of the SMS code. Four of them, so unlike the phone field
   they can have real size — this is the number someone reads off a phone at the
   counter, and it should be unmistakable which digit they are on. */
.pf-otp {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf-otp__box {
  flex: 0 1 62px;
  min-width: 0;
  height: 58px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  caret-color: var(--accent);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.pf-otp__box::-webkit-outer-spin-button,
.pf-otp__box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Never paint the browser's blue selection over a digit — with one character
   per block there is nothing useful to select, and it reads as a defect. */
.pf-otp__box::selection {
  background: transparent;
  color: inherit;
}

.pf-otp__box:hover {
  border-color: var(--color-gray-300);
}

.pf-otp__box:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--primary-bright-soft, rgba(255, 138, 0, .16));
}

/* Every digit in. */
.pf-otp.is-complete .pf-otp__box {
  border-color: var(--color-success-check-border);
}

.pf-otp.is-complete .pf-otp__box:focus {
  border-color: var(--state-palette-green);
  box-shadow: 0 0 0 3px var(--alpha-success-18, rgba(22, 131, 74, .18));
}

/* On a phone the blocks share the width evenly rather than holding 62px, so
   four of them plus the gaps cannot overflow a 320px screen. */
@media (max-width: 420px) {
  .pf-otp {
    gap: 8px;
  }

  .pf-otp__box {
    flex: 1 1 0;
    height: 54px;
    font-size: 1.3rem;
  }
}

.pf-hint {
  margin: 7px 0 0;
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--color-gray-600);
}

/* "optional" chip beside a label. Being obviously optional is the point —
   this field is recovery-only and must never read as a required email. */
.pf-optional {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Password field with the show/hide eye tucked inside. */
.pf-pw {
  position: relative;
}

.pf-pw .pf-input {
  padding-right: 44px;
}

.pf-eye {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  font-family: var(--font-body);
  transition: color .2s ease;
}

.pf-eye:hover {
  color: var(--color-text);
}

.pf-eye svg {
  width: 19px;
  height: 19px;
}

.pf-eye .pf-eye-off {
  display: none;
}

.pf-eye.is-shown .pf-eye-on {
  display: none;
}

.pf-eye.is-shown .pf-eye-off {
  display: block;
}

/* -------------------------------------------------------------- submit -- */

/* Brand dark blue at rest, accent orange on hover. */
.pf-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  margin-top: 6px;
  border: 1px solid var(--pf-deep-surface);
  border-radius: 10px;
  background: var(--pf-deep-surface);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  /* Colour only — never transform/scale, never a size change (UI Rules). */
  transition: background-color .2s ease, border-color .2s ease;
}

/* Hover is the app's own green, flat: no ring, and the border only tracks the
   background so the button keeps its shape without drawing an edge. */
.pf-submit:hover,
.pf-submit:focus-visible {
  background: var(--state-palette-green);
  border-color: var(--state-palette-green);
  color: var(--color-white);
  outline: none;
  box-shadow: none;
}

.pf-submit:active {
  background: var(--color-success-dark);
  border-color: var(--color-success-dark);
  color: var(--color-white);
  box-shadow: none;
}

.pf-submit[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* Quiet text link — "Change", "Forgot password?", "Resend code".
   Black at rest so it reads as text, underlined on hover so it reads as a link. */
.pf-textbtn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s ease;
}

.pf-textbtn:hover,
.pf-textbtn:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  outline: none;
}

/* Right-aligned row for a single trailing link, e.g. "Forgot password?". */
.pf-field--end {
  display: flex;
  justify-content: flex-end;
}

.pf-textbtn[disabled] {
  color: var(--color-gray-500);
  cursor: not-allowed;
  text-decoration: none;
}

/* --------------------------------------------------------- messaging  -- */

.pf-error {
  margin: 7px 0 0;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--red, #C9293D);
}

.pf-status {
  margin: 0 0 20px;
  padding: 11px 13px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-gray-060);
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--color-text);
}

/* "OTP Sent" — a one-line confirmation in the app's green, sitting above the
   line that names the number. Replaces the boxed status banner on the verify
   screen, which could only ever repeat what that line already said. */
.pf-sent {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--state-palette-green);
}

.pf-alt {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--color-gray-600);
}

.pf-alt a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.pf-alt a:hover {
  text-decoration: underline;
}

/* The number being signed in, shown above the password step. */
.pf-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-gray-060);
}

.pf-who__num {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ----------------------------------------------------------- right side -- */

.pf-aside {
  background: var(--color-gray-060);
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 560px;
}

/* Image slot. 16:10 — see AGENTS.md > Auth Artwork for the export spec.
   The box holds its ratio whether or not an image is in it, so dropping the
   artwork in later cannot shift the layout. */
.pf-aside__media {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: var(--color-gray-100);
  border: 1px dashed var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 32px;
}

.pf-aside__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Placeholder caption, removed once a real image lands in the slot. */
.pf-aside__slot {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-gray-350);
}

.pf-aside__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 10px;
}

.pf-aside__text {
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
  max-width: 380px;
}

.pf-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
}

.pf-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-gray-300);
}

.pf-dots span.is-active {
  width: 20px;
  background: var(--accent);
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 940px) {
  .pf-auth__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
  }

  /* The marketing panel is decoration; on a phone the form gets the screen. */
  .pf-aside {
    display: none;
  }

  .pf-auth__panel {
    min-height: 0;
    padding: 36px 26px;
  }

  .pf-auth__brand {
    margin-bottom: 32px;
  }

  .pf-auth__title {
    font-size: 1.6rem;
  }
}

@media (max-width: 420px) {
  .pf-auth {
    padding: 16px;
  }

  .pf-auth__panel {
    padding: 28px 20px;
  }
}


/* A 14-inch laptop is around 1260 CSS px wide and only ~640 tall once Windows
   display scaling and the browser chrome come off. At that height the 560px
   panel floor plus 44px of padding stops fitting, so the card grew past the
   viewport and the whole shell read as zoomed-in — while a taller screen showed
   the compact, centred card this is supposed to look like. Scale the vertical
   rhythm to the height actually available so both look the same.

   Keyed on height, not width: the width was never the problem, and a short
   window on a large monitor has exactly the same shortage. Held above 940px so
   it cannot fight the single-column phone layout below. */
@media (min-width: 941px) and (max-height: 860px) {
  .pf-auth {
    padding: 18px;
  }

  .pf-auth__grid {
    max-width: 1040px;
    gap: 22px;
  }

  .pf-auth__panel {
    min-height: 0;
    padding: 30px 34px;
  }

  .pf-auth__brand {
    margin-bottom: 22px;
  }

  .pf-auth__brand img {
    height: 46px;
  }

  .pf-auth__title {
    font-size: 1.6rem;
  }

  .pf-auth__sub {
    margin-bottom: 20px;
  }

  .pf-aside {
    min-height: 0;
    padding: 28px;
  }

  .pf-aside__media {
    max-width: 330px;
    margin-bottom: 22px;
  }

  .pf-aside__title {
    font-size: 1.25rem;
  }

  .pf-aside__text {
    font-size: .86rem;
  }

  .pf-dots {
    margin-top: 18px;
  }
}