/* ============================================================================
   Sign-in and sign-up pages: one centred card on a light page. The logo on top,
   labelled fields, the primary button, then "OR" and the Google button. Loaded
   after app.css on those pages only, and scoped under .login-* so the activation
   card (.auth-*) is left alone. Colours come from app.css's theme tokens, so the
   page follows light and dark with the rest of the application.
   ========================================================================= */

/* Marcellus (SIL Open Font License), the flared capitals closest to the Aurnelle wordmark. */
@font-face {
    font-family: "Marcellus";
    src: url("/fonts/Marcellus-Regular-bb551feb34fe60fd58f9b5913dd05073.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.login-body {
    margin: 0;
    display: block;
    min-height: 100vh;
    padding: 0;
    background: var(--bg);
    color: var(--text);
}

.login-root {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.login-main {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-column {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 36px 32px 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* The sign-up card is wider and sets its fields two to a row. */
.login-column.login-column-wide {
    max-width: 560px;
}

.login-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

/* The strength meter on the left, the rule it is judged by on the right, under the two passwords. */
.login-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.login-meta .login-hint {
    margin: 0;
}

@media (max-width: 600px) {
    .login-row {
        grid-template-columns: 1fr;
    }
}

.login-brand {
    text-align: center;
    margin-bottom: 24px;
}

/* "VENDOR HUB" between two rules, under the logo, as wide as the logo. */
.login-product {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 250px;
    max-width: 100%;
    margin: 0 auto 14px;
    color: #54463d;
    font-family: "Marcellus", "Trajan Pro", Georgia, serif;
    font-size: 13px;
    letter-spacing: .32em;
    text-transform: uppercase;
    white-space: nowrap;
}

.login-product::before,
.login-product::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: .75;
}

.login-product span {
    /* letter-spacing leaves a gap after the last letter; take it back so the text sits centred */
    margin-right: -.32em;
}

:root[data-theme="dark"] .login-product {
    color: var(--text-muted);
}

.login-brand .auth-mark {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    font-size: 16px;
}

/* The dynamic logo. Bounded both ways so any aspect ratio sits well in the column. */
.login-logo {
    display: block;
    width: 250px;
    height: auto;
    max-width: 100%;
    max-height: 130px;
    margin: 0 auto 6px;
    object-fit: contain;
}

/* The default logo is dark artwork; on the dark theme it is lightened to stay legible. */
:root[data-theme="dark"] .login-logo.is-default {
    filter: invert(1) hue-rotate(180deg);
}

.login-logo[hidden],
.login-brand .auth-mark[hidden] {
    display: none;
}

.login-brand h1 {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.login-brand p {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--text-muted);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.login-field {
    position: relative;
}

.login-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}

.login-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.login-field .login-input {
    padding-right: 44px;
}

.login-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.login-eye:hover {
    color: var(--text);
}

.login-eye svg {
    width: 17px;
    height: 17px;
}

.login-cta {
    margin-top: 4px;
    padding: 12px 16px;
    border: 1px solid var(--button-border);
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--button-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.login-cta:hover {
    background: var(--button-hover);
}

/* Google. The real button is rendered by Google's script into the container.
   Until it arrives, and when sign-in is not configured, a look-alike holds the
   place so the layout does not jump. */
.login-google {
    position: relative;
    min-height: 47px;
}

.login-google-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 47px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.login-google-fallback:hover {
    background: var(--surface-2);
}

.login-google-fallback svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Google draws its own button; sized here to match the Sign in button: the same
   height and corner radius, and the same 14px text. The role attribute is the
   hook because Google's class names are generated and change. */
.login-google-btn [role="button"] {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 47px;
    border-radius: 8px;
    font-size: 14px;
}

.login-google-btn [role="button"] span {
    font-size: 14px;
}

/* Once Google's button is in, it replaces the look-alike. */
.login-google-btn {
    display: block;
}

/* Google wraps its button in two plain divs that shrink to fit; stretch them so
   the button can take the full column width like the Sign in button. */
.login-google-btn > div,
.login-google-btn > div > div {
    width: 100%;
}

.login-google.is-ready .login-google-fallback {
    display: none;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border);
}

/* Field errors and hints, tucked under the input they belong to (sign-up page). */
.login-input.is-invalid,
.login-prefixed.is-invalid {
    border-color: var(--error-text);
}

.login-error {
    margin: -8px 0 0;
    font-size: 12.5px;
    color: var(--error-text);
}

.login-hint {
    margin: -6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.login-strength {
    margin: 0;
}

/* +91 and the number, drawn as one field like the other inputs. */
.login-prefixed {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.login-prefixed:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.login-prefix {
    display: grid;
    place-items: center;
    padding: 0 12px;
    border-right: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 15px;
}

.login-prefixed input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
}

.login-alert {
    margin: 0 0 14px;
}

.login-alert[hidden] {
    display: none;
}

.login-foot {
    margin-top: 20px;
    text-align: center;
}

.login-foot p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.login-foot p + p {
    margin-top: 6px;
}

.login-foot a {
    color: var(--accent-strong);
    font-weight: 600;
}

@media (max-width: 480px) {
    .login-column {
        padding: 28px 20px 24px;
    }
}