/* ── Rendered rich text ──────────────────────────────────────────────────────
   Tailwind's preflight resets heading/list/blockquote styling, and this app
   compiles CSS with the standalone tailwindcss-ruby CLI (no typography plugin),
   so `prose` is a no-op. Restore sensible reading styles here with plain CSS.
   Deliberately UNLAYERED: normal declarations win over @layer rules, so these
   reliably beat preflight's reset (which the CLI emits in a base layer that
   otherwise outranks components here). Reusable anywhere we render trusted
   rich content.

   Colors use CSS custom properties set by the intake flow theme system
   (flow_theme_style / version_theme_style). The @theme trim defaults act as
   fallbacks when no theme is active (e.g. the portal shop page). */
.rich-content { color: var(--color-text); line-height: 1.7; }
.rich-content > :first-child { margin-top: 0; }
.rich-content > :last-child { margin-bottom: 0; }
.rich-content h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; color: var(--color-heading); margin: 2rem 0 1rem; }
.rich-content h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--color-heading); margin: 2rem 0 0.75rem; }
.rich-content h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--color-heading); margin: 1.5rem 0 0.5rem; }
.rich-content h4 { font-size: 1.05rem; font-weight: 600; color: var(--color-heading); margin: 1.25rem 0 0.5rem; }
/* Trix outputs <div> per paragraph, not <p>. Both get spacing so the rule
   works whether the HTML comes from Trix or a server-rendered template. */
.rich-content p, .rich-content > div { margin: 0 0 1rem; }
.rich-content ul, .rich-content ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.rich-content ul { list-style: disc; }
.rich-content ul ul { list-style-type: circle; }
.rich-content ul ul ul { list-style-type: square; }
.rich-content ol { list-style: decimal; }
.rich-content li { margin: 0.25rem 0; }
.rich-content li::marker { color: var(--color-brand-300); }
.rich-content li > ul, .rich-content li > ol { margin: 0.25rem 0; }
.rich-content h2 + p, .rich-content h3 + p,
.rich-content h2 + div, .rich-content h3 + div { margin-top: 0; }
.rich-content a { color: var(--color-brand-300); text-decoration: underline; }
.rich-content strong { font-weight: 600; color: var(--color-heading); }
.rich-content em { font-style: italic; }
.rich-content del, .rich-content s { text-decoration: line-through; }
.rich-content pre {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  background-color: var(--color-brand-50);
  font-family: ui-monospace, monospace;
  font-size: 0.875em;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.rich-content blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 3px solid var(--color-brand-300);
  color: var(--color-text);
  font-style: italic;
}
.rich-content img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.rich-content hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--color-brand-75); }

/* ActionText image attachments embedded via the Trix editor. */
.rich-content action-text-attachment { display: block; margin: 1.5rem 0; }
.rich-content figure.attachment { display: block; width: 100%; margin: 1.5rem 0; text-align: center; }
.rich-content figure.attachment img { display: inline-block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0.5rem; }
.rich-content .attachment__caption { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.4; color: #6b7280; text-align: center; }
.rich-content .attachment--preview .attachment__name,
.rich-content .attachment--preview .attachment__size { display: none; }