/*
 * auth.css — the signed-out pages: sign-in (index.html) and reset-password.
 * Moved out of index.html's <style> block on 2026-10-06 so both pages draw
 * from one copy. Self-contained on purpose: it must not depend on which
 * utilities the compiled tailwind.css happens to carry.
 */

/* Form Container Toggle */
.form-container {
    display: none;
}

.form-container.active {
    display: block;
}

/* Button Loader */
.btn-loader {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -9px;
}

.loading .btn-loader {
    display: block;
}

.loading .btn-text {
    opacity: 0.8;
}

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

/* Field label — sentence case, quiet */
.field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #2A333B;
}

/* Input Group — 44px touch target */
.input-group {
    min-height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5DADF;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-group:hover {
    border-color: #B9C0C6;
}

.input-group:focus-within {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.input-group input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 14px;
    color: #12181D;
}

.input-group input::placeholder {
    color: #9AA3AB;
}

.input-group input:focus,
.input-group input:active {
    outline: none !important;
    box-shadow: none !important;
}

.pw-toggle {
    color: #8A939B;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: -6px;
}

.pw-toggle:hover {
    color: #2A333B;
}

/* Validation Error Styling — the message sits below the box
   (script.js inserts it after .input-group, never inside it). */
.field-error {
    color: #B91C1C;
    font-size: 12px;
    font-weight: 500;
}

.input-group.has-error,
.input-group.has-error:hover {
    border-color: #DC2626;
}

.input-group.has-error:focus-within {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Custom Checkbox */
.custom-checkbox:has(input:checked) .checkbox-icon {
    opacity: 1;
}

.custom-checkbox:has(input:checked) .checkbox-box {
    border-color: #0F766E;
    background-color: #0F766E;
}

.custom-checkbox:has(input:focus-visible) .checkbox-box {
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25);
}

/* Primary action */
.btn-primary {
    height: 44px;
    border-radius: 8px;
    background: #0F766E;
    transition: background-color 0.15s ease;
}

.btn-primary:hover {
    background: #0C5D57;
}

/* Text link */
.text-link {
    color: #0F766E;
    font-size: 13px;
    font-weight: 500;
}

.text-link:hover {
    color: #0C5D57;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Visible keyboard focus on every control */
.btn-primary:focus-visible,
.ms-signin-btn:focus-visible,
.text-link:focus-visible,
.pw-toggle:focus-visible {
    outline: 2px solid #0F766E;
    outline-offset: 2px;
}

/* Fallback alert (primary path is toast.js) */
.alert {
    display: none;
    max-width: 24rem;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #EBEEF0;
    border-left: 3px solid #0F766E;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10);
    padding: 1rem;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert.show {
    display: flex;
}

/* Microsoft sign-in button.
   Styled here rather than with hover: utilities because the compiled
   tailwind.css carries no hover variants — see IMS-Frontend/CLAUDE.md.
   Stays display:none until auth-microsoft_status says the feature is on. */
.ms-signin-btn {
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #D5DADF;
    border-radius: 8px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ms-signin-btn:hover {
    border-color: #B9C0C6;
    background: #F6F7F8;
}

.ms-signin-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Brand panel: the same dark blueprint grid, now fading out toward the
   edges, with a rack-rail ruler (one tick per rack unit) on the right. */
.brand-grid {
    background-color: #14181C;
}

.brand-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 35% 45%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 75% at 35% 45%, #000 35%, transparent 100%);
    pointer-events: none;
}

.brand-grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 28px;
    width: 10px;
    border-left: 1px solid #2A3138;
    background-image:
        repeating-linear-gradient(to bottom, #3A434B 0 1px, transparent 1px 14px),
        repeating-linear-gradient(to bottom, #56616B 0 1px, transparent 1px 42px);
    background-size: 6px 100%, 10px 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.capability-row + .capability-row {
    border-top: 1px solid #2A3138;
}

/* Sign-in column — the "A · Refined" board, self-contained so it does
   not depend on which utilities the compiled tailwind.css carries. */
/* Desktop split: brand 60% / sign-in 40% (the sign-in side is flex-1).
   Between 1024 and 1279px the 40% column is ~410-510px, so its side
   padding drops to keep the 380px form at full width. */
@media (min-width: 1024px) {
    .brand-panel {
        width: 60%;
        flex-shrink: 0;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .auth-panel {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.auth-panel {
    background: #F6F7F8;
    color: #12181D;
    font-size: 14px;
}

.auth-stack {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* This sheet loads after tailwind.css, so its display:flex would beat .hidden. */
.auth-stack.hidden {
    display: none;
}

.auth-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-head h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #12181D;
}

.auth-head p {
    margin: 0;
    color: #5B6670;
}

#microsoftSignIn:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6B7680;
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E3E6E8;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field .input-group,
.auth-field-pw .input-group {
    padding: 0 14px;
}

.auth-field .input-group input,
.auth-field-pw .input-group input {
    flex: 1 1 120px;
    min-width: 0;
    height: 42px;
    padding: 0;
    background: transparent;
}

/* Password field: "Forgot?" sits top-right on screen but after the
   input in the DOM, so Tab goes username -> password -> Forgot?. */
.auth-field-pw {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 6px;
}

.auth-field-pw > label {
    grid-row: 1;
    grid-column: 1;
}

.auth-field-pw > .auth-forgot {
    grid-row: 1;
    grid-column: 2;
}

.auth-field-pw > .input-group,
.auth-field-pw > .field-error {
    grid-column: 1 / -1;
}

.auth-forgot {
    font-size: 13px;
    color: #0F766E;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-forgot:hover {
    color: #0C5D57;
}

.auth-forgot:focus-visible {
    outline: 2px solid #0F766E;
    outline-offset: 2px;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #2A333B;
    cursor: pointer;
}

.auth-remember input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0F766E;
}