/* ─────────────────────────────────────────────────────────────────────────────
   Forms, in the fx language.

   ONE SHEET FOR EVERY PUBLIC FORM. This started as pages/contact.css, written
   for the contact page alone; the careers application needed the same treatment
   and the alternative was a second copy of it, so it moved here. Contact and
   Careers both load it, and anything that grows a form next should too.

   LOAD IT AFTER elements/form.css. That ordering is what makes the overrides
   land: almost every rule below is the same specificity as the one it replaces,
   so the cascade is doing the work and this file must come second. It cannot
   live in fx.css for the same reason — fx.css is in the layout <head>, which is
   BEFORE anything a page pushes, so form.css would win.

   WHAT IT REPLACED, on contact: a "glass" card — rgba(0,0,0,.35) over a 20px
   backdrop blur, a 1px white border, an 80px drop shadow — holding a stack of
   pill-shaped fields at 25px radius with 1.5px borders, and two buttons that
   lifted 1px and grew a shadow on hover. On careers: a #121212 band holding a
   520px centred column of filled #1a1a1a fields with #2e2e2e borders, centred
   step dots and two white pill buttons.

   Neither survives contact with the rest of the estate. This design has no
   fills, no radii, no shadows and nothing that moves on hover: a field is a
   label over a hairline, focus brightens that hairline, and the forward action
   takes .fx-btn--primary's inversion.

   NO CLASS HERE IS NEW TO THE MARKUP where a script already had a hook. The
   contact and careers scripts bind to .form-step, .step-item, .step-indicator,
   .btn-next, .btn-back, .input-error and a fistful of ids; every one of them is
   styled through the name the script already uses.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── The split ────────────────────────────────────────────────────────────
   Argument on the left, the thing itself on the right — the two-column split
   the capability rows and the FLoCK offer band already use, rather than a
   centred box nothing else on the site shares. */

.fx-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
}

.fx-form-art {
    margin: 0;
}

.fx-form-art img {
    display: block;
    width: 100%;
    height: auto;
}

/* The left column when it carries copy rather than an illustration. */
.fx-form-aside .fx-h {
    margin-bottom: 18px;
}

.fx-form-aside .fx-lede {
    max-width: 38ch;
}

@media (max-width: 900px) {
    .fx-form-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* The illustration is decoration; on a phone it costs a screen of scrolling
       before the first field. Copy in that column is not decoration and stays. */
    .fx-form-art {
        display: none;
    }
}

/* ─── The box that is not a box ────────────────────────────────────────────
   form.css gives .container-form a 600px min-width, a tinted ground, a blurred
   backdrop, a border and a 25px radius. All of it is undone; what is left is a
   column of fields. The min-width in particular had to go — at 600px it was
   wider than its own grid track below 1100px and pushed the page sideways. */
.fx-form {
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    color: var(--fx-muted);
}

/* ─── Step header ──────────────────────────────────────────────────────── */

.fx-form .step-header {
    margin-bottom: 36px;
}

.fx-form .step-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--fx-fg);
}

.fx-form .step-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fx-label);
}

/* ─── Step indicator ───────────────────────────────────────────────────────
   Dots that scaled 1.4x when active and turned green when complete, centred
   over the fields. Two rules now, left-aligned with them: the current step is a
   bright segment, the rest are the page's own hairline. */

.fx-form .step-indicator {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    margin-bottom: 36px;
}

.fx-form .step-item {
    width: 34px;
    height: 2px;
    border-radius: 0;
    background: var(--fx-rule);
    transform: none;
    transition: background-color 0.25s ease;
}

.fx-form .step-item.active,
.fx-form .step-item.completed {
    width: 34px;
    background: var(--fx-fg);
    transform: none;
}

/* ─── Fields ───────────────────────────────────────────────────────────────
   A label over a bottom rule. No fill, no box, no radius. Focus brightens the
   rule — the same move the nav links and the footer links make. */

.fx-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    margin: 0 0 28px;
}

.fx-form .form-group label {
    width: auto;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--fx-label);
}

/* Two fields on one line — given name / family name, email / phone. Collapses
   on a narrow column, where side-by-side fields are two cramped half-fields. */
.fx-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

@media (max-width: 560px) {
    .fx-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.fx-form input,
.fx-form select,
.fx-form textarea {
    width: 100%;
    box-sizing: border-box;
    flex: unset;
    padding: 10px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--fx-rule);
    border-radius: 0;
    color: var(--fx-fg);
    font-family: inherit;
    font-size: 16px;
    transition: border-color 0.2s ease;
}

.fx-form input:focus,
.fx-form select:focus,
.fx-form textarea:focus {
    outline: none;
    border-bottom-color: var(--fx-fg);
    box-shadow: none;
}

.fx-form input::placeholder,
.fx-form textarea::placeholder {
    color: var(--fx-label);
}

/* The native menu is drawn by the OS, so it needs a ground of its own — it
   cannot inherit the page's. */
.fx-form select option {
    background: var(--fx-bg-raised);
    color: var(--fx-fg);
}

.fx-form textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

/* form.css paints invalid fields with a red ring and a red fill-adjacent
   border. On this ground a ring reads as a glow; the rule itself carries it. */
.fx-form .input-error {
    border-color: var(--fx-danger);
    border-bottom-color: var(--fx-danger);
    box-shadow: none;
}

/* ─── File input ───────────────────────────────────────────────────────────
   The one field that cannot be a bare rule: the browser draws the button, and
   an unstyled one is a grey OS chrome rectangle in the middle of the column. It
   gets the ghost button's treatment and the field keeps its hairline. */

.fx-form input[type="file"] {
    padding: 12px 0;
    font-size: 13px;
    color: var(--fx-label);
    cursor: pointer;
}

.fx-form input[type="file"]::-webkit-file-upload-button,
.fx-form input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--fx-rule-strong);
    border-radius: 999px;
    color: var(--fx-fg);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fx-form input[type="file"]:hover::-webkit-file-upload-button,
.fx-form input[type="file"]:hover::file-selector-button {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

/* A note under (or over) a field — what the file has to be, what the box is
   for. Not a label: it carries no name, so it is not tracked caps. */
.fx-form .form-hint {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fx-label);
}

/* ─── Service links ────────────────────────────────────────────────────── */

.fx-form .serv {
    display: inline-block;
    margin: 0 18px 0 0;
    font-size: 14px;
    color: var(--fx-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--fx-rule-strong);
}

.fx-form .serv:hover {
    color: var(--fx-fg);
    text-decoration-color: var(--fx-fg);
}

/* ─── Terms ────────────────────────────────────────────────────────────────
   The row sits on the form's own left edge, and the box is drawn here rather
   than by the browser or by form.css. */

.fx-form .terms-label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* THE WHOLE SHORTHAND, not just the top. form.css sets `margin: 16px 10%`;
       overriding only margin-top left those 10% side margins in place, which
       indented the entire row about 60px past the left edge that every field
       above it and both buttons below it start at. It was the one thing in
       either form that did not line up with anything. */
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fx-label);
    cursor: pointer;
}

/* form.css already replaces the native control (`appearance: none`) and draws
   its own: a 2px border at 4px radius that fills #7cb8f0 when checked — a blue
   that appears nowhere else on the estate. Because the native control is gone,
   `accent-color` has nothing to colour; the box has to be drawn, so this draws
   it in the same hairline language as the fields above it. */
.fx-form .terms-label input[type="checkbox"] {
    flex: none;
    position: relative;
    width: 16px;
    height: 16px;
    /* Centres the box on the first line's cap height rather than hanging it off
       the line box top: (13px × 1.6) − 16 ≈ 5, half of that, plus a hair. */
    margin: 3px 0 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--fx-rule-strong);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fx-form .terms-label input[type="checkbox"]:hover {
    border-color: var(--fx-fg);
}

/* Checked is the page inverted, the same move .fx-btn--primary makes. */
.fx-form .terms-label input[type="checkbox"]:checked {
    background: #ffffff;
    border-color: #ffffff;
}

.fx-form .terms-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 8px;
    border: 2px solid #0a0a0a;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -60%) rotate(45deg);
}

.fx-form .terms-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--fx-accent);
    outline-offset: 3px;
}

.fx-form .terms-label a {
    color: var(--fx-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Buttons ──────────────────────────────────────────────────────────────
   .fx-btn's treatment, reached through the class names the script already
   uses — the markup cannot gain a class without the script losing a hook. */

.fx-form .step-nav {
    display: flex;
    gap: 12px;
    margin-top: 40px;
}

.fx-form .step-nav .button,
.fx-form .step-nav button {
    flex: 1;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Scoped under .step-nav deliberately. The shared rule above is
   `.fx-form .step-nav button`, which an element selector makes (0,2,1) — higher
   than a bare `.fx-form .btn-back` at (0,2,0) — so its `border: 1px solid
   transparent` shorthand beat the back button's own border-color and drew it
   with no edge at all. Matching the selector depth settles it. */
.fx-form .step-nav .btn-next,
.fx-form .step-nav [type="submit"] {
    background: #ffffff;
    color: #0a0a0a;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.fx-form .step-nav .btn-next:hover,
.fx-form .step-nav [type="submit"]:hover {
    background: rgba(255, 255, 255, 0.82);
    transform: none;
    box-shadow: none;
}

.fx-form .step-nav [type="submit"]:disabled {
    background: var(--fx-rule-strong);
    color: var(--fx-label);
    cursor: not-allowed;
}

.fx-form .step-nav .btn-back {
    /* Narrower than the forward action: back is an escape, not a choice equal
       to submitting. */
    flex: 0 0 34%;
    background: transparent;
    color: var(--fx-fg);
    border-color: var(--fx-rule-strong);
    transform: none;
    box-shadow: none;
}

.fx-form .step-nav .btn-back:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #ffffff;
    transform: none;
    box-shadow: none;
}

/* ─── Steps and success ────────────────────────────────────────────────── */

.fx-form .form-step {
    display: none;
}

.fx-form .form-step.active {
    display: block;
    animation: fx-form-in 0.35s ease both;
}

@keyframes fx-form-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* form.css sizes .checkmark at 100% of its wrapper, and the careers form has no
   .checkmark-wrapper around it — so it filled the whole column. */
.fx-form .checkmark {
    width: 52px;
    height: 52px;
}

.fx-form .success-message,
.fx-form .success-text {
    color: var(--fx-fg);
}

/* The transitional panel a script swaps in while the request is in flight
   ("Sending…", then "Thank you"). form.css centres it; it belongs on the same
   left edge as everything else in the column. */
.fx-form .form-text {
    align-items: flex-start;
    text-align: left;
    gap: 8px;
}

.fx-form .form-text h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--fx-fg);
}

.fx-form .form-text span {
    font-size: 14px;
    color: var(--fx-label);
}

@media (prefers-reduced-motion: reduce) {
    .fx-form .form-step.active {
        animation: none;
    }

    .fx-form input,
    .fx-form select,
    .fx-form textarea,
    .fx-form .step-item,
    .fx-form .step-nav button,
    .fx-form input[type="file"]::-webkit-file-upload-button,
    .fx-form input[type="file"]::file-selector-button,
    .fx-form .terms-label input[type="checkbox"] {
        transition: none;
    }
}