/* auth.css — /p auth page (login / signup / X-OAuth setup / credentials modal).
   Design source: Figma 186:5, 187:2, 187:41, 338:14. Uses tokens.css. */

* { box-sizing: border-box; }
/* Background lives on body (paints instantly at first CSS load) instead of
   .auth-page, whose height depends on --navbar-h from the nav bar — that bar
   is mounted asynchronously by nav.js (awaits getProfile()), so before it
   lands .auth-page is shorter than the viewport and left a plain-white gap
   at the bottom until it mounted (2026-07-08 fix). */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--space-gradient), var(--bg-primary);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.auth-page {
  /* Explicit stacking context (2026-07-10, starfield ask) — required to
     paint above the fixed z-index:0 starfield layers (tokens.css); plain
     static-position content paints BEHIND a positioned z-index:0 sibling
     per CSS stacking rules. */
  position: relative;
  z-index: 1;
  /* The global nav (position:sticky, --navbar-h tall) sits above this as a
     sibling in normal flow, so 100vh here would push total page height past
     the viewport and force an unwanted scrollbar even when content is short. */
  min-height: calc(100vh - var(--navbar-h));
  min-height: calc(100dvh - var(--navbar-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 16px 20px;
  color: var(--text-primary);
  font-family: var(--font-thai);
}

.auth-card {
  width: 100%;
  max-width: 390px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  animation: auth-card-in 0.35s ease both;
  /* margin: auto 0 (2026-07-10) — centers the card vertically within the
     space above the footer (auto margins consume free space before
     justify-content applies), instead of sitting flush at the top. The
     footer itself keeps the normal gap:20px above it, no longer margin-top:
     auto — that pinned it to the very bottom, but decoupled it from the
     card in a way that broke the centered-as-a-group look this page wants. */
  margin: auto 0;
}
/* translateZ(0) appended to both keyframe steps (2026-07-27, not a separate
   `transform` rule on `.auth-modal__card` — this `animation`'s own keyframe
   values govern `transform` for the animation's duration and, with `both`
   fill, forever after, so a static rule would be silently overridden) — same
   iOS backdrop-filter compositing fix as .emoji-icon (p/tokens.css): this
   card is a DOM child of `.auth-modal`, which has `backdrop-filter`, and
   carries several raw inline-SVG icons (ICON_X_SVG close button, etc.) not
   covered by that rule. */
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(10px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0) translateZ(0); }
}

.auth-head { display: flex; flex-direction: column; gap: 2px; }
.auth-head--center { align-items: center; text-align: center; }
.auth-title { font-size: 18px; font-weight: 700; }
.auth-title--lg { font-size: 22px; }
.auth-sub   { font-size: 11px; color: var(--text-secondary); }
.auth-sub--md { font-size: 13px; }

/* Numbered-timeline step list — openInfoModal() (modals.js), one-time
   feature intros. A connecting line down the badge column + a title/desc
   split per row (instead of one flat icon+sentence line) gives the list
   some visual rhythm and a scannable hierarchy. */
.auth-info-list { display: flex; flex-direction: column; margin: 8px 0 22px; }
.auth-info-list__item { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; position: relative; }
.auth-info-list__item:not(:last-child)::before {
  content: ''; position: absolute; left: 16px; top: 40px; bottom: -4px; width: 1px;
  background: linear-gradient(rgba(244, 161, 64, 0.35), rgba(19, 205, 203, 0.15));
}
.auth-info-list__badge {
  flex: none; width: 33px; height: 33px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 161, 64, 0.1);
  border: 1px solid rgba(244, 161, 64, 0.3);
  font-size: 15px; position: relative; z-index: 1;
}
.auth-info-list__item.is-highlight .auth-info-list__badge {
  background: rgba(244, 161, 64, 0.22); border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(244, 161, 64, 0.12);
}
.auth-info-list__body { flex: 1; padding-top: 3px; }
.auth-info-list__title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.auth-info-list__item.is-highlight .auth-info-list__title { color: var(--accent-gold); }
.auth-info-list__desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* Fields */
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label { font-size: 12px; font-weight: 600; }
.auth-input {
  height: 44px;
  padding: 0 12px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-primary);
  font: 400 13px var(--font-thai);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-input::placeholder { color: var(--text-secondary); }
.auth-input:focus { border-color: rgba(244, 161, 64, 0.6); box-shadow: 0 0 0 3px rgba(244, 161, 64, 0.12); }
.auth-hint { font-size: 10px; color: var(--text-secondary); }
.auth-input--locked {
  display: flex; align-items: center; justify-content: space-between;
  border-color: rgba(255, 255, 255, 0.05);
  font-weight: 600;
}
.auth-label__req { color: var(--like-red); }
.auth-input.is-invalid { border-color: var(--like-red); }
.auth-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(232, 67, 90, 0.15); }
.auth-field-error { font-size: 10px; color: var(--like-red); font-weight: 600; }

/* Country picker (User Country Selection System, 2026-07-09) */
.cty-picker { position: relative; }
.cty-picker.is-invalid .auth-input { border-color: var(--like-red); }
.cty-picker__input { width: 100%; cursor: text; }
.cty-picker.has-flag .cty-picker__input { padding-left: 36px; }
.cty-picker__flag {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  line-height: 0; pointer-events: none;
}
.cty-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 220px; overflow-y: auto; z-index: 20;
  background: #0c0c22; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px; padding: 4px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.cty-option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 8px 10px;
  background: none; border: none; border-radius: 6px;
  color: var(--text-primary); font: 400 13px var(--font-thai);
  cursor: pointer;
}
.cty-option:hover, .cty-option.is-selected { background: rgba(255, 255, 255, 0.06); }
.cty-list__empty { padding: 8px 10px; color: var(--text-secondary); font-size: 12px; }

.auth-field-row { display: flex; gap: 10px; }
.auth-field-row .auth-btn { width: auto; flex: 1; }

/* Step indicator (2-step signup) */
.auth-steps { display: flex; gap: 6px; }
.auth-steps__seg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.auth-steps__seg.is-active, .auth-steps__seg.is-done { background: var(--accent-gold); }
.auth-steps__label { font-size: 11px; color: var(--text-secondary); font-weight: 600; }

/* Buttons */
.auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 12px;
  font: 600 14px var(--font-thai);
  cursor: pointer;
  width: 100%;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.auth-btn--primary { background: var(--accent-gold); color: #12121A; padding: 15px; }
.auth-btn--primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 16px rgba(244, 161, 64, 0.25); }
/* X's own brand buttons are black/white, not gold — using gold here made it
   read as the same action as the (also gold) primary Sign-up/Next button. */
.auth-btn--x {
  background: #000; color: #fff; padding: 18px; font-size: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.auth-btn--x:hover:not(:disabled) { filter: brightness(1.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.auth-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  padding: 13px; font-size: 13px;
}
.auth-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); }
.auth-btn--outline {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
  padding: 13px; font-size: 13px;
}
.auth-btn--outline:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.auth-btn__x { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 20px; }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  color: var(--text-secondary);
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 0; border-top: 1px solid var(--border); }
.auth-note-recommend { font-size: 11px; color: var(--text-secondary); text-align: center; }

.auth-amber {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(254, 172, 104, 0.1);
  color: #FEAC68;
  font-size: 10px; font-weight: 600;
}

.auth-foot { font-size: 11px; color: var(--text-secondary); text-align: center; }
.auth-link { color: var(--accent-gold); cursor: pointer; text-decoration: none; }

/* Emoji + color pickers */
.auth-identity-picker { display: flex; flex-direction: column; gap: 20px; }
.auth-picker { display: flex; flex-direction: column; gap: 8px; }
/* Grid (not flex-wrap) so every row's columns line up evenly across the full
   width instead of ragged-left — each circle grows/shrinks with its column
   via width:100%+aspect-ratio (2026-07-09 realignment). */
.auth-grid { display: grid; gap: 8px; }
.auth-grid--emoji { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.auth-grid--color { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); }

.auth-emoji {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  border: 2px solid transparent;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.auth-emoji:hover { transform: translateY(-1px); }
.auth-emoji.is-selected { border-color: var(--accent-teal); background: rgba(19, 205, 203, 0.14); }

.auth-swatch {
  width: 100%; aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.auth-swatch:hover { transform: translateY(-1px); }
.auth-swatch.is-selected { border-color: #FFFFFF; }

.auth-toggle {
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: 600 11px var(--font-thai);
  cursor: pointer;
  transition: background 0.12s ease;
}
.auth-toggle:hover { background: rgba(255, 255, 255, 0.06); }

.auth-error {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(232, 67, 90, 0.12);
  font-size: 12px; font-weight: 600;
  color: var(--like-red);
}
.auth-error::before { content: '⚠️'; font-size: 11px; }
/* Duplicate-seat error (2026-07-08): 2 lines instead of 1 — main message at
   the box's normal 12px, then a smaller dispute-instructions line below. */
.auth-error--seat { align-items: flex-start; }
.auth-error__sub { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; opacity: 0.85; }
/* A class-based `display` always beats the UA [hidden] rule's specificity —
   without this, .auth-error stayed visible (as an empty red bar + icon)
   even while hidden=true, e.g. above the signup button before any error. */
.auth-error[hidden] { display: none; }

/* Credentials modal — appended directly to <body> (outside .auth-page), so
   it doesn't inherit .auth-page's `color: var(--text-primary)`; without an
   explicit color here, text falls back to the browser default black. */
.auth-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
  background: rgba(3, 3, 10, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--text-primary);
  font-family: var(--font-thai);
  /* Above .ppw-nav (nav.css, z-index:1000) — every popup built on this shell
     (modals.js's Edit Profile/Ticket/Verify/Add/Sale/Password/X-conflict,
     market.js's report modal) must sit above the sticky navbar, not under it. */
  z-index: 1100;
  animation: auth-modal-in 0.15s ease both;
}
@keyframes auth-modal-in { from { opacity: 0; } to { opacity: 1; } }
.auth-modal[hidden] { display: none; }
.auth-modal__card {
  position: relative;
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 20px 20px;
  background: #0E0F1F;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  /* Layered shadow stack (2026-07-27, Feel Lab ref) — tight/dark + medium +
     wide/faint, instead of one flat shadow; used by every modals.js popup
     + market.js's report modal via this shared class. */
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.32),
    0 28px 60px rgba(0, 0, 0, 0.3);
  animation: auth-card-in 0.45s var(--ease-spring) both;
  /* Overflow scrolls inside the card instead of the card just overflowing
     .auth-modal uncontrolled (2026-07-08 fix) — the shared neutral scrollbar
     (tokens.css) applies automatically, no extra styling needed here. */
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
}
.auth-modal__icon {
  width: 44px; height: 44px; margin: 0 auto 2px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(244, 161, 64, 0.14);
  border: 2px solid var(--accent-gold);
  font-size: 18px;
}
.auth-modal__head { display: flex; align-items: flex-start; gap: 8px; }
.auth-modal__head-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.auth-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none; border-radius: 8px;
  color: var(--text-secondary); font-size: 13px; cursor: pointer;
  transition: background 0.12s ease;
}
.auth-modal__close:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Standard "no ticket on file" nudge (modals.js showNoTicketModal(),
   2026-08-05 — promoted from a homesafe.js one-off into the shared /p
   component every ticket-gated feature should reuse). Custom layout, not
   the generic .auth-modal__actions confirm/cancel row: centered icon badge,
   full-width gradient primary button, de-emphasized text-link skip below
   it. Originally built to match HOMESAFE_FIGMA_NODE_MAP.md's
   Modal=NoTicketNudge mockup. */
.noticket-modal .auth-modal__card { align-items: center; text-align: center; }
.noticket-modal__icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 161, 64, 0.14);
  box-shadow: 0 0 28px rgba(244, 161, 64, 0.22);
  font-size: 28px;
  margin: 4px 0 2px;
}
.noticket-modal__title { font-size: 17px; }
.noticket-modal__sub { font-size: 13px; line-height: 1.6; }
.noticket-modal__btn-primary {
  background: linear-gradient(135deg, #ffb852, #ed8420);
  width: 100%; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px;
}
.noticket-modal__btn-arrow { display: inline-flex; font-size: 15px; }
.noticket-modal__skip {
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font: 500 12px var(--font-thai);
  padding: 4px; margin-top: 2px;
}
.noticket-modal__skip:hover { color: var(--text-primary); }
.auth-input-wrap.is-invalid { border-color: var(--like-red); }
.auth-input-row { display: flex; align-items: center; gap: 8px; }
.auth-input-row .auth-input { flex: 1; border: none; background: transparent; height: auto; padding: 0; }
.auth-input-wrap {
  display: flex; align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-input-wrap:focus-within { border-color: rgba(244, 161, 64, 0.6); box-shadow: 0 0 0 3px rgba(244, 161, 64, 0.12); }
/* The inner .auth-input already has its own border/background — without this
   override it nests a second frame inside .auth-input-wrap's frame. The focus
   glow above lives on the wrap instead, so suppress the inner input's own. */
.auth-input-wrap .auth-input { flex: 1; border: none; background: transparent; height: auto; padding: 0; }
.auth-input-wrap .auth-input:focus { box-shadow: none; }
.auth-eye {
  background: none; border: none; cursor: pointer; font-size: 13px;
  transition: transform 0.12s ease;
}
.auth-eye:hover { transform: scale(1.1); }