/* ==========================================================================
   SIGN IN  ·  ACTIVATE  ·  CARD NOT FOUND
   --------------------------------------------------------------------------
   The three screens a customer meets before they reach their profile, in the
   same visual language as the card itself: near-black surfaces, one teal
   accent, and nothing else competing.

   Everything is driven from the tokens in evoq.css so a colour changes in one
   place. Class names are unchanged — the markup and the JavaScript are
   untouched, only the paint.

   These pages are opened by tapping a card, so they are phone-first in the
   literal sense: this is the layout, and the desktop rules are the ones that
   adapt.
   ========================================================================== */


body {
    /* The card photograph as a backdrop, dimmed almost to black so the panel
       reads as the only lit thing on the screen. No `background-attachment:
       fixed` — it repaints the whole backdrop on every scroll frame, which is
       the fastest way to make a phone stutter. */
    background-color: var(--base);
    background-image: var(--page-backdrop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    /* flex-start, not center: centring content taller than the viewport
       pushes its top past the scroll origin where nothing can reach it. The
       container's `margin: auto` centres it when there is actually room. */
    align-items: center;
    justify-content: flex-start;
    min-height: 100dvh;
    padding: 24px 20px;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* ==========================================================================
   BRAND
   ========================================================================== */

.header {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 26px;
}

.header img, .header .evoq-wordmark {
    /* Mark-only asset, so this is the drawn height. */
    height: 26px;
    width: auto;
    opacity: .95;
}

/* ==========================================================================
   PANEL
   ========================================================================== */

.container {
    width: 100%;
    max-width: 25rem;
    margin: auto;
}

.form-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-3);
    padding: 30px 26px 28px;
}

/* ==========================================================================
   TYPE
   ========================================================================== */

.playfair-display-h2,
.form-box h2 {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.15;
    text-align: center;
    color: var(--ink);
    margin-bottom: 10px;
    text-wrap: balance;
}

.oswald-h2 {
    font-family: var(--font);
    font-weight: 600;
    color: var(--ink);
}

/* ==========================================================================
   FIELDS
   ========================================================================== */

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.input-icon {
    position: absolute;
    /* Logical, not `left`: the same rule keeps working if these screens are
       ever mirrored for Arabic. */
    inset-inline-start: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-mute);
    pointer-events: none;
    transition: color .18s var(--ease-both);
}

.input-group input,
.input-animate {
    width: 100%;
    /* 16px exactly. Below that iOS zooms the viewport on focus, which on a
       sign-in form looks like the page broke. */
    font-size: 16px;
    font-family: var(--font);
    padding: 14px 16px 14px 44px;
    color: var(--ink);
    background: var(--void);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-field);
    transition: border-color .18s var(--ease-both), box-shadow .18s var(--ease-both);
}

.input-group input::placeholder { color: var(--ink-mute); }

.input-group input:focus,
.input-animate:focus {
    outline: none;
    border-color: var(--tap);
    box-shadow: 0 0 0 3px rgba(2, 145, 162, .22);
}

.input-group:focus-within .input-icon { color: var(--tap-400); }

/* The 6-digit code has no icon, and reads far better spaced out. */
#code {
    padding-left: 16px;
    text-align: center;
    letter-spacing: .42em;
    text-indent: .42em;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-animate,
.form-box button[type="button"],
.playfair-display-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 48px is the smallest target most people hit reliably with a thumb while
       walking, which is how a lot of these pages get used. */
    min-height: 48px;
    margin-top: 6px;
    padding: 14px 20px;
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--on-accent);
    background: var(--tap);
    border: 1px solid transparent;
    border-radius: var(--r-field);
    cursor: pointer;
    transition: transform .16s var(--ease-out), background-color .16s var(--ease-both);
}

.btn-animate:hover,
.playfair-display-button:hover { background: var(--tap-400); }

/* Transform only, never width or margin, so the press stays on the
   compositor and cannot trigger layout on a mid-range phone. */
.btn-animate:active { transform: scale(.985); }

.btn-animate[disabled],
button[disabled] { opacity: .55; pointer-events: none; }

/* ==========================================================================
   MESSAGES
   ========================================================================== */

.error,
.auth-error {
    color: var(--bad);
    font-size: var(--t-small);
    text-align: center;
    /* Reserves its height whether or not it holds text, so the button below
       never jumps the instant an error appears — which is exactly when a
       thumb is already moving toward it. */
    min-height: 1.25rem;
    margin-top: 12px;
    line-height: 1.5;
}

.success { color: var(--good); }

/* ==========================================================================
   SECONDARY LINKS
   ========================================================================== */

.forgot-password,
.back,
.auth-alt {
    margin-top: 18px;
    font-size: var(--t-small);
    text-align: center;
    color: var(--ink-soft);
}

.forgot-password a,
.back a,
.auth-alt a {
    color: var(--tap-200);
    text-decoration: none;
    /* A generous invisible target: these sit close together and are used
       one-handed. */
    padding: 6px 2px;
    display: inline-block;
}

.forgot-password a:hover,
.back a:hover,
.auth-alt a:hover { color: var(--tap-50); text-decoration: underline; }

.auth-sep { margin: 0 8px; opacity: .4; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.powered-by,
.dymasoft {
    margin-top: 22px;
    font-size: var(--t-micro);
    text-align: center;
    color: var(--ink-mute);
}

.dymasoft { color: var(--ink-mute); text-decoration: none; }

/* ==========================================================================
   ENTRANCE
   One short fade-up on the panel. The old file animated the logo, the title,
   every input and the button on separate delays, which meant a customer who
   already knew their email waited on choreography before they could type.
   ========================================================================== */

@keyframes evoq-panel-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
}

.header, .container {
    animation: evoq-panel-in .5s var(--ease-out) both;
}

.container { animation-delay: .06s; }

@media (prefers-reduced-motion: reduce) {
    .header, .container { animation: none; }
}

/* ==========================================================================
   WIDER
   ========================================================================== */

@media (min-width: 480px) {
    .form-box { padding: 34px 30px 30px; }
    .playfair-display-h2, .form-box h2 { font-size: 1.75rem; }
}