/* The Social tab.
 *
 * Its own look, built on the app's tokens: posts are cards with the media
 * set inside them, not edge to edge; a text post is a tinted note whose
 * colour says what it is about (training indigo, food green, motivation
 * amber, learning teal); professionals carry a two-tone ring and a badge.
 * Every offset is logical, so Persian mirrors the whole layout. Touch
 * targets are 44px or more, and motion is short and off when the reader
 * asks for less. Every class here starts with `sx-`.
 */

:root {
  --sx-train: #4f46e5;
  --sx-food: #15803d;
  --sx-spark: #c2410c;
  --sx-learn: #0f766e;
  --sx-like: #e11d48;
  --sx-ring-a: var(--accent);
  --sx-ring-b: #14b8a6;
  --sx-gap: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sx-train: #a5b4fc;
    --sx-food: #4ade80;
    --sx-spark: #fdba74;
    --sx-learn: #5eead4;
    --sx-like: #fb7185;
    --sx-ring-b: #2dd4bf;
  }
}
:root[data-theme='dark'] {
  --sx-train: #a5b4fc;
  --sx-food: #4ade80;
  --sx-spark: #fdba74;
  --sx-learn: #5eead4;
  --sx-like: #fb7185;
  --sx-ring-b: #2dd4bf;
}

.sx-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────────────────────── header ─────────────────────────── */

.sx-top { align-items: center; }
.sx-top-start { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sx-top-start h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-top-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.sx-icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--text);
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 44px;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.sx-icon-button:active { transform: scale(0.94); }
@media (hover: hover) { .sx-icon-button:hover { background: var(--surface-2); } }
.sx-dot-badge {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

/* ─────────────────────────── people ─────────────────────────── */

.sx-avatar {
  --sx-size: 40px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--sx-size);
  height: var(--sx-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
}
.sx-avatar img, .sx-avatar .sx-initial { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sx-avatar-xs { --sx-size: 30px; }
.sx-avatar-s { --sx-size: 38px; }
.sx-avatar-m { --sx-size: 46px; }
.sx-avatar-l { --sx-size: 64px; }
.sx-avatar-xl { --sx-size: 88px; }
/* A professional's two-tone ring: the badge says what they are, the ring makes it findable at a glance. */
.sx-avatar-pro { padding: 2px; background: linear-gradient(135deg, var(--sx-ring-a), var(--sx-ring-b)); }
.sx-avatar-pro img, .sx-avatar-pro .sx-initial { box-shadow: 0 0 0 2px var(--surface); }
.sx-initial {
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: calc(var(--sx-size) * 0.42);
  color: #fff;
  user-select: none;
}
.sx-tint-0 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.sx-tint-1 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.sx-tint-2 { background: linear-gradient(135deg, #10b981, #0d9488); }
.sx-tint-3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.sx-tint-4 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.sx-tint-5 { background: linear-gradient(135deg, #14b8a6, #22c55e); }

.sx-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.sx-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-weight: 700; }
.sx-role {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--accent);
  background: var(--accent-soft);
  white-space: nowrap;
}
.sx-role-nutritionist { color: var(--sx-food); background: color-mix(in srgb, var(--sx-food) 13%, transparent); }
.sx-role-tick { width: 13px; height: 13px; stroke-width: 2.6; }
.sx-handle { color: var(--text-dim); font-size: 0.86rem; unicode-bidi: isolate; }

.sx-people { display: flex; flex-direction: column; gap: 2px; }
.sx-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-block-end: 8px;
}
.sx-person-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 56px; color: inherit; text-decoration: none; }
.sx-person-id { display: flex; flex-direction: column; min-width: 0; }
.sx-row-actions { display: flex; gap: 6px; flex: none; }

/* ─────────────────────────── the feed's head ─────────────────────────── */

.sx-hub {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-inline: -16px;
  padding: 2px 16px 10px;
}
.sx-hub::-webkit-scrollbar { display: none; }
.sx-hub-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}
.sx-hub-chip .sx-dot-badge { position: static; margin-inline-start: 6px; box-shadow: none; }

.sx-feed-top { margin-block-end: var(--sx-gap); }
.sx-compose-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text-dim);
  text-decoration: none;
}
.sx-compose-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-compose-plus {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  flex: none;
}

.sx-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-block-end: var(--sx-gap);
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.sx-tab {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--text-dim);
  font-weight: 650;
}
.sx-tab[aria-selected='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 1px 6px rgb(16 24 40 / 0.06); }

/* ─────────────────────────── usernames ─────────────────────────── */

.sx-claim {
  padding: 18px 16px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 70%);
  box-shadow: var(--shadow);
}
.sx-claim-head { display: flex; align-items: center; gap: 14px; margin-block-end: 14px; }
.sx-claim-head h2 { margin: 0 0 2px; }
.sx-claim-form { display: flex; flex-direction: column; gap: 10px; }
.sx-username-box {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 50px;
  padding-inline: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  direction: ltr;
}
.sx-username-box:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 1px; }
.sx-at { color: var(--text-dim); font-weight: 700; }
.sx-username-input.sx-username-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 2px;
  outline: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.sx-username-state { min-height: 1.5em; margin: 4px 2px 0; font-size: 0.86rem; color: var(--text-dim); }
.sx-username-state.ok { color: var(--ok); }
.sx-username-state.bad { color: var(--danger); }
.sx-rules { margin: 12px 0 0; padding-inline-start: 18px; color: var(--text-dim); font-size: 0.82rem; }
.sx-rules li { margin-block-end: 2px; }

/* ─────────────────────────── posts ─────────────────────────── */

.sx-feed, .sx-list { display: flex; flex-direction: column; gap: var(--sx-gap); }
.sx-post {
  position: relative;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.sx-post-hidden { border-style: dashed; }
.sx-hidden-note {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.84rem;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.sx-post-head { display: flex; align-items: center; gap: 8px; margin-block-end: 10px; }
.sx-post-author { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
.sx-post-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sx-post-meta { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.8rem; min-width: 0; }
.sx-post-meta .sx-handle { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-audience { display: inline-grid; place-items: center; }
.sx-audience .sx-icon { width: 14px; height: 14px; stroke-width: 2; }

/* The media sits inside the card, with its own corners, rather than running edge to edge. */
.sx-media { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.sx-media-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.sx-media-track::-webkit-scrollbar { display: none; }
.sx-media-item { flex: 0 0 100%; margin: 0; aspect-ratio: 4 / 5; scroll-snap-align: center; }
.sx-media-item img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.sx-dots {
  position: absolute;
  inset-block-end: 10px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.sx-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 0.55); transition: transform 0.2s var(--ease), background-color 0.2s var(--ease); }
.sx-dots span.on { background: #fff; transform: scale(1.25); }
.sx-media-count {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: rgb(15 17 21 / 0.55);
  backdrop-filter: blur(6px);
}
.sx-cat {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.sx-cat.sx-tone-train { color: var(--sx-train); background: color-mix(in srgb, var(--sx-train) 13%, transparent); }
.sx-cat.sx-tone-food { color: var(--sx-food); background: color-mix(in srgb, var(--sx-food) 13%, transparent); }
.sx-cat.sx-tone-spark { color: var(--sx-spark); background: color-mix(in srgb, var(--sx-spark) 13%, transparent); }
.sx-cat.sx-tone-learn { color: var(--sx-learn); background: color-mix(in srgb, var(--sx-learn) 13%, transparent); }
.sx-cat.sx-cat-over {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  color: #fff;
  background: rgb(15 17 21 / 0.5);
  backdrop-filter: blur(6px);
}

/* A text post: a tinted note, coloured by what it is about. */
.sx-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 18px 16px;
  border-radius: 14px;
  --sx-tone: var(--sx-learn);
  background: linear-gradient(150deg, color-mix(in srgb, var(--sx-tone) 15%, var(--surface)), color-mix(in srgb, var(--sx-tone) 4%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--sx-tone) 18%, transparent);
}
.sx-note.sx-tone-train { --sx-tone: var(--sx-train); }
.sx-note.sx-tone-food { --sx-tone: var(--sx-food); }
.sx-note.sx-tone-spark { --sx-tone: var(--sx-spark); }
.sx-note.sx-tone-learn { --sx-tone: var(--sx-learn); }
.sx-note .sx-caption { margin: 0; font-size: 1.08rem; line-height: 1.6; font-weight: 520; color: var(--text); }

.sx-caption { margin: 12px 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; }
.sx-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sx-link-button {
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-dim);
  font-weight: 650;
  font-size: 0.86rem;
}

.sx-advice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sx-learn);
  background: color-mix(in srgb, var(--sx-learn) 10%, transparent);
}
.sx-advice .sx-icon { width: 18px; height: 18px; margin-block-start: 1px; }

.sx-actions { display: flex; align-items: center; gap: 2px; margin-block-start: 8px; margin-inline: -6px; }
.sx-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-weight: 650;
  font-size: 0.9rem;
  text-decoration: none;
}
@media (hover: hover) { .sx-act:hover { background: var(--surface-2); } }
.sx-count:empty { display: none; }
.sx-like[aria-pressed='true'] { color: var(--sx-like); }
.sx-like[aria-pressed='true'] .sx-icon { fill: currentColor; }
.sx-save[aria-pressed='true'] { color: var(--accent); }
.sx-save[aria-pressed='true'] .sx-icon { fill: currentColor; }
.sx-spacer { flex: 1; }
.sx-pop .sx-icon { animation: sx-pop 0.36s var(--ease); }
@keyframes sx-pop { 40% { transform: scale(1.28); } 100% { transform: none; } }
.sx-burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #fff;
  animation: sx-burst 0.7s var(--ease) both;
}
.sx-burst .sx-icon { width: 96px; height: 96px; fill: currentColor; stroke: none; filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.35)); }
@keyframes sx-burst { 0% { opacity: 0; transform: scale(0.5); } 30% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.2); } }
.sx-view-comments { display: inline-block; margin: 2px 4px 0; padding-block: 6px; font-size: 0.86rem; color: var(--text-dim); text-decoration: none; }

/* ─────────────────────────── sheets, toasts, loading, empty ─────────────────────────── */

.sx-sheet { display: flex; flex-direction: column; gap: 4px; }
.sx-sheet-item {
  min-height: 50px;
  justify-content: flex-start;
  text-align: start;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: none;
}
.sx-sheet-item.danger { color: var(--danger); }

.sx-toast {
  position: fixed;
  z-index: 200;
  inset-inline: 16px;
  inset-block-end: calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom));
  max-width: 420px;
  margin-inline: auto;
  padding: 12px 16px;
  border-radius: 14px;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bg);
  background: var(--text);
  box-shadow: var(--shadow-3);
  animation: sx-toast-in 0.25s var(--ease) both;
}
.sx-toast-out { opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
@keyframes sx-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sx-skeleton-list { display: flex; flex-direction: column; gap: var(--sx-gap); }
.sx-bone { display: block; border-radius: 10px; background: var(--surface-2); position: relative; overflow: hidden; }
.sx-bone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  animation: sx-shimmer 1.3s linear infinite;
}
@keyframes sx-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sx-bone-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.sx-bone-line { height: 14px; width: 46%; }
.sx-bone-line.short { width: 30%; margin-block-start: 12px; }
.sx-bone-media { aspect-ratio: 4 / 3; border-radius: 14px; }

.sx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--surface);
}
.sx-empty p { margin: 0; max-width: 34ch; }
.sx-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-block-end: 4px;
  border-radius: 18px;
  color: var(--accent);
  background: var(--accent-soft);
}
.sx-empty-icon .sx-icon { width: 28px; height: 28px; }
.sx-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 10px; }
.sx-paged .sx-more { display: block; margin: 12px auto 0; }
.sx-list-status:empty { display: none; }

/* ─────────────────────────── a post's comments ─────────────────────────── */

.sx-section-title { display: flex; align-items: center; gap: 6px; font-size: 0.98rem; margin: 18px 2px 10px; }
.sx-section-title .sx-icon { width: 18px; height: 18px; color: var(--text-dim); }
.sx-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sx-comment { display: flex; gap: 10px; align-items: flex-start; }
.sx-comment > a { flex: none; }
.sx-comment-body {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 16px;
  /* The corner nearest the avatar is the speech bubble's tail, on either side of the page. */
  border-start-start-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.sx-comment-body p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-comment-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.86rem; }
.sx-comment-head time { color: var(--text-faint); font-size: 0.78rem; }
.sx-comment-actions { display: flex; gap: 10px; }
.sx-comment-actions .sx-link-button { min-height: 32px; font-size: 0.8rem; }
.sx-no-comments { padding: 8px 2px; }
.sx-composer-dock {
  position: sticky;
  z-index: 5;
  inset-block-end: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom));
  margin-block-start: 16px;
}
.sx-comment-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
}
.sx-comment-composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none; border-radius: 14px; }

/* ─────────────────────────── search ─────────────────────────── */

.sx-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding-inline: 14px;
  margin-block-end: 8px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
}
.sx-search:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 1px; }
.sx-search-input.sx-search-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 12px 0; }

/* ─────────────────────────── grids: a profile's posts, Saved ─────────────────────────── */

.sx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.sx-grid > .sx-empty { grid-column: 1 / -1; }
.sx-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  text-decoration: none;
}
.sx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); }
@media (hover: hover) { .sx-tile:hover img { transform: scale(1.03); } }
.sx-tile-text {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  overflow: hidden;
  overflow-wrap: anywhere;
}
.sx-tile.sx-tone-train .sx-tile-text { background: color-mix(in srgb, var(--sx-train) 14%, var(--surface)); }
.sx-tile.sx-tone-food .sx-tile-text { background: color-mix(in srgb, var(--sx-food) 14%, var(--surface)); }
.sx-tile.sx-tone-spark .sx-tile-text { background: color-mix(in srgb, var(--sx-spark) 14%, var(--surface)); }
.sx-tile.sx-tone-learn .sx-tile-text { background: color-mix(in srgb, var(--sx-learn) 14%, var(--surface)); }
.sx-tile-multi, .sx-tile-hidden {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #fff;
  background: rgb(15 17 21 / 0.5);
}
.sx-tile-hidden { inset-inline-end: auto; inset-inline-start: 6px; }
.sx-tile-multi .sx-icon, .sx-tile-hidden .sx-icon { width: 15px; height: 15px; }

/* ─────────────────────────── the composer ─────────────────────────── */

.sx-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.sx-compose-author { display: flex; align-items: center; gap: 10px; }
.sx-compose-author > span { display: flex; flex-direction: column; }
.sx-caption-input.sx-caption-input { min-height: 120px; resize: vertical; width: 100%; font-size: 1.02rem; line-height: 1.6; }
.sx-counter { align-self: flex-end; font-size: 0.76rem; color: var(--text-faint); }
.sx-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sx-pick {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
}
.sx-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-uploading img { opacity: 0.55; }
.sx-pick .spinner { position: absolute; inset: 0; margin: auto; }
.sx-pick-remove {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  color: #fff;
  background: rgb(15 17 21 / 0.6);
}
.sx-pick-remove .sx-icon { width: 16px; height: 16px; stroke-width: 2.4; }
.sx-pick-remove::before { content: ''; position: absolute; inset: -8px; }
.sx-pick-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 0;
  padding: 6px;
  border: 1.5px dashed var(--border-strong);
  box-shadow: none;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: center;
}
.sx-choice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-choice {
  min-height: 44px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}
.sx-choice .sx-cat { font-size: 0.84rem; padding: 6px 12px; }
.sx-choice[aria-checked='true'] { border-color: var(--accent); }
.sx-choice[aria-checked='true'] .sx-cat { box-shadow: 0 0 0 2px var(--surface); }
.sx-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface-2);
}
.sx-segment { min-height: 44px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--text-dim); font-size: 0.88rem; }
.sx-segment[aria-checked='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 1px 6px rgb(16 24 40 / 0.06); }
.sx-compose-actions { display: flex; justify-content: flex-end; margin-block-start: 6px; }
.sx-compose-actions button { min-width: 140px; }

/* ─────────────────────────── profiles ─────────────────────────── */

.sx-profile {
  padding: 16px;
  margin-block-end: var(--gap);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, var(--surface)) 0, var(--surface) 110px);
}
.sx-profile-pro {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sx-ring-b) 13%, var(--surface)) 0, color-mix(in srgb, var(--accent) 5%, var(--surface)) 70px, var(--surface) 130px);
}
.sx-profile-top { display: flex; align-items: center; gap: 16px; }
.sx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; gap: 4px; }
.sx-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
a.sx-stat:active { background: var(--surface-2); }
.sx-stat b { font-size: 1.15rem; line-height: 1.2; }
.sx-stat span { font-size: 0.76rem; color: var(--text-dim); }
.sx-profile-id { margin-block-start: 12px; }
.sx-profile-id h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.sx-profile-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-block-start: 4px; }
.sx-private-tag, .sx-follows-you {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface-2);
}
.sx-private-tag .sx-icon { width: 13px; height: 13px; }
.sx-bio { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; }
.sx-profile-actions > :first-child:not(.sx-icon-only) { flex: 1 1 140px; }
.sx-profile-actions .button, .sx-profile-actions button { min-height: 44px; }
.sx-icon-only { width: 44px; padding: 0; display: inline-grid; place-items: center; }
.sx-following { background: var(--surface-2); }

.sx-card h2 { display: flex; align-items: center; gap: 6px; }
.sx-pro-card { border-color: color-mix(in srgb, var(--sx-ring-b) 30%, var(--border)); }
.sx-pro-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 8px; }
.sx-pro-kind { font-weight: 800; font-size: 0.95rem; }
.sx-pro-verified { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 700; color: var(--ok); }
.sx-pro-verified .sx-icon { width: 15px; height: 15px; stroke-width: 2.4; }
.sx-rating { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-size: 0.86rem; }
.sx-rating b { color: #b45309; }
.sx-pro-headline { margin: 0 0 8px; font-weight: 600; }
.sx-creds h3 { margin: 12px 0 6px; font-size: 0.88rem; }
.sx-creds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-creds li { display: flex; align-items: flex-start; gap: 6px; font-size: 0.88rem; }
.sx-creds .sx-icon { width: 16px; height: 16px; color: var(--ok); stroke-width: 2.4; margin-block-start: 3px; }
.sx-pro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 14px 6px; }
.sx-become { flex: 1 1 180px; min-height: 48px; }
.sx-posts { margin-block-start: 6px; }
.sx-photo-row { display: flex; align-items: center; gap: 14px; margin-block-end: 14px; }
.sx-copy-field { width: 100%; }

/* ─────────────────────────── calmer, for whoever asks ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sx-bone::after, .sx-pop .sx-icon, .sx-burst, .sx-toast { animation: none; }
  .sx-dots span, .sx-tile img, .sx-icon-button, .sx-toast-out { transition: none; }
  .sx-media-track { scroll-behavior: auto; }
}

@media (min-width: 720px) {
  .sx-hub { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
}