/*
 * Amber Industrials design system applied to django-allauth's own pages
 * (/accounts/login/, /accounts/logout/, and anything else allauth renders --
 * account management, social-connection pages, etc.).
 *
 * Unlike admin-theme.css (which rebinds Django admin's own CSS custom
 * properties), allauth's default templates carry no CSS classes at all --
 * every element (allauth/elements/*.html) renders bare <h1>/<p>/<form>/
 * <button>/<input>/<ul><li><a> tags with nothing to hook a selector onto.
 * So this file pairs with a template override
 * (reactor_data/templates/allauth/layouts/base.html) that wraps allauth's
 * unstyled content in a few named wrapper elements, then styles everything
 * inside them by plain tag selector -- safe because this stylesheet is only
 * ever loaded on allauth's own pages, never Django admin's.
 *
 * Same token source as admin-theme.css (tokens/*.css, copied verbatim from
 * the Amber Industrials Design System export) -- edit tokens there, not
 * here, if the brand kit changes.
 */

@import url("tokens/fonts.4e5228984056.css");
@import url("tokens/colors.6003840937c3.css");
@import url("tokens/typography.6e78c187d28a.css");
@import url("tokens/spacing.6aae9dac5808.css");
@import url("tokens/borders.af048b59cac8.css");

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--surface-page);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    line-height: var(--leading-body);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 2.5rem 1rem;
}

/* Top-of-page utility nav (Sign In / Sign Out / account management links) --
   deliberately small and out of the way, not styled as the page's focus. */
.allauth-topnav {
    width: 100%;
    max-width: 24em;
    margin-bottom: 1.25rem;
    text-align: right;
}

.allauth-topnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1em;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.allauth-topnav a {
    color: var(--text-nav);
    text-decoration: none;
    font-size: var(--text-small);
}

.allauth-topnav a:hover {
    color: var(--text-nav-active);
    text-decoration: underline;
}

.allauth-messages {
    width: 100%;
    max-width: 24em;
    margin-bottom: 1.25rem;
}

.allauth-messages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.allauth-messages li {
    background: var(--surface-note);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    padding: 0.6em 0.9em;
    margin-bottom: 0.5em;
    font-size: var(--text-small);
    color: var(--text-body);
}

/* The card itself -- same lockup as the admin login page: an amber-ruled
   header bar with the Inclusion mark + wordmark, then the page's own
   content underneath. */
.entrance-card {
    width: 100%;
    max-width: 24em;
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.entrance-card__header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 1em 1.25em;
    background: var(--surface-nav);
    border-bottom: var(--border-width-rule) solid var(--amber);
}

.entrance-card__header img {
    height: 1.6em;
    width: 1.6em;
}

.entrance-card__header span {
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-size: var(--text-h1);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--amber);
}

.entrance-card__body {
    padding: 1.5em 1.25em 1.75em;
}

.entrance-card__body h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-size: var(--text-h1);
    color: var(--text-heading);
    margin: 0 0 0.75em;
}

.entrance-card__body h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-h2);
    color: var(--text-secondary);
    margin: 1.25em 0 0.5em;
}

.entrance-card__body p {
    color: var(--text-secondary);
    font-size: var(--text-small);
    margin: 0 0 1em;
}

.entrance-card__body a {
    color: var(--text-link);
}

.entrance-card__body a:hover {
    color: var(--text-link-hover);
}

.entrance-card__body label {
    display: block;
    font-size: var(--text-small);
    color: var(--text-secondary);
    margin-bottom: 0.3em;
}

.entrance-card__body input[type="text"],
.entrance-card__body input[type="email"],
.entrance-card__body input[type="password"],
.entrance-card__body input[type="tel"],
.entrance-card__body textarea {
    width: 100%;
    background: var(--surface-input);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    padding: 0.5em 0.6em;
    font-size: var(--text-body-size);
    font-family: var(--font-body);
    margin-bottom: 1em;
}

.entrance-card__body input:focus,
.entrance-card__body textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}

.entrance-card__body input[type="checkbox"],
.entrance-card__body input[type="radio"] {
    margin-right: 0.5em;
}

/* Real buttons (form submits) and the provider "Google" link both get the
   same amber-fill treatment as Django admin's own primary Save button. */
.entrance-card__body button,
.entrance-card__body ul li a {
    display: inline-block;
    background: var(--surface-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.55em 1.1em;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-size);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.entrance-card__body button:hover,
.entrance-card__body ul li a:hover {
    background: var(--surface-accent-hover);
}

.entrance-card__body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entrance-card__body ul li {
    margin-bottom: 0.5em;
}

.entrance-card__body hr {
    border: none;
    border-top: 1px solid var(--border-hairline);
    margin: 1.25em 0;
}