/* =====================================================================
   Hoptimist Taiwan — login.html + account.html additions (Phase 3, real member API)
   Owner: Page team — auth. Loaded after commerce.css; builds on style.css tokens only.
   ===================================================================== */

/* ---------- shared ---------- */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.auth-spinner { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-line); border-top-color: var(--c-ink); animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .auth-spinner { animation-duration: 2.4s; } }
.acc-loading, .auth-flow__busy { display: flex; align-items: center; gap: 10px; padding: var(--s-4) 0; font-size: 14px; color: var(--c-muted); }
.auth-alert:empty, .auth-form-alert:empty { display: none; }
.auth-form-alert .notice, .auth-alert .notice { width: 100%; }
.auth-notice__body, .acc-verify__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.auth-notice__body p, .acc-verify__body p { text-wrap: pretty; overflow-wrap: anywhere; }
.auth-notice__body .btn-row { margin-top: 4px; }
.auth-notice .icon, .acc-verify > .icon { flex-shrink: 0; }

/* ---------- login ---------- */
.auth-keep { margin-top: calc(var(--s-2) * -1); }
.auth-flow { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.auth-flow__head { display: flex; flex-direction: column; gap: 2px; }
.auth-flow__en { font-family: var(--font-display); font-weight: 200; font-size: 32px; line-height: 1; letter-spacing: .02em; color: var(--c-muted); }
.auth-flow__title { font-size: 20px; font-weight: 500; color: var(--c-ink); letter-spacing: .04em; }
.auth-flow__title:focus { outline: none; }
.auth-flow__title:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; }
.auth-flow > p { font-size: 15px; line-height: 1.8; text-wrap: pretty; }
.auth-flow .form { gap: var(--s-4); }
.auth-choice { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--c-line-soft); border-radius: var(--radius-card); background: #fff; }
.auth-choice__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--c-ink); }
.auth-choice__title .icon { width: 18px; height: 18px; flex-shrink: 0; }
.auth-choice .form { display: flex; flex-direction: column; gap: var(--s-3); }
.auth-choice__forgot { align-self: center; min-height: 44px; font-size: 13px; }
.auth-logged__text { min-width: 0; }
.auth-logged__text p { overflow-wrap: anywhere; }

/* ---------- account ---------- */
.acc-verify { width: 100%; }
.acc-verify__mail { font-weight: 500; color: var(--c-ink); overflow-wrap: anywhere; }
.acc-verify .btn-row { margin-top: 4px; }
.acc-badge-ok { background: #E9F5EE; color: #1F6B3A; }
.acc-badge-ok .icon { width: 12px; height: 12px; }
.switch.is-disabled { cursor: not-allowed; }
.switch.is-disabled input { cursor: not-allowed; }
.switch.is-disabled .switch__track { opacity: .45; }
.switch input:disabled + .switch__track { opacity: .45; }

/* orders */
.order-card__pay { font-size: 12px; color: var(--c-muted); line-height: 1.5; }
.order-card__loading { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-muted); }
.order-card__info .copy-btn { margin-left: 6px; }
.acc-dd-note { display: block; margin-top: 2px; font-size: 12px; color: var(--c-muted); line-height: 1.6; }
.acc-more { margin-top: var(--s-4); }
.acc-skel { height: 88px; border-radius: var(--radius-card); }

/* addresses */
.addr-card__no { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--c-muted); white-space: nowrap; }
.addr-form__cvs { display: flex; flex-direction: column; gap: var(--s-4); }
.addr-form__note { font-size: 13px; line-height: 1.7; }
.addr-form__note .icon { width: 18px; height: 18px; flex-shrink: 0; }
.addr-form .form-grid + .check { margin-top: var(--s-2); }
.addr-card__actions .btn[disabled], .acc-panel__head .btn[disabled] { opacity: .5; }

/* settings */
.acc-email { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 48px; padding: 0 2px; font-size: 15px; color: var(--c-ink); }
.acc-email__addr { overflow-wrap: anywhere; min-width: 0; }
.acc-methods { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.acc-method { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line-soft); }
.acc-method:last-child { border-bottom: 0; }
.acc-method__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-stage-2); color: var(--c-ink); }
.acc-method__icon .icon { width: 20px; height: 20px; }
.acc-method__icon--line { background: var(--c-line-green); color: #fff; }
.acc-method__name { font-size: 15px; font-weight: 500; color: var(--c-ink); }
.acc-method__body p { overflow-wrap: anywhere; }
.acc-sessions .btn-row { flex-wrap: wrap; }
.acc-line-alert { margin-bottom: var(--s-5); }