/* Styling for the microblog feed (microblog_widget.html, injected by
   scripts/microblog/microblog_loader.js). Kept in its own stylesheet
   rather than style.css, same reasoning as css/guestbook.css: only pages
   that actually mount the feed need to load it. */

#microblog-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Opt-in modifier (not applied by default - see microblog_widget.html/
   microblog.html, which want the full feed visible) for embedding the
   feed inside a smaller space, like a pane on a page that isn't
   dedicated to it. Caps the feed's own height and scrolls internally
   past that, so the surrounding page's layout doesn't keep growing
   every time a new post gets added to the manifest. */
.microblog-mount--scroll {
  max-height: 420px;
  overflow-y: auto;
}

.microblog-status {
  color: white;
  font-style: italic;
}

.microblog-post {
  border-bottom: 1px solid var(--pane-border, deeppink);
  border-top: 1px solid var(--pane-border, deeppink);
  border-radius: 10px;
  padding: 12px 16px;
  color: white;
}

.microblog-post--error {
  color: #ff7b6e;
  font-style: italic;
}

.microblog-post-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--pane-border, deeppink);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.microblog-post-date {
  color: var(--pane-header-color, rgb(39, 255, 20));
  font-weight: bold;
}

.microblog-post-permalink,
.microblog-post-permalink:visited {
  color: white;
  font-size: 0.85em;
}

/* The injected post content is arbitrary, author-controlled HTML (see
   microblog_loader.js) - this just makes sure it never overflows its
   card regardless of what's in there, same reasoning as the
   .textpane img/canvas/video/svg rule in style.css. */
.microblog-post-content img,
.microblog-post-content canvas,
.microblog-post-content video,
.microblog-post-content svg {
  max-width: 100%;
  height: auto;
}