/* ─────────────────────────────────────────────
   MARKDOWN — rendered content bodies
   Styles the output of Rubycities::MarkdownRenderer. Wrap that output in
   `.markdown-body` (the rubycities_markdown helper does).

   CSS resets flatten the tags this HTML is made of — headings lose their
   size, lists their markers — so both are restored here, not merely tweaked.

   Every colour is a custom property with a fallback. Signalbox defines the
   --rc-* tokens; a public theme may define them too, or link this file as it
   is and take the fallbacks. The accent's fallbacks are the browser's own (LinkText,
   auto, currentColor), so the gem puts no colour of its own on a host's page:
     <%= stylesheet_link_tag "rubycities/markdown" %>
───────────────────────────────────────────── */
.markdown-body {
  color: var(--rc-text, inherit);
  line-height: 1.65;
}

/* The container owns the outer spacing. */
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child { margin-bottom: 0; }

/* ── Headings ── */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 1.75em 0 0.6em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rc-text, inherit);
}

.markdown-body h1 { font-size: 1.75rem; }
.markdown-body h2 { font-size: 1.375rem; }
.markdown-body h3 { font-size: 1.125rem; }
.markdown-body h4 { font-size: 1rem; }
.markdown-body h5,
.markdown-body h6 { font-size: 0.9375rem; color: var(--rc-text-muted, #5f6b76); }

.markdown-body h1,
.markdown-body h2 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rc-border-subtle, #e6eaee);
}

/* ── Flow ── */
.markdown-body p { margin: 0 0 1em; }

.markdown-body a {
  color: var(--rc-accent, LinkText);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.markdown-body a:hover { color: var(--rc-accent-strong, var(--rc-accent, LinkText)); }

.markdown-body hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid var(--rc-border, #d5dbe1);
}

.markdown-body blockquote {
  margin: 0 0 1em;
  padding: 0.125rem 0 0.125rem 1rem;
  border-left: 3px solid var(--rc-border, #d5dbe1);
  color: var(--rc-text-muted, #5f6b76);
}

.markdown-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* ── Lists ── */
.markdown-body ul,
.markdown-body ol {
  margin: 0 0 1em;
  padding-left: 1.5rem;
}

.markdown-body ul { list-style: disc; }
.markdown-body ol { list-style: decimal; }
.markdown-body ul ul { list-style: circle; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body li::marker { color: var(--rc-text-muted, #5f6b76); }

/* Nested lists close up against their parent item. */
.markdown-body li > ul,
.markdown-body li > ol { margin-bottom: 0; }

/* Task list items carry their own checkbox — drop the redundant bullet. */
.markdown-body li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.25rem;
}

.markdown-body input[type="checkbox"] {
  margin-right: 0.4rem;
  accent-color: var(--rc-accent, auto);
  vertical-align: middle;
}

/* ── Code ── */
.markdown-body code {
  padding: 0.15em 0.35em;
  border-radius: 0.35rem;
  background: var(--rc-overlay-fill, rgba(127,127,127,0.12));
  font-family: var(--rc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.875em;
}

.markdown-body pre {
  margin: 0 0 1em;
  padding: 0.875rem 1rem;
  border: 1px solid var(--rc-border, #d5dbe1);
  border-radius: 0.75rem;
  background: var(--rc-surface-alt, rgba(127,127,127,0.08));
  overflow-x: auto;
}

.markdown-body pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* ── Tables ──
   display: block so a wide table scrolls inside itself rather than
   stretching the page; width stays natural up to the container. */
.markdown-body table {
  display: block;
  max-width: 100%;
  margin: 0 0 1em;
  border-collapse: collapse;
  overflow-x: auto;
  font-size: 0.9375rem;
}

.markdown-body th,
.markdown-body td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rc-border, #d5dbe1);
  text-align: left;
}

.markdown-body th {
  background: var(--rc-surface-alt, rgba(127,127,127,0.08));
  font-weight: 600;
}

/* ── Footnotes (the `footnotes` extension) ── */
.markdown-body .footnotes {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--rc-border-subtle, #e6eaee);
  font-size: 0.875rem;
  color: var(--rc-text-muted, #5f6b76);
}

/* ── Alerts (the `alerts` extension) ──
   "> [!NOTE]" renders as GitHub's own markup:
     <div class="markdown-alert markdown-alert-note">
       <p class="markdown-alert-title">Note</p> …
   Coloured rule + coloured title, no fill — the solid status tokens are
   safe on any surface, whereas a soft-fill would force the body text to a
   matching foreground to stay legible. */
.markdown-body .markdown-alert {
  margin: 0 0 1em;
  padding: 0.125rem 0 0.125rem 1rem;
  border-left: 4px solid var(--rc-border, #d5dbe1);
}

.markdown-body .markdown-alert > *:last-child { margin-bottom: 0; }

.markdown-body .markdown-alert-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.markdown-body .markdown-alert-note { border-left-color: var(--rc-info, #2563eb); }
.markdown-body .markdown-alert-note .markdown-alert-title { color: var(--rc-info, #2563eb); }

.markdown-body .markdown-alert-tip { border-left-color: var(--rc-success, #15803d); }
.markdown-body .markdown-alert-tip .markdown-alert-title { color: var(--rc-success, #15803d); }

/* GitHub tints "important" purple; it takes the accent here — still distinct
   from the other four. */
.markdown-body .markdown-alert-important { border-left-color: var(--rc-accent, currentColor); }
.markdown-body .markdown-alert-important .markdown-alert-title { color: var(--rc-accent, currentColor); }

.markdown-body .markdown-alert-warning { border-left-color: var(--rc-warning, #b45309); }
.markdown-body .markdown-alert-warning .markdown-alert-title { color: var(--rc-warning, #b45309); }

.markdown-body .markdown-alert-caution { border-left-color: var(--rc-error, #b91c1c); }
.markdown-body .markdown-alert-caution .markdown-alert-title { color: var(--rc-error, #b91c1c); }

/* ── Syntax highlighting ──
   With `theme: ""` the highlighter emits TextMate scope names as classes
   (`<span class="string quoted double ruby">`) instead of inline styles.
   Scopes are space-separated, so these single-class selectors match the
   compound values. Only the common scopes are mapped — anything unmapped
   inherits the block's colour, so a partial map is safe by design. The
   mapping is visual, not semantic: a status colour here means "keyword red", not
   an error state. */
.markdown-body .comment {
  color: var(--rc-text-muted, #5f6b76);
  font-style: italic;
}

.markdown-body .string { color: var(--rc-success, #15803d); }
.markdown-body .constant { color: var(--rc-warning, #b45309); }

.markdown-body .keyword,
.markdown-body .storage { color: var(--rc-info, #2563eb); }

.markdown-body .support,
.markdown-body .entity { color: var(--rc-accent, LinkText); }