.pcr-registration{
--reg-green:var(--green,#155d3a);
--reg-green-ink:var(--green-ink,#0a2e1c);
--reg-green-light:var(--green-light,#dceadf);
--reg-sand:var(--sand,#f0ead9);
--reg-gold:var(--gold,#c98a2c);
--reg-radius:var(--radius-card,22px);
--reg-shadow-sm:var(--shadow-sm,0 2px 12px rgba(23,33,27,.07));
--reg-shadow-md:var(--shadow-md,0 14px 36px rgba(23,33,27,.14));
--reg-ease:var(--ease-out,cubic-bezier(.16,1,.3,1));
--reg-sans:var(--sans,-apple-system,"Segoe UI",Roboto,sans-serif);
max-width:920px;
margin:clamp(28px,6vw,72px) auto;
padding:0;
font-weight:400;
color:#1a2b21
}
.pcr-registration header{
max-width:720px;
margin-bottom:28px
}
.pcr-registration h1{
margin:.2em 0
}
.pcr-registration .eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
text-transform:uppercase;
letter-spacing:.22em;
font-family:var(--reg-sans);
font-size:13px;
font-weight:700;
color:var(--reg-green)
}
.pcr-registration .eyebrow::before{
content:"";
display:inline-block;
width:22px;
height:1.5px;
background:var(--reg-gold)
}
.pcr-registration__entry-main h2{
margin:.35em 0 .5em;
font-size:clamp(26px,3.4vw,34px)
}
.pcr-registration__entry-main>p{
margin:0;
color:#3c473f;
line-height:1.6
}
.pcr-registration form{
display:grid;
gap:22px;
margin-top:28px
}
.pcr-registration fieldset{
border:0;
padding:0;
display:grid;
gap:18px;
min-inline-size:0
}
.pcr-registration__step{
padding-top:22px;
border-top:1px dashed rgba(21,93,58,.18)
}
.pcr-registration__step:first-of-type{
padding-top:0;
border-top:0
}
.pcr-registration legend{
display:flex;
align-items:baseline;
gap:10px;
width:100%;
padding:0 0 4px;
font-family:var(--reg-sans);
text-transform:uppercase;
letter-spacing:.1em;
font-size:14px;
font-weight:700;
color:var(--reg-green)
}
.pcr-registration__step{
counter-increment:pcr-step
}
.pcr-registration__step>legend::before{
content:counter(pcr-step);
display:inline-flex;
align-items:center;
justify-content:center;
flex:none;
width:26px;
height:26px;
border-radius:50%;
background:var(--reg-green-ink);
color:#fff;
font-size:13px;
font-weight:800;
letter-spacing:0
}
.pcr-registration form{
counter-reset:pcr-step
}
.pcr-flow__review{display:grid;gap:22px}
.pcr-registration form[hidden]{display:none!important}
.pcr-registration select[hidden],.pcr-registration__single-edition[hidden]{display:none!important}
.pcr-registration label .pcr-registration__single-edition{
box-sizing:border-box;
display:flex;
align-items:center;
min-height:48px;
padding:12px 14px;
border-radius:8px;
background:#f1f6f2;
font:400 16px/1.5 var(--body-font,Arial,sans-serif);
color:#1a2b21
}
/* Progressive flow: the server form remains a complete no-script fallback. */
.pcr-registration--flow{
max-width:780px;
display:flex;
flex-direction:column;
margin:24px auto 48px;
font-family:var(--body-font,Arial,sans-serif)
}
.pcr-registration--flow [hidden],
.pcr-registration--flow [data-participant][data-flow-active="false"]{display:none!important}
.pcr-registration--flow .pcr-registration__entry-main header{display:none}
.pcr-registration--flow .pcr-registration__crossroad{order:2;font-size:14px;line-height:1.6;margin:20px 0;color:#526358}
.pcr-registration--flow form{
margin:0;
padding:32px;
gap:24px;
background:#fff;
border:1px solid #dce4de;
border-radius:20px;
box-shadow:0 8px 32px rgba(20,45,30,.04)
}
.pcr-flow__header{scroll-margin-top:110px}
.pcr-flow__progress{display:flex;gap:8px;list-style:none!important;padding:0!important;margin:0 0 28px!important}
.pcr-flow__progress li{flex:1;margin:0!important;padding:10px 4px;border-bottom:3px solid #e4eae5;font-size:13px;font-weight:600;color:#526358;text-align:center}
.pcr-flow__progress [aria-current]{color:#155d3a;border-color:#155d3a}
.pcr-registration--flow .pcr-flow__context{font-size:13px;font-weight:600;color:#526358;line-height:1.5;margin:0 0 8px}
.pcr-registration--flow [data-flow-title]{font-family:var(--body-font,Arial,sans-serif);font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.025em;text-transform:none;margin:0 0 12px}
.pcr-registration--flow .pcr-flow__description{font-size:16px;line-height:1.6;color:#43574a;margin:0}
.pcr-registration--flow [data-flow-panel]>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.pcr-registration--flow [data-flow-panel]>.pcr-registration__help{display:none}
.pcr-registration--flow [data-flow-panel]{border:0;padding:0;margin:0;min-width:0}
.pcr-registration--flow .pcr-registration__participant{padding:20px;border:1px solid #dce4de;border-radius:12px;box-shadow:none;background:transparent}
.pcr-registration--flow .pcr-registration__participant-head{display:flex;font-size:15px}
.pcr-registration--flow .pcr-registration__participant-body{margin:0;gap:16px}
.pcr-registration--flow .pcr-registration__participant-details>summary{margin-bottom:16px}
.pcr-registration--flow .pcr-registration__participant-title{font-family:inherit;letter-spacing:normal;text-transform:none;font-size:16px}
.pcr-registration--flow [data-address-grid]{grid-template-columns:1fr 1fr}
.pcr-registration--flow [data-address-grid]>.pcr-registration__field{grid-column:1/-1}
.pcr-registration--flow [data-address-grid]>label:last-child{grid-column:auto}
/* Two labels share each address row ("Nr domu" | "Nr lokalu (opcjonalnie)",
   "Kod pocztowy" | "Miasto"). Each label spans three rows of the address grid
   and adopts them as a subgrid: label text, input, field error. The text row
   takes the taller of the two texts (one wraps at 390px) and the error row
   the taller error, so an input always starts where its neighbour does.
   Gaps are margins, not row-gap: a row-gap would also open around an empty
   error row and push the next address row down when no field has an error. */
.pcr-registration--flow [data-address-grid]{row-gap:0}
.pcr-registration--flow [data-address-grid]>:not(:first-child){margin-top:16px}
.pcr-registration--flow [data-address-grid]>label{grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.pcr-registration--flow [data-address-grid]>label>*{margin-top:6px}
.pcr-registration--flow .pcr-registration__participant-actions:has(>[hidden]){display:none}
.pcr-registration--flow label{font-size:14px;font-weight:600;line-height:1.5;letter-spacing:normal;text-transform:none}
.pcr-registration--flow input:not([type="checkbox"]),.pcr-registration--flow select,.pcr-registration--flow textarea{font-family:inherit;font-size:16px;line-height:1.5;min-height:48px;border-radius:8px}
.pcr-registration--flow .pcr-registration__optional{padding:12px 0;margin:0}
.pcr-registration--flow .pcr-registration__optional>summary{min-height:44px;font-size:14px}
.pcr-registration--flow .pcr-registration__counter{margin:0;font-size:13px;color:#526358}
.pcr-registration--flow .pcr-registration__self-choice{margin:4px 0 16px;padding:14px;background:#f1f6f2;border-radius:10px}
.pcr-registration__draft{border-top:1px solid #e4eae5;padding-top:12px;overflow-wrap:anywhere}
.pcr-registration__draft p{font-size:13px;line-height:1.5;color:#526358;margin:0 0 8px}
.pcr-registration--flow .pcr-registration__draft button{font-family:inherit;font-size:13px;text-transform:none;letter-spacing:normal;background:transparent;color:#43574a;box-shadow:none;padding:8px 0;min-height:44px;margin-right:18px;white-space:normal}
.pcr-registration__self-confirmation{margin-top:8px;padding:12px;border:1px solid #c8d8cc;border-radius:8px;background:#f1f6f2;overflow-wrap:anywhere}
.pcr-registration__self-confirmation p{white-space:pre-line;font-size:14px;line-height:1.5;margin:0 0 8px}
.pcr-registration--flow .pcr-registration__self-confirmation button{display:block;margin-top:8px;white-space:normal;font-family:inherit;text-transform:none;letter-spacing:normal;font-size:14px}
.pcr-registration--flow .pcr-registration__field-group-label{margin:8px 0 0}
.pcr-flow__navigation{display:flex;gap:12px;justify-content:space-between;border-top:1px solid #e4eae5;padding-top:20px;align-items:center}
/* The flow's primary button is the theme's pill (.btn-primary in header.php): same
   face, same size role, same shadow — a visitor sees one kind of green button on the
   whole site, not a second one inside the form. Back/edit take the card step instead,
   as an outline pill. */
.pcr-registration--flow button[data-flow-next],.pcr-registration--flow button[type="submit"]{font-family:var(--reg-sans);text-transform:uppercase;letter-spacing:var(--btn-track,.03em);font-size:var(--btn-font,16px);font-weight:700;line-height:1.2;border-radius:999px;padding:0 var(--btn-pad-x,30px);min-height:var(--btn-h,46px);background:#155d3a;color:#fff;border:2px solid transparent;box-shadow:var(--shadow-sm,0 2px 12px rgba(23,33,27,.07));margin-left:auto}
.pcr-registration--flow .pcr-flow__back,.pcr-registration--flow .pcr-flow__edit{font-family:var(--reg-sans);text-transform:uppercase;letter-spacing:var(--btn-track,.03em);font-size:var(--btn-font-sm,14px);font-weight:700;line-height:1.2;color:#155d3a;background:transparent;border:2px solid #ccd9d0;border-radius:999px;box-shadow:none;padding:0 var(--btn-pad-x-sm,22px);min-height:var(--btn-h-sm,38px)}
/* The card role's 38px suits a mouse; a finger needs the 44px floor every other
   tappable control in this form keeps. */
@media(pointer:coarse){.pcr-registration--flow .pcr-flow__back,.pcr-registration--flow .pcr-flow__edit{min-height:44px}}
.pcr-flow__summary{display:grid;gap:12px}
.pcr-flow__summary-card{position:relative;padding:18px 90px 18px 18px;border:1px solid #dce4de;border-radius:12px;overflow-wrap:anywhere}
.pcr-registration--flow .pcr-flow__summary-card h3{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:normal;text-transform:none;margin:0 0 8px}
.pcr-registration--flow .pcr-flow__summary-card p{font-size:15px;line-height:1.5;margin:4px 0;color:#43574a;white-space:pre-line}
.pcr-flow__summary-card .pcr-flow__edit{position:absolute;right:12px;top:12px}
.pcr-registration--flow .pcr-flow__reservation{padding:14px;background:#f1f6f2;border-radius:8px;font-size:14px;line-height:1.6;margin:0}
.pcr-registration--flow .pcr-registration__privacy{font-size:13px;line-height:1.6;color:#526358;margin:0}
.pcr-registration--flow .pcr-registration__submit-bar{padding:0;margin:0}
.pcr-registration--flow button:focus-visible,.pcr-registration--flow summary:focus-visible{outline:3px solid #c98a2c;outline-offset:3px}
@media(max-width:640px){
.pcr-registration--flow form{padding:20px 16px;border-radius:14px;gap:20px}
.pcr-registration--flow [data-flow-title]{font-size:24px}
.pcr-flow__progress{gap:4px;margin-bottom:22px!important}
.pcr-flow__progress li{font-size:12px;padding:8px 0}
.pcr-registration--flow [data-address-grid]{grid-template-columns:1fr 1fr}
.pcr-registration--flow [data-address-grid]>.pcr-registration__field{grid-column:1/-1}
.pcr-registration--flow .pcr-registration__participant{padding:16px 12px}
.pcr-flow__summary-card{padding:16px}
.pcr-flow__summary-card .pcr-flow__edit{position:static;margin-top:8px}
/* No size override here: a narrow screen does not make an action less important,
   and the tokens already size every button for it. Only the horizontal padding
   tightens, so two buttons still fit one row. */
.pcr-registration--flow button[data-flow-next]{padding-left:16px;padding-right:16px}
.pcr-registration--flow .pcr-flow__back{padding-left:12px;padding-right:12px}
}
.pcr-registration__grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px
}
.pcr-registration__grid--single{
grid-template-columns:1fr
}
/* Wraps a label plus a sibling control (the "ten sam adres" link under Ulica)
as one grid cell — a <button> cannot live inside the <label> it follows
without becoming part of the street input's accessible name. */
.pcr-registration__field{
display:grid;
gap:6px;
align-content:start
}
.pcr-registration label{
display:grid;
gap:6px;
align-content:start;
font-family:var(--body-font,Arial,sans-serif);
font-weight:700;
letter-spacing:normal;
text-transform:none;
font-size:14px;
color:var(--reg-green-ink)
}
.pcr-registration label span{
text-transform:none;
letter-spacing:normal;
font-family:var(--body-font,inherit);
font-weight:400;
font-size:14px;
color:#526358
}
.pcr-registration .pcr-registration__help{
font-size:16px;
font-weight:400;
line-height:1.6;
color:#43574a;
margin:0 0 20px
}
.pcr-registration__optional{
min-width:0;
padding:14px 0;
border-top:1px solid #dce4de
}
.pcr-registration__optional>summary{
cursor:pointer;
color:var(--reg-green-ink);
font-size:15px;
font-weight:600;
line-height:1.5;
min-height:32px
}
.pcr-registration__optional[open]>summary{margin-bottom:16px}
.pcr-registration input:not([type=checkbox]):not([type=radio]),.pcr-registration select,.pcr-registration textarea{
box-sizing:border-box;
width:100%;
min-height:44px;
padding:12px 14px;
border:1.5px solid #cfd8d1;
border-radius:12px;
font:16px/1.4 var(--body-font,inherit);
font-weight:400;
text-transform:none;
letter-spacing:normal;
background:#fbfbf9;
color:#1a2b21
}
.pcr-registration textarea{
resize:vertical
}
/* The theme already defines a global 3px green focus-visible ring
(a,button,input,textarea,select — theme/header.php); this rule only has to
win specificity to fix the ring's border-radius (the theme's own rule snaps
it to 6px, which does not match this form's 12px inputs) — the ring itself
must stay the same colour and width as everywhere else on the site. */
.pcr-registration input:focus-visible,.pcr-registration select:focus-visible,.pcr-registration textarea:focus-visible{
outline:3px solid var(--reg-green);
outline-offset:3px;
border-color:var(--reg-green);
border-radius:12px
}
.pcr-registration button:focus-visible,.pcr-registration summary:focus-visible{
outline:3px solid var(--reg-green);
outline-offset:3px
}
/* The theme owns the button system (--btn-* in header.php's :root). This plugin
   consumes those tokens so a size lives in one place; the fallbacks keep the form
   usable if the plugin is ever rendered under a different theme. */
.pcr-registration button{
justify-self:start;
border:0;
border-radius:999px;
min-height:var(--btn-h-sm,38px);
padding:0 var(--btn-pad-x-sm,22px);
font-family:var(--reg-sans);
font-size:var(--btn-font-sm,14px);
font-weight:700;
line-height:1.2;
text-transform:uppercase;
letter-spacing:var(--btn-track,.03em);
cursor:pointer
}
.pcr-registration button:disabled{
opacity:.5;
cursor:not-allowed
}
.pcr-registration button[type="submit"]{
background:var(--reg-green);
color:#fff;
min-height:var(--btn-h,46px);
padding:0 var(--btn-pad-x,30px);
font-size:var(--btn-font,16px);
box-shadow:var(--reg-shadow-sm);
transition:transform .15s ease,box-shadow .15s ease,background .15s ease
}
.pcr-registration button[type="submit"]:hover{
background:var(--green-dark,#0e4029);
transform:translateY(-2px);
box-shadow:var(--reg-shadow-md)
}
@media(prefers-reduced-motion:reduce){
.pcr-registration button[type="submit"]:hover{
transform:none
}
}
.pcr-registration__submit-bar{
margin-top:4px
}
/* --------- CAMP/TERM SUMMARY --------- */
.pcr-registration__camp-summary summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:44px;
padding:10px 14px;
border-radius:12px;
background:var(--reg-sand);
list-style:none;
cursor:pointer;
font-family:var(--reg-sans);
font-weight:700;
color:var(--reg-green-ink)
}
.pcr-registration__camp-summary[open] summary{
background:transparent;
padding:0 0 16px
}
/* Nothing picked yet: the details is always open here (nothing to toggle), and
the legend above already says "Obóz i termin" while the two selects below carry
their own "Wybierz obóz"/"Wybierz termin" placeholders — a third restatement
("Wybierz obóz i termin") on the summary line only repeated them. The element
stays in the DOM (a details needs a summary, and a test force-clicks it to prove
the pending prompt cannot be collapsed into a stale "zmień") but renders with no
box, not just invisible text, so it never claims a click target. */
.pcr-registration__camp-summary--pending summary{
cursor:default;
pointer-events:none;
position:absolute!important;
width:1px!important;
height:1px!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
border:0!important
}
.pcr-registration__camp-summary summary::-webkit-details-marker{
display:none
}
.pcr-registration__camp-summary-line{
text-transform:none;
letter-spacing:normal;
font-weight:600;
color:#3c473f;
overflow-wrap:anywhere
}
.pcr-registration__camp-summary-change{
flex:none;
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.03em;
color:var(--reg-green);
text-decoration:underline;
text-underline-offset:3px
}
.pcr-registration__camp-summary[open] .pcr-registration__camp-summary-change{
display:none
}
/* --------- PARTICIPANT CARD --------- */
.pcr-registration__participant{
display:block;
background:#fff;
border-radius:var(--reg-radius);
box-shadow:var(--reg-shadow-sm);
padding:clamp(16px,3vw,24px)
}
/* [hidden] loses to any element that sets its own `display` (participant,
label, section all do), so it needs re-asserting per component rather than
relying on the UA default. A single generic rule at the end of the sheet
would work too, but per-component keeps each fix next to the layout it
overrides and visible in a diff. */
.pcr-registration__participant[hidden]{
display:none
}
.pcr-registration [data-self-duplicate][hidden]{
display:none
}
.pcr-registration [data-self-duplicate-group][hidden]{
display:none
}
.pcr-registration [data-activity-variant-field][hidden]{
display:none
}
/* Matches the spacing rhythm of the "Adres" divider above it: a grid with the
same 16px gap the participant body uses between its own direct children,
instead of the group-label's negative margin colliding with plain block flow. */
[data-self-duplicate-group]{
display:grid;
gap:16px
}
.pcr-registration__profile[hidden],
.pcr-registration__profile-saved[hidden],
.pcr-registration__profile-binding[hidden],
.pcr-registration__prompt[hidden],
[data-profile-lookup][hidden],
[data-profile-recovery][hidden]{
display:none
}
[data-recovery-email-field][hidden],
[data-recovery-phone-field][hidden]{
display:none!important
}
.pcr-registration__participant+.pcr-registration__participant{
margin-top:16px
}
.pcr-registration__participant-details{
display:block
}
.pcr-registration__participant-details>summary{
cursor:default;
list-style:none
}
.pcr-registration__participant-details>summary::-webkit-details-marker{
display:none
}
/* Belt-and-suspenders with the JS toggle guard: a participant section must
stay open on desktop (binding constraint), so <summary> stops being a click
target above the mobile breakpoint entirely. */
@media(min-width:641px){
.pcr-registration__participant-details>summary{
pointer-events:none
}
}
.pcr-registration__participant-head{
display:flex;
align-items:baseline;
gap:10px;
flex-wrap:wrap;
min-height:44px
}
.pcr-registration__participant-title{
font-family:var(--reg-sans);
text-transform:uppercase;
letter-spacing:.05em;
font-size:15px;
font-weight:800;
color:var(--reg-green-ink);
margin:0;
display:flex;
align-items:baseline;
gap:8px
}
/* A small caption above the address/contact groups within a participant card —
deliberately not a nested <legend> (the form's legend styling is heavy, meant
for the page-level numbered steps) and not a heading (it must not add another
level to the outline; the fieldset legend above already names "Uczestnicy"). */
.pcr-registration__field-group-label{
margin:4px 0 0;
font-family:var(--body-font,Arial,sans-serif);
text-transform:none;
letter-spacing:normal;
font-size:14px;
font-weight:700;
color:#526358
}
.pcr-registration__participant-summary{
font-family:var(--body-font,inherit);
text-transform:none;
letter-spacing:normal;
font-weight:400;
font-size:14px;
color:#7c8a80
}
.pcr-registration__participant-body{
display:grid;
gap:16px;
margin-top:14px
}
.pcr-registration__participant-actions{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap
}
.pcr-registration .pcr-registration__remove{
background:transparent;
color:#7c8a80;
min-height:44px;
padding:10px 4px;
font-size:13px;
text-decoration:underline;
text-underline-offset:3px
}
.pcr-registration .pcr-registration__remove:hover{
color:var(--reg-green-ink)
}
.pcr-registration .pcr-registration__copy-address{
justify-self:start;
background:transparent;
min-height:44px;
padding:0;
margin-top:-2px;
font-family:var(--body-font,inherit);
text-transform:none;
letter-spacing:normal;
font-weight:400;
font-size:13px;
color:var(--reg-green);
text-decoration:underline;
text-underline-offset:3px
}
.pcr-registration .pcr-registration__copy-address::before{
content:"↳ ";
text-decoration:none
}
.pcr-registration .pcr-registration__copy-address:hover{
color:var(--reg-green-ink)
}
.pcr-registration .pcr-registration__add-participant{
background:transparent;
color:var(--reg-green-ink);
border:2px solid var(--reg-green-ink);
min-height:44px;
padding:10px 18px;
font-size:14px
}
.pcr-registration .pcr-registration__add-participant:hover{
background:var(--reg-green-ink);
color:#fff
}
.pcr-registration__counter,.pcr-registration__privacy{
font-size:.9rem;
color:#607068
}
.pcr-registration__crossroad{
margin:0 0 22px;
font-size:.9rem;
color:#607068
}
.pcr-registration__crossroad a{
color:var(--reg-green);
font-weight:700
}
.pcr-registration .pcr-registration__checkbox-field{
grid-template-columns:auto 1fr;
align-items:start;
gap:6px 10px;
min-height:44px
}
.pcr-registration .pcr-registration__checkbox-field input[type=checkbox]{
width:20px;
height:20px;
min-height:20px;
margin-top:2px;
flex-shrink:0
}
.pcr-registration .pcr-registration__checkbox-field span{
font-family:var(--body-font,inherit);
text-transform:none;
letter-spacing:normal;
font-weight:650;
font-size:15px;
color:inherit
}
.pcr-registration__success,.pcr-registration__error,.pcr-registration__notice{
padding:13px 16px;
border-radius:12px;
border-left:3px solid transparent;
font-size:15px;
line-height:1.5
}
.pcr-registration__success{
background:var(--reg-green-light);
color:var(--reg-green-ink);
border-left-color:var(--reg-green)
}
.pcr-registration__error{
background:#fbe9c9;
color:#7a5b0e;
border-left-color:var(--reg-gold)
}
.pcr-registration__error strong{
display:block;
margin-bottom:6px
}
.pcr-registration__error ul{
margin:0;
padding-left:1.2em
}
.pcr-registration__error a{
color:inherit;
text-decoration:underline
}
.pcr-registration__error:focus-visible{
outline:3px solid var(--reg-green);
outline-offset:3px
}
.pcr-registration .pcr-registration__field-error{
display:block;
color:#a52a24;
font-size:13px;
font-weight:500;
line-height:1.45;
margin:0;
overflow-wrap:anywhere
}
.pcr-registration [aria-invalid="true"]{
border-color:#b83b32;
background:#fff8f7;
box-shadow:0 0 0 1px #b83b32
}
/* :focus-visible, not :focus — a mouse click into an invalid field must not
   fire this ring, only real keyboard/AT focus. The colour is the plugin's own
   existing error red (border/box-shadow above), which gives >=3:1 contrast
   against the #fbfbf9 input background; the previous #f4c8c3 pink was ~1.5:1,
   invisible exactly when a visitor is sent to the invalid field on submit. */
.pcr-registration [aria-invalid="true"]:focus-visible{outline:3px solid #b83b32;outline-offset:2px}
.pcr-registration__contact-help{grid-column:1/-1;margin:0;font-size:14px;color:#43574a}
.pcr-registration--flow .pcr-flow__validation-notice{margin:16px 0 0;padding:12px 14px;border-left:3px solid #b83b32;border-radius:6px;background:#fff4f2;color:#8f2922;font-size:14px;line-height:1.5}
.pcr-registration--flow .pcr-flow__missing{color:#8f5419;font-size:13px}
.pcr-flow__navigation{flex-wrap:wrap}
.pcr-registration--flow [data-add-participant],.pcr-registration--flow [data-add-new-participant],.pcr-registration--flow [data-remove-participant],.pcr-registration--flow [data-copy-previous],.pcr-registration--flow [data-mark-self]{font-family:inherit;text-transform:none;letter-spacing:normal;font-size:14px;overflow-wrap:anywhere}
.pcr-registration__notice{
background:var(--reg-sand)
}
/* Collapsed by default: one quiet line, not a card — the panel only grows
card chrome once a visitor opens it (--expanded, set by JS on click). This is
what turns "the panel shows everything at once" into progressive disclosure:
nothing past the prompt line has a box to sit in until it is asked for.
padding:0 overrides the theme's global `section{padding:88px 0}` (theme/
header.php) the same way the outer .pcr-registration section already does —
without it the collapsed line sits inside 176px of invisible padding. */
.pcr-registration__profile{
margin:0 0 18px;
padding:0
}
/* Recovery is an enhancement, not a dead no-script control. The standalone
   landing page remains usable without this bundle; ordinary registration must
   stay quiet and complete when JavaScript is unavailable. */
.pcr-registration:not(.pcr-registration--js) [data-profile-flow],
.pcr-registration:not(.pcr-registration--js) [data-profile-open]{
display:none!important
}
.pcr-registration__profile-contact-link{
margin:8px 0 0
}
.pcr-registration__profile-contact-link button{
background:transparent;
border:0;
padding:0;
color:var(--reg-green);
text-decoration:underline;
cursor:pointer
}
.pcr-registration__recovery-channels{
display:flex;
flex-wrap:wrap;
gap:12px;
margin:0;
padding:0;
border:0
}
.pcr-registration__recovery-channels[hidden]{display:none}
.pcr-registration__recovery-channels legend{
width:100%;
font-weight:600
}
.pcr-registration__recovery-channels label{
display:flex;
align-items:center;
gap:8px;
min-height:44px
}
.pcr-registration__recovery-channels input[type=radio]{
width:20px;
height:20px;
min-height:20px;
margin:0;
flex:0 0 20px
}
[data-recovery-phone-field] small{
display:block;
margin-top:4px;
color:#536159
}
.pcr-registration__recovery-landing{
display:grid;
gap:12px;
margin:0 0 18px;
padding:clamp(16px,3vw,24px);
border:1px solid #dfe6e0;
border-radius:var(--reg-radius);
background:#f7faf8
}
.pcr-registration__recovery-landing[hidden]{
display:none
}
.pcr-registration__profile--expanded{
display:grid;
gap:16px;
padding:clamp(16px,3vw,24px);
border:1px solid #dfe6e0;
border-radius:var(--reg-radius);
background:#f7faf8
}
[data-profile-prompt]{
margin:0;
font-size:14px;
color:#3c473f
}
[data-profile-prompt] button{
background:transparent;
border:0;
padding:0;
font-family:inherit;
text-transform:none;
letter-spacing:normal;
font-size:inherit;
font-weight:700;
color:var(--reg-green);
text-decoration:underline;
text-underline-offset:3px;
cursor:pointer
}
[data-profile-lookup]{
display:grid;
gap:12px;
margin-top:12px
}
.pcr-registration__profile h3,.pcr-registration__profile h4,.pcr-registration__profile p{
margin:0
}
.pcr-registration__profile h3{
font-size:22px;
color:var(--reg-green-ink)
}
.pcr-registration__profile-saved,.pcr-registration__profile-binding,.pcr-registration__prompt{
display:grid;
gap:14px;
padding-top:16px;
border-top:1px solid #dfe6e0
}
.pcr-registration__profile-binding small{
display:block;
margin-top:4px;
color:#536159
}
.pcr-registration__profile ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none
}
.pcr-registration__profile li{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 10px
}
.pcr-registration__profile li span{
flex:1 1 180px;
overflow-wrap:anywhere
}
.pcr-registration__profile [data-profile-logout]{
background:#edf4ef;
color:var(--reg-green);
padding:8px 14px;
font-size:.9rem
}
.pcr-registration [aria-busy="true"]{
cursor:progress
}
.pcr-registration__trap{
position:absolute!important;
left:-10000px!important;
width:1px!important;
height:1px!important;
overflow:hidden!important
}
@media(max-width:640px){
.pcr-registration__grid{
grid-template-columns:1fr
}
.pcr-registration__participant-head{
align-items:flex-start
}
.pcr-registration__participant-actions{
width:100%
}
.pcr-registration .pcr-registration__add-participant{
min-height:44px;
width:100%;
text-align:center
}
.pcr-registration button[type="submit"]{
justify-self:stretch;
width:100%;
text-align:center
}
/* Participant sections become tap-to-expand <details> only below this
breakpoint; registration.js decides the initial open/closed state per
section (data or an error keeps it open) and only ever narrows this rule's
effect, never widens it — the JS never collapses a section above 640px. */
.pcr-registration__participant-details>summary{
cursor:pointer;
min-height:44px;
display:flex;
align-items:center
}
.pcr-registration__participant-details:not([open])>summary::after{
content:"▾";
margin-left:auto;
color:var(--reg-green);
font-size:13px
}
.pcr-registration__participant-details[open]>summary::after{
content:"▴";
margin-left:auto;
color:var(--reg-green);
font-size:13px
}
/* Keep submission after the consents; never cover a focused field. */
.pcr-registration__submit-bar{
position:static;
margin:12px 0 0;
padding:12px 0;
background:transparent;
box-shadow:none
}
.pcr-registration input,.pcr-registration select,.pcr-registration textarea{
scroll-margin-bottom:96px
}
}
@media print{
.pcr-registration{
display:none!important
}

}
.pcr-registration__copy,.pcr-registration__remove,.pcr-registration__add-participant{
display:none
}
/* Scoped like the sibling __remove/__add-participant rules above: a bare .pcr-registration__copy
   (0,1,0) sits below the base ".pcr-registration button" rule (0,1,1) in specificity, so its
   own WCAG tap-target floor would otherwise lose to the base rule's --btn-h-sm pill height. */
.pcr-registration .pcr-registration__copy{min-height:44px}
.pcr-registration--js .pcr-registration__copy:not([hidden]),.pcr-registration--js .pcr-registration__remove:not([hidden]),.pcr-registration--js .pcr-registration__add-participant:not([hidden]){
display:inline-block
}
.pcr-registration--js [data-count-field]{
position:absolute!important;
left:-10000px!important;
width:1px!important;
height:1px!important;
overflow:hidden!important
}

/* Recovery reuses the ordinary contact inputs; no second lookup form. */
.pcr-registration:not(.pcr-registration--js) [data-recovery-request],
[data-recovery-request][hidden], [data-recovery-status][hidden],
[data-recovery-help][hidden], [data-recovery-option][hidden]{display:none!important}
.pcr-registration__recovery-card{
margin-top:24px;padding:20px;border:1px solid #d6e2d8;border-radius:12px;
background:#f4f7f2;color:var(--reg-ink)
}
.pcr-registration__recovery-card summary{
font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.5;cursor:pointer;
min-height:44px;align-content:center
}
.pcr-registration__recovery-card summary:focus-visible{outline:3px solid var(--reg-green);outline-offset:4px}
.pcr-registration__recovery-content{padding-top:16px}
.pcr-registration__recovery-card p{font-size:.9rem;line-height:1.55;margin:0 0 16px}
.pcr-registration__recovery-actions{display:flex;flex-wrap:wrap;gap:16px}
.pcr-registration__recovery-option{min-width:0;flex:1 1 190px}
.pcr-registration__recovery-option small{display:block;margin-top:6px;overflow-wrap:anywhere;line-height:1.4}
.pcr-registration .pcr-registration__recovery-inline{
width:100%;min-height:44px;background:#fff;color:var(--reg-green);
border:1px solid currentColor;border-radius:8px;padding:10px 12px;
font:inherit;font-size:.9rem;font-weight:600;text-transform:none;letter-spacing:normal;cursor:pointer
}
.pcr-registration .pcr-registration__recovery-inline:disabled{cursor:default;opacity:1;color:#526557;border-color:#bccabd;background:transparent}
.pcr-registration__recovery-inline:focus-visible{outline:3px solid var(--reg-green);outline-offset:3px}
.pcr-registration__recovery-card .pcr-registration__recovery-feedback{margin:16px 0 0;padding-top:16px;border-top:1px solid #d6e2d8}
.pcr-registration__recovery-card .pcr-registration__recovery-skip{margin:16px 0 0;color:#526557;font-size:.85rem}