/**
 * /predict-scores - the gameweek, playable without an account.
 *
 * Loaded on top of predictions.css, which already carries everything the fixtures are made of:
 * the cards, the rows, the club names, the +/- controls and the score circles. This file is only
 * the parts that page has no equivalent of - the line under the header, the deadline, and the
 * save block that stands where /predict/ puts its joker and SAVE buttons.
 *
 * Nothing here restyles a .fixture. If a row on this page ever needs to look different from a row
 * on /predict/, that is a reason to check whether the difference is wanted, not to add a rule.
 */

/*
 * Body colour rather than a grey. These lines sit straight on the site's gradient - there is no
 * card behind them - and --grey700 washed out against the pale green at the top of it, worst on
 * the short words. --green900 is what body already sets for text on this backdrop.
 */
.pp_sub {
    max-width: 500px;
    margin: 0 auto 10px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--green900);
}

/*
 * The deadline. Amber rather than the site green: it is the one thing on the page that expires,
 * and green here would read as another heading.
 */
.pp_deadline {
    max-width: 500px;
    margin: 0 auto 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff7e6;
    border: 1px solid #e5c07a;
    color: #7c4a03;
    font-size: 0.95rem;
    line-height: 1.45;
}

.pp_deadline i {
    margin-right: 6px;
}

/*
 * The ask, standing where /predict/ puts its joker and SAVE row, and sized like it - 500px is
 * every .card on the site and the width the fixtures above it already occupy.
 */
.pp_save {
    max-width: 500px;
    margin: 16px auto 0;
    text-align: center;
}

.pp_save_count {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--green900);
    /* Reserved whether or not it says anything, so revealing the count does not shove the button
       down the page under the reader's thumb. */
    min-height: 1.2em;
}

/*
 * .btn .btn_1 is the site's primary button and brings its own colour. What it does not bring is
 * the shape #save_btn has on /predict/, which is what this row is standing in for.
 */
.pp_save_btn {
    display: block;
    border-radius: 24px;
    line-height: 48px;
    height: 48px;
    box-shadow: 0 4px 6px 0 var(--shadow);
}

.pp_save_help {
    margin: 12px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--green900);
}

/* The signup count under the save button. @see PlayerCount, and .pp_save_help above, whose size
   and colour it borrows so the two read as one block rather than as a claim bolted on. Bolder,
   because it is the only line in the block that is a fact about other people. */
.pp_save_proof {
    margin: 8px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--green900);
}

.pp_note {
    max-width: 500px;
    margin: 16px auto 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--green900);
    text-align: center;
    padding-bottom: 40px;
}

/* The gameweek is over and there is nothing left to predict. @see the view. */
.pp_closed {
    max-width: 500px;
    margin: 0 auto;
    padding: 22px 16px;
    background: var(--grey100);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px 0 var(--shadow);
}

.pp_closed h2 {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.pp_closed p {
    margin: 0 0 16px;
    line-height: 1.5;
    color: var(--green900);
}