/* ==========================================================================
   formlib.css - CORE: what the form needs to work (messages, summary, honeypot,
   "please wait" panel, Send button states, file lists). The same on every site.
   The form's look (font, spacing, box, fields, sections) and its colors are in formlib-site.css,
   which loads after this file. Colors here use the --formlib-* variables set in formlib-site.css;
   the value after each comma is the fallback used if formlib-site.css isn't loaded.
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: thank-you page copy styled like the email (formlib-thanks, at the end);
   lighter grey border around thank-you page thumbnails
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: full-screen loading overlay replaced by a "please wait" panel in the Send button's place
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: Send button "Checking..." state; "check the box above" prompt with an up arrow
   ========================================================================== */

/* (Sat, 10/03/2026) Claude Opus 5.5 - required: messages and helpers
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: colors use the --formlib-* variables */
   
.formlib-sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;}
.formlib-hp {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
.formlib-req {margin-left:.15em; color:var(--formlib-error, #b00020); font-weight:bold;}
.formlib-hint {display:block; margin:0 0 .35em; color:var(--formlib-hint, #4a4a4a);}
.formlib-hint[hidden] {display:none;}
.formlib-error {display:block; margin-top:.35em; color:var(--formlib-error, #b00020); font-weight:bold;}
.formlib-error:empty {display:none;}
.formlib-counter {display:block; margin-top:.6em; color:var(--formlib-hint, #4a4a4a); font-size:.9em;}
/* (Mon, 10/05/2026) Claude Opus 5.5 - counter at the limit: pale yellow highlight behind the text only (the transparent border shows in Windows high-contrast mode, where backgrounds are removed) */
.formlib-counter-full {align-self:flex-start; width:fit-content; max-width:100%; padding:.1em .4em; border:1px solid transparent; border-radius:3px; color:var(--formlib-text, #000); background-color:var(--formlib-counter-full-bg, #fff3a8);}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {border-color:var(--formlib-error, #b00020); outline:2px solid var(--formlib-error, #b00020); outline-offset:0;}
input[type="radio"][aria-invalid="true"], input[type="checkbox"][aria-invalid="true"] {outline-offset:2px;}

/* (Sat, 10/03/2026) Claude Opus 5.5 - required: list of chosen files under upload fields
   (Sun, 10/04/2026) Claude Opus 5.5 - Revised: larger X in a smaller box (24px square at a 16px body size)
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: the X is two CSS bars instead of a text character, so it is always centered */
/* (Mon, 10/05/2026) Claude Opus 5.5 - file button + formlib's own status ("2 files uploaded"). formlib.js adds the
   formlib-file-own-status class, which hides the browser's own text (font-size 0) and keeps the button full size.
   Without JavaScript the class is never added, so the browser's own text still shows */
.formlib-file-row {display:flex; flex-wrap:wrap; align-items:center; gap:.5em .75em;}
.formlib-form input[type="file"].formlib-file-own-status {font-size:0;}
.formlib-form input[type="file"].formlib-file-own-status::file-selector-button {margin:0; font-size:max(16px, 1rem);}
.formlib-form input[type="file"].formlib-file-own-status::-webkit-file-upload-button {margin:0; font-size:max(16px, 1rem);}
.formlib-file-status {color:var(--formlib-text, #000);}
.formlib-files {margin:.5em 0 0;}
.formlib-files[hidden] {display:none;}
.formlib-files-count {margin:0 0 .25em; font-weight:bold;}
.formlib-files ul {margin:0; padding:0; list-style:none;}
.formlib-files li {display:flex; align-items:center; margin:.3em 0;}
.formlib-files li span {min-width:0; overflow-wrap:anywhere;}
/* box size is in the X's own em: 1.2em x 1.25em font = 1.5 times the text size. Change font-size and the box changes with it */
.formlib-remove {position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:1.2em; height:1.2em; margin-left:.4em; padding:0; border:1px solid var(--formlib-error, #b00020); border-radius:2px; color:var(--formlib-error, #b00020); background-color:var(--formlib-field-bg, #fff); font:inherit; font-size:1.25em; font-weight:bold; line-height:1; cursor:pointer;}
.formlib-remove::before, .formlib-remove::after {content:""; position:absolute; top:50%; left:50%; width:62%; height:.13em; border-radius:1px; background-color:currentColor; transform:translate(-50%, -50%) rotate(45deg);}
.formlib-remove::after {transform:translate(-50%, -50%) rotate(-45deg);}
.formlib-remove:hover {color:var(--formlib-field-bg, #fff); background-color:var(--formlib-error, #b00020);}
@media (forced-colors: active) {.formlib-remove::before, .formlib-remove::after {background-color:ButtonText;}}
.formlib-remove:focus-visible {outline:3px solid var(--formlib-focus, #000); outline-offset:2px;}

/* (Sun, 10/04/2026) Claude Opus 5.5 - required: Send button (not-ready color + "ban" icon until Turnstile passes, then ready color + arrow)
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: colors come from --formlib-btn, --formlib-btn-hover, --formlib-btn-off, --formlib-btn-text */
.formlib-submit {position:relative; z-index:1; display:inline-flex; align-items:center; overflow:hidden; padding:.55em 1.1em; border:0; border-radius:10rem; color:var(--formlib-btn-text, #fff); background-color:var(--formlib-btn, #1457a3); font:inherit; font-size:1.2em; line-height:normal; cursor:pointer; transition:background-color .4s, color .4s;}
.formlib-submit::before {content:""; position:absolute; top:0; bottom:0; left:0; z-index:-1; width:0; background-color:var(--formlib-btn-hover, #000); transition:width .3s;}
.formlib-submit:hover::before {width:100%;}
.formlib-submit:focus-visible {outline:3px solid var(--formlib-focus, #000); outline-offset:3px;}
.formlib-submit[aria-disabled="true"] {background-color:var(--formlib-btn-off, #767676); cursor:not-allowed;}
.formlib-submit[aria-disabled="true"]::before {display:none;}
.formlib-submit:disabled {cursor:wait;}
.formlib-submit[hidden] {display:none;}
/* (Tue, 10/06/2026) Claude Opus 5.5 - "Checking..." while the fresh verification runs after Send: ready color, no hover sweep, no icon */
.formlib-submit.formlib-checking {cursor:wait;}
.formlib-submit.formlib-checking::before {display:none;}
.formlib-submit.formlib-checking .formlib-btn-icons > * {opacity:0;}

/* (Tue, 10/06/2026) Claude Opus 5.5 - required: "Please check the box above..." prompt, shown in the Send button's place when
   Cloudflare asks for a click after Send. Black bold text on white with a bar and up arrow in the error color, so it reads as
   "do this" rather than "wait". The arrow is drawn in CSS: a triangle (::before) on a stem (::after) */
.formlib-ts-prompt {display:flex; align-items:center; gap:.6em; width:fit-content; max-width:100%; margin:0; padding:.6em .9em .6em .75em; border-left:5px solid var(--formlib-error, #b00020); color:var(--formlib-text, #000); background-color:var(--formlib-prompt-bg, #ffe873); font-size:1.1em; font-weight:bold; line-height:1.35;}
.formlib-ts-prompt[hidden] {display:none;}
.formlib-ts-prompt:focus {outline:3px solid var(--formlib-focus, #000); outline-offset:2px;}
.formlib-ts-prompt-arrow {position:relative; flex-shrink:0; width:.9em; height:1.2em; color:var(--formlib-error, #b00020);}
.formlib-ts-prompt-arrow::before {content:""; position:absolute; top:0; left:0; border-right:.45em solid transparent; border-bottom:.55em solid currentColor; border-left:.45em solid transparent;}
.formlib-ts-prompt-arrow::after {content:""; position:absolute; top:.5em; left:50%; width:.22em; height:.7em; background-color:currentColor; transform:translateX(-50%);}
@media (forced-colors: active) {.formlib-ts-prompt-arrow::after {background-color:CanvasText;} .formlib-ts-prompt-arrow::before {border-bottom-color:CanvasText;}}

/* (Sun, 10/04/2026) Claude Opus 5.5 - required: Send button icons (both Font Awesome and SVG versions) */
.formlib-btn-icons {position:relative; display:inline-block; flex-shrink:0; width:1em; height:1em; margin-left:.4em;}
.formlib-btn-icons > * {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:opacity .4s;}
.formlib-icon-go {opacity:1;}
.formlib-icon-wait {opacity:0;}
.formlib-submit[aria-disabled="true"] .formlib-icon-go {opacity:0;}
.formlib-submit[aria-disabled="true"] .formlib-icon-wait {opacity:1;}

/* (Sun, 10/04/2026) Claude Opus 5.5 - SVG version only: icon files drawn in the button's text color (paths are relative to this CSS file) */
.formlib-icon-svg {display:block; width:1em; height:1em; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;}
.formlib-icon-svg.formlib-icon-go {-webkit-mask-image:url("arrow-right.svg"); mask-image:url("arrow-right.svg");}
.formlib-icon-svg.formlib-icon-wait {-webkit-mask-image:url("ban.svg"); mask-image:url("ban.svg");}
@media (forced-colors: active) {.formlib-icon-svg {background-color:ButtonText;}}
@media (prefers-reduced-motion: reduce) {.formlib-submit, .formlib-submit::before, .formlib-btn-icons > * {transition:none;}}

/* (Sat, 10/03/2026) Claude Opus 5.5 - required: error summary
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: colors use the --formlib-* variables */
.formlib-summary {margin:0 0 1.5em; padding:1em 1.25em; border:3px solid var(--formlib-error, #b00020); background-color:var(--formlib-field-bg, #fff); color:var(--formlib-text, #000);}
.formlib-summary[hidden] {display:none;}
.formlib-summary:focus {outline:3px solid var(--formlib-focus, #000); outline-offset:3px;}
.formlib-summary-title {margin:0 0 .5em; color:var(--formlib-error, #b00020); font-weight:bold;}
.formlib-summary ul {margin:0; padding-left:1.25em;}
.formlib-summary li {margin:.25em 0;}
.formlib-summary a {color:var(--formlib-error, #b00020); text-decoration:underline;}
.formlib-summary a:focus {outline:2px solid var(--formlib-focus, #000); outline-offset:2px;}

/* (Tue, 10/06/2026) Claude Opus 5.5 - required: "please wait" panel. formlib.js hides the Send button and shows this in its
   place from the moment Send is clicked until the thank-you page loads. The line pulses (never fully disappears, so it's
   always readable); it holds still for visitors who've turned on "reduce motion". The note under it shows only when
   files are attached. Text color: --formlib-processing in formlib-site.css */
.formlib-processing {display:flex; flex-direction:column; align-items:flex-start; gap:.35em;}
.formlib-processing[hidden] {display:none;}
.formlib-processing:focus {outline:none;}
.formlib-processing-main {display:flex; align-items:center; gap:.5em; min-height:2.3em; margin:0; color:var(--formlib-processing, #1a7f37); font-size:1.2em; font-weight:bold; line-height:1.3; animation:formlib-pulse 1.5s ease-in-out infinite;}
.formlib-processing-icon {flex-shrink:0; width:1.4em; height:1.4em;}
.formlib-processing-note {margin:0; color:var(--formlib-text, #000); font-size:1em;}
.formlib-processing-note[hidden] {display:none;}
@keyframes formlib-pulse {0% {opacity:1;} 50% {opacity:.35;} 100% {opacity:1;}}
@media (prefers-reduced-motion: reduce) {.formlib-processing-main {animation:none;}}

/* (Sun, 10/04/2026) Claude Opus 5.5 - thank-you page uploads: image thumbnails with the file name underneath
   Per-site: 250px = the section's thumbnail size used on the thank-you page ('thankYouImageSize'); change all four 250px values to match
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: thumbnail border is the same light grey as the lines between rows */
.formlib-thumbs {display:flex; flex-wrap:wrap; gap:16px; margin:.5em 0 0; padding:0; list-style:none;}
.formlib-thumbs li {margin:0; padding:0;}
.formlib-thumb {display:flex; flex-direction:column; width:250px; max-width:100%; margin:0;}
.formlib-thumb-img {display:flex; align-items:center; justify-content:center; width:250px; max-width:100%; height:250px; border:1px solid #dddddd; background-color:var(--formlib-field-bg, #fff);}
.formlib-thumb-img img {display:block; max-width:100%; max-height:100%; height:auto;}
.formlib-thumb figcaption {margin-top:.35em; font-size:.9em; overflow-wrap:anywhere;}

/* (Sun, 10/04/2026) Claude Opus 5.5 - thank-you page uploads: other files, one per line with an extension label
   Each label also has a class for its extension (e.g. .formlib-ext-pdf) if a color is ever wanted for one type */
.formlib-filelist {margin:1em 0 0; padding:0; list-style:none;}
.formlib-filelist li {display:flex; align-items:center; margin:.4em 0; overflow-wrap:anywhere;}
.formlib-ext {flex-shrink:0; display:inline-block; min-width:3.6em; margin-right:.6em; padding:.1em .35em; border:1px solid #000; border-radius:2px; color:#000; background-color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; line-height:1.2; text-align:center;}

/* (Tue, 10/06/2026) Claude Opus 5.5 - thank-you page: copy of the submission, styled like the email.
   Uses the site's own fonts and colors. The box is centered and sizes itself to the content, from 24em up to 40em.
   Short answers sit beside their label (12em label column); long text and uploads go under their label (formlib-thanks-stack).
   All rows stack at 480px and under */
.formlib-thanks {width:fit-content; min-width:min(24em, 100%); max-width:40em; margin:0 auto 3em; text-align:left; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
/* width 0 + min-width 100%: the heading fills the box but doesn't widen it, so short forms keep a narrow box */
.formlib-thanks-title {width:0; min-width:100%; margin:0 0 1em; font-size:1.375em; font-weight:bold; line-height:1.3; text-align:left;}
.formlib-thanks-list {margin:0; padding:0;}
.formlib-thanks-row {display:flex; align-items:flex-start; gap:.4em 1.25em; padding:.6em 0; border-bottom:1px solid #dddddd;}
.formlib-thanks-row dt {flex:0 0 12em; width:12em; margin:0; padding:0; font-weight:bold; overflow-wrap:anywhere;}
.formlib-thanks-row dd {flex:1 1 auto; min-width:0; margin:0; padding:0; overflow-wrap:anywhere;}
.formlib-thanks-row dd > :first-child {margin-top:0;}
.formlib-thanks-stack {display:block;}
.formlib-thanks-stack dt {width:auto;}
.formlib-thanks-stack dd {margin-top:.4em;}
@media (max-width:480px) {.formlib-thanks-row {display:block;} .formlib-thanks-row dt {width:auto;} .formlib-thanks-row dd {margin-top:.25em;}}