/* =====================================================================
   People Skills Development: registration form additions.

   Hand-written, like native-adapters.css, and loaded on the Register
   page after it. The demo's attendee row has a number, a name and a job
   title on one line; the Workshop Registration plugin adds an email and a
   phone to each row, which take the line under the name and job title.

   A  Attendee rows      the email and phone line, and the + under the last row
   B  Spacing            the form's fields set closer than the demo's
   C  Course             the one workshop the link names, not a choice
   D  I am attending too a box saying what ticking it does
   E  Course card        the choice of dates, seats left, an undated line
   ===================================================================== */


/* ---------------------------------------------------------------------
   A  Attendee rows
   --------------------------------------------------------------------- */
.rg-attendee > .rg-field-email { grid-column: 2; }

/* register.css stacks the row on phones and pins only the last field to
   the text column; with the email and phone last, every field needs pinning. */
@media (max-width: 560px) {
  .rg-attendee > .rg-field { grid-column: 2; }
}

/* register.js adds this after the list, so it always sits under the last
   attendee; it lines up with the rows' text column, past the numbers. */
.rg-add {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin: .25rem 0 0 3.25rem;
  padding: .4rem .9rem .4rem .45rem;
  border: 1.5px dashed #9fb2c3;
  border-radius: 999px;
  background: var(--c-white);
  font: 700 1rem/1 var(--f-display);
  color: var(--c-navy);
  cursor: pointer;
}
.rg-add-plus {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 1.3rem;
}
.rg-add:hover { border-color: var(--c-navy); background: var(--c-sky-soft); }
.rg-add:disabled { color: var(--c-muted); background: var(--c-paper); cursor: not-allowed; }
.rg-add:disabled .rg-add-plus { background: var(--c-muted); }


/* ---------------------------------------------------------------------
   B  Spacing
   register.css reserves a line under every field for its error message
   and leaves a wide gap between fields; here an error line takes room
   only once it holds a message, and the gaps are halved.
   --------------------------------------------------------------------- */
.rg-form .rg-group { margin-bottom: 1.25rem; }
.rg-form .rg-field { margin-bottom: .6rem; }
.rg-form .rg-legend { margin-bottom: .75rem; }
.rg-form .rg-row { column-gap: 1rem; }
.rg-form .rg-err:empty { min-height: 0; margin-top: 0; }
.rg-form .rg-attendee { padding-top: .6rem; }


/* ---------------------------------------------------------------------
   C  Course
   The demo's whole-card radio, kept as a card with nothing to pick.
   --------------------------------------------------------------------- */
.rg-option-fixed { cursor: default; }


/* ---------------------------------------------------------------------
   D  I am attending too
   A tinted box above the count, with a line under the label saying it
   puts the registrant on the list as attendee 1. Ticked, the box takes
   the cyan that marks attendee 1's number while it is the registrant.
   --------------------------------------------------------------------- */
.rg-check.rg-self-check {
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: 2px solid var(--c-navy);
  border-radius: 10px;
  background: var(--c-sky-soft);
}
.rg-self-check input { margin-top: .15rem; }
.rg-self-check:focus-within { box-shadow: 0 0 0 3px var(--c-sky); }
.rg-self-check:has(input:checked) { border-color: var(--c-cyan); }
.rg-check-text { display: grid; gap: .15rem; }
.rg-check-title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-navy-deep);
}
.rg-check-sub { font-size: .92rem; color: var(--c-muted); }


/* ---------------------------------------------------------------------
   E  Course card
   psd/registration-card builds the card from the course and the session
   the form shows. With more than one session open it links each one's
   dates, the one showing marked; a seat limit adds the seats left; a
   session kept from before days were data shows its date line instead
   of the day tiles.
   --------------------------------------------------------------------- */
.rg-sessions { margin: 1rem 0 0; }
.rg-sessions-label {
  margin: 0 0 .4rem;
  font: 700 .85rem/1.2 var(--f-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.rg-sessions ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.rg-sessions a {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: none;
}
.rg-sessions a[aria-current] { border-color: var(--stage); background: var(--stage); color: var(--c-white); }
.rg-seats-left { margin: -.75rem 0 1.25rem; font-weight: 600; color: var(--stage); }
.rg-when { margin: 1rem 0; font-weight: 600; color: var(--c-navy-deep); }