/* Service choices and their role reveals are separate native controls. */
#discoveryOptions { align-items: start; }
#discoveryOptions .vg-discovery-card {
  min-width: 0;
  background: #faf9f6;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  overflow: clip;
  transition: border-color 160ms ease, background-color 160ms ease;
}
#discoveryOptions .vg-discovery-card:has(> .discovery-btn.active) {
  border-color: #18181b;
  outline: 1px solid #18181b;
  outline-offset: -2px;
  background: rgba(245, 244, 240, 0.8);
}
#discoveryOptions .vg-discovery-card > .discovery-btn {
  width: 100%;
  min-height: 96px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#discoveryOptions .vg-discovery-card > .discovery-btn:hover { background: #f0efeb; }
#discoveryOptions .vg-role-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-top: 1px solid #e4e4e7;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
#discoveryOptions .vg-role-trigger::-webkit-details-marker { display: none; }
#discoveryOptions .vg-role-trigger:hover { background: #eaf0fa; }
#discoveryOptions .vg-role-trigger > svg { width: 18px; height: 18px; flex: 0 0 18px; }
#discoveryOptions .vg-role-trigger .vg-role-chevron {
  margin-left: auto;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
#discoveryOptions .vg-role-hide { display: none; }
#discoveryOptions details[open] .vg-role-show { display: none; }
#discoveryOptions details[open] .vg-role-hide { display: inline; }
#discoveryOptions details[open] .vg-role-chevron { transform: rotate(180deg); }
#discoveryOptions .vg-role-panel {
  position: relative;
  isolation: isolate;
  padding: 4px 16px 18px;
  color: #18181b;
  background: #f4f6fb;
  overflow: clip;
}
#discoveryOptions .vg-role-heading {
  margin: 8px 0 12px;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
#discoveryOptions .vg-role-list { margin: 0; padding: 0; list-style: none; }
#discoveryOptions .vg-role-list li { padding: 10px 0; border-top: 1px solid #d9e0ee; }
#discoveryOptions .vg-role-list li:last-child { padding-bottom: 0; }
#discoveryOptions .vg-role-title { display: block; font-size: 13px; line-height: 1.5; font-weight: 600; }
#discoveryOptions .vg-role-task { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: #52525b; }
#discoveryOptions details[open] .vg-role-panel {
  animation: vg-role-uncover 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#discoveryOptions details[open] .vg-role-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(30, 58, 138, 0.1) 50%, transparent 75%);
  animation: vg-role-light 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#discoveryOptions details[open] .vg-role-list li {
  animation: vg-role-arrive 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#discoveryOptions details[open] .vg-role-list li:nth-child(2) { animation-delay: 40ms; }
#discoveryOptions details[open] .vg-role-list li:nth-child(3) { animation-delay: 80ms; }
#discoveryOptions .discovery-btn:focus-visible,
#discoveryOptions .vg-role-trigger:focus-visible { outline: 2px solid #1e3a8a; outline-offset: -4px; }
@keyframes vg-role-uncover {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}
@keyframes vg-role-light {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes vg-role-arrive {
  from { opacity: 0; filter: blur(2px); transform: translateY(5px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@media (min-width: 640px) {
  #discoveryOptions .vg-discovery-card--unknown,
  #discoveryOptions .vg-discovery-card--capacity,
  #discoveryOptions .vg-discovery-card--followup { grid-column: 1 / -1; }
  #discoveryOptions .vg-discovery-card--unknown .vg-role-list,
  #discoveryOptions .vg-discovery-card--capacity .vg-role-list,
  #discoveryOptions .vg-discovery-card--followup .vg-role-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #discoveryOptions details[open] .vg-role-panel,
  #discoveryOptions details[open] .vg-role-list li { animation: vg-role-reduced 120ms ease-out both; }
  #discoveryOptions details[open] .vg-role-panel::before { animation: none; background: none; }
  #discoveryOptions .vg-role-trigger .vg-role-chevron { transition: none; }
}
@keyframes vg-role-reduced { from { opacity: 0.8; } to { opacity: 1; } }

#discoveryOptions .vg-capacity-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#discoveryOptions .vg-capacity-target { padding: 2px 6px; border: 1px solid #ccd4e5; border-radius: 4px; background: #eef2fa; color: #1e3a8a; font-size: 10px; font-weight: 600; line-height: 1.5; white-space: nowrap; }