/* =========================================================
   share.css — round share button (top right) + QR dialog
   ========================================================= */

.share-btn {
  position: absolute;                 /* scrolls away with the header — never floats over the buttons */
  top: max(var(--space-3), env(safe-area-inset-top));
  right: var(--space-3);
  z-index: 3;
  width: var(--tap-min);
  height: var(--tap-min);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(14,14,17,.7);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .share-btn:hover { border-color: rgba(103,232,249,.55); background: var(--surface); }
}
.share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* <dialog> gives us focus trapping, Esc-to-close and a backdrop for free */
.share {
  margin: auto;
  width: min(360px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  text-align: center;
}
.share::backdrop {
  background: rgba(5,5,7,.75);
  backdrop-filter: blur(6px);
}
.share[open] { animation: share-in .2s var(--ease); }

.share__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
}
.share__close:hover { color: var(--text); background: rgba(255,255,255,.06); }

.share__title { font-size: 1.125rem; font-weight: 600; }

.share__qr {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 20px auto;
  border-radius: 14px;              /* QR has a white background; round it like the buttons */
}

.share__url {
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--accent);
}

.share__actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.share__action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: 600 .9375rem var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
.share__action:hover { border-color: rgba(103,232,249,.55); }
.share__action[hidden] { display: none; }

@keyframes share-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}