/* ==========================================================================
   formlib.css - every style the form and its thank-you page need. formlib for CMSB 3.80+
   (PHP 8.1 or newer; works with PHP 8.4). The SAME FILE ON EVERY SITE: don't edit it for one site,
   because the multi-site updater replaces it everywhere.

   Lives in the site's forms folder (for example /_forms-abcdefg/formlib.css), with arrow-right.svg and
   ban.svg beside it (the Send button icons are referenced relative to this file).
   Link it after the site's own style sheet. The defaults at the top (grey colors, system fonts, sizes)
   apply when nothing else is set. A site that needs different values adds a <style> block in the page head,
   right after the link, that redeclares only the values that change (see formlib-head-template.html).

   (Mon, 11/02/2026) Claude Opus 5.5 - Revised: formlib-site.css merged into this file (formlib-site.css is no
   longer used); grey palette, fonts, and sizes are defaults in :root; duplicate error rules and the fallback
   colors inside var() removed; thank-you thumbnail size is --formlib-thumb-size; number fields get the click
   focus ring; "please wait" green darkened to #166c2e; thank-you "Sent" line (from the 10/26/2026 package)

   Earlier revisions, formlib.css:
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: thank-you page copy styled like the email (formlib-thanks);
   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
   (Mon, 10/26/2026) Claude Opus 5.5 - Revised: checkbox/radio lists in one column (default) or two (formlib-cols-2);
   "Select all that apply." spacing; hint under a single checkbox; thank-you page "Sent" line (formlib-thanks-sent)
   Earlier revisions, formlib-site.css (now merged here):
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: styled "Choose Files" button; counter highlight at the limit;
   --formlib-section renamed --formlib-legend; small screens keep the box color and drop only the border; bottom margin 3em
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: "please wait" color; "Choose Files" hover color; "check the box above" prompt background
   (Mon, 10/26/2026) Claude Opus 5.5 - Revised: grey palette is the package default; optional --formlib-col-width
   ========================================================================== */


/* (Mon, 11/02/2026) Claude Opus 5.5 - DEFAULTS: the grey palette (10/26/2026) plus fonts and sizes.
   To change any of these on one site, redeclare it in a :root rule in the <style> block after this file's link.
   A value that isn't redeclared keeps the default below.
   Contrast checked on the #f2f2f2 box: text, hint, error, legend, and "please wait" text at least 4.5:1;
   field borders, checkbox tint, and focus ring at least 3:1. Recheck whenever a site changes a color */
:root {
   /* ----- colors ----- */
   --formlib-text:#000;              /* all form text */
   --formlib-hint:#4a4a4a;           /* hints, character counter (7.9:1 on the box) */
   --formlib-counter-full-bg:#fff3a8; /* highlight behind the counter when the limit is reached */
   --formlib-box-bg:#f2f2f2;         /* form box background */
   --formlib-box-bg-small:var(--formlib-box-bg); /* box background on small phones (480px and under): same as the box
                                        unless replaced with a hex color, or with transparent to show the page background */
   --formlib-box-border:#b3b3b3;     /* form box border */
   --formlib-field-bg:#fff;          /* fields, error summary, file remove buttons, thank-you thumbnail boxes */
   --formlib-field-border:#767676;   /* field borders - keep at least 3:1 against the box and the field (4.1:1 and 4.5:1) */
   --formlib-file-btn-hover:#dcdcdc; /* "Choose Files" button background on hover (black text on it is 15:1) */
   --formlib-legend:#222;            /* section legends only: the heading of each formlib-section fieldset. Field labels
                                        and checkbox/radio question legends stay --formlib-text */
   --formlib-rule:#8c8c8c;           /* line under section headings */
   --formlib-accent:#333;            /* checkbox and radio tint */
   --formlib-btn:#333;               /* Send button, ready (white text on it is 12.6:1) */
   --formlib-btn-hover:#000;         /* Send button hover sweep */
   --formlib-btn-off:#767676;        /* Send button, waiting for verification - keep at least this dark (white text 4.5:1) */
   --formlib-btn-text:#fff;          /* Send button text and icons */
   --formlib-processing:#166c2e;     /* "Please wait... sending your form now" in place of the Send button - keep at least
                                        4.5:1 against the box (#166c2e is 5.8:1 on #f2f2f2, 6.0:1 on #e8f8fe, 6.5:1 on white) */
   --formlib-prompt-bg:#ffe873;      /* background of "Please check the box above..." in place of the Send button
                                        (black text 17:1, red arrow 5.9:1) */
   --formlib-error:#b00020;          /* errors, required asterisk, error summary border (6.5:1 on the box) */
   --formlib-focus:#000;             /* keyboard focus ring */
   --formlib-thanks-rule:#dddddd;    /* thank-you page: lines between rows and the border around thumbnails */

   /* ----- fonts and sizes ----- */
   --formlib-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                                     /* form and thank-you copy: the visitor's own system font, so both look the same
                                        on every site and the thank-you copy prints cleanly */
   --formlib-font-size:1rem;         /* form text size; fields never go below 16px either way */
   --formlib-box-width:40em;         /* widest the form box gets */
   --formlib-box-padding:1.5em 1.75em;     /* space inside the form box */
   --formlib-box-padding-small:1.25em 1em; /* the same, on small phones (480px and under) */
   --formlib-box-margin:0 0 3em;     /* space around the form box; the 3em at the bottom clears mobile browser toolbars */
   --formlib-box-radius:8px;         /* rounded corners of the form box */
   --formlib-col-width:13em;         /* narrowest column in a two-column checkbox/radio list (formlib-cols-2) */
   --formlib-thumb-size:250px;       /* thank-you page image box: match the thumbnails chosen by 'thankYouImageSize' */
   --formlib-thanks-width:40em;      /* widest the thank-you copy gets */
}


/* (Mon, 10/05/2026) Claude Opus 5.5 - the form box: border and rounded corners; on small phones, no border and less padding
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: bottom margin 3em to clear mobile browser toolbars; small phones keep a background color
   (Mon, 11/02/2026) Claude Opus 5.5 - Revised: width, margin, padding, corners, font, and size come from the defaults above */
.formlib-form {box-sizing:border-box; max-width:var(--formlib-box-width); margin:var(--formlib-box-margin); padding:var(--formlib-box-padding); border:1px solid var(--formlib-box-border); border-radius:var(--formlib-box-radius); color:var(--formlib-text); background-color:var(--formlib-box-bg); font-family:var(--formlib-font); font-size:var(--formlib-font-size); line-height:1.45; text-align:left;}
.formlib-form *, .formlib-form *::before, .formlib-form *::after {box-sizing:border-box;}
:where(.formlib-form) p {margin:0 0 1em; line-height:1.45;}   /* :where() keeps this low-priority, so the rules below for specific paragraphs still apply */
@media (max-width:480px) {.formlib-form {padding:var(--formlib-box-padding-small); border:0; background-color:var(--formlib-box-bg-small);}}

/* (Mon, 10/05/2026) Claude Opus 5.5 - sections (fieldset + legend around a group of related fields) */
.formlib-section {min-width:0; margin:0 0 1.75em; padding:0; border:0;}
.formlib-section > legend {display:block; width:100%; margin:0 0 1em; padding:0 0 .3em; border-bottom:2px solid var(--formlib-rule); color:var(--formlib-legend); font-size:1.25em; font-weight:bold; line-height:1.3;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - one field: label, hint, input, counter, error */
.formlib-field {display:flex; flex-direction:column; margin:0 0 1.25em;}
.formlib-field > label {display:block; margin:0 0 .35em; padding:0; color:var(--formlib-text); font-size:1em; font-weight:bold; text-align:left;}

/* (Sat, 10/03/2026) Claude Opus 5.5 - messages and helpers: screen-reader-only text, honeypot, required asterisk, hint, error, counter */
.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); font-weight:bold;}
.formlib-hint {display:block; margin:0 0 .35em; color:var(--formlib-hint);}
.formlib-hint[hidden] {display:none;}
.formlib-error {display:block; margin-top:.35em; color:var(--formlib-error); font-weight:bold;}
.formlib-error:empty {display:none;}
.formlib-counter {display:block; margin-top:.6em; color:var(--formlib-hint); 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); background-color:var(--formlib-counter-full-bg);}

/* (Mon, 10/05/2026) Claude Opus 5.5 - text fields, drop-downs, text boxes: 16px minimum so phones don't zoom in when tapped */
.formlib-form input, .formlib-form select, .formlib-form textarea, .formlib-form button {font-family:inherit; line-height:1.3;}
.formlib-form input[type="text"], .formlib-form input[type="email"], .formlib-form input[type="tel"], .formlib-form input[type="url"], .formlib-form input[type="date"], .formlib-form input[type="number"], .formlib-form select, .formlib-form textarea {display:block; width:100%; max-width:100%; min-height:2.75em; margin:0; padding:.55em .65em; border:1px solid var(--formlib-field-border); border-radius:4px; color:var(--formlib-text); background-color:var(--formlib-field-bg); font-size:max(16px, 1em); box-shadow:none;}
.formlib-form input[type="date"] {max-width:14em;}
.formlib-form input.formlib-short {max-width:8em;}
.formlib-form textarea {min-height:9em; resize:vertical;}
.formlib-form input[type="file"] {display:block; align-self:flex-start; width:auto; max-width:100%; margin:0; padding:0; border:0; border-radius:4px; color:var(--formlib-text); background:none; font-size:max(16px, 1em);}

/* (Mon, 10/05/2026) Claude Opus 5.5 - fields with an error: red border and outline (after the field rules above, so it isn't hidden by them) */
.formlib-form input[aria-invalid="true"], .formlib-form select[aria-invalid="true"], .formlib-form textarea[aria-invalid="true"] {border-color:var(--formlib-error); outline:2px solid var(--formlib-error); outline-offset:0;}
.formlib-form input[type="checkbox"][aria-invalid="true"], .formlib-form input[type="radio"][aria-invalid="true"] {outline-offset:2px;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - one clear focus ring on every control (after the error rules, so a field with an error
   still shows the focus ring while it has focus). First line: keyboard focus on any input, drop-down, or text box (includes
   checkboxes, radio buttons, and the file button). Second line: typing fields show it on a click or tap too
   (Mon, 11/02/2026) Claude Opus 5.5 - Revised: number fields added to the second line */
.formlib-form input:focus-visible, .formlib-form select:focus-visible, .formlib-form textarea:focus-visible {outline:3px solid var(--formlib-focus); outline-offset:2px; box-shadow:none;}
.formlib-form input[type="text"]:focus, .formlib-form input[type="email"]:focus, .formlib-form input[type="tel"]:focus, .formlib-form input[type="url"]:focus, .formlib-form input[type="date"]:focus, .formlib-form input[type="number"]:focus, .formlib-form select:focus, .formlib-form textarea:focus {outline:3px solid var(--formlib-focus); outline-offset:2px; box-shadow:none;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - radio and checkbox questions (fieldset + legend), larger tap areas, site tint */
.formlib-group {min-width:0; margin:0 0 1.25em; padding:0; border:0;}
.formlib-group > legend {margin:0 0 .35em; padding:0; color:var(--formlib-text); font-size:1em; font-weight:bold; text-align:left;}
.formlib-option {display:flex; align-items:flex-start; margin:.1em 0;}
.formlib-option input[type="checkbox"], .formlib-option input[type="radio"] {flex-shrink:0; width:1.25em; height:1.25em; margin:.35em .6em 0 0; accent-color:var(--formlib-accent); cursor:pointer;}
.formlib-option label {padding:.25em 0; color:var(--formlib-text); font-size:1em; font-weight:normal; text-align:left; cursor:pointer;}
.formlib-field > .formlib-option label {font-weight:bold;}

/* (Mon, 10/26/2026) Claude Opus 5.5 - checkbox and radio lists: one column or two
   <div class="formlib-options"> around the options = one column (the default; best for long option text).
   <div class="formlib-options formlib-cols-2"> = two columns, filled top to bottom (1-5 on the left, 6-10 on the right),
   so the visual order matches the Tab and screen reader order. No breakpoint needed: the browser drops to one column
   on its own whenever the space can't fit two columns at least --formlib-col-width wide (13em: about 208px each at a 16px
   text size) */
.formlib-options {margin:0; padding:0;}
.formlib-cols-2 {columns:2 var(--formlib-col-width); column-gap:2em;}
/* an option whose label wraps stays together in one column; padding instead of margin, because a margin at the top of the
   second column is dropped by the browser and that column would sit a little higher than the first */
.formlib-cols-2 > .formlib-option {margin:0; padding:.1em 0; break-inside:avoid;}

/* (Mon, 10/26/2026) Claude Opus 5.5 - "Select all that apply." under a checkbox list's question */
.formlib-group > .formlib-hint {margin:-.1em 0 .5em;}

/* (Mon, 10/26/2026) Claude Opus 5.5 - optional hint under a single checkbox: lines up with the checkbox, like the error message */
.formlib-option + .formlib-hint {margin:.1em 0 .35em;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - the browser's own "Choose Files" button, restyled to match the fields.
   The two button names need separate rules (a browser that doesn't know one of them ignores the whole rule)
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: hover: tinted background and a darker border */
.formlib-form input[type="file"]::file-selector-button {min-height:2.75em; margin:0 .75em 0 0; padding:.55em 1em; border:1px solid var(--formlib-field-border); border-radius:4px; color:var(--formlib-text); background-color:var(--formlib-field-bg); font:inherit; font-weight:bold; cursor:pointer; transition:background-color .2s, border-color .2s;}
.formlib-form input[type="file"]::-webkit-file-upload-button {min-height:2.75em; margin:0 .75em 0 0; padding:.55em 1em; border:1px solid var(--formlib-field-border); border-radius:4px; color:var(--formlib-text); background-color:var(--formlib-field-bg); font:inherit; font-weight:bold; cursor:pointer;}
.formlib-form input[type="file"]:hover::file-selector-button {border-color:var(--formlib-text); background-color:var(--formlib-file-btn-hover);}
.formlib-form input[type="file"]:hover::-webkit-file-upload-button {border-color:var(--formlib-text); background-color:var(--formlib-file-btn-hover);}
@media (prefers-reduced-motion: reduce) {.formlib-form input[type="file"]::file-selector-button {transition:none;}}

/* (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);}

/* (Sat, 10/03/2026) Claude Opus 5.5 - 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 */
.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); border-radius:2px; color:var(--formlib-error); background-color:var(--formlib-field-bg); 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); background-color:var(--formlib-error);}
@media (forced-colors: active) {.formlib-remove::before, .formlib-remove::after {background-color:ButtonText;}}
.formlib-remove:focus-visible {outline:3px solid var(--formlib-focus); outline-offset:2px;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - verification widget and the note under it */
.formlib-turnstile {margin:0 0 .75em;}
#formlib-ts-note {margin:0 0 1em;}

/* (Sun, 10/04/2026) Claude Opus 5.5 - 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); background-color:var(--formlib-btn); 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); transition:width .3s;}
.formlib-submit:hover::before {width:100%;}
.formlib-submit:focus-visible {outline:3px solid var(--formlib-focus); outline-offset:3px;}
.formlib-submit[aria-disabled="true"] {background-color:var(--formlib-btn-off); 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;}

/* (Sun, 10/04/2026) Claude Opus 5.5 - 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;}}

/* (Tue, 10/06/2026) Claude Opus 5.5 - "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 yellow 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); color:var(--formlib-text); background-color:var(--formlib-prompt-bg); 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); outline-offset:2px;}
.formlib-ts-prompt-arrow {position:relative; flex-shrink:0; width:.9em; height:1.2em; color:var(--formlib-error);}
.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;}}

/* (Tue, 10/06/2026) Claude Opus 5.5 - "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 */
.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); 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); 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;}}

/* (Sat, 10/03/2026) Claude Opus 5.5 - error summary at the top of the form
   (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); background-color:var(--formlib-field-bg); color:var(--formlib-text);}
.formlib-summary[hidden] {display:none;}
.formlib-summary:focus {outline:3px solid var(--formlib-focus); outline-offset:3px;}
.formlib-summary-title {margin:0 0 .5em; color:var(--formlib-error); 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); text-decoration:underline;}
.formlib-summary a:focus {outline:2px solid var(--formlib-focus); outline-offset:2px;}


/* ==========================================================================
   THANK-YOU PAGE
   ========================================================================== */

/* (Tue, 10/06/2026) Claude Opus 5.5 - thank-you page: copy of the submission, styled like the email.
   The box is centered and sizes itself to the content, from 24em up to --formlib-thanks-width (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
   (Mon, 11/02/2026) Claude Opus 5.5 - Revised: comment corrected: the copy uses the system font stack (--formlib-font), the
   same as the form, so it looks the same on every site and prints cleanly; its text color comes from the site's own styles */
.formlib-thanks {width:fit-content; min-width:min(24em, 100%); max-width:var(--formlib-thanks-width); margin:0 auto 2em; font-family:var(--formlib-font); text-align:left;}
/* 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 .125em; font-size:1.375em; font-weight:bold; line-height:1.3; text-align:center;}
/* (Mon, 10/26/2026) Claude Opus 5.5 - "Sent Mon, Oct 26, 2026 - 2:15 PM" under the heading */
.formlib-thanks-sent {margin:0 0 .75em; text-align:center;}
.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 var(--formlib-thanks-rule);}
.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;}}

/* (Sun, 10/04/2026) Claude Opus 5.5 - thank-you page uploads: image thumbnails with the file name underneath
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: thumbnail border is the same light grey as the lines between rows
   (Mon, 11/02/2026) Claude Opus 5.5 - Revised: box size is --formlib-thumb-size (250px by default); to match a section's
   'thankYouImageSize', redeclare it in a <style> block on that thank-you page */
.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:var(--formlib-thumb-size); max-width:100%; margin:0;}
.formlib-thumb-img {display:flex; align-items:center; justify-content:center; width:var(--formlib-thumb-size); max-width:100%; height:var(--formlib-thumb-size); border:1px solid var(--formlib-thanks-rule); background-color:var(--formlib-field-bg);}
.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;}