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

body {
    font-family: var(--font-family-ds-default);
    /* 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);
}

.form-group--agreement {
    display: flex;
    align-items: flex-start;
    gap: var(--padding-sm, 0.5rem);
}

.form-group--agreement input[type="checkbox"] {
    width: auto;
    display: inline-block;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.form-group--agreement label {
    display: inline;
    margin-bottom: 0;
}

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

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

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

/* The 2FA verify page's secondary line ("a code was sent to ..."). */
.notice {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* A form that has to sit inside a sentence: the 2FA resend is a POST (it retires
   the old code and sends mail), so it must be a form, and the copy around it
   reads as one line. */
.inline-form {
    display: inline;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--link);
    text-decoration: underline;
    cursor: pointer;
}

/* The verify screen. The code field is the page's one job, so it reads like a code:
   centered, large, spaced digits. The button spans the same width as the field so
   the card has one visual column instead of a wide input over a small button. */
.code-input input {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    font-variant-numeric: tabular-nums;
}

/* The spacing is for the six digits; on the placeholder sentence it reads as a fault. */
.code-input input::placeholder {
    letter-spacing: normal;
    font-size: 1rem;
}

.btn-block {
    display: block;
    width: 100%;
}

.verify-email {
    font-weight: var(--font-weight-bold, 600);
    overflow-wrap: anywhere;
}

.resend-line {
    margin-top: var(--margin-md);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.resend-note {
    display: block;
    margin-top: calc(var(--margin-xs) / 2);
}

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

    .form-group--agreement input[type="checkbox"] {
        min-height: 0;
        width: auto;
    }

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

/* ── Join link and invite-claim pages ───────────────────────────────────────
   The inviting firm's branding leads this page (its logo or name in the card
   header); Kandula recedes to the powered-by line below the card. */

.join-firm-name {
    font-size: var(--type-lg, 24px);
    font-weight: 600;
    color: var(--k-night, #162930);
}

.join-explainer {
    color: var(--text-secondary, #5c6f78);
    line-height: 1.5;
    margin: 0 0 var(--margin-lg, 16px) 0;
}

.powered-by {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary, #5c6f78);
    font-size: var(--type-2xs, 12px);
}

.powered-by img {
    height: 20px;
    width: auto;
    opacity: .85;
}

/* A firm logo gets a dark band to sit on: the logo a firm publishes is almost
   always the light-on-dark variant from its own site header. */
.app-block__header--brand {
    background-color: var(--k-night, #162930);
    border-radius: var(--border-radius-md, 8px) var(--border-radius-md, 8px) 0 0;
    padding: 20px 24px;
}

.app-block__header--brand img {
    max-height: 44px;
    width: auto;
    max-width: 100%;
}