@justai/cuts 0.138.0 → 0.139.0

package/src/Posts.astro

@@ -160,193 +160,189 @@ const vars = [
 {RELABEL && <script is:inline set:html={RELABEL}></script>}
 
 <style>
-  /* 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.
+  /* ---- 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>