/* static/css/share.css
   Generic "share link" / "share image" button pair (templates/core/
   _share_button.html) for any @public_league_view page - same visual
   language and popover mechanics as static/css/player_profile.css's
   .pl-share-* rules (templates/players/_share_button.html), renamed
   .hl-share-* and laid out inline (not position:absolute) since this
   component drops into a page's own flex header row (.hl-section-head,
   .hl-header-band, .stl-header-row, .gd-hero-top) rather than always
   floating over a hero photo like the player page's version.

   Merged-pill treatment (promoted to the shared default here): originally
   two separately-bordered circular buttons: League Home's masthead
   (.lh-masthead-actions, static/css/league_home.css) and Season Stat
   Leaders' per-category panes (.stl-pane-head, static/css/stat_leaders.css)
   each independently picked up a "one seamless pill, hairline divider at
   the midpoint" restyle per direct user request, which left every OTHER
   page still on this file's old plain-circular-button default - visibly
   inconsistent since every page's share button is this same shared
   component. Rather than copy that scoped override into every remaining
   page's own CSS file (Standings/Sponsors/Team Detail/Game Detail/
   Schedule), it's promoted here as the actual default, so every page
   using core/_share_button.html without its own override gets it for
   free, and any future page does too without needing a copy-pasted
   override of its own. League Home's masthead version stays a deliberate
   exception (transparent/ghost + drop-shadow, since it floats over an
   arbitrary bright gradient this flat default was never meant to handle),
   as does the player page's own .pl-share-* (floats over an arbitrary
   uploaded photo, same reasoning) - both already more specific selectors,
   so they keep overriding this default unaffected. Season Stat Leaders'
   own now-identical .stl-pane-head override was removed as dead weight
   duplicating this exact default. */
.hl-share-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px;
}

.hl-share {
  position: relative;
}

/* Hairline divider marking the midpoint between the two actions - sits
   exactly on the seam between the two adjacent .hl-share wrappers (gap: 0
   above, so `right: 0` on the first one lands right at that seam). */
.hl-share:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--border-strong);
}

.hl-share:first-child .hl-share-btn {
  border-radius: 999px 0 0 999px;
}

.hl-share:last-child .hl-share-btn {
  border-radius: 0 999px 999px 0;
}

.hl-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 0;
  padding: 7px 9px;
  line-height: 0;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.hl-share-btn svg {
  width: 16px;
  height: 16px;
}

.hl-share-btn:hover {
  background: var(--bg-raised);
  color: var(--primary);
}

.hl-share-btn:active {
  transform: scale(0.94);
}

.hl-share-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.hl-share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 250px;
  max-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
  padding: var(--space-2);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hl-share-option {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hl-share-option-inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hl-share-option:hover {
  background: var(--bg-raised);
  color: var(--primary);
}

.hl-share-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.hl-share-option svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hl-share-hint {
  flex-basis: 100%;
  padding-left: 26px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: normal;
}

/* Below 560px, anchoring the popover to the trigger button (`right: 0`,
   or centering under it) still overflows the viewport whenever the
   button itself sits near an edge - e.g. season_stat_leaders.html's
   header row switches to base.css's .hl-section-head column/stretch
   layout below 481px, which left-aligns the share buttons near x=16px;
   a 250-280px popover anchored or centered there runs off the LEFT edge
   of the screen instead of appearing "in the middle". Fixed-position,
   centered on the viewport itself (not the trigger) sidesteps the
   problem entirely regardless of where the trigger ends up on any given
   page/breakpoint - it always renders centered on screen. `@click.outside`
   (templates/core/_share_button.html's x-data) still works: it checks DOM
   containment, not visual position, and the popover stays a DOM
   descendant of its `.hl-share` trigger even though position:fixed lifts
   it out of that trigger's visual flow. */
@media (max-width: 560px) {
  .hl-share-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: calc(100vw - 48px);
    max-width: 320px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    /* Above the mobile bottom nav bar (base.css, z-index: 40) and
       back-to-top button (back-to-top.css, z-index: 35) - this popover is
       viewport-centered at this width, not scoped under its trigger's own
       stacking context, so it needs to out-rank every other fixed
       element on the page, not just its own ancestry. */
    z-index: 50;
  }
}

/* ─── Share image modal body (templates/core/_share_preview_body.html) ───
   "Share image" - opened directly by the photo button above via
   core/_modal.html (uid=preview_uid, size="lg"). One real preview (every
   apps.core.share_cards renderer besides render_player_card has a single
   fixed design, so no gallery rail like static/css/player_profile.css's
   .pl-cardpicker-rail is needed here) plus Download/Share actions. ────── */
.hl-share-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Wrapper carries the skeleton shimmer (apps.core.share_cards renders the
   PNG server-side on every request, so this is never instant) - the img
   itself fades in over it once loaded rather than popping in abruptly or
   showing a blank/broken box while it's still in flight. */
.hl-share-preview-img-wrap {
  display: block;
  position: relative;
  width: 100%;
  /* Every share-card PNG this modal shows (apps.core.share_cards) is
     rendered at a fixed 1200x630 - reserving that ratio up front means
     the modal doesn't visibly grow/reflow once the image finishes
     loading. */
  aspect-ratio: 1200 / 630;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}

@media (prefers-reduced-motion: no-preference) {
  .hl-share-preview-img-wrap:has(img:not(.is-loaded))::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--bg-card) 30%, var(--bg-raised) 50%, var(--bg-card) 70%);
    background-size: 200% 100%;
    animation: hl-img-skeleton 1.4s ease-in-out infinite;
  }
}

@keyframes hl-img-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.hl-share-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hl-share-preview-img.is-loaded {
  opacity: 1;
}

.hl-share-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hl-share-preview-actions .hl-btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* ─── QR code modal body (templates/core/_qr_preview_body.html,
   templates/players/_qr_preview_body.html) ─────────────────────────────
   Own wrapper, not a reuse of .hl-share-preview-img-wrap above: that one
   hardcodes the 1200x630 share-card ratio, but apps.core.qr_codes.
   render_qr_code is a fixed 640x640 square, always white-background
   (deliberately NOT themed - see that module's own docstring on why a
   QR code's contrast is functional, not cosmetic) - stretching it to a
   1200x630 box would either crop the code's own quiet-zone border or
   letterbox oddly. Capped max-width so a "lg" modal doesn't blow the
   code up to an ungainly size on desktop; white background so a light
   PNG doesn't flash oddly against .hl-share-preview-img-wrap's own
   --bg-card skeleton color while loading. */
.hl-qr-preview-img-wrap {
  display: block;
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.hl-qr-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid var(--border);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hl-qr-preview-img.is-loaded {
  opacity: 1;
}

.hl-qr-preview-caption {
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ─── Orientation-picker modal body (templates/core/
   _orientation_picker_body.html) ───────────────────────────────────────
   "Share image" 2-up variant, for every page whose share-card view now
   also serves a `?orientation=portrait` sibling (standings/leaders/
   league/sponsors/team/schedule/game - apps.core.share_cards'
   render_*_portrait functions). Generalizes static/css/player_profile.css's
   .pl-cardpicker-* rail (same rail/card/skeleton-shimmer treatment,
   reusing this file's own hl-img-skeleton keyframes above rather than
   redefining them) - own .hl-cardpicker-* names, not a shared class with
   .pl-cardpicker-*, so the player page's own picker (which floats a
   4-style rail over a hero photo) stays completely independent and this
   generic 2-item version can't accidentally regress it. ─────────────── */
.hl-cardpicker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hl-cardpicker-rail {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: var(--space-2) var(--space-1) var(--space-3);
  margin: calc(var(--space-2) * -1) calc(var(--space-1) * -1) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.hl-cardpicker-rail::-webkit-scrollbar { height: 6px; }
.hl-cardpicker-rail::-webkit-scrollbar-track { background: transparent; }
.hl-cardpicker-rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.hl-cardpicker-rail::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.hl-cardpicker-card {
  flex: 0 0 auto;
  width: min(78vw, 300px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-raised);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hl-cardpicker-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55); }
.hl-cardpicker-card:active { transform: translateY(-2px) scale(0.98); }
.hl-cardpicker-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hl-cardpicker-card.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--bg-raised)); }

.hl-cardpicker-img-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}

/* Portrait's own aspect - apps.core.share_cards._PORTRAIT_WIDTH/
   _PORTRAIT_HEIGHT (1080x1350), a fixed modifier on the same wrap rather
   than a second component, since every other rule (skeleton shimmer,
   fade-in, border-radius) is identical between the two. */
.hl-cardpicker-img-wrap--portrait { aspect-ratio: 1080 / 1350; }

@media (prefers-reduced-motion: no-preference) {
  .hl-cardpicker-img-wrap:has(img:not(.is-loaded))::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--bg-card) 30%, var(--bg-raised) 50%, var(--bg-card) 70%);
    background-size: 200% 100%;
    animation: hl-img-skeleton 1.4s ease-in-out infinite;
  }
}

.hl-cardpicker-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hl-cardpicker-img-wrap img.is-loaded { opacity: 1; }

.hl-cardpicker-check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hl-cardpicker-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.hl-cardpicker-hint { font-size: 12px; color: var(--text-muted); }

.hl-cardpicker-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hl-cardpicker-actions .hl-btn { flex: 1 1 auto; justify-content: center; }