/* Share a guide (post.html, share.py, js/share.v1.js).
   Same palette as the "at a glance" box and the action plan.
   Immutable one-year cache on /css: ship any edit under a new file name. */
.share-box {
  --sh-accent: #2b6cb0;
  --sh-ink: #252525;
  --sh-ink-muted: #595959;
  --sh-line: #dbe3ee;
  --sh-surface: #f7f9fc;
  margin: 30px 0;
  padding: 18px 20px;
  border: 1px solid var(--sh-line);
  border-radius: 6px;
  background: var(--sh-surface);
}
.share-box__title {
  margin: 0 0 4px;
  font-size: 1.15em;
  line-height: 1.4;
  color: var(--sh-ink);
}
.share-box__lead {
  margin: 0 0 14px;
  color: var(--sh-ink-muted);
}
.share-box__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share-box__list li { margin: 0; }
.share-box__btn,
.share-box__btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--sh-line);
  border-radius: 22px;
  background: #fff;
  color: var(--sh-ink);
  font: inherit;
  font-size: 0.95em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.share-box__btn:hover,
.share-box__btn:focus-visible {
  border-color: var(--sh-accent);
  color: var(--sh-accent);
  text-decoration: none;
}
.share-box__btn:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }
.share-box__btn--native {
  border-color: var(--sh-accent);
  background: var(--sh-accent);
  color: #fff;
}
.share-box__btn--native:hover,
.share-box__btn--native:focus-visible { background: #fff; }
.share-box__list li[hidden] { display: none; }
.share-box__btn i { font-size: 16px; }
.share-box__btn svg { flex: none; }
.share-box__status {
  min-height: 1.5em;
  margin: 10px 0 0;
  color: var(--sh-ink-muted);
}
/* Icons only on narrow phones: seven labelled pills would wrap to four rows. */
@media (max-width: 480px) {
  .share-box__btn .share-box__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .share-box__btn--native .share-box__text,
  .share-box__btn--copy .share-box__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}