/* ============================================================
   THE LINEUP — SHARE EVERYWHERE boards
   Supplemental components on system.css (v2 design system):
   OG/social cards, iMessage-unfurl mock, share button + sheet.
   ============================================================ */

/* ---------- the SHARE affordance (sits next to Follow) ---------- */
.share-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:11px; padding:12px 16px; font:500 14px/1 var(--sans);
  border:1px solid var(--n100); background:var(--n0); color:var(--n700); }
.share-btn svg{ width:18px; height:18px; }
.share-icon{ width:40px; height:40px; border-radius:11px; border:1px solid var(--n100);
  background:var(--n0); color:var(--n500); display:inline-flex; align-items:center; justify-content:center; }
.share-icon svg{ width:19px; height:19px; }

/* ---------- OG / SOCIAL CARD (1.91:1 link unfurl) ---------- */
/* the canonical link-preview card — image band + meta plate */
.og{ width:420px; border-radius:16px; overflow:hidden; border:1px solid var(--n100);
  background:var(--n0); box-shadow:0 18px 50px rgba(7,14,26,.16); }
.og .og-img{ position:relative; aspect-ratio:1.91/1; overflow:hidden; display:flex;
  align-items:flex-end; padding:16px; }
.og .og-img.photo-evt{ background:linear-gradient(150deg,#3A1E33 0%, #1F1430 52%, #13233D 100%); }
.og .og-img.photo-venue{ background:linear-gradient(150deg,#5A2B12 0%, #23303F 80%); }
.og .og-img.band{ background:linear-gradient(155deg,#2A1840 0%, #14223C 100%); }
.og .og-img.guide{ background:linear-gradient(150deg,#13233D 0%, #3A1E33 100%); }
.og .og-img.market{ background:linear-gradient(165deg,#0F1D35 0%, #1C2840 60%, #8E3358 130%); }
.og .og-img.app{ background:radial-gradient(120% 90% at 30% 20%, #16284A 0%, #0B1424 65%); }
/* the τ watermark + sigil on the card */
.og .og-tau{ position:absolute; top:14px; left:16px; display:inline-flex; align-items:center; gap:8px;
  color:#fff; font:600 14px/1 var(--serif); }
.og .og-tau .sq{ display:inline-block; border:1.5px solid #fff; border-radius:5px; width:22px; height:22px;
  text-align:center; line-height:20px; font-size:13px; }
.og .og-sig{ position:absolute; top:13px; right:16px; opacity:.6; }
.og .og-sig svg{ width:34px; height:34px; }
/* accent caption plate that rides on the image (legibility w/o a full scrim) */
.og .og-plate{ position:relative; z-index:2; }
.og .og-kick{ font:500 10px/1 var(--micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-line); margin-bottom:7px; }
.og .og-h{ font:600 25px/1.12 var(--serif); letter-spacing:-.01em; color:#fff; max-width:90%; }
.og .og-when{ font:500 13px/1.3 var(--sans); color:rgba(255,255,255,.82); margin-top:7px; }
/* the meta strip beneath the image (domain + sub) — what iMessage shows under the photo */
.og .og-meta{ padding:11px 15px 13px; border-top:1px solid var(--n75); }
.og .og-dom{ font:500 11px/1 var(--micro); letter-spacing:.06em; text-transform:uppercase; color:var(--n300); }
.og .og-title{ font:500 14.5px/1.3 var(--sans); color:var(--n700); margin-top:4px; }
.og .og-sub{ font:400 12.5px/1.4 var(--sans); color:var(--n400); margin-top:3px; }

/* app-share card variant — centered icon lockup */
.og .og-img.app .applock{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; }
.og .applock .ai{ width:60px; height:60px; border-radius:15px; background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--n900); font:600 30px/1 var(--serif); }
.og .applock .ai .sq{ display:inline-block; border:2px solid var(--n900); border-radius:8px; width:34px; height:34px; line-height:31px; text-align:center; }
.og .applock .at{ font:600 21px/1.1 var(--serif); color:#fff; }

/* band-share card — name + follow-me lockup centered */
.og .og-img.band .bandlock{ position:relative; z-index:2; }

/* ---------- iMessage UNFURL MOCK (share-in-a-text) ---------- */
.imsg{ position:absolute; inset:0; background:#000; display:flex; flex-direction:column; }
.imsg .imsg-bar{ flex:none; padding:46px 16px 10px; text-align:center; background:#0B0B0C;
  border-bottom:.5px solid #2A2A2C; }
.imsg .imsg-bar .nm{ font:600 15px/1.2 var(--sans); color:#fff; }
.imsg .imsg-bar .sub{ font:400 11px/1 var(--sans); color:#8E8E93; margin-top:2px; }
.imsg .imsg-body{ flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:8px;
  justify-content:flex-end; background:#000; overflow:hidden; }
/* an incoming grey bubble (their text setting up the share) */
.bub{ max-width:75%; padding:9px 13px; border-radius:18px; font:400 14.5px/1.35 var(--sans); }
.bub.them{ align-self:flex-start; background:#26262A; color:#fff; border-bottom-left-radius:5px; }
.bub.me{ align-self:flex-end; background:#0A84FF; color:#fff; border-bottom-right-radius:5px; }
/* the unfurled link card inside the thread */
.imsg .unfurl{ align-self:flex-start; width:80%; border-radius:16px; overflow:hidden;
  background:#1C1C1E; border:.5px solid #2A2A2C; }
.imsg .unfurl .uf-img{ aspect-ratio:1.91/1; position:relative; display:flex; align-items:flex-end; padding:12px; }
.imsg .unfurl .uf-meta{ padding:9px 12px 11px; background:#1C1C1E; }
.imsg .unfurl .uf-dom{ font:400 10.5px/1 var(--sans); color:#8E8E93; text-transform:uppercase; letter-spacing:.04em; }
.imsg .unfurl .uf-title{ font:500 13px/1.3 var(--sans); color:#fff; margin-top:4px; }
.imsg .unfurl .uf-sub{ font:400 11.5px/1.35 var(--sans); color:#AEAEB2; margin-top:2px; }
.imsg .imsg-input{ flex:none; padding:10px 14px 26px; background:#0B0B0C; border-top:.5px solid #2A2A2C;
  display:flex; align-items:center; gap:9px; }
.imsg .imsg-input .field{ flex:1; height:34px; border-radius:17px; border:1px solid #3A3A3C; }

/* ---------- the OS SHARE SHEET (app SEND) ---------- */
.sharesheet{ position:absolute; left:0; right:0; bottom:0; background:rgba(245,245,247,.97);
  backdrop-filter:blur(18px); border-radius:14px 14px 44px 44px; padding:14px 0 26px; }
.sharesheet .ss-card{ margin:0 12px 14px; background:#fff; border-radius:13px; padding:13px;
  display:flex; gap:11px; align-items:center; }
.sharesheet .ss-card .ss-thumb{ width:44px; height:44px; border-radius:9px; flex:none;
  background:linear-gradient(150deg,#3A1E33,#13233D); }
.sharesheet .ss-card .ss-t{ font:500 13.5px/1.2 var(--sans); color:var(--n700); }
.sharesheet .ss-card .ss-u{ font:400 11.5px/1 var(--sans); color:var(--n300); margin-top:3px; }
.sharesheet .ss-row{ display:flex; gap:18px; padding:8px 16px 4px; }
.sharesheet .ss-app{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:none; width:60px; }
.sharesheet .ss-app .ic{ width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; }
.sharesheet .ss-app .lb{ font:400 11px/1.1 var(--sans); color:var(--n500); text-align:center; }

/* prefilled-text caption that rides with the share */
.prefill{ background:var(--accent-wash); border:1px solid var(--accent-line); border-radius:11px;
  padding:11px 13px; font:400 13.5px/1.45 var(--sans); color:var(--accent-deep); }
.prefill .lk{ color:var(--n400); }

/* voice-set card (reuse alert-voice grammar locally) */
.sset{ background:#fff; border:1px solid #E3DFD4; border-radius:14px; padding:16px 18px; }
.sset h4{ font:600 17px/1.2 var(--serif); color:var(--n700); }
.sset .smeta{ font:400 12.5px/1.4 var(--sans); color:var(--n400); margin:4px 0 12px; }
.sset .line{ font:400 14.5px/1.45 var(--sans); color:var(--n600); padding:9px 0; border-top:1px solid var(--n75); }
.sset .line:first-of-type{ border-top:none; }
.sset .line b{ color:var(--n800); font-weight:600; }
.sset .anchor{ color:var(--accent-deep); font-weight:500; }
.sset .lk{ color:var(--n300); font:500 12px var(--micro); }