/* The public member profile at /by/{username}/.
 *
 * A social surface, not a storefront and not an account screen: everything on
 * it is public and nothing on it is editable. The page is white — there is no
 * cover image, no banner, no coloured header and no grey canvas — so hierarchy
 * comes from borders, spacing and type weight alone. Only the toast is elevated.
 *
 * LAYOUT CONTRACT — read before adding a breakpoint.
 *
 * .sp-page is the query container (`container-name: sp`). Every layout rule
 * below is a `@container sp (...)` query. The one exception is the toast, which
 * is fixed to the viewport and has no `sp` ancestor to query; it uses @media.
 * Nothing else does.
 *
 * Horizontal offsets are logical throughout (inset-inline, padding-inline,
 * border-inline, margin-inline) so the page mirrors into LTR with no second
 * stylesheet.
 */

.sp-page {
  container-type: inline-size;
  container-name: sp;
  background: var(--color-white);
  color: var(--sp-ink);

  /* Local to this surface. The muted and hairline values are tuned for large
     areas of white and are not the site's chrome values. */
  --sp-ink: #163300;
  --sp-accent: #9FE870;
  --sp-muted: #5B6B55;          /* 6.2:1 on white */
  --sp-line: #E5E7E5;
  --sp-hairline: #EDEFEC;
  --sp-tag: #F4F6F3;
  --sp-hover: #F7F9F3;
  --sp-well: #F1F7E4;
  --sp-fill: #E9F8BC;
  --sp-chevron: #8A9585;
}

.sp-page ::selection { background: var(--sp-accent); color: var(--sp-ink); }

/* ------------------------------------------------------------- structure */

.sp-wrap  { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.sp-shell { display: block; padding: 26px 0 90px; }

@container sp (min-width: 700px) {
  .sp-wrap { padding: 0 40px; }
}

@container sp (min-width: 1000px) {
  .sp-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 44px;
    align-items: start;
  }
  .sp-rail { position: sticky; inset-block-start: 92px; margin-block-start: 0; }
}

/* --------------------------------------------------------------- identity */

/* No cover photo, no banner: the profile begins directly under the shared
   header on white, and whitespace does the work a hero image would. */
.sp-id {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block-start: 26px;
}

@container sp (min-width: 700px) {
  .sp-id { flex-direction: row; align-items: flex-start; gap: 24px; padding-block-start: 52px; }
}

.sp-face {
  position: relative;
  flex: none;
  inline-size: 76px;
  block-size: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sp-ink);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
}

/* The photo paints over the monogram rather than replacing it, so an avatar
   that fails to load leaves a letter behind instead of a hole. */
.sp-face img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@container sp (min-width: 560px) { .sp-face { inline-size: 92px; block-size: 92px; font-size: 36px; } }
@container sp (min-width: 700px) { .sp-face { inline-size: 112px; block-size: 112px; font-size: 44px; } }

.sp-idbody { flex: 1 1 auto; min-inline-size: 0; }

.sp-namerow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.sp-name {
  margin: 0;
  color: var(--sp-ink);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  /* The Arabic minimum at this size — tighter and the diacritics collide. */
  line-height: 1.25;
}

/* Verification sits beside the name, never on the avatar: one mark, one place. */
.sp-tick {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--sp-accent);
  color: var(--sp-ink);
}
.sp-tick svg { inline-size: 13px; block-size: 13px; }

.sp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 7px 0 0;
  color: var(--sp-muted);
  font-size: 15.5px;
}
/* The separator belongs to the value after it, so a missing handle or place
   never leaves an orphan dot with nothing before it. */
.sp-meta > span + span::before { content: "·"; margin-inline-end: 8px; }

.sp-bio {
  max-inline-size: 58ch;
  margin: 14px 0 0;
  color: var(--sp-ink);
  font-size: 17px;
  line-height: 1.62;
  text-wrap: pretty;
}
.sp-bio p { margin: 0 0 10px; }
.sp-bio p:last-child { margin-block-end: 0; }

/* Four figures, not four cards. */
.sp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.sp-stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-inline-end: 18px;
  border-inline-end: 1px solid var(--sp-line);
}
/* A wrapped row must never end on a dangling rule. */
.sp-stat:last-child { padding-inline-end: 0; border-inline-end: 0; }

.sp-stat__value { color: var(--sp-ink); font-size: 19px; font-weight: 700; }
.sp-stat__label { color: var(--sp-muted); font-size: 14.5px; }

/* ---------------------------------------------------------------- actions */

/* Three actions, no more. */
.sp-acts { display: flex; align-items: center; gap: 10px; }

@container sp (min-width: 700px) {
  .sp-acts { flex: none; padding-block-start: 6px; }
}

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 48px;
  padding-inline: 24px;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--sp-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.sp-btn:hover { background: var(--sp-hover); color: var(--sp-ink); }

.sp-btn--follow { background: var(--sp-accent); border-color: var(--sp-accent); }
.sp-btn--follow:hover { background: #B4F089; border-color: #B4F089; }

/* Following is carried by the label as well as the fill: colour alone is not a
   state. */
.sp-btn--follow.is-following { background: var(--color-white); border-color: var(--sp-line); }
.sp-btn--follow.is-following:hover { background: var(--sp-hover); }

.sp-btn--icon { inline-size: 48px; min-block-size: 48px; padding-inline: 0; border-radius: 50%; }
.sp-btn svg { inline-size: 17px; block-size: 17px; flex: none; }

/* The ••• menu is a <details>, so it opens, closes and traps nothing without a
   line of JavaScript. */
.sp-more { position: relative; }
.sp-more > summary { list-style: none; }
.sp-more > summary::-webkit-details-marker { display: none; }
.sp-more__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 20;
  min-inline-size: 208px;
  padding: 6px;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: var(--color-white);
  box-shadow: 0 12px 28px rgba(22, 51, 0, 0.10);
}
.sp-more__item {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
  min-block-size: 40px;
  padding-inline: 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sp-ink);
  font: inherit;
  font-size: 15px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.sp-more__item:hover { background: var(--sp-hover); color: var(--sp-ink); }

@container sp (max-width: 699px) {
  .sp-acts { inline-size: 100%; }
  .sp-btn--follow { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------- tabs */

.sp-tabs {
  display: flex;
  gap: 4px;
  margin-block-start: 26px;
  border-block-end: 1px solid var(--sp-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }

.sp-tab {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-block-size: 50px;
  padding-inline: 18px;
  margin-block-end: -1px;
  border: 0;
  /* The active underline overdraws the strip's own hairline. */
  border-block-end: 2px solid transparent;
  background: none;
  color: var(--sp-muted);
  font-size: 16.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.sp-tab:hover { color: var(--sp-ink); }
.sp-tab.is-active { color: var(--sp-ink); font-weight: 700; border-block-end-color: var(--sp-accent); }

@container sp (max-width: 559px) {
  /* Full-bleed so the strip can scroll past the page gutter. */
  .sp-tabs { margin-inline: -20px; padding-inline: 20px; }
  .sp-tab { padding-inline: 14px; font-size: 15.5px; }
}

.sp-panel { padding-block-start: 26px; }

/* --------------------------------------------------------------- activity */

.sp-entry { position: relative; display: flex; gap: 14px; padding-block-end: 26px; }

/* A hairline down the avatar gutter joins one entry to the next; it stops at
   the last so the thread does not trail off into whitespace. */
.sp-entry::before {
  content: "";
  position: absolute;
  inset-block: 42px 0;
  inset-inline-start: 17px;
  inline-size: 1px;
  background: var(--sp-hairline);
}
.sp-entry:last-child::before { display: none; }

.sp-entry__face {
  position: relative;
  z-index: 1;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sp-ink);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}
.sp-entry__face img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

.sp-entry__body { flex: 1 1 auto; min-inline-size: 0; }

.sp-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--sp-muted);
  font-size: 15px;
}
.sp-entry__who { color: var(--sp-ink); font-size: 15.5px; font-weight: 700; text-decoration: none; }
.sp-entry__who:hover { color: var(--sp-ink); text-decoration: underline; }
.sp-entry__tick { inline-size: 15px; block-size: 15px; }
.sp-entry__tick svg { inline-size: 10px; block-size: 10px; }

.sp-entry__verb { margin: 6px 0 12px; color: var(--sp-ink); font-size: 16.5px; font-weight: 600; }

.sp-entry__text {
  margin: 0 0 12px;
  color: var(--sp-ink);
  font-size: 16px;
  line-height: 1.68;
  max-inline-size: 60ch;
}

/* ----------------------------------------------------------- object card */

.sp-obj {
  display: flex;
  align-items: center;
  gap: 14px;
  inline-size: 100%;
  padding: 14px;
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  background: var(--color-white);
  color: var(--sp-ink);
  text-decoration: none;
  transition: border-color .18s ease;
}
/* On a white page the border is the object — no shadow. */
.sp-obj:hover { border-color: var(--sp-ink); color: var(--sp-ink); }

.sp-thumb {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 78px;
  block-size: 66px;
  padding-inline: 8px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  overflow: hidden;
}
.sp-thumb span {
  display: block;
  inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-thumb--ink  { background: var(--sp-ink); color: var(--sp-accent); }
.sp-thumb--lime { background: var(--sp-accent); color: var(--sp-ink); }
.sp-thumb--pale { background: var(--sp-well); color: var(--sp-ink); }

.sp-obj__body { display: block; flex: 1 1 auto; min-inline-size: 0; }

.sp-obj__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-obj__name { font-size: 17px; font-weight: 700; }
.sp-obj__tagline {
  display: block;
  margin: 4px 0 0;
  color: var(--sp-muted);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sp-tag);
  color: var(--sp-muted);
  font-size: 12.5px;
  font-weight: 700;
}
.sp-pill--live { background: var(--sp-fill); color: var(--sp-ink); }
.sp-pill--sold { background: #F1F1EF; color: var(--sp-muted); }

.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.sp-tag {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--sp-tag);
  color: var(--sp-muted);
  font-size: 12.5px;
}

.sp-obj__price { flex: none; color: var(--sp-ink); font-size: 17px; font-weight: 700; }

.sp-chev { flex: none; color: var(--sp-chevron); inline-size: 18px; block-size: 18px; }
[dir="rtl"] .sp-chev { transform: scaleX(-1); }

@container sp (max-width: 559px) {
  .sp-obj { gap: 11px; padding: 12px; }
  .sp-thumb { inline-size: 62px; block-size: 56px; font-size: 15px; }
  .sp-obj__name { font-size: 16px; }
}

/* -------------------------------------------------------------- reactions */

.sp-react { display: flex; align-items: center; gap: 20px; margin-block-start: 12px; }

@container sp (max-width: 559px) { .sp-react { gap: 14px; } }

.sp-react__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sp-muted);
  font: inherit;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
}
.sp-react__btn:hover { color: var(--sp-ink); }
.sp-react__btn svg { inline-size: 17px; block-size: 17px; }
.sp-react__btn[aria-pressed="true"] { color: var(--sp-ink); }
.sp-react__btn[aria-pressed="true"] svg { fill: var(--sp-ink); }

/* ----------------------------------------------------------------- brands */

.sp-rows { display: grid; gap: 12px; }

/* ---------------------------------------------------------------- reviews */

.sp-review { display: flex; gap: 14px; padding-block: 20px; border-block-start: 1px solid var(--sp-hairline); }
.sp-review:first-child { padding-block-start: 0; border-block-start: 0; }

.sp-review__face {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--sp-well);
  color: var(--sp-ink);
  font-size: 16px;
  font-weight: 700;
}

.sp-review__body-wrap { flex: 1 1 auto; min-inline-size: 0; }
.sp-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-review__who { color: var(--sp-ink); font-size: 16px; font-weight: 700; }
.sp-review__meta { color: var(--sp-muted); font-size: 14px; }
.sp-review__body { margin: 8px 0 0; color: var(--sp-ink); font-size: 16px; line-height: 1.68; }

.sp-stars { display: inline-flex; gap: 2px; margin-inline-start: auto; color: var(--sp-accent); }
.sp-stars svg { inline-size: 15px; block-size: 15px; fill: currentColor; }
.sp-stars .is-empty { color: var(--sp-line); }

/* ------------------------------------------------------------------ about */

.sp-about { max-inline-size: 64ch; }
.sp-about p { margin: 0 0 16px; color: var(--sp-ink); font-size: 17px; line-height: 1.75; }
.sp-about p:last-child { margin-block-end: 0; }

.sp-subhead {
  margin: 30px 0 12px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--sp-hairline);
  color: var(--sp-muted);
  font-size: 14px;
  font-weight: 700;
}

.sp-skills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.sp-skills li {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sp-tag);
  color: var(--sp-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------------- rail */

.sp-rail { display: grid; gap: 18px; margin-block-start: 34px; }

.sp-card { padding: 20px; border: 1px solid var(--sp-line); border-radius: 18px; background: var(--color-white); }

.sp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
.sp-card__title { margin: 0; color: var(--sp-ink); font-size: 16px; font-weight: 700; }
.sp-card__more { color: var(--sp-ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sp-card__more:hover { color: var(--sp-ink); text-decoration: underline; }

.sp-facts { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.sp-fact { display: flex; align-items: center; gap: 10px; color: var(--sp-ink); font-size: 15px; }
.sp-fact svg { flex: none; inline-size: 17px; block-size: 17px; color: var(--sp-muted); }
/* One line each: a fact that wraps turns the card into a paragraph. */
.sp-fact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-fact a { color: var(--sp-ink); text-decoration: none; }
.sp-fact a:hover { text-decoration: underline; }

.sp-motto {
  margin: 16px 0 0;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--sp-hairline);
  color: var(--sp-muted);
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
}

.sp-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px;
  margin-inline: -9px;
  border-radius: 12px;
  color: var(--sp-ink);
  text-decoration: none;
}
.sp-row:hover { background: var(--sp-hover); color: var(--sp-ink); }
.sp-row__tile {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 40px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
}
.sp-row__tile span { inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.sp-row__body { flex: 1 1 auto; min-inline-size: 0; }
.sp-row__name { display: block; font-size: 15.5px; font-weight: 700; }
.sp-row__sub {
  display: block;
  margin-block-start: 2px;
  color: var(--sp-muted);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-score { display: flex; align-items: baseline; gap: 6px; }
.sp-score__value { color: var(--sp-ink); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
.sp-score__of { color: var(--sp-muted); font-size: 16px; }
.sp-score__count { margin: 8px 0 0; color: var(--sp-muted); font-size: 14.5px; }

.sp-faces { display: flex; align-items: center; margin-block-start: 14px; }
.sp-faces span {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background: var(--sp-well);
  color: var(--sp-ink);
  font-size: 12.5px;
  font-weight: 700;
}
.sp-faces span + span { margin-inline-start: -10px; }
.sp-faces em { margin-inline-start: 10px; color: var(--sp-muted); font-size: 14px; font-style: normal; }

/* ------------------------------------------------------------------ empty */

.sp-empty {
  padding: 34px 20px;
  border: 1px dashed var(--sp-line);
  border-radius: 18px;
  text-align: center;
}
.sp-empty__title { margin: 0; color: var(--sp-ink); font-size: 17px; font-weight: 700; }
.sp-empty__body { margin: 8px auto 0; max-inline-size: 44ch; color: var(--sp-muted); font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------------------ toast */

/* The toast is the site-wide .toast component in components.css — the only
   elevated element this page has, and the only one fixed to the viewport. It is
   rendered outside .sp-page, so it could not be reached by a container query
   even if it needed one. */

@media (prefers-reduced-motion: reduce) {
  .sp-page * { animation: none !important; transition: none !important; }
}