/* Sign-in screens for Lula Club.

   The file has two halves. "Brand" holds what is Lula Club's own: the font,
   the colours, the radii and the page background. "Structure" holds the layout
   and the components and reads the brand only through the custom properties,
   so it is the same in every identity service. There is no CSS framework: this
   file is the whole stylesheet. */

/* ══ Brand ══════════════════════════════════════════════════════════════ */

/* The website's own DM Sans (jq.lulaclub.website, src/assets/fonts), self-hosted:
   the CSP (default-src 'self') blocks Google Fonts. One variable file covers
   every weight from 200 to 700. */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('/fonts/dm-sans-latin.woff2') format('woff2');
}

/* White on a dark card, as on the website. Every text colour reaches 4.5:1 on
   the surface it sits on, and every border or icon that identifies a control
   reaches 3:1. On the dark card one red has to read on the card and on the
   error box at once, so the box is a dark red and the red is a light one. */
:root {
    --font-body: 'DM Sans', Arial, Helvetica, sans-serif;

    --color-page: #090909;
    --color-surface: #0d0d0f;
    --color-ink: #ffffff;
    --color-text: #f2f2f2;
    --color-muted: #b5b5b8;
    --color-line: #5c5c5f;
    --color-line-strong: #808084;

    --color-primary: #ffffff;
    --color-primary-text: #0d0d0f;
    --color-primary-hover: #d1d1d4;
    --color-primary-hover-text: #0d0d0f;
    --color-secondary: #ffffff;
    --color-link: #ffffff;
    --color-link-hover: #c4c4c7;
    --color-focus: #ffffff;
    --color-accent-surface: #2a2a2d;

    --color-error: #ff9d92;
    --color-error-surface: #3a1714;

    --radius-card: 40px;
    --radius-control: 25px;
    --radius-button: 999px;
    --shadow-card: 0 32px 90px rgba(0, 0, 0, .5);

    --brand-width: 220px;
    --brand-width-small: 170px;
}

.auth {
    background:
        radial-gradient(circle at 76% 18%, rgba(255, 255, 255, .08), transparent 38%),
        linear-gradient(0deg, rgba(0, 0, 0, .42), transparent 48%),
        linear-gradient(110deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .64) 54%, rgba(0, 0, 0, .35)),
        url('/auth-background.jpg') center / cover no-repeat;
}

@media (max-width: 767px) {
    .auth {
        background-position: center, center, center, 58% center;
    }
}

/* ══ Structure ══════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-root, 100%);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body, 17px);
    line-height: 1.55;
}

/* ── Page ─────────────────────────────────────────────────────────────── */
/* The card is anchored at a fixed distance from the top, never centred
   vertically: an error that makes it taller grows it downwards and leaves
   everything above it in place. The distance follows the height of the window,
   so a laptop and a phone both keep the card in their upper part. */
.auth {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    padding: clamp(20px, 7vh, 88px) 16px 48px;
}

.auth__panel {
    width: 100%;
    max-width: 440px;
}

.auth__brand {
    display: block;
    width: var(--brand-width);
    max-width: 70%;
    height: auto;
    margin: 0 auto 28px;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.auth__card {
    padding: 40px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

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

.auth__icon {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--color-accent-surface);
    color: var(--color-link);
}

.auth__icon--error {
    background: var(--color-error-surface);
    color: var(--color-error);
}

/* The status and error icons are drawn with strokes. */
.auth__icon svg,
.alert__icon,
.field__error-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.auth__icon svg {
    width: 28px;
    height: 28px;
}

.auth__title {
    margin: 0 0 8px;
    color: var(--color-ink);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.12;
}

.auth__lead {
    margin: 0 0 28px;
    color: var(--color-muted);
    font-size: 1.06rem;
}

.auth__actions {
    display: grid;
    gap: 12px;
}

.auth__foot {
    margin: 20px 0 0;
    text-align: center;
}

.auth__note {
    color: var(--color-muted);
    font-size: .95rem;
}

.auth__meta {
    margin: 20px 0 0;
    color: var(--color-muted);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

/* ── Fields ───────────────────────────────────────────────────────────── */
fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field {
    margin-bottom: 20px;
}

.field__label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-ink);
    font-weight: 700;
}

.field__control {
    position: relative;
}

.field__input {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: inherit;
    /* 16px or more keeps iOS from zooming into the field. */
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.field__input::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.field__input:focus {
    border-color: var(--color-focus);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus);
}

.field__input[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 1px var(--color-error);
}

.field__input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--color-error);
}

.field__input--with-visibility {
    padding-right: 56px;
}

.field__visibility {
    position: absolute;
    top: 50%;
    right: 3px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-link);
    cursor: pointer;
    transform: translateY(-50%);
}

.field__visibility:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

.field__visibility-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.field__visibility-icon[hidden] {
    display: none;
}

.field__hint {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: .88rem;
    line-height: 1.4;
}

.field__error {
    display: flex;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--color-error);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
}

.field__error-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.field__error p {
    margin: 0;
}

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

.field__error li + li {
    margin-top: 4px;
}

/* ── Remember me / forgot password row ────────────────────────────────── */
.field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 16px;
    margin: -6px 0 16px;
}

.check {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--color-text);
    cursor: pointer;
}

.check__box {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-focus);
    cursor: pointer;
}

.check__box:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* ── Links and buttons ────────────────────────────────────────────────── */
.link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--color-link);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.link:hover {
    color: var(--color-link-hover);
}

/* A link inside a sentence keeps the line's height. */
.link--inline {
    display: inline;
    min-height: 0;
}

.link:focus-visible {
    border-radius: 4px;
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.btn {
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--radius-button);
    font-family: inherit;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

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

.btn--primary:hover:not(:disabled) {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: var(--color-primary-hover-text);
}

.btn--secondary {
    border-color: var(--color-secondary);
    background: transparent;
    color: var(--color-secondary);
}

.btn--secondary:hover {
    background: var(--color-secondary);
    color: var(--color-surface);
}

.btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.btn:disabled {
    cursor: progress;
    opacity: .75;
}

/* ── Messages ─────────────────────────────────────────────────────────── */
/* The summary carries only the errors that belong to no field. It sits below
   the submit button, so nothing already on screen moves when it appears: the
   card only grows downwards. The box is the light background alone, without a
   border. */
.alert {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-error-surface);
    color: var(--color-error);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
}

/* A message that is part of the page from the start, above its action. */
.alert--static {
    margin: 0 0 20px;
}

.alert__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.alert p {
    margin: 0;
}

.alert__detail {
    margin-top: 4px;
    font-weight: 400;
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .auth__brand {
        width: var(--brand-width-small);
        margin-bottom: 20px;
    }

    .auth__card {
        padding: 28px 20px;
    }

    .auth__title {
        font-size: 1.7rem;
    }

    .auth__lead {
        margin-bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}