/* The page used to be ~900px wide inside a 390px viewport: #white_bg alone was over 1100px, and
   the football and the sign-up card each hung past the right edge too. You could drag the whole
   thing sideways onto empty background. All three are fixed below at the widths where they
   overflowed, so this is a backstop, not the fix - don't rely on it and let new overflow in.
   Note it is genuinely only a backstop: once the page is tall enough to scroll vertically the
   root's clip resolves to overflow-x: hidden, which is the same thing main.css already asks for
   on body and the same thing iOS Safari has never honoured properly. */
html {
    overflow-x: clip;
}

body {
    margin: 0 auto;
    max-width: 1024px;
    padding: 0;
}

#white_bg {
    width: 50%;
    background-color: white;
    position: absolute;
    min-width: 60.5%;
    height: 1000px;
    top: 0;
    left: 0;
    z-index: -2;
    transform: skewX(-14deg);
    transform-origin: top right;
}

/* Every <picture> on this page is a format switch and nothing else, so take it out of the box
   tree: without this the wrapper round the football graphic would be an empty inline box in
   #col_1's flow - the img inside it is absolutely positioned, so the box would contribute a
   stray line's height above the content and push the whole column down. */
picture {
    display: contents;
}

.football_graphic {
    position: absolute;
    top: 16px;
    left: calc((100vw - 1024px)/2 + 140px);
    z-index: -1;
    /* The img carries width/height attributes to reserve its box, so the max-width the narrow
       breakpoint puts on it below needs a height that follows - otherwise the intrinsic 366px
       height survives the clamp and the football is drawn as an ellipse. It was 320x366 on a
       412px screen, i.e. every phone. Same fix, same reason, as .iphone img. */
    height: auto;
}

h1 {
    line-height: 58px;
}

.content {
    margin: 96px auto 64px 64px;
    max-width: 410px;
}

/*
 * The line under the continuation hero, shown only to somebody arriving from /predict-scores with
 * a gameweek already filled in. @see private/views/landing/join.php
 *
 * It sits where nothing sits on the ordinary hero - between the h1 and .top_features - so it
 * carries the gap itself rather than leaving one behind when the branch is not taken. Sized
 * between the h1 and .feature_text: it is the sentence that explains the heading, and at
 * .feature_text's 18px it would read as a fourth bullet that had lost its icon.
 */
.hero_continues {
    margin: 12px 0 0;
    max-width: 400px;
    font-size: 19px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.top_features {
    margin-top: 16px;
}

.feature {
    display: flex;
    margin: 10px 0px;
    max-width: 400px;
    height: 54px;
}

.feature_text {
    margin: auto 0;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 18px;
    line-height: 24px;
    max-width: 310px;
}

.circle {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    margin: auto 24px auto 0;
}

.circle i {
    line-height: 48px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.feature:nth-of-type(1) .circle {
    background-color: var(--green400);
    color: var(--green100);
    font-size: 26px;
}
.feature:nth-of-type(2) .circle {
    background-color: var(--teal400);
    color: var(--teal100);
    font-size: 20px;
}

.feature:nth-of-type(3) .circle {
    background-color: var(--yellow500);
    color: var(--yellow100);
    text-shadow: 0 2px 4px rgba(0,0,0,0.16);
}

.signup_btn {
    margin: 30px 0px;
    max-width: 300px;
}

/*
 * The signup count under the hero button. @see private/views/landing/join.php
 *
 * The negative top margin is not a nudge: .signup_btn carries `margin: 30px 0px`, and this line
 * belongs against the button rather than a paragraph's distance below it. Adjacent block siblings
 * collapse their margins, so 30 and -22 give 8px of gap - .content is a plain block, which is what
 * makes that arithmetic hold. The 30px bottom stays, so .member_text sits where it always did and
 * the layout below is unchanged whether this line renders or not.
 *
 * grey700, the same as .member_text: 15px grey on white, and grey600 is only 3.5:1.
 */
.signup_proof {
    margin: -22px 0 30px;
    max-width: 300px;
    color: var(--grey700);
    font-size: 15px;
    line-height: 20px;
}

.member_text {
    /* 16px on white, so grey600's 3.5:1 isn't enough - grey700 is 4.8:1. */
    color: var(--grey700);
    font-size: 16px;
    letter-spacing: 1px;
}

/* The min-height is what holds .landing_more clear of #white_bg, so it is set from that panel's
   geometry rather than picked by eye. The panel is absolute at top: 0 with a hardcoded 1000px
   height, skewed -14deg about its top-right corner, so its diagonal edge is still crossing the
   page at y=936 - which is exactly where "What is PLPredictor?" used to start. The heading was
   sliced in half by the diagonal and the first paragraph straddled it.

   header is 128px, so this container has to run to 1000px on its own to put the prose past the
   panel's bottom edge: 904 = 1000 - 128 + 32px of air. Content taller than that (which happens
   around 810px, where the hero wraps harder) only pushes the prose further down, never back up
   into the panel.

   If #white_bg's 1000px ever changes, this has to move with it. Below 800px the question goes
   away: the container stacks and the panel is pinned to the viewport instead. */
.flex-container {
    display: flex;
    min-height: 904px;
}

#col_1 {
    margin-right: 20px;
}

#col_2 {
/*    background-color: red;*/
    margin-left: auto;
    margin-right: 0;
/*    text-align: right;*/
/*    justify-content: flex-end;*/
}

.footer_content {
/*    margin-top: 40px;*/
/*    position: absolute;*/
/*    height: 100px;*/
/*    width: 100%;*/
/*    left: 0;*/
    background-color: var(--grey900);
    min-height: 180px;
    width: 100vw;
    margin-left: calc((1000px - 100vw) / 2);
    left: 0;
}

/* The below-the-fold prose block. Constrained to a reading measure and centred rather than
   inheriting #col_1's 410px column, because it runs the full width of the page under both
   columns and 410px of body text under a 1024px page reads as a mistake.

   It is deliberately plain: no card, no shadow, no background. #white_bg is a skewed absolute
   element 1000px tall sitting at z-index -2, so anything with its own background down here
   collides with the diagonal edge at some viewport width. Text on the page background does not. */
.landing_more {
    max-width: 680px;
    margin: 0 auto;
    padding: 8px 16px 56px;
    color: var(--grey900);
    line-height: 1.6;
}

.landing_more h2 {
    margin: 32px 0 8px;
    font-size: 20px;
    color: var(--green900);
}

.landing_more h2:first-child {
    margin-top: 0;
}

.landing_more p {
    margin: 0 0 12px;
}

.landing_more a {
    color: var(--green700);
}

.landing_more_cta {
    margin-top: 28px;
    text-align: center;
}

/* The button is the same .btn .btn_1 .signup_btn as the one in the hero, which is styled for a
   410px column and goes full-width. Down here that is a 680px-wide button, so cap it. */
.landing_more_cta .signup_btn {
    display: inline-block;
    min-width: 240px;
}

/* Replaces `footer { background-color: white }`, which dressed the bare <footer> of an older
   design that no longer renders here. @see public/css/footer.css

   The footer's dark band stops at the 1024px column <body> is capped to on this page, rather
   than reaching the window edges the way it does everywhere else. That is deliberate, after
   trying it the other way: main.css gives body `overflow-x: hidden`, so a child pulled wider
   with `margin-left: calc(50% - 50vw)` is measured at the full window width and then painted
   clipped to the column - the element reports 1440px and the background still stops at 1232px.
   Relaxing that clip is not worth it for a footer; see the note at the top of this file for how
   much horizontal overflow this page used to have. The band lines up with the content column
   above it, which is the one width everything else on the page shares.

   The phone case is different and is fixed: below 600px body takes 10px of side padding (not
   margin, deliberately - see the media query at the end of this file), and a -10px margin
   reaches the body's border box exactly, so it bleeds without overflowing anything. */
.site_footer {
    margin-left: 0;
    margin-right: 0;
}
@media screen and (max-width: 600px) {
    .site_footer {
        margin-left: -10px;
        margin-right: -10px;
    }
}

#week_num {
    height: 0px;
}

.dark {
    background-color: var(--grey900) !important;
}
/* The handset the screenshot sits in. It was a flat black rectangle with a 20px radius, a
   16px/9px bezel and square-cornered glass inside it, which read as a picture on a black
   background rather than a phone. Three things fix that, and they are the three things a real
   handset has:

   - An even bezel. The uneven one was the loudest tell; no phone has a chin twice its cheeks.
   - Concentric corners. The screen's radius is the body's minus the bezel, so the two curves
     are parallel. Square glass inside a rounded shell is the second loudest tell.
   - An edge that catches light. The rim highlight and the shadow underneath are what make it
     read as an object sitting on the page.

   No notch or dynamic island: at this bezel there is no room for one off-screen, and an
   on-screen island would land on the RESULTS heading, which has only ~29px of clear gradient
   above it in the shot. A slightly wrong island is worse than none. */
.iphone {
    --bezel: 10px;
    /* Containing block for the four side buttons, which hang off the left and right edges. */
    position: relative;
    background: linear-gradient(158deg, #48484a 0%, #1c1c1e 20%, #000 58%, #2c2c2e 100%);
    padding: var(--bezel);
    border-radius: 42px;
    box-shadow:
        /* The lit top edge of the rim, then the body's own shadow on the page: a tight contact
           shadow under it and a wide soft one further out. */
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 2px 6px rgba(0, 0, 0, 0.22),
        0 18px 38px -10px rgba(0, 0, 0, 0.45);
    margin-left: auto;
    margin-right: 0;
}
/* Descendant, not child: the shot is wrapped in a <picture> so WebP-capable browsers take the
   half-size encode, and <picture> sits between .iphone and the img. */
.iphone img {
    display: block;
    max-width: 360px;
    /* The img carries width/height attributes to reserve its box, so it needs height: auto or
       the intrinsic 1380px height would survive the max-width and stretch it. */
    height: auto;
    /* Body radius minus the bezel, so the glass curves parallel to the shell instead of sitting
       square inside it. */
    border-radius: calc(42px - var(--bezel));
}

/* The side buttons: action button, volume up and volume down down the left edge, the long side
   button on the right. Without them the shell was a rounded rectangle, and a rounded rectangle
   with a screenshot in it is a picture frame - the buttons are the silhouette detail that says
   handset before anyone reads the screen.

   Four buttons at three different lengths means four boxes, and .iphone only has two pseudo-
   elements to give. Hence the empty .phone_buttons span in the view: it exists to lend its
   ::before and ::after, nothing more. It is `height: 0` so it contributes no line box - an
   ordinary inline span here would add a stray line's height to the bottom of the shell, inside
   the bezel, where it would read as a chin. It stays unpositioned on purpose, so its pseudo-
   elements resolve their percentages against .iphone like the other two rather than against the
   span, which is what makes all four scale together when the frame shrinks below 800px.

   Every offset is a percentage of the shell's height for that reason, taken off a real handset:
   the action button sits above the volume pair, and the side button opposite is roughly as long
   as both volume buttons together. */
.iphone::before,
.iphone::after,
.phone_buttons::before,
.phone_buttons::after {
    content: '';
    position: absolute;
    /* 4px wide with 3px of it clear of the shell: the 4th overlaps the body so there is no seam
       between button and edge. A real button stands about this proud relative to the body. */
    width: 4px;
}

.phone_buttons {
    display: block;
    height: 0;
}

/* Left edge. The shell's own gradient runs from 158deg, i.e. lit from the top left, so these are
   the buttons facing the light: pale on the outer face, falling away towards the body, with a lit
   top edge, a dark bottom edge and a contact shadow thrown onto the shell beside them. That trio
   is what reads as raised rather than as a notch cut into the frame. */
.iphone::before,
.phone_buttons::before,
.phone_buttons::after {
    left: -3px;
    border-radius: 2px 0 0 2px;
    background: linear-gradient(90deg, #78787a 0%, #525254 45%, #333335 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        1px 0 2px rgba(0, 0, 0, 0.5);
}

/* Right edge: the same button on the shaded side, so the gradient is mirrored and darker and the
   contact shadow falls the other way. */
.iphone::after {
    right: -3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(270deg, #6e6e70 0%, #4c4c4e 45%, #2e2e30 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        -1px 0 2px rgba(0, 0, 0, 0.5);
}

.phone_buttons::before { top: 17.5%; height: 6%; }   /* action button */
.phone_buttons::after  { top: 25.5%; height: 7.5%; } /* volume up */
.iphone::before        { top: 35%;   height: 7.5%; } /* volume down */
.iphone::after         { top: 27%;   height: 13%; }  /* side button */

/* SIGN UP */
#sign_up_card {
    max-width: 600px;   
    min-width: 320px;
    max-height: 480px;
    padding: 20px;
    margin: 90px auto 0 auto;
    z-index: 10;
    display: none;
    opacity: 0;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

.tab-container {
    display: flex;
    color: var(--grey500);
    cursor: pointer;
}
.tab {
    width: calc(50% + 20px);
    text-align: center;
    font-size: 18px;
    padding: 20px 0px 13px 0px;
    margin-top: -20px;
    background-color: var(--grey200);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;  
    user-select: none;
}
.tab:hover {
    background-color: var(--green200);
    cursor: pointer;
}
.tab:hover .tab_label {
    width: 80px;
    padding-bottom: 4px;
    margin: auto;
    border-bottom: 3px solid var(--grey400);
}
.tab-selected .tab_label, .tab-selected:hover .tab_label {
    width: 80px;
    padding-bottom: 4px;
    margin: auto;
    border-bottom: 3px solid var(--green400);
}

.tab-container .tab:nth-child(1) {
    border-top-left-radius: 12px;
    margin-left:-20px;
}
.tab-container .tab:last-child {
    border-top-right-radius: 12px;
    margin-right: -20px;
}
.tab-selected {
    color: var(--grey900);
    background-color: var(--grey100);
}

.form-container {
    font-size: 16px;
    margin: 0px;
    color: var(--grey700);
}

.form-container h2 {
    margin: 16px 0px 4px 0px;
    font-size: 25px;
    text-align: center;
    color: var(--grey900);
}

.g-recaptcha {
    display: inline-block;
}

#login-container #user_field, 
#login-container #l_pwd {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
#login-container #l_pwd {
    min-width: 250px;
    max-width: 250px;
    width: 60%;
}
#login-container #user_field {
    width: 75%;
    min-width: 270px;
    max-width: 500px;
}

form .invalid {
    border: 2px solid red;
}

form .btn {
    margin: 10px auto;
    max-width: 66%
}

/*
 * Consent line under the REGISTER button, replacing the old #checkbox.
 *
 * Small and quiet on purpose: it has to be legible and it has to be there, but it is not
 * competing with the button above it for attention.
 */
.consent {
    font-size: 13px;
    line-height: 1.5;
    color: var(--grey400);
    text-align: center;
    margin: 12px 0 0;
}
.consent a {
    color: var(--green500);
    text-decoration: underline;
}

.forgot {
    font-size: 14px;
    color: var(--grey400);
}

.half_width_field:nth-child(1) {
    margin-right: 8px;
}
.half_width_field:nth-child(2) {
    margin-left: 8px;
}
.no_account {
    float: left;
    position: relative;
    bottom: 40px;
    color: var(--grey400);
    cursor: pointer;
}
.no_account:hover {
    color: var(--green400);
}

#password_field-container {
    display: flex;
}

@media screen and (max-width: 1024px) {
    #white_bg {
/*        background-color: var(--red200);   */
    }
    .football_graphic {
        left: calc(20% + 10px);
        /* Paired with the left above: 100% - 20% - 10px is whatever room is left before the
           right edge. The football is 365px wide, so below about 470px it used to hang off the
           side and drag the document out with it; now it shrinks instead. No effect at all on
           wider screens, where the room already exceeds the intrinsic width. */
        max-width: calc(80% - 10px);
    }
    #white_bg {
        /* The calc grows the panel as the viewport narrows, which is right down to ~730px and
           then keeps going: at 700px it asked for 780px and put 80px of nothing to the right of
           the page. Capped at the viewport - the skewed edge stays on screen, which is the point
           of it. */
        min-width: min(calc(60% + (1060px - 100vw)), 100%);
    }
    .content {
        margin-left: 5vw;        
    }
    body {
        margin: auto 20px;
    }
}

@media screen and (max-width: 800px) {
    /* Below this the two columns can't sit side by side, and the phone used to be dropped
       altogether - which left mobile visitors, i.e. most of them, with no picture of the game at
       all. Stack it under the text instead: on a 390px screen it lands below the SIGN UP button,
       so the fold is unchanged and only people who scroll for it pay for it. */
    .flex-container {
        flex-direction: column;
    }
    #col_1 {
        margin-right: 0;
    }
    #col_2 {
        margin: 24px auto 40px auto;
    }
    /* 360px of screenshot plus the bezel each side. Capping the frame rather than the image
       keeps the bezel even once it has to shrink. */
    .iphone {
        margin: 0 auto;
        max-width: calc(360px + 2 * var(--bezel));
    }
    .iphone img {
        max-width: 100%;
    }
    /* Stacking makes the page ~1590px tall, and #white_bg is a hardcoded 1000px, so you used to
       scroll past its bottom edge onto a hard white-to-gradient seam. It can't be sized in
       percentages out of this - absolutely positioned against the initial containing block, 100%
       is the viewport, not the document. Pin it instead: body's gradient is already
       background-attachment: fixed, so this makes the whole backdrop behave as one thing, the
       diagonal staying put while the content scrolls over it. No height left to outgrow. */
    #white_bg {
        position: fixed;
        height: 100vh;
    }
}

@media screen and (max-width: 600px) {
    /* Padding, not margin, for the 10px gutter: main.css gives body min-width: 320px, and a
       margin sits outside that, so on a 320px screen the body was 340px wide and the right of
       the h1 and both buttons fell off the edge. With box-sizing: border-box the padding counts
       inside the 320px instead. It used to be reachable by scrolling sideways; now that it
       isn't, it has to fit. */
    body {
        background: none;
        margin: auto;
        padding: 0 10px;
    }
    /* Same 320px screen: these floors are wider than the card or field can be there, and each
       one pushed its box back past the right edge. */
    #sign_up_card {
        min-width: 0;
    }
    #login-container #user_field {
        min-width: 0;
    }
    /* body has just dropped its gradient, so the canvas behind everything is already white and
       the skewed panel paints nothing - screenshots at 390, 500 and 600 are pixel-identical
       with it removed. Taken out rather than left in place so a phone isn't compositing a
       full-width, 1000px-tall skewed layer that shows up as white on white. */
    #white_bg {
        display: none;
    }
    .content {
        margin: 60px 0px 20px 0px;
    }
    h1 {
        font-size: 38px;
        line-height: 48px;
    }
    .feature_text {
        font-size: 14px;
        line-height: 20px;
        max-width: 240px;
    }
    #col_1 {
        margin: 0;
    }

    #password_field-container {
        display: block;
    }

    .half_width_field {
        margin-left: 0px !important;   
        margin-right: 0px !important;
    }

    .no_account {
        bottom: 60px;
    }

    .form-container h2 {
        margin-top: 32px;
    }

    #login-container #user_field,
    #login-container #l_pwd {
        width: 100%;
        max-width: 100%;
    }
    
    #sign_up_card {
        max-height: 500px;
    }
}

@media screen and (max-width: 350px) {
    .btn_topbar {
        margin-right: 16px;
    }
    .conditions {
        line-height: 20px;
    }
}