/* ==========================================================================
   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; }

/* ON A DESKTOP IT IS A DIALOG. ON A PHONE IT IS A SHEET.

   A sheet rises from the bottom edge because that is where the thumb is. On a
   1920 screen the same box is a wide strip pinned to the bottom with its
   buttons stretched across it, which is what the first version shipped and
   what the owner saw straight away. The thumb argument is not true there, so
   neither is the shape.

   WRITTEN DESKTOP FIRST, which is how the rest of this site is written:
   style.css and p-h.css break at max-width 820px and nowhere else, so the
   dialog is the base and the sheet is what the phone asks for. One breakpoint,
   the site's own. */
.xw_join{
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10001;
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 360px;
    padding: 24px 24px 20px;
    background: var(--color-2);
    border: 1px solid var(--color-4);
    border-radius: 18px;
    color: var(--color-9);
    opacity: 0;
    transform: translate(-50%, -44%);
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease-out;
    /* A SHORT SCREEN 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;
    overscroll-behavior: contain;
}
.xw_join.on{
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* 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. It is hidden
   on a desktop, where it would promise a gesture that does nothing. */
.xw_join_h{
    display: none;
    width: 40px;
    height: 4px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: var(--color-5);
}

/* ---- and below the site's own breakpoint, the sheet ---------------------- */
@media only screen and (max-width: 820px){
    .xw_join{
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        max-width: 520px;
        margin: 0 auto;
        padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        opacity: 1;
        transform: translateY(100%);
        transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
        /* `pan-y` and not `none`: the drag 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;
    }
    .xw_join.on{
        opacity: 1;
        transform: translateY(0);
    }
    .xw_join_h{ display: block; }
}

.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; }
}