/* Auth cards sit on the sandstone public shell. base.html's theme layer (which the
   public shell intentionally omits) used to paint cards with --card-bg = --canvas =
   #F7F1E6 under the default 'beach' theme, so the card matched the page. Restore that
   by reading the marketing design system's --sandstone token (same hex), instead of
   letting Bootstrap's .card fall back to white. */
.card {
    background-color: var(--sandstone, #F7F1E6);
}

/* Button geometry parity on the shared public shell.
   chippie-marketing.css's `.btn` (loaded before this file) repaints Bootstrap's
   buttons: padding 15px 28px (-> 56px tall, the oversized boxes), border-radius 8px,
   2px transparent border, font 16px/600 General Sans. At HEAD the auth pages used
   base.html, which never loaded the marketing system, so they showed standard
   Bootstrap buttons. Restore Bootstrap's geometry via its own --bs-btn-* tokens so
   size modifiers (.btn-lg on the setup/join pages) keep working. Placed before the
   .btn-* variant rules below so they still win where they specialise (e.g. the
   black .btn-google keeps its 500 weight). */
.btn {
    padding: var(--bs-btn-padding-y, 0.375rem) var(--bs-btn-padding-x, 0.75rem);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-btn-font-size, 1rem);
    font-weight: var(--bs-btn-font-weight, 400);
    border-width: var(--bs-btn-border-width, 1px);
    border-radius: var(--bs-btn-border-radius, 0.375rem);
}

.divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dee2e6;
}
.divider-text {
    font-size: 0.875rem;
    white-space: nowrap;
}
.btn-google {
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    font-weight: 500;
}
.btn-google:hover,
.btn-google:focus {
    background-color: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
/* Xero brand blue per Xero app-partner brand guidelines. */
.btn-xero {
    background-color: #13B5EA;
    color: #fff;
    border: 1px solid #13B5EA;
    font-weight: 500;
}
.btn-xero:hover,
.btn-xero:focus {
    background-color: #0f9ccc;
    color: #fff;
    border-color: #0f9ccc;
}

/* Bootstrap button parity on the shared public shell.
   chippie-marketing.css (loaded before this file on public_base.html) defines global
   .btn / .btn-primary rules that override Bootstrap's: .btn sets `border: 2px solid
   transparent` (killing the outline-button border) and .btn-primary repaints the fill
   black. The auth pages are Bootstrap-structured and showed standard Bootstrap buttons
   under base.html at HEAD, which never loaded the marketing CSS. Restore that here.
   #0b5ed7 / #0a58ca are Bootstrap's own primary hover/active shades. */
.btn-primary {
    border: 1px solid var(--bs-primary, #0d6efd);
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    border: 1px solid currentColor;
}

/* Typography parity on the shared public shell.
   chippie-marketing.css (loaded before this file) restyles global elements: body ->
   General Sans 17px, links -> --green, headings -> Space Grotesk, .btn -> weight 600.
   At HEAD the auth pages extended base.html, which never loaded the marketing system,
   so they rendered standard Bootstrap typography. Reset back to Bootstrap's tokens.
   (Body background stays sandstone — that matched HEAD's beach-theme canvas; only the
   font/colour bleed is reverted, not the page colour.) */
body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
}

/* Vertically centre the auth card in the viewport. The public shell empties the nav
   and footer blocks on auth pages, so the page is just this one .container; without
   this it sits at the top (the "too high" complaint). flex-column + auto vertical
   margins centre the card when it fits and let taller forms (business setup/join)
   scroll naturally instead of clipping at the top. */
.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 2rem;
}

/* Login's "Back to landing" link sits above the card. Left in flow it would push the
   card below the viewport's vertical centre. Take it out of flow but anchor it to the
   card's column (.auth-col is position:relative) so it sits just above the card's top
   edge, left-aligned with it, while only the card border is centred top-to-bottom. */
.auth-col {
    position: relative;
}
.auth-top-link {
    position: absolute;
    bottom: calc(100% + 0.5rem);
}
a {
    color: var(--bs-link-color, #0d6efd);
}
a:hover {
    color: var(--bs-link-hover-color, #0a58ca);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bs-body-font-family);
    font-weight: 500;
}