:root {
  --bg: #0b0b0c;
  --panel: #141416;
  --panel-2: #1b1b1f;
  --text: #f7f7f5;
  --muted: #9c9ca5;
  --line: #2b2b31;
  --accent: #ff5e4d;
  --accent-2: #ff8a5b;
  --ok: #5ed69a;
  --warn: #f7c75f;
  --danger: #ff6b6b;
  --max: 1080px;
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #1b1615 0, transparent 32rem), var(--bg); color: var(--text); }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img,video { display: block; max-width: 100%; }

.shell { min-height: 100vh; }
.nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: rgba(11,11,12,.82); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-inner { max-width: var(--max); margin: auto; height: 68px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { font-weight: 900; letter-spacing: -.07em; font-size: 26px; }
.brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 5px; }
.nav-link { border: 0; background: transparent; color: var(--muted); padding: 10px 12px; border-radius: 12px; }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.05); }
.primary-mini { border: 0; background: var(--text); color: #101011; font-weight: 800; padding: 10px 14px; border-radius: 999px; }

main { max-width: var(--max); margin: auto; padding: 28px 20px 72px; }
.hero { min-height: 62vh; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 50px; padding: 50px 0 30px; }
.eyebrow { color: var(--accent-2); font-size: 13px; text-transform: uppercase; font-weight: 900; letter-spacing: .14em; }
h1 { margin: 12px 0 18px; font-size: clamp(50px, 8vw, 96px); line-height: .92; letter-spacing: -.075em; }
.hero-copy { max-width: 650px; font-size: clamp(18px,2.2vw,24px); line-height: 1.45; color: #c9c9ce; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 28px; }
.btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 14px; min-height: 48px; padding: 0 18px; font-weight: 800; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:hover { transform: translateY(-1px); border-color: #44444c; }
.btn.primary { background: var(--text); color: #111; border-color: var(--text); }
.btn.accent { background: var(--accent); color: white; border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.danger { color: #ffd8d8; border-color: #5c2d2d; background: #241515; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
button[disabled] { opacity:.45; cursor:not-allowed; transform:none!important; }

.hero-card { border: 1px solid var(--line); background: linear-gradient(145deg,#171719,#111113); border-radius: 30px; padding: 22px; box-shadow: 0 35px 100px rgba(0,0,0,.38); transform: rotate(1.3deg); }
.mock-status { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.mock-title { font-size:32px; font-weight:900; letter-spacing:-.04em; margin:28px 0 10px; }
.mock-people { display:flex; gap:8px; margin:16px 0 24px; }
.avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#4a4a50,#252529); display:grid; place-items:center; font-weight:900; border:2px solid var(--panel); }
.avatar.add { border-style:dashed; color:var(--muted); background:transparent; }
.mock-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mock-photo { min-height:130px; border-radius:16px; display:flex; align-items:flex-end; padding:12px; font-size:12px; font-weight:800; background:linear-gradient(135deg,#6d4034,#292022); }
.mock-photo:nth-child(2) { background:linear-gradient(135deg,#24475e,#282932); }
.mock-photo:nth-child(3) { background:linear-gradient(135deg,#4e5631,#1f2722); }
.mock-photo:nth-child(4) { background:linear-gradient(135deg,#5e3657,#29202e); }

.section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin: 42px 0 18px; }
.section-title h2 { margin:0; font-size:30px; letter-spacing:-.04em; }
.section-title p { margin:0; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { border:1px solid var(--line); background:rgba(20,20,22,.92); border-radius:var(--radius); padding:18px; }
.card.clickable:hover { border-color:#46464f; transform:translateY(-1px); }
.status-line { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; background:var(--warn); }
.dot.unlocked { background:var(--ok); }
.dot.published { background:#8ea8ff; }
.card h3 { font-size:22px; margin:14px 0 8px; letter-spacing:-.035em; }
.meta { color:var(--muted); font-size:14px; line-height:1.45; }
.person-row { display:flex; align-items:center; margin-top:18px; }
.person-row .avatar { width:34px; height:34px; font-size:12px; margin-right:-7px; }

.page-head { max-width:760px; margin:24px auto 28px; }
.page-head h1 { font-size:clamp(42px,6vw,70px); margin-bottom:14px; }
.page-head p { color:var(--muted); font-size:18px; line-height:1.55; }
.panel { max-width:760px; margin:0 auto; border:1px solid var(--line); background:var(--panel); border-radius:24px; padding:22px; }
.form-grid { display:grid; gap:16px; }
.field { display:grid; gap:7px; }
.field label { font-size:13px; font-weight:800; color:#d5d5da; }
.input,.select,.textarea { width:100%; border:1px solid var(--line); border-radius:13px; background:#0e0e10; color:var(--text); padding:13px 14px; outline:none; }
.input:focus,.select:focus,.textarea:focus { border-color:#62626d; box-shadow:0 0 0 3px rgba(255,255,255,.05); }
.help { font-size:12px; color:var(--muted); line-height:1.4; }
.inline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.divider { height:1px; background:var(--line); margin:20px 0; }

.collection-wrap { max-width:860px; margin:0 auto; }
.collection-top { display:grid; gap:16px; padding:28px 0 18px; }
.collection-state { display:inline-flex; width:max-content; gap:8px; align-items:center; padding:8px 11px; border-radius:999px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; background:#252119; color:#ffd788; }
.collection-state.unlocked { background:#16261f; color:#8be5b6; }
.collection-state.published { background:#1d2130; color:#a9b8ff; }
.collection-state.expired { background:#24191a; color:#ee9898; }
.collection-title { font-size:clamp(42px,7vw,74px); line-height:.95; letter-spacing:-.065em; font-weight:950; margin:0; }
.collection-sub { color:var(--muted); font-size:16px; }
.unlock-banner { border:1px solid #28523f; background:linear-gradient(135deg,#12251c,#111714); border-radius:18px; padding:16px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.unlock-banner strong { color:#96e7bc; }

.moments { display:grid; gap:14px; margin-top:22px; }
.moment { overflow:hidden; border-radius:22px; border:1px solid var(--line); background:var(--panel); }
/* Issue 8: portrait and landscape media both stay fully visible (no
   cropping into someone's photo) — the wrapper letterboxes instead of
   .moment-media stretching/cropping to fill a fixed frame. */
.moment-media-wrap { display:flex; align-items:center; justify-content:center; max-height:720px; background:#050506; }
.moment-media-wrap[data-open-full] { cursor:zoom-in; }
.moment-media { max-height:720px; width:100%; object-fit:contain; background:#050506; }
.moment-meta { padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.moment-author { display:flex; gap:10px; align-items:center; font-weight:800; }
.moment-author .avatar { width:32px; height:32px; font-size:11px; }
.moment-time { color:var(--muted); font-size:12px; }

/* Fullscreen lightbox (Issue 8) */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(5,5,6,.94); display:flex; align-items:center; justify-content:center; padding:24px; }
.lightbox img,.lightbox video { max-width:100%; max-height:100%; border-radius:8px; }
.lightbox-close { position:fixed; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--panel-2); color:var(--text); font-size:18px; display:grid; place-items:center; }

.composer { border:1px solid var(--line); background:linear-gradient(160deg,#17171a,#121214); border-radius:22px; padding:18px; margin:18px 0; }
.drop { border:1px dashed #45454c; border-radius:16px; padding:22px; text-align:center; background:#0f0f11; }
.drop input { max-width:100%; }
.preview { margin-top:12px; border-radius:14px; overflow:hidden; max-height:380px; }
.preview img,.preview video { width:100%; max-height:380px; object-fit:contain; background:#050506; }
.preview .error { margin:0; max-width:none; padding:14px; font-size:14px; }

.invite-box { border:1px solid var(--line); border-radius:18px; padding:16px; background:#101012; }
.invite-link { display:flex; gap:8px; margin-top:10px; }
.invite-link .input { font-size:12px; }

.profile-head { max-width:760px; margin:20px auto 30px; }
.social-profile { padding-top:12px; }
.profile-topline { display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; }
.profile-avatar { width:76px; height:76px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#4a4a50,#252529); display:grid; place-items:center; font-weight:950; font-size:24px; border:1px solid var(--line); flex:0 0 auto; }
.profile-avatar.large { width:112px; height:112px; font-size:34px; }
.profile-avatar.editor { width:96px; height:96px; font-size:30px; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-avatar.fallback { color:#f4f4f2; }
.profile-name { font-size:56px; margin:0 0 6px; letter-spacing:-.06em; }
.profile-identity { min-width:0; }
.profile-actions { justify-self:end; }
.handle { color:var(--muted); }
.profile-bio { max-width:620px; margin:22px 0 0; color:#dedee2; line-height:1.55; white-space:pre-wrap; }
.profile-bio.muted { color:var(--muted); }
.profile-stats { display:flex; gap:30px; flex-wrap:wrap; margin-top:24px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.profile-stats div { display:flex; gap:7px; align-items:baseline; }
.profile-stats strong { font-size:20px; }
.profile-stats span { color:var(--muted); font-size:13px; }
.co-creators { display:flex; gap:10px; overflow:auto; padding:6px 0 12px; }
.co-chip { flex:0 0 auto; border:1px solid var(--line); padding:10px 12px; border-radius:999px; background:var(--panel); font-size:13px; }
.section-title.compact { margin:24px 0 12px; align-items:center; }
.section-title.compact h2 { font-size:20px; }
.section-title.compact p { font-size:13px; }
.avatar-editor { display:flex; gap:18px; align-items:center; margin-bottom:4px; }
.account-panel { margin-top:18px; margin-bottom:40px; }

.guest-shell { max-width:650px; margin:40px auto; }
.guest-note { border:1px solid #34343b; background:#151518; border-radius:18px; padding:16px; color:#c9c9cf; line-height:1.5; }
.consent { display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:13px; }

.empty { border:1px dashed #34343a; border-radius:20px; padding:38px 20px; text-align:center; color:var(--muted); }
.empty strong { display:block; color:var(--text); font-size:18px; margin-bottom:6px; }
.loading { min-height:40vh; display:grid; place-items:center; color:var(--muted); }
.error { max-width:700px; margin:50px auto; border:1px solid #5b2929; background:#221313; color:#ffc0c0; border-radius:18px; padding:18px; }

.feedback { margin:28px 0; border:1px solid var(--line); border-radius:20px; padding:18px; background:var(--panel); }
.feedback h3 { margin:0 0 6px; }
.feedback p { color:var(--muted); margin:0 0 14px; }

.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; }
.metric { border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:15px; }
.metric-value { font-size:28px; font-weight:900; letter-spacing:-.04em; }
.metric-label { color:var(--muted); font-size:12px; margin-top:3px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:18px; }
table { width:100%; border-collapse:collapse; min-width:700px; }
th,td { text-align:left; border-bottom:1px solid var(--line); padding:12px 14px; font-size:13px; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

#toast-root { position:fixed; z-index:100; right:18px; bottom:18px; display:grid; gap:8px; }
.toast { background:#f5f5f2; color:#141414; padding:12px 14px; border-radius:12px; box-shadow:0 16px 50px rgba(0,0,0,.35); font-weight:750; max-width:360px; }

@media (max-width: 800px) {
  .hero { grid-template-columns:1fr; padding-top:30px; }
  .hero-card { transform:none; }
  .grid { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .nav-link.desktop { display:none; }
}
@media (max-width: 520px) {
  main { padding-left:14px; padding-right:14px; }
  .nav-inner { padding:0 14px; }
  .panel { padding:16px; border-radius:20px; }
  .metric-grid { grid-template-columns:1fr; }
  .collection-title { font-size:48px; }
  .moment-media-wrap,.moment-media { max-height:60vh; }
  .invite-link { flex-direction:column; align-items:stretch; }
  .unlock-banner { flex-direction:column; align-items:flex-start; }
  .profile-topline { grid-template-columns:auto 1fr; gap:14px; align-items:center; }
  .profile-actions { grid-column:1 / -1; justify-self:stretch; }
  .profile-actions .btn { width:100%; }
  .profile-avatar.large { width:86px; height:86px; }
  .profile-name { font-size:42px; }
  .profile-stats { gap:16px 22px; }
  .avatar-editor { align-items:flex-start; }
}

/* People discovery — social foundation update 2 */
.people-head { max-width: 760px; }
.people-search-panel { max-width: 820px; margin: 0 auto 72px; }
.people-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #151516;
  border: 1px solid #2b2b2e;
  border-radius: 18px;
  padding: 0 18px;
  min-height: 58px;
  margin-bottom: 18px;
}
.people-search-box > span { color: #8f9099; font-size: 28px; line-height: 1; transform: rotate(-15deg); }
.people-search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 18px;
  padding: 16px 0;
}
.people-search-box input::placeholder { color: #777983; }
.people-results { display: grid; gap: 10px; }
.people-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  border: 1px solid #242427;
  background: #111112;
  border-radius: 18px;
  padding: 12px 14px;
}
.person-profile-hit {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.profile-avatar.people { width: 58px; height: 58px; flex: 0 0 58px; font-size: 18px; }
.people-card-copy { min-width: 0; display: grid; gap: 2px; }
.people-card-copy strong { font-size: 17px; color: #f6f6f7; }
.people-card-copy > span { color: #9294a1; font-size: 14px; }
.people-card-copy small {
  color: #b6b7c0;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.people-card .person-follow { flex: 0 0 auto; min-width: 92px; }
.loading-inline { color: #999ba5; padding: 28px 12px; text-align: center; }
.people-empty { margin-top: 8px; }

@media (max-width: 680px) {
  .people-search-panel { margin-inline: 0; }
  .people-card { padding: 11px; gap: 10px; }
  .profile-avatar.people { width: 50px; height: 50px; flex-basis: 50px; }
  .people-card-copy small { max-width: 190px; }
  .people-card .person-follow { min-width: 78px; padding-inline: 12px; }
}

/* Start-together composer + direct invitations — update 3 */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.composer-shell { max-width:760px; margin:22px auto 70px; }
.composer-title { max-width:760px; font-size:clamp(46px,7vw,76px); line-height:.96; margin-bottom:18px; }
.composer-copy { color:#b7b7bf; font-size:18px; line-height:1.55; max-width:700px; }
.composer-card { margin-top:28px; border:1px solid var(--line); background:rgba(20,20,22,.92); border-radius:28px; padding:22px; display:grid; gap:22px; }
.composer-media { display:grid; gap:12px; }
.media-picker { min-height:190px; border:1px dashed #45454d; border-radius:22px; background:#101012; display:grid; place-items:center; align-content:center; gap:6px; text-align:center; cursor:pointer; transition:.18s ease; }
.media-picker:hover { border-color:#777782; background:#151518; }
.media-picker strong { font-size:19px; }
.media-picker small,.composer-label span,.audience-card small { color:var(--muted); font-size:12px; }
.media-plus { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--text); color:#111; font-size:28px; line-height:1; margin-bottom:5px; }
.start-previews { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.start-preview { position:relative; aspect-ratio:1/1; background:#080809; border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.start-preview img,.start-preview video { width:100%; height:100%; object-fit:cover; }
.start-preview span { position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.72); display:grid; place-items:center; font-size:11px; font-weight:800; }
.composer-section { border-top:1px solid var(--line); padding-top:20px; }
.composer-label { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:11px; }
.people-picker { position:relative; }
#start-people-results { margin-top:8px; display:grid; gap:6px; }
.person-result { width:100%; border:0; background:transparent; color:var(--text); text-align:left; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px; border-radius:14px; }
.person-result:hover { background:rgba(255,255,255,.05); }
.person-result span { display:grid; gap:2px; }
.person-result small,.invite-person-card small { color:var(--muted); }
.person-result b { font-size:12px; color:var(--accent-2); }
.selected-people { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.selected-person { border:1px solid var(--line); color:var(--text); background:#101012; border-radius:999px; padding:6px 9px 6px 6px; display:flex; gap:7px; align-items:center; }
.selected-person b { color:var(--muted); font-size:16px; }
.profile-avatar.tiny { width:30px; height:30px; flex:0 0 30px; font-size:10px; }
.audience-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.audience-card { border:1px solid var(--line); background:#101012; border-radius:18px; padding:16px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; cursor:pointer; }
.audience-card input { display:none; }
.audience-card span:last-child { display:grid; gap:4px; }
.audience-card.selected { border-color:#73737d; box-shadow:inset 0 0 0 1px #73737d; background:#18181b; }
.audience-icon { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#242429; font-size:18px; }
.composer-submit { width:100%; min-height:54px; font-size:16px; }
.composer-footnote { text-align:center; color:var(--muted); font-size:12px; margin-top:-10px; }
.text-button { border:0; background:transparent; padding:0; color:var(--accent-2); font-weight:800; cursor:pointer; }
.invite-cards { display:grid; gap:10px; }
.invite-person-card { width:100%; color:var(--text); text-align:left; border:1px solid var(--line); background:var(--panel); border-radius:18px; padding:14px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; }
.invite-person-card:hover { background:var(--panel-2); }
.invite-person-card > span:nth-child(2) { display:grid; gap:3px; }
.invite-person-card b { margin-top:2px; }
.invite-person-card .arrow { color:var(--muted); font-size:22px; }
.caption-title { font-size:clamp(42px,6vw,70px); max-width:820px; }
.no-caption { font-size:44px; color:#d4d4d8; }

@media (max-width: 650px) {
  .composer-shell { margin-top:8px; }
  .composer-card { padding:15px; border-radius:22px; }
  .audience-options { grid-template-columns:1fr; }
  .start-previews { gap:6px; }
  .composer-label { align-items:flex-start; flex-direction:column; gap:3px; }
}

/* Composer refinement + invitation visibility update */
.composer-title { font-size:clamp(38px,5.6vw,60px); max-width:700px; line-height:1; }
.composer-copy { font-size:16px; max-width:650px; }
.composer-card { gap:18px; }
.composer-caption .textarea { min-height:92px; }
.start-previews[data-count="1"] { grid-template-columns:1fr; }
.start-previews[data-count="1"] .start-preview { aspect-ratio:16/9; }
.start-previews[data-count="2"] { grid-template-columns:repeat(2,1fr); }
.start-previews[data-count="2"] .start-preview { aspect-ratio:4/3; }
.selected-people { align-items:center; margin:0 0 10px; }
.selected-people-label { color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-right:2px; }
.selected-person { background:#19191d; border-color:#3c3c44; }
.audience-options { grid-template-columns:repeat(3,1fr); }
.audience-card { padding:12px; border-radius:15px; gap:9px; }
.audience-icon { width:26px; height:26px; font-size:15px; }
.composer-footnote { opacity:.68; font-size:11px; margin-top:-8px; }
.invite-nav { display:flex; align-items:center; gap:7px; }
.invite-nav b { min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:999px; background:var(--accent); color:#111; font-size:11px; }
.invite-cta { color:var(--accent-2); font-size:12px; font-weight:800; white-space:nowrap; }
.profile-invites { margin-bottom:28px; }
.direct-invite-strip { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
.direct-invite-strip > span { color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-right:2px; }
.direct-invite-person { border:1px solid var(--line); background:#151518; color:var(--text); border-radius:999px; padding:5px 9px 5px 5px; display:flex; align-items:center; gap:7px; cursor:pointer; }
.direct-invite-person b { font-size:12px; }
.delete-open-post { margin-top:14px; border:0; background:transparent; color:#e08a8a; font:inherit; font-size:12px; font-weight:800; padding:0; cursor:pointer; }
.delete-open-post:hover { text-decoration:underline; }

@media (max-width: 760px) {
  .audience-options { grid-template-columns:1fr; }
  .invite-person-card { grid-template-columns:auto 1fr; }
  .invite-person-card .invite-cta { grid-column:2; justify-self:start; }
}

/* Social shared-post cards */
.post-stack { display:grid; gap:26px; max-width:680px; }
.profile-posts { max-width:680px; margin-top:34px; }
.profile-post-empty { margin-top:34px; max-width:680px; }
.social-post { border:1px solid var(--line); background:#111113; border-radius:22px; overflow:hidden; }
.post-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px 11px; }
.post-starter { border:0; background:transparent; color:var(--text); padding:0; text-align:left; cursor:pointer; display:flex; align-items:center; gap:10px; }
.post-starter > div { display:grid; gap:1px; }
.post-starter strong { font-size:14px; }
.post-starter span { color:var(--muted); font-size:12px; }
.profile-avatar.post-author-avatar { width:38px; height:38px; flex:0 0 38px; font-size:12px; }
.post-open-label { color:var(--muted); font-size:11px; }
.post-caption { margin:0; padding:0 16px 13px 64px; font-size:15px; line-height:1.45; }
.post-media-cover { background:#050505; cursor:pointer; overflow:hidden; }
.post-media-cover .post-media-cell { position:relative; min-height:480px; background:#080809; overflow:hidden; }
.post-media-cell img,.post-media-cell video { width:100%; height:100%; display:block; object-fit:cover; position:absolute; inset:0; }
.post-media-more { position:absolute; right:14px; bottom:14px; background:rgba(10,10,11,.82); border:1px solid rgba(255,255,255,.18); color:white; padding:8px 11px; border-radius:999px; font-size:12px; font-weight:850; backdrop-filter:blur(8px); }
.post-contributors { display:flex; gap:9px; align-items:center; padding:12px 16px 8px; }
.post-contributor-avatars { display:flex; }
.profile-avatar.post-tiny { width:32px; height:32px; flex:0 0 32px; font-size:10px; border:2px solid #111113; margin-left:-7px; }
.profile-avatar.post-tiny:first-child { margin-left:0; }
.post-contributors > strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-actions { display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:5px 10px; border-top:1px solid var(--line); }
.post-action { border:0; background:transparent; color:#d4d4da; font:inherit; font-size:13px; font-weight:800; padding:9px 10px; border-radius:10px; cursor:pointer; }
.post-action:hover { background:#1b1b1f; }
.post-action.active { color:var(--accent); }
.post-action.icon-action { width:42px; height:40px; display:grid; place-items:center; padding:0; font-size:24px; line-height:1; font-weight:500; }
.post-action.contribute { margin-left:auto; color:var(--accent-2); border:1px solid #34343a; padding:8px 12px; }
.post-action.requested { margin-left:auto; color:var(--muted); cursor:default; }
.post-social-counts { display:flex; gap:14px; padding:2px 16px 13px; }
.post-count-button { border:0; background:transparent; color:#e9e9ec; padding:0; font-size:12px; font-weight:800; cursor:pointer; }
.post-count-button:hover { text-decoration:underline; }
.social-modal-backdrop { position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.72); display:grid; place-items:center; padding:20px; }
.social-modal { width:min(520px,100%); max-height:min(720px,86vh); overflow:hidden; background:#151518; border:1px solid #34343a; border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.55); display:grid; grid-template-rows:auto minmax(0,1fr); }
.social-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.social-modal-head h2 { margin:0; font-size:22px; }
.social-modal-close { border:0; background:transparent; color:var(--muted); font-size:28px; line-height:1; }
.social-modal-body { overflow:auto; padding:8px 0 16px; }
.social-modal-empty { color:var(--muted); padding:28px 20px; text-align:center; }
.social-person-list,.social-comment-list { display:grid; }
.social-person-row { border:0; background:transparent; color:var(--text); display:flex; align-items:center; gap:11px; padding:10px 18px; text-align:left; }
.social-person-row:hover { background:#1c1c20; }
.social-person-row span { display:grid; gap:2px; }
.social-person-row small,.social-comment-row small { color:var(--muted); }
.social-comment-row { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:11px 18px; }
.profile-avatar.comment-avatar { width:36px; height:36px; flex:0 0 36px; font-size:11px; }
.social-comment-row button { border:0; background:transparent; color:var(--text); padding:0; text-align:left; }
.social-comment-row p { margin:4px 0 0; color:#e7e7ea; line-height:1.4; }
.modal-comment-form { display:grid; grid-template-columns:1fr auto; gap:8px; padding:14px 18px 0; border-top:1px solid var(--line); margin-top:8px; }
.modal-comment-form .input { min-height:42px; padding:8px 12px; }
@media (max-width: 650px) {
  .post-stack,.profile-posts { max-width:none; }
  .social-post { border-left:0; border-right:0; border-radius:0; }
  .post-media-cover .post-media-cell { min-height:380px; }
  .post-action.contribute,.post-action.requested { margin-left:0; width:100%; text-align:left; }
}


/* Feed-only home: the main BY_US route is the social feed, not an onboarding/dashboard page. */
.feed-only { padding-top: 8px; }
.feed-posts { margin: 0 auto; }
.feed-empty { max-width: 680px; margin: 40px auto 0; }
.activity-page { max-width: 920px; margin: 0 auto; }
.activity-head h1 { font-size: clamp(38px,5vw,54px); margin: 8px 0 16px; }
.activity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.activity-empty { margin-top: 10px; }
.activity-nav { display:flex; align-items:center; gap:7px; }
.activity-nav b { min-width:19px; height:19px; padding:0 5px; border-radius:999px; display:grid; place-items:center; background:var(--accent); color:white; font-size:11px; }
@media (max-width: 720px) {
  .activity-grid { grid-template-columns:1fr; }
  .feed-only { padding-top: 0; }
}


/* Update 9 — public post drill-down is content-first, not an operator/status screen. */
.public-post-detail { max-width:720px; margin:34px auto 72px; }
.detail-social-post { overflow:hidden; }
.detail-post-authors { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.detail-post-authors .post-contributor-avatars { display:flex; align-items:center; }
.detail-post-authors .profile-avatar + .profile-avatar { margin-left:-8px; }
.detail-post-authors > div:last-child { display:grid; gap:2px; min-width:0; }
.detail-post-authors strong { font-size:15px; overflow-wrap:anywhere; }
.detail-post-authors span { color:var(--muted); font-size:12px; }
.detail-caption { padding:15px 18px; margin:0; border-bottom:1px solid var(--line); }
.detail-moments { display:grid; gap:1px; background:var(--line); }
.detail-moment { background:#070708; }
.detail-moment .moment-media-wrap { max-height:none; min-height:0; border-radius:0; }
.detail-moment .moment-media { max-height:82vh; }
.detail-moment-credit { padding:10px 14px; background:#101012; color:#d9d9de; font-size:12px; }
.detail-actions { border-top:1px solid var(--line); }
@media (max-width:720px) {
  .public-post-detail { margin:8px 0 44px; }
  .detail-social-post { border-left:0; border-right:0; border-radius:0; }
}


/* Update 10 — internal profile reshares. */
.profile-content-tabs { max-width:680px; margin:10px auto 22px; display:flex; gap:8px; border-bottom:1px solid var(--line); }
.profile-content-tab { appearance:none; border:0; background:transparent; color:var(--muted); padding:12px 4px 10px; margin-right:20px; font:inherit; font-weight:800; cursor:pointer; border-bottom:2px solid transparent; }
.profile-content-tab span { font-weight:500; color:var(--muted); margin-left:4px; }
.profile-content-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.reshared-post-wrap { display:grid; gap:7px; }
.reshared-by { color:var(--muted); font-size:12px; font-weight:800; padding:0 4px; }
.post-action[data-share-post].active { color:var(--accent); }
@media (max-width:720px) { .profile-content-tabs { margin-left:18px; margin-right:18px; } }


/* Update 11 — BY_US identity, equal shared authorship, Perspectives, Activity. */
.nav-brand { border:0; background:transparent; padding:0; display:flex; align-items:center; cursor:pointer; }
.nav-brand img { width:200px; height:auto; display:block; }
.create-together { background:var(--text); }
.auth-head { text-align:center; }
.auth-brand-logo { width:min(380px,82vw); height:auto; margin:0 auto 28px; }

.loading { min-height:55vh; display:grid; place-items:center; }
.loading img { width:74px; height:auto; animation:byus-pulse 1.4s ease-in-out infinite; }
@keyframes byus-pulse { 0%,100%{opacity:.55;transform:scale(.98)} 50%{opacity:1;transform:scale(1)} }

.byus-post { position:relative; }
.shared-author-header { display:flex; align-items:center; gap:12px; padding:14px 16px; min-height:64px; border-bottom:1px solid rgba(255,255,255,.045); }
.shared-author-header.detail { padding:17px 18px; }
.shared-avatar-stack { display:flex; align-items:center; min-width:max-content; }
.shared-avatar-hit { border:0; background:transparent; padding:0; margin-left:-8px; border-radius:50%; }
.shared-avatar-hit:first-child { margin-left:0; }
.shared-avatar-hit .profile-avatar { border:2px solid #111113; }
.shared-avatar-hit:hover { transform:translateY(-1px); z-index:2; }
.shared-author-copy { display:grid; gap:2px; min-width:0; }
.shared-author-copy strong { font-size:14px; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shared-author-copy span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.055em; font-weight:750; }
.shared-author-header.detail .shared-author-copy strong { font-size:16px; }
.shared-author-header.detail .shared-author-copy span { font-size:12px; }

.byus-post .post-caption { padding:13px 16px 15px; font-size:15px; }
.byus-post .post-media-more { background:rgba(11,11,12,.88); border-color:rgba(255,94,77,.38); color:#fff; }
.byus-post .post-media-more::before { content:'◐ '; color:var(--accent); }

.perspectives-label { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 18px; background:#0d0d0f; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.perspectives-label strong { font-size:16px; }
.perspectives-label span { color:var(--muted); font-size:12px; }
.perspective-stack { display:grid; gap:10px; background:#080809; padding:10px; }
.perspective-group { overflow:hidden; border:1px solid var(--line); background:#101012; border-radius:17px; }
.perspective-person { display:flex; align-items:center; gap:10px; padding:11px 13px; }
.perspective-person > div:last-child { display:grid; gap:1px; }
.perspective-person strong { font-size:13px; }
.perspective-person span { color:var(--muted); font-size:11px; }
.perspective-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:#050506; }
.perspective-media-grid[data-count="1"] { grid-template-columns:1fr; }
.perspective-media .moment-media-wrap { max-height:76vh; min-height:0; border-radius:0; }
.perspective-media .moment-media { max-height:76vh; }

.activity-head { margin-bottom:26px; }
.activity-head p { margin:-8px 0 0; color:var(--muted); font-size:15px; }
.activity-events { display:grid; gap:8px; }
.activity-event { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid var(--line); background:#111113; border-radius:17px; padding:12px 13px; }
.activity-event.unread { border-color:#49342f; background:linear-gradient(90deg,rgba(255,94,77,.08),#111113 32%); }
.activity-event-avatar { display:grid; place-items:center; }
.activity-mark { width:42px; height:36px; object-fit:contain; }
.activity-event-copy { display:grid; gap:3px; min-width:0; line-height:1.35; font-size:14px; }
.activity-event-copy small { color:#c0c0c7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-event-copy time { color:var(--muted); font-size:11px; }
.activity-event-actions { display:flex; gap:7px; align-items:center; }
.activity-open-details { margin-top:30px; border-top:1px solid var(--line); padding-top:18px; }
.activity-open-details summary { cursor:pointer; color:var(--muted); font-weight:800; font-size:13px; list-style:none; display:flex; gap:7px; align-items:center; }
.activity-open-details summary::-webkit-details-marker { display:none; }
.activity-open-details summary::before { content:'›'; font-size:18px; transform:rotate(0); transition:transform .15s; }
.activity-open-details[open] summary::before { transform:rotate(90deg); }
.activity-open-details summary span { color:var(--text); background:#1b1b1f; border-radius:999px; min-width:21px; padding:2px 6px; text-align:center; font-size:11px; }
.activity-open-details .activity-grid,.activity-open-details .activity-empty { margin-top:14px; }

@media (max-width:720px) {
  .nav-brand img { width:160px; }
  .create-together {
    position:relative;
    font-size:0;
    width:42px;
    height:42px;
    padding:0;
    display:grid;
    place-items:center;
  }
  .create-together::before,
  .create-together::after {
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:17px;
    height:3px;
    border-radius:999px;
    background:#101011;
    transform:translate(-50%,-50%);
  }
  .create-together::after { transform:translate(-50%,-50%) rotate(90deg); }
  .shared-author-copy strong { max-width:62vw; }
  .perspective-stack { padding:0; gap:1px; }
  .perspective-group { border-left:0; border-right:0; border-radius:0; }
  .perspective-media-grid { grid-template-columns:1fr; }
  .activity-event { grid-template-columns:auto minmax(0,1fr); }
  .activity-event-actions { grid-column:2; justify-self:start; }
}

.hero-brand-logo { width:min(440px,82vw); height:auto; margin:0 0 26px; }
.identity-demo .mock-shared-authors { display:flex; align-items:center; gap:12px; }
.identity-demo .mock-shared-authors > div:last-child { display:grid; gap:2px; }
.identity-demo .mock-shared-authors strong { font-size:14px; }
.identity-demo .mock-shared-authors span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:800; }
.identity-demo .mock-people { margin:0; }


/* Update 12 — clearer solo state, quieter Activity, tighter perspectives. */
.shared-author-header.waiting .shared-author-copy span { color:#d8b85d; }

.collection-meta-row {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px;
}
.collection-meta-row .meta { margin:0; max-width:660px; }
.audience-pill {
  display:inline-flex; align-items:center; gap:7px; width:max-content;
  padding:6px 9px; border:1px solid var(--line); border-radius:999px;
  color:var(--muted); font-size:12px; font-weight:750; background:#111113;
}
.audience-pill > span { color:var(--accent); font-size:10px; }

.activity-zero {
  display:flex; align-items:center; gap:12px; padding:17px 18px; margin-top:18px;
  border:1px solid var(--line); border-radius:16px; background:#101012;
}
.activity-zero img { width:28px; height:28px; object-fit:contain; }
.activity-zero > div { display:grid; gap:3px; }
.activity-zero strong { font-size:14px; }
.activity-zero span { color:var(--muted); font-size:12px; }

.activity-open-details { margin-top:24px; }
.activity-open-details:not([open]) { padding-bottom:3px; }

.perspective-jump-nav {
  display:flex; gap:8px; overflow-x:auto; padding:11px 14px;
  border-bottom:1px solid var(--line); scrollbar-width:none;
}
.perspective-jump-nav::-webkit-scrollbar { display:none; }
.perspective-jump {
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  padding:6px 10px 6px 7px; border:1px solid var(--line); border-radius:999px;
  color:var(--text); text-decoration:none; background:#111113; font-size:12px; font-weight:750;
}
.perspective-jump:hover { border-color:#5d5d65; background:#171719; }
.perspective-group { scroll-margin-top:92px; }
.perspective-media .moment-media-wrap,
.perspective-media .moment-media { max-height:64vh; }

@media (max-width:720px) {
  .collection-meta-row { align-items:flex-start; }
  .perspective-media .moment-media-wrap,
  .perspective-media .moment-media { max-height:68vh; }
}


/* Update 13 — profile posts become a scan-friendly BY_US gallery. */
.profile-post-grid {
  max-width:980px;
  margin:28px auto 70px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.profile-grid-tile {
  appearance:none;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#111113;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.profile-grid-tile:hover { transform:translateY(-2px); border-color:#3b3b42; background:#131316; }
.profile-grid-media { position:relative; aspect-ratio:4 / 5; overflow:hidden; background:#080809; }
.profile-grid-media > img,
.profile-grid-media > video { width:100%; height:100%; display:block; object-fit:cover; }
.profile-grid-placeholder { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(145deg,#18181c,#0c0c0e); color:var(--muted); font-weight:950; letter-spacing:.08em; }
.profile-grid-perspectives { position:absolute; left:50%; top:10px; right:auto; bottom:auto; transform:translateX(-50%); max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:6px 9px; border:1px solid rgba(255,91,70,.55); border-radius:999px; background:rgba(8,8,9,.82); backdrop-filter:blur(10px); color:#fff; font-size:11px; font-weight:900; z-index:6; }
.profile-grid-perspectives.waiting { border-color:rgba(255,208,88,.48); color:#ffd66b; }
.profile-grid-reshared { position:absolute; left:10px; top:10px; padding:5px 8px; border-radius:999px; background:rgba(8,8,9,.82); border:1px solid rgba(255,255,255,.12); color:#f1f1f3; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.profile-grid-meta { padding:11px 12px 12px; display:grid; gap:8px; }
.profile-grid-authors { min-width:0; display:flex; align-items:center; gap:8px; }
.profile-grid-authors .shared-avatar-stack { display:flex; flex:0 0 auto; }
.profile-avatar.profile-grid-avatar { width:24px; height:24px; flex:0 0 24px; font-size:8px; border:2px solid #111113; margin-left:-6px; }
.profile-avatar.profile-grid-avatar:first-child { margin-left:0; }
.profile-grid-authors strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.profile-grid-meta p { margin:0; color:#d3d3d8; font-size:12px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.profile-grid-counts { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; font-weight:700; }
.profile-grid-count {
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:1;
  padding:3px 0;
  cursor:pointer;
}
.profile-grid-count:hover,
.profile-grid-count:focus-visible { color:#fff; }
.profile-grid-count:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.profile-grid-share { margin-left:auto; font-size:15px; }
.profile-grid-share.active { color:var(--accent); }
@media (max-width:900px) {
  .profile-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:680px; padding:0 18px; }
}
@media (max-width:520px) {
  .profile-post-grid { gap:8px; padding:0 10px; margin-top:18px; }
  .profile-grid-tile { border-radius:12px; }
  .profile-grid-meta { padding:9px; }
  .profile-grid-authors strong { font-size:11px; }
  .profile-grid-counts { font-size:10px; }
  .profile-grid-perspectives { left:50%; top:7px; right:auto; bottom:auto; padding:5px 7px; font-size:9px; }
}

/* Update 14 — safety/account controls, feed scopes, and mobile beta hardening. */
.feed-filters {
  max-width:680px;
  margin:0 auto 16px;
  display:flex;
  gap:6px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(17,17,19,.92);
  width:max-content;
}
.feed-filter {
  border:0;
  background:transparent;
  color:var(--muted);
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}
.feed-filter:hover { color:var(--text); background:rgba(255,255,255,.05); }
.feed-filter.active { background:var(--text); color:#111; }
.report-action { margin-left:auto; color:#9d9da6; }
.report-action:hover { color:#ff9d92; }
.report-form p { margin:0; }
.safety-menu { display:grid; gap:10px; }
.safety-menu .help { margin:4px 0 0; }
.profile-actions { display:flex; align-items:center; gap:7px; }
.profile-safety { width:40px; padding:0; }
.shared-ownership-note {
  max-width:760px;
  margin:16px auto 0;
  display:grid;
  gap:3px;
  padding:12px 14px;
  border:1px solid #34343b;
  border-radius:14px;
  background:#101012;
}
.shared-ownership-note strong { font-size:12px; }
.shared-ownership-note span { color:var(--muted); font-size:11px; line-height:1.45; }
.settings-section { margin-bottom:18px; }
.settings-section .section-title { margin:0 0 18px; }
.setting-toggle {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:11px;
  align-items:start;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#101012;
  cursor:pointer;
}
.setting-toggle input { width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
.setting-toggle span { display:grid; gap:3px; }
.setting-toggle small { color:var(--muted); line-height:1.4; }
.security-form { max-width:540px; }
.blocked-list { display:grid; gap:8px; }
.blocked-row {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#101012;
}
.blocked-row > div:nth-child(2) { display:grid; gap:2px; min-width:0; }
.blocked-row small { color:var(--muted); }
.ownership-rule { padding:13px 14px; border:1px solid #393033; background:#151012; border-radius:14px; }
.ownership-rule p { margin:5px 0 0; }
.danger-zone { border-color:#3b2729; }

@media (max-width:720px) {
  html { scroll-padding-top:76px; }
  body { padding-bottom:env(safe-area-inset-bottom); }
  main { padding:18px 12px calc(72px + env(safe-area-inset-bottom)); }
  button, .btn, .nav-link, .primary-mini { touch-action:manipulation; }
  .input,.select,.textarea { font-size:16px; } /* prevents iOS focus zoom */
  .feed-filters {
    position:static;
    margin:0 auto 12px;
    max-width:calc(100vw - 24px);
    overflow-x:auto;
    scrollbar-width:none;
    backdrop-filter:none;
  }
  .feed-filters::-webkit-scrollbar { display:none; }
  .feed-filter { flex:0 0 auto; min-height:38px; }
  .social-post { border-radius:15px; }
  .post-actions { gap:2px; }
  .post-action.icon-action { min-width:42px; min-height:42px; }
  .report-action { margin-left:0; }
  .profile-actions { gap:5px; }
  .settings-section { border-radius:18px; padding:17px; }
  .blocked-row { grid-template-columns:auto minmax(0,1fr); }
  .blocked-row .btn { grid-column:2; justify-self:start; }
  .social-modal { width:min(94vw,560px); max-height:86dvh; overflow:auto; }
  .perspective-media .moment-media-wrap,
  .perspective-media .moment-media { max-height:70dvh; }
}


/* Account recovery + email verification */
.auth-assist { display:flex; justify-content:flex-end; margin-top:-6px; }
.recovery-success { padding:16px 0; }
.recovery-success p { color:var(--muted); margin-top:6px; }
.email-status-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0 18px; margin-bottom:4px; border-bottom:1px solid var(--line);
}
.email-status-row > div { display:grid; gap:3px; }
.email-status-row small { color:var(--muted); }
.status-pill.verified {
  display:inline-flex; align-items:center; min-height:30px; padding:5px 10px; border-radius:999px;
  background:rgba(75, 208, 136, .12); color:#7ce3a9; font-size:12px; font-weight:800;
}
@media (max-width:560px) {
  .email-status-row { align-items:flex-start; flex-direction:column; }
}


/* Update 16A — visible account menu with sign out. */
.account-menu-wrap { position:relative; display:flex; align-items:center; }
.nav-account-button {
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:5px 8px;
  border-radius:999px;
  cursor:pointer;
  font:inherit;
}
.nav-account-button:hover,
.nav-account-button[aria-expanded="true"] { color:var(--text); background:#171719; }
.nav-user-avatar { width:28px; height:28px; font-size:10px; flex:0 0 28px; }
.account-chevron { font-size:14px; transform:translateY(-1px); }
.account-menu {
  position:absolute;
  z-index:80;
  right:0;
  top:calc(100% + 8px);
  width:176px;
  padding:7px;
  border:1px solid var(--line);
  background:#111113;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
}
.account-menu[hidden] { display:none; }
.account-menu button {
  appearance:none;
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:10px 11px;
  border-radius:9px;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}
.account-menu button:hover,
.account-menu button:focus-visible { background:#1c1c1f; }
.account-menu-divider { height:1px; background:var(--line); margin:5px 4px; }
.account-menu .account-menu-signout { color:#ff8e86; }

@media (max-width: 720px) {
  .nav-account-button { padding:4px; }
  .account-chevron { display:none; }
  .account-menu { right:-42px; width:170px; }
}

/* Update 17 — Voices: written BY_US posts that still require another person. */
.create-format-picker {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.create-format {
  appearance:none;
  border:1px solid var(--line);
  background:#111113;
  color:var(--muted);
  border-radius:14px;
  padding:15px 16px;
  text-align:left;
  cursor:pointer;
  display:grid;
  gap:4px;
  font:inherit;
}
.create-format strong { color:var(--text); font-size:14px; }
.create-format span { font-size:12px; }
.create-format:hover { border-color:#3b3b40; }
.create-format.active {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
  background:rgba(255,91,79,.07);
}
.voice-create-panel { position:relative; }
.voice-create-panel[hidden] { display:none; }
.voice-create-panel > label { display:grid; gap:4px; margin-bottom:9px; }
.voice-create-panel > label span { color:var(--muted); font-size:12px; }
.voice-create-textarea,
.voice-contribution-text {
  min-height:180px;
  resize:vertical;
  font-size:18px;
  line-height:1.55;
}
.voice-character-count {
  margin-top:6px;
  text-align:right;
  color:var(--muted);
  font-size:11px;
}

.voice-feed-preview {
  appearance:none;
  width:100%;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0c0c0e;
  color:var(--text);
  padding:0;
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.voice-feed-line {
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.voice-feed-line:last-of-type { border-bottom:0; }
.voice-feed-line strong {
  display:block;
  color:var(--accent);
  font-size:12px;
  margin-bottom:8px;
}
.voice-feed-line p {
  margin:0;
  font-size:18px;
  line-height:1.5;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.voice-feed-more {
  display:block;
  padding:10px 20px 14px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.voice-detail-page { max-width:720px; }
.voice-detail-post { overflow:hidden; }
.voice-detail-stack { display:grid; gap:1px; background:var(--line); }
.voice-detail-entry {
  background:#0d0d0f;
  padding:22px 22px 24px;
}
.voice-detail-entry header {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.voice-detail-entry header > div { display:grid; gap:2px; }
.voice-detail-entry header span { color:var(--muted); font-size:11px; }
.voice-detail-entry p {
  margin:0;
  font-size:21px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.voice-profile-tile {
  border:1px solid var(--line);
  border-radius:14px;
  background:#0d0d0f;
  min-height:250px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.voice-profile-tile:hover { border-color:#3d3d42; transform:translateY(-1px); }
.voice-profile-top {
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  min-width:0;
}
.voice-profile-top > strong {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.voice-profile-reshared {
  margin-left:auto;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.voice-profile-copy {
  flex:1;
  padding:14px;
  display:grid;
  align-content:start;
  gap:12px;
}
.voice-profile-snippet + .voice-profile-snippet {
  padding-top:12px;
  border-top:1px solid var(--line);
}
.voice-profile-snippet span { color:var(--accent); font-size:10px; font-weight:800; }
.voice-profile-snippet p {
  margin:5px 0 0;
  color:var(--text);
  font-size:14px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:pre-wrap;
}
.voice-profile-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.voice-profile-bottom .profile-grid-counts { margin-left:auto; }

.voice-contribution-composer .voice-contribution-text { margin-top:14px; }
.voice-moment {
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  background:#101012;
}
.voice-moment-author {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.voice-moment-author strong { font-size:12px; color:var(--accent); }
.voice-moment > p {
  margin:0 0 14px;
  font-size:18px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

@media (max-width:720px) {
  .create-format-picker { gap:8px; }
  .create-format { padding:12px; }
  .voice-create-textarea,
  .voice-contribution-text { min-height:150px; font-size:16px; }
  .voice-feed-line { padding:16px; }
  .voice-feed-line p { font-size:17px; }
  .voice-detail-entry { padding:18px 16px 20px; }
  .voice-detail-entry p { font-size:19px; }
  .voice-profile-tile { min-height:220px; }
}

/* Logged-out front door — Update 18A */
.landing-page { padding-bottom: 42px; }
.landing-hero { min-height: 68vh; align-items: center; }
.landing-hero-copy { min-width: 0; }
.hero-brand-logo--stacked { width: min(440px, 78vw); margin: 0 0 22px; }
.landing-hero h1 { max-width: 8ch; font-size: clamp(44px, 6.8vw, 82px); }
.landing-subcopy { max-width: 610px; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.landing-demo { transform: rotate(1deg); overflow: hidden; }
.landing-demo .mock-title { margin-top: 24px; font-size: clamp(22px,2.8vw,30px); }
.landing-demo .meta { max-width: 44ch; }
.mock-overlap {
  position: relative;
  min-height: 300px;
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 0 10px;
}
.mock-overlap::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 58%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255, 94, 77, .72);
  filter: blur(10px);
  opacity: .9;
  z-index: 0;
}
.mock-shot {
  position: relative;
  z-index: 1;
  width: min(46%, 230px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 60px rgba(0,0,0,.28);
  background-size: cover;
  background-position: center;
}
.mock-shot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.3) 78%, rgba(0,0,0,.62));
}
.mock-shot span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.mock-shot-a {
  margin-right: -22px;
  transform: translateY(10px) rotate(-4deg);
  background-image: url('/landing_assets/landing_group_example.png');
  background-position: 28% center;
}
.mock-shot-b {
  margin-left: -22px;
  transform: translateY(28px) rotate(5deg);
  background-image: url('/landing_assets/landing_group_example.png');
  background-position: 74% center;
}
.mock-overlap-badge {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 10px 22px rgba(255,94,77,.32);
}
.landing-example-people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.landing-example-people .mock-people { margin: 0; }
.landing-example-people .avatar { width: 34px; height: 34px; margin-right: -8px; font-size: 11px; }
.landing-example-people > span { color: var(--muted); font-size: 12px; text-align: right; line-height: 1.35; }
.landing-how { border-top: 1px solid var(--line); padding: 58px 0 22px; }
.landing-steps-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(20,20,22,.78);
  padding: 26px;
}
.landing-section-heading { max-width: 720px; margin-bottom: 18px; }
.landing-section-heading h2 { margin: 9px 0 0; font-size: clamp(32px,5vw,54px); line-height: 1; letter-spacing: -.055em; }
.landing-steps { display: grid; grid-template-columns: 1fr; gap: 12px; }
.landing-step {
  border: 1px solid var(--line);
  background: rgba(14,14,16,.72);
  border-radius: 22px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.landing-step > span { color: var(--accent-2); font-size: 12px; letter-spacing: .12em; font-weight: 900; padding-top: 4px; }
.landing-step strong { display: block; font-size: 22px; letter-spacing: -.035em; }
.landing-step p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; font-size: 14px; }

@media (max-width: 800px) {
  .landing-hero { min-height: auto; }
  .mock-overlap { min-height: 270px; }
}

@media (max-width: 520px) {
  .landing-page { padding-bottom: 18px; }
  .landing-hero { gap: 26px; padding-top: 18px; }
  .landing-hero-copy { text-align: center; }
  .hero-brand-logo--stacked { width: min(310px, 78vw); margin: 0 auto 18px; }
  .landing-hero .eyebrow { text-align: center; }
  .landing-hero h1 { margin-left: auto; margin-right: auto; font-size: clamp(38px, 11vw, 50px); max-width: 9ch; }
  .landing-hero .hero-copy, .landing-subcopy { margin-left: auto; margin-right: auto; }
  .landing-hero .hero-actions { justify-content: center; }
  .landing-hero .hero-actions .btn { flex: 1 1 145px; }
  .landing-how { padding-top: 40px; }
  .landing-steps-card { padding: 20px; }
  .landing-step { padding: 16px; gap: 12px; }
  .mock-overlap { min-height: 250px; margin-top: 18px; }
  .mock-shot { width: 52%; border-radius: 18px; }
  .mock-shot-a { margin-right: -16px; }
  .mock-shot-b { margin-left: -16px; }
  .landing-example-people { align-items: flex-start; }
  .landing-example-people > span { max-width: 145px; }
}

/* Update 20 — Starter post management + tighter mobile create button. */
.post-management {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #101012;
}
.post-management-copy { display:grid; gap:4px; }
.post-management-copy strong { font-size:13px; }
.post-management-copy span { color:var(--muted); font-size:12px; line-height:1.45; }
.post-management-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.post-edit-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display:grid;
  gap:12px;
}
.post-edit-form[hidden] { display:none; }
.post-edit-form .textarea { min-height:88px; resize:vertical; }
.post-edit-actions { margin-top:2px; }

@media (max-width:720px) {
  .create-together {
    width:38px;
    height:38px;
    min-height:38px;
  }
  .create-together::before,
  .create-together::after {
    width:15px;
    height:2.5px;
  }
  .post-management { padding:13px; }
  .post-management-actions .btn { min-height:40px; }
  .post-edit-actions { align-items:stretch; }
  .post-edit-actions .btn { flex:1 1 130px; }
}

/* Update 21 — centered signed-in brand, compact create control, and private Waiting shelf. */
.signed-in-nav .nav-logo-row {
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.nav-centered-brand {
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.nav-centered-brand img {
  display:block;
  width:230px;
  height:36px;
  object-fit:contain;
}
.nav-inner-signed-in {
  height:58px;
  justify-content:center;
}
.nav-links-signed-in {
  justify-content:center;
}

.profile-waiting {
  max-width:760px;
  margin:0 auto 24px;
  padding:18px;
  border:1px solid #3b302e;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,94,77,.055),rgba(20,20,22,.92) 42%);
}
.profile-waiting-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.profile-waiting-head h2 {
  margin:4px 0 0;
  font-size:24px;
  letter-spacing:-.04em;
}
.profile-waiting-head > span {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.profile-waiting-copy {
  margin:9px 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.profile-waiting-list {
  display:grid;
  gap:8px;
}
.waiting-post-card {
  appearance:none;
  width:100%;
  border:1px solid var(--line);
  background:#101012;
  color:var(--text);
  border-radius:14px;
  padding:13px 14px;
  text-align:left;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 14px;
  cursor:pointer;
}
.waiting-post-card:hover { border-color:#474047; }
.waiting-post-status {
  grid-column:1 / -1;
  color:var(--accent-2);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.waiting-post-status.closed { color:var(--muted); }
.waiting-post-card > strong {
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:14px;
}
.waiting-post-meta {
  grid-column:1;
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.waiting-post-manage {
  grid-column:2;
  grid-row:2 / span 2;
  align-self:center;
  color:#d8d8dd;
  font-size:11px;
  font-weight:800;
}

@media (max-width:720px) {
  html { scroll-padding-top:118px; }
  .signed-in-nav .nav-logo-row { height:46px; }
  .nav-centered-brand img { width:184px; height:30px; }
  .nav-inner-signed-in { height:56px; padding:0 10px; }
  .nav-links-signed-in { width:100%; justify-content:space-between; gap:0; }
  .nav-links-signed-in .nav-link { padding:9px 8px; }

  /* Keep a generous tap target, but make the visible circle only 34px. */
  .create-together {
    width:42px;
    height:42px;
    min-height:42px;
    background:radial-gradient(circle at center, var(--text) 0 17px, transparent 17.5px);
  }
  .create-together::before,
  .create-together::after {
    width:13px;
    height:2px;
  }

  .profile-waiting { margin:0 10px 20px; padding:15px; border-radius:17px; }
  .profile-waiting-copy { font-size:12px; }
  .waiting-post-card { grid-template-columns:minmax(0,1fr); gap:5px; padding:12px; }
  .waiting-post-meta { grid-column:1; }
  .waiting-post-manage { grid-column:1; grid-row:auto; justify-self:start; margin-top:3px; }
}

/* Feed media swipe + inline sound — Update 23 */
.feed-media-shell { position:relative; }
.feed-media-carousel {
  display:flex;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}
.feed-media-carousel::-webkit-scrollbar { display:none; }
.feed-media-slide {
  flex:0 0 100%;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  cursor:pointer;
}
.feed-media-shell .post-media-more { z-index:6; pointer-events:none; }
.feed-slide-author {
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:5;
  max-width:42%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(10,10,11,.72);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:11px;
  font-weight:850;
  backdrop-filter:blur(8px);
}
.feed-carousel-position {
  position:absolute;
  left:14px;
  top:14px;
  z-index:7;
  pointer-events:none;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(10,10,11,.74);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:11px;
  font-weight:850;
  backdrop-filter:blur(8px);
}
.feed-carousel-dots {
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:7;
  display:flex;
  gap:5px;
  pointer-events:none;
}
.feed-carousel-dots i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.feed-carousel-dots i.active { background:#fff; transform:scale(1.15); }
.feed-video-sound {
  position:absolute;
  right:14px;
  top:14px;
  z-index:8;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,10,11,.76);
  color:#fff;
  padding:0;
  box-shadow:0 6px 20px rgba(0,0,0,.24);
  backdrop-filter:blur(10px);
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.feed-video-sound:hover { background:rgba(26,26,29,.9); transform:translateY(-1px); }
.feed-video-sound.is-on {
  color:var(--accent);
  border-color:rgba(255,94,77,.72);
  background:rgba(16,12,12,.86);
}
.feed-sound-icon { width:18px; height:18px; display:grid; place-items:center; }
.feed-sound-icon svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:650px) {
  .feed-video-sound { width:34px; height:34px; right:12px; top:12px; }
  .feed-carousel-position { left:12px; top:12px; }
  .feed-slide-author { left:12px; bottom:12px; }
  .feed-carousel-dots { bottom:16px; }
}
.feed-carousel-arrow {
  position:absolute;
  top:50%;
  z-index:8;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(10,10,11,.7);
  color:#fff;
  font-size:30px;
  line-height:1;
  padding:0 0 3px;
  opacity:.72;
  backdrop-filter:blur(8px);
}
.feed-carousel-arrow:hover { opacity:1; background:rgba(20,20,22,.9); }
.feed-carousel-arrow.prev { left:12px; }
.feed-carousel-arrow.next { right:12px; }
@media (max-width:650px) { .feed-carousel-arrow { display:none; } }

/* Comment ownership + one-level threads — Update 26 */
.comment-thread + .comment-thread { border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px; }
.comment-replies { margin: 8px 0 2px 38px; padding-left: 12px; border-left: 2px solid rgba(255,94,77,.28); }
.social-comment-row.comment-reply { padding-top: 10px; }
.comment-content { min-width: 0; flex: 1; }
.comment-content > button { border: 0; background: transparent; color: inherit; padding: 0; text-align: left; }
.comment-content p { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-actions { display: flex; gap: 12px; margin-top: 7px; }
.comment-actions button { border: 0; background: transparent; color: var(--muted); padding: 0; font-size: 12px; font-weight: 800; }
.comment-actions button:hover { color: var(--text); }
.comment-deleted { color: var(--muted); font-style: italic; }
.comment-edited { display: inline-block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.comment-reply-slot { margin-top: 9px; }
.comment-inline-form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.comment-inline-form .input { flex: 1 1 180px; min-width: 0; }
.comment-inline-form .text-button { font-size: 12px; }
@media (max-width: 520px) {
  .comment-replies { margin-left: 24px; padding-left: 10px; }
  .comment-actions { gap: 14px; }
}

/* Shared-object visual language — Update 27
   BY_US should look like multiple people's contributions joined into one object,
   not a single-author media post with collaborators bolted on. */

/* Equal authorship is the visual headline of every feed card. */
.shared-author-header.feed {
  justify-content:center;
  text-align:center;
  border-bottom:0;
  padding:17px 16px 8px;
}
.shared-author-header.feed .shared-author-copy { align-items:center; }
.shared-author-header.feed .shared-author-copy strong {
  font-size:15px;
  letter-spacing:-.025em;
}
.shared-author-header.feed .shared-author-copy span {
  color:var(--accent-2);
  font-size:10px;
  letter-spacing:.1em;
}
.shared-author-header.feed .shared-avatar-hit .profile-avatar { border-color:#111113; }
.shared-object-card .post-caption {
  text-align:center;
  max-width:560px;
  margin:0 auto;
  padding:7px 18px 17px;
}

/* The visual BY_US itself is a joined deck. Two perspectives are visible at
   once by default, with the coral joint marking the shared object. */
.shared-object-card .feed-media-shell {
  background:linear-gradient(180deg,#0c0c0e,#09090a);
  padding:18px 0 24px;
  overflow:hidden;
  cursor:default;
}
.shared-object-card .feed-media-carousel {
  position:relative;
  gap:12px;
  padding:0 18% 0 4%;
  scroll-padding-left:4%;
}
.shared-object-card .shared-object-multi .feed-media-slide {
  flex:0 0 78%;
  width:78%;
  margin-right:0;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.38);
  scroll-snap-align:start;
  transition:transform .18s ease, opacity .18s ease, border-color .18s ease;
}
.shared-object-card .shared-object-multi .feed-media-slide:nth-child(even) {
  transform:translateY(18px);
}
.shared-object-card .shared-object-multi .feed-media-slide[data-feed-active="true"] {
  z-index:3;
  border-color:rgba(255,94,77,.46);
}
.shared-object-card .shared-object-multi .feed-media-slide:not([data-feed-active="true"]) {
  opacity:.88;
}
.shared-object-card .shared-object-single .feed-media-carousel { padding:0; }
.shared-object-card .shared-object-single .feed-media-slide {
  flex:0 0 100%;
  width:100%;
  margin:0;
}
.shared-object-card .shared-object-multi .post-media-cell { min-height:460px; }
.shared-object-card .shared-object-multi .feed-slide-author {
  left:12px;
  bottom:12px;
  max-width:72%;
  border-color:rgba(255,94,77,.28);
}
.shared-object-joint {
  position:absolute;
  left:81.5%;
  top:50%;
  z-index:7;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--accent);
  border:4px solid #0b0b0c;
  box-shadow:0 0 0 1px rgba(255,94,77,.4), 0 9px 24px rgba(0,0,0,.42);
  color:#fff;
  font-size:24px;
  font-weight:500;
  line-height:1;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.feed-media-shell.at-end .shared-object-joint { opacity:0; transform:translate(-50%,-50%) scale(.75); }
.shared-object-card .feed-carousel-position {
  left:18px;
  top:28px;
  background:rgba(9,9,10,.82);
  border-color:rgba(255,94,77,.3);
}
.shared-object-card .feed-carousel-dots { bottom:7px; }
.shared-object-card .feed-carousel-dots i.active { background:var(--accent); }
.shared-object-card .post-media-more {
  right:18px;
  bottom:9px;
  background:#111114;
  border-color:rgba(255,94,77,.5);
}

/* A more BY_US-specific action rail: understandable labels, but not the
   Instagram icon row. */
.byus-action-rail {
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.055);
  overflow-x:auto;
  scrollbar-width:none;
}
.byus-action-rail::-webkit-scrollbar { display:none; }
.byus-like-cluster {
  display:flex;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
}
.byus-rail-action,
.byus-rail-count,
.byus-rail-more {
  appearance:none;
  border:1px solid var(--line);
  background:#151518;
  color:#d7d7dc;
  min-height:38px;
  padding:0 13px;
  border-radius:999px;
  font:inherit;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.byus-like-cluster .byus-rail-action,
.byus-like-cluster .byus-rail-count {
  border:0;
  border-radius:0;
}
.byus-like-cluster .byus-rail-count {
  min-width:35px;
  padding:0 10px;
  border-left:1px solid var(--line);
  color:var(--muted);
}
.byus-rail-action b { color:var(--muted); font-size:11px; }
.byus-rail-action:hover,.byus-rail-count:hover,.byus-rail-more:hover { background:#1d1d21; color:#fff; }
.byus-rail-action.active { color:var(--accent); border-color:rgba(255,94,77,.5); }
.byus-rail-mark { font-size:18px; line-height:1; }
.byus-action-rail .post-action.contribute {
  flex:0 0 auto;
  margin-left:auto;
  min-height:38px;
  border-radius:999px;
  border-color:rgba(255,94,77,.52);
  background:rgba(255,94,77,.08);
  color:#ff9c79;
  padding:0 14px;
}
.byus-rail-more { width:38px; padding:0; letter-spacing:1px; color:var(--muted); }

/* Voices use the same joined-object grammar: individual voices are separate,
   but the coral rail makes the shared object visually explicit. */
.shared-object-card .voice-feed-preview {
  position:relative;
  padding:14px 16px 14px 34px;
  background:linear-gradient(180deg,#0d0d10,#09090b);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.shared-object-card .voice-feed-preview::before {
  content:'';
  position:absolute;
  left:20px;
  top:28px;
  bottom:28px;
  width:2px;
  border-radius:4px;
  background:linear-gradient(var(--accent),rgba(255,94,77,.24));
}
.shared-object-card .voice-feed-line {
  position:relative;
  margin:0 0 10px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#121215;
}
.shared-object-card .voice-feed-line:last-of-type { margin-bottom:0; border-bottom:1px solid var(--line); }
.shared-object-card .voice-feed-line::before {
  content:'×';
  position:absolute;
  left:-27px;
  top:16px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  border:3px solid #0b0b0c;
  color:#fff;
  font-size:14px;
  font-weight:850;
}
.shared-object-card .voice-feed-line strong { color:var(--accent-2); }
.shared-object-card .voice-feed-more { padding:8px 4px 0; }

/* Profile tiles also look shared at a glance instead of showing only the
   Starter's cover. */
.profile-grid-shared-preview {
  position:absolute;
  inset:0;
  display:flex;
  background:var(--accent);
}
.profile-grid-shared-preview.single { background:#080809; }
.profile-grid-slice {
  position:relative;
  min-width:0;
  height:100%;
  overflow:hidden;
  background:#080809;
}
.profile-grid-shared-preview.multi .profile-grid-slice { width:50%; }
.profile-grid-shared-preview.single .profile-grid-slice { width:100%; }
.profile-grid-slice img,.profile-grid-slice video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-grid-slice span {
  position:absolute;
  z-index:2;
  left:7px;
  bottom:7px;
  max-width:calc(100% - 14px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(8,8,9,.72);
  color:#fff;
  font-size:8px;
  font-weight:850;
  backdrop-filter:blur(6px);
}
.profile-grid-shared-preview.multi .slice-1 { margin-right:2px; }
.profile-grid-joint {
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--accent);
  border:3px solid #0b0b0c;
  color:#fff;
  font-style:normal;
  font-size:14px;
  font-weight:850;
}

/* Voice profile cards get the same connective rail. */
.voice-profile-copy { position:relative; padding-left:28px; }
.voice-profile-copy::before {
  content:'';
  position:absolute;
  left:15px;
  top:18px;
  bottom:18px;
  width:2px;
  background:rgba(255,94,77,.5);
}
.voice-profile-snippet { position:relative; }
.voice-profile-snippet::before {
  content:'×';
  position:absolute;
  left:-25px;
  top:0;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:850;
}

@media (max-width:650px) {
  .shared-author-header.feed { padding:14px 12px 7px; }
  .shared-author-header.feed .shared-author-copy strong { font-size:13px; }
  .shared-object-card .post-caption { font-size:14px; padding-bottom:13px; }
  .shared-object-card .feed-media-shell { padding-top:12px; }
  .shared-object-card .shared-object-multi .feed-media-carousel {
    gap:10px;
    padding-left:3%;
    padding-right:15%;
    scroll-padding-left:3%;
  }
  .shared-object-card .shared-object-multi .feed-media-slide {
    flex-basis:82%;
    width:82%;
    margin-right:0;
    border-radius:17px;
  }
  .shared-object-card .shared-object-multi .post-media-cell { min-height:380px; }
  .shared-object-card .shared-object-multi .feed-media-slide:nth-child(even) { transform:translateY(13px); }
  .shared-object-joint { left:84%; width:36px; height:36px; border-width:3px; font-size:20px; }
  .shared-object-card .feed-carousel-position { left:11px; top:19px; }
  .byus-action-rail { padding:9px 10px 11px; gap:6px; }
  .byus-rail-action,.byus-rail-count,.byus-rail-more { min-height:36px; padding:0 11px; font-size:11px; }
  .byus-action-rail .post-action.contribute { min-height:36px; padding:0 12px; font-size:11px; }
  .byus-rail-more { width:36px; }
}

/* Update 28 — main-feed perspective deck.
   The feed shows one centered perspective with neighboring perspectives peeking
   from the sides. Profiles keep the split-preview treatment from Update 27. */
.perspective-deck-shell {
  --deck-card-width: 60%;
  --deck-side-left: 18%;
  --deck-side-right: 82%;
  --deck-arrow-edge: 20%;
  background:linear-gradient(180deg,#0c0c0e,#09090a);
  padding:18px 0 30px;
  overflow:hidden;
  cursor:default;
}
.feed-perspective-deck {
  position:relative;
  width:100%;
  height:clamp(420px, 56vw, 540px);
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.perspective-deck-shell .feed-deck-card {
  position:absolute;
  top:0;
  left:50%;
  width:var(--deck-card-width);
  height:100%;
  min-height:0;
  margin:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:25px;
  overflow:hidden;
  background:#0b0b0d;
  box-shadow:0 20px 54px rgba(0,0,0,.42);
  transform:translateX(-50%) scale(.82);
  transform-origin:center center;
  opacity:0;
  filter:brightness(.48) saturate(.82);
  pointer-events:none;
  transition:left .24s cubic-bezier(.2,.75,.25,1), transform .24s cubic-bezier(.2,.75,.25,1), opacity .2s ease, filter .2s ease, border-color .2s ease;
}
.perspective-deck-shell .feed-deck-card.is-active {
  left:50%;
  z-index:5;
  transform:translateX(-50%) scale(1);
  opacity:1;
  filter:none;
  pointer-events:auto;
  border-color:rgba(255,255,255,.18);
}
.perspective-deck-shell .feed-deck-card.is-prev {
  left:var(--deck-side-left);
  z-index:2;
  transform:translateX(-50%) scale(.88);
  opacity:.74;
  filter:brightness(.5) saturate(.78);
  pointer-events:auto;
  cursor:pointer;
}
.perspective-deck-shell .feed-deck-card.is-next {
  left:var(--deck-side-right);
  z-index:2;
  transform:translateX(-50%) scale(.88);
  opacity:.74;
  filter:brightness(.5) saturate(.78);
  pointer-events:auto;
  cursor:pointer;
}
.perspective-deck-shell .feed-deck-card.is-hidden {
  opacity:0;
  pointer-events:none;
  z-index:0;
}
.perspective-deck-shell .feed-deck-card img,
.perspective-deck-shell .feed-deck-card video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.perspective-deck-shell .feed-deck-card:not(.is-active) .feed-slide-author,
.perspective-deck-shell .feed-deck-card:not(.is-active) .feed-video-sound {
  opacity:0;
  pointer-events:none;
}
.perspective-deck-shell .feed-slide-author { transition:opacity .15s ease; }

/* Coral navigation sits on the left/right edges of the active perspective. */
.perspective-deck-shell .feed-carousel-arrow {
  display:grid;
  top:50%;
  z-index:12;
  width:42px;
  height:42px;
  transform:translateY(-50%);
  border:3px solid #0b0b0c;
  background:var(--accent);
  color:#fff;
  opacity:1;
  box-shadow:0 8px 24px rgba(0,0,0,.42);
  backdrop-filter:none;
  padding:0;
}
.perspective-deck-shell .feed-arrow-icon {
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.perspective-deck-shell .feed-arrow-icon svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.perspective-deck-shell .feed-carousel-arrow:hover { background:var(--accent-2); transform:translateY(-50%) scale(1.04); }
.perspective-deck-shell .feed-carousel-arrow.prev { left:var(--deck-arrow-edge); }
.perspective-deck-shell .feed-carousel-arrow.next { right:var(--deck-arrow-edge); }
.perspective-deck-shell .feed-carousel-position {
  left:50%;
  top:12px;
  transform:translateX(-50%);
  background:rgba(9,9,10,.8);
  border-color:rgba(255,255,255,.14);
  white-space:nowrap;
}
.perspective-deck-shell .feed-carousel-dots { bottom:7px; }
.perspective-deck-shell .feed-carousel-dots i.active { background:var(--accent); }
.perspective-deck-shell .post-media-more {
  right:16px;
  bottom:8px;
  z-index:8;
}

/* Same-size terminal More card for BY_US posts with more than three visual
   perspectives. Clicking it opens the full post. */
.feed-deck-more {
  appearance:none;
  color:var(--text);
  font:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
  cursor:pointer;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,94,77,.24), transparent 34%),
    linear-gradient(145deg,#1d1b1c,#101012 60%,#0a0a0b) !important;
}
.feed-deck-more::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.035));
}
.feed-more-mark {
  position:relative;
  z-index:1;
  width:76px;
  height:auto;
  object-fit:contain;
  margin:0 0 8px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.feed-deck-more strong,
.feed-deck-more small { position:relative; z-index:1; }
.feed-deck-more strong { font-size:25px; letter-spacing:-.04em; }
.feed-deck-more small { color:var(--muted); font-size:12px; }

@media (max-width:650px) {
  .perspective-deck-shell {
    --deck-card-width:72%;
    --deck-side-left:10%;
    --deck-side-right:90%;
    --deck-arrow-edge:14%;
    padding:12px 0 28px;
  }
  .feed-perspective-deck { height:clamp(360px, 112vw, 500px); }
  .perspective-deck-shell .feed-deck-card { border-radius:20px; }
  .perspective-deck-shell .feed-deck-card.is-prev,
  .perspective-deck-shell .feed-deck-card.is-next { transform:translateX(-50%) scale(.9); opacity:.68; }
  .perspective-deck-shell .feed-carousel-arrow {
    display:grid;
    width:36px;
    height:36px;
    border-width:3px;
  }
  .perspective-deck-shell .feed-arrow-icon,
  .perspective-deck-shell .feed-arrow-icon svg { width:18px; height:18px; }
  .feed-more-mark { width:66px; }
  .perspective-deck-shell .feed-carousel-position { top:9px; font-size:10px; }
  .perspective-deck-shell .post-media-more { right:10px; bottom:7px; }
}


/* Update 29 — readable terminal More card + return-to-feed context. */
.perspective-deck-shell .feed-deck-more {
  background:linear-gradient(160deg,#17171a,#0d0d0f 72%) !important;
  isolation:isolate;
}
.perspective-deck-shell .feed-deck-more::before {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,94,77,.14), transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 42%);
  z-index:0;
}
/* Override the normal deck-card media rule: the BY_US mark is an icon here,
   not full-bleed media. */
.perspective-deck-shell .feed-deck-more img.feed-more-mark {
  position:relative;
  inset:auto;
  z-index:2;
  width:92px;
  height:78px;
  object-fit:contain;
  margin:0 0 8px;
  opacity:1;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.32));
}
.perspective-deck-shell .feed-deck-more strong {
  z-index:2;
  color:#fff;
  font-size:29px;
  line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.perspective-deck-shell .feed-deck-more small {
  z-index:2;
  color:#c7c7ce;
  font-size:13px;
  font-weight:750;
}
.perspective-deck-shell .feed-carousel-position[hidden] { display:none; }

.post-feed-back {
  appearance:none;
  border:1px solid var(--line);
  background:#111113;
  color:#d7d7dc;
  min-height:38px;
  padding:0 13px;
  border-radius:999px;
  margin:0 0 12px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font:inherit;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}
.post-feed-back:hover { color:#fff; border-color:#44444b; background:#18181b; }
.post-feed-back span { color:var(--accent); font-size:17px; line-height:1; }
.collection-wrap > .post-feed-back { margin:0 0 14px; }

@media (max-width:650px) {
  .perspective-deck-shell .feed-deck-more img.feed-more-mark { width:76px; height:66px; }
  .perspective-deck-shell .feed-deck-more strong { font-size:25px; }
  .perspective-deck-shell .feed-deck-more small { font-size:12px; }
  .post-feed-back { margin-left:4px; }
}


/* Update 30 — quieter feed deck labels + three-voice preview cap. */
/* The contributor header, handle labels, and dots already provide context, so
   the redundant "Perspective 1 of N" pill is intentionally absent. */
.shared-object-card .voice-feed-more-card {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0 0;
  padding:13px 14px;
  border:1px solid rgba(255,94,77,.34);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,94,77,.08),#111114);
  text-align:left;
}
.shared-object-card .voice-feed-more-card > img {
  position:relative;
  width:38px;
  height:32px;
  object-fit:contain;
  flex:0 0 38px;
}
.shared-object-card .voice-feed-more-card > span {
  display:grid;
  gap:2px;
}
.shared-object-card .voice-feed-more-card strong {
  color:#fff;
  font-size:13px;
  letter-spacing:-.015em;
}
.shared-object-card .voice-feed-more-card small {
  color:var(--muted);
  font-size:11px;
  font-weight:750;
}
@media (max-width:650px) {
  .shared-object-card .voice-feed-more-card { padding:12px; gap:10px; }
  .shared-object-card .voice-feed-more-card > img { width:34px; height:29px; flex-basis:34px; }
}

/* Voice-specific discussion — Update 32.
   Replies belong to an individual Voice and only appear on the full BY_US,
   while whole-post Comments remain a separate conversation surface. */
.voice-replies {
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.07);
}
.voice-replies-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.voice-replies-summary {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.voice-reply-trigger {
  appearance:none;
  border:1px solid rgba(255,94,77,.38);
  background:rgba(255,94,77,.07);
  color:var(--accent-2);
  min-height:32px;
  padding:0 11px;
  border-radius:999px;
  font:inherit;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}
.voice-reply-trigger:hover { background:rgba(255,94,77,.13); border-color:rgba(255,94,77,.62); }
.voice-reply-trigger.muted { color:var(--muted); border-color:var(--line); background:#151518; }
.voice-reply-list { display:grid; gap:9px; margin-top:12px; }
.voice-inline-reply {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:9px;
  padding:10px 11px;
  margin-left:18px;
  border-left:2px solid rgba(255,94,77,.34);
  background:rgba(255,255,255,.018);
  border-radius:0 12px 12px 0;
}
.voice-inline-reply .comment-avatar { width:30px; height:30px; flex:0 0 30px; font-size:10px; }
.voice-inline-reply-copy { min-width:0; }
.voice-inline-reply-author { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.voice-inline-reply-author strong { color:var(--text); font-size:12px; }
.voice-inline-reply-author span { color:var(--muted); font-size:10px; }
.voice-inline-reply p {
  margin:4px 0 0;
  color:#dddde2;
  font-size:13px;
  line-height:1.5;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.voice-inline-reply-actions { display:flex; gap:11px; margin-top:7px; }
.voice-inline-reply-actions button {
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:0;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.voice-inline-reply-actions button:hover { color:var(--text); }
.voice-reply-composer-slot:not(:empty) { margin-top:12px; }
.voice-reply-form {
  margin-left:18px;
  padding:12px;
  border:1px solid rgba(255,94,77,.25);
  border-radius:14px;
  background:#101012;
}
.voice-reply-form .textarea { min-height:86px; resize:vertical; font-size:14px; }
.voice-reply-form-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}
.voice-reply-count { color:var(--muted); font-size:10px; }
.voice-reply-count b { color:inherit; }
.voice-detail-entry .voice-replies { margin-top:20px; }

@media (max-width:520px) {
  .voice-inline-reply,
  .voice-reply-form { margin-left:8px; }
  .voice-reply-form-bottom { align-items:flex-end; }
  .voice-replies-head { gap:8px; }
}


/* Contributor identity links — Update 36 */
.contributor-identity {
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-align:left;
}
.contributor-profile-link {
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  cursor:pointer;
  border-radius:10px;
}
.contributor-profile-link:hover .contributor-identity-copy strong,
.contributor-profile-link:focus-visible .contributor-identity-copy strong { color:var(--accent-2); }
.contributor-profile-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.contributor-identity-copy { min-width:0; display:grid; gap:2px; }
.contributor-identity-copy strong { color:var(--text); font-size:13px; transition:color .15s ease; }
.contributor-identity-copy span { color:var(--muted); font-size:11px; }
.contributor-identity.compact { gap:8px; }
.profile-avatar.moment-author-avatar { width:30px; height:30px; flex:0 0 30px; font-size:10px; }
.moment-author .contributor-identity-copy strong { font-size:12px; }
.voice-moment-author .contributor-identity { width:max-content; max-width:100%; }
.perspective-person .contributor-identity { width:max-content; max-width:100%; }
.voice-detail-entry header .contributor-identity { width:max-content; max-width:100%; }

/* Update 38 — BY_US perspective-direction icon language.
   User-supplied split-circle marks replace the profile × joint and feed chevrons. */
.profile-grid-joint {
  width:30px;
  height:30px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:0 3px 12px rgba(0,0,0,.34);
  overflow:visible;
}
.profile-grid-joint img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.perspective-deck-shell .feed-carousel-arrow {
  width:46px;
  height:46px;
  border:0;
  background:transparent;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  overflow:visible;
  padding:0;
  border-radius:50%;
}
.perspective-deck-shell .feed-carousel-arrow img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.perspective-deck-shell .feed-carousel-arrow:hover {
  background:transparent;
  transform:translateY(-50%) scale(1.07);
}
.perspective-deck-shell .feed-carousel-arrow:focus-visible {
  outline:2px solid var(--accent-2);
  outline-offset:3px;
}

@media (max-width:650px) {
  .perspective-deck-shell .feed-carousel-arrow {
    width:40px;
    height:40px;
  }
  .profile-grid-joint {
    width:28px;
    height:28px;
  }
}


/* Update 38A — align the split inside each directional icon to the exact
   left/right edge of the active perspective card.  The icon is therefore
   half outside / half inside the active card, with its center divider
   sitting directly on the card boundary. */
.perspective-deck-shell .feed-carousel-arrow.prev {
  left:var(--deck-arrow-edge);
  right:auto;
  transform:translate(-50%, -50%);
}
.perspective-deck-shell .feed-carousel-arrow.next {
  right:var(--deck-arrow-edge);
  left:auto;
  transform:translate(50%, -50%);
}
.perspective-deck-shell .feed-carousel-arrow.prev:hover {
  transform:translate(-50%, -50%) scale(1.07);
}
.perspective-deck-shell .feed-carousel-arrow.next:hover {
  transform:translate(50%, -50%) scale(1.07);
}



/* Update 38C — precision directional split-circle controls.
   Same split-circle idea as 38B, but with cleaner geometry:
   - circle fill is perfectly flush and crisp
   - the direction arrow sits directly against the center split
   - active-card edge alignment from 38A remains unchanged
*/
.perspective-deck-shell .feed-carousel-arrow {
  background:linear-gradient(90deg, var(--accent) 0 50%, #f5f5f2 50% 100%);
  border:0;
  border-radius:999px;
  box-shadow:0 7px 18px rgba(0,0,0,.28);
  overflow:hidden;
  isolation:isolate;
}
.perspective-deck-shell .feed-carousel-arrow.next {
  background:linear-gradient(90deg, #f5f5f2 0 50%, var(--accent) 50% 100%);
}

/* Hide the older image asset while retaining the same accessible button DOM. */
.perspective-deck-shell .feed-carousel-arrow > img {
  display:none !important;
}

/* Crisp center divider to make the split feel intentional and flush. */
.perspective-deck-shell .feed-carousel-arrow::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(10,10,12,.10);
  transform:translateX(-50%);
  pointer-events:none;
  z-index:1;
}

/* Integrated direction cue. Each arrowhead is anchored directly to the split. */
.perspective-deck-shell .feed-carousel-arrow::after {
  content:'';
  position:absolute;
  top:50%;
  width:12px;
  height:16px;
  background:#0b0b0c;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;
}
.perspective-deck-shell .feed-carousel-arrow.prev::after {
  left:calc(50% - 12px);
  clip-path:polygon(100% 0, 0 50%, 100% 100%);
}
.perspective-deck-shell .feed-carousel-arrow.next::after {
  left:50%;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.perspective-deck-shell .feed-carousel-arrow.prev:hover {
  background:linear-gradient(90deg, var(--accent-2) 0 50%, #fff 50% 100%);
  transform:translate(-50%, -50%) scale(1.06);
}
.perspective-deck-shell .feed-carousel-arrow.next:hover {
  background:linear-gradient(90deg, #fff 0 50%, var(--accent-2) 50% 100%);
  transform:translate(50%, -50%) scale(1.06);
}

@media (max-width:650px) {
  .perspective-deck-shell .feed-carousel-arrow::after {
    width:10px;
    height:14px;
  }
  .perspective-deck-shell .feed-carousel-arrow.prev::after {
    left:calc(50% - 10px);
  }
}


/* Update 39 — quieter deck controls, compact mobile contribution CTA,
   and a bounded Activity history. */

/* Keep a generous tap target, but make the visible directional control smaller.
   The split line still sits precisely on the active-card edge because the
   visual circle is centered inside the 44px button hit area. */
.perspective-deck-shell .feed-carousel-arrow {
  width:44px;
  height:44px;
  background:transparent !important;
  border:0;
  box-shadow:none;
  overflow:visible;
  display:grid;
  place-items:center;
}
.perspective-deck-shell .feed-carousel-arrow::before,
.perspective-deck-shell .feed-carousel-arrow::after {
  content:none !important;
}
.perspective-deck-shell .feed-arrow-icon {
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:block;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent) 0 50%, #f5f5f2 50% 100%);
  box-shadow:0 5px 14px rgba(0,0,0,.26);
  pointer-events:none;
}
.perspective-deck-shell .feed-carousel-arrow.next .feed-arrow-icon {
  background:linear-gradient(90deg, #f5f5f2 0 50%, var(--accent) 50% 100%);
}
.perspective-deck-shell .feed-arrow-icon svg { display:none !important; }
.perspective-deck-shell .feed-arrow-icon::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:rgba(10,10,12,.1);
}
.perspective-deck-shell .feed-arrow-icon::after {
  content:'';
  position:absolute;
  top:50%;
  width:9px;
  height:12px;
  transform:translateY(-50%);
  background:#0b0b0c;
}
.perspective-deck-shell .feed-carousel-arrow.prev .feed-arrow-icon::after {
  left:calc(50% - 9px);
  clip-path:polygon(100% 0, 0 50%, 100% 100%);
}
.perspective-deck-shell .feed-carousel-arrow.next .feed-arrow-icon::after {
  left:50%;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.perspective-deck-shell .feed-carousel-arrow.prev:hover,
.perspective-deck-shell .feed-carousel-arrow.prev:focus-visible {
  background:transparent !important;
  transform:translate(-50%, -50%) scale(1);
}
.perspective-deck-shell .feed-carousel-arrow.next:hover,
.perspective-deck-shell .feed-carousel-arrow.next:focus-visible {
  background:transparent !important;
  transform:translate(50%, -50%) scale(1);
}
.perspective-deck-shell .feed-carousel-arrow:hover .feed-arrow-icon,
.perspective-deck-shell .feed-carousel-arrow:focus-visible .feed-arrow-icon {
  transform:scale(1.05);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}

/* Responsive contribution labels. */
.contribute-label-compact { display:none; }

.activity-needs-events { margin-top:10px; }
.activity-history-details {
  margin-top:12px;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.activity-history-details summary {
  width:max-content;
  max-width:100%;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  padding:7px 2px;
}
.activity-history-details summary::-webkit-details-marker { display:none; }
.activity-history-details summary::before {
  content:'›';
  font-size:18px;
  line-height:1;
  transition:transform .15s ease;
}
.activity-history-details[open] summary::before { transform:rotate(90deg); }
.activity-history-details summary span {
  min-width:22px;
  padding:2px 7px;
  border-radius:999px;
  background:#1b1b1f;
  color:var(--text);
  text-align:center;
  font-size:10px;
}
.activity-history-details .activity-events { margin-top:9px; }

@media (max-width:650px) {
  .perspective-deck-shell .feed-arrow-icon {
    width:30px;
    height:30px;
    flex-basis:30px;
  }
  .perspective-deck-shell .feed-arrow-icon::after {
    width:8px;
    height:10px;
  }
  .perspective-deck-shell .feed-carousel-arrow.prev .feed-arrow-icon::after {
    left:calc(50% - 8px);
  }

  .contribute-label-full { display:none; }
  .contribute-label-compact { display:inline; }
  .byus-action-rail .post-action.contribute,
  .byus-action-rail .post-action.requested {
    min-height:34px;
    padding:0 9px;
    font-size:10px;
    letter-spacing:0;
  }

  .activity-history-details { margin-top:10px; }
}


/* Update 40 — profile relationship controls + passive views/reply metrics. */
.profile-stats .profile-stat-button {
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  display:flex;
  gap:7px;
  align-items:baseline;
  cursor:pointer;
  font:inherit;
  text-align:left;
  border-radius:8px;
}
.profile-stats .profile-stat-button:hover span,
.profile-stats .profile-stat-button:focus-visible span { color:var(--text); }
.profile-stats .profile-stat-button:focus-visible {
  outline:2px solid rgba(255,94,77,.5);
  outline-offset:5px;
}

.post-passive-metric {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--muted);
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
  pointer-events:none;
}
.post-passive-metric svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.byus-action-rail .feed-view-metric {
  flex:0 0 auto;
  min-height:38px;
  padding:0 5px;
  opacity:.76;
}
.profile-grid-counts .post-passive-metric {
  min-height:20px;
}
.profile-grid-counts .post-passive-metric svg {
  width:12px;
  height:12px;
}
.post-passive-metric.replies { color:#a8a8b1; }

/* Restore the top-centered Voice count treatment so Posts and Voices use
   the same profile-card hierarchy. */
.voice-profile-tile { position:relative; }
.voice-profile-count-badge {
  position:absolute;
  z-index:6;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - 28px);
  padding:6px 9px;
  border:1px solid rgba(255,94,77,.55);
  border-radius:999px;
  background:rgba(8,8,9,.86);
  color:#fff;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  backdrop-filter:blur(10px);
  pointer-events:none;
}
.voice-profile-count-badge.waiting {
  border-color:rgba(255,208,88,.48);
  color:#ffd66b;
}
.voice-profile-top { padding-top:44px; }
.voice-profile-bottom { justify-content:flex-end; }

.social-person-row span {
  min-width:0;
  display:grid;
  gap:1px;
}
.social-person-row small {
  color:var(--muted);
  font-size:11px;
}

@media (max-width:650px) {
  .byus-action-rail .feed-view-metric {
    min-height:34px;
    padding:0 3px;
    font-size:10px;
  }
}
@media (max-width:520px) {
  .voice-profile-count-badge { top:8px; font-size:9px; padding:5px 7px; }
  .voice-profile-top { padding-top:38px; }
}

/* Update 41 — restore the profile-grid joint marker to the clean split-circle
   language, but with a softer / slightly transparent treatment. This only
   affects the profile-side middle connector, not the feed carousel arrows. */
.profile-grid-joint {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg,
    rgba(255, 94, 77, 0.78) 0%,
    rgba(255, 94, 77, 0.78) 50%,
    rgba(239, 239, 242, 0.78) 50%,
    rgba(239, 239, 242, 0.78) 100%) !important;
  border: 2px solid rgba(0, 0, 0, 0.72) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
}

@media (max-width: 700px) {
  .profile-grid-joint {
    width: 20px !important;
    height: 20px !important;
  }
}


/* Update 42 — exact supplied split-circle artwork, only scaled down. */

/* PROFILE seam marker */
.profile-grid-joint {
  width:18px !important;
  height:18px !important;
  border:0 !important;
  border-radius:50% !important;
  background:url('/ui/perspective-control-exact.png') center / 100% 100% no-repeat !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:-9999px;
  overflow:hidden;
  opacity:1 !important;
}

/* FEED directional controls use the same exact icon; right side is mirrored. */
.perspective-deck-shell .feed-carousel-arrow {
  width:42px !important;
  height:42px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.perspective-deck-shell .feed-carousel-arrow::before,
.perspective-deck-shell .feed-carousel-arrow::after {
  content:none !important;
}
.perspective-deck-shell .feed-arrow-icon {
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  display:block !important;
  border:0 !important;
  border-radius:50% !important;
  background:url('/ui/perspective-control-exact.png') center / 100% 100% no-repeat !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transform:none !important;
}
.perspective-deck-shell .feed-carousel-arrow.next .feed-arrow-icon {
  transform:scaleX(-1) !important;
}
.perspective-deck-shell .feed-arrow-icon::before,
.perspective-deck-shell .feed-arrow-icon::after,
.perspective-deck-shell .feed-arrow-icon svg {
  display:none !important;
  content:none !important;
}

/* PHONE: keep Join/Add as a compact pill instead of inheriting width:100%. */
@media (max-width:650px) {
  .profile-grid-joint {
    width:16px !important;
    height:16px !important;
  }

  .perspective-deck-shell .feed-arrow-icon {
    width:26px !important;
    height:26px !important;
    flex-basis:26px !important;
  }

  .byus-action-rail .post-action.contribute,
  .byus-action-rail .post-action.requested {
    width:auto !important;
    max-width:max-content !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
    padding:0 10px !important;
    min-height:34px !important;
    text-align:center !important;
  }
}


/* Release gate: restored Voice/Reply distinction on full Voices pages. */
.voice-conversation-guide {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:12px 0 16px;
  padding:12px 14px;
  border:1px solid rgba(255,94,77,.22);
  border-radius:14px;
  background:rgba(255,94,77,.055);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.voice-conversation-guide strong {
  flex:0 0 auto;
  color:var(--accent-2);
  font-size:12px;
}
.voice-conversation-guide span { min-width:0; }

@media (max-width:520px) {
  .voice-conversation-guide {
    display:grid;
    gap:4px;
    margin:10px 0 14px;
    padding:11px 12px;
  }
}