/* W8-F5 Invitation form: one component for every design.
   Themes keep their own colours and type through the tokens below (set them on `.theme-x .engagement-form`);
   they should not restyle the controls, labels or grid themselves. Every rule is scoped to `.pn-form.engagement-form`
   so it wins over the older generic `.request-fields input` rules. */
.pn-form.engagement-form{
 --pn-ink:var(--ink);--pn-muted:color-mix(in srgb,var(--muted) 70%,var(--ink));--pn-line:var(--line);--pn-accent:var(--accent);
 --pn-field-bg:var(--paper);--pn-field-ink:var(--ink);--pn-field-line:var(--muted);
 --pn-radius:6px;--pn-danger:#b42318;--pn-success:#1f7a4d;
 min-width:0;color:var(--pn-ink);font-family:var(--body)
}
.pn-form.engagement-form *{box-sizing:border-box}

/* Legend and error summary */
.pn-form.engagement-form .pn-form-legend{margin:0 0 30px;padding:12px 16px;border:1px solid var(--pn-line);border-radius:var(--pn-radius);background:var(--pn-field-bg);color:var(--pn-field-ink);font:400 15px/1.6 var(--body);letter-spacing:0;text-transform:none}
.pn-form.engagement-form .pn-form-legend .pn-tag{vertical-align:1px;margin:0 2px}
.pn-form.engagement-form .pn-summary{margin:0 0 30px;padding:16px 18px;border:2px solid var(--pn-danger);border-radius:var(--pn-radius);background:var(--pn-field-bg);color:var(--pn-field-ink)}
.pn-form.engagement-form .pn-summary[hidden]{display:none}
.pn-form.engagement-form .pn-summary:focus{outline:2px solid var(--pn-danger);outline-offset:2px}
.pn-form.engagement-form .pn-summary-title{margin:0 0 4px;font:600 16px/1.45 var(--body);color:var(--pn-field-ink)}
.pn-form.engagement-form .pn-summary ul{margin:0;padding:0;list-style:none}
.pn-form.engagement-form .pn-summary a{display:flex;align-items:center;min-height:44px;color:var(--pn-danger);font:500 15px/1.4 var(--body);text-decoration:underline;text-underline-offset:3px}

/* Chapters: low specificity on purpose, so a design keeps its own chapter number and heading type */
:where(.pn-form.engagement-form) .form-chapter{display:flex;align-items:baseline;gap:14px;margin:44px 0 24px;padding:0 0 14px;border:0;border-bottom:1px solid var(--pn-line)}
:where(.pn-form.engagement-form>.pn-summary)+.form-chapter{margin-top:0}
:where(.pn-form.engagement-form) .form-chapter span{font:600 13px/1 var(--body);letter-spacing:.06em;color:var(--pn-muted)}
:where(.pn-form.engagement-form) .form-chapter h3{margin:0;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--pn-ink)}

/* Grid: two columns where the form is wide enough, one column on phones */
.pn-form.engagement-form .request-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:24px 20px;align-items:start}
.pn-form.engagement-form .request-fields>.span-two{grid-column:1/-1}

/* Field anatomy: label, control, hint, error */
.pn-form.engagement-form .pn-field{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
.pn-form.engagement-form .pn-field>legend{padding:0;margin:0 0 8px;float:left;width:100%}
.pn-form.engagement-form .pn-field>legend+*{clear:both}
.pn-form.engagement-form .pn-label{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:0;min-height:0;color:var(--pn-ink);font:600 15px/1.35 var(--body);letter-spacing:0;text-transform:none}
.pn-form.engagement-form .pn-label>span{margin:0;padding-top:0;padding-bottom:0;position:static;transform:none}
.pn-form.engagement-form .pn-tag{display:inline-flex;align-items:center;min-height:22px;padding:2px 9px;border-radius:999px;font:600 12px/1.2 var(--body);letter-spacing:.02em;text-transform:none;white-space:nowrap}
.pn-form.engagement-form .pn-tag-required{background:var(--pn-field-bg);color:var(--pn-field-ink);box-shadow:inset 0 0 0 1.5px var(--pn-field-ink)}
.pn-form.engagement-form .pn-tag-optional{padding-inline:0;color:var(--pn-muted);font-weight:500}
.pn-form.engagement-form .pn-hint{margin:0;max-width:62ch;color:var(--pn-muted);font:400 14px/1.5 var(--body)}
.pn-form.engagement-form .pn-error{margin:0;color:var(--pn-danger);font:600 14px/1.45 var(--body)}
.pn-form.engagement-form .pn-error[hidden]{display:none}

/* Controls */
.pn-form.engagement-form .pn-control{display:block;width:100%;min-width:0;max-width:100%;min-height:48px;height:auto;margin:0;padding:11px 14px;border:1px solid var(--pn-field-line);border-radius:var(--pn-radius);background:var(--pn-field-bg);color:var(--pn-field-ink);font:400 16px/1.5 var(--body);letter-spacing:0;text-transform:none;box-shadow:none;outline:0;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.pn-form.engagement-form .pn-control::placeholder{color:var(--pn-muted);opacity:1}
.pn-form.engagement-form .pn-control:hover{border-color:var(--pn-field-ink)}
.pn-form.engagement-form .pn-control:focus{outline:2px solid var(--pn-accent);outline-offset:2px;border-color:var(--pn-accent)}
.pn-form.engagement-form textarea.pn-control{min-height:124px;resize:vertical}
.pn-form.engagement-form .is-invalid .pn-control{border-color:var(--pn-danger);box-shadow:inset 0 0 0 1px var(--pn-danger)}
.pn-form.engagement-form .pn-select{position:relative;display:block}
.pn-form.engagement-form .pn-select .pn-control{padding-right:46px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:none}
.pn-form.engagement-form .pn-select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--pn-field-ink);border-bottom:2px solid var(--pn-field-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* Choice chips: real radios, the chip is the visible control */
.pn-form.engagement-form .pn-chips{display:flex;flex-wrap:wrap;gap:8px}
.pn-form.engagement-form .pn-chip{position:relative;display:inline-flex;margin:0;padding:0;cursor:pointer}
.pn-form.engagement-form .pn-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pn-form.engagement-form .pn-chip span{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin:0;padding:10px 16px;border:1px solid var(--pn-field-line);border-radius:var(--pn-radius);background:var(--pn-field-bg);color:var(--pn-field-ink);font:500 15px/1.2 var(--body);letter-spacing:0;text-transform:none;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.pn-form.engagement-form .pn-chip svg{display:none;flex:none}
.pn-form.engagement-form .pn-chip:hover span{border-color:var(--pn-field-ink)}
.pn-form.engagement-form .pn-chip input:checked+span{border-color:var(--pn-field-ink);box-shadow:inset 0 0 0 1px var(--pn-field-ink);font-weight:600}
.pn-form.engagement-form .pn-chip input:checked+span svg{display:block}
.pn-form.engagement-form .pn-chip input:focus-visible+span{outline:2px solid var(--pn-accent);outline-offset:2px}

/* Date and flexible dates, one group */
.pn-form.engagement-form .pn-when-row{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.pn-form.engagement-form .pn-when-row .pn-date{flex:1 1 13rem;width:auto;max-width:20rem}
.pn-form.engagement-form .pn-when-row label.pn-check{display:inline-flex;flex-direction:row;align-items:center;gap:12px;min-height:48px;margin:0;padding:0 18px 0 14px;border:1px solid var(--pn-field-line);border-radius:var(--pn-radius);background:var(--pn-field-bg);color:var(--pn-field-ink);font:500 15px/1.3 var(--body);letter-spacing:0;text-transform:none;cursor:pointer}
.pn-form.engagement-form .pn-when-row label.pn-check:hover{border-color:var(--pn-field-ink)}
.pn-form.engagement-form .pn-when-row label.pn-check input{flex:none;width:20px;height:20px;min-width:20px;min-height:0;margin:0;padding:0;accent-color:var(--pn-accent);cursor:pointer}
.pn-form.engagement-form .pn-when-row label.pn-check:focus-within{outline:2px solid var(--pn-accent);outline-offset:2px}

/* Submit and reassurance */
.pn-form.engagement-form .pn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:40px;padding-top:26px;border-top:1px solid var(--pn-line)}
.pn-form.engagement-form .pn-submit{min-height:52px;margin:0;gap:10px}
.pn-form.engagement-form .pn-submit:focus-visible{outline:2px solid var(--pn-field-ink);outline-offset:3px}
.pn-form.engagement-form .pn-reassure{flex:1 1 15rem;display:block;margin:0;color:var(--pn-muted);font:400 14px/1.55 var(--body)}

/* Review panel */
.pn-form.engagement-form .pn-review{margin-top:32px;padding:24px;border:1px solid var(--pn-line);border-radius:calc(var(--pn-radius) * 1.5);background:var(--pn-field-bg);color:var(--pn-field-ink)}
.pn-form.engagement-form .pn-review[hidden]{display:none}
.pn-form.engagement-form .pn-review-head{display:flex;gap:14px;align-items:flex-start}
.pn-form.engagement-form .pn-review-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--pn-success);color:#fff}
.pn-form.engagement-form .pn-review-icon svg{width:18px;height:18px}
.pn-form.engagement-form .pn-review h3{margin:2px 0 6px;font-family:var(--display);font-size:clamp(21px,2vw,26px);line-height:1.25;color:var(--pn-field-ink)}
.pn-form.engagement-form .pn-review h3:focus{outline:0}
.pn-form.engagement-form .pn-review-head p{margin:0;color:var(--pn-muted);font:400 15px/1.55 var(--body)}
.pn-form.engagement-form .pn-review-text{margin-top:20px;min-height:300px;font:400 15px/1.7 var(--body);white-space:pre-wrap}
.pn-form.engagement-form .request-review-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:18px}
.pn-form.engagement-form .request-review-actions>*{min-height:48px;display:inline-flex;align-items:center}
.pn-form.engagement-form .pn-edit{margin:0;padding:0 4px;border:0;background:none;color:var(--pn-field-ink);font:500 15px/1.3 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-form.engagement-form .pn-edit:focus-visible{outline:2px solid var(--pn-accent);outline-offset:2px}
.pn-form.engagement-form [data-copy-request].is-copied{background:var(--pn-success);border-color:var(--pn-success);color:#fff}
.pn-form.engagement-form .pn-copy-status{margin:12px 0 0;color:var(--pn-field-ink);font:500 14px/1.5 var(--body)}
.pn-form.engagement-form .pn-copy-status:empty{display:none}

/* Dark and accent sections: the form becomes a light sheet with fixed readable tokens, whatever the section colours are,
   so every label, hint and control keeps its contrast. The button needs !important because site-regions.css and some
   designs force dark-section buttons with !important; this selector is more specific than all of them. */
.site .block:is(.tone-dark,.tone-accent) .pn-form.pn-form.engagement-form{--pn-ink:#1f2328;--pn-muted:#545b64;--pn-line:#d0d4da;--pn-accent:#1f2328;--pn-field-bg:#ffffff;--pn-field-ink:#1f2328;--pn-field-line:#6a717a;background:#fbfbfa;color:#1f2328;border-color:#d0d4da}
.site .block:is(.tone-dark,.tone-accent) .pn-form.engagement-form :is(.pn-label,.pn-label-text,.pn-summary-title,.pn-copy-status,.pn-review h3,.form-chapter span,.form-chapter h3,.pn-edit,.text-link){color:var(--pn-ink);background-color:transparent}
.site .block:is(.tone-dark,.tone-accent) .pn-form.engagement-form :is(.pn-hint,.pn-tag-optional,.pn-reassure,.pn-review-head p){color:var(--pn-muted)}
.site .block:is(.tone-dark,.tone-accent) .pn-form.engagement-form :is(.pn-form-legend,.pn-control,.pn-chip span,.pn-when-row label.pn-check,.pn-tag-required){color:var(--pn-field-ink);background-color:var(--pn-field-bg)}
.site .block:is(.tone-dark,.tone-accent) .pn-form.engagement-form :is(.pn-error,.pn-summary a){color:var(--pn-danger)}
.site .block:is(.tone-dark,.tone-accent) .pn-form.engagement-form .button:not(.is-copied){background:#1f2328!important;border-color:#1f2328!important;color:#ffffff!important}

@media (max-width:560px){
 :where(.pn-form.engagement-form) .form-chapter{margin-top:36px}
 .pn-form.engagement-form .pn-when-row .pn-date{max-width:none;flex-basis:100%}
 .pn-form.engagement-form .pn-when-row .pn-check{flex:1 1 100%}
 .pn-form.engagement-form .pn-submit{width:100%;justify-content:center}
 .pn-form.engagement-form .pn-review{padding:18px 16px}
 .pn-form.engagement-form .request-review-actions{flex-direction:column;align-items:stretch}
 .pn-form.engagement-form .request-review-actions .button{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
 .pn-form.engagement-form .pn-control,.pn-form.engagement-form .pn-chip span{transition:none}
}