/* Share Tellz (KB 55; Paper page 12): the gift card, the friends list, the share-sheet line, the once-only card at the end of
   the report and the sign-up pill. Ember-soft is a background only; the action stays .ti-primary. */
.gift-ic { width: 100%; height: 100%; display: block; }
.st .st-tile.gift-tile { background: var(--color-ember-soft, #FAEFED); color: #27282C; }
.st .st-tile.gift-tile .gift-ic { width: 20px; height: 20px; }
.gift-circle { width: 52px; height: 52px; border-radius: 50%; background: #FFFFFF; color: #27282C; display: grid; place-items: center; flex: none; box-shadow: 0 1px 0 #E9D6D2; }
.gift-circle .gift-ic { width: 28px; height: 28px; }

.st .gift-card { padding: 0; overflow: hidden; background: linear-gradient(170deg, #FAEFED 0%, #FBF3EC 38%, var(--ti-surface, #FFFFFF) 62%); }
.gift-band { padding: 24px 20px 20px; display: grid; gap: 12px; }
.gift-band h2 { margin: 2px 0 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ti-ink, #1D1D1F); }
.gift-band p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ti-ink, #3A3A3F); opacity: .86; }
.gift-actions { padding: 4px 20px 20px; display: grid; gap: 12px; }
.gift-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 6px 6px 6px 16px; border-radius: 16px; background: var(--ti-surface-2, #F2F2F5); font-size: 16px; font-weight: 600; color: var(--ti-ink, #1D1D1F); overflow-wrap: anywhere; }
.gift-copy { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ti-surface, #FFFFFF); color: var(--ti-ink, #1D1D1F); font: 500 14px/18px Manrope, sans-serif; cursor: pointer; }
.gift-primary { width: 100%; }

.gift-friends-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px 8px; }
.gift-friends-head .st-label { margin: 0; }
.gift-friends-head > span { font-size: 14px; color: var(--ti-muted, #6E6E73); }
.gift-friend { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.gift-friend + .gift-friend { border-top: 1px solid var(--ti-line-2, #E5E5EA); }
.gift-face { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--ti-fill, #ECECF0); display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--ti-ink, #1D1D1F); }
.gift-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gift-who b { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ti-ink, #1D1D1F); overflow-wrap: anywhere; }
.gift-who span { font-size: 14px; line-height: 20px; color: var(--ti-muted, #6E6E73); }
.gift-state { flex: none; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--ti-surface-2, #F2F2F5); color: var(--ti-muted, #6E6E73); font-size: 13px; font-weight: 500; }
.gift-state.jade { background: var(--ti-jade-soft, #EDF5F0); color: var(--ti-jade-text, #286A5A); }
.gift-empty { margin: 14px 0; }
.gift-rules { margin: 12px 4px; }
.gift-company { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; font-size: 15px; color: var(--ti-ink, #1D1D1F); cursor: pointer; }
.gift-company input, .gift-line input { width: 22px; height: 22px; flex: none; accent-color: #27282C; }

/* The share sheet's one quiet line. */
.gift-line { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0; font-size: 14px; line-height: 20px; color: var(--muted, #5C6068); cursor: pointer; }
.gift-line span { flex: 1; }
.gift-line .gift-ic { width: 20px; height: 20px; flex: none; color: var(--muted, #6E6E73); }

/* After a good week, once: inside the report's end. */
.gift-moment { margin: 16px 0 4px; padding: 20px; border-radius: 24px; display: grid; gap: 12px; text-align: start; background: linear-gradient(160deg, #FAEFED 0%, #FBF3EC 70%, #FFF8F2 100%); }
.gift-moment-top { display: flex; justify-content: space-between; align-items: flex-start; }
.gift-moment .gift-circle { width: 44px; height: 44px; box-shadow: none; }
.gift-moment .gift-circle .gift-ic { width: 24px; height: 24px; }
.gift-later { min-height: 44px; padding: 0 8px; border: 0; background: none; color: #6E6E73; font: 500 14px/18px Manrope, sans-serif; cursor: pointer; }
.gift-moment h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; color: #1D1D1F; }
.gift-moment-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid #D9C7C3; border-radius: 999px; background: #FFFFFF; color: #1D1D1F; font: 600 15px/20px Manrope, sans-serif; cursor: pointer; }
.gift-moment-btn .gift-ic { width: 20px; height: 20px; }
.gift-moment p { margin: 0; font-size: 15px; line-height: 22px; color: #3A3A3F; }

/* The sign-up pill. */
.gift-pill { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--color-ember-soft, #FAEFED); color: #5C2E2C; font-size: 14px; font-weight: 500; line-height: 20px; }
.gift-pill .gift-ic { width: 18px; height: 18px; flex: none; color: #27282C; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st .gift-card { background: linear-gradient(170deg, #3A2624 0%, #2A2120 38%, var(--ti-surface, #1C1C1E) 62%); }
  :root:not([data-theme="light"]) .gift-circle { background: #2C2C2E; color: #F5F5F7; box-shadow: none; }
  :root:not([data-theme="light"]) .st .st-tile.gift-tile { background: #3A2624; color: #F5F5F7; }
  :root:not([data-theme="light"]) .gift-moment { background: linear-gradient(160deg, #3A2624 0%, #2E2220 55%, #241F1E 100%); }
  :root:not([data-theme="light"]) .gift-moment h3 { color: #F5F5F7; }
  :root:not([data-theme="light"]) .gift-moment-btn { background: #2C2C2E; border-color: #48484A; color: #F5F5F7; }
  :root:not([data-theme="light"]) .gift-moment p, :root:not([data-theme="light"]) .gift-later { color: #D2D2D7; }
  :root:not([data-theme="light"]) .gift-pill { background: rgba(180, 71, 68, .22); color: #E3C9C4; }
  :root:not([data-theme="light"]) .gift-pill .gift-ic { color: #F5F5F7; }
  :root:not([data-theme="light"]) .gift-company input, :root:not([data-theme="light"]) .gift-line input { accent-color: #F5F5F7; }
}
:root[data-theme="dark"] .st .gift-card { background: linear-gradient(170deg, #3A2624 0%, #2A2120 38%, var(--ti-surface, #1C1C1E) 62%); }
:root[data-theme="dark"] .gift-circle { background: #2C2C2E; color: #F5F5F7; box-shadow: none; }
:root[data-theme="dark"] .st .st-tile.gift-tile { background: #3A2624; color: #F5F5F7; }
:root[data-theme="dark"] .gift-moment { background: linear-gradient(160deg, #3A2624 0%, #2E2220 55%, #241F1E 100%); }
:root[data-theme="dark"] .gift-moment h3 { color: #F5F5F7; }
:root[data-theme="dark"] .gift-moment-btn { background: #2C2C2E; border-color: #48484A; color: #F5F5F7; }
:root[data-theme="dark"] .gift-moment p, :root[data-theme="dark"] .gift-later { color: #D2D2D7; }
:root[data-theme="dark"] .gift-pill { background: rgba(180, 71, 68, .22); color: #E3C9C4; }
:root[data-theme="dark"] .gift-pill .gift-ic { color: #F5F5F7; }
:root[data-theme="dark"] .gift-company input, :root[data-theme="dark"] .gift-line input { accent-color: #F5F5F7; }