/* Social surfaces: feed, own profile, public outfit (/o/:id), public profile (/u/:username). */

.feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 660px) clamp(260px, 26vw, 340px);
  justify-content: space-between;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
}
.feed-list { display: grid; gap: var(--space-8); }

.post {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: 28px;
  background: var(--color-surface);
  box-shadow: 0 0 0 1px rgb(10 25 11 / .05), var(--shadow-sm);
}
.post-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-1) 0;
}
.post-head .who { display: grid; line-height: 1.25; }
.post-head .who a { color: var(--color-ink); font-weight: var(--weight-semibold); text-decoration: none; }
.post-head .who a:hover { text-decoration: underline; }
.post-head .who span { font-size: var(--text-sm); color: var(--color-ink-3); }
.post-head .push { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.post-head .menu { top: calc(100% + 4px); right: 0; }
.post .collage { border-radius: var(--radius-lg); box-shadow: none; }
.post-body { display: grid; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2); }
.post-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.post-actions { display: flex; align-items: center; gap: var(--space-2); }
.post-actions .spacer { flex: 1; }
.post-items { display: flex; flex-wrap: wrap; gap: 6px; }

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-2);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.like-btn:hover { background: var(--color-tile-2); color: var(--color-ink); }
.like-btn .icon { transition: transform var(--dur-base) var(--ease-out); }
.like-btn[aria-pressed="true"] { color: var(--color-danger); }
.like-btn[aria-pressed="true"] .icon { fill: currentColor; transform: scale(1.12); }
.like-btn [data-count] { font-variant-numeric: tabular-nums; color: var(--color-ink); }

.feed-main { min-width: 0; }
.feed-tabs { margin-bottom: var(--space-6); }
.post > .collage { transition: background-color var(--dur-base) var(--ease-out); }
.post > .collage:hover { background: var(--color-tile-2); }
.feed-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.post.ad { background: var(--color-surface-2); box-shadow: none; }
/* house ad: SKAP's own message fills the slot when no partner ad does */
.ad-house {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-sky-tint), var(--color-surface) 70%);
}
.ad-house strong { font-size: var(--text-xl); letter-spacing: -0.015em; line-height: 1.15; }
.ad-house p { max-width: 40ch; color: var(--color-ink-2); }

.report-reasons { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.report-reasons legend { margin-bottom: var(--space-3); font-weight: var(--weight-semibold); }

.side { position: sticky; top: calc(var(--header-height) + var(--space-7)); display: grid; gap: var(--space-5); }
.side-card { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: 0 0 0 1px rgb(10 25 11 / .05); }
.side-card h2 { font-size: var(--text-md); }
.plus-side { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.plus-side p { color: #b9cbbc; font-size: var(--text-sm); }

/* ------------------------------------------------------------------ profile header */
.profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-7);
  align-items: center;
  margin-bottom: var(--space-9);
}
.profile-head h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: var(--weight-display); letter-spacing: var(--tracking-display-serif); line-height: 1.05; }
.profile-head .handle { margin-top: var(--space-1); color: var(--color-ink-3); }
.profile-head .bio { margin-top: var(--space-3); max-width: 52ch; color: var(--color-ink-2); }
.stats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-4); padding: 0; list-style: none; }
.stats li { display: grid; line-height: 1.2; }
.stats strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.stats span { font-size: var(--text-sm); color: var(--color-ink-3); }
.profile-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-self: start; }

/* ------------------------------------------------------------------ public outfit */
.public-outfit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
  padding-top: var(--space-8);
}
.public-outfit .collage { border-radius: 32px; box-shadow: var(--shadow-lg); }
.public-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-content: start; }
.public-info .post-actions { flex-wrap: wrap; }
.public-info h1 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); font-weight: var(--weight-display); letter-spacing: var(--tracking-display-serif); line-height: 1.02; }
.author-card { display: flex; align-items: center; gap: var(--space-4); }
.author-card .who { display: grid; }
.author-card .who a { color: var(--color-ink); font-weight: var(--weight-semibold); text-decoration: none; }
.author-card .who span { font-size: var(--text-sm); color: var(--color-ink-3); }
.author-card .btn { margin-left: auto; }
.public-info .label { display: block; margin-bottom: var(--space-3); }
.made-with { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.made-with li { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); align-items: center; }
.made-with .garment-tile { border-radius: var(--radius-sm); }

/* Soft CTA for visitors without an account: appears after a like or a short visit, never blocks. */
.soft-cta {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  z-index: var(--z-sheet);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: min(720px, calc(100vw - 24px));
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: toast-in var(--dur-slow) var(--ease-out);
}
.soft-cta .collage { width: 56px; flex: none; border-radius: var(--radius-sm); box-shadow: none; }
.soft-cta p { flex: 1; font-size: var(--text-sm); color: #cfdcd1; }
.soft-cta strong { display: block; color: var(--color-paper); font-size: var(--text-md); }
.soft-cta .btn-ghost { color: var(--color-paper); }
.soft-cta .btn-ghost:hover { background: rgb(255 255 255 / .1); color: var(--color-paper); }

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--section-gap);
  padding: clamp(var(--space-7), 5vw, var(--space-10));
  border-radius: clamp(var(--radius-xl), 2.4vw, 32px);
  background: var(--color-green);
}
.cta-band h2 { font-size: var(--text-display-2); font-weight: var(--weight-display); letter-spacing: var(--tracking-display-serif); line-height: 1.04; }
.cta-band p { margin-top: var(--space-3); max-width: 46ch; font-size: var(--text-lg); }

@media (max-width: 980px) {
  .feed-layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .public-outfit { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-top: var(--space-5); }
}

@media (max-width: 720px) {
  .profile-head { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); }
  .profile-head .avatar-xl { --size: 84px; }
  .profile-actions { grid-column: 1 / -1; }
  .cta-band { grid-template-columns: minmax(0, 1fr); padding: var(--space-7) var(--space-6); }
  .soft-cta { flex-wrap: wrap; gap: var(--space-3); }
  .soft-cta .collage { display: none; }
  .post { padding: var(--space-3); border-radius: var(--radius-xl); }
}

/* ------------------------------------------------------------------ own profile tabs */
.profile-tabs { margin-bottom: var(--space-6); }
.people-wide { max-width: 560px; gap: var(--space-4); }
.made-with .shop-line { display: flex; margin-top: 2px; }

/* feed search */
.feed-search { margin-bottom: var(--space-4); }
.feed-results { display: grid; gap: var(--space-7); }
.search-group { display: grid; gap: var(--space-4); }
.search-group h2 { font-size: var(--text-lg); }

/* profile: the follower counts open their lists */
.stat-link { display: grid; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1.2; text-align: left; cursor: pointer; }
.stat-link:hover span, .stat-link:focus-visible span { color: var(--color-green-ink); text-decoration: underline; }
.stat-link:focus-visible { outline: 2px solid var(--color-green-ink); outline-offset: 4px; border-radius: 4px; }
.people-more { margin-top: var(--space-3); }

/* phones: the "⋯" button wraps to the left, so its menu hangs from the whole action row instead of the button */
@media (max-width: 560px) {
  .profile-actions { position: relative; }
  .profile-actions .menu-wrap { position: static; }
}