/*
 * Contact FlowVella: the Flow Family card (components.css, auth-page.css)
 * plus the pieces a contact form needs that the AuthCard has no component
 * for. Tokens only; nothing here introduces a colour or a size of its own
 * except the message box height. Candidates for the design system package:
 * TextField "select" and "multiline" variants.
 */

/* The form is longer than sign-in, so it starts closer to the subtitle. */
.flow-contact .flow-card__form { margin-top: 32px; }

/* TextField, select variant: same box as .flow-field, native menu. */
.flow-contact .flow-field--select { padding: 0; }
.flow-contact .flow-field--select select {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 44px 0 var(--field-inset);
    font: 400 17px/22px var(--font-system);
    color: var(--ink);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.flow-contact .flow-field__chevron {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1.75px solid var(--muted);
    border-bottom: 1.75px solid var(--muted);
    transform: rotate(45deg);
    pointer-events: none;
}

/* TextField, multiline variant: the field grows; the textarea draws nothing. */
.flow-contact .flow-field--area { height: auto; align-items: stretch; }
.flow-contact .flow-field--area textarea {
    flex: 1;
    min-width: 0;
    min-height: 140px;
    padding: 14px var(--field-inset);
    font: 400 17px/22px var(--font-system);
    color: var(--ink);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    resize: vertical;
}
.flow-contact .flow-field--area textarea::placeholder { color: var(--muted); }

/* Turnstile sits centered under the fields; the guard's retry note matches
   the card's error text. */
.flow-contact .cf-turnstile {
    position: relative;
    width: 300px;
    height: 65px;
    max-width: 100%;
    margin: 0 auto !important;
    line-height: 0;
}
/* Turnstile's iframe sits in a closed shadow root and draws its own square
   grey border, so rounding the outside cut that border at the corners. Clip
   1px inside it instead, with the field radius, and draw the field's own
   hairline border over the edge. */
.flow-contact .cf-turnstile > div {
    clip-path: inset(1px round calc(var(--radius-field) - 1px));
}
.flow-contact .cf-turnstile::after {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid var(--hairline);
    border-radius: calc(var(--radius-field) - 1px);
    pointer-events: none;
}
.flow-contact .form-guard-error { margin: 0 !important; text-align: center; font: 400 14px/18px var(--font-system); }

/* Phone and mailing address under the divider. */
.flow-contact .flow-action { text-decoration: none; }
.flow-contact__address {
    margin: var(--gap-link) 0 0;
    color: var(--muted);
    text-align: center;
}

/* The way out: the card stays centred in the space above the footer. */
.flow-contact { grid-template-rows: 1fr auto; row-gap: 24px; }
.flow-contact__home { left: 32px; right: auto; gap: 6px; font-size: 18px; }
.flow-contact__home span { font: 600 16px/22px var(--font-system); }
.flow-contact__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    color: var(--on-photo);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.flow-contact__footer a { color: var(--on-photo); text-decoration: none; font-weight: 500; }
.flow-contact__footer a:hover { text-decoration: underline; }
.flow-contact__footer span { opacity: 0.8; }
.flow-contact__thanks { margin-top: 32px; }
@media (max-width: 560px) {
    .flow-contact__home { left: 16px; }
}

/* Demo form: first and last name share a row. */
.flow-contact__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; }
.flow-contact__pair .flow-field { width: auto; min-width: 0; max-width: none; }
@media (max-width: 420px) { .flow-contact__pair { grid-template-columns: 1fr; } }
/* In the Mac app's web view there is no photo chrome to clear. */
.flow-contact--app { padding-top: 24px; padding-bottom: 24px; }