/* Shareable-asset panel - approved-submission page (submissions/show).

   EXPERIMENT, not live. Intro copy, then the canvas fills the modal
   dialog it sits in (see .th-artwork-share-dialog in artwork-post.css),
   with Share/Download overlaid on top of it rather than stacked below -
   the generated image is the point, so nothing else competes with it for
   space. */

.th-share-header {
  /* Extra right padding clears the dialog's floating close button
     (absolute-positioned in artwork-post.css, top-right of the dialog).
     Otherwise kept tight - this is intro copy, not the point of the
     modal, so it shouldn't compete with the asset for space. */
  padding: var(--space-16) 56px var(--space-12) var(--space-16);
}

.th-share-header h3 {
  /* Smaller than the site's default h3 (42px) - a page heading's weight
     is too much for one line of modal intro copy. */
  font-size: var(--text-28);
  line-height: 32px;
  margin-bottom: var(--space-4);
}

.th-share-header p {
  font-size: var(--text-16);
  line-height: 20px;
  margin-bottom: 0;
}

.th-share-canvas-frame {
  position: relative;
  display: block;
  line-height: 0; /* no inline-content gap under the canvas */
}

.th-share-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1920;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

#shareableAssetRoot.is-ready .th-share-canvas {
  opacity: 1;
}

.th-share-overlay-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-32) var(--space-20) var(--space-24);
  background: linear-gradient(to top, rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0) 100%);
}

.th-share-overlay-btn {
  font-family: var(--font-heading-bold);
  font-size: var(--text-20);
  font-weight: normal;
  border-radius: var(--radius-pill);
  height: 50px;
  padding: 0 var(--space-24);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.th-share-overlay-btn:active {
  transform: scale(0.96);
}

.th-share-overlay-btn:disabled {
  /* "Preparing…"/"Not supported" state while the PNG is being produced. */
  opacity: 0.6;
  cursor: not-allowed;
}

.th-share-overlay-btn.-solid {
  border: none;
  background-color: var(--color-white);
  color: var(--color-navy-blue);
}

.th-share-overlay-btn.-outline {
  border: 2px solid var(--color-white);
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}