/* Sign-in and two-factor screens.
   Loaded after app.css so it overrides the older dark treatment. These are the
   handover between the public landing page and the app, so they carry the
   landing page's type and palette rather than the data-dense app styling. */

.login-page {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: #FFFFFF;
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* The same wash and ledger grid as the landing page hero, so signing in feels
   like the next step rather than a different site. */
.login-page::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(820px 460px at 18% -8%, rgba(46, 111, 212, .13), transparent 62%),
        radial-gradient(680px 440px at 86% 108%, rgba(23, 128, 90, .08), transparent 60%);
    pointer-events: none;
}
.login-page::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(15, 26, 43, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 26, 43, .045) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(620px 520px at 50% 45%, #000 12%, transparent 74%);
    -webkit-mask-image: radial-gradient(620px 520px at 50% 45%, #000 12%, transparent 74%);
    pointer-events: none;
}

.login-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #E3EAF4;
    border-radius: 14px;
    padding: 38px 36px 32px;
    width: 100%;
    max-width: 424px;
    box-shadow:
        0 1px 2px rgba(15, 26, 43, .04),
        0 20px 44px -24px rgba(15, 26, 43, .28);
}

/* The card is white and the logo is dark blue, so it sits directly on the
   card with no chip behind it. */
/* The card is white and the logo is dark blue, so it sits directly on the card
   with no chip or fill behind it -- a coloured background here would swallow it. */
/* Centred on the card. width:max-content keeps the link's clickable area on
   the logo itself rather than spanning the full card width. */
.login-mark {
    display: block;
    width: max-content;
    margin: 0 auto 26px;
    background: none;
    text-decoration: none;
    transition: opacity .18s ease;
}
.login-mark img { height: 48px; width: auto; display: block; }
a.login-mark:hover { text-decoration: none; opacity: .78; }

/* Logo, heading and subtitle form one centred block. The form below stays
   left-aligned -- centred labels and inputs are harder to scan and to fill in. */
.login-card h1 {
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -.012em;
    color: #0F1A2B;
    margin: 0 0 8px;
    text-align: center;
}
.login-card .sub {
    color: #4E5C70;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 auto 28px;
    text-align: center;
    max-width: 32ch;
}

.login-card .field { margin-bottom: 16px; }
.login-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0F1A2B;
    margin-bottom: 6px;
}
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
    width: 100%;
    padding: 11px 13px;
    font-size: 15px;
    font-family: inherit;
    color: #0F1A2B;
    background: #fff;
    border: 1px solid #D3DEEC;
    border-radius: 8px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.login-card input:hover { border-color: #B9C8DD; }
.login-card input:focus {
    outline: none;
    border-color: #2E6FD4;
    box-shadow: 0 0 0 3px rgba(46, 111, 212, .16);
}
.login-card input::placeholder { color: #97A3B4; }

.login-card .checkline {
    display: flex; align-items: center; gap: 9px;
    margin: 18px 0 22px;
    font-size: 14px;
    color: #4E5C70;
}
.login-card .checkline label { margin: 0; font-weight: 400; font-size: 14px; color: #4E5C70; }
.login-card .checkline input { accent-color: #1C4F9C; width: 15px; height: 15px; }

.login-card .btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #1C4F9C;
    border: 1px solid #1C4F9C;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 16px -10px rgba(28, 79, 156, .9);
}
.login-card .btn:hover {
    background: #2E6FD4; border-color: #2E6FD4;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -12px rgba(28, 79, 156, .9);
}
.login-card .btn:active { transform: none; }

/* The one-time code wants to read as digits, not prose. */
.login-card input[autocomplete="one-time-code"] {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 22px;
    letter-spacing: .32em;
    text-align: center;
    padding: 13px;
}

.login-card .alert {
    border-radius: 8px;
    font-size: 14px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.login-foot {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #E3EAF4;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
}
.login-foot .note {
    font-size: 12.5px;
    color: #5F6D7E;
    margin: 0;
    max-width: 34ch;
    line-height: 1.5;
}
.login-foot .back {
    font-size: 13px;
    font-weight: 500;
    color: #1C4F9C;
    white-space: nowrap;
}
.login-foot .back:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .login-card .btn, .login-card input, a.login-mark { transition: none; }
}

@media (max-width: 460px) {
    .login-card { padding: 30px 24px 26px; border-radius: 12px; }
    .login-card h1 { font-size: 26px; }
}