/* X and LinkedIn feed mock-ups, from the review page renderer (make-review.py).
   The networks' own colours, written in oklch. Light only, like the networks' default themes. */
.feed-x, .feed-li {
  --x-ink: oklch(0.188 0.013 248.5);
  --x-muted: oklch(0.494 0.029 241.2);
  --x-blue: oklch(0.667 0.161 245.5);
  --x-line: oklch(0.879 0.013 228.9);
  --x-border: oklch(0.961 0.004 214.3);
  --li-ink: oklch(0 0 0 / 0.9);
  --li-muted: oklch(0 0 0 / 0.6);
  --li-blue: oklch(0.516 0.163 254.7);
  --li-rule: oklch(0.931 0 0);
  --li-comment: oklch(0.961 0 0);
  --li-badge: oklch(0.509 0.036 248.5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
.feed-x img.av, .feed-li img.av { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; display: block; }
.feed-li img.av.s { width: 2rem; height: 2rem; }

/* X */
.feed-x { list-style: none; margin: 0; padding: 0; background: oklch(1 0 0); color: var(--x-ink); border: 0.0625rem solid var(--x-border); border-radius: 1rem; overflow: hidden; font-size: 0.9375rem; line-height: 1.25rem; }
.xp { display: flex; gap: 0.5rem; padding: 0.75rem 1rem 0; }
.xp + .xp { padding-top: 0.25rem; }
.xl { display: flex; flex-direction: column; align-items: center; flex: none; }
.line { width: 0.125rem; flex: 1; background: var(--x-line); margin-top: 0.25rem; }
.xb { min-width: 0; flex: 1; padding-bottom: 0.75rem; }
.xh { display: flex; align-items: center; gap: 0.125rem; min-width: 0; white-space: nowrap; }
.xn { font-weight: 700; flex: none; }
.xvf svg { fill: var(--x-blue); display: block; }
.xm { color: var(--x-muted); margin-left: 0.25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xdots { margin-left: auto; fill: var(--x-muted); flex: none; }
.xt { overflow-wrap: anywhere; margin-top: 0.0625rem; }
.xt a { color: var(--x-blue); text-decoration: none; }
.xmed { margin-top: 0.75rem; border: 0.0625rem solid var(--x-line); border-radius: 1rem; overflow: hidden; background: oklch(0 0 0); max-height: 42.5rem; }
.xmed video, .xmed img, .limed video, .limed img { display: block; width: 100%; height: 100%; object-fit: contain; background: oklch(0 0 0); }
.xacts { display: flex; justify-content: space-between; margin-top: 0.75rem; max-width: 100%; color: var(--x-muted); fill: var(--x-muted); }
.xa { display: flex; align-items: center; gap: 0.25rem; min-width: 0; flex: 1; }
.xa.end { flex: none; gap: 0.75rem; }

/* LinkedIn */
.feed-li { background: oklch(1 0 0); border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem oklch(0.64 0 0 / 0.2); font-size: 0.875rem; color: var(--li-ink); overflow: hidden; }
.lih { display: flex; gap: 0.5rem; padding: 0.75rem 1rem 0; }
.lih img.av { width: 3rem; height: 3rem; }
.lim { flex: 1; min-width: 0; }
.lin { font-weight: 600; }
.lihl, .lit { color: var(--li-muted); font-size: 0.75rem; line-height: 1rem; }
.lit { display: flex; align-items: center; gap: 0.1875rem; }
.lidots { color: var(--li-muted); letter-spacing: -0.125rem; }
.litx { padding: 0.5rem 1rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.litx a, .libt a { color: var(--li-blue); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.libar { display: flex; justify-content: space-between; padding: 0.25rem 0.5rem; border-top: 0.0625rem solid var(--li-rule); }
.libar span { display: flex; align-items: center; gap: 0.375rem; min-width: 0; padding: 0.625rem 0.5rem; color: var(--li-muted); font-weight: 600; }
.libar svg { width: 1.25rem; height: 1.25rem; flex: none; }
.licm { display: flex; gap: 0.25rem; padding: 0.5rem 1rem 1rem; }
.lib { flex: 1; min-width: 0; background: var(--li-comment); border-radius: 0 0.5rem 0.5rem 0.5rem; padding: 0.5rem 0.75rem; }
.auth { background: var(--li-badge); color: oklch(1 0 0); font-size: 0.6875rem; border-radius: 0.1875rem; padding: 0 0.25rem; margin-left: 0.25rem; }
.ago { float: right; color: var(--li-muted); font-size: 0.75rem; }
.libt { margin-top: 0.5rem; line-height: 1.25rem; }

/* Phones: the action bars fit at 375 without scrolling sideways. */
@media (max-width: 30rem) {
  .xp { padding-inline: 0.75rem; }
  .libar { padding-inline: 0; }
  .libar span { font-size: 0.75rem; gap: 0.1875rem; padding: 0.625rem 0.25rem; }
  .libar svg { width: 1.125rem; height: 1.125rem; }
}