@import 'PubManager.Client.gi1zge1lll.bundle.scp.css';
@import '_content/GuideFlow/GuideFlow.icqtd3atk2.bundle.scp.css';

/* /Features/Auth/LocalAuthPage.razor.rz.scp.css */
/* Page-specific pieces only; the shell (.signin, .signin__card, .signin__brand, .signin__eyebrow)
   is shared with /login in app.css. The theme variables come from the MudThemeProvider the page
   renders statically, so every colour here is a hearth token. */

.local-auth p[b-nc99grog7r] { margin: 0; line-height: 1.5; }
.local-auth a[b-nc99grog7r] {
    color: var(--hearth-primary);
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.local-auth__account[b-nc99grog7r] { overflow-wrap: anywhere; color: var(--hearth-on-surface-variant); }
.local-auth__help[b-nc99grog7r] { font-size: .875rem; line-height: 1.5; color: var(--hearth-on-surface-variant); }
.local-auth__error[b-nc99grog7r] {
    padding: var(--hearth-space-md);
    border-radius: var(--hearth-radius-md);
    border-left: var(--hearth-border-accent) solid var(--hearth-error);
    background: var(--hearth-error-container);
    color: var(--hearth-on-error-container);
}

.local-auth button[b-nc99grog7r] {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--hearth-radius-md);
    background: var(--hearth-primary);
    color: var(--hearth-on-primary);
    box-shadow: var(--hearth-shadow-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--hearth-transition), box-shadow var(--hearth-transition);
}
.local-auth button:disabled[b-nc99grog7r] { opacity: .55; cursor: not-allowed; }
.local-auth button:focus-visible[b-nc99grog7r],
.local-auth a:focus-visible[b-nc99grog7r] { outline: 2px solid var(--hearth-primary); outline-offset: 3px; }
@media (hover: hover) {
    .local-auth button:hover:not(:disabled)[b-nc99grog7r] {
        background: var(--hearth-primary-container);
        box-shadow: var(--hearth-shadow-ambient);
    }
    .local-auth a:hover[b-nc99grog7r] { text-decoration: underline; }
}

/* Google's branded button keeps Google's look: it is their sign-in affordance, not ours. */
.local-auth button.local-auth__google[b-nc99grog7r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #747775;
    border-radius: 4px;
    background: #fff;
    color: #1f1f1f;
    box-shadow: none;
    font: 500 14px/20px "Google Sans", Arial, sans-serif;
    letter-spacing: .25px;
    transition: box-shadow .218s;
}
.local-auth__google img[b-nc99grog7r] { flex: none; object-fit: contain; }
.local-auth button.local-auth__google:focus-visible[b-nc99grog7r],
.local-auth button.local-auth__google:active[b-nc99grog7r] { box-shadow: inset 0 0 0 100px #3030301f; }
@media (hover: hover) {
    .local-auth button.local-auth__google:hover:not(:active):not(:focus-visible)[b-nc99grog7r] {
        background: #fff;
        box-shadow: inset 0 0 0 100px #30303014, 0 1px 2px #3c40434d, 0 1px 3px 1px #3c404326;
    }
}

.local-auth form[b-nc99grog7r] { display: grid; gap: var(--hearth-space-md); }
.local-auth--signin form[b-nc99grog7r] { gap: var(--hearth-space-sm); }
.local-auth [hidden][b-nc99grog7r] { display: none; }
.local-auth label[b-nc99grog7r] { font-size: .875rem; font-weight: 600; }
/* DESIGN.md inputs: a low-surface fill instead of a heavy border, focus shown as a primary ring. */
.local-auth input:not([type="hidden"])[b-nc99grog7r] {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    box-sizing: border-box;
    border: var(--hearth-border-thin) solid var(--hearth-border-light);
    border-radius: var(--hearth-radius-md);
    background: var(--hearth-surface-container-low);
    color: var(--hearth-on-surface);
    font: inherit;
    transition: background var(--hearth-transition), border-color var(--hearth-transition);
}
.local-auth input:focus-visible[b-nc99grog7r] {
    outline: 2px solid var(--hearth-primary);
    outline-offset: 0;
    border-color: var(--hearth-primary);
    background: var(--hearth-surface-container-lowest);
}

.local-auth__divider[b-nc99grog7r] {
    display: flex;
    align-items: center;
    gap: var(--hearth-space-lg);
    color: var(--hearth-on-surface-variant);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.local-auth__divider[b-nc99grog7r]::before,
.local-auth__divider[b-nc99grog7r]::after { content: ""; flex: 1; height: 1px; background: var(--hearth-border-light); }

/* Secondary actions sit on a high surface with ink text (DESIGN.md), one notch below the pine CTA. */
.local-auth button.local-auth__passkey[b-nc99grog7r],
.local-auth button.local-auth__business[b-nc99grog7r] {
    background: var(--hearth-surface-container-high);
    color: var(--hearth-on-surface);
    box-shadow: none;
}
@media (hover: hover) {
    .local-auth button.local-auth__passkey:hover:not(:disabled)[b-nc99grog7r],
    .local-auth button.local-auth__business:hover:not(:disabled)[b-nc99grog7r] {
        background: var(--hearth-surface-container-highest);
        box-shadow: none;
    }
}
.local-auth a.local-auth__fallback[b-nc99grog7r] { font-size: .875rem; font-weight: 500; color: var(--hearth-on-surface-variant); }

.local-auth__business[b-nc99grog7r] { display: flex; gap: var(--hearth-space-md); justify-content: space-between; text-align: left; }
.local-auth__business span:first-child[b-nc99grog7r] { overflow-wrap: anywhere; }
.local-auth__business span:last-child[b-nc99grog7r] {
    flex: none;
    font-size: .875rem;
    font-weight: 500;
    color: var(--hearth-on-surface-variant);
    text-transform: capitalize;
}