/*
 * Context-aware post-card refresh.
 * Site contexts use the retro fallbacks below. Theme Contract v2 profile feeds
 * replace them with the post/action token family. Legacy profile CSS remains
 * able to override this late-loaded layer through the profile custom-css path.
 */

.post {
  --pc-surface: #fffdf6;
  --pc-header: #fff4df;
  --pc-text: #1d2633;
  --pc-muted: #657280;
  --pc-link: #174f86;
  --pc-link-hover: #0a3966;
  --pc-border: #d78a34;
  --pc-subtle-border: #f0c48e;
  --pc-media: #241804;
  --pc-action-surface: #fff4df;
  --pc-action-text: #304e70;
  --pc-action-active: #a33a14;
  --pc-action-hover: #ffe7c8;
  --pc-quote: #fff8e9;
  --pc-comment: #fff9ef;
  --pc-menu: #fffdf6;
  --pc-input: #fffdf6;
  --pc-input-text: #1d2633;
  --pc-input-border: #d78a34;
  --pc-focus: #005fcc;
  --pc-inset: 7px;
  margin-bottom: 8px;
  overflow: visible;
  background: var(--pc-surface);
  color: var(--pc-text);
  border-color: var(--pc-border);
  box-shadow: none;
}

#content.profilepage.theme-v2 .post,
#content.profilepage.theme-v2 .profile-posts .post {
  --pc-surface: var(--g-post-surface, #fffdf6);
  --pc-header: var(--g-post-headerSurface, #fff4df);
  --pc-text: var(--g-post-text, #1d2633);
  --pc-muted: var(--g-post-muted, #657280);
  --pc-link: var(--g-link-text, var(--g-post-actionText, #174f86));
  --pc-link-hover: var(--g-link-hover, var(--g-post-actionActive, #0a3966));
  --pc-border: var(--g-post-border, #d78a34);
  --pc-subtle-border: var(--g-border-subtle, #f0c48e);
  --pc-media: var(--g-post-mediaMat, #241804);
  --pc-action-surface: var(--g-post-actionSurface, #fff4df);
  --pc-action-text: var(--g-post-actionText, #304e70);
  --pc-action-active: var(--g-post-actionActive, #a33a14);
  --pc-action-hover: var(--g-button-hover, #ffe7c8);
  --pc-quote: var(--g-post-quoteSurface, #fff8e9);
  --pc-comment: var(--g-post-commentSurface, #fff9ef);
  --pc-menu: var(--g-post-menuSurface, #fffdf6);
  --pc-input: var(--g-input-surface, #fffdf6);
  --pc-input-text: var(--g-input-text, #1d2633);
  --pc-input-border: var(--g-input-border, #d78a34);
  --pc-focus: var(--g-focus-ring, #005fcc);
}

.post .top {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 6px var(--pc-inset) 5px;
  background: var(--pc-header);
  color: var(--pc-text);
  border-color: var(--pc-border);
}

.post .top .av,
.post .top .meta,
.post .top .dots-wrap {
  float: none;
}

.post .top .av {
  flex: 0 0 32px;
  margin: 0;
}

.post .top .av img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: cover;
}

.post .top .meta {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.28;
}

.post .top .meta > a:first-child {
  color: var(--pc-link);
}

.post .top .meta > a:first-child:hover,
.post .cap a:hover,
.post .quotecard a:hover,
.post .post-context a:hover {
  color: var(--pc-link-hover);
}

.post .top .ts,
.post .top .edited,
.post .top .loc,
.post .post-context {
  color: var(--pc-muted);
}

.post .top .dots-wrap {
  flex: 0 0 auto;
  /* margin-left:auto pushes this flex item flush to the row's right edge --
     the top-right corner of the post card -- regardless of how much space
     .meta's own content leaves unclaimed. Without it, a legacy
     `.post .top .meta{float:left}` rule in gobstagram.css (harmless on its
     own, since float doesn't apply to flex items) still seems to be enough
     to stop .meta's flex-grow:1 from claiming all the row's free space, so
     the "..." button ended up stranded partway across the row with a gap
     of dead space to its right instead of hugging the corner. */
  margin: -2px -2px 0 auto;
}

.post .top .clear,
.post .acts .clear {
  display: none;
}

.post .cap {
  margin: 0;
  padding: 6px var(--pc-inset);
  background: var(--pc-surface);
  color: var(--pc-text);
  line-height: 1.36;
}

.post .cap a,
.post .quotecard a,
.post .post-context a {
  color: var(--pc-link);
}

.post .post-context {
  margin: 0;
  padding: 4px var(--pc-inset);
  background: var(--pc-header);
  border-bottom: 1px solid var(--pc-subtle-border);
  font-size: 11px;
  line-height: 1.25;
}

.post .quotecard {
  margin: 0 var(--pc-inset) 6px;
  padding: 5px 6px;
  background: var(--pc-quote);
  color: var(--pc-text);
  border-color: var(--pc-subtle-border);
}

.post .quotecard .qhead,
.post .quotecard .qbody {
  margin: 0;
  color: var(--pc-text);
}

.post .quotecard .qbody {
  padding-top: 3px;
  line-height: 1.32;
}

.post .gallery {
  margin: 0;
  background: var(--pc-media);
  border-color: var(--pc-border);
}

.post .gallery .post-swiper {
  padding: 4px 30px 3px;
  background: var(--pc-media);
}

.post .gallery .swiper-pagination {
  min-height: 18px;
  padding: 3px 6px 2px;
  background: var(--pc-action-surface);
  border-color: var(--pc-border);
}

.post .gallery .swiper-pagination-bullet {
  margin: 0 3px !important;
  border-color: var(--pc-border);
}

.post .acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 4px var(--pc-inset);
  min-height: 30px;
  background: var(--pc-action-surface);
  border-top: 1px solid var(--pc-border);
  color: var(--pc-action-text);
}

.post .acts .ico {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 0;
  padding: 3px 5px;
  background: transparent;
  border-color: transparent;
  color: var(--pc-action-text);
  line-height: 1;
}

.post .acts .ico:hover {
  background: var(--pc-action-hover);
  border-color: var(--pc-subtle-border);
  color: var(--pc-action-text);
}

.post .acts .ico:active {
  background: var(--pc-action-surface);
}

.post .acts .ico[aria-pressed="true"],
.post .acts .liked,
.post .acts .saved,
.post .acts .reposted {
  color: var(--pc-action-active);
}

.post .acts .ico:focus-visible,
.post .top .dots-btn:focus-visible,
.post .reply-box input:focus-visible,
.post .reply-box .btn:focus-visible {
  outline: 2px solid var(--pc-focus);
  outline-offset: 2px;
}

.post .dots-btn {
  color: var(--pc-action-text);
}

.post .dots-drop,
.post .repost-drop {
  background: var(--pc-menu);
  color: var(--pc-text);
  border-color: var(--pc-border);
}

.post .dots-drop a,
.post .repost-drop a {
  color: var(--pc-link);
}

.post .cmts,
.post .comments,
.post .reply-row {
  margin: 0;
  padding: 5px var(--pc-inset);
  background: var(--pc-comment);
  color: var(--pc-text);
  border-color: var(--pc-subtle-border);
}

.post .reply-box {
  margin: 0;
  padding: 0;
  background: var(--pc-comment);
}

.post .reply-box .addc {
  margin: 0;
  padding: 0 var(--pc-inset) 6px;
}

.post .reply-box input {
  background: var(--pc-input);
  color: var(--pc-input-text);
  border-color: var(--pc-input-border);
}

@media (max-width: 540px) {
  .post { --pc-inset: 6px; margin-bottom: 7px; }
  .post .top { gap: 6px; padding-top: 5px; padding-bottom: 4px; }
  .post .top .av { flex-basis: 30px; }
  .post .top .av img { width: 30px; height: 30px; }
  .post .cap { padding-top: 5px; padding-bottom: 5px; }
  .post .gallery .post-swiper { padding: 3px 26px 2px; }
  .post .acts { padding-top: 3px; padding-bottom: 3px; }
  .post .acts .ico { padding: 3px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .post .acts .ico { transition: none; }
}

/* ── Lightweight finish ─────────────────────────────────────────────────────
   Folded in from the former css/post-card-light.css, which loaded straight
   after this file and did nothing that could not be said here. Keeping it
   separate cost three !important declarations whose only job was to beat the
   rules above -- and one of them was beating theme-v3.css as well, which is
   how the action row ended up sized like a button and painted like a link.
   Its action-row block is gone: theme-v3.css owns that row and says so. */

.post {
  border-color: var(--pc-subtle-border);
}

.post .top,
.post .cap {
  background: var(--pc-surface);
}

.post .top {
  border-bottom-color: transparent;
  padding-bottom: 4px;
}

.post .cap {
  padding-top: 4px;
  padding-bottom: 5px;
}

/* Let the photo be the visual moment, not a framed object inside a second box.
   The mat itself stays var(--pc-media) -- that's the near-black letterbox
   backing object-fit:contain photos show against, per the design system
   ("letterboxed on --pc-media (near-black) when they don't fill the frame").
   An earlier pass here set this to transparent, which let the post's own
   cream surface show through the letterbox bars instead. */
.post .gallery,
.gallery {
  margin: 0;
  background: var(--pc-media);
  border-top: 0;
  border-bottom: 0;
}

.post .gallery .post-swiper,
.gallery .post-swiper {
  padding: 0;
  background: var(--pc-media);
}

.gallery .post-swiper .swiper-slide {
  background: transparent;
}

.gallery .post-swiper .slide img {
  display: block;
}

/* Small translucent edge affordances replace the old boxed carousel arrows. */
.gallery .swiper-button-prev,
.gallery .swiper-button-next {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: color-mix(in srgb, var(--pc-surface, var(--gs-control-surface)) 84%, transparent);
  color: var(--pc-action-text, var(--gs-control-text));
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.gallery .swiper-button-prev { left: 7px; }
.gallery .swiper-button-next { right: 7px; }

.gallery .swiper-button-prev::after,
.gallery .swiper-button-next::after {
  font-size: 10px;
  font-weight: 700;
}

.gallery .swiper-button-prev:hover,
.gallery .swiper-button-next:hover {
  background: color-mix(in srgb, var(--pc-action-hover, var(--gs-control-hover)) 88%, transparent);
  color: var(--pc-action-text, var(--gs-control-text));
}

.gallery .swiper-button-prev:active,
.gallery .swiper-button-next:active {
  background: color-mix(in srgb, var(--pc-action-active, var(--gs-control-active)) 26%, transparent);
  box-shadow: none;
}

.gallery .swiper-button-disabled {
  background: color-mix(in srgb, var(--pc-surface, var(--gs-control-disabled)) 70%, transparent);
  color: var(--pc-muted, var(--gs-control-disabled-text));
  border: 0;
  box-shadow: none;
}

.gallery .swiper-pagination,
.post .gallery .swiper-pagination {
  min-height: 13px;
  padding: 3px 6px 4px;
  background: transparent;
  border: 0;
}

.gallery .swiper-pagination-bullet,
.post .gallery .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 3px !important;
  background: var(--pc-muted, var(--gs-pagination-dot));
  border: 1px solid var(--pc-border, var(--gs-media-border));
  border-radius: 0;
  opacity: .45;
}

.gallery .swiper-pagination-bullet-active {
  background: var(--pc-action-active, var(--gs-pagination-active));
  opacity: 1;
  transform: none;
}

.post .acts .save-btn,
.post .acts .ico:last-child:is(.save, .save-btn) {
  margin-left: auto;
}

.post .acts .ico .pxi,
.post .acts .ico [class^="pxi-"] {
  vertical-align: -1px;
}

.gallery .swiper-button-prev:focus-visible,
.gallery .swiper-button-next:focus-visible,
.gallery .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--pc-focus, var(--gs-focus-ring));
  outline-offset: 2px;
}

@media (max-width: 540px) {
  .post .gallery .post-swiper,
  .gallery .post-swiper { padding: 0; }
  .gallery .swiper-button-prev { left: 5px; }
  .gallery .swiper-button-next { right: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .post .acts .ico,
  .gallery .swiper-pagination-bullet { transition: none; }
}