/*
 * reels.link, the account pages: checkout, log in, password reset, thanks and
 * the account itself.
 *
 * Same Modernist system as the marketing page and the same primitives, so this
 * file only adds what a form needs. Hard 2px borders, ink offsets, zero radius,
 * flush left. Loaded on every page because the header and footer live in it
 * too; it is small enough that splitting it per page would cost more than it
 * saves.
 */

/* A single readable column for everything that is not the marketing page. */
.rl-narrow {
    max-width: 660px;
}

.rl-narrow .rl-intro {
    max-width: none;
    margin-bottom: 40px;
}

.rl-panel {
    border: 2px solid var(--color-text);
    box-shadow: 10px 10px 0 var(--color-text);
    background: var(--color-bg);
    padding: 36px;
}

.rl-panel + .rl-panel {
    margin-top: 40px;
}

.rl-panel h3 {
    font-size: 19px;
    line-height: 26px;
    margin: 0 0 16px;
}

/* ─── the logo in the header and footer ───────────────────────────────── */

.rl-brand,
.rl-footer-brand {
    display: block;
    text-decoration: none;
}

.rl-brand img {
    width: auto;
    height: 26px;
}

.rl-footer-brand img {
    width: auto;
    height: 26px;
    margin-bottom: 18px;
}

@media (max-width: 560px) {
    .rl-brand img { height: 21px; }
}

/* ─── forms ───────────────────────────────────────────────────────────── */

.rl-form label {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.rl-form label.rl-label-spaced,
.rl-panel h3.rl-label-spaced {
    margin-top: 32px;
}

.rl-form input[type="text"],
.rl-form input[type="email"],
.rl-form input[type="password"] {
    display: block;
    width: 100%;
    padding: 13px 15px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    border: 2px solid var(--color-text);
    border-radius: 0;
    caret-color: var(--color-accent);
}

.rl-form input[type="text"]:focus-visible,
.rl-form input[type="email"]:focus-visible,
.rl-form input[type="password"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.rl-form input + label,
.rl-form .rl-help + label {
    margin-top: 22px;
}

/* First and last name share a line, and stack on a narrow screen. */
.rl-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.rl-form-row + label { margin-top: 22px; }

@media (max-width: 560px) {
    .rl-form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .rl-form-row > div + div { margin-top: 22px; }
}

.rl-btn-wide {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
    margin-top: 28px;
    font-size: 15px;
}

.rl-help {
    font-size: 13px;
    line-height: 21px;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    margin: 8px 0 0;
}

.rl-help-block { margin-top: 22px; }
.rl-help-center { text-align: center; }

.rl-help a,
.rl-alt a { color: var(--color-accent-700); }
.rl-help a:hover,
.rl-alt a:hover { color: var(--color-accent); }

.rl-alt {
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    margin-top: 24px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ─── errors and flashes ──────────────────────────────────────────────── */

.rl-error,
.rl-flash {
    border: 2px solid var(--color-text);
    padding: 16px 18px;
    margin: 0 0 28px;
    font-size: 14.5px;
    line-height: 22px;
}

.rl-error {
    background: var(--color-accent-200);
    border-left: 8px solid var(--color-accent);
}

.rl-flash {
    margin: 24px 0 0;
    background: var(--color-accent-100);
    border-left: 8px solid var(--color-text);
}

.rl-flash-error {
    background: var(--color-accent-200);
    border-left-color: var(--color-accent);
}

/* ─── receipt lines ───────────────────────────────────────────────────── */

.rl-receipt {
    border-top: 2px solid var(--color-text);
    margin-bottom: 8px;
}

.rl-receipt > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
    font-size: 14.5px;
    line-height: 22px;
}

.rl-receipt > div > span:last-child {
    flex: none;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.rl-receipt-total {
    border-bottom: 2px solid var(--color-text) !important;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
}

.rl-receipt-total > span:last-child { color: var(--color-accent) !important; }

/* ─── the reel address ────────────────────────────────────────────────── */

.rl-address {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 18px;
    line-height: 1.4;
    word-break: break-all;
    background: var(--color-accent-200);
    border: 2px solid var(--color-text);
    padding: 14px 16px;
    margin: 0 0 4px;
}

.rl-address a { color: var(--color-text); text-decoration: none; }
.rl-address a:hover { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 4px; }

/* ─── the numbered list on /thanks ────────────────────────────────────── */

.rl-steps-list {
    margin: 0;
    padding: 0 0 0 22px;
    display: grid;
    gap: 12px;
    font-size: 14.5px;
    line-height: 24px;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.rl-steps-list li::marker {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    color: var(--color-accent);
}

/* ─── Braintree's drop-in ─────────────────────────────────────────────── */

/* The drop-in ships its own rounded, shadowed card. Squaring it off is the
   whole of the theming needed: everything inside is an iframe we do not get
   to style, and it inherits the page font well enough. */
#dropin-container .braintree-dropin,
#dropin-container .braintree-form__field-group,
#dropin-container .braintree-sheet,
#dropin-container .braintree-option {
    border-radius: 0 !important;
}

#dropin-container .braintree-sheet {
    border: 2px solid var(--color-text) !important;
}

#dropin-container { margin-top: 4px; }

@media (max-width: 560px) {
    .rl-panel { padding: 24px; box-shadow: 5px 5px 0 var(--color-text); }
    .rl-panel + .rl-panel { margin-top: 28px; }
    .rl-address { font-size: 15px; }
}