/* Extends terms.css's plain, semantic styling (h2/p/ul) with the two extra block types the
   mobile Help guide needs: an h3 subheading (one level under each h2 section, e.g. per-category
   field lists under "Adding and editing entries") and a "shot" screenshot block.

   Screenshot block (Oct 2026): <div class="shot" data-caption="..."><img src="/help-img/xx.png" alt="...">
   <span class="cap">Caption</span><span class="leg">Legend item</span>...</div>. The picture carries gold
   numbered callouts; each .leg is numbered 1, 2, 3... below it. The in-app Help screen parses this same
   markup (src/lib/mobile-help.ts) and draws the picture natively. A shot with no <img> (the older
   placeholder style, text only) still renders as the dashed box below. */
  .terms-body h2 { font-size: 15px; margin: 28px 0 8px; }
  .terms-body h2:first-child { margin-top: 0; }
  .terms-body h3 { font-size: 13.5px; margin: 18px 0 6px; color: var(--text-primary); }
  .terms-body p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 14px; }
  .terms-body p.updated { font-size: 12px; color: var(--text-muted); margin-bottom: 26px; }
  .terms-body ul { margin: 0 0 14px; padding-left: 20px; }
  .terms-body li { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 6px; }
  .terms-body strong { color: var(--text-primary); }
  .terms-body .shot {
    margin: 10px 0 16px;
    padding: 14px 16px;
    border: 1px dashed var(--border-color, #ccc);
    border-radius: 10px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--text-muted);
    background: var(--bg-subtle, rgba(0,0,0,0.02));
  }
  .terms-body .shot:has(img) { font-style: normal; border-style: solid; background: var(--surface-1, #fff); text-align: center; }
  .terms-body .shot img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 10px; border-radius: 18px; }
  .terms-body .shot .cap { display: block; font-weight: 600; font-size: 12.5px; color: var(--text-primary); margin-bottom: 8px; }
  .terms-body .shot { counter-reset: leg; }
  .terms-body .shot .leg { display: flex; gap: 8px; align-items: flex-start; text-align: start; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); margin: 0 0 4px; counter-increment: leg; }
  .terms-body .shot .leg::before { content: counter(leg); flex: none; width: 19px; height: 19px; border-radius: 50%; background: #d4a72c; color: #1a1400; font-weight: 700; font-size: 11px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }