/* =====================================================================
   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, no close button */
/* Prompt 31 (2026-10-27, Figma Share / Desktop 2212:101629): surface/background panel, border/subtle, Elevation/Sheet shadow. */
.share-pop{position:fixed;z-index:120;width:480px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:var(--space-20);color:var(--text-primary);
  background:var(--surface-background);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sheet);
  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(--shadow-button-hover)}
.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{position:relative;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);background:none}   /* share/image has no fill in Figma */
.share__thumb-wrap{flex:none;position:relative;width:108px;height:192px;aspect-ratio:9/16;overflow:hidden;background:var(--surface-subtle,#efe8dc)}   /* Share / Image 1080×1920 at 108×192 */
.share__thumb{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;background:transparent}
.share__thumb[hidden]{display:none}
.share__thumb-spinner{position:absolute;inset:0;margin:auto;width:28px;height:28px;border:2px solid var(--border-default,#ddd6c8);border-top-color:var(--text-primary,#14120f);border-radius:50%;opacity:0;pointer-events:none}
.share__thumb-wrap.is-loading{background:linear-gradient(180deg,var(--surface-subtle,#efe8dc),var(--surface-muted,#ddd6c8))}
.share__thumb-wrap.is-loading .share__thumb-spinner{opacity:1;animation:share-thumb-spin .7s linear infinite}
.share__thumb-wrap.is-loading .share__thumb{opacity:0}
.share__download.is-busy{opacity:.6;pointer-events:none}
@keyframes share-thumb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.share__thumb-wrap.is-loading .share__thumb-spinner{animation-duration:2s}}
.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(--text-secondary)}
.share__text{margin:0;font:var(--text-xs);color:var(--text-secondary)}
.share__download{width:206px;font:var(--text-sm)}   /* download-image 206 × 40, text-sm (Figma 864:3979) */
.share__targets{display:grid;grid-template-columns:repeat(6,64px);justify-content:space-between;gap:var(--space-6);padding:var(--space-12)}
.share__target{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);box-sizing:border-box;width:64px;padding:var(--space-4);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)}
/* brand tile: the 20px logo centred on the brand colour (Share Target target/icon); brand colours are brand art, not tokens */
.share__logo--brand{display:grid;place-items:center;overflow:hidden;background:var(--brand,var(--neutral-950))}
.share__logo--brand img{display:block;width:20px;height:20px;border-radius:var(--radius-sm)}
.share__logo--whatsapp{--brand:#00e510}.share__logo--facebook{--brand:#1877f2}.share__logo--x{--brand:#1c1c1b}.share__logo--linkedin{--brand:#007ebb}
.share__logo--reddit{--brand:#ff4500}.share__logo--telegram{--brand:#00b0f2}.share__logo--pinterest{--brand:#ff0000}.share__logo--tiktok{--brand:#000000}
.share__logo--threads{background:linear-gradient(90deg,#faad4f 0%,#dd2a7b 35%,#9537b0 62%,#515bd4 100%)}
.share__logo--instagram{background:linear-gradient(45deg,#faad4f 14.6%,#dd2a7b 39.4%,#9537b0 58.5%,#515bd4 85.4%)}
/* close: no visible close in Figma (outside press, Escape, swipe); keyboard and screen-reader users get this one, shown only on keyboard focus */
.share__close{position:absolute;top:var(--space-8);right:var(--space-8);display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-md);
  background:var(--surface-default);color:var(--text-primary);cursor:pointer;opacity:0;pointer-events:none}
.share__close:focus-visible{opacity:1;pointer-events:auto;outline:none;box-shadow:var(--shadow-focus-ring)}
.share__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.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}}

/* Add to calendar menu (Figma Game Day / Add to calendar menu 1019:29086): 320 wide, 12px padding, 4px gap, rows 36 high */
.cal-pop{position:fixed;z-index:200;width:320px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:var(--space-12);display:flex;flex-direction:column;gap:var(--space-4);
  background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-card-soft);
  opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .22s var(--ease-out,ease)}
.cal-pop[hidden]{display:none}
.cal-pop.is-open{opacity:1;transform:none}
.cal-pop__title{margin:0;font:var(--text-lg);color:var(--text-primary)}
.cal-pop__item{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-8);height:36px;box-sizing:border-box;padding:var(--space-8) var(--space-12);border:0;border-radius:var(--radius-md);background:none;
  font:var(--text-xs);color:var(--text-primary);text-align:left;cursor:pointer;transition:background-color .2s}
.cal-pop__item img{display:block;flex:none;width:24px;height:24px;border-radius:4px}
.cal-pop__item--file{padding:var(--space-8) var(--space-16)}
.cal-pop__item:hover{background:var(--button-ghost-bg-hover)}
.cal-pop__item:active{background:var(--button-ghost-bg-pressed,var(--button-ghost-bg-hover))}
.cal-pop__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.btn.is-cal-open,.event-card__act.is-cal-open{background:var(--button-secondary-bg-hover);border-color:var(--button-secondary-border-hover);box-shadow:var(--shadow-button-hover)}

/* Simple variant (Figma Share/Desktop 1273:50229): Watch Guide titles we don't produce. Targets card only, 4 per row, 10 targets (no image card, no Embed). */
.share-pop--simple{width:auto;max-width:calc(100vw - 32px)}
.share--simple{width:auto}
.share--simple .share__targets{grid-template-columns:repeat(4,64px);justify-content:start;gap:var(--space-6,var(--space-6))}
.share-specimen--simple{width:auto;display:inline-block}

/* Phones (≤640): Share is a bottom sheet (Figma Stories / App / Article / Share sheet 1925:63164 · Share / Desktop Theme=Share,
   State=Mobile 813:23449): universal floating sheet (8px side / bottom inset), radius xl, 12/16 padding, 12 gap, grab handle 130×4,
   story preview centred, Download under it, targets in one sideways row (64 wide, 48 round icons); Copy link first, More last.
   Scrim behind; tap outside, scroll or Escape closes. Desktop title / helper copy stay hidden on the sheet. */
.share__grab,.share__target--more,.share__target--app{display:none}
.share-scrim{position:fixed;inset:0;z-index:119;background:rgba(10,8,6,.4);opacity:0;transition:opacity .2s}
.share-scrim.is-open{opacity:1}
@media (max-width:640px){
  .share-pop.is-sheet{left:var(--space-8);right:var(--space-8);bottom:calc(var(--space-8) + env(safe-area-inset-bottom,0px));top:auto;width:auto;max-width:none;
    max-height:calc(100dvh - 16px - env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;
    padding:var(--space-12) var(--space-16) var(--space-16);background:var(--surface-background);border-color:var(--border-subtle);border-radius:var(--radius-xl);
    box-shadow:0 -8px 32px 0 rgba(0,0,0,.18);transform:translateY(24px)}
  .share-pop.is-sheet.is-open{transform:none}
  .share-pop.is-sheet .share{gap:var(--space-12);align-items:center}
  .share-pop.is-sheet{touch-action:pan-x pan-y}
  .share-pop.is-sheet .share__grab{display:block;flex:none;width:130px;height:4px;margin:var(--space-8) auto var(--space-12);border-radius:var(--space-2);background:var(--border-strong);cursor:grab}
  .share-pop.is-sheet .share__image{flex-direction:column;align-items:center;justify-content:center;gap:var(--space-12);padding:0;background:none;border:0;width:100%}
  .share-pop.is-sheet .share__thumb-wrap{width:auto;height:auto;max-height:min(320px,calc(100dvh - 360px));aspect-ratio:9/16;background:var(--surface-subtle,#efe8dc)}
  .share-pop.is-sheet .share__thumb{width:100%;height:100%;object-fit:cover;background:none;border-radius:0}
  .share-pop.is-sheet .share__copy{display:flex;align-items:stretch;width:min(280px,100%)}
  .share-pop.is-sheet .share__title,.share-pop.is-sheet .share__text{display:none}
  .share-pop.is-sheet .share__download{width:100%;justify-content:center}
  .share-pop.is-sheet .share__targets{display:flex;gap:var(--space-8);width:calc(100% + 2 * var(--space-16));margin-inline:calc(-1 * var(--space-16));padding:0 var(--space-16) var(--space-4);
    background:none;border:0;border-radius:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .share-pop.is-sheet .share__targets::-webkit-scrollbar{display:none}
  .share-pop.is-sheet .share__target{flex:none}
  .share-pop.is-sheet .share__target[data-share-target="copy"]{order:-1}
  .share-pop.is-sheet .share__target--more{display:flex;order:99}
  /* phone order (Figma 2142:99160): Copy link, WhatsApp, Instagram Stories, Facebook, TikTok, Messages (SMS), X, Threads, Telegram, More */
  .share-pop.is-sheet .share__target--app{display:flex}
  .share-pop.is-sheet .share__target[data-share-target="sms"]{order:5}
  .share-pop.is-sheet .share__target[data-share-target="x"]{order:6}.share-pop.is-sheet .share__target[data-share-target="threads"]{order:7}.share-pop.is-sheet .share__target[data-share-target="telegram"]{order:8}
  .share-pop.is-sheet .share__target[data-share-target="embed"],.share-pop.is-sheet .share__target[data-share-target="linkedin"],.share-pop.is-sheet .share__target[data-share-target="reddit"],
  .share-pop.is-sheet .share__target[data-share-target="pinterest"],.share-pop.is-sheet .share__target[data-share-target="email"]{display:none}
  .share-pop.is-sheet .share__target:hover{background:none}
  .share-pop.is-sheet .share__logo{width:48px;height:48px;border-radius:var(--radius-full)}
  .share-pop.is-sheet.is-dragging{transition:none}
  .share-pop.is-sheet .share__logo--line{background:var(--surface-elevated);border-color:var(--border-default)}
  .share-pop.is-sheet .share__logo--line svg{width:20px;height:20px}
}
/* Phones (<600, app view; Prompt 18): Add to calendar opens as a bottom sheet (the card ⋮ menu sheet lives in card-menu.css since Prompt 28) (radius xl, 8 inset, the page dims
   behind them through a spread shadow; same placement as the Share sheet) */
@media (max-width:599px){
  .cal-pop:not(.cal-pop--static){left:var(--space-8)!important;right:var(--space-8)!important;top:auto!important;bottom:calc(var(--space-8) + env(safe-area-inset-bottom,0px))!important;
    width:auto;max-width:none;padding:var(--space-12) var(--space-8);background:var(--surface-background);border-color:var(--border-subtle);border-radius:var(--radius-xl);
    box-shadow:0 0 0 100vmax rgba(10,8,6,.4),0 -8px 32px 0 rgba(0,0,0,.18);transform:translateY(24px)}
  .cal-pop:not(.cal-pop--static).is-open{transform:none}
  .cal-pop:not(.cal-pop--static)::before{content:"";display:block;width:130px;height:4px;flex:none;margin:0 auto var(--space-8);border-radius:var(--space-2);background:var(--border-strong)}
  .cal-pop .cal-pop__item,.card-menu .card-menu__item{min-height:44px}
}