/* Only the root is locked; share.js pads it by the removed scrollbar's width so the page doesn't move. */
html.impact-share-scroll-lock {
  overflow: hidden;
}

.modal-element.impact-share-modal,
.impact-share-modal {
  display: none;
  z-index: 2100;
  background: transparent;
  overscroll-behavior: none;
}

/* Centered at every width. The dialog is as tall as its content, up to the viewport;
   when that doesn't fit, the preview image is what shrinks (see .impact-share-stage). */
.modal-element.impact-share-modal.is-open,
.impact-share-modal.is-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100dvh;
  max-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.impact-share-modal .modal-overlay-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}

.impact-share-header {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 0 64px;
  box-sizing: border-box;
}

.impact-share-heading {
  margin: 0;
  color: #0a3161;
  font-family: Helveticanowdisplay, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* Icon and look come from .modal-close-element, as in the other dialogs, but its desktop size is kept
   at every width (impact-scoring.css shrinks .modal-close-element on smaller screens). Its right inset
   is the stage padding, i.e. the preview's smallest right margin. */
.impact-share-modal .impact-share-close {
  z-index: 3;
  top: 50%;
  right: var(--stage-pad-x);
  width: 37px;
  height: 37px;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.impact-share-modal .impact-share-close .modal-close-icon {
  width: 13.28px;
  height: 13.28px;
}

.modal-content-element.impact-share-modal-content,
.impact-share-modal-content {
  --share-w: 1080;
  --share-h: 1350;
  --stage-pad-x: 24px;
  --stage-pad-bottom: 8px;
  position: relative;
  inset: auto;
  z-index: 1;
  flex: 0 1 auto;
  width: 520px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  container-type: inline-size;
}

.impact-share-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto;
}

/* Wants the full-width preview's height, but is the only part that shrinks when the dialog
   hits its max height. share.js hides it (.is-preview-hidden) once the image would be under 200px. */
.impact-share-stage {
  flex: 0 1 calc((100cqw - 2 * var(--stage-pad-x)) * var(--share-h) / var(--share-w) + var(--stage-pad-bottom));
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
  padding: 0 var(--stage-pad-x) var(--stage-pad-bottom);
  box-sizing: border-box;
}

.impact-share-modal.is-preview-hidden .impact-share-stage {
  display: none;
}

.impact-share-preview-frame {
  position: relative;
  aspect-ratio: var(--share-w) / var(--share-h);
  width: min(100cqw, calc(100cqh * var(--share-w) / var(--share-h)));
  max-width: 100%;
  max-height: 100%;
  border-radius: 22px;
  background: #0a3161;
  box-shadow: 0 0 0 1px rgba(10, 49, 97, 0.12);
  overflow: hidden;
}

.impact-share-preview-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 22px;
  background: #0a3161;
  color: transparent;
  font-size: 0;
}

.impact-share-preview-image:not(.is-loaded) {
  background-image: linear-gradient(100deg, #0a3161 30%, #1a4a86 50%, #0a3161 70%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: impact-share-shimmer 1.2s ease-in-out infinite;
}

.impact-share-preview-image.is-loaded,
.impact-share-preview-image.is-failed {
  animation: none;
  background-image: none;
}

.impact-share-preview-error {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  box-sizing: border-box;
  background: #0a3161;
  color: #fff;
  font-family: Helveticanowdisplay, sans-serif;
  text-align: center;
}

.impact-share-preview-error[hidden] {
  display: none;
}

.impact-share-preview-error-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.impact-share-retry {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 9px 22px;
  background: #fdc600;
  color: #0a3161;
  font-family: Helveticanowdisplay, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

@keyframes impact-share-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.impact-share-filters {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 20px 0;
}

.impact-share-filters:not(:has(.impact-share-division-wrap:not([hidden]))) {
  display: none;
}

/* Visible dropdowns share one row; a single one takes the full width. */
.impact-share-selects {
  display: flex;
  gap: 12px;
}

.impact-share-selects:not(:has(.impact-share-division-wrap:not([hidden]))) {
  display: none;
}

.impact-share-division-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.impact-share-division-wrap[hidden] {
  display: none;
}

.impact-share-division-label {
  color: rgba(10, 49, 97, 0.72);
  font-family: Helveticanowdisplay, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.impact-share-division {
  appearance: none;
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  max-width: none;
  border: 1px solid #000;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 8px 36px 8px 12px;
  color: #000;
  font-family: Helveticanowdisplay, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* The bottom padding is constant: labels take only the lines they need, so a wrapped label
   ("Impact Scoring" on narrow screens) grows the dialog instead of eating into this space. */
.impact-share-dock {
  position: relative;
  flex: none;
  margin-top: 20px;
  padding-top: 12px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(10, 49, 97, 0.15);
}

.impact-share-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 4px 20px 0;
  overflow: visible;
  scrollbar-width: none;
}

.impact-share-actions::-webkit-scrollbar {
  display: none;
}

.impact-share-actions[hidden] {
  display: none;
}

.impact-share-action {
  position: relative;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  max-width: 84px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: Helveticanowdisplay, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.impact-share-action-icon {
  display: block;
  width: min(62px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: none;
  transition: transform 0.15s ease;
}

.impact-share-action:hover .impact-share-action-icon,
.impact-share-action:focus-visible .impact-share-action-icon {
  transform: translateY(-2px);
}

.impact-share-action:disabled {
  cursor: default;
  opacity: 0.45;
}

.impact-share-action:disabled .impact-share-action-icon {
  transform: none;
}

/* "Copied" / "Posted" (is-done) or "Couldn't post" (is-failed), shown briefly on the button. */
.impact-share-action.is-done .impact-share-action-icon {
  box-shadow: 0 0 0 2px #fdc600;
}

/* Instagram or Facebook while its menu's cards load, Impact Scoring while it posts. The spinner sits on the icon (62px here, 56px on phones). */
.impact-share-action.is-busy {
  cursor: progress;
}

.impact-share-action.is-busy .impact-share-action-icon {
  opacity: 0.35;
  transform: none;
}

.impact-share-action.is-busy::after {
  content: "";
  position: absolute;
  top: calc(var(--share-action-icon, 62px) / 2 - 13px);
  left: calc(50% - 13px);
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: 3px solid rgba(10, 49, 97, 0.2);
  border-top-color: #0a3161;
  border-radius: 50%;
  animation: impact-share-spin 0.8s linear infinite;
}

@keyframes impact-share-spin {
  to { transform: rotate(360deg); }
}

/* Shown over the page while share.js loads the card version before the dialog first opens, or if that fails. */
.impact-share-loading {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.impact-share-loading[hidden] {
  display: none;
}

.impact-share-loading-spinner {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 4px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: impact-share-spin 0.8s linear infinite;
}

.impact-share-loading-error {
  display: none;
  width: 320px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.impact-share-loading.is-error .impact-share-loading-spinner {
  display: none;
}

.impact-share-loading.is-error .impact-share-loading-error {
  display: block;
}

.impact-share-loading-error-text {
  margin: 0 0 16px;
  color: #0a3161;
  font-size: 15px;
  line-height: 1.4;
}

.impact-share-loading-error-close {
  min-width: 96px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #0a3161;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Instagram/Facebook menu: floats above its button once its cards are loaded. share.js sets left and bottom. */
.impact-share-menu {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: 248px;
  max-width: calc(100% - 16px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(10, 49, 97, 0.22), 0 0 0 1px rgba(10, 49, 97, 0.1);
  overflow: hidden;
}

.impact-share-menu[hidden] {
  display: none;
}

/* Short instructions above the options. */
.impact-share-menu-note {
  margin: 0;
  padding: 12px 16px 11px;
  background: #f4f6f9;
  border-bottom: 1px solid rgba(10, 49, 97, 0.12);
  color: rgba(10, 49, 97, 0.8);
  font-family: Helveticanowdisplay, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.impact-share-menu-item {
  appearance: none;
  border: 0;
  background: #fff;
  padding: 13px 18px;
  color: #0a3161;
  font-family: Helveticanowdisplay, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.impact-share-menu-item + .impact-share-menu-item {
  border-top: 1px solid rgba(10, 49, 97, 0.12);
}

.impact-share-menu-item:hover,
.impact-share-menu-item:focus-visible {
  background: rgba(10, 49, 97, 0.06);
}

.impact-share-action-label {
  display: block;
  max-width: 100%;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  color: #0a3161;
  white-space: normal;
}

.impact-share-action.is-done .impact-share-action-label {
  color: #fdc600;
  font-weight: 700;
}

.impact-share-action.is-failed .impact-share-action-label {
  color: #b31942;
  font-weight: 700;
}

.impact-share-status {
  margin: 8px 20px 0;
  min-height: 1.2em;
  color: #0a3161;
  font-family: Helveticanowdisplay, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.impact-share-status:empty {
  display: none;
}

.share-icon.share-icon-sm {
  width: 36px;
  height: 36px;
  padding: 8px;
}

.share-icon.share-icon-inline {
  display: inline-flex;
}

/* Phones and tablets: edge to edge, with a more compact sheet. */
@media screen and (max-width: 991px) {
  .modal-element.impact-share-modal.is-open,
  .impact-share-modal.is-open {
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  }

  .modal-content-element.impact-share-modal-content,
  .impact-share-modal-content {
    --stage-pad-x: 12px;
    --stage-pad-bottom: 2px;
  }

  .impact-share-filters {
    gap: 4px;
    padding: 2px 16px 0;
  }

  .impact-share-division {
    padding: 6px 32px 6px 10px;
  }

  .impact-share-header {
    height: 56px;
    padding: 0 64px;
  }

  .impact-share-heading {
    font-size: 17px;
  }

  .impact-share-dock {
    margin-top: 8px;
    padding-top: 8px;
  }

  .impact-share-actions {
    gap: 2px;
    padding: 4px 16px 0;
  }

  .impact-share-action {
    --share-action-icon: 56px;
    max-width: 78px;
    gap: 4px;
  }


  .impact-share-action-icon {
    width: min(56px, 100%);
  }

  .impact-share-action-label {
    font-size: 11px;
  }
}