@justai/cuts 0.133.0 → 0.138.0

package/src/Posts.astro

@@ -160,415 +160,196 @@ const vars = [
 {RELABEL && <script is:inline set:html={RELABEL}></script>}
 
 <style>
-  /* ---- POSTS cut — a conversation: ONE line descends from the post's avatar and
-     connects every comment & reply (they're all replies to the post). ---- */
-  /* the cut owns its own landing offset (was `#kernel, #posts { scroll-margin-top }` in each persona —
-     which orphaned once #posts moved here and carried this component's scope cid instead of the persona's). */
-  /* The landing offset is `--shell-top` and only that — see base.css. A hardcoded twin here is a
-     second opinion the browser can pick when it scrolls to `#posts` by itself. */
-  .posts { border-block-start: 1px solid var(--border); scroll-margin-top: var(--shell-top); }
-  /* A post is hoverable because it is a link to its own page, and the hover used to say so with a grey wash
-     — `--text` at 3.5% — which reads as dimming rather than as lifting. It now uses the card material, so
-     hovering a post looks like the same gesture as hovering a catalogue card.
+  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
+     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
+  @layer justai.components {
+    /* ---- POSTS cut — a conversation: ONE line descends from the post's avatar and
+       connects every comment & reply (they're all replies to the post). ---- */
+    /* the cut owns its own landing offset (was `#kernel, #posts { scroll-margin-top }` in each persona —
+       which orphaned once #posts moved here and carried this component's scope cid instead of the persona's). */
+    /* The landing offset is `--shell-top` and only that — see base.css. A hardcoded twin here is a
+       second opinion the browser can pick when it scrolls to `#posts` by itself. */
+    .posts { border-block-start: 1px solid var(--border); scroll-margin-top: var(--shell-top); }
+    /* A post is hoverable because it is a link to its own page, and the hover used to say so with a grey wash
+       — `--text` at 3.5% — which reads as dimming rather than as lifting. It now uses the card material, so
+       hovering a post looks like the same gesture as hovering a catalogue card.
 
-     `var(--card-bg, ...)` with the old wash as the fallback ON PURPOSE. Those tokens exist in app.zone only;
-     the other eleven personas have no catalogue and never defined them, and their column already uses
-     `--surface` as its own background, so falling back to that would have made the hover invisible. This way
-     app.zone gets the material and nobody else changes at all, which is the difference between an
-     improvement and a regression in eleven repos.
+       `var(--card-bg, ...)` with the old wash as the fallback ON PURPOSE. Those tokens exist in app.zone only;
+       the other eleven personas have no catalogue and never defined them, and their column already uses
+       `--surface` as its own background, so falling back to that would have made the hover invisible. This way
+       app.zone gets the material and nobody else changes at all, which is the difference between an
+       improvement and a regression in eleven repos.
 
-     16px of horizontal padding with a matching negative margin, so the box grows outward and the text does
-     not move. 16 rather than the 18 above it because the column's own padding is 16px on a phone and 28px
-     from 768px up: at 18 the box would overflow the narrow case by 2px. Two pixels of asymmetry nobody can
-     see beats a horizontal scrollbar on a phone.
+       16px of horizontal padding with a matching negative margin, so the box grows outward and the text does
+       not move. 16 rather than the 18 above it because the column's own padding is 16px on a phone and 28px
+       from 768px up: at 18 the box would overflow the narrow case by 2px. Two pixels of asymmetry nobody can
+       see beats a horizontal scrollbar on a phone.
 
-     Square corners, stated rather than inherited — a radius here would make it a card, and it is not one:
-     it spans the column and sits directly against its neighbours. */
-  .post {
-    padding-block: 18px;
-    padding-inline: 16px;
-    margin-inline: -16px;
-    border-radius: 0;
-    cursor: pointer;
-    transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out),
-      border-radius 0.15s var(--ease-out);
-  }
-  /* THE FILL LIVES IN ITS OWN PROPERTY, and that is not tidiness — it is the difference between a hover and
-     no hover. A color-mix over a bare --card-bg (no fallback) written straight into `background` is an
-     INVALID declaration for a persona that never defined --card-bg, and an invalid declaration is dropped, so
-     those pages would answer the cursor with nothing at all. Here the fallback sits inside the mix, so the
-     value is always valid; the defaults mirror app.zone's own tokens per scheme.
-     (app.zone is the only persona on this line today, but that is a fact about the migration, not a guarantee.)
+       Square corners, stated rather than inherited — a radius here would make it a card, and it is not one:
+       it spans the column and sits directly against its neighbours. */
+    .post {
+      padding-block: 18px;
+      padding-inline: 16px;
+      margin-inline: -16px;
+      border-radius: 0;
+      cursor: pointer;
+      transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out),
+        border-radius 0.15s var(--ease-out);
+    }
+    /* THE FILL LIVES IN ITS OWN PROPERTY, and that is not tidiness — it is the difference between a hover and
+       no hover. A color-mix over a bare --card-bg (no fallback) written straight into `background` is an
+       INVALID declaration for a persona that never defined --card-bg, and an invalid declaration is dropped, so
+       those pages would answer the cursor with nothing at all. Here the fallback sits inside the mix, so the
+       value is always valid; the defaults mirror app.zone's own tokens per scheme.
+       (app.zone is the only persona on this line today, but that is a fact about the migration, not a guarantee.)
 
-     55% rather than the full card colour, and no hairline. The full-strength version was measured at 7
-     luminance steps of lift in light, and it read as a slab competing with the text — the inset hairline was
-     doing most of that. At 55% the lift is 4 in light and still 9 in dark, so it calms down where it was loud
-     without disappearing where it was already subtle. 35% was tried and rejected: 2 steps in dark, which on a
-     bright screen is nothing.
+       55% rather than the full card colour, and no hairline. The full-strength version was measured at 7
+       luminance steps of lift in light, and it read as a slab competing with the text — the inset hairline was
+       doing most of that. At 55% the lift is 4 in light and still 9 in dark, so it calms down where it was loud
+       without disappearing where it was already subtle. 35% was tried and rejected: 2 steps in dark, which on a
+       bright screen is nothing.
 
-     The radius and the scale are why it now invites rather than announces. They only exist on hover — at rest
-     the post has no box to round. */
-  .post:hover {
-    background: color-mix(in srgb, var(--card-bg, rgba(255, 255, 255, 0.06)) 55%, transparent);
-    backdrop-filter: var(--card-blur, none);
-    -webkit-backdrop-filter: var(--card-blur, none);
-    border-radius: 14px;
-    transform: scale(1.006);
-  }
-  /* The light default is white because that is what --card-bg is there; the dark default is a faint white
-     overlay because on dark --card-bg equals --surface, which is the column, so copying it would vanish. */
-  @media (prefers-color-scheme: light) {
-    :global(html:not([data-theme="dark"])) .post:hover { background: color-mix(in srgb, var(--card-bg, #fff) 55%, transparent); }
-  }
-  .post + .post { border-block-start: 1px solid var(--border); }
+       The radius and the scale are why it now invites rather than announces. They only exist on hover — at rest
+       the post has no box to round. */
+    .post:hover {
+      background: color-mix(in srgb, var(--card-bg, rgba(255, 255, 255, 0.06)) 55%, transparent);
+      backdrop-filter: var(--card-blur, none);
+      -webkit-backdrop-filter: var(--card-blur, none);
+      border-radius: 14px;
+      transform: scale(1.006);
+    }
+    /* The light default is white because that is what --card-bg is there; the dark default is a faint white
+       overlay because on dark --card-bg equals --surface, which is the column, so copying it would vanish. */
+    @media (prefers-color-scheme: light) {
+      :global(html:not([data-theme="dark"])) .post:hover { background: color-mix(in srgb, var(--card-bg, #fff) 55%, transparent); }
+    }
+    .post + .post { border-block-start: 1px solid var(--border); }
 
-  .trow { display: flex; gap: 12px; }
-  .avc { flex: none; width: 42px; display: flex; flex-direction: column; align-items: center; }
-  .ln { width: 2px; flex: 1 1 auto; min-height: 12px; margin-block-start: 6px; background: var(--border); border-radius: var(--radius-pill); }
-  .cc { flex: 1; min-width: 0; padding-block-end: 14px; }
-  .trow.last .cc { padding-block-end: 0; }
+    .trow { display: flex; gap: 12px; }
+    .avc { flex: none; width: 42px; display: flex; flex-direction: column; align-items: center; }
+    .ln { width: 2px; flex: 1 1 auto; min-height: 12px; margin-block-start: 6px; background: var(--border); border-radius: var(--radius-pill); }
+    .cc { flex: 1; min-width: 0; padding-block-end: 14px; }
+    .trow.last .cc { padding-block-end: 0; }
 
-  .pa { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 22px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
-  /* A human's avatar: their initial on a disc in their own colour, which arrives from the API as --c.
-     It was the last flat-filled object in the family, so it takes the house FILL recipe
-     (app-zone/.justai/expert/how-an-app-zone-icon-is-lit.md): an off-centre radial at 37% 31% with three
-     stops at L+22 / L+4 / L−11, so the light falls from the upper left and the lower right carries the
-     shade.
+    .pa { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 22px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
+    /* A human's avatar: their initial on a disc in their own colour, which arrives from the API as --c.
+       It was the last flat-filled object in the family, so it takes the house FILL recipe
+       (app-zone/.justai/expert/how-an-app-zone-icon-is-lit.md): an off-centre radial at 37% 31% with three
+       stops at L+22 / L+4 / L−11, so the light falls from the upper left and the lower right carries the
+       shade.
 
-     THE SPECULAR IS DELIBERATELY OMITTED, which is the one place this departs from the recipe. The doc
-     defines it as "what makes it a sphere rather than a lighter disc" — exactly right for howlong's beads,
-     which are beads, and wrong here. With it the disc read as a ball; without it the same three stops read
-     as a flat disc with light across it, which is what an avatar should be. Measured on Dana's #0a84ff: the
-     highlight sits 63 luminance steps above the flat colour instead of 94, and the rim is untouched at L99
-     either way — only the middle came down.
+       THE SPECULAR IS DELIBERATELY OMITTED, which is the one place this departs from the recipe. The doc
+       defines it as "what makes it a sphere rather than a lighter disc" — exactly right for howlong's beads,
+       which are beads, and wrong here. With it the disc read as a ball; without it the same three stops read
+       as a flat disc with light across it, which is what an avatar should be. Measured on Dana's #0a84ff: the
+       highlight sits 63 luminance steps above the flat colour instead of 94, and the rim is untouched at L99
+       either way — only the middle came down.
 
-     The stops are derived in CSS rather than precomputed, because the colour only exists at runtime.
-     `hsl(from var(--c) h s calc(l ± n))` is the rule stated literally: hue and saturation are passed
-     through untouched and lightness does all the shading. Measured — lit end 210.2° S100, shaded end
-     210.1° S100, so nothing drifts.
+       The stops are derived in CSS rather than precomputed, because the colour only exists at runtime.
+       `hsl(from var(--c) h s calc(l ± n))` is the rule stated literally: hue and saturation are passed
+       through untouched and lightness does all the shading. Measured — lit end 210.2° S100, shaded end
+       210.1° S100, so nothing drifts.
 
-     NO % ON THOSE NUMBERS. Inside relative colour syntax `l` resolves to a <number>, so `calc(l + 22%)`
-     mixes types, the declaration is dropped, and the disc silently renders flat — it looked finished and
-     measured as zero light-to-shadow difference until the units came off. `background-color` is kept as a
-     separate declaration for the same reason: where the syntax is unsupported the disc loses its light
-     rather than disappearing.
+       NO % ON THOSE NUMBERS. Inside relative colour syntax `l` resolves to a <number>, so `calc(l + 22%)`
+       mixes types, the declaration is dropped, and the disc silently renders flat — it looked finished and
+       measured as zero light-to-shadow difference until the units came off. `background-color` is kept as a
+       separate declaration for the same reason: where the syntax is unsupported the disc loses its light
+       rather than disappearing.
 
-     `max(0, 39 - l)` is the doc's L28 floor as a LIFT applied to all three stops, not a clamp on the dark
-     end: clamping compresses the spread and weakens the emboss unevenly. 39 is the shortfall threshold
-     (28 + 11), so a colour light enough to clear it adds nothing. */
-  .uav {
-    flex: none; width: 30px; height: 30px; border-radius: 50%;
-    display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff;
-    background-color: var(--c, #888);
-    background-image:
-      radial-gradient(ellipse 80% 80% at 37% 31%,
-        hsl(from var(--c, #888) h s calc(l + 22 + max(0, 39 - l))) 0%,
-        hsl(from var(--c, #888) h s calc(l + 4 + max(0, 39 - l))) 40%,
-        hsl(from var(--c, #888) h s calc(l - 11 + max(0, 39 - l))) 100%);
-  }
-  .rav { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 15px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
-  .pa :global(svg), .rav :global(svg) { display: block; }
-  .pa .mk, .rav .mk { width: 100%; height: 100%; object-fit: cover; display: block; }
-  /* a dark tile must invert in light mode, not stay dark — personas whose avatar ground is a gradient
-     pass avatarBgLight; the rest fall back to their single background. */
-  @media (prefers-color-scheme: light) { :global(html:not([data-theme="dark"])) .pa, :global(html:not([data-theme="dark"])) .rav { background: var(--feed-av-bg-light, var(--feed-av-bg, #fff)); } }
+       `max(0, 39 - l)` is the doc's L28 floor as a LIFT applied to all three stops, not a clamp on the dark
+       end: clamping compresses the spread and weakens the emboss unevenly. 39 is the shortfall threshold
+       (28 + 11), so a colour light enough to clear it adds nothing. */
+    .uav {
+      flex: none; width: 30px; height: 30px; border-radius: 50%;
+      display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff;
+      background-color: var(--c, #888);
+      background-image:
+        radial-gradient(ellipse 80% 80% at 37% 31%,
+          hsl(from var(--c, #888) h s calc(l + 22 + max(0, 39 - l))) 0%,
+          hsl(from var(--c, #888) h s calc(l + 4 + max(0, 39 - l))) 40%,
+          hsl(from var(--c, #888) h s calc(l - 11 + max(0, 39 - l))) 100%);
+    }
+    .rav { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 15px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
+    .pa :global(svg), .rav :global(svg) { display: block; }
+    .pa .mk, .rav .mk { width: 100%; height: 100%; object-fit: cover; display: block; }
+    /* a dark tile must invert in light mode, not stay dark — personas whose avatar ground is a gradient
+       pass avatarBgLight; the rest fall back to their single background. */
+    @media (prefers-color-scheme: light) { :global(html:not([data-theme="dark"])) .pa, :global(html:not([data-theme="dark"])) .rav { background: var(--feed-av-bg-light, var(--feed-av-bg, #fff)); } }
 
-  /* A bare mark stands on the feed's own ground, so the tile and its hairline have to go — and they have to
-     go from the CONTAINER, which is why this reads upward from the image with :has(). Scoping it to the image
-     is what keeps a sibling persona's tiled icon tiled: .rav wraps their reply as well as a self-reply.
-     `contain` rather than `cover`, because a mark with transparent margins must not be cropped to fill. */
-  .pa:has(.mk.bare), .rav:has(.mk.bare) {
-    background: none; border-color: transparent;
-    /* The slot rounds its corners and clips, which is right for a tile whose own corners are round and wrong
-       for a mark with no tile: the arms reach the corners, so the radius sliced their round outer tips flat.
-       Measured before the fix — 27.5px wide against 28.0 tall inside a square 30px slot, the asymmetry being
-       the clipping showing up as numbers. Nothing is left to clip once the mark is inset below, but both go
-       anyway, or a later change to the inset brings the slicing back silently. */
-    border-radius: 0; overflow: visible;
-  }
-  /* 72%, measured rather than judged. Filling the slot, the arms painted 92% of it; a sibling's tiled icon
-     paints its glyph across 61%, because the glyph sits inset within its own tile. So app.zone carried half
-     again the painted width of every persona it was replying to, in a thread where it is one speaker among
-     peers rather than the platform above them. At 72% the arms land near 67% — a shade above the siblings,
-     which suits a bracket form being lighter than a filled ring. The feed permalink page uses the same number
-     for the same reason; the two surfaces render one conversation and must not disagree about it. */
-  .pa .mk.bare, .rav .mk.bare { width: 72%; height: 72%; object-fit: contain; }
-  /* The scheme pair: the page decides, because the SVG's own media query does not survive <img>.
-     Written as `.pa .mk.av-*` rather than `.av-*` deliberately — `.pa .mk { display: block }` above is two
-     classes deep, so a single-class `.av-light { display: none }` loses on specificity and the toggle silently
-     does nothing. Measured: it showed the pale-ground file in both schemes until these selectors matched. */
-  .pa .mk.av-dark, .rav .mk.av-dark { display: none; }
-  @media (prefers-color-scheme: dark) {
-    .pa .mk.av-light, .rav .mk.av-light { display: none; }
-    .pa .mk.av-dark, .rav .mk.av-dark { display: block; }
-  }
-  /* The dark fork's data-theme twin: a light-system page forced dark must swap the marks too. */
-  :global(html[data-theme="dark"]) .pa .mk.av-light, :global(html[data-theme="dark"]) .rav .mk.av-light { display: none; }
-  :global(html[data-theme="dark"]) .pa .mk.av-dark, :global(html[data-theme="dark"]) .rav .mk.av-dark { display: block; }
+    /* A bare mark stands on the feed's own ground, so the tile and its hairline have to go — and they have to
+       go from the CONTAINER, which is why this reads upward from the image with :has(). Scoping it to the image
+       is what keeps a sibling persona's tiled icon tiled: .rav wraps their reply as well as a self-reply.
+       `contain` rather than `cover`, because a mark with transparent margins must not be cropped to fill. */
+    .pa:has(.mk.bare), .rav:has(.mk.bare) {
+      background: none; border-color: transparent;
+      /* The slot rounds its corners and clips, which is right for a tile whose own corners are round and wrong
+         for a mark with no tile: the arms reach the corners, so the radius sliced their round outer tips flat.
+         Measured before the fix — 27.5px wide against 28.0 tall inside a square 30px slot, the asymmetry being
+         the clipping showing up as numbers. Nothing is left to clip once the mark is inset below, but both go
+         anyway, or a later change to the inset brings the slicing back silently. */
+      border-radius: 0; overflow: visible;
+    }
+    /* 72%, measured rather than judged. Filling the slot, the arms painted 92% of it; a sibling's tiled icon
+       paints its glyph across 61%, because the glyph sits inset within its own tile. So app.zone carried half
+       again the painted width of every persona it was replying to, in a thread where it is one speaker among
+       peers rather than the platform above them. At 72% the arms land near 67% — a shade above the siblings,
+       which suits a bracket form being lighter than a filled ring. The feed permalink page uses the same number
+       for the same reason; the two surfaces render one conversation and must not disagree about it. */
+    .pa .mk.bare, .rav .mk.bare { width: 72%; height: 72%; object-fit: contain; }
+    /* The scheme pair: the page decides, because the SVG's own media query does not survive <img>.
+       Written as `.pa .mk.av-*` rather than `.av-*` deliberately — `.pa .mk { display: block }` above is two
+       classes deep, so a single-class `.av-light { display: none }` loses on specificity and the toggle silently
+       does nothing. Measured: it showed the pale-ground file in both schemes until these selectors matched. */
+    .pa .mk.av-dark, .rav .mk.av-dark { display: none; }
+    @media (prefers-color-scheme: dark) {
+      .pa .mk.av-light, .rav .mk.av-light { display: none; }
+      .pa .mk.av-dark, .rav .mk.av-dark { display: block; }
+    }
+    /* The dark fork's data-theme twin: a light-system page forced dark must swap the marks too. */
+    :global(html[data-theme="dark"]) .pa .mk.av-light, :global(html[data-theme="dark"]) .rav .mk.av-light { display: none; }
+    :global(html[data-theme="dark"]) .pa .mk.av-dark, :global(html[data-theme="dark"]) .rav .mk.av-dark { display: block; }
 
-  .ph { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); flex-wrap: wrap; }
-  .ph b { font-weight: 600; }
-  .phandle, .dot, .pt { color: var(--text-dim); font-weight: 400; }
-  /* a persona's name in the feed links to its profile (X-style); humans have no link */
-  .pn { color: inherit; text-decoration: none; }
-  /* `a.pn`, not `.pn` — a persona whose home we were not told renders as a span, and a name that
-     lights up under the cursor while going nowhere is a promise the markup cannot keep. */
-  a.pn:hover b { color: var(--accent-text, var(--accent)); }
-  a.pt { text-decoration: none; }
-  a.pt:hover { text-decoration: underline; }
-  .pbd { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 4px; }
-  /* The translation notice — dim, small, directly under the words it is about, and carrying the ONE
-     link back to what the persona actually wrote, so the link is the only lit thing in the row.
-     Matches the feed permalink page exactly: the two surfaces render one conversation. */
-  .tnote { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-block-start: 6px; font-size: var(--fs-2xs); color: var(--text-dim); }
-  .tnote a { color: var(--confirm-accent, var(--accent)); text-decoration: none; }
-  .tnote a:hover { text-decoration: underline; }
-  .pact { display: flex; gap: 22px; margin-block-start: 12px; color: var(--text-dim); }
-  .pact svg { width: 17px; height: 17px; }
-  .pact span { cursor: pointer; transition: color 0.2s; }
-  .pact span:hover { color: var(--accent-text, var(--accent)); }
-  .ch { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); }
-  .ch b { font-weight: 600; }
-  .ch .muted { color: var(--text-dim); font-weight: 400; }
-  .ck { width: 14px; height: 14px; flex: none; }
-  .cb { font-size: var(--fs-xs); line-height: 1.45; margin-block-start: 2px; }
+    .ph { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); flex-wrap: wrap; }
+    .ph b { font-weight: 600; }
+    .phandle, .dot, .pt { color: var(--text-dim); font-weight: 400; }
+    /* a persona's name in the feed links to its profile (X-style); humans have no link */
+    .pn { color: inherit; text-decoration: none; }
+    /* `a.pn`, not `.pn` — a persona whose home we were not told renders as a span, and a name that
+       lights up under the cursor while going nowhere is a promise the markup cannot keep. */
+    a.pn:hover b { color: var(--accent-text, var(--accent)); }
+    a.pt { text-decoration: none; }
+    a.pt:hover { text-decoration: underline; }
+    .pbd { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 4px; }
+    /* The translation notice — dim, small, directly under the words it is about, and carrying the ONE
+       link back to what the persona actually wrote, so the link is the only lit thing in the row.
+       Matches the feed permalink page exactly: the two surfaces render one conversation. */
+    .tnote { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-block-start: 6px; font-size: var(--fs-2xs); color: var(--text-dim); }
+    .tnote a { color: var(--confirm-accent, var(--accent)); text-decoration: none; }
+    .tnote a:hover { text-decoration: underline; }
+    .pact { display: flex; gap: 22px; margin-block-start: 12px; color: var(--text-dim); }
+    .pact svg { width: 17px; height: 17px; }
+    .pact span { cursor: pointer; transition: color 0.2s; }
+    .pact span:hover { color: var(--accent-text, var(--accent)); }
+    .ch { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); }
+    .ch b { font-weight: 600; }
+    .ch .muted { color: var(--text-dim); font-weight: 400; }
+    .ck { width: 14px; height: 14px; flex: none; }
+    .cb { font-size: var(--fs-xs); line-height: 1.45; margin-block-start: 2px; }
 
-  /* the maker's signature — every persona signs off with justai.pro */
-  .z-foot { text-align: center; color: var(--text-dim); font-size: var(--fs-2xs); padding-block: 24px max(16px, env(safe-area-inset-bottom)); }
-  /* Underlined, deliberately: a link inside body text must not rely on colour alone to be seen
-     (WCAG link-in-text-block — the twins' quality gate flagged it where accent-vs-dim contrast ran
-     thin). The offset keeps it quiet; the ability to see it does not depend on your colour vision. */
-  /* --confirm-accent, then --accent: the raw accent is a BRAND colour, not a text colour — at this
-     size on a light ground Apple blue reads 3.2:1. The fleet already solved this once, for the
-     sheet: every persona carries a hue-preserving darkened accent that clears 4.5 as text. A link
-     is text; it uses the text-grade accent. */
-  .z-foot a { color: var(--confirm-accent, var(--accent)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
+    /* the maker's signature — every persona signs off with justai.pro */
+    .z-foot { text-align: center; color: var(--text-dim); font-size: var(--fs-2xs); padding-block: 24px max(16px, env(safe-area-inset-bottom)); }
+    /* Underlined, deliberately: a link inside body text must not rely on colour alone to be seen
+       (WCAG link-in-text-block — the twins' quality gate flagged it where accent-vs-dim contrast ran
+       thin). The offset keeps it quiet; the ability to see it does not depend on your colour vision. */
+    /* --confirm-accent, then --accent: the raw accent is a BRAND colour, not a text colour — at this
+       size on a light ground Apple blue reads 3.2:1. The fleet already solved this once, for the
+       sheet: every persona carries a hue-preserving darkened accent that clears 4.5 as text. A link
+       is text; it uses the text-grade accent. */
+    .z-foot a { color: var(--confirm-accent, var(--accent)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
+  }
 </style>
 
-<script>
-  // The persona's feed — loaded at RUNTIME from the console (api.justai.pro), lazily (only when the Posts
-  // cut nears the viewport, since the page lands on the Kernel). The renderer reproduces the server
-  // markup 1:1, so the design is unchanged; new posts appear with no redeploy. Single source: the console.
-  (function () {
-    const section = document.getElementById("posts");
-    const feed = document.getElementById("feed");
-    if (!section || !feed) return;
-    // the persona identity travels on the section as data-attributes (the static cut set them from props).
-    // PERSONA is the KEY (feed query + the "is this reply mine?" test); HANDLE is what is rendered after
-    // the @ (they differ for the two apexes: app.zone → @appzone, justai → @justai.pro). NAME is the
-    // persona's OWN name and is injected RAW — it is authored in the persona's source, never user input,
-    // so it may carry markup (justai's ".pro" span). Every name that comes from the API is escaped.
-    const PERSONA = section.dataset.persona || "";
-    const NAME = section.dataset.name || "";
-    // THE PAGE'S LANGUAGE. `data-lang` is present only when the persona STATED it; otherwise the
-    // document's own `lang` is read, which is the one place every persona in this fleet agrees —
-    // `Astro.currentLocale` is undefined under `[lang]` routing and cannot be the fallback it looks
-    // like. Not localStorage either: on a localized home the language is in the URL, settled before
-    // this ran, and a link shared in Turkish must open in Turkish for whoever follows it.
-    const LANG = (section.dataset.lang || document.documentElement.lang || "en").toLowerCase().split("-")[0];
-    if (!PERSONA) return;
-    // Astro scopes this component's CSS by a data-astro-cid-* attribute; runtime nodes lack it, so copy it.
-    const scopeAttr = section.getAttributeNames().find((n) => n.startsWith("data-astro-cid-")) || null;
-
-    // Twitter-style: clicking anywhere on a post (except a real link) opens its feed page.
-    // The "show original" link is handled first and swallowed — it is a control, not a destination.
-    feed.addEventListener("click", (e) => {
-      const t = e.target as HTMLElement;
-      const tog = t.closest("[data-toggle-original]") as HTMLElement | null;
-      if (tog) {
-        const art = tog.closest(".post");
-        const body = art?.querySelector(".pbd") as HTMLElement | null;
-        const state = art?.querySelector("[data-tstate]") as HTMLElement | null;
-        // Only take over the click once everything it needs is in hand. If the markup ever changes
-        // shape the link stays a link and still reaches the original — a control that degrades to
-        // working beats one that silently does nothing.
-        if (!body || !state) return;
-        e.preventDefault();
-        const showing = tog.textContent === tog.dataset.showTranslation;
-        body.textContent = showing ? tog.dataset.translation! : tog.dataset.original!;
-        body.setAttribute("lang", (showing ? tog.dataset.lang : tog.dataset.originalLang) || "");
-        tog.textContent = showing ? tog.dataset.showOriginal! : tog.dataset.showTranslation!;
-        state.textContent = showing ? tog.dataset.translated! : tog.dataset.originalLabel!;
-        return;
-      }
-      if (t.closest("a")) return;
-      const art = t.closest(".post[data-href]") as HTMLElement | null;
-      if (art?.dataset.href) location.assign(art.dataset.href);
-    });
-
-    const esc = (s: unknown): string =>
-      String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] as string);
-    // Every persona signs its posts with its own face, /icon.svg by default (each app serves one at its
-    // root). The path is a data attribute rather than a literal because a persona may sign with a mark that
-    // has no tile — see avatarSrc / avatarBare above. `bare` rides on the IMAGE, not on the container:
-    // .rav wraps both a self-reply and ANOTHER persona's reply, so a container rule would strip the tile
-    // from siblings who legitimately have one.
-    const bare = section.hasAttribute("data-av-bare") ? " bare" : "";
-    const avLight = esc(section.dataset.av || "/icon.svg");
-    // When a dark twin is declared, BOTH are in the markup and CSS shows one. The alternative — one <img>
-    // whose src is chosen in JS off matchMedia — would be a second source of truth for the same decision and
-    // would not follow a scheme change without a listener.
-    const AV = section.dataset.avDark
-      ? `<img class="mk${bare} av-light" src="${avLight}" alt=""><img class="mk${bare} av-dark" src="${esc(section.dataset.avDark)}" alt="">`
-      : `<img class="mk${bare}" src="${avLight}" alt="">`;
-    const ck = `<svg class="ck" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 1.8 3 .2.9 2.8 2.3 1.9-1 2.8 1 2.8-2.3 1.9-.9 2.8-3 .2L12 22l-2.4-1.8-3-.2-.9-2.8L3.4 14l1-2.8-1-2.8 2.3-1.9.9-2.8 3-.2z" fill="var(--accent)"/><path d="M9 12.5l2 2 4-4.5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-    const pact = `<div class="pact"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8.5a5.5 5.5 0 0 0-9-4.2A5.5 5.5 0 0 0 3 8.5c0 5 9 11 9 11s9-6 9-11z"/></svg></span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.3 9.6 9.6 0 0 1-4-.9L3 21l1.1-5A8.4 8.4 0 1 1 21 11.5z"/></svg></span></div>`;
-
-    type C = { body: string; createdAt: string | null; authorHandle: string; authorName: string; authorColor: string | null; isPersona: boolean; authorAvatar: string | null; authorGlyph: string | null; personaUrl: string | null };
-    // `lang` is what `body` IS; `translated` says a machine made it. Both are optional so this cut
-    // still renders against a console that predates them — the fleet installs its packages on its own
-    // schedule, and a persona that has not been bumped must not lose its feed.
-    type P = { id: string; body: string; lang?: string; originalLang?: string; originalBody?: string | null; translated?: boolean; createdAt: string | null; comments: C[] };
-
-    // queries: translated automatically · show original · machine translation notice on the home feed
-    //
-    // THE SAME LINE THE PERMALINK PAGE SHOWS, because they render one conversation and must not
-    // disagree about it. The original is canonical, marked, and one tap away — that pairing IS the
-    // doctrine (dna/entities/localization.md), not a courtesy.
-    //
-    // Thirteen strings rather than a lookup through the persona's own dictionary: this cut ships to
-    // every persona and cannot reach into any of their locale files. ~400 bytes, said once, for the
-    // whole fleet — the alternative is the same sentence copied into thirteen files times thirty
-    // repos, which is the shape `tagline.js` already exists to prevent.
-    const TRANSLATED: Record<string, string> = {
-      en: "Translated automatically", tr: "Otomatik olarak çevrildi", es: "Traducido automáticamente",
-      de: "Automatisch übersetzt", fr: "Traduit automatiquement", pt: "Traduzido automaticamente",
-      it: "Tradotto automaticamente", nl: "Automatisch vertaald", ru: "Переведено автоматически",
-      ja: "自動翻訳", zh: "自动翻译", ar: "تُرجم آليًا", hi: "स्वचालित रूप से अनूदित",
-    };
-    const SHOW_ORIGINAL: Record<string, string> = {
-      en: "Show original", tr: "Orijinali göster", es: "Ver original", de: "Original anzeigen",
-      fr: "Afficher l'original", pt: "Ver original", it: "Mostra originale", nl: "Origineel weergeven",
-      ru: "Показать оригинал", ja: "原文を表示", zh: "显示原文", ar: "عرض النص الأصلي", hi: "मूल दिखाएँ",
-    };
-    // The way BACK. It is a toggle, not a door: swapping in place keeps the reader on the feed they
-    // were reading, in the language they set — the alternative walks them to the permalink and hands
-    // them the whole page in English for the sake of one paragraph.
-    const SHOW_TRANSLATION: Record<string, string> = {
-      en: "Show translation", tr: "Çeviriyi göster", es: "Ver traducción", de: "Übersetzung anzeigen",
-      fr: "Afficher la traduction", pt: "Ver tradução", it: "Mostra traduzione", nl: "Vertaling weergeven",
-      ru: "Показать перевод", ja: "翻訳を表示", zh: "显示翻译", ar: "عرض الترجمة", hi: "अनुवाद दिखाएँ",
-    };
-
-    // Relative timestamps are DERIVED from each post/comment's real createdAt (never a stored string),
-    // localized to the visitor's language and recomputed at read time — so they age honestly.
-    const agoLang = (() => { try { return localStorage.getItem("lang") || document.documentElement.lang || "en"; } catch { return "en"; } })();
-    const agoRtf = (() => { try { return new Intl.RelativeTimeFormat(agoLang, { numeric: "auto", style: "narrow" }); } catch { return new Intl.RelativeTimeFormat("en", { numeric: "auto", style: "narrow" }); } })();
-    const timeAgo = (iso: string | null): string => {
-      if (!iso) return "";
-      const t = Date.parse(iso);
-      if (Number.isNaN(t)) return "";
-      let s = Math.round((Date.now() - t) / 1000);
-      if (s < 0) s = 0;
-      if (s < 60) return agoRtf.format(-s, "second");
-      const m = Math.floor(s / 60); if (m < 60) return agoRtf.format(-m, "minute");
-      const h = Math.floor(m / 60); if (h < 24) return agoRtf.format(-h, "hour");
-      const d = Math.floor(h / 24); if (d < 7) return agoRtf.format(-d, "day");
-      const w = Math.floor(d / 7); if (w < 5) return agoRtf.format(-w, "week");
-      const mo = Math.floor(d / 30); if (mo < 12) return agoRtf.format(-mo, "month");
-      return agoRtf.format(-Math.floor(d / 365), "year");
-    };
-    // queries: a persona's name links to the wrong place · a comment links to a host that does not
-    //          exist · pin.games persona linked to app.zone · where does a commenter's name go
-    //
-    // WHERE A PERSONA LIVES IS A FACT WE ARE TOLD, NOT ONE WE DERIVE. The API sends `personaUrl`,
-    // built from the registry's own `home`, for every persona that has one — and `home` is required
-    // by the manifest, so in practice that is all of them.
-    //
-    // There used to be a fallback here that guessed: justai → justai.pro, app.zone → app.zone, and
-    // everything else → `${handle}.app.zone`. It was correct for exactly as long as one apex existed.
-    // The day a game persona comments on a feed, that guess sends the reader to a host that has never
-    // existed — and it does it silently, in a link, on somebody else's page.
-    //
-    // So there is no fallback now. If we were not told where a persona lives, its name is rendered
-    // WITHOUT a link: a name that goes nowhere is a small disappointment, and a name that goes
-    // somewhere wrong is a broken ecosystem seen by a stranger.
-    const comment = (c: C, last: boolean): string => {
-      const ln = last ? "" : `<span class="ln"></span>`;
-      if (c.isPersona) {
-        // THE SOCIAL LAYER: personas reply on each other's feeds. A self-reply wears this persona's own
-        // face and name; ANOTHER persona wears ITS canonical icon (glyph fallback), its own name, its
-        // @handle, and its name links to its own profile. The verified check stays for both.
-        const own = c.authorHandle === PERSONA;
-        const av = own
-          ? AV
-          : c.authorAvatar
-            ? `<img class="mk" src="${esc(c.authorAvatar)}" alt="">`
-            : `<span style="font-size:16px">${esc(c.authorGlyph || "✦")}</span>`;
-        const nm = own ? NAME : esc(c.authorName); // own name is authored markup; an API name is escaped
-        const purl = own ? "#profile" : c.personaUrl ? `${c.personaUrl}/#profile` : null;
-        const at = own ? PERSONA : c.authorHandle;
-        const meta = `${at ? `@${esc(at)} ` : ""}· ${timeAgo(c.createdAt)}`;
-        const nameEl = purl ? `<a class="pn" href="${esc(purl)}"><b>${nm}</b></a>` : `<span class="pn"><b>${nm}</b></span>`;
-        return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="rav">${av}</span>${ln}</div><div class="cc"><div class="ch">${nameEl}${ck}<span class="muted">${meta}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
-      }
-      const initial = esc(String(c.authorName || "?").slice(0, 1));
-      // A person needs the handle MORE than a persona does — display names collide constantly among
-      // people. Guarded on the value: a principal with none shows a gap, never a bare "@".
-      const uat = c.authorHandle ? `@${esc(c.authorHandle)} ` : "";
-      return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="uav" style="--c:${esc(c.authorColor || "#888")}">${initial}</span>${ln}</div><div class="cc"><div class="ch"><b>${esc(c.authorName)}</b><span class="muted">${uat}· ${timeAgo(c.createdAt)}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
-    };
-    const post = (p: P): string => {
-      const cs = p.comments || [];
-      const inner = cs.map((c, i) => comment(c, i === cs.length - 1)).join("");
-      // Twitter-style permalink: the timestamp links to the post's feed page, and the whole post is
-      // clickable (the delegated handler above). n = the post id's last segment ("post:qr:7" → 7).
-      const n = String(p.id || "").split(":").pop() || "";
-      // queries: clicking a post loses my language · the permalink is English · navigation language
-      //
-      // EVERY NAVIGATION STAYS IN THE READER'S LANGUAGE — the founder's rule, and it is stronger than
-      // "link to the translation when there is one". Set a persona to Italian and EVERY page of it is
-      // Italian; a post with no Italian gives the original words with Italian chrome around them, and
-      // `/feed/{n}/it` renders exactly that rather than 404ing.
-      //
-      // The one URL that carries no segment is the post read in the language it was written in: there
-      // is no "translation into the original", so the permalink is already that page.
-      const orig = p.originalLang || "en";
-      const tr = !!p.translated && !!p.originalBody;
-      const base = n ? `/feed/${n}` : "";
-      const perma = base && LANG !== orig ? `${base}/${LANG}` : base;
-      const pt = perma ? `<a class="pt" href="${perma}">${timeAgo(p.createdAt)}</a>` : `<span class="pt">${timeAgo(p.createdAt)}</span>`;
-      // The way back, in the language of the person reading it. A real <a> so the delegated
-      // click-anywhere handler above lets it through — it returns early on any link.
-      // Both texts ride in the markup so the swap is instant and needs no second request. The link
-      // keeps a real href — without scripts it still reaches the original's own page.
-      const note = tr
-        ? `<p class="tnote" dir="auto"><span data-tstate>${esc(TRANSLATED[LANG] ?? TRANSLATED.en)}</span><span class="dot">·</span>` +
-          `<a href="${base}" data-toggle-original data-original="${esc(p.originalBody)}" data-translation="${esc(p.body)}"` +
-          ` data-show-original="${esc(SHOW_ORIGINAL[LANG] ?? SHOW_ORIGINAL.en)}" data-show-translation="${esc(SHOW_TRANSLATION[LANG] ?? SHOW_TRANSLATION.en)}"` +
-          ` data-translated="${esc(TRANSLATED[LANG] ?? TRANSLATED.en)}" data-original-label="${esc(orig.toUpperCase())} · ${esc(NAME).replace(/<[^>]*>/g, "")}"` +
-          ` data-original-lang="${esc(orig)}" data-lang="${esc(p.lang || LANG)}">${esc(SHOW_ORIGINAL[LANG] ?? SHOW_ORIGINAL.en)}</a></p>`
-        : "";
-      // `dir="auto"` on the body: an Arabic post inside an LTR page — and the reverse — must lay
-      // itself out from its own first strong character, not from the page around it.
-      return `<article class="post"${perma ? ` data-href="${perma}"` : ""}><div class="trow"><div class="avc"><span class="pa">${AV}</span>${cs.length ? '<span class="ln"></span>' : ""}</div><div class="cc"><div class="ph"><a class="pn" href="#profile"><b>${NAME}</b></a>${ck}${PERSONA ? `<span class="phandle">@${esc(PERSONA)}</span>` : ""}<span class="dot">·</span>${pt}</div><p class="pbd" dir="auto"${tr ? ` lang="${esc(p.lang)}"` : ""}>${esc(p.body)}</p>${note}${pact}</div></div>${inner}</article>`;
-    };
-
-    let done = false;
-    const load = async (): Promise<void> => {
-      if (done) return;
-      done = true;
-      try {
-        // `lang` rides in the query because it IS the content here — api.justai.pro is CDN'd with the
-        // query string in the cache key, so this is one more entry rather than one more origin hit.
-        const res = await fetch(
-          "https://api.justai.pro/api/feed?persona=" + encodeURIComponent(PERSONA) + "&lang=" + encodeURIComponent(LANG));
-        if (!res.ok) return;
-        const data = await res.json();
-        feed.innerHTML = ((data.posts as P[]) || []).map(post).join("");
-        if (scopeAttr) feed.querySelectorAll("*").forEach((el) => el.setAttribute(scopeAttr, ""));
-      } catch {
-        /* offline → the feed simply stays empty; the rest of the page is unaffected */
-      }
-    };
-
-    if ("IntersectionObserver" in window) {
-      const io = new IntersectionObserver((es, obs) => {
-        if (es.some((e) => e.isIntersecting)) { obs.disconnect(); load(); }
-      }, { rootMargin: "400px" });
-      io.observe(section);
-    } else {
-      load();
-    }
-  })();
-</script>
+  <script>
+    // The behaviour lives in ./behaviour/posts.ts — see that file for why it is not in here.
+    import "./behaviour/posts";
+  </script>