/* =============================================================================
   The sign-in card — ONE copy of the look, for BOTH browser hosts (issue #1034).

   Served as a static web asset at _content/Vesta.SignIn/signin-card.css and linked by
   Vesta.Server/Pages/Login.cshtml (/login) and Vesta.Web/wwwroot/index.html (/signin).
   Before this file the same rules lived twice: a ~290-line inline <style> block in
   Login.cshtml with hard-coded hex, and Vesta.Web/Pages/SignIn.razor.css against tokens.
   Where the two disagreed the TOKENS won, because they are the shipped look on /signin
   and they are generated from the palette of record.

   COLOR RULE: no hex below the token block. The --si-* properties come from
   Vesta.Core.Theming.ThemeCss (GET /api/theme/tokens.css, emitted on :root); the handful
   of values that palette has no token for are declared once here, scoped to .si-page, and
   read through var() like everything else. Adding them to ThemeCss instead would rewrite
   the generated stylesheet's golden files for colors only this page uses.

   CLASS RULE: every selector is si-prefixed EXCEPT the three state tokens the server
   page's inline JS writes with classList — .hidden (step), .met (password rule) and
   .visible (password reveal) — plus the .error modifier on the match hint and the
   data-loading attribute on a submit button. Those spellings are a contract with that
   script: renaming one silently breaks /login with no compile error.
   ============================================================================= */

.si-page {
    /* Supplementary tokens: the sign-in palette in ThemeCss covers the shared card, not the
       server page's status colors. One declaration each, here, rather than a literal at
       every use site. */
    --si-ok: #2e7d5e;
    --si-ok-bg: #e6f4ea;
    --si-danger: #c0392b;
    --si-danger-bg: #fde8e6;
    --si-info-bg: #e6f0fa;
    --si-ink-nav: #555;
    --si-ink-soft: #888;
    --si-line-soft: #ccc;
    --si-spinner-track: rgba(0, 0, 0, 0.15);
}

/* Reset, scoped to the card's own subtree so linking this file into an app (Vesta.Web links
   it globally from index.html) cannot reach anything else on the page. The server page used
   to get this from a document-wide `* { margin: 0; padding: 0 }`. */
.si-page,
.si-page *,
.si-page *::before,
.si-page *::after {
    box-sizing: border-box;
}

.si-page h1,
.si-page p,
.si-page ul {
    margin: 0;
    padding: 0;
}

.si-page ul {
    list-style: none;
}

/* ── Page chrome ─────────────────────────────────────────────────────────── */

.si-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--si-page);
    color: var(--si-ink);
}

.si-header {
    background: var(--si-surface);
    border-bottom: 1px solid var(--si-primary-disabled);
    padding: 16px 0;
}

.si-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.si-header__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--si-ink);
}

.si-header__logo img {
    height: 32px;
    width: auto;
}

.si-header__links a {
    color: var(--si-ink-nav);
    text-decoration: none;
    margin-left: 24px;
    font-size: 14px;
}

.si-header__links a:hover {
    color: var(--si-focus);
}

.si-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    gap: 20px;
}

.si-page-footer {
    text-align: center;
    padding: 24px;
    color: var(--si-ink-muted);
    font-size: 13px;
}

.si-page-footer a {
    color: var(--si-ink-faint);
    text-decoration: none;
    margin: 0 4px;
}

.si-page-footer a:hover {
    color: var(--si-focus);
}

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

.si-card {
    background: var(--si-surface);
    border-radius: 20px;
    box-shadow: var(--si-card-shadow);
    padding: 40px 36px;
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.si-card h1 {
    font-size: 34px;
    font-weight: 700;
    color: var(--si-ink);
    margin: 0 0 24px;
}

.si-subtitle {
    color: var(--si-ink-muted);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.si-subtitle strong {
    color: var(--si-ink);
    font-weight: 600;
}

/* Multi-step card (the server host). `hidden` is written by Login.cshtml's script — see the
   CLASS RULE at the top of this file. */
.si-step {
    display: block;
}

.si-step.hidden {
    display: none;
}

/* ── Banner (server host: the post-back message) ─────────────────────────── */

.si-banner {
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: left;
    border: 1px solid;
}

.si-banner--success {
    background: var(--si-ok-bg);
    border-color: var(--si-ok);
    color: var(--si-ok);
}

.si-banner--error {
    background: var(--si-danger-bg);
    border-color: var(--si-danger);
    color: var(--si-danger);
}

.si-banner--info {
    background: var(--si-info-bg);
    border-color: var(--si-focus);
    color: var(--si-focus);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* :not(:disabled), NOT :enabled — the server host's "Continue with Google" is an <a>, and
   :enabled matches no anchor, so a :hover:enabled rule would drop its hover entirely. */
.si-btn {
    width: 100%;
    min-height: 56px;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    transition: background 0.15s, border-color 0.15s;
}

.si-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.si-btn--outlined {
    background: var(--si-surface);
    border-color: var(--si-line);
    color: var(--si-ink);
    text-decoration: none;
}

.si-btn--outlined:not(:disabled):hover {
    background: var(--si-hover);
}

.si-btn--primary {
    background: var(--si-primary);
    color: var(--si-ink);
    border: none;
}

.si-btn--primary:not(:disabled):hover { background: var(--si-primary-hover); }
.si-btn--primary:not(:disabled):active { background: var(--si-primary-active); }
.si-btn--primary:disabled { background: var(--si-primary-disabled); }

/* Just the word, no rule lines on either side (Luna, September 16, 2026). */
.si-divider {
    display: flex;
    justify-content: center;
    color: var(--si-ink-faint);
    font-size: 14px;
    margin: 16px 0;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */

.si__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.si-input-group {
    margin-bottom: 12px;
}

.si-input {
    width: 100%;
    min-height: 56px;
    padding: 0 24px;
    border-radius: 28px;
    border: 1px solid var(--si-line);
    font-size: 16px;
    color: var(--si-ink);
    background: var(--si-surface);
    outline: none;
    transition: border-color 0.15s;
}

.si-input::placeholder {
    color: var(--si-placeholder);
}

.si-input:focus {
    border-color: var(--si-focus);
}

.si-input--otp {
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.si-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ── Password field (server host) ────────────────────────────────────────── */

.si-password-wrap {
    position: relative;
}

.si-password-wrap .si-input {
    padding-right: 56px;
}

.si-password-toggle {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--si-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.si-password-toggle:hover {
    color: var(--si-focus);
}

.si-password-toggle svg {
    width: 20px;
    height: 20px;
}

/* By default (password hidden) show the eye-off (slashed) icon. The script adds `visible`
   to the button when the password is revealed — see the CLASS RULE at the top. */
.si-password-toggle .eye-on { display: none; }
.si-password-toggle.visible { color: var(--si-focus); }
.si-password-toggle.visible .eye-off { display: none; }
.si-password-toggle.visible .eye-on { display: block; }

/* ── Validation / hints ──────────────────────────────────────────────────── */

.si-field-error {
    color: var(--si-danger);
    font-size: 13px;
    text-align: left;
    margin: 6px 0 0 12px;
}

.si-pwd-rules {
    text-align: left;
    margin: 12px 0 4px 12px;
    font-size: 13px;
}

.si-pwd-rule {
    color: var(--si-danger);
    line-height: 1.7;
    display: flex;
    align-items: center;
    gap: 8px;
}

.si-pwd-rule::before {
    content: '\2717';
    font-weight: 700;
    width: 14px;
    text-align: center;
}

.si-pwd-rule.met { color: var(--si-ok); }
.si-pwd-rule.met::before { content: '\2713'; }

.si-pwd-caveat {
    color: var(--si-ink-faint);
    font-size: 11px;
    text-align: left;
    margin: 6px 0 0 12px;
    line-height: 1.4;
    max-width: 380px;
}

.si-match-hint {
    font-size: 12px;
    color: var(--si-ink-faint);
    margin-top: 12px;
    text-align: center;
}

.si-match-hint.error { color: var(--si-danger); }

/* ── Step links (server host) ────────────────────────────────────────────── */

.si-step-links {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 14px;
}

.si-step-links__sep {
    color: var(--si-line-soft);
}

.si-step-links button,
.si-step-links a {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--si-focus);
    font-size: 14px;
    padding: 4px 8px;
    text-decoration: none;
}

.si-step-links button:hover,
.si-step-links a:hover { text-decoration: underline; }

.si-step-links button:disabled {
    color: var(--si-placeholder);
    cursor: not-allowed;
    text-decoration: none;
}

/* ── Footer text + download link ─────────────────────────────────────────── */

.si-footer-text {
    margin: 20px 0 0;
    font-size: 12px;
    color: var(--si-ink-faint);
    line-height: 1.5;
}

.si-footer-text a {
    color: var(--si-focus);
    text-decoration: none;
}

.si-footer-text a:hover {
    text-decoration: underline;
}

.si-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--si-surface);
    border: 1px solid var(--si-line);
    border-radius: 8px;
    color: var(--si-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.si-download:hover {
    background: var(--si-hover);
    border-color: var(--si-line-strong);
}

.si-download svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Submit spinner ──────────────────────────────────────────────────────── */

.si-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--si-spinner-track);
    border-top-color: var(--si-ink);
    border-radius: 50%;
    animation: si-spin 0.6s linear infinite;
    display: none;
}

.si-btn[data-loading="true"] .si-spinner { display: inline-block; }
.si-btn[data-loading="true"] .si-btn__label { opacity: 0.6; }

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