/* ==========================================================================
   EasyHomeWatch — sign in / create account screens

   Loaded *after* saas-landing.css, which owns the design tokens and the base
   button styles. Keeping the tokens in one file rather than copying them here
   is what stops the auth screens drifting away from the marketing site the
   first time a colour changes.
   ========================================================================== */

/* Split layout ------------------------------------------------------------ */

body.hw-auth { min-height: 100vh; }

.hw-auth-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    /* Explicit single 1fr row: an auto row sizes to its content, which left the
       photo panel short of the viewport on a tall window. */
    grid-template-rows: 1fr;
    gap: 20px;
    min-height: 100vh;
    padding: 20px;
}

/* Photo panel. Same inset rounded frame as the marketing hero, so arriving
   here from the landing page feels like the same product. */
.hw-auth-media {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: #1c1e1f;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    min-height: 520px;
}
/* Explicit layering: photo at the back, scrim over it, content on top. Without
   the z-index here the img picks up z-index 2 from the `> *` rule below and
   paints over its own scrim, which silently disables the overlay entirely. */
.hw-auth-media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.hw-auth-media::after {
    content: ""; position: absolute; inset: 0;
    /* Weighted towards the two bands that actually carry text — the brand at the
       top and the pitch block from roughly two-thirds down — since these photos
       have bright sky up top and lit windows through the middle. */
    background:
        linear-gradient(180deg,
            rgba(17,20,24,.5) 0%,
            rgba(17,20,24,.14) 32%,
            rgba(17,20,24,.55) 66%,
            rgba(17,20,24,.88) 100%);
    z-index: 1;
}
.hw-auth-media > *:not(img) { position: relative; z-index: 2; }

.hw-auth-media .hw-brand .name { color: #fff; }
.hw-auth-media .hw-brand .name span { color: rgba(255,255,255,.7); }
.hw-auth-media .hw-brand .mark { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); }

.hw-auth-pitch h2 {
    color: #fff; font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 14px;
}
.hw-auth-pitch p { color: rgba(255,255,255,.78); font-size: 15.5px; max-width: 420px; }
.hw-auth-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hw-auth-points li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.86); font-size: 14.5px; }
.hw-auth-points .tick {
    width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px;
    background: rgba(255,255,255,.16); color: #fff;
    display: flex; align-items: center; justify-content: center;
}

/* Form panel -------------------------------------------------------------- */

.hw-auth-panel {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.hw-auth-form { width: 100%; max-width: 420px; }
.hw-auth-form.wide { max-width: 480px; }

/* Shown only when the photo panel is not, so the page always carries the mark. */
.hw-auth-form .hw-brand { display: none; margin-bottom: 28px; }

.hw-auth-form h1 { font-size: 30px; margin: 0 0 8px; }
.hw-auth-form .sub { font-size: 15px; color: var(--hw-body); margin: 0 0 30px; }

/* Fields ------------------------------------------------------------------ */

.hw-field { margin-bottom: 18px; }
.hw-field label {
    display: block; font-size: 13.5px; font-weight: 500;
    color: var(--hw-ink); margin-bottom: 7px;
}
.hw-field input[type=text],
.hw-field input[type=email],
.hw-field input[type=password],
.hw-field input[type=tel] {
    width: 100%; padding: 12px 15px;
    background: var(--hw-surface-2);
    border: 1px solid var(--hw-line);
    border-radius: 12px;
    font-family: var(--hw-font); font-size: 15px; font-weight: 400; color: var(--hw-ink);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.hw-field input::placeholder { color: var(--hw-faint); }
.hw-field input:focus {
    outline: none; background: var(--hw-surface);
    border-color: var(--hw-primary);
    box-shadow: 0 0 0 3px rgba(52, 61, 65, .12);
}
.hw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.hw-auth-form .hw-btn { width: 100%; margin-top: 4px; }

/* Slug picker (signup only) ------------------------------------------------ */

.hw-slug-row { display: flex; align-items: stretch; }
.hw-slug-prefix {
    display: flex; align-items: center; padding: 0 12px;
    background: var(--hw-surface-2);
    border: 1px solid var(--hw-line); border-right: 0;
    border-radius: 12px 0 0 12px;
    font-size: 14px; color: var(--hw-faint); white-space: nowrap;
}
.hw-slug-row input { border-radius: 0 12px 12px 0 !important; }
.hw-slug-status { font-size: 13px; min-height: 18px; margin-top: 7px; color: var(--hw-body); }
.hw-slug-status.ok { color: #2f9e68; }
.hw-slug-status.taken { color: #d1453b; }

/* Checkbox ---------------------------------------------------------------- */

.hw-check { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.hw-check input { width: 16px; height: 16px; accent-color: var(--hw-primary); margin: 0; }
.hw-check label { font-size: 14px; color: var(--hw-body); margin: 0; font-weight: 400; }

/* Validation -------------------------------------------------------------- */

.validation-summary-errors, .field-validation-error {
    color: #d1453b; font-size: 13.5px; margin-bottom: 16px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-errors:empty, .field-validation-error:empty { display: none; margin: 0; }

/* Account-type chooser ----------------------------------------------------- */

.hw-choice {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--hw-surface); border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-md); padding: 18px 20px; margin-bottom: 12px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.hw-choice:hover { border-color: #d8d9de; transform: translateY(-2px); box-shadow: var(--hw-shadow-md); }
/* The customer route isn't a link because there is nowhere here to send them —
   their portal only exists on their own provider's site. */
.hw-choice.is-static { background: var(--hw-surface-2); }
.hw-choice .ico {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    background: var(--hw-surface-2); border: 1px solid var(--hw-line-soft);
    color: var(--hw-ink); display: flex; align-items: center; justify-content: center;
}
.hw-choice.is-static .ico { background: var(--hw-surface); }
.hw-choice .txt { display: flex; flex-direction: column; gap: 4px; }
.hw-choice .t { font-size: 15px; font-weight: 500; color: var(--hw-ink); }
.hw-choice .s { font-size: 13.5px; color: var(--hw-body); line-height: 1.55; }
.hw-choice .go { flex: none; color: var(--hw-faint); margin-top: 10px; }
a.hw-choice:hover .go { color: var(--hw-ink); }

/* Footer links ------------------------------------------------------------ */

.hw-auth-alt { margin-top: 26px; font-size: 14.5px; color: var(--hw-body); text-align: center; }
.hw-auth-alt a { color: var(--hw-ink); font-weight: 500; }
.hw-auth-alt a:hover { text-decoration: underline; }
.hw-auth-back { display: block; text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--hw-faint); }
.hw-auth-back:hover { color: var(--hw-body); }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 980px) {
    /* Below this the photo stops being a panel and becomes a short banner —
       dropping it entirely would leave a bare form on a blank page. */
    .hw-auth-grid { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
    .hw-auth-media { min-height: 0; padding: 28px; }
    .hw-auth-pitch p, .hw-auth-points { display: none; }
    .hw-auth-pitch h2 { font-size: 22px; margin: 18px 0 0; }
    .hw-auth-panel { padding: 24px 8px 40px; }
}

@media (max-width: 560px) {
    .hw-auth-grid { padding: 12px; gap: 12px; }
    /* On a phone the banner earns less than the vertical space it costs, so the
       brand moves inline above the form instead. */
    .hw-auth-media { display: none; }
    .hw-auth-form .hw-brand { display: inline-flex; }
    .hw-auth-form h1 { font-size: 26px; }
    .hw-field-row { grid-template-columns: 1fr; }
}

/* Signup wizard steps (NOT .hw-step — that is the landing page's card in
   saas-landing.css, which loads alongside this file) -------------------------------------------------------------- */

.hw-steps-bar {
    list-style: none; display: flex; align-items: center; gap: 10px;
    margin: 0 0 26px; padding: 0;
}
.hw-steps-bar li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 400; color: var(--hw-faint);
    transition: color .25s ease;
}
.hw-steps-bar li + li::before {
    content: ""; width: 22px; height: 1px; background: var(--hw-line); margin-right: 2px;
}
.hw-steps-bar .dot {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--hw-surface-2); border: 1px solid var(--hw-line);
    font-size: 12.5px; font-weight: 500; color: var(--hw-faint);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hw-steps-bar li.is-current { color: var(--hw-ink); font-weight: 500; }
.hw-steps-bar li.is-current .dot { background: var(--hw-primary); border-color: var(--hw-primary); color: #fff; }
.hw-steps-bar li.is-done { color: var(--hw-body); }
.hw-steps-bar li.is-done .dot { background: var(--hw-accent); border-color: var(--hw-accent); color: #fff; }

.hw-wizard-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.hw-wizard-step[hidden] { display: none; }
/* Only animates coming in, so stepping back doesn't feel like starting over. */
.hw-wizard-step:not([hidden]) { animation: hw-step-in .32s cubic-bezier(.16,.8,.3,1); }
@keyframes hw-step-in {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: none; }
}
.hw-wizard-actions { display: flex; gap: 10px; }
.hw-wizard-actions .hw-btn { flex: 1; }
.hw-field input.is-invalid { border-color: #d1453b; background: #fdf7f7; }

/* "Creating…" hand-off ------------------------------------------------------ */

.hw-creating {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: var(--hw-bg);
    animation: hw-creating-in .3s ease;
}
.hw-creating[hidden] { display: none; }
@keyframes hw-creating-in { from { opacity: 0; } to { opacity: 1; } }

.hw-creating-card { text-align: center; max-width: 380px; width: 100%; }

.hw-creating-mark {
    position: relative; width: 68px; height: 68px; margin: 0 auto 26px;
    border-radius: 20px; background: var(--hw-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.hw-creating-mark svg { width: 30px; height: 30px; }
/* A ring that keeps turning: the only moving part, so it reads as "working" without
   pretending to be a progress bar that knows how far along it is. */
.hw-creating-ring {
    /* A circle, not a rounded square: a spinning squircle border reads as a wobble rather
       than a rotation. Inset far enough that the 68px mark's diagonal (~96px) still clears
       the ring, so the corners never poke through it. */
    position: absolute; inset: -14px; border-radius: 50%;
    border: 2px solid var(--hw-line);
    border-top-color: var(--hw-primary);
    animation: hw-spin 1s linear infinite;
}
@keyframes hw-spin { to { transform: rotate(360deg); } }

.hw-creating h2 { font-size: 22px; margin: 0 0 22px; }

.hw-creating-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.hw-creating-steps li {
    display: flex; align-items: center; gap: 11px;
    font-size: 14.5px; color: var(--hw-faint);
    opacity: .45; transition: opacity .3s ease, color .3s ease;
}
.hw-creating-steps li::before {
    content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
    border: 1.5px solid var(--hw-line); background: var(--hw-surface);
    transition: background-color .3s ease, border-color .3s ease;
}
.hw-creating-steps li.is-active { opacity: 1; color: var(--hw-ink); }
.hw-creating-steps li.is-active::before { border-color: var(--hw-primary); }
.hw-creating-steps li.is-done { opacity: 1; color: var(--hw-body); }
.hw-creating-steps li.is-done::before {
    background: var(--hw-accent); border-color: var(--hw-accent);
    /* Tick drawn with a background image so the marker needs no extra element. */
    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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 11px; background-position: center; background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .hw-wizard-step:not([hidden]), .hw-creating { animation: none; }
    .hw-creating-ring { animation-duration: 3s; }
}