/*
 * Specialist Snapshot capsule control system
 *
 * Loaded after the responsive shell so real actions and choice controls share
 * one visual and motion language without reshaping structural button surfaces
 * such as result cards, profile accordions, or the full-width refinement tier.
 */

:root {
  --control-height:44px;
  --control-radius:999px;
  --control-gap:8px;
  --control-pad-inline:16px;
  --control-selected:var(--color-action);
  --control-selected-strong:var(--color-action-strong);
  --control-selected-soft:var(--color-action-soft);
  --control-selected-text:var(--on-accent);
  --control-border:var(--color-border);
  --control-surface:var(--color-surface);
  --control-shadow:0 5px 14px rgb(11 107 79 / 6%);
  --control-shadow-hover:0 8px 18px rgb(11 107 79 / 11%);
  --control-motion-fast:110ms;
  --control-motion-standard:170ms;
  --control-motion-spring:cubic-bezier(.2,.9,.25,1.2);
}

:root[data-theme="dark"],
:root.theme-dark {
  --control-shadow:0 5px 14px rgb(0 0 0 / 18%);
  --control-shadow-hover:0 8px 20px rgb(0 0 0 / 28%);
}

/* Shared motion for actual controls; structural button surfaces opt out below. */
:is(
  .btn-primary,
  .rating-form .save,
  .contribution-guide-action,
  .btn-small,
  .application-review-actions button,
  .dialog-actions button,
  .result-load-more button,
  .profile-report-button,
  .multi-popover-head button,
  .role-button,
  .account-menu-section button,
  .segment-group > button,
  .pill-group > .pill,
  .profile-back-button,
  .search-clear,
  .loc-clear,
  .auth-forgot
) {
  transition:
    transform var(--control-motion-fast) var(--motion-ease),
    border-color var(--control-motion-standard) var(--motion-ease),
    background-color var(--control-motion-standard) var(--motion-ease),
    color var(--control-motion-standard) var(--motion-ease),
    box-shadow var(--control-motion-standard) var(--motion-ease),
    opacity var(--control-motion-fast) ease-out;
}

@media (hover:hover) {
  :is(
    .btn-primary,
    .rating-form .save,
    .contribution-guide-action,
    .btn-small,
    .application-review-actions button,
    .dialog-actions button,
    .result-load-more button,
    .profile-report-button,
    .multi-popover-head button,
    .role-button,
    .segment-group > button,
    .pill-group > .pill
  ):hover:not(:disabled) {
    transform:translateY(-1px);
  }
}

:is(
  .btn-primary,
  .rating-form .save,
  .contribution-guide-action,
  .btn-small,
  .application-review-actions button,
  .dialog-actions button,
  .result-load-more button,
  .profile-report-button,
  .multi-popover-head button,
  .role-button,
  .segment-group > button,
  .pill-group > .pill,
  .profile-back-button,
  .search-clear,
  .loc-clear,
  .auth-forgot
):active:not(:disabled) {
  transform:translateY(1px) scale(.97);
  transition-duration:70ms;
}

@media (hover:hover) {
  html[data-layout-mode] body[data-view="explore"] .advanced-filters .segment-group > button:hover:not(:disabled) {
    transform:translateY(-1px);
  }
}

html[data-layout-mode] body[data-view="explore"] .advanced-filters .segment-group > button:active:not(:disabled) {
  transform:translateY(1px) scale(.97);
}

/* Filled primary actions. */
:is(.btn-primary,.rating-form .save,.contribution-guide-action) {
  min-height:var(--control-height);
  padding-inline:calc(var(--control-pad-inline) + 2px);
  border:1px solid var(--control-selected);
  border-radius:var(--control-radius);
  background:var(--control-selected);
  color:var(--control-selected-text);
  box-shadow:var(--control-shadow);
  font-weight:650;
}

:is(.btn-primary,.rating-form .save,.contribution-guide-action):hover:not(:disabled) {
  border-color:var(--control-selected-strong);
  background:var(--control-selected-strong);
  color:var(--control-selected-text);
  box-shadow:var(--control-shadow-hover);
}

:is(.btn-primary,.rating-form .save,.contribution-guide-action):disabled {
  border-color:var(--color-border-subtle);
  background:var(--color-border-subtle);
  color:var(--color-text-subtle);
  box-shadow:none;
}

/* Secondary and compact actions use the same capsule perimeter. */
:is(
  .btn-small,
  .application-review-actions button,
  .dialog-actions button,
  .result-load-more button,
  .profile-report-button
) {
  min-height:var(--control-height);
  padding-inline:var(--control-pad-inline);
  border:1px solid var(--control-border);
  border-radius:var(--control-radius);
  background:var(--control-surface);
  color:var(--color-text-subtle);
  box-shadow:none;
  font-weight:600;
}

:is(
  .btn-small,
  .application-review-actions button,
  .dialog-actions button,
  .result-load-more button,
  .profile-report-button
):hover:not(:disabled) {
  border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  background:var(--control-selected-soft);
  color:var(--control-selected-strong);
  box-shadow:var(--control-shadow);
}

.application-review-actions button[data-application-review="approve"] {
  border-color:var(--control-selected);
  background:var(--control-selected);
  color:var(--control-selected-text);
}

.application-review-actions button[data-application-review="reject"] {
  border-color:color-mix(in srgb,var(--color-critical) 52%,var(--control-border));
  color:var(--color-critical);
}

.application-review-actions button[data-application-review="reject"]:hover:not(:disabled) {
  border-color:var(--color-critical);
  background:var(--long-bg);
  color:var(--color-critical);
}

/* Quiet utility actions stay light but inherit the same press response. */
:is(.multi-popover-head button,.auth-forgot) {
  border-radius:var(--control-radius);
}

/* Independent capsules replace joined segmented rectangles everywhere. */
.segment-group,
.pill-group {
  gap:var(--control-gap);
}

.segment-group > button,
.segment-group > button:first-child,
.segment-group > button:last-child,
.sort-segments > button,
.sort-segments > button:first-child,
.sort-segments > button:last-child,
.referral-segments > button,
.referral-segments > button:first-child,
.referral-segments > button:last-child,
.wait-segments > button,
.wait-segments > button:first-child,
.wait-segments > button:last-child,
.sort-strategy-segments > button,
.pill-group > .pill,
.snapshot-experience .pill,
.snapshot-experience .pill:first-child,
.snapshot-experience .pill:last-child {
  position:relative;
  min-height:var(--control-height);
  margin:0;
  border:1px solid var(--control-border);
  border-radius:var(--control-radius);
  background:var(--control-surface);
  color:var(--color-text-subtle);
  box-shadow:none;
  font-weight:500;
  isolation:isolate;
}

.segment-group > button::after,
.pill-group > .pill::after,
.role-button::after {
  position:absolute;
  top:50%;
  right:13px;
  width:6px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  content:"";
  opacity:0;
  pointer-events:none;
  transform:translateY(-62%) rotate(45deg) scale(.35);
  transform-origin:center;
  transition:
    opacity 90ms ease-out,
    transform var(--control-motion-standard) var(--control-motion-spring);
}

.segment-group > button[aria-checked="true"],
.segment-group > button[aria-pressed="true"],
.pill-group > .pill.on,
.role-button[aria-checked="true"] {
  z-index:2;
  padding-right:28px;
  border-color:var(--control-selected);
  background:var(--control-selected);
  color:var(--control-selected-text);
  box-shadow:var(--control-shadow);
  font-weight:650;
}

.segment-group > button,
.pill-group > .pill {
  white-space:nowrap;
}

html[data-layout-mode] .advanced-filter-columns .segment-group,
html[data-layout-mode] .referral-preferences-section .referral-segments {
  gap:var(--control-gap);
}

html[data-layout-mode] .advanced-filter-columns .segment-group > button,
html[data-layout-mode] .advanced-filter-columns .segment-group > button:first-child,
html[data-layout-mode] .advanced-filter-columns .segment-group > button:last-child,
html[data-layout-mode] .referral-preferences-section .referral-segments > button,
html[data-layout-mode] .referral-preferences-section .referral-segments > button:first-child,
html[data-layout-mode] .referral-preferences-section .referral-segments > button:last-child {
  margin:0;
  border-radius:var(--control-radius);
}

.segment-group > button[aria-checked="true"]::after,
.segment-group > button[aria-pressed="true"]::after,
.pill-group > .pill.on::after,
.role-button[aria-checked="true"]::after {
  opacity:1;
  transform:translateY(-62%) rotate(45deg) scale(1);
}

@media (hover:hover) {
  .segment-group > button:hover:not(:disabled):not([aria-checked="true"]):not([aria-pressed="true"]),
  .pill-group > .pill:hover:not(:disabled):not(.on) {
    border-color:color-mix(in srgb,var(--control-selected) 48%,var(--control-border));
    background:color-mix(in srgb,var(--control-selected-soft) 52%,var(--control-surface));
    color:var(--control-selected-strong);
    box-shadow:var(--control-shadow);
  }
}

.wait-segments > button.is-within-range:not([aria-checked="true"]) {
  border-color:color-mix(in srgb,var(--control-selected) 42%,var(--control-border));
  background:var(--control-selected-soft);
  color:var(--control-selected-strong);
  box-shadow:none;
}

/* The active Custom capsule and its popover form one continuous action surface. */
.sort-strategy-segments > button {
  min-width:88px;
  padding-inline:18px;
}

.sort-strategy-segments > button[aria-pressed="true"] {
  padding-right:30px;
}

.sort-strategy-segments > button[data-sort-strategy="custom"][aria-expanded="true"][data-popover-placement="below"] {
  border-radius:22px 22px 0 0;
}

.sort-strategy-segments > button[data-sort-strategy="custom"][aria-expanded="true"][data-popover-placement="above"] {
  border-radius:0 0 22px 22px;
}

.custom-sort-panel {
  border-color:var(--control-selected);
  border-radius:22px 0 22px 22px;
  background:var(--control-selected);
  color:var(--control-selected-text);
  box-shadow:0 20px 54px rgb(11 107 79 / 22%);
}

.custom-sort-panel[data-placement="above"] {
  border-radius:22px 22px 0 22px;
}

.custom-sort-inner {
  gap:var(--control-gap);
  padding:12px;
}

.custom-sort-inner > .filter-help {
  color:color-mix(in srgb,var(--control-selected-text) 82%,transparent);
}

.sort-priority-list {
  gap:var(--control-gap);
}

.sort-priority-card {
  min-height:56px;
  padding:6px 12px;
  border:1px solid color-mix(in srgb,var(--control-selected) 34%,var(--control-border));
  border-radius:var(--control-radius);
  background:var(--control-surface);
  color:var(--color-text);
  box-shadow:0 3px 10px rgb(11 107 79 / 8%);
  transition:
    transform var(--control-motion-fast) var(--motion-ease),
    border-color var(--control-motion-standard) var(--motion-ease),
    background-color var(--control-motion-standard) var(--motion-ease),
    box-shadow var(--control-motion-standard) var(--motion-ease),
    opacity var(--control-motion-fast) ease-out;
}

.sort-priority-card .sort-priority-rank {
  background:var(--control-selected-soft);
  color:var(--control-selected-strong);
}

.sort-priority-card .sort-priority-copy strong {
  color:var(--color-text);
}

.sort-priority-card .sort-priority-copy small {
  color:var(--color-text-subtle);
}

@media (hover:hover) {
  .sort-priority-card:hover:not(.is-dragging):not(.is-settling) {
    border-color:color-mix(in srgb,var(--control-selected) 58%,var(--control-border));
    background:var(--control-surface);
    box-shadow:var(--control-shadow-hover);
    transform:translateY(-1px);
  }
}

.sort-priority-card:active:not(.is-dragging):not(.is-settling) {
  transform:translateY(1px) scale(.98);
  transition-duration:70ms;
}

.sort-priority-card:focus-visible {
  border-color:var(--control-selected-strong);
  outline:3px solid color-mix(in srgb,var(--control-selected-text) 48%,transparent);
  outline-offset:2px;
  box-shadow:var(--control-shadow);
}

.sort-priority-card.is-dragging,
.sort-priority-card.is-settling {
  border-color:var(--control-selected-strong);
  border-radius:var(--control-radius);
  background:var(--control-surface);
  box-shadow:var(--shadow-lg);
}

/* Capsule field triggers from the approved Advanced Search direction. */
html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields :is(.multi-trigger,.location-field .loc-autocomplete > input),
.snapshot-location-field select,
.snapshot-date input {
  min-height:var(--control-height);
  border-radius:var(--control-radius);
  transition:
    border-color var(--control-motion-standard) var(--motion-ease),
    background-color var(--control-motion-standard) var(--motion-ease),
    color var(--control-motion-standard) var(--motion-ease),
    box-shadow var(--control-motion-standard) var(--motion-ease);
}

html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields .multi-trigger {
  padding-inline:14px;
}

html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields .multi-trigger:hover,
html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields .multi-trigger:focus-visible,
html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields .multi-trigger[aria-expanded="true"] {
  border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  background:var(--control-surface);
  color:var(--control-selected-strong);
  box-shadow:var(--control-shadow);
}

/* An open multi-select is one expanded capsule: the trigger becomes its top
   cap and the option surface continues from the same left and right edges. */
html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields
  .multi-field:has(> .multi-trigger[aria-expanded="true"]) {
  z-index:80;
}

.advanced-filter-fields .multi-field > .multi-trigger[aria-expanded="true"] {
  position:relative;
  z-index:2;
  border-bottom-color:var(--color-border-subtle);
  border-radius:22px 22px 0 0 !important;
  box-shadow:none;
}

.advanced-filter-fields .multi-field > .multi-popover:not([hidden]),
.advanced-filter-fields [data-multi-key="languages"] > .multi-popover:not([hidden]) {
  top:100%;
  right:auto;
  left:0;
  width:100%;
  min-width:100%;
  border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  border-top:0;
  border-radius:0 0 22px 22px !important;
  background:var(--control-surface);
  box-shadow:0 12px 24px rgb(11 107 79 / 12%);
}

:root[data-theme="dark"][data-layout-mode] body[data-view="explore"]
  .advanced-filter-fields .multi-popover,
:root.theme-dark[data-layout-mode] body[data-view="explore"]
  .advanced-filter-fields .multi-popover {
  box-shadow:0 14px 28px rgb(0 0 0 / 30%);
}

/* Location autocomplete follows the same expanded-capsule contract. */
html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields
  .location-field:has(#location-input[aria-expanded="true"]) {
  z-index:80;
}

.advanced-filter-fields .loc-autocomplete > #location-input[aria-expanded="true"] {
  position:relative;
  z-index:2;
  border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  border-bottom-color:var(--color-border-subtle);
  border-radius:22px 22px 0 0 !important;
  background:var(--control-surface);
  color:var(--control-selected-strong);
  box-shadow:none;
}

.advanced-filter-fields .loc-autocomplete > .loc-popover:not([hidden]) {
  top:100%;
  left:0;
  width:100%;
  min-width:100%;
  border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  border-top:0;
  border-radius:0 0 22px 22px !important;
  background:var(--control-surface);
  box-shadow:0 12px 24px rgb(11 107 79 / 12%);
}

:root[data-theme="dark"][data-layout-mode] body[data-view="explore"]
  .advanced-filter-fields .loc-popover,
:root.theme-dark[data-layout-mode] body[data-view="explore"]
  .advanced-filter-fields .loc-popover {
  box-shadow:0 14px 28px rgb(0 0 0 / 30%);
}

/* Toggle capsule: the thumb carries a visible check when the state is on. */
.referral-preferences-section .accepting-filter-pill {
  min-height:var(--control-height);
  padding:4px 8px;
  border-color:transparent;
  border-radius:var(--control-radius);
  background:transparent;
  box-shadow:none;
  transition:
    background-color var(--control-motion-standard) var(--motion-ease),
    color var(--control-motion-standard) var(--motion-ease);
}

.accepting-switch-track {
  width:52px;
  height:32px;
  border-color:var(--control-border);
  background:var(--color-border-subtle);
  box-shadow:inset 0 1px 2px rgb(37 35 31 / 8%);
  transition:
    border-color var(--control-motion-standard) var(--motion-ease),
    background-color var(--control-motion-standard) var(--motion-ease),
    box-shadow var(--control-motion-standard) var(--motion-ease);
}

.accepting-switch-track > span {
  top:3px;
  left:3px;
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  background:var(--control-surface);
  box-shadow:0 2px 5px rgb(37 35 31 / 16%);
  transition:
    transform var(--control-motion-standard) var(--control-motion-spring),
    background-color var(--control-motion-standard) var(--motion-ease),
    box-shadow var(--control-motion-standard) var(--motion-ease);
}

.accepting-switch-track > span::after {
  width:5px;
  height:9px;
  margin-top:-2px;
  border-right:2px solid var(--control-selected);
  border-bottom:2px solid var(--control-selected);
  content:"";
  opacity:0;
  transform:rotate(45deg) scale(.35);
  transition:
    opacity 90ms ease-out,
    transform var(--control-motion-standard) var(--control-motion-spring);
}

.accepting-switch input:checked + .accepting-switch-track {
  border-color:var(--control-selected);
  background:var(--control-selected);
  box-shadow:var(--control-shadow);
}

.accepting-switch input:checked + .accepting-switch-track > span {
  background:var(--control-selected-text);
  transform:translateX(20px);
}

.accepting-switch input:checked + .accepting-switch-track > span::after {
  opacity:1;
  transform:rotate(45deg) scale(1);
}

.accepting-switch input:focus-visible + .accepting-switch-track {
  outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--control-selected) 20%,transparent);
}

.referral-preferences-section .accepting-filter-pill:has(input:checked) {
  border-color:transparent;
  background:transparent;
  color:var(--control-selected-strong);
  box-shadow:none;
}

/* Menu choices reuse the selected cue without becoming large filled pills. */
.account-menu-section :is(button,a) {
  border-radius:12px;
}

.role-button {
  position:relative;
  min-height:40px;
  border-radius:12px;
}

.role-button[aria-checked="true"] {
  border-color:transparent;
  background:var(--control-selected-soft);
  color:var(--control-selected-strong);
  box-shadow:none;
}

/* Native consent controls match the quick check response. */
:where(.auth-consent,.attestation) input[type="checkbox"] {
  border-radius:6px;
  accent-color:var(--control-selected);
  transition:
    transform var(--control-motion-fast) var(--control-motion-spring),
    box-shadow var(--control-motion-standard) var(--motion-ease);
}

:where(.auth-consent,.attestation) input[type="checkbox"]:checked {
  transform:scale(1.06);
}

/* Intentional structural exceptions. */
:where(
  .result-card,
  .refinement-disclosure,
  .snapshot-toggle,
  .loc-mobile-toggle,
  .profile-identity-action,
  .star-rating > button.star,
  .primary-nav-toggle,
  #account-menu-toggle
) {
  transform:none;
}

@media (prefers-reduced-motion:reduce) {
  :where(
    .btn-primary,
    .rating-form .save,
    .contribution-guide-action,
    .btn-small,
    .application-review-actions button,
    .dialog-actions button,
    .result-load-more button,
    .profile-report-button,
    .multi-popover-head button,
    .role-button,
    .account-menu-section button,
    .segment-group > button,
    .pill-group > .pill,
    .accepting-filter-pill,
    .accepting-switch-track,
    .accepting-switch-track > span,
    .accepting-switch-track > span::after,
    .sort-priority-card
  ) {
    animation:none !important;
    transition-duration:.01ms !important;
  }

  :where(
    .btn-primary,
    .rating-form .save,
    .contribution-guide-action,
    .btn-small,
    .application-review-actions button,
    .dialog-actions button,
    .result-load-more button,
    .profile-report-button,
    .multi-popover-head button,
    .role-button,
    .segment-group > button,
    .pill-group > .pill,
    .accepting-filter-pill,
    .sort-priority-card
  ):is(:hover,:active) {
    transform:none !important;
  }
}

@media (forced-colors:active) {
  .segment-group > button[aria-checked="true"],
  .segment-group > button[aria-pressed="true"],
  .pill-group > .pill.on,
  .role-button[aria-checked="true"] {
    border:2px solid Highlight;
    background:Highlight;
    color:HighlightText;
  }
}