/* ==========================================================================
   p-h-join.css -- THE SIGN-IN SHEET

   WHY IT EXISTS. Measured over thirty days: 2,310 people opened the app and 22
   made an account. The app never asks. The one and only moment it asks is after
   somebody has chosen their matches and pressed Continue -- and at that moment
   the whole page is replaced by /connect/, so the thing they were building
   disappears from the screen.

   This is that moment, without the disappearance. The ticket stays behind the
   sheet, Google and Facebook are one tap and never leave the page, and email
   goes where it always went.

   IT IS A SHEET, NOT A DIALOG. It comes up from the bottom edge, it can be
   pushed back down with a finger, and the veil and Escape both close it.
   Nothing here traps anybody: a reader who did not want it is one swipe from
   being where they were.

   EVERY COLOUR IS A TOKEN. This file is on all twenty-four palettes.
   ========================================================================== */

.xw_join_bg{
    position: fixed;
    inset: 0;
    z-index: 10000;
    /* a scrim is the absence of light, not a palette colour -- the same
       decision style.css makes for its own overlays */
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity 200ms ease-out;
}
.xw_join_bg.on{ opacity: 1; }

.xw_join{
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 10001;
    box-sizing: border-box;
    max-width: 520px;
    margin: 0 auto;
    padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--color-2);
    border: 1px solid var(--color-4);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    color: var(--color-9);
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
    /* A SHORT PHONE STILL SEES ALL OF IT. Measured at 390x844 the sheet is
       700px, which fits; a 667-tall screen is the common one it would not, and
       a reader who cannot reach "Not now" is trapped by the thing that was
       built so they would not be. */
    max-height: 88vh;
    overflow-y: auto;
    /* `pan-y` and not `none`: the drag below only takes the gesture while the
       sheet is scrolled to its top, so the rest of the time the finger has to
       belong to the sheet's own scrolling. */
    touch-action: pan-y;
    overscroll-behavior: contain;
}
.xw_join.on{ transform: translateY(0); }

/* THE HANDLE. It is what tells a reader the sheet can be pushed away, and on a
   phone it is the only part of this that says so before they try. */
.xw_join_h{
    width: 40px;
    height: 4px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: var(--color-5);
}

.xw_join_t{
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
.xw_join_s{
    margin: 0 0 20px;
    color: var(--color-7);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* THE WAYS IN ARE THE SITE'S OWN BUTTONS.

   `.button`, `.button.lo_gp` and `.button.lo_fb` live in style.css, which is on
   every page -- so the sheet uses them and arrives with the Google mark on
   white, the Facebook mark on blue and the product's own primary pill, exactly
   as /connect/ has always drawn them. Nothing about their colour, their logo or
   their type is restated here.

   The first version of this sheet drew its own plain pills instead, and the
   owner spotted it in one glance. A hand-made copy of something the codebase
   already has is worse than the thing itself, because it is the one that stops
   matching when the real one changes.

   WHAT IS RESTATED IS GEOMETRY, NOT IDENTITY. style.css draws a `.button` at a
   fixed 200px centred, which is right in a column and wrong across a sheet, and
   `.lo_gp` carries a `margin-top:20px!important` written for a stack that began
   with it. */
.xw_join_w{ display: flex; flex-direction: column; gap: 10px; }

.xw_join_w .button{
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    top: 0;
}

/* the two social buttons fade themselves in from style.css; inside a sheet that
   is already animating in, a second animation reads as a stutter */
.xw_join_w .button.lo_gp,
.xw_join_w .button.lo_fb{
    opacity: 1;
    animation: none;
}

.xw_join_or{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    color: var(--color-6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.xw_join_or::before,
.xw_join_or::after{
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-4);
}

/* the way out, said plainly. A sheet that can only be dismissed by guessing is
   a sheet that traps. */
.xw_join_x{
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-6);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.xw_join_x:hover{ color: var(--color-9); }

@media (prefers-reduced-motion: reduce){
    .xw_join, .xw_join_bg, .xw_join_w .button, .xw_join_x{ transition: none; }
}