/* Shared authentication presentation. Fonts, themes and brand colours
   come from portexa/tokens.css and the staff design preset. */

html[data-ui="auth"] body.portexa-auth {
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  background: var(--public-bg); color: var(--public-text-primary);
}
/* Touch screens: iOS Safari zooms the page into any field with text under
   16px as soon as it is tapped (the username box did exactly that). 16px on
   touch devices stops it without disabling pinch zoom; desktop unchanged. */
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),
  select,
  textarea { font-size: 16px !important; }
}

@keyframes rise    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift   { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,-26px) scale(1.12); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 55%,100% { background-position: -50% 0; } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fade-in { to { opacity: 1; } }
.rise { animation: rise .5s ease-out both; }
/* `backwards`, not `both`: a finished animation that kept its transform
   would override the hover and tilt transforms applied afterwards. */
.stagger { animation: rise .6s ease-out backwards; animation-delay: var(--d, 0s); }

/* ── Brand panel (wide screens) ───────────────────────────────────── */
.brand-panel { background: #0b1020; position: relative; overflow: hidden; isolation: isolate; }
.brand-panel::before,
.brand-panel::after {
  content: ''; position: absolute; border-radius: 9999px; filter: blur(90px);
  opacity: .55; animation: drift 22s ease-in-out infinite; z-index: -1;
}
.brand-panel::before { width: 460px; height: 460px; background: var(--color-brand-fill); top: -120px; left: -110px; }
.brand-panel::after  { width: 420px; height: 420px; background: var(--color-brand-fill); bottom: -140px; right: -90px; animation-delay: -11s; }
.brand-orb {
  position: absolute; width: 340px; height: 340px; top: 38%; left: 42%; z-index: -1;
  border-radius: 9999px; background: var(--color-brand-fill); filter: blur(110px); opacity: .12;
  animation: drift 26s ease-in-out infinite reverse;
}
/* Faint market grid, slowly panning. */
.brand-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 78%);
  animation: grid-pan 30s linear infinite;
}
@keyframes grid-pan { to { background-position: 46px 46px, 46px 46px; } }
/* Soft light that follows the pointer (set from script). */
.brand-spotlight {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--spot-x, 72%) var(--spot-y, 18%), rgba(56,189,248,.16), transparent 60%);
}

/* The Portexa logo from the brand kit (website/branding.py): the mark,
   the wordmark for dark surfaces and the brand line. */
.brand-mark { display: block; height: 2.75rem; width: auto; transition: transform .3s ease, filter .3s ease; }
.group:hover .brand-mark { transform: rotate(-6deg) scale(1.04); filter: drop-shadow(0 0 14px rgba(244,180,0,.35)); }
.brand-word { display: block; height: 1.7rem; width: auto; }
.brand-tag { margin-top: .4rem; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(203,213,225,.85); white-space: nowrap; }
.brand-eyebrow-line { display: inline-block; width: 1.5rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #38bdf8, #a78bfa); }

/* Headline: white, with a light that sweeps through the letters. */
.brand-heading, .mobile-hero__title {
  background-image: linear-gradient(100deg, #fff 0%, #fff 38%, #7dd3fc 48%, #c4b5fd 56%, #fff 66%, #fff 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise .6s .15s ease-out both, shimmer 7s 1.4s ease-in-out infinite;
}

/* Illustrative market chart: draws itself, then keeps a slow pulse. */
.brand-chart {
  position: relative; margin-top: 1.5rem; padding: .85rem 1.05rem .75rem; border-radius: 1rem; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 60px -30px rgba(2,6,23,.9), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .25s ease-out; will-change: transform;
}
.brand-chart__head { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(186 230 253 / .85); }
.brand-chart__live { display: inline-flex; align-items: center; gap: .45rem; }
.brand-chart__dot { width: .45rem; height: .45rem; border-radius: 9999px; background: #34d399; animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 80%,100% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } }
.brand-chart__tabs { display: inline-flex; gap: .25rem; }
.brand-chart__tabs span { padding: .1rem .45rem; border-radius: .4rem; color: rgb(148 163 184); letter-spacing: .08em; }
.brand-chart__tabs span:first-child { color: #fff; background: rgba(129,140,248,.25); }
.brand-chart svg { display: block; width: 100%; height: auto; margin-top: .55rem; overflow: visible; }
.bc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s .7s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.bc-area { opacity: 0; animation: fade-in 1.2s 2.1s ease-out forwards; }
.bc-end  { opacity: 0; transform-box: fill-box; transform-origin: center; animation: fade-in .4s 3s forwards, beat 2s 3.4s ease-in-out infinite; }
@keyframes beat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.6); } }
.bc-scan { position: absolute; top: 1.9rem; bottom: 2.7rem; width: 38%; left: -40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(125,211,252,.13), transparent); animation: scan 6s 3.2s ease-in-out infinite; }
@keyframes scan { 0% { left: -40%; } 60%,100% { left: 110%; } }
.brand-chart__bars { display: flex; align-items: flex-end; gap: 3px; height: 1.9rem; margin-top: .5rem; }
.brand-chart__bars span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(to top, rgba(99,102,241,.35), rgba(56,189,248,.8)); transform-origin: bottom; animation: eq 1.8s ease-in-out infinite; }
@keyframes eq { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (max-height: 820px) { .brand-chart { display: none; } }

/* Feature points as cards that take turns in the light. */
.brand-points li {
  position: relative; align-items: center !important; padding: .7rem .9rem; border-radius: .9rem;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
  animation: rise .55s ease-out backwards;
}
.brand-points li:nth-child(1) { animation-delay: .5s; }
.brand-points li:nth-child(2) { animation-delay: .65s; }
.brand-points li:nth-child(3) { animation-delay: .8s; }
.brand-points li > i {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: 0 !important;
  border-radius: .65rem; background: rgba(56,189,248,.12); font-size: 12px !important;
  transition: transform .3s ease, background-color .3s ease;
}
.brand-points li::before {
  content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  background: linear-gradient(#38bdf8, #a78bfa); opacity: 0; transition: opacity .3s ease;
}
.brand-points li:hover, .brand-points li.is-active {
  transform: translateX(6px); background: rgba(255,255,255,.08);
  border-color: rgba(129,140,248,.45); box-shadow: 0 14px 34px -22px rgba(99,102,241,.95);
}
.brand-points li:hover > i, .brand-points li.is-active > i { transform: scale(1.08) rotate(-6deg); background: rgba(129,140,248,.25); }
.brand-points li:hover::before, .brand-points li.is-active::before { opacity: 1; }

/* ── Form side ────────────────────────────────────────────────────── */
.auth-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-backdrop span { position: absolute; border-radius: 9999px; filter: blur(80px); animation: drift 24s ease-in-out infinite; }
.auth-backdrop .b1 { width: 380px; height: 380px; top: -120px; right: -90px; background: var(--color-brand-soft); }
.auth-backdrop .b2 { width: 340px; height: 340px; bottom: -130px; left: -110px; background: var(--color-brand-soft); animation-delay: -12s; }
.auth-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(100,116,139,.2) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 70%);
}
.dark .auth-backdrop::after { background-image: radial-gradient(rgba(148,163,184,.12) 1px, transparent 1px); }

/* The same quiet surface, radius and focus treatment as the public site. */
.auth-card {
  position: relative; border-radius: var(--radius-xl); border: 1px solid var(--public-border);
  background: var(--public-surface);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.dark .auth-card { box-shadow: 0 10px 30px rgba(0,0,0,.35); }

.auth-greeting {
  display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .7rem; border-radius: 9999px;
  font-size: 11.5px; font-weight: 700; color: var(--color-brand-primary);
  background: var(--color-brand-soft); border: 1px solid var(--public-border);
}
.auth-greeting i { color: rgb(245 158 11); }
.auth-divider-label { padding: 0 .75rem; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--public-text-muted); background: var(--public-surface); }

.google-btn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: .625rem; padding: .7rem 1rem;
  min-height: 44px; border-radius: var(--radius-md); border: 1px solid var(--public-control-border); background: var(--public-surface);
  font-size: 13px; font-weight: 600; color: var(--public-text-primary);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.google-btn:hover { border-color: var(--public-control-border-hover); background: var(--public-surface-soft); }

.field {
  width: 100%; min-height: 44px; border-radius: var(--radius-md); border: 1px solid var(--public-control-border);
  background: var(--public-surface); padding: .7rem .9rem .7rem 2.5rem;
  font-size: .875rem; color: var(--public-text-primary); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field::placeholder { color: var(--public-text-muted); }
.field:hover { border-color: var(--public-control-border-hover); }
.field:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-accent-ring); }
.field-icon {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: rgb(148 163 184); font-size: .8rem; pointer-events: none; transition: color .15s;
}
.field-wrap { position: relative; }
.field-wrap:focus-within .field-icon { color: var(--color-brand-primary); }

.caps-hint { margin-top: .35rem; display: flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 600; color: rgb(180 83 9); }
.caps-hint[hidden] { display: none; }
.dark .caps-hint { color: rgb(252 211 77); }

/* Remember-me switch over a real checkbox. */
.switch { position: relative; flex: none; width: 2.15rem; height: 1.2rem; border-radius: 9999px; background: rgb(203 213 225); transition: background-color .2s ease; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.2rem - 4px); height: calc(1.2rem - 4px); border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3); transition: transform .2s ease; }
.dark .switch { background: rgb(71 85 105); }
.switch-input:checked + .switch { background: var(--color-brand-fill); }
.switch-input:checked + .switch::after { transform: translateX(.95rem); }
.switch-input:focus-visible + .switch { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.portexa-auth .btn-primary {
  min-height: 44px; border-radius: var(--radius-md);
  background: var(--color-brand-button); color: var(--color-on-brand);
  box-shadow: var(--shadow-sm);
  transition: background-color .15s, transform .15s;
}
.portexa-auth .btn-primary:hover { background: var(--color-brand-primary-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-shine { overflow: hidden; }
.btn-shine::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%); transform: translateX(-120%); transition: transform .8s ease; }
.btn-shine:hover::after { transform: translateX(120%); }
.btn-label, .btn-arrow { transition: opacity .15s ease, transform .2s ease; }
.btn-shine:hover .btn-arrow { transform: translateX(3px); }
.btn-spinner { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; border-radius: 9999px; border: 2px solid currentColor; border-right-color: transparent; opacity: 0; animation: spin .7s linear infinite; }
.is-loading { cursor: progress; }
.is-loading .btn-label, .is-loading .btn-arrow { opacity: 0; }
.is-loading .btn-spinner { opacity: 1; }

.auth-trust { margin-top: 1.1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .9rem; font-size: 11.5px; color: var(--public-text-muted); }
.auth-trust li { display: inline-flex; align-items: center; gap: .35rem; }
.auth-trust i { color: var(--color-brand-primary); font-size: 10.5px; }
.portexa-auth .auth-card a:not(.google-btn):not(.btn-primary) { color: var(--color-brand-primary); }

/* ── Phone header (the brand panel is hidden below lg) ────────────── */
.mobile-hero {
  position: relative; overflow: hidden; isolation: isolate; margin-bottom: 1rem; padding: 1.05rem 1.1rem 1rem;
  border-radius: var(--radius-xl); color: #fff;
  background: linear-gradient(135deg, #0b1020, color-mix(in srgb, var(--color-brand-fill) 35%, #0b1020));
  box-shadow: 0 18px 40px -24px rgba(30,27,75,.8);
}
.dark .mobile-hero { box-shadow: 0 0 0 1px rgb(30 41 59), 0 18px 40px -24px rgba(0,0,0,.8); }
.mobile-hero__glow {
  position: absolute; inset: -45%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 30% 35%, rgba(99,102,241,.5), transparent),
              radial-gradient(closest-side at 75% 70%, rgba(14,165,233,.38), transparent);
  animation: drift 16s ease-in-out infinite;
}
.mobile-hero__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgb(125 211 252); }
.mobile-hero__title { margin-top: .3rem; font-size: 1.3rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.mobile-hero__copy { margin-top: .35rem; font-size: 12.5px; line-height: 1.5; color: rgb(203 213 225); }
.mobile-hero__chips { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.mobile-hero__chips li {
  display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: 9999px;
  font-size: 11px; font-weight: 600; color: rgb(226 232 240);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  animation: rise .45s ease-out backwards;
}
.mobile-hero__chips li:nth-child(1) { animation-delay: .25s; }
.mobile-hero__chips li:nth-child(2) { animation-delay: .35s; }
.mobile-hero__chips li:nth-child(3) { animation-delay: .45s; }
.mobile-hero__chips i { color: rgb(125 211 252); font-size: 10px; }
/* Short phones: keep the headline, drop the extras, so the form's
   button stays above the fold — signing in is the page's job. */
@media (max-height: 740px) {
  .mobile-hero { padding: .8rem 1rem; margin-bottom: .75rem; }
  .mobile-hero__copy, .mobile-hero__chips { display: none; }
  .mobile-hero__title { font-size: 1.1rem; }
}

#theme-toggle.is-spinning i { animation: spin .5s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important; transition-duration: .001ms !important;
  }
}

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }