/* People: profiles, notifications, friends, settings, welcome, Southbag Verified.
   Built on the southbag.css tokens and furniture. Greyscale, square corners, no button colours.
   Every picture sits in a box of a fixed shape and is stretched to fill it. */

/* -- Profile header ------------------------------------------------------ */
.profile-card { padding: 0 0 14px; overflow: hidden; }
/* Fixed-height box. An uploaded banner is stretched into it; without one it is plain grey. */
.profile-banner {
  position: relative; height: 200px; overflow: hidden; background: var(--sb-hairline);
  border-bottom: 2px dashed #000; box-shadow: none;
}
:root[data-theme='dark'] .profile-banner { border-bottom-color: #777; }
.profile-banner img { display: block; width: 100%; height: 100%; max-width: none; box-shadow: none; }
.profile-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 0 14px; margin-top: -64px; position: relative; box-shadow: none;
}
.profile-avatar { position: relative; display: inline-block; flex-shrink: 0; box-shadow: none; text-decoration: none; }
.profile-avatar:hover { background: none; }
.profile-avatar .avatar.xl { --size: 128px; border: 4px ridge var(--sb-ridge); background: var(--sb-bevel); }
.profile-avatar .avatar.story-ring { outline-width: 4px; outline-offset: 3px; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; padding-bottom: 4px; box-shadow: none; }
.profile-id { padding: 12px 14px 0; box-shadow: none; }
.profile-id h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0 0 4px; max-width: none; overflow-wrap: anywhere; }
.profile-id .handle { color: var(--sb-muted); box-shadow: none; }
.profile-id .chips { box-shadow: none; }
.profile-id .handle .verified { font-size: 0.85em; }
.profile-id .chips { margin-top: 6px; gap: 6px; }
.profile-id .chips:empty { display: none; }
.profile-bio { padding: 0 14px; margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; }
.profile-bio a { color: var(--sb-blue); }
.profile-meta, .profile-counts { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 14px; margin-top: 10px; box-shadow: none; }
.profile-meta { color: var(--sb-muted); font-size: 0.9rem; }
.profile-meta span { min-width: 0; overflow-wrap: anywhere; box-shadow: none; }
.profile-meta a { color: var(--sb-muted); }
.profile-counts { font-size: 0.95rem; padding-top: 10px; border-top: 1px dashed #999; margin: 12px 14px 0; padding-left: 0; padding-right: 0; }
.profile-counts a, .profile-counts span { color: var(--sb-muted); box-shadow: none; }
.profile-counts strong { color: var(--sb-text); }
.profile-notice { margin: 12px 14px 0; }
/* The shared composer's textarea has no width of its own; make it fill the card here. */
.profile .composer textarea { width: 100%; }
.profile .tabs + .tabs { margin-top: -6px; font-size: 0.9rem; }
@media (max-width: 640px) {
  .profile-banner { height: 120px; }
  .profile-top { margin-top: -44px; padding: 0 10px; }
  .profile-avatar .avatar.xl { --size: 88px; border-width: 3px; }
  .profile-actions { width: 100%; justify-content: flex-start; }
  .profile-id, .profile-bio, .profile-meta { padding-left: 10px; padding-right: 10px; }
  .profile-counts { margin-left: 10px; margin-right: 10px; }
  .profile-notice { margin: 12px 10px 0; }
}

/* -- Profile grids: fixed-shape tiles, pictures stretched into them ------ */
.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; box-shadow: none; }
.grid-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #000; border: 2px inset var(--sb-bevel); }
.grid-tile:hover { background: #000; }
.grid-tile img { display: block; width: 100%; height: 100%; box-shadow: none; }
.grid-tile .multi { position: absolute; left: 4px; top: 4px; background: #fff; color: #000; font-size: 0.72rem; padding: 0 4px; box-shadow: none; }
.grid-tile .hover {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 0.78rem; font-weight: 400; opacity: 0; transition: opacity 1.2s linear; box-shadow: none;
}
.grid-tile:hover .hover, .grid-tile:focus-visible .hover { opacity: 1; }
.profile-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 10px; box-shadow: none; }
.video-tile { min-width: 0; box-shadow: none; }
.video-tile .title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px;
  color: var(--sb-text); font-weight: 700; line-height: 1.3;
}
.profile-shorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; box-shadow: none; }
.profile-shorts .video-thumb .views { position: absolute; left: 4px; bottom: 4px; background: #fff; color: #000; font-size: 0.75rem; padding: 0 4px; box-shadow: none; }
.profile-shorts .video-thumb .play { display: none; }
@media (max-width: 640px) {
  .profile-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid, .profile-shorts { gap: 4px; }
}

/* -- Notifications ------------------------------------------------------- */
.notif-card { padding: 0; }
.notif-list { box-shadow: none; }
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px dashed #999; box-shadow: none; transition: background-color 1.4s linear; }
.notif:last-child { border-bottom: 0; }
.notif.clickable { cursor: pointer; }
.notif.clickable:hover { background: #e4e2db; }
:root[data-theme='dark'] .notif.clickable:hover { background: #33332f; }
.notif.unread { background: var(--sb-paper); }
.notif.unread .notif-text { font-weight: 700; }
.notif-faces { display: flex; gap: 4px; flex-shrink: 0; box-shadow: none; }
.notif .grow { box-shadow: none; }
.notif-text { margin: 0; overflow-wrap: anywhere; }
.notif-text a { color: var(--sb-ink); }
.notif-excerpt { margin: 4px 0 0; color: var(--sb-muted); font-size: 0.9rem; border-left: 2px dashed #999; padding-left: 8px; overflow-wrap: anywhere; }
.notif-when { margin: 4px 0 0; }
.unread-label { color: var(--sb-blue); font-weight: 700; margin-left: 10px; }
@media (max-width: 640px) {
  .notif { padding: 10px; gap: 8px; }
  .notif-faces .avatar:nth-child(n + 3) { display: none; }
}

/* -- Friends ------------------------------------------------------------- */
.friend-actions { gap: 6px; flex-shrink: 0; box-shadow: none; }
@media (max-width: 640px) {
  .user-row:has(.friend-actions) { flex-wrap: wrap; }
  .user-row .friend-actions { width: 100%; padding-left: 42px; }
}

/* -- Settings ------------------------------------------------------------ */
.pickers { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; box-shadow: none; }
.image-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: none; }
.avatar-preview { box-shadow: none; }
.avatar-preview .avatar.xl { --size: 120px; }
/* Same fixed-height box as the profile banner, smaller. */
.banner-preview { height: 120px; max-width: 480px; overflow: hidden; background: var(--sb-hairline); border: 2px inset var(--sb-bevel); }
.banner-preview img { display: block; width: 100%; height: 100%; max-width: none; box-shadow: none; }
.image-picker .progress-bar { max-width: 240px; }
.image-picker .row { box-shadow: none; }
.handle-input { display: flex; align-items: center; gap: 4px; box-shadow: none; }
.handle-input > span { color: var(--sb-muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; box-shadow: none; }
.settings-form small.fine { display: block; margin-top: 4px; }
.theme-choice { border: 2px ridge var(--sb-ridge); padding: 6px 12px 4px; margin: 0; }
.theme-choice legend { font-weight: 700; padding: 0 4px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin-bottom: 8px; box-shadow: none; }
.kv > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; box-shadow: none; }
.kv .muted { font-size: 0.8rem; }
@media (max-width: 640px) {
  .pickers, .two-col { grid-template-columns: 1fr; }
}

/* -- Welcome ------------------------------------------------------------- */
.welcome-page { max-width: 720px; margin: 0 auto; box-shadow: none; }
.welcome-card h1 { margin-bottom: 10px; }
.welcome-step { border-top: 2px dashed #000; margin-top: 16px; padding-top: 14px; box-shadow: none; }
:root[data-theme='dark'] .welcome-step { border-top-color: #777; }
.welcome-step h2 { font-size: 1.35rem; margin-bottom: 8px; }
.welcome-step .row { align-items: center; gap: 16px; }
.welcome-photo { flex-shrink: 0; box-shadow: none; }
.welcome-step .stack .progress-bar { width: 160px; }
.welcome-enter { border-top: 2px dashed #000; margin-top: 18px; padding-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-shadow: none; }
:root[data-theme='dark'] .welcome-enter { border-top-color: #777; }
@media (max-width: 640px) { .welcome-enter .btn-large { width: 100%; } }

/* -- Southbag Verified --------------------------------------------------- */
.verified-page { box-shadow: none; }
.verified-price { font-size: 1.3rem; margin: 0 0 8px; }
.verified-preview { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 12px; border: 2px inset var(--sb-bevel); background: var(--sb-paper); max-width: 420px; }
.verified-preview > div { min-width: 0; box-shadow: none; }
.verified-status { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-shadow: none; }
.verified-status p { margin: 0; }
.verified-details { margin: 0; padding-left: 1.2em; box-shadow: none; }
.verified-details li { box-shadow: none; margin: 2px 0; }

/* ── Your data, Activity log, Account standing (views/data.js, activity.js, standing.js) ── */
.data-page, .activity-page, .standing-page { display: flex; flex-direction: column; gap: 12px; box-shadow: none; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-weight: 400; padding: 4px 8px 4px 0; border-bottom: 1px dashed var(--sb-hairline); }
.data-table td { text-align: right; padding: 4px 0; border-bottom: 1px dashed var(--sb-hairline); font-variant-numeric: tabular-nums; }
.activity-list { padding: 0.4rem 0.8rem; }
.activity-row { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--sb-hairline); box-shadow: none; }
.activity-row time { white-space: nowrap; font-size: 0.8rem; }