/* Registration is a focused workspace inside the Cursafosca identity. */
.registration [hidden] { display: none !important; }
.registration { padding-block-end: var(--s2); }
.registration .wrap { max-inline-size: var(--reg-content-width); }
.reg-header { border-block-end: 1px solid var(--rule); }
.reg-header-in { min-block-size: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.reg-header-links { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-caption); color: var(--text-dim); }
.reg-header-links a { text-decoration: none; }
.reg-header-links a:hover { color: var(--text); }
.reg-theme { border: 1px solid var(--rule); border-radius: var(--r-pill); background: transparent; inline-size: var(--s4); block-size: var(--s4); cursor: pointer; font-size: var(--fs-lead); }
.reg-main { padding-block-start: var(--s4); }
.reg-intro { display: flex; justify-content: space-between; align-items: end; gap: var(--s3); }
.reg-eyebrow { font-size: var(--fs-micro); font-weight: var(--w-bold); letter-spacing: var(--track-label); color: var(--text-dim); margin-block-end: var(--s2); }
.reg-intro .reg-eyebrow { color: var(--accent); }
.reg-eyebrow > span { margin-inline: var(--s1); opacity: .5; }
.reg-intro h1 { font-size: var(--reg-title); font-weight: var(--w-black); letter-spacing: var(--track-tight); line-height: var(--lh-snug); }
.reg-subtitle { color: var(--text-dim); margin-block-start: var(--s1); font-size: var(--fs-small); }
.reg-event { display: flex; align-items: baseline; gap: var(--s1); padding-block-end: var(--s1); font-size: var(--fs-small); }
.reg-event small { display: block; color: var(--text-dim); font-size: var(--fs-caption); }
.reg-event-dot, .reg-dot { display: inline-block; flex-shrink: 0; inline-size: var(--s1); block-size: var(--s1); border-radius: var(--r-pill); background: var(--accent); }
.reg-preview { margin-block: var(--s3); background: var(--ink-2); padding: var(--s2); font-size: var(--fs-caption); }
.reg-preview summary { display: flex; align-items: center; gap: var(--s1); cursor: pointer; list-style: none; }
.reg-preview summary::-webkit-details-marker { display: none; }
.reg-preview p { margin-block-start: var(--s2); color: var(--text-dim); max-inline-size: 85ch; }
.reg-preview-link { margin-inline-start: auto; color: var(--text-dim); white-space: nowrap; }
.reg-progress { border-block-end: 1px solid var(--rule); margin-block-end: var(--s4); }
.reg-progress ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.reg-progress button { inline-size: 100%; display: flex; align-items: center; gap: var(--s1); padding: var(--s2) var(--s1) var(--s2) 0; min-block-size: var(--reg-control-height); border: 0; border-block-end: 2px solid transparent; margin-block-end: -1px; background: transparent; color: var(--text-dim); text-align: start; font-size: var(--fs-small); cursor: pointer; }
.reg-progress button > .reg-step-num { font-size: var(--fs-micro); margin-inline-end: var(--s1); inline-size: var(--s3); block-size: var(--s3); display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.reg-progress button[aria-current] { color: var(--text); border-block-end-color: var(--accent); }
.reg-progress button[aria-current] > .reg-step-num { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.reg-progress button.is-complete > .reg-step-num { border-color: var(--accent); color: var(--accent); }
.reg-progress button:disabled { opacity: .45; cursor: default; }
.reg-layout { display: grid; grid-template-columns: minmax(0,1fr) var(--reg-panel-width); gap: var(--reg-layout-gap); align-items: start; }
.reg-content { min-inline-size: 0; }
.reg-content h2 { font-size: var(--reg-heading); font-weight: var(--w-bold); letter-spacing: var(--track-display); line-height: var(--lh-snug); }
.reg-content h2:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--s1); }
.reg-help { font-size: var(--fs-small); color: var(--text-dim); margin-block: var(--s1) var(--s3); }
.reg-routes, .reg-products, .reg-sizes, .reg-inline, .reg-fieldset { border: 0; padding: 0; min-inline-size: 0; }
.reg-routes { display: grid; margin-block-start: var(--s3); }
.reg-route { display: grid; grid-template-columns: var(--s5) minmax(0,1fr) var(--s6) auto var(--s3); align-items: center; gap: var(--s2); position: relative; padding: var(--s3) var(--s2); border-block-start: 1px solid var(--rule-strong); cursor: pointer; transition: background var(--t-micro), box-shadow var(--t-micro); }
.reg-route:last-child { border-block-end: 1px solid var(--rule-strong); }
.reg-route--trail { --route-color: var(--trail); }
.reg-route--cursa { --route-color: var(--cursa); }
.reg-route--caminada { --route-color: var(--caminada); }
.reg-route::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: var(--s3); inline-size: 2px; background: var(--route-color); }
.reg-route:has(input:checked) { background: var(--reg-surface-selected); box-shadow: inset 0 0 0 1px var(--accent); border-block-start-color: transparent; }
.reg-route:has(input:focus-visible), .reg-sizes label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; z-index: 1; }
.reg-route:hover { background: var(--ink-2); }
.reg-route:has(input:checked):hover { background: var(--reg-surface-selected); }
.reg-route > input, .reg-sizes input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.reg-distance { color: var(--route-color); font-size: var(--reg-distance); font-weight: var(--w-black); line-height: var(--lh-snug); letter-spacing: var(--track-num); font-variant-numeric: tabular-nums; }
.reg-distance small { font-size: var(--fs-lead); }
.reg-route-top { font-size: var(--fs-lead); font-weight: var(--w-bold); display: block; line-height: var(--lh-snug); }
.reg-route-top small { font-size: var(--fs-caption); display: block; color: var(--text-dim); font-weight: var(--w-regular); margin-block-start: var(--s1); }
.reg-elevation { font-size: var(--fs-micro); display: block; color: var(--text-dim); margin-block-start: var(--s1); }
.reg-profile { inline-size: 100%; color: var(--route-color); opacity: .8; }
.reg-route-bottom { text-align: end; }
.reg-route-bottom strong { font-size: var(--fs-data); font-weight: var(--w-bold); line-height: var(--lh-snug); display: block; white-space: nowrap; }
.reg-route-bottom strong small { font-size: var(--fs-small); }
.reg-route-bottom > small { color: var(--text-dim); font-size: var(--fs-micro); white-space: nowrap; }
.reg-radio { inline-size: var(--s3); block-size: var(--s3); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); display: grid; place-items: center; }
.reg-route:has(input:checked) .reg-radio { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.reg-route:has(input:checked) .reg-radio::after { content: '✓'; font-size: var(--fs-small); font-weight: var(--w-bold); }
.reg-other { margin-block: var(--s3); font-size: var(--fs-small); }
.reg-other summary { cursor: pointer; color: var(--text-dim); text-decoration: underline; text-underline-offset: .3em; }
.reg-products { margin-block-start: var(--s2); }
.reg-product { display: flex; align-items: center; gap: var(--s2); min-block-size: 44px; padding: var(--s2) 0; border-block-end: 1px solid var(--rule); cursor: pointer; }
.reg-product span { flex: 1; }
.reg-product small { display: block; color: var(--text-dim); }
.reg-included { margin-block: var(--s4); }
.reg-included .reg-eyebrow { font-size: var(--fs-micro); }
.reg-included ul { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s1) var(--s2); font-size: var(--fs-caption); color: var(--text-dim); }
.reg-included li::before { content: '✓'; color: var(--accent); margin-inline-end: var(--s1); }
.reg-included a { display: inline-block; margin-block-start: var(--s2); font-size: var(--fs-caption); text-underline-offset: .3em; }
.reg-summary { position: sticky; inset-block-start: var(--s3); background: var(--ink-2); }
.reg-summary-image { position: relative; overflow: hidden; }
.reg-summary-image img { inline-size: 100%; aspect-ratio: 1.65; object-fit: cover; }
.reg-summary-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, var(--dusk-0)); opacity: .6; }
.reg-summary-image span { position: absolute; z-index: 1; inset-inline-start: var(--s3); inset-block-end: var(--s2); color: var(--moon); font-size: var(--fs-h3); font-weight: var(--w-black); line-height: var(--lh-heading); letter-spacing: var(--track-display); }
.reg-summary-body { padding: var(--s3); }
.reg-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.reg-summary h2 { font-size: var(--fs-small); font-weight: var(--w-bold); }
.reg-summary-heading > span { color: var(--text-dim); font-size: var(--fs-micro); }
.reg-summary-line { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-small); margin-block-start: var(--s3); }
.reg-summary-line small { display: block; color: var(--text-dim); font-size: var(--fs-caption); margin-block-start: var(--s1); }
.reg-summary-line strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg-summary-extra { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-caption); color: var(--text-dim); margin-block-start: var(--s1); }
.reg-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding-block-start: var(--s3); margin-block-start: var(--s3); border-block-start: 1px solid var(--rule-strong); font-size: var(--fs-small); }
.reg-total strong { font-size: var(--fs-data); font-variant-numeric: tabular-nums; }
.reg-summary-note { font-size: var(--fs-micro); color: var(--text-dim); margin-block-start: var(--s1); }
.reg-summary-foot { padding: var(--s2) var(--s3) var(--s3); display: grid; gap: var(--s1); font-size: var(--fs-caption); border-block-start: 1px solid var(--rule); }
.reg-summary-foot p { color: var(--text-dim); margin-block-end: var(--s1); }
.reg-summary-foot a { text-decoration: none; }
.reg-summary .reg-help { font-size: var(--fs-caption); margin-block: var(--s3); }
.reg-actions { display: flex; align-items: center; justify-content: end; gap: var(--s3); margin-block: var(--s4) var(--s3); border-block-start: 1px solid var(--rule); padding-block-start: var(--s3); }
.reg-actions .btn { cursor: pointer; min-block-size: var(--reg-control-height); padding-inline: var(--s3); gap: var(--s3); text-transform: none; letter-spacing: var(--track-snug); font-size: var(--fs-small); }
.reg-actions .btn:disabled { opacity: .5; cursor: default; }
.reg-back { margin-inline-end: auto; border: 0; background: transparent; font-size: var(--fs-small); cursor: pointer; padding-block: var(--s2); color: var(--text-dim); }
.reg-back:hover { color: var(--text); }
.reg-mobile-total { display: none; }
.reg-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); border-block-start: 1px solid var(--rule); padding-block: var(--s3); margin-block-start: var(--s4); font-size: var(--fs-micro); color: var(--text-dim); }
.reg-fieldset { padding-block: var(--s3); border-block-end: 1px solid var(--rule); }
.reg-fieldset legend { padding-block-start: var(--s2); font-weight: var(--w-bold); font-size: var(--fs-small); }
.reg-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3) var(--s2); }
.reg-field { display: grid; gap: var(--s1); font-size: var(--fs-small); align-content: start; }
.reg-field small, .reg-field-hint { color: var(--text-dim); font-size: var(--fs-caption); }
.reg-field-hint { margin-block-start: var(--s1); }
.reg-field input, .reg-field select, .reg-field textarea { inline-size: 100%; min-inline-size: 0; min-block-size: var(--reg-control-height); padding: var(--s2); background: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); font-family: var(--font-body); font-size: var(--fs-small); color: var(--text); transition: border-color var(--t-micro); }
.reg-field input:focus, .reg-field select:focus, .reg-field textarea:focus { border-color: var(--accent); }
.reg-field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 2px 0 var(--error); }
.reg-field.reg-invalid-field { color: var(--error); }
.reg-field textarea { resize: vertical; }
.reg-field-error { color: var(--error); font-size: var(--fs-caption); font-weight: var(--w-bold); }
.reg-check.reg-invalid-field { color: var(--error); }
.reg-check.reg-invalid-field input { outline: 2px solid var(--error); outline-offset: 2px; }
.reg-check .reg-field-error { flex-basis: 100%; margin-inline-start: calc(var(--s2) + var(--s2)); }
.registration input { accent-color: var(--accent); }
.reg-option-block { padding-block: var(--s3); border-block-end: 1px solid var(--rule); }
.reg-option-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-block-end: var(--s2); }
.reg-option-block h3, .reg-payment h3 { font-size: var(--fs-lead); font-weight: var(--w-bold); letter-spacing: var(--track-snug); }
.reg-option-heading > span { font-size: var(--fs-caption); color: var(--accent); }
.reg-sizes { display: flex; flex-wrap: wrap; gap: var(--s1); }
.reg-sizes label { position: relative; cursor: pointer; }
.reg-sizes span { display: grid; place-items: center; min-inline-size: var(--s4); min-block-size: var(--reg-control-height); padding: var(--s2); border: 1px solid var(--rule-strong); font-size: var(--fs-small); }
.reg-sizes input:checked + span { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.reg-check { display: flex; align-items: flex-start; gap: var(--s2); min-block-size: 44px; margin-block-start: var(--s3); padding-block: .65rem; font-size: var(--fs-small); cursor: pointer; }
.reg-check input { flex-shrink: 0; inline-size: 1.2rem; block-size: 1.2rem; margin-block-start: .1rem; accent-color: var(--accent); }
.reg-check small { color: var(--text-dim); margin-inline-start: var(--s1); }
.reg-inline { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-small); }
.reg-inline label { display: inline-flex; align-items: center; min-block-size: 44px; cursor: pointer; }
.reg-sizes.reg-invalid-group, .reg-inline.reg-invalid-group, .reg-products.reg-invalid-group, .reg-routes.reg-invalid-group { border: 1px solid var(--error); border-radius: var(--r-sm); background: var(--error-surface); padding: var(--s2); }
.reg-routes.reg-invalid-group .reg-route { border-color: var(--error); }
.reg-invalid-group > .reg-field-error { display: block; flex-basis: 100%; inline-size: 100%; grid-column: 1 / -1; margin-block-start: var(--s2); }
.reg-extra-details summary { display: flex; justify-content: space-between; gap: var(--s2); cursor: pointer; list-style: none; font-size: var(--fs-lead); font-weight: var(--w-bold); }
.reg-extra-details summary::-webkit-details-marker { display: none; }
.reg-extra-details summary small { display: block; font-size: var(--fs-caption); color: var(--text-dim); font-weight: var(--w-regular); margin-block-start: var(--s1); }
.reg-extra-details[open] summary > span:last-child { transform: rotate(45deg); }
.reg-extra-content { margin-block-start: var(--s3); }
.reg-extra { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding-block: var(--s2); border-block-end: 1px solid var(--rule); font-size: var(--fs-small); }
.reg-extra.reg-invalid-field { flex-wrap: wrap; border-block-end-color: var(--error); box-shadow: inset 2px 0 var(--error); background: var(--error-surface); padding-inline: var(--s2); color: var(--error); }
.reg-extra .reg-field-error { flex-basis: 100%; }
.reg-extra small { display: block; color: var(--text-dim); font-size: var(--fs-caption); }
.reg-counter { display: flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); }
.reg-counter button { border: 0; background: transparent; cursor: pointer; inline-size: var(--s4); block-size: var(--s4); }
.reg-counter button:disabled { opacity: .35; cursor: default; }
.reg-counter input { appearance: textfield; inline-size: var(--s3); border: 0; background: transparent; text-align: center; font-size: var(--fs-small); padding: 0; }
.reg-counter input::-webkit-inner-spin-button { appearance: none; }
#extra-hoodie-field { margin-block-start: var(--s3); }
.reg-error, .reg-draft { padding: var(--s2); border-inline-start: 2px solid var(--accent); background: var(--ink-2); font-size: var(--fs-small); margin-block: var(--s2); }
.reg-error { border-inline-start-color: var(--error); background: var(--error-surface); color: var(--error); }
.reg-error a { color: var(--error); font-weight: var(--w-bold); text-underline-offset: .2em; }
.reg-draft { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-caption); }
.reg-draft button { border: 0; background: none; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.reg-review-person { margin-block-start: var(--s3); border-block: 1px solid var(--rule); padding-block: var(--s3); }
.reg-review-top { display: flex; justify-content: space-between; gap: var(--s2); }
.reg-review-top h3 { font-size: var(--fs-lead); font-weight: var(--w-bold); }
.reg-review-top > div { display: flex; gap: var(--s2); align-items: start; }
.reg-review-top button, .reg-add, .reg-review-edit { border: 0; background: transparent; color: var(--accent); font-size: var(--fs-caption); cursor: pointer; }
.reg-review-route { color: var(--text-dim); font-size: var(--fs-small); margin-block-start: var(--s1); }
.reg-review-options { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); color: var(--text-dim); font-size: var(--fs-caption); margin-block: var(--s2); }
.reg-review-person details { margin-block-start: var(--s2); font-size: var(--fs-caption); }
.reg-review-person summary { cursor: pointer; color: var(--text-dim); }
.reg-review-person dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin-block: var(--s2); overflow-wrap: anywhere; font-size: var(--fs-caption); }
.reg-review-person dt { color: var(--text-dim); }
.reg-review-person dd { margin: 0; }
.reg-review-person .reg-summary-line { margin-block-start: var(--s2); }
.reg-add { padding-block: var(--s3); text-align: start; font-size: var(--fs-small); }
.reg-payment { margin-block-start: var(--s3); padding: var(--s3); background: var(--ink-2); }
.reg-payment p:last-child, .reg-minor { color: var(--text-dim); font-size: var(--fs-small); margin-block-start: var(--s2); }
.reg-receipt { margin-block: var(--s4); padding-block: var(--s3); border-block: 1px solid var(--rule); }
.reg-receipt strong { font-size: var(--fs-data); overflow-wrap: anywhere; }
.reg-receipt p { font-size: var(--fs-small); color: var(--text-dim); }
.reg-confirm { max-inline-size: min(90vw, 30rem); padding: var(--s4); margin: auto; background: var(--ink-2); color: var(--text); border: 1px solid var(--rule-strong); font-family: var(--font-body); }
.reg-confirm::backdrop { background: var(--dusk-0); opacity: .8; }
.reg-confirm h2 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.reg-confirm p { color: var(--text-dim); font-size: var(--fs-small); margin-block: var(--s2) var(--s3); }
.reg-confirm-actions { display: flex; justify-content: end; align-items: center; gap: var(--s3); }
.reg-confirm-actions > button:first-child { background: none; border: 0; cursor: pointer; }
.reg-confirm-actions .btn { cursor: pointer; text-transform: none; letter-spacing: var(--track-snug); }
@media (max-width: 72rem) { .reg-route { grid-template-columns: var(--s5) minmax(0,1fr) auto var(--s3); } .reg-profile { display: none; } .reg-route-top small { display: none; } }
@media (max-width: 56rem) { .reg-layout { grid-template-columns: minmax(0,1fr) minmax(14rem,.45fr); gap: var(--s3); } .reg-summary-body, .reg-summary-foot { padding: var(--s2); } .reg-summary-image span { inset-inline-start: var(--s2); } .reg-event { display: none; } .reg-route { gap: var(--s1); } }
@media (max-width: 48rem) {
  .registration { padding-block-end: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
  .reg-header-in { min-block-size: var(--header-h); }
  .reg-header-links { gap: var(--s2); }
  .reg-header-links > a { font-size: var(--fs-micro); }
  .reg-main { padding-block-start: var(--s3); }
  .reg-intro .reg-eyebrow { font-size: var(--fs-micro); letter-spacing: var(--track-caps); }
  .reg-intro .reg-eyebrow > span { margin-inline: 0; }
  .reg-preview { margin-block: var(--s3) var(--s2); padding: var(--s2); }
  .reg-preview summary { flex-wrap: wrap; font-size: var(--fs-micro); }
  .reg-preview-link { display: none; }
  .reg-progress { position: sticky; inset-block-start: 0; z-index: 3; background: var(--ink); margin-block-end: var(--s3); }
  .reg-progress button { gap: 0; font-size: var(--fs-caption); }
  .reg-progress button > .reg-step-num { display: none; }
  .reg-progress button.is-complete { color: var(--accent); }
  .reg-layout { display: flex; flex-direction: column; gap: 0; }
  .reg-content, .reg-summary { inline-size: 100%; }
  .reg-summary { position: static; background: transparent; border-block-start: 1px solid var(--rule); margin-block-start: var(--s3); }
  .reg-summary-image, .reg-summary-foot { display: none; }
  .reg-summary-body { padding: var(--s3) 0; }
  .reg-summary-heading { margin-block-end: var(--s2); }
  .reg-summary-line { margin-block-start: var(--s2); }
  .reg-summary .reg-total { display: none; }
  .reg-summary-note { margin-block-start: var(--s3); }
  .reg-route { grid-template-columns: var(--s5) minmax(0,1fr) auto var(--s3); padding: var(--s3) var(--s2); gap: var(--s1); }
  .reg-route-top { font-size: var(--fs-body); }
  .reg-route-top small { display: none; }
  .reg-route-bottom strong { font-size: var(--fs-lead); }
  .reg-route-bottom > small { font-size: var(--fs-micro); }
  .reg-route-copy { padding-inline-end: var(--s1); }
  .reg-elevation { font-size: var(--fs-micro); }
  .reg-elevation > span[aria-hidden] { display: none; }
  .reg-elevation .reg-kind { display: block; } /* elevation, then the kind, each on its own line */
  .reg-actions { position: fixed; z-index: 5; inset-block-end: 0; inset-inline: 0; margin: 0; padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom)); min-block-size: var(--mbar-h); background: var(--ink); border-block-start: 1px solid var(--rule-strong); gap: var(--s2); box-shadow: 0 -1px 0 var(--rule); }
  .reg-actions .btn { min-block-size: var(--reg-control-height); padding-inline: var(--s3); margin-inline-start: auto; white-space: nowrap; }
  .reg-mobile-total { display: grid; margin-inline-end: auto; }
  .reg-mobile-total small { font-size: var(--fs-micro); color: var(--text-dim); }
  .reg-mobile-total strong { font-size: var(--fs-lead); line-height: var(--lh-snug); }
  .reg-back { margin: 0; font-size: var(--fs-caption); padding-inline: 0; }
  .reg-fields { gap: var(--s3) var(--s2); }
  .reg-field input, .reg-field select, .reg-field textarea { font-size: max(16px, var(--fs-small)); }
  .reg-option-heading { flex-wrap: wrap; gap: var(--s1); }
  .reg-footer { margin-block-start: var(--s3); }
  .reg-footer > span { display: none; }
  .reg-confirm { padding: var(--s3); }
}
@media (max-width: 26rem) { .reg-route { grid-template-columns: var(--s4) minmax(0,1fr) auto var(--s3); padding-inline: var(--s1); } .reg-distance { font-size: var(--fs-data); } .reg-distance small { font-size: var(--fs-caption); } .reg-fields { grid-template-columns: 1fr; } .reg-header .logo__word { font-size: var(--fs-small); } .reg-actions .btn { padding-inline: var(--s2); gap: var(--s1); } .reg-elevation { max-inline-size: 13ch; } }
@media (prefers-reduced-motion: reduce) { .reg-route, .reg-field input, .reg-field select, .reg-field textarea { transition: none; } }
@media (max-width: 48rem) {
  .reg-header-links > a { white-space: nowrap; }
  .reg-progress { margin-block-end: var(--s2); }
  #person-label { display: none; }
  .reg-route { padding-block: var(--s2); }
  .reg-back { font-size: 0; inline-size: var(--s3); flex-shrink: 0; }
  .reg-back::before { content: '←'; font-size: var(--fs-lead); }
}
@media (max-width: 26rem) {
  .reg-route { grid-template-columns: calc(var(--s4) + var(--s2)) minmax(0,1fr) auto var(--s3); }
  .reg-distance { font-size: clamp(2.4rem, 10vw, 3rem); }
  .reg-distance small { font-size: var(--fs-caption); }
  .reg-actions { gap: var(--s1); }
  .reg-actions .btn { font-size: var(--fs-caption); padding-inline: var(--s2); }
}
@media (max-width: 26rem) { .reg-header-links > a { display: none; } }
html[data-theme="day"] .registration .reg-route--cursa { --route-color: color-mix(in srgb, var(--cursa) 55%, var(--text)); }

@media (max-width: 26rem) { .reg-step-label { font-size: 0; } .reg-step-label::after { content: attr(data-short); font-size: var(--fs-caption); } }

/* Shared, restrained interaction rhythm for both registration journeys. */
.registration { --form-ease: cubic-bezier(.2,.7,.2,1); }
.registration :is(button,.btn,.reg-route,.reg-product,.vol-role,.reg-radio,.vol-role-check,.reg-sizes label span,.vol-sizes label span,.vol-food-options label > span,.reg-field input,.reg-field select,.vol-field input,.vol-field select):not(.vol-map-pin) { transition: background-color 180ms var(--form-ease),border-color 180ms var(--form-ease),color 180ms var(--form-ease),box-shadow 180ms var(--form-ease),transform 180ms var(--form-ease); }
.registration :is(.reg-area-arrow,.vol-area-arrow) { transition: transform 220ms var(--form-ease),color 180ms; }
.registration :is([data-panel],.vol-step,.vol-role-group,.vol-location-section,#extra-hoodie-field,.vol-picker-map,.vol-picker-list):not([hidden]) { animation: form-reveal 240ms var(--form-ease) both; }
.registration :is(.reg-field-error,.vol-error-message):not([hidden]) { animation: form-message 180ms ease-out both; }
.registration :is(.reg-role-chip,.vol-role-chip,.vol-picker-chip) { animation: form-message 180ms var(--form-ease) both; }
.registration :is(.btn,.reg-counter button,.vol-area-choices button):active { transform: scale(.985); }
.registration .reg-route:has(input:checked) .reg-radio { animation: selection-settle 220ms var(--form-ease); }
@keyframes form-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes form-message { from { opacity: 0; } to { opacity: 1; } }
@keyframes selection-settle { from { transform: scale(.8); } to { transform: scale(1); } }
@media(prefers-reduced-motion:reduce) {
  .registration *, .registration *::before, .registration *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared registration grammar: one heading, one progress rail, one action family. */
.registration .reg-intro { margin-block-end: 2rem; }
.registration .reg-intro .reg-eyebrow { text-transform: none; letter-spacing: 0; font-size: .875rem; margin-block-end: .8rem; }
.registration .reg-intro h1 { font-size: clamp(2.25rem,5vw,3.8rem); }
.registration .reg-progress,.registration .vol-progress-nav { margin-block-end: 2.75rem; border: 0; scroll-margin-top: 1rem; }
.registration :is(.reg-progress,.vol-progress-nav) ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; list-style: none; }
.registration :is(.reg-progress,.vol-progress-nav) button { display: flex; align-items: center; gap: .55rem; inline-size: 100%; min-block-size: 3rem; border: 0; border-block-start: 2px solid var(--rule); padding: .8rem 0; margin: 0; background: none; color: var(--text-dim); text-align: start; font: inherit; font-size: .875rem; cursor: pointer; }
.registration :is(.reg-progress,.vol-progress-nav) button[aria-current] { color: var(--text); border-color: var(--accent); }
.registration :is(.reg-progress,.vol-progress-nav) button.is-complete { border-color: var(--accent); }
.registration :is(.reg-progress,.vol-progress-nav) button:disabled { opacity: 1; cursor: default; }
.registration :is(.reg-progress,.vol-progress-nav) button .cf-icon { color: var(--text-dim); }
.registration :is(.reg-progress,.vol-progress-nav) button[aria-current] .cf-icon { color: var(--accent); }
.registration :is([data-panel] > h2,.vol-step-heading h2) { font-size: clamp(1.5rem,3vw,2rem); }
.registration .reg-summary { background: transparent; border-inline-start: 1px solid var(--rule); }
.registration .reg-summary-body { padding-block-start: .25rem; }
.registration .reg-summary-foot { margin-inline: var(--s3); padding-inline: 0; background: none; }
.registration .reg-summary h2 { font-size: 1rem; }
@media(max-width:48rem) {
  .registration :is(.reg-progress,.vol-progress-nav) { margin-block-end: 2rem; position: static; }
  .registration :is(.reg-progress,.vol-progress-nav) ol { gap: .65rem; }
  .registration :is(.reg-progress,.vol-progress-nav) button { gap: .3rem; font-size: .75rem; }
  .registration :is(.reg-progress,.vol-progress-nav) button .cf-icon { width: 1rem; height: 1rem; }
}
@media(max-width:48rem) {
  .registration :is(.reg-progress,.vol-progress-nav) button { flex-direction: column; align-items: flex-start; gap: .5rem; min-height: 4rem; }
  .registration .form-step-label { font-size: 0; }
  .registration .form-step-label::after { content: attr(data-short); font-size: .75rem; }
}

/* A continuous, soft focus halo; no detached rings around controls. */
.registration { --control-focus-glow: 0 0 14px 2px color-mix(in srgb,var(--accent) 14%,transparent); }
.registration :is(input,select,textarea,button,summary,a):focus-visible { outline: none; outline-offset: 0; box-shadow: var(--control-focus-glow); }
.registration :is(.reg-field,.vol-field,.vol-other-role,.vol-other-size,.vol-notes) :is(input,select,textarea):focus { outline: none; border-color: var(--rule-strong); box-shadow: var(--control-focus-glow); }
.registration :is(.reg-route,.reg-product,.reg-sizes label,.vol-role,.vol-food-options label,.vol-sizes label,.vol-route-options label):has(input:focus-visible) { outline: none; outline-offset: 0; box-shadow: var(--control-focus-glow); }
.registration :is(input,select,textarea)[aria-invalid="true"]:focus { border-color: var(--error); box-shadow: 0 0 14px 2px color-mix(in srgb,var(--error) 13%,transparent); }
.registration .vol-picker-search:focus-visible,.registration .vol-map-pin:focus-visible { outline: none; box-shadow: var(--control-focus-glow); }
.registration :is(.reg-content h2,.vol-step-heading h2):focus { outline: none; box-shadow: none; }
.registration .cf-disclosure-body { display: flow-root; }
.registration details > summary { list-style: none; }
.registration details > summary::-webkit-details-marker { display: none; }
.registration .reg-other summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding-block: .65rem; text-decoration: none; }
.registration .reg-other summary::after,.registration .reg-review-person summary::after { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-inline: .7rem .2rem; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 180ms ease; }
.registration :is(.reg-other,.reg-review-person details)[open] > summary::after { transform: rotate(225deg); }
.registration .reg-extra-details summary > span:last-child { transition: transform 180ms ease; }

/* One checkbox shape for choices and consent, with the whole label as its target. */
.registration :is(.reg-check,.vol-consent) input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; display: inline-block;
  border: 1px solid var(--rule-strong); border-radius: .25rem;
  background: var(--ink); background-position: center; background-size: .85rem; background-repeat: no-repeat;
  cursor: pointer; transition: background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease;
}
.registration :is(.reg-check,.vol-consent) input[type="checkbox"]:checked {
  border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 8 3.25 3.25L13 4.5' stroke='%2308090d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media(hover:hover) {
  .registration :is(.reg-check,.vol-consent):hover input[type="checkbox"] { border-color: var(--text-dim); }
}
@media(prefers-reduced-motion:reduce) {
  .registration :is(.reg-check,.vol-consent) input[type="checkbox"] { transition: none; }
}
@media(forced-colors:active) {
  .registration :is(.reg-check,.vol-consent) input[type="checkbox"] { appearance: auto; }
}

/* One control rhythm across both forms, including optional fields and date shells. */
.registration :is(.reg-fields,.vol-fields) { align-items: start; }
.registration :is(.reg-field,.vol-field,.vol-other-size) { align-content: start; min-inline-size: 0; }
.registration .vol-field-label { display: block; line-height: 1.4; }
.registration .vol-field-label > [aria-hidden="true"] { display: inline; }
.registration :is(.reg-field,.vol-field,.vol-other-size) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.registration :is(.reg-field,.vol-field) select:not([multiple]):not(.cf-select-native),
.registration .cf-select-trigger {
  box-sizing: border-box;
  block-size: var(--reg-control-height);
  min-block-size: var(--reg-control-height);
  line-height: 1.4;
  padding-block: .75rem;
}
.registration :is(.reg-field,.vol-field) input[type="date"] { display: block; text-align: start; }
.registration input[type="date"]::-webkit-date-and-time-value { text-align: start; }
.registration input[type="date"]::-webkit-datetime-edit { padding: 0; }

/* The next button pulses once when the step's required choice is made. */
.registration:has([name="route"]:checked) #next,
.registration:has([name="roles"]:checked) [data-next] { animation: reg-cta-ready .9s cubic-bezier(.22, 1, .36, 1) 1; }
@keyframes reg-cta-ready {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); transform: scale(1); }
  35% { transform: scale(1.04); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .registration [data-next], .registration #next { animation: none !important; } }

/* Polish pass: chips share one shape; yes/no choices look like the size chips; back reads inline. */
.reg-sizes span { border-radius: var(--r-md); transition: background-color .15s, border-color .15s, color .15s; }
.reg-sizes label:hover input:not(:checked) + span { border-color: var(--text-dim); }
.reg-inline { gap: var(--s1); }
.reg-inline label { position: relative; gap: var(--s1); padding-inline: var(--s3); min-block-size: var(--reg-control-height); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); transition: background-color .15s, border-color .15s, color .15s; }
.reg-inline label:hover:not(:has(input:checked)) { border-color: var(--text-dim); }
.reg-inline input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.reg-inline label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.reg-inline label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.reg-back { display: inline-flex; align-items: center; gap: var(--s1); }
.reg-back svg { display: inline-block; flex: none; }
/* Long names or emails without spaces wrap instead of being cut. */
.reg-review-top h3, .reg-review-route, .reg-summary-line span, .reg-summary-line small { overflow-wrap: anywhere; min-inline-size: 0; }
.reg-counter button[aria-disabled="true"] { opacity: .4; cursor: default; }