/* Romano Battiti Design System — Long-form content
   The ONE class-based stylesheet in the system, and the reason is structural:
   long-form content arrives as HTML the project did not write (Markdown from a
   CMS, a rendered guide, an email body), so its elements cannot be given inline
   styles one by one. Everything else in the system stays inline.

   Imported by styles.css. Apply with the `Prose` component, or by hand with
   `class="rb-prose"` on the wrapper of the rendered HTML. Every value is a
   token: this file introduces no colour and no size of its own. */

.rb-prose {
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed, 1.65);
  /* Measure, not container width: a line of body text stops being readable
     past ~75 characters, and a wide screen is not permission to run wider. */
  max-width: 68ch;
  text-wrap: pretty;
}
.rb-prose[data-size="sm"] { font-size: var(--text-sm); max-width: 74ch; }

/* Vertical rhythm as one rule: every block gets the same bottom space, the
   last one gets none, and headings claim more space above than below so they
   read as belonging to what follows. */
.rb-prose > * { margin: 0 0 var(--space-4, 16px); }
.rb-prose > :last-child { margin-bottom: 0; }

.rb-prose h1, .rb-prose h2, .rb-prose h3, .rb-prose h4 {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 600;
  line-height: var(--leading-tight, 1.15);
  color: var(--color-ink);
  margin-top: var(--space-8, 32px);
  margin-bottom: var(--space-2, 8px);
  text-wrap: balance;
}
.rb-prose > :first-child { margin-top: 0; }
.rb-prose h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.rb-prose h2 { font-size: var(--text-xl); letter-spacing: -0.005em; }
.rb-prose h3 { font-size: var(--text-lg); }
.rb-prose h4 { font-size: var(--text-base); }

.rb-prose strong { font-weight: 600; }
.rb-prose em { font-style: italic; }
.rb-prose small { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* Underlined, not coloured: amber on paper is 1.6:1, so the accent can mark a
   link but can never be the only thing that identifies one. */
.rb-prose a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.rb-prose a:hover { text-decoration-color: var(--color-ink); }

.rb-prose ul, .rb-prose ol { padding-left: 1.35em; }
.rb-prose li { margin-bottom: var(--space-1, 4px); }
.rb-prose li > ul, .rb-prose li > ol { margin: var(--space-1, 4px) 0 0; }
.rb-prose li::marker { color: var(--color-ink-soft); }

/* A quotation is set off by a rule and a shift in colour, not by a filled box:
   a tinted card inside a page of text reads as an Alert. */
.rb-prose blockquote {
  padding-left: var(--space-4, 16px);
  border-left: 2px solid var(--color-primary);
  color: var(--color-ink-soft);
}

.rb-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
}
.rb-prose pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal, 1.5);
  padding: var(--space-4, 16px);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  overflow-x: auto;
}
.rb-prose pre code { padding: 0; border: none; background: none; font-size: inherit; }

.rb-prose hr { border: none; border-top: 1px solid var(--color-hairline); margin: var(--space-8, 32px) 0; }

.rb-prose img, .rb-prose video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.rb-prose figcaption { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: var(--space-2, 8px); }

/* Same header treatment as DataTable, so a table inside an article and a table
   built from the component do not look like two different systems. */
.rb-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rb-prose th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-hairline);
}
.rb-prose td { padding: 10px 12px; border-bottom: 1px solid var(--color-hairline); vertical-align: top; }
.rb-prose tr:last-child td { border-bottom: none; }

/* Task lists (Markdown checkboxes) arrive as disabled inputs inside list
   items — without this they carry the browser's own control into the page. */
.rb-prose li input[type="checkbox"] { accent-color: var(--color-primary); margin-right: 0.4em; }
.rb-prose ul.contains-task-list, .rb-prose ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 0.2em; }