/* Assistance request modal styles. Depends on .modal-backdrop/.modal/.modal-actions
 * from site-nav.css and the page-level --brand-primary / --text variables.
 *
 * The .expert-modal scope overrides any host-page `.modal p` / `.modal h3` rules
 * so the assistance dialog renders the same on the SPA and resource pages. */

.modal.expert-modal { position: relative; max-height: 88dvh; overflow: hidden; display: flex; flex-direction: column; }
.modal.expert-modal h3 { font-size: 1.125rem; font-weight: 600; color: var(--text); margin: 0; }
.modal.expert-modal p { font-size: 1rem; color: var(--text); line-height: 1.55; margin: 0; }
.modal.expert-modal p.expert-disclosure { font-size: 0.75rem; color: #666; line-height: 1.5; margin-top: 1rem; }
.modal.expert-modal a { color: var(--brand-primary); }
.modal.expert-modal a:hover { color: var(--brand-primary-hover); }

.expert-opt-in-title { margin: 0; padding-right: 2.25rem; }
.expert-pathway-label { display: inline-flex; align-items: center; gap: 0.6rem; width: fit-content; max-width: 100%; margin: 0.35rem 0 1rem; color: #583e09; font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }
.expert-pathway-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.125rem; height: 2.125rem; border: 1px solid rgba(154,112,32,0.14); border-radius: 8px; background: #f6efe0; color: #9a7020; }
.expert-pathway-icon svg { width: 1.0625rem; height: 1.0625rem; }
.expert-pathway-name { min-width: 0; overflow-wrap: anywhere; }
.expert-opt-in-pathway { margin-top: 1.15rem; margin-bottom: 1.4rem; color: #4c3507; font-size: 1.0625rem; }
.expert-opt-in-pathway .expert-pathway-icon { width: 2.25rem; height: 2.25rem; }
.expert-opt-in-pathway .expert-pathway-icon svg { width: 1.125rem; height: 1.125rem; }
.expert-form-pathway { margin-top: 0; margin-bottom: 0.85rem; font-size: 0.875rem; }
.modal.expert-modal p.expert-opt-in-copy { line-height: 1.55; }
.modal.expert-modal p.expert-opt-in-note { margin-top: 0.75rem; color: var(--text-muted, #56586a); font-size: 0.9375rem; line-height: 1.5; }
.expert-next-steps { display: grid; gap: 0.5rem; margin-top: 1rem; padding: 0.875rem; border: 1px solid rgba(74,124,89,0.16); border-radius: 8px; background: rgba(74,124,89,0.055); }
.expert-next-steps-title { margin-bottom: 0.15rem; color: var(--brand-primary); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.075em; line-height: 1.2; text-transform: uppercase; }
.expert-next-step { display: flex; align-items: center; gap: 0.625rem; color: var(--text, #1f2338); font-size: 0.875rem; line-height: 1.35; }
.expert-next-step-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #fff; border: 1px solid rgba(74,124,89,0.25); color: var(--brand-primary); font-size: 0.75rem; font-weight: 700; }
.expert-disclosure { margin-top: 1rem; font-size: 0.75rem; line-height: 1.5; color: #666; }
.modal.expert-modal label.expert-consent { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: start; column-gap: 0.65rem; margin: 0.875rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted, #56586a); cursor: pointer; }
.modal.expert-modal label.expert-consent input[type="checkbox"] { justify-self: start; align-self: start; width: 1rem; height: 1rem; margin: 0.15rem 0 0; }
.modal.expert-modal label.expert-consent span { display: block; min-width: 0; }
.expert-consent + .modal-actions { margin-top: 1.25rem; }
.expert-form-loading { min-height: 12rem; display: flex; align-items: center; justify-content: center; color: var(--text-subtle, #8686a0); }
.modal.expert-modal.expert-modal-morphing { overflow: hidden; will-change: width, height; }
.expert-request-form { display: flex; flex-direction: column; gap: 1rem; min-height: 0; flex: 1; }
.expert-request-header { position: relative; flex: 0 0 auto; padding-right: 2.25rem; }
.modal.expert-modal.expert-request-modal { max-width: 620px; width: calc(100% - 2rem); max-height: min(82vh, 720px); padding: 0; }
.expert-request-modal .expert-request-form { gap: 0; }
.expert-request-modal .expert-request-header { padding: 1.35rem 3.5rem 1rem 1.5rem; border-bottom: 1px solid var(--border, #d9d3c7); }
.modal.expert-modal .expert-request-header h3 { margin: 0 0 0.5rem; }
.modal.expert-modal .expert-submit-btn { min-width: 7rem; display: inline-grid; align-items: center; justify-content: center; }
.modal.expert-modal .expert-submit-btn .expert-submit-label,
.modal.expert-modal .expert-submit-btn .expert-submit-spinner { grid-area: 1 / 1; justify-self: center; align-self: center; }
.modal.expert-modal .expert-submit-btn .expert-submit-spinner { width: 16px; height: 16px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; visibility: hidden; }
.modal.expert-modal .expert-submit-btn.is-loading { opacity: 1; pointer-events: none; cursor: wait; }
.modal.expert-modal .expert-submit-btn.is-loading .expert-submit-label { visibility: hidden; }
.modal.expert-modal .expert-submit-btn.is-loading .expert-submit-spinner { visibility: visible; animation: expertSubmitSpin 0.7s linear infinite; }
.expert-request-close {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: -0.375rem;
  right: -0.375rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #56586a);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.expert-request-close svg { width: 1rem; height: 1rem; }
.expert-request-modal .expert-request-close { top: 0.875rem; right: 1rem; }
.expert-opt-in-close { top: 0.875rem; right: 1rem; }
.expert-request-close:hover,
.expert-request-close:focus-visible { background: rgba(31, 35, 56, 0.07); color: var(--text, #1f2338); outline: none; }
.expert-request-body { flex: 1 1 auto; overflow-y: auto; max-height: 62dvh; min-height: 0; padding-right: 1.125rem; padding-bottom: 1.5rem; margin-right: -1.125rem; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
.expert-request-modal .expert-request-body { padding: 1.25rem 1.5rem 1.5rem; margin-right: 0; border-bottom: 1px solid var(--border, #d9d3c7); }
.expert-request-modal .modal-actions { padding: 1rem 1.5rem 1.25rem; background: #fff; }
.expert-form-error { padding: 0.625rem 0.75rem; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 0.875rem; line-height: 1.4; }
.modal.expert-modal p.expert-form-intro { font-size: 0.9375rem; color: var(--text-muted, #56586a); margin: 0; }
.expert-contact-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
.expert-field { display: flex; flex-direction: column; min-width: 0; }
.expert-field-hidden { display: none !important; }
.expert-field label { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: var(--text, #1f2338); margin-bottom: 0.375rem; text-transform: none; letter-spacing: 0; }
.expert-field label span[aria-hidden="true"] { color: #c00; }
.expert-request-modal .stage-renderer-field { margin-bottom: 0; position: relative; padding-left: 1.25rem; }
.expert-request-modal .stage-renderer-field > label::before { content: ''; display: inline-block; width: 0.4375rem; height: 0.4375rem; background: #4a7c59; opacity: 0.75; vertical-align: 0.1em; margin-right: 0.5rem; margin-left: -1.25rem; }
.expert-request-modal .stage-renderer-field label .req { color: #c00; }
.expert-request-modal .field-desc { font-size: 0.875rem; line-height: 1.5; color: #666; margin-bottom: 0.875rem; }
.expert-request-modal .sr-field-body { min-width: 0; }
.expert-field input[type="text"],
.expert-field input[type="email"],
.expert-field input[type="number"],
.expert-field input[type="date"],
.expert-field textarea,
.expert-field select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  background: #fff;
  color: var(--text, #1f2338);
  box-sizing: border-box;
  margin: 0;
}
.expert-field input:focus,
.expert-field select:focus,
.expert-field textarea:focus { outline: none; border-color: #111; }
.expert-field .custom-select { display: block; width: 100%; --cs-border: #d1d5db; --cs-border-active: #111; --cs-bg: #fff; --cs-text: var(--text, #1f2338); --cs-arrow: var(--text-muted, #56586a); --cs-min-width: 100%; --cs-options-max-width: 100%; --cs-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.expert-field .custom-select-display { width: 100%; min-height: 2.375rem; border-radius: 6px; box-sizing: border-box; }
.expert-field .custom-select.open .custom-select-display { border-radius: 6px 6px 0 0; }
.expert-field .custom-select-options { border-radius: 0 0 6px 6px; z-index: 60; }
.expert-field .custom-select-option.selected::before { content: '✓ '; font-weight: 600; color: #111; margin-right: 0.25rem; }
.expert-intake-questions .expert-field.custom-select-field-active { position: relative; z-index: 60; }
.expert-intake-questions .expert-field:has(.custom-select.open) { position: relative; z-index: 60; }
.expert-field .sr-filter-wrap { position: relative; }
.expert-field .sr-filter-wrap.open { z-index: 60; }
.expert-field .sr-filter-wrap input.sr-filter-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  background: #fff;
  color: var(--text, #1f2338);
  box-sizing: border-box;
  margin: 0;
}
.expert-field .sr-filter-wrap::after { content: ''; position: absolute; right: 0.75rem; top: 50%; border: 4px solid transparent; border-top: 5px solid var(--text-muted, #56586a); pointer-events: none; transition: transform 0.2s ease; transform: translateY(-25%); }
.expert-field .sr-filter-wrap.open::after { transform: translateY(-75%) rotate(180deg); }
.expert-field .sr-filter-wrap input.sr-filter-input:focus { outline: none; border-color: #111; }
.expert-field .sr-filter-wrap.open input.sr-filter-input { border-radius: 6px 6px 0 0; }
.expert-field .sr-filter-wrap.open.open-up input.sr-filter-input { border-radius: 0 0 6px 6px; }
.expert-field .sr-filter-wrap .sr-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 60;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}
.expert-field .sr-filter-wrap.open .sr-dropdown { max-height: min(320px, 50vh); overflow-y: auto; opacity: 1; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.expert-field .sr-filter-wrap.open.open-up .sr-dropdown { top: auto; bottom: 100%; border-top: 1px solid #d1d5db; border-bottom: none; border-radius: 6px 6px 0 0; box-shadow: 0 -6px 16px rgba(0,0,0,0.08); }
.sr-dropdown.expert-filter-select-portal {
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 1;
  background: #fff;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 1200;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  box-sizing: border-box;
}
.sr-dropdown.expert-filter-select-portal.open-up {
  border-top: 1px solid #d1d5db;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -10px 24px rgba(0,0,0,0.12);
}
.expert-field .sr-dropdown .sr-option,
.sr-dropdown.expert-filter-select-portal .sr-option { padding: 0.5rem 1.75rem 0.5rem 0.75rem; font-size: 0.875rem; cursor: pointer; position: relative; }
.expert-field .sr-dropdown .sr-option:hover,
.expert-field .sr-dropdown .sr-option.highlighted,
.sr-dropdown.expert-filter-select-portal .sr-option:hover,
.sr-dropdown.expert-filter-select-portal .sr-option.highlighted { background: #f3f4f6; }
.expert-field .sr-dropdown .sr-option.selected,
.sr-dropdown.expert-filter-select-portal .sr-option.selected { font-weight: 600; }
.expert-field .sr-dropdown .sr-option.selected::before,
.sr-dropdown.expert-filter-select-portal .sr-option.selected::before { content: '✓ '; font-weight: 600; color: #111; margin-right: 0.25rem; }
.expert-field .sr-dropdown .sr-no-match,
.sr-dropdown.expert-filter-select-portal .sr-no-match { padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: #999; font-style: italic; }
.expert-field .sr-dropdown .sr-option-separator,
.sr-dropdown.expert-filter-select-portal .sr-option-separator { height: 1px; background: #e5e7eb; margin: 0.25rem 0; pointer-events: none; }
.expert-intake-questions .expert-field:has(.sr-filter-wrap.open) { position: relative; z-index: 60; }
.expert-field.sr-error > input,
.expert-field.sr-error > select,
.expert-field.sr-error > textarea,
.expert-field.sr-error .custom-select-display,
.expert-field.sr-error .sr-filter-input,
.expert-field.sr-error .radio-group,
.expert-field.sr-error .checkbox-group { border-color: #c00 !important; box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.1); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.expert-field .sr-error-msg { font-size: 0.8125rem; color: #c00; margin-top: 0.25rem; animation: sr-error-in 0.3s ease; }
.expert-intake-questions { display: flex; flex-direction: column; gap: 2.3rem; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--border, #d9d3c7); }
.expert-request-modal .radio-group,
.expert-request-modal .checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid transparent; border-radius: 6px; padding: 0.125rem 0; }
.expert-request-modal .radio-group label,
.expert-request-modal .checkbox-group label { font-weight: 400; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; -webkit-user-select: none; user-select: none; margin: 0; }
.expert-request-modal .radio-group input,
.expert-request-modal .checkbox-group input { margin: 0; }

/* Post-submit success view: animated check-draw on a popping green disc, with
 * a soft halo that scales out behind it. ~700ms total, prefers-reduced-motion
 * collapses to a static icon. */
.expert-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0 1.5rem; }
.expert-success-disc { position: relative; width: 64px; height: 64px; margin-bottom: 1.75rem; }
.expert-success-halo { position: absolute; inset: 0; border-radius: 50%; background: var(--brand-primary); opacity: 0.35; animation: expertSuccessHalo 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.expert-success-icon { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; animation: expertSuccessPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.expert-success-icon svg { width: 36px; height: 36px; }
.expert-success-icon polyline { stroke-dasharray: 30; stroke-dashoffset: 30; animation: expertSuccessDraw 0.4s 0.3s ease-out both; }
.expert-success h3 { margin: 0 0 0.875rem; }
.expert-success p { margin: 0; max-width: 32ch; }

@keyframes expertSuccessPop { 0% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes expertSuccessDraw { to { stroke-dashoffset: 0; } }
@keyframes expertSuccessHalo { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes expertSubmitSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .expert-success-halo { display: none; }
  .expert-success-icon, .expert-success-icon polyline { animation: none; }
  .expert-success-icon polyline { stroke-dashoffset: 0; }
  .modal.expert-modal .expert-submit-btn.is-loading .expert-submit-spinner { animation: none; }
}

@media (max-width: 600px) {
  .modal.expert-modal { max-height: calc(100dvh - 2rem); }
  .modal-backdrop:has(.expert-opt-in-title) .modal.expert-modal {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  .modal-backdrop:has(.expert-request-modal) .modal { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .expert-request-body { max-height: 68dvh; padding-right: 0.875rem; margin-right: -0.875rem; }
}