/* Share to Instagram Stories — sheet + reader quote pill (2026-10-09).
 * Pairs with js/share-card.js. Tokens are the Copper brand (style.css :root).
 */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4-Italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

.share-sheet-root { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.share-sheet-root *, .share-sheet-root *::before, .share-sheet-root *::after, .share-quote-pill { box-sizing: border-box; }
.share-sheet-root.is-open { pointer-events: auto; }
html.share-sheet-open { overflow: hidden; }

.share-sheet-scrim {
  position: absolute; inset: 0;
  background: rgba(8, 6, 5, .66);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s ease;
}
.share-sheet-root.is-open .share-sheet-scrim { opacity: 1; }

.share-sheet {
  position: absolute; left: 50%; bottom: 0;
  width: min(440px, 100%);
  transform: translate(-50%, 100%);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  background: #1F1A15;
  border: 1px solid #332C25; border-bottom: 0;
  border-radius: 28px 28px 0 0;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  color: #F1E8D8;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .45);
}
.share-sheet-root.is-open .share-sheet { transform: translate(-50%, 0); }
@media (min-width: 720px) {
  .share-sheet {
    bottom: 50%; border-radius: 24px; border-bottom: 1px solid #332C25;
    padding-bottom: 24px;
    transform: translate(-50%, calc(50% + 24px)); opacity: 0;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
  }
  .share-sheet-root.is-open .share-sheet { transform: translate(-50%, 50%); opacity: 1; }
  .share-sheet-grip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .share-sheet, .share-sheet-scrim { transition: none; }
}

.share-sheet-grip { width: 36px; height: 5px; border-radius: 3px; background: #4a4037; margin: 0 auto 14px; }
.share-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-sheet-title {
  margin: 0; font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-sheet-title em { font-style: italic; font-weight: 500; color: #C9A26A; }
.share-sheet-x {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #272019; border: 1px solid #332C25; color: #B3A898;
}
.share-sheet-x:hover { color: #F1E8D8; }
.share-sheet-hint { margin: 4px 0 0; font-size: 12px; font-weight: 500; color: #B3A898; }

.share-sheet-cards { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.share-sheet-cards[data-count="1"] .share-sheet-card { width: 132px; }
.share-sheet-card {
  width: 30%; max-width: 116px; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 9px; color: #B3A898;
  font: 500 11.5px/1 var(--font-ui, system-ui, sans-serif);
}
.share-sheet-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  border-radius: 12px; overflow: hidden; outline: 1px solid #332C25;
  transition: outline-color .15s ease, box-shadow .15s ease, opacity .15s ease;
  opacity: .62; background: #171310;
}
.share-sheet-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-sheet-thumb.is-loading img { visibility: hidden; }
.share-sheet-thumb.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(241, 232, 216, .06) 50%, transparent 80%) #1b1612;
  background-size: 200% 100%; animation: share-shimmer 1.2s linear infinite;
}
@keyframes share-shimmer { to { background-position: -200% 0; } }
.share-sheet-card.is-selected { color: #F1E8D8; font-weight: 600; }
.share-sheet-card.is-selected .share-sheet-thumb {
  opacity: 1; outline: 3px solid #C9A26A; outline-offset: 0;
  box-shadow: 0 0 0 7px rgba(201, 162, 106, .18);
}
.share-sheet-card:focus-visible { outline: none; }
.share-sheet-card:focus-visible .share-sheet-thumb { outline: 3px solid #F1E8D8; }

.share-sheet-primary {
  margin-top: 20px; width: 100%; height: 54px; border-radius: 27px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #C9A26A; color: #171310;
  font: 650 16px/1 var(--font-ui, system-ui, sans-serif);
  box-shadow: 0 10px 24px rgba(201, 162, 106, .22);
  transition: filter .15s ease, opacity .15s ease;
}
.share-sheet-primary:hover { filter: brightness(1.06); }
.share-sheet-primary:disabled { opacity: .55; cursor: progress; box-shadow: none; }

.share-sheet-row { display: flex; justify-content: center; gap: 22px; margin-top: 18px; }
.share-sheet-tgt {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px;
  background: none; border: 0; padding: 0; cursor: pointer; color: #B3A898;
  font: 500 11px/1.1 var(--font-ui, system-ui, sans-serif);
}
.share-sheet-tgt span {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #272019; border: 1px solid #332C25; color: #F1E8D8;
  transition: border-color .15s ease;
}
.share-sheet-tgt:hover span { border-color: #C9A26A; }
.share-sheet-tgt:disabled { opacity: .5; cursor: progress; }
.share-sheet-tgt[hidden] { display: none; }

/* Reader: appears over a selected passage. */
.share-quote-pill {
  position: fixed; z-index: 900; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px 0 13px; border-radius: 19px; cursor: pointer;
  background: #171310; color: #F1E8D8; border: 1px solid rgba(201, 162, 106, .45);
  font: 600 13px/1 var(--font-ui, system-ui, sans-serif);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.share-quote-pill svg { color: #C9A26A; width: 17px; height: 17px; }
.share-quote-pill[hidden] { display: none; }