/* Keep the reading column centered, independently of the recommendation rail.
   Existing feed markup, loading, and actions remain shared with mobile. */
@media (min-width:769px) {
  body.on-post-feed .main-wrap {
    max-width:none !important;
    width:auto !important;
    margin-left:var(--sidebar-w) !important;
    margin-right:0 !important;
    padding:24px 24px 32px !important;
  }
  body.on-post-feed .post-feed-shell {
    display:block;
    max-width:620px;
    margin-inline:auto;
  }
  body.on-post-feed .post-feed-main { min-width:0; }
  body.on-post-feed .feed-right-rail { display:none; }
}

/* Equal outside tracks keep the posts at the viewport center. Their minimum
   width also reserves enough room for the existing fixed left navigation. */
@media (min-width:1200px) {
  body.on-post-feed .main-wrap {
    margin-left:0 !important;
    padding-inline:0 !important;
  }
  body.on-post-feed .post-feed-shell {
    display:grid;
    grid-template-columns:minmax(calc(var(--sidebar-w) + 24px),1fr) minmax(0,620px) minmax(calc(var(--sidebar-w) + 24px),1fr);
    gap:0;
    max-width:none;
    align-items:start;
  }
  body.on-post-feed .post-feed-main { grid-column:2; }
}

@media (min-width:1280px) {
  body.on-post-feed .feed-right-rail {
    display:block;
    grid-column:3;
    position:sticky;
    top:calc(var(--header-h) + 24px);
    align-self:start;
    justify-self:end;
    width:calc(100% - 40px);
    max-width:300px;
    min-width:0;
    margin-right:16px;
    max-height:calc(100dvh - var(--header-h) - 40px);
    overflow-y:auto;
    padding-bottom:84px;
    scrollbar-width:thin;
  }

}

/* Keep portrait uploads from taking over the feed. The full original still
   opens through the existing lightbox. Container units cap phone previews at
   4:5; desktop previews stop at 480px. Shorter images keep their own ratio. */
.post-card .post-image,
body.on-post-feed .post-feed-main .post-image {
  container-type:inline-size;
  max-height:480px;
  cursor:zoom-in;
}
.post-card .post-image img,
body.on-post-feed .post-feed-main .post-image img {
  display:block;
  width:100%;
  height:auto;
  max-height:min(480px,125cqw);
  object-fit:cover;
  object-position:center;
}
.post-card .post-image:hover img { transform:none; }
.post-card .post-image.img-failed { cursor:default; }

/* Four complete Moments and half of the next give the strip a clear scroll cue. */
body.on-post-feed .stories-row.moments-strip-row {
  gap:10px;
  padding:6px 0 8px;
  margin:0 0 10px;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.on-post-feed .stories-row .story-item.moment-card {
  flex:0 0 calc((100% - 40px) / 4.5);
  width:calc((100% - 40px) / 4.5);
  min-width:0;
}
body.on-post-feed .stories-row .moment-card-preview {
  width:100%;
  height:auto;
  aspect-ratio:2 / 3;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
body.on-post-feed .stories-row .moment-card-name {
  left:8px;right:8px;bottom:10px;font-size:12px;font-weight:700;
}
body.on-post-feed .stories-row .moment-card-avatar {
  width:30px;height:30px;top:8px;left:8px;border-width:2px;
}
body.on-post-feed .moment-strip-arrow {
  width:36px;height:36px;padding:0;border-radius:50%;font-size:0;
  border:1px solid var(--border);background:var(--bg2);color:var(--text2);
  box-shadow:0 2px 8px rgba(20,15,40,.18);
  transition:background .15s,box-shadow .15s,opacity .15s;
}
body.on-post-feed .moment-strip-arrow::after {
  content:"";width:8px;height:8px;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg);margin-right:3px;
}
body.on-post-feed .moment-strip-arrow-left::after {transform:rotate(-135deg);margin-right:0;margin-left:3px;}
body.on-post-feed .moment-strip-arrow-left {left:8px;}
body.on-post-feed .moment-strip-arrow-right {right:8px;}
body.on-post-feed .moment-strip-arrow:hover {background:var(--bg3);color:var(--purple);box-shadow:0 3px 12px rgba(20,15,40,.24);}
body.on-post-feed .moment-strip-arrow:disabled {visibility:hidden;pointer-events:none;}
body.on-post-feed .moment-strip-arrow:focus-visible {outline:2px solid var(--purple);outline-offset:3px;}
body.on-post-feed #feedTabs {
  display:flex;gap:0;padding:0 !important;margin:0 0 8px;
  background:transparent !important;border:0 !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0 !important;box-shadow:none !important;
}
body.on-post-feed #feedTabs .feed-tab {
  position:relative;flex:1;min-width:0;padding:6px 12px 7px;
  border-radius:0 !important;font-size:16px;line-height:22px;
  letter-spacing:0;font-weight:500 !important;
  color:var(--text2) !important;background:transparent !important;
  box-shadow:none !important;
}
body.on-post-feed #feedTabs .feed-tab.active {
  background:transparent !important;color:var(--text) !important;font-weight:700 !important;
}
body.on-post-feed #feedTabs .feed-tab.active::after {
  content:"";position:absolute;bottom:-1px;left:19%;right:19%;
  height:2px;border-radius:2px;background:var(--accent-primary);
}
body.on-post-feed #feedTabs .feed-tab:hover {color:var(--text) !important;}
body.on-post-feed #feedTabs .feed-tab:focus-visible {outline:2px solid var(--accent-primary);outline-offset:-3px;}
@media(min-width:769px) {
  body.on-post-feed .main-wrap {padding-top:12px !important;}
}
@media(max-width:480px) {
  body.on-post-feed .main-wrap {padding-top:8px !important;}
  body.on-post-feed .stories-row.moments-strip-row {gap:8px;}
  body.on-post-feed .stories-row .story-item.moment-card {flex-basis:calc((100% - 32px) / 4.5);width:calc((100% - 32px) / 4.5);}
  body.on-post-feed .stories-row .moment-card-avatar {width:24px;height:24px;top:6px;left:6px;}
  body.on-post-feed .stories-row .moment-card-name {font-size:10px;left:6px;right:6px;bottom:8px;}
  body.on-post-feed .moment-strip-arrow {width:32px;height:32px;}
}

/* Post-page density: keep reading sizes and actions, trim surrounding chrome. */
body.on-post-feed .compose:has(.compose-launcher) {padding:6px 10px !important;margin-bottom:4px;}
body.on-post-feed .compose-launcher {gap:8px;}
body.on-post-feed .compose-launch-avatar {width:32px;height:32px;flex-basis:32px;}
body.on-post-feed #composeLaunchPrompt {height:34px;font-size:14px;padding-inline:14px;}
body.on-post-feed :is(.compose,.post-card) {
  border-radius:14px !important;
  box-shadow:0 1px 3px rgba(25,20,40,.06) !important;
}
body.on-post-feed .post-card:hover {transform:none !important;box-shadow:0 1px 3px rgba(25,20,40,.06) !important;}
body.on-post-feed #feed > .post-card {padding-top:12px;margin-bottom:8px;}
body.on-post-feed #feed .post-header {margin-bottom:6px;}
body.on-post-feed #feed .post-body {margin-bottom:8px;}
/* Both counters populate asynchronously; they recover their usual layout as
   soon as a reaction or comment count arrives. */
body.on-post-feed #feed .post-stats:has(> .rcount:empty):has(> .ccount:empty) {display:none;}
body.on-post-feed :is(#wlQaOpenBtn,#wlQaBadge) {display:none !important;}
@media(min-width:769px) {
  body.on-post-feed #appSidebar .sidebar-item {height:48px;min-height:48px;gap:10px;padding:6px 8px !important;}
  body.on-post-feed #appSidebar .sidebar-icon {width:32px;height:32px;border-radius:8px;}
  body.on-post-feed #appSidebar .sidebar-icon svg {width:24px;height:24px;}
  body.on-post-feed #appSidebar .sidebar-divider {margin-block:6px;}
}
/* Open recommendation sections keep attention on the central feed. */
@media(min-width:1280px) {
  body.on-post-feed .rail-card {
    padding:0 4px 18px;margin:0 0 18px;
    background:transparent !important;border:0 !important;
    border-radius:0 !important;box-shadow:none !important;
  }
  body.on-post-feed .rail-card + .rail-card {border-top:1px solid var(--border) !important;padding-top:18px;}
  body.on-post-feed .rail-header {gap:6px;margin:0 0 10px;padding:0;border:0;min-height:32px;}
  body.on-post-feed .rail-title {
    display:flex;align-items:center;gap:7px;min-width:0;margin:0;
    font-size:16px;line-height:1.35;font-weight:600 !important;
    letter-spacing:0 !important;text-transform:none;color:var(--text) !important;
  }
  body.on-post-feed .rail-title-icon {width:18px;height:18px;flex-shrink:0;margin:0;color:var(--text3);}
  body.on-post-feed .rail-see-all {
    flex:0 0 auto;width:auto;min-height:32px;margin:0;padding:6px 4px;
    font-size:12px;font-weight:600;white-space:nowrap;border-radius:6px;
  }
  body.on-post-feed .trending-list {gap:12px !important;}
  body.on-post-feed .trending-row {padding:4px;gap:8px;border-radius:8px;}
  body.on-post-feed .trending-rank {min-width:14px;font-size:13px;font-weight:600;color:var(--text3);}
  body.on-post-feed .trending-cover {width:40px;height:60px;border-radius:5px;box-shadow:none;}
  body.on-post-feed .trending-cover-round {width:44px;height:44px;border-radius:7px;}
  body.on-post-feed .trending-meta {gap:2px;}
  body.on-post-feed .trending-title {
    font-size:14px;font-weight:600;line-height:1.35;white-space:normal;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  body.on-post-feed .trending-author,
  body.on-post-feed .trending-stat {font-size:12px;font-weight:400;line-height:16px;color:var(--text3);}
  body.on-post-feed .rail-suggest-row {padding:6px 4px;margin:0;gap:8px;}
  body.on-post-feed :is(.trending-row,.rail-suggest-row,.rail-see-all):hover {background:rgba(var(--accent-rgb),.06);}
  body.on-post-feed :is(.trending-row,.rail-suggest-row,.rail-see-all,.rail-refresh):focus-visible {outline:2px solid var(--purple);outline-offset:2px;}
}

@media(max-width:600px) {
  body.on-post-feed .compose:has(.compose-launcher) {padding:8px !important;}
  body.on-post-feed .compose-launcher {column-gap:8px;row-gap:2px;}
  body.on-post-feed .compose-launch-avatar {width:36px;height:36px;flex-basis:36px;}
  body.on-post-feed #composeLaunchPrompt {height:44px;font-size:15px;padding-inline:12px;}
  body.on-post-feed .compose-launch-actions {padding-top:0;}
  body.on-post-feed .compose-launch-actions button {min-height:44px;}
}

@media(min-width:601px) {
  body.on-post-feed .compose-launch-actions button {width:34px;height:34px;padding:6px;}
  body.on-post-feed .compose-launch-actions svg {width:22px;height:22px;}
  body.on-post-feed .stories-row.moments-strip-row {padding-bottom:4px;margin-bottom:6px;}
}
@media(max-width:600px) {
  body.on-post-feed #feedTabs .feed-tab {min-height:44px;}
}

/* Feed data is already ready when cards are inserted. Avoid hiding it behind
   per-card entrance delays, especially during infinite scrolling. */
body.on-post-feed #feed > .post-card:not(.post-flash) { animation:none; }

/* Loading cards reserve a readable feed shape while data is on the way. */
.feed-loading { display:grid; gap:12px; width:100%; }
.feed-loading-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.feed-skeleton { padding:14px; border:1px solid var(--border,#e8e3f2); border-radius:16px; background:var(--card,#fff); overflow:hidden; }
.feed-skeleton i, .feed-skeleton-media { display:block; background:#eeeaf4; border-radius:6px; }
.feed-skeleton-header { display:flex; gap:10px; align-items:center; margin-bottom:16px; }
.feed-skeleton-header > div { flex:1; }
.feed-skeleton .feed-skeleton-avatar { width:36px; height:36px; border-radius:50%; }
.feed-skeleton-name { width:32%; height:12px; margin-bottom:8px; }
.feed-skeleton-meta { width:20%; height:9px; }
.feed-skeleton-line { height:11px; margin-bottom:9px; width:90%; }
.feed-skeleton-line.short { width:61%; }
.feed-skeleton-media { height:clamp(150px,28vw,230px); margin-top:16px; }
.feed-skeleton-actions { display:flex; justify-content:space-around; gap:18px; border-top:1px solid var(--border,#e8e3f2); padding-top:12px; margin-top:12px; }
.feed-skeleton-actions i { width:17%; height:10px; }
@media (prefers-reduced-motion:no-preference) {
  .feed-skeleton { animation:feed-loading-pulse 1.6s ease-in-out infinite alternate; }
  @keyframes feed-loading-pulse { to { opacity:.58; } }
}

/* Small windows use the same compact Post composition as desktop. */
@media(max-width:768px) {
  body.on-post-feed .main-wrap { width:100% !important; margin-left:0 !important; padding:8px 10px 24px !important; }
  body.on-post-feed .post-feed-shell { display:block; max-width:620px; margin-inline:auto; }
  body.on-post-feed .post-feed-main { min-width:0; }
  body.on-post-feed .feed-right-rail { display:none; }
  body.on-post-feed .stories-row.moments-strip-row { padding-top:0; padding-bottom:4px; margin-bottom:6px; }
  body.on-post-feed .compose:has(.compose-launcher) { padding:6px 8px !important; margin-bottom:4px; }
  body.on-post-feed .compose-launcher { flex-wrap:nowrap; gap:6px; }
  body.on-post-feed .compose-launch-avatar { width:32px; height:32px; flex-basis:32px; }
  body.on-post-feed #composeLaunchPrompt { height:38px; font-size:14px; padding-inline:12px; }
  body.on-post-feed .compose-launch-actions { width:auto; flex:none; gap:0; border:0; padding:0; }
  body.on-post-feed .compose-launch-actions button { flex:0 0 40px; width:40px; height:40px; min-height:40px; padding:9px; }
  body.on-post-feed .compose-launch-actions svg { width:22px; height:22px; }
  body.on-post-feed #feedTabs { margin-bottom:6px; }
  body.on-post-feed #feedTabs .feed-tab { min-height:40px; padding:8px 10px; font-size:15px; line-height:22px; }
  body.on-post-feed #feed > .post-card { padding:12px 12px 4px; margin-bottom:8px; }
  body.on-post-feed #feed .post-header { gap:8px; margin-bottom:8px; }
  body.on-post-feed #feed .post-header .avatar { width:36px; height:36px; }
  body.on-post-feed #feed .post-author { font-size:14px; line-height:20px; }
  body.on-post-feed #feed .post-time { font-size:11px; line-height:16px; }
  body.on-post-feed #feed .post-body { font-size:14px; line-height:1.55; }
}
@media(max-width:360px) {
  body.on-post-feed .main-wrap { padding-inline:8px !important; }
  body.on-post-feed .compose-launcher { gap:4px; }
  body.on-post-feed .compose-launch-actions button { flex-basis:36px; width:36px; padding:7px; }
  body.on-post-feed #composeLaunchPrompt { padding-inline:9px; }
}

/* Permission-checked Space originals, shared by feed/profile/detail/repost preview. */
.space-repost { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:10px 0; padding:14px; background:var(--bg2); }
.space-repost a { color:var(--purple); text-decoration:none; }
.space-repost a:hover { text-decoration:underline; }
.space-repost a:focus-visible,.space-repost button:focus-visible { outline:2px solid var(--purple); outline-offset:3px; }
.space-repost-origin { display:block; font-size:13px; font-weight:650; margin-bottom:12px; overflow-wrap:anywhere; }
.space-repost-origin span { color:var(--text3); font-size:12px; font-weight:400; }
.space-repost-author { display:flex; align-items:center; gap:9px; margin-bottom:10px; font-size:14px; color:var(--text); overflow-wrap:anywhere; }
.space-repost-author .avatar { width:32px; height:32px; flex:0 0 32px; font-size:13px; }
.space-repost .post-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.space-repost-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; margin:10px -14px; overflow:hidden; }
.space-repost-photos[data-count="1"] { grid-template-columns:1fr; }
.space-repost-photos a { position:relative; aspect-ratio:1; min-width:0; background:var(--bg3); }
.space-repost-photos[data-count="1"] a { aspect-ratio:4/3; max-height:460px; }
.space-repost-photos img { display:block; width:100%; height:100%; object-fit:cover; }
.space-repost-photos a>span { position:absolute; inset:0; display:grid; place-items:center; background:#0007; color:white; font-size:28px; }
.space-repost-attachment { display:block; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg3); font-size:13px; margin:12px 0; }
.space-repost-open { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:10px; margin-top:10px; border-top:1px solid var(--border); font-size:13px; font-weight:600; }
.space-repost-unavailable { padding:18px 8px; color:var(--text2); font-size:14px; }
.space-repost-unavailable p { margin:6px 0 0; font-size:13px; color:var(--text3); }
.space-repost-unavailable button { margin-top:12px; padding:8px 14px; border:1px solid var(--border); background:var(--bg3); color:var(--text); border-radius:8px; cursor:pointer; }
.space-repost-placeholder { min-height:140px; display:flex; flex-direction:column; gap:12px; padding:12px 0; }
.space-repost-placeholder span { height:16px; width:80%; background:var(--bg3); border-radius:5px; }
.space-repost-placeholder span:first-child { width:45%; }

.space-repost-media-failed { display:grid; place-items:center; color:var(--text3); font-size:13px; }