/* 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; }
/* e14: up to 30 photos per post — 4 tiles, the 4th with +N; a tap opens them all. */
.post-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; margin:0 0 .75rem; border-radius:var(--radius,12px); overflow:hidden; }
.post-gallery[data-count="3"] .post-gallery-tile:first-child { grid-column:1 / -1; aspect-ratio:2 / 1; }
.post-gallery-tile { position:relative; display:block; aspect-ratio:1; min-width:0; padding:0; border:0; background:var(--bg3,#eee); cursor:zoom-in; overflow:hidden; }
.post-gallery-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.post-gallery-tile:focus-visible { outline:3px solid var(--accent-primary,#8b5cf6); outline-offset:-3px; }
.post-gallery-more { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); color:#fff; font:700 28px/1 Inter,sans-serif; }
.compose-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:6px; }
.compose-photo-grid .image-preview { position:relative; margin:0; aspect-ratio:1; }
.compose-photo-grid .image-preview img { width:100%; height:100%; max-height:none; object-fit:cover; border-radius:8px; }
.compose-photo-count { display:block; margin-top:4px; color:var(--text-muted,#6b7280); font-size:12px; }
/* Latest feed cards (fetch_home_latest_v2): a video, an audio track and a Space
   post in the post-card shell, the way the app's Home draws them. Colours come
   from the theme tokens so both themes read. */
.home-latest-card .hl-head { flex:1; min-width:0; }
.home-latest-card .hl-title { margin:6px 0 2px; color:var(--text); font-weight:700; font-size:16px; overflow-wrap:anywhere; }
.home-latest-card .hl-clamp { display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.home-latest-card .hl-meta { color:var(--text2); font-size:13px; }
.home-latest-card .hl-video { position:relative; display:block; width:100%; aspect-ratio:16/9; margin:8px 0; padding:0; border:0; border-radius:12px; overflow:hidden; background:#0b0912; cursor:pointer; }
.home-latest-card .hl-video img { width:100%; height:100%; object-fit:cover; display:block; }
.home-latest-card .hl-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; }
.home-latest-card .hl-duration { position:absolute; right:8px; bottom:8px; padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.7); color:#fff; font:600 12px/1.3 Inter,sans-serif; }
.home-latest-card .hl-audio { display:flex; align-items:center; gap:12px; width:100%; margin:8px 0 4px; padding:10px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--hl-accent, #7c3aed) 14%, var(--bg2)); color:var(--text); text-align:left; cursor:pointer; }
.home-latest-card .hl-audio-cover { flex:none; width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--hl-accent, #7c3aed); }
.home-latest-card .hl-audio-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.home-latest-card .hl-audio-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.home-latest-card .hl-audio-text strong { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-latest-card .hl-audio-text small { color:var(--text2); }
.home-latest-card .hl-audio-play { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--hl-accent, #7c3aed); color:#fff; }
.home-latest-card .hl-space-avatar { border-radius:10px; }
.home-latest-card .hl-photos { display:grid; gap:4px; margin:8px 0; border-radius:12px; overflow:hidden; }
.home-latest-card .hl-photos-2, .home-latest-card .hl-photos-4 { grid-template-columns:1fr 1fr; }
.home-latest-card .hl-photos-3 { grid-template-columns:2fr 1fr; }
.home-latest-card .hl-photos img { width:100%; height:100%; max-height:420px; object-fit:cover; display:block; aspect-ratio:1; }
.home-latest-card .hl-photos-1 img { aspect-ratio:auto; }
.home-latest-card .hl-adult { margin:8px 0; color:var(--text2); font-size:13px; }
.home-latest-card .hl-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.home-latest-card .hl-open { min-height:44px; padding:0 14px; border:1px solid var(--border2, var(--border)); border-radius:10px; background:transparent; color:var(--text); font-weight:600; cursor:pointer; }
.home-latest-card :is(.hl-video,.hl-audio,.hl-open):focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
.feed-following-signed-out .btn { margin-top:8px; min-height:44px; }