/* Punched — the sign-in card: /login and /set-password.
 *
 * Load after tokens.css and app-bar.css. Values are the hub's own (hub.html),
 * so the front door and the pages behind it read as one product: light in a
 * browser, and the hub's navy set when the server stamps data-theme="dark"
 * onto <html> inside the Android wrapper (api/lib/front-door.js).
 */

:root {
    --font-mono: 'SF Mono', 'Consolas', 'Menlo', monospace;

    --lg-ground:      var(--ff-surface-alt);
    --lg-glow:        none;
    --lg-card:        var(--ff-surface);
    --lg-card-line:   var(--ff-border);
    --lg-card-shadow: 0 1px 2px rgba(31, 53, 67, .06), 0 18px 48px rgba(31, 53, 67, .10);
    --lg-text:        var(--ff-text);
    --lg-dim:         var(--ff-text-muted);
    /* small mono labels: --ff-text-faint is under 3:1 on white */
    --lg-faint:       var(--ff-text-muted);
    --lg-eyebrow:     var(--ff-accent-ink);   /* --ff-accent fails AA as text on light */
    --lg-in-bg:       var(--ff-surface);
    --lg-in-line:     #c9d3dc;
    --lg-in-hover:    #a9b7c3;
    --lg-placeholder: var(--ff-text-faint);
    --lg-focus:       var(--ff-brand);
    --lg-focus-ring:  rgba(19, 81, 111, .16);
    --lg-live:        var(--ff-ok);
    --lg-error:       var(--ff-danger-ink);
    --lg-error-bg:    #fdecea;
    --lg-ok-ink:      #1b7a3d;
    --lg-ok-bg:       #e7f4ec;
    --lg-link:        var(--ff-brand);
    --lg-divider:     var(--ff-border);
}
:root[data-theme="dark"] {
    --lg-ground:      var(--ff-navy-deep);
    --lg-glow:
        radial-gradient(760px 440px at 82% -10%, rgba(238, 116, 2, .15), transparent 60%),
        radial-gradient(700px 540px at 6% 106%, rgba(90, 189, 211, .09), transparent 60%);
    --lg-card:        var(--ff-navy-card);
    --lg-card-line:   var(--ff-navy-line);
    --lg-card-shadow: none;
    --lg-text:        var(--ff-cream);
    --lg-dim:         var(--ff-cream-dim);
    --lg-faint:       #6f8f9e;
    --lg-eyebrow:     var(--ff-accent);
    --lg-in-bg:       #0c2c3d;
    --lg-in-line:     var(--ff-navy-line);
    --lg-in-hover:    #2a7398;
    --lg-placeholder: #6f8f9e;
    --lg-focus:       var(--ff-logistics);
    --lg-focus-ring:  rgba(90, 189, 211, .22);
    --lg-live:        #2fd08a;
    --lg-error:       #ff9a91;
    --lg-error-bg:    rgba(255, 154, 145, .1);
    --lg-ok-ink:      #2fd08a;
    --lg-ok-bg:       rgba(47, 208, 138, .1);
    --lg-link:        var(--ff-cream);
    --lg-divider:     rgba(29, 93, 125, .55);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--lg-text);
    background: var(--lg-glow), var(--lg-ground);
    min-height: 100vh;
}
/* The shared top bar's right-hand side, without app-bar.js: that
   script would offer "Sign in" on the sign-in page. */
.app-bar .app-bar-right a { text-decoration: none; }

#login-screen {
    min-height: calc(100vh - var(--app-bar-h));
    display: grid; place-items: center;
    padding: 32px 20px 48px;
}
.lg-card {
    width: 100%; max-width: 420px;
    background: var(--lg-card); border: 1px solid var(--lg-card-line); border-radius: 16px; overflow: hidden;
    box-shadow: var(--lg-card-shadow);
}

@keyframes lgPulse { 0% { box-shadow: 0 0 0 0 rgba(47,208,138,.5); } 70% { box-shadow: 0 0 0 7px rgba(47,208,138,0); } 100% { box-shadow: 0 0 0 0 rgba(47,208,138,0); } }

/* ── form panel ────────────────────────────────────────────── */
.lg-form { padding: 38px 36px 30px; display: flex; flex-direction: column; justify-content: center; }
.lg-form .lg-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-eyebrow); }
.lg-form h2 { margin: 8px 0 4px; font-size: 22px; font-weight: 750; letter-spacing: -.3px; color: var(--lg-text); }
.lg-form .lg-sub { margin: 0 0 26px; font-size: 13px; color: var(--lg-dim); }
.lg-form form { margin: 0; }
.lg-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--lg-text); margin: 0 0 6px; }
.lg-field { margin-bottom: 16px; }
.lg-in {
    width: 100%; height: 44px; padding: 0 13px;
    border: 1px solid var(--lg-in-line); border-radius: 9px; background: var(--lg-in-bg); color: var(--lg-text);
    font: inherit; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.lg-in:hover { border-color: var(--lg-in-hover); }
.lg-in::placeholder { color: var(--lg-placeholder); }
.lg-in:focus { border-color: var(--lg-focus); box-shadow: 0 0 0 3px var(--lg-focus-ring); }
/* Chrome paints autofilled fields pale blue; keep them on the card. */
.lg-in:-webkit-autofill { -webkit-text-fill-color: var(--lg-text); box-shadow: 0 0 0 40px var(--lg-in-bg) inset; caret-color: var(--lg-text); }
.lg-in:-webkit-autofill:focus { box-shadow: 0 0 0 40px var(--lg-in-bg) inset, 0 0 0 3px var(--lg-focus-ring); }
.lg-btn {
    margin-top: 6px; width: 100%; height: 46px; border: 0; border-radius: 9px; cursor: pointer;
    background: linear-gradient(135deg, var(--ff-accent-ink), var(--ff-accent-deep)); color: #fff;
    font: inherit; font-weight: 700; font-size: 14.5px;
    transition: transform .08s ease, box-shadow .16s, filter .16s; box-shadow: 0 6px 16px rgba(184, 88, 0, .22);
}
.lg-btn:hover { filter: brightness(1.06); box-shadow: 0 10px 22px rgba(184, 88, 0, .3); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn[disabled] { opacity: .65; cursor: default; transform: none; filter: none; }
.lg-btn:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 2px; }
#login-error {
    display: none; margin-top: 14px; padding: 10px 12px; border-radius: 8px;
    font-size: 13px; color: var(--lg-error); background: var(--lg-error-bg);
}
.lg-links { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lg-divider); display: grid; gap: 9px; }
.lg-alt { margin: 0; font-size: 13px; color: var(--lg-dim); }
.lg-alt a { color: var(--lg-link); font-weight: 600; text-decoration: none; }
.lg-alt a:hover { text-decoration: underline; }
.lg-alt a:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 2px; border-radius: 3px; }
.lg-meta { margin-top: 22px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--lg-faint); }
.lg-live { width: 7px; height: 7px; border-radius: 50%; background: var(--lg-live); animation: lgPulse 2.4s infinite; }

@media (max-width: 520px) {
    #login-screen { place-items: start center; padding: 20px 16px 40px; }
    .lg-form { padding: 30px 24px 26px; }
    .app-bar .app-bar-right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #login-screen * { animation: none !important; }
}

/* set-password: hints under a field, a status line, and the code box. */
.lg-hint { margin: -8px 0 16px; font-size: 12px; line-height: 1.5; color: var(--lg-dim); }
.lg-msg { display: none; margin: 0 0 18px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.lg-msg.err { display: block; color: var(--lg-error); background: var(--lg-error-bg); }
.lg-msg.ok  { display: block; color: var(--lg-ok-ink); background: var(--lg-ok-bg); }
.lg-in.lg-code { font-family: var(--font-mono); font-size: 20px; letter-spacing: 3px; text-align: center; text-transform: uppercase; }
.lg-field + .lg-hint { margin-top: -8px; }
/* A link dressed as the primary button (set-password's "Go to sign in"). */
a.lg-btn-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.lg-alt.lg-under { margin-top: 14px; }