/* Revision 8: people, publishing and an immersive personal profile. */
.avatar { overflow: hidden; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.person-handle { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: 0; }
.person-name .person-handle { display: inline; margin-left: 5px; }
#app .person-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 5px; }
#app .person-name .person-handle { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.person-button { min-width: 0; }
.person-button>div { min-width: 0; }
.person-context { font-size: 9px; }
.person-button .avatar { width: 39px; height: 39px; }

/* A creation tool, with no author header, timestamp or social actions. */
.publish-launcher {
  position: relative; isolation: isolate; margin: 0 20px 28px; padding: 6px;
  border-radius: 27px; border: 1px solid #a1a4e452; overflow: hidden;
  background: radial-gradient(ellipse at 0 0, #6354938c, transparent 83%),
    linear-gradient(120deg, #253647, #26243e 72%, #422c3c);
  box-shadow: inset 0 1px 0 #e3ddff29, 0 9px 25px #0002;
}
.publish-launcher-main {
  display: flex; gap: 14px; align-items: center; width: 100%; padding: 16px 13px;
  text-align: left; border-radius: 21px; min-height: 89px;
}
.publish-launcher-icon {
  display: grid; place-items: center; width: 49px; height: 49px; flex: 0 0 49px;
  border-radius: 17px; background: linear-gradient(145deg, #c5b7ed29, #839bd61c);
  border: 1px solid #d2c9ff4d; color: #faf7ff;
  box-shadow: inset 0 1px 0 #ffffff29;
}
.publish-launcher-icon svg { width: 26px; height: 26px; }
.publish-launcher-copy { flex: 1; min-width: 0; }
#app .publish-launcher-copy strong { display: block; font-size: 18px; line-height: 1.45; font-weight: 700; letter-spacing: .025em; color: #fff; }
.publish-launcher-copy small { display: block; margin-top: 5px; font-size: 11px; color: #d1cadf; line-height: 1.65; }
.publish-launcher-main>svg { height: 20px; width: 20px; flex: 0 0 20px; color: #cec8e1; }
.publish-launcher-actions { display: flex; gap: 6px; border-top: 1px solid #ffffff15; padding: 7px 8px 5px; }
.publish-launcher-actions button {
  display: flex; align-items: center; justify-content: center; flex: 1; gap: 8px;
  min-height: 42px; padding: 6px 10px; border-radius: 16px; color: #e8e4f0; font-size: 12px;
}
.publish-launcher-actions button svg { height: 18px; width: 18px; }
.publish-launcher-actions button+button { background: #a69bd51c; }
.publish-launcher button { transition: transform 140ms cubic-bezier(.23,1,.32,1), background-color 140ms; }
.publish-launcher button:active { transform: scale(.98); background-color: #ffffff08; }

/* Media is part of the post, including the same spoiler boundary as its text. */
.post-content { min-width: 0; }
.post-content .post-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-media { display: block; margin: 15px -7px 5px; overflow: hidden; border-radius: 19px; background: #0d1016; }
.post-media .post-image, .post-content>.post-image {
  display: block; width: 100%; height: auto; max-height: 370px; object-fit: cover;
  aspect-ratio: 4/3; margin: 0; border-radius: inherit;
}
.post-media figcaption { color: var(--muted); padding: 9px 11px; font-size: 9px; line-height: 1.6; }
.post-audience { color: var(--muted); font-size: 9px; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; margin: 0 0 12px; color: var(--muted); font-size: 10px; }
.post-meta>span { display: inline-flex; align-items: center; gap: 5px; }
.post-meta svg { width: 12px; height: 12px; }
.post-meta .post-kind { margin: 0; }
.post .spoiler { padding: 26px 14px; background: radial-gradient(ellipse at 50% 0, #5c476f25, transparent 90%), #ffffff03; }
.post .spoiler>svg { width: 28px; height: 28px; color: #b9afcb; }
.post .spoiler h3 { font-size: 16px; margin: 7px 0; }
.post .spoiler button { padding: 10px 15px; background: #55426740; border-color: #a395bd3d; }

/* An attached photo has its own preview, clear removal, and local-only status. */
.compose-media { position: relative; margin: 18px 20px 0; overflow: hidden; border-radius: 22px; border: 1px solid #ffffff20; background: #131720; }
.compose-media .compose-image { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; margin: 0; border-radius: 0; }
.compose-media>figcaption { padding: 10px 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.compose-media>.icon-btn { position: absolute; top: 10px; right: 10px; background: #0b1020a6; color: #fff; border-color: #ffffff4d; width: 38px; height: 38px; border-radius: 50%; }
.compose-media-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; }
.compose-media-actions>span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.compose-media-actions button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; font-size: 11px; color: #d4c2df; }
.compose-media-actions svg { width: 16px; height: 16px; }
.compose-tools { flex-wrap: wrap; gap: 8px; }
.compose-tools>.secondary-btn { font-size: 12px; min-height: 44px; padding: 9px 13px; }
.compose-tools>.secondary-btn svg { height: 18px; width: 18px; }
.compose-tools .text-btn { font-size: 11px; }
.compose-demo-image { margin: 0 20px 17px; }
.compose-demo-image .text-btn { font-size: 11px; min-height: 36px; }
.compose-demo-image .field-note { font-size: 10px; margin: 3px 0 0; }
.compose-photo-prompt { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; width: calc(100% - 40px); min-height: 151px; margin: 12px 20px 0; padding: 20px; border: 1px dashed #93a1ce73; border-radius: 24px; background: radial-gradient(ellipse at 0 0, #53568435, transparent 90%), #ffffff03; }
.compose-photo-prompt>svg { width: 31px; height: 31px; color: #c8c1e8; margin-bottom: 4px; }
.compose-photo-prompt>strong { color: #f0eef9; font-size: 16px; }
.compose-photo-prompt>span { color: var(--muted); font-size: 11px; }
.compose-author .person-handle { margin: 3px 0 8px; }
#app .compose-author .person-handle { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.compose-author>.avatar { height: 44px; width: 44px; }
.app[data-scene=compose] .app-main:has(.compose-media) .compose-text { min-height: 105px; }

/* The banner becomes the top of the profile, with controls on the image. */
.app[data-scene=profile] .ambient-lights { opacity: 0; }
.profile-hero { position: relative; width: 100%; height: 248px; overflow: hidden; background: #16202b; }
.profile-hero .profile-cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; border-radius: 0; }
.profile-hero:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #090a0d30, transparent 32%, #090a0d38 64%, #090a0d 100%); pointer-events: none; }
.profile-hero-actions { position: absolute; z-index: 2; inset: 15px 18px auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.profile-hero-actions>.backbar { width: 100%; padding: 0; margin: 0; }
.profile-hero-actions .bar-title, .profile-hero-actions .backbar>span { visibility: hidden; }
.profile-hero-actions .icon-btn { border-radius: 50%; background: #10131b7a; border-color: #ffffff30; backdrop-filter: blur(18px); color: #fff; }
.profile-cover-credit { position: absolute; right: 20px; bottom: 53px; z-index: 1; font-size: 9px; color: #e7e5e2; text-shadow: 0 1px 6px #000b; }
#app .profile-info { padding: 0 22px; position: relative; z-index: 1; margin-top: -49px; }
#app .profile-title { min-height: 0; margin: 0; gap: 13px; display: flex; align-items: flex-end; justify-content: flex-start; }
#app .profile-title>.avatar { width: 78px; height: 78px; border: 4px solid #090a0d; box-shadow: 0 5px 15px #0003; flex: 0 0 78px; }
#app .profile-identity { padding: 0 0 2px; }
#app .profile-identity h1 { font-size: 27px; margin: 0 0 4px; line-height: 1.35; }
.profile-identity .person-handle { font-size: 12px; }
#app .profile-action { margin: 16px 0 0; }
#app .profile-title>.profile-action { margin: 0 0 4px auto; }
#app .profile-info>.profile-identity { margin-top: 12px; }
#app .profile-identity .profile-handle { margin: 0; line-height: 1.5; }
.profile-action .primary-btn, .profile-action .secondary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border-radius: 22px; font-size: 12px; padding: 9px 18px; }
#app .profile-info>p { margin-top: 15px; margin-bottom: 13px; font-size: 14px; line-height: 1.8; }
.profile-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 17px 0 0; }
.profile-stats>span, .profile-stats>a, .profile-stats>button { display: inline-flex; gap: 6px; align-items: center; min-height: 33px; padding: 6px 10px; border-radius: 13px; border: 1px solid #ffffff10; background: #ffffff04; font-size: 10px; color: var(--muted); }
.profile-stats strong { color: #ececf4; }
.profile-stats svg { height: 13px; width: 13px; color: #a2b3c7; }
.profile-links { margin: 14px 0 0; font-size: 11px; }
.profile-favorites { margin: 28px 0 25px; }
.profile-favorites .section-title { padding: 0; margin: 0 22px 13px; }
.profile-favorites .section-title>span { font-size: 11px; color: var(--muted); }
.profile-favorites h2 { font-size: 18px; }
.profile-favorites-track { display: flex; gap: 12px; overflow-x: auto; padding: 0 22px 7px; scroll-padding-inline: 22px; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.profile-favorites-track>button, .profile-favorites-track>.poster-card { display: block; flex: 0 0 126px; width: 126px; padding: 0; text-align: left; scroll-snap-align: start; }
.profile-favorites-track img { display: block; width: 126px; height: 178px; object-fit: cover; border-radius: 22px; border: 1px solid #ffffff1b; }
.profile-favorites-track h3 { font-size: 12px; margin-top: 9px; line-height: 1.5; }
.profile-favorites-track p { font-size: 10px; margin-top: 3px; }
.profile-info+.tabs { margin-top: 25px; }

.discussion-comment-heading>div { min-width: 0; }
.discussion-comment-heading .person-handle { font-size: 10px; margin-top: 2px; }
@media (max-width: 375px) {
  .publish-launcher { margin-left: 17px; margin-right: 17px; }
  .publish-launcher-main { padding: 14px 10px; gap: 11px; }
  #app .publish-launcher-copy strong { font-size: 17px; }
  .publish-launcher-icon { width: 45px; height: 45px; flex-basis: 45px; }
  .profile-hero { height: 234px; }
  #app .profile-info { padding-left: 19px; padding-right: 19px; }
  #app .profile-identity h1 { font-size: 25px; }
  .profile-favorites-track { padding-left: 19px; padding-right: 19px; }
}
@media (hover: hover) and (pointer: fine) {
  .publish-launcher-main:hover { background-color: #ffffff05; }
  .publish-launcher-actions button:hover { background-color: #ffffff10; }
}
@media (prefers-reduced-motion: reduce) { .publish-launcher button { transition: none; } }
@media (prefers-reduced-transparency: reduce) {
  .publish-launcher { background: #302e4c; }
  .profile-hero-actions .icon-btn { background: #161b25; backdrop-filter: none; }
}