/* ============================================================
   Share strip
   ------------------------------------------------------------
   Drop a <div class="share-strip" data-share-strip></div> into
   any article and js/share-strip.js will hydrate it with X,
   LinkedIn, Copy-link, Email, and (where supported) native
   Web Share API buttons.

   Designed to sit inside article-meta / report-byline blocks.
   Uses CSS variables where they exist in tokens.css; falls
   back to neutral grey if not.
   ============================================================ */

.share-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
}

.share-strip__label {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--share-label-color, rgba(0, 0, 0, 0.55));
  margin-right: 0.25rem;
}

.share-strip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--share-btn-bg, rgba(0, 0, 0, 0.06));
  color: var(--share-btn-color, #1a1a1a);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
  position: relative;
}

.share-strip__btn:hover,
.share-strip__btn:focus-visible {
  background: var(--share-btn-bg-hover, #1436BC);
  color: #fff;
  outline: none;
}

.share-strip__btn:focus-visible {
  border-color: #fff;
  box-shadow: 0 0 0 2px #1436BC;
}

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

.share-strip__btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  pointer-events: none;
}

/* Copied-link feedback toast */
.share-strip__btn[data-copied="true"]::after {
  content: "Copied";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  animation: shareCopiedFade 1.6s ease forwards;
}

@keyframes shareCopiedFade {
  0%   { opacity: 0; transform: translate(-50%, 4px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -2px); }
}

/* The native-share button is hidden by default and revealed
   by JS only when navigator.share is available. */
.share-strip__btn--more[hidden] { display: none; }

/* Slim variant for use at the end of a long article (kept
   identical to default for now; placeholder for future tuning). */
.share-strip--end {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--share-divider, rgba(0, 0, 0, 0.08));
}

/* Dark-context override.  Articles that sit on dark backgrounds
   (e.g. the international narrative page) can opt in by adding
   class="share-strip--dark" to the element. */
.share-strip--dark {
  --share-label-color: rgba(255, 255, 255, 0.65);
  --share-btn-bg: rgba(255, 255, 255, 0.12);
  --share-btn-color: #fff;
  --share-btn-bg-hover: #fff;
  --share-divider: rgba(255, 255, 255, 0.18);
}
.share-strip--dark .share-strip__btn:hover,
.share-strip--dark .share-strip__btn:focus-visible {
  color: #1436BC;
}

/* Print: hide the share buttons entirely. */
@media print {
  .share-strip { display: none; }
}

/* ============================================================
   Cite-this-report block
   ------------------------------------------------------------
   Used on the two compass reports.  A small academic-citation
   card with format tabs (APA / Chicago / BibTeX) and copy
   buttons.
   ============================================================ */

.cite-block {
  margin: 2.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--cite-bg, rgba(20, 54, 188, 0.04));
  border-left: 3px solid #1436BC;
  border-radius: 4px;
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
}

.cite-block__heading {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #1436BC;
}

.cite-block__intro {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--cite-intro, #444);
}

.cite-block__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.cite-block__tab {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cite-tab-color, #1a1a1a);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.cite-block__tab[aria-selected="true"] {
  background: #1436BC;
  color: #fff;
  border-color: #1436BC;
}

.cite-block__tab:hover:not([aria-selected="true"]) {
  background: rgba(20, 54, 188, 0.08);
  border-color: rgba(20, 54, 188, 0.25);
}

.cite-block__panel {
  position: relative;
  display: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 0.85rem 3rem 0.85rem 0.95rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: #1a1a1a;
}

.cite-block__panel[aria-hidden="false"] {
  display: block;
}

.cite-block__copy {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(20, 54, 188, 0.08);
  color: #1436BC;
  border: none;
  border-radius: 4px;
  padding: 4px 9px;
  font-family: var(--font-body, 'Work Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.cite-block__copy:hover,
.cite-block__copy:focus-visible {
  background: #1436BC;
  color: #fff;
  outline: none;
}

.cite-block__copy[data-copied="true"]::after {
  content: " ✓";
}

@media print {
  .cite-block { background: none; padding: 0; border-left: 0; }
  .cite-block__tabs, .cite-block__copy { display: none; }
  .cite-block__panel { display: block !important; border: 0; padding: 0; }
}