/* ═══════════════════════════════════════════════════════════════════════════
   Palladium.Forms — default frontend styles (.palladium-form)
   Loaded as module CSS (before page GeneratedCss, so page/theme rules override).
   Supports BOTH form patterns produced by the editor:
     • classic:  <label> before the control  → normal stacked label
     • floating: <control placeholder=" ">< label> (label AFTER the control)
   Colors ride the site theme tokens with sensible fallbacks.
   ═══════════════════════════════════════════════════════════════════════════ */

.palladium-form {
    display: grid;
    gap: 1rem;
    max-width: 100%;
}

/* Any direct wrapper div that isn't itself a field = a row of fields */
.palladium-form > div:not(.field):not(.pd-form-error) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.palladium-form > div:not(.field) > .field {
    flex: 1 1 230px;
    min-width: 0;
}

.palladium-form .field {
    position: relative;
    display: block;
    margin: 0;
}

/* ── Controls ──
   :where() keeps the exclusions at ZERO specificity so the :has(+ label)
   padding rule below can override without arms races. */
.palladium-form input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"])),
.palladium-form select,
.palladium-form textarea {
    width: 100%;
    font: inherit;
    font-size: .95rem;
    color: var(--fg, #16140f);
    background: var(--surface, #fff);
    border: 1px solid var(--border-strong, rgba(0, 0, 0, .18));
    border-radius: 10px;
    padding: .8rem .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
    box-sizing: border-box;
}
.palladium-form textarea {
    min-height: 8.5rem;
    resize: vertical;
}
.palladium-form input:hover,
.palladium-form select:hover,
.palladium-form textarea:hover {
    border-color: var(--accent, #14807E);
}
.palladium-form input:focus,
.palladium-form select:focus,
.palladium-form textarea:focus {
    border-color: var(--accent, #14807E);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #14807E) 18%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .palladium-form input:focus,
    .palladium-form select:focus,
    .palladium-form textarea:focus {
        box-shadow: 0 0 0 3px rgba(20, 128, 126, .18);
    }
}

/* Champ touché puis laissé invalide (jamais au premier rendu) */
.palladium-form input:user-invalid,
.palladium-form select:user-invalid,
.palladium-form textarea:user-invalid {
    border-color: var(--danger, #B4533A);
}

/* ── Select: custom chevron ── */
.palladium-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23707070' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95rem center;
    padding-right: 2.4rem;
    cursor: pointer;
}

/* ── Floating labels (label placed AFTER its control) ── */
/* Room for the floated label (the base rule's exclusions are :where()-wrapped,
   so these plain :has() selectors win the cascade). */
.palladium-form input:where(:not([type="checkbox"]):not([type="radio"])):has(+ label),
.palladium-form select:has(+ label),
.palladium-form textarea:has(+ label) {
    padding-top: 1.45rem;
    padding-bottom: .45rem;
}
.palladium-form :is(input, select, textarea) + label {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    color: var(--fg-muted, rgba(22, 20, 15, .55));
    font-size: .95rem;
    line-height: 1;
    transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
    white-space: nowrap;
    max-width: calc(100% - 2rem);
    overflow: hidden;
    text-overflow: ellipsis;
}
.palladium-form textarea + label {
    top: 1.25rem;
    transform: none;
}
/* Floated state: focus, non-empty input, or any select (its box always shows a value) */
.palladium-form input:focus + label,
.palladium-form input:not(:placeholder-shown) + label,
.palladium-form textarea:focus + label,
.palladium-form textarea:not(:placeholder-shown) + label,
.palladium-form select + label {
    top: .45rem;
    transform: none;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-fg, var(--accent, #14807E));
}

/* ── Classic labels (label BEFORE the control) ── */
.palladium-form label:not(input + label):not(select + label):not(textarea + label) {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .35rem;
    color: var(--fg, inherit);
}

/* ── Checkboxes / radios ── */
.palladium-form input[type="checkbox"],
.palladium-form input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent, #14807E);
    margin-right: .45rem;
    vertical-align: -2px;
}

/* ── Submit button ──
   Low specificity on purpose: theme classes (.btn, .btn--lg…) and page CSS,
   loaded after this file, override freely. */
.palladium-form [type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    padding: .85rem 1.6rem;
    border: none;
    border-radius: 10px;
    background: var(--accent, #14807E);
    color: #fff;
    cursor: pointer;
    transition: filter .15s ease, transform .05s ease;
}
.palladium-form [type="submit"]:hover:not(:disabled) { filter: brightness(.92); }
.palladium-form [type="submit"]:active:not(:disabled) { transform: translateY(1px); }
.palladium-form [type="submit"]:disabled {
    opacity: .65;
    cursor: progress;
}
.palladium-form [type="submit"]:focus-visible {
    outline: 2px solid var(--accent, #14807E);
    outline-offset: 2px;
}

/* ── Footnote under the button ── */
.palladium-form .caption {
    margin: 0;
    font-size: .78rem;
    color: var(--fg-subtle, rgba(22, 20, 15, .5));
    text-align: center;
}

/* ── Submit error (injected by forms-submit.js next to the form) ── */
.pd-form-error {
    padding: .8rem 1rem;
    margin-top: .75rem;
    border: 1px solid var(--danger-border, #E8C8BE);
    background: var(--danger-soft, #F9ECE8);
    color: var(--danger, #B4533A);
    border-radius: 10px;
    font-size: .9rem;
}

/* ── Small screens: rows collapse ── */
@media (max-width: 560px) {
    .palladium-form > div:not(.field) { flex-direction: column; }
}