/* Sign-in, signup and welcome pages (auth-layout.php). DESIGN.md §6.28.
   One form column and one photo, in three looks: .au-look-split, .au-look-fade, .au-look-card.
   Plain and quiet on purpose: one ink colour, one solid button, real photos, no decorative gradients.
   Loaded after styles.css and whatsapp-login.css; everything is scoped under body.au. */

body.au {
    --au-bg: #ffffff;
    --au-bg-rgb: 255, 255, 255;
    --au-ink: #0f1b2d;
    --au-muted: #5a6475;
    --au-line: #d5dae1;
    --au-field: #f7f8fa;
    --au-accent: #0f2a44;
    --au-accent-hover: #1b3f63;
    --au-accent-ink: #ffffff;
    --au-chip-on: #e9eff6;
    --au-link: #0f4c81;
    --au-focus: rgba(37, 99, 235, 0.28);
    --au-err: #b42318;
    --au-err-bg: #fef3f2;
    --au-err-line: #fecdca;
    --au-ok: #067647;
    --au-ok-bg: #ecfdf3;
    --au-ok-line: #abefc6;
    --au-warn: #93370d;
    --au-warn-bg: #fffaeb;
    --au-warn-line: #fedf89;
    /* styles.css and whatsapp-login.css read these. */
    --text-primary: var(--au-ink);
    --text-secondary: var(--au-ink);
    --text-muted: var(--au-muted);
    --border-color: var(--au-line);
    --input-bg: var(--au-field);
    --input-border: var(--au-line);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--au-bg);
    color: var(--au-ink);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.au.dark-mode {
    --au-bg: #0e1622;
    --au-bg-rgb: 14, 22, 34;
    --au-ink: #e8edf4;
    --au-muted: #9aa6b8;
    --au-line: #2b3747;
    --au-field: #152131;
    --au-accent: #e8edf4;
    --au-accent-hover: #ffffff;
    --au-accent-ink: #0e1622;
    --au-chip-on: #1d2c40;
    --au-link: #8cc4ff;
    --au-focus: rgba(140, 196, 255, 0.35);
    --au-err: #ffb4ab;
    --au-err-bg: #2a1517;
    --au-err-line: #5c2b2b;
    --au-ok: #8ee0b0;
    --au-ok-bg: #0f2a1d;
    --au-ok-line: #1f5a3b;
    --au-warn: #fedf89;
    --au-warn-bg: #2b2210;
    --au-warn-line: #5b4517;
    --text-primary: var(--au-ink);
    --text-secondary: var(--au-ink);
    --text-muted: var(--au-muted);
    --border-color: var(--au-line);
    --input-bg: var(--au-field);
    --input-border: var(--au-line);
}

.au a { color: var(--au-link); }
.au [hidden] { display: none !important; }

/* ---- the form column ---------------------------------------------------------------------------------------- */
.au-shell { min-height: 100vh; min-height: 100dvh; }
.au-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px clamp(20px, 5vw, 56px);
    background: var(--au-bg);
}
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--au-ink) !important; text-decoration: none; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
/* The NegoceFlow logo (assets/brand, identity pack v2): cocoa and blue on light, the reversed cotton and tan one on
   dark mode and over the photo. The small-size cut is drawn for 200 px and under. */
.au .login-logo, .au .au-logo-rev { width: auto; height: 32px; margin: 0; border: 0; border-radius: 0; box-shadow: none; flex: none; }
.au .au-logo-rev { display: none; }
body.dark-mode.au .login-logo { display: none; }
body.dark-mode.au .au-logo-rev { display: block; }
.au-tools { display: flex; align-items: center; gap: 8px; }
.au-lang { display: flex; padding: 2px; border: 1px solid var(--au-line); border-radius: 999px; }
.au-lang a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--au-muted); font-size: 13px; font-weight: 650; text-decoration: none; }
.au-lang a[aria-current] { background: var(--au-ink); color: var(--au-bg); }
.au-icon-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--au-line); border-radius: 999px; background: transparent; color: var(--au-ink); cursor: pointer; }
.au-sun { display: none; }
body.dark-mode .au-sun { display: inline; }
body.dark-mode .au-moon { display: none; }
.au-moon, .au-sun { line-height: 0; }

.au .login-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}
/* styles.css gives the old login card its own background in dark mode, which would win over the rule above. */
body.dark-mode.au .login-box { background: transparent; box-shadow: none; }
.au-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; width: 100%; max-width: 420px; margin: 0 auto; color: var(--au-muted); font-size: 13px; }
.au-foot a { color: var(--au-ink); }
.au-foot p { margin: 0; }

.au h1 { margin: 0 0 8px; color: var(--au-ink); font-size: clamp(26px, 3vw, 32px); font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; }
.au-lead { margin: 0 0 28px; color: var(--au-muted); font-size: 16px; }
.au-alt { margin: 24px 0 0; color: var(--au-muted); font-size: 15px; text-align: center; }
.au-alt a { color: var(--au-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* Step counter: "Step 1 of 2" with two bars. */
.au-steps { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--au-muted); font-size: 13px; font-weight: 600; }
.au-steps ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.au-steps li { width: 28px; height: 4px; border-radius: 4px; background: var(--au-line); }
.au-steps li.is-done { background: var(--au-ink); }

/* ---- fields ------------------------------------------------------------------------------------------------- */
.au .form-group { margin: 0 0 18px; }
.au .form-group > label, .au .wa-phone label, .au-legend { display: block; margin: 0 0 6px; color: var(--au-ink); font-size: 14px; font-weight: 600; }
.au .form-group input, .au .form-group select, .au .wa-phone-row select.wa-phone-dial, .au .wa-phone-row input.wa-phone-local {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--au-line);
    border-radius: 12px;
    background: var(--au-field);
    color: var(--au-ink);
    font-size: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.au .wa-phone-row select.wa-phone-dial { width: auto; max-width: 46%; padding: 8px 10px; }
.au .form-group select { appearance: auto; }
.au .form-group input:focus, .au .form-group select:focus, .au .wa-phone-row select:focus, .au .wa-phone-row input:focus {
    outline: none;
    border-color: var(--au-ink);
    box-shadow: 0 0 0 4px var(--au-focus);
}
.au .form-group input[aria-invalid="true"], .au .form-group select[aria-invalid="true"] { border-color: var(--au-err); }
.au-input { position: relative; }
.au-input > svg { position: absolute; top: 50%; left: 14px; color: var(--au-muted); transform: translateY(-50%); pointer-events: none; }
.au .au-input > input { padding-left: 44px; }
.au .au-input > input.has-reveal { padding-right: 52px; }
.au .au-input-plain > input { padding-left: 14px; }
.au-reveal { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--au-muted); cursor: pointer; transform: translateY(-50%); }
.au-reveal:hover { color: var(--au-ink); }
.au-reveal:focus-visible, .au-icon-btn:focus-visible, .au-lang a:focus-visible, .au .btn:focus-visible, .au .pw-login > summary:focus-visible, .au-choices input:focus-visible + span { outline: 3px solid var(--au-focus); outline-offset: 2px; }
.au-reveal .au-eye-off { display: none; }
.au-reveal[aria-pressed="true"] .au-eye { display: none; }
.au-reveal[aria-pressed="true"] .au-eye-off { display: block; }
.au-help { margin: 6px 0 0; color: var(--au-muted); font-size: 13px; }
.au-field-error { display: flex; gap: 6px; margin: 6px 0 0; color: var(--au-err); font-size: 14px; font-weight: 500; }
.au-field-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--au-err); color: var(--au-bg); font-size: 12px; font-weight: 700; }
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.au-row > * { min-width: 0; }

/* Products as large tick chips. */
.au fieldset { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.au-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.au-choices label { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.au-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-choices span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--au-line); border-radius: 999px; background: var(--au-field); color: var(--au-ink); font-size: 15px; font-weight: 500; }
.au-choices span::before { content: ""; width: 16px; height: 16px; border: 1.5px solid var(--au-muted); border-radius: 5px; box-sizing: border-box; }
.au-choices input:checked + span { border-color: var(--au-ink); background: var(--au-chip-on); font-weight: 600; }
.au-choices input:checked + span::before { border-color: var(--au-ink); background: var(--au-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
body.dark-mode .au-choices input:checked + span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230e1622' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.au fieldset[aria-invalid="true"] .au-choices span { border-color: var(--au-err); }

/* ---- messages ----------------------------------------------------------------------------------------------- */
.au .error { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--au-err-line); border-radius: 12px; background: var(--au-err-bg); color: var(--au-err); font-size: 14px; }
.au .error a { color: inherit; }
.au-note { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--au-ok-line); border-radius: 12px; background: var(--au-ok-bg); color: var(--au-ok); font-size: 14px; }
.au-net { width: 100%; max-width: 420px; margin: 0 auto 16px; padding: 10px 14px; border: 1px solid var(--au-warn-line); border-radius: 12px; background: var(--au-warn-bg); color: var(--au-warn); font-size: 14px; }
.au-net.is-online { border-color: var(--au-ok-line); background: var(--au-ok-bg); color: var(--au-ok); }

/* ---- buttons ------------------------------------------------------------------------------------------------ */
.au .btn, .au .pw-login > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transform: none;
    box-shadow: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.au .btn-primary { background: var(--au-accent); color: var(--au-accent-ink); }
.au .btn-primary:hover { background: var(--au-accent-hover); transform: none; }
.au .btn-secondary, .au .pw-login > summary { border-color: var(--au-line); background: var(--au-bg); color: var(--au-ink); }
.au .btn-secondary:hover, .au .pw-login > summary:hover { background: var(--au-field); }
.au .btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.au .btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: au-spin 0.8s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au .btn[aria-busy="true"]::before { animation: none; } }
.au-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.au-actions .btn-primary { flex: 1; }
.au-back { flex: none; color: var(--au-ink) !important; font-weight: 600; text-decoration: none; padding: 12px 8px; }

/* The WhatsApp code sign-in and the folded email sign-in (whatsapp-login.css, adjusted to this frame). */
.au .wa-login-title { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15px; font-weight: 650; }
.au .wa-login-help { margin: 0 0 14px; }
.au .wa-login-notice { border: 1px solid var(--au-ok-line); border-radius: 12px; background: var(--au-ok-bg); color: var(--au-ok); }
.au .login-divider { margin: 24px 0; color: var(--au-muted); }
.au .login-divider::before, .au .login-divider::after { border-color: var(--au-line); }
.au .pw-login[open] > summary { margin-bottom: 18px; }

/* Sign in / New account: two tabs at the top of the form (links between login.php and signup.php). */
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 28px; padding: 4px; border: 1px solid var(--au-line); border-radius: 14px; background: var(--au-field); }
.au-tabs a { display: grid; place-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--au-muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.au-tabs a:hover { color: var(--au-ink); }
.au-tabs a[aria-current="page"] { background: var(--au-bg); color: var(--au-ink); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08), 0 0 0 1px var(--au-line); }
.au-tabs a:focus-visible { outline: 3px solid var(--au-focus); outline-offset: 2px; }

/* WhatsApp code or email: one way shown at a time, picked with two radios (no JavaScript needed). */
.au-method-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.au-seg { display: flex; gap: 24px; margin: 0 0 18px; border-bottom: 1px solid var(--au-line); }
.au-seg label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 -1px; padding: 10px 2px; border-bottom: 2px solid transparent; color: var(--au-muted); font-size: 15px; font-weight: 600; cursor: pointer; }
.au-seg label svg { flex: none; }
#auMethodWa:checked ~ .au-seg label[for="auMethodWa"], #auMethodPw:checked ~ .au-seg label[for="auMethodPw"] { border-bottom-color: var(--au-ink); color: var(--au-ink); }
#auMethodWa:focus-visible ~ .au-seg label[for="auMethodWa"], #auMethodPw:focus-visible ~ .au-seg label[for="auMethodPw"] { outline: 3px solid var(--au-focus); outline-offset: 2px; border-radius: 6px; }
#auMethodWa:checked ~ .au-method-pw, #auMethodPw:checked ~ .au-method-wa { display: none; }
.au .wa-login-code { margin-top: 18px; }

/* Supplier and driver spaces: one quiet line under the form. */
.au-portals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--au-line); color: var(--au-muted); font-size: 14px; }
.au-portals > span { flex-basis: 100%; }
.au-portal { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--au-line); border-radius: 999px; background: var(--au-bg); color: var(--au-ink) !important; font-weight: 600; text-decoration: none; }
.au-portal:hover { background: var(--au-field); }
.au-portal:focus-visible { outline: 3px solid var(--au-focus); outline-offset: 2px; }

/* The ready page: the seasons made for the products picked at signup. */
.au-seasons { margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--au-line); border-radius: 12px; background: var(--au-field); }
.au-seasons-title { margin: 0 0 8px; font-weight: 600; }
.au-seasons ul { margin: 0; padding: 0; list-style: none; }
.au-seasons li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; }
.au-seasons li span { color: var(--au-muted); font-size: 14px; }
.au-seasons .au-help { margin-top: 8px; }
.op-resend { margin-top: 12px; }

/* The welcome page: the email they will sign in with, read-only. */
.au-who { margin: 0; padding: 12px 14px; border: 1px dashed var(--au-line); border-radius: 12px; font-weight: 600; word-break: break-all; }

/* A finished step: a big tick, then what comes next. */
.au-done-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 20px; border-radius: 50%; background: var(--au-ok-bg); color: var(--au-ok); }
.au-next { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: au-next; }
.au-next li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--au-line); counter-increment: au-next; }
.au-next li:last-child { border-bottom: 1px solid var(--au-line); }
.au-next li::before { content: counter(au-next); position: absolute; top: 12px; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--au-field); border: 1px solid var(--au-line); font-size: 13px; font-weight: 700; }
.au-next strong { display: block; font-weight: 600; }
.au-next span { color: var(--au-muted); font-size: 14px; }

/* ---- the photo ---------------------------------------------------------------------------------------------- */
.au-photo { position: relative; margin: 0; overflow: hidden; background: #3a3127; }
.au-photo picture, .au-photo img { display: block; width: 100%; height: 100%; }
.au-photo img { object-fit: cover; object-position: 55% 40%; }
.au-photo[data-photo="warehouse"] img { object-position: 58% 35%; }
.au-photo[data-photo="loading"] img { object-position: 45% 55%; }
.au-photo[data-photo="farm"] img { object-position: 42% 40%; }
.au-photo[data-photo="truck"] img { object-position: 52% 45%; }
/* hero: the inspector on the left, the dashboard across the top and right. */
.au-photo[data-photo="hero"] img { object-position: 20% 50%; }

/* ---- look 1: split. The form on white, the photo in a rounded panel beside it. ------------------------------ */
@media (min-width: 900px) {
    .au-look-split .au-shell { display: grid; grid-template-columns: minmax(440px, 1fr) minmax(0, 1.2fr); }
    .au-look-split .au-photo { position: sticky; top: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px); margin: 16px 16px 16px 0; border-radius: 24px; }
}
@media (max-width: 899px) {
    .au-look-split .au-shell { display: flex; flex-direction: column; }
    .au-look-split .au-photo { order: -1; flex: none; height: 176px; border-radius: 0 0 20px 20px; }
    .au-look-split .au-panel { min-height: 0; flex: 1; }
}

/* ---- look 2: fade. The photo fills the page and fades to white behind the form. ----------------------------- */
.au-look-fade .au-photo { position: fixed; inset: 0; }
@media (min-width: 900px) {
    /* The photo starts a third of the way in, and the fade ends soon after the form (at most 530px wide), so the
       inspector stays clear of it. */
    .au-look-fade .au-photo { left: 30%; }
    .au-look-fade .au-photo[data-photo="hero"] img { object-position: 8% 50%; }
    .au-look-fade .au-panel { width: min(100%, 700px); padding-left: clamp(32px, 7vw, 104px); background: linear-gradient(90deg, rgb(var(--au-bg-rgb)) 0, rgb(var(--au-bg-rgb)) 545px, rgba(var(--au-bg-rgb), 0.8) 590px, rgba(var(--au-bg-rgb), 0) 680px); }
    .au-look-fade .login-box, .au-look-fade .au-foot, .au-look-fade .au-net { margin-left: 0; }
    .au-look-fade .au-top { max-width: 420px; }
}
@media (max-width: 899px) {
    .au-look-fade .au-photo { position: absolute; inset: 0 0 auto; height: 46vh; }
    /* A dark band at the top only, so the white brand and switches stay readable over the photo. */
    .au-look-fade .au-photo::after { content: ""; position: absolute; pointer-events: none; inset: 0 0 auto; height: 40%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
    /* The photo's own dashboard logo sits top left: shift it under the brand, the inspector's face still in view. */
    .au-look-fade .au-photo[data-photo="hero"] img { object-position: 36% 0; }
    .au-look-fade .au-panel { padding-top: calc(46vh - 140px); background: linear-gradient(to bottom, rgba(var(--au-bg-rgb), 0) 0, rgba(var(--au-bg-rgb), 0) calc(46vh - 220px), rgb(var(--au-bg-rgb)) calc(46vh - 60px)); }
    .au-look-fade .au-top { position: absolute; top: 16px; right: clamp(20px, 5vw, 56px); left: clamp(20px, 5vw, 56px); }
    .au-look-fade .au-brand { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
    .au-look-fade .login-logo { display: none; }
    .au-look-fade .au-logo-rev { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
    .au-look-fade .au-lang, .au-look-fade .au-icon-btn { border-color: rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.25); color: #fff; }
    .au-look-fade .au-lang a { color: #fff; }
    .au-look-fade .au-lang a[aria-current] { background: #fff; color: #0f1b2d; }
}

/* ---- look 3: card. The photo fills the page, the form sits in a white card over it. ------------------------- */
.au-look-card .au-photo { position: fixed; inset: 0; }
.au-look-card .au-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(8, 15, 26, 0.28); pointer-events: none; }
.au-look-card .au-shell { display: grid; place-items: center; padding: 32px 16px 64px; }
.au-look-card .au-panel { width: min(100%, 480px); min-height: 0; padding: 24px 28px 20px; border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); }
.au-look-card .login-box { padding: 32px 0 24px; }
@media (max-width: 899px) {
    .au-look-card .au-shell { place-items: start center; padding: 96px 12px 56px; }
    .au-look-card .au-panel { padding: 20px 18px 16px; }
}

@media (max-width: 899px) {
    .au .login-box { justify-content: flex-start; padding-top: 28px; }
}

/* ---- small phones ------------------------------------------------------------------------------------------- */
@media (max-width: 420px) {
    .au-row { grid-template-columns: 1fr; }
    .au .login-box { padding: 28px 0; }
    .au .login-logo, .au .au-logo-rev { height: 28px; }
}

/* =====================================================================================================
   New design (DESIGN.md §19, Thino's pick C, 2026-11-04): cotton and cocoa tokens, Warehouse Blue for the
   main button only, Barlow and condensed capital titles, square corners. Applies to all three looks; the
   card look (the default) puts a white card with a cocoa top edge on the right of a warmly tinted photo,
   with a short line on the photo. Everything above stays as the layout.
   ===================================================================================================== */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

body.au {
    --au-bg: #F4EDE0; --au-bg-rgb: 244, 237, 224; --au-card: #FFFFFF;
    --au-ink: #4A2E1F; --au-muted: #6E584A; --au-line: #B9A68C; --au-line-soft: #E2D6C2; --au-field: #FFFFFF;
    --au-accent: #2F5D8C; --au-accent-hover: #244A70; --au-accent-ink: #FFFFFF; --au-chip-on: #E4ECF4;
    --au-link: #2F5D8C; --au-focus: rgba(47, 93, 140, 0.35); --au-tan: #C8A97E; --au-wa: #1F7A4D;
    --au-err: #A3392A; --au-err-bg: #F7E2DD; --au-err-line: #E7B9AE;
    --au-ok: #2E6A43; --au-ok-bg: #E3EFE6; --au-ok-line: #B7D3BF;
    --au-warn: #8A5A0F; --au-warn-bg: #F8ECD6; --au-warn-line: #E3C68E;
    --au-font: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    --au-font-title: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    font: 400 16px/1.45 var(--au-font);
}
body.au.dark-mode {
    --au-bg: #1E140E; --au-bg-rgb: 30, 20, 14; --au-card: #2A1D14;
    --au-ink: #F4EDE0; --au-muted: #C9B8A6; --au-line: #5A4433; --au-line-soft: #3E2E22; --au-field: #241910;
    --au-accent: #9DBEE2; --au-accent-hover: #BCD3EC; --au-accent-ink: #1E140E; --au-chip-on: #2C3B4D;
    --au-link: #9DBEE2; --au-focus: rgba(157, 190, 226, 0.4); --au-wa: #86C59D;
    --au-err: #F0998A; --au-err-bg: #3F231D; --au-err-line: #6A3A30;
    --au-ok: #86C59D; --au-ok-bg: #22362A; --au-ok-line: #3A5A45;
    --au-warn: #E6BC6E; --au-warn-bg: #3B2D14; --au-warn-line: #5E4920;
}
/* Square corners everywhere (DESIGN.md §4); the busy spinner stays round. */
.au *, .au *::before, .au *::after { border-radius: 0 !important; }
.au .btn[aria-busy="true"]::before, .au-field-error::before { border-radius: 50% !important; }
.au .au-brand { font-family: var(--au-font); }
.au h1 { font: 700 clamp(32px, 3.4vw, 40px)/1 var(--au-font-title); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 10px; }
.au-lead { font-size: 16px; margin-bottom: 22px; }
.au .form-group > label, .au .wa-phone label, .au-legend { font: 500 14px var(--au-font); color: var(--au-muted); }
.au .form-group input, .au .form-group select, .au .wa-phone-row select.wa-phone-dial, .au .wa-phone-row input.wa-phone-local {
    border-color: var(--au-line); background: var(--au-field); font-family: var(--au-font);
}
.au .form-group input:focus, .au .form-group select:focus, .au .wa-phone-row select:focus, .au .wa-phone-row input:focus {
    border-color: var(--au-accent); box-shadow: 0 0 0 1px var(--au-accent);
}
.au .form-group input[aria-invalid="true"], .au .form-group select[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--au-err); }
.au .btn, .au .pw-login > summary { font: 500 16px var(--au-font); }
.au .btn-secondary, .au .pw-login > summary { background: transparent; }
.au-lang { padding: 0; border-color: var(--au-line); }
.au-lang a { min-height: 34px; font-weight: 500; }
.au-icon-btn { border-color: var(--au-line); }
/* Sign in / New account: two plain tabs with a blue underline. */
.au-tabs { gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--au-line); background: transparent; margin-bottom: 24px; }
.au-tabs a { min-height: 46px; font-weight: 500; color: var(--au-muted); }
.au-tabs a[aria-current="page"] { background: transparent; color: var(--au-ink); box-shadow: inset 0 -3px 0 var(--au-accent); }
/* WhatsApp or e-mail: one bar of two halves, the picked one on the blue tint. */
.au-seg { gap: 0; border: 1px solid var(--au-line); background: var(--au-field); }
.au-seg label { flex: 1; justify-content: center; margin: 0; min-height: 44px; padding: 8px 10px; border-bottom: 0; font-weight: 500; }
.au-seg label + label { border-left: 1px solid var(--au-line); }
.au-seg label[for="auMethodWa"] svg { color: var(--au-wa); }
#auMethodWa:checked ~ .au-seg label[for="auMethodWa"], #auMethodPw:checked ~ .au-seg label[for="auMethodPw"] { background: var(--au-chip-on); color: var(--au-accent); box-shadow: inset 0 -2px 0 var(--au-accent); }
.au-steps li.is-done { background: var(--au-accent); }
.au-steps li { height: 3px; }
.au-portals { border-top-color: var(--au-line-soft); }
.au-portal { flex: 1 1 160px; justify-content: center; min-height: 44px; border-color: var(--au-line); background: transparent; font-weight: 500; }
.au-choices span { background: var(--au-field); border-color: var(--au-line); }
.au-choices input:checked + span { border-color: var(--au-accent); background: var(--au-chip-on); }
.au-choices input:checked + span::before { border-color: var(--au-accent); background-color: var(--au-accent); }
.au-seasons, .au-who { border-color: var(--au-line-soft); }
.au-done-mark { width: 56px; height: 56px; }
.au-next li::before { background: var(--au-card); }
.au .login-divider::before, .au .login-divider::after { border-color: var(--au-line-soft); }
.au-foot { color: var(--au-muted); }

/* The card look (default): warm tint on the photo, the card on the right, a line on the photo bottom left. */
.au-look-card .au-photo::before { background: linear-gradient(90deg, rgba(43, 27, 18, 0.15), rgba(43, 27, 18, 0.55)); }
.au-look-card .au-panel { background: var(--au-card); box-shadow: 0 18px 48px rgba(43, 27, 18, 0.28); border-top: 4px solid var(--au-ink); }
.au-tagline { display: none; }
@media (min-width: 900px) {
    .au-look-card .au-shell { place-items: center end; padding: 28px clamp(24px, 5vw, 72px); }
    .au-look-card .au-panel { width: min(100%, 470px); }
    .au-look-card .au-tagline {
        display: block; position: fixed; z-index: 1; left: clamp(24px, 4vw, 56px); bottom: 40px; max-width: min(520px, calc(100vw - 600px));
        color: #F4EDE0; pointer-events: none;
    }
    .au-tagline p { margin: 0; color: #F1E6D6; font-size: 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
    .au-tagline .au-tagline-title { margin: 0 0 10px; color: #F4EDE0; font: 700 clamp(36px, 4vw, 52px)/1 var(--au-font-title); text-transform: uppercase; letter-spacing: .3px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
}
@media (min-width: 900px) and (max-width: 1100px) { .au-look-card .au-tagline { display: none; } }
@media (max-width: 899px) {
    .au-look-card .au-photo { bottom: auto; height: 320px; }
    .au-look-card .au-shell { padding: 150px 12px 32px; }
}

/* The supplier and driver sign-in pages (supplierAuthFrame / driverAuthFrame): their own form in this frame. */
.au-portal-page > p:first-of-type { margin: 0 0 22px; color: var(--au-muted); font-size: 16px; }
.au-portal-page .form-group { margin: 0 0 18px; display: grid; gap: 12px; }
.au-portal-page .form-group > label { margin: 0; }
.au-portal-page .form-group > input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--au-line); background: var(--au-field); color: var(--au-ink); font: 400 18px var(--au-font); letter-spacing: .2em; }
.au-portal-page .form-group > input:focus { outline: none; border-color: var(--au-accent); box-shadow: 0 0 0 1px var(--au-accent); }
.au-portal-page .supplier-small { margin: 0 0 10px; color: var(--au-muted); font-size: 14px; }
.au-portal-page .form-group .supplier-small { margin: 0; font-size: 13px; }
.au-portal-page p.supplier-small:last-child { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--au-line-soft); }
.au-portal-page p.supplier-small:last-child a { color: var(--au-ink); font-weight: 500; }
.au-portal-page .supplier-notice { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--au-ok-line); background: var(--au-ok-bg); color: var(--au-ok); font-size: 14px; }
.au-portal-page .portal-pick { display: grid; gap: 10px; }
.au-portal-page .portal-pick .btn { justify-content: flex-start; background: var(--au-card); color: var(--au-ink); border-color: var(--au-line); }
.au-portal-page .portal-pick .btn:hover { border-color: var(--au-accent); background: var(--au-chip-on); }

/* A portal's own language switch in the frame (supplier-portal.css places .supplier-lang absolutely on its own card). */
.au-top .supplier-lang { position: static; top: auto; right: auto; font-size: inherit; }
.au-top .supplier-lang a { display: inline-flex; padding: 0 12px; }
.au-top .supplier-lang a[aria-current] { color: var(--au-bg); font-weight: 500; }