/* Share as a page (js/share.js): a small picture of the page, then the
   choices. */

.share-dialog .dialog-body { gap: 16px; }
.share-hero { display: flex; align-items: center; gap: 18px; }
.share-hero-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.share-hero-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.share-hero-facts { color: var(--text2); font-size: 13px; }
.share-hero-note { color: var(--text3); font-size: 12.5px; }

/* The page in miniature: it lifts in, as a sheet laid on the desk. */
.share-sheet {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 96px;
  height: 124px;
  padding: 11px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  box-shadow: 0 10px 24px -14px var(--shadow-cast), 0 1px 0 var(--border);
  animation: share-lift var(--dur-slow) var(--ease-out) both;
  overflow: hidden;
}
.share-sheet-brand { display: flex; align-items: center; gap: 3px; font-size: 6px; font-weight: 600; color: var(--text3); }
.share-sheet-brand img { width: 8px; height: 8px; border-radius: 2px; }
.share-sheet-title {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.share-sheet-rule { height: 1px; background: var(--border); margin: 1px 0 2px; }
.share-sheet-ask { align-self: flex-end; width: 52%; height: 9px; border-radius: 5px; background: var(--user-bubble); }
.share-sheet-line { height: 4px; border-radius: 2px; background: var(--border-strong); opacity: 0.7; }
.share-sheet-line.short { width: 64%; }
@keyframes share-lift {
  from { opacity: 0; transform: translateY(6px) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}

.share-what { display: flex; flex-direction: column; gap: 10px; }