/*
 * 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-action);
  --control-pill-selected-start:color-mix(in srgb,var(--control-selected-soft) 88%,var(--control-selected) 12%);
  --control-pill-selected-end:color-mix(in srgb,var(--control-selected-soft) 94%,var(--control-selected) 6%);
  --control-border:var(--color-border-interactive);
  --control-surface:var(--color-surface);
  --control-shadow:0 5px 14px rgb(36 59 83 / 6%);
  --control-shadow-hover:0 8px 18px rgb(36 59 83 / 11%);
  --control-motion-fast:110ms;
  --control-motion-standard:170ms;
  --control-motion-spring:cubic-bezier(.2,.9,.25,1.2);
  --unified-bar-shadow:0 0 16px rgb(23 37 44 / 10%);
  --expanded-options-shadow:var(--unified-bar-shadow);
  --sticky-underlap-shadow:0 10px 10px -10px rgb(23 37 44 / 32%);
  --sticky-underlap-edge:rgb(23 37 44 / 18%);
  --expanded-options-edge-shadow:var(--unified-bar-shadow);
}

:root:is([data-theme="dark"],.theme-dark) {
  --unified-bar-shadow:0 0 18px rgb(0 0 0 / 28%);
  --expanded-options-shadow:var(--unified-bar-shadow);
  --sticky-underlap-shadow:0 10px 10px -10px rgb(0 0 0 / 58%);
  --sticky-underlap-edge:rgb(0 0 0 / 34%);
  --expanded-options-edge-shadow:var(--unified-bar-shadow);
}

/* Browser-review refinements for the compact selected-profile rail. Section
 * headings reuse the Sort-results icon grammar, while the four criteria fields
 * share one exact control box and inset contract. */
html[data-layout-mode] body[data-view="explore"] .advanced-filter-title {
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
}

html[data-layout-mode] body[data-view="explore"]
  .advanced-filter-title > .filter-control-icon {
  width:20px;
  height:20px;
}

html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields
  :is(.multi-trigger,.location-field .loc-autocomplete > input) {
  box-sizing:border-box;
  width:100%;
  height:50px;
  min-height:50px !important;
  padding-block:0;
  border:1px solid var(--control-border);
  border-radius:var(--control-radius);
  background:var(--control-surface);
  color:var(--color-text);
  font-size:var(--explore-filter-value-font-size,var(--type-ui)) !important;
  font-weight:500;
  line-height:1.35;
}

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

html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields
  .location-field .loc-autocomplete > input {
  padding-inline:44px 42px;
}

html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields
  .location-field .loc-autocomplete > input::placeholder {
  font-size:var(--explore-filter-value-font-size,var(--type-ui)) !important;
  font-weight:500;
  line-height:1.35;
}

html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields
  .location-field.has-location .loc-autocomplete > input {
  border-color:var(--control-selected);
  background:var(--control-selected-soft);
  color:var(--control-selected-strong);
}

html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields
  :is(.multi-trigger > .filter-control-icon,.location-leading-icon) {
  width:20px;
  height:20px;
}

html[data-layout-mode] body[data-view="explore"] .advanced-filter-fields .location-leading-icon {
  left:14px;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"] .advanced-filter-fields {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"] .referral-preferences-grid {
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:12px;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"]
  :is(.referral-method-control,.referral-segments) {
  width:100%;
  min-width:0;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"]
  .referral-preferences-section .referral-segments > button {
  flex:1 1 0;
  min-width:0;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"]
  .referral-preferences-section .accepting-filter-pill {
  justify-self:start;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"]
  .referral-contact-fact .contact-copy-row {
  grid-template-columns:max-content max-content;
  justify-content:start;
  gap:6px;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"]
  .profile-report-footer {
  min-height:60px;
  padding-top:0;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"]
  .profile-report-footer .profile-report-button {
  align-self:center;
}

/* Browser-review refinements: keep service destination headers aligned to the
 * shared content edge and make the route badge match the nearby action rhythm. */
html[data-layout-mode] body[data-view="explore"][data-explore-stage="profile"]
  .service-location-head .loc-heading-group {
  grid-column:auto;
  grid-row:auto;
  justify-items:start;
  padding:0;
  text-align:left;
}

html[data-layout-mode] body[data-view="explore"][data-explore-stage="profile"]
  .service-location-head .service-route-badge {
  min-height:34px;
  align-self:center;
  padding:.4rem .75rem;
}

html[data-layout-mode] body[data-view="explore"][data-explore-stage="profile"]
  .linked-specialists-head {
  min-height:52px;
  padding-block:6px;
}

:root[data-theme="dark"],
:root.theme-dark {
  --control-pill-selected-start:color-mix(in srgb,var(--control-selected-soft) 60%,var(--control-selected) 40%);
  --control-pill-selected-end:color-mix(in srgb,var(--control-selected-soft) 70%,var(--control-selected) 30%);
  --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:
    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;
}

/* 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:600;
}

: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(--critical-soft);
  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);
}

/* Invite sharing uses the site's independent capsule action language. */
.invite-page button,
.invite-details-dialog button {
  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:600;
}

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

.snapshot-experience .pill-group {
  gap:var(--control-gap);
}

.snapshot-experience .pill-group > .pill {
  flex:0 0 auto;
  width:max-content;
  height:var(--control-height);
  min-height:var(--control-height);
  padding-block:0;
}

/* In expanded split-profile composers, the wait legend uses the same vertical
 * rhythm as the Referral method label: one 12px section gap above and one 8px
 * label-to-control gap below. Services share the same fieldset contract. */
html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"] .snapshot-experience legend {
  padding-top:12px;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"] .snapshot-experience-grid {
  margin-top:6px;
}

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);
}

/* Advanced-search choices communicate selection with colour alone. Keeping
 * their padding fixed prevents the panel from shifting when a choice changes. */
.advanced-filters .segment-group > button[aria-checked="true"],
.advanced-filters .segment-group > button[aria-pressed="true"] {
  padding-right:.35rem;
  box-shadow:none;
}

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

.advanced-filters .segment-group > button::after {
  display:none;
}

@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;
}

/* Wait thresholds are ordered values, so present them as discrete native
   sliders while retaining the cumulative filtering model. */
.wait-filter-section {
  gap:14px !important;
}

.wait-filter-section > .filter-help {
  margin-bottom:0;
}

.wait-slider-control {
  display:grid;
  gap:9px;
  min-width:0;
  padding:16px 18px 17px;
  border:1px solid var(--control-border);
  border-radius:24px;
  background:color-mix(in srgb,var(--control-surface) 82%,var(--control-selected-soft));
  box-shadow:0 3px 12px rgb(36 59 83 / 4%);
  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);
}

.wait-slider-control:hover,
.wait-slider-control:focus-within {
  border-color:color-mix(in srgb,var(--control-selected) 58%,var(--control-border));
  box-shadow:var(--control-shadow);
}

.wait-slider-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:28px;
}

.wait-slider-heading label {
  color:var(--color-text);
  font-size:.76rem;
  font-weight:700;
}

.wait-slider-heading output {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  max-width:70%;
  padding:4px 10px;
  border:1px solid var(--control-border);
  border-radius:var(--control-radius);
  background:var(--control-surface);
  color:var(--color-text-subtle);
  font-size:.69rem;
  font-weight:600;
  line-height:1.15;
  text-align:right;
  white-space:nowrap;
  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);
}

.wait-slider-control.has-limit .wait-slider-heading output {
  border-color:color-mix(in srgb,var(--control-selected) 46%,var(--control-border));
  background:var(--control-selected-soft);
  color:var(--control-selected-strong);
}

.wait-slider-shell {
  --wait-thumb-size:26px;
  position:relative;
  display:grid;
  gap:1px;
  min-width:0;
}

.wait-slider-shell input[type="range"] {
  --wait-progress:0%;
  position:relative;
  z-index:2;
  width:100%;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  accent-color:var(--control-selected);
}

.wait-slider-shell input[type="range"]::-webkit-slider-runnable-track {
  width:100%;
  height:8px;
  border:1px solid color-mix(in srgb,var(--control-selected) 18%,var(--control-border));
  border-radius:var(--control-radius);
  background:linear-gradient(
    to right,
    var(--control-selected) 0 var(--wait-progress),
    color-mix(in srgb,var(--control-border) 70%,var(--control-surface)) var(--wait-progress) 100%
  );
}

.wait-slider-shell input[type="range"]::-moz-range-track {
  width:100%;
  height:8px;
  border:1px solid color-mix(in srgb,var(--control-selected) 18%,var(--control-border));
  border-radius:var(--control-radius);
  background:color-mix(in srgb,var(--control-border) 70%,var(--control-surface));
}

.wait-slider-shell input[type="range"]::-moz-range-progress {
  height:8px;
  border-radius:var(--control-radius);
  background:var(--control-selected);
}

.wait-slider-shell input[type="range"]::-webkit-slider-thumb {
  width:var(--wait-thumb-size);
  height:var(--wait-thumb-size);
  margin-top:-10px;
  border:4px solid var(--control-surface);
  border-radius:50%;
  background:var(--control-selected);
  box-shadow:0 0 0 1px var(--control-selected), var(--control-shadow);
  appearance:none;
  -webkit-appearance:none;
  transition:transform var(--control-motion-fast) var(--control-motion-spring), box-shadow var(--control-motion-standard) var(--motion-ease);
}

.wait-slider-shell input[type="range"]::-moz-range-thumb {
  width:calc(var(--wait-thumb-size) - 8px);
  height:calc(var(--wait-thumb-size) - 8px);
  border:4px solid var(--control-surface);
  border-radius:50%;
  background:var(--control-selected);
  box-shadow:0 0 0 1px var(--control-selected), var(--control-shadow);
  transition:transform var(--control-motion-fast) var(--control-motion-spring), box-shadow var(--control-motion-standard) var(--motion-ease);
}

.wait-slider-shell input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:0 0 0 3px var(--control-surface), 0 0 0 6px color-mix(in srgb,var(--control-selected) 55%,transparent), var(--control-shadow-hover);
}

.wait-slider-shell input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow:0 0 0 3px var(--control-surface), 0 0 0 6px color-mix(in srgb,var(--control-selected) 55%,transparent), var(--control-shadow-hover);
}

.wait-slider-shell input[type="range"]:active::-webkit-slider-thumb {
  transform:scale(1.08);
}

.wait-slider-shell input[type="range"]:active::-moz-range-thumb {
  transform:scale(1.08);
}

.wait-slider-stops {
  position:absolute;
  z-index:3;
  top:20px;
  right:calc(var(--wait-thumb-size) / 2 - 2px);
  left:calc(var(--wait-thumb-size) / 2 - 2px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}

.wait-slider-stops > span {
  flex:0 0 auto;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--color-text-subtle);
  opacity:.52;
}

.wait-slider-stops > span.is-in-range {
  background:var(--control-selected-text);
  opacity:.9;
}

.wait-slider-stops > span.is-current {
  opacity:0;
}

.wait-slider-scale {
  display:grid;
  grid-template-columns:0 repeat(7,minmax(0,1fr) 0);
  align-items:start;
  margin-inline:calc(var(--wait-thumb-size) / 2);
  color:var(--color-text-subtle);
  font-size:.61rem;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}

.wait-slider-scale > span {
  grid-row:1;
  justify-self:center;
  min-width:0;
  text-align:center;
}

.wait-slider-scale > span:nth-child(1) { grid-column:1; }
.wait-slider-scale > span:nth-child(2) { grid-column:3; }
.wait-slider-scale > span:nth-child(3) { grid-column:5; }
.wait-slider-scale > span:nth-child(4) { grid-column:7; }
.wait-slider-scale > span:nth-child(5) { grid-column:9; }
.wait-slider-scale > span:nth-child(6) { grid-column:11; }
.wait-slider-scale > span:nth-child(7) { grid-column:13; }
.wait-slider-scale > span:nth-child(8) { grid-column:15; }

@media (max-width:420px) {
  .wait-slider-control {
    padding-inline:16px;
  }

  .wait-slider-heading output {
    max-width:74%;
    font-size:.66rem;
  }

  .wait-slider-scale {
    font-size:.56rem;
    letter-spacing:-.01em;
  }
}

/* Custom priorities float just clear of the trigger while a short stem keeps
   the two rounded surfaces visually connected. */
.sort-strategy-segments > button {
  min-width:88px;
  padding-inline:18px;
}

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

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

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

.custom-sort-panel {
  overflow:visible;
  border-color:var(--control-selected);
  border-radius:22px;
  background:var(--control-selected);
  color:var(--control-selected-text);
  box-shadow:0 20px 54px rgb(36 59 83 / 22%);
}

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

.custom-sort-connector {
  position:absolute;
  top:-11px;
  right:calc(var(--custom-sort-trigger-width,88px) / 2 - 10px);
  box-sizing:content-box;
  width:0;
  height:0;
  border-right:10px solid transparent;
  border-bottom:11px solid var(--control-selected);
  border-left:10px solid transparent;
  pointer-events:none;
}

.custom-sort-panel[data-placement="above"] .custom-sort-connector {
  top:auto;
  bottom:-11px;
  border-top:11px solid var(--control-selected);
  border-bottom:0;
}

.custom-sort-inner {
  position:relative;
  z-index:1;
  gap:var(--control-gap);
  max-height:inherit;
  padding:12px;
  overflow:auto;
  border-radius:inherit;
}

.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(36 59 83 / 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-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);
}

/* Native single-choice dropdowns use the same closed-control contract as the
 * Specialty trigger. Future native selects should adopt this wrapper instead
 * of introducing browser-default arrows, spacing, or focus treatments. */
.control-select {
  position:relative;
  min-width:0;
}

.control-select > .control-select-input {
  width:100%;
  height:50px;
  min-height:50px;
  padding:0 44px 0 48px;
  border:1px solid var(--control-border);
  border-radius:var(--control-radius);
  background:color-mix(in srgb,var(--control-surface) 86%,transparent);
  color:var(--color-text);
  box-shadow:none;
  font-size:var(--explore-filter-value-font-size,var(--type-ui));
  font-weight:500;
  line-height:1.35;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  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);
}

.control-select > .control-select-icon {
  position:absolute;
  z-index:1;
  top:50%;
  left:14px;
  transform:translateY(-50%);
}

.control-select > .control-select-chevron {
  position:absolute;
  top:50%;
  right:16px;
  margin:-5px 0 0;
  color:var(--color-text-subtle);
  pointer-events:none;
}

.control-select > .control-select-input:is(:hover,:focus-visible) {
  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);
}

.control-select:has(> .control-select-input:is(:hover,:focus-visible))
  > :is(.control-select-icon,.control-select-chevron) {
  color:var(--control-selected-strong);
}

.control-select > .control-select-input:disabled {
  border-color:var(--color-border-subtle);
  background:var(--color-border-subtle);
  color:var(--color-text-subtle);
  box-shadow:none;
  cursor:not-allowed;
}

/* Shared single-choice dropdown contract. Use this trigger/menu/option structure
 * whenever the product needs a styled list rather than a native form select, so
 * chevron inset, list spacing, selected state, focus, and themes remain site-wide. */
.control-dropdown {
  position:relative;
  min-width:0;
}

.control-dropdown-trigger {
  position:relative;
  display:flex;
  width:100%;
  min-width:148px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0 34px;
  border:1px solid var(--control-border);
  border-radius:var(--control-radius);
  background:color-mix(in srgb,var(--control-surface) 86%,transparent);
  color:var(--color-text);
  box-shadow:none;
  font-size:.78rem;
  font-weight:600;
  line-height:1.25;
  text-align:left;
  cursor:pointer;
  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);
}

.control-dropdown-trigger:is(:hover,:focus-visible),
.control-dropdown[data-open="true"] > .control-dropdown-trigger {
  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);
}

.control-dropdown-chevron {
  position:absolute;
  top:50%;
  right:.75rem;
  display:grid;
  width:14px;
  height:14px;
  place-items:center;
  color:var(--color-text-subtle);
  transform:translateY(-50%);
  transition:transform var(--control-motion-standard) var(--motion-ease);
}

.control-dropdown-chevron svg {
  width:14px;
  height:14px;
}

.control-dropdown-icon {
  position:absolute;
  top:50%;
  left:.75rem;
  display:grid;
  width:16px;
  height:16px;
  place-items:center;
  color:var(--color-text-subtle);
  transform:translateY(-50%);
}

.control-dropdown-icon svg {
  width:16px;
  height:16px;
}

.control-dropdown[data-open="true"] .control-dropdown-chevron {
  transform:translateY(-50%) rotate(180deg);
}

.control-dropdown-menu {
  position:absolute;
  z-index:90;
  top:calc(100% + 6px);
  right:0;
  display:grid;
  min-width:100%;
  gap:3px;
  padding:6px;
  overflow:hidden;
  border:1px solid var(--control-border);
  border-radius:calc(var(--control-radius) - 4px);
  background:var(--control-surface);
  box-shadow:var(--shadow-lg);
}

.control-dropdown-menu[hidden] {
  display:none;
}

.control-dropdown-menu > [role="option"] {
  display:grid;
  width:100%;
  min-height:40px;
  grid-template-columns:minmax(0,1fr) 16px;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border:0;
  border-radius:calc(var(--control-radius) - 8px);
  background:transparent;
  color:var(--color-text);
  box-shadow:none;
  font-size:var(--type-caption);
  font-weight:500;
  line-height:1.35;
  text-align:left;
  white-space:nowrap;
}

.control-dropdown-menu > [role="option"]:is(:hover,:focus-visible) {
  background:color-mix(in srgb,var(--control-selected-soft) 56%,var(--control-surface));
  color:var(--control-selected-strong);
}

.control-dropdown-menu > [role="option"][aria-selected="true"] {
  background:var(--control-selected-soft);
  color:var(--control-selected-strong);
  font-weight:700;
}

.control-dropdown-check {
  display:grid;
  place-items:center;
  opacity:0;
}

.control-dropdown-menu > [role="option"][aria-selected="true"] .control-dropdown-check {
  opacity:1;
}

/* Linked-specialist sorting follows the directory selector's joined-capsule
 * contract at every width: the trigger is the top half and the menu exposes
 * only the alternate choice. */
.linked-specialist-sort
  .control-dropdown[data-open="true"] > .control-dropdown-trigger {
  border-bottom-color:var(--color-border-subtle);
  border-radius:20px 20px 0 0;
  box-shadow:none;
}

.linked-specialist-sort .control-dropdown-menu {
  top:100%;
  right:0;
  width:100%;
  min-width:100%;
  gap:0;
  padding:3px;
  border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  border-top:0;
  border-radius:0 0 20px 20px;
  background:var(--control-surface);
  box-shadow:0 12px 24px rgb(36 59 83 / 12%);
}

.linked-specialist-sort
  .control-dropdown-menu > [role="option"][aria-selected="true"] {
  display:none;
}

.linked-specialist-sort
  .control-dropdown-menu > [role="option"] {
  min-height:38px;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  justify-items:center;
  padding:.35rem .75rem;
  border-radius:14px;
  text-align:center;
}

.linked-specialist-sort .control-dropdown-check {
  display:none;
}

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(36 59 83 / 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(36 59 83 / 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(23 37 44 / 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(23 37 44 / 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;
}

#account-menu-toggle:active:not(:disabled) {
  transform:none;
}

.theme-switcher {
  gap:.15rem;
}

.theme-switcher .account-menu-heading {
  padding-bottom:.3rem;
}

.theme-choices {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.25rem;
  margin:0 .35rem .25rem;
  padding:4px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 76%,var(--panel));
}

.account-menu-section .theme-choices button {
  position:relative;
  justify-content:center;
  min-width:0;
  min-height:44px;
  padding:.45rem .25rem;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  font-size:.7rem;
}

.account-menu-section .theme-choices button:hover:not(:disabled) {
  background:color-mix(in srgb,var(--action-soft) 42%,transparent);
  color:var(--action-strong);
}

.account-menu-section .theme-choices button[aria-checked="true"] {
  border-color:color-mix(in srgb,var(--action) 30%,var(--line-soft));
  background:var(--action-soft);
  color:var(--action-strong);
  box-shadow:0 7px 18px rgb(36 59 83 / 7%);
  font-weight:700;
}

.theme-choices .account-menu-item-main {
  justify-content:center;
  gap:.3rem;
}

.theme-choices .theme-choice-icon svg {
  width:15px;
  height:15px;
}

.theme-choices .theme-choice-check {
  display:none;
}

.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);
}

.primary-nav-link-icon {
  display:inline-flex;
  width:16px;
  height:16px;
  flex:none;
  align-items:center;
  justify-content:center;
}

html[data-layout-mode] .primary-nav a {
  gap:7px;
  transform:none;
  transition:
    background-color var(--control-motion-standard) var(--motion-ease),
    color var(--control-motion-standard) var(--motion-ease);
}

@media (max-width:759px) {
  html[data-layout-mode="medium"] .primary-nav a {
    gap:4px;
  }

  html[data-layout-mode="medium"] .primary-nav-toggle-icon,
  html[data-layout-mode="narrow"] .primary-nav-toggle-icon {
    position:absolute;
    left:11.3px;
    width:17px;
    height:17px;
    margin-right:0;
  }

  html[data-layout-mode="medium"] .primary-nav-toggle,
  html[data-layout-mode="narrow"] .primary-nav-toggle {
    font-weight:500;
  }

  html[data-layout-mode="medium"] .primary-nav-toggle-label,
  html[data-layout-mode="narrow"] .primary-nav-toggle-label {
    font-weight:700;
  }

  html[data-layout-mode="medium"] .primary-nav-link-icon,
  html[data-layout-mode="medium"] .primary-nav-link-icon svg,
  html[data-layout-mode="narrow"] .primary-nav-link-icon,
  html[data-layout-mode="narrow"] .primary-nav-link-icon svg {
    width:17px;
    height:17px;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .primary-nav a {
    position:relative;
    font-size:.92rem;
    font-weight:500;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav a[aria-current="page"] > :nth-child(2) {
    font-weight:700;
  }
}

/* Fix the clock face to integer insets and its badge's geometric center so
   WebKit cannot shift it through inline SVG baseline or half-pixel rounding. */
.referral-status.badge-yes .referral-status-badge,
.referral-status.badge-loa .referral-status-badge {
  position:relative;
}

.referral-status.badge-yes .referral-status-badge svg,
.referral-status.badge-loa .referral-status-badge svg {
  position:absolute;
  top:50%;
  left:50%;
  width:12px !important;
  height:12px !important;
  transform:translate(-50%,-50%);
}

.result-referral-status.badge-loa .referral-status-badge svg {
  width:10px !important;
  height:10px !important;
}

html[data-layout-mode] .primary-nav a:not([aria-current="page"]):hover {
  background:color-mix(in srgb,var(--control-selected-soft) 56%,transparent);
  color:var(--control-selected-strong);
}

html[data-layout-mode] .primary-nav a:not([aria-current="page"]):focus-visible {
  background:color-mix(in srgb,var(--control-selected-soft) 56%,transparent);
  color:var(--control-selected-strong);
}

.primary-nav-link-icon svg {
  width:16px;
  height:16px;
}

/* About sections use the same responsive navigation grammar seen on Invite. */
.about-section-nav-toggle-icon,
.about-section-tab-icon {
  width:17px;
  height:17px;
  flex:none;
  align-items:center;
  justify-content:center;
}

.about-section-nav-toggle-icon svg,
.about-section-tab-icon svg {
  width:17px;
  height:17px;
}

@media (max-width:767px) {
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .about-section-nav {
    position:relative;
    isolation:isolate;
    display:block;
    width:196px;
    min-height:48px;
    align-self:flex-start;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .about-section-nav-toggle {
    position:relative;
    display:flex;
    width:100%;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:.55rem 2.35rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:color-mix(in srgb,var(--surface) 78%,var(--panel));
    color:var(--action-strong);
    font-family:var(--font-ui);
    font-size:.92rem;
    font-weight:500;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav-toggle:hover:not(:disabled),
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav-toggle:focus-visible,
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav-toggle[aria-expanded="true"] {
    border-color:color-mix(in srgb,var(--action) 40%,var(--line));
    background:var(--action-soft);
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav-toggle-label {
    font-weight:700;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav-toggle-icon {
    position:absolute;
    left:11.3px;
    display:inline-flex;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav-toggle-chevron {
    position:absolute;
    top:50%;
    right:1rem;
    transform:translateY(-50%);
    transition:transform .18s cubic-bezier(.22,1,.36,1);
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav[data-mobile-open="true"] .about-section-nav-toggle-chevron {
    transform:translateY(-50%) rotate(180deg);
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-tab-indicator {
    display:none;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-tab-links {
    position:absolute;
    z-index:60;
    top:100%;
    left:0;
    display:grid;
    width:100%;
    max-height:0;
    gap:0;
    padding:0 7px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:22px;
    background:color-mix(in srgb,var(--surface) 97%,transparent);
    box-shadow:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:max-height .28s cubic-bezier(.22,1,.36,1),
      padding .28s cubic-bezier(.22,1,.36,1),
      opacity .18s ease-out,
      border-color .18s ease-out,
      box-shadow .24s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .2s;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav[data-mobile-open="true"] .about-section-tab-links {
    max-height:120px;
    gap:3px;
    padding:7px;
    border-color:var(--line);
    box-shadow:0 16px 38px rgb(23 37 44 / 14%);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:max-height .3s cubic-bezier(.22,1,.36,1),
      padding .3s cubic-bezier(.22,1,.36,1),
      opacity .18s ease-out,
      border-color .18s ease-out,
      box-shadow .24s cubic-bezier(.22,1,.36,1),
      visibility 0s;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav[data-mobile-open="true"] [role="tab"][aria-selected="true"] {
    display:none;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav [role="tab"] {
    display:grid;
    grid-template-columns:22px minmax(0,1fr) 22px;
    gap:.5rem;
    min-height:44px;
    padding:.65rem .55rem;
    border-radius:11px;
    font-family:var(--font-ui);
    font-size:.9rem;
    font-weight:500;
    text-align:center;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-nav [role="tab"] > :nth-child(2) {
    justify-self:center;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .about-section-tab-icon {
    display:inline-flex;
  }
}

/* Final responsive navigation contract. The compact site selector expands as
 * one joined capsule (matching the directory selector) while its top edge and
 * trigger remain fixed inside the sticky header. */
html[data-layout-mode] .about-section-tab-icon {
  display:inline-flex;
  width:16px;
  height:16px;
  align-items:center;
  justify-content:center;
}

html[data-layout-mode] .about-section-tab-icon svg {
  width:16px;
  height:16px;
}

/* Header elements share one visual scale. Page-level navigation remains a
   segmented pill; only the site header navigation becomes a disclosure. */
html[data-layout-mode]:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .primary-nav {
  height:var(--header-control-size);
  min-height:var(--header-control-size);
}
html[data-layout-mode]:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .primary-nav-links {
  gap:.5rem;
}
html[data-layout-mode]:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .primary-nav a {
  min-height:calc(var(--header-control-size) - 12px);
  padding-inline:1rem;
  font-family:var(--font-ui);
  font-size:.9rem !important;
}
html[data-layout-mode="wide"] .primary-nav a {
  font-size:1rem !important;
}

html[data-layout-mode] body :is(.admin-section-nav,.contribution-section-nav,.about-section-nav) {
  display:flex;
  width:max-content;
  max-width:100%;
  min-height:var(--header-control-size);
  padding:.3rem;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  box-shadow:var(--shadow-1);
  scrollbar-width:none;
}
html[data-layout-mode] :is(.admin-section-nav,.contribution-section-nav,.about-section-nav)::-webkit-scrollbar {
  display:none;
}
html[data-layout-mode] :is(.admin-section-nav-toggle,.contribution-section-nav-toggle,.about-section-nav-toggle) {
  display:none !important;
}
html[data-layout-mode] :is(.admin-section-nav-links,.contribution-section-nav-links,.about-section-tab-links) {
  position:relative;
  top:auto;
  left:auto;
  display:flex;
  width:auto;
  max-height:none;
  gap:.3rem;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
html[data-layout-mode] :is(.admin-section-nav-indicator,.contribution-section-nav-indicator,.about-section-tab-indicator) {
  display:block;
}
html[data-layout-mode] :is(.admin-section-nav,.contribution-section-nav) a,
html[data-layout-mode] .about-section-nav [role="tab"] {
  display:inline-flex;
  width:auto;
  min-height:40px;
  grid-template-columns:none;
  padding:.5rem .85rem;
  border-radius:999px;
  font-family:var(--font-serif);
  font-size:.82rem !important;
}

@media (max-width:767px) {
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .app-header {
    grid-template-columns:var(--header-control-size) minmax(0,1fr) calc(var(--header-control-size) + 16px);
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .primary-nav {
    display:block;
    width:min(100%,196px);
    height:var(--header-control-size);
    min-height:var(--header-control-size);
    margin:0;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .primary-nav[data-mobile-open="true"] {
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .primary-nav-toggle {
    height:var(--header-control-size);
    min-height:var(--header-control-size);
    border:1px solid var(--line);
    background:color-mix(in srgb,var(--surface) 78%,var(--panel));
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .primary-nav-links {
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    border:1px solid transparent;
    border-radius:22px;
    background:color-mix(in srgb,var(--surface) 97%,transparent);
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav[data-mobile-open="true"] .primary-nav-links {
    padding:7px;
    border-color:var(--line);
    box-shadow:0 16px 38px rgb(23 37 44 / 14%);
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) #account-menu-toggle {
    position:relative;
    width:calc(var(--header-control-size) + 16px);
    max-width:none;
    height:var(--header-control-size);
    min-height:var(--header-control-size);
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    #account-menu-toggle .account-menu-chevron {
    position:absolute;
    right:0;
  }
}

/* Directory mode follows the primary navigation grammar on larger screens. */
.explore-mode-switch {
  position:relative;
  isolation:isolate;
  display:block;
  grid-column:1;
  grid-row:1;
  justify-self:start;
  align-self:center;
  width:272px;
  height:40px;
  min-height:40px;
  box-sizing:border-box;
  margin:0;
  padding:3px 4px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 76%,var(--panel));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 80%,transparent);
  translate:0 -1px;
  transition:
    border-radius var(--control-motion-standard) var(--motion-ease),
    border-color var(--control-motion-standard) var(--motion-ease),
    background-color var(--control-motion-standard) var(--motion-ease);
}

.explore-mode-switch[hidden] {
  display:none !important;
}

.explore-mode-dropdown-toggle {
  display:none;
}

.explore-mode-options {
  position:relative;
  z-index:1;
  display:grid;
  width:100%;
  height:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
}

.explore-mode-indicator {
  position:absolute;
  z-index:0;
  top:3px;
  bottom:3px;
  left:4px;
  width:calc((100% - 12px) / 2);
  border:1px solid color-mix(in srgb,var(--control-selected) 32%,var(--line-soft));
  border-radius:999px;
  background:var(--control-selected-soft);
  box-shadow:0 7px 18px color-mix(in srgb,var(--control-selected) 12%,transparent);
  pointer-events:none;
  transform:translate3d(0,0,0);
  transition:transform .38s cubic-bezier(.22,1,.36,1),
    background .2s var(--ease);
}

body[data-explore-mode="services"] .explore-mode-indicator {
  transform:translate3d(calc(100% + 4px),0,0);
}

.explore-mode-options > button,
.explore-mode-options > button[aria-checked="true"] {
  position:relative;
  display:flex;
  min-width:0;
  min-height:32px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:.35rem 1rem;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  color:var(--ink-2);
  font-size:.78rem;
  font-weight:600;
  transition:color .2s var(--ease);
}

.explore-mode-options > button[aria-checked="true"] {
  color:var(--control-selected-strong);
}

.explore-mode-icon {
  display:inline-flex;
  width:16px;
  height:16px;
  flex:none;
  align-items:center;
  justify-content:center;
}

.explore-mode-icon svg {
  width:16px;
  height:16px;
}

html[data-layout-mode="narrow"] .explore-mode-switch {
  z-index:24;
  width:clamp(124px,32vw,140px);
  overflow:hidden;
  padding:3px;
  transition:none;
}

html[data-layout-mode="narrow"] .explore-mode-switch[data-dropdown-open="true"] {
  border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  border-bottom-color:transparent;
  border-radius:20px 20px 0 0;
  background:var(--control-surface);
  box-shadow:none;
}

html[data-layout-mode="narrow"] .explore-mode-dropdown-toggle {
  position:relative;
  z-index:2;
  display:flex;
  width:100%;
  height:34px;
  min-height:34px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:.35rem 1.1rem;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  color:var(--ink);
  font-size:.78rem;
  font-weight:600;
}

html[data-layout-mode="narrow"] .explore-mode-dropdown-icon {
  position:absolute;
  top:50%;
  left:.5rem;
  display:inline-flex;
  width:16px;
  height:16px;
  flex:none;
  align-items:center;
  justify-content:center;
  transform:translateY(calc(-50% - 1px));
}

html[data-layout-mode="narrow"] .explore-mode-dropdown-icon svg {
  width:16px;
  height:16px;
}

html[data-layout-mode="narrow"] .explore-mode-dropdown-label {
  translate:0 -1px;
}

html[data-layout-mode="narrow"] .explore-mode-dropdown-chevron {
  position:absolute;
  top:50%;
  right:.5rem;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  transition:transform var(--dur) var(--ease);
}

html[data-layout-mode="narrow"] .explore-mode-switch[data-dropdown-open="true"]
  .explore-mode-dropdown-chevron {
  transform:translateY(-50%) rotate(180deg);
}

html[data-layout-mode="narrow"] .explore-mode-indicator {
  display:none;
}

html[data-layout-mode="narrow"] .explore-mode-options {
  position:absolute;
  top:100%;
  right:-1px;
  left:-1px;
  display:none;
  width:auto;
  height:auto;
  grid-template-columns:1fr;
  grid-template-rows:38px;
  gap:0;
  padding:3px;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  border-top:0;
  border-radius:0 0 20px 20px;
  background:var(--control-surface);
  box-shadow:0 12px 24px rgb(36 59 83 / 12%);
}

html[data-layout-mode="narrow"] .explore-mode-switch[data-dropdown-open="true"]
  .explore-mode-options {
  display:grid;
}

html[data-layout-mode="narrow"] .explore-mode-options[data-compact-overlay="true"] {
  z-index:90;
  top:var(--explore-mode-overlay-top);
  left:var(--explore-mode-overlay-left);
  display:grid;
  width:var(--explore-mode-overlay-width);
}

html[data-layout-mode="narrow"] .explore-mode-switch[data-dropdown-open="true"]
  .explore-mode-options > button[aria-checked="true"],
html[data-layout-mode="narrow"] .explore-mode-options[data-compact-overlay="true"]
  > button[aria-checked="true"] {
  display:none;
}

html[data-layout-mode="narrow"] .explore-mode-options > button,
html[data-layout-mode="narrow"] .explore-mode-options > button[aria-checked="true"] {
  min-height:38px;
  gap:0;
  padding:.35rem .75rem;
  border-radius:14px;
}

html[data-layout-mode="narrow"] .explore-mode-options > button:hover,
html[data-layout-mode="narrow"] .explore-mode-options > button:focus-visible,
html[data-layout-mode="narrow"] .explore-mode-options > button[aria-checked="true"] {
  background:var(--action-soft);
  color:var(--action-strong);
}

html[data-layout-mode="narrow"] .explore-mode-icon {
  display:none;
}

html[data-layout-mode="narrow"] .primary-nav-toggle {
  gap:0;
  padding-inline:2.5rem;
}

html[data-layout-mode="narrow"] .primary-nav-toggle-icon {
  position:absolute;
  top:50%;
  left:1rem;
  margin-right:0;
  transform:translateY(-50%);
}

html[data-layout-mode="narrow"] .primary-nav-toggle > .primary-nav-toggle-chevron {
  position:absolute;
  top:50%;
  right:1rem;
  margin-left:0;
  transform:translateY(-50%);
}

html[data-layout-mode="narrow"] .primary-nav[data-mobile-open="true"]
  .primary-nav-toggle > .primary-nav-toggle-chevron {
  transform:translateY(-50%) rotate(180deg);
}

@media (min-width:640px) and (max-width:767px) {
  html[data-layout-mode="medium"] .primary-nav-toggle {
    gap:0;
    padding-inline:2.5rem;
  }

  html[data-layout-mode="medium"] .primary-nav-toggle-icon {
    position:absolute;
    top:50%;
    left:1rem;
    margin-right:0;
    transform:translateY(-50%);
  }

  html[data-layout-mode="medium"] .primary-nav-toggle > .primary-nav-toggle-chevron {
    position:absolute;
    top:50%;
    right:1rem;
    margin-left:0;
    transform:translateY(-50%);
  }

  html[data-layout-mode="medium"] .primary-nav[data-mobile-open="true"]
    .primary-nav-toggle > .primary-nav-toggle-chevron {
    transform:translateY(-50%) rotate(180deg);
  }
}

/* Compact primary navigation uses the mobile directory selector's joined
 * capsule, instant disclosure, and non-selected-only option list. */
html[data-layout-mode="narrow"] .primary-nav {
  align-self:start;
  overflow:hidden;
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 78%,var(--panel));
  transition:none;
}

html[data-layout-mode="narrow"] .primary-nav[data-mobile-open="true"] {
  border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
  border-radius:24px;
  box-shadow:0 16px 38px rgb(23 37 44 / 14%);
}

html[data-layout-mode="narrow"] .primary-nav-toggle {
  border:0;
  background:transparent;
}

html[data-layout-mode="narrow"] .primary-nav-links {
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:none;
}

html[data-layout-mode="narrow"] .primary-nav[data-mobile-open="true"] .primary-nav-links {
  padding:0 7px 7px;
  border:0;
  box-shadow:none;
  transition:none;
}

html[data-layout-mode="narrow"] .primary-nav[data-mobile-open="true"]
  .primary-nav-links > [aria-current="page"] {
  display:none;
}

html[data-layout-mode="narrow"] .primary-nav-links > a {
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 22px;
  gap:.5rem;
  padding-inline:.55rem;
}

html[data-layout-mode="narrow"] .primary-nav-links > a .primary-nav-link-icon {
  position:static;
  transform:none;
}

html[data-layout-mode="narrow"] .primary-nav-links > a > :nth-child(2) { justify-self:center; }
html[data-layout-mode="narrow"] .primary-nav-links > a > .activity-count { justify-self:end; }

@media (min-width:640px) and (max-width:767px) {
  html[data-layout-mode="medium"] .primary-nav {
    align-self:start;
    overflow:hidden;
    margin-top:8px;
    border:1px solid var(--line);
    border-radius:999px;
    background:color-mix(in srgb,var(--surface) 78%,var(--panel));
    transition:none;
  }

  html[data-layout-mode="medium"] .primary-nav[data-mobile-open="true"] {
    border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
    border-radius:24px;
    box-shadow:0 16px 38px rgb(23 37 44 / 14%);
  }

  html[data-layout-mode="medium"] .primary-nav-toggle {
    border:0;
    background:transparent;
  }

  html[data-layout-mode="medium"] .primary-nav-links {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transition:none;
  }

  html[data-layout-mode="medium"] .primary-nav[data-mobile-open="true"] .primary-nav-links {
    padding:0 7px 7px;
    border:0;
    box-shadow:none;
    transition:none;
  }

  html[data-layout-mode="medium"] .primary-nav[data-mobile-open="true"]
    .primary-nav-links > [aria-current="page"] {
    display:none;
  }

  html[data-layout-mode="medium"] .primary-nav-links > a {
    position:relative;
    display:grid;
    grid-template-columns:22px minmax(0,1fr) 22px;
    gap:.5rem;
    padding-inline:.55rem;
  }

  html[data-layout-mode="medium"] .primary-nav-links > a .primary-nav-link-icon {
    position:static;
    transform:none;
  }

  html[data-layout-mode="medium"] .primary-nav-links > a > :nth-child(2) { justify-self:center; }
  html[data-layout-mode="medium"] .primary-nav-links > a > .activity-count { justify-self:end; }
}

html[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .refine-entry-row {
  --explore-mode-control-width:272px;
  display:grid;
  grid-template-columns:var(--explore-mode-control-width) max-content;
  height:56px;
  min-height:56px;
  max-height:56px;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,4vw,40px);
  padding:6px var(--mode-search-icon-inset);
}

html[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .refine-entry-row:has(.advanced-filter-reset[data-visible="true"]) {
  grid-template-columns:var(--explore-mode-control-width) minmax(0,1fr) auto;
  justify-content:stretch;
  gap:8px;
}

html[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .refine-entry-row .advanced-filter-reset[data-visible="false"] {
  display:none;
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .unified-search-bar .refine-entry-row {
  --explore-mode-control-width:clamp(124px,32vw,140px);
  grid-template-columns:var(--explore-mode-control-width) max-content;
  justify-content:center;
  gap:clamp(16px,5vw,28px);
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .unified-search-bar .refine-entry-row:has(.advanced-filter-reset[data-visible="true"]) {
  grid-template-columns:var(--explore-mode-control-width) minmax(0,1fr) auto;
  justify-content:stretch;
  gap:4px;
}

html[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .refinement-disclosure {
  position:relative;
  inset:auto;
  grid-column:2;
  grid-row:1;
  justify-self:center;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:0;
  border-radius:999px;
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .unified-search-bar .refinement-disclosure {
  min-width:0;
  padding:0;
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .unified-search-bar .refine-entry-row:has(.advanced-filter-reset[data-visible="true"]) {
  --explore-mode-control-width:clamp(124px,32vw,140px);
}

html[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .refinement-disclosure-content {
  --refinement-pill-space:8px;
  --refinement-chevron-overhang:1.66px;
  box-sizing:border-box;
  grid-column:2;
  grid-row:1;
  justify-content:flex-start;
  width:max-content;
  gap:var(--refinement-pill-space);
  padding-inline:calc(var(--refinement-pill-space) * 2) calc((var(--refinement-pill-space) * 2) + var(--refinement-chevron-overhang));
  margin-left:0 !important;
  justify-self:center !important;
}

html[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .refinement-chevron {
  margin-inline:var(--refinement-chevron-overhang) 0;
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .unified-search-bar .refinement-filter-icon {
  width:18px;
  height:18px;
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .unified-search-bar .refinement-disclosure-content {
  --refinement-pill-space:5.67px;
  width:max-content;
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .unified-search-bar .refinement-label {
  font-size:1rem;
}

html[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .advanced-filter-reset,
html[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .advanced-filter-reset[data-visible="true"] {
  grid-column:3;
  grid-row:1;
  min-height:40px;
  margin-right:0;
}

/* The Explore controls collapse from right to left according to the space
   available inside their own row, independent of the page layout breakpoint. */
html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  body[data-view="explore"] .unified-search-bar .refine-entry-row {
  --explore-mode-control-width:272px;
}

html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  body[data-view="explore"] .unified-search-bar
  .refine-entry-row:has(.advanced-filter-reset[data-visible="true"]) {
  grid-template-columns:272px max-content max-content;
  justify-content:space-between;
  gap:0;
}

html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  .explore-mode-switch {
  z-index:1;
  width:272px;
  padding:3px 4px;
  overflow:hidden;
  border-color:var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 76%,var(--panel));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 80%,transparent);
}

html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  .explore-mode-dropdown-toggle {
  display:none;
}

html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  .explore-mode-indicator {
  display:block;
}

html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  .explore-mode-options {
  position:relative;
  inset:auto;
  display:grid;
  width:100%;
  height:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:none;
  gap:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  .explore-mode-options > button,
html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  .explore-mode-options > button[aria-checked="true"] {
  min-height:32px;
  gap:6px;
  padding:.35rem 1rem;
  border-radius:999px;
  background:transparent;
}

html:is([data-explore-control-density="full"],[data-explore-control-density="reset-compact"])
  .explore-mode-icon {
  display:inline-flex;
}

/* A phone-width row can carry every control label once the directory switch
   gives the Options and Reset actions their intrinsic share of the row. */
html[data-layout-mode="narrow"][data-explore-control-density="full"]
  body[data-view="explore"] .unified-search-bar .refine-entry-row {
  --explore-mode-control-width:240px;
}

html[data-layout-mode="narrow"][data-explore-control-density="full"]
  body[data-view="explore"] .unified-search-bar
  .refine-entry-row:has(.advanced-filter-reset[data-visible="true"]) {
  grid-template-columns:240px max-content max-content;
}

html[data-layout-mode="narrow"][data-explore-control-density="full"]
  .explore-mode-switch {
  width:240px;
}

html[data-layout-mode="narrow"][data-explore-control-density="full"]
  body[data-view="explore"] .unified-search-bar .refinement-disclosure-content {
  --refinement-pill-space:4px;
}

html[data-explore-control-density="full"] body[data-view="explore"]
  .unified-search-bar .reset-filter-label {
  display:inline;
}

html[data-explore-control-density="reset-compact"] body[data-view="explore"]
  .unified-search-bar .reset-filter-label,
html:is([data-explore-control-density="directory-compact"],[data-explore-control-density="options-compact"])
  body[data-view="explore"] .unified-search-bar .reset-filter-label {
  display:none;
}

html[data-explore-control-density="reset-compact"] body[data-view="explore"]
  .unified-search-bar .advanced-filter-reset[data-visible="true"],
html:is([data-explore-control-density="directory-compact"],[data-explore-control-density="options-compact"])
  body[data-view="explore"] .unified-search-bar .advanced-filter-reset[data-visible="true"] {
  max-width:42px;
  padding-inline:8px;
}

html[data-explore-control-density="full"] body[data-view="explore"]
  .unified-search-bar .advanced-filter-reset[data-visible="true"] {
  max-width:92px;
  padding:0 10px 0 8px;
}

html[data-layout-mode] body[data-view="explore"] .unified-search-bar
  .filter-count[data-visible="false"] {
  display:none;
}

html[data-explore-control-density="options-compact"] body[data-view="explore"]
  .unified-search-bar .refine-entry-row {
  --explore-mode-control-width:64px;
}

html[data-explore-control-density="options-compact"] body[data-view="explore"]
  .unified-search-bar :is(.explore-mode-switch,.explore-mode-dropdown-toggle) {
  width:64px;
  min-width:64px;
  padding:0;
}

html[data-explore-control-density="options-compact"] body[data-view="explore"]
  .unified-search-bar .explore-mode-dropdown-toggle {
  justify-content:center;
  gap:0;
}

html[data-explore-control-density="options-compact"] body[data-view="explore"]
  .unified-search-bar .explore-mode-dropdown-label {
  display:none;
}

/* 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;
}

/* Site-wide button-motion contract: interaction may change colour, border,
 * shadow, focus, or internal icon state, but never translate or scale the
 * control itself. Keep this late in the cascade so new buttons inherit it. */
:where(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):is(:hover,:active) {
  transform:none !important;
  translate:none !important;
  scale:none !important;
}

/* These controls are centred with a resting transform; preserve that exact
 * position through interaction instead of dropping the transform. */
.search-clear:is(:hover,:active),
.loc-clear:is(:hover,:active),
.location-field > .field-label > .info-btn:is(:hover,:active) {
  transform:translateY(-50%) !important;
}

.profile-panel.profile-context-compact .profile-snapshot-action:is(:hover,:active) {
  transform:translateY(-50%) !important;
}

@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;
  }

  .explore-mode-indicator {
    transition-duration:.01ms !important;
  }

  .explore-mode-switch,
  .explore-mode-options,
  .explore-mode-dropdown-chevron {
    transition-duration:.01ms !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;
  }
}

.profile-title-actions {
  display:flex;
  flex:none;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-left:auto;
  align-self:flex-start;
}
.profile-snapshot-action {
  display:inline-flex;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border:1px solid var(--control-selected);
  border-radius:999px;
  background:var(--control-selected);
  color:var(--control-selected-text);
  box-shadow:none;
  font-family:var(--font-sans);
  font-size:.76rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
.profile-snapshot-action:hover:not(:disabled) {
  border-color:var(--control-selected-strong);
  background:var(--control-selected-strong);
  color:var(--control-selected-text);
}
.profile-snapshot-action:focus-visible { outline:2px solid var(--control-selected); outline-offset:3px; }
.profile-snapshot-action-icon { display:inline-grid; flex:none; place-items:center; }
.profile-snapshot-action-icon svg { display:block; width:20px; height:20px; }
.profile-save-control {
  --saved-item-menu-width:min(264px,calc(100vw - 32px));
  display:grid;
  justify-items:end;
  gap:3px;
  flex:none;
  margin-left:0;
  position:relative;
}
.profile-save-button {
  display:inline-flex;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:0;
  padding:0;
  border:1px solid color-mix(in srgb,var(--action) 46%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--action-soft) 62%,var(--surface));
  color:var(--action);
  box-shadow:none;
  font-family:var(--font-sans);
  font-size:.76rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  transition:color 140ms ease-out, border-color 140ms ease-out, background-color 140ms ease-out;
}
.profile-save-button:hover:not(:disabled) {
  border-color:color-mix(in srgb,var(--action) 60%,var(--line));
  background:var(--action-soft);
  color:var(--action);
}
.profile-save-button.is-saved {
  border-color:color-mix(in srgb,var(--action) 54%,var(--line));
  background:var(--action-soft);
  color:var(--action);
}
.profile-save-button:focus-visible {
  outline:2px solid var(--action);
  outline-offset:3px;
}
.profile-save-button:disabled { cursor:not-allowed; opacity:.64; }
.profile-save-icon { display:inline-grid; flex:none; place-items:center; transition:color 140ms ease-out; }
.profile-save-icon svg { display:block; width:20px; height:20px; }
.profile-save-label,
.profile-save-chevron { display:none; }
.profile-save-chevron svg { display:block; }
.profile-save-chevron[hidden] { display:none; }
.profile-saved-menu-panel {
  position:absolute;
  z-index:45;
  top:calc(100% + 10px);
  right:0;
  width:var(--saved-item-menu-width);
  padding:0;
  overflow:visible;
  border:1px solid var(--control-selected);
  border-radius:22px;
  background:var(--control-selected);
  color:var(--control-selected-text);
  box-shadow:0 20px 54px rgb(36 59 83 / 22%);
  opacity:1;
  transform:none;
  transform-origin:top right;
  transition:opacity .14s ease-out, transform .18s var(--ease), display .18s allow-discrete;
}
.profile-saved-menu-panel[popover] {
  position:fixed;
  inset:auto;
  top:var(--saved-item-menu-top);
  bottom:var(--saved-item-menu-bottom);
  left:var(--saved-item-menu-left);
  width:var(--saved-item-menu-width);
  margin:0;
}
.profile-saved-menu-panel[data-placement="above"] {
  transform-origin:bottom right;
}
.profile-saved-menu-panel[hidden] { display:none; opacity:0; transform:translateY(-4px) scale(.985); }
.profile-saved-menu-panel[data-placement="above"][hidden] { transform:translateY(4px) scale(.985); }
@starting-style {
  .profile-saved-menu-panel:not([hidden]) { opacity:0; transform:translateY(-4px) scale(.985); }
  .profile-saved-menu-panel[data-placement="above"]:not([hidden]) { transform:translateY(4px) scale(.985); }
}
.profile-saved-menu-connector {
  position:absolute;
  top:-11px;
  right:calc(var(--saved-item-trigger-width,44px) / 2 - 10px);
  box-sizing:content-box;
  width:0;
  height:0;
  border-right:10px solid transparent;
  border-bottom:11px solid var(--control-selected);
  border-left:10px solid transparent;
  pointer-events:none;
}
.profile-saved-menu-panel[data-placement="above"] .profile-saved-menu-connector {
  top:auto;
  bottom:-11px;
  border-top:11px solid var(--control-selected);
  border-bottom:0;
}
.profile-saved-menu-actions { display:grid; gap:6px; padding:8px; }
.profile-saved-menu-actions[hidden] { display:none; }
.profile-saved-menu-actions > button {
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  column-gap:8px;
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--control-selected) 34%,var(--control-border));
  border-radius:16px;
  background:var(--control-surface);
  color:var(--ink);
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  text-align:left;
}
.profile-saved-menu-actions > button:hover,
.profile-saved-menu-actions > button:focus-visible { background:var(--action-soft); color:var(--action); }
.profile-saved-menu-actions > button:focus-visible { outline:2px solid var(--action); outline-offset:1px; }
.profile-saved-menu-action-icon { display:grid; place-items:center; color:currentColor; }
.profile-saved-menu-action-icon svg { display:block; }
.profile-saved-menu-action-copy { display:inline-flex; align-items:center; justify-content:flex-start; gap:5px; min-width:0; }
.profile-saved-private-lock { display:inline-grid; flex:none; place-items:center; color:var(--muted); }
.profile-saved-private-lock svg { display:block; }
.profile-saved-menu-actions > .profile-saved-menu-remove { color:var(--critical); }
.saved-note-dialog {
  width:min(calc(100% - 32px),420px);
  max-height:min(88vh,560px);
  margin:auto;
  padding:0;
  border:1px solid color-mix(in srgb,var(--control-selected) 38%,var(--control-border));
  border-radius:16px;
  background:var(--control-surface);
  color:var(--ink);
  box-shadow:0 28px 80px rgb(16 26 36 / 30%);
}
.saved-note-dialog::backdrop { background:rgb(16 26 36 / 48%); backdrop-filter:blur(2px); }
.saved-note-form { display:grid; gap:12px; padding:18px; }
.saved-note-label {
  display:flex;
  width:100%;
  align-items:center;
  gap:5px;
  color:var(--ink);
  font-size:.82rem;
  font-weight:700;
}
.saved-note-privacy-group {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
}
.saved-note-privacy { color:var(--muted); font-size:.7rem; font-weight:500; line-height:1.2; }
.saved-note-form textarea {
  width:100%;
  min-height:116px;
  resize:vertical;
  padding:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--canvas);
  color:var(--ink);
  font:inherit;
  font-size:.82rem;
  line-height:1.4;
}
.saved-note-form textarea:focus-visible { outline:2px solid var(--action); outline-offset:1px; border-color:var(--action); }
.saved-note-meta {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:-7px;
}
.saved-note-format-help,
.saved-note-remaining {
  color:var(--muted);
  font-size:.68rem;
  line-height:1.3;
}
.saved-note-format-help { max-width:25ch; }
.saved-note-remaining {
  flex:none;
  margin-left:auto;
  text-align:right;
}
.saved-note-actions { display:flex; justify-content:flex-end; gap:8px; }
.saved-note-actions button {
  display:inline-flex;
  min-width:68px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  padding-block:0;
  border-radius:999px;
  font-size:.82rem;
  line-height:1;
  text-align:center;
}
.saved-note-actions button > span { display:block; line-height:1; }
.result-saved-indicator {
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  color:var(--control-selected);
}
.result-saved-indicator svg { display:block; }
.result-card-status-markers {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}
.result-card-status-markers .caution { flex:none; margin:0; }
.result-card-status-markers .result-saved-indicator { flex:none; }

/* Saved actions float like the Custom-sort popover and never resize the trigger. */
.profile-save-control:has(.profile-save-button[aria-expanded="true"]) {
  z-index:45;
}
.result-card-status-markers .caution {
  width:18px;
  height:18px;
}
.result-card-status-markers .caution-glyph { font-size:.75rem; }
body[data-view="explore"][data-explore-stage="results"] .result-chevron {
  width:10px;
  height:10px;
  border-width:1.75px;
}

html[data-layout-mode="medium"] body[data-view="explore"][data-explore-stage="profile"] .profile-header {
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-header {
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-save-button {
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-color:color-mix(in srgb,var(--action) 46%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--action-soft) 62%,var(--surface));
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-snapshot-action {
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-radius:999px;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-snapshot-action-label {
  display:none;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-snapshot-action-icon svg {
  width:20px;
  height:20px;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-save-label {
  display:none;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-save-button.is-saved {
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-color:color-mix(in srgb,var(--action) 54%,var(--line));
  background:var(--action-soft);
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-save-button.is-saved .profile-save-label {
  display:none;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-save-chevron {
  display:none;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-save-button:hover:not(:disabled) {
  border-color:color-mix(in srgb,var(--action) 60%,var(--line));
  background:var(--action-soft);
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"] .profile-save-icon svg {
  width:20px;
  height:20px;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-scroll-context {
  display:grid;
  grid-template-columns:19px minmax(0,1fr);
  column-gap:9px;
  padding-right:108px;
  padding-left:16px;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-context-back {
  width:34px;
  margin-left:-7.5px;
}
html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-header {
  z-index:25;
}
html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-snapshot-action {
  position:fixed;
  z-index:26;
  top:calc(var(--profile-context-top,var(--mode-header-height)) + 28px);
  right:calc(var(--mode-gutter) + 56px);
  margin:0;
  transform:translateY(-50%);
}
html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-title-row .profile-save-control {
  top:calc(var(--profile-context-top,var(--mode-header-height)) + 28px);
  transform:translateY(-50%);
}
html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-save-button {
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-snapshot-action {
  right:calc(var(--mode-gutter) + 60px);
}
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-save-button {
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
}

/* Search-result status uses the title row's trailing edge. When no status is
   present, the entity name keeps the full row without a reserved marker slot. */
body[data-view="explore"][data-explore-stage="results"] .result-card .result-identity {
  justify-self:stretch;
  width:100%;
}
body[data-view="explore"][data-explore-stage="results"]
  .result-title .result-card-status-markers {
  margin-inline-start:auto;
}
body[data-view="explore"][data-explore-stage="results"] .result-card:not(.service-result-card) {
  grid-template-columns:28px 52px minmax(220px,1fr) auto 18px;
}
body[data-view="explore"][data-explore-stage="results"] .result-card:not(.service-result-card) .result-chevron {
  grid-column:5;
}
body[data-view="explore"][data-explore-stage="results"] .service-result-card {
  grid-template-columns:28px minmax(220px,1fr) minmax(360px,.9fr) 18px;
}
body[data-view="explore"][data-explore-stage="results"] .service-result-card .result-chevron { grid-column:4; }

@container results-pane (max-width:999px) {
  body[data-view="explore"][data-explore-stage="results"] .result-card:not(.service-result-card) {
    grid-template-columns:18px 44px minmax(0,1fr) 14px;
  }
  body[data-view="explore"][data-explore-stage="results"] .result-card:not(.service-result-card) .result-chevron { grid-column:4; }
  body[data-view="explore"][data-explore-stage="results"] .service-result-card {
    grid-template-columns:18px minmax(0,1fr) 16px;
  }
  body[data-view="explore"][data-explore-stage="results"] .service-result-card .result-chevron { grid-column:3; }
}

@container results-pane (max-width:479px) {
  body[data-view="explore"][data-explore-stage="results"] .result-card:not(.service-result-card) {
    grid-template-columns:18px 40px minmax(0,1fr) 14px;
  }
}

/* The wide comparison rail has a fixed 430px contract. Keep its compact card
   layout explicit so a result-stage container-query frame can never survive
   the handoff and widen the document underneath the profile pane. */
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] {
  overflow-x:hidden;
}
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] .workspace,
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] .results-panel,
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] #results {
  min-width:0;
  max-width:100%;
}
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] #results {
  overflow-x:clip;
}
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] .result-card {
  min-width:0;
  max-width:100%;
}
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"]
  .result-card:not(.service-result-card) {
  grid-template-columns:18px 44px minmax(0,1fr) 14px;
  grid-template-rows:auto auto;
}
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"]
  .result-card:not(.service-result-card) :is(.result-rank,.result-avatar,.result-chevron) {
  grid-row:1 / 3;
}
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"]
  .result-card:not(.service-result-card) .result-identity {
  grid-column:3;
  grid-row:1;
}
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"]
  .result-card:not(.service-result-card) .result-metrics {
  grid-column:3;
  grid-row:2;
  width:100%;
}
html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"]
  .result-card:not(.service-result-card) .result-chevron {
  grid-column:4;
}
@media (prefers-reduced-motion:reduce) {
  .profile-save-button,
  .profile-saved-menu-panel,
  .saved-note-dialog { transition-duration:.01ms !important; }
}

/* iOS zooms the visual viewport when a focused editable control computes below
   16px. Keep one app-wide phone floor instead of maintaining per-form exceptions. */
html[data-layout-mode="narrow"] :is(
  input:not([type]),
  input:is(
    [type="text"],
    [type="search"],
    [type="email"],
    [type="password"],
    [type="tel"],
    [type="url"],
    [type="number"],
    [type="date"],
    [type="month"],
    [type="week"],
    [type="time"],
    [type="datetime-local"]
  ),
  textarea
) {
  font-size:16px !important;
}

/* Preserve the report editor's desktop optical scale while still exposing the
 * 16px computed size that prevents iOS focus zoom. */
html[data-layout-mode="narrow"] textarea#listing-report-detail,
html[data-layout-mode="narrow"] textarea#listing-report-detail::placeholder {
  font-size:16px !important;
  font-size-adjust:.429;
}

/* Safari keeps the 16px editable-control contract above, while the dropdown
   search glyphs retain the same compact optical scale as medium and wide. */
html[data-layout-mode="narrow"] body[data-view="explore"]
  .advanced-filters input.multi-search {
  font-size:16px !important;
  font-size-adjust:.4095;
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .advanced-filters[aria-hidden="false"] input#location-input {
  font-size:16px !important;
  font-size-adjust:.4095;
}

html[data-layout-mode="narrow"] body[data-view="explore"]
  .advanced-filters[aria-hidden="false"] input#location-input::placeholder {
  font-size:var(--explore-filter-value-font-size,var(--type-ui)) !important;
  font-size-adjust:none;
}

/* Keep multi-line account names visually distinct in the compact header. */
#account-trigger-name {
  display:grid;
  gap:4px;
  line-height:1.25;
}

#account-trigger-name > span {
  display:block;
  line-height:1.25;
}

#account-trigger-name > span + span {
  margin-top:4px;
}

@media (max-width:759px) {
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav .primary-nav-links {
    grid-template-columns:minmax(0,1fr);
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav .primary-nav-links > a {
    width:100%;
    justify-self:stretch;
    font-size:.92rem !important;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav .primary-nav-links > a .primary-nav-link-icon {
    position:absolute !important;
    left:9px !important;
    transform:none !important;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav .primary-nav-links > a > :nth-child(2) {
    grid-column:2;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav .primary-nav-links > a > .activity-count {
    grid-column:3;
  }
}

/* Site navigation contract: Admin geometry and compact behavior with the
 * measured Contribute-style selected-pill motion. */
html[data-layout-mode] :is(.primary-nav,.admin-section-nav,.contribution-section-nav,.about-section-nav) {
  position:relative;
  isolation:isolate;
  display:flex;
  width:max-content;
  max-width:100%;
  min-height:0;
  align-self:auto;
  justify-self:center;
  gap:0;
  margin:0 auto 1.25rem;
  padding:.3rem;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  box-shadow:var(--shadow-1);
}
html[data-layout-mode] .primary-nav { margin:0; }
html[data-layout-mode] :is(.primary-nav-links,.admin-section-nav-links,.contribution-section-nav-links,.about-section-tab-links) {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.3rem;
}
html[data-layout-mode] :is(.primary-nav,.admin-section-nav,.contribution-section-nav) a,
html[data-layout-mode] .about-section-nav [role="tab"] {
  position:relative;
  z-index:1;
  display:inline-flex;
  flex:none;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:.42rem;
  padding:.5rem .85rem;
  border:0;
  border-radius:999px;
  background:transparent !important;
  color:var(--ink-2);
  box-shadow:none !important;
  font-family:var(--font-serif);
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
  transform:none;
  transition:color .2s var(--ease);
}
html[data-layout-mode] :is(.primary-nav,.admin-section-nav,.contribution-section-nav) a[aria-current="page"],
html[data-layout-mode] .about-section-nav [role="tab"][aria-selected="true"] {
  color:var(--brand-strong);
  font-weight:700;
}
html[data-layout-mode] :is(.primary-nav,.admin-section-nav,.contribution-section-nav) a:not([aria-current="page"]):is(:hover,:focus-visible),
html[data-layout-mode] .about-section-nav [role="tab"]:not([aria-selected="true"]):is(:hover,:focus-visible) {
  background:color-mix(in srgb,var(--brand-soft) 56%,transparent) !important;
  color:var(--brand-strong);
}
html[data-layout-mode] :is(.primary-nav-indicator,.admin-section-nav-indicator,.contribution-section-nav-indicator,.about-section-tab-indicator) {
  top:.3rem;
  bottom:.3rem;
  border-color:color-mix(in srgb,var(--brand) 32%,var(--line-soft));
  background:var(--brand-soft);
  box-shadow:0 7px 18px color-mix(in srgb,var(--brand) 12%,transparent);
}
html[data-layout-mode] #about-view .about-section-nav .about-section-tab-indicator {
  width:var(--about-nav-indicator-width,0px);
  transform:translate3d(var(--about-nav-indicator-x,0px),0,0);
}

@media (max-width:767px) {
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav {
    display:block;
    width:min(100%,196px);
    height:var(--header-control-size);
    min-height:var(--header-control-size);
    align-self:auto;
    margin:0;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transition:none;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .primary-nav { margin:0; }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav[data-mobile-open="true"] {
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav-toggle {
    position:relative;
    display:flex;
    width:100%;
    height:var(--header-control-size);
    min-height:var(--header-control-size);
    align-items:center;
    justify-content:center;
    padding:.55rem 2.5rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:color-mix(in srgb,var(--surface) 78%,var(--panel));
    color:var(--control-selected-strong);
    font-family:var(--font-ui);
    font-size:.9rem;
    font-weight:700;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav-toggle-icon {
    position:absolute;
    top:50%;
    left:15px;
    display:inline-flex;
    width:17px;
    height:17px;
    margin:0;
    transform:translateY(-50%);
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav-toggle-chevron {
    position:absolute;
    top:50%;
    right:1rem;
    transform:translateY(-50%);
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav[data-mobile-open="true"] .primary-nav-toggle-chevron {
    transform:translateY(-50%) rotate(180deg);
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav-indicator {
    display:none;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav-links {
    position:absolute;
    top:100%;
    left:0;
    display:grid;
    width:100%;
    max-height:0;
    gap:0;
    padding:0 7px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:22px;
    background:color-mix(in srgb,var(--surface) 97%,transparent);
    box-shadow:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:none;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav[data-mobile-open="true"] .primary-nav-links {
    max-height:240px;
    gap:3px;
    padding:7px;
    border-color:var(--line);
    box-shadow:0 16px 38px rgb(23 37 44 / 14%);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav[data-mobile-open="true"] [aria-current="page"] { display:none; }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav a {
    display:grid;
    width:100%;
    min-height:44px;
    grid-template-columns:22px minmax(0,1fr) 22px;
    gap:.5rem;
    padding:.65rem .35rem;
    border-radius:11px;
    font-family:var(--font-ui);
    font-size:.82rem !important;
    font-weight:600;
    text-align:center;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav a > :nth-child(2) {
    grid-column:2;
    justify-self:center;
  }
  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav .primary-nav-links > a {
    font-size:.82rem !important;
  }
}

/* Compact header: preserve the proven trigger height and let the same capsule
 * disclose downward. The brand and avatar stay aligned to that trigger in
 * both the collapsed and expanded states. */
html[data-layout-mode] #account-menu-toggle .account-avatar-trigger {
  font-size:1rem;
}

@media (max-width:767px) {
  html[data-layout-mode]:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) {
    --compact-header-visual-size:calc(var(--header-control-size) + 2px);
    --compact-account-avatar-size:var(--compact-header-visual-size);
  }

  html[data-layout-mode][data-layout-mode="narrow"] {
    --compact-account-avatar-size:calc(var(--header-control-size) - 2px);
  }

  html[data-layout-mode]:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .app-header {
    grid-template-columns:calc(var(--compact-header-visual-size) + 24px) minmax(0,1fr)
      calc(var(--compact-header-visual-size) + 24px);
  }

  html[data-layout-mode]:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .app-header .brand,
  html[data-layout-mode]:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .app-header .brand-mark {
    width:var(--compact-header-visual-size);
    height:var(--compact-header-visual-size);
  }

  html[data-layout-mode]:is([data-layout-mode="narrow"],[data-layout-mode="medium"]) .primary-nav {
    position:absolute;
    grid-column:auto;
    grid-row:auto;
    top:calc((var(--mode-header-height) - var(--compact-header-visual-size)) / 2);
    left:50%;
    height:auto;
    min-height:var(--header-control-size);
    align-self:start;
    margin:0;
    padding:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--control-surface);
    box-shadow:var(--shadow-1);
    transform:translateX(-50%);
  }

  html[data-layout-mode]:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav[data-mobile-open="true"] {
    border-color:color-mix(in srgb,var(--control-selected) 52%,var(--control-border));
    border-radius:22px;
    background:var(--control-surface);
    box-shadow:0 12px 24px rgb(36 59 83 / 12%);
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav-toggle {
    border:0;
    background:transparent;
  }

  html[data-layout-mode]:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav-toggle-icon {
    left:16px;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav-links {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav[data-mobile-open="true"] .primary-nav-links {
    padding:0 7px 7px;
    border:0;
    box-shadow:none;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .primary-nav .primary-nav-links > a:not([aria-current="page"]):is(:hover,:focus-visible) {
    background:var(--action-soft) !important;
  }

  html[data-layout-mode]:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    .app-header #account-menu-toggle {
    display:grid;
    width:calc(var(--compact-header-visual-size) + 24px);
    max-width:calc(var(--compact-header-visual-size) + 24px);
    height:var(--compact-header-visual-size);
    min-height:var(--compact-header-visual-size);
    grid-template-columns:var(--compact-header-visual-size) 12px;
    gap:8px;
    align-items:center;
    justify-content:start;
    border:0 solid transparent;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    #account-menu-toggle .account-avatar-trigger {
    width:var(--compact-account-avatar-size);
    height:var(--compact-account-avatar-size);
    justify-self:center;
    font-size:1rem;
  }

  html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
    #account-menu-toggle .account-menu-chevron {
    position:static;
    right:auto;
    display:block;
    width:12px;
    height:12px;
    margin:0;
  }

  html[data-layout-mode][data-layout-mode="narrow"] .app-header #account-menu-toggle {
    width:var(--compact-account-avatar-size);
    max-width:var(--compact-account-avatar-size);
    grid-template-columns:var(--compact-account-avatar-size);
    gap:0;
    justify-self:end;
  }

html[data-layout-mode="narrow"] #account-menu-toggle .account-menu-chevron {
    display:none;
  }
}

/* Keep one quiet elevation amount around the standalone and expanded unified
 * surfaces, matching the main navigation. The control row gains separate
 * bottom-edge hierarchy only after filter content scrolls beneath it. */
html[data-layout-mode] body[data-view="explore"] .unified-search-bar,
html[data-layout-mode] body[data-view="explore"] .unified-search-bar:focus-within {
  box-shadow:var(--unified-bar-shadow) !important;
}

html[data-layout-mode] body[data-view="explore"] .unified-search-bar {
  border-color:var(--line);
}

html[data-layout-mode] body[data-view="explore"] .unified-search-bar:focus-within {
  border-color:color-mix(in srgb,var(--color-action) 55%,var(--color-border));
}

html[data-layout-mode] body[data-view="explore"] .filter-bar.refine-is-expanded .unified-search-bar {
  box-shadow:none !important;
  filter:drop-shadow(var(--expanded-options-edge-shadow));
}

/* The connected row and panel are one surface. A dedicated seam layer owns
 * the scroll-under cue so panel overlap cannot suppress the bottom edge. */
html[data-layout-mode] body[data-view="explore"] .filter-bar.refine-is-expanded
  :is(.unified-search-bar .refine-entry-row,.advanced-filters-inner) {
  background:var(--unified-refinement-surface) !important;
}

html[data-layout-mode] body[data-view="explore"] .filter-bar.refine-is-expanded .filter-primary::after {
  position:absolute;
  z-index:31;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  box-shadow:none;
  content:"";
  pointer-events:none;
}

html[data-layout-mode] body[data-view="explore"]
  .filter-bar.refine-is-expanded.refinement-content-is-scrolled .filter-primary::after {
  bottom:0;
  height:1px;
  background:var(--sticky-underlap-edge);
  box-shadow:0 5px 7px var(--sticky-underlap-edge);
}

html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="results"]
  .results-panel .section-heading {
  padding-inline:16px;
}

html[data-layout-mode] body[data-view="explore"] .advanced-filters[aria-hidden="false"]
  .advanced-filter-fields .field > .field-label {
  padding-inline:10px;
}

/* Sticky surfaces remain flat until content actually passes underneath. Their
 * active elevation is the same quiet amount used by the pill navigation. */
html[data-layout-mode] :is(
  body[data-view="explore"] .filter-bar.refine-is-expanded.refinement-content-is-scrolled .unified-search-bar,
  body[data-view="explore"] .results-panel.results-are-scrolled .section-heading,
  body.document-content-is-scrolled .staging-banner:not([hidden]),
  .sticky-underlap-active,
  .saved-item-detail-dialog.detail-content-is-scrolled .saved-item-detail-heading
) {
  box-shadow:var(--sticky-underlap-shadow) !important;
}

/* The selected-profile title remains visually attached to its panel while the
 * content scrolls; section frames below it retain the underlap cue. */
html[data-layout-mode] body[data-view="explore"]
  .profile-panel.profile-is-scrolled .profile-header {
  box-shadow:none !important;
}

/* A box-shadow with negative spread is bottom-only, but its blur naturally
 * tapers before the inline ends. This rectangular fade layer carries the same
 * underlap cue all the way to both owning edges without adding top/side shade. */
html[data-layout-mode] :is(
  body[data-view="explore"] .results-panel.results-are-scrolled .section-heading,
  body.document-content-is-scrolled .staging-banner:not([hidden]),
  .sticky-underlap-active,
  .saved-item-detail-dialog.detail-content-is-scrolled .saved-item-detail-heading
)::after {
  position:absolute;
  z-index:-1;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:var(--sticky-underlap-edge);
  box-shadow:0 5px 7px var(--sticky-underlap-edge);
  content:"";
  pointer-events:none;
}

html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"]
  .profile-section-sticky-frame.sticky-underlap-active::after {
  right:-24px;
  left:-24px;
}

@media (max-width:520px) {
  .summary-section > h3:not(.sticky-underlap-active) {
    box-shadow:none;
  }
}

html[data-layout-mode] body[data-view="explore"] .filter-bar.refine-is-expanded
  > .advanced-filters[aria-hidden="false"] {
  filter:drop-shadow(var(--expanded-options-shadow)) !important;
}

/* The compact profile title sits above the active section frame. The section
 * frame is therefore the bottommost sticky owner and alone casts underlap. */
html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"]
  .profile-panel.profile-context-compact .profile-scroll-context {
  box-shadow:none;
}

/* Keep Options/count intrinsically sized. The invisible hit target follows the
 * visible label instead of absorbing a flexible grid track at tight widths. */
html[data-layout-mode] body[data-view="explore"] .unified-search-bar
  .refinement-disclosure {
  width:100%;
  max-width:100%;
}

html[data-layout-mode] body[data-view="explore"] .unified-search-bar
  .refinement-disclosure-content {
  width:max-content;
  max-width:100%;
}

html:is([data-explore-control-density="directory-compact"],[data-explore-control-density="options-compact"])
  body[data-view="explore"] .unified-search-bar
  .refine-entry-row:has(.advanced-filter-reset[data-visible="true"]) {
  grid-template-columns:var(--explore-mode-control-width) max-content auto;
  justify-content:space-between;
  gap:4px;
}

html[data-explore-control-density="options-compact"] body[data-view="explore"]
  .unified-search-bar .refine-entry-row:has(.advanced-filter-reset[data-visible="true"]) {
  --explore-mode-control-width:64px;
}

/* Once the compact-directory row has enough real capacity, keep all three
 * labelled actions together as a centered cluster. Narrower phones retain the
 * icon-only Reset fallback. */
@media (min-width:460px) {
  html[data-explore-control-density="directory-compact"] body[data-view="explore"]
    .unified-search-bar .refine-entry-row:has(.advanced-filter-reset[data-visible="true"]) {
    grid-template-columns:var(--explore-mode-control-width) max-content max-content;
    justify-content:center;
    gap:10px;
  }

  html[data-explore-control-density="directory-compact"] body[data-view="explore"]
    .unified-search-bar .reset-filter-label {
    display:inline;
  }

  html[data-explore-control-density="directory-compact"] body[data-view="explore"]
    .unified-search-bar .advanced-filter-reset[data-visible="true"] {
    max-width:92px;
    padding:0 10px 0 8px;
  }
}

/* At intermediate capacity, match the three-part comparison used by the wide
 * split view's left results rail: Overall, the grouped category ratings, and
 * Referral. Full labelled comparison columns return at desktop capacity. */
@container results-pane (min-width:580px) and (max-width:719px) {
  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card) {
    grid-template-rows:auto auto;
    row-gap:4px;
    padding-block:12px;
  }

  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card) .result-metrics {
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:0;
    min-height:24px;
  }

  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card) .result-ratings-section {
    display:contents;
  }

  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card) .result-rating-details {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:0;
    width:100%;
    transform:translateX(-25px);
  }

  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card)
    :is(.result-rating-overall,.result-rating-component,.result-accepting) {
    display:flex;
    min-width:0;
    min-height:24px;
    align-items:center;
    justify-content:flex-start;
    padding-inline:.35rem;
  }

  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card)
    :is(.result-rating-overall,.result-rating-component,.result-accepting) > .result-rating-label {
    display:none;
  }

  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card) .result-rating-count-compact,
  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card) .result-rating-count-expanded {
    display:none;
  }

  html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
    .result-card:not(.service-result-card) .result-rating-count-intermediate {
    display:inline;
  }
}

/* Close and dismiss actions share one circular dialog grammar regardless of
 * whether their cross is text or SVG. */
:is(.dialog-close,.dialog-icon-close) {
  display:grid;
  box-sizing:border-box;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px !important;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--canvas);
  color:var(--muted);
  line-height:1;
}

:is(.dialog-close,.dialog-icon-close):is(:hover,:focus-visible) {
  border-color:var(--line-strong);
  background:var(--panel);
  color:var(--ink);
}

/* Every collapsed pill navigation surface shares the unified bar's quiet,
 * all-around elevation. Open disclosures retain their deeper menu shadow. */
html[data-layout-mode] .pill-nav[data-mobile-open="false"] {
  box-shadow:var(--unified-bar-shadow);
}

/* Result comparison cells share one left edge for their labels, icons, values,
 * and referral state. */
html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
  .result-card:not(.service-result-card)
  :is(.result-rating-overall,.result-rating-component,.result-accepting) {
  justify-content:start;
  justify-items:start;
  text-align:left;
}

html[data-layout-mode] body[data-view="explore"][data-explore-stage="results"]
  .result-card:not(.service-result-card)
  :is(.result-rating-overall,.result-rating-component,.result-accepting)
  :is(.result-rating-label,.result-metric-value) {
  justify-content:flex-start;
  text-align:left;
}

/* The compact split-profile toolbar uses one 40px control height inside its
 * existing 56px row, leaving the same eight-pixel inset above and below. */
html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"]
  .unified-search-bar .refine-entry-row {
  box-sizing:border-box;
  padding-block:8px;
}

html[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"]
  .unified-search-bar .refinement-disclosure {
  min-height:40px;
}