/* styles/login.css — the login screen.
 *
 * Rebuilt 04.09.2026 around the two steps the flow actually has (identify, then verify)
 * rather than one form with parts hidden by inline `display`.
 *
 * Rules this file lives under (UI_SPEC.md):
 *   · every colour comes from tokens.css — no #hex, no rgb(), and no [data-theme] block here,
 *     because a component built on tokens is already correct in dark mode;
 *   · logical properties only, since the page is RTL;
 *   · load order is tokens → base → … → page, so this file is last and may assume the rest.
 *
 * Mobile is the default here, not an afterthought at the bottom: a technician locked out on
 * a phone is the likeliest person to meet this screen. Controls are 48px tall, inputs are
 * 16px so iOS does not zoom on focus, and the card fills the viewport below 480px.
 */

/* ── page ──────────────────────────────────────────────────────────────────── */

/* `hidden` has to outrank the layout rules in this file, and by default it does not.
 *
 * The attribute only carries the UA rule `[hidden] { display: none }`, which any class
 * setting `display` beats on specificity — and nearly everything here sets one. Without this
 * line both steps and both submit buttons render at once: the first screenshot of the rebuild
 * showed the code field sitting under the password field, which is the very confusion the two
 * steps exist to remove. The JS toggles `el.hidden`, so this is what makes that work. */
[hidden] { display: none !important; }

html, body { block-size: 100%; }

.lg-body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* A single quiet wash behind the card. One gradient, tinted from the install's own accent,
   so a white-labelled deployment picks it up without a second setting to configure. */
.lg-shell {
    min-block-size: 100%;
    display: grid;
    place-items: center;
    padding: var(--sp-6) var(--sp-4);
    padding-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, transparent 62%),
        var(--bg);
}

/* ── card ──────────────────────────────────────────────────────────────────── */

.lg-card {
    inline-size: 100%;
    max-inline-size: 27rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* ── brand ─────────────────────────────────────────────────────────────────── */

.lg-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    justify-content: center;
}

.lg-brand__mark {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
}

.lg-brand__mark img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: 4px;
}

.lg-brand__name {
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--text-2);
    letter-spacing: -0.01em;
}

/* ── heading ───────────────────────────────────────────────────────────────── */

.lg-head { text-align: center; display: flex; flex-direction: column; gap: var(--sp-2); }

.lg-title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: -0.02em;
    color: var(--text);
    text-wrap: balance;
}

.lg-sub {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--text-3);
    text-wrap: pretty;
}

/* The masked address is data, not prose — it earns weight so the eye lands on it. */
.lg-sub__to {
    font-weight: var(--fw-semi);
    color: var(--text-2);
    unicode-bidi: isolate;
}

/* ── alerts ────────────────────────────────────────────────────────────────── */

.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    line-height: 1.5;
    border: 1px solid transparent;
}

.lg-alert i { flex-shrink: 0; margin-block-start: 2px; }

.lg-alert--err { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger); }
.lg-alert--ok  { background: var(--success-soft); color: var(--success); border-color: var(--success); }

/* ── form ──────────────────────────────────────────────────────────────────── */

.lg-form  { display: contents; }
.lg-step  { display: flex; flex-direction: column; gap: var(--sp-4); }
.lg-field { display: flex; flex-direction: column; gap: var(--sp-2); }

.lg-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-2);
}

.lg-control {
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.lg-control:focus-within {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.lg-control__ico {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    color: var(--text-3);
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease);
}

.lg-control:focus-within .lg-control__ico { color: var(--accent); }

.lg-input {
    flex: 1;
    min-inline-size: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text);
    /* 16px, deliberately: anything smaller makes iOS Safari zoom the page on focus, and a
       login form that jumps as you tap it reads as broken before you have typed anything. */
    font-size: var(--fs-md);
    font-family: inherit;
    padding-block: 0.8rem;
    padding-inline-end: var(--sp-3);
    min-block-size: 1.5rem;
}

.lg-input::placeholder { color: var(--text-3); }

.lg-reveal {
    background: none;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
    padding: var(--sp-3);
    display: grid;
    place-items: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
}

.lg-reveal:hover { color: var(--accent); }
.lg-reveal:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ── segmented control ─────────────────────────────────────────────────────── */

.lg-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1);
    padding: var(--sp-1);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.lg-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-block-size: 2.5rem;
    padding-inline: var(--sp-2);
    border: 0;
    border-radius: calc(var(--r-sm) - 2px);
    background: transparent;
    color: var(--text-3);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.lg-seg:hover:not(.is-on):not(:disabled) { color: var(--text-2); }

.lg-seg.is-on {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

.lg-seg:disabled { opacity: .45; cursor: not-allowed; }
.lg-seg:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── the code field ────────────────────────────────────────────────────────── */

/* One wide input rather than six boxes: it accepts a pasted code, works with the OS
   autofill that `autocomplete="one-time-code"` triggers, and has one caret to reason
   about. `dir="ltr"` on the element keeps the digits in entry order on an RTL page. */
.lg-code {
    inline-size: 100%;
    text-align: center;
    font-size: 1.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.5em;
    /* The trailing letter-space would otherwise push the digits visually off-centre. */
    text-indent: 0.5em;
    font-variant-numeric: tabular-nums;
    padding-block: var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.lg-code::placeholder { color: var(--text-3); letter-spacing: 0.4em; font-weight: var(--fw-normal); }
.lg-code:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.lg-code.is-filled { border-color: var(--accent); }

/* ── buttons ───────────────────────────────────────────────────────────────── */

.lg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-block-size: 3rem;
    padding-inline: var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.lg-btn--primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-sm);
}

.lg-btn--primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.lg-btn--primary:active:not(:disabled) { box-shadow: var(--shadow-xs); }
.lg-btn:disabled { opacity: .5; cursor: not-allowed; }
.lg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.lg-btn.is-busy { pointer-events: none; opacity: .75; }
.lg-btn.is-busy::after {
    content: '';
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--r-full);
    animation: lg-spin .6s linear infinite;
}

@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ── secondary actions ─────────────────────────────────────────────────────── */

.lg-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-base);
}

.lg-actions__sep { color: var(--text-3); }

.lg-link {
    background: none;
    border: 0;
    padding: var(--sp-2);
    color: var(--accent);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    cursor: pointer;
    border-radius: var(--r-sm);
}

.lg-link:hover:not(:disabled) { text-decoration: underline; }
.lg-link:disabled { color: var(--text-3); cursor: default; }
.lg-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.lg-hint {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-3);
    line-height: 1.5;
}

.lg-hint--center { text-align: center; }

/* ── footer ────────────────────────────────────────────────────────────────── */

.lg-footer {
    margin: 0;
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--border);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.lg-footer strong { color: var(--text-2); font-weight: var(--fw-semi); }
.lg-footer__sep { margin-inline: var(--sp-1); opacity: .55; }

.lg-footer__vendor {
    color: var(--text-2);
    font-weight: var(--fw-semi);
    text-decoration: none;
}

.lg-footer__vendor:hover,
.lg-footer__vendor:focus-visible { color: var(--accent); text-decoration: underline; }
.lg-footer__vendor:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ── phones ────────────────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
    .lg-shell {
        padding: 0;
        align-items: stretch;
    }

    /* Full-bleed sheet rather than a small card floating on a big empty ground: on a phone
       the card IS the screen, so the border and shadow are just noise around the edge. */
    .lg-card {
        max-inline-size: none;
        min-block-size: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        justify-content: center;
        padding: var(--sp-6) var(--sp-5);
        padding-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    }

    .lg-title { font-size: var(--fs-lg); }

    .lg-code {
        font-size: 1.5rem;
        letter-spacing: 0.35em;
        text-indent: 0.35em;
    }

    /* The footer sits at the bottom of the sheet rather than tight under the form. */
    .lg-footer { margin-block-start: auto; }
}

/* Landscape on a phone has almost no vertical room; give the sheet back its scroll
   and stop trying to centre content that does not fit. */
@media (max-height: 34rem) and (max-width: 60rem) {
    .lg-shell { align-items: flex-start; }
    .lg-card  { min-block-size: 0; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-btn.is-busy::after { animation: none; }
    * { transition-duration: 1ms !important; }
}