body * {
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    /* Matches the SPA body size (web/common/scss/global.scss). This was 11pt too,
       so login / invite / password-reset rendered at a different size to the app. */
    font-size: var(--type-xs);
    background-color: #f1f5f7;
    color: var(--default-text-color);
}

:root {
    --root-padding: 40px;
    --bg-default: white;
    /*--primary: #5593FB;*/
    /*--success: #45B496;*/
    --border-color: #727272;
    --light-border-color: #d3d3d3;
    --app-block-width: 500px;
    --large-app-block-width: 1000px;
    --padding-sm: .5rem;
    --padding-md: .8rem;
    --padding-lg: 1rem;
}


.root {
    padding-top: var(--root-padding);
}

.app-block {
    /*background-color: var(--bg-default);*/
    /*border: 1px solid var(--light-border-color);*/
    margin: 0 auto;
    /* Was a hard `width: var(--app-block-width)` — 500px with no max-width — so on a
       390px screen the sign-in, two-factor and select-organization cards overflowed
       by 110px. These are Django-rendered pages, and sign-in is the first thing
       anyone sees, so it was the most-viewed broken layout in the product.

       Identical to the old rule at any width above 500px. */
    width: 100%;
    max-width: var(--app-block-width);

    /*padding: var(--padding-xl);*/
    overflow: hidden;
    background-color: var(--white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    border-radius: var(--border-radius-md);
}


.app-block.large {
    width: 100%;
    max-width: var(--large-app-block-width);
}

.app-block__header {
    background-color: var(--white);
    padding: var(--padding-lg);
    border-bottom: 1px solid var(--light-border-color);
}

.app-block__header img {
    margin: 0 auto;
    width: 50%;
    display: block;
}

.app-block.large .app-block__header img {
    width: 25%;
}

.app-block__body {
    padding: var(--padding-md);
}

.form-group {
    margin-bottom: var(--padding-md);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    display: block;
    margin-bottom: calc(var(--margin-xs) / 2);
}

.form-group input {
    padding: var(--box-padding-input);
    border-radius: var(--border-radius-md);
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    transition: border-color .2s ease-in;
    border: 2px solid var(--light-border-color);
    outline: none;
}

.form-group input:focus {
    border-color: var(--border-color);
}

.margin-bottom-lg {
    margin-bottom: var(--margin-lg);
}

.margin-bottom-mega {
    margin-bottom: var(--margin-mega);
}

.margin-right-md {
    margin-right: var(--margin-md);
}

.btn {
    border: 1px solid;
    outline: none;
    border-radius: var(--border-radius-md);
    transition: background-color .2s ease-in, box-shadow .2s ease-in;
    cursor: pointer;

    font-family: inherit;
    color: inherit;
    text-decoration: none;

    padding: var(--padding-sm) var(--padding-lg);
    font-size: var(--font-size-md);
    box-shadow: var(--button-box-shadow-lg);
    display: inline-block;
}

.btn:hover {
    box-shadow: var(--button-hover-box-shadow-lg);
}

.btn.btn-primary {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: var(--white);
}

.btn.btn-lg {
    font-size: var(--font-size-lg);
}

.btn.btn-full-width {
    width: 100%;
    text-align: center;
}

.errorlist {
    margin: 0;
    background-color: var(--bg-danger);
    padding: var(--padding-md) var(--padding-lg);
    color: var(--danger);
    border-radius: 6px;
    margin-bottom: var(--padding-md);
}

.errorlist li {
    display: list-item;
    list-style: none;
    text-align: left;
    font-weight: 600;
}

.text-center {
    text-align: center;
}

.text-large {
    font-size: 1.5rem;
}

.text-small {
    font-size: .8rem;
}

.link {
    color: var(--link);
    text-decoration: none;

}

.flex-row {
    display: flex;
}

.flex-space-between {
    justify-content: space-between;
}

.align-self-end {
    align-self: flex-end;
}

.form-header {
    padding-bottom: var(--padding-lg);
    font-size: 1.2rem;
    font-weight: bold;
}

.text-right {
    text-align: right;
}

.radio-select-block {
    position: relative;
    cursor: pointer;
}

.radio-select-block input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.radio-select-block .radio-label {
    display: flex;
    align-items: center;
    padding: var(--padding-lg);
    background-color: white;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--default-text-color);
    border: 1px solid var(--light-border-color);
    border-radius: var(--border-radius-lg);
}

.radio-select-block input:checked ~ .radio-label {
    background-color: var(--primary-dark);
    color: white;
}

.radio-select-block input:checked ~ .radio-label:before {
    content: "\f090";
    font-family: "Font Awesome 6 Pro";
    color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
}


/* ── Mobile — the Django-rendered pages ──────────────────────────────────────
   Sign-in, two-factor, select-organization, select-view and the Filevine config
   screens. They share base.html with the SPA but not its stylesheet, so nothing in
   the app's responsive layer reaches them.

   850px is $bp-small from web/common/scss/_vars.scss, written as a literal because
   this is plain CSS with no build step, and a custom property cannot be used in a
   media-feature value — `@media (max-width: var(--x))` parses into a rule that never
   matches. Change it in _vars.scss and change it here. */
@media (max-width: 850px) {
    /* .app-block is now width:100%, so without a gutter the card runs edge to edge
       and its shadow and radius are lost against the screen boundary. 40px of top
       padding also spends too much of an 844px screen above the wordmark. */
    .root {
        padding-top: var(--padding-lg);
        padding-left: var(--padding-lg);
        padding-right: var(--padding-lg);
        box-sizing: border-box;
    }

    /* .6rem/1rem of padding leaves these ~41px. Sign-in is the one form every user
       fills in, and the first one they fill in on a phone. */
    .form-group input,
    .form-group select {
        min-height: 44px;
        box-sizing: border-box;
    }

    .btn {
        min-height: 44px;
        /* inline-block plus a min-height leaves the label at the top of the box. */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}