/* "Add your pose": card button, sheet, profile posts. Uses site tokens from site.css. */
:root { --sp-red:#b83a28; --sp-red-hover:#9c2e1f; --sp-red-light:#faece9; --sp-ink:#2b1f17; --sp-soft:#635244; --sp-line:rgba(59,42,30,.14); }

.card-share-btn { position:absolute; top:8px; left:8px; z-index:5; width:44px; height:44px; border-radius:50%; border:1px solid rgba(59,42,30,.1); background:rgba(255,255,255,.85); backdrop-filter:blur(8px); color:var(--ink-muted,#948273); display:grid; place-items:center; cursor:pointer; padding:0; transition:transform .2s, color .2s; }
.card-share-btn:hover, .card-share-btn:focus-visible { background:#fff; color:var(--sp-red); transform:scale(1.12); }

.sp-backdrop { position:fixed; inset:0; z-index:200; background:rgba(43,31,23,.45); }
.sp-sheet { background:#fff; color:var(--sp-ink); display:flex; flex-direction:column; font-family:"DM Sans",system-ui,sans-serif; }
.sp-sheet--modal { position:fixed; z-index:201; left:50%; bottom:0; transform:translateX(-50%); width:min(560px,100%); max-height:92vh; border-radius:22px 22px 0 0; box-shadow:0 -12px 40px rgba(43,31,23,.25); }
.sp-sheet--page { max-width:640px; margin:0 auto; border-radius:22px; border:1px solid var(--sp-line); }
@media (min-width:720px) { .sp-sheet--modal { top:50%; bottom:auto; transform:translate(-50%,-50%); border-radius:22px; max-height:88vh; } }
.sp-head { align-items:center; display:flex; justify-content:space-between; padding:16px 20px 8px; }
.sp-head h2 { font-family:"Fraunces",Georgia,serif; font-size:1.35rem; margin:0; }
.sp-close { background:none; border:0; cursor:pointer; font-size:1.6rem; height:44px; line-height:1; width:44px; color:var(--sp-soft); }
.sp-body { display:grid; gap:14px; overflow-y:auto; padding:8px 20px 16px; }
.sp-label { font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--sp-soft); }
.sp-chip { align-items:center; background:var(--sp-red-light); border-radius:999px; display:inline-flex; gap:8px; padding:8px 8px 8px 14px; font-weight:700; }
.sp-chip button { background:#fff; border:0; border-radius:50%; cursor:pointer; height:28px; width:28px; }
.sp-search { border:1px solid var(--sp-line); border-radius:14px; font:inherit; padding:12px 14px; width:100%; }
.sp-results { border:1px solid var(--sp-line); border-radius:14px; list-style:none; margin:6px 0 0; max-height:220px; overflow-y:auto; padding:4px; }
.sp-results button { background:none; border:0; border-radius:10px; cursor:pointer; display:block; font:inherit; padding:10px; text-align:left; width:100%; }
.sp-results button:hover, .sp-results button:focus-visible { background:var(--sp-red-light); }
.sp-results small { color:var(--sp-soft); display:block; }
.sp-drop { align-items:center; border:2px dashed var(--sp-line); border-radius:16px; cursor:pointer; display:grid; gap:2px; justify-items:center; padding:20px; text-align:center; }
.sp-drop:hover, .sp-drop.is-over, .sp-drop:focus-within { background:var(--sp-red-light); border-color:var(--sp-red); }
.sp-drop strong { font-size:1.05rem; }
.sp-drop small { color:var(--sp-soft); }
.sp-drop input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.sp-items { display:grid; gap:10px; list-style:none; margin:0; padding:0; }
.sp-item { align-items:start; display:grid; gap:10px; grid-template-columns:84px 1fr auto; }
.sp-item img, .sp-item video { aspect-ratio:1; background:#f4ede1; border-radius:12px; object-fit:cover; width:84px; }
.sp-item textarea { border:1px solid var(--sp-line); border-radius:12px; font:inherit; min-height:84px; padding:10px 12px; resize:vertical; width:100%; }
.sp-item button { background:none; border:0; color:var(--sp-soft); cursor:pointer; font-size:1.3rem; height:44px; width:44px; }
.sp-share { align-items:flex-start; display:flex; font-size:.92rem; gap:10px; }
.sp-share input { flex:none; height:20px; margin-top:2px; width:20px; }
.sp-share small { color:var(--sp-soft); display:block; }
.sp-status { color:var(--sp-soft); margin:0; min-height:1.3em; }
.sp-status.is-error { color:var(--sp-red); font-weight:700; }
.sp-foot { border-top:1px solid var(--sp-line); padding:12px 20px 16px; }
.sp-primary, .sp-link { background:var(--sp-red); border:0; border-radius:999px; color:#fff; cursor:pointer; display:inline-block; font:inherit; font-weight:700; padding:14px 24px; text-align:center; text-decoration:none; }
.sp-foot .sp-primary { width:100%; }
.sp-primary:hover, .sp-link:hover { background:var(--sp-red-hover); }
.sp-primary:disabled { background:#d9cfc4; cursor:not-allowed; }
.sp-secondary { background:#fff; border:1px solid var(--sp-line); border-radius:999px; color:var(--sp-ink); cursor:pointer; font:inherit; font-weight:700; padding:13px 22px; }
.sp-done { display:grid; gap:12px; justify-items:center; padding:24px 8px; text-align:center; }
.sp-done p { margin:0; }
.sp-done-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
body.sp-open { overflow:hidden; }

/* Profile: "My poses" */
.my-poses { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); list-style:none; margin:0; padding:0; }
.my-pose { background:#fff; border:1px solid var(--sp-line); border-radius:18px; display:grid; gap:10px; padding:14px; }
.my-pose__head { align-items:center; display:flex; gap:8px; justify-content:space-between; }
.my-pose__head h3 { font-size:1.05rem; margin:0; }
.my-pose__state { background:#eee7db; border-radius:999px; font-size:.75rem; font-weight:700; padding:3px 10px; }
.my-pose__state[data-state="public"] { background:#ecf3ed; color:#3f6846; }
.my-pose__media { display:grid; gap:10px; list-style:none; margin:0; padding:0; }
.my-pose__media li { display:grid; gap:6px; }
.my-pose__media img, .my-pose__media video { aspect-ratio:4/3; background:#f4ede1; border-radius:12px; object-fit:cover; width:100%; }
.my-pose__media p { color:var(--sp-soft); font-size:.92rem; margin:0; }
.my-pose__media p:empty::before { color:#b0a396; content:"No description"; }
.my-pose__media textarea { border:1px solid var(--sp-line); border-radius:10px; font:inherit; padding:8px 10px; width:100%; }
.my-pose__actions { display:flex; flex-wrap:wrap; gap:8px; }
.my-pose__actions button { background:none; border:1px solid var(--sp-line); border-radius:999px; cursor:pointer; font:inherit; font-size:.85rem; padding:8px 14px; }
.my-pose__actions button[data-post-action="delete"] { color:var(--sp-red); }
#my-poses { display:contents; }
.sp-sheet--page .sp-head { display:none; }
.my-pose__media li { align-items:start; grid-template-columns:96px 1fr; }
.my-pose__media img, .my-pose__media video { aspect-ratio:1; }
.my-pose__media textarea { grid-column:2; }
/* Neutralise the generic red pill from community.css for our small buttons. */
.sp-close, .sp-item button, .sp-chip button, .sp-results button, .my-pose__actions button { box-shadow:none; color:var(--sp-ink); min-height:0; text-transform:none; }
.my-pose__actions button { background:#fff; min-height:40px; }
.my-pose__actions button[data-post-action="delete"] { color:var(--sp-red); }
.sp-close, .sp-item button, .sp-results button { background:none; }
.sp-chip button { background:#fff; padding:0; }
.sp-secondary { box-shadow:none; color:var(--sp-ink); }
.sp-foot .sp-primary { min-height:48px; }
.my-pose__actions button:hover, .sp-secondary:hover { background:var(--sp-red-light); transform:none; box-shadow:none; }
.sp-close:hover, .sp-item button:hover, .sp-results button:hover, .sp-chip button:hover { background:var(--sp-red-light); transform:none; box-shadow:none; }
.sp-primary:hover:disabled { background:#d9cfc4; transform:none; }

.sp-chip { padding-left: 6px; }
.sp-chip__img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: #fff; flex: none; }
.sp-results button { display: flex; align-items: center; gap: 10px; }

.sp-result__img { width: 44px; height: 44px; border-radius: 12px; }
.sp-result__text { display: grid; min-width: 0; }
.sp-result__text small { display: block; }

.sp-perk { display: block; margin-top: 3px; font-style: normal; font-size: .85rem; font-weight: 600; color: var(--sp-red, #b83a28); }

.sp-whisper { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 6px; border-radius: 16px; background: var(--sp-red-light, #fbeae6); }
.sp-whisper img { flex: none; width: 72px; height: 72px; object-fit: contain; }
.sp-whisper p { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--sp-soft, #6b5a4e); }
.sp-whisper strong { display: block; color: var(--sp-red, #b83a28); font-weight: 800; }
.sp-limits { color:var(--sp-soft); font-size:12.5px; line-height:1.45; margin:0; }