/* 本节链接标记的样式。刻意用 currentColor：各卷有深浅两套皮肤，
   写死墨青会在深色底上消失。提示条用赭金胶囊，浅底深底都压得住。
   提示条排成行内而不是绝对定位：节头外层容器有 overflow 裁剪的，绝对定位会被切掉。 */

h1 .wh-share, h2 .wh-share, h3 .wh-share, h4 .wh-share {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: .62em;
  line-height: 1;
  vertical-align: .18em;
  margin-inline-start: .5em;
  padding: .28em .5em .32em;
  border: 1px solid currentColor;
  border-radius: .45em;
  background: none;
  color: currentColor;
  opacity: .18;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
}

h1:hover .wh-share, h2:hover .wh-share, h3:hover .wh-share, h4:hover .wh-share,
.wh-share:hover, .wh-share:focus-visible { opacity: .95; transform: translateY(-1px); }
.wh-share:focus-visible { outline: 2px solid rgb(179, 146, 79); outline-offset: 2px; }
.wh-share:active { transform: translateY(0); }

.wh-share-tip {
  display: inline-block;
  margin-inline-start: .55em;
  padding: .18em .6em .22em;
  border-radius: 999px;
  background: rgb(179, 146, 79);
  color: rgb(251, 247, 238);
  font-size: .58em;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: .22em;
  letter-spacing: .02em;
  opacity: 1;
  transition: opacity .4s ease;
}
.wh-share-tip.is-fail { background: rgb(143, 59, 46); }
.wh-share-tip.is-out { opacity: 0; }

/* 触屏没有 hover，标记压得太淡等于没有 */
@media (hover: none) {
  .wh-share { opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
  .wh-share, .wh-share-tip { transition: none; }
}