/* ------------------------------------------------------------------------
   auth.css -- the shared Hangar67 identity card.

   Used by SignIn.cshtml, Register.cshtml, RegisterThanks.cshtml and
   NewPassword.cshtml. These
   styles used to live inline in SignIn.cshtml only, which is why Register
   drifted into looking like a different product. Keeping them in one file
   is the thing that stops that happening again: change the card here and
   every auth surface moves together.

   The class names keep their original "signin-" prefix so the existing
   SignIn markup did not have to be rewritten to adopt this file. Read them
   as "auth card", not "the sign-in page".

   Referenced from each page's @section head via CacheBuster.Get(), so a
   deploy of this file busts its own cache. There is deliberately no .min
   variant and no bundleconfig entry: H67Web is deployed by copying source
   files, and an unbundled file needs no build step to ship.
   ------------------------------------------------------------------------ */

.signin-page {
    font-family: Inter, -apple-system, sans-serif;
    max-width: 420px;
    margin: 0 auto;
    padding: 48px 0 64px;
}

.signin-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 4px solid #8a3995;
    border-radius: 10px;
    padding: 36px 32px 32px;
}

.signin-card h1 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin: 0 0 4px;
}

.signin-card .signin-sub {
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    margin: 0 0 28px;
}

/* ---- fields ---- */

.signin-card .form-group {
    margin-bottom: 16px;
}

.signin-card .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.signin-card .form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: Inter, -apple-system, sans-serif;
    font-size: 14px;
    color: #374151;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.signin-card .form-input:focus {
    border-color: #8a3995;
}

.signin-card .form-input::placeholder {
    color: #9ca3af;
}

/* Field-level error state. Register marks the specific input that failed
   rather than only listing errors at the top of the card. */
.signin-card .form-input.has-error {
    border-color: #dc2626;
    background: #fffafa;
}

/* ---- password reveal ----

   Opt-in by markup: none of this applies unless a page wraps its password input
   in .password-field and puts a .password-reveal button beside it. SignIn
   carries neither, so it renders exactly as it did before -- adding the rules to
   the shared file means it *can* adopt the toggle later by changing only its own
   markup, not that it silently changed today.

   The control is neutral grey rather than brand purple on purpose. The one
   purple thing on this card should stay the Create Account button; a purple eye
   sitting a few pixels above it would be a second accent competing with the
   primary, which is the problem this pass is trying to remove, not add to. */

.signin-card .password-field {
    position: relative;
}

.signin-card .password-field .form-input {
    padding-right: 52px;
}

/* Full height of the input and 46px wide, so the tap target clears the 44px
   minimum rather than being an 18px icon with dead space around it. */
.signin-card .password-reveal {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0 8px 8px 0;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.signin-card .password-reveal:hover {
    color: #374151;
    background: #f3f4f6;
}

/* The keyboard focus state is a filled purple-tint pill, NOT a ring, and that is
   forced rather than chosen: site.css:1862 sets

       .btn:focus, button:focus { box-shadow: none !important; outline: none !important; }

   site-wide, so neither an outline nor a box-shadow ring can render on any
   button on any page. Verified on the live page -- an inset ring declared here
   was silently dropped. Background and colour are the affordances left, so they
   carry the focus state; do not re-add a ring here expecting it to show. */
.signin-card .password-reveal:focus {
    color: #8a3995;
    background: #f3e8f9;
}

.signin-card .password-reveal svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.signin-card .password-reveal .icon-eye-off {
    display: none;
}

.signin-card .password-reveal.is-revealed .icon-eye {
    display: none;
}

.signin-card .password-reveal.is-revealed .icon-eye-off {
    display: block;
}

.signin-card .field-hint {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
}

/* ---- buttons ----

   .btn-signin is also used on an <a>: NewPassword's success state is a link to
   the sign-in page, not a form. A <button> already centres its label, draws no
   underline and sizes to its border box, so the last three properties below
   change nothing on SignIn or Register; they are what make the link render as
   the same button. */

.signin-card .btn-signin {
    display: block;
    width: 100%;
    padding: 13px 28px;
    background: #8a3995;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: Inter, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.signin-card .btn-signin:hover {
    background: #7a2d85;
    color: #fff;
    text-decoration: none;
}

/* Keeps the site's link focus colour off the purple button; a <button>'s
   label is white here already. */
.signin-card .btn-signin:focus {
    color: #fff;
    text-decoration: none;
}

.signin-card .btn-register {
    display: block;
    width: 100%;
    padding: 12px 28px;
    background: transparent;
    color: #8a3995;
    border: 2px solid #8a3995;
    border-radius: 8px;
    font-family: Inter, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    box-sizing: border-box;
}

.signin-card .btn-register:hover {
    background: #8a3995;
    color: #fff;
}

.signin-card .forgot-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: #8a3995;
    text-decoration: none;
    font-weight: 500;
}

.signin-card .forgot-link:hover {
    text-decoration: underline;
}

/* ---- divider ---- */

.signin-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

/* ---- alerts ---- */

.signin-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-family: Inter, -apple-system, sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

.signin-alert-error {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.signin-alert-error a {
    color: #dc2626;
    font-weight: 600;
    text-decoration: underline;
}

.signin-alert-info {
    background: #f3e8f9;
    color: #8a3995;
    border: 1px solid #e9d5f5;
}

.signin-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
    text-align: left;
}

/* ---- social providers ---- */

.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: Inter, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-social:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
    text-decoration: none;
}

.btn-social svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ---- register-only tightening ----

   .register-card is a modifier on top of .signin-card, used so this pass could
   tighten Register without moving SignIn a pixel. Anything that should apply to
   both auth surfaces belongs on .signin-card above, not here.

   On SignIn the social block is followed by a divider and the "Create a free
   account" button, so its bottom margin is separating two things. On Register
   the social block is now the last element in the card, so that margin is not
   separating anything -- it is 20px of dead space stacked on top of the card's
   own 32px bottom padding. Dropping it is what takes the card from 17px past
   the fold to entirely above it at 390x844. */

.register-card .social-buttons {
    margin-bottom: 0;
}

/* ---- two-step register (#121) ----

   Step 2 of Register shows the address from step 1 read-only, with a Change
   control beside its label, then first and last name side by side and the
   Weekly Update opt-in. All opt-in by markup: SignIn uses none of these
   classes, so it renders exactly as before. */

.signin-card .form-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.signin-card .form-label-row .form-label {
    margin-bottom: 0;
}

/* A <button>, because it submits the Change form, but it reads as a text link:
   it is a way back, not a second primary action. */
.signin-card .field-link {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #8a3995;
    cursor: pointer;
}

.signin-card .field-link:hover {
    text-decoration: underline;
}

/* site.css sets `.btn:focus, button:focus { outline: none !important; }` site-wide
   (see the reveal control above), so this outline needs !important to show at all.
   A keyboard user still has to be able to see where Change is. */
.signin-card .field-link:focus-visible {
    outline: 2px solid #8a3995 !important;
    outline-offset: 2px;
    border-radius: 2px;
}

.signin-card .form-input[readonly] {
    background: #f9fafb;
    color: #6b7280;
}

.signin-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* label.form-check sets its own weight and margin because Bootstrap's global
   label rule would otherwise make the whole sentence bold. */
.signin-card .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #4b5563;
    cursor: pointer;
}

.signin-card .form-check input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: #8a3995;
}

/* Two name fields side by side get too narrow on the smallest phones. */
@media (max-width: 400px) {
    .signin-card .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ------------------------------------------------------------------------
   Welcome landing (RegisterThanks.cshtml)

   Wider than the auth card because it carries next-step cards rather than a
   form, but it inherits the same type, palette and radius so arriving there
   from Register does not feel like landing on a different site.
   ------------------------------------------------------------------------ */

.welcome-page {
    font-family: Inter, -apple-system, sans-serif;
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 0 64px;
}

.welcome-head {
    text-align: center;
    margin-bottom: 32px;
}

.welcome-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f3e8f9;
    color: #8a3995;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    line-height: 1;
}

.welcome-head h1 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.welcome-head p {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}

.welcome-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.welcome-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px 22px;
    text-decoration: none;
    transition: all 0.15s;
}

.welcome-card:hover {
    border-color: #8a3995;
    box-shadow: 0 2px 10px rgba(138, 57, 149, 0.09);
    text-decoration: none;
}

.welcome-card h2 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px;
}

.welcome-card p {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 14px;
    line-height: 1.5;
}

.welcome-card .welcome-cta {
    font-size: 14px;
    font-weight: 600;
    color: #8a3995;
}

/* The marketing opt-in. Deliberately a plain single-click form rather than a
   checkbox plus save: it replaces a checkbox that used to sit on the register
   form, so it has to cost about as little as ticking a box did. */
.welcome-optin {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #8a3995;
    border-radius: 10px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.welcome-optin h2 {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
}

.welcome-optin p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.welcome-optin button {
    flex-shrink: 0;
    padding: 10px 20px;
    background: #8a3995;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: Inter, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.welcome-optin button:hover {
    background: #7a2d85;
}

.welcome-note {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.welcome-note a {
    color: #8a3995;
    font-weight: 500;
}

/* ---- mobile ---- */

@media (max-width: 767px) {
    .signin-page {
        padding: 24px 16px 48px;
    }
    .signin-card {
        padding: 28px 20px 24px;
    }
    .signin-card h1 {
        font-size: 22px;
    }
    .welcome-page {
        padding: 24px 16px 48px;
    }
    .welcome-head h1 {
        font-size: 23px;
    }
    .welcome-next {
        grid-template-columns: 1fr;
    }
    .welcome-optin {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .welcome-optin button {
        width: 100%;
    }
}