/* =====================================================================
   Share modal (Figma Share/Desktop 813:21890)
   Panel 480 wide: 20px padding, 24px radius, 1px border, large shadow.
   Image card: 108x192 story image + title / text / Download button.
   Targets card: 6 per row, 64x62 tiles, 32px logo, 12px label.
   ===================================================================== */
/* Inline popover: opens under the Share button, right edges aligned, 8px gap; no overlay */
.share-pop{position:fixed;z-index:90;width:480px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:var(--space-20);
  background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:0 4px 12px rgba(0,0,0,.08),var(--shadow-large-hover);
  opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .22s var(--ease-out,ease)}
.share-pop[hidden]{display:none}
.share-pop.is-open{opacity:1;transform:none}
.share-pop.is-above{transform-origin:bottom right}
/* the trigger stays in its active (hover) look while open */
.btn--secondary.is-share-open{background:var(--button-secondary-bg-hover);border-color:var(--button-secondary-border-hover);box-shadow:var(--button-shadow-hover),var(--button-inset)}
.story-card__act.is-share-open,.video-card__act.is-share-open{background:var(--button-ghost-bg-hover)}
.story-card:has(.is-share-open) .story-card__actions,.video-card:has(.is-share-open) .video-card__actions{display:flex}
.share__x{position:absolute;top:10px;right:10px;z-index:2}
.share{display:flex;flex-direction:column;gap:var(--space-12);width:100%}
.share__image,.share__targets{box-sizing:border-box;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md-lg)}
.share__image{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-16) 36px var(--space-16) var(--space-16)}
.share__thumb{flex:none;display:block;width:108px;height:192px;object-fit:cover;border-radius:var(--radius-sm);background:var(--neutral-200)}
.share__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);min-width:0}
.share__title{margin:0;font:var(--text-xl);text-transform:uppercase;color:var(--neutral-500)}
.share__text{margin:0;font:var(--text-xs);color:var(--neutral-500)}
.share__download{margin-top:var(--space-4)}
.share__targets{display:grid;grid-template-columns:repeat(6,64px);justify-content:space-between;gap:var(--space-12) var(--space-6,6px);padding:var(--space-12)}
.share__target{display:flex;flex-direction:column;align-items:center;gap:6px;box-sizing:border-box;width:64px;padding:4px;border:0;border-radius:var(--radius-md);background:none;
  color:var(--text-primary);text-decoration:none;font:inherit;cursor:pointer;transition:background-color .2s}
.share__target:hover{background:var(--button-ghost-bg-hover)}
.share__target:active{background:var(--button-ghost-bg-pressed,var(--button-ghost-bg-hover))}
.share__target:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.share__logo{display:block;width:32px;height:32px;border-radius:var(--radius-md)}
.share__logo--line{display:grid;place-items:center;box-sizing:border-box;background:var(--surface-default);border:1px solid var(--border-default)}
.share__logo--line svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.share__label{display:block;width:100%;font:var(--text-xs);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share__target.is-done .share__label{color:var(--feedback-success)}
.share-specimen{width:480px;max-width:100%;box-sizing:border-box;padding:var(--space-20);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-large-hover)}
@media (max-width:540px){.share__targets{grid-template-columns:repeat(3,1fr);justify-items:center}}