/*
 * GitHub's writing extras wherever rendered markdown shows: posts,
 * comments and the composer preview. Rendered by app/lib/render-post.
 */

/* > [!NOTE] and friends: a ruled callout with a titled first line. */
blockquote.markdown-alert.markdown-alert,
blockquote.markdown-alert.markdown-alert p {
  font-style: normal;
}
blockquote.markdown-alert.markdown-alert {
  border-left-color: var(--alert);
}
.markdown-alert {
  --alert: var(--accent);
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--alert);
  color: inherit;
  font-style: normal;
}
.markdown-alert-tip       { --alert: var(--success); }
.markdown-alert-important { --alert: oklch(0.55 0.17 300); }
.markdown-alert-warning   { --alert: oklch(0.68 0.15 75); }
.markdown-alert-caution   { --alert: oklch(0.58 0.2 25); }
.markdown-alert > :last-child {
  margin-bottom: 0;
}
.markdown-alert-title {
  margin: 0 0 0.25rem;
  font-weight: var(--weight-semibold);
  color: var(--alert);
}

/* - [ ] and - [x]: the box stands in for the bullet. */
.task-list-item {
  list-style: none;
}
.task-list-item-checkbox {
  margin: 0 0.375rem 0 -1.375rem;
  vertical-align: -0.125em;
}

/* Footnotes: small, under a rule, after the text. */
.footnotes-sep {
  margin: 2rem 0 1rem;
  border: 0;
  border-top: 1px solid var(--rule-soft);
}
.footnotes {
  font-size: 0.875em;
  color: var(--ink-dim);
}
.footnote-ref a,
.footnote-backref {
  text-decoration: none;
}

/* A link to a person or to a page on this site reads as a name, so it is
   not underlined; it hovers like every other link. */
:is(.post-body, .md-preview, .dc-body) a:is(.mention, [href^="/"]) {
  color: var(--link);
  text-decoration: none;
}
:is(.post-body, .md-preview, .dc-body) a:is(.mention, [href^="/"]):hover {
  color: var(--link-hover);
}

/* Images in posts and comments stay a readable size in the text; a click
   opens the full image in a new tab. */
:is(.post-body, .md-preview, .dc-body) a.md-image {
  display: inline-block;
  max-width: 100%;
  cursor: zoom-in;
}
:is(.post-body, .md-preview, .dc-body) a.md-image img {
  display: block;
  max-width: 100%;
  max-height: 22rem;
  width: auto;
  height: auto;
  margin: 0.25rem 0;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md);
}