/*
 * The sign-in design, shared: a split card floating on Forest, a Forest panel with two soft gold circles beside a
 * Paper form section with the lockup, a heading, floating-label fields, a Forest button and gold links.
 * Used by sign in, trial signup, password reset and the two-factor challenge (templates/auth/_layout.html.twig),
 * and by the contact card inside the website chrome (templates/contact/index.html.twig adds its own layout in contact.css).
 * Linked from Twig, never imported from JS (the asset mapper would turn a JS-side CSS import into a data: module the CSP blocks).
 * Only brand.css tokens are assumed, so it renders the same with or without Bootstrap and app.css.
 */
.auth-shell,
.auth-card {
    --auth-forest: var(--brand-forest, #0e3b2a);
    --auth-paper: var(--brand-paper, #f7f5f0);
    --auth-ink: var(--brand-ink, #1c1f1d);
    --auth-slate: var(--brand-slate, #5c6660); /* 5.5:1 on paper */
    --auth-gold-text: var(--brand-gold-text, #8a6318); /* dark gold: small gold text, links and focus on paper (5:1) */
    --auth-gold-light: var(--brand-signal-gold, #d9ae4e); /* gold on Forest only (6:1) */
    --auth-on-forest: #c3d2c8; /* secondary text on Forest (8:1) */
    --auth-control: #7f8a83; /* field edges: 3.3:1 on paper, 3.6:1 on white */
    --auth-rule: #e0ddd5; /* decorative dividers only */
    --auth-error: #a3341a;
    --auth-error-wash: #fcf4f1;
    --auth-ground: var(--auth-paper); /* the ground a floated label sits on */
}

/* Shell: the Forest page the card floats on. */
.auth-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 40px 0;
    overflow: hidden;
    overflow: clip;
    background: var(--auth-forest);
    box-sizing: border-box;
}

/* The split card */
.auth-card {
    position: relative;
    display: flex;
    width: 90%;
    max-width: 1100px;
    overflow: hidden;
    overflow: clip; /* clip, not hidden: the gold circles must never make the card or its panel scrollable */
    border-radius: 24px;
    background: var(--auth-paper);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    color: var(--auth-ink);
    font-family: var(--font-body);
}

.auth-shell .auth-card {
    min-height: min(680px, calc(100vh - 80px));
    animation: auth-rise 0.8s ease-out both;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: none; }
}

/* The Forest panel, with its two gold circles */
.auth-visual {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    order: -1; /* shown on the left, read after the form (the task comes first for screen readers) */
    padding: 60px;
    overflow: hidden;
    overflow: clip;
    background: var(--auth-forest);
    color: #fff;
    text-align: center;
}

.auth-visual::before,
.auth-visual::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.auth-visual::before {
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: rgba(182, 153, 86, 0.1);
    animation: auth-float 6s ease-in-out infinite;
}

.auth-visual::after {
    right: -50px;
    bottom: -50px;
    width: 200px;
    height: 200px;
    background: rgba(182, 153, 86, 0.08);
    animation: auth-float 8s ease-in-out infinite reverse;
}

@keyframes auth-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}

.auth-visual > * { position: relative; z-index: 1; }

.auth-visual__title {
    max-width: 14em;
    margin: 0 0 20px;
    color: #fff;
    font: 700 2.5rem/1.2 var(--font-display);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.auth-visual__text {
    max-width: 30em;
    margin: 0;
    color: var(--auth-on-forest);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* A panel that tells a short story (signup): left-aligned, with a few facts under a rule. */
.auth-visual--story { align-items: stretch; text-align: left; }
.auth-visual--story .auth-visual__title { font-size: clamp(1.9rem, 2.6vw, 2.35rem); }
.auth-visual--story .auth-visual__text { font-size: 1.02rem; line-height: 1.65; }

.auth-facts {
    display: grid;
    gap: 18px;
    margin: 36px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid rgba(247, 245, 240, 0.16);
    list-style: none;
}

.auth-facts li { display: grid; gap: 4px; }
.auth-facts strong { color: #fff; font: 600 0.95rem/1.4 var(--font-display); }
.auth-facts span { color: var(--auth-on-forest); font-size: 0.9rem; line-height: 1.55; }

/* The Paper form section */
.auth-form-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 60px;
    background: var(--auth-paper);
    box-sizing: border-box;
}

.auth-brand { margin: 0 0 40px; text-align: center; }
/* A longer form (signup) tightens the space above its fields so the button stays near the first view. */
.auth-form-section--compact { padding-block: 48px; }
.auth-form-section--compact .auth-brand { margin-bottom: 28px; }
.auth-form-section--compact .auth-subtitle { margin-bottom: 28px; }
.auth-form-section--compact .auth-progress { margin-top: -16px; }
.auth-brand svg,
.auth-brand img { display: block; width: 180px; max-width: 100%; height: auto; margin-inline: auto; }

.auth-title {
    margin: 0 0 10px;
    color: var(--auth-forest);
    font: 700 2rem/1.2 var(--font-display);
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
}

.auth-subtitle {
    margin: 0 0 40px;
    color: var(--auth-slate);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

/* Where a task sits in a short sequence: a slim two-part bar with its words, under the subtitle. */
.auth-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: -24px 0 32px;
    color: var(--auth-slate);
    font-size: 0.82rem;
    line-height: 1.5;
}

.auth-progress p { margin: 0; }
.auth-progress__bar { display: flex; flex: none; gap: 4px; }
.auth-progress__bar span { width: 26px; height: 4px; border-radius: 4px; background: var(--auth-rule); }
.auth-progress__bar .is-done { background: var(--auth-forest); }

/* Floating-label fields: the label sits in the field, then rises onto its edge. */
.auth-form { margin: 0; }

.auth-field {
    position: relative;
    margin: 0 0 28px;
}

.auth-input {
    display: block;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 16px 20px;
    border: 1.5px solid var(--auth-control);
    border-radius: 12px;
    background: var(--auth-ground);
    color: var(--auth-ink);
    font: 400 1rem/1.5 var(--font-body);
    box-sizing: border-box;
    outline: 2px solid transparent; /* keeps a ring in forced colours */
    appearance: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input:hover { border-color: var(--auth-slate); }

.auth-input:focus {
    border-color: var(--auth-gold-text);
    box-shadow: 0 0 0 1px var(--auth-gold-text), 0 0 0 5px rgba(184, 134, 43, 0.18);
}

/* Browser autofill: keep the field on its ground (the floated label's patch must match it) and float the label. */
.auth-input:is(:autofill, :-webkit-autofill) {
    -webkit-text-fill-color: var(--auth-ink);
    box-shadow: inset 0 0 0 100px var(--auth-ground);
    caret-color: var(--auth-ink);
}

.auth-input:is(:autofill, :-webkit-autofill):focus {
    box-shadow: inset 0 0 0 100px var(--auth-ground), 0 0 0 1px var(--auth-gold-text), 0 0 0 5px rgba(184, 134, 43, 0.18);
}

textarea.auth-input { min-height: 160px; line-height: 1.6; resize: vertical; }
select.auth-input { padding-right: 48px; cursor: pointer; }

.auth-label {
    position: absolute;
    top: 17px;
    left: 16px;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 0 4px;
    overflow: hidden;
    background: transparent;
    color: var(--auth-slate);
    font: 400 1rem/1.5 var(--font-body);
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.auth-input:focus + .auth-label,
.auth-input:not(:placeholder-shown) + .auth-label,
.auth-input:is(:autofill, :-webkit-autofill) + .auth-label,
.auth-field--floated .auth-label {
    top: -10px;
    left: 14px;
    background: var(--auth-ground);
    color: var(--auth-slate);
    font-size: 0.75rem;
    font-weight: 600;
}

.auth-input:focus + .auth-label { color: var(--auth-gold-text); }
.auth-field--floated:focus-within .auth-label { color: var(--auth-gold-text); }

.auth-optional { color: var(--auth-slate); font-size: 0.85em; font-weight: 400; }
.auth-nowrap { white-space: nowrap; }

.auth-hint {
    margin: 8px 0 0;
    color: var(--auth-slate);
    font-size: 0.82rem;
    line-height: 1.55;
}

.auth-error {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 8px 0 0;
    color: var(--auth-error);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
}

.auth-error::before {
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 0.55em;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.auth-field.has-error .auth-input,
.auth-input[aria-invalid="true"] { border-color: var(--auth-error); }

.auth-field.has-error .auth-input:focus,
.auth-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--auth-error), 0 0 0 5px rgba(163, 52, 26, 0.14); }

.auth-field.has-error .auth-input:focus + .auth-label { color: var(--auth-error); }

.auth-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

/* A checkbox row: a 44px target drawn as a 22px box with its tick. */
.auth-check { display: flex; gap: 14px; align-items: flex-start; }

.auth-check__box {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    margin: -10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    appearance: none;
}

.auth-check__box::before {
    position: absolute;
    inset: 11px;
    border: 1.5px solid var(--auth-control);
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    content: "";
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.auth-check__box::after {
    position: absolute;
    top: 18px;
    left: 16px;
    width: 11px;
    height: 6px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    transform: rotate(-45deg) scale(0);
    transition: transform 0.16s ease;
}

.auth-check__box:checked::before { border-color: var(--auth-forest); background: var(--auth-forest); }
.auth-check__box:checked::after { transform: rotate(-45deg) scale(1); }
.auth-check__box:focus-visible { outline: 3px solid var(--auth-gold-text); outline-offset: -8px; }
.auth-check.has-error .auth-check__box::before { border-color: var(--auth-error); }
.auth-check label { display: block; margin: -12px 0 -10px; padding: 12px 0 10px; color: var(--auth-ink); font-size: 0.9rem; line-height: 1.6; cursor: pointer; }
.auth-check__note { margin: 2px 0 0; color: var(--auth-slate); font-size: 0.82rem; line-height: 1.6; }

/* Buttons */
.auth-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px solid transparent; /* keeps an edge in forced colours */
    border-radius: 12px;
    background: var(--auth-forest);
    box-shadow: 0 4px 15px rgba(24, 70, 49, 0.4);
    color: #fff;
    font: 600 1rem/1.3 var(--font-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.2s ease;
}

.auth-button:hover { color: #fff; box-shadow: 0 6px 25px rgba(24, 70, 49, 0.5); transform: translateY(-2px); }
.auth-button:active { transform: none; }
.auth-button[disabled] { background: #3f5f4e; box-shadow: none; cursor: progress; transform: none; }

.auth-button--secondary {
    border-color: var(--auth-forest);
    background: transparent;
    box-shadow: none;
    color: var(--auth-forest);
}

.auth-button--secondary:hover { background: #fff; box-shadow: none; color: var(--auth-forest); }
.auth-button + .auth-button { margin-top: 12px; }

/* Links: standalone gold links under the form, underlined links inside text. A standalone link is a 44px target;
   negative block margins keep it taking the room of one line of text. */
.auth-links { margin: 20px 0 0; color: var(--auth-slate); font-size: 0.95rem; line-height: 1.5; text-align: center; }

.auth-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -10px;
    color: var(--auth-gold-text);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

.auth-link::after {
    position: absolute;
    bottom: calc(50% - 0.75em - 2px); /* just under the text line, inside the taller target */
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    content: "";
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.auth-link:hover { color: var(--auth-gold-text); }
.auth-link:hover::after { width: 100%; }

.auth-fineprint {
    margin: 0 0 20px;
    color: var(--auth-slate);
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: center;
}

:is(.auth-fineprint, .auth-notice, .auth-alert, .auth-check__note, .auth-legal) a {
    color: var(--auth-forest);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

:is(.auth-fineprint, .auth-notice, .auth-check__note, .auth-legal) a:hover { color: var(--auth-gold-text); }
.auth-alert a { color: inherit; }

/* Alerts and notices */
.auth-alert,
.auth-notice {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.auth-alert {
    border: 1.5px solid var(--auth-error);
    background: var(--auth-error-wash);
    color: var(--auth-error);
    animation: auth-drop 0.3s ease both;
}

.auth-notice { border: 1px solid var(--auth-rule); background: #fff; color: var(--auth-ink); }
.auth-notice--success { border-color: #b9cfc0; background: #eef3ee; color: var(--auth-forest); }
.auth-notice--warm { border-color: #d9c79d; background: #fbf7ec; color: #5d4814; }
:is(.auth-alert, .auth-notice) p { margin: 0; }
:is(.auth-alert, .auth-notice) p + p { margin-top: 6px; }

/* The error summary after a failed submit: it takes focus, counts the problems and links each to its field. */
.auth-summary { margin: 0 0 28px; }
.auth-summary:focus { outline: none; }
.auth-summary:focus-visible { outline: 3px solid var(--auth-gold-text); outline-offset: 3px; }
.auth-summary__title { margin: 0 0 8px; color: inherit; font: 600 1rem/1.4 var(--font-display); }
.auth-summary p + .auth-summary__title { margin-top: 10px; }
.auth-summary ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.auth-summary li { font-size: 0.875rem; line-height: 1.5; }
.auth-summary a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

@keyframes auth-drop {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

/* A short route elsewhere, under a rule (sign in has the trial; signup has sign in). */
.auth-callout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 1rem;
    align-items: baseline;
    margin: 1.5rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--auth-rule);
    color: #4a5a51;
    font-size: 0.85rem;
    line-height: 1.5;
}

.auth-callout a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-block: -12px;
    color: var(--auth-forest);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-callout a:hover { color: var(--auth-gold-text); }
.auth-callout small { color: var(--auth-slate); font-size: 0.78rem; }

/* The organisation sign-in (SSO) sits under the password form, after a quiet "or" between two rules. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 20px;
    color: var(--auth-slate);
    font-size: 0.85rem;
    line-height: 1.5;
}

.auth-divider::before,
.auth-divider::after { flex: 1; height: 1px; background: var(--auth-rule); content: ""; }
.auth-sso { margin: 0; }

/* Legal footer */
.auth-legal {
    margin: 30px 0 0;
    color: var(--auth-slate);
    font-size: 0.875rem;
    line-height: 1.7;
    text-align: center;
}

.auth-legal p { margin: 0; }
.auth-legal strong { font-weight: 600; }

/* The legal links: three 44px targets in a row, pulled up so the line keeps its old height. */
.auth-legal .auth-legal__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: -8px 0 -10px; }

.auth-legal__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 6px;
    font-weight: 500;
}

/* Only for the trial signup's trap field: out of sight and out of the way, never display: none. */
.auth-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.auth-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.auth-turnstile { margin: 0 0 20px; }

/* Focus: dark gold on Paper (brand.css), Signal Gold on Forest. */
.auth-visual :focus-visible { outline-color: var(--auth-gold-light); }

/* Beside the Forest panel on a small laptop the form section is narrow: give its fields a little more width. */
@media (min-width: 993px) and (max-width: 1200px) {
    .auth-form-section,
    .auth-visual { padding-inline: 44px; }
}

/* A short laptop window: the longer form (signup) tightens its spacing so the button stays in the first view. */
@media (min-width: 993px) and (max-height: 860px) {
    .auth-shell:has(.auth-form-section--compact) { padding-block: 24px; }
    .auth-form-section--compact { padding-block: 32px; }
    .auth-form-section--compact .auth-brand { margin-bottom: 20px; }
    .auth-form-section--compact .auth-title { font-size: 1.75rem; }
    .auth-form-section--compact .auth-subtitle { margin-bottom: 22px; }
    .auth-form-section--compact .auth-field { margin-bottom: 22px; }
}

@media (max-width: 992px) {
    .auth-visual { display: none; }
    .auth-form-section { padding: 40px 30px; }
    .auth-card { width: calc(100% - 32px); max-width: 500px; }
    .auth-shell .auth-card { min-height: 0; }
}

@media (max-width: 576px) {
    .auth-shell { padding: 24px 0; }
    .auth-form-section { padding: 30px 20px; }
    .auth-form-section--compact { padding-block: 28px; }
    .auth-title { font-size: 1.5rem; }
    .auth-visual__title { font-size: 2rem; }
    .auth-field-pair { grid-template-columns: minmax(0, 1fr); }
    .auth-progress { flex-direction: column; gap: 8px; margin-top: -26px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell .auth-card,
    .auth-visual::before,
    .auth-visual::after,
    .auth-alert { animation: none; }
    .auth-button,
    .auth-input,
    .auth-label,
    .auth-link::after,
    .auth-check__box::before,
    .auth-check__box::after { transition: none; }
    .auth-button:hover { transform: none; }
}

@media (forced-colors: active) {
    .auth-input:focus { outline: 2px solid Highlight; outline-offset: 0; }
    .auth-check__box::before { border-color: CanvasText; }
    .auth-check__box:checked::before { background: Highlight; forced-color-adjust: none; }
    .auth-check__box::after { border-color: HighlightText; }
    .auth-button { border-color: ButtonText; }
    .auth-progress__bar span { border: 1px solid CanvasText; }
    .auth-progress__bar .is-done { background: CanvasText; forced-color-adjust: none; }
}

.auth-home-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 24px;
    padding: 8px 14px;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: var(--auth-forest);
    font-weight: 600;
    text-decoration: none;
}
.auth-home-link:hover { color: var(--auth-forest); background: #e4eae3; }
.auth-home-link:focus-visible { outline: 3px solid var(--auth-gold-text); outline-offset: 3px; }