/* ===== Join the Directory (join.html) =====
   Adapted from the reviewed "Join the Directory" package. Every rule is scoped to .directory-join
   (the <main> of join.html), so no other page can change. Colours, radii, shadows and fonts come
   from the site's design variables in style.css, so light and dark mode both work.
   Already provided by style.css and therefore not repeated here: box-sizing, the page background
   and font, link colours, the keyboard focus outline, reduced motion, and the theme-aware input base. */

.directory-join {
  display: block;
  line-height: 1.5;
}

/* ----- Hero ----- */
.directory-join .hero {
  padding: 56px 5vw 34px;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--color-card), var(--color-background));
}

.directory-join .hero-inner {
  width: min(880px, 100%);
  margin: 0 auto;
  text-align: center;
}

.directory-join .eyebrow {
  color: var(--color-brand-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.directory-join .hero h1 {
  margin: 12px 0 18px;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.directory-join .hero-lead {
  max-width: 730px;
  margin: 0 auto;
  color: var(--color-muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.directory-join .trust-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 650px;
  margin: 30px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-card) 85%, transparent);
  text-align: left;
}

.directory-join .trust-strip strong,
.directory-join .trust-strip span {
  display: block;
}

.directory-join .trust-strip span {
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 0.92rem;
}

/* ----- Form shell, progress ----- */
.directory-join .form-shell {
  width: min(900px, 92%);
  margin: 0 auto 64px;
}

.directory-join .progress-card,
.directory-join .form-step,
.directory-join .success-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-md);
}

.directory-join .progress-card {
  margin-bottom: 18px;
  padding: 18px 22px;
}

.directory-join .progress-meta {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.directory-join .progress-track {
  height: 8px;
  margin: 10px 0 14px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-divider);
}

.directory-join .progress-fill {
  width: 33.333%;
  height: 100%;
  background: var(--color-primary);
  transition: width 0.25s ease;
}

.directory-join .step-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.directory-join .step-labels li {
  text-align: center;
}

/* The current step: colour plus bold weight (never colour alone) */
.directory-join .step-labels li.is-active {
  color: var(--color-primary);
  font-weight: 800;
}

/* ----- Steps and fields ----- */
.directory-join .form-step {
  padding: clamp(22px, 5vw, 42px);
}

.directory-join .step-heading {
  margin-bottom: 30px;
}

.directory-join .step-kicker {
  color: var(--color-brand-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.directory-join .step-heading h2 {
  margin: 5px 0 7px;
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 4vw, 2.1rem);
}

.directory-join .step-heading p {
  margin: 0;
  color: var(--color-muted);
}

.directory-join .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.directory-join .field-wide {
  grid-column: 1 / -1;
}

.directory-join .field label,
.directory-join .field-label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}

.directory-join .required {
  color: var(--color-danger-text);
}

.directory-join input,
.directory-join select,
.directory-join textarea {
  width: 100%;
  padding: 12px 13px;
  border-radius: var(--radius-md);
  font: inherit;
}

.directory-join textarea {
  resize: vertical;
}

.directory-join input:focus,
.directory-join select:focus,
.directory-join textarea:focus {
  border-color: var(--color-primary);
}

.directory-join [aria-invalid="true"] {
  border-color: var(--color-danger-text) !important;
}

.directory-join .field-help {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: 0.84rem;
}

.directory-join .field-error {
  margin: 5px 0 0;
  color: var(--color-danger-text);
  font-size: 0.84rem;
}

.directory-join .counter-row {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 0.8rem;
}

/* ----- Buttons ----- */
.directory-join .step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}

.directory-join .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.directory-join .btn-primary {
  background: var(--action-navy);
  color: var(--white);
}

.directory-join .btn-primary:hover {
  background: var(--action-navy-hover);
}

.directory-join #submitButton {
  background: var(--color-brand-action);
}

.directory-join #submitButton:hover {
  background: var(--color-brand-hover);
}

.directory-join .btn-secondary {
  border: 1px solid var(--color-input-border);
  background: var(--color-card);
  color: var(--color-navy);
}

.directory-join .btn-secondary:hover {
  background: var(--color-surface-alt);
}

.directory-join .btn-ghost {
  background: transparent;
  color: var(--color-danger-text);
}

.directory-join .btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ----- Photo ----- */
.directory-join .photo-uploader {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 22px;
  margin-bottom: 26px;
  padding: 20px;
  border: 1px dashed var(--color-input-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.directory-join .photo-preview {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-divider);
  font-size: 2.8rem;
}

.directory-join .photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.directory-join .inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ----- Privacy step ----- */
.directory-join .privacy-fieldset,
.directory-join .consent-card {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.directory-join .privacy-fieldset > legend,
.directory-join .consent-card > legend {
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 800;
}

.directory-join .privacy-card {
  position: relative;
  display: grid;
  grid-template-columns: 24px 40px 1fr;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 17px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  cursor: pointer;
}

/* Chosen card: the radio button itself plus a thicker coloured border */
.directory-join .privacy-card:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-border);
  background: var(--color-primary-light);
}

.directory-join .privacy-card input {
  width: auto;
  margin-top: 5px;
}

.directory-join .privacy-icon,
.directory-join .role-icon,
.directory-join .trust-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-link);
}

.directory-join .privacy-icon .icon,
.directory-join .role-icon .icon,
.directory-join .trust-icon .icon {
  width: 20px;
  height: 20px;
}

.directory-join .privacy-copy strong,
.directory-join .privacy-copy small {
  display: block;
}

.directory-join .privacy-copy small {
  margin-top: 3px;
  color: var(--color-muted);
  line-height: 1.45;
}

/* Badges on the privacy cards (text, not only colour, says what they mean) */
.directory-join .privacy-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
}

.directory-join .badge-network {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.directory-join .badge-private {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.directory-join .privacy-copy .coming-soon-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
  font-style: italic;
}

.directory-join .advanced-privacy {
  margin-bottom: 24px;
  padding: 0 17px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.directory-join .advanced-privacy summary {
  padding: 16px 0;
  font-weight: 800;
  cursor: pointer;
}

.directory-join .privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 0 18px;
}

.directory-join .consent-card {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.directory-join .consent-card p {
  margin-top: 0;
  color: var(--color-muted);
}

.directory-join .radio-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.directory-join .radio-inline label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.directory-join .radio-inline input,
.directory-join .consent-check input {
  width: auto;
}

.directory-join .consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
}

.directory-join .consent-check input {
  margin-top: 4px;
}

.directory-join .summary-card {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 11px 11px 0;
  background: var(--color-primary-light);
  color: var(--color-text);
}

.directory-join .form-message {
  min-height: 24px;
  margin-top: 16px;
  color: var(--color-danger-text);
  font-weight: 650;
}

/* ----- Success ----- */
.directory-join .success-card {
  padding: 42px;
  text-align: center;
}

.directory-join .success-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: 1.8rem;
  font-weight: 900;
}

.directory-join .success-card h2 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 1.9rem;
}

.directory-join .success-card p {
  max-width: 580px;
  margin-right: auto;
  margin-left: auto;
  color: var(--color-muted);
}

.directory-join .success-card .btn {
  margin-top: 12px;
}

.directory-join .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--color-on-primary) 35%, transparent);
  border-top-color: var(--color-on-primary);
  border-radius: 50%;
  animation: directory-join-spin 0.7s linear infinite;
}

@keyframes directory-join-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ----- Helpers used by join.html ----- */
.directory-join .honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.directory-join .is-hidden {
  display: none !important;
}

.directory-join .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Onboarding v2: who you are, courses, feature chips ----- */

/* Fields hidden by role or condition must stay hidden even where a rule sets display */
.directory-join [hidden] {
  display: none !important;
}

.directory-join .role-fieldset,
.directory-join .feature-fieldset,
.directory-join .check-fieldset {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.directory-join .role-fieldset > legend,
.directory-join .feature-fieldset > legend {
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 800;
}

.directory-join .role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.directory-join .role-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: flex-start;
  min-height: 100%;
  padding: 16px 16px 16px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

/* The radio sits on the card so the whole card is one keyboard-reachable choice */
.directory-join .role-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.directory-join .role-card:hover {
  border-color: var(--color-primary-border);
}

.directory-join .role-card:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-border);
  background: var(--color-primary-light);
}

.directory-join .role-card:has(input:checked) .role-copy strong::after {
  content: " ✓";
  color: var(--color-primary);
}

.directory-join .role-card:has(input:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}



.directory-join .role-copy strong,
.directory-join .role-copy small {
  display: block;
}

.directory-join .role-copy small {
  margin-top: 3px;
  color: var(--color-muted);
  line-height: 1.45;
}

.directory-join .visit-note {
  margin: 0 0 20px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.directory-join .check-fieldset > legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.directory-join .check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin-bottom: 12px;
}

.directory-join .check-list label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}

.directory-join .check-list input {
  width: auto;
  margin-top: 4px;
}

.directory-join .feature-fieldset {
  margin-top: 26px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.directory-join .feature-fieldset > p {
  margin: 0 0 12px;
  color: var(--color-muted);
}

.directory-join .optional-tag {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted);
}

.directory-join .feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.directory-join .feature-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.directory-join .feature-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.directory-join .feature-chip:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.directory-join .feature-chip:has(input:checked)::before {
  content: "✓ ";
  white-space: pre;
}

.directory-join .feature-chip:has(input:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.directory-join .feature-count {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
}

.directory-join .note-card {
  display: block;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 11px 11px 0;
  background: var(--color-primary-light);
}

.directory-join .note-card strong,
.directory-join .note-card span {
  display: block;
}

.directory-join .note-card span {
  margin-top: 4px;
}

/* ----- Phones ----- */
@media (max-width: 700px) {
  .directory-join .hero {
    padding: 40px 20px 28px;
  }

  .directory-join .form-shell {
    width: min(94%, 900px);
  }

  .directory-join .form-step {
    padding: 24px 18px;
  }

  .directory-join .field-grid,
  .directory-join .privacy-grid {
    grid-template-columns: 1fr;
  }

  .directory-join .field-wide {
    grid-column: auto;
  }

  .directory-join .photo-uploader {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .directory-join .photo-preview {
    margin: 0 auto;
  }

  .directory-join .inline-actions {
    justify-content: center;
  }

  .directory-join .step-actions {
    align-items: stretch;
  }

  .directory-join .step-actions .btn {
    flex: 1;
  }

  .directory-join .privacy-card {
    grid-template-columns: 22px 34px 1fr;
    padding: 14px;
  }

  .directory-join .role-grid,
  .directory-join .check-list {
    grid-template-columns: 1fr;
  }

  /* Smaller chips so several fit on a line (still at least 40px tall for fingers) */
  .directory-join .feature-chips {
    gap: 6px;
  }

  .directory-join .feature-chip {
    min-height: 40px;
    padding: 6px 11px;
    font-size: 0.82rem;
  }

  .directory-join .feature-fieldset {
    padding: 14px;
  }
}

@media (max-width: 430px) {
  .directory-join .step-labels {
    font-size: 0.72rem;
  }

  .directory-join .step-actions {
    flex-direction: column-reverse;
  }

  .directory-join .step-actions > span {
    display: none;
  }
}

/* ----- v3: optional mobility experience ----- */
.directory-join .mobility-fieldset {
  margin: 26px 0 0;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.directory-join .mobility-fieldset > legend {
  font-size: 1.05rem;
  font-weight: 800;
}

.directory-join .sub-fieldset {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--color-divider);
}

.directory-join .sub-fieldset > legend {
  padding: 0;
  font-weight: 700;
}

.directory-join .radio-stack {
  display: grid;
  gap: 6px;
  margin: 10px 0 4px;
}

.directory-join .radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  cursor: pointer;
}

.directory-join .radio-row input {
  width: auto;
  margin-top: 4px;
  accent-color: var(--color-primary);
}

.directory-join .radio-row small {
  display: block;
  color: var(--color-muted);
}

.directory-join .radio-row:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.directory-join .link-button {
  min-height: 36px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

.directory-join .share-field {
  margin-top: 8px;
}

.directory-join .summary-list {
  margin: 10px 0 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}

.directory-join .summary-list span {
  font-weight: 600;
}

@media (max-width: 640px) {
  .directory-join .mobility-fieldset {
    padding: 14px;
  }
}

/* The lock icon in the trust note is a span too: keep it a centred circle */
.directory-join .trust-strip .trust-icon {
  display: grid;
  margin-top: 0;
  color: var(--color-link);
}

/* Outline icons instead of emoji: the photo placeholder and the "check your email" icon */
.directory-join #photoPlaceholder .icon {
  width: 34px;
  height: 34px;
  color: var(--color-muted);
}

.directory-join .success-icon .icon {
  width: 28px;
  height: 28px;
}

/* Shown while registration is switched off (directory-config.js has no endpoint) */
.join-closed-notice {
  margin: 0 0 var(--space-4);
  padding: 12px 16px;
  border: 1px solid var(--warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--color-text);
}