/* Sign-in screens for Nutural.

   The file has two halves. "Brand" holds what is Nutural'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 ══════════════════════════════════════════════════════════════ */

/* Self-hosted: the CSP (default-src 'self') blocks Google Fonts. The file is
   the public website's own (jq.nutural.website, src/assets/fonts), a variable
   font that covers every weight. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/montserrat-latin.woff2') format('woff2');
}

/* 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. The olive of the buttons and
   links is the website's darker one, the lighter one does not reach 4.5:1. */
:root {
    --font-body: 'Montserrat', 'Segoe UI', Arial, sans-serif;

    --color-page: #543c2d;
    --color-surface: #f8f7f1;
    --color-ink: #543c2d;
    --color-text: #674b39;
    --color-muted: #806d61;
    --color-line: #e2e1d2;
    --color-line-strong: #8f8173;

    --color-primary: #767028;
    --color-primary-text: #ffffff;
    --color-primary-hover: #543c2d;
    --color-primary-hover-text: #ffffff;
    --color-secondary: #543c2d;
    --color-link: #767028;
    --color-link-hover: #543c2d;
    --color-focus: #767028;
    --color-accent-surface: #eeecd9;

    --color-error: #8c3b3b;
    --color-error-surface: #f7ebeb;

    --radius-card: 24px;
    --radius-control: 12px;
    --radius-button: 999px;
    --shadow-card: 0 28px 80px rgba(84, 60, 45, .22);

    --brand-width: 260px;
    --brand-width-small: 210px;
}

.auth {
    background:
        radial-gradient(circle at 78% 20%, rgba(226, 225, 210, .18), transparent 36%),
        linear-gradient(90deg, rgba(84, 60, 45, .62), rgba(84, 60, 45, .34) 50%, rgba(169, 160, 80, .08)),
        url('/auth-background.jpg') center / cover no-repeat;
}

@media (max-width: 575px) {
    .auth {
        background-position: center, center, 62% 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;
    }
}