/* Extend the shared paper, field and invitation styles across four themes. */
.body-reading, .body-workflow, .body-observer { min-inline-size: 0; overflow-wrap: anywhere; }
.body-observer h3 { font-size: 1.125rem; }
.body-observer fieldset { padding-block: 16px; border-block-start: 1px solid var(--line); }
.body-observer label { margin-block-end: 12px; }
.body-observer select, .body-observer input[type=number] {
  inline-size: 100%; min-block-size: 48px; padding: 10px 12px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--control); border-radius: 8px;
}
.body-observer button { min-block-size: 44px; max-inline-size: 100%; overflow-wrap: anywhere; }
.body-observer select:focus-visible, .body-observer input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.body-mark-tools { margin-block: 16px; }
.body-mark-tools[hidden], .body-observer canvas[hidden], .body-observer label[hidden] { display: none !important; }
.body-mark-tools > label, .body-mark-tools > div { flex: 1 1 160px; }
.body-mark-source { display: flex !important; align-items: flex-start; gap: 10px; }
.body-mark-source input { margin-block-start: 6px; }
.body-newsletter-off { flex-wrap: wrap; align-items: center; gap: 12px; }
.body-newsletter-off p { margin: 0; }
.body-form textarea { font: inherit; inline-size: 100%; resize: vertical; min-block-size: 100px; }
body:has(.body-reading) .ai-dialog .ai-copy-bar { position: static; }
.body-face-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block-start: 24px; }
.body-face-guide figure { margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.body-face-guide figcaption { font-weight: 700; }
.body-face-guide svg { display: block; inline-size: 100%; max-inline-size: 220px; margin: 12px auto; }
.face-outline { fill: none; stroke: var(--ink); stroke-width: 2; }
.face-marker circle { fill: var(--ink); }
.face-marker text { fill: var(--surface); font: 700 12px sans-serif; text-anchor: middle; }
.body-face-guide ol { list-style: none; margin: 0; padding: 0; }
.body-face-guide li { display: flex; gap: 8px; margin-block: 4px; }
.body-face-guide li > span { min-inline-size: 28px; font-weight: 700; }
@media (max-width: 500px) { .body-face-guide { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 700px) { .body-observer button, .body-mark-tools > * { inline-size: 100%; } }