/* =====================================================================
   GENERATED FILE -- DO NOT EDIT.

   Built from _source/register.css by _dev/generate/theme-assets.mjs. Edit the
   snapshot (or re-sync it from the original) and regenerate; a hand edit
   here fails the gate at commit rather than surviving to contradict its
   source.

     node _dev/sync-static-source.mjs people-skills-development      pull the original in
     node _dev/generate/theme-assets.mjs people-skills-development   rebuild this file

   The file below is the static site's stylesheet verbatim, comments and
   undefined

   NOTHING WORDPRESS-SPECIFIC GOES IN THIS FILE. Adapter rules that map
   block markup onto these components live in native-adapters.css, which
   is hand-written and loads after this one. Keeping them apart is what
   lets this copy stay diffable against the original.
   ===================================================================== */

/* =====================================================================
   Register: course card and registration form
   Loaded after site.css, pathway.css and pages.css. Borrows the course
   index's step line, workshop meta and tag (pages.css F) so the course
   reads here as it does on Courses. The form fields follow Contact's
   (contact-pathway.css D) so the two forms on the site match.

   A  Columns        course card beside the form, card first when stacked
   B  Course card    date tiles, stub facts, outline, funding line
   C  Form           fields, the one-course option, seats and attendees
   D  Motion off
   ===================================================================== */


/* ---------------------------------------------------------------------
   A  Columns
   The card is the narrower track and sticks while the form scrolls.
   --------------------------------------------------------------------- */
.rg-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .rg-cols { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------
   B  Course card
   The leaders' teal (--stage, pages.css F) carries the rule, the step
   number and the date tiles, the one place the page spends a colour.
   --------------------------------------------------------------------- */
.rg-course {
  position: sticky;
  top: 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 4px solid var(--stage);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--c-paper);
}
@media (max-width: 900px) {
  .rg-course { position: static; }
}
.rg-course-name {
  margin: 0 0 .35rem;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-navy-deep);
}

/* Two tiles side by side: label, a large day numeral, then weekday and month */
.rg-days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}
.rg-day {
  display: grid;
  padding: .85rem 1rem 1rem;
  border-radius: 10px;
  background: var(--c-white);
  border: 1px solid color-mix(in srgb, var(--stage) 30%, white);
}
.rg-day-label {
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.rg-day-num {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 4rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--stage);
  font-variant-numeric: tabular-nums;
}
.rg-day-date { margin-top: .25rem; font-weight: 600; color: var(--c-navy-deep); }

/* Times, place and fee: term and value on one line each */
.rg-facts { margin: 0 0 1.5rem; }
.rg-fact {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--c-line);
}
.rg-fact:first-child { border-top: 1px solid var(--c-line); }
.rg-fact dt {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-navy-deep);
}
.rg-fact dd { margin: 0; }
/* An unfilled slot: visibly a stub, never mistaken for real detail */
.rg-stub { color: var(--c-muted); font-style: italic; }

.rg-outline > li { font-size: .98rem; }
.rg-funding {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: .95rem;
  color: var(--c-muted);
  text-wrap: pretty;
}
.rg-funding strong { color: var(--c-navy-deep); }


/* ---------------------------------------------------------------------
   C  Form
   --------------------------------------------------------------------- */
.rg-form-col .eyebrow { margin-bottom: 1.25rem; }
.rg-group {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.rg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
@media (max-width: 560px) { .rg-row { grid-template-columns: minmax(0, 1fr); } }
.rg-field { margin-bottom: 1.1rem; }
.rg-field-short { max-width: 20rem; }
.rg-label {
  display: block;
  margin-bottom: .35rem;
  padding: 0;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-navy-deep);
}
/* A group's legend sits a step above the field labels inside it */
.rg-legend {
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--c-line);
  font-size: 1.2rem;
}
.rg-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .65rem .85rem;
  background: var(--c-white);
  border: 1.5px solid #9fb2c3;
  border-radius: 8px;
  font: inherit;
  color: var(--c-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.rg-input { resize: vertical; min-height: 7rem; }
.rg-input:hover { border-color: var(--c-navy); }
.rg-input:focus { outline: none; border-color: var(--c-navy); box-shadow: 0 0 0 3px var(--c-sky); }
.rg-input[aria-invalid="true"] { border-color: #b3261e; }
.rg-err { display: block; min-height: 1.3em; margin-top: .25rem; font-size: .9rem; font-weight: 600; color: #b3261e; }
.rg-err:not(:empty)::before { content: '! '; }
.rg-hint { margin: .5rem 0 0; font-size: .92rem; color: var(--c-muted); }

/* The course option: a whole-card radio, checked by default */
.rg-option {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  min-height: 44px;
  padding: .9rem 1rem;
  border: 2px solid var(--c-navy);
  border-radius: 10px;
  background: var(--c-sky-soft);
  cursor: pointer;
}
.rg-option input { flex: none; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--c-navy); }
.rg-option:focus-within { box-shadow: 0 0 0 3px var(--c-sky); }
.rg-option-body { display: grid; gap: .1rem; }
.rg-option-name {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-navy-deep);
}
.rg-option-when { color: var(--c-muted); }

/* Checkbox rows: the whole line is the 44px target */
.rg-check {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  margin-bottom: .75rem;
  cursor: pointer;
}
.rg-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c-navy); }

/* Seat stepper. The − and + buttons exist only once register.js adds them. */
.rg-stepper { display: inline-flex; align-items: stretch; }
.rg-seats { width: 5.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.rg-stepper.is-live .rg-seats { border-radius: 0; border-inline-width: 0; -moz-appearance: textfield; }
.rg-stepper.is-live .rg-seats::-webkit-inner-spin-button,
.rg-stepper.is-live .rg-seats::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rg-step {
  width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1.5px solid #9fb2c3;
  background: var(--c-white);
  font: 700 1.4rem/1 var(--f-display);
  color: var(--c-navy);
  cursor: pointer;
}
.rg-step:first-child { border-radius: 8px 0 0 8px; }
.rg-step:last-child { border-radius: 0 8px 8px 0; }
.rg-step:hover { background: var(--c-sky-soft); border-color: var(--c-navy); }
.rg-step:focus-visible { outline: 3px solid var(--c-sky); outline-offset: 0; position: relative; }
.rg-step:disabled { color: #9fb2c3; background: var(--c-paper); cursor: not-allowed; }

/* One row per seat: number, name, job title */
.rg-attendees { margin: .25rem 0 0; padding: 0; list-style: none; }
.rg-attendee {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
  padding-top: .9rem;
  border-top: 1px solid var(--c-line);
}
.rg-attendee-no {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 1.85rem;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
  font: 700 1rem/1 var(--f-display);
  font-variant-numeric: tabular-nums;
}
.rg-attendee.is-self .rg-attendee-no { background: var(--c-cyan); color: var(--c-navy-ink); }
.rg-attendee.is-new { animation: rg-in .3s var(--ease); }
@keyframes rg-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 560px) {
  .rg-attendee { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .rg-attendee > .rg-field:last-child { grid-column: 2; }
}

.rg-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.rg-note { margin: 1.25rem 0 0; font-size: .95rem; color: var(--c-muted); text-wrap: pretty; }
.rg-note a { color: var(--c-navy); font-weight: 600; }
.rg-badge {
  display: inline-block;
  margin-right: .4rem;
  padding: .1rem .5rem;
  border: 1px dashed var(--c-muted);
  border-radius: 4px;
  font: 700 11px/1.6 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rg-ok {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-left: 4px solid var(--c-navy);
  background: var(--c-sky-soft);
  font-weight: 600;
  color: var(--c-navy-deep);
}
.rg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ---------------------------------------------------------------------
   D  Motion off
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rg-attendee.is-new { animation: none; }
}