/* TSC Share button + dialog — reusable across almanac pages.
   Themed per-page via CSS custom properties:
     --tsc-share-accent       primary glow/accent color
     --tsc-share-accent-dim   hover/border tint (defaults to accent)
     --tsc-share-bg           dialog background
     --tsc-share-text         dialog body text
     --tsc-share-text-mute    secondary text
     --tsc-share-line         border/divider
   Defaults below give an editorial dark look that works on every template. */

:root {
  --tsc-share-accent: #dc2626;
  --tsc-share-accent-dim: rgba(127, 29, 29, 0.25);
  --tsc-share-bg: #111111;
  --tsc-share-card: #141414;
  --tsc-share-text: #f3f4f6;
  --tsc-share-text-mute: #9ca3af;
  --tsc-share-line: #272727;
  --tsc-share-gold: #e8c889;
  --tsc-share-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --tsc-share-sans: 'Inter', system-ui, sans-serif;
  --tsc-share-serif: 'DM Serif Display', Georgia, serif;
}

/* Floating share pill — bottom-right, above the safe-area inset so PWA users
   (Add-to-Home-Screen, where the browser share button isn't available) get a
   clear way to share the page. Desktop renders it at the same corner; the
   pill scales down on phones via the mobile media query below. */
.tsc-share-btn {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(14, 22, 32, .92);
  border: 1px solid var(--tsc-share-gold);
  color: var(--tsc-share-gold);
  font-family: var(--tsc-share-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .7rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.tsc-share-btn:hover {
  color: #fff;
  border-color: var(--tsc-share-accent);
  background: var(--tsc-share-accent-dim);
  transform: translateY(-1px);
}
.tsc-share-btn svg { width: 14px; height: 14px; }
.tsc-share-btn[hidden] { display: none; }

@media (max-width: 640px) {
  .tsc-share-btn {
    padding: .65rem .85rem;
    font-size: .6rem;
    letter-spacing: .2em;
    right: calc(.75rem + env(safe-area-inset-right));
    bottom: calc(.75rem + env(safe-area-inset-bottom));
  }
  .tsc-share-btn svg { width: 13px; height: 13px; }
}

.tsc-share-dialog {
  background: var(--tsc-share-card);
  border: 1px solid var(--tsc-share-line);
  color: var(--tsc-share-text);
  max-width: 460px;
  width: calc(100% - 2rem);
  padding: 1.75rem 1.75rem 1.5rem;
  text-align: center;
  font-family: var(--tsc-share-sans);
  border-radius: 2px;
}
.tsc-share-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
}

.tsc-share-kicker {
  font-family: var(--tsc-share-mono);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tsc-share-accent);
  margin-bottom: .65rem;
}
.tsc-share-title {
  font-family: var(--tsc-share-serif);
  font-size: 1.6rem;
  color: var(--tsc-share-text);
  margin-bottom: .4rem;
  line-height: 1.1;
}
.tsc-share-sub {
  font-size: .82rem;
  color: var(--tsc-share-text-mute);
  margin-bottom: 1.4rem;
}
.tsc-share-preview {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  background: #0a0a0a;
  border: 1px solid var(--tsc-share-line);
  margin-bottom: 1.25rem;
  object-fit: contain;
}

.tsc-share-actions {
  display: flex;
  gap: .6rem;
}
.tsc-share-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: transparent;
  border: 1px solid var(--tsc-share-line);
  color: var(--tsc-share-text);
  font-family: var(--tsc-share-mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .8rem .6rem;
  border-radius: 2px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.tsc-share-action:hover {
  color: #fff;
  border-color: var(--tsc-share-accent);
  background: var(--tsc-share-accent-dim);
}
.tsc-share-action.is-success {
  color: var(--tsc-share-gold);
  border-color: var(--tsc-share-gold);
}
.tsc-share-close {
  margin-top: 1rem;
  background: transparent;
  border: none;
  color: var(--tsc-share-text-mute);
  font-family: var(--tsc-share-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
.tsc-share-close:hover { color: var(--tsc-share-accent); }