/* Sign-in, password and boot screens for /account.
   Follows the Kwik software rules (brand.kwik.com/software-rules.md):
   Poppins, Ink primary action, borderless floating card on the #F6F6F7
   canvas, 8/12/999 radii, no blue. */

body.acct-signed-out,
body.acct-booting { background: #F6F6F7; }
body.acct-signed-out #acctTopNav,
body.acct-booting #acctTopNav { display: none; }

.kauth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(40px + env(safe-area-inset-top, 0px)) 16px 40px;
    font-family: "Kwik", "Poppins", system-ui, sans-serif;
    color: #0B0B0F;
}
.kauth-shell.hidden { display: none; }

.kauth-card {
    width: 100%;
    max-width: 400px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px 32px 32px;
    box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 2px 8px rgba(11, 11, 15, .03);
}
@media (max-width: 480px) {
    .kauth-card { padding: 32px 24px 24px; }
}

.kauth-mark { display: block; height: 32px; width: auto; margin: 0 0 32px; }
.kauth-title { font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: 0; }
.kauth-sub { font-size: 14px; line-height: 1.5; color: #52525B; margin: 8px 0 24px; }

.kauth-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.kauth-field { display: flex; flex-direction: column; gap: 8px; }
.kauth-field > span,
.kauth-label { font-size: 13px; font-weight: 500; line-height: 1.4; color: #3F3F46; }

.kauth-input-wrap { position: relative; }
.kauth-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #E8E8EA;
    border-radius: 8px;
    background: #FFFFFF;
    font: 400 14px/1.4 "Kwik", "Poppins", system-ui, sans-serif;
    color: #0B0B0F;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.kauth-input-wrap .kauth-input { padding-right: 64px; }
.kauth-input::placeholder { color: #A1A1AA; }
.kauth-input:hover { border-color: #D4D4D8; }
.kauth-input:focus { border-color: #FFD836; box-shadow: 0 0 0 3px #FFEFC2; }
/* Browser autofill paints inputs blue; keep them white. */
.kauth-input:-webkit-autofill,
.kauth-input:-webkit-autofill:hover,
.kauth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    -webkit-text-fill-color: #0B0B0F;
    caret-color: #0B0B0F;
}
.kauth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset, 0 0 0 3px #FFEFC2;
}

.kauth-reveal {
    position: absolute;
    top: 6px;
    right: 6px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: 500 12px/1 "Kwik", "Poppins", system-ui, sans-serif;
    color: #52525B;
    cursor: pointer;
}
.kauth-reveal:hover { background: #F4F4F5; color: #0B0B0F; }
.kauth-reveal:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFEFC2; }

.kauth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.kauth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #3F3F46;
    cursor: pointer;
    user-select: none;
}
.kauth-check input {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid #D4D4D8;
    border-radius: 4px;
    background: #FFFFFF center / 12px 12px no-repeat;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s ease, border-color .15s ease;
}
.kauth-check input:checked {
    background-color: #0B0B0F;
    border-color: #0B0B0F;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.kauth-check input:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFEFC2; }

.kauth-link {
    border: 0;
    background: none;
    padding: 0;
    font: 500 13px/1.4 "Kwik", "Poppins", system-ui, sans-serif;
    color: #14B8A6;
    cursor: pointer;
    text-decoration: none;
}
.kauth-link:hover { text-decoration: underline; }
.kauth-link:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFEFC2; border-radius: 4px; }

.kauth-btn {
    width: 100%;
    height: 44px;
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    background: #0B0B0F;
    color: #FFFFFF;
    font: 600 14px/1 "Kwik", "Poppins", system-ui, sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color .15s ease;
}
.kauth-btn:hover { background: #27272A; }
.kauth-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFEFC2; }
.kauth-btn:disabled { opacity: .4; cursor: not-allowed; }
.kauth-btn-secondary { background: #FFFFFF; color: #0B0B0F; border: 1px solid #E8E8EA; }
.kauth-btn-secondary:hover { background: #F4F4F5; }

.kauth-alert {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #FEE2E2;
    color: #DC2626;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}
.kauth-callout {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #FFF8E1;
    color: #52525B;
    font-size: 12px;
    line-height: 1.5;
}
.kauth-callout strong { display: block; color: #0B0B0F; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.kauth-alert.hidden, .kauth-callout.hidden { display: none; }

.kauth-foot { margin: 24px 0 0; font-size: 12px; color: #71717A; text-align: center; }

/* Signed-in boot screen: shown instead of the login form while the
   dashboard data loads, so a refresh never looks like a sign-out. */
.kauth-boot {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #F6F6F7;
    font-family: "Kwik", "Poppins", system-ui, sans-serif;
}
.kauth-boot.hidden { display: none; }
.kauth-boot img { height: 32px; width: auto; }
.kauth-boot-track { width: 120px; height: 3px; border-radius: 999px; background: #E8E8EA; overflow: hidden; }
.kauth-boot-bar { width: 40%; height: 100%; border-radius: 999px; background: #FFD836; animation: kauthSlide 1.1s ease-in-out infinite; }
.kauth-boot-text { font-size: 13px; font-weight: 500; color: #71717A; }
@keyframes kauthSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
    .kauth-boot-bar { animation: none; width: 100%; opacity: .6; }
}