/* ACE Newsfeed — the site's dark palette.

   Every colour below is written as var(--rc-*, <fallback>), and nothing on
   the Feed page ever defined --rc-*: the practice and calendar plugins set
   them only inside their own pages. So every one of them fell back to its
   literal, which was the original terracotta — the Post button, the
   mentions, the unread notifications, all of it — while the rest of the
   site had moved to teal.

   Defined here instead, for the feed and for the bell, from the palette's
   own tokens, so they follow ace-palette whatever it is set to.

   Three shades, because one teal cannot do all three jobs:
     --rc-primary       dots, borders, outlines, tints
     --rc-primary-text  teal TEXT on the dark cards. The full teal is about
                        3.1:1 there, short of the 4.5:1 body text needs; a
                        lighter teal is 5.6:1.
     --rc-primary-fill  behind white text. White on the full teal is 4.2:1;
                        deepened 13% it is 5.4:1 — the same treatment the
                        Wrong Answers tabs got. */

.ace-feed,
.ace-feed-bell-wrap{
  --rc-primary: var(--color-primary, #008a81);
  --rc-primary-rgb: var(--ace-primary-rgb, 0,138,129);
  /* Mixed from the primary rather than borrowed from --color-accent: the
     theme's own accent is a warm gold, and only ace-palette turns it teal.
     62% toward white is the same step ace-palette takes, so on this site it
     comes out #61b6b1 either way — without depending on that plugin. */
  --rc-primary-text: color-mix(in srgb, var(--color-primary, #008a81) 62%, #fff);
  --rc-primary-fill: color-mix(in srgb, var(--color-primary, #008a81) 87%, #000);
}

.ace-feed{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ace-feed-login-notice,
.ace-feed-no-courses,
.ace-feed-empty{
  padding: 16px;
  border-radius: 10px;
  background: var(--rc-surface, #30302e);
  border: 1px solid var(--rc-line, rgba(255,255,255,.08));
  color: var(--rc-muted, #a39e93);
  font-size: .86rem;
  text-align: center;
}

/* ---------------- Compose box ---------------- */

.ace-feed-compose{
  background: var(--rc-surface, #30302e);
  border: 1px solid var(--rc-line, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 14px;
}

.ace-feed-compose-top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ace-feed-compose-top img{ border-radius: 50%; flex-shrink: 0; }

.ace-feed-course-picker-wrap{ flex: 1; min-width: 0; }
.ace-feed-course-picker-label{
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rc-muted, #a39e93);
  margin-bottom: 5px;
}
.ace-feed-course-picker{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ace-feed-course-pill{
  background: rgba(0,0,0,.2);
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 20px;
  color: var(--rc-muted, #a39e93);
  font-size: .76rem;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ace-feed-course-pill:hover{ color: var(--rc-text, #e8e6dc); border-color: rgba(255,255,255,.25); }
.ace-feed-course-pill.is-selected{
  background: var(--rc-primary-fill, #007870);
  border-color: var(--rc-primary, #008a81);
  color: #fff;
}

.ace-feed-compose-box{
  min-height: 60px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 2px;
  color: var(--rc-text, #e8e6dc);
  font-size: .9rem;
  line-height: 1.55;
  outline: none;
  position: relative;
}
.ace-feed-compose-box.is-empty::before{
  content: attr(data-placeholder);
  color: var(--rc-muted, #a39e93);
  pointer-events: none;
}

.ace-feed-mention-chip{
  display: inline;
  color: var(--rc-primary-text, #61b6b1);
  font-weight: 600;
  background: rgba(var(--rc-primary-rgb), .14);
  border-radius: 4px;
  padding: 1px 3px;
}

.ace-feed-mention-dropdown{
  position: relative;
  margin-top: 4px;
  background: #201f1d;
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.ace-feed-mention-option{
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--rc-text, #e8e6dc);
  font-size: .82rem;
  padding: 8px 12px;
  cursor: pointer;
}
.ace-feed-mention-option:hover,
.ace-feed-mention-option:focus{
  background: rgba(var(--rc-primary-rgb), .14);
  color: var(--rc-primary-text, #61b6b1);
}

.ace-feed-compose-bottom{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rc-line, rgba(255,255,255,.07));
}

.ace-feed-image-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--rc-muted, #a39e93);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  transition: color .15s ease, border-color .15s ease;
}
.ace-feed-image-btn:hover{ color: var(--rc-text, #e8e6dc); border-color: rgba(255,255,255,.25); }

.ace-feed-image-name{
  flex: 1;
  font-size: .74rem;
  color: var(--rc-muted, #a39e93);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ace-feed-post-btn{
  background: var(--rc-primary-fill, #007870);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 700;
  padding: 8px 20px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.ace-feed-post-btn:disabled{ opacity: .4; cursor: not-allowed; }
.ace-feed-post-btn:not(:disabled):hover{ opacity: .9; }

/* ---------------- Posts ---------------- */

.ace-feed-post{
  background: var(--rc-surface, #30302e);
  border: 1px solid var(--rc-line, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 14px;
}
.ace-feed-post.is-hidden-pending{ opacity: .7; }

.ace-feed-pending-notice{
  font-size: .72rem;
  font-weight: 600;
  color: #e04b4b;
  background: rgba(224,75,75,.1);
  border: 1px solid rgba(224,75,75,.3);
  border-radius: 7px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.ace-feed-post-head{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  margin-bottom: 8px;
}
.ace-feed-post-head img{ border-radius: 50%; flex-shrink: 0; }

.ace-feed-post-meta{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* column-flex defaults to stretch, which was forcing every child — including the role/course tag pill — to full width */
  flex: 1;
  min-width: 0;
}
.ace-feed-author{
  font-size: .84rem;
  font-weight: 700;
  color: var(--rc-text, #e8e6dc);
}
.ace-feed-time{ font-size: .7rem; color: var(--rc-muted, #a39e93); }
.ace-feed-course-tag{
  display: inline-block;
  margin-top: 2px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rc-primary-text, #61b6b1);
}

.ace-feed-role-tag{
  display: inline-block;
  margin-top: 2px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
}
.ace-feed-role-tag-administrator{
  background: rgba(224,180,75,.16);
  color: #e0b44b;
}
.ace-feed-role-tag-lecturer{
  background: rgba(90,150,220,.16);
  color: #6fa3dc;
}

.ace-feed-post-menu-btn{
  background: transparent;
  border: none;
  color: var(--rc-muted, #a39e93);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.ace-feed-post-menu-btn:hover{ background: rgba(255,255,255,.06); }

.ace-feed-post-menu{
  display: none;
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 5;
  background: #201f1d;
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  min-width: 150px;
}
.ace-feed-post-menu.is-open{ display: block; }
.ace-feed-post-menu button{
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--rc-text, #e8e6dc);
  font-size: .78rem;
  padding: 9px 12px;
  cursor: pointer;
}
.ace-feed-post-menu button:hover{ background: rgba(255,255,255,.06); }
.ace-feed-delete-btn{ color: #e04b4b !important; }

.ace-feed-post-body{
  font-size: .88rem;
  line-height: 1.6;
  color: var(--rc-text, #e8e6dc);
}
.ace-feed-post-body p{ margin: 0 0 8px; }
.ace-feed-post-body p:last-child{ margin-bottom: 0; }

.ace-feed-mention{
  color: var(--rc-primary-text, #61b6b1);
  font-weight: 600;
  text-decoration: none;
}
.ace-feed-mention:hover{ text-decoration: underline; }
.ace-feed-mention-gone{
  color: var(--rc-muted, #a39e93);
  font-weight: 600;
}

.ace-feed-post-image{
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
}
.ace-feed-post-image img{ width: 100%; height: auto; display: block; }

.ace-feed-post-actions{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rc-line, rgba(255,255,255,.07));
}
.ace-feed-post-actions button{
  background: transparent;
  border: none;
  color: var(--rc-muted, #a39e93);
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.ace-feed-post-actions button:hover{ color: var(--rc-text, #e8e6dc); }
.ace-feed-report-btn:hover{ color: #e04b4b; }

/* ---------------- Reactions ----------------
   Colours are for text on the dark card (#30302e) and each clears 4.5:1:
   the light teal 5.6, the pink 5.0, the amber 6.8. The emoji carries the
   meaning; the colour only echoes it. */

.ace-feed-sr-only{
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The line above the action row: top emojis and the count. */
.ace-feed-react-summary{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: .74rem;
  color: var(--rc-muted, #a39e93);
  font-variant-numeric: tabular-nums;
}
/* display beats [hidden] — this site has been bitten by that four times. */
.ace-feed-react-summary[hidden]{ display: none; }

.ace-feed-react-stack{ display: inline-flex; }
.ace-feed-react-stack-item{
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3a3a37;
  box-shadow: 0 0 0 2px var(--rc-surface, #30302e);
  font-size: 11px;
  line-height: 1;
}
.ace-feed-react-stack-item + .ace-feed-react-stack-item{ margin-left: -5px; }

/* The control: the button and the picker above it. */
.ace-feed-react{ position: relative; display: inline-flex; }

.ace-feed-post-actions .ace-feed-react-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: -6px 0 -6px -10px;       /* a bigger target, with the label still on the card's edge */
  border-radius: 8px;
  line-height: 1.2;
  -webkit-touch-callout: none;      /* no "copy / look up" menu on a long press */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: color .15s ease, background .15s ease;
}
.ace-feed-post-actions .ace-feed-react-btn:hover{ background: rgba(255,255,255,.05); }
.ace-feed-post-actions .ace-feed-react-btn:focus-visible{ outline: 2px solid var(--rc-primary-text, #61b6b1); outline-offset: 1px; }
.ace-feed-react-icon{ display: block; }
.ace-feed-react-emoji{ font-size: 1rem; line-height: 1; }

.ace-feed-post-actions .ace-feed-react-btn.is-like{ color: var(--rc-primary-text, #61b6b1); }
.ace-feed-post-actions .ace-feed-react-btn.is-love{ color: #f07c8c; }
.ace-feed-post-actions .ace-feed-react-btn.is-haha,
.ace-feed-post-actions .ace-feed-react-btn.is-wow,
.ace-feed-post-actions .ace-feed-react-btn.is-sad{ color: #e8b04f; }

.ace-feed-react-picker{
  position: absolute;
  left: -14px;
  bottom: calc(100% + 10px);
  z-index: 40;
  display: flex;
  gap: 2px;
  padding: 5px 6px;
  background: #3a3a37;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: ace-feed-react-in .16s ease-out;
}
.ace-feed-react-picker[hidden]{ display: none; }
/* An invisible bridge over the gap, so moving the mouse from the button up
   to the picker never passes over nothing and closes it on the way. */
.ace-feed-react-picker::after{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
}

.ace-feed-post-actions .ace-feed-react-opt{
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.55rem;
  line-height: 40px;
  text-align: center;
  background: transparent;
  transition: transform .14s cubic-bezier(.3, 1.6, .6, 1), background .12s ease;
}
.ace-feed-post-actions .ace-feed-react-opt:hover,
.ace-feed-post-actions .ace-feed-react-opt:focus-visible{ transform: translateY(-4px) scale(1.22); }
.ace-feed-post-actions .ace-feed-react-opt:focus-visible{ outline: 2px solid var(--rc-primary-text, #61b6b1); outline-offset: 1px; }
.ace-feed-post-actions .ace-feed-react-opt[aria-pressed="true"]{ background: rgba(var(--rc-primary-rgb), .24); }

/* The name, above whichever one is pointed at. */
.ace-feed-post-actions .ace-feed-react-opt::after{
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.ace-feed-post-actions .ace-feed-react-opt:hover::after,
.ace-feed-post-actions .ace-feed-react-opt:focus-visible::after{ opacity: 1; }

.ace-feed-react.is-error .ace-feed-react-btn{ animation: ace-feed-react-shake .32s ease; }

@keyframes ace-feed-react-in{
  from{ opacity: 0; transform: translateY(6px) scale(.94); }
  to  { opacity: 1; transform: none; }
}
@keyframes ace-feed-react-shake{
  25%{ transform: translateX(-3px); }
  75%{ transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce){
  .ace-feed-react-picker,
  .ace-feed-react.is-error .ace-feed-react-btn{ animation: none; }
  .ace-feed-post-actions .ace-feed-react-opt{ transition: none; }
  .ace-feed-post-actions .ace-feed-react-opt:hover,
  .ace-feed-post-actions .ace-feed-react-opt:focus-visible{ transform: none; }
}

/* ---------------- Comments ---------------- */

.ace-feed-comments{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rc-line, rgba(255,255,255,.07)); }

.ace-feed-comment{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}
.ace-feed-comment img{ border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.ace-feed-comment-body{
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: .8rem;
  line-height: 1.5;
}
.ace-feed-comment-author{
  display: block;
  font-weight: 700;
  font-size: .74rem;
  color: var(--rc-text, #e8e6dc);
}
.ace-feed-comment-text{ color: var(--rc-muted, #a39e93); }

.ace-feed-comment-form{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ace-feed-comment-form textarea{
  flex: 1;
  resize: none;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 8px;
  color: var(--rc-text, #e8e6dc);
  font-size: .8rem;
  padding: 7px 10px;
  min-height: 34px;
}
.ace-feed-comment-form button{
  background: var(--rc-primary-fill, #007870);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .76rem;
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
}

/* ---------------- Load more ---------------- */

.ace-feed-load-more{
  align-self: center;
  background: transparent;
  border: 1px solid var(--rc-line, rgba(255,255,255,.12));
  color: var(--rc-muted, #a39e93);
  font-size: .8rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 20px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ace-feed-load-more:hover{ color: var(--rc-text, #e8e6dc); border-color: rgba(255,255,255,.25); }

@media (max-width: 480px){
  .ace-feed-post-menu{ right: -8px; }
}

/* ---------------- Notification bell ---------------- */

.ace-feed-bell-wrap{ position: relative; }

.ace-feed-bell-btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--rc-text, #e8e6dc);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ace-feed-bell-btn:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--rc-line, rgba(255,255,255,.1));
}

.ace-feed-bell-badge{
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #e04b4b;
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  border: 2px solid var(--rc-bg, #1a1918);
}

/* Fixed, not absolute. The theme prints the bell inside
   .ace-topbar-profile, which has overflow:hidden and is only as tall as the
   60px topbar — so an absolutely positioned panel dropping below it was
   clipped to nothing. It opened on every click and could not be seen. A
   fixed panel is placed against the window and is not clipped by an
   ancestor's overflow. The bell only ever appears in that topbar, which is
   always the first 60px of an app page, with the bell as its last item. */
.ace-feed-bell-panel{
  position: fixed;
  top: 58px;
  right: 20px;
  z-index: 1200;
  width: 320px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  background: #201f1d;
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  overflow: hidden;
}

/* The panel is rendered with the `hidden` attribute and newsfeed.js toggles
   it. The display:flex above beats that attribute, so without this rule the
   panel was open permanently from the moment the page loaded — which is why
   a second plugin was written to hide it, and why the bell then depended on
   that plugin's script loading before it could be opened at all.

   The rule belongs here, in the stylesheet whose display value caused it. */
.ace-feed-bell-panel[hidden]{ display: none; }

/* Staff accounts see the WordPress toolbar above the topbar: 32px on a
   desktop, 46px at WordPress's own breakpoint. */
body.admin-bar .ace-feed-bell-panel{ top: 90px; }
@media (max-width: 782px){ body.admin-bar .ace-feed-bell-panel{ top: 104px; } }
@media (max-width: 520px){ .ace-feed-bell-panel{ right: 10px; width: calc(100vw - 20px); } }

.ace-feed-bell-panel-head{
  padding: 12px 14px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--rc-text, #e8e6dc);
  border-bottom: 1px solid var(--rc-line, rgba(255,255,255,.08));
}

.ace-feed-bell-panel-list{ overflow-y: auto; }

.ace-feed-bell-empty{
  padding: 24px 14px;
  text-align: center;
  font-size: .78rem;
  color: var(--rc-muted, #a39e93);
}

.ace-feed-bell-item{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--rc-line, rgba(255,255,255,.05));
  transition: background .12s ease;
}
.ace-feed-bell-item:hover{ background: rgba(255,255,255,.04); }
.ace-feed-bell-item img{ border-radius: 50%; flex-shrink: 0; margin-top: 1px; }
/* Unread: a teal tint and a teal dot, from the palette like everything else. */
.ace-feed-bell-item.is-unread{ background: rgba(var(--rc-primary-rgb), .13); }
.ace-feed-bell-item.is-unread::before{
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rc-primary-text, #61b6b1);
  box-shadow: 0 0 0 3px rgba(var(--rc-primary-rgb), .25);
  flex-shrink: 0;
  margin-top: 6px;
}

.ace-feed-bell-item-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ace-feed-bell-item-body span{
  font-size: .78rem;
  line-height: 1.45;
  color: var(--rc-text, #e8e6dc);
}
.ace-feed-bell-item-body em{ font-style: normal; color: var(--rc-muted, #a39e93); }
.ace-feed-bell-item-time{ font-size: .68rem !important; color: var(--rc-muted, #a39e93) !important; }

/* Brief highlight when arriving at a post via a notification link. */
.ace-feed-post.is-highlighted{
  outline: 2px solid var(--rc-primary, #008a81);
  outline-offset: 2px;
  transition: outline-color .3s ease;
}

/* ---------------- Anonymous posting ---------------- */

.ace-feed-anon-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--rc-line, rgba(255,255,255,.1));
  border-radius: 20px;
  color: var(--rc-muted, #a39e93);
  font-size: .74rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ace-feed-anon-toggle:hover{ color: var(--rc-text, #e8e6dc); border-color: rgba(255,255,255,.25); }
.ace-feed-anon-toggle.is-active{
  background: rgba(var(--rc-primary-rgb), .14);
  border-color: var(--rc-primary-text, #61b6b1);
  color: var(--rc-primary-text, #61b6b1);
}

/* Generic silhouette shown in place of a real avatar — deliberately
   NOT a real photo, since a real photo would leak identity even with
   the name hidden. */
.ace-feed-anon-avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--rc-muted, #a39e93);
  flex-shrink: 0;
}

.ace-feed-anon-tag{
  display: inline-block;
  margin-left: 6px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rc-primary-text, #61b6b1);
  background: rgba(var(--rc-primary-rgb), .12);
  border-radius: 10px;
  padding: 2px 7px;
  vertical-align: middle;
}