/*
 * 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 is set by a later bare `.post` rule to --pc-subtle-border,
     which has always won; declaring --pc-border here only looked like intent. */
  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;
  /* The header shares .cap's surface: a later rule sets both to
     var(--pc-surface). An earlier `var(--pc-header)` here never applied.
     Restoring a distinct header tint is a design decision, not a cleanup. */
  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 .quotecard .qkind {
  background: var(--pc-header);
  border-color: var(--pc-subtle-border);
  color: var(--pc-muted);
}

.post .post-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0 var(--pc-inset) 6px;
  background: var(--pc-surface);
}

.post .post-trait {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid var(--pc-subtle-border);
  background: var(--pc-header);
  color: var(--pc-muted);
  font-size: 10px;
  line-height: 1.2;
  text-decoration: none;
}

.post .post-trait-link:hover,
.post .post-trait-link:focus-visible {
  color: var(--pc-link-hover);
  border-color: var(--pc-link-hover);
  text-decoration: none;
}

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

.post .gallery .post-swiper {
  /* No padding here: a later top-level rule sets `padding: 0` at equal
     specificity, and did so silently for a long time. The frame is flush. */
  background: var(--pc-media);
}

.post .gallery .swiper-pagination {
  /* min-height and padding are set further down; declaring them here too is
     how the pagination bullets regressed. Surface and border only. */
  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,
.post .dots-drop button,
.post .repost-drop button {
  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 .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;
}

/* min-height/padding only -- background and border-top come from the
   earlier .post .gallery .swiper-pagination rule above (post context,
   var(--pc-action-surface) + var(--pc-border)) and from swiper-theme.css
   (non-post context, var(--gs-pagination-surface) + var(--gs-media-border)).
   This rule used to also reset both to transparent/0, which silently
   dropped the pagination bar's surface and border -- the same collateral
   damage the gallery mat background took from this same merged-in section. */
.gallery .swiper-pagination,
.post .gallery .swiper-pagination {
  min-height: 13px;
  padding: 3px 6px 4px;
}

.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; }
}