<%# Rendered-markdown fixture: bare elements, styled entirely by the
    app-owned typeset.css. %>
<%= poetry_typeset(class: "max-w-xl") do %>
  <h1>The Pilcrow Papers</h1>
  <p>You render markdown and get back plain, unstyled HTML. <strong>Typeset</strong>
  styles everything inside the container from three rhythm variables, and
  <a href="#preview">everything else derives</a>.</p>
  <h2>Rhythm</h2>
  <p>Three controls: <code>--typeset-size</code>, <code>--typeset-leading</code>,
  and <code>--typeset-flow</code>.</p>
  <ul>
    <li>It fits its container — chat bubble or article.</li>
    <li>It reads your theme tokens, so dark mode is free.</li>
    <li>Appending a block never restyles earlier blocks.</li>
  </ul>
  <blockquote><p>Utilities on an element still win — the rules are zero-specificity.</p></blockquote>
  <table>
    <thead><tr><th>Control</th><th>Default</th></tr></thead>
    <tbody>
      <tr><td>size</td><td>1em</td></tr>
      <tr><td>leading</td><td>1.75</td></tr>
      <tr><td>flow</td><td>1.25em</td></tr>
    </tbody>
  </table>
<% end %>

<%# The container-relative pitch: the same markdown follows the tighter
    type around it. A preset is a tiny class — here inline vars stand in
    for a .typeset-chat preset in your CSS. %>
<div class="max-w-sm rounded-lg border bg-muted/30 p-4 text-sm">
  <%= poetry_typeset(class: "[--typeset-flow:0.75em] [--typeset-leading:1.6]") do %>
    <p>Here's the migration plan:</p>
    <ol>
      <li>Add the <code>status</code> column.</li>
      <li>Backfill in batches.</li>
    </ol>
    <pre><code>bin/rails db:migrate</code></pre>
    <p>Earlier blocks keep their styling as new ones stream in.</p>
  <% end %>
</div>

<%# The preset option rides the root class list: preset: "docs" appends the
    app-owned typeset-docs class, a looser rhythm tuned for long-form pages. %>
<%= poetry_typeset(preset: "docs", class: "max-w-2xl") do %>
  <h1>Deploying for the first time</h1>
  <p>This guide walks through an initial production deploy. Every step is
  idempotent, so a run that fails partway is always safe to repeat.</p>
  <h2>Before you start</h2>
  <p>You will need a provisioned host and push access to the release branch.</p>
  <ol>
    <li>Prepare the database with <code>bin/rails db:prepare</code>.</li>
    <li>Set <code>SECRET_KEY_BASE</code> in the server environment.</li>
    <li>Point the load balancer at the freshly booted instances.</li>
  </ol>
  <p>The <code>docs</code> preset widens the measure and opens up the spacing,
  which suits pages a reader moves through top to bottom.</p>
<% end %>

<%# Embedded components opt OUT: not-typeset covers the whole subtree. %>
<%= poetry_typeset(class: "max-w-xl") do %>
  <p>Prose flows around app chrome without restyling it:</p>
  <div class="not-typeset">
    <%= poetry_alert do |alert| %>
      <% alert.with_title { "Untouched component" } %>
      poetry components style themselves — keep them out of the prose cascade.
    <% end %>
  </div>
  <p>And the prose continues below.</p>
<% end %>

<%# The base rules are zero-specificity, so a utility class on a single element
    wins outright — override just the one thing you want, cascade untouched. %>
<%= poetry_typeset(class: "max-w-xl") do %>
  <h1 class="text-primary">Field notes</h1>
  <p class="text-lg">This opening line is nudged larger with a utility while
  the rest of the prose keeps the typeset rhythm.</p>
  <p>Nothing here is special-cased. The heading and the lead above simply carry
  an extra class, and it takes precedence because the base styles add no
  specificity of their own.</p>
<% end %>

<%# A wide table would squeeze inside the narrow prose measure. Wrap it in a
    typeset-scroll div so the table scrolls sideways while the text stays put. %>
<%= poetry_typeset(class: "max-w-md") do %>
  <p>Every plan side by side:</p>
  <div class="typeset-scroll">
    <table>
      <thead>
        <tr>
          <th>Plan</th><th>Seats</th><th>Storage</th>
          <th>History</th><th>SSO</th><th>Support</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Starter</td><td>3</td><td>5 GB</td><td>30 days</td><td>No</td><td>Community</td></tr>
        <tr><td>Team</td><td>25</td><td>100 GB</td><td>1 year</td><td>Yes</td><td>Email</td></tr>
        <tr><td>Business</td><td>Unlimited</td><td>1 TB</td><td>Forever</td><td>Yes</td><td>Priority</td></tr>
      </tbody>
    </table>
  </div>
  <p>The prose column keeps its narrow rhythm; only the table scrolls.</p>
<% end %>