/* Sharing (share/button.js): the button, its choices rising out of it (like the reader's auto-scroll
   button), the note, the QR code, and the picture */
.sh-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.sh-btn svg { width: 17px; height: 17px; }
.sh-btn.is-on { border-color: var(--coral); background: var(--coral); color: var(--on-gold, #221E19); }
@media (hover: hover) { .sh-btn:hover { border-color: var(--coral); } }
.sh-btn.is-small { width: 30px; height: 30px; }
.sh-btn.is-small svg { width: 15px; height: 15px; }

.sh-pop { position: fixed; z-index: 2147483300; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; width: max-content; max-width: min(320px, calc(100vw - 20px)); font-family: var(--sans); }
.sh-pop[hidden] { display: none; }
.sh-head { display: flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 86%, transparent); color: var(--bg); font-size: 12px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45); }
.sh-head b { font-weight: 800; letter-spacing: 0.04em; }
.sh-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8; }
.sh-opt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13.5px var(--sans); white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sh-opt svg { flex: none; width: 17px; height: 17px; color: var(--gold); }
.sh-opt small { font-weight: 600; color: var(--muted); }
.sh-opt.is-extra { border-color: color-mix(in srgb, var(--coral) 55%, var(--rule)); background: color-mix(in srgb, var(--coral) 12%, var(--bg-raised)); }
.sh-opt.is-main { border-color: var(--coral); background: var(--coral); color: var(--on-gold, #221E19); }
.sh-opt.is-main svg { color: currentColor; }
@media (hover: hover) { .sh-opt:hover { border-color: var(--coral); } }
.sh-pop.open > * { animation: sh-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.sh-pop.open > :nth-child(2) { animation-delay: 25ms; } .sh-pop.open > :nth-child(3) { animation-delay: 50ms; } .sh-pop.open > :nth-child(4) { animation-delay: 75ms; } .sh-pop.open > :nth-child(5) { animation-delay: 100ms; } .sh-pop.open > :nth-child(6) { animation-delay: 125ms; } .sh-pop.open > :nth-child(7) { animation-delay: 150ms; } .sh-pop.open > :nth-child(8) { animation-delay: 175ms; }
@keyframes sh-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.sh-pop.is-down.open > * { animation-name: sh-in-down; }
@keyframes sh-in-down { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }
/* the note */
.sh-pop.is-note { align-items: stretch; width: min(320px, calc(100vw - 20px)); padding: 10px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5); }
.sh-pop.is-note .sh-head { align-self: flex-start; }
.sh-note { width: 100%; box-sizing: border-box; min-height: 84px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: 16px/1.4 var(--sans); resize: vertical; outline: none; }
.sh-note:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.sh-note-l { margin: 6px 2px 10px; font: 12.5px/1.4 var(--sans); color: var(--muted); } /* (what the note is: sent above the link) */
.sh-note-acts { display: flex; justify-content: flex-end; gap: 8px; }
.sh-note-acts .sh-opt { box-shadow: none; }
/* the QR code and the picture */
.sh-sheet { position: fixed; inset: 0; z-index: 2147483300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: sh-fade 0.2s ease; font-family: var(--sans); }
.sh-sheet[hidden] { display: none; }
@keyframes sh-fade { from { opacity: 0; } }
.sh-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(380px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px 20px 20px; border-radius: 22px; background: var(--bg-raised); color: var(--ink); text-align: center; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); animation: sh-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.sh-card h2 { margin: 0 30px; font: italic 600 22px/1.2 var(--serif); }
.sh-kick { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.sh-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; }
.sh-close svg { width: 16px; height: 16px; }
.sh-qr { display: grid; place-items: center; min-width: 264px; min-height: 264px; padding: 12px; border-radius: 16px; background: #fff; }
.sh-qr img, .sh-qr canvas { display: block; width: 240px; height: 240px; }
.sh-hint { margin: 0; font-size: 13px; color: var(--muted); }
.sh-url { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 12.5px var(--sans); cursor: pointer; }
.sh-url svg { flex: none; width: 14px; height: 14px; color: var(--gold); }
.sh-wait { font-size: 13px; color: var(--muted); }
.sh-pic { display: grid; place-items: center; width: 100%; min-height: 200px; }
.sh-pic img { display: block; width: 100%; max-width: 300px; border-radius: 12px; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45); }
.sh-pic-acts { display: flex; justify-content: center; }
.sh-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2147483400; padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 90%, transparent); color: var(--bg); font: 700 13.5px var(--sans); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.sh-toast.on { opacity: 1; transform: translate(-50%, 0); }
html.sh-sheet-open, html.sh-sheet-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sh-pop.open > *, .sh-card, .sh-sheet { animation: none; } .sh-toast { transition: none; } }

/* where the buttons sit: the home page's app cards (a corner), and the apps' headers */
.hub-tile { position: relative; }
.hub-tile > .sh-btn.hub-share { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; background: color-mix(in srgb, var(--bg-raised) 90%, transparent); }
.hub-tile > .sh-btn.hub-share svg { width: 15px; height: 15px; }
.hub-tile .wit-banner-eyebrow, .hub-tile .wit-banner-title { padding-right: 40px; }
/* (the family tree: beside Find a person) */
@media (max-width: 480px) { .tr-bar .tr-find { flex: 1 1 calc(100% - 46px); } } /* (its own line, with the share button at its end) */
.dn-sheet-share { margin: 0; } /* (in the card's own top row now, beside the star and Close: churches/churches.css, .dn-sheet-head) */
.ks-share { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 68px; z-index: 3; width: 44px; height: 44px; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #fff; }
.ks-share svg { width: 19px; height: 19px; }
.gg-share { width: 40px; height: 40px; border-color: #E6D6B8; background: #fff; color: #3A2A1E; }
.tool-head .tool-share { margin-left: auto; align-self: flex-start; }
.bb-detail { position: relative; }
.bb-detail .bb-share { position: absolute; top: 12px; right: 12px; }
.bb-detail .bb-detail-head { padding-right: 36px; }
.fm-reveal-acts .sh-btn { width: 34px; height: 34px; }
.wit-back-actions .sh-btn { margin-left: auto; }
.wit-back-actions .sh-btn + .wit-back-hint { margin-left: 0; }
/* (the family tree's Close stays top right, whatever else is in its bar: kids mode's game, the share button) */
.tr-head .tr-bar { position: relative; padding-right: 74px; }
.tr-head .tr-bar .tr-close.tr-x { position: absolute !important; top: 0; right: 0; order: 0 !important; margin: 0 !important; }