/* Presentation for the platform login page (the standalone pre-auth gateway). Kept in its own
   file per the strict CSS/JS/HTML separation rule (coding-standards §4). Colors and spacing use
   design tokens (tokens.css) so a host theme can re-skin without touching markup (§12); the layout
   is mobile-first and fluid. Bundled by Vite via the app's resources/css/app.css entry. */

/* The login page is the standalone pre-auth gateway (no shell), so it centres itself in the
   viewport. The authenticated home view renders *inside* the shell content frame, so it only
   styles its own section — the shell owns page-level layout. */
.platform-auth {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--platform-space-md, 1rem);
    font-family: var(--platform-font-body, system-ui, sans-serif);
    letter-spacing: var(--platform-letter-spacing, normal);
    background: var(--platform-color-page-bg, #f2f2f6);
    color: var(--platform-color-text, #1f2328);
}

.platform-auth__panel {
    width: 100%;
    max-width: 22rem;
    padding: var(--platform-space-lg, 1.5rem);
    background: var(--platform-color-surface, #ffffff);
    border-radius: var(--platform-radius-md, 0.5rem);
    box-shadow: var(--platform-shadow-panel, 0 1px 3px rgba(0, 0, 0, 0.12));
}

.platform-auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--platform-space-sm, 0.5rem);
    margin-bottom: var(--platform-space-lg, 1.5rem);
    font-weight: 700;
}

.platform-auth__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--platform-radius-sm, 0.25rem);
    background: var(--platform-color-accent, #0969da);
    color: var(--platform-color-on-accent, #ffffff);
    font-weight: 700;
}

.platform-auth__title {
    margin: 0 0 var(--platform-space-md, 1rem);
    font-size: var(--platform-font-size-lg, 1.5rem);
}

.platform-auth__hint {
    margin: var(--platform-space-md, 1rem) 0 0;
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text-muted, #57606a);
    text-align: center;
}

.platform-auth__errors {
    margin-bottom: var(--platform-space-md, 1rem);
    padding: var(--platform-space-sm, 0.5rem) var(--platform-space-md, 1rem);
    border-radius: var(--platform-radius-sm, 0.25rem);
    background: var(--platform-color-error-surface, #fdeceb);
    color: var(--platform-color-error-text, #c0392b);
}

.platform-auth__error-list {
    margin: 0;
    padding-left: var(--platform-space-md, 1rem);
}

.platform-auth__error {
    margin: 0;
}

/* Informational notice (e.g. "your account has been disabled" after a forced logout). */
.platform-auth__notice {
    margin-bottom: var(--platform-space-md, 1rem);
    padding: var(--platform-space-sm, 0.5rem) var(--platform-space-md, 1rem);
    border-radius: var(--platform-radius-sm, 0.25rem);
    background: var(--platform-color-notice-surface, #fff8e1);
    color: var(--platform-color-notice, #7a5b00);
}

/* Alternative sign-in methods (e.g. legacy Q.Intranet SSO), separated from the native form. */
.platform-auth__alt {
    margin-top: var(--platform-space-md, 1rem);
    padding-top: var(--platform-space-md, 1rem);
    border-top: 1px solid var(--platform-color-border, #d0d7de);
    text-align: center;
}

.platform-auth__sso {
    display: inline-block;
    font-weight: 600;
    color: var(--platform-color-accent, #0969da);
    text-decoration: none;
}

.platform-auth__sso:hover {
    text-decoration: underline;
}

/* Inline text link used across the auth pages (forgot-password, back-to-sign-in). */
.platform-auth__link {
    font-weight: 600;
    color: var(--platform-color-accent, #0969da);
    text-decoration: none;
}

.platform-auth__link:hover {
    text-decoration: underline;
}

/* The "forgot your password?" affordance under the sign-in form — quiet, right-aligned. */
.platform-auth__forgot {
    margin: 0 0 var(--platform-space-md, 1rem);
    font-size: var(--platform-font-size-sm, 0.875rem);
    text-align: right;
}

/* Lead instruction above a form (e.g. the reset-request page). */
.platform-auth__lead {
    margin: 0 0 var(--platform-space-md, 1rem);
    color: var(--platform-color-text-muted, #57606a);
}

.platform-auth__field {
    position: relative;
    margin-bottom: var(--platform-space-md, 1rem);
}

.platform-auth__label {
    display: block;
    margin-bottom: var(--platform-space-xs, 0.25rem);
    font-weight: 600;
}

.platform-auth__input {
    width: 100%;
    box-sizing: border-box;
    /* Same input-density knob as the shared form input (M-084): shorter field, horizontal inset kept. */
    padding: var(--platform-input-padding-y, 0.35rem) var(--platform-space-sm, 0.5rem);
    font: inherit;
    border: 1px solid var(--platform-color-border, #d0d7de);
    border-radius: var(--platform-radius-sm, 0.25rem);
    background: var(--platform-color-surface, #ffffff);
    color: inherit;
}

.platform-auth__input:focus {
    outline: 2px solid var(--platform-color-accent, #0969da);
    outline-offset: 1px;
}

.platform-auth__toggle {
    position: absolute;
    inset-block-end: var(--platform-space-xs, 0.25rem);
    inset-inline-end: var(--platform-space-xs, 0.25rem);
    padding: var(--platform-space-xs, 0.25rem) var(--platform-space-sm, 0.5rem);
    font: inherit;
    background: none;
    border: 0;
    color: var(--platform-color-accent, #0969da);
    cursor: pointer;
}

.platform-auth__remember {
    display: flex;
    align-items: center;
    gap: var(--platform-space-xs, 0.25rem);
    margin-bottom: var(--platform-space-md, 1rem);
}

.platform-auth__submit {
    width: 100%;
    padding: var(--platform-space-sm, 0.5rem);
    font: inherit;
    font-weight: 600;
    color: var(--platform-color-on-accent, #ffffff);
    background: var(--platform-color-accent, #0969da);
    border: 0;
    border-radius: var(--platform-radius-sm, 0.25rem);
    cursor: pointer;
}

.platform-auth__submit:hover {
    background: var(--platform-color-accent-strong, #0860ca);
}