/* Shared post controls: the same Join AS surface in the header and summary. */
body .feed-post .feed-join-as {
  background: #d9f3ec;
  border-color: rgba(8, 123, 114, .24);
  color: #087b72;
}

body .feed-post .feed-circle-summary .feed-join-as > span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* Keep the attribution and date together in shared feed-card metadata. */
body :is([data-feed-alpha], [data-public-feed-root]) .feed-post-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 7px;
  row-gap: 4px;
}
body :is([data-feed-alpha], [data-public-feed-root]) .feed-post-meta > [data-post-attribution] {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
body :is([data-feed-alpha], [data-public-feed-root]) .feed-post-meta > [data-post-time] {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  margin-inline: 0;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* Offer-page's important padding reset otherwise erases shell clearance. */
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body:is([data-page-id="asset_detail"], [data-page-id="offer_public"], [data-page-id="personal_offer_public"], [data-page-id^="graph_public"]) .main:has([data-public-feed-root]) {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
  }

  /* Keep attribution/time together; an optional Circle label gets its own row. */
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post-meta {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    align-items: center;
    min-width: 0;
    gap: 4px 7px;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post-meta > [data-post-attribution] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post-meta > time {
    white-space: nowrap;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post-meta > time::before {
    content: "·";
    margin-right: 7px;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post-meta > .feed-circle-post-label {
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 0;
  }
}

/* Circle cards: one phone attribution line and a compact member/join footer. */
@media (max-width: 767px) {
  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-header {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; min-width: 0; min-height: 44px; height: auto;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-header :is(.feed-post-identity, .feed-post-author, .feed-post-meta) {
    display: contents;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-header > .feed-avatar-link {
    flex: 0 0 44px; margin-right: 4px;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-header [data-post-profile-name] {
    display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-header .feed-post-badge {
    flex: 0 0 auto; line-height: 1;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-meta > [data-post-attribution] {
    display: none;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-header [data-post-time] {
    position: static; flex: 0 0 auto; margin: 0; white-space: nowrap; font-size: 12px; line-height: 1.25;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-meta > time::before {
    content: "\00b7"; margin-right: 4px;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-post-header .feed-circle-post-label {
    position: static; align-self: center; flex: 0 0 auto; max-width: 110px; margin: 0 0 0 auto; padding: 2px 6px; line-height: 1.4;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-circle-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; margin: 8px 0 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-circle-summary > .feed-circle-phone-member-count {
    display: block !important; position: static; inset: auto; order: 0; flex: 1 1 0; min-width: 0; max-width: none; margin: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; background: transparent; color: var(--feed-muted, #667085); font-size: 11px; line-height: 1.25; white-space: nowrap;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-circle-summary > .feed-join-control {
    order: 1; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 0; max-width: 50%; margin-left: auto;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-circle-summary > .feed-circle-inline-join {
    order: 1; flex: 0 0 auto; margin-left: auto;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-circle-summary .feed-join-as {
    position: static; box-sizing: border-box; min-width: 0; min-height: 44px; height: 44px; max-width: 100%; padding: 0 8px; white-space: nowrap; font-size: 12px; line-height: 1.15;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-circle-summary > .feed-circle-role-carousel {
    order: 2; flex: 0 0 100%; min-width: 0;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])) .feed-circle-summary .feed-join-as > span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])):has(.feed-circle-phone-member-count) .feed-circle-member-count:not(.feed-circle-phone-member-count) {
    display: none;
  }

  html:is([data-candao-device="phone"], [data-candao-ux-phone="true"]):not([data-candao-device="desktop"]):not([data-candao-device="tablet"]) body :is([data-feed-alpha], [data-public-feed-root]) .feed-post:has([data-circle-post-label]:not([hidden])):has(.feed-circle-phone-member-count) .feed-post-header > .feed-join-control {
    display: none;
  }
}