/* Calm editorial rhythm for the home content stream. */
:root {
  --content-ink: #17212b;
  --content-muted: #596d7c;
  --content-rule: #e8edf0;
  --content-blue: #287ca9;
}

.home-timeline-tabs {
  border-bottom-color: var(--content-rule);
}

.home-timeline-tabs button {
  transition: background-color .14s ease, color .14s ease;
}

main.home-feed > .composer {
  padding-top: 12px;
  padding-bottom: 8px;
  border-bottom-color: var(--content-rule);
}

main.home-feed > .composer #post-text {
  height: 60px;
  min-height: 60px;
  max-height: 140px;
  color: var(--content-ink);
  line-height: 1.65;
}

main.home-feed > .composer #post-text::placeholder {
  color: #748391;
}

main.home-feed > .composer .composer-toolbar {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid #f3f5f6;
}

main.home-feed > .composer .composer-actions > button {
  transition: color .14s ease, background-color .14s ease;
}

.list-tools {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px 16px;
  background: #fff;
  border-bottom-color: var(--content-rule);
}

.list-tools-note {order:2;flex-basis:100%;max-width:none;margin-top:6px;font-size:12px;text-align:right}
.list-tools-note:empty {display:none}
.list-tools-actions {gap:8px;flex-wrap:nowrap;max-width:100%;margin-left:auto}

.list-tools-actions select,
.list-tools .list-date > summary {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  border-color: #dfe6eb;
  border-radius: 6px;
  background-color: #fff;
  color: #465968;
  transition: border-color .14s ease, background-color .14s ease;
}

.list-tools-actions select {appearance:none;padding:5px 28px 5px 10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23536471' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;flex:none}
.list-tools-actions #list-order {width:112px}
.list-tools-actions #list-density {width:82px}
.list-tools .list-date > summary {display:flex;align-items:center;justify-content:center;gap:5px;width:64px;padding:5px 8px;white-space:nowrap}
.list-tools .list-date > summary svg {flex:none}
.list-tools-actions select:focus-visible,.list-tools .list-date > summary:focus-visible {outline:2px solid #1d9bf0;outline-offset:2px}
@media(max-width:530px){.list-tools{padding:8px 14px}.list-tools-actions{gap:6px}.list-tools-actions #list-order{width:106px}.list-tools-actions #list-density{width:78px}.list-tools .list-date > summary{width:62px}}

.list-tools-actions select:hover,
.list-tools .list-date > summary:hover {
  border-color: #b8c6cf;
  background-color: #fff;
}

#feed .post {
  border-bottom-color: var(--content-rule);
  transition: background-color .14s ease;
}

#feed .post:hover {
  background-color: #fbfcfd;
}

#feed .post h2 {
  margin-bottom: 8px !important;
  color: var(--content-ink);
  letter-spacing: -.01em;
}

#feed .post h2 button {
  text-align: left;
  text-decoration-color: #9fb4c2;
  text-underline-offset: 3px;
  transition: color .14s ease, text-decoration-color .14s ease;
}

#feed .post h2 button:hover {
  color: #244e68;
  text-decoration: underline;
}

#feed .post .post-summary {
  color: var(--content-muted) !important;
  line-height: 1.72 !important;
}

#feed .post-bottom {
  margin-top: 10px;
}

#feed .content-action-bar {
  min-height: 34px;
}

#feed .content-action-bar > button {
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 18px;
  transition: background-color .14s ease, color .14s ease;
}

#feed .content-action-bar > button:hover {
  background-color: #f1f6f8;
}

#feed .content-action-bar > button[data-reaction="like"]:hover,
#feed .content-action-bar > button[data-reaction="like"][aria-pressed="true"] {
  color: #d85072;
}

#feed[data-density="normal"] .post {
  padding: 30px 18px 34px !important;
}

#feed[data-density="simple"] .post {
  padding: 18px 18px 20px !important;
}

#feed[data-density="compact"] .post {
  padding: 12px 18px 14px !important;
}

@media (min-width: 531px) and (max-width: 1000px) {
  #feed[data-density="normal"] .post {
    padding: 26px 16px 30px !important;
  }

  #feed[data-density="simple"] .post {
    padding: 16px 16px 18px !important;
  }

  #feed[data-density="compact"] .post {
    padding: 10px 16px 12px !important;
  }
}

@media (max-width: 530px) {
  main.home-feed > .composer {
    padding-top: 10px;
    padding-bottom: 7px;
  }

  main.home-feed > .composer #post-text {
    height: 54px;
    min-height: 54px;
    font-size: 16px;
  }

  #feed[data-density="normal"] .post {
    padding: 24px 16px 28px !important;
  }

  #feed[data-density="simple"] .post {
    padding: 16px 16px 18px !important;
  }

  #feed[data-density="compact"] .post {
    padding: 8px 16px 10px !important;
  }

  #feed .content-action-bar > button {
    padding-right: 2px;
    padding-left: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-timeline-tabs button,
  main.home-feed > .composer .composer-actions > button,
  #feed .post,
  #feed .post h2 button,
  #feed .content-action-bar > button {
    transition: none;
  }
}