:root {
    font-family: "Montserrat", Sans-Serif;
    
    --grey900: #4F4C40;
    --grey800: #5F5D53;
    --grey700: #757266;
    --grey600: #8C897D;
    --grey500: #99978F;
    --grey400: #B1B0A9;
    --grey300: #CBCAC2;
    --grey200: #E1E0DB;
    --grey100: #F8F8F7;
    
    --green900: #2F4F02;
    --green800: #42640C;
    --green700: #537416;
    --green600: #698825;
    --green500: #7F9D34;
    --green400: #A6C059;
    --green300: #CCDF86;
    --green200: #EEF5D1;
    --green100: #F7F9E6;
    
    --teal900: #0A4C52;
    --teal800: #0F5B62;
    --teal700: #15686F;
    --teal600: #267E7B;
    --teal500: #4AAC9C;
    --teal400: #58C6B3;
    --teal300: #95E4D7;
    --teal200: #CDF9F1;
    --teal100: #E5FFFA;
    
    --yellow900: #5F4D11;
    --yellow800: #7E6510;
    --yellow700: #A3860F;
    --yellow600: #CFAB0C;
    --yellow500: #F9D006;
    --yellow400: #FBDB5B;
    --yellow300: #FDE690;
    --yellow200: #FEF4CD;
    --yellow100: #FFFCF3;
    
    --red900: #5D3C3C;
    --red800: #774040;
    --red700: #943838;
    --red600: #B43131;
    --red500: #DB2929;
    --red400: #EE5B59;
    --red300: #FA8D89;
    --red200: #FEBFBE;
    --red100: #FFF5F5;
    
    --shadow: rgba(0,0,0,0.2);

    /*
     * Safe areas, for the installed app.
     *
     * Pwa::Viewport() emits viewport-fit=cover, which is what lets the app fill an iPhone
     * screen instead of being letterboxed - and is also what puts the page under the notch and
     * the home indicator. Both fixed bars are 48px tall and would lose that much of themselves
     * without these; the bottom tab bar is the bad one, since the home indicator sits right
     * over its labels.
     *
     * Zero here and overridden below rather than written as env(...) directly, because a
     * browser with no env() support treats the whole declaration as invalid - which would take
     * the calc()s that depend on it down too, on every browser rather than just old ones. In a
     * normal tab on a device with no notch these all resolve to 0px and nothing moves.
     */
    --safe-top: 0px;
    --safe-bottom: 0px;
    --title-bar-h: calc(48px + var(--safe-top));
    --tab-bar-h: calc(48px + var(--safe-bottom));
}

@supports (padding: env(safe-area-inset-top)) {
    :root {
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
}

* {
    box-sizing: border-box;
/*    border: 1px solid red !important;*/
}
/*
*:before,
*:after {
    box-sizing: border-box;
}
*/

body {
    /* color: var(--grey900); */
    background-color: #f8f8f8;
    color: var(--green900);
    margin: var(--title-bar-h) auto auto auto; /* clears the fixed .title_bar */
    /* margin: 0; */
    min-width: 320px;
    /* max-width: 1024px; */
    max-width: none;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(155deg, #CBDE85 40%, #0E919A 100%) fixed;
    background-repeat: no-repeat;
    overflow-x: hidden;
}

header {
    width: 100%;
    height: 96px;
    margin-top: 32px;
    display: flex;
}

.main-container {
    padding: 12px;
    color: var(--grey900);
    margin: 0 auto;
    padding-bottom: calc(100px + var(--safe-bottom)); /* keeps the slack over .mobile_tab_bar */
}

.main-container h2 {
    color: var(--green900);
}

/* LINKS */

a {
    cursor: pointer;
    text-decoration: none;
    color: var(--grey500);
}

a:hover {
    color: var(--green500);
}


/* HEADINGS */
h1 {
    font-size: 48px;
    margin: 0px;
    line-height: 64px;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* BUTTONS */

.btn {
    font-size: 18px;
    text-align: center;
    height: 38px;
    line-height: 32px;
    border-radius: 8px;
    margin: 10 0;
    transition: transform 0.1s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;  
    user-select: none;
}

.btn:hover {
    cursor: pointer;
    transform: scale(1.04);
    transition: transform 0.2s;
}

.btn:active {
    transform: scale(1.06);
}

/* green700 rather than the green500 these carried for years, and green800 for the outline:
   green500 is only 2.9:1 behind the near-white label and 3.1:1 as text on white, so both
   buttons failed 4.5:1 - on the landing page, where the two of them are the whole call to
   action. green700 behind green100 is 5.1:1, and green800 text is 6.9:1 on white and still
   4.7:1 against the lightest part of the body gradient, which is what the top-bar Log In
   sits on. The hover states darken rather than lighten for the same reason: green400 under
   green100 was 2.1:1, i.e. the button became less readable the moment you pointed at it. */
.btn_1 {
    background-color: var(--green700);
    color: var(--green100);
    height: 46px;
    line-height: 46px;
    box-shadow: 0px 5px 15px 0 var(--shadow);
    box-shadow: inset 0 3px 0 var(--green500);
}

.btn_1:hover {
    background-color: var(--green800);
    box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.15);
    box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.10);
    box-shadow: inset 0 3px 0 var(--green600);
/*    border-radius: 30px;*/
}

.btn_3 {
    background-color: transparent;
    color: var(--green800);
    border: 2px solid var(--green800);
    min-width: 128px;
    width: 184px;
}

.btn_3:hover {
    background-color: var(--green800);
    color: var(--green100);
    box-shadow: 0px 5px 15px 0 var(--shadow);
}

.btn_topbar {
    margin: 0 0 0 auto;
}

/* CUSTOM */

.flex {
    display: flex;
}
.flex-col {
    display: flex;
    flex-direction: column;
}

.logo {
    font-size: 16px;
    /* grey700, not grey600: the wordmark is 16px on the landing page and 21px on the terms
       pages, both under the 24px that would let it use the large-text threshold, and grey600
       on white is 3.5:1. See the same note on the chips in chooseUsername.css. */
    color: var(--grey700);
}

.hidden {
    visibility: hidden !important;
}
.none {
    display: none !important;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-faded {
    color: var(--grey600);
}

.error {
    color: var(--red600);
    text-align: center;
}
/* A link inside an error message is the way out of it, so it has to be readable and has to look
   clickable. The default anchor colour is grey500, which lands at 2.75:1 on the sign-up card and
   reads as disabled text sitting in the middle of a red sentence - the "log in or reset your
   password" offer after a duplicate-email signup was effectively invisible. Inheriting red600
   takes it to 5.77:1 and makes it part of the sentence it belongs to; the underline is then what
   marks it as a link, since the colour no longer does. @see landing.js onRegisterError() */
.error a {
    color: inherit;
    text-decoration: underline;
}
.info_msg {
    background-color: var(--teal200);
    border-left: 4px solid var(--teal600);
    color: var(--teal800);
    max-width: 800px;
    margin: 10px auto;
    font-family: "Montserrat";
    font-weight: 400;
    font-size: 14px;
    padding: 12px 12px;
    display: flex;
}
.info_msg a {
    margin: 0 4px;
    text-decoration: underline;
}
.info_msg i {
    color: var(--teal600);
    margin-right: 8px;
    margin: auto 8px auto 0;
}
.error_msg {
    background-color: var(--red200);
    color: var(--red800);    
    border-left-color: var(--red600);
}
.error_msg i {
    color: var(--red600);
}
/* The same reasoning as `.error a`, for the boxed version of the message on the TikTok landing.
   `.info_msg a` already underlines it but leaves the colour alone, so the way out of a
   duplicate-email signup rendered grey500 on red200 at 1.87:1 - fainter than the case above and
   against a stronger background. Inheriting takes it to the red800 the sentence is written in. */
.error_msg a {
    color: inherit;
}
.warning_msg {
    background-color: var(--yellow300);
    color: var(--yellow800); 
    border-left-color: var(--yellow800);
}
.warning_msg i {
    color: var(--yellow800); 
}

/* Cards */

.card {
    background-color: var(--grey100);
    border-radius: 12px;
    padding: 16px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 5px 15px 0 var(--shadow);
}
.card.news {
    margin: 12px 0;
}
.card.news h2 {
    margin: 8px 0;
}
.card h3 {
    font-size: 20px;
    text-align: center;
    margin: 0px 0 8px 0;
}

/* Shadows */
.height-1 {
    box-shadow: 0 1px 3px 0 var(--shadow);
}
.height-2 {
    box-shadow: 0 4px 6px 0 var(--shadow);
}
.height-3 {
    box-shadow: 0 5px 15px 0 var(--shadow);
}
.height-4 {
    box-shadow: 0 10px 24px 0 var(--shadow);
}
.height-5 {
    box-shadow: 0 15px 35px 0 var(--shadow);
}

.card-dark {
    background-color: var(--grey900);
    color: var(--grey100);
}

/* FOOTER */

footer {
    position: absolute;
    height: 64px;
    width: 100%;
    left: 0;
    background-color: var(--grey100);
    font-size: 10px;
    padding: 0 64px;
    line-height: 64px;
/*
    
    
    background-color: var(--grey900);
    width: 100vw;
    margin-left: calc((1000px - 100vw) / 2);
    left: 0;
    bottom: 0px;
*/
}

footer i {
    font-size:5px;
    vertical-align: middle;
    margin: auto 16px;
    color: var(--grey500);
}

footer a {
    font-size: 9px;
    position: relative;
    bottom: 1px;
    color: var(--grey500);
}

input {
    margin: 10px 0;
    width: 100%;
    padding: 10px;
    font-size: 18px;
    color: var(--grey900);
    border-radius: 8px;
    background-color: var(--grey200);
    border: 1px solid var(--grey300);
    -webkit-box-shadow: inset 0 2px 4px 0 var(--shadow);
    box-shadow: inset 0px 2px 4px 0 var(--shadow);
}
input::placeholder {
    color: var(--grey500);   
}
form input:hover { background-color: #DDDDDD; }
form input:focus {
    outline: none;
    background-color: #DDDDDD;
    -webkit-box-shadow: inset 0 2px 4px 0 #AAA;
    -moz-box-shadow: inset 0 2px 4px 0 #AAA;
    box-shadow: inset 0 2px 4px 0 #AAA
}

a.username {
    color: var(--grey100);
}
a.username:hover {
    color: var(--green200);
    text-decoration: underline;
}

/* Account markers - see public/js/helpers/AccountBadges.js. Sits after a rendered username on the
   league table, results page, home panels and profile, so it has to read on both the dark tables
   and the light profile header: currentColor takes whatever the name next to it is using, at
   reduced opacity, rather than picking a colour that works on one and vanishes on the other. */
.account_badge {
    margin-left: 6px;
    font-size: 0.85em;
    color: currentColor;
    opacity: 0.65;
    vertical-align: baseline;
}


@media screen and (min-width: 600px) {

    .main-container {
        margin: 0 auto;
        max-width: 580px;
    }
}

/* Modal */
.modal {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    color: var(--grey900);
    position: relative;
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    text-align: center;
}

.modal-content button {
    min-width: 120px;
    margin: 12px auto;
    display: block;
    text-align: center;
    font-size: 16px;
}

.close-button {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}