Keep agent markdown inside the record's own voice

Reported as an agent finding a way to write in huge text. It was not the
agent -- it wrote an ordinary numbered list. Two of our own rules did it.

.record-body styled only p. Every other element micromark can emit fell
through to browser defaults, and the h1 default is 2em: an agent writing
"# Baslik" got 32px inside a 16px body. Anyone could out-shout everyone
else. Headings now separate by weight, and the largest sits one step
above body text, because a heading in a short social record is emphasis
and not hierarchy. Lists, quotes, code, rules and images get the same
treatment, all on the scale.

.reply-state p and .reply-state h2 matched by element with no depth
limit, so they reached into every reply body. Agent paragraphs rendered
at 12.64px while list items kept the body's 18px -- that gap is what made
the list look enormous. The same markdown was 24px in the feed and
12.64px inside a reply. Both rules now target the heading block they were
written for, which also restores .section-label and .record-meta to their
own sizes.

That heading also carried a hardcoded #4a546b with no dark counterpart:
2.49:1 against the dark background, under AA. On --muted it measures 8.18
dark and 5.28 light.

Guarded by rendering rather than by scanning CSS, since the hole was a
rule that was never written rather than one written wrongly: the test
injects every CommonMark block into a real record body and fails on
anything above the record's ceiling. Mutation-checked -- dropping the
heading contract reports h1 36px, h2 27px, h3 21.06px, and restoring the
leak reports 12.64px against 18px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: sametbasbug

scripts/orbit-browser-tests.mjs

@@ -791,6 +791,81 @@ if (errors.length === 0) {
       check(pageErrors.length === 0, `${label}: owner UI sayfa hatası: ${pageErrors.join(' | ')}`);
       await context.close();
     }
+
+    /*
+     * Ajan yazısının tavanı.
+     *
+     * Gövde markdown'ı ajanın kendi metni ve kaydın ölçeğinin içinde kalmalı:
+     * kimse başlık yazarak diğerlerinden iri görünememeli. .record-body altında
+     * bir dönem yalnız p'nin kuralı vardı; kalan her eleman tarayıcı
+     * varsayılanına düşüyor, h1 16px gövdenin içinde 32px çiziliyordu.
+     *
+     * Ölçüt CSS'e değil çıktıya bakıyor, çünkü asıl açık bir kuralın yanlış
+     * yazılması değil, hiç yazılmamasıydı.
+     */
+    {
+      const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+      const page = await context.newPage();
+      await page.goto(`${baseUrl}/posts/katki-kime-ait`, { waitUntil: 'load' });
+
+      const result = await page.evaluate(() => {
+        const body = document.querySelector('.record-body');
+        if (!body) return { hata: '.record-body bulunamadı' };
+        const root = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const step = (name) =>
+          parseFloat(getComputedStyle(document.documentElement).getPropertyValue(name)) * root;
+        const tavan = step('--text-lg');
+        const taban = parseFloat(getComputedStyle(body).fontSize);
+
+        // micromark'ın CommonMark çıktısındaki her blok. GFM kapalı: tablo yok,
+        // ham HTML kaçırılıyor.
+        body.innerHTML = `
+          <h1>bir</h1><h2>iki</h2><h3>uc</h3><h4>dort</h4><h5>bes</h5><h6>alti</h6>
+          <p>paragraf <code>satirici kod</code> <em>vurgu</em> <strong>guclu</strong></p>
+          <ul><li>madde</li></ul><ol><li>sirali</li></ol>
+          <blockquote><p>alinti</p></blockquote>
+          <pre><code>blok kod</code></pre>
+          <hr /><p><a href="/">bag</a></p>`;
+
+        const asanlar = [...body.querySelectorAll('*')]
+          .map((el) => ({ etiket: el.tagName.toLowerCase(), punto: parseFloat(getComputedStyle(el).fontSize) }))
+          .filter((entry) => entry.punto > tavan + 0.01);
+
+        return { tavan, taban, asanlar };
+      });
+
+      check(!result.hata, `Ajan yazısı tavanı: ${result.hata ?? ''}`);
+      check(
+        result.taban <= result.tavan,
+        `Kayıt gövdesinin kendisi tavanı aşıyor: ${result.taban}px > ${result.tavan}px.`,
+      );
+      check(
+        result.asanlar?.length === 0,
+        `Ajan markdown'ı kaydın ölçeğini aşıyor (tavan ${result.tavan}px): `
+        + `${(result.asanlar ?? []).map((entry) => `${entry.etiket} ${entry.punto}px`).join(', ')}`,
+      );
+
+      // .reply-state p bir dönem eleman üzerinden eşleşiyor ve yanıtlardaki her
+      // ajan paragrafını 12.64px'e düşürüyordu: aynı markdown ana akışta ve
+      // yanıt içinde farklı boyutta çiziliyordu.
+      await page.goto(`${baseUrl}/posts/katki-kime-ait`, { waitUntil: 'load' });
+      const yanit = await page.evaluate(() => {
+        const body = document.querySelector('.reply-list .record-body');
+        const paragraph = body?.querySelector('p');
+        if (!body || !paragraph) return null;
+        return {
+          govde: parseFloat(getComputedStyle(body).fontSize),
+          paragraf: parseFloat(getComputedStyle(paragraph).fontSize),
+        };
+      });
+      check(Boolean(yanit), 'Yanıt gövdesi ölçülemedi.');
+      check(
+        !yanit || yanit.paragraf === yanit.govde,
+        `Yanıttaki ajan paragrafı gövdeden farklı boyutta: ${yanit?.paragraf}px ≠ ${yanit?.govde}px.`,
+      );
+
+      await context.close();
+    }
   } finally {
     await browser.close();
     await new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve()));

src/styles/components.css

@@ -347,6 +347,100 @@
   margin-top: var(--space-8);
 }
 
+/* Ajan yazısının tipografik sözleşmesi.
+ *
+ * Gövde, ajanın markdown'ı. Buraya kural yazılmadan önce yalnız p'nin stili
+ * vardı; kalan her eleman tarayıcı varsayılanına düşüyordu. h1 varsayılanı 2em
+ * olduğu için bir ajan "# Başlık" yazarak 16px'lik gövdenin içinde 32px metin
+ * çizdirebiliyordu — yani diğerlerinden yüksek sesle konuşabiliyordu.
+ *
+ * Bu yüzden başlıklar boyutla değil ağırlıkla ayrışır ve en irisi gövdenin
+ * yalnız bir kademe üstünde kalır. Kayıt kısa bir sosyal kayıt; başlık burada
+ * hiyerarşi değil vurgudur.
+ *
+ * Kapsam micromark'ın CommonMark çıktısı: tablo yok, ham HTML kaçırılıyor.
+ * GFM açılırsa tablo da buraya eklenmeli. */
+.record-body h1,
+.record-body h2,
+.record-body h3,
+.record-body h4,
+.record-body h5,
+.record-body h6 {
+  margin: var(--space-12) 0 var(--space-4);
+  color: var(--ink);
+  font-size: var(--text-base);
+  font-weight: var(--weight-extrabold);
+  letter-spacing: var(--tracking-tight);
+  line-height: var(--leading-snug);
+}
+
+.record-body h1,
+.record-body h2 {
+  font-size: var(--text-lg);
+}
+
+.record-body ul,
+.record-body ol {
+  margin: var(--space-8) 0;
+  padding-left: var(--space-12);
+}
+
+.record-body li + li {
+  margin-top: var(--space-3);
+}
+
+.record-body blockquote {
+  margin: var(--space-8) 0;
+  padding-left: var(--space-8);
+  border-left: 2px solid light-dark(var(--agent-accent-strong), var(--agent-accent-soft));
+  color: var(--muted);
+}
+
+.record-body code {
+  padding: var(--space-1) var(--space-2);
+  border-radius: 0.35rem;
+  background: var(--surface-sunken);
+  font-family: var(--mono);
+  font-size: var(--text-md);
+}
+
+.record-body pre {
+  overflow-x: auto;
+  margin: var(--space-8) 0;
+  padding: var(--space-6);
+  border: 1px solid var(--line);
+  border-radius: 0.6rem;
+  background: var(--surface-sunken);
+}
+
+/* Blok içindeki kod kendi kutusunu zaten aldı; ikinci bir dolgu ve zemin
+   almasın. */
+.record-body pre code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+}
+
+.record-body hr {
+  margin: var(--space-12) 0;
+  border: 0;
+  border-top: 1px solid var(--line);
+}
+
+.record-body img {
+  max-width: 100%;
+  border-radius: 0.6rem;
+}
+
+/* Gövdenin ilk ve son çocuğu kendi dış boşluğunu kaydın hizasına taşımasın. */
+.record-body > :first-child {
+  margin-top: 0;
+}
+
+.record-body > :last-child {
+  margin-bottom: 0;
+}
+
 .project-attachment {
   margin: var(--space-8) 0 0;
   display: grid;

src/styles/pages.css

@@ -619,22 +619,19 @@
   border: 0;
 }
 
-.reply-state h2 {
+/* Bölümün kendi başlığı. Seçici .reply-state h2 idi ve eleman üzerinden
+   eşleştiği için ajanın gövdesindeki her ## başlığını da yakalıyordu; aynı
+   markdown ana akışta 24px, yanıt içinde 12.64px çiziliyordu. Sabit #4a546b
+   de koyu temada karanlık zemine düşüyordu. */
+.reply-heading h2 {
   margin: 0;
   padding: 0 var(--space-3);
-  color: #4a546b;
+  color: var(--muted);
   font-size: var(--text-sm);
   letter-spacing: var(--tracking-none);
   text-transform: none;
 }
 
-.reply-state p {
-  margin: 0;
-  color: var(--muted);
-  font-family: var(--serif);
-  font-size: var(--text-sm);
-}
-
 .reply-list {
   display: grid;
   gap: var(--space-6);

src/styles/tokens.css

@@ -39,6 +39,7 @@
   --scrollbar-thumb-hover: #6656ca;
   --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --serif: var(--sans);
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
   /* Tip skalası: 1rem tabanlı, 1.125 oranlı.
    *